/* ================================================================
   ISP Portal — Master Stylesheet
   Dark Sidebar | Light Content | Sora Font
   ================================================================ */
:root {
  --sidebar-bg:     #0f172a;
  --sidebar-w:      260px;
  --sidebar-hover:  #1e293b;
  --sidebar-active: #2563eb;
  --content-bg:     #f1f5f9;
  --card-bg:        #ffffff;
  --primary:        #2563eb;
  --primary-lt:     #dbeafe;
  --accent:         #f59e0b;
  --accent-lt:      #fef3c7;
  --success:        #10b981;
  --danger:         #ef4444;
  --text-dark:      #0f172a;
  --text-muted:     #64748b;
  --border:         #e2e8f0;
  --shadow-sm:      0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05);
  --shadow-md:      0 4px 6px rgba(0,0,0,.07),0 2px 4px rgba(0,0,0,.05);
  --radius:         .75rem;
  --radius-sm:      .5rem;
  --topbar-h:       64px;
  --font:           'Sora', sans-serif;
  --mono:           'JetBrains Mono', monospace;
}
*,*::before,*::after { box-sizing: border-box; }
html,body { height:100%; font-family:var(--font); background:var(--content-bg); color:var(--text-dark); font-size:14px; line-height:1.6; }
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:3px; }

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar { position:fixed; left:0; top:0; bottom:0; width:var(--sidebar-w); background:var(--sidebar-bg); display:flex; flex-direction:column; z-index:1000; transition:width .2s; overflow:hidden; }
.sidebar.collapsed { width:68px; }

.sidebar-brand { display:flex; align-items:center; gap:12px; padding:18px 16px; border-bottom:1px solid #1e293b; min-height:70px; }
.sidebar-logo { width:36px; height:36px; object-fit:contain; border-radius:8px; flex-shrink:0; background:#1e3a8a; padding:3px; }
.sidebar-title { color:#f8fafc; font-weight:700; font-size:14px; white-space:nowrap; transition:opacity .2s; }
.sidebar.collapsed .sidebar-title { opacity:0; pointer-events:none; }

.sidebar-user { display:flex; align-items:center; gap:10px; margin:12px 10px 4px; padding:12px; background:rgba(255,255,255,.05); border-radius:var(--radius-sm); }
.user-avatar { width:36px; height:36px; background:var(--primary); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:15px; flex-shrink:0; }
.user-info { overflow:hidden; transition:opacity .2s; }
.sidebar.collapsed .user-info { opacity:0; pointer-events:none; }
.user-name { color:#f1f5f9; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.badge-role { display:inline-block; padding:1px 8px; border-radius:100px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; }
.role-superadmin { background:rgba(124,58,237,.2); color:#a78bfa; }
.role-staff       { background:rgba(5,150,105,.2);  color:#6ee7b7; }
.role-collection  { background:rgba(217,119,6,.2);  color:#fbbf24; }

.sidebar-nav { flex:1; overflow-y:auto; padding:8px 10px; }
.sidebar-link { display:flex; align-items:center; gap:12px; padding:10px 12px; color:#94a3b8; text-decoration:none; border-radius:var(--radius-sm); transition:all .15s; white-space:nowrap; font-size:13px; font-weight:500; margin-bottom:2px; }
.sidebar-link i { font-size:17px; flex-shrink:0; width:20px; text-align:center; }
.sidebar-link span { transition:opacity .2s; }
.sidebar.collapsed .sidebar-link span { opacity:0; pointer-events:none; }
.sidebar-link:hover { background:var(--sidebar-hover); color:#f1f5f9; transform:translateX(2px); }
.sidebar-link.active { background:var(--primary); color:#fff; box-shadow:0 4px 12px rgba(37,99,235,.35); }
.sidebar-footer { padding:10px; border-top:1px solid #1e293b; }
.link-danger { color:#f87171 !important; }
.link-danger:hover { background:rgba(239,68,68,.1) !important; color:#ef4444 !important; }

/* ── Main wrapper ───────────────────────────────────────────── */
.main-wrapper { margin-left:var(--sidebar-w); min-height:100vh; display:flex; flex-direction:column; transition:margin-left .2s; }
.main-wrapper.expanded { margin-left:68px; }

.topbar { position:sticky; top:0; height:var(--topbar-h); background:var(--card-bg); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:14px; padding:0 24px; z-index:100; box-shadow:var(--shadow-sm); }
.sidebar-toggle { background:none; border:1px solid var(--border); border-radius:var(--radius-sm); padding:6px 10px; cursor:pointer; font-size:18px; color:var(--text-muted); transition:all .15s; }
.sidebar-toggle:hover { background:var(--primary-lt); color:var(--primary); border-color:var(--primary); }
.topbar-title { flex:1; font-weight:700; font-size:16px; }
.topbar-right { display:flex; align-items:center; gap:12px; }
.topbar-clock { font-family:var(--mono); font-size:11px; color:var(--text-muted); background:var(--content-bg); padding:4px 10px; border-radius:100px; border:1px solid var(--border); }
.content-area { flex:1; padding:28px; }

/* ── Cards ──────────────────────────────────────────────────── */
.card { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.card-header { background:transparent; border-bottom:1px solid var(--border); padding:14px 20px; font-weight:600; font-size:13.5px; display:flex; align-items:center; gap:8px; }
.card-body { padding:20px; }

.stat-card { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-sm); transition:transform .15s,box-shadow .15s; }
.stat-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.stat-icon { width:46px; height:46px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:21px; margin-bottom:14px; }
.stat-value { font-size:26px; font-weight:700; line-height:1; }
.stat-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.7px; color:var(--text-muted); margin-top:5px; }
.stat-primary .stat-icon { background:var(--primary-lt); color:var(--primary); }
.stat-success .stat-icon { background:#d1fae5; color:var(--success); }
.stat-accent  .stat-icon { background:var(--accent-lt); color:var(--accent); }
.stat-danger  .stat-icon { background:#fee2e2; color:var(--danger); }

/* ── Tables ─────────────────────────────────────────────────── */
.table { font-size:13px; }
.table thead th { background:var(--content-bg); color:var(--text-muted); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; border-bottom:2px solid var(--border); padding:11px 14px; white-space:nowrap; }
.table tbody td { padding:11px 14px; vertical-align:middle; border-color:var(--border); }
.table-hover tbody tr:hover { background:#f0f7ff; }

/* ── Status badges ──────────────────────────────────────────── */
.badge-status { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:100px; font-size:11px; font-weight:600; }
.badge-status::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }
.status-active    { background:#d1fae5; color:#059669; }
.status-inactive  { background:#fee2e2; color:#dc2626; }
.status-pending   { background:#fef3c7; color:#d97706; }
.status-processed { background:#dbeafe; color:#2563eb; }
.status-rejected  { background:#fee2e2; color:#dc2626; }

/* ── Forms ──────────────────────────────────────────────────── */
.form-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); margin-bottom:5px; }
.form-control,.form-select { border:1.5px solid var(--border); border-radius:var(--radius-sm); font-family:var(--font); font-size:13.5px; padding:9px 13px; transition:border-color .15s,box-shadow .15s; }
.form-control:focus,.form-select:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.1); outline:none; }
.input-group-text { background:var(--content-bg); border:1.5px solid var(--border); font-size:14px; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn { font-family:var(--font); font-weight:600; font-size:13px; transition:all .15s; }
.btn-primary { background:var(--primary); border-color:var(--primary); }
.btn-primary:hover { background:#1d4ed8; border-color:#1d4ed8; box-shadow:0 4px 12px rgba(37,99,235,.3); }
.btn-warning { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-warning:hover { background:#d97706; border-color:#d97706; color:#fff; }
.btn-sm { padding:5px 13px; font-size:12px; }

/* ── Page header ────────────────────────────────────────────── */
.page-header { margin-bottom:24px; }
.page-header h1 { font-size:21px; font-weight:700; margin:0; }
.page-header p { color:var(--text-muted); font-size:13px; margin:4px 0 0; }
.alert-flash { border-radius:var(--radius-sm); font-size:13px; border:none; margin-bottom:20px; }

/* ── Login ───────────────────────────────────────────────────── */
.login-wrap { min-height:100vh; display:grid; grid-template-columns:1fr 1fr; }
.login-left { background:linear-gradient(145deg,#0f172a 0%,#1e40af 60%,#0f172a 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px; color:#fff; position:relative; overflow:hidden; }
.login-left::before { content:''; position:absolute; width:400px; height:400px; background:rgba(255,255,255,.03); border-radius:50%; top:-100px; left:-100px; }
.login-right { display:flex; align-items:center; justify-content:center; padding:48px; background:var(--content-bg); }
.login-box { width:100%; max-width:400px; }
.login-box h2 { font-size:24px; font-weight:700; margin-bottom:6px; }
.login-box p  { color:var(--text-muted); font-size:13px; margin-bottom:28px; }
@media(max-width:768px){ .login-wrap{grid-template-columns:1fr;} .login-left{display:none;} }

/* ── Install ─────────────────────────────────────────────────── */
.install-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#0f172a,#1e3a8a); }
.install-card { background:#fff; border-radius:var(--radius); padding:40px; width:100%; max-width:480px; box-shadow:0 20px 40px rgba(0,0,0,.25); }

/* ── Collection search hero ─────────────────────────────────── */
.search-hero { background:linear-gradient(135deg,var(--primary),#1e40af); border-radius:var(--radius); padding:28px; color:#fff; margin-bottom:24px; }
.search-hero h2 { font-size:18px; font-weight:700; margin:0 0 4px; }
.search-hero p  { opacity:.8; font-size:13px; margin:0 0 16px; }
.search-hero .form-control { background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.3); color:#fff; }
.search-hero .form-control::placeholder { color:rgba(255,255,255,.6); }
.search-hero .form-control:focus { background:rgba(255,255,255,.2); box-shadow:none; }

/* ── Digital Receipt ─────────────────────────────────────────── */
.receipt-wrap { max-width:780px; margin:0 auto; background:#fff; padding:40px; border-radius:var(--radius); box-shadow:var(--shadow-md); }
.receipt-header { display:flex; align-items:flex-start; justify-content:space-between; padding-bottom:20px; margin-bottom:24px; border-bottom:2.5px solid var(--primary); }
.receipt-logo { height:56px; object-fit:contain; }
.receipt-meta h2 { font-size:20px; font-weight:700; color:var(--primary); margin:0; }
.receipt-meta p  { font-size:12px; color:var(--text-muted); margin:2px 0 0; }
.field-row label { display:block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; color:var(--text-muted); margin-bottom:3px; }
.field-val { border-bottom:1.5px dotted #94a3b8; padding:5px 0; font-size:14.5px; min-height:34px; }
.amount-box { background:var(--primary); color:#fff; border-radius:var(--radius-sm); padding:18px 24px; text-align:center; margin-top:20px; }
.amount-box .alabel { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; opacity:.8; }
.amount-box .aval   { font-size:30px; font-weight:700; line-height:1.2; }
.sig-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; margin-top:36px; padding-top:16px; border-top:1px solid var(--border); }
.sig-block { text-align:center; font-size:11px; color:var(--text-muted); }
.sig-line  { border-top:1px solid #94a3b8; margin-bottom:6px; padding-top:36px; }

/* ── Import Stepper ──────────────────────────────────────────── */
.stepper { display:flex; align-items:flex-start; overflow-x:auto; padding-bottom:4px; }
.step-item { display:flex; flex-direction:column; align-items:center; flex:1; min-width:100px; position:relative; text-decoration:none; color:inherit; }
.step-item::before { content:''; position:absolute; top:21px; left:50%; right:-50%; height:2px; background:var(--border); z-index:0; }
.step-item:last-child::before { display:none; }
.step-circle { width:42px; height:42px; border-radius:50%; border:2px solid var(--border); background:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; z-index:1; position:relative; color:var(--text-muted); transition:all .2s; }
.step-item.active .step-circle { border-color:var(--primary); background:var(--primary); color:#fff; box-shadow:0 0 0 5px rgba(37,99,235,.12); }
.step-label { font-size:11px; font-weight:600; text-align:center; margin-top:7px; color:var(--text-muted); max-width:90px; line-height:1.3; }
.step-item.active .step-label { color:var(--primary); }
.step-badge { font-size:9px; background:var(--accent-lt); color:var(--accent); border-radius:100px; padding:1px 6px; font-weight:700; margin-top:3px; }
.step-item.active .step-badge { background:var(--primary-lt); color:var(--primary); }

/* Drop zone */
.drop-zone { border:2px dashed var(--border); border-radius:var(--radius); padding:36px 20px; text-align:center; cursor:pointer; transition:all .2s; background:var(--content-bg); position:relative; }
.drop-zone.over { border-color:var(--primary); background:var(--primary-lt); }
.drop-zone.has-file { border-color:var(--success); background:#f0fdf4; }
.drop-zone input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.dz-icon  { font-size:40px; color:var(--text-muted); display:block; margin-bottom:10px; }
.dz-title { font-weight:700; font-size:14px; margin-bottom:3px; }
.dz-sub   { font-size:12px; color:var(--text-muted); }
.dz-file  { display:none; font-size:13px; font-weight:600; color:var(--success); }

/* Settings - field tags & stage cards */
.field-tag { display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--border); border-radius:var(--radius-sm); padding:7px 12px; font-size:12px; margin-bottom:6px; }
.col-badge { width:22px; height:22px; background:var(--primary); color:#fff; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; flex-shrink:0; }
.stage-card { border:1.5px solid var(--border); border-radius:var(--radius); background:#fff; margin-bottom:14px; overflow:hidden; transition:box-shadow .15s; }
.stage-card:hover { box-shadow:var(--shadow-md); }
.stage-head { display:flex; align-items:center; gap:12px; padding:13px 16px; background:var(--content-bg); border-bottom:1px solid var(--border); cursor:pointer; user-select:none; }
.stage-icon-wrap { width:36px; height:36px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:16px; background:var(--primary-lt); color:var(--primary); flex-shrink:0; }
.stage-icon-wrap.custom { background:var(--accent-lt); color:var(--accent); }
.stage-body { padding:16px; }
.add-field-form { background:var(--content-bg); border-top:1px solid var(--border); padding:14px 16px; }
.field-pill { display:inline-flex; align-items:center; gap:6px; background:var(--content-bg); border:1px solid var(--border); border-radius:100px; padding:4px 10px 4px 7px; font-size:11.5px; font-weight:500; margin:3px; }
.fp-letter { width:19px; height:19px; background:var(--primary); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; flex-shrink:0; }
.fp-del { margin-left:3px; color:var(--danger); cursor:pointer; font-size:15px; line-height:1; opacity:.55; transition:opacity .15s; background:none; border:none; padding:0; }
.fp-del:hover { opacity:1; }
.chevron { transition:transform .25s; }
.stage-head.open .chevron { transform:rotate(180deg); }

/* Backup page */
.backup-hero { background:linear-gradient(135deg,#0f172a,#1e40af); border-radius:var(--radius); padding:28px 32px; color:#fff; margin-bottom:24px; }
.backup-hero h2 { font-size:20px; font-weight:700; margin:0 0 6px; }
.backup-hero p  { opacity:.75; font-size:13px; margin:4px 0 0; }
.action-card { border:2px solid var(--border); border-radius:var(--radius); background:#fff; padding:28px 22px; text-align:center; transition:all .2s; height:100%; }
.action-card:hover { border-color:var(--primary); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.action-card.email:hover { border-color:var(--accent); }
.ac-icon { width:62px; height:62px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:25px; margin:0 auto 14px; }
.ac-icon.dl { background:var(--primary-lt); color:var(--primary); }
.ac-icon.em { background:var(--accent-lt); color:var(--accent); }
.size-bar { height:4px; border-radius:2px; background:var(--primary-lt); margin-top:4px; }
.size-bar-fill { height:100%; border-radius:2px; background:var(--primary); }
.result-banner { border-radius:var(--radius-sm); padding:14px 18px; display:flex; align-items:flex-start; gap:12px; font-size:13px; margin-bottom:20px; }
.result-banner.ok  { background:#d1fae5; border-left:4px solid var(--success); }
.result-banner.err { background:#fee2e2; border-left:4px solid var(--danger); }

/* Misc */
.mono { font-family:var(--mono) !important; }
.section-div { border:none; border-top:1px solid var(--border); margin:20px 0; }
.nav-pills .nav-link { font-size:13px; font-weight:600; color:var(--text-muted); padding:7px 16px; }
.nav-pills .nav-link.active { background:var(--primary); color:#fff; }


/* ── Login extras ────────────────────────────────────────────── */
.login-left-content { position:relative; z-index:1; text-align:center; }
.login-left-content h1 { font-size:28px; font-weight:700; margin-bottom:10px; }
.login-left-content p  { opacity:.75; font-size:14px; max-width:320px; }
.login-form-wrap { width:100%; max-width:400px; }
.login-form-wrap h2 { font-size:24px; font-weight:700; margin-bottom:6px; }
.login-form-wrap p.sub { color:var(--text-muted); font-size:13px; margin-bottom:24px; }

@media print {
  .sidebar,.topbar,.no-print { display:none !important; }
  .main-wrapper { margin:0 !important; }
  .content-area { padding:0 !important; }
  .receipt-wrap { box-shadow:none !important; }
}
@media(max-width:768px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.mobile-open { transform:translateX(0); }
  .main-wrapper { margin-left:0 !important; }
}