/* ============================================================
   Sila Design System — Admin (Laravel Livewire) stylesheet.
   Tokens ported from the handoff + admin component classes.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --neutral-0:#fff;--neutral-50:#f6f8fb;--neutral-100:#edf0f6;--neutral-200:#dce1ec;--neutral-300:#c2cad9;
  --neutral-400:#98a2b6;--neutral-500:#6b7488;--neutral-600:#4c5468;--neutral-700:#353c4e;--neutral-800:#222838;--neutral-900:#141927;--neutral-950:#0b0e18;
  --brand-50:#eef1ff;--brand-100:#e0e5ff;--brand-200:#c5cdff;--brand-300:#9facff;--brand-400:#7180fb;--brand-500:#4f5ff0;--brand-600:#3343e3;--brand-700:#2632bd;--brand-800:#212b95;--brand-900:#1e2876;
  --success-50:#e7f8f1;--success-100:#c6efdf;--success-300:#6fd9b0;--success-500:#12b886;--success-600:#0e9a6f;--success-700:#0b7a58;
  --hold-50:#fdf4e1;--hold-100:#fbe8be;--hold-300:#f2c75b;--hold-500:#e0a11c;--hold-600:#bd850f;--hold-700:#95680b;
  --info-50:#e4f6fb;--info-100:#c2eaf4;--info-300:#66c9e0;--info-500:#1797c2;--info-600:#117ca3;--info-700:#0d6182;
  --progress-50:#f1ecfe;--progress-100:#e0d4fc;--progress-500:#7c4df0;--progress-600:#6431d6;--progress-700:#4f25ac;
  --danger-50:#fdecec;--danger-100:#fbd5d6;--danger-300:#f19699;--danger-500:#e5484d;--danger-600:#cb2c32;--danger-700:#a31f24;

  --surface-page:var(--neutral-50);--surface-card:var(--neutral-0);--surface-sunken:var(--neutral-100);
  --text-strong:var(--neutral-900);--text-body:var(--neutral-700);--text-muted:var(--neutral-500);--text-subtle:var(--neutral-400);
  --border-subtle:var(--neutral-200);--border-strong:var(--neutral-300);--border-focus:var(--brand-500);
  --accent:#3343e3;--accent-hover:#2632bd;--accent-soft:#eef1ff;--accent-on:#fff;

  --status-offered-fg:var(--neutral-600);--status-offered-bg:var(--neutral-100);
  --status-negotiating-fg:var(--info-700);--status-negotiating-bg:var(--info-50);
  --status-agreed-fg:var(--progress-700);--status-agreed-bg:var(--progress-50);
  --status-held-fg:var(--hold-700);--status-held-bg:var(--hold-50);
  --status-progress-fg:var(--brand-700);--status-progress-bg:var(--brand-50);
  --status-completed-fg:var(--info-700);--status-completed-bg:var(--info-50);
  --status-paid-fg:var(--success-700);--status-paid-bg:var(--success-50);
  --status-rejected-fg:var(--danger-700);--status-rejected-bg:var(--danger-50);

  --money-held:var(--hold-600);--money-available:var(--success-600);--money-out:var(--danger-600);--money-neutral:var(--neutral-800);

  --font-sans:'Plus Jakarta Sans','IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --fs-h1:30px;--fs-h2:24px;--fs-h3:20px;--fs-title:17px;--fs-body:15px;--fs-sm:13px;--fs-xs:11px;
  --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-pill:999px;--radius-card:16px;
  --shadow-xs:0 1px 2px rgba(20,25,39,.06);--shadow-sm:0 1px 3px rgba(20,25,39,.08),0 1px 2px rgba(20,25,39,.04);
  --shadow-md:0 4px 12px rgba(20,25,39,.08),0 2px 4px rgba(20,25,39,.04);--shadow-hold:0 6px 18px rgba(224,161,28,.22);
  --ring-focus:0 0 0 3px color-mix(in srgb,var(--border-focus) 40%,transparent);
  --dur-fast:120ms;--ease-standard:cubic-bezier(.2,0,0,1);
}
[data-app="admin"]{--accent:#3343e3;--accent-hover:#2632bd;--accent-soft:#eef1ff;}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:var(--font-sans);font-size:var(--fs-body);line-height:1.5;color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{margin:0;color:var(--text-strong);font-weight:700;letter-spacing:-.02em;line-height:1.15;}
a{color:var(--accent);text-decoration:none;}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
::selection{background:color-mix(in srgb,var(--accent) 24%,transparent);}
:focus-visible{outline:none;box-shadow:var(--ring-focus);}

/* ---- App shell ---- */
.app{display:flex;min-height:100vh;}
.sidebar{width:244px;flex:none;background:var(--surface-card);border-inline-end:1px solid var(--border-subtle);display:flex;flex-direction:column;padding:20px 14px;position:sticky;top:0;height:100vh;}
.brand{display:flex;align-items:center;gap:10px;padding:0 8px 22px;}
.brand .mark{width:34px;height:34px;border-radius:10px;background:var(--accent);display:flex;align-items:center;justify-content:center;}
.brand .name{font-weight:800;font-size:17px;color:var(--text-strong);letter-spacing:-.02em;line-height:1;}
.brand .sub{font-size:10px;color:var(--text-subtle);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-top:2px;}
.nav{display:flex;flex-direction:column;gap:2px;}
.nav a{display:flex;align-items:center;gap:11px;padding:10px;border-radius:10px;color:var(--text-body);font-weight:500;font-size:14px;transition:background var(--dur-fast);}
.nav a:hover{background:var(--surface-sunken);text-decoration:none;}
.nav a.active{background:var(--accent-soft);color:var(--accent);font-weight:700;}
.nav a .ico{display:inline-flex;width:19px;}
.nav a .label{flex:1;}
.nav .badge{background:var(--accent);color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:1px 7px;font-family:var(--font-mono);}
.nav .badge.danger{background:var(--danger-500);}
.sidebar .foot{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px 8px;border-top:1px solid var(--border-subtle);}
.main{flex:1;display:flex;flex-direction:column;min-width:0;}
.topbar{display:flex;align-items:center;gap:14px;padding:18px 28px;border-bottom:1px solid var(--border-subtle);background:var(--surface-card);}
.topbar h1{font-size:22px;flex:1;}
.searchbox{flex:0 0 280px;height:40px;border-radius:var(--radius-md);background:var(--surface-sunken);display:flex;align-items:center;gap:8px;padding:0 14px;color:var(--text-muted);font-size:13px;}
.content{padding:28px;display:flex;flex-direction:column;gap:22px;}

/* ---- Avatar ---- */
.avatar{width:40px;height:40px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-weight:700;border:1px solid var(--border-subtle);flex:none;position:relative;}
.avatar.sm{width:32px;height:32px;font-size:13px;}
.avatar.lg{width:56px;height:56px;font-size:20px;}
.avatar .verified{position:absolute;inset-inline-end:-2px;bottom:-2px;width:16px;height:16px;border-radius:50%;background:var(--brand-600);border:2px solid var(--surface-card);display:flex;align-items:center;justify-content:center;}

/* ---- Cards ---- */
.card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-card);padding:20px;box-shadow:var(--shadow-sm);}
.card.flush{padding:0;overflow:hidden;}
.card-head{padding:14px 18px;font-weight:700;font-size:15px;border-bottom:1px solid var(--border-subtle);}

/* ---- Stat cards ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.stat{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:16px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow-xs);}
.stat .label{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;display:flex;justify-content:space-between;align-items:center;}
.stat .value{font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;color:var(--text-strong);}
.stat .value.held{color:var(--money-held);}
.stat .value.available{color:var(--money-available);}
.stat .value.accent{color:var(--accent);}
.stat .delta{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--success-600);}

/* ---- Status badge ---- */
.badge-status{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;}
.badge-status .dot{width:7px;height:7px;border-radius:50%;}
.s-offered{background:var(--status-offered-bg);color:var(--status-offered-fg);} .s-offered .dot{background:var(--neutral-500);}
.s-negotiating{background:var(--status-negotiating-bg);color:var(--status-negotiating-fg);} .s-negotiating .dot{background:var(--info-500);}
.s-agreed{background:var(--status-agreed-bg);color:var(--status-agreed-fg);} .s-agreed .dot{background:var(--progress-500);}
.s-held{background:var(--status-held-bg);color:var(--status-held-fg);} .s-held .dot{background:var(--hold-500);}
.s-in-progress{background:var(--status-progress-bg);color:var(--status-progress-fg);} .s-in-progress .dot{background:var(--brand-500);}
.s-completed{background:var(--status-completed-bg);color:var(--status-completed-fg);} .s-completed .dot{background:var(--info-500);}
.s-paid{background:var(--status-paid-bg);color:var(--status-paid-fg);} .s-paid .dot{background:var(--success-500);}
.s-rejected,.s-refunded{background:var(--status-rejected-bg);color:var(--status-rejected-fg);} .s-rejected .dot,.s-refunded .dot{background:var(--danger-500);}
.s-disputed{background:var(--danger-50);color:var(--danger-700);} .s-disputed .dot{background:var(--danger-600);}
.s-pending{background:var(--status-held-bg);color:var(--status-held-fg);} .s-pending .dot{background:var(--hold-500);}
.s-verified{background:var(--status-paid-bg);color:var(--status-paid-fg);} .s-verified .dot{background:var(--success-500);}

/* ---- Amount ---- */
.amount{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:-.01em;color:var(--money-neutral);}
.amount.held{color:var(--money-held);} .amount.available{color:var(--money-available);} .amount.out{color:var(--money-out);}
.amount .cur{font-size:.5em;font-weight:500;color:var(--text-muted);margin-inline-start:4px;letter-spacing:.04em;}

/* ---- Tables ---- */
table.data{width:100%;border-collapse:collapse;font-size:13px;}
table.data thead tr{background:var(--surface-sunken);}
table.data th{padding:11px 14px;text-align:start;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;}
table.data td{padding:12px 14px;color:var(--text-body);vertical-align:middle;border-top:1px solid var(--border-subtle);}
table.data td.end,table.data th.end{text-align:end;}
table.data tbody tr:hover{background:var(--surface-sunken);}
.cell-name{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--text-strong);}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;font-family:var(--font-sans);font-size:14px;font-weight:600;border-radius:var(--radius-md);border:1px solid transparent;cursor:pointer;transition:background var(--dur-fast),transform var(--dur-fast),box-shadow var(--dur-fast);text-decoration:none;}
.btn:active{transform:scale(.97);}
.btn.sm{height:34px;padding:0 13px;font-size:13px;}
.btn.block{width:100%;}
.btn-primary{background:var(--accent);color:var(--accent-on);box-shadow:var(--shadow-xs);}
.btn-primary:hover{background:var(--accent-hover);}
.btn-secondary{background:var(--surface-card);color:var(--text-strong);border-color:var(--border-strong);}
.btn-secondary:hover{background:var(--surface-sunken);}
.btn-success{background:var(--success-600);color:#fff;}
.btn-success:hover{filter:brightness(.95);}
.btn-danger{background:var(--danger-600);color:#fff;}
.btn-ghost{background:transparent;color:var(--text-muted);}
.btn-ghost:hover{background:var(--surface-sunken);}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;}

/* ---- Tags ---- */
.tag{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:600;background:var(--surface-sunken);color:var(--text-body);border:1px solid var(--border-subtle);}
.tag.accent{background:var(--accent-soft);color:var(--accent);border-color:transparent;}

/* ---- Inputs ---- */
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:13px;font-weight:600;color:var(--text-body);}
.input{height:44px;padding:0 14px;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);font-family:var(--font-sans);font-size:14px;color:var(--text-strong);width:100%;}
.input:focus{outline:none;border-color:var(--border-focus);box-shadow:var(--ring-focus);}

/* ---- Confirm pills (dual confirmation) ---- */
.confirm{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--text-subtle);}
.confirm.ok{color:var(--success-600);}

/* ---- Misc ---- */
.row{display:flex;align-items:center;gap:12px;}
.between{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.muted{color:var(--text-muted);}
.subtle{color:var(--text-subtle);}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.overline{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-subtle);}
.hint{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--text-muted);}
.chart{display:flex;align-items:flex-end;gap:8px;height:140px;}
.chart .bar{flex:1;background:var(--accent-soft);border-radius:6px 6px 0 0;min-width:0;}
.chart .bar.last{background:var(--accent);}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:48px;}
.empty .ico{width:56px;height:56px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent);}
.flash{padding:12px 16px;border-radius:var(--radius-md);font-size:14px;font-weight:600;margin-bottom:4px;}
.flash.ok{background:var(--status-paid-bg);color:var(--status-paid-fg);}
.flash.err{background:var(--danger-50);color:var(--danger-700);}

/* ---- Auth ---- */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--surface-page);}
.auth-card{width:100%;max-width:400px;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-card);padding:32px;box-shadow:var(--shadow-md);}