/* Crewly — Dark SaaS Design System */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800;900&display=swap');

:root {
  --bg: #050505;
  --sidebar-bg: #030303;
  --surface: #111827;
  --surface-hover: #1a2233;
  --border: #1F2937;
  --border-hover: #374151;
  --primary: #00D632;
  --primary-hover: #00B82C;
  --accent: #2563EB;
  --danger: #F87171;
  --danger-hover: #1F1F2E;
  --warning: #D29922;
  --success: #3FB950;
  --text: #F1F5F9;
  --text-secondary: #D1D5DB;
  --text-muted: #94A3B8;
  --text-dim: #64748B;
  --text-faint: #4B5563;
  --radius: 10px;
  --radius-sm: 7px;
  --radius-full: 999px;
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --transition: 300ms cubic-bezier(.16,1,.3,1);
}

/* ── Light theme override ── */
html.light,
body.light {
  --bg: #F8F9FA;
  --sidebar-bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-hover: #F9FAFB;
  --border: #E5E7EB;
  --border-hover: #D1D5DB;
  --danger-hover: #FEF2F2;
  --text: #111827;
  --text-secondary: #374151;
  --text-muted: #6B7280;
  --text-dim: #9CA3AF;
  --text-faint: #9CA3AF;
}
body.light .sidebar { border-right-color: #E5E7EB; }
body.light .nav-item.active { background: #F0FFF4; color: #111827; }
body.light .nav-item:hover { color: #111827; }
body.light .topbar h1 { color: #2563EB; }
body.light h1 { color: #2563EB; }
body.light .brand-name { color: #111827; }
body.light .brand-initials { background: #DCFCE7; color: #166534; }
body.light tr:hover td { background: #F9FAFB; }
body.light .popup.success { background: #fff; color: var(--success); }
body.light .popup.error { background: #fff; color: var(--danger); }
body.light ::-webkit-scrollbar-thumb { background: #D1D5DB; }

*, *::before, *::after { box-sizing: border-box; margin: 0; }
html, body { border: none; outline: none; box-shadow: none; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1F2937; border-radius: 3px; }
*:focus { outline: none; }
*:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

body {
  font-family: var(--font); font-size: 13px; line-height: 1.5;
  background: var(--bg); color: var(--text);
  -webkit-font-smoothing: antialiased;
  opacity: 1;
}
body::before { display: none; }
.hidden { display: none !important; }
h1,h2,h3,h4 { font-family: var(--font-heading); font-weight: 700; }

@keyframes slideIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }

/* ── Layout ── */
.app,.app-wrapper { display:grid; grid-template-columns:220px 1fr; min-height:100vh; }

/* ── Sidebar ── */
.sidebar {
  background: var(--sidebar-bg); border-right: 1px solid #1E293B;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
  overflow-y: auto; overflow-x: hidden; padding: 0;
}

.brand { display:flex; align-items:center; gap:10px; padding:20px 16px 16px; }
.brand-logo { width:32px; height:32px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.brand-initials {
  width:32px; height:32px; border-radius:8px; flex-shrink:0;
  background:var(--primary); color:#000;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:13px;
}
.brand-info { min-width:0; }
.brand-name { font-size:14px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand-sub { display:none; }
.sidebar-divider { height:1px; background:var(--border); margin:0 16px; }

.global-search-wrap { position:relative; padding:8px 12px; flex-shrink:0; }
.global-search-input {
  width:100%; padding:7px 10px 7px 30px; font-size:12px;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--text); outline:none;
  transition: border-color var(--transition);
}
.global-search-input:focus { border-color:var(--primary); }
.global-search-input::placeholder { color:#9CA3AF; }
.global-search-icon { position:absolute; left:22px; top:50%; transform:translateY(-50%); color:#9CA3AF; font-size:11px; pointer-events:none; }

.nav { display:flex; flex-direction:column; gap:0; flex:1; overflow-y:auto; padding:8px 8px; }
.nav-item {
  display:flex; align-items:center; gap:8px; width:100%;
  text-decoration:none; border:none; text-align:left;
  background:transparent; color:var(--text-muted);
  padding:7px 12px; border-radius:var(--radius-sm);
  cursor:pointer; font-size:13px; font-family:var(--font);
  transition: color var(--transition);
  border-left:2px solid transparent;
}
.nav-icon { font-size:13px; width:16px; text-align:center; flex-shrink:0; opacity:.6; }
.nav-label { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav-item:hover { color:#E2E8F0; }
.nav-item.active { color:#fff; border-left-color:var(--primary); }
.nav-button { font:inherit; }
.settings-btn,.logout-btn,.danger-link { color:var(--text-dim) !important; font-size:12px; }
.logout-btn:hover,.danger-link:hover { color:var(--danger) !important; }

.sidebar-footer { margin-top:auto; padding:8px 8px 12px; border-top:1px solid var(--border); }
.sidebar-user { padding:6px 8px; }
.sidebar-user-email { font-size:11px; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:2px; }
.sidebar-role-badge { display:inline-block; padding:1px 6px; border-radius:var(--radius-full); font-size:9px; font-weight:600; }
.sidebar-credit { padding:4px 8px 0; }
.sidebar-credit-main { font-size:9px; color:var(--text-faint); }
.sidebar-credit-main strong { color:var(--text-dim); }
.sidebar-credit-support { display:none; }

/* ── Main ── */
.main { padding:32px 32px 32px 32px; display:flex; flex-direction:column; gap:24px; min-height:100vh; }
.topbar { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.topbar h1 { margin:0 0 2px; font-size:22px; font-weight:600; color:var(--text); }
.small { font-size:12px; }
.muted { color:var(--text-dim); font-size:13px; }
.centered { text-align:center; }

/* ── Status ── */
.status-group { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.status-pill,.status-badge { padding:3px 8px; border-radius:var(--radius-full); font-weight:600; font-size:10px; text-transform:uppercase; letter-spacing:.03em; }
.status-Draft { background:rgba(75,85,99,.2); color:#9CA3AF; }
.status-Sent { background:rgba(37,99,235,.15); color:#60A5FA; }
.status-Approved { background:rgba(63,185,80,.15); color:#4ADE80; }
.status-Completed { background:rgba(241,245,249,.08); color:#F1F5F9; }
.status-Cancelled { background:rgba(248,113,113,.15); color:#F87171; }

/* ── Cards ── */
.panel {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:24px;
}
.section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.section-head h2 { margin:0; font-size:15px; font-weight:600; color:var(--text); }
.between { justify-content:space-between; }

/* ── Forms ── */
.form-grid { display:grid; gap:12px; }
.two-col { grid-template-columns:repeat(2,minmax(0,1fr)); }
.compact-grid { gap:8px; }
.span2 { grid-column:span 2; }
label span { display:block; font-size:11px; font-weight:500; margin-bottom:4px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; }
input,select,textarea {
  width:100%; padding:8px 12px; font-size:13px; font-family:var(--font);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--text); outline:none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
input:focus,select:focus,textarea:focus {
  border-color:var(--primary);
  box-shadow: 0 0 0 2px rgba(0,214,50,.15);
}
input::placeholder,textarea::placeholder { color:var(--text-faint); }
textarea { resize:vertical; }

/* ── Buttons ── */
.primary-btn,.secondary-btn,.primary-big-btn,.small-btn {
  border:none; border-radius:var(--radius-sm); padding:7px 14px; cursor:pointer;
  font-weight:600; font-family:var(--font); font-size:12px;
  transition: background var(--transition), box-shadow var(--transition);
  display:inline-flex; align-items:center; gap:5px;
}
.primary-btn,.primary-big-btn {
  background:var(--primary); color:#000;
  box-shadow: 0 0 20px rgba(0,214,50,.2);
}
.primary-btn:hover,.primary-big-btn:hover {
  background:var(--primary-hover);
  box-shadow: 0 0 20px rgba(0,214,50,.35);
}
.secondary-btn,.small-btn { background:transparent; color:var(--text-muted); border:1px solid var(--border); }
.secondary-btn:hover,.small-btn:hover { border-color:var(--border-hover); color:#E2E8F0; }
.primary-big-btn { padding:10px 22px; font-size:13px; }
.wide { width:100%; justify-content:center; }
.search-input { min-width:220px; }

/* ── Tables ── */
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; }
th,td { padding:10px 14px; text-align:left; vertical-align:top; border-bottom:1px solid var(--border); }
th { font-size:11px; font-weight:500; color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em; background:transparent; }
td { font-size:13px; color:#D1D5DB; }
tr:hover td { background:var(--surface); }
td input { min-width:100px; }
.danger-mini { background:transparent; color:var(--text-muted); border:1px solid var(--border); border-radius:var(--radius-sm); padding:5px 10px; cursor:pointer; font-size:11px; transition:all var(--transition); }
.danger-mini:hover { border-color:var(--danger); color:var(--danger); background:var(--danger-hover); }

/* ── Totals ── */
.totals-panel { display:grid; grid-template-columns:1fr 260px; gap:16px; align-items:start; }
.totals-grid { display:grid; gap:4px; }
.total-line { display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--border); color:var(--text-muted); font-size:13px; }
.grand-total { font-size:22px; color:var(--primary); font-weight:700; }
.discount-inline { display:flex; align-items:flex-start; }

/* ── Images ── */
.extras-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.image-preview { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.image-thumb { position:relative; width:80px; height:80px; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--border); background:var(--surface); }
.image-thumb img { width:100%; height:100%; object-fit:cover; }
.thumb-remove { position:absolute; top:3px; right:3px; background:rgba(0,0,0,.8); color:#fff; border:none; border-radius:var(--radius-full); width:18px; height:18px; cursor:pointer; font-size:10px; display:flex; align-items:center; justify-content:center; transition:background var(--transition); }
.thumb-remove:hover { background:var(--danger); }
.footer-panel textarea { background:var(--surface); }
.actions { display:flex; gap:6px; flex-wrap:wrap; }
.sticky-actions { position:sticky; bottom:14px; z-index:4; }

/* ── Modals ── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; padding:20px; z-index:1000; }
.modal-overlay.open,.modal-overlay.force-open { display:flex; }
.modal {
  width:min(800px,100%); max-height:88vh; overflow:auto;
  background:var(--surface); color:var(--text);
  border:1px solid var(--border); border-radius:var(--radius);
  padding:24px; position:relative;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.modal-light { background:var(--surface); }
.modal h2 { margin-top:0; font-size:17px; font-weight:600; }
.modal p { color:var(--text-dim); font-size:13px; }
.modal-light p { color:var(--text-dim); }
.modal-close { position:absolute; top:14px; right:14px; border:none; background:transparent; color:var(--text-faint); font-size:18px; cursor:pointer; transition:color var(--transition); border-radius:var(--radius-sm); width:26px; height:26px; display:flex; align-items:center; justify-content:center; }
.modal-close:hover { color:var(--text); }

.service-type-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; }
.service-type-card {
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:14px; text-align:left; cursor:pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
  position: relative;
}
.service-type-card:hover {
  border-color:var(--primary);
  box-shadow: 0 0 12px rgba(0,214,50,.15);
}
.service-type-card .title { display:block; font-weight:600; font-size:13px; }
.service-type-card .subtitle { display:block; font-size:11px; margin-top:3px; color:var(--text-dim); }
.stack-gap { display:flex; flex-direction:column; gap:8px; }
.modal-actions { display:flex; justify-content:space-between; gap:8px; margin-top:14px; }
.login-card { max-width:440px; background:var(--surface); border:1px solid var(--border); }

/* ── Toast ── */
.popup { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); padding:8px 16px; border-radius:var(--radius-sm); font-weight:500; font-size:12px; opacity:0; transition:opacity .2s; z-index:2000; border:1px solid var(--border); }
.popup.show { opacity:1; }
.popup.success { background:var(--sidebar-bg); border-color:var(--success); color:var(--success); }
.popup.error { background:var(--sidebar-bg); border-color:var(--danger); color:var(--danger); }

/* ── Settings ── */
.settings-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:16px; }
.settings-column { display:flex; flex-direction:column; gap:8px; }
.mini-actions { display:flex; gap:6px; flex-wrap:wrap; }
.service-editor-panel,.service-definition-list { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px; }
.service-definition-list { max-height:280px; overflow:auto; }
.service-definition-item { padding:7px 0; border-bottom:1px solid var(--border); font-size:13px; }
.service-definition-item:last-child { border-bottom:none; }
.settings-tabs { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:18px; }
.settings-tab { background:none; border:none; padding:8px 14px; font:inherit; font-size:12px; font-weight:500; color:var(--text-dim); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color var(--transition); }
.settings-tab:hover { color:var(--text); }
.settings-tab.active { color:#fff; border-bottom-color:var(--primary); }
.settings-tab.danger-tab { color:var(--danger); }
.settings-tab.danger-tab.active { border-bottom-color:var(--danger); }
.settings-tab-panel { animation:fadeIn .15s ease-out; }

/* ── Quotes ── */
.quote-header-panel { padding:18px 24px; }
.quote-meta-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; align-items:end; }
.quote-number { font-size:22px; font-weight:700; color:var(--primary); }
.quote-date { font-size:15px; font-weight:600; }
.quote-card-list { display:grid; gap:6px; }
.quote-card {
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px;
  background:var(--surface);
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.quote-card:hover {
  background:var(--surface-hover);
  border-color: rgba(0,214,50,.4);
  box-shadow: 0 0 16px rgba(0,214,50,.1);
}
.quote-card-top { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.quote-card-number { font-size:14px; font-weight:700; color:var(--primary); }
.quote-card-client { font-size:13px; font-weight:600; }
.quote-card-total { margin-top:3px; font-size:15px; font-weight:700; }
.quote-card-actions { display:flex; gap:5px; margin-top:8px; }
.right-align { text-align:right; }
.empty-state { text-align:center; padding:48px 20px; color:#6B7280; font-size:14px; }

.suggested-option {
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px;
  background:var(--surface);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.suggested-option:hover {
  border-color: rgba(0,214,50,.4);
  box-shadow: 0 0 12px rgba(0,214,50,.1);
}
.suggested-option-header { display:flex; gap:6px; align-items:center; margin-bottom:6px; }
.suggested-option-title { font-weight:600; font-size:13px; }
.suggested-total-line { margin-top:6px; font-weight:600; color:var(--primary); font-size:13px; }
.detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:14px; }
.detail-block {
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px;
  background:var(--surface);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.detail-block:hover {
  border-color: rgba(0,214,50,.3);
  box-shadow: 0 0 12px rgba(0,214,50,.08);
}
.detail-block h3 { margin:0 0 6px; font-size:11px; font-weight:500; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; }
.footer-pre { white-space:pre-wrap; font-family:inherit; background:var(--bg); padding:10px; border-radius:var(--radius-sm); color:var(--text-muted); border:1px solid var(--border); font-size:12px; }
.suggested-print-block { padding:6px 0; border-bottom:1px solid var(--border); }
.expiry-badge { display:inline-block; font-size:9px; font-weight:600; padding:2px 6px; border-radius:var(--radius-full); letter-spacing:.02em; vertical-align:middle; }
.expiry-badge-expired { background:rgba(248,113,113,.12); color:#F87171; }
.expiry-badge-warning { background:rgba(210,153,34,.12); color:#D29922; }
.expiry-badge-ok { background:rgba(63,185,80,.12); color:#3FB950; }
.quote-card-expired { border-left:2px solid var(--danger) !important; }
.quote-card-expired .quote-card-number { color:var(--danger); }

/* ── Dropdowns ── */
.status-dropdown-wrap { position:relative; display:inline-block; }
.status-toggle-btn { cursor:pointer; border:none; font:inherit; font-size:10px; font-weight:600; letter-spacing:.03em; padding:3px 7px; border-radius:var(--radius-full); text-transform:uppercase; user-select:none; }
.status-dropdown-menu { position:absolute; right:0; top:calc(100%+4px); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); z-index:500; min-width:140px; overflow:hidden; }
.status-dropdown-menu.hidden { display:none; }
.sdrop-item { display:block; width:100%; border:none; background:none; padding:7px 12px; text-align:left; font-size:12px; font-weight:500; cursor:pointer; color:var(--text-muted); transition:background var(--transition); }
.sdrop-item:hover { background:var(--surface-hover); }
.sdrop-Draft{color:#9CA3AF} .sdrop-Sent{color:#60A5FA} .sdrop-Approved{color:#4ADE80} .sdrop-Completed{color:var(--text)} .sdrop-Cancelled{color:#F87171}
.cancel-reason-display { margin:3px 0 5px; font-size:11px; color:#F87171; font-weight:500; display:flex; align-items:center; gap:3px; }
.alc-item:last-child { border-bottom:none !important; }

/* ── Mobile ── */
.hamburger { display:none; background:none; border:none; cursor:pointer; padding:6px; flex-direction:column; gap:4px; }
.hamburger span { display:block; width:16px; height:1.5px; background:var(--text-muted); border-radius:1px; }
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:99; }
@media(max-width:768px) {
  .app { grid-template-columns:1fr !important; }
  .sidebar { position:fixed; left:-240px; top:0; height:100vh; z-index:100; transition:left .2s ease; width:220px !important; }
  .sidebar.open { left:0; }
  .sidebar-overlay.open { display:block; }
  .hamburger { display:flex; }
  .topbar h1 { font-size:18px !important; }
  .main { padding:16px !important; }
}

/* ── Search results ── */
.global-search-results { position:absolute; top:calc(100% + 4px); left:0; right:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); z-index:200; max-height:300px; overflow-y:auto; display:none; }
.global-search-results.open { display:block; }
.gsr-section { padding:4px 0; }
.gsr-label { font-size:9px; font-weight:600; color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em; padding:3px 10px; }
.gsr-item { padding:5px 10px; cursor:pointer; display:flex; align-items:center; gap:6px; font-size:12px; transition:background var(--transition); }
.gsr-item:hover { background:var(--surface-hover); }
.gsr-num { font-size:11px; font-weight:700; color:var(--primary); min-width:32px; }
.gsr-name { font-weight:500; flex:1; }
.gsr-sub { font-size:10px; color:var(--text-dim); }

/* ── Notifications ── */
.notif-btn { position:relative; background:none; border:none; cursor:pointer; color:var(--text-dim); font-size:14px; padding:4px; border-radius:var(--radius-sm); transition:color var(--transition); }
.notif-btn:hover { color:var(--text); }
.notif-badge { position:absolute; top:0; right:0; background:var(--primary); color:#000; font-size:8px; font-weight:800; min-width:12px; height:12px; border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center; padding:0 2px; }
.notif-panel { position:absolute; top:calc(100%+6px); right:0; width:300px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); z-index:200; display:none; overflow:hidden; }
.notif-panel.open { display:block; }
.notif-header { padding:10px 12px; font-size:11px; font-weight:600; border-bottom:1px solid var(--border); }
.notif-item { padding:8px 12px; border-bottom:1px solid var(--border); cursor:pointer; display:flex; gap:6px; transition:background var(--transition); }
.notif-item:hover { background:var(--surface-hover); }
.notif-icon { font-size:14px; flex-shrink:0; }
.notif-body { flex:1; }
.notif-title { font-size:11px; font-weight:600; margin-bottom:1px; }
.notif-desc { font-size:10px; color:var(--text-dim); }
.notif-empty { padding:16px; text-align:center; color:var(--text-faint); font-size:11px; }
.notif-wrap { position:relative; }
.topbar-right { display:flex; align-items:center; gap:6px; }

/* ── Print ── */
@media print {
  .sidebar,.topbar,.status-group,.sticky-actions,.nav,.popup,.login-card,.modal-overlay { display:none !important; }
  body { background:#fff; color:#000; }
  .app { display:block; }
  .main { padding:0; }
  .panel,.detail-block,.quote-card,.suggested-option { border:1px solid #ddd; background:#fff; color:#000; break-inside:avoid; }
}

/* ── Responsive ── */
@media(max-width:980px) {
  .app { grid-template-columns:1fr; }
  .sidebar { position:relative; height:auto; }
  .quote-meta-grid,.totals-panel,.extras-grid,.settings-grid,.detail-grid,.two-col { grid-template-columns:1fr; }
  .span2 { grid-column:span 1; }
  .topbar { flex-direction:column; }
  .search-input { min-width:0; width:100%; }
}

/* ── NEW NAV STRUCTURE ── */
.sidebar-inner { display:flex; flex-direction:column; height:100%; }
.sidebar-top { flex:1; overflow-y:auto; padding:4px 0 8px; }
.sidebar-brand { display:flex; align-items:center; gap:9px; padding:4px 14px 10px; text-decoration:none; border-bottom:1px solid var(--border); flex-shrink:0; }
.sidebar-brand:hover { opacity:.85; }
.nav-home-item { display:flex; align-items:center; gap:8px; padding:7px 14px; font-size:13px; font-weight:700; color:var(--text-dim); text-decoration:none; margin-bottom:2px; }
.nav-home-item:hover { background:var(--surface); color:var(--text); }
.nav-home-item.active { background:var(--surface); color:var(--text); }
.nav-home-bar { width:3px; height:16px; border-radius:99px; background:transparent; flex-shrink:0; }
.nav-home-item.active .nav-home-bar { background:var(--primary); }
.nav-divider { height:1px; background:var(--border); margin:4px 14px 8px; }
.nav-section { margin-bottom:8px; }
.nav-section-label { font-size:10px; font-weight:600; color:var(--text-dim); padding:0 14px 3px; letter-spacing:.04em; }
.nav-sub-item { display:flex; align-items:center; gap:8px; padding:5px 14px; font-size:12px; font-weight:400; color:var(--text-dim); text-decoration:none; }
.nav-sub-item:hover { background:var(--surface); color:var(--text); }
.nav-sub-item.active { color:var(--text); font-weight:600; background:var(--surface); }
.nav-sub-bar { width:3px; height:13px; border-radius:99px; background:transparent; flex-shrink:0; }
.nav-sub-item.active .nav-sub-bar { background:var(--primary); }
.crewly-topbar { display:flex; align-items:center; justify-content:space-between; padding:0 20px; height:52px; background:var(--surface); border-bottom:1px solid var(--border); flex-shrink:0; gap:12px; }
.crewly-topbar-left { display:flex; align-items:center; gap:10px; }
.crewly-topbar-right { display:flex; align-items:center; gap:8px; margin-left:auto; }
.topbar-logo-btn { display:flex; align-items:center; gap:8px; text-decoration:none; padding:4px 8px; border-radius:8px; }
.topbar-logo-btn:hover { background:var(--surface-hover); }
.topbar-logo-mark { width:28px; height:28px; border-radius:8px; background:#111827; color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.topbar-brand-name { font-size:13px; font-weight:700; color:var(--text); white-space:nowrap; }
.topbar-new-quote-btn { display:flex; align-items:center; gap:6px; padding:0 18px; height:36px; background:#111827; color:#fff; border:none; border-radius:8px; font-size:13px; font-weight:700; cursor:pointer; text-decoration:none; white-space:nowrap; font-family:inherit; transition:background-color .15s; }
.topbar-new-quote-btn:hover { background:#00D632; color:#000; }
.topbar-settings-btn { width:36px; height:36px; border-radius:8px; border:1.5px solid var(--border); background:var(--surface); color:var(--text-dim); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:15px; flex-shrink:0; transition:border-color .15s,color .15s; }
.topbar-settings-btn:hover { border-color:var(--text-dim); color:var(--text); }
@media(max-width:1024px) { .topbar-brand-name{display:none} .sidebar{width:180px!important} }
@media(max-width:640px) { .sidebar{width:44px!important;overflow:hidden} .sidebar-brand{padding:6px 8px;justify-content:center} .sidebar-brand .brand-info{display:none} .nav-home-item{padding:8px;justify-content:center} .nav-section-label{display:none} .nav-sub-item{padding:8px;justify-content:center} .global-search-wrap{display:none} .topbar-brand-name{display:none} .topbar-btn-text{display:none} .topbar-new-quote-btn{padding:0 12px;min-width:36px} .crewly-topbar{padding:0 10px} }

/* ── REVENUE GAUGE v5 ── */
.g5-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:28px 24px 20px; margin-bottom:12px; max-width:600px; margin-left:auto; margin-right:auto; position:relative; overflow:hidden; }
.g5-card::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:70%; height:1px; background:linear-gradient(90deg, transparent, rgba(0,214,50,.3), transparent); }
.g5-card--enter { opacity:0; transform:translateY(12px); }
.g5-card:not(.g5-card--enter) { animation:g5FadeUp .5s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes g5FadeUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

.g5-gauge-wrap { position:relative; width:280px; height:170px; margin:0 auto 4px; }
.g5-svg { width:100%; height:100%; overflow:visible; }
.g5-arc { stroke-dashoffset:377; transition:stroke-dashoffset 1.6s cubic-bezier(.16,1,.3,1); }
.g5-scale-label { font-size:9px; fill:var(--text-dim); font-family:var(--font-body, Inter, sans-serif); font-weight:500; }
.g5-target-label { font-size:8px; fill:var(--primary); font-family:var(--font-body, Inter, sans-serif); font-weight:700; }

/* Glow dot pulse */
.g5-dot { animation:g5Pulse 2.4s ease-in-out infinite; }
@keyframes g5Pulse { 0%,100%{opacity:1} 50%{opacity:.55} }
.g5-dot-inner { opacity:.9; }

/* Center text overlay */
.g5-center { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); text-align:center; pointer-events:none; }
.g5-pct { font-family:var(--font-heading, 'Plus Jakarta Sans', sans-serif); font-size:32px; font-weight:800; letter-spacing:-.03em; line-height:1; color:var(--text); }
.g5-closed { font-size:13px; font-weight:600; color:var(--text-muted); margin-top:3px; }
.g5-target-text { font-size:10px; color:var(--text-dim); margin-top:1px; }

/* Badge */
.g5-badge { display:flex; align-items:center; gap:6px; justify-content:center; padding:5px 14px; border-radius:99px; font-size:11px; font-weight:600; margin:8px auto 0; width:fit-content; backdrop-filter:blur(8px); }
.g5-badge-icon { font-size:13px; }
.g5-badge--green { background:rgba(0,214,50,.1); color:#34D399; border:1px solid rgba(0,214,50,.15); }
.g5-badge--amber { background:rgba(245,158,11,.1); color:#FBBF24; border:1px solid rgba(245,158,11,.15); }
.g5-badge--red { background:rgba(239,68,68,.1); color:#F87171; border:1px solid rgba(239,68,68,.15); }
:root:not(.dark) .g5-badge--green { background:rgba(0,180,44,.08); color:#059669; border-color:rgba(0,180,44,.2); }
:root:not(.dark) .g5-badge--amber { background:rgba(245,158,11,.08); color:#92400E; border-color:rgba(245,158,11,.2); }
:root:not(.dark) .g5-badge--red { background:rgba(239,68,68,.08); color:#991B1B; border-color:rgba(239,68,68,.2); }

/* Period cards */
.g5-periods { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:16px; }
.g5-period { background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:12px; position:relative; overflow:hidden; transition:border-color .2s, transform .2s; }
.g5-period:hover { border-color:var(--border-hover, var(--border)); transform:translateY(-1px); }
.g5-period-label { font-size:9px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em; font-weight:700; margin-bottom:4px; }
.g5-period-val { font-size:17px; font-weight:800; letter-spacing:-.4px; color:var(--text); font-family:var(--font-heading, sans-serif); }
.g5-period-tgt { font-size:10px; color:var(--text-dim); margin-top:2px; }
.g5-period-bar { height:3px; background:var(--border); border-radius:99px; margin-top:8px; overflow:hidden; }
.g5-period-fill { height:100%; border-radius:99px; width:0; background:var(--fill-c); transition:width 1s cubic-bezier(.16,1,.3,1); }
.g5-period-fill--in { width:var(--fill-w); }

/* Empty state */
.g5-empty { text-align:center; padding:32px 24px; }
.g5-empty-icon { font-size:32px; margin-bottom:12px; opacity:.7; }
.g5-empty-title { font-size:15px; font-weight:700; color:var(--text); margin-bottom:4px; }
.g5-empty-sub { font-size:12px; color:var(--text-dim); margin-bottom:16px; }
.g5-empty-btn { background:var(--primary); color:#000; border:none; border-radius:8px; padding:9px 20px; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; transition:transform .15s, box-shadow .15s; }
.g5-empty-btn:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,214,50,.25); }

@media(max-width:640px) {
  .g5-card { padding:20px 16px 16px; }
  .g5-gauge-wrap { width:240px; height:146px; }
  .g5-pct { font-size:26px; }
}

/* ── SECTION NAV ITEMS (sidebar) ── */
.nav-section-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; font-size: 13px; font-weight: 600;
  color: var(--text-dim); text-decoration: none; margin-bottom: 2px;
}
.nav-section-item:hover { background: var(--surface); color: var(--text); }
.nav-section-item.active { background: var(--surface); color: var(--text); }
.nav-section-bar { width: 3px; height: 16px; border-radius: 99px; background: transparent; flex-shrink: 0; }
.nav-section-item.active .nav-section-bar { background: var(--primary); }

/* ── CHIPS BAR ── */
.crewly-chips-bar {
  display: flex; gap: 6px; padding: 10px 20px 8px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  flex-wrap: wrap; flex-shrink: 0;
}
.crewly-chip {
  padding: 5px 16px; border-radius: 99px; font-size: 12px; font-weight: 500;
  cursor: pointer; background: transparent; color: var(--text-dim);
  border: 0.5px solid var(--border); text-decoration: none; white-space: nowrap;
}
.crewly-chip:hover { color: var(--text); border-color: var(--primary); }
.crewly-chip.active { background: var(--primary); color: #000; border-color: var(--primary); font-weight: 700; }

/* ── MOBILE BOTTOM NAV ── */
.crewly-bottom-nav {
  display: none; position: fixed; bottom: 0; left: 0; right: 0;
  height: 60px; background: var(--surface); border-top: 1px solid var(--border);
  flex-direction: row; justify-content: space-around; align-items: center;
  z-index: 1000; padding-bottom: env(safe-area-inset-bottom);
}
@media (max-width: 640px) {
  .crewly-bottom-nav { display: flex; }
  .main, .main-content { padding-bottom: 70px !important; }
}
.bottom-tab {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; text-decoration: none; color: var(--text-dim);
  font-size: 10px; flex: 1; padding: 8px 0;
}
.bottom-tab.active { color: var(--primary); }
.bottom-tab-icon { font-size: 16px; line-height: 1; }
.bottom-tab-new {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--primary); color: #000 !important;
  display: flex !important; align-items: center; justify-content: center;
  flex: none !important; margin-bottom: 8px;
}

/* ── ACTIVITY LOG ── */
.activity-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.activity-item:last-child { border-bottom: none; }
.activity-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.activity-text { color: var(--text); }
.activity-time { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

/* ── OFFLINE BANNER ── */
.offline-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 999;
  background: var(--warning); color: #000; text-align: center;
  padding: 6px; font-size: 12px; font-weight: 600;
  display: none;
}
.offline-banner.show { display: block; }

/* ── ONBOARDING WIZARD ── */
.onboard-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center; z-index: 5000;
}
.onboard-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 32px; max-width: 440px; width: 90%;
}
.onboard-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 20px; }
.onboard-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.onboard-dot.active { background: var(--primary); }
.onboard-title { font-size: 20px; font-weight: 800; margin-bottom: 8px; text-align: center; }
.onboard-sub { font-size: 13px; color: var(--text-dim); text-align: center; margin-bottom: 20px; }
.onboard-input {
  width: 100%; padding: 10px 14px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg); color: var(--text);
  font: inherit; font-size: 14px; margin-bottom: 12px;
}
.onboard-input:focus { outline: none; border-color: var(--primary); }
.onboard-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.onboard-skip { background: none; border: none; color: var(--text-dim); cursor: pointer; font: inherit; font-size: 13px; }
.onboard-next { padding: 10px 24px; }

/* ── EVENT PHOTOS ── */
.ev-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ev-photo-thumb {
  position: relative; width: 64px; height: 64px; border-radius: 6px;
  overflow: hidden; border: 1px solid var(--border);
}
.ev-photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ev-photo-del {
  position: absolute; top: 2px; right: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: rgba(0,0,0,.7); color: #fff;
  border: none; cursor: pointer; font-size: 10px; line-height: 18px;
  text-align: center; padding: 0;
}

/* ── GAUGE LEADERBOARD v5 ── */
.g5-lb { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:18px; margin-top:10px; max-width:600px; margin-left:auto; margin-right:auto; }
.g5-lb-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.g5-lb-title { font-size:13px; font-weight:800; color:var(--text); letter-spacing:-.02em; }
.g5-lb-sub { font-size:10px; color:var(--text-dim); font-weight:500; }
.g5-lb-row { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); opacity:0; transform:translateX(-8px); transition:opacity .35s, transform .35s cubic-bezier(.16,1,.3,1); }
.g5-lb-row--in { opacity:1; transform:translateX(0); }
.g5-lb-row:last-child { border-bottom:none; }
.g5-lb-rank { width:22px; text-align:center; font-size:14px; flex-shrink:0; }
.g5-lb-avatar { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; flex-shrink:0; }
.g5-lb-info { flex:1; min-width:0; }
.g5-lb-name { font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.g5-lb-bar { height:4px; background:var(--border); border-radius:99px; margin-top:6px; overflow:hidden; }
.g5-lb-fill { height:100%; border-radius:99px; width:0; background:var(--fill-c); transition:width 1s cubic-bezier(.16,1,.3,1); }
.g5-lb-fill--in { width:var(--fill-w); }
.g5-lb-amt { text-align:right; flex-shrink:0; }
.g5-lb-val { font-size:13px; font-weight:700; color:var(--text); }
.g5-lb-pct { font-size:10px; color:var(--text-dim); margin-top:1px; }

/* ── Global polish & micro-animations ── */
html { scroll-behavior: smooth; }

/* ── Page transition overlay (no white flash) ── */
.page-transition-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: var(--bg); opacity: 0; pointer-events: none;
  transition: opacity 160ms ease;
}
.page-transition-overlay.active { opacity: 1; pointer-events: all; }

/* Gentle content entrance — no opacity:0 start (prevents flash) */
@keyframes pageSlideIn {
  from { opacity: 0.85; transform: translateY(4px); }
  to   { opacity: 1;    transform: translateY(0); }
}
.main-content, main, #main, .page-content {
  animation: pageSlideIn 200ms ease forwards;
}

.sidebar, .modal, .toast, .card, .chip {
  will-change: transform, opacity;
}

@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--border) 25%, var(--surface) 50%, var(--border) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: 6px;
}

.card, .quote-card, .stat-card, .plan-card {
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.card:hover, .quote-card:hover, .stat-card:hover, .plan-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

button, .btn {
  transition: transform var(--transition), background var(--transition), opacity var(--transition);
}
button:active, .btn:active {
  transform: scale(0.97);
  transition: transform 80ms ease;
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-overlay.open .modal {
  animation: modalIn 200ms ease forwards;
}

@keyframes toastSlide {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.toast, .toast-eq.show, .popup.show {
  animation: toastSlide 200ms ease forwards;
}

.crewly-chip, .chip, [class*="chip"] {
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}