/* GrowZap admin — Admin Panel UI Kit.
   Material-3 semantic tokens, green primary #006c49, blue tertiary #005ac2.
   Light mode only. Same tokens/scale/shadows as the kit spec; expressed as plain
   CSS instead of Tailwind because this is a Jinja2 app with no Node build. */

/* Inter + Material Symbols. The icon font is an explicit subset: the full
   variable font is ~3.9MB, this is ~175KB. Two gotchas, both load-bearing:
   an icon NOT in icon_names renders as its literal ligature text, and the css2
   API 400s on an unsorted list — the list below is sorted, keep it that way.
   display=block leaves the glyph slot blank while loading instead of flashing
   the raw ligature. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=add,add_task,arrow_back,arrow_forward,badge,block,calculate,campaign,card_giftcard,check,chevron_left,chevron_right,close,content_copy,dashboard,done,edit,error,expand_more,fact_check,group,group_add,history,id_card,image_not_supported,inbox,info,inventory_2,local_activity,lock,logout,menu,open_in_new,pause,payments,play_arrow,redeem,save,search,settings,share,shield_person,smartphone,storefront,task_alt,trending_up,verified_user,view_carousel,visibility,visibility_off,warning&display=block");

:root{
  color-scheme:light;

  /* colour */
  --primary:#006c49; --on-primary:#ffffff;
  --primary-container:#10b981; --on-primary-container:#00422b;
  --primary-fixed:#6ffbbe; --primary-fixed-dim:#4edea3; --inverse-primary:#4edea3;
  --on-primary-fixed:#002113; --on-primary-fixed-variant:#005236;
  --surface-tint:#006c49;

  --secondary:#565e74; --on-secondary:#ffffff;
  --secondary-container:#dae2fd; --on-secondary-container:#5c647a;
  --secondary-fixed:#dae2fd; --secondary-fixed-dim:#bec6e0;
  --on-secondary-fixed:#131b2e; --on-secondary-fixed-variant:#3f465c;

  --tertiary:#005ac2; --on-tertiary:#ffffff;
  --tertiary-container:#71a1ff; --on-tertiary-container:#00367a;
  --tertiary-fixed:#d8e2ff; --tertiary-fixed-dim:#adc6ff;
  --on-tertiary-fixed:#001a42; --on-tertiary-fixed-variant:#004395;

  --error:#ba1a1a; --on-error:#ffffff;
  --error-container:#ffdad6; --on-error-container:#93000a;

  --surface:#f7f9fb; --background:#f7f9fb; --surface-bright:#f7f9fb;
  --surface-dim:#d8dadc; --surface-variant:#e0e3e5;
  --surface-container-lowest:#ffffff; --surface-container-low:#f2f4f6;
  --surface-container:#eceef0; --surface-container-high:#e6e8ea;
  --surface-container-highest:#e0e3e5;
  --inverse-surface:#2d3133; --inverse-on-surface:#eff1f3;

  --on-surface:#191c1e; --on-background:#191c1e; --on-surface-variant:#3c4a42;
  --outline:#6c7a71; --outline-variant:#bbcabf;

  /* radius */
  --r-sm:.25rem; --r-md:.375rem; --r-lg:.5rem; --r-xl:.75rem; --r-2xl:1rem;
  --r-full:9999px;

  /* named spacing — density is tunable from here */
  --nav-width:260px; --header-height:64px; --gutter:24px; --section-gap:32px;
  --card-padding:20px; --stack-md:16px; --stack-sm:8px;

  /* layered, slightly blue-tinted shadows read more premium than flat black */
  --shadow-card:0 1px 2px rgba(16,24,40,.04), 0 2px 6px rgba(16,24,40,.06);
  --shadow-card-hover:0 4px 10px -2px rgba(16,24,40,.08),
                      0 14px 28px -6px rgba(16,24,40,.14);
  --shadow-elevated:0 10px 32px -6px rgba(16,24,40,.16);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  --shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);

  --sans:Inter,ui-sans-serif,system-ui,sans-serif;
}

*{box-sizing:border-box}

/* Type scale is compact — body is 13px, not 16px. That single choice is what
   makes the panel read as a dense ops console instead of a marketing site. */
body{margin:0;background:var(--surface);color:var(--on-surface);
     font:400 13px/18px var(--sans);
     -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

h1,h2,h3,h4,.font-display{font-family:var(--sans);letter-spacing:-.015em;
     margin:0}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}

.text-display-lg{font:700 28px/34px var(--sans);letter-spacing:-.02em}
.text-headline-lg{font:600 22px/28px var(--sans);letter-spacing:-.01em}
.text-headline-md{font:600 17px/24px var(--sans)}
.text-body-lg{font:400 14px/20px var(--sans)}
.text-body-md{font:400 13px/18px var(--sans)}
.text-label-md{font:600 11px/15px var(--sans);letter-spacing:.05em;
     text-transform:uppercase}
.mono,.text-mono-data{font:500 13px/18px var(--sans);letter-spacing:-.01em;
     font-variant-numeric:tabular-nums}

.material-symbols-outlined{font-family:"Material Symbols Outlined";
  font-weight:normal;font-style:normal;font-size:20px;line-height:1;
  letter-spacing:normal;text-transform:none;display:inline-block;
  white-space:nowrap;word-wrap:normal;direction:ltr;
  font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24}
.material-symbols-outlined.sm{font-size:16px}
.material-symbols-outlined.md{font-size:20px}
.material-symbols-outlined.lg{font-size:24px}
.material-symbols-outlined.xl{font-size:32px}
.material-symbols-outlined.filled{
  font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 24}

.input-transition{transition:all .2s ease-in-out}
.custom-scrollbar::-webkit-scrollbar{width:6px}
.custom-scrollbar::-webkit-scrollbar-track{background:transparent}
.custom-scrollbar::-webkit-scrollbar-thumb{background:#e0e3e5;border-radius:10px}

/* ------------------------------------------------------------------ shell */
.shell{display:flex;min-height:100vh}

/* Off-canvas drawer under lg, sticky column above it. A checkbox drives it
   instead of JS: every nav click is a full page load, so the drawer closes
   itself for free — the React original needs a useEffect for the same thing. */
.nav-toggle{position:absolute;width:0;height:0;opacity:0;pointer-events:none}
.scrim{display:none;position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.4)}
.nav-toggle:checked ~ .shell .scrim{display:block}
.nav-toggle:checked ~ .shell .side{transform:translateX(0)}

.side{position:fixed;top:0;left:0;z-index:40;width:var(--nav-width);height:100vh;
      flex-shrink:0;display:flex;flex-direction:column;background:var(--surface);
      border-right:1px solid var(--outline-variant);
      transform:translateX(-100%);transition:transform .3s}
@media (min-width:1024px){
  .side{position:sticky;transform:none}
  .scrim,.mobile-top,.close-nav{display:none !important}
}

/* Wordmark + tagline, no divider — the nav below floats against the same
   surface, which is what keeps the rail from reading as a boxed header. */
.brand{flex-shrink:0;display:flex;align-items:flex-start;
       justify-content:space-between;gap:12px;padding:var(--gutter)}
.brand h1{font:700 17px/24px var(--sans);letter-spacing:-.015em;
          color:var(--primary)}
.brand p{margin:0;font:600 11px/15px var(--sans);letter-spacing:.1em;
         text-transform:uppercase;color:var(--on-surface-variant)}
.close-nav{flex-shrink:0;display:inline-flex;padding:4px;cursor:pointer;
           border-radius:var(--r-lg);color:var(--on-surface-variant)}
.close-nav:hover{background:var(--surface-container-low)}

/* Active row is a left bar + tinted wash, not a filled pill. The 4px border
   sits on both states so switching pages never shifts the label. */
.nav{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;
     gap:4px}
.nav a{display:flex;align-items:center;gap:12px;padding:12px 16px;
       border-left:4px solid transparent;color:var(--secondary);
       font:400 13px/18px var(--sans);transition:all .2s ease-in-out}
.nav a:hover{background:var(--surface-container-high);text-decoration:none}
.nav a.on{border-left-color:var(--primary);background:rgba(16,185,129,.05);
          color:var(--primary);font-weight:700}
.nav a .material-symbols-outlined{flex-shrink:0}
.nav a .label{flex:1;min-width:0}
.nav .pill{flex-shrink:0;background:var(--error-container);
           color:var(--on-error-container);border-radius:var(--r-full);
           padding:1px 8px;font:600 11px/15px var(--sans);letter-spacing:.05em}

/* Identity lives at the foot of the rail, not in a top bar. */
.side .foot{margin-top:auto;flex-shrink:0;padding:16px;
            border-top:1px solid var(--outline-variant)}
.side .me{display:flex;align-items:center;gap:12px;padding:16px 8px;
          margin-bottom:8px}
.side .me .avatar{width:40px;height:40px;flex-shrink:0;
     border-radius:var(--r-full);background:rgba(16,185,129,.2);
     color:var(--primary);display:flex;align-items:center;justify-content:center;
     font:700 12px/1 var(--sans)}
.side .me .who{min-width:0;overflow:hidden}
.side .me .nm{font:700 13px/18px var(--sans);color:var(--on-surface);
     overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side .me .rl{font:400 12px/16px var(--sans);color:var(--on-surface-variant);
     text-transform:capitalize;overflow:hidden;text-overflow:ellipsis;
     white-space:nowrap}
.side .me .copyable{max-width:100%}
.side .me .copyable .txt{font-size:12px;color:var(--on-surface-variant)}
.side .foot a{display:flex;align-items:center;gap:12px;height:36px;
     padding:0 16px;border-radius:var(--r-lg);color:var(--secondary);
     font:400 13px/18px var(--sans)}
.side .foot a:hover{background:var(--surface-container-high);
     color:var(--on-surface);text-decoration:none}

.main{flex:1;min-width:0;display:flex;flex-direction:column}

.mobile-top{position:sticky;top:0;z-index:20;height:48px;flex-shrink:0;
  display:flex;align-items:center;gap:12px;padding:0 16px;
  background:var(--surface-container-lowest);
  border-bottom:1px solid var(--outline-variant)}
.mobile-top .burger{display:inline-flex;padding:6px;cursor:pointer;
  border-radius:var(--r-lg);color:var(--on-surface-variant)}
.mobile-top .burger:hover{background:var(--surface-container-low)}
.mobile-top .mk{display:flex;align-items:center;gap:8px}
.mobile-top .mark{width:28px;height:28px;border-radius:var(--r-lg);
  background:var(--primary);color:var(--on-primary);display:flex;
  align-items:center;justify-content:center}
.mobile-top .nm{font:600 13px/18px var(--sans);color:var(--on-surface)}

/* ListPageHeader — title, blurb and page actions sit in the body, above the
   content padding, so there is no persistent chrome eating vertical space. */
.page-head{display:flex;flex-direction:column;justify-content:space-between;
  gap:var(--stack-md);padding:var(--gutter) 16px 0}
.page-head h1{font:600 22px/28px var(--sans);letter-spacing:-.01em;
  color:var(--on-surface)}
.page-head p{margin:4px 0 0;font:400 13px/18px var(--sans);
  color:var(--on-surface-variant)}
.page-head .acts{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;
  gap:12px}
@media (min-width:768px){
  .page-head{flex-direction:row;align-items:flex-end;
             padding:var(--gutter) var(--gutter) 0}
}

.body{flex:1;padding:16px}
@media (min-width:768px){.body{padding:var(--gutter)}}

/* ------------------------------------------------------- cards + stat tiles */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
       gap:var(--stack-md);margin-bottom:var(--section-gap)}
.stat{background:var(--surface-container-lowest);
      border:1px solid var(--outline-variant);border-radius:var(--r-xl);
      padding:var(--card-padding);box-shadow:var(--shadow-card);
      transition:box-shadow .3s ease}
.stat:hover{box-shadow:var(--shadow-card-hover)}
.stat .n{font:600 17px/24px var(--sans);color:var(--on-surface);
         font-variant-numeric:tabular-nums}
.stat .l{margin-top:4px;font:600 11px/15px var(--sans);letter-spacing:.05em;
         text-transform:uppercase;color:var(--secondary)}
.stat.alert .n{color:var(--error)}

.card{background:var(--surface-container-lowest);
      border:1px solid var(--outline-variant);border-radius:var(--r-xl);
      box-shadow:var(--shadow-card);margin-bottom:var(--gutter);
      overflow:hidden}
.card h2{padding:16px var(--card-padding);font:600 17px/24px var(--sans);
         border-bottom:1px solid var(--outline-variant)}
.card .inner{padding:var(--card-padding)}

/* DataTableToolbar — title + description, actions on the right */
.toolbar{display:flex;flex-direction:column;justify-content:space-between;
  gap:var(--stack-md);padding:var(--gutter);
  border-bottom:1px solid var(--outline-variant)}
@media (min-width:768px){.toolbar{flex-direction:row;align-items:center}}
.toolbar h2{padding:0;border:0;font:600 17px/24px var(--sans)}
.toolbar p{margin:2px 0 0}
.toolbar .acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.toolbar form{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0}

/* ------------------------------------------------------------- data tables */
table{width:100%;border-collapse:collapse;text-align:left}
thead{background:var(--surface)}
th{padding:16px var(--gutter);border-bottom:1px solid var(--outline-variant);
   font:600 11px/15px var(--sans);letter-spacing:.05em;text-transform:uppercase;
   color:var(--secondary);white-space:nowrap}
th.right{text-align:right}
th.center{text-align:center}
td{padding:16px var(--gutter);font:400 13px/18px var(--sans);
   color:var(--on-surface);vertical-align:middle}
tbody tr + tr td{border-top:1px solid var(--surface-container)}
tbody tr{transition:background-color .15s ease}
tbody tr:hover{background:var(--surface-bright)}
td.right{text-align:right}
.meta{color:var(--secondary);font-size:12px}

/* CopyableText */
.copyable{display:inline-flex;max-width:100%;align-items:center;gap:4px}
.copyable .txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.copyable button{flex-shrink:0;display:inline-flex;align-items:center;
  justify-content:center;padding:2px;border:0;background:none;cursor:pointer;
  border-radius:var(--r-sm);color:var(--on-surface-variant);
  transition:color .15s ease,background-color .15s ease}
.copyable button:hover{background:var(--surface-container-high);
  color:var(--primary)}
.copyable button.copied{color:var(--primary)}
.copyable .material-symbols-outlined{font-size:14px}
.nowrap{white-space:nowrap}

/* right-aligned row actions; forms inline so buttons sit on one line */
.actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;
         gap:var(--stack-sm)}
.actions form{display:flex;gap:6px;align-items:center;margin:0}
.actions input{width:130px;padding:8px 10px}

/* EmptyState — dashed, centred, icon in a rounded tile */
.empty{padding:0}
tbody tr.empty-row:hover{background:transparent}
.empty-state{display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:64px 24px;
  border-radius:var(--r-xl);border:1px dashed var(--outline-variant);
  background:var(--surface-container-low);margin:var(--card-padding)}
.empty-state .ico{width:56px;height:56px;margin-bottom:var(--stack-md);
  border-radius:var(--r-xl);background:var(--surface-container);
  color:var(--outline);display:flex;align-items:center;justify-content:center}
.empty-state h3{font:600 17px/24px var(--sans);color:var(--on-surface)}
.empty-state p{margin:var(--stack-sm) 0 0;max-width:24rem;
  font:400 13px/18px var(--sans);color:var(--on-surface-variant)}

.pagination{display:flex;align-items:center;justify-content:space-between;
  padding:16px var(--gutter);border-top:1px solid var(--outline-variant)}
.pagination p{margin:0;color:var(--secondary)}
.pagination .pages{display:flex;gap:var(--stack-sm)}
.pagination a,.pagination span.pg{width:32px;height:32px;display:flex;
  align-items:center;justify-content:center;border-radius:var(--r-sm);
  border:1px solid var(--outline-variant);color:var(--secondary);
  font:700 12px/1 var(--sans);transition:background-color .15s ease}
.pagination a:hover{background:var(--surface);text-decoration:none}
.pagination a.on{border-color:var(--primary);background:var(--primary);
  color:var(--on-primary)}
.pagination .off{opacity:.5;pointer-events:none}

/* ------------------------------------------------------------------ badges */
/* Tinted fill + inset ring in the matching hue — never a solid saturated block. */
.tag{display:inline-flex;align-items:center;border-radius:var(--r-full);
     padding:2px 10px;font:600 11px/15px var(--sans);letter-spacing:normal;
     text-transform:none}
.tag.grey{background:var(--surface-container);color:var(--on-surface-variant)}
.tag.green{background:rgba(111,251,190,.2);color:var(--on-primary-container);
     box-shadow:inset 0 0 0 1px rgba(0,108,73,.3)}
.tag.gold{background:rgba(255,218,214,.4);color:var(--on-error-container);
     box-shadow:inset 0 0 0 1px rgba(186,26,26,.2)}
.tag.red{background:var(--error-container);color:var(--on-error-container);
     box-shadow:inset 0 0 0 1px rgba(186,26,26,.3)}
.tag.brand{background:var(--secondary-container);
     color:var(--on-secondary-container);
     box-shadow:inset 0 0 0 1px rgba(0,90,194,.2)}

/* status pill — dot + label */
.pill-status{display:inline-flex;align-items:center;border-radius:var(--r-full);
  padding:4px 8px;font:700 12px/1 var(--sans)}
.pill-status::before{content:"";width:6px;height:6px;margin-right:8px;
  border-radius:var(--r-full);background:currentColor}
.pill-status.primary{background:rgba(0,108,73,.1);color:var(--primary)}
.pill-status.tertiary{background:rgba(0,90,194,.1);color:var(--tertiary)}
.pill-status.error{background:rgba(255,218,214,.5);color:var(--error)}
.pill-status.neutral{background:var(--surface-container);
  color:var(--on-surface-variant)}

.check{display:inline-flex;align-items:center;margin:2px 6px 2px 0;
  padding:2px 8px;border-radius:var(--r-md);font:600 11px/15px var(--sans)}
.check.pass{background:rgba(111,251,190,.2);color:var(--on-primary-container);
  box-shadow:inset 0 0 0 1px rgba(0,108,73,.3)}
.check.fail{background:var(--error-container);color:var(--on-error-container);
  box-shadow:inset 0 0 0 1px rgba(186,26,26,.3)}
.check.unknown{background:rgba(255,218,214,.4);color:var(--on-error-container);
  box-shadow:inset 0 0 0 1px rgba(186,26,26,.2)}

.pts{font-weight:600;color:var(--primary);font-variant-numeric:tabular-nums}

/* ----------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:36px;padding:0 16px;border:1px solid transparent;
  border-radius:var(--r-lg);font:600 13px/18px var(--sans);cursor:pointer;
  font-family:var(--sans);transition:all .2s ease;white-space:nowrap}
.btn:hover{text-decoration:none}
.btn:focus-visible{outline:none;
  box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--primary)}
.btn:disabled{cursor:not-allowed;opacity:.6}
.btn.sm{height:32px;padding:0 12px;font:600 11px/15px var(--sans);
  letter-spacing:.05em;text-transform:uppercase}
.btn.lg{height:40px;padding:0 20px}

.btn.primary{background:var(--primary);color:#fff;box-shadow:var(--shadow-md)}
.btn.primary:hover{background:rgba(0,108,73,.9);box-shadow:var(--shadow-lg)}
.btn.primary:active{transform:scale(.98)}
.btn.secondary{background:var(--secondary);color:#fff}
.btn.secondary:hover{background:rgba(86,94,116,.9)}
.btn.tertiary{background:var(--tertiary);color:#fff}
.btn.tertiary:hover{background:rgba(0,90,194,.9)}
.btn.danger{background:var(--error);color:#fff}
.btn.danger:hover{background:rgba(186,26,26,.9)}
.btn.outline,.btn.ghost{border-color:var(--outline-variant);
  background:var(--surface-container-lowest);color:var(--on-surface)}
.btn.outline:hover,.btn.ghost:hover{background:var(--surface-container-low)}

/* the one canonical row-action / Explore CTA: white fill, grey border,
   bold dark label */
.btn.action{border-color:var(--outline-variant);background:#fff;height:auto;
  padding:8px 20px;font:700 13px/18px var(--sans);color:var(--on-surface);
  text-transform:none;letter-spacing:normal}
.btn.action:hover{border-color:var(--outline);
  background:var(--surface-container-low)}
.btn.action:active{transform:scale(.98)}

/* ------------------------------------------------------------------- forms */
input,select,textarea{width:100%;padding:12px;
  border:1px solid var(--outline-variant);border-radius:var(--r-lg);
  background:var(--surface-container-low);color:var(--on-surface);
  font:400 13px/18px var(--sans);outline:none;transition:all .2s ease-in-out}
input::placeholder,textarea::placeholder{color:var(--outline)}
input:focus,select:focus,textarea:focus{border-color:var(--primary);
  background:var(--surface-container-lowest);
  box-shadow:0 0 0 2px var(--primary)}
input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.6}
textarea{min-height:88px}
/* the browser's default file button ignores the design system; match .btn.outline */
input[type=file]{padding:7px 12px;cursor:pointer}
input[type=file]::file-selector-button{margin-right:12px;padding:6px 14px;
  border:1px solid var(--outline-variant);border-radius:var(--r-md);
  background:var(--surface-container-lowest);color:var(--on-surface);
  font:600 12px/16px var(--sans);cursor:pointer;transition:all .2s ease}
input[type=file]::file-selector-button:hover{background:var(--surface-container-low);
  border-color:var(--outline)}

input[type=checkbox]{width:16px;height:16px;padding:0;accent-color:var(--primary);
  box-shadow:none}
input[type=checkbox]:focus{box-shadow:none;outline:2px solid var(--primary);
  outline-offset:1px}

label{display:block;margin:0 0 6px;font:600 11px/15px var(--sans);
  letter-spacing:.05em;text-transform:uppercase;color:var(--on-surface-variant)}
.field{margin-bottom:var(--stack-md)}
.field .hint{display:block;margin-top:6px;color:var(--secondary);font-size:12px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:var(--stack-md)}
.checks{display:flex;flex-wrap:wrap;gap:var(--stack-sm) var(--stack-md)}
.checks .opt{display:inline-flex;align-items:center;gap:8px;margin:0;padding:8px 12px;
  border:1px solid var(--outline-variant);border-radius:var(--r-lg);
  background:var(--surface-container-low);cursor:pointer;
  font:400 13px/18px var(--sans);text-transform:none;letter-spacing:normal;
  color:var(--on-surface);transition:all .2s ease-in-out}
.checks .opt:hover{background:var(--surface-container)}
.checks .opt:has(input:checked){border-color:var(--primary);
  background:rgba(111,251,190,.18);color:var(--on-primary-container);font-weight:600}
@media (max-width:720px){.row{grid-template-columns:1fr}}

/* select with a trailing chevron */
.select-wrap{position:relative}
.select-wrap select{appearance:none;padding-right:40px}
.select-wrap .material-symbols-outlined{position:absolute;right:12px;top:50%;
  transform:translateY(-50%);pointer-events:none;color:var(--outline)}

/* input with a leading icon */
.input-icon{position:relative}
.input-icon > .material-symbols-outlined{position:absolute;left:12px;top:50%;
  transform:translateY(-50%);pointer-events:none;color:var(--outline)}
.input-icon input{padding-left:40px}

/* filter bar above a list */
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--stack-md);
  margin-bottom:var(--gutter);padding:var(--stack-md);
  border:1px solid var(--outline-variant);border-radius:var(--r-xl);
  background:var(--surface-container-lowest);box-shadow:var(--shadow-card)}
.bar input,.bar select{width:auto;min-width:240px}
.bar .input-icon{min-width:280px}
.bar .input-icon input{width:100%;min-width:0}
/* a date-range pair reads as one control: caption beside the field, not above */
.bar label.inline{display:inline-flex;align-items:center;gap:8px;margin:0;
  font:600 11px/15px var(--sans);letter-spacing:.05em;text-transform:uppercase;
  color:var(--on-surface-variant);white-space:nowrap}
.bar label.inline input{width:auto;min-width:0}

/* FilterTabs — segmented control, primary active segment */
.tabs{display:inline-flex;padding:4px;margin-bottom:var(--gutter);
  border:1px solid var(--outline-variant);border-radius:var(--r-lg);
  background:var(--surface-container-lowest);box-shadow:var(--shadow-card);
  flex-wrap:wrap}
.tabs a{padding:8px 16px;border-radius:var(--r-md);
  font:500 13px/18px var(--sans);color:var(--on-surface-variant);
  transition:all .2s ease}
.tabs a:hover{background:var(--surface-container-low);color:var(--on-surface);
  text-decoration:none}
.tabs a.on{background:var(--primary);color:var(--on-primary);
  box-shadow:var(--shadow-sm)}

/* ---------------------------------------------------------------- feedback */
.note{display:flex;align-items:flex-start;gap:8px;
  padding:12px var(--stack-md);margin-bottom:var(--gutter);
  border:1px solid rgba(0,108,73,.3);border-radius:var(--r-lg);
  background:rgba(111,251,190,.18);color:var(--on-primary-container);
  font:400 13px/18px var(--sans)}
.note a{color:var(--on-primary-container);font-weight:600;
  text-decoration:underline}
.note .material-symbols-outlined{flex-shrink:0;margin-top:1px}

.err{display:flex;align-items:flex-start;gap:8px;
  padding:12px var(--stack-md);margin-bottom:var(--gutter);
  border:1px solid rgba(186,26,26,.3);border-radius:var(--r-lg);
  background:var(--error-container);color:var(--on-error-container);
  font:400 13px/18px var(--sans);scroll-margin-top:112px}
.err .material-symbols-outlined{flex-shrink:0;margin-top:1px}

/* Pure-CSS spinner — an icon-font spinner flashes the literal text
   "progress_activity" before the font loads. */
.spinner{display:inline-block;width:20px;height:20px;border-radius:var(--r-full);
  border:2px solid var(--outline-variant);border-top-color:var(--primary);
  animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.skeleton{border-radius:var(--r-md);background:var(--surface-container);
  animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}
@keyframes pulse{50%{opacity:.5}}

.htmx-request .btn{opacity:.6;pointer-events:none}

/* ------------------------------------------------------------------ dialogs */
/* Native <dialog>: the backdrop, focus trap and Esc-to-close are free, which is
   the whole reason this is not a hand-rolled modal. */
dialog.sheet{width:min(560px,calc(100vw - 32px));padding:0;border:0;
  border-radius:var(--r-xl);background:var(--surface-container-lowest);
  color:var(--on-surface);box-shadow:var(--shadow-elevated)}
dialog.sheet::backdrop{background:rgba(0,0,0,.4)}
dialog.sheet h2{padding:16px var(--card-padding);font:600 17px/24px var(--sans);
  border-bottom:1px solid var(--outline-variant)}
dialog.sheet .inner{padding:var(--card-padding)}
dialog.sheet .sheet-foot{display:flex;justify-content:flex-end;gap:12px;
  padding:16px var(--card-padding);border-top:1px solid var(--outline-variant);
  background:var(--surface-container-low)}

/* ------------------------------------------------------------------- login */
.login{position:relative;min-height:100vh;display:flex;align-items:center;
  justify-content:center;background:var(--surface);overflow:hidden}
.login main{width:100%;max-width:480px;padding:0 var(--gutter)}

.login .head{margin-bottom:var(--section-gap);text-align:center}
.login .mark{width:64px;height:64px;margin:0 auto var(--stack-md);
  border-radius:var(--r-xl);background:var(--primary);color:var(--on-primary);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-lg)}
.login h1{margin-bottom:8px;font:700 28px/34px var(--sans);letter-spacing:-.02em;
  color:var(--on-surface)}
.login .head p{margin:0;font:600 14px/20px var(--sans);letter-spacing:.1em;
  text-transform:uppercase;color:var(--secondary);opacity:.7}

.login .box{padding:40px;border:1px solid var(--outline-variant);
  border-radius:var(--r-xl);background:var(--surface-container-lowest);
  box-shadow:var(--shadow-card);transition:box-shadow .3s ease}
.login .box:hover{box-shadow:var(--shadow-card-hover)}
.login h2{margin-bottom:8px;font:600 17px/24px var(--sans);
  color:var(--on-surface)}
.login .box > p{margin:0 0 var(--section-gap);font:400 13px/18px var(--sans);
  color:var(--on-surface-variant)}
.login .field label{margin-bottom:var(--stack-sm)}
.login .btn{width:100%;margin-top:var(--stack-md)}

/* trailing show/hide control inside the password field */
.input-icon .peek{position:absolute;right:12px;top:50%;
  transform:translateY(-50%);display:inline-flex;padding:0;border:0;
  background:none;cursor:pointer;color:var(--outline);
  transition:color .15s ease}
.input-icon .peek:hover{color:var(--primary)}
.input-icon:has(.peek) input{padding-right:40px}

.login .foot{margin-top:var(--section-gap);padding-top:var(--gutter);
  border-top:1px solid var(--outline-variant);display:flex;align-items:center;
  justify-content:space-between;color:var(--on-surface-variant);opacity:.8;
  font:600 11px/15px var(--sans)}
.login .foot .ssl{display:flex;align-items:center;gap:8px}

/* corner wash behind the card */
.login .deco{position:fixed;top:0;right:0;z-index:-1;height:100%;
  width:33.333%;pointer-events:none;user-select:none;overflow:hidden;
  opacity:.3}
.login .deco svg{height:100%;width:100%;transform:translateX(50%);
  fill:var(--primary-container);opacity:.2}

/* ---------------------------------------------------------------- user cell
   One person, one shape, on every screen: picture, name, number, email in a
   single column. The picture and the name are links to that account's Explore
   page; the contact lines keep their copy buttons, so they must not be. */
.usercell{min-width:220px}
.uc{display:flex;align-items:flex-start;gap:12px}
.uc .pic{flex-shrink:0;width:40px;height:40px;border-radius:var(--r-full);
  overflow:hidden;display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-container);border:1px solid var(--outline-variant);
  transition:border-color .15s ease}
.uc .pic:hover{border-color:var(--primary)}
.uc .pic img{width:100%;height:100%;object-fit:cover;display:block}
.uc .pic .ini{font:700 13px/18px var(--sans);color:var(--on-surface-variant);
  letter-spacing:-.01em}
.uc .who{min-width:0;display:flex;flex-direction:column;gap:1px}
.uc .who .nm{font:700 13px/18px var(--sans);color:var(--on-surface);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uc .who .nm:hover{color:var(--primary);text-decoration:underline}
.uc .who .ct{min-width:0;color:var(--secondary);font-size:12px;line-height:17px}
.uc .who .ct .copyable .txt{font-size:12px}

/* ------------------------------------------------------------ explore pages
   The user and campaign detail pages. A profile header, stat tiles, and then
   plain cards - nothing here needs a layout the list pages do not already have. */
.hero{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--stack-md);
  justify-content:space-between}
.hero .id{display:flex;align-items:flex-start;gap:16px;min-width:0}
.hero .pic{flex-shrink:0;width:64px;height:64px;border-radius:var(--r-full);
  overflow:hidden;display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-container);border:1px solid var(--outline-variant)}
.hero .pic img{width:100%;height:100%;object-fit:cover;display:block}
.hero .pic .ini{font:700 22px/28px var(--sans);color:var(--on-surface-variant)}
.hero h2{padding:0;border:0;font:600 22px/28px var(--sans);letter-spacing:-.01em}
.hero .sub{margin-top:6px;display:flex;flex-wrap:wrap;align-items:center;
  gap:6px 14px;color:var(--secondary);font-size:12px}
.hero .acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px}

/* label/value pairs - the profile and task facts */
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--stack-md) var(--gutter)}
.kv>div{min-width:0}
.kv dt{font:600 11px/15px var(--sans);letter-spacing:.05em;text-transform:uppercase;
  color:var(--secondary)}
.kv dd{margin:4px 0 0;font:400 13px/18px var(--sans);color:var(--on-surface);
  overflow-wrap:anywhere}

/* a submitted document, shown next to the fields it has to agree with */
.doc{display:block;width:150px;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--outline-variant);background:var(--surface-container)}
.doc img{display:block;width:100%;height:auto}
.doc:hover{border-color:var(--primary)}
.doc-none{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;
  border-radius:var(--r-lg);border:1px dashed var(--outline-variant);
  color:var(--secondary);font-size:12px}

@media (max-width:720px){
  .usercell{min-width:0}
  .hero .pic{width:48px;height:48px}
  .hero .pic .ini{font-size:17px}
}