/* PixelBilling - navy / amber, shared visual language with CBET Planner admin. */
:root {
  --on-accent: #111;
  --sidebar: #001529; --sidebar-hi: #0b2540; --yellow: #ffb703; --yellow-d: #e6a200; --blue: #1c3d7e;
  --bg: #f3f5f8; --card: #fff; --ink: #1e293b; --ink2: #334155; --mute: #64748b; --line: #e5e9f0; --line2: #cbd5e1;
  --ok: #15803d; --warn: #b45309; --bad: #b91c1c;
  --shadow: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.06);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font: 14px/1.55 'Inter', system-ui, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--blue); }

/* ================= shell ================= */
.shell { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }
aside { width: 252px; background: var(--sidebar); color: #94a3b8; display: flex; flex-direction: column; flex-shrink: 0; z-index: 50; border-right: 1px solid rgba(255,255,255,.04); }
.brand { padding: 20px 20px 16px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.07); }
img.logo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(255,183,3,.35); }
.brand b { display: block; color: #fff; font-size: 17px; font-weight: 700; letter-spacing: .01em; line-height: 1.2; } .brand b span { color: var(--yellow); }
.brand small { display: block; color: #8ea2ba; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.side-scroll { flex: 1; overflow-y: auto; padding: 6px 12px 12px; }
.side-scroll::-webkit-scrollbar { width: 6px; } .side-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 6px; }
.group { padding: 20px 12px 6px; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #5d7391; }
.navbtn { width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin: 1px 0; border: 0; border-radius: 8px; background: transparent; color: #a6b4c6; cursor: pointer; text-align: left; font-weight: 500; font-size: 13.5px; transition: background .15s, color .15s; }
.navbtn i { width: 18px; text-align: center; font-size: 14px; opacity: .9; }
.navbtn:hover { background: var(--sidebar-hi); color: #fff; }
.navbtn.on { background: var(--yellow); color: var(--on-accent); font-weight: 600; box-shadow: 0 2px 8px rgba(255,183,3,.25); }
.navbtn .lbl { flex: 1; }
.badge { font-size: 11px; font-weight: 700; color: #fff; border-radius: 99px; padding: 0 8px; min-width: 22px; line-height: 19px; text-align: center; }
.b-blue { background: #0ea5e9; } .b-red { background: #ef4444; } .b-green { background: #22c55e; } .b-purple { background: #6366f1; } .b-cyan { background: #06b6d4; }
.side-foot { padding: 14px 16px 18px; border-top: 1px solid rgba(255,255,255,.07); }
.side-foot .btn { width: 100%; justify-content: center; background: rgba(255,255,255,.07); color: #e2e8f0; font-weight: 600; font-size: 13px; padding: 9px; border-radius: 8px; border: 1px solid rgba(255,255,255,.1); }
.side-foot .btn:hover { background: var(--yellow); color: var(--on-accent); border-color: var(--yellow); }

.col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { background: #fff; border-bottom: 1px solid var(--line); padding: 0 28px; height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0; }
.crumbs { font-weight: 600; color: var(--mute); font-size: 13px; } .crumbs span { margin: 0 8px; opacity: .6; } .crumbs #crumb { color: var(--ink); font-weight: 700; opacity: 1; margin: 0; }
.menu { display: none; background: transparent; border: 0; font-size: 20px; cursor: pointer; margin-right: 10px; color: var(--ink); }
.who { display: flex; align-items: center; gap: 12px; text-align: right; background: none; border: 0; padding: 4px 6px; border-radius: 10px; cursor: pointer; } .who:hover { background: var(--bg); }
.who b { display: block; font-size: 13px; font-weight: 600; line-height: 1.2; }
.who small { display: block; color: var(--mute); font-size: 11px; text-transform: capitalize; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--sidebar); color: var(--yellow); border: 2px solid var(--yellow); display: grid; place-items: center; font-weight: 700; font-size: 14px; }
main { flex: 1; overflow-y: auto; padding: 28px 28px 56px; }
.page { max-width: 1200px; margin: 0 auto; }
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 40; display: none; }

/* ================= page header + sections ================= */
.pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.pagehead h1 { margin: 0; font-size: 22px; font-weight: 700; color: var(--sidebar); letter-spacing: -.01em; line-height: 1.25; }
.pagehead p { margin: 2px 0 0; color: var(--mute); font-size: 13px; }
.section-title { margin: 26px 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); display: flex; align-items: center; gap: 12px; }
.section-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.note { display: flex; gap: 10px; align-items: flex-start; background: #fffbeb; border: 1px solid #fde68a; border-left: 4px solid var(--yellow); color: #78350f; border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; font-size: 13px; }
.note i { margin-top: 3px; color: var(--yellow-d); }

/* ================= banner + cards ================= */
.banner { background: linear-gradient(100deg, var(--blue) 0%, var(--sidebar) 100%); border-bottom: 5px solid var(--yellow); border-radius: 12px; box-shadow: 0 8px 20px -6px rgba(0,21,41,.35); color: #fff; padding: 26px 30px; margin-bottom: 8px; position: relative; overflow: hidden; }
.banner::after { content: ""; position: absolute; right: -40px; top: -60px; width: 220px; height: 220px; border-radius: 50%; border: 36px solid rgba(255,183,3,.08); }
.banner h1 { margin: 0 0 2px; font-size: 24px; font-weight: 700; letter-spacing: -.01em; } .banner h1 span { color: var(--yellow); }
.banner p { margin: 0; color: #c3d0e2; }
.banner .meta { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #c3d0e2; }
.banner .meta i { color: var(--yellow); margin-right: 7px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 20px; margin-bottom: 16px; }
.card.flush { padding: 0; overflow: hidden; }
h2 { margin: 2px 0 14px; font-size: 18px; font-weight: 700; color: var(--sidebar); letter-spacing: -.01em; }
h3 { margin: 0 0 8px; font-size: 11px; color: var(--mute); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 16px; margin-bottom: 16px; }
.stat { display: flex; flex-direction: column; gap: 2px; margin: 0; transition: box-shadow .15s, transform .15s; }
.stat:hover { box-shadow: 0 6px 16px -6px rgba(15,23,42,.18); transform: translateY(-1px); }
.ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 15px; margin-bottom: 10px; }
.t-blue { background: #e0f2fe; color: #0369a1; } .t-red { background: #fee2e2; color: #b91c1c; } .t-green { background: #dcfce7; color: #15803d; }
.t-purple { background: #ede9fe; color: #6d28d9; } .t-amber { background: #fef3c7; color: #b45309; } .t-slate { background: #e2e8f0; color: #475569; }
.kpi { font-size: 26px; font-weight: 700; line-height: 1.2; color: var(--sidebar); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .kpi small { display: block; font-size: 12px; font-weight: 500; color: var(--mute); letter-spacing: 0; }
.stat .label { color: var(--mute); font-size: 13px; }
.mute { color: var(--mute); }
.quick { display: flex; gap: 10px; flex-wrap: wrap; }

/* ================= toolbar, tables ================= */
#content > .row { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; box-shadow: var(--shadow); gap: 10px; }
#content > .row > .btn:last-child:not(.sm) { margin-left: auto; }
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { color: var(--mute); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; background: #f8fafc; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; } tbody tr:hover { background: #fafbfd; }
td:last-child { white-space: nowrap; text-align: right; } th:last-child { text-align: right; }
.empty { text-align: center !important; padding: 44px 16px !important; color: var(--mute); }
.empty i { display: block; font-size: 28px; color: #cbd5e1; margin-bottom: 10px; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 2px 16px; color: var(--mute); font-size: 13px; }

/* ================= buttons, forms ================= */
.btn { background: var(--sidebar); color: #fff; border: 1px solid var(--sidebar); padding: 8px 16px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 13.5px; transition: background .15s, border-color .15s, box-shadow .15s; display: inline-flex; align-items: center; gap: 8px; }
.btn:hover { background: var(--sidebar-hi); box-shadow: 0 2px 6px rgba(0,21,41,.2); }
.btn.acc { background: var(--yellow); border-color: var(--yellow); color: var(--on-accent); } .btn.acc:hover { background: var(--yellow-d); }
.btn.sec { background: #fff; color: var(--ink2); border-color: var(--line2); } .btn.sec:hover { background: #f1f5f9; box-shadow: none; }
.btn.bad { background: #fff; color: var(--bad); border-color: #fecaca; } .btn.bad:hover { background: #fef2f2; box-shadow: none; }
.btn.sm { padding: 3px 10px; font-size: 12px; margin: 1px 0 1px 4px; border-radius: 6px; font-weight: 600; }
.btn:disabled { opacity: .45; cursor: default; box-shadow: none; }
input, select, textarea { background: #fff; border: 1px solid var(--line2); border-radius: 8px; padding: 9px 12px; width: 100%; transition: border-color .15s, box-shadow .15s; }
input::placeholder, textarea::placeholder { color: #94a3b8; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--yellow-d); box-shadow: 0 0 0 3px rgba(255,183,3,.25); }
label { display: block; margin: 12px 0 4px; color: var(--ink2); font-size: 12.5px; font-weight: 600; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; } .row input, .row select { width: auto; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: 99px; font-size: 12px; font-weight: 600; text-transform: capitalize; background: #f1f5f9; color: #475569; margin-right: 4px; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.active, .pill.confirmed, .pill.paid { background: #dcfce7; color: #15803d; }
.pill.pending, .pill.draft, .pill.issued, .pill.trial { background: #fef3c7; color: #b45309; }
.pill.suspended, .pill.failed, .pill.cancelled, .pill.void, .pill.expired, .pill.inactive, .pill.refunded { background: #fee2e2; color: #b91c1c; }
.err { color: var(--bad); font-size: 12.5px; margin-top: 8px; }
.items td { padding: 3px; border: 0; text-align: left; } .items th { background: transparent; padding: 3px; }

/* ================= overlays ================= */
#toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--sidebar); color: #fff; border-left: 4px solid var(--yellow); padding: 11px 18px; border-radius: 8px; display: none; max-width: 90vw; z-index: 90; box-shadow: 0 10px 25px -5px rgba(0,0,0,.3); font-weight: 500; }
#modal { position: fixed; inset: 0; background: rgba(0,21,41,.55); backdrop-filter: blur(2px); display: none; align-items: flex-start; justify-content: center; overflow: auto; padding: 40px 12px; z-index: 80; }
#modal .card { width: min(560px, 100%); border-top: 4px solid var(--yellow); padding: 24px; box-shadow: 0 25px 50px -12px rgba(0,0,0,.35); }
#modal h2 { font-size: 19px; margin-bottom: 4px; }

/* ================= sign in ================= */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: #fff; }
.auth-brand { background: linear-gradient(150deg, var(--blue) 0%, var(--sidebar) 68%); color: #fff; padding: 56px 64px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; border-right: 6px solid var(--yellow); }
.auth-brand::before { content: ""; position: absolute; left: -120px; bottom: -120px; width: 380px; height: 380px; border-radius: 50%; border: 56px solid rgba(255,183,3,.07); }
.auth-brand .logo-full { width: 230px; height: 230px; border-radius: 50%; display: block; margin: 0 0 34px; box-shadow: 0 18px 40px -10px rgba(0,0,0,.5); position: relative; }
.auth-brand h1 { margin: 0 0 10px; font-size: 32px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; position: relative; max-width: 460px; } .auth-brand h1 span { color: var(--yellow); }
.auth-brand p { margin: 0 0 26px; color: #c3d0e2; font-size: 15px; max-width: 440px; position: relative; }
.auth-brand ul { list-style: none; margin: 0; padding: 0; position: relative; }
.auth-brand li { display: flex; align-items: center; gap: 12px; margin: 10px 0; color: #dbe5f1; }
.auth-brand li i { width: 28px; height: 28px; border-radius: 8px; background: rgba(255,183,3,.14); color: var(--yellow); display: grid; place-items: center; font-size: 12px; flex-shrink: 0; }
.auth-form { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px 28px; background: var(--bg); }
.auth-form .card { width: min(420px, 100%); padding: 32px; margin: 0; box-shadow: 0 10px 30px -10px rgba(15,23,42,.18); }
.auth-form h2 { font-size: 22px; margin: 0 0 2px; } .auth-form .sub { margin: 0 0 8px; color: var(--mute); font-size: 13.5px; }
.auth-form .btn.wide { width: 100%; justify-content: center; padding: 11px; font-size: 14.5px; margin-top: 18px; background: var(--yellow); border-color: var(--yellow); color: var(--on-accent); }
.auth-form .btn.wide:hover { background: var(--yellow-d); }
.auth-form .switch { text-align: center; margin-top: 16px; color: var(--mute); font-size: 13px; } .auth-form .switch button { background: none; border: 0; color: var(--blue); font-weight: 600; cursor: pointer; padding: 0; }
.auth-form .foot { margin-top: 18px; color: var(--mute); font-size: 12px; text-align: center; }
.pw { position: relative; } .pw input { padding-right: 56px; }
.pw button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--mute); font-size: 12px; font-weight: 600; cursor: pointer; padding: 6px 8px; }

/* ================= responsive ================= */
@media (max-width: 1024px) {
  aside { position: fixed; left: -100%; top: 0; bottom: 0; transition: left .3s cubic-bezier(.4,0,.2,1); box-shadow: 0 25px 50px -12px rgba(0,0,0,.4); }
  aside.open { left: 0; } .overlay.show { display: block; }
  .menu { display: inline-block; } .topbar { padding: 0 14px; } main { padding: 18px 14px 44px; }
  .who div { display: none; }
  .auth { grid-template-columns: 1fr; } .auth-brand { padding: 28px 24px; border-right: 0; border-bottom: 5px solid var(--yellow); }
  .auth-brand .logo-full { width: 96px; height: 96px; margin-bottom: 14px; } .auth-brand h1 { font-size: 22px; } .auth-brand ul, .auth-brand p { display: none; }
  th, td { padding: 10px 12px; }
}

/* ================= auth: tabs, icon inputs, google, password meter ================= */
.auth-form .card { border-radius: 16px; border: 1px solid var(--line); }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--bg); border-radius: 10px; margin-bottom: 22px; }
.tabs button { border: 0; background: none; padding: 9px; border-radius: 8px; font-weight: 600; color: var(--mute); cursor: pointer; transition: background .15s, color .15s; }
.tabs button.on { background: #fff; color: var(--sidebar); box-shadow: 0 1px 3px rgba(15,23,42,.14); }
.auth-form .sub { margin-bottom: 16px; }
.gslot { display: flex; justify-content: center; min-height: 44px; }
.gbtn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px; border: 1px solid var(--line2); background: #fff; border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer; transition: background .15s, box-shadow .15s; }
.gbtn:hover { background: #f8fafc; box-shadow: var(--shadow); } .gbtn img { width: 18px; height: 18px; }
.or { display: flex; align-items: center; gap: 12px; margin: 18px 0 4px; color: var(--mute); font-size: 12px; } .or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.fi { position: relative; } .fi i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 13px; pointer-events: none; } .fi input { padding-left: 38px; }
.fi:focus-within i { color: var(--yellow-d); }
.meter-wrap { margin-top: 8px; } .meter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .meter i { height: 4px; border-radius: 4px; background: var(--line); }
.meter i.on.l1 { background: var(--bad); } .meter i.on.l2 { background: #f59e0b; } .meter i.on.l3 { background: var(--ok); } .meter-t { display: block; margin-top: 4px; color: var(--mute); font-size: 11.5px; }
.gchip { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); margin-bottom: 4px; }
.gchip img { width: 20px; height: 20px; } .gchip b { display: block; font-size: 13.5px; } .gchip small { color: var(--mute); }
.mute { color: var(--mute); }
/* account dialog */
.acct { display: flex; align-items: center; gap: 14px; } .acct b { display: block; font-size: 16px; } .acct small { display: block; color: var(--mute); text-transform: capitalize; } .acct small:nth-child(2) { text-transform: none; }
.avatar.lg { width: 52px; height: 52px; font-size: 20px; flex-shrink: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--bg); color: var(--mute); font-size: 12px; font-weight: 600; border: 1px solid var(--line); }
.chip img { width: 13px; height: 13px; } .chip.ok { background: #ecfdf3; color: var(--ok); border-color: #bbf7d0; } .chip.warn { background: #fffbeb; color: var(--warn); border-color: #fde68a; }
#modalbox h3 { margin: 20px 0 2px; font-size: 15px; } #modalbox .sub { margin: 0 0 6px; color: var(--mute); font-size: 13px; }

/* ================= auth layout v2: fits short windows, form scrolls on its own ================= */
.auth { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
.auth-brand { height: 100%; padding: clamp(24px, 6vh, 56px) clamp(32px, 5vw, 64px); }
.auth-brand .logo-full { width: clamp(110px, 28vh, 230px); height: clamp(110px, 28vh, 230px); margin-bottom: clamp(14px, 4vh, 34px); }
.auth-brand h1 { font-size: clamp(24px, 3.4vh + 10px, 32px); }
.auth-brand p { margin-bottom: clamp(12px, 3vh, 26px); }
.auth-brand::after { content: ""; position: absolute; right: -90px; top: -90px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(255,183,3,.16), transparent 70%); }
@media (max-height: 720px) { .auth-brand p { display: none; } .auth-brand li { margin: 6px 0; } }
@media (max-height: 560px) { .auth-brand ul { display: none; } }
.auth-form { height: 100%; overflow-y: auto; justify-content: flex-start; padding: 24px 28px; }
.auth-form .card { margin: auto; width: min(460px, 100%); flex-shrink: 0; padding: 28px 32px; border-top: 4px solid var(--yellow); }
.auth-form .foot { flex-shrink: 0; margin: 14px 0 0; }
.auth-form .foot { margin-bottom: auto; }
.auth-form input { height: 42px; } .auth-form .tabs { margin-bottom: 18px; }
.auth-form .btn.wide { height: 44px; margin-top: 16px; box-shadow: 0 6px 14px -6px rgba(230,162,0,.6); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .pair > div { min-width: 0; }
.lblrow { display: flex; justify-content: space-between; align-items: baseline; } .lblrow label { margin-bottom: 4px; }
.link { background: none; border: 0; padding: 0; color: var(--blue); font-size: 12.5px; font-weight: 600; cursor: pointer; } .link:hover { text-decoration: underline; }
.okbox { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 11px 13px; border-radius: 10px; background: #ecfdf3; border: 1px solid #bbf7d0; color: #166534; font-size: 13px; }
.okbox i { margin-top: 2px; }
.card .err:empty { display: none; }
@media (max-width: 1024px) {
  .auth { height: auto; min-height: 100vh; overflow: visible; } .auth-brand { height: auto; } .auth-form { height: auto; overflow: visible; padding: 24px 16px 32px; }
  .auth-brand .logo-full { width: 84px; height: 84px; margin-bottom: 12px; }
}
@media (max-width: 480px) { .pair { grid-template-columns: 1fr; } .auth-form .card { padding: 24px 20px; } }
@media (max-height: 700px) and (min-width: 1025px) {
  .auth-form { padding: 14px 24px; } .auth-form .card { padding: 18px 28px 20px; } .auth-form .sub { display: none; }
  .auth-form h2 { margin-bottom: 10px; } .auth-form .tabs { margin-bottom: 12px; } .or { margin: 12px 0 0; }
  .auth-form label { margin-top: 8px; } .auth-form .btn.wide { margin-top: 12px; } .auth-form .switch { margin-top: 10px; } .meter-wrap { margin-top: 6px; }
  .auth-form .foot { margin-top: 8px; }
}
@media (max-height: 640px) and (min-width: 1025px) { .auth-form .foot { display: none; } }

/* ================= documents (receipt / statement / invoice) + print ================= */
.doc { min-width: min(480px, 80vw); }
.doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 3px solid var(--yellow); }
.doc-head b { display: block; font-size: 18px; } .doc-head small { color: var(--mute); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 600; }
.doc-no { font-weight: 800; font-size: 16px; color: var(--blue); }
.doc-cust { margin-bottom: 8px; } .doc-cust b { display: block; } .doc-cust small { display: block; color: var(--mute); }
.kv { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px dashed var(--line); } .kv span { color: var(--mute); } .kv b { text-align: right; }
.kv.total { border-bottom: 0; border-top: 2px solid var(--ink); margin-top: 6px; padding-top: 10px; font-size: 16px; } .kv.total span { color: var(--ink); font-weight: 700; }
.stamp { display: inline-block; margin: 0 0 10px; padding: 3px 10px; border: 2px solid var(--bad); color: var(--bad); font-weight: 800; letter-spacing: .08em; border-radius: 6px; transform: rotate(-2deg); font-size: 12px; }
.cmd { display: block; margin-top: 8px; padding: 10px 12px; background: var(--sidebar); color: #e2e8f0; border-radius: 8px; font: 12.5px/1.4 Consolas, monospace; overflow-x: auto; white-space: nowrap; }
@media print {
  body * { visibility: hidden !important; }
  #modal, #modal * { visibility: visible !important; }
  #modal { position: absolute !important; inset: 0 !important; display: block !important; background: #fff !important; padding: 0 !important; }
  #modalbox { box-shadow: none !important; border: 0 !important; width: 100% !important; max-width: none !important; padding: 0 !important; }
  .noprint, #modalbox > .row, #modalbox .row.noprint { display: none !important; }
  #toast { display: none !important; }
}
#modal .card:has(.doc) { width: min(760px, 100%); max-height: 92vh; overflow-y: auto; }
.doc td, .doc th { white-space: nowrap; } .doc .tablewrap { margin: 10px 0; }
.card > h3 { margin-top: 24px; }

/* ================= routers list + link wizard ================= */
.chipbtn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid var(--line2); background: #fff; border-radius: 999px; font-weight: 600; cursor: pointer; color: var(--ink2); }
.chipbtn span { background: var(--bg); border-radius: 999px; padding: 0 8px; font-size: 12px; color: var(--mute); } .chipbtn.on { background: var(--sidebar); color: #fff; border-color: var(--sidebar); } .chipbtn.on span { background: rgba(255,255,255,.16); color: #fff; }
.stepper { display: flex; margin: 8px 0 22px; } .stp { flex: 1; display: flex; align-items: center; gap: 10px; position: relative; color: var(--mute); }
.stp:not(:last-child)::after { content: ""; flex: 1; height: 2px; background: var(--line2); margin: 0 12px; } .stp.done:not(:last-child)::after { background: var(--yellow); }
.stp .dot { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line2); display: grid; place-items: center; font-size: 13px; font-weight: 700; background: #fff; flex-shrink: 0; }
.stp.cur { color: var(--ink); } .stp.cur .dot { border-color: var(--yellow); box-shadow: 0 0 0 4px rgba(255,183,3,.25); } .stp.done .dot { background: var(--yellow); border-color: var(--yellow); color: var(--on-accent); } .stp b { font-size: 13px; white-space: nowrap; }
.wizcard { max-width: 760px; } .wizcard h3 { margin: 0 0 4px; font-size: 16px; } .wizcard h3 + p { margin-top: 0; } .wizcard h3:not(:first-child) { margin-top: 22px; }
.wizbar { position: sticky; bottom: 12px; max-width: 760px; display: flex; justify-content: space-between; gap: 10px; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 30px -10px rgba(15,23,42,.25); }
.codebox { position: relative; } .codebox pre { margin: 0; padding: 14px 16px; padding-right: 110px; background: var(--sidebar); color: #e2e8f0; border-radius: 10px; font: 12.5px/1.6 Consolas, monospace; overflow-x: auto; white-space: pre; }
.copybtn { position: absolute; right: 10px; top: 10px; margin: 0; }
.infobox, .errbox { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 11px 13px; border-radius: 10px; font-size: 13px; } .infobox i, .errbox i { margin-top: 2px; }
.infobox { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; } .errbox { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .opt { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 2px solid var(--line); border-radius: 12px; cursor: pointer; margin: 0; background: #fff; transition: border-color .15s, background .15s; }
.opt input { width: auto; margin-top: 3px; } .opt i { font-size: 18px; color: var(--mute); margin-top: 2px; } .opt b { display: block; color: var(--ink); } .opt small { color: var(--mute); font-weight: 400; display: block; }
.opt.on { border-color: var(--yellow); background: #fffbeb; } .opt.on i { color: var(--yellow-d); }
.bigok { width: 64px; height: 64px; border-radius: 50%; background: #dcfce7; color: var(--ok); display: grid; place-items: center; font-size: 28px; margin: 4px auto 0; }
@media (max-width: 640px) { .opts { grid-template-columns: 1fr; } .stp b { display: none; } }

.switch-row { display: flex; align-items: center; gap: 10px; cursor: pointer; margin: 4px 0 8px; font-size: 14px; } .switch-row input { width: auto; }

/* ================= sidebar dropdown menus ================= */
.navbtn.navmenu .chev { width: auto; margin-left: auto; font-size: 11px; opacity: .6; transition: transform .2s; } .navbtn.navmenu.open .chev { transform: rotate(180deg); }
.navbtn.navmenu.has-on:not(.open) { color: #fff; }
.submenu { display: none; margin: 0 0 4px 18px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.09); } .submenu.open { display: block; }
.navbtn.sub { padding: 7px 10px; font-size: 13px; } .navbtn.sub i { font-size: 12px; }

/* ================= create invoice (form + live preview) ================= */
.invlayout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; margin-bottom: 90px; }
.invcard { max-width: none; } .invcard h3 { margin: 0 0 2px; font-size: 16px; } .invcard h3 + p { margin-top: 0; }
.line { position: relative; padding: 12px 40px 12px 0; border-bottom: 1px dashed var(--line); } .pair3 { display: grid; grid-template-columns: 90px 1fr 1fr; gap: 10px; }
.amt { padding: 9px 0; font-weight: 600; } .iconbtn { position: absolute; right: 0; top: 14px; background: none; border: 0; color: #94a3b8; cursor: pointer; padding: 6px; } .iconbtn:hover { color: var(--bad); }
.addline { width: 100%; margin: 12px 0 6px; border-style: dashed; justify-content: center; }
.inv-sum { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; padding-top: 12px; border-top: 2px solid var(--ink); } .inv-sum span { color: var(--mute); } .inv-total { font-size: 22px; }
.invprev-wrap { position: sticky; top: 12px; } .prevlabel { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--mute); margin-bottom: 8px; }
.invprev { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 24px; box-shadow: var(--shadow); max-height: calc(100vh - 150px); overflow-y: auto; font-size: 13px; }
.ip-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; } .ip-logo { width: 42px; height: 42px; border-radius: 10px; background: var(--yellow); color: var(--on-accent); font-weight: 800; display: grid; place-items: center; flex-shrink: 0; }
.ip-biz { flex: 1; } .ip-biz b { display: block; font-size: 14px; } .ip-biz small { color: var(--mute); } .ip-title { text-align: right; } .ip-title h2 { margin: 0 0 4px; font-size: 24px; }
.ip-meta { margin-bottom: 14px; } .ip-parties small { display: block; color: var(--mute); } .ip-parties b { display: block; margin: 2px 0; } .ip-due { margin: 16px 0 8px; font-size: 18px; font-weight: 800; }
.ip-notes { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--line); }
@media (max-width: 1100px) { .invlayout { grid-template-columns: 1fr; } .invprev-wrap { position: static; } }
@media (max-width: 480px) { .pair3 { grid-template-columns: 70px 1fr; } .pair3 > div:last-child { grid-column: 1 / -1; } }

/* ================= fiber map ================= */
.fbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.fbar select { width: auto; } #fibermap { height: 600px; border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow); z-index: 1; } #fibermap.picking, #fibermap.picking .leaflet-interactive { cursor: crosshair; }
.fmark { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.4); display: grid; place-items: center; color: #fff; font-size: 14px; }
.fmark.s-planned { opacity: .65; border-style: dashed; border-color: #f59e0b; } .fmark.s-faulty { border-color: #dc2626; box-shadow: 0 0 0 4px rgba(220,38,38,.35); } .fmark.pick { box-shadow: 0 0 0 5px rgba(255,183,3,.7); }
.fpop { min-width: 200px; font: 13px/1.45 'Inter', system-ui, sans-serif; } .fpop b { font-size: 14px; } .fpop .mute { color: var(--mute); margin: 2px 0; } .fpop .btn.sm { margin: 1px 4px 1px 0; }
.fcables { margin: 6px 0; padding: 6px 8px; background: var(--bg); border-radius: 8px; font-size: 12px; }
.flegend { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 10px; font-size: 12.5px; color: var(--ink2); } .flegend .lg { display: inline-block; width: 26px; height: 0; border-top: 4px solid; vertical-align: middle; margin-right: 6px; } .flegend .lg:not(.dash):not(.dot) { border-color: #16a34a; } .flegend .lg.dash { border-top-style: dashed; } .flegend .lg.dot { border-top-style: dotted; }
.leaflet-popup-content { margin: 12px 14px; }
.fbar input { width: 200px; }

/* ================= subscribers ================= */
.sub-contact { display: flex; align-items: center; gap: 12px; } .sub-avatar { width: 36px; height: 36px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 13px; display: grid; place-items: center; flex-shrink: 0; }
.exp { font-weight: 600; white-space: nowrap; } .exp.bad { color: var(--bad); } .exp.warn { color: var(--warn); } .exp.ok { color: var(--ok); }
.stat.clickable { cursor: pointer; } .stat.clickable.on { box-shadow: 0 0 0 2px var(--yellow); }
.hint { color: var(--mute); font-weight: 400; } .sub-new { display: flex; align-items: center; gap: 14px; padding: 14px 20px; }

.swatch { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line2); display: inline-block; }

/* ================= row action dropdown ================= */
.btn.dots { font-size: 16px; line-height: 1; padding: 2px 10px 6px; letter-spacing: 1px; }
.rowmenu { position: fixed; z-index: 400; min-width: 170px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px -12px rgba(15,23,42,.35); }
.rm-item { display: block; width: 100%; text-align: left; padding: 8px 12px; border: 0; border-radius: 8px; background: none; font-size: 13.5px; color: var(--ink2); cursor: pointer; } .rm-item:hover { background: var(--bg); color: var(--ink); } .rm-item.bad { color: var(--bad); } .rm-item.bad:hover { background: #fef2f2; }
td .btn + .btn.dots, td .btn.dots { margin-left: 4px; }

.usage { margin: 10px 0; } .bar { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; } .bar i { display: block; height: 100%; border-radius: 99px; }