/* ============================================================
   VoIP Cat Switch — Admin chrome (PREMIUM DARK, logo-matched)
   Deep-navy ground + electric cyan accent (the circuit-cat logo).
   Skins AdminBSB; overrides base theme.css (loaded after it).
   2026-08-13: converted light → dark to match the /api tools console.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --navy-900:#050b16; --navy-800:#0a1120; --navy-700:#101a2e;
  --teal:#0e9ad6; --teal-bright:#38bdf8;             /* accent = electric cyan */
  --ink-50:#131f36;   /* subtle raised surface (was light) */
  --ink-100:#1c2a44;  /* line */
  --ink-200:#26374f;  /* stronger line */
  --ink-400:#5d6d8a;  /* placeholder / muted */
  --ink-700:#96a6c2;  /* secondary text (was dark, now light) */
  --ink-900:#e8eefc;  /* primary text (was dark, now light) */
  --surface:#101a2e; --surface-2:#15223a;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- base ---------- */
body, .content, .sidebar, .navbar, .btn, .form-control, .card,
h1,h2,h3,h4,h5,h6, p, span, a, table, .table, input, select, textarea {
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;
}
html, body { background-color:var(--navy-800) !important; }
body { color:var(--ink-900) !important; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(1100px 480px at 82% -6%, rgba(56,189,248,.06), transparent 58%) !important; }
@keyframes vcFadeIn { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
.content { background-color:transparent !important; animation:vcFadeIn .34s var(--ease) both !important; }

/* Dashboard typography */
.content h1 { font-size:32px !important; font-weight:700 !important; letter-spacing:-.03em !important; color:var(--ink-900) !important; margin:0 0 8px !important; }
.content h2:not(.card .header h2) { font-size:22px !important; font-weight:600 !important; letter-spacing:-.02em !important; color:var(--ink-900) !important; margin:0 0 8px !important; }
.content h3 { font-size:17px !important; font-weight:600 !important; letter-spacing:-.015em !important; color:var(--ink-700) !important; margin:0 0 12px !important; }
.content p { font-size:14.5px !important; line-height:1.6 !important; color:var(--ink-700) !important; max-width:65ch; margin-bottom:16px !important; }
.content label, .content .form-label { color:var(--ink-700) !important; }

/* ============================================================ TOPBAR */
nav.navbar { background-color:var(--surface) !important; border-bottom:1px solid var(--ink-200) !important;
  box-shadow:0 1px 0 rgba(56,189,248,.06), 0 2px 12px -6px rgba(0,0,0,.6) !important; height:64px !important; }
.navbar .navbar-header { height:64px !important; display:flex !important; align-items:center !important; }
.navbar .navbar-brand { display:flex !important; align-items:center !important; height:64px !important; padding:0 20px !important;
  color:#fff !important; font-weight:700 !important; letter-spacing:-.02em !important; }
.navbar .navbar-brand.logo img, .navbar-brand img { max-height:32px !important; width:auto !important; filter:none !important; opacity:1 !important; }
.navbar .nav.navbar-nav > li > a { color:var(--ink-700) !important; font-size:14px !important; font-weight:500 !important;
  height:64px !important; line-height:64px !important; padding:0 16px !important;
  transition:color .15s var(--ease), background-color .15s var(--ease) !important; }
.navbar .nav.navbar-nav > li > a:hover, .navbar .nav.navbar-nav > li > a:focus { color:#fff !important; background-color:rgba(56,189,248,.08) !important; }
.navbar .nav.navbar-nav > li > a .material-icons, .navbar .nav.navbar-nav > li > a i { color:var(--ink-700) !important; transition:color .15s ease !important; }
.navbar .nav.navbar-nav > li > a:hover .material-icons, .navbar .nav.navbar-nav > li > a:hover i { color:var(--teal-bright) !important; }
.navbar .dropdown-menu { background:var(--surface-2) !important; border:1px solid var(--ink-200) !important; }

/* collapse toggle */
#vc-mini-toggle { width:38px; height:38px; display:inline-flex !important; align-items:center !important; justify-content:center !important;
  background:var(--surface-2) !important; border:1px solid var(--ink-200) !important; color:var(--ink-700) !important; cursor:pointer;
  margin:0 0 0 12px !important; border-radius:10px; box-shadow:none !important;
  transition:background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease), transform .12s var(--ease) !important; }
#vc-mini-toggle:hover { background:rgba(56,189,248,.12) !important; color:var(--teal-bright) !important; border-color:var(--teal-bright) !important; }
#vc-mini-toggle:active { transform:scale(.93) !important; }
#vc-mini-toggle .material-icons { font-size:20px !important; }

/* ============================================================ SIDEBAR (already dark navy — keep, swap teal→cyan) */
aside#leftsidebar.sidebar { width:240px !important; top:64px !important; height:calc(100vh - 64px) !important;
  background:linear-gradient(180deg,#0b1e3a 0%,var(--navy-800) 52%,var(--navy-900) 100%) !important;
  border-right:1px solid rgba(255,255,255,.05) !important; box-shadow:none !important; }
.sidebar .user-info { display:none !important; }
.sidebar .menu .list { background-color:transparent !important; list-style:none !important; padding:12px 0 8px !important; }
.sidebar .menu .list .header { background-color:transparent !important; color:#8296B8 !important; font-size:10px !important;
  font-weight:600 !important; text-transform:uppercase !important; letter-spacing:.08em !important; padding:14px 16px 5px !important; }
.sidebar .menu .list > li > a, .sidebar .menu .list li a { color:#C2CEE3 !important; font-size:13px !important; font-weight:500 !important;
  margin:2px 10px !important; padding:8px 12px !important; border-radius:8px !important; display:flex !important; align-items:center !important; gap:11px !important;
  border-left:none !important; transition:background-color .16s var(--ease), color .16s var(--ease), box-shadow .16s ease !important; }
.sidebar .menu .list > li > a span, .sidebar .menu .list li a span, .sidebar .menu .list .ml-menu li a span { color:inherit !important; }
.sidebar .menu .list > li > a .material-icons, .sidebar .menu .list li a .material-icons,
.sidebar .menu .list > li > a i, .sidebar .menu .list li a i { color:#AEBED8 !important; font-size:19px !important; margin:0 !important; transition:color .16s ease !important; }
.sidebar .menu .list > li > a:hover, .sidebar .menu .list > li > a:focus, .sidebar .menu .list li a:hover {
  background-color:rgba(255,255,255,.06) !important; color:#fff !important; text-decoration:none !important; }
.sidebar .menu .list > li > a:hover .material-icons, .sidebar .menu .list li a:hover .material-icons,
.sidebar .menu .list > li > a:hover i, .sidebar .menu .list li a:hover i { color:#fff !important; }
.sidebar .menu .list > li.active > a, .sidebar .menu .list > li > a.toggled,
.sidebar .menu .list > li.active > a:hover, .sidebar .menu .list > li.active > a:focus {
  background:rgba(56,189,248,.16) !important; color:#fff !important;
  box-shadow:inset 0 0 0 1px rgba(56,189,248,.32), 0 6px 18px -8px rgba(56,189,248,.55) !important; }
.sidebar .menu .list > li.active > a .material-icons, .sidebar .menu .list > li > a.toggled .material-icons,
.sidebar .menu .list > li.active > a i, .sidebar .menu .list > li > a.toggled i { color:var(--teal-bright) !important; }
.sidebar .menu .list a.menu-toggle::after { color:#7E93B8 !important; transition:color .15s ease !important; }
.sidebar .menu .list a.menu-toggle:hover::after, .sidebar .menu .list li.active a.menu-toggle::after, .sidebar .menu .list a.toggled::after { color:#fff !important; }
.sidebar .menu .list .ml-menu { background-color:rgba(0,0,0,.22) !important; padding:4px 0 !important; }
.sidebar .menu .list .ml-menu li a { color:#AEBDD6 !important; padding-left:46px !important; margin:2px 10px !important; font-size:12.5px !important; }
.sidebar .menu .list .ml-menu li a:hover, .sidebar .menu .list .ml-menu li a:focus { background-color:rgba(255,255,255,.07) !important; color:#fff !important; }
.sidebar .menu .list .ml-menu li.active a { color:#fff !important; background-color:rgba(255,255,255,.1) !important; font-weight:600 !important; }
.sidebar::-webkit-scrollbar { width:6px !important; height:6px !important; }
.sidebar::-webkit-scrollbar-thumb { background-color:rgba(255,255,255,.18) !important; border-radius:3px !important; }
.sidebar::-webkit-scrollbar-thumb:hover { background-color:rgba(255,255,255,.3) !important; }
.sidebar .legal { background:transparent !important; border-top:1px solid rgba(255,255,255,.08) !important; }
.sidebar .legal .copyright { color:#7E93B8 !important; font-size:11px !important; }
.sidebar .legal .copyright a { color:#C2CEE3 !important; font-weight:600 !important; }

/* collapse-to-icons (unchanged layout) */
html.vc-mini aside#leftsidebar.sidebar { width:68px !important; }
html.vc-mini section.content { margin-left:68px !important; }
html.vc-mini .sidebar .menu .list a span { display:none !important; }
html.vc-mini .sidebar .menu .list .header { display:none !important; }
html.vc-mini .sidebar .menu .list > li > a, html.vc-mini .sidebar .menu .list li a { justify-content:center !important; padding:11px 0 !important; margin:5px 13px !important; border-radius:11px !important; }
html.vc-mini .sidebar .menu .list > li > a .material-icons, html.vc-mini .sidebar .menu .list > li > a i,
html.vc-mini .sidebar .menu .list li a .material-icons, html.vc-mini .sidebar .menu .list li a i { margin:0 !important; display:inline-block !important; text-align:center !important; width:24px !important; font-size:22px !important; color:#C6D4EA !important; }
html.vc-mini .sidebar .menu .list > li.active > a .material-icons, html.vc-mini .sidebar .menu .list > li > a.toggled .material-icons { color:var(--teal-bright) !important; }
html.vc-mini .sidebar .menu .list a::after, html.vc-mini .sidebar .menu .list a::before,
html.vc-mini .sidebar .menu .list .menu-toggle::after, html.vc-mini .sidebar .menu .list .menu-toggle::before { display:none !important; }
html.vc-mini .sidebar .menu .list .ml-menu { display:none !important; }
html.vc-mini .sidebar .menu-toggle .fa, html.vc-mini .sidebar .fa-chevron-down { display:none !important; }
html.vc-mini .sidebar .user-info { display:none !important; }

/* ============================================================ CONTENT — layout + cards */
section.content { padding-top:84px !important; margin-left:240px !important; }
.card { background:var(--surface) !important; border:1px solid var(--ink-200) !important; border-radius:12px !important;
  box-shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(4,10,20,.7) !important; margin-bottom:24px !important;
  transition:box-shadow .2s var(--ease), transform .2s var(--ease) !important; }
.card:hover { box-shadow:0 2px 4px rgba(0,0,0,.5), 0 16px 32px -12px rgba(4,10,20,.8) !important; }
.card .header { border-bottom:1px solid var(--ink-100) !important; padding:18px 24px !important; border-top-left-radius:11px !important; border-top-right-radius:11px !important; }
.card .header h2 { color:var(--ink-900) !important; font-weight:600 !important; font-size:16px !important; margin:0 !important; letter-spacing:-.005em !important; }
.card .header h2 small { color:var(--ink-700) !important; }
.card .body { padding:24px !important; color:var(--ink-900) !important; }

/* ============================================================ BUTTONS */
.btn { border-radius:8px !important; font-weight:600 !important; padding:10px 18px !important; box-shadow:0 1px 2px rgba(0,0,0,.3) !important;
  transition:background-color .15s var(--ease), box-shadow .15s ease, transform .12s ease, filter .15s ease !important; }
.btn:active { transform:translateY(0) scale(.98) !important; }
.btn.bg-pink, .btn.bg-blue, .btn-primary, .btn.bg-teal, .btn.bg-green, .btn-info, .btn-success {
  background:linear-gradient(180deg,#54c8ff,#25aef0) !important; color:#04121f !important; border:none !important; }
.btn.bg-pink:hover, .btn.bg-blue:hover, .btn-primary:hover, .btn-primary:focus, .btn.bg-teal:hover, .btn.bg-green:hover, .btn-info:hover, .btn-success:hover {
  background:linear-gradient(180deg,#6bd2ff,#38bdf8) !important; color:#04121f !important; box-shadow:0 6px 16px -6px rgba(56,189,248,.6) !important; transform:translateY(-1px) !important; }
.btn.bg-grey, .btn-default { background:var(--surface-2) !important; color:var(--ink-900) !important; border:1px solid var(--ink-200) !important; }
.btn.bg-grey:hover, .btn-default:hover { border-color:var(--ink-400) !important; color:#fff !important; }
.btn.bg-red, .btn-danger { background-color:#e5484d !important; color:#fff !important; border:none !important; }

/* ============================================================ INPUTS */
.form-control, .dataTables_filter input, .dataTables_length select { background-color:var(--navy-800) !important; border:1px solid var(--ink-200) !important;
  border-radius:8px !important; color:var(--ink-900) !important; padding:10px 14px !important; box-shadow:none !important; height:auto !important;
  transition:border-color .16s ease, box-shadow .16s ease !important; }
.form-control:focus { border-color:var(--teal-bright) !important; box-shadow:0 0 0 3px rgba(56,189,248,.16) !important; outline:none !important; }
.form-control::placeholder { color:var(--ink-400) !important; opacity:1 !important; }
select.form-control option, select option { background:var(--surface-2) !important; color:var(--ink-900) !important; }
.form-group .form-line { border-bottom:none !important; margin-bottom:0 !important; }
.form-group .form-line::after, .form-group .form-line::before { display:none !important; }

/* ============================================================ LINKS / TABLES / BADGES */
.content a, a { color:var(--teal-bright) !important; transition:color .15s ease !important; }
.content a:hover, .content a:focus, a:hover { color:#7fd6ff !important; }
.table { width:100% !important; margin-bottom:0 !important; color:var(--ink-900) !important; background:transparent !important; }
.table thead tr, .table thead th { background-color:var(--surface-2) !important; color:var(--ink-700) !important; font-weight:600 !important;
  border-bottom:1px solid var(--ink-200) !important; text-transform:uppercase !important; font-size:11px !important; letter-spacing:.05em !important; }
.table td, .table th { border-top:1px solid var(--ink-100) !important; padding:12px 16px !important; vertical-align:middle !important; color:var(--ink-900) !important; }
.table tbody tr { transition:background-color .12s ease !important; }
.table tbody tr:hover { background-color:var(--surface-2) !important; }
.table-bordered, .table-bordered td, .table-bordered th { border-color:var(--ink-100) !important; }
.badge, .label { border-radius:5px !important; font-weight:600 !important; padding:4px 8px !important; }
.label-success, .badge-success, .bg-green:not(.btn) { background-color:#2ea043 !important; color:#fff !important; }
.label-danger, .badge-danger, .bg-red:not(.btn) { background-color:#e5484d !important; color:#fff !important; }
.label-info, .badge-info, .bg-cyan:not(.btn) { background-color:var(--teal) !important; color:#04121f !important; }
.label-warning, .badge-warning { background-color:#d6a53b !important; color:#04121f !important; }

/* ============================================================ CATCH-ALL: dark surfaces for base components (so nothing stays white) */
.modal-content, .dropdown-menu, .panel, .panel-default, .well, .popover, .card-inside-title,
.list-group-item, .nav-tabs, .tab-content, .breadcrumb, .jumbotron, .dt-buttons .btn, .pagination > li > a, .pagination > li > span {
  background-color:var(--surface) !important; color:var(--ink-900) !important; border-color:var(--ink-200) !important; }
.modal-header, .modal-footer, .panel-heading { background-color:var(--surface-2) !important; border-color:var(--ink-200) !important; color:var(--ink-900) !important; }
.dropdown-menu > li > a { color:var(--ink-900) !important; }
.dropdown-menu > li > a:hover { background-color:rgba(56,189,248,.1) !important; color:#fff !important; }
.list-group-item:hover { background-color:var(--surface-2) !important; }
.pagination > .active > a, .pagination > .active > span { background:var(--teal) !important; border-color:var(--teal) !important; color:#04121f !important; }
.nav-tabs > li.active > a { background:var(--surface) !important; color:var(--teal-bright) !important; border-color:var(--ink-200) var(--ink-200) transparent !important; }
.nav-tabs { border-bottom-color:var(--ink-200) !important; }
code, pre, kbd { background:var(--navy-900) !important; color:#a9e6ff !important; border-color:var(--ink-200) !important; }
hr { border-color:var(--ink-200) !important; }
.text-muted, small.text-muted { color:var(--ink-400) !important; }
.close { color:var(--ink-700) !important; opacity:.9 !important; text-shadow:none !important; }
::selection { background:rgba(56,189,248,.3); color:#fff; }

@media (prefers-reduced-motion:reduce){ .content, .card { animation:none !important; transition:none !important; } }

/* ============================================================ logo sizing (unchanged layout) */
.navbar .navbar-header { display:flex !important; align-items:center !important; }
.navbar .navbar-brand, .navbar .navbar-brand.logo { width:240px !important; padding:0 0 0 24px !important; margin:0 !important; order:1 !important;
  display:flex !important; align-items:center !important; justify-content:flex-start !important; }
.navbar .navbar-brand img, .navbar-brand.logo img { max-height:40px !important; max-width:185px !important; width:auto !important; filter:none !important; }
#vc-mini-toggle { order:2 !important; }
html.vc-mini .navbar .navbar-brand, html.vc-mini .navbar .navbar-brand.logo { width:68px !important; justify-content:center !important; padding:0 6px !important; }
html.vc-mini .navbar .navbar-brand img { height:auto !important; width:auto !important; max-height:22px !important; max-width:56px !important; object-fit:contain !important; object-position:center !important; }

/* logo on dark navbar — clean white chip so it stays crisp (2026-08-13) */
.navbar .navbar-brand img, .navbar-brand.logo img { background:#fff !important; padding:5px 10px !important; border-radius:10px !important; box-shadow:0 2px 10px rgba(0,0,0,.3) !important; max-height:34px !important; }
html.vc-mini .navbar .navbar-brand img { padding:4px 6px !important; }

/* striped/jambo tables: base theme leaves body rows WHITE/grey -> light text vanishes. Force dark + subtle zebra. (2026-08-13) */
.table>tbody>tr, .table>tbody>tr>td, .table>tbody>tr>th,
.table-striped>tbody>tr, .table-striped>tbody>tr:nth-of-type(odd), .table-striped>tbody>tr:nth-of-type(odd)>td,
.jambo_table tbody tr, .jambo_table tbody tr td { background-color:transparent !important; color:var(--ink-900) !important; }
.table-striped>tbody>tr:nth-of-type(even)>td { background-color:rgba(148,180,220,.05) !important; }
.table>tbody>tr:hover>td, .table>tbody>tr:hover>th, .jambo_table tbody tr:hover td { background-color:var(--surface-2) !important; color:#fff !important; }
.table>tbody>tr>td a, .jambo_table tbody tr td a { color:var(--teal-bright) !important; }