/* ==========================================================================
   SamanVoip Design System
   Brand theme layer — loads AFTER bootstrap / bootstrap-rtl / site.css
   and overrides them with a modern, professional visual language.
   ========================================================================== */

:root{
    --sv-navy-900:#171444;
    --sv-navy-800:#1e1c58;
    --sv-navy-700:#26326c;
    --sv-indigo-600:#4c4ea1;
    --sv-indigo-500:#6067af;
    --sv-indigo-400:#7c82c2;
    --sv-lavender-200:#cad1ea;
    --sv-lavender-100:#e5e9f6;
    --sv-lavender-050:#f6f8fc;
    --sv-gold-600:#a97a20;
    --sv-gold-500:#c4932d;
    --sv-gold-400:#d9ab4c;
    --sv-gold-100:#f6e8d2;
    --sv-white:#ffffff;
    --sv-text:#20233f;
    --sv-text-muted:#6c7291;
    --sv-text-soft:#9096b3;
    --sv-border:#e4e8f5;
    --sv-success:#1fab6f;
    --sv-success-bg:#e6f7f0;
    --sv-danger:#e0475f;
    --sv-danger-bg:#fdeaed;
    --sv-warning:#e2a336;
    --sv-warning-bg:#fdf3e1;
    --sv-info:#3aa0d1;
    --sv-info-bg:#e8f5fb;
    --sv-bg:#f4f6fb;
    --sv-radius-lg:16px;
    --sv-radius:10px;
    --sv-radius-sm:6px;
    --sv-shadow-xs:0 1px 3px rgba(23,20,68,.06);
    --sv-shadow-sm:0 4px 14px rgba(23,20,68,.07);
    --sv-shadow-md:0 12px 32px rgba(23,20,68,.12);
    --sv-shadow-lg:0 24px 64px rgba(23,20,68,.22);
    --sv-gradient-brand:linear-gradient(135deg,var(--sv-navy-900) 0%,var(--sv-navy-700) 52%,var(--sv-indigo-600) 100%);
    --sv-gradient-accent:linear-gradient(135deg,var(--sv-indigo-600) 0%,var(--sv-indigo-500) 100%);
    --sv-gradient-gold:linear-gradient(135deg,var(--sv-gold-400) 0%,var(--sv-gold-600) 100%);
}

/* ==========================================================================
   0. Base
   ========================================================================== */
html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

body{
    background:var(--sv-bg) !important;
    color:var(--sv-text);
}

a{ color:var(--sv-indigo-600); }
a:hover, a:focus{ color:var(--sv-navy-700); }

::selection{ background:var(--sv-lavender-200); color:var(--sv-navy-900); }

/* Scrollbars */
*{ scrollbar-width:thin; scrollbar-color:var(--sv-indigo-400) transparent; }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--sv-lavender-200); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:var(--sv-indigo-400); }

/* ==========================================================================
   1. Buttons
   ========================================================================== */
.btn{
    border-radius:var(--sv-radius-sm);
    font-weight:600;
    letter-spacing:.1px;
    border:1px solid transparent;
    transition:all .18s ease;
    box-shadow:none;
}
.btn:active{ transform:translateY(1px); }

.btn-primary{
    background:var(--sv-gradient-accent);
    border-color:var(--sv-indigo-600);
    color:#fff;
    box-shadow:0 4px 12px rgba(76,78,161,.28);
}
.btn-primary:hover,
.btn-primary:focus{
    background:linear-gradient(135deg,var(--sv-indigo-500),var(--sv-navy-700));
    border-color:var(--sv-navy-700);
    color:#fff;
    box-shadow:0 6px 18px rgba(76,78,161,.38);
}
.btn-primary:active,
.btn-primary.active{
    background:var(--sv-navy-700) !important;
    border-color:var(--sv-navy-700) !important;
}

.btn-default{
    background:#fff;
    border-color:var(--sv-border);
    color:var(--sv-text);
}
.btn-default:hover,
.btn-default:focus{
    background:var(--sv-lavender-050);
    border-color:var(--sv-indigo-400);
    color:var(--sv-navy-700);
}

.btn-success{ background:var(--sv-success); border-color:var(--sv-success); }
.btn-success:hover{ background:#188658; border-color:#188658; }

.btn-danger{ background:var(--sv-danger); border-color:var(--sv-danger); }
.btn-danger:hover{ background:#c73249; border-color:#c73249; }

.btn-info{ background:var(--sv-info); border-color:var(--sv-info); }

.btn-warning{ background:var(--sv-gold-500); border-color:var(--sv-gold-500); color:#fff; }
.btn-warning:hover{ background:var(--sv-gold-600); border-color:var(--sv-gold-600); }

.btn-gold{
    background:var(--sv-gradient-gold);
    border-color:var(--sv-gold-500);
    color:#fff;
    box-shadow:0 4px 12px rgba(196,147,45,.30);
}
.btn-gold:hover{ color:#fff; box-shadow:0 6px 18px rgba(196,147,45,.4); }

.btn-big-width{ width:100%; padding:10px 18px; font-size:15px; }

/* ==========================================================================
   2. Forms
   ========================================================================== */
.form-control{
    border:1px solid var(--sv-border);
    border-radius:var(--sv-radius-sm);
    box-shadow:none;
    background:#fbfcfe;
    color:var(--sv-text);
    transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.form-control:focus{
    border-color:var(--sv-indigo-500);
    box-shadow:0 0 0 3px rgba(76,78,161,.15);
    background:#fff;
}
label{ color:var(--sv-text-muted); font-weight:600; font-size:13px; }

/* ==========================================================================
   3. Panels / Cards
   ========================================================================== */
.panel{
    border:1px solid var(--sv-border);
    border-radius:var(--sv-radius);
    box-shadow:var(--sv-shadow-sm);
    background:#fff;
}
.panel-heading{
    background:#fff !important;
    border-bottom:1px solid var(--sv-border) !important;
    border-radius:var(--sv-radius) var(--sv-radius) 0 0 !important;
    padding:14px 18px;
}
.panel-heading h5,
.panel-heading h4,
.panel-heading h3{
    margin:0;
    font-weight:700;
    color:var(--sv-navy-800);
    font-size:14px;
    display:flex;
    align-items:center;
    gap:8px;
}
.panel-heading h5:before{
    content:"";
    display:inline-block;
    width:4px;
    height:16px;
    border-radius:3px;
    background:var(--sv-gradient-accent);
    margin-inline-end:8px;
}
.panel-body{ padding:18px; }
.panel-footer{ background:#fbfcfe; border-top:1px solid var(--sv-border); }

.panel-success > .panel-heading h5:before{ background:var(--sv-success); }
.panel-info > .panel-heading h5:before{ background:var(--sv-info); }
.panel-warning > .panel-heading h5:before{ background:var(--sv-gold-500); }
.panel-danger > .panel-heading h5:before{ background:var(--sv-danger); }
.panel-primary > .panel-heading h5:before{ background:var(--sv-indigo-600); }

.panel-default,.panel-success,.panel-info,.panel-warning,.panel-danger,.panel-primary{
    border-color:var(--sv-border);
}

/* ==========================================================================
   4. Tables
   ========================================================================== */
.table{ color:var(--sv-text); }
.table > thead > tr > th{
    border-bottom:2px solid var(--sv-border);
    color:var(--sv-text-muted);
    font-weight:700;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.4px;
}
.table > tbody > tr > td{ border-top:1px solid var(--sv-border); vertical-align:middle; }
.table-hover > tbody > tr:hover{ background-color:var(--sv-lavender-050); }
.table-striped > tbody > tr:nth-of-type(odd){ background-color:#fbfcfe; }

/* ==========================================================================
   5. Alerts / Badges
   ========================================================================== */
.alert{ border:none; border-radius:var(--sv-radius-sm); border-inline-start:4px solid transparent; font-weight:500; }
.alert-danger{ background:var(--sv-danger-bg); color:#9c1c34; border-inline-start-color:var(--sv-danger); }
.alert-success{ background:var(--sv-success-bg); color:#0e6b45; border-inline-start-color:var(--sv-success); }
.alert-warning{ background:var(--sv-warning-bg); color:#8a5c10; border-inline-start-color:var(--sv-gold-500); }
.alert-info{ background:var(--sv-info-bg); color:#1c6690; border-inline-start-color:var(--sv-info); }

.badge{ background:var(--sv-indigo-600); font-weight:600; }
.badge-notify{ background:var(--sv-gold-500) !important; box-shadow:0 0 0 2px #fff; }

/* ==========================================================================
   6. Top navbar (.site-header) — used on every authenticated page
   ========================================================================== */
.site-header{
    background:var(--sv-gradient-brand) !important;
    border-bottom:none !important;
    box-shadow:0 2px 12px rgba(23,20,68,.18);
    padding:6px 0;
}
.sv-topbar-left{
    display:flex;
    align-items:center;
}
.sv-topbar-brand{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin:13px 20px;
    text-decoration:none;
}
.sv-topbar-brand:hover{ text-decoration:none; opacity:.92; }
#btn-apply-config{
	width: 150px;
    margin-inline-start:6px;
    align-self:center;
}
.sv-topbar-brand img{
    height:36px !important;
    width:36px !important;
    max-height:36px !important;
    max-width:36px !important;
    border-radius:9px;
    box-shadow:0 4px 14px rgba(0,0,0,.22);
    display:block;
}
.sv-brand-name-sm{ font-size:17px; font-weight:800; color:#fff; letter-spacing:.2px; }
.sv-brand-name-sm span{ color:var(--sv-gold-400); }
#top-left-menu{ padding-top:14px; padding-bottom:14px; }

.toolbox-item{ display:inline-block; vertical-align:middle; margin-inline-start:8px; }
.toolbox-item .notification-icon{
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.18);
    border-radius:50%;
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    color:#fff;
    transition:background .15s ease, transform .15s ease;
}
.toolbox-item .notification-icon:hover{ background:rgba(255,255,255,.22); transform:translateY(-1px); }
.toolbox-item .glyph-info{ font-size:15px; }

.user-info .dropdown-toggle{
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.18);
    border-radius:20px;
    padding:8px 16px;
    font-weight:600;
    font-size:13px;
    display:inline-block;
}
.user-info .dropdown-toggle:hover{ background:rgba(255,255,255,.18); }

#top-left-menu .dropdown-menu{
    border:none;
    border-radius:var(--sv-radius-sm);
    box-shadow:var(--sv-shadow-md);
    margin-top:8px;
    overflow:hidden;
}
#top-left-menu .dropdown-menu > li > a{ padding:9px 16px; font-size:13px; }
#top-left-menu .dropdown-menu > li > a:hover{ background:var(--sv-lavender-050); color:var(--sv-navy-700); }

/* ==========================================================================
   7. Sidebar (#side-menu / .side-panels) — accordion navigation
   ========================================================================== */
#side-menu{
    background:var(--sv-navy-900) !important;
    padding-top:8px;
}
.side-panels{
    background:transparent !important;
    border:none !important;
    margin:2px 10px !important;
    border-radius:var(--sv-radius-sm);
    overflow:hidden;
}
.side-panels:last-child{ border-bottom:none; }
.side-panels .panel-heading{
    background:transparent !important;
    border:none !important;
    padding:0;
}
.side-panels .panel-title{
    background:rgba(255,255,255,.04) !important;
    color:#dfe2f5 !important;
    padding:12px 16px;
    font-weight:600;
    font-size:13px;
    border-radius:var(--sv-radius-sm);
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.side-panels .panel-title:hover{ background:rgba(255,255,255,.09) !important; color:#fff !important; }
.side-panels .panel-collapse.in .panel-title,
.side-panels .panel-heading .panel-title[aria-expanded="true"]{
    background:var(--sv-gradient-accent) !important;
    color:#fff !important;
}

.side-panel-group{ background:transparent !important; border:none; padding:4px 0 8px; }
.side-panel-group li,
.side-panel-group li.list-group-item{
    background:transparent !important;
    border:none !important;
    padding:0;
}
.side-panel-group .menu-link,
.side-panel-group a{
    display:block;
    padding:9px 16px 9px 30px;
    
    font-size:13px;
    text-decoration:none;
    border-inline-start:3px solid transparent;
    transition:all .15s ease;
}
.side-panel-group .menu-link:hover,
.side-panel-group a:hover{
    background:rgba(255,255,255,.06);
    color:#fff !important;
    border-inline-start-color:var(--sv-gold-500);
}

/* ==========================================================================
   8. Modals / Dropdowns
   ========================================================================== */
.modal-content{
    border:none;
    border-radius:var(--sv-radius);
    box-shadow:var(--sv-shadow-lg);
    overflow:hidden;
}
.modal-header{
    background:var(--sv-gradient-brand);
    color:#fff;
    border-bottom:none;
    padding:16px 20px;
}
.modal-header .close{ color:#fff; opacity:.8; text-shadow:none; }
.modal-header .close:hover{ opacity:1; }
.modal-title{ font-weight:700; }
.modal-footer{ border-top:1px solid var(--sv-border); }

.dropdown-menu{
    border:none;
    border-radius:var(--sv-radius-sm);
    box-shadow:var(--sv-shadow-md);
}

/* ==========================================================================
   9. Auth pages (login / operator login) — split-screen layout
   ========================================================================== */
.sv-auth-body{
    height:100vh;
    margin:0;
    overflow:hidden;
    background:var(--sv-bg);
}
.sv-auth-wrap{
    display:flex;
    height:100vh;
    width:100%;
}

/* Brand / hero side — light surface so the full-colour logo reads cleanly */
.sv-auth-hero{
    flex:1 1 46%;
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:space-between;
    padding:56px 60px;
    background:linear-gradient(165deg,#ffffff 0%,#f4f6fc 48%,#eef0fa 100%);
    color:var(--sv-text);
    border-inline-end:1px solid var(--sv-border);
    overflow:hidden;
}
.sv-auth-hero .sv-blob{
    position:absolute;
    border-radius:50%;
    filter:blur(6px);
    pointer-events:none;
}
.sv-auth-hero .sv-blob-1{ width:440px; height:440px; background:var(--sv-indigo-500); top:-180px; inset-inline-end:-160px; opacity:.14; }
.sv-auth-hero .sv-blob-2{ width:320px; height:320px; background:var(--sv-gold-500); bottom:-120px; inset-inline-start:-100px; opacity:.10; }
.sv-auth-hero .sv-grid{
    position:absolute; inset:0;
    background-image:linear-gradient(rgba(23,20,68,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(23,20,68,.035) 1px,transparent 1px);
    background-size:36px 36px;
    -webkit-mask-image:radial-gradient(ellipse at 30% 20%,#000 0%,transparent 65%);
    mask-image:radial-gradient(ellipse at 30% 20%,#000 0%,transparent 65%);
}
.sv-auth-hero .sv-watermark{
    position:absolute;
    inset-inline-end:-60px;
    bottom:-60px;
    width:340px;
    height:340px;
    opacity:.05;
    transform:rotate(-10deg);
    pointer-events:none;
}

.sv-hero-logo{
    position:relative;
    z-index:2;
    height:50px;
    width:auto;
    display:block;
    filter:drop-shadow(0 8px 18px rgba(23,20,68,.14));
}
.sv-auth-tag{
    position:relative;
    z-index:2;
    font-size:12px;
    color:var(--sv-text-muted);
    margin-top:12px;
    font-weight:600;
    letter-spacing:.2px;
}

.sv-auth-hero-mid{ position:relative; z-index:2; max-width:420px; }
.sv-auth-hero-mid h2{ font-size:30px; font-weight:800; line-height:1.5; margin:0 0 14px; color:var(--sv-navy-900); }
.sv-auth-hero-mid p{ font-size:14.5px; color:var(--sv-text-muted); line-height:1.9; margin:0; }

.sv-auth-features{ list-style:none; margin:26px 0 0; padding:0; position:relative; z-index:2; }
.sv-auth-features li{
    display:flex; align-items:center; gap:10px;
    font-size:13.5px; color:var(--sv-text); font-weight:500;
    margin-bottom:12px;
}
.sv-auth-features li .glyphicon{
    width:26px; height:26px; border-radius:50%;
    background:var(--sv-lavender-100);
    display:flex; align-items:center; justify-content:center;
    font-size:12px; color:var(--sv-indigo-600);
    flex:0 0 auto;
}

.sv-auth-hero-foot{ position:relative; z-index:2; font-size:12px; color:var(--sv-text-soft); }

/* Form side */
.sv-auth-form-side{
    flex:1 1 54%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--sv-bg);
    padding:30px;
    overflow-y:auto;
}
.sv-auth-card{
    width:100%;
    max-width:400px;
}
.sv-auth-card-head{ margin-bottom:28px; text-align:start; }
.sv-auth-mode-switch{
    display:inline-flex;
    background:#fff;
    border:1px solid var(--sv-border);
    border-radius:999px;
    padding:4px;
    margin-bottom:22px;
    box-shadow:var(--sv-shadow-xs);
}
.sv-auth-mode-switch a{
    padding:7px 18px;
    border-radius:999px;
    font-size:12.5px;
    font-weight:700;
    color:var(--sv-text-muted);
    text-decoration:none;
    transition:all .15s ease;
}
.sv-auth-mode-switch a.active{
    background:var(--sv-gradient-accent);
    color:#fff;
    box-shadow:0 4px 10px rgba(76,78,161,.3);
}
.sv-auth-mode-switch a:hover:not(.active){ color:var(--sv-navy-700); }

.sv-auth-card-head h1{
    font-size:23px;
    font-weight:800;
    color:var(--sv-navy-900);
    margin:0 0 6px;
}
.sv-auth-card-head p{ font-size:13.5px; color:var(--sv-text-muted); margin:0; }

.sv-field{ margin-bottom:16px; text-align:start; }
.sv-field label{
    display:block;
    font-size:12.5px;
    font-weight:700;
    color:var(--sv-navy-800);
    margin-bottom:6px;
}
.sv-input-group{ position:relative; }
.sv-input-group .glyphicon{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    inset-inline-start:14px;
    color:var(--sv-text-soft);
    font-size:14px;
    pointer-events:none;
}
.sv-input-group .form-control{
    height:46px;
    padding-inline-start:40px;
    padding-inline-end:14px;
    width:100%;
    font-size:14px;
}
.sv-input-group .form-control:focus + .glyphicon,
.sv-input-group:focus-within .glyphicon{ color:var(--sv-indigo-600); }

.sv-auth-submit{
    height:46px;
    width:100%;
    border-radius:var(--sv-radius-sm);
    font-size:14.5px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:6px;
}

.sv-auth-alert{ margin-top:16px; padding:11px 14px; font-size:13px; }

.sv-auth-footer-link{
    display:block;
    text-align:center;
    margin-top:22px;
    font-size:12.5px;
    color:var(--sv-text-muted);
}
.sv-auth-footer-link a{ color:var(--sv-indigo-600); font-weight:700; text-decoration:none; }
.sv-auth-footer-link a:hover{ color:var(--sv-navy-700); text-decoration:underline; }

/* Queue box (operator login) restyled to match new form language */
.sv-queue-field{ margin-bottom:16px; }
.sv-queue-row{ display:flex; gap:8px; }
#btnSelectQueue{
    flex:1;
    min-width:0;
    height:46px !important;
    border-radius:var(--sv-radius-sm) !important;
    font-size:13.5px !important;
    display:flex !important;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin:0 !important;
}
.selected-queue-box{
    margin-top:10px;
    min-height:0;
}
.selected-queue-box .queue-pill{
    background:var(--sv-lavender-100);
    border:1px solid var(--sv-lavender-200);
    color:var(--sv-navy-800);
    font-weight:600;
}

@media (max-width: 900px){
    .sv-auth-hero{ display:none; }
    .sv-auth-form-side{ flex:1 1 100%; }
}

/* ==========================================================================
   10. Generic content pages (About, etc.)
   ========================================================================== */
.sv-page-wrap{ max-width:880px; margin:0 auto; padding:28px 16px 60px; }

.sv-page-card{
    background:#fff;
    border:1px solid var(--sv-border);
    border-radius:var(--sv-radius-lg);
    box-shadow:var(--sv-shadow-sm);
    overflow:hidden;
}
.sv-page-card-hero{
    background:linear-gradient(165deg,#ffffff 0%,#f4f6fc 55%,#eef0fa 100%);
    border-bottom:1px solid var(--sv-border);
    padding:40px 36px 32px;
    text-align:center;
    position:relative;
    overflow:hidden;
}
.sv-page-card-hero .sv-blob{ position:absolute; border-radius:50%; filter:blur(6px); pointer-events:none; }
.sv-page-card-hero .sv-blob-1{ width:280px; height:280px; background:var(--sv-indigo-500); opacity:.12; top:-120px; inset-inline-end:-100px; }
.sv-page-card-hero .sv-blob-2{ width:220px; height:220px; background:var(--sv-gold-500); opacity:.10; bottom:-90px; inset-inline-start:-70px; }

.sv-page-logo{ position:relative; z-index:2; height:44px; width:auto; filter:drop-shadow(0 6px 14px rgba(23,20,68,.12)); }

.sv-version-badge{
    position:relative; z-index:2;
    display:inline-flex; align-items:center; gap:8px;
    margin-top:18px;
    background:var(--sv-lavender-100);
    border:1px solid var(--sv-lavender-200);
    color:var(--sv-navy-700);
    font-size:12.5px;
    font-weight:700;
    padding:6px 16px;
    border-radius:999px;
}
.sv-version-badge b{ color:var(--sv-indigo-600); font-variant-numeric:tabular-nums; }

.sv-page-tag{
    position:relative; z-index:2;
    margin:14px auto 0;
    max-width:520px;
    font-size:14px;
    color:var(--sv-text-muted);
    line-height:1.9;
}

.sv-feature-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    padding:28px 32px;
}
.sv-feature-card{
    display:flex;
    align-items:flex-start;
    gap:12px;
    background:#fbfcfe;
    border:1px solid var(--sv-border);
    border-radius:var(--sv-radius);
    padding:16px;
}
.sv-feature-icon{
    width:38px; height:38px; border-radius:10px; flex:0 0 auto;
    display:flex; align-items:center; justify-content:center;
    background:var(--sv-lavender-100); color:var(--sv-indigo-600); font-size:16px;
}
.sv-feature-card h4{ margin:0 0 4px; font-size:13.5px; font-weight:700; color:var(--sv-navy-900); }
.sv-feature-card p{ margin:0; font-size:12px; color:var(--sv-text-muted); line-height:1.7; }

.sv-page-body{ padding:6px 32px 32px; }
.sv-page-body p{ font-size:14px; line-height:2.1; color:var(--sv-text); margin:0 0 16px; }
.sv-page-body p:last-child{ margin-bottom:0; }

.sv-page-foot{
    border-top:1px solid var(--sv-border);
    padding:16px 32px;
    text-align:center;
    font-size:12px;
    color:var(--sv-text-soft);
    background:#fbfcfe;
}

@media (max-width:700px){
    .sv-feature-grid{ grid-template-columns:1fr; padding:22px; }
    .sv-page-card-hero{ padding:32px 22px 26px; }
    .sv-page-body{ padding:6px 22px 26px; }
    .sv-page-foot{ padding:14px 22px; }
}