@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  --amber:       #f59e0b;
  --amber-dim:   #b45309;
  --amber-glow:  rgba(245,158,11,0.15);
  --bg:          #0d1117;
  --surface-1:   #161b22;
  --surface-2:   #21262d;
  --surface-3:   #30363d;
  --text-1:      #e6edf3;
  --text-2:      #8b949e;
  --text-muted:  #484f58;
  --green:       #10b981;
  --green-glow:  rgba(16,185,129,0.15);
  --red:         #ef4444;
  --red-glow:    rgba(239,68,68,0.15);
  --blue:        #3b82f6;
  --header-h:    56px;
  --radius:      6px;
  --font:        'Outfit', sans-serif;
  --mono:        'JetBrains Mono', monospace;
}

*{box-sizing:border-box;margin:0;padding:0}

body.admin-body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text-1);
  min-height:100vh;
  font-size:14px;
  line-height:1.5;
}

/* ── Views ─────────────────────────────── */
.view{display:none;min-height:100vh}
.view.active{display:block}
#login-view.active{display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(245,158,11,.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(59,130,246,.05) 0%, transparent 50%),
    var(--bg);
}

/* ── Login ──────────────────────────────── */
.login-wrap{width:100%;max-width:380px;padding:1rem}

.login-logo{text-align:center;margin-bottom:2rem}
.login-logo strong{display:block;font-size:1.2rem;font-weight:800;
  letter-spacing:.15em;text-transform:uppercase;color:var(--amber)}
.login-logo small{display:block;font-size:.72rem;color:var(--text-2);
  letter-spacing:.08em;text-transform:uppercase;margin-top:3px}

.login-card{background:var(--surface-1);border:1px solid var(--surface-3);
  border-radius:10px;padding:2rem}
.login-card h1{font-size:1.15rem;font-weight:700;margin-bottom:1.5rem}

.login-back{text-align:center;margin-top:1.25rem;font-size:.8rem}
.login-back a{color:var(--text-muted);text-decoration:none}
.login-back a:hover{color:var(--text-2)}

/* ── Admin Header ───────────────────────── */
.admin-header{
  position:sticky;top:0;z-index:50;
  height:var(--header-h);
  background:rgba(13,17,23,.95);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--surface-3);
}
.admin-header-inner{
  height:100%;max-width:1400px;margin:0 auto;padding:0 1.25rem;
  display:flex;align-items:center;gap:.75rem;
}
.admin-brand{
  font-weight:800;font-size:.88rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--amber);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.header-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}

/* ── Buttons ────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
  border:none;border-radius:var(--radius);padding:.5rem 1rem;
  font:600 .82rem/1 var(--font);cursor:pointer;transition:all .15s;
  white-space:nowrap;text-decoration:none;
}
.btn:disabled{opacity:.45;cursor:not-allowed}

.btn-primary{background:var(--amber);color:#0d1117}
.btn-primary:hover:not(:disabled){background:#fbbf24;box-shadow:0 0 14px rgba(245,158,11,.4)}

.btn-ghost{background:transparent;color:var(--text-2)}
.btn-ghost:hover:not(:disabled){color:var(--text-1);background:var(--surface-2)}

.btn-outline{background:transparent;color:var(--text-1);border:1px solid var(--surface-3)}
.btn-outline:hover:not(:disabled){border-color:var(--text-2);background:var(--surface-2)}

.btn-danger{background:var(--red);color:#fff}
.btn-danger:hover:not(:disabled){background:#dc2626}

.btn-danger-outline{background:transparent;color:var(--red);border:1px solid rgba(239,68,68,.35)}
.btn-danger-outline:hover:not(:disabled){background:var(--red-glow);border-color:var(--red)}

.btn-success{background:var(--green);color:#fff}
.btn-success:hover:not(:disabled){background:#059669}

.btn-sm{padding:.32rem .6rem;font-size:.78rem}
.btn-full{width:100%;padding:.7rem;margin-top:.5rem;font-size:.9rem}

/* ── Fields ─────────────────────────────── */
.field{margin-bottom:.85rem}
.field label{
  display:block;font-size:.75rem;font-weight:600;
  color:var(--text-2);letter-spacing:.05em;text-transform:uppercase;margin-bottom:.35rem;
}
.field input,.field select,.field textarea{
  width:100%;background:var(--surface-2);border:1px solid var(--surface-3);
  border-radius:var(--radius);color:var(--text-1);font:400 .9rem/1 var(--font);
  padding:.55rem .75rem;transition:border-color .15s,box-shadow .15s;appearance:none;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--amber);box-shadow:0 0 0 2px var(--amber-glow);
}
.field input::placeholder,.field textarea::placeholder{color:var(--text-muted)}
.field textarea{resize:vertical;min-height:80px;line-height:1.5;font-family:var(--font)}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%238b949e' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .75rem center;
  padding-right:2rem;cursor:pointer;
}
.field input.readonly{color:var(--text-2);cursor:default}

.error-msg{
  background:var(--red-glow);border:1px solid rgba(239,68,68,.3);
  border-radius:var(--radius);color:#fca5a5;padding:.5rem .75rem;
  font-size:.85rem;margin-bottom:.75rem;
}

/* ── Main ───────────────────────────────── */
.admin-main{max-width:1400px;margin:0 auto;padding:1.5rem 1.25rem}
.form-main{max-width:920px}

/* ── Stats ──────────────────────────────── */
.stats-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));
  gap:.75rem;margin-bottom:1.5rem;
}
.stat-card{
  background:var(--surface-1);border:1px solid var(--surface-3);
  border-radius:8px;padding:1rem 1.2rem;position:relative;overflow:hidden;
}
.stat-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--surface-3);
}
.stat-card.amber::before{background:var(--amber)}
.stat-card.green::before{background:var(--green)}
.stat-card.blue::before{background:var(--blue)}
.stat-card.red::before{background:var(--red)}
.stat-label{
  font-size:.72rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--text-2);margin-bottom:.45rem;
}
.stat-value{font-family:var(--mono);font-size:1.55rem;font-weight:600;line-height:1}

/* ── Invoice List ───────────────────────── */
.list-header{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;margin-bottom:.85rem;flex-wrap:wrap;
}
.list-header h2{
  font-size:.9rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--text-1);
}
.search-box{position:relative}
.search-box input{
  background:var(--surface-1);border:1px solid var(--surface-3);
  border-radius:var(--radius);color:var(--text-1);font:.85rem var(--font);
  padding:.48rem .75rem .48rem 2.1rem;width:260px;transition:border-color .15s;
}
.search-box input:focus{outline:none;border-color:var(--amber)}
.search-box input::placeholder{color:var(--text-muted)}
.search-box::before{
  content:'⌕';position:absolute;left:.65rem;top:50%;transform:translateY(-50%);
  color:var(--text-muted);font-size:1.05rem;pointer-events:none;
}

.table-wrap{
  background:var(--surface-1);border:1px solid var(--surface-3);
  border-radius:8px;overflow:auto;
}
.invoice-table{width:100%;border-collapse:collapse;min-width:700px}
.invoice-table th{
  font-size:.72rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--text-2);padding:.65rem 1rem;
  text-align:left;background:var(--surface-2);
  border-bottom:1px solid var(--surface-3);white-space:nowrap;
}
.invoice-table td{
  padding:.72rem 1rem;border-bottom:1px solid rgba(48,54,61,.5);
  font-size:.87rem;color:var(--text-1);vertical-align:middle;
}
.invoice-table tr:last-child td{border-bottom:none}
.invoice-table tr:hover td{background:rgba(255,255,255,.015)}

.inv-num{font-family:var(--mono);font-size:.82rem;color:var(--amber);font-weight:600}
.plate-badge{
  display:inline-block;font-family:var(--mono);font-size:.78rem;font-weight:600;
  background:var(--surface-3);border-radius:4px;padding:.15rem .5rem;letter-spacing:.05em;
}
.amount-cell{font-family:var(--mono);font-weight:600}
.action-cell{display:flex;gap:.3rem;flex-wrap:nowrap}

/* ── Badges ─────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:.3rem;font-size:.7rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  border-radius:999px;padding:.18rem .55rem;
}
.badge::before{content:'';width:5px;height:5px;border-radius:50%;flex-shrink:0}
.badge-pending{background:rgba(245,158,11,.12);color:#fbbf24;border:1px solid rgba(245,158,11,.3)}
.badge-pending::before{background:var(--amber)}
.badge-paid{background:rgba(16,185,129,.12);color:#34d399;border:1px solid rgba(16,185,129,.3)}
.badge-paid::before{background:var(--green)}
.badge-lg{font-size:.8rem;padding:.28rem .75rem}

.empty-state{padding:3rem;text-align:center;color:var(--text-muted)}
.empty-state p{margin-bottom:1rem;font-size:.9rem}

/* ── Form Sections ──────────────────────── */
.form-section{
  background:var(--surface-1);border:1px solid var(--surface-3);
  border-radius:8px;padding:1.35rem 1.5rem;margin-bottom:.85rem;
}
.form-section h3{
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--amber);margin-bottom:1rem;padding-bottom:.5rem;
  border-bottom:1px solid var(--surface-3);
}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:0 1rem}
.field-full{grid-column:1/-1}

.subsection-label{
  font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-2);margin:.9rem 0 .5rem;display:flex;align-items:center;gap:.5rem;
}
.subsection-label::after{content:'';flex:1;height:1px;background:var(--surface-3)}

/* Dynamic rows */
.charge-row,.belonging-row{
  display:flex;gap:.4rem;align-items:center;margin-bottom:.4rem;
}
.charge-row input,.belonging-row input{
  background:var(--surface-2);border:1px solid var(--surface-3);
  border-radius:var(--radius);color:var(--text-1);font:.88rem var(--font);
  padding:.48rem .65rem;flex:1;min-width:0;transition:border-color .15s;
}
.charge-row input:focus,.belonging-row input:focus{
  outline:none;border-color:var(--amber);
}
.charge-row input::placeholder,.belonging-row input::placeholder{color:var(--text-muted)}
.charge-desc{flex:3!important}
.charge-amount{flex:1!important;font-family:var(--mono)!important;max-width:110px}
.belonging-item{flex:3!important}
.belonging-qty{flex:0 0 68px!important;font-family:var(--mono)!important}
.belonging-condition{flex:2!important}
.remove-btn{flex-shrink:0;color:var(--text-muted)!important}
.remove-btn:hover:not(:disabled){color:var(--red)!important;background:var(--red-glow)!important}

.section-note{font-size:.82rem;color:var(--text-2);margin-bottom:.7rem}
.col-headers{
  display:grid;gap:.4rem;margin-bottom:.25rem;padding:0 .2rem;
}
.col-headers span{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}

/* Totals */
.totals-box{
  background:var(--surface-2);border:1px solid var(--surface-3);
  border-radius:6px;padding:.9rem 1rem;margin-top:.85rem;
}
.total-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:.28rem 0;font-size:.88rem;color:var(--text-2);
}
.total-row-grand{
  border-top:1px solid var(--surface-3);margin-top:.28rem;padding-top:.55rem;
  font-size:1rem;font-weight:700;color:var(--text-1);
}
.total-row-grand .grand-num{
  font-family:var(--mono);color:var(--amber);font-size:1.05rem;
}
.total-amount{font-family:var(--mono);font-weight:600}
.gst-label{display:flex;align-items:center;gap:.45rem;cursor:pointer}
.gst-label input[type=checkbox]{accent-color:var(--amber);width:14px;height:14px;cursor:pointer}

/* ── Invoice Detail ─────────────────────── */
.invoice-detail-wrap{max-width:900px}

.invoice-status-bar{
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  margin-bottom:1.25rem;padding:.75rem 1rem;
  background:var(--surface-1);border:1px solid var(--surface-3);border-radius:8px;
}
.status-created{margin-left:auto;font-size:.78rem;font-family:var(--mono);color:var(--text-muted)}

.detail-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:.85rem;margin-bottom:.85rem;
}
.detail-section{
  background:var(--surface-1);border:1px solid var(--surface-3);
  border-radius:8px;padding:1.1rem 1.25rem;
}
.detail-section h3{
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--amber);margin-bottom:.8rem;
}
.detail-section.full{grid-column:1/-1}

.detail-table{width:100%;border-collapse:collapse;font-size:.87rem}
.detail-table th{
  font-size:.72rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;color:var(--text-2);text-align:left;
  padding:.35rem .4rem .35rem 0;border-bottom:1px solid var(--surface-3);
}
.detail-table td{
  padding:.4rem .4rem .4rem 0;color:var(--text-1);
  border-bottom:1px solid rgba(48,54,61,.4);vertical-align:top;
}
.detail-table tr:last-child td{border-bottom:none}
.detail-table.kv th{color:var(--text-2);font-size:.78rem;width:40%}
.detail-table a{color:var(--amber);text-decoration:none}
.detail-table a:hover{text-decoration:underline}
.detail-table tfoot td{border-bottom:none;font-weight:600;padding-top:.5rem}
.detail-table tfoot tr:first-child td{border-top:1px solid var(--surface-3)}
.detail-table .grand-row td{color:var(--amber);font-family:var(--mono)}
.notes-text{font-size:.87rem;color:var(--text-2);line-height:1.65;white-space:pre-wrap}

/* ── Modal ──────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.72);
  backdrop-filter:blur(4px);z-index:100;display:flex;
  align-items:center;justify-content:center;padding:1rem;
}
.modal-card{
  background:var(--surface-1);border:1px solid var(--surface-3);
  border-radius:10px;padding:1.75rem;max-width:380px;width:100%;
}
.modal-card h3{font-size:1rem;font-weight:700;margin-bottom:.45rem}
.modal-card p{font-size:.87rem;color:var(--text-2);margin-bottom:1.2rem}
.modal-actions{display:flex;justify-content:flex-end;gap:.5rem}

/* ── Toasts ─────────────────────────────── */
#toast-container{
  position:fixed;bottom:1.5rem;right:1.5rem;z-index:200;
  display:flex;flex-direction:column;gap:.45rem;
}
.toast{
  background:var(--surface-2);border:1px solid var(--surface-3);border-radius:6px;
  padding:.65rem 1rem;font-size:.84rem;color:var(--text-1);
  box-shadow:0 4px 20px rgba(0,0,0,.45);
  transform:translateX(130%);transition:transform .24s ease;
  max-width:300px;border-left:3px solid var(--surface-3);
}
.toast.show{transform:translateX(0)}
.toast.toast-success{border-left-color:var(--green)}
.toast.toast-error{border-left-color:var(--red)}
.toast.toast-info{border-left-color:var(--amber)}

/* ── Spinner ────────────────────────────── */
.spinner{
  width:15px;height:15px;border:2px solid var(--surface-3);
  border-top-color:var(--amber);border-radius:50%;
  animation:spin .65s linear infinite;display:inline-block;vertical-align:middle;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Claim Status Badges ────────────────── */
.badge-cs-open{background:rgba(59,130,246,.12);color:#60a5fa;border:1px solid rgba(59,130,246,.3)}
.badge-cs-open::before{background:#3b82f6}
.badge-cs-settled{background:rgba(16,185,129,.12);color:#34d399;border:1px solid rgba(16,185,129,.3)}
.badge-cs-settled::before{background:var(--green)}
.badge-cs-closed{background:rgba(107,114,128,.12);color:#9ca3af;border:1px solid rgba(107,114,128,.3)}
.badge-cs-closed::before{background:#6b7280}

/* ── Type Badge ─────────────────────────── */
.type-badge{
  display:inline-flex;align-items:center;font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;border-radius:4px;padding:.2rem .55rem;
  white-space:nowrap;
}

/* ── Claim Card Grid ────────────────────── */
.claim-card-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:.75rem;margin-bottom:1rem;
}

/* ── Section Amber Label ────────────────── */
.section-amber-label{
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--amber);margin-bottom:.5rem;
}

/* ── Statement Totals Bar ───────────────── */
.stmt-totals-bar{
  display:flex;align-items:stretch;gap:0;
  background:var(--surface-1);border:1px solid var(--surface-3);
  border-radius:8px;overflow:hidden;margin-bottom:.5rem;flex-wrap:wrap;
}
.stmt-total-item{
  display:flex;flex-direction:column;justify-content:center;
  padding:.75rem 1.25rem;border-right:1px solid var(--surface-3);flex:1;
  min-width:120px;
}
.stmt-total-item:last-child{border-right:none}
.stmt-total-grand{background:rgba(245,158,11,.05)}
.stmt-total-label{
  font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;
  color:var(--text-2);margin-bottom:.25rem;
}
.stmt-total-value{font-family:var(--font);font-size:1.05rem;font-weight:700;color:var(--text-1)}
.stmt-total-value.mono{font-family:var(--mono)}
.stmt-total-value.amber{color:var(--amber)}
.stmt-total-value.green{color:var(--green)}
.stmt-total-value.red{color:var(--red)}

/* ── Large Modal (invoice detail) ───────── */
.modal-large{
  max-width:760px;width:100%;max-height:88vh;overflow-y:auto;
}

/* ── Responsive ─────────────────────────── */
@media(max-width:640px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .search-box input{width:170px}
  .action-cell{flex-direction:column;gap:.25rem}
  .form-grid{grid-template-columns:1fr}
  .charge-row,.belonging-row{flex-wrap:wrap}
  .header-actions .btn{font-size:.78rem;padding:.38rem .65rem}
  .detail-grid{grid-template-columns:1fr}
}