/* SlashX Licensing Portal — Stylesheet
   Matches ITMS app design system exactly
   ─────────────────────────────────────── */

:root {
  --bg:        #0f1117;
  --bg2:       #161b27;
  --bg3:       #1e2535;
  --bg4:       #252d40;
  --border:    #2a3349;
  --border2:   #3a4560;
  --text:      #e8eaf0;
  --text2:     #9aa3b8;
  --text3:     #6b7490;
  --accent:    #6366f1;
  --accent-h:  #5254cc;
  --accent2:   #06b6d4;
  --green:     #10b981;
  --yellow:    #f59e0b;
  --red:       #ef4444;
  --orange:    #f97316;
  --purple:    #8b5cf6;
  --radius:    8px;
  --radius-lg: 12px;
  --shadow:    0 4px 24px rgba(0,0,0,.4);
  --sidebar-w: 230px;
  --topbar-h:  56px;
  --transition:0.18s ease;
}

/* ── Reset ─────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:14px; background:var(--bg); color:var(--text); }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

/* All form elements inherit font */
input,select,textarea,button { font-family:inherit; font-size:inherit; }

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

/* ── Layout shell ──────────────────────────────────── */
.shell { display:flex; height:100vh; overflow:hidden; }
.sidebar { width:var(--sidebar-w); background:var(--bg2); border-right:1px solid var(--border); display:flex; flex-direction:column; flex-shrink:0; overflow-y:auto; }
.main-content { flex:1; overflow-y:auto; background:var(--bg); }
.nav-toggle-global { position:fixed; top:10px; left:10px; z-index:950; width:36px; height:36px; border:1px solid var(--border); background:var(--bg2); color:var(--text); }
.sidebar-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.45); opacity:0; visibility:hidden; pointer-events:none; transition:opacity var(--transition),visibility var(--transition); z-index:890; }
.shell.nav-open-mobile .sidebar-backdrop { opacity:1; visibility:visible; pointer-events:auto; }

/* ── Sidebar ────────────────────────────────────────── */
.logo-area { display:flex; align-items:center; gap:10px; padding:0 14px; min-height:var(--topbar-h); border-bottom:1px solid var(--border); }
.logo { font-size:1rem; font-weight:700; color:var(--text); }
.logo span { color:var(--accent); }
.logo-sub { font-size:.7rem; color:var(--text3); margin-top:1px; }
.nav-section { font-size:10px; font-weight:700; letter-spacing:.08em; color:var(--text3); padding:12px 16px 4px; text-transform:uppercase; }
.nav-item { display:flex; align-items:center; gap:10px; padding:9px 14px; color:var(--text2); border-radius:6px; margin:1px 6px; cursor:pointer; transition:background var(--transition),color var(--transition); text-decoration:none; font-size:13px; }
.nav-item:hover { background:var(--bg3); color:var(--text); text-decoration:none; }
.nav-item.active { background:var(--accent); color:#fff; }
.nav-badge { margin-left:auto; background:var(--red); color:#fff; font-size:10px; padding:1px 6px; border-radius:10px; }
.nav-badge.green { background:var(--green); }
.sidebar-footer { margin-top:auto; padding:10px; border-top:1px solid var(--border); }
.user-chip { display:flex; align-items:center; gap:8px; padding:8px; border-radius:var(--radius); background:var(--bg3); }
.avatar { width:30px; height:30px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; flex-shrink:0; }

/* ── Page container ─────────────────────────────────── */
.page { padding:24px; padding-top:64px; }
.page-header { margin-bottom:20px; }
.page-title { font-size:1.1rem; font-weight:700; color:var(--text); }
.page-sub { font-size:.82rem; color:var(--text2); margin-top:3px; }

/* ── Cards ──────────────────────────────────────────── */
.card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-lg); }
.card-header { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border); }
.card-title { font-size:.95rem; font-weight:600; }
.card-body { padding:18px; }

/* ── Stat cards ─────────────────────────────────────── */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px; }
.stat-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px; display:flex; flex-direction:column; gap:6px; transition:background var(--transition); }
.stat-card:hover { background:var(--bg3); }
.stat-card.accent { border-color:var(--accent); background:linear-gradient(135deg,var(--bg2),rgba(99,102,241,.08)); }
.stat-value { font-size:2rem; font-weight:700; color:var(--text); }
.stat-value.blue { color:var(--accent); }
.stat-value.cyan { color:var(--accent2); }
.stat-value.green { color:var(--green); }
.stat-value.amber { color:var(--yellow); }
.stat-label { font-size:.78rem; color:var(--text2); }
.stat-delta { font-size:.75rem; color:var(--green); }
.stat-delta.neg { color:var(--red); }

/* ── Buttons ─────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border:none; border-radius:var(--radius); cursor:pointer; font-weight:500; font-size:13px; transition:opacity var(--transition),background var(--transition); text-decoration:none; white-space:nowrap; }
.btn:hover { opacity:.88; text-decoration:none; }
.btn:active { opacity:.75; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-h); color:#fff; opacity:1; }
.btn-secondary { background:var(--bg4); color:var(--text); border:1px solid var(--border2); }
.btn-secondary:hover { background:var(--bg3); color:var(--text); opacity:1; }
.btn-danger { background:var(--red); color:#fff; }
.btn-success { background:var(--green); color:#fff; }
.btn-warning { background:var(--yellow); color:#000; }
.btn-ghost { background:transparent; color:var(--text2); border:1px solid var(--border); }
.btn-ghost:hover { background:var(--bg3); color:var(--text); opacity:1; }
.btn-sm { padding:4px 10px; font-size:.8rem; }
.btn-xs { padding:3px 8px; font-size:.75rem; }
.btn-block { width:100%; justify-content:center; }
.btn-icon { background:none; border:none; color:var(--text2); cursor:pointer; padding:5px; border-radius:4px; display:inline-flex; align-items:center; justify-content:center; transition:color var(--transition),background var(--transition); }
.btn-icon:hover { color:var(--text); background:var(--bg4); }
.w-full { width:100%; }

/* ── Forms ───────────────────────────────────────────── */
.form-group { margin-bottom:1rem; }
.form-group label { display:block; font-size:.8rem; font-weight:600; color:var(--text2); margin-bottom:4px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }

/* ── All input types (including plain <input> with no type) ── */
input[type=text],
input[type=password],
input[type=email],
input[type=number],
input[type=date],
input[type=url],
input[type=search],
input[type=tel],
input[type=file],
input:not([type]),
select,
textarea {
  width:100%;
  padding:8px 12px;
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--text);
  outline:none;
  transition:border-color var(--transition);
}
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=number]:focus,
input[type=date]:focus,
input[type=url]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input:not([type]):focus,
select:focus,
textarea:focus { border-color:var(--accent); }

input::placeholder,textarea::placeholder { color:var(--text3); }
input[disabled] { opacity:.55; cursor:not-allowed; }
textarea { resize:vertical; min-height:80px; }
input[type=checkbox] { accent-color:var(--accent); width:14px; height:14px; cursor:pointer; width:auto; }
select { cursor:pointer; }

/* ── Tables ──────────────────────────────────────────── */
.table-wrap { overflow-x:auto; border-radius:var(--radius-lg); border:1px solid var(--border); }
/* Inside a card the table-wrap is flush — card provides the border/radius */
.card .table-wrap { border-radius:0; border:none; border-top:1px solid var(--border); }
.card-body .table-wrap { border-radius:0; border:none; }
.card-header + .table-wrap { border-top:1px solid var(--border); }
table { width:100%; border-collapse:collapse; }
th { padding:10px 14px; text-align:left; font-size:.78rem; font-weight:700; color:var(--text2); letter-spacing:.04em; white-space:nowrap; border-bottom:1px solid var(--border); background:var(--bg2); }
td { padding:10px 14px; border-bottom:1px solid var(--border); font-size:13px; vertical-align:middle; color:var(--text); }
tr:last-child td { border-bottom:none; }
tr:hover td { background:var(--bg3); }
.table-empty { text-align:center; padding:40px; color:var(--text3); font-size:.88rem; }

/* ── Badges ──────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:20px; font-size:.72rem; font-weight:600; }
.badge-green  { background:rgba(16,185,129,.15);  color:#34d399; }
.badge-red    { background:rgba(239,68,68,.15);    color:#f87171; }
.badge-amber,
.badge-yellow { background:rgba(245,158,11,.15);   color:#fbbf24; }
.badge-blue   { background:rgba(6,182,212,.15);    color:#22d3ee; }
.badge-purple { background:rgba(139,92,246,.15);   color:#a78bfa; }
.badge-gray   { background:rgba(107,114,128,.15);  color:#9ca3af; }
.badge-orange { background:rgba(249,115,22,.15);   color:#fb923c; }

/* ── Modals ──────────────────────────────────────────── */
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.7); display:flex; align-items:center; justify-content:center; z-index:1000; padding:20px; }
.modal { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-lg); width:100%; max-width:560px; max-height:90vh; display:flex; flex-direction:column; box-shadow:var(--shadow); }
.modal-lg  { max-width:720px; }
.modal-xl  { max-width:960px; }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); flex-shrink:0; }
.modal-header h3, .modal-title { font-size:1rem; font-weight:600; }
.modal-body { flex:1; overflow-y:auto; padding:20px; }
.modal-body::-webkit-scrollbar { width:4px; }
.modal-body::-webkit-scrollbar-thumb { background:var(--border2); }
.modal-footer { padding:14px 20px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-shrink:0; }

/* ── Alerts & Flash ──────────────────────────────────── */
.flash, .alert { padding:10px 14px; border-radius:var(--radius); font-size:.85rem; margin-bottom:12px; }
.flash-success, .alert-success { background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.25); color:#34d399; }
.flash-error,   .alert-danger  { background:rgba(239,68,68,.12);  border:1px solid rgba(239,68,68,.25);  color:#f87171; }
.flash-info,    .alert-info    { background:rgba(99,102,241,.1);  border:1px solid rgba(99,102,241,.25); color:#a5b4fc; }
.flash-warning, .alert-warning { background:rgba(245,158,11,.1);  border:1px solid rgba(245,158,11,.25); color:#fbbf24; }

/* ── Utilities ───────────────────────────────────────── */
.hidden { display:none !important; }
.flex { display:flex; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.flex-wrap { flex-wrap:wrap; }
.gap-2 { gap:8px; } .gap-3 { gap:12px; }
.mb-4 { margin-bottom:16px; } .mb-6 { margin-bottom:24px; }
.mt-4 { margin-top:16px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.text-muted { color:var(--text2); }
.text-sm { font-size:.8rem; }
.text-xs { font-size:.75rem; }
.fw-bold { font-weight:700; }
.text-accent { color:var(--accent); }
.text-green { color:var(--green); }
.text-red { color:var(--red); }
.text-mono { font-family:'SF Mono','Fira Code','Consolas',monospace; }
.section-title { font-size:.95rem; font-weight:600; margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.divider { height:1px; background:var(--border); margin:14px 0; }
.tag { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; background:var(--bg4); border-radius:20px; font-size:.78rem; color:var(--text2); }
.detail-item label { font-size:.75rem; color:var(--text3); display:block; margin-bottom:2px; }
.detail-item span { font-size:.9rem; }
.progress-bar { height:5px; background:var(--bg4); border-radius:3px; overflow:hidden; }
.progress-fill { height:100%; border-radius:3px; transition:width .4s; }
code { font-family:'SF Mono','Fira Code','Consolas',monospace; font-size:.85em; background:var(--bg3); padding:2px 6px; border-radius:4px; color:var(--accent2); }
pre { font-family:'SF Mono','Fira Code','Consolas',monospace; }

/* ── Login ───────────────────────────────────────────── */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at 60% 20%,#1a1f35 0%,var(--bg) 70%); }
.login-card { width:100%; max-width:380px; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-lg); padding:2.5rem; box-shadow:var(--shadow); }
.login-logo { display:flex; align-items:center; gap:12px; margin-bottom:2rem; }
.login-logo h1 { font-size:1.1rem; font-weight:600; color:var(--text); }
.logo-icon { font-size:2rem; color:var(--accent); }

/* ============================================================
   THEMES
   ============================================================ */

/* ── Light ── */
body.theme-light {
  --bg:      #f4f6f9;
  --bg2:     #ffffff;
  --bg3:     #eef0f4;
  --bg4:     #e2e5ec;
  --border:  #c8cdd9;
  --border2: #a8b0c4;
  --text:    #111318;
  --text2:   #2d3344;
  --text3:   #525c75;
  --accent:  #4338ca;
  --accent-h:#3730a3;
  --accent2: #0891b2;
  --green:   #047857;
  --yellow:  #b45309;
  --red:     #b91c1c;
  --purple:  #6d28d9;
  --orange:  #c2410c;
}
body.theme-light .sidebar          { background:#fff; box-shadow:2px 0 8px rgba(0,0,0,.08); }
body.theme-light .user-chip        { background:#eef0f4; }
body.theme-light .card             { box-shadow:0 1px 4px rgba(0,0,0,.07); }
body.theme-light th                { background:#f4f6f9; color:#1a2035; }
body.theme-light .nav-item         { color:#2d3344; }
body.theme-light .nav-item.active  { background:var(--accent); color:#fff; }
body.theme-light .nav-item:hover   { background:#eef0f4; color:#111318; }
body.theme-light .nav-section      { color:#3d4760; }
body.theme-light .form-group label { color:#1e2538; }
body.theme-light .text-muted,
body.theme-light .page-sub         { color:#3d475e; }
body.theme-light .text3            { color:#525c75; }
body.theme-light code              { background:#e4e7ef; color:#1e2538; }
body.theme-light .badge-gray       { background:#dde1eb; color:#2d3344; }
body.theme-light .badge-green      { background:#d1fae5; color:#065f46; }
body.theme-light .badge-blue       { background:#dbeafe; color:#1e40af; }
body.theme-light .badge-red        { background:#fee2e2; color:#991b1b; }
body.theme-light .badge-amber,
body.theme-light .badge-yellow     { background:#fef3c7; color:#92400e; }
body.theme-light .badge-purple     { background:#ede9fe; color:#5b21b6; }
body.theme-light .badge-orange     { background:#ffedd5; color:#9a3412; }
body.theme-light .modal            { background:#fff; }
body.theme-light .modal-header,
body.theme-light .modal-footer     { background:#f4f6f9; }
body.theme-light .flash-info,
body.theme-light .alert-info       { background:#eff6ff; border-color:#bfdbfe; color:#1e40af; }
body.theme-light .flash-success,
body.theme-light .alert-success    { background:#f0fdf4; border-color:#bbf7d0; color:#065f46; }
body.theme-light .flash-error,
body.theme-light .alert-danger     { background:#fef2f2; border-color:#fecaca; color:#991b1b; }
body.theme-light .flash-warning,
body.theme-light .alert-warning    { background:#fffbeb; border-color:#fde68a; color:#92400e; }
body.theme-light .btn-secondary    { background:#e4e7ef; color:#1e2538; border-color:#c0c6d4; }
body.theme-light .btn-secondary:hover { background:#d5d9e4; }
body.theme-light .btn-ghost        { color:#2d3344; border-color:#c8cdd9; }
body.theme-light .btn-ghost:hover  { background:#eef0f4; color:#111318; }
body.theme-light .tag              { background:#e4e7ef; color:#2d3344; }
body.theme-light tr:hover td       { background:#f4f6f9; }
body.theme-light .stat-card        { background:#fff; }
body.theme-light .stat-card:hover  { background:#f4f6f9; }

/* ── Winter Night ── */
body.theme-winter-night {
  --bg:      #06101e;
  --bg2:     #0a1628;
  --bg3:     #0f1f38;
  --bg4:     #162848;
  --border:  #1e3358;
  --border2: #264070;
  --text:    #d6e8ff;
  --text2:   #7aaed6;
  --text3:   #3d6a94;
  --accent:  #38bdf8;
  --accent-h:#0ea5e9;
  --accent2: #0ea5e9;
  --green:   #22d3ee;
  --yellow:  #93c5fd;
  --red:     #f87171;
  --purple:  #a78bfa;
}
body.theme-winter-night .sidebar            { background:#080e1a; border-right-color:#1e3358; }
body.theme-winter-night .user-chip          { background:#0f1f38; }
body.theme-winter-night .nav-item.active    { background:rgba(56,189,248,.15); color:#38bdf8; }
body.theme-winter-night .nav-item.active:hover { background:rgba(56,189,248,.2); }
body.theme-winter-night .stat-card          { background:linear-gradient(135deg,#0a1628,#0f2040); border-color:#1e3358; }
body.theme-winter-night .stat-card.accent   { border-color:#38bdf8; }
body.theme-winter-night .btn-primary        { background:#0ea5e9; }
body.theme-winter-night .btn-primary:hover  { background:#38bdf8; }
body.theme-winter-night .logo span          { color:#38bdf8; }
body.theme-winter-night .nav-item.active    { color:#38bdf8; }
body.theme-winter-night code                { background:#0f1f38; color:#7dd3fc; }
body.theme-winter-night .badge-blue         { background:rgba(56,189,248,.15); color:#7dd3fc; }
body.theme-winter-night .modal              { background:#0a1628; border-color:#1e3358; }
body.theme-winter-night .modal-header,
body.theme-winter-night .modal-footer       { background:#06101e; border-color:#1e3358; }

/* ── Disable browser autofill highlight ─────────────────────────────────────
   Browsers ignore autocomplete=off on autocomplete inputs but we can at least
   suppress the yellow/blue autofill background flash ──────────────────────── */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--bg3) inset !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text);
  transition: background-color 9999s ease-in-out 0s;
}

/* ── Tax Rate Picker ──────────────────────────────────────────── */

.tr-picker { }
.tr-search-wrap { position:relative; }
.tr-search-wrap input { width:100%; }
.tr-dropdown { position:absolute; top:calc(100% + 2px); left:0; right:0; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); z-index:200; max-height:220px; overflow-y:auto; display:none; box-shadow:var(--shadow); }
.tr-dropdown.open { display:block; }
.tr-opt { padding:9px 12px; cursor:pointer; font-size:.85rem; border-bottom:1px solid var(--border); }
.tr-opt:last-child { border-bottom:none; }
.tr-opt:hover, .tr-opt.focused { background:var(--bg3); }
.tr-opt-name { font-weight:600; }
.tr-opt-meta { font-size:.75rem; color:var(--text2); margin-top:2px; }
.tr-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.tr-tag { display:inline-flex; align-items:center; gap:5px; padding:4px 10px 4px 12px; background:rgba(99,102,241,.12); border:1px solid rgba(99,102,241,.3); border-radius:20px; font-size:.82rem; font-weight:500; color:var(--accent); max-width:100%; }
.tr-tag-desc { font-weight:400; opacity:.65; font-size:.76rem; }
.tr-tag button { background:none; border:none; color:var(--accent); cursor:pointer; font-size:1rem; padding:0; line-height:1; opacity:.6; flex-shrink:0; }
.tr-tag button:hover { opacity:1; }
.tr-empty { font-size:.78rem; color:var(--text3); font-style:italic; }

/* ── Responsive navigation ───────────────────────────────────── */
@media (min-width: 901px) {
  .nav-toggle-global { left:12px; }
  .shell:not(.nav-hidden-desktop) .nav-toggle-global { left:calc(var(--sidebar-w) + 10px); }
  .shell.nav-hidden-desktop .sidebar { margin-left:calc(var(--sidebar-w) * -1); }
}

@media (max-width: 900px) {
  .nav-toggle-global { display:inline-flex; align-items:center; justify-content:center; }
  .sidebar { position:fixed; top:0; left:0; height:100vh; z-index:900; transform:translateX(-100%); transition:transform var(--transition); }
  .shell.nav-open-mobile .sidebar { transform:translateX(0); }
  .page { padding:18px; padding-top:64px; }
  .stats-grid, .grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid-3 { grid-template-columns:1fr; }
  .grid-2 { grid-template-columns:1fr; }
  .form-row, .form-row-3 { grid-template-columns:1fr; }
}