/* =====================================================================
 *  Agritech Farm — design system
 *
 *  Merged from the three templates you supplied. They are built on
 *  incompatible frameworks (Next/Bootstrap, Vue, React+MUI), so what is
 *  taken here is the design language rather than the code:
 *
 *    Sneat    — the fixed vertical sidebar, Public Sans, 6px radius scale,
 *               collapsed 84px rail, rounded floating navbar
 *    Soft UI  — soft layered shadows, gradient primary buttons, uppercase
 *               micro-labels, pill badges, icon chips on stat tiles
 *    Dasher   — the stat-tile grid, table treatment, muted chart surfaces
 *
 *  The accent stays agricultural green: Soft UI ships a magenta primary,
 *  which would be wrong for a farm product used in the field.
 * ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&display=swap');

:root {
  /* --- brand ------------------------------------------------------- */
  --primary: #2d6a2d;
  --primary-dark: #1f5220;
  --primary-light: #4e9b4e;
  --primary-soft: #eaf3e8;
  --gradient: linear-gradient(310deg, #1f5220 0%, #4e9b4e 100%);
  --gradient-info: linear-gradient(310deg, #1a73a8 0%, #49a3f1 100%);
  --gradient-warn: linear-gradient(310deg, #a35c06 0%, #e0a340 100%);
  --gradient-danger: linear-gradient(310deg, #8b1d17 0%, #cd4a41 100%);

  /* --- surfaces (Soft UI greys) ------------------------------------ */
  --bg: #f5f7f4;
  --card: #ffffff;
  --sidebar: #ffffff;
  --ink: #1b2a1c;
  --muted: #67748e;
  --line: #e3e8e2;

  /* --- legacy aliases ----------------------------------------------
     The first-generation pages were written against a different set of
     names, defined only in dashboard2.css. Mapping them here means those
     stylesheets work on every page instead of silently dropping the rule. */
  --green-primary: #2d6a2d;
  --green-dark: #1f5220;
  --green-bright: #3a8a3a;
  --green-light: #4e9b4e;
  --green-accent: #5cb85c;
  --green-pale: #eaf3e8;
  --surface: #ffffff;
  --border: #e3e8e2;
  --radius: 12px;
  --text-dark: #1b2a1c;
  --text-mid: #44514a;
  --text-muted: #67748e;
  --font-main: "Public Sans", "DM Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  /* --- status ------------------------------------------------------ */
  --ok: #1f6b3a;
  --warn: #a35c06;
  --danger: #b3261e;
  --info: #1a73a8;

  /* --- shape (Sneat scale) ----------------------------------------- */
  --r-sm: 6px;
  --r: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* --- Soft UI layered shadows ------------------------------------- */
  --shadow-sm: 0 .25rem .375rem -.0625rem rgba(20,20,20,.06),
               0 .125rem .25rem -.0625rem rgba(20,20,20,.04);
  --shadow: 0 .3125rem .625rem rgba(20,20,20,.08);
  --shadow-lg: 0 .5rem 1.625rem -.25rem rgba(20,20,20,.12),
               0 .5rem .5625rem -.3125rem rgba(20,20,20,.06);

  --sidebar-w: 260px;
  /* Clearance kept free at the foot of the sidebar for the docked assistant
     launcher. Two lines of caption wrap to three at this width, so the box is
     ~100px; the rest is its offset and a little breathing room. */
  --side-foot: 124px;
  --sidebar-collapsed: 84px;
  --topbar-h: 66px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Public Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); }

/* ==================================================== app shell ===== */

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

/* --- sidebar (Sneat) ------------------------------------------------ */
.side {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--sidebar);
  border-right: 1px solid var(--line);
  /* The bottom padding is not decoration: the Ask Saarthi launcher is
     position:fixed at the foot of this column, 176px wide inside a 260px
     sidebar, so without a reserve here it sits permanently on top of the last
     menu entries and no amount of scrolling brings them out. Keep this at
     least as tall as the launcher (its box plus its 16px offset). */
  padding: 18px 14px var(--side-foot);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  transition: width .18s ease, flex-basis .18s ease;
}
.side::-webkit-scrollbar { width: 6px; }
.side::-webkit-scrollbar-thumb { background: #d8e0d7; border-radius: 3px; }

.side-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 8px 18px; text-decoration: none; color: var(--ink);
}
.side-brand .mark {
  width: 38px; height: 38px; flex: 0 0 38px;
  display: grid; place-items: center;
  background: var(--gradient); color: #fff;
  border-radius: var(--r); font-size: 19px;
  box-shadow: var(--shadow-sm);
}
.side-brand b { display: block; font-size: 15px; font-weight: 700; line-height: 1.15; }
.side-brand small { color: var(--muted); font-size: 11px; letter-spacing: .04em; }

.side-section {
  font-size: 10px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
  padding: 16px 10px 6px;
}

.side-link {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; margin-bottom: 2px;
  border-radius: var(--r-sm);
  color: var(--muted); text-decoration: none;
  font-size: 14px; font-weight: 500;
  white-space: nowrap; overflow: hidden;
  transition: background .12s, color .12s;
}
.side-link .ic { width: 20px; text-align: center; flex: 0 0 20px; font-size: 15px; }
.side-link:hover { background: var(--primary-soft); color: var(--primary-dark); }
/* Soft UI's gradient active state — the one strong colour in the rail. */
.side-link.active {
  background: var(--gradient); color: #fff;
  box-shadow: var(--shadow-sm);
}
.side-link .tag {
  margin-left: auto; font-size: 10px; font-weight: 700;
  background: var(--warn); color: #fff;
  border-radius: var(--r-pill); padding: 1px 7px;
}

/* Collapsed rail: icons only. */
.app-shell.collapsed .side { width: var(--sidebar-collapsed); flex-basis: var(--sidebar-collapsed); }
.app-shell.collapsed .side-link span:not(.ic):not(.tag),
.app-shell.collapsed .side-brand div,
.app-shell.collapsed .side-section { display: none; }
.app-shell.collapsed .side-link { justify-content: center; }

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

.topbar {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 14px;
  padding: 0 22px; margin: 14px 18px 0;
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  position: sticky; top: 14px; z-index: 30;
}
.topbar .page-title { font-size: 16px; font-weight: 700; }
.topbar .crumb { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.topbar .spacer { flex: 1 1 auto; }
.icon-btn {
  width: 36px; height: 36px; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--r-sm); cursor: pointer; color: var(--muted); font-size: 15px;
}
.icon-btn:hover { background: var(--primary-soft); color: var(--primary-dark); }

.who-chip {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 12px 5px 5px; border-radius: var(--r-pill);
  background: var(--primary-soft); font-size: 13px; font-weight: 600; color: var(--primary-dark);
}
.who-chip .av {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--gradient); color: #fff;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}

.content { padding: 18px; flex: 1 1 auto; }

/* ==================================================== components ==== */

.card {
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  margin-bottom: 18px;
  border: none;
}
.card > h2, .card-title {
  font-size: 16px; font-weight: 700; margin: 0 0 4px;
}
.card-sub { color: var(--muted); font-size: 13px; margin: 0 0 14px; }

/* Uppercase micro-label — Soft UI's signature. */
.label {
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}

.grid { display: grid; gap: 16px; }
/* auto-FILL, not auto-fit: with one item auto-fit drops the empty tracks and
   stretches that item across the whole row, which turned a single product
   into a full-width card with a screen-sized photograph. */
.grid.c2 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.grid.c3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grid.c4 { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

/* --- stat tile (Dasher grid + Soft UI icon chip) -------------------- */
.stat {
  background: var(--card); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); padding: 16px 18px;
  display: flex; align-items: center; gap: 14px;
}
.stat .chip {
  width: 46px; height: 46px; flex: 0 0 46px;
  border-radius: var(--r); display: grid; place-items: center;
  background: var(--gradient); color: #fff; font-size: 19px;
  box-shadow: var(--shadow-sm);
}
.stat .chip.info { background: var(--gradient-info); }
.stat .chip.warn { background: var(--gradient-warn); }
.stat .chip.danger { background: var(--gradient-danger); }
.stat .n { font-size: 22px; font-weight: 700; line-height: 1.1; }
.stat .k { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; }

/* --- buttons -------------------------------------------------------- */
button, .btn {
  font: inherit; font-weight: 600; cursor: pointer;
  border-radius: var(--r-sm); padding: 9px 18px;
  border: 1px solid transparent; background: #fff; color: var(--ink);
  transition: transform .1s ease, box-shadow .12s ease, background .12s;
}
.btn-primary, button.primary {
  background: var(--gradient); color: #fff; border: none;
  box-shadow: var(--shadow-sm); text-transform: uppercase;
  font-size: 12px; letter-spacing: .04em;
}
.btn-primary:hover, button.primary:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-primary:disabled, button.primary:disabled {
  background: #b6c7b6; box-shadow: none; cursor: not-allowed; transform: none;
}
.btn-outline {
  background: #fff; border: 1px solid var(--line); color: var(--muted);
  text-transform: uppercase; font-size: 12px; letter-spacing: .04em;
}
.btn-outline:hover { border-color: var(--primary); color: var(--primary-dark); }
.btn-danger { background: var(--gradient-danger); color: #fff; border: none; text-transform: uppercase; font-size: 12px; }
.btn-sm { padding: 5px 12px; font-size: 11px; }
.btn-block { width: 100%; }

/* --- form ----------------------------------------------------------- */
label { display: block; font-size: 13px; color: var(--muted); margin: 12px 0 0; font-weight: 500; }
input, select, textarea {
  width: 100%; margin-top: 6px; padding: 10px 13px;
  font: inherit; color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(78,155,78,.15);
}
input[readonly] { background: #f6f8f5; color: var(--muted); }

/* --- table ---------------------------------------------------------- */
.tablewrap {
  overflow-x: auto; background: var(--card);
  border-radius: var(--r); box-shadow: var(--shadow-sm);
}
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th {
  background: #f6f8f5; color: var(--muted);
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #fafcf9; }
td.wrap { white-space: normal; max-width: 340px; }

/* Key/value detail tables — the profile, an order's detail, the admin drawers.
   These are NOT the data grid above. The generic rule nowraps every cell, which
   is right when a table scrolls sideways inside .tablewrap and wrong inside a
   card: an email address or a sentence of help text could not wrap, so the
   table grew past its column and the text was clipped at the card edge.
   Defined here rather than in admin.css because profile.html and orders.html
   use the class and neither of them loads admin.css. */
table.detail {
  width: 100%; border-collapse: collapse; margin-bottom: 6px; font-size: 14px;
  /* Fixed layout is the part that actually contains the text. With `auto`,
     a table column is at least as wide as its longest unbreakable run, and an
     email address is one such run — overflow-wrap alone does not shrink that
     contribution, so the cell still pushed past the card. Fixed layout gives
     the column its share first and makes the content wrap into it. */
  table-layout: fixed;
}
table.detail th {
  text-align: left; width: 170px; font-weight: 500; color: var(--muted);
  background: none; padding: 6px 10px 6px 0; vertical-align: top;
  white-space: nowrap; border-bottom: 1px solid var(--line);
  font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
}
table.detail td {
  padding: 6px 0; vertical-align: top; border-bottom: 1px solid var(--line);
  /* Both are needed: `normal` undoes the nowrap, `anywhere` gives a long
     email or an id a place to break when there is no space in it. */
  white-space: normal; overflow-wrap: anywhere;
}
table.detail tr:last-child th, table.detail tr:last-child td { border-bottom: none; }
table.detail tbody tr:hover { background: none; }

/* --- badges --------------------------------------------------------- */
.pill {
  display: inline-block; padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
}
.pill.ok, .pill.active, .pill.bhunaksha { background: #e4f2e8; color: var(--ok); }
.pill.warn, .pill.manual { background: #fdf0dc; color: var(--warn); }
.pill.fail, .pill.suspended { background: #fbe6e5; color: var(--danger); }
.pill.info, .pill.admin { background: #e5efff; color: var(--info); }
.pill.user { background: #eef3ed; color: var(--muted); }

.notice { border-radius: var(--r); padding: 14px 16px; margin-bottom: 16px; font-size: 14px; }
.notice.warn { background: #fff8e6; border: 1px solid #e6d08a; color: #6b4c06; }
.notice.err { background: #fdecea; border: 1px solid #f0b4ae; color: var(--danger); }
.notice.ok { background: #e9f5ec; border: 1px solid #b7dcc2; color: var(--ok); }

.muted { color: var(--muted); }
.small { font-size: 12px; }
.mono, code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 13px;
}
code { background: var(--primary-soft); color: var(--primary-dark); padding: 2px 7px; border-radius: var(--r-sm); }

hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }

/* ==================================================== responsive ==== */

.side-toggle { display: none; }

@media (max-width: 900px) {
  .side {
    position: fixed; left: 0; top: 0; z-index: 60;
    transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: var(--shadow-lg);
  }
  .app-shell.side-open .side { transform: translateX(0); }
  .side-toggle { display: grid; }
  .topbar { margin: 12px; padding: 0 14px; }
  .content { padding: 12px; }
  .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; }
}

/* ---- account menu (topbar) ------------------------------------------ */
.topnav-right, .top-right, .topbar-right { position: relative; }
.who-chip { border: none; cursor: pointer; }
.account-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 90;
  width: 292px; background: var(--card, #fff); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(20, 32, 21, .22); padding: 6px; text-align: left;
  border: 1px solid var(--line, #e4ece4);
}
.account-menu[hidden] { display: none !important; }
.account-menu .am-head { padding: 12px 12px 10px; border-bottom: 1px solid var(--line, #e4ece4); }
.account-menu .am-head strong { display: block; font-size: 15px; margin-bottom: 8px; }
.am-line {
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  font-size: 12px; padding: 3px 0; color: var(--muted, #7a8a7a);
}
.am-line b { color: var(--ink, #23301f); font-weight: 600; }
.am-line code { font-size: 11.5px; }
.account-menu a, .account-menu button {
  display: block; width: 100%; text-align: left; padding: 9px 12px;
  border: none; background: none; color: var(--ink, #23301f); font: inherit;
  border-radius: 9px; text-decoration: none; cursor: pointer; font-size: 13.5px;
}
.account-menu a:hover, .account-menu button:hover { background: var(--primary-soft, #eaf4ea); }
.account-menu button { color: #b4322c; border-top: 1px solid var(--line, #e4ece4); margin-top: 4px; }

/* ---- payment picker + demo card ------------------------------------- */
.pay-pick { display: grid; gap: 8px; margin: 6px 0 12px; }
.pay-opt {
  display: flex; align-items: center; gap: 11px; text-align: left;
  border: 1px solid var(--line, #e4ece4); background: #fff; border-radius: 11px;
  padding: 10px 12px; cursor: pointer; font: inherit; width: 100%;
}
.pay-opt.active { border-color: var(--primary, #4e9b4e); background: var(--primary-soft, #eaf4ea); }
.pay-opt[disabled] { opacity: .55; cursor: not-allowed; }
.pay-opt .pi { font-size: 20px; }
.pay-opt strong { display: block; font-size: 13.5px; }

.pay-modal {
  position: fixed; inset: 0; z-index: 120; background: rgba(20, 32, 21, .5);
  display: grid; place-items: center; padding: 18px;
}
.pay-modal[hidden] { display: none !important; }
.pay-sheet {
  background: var(--card, #fff); border-radius: 18px;
  box-shadow: 0 26px 60px rgba(10, 20, 10, .35);
  width: min(430px, 100%); padding: 26px; position: relative;
  max-height: 92vh; overflow-y: auto;
}
.pay-sheet h2 { font-size: 26px; margin: 4px 0 12px; color: var(--primary-dark, #24541f); }
.pay-sheet .close {
  position: absolute; top: 12px; right: 14px; width: 32px; height: 32px;
  padding: 0; background: #fff; border: 1px solid var(--line, #e4ece4);
  border-radius: 9px; cursor: pointer; line-height: 1;
}
.pay-sheet .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pay-sheet label { display: block; font-size: 12px; color: var(--muted, #7a8a7a); }
.pay-sheet input {
  width: 100%; margin-top: 4px; padding: 9px 11px; font: inherit;
  border: 1px solid var(--line, #e4ece4); border-radius: 9px; background: #f7faf7;
}
.demo-banner {
  background: #fff8e6; border: 1px solid #e6d08a; color: #6b4c06;
  border-radius: 11px; padding: 11px 13px; font-size: 12.5px; margin-bottom: 16px;
}
.card-face {
  background: linear-gradient(135deg, #1f5220 0%, #4e9b4e 60%, #6fae6f 100%);
  color: #fff; border-radius: 14px; padding: 18px; margin-bottom: 16px;
  box-shadow: 0 10px 24px rgba(20, 60, 20, .28);
}
.card-net { font-weight: 800; letter-spacing: .1em; font-size: 15px; text-align: right; }
.card-num {
  font-family: ui-monospace, Consolas, monospace; font-size: 19px;
  letter-spacing: .09em; margin: 20px 0 16px;
}
.card-foot { display: flex; gap: 18px; font-size: 11px; }
.card-foot span { display: block; opacity: .75; text-transform: uppercase; letter-spacing: .06em; }
.card-foot strong { font-size: 13px; }

/* ---- wallet ---------------------------------------------------------- */
.wallet-hero { display: flex; flex-direction: column; }
.wallet-hero .balance {
  font-size: 46px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em;
  color: var(--primary, #2d6a2d); margin: 8px 0 2px;
}
.wallet-hero .bal-tag {
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--primary, #2d6a2d);
}
.last-move {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line, #e4ece4);
  font-size: 12.5px; color: var(--muted, #7a8a7a); line-height: 1.55;
}
.last-move[hidden] { display: none !important; }
.last-move .lm-head {
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted, #7a8a7a); margin-bottom: 3px;
}
.last-move .lm-amt { font-weight: 700; font-size: 14px; }
.last-move .lm-amt.out { color: #b4322c; }
.last-move .lm-amt.in { color: var(--primary, #2d6a2d); }
.last-move .lm-for { color: var(--ink, #23301f); }
.amt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.amt-chips button {
  border: 1px solid var(--line, #e4ece4); background: #fff; border-radius: 999px;
  padding: 7px 15px; font: inherit; cursor: pointer;
}
.amt-chips button.active { border-color: var(--primary, #4e9b4e); background: var(--primary-soft, #eaf4ea); }

/* ---- profile bar ------------------------------------------------------ */
.who-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; flex-wrap: wrap; }
/* Pills and the sentence after them are separate things; let them sit on one
   line and wrap as whole units rather than splitting the sentence. */
.who-bar .muted { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.who-bar h3 { margin: 0 0 4px; font-size: 19px; }
.who-av {
  width: 52px; height: 52px; flex: 0 0 52px; border-radius: 50%;
  background: linear-gradient(135deg, #1f5220, #6fae6f); color: #fff;
  display: grid; place-items: center; font-size: 22px; font-weight: 700;
}


/* ------------------------------------------------------------ notifications
   A bell beside the account chip, a count, and a toast when the count rises.
   The panel is anchored to the bell so it cannot end up off-screen on a
   narrow phone. */
.notify-wrap { position: relative; display: inline-flex; }
.notify-wrap.notify-floating { position: fixed; top: 14px; right: 16px; z-index: 940; }
.notify-bell {
  position: relative; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--line, #e3e8e2); background: #fff; color: var(--ink, #1b2a1c);
}
.notify-bell svg { width: 18px; height: 18px; display: block; }
.notify-bell:hover { background: var(--primary-soft, #eaf3e8); border-color: var(--primary, #2d6a2d); }
.notify-bell.has-new { animation: notify-ring 1.4s ease-in-out 2; }
@keyframes notify-ring {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-11deg); }
  40% { transform: rotate(9deg); }
  60% { transform: rotate(-6deg); }
  80% { transform: rotate(4deg); }
}
.notify-count {
  position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: 999px; background: #c0392b; color: #fff;
  font: 700 10.5px/17px "Public Sans", system-ui, sans-serif; text-align: center;
}
.notify-panel {
  position: absolute; top: calc(100% + 8px); right: 0; width: min(300px, 88vw);
  background: #fff; border: 1px solid var(--line, #e3e8e2); border-radius: 12px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .16); z-index: 960; overflow: hidden;
}
.notify-panel header {
  padding: 10px 13px; font: 700 12px "Public Sans", system-ui, sans-serif;
  background: #fbfdfb; border-bottom: 1px solid var(--line, #e3e8e2);
  color: var(--ink, #1b2a1c);
}
.notify-list { max-height: 300px; overflow-y: auto; }
.notify-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 13px;
  font-size: 13px; color: var(--ink, #1b2a1c); text-decoration: none;
  border-bottom: 1px solid #f2f5f1;
}
.notify-row:last-child { border-bottom: 0; }
a.notify-row:hover { background: var(--primary-soft, #eaf3e8); }
.notify-n {
  flex: 0 0 auto; min-width: 22px; height: 22px; border-radius: 6px;
  background: var(--primary, #2d6a2d); color: #fff; text-align: center;
  font: 700 12px/22px "Public Sans", system-ui, sans-serif;
}
.notify-empty { margin: 0; padding: 16px 13px; font-size: 13px; color: var(--muted, #67748e); }
.notify-toast {
  position: fixed; right: 16px; bottom: 16px; z-index: 980;
  max-width: min(360px, calc(100vw - 32px));
  padding: 12px 15px; border-radius: 10px;
  background: #1d3324; color: #fff; font-size: 13px; line-height: 1.45;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .24);
  opacity: 0; transform: translateY(10px); transition: opacity .25s, transform .25s;
}
.notify-toast.in { opacity: 1; transform: translateY(0); }
@media (max-width: 700px) {
  .notify-toast { left: 16px; right: 16px; max-width: none; bottom: 88px; }
}

/* Roles that never see the assistant do not need the clearance, and on a
   phone the sidebar is a drawer with the launcher shrunk to its icon. */
@media (max-width: 900px) {
  :root { --side-foot: 84px; }
}