/* ============================================================
   ADWISE LABS OS v3 — app.css
   Brand: Dark navy · Blue-purple gradient accent (matching logo)
   Font: Plus Jakarta Sans
   ============================================================ */

:root {
  /* Backgrounds */
  --bg:       #060810;
  --surface:  #0C0F1A;
  --card:     #111525;
  --card2:    #161B2E;
  --input-bg: #0E1220;
  --border:   rgba(255,255,255,0.06);
  --border2:  rgba(255,255,255,0.11);

  /* Text */
  --text:  #E8ECF8;
  --sub:   #8892B0;
  --muted: #454E6A;

  /* Brand — from Adwise Labs logo */
  --brand-blue:   #5B6EFF;   /* main blue from logo A */
  --brand-purple: #7B4FFF;   /* purple gradient */
  --brand-cyan:   #40D4F4;   /* cyan accent on logo */
  --brand-coral:  #FF6B4A;   /* coral dot on logo */
  --brand-grad:   linear-gradient(135deg, #5B6EFF, #9B6EFF);

  /* Status colours */
  --green:  #22C55E;
  --rose:   #F43F5E;
  --amber:  #F59E0B;
  --teal:   #06B6D4;
  --violet: #8B5CF6;
  --sky:    #38BDF8;
  --orange: #FB923C;

  /* Layout */
  --sidebar-w: 256px;
  --r:  10px;
  --r2: 14px;
  --r3: 18px;
  --shadow: 0 4px 32px rgba(0,0,0,0.5);
  --ease: cubic-bezier(0.4,0,0.2,1);

  --ff: 'Plus Jakarta Sans', sans-serif;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior: smooth; }
body { font-family: var(--ff); background: var(--bg); color: var(--text); font-size:14px; line-height:1.6; -webkit-font-smoothing:antialiased; min-height:100vh; }
a { text-decoration:none; color:inherit; }
button,input,select,textarea { font-family:var(--ff); }
img { max-width:100%; }
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:3px; }

/* ── LOGIN ──────────────────────────────────────────────────── */
.login-body { display:flex; align-items:stretch; min-height:100vh; position:relative; overflow:hidden; }
.login-bg {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 50% at 20% 80%, rgba(91,110,255,0.09) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(155,110,255,0.07) 0%, transparent 60%);
}
.orb { position:absolute; border-radius:50%; filter:blur(90px); opacity:0.14; animation:orb-drift 18s ease-in-out infinite alternate; }
.o1 { width:500px; height:500px; background:var(--brand-blue);   top:-15%; left:-10%; }
.o2 { width:400px; height:400px; background:var(--brand-purple); bottom:-10%; right:-5%; animation-delay:-6s; }
.o3 { width:260px; height:260px; background:var(--brand-cyan);   top:40%; right:28%; animation-delay:-12s; }
.grid-lines {
  position:absolute; inset:0;
  background-image: linear-gradient(rgba(91,110,255,0.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(91,110,255,0.03) 1px, transparent 1px);
  background-size: 48px 48px;
}
@keyframes orb-drift { from{transform:translate(0,0) scale(1)} to{transform:translate(20px,-16px) scale(1.08)} }

.login-wrap { display:flex; width:100%; position:relative; z-index:1; }
.login-left {
  flex:1; display:flex; align-items:center; justify-content:center; padding:60px;
  background:linear-gradient(135deg, rgba(91,110,255,0.04), rgba(155,110,255,0.04));
  border-right:1px solid var(--border);
}
.ll-inner { max-width:380px; }
.ll-logo-img { height:52px; margin-bottom:32px; filter:drop-shadow(0 0 20px rgba(91,110,255,0.3)); }
.ll-title {
  font-size:40px; font-weight:800; letter-spacing:-0.03em; line-height:1.1;
  background:var(--brand-grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  margin-bottom:8px;
}
.ll-sub { font-size:15px; color:var(--sub); margin-bottom:48px; }
.ll-stats { display:flex; align-items:center; gap:20px; }
.ls-item { text-align:center; }
.ls-n { display:block; font-size:22px; font-weight:800; color:var(--text); }
.ls-l { display:block; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; margin-top:2px; }
.ls-div { width:1px; height:36px; background:var(--border2); }

.login-right { width:440px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:60px 48px; }
.lr-card { width:100%; }
.lr-title { font-size:26px; font-weight:800; margin-bottom:6px; letter-spacing:-0.02em; }
.lr-sub   { color:var(--sub); margin-bottom:28px; }
.form-error { background:rgba(244,63,94,0.1); border:1px solid rgba(244,63,94,0.25); border-radius:var(--r); padding:10px 14px; color:#fca5a5; font-size:13px; margin-bottom:20px; }
.btn-login {
  width:100%; margin-top:8px; padding:13px;
  background:var(--brand-grad); border:none; border-radius:var(--r);
  cursor:pointer; font-size:15px; font-weight:700; color:white;
  transition:all 0.2s var(--ease);
  box-shadow:0 4px 20px rgba(91,110,255,0.35);
}
.btn-login:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(91,110,255,0.5); }
.login-hint { margin-top:20px; text-align:center; font-size:12px; color:var(--muted); }
.login-hint code { background:var(--card); padding:2px 8px; border-radius:5px; color:var(--brand-blue); }

/* ── APP LAYOUT ─────────────────────────────────────────────── */
.app-body { display:flex; min-height:100vh; }

/* ── SIDEBAR ────────────────────────────────────────────────── */
.sidebar {
  width:var(--sidebar-w); flex-shrink:0;
  background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; height:100vh;
  overflow-y:auto; z-index:100;
}
.sb-top    { flex:1; padding:20px 14px 14px; display:flex; flex-direction:column; }
.sb-bottom { padding:12px 14px 20px; border-top:1px solid var(--border); }

/* Logo in sidebar */
.sb-brand {
  display:flex; align-items:center; gap:8px;
  padding-bottom:16px; margin-bottom:16px;
  border-bottom:1px solid var(--border);
}
.sb-logo { height:32px; object-fit:contain; }
.sb-os-tag {
  font-size:10px; font-weight:800; letter-spacing:0.12em;
  color:var(--brand-blue); background:rgba(91,110,255,0.12);
  border:1px solid rgba(91,110,255,0.2); padding:2px 7px;
  border-radius:20px; flex-shrink:0;
}

/* Wallet */
.wallet-pill {
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(135deg, rgba(91,110,255,0.1), rgba(155,110,255,0.07));
  border:1px solid rgba(91,110,255,0.18); border-radius:var(--r2);
  padding:12px 14px; margin-bottom:18px;
}
.wallet-icon { color:var(--brand-blue); flex-shrink:0; }
.wallet-info { flex:1; min-width:0; }
.wallet-label { display:block; font-size:10px; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); margin-bottom:2px; }
.wallet-amt { display:block; font-size:17px; font-weight:800; line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wallet-amt.up   { color:var(--green); }
.wallet-amt.down { color:var(--rose); }

/* Nav */
.sb-nav { display:flex; flex-direction:column; gap:2px; flex:1; }
.sb-section-label { font-size:10px; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); padding:14px 8px 6px; }
.sb-link {
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:var(--r);
  color:var(--sub); font-size:13.5px; font-weight:500;
  transition:all 0.15s var(--ease); position:relative;
}
.sb-link:hover  { background:var(--card); color:var(--text); }
.sb-link.active { background:rgba(91,110,255,0.12); color:var(--brand-blue); }
.badge-count {
  margin-left:auto; background:var(--rose); color:white;
  font-size:10px; font-weight:700; min-width:18px; height:18px;
  border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 5px;
}

/* User strip */
.sb-user { display:flex; align-items:center; gap:10px; }
.u-name { display:block; font-size:13px; font-weight:700; line-height:1.2; }
.u-role { display:block; font-size:11px; color:var(--muted); text-transform:capitalize; }
.u-info { flex:1; min-width:0; }
.logout-btn { color:var(--muted); padding:6px; border-radius:var(--r); transition:all 0.15s; display:flex; }
.logout-btn:hover { background:rgba(244,63,94,0.1); color:var(--rose); }

.u-avatar { border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; color:white; flex-shrink:0; }
.u-avatar.lg { width:44px; height:44px; font-size:14px; }
.u-avatar.sm { width:28px; height:28px; font-size:10px; }
.u-avatar.xs { width:22px; height:22px; font-size:9px; }

/* ── MAIN ───────────────────────────────────────────────────── */
.main-wrap { flex:1; margin-left:var(--sidebar-w); padding:28px 32px; min-height:100vh; max-width:calc(100vw - var(--sidebar-w)); }

.page-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:24px; gap:16px; flex-wrap:wrap; }
.page-title  { font-size:24px; font-weight:800; letter-spacing:-0.02em; line-height:1.1; }
.page-desc   { color:var(--sub); font-size:13px; margin-top:3px; }
.header-actions { display:flex; gap:10px; flex-shrink:0; flex-wrap:wrap; }

/* ── KANBAN ─────────────────────────────────────────────────── */
.kanban { display:flex; gap:12px; overflow-x:auto; padding-bottom:20px; align-items:flex-start; }
.kanban::-webkit-scrollbar { height:5px; }

.k-col { min-width:252px; max-width:252px; flex-shrink:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--r3); overflow:hidden; }
.k-col-head { display:flex; align-items:center; gap:8px; padding:13px 14px 11px; border-bottom:1px solid var(--border); }
.k-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.k-col-title { flex:1; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--sub); }
.k-col-count { font-size:11px; color:var(--muted); background:var(--card2); padding:1px 7px; border-radius:20px; border:1px solid var(--border); }
.k-cards { padding:10px; display:flex; flex-direction:column; gap:8px; min-height:60px; }
.k-empty { text-align:center; color:var(--muted); font-size:12px; padding:20px 0; }

.k-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r2); padding:12px; transition:all 0.15s var(--ease); animation:card-in 0.2s ease both; }
@keyframes card-in { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:none} }
.k-card:hover { border-color:var(--border2); box-shadow:0 6px 20px rgba(0,0,0,0.35); transform:translateY(-1px); }

.kc-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; position:relative; }
.kc-type { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--sky); background:rgba(56,189,248,0.1); padding:2px 7px; border-radius:20px; }
.kc-type.internal { color:var(--violet); background:rgba(139,92,246,0.12); }
.kc-menu-wrap { position:relative; }
.kc-menu-btn { color:var(--muted); cursor:pointer; padding:2px 6px; border-radius:var(--r); border:none; background:none; font-size:16px; line-height:1; transition:all 0.15s; }
.kc-menu-btn:hover { color:var(--text); background:var(--card2); }
.kc-menu {
  display:none; flex-direction:column; gap:2px;
  position:absolute; top:calc(100% + 4px); right:0; z-index:50;
  background:var(--card2); border:1px solid var(--border2);
  border-radius:var(--r2); padding:6px; min-width:186px;
  box-shadow:0 16px 40px rgba(0,0,0,0.6);
}
.kc-menu.open { display:flex; animation:menu-in 0.12s ease; }
@keyframes menu-in { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:none} }
.kc-menu button { background:none; border:none; cursor:pointer; text-align:left; padding:8px 10px; border-radius:var(--r); font-size:12.5px; color:var(--sub); transition:all 0.12s; }
.kc-menu button:hover { background:var(--card); color:var(--text); }
.kc-menu button.danger:hover { background:rgba(244,63,94,0.1); color:var(--rose); }

.kc-client { font-size:10px; color:var(--brand-cyan); font-weight:700; text-transform:uppercase; letter-spacing:0.07em; margin-bottom:5px; }
.kc-title  { font-size:13px; font-weight:700; color:var(--text); line-height:1.4; margin-bottom:5px; }
.kc-brief  { font-size:12px; color:var(--sub); line-height:1.5; margin-bottom:10px; }
.kc-meta   { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.kc-budget { font-size:11px; font-weight:700; color:var(--green); background:rgba(34,197,94,0.1); padding:2px 8px; border-radius:20px; }
.kc-dl { display:flex; align-items:center; gap:3px; font-size:11px; color:var(--sub); }
.kc-dl.late { color:var(--rose); }
.kc-dl.requested { color:var(--muted); font-style:italic; }
.kc-foot { display:flex; align-items:center; justify-content:space-between; }
.kc-avatars { display:flex; }
.kc-av { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:800; color:white; border:2px solid var(--card); margin-right:-5px; }
.revision-tag { font-size:10px; color:var(--rose); background:rgba(244,63,94,0.1); padding:2px 7px; border-radius:20px; }

/* ── FORMS ──────────────────────────────────────────────────── */
.fg { margin-bottom:14px; }
.fl { display:block; font-size:12px; font-weight:600; color:var(--sub); margin-bottom:5px; letter-spacing:0.02em; }
.fl-note { font-weight:400; color:var(--muted); font-size:11px; }
.fl-hint { display:block; font-size:11px; color:var(--muted); margin-top:4px; }
.fi { width:100%; background:var(--input-bg); border:1px solid var(--border); border-radius:var(--r); padding:10px 12px; color:var(--text); font-size:13.5px; transition:all 0.15s; outline:none; }
.fi:focus { border-color:var(--brand-blue); box-shadow:0 0 0 3px rgba(91,110,255,0.15); }
.fi::placeholder { color:var(--muted); }
.fi-ta { min-height:88px; resize:vertical; }
.fi-ta.sm { min-height:64px; }
.fi-sel { appearance:none; cursor:pointer; }
.form-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.checklist-input-wrap { background:var(--input-bg); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
.checklist-input-wrap .fi { border:none; border-top:1px solid var(--border); border-radius:0; }
.cl-item { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; font-size:13px; color:var(--sub); border-bottom:1px solid var(--border); }
.cl-item button { background:none; border:none; cursor:pointer; color:var(--muted); font-size:15px; }
.cl-item button:hover { color:var(--rose); }

.color-picker { display:flex; gap:8px; flex-wrap:wrap; }
.color-picker label { cursor:pointer; }
.color-picker input[type=radio] { position:absolute; opacity:0; width:0; }
.cp-swatch { display:block; width:28px; height:28px; border-radius:50%; border:3px solid transparent; transition:all 0.15s; }
.color-picker input[type=radio]:checked + .cp-swatch { border-color:white; transform:scale(1.15); }

.toggle-row { display:flex; align-items:center; gap:10px; cursor:pointer; font-size:13px; color:var(--sub); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.toggle-sw { width:38px; height:21px; border-radius:11px; background:var(--card2); border:1px solid var(--border2); position:relative; transition:all 0.2s; flex-shrink:0; }
.toggle-sw::after { content:''; position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%; background:var(--muted); transition:all 0.2s; }
.toggle-row input:checked + .toggle-sw { background:rgba(34,197,94,0.18); border-color:var(--green); }
.toggle-row input:checked + .toggle-sw::after { background:var(--green); transform:translateX(17px); }

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border-radius:var(--r); font-size:13px; font-weight:600; border:none; cursor:pointer; transition:all 0.15s var(--ease); white-space:nowrap; text-decoration:none; }
.btn-primary { background:var(--brand-grad); color:white; box-shadow:0 4px 16px rgba(91,110,255,0.3); }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 6px 24px rgba(91,110,255,0.45); }
.btn-ghost { background:transparent; color:var(--sub); border:1px solid var(--border2); }
.btn-ghost:hover { background:var(--card); color:var(--text); }
.btn-danger { background:rgba(244,63,94,0.12); color:var(--rose); border:1px solid rgba(244,63,94,0.25); }
.btn-danger:hover { background:rgba(244,63,94,0.2); }
.btn-warning { background:rgba(245,158,11,0.12); color:var(--amber); border:1px solid rgba(245,158,11,0.25); }
.btn-warning:hover { background:rgba(245,158,11,0.2); }
.btn-sm  { padding:6px 13px; font-size:12px; }
.btn-xs  { padding:4px 10px; font-size:11px; border-radius:6px; }
.btn-xs.danger:hover { color:var(--rose); }

/* ── MODALS ─────────────────────────────────────────────────── */
.modal-overlay { display:none; position:fixed; inset:0; z-index:200; background:rgba(3,5,10,0.82); backdrop-filter:blur(8px); align-items:center; justify-content:center; padding:20px; }
.modal-overlay.open { display:flex; animation:fade-in 0.15s ease; }
@keyframes fade-in { from{opacity:0} to{opacity:1} }
.modal { background:var(--card); border:1px solid var(--border2); border-radius:20px; width:100%; max-width:520px; box-shadow:0 24px 80px rgba(0,0,0,0.65); animation:modal-up 0.2s var(--ease); max-height:92vh; overflow-y:auto; }
.modal.modal-sm { max-width:400px; }
.modal.modal-lg { max-width:680px; }
@keyframes modal-up { from{transform:translateY(16px);opacity:0} to{transform:none;opacity:1} }
.modal-hd { display:flex; align-items:center; justify-content:space-between; padding:20px 24px 16px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--card); z-index:1; }
.modal-hd h3 { font-size:17px; font-weight:800; }
.modal-x { background:none; border:none; cursor:pointer; color:var(--muted); font-size:18px; padding:2px 6px; border-radius:6px; transition:all 0.12s; }
.modal-x:hover { background:var(--card2); color:var(--text); }
.modal-bd { padding:20px 24px; }
.modal-ft { display:flex; gap:8px; justify-content:flex-end; padding:14px 24px 20px; border-top:1px solid var(--border); }

.info-box { background:rgba(56,189,248,0.06); border:1px solid rgba(56,189,248,0.14); border-radius:var(--r); padding:10px 14px; font-size:12.5px; color:var(--sub); margin-bottom:14px; line-height:1.5; }
.info-box.warn { background:rgba(245,158,11,0.06); border-color:rgba(245,158,11,0.18); }
.alert-warn { background:rgba(244,63,94,0.07); border:1px solid rgba(244,63,94,0.2); border-radius:var(--r); padding:10px 14px; font-size:13px; color:#fca5a5; }

/* ── DETAIL MODAL ───────────────────────────────────────────── */
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.dg-item { background:var(--card2); border-radius:var(--r); padding:10px 12px; }
.dg-l { display:block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); margin-bottom:3px; }
.detail-section { margin-top:14px; }
.detail-section h4 { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); margin-bottom:10px; }
.detail-section p { font-size:13.5px; color:var(--sub); line-height:1.6; white-space:pre-wrap; }
.rev-card { background:var(--card2); border-radius:var(--r); padding:12px; margin-bottom:8px; border-left:3px solid var(--rose); }
.rev-meta { font-size:11px; color:var(--muted); margin-bottom:8px; }
.rev-checklist { padding-left:16px; color:var(--sub); font-size:13px; line-height:1.7; }
.rev-note { font-size:12.5px; color:var(--muted); margin-top:6px; }
.rev-dl   { font-size:12px; color:var(--amber); margin-top:4px; font-weight:600; }
.rev-img  { max-width:100%; border-radius:var(--r); margin-top:8px; border:1px solid var(--border); }
.tag { font-size:11px; font-weight:600; padding:2px 8px; border-radius:20px; background:var(--card2); text-transform:capitalize; }
.tag.client   { background:rgba(56,189,248,0.1);  color:var(--sky); }
.tag.internal { background:rgba(139,92,246,0.12); color:var(--violet); }

/* ── LOADING ────────────────────────────────────────────────── */
.loading { width:32px; height:32px; border-radius:50%; border:3px solid var(--border2); border-top-color:var(--brand-blue); animation:spin 0.65s linear infinite; margin:40px auto; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ── TOAST ──────────────────────────────────────────────────── */
.toast-stack { position:fixed; bottom:24px; right:24px; z-index:300; display:flex; flex-direction:column; gap:8px; }
.toast { padding:11px 18px; border-radius:var(--r); font-size:13.5px; font-weight:600; max-width:340px; opacity:0; transform:translateX(20px); transition:all 0.25s var(--ease); pointer-events:none; }
.toast.show { opacity:1; transform:none; pointer-events:auto; }
.toast.toast-ok   { background:rgba(34,197,94,0.12);  border:1px solid rgba(34,197,94,0.3);  color:var(--green); }
.toast.toast-err  { background:rgba(244,63,94,0.12);  border:1px solid rgba(244,63,94,0.3);  color:var(--rose); }
.toast.toast-warn { background:rgba(245,158,11,0.12); border:1px solid rgba(245,158,11,0.3); color:var(--amber); }

/* ── TABLES ─────────────────────────────────────────────────── */
.table-wrap { background:var(--surface); border:1px solid var(--border); border-radius:var(--r2); overflow:auto; }
.data-table { width:100%; border-collapse:collapse; }
.data-table th { padding:11px 16px; text-align:left; font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); background:var(--card); border-bottom:1px solid var(--border); white-space:nowrap; }
.data-table td { padding:12px 16px; font-size:13px; color:var(--sub); border-bottom:1px solid var(--border); vertical-align:middle; }
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:rgba(255,255,255,0.015); }
.data-table tr.muted td { opacity:0.4; }
.tr { text-align:right; }
.tc { color:var(--muted); white-space:nowrap; }
.empty-row { text-align:center; color:var(--muted); padding:40px !important; }
.up   { color:var(--green); }
.down { color:var(--rose); }
.neutral { color:var(--sub); }
.override-note { font-size:11px; color:var(--violet); margin-left:6px; }

.type-tag { display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:600; text-transform:capitalize; white-space:nowrap; }
.type-base_salary { background:rgba(56,189,248,0.1);  color:var(--sky); }
.type-commission  { background:rgba(34,197,94,0.1);   color:var(--green); }
.type-deduction   { background:rgba(244,63,94,0.1);   color:var(--rose); }
.type-override    { background:rgba(139,92,246,0.12); color:var(--violet); }
.type-adjustment  { background:rgba(245,158,11,0.1);  color:var(--amber); }

/* ── SUMMARY ROW ────────────────────────────────────────────── */
.summary-row { display:flex; gap:12px; margin-bottom:24px; flex-wrap:wrap; }
.sum-card { flex:1; min-width:160px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r2); padding:16px 18px; transition:all 0.15s; }
.sum-card.total { border-color:rgba(91,110,255,0.25); background:rgba(91,110,255,0.04); }
.sum-card.highlighted { border-color:var(--brand-blue); }
.sum-card.sm { padding:12px 14px; flex:0 0 auto; min-width:140px; cursor:pointer; }
.sum-card.sm:hover { border-color:var(--border2); transform:translateY(-1px); }
.sum-label { display:block; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:6px; }
.sum-val   { display:block; font-size:20px; font-weight:800; }
.scroll-x  { overflow-x:auto; flex-wrap:nowrap; }

/* ── REQUESTS PAGE ──────────────────────────────────────────── */
.requests-list { display:flex; flex-direction:column; gap:14px; }
.req-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r2); padding:20px 22px; transition:all 0.15s; }
.req-card:hover { border-color:var(--border2); }
.req-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.req-badge { font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px; background:rgba(56,189,248,0.1); color:var(--sky); }
.req-badge.internal { background:rgba(139,92,246,0.12); color:var(--violet); }
.req-meta-top { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--sub); margin-left:auto; }
.req-title  { font-size:19px; font-weight:800; margin-bottom:8px; letter-spacing:-0.01em; }
.req-client { font-size:13px; color:var(--sub); margin-bottom:8px; }
.req-brief  { font-size:13.5px; color:var(--sub); line-height:1.6; margin-bottom:14px; white-space:pre-wrap; }
.req-tags   { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.req-actions { display:flex; gap:10px; }

/* ── USERS GRID ─────────────────────────────────────────────── */
.users-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
.user-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r2); padding:18px; transition:all 0.15s; }
.user-card:hover { border-color:var(--border2); }
.user-card.inactive { opacity:0.5; }
.uc-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.uc-info { flex:1; min-width:0; }
.uc-name { font-size:15px; font-weight:800; }
.uc-role { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; padding:2px 8px; border-radius:20px; display:inline-block; margin-top:3px; }
.uc-status { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--muted); white-space:nowrap; }
.uc-status.active { color:var(--green); }
.uc-salary { font-size:13px; color:var(--sub); margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--border); }
.uc-actions { display:flex; gap:8px; }

.role-admin    { background:rgba(91,110,255,0.12);  color:var(--brand-blue); }
.role-pm       { background:rgba(244,63,94,0.12);   color:var(--rose); }
.role-sales    { background:rgba(6,182,212,0.12);   color:var(--teal); }
.role-designer { background:rgba(139,92,246,0.12);  color:var(--violet); }
.role-developer{ background:rgba(251,146,60,0.12);  color:var(--orange); }
.role-other    { background:rgba(139,145,168,0.1);  color:var(--sub); }

.status-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; display:inline-block; }
.status-dot.active   { background:var(--green); box-shadow:0 0 6px var(--green); }
.status-dot.inactive { background:var(--muted); }

/* ── REPORTS ────────────────────────────────────────────────── */
.kpi-row { display:flex; gap:12px; margin-bottom:24px; flex-wrap:wrap; }
.kpi-card { flex:1; min-width:140px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r2); padding:18px; display:flex; flex-direction:column; gap:4px; }
.kpi-icon { width:36px; height:36px; border-radius:var(--r); display:flex; align-items:center; justify-content:center; margin-bottom:8px; }
.kpi-val   { font-size:28px; font-weight:800; line-height:1; }
.kpi-label { font-size:12px; color:var(--muted); }

.report-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
.report-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r2); padding:20px; }
.report-card.wide { grid-column:1 / -1; }
.rc-title { font-size:14px; font-weight:800; margin-bottom:16px; }

.fin-rows { display:flex; flex-direction:column; }
.fin-row { display:flex; justify-content:space-between; align-items:center; padding:11px 0; border-bottom:1px solid var(--border); font-size:13.5px; }
.fin-row:last-child { border:none; }
.fin-row.total-row { font-weight:800; margin-top:4px; }

.donut-wrap { position:relative; width:120px; height:120px; margin:0 auto 16px; }
.donut { width:100%; height:100%; transform:rotate(-90deg); }
.donut-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.donut-pct   { font-size:24px; font-weight:800; color:var(--text); }
.donut-label { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; }
.perf-row { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--sub); margin-bottom:6px; }
.dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

.earner-list { display:flex; flex-direction:column; gap:10px; }
.earner-row  { display:flex; align-items:center; gap:10px; }
.earner-rank { font-size:11px; color:var(--muted); width:18px; text-align:center; flex-shrink:0; }
.earner-name { flex:1; font-size:13px; }
.earner-amt  { font-weight:800; font-size:13px; white-space:nowrap; }

.bar-chart { display:flex; align-items:flex-end; gap:10px; height:140px; padding-top:8px; }
.bar-group { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; }
.bar-wrap  { flex:1; width:100%; display:flex; align-items:flex-end; }
.bar-fill  { width:100%; background:var(--brand-grad); border-radius:6px 6px 0 0; position:relative; min-height:4px; transition:height 0.5s var(--ease); }
.bar-val   { position:absolute; top:-18px; left:50%; transform:translateX(-50%); font-size:11px; color:var(--sub); white-space:nowrap; }
.bar-label { font-size:11px; color:var(--muted); }

/* ── MISC ───────────────────────────────────────────────────── */
.flash { background:rgba(34,197,94,0.08); border:1px solid rgba(34,197,94,0.2); border-radius:var(--r); padding:11px 16px; color:var(--green); font-size:13px; margin-bottom:20px; transition:opacity 0.5s; }
.empty-state { text-align:center; padding:80px 20px; }
.es-icon { font-size:48px; margin-bottom:16px; }
.empty-state h3 { font-size:22px; font-weight:800; margin-bottom:8px; }
.empty-state p  { color:var(--muted); font-size:14px; }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width:960px) {
  .sidebar { transform:translateX(-100%); transition:transform 0.25s var(--ease); }
  .sidebar.open { transform:none; box-shadow:4px 0 40px rgba(0,0,0,0.6); }
  .main-wrap { margin-left:0; padding:20px 16px; max-width:100vw; }
  .login-left { display:none; }
  .login-right { width:100%; padding:40px 24px; }
  .form-row-2 { grid-template-columns:1fr; }
  .detail-grid { grid-template-columns:1fr; }
}