/* GreenLoop CRM · Aura theme (v3.4)
   Visual layer only, loaded after styles.css and fx.css. It re-maps the colour tokens and restyles
   the shared components (buttons, inputs, tabs, cards, tables, sidebar) after the "Aura · Glass & Light"
   kit: Outfit type, pill controls, frosted ink panels over a luminous background. No layout logic,
   no class names and no behaviour change. Remove the <link> in index.html to go back to the v3.3 look. */
/* Outfit is served from this app (public/shared/fonts), so it also works offline. Weights above 700 fall back to 700. */
@font-face { font-family: 'Outfit'; src: url('/shared/fonts/Outfit.ttf') format('truetype'); font-weight: 300 700; font-style: normal; font-display: swap; }

:root {
  /* Aura tokens, in GreenLoop's green */
  --a-bg: #07131d; --a-surface: rgba(11, 25, 39, .64); --a-surface2: rgba(24, 45, 64, .78); --a-solid: #0d2031;
  --a-line: rgba(150, 222, 214, .16); --a-line2: rgba(150, 222, 214, .3);
  --a-ink: #ffffff; --a-muted: #b3cdd0;
  --a-accent: #2ee6a6; --a-accent-h: #6ff0c4; --a-accent-ink: #04231b; --a-rgb: 46, 230, 166;
  --a-accent2: #5ce1e6; --a-warn: #ffd166; --a-danger: #ff6b6b;
  --a-r-xs: 10px; --a-r-sm: 14px; --a-r-md: 20px; --a-r-lg: 28px;
  --a-font: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* existing tokens, re-pointed */
  --bg: var(--a-bg); --glass: var(--a-surface); --glass2: rgba(255, 255, 255, .08); --glass3: rgba(255, 255, 255, .13);
  --line: var(--a-line); --line2: var(--a-line2);
  --text: var(--a-ink); --muted: var(--a-muted); --teal: var(--a-accent); --teal-d: #14b88f; --mint: var(--a-accent-h);
  --green: #5ce1a6; --red: var(--a-danger); --amber: var(--a-warn); --blue: #7cc8ff; --violet: #b9a8ff;
  --blur: blur(30px) saturate(150%);
  --shadow: 0 8px 24px -6px rgba(255, 255, 255, .06), 0 20px 44px -22px rgba(0, 0, 0, .65);
  --fx-glow: 46, 230, 166; --fx-glow2: 92, 225, 230;
  --fx-blur: blur(30px) saturate(150%);
  --fx-glass: linear-gradient(160deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .015) 60%);
  --fx-edge: var(--a-line);
  --fx-shadow: 0 8px 24px -6px rgba(255, 255, 255, .06), 0 20px 44px -22px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .07);
}

/* ── luminous background ── */
html { background: var(--a-bg); }
body {
  font-family: var(--a-font); font-size: 14.5px; font-weight: 400; line-height: 1.5; letter-spacing: .005em;
  background:
    radial-gradient(1000px 640px at 6% -12%, rgba(46, 230, 166, .40), transparent 62%),
    radial-gradient(820px 620px at 104% 4%, rgba(92, 225, 230, .26), transparent 60%),
    radial-gradient(900px 700px at 78% 112%, rgba(96, 108, 255, .30), transparent 60%),
    radial-gradient(700px 520px at -6% 104%, rgba(20, 184, 143, .26), transparent 60%),
    linear-gradient(135deg, #0a3431 0%, #0a2238 52%, #131a44 100%);
  background-attachment: fixed;
}
input, select, textarea, button, .btn, .ptab { font-family: var(--a-font); }
a { color: var(--a-accent); }
:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 2px; }

/* ── type ── */
h1 { font-size: 30px; font-weight: 600; letter-spacing: -.025em; line-height: 1.15; margin-bottom: 4px; }
.sub { font-size: 14px; }
.card h3, .modal h3, .lane h4 { font-weight: 600; letter-spacing: -.01em; }
.card h3 { font-size: 17px; margin-bottom: 14px; }
.modal h3 { font-size: 21px; }
h3 .ic, h1 .ic { color: var(--a-accent); }
b, strong { font-weight: 600; }

/* ── brand ── */
.logo { color: var(--a-ink); font-weight: 600; font-size: 21px; letter-spacing: -.03em; gap: 10px; }
.logo span { color: var(--a-ink); } .logo span b { color: var(--a-accent); font-weight: 600; }
.logo svg { flex-shrink: 0; filter: drop-shadow(0 6px 14px rgba(var(--a-rgb), .45)); }

/* ── sidebar: flush ink column ── */
.sidebar { width: 252px; margin: 0; top: 0; height: 100vh; border-radius: 0; border-width: 0 1px 0 0; padding: 22px 14px 16px; gap: 16px;
  background-color: rgba(8, 18, 30, .7); background-image: none; box-shadow: none; }
.sidebar > .logo { justify-content: flex-start; padding: 2px 8px 6px; }
.nav-group { font-size: 10.5px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; padding: 16px 12px 6px; color: rgba(179, 205, 208, .75); }
.sidebar nav { gap: 2px; }
.sidebar nav a { border-radius: var(--a-r-sm); padding: 9px 12px; font-weight: 500; font-size: 14.5px; gap: 11px; }
.sidebar nav a:hover { background: rgba(255, 255, 255, .06); transform: none; }
.sidebar nav a.active { background: rgba(var(--a-rgb), .14); color: var(--a-accent); box-shadow: none; font-weight: 600; }
.sidebar nav a.active::before { display: none; }
.sidebar-foot { background: rgba(255, 255, 255, .05); border: 1px solid var(--a-line); border-radius: var(--a-r-md); padding: 12px; font-size: 12.5px; }
.sidebar-foot b { font-weight: 600; color: var(--a-ink); }
.role-chip { font-weight: 600; background: rgba(var(--a-rgb), .16); color: var(--a-accent); }
.badge { font-weight: 600; border-radius: 999px; }
main { padding: 30px 36px 64px; max-width: 1400px; }

/* ── buttons: pills ── */
.btn { border-radius: 999px; padding: 10px 18px; font-size: 14px; font-weight: 600; background: rgba(255, 255, 255, .1); line-height: 1.2; }
.btn:hover { background: rgba(255, 255, 255, .16); }
.btn.primary { background: var(--a-accent); color: var(--a-accent-ink); box-shadow: 0 10px 26px -10px rgba(var(--a-rgb), .75); }
.btn.primary:hover { background: var(--a-accent-h); color: var(--a-accent-ink); }
.btn.ghost { background: transparent; border-color: var(--a-line2); } .btn.ghost:hover { background: rgba(255, 255, 255, .08); }
.btn.danger { background: rgba(255, 107, 107, .16); border-color: rgba(255, 107, 107, .4); color: #ffc9c9; } .btn.danger:hover { background: rgba(255, 107, 107, .3); }
.btn.small { padding: 6px 12px; font-size: 12.5px; border-radius: 999px; }
.btn.wa, .btn.gmail { border-radius: 999px; }
/* one solid action per screen: row actions inside tables stay quiet */
td .btn.primary { background: rgba(var(--a-rgb), .16); color: var(--a-accent); box-shadow: none; } td .btn.primary:hover { background: rgba(var(--a-rgb), .28); color: var(--a-accent-h); }
td .btn.primary::after { display: none; }
.stepper-num .btn { padding: 9px 0; }
.ql-x { border-radius: 50%; }
.cap-edit { border-radius: 999px; font-weight: 600; padding: 3px 9px; }

/* ── inputs ── */
input, select, textarea { background: rgba(6, 14, 24, .5); border: 1px solid var(--a-line); border-radius: var(--a-r-sm); padding: 11px 14px; font-size: 14.5px; }
input::placeholder, textarea::placeholder { color: rgba(179, 205, 208, .6); }
input:focus, select:focus, textarea:focus { border-color: var(--a-accent); box-shadow: 0 0 0 4px rgba(var(--a-rgb), .24); }
select option { background: #0e2233; }
.field label, .lbl2 { font-size: 13px; font-weight: 500; color: var(--a-ink); opacity: .86; margin-bottom: 6px; }
.field { margin-bottom: 14px; }
.qb input, .qb select, .ql-what input, .ql-what select { border-radius: 12px; }
.fq-num, .fq-unit { border-radius: 999px; background: rgba(6, 14, 24, .5); border-color: var(--a-line); }
.fq-num output { font-weight: 600; }
.fq-unit button { font-weight: 500; padding: 0 15px; } .fq-unit button + button { border-left: 0; }
.fq-unit button.on { background: var(--a-accent); color: var(--a-accent-ink); font-weight: 600; border-radius: 999px; }
.daypick label { border-radius: 999px; padding: 6px 12px; background: rgba(6, 14, 24, .45); }
.seg-aud label { border-radius: var(--a-r-md); background: rgba(6, 14, 24, .4); }
.seg-aud label:has(input:checked) { border-color: var(--a-accent); background: rgba(var(--a-rgb), .12); box-shadow: 0 0 0 4px rgba(var(--a-rgb), .16); }

/* ── segmented control ── */
.ptabs { border-radius: 999px; padding: 5px; gap: 2px; background-color: rgba(6, 14, 24, .55); background-image: none; }
.ptab { border-radius: 999px; padding: 8px 18px; font-size: 14px; font-weight: 500; }
.ptab.on { background: var(--a-accent); color: var(--a-accent-ink); font-weight: 600; box-shadow: 0 8px 22px -10px rgba(var(--a-rgb), .8); }
.pv-tabs button { font-weight: 500; } .pv-tabs button.on { font-weight: 600; border-bottom-color: var(--a-accent); }

/* ── cards and stats ── */
.card { border-radius: 24px; padding: 22px; }
.kpis { gap: 14px; margin-bottom: 20px; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); }
.kpi { border-radius: var(--a-r-md); padding: 18px 20px 16px; display: flex; flex-direction: column-reverse; justify-content: space-between; gap: 10px; min-height: 116px; }
.kpi .num { font-size: 42px; font-weight: 300; letter-spacing: -.03em; line-height: 1; text-shadow: none; }
.kpi .lbl { font-size: 13.5px; font-weight: 400; color: var(--a-muted); display: flex; align-items: center; gap: 6px; }
.kpi .lbl .ic { margin: 0; width: 26px; height: 26px; padding: 6px; box-sizing: border-box; border-radius: 50%; background: rgba(255, 255, 255, .08); color: currentColor; order: 2; margin-left: auto; flex-shrink: 0; }
.kpi.green .lbl .ic { color: var(--green); background: rgba(92, 225, 166, .14); } .kpi.red .lbl .ic { color: var(--red); background: rgba(255, 107, 107, .14); }
.kpi.amber .lbl .ic { color: var(--amber); background: rgba(255, 209, 102, .14); } .kpi.blue .lbl .ic { color: var(--blue); background: rgba(124, 200, 255, .14); }
.kpi.violet .lbl .ic { color: var(--violet); background: rgba(185, 168, 255, .14); }
.kpi .lbl { color: var(--a-muted) !important; }
.lane { border-radius: 24px; padding: 14px; } .lead-card { border-radius: 16px; padding: 13px 14px; } .lead-card b { font-weight: 600; font-size: 14.5px; }
.opt-card, .alert-item { border-radius: var(--a-r-md); } .opt-card .rank { font-weight: 300; font-size: 28px; }
.veh-card, .flow-step { border-radius: var(--a-r-md); } .day-cell, .tl-body { border-radius: 16px; background: rgba(6, 14, 24, .4); }
.feed-item { border-radius: 16px; background: rgba(255, 255, 255, .045); }
.flow-step .n, .phone-prev .app-ic { background: var(--a-accent); color: var(--a-accent-ink); border-radius: 50%; font-weight: 600; }
.flow-step .k { font-weight: 500; letter-spacing: .14em; } .flow-step b { font-weight: 600; } .flow-step .cnt { font-weight: 300; font-size: 26px; }
.banner, .dupbox { border-radius: 16px; }
.loadbar { border-radius: 999px; background: rgba(6, 14, 24, .55); } .loadbar > i { border-radius: 999px; background: linear-gradient(90deg, #14b88f, var(--a-accent)); } .loadbar span { font-weight: 600; }
.catbar i { background: linear-gradient(90deg, #14b88f, var(--a-accent)); border-radius: 999px; }
.fstep .bar { border-radius: 999px; font-weight: 600; background: linear-gradient(90deg, rgba(var(--a-rgb), .9), rgba(var(--a-rgb), .25)); }
.fstep:nth-child(2) .bar { background: linear-gradient(90deg, rgba(92, 225, 230, .9), rgba(92, 225, 230, .25)); }
.fstep:nth-child(3) .bar { background: linear-gradient(90deg, rgba(124, 200, 255, .9), rgba(124, 200, 255, .25)); }
.dmy, .day-head .wd, .day-head .tag { font-weight: 600; }
.zone-tag { border-radius: 999px; font-weight: 500; padding: 2px 10px; }
.fmt-hint { border-radius: 999px; font-weight: 500; }
.risk { font-weight: 300; font-size: 30px; }

/* ── data tables ── */
th { font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; padding: 11px 12px; background: rgba(255, 255, 255, .045); border-bottom: 0; color: var(--a-muted); }
th:first-child { border-radius: 12px 0 0 12px; } th:last-child { border-radius: 0 12px 12px 0; }
td { padding: 13px 12px; font-size: 14px; }
.qb th, .qtot th { background: transparent; }
.qtot .g td { font-weight: 600; color: var(--a-accent); }

/* ── status pills: dot + label ── */
.pill { padding: 3px 11px 3px 9px; font-size: 12px; font-weight: 500; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; line-height: 1.5; }
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.pill.pending, .pill.Due, .pill.draft, .pill.contacted, .pill.awaiting, .pill.requested, .pill.open { background: rgba(255, 209, 102, .14); color: var(--amber); }
.pill.collected, .pill.Paid, .pill.accepted, .pill.won, .pill.converted, .pill.confirmed, .pill.active, .pill.MET, .pill.resolved, .pill.proof { background: rgba(92, 225, 166, .14); color: var(--green); }
.pill.canceled, .pill.Overdue, .pill.rejected, .pill.lost, .pill.disputed, .pill.declined, .pill.ATRISK, .pill.high, .pill.noproof { background: rgba(255, 107, 107, .15); color: #ff9c9c; }
.pill.rescheduled, .pill.sent, .pill.new, .pill.quoted, .pill.ONTRACK, .pill.Partly, .pill.approved, .pill.in_progress { background: rgba(124, 200, 255, .14); color: var(--blue); }
.pill.overdue, .pill.off_road { background: var(--a-danger); color: #fff; }
.pill.waste { background: rgba(var(--a-rgb), .13); color: var(--a-accent); } .pill.pest { background: rgba(185, 168, 255, .16); color: var(--violet); }

/* ── login ── */
.login-card { border-radius: var(--a-r-lg); padding: 44px 36px 34px; width: 380px; gap: 14px; background-color: rgba(11, 25, 39, .7); }
.login-card .logo { font-size: 26px; margin-bottom: 2px; }
.login-card .btn.full { padding: 13px 18px; font-size: 15px; margin-top: 4px; }

/* ── modal ── */
#modal-wrap { background: rgba(3, 9, 16, .62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.modal { background-color: rgba(11, 24, 38, .92); border-radius: var(--a-r-lg); padding: 28px; }
.confirm { background: rgba(3, 9, 16, .72); border-radius: var(--a-r-lg); inset: -28px; }
.confirm-card { background: var(--a-solid); border-radius: var(--a-r-md); }
.pv-foot { bottom: -28px; background: linear-gradient(to top, rgba(11, 24, 38, .98) 70%, rgba(11, 24, 38, 0)); }
.paper, .mailframe { border-radius: 12px; }
.rail h3 { font-weight: 300; font-size: 30px; letter-spacing: -.02em; }
.qpipe { border-radius: 24px; } .qpipe .n { font-weight: 300; font-size: 38px; letter-spacing: -.03em; } .qpipe .l { font-weight: 600; }
.qpipe button.on { background: rgba(var(--a-rgb), .12); } .qpipe button.on::after { background: var(--a-accent); }
.qrow b { font-weight: 600; } .qrow .amt b { font-weight: 600; font-size: 17px; } .qrow:hover .who b { color: var(--a-accent); }
.ql-total b, .ql-eq b { font-weight: 600; }

/* ── toasts: glass card + icon chip ── */
.toast { background: rgba(12, 26, 40, .93); border: 1px solid var(--a-line2); border-left-width: 1px; border-radius: var(--a-r-md); padding: 14px 16px; font-weight: 500;
  box-shadow: 0 8px 24px -6px rgba(255, 255, 255, .1), 0 24px 60px -18px rgba(0, 0, 0, .8); }
.toast .t-ic { width: 34px; height: 34px; border-radius: 50%; background: rgba(var(--a-rgb), .18); color: var(--a-accent); } .toast .t-msg { padding-top: 6px; }
.toast.success { background: rgba(12, 26, 40, .93); border-color: rgba(92, 225, 166, .5); color: var(--a-ink); box-shadow: 0 8px 24px -6px rgba(92, 225, 166, .22), 0 24px 60px -18px rgba(0, 0, 0, .8); }
.toast.warning { background: rgba(12, 26, 40, .93); border-color: rgba(255, 209, 102, .55); color: var(--a-ink); box-shadow: 0 8px 24px -6px rgba(255, 209, 102, .2), 0 24px 60px -18px rgba(0, 0, 0, .8); }
.toast.critical { background: rgba(12, 26, 40, .93); border-color: rgba(255, 107, 107, .6); color: var(--a-ink); box-shadow: 0 8px 24px -6px rgba(255, 107, 107, .25), 0 24px 60px -18px rgba(0, 0, 0, .8); }
.toast .t-bar { height: 2px; }

/* gentler card motion than fx.css: panels do not jump under the cursor */
@media (hover: hover) {
  .card:hover, .lane:hover, .alert-item:hover { transform: none; }
  .kpi:hover, .opt-card:hover, .lead-card:hover, .veh-card:hover { transform: translateY(-2px); }
  .card:hover, .kpi:hover, .opt-card:hover, .lead-card:hover, .alert-item:hover {
    box-shadow: 0 8px 24px -6px rgba(255, 255, 255, .1), 0 24px 54px -22px rgba(0, 0, 0, .7), 0 0 0 1px rgba(var(--a-rgb), .18); }
  tbody tr:hover { background: transparent; } tbody tr:hover td { background: rgba(255, 255, 255, .04); }
}
.pill:hover { transform: none; }
.card::before, .kpi::before, .login-card::before, .lane::before, .opt-card::before, .hero360::before { opacity: .35; }

/* ── phone and tablet ── */
@media (max-width: 900px) {
  .sidebar { width: auto; height: auto; position: static; margin: 0; border-width: 0 0 1px 0; padding: 14px 12px; gap: 10px; }
  .sidebar nav { gap: 6px; }
  .sidebar nav a { background: rgba(255, 255, 255, .06); border-radius: 999px; padding: 7px 13px; font-size: 13.5px; }
  .sidebar-foot { border-radius: 16px; padding: 10px 12px; }
  main { padding: 18px 14px 48px; }
  h1 { font-size: 25px; }
  .kpis { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .kpi { min-height: 98px; padding: 14px 16px; } .kpi .num { font-size: 34px; }
  .card { padding: 16px; border-radius: 20px; }
  .modal { padding: 20px; border-radius: 24px; } .confirm { inset: -20px; } .pv-foot { bottom: -20px; }
  .ptabs { max-width: 100%; overflow-x: auto; }
}

/* phone: the menu is one row you swipe sideways, so the page starts near the top */
@media (max-width: 900px) {
  .sidebar nav { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .sidebar nav::-webkit-scrollbar { display: none; }
  .sidebar nav a { flex: 0 0 auto; white-space: nowrap; }
  .sidebar > .logo { padding: 0 4px; }
}

/* ── v3.4.1: laptop widths. Tables keep their columns on a 1280–1500 px screen, and a table
   that still cannot fit scrolls inside its own card and never pushes the page sideways. ── */
.card:has(> table), .card:has(> .scroll-x) { overflow-x: auto; }
.scroll-x { max-width: 100%; }
main { min-width: 0; overflow-x: clip; }
@media (max-width: 1500px) and (min-width: 901px) {
  .sidebar { width: 228px; padding: 20px 10px 14px; }
  .sidebar nav a { font-size: 14px; padding: 8px 10px; gap: 9px; }
  main { padding: 26px 24px 56px; }
  .card { padding: 18px; }
  th { padding: 10px 8px; letter-spacing: .07em; font-size: 10.5px; }
  td { padding: 11px 8px; font-size: 13.5px; }
  td .btn.small { padding: 5px 10px; font-size: 12px; }
  .pill { padding: 2px 9px 2px 8px; font-size: 11.5px; }
}