/* TelVox Switch - All styles from v36.html */

/* === Style Block 1 === */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0f0f13;--surface:#17171d;--card:#1e1e26;--border:#2a2a35;--border2:#333340;
  --text:#e2e4f0;--muted:#7b7d8e;--light:#4a4c5e;
  --blue:#7c6df5;--blue2:#6355e0;--green:#22c97a;--amber:#f5a623;--red:#f04060;--teal:#0ec9b0;--pink:#e040b0;
  --hdr:#0a0a0f;
  --radius:8px;--radius2:12px;
}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);font-size:13px;min-height:100vh;overflow-x:hidden}

/* SCROLLBAR */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}

/* TOPBAR */
.topbar{background:var(--hdr);height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;position:sticky;top:0;z-index:100;border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:8px;color:#fff;font-size:13px;font-weight:700;letter-spacing:.03em;white-space:nowrap;text-decoration:none}
.brand-icon{width:28px;height:28px;background:linear-gradient(135deg,var(--blue),var(--teal));border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:14px}
.nav-tabs{display:flex;height:48px;overflow:visible;margin-left:4px}
.nav-tab{padding:0 11px;display:flex;align-items:center;color:var(--muted);font-size:12px;cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;white-space:nowrap;position:relative;user-select:none}
.nav-tab:hover{color:var(--text)}
.nav-tab.active{color:var(--blue);border-bottom-color:var(--blue)}
.topbar-r{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}
.live-dot{width:7px;height:7px;background:var(--green);border-radius:50%;animation:blink 1.4s infinite;display:inline-block}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}

/* DROPDOWN */
.nav-drop{position:absolute;top:100%;left:0;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);min-width:180px;z-index:200;display:none;padding:4px 0;box-shadow:0 8px 32px rgba(0,0,0,.5)}
.nav-drop.open{display:block}
.nav-drop-item{padding:8px 14px;cursor:pointer;color:var(--muted);font-size:12px;transition:all .1s}
.nav-drop-item:hover{background:var(--border);color:var(--text)}
.nav-drop-sep{height:1px;background:var(--border);margin:4px 0}

/* PAGES */
.page{display:none}.page.active{display:block}

/* MAIN LAYOUT */
.main{padding:16px}

/* CARDS */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius2);padding:16px}
.card-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.card-title{font-size:13px;font-weight:600;color:var(--text)}

/* STAT CARDS */
.stats-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:14px}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px}
.stat-lbl{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.stat-val{font-size:20px;font-weight:700;font-family:'JetBrains Mono',monospace;letter-spacing:-.02em}
.stat-sub{font-size:10px;color:var(--muted);margin-top:3px}
.c-green{color:var(--green)}.c-blue{color:var(--blue)}.c-amber{color:var(--amber)}.c-red{color:var(--red)}.c-teal{color:var(--teal)}.c-pink{color:var(--pink)}

/* BUTTONS */
.btn{padding:5px 12px;border-radius:5px;font-size:12px;font-family:inherit;cursor:pointer;border:1px solid var(--border);transition:all .15s;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.btn-p{background:var(--blue);color:#fff;border-color:var(--blue)}.btn-p:hover{background:var(--blue2)}
.btn-g{background:var(--green);color:#000;border-color:var(--green)}.btn-g:hover{filter:brightness(1.1)}
.btn-o{background:transparent;color:var(--muted);border-color:var(--border)}.btn-o:hover{color:var(--text);border-color:var(--border2)}
.btn-r{background:var(--red);color:#fff;border-color:var(--red)}.btn-r:hover{filter:brightness(1.1)}
.btn-sm{padding:3px 9px;font-size:11px}
.btn-xs{padding:2px 7px;font-size:10px}

/* TABLES */
.tbl-wrap{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
table{width:100%;border-collapse:collapse;font-size:12px}
thead tr{background:var(--surface)}
th{padding:8px 12px;text-align:left;color:var(--muted);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border)}
td{padding:8px 12px;border-bottom:1px solid var(--border);color:var(--text)}
tr:last-child td{border-bottom:none}
tbody tr{transition:background .1s}
tbody tr:hover{background:rgba(124,109,245,.04)}
.tdn{color:var(--blue);cursor:pointer;font-weight:500}.tdn:hover{text-decoration:underline}

/* BADGES */
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:600;letter-spacing:.04em}
.badge-B{background:rgba(14,201,176,.15);color:var(--teal)}
.badge-C{background:rgba(124,109,245,.15);color:var(--blue)}
.badge-S{background:rgba(240,64,96,.15);color:var(--red)}
.badge-green{background:rgba(34,201,122,.15);color:var(--green)}
.badge-red{background:rgba(240,64,96,.15);color:var(--red)}
.badge-amber{background:rgba(245,166,35,.15);color:var(--amber)}

/* MODAL */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:300;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(2px)}
.overlay.open{display:flex}
.modal{background:var(--card);border:1px solid var(--border);border-radius:var(--radius2);padding:0;width:100%;max-width:500px;max-height:92vh;overflow-y:auto;box-shadow:0 24px 64px rgba(0,0,0,.6)}
.modal-hdr{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border);font-size:13px;font-weight:600}
.modal-body{padding:18px}
.modal-ftr{padding:12px 18px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px}

/* FORM */
.fg{margin-bottom:12px}
.fg label{display:block;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}
.fg input,.fg select,.fg textarea{width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:5px;font-size:12.5px;font-family:inherit;background:var(--surface);color:var(--text);outline:none;transition:border .15s}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--blue)}
.fg textarea{resize:vertical;min-height:70px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}

/* TOAST */
.toast-wrap{position:fixed;bottom:20px;right:20px;z-index:999;display:flex;flex-direction:column;gap:8px}
.toast{padding:10px 16px;border-radius:var(--radius);font-size:12px;font-weight:500;animation:toastIn .3s ease;max-width:320px;border:1px solid}
.toast-ok{background:#0d2a1a;color:var(--green);border-color:rgba(34,201,122,.3)}
.toast-err{background:#2a0d14;color:var(--red);border-color:rgba(240,64,96,.3)}
.toast-info{background:#1a1a2e;color:var(--blue);border-color:rgba(124,109,245,.3)}
@keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}

/* DETAIL OVERLAY */
.detail-ov{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg);z-index:200;overflow-y:auto;overflow-x:hidden}
.detail-ov.open{display:block}
.detail-breadcrumb{background:var(--hdr);border-bottom:1px solid var(--border);padding:10px 20px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10}
.breadcrumb-path{display:flex;align-items:center;gap:8px;font-size:13px}
.bc-link{color:var(--blue);cursor:pointer;font-weight:500}.bc-link:hover{text-decoration:underline}
.bc-sep{color:var(--muted)}
.bc-cur{font-weight:600;color:var(--text)}
.detail-tabs{background:var(--surface);border-bottom:1px solid var(--border);padding:0 20px;display:flex;gap:0;position:sticky;top:41px;z-index:9}
.dtab{padding:10px 16px;font-size:12px;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent;transition:all .15s;white-space:nowrap}
.dtab:hover{color:var(--text)}
.dtab.active{color:var(--blue);border-bottom-color:var(--blue);font-weight:500}
.dtab-content{display:none;padding:24px 20px}
.dtab-content.active{display:block}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.detail-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px}
.detail-section{margin-bottom:20px}
.detail-section-title{font-size:12px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.detail-row{display:flex;align-items:center;padding:6px 0;border-bottom:1px solid rgba(42,42,53,.5)}
.detail-row:last-child{border-bottom:none}
.detail-lbl{font-size:11px;color:var(--muted);width:180px;flex-shrink:0}
.detail-val{font-size:12px;color:var(--text);font-weight:500}

/* SEARCH INPUT */
.search-input{background:var(--surface);border:1px solid var(--border);border-radius:5px;padding:6px 10px;font-size:12px;color:var(--text);outline:none;font-family:inherit}
.search-input:focus{border-color:var(--blue)}

/* PAGE HEADER */
.pg-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.pg-title{font-size:16px;font-weight:700;color:var(--text)}
.pg-sub{font-size:11px;color:var(--muted);margin-top:2px}

/* ACTIONS DROPDOWN */
.act-wrap{position:relative}
.act-menu{position:absolute;top:calc(100% + 4px);right:0;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);min-width:170px;z-index:50;display:none;padding:4px 0;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.act-menu.open{display:block}
.act-item{padding:8px 14px;cursor:pointer;color:var(--muted);font-size:12px;transition:all .1s}
.act-item:hover{background:var(--border);color:var(--text)}
.act-item.danger{color:var(--red)}.act-item.danger:hover{background:rgba(240,64,96,.1)}
.act-sep{height:1px;background:var(--border);margin:3px 0}

/* STATUS DOT */
.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:5px}
.dot-green{background:var(--green)}.dot-red{background:var(--red)}.dot-gray{background:var(--muted)}

/* TABS (inner) */
.inner-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:16px}
.itab{padding:7px 14px;font-size:12px;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent;transition:all .15s}
.itab:hover{color:var(--text)}
.itab.active{color:var(--blue);border-bottom-color:var(--blue)}
.itab-content{display:none}.itab-content.active{display:block}

/* PROGRESS BAR */
.prog-bar{height:4px;background:var(--border);border-radius:2px;overflow:hidden}
.prog-fill{height:100%;border-radius:2px;transition:width .3s}

/* MONO */
.mono{font-family:'JetBrains Mono',monospace;font-size:11px}

/* CHIP */
.chip{display:inline-flex;align-items:center;padding:1px 7px;border-radius:20px;font-size:10px;font-weight:600;background:var(--surface);border:1px solid var(--border);color:var(--muted)}

/* ENABLED PILL */
.pill-yes{background:rgba(34,201,122,.15);color:var(--green);border:1px solid rgba(34,201,122,.2);padding:1px 8px;border-radius:10px;font-size:10px;font-weight:700}
.pill-no{background:rgba(240,64,96,.15);color:var(--red);border:1px solid rgba(240,64,96,.2);padding:1px 8px;border-radius:10px;font-size:10px;font-weight:700}

/* DELETE BTN */
.delbtn{background:transparent;border:1px solid rgba(240,64,96,.3);color:var(--red);padding:2px 8px;border-radius:4px;font-size:10px;cursor:pointer;transition:all .15s}
.delbtn:hover{background:rgba(240,64,96,.1)}

/* DASHBOARD CHARTS */
.chart-container{position:relative;height:200px}
.mini-chart{position:relative;height:120px}

/* CDR TABLE */
.cdr-filter{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
/* Column order: 1 dt, 2 cust, 3 from, 4 supp, 5 to(Dest), 6 num, 7 dur, 8 pdd, 9 status, 10 cause, 11 cust_ip, 12 supp_ip, 13 media_ip, 14 rev, 15 cost, 16 cust_tp, 17 vend_tp, 18 pcap */
.cdr-hide-dt td:nth-child(1), .cdr-hide-dt th:nth-child(1){display:none}
.cdr-hide-cust td:nth-child(2), .cdr-hide-cust th:nth-child(2){display:none}
.cdr-hide-from td:nth-child(3), .cdr-hide-from th:nth-child(3){display:none}
.cdr-hide-supp td:nth-child(4), .cdr-hide-supp th:nth-child(4){display:none}
.cdr-hide-to td:nth-child(5), .cdr-hide-to th:nth-child(5){display:none}
.cdr-hide-num td:nth-child(6), .cdr-hide-num th:nth-child(6){display:none}
.cdr-hide-dur td:nth-child(7), .cdr-hide-dur th:nth-child(7){display:none}
.cdr-hide-pdd td:nth-child(8), .cdr-hide-pdd th:nth-child(8){display:none}
.cdr-hide-status td:nth-child(9), .cdr-hide-status th:nth-child(9){display:none}
.cdr-hide-cause td:nth-child(10), .cdr-hide-cause th:nth-child(10){display:none}
.cdr-hide-cust_ip td:nth-child(11), .cdr-hide-cust_ip th:nth-child(11){display:none}
.cdr-hide-supp_ip td:nth-child(12), .cdr-hide-supp_ip th:nth-child(12){display:none}
.cdr-hide-media_ip td:nth-child(13), .cdr-hide-media_ip th:nth-child(13){display:none}
.cdr-hide-rev td:nth-child(14), .cdr-hide-rev th:nth-child(14){display:none}
.cdr-hide-cost td:nth-child(15), .cdr-hide-cost th:nth-child(15){display:none}
.cdr-hide-cust_tp td:nth-child(16), .cdr-hide-cust_tp th:nth-child(16){display:none}
.cdr-hide-vend_tp td:nth-child(17), .cdr-hide-vend_tp th:nth-child(17){display:none}

/* RATE TABLE */
.rate-table td:nth-child(4){font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--green)}

/* INVOICE */
.inv-status-paid{background:rgba(34,201,122,.15);color:var(--green)}
.inv-status-unpaid{background:rgba(245,166,35,.15);color:var(--amber)}
.inv-status-overdue{background:rgba(240,64,96,.15);color:var(--red)}

/* SBC TABLE */
.sbc-table td{font-family:'JetBrains Mono',monospace;font-size:11px}

/* EMPTY STATE */
.empty{text-align:center;padding:40px;color:var(--muted);font-size:12px}
.empty-icon{font-size:28px;margin-bottom:8px;opacity:.4}

/* DIVIDER */
.divider{height:1px;background:var(--border);margin:16px 0}

/* GRID UTILS */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.flex{display:flex;align-items:center}.flex-between{display:flex;align-items:center;justify-content:space-between}
.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}
.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}
.mt-8{margin-top:8px}.mt-12{margin-top:12px}
.w-full{width:100%}
.text-right{text-align:right}

/* ══ LOGIN ══ */
#login-overlay{display:flex;position:fixed;inset:0;background:var(--bg);z-index:9999;align-items:center;justify-content:center;}
#login-box{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:40px;width:360px;max-width:90vw;}
.login-logo{font-size:24px;font-weight:800;color:var(--blue);margin-bottom:8px;}
.login-sub{font-size:12px;color:var(--muted);margin-bottom:24px;}
.login-inp{width:100%;padding:10px 14px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text);font-size:14px;box-sizing:border-box;margin-bottom:12px;}
.login-btn{width:100%;padding:12px;background:var(--blue);color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;}
.login-btn:hover{opacity:0.9;}
#otp-step{display:none;}

/* ══ ROUTING ══ */
.rp-subtab{background:none;border:none;border-bottom:3px solid transparent;padding:10px 18px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;}
.rp-subtab:hover{color:var(--text);}
.rp-subtab.active{color:var(--blue);border-bottom-color:var(--blue);}
.rp-subtab-content{display:block;}
.route-carrier-cell{font-size:11px;color:var(--text);}
.route-carrier-rate{font-size:10px;color:var(--green);}

        /* CDR Attack row highlighting */
        .cdr-attack { background: rgba(255, 80, 80, 0.08); }
        .cdr-attack td { color: #ff6b6b; }
        .cdr-attack:hover { background: rgba(255, 80, 80, 0.15); }


/* === Style Block 2 === */
body{font-family:Arial,sans-serif;margin:40px;color:#333}'+
    '.header{display:flex;justify-content:space-between;margin-bottom:30px}'+
    '.company{font-size:22px;font-weight:bold;color:#7c6df5}'+
    '.invoice-title{font-size:28px;font-weight:bold;color:#333;text-align:right}'+
    '.invoice-num{color:#7c6df5;font-size:14px}'+
    '.details{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0;padding:20px;background:#f8f8ff;border-radius:8px}'+
    '.label{color:#666;font-size:12px;margin-bottom:3px}'+
    '.value{font-weight:600;font-size:14px}'+
    '.amount-box{background:#7c6df5;color:white;padding:20px;border-radius:8px;text-align:center;margin:20px 0}'+
    '.amount-label{font-size:12px;opacity:0.8}'+
    '.amount-val{font-size:36px;font-weight:bold}'+
    '.footer{margin-top:40px;padding-top:20px;border-top:2px solid #eee;font-size:12px;color:#666;text-align:center}'+
    '.status-badge{padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600}'+
    '.status-unpaid{background:#fff3cd;color:#856404}'+
    '.status-paid{background:#d1e7dd;color:#0a3622}'+
    '.status-overdue{background:#f8d7da;color:#842029}'+
    '

/* === Style Block 3 === */

.cr-act-item { padding:10px 14px; cursor:pointer; font-size:13px; border-bottom:1px solid var(--border); color:var(--text); transition:background .15s; }
.cr-act-item:last-child { border-bottom:none; }
.cr-act-item:hover { background:rgba(59,130,246,0.1); }
.cr-act-danger { color:var(--red); }
.cr-act-danger:hover { background:rgba(239,68,68,0.1) !important; }
.modal-ov { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:9999; align-items:center; justify-content:center; }



/* === PROFESSIONAL HEADER FIX === */
.topbar {
  padding: 8px 14px !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.topbar > div:first-child {
  flex: 1;
  min-width: 0;
}

.topbar-r {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
  margin-left: auto !important;
}

.topbar-r button {
  font-size: 10px !important;
  padding: 3px 8px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.topbar-r span {
  font-size: 10px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Brand smaller */
.brand {
  font-size: 14px !important;
  font-weight: 600 !important;
}

.brand-icon {
  font-size: 16px !important;
}

/* Nav tabs compact */
.nav-tab {
  padding: 5px 10px !important;
  font-size: 12px !important;
}

/* Page header professional */
.page > div:first-child h2,
.page > div:first-child h1 {
  font-size: 18px !important;
  font-weight: 600 !important;
}

/* Stats professional */
.stat {
  padding: 12px 14px !important;
}

.stat-value {
  font-size: 20px !important;
  font-weight: 600 !important;
}

.stat-label {
  font-size: 10px !important;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}


/* === PROFESSIONAL TABLES === */
table {
  font-size: 12px !important;
}

th {
  font-size: 10px !important;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 8px !important;
  color: #888 !important;
}

td {
  padding: 8px !important;
  font-size: 12px !important;
}

/* === COMPACT BUTTONS === */
.btn {
  font-size: 12px !important;
  padding: 6px 12px !important;
}

.btn-xs {
  font-size: 10px !important;
  padding: 3px 8px !important;
}

/* Badge professional */
.badge, .badge-green, .badge-red {
  font-size: 10px !important;
  padding: 2px 8px !important;
}

/* Action buttons in tables */
button.btn-xs {
  font-size: 10px !important;
  padding: 2px 8px !important;
  margin: 0 2px;
}

/* Page title and subtitle */
h1 { font-size: 20px !important; }
h2 { font-size: 16px !important; }
h3 { font-size: 14px !important; }

/* Filter row */
.filter-row, .search-row {
  gap: 8px !important;
}

.filter-row input, .filter-row select {
  font-size: 12px !important;
  padding: 6px 10px !important;
}