/* Ledvyn — design system. Hand-authored, no framework. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Newsreader:ital@0;1&display=swap');

:root{
  color-scheme: light;
  /* brand — sampled from the Ledvyn mark */
  --brand-blue: #2f5cff;
  --brand-blue-light: #4fb6ff;
  --brand-violet: #7c4dff;
  --brand-ink: #0b0f1e;

  --bg: #f6f7fb;
  --surface: #ffffff;
  --surface-2: #fbfbfd;
  --border: #e7e8ef;
  --border-strong: #d7d9e3;

  --text: #14151f;
  --text-soft: #565a6e;
  /* Secondary text still has to be readable. The old value scored 3.20 against
     a white card — below the 4.5 minimum — which is why lists felt washed out
     rather than calm. This clears it at 4.76. */
  --text-mute: #6e7286;

  --accent: var(--brand-blue);
  --accent-soft: #eef1ff;
  --accent-ink: #1c3fd6;
  --tint-ink: #1c3fd6;

  --green: #1a9c6b; --green-soft: #e7f7f0;
  --amber: #b9790a; --amber-soft: #fdf3e2;
  --red: #d13b3b;   --red-soft: #fbebeb;
  --violet-soft: #f2edff;
  --violet-ink: #6a3fd8;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(20,21,31,.05);
  --shadow: 0 4px 16px -4px rgba(20,21,31,.10), 0 1px 2px rgba(20,21,31,.04);
  --shadow-lg: 0 16px 40px -12px rgba(20,21,31,.18);

  /* One focus treatment everywhere, so keyboard use looks deliberate rather
     than like the browser default leaking through. */
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);

  /* Row avatars are decoration, not data. A saturated disc at every row
     competes with the name beside it, so they get a tint instead. */
  --avatar-bg: color-mix(in srgb, var(--accent) 12%, var(--surface));
  --avatar-ink: var(--tint-ink);

  --sidebar-w: 236px;
  --topbar-h: 60px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Newsreader", Georgia, serif;
}

[data-theme="dark"]{
  color-scheme: dark;
  --bg: #0c0e16;
  --surface: #12141f;
  --surface-2: #171926;
  --border: #23263a;
  --border-strong: #2c3049;
  --text: #eef0fb;
  --text-soft: #a7abc4;
  --text-mute: #7d82a3; /* 4.88 on the dark card surface; was 3.80 */
  --accent-soft: #1a2350;
  --tint-ink: #9db8ff;
  --violet-ink: #b9a4ff;
  --amber: #e8a33d;
  --red: #ff6961;
  --green-soft: #0f2a22; --amber-soft: #2b230f; --red-soft: #2c1717; --violet-soft: #221a3d;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text); font-family:var(--font);
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-0.018em}

/* Figures line up in columns and stop jittering as they change — the single
   cheapest thing that makes numeric UI look considered. */
td, th, .metric, .stat-value, .kcol-sum, .kcard-value, .cell-num, .score-num,
.chip-count, .stat-num, .tl-meta, .cell-sub{ font-variant-numeric: tabular-nums; }

:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:6px; }
p{margin:0}
a{color:inherit; text-decoration:none}
button{font-family:inherit}
::selection{background:var(--accent-soft); color:var(--tint-ink)}

.icon{display:inline-flex; width:18px; height:18px; flex:none}
.icon svg{width:100%; height:100%}

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

.sidebar{
  width:var(--sidebar-w); flex:none; background:var(--surface);
  border-right:1px solid var(--border); display:flex; flex-direction:column;
  position:fixed; top:0; bottom:0; left:0; z-index:40; transition:transform .25s ease;
}
.sidebar-brand{ display:flex; align-items:center; gap:10px; padding:18px 18px 14px; }
.sidebar-brand img{ width:30px; height:30px; border-radius:8px; }
.sidebar-brand .word{ font-weight:800; font-size:17px; letter-spacing:-0.02em; }
.sidebar-brand .word b{ background:linear-gradient(100deg,var(--brand-blue),var(--brand-violet)); -webkit-background-clip:text; background-clip:text; color:transparent }

.nav{ padding:8px 12px; display:flex; flex-direction:column; gap:2px; flex:1; overflow-y:auto; }
.nav-link{
  display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:9px;
  color:var(--text-soft); font-weight:500; font-size:13.5px; cursor:pointer; transition:background .15s, color .15s;
}
.nav-link:hover{ background:var(--surface-2); color:var(--text); }
.nav-link.active{ background:var(--accent-soft); color:var(--tint-ink); font-weight:600; }
/* Menu headings, as in professional apps: small, quiet, and only as a label for the pages below them. */
.nav-group{ display:flex; align-items:center; justify-content:space-between; width:100%; background:none; border:0; font:inherit; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-mute); padding:14px 10px 4px; cursor:pointer; text-align:left; }
.nav-group:hover{ color:var(--text); }
.nav-group:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:6px; }
.nav-group{ color:var(--text); }
.nav-group > .icon{ flex:none; box-sizing:content-box; width:14px; height:14px; padding:3px; border-radius:6px; background:var(--surface-2); border:1px solid var(--border); color:var(--text); stroke-width:2.6; transition:transform .15s, background .15s; }
.nav-group:hover > .icon{ background:var(--accent-soft); border-color:var(--accent); color:var(--tint-ink); }
.nav-group.folded > .icon{ transform:rotate(-90deg); }
.sidebar-customise{ display:flex; align-items:center; gap:8px; width:100%; margin:4px 0 0; padding:6px 10px; background:none; border:0; border-radius:8px; font:inherit; font-size:12.5px; color:var(--text-mute); cursor:pointer; text-align:left; }
.sidebar-customise:hover{ background:var(--surface-2); color:var(--text); }
.sidebar-customise .icon{ width:14px; height:14px; }
.nav-link[hidden]{ display:none; }
.nav-sep{ height:1px; background:var(--border); margin:10px 6px; }
.nav-link:focus-visible{ box-shadow:var(--ring); }
.nav-link .icon{ width:16px; height:16px; }
.nav-link .icon{ color:inherit; opacity:.85 }
.nav-section{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-mute); padding:16px 12px 6px; font-weight:600; }

.sidebar-foot{ padding:12px; border-top:1px solid var(--border); }
.user-chip{ display:flex; align-items:center; gap:10px; padding:8px; border-radius:10px; cursor:pointer; }
.user-chip:hover{ background:var(--surface-2); }
.avatar{
  width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--avatar-bg); color:var(--avatar-ink); font-weight:700; font-size:12px; flex:none;
  letter-spacing:.01em;
}
/* The one avatar that identifies *you* keeps the brand gradient; the rest are
   quiet so lists read as text, not as a column of coloured discs. */
.user-chip .avatar, .avatar-brand{
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-violet)); color:#fff;
}
.user-chip .who{ min-width:0; }
.user-chip .name{ font-weight:600; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-chip .role{ font-size:11.5px; color:var(--text-mute); }

.main{ flex:1; margin-left:var(--sidebar-w); min-width:0; display:flex; flex-direction:column; }

.topbar{
  height:var(--topbar-h); border-bottom:1px solid var(--border); background:color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter:saturate(1.5) blur(8px); display:flex; align-items:center; gap:14px; padding:0 22px; position:sticky; top:0; z-index:30;
}
.menu-btn{ display:none; }
/* The page title already appears as an h1 below; up here it is orientation,
   not a headline, so it recedes. */
.topbar-title{ font-size:13.5px; font-weight:600; letter-spacing:.01em; color:var(--text-soft); }
.topbar-spacer{ flex:1 }
.icon-btn{
  width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:9px;
  border:1px solid transparent; background:transparent; color:var(--text-soft); cursor:pointer;
}
.icon-btn:hover{ background:var(--surface-2); color:var(--text); border-color:var(--border) }
/* Hidden on desktop, where the sidebar is never a dismissable drawer. */
.sidebar-close{ display:none; margin-left:auto; }
.notif-dot{ position:absolute; top:6px; right:6px; width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 0 2px var(--surface); }

.page{ padding:24px 28px 60px; max-width:1320px; width:100%; margin:0 auto; }
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.page-head h1{ font-size:23px; letter-spacing:-0.025em; }
.page-sub{ color:var(--text-mute); font-size:13px; margin-top:4px; font-weight:450; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:9px; font-weight:600; font-size:13.5px;
  border:1px solid var(--border-strong); background:var(--surface); color:var(--text); cursor:pointer; transition:all .12s ease; white-space:nowrap;
}
.btn:hover{ background:var(--surface-2); border-color:var(--border-strong); }
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ box-shadow:var(--ring); border-color:var(--accent); }
.btn:disabled{ opacity:.55; cursor:not-allowed; }
.btn:disabled:hover{ background:var(--surface); border-color:var(--border-strong); }
.btn-primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-ink); border-color:var(--accent-ink); }
.btn-ghost{ border-color:transparent; background:transparent; }
.btn-ghost:hover{ background:var(--surface-2); }
.btn-danger{ color:var(--red); border-color:var(--red-soft); }
.btn-danger:hover{ background:var(--red-soft); }
.btn-sm{ padding:5px 10px; font-size:12.5px; border-radius:7px; }
.btn .icon{ width:15px; height:15px; }

/* ---------- Cards / surfaces ---------- */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); }
.card-pad{ padding:18px 20px; }
.card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 20px; border-bottom:1px solid var(--border); }
/* Card titles are labels, not headlines — small, and set apart by letter
   spacing rather than by size. */
.card-head h3{ font-size:13px; font-weight:700; letter-spacing:.01em; }

.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.stat-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; }
.stat-top{ display:flex; align-items:center; justify-content:space-between; }
.stat-label{ color:var(--text-soft); font-size:12.5px; font-weight:600; }
.stat-icon{ width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:var(--accent-soft); color:var(--tint-ink); }
.stat-icon .icon{ width:16px; height:16px; }
.stat-value{ font-size:25px; font-weight:800; letter-spacing:-0.02em; margin-top:10px; }
.stat-delta{ display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:600; margin-top:6px; }
.stat-delta.up{ color:var(--green); } .stat-delta.down{ color:var(--red); }
.stat-delta .icon{ width:12px; height:12px; }

/* ---------- Table ---------- */
.table-wrap{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:13.5px; }
th{
  text-align:left; color:var(--text-mute); font-weight:600; font-size:11px; text-transform:uppercase;
  letter-spacing:.05em; padding:11px 14px; border-bottom:1px solid var(--border); white-space:nowrap;
  background:var(--surface); position:sticky; top:0; z-index:1;
}
th.sortable{ cursor:pointer; user-select:none; }
th.sortable:hover{ color:var(--text-soft); }
.sort-ind{ display:inline-block; height:1em; width:.72em; margin-left:6px; vertical-align:-.14em; line-height:0; }
.sort-ind svg{ display:block; width:100%; height:100%; fill:currentColor; }
.sort-ind .up, .sort-ind .down{ opacity:.28; }
.sort-ind.asc .up, .sort-ind.desc .down{ opacity:1; }
th.sortable.cell-num .sort-ind{ margin-left:6px; }
td{ padding:11px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }

/* Rows kept to one line each. Wrapping company names made every row a
   different height, which is what made long lists look ragged. */
td > .cell-name, td > .cell-sub, .cell-truncate{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;
}
tbody tr{ cursor:pointer; transition:background .1s; }
tbody tr:hover{ background:var(--surface-2); }
tbody tr:last-child td{ border-bottom:none; }
.cell-name{ font-weight:600; letter-spacing:-0.006em; }
.cell-sub{ color:var(--text-mute); font-size:12px; margin-top:1px; }
/* Money belongs on the right, where the digits line up. */
.cell-num{ text-align:right; font-weight:600; }
th.cell-num{ text-align:right; }

/* ---------- Badges / pills ----------
   Colour is a signal, and it only works while it is scarce. Filled pills are
   reserved for the one categorical field that matters per row — the stage —
   plus genuine exceptions. Everything else (priority, score, source, tags)
   uses the quiet forms below, so a row of six leads no longer reads as six
   different warnings. */
.badge{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:100px;
  font-size:11.5px; font-weight:600; white-space:nowrap; letter-spacing:.005em;
}
.badge-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }

/* Label plus a coloured dot: readable at a glance, silent at a distance. */
.tag{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500;
  color:var(--text-soft); white-space:nowrap;
}
.tag-dot{ width:6px; height:6px; border-radius:50%; background:var(--text-mute); flex:none; }
.tag-strong{ color:var(--text); font-weight:600; }
.tag-red .tag-dot{ background:var(--red); }
.tag-amber .tag-dot{ background:var(--amber); }
.tag-green .tag-dot{ background:var(--green); }
.tag-blue .tag-dot{ background:var(--accent); }

/* Outlined, colourless chip for attributes that are facts, not judgements —
   a lead source, a tag, a template name. */
.badge-quiet{
  background:transparent; color:var(--text-soft); border:1px solid var(--border-strong);
  font-weight:500;
}

/* A score is a quantity; a filled amber pill made every one look like a
   warning. A number with a short bar reads as a measurement. */
.score{ display:inline-flex; align-items:center; gap:8px; }
.score-num{ font-size:12.5px; font-weight:600; color:var(--text-soft); min-width:18px; text-align:right; }
.score-bar{ width:44px; height:4px; border-radius:100px; background:var(--surface-2); border:1px solid var(--border); overflow:hidden; }
.score-fill{ display:block; height:100%; border-radius:100px; background:var(--text-mute); }
.score-good .score-fill{ background:var(--green); }
.score-good .score-num{ color:var(--green); }
.score-mid  .score-fill{ background:var(--amber); }
.score-low  .score-fill{ background:var(--red); }
.score-low  .score-num{ color:var(--red); }

/* "Healthy" is the default state and needs no ink at all — only a lead that
   actually needs attention earns colour. */
.health-ok{ color:var(--text-mute); font-size:12px; }
.badge-blue{ background:var(--accent-soft); color:var(--tint-ink); }
.badge-green{ background:var(--green-soft); color:var(--green); }
.badge-amber{ background:var(--amber-soft); color:var(--amber); }
.badge-red{ background:var(--red-soft); color:var(--red); }
.badge-violet{ background:var(--violet-soft); color:var(--violet-ink); }
.badge-gray{ background:var(--surface-2); color:var(--text-soft); border:1px solid var(--border); }

/* ---------- Forms ---------- */
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:12.5px; font-weight:600; color:var(--text-soft); }
.input, select.input, textarea.input{
  padding:9px 11px; border-radius:8px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text);
  font-size:13.5px; font-family:inherit; width:100%; transition:border-color .12s, box-shadow .12s;
}
.input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
textarea.input{ resize:vertical; min-height:70px; }
.search-box{ position:relative; }
.search-box .icon{ position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--text-mute); }
.search-box .input{ padding-left:34px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-row{ margin-bottom:14px; }

/* ---------- Toolbar ---------- */
.toolbar{ display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.toolbar .search-box{ width:260px; }
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border-radius:8px; border:1px solid var(--border-strong);
  background:var(--surface); font-size:13px; font-weight:500; cursor:pointer; color:var(--text-soft);
}
.chip:hover{ border-color:var(--text-mute); color:var(--text); }
.chip.active{ background:var(--accent-soft); border-color:var(--accent-soft); color:var(--tint-ink); }

/* ---------- Modal ---------- */
.overlay{ position:fixed; inset:0; background:rgba(11,15,30,.44); backdrop-filter:blur(2px); z-index:100; display:flex; align-items:center; justify-content:center; padding:20px; animation:fade .15s ease; }
.modal{ background:var(--surface); border-radius:var(--radius-lg); width:100%; max-width:560px; max-height:88vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--shadow-lg); animation:pop .16s ease; }
.modal.wide{ max-width:760px; }
/* The window is a column: title bar, a body that scrolls by itself, and the button bar. The bar and the buttons are not inside the scrolling part, so no field can slide under them. The title bar takes a soft tint of the chosen look's accent. */
.modal-head{ flex:none; display:flex; align-items:center; justify-content:space-between; padding:6px 22px; border-bottom:1px solid var(--border); background:var(--accent-soft, var(--surface-2, var(--surface))); position:relative; z-index:1; }
.modal-head h3{ font-size:16px; line-height:1.25; }
.modal-body{ flex:1 1 auto; min-height:0; overflow:auto; padding:20px 22px; }
.modal-foot{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; padding:16px 22px; border-top:1px solid var(--border); flex:none; background:var(--surface); position:relative; z-index:1; }
@keyframes fade{ from{opacity:0} to{opacity:1} }
@keyframes pop{ from{opacity:0; transform:translateY(6px) scale(.98)} to{opacity:1; transform:none} }

/* ---------- Ledvyn Voice ---------- */
.voice-modal{ max-width:520px; }
.voice-state{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; }
.voice-dot{ width:8px; height:8px; border-radius:50%; background:var(--text-mute); flex:none; }
.voice-state-idle .voice-dot{ background:var(--text-mute); }
.voice-state-listening .voice-dot{ background:var(--accent); animation:voicePulse 1.4s ease-in-out infinite; }
.voice-state-processing .voice-dot{ background:var(--amber); animation:voicePulse 1s ease-in-out infinite; }
.voice-state-speaking .voice-dot{ background:var(--green); }
.voice-state-error .voice-dot{ background:var(--red); }
.voice-state-listening .voice-state-label{ color:var(--accent); }
.voice-state-error .voice-state-label{ color:var(--red); }
@keyframes voicePulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

.voice-detail{ font-size:13px; color:var(--text-soft); margin-top:8px; line-height:1.5; }
.voice-state-error + .voice-detail{ color:var(--red); }

.voice-log{ margin-top:14px; max-height:280px; overflow-y:auto; display:flex; flex-direction:column; gap:12px; }
.voice-empty{ color:var(--text-mute); font-size:12.5px; line-height:1.9; padding:8px 0; }
.voice-turn-who{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-mute); font-weight:600; margin-bottom:3px; }
.voice-turn-text{ font-size:13.5px; line-height:1.55; }
.voice-turn-user .voice-turn-text{ font-weight:500; }
.voice-turn-model .voice-turn-text{ background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:9px 12px; }

.voice-confirm{ display:flex; align-items:center; gap:12px; margin-top:14px; padding:11px 13px; border-radius:10px; background:var(--red-soft); border:1px solid var(--border); }
.voice-confirm-text{ font-size:13px; font-weight:500; flex:1; }

.voice-mic-row{ display:flex; align-items:center; gap:10px; margin-top:16px; }
.voice-text-row{ display:flex; align-items:center; gap:8px; margin-top:16px; }
.voice-mic{
  width:40px; height:40px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border-strong); background:var(--surface); color:var(--text); cursor:pointer; transition:all .15s ease;
}
.voice-mic:hover{ border-color:var(--accent); color:var(--accent); }
.voice-mic.listening{ background:var(--accent); border-color:var(--accent); color:#fff; }
.voice-mic:disabled{ opacity:.5; cursor:default; }

/* ---------- Toast ---------- */
@keyframes slideup{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }

/* ---------- Empty state ---------- */
.empty{ text-align:center; padding:60px 20px; color:var(--text-mute); }
.empty .icon{ width:34px; height:34px; margin:0 auto 12px; opacity:.5; }

/* ---------- Kanban ---------- */
.kanban{ display:flex; gap:14px; overflow-x:auto; padding-bottom:14px; align-items:flex-start; }
.drag-scroll{ cursor:grab; }
.drag-scroll.panning{ cursor:grabbing; user-select:none; }
.kanban.drag-scroll .kcard{ cursor:pointer; }
.table-wrap.drag-scroll{ cursor:auto; }
.table-wrap.drag-scroll thead th{ cursor:grab; }
.table-wrap.drag-scroll.panning, .table-wrap.drag-scroll.panning thead th{ cursor:grabbing; }
.kcol{ flex:none; width:270px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); display:flex; flex-direction:column; max-height:calc(100vh - 190px); }
.kcol-head{ padding:13px 14px 10px; display:flex; align-items:center; justify-content:space-between; }
.kcol-title{ font-weight:700; font-size:13px; display:flex; align-items:center; gap:8px; }
.kcol-count{ font-size:11.5px; color:var(--text-mute); font-weight:600; background:var(--surface); border:1px solid var(--border); padding:1px 7px; border-radius:100px; }
.kcol-sum{ font-size:11.5px; color:var(--text-mute); padding:0 14px 10px; }
.kcol-body{ padding:0 10px 10px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; flex:1; min-height:60px; }
.kcol-body.dragover{ background:var(--accent-soft); border-radius:8px; }
.kcard{ background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px 13px; cursor:grab; box-shadow:var(--shadow-sm); transition:box-shadow .12s, transform .12s; }
.kcard:hover{ box-shadow:var(--shadow); }
.kcard.dragging{ opacity:.4; }
.kcard-name{ font-weight:600; font-size:13.5px; margin-bottom:3px; }
.kcard-org{ color:var(--text-mute); font-size:12px; margin-bottom:10px; }
.kcard-foot{ display:flex; align-items:center; justify-content:space-between; }
.kcard-value{ font-weight:700; font-size:12.5px; color:var(--tint-ink); }
.kadd{ padding:9px; text-align:left; color:var(--text-mute); font-size:12.5px; font-weight:600; border-radius:8px; cursor:pointer; margin:0 10px 10px; }
.kadd:hover{ background:var(--surface); color:var(--text); }

/* ---------- Analytics charts ---------- */
.chart-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; }
.legend{ display:flex; gap:16px; flex-wrap:wrap; margin-top:12px; }
.legend-item{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-soft); }
.legend-swatch{ width:9px; height:9px; border-radius:2px; }
.axis-label{ font-size:10.5px; fill:var(--text-mute); }
.grid-line{ stroke:var(--border); stroke-width:1; }

/* ---------- Misc ---------- */
.grid-2{ display:grid; grid-template-columns:1.4fr 1fr; gap:16px; }
.divider{ height:1px; background:var(--border); margin:16px 0; }
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:18px; }
.tab{ padding:9px 4px; margin-right:18px; font-weight:600; font-size:13px; color:var(--text-mute); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .15s ease, border-color .15s ease; }
.tab.active{ color:var(--text); border-color:var(--accent); }
.timeline{ display:flex; flex-direction:column; }
.tl-item{ display:flex; gap:12px; padding-bottom:18px; position:relative; }
.tl-item:not(:last-child)::before{ content:""; position:absolute; left:14px; top:30px; bottom:0; width:1px; background:var(--border); }
.tl-dot{ width:29px; height:29px; border-radius:50%; background:var(--accent-soft); color:var(--tint-ink); display:flex; align-items:center; justify-content:center; flex:none; }
.tl-dot .icon{ width:14px; height:14px; }
.tl-text{ font-size:13px; padding-top:4px; }
.tl-meta{ color:var(--text-mute); font-size:11.5px; margin-top:2px; }

.progress{ height:6px; background:var(--surface-2); border:1px solid var(--border); border-radius:100px; overflow:hidden; }
.progress > div{ height:100%; background:linear-gradient(90deg,var(--brand-blue),var(--brand-violet)); border-radius:100px; }

.switch{ width:38px; height:22px; border-radius:100px; background:var(--border-strong); position:relative; cursor:pointer; flex:none; transition:background .15s; }
.switch.on{ background:var(--accent); }
.switch i{ position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .15s; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.switch.on i{ transform:translateX(16px); }

.settings-nav{ display:flex; flex-direction:column; gap:2px; }
.settings-row{ display:flex; align-items:center; justify-content:space-between; padding:13px 0; border-bottom:1px solid var(--border); gap:16px; }
.settings-row:last-child{ border-bottom:none; }
.settings-row .lbl{ font-weight:600; font-size:13.5px; }
.settings-row .desc{ font-size:12px; color:var(--text-mute); margin-top:2px; }

/* ---------- Activity timeline ---------- */
/* The composer: a type tab bar, one text box, and only the extra fields that
   the chosen type actually needs. */
.composer{ border:1px solid var(--border); border-radius:var(--radius); background:var(--surface-2); margin-bottom:20px; overflow:hidden; }
.composer-tabs{ display:flex; gap:2px; padding:6px 6px 0; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.composer-tab{
  display:inline-flex; align-items:center; gap:6px; padding:7px 11px; font-size:12.5px; font-weight:600;
  color:var(--text-soft); background:transparent; border:none; border-radius:8px 8px 0 0; cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .12s, background .12s;
}
.composer-tab:hover{ color:var(--text); background:var(--surface); }
.composer-tab.active{ color:var(--tint-ink); background:var(--surface); border-bottom-color:var(--accent); }
.composer-tab .icon{ width:13px; height:13px; }
.composer-text{ border:none; border-radius:0; background:var(--surface); resize:vertical; min-height:62px; }
.composer-text:focus{ box-shadow:none; outline:none; }
.composer-text.invalid{ box-shadow:inset 0 0 0 1px var(--red); }
.composer-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 10px; background:var(--surface); border-top:1px solid var(--border); flex-wrap:wrap; }
.composer-extras{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.composer-actions{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.composer-hint{ font-size:11px; color:var(--text-mute); }
.composer-when{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-mute); }
/* `select.input` outranks a plain `.input-sm`, so these need the extra
   specificity or every dropdown stretches to the full row. */
.composer-extras .input-sm,
.composer-extras select.input-sm,
.composer-extras input.input-sm{
  padding:6px 9px; font-size:12.5px; width:auto; flex:0 0 auto; min-width:0;
}
.composer-extras select.input-sm{ max-width:170px; }
.composer-extras input[type="number"].input-sm{ width:88px; }
.composer-extras input[type="text"].input-sm{ width:150px; }
.composer-extras input[type="datetime-local"].input-sm{ width:auto; }

/* Day headers group the feed so scanning it doesn't mean reading timestamps. */
.tl-filters{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.chip-count{ margin-left:5px; opacity:.6; font-variant-numeric:tabular-nums; }
.tl-day{
  display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; letter-spacing:.03em;
  text-transform:uppercase; color:var(--text-mute); padding:4px 0 12px;
}
.tl-day .icon{ width:12px; height:12px; color:var(--amber); }
.tl-day-pinned{ color:var(--amber); }
.timeline + .tl-day{ padding-top:8px; border-top:1px solid var(--border); margin-top:2px; }

.tl-item{ align-items:flex-start; }
.tl-body{ flex:1; min-width:0; }
.tl-item-pinned{ background:var(--amber-soft); border-radius:10px; padding:8px 10px 14px; margin:0 -10px 6px; }
.tl-item-pinned::before{ display:none; }
.tl-text{ white-space:pre-wrap; word-break:break-word; line-height:1.5; }
.tl-detail{ font-size:12px; color:var(--text-soft); margin-top:4px; }
.tl-meta{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.tl-kind{ font-weight:700; color:var(--text-soft); }
.tl-sep{ opacity:.5; }
.tl-edited{ font-style:italic; }
.tl-link{ color:var(--tint-ink); font-weight:600; }
.tl-subject{ font-weight:600; color:var(--text-soft); }
.tl-link:hover{ text-decoration:underline; }
.tl-who{ flex:none; padding-top:3px; }

/* Colour-coded dots make the kind readable before the text is. */
.tl-dot-blue{ background:var(--accent-soft); color:var(--tint-ink); }
.tl-dot-green{ background:var(--green-soft); color:var(--green); }
.tl-dot-amber{ background:var(--amber-soft); color:var(--amber); }
.tl-dot-violet{ background:var(--violet-soft); color:var(--violet-ink); }
.tl-dot-gray{ background:var(--surface-2); color:var(--text-soft); border:1px solid var(--border); }

/* Row actions stay out of the way until the row is hovered or focused. */
.tl-actions{ display:flex; gap:2px; flex:none; opacity:0; transition:opacity .12s; }
.tl-item:hover .tl-actions, .tl-actions:focus-within{ opacity:1; }
.tl-item-pinned .tl-actions{ opacity:1; }
.tl-act{ width:26px; height:26px; }
.tl-act .icon{ width:13px; height:13px; }
.tl-act-on{ color:var(--amber); }
.tl-act-danger:hover{ color:var(--red); }
.tl-edit{ margin-top:6px; }
.tl-edit-row{ display:flex; gap:8px; justify-content:flex-end; margin-top:8px; }
.timeline-empty{ color:var(--text-mute); font-size:13px; padding:18px 0; }

/* Activity page: counts per kind, and the pager under the feed. */
.stat-row{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.stat-tile{
  display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius); flex:1 1 130px;
}
.stat-num{ font-size:19px; font-weight:800; letter-spacing:-0.02em; }
.stat-icon-blue{ background:var(--accent-soft); color:var(--tint-ink); }
.stat-icon-green{ background:var(--green-soft); color:var(--green); }
.stat-icon-amber{ background:var(--amber-soft); color:var(--amber); }
.stat-icon-violet{ background:var(--violet-soft); color:var(--violet-ink); }
.stat-icon-gray{ background:var(--surface-2); color:var(--text-soft); }
.pager{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; border-top:1px solid var(--border); }

@media (max-width: 620px){
  /* On a narrow screen the actions and avatar sitting beside the text squeeze
     it to a few words per line, so the text keeps the row and the actions drop
     underneath it. They are always visible because there is no hover here. */
  .tl-item{ flex-wrap:wrap; }
  .tl-body{ flex:1 1 auto; }
  .tl-actions{ opacity:1; order:3; flex-basis:100%; justify-content:flex-end; margin-top:-4px; }
  .tl-who{ display:none; }
  .composer-extras{ width:100%; }
  .composer-actions{ width:100%; justify-content:flex-end; }
}

/* Simple mode drops the colour coding and the per-entry actions clutter. */
body[data-density="simple"] .composer-extras{ gap:6px; }
body[data-density="simple"] .tl-item-pinned{ background:var(--surface-2); }

/* ---------- Connection banner ---------- */
/* Fixed to the bottom so it never pushes the layout around, and above
   everything because it explains why the rest has stopped working. */
.conn-banner{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  display:flex; align-items:center; gap:12px; z-index:9000;
  padding:11px 14px; border-radius:12px; max-width:min(560px, calc(100vw - 28px));
  background:var(--red-soft); border:1px solid var(--red); color:var(--text);
  box-shadow:0 10px 30px rgba(0,0,0,.16);
  animation:conn-in .18s ease-out;
}
@keyframes conn-in{ from{ opacity:0; transform:translate(-50%, 8px); } to{ opacity:1; transform:translate(-50%,0); } }
@media (prefers-reduced-motion: reduce){ .conn-banner{ animation:none; } }
.conn-icon{ display:flex; color:var(--red); flex:none; }
.conn-icon .icon{ width:17px; height:17px; }
.conn-text{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.conn-status{ font-weight:700; font-size:13px; }
.conn-hint{ font-size:11.5px; color:var(--text-soft); }
.conn-retry{ flex:none; margin-left:4px; }
.conn-checking .conn-retry{ opacity:.6; pointer-events:none; }

/* ---------- Custom properties ---------- */
.prop-list{ display:flex; flex-direction:column; }
.prop-row{
  display:flex; align-items:center; gap:12px; padding:12px 0;
  border-bottom:1px solid var(--border);
}
.prop-row:last-child{ border-bottom:none; }
.prop-main{ flex:1; min-width:0; }
.prop-actions{ display:flex; gap:2px; flex:none; opacity:.85; transition:opacity .12s; }
.prop-row:hover .prop-actions, .prop-actions:focus-within{ opacity:1; }
@media (max-width: 620px){ .prop-actions{ opacity:1; } }

/* A checkbox labels itself, so it sits inline rather than under a label. */
.check-row{ display:flex; align-items:center; gap:9px; font-size:13.5px; cursor:pointer; padding:6px 0; }
.check-row input{ width:16px; height:16px; accent-color:var(--accent); cursor:pointer; }

/* Section heading inside a form, between groups of fields. */
.form-section{
  font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-mute); font-weight:700; margin-top:4px;
}

/* ---------- Smart list builder ---------- */
.sl-rows{ display:flex; flex-direction:column; gap:9px; margin:14px 0 4px; }
.sl-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* "Where … and …" reads as a sentence, so the joiner is a fixed-width column
   rather than floating with the controls. */
.sl-join{ font-size:12px; color:var(--text-mute); min-width:44px; flex:none; }
.sl-suffix{ font-size:12px; color:var(--text-mute); }
.sl-row select.input-sm{ width:auto; max-width:190px; padding:6px 9px; font-size:12.5px; }
.sl-row input.input-sm{ width:auto; max-width:170px; padding:6px 9px; font-size:12.5px; }
.sl-remove{ width:26px; height:26px; margin-left:auto; }
.sl-remove .icon{ width:12px; height:12px; }
.sl-add{ align-self:flex-start; margin-top:2px; }
.sl-preview{ margin-top:14px; padding-top:12px; border-top:1px solid var(--border); font-weight:600; }
.sl-preview-bad{ color:var(--red); }
.views-bar .chip .icon{ width:13px; height:13px; }

@media (max-width: 620px){
  .sl-row select.input-sm, .sl-row input.input-sm{ max-width:none; flex:1 1 130px; }
  .sl-join{ min-width:0; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .sidebar{ transform:translateX(-100%); box-shadow:var(--shadow-lg); }
  .sidebar.open{ transform:none; }
  .sidebar-close{ display:flex; }
  .main{ margin-left:0; }
  .menu-btn{ display:flex; }
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
  .grid-2{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .page{ padding:18px 16px 50px; }
  .backdrop{ position:fixed; inset:0; background:rgba(11,15,30,.4); z-index:39; }
}
@media (max-width: 600px){
  .stat-grid{ grid-template-columns:1fr 1fr; }
  .toolbar .search-box{ width:100%; }

  /* The page header's action buttons sat on one unbreakable row and pushed
     the whole document sideways, so the primary action ("New lead") was
     half off-screen and every page scrolled horizontally. */
  .page-head{ align-items:flex-start; }
  .page-head > div{ min-width:0; max-width:100%; flex-wrap:wrap; }
  .page-head .btn{ flex:1 1 auto; justify-content:center; }

  /* Same story in the top bar: the bell was pushed past the right edge. */
  .topbar{ padding:0 12px; gap:8px; }
  .topbar .btn{ padding:7px 10px; }
}

/* Nothing may make the document itself scroll sideways. Wide content — tables,
   boards, code — scrolls inside its own container instead. */
body{ overflow-x:hidden; }
.table-wrap{ max-width:100%; }

/* ---------- Simple mode: lower density, fewer decorative flourishes ---------- */
[data-density="simple"]{
  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: 0 4px 16px rgba(0,0,0,.18);
}
[data-density="simple"] .sidebar-brand .word b{ background:none; -webkit-background-clip:unset; background-clip:unset; color:var(--accent); }
[data-density="simple"] .avatar{ background:var(--accent); }
[data-density="simple"] .progress > div{ background:var(--accent); }
[data-density="simple"] .topbar{ backdrop-filter:none; background:var(--bg); }
[data-density="simple"] .card, [data-density="simple"] .stat-card, [data-density="simple"] .chart-card, [data-density="simple"] .kcard{ box-shadow:none; }
[data-density="simple"] .kcard:hover{ box-shadow:none; }
[data-density="simple"] .card-pad{ padding:14px 16px; }
[data-density="simple"] .stat-card{ padding:13px 16px; }
[data-density="simple"] .page{ padding:20px 24px 50px; }
[data-density="simple"] *, [data-density="simple"] *::before, [data-density="simple"] *::after{
  animation-duration:.001s !important; animation-delay:0s !important; transition-duration:.001s !important;
}

/* ---------- Auth screen + signup splash animations ---------- */
@keyframes authFadeIn{ from{opacity:0} to{opacity:1} }
@keyframes authCardIn{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)} }
@keyframes authErrorIn{ from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:translateY(0)} }

.auth-page{ min-height:100vh; display:flex; animation:authFadeIn .35s ease both; }
.auth-card{ position:relative; z-index:1; width:100%; max-width:400px; animation:authCardIn .4s cubic-bezier(.16,1,.3,1) both; }
.auth-error{ opacity:0; }
.auth-error.show{ animation:authErrorIn .22s ease both; }

/* ---------- Auth brand panel ---------- */
.auth-brand-panel{
  position:relative; overflow:hidden; flex:1 1 46%; min-width:0; display:flex; align-items:center; justify-content:center;
  padding:48px; color:#fff;
  background:
    radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--brand-blue) 40%, transparent), transparent 60%),
    radial-gradient(circle at 84% 78%, color-mix(in srgb, var(--brand-violet) 40%, transparent), transparent 58%),
    var(--brand-ink);
}
.auth-brand-content{ position:relative; z-index:1; max-width:380px; display:flex; flex-direction:column; gap:18px; }
.auth-brand-content .sidebar-brand .word{ color:#fff; }
.auth-tagline{ font-family:var(--font-serif); font-style:italic; font-weight:500; font-size:32px; line-height:1.25; letter-spacing:-0.01em; margin:6px 0 0; color:#fff; }
.auth-subtitle{ font-size:14px; line-height:1.6; color:rgba(255,255,255,.72); margin:0; }
.auth-feature-list{ display:flex; flex-direction:column; gap:12px; margin-top:8px; }
.auth-feature{ display:flex; align-items:center; gap:11px; font-size:13.5px; font-weight:500; color:rgba(255,255,255,.9); }
.auth-feature-icon{ display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; background:rgba(255,255,255,.12); flex:none; }
.auth-feature-icon .icon{ width:15px; height:15px; }

.auth-form-panel{ flex:1 1 54%; display:flex; align-items:center; justify-content:center; background:var(--bg); padding:32px 20px; }
.auth-form-head h2{ font-size:20px; margin-bottom:4px; }
.auth-form-head{ margin-bottom:20px; }
.auth-tabs{ display:flex; background:var(--surface-2); border-radius:100px; padding:4px; gap:4px; margin-bottom:20px; }
.auth-tab{ flex:1; text-align:center; padding:8px 0; border-radius:100px; font-weight:600; font-size:13px; color:var(--text-soft); cursor:pointer; transition:background .2s ease, color .2s ease; }
.auth-tab.active{ background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm); }

@media (max-width: 640px){
  .auth-brand-panel{ display:none; }
  .auth-form-panel{ flex:1 1 100%; }
}

/* ---------- Auth background bubbles ---------- */
.auth-bubbles{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.auth-bubble{
  position:absolute; border-radius:50%; opacity:.16; filter:blur(7px);
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-violet));
  animation:bubbleFloat ease-in-out infinite;
}
@keyframes bubbleFloat{
  0%  { transform:translate(0,0); }
  25% { transform:translate(5px,-9%); }
  50% { transform:translate(0,-18%); }
  75% { transform:translate(-5px,-9%); }
  100%{ transform:translate(0,0); }
}

/* ---------- Signup splash ---------- */
.splash-screen{
  position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center;
  background:var(--bg); transition:opacity .35s ease;
}
.splash-screen.leaving{ opacity:0; }
.splash-brand{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.splash-logo{
  width:64px; height:64px; border-radius:16px; opacity:0; transform:scale(.8);
  animation:splashLogoIn .6s cubic-bezier(.16,1,.3,1) .1s both;
}
.splash-word{
  font-weight:800; font-size:30px; letter-spacing:-0.02em; opacity:0; transform:translateY(8px);
  animation:splashWordIn .5s cubic-bezier(.16,1,.3,1) .45s both;
}
.splash-word b{ background:linear-gradient(100deg,var(--brand-blue),var(--brand-violet)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.splash-underline{
  width:0; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--brand-blue),var(--brand-violet));
  animation:splashUnderlineIn .5s cubic-bezier(.4,0,.2,1) .85s both;
}
@keyframes splashLogoIn{ from{opacity:0; transform:scale(.8)} 70%{opacity:1; transform:scale(1.05)} to{opacity:1; transform:scale(1)} }
@keyframes splashWordIn{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)} }
@keyframes splashUnderlineIn{ from{width:0} to{width:64px} }

@media (prefers-reduced-motion: reduce){
  .auth-page, .auth-card, .auth-error.show, .auth-bubble,
  .splash-logo, .splash-word, .splash-underline{ animation:none !important; }
  .splash-screen{ transition:none !important; }
}

/* ---------------- Command palette (Ctrl+K) ---------------- */
.cmdk-overlay{ align-items:flex-start; padding-top:12vh; }
.cmdk{
  width:100%; max-width:600px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden; animation:pop .16s ease;
}
.cmdk-head{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border); }
.cmdk-head .icon{ color:var(--text-mute); flex:none; }
.cmdk-input{
  flex:1; border:none; background:none; outline:none; color:var(--text);
  font-family:inherit; font-size:15px;
}
.cmdk-input::placeholder{ color:var(--text-mute); }
.cmdk-list{ max-height:min(52vh,420px); overflow:auto; padding:6px; }
.cmdk-group{ padding:4px 0; }
.cmdk-group-label{
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-mute); padding:6px 10px 4px;
}
.cmdk-item{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px;
  cursor:pointer; font-size:14px; color:var(--text);
}
.cmdk-item.active{ background:var(--accent-soft); color:var(--tint-ink); }
.cmdk-item-icon{ display:flex; color:var(--text-mute); flex:none; }
.cmdk-item.active .cmdk-item-icon{ color:var(--tint-ink); }
.cmdk-item-label{ flex:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60%; }
.cmdk-item-sub{
  margin-left:auto; font-size:12.5px; color:var(--text-mute);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:38%;
}
.cmdk-empty{ padding:26px; text-align:center; color:var(--text-mute); font-size:14px; }
.cmdk-foot{
  display:flex; align-items:center; gap:14px; padding:9px 14px; border-top:1px solid var(--border);
  background:var(--surface-2); font-size:11.5px; color:var(--text-mute);
}
.cmdk-foot span{ display:flex; align-items:center; gap:5px; }
.cmdk-foot-end{ margin-left:auto; }
.cmdk-kbd{
  font-family:inherit; font-size:10.5px; font-weight:600; line-height:1; padding:3px 5px;
  border:1px solid var(--border); border-bottom-width:2px; border-radius:5px;
  background:var(--surface); color:var(--text-mute);
}
.topbar-search{ gap:8px; color:var(--text-soft); }
.topbar-search .cmdk-kbd{ background:var(--surface-2); }
@media (max-width: 700px){ .topbar-search-label, .topbar-search .cmdk-kbd{ display:none; } }

/* ---------------- Saved views ---------------- */
.views-bar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.views-bar .chip{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.chip-x{ color:var(--text-mute); font-size:15px; line-height:1; padding:0 1px; border-radius:4px; }
.chip-x:hover{ color:var(--red); }
.chip-add{ border-style:dashed; font-family:inherit; }

/* ---------------- Bulk actions + health + productivity ---------------- */
.col-check{ width:34px; padding-right:0 !important; }
.col-check input{ cursor:pointer; accent-color:var(--accent); }
tr.row-selected{ background:var(--accent-soft); }
.bulk-bar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px;
  padding:10px 14px; border:1px solid var(--accent); border-radius:var(--radius);
  background:var(--accent-soft);
}
.bulk-count{ font-size:13px; font-weight:700; color:var(--tint-ink); margin-right:2px; }

.prod-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:16px 20px; }
.prod-stat{ display:flex; flex-direction:column; gap:2px; }
.prod-stat b{ font-size:22px; font-weight:800; letter-spacing:-0.02em; }
.prod-stat span{ font-size:12.5px; color:var(--text-soft); }
@media (max-width: 720px){ .prod-row{ grid-template-columns:repeat(2,1fr); } }

/* ---------------- Usability pass ---------------- */

/* Keyboard users get a visible ring; mouse users never see it. */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }
.btn:focus-visible, .icon-btn:focus-visible, .chip:focus-visible{ outline-offset:3px; }
.input:focus-visible{ outline:none; }

/* Long tables keep their column headings in view while scrolling. */
.table-wrap{ position:relative; }
thead th{ position:sticky; top:0; z-index:2; background:var(--surface); }
tbody tr:focus-visible{ background:var(--surface-2); }
/* Numbers read better right-aligned and in tabular figures. */
td.num, th.num{ text-align:right; font-variant-numeric:tabular-nums; }

/* Skeletons */
.skeleton-wrap .sk-head{ height:26px; width:190px; margin-bottom:18px; }
.sk{ background:var(--surface-2); border-radius:7px; animation:skPulse 1.4s ease-in-out infinite; }
.sk-row{ display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid var(--border); }
.sk-row:last-child{ border-bottom:none; }
.sk-avatar{ width:30px; height:30px; border-radius:50%; flex:none; }
.sk-line{ height:12px; flex:1; max-width:340px; }
.sk-pill{ height:20px; width:74px; border-radius:100px; flex:none; }
@keyframes skPulse{ 0%,100%{ opacity:1 } 50%{ opacity:.45 } }

/* Empty states that tell you what to do next */
.empty-state{ padding:52px 24px; }
.empty-icon{
  width:44px; height:44px; margin:0 auto 14px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); color:var(--text-soft); opacity:1;
}
.empty-icon .icon{ width:21px; height:21px; margin:0; opacity:1; }
.empty-title{ font-size:15.5px; font-weight:650; color:var(--text); }
.empty-msg{ margin-top:6px; font-size:13.5px; color:var(--text-mute); max-width:42ch; margin-inline:auto; line-height:1.55; }
.empty-actions{ display:flex; gap:10px; justify-content:center; margin-top:20px; flex-wrap:wrap; }

/* Active-filter summary */
.filter-note{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:-4px 0 14px; font-size:13px; color:var(--text-soft);
}
.filter-note .btn-sm{ padding:4px 10px; }

/* Field-level validation, so errors appear next to the input */
.field-error{ margin-top:6px; font-size:12.5px; color:var(--red); }
.input.invalid{ border-color:var(--red); }
.input.invalid:focus{ box-shadow:0 0 0 3px var(--red-soft); }

/* Comfortable tap targets on touch screens */
@media (max-width: 620px){
  .icon-btn{ min-width:38px; min-height:38px; }
  .toolbar .input, .toolbar select.input{ width:100%; }
  .toolbar .search-box{ width:100%; }
}

/* ---------------- Today's Priorities & Lead Rescue ---------------- */

/* Card headings in these sections carry a leading icon. */
.card-head h3{ display:flex; align-items:center; gap:8px; }
.card-head h3 .icon{ width:16px; height:16px; color:var(--text-mute); }

/* Priorities: the first thing on the dashboard, so it gets an accent edge. */
.prio-card{ margin-bottom:16px; border-color:var(--border-strong); box-shadow:var(--shadow-sm); }
.prio-card .card-head h3 .icon{ color:var(--accent); }

.prio-row{
  display:flex; align-items:center; gap:14px; padding:13px 20px; cursor:pointer;
  border-bottom:1px solid var(--border); transition:background .12s ease;
}
.prio-list > .prio-row:last-child{ border-bottom:none; }
.prio-row:hover{ background:var(--surface-2); }
.prio-rank{
  flex:none; width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; font-size:11.5px; font-weight:700;
  background:var(--surface-2); color:var(--text-soft); border:1px solid var(--border);
}
.prio-row:first-child .prio-rank{ background:var(--accent); border-color:var(--accent); color:#fff; }
.prio-main{ flex:1; min-width:0; }
.prio-title{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  font-size:14px; font-weight:600; color:var(--text);
}
.prio-value{ font-size:12.5px; font-weight:700; color:var(--tint-ink); font-variant-numeric:tabular-nums; }
.prio-meta{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:4px; }
.prio-actions{ display:flex; align-items:center; gap:6px; flex:none; }

/* Rescue: same row rhythm, with the reasons spelled out. */
.rescue-row{
  display:flex; align-items:center; gap:13px; padding:13px 20px; cursor:pointer;
  border-bottom:1px solid var(--border); transition:background .12s ease;
}
.rescue-list > .rescue-row:last-child{ border-bottom:none; }
.rescue-row:hover{ background:var(--surface-2); }
.rescue-main{ flex:1; min-width:0; }
.rescue-name{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; font-size:14px; }
.rescue-name b{ font-weight:600; }
.rescue-reasons{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:5px; }
.rescue-reason{ font-size:12.5px; color:var(--text-soft); }
.rescue-reason + .rescue-reason::before{ content:"·"; margin-right:8px; color:var(--text-mute); }
.rescue-right{ display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex:none; }
.rescue-value{ font-size:13.5px; font-weight:700; font-variant-numeric:tabular-nums; }
.rescue-actions{ flex:none; }

@media (max-width: 760px){
  .prio-row, .rescue-row{ flex-wrap:wrap; }
  .prio-actions, .rescue-actions{ width:100%; padding-left:38px; }
  .rescue-right{ align-items:flex-start; flex-direction:row; gap:10px; }
}

/* Boot failure notice — must not depend on anything that might have failed */
.boot-error{
  max-width:620px; margin:12vh auto; padding:32px;
  background:var(--surface, #fff); color:var(--text, #14151f);
  border:1px solid var(--border, #e7e8ef); border-radius:14px;
  font-family:"Inter", -apple-system, "Segoe UI", sans-serif;
}
.boot-error h1{ font-size:20px; margin:0 0 10px; }
.boot-error p{ font-size:14px; color:var(--text-soft, #565a6e); line-height:1.6; margin:0 0 14px; }
.boot-error pre{
  font-size:12.5px; padding:12px 14px; border-radius:9px; overflow-x:auto;
  background:var(--surface-2, #f6f7fb); border:1px solid var(--border, #e7e8ef);
  color:var(--red, #d93a42); white-space:pre-wrap; word-break:break-word;
}
.boot-error-actions{ display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 4px; }
.boot-error-hint{ font-size:12.5px; color:var(--text-mute, #8b8fa3); }

/* Sidebar search affordance */
.sidebar-hint{
  display:flex; align-items:center; gap:8px; width:100%; margin-bottom:10px;
  padding:8px 10px; border-radius:9px; cursor:pointer;
  border:1px solid var(--border); background:var(--surface-2);
  font-family:inherit; font-size:13px; font-weight:500; color:var(--text-soft);
  transition:border-color .15s ease, color .15s ease;
}
.sidebar-hint:hover{ border-color:var(--text-mute); color:var(--text); }
.sidebar-hint .icon{ width:15px; height:15px; flex:none; }
.sidebar-hint span{ flex:1; text-align:left; }

@media (prefers-reduced-motion: reduce){
  .sk{ animation:none !important; }
}

/* ---------------- Deal radar ---------------- */
.radar-btn{ gap:7px; color:var(--text-soft); }
/* A count of deals worth looking at is information, not a failure — red made
   it read as something broken. */
.radar-btn #radar-count{
  padding:1px 6px; font-size:10.5px; background:var(--accent-soft);
  color:var(--tint-ink); border:none;
}
@media (max-width: 760px){ .radar-btn-label{ display:none; } }

.radar-summary{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 16px; margin-bottom:18px; border-radius:var(--radius);
  background:var(--surface-2); border:1px solid var(--border);
}
.radar-summary strong{ font-size:19px; font-weight:800; letter-spacing:-0.02em; display:block; }
.radar-summary .cell-sub{ display:block; margin-top:2px; }

.radar-section + .radar-section{ margin-top:26px; }
.radar-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:8px; }
.radar-head h4{ margin:0; font-size:14px; font-weight:700; }

.radar-row{
  display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:10px;
  border:1px solid transparent; cursor:pointer;
}
.radar-row:hover{ background:var(--surface-2); border-color:var(--border); }
.radar-main{ flex:1; min-width:0; }
.radar-name{ display:flex; align-items:baseline; gap:8px; font-size:13.5px; font-weight:600; }
.radar-name .cell-sub{ font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.radar-reasons{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.radar-right{ display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex:none; }
.radar-value{ font-size:13.5px; font-weight:700; }

/* ---------------- Voice output controls ---------------- */
.voice-foot{ justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.voice-out{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
/* Type selector needed: `.input, select.input` already sets a full width. */
select.voice-picker{ flex:0 1 auto; width:auto; min-width:0; max-width:148px; font-size:12.5px; padding:6px 8px; }
select.voice-rate{ flex:none; width:68px; font-size:12.5px; padding:6px 6px; }
@media (max-width: 620px){
  select.voice-picker{ max-width:120px; }
  .voice-out .cell-sub{ display:none; }
}
.chip-add .icon{ width:13px; height:13px; }

/* ---------------- GUI polish pass ---------------- */

/* Custom scrollbars — the app had none anywhere (kanban, tables, sidebar nav,
   modal bodies, voice log), so every scrollable area fell back to the OS's
   default scrollbar, which looked out of place next to an otherwise custom
   UI. Thin and themed, for both engines. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 100px;
  border: 2px solid var(--bg);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-mute); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* Active nav item: a background tint alone reads a little flat next to the
   rest of the app's accent usage — a short left bar matches how the active
   tab/underline pattern is used elsewhere (auth tabs, topbar search). */
.nav-link { position: relative; }
.nav-link.active::before {
  content: ""; position: absolute; left: -12px; top: 50%; translate: 0 -50%;
  width: 3px; height: 16px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--brand-blue), var(--brand-violet));
}

/* A quiet pulse on the unread-notifications dot, so it reads as "new" rather
   than just another static UI element. Off under reduced motion, same as
   every other looping animation in the app. */
.notif-dot { animation: notifPulse 2.2s ease-in-out infinite; }
@keyframes notifPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 55%, transparent), 0 0 0 2px var(--surface); }
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 0%, transparent), 0 0 0 2px var(--surface); }
}

@media (prefers-reduced-motion: reduce) {
  .notif-dot { animation: none; }
}

/* ---------------- Workspace template picker ---------------- */
.tpl-picker{ display:flex; flex-direction:column; gap:14px; }
.tpl-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.tpl-grid-compact{ grid-template-columns:repeat(2,1fr); gap:8px; }

.tpl-card{
  display:flex; align-items:flex-start; gap:11px; text-align:left; cursor:pointer;
  padding:13px 14px; border-radius:11px; font-family:inherit;
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
  position:relative;
}
.tpl-card:hover{ border-color:var(--border-strong); background:var(--surface-2); }
.tpl-card.is-selected{
  border-color:var(--accent); background:var(--accent-soft);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}
.tpl-icon{
  width:30px; height:30px; flex:none; border-radius:8px; display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); color:var(--text-soft); border:1px solid var(--border);
}
.tpl-card.is-selected .tpl-icon{ background:var(--surface); color:var(--tint-ink); border-color:transparent; }
.tpl-icon .icon{ width:15px; height:15px; }
.tpl-body{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.tpl-name{ font-weight:650; font-size:13.5px; }
.tpl-card.is-selected .tpl-name{ color:var(--tint-ink); }
.tpl-tagline{ font-size:12px; color:var(--text-mute); }
.tpl-desc{ font-size:12.5px; color:var(--text-soft); line-height:1.5; margin-top:4px; }
.tpl-check{ display:none; flex:none; color:var(--tint-ink); }
.tpl-check .icon{ width:15px; height:15px; }
.tpl-card.is-selected .tpl-check{ display:flex; }

/* What the choice actually produces, so it isn't a name to guess at. */
.tpl-preview{
  border:1px dashed var(--border-strong); border-radius:10px;
  padding:11px 13px; background:var(--surface-2); display:flex; flex-direction:column; gap:6px;
}
.tpl-preview-row{ display:flex; gap:10px; align-items:baseline; font-size:12.5px; }
.tpl-preview-label{
  flex:none; width:62px; font-weight:650; color:var(--text-mute);
  text-transform:uppercase; letter-spacing:.04em; font-size:10.5px;
}
.tpl-preview-value{ color:var(--text-soft); }

@media (max-width: 620px){
  .tpl-grid, .tpl-grid-compact{ grid-template-columns:1fr; }
}

/* ---------------- Email verification banner ---------------- */
.verify-banner{
  display:flex; align-items:center; gap:12px;
  padding:11px 22px; border-bottom:1px solid var(--border);
  background:var(--amber-soft); color:var(--text);
}
.verify-icon{ display:flex; flex:none; color:var(--amber); }
.verify-icon .icon{ width:17px; height:17px; }
.verify-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.verify-text b{ font-size:13px; font-weight:650; }
.verify-text span{ font-size:12.5px; color:var(--text-soft); }
@media (max-width: 620px){
  .verify-banner{ padding:10px 16px; flex-wrap:wrap; }
  .verify-text{ flex-basis:100%; order:-1; }
}

/* ---------------- Inbox ---------------- */
.nav-badge{
  margin-left:auto; min-width:18px; height:18px; padding:0 6px; border-radius:9px;
  align-items:center; justify-content:center; font-size:11px; font-weight:700;
  background:var(--red); color:#fff; font-variant-numeric:tabular-nums;
}
.inbox-icon{ width:30px; height:30px; border-radius:8px; flex:none; display:flex; align-items:center; justify-content:center; }
.inbox-icon .icon{ width:16px; height:16px; }
.inbox-icon-red{ background:var(--red-soft); color:var(--red); }
.inbox-icon-amber{ background:var(--amber-soft); color:var(--amber); }
.inbox-icon-blue{ background:var(--accent-soft); color:var(--tint-ink); }
.inbox-icon-violet{ background:var(--violet-soft); color:var(--violet-ink); }
.inbox-icon-gray{ background:var(--surface-2); color:var(--text-soft); }
.inbox-row{
  display:flex; align-items:center; gap:14px; padding:13px 20px;
  border-bottom:1px solid var(--border); cursor:pointer; position:relative;
}
.inbox-row:last-child{ border-bottom:none; }
.inbox-row:hover{ background:var(--surface-2); }
.inbox-row:focus-visible{ outline:none; box-shadow:inset 0 0 0 2px var(--accent); }
.inbox-row.unread::before{
  content:""; position:absolute; left:8px; top:50%; width:6px; height:6px; margin-top:-3px;
  border-radius:50%; background:var(--accent);
}
.inbox-body{ flex:1; min-width:0; }
.inbox-title{ font-size:13.5px; color:var(--text-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inbox-row.unread .inbox-title{ font-weight:600; color:var(--text); }
.inbox-body .cell-sub{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inbox-when{ font-size:12.5px; color:var(--text-mute); white-space:nowrap; flex:none; }
@media (max-width: 700px){
  .inbox-row{ padding:12px 14px 12px 20px; gap:10px; }
  .inbox-when{ display:none; }
  .inbox-title{ white-space:normal; }
  .toolbar[role="tablist"]{ overflow-x:auto; flex-wrap:nowrap; }
  .toolbar[role="tablist"] .chip{ flex:none; }
}
@media (max-width: 700px){ .cmdk-overlay{ padding-top:6vh; padding-left:10px; padding-right:10px; } }

/* ---------------- Playbooks ---------------- */
.pb-row{ display:flex; align-items:center; gap:16px; padding:16px 20px; border-bottom:1px solid var(--border); }
.pb-row:last-child{ border-bottom:none; }
.pb-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.pb-title{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pb-name{ font-weight:600; font-size:14px; }
.pb-actions{ display:flex; align-items:center; gap:8px; flex:none; }
.pb-presets{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.pb-preset{ display:flex; flex-direction:column; align-items:flex-start; }
.pb-preset .btn{ margin-top:auto; }
.pb-steps-preview{ margin:0 0 12px; padding-left:18px; font-size:13px; color:var(--text-soft); display:flex; flex-direction:column; gap:3px; }
.pb-step{ border:1px solid var(--border); border-radius:10px; padding:12px; margin-bottom:10px; background:var(--surface); }
.pb-step-head{ display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.pb-step-head select.input{ min-width:0; max-width:100%; }
.pb-step-num{ width:22px; height:22px; border-radius:50%; background:var(--accent-soft); color:var(--tint-ink); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; flex:none; }
.pb-add{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.pb-check{ display:flex; align-items:center; gap:8px; font-size:13.5px; padding-top:9px; cursor:pointer; }
.pb-choices{ display:flex; flex-direction:column; gap:8px; }
.pb-choice{
  display:flex; flex-direction:column; align-items:flex-start; gap:3px; width:100%; text-align:left; font-family:inherit;
  padding:12px 14px; border:1px solid var(--border-strong); border-radius:10px; background:var(--surface); color:var(--text); cursor:pointer;
}
.pb-choice:hover{ border-color:var(--accent); background:var(--surface-2); }
.pb-choice:focus-visible{ outline:none; box-shadow:var(--ring); }
.pb-warning{ background:var(--amber-soft); color:var(--amber); border-radius:8px; padding:10px 12px; font-size:13px; margin-bottom:12px; }
.switch:focus-visible{ outline:none; box-shadow:var(--ring); }
@media (max-width: 700px){
  .pb-row{ flex-direction:column; align-items:stretch; gap:12px; padding:14px; }
  .pb-actions{ justify-content:flex-end; }
}

/* Invite link that no longer works, on the sign-up page */
.auth-notice{ background:var(--amber-soft); color:var(--amber); border-radius:8px; padding:10px 12px; font-size:13px; margin-bottom:14px; }

.inbox-icon-green{ background:var(--green-soft); color:var(--green); }

/* Tasks card on a lead, and the "repeats" badge */
.lead-task{ display:flex; align-items:flex-start; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
.lead-task:first-child{ padding-top:0; }
.lead-task:last-child{ border-bottom:none; padding-bottom:0; }
.lead-task .switch{ margin-top:1px; }
.lead-task .switch:focus-visible{ outline:none; box-shadow:var(--ring); }
.lead-task-body{ flex:1; min-width:0; }
.lead-task-title{ font-weight:600; font-size:13.5px; overflow-wrap:anywhere; }
.repeat-badge{ border:none; cursor:pointer; font-family:inherit; gap:4px; }
.repeat-badge .icon{ width:12px; height:12px; }
.repeat-badge:hover{ filter:brightness(.95); }
.repeat-badge:focus-visible{ outline:none; box-shadow:var(--ring); }

/* Task detail dialog and task notes */
.task-title-link{ cursor:pointer; }
.task-title-link:hover{ text-decoration:underline; }
.task-title-link:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:4px; }
.task-detail-status{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.task-lead-link{ cursor:pointer; }
.task-lead-link:hover{ text-decoration:underline; }
.task-snooze{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:14px; }
.task-notes-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:10px; }
.task-notes-head h3{ font-size:14px; }
.task-note{ display:flex; gap:10px; padding:12px 0; border-top:1px solid var(--border); }
.task-note:first-child{ border-top:none; }
.task-note-body{ flex:1; min-width:0; }
.task-note-meta{ font-size:12px; color:var(--text-mute); margin-bottom:2px; }
.task-note-text{ white-space:pre-wrap; overflow-wrap:anywhere; font-size:13.5px; }
.task-note-actions{ display:flex; align-items:center; gap:6px; margin-top:6px; }
.task-note-body textarea.input{ margin:4px 0; }

/* ---------------- Attendance ---------------- */
.att-tabs{ overflow-x:auto; overflow-y:hidden; white-space:nowrap; scrollbar-width:thin; }
.att-tabs .tab{ flex:none; }
.att-audience{ margin-bottom:10px; }

/* ---------------- Review before done, and Team today ---------------- */
.task-submit{ flex:none; }
.task-review-lock{ flex:none; width:36px; display:grid; place-items:center; color:var(--amber); }
.task-review-opt{ display:flex; gap:10px; align-items:flex-start; margin-top:14px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); cursor:pointer; }
.task-review-opt input{ margin-top:3px; }
.task-review-opt small{ display:block; color:var(--text-mute); font-weight:400; margin-top:2px; }
.task-review-box{ margin-top:14px; padding:12px 14px; border:1px solid var(--amber); border-radius:10px; background:var(--amber-soft); }
.task-review-box .cell-sub{ color:inherit; opacity:.85; }
.task-review-box textarea{ margin-top:8px; }
.task-review-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.tt-tiles{ display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:10px; margin-bottom:16px; }
.tt-tile{ padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.tt-tile b{ display:block; font-size:22px; line-height:1.1; }
.tt-tile span{ font-size:12.5px; color:var(--text-mute); }
.tt-banner{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:10px 14px; margin-bottom:14px; border-radius:10px; background:var(--amber-soft); color:var(--amber); font-size:13.5px; }
.tt-section{ margin-bottom:18px; }
.tt-section h3{ font-size:14px; margin:0 0 8px; }
.tt-risk-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:12px 16px; border-bottom:1px solid var(--border); }
.tt-risk-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 16px; border-bottom:1px solid var(--border); }
.tt-risk-row:last-child{ border-bottom:none; }
.tt-risk-row .task-title-link{ flex:1 1 200px; min-width:0; }
select.input.tt-reassign{ width:auto; max-width:100%; padding-top:6px; padding-bottom:6px; }
.tt-person{ cursor:pointer; }
.tt-person:hover{ background:var(--surface-2); }

.att-toolbar{ padding-bottom:6px; }
.att-controls{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.att-datebox{ display:flex; align-items:center; gap:6px; }
.att-prev .icon{ transform:rotate(180deg); }
/* `select.input` sets width:100%, so these name the element too to override it. */
.input.att-date{ width:auto; }
select.input.att-group{ width:auto; min-width:160px; max-width:100%; }
.input.att-search{ flex:1 1 180px; width:auto; min-width:140px; }
select.input.att-show, .input.att-filter, select.input.att-filter{ width:auto; max-width:100%; }

.att-infobar{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:14px 20px; border-bottom:1px solid var(--border); }
.att-infobar-end{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.att-day{ font-weight:700; font-size:15px; }
.att-counts{ font-size:13px; color:var(--text-soft); font-variant-numeric:tabular-nums; }
.att-note{ margin:12px 20px 0; padding:9px 12px; border-radius:8px; background:var(--amber-soft); color:var(--amber); font-size:13px; }

.att-row{ display:flex; align-items:center; gap:12px; padding:10px 20px; border-bottom:1px solid var(--border); }
.att-row[hidden]{ display:none; }
.att-row.changed{ background:var(--surface-2); }
.att-name{ flex:1; min-width:0; font-weight:600; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.att-roll{ color:var(--text-mute); font-weight:400; font-size:12.5px; }
.att-toggle{ display:flex; gap:6px; flex:none; }
.att-btn{
  min-width:74px; padding:8px 10px; border-radius:8px; border:1px solid var(--border-strong); background:var(--surface);
  color:var(--text-soft); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
}
.att-btn:hover:not(:disabled){ border-color:var(--text-mute); color:var(--text); }
.att-btn:focus-visible{ outline:none; box-shadow:var(--ring); }
.att-btn:disabled{ cursor:default; opacity:.55; }
.att-btn.present.on{ background:var(--green-soft); border-color:var(--green); color:var(--green); }
.att-btn.late.on{ background:var(--amber-soft); border-color:var(--amber); color:var(--amber); }
.att-btn.half_day.on{ background:var(--accent-soft); border-color:var(--accent); color:var(--tint-ink); }
.att-btn.absent.on{ background:var(--red-soft); border-color:var(--red); color:var(--red); }
.att-btn.wfh.on{ background:var(--violet-soft); border-color:var(--violet-ink); color:var(--violet-ink); }
.att-btn.leave.on{ background:var(--accent-soft); border-color:var(--accent); color:var(--tint-ink); }

/* "How late?" appears beside the buttons only when a student is marked Late. */
.att-late{ display:flex; align-items:center; gap:6px; flex:none; }
/* Work from home: who asked sits just above the WFH button. The buttons stay on one line. */
.att-row{ flex-wrap:wrap; }
.att-toggle{ align-items:flex-end; }
.att-stack{ display:flex; flex-direction:column; align-items:stretch; gap:4px; }
.att-wfh-by.input{ font-size:12px; padding:3px 6px; min-height:0; height:auto; width:auto; }
.att-wfh-by[hidden]{ display:none; }
/* A day on approved leave: read only, and a click says why. */
.att-btn.locked{ opacity:.55; cursor:not-allowed; }
.att-btn.locked.on{ opacity:1; cursor:help; }
.att-leave-note{ flex:1 1 100%; margin:0; }
.att-leave-note[hidden]{ display:none; }
.att-late[hidden]{ display:none; }
.att-late-label{ font-size:12px; color:var(--text-mute); }
select.input.att-late-select{ width:auto; padding-top:6px; padding-bottom:6px; }
.input.att-late-custom{ width:76px; padding-top:6px; padding-bottom:6px; }
.input.att-late-custom[hidden]{ display:none; }

.att-savebar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding:12px 20px; border-top:1px solid var(--border); background:var(--surface); position:sticky; bottom:0;
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
}
.att-savebar-actions{ display:flex; align-items:center; gap:8px; margin-left:auto; }

.att-filters{ margin-bottom:16px; }
.att-presets{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.att-filter-row{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; }
.att-filter-label{ display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--text-mute); }
.att-report-tabs{ align-items:center; }
.att-log-row .cell-sub{ margin-top:2px; }

.att-archived td{ color:var(--text-mute); }
.att-chips{ display:flex; flex-wrap:wrap; gap:6px; }
select.input.att-move{ width:auto; min-width:120px; max-width:100%; }
.att-roster-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; justify-content:flex-end; }

.att-summary{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:12px; margin-bottom:14px; }
.stat-icon-red{ background:var(--red-soft); color:var(--red); }
.att-big{ font-size:26px; font-weight:800; letter-spacing:-.02em; }
.att-stat{ font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; }
.att-subhead{ font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-mute); margin:16px 0 6px; }
.att-history{ border:1px solid var(--border); border-radius:10px; }
.att-hrow{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 12px; border-bottom:1px solid var(--border); font-size:13px; }
.att-hrow:last-child{ border-bottom:none; }

@media (max-width: 700px){
  .att-controls{ gap:8px; }
  .att-datebox{ width:100%; }
  .input.att-date{ flex:1; }
  select.input.att-group, select.input.att-show{ flex:1 1 140px; }
  .att-infobar, .att-row, .att-savebar{ padding-left:14px; padding-right:14px; }
  .att-note{ margin-left:14px; margin-right:14px; }
  .att-row{ flex-wrap:wrap; row-gap:8px; }
  .att-name{ flex:1 1 100%; }
  .att-late{ flex:1 1 100%; }
  .att-toggle{ flex:1 1 100%; }
  .att-btn{ flex:1 1 0; min-width:0; padding:11px 4px; }
  .att-toggle-wide{ flex-wrap:wrap; gap:6px; }
  .att-toggle-wide .att-btn{ flex:1 1 28%; }
  .att-toggle-wide .att-stack{ flex:1 1 28%; }
  .att-toggle-wide .att-stack .att-btn{ width:100%; }
  .att-summary{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .att-roster-actions{ justify-content:flex-start; }
  .att-filter-row > *{ flex:1 1 140px; }
}

/* ---------------------------------------------------------------- Invoices */
.inv-late{ color:var(--red); font-weight:600; }
.inv-void{ opacity:.6; text-decoration:line-through; }
.inv-void .badge{ text-decoration:none; }
table.inv-list th, table.inv-list td:not(:nth-child(2)){ white-space:nowrap; }
table.inv-list tr.clickable{ cursor:pointer; }
table.inv-list tr.clickable:hover td{ background:var(--surface-2); }
table.inv-list tr.clickable:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.inv-more{ margin-top:-6px; }
.inv-show-sm{ display:none; }
.inv-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.inv-page{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:16px; align-items:start; }
.inv-link{ display:block; cursor:pointer; color:var(--tint-ink); font-weight:600; font-size:13.5px; padding:4px 0; }
.inv-link:hover{ text-decoration:underline; }

/* customer picker */
.inv-picked:empty{ display:none; }
.inv-chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 6px 6px 12px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2); max-width:100%; }
.inv-cust-filter{ min-width:190px; }
.inv-cust-filter .inv-chip{ padding:4px 4px 4px 10px; }
.inv-results{ position:absolute; z-index:5; left:0; right:0; top:100%; margin-top:4px; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow); max-height:260px; overflow:auto; }
.field{ position:relative; }
.inv-result{ display:flex; flex-direction:column; align-items:flex-start; gap:1px; width:100%; text-align:left; background:none; border:0; padding:9px 12px; cursor:pointer; font:inherit; color:inherit; border-bottom:1px solid var(--border); }
.inv-result:last-child{ border-bottom:0; }
.inv-result:hover, .inv-result:focus-visible{ background:var(--surface-2); outline:none; }

/* form */
.modal.inv-modal{ max-width:880px; }
.modal.inv-receipt-modal{ max-width:560px; }
.inv-lines-head, .inv-line{ display:grid; grid-template-columns:minmax(0,1fr) 90px 130px 120px 34px; gap:10px; align-items:center; }
.inv-lines-head{ font-size:12px; font-weight:700; color:var(--text-mute); text-transform:uppercase; letter-spacing:.04em; padding:0 0 6px; }
.inv-line{ margin-bottom:8px; }
.inv-l-label{ display:none; font-size:12px; font-weight:600; color:var(--text-soft); }
.inv-amount{ text-align:right; font-weight:600; font-variant-numeric:tabular-nums; padding-right:2px; }
.input.inv-num{ text-align:right; font-variant-numeric:tabular-nums; }
.inv-pair{ display:flex; gap:8px; align-items:center; }
.inv-pair .input{ min-width:0; }
.inv-pair select.input{ width:auto; flex:0 0 auto; }
.inv-lower{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,280px); gap:20px; margin-top:16px; align-items:start; }
.inv-adjust{ display:grid; gap:12px; }
.inv-dates{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
.inv-totals{ border:1px solid var(--border); border-radius:10px; padding:10px 14px; background:var(--surface-2); }
.inv-total-row{ display:flex; justify-content:space-between; gap:12px; padding:4px 0; font-size:13.5px; }
.inv-total-row.strong{ border-top:1px solid var(--border); margin-top:6px; padding-top:9px; font-weight:700; font-size:15px; }
.inv-pay-due{ display:flex; justify-content:space-between; align-items:center; padding:10px 14px; margin-bottom:14px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); }

/* the document */
.inv-doc{ color:var(--text); font-size:13.5px; }
.inv-doc-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding-bottom:16px; border-bottom:2px solid var(--text); margin-bottom:18px; }
.inv-biz{ font-size:19px; font-weight:800; letter-spacing:-.02em; }
.inv-logo{ display:block; max-height:52px; max-width:150px; object-fit:contain; margin-bottom:6px; }
.inv-doc-id{ text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.inv-number{ font-size:20px; font-weight:800; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.inv-doc-meta{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:18px; }
.inv-k{ font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-mute); margin-bottom:2px; }
.inv-v{ font-weight:600; }
.inv-table{ width:100%; border-collapse:collapse; }
.inv-table th{ text-align:left; font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-mute); padding:8px 8px 8px 0; border-bottom:1px solid var(--border); }
.inv-table td{ padding:9px 8px 9px 0; border-bottom:1px solid var(--border); vertical-align:top; }
.inv-table th.cell-num, .inv-table td.cell-num{ text-align:right; padding-right:0; padding-left:8px; }
.inv-summary{ margin:14px 0 0 auto; width:min(100%, 320px); }
.inv-sum-row{ display:flex; justify-content:space-between; gap:12px; padding:5px 0; }
.inv-sum-row.strong{ font-weight:700; border-top:1px solid var(--border); margin-top:4px; padding-top:9px; }
.inv-sum-row.due{ font-size:16px; }
.inv-pay-hist{ margin-top:22px; }
.inv-notes{ margin-top:20px; padding-top:14px; border-top:1px solid var(--border); }
.inv-receipt .inv-rc-amount{ text-align:center; padding:14px 0 18px; }
.inv-rc-big{ font-size:30px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.inv-rc-grid{ border-top:1px solid var(--border); }
.inv-rc-row{ display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid var(--border); }
.inv-rc-row .inv-k{ margin:0; align-self:center; }

/* payments card, balances, customer section */
.inv-balance{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:6px; }
.inv-balance b{ font-size:18px; font-variant-numeric:tabular-nums; }
.inv-pay-list{ margin-top:6px; }
.inv-pay{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:11px 0; border-top:1px solid var(--border); }
.inv-pay-actions{ display:flex; align-items:center; gap:4px; flex-shrink:0; }
.inv-stats{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; flex:1; }
.inv-cust-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.inv-mini{ cursor:pointer; }
.inv-mini:hover{ background:var(--surface-2); }
.inv-lead-card .inv-stats{ grid-template-columns:1fr; }

@media (max-width: 980px){
  .inv-page{ grid-template-columns:1fr; }
}
@media (max-width: 700px){
  .inv-lines-head{ display:none; }
  .inv-line{ grid-template-columns:1fr 1fr 34px; row-gap:8px; padding:10px; border:1px solid var(--border); border-radius:10px; }
  .inv-l-desc{ grid-column:1 / -1; }
  .inv-l-label{ display:block; }
  .inv-l-amt{ grid-column:1 / 3; display:flex; justify-content:space-between; align-items:center; }
  .inv-l-x{ grid-column:3; grid-row:3; justify-self:end; }
  .inv-lower{ grid-template-columns:1fr; }
  .inv-dates{ grid-template-columns:1fr; }
  .inv-doc-meta{ grid-template-columns:1fr; gap:14px; }
  .inv-doc-head{ flex-direction:column; }
  .inv-doc-id{ align-items:flex-start; text-align:left; }
  .inv-actions .btn{ flex:1 1 auto; justify-content:center; }
  .inv-cust-filter{ min-width:0; flex:1 1 100%; }
  .inv-more > *{ flex:1 1 100%; width:100% !important; }
  .inv-hide-sm{ display:none; }
  .inv-show-sm{ display:block; }
  table.inv-list th, table.inv-list td{ padding-left:10px; padding-right:10px; }
}

/* Printing: only the document, on plain paper. */
.print-host{ display:none; }
@media print{
  body.printing-doc > *:not(.print-host){ display:none !important; }
  body.printing-doc .print-host{ display:block; padding:0; margin:0; }
  body.printing-doc{ background:#fff !important; color:#000 !important; }
  body.printing-doc .inv-doc{ color:#000; font-size:12pt; max-width:none; }
  body.printing-doc .inv-doc .cell-sub, body.printing-doc .inv-k{ color:#444; }
  body.printing-doc .badge{ border:1px solid #888; background:none; color:#000; }
  body.printing-doc .inv-doc-head{ border-bottom-color:#000; }
  @page{ margin:16mm; }
}

/* ---------------------------------------------------------------- WhatsApp */
.wa-banner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 12px; padding:9px 12px; border-radius:8px; font-size:12.5px; margin-bottom:10px; border:1px solid var(--border); background:var(--surface-2); color:var(--text-soft); }
.wa-banner-red{ background:var(--red-soft); color:var(--red); border-color:transparent; }
.wa-banner-amber{ background:var(--amber-soft); color:var(--amber); border-color:transparent; }
.wa-link{ cursor:pointer; font-weight:600; text-decoration:underline; color:inherit; }
.wa-list{ max-height:360px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; padding:4px 2px 8px; }
.wa-empty{ text-align:center; padding:18px 0; }
.wa-day{ align-self:center; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-mute); margin:8px 0 2px; }
.wa-msg{ max-width:82%; padding:8px 11px; border-radius:12px; font-size:13.5px; line-height:1.4; border:1px solid var(--border); background:var(--surface); }
.wa-in{ align-self:flex-start; border-bottom-left-radius:4px; }
.wa-out{ align-self:flex-end; border-bottom-right-radius:4px; background:var(--accent-soft); border-color:transparent; }
.wa-failed{ background:var(--red-soft); }
.wa-text{ white-space:pre-wrap; overflow-wrap:anywhere; }
.wa-tag{ font-size:11px; font-weight:600; color:var(--text-mute); margin-bottom:3px; }
.wa-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin-top:4px; font-size:11.5px; color:var(--text-mute); }
.wa-st{ font-weight:600; }
.wa-st-red{ color:var(--red); }
.wa-st-blue{ color:var(--tint-ink); }
.wa-st-green{ color:var(--green); }
.wa-st-amber{ color:var(--amber); }
.wa-retry{ padding:1px 8px; }
.wa-composer{ border-top:1px solid var(--border); padding-top:10px; }
.wa-window{ margin-bottom:6px; }
.wa-input{ width:100%; resize:vertical; min-height:56px; }
.wa-actions{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.wa-preview{ margin-top:14px; }
.wa-sample{ max-width:100%; margin-top:6px; }
.wa-tpl-list{ margin-top:8px; border:1px solid var(--border); border-radius:8px; }
.wa-tpl-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid var(--border); font-size:13px; }
.wa-tpl-row:last-child{ border-bottom:none; }
.wa-choices{ display:flex; flex-direction:column; gap:8px; }
.wa-choice{ display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:8px; cursor:pointer; }
.wa-choice span{ display:flex; flex-direction:column; }
.wa-choice input{ margin-top:3px; }
.wa-status{ border:1px solid var(--border); border-radius:10px; padding:2px 14px 12px; margin-bottom: 6px; }
.wa-steps{ border:1px solid var(--border); border-radius:10px; padding:12px 14px; margin:12px 0; background:var(--surface-2); }
.wa-tpl-table th, .wa-tpl-table td{ vertical-align:top; }
.wa-tpl-body{ max-width:340px; white-space:pre-wrap; overflow-wrap:anywhere; }
.wa-tpl-actions{ white-space:nowrap; text-align:right; }
.wa-followup:empty{ display:none; }
.wa-followup{ margin:10px 0; }

@media (max-width: 700px){
  .wa-msg{ max-width:94%; }
  .wa-tpl-body{ max-width:none; }
  .wa-actions{ flex-wrap:wrap; }
}

/* ---------------------------------------------------------------- Tasks */
.task-tiles{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.task-tile{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:12px 14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); cursor:pointer; font-family:inherit; text-align:left; color:var(--text); }
.task-tile:hover{ border-color:var(--text-mute); }
.task-tile:focus-visible{ outline:none; box-shadow:var(--ring); }
.task-tile b{ font-size:22px; line-height:1.1; font-variant-numeric:tabular-nums; }
.task-tile span{ font-size:12px; color:var(--text-soft); }
.task-tile-red b{ color:var(--red); }
.task-tile-amber b{ color:var(--amber); }
.task-tile-green b{ color:var(--green); }
.task-tile-blue b{ color:var(--tint-ink); }

.task-quickadd{ display:flex; align-items:center; gap:8px; padding:8px 10px; margin-bottom:14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); }
.task-quickadd > .icon{ color:var(--text-mute); flex:none; }
.task-quickadd .input{ border:none; box-shadow:none; background:transparent; }
.task-quickadd .input:first-of-type{ flex:1; min-width:0; }
.task-quickadd select.input{ width:auto; border:1px solid var(--border); background:var(--surface-2); }
.task-quickadd:focus-within{ box-shadow:var(--ring); }

.task-toolbar .task-search{ width:220px; }
.task-chips{ display:contents; }
.task-toolbar .chip:disabled{ opacity:.45; cursor:default; }
.view-toggle{ display:inline-flex; gap:0; }
.view-toggle .btn{ border-radius:0; }
.view-toggle .btn:first-child{ border-radius:8px 0 0 8px; }
.view-toggle .btn:last-child{ border-radius:0 8px 8px 0; margin-left:-1px; }
.view-toggle .btn[aria-pressed="true"]{ background:var(--accent-soft); color:var(--tint-ink); border-color:var(--accent-soft); }

.task-group{ margin-bottom:14px; }
.task-group-head{ display:flex; align-items:center; gap:8px; margin:0 2px 6px; font-size:13px; }
.task-group-overdue b{ color:var(--red); }
.task-group-today b{ color:var(--amber); }
.task-cap{ text-align:center; padding:8px; }
.task-pick{ width:16px; height:16px; flex:none; cursor:pointer; accent-color:var(--accent); }

.task-row{ display:flex; align-items:center; gap:12px; padding:11px 16px; border-bottom:1px solid var(--border); }
.task-row:last-child{ border-bottom:none; }
.task-row:hover{ background:var(--surface-2); }
.task-row.is-selected{ background:var(--accent-soft); }
.task-row.is-done .task-title-text{ text-decoration:line-through; color:var(--text-mute); }
.task-main{ flex:1; min-width:0; }
.task-title{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:13.5px; }
.task-title-text{ overflow-wrap:anywhere; }
.task-prio{ width:8px; height:8px; border-radius:50%; flex:none; background:var(--border-strong); }
.task-prio-high{ background:var(--red); }
.task-prio-medium{ background:var(--amber); }
.task-sub{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px; margin-top:3px; font-size:12px; color:var(--text-soft); }
.task-type{ color:var(--text-mute); display:inline-flex; }
.task-type svg, .task-fact svg{ width:13px; height:13px; }
.task-about{ cursor:pointer; color:var(--text-soft); }
.task-about:hover{ color:var(--text); text-decoration:underline; }
.task-about-kind{ margin-right:5px; padding:0 5px; border-radius:4px; background:var(--surface-2); border:1px solid var(--border); font-size:11px; }
.task-fact{ display:inline-flex; align-items:center; gap:4px; font-variant-numeric:tabular-nums; }
.task-fact.ok{ color:var(--green); }
.task-tag{ cursor:pointer; }
.task-tag:hover{ border-color:var(--text-mute); }
.task-side{ display:flex; align-items:center; gap:8px; flex:none; }
.task-due{ min-width:76px; justify-content:center; }
.task-assignee{ display:inline-flex; }
.task-unassigned{ width:22px; height:22px; border-radius:50%; border:1px dashed var(--border-strong); align-items:center; justify-content:center; color:var(--text-mute); font-size:11px; }
.task-unassigned svg{ width:12px; height:12px; }
.task-del{ opacity:0; }
.task-row:hover .task-del, .task-del:focus-visible{ opacity:1; }

.task-bulk{ position:sticky; top:8px; z-index:20; display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:10px 14px; margin-bottom:12px; background:var(--surface); border:1px solid var(--accent); border-radius:var(--radius); box-shadow:var(--shadow-lg); }
.task-bulk.busy{ opacity:.6; pointer-events:none; }
.task-bulk .input-sm{ width:auto; }

.task-workload{ margin-bottom:14px; }
.wl-row{ display:flex; align-items:center; gap:10px; width:100%; padding:6px 8px; border:none; background:none; border-radius:8px; cursor:pointer; font-family:inherit; color:var(--text); text-align:left; }
.wl-row:hover, .wl-row.active{ background:var(--surface-2); }
.wl-row:focus-visible{ outline:none; box-shadow:var(--ring); }
.wl-name{ width:130px; flex:none; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wl-bar{ flex:1; display:flex; height:8px; border-radius:4px; background:var(--surface-2); overflow:hidden; min-width:40px; }
.wl-bar i{ display:block; height:100%; }
.wl-late{ background:var(--red); }
.wl-open{ background:var(--accent); }
.wl-nums{ flex:none; width:150px; text-align:right; font-size:12px; color:var(--text-soft); font-variant-numeric:tabular-nums; }

.task-board{ display:grid; grid-template-columns:repeat(4, minmax(220px, 1fr)); gap:12px; align-items:start; overflow-x:auto; padding-bottom:6px; }
.task-col{ background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); min-height:140px; }
.task-col.drop{ border-color:var(--accent); background:var(--accent-soft); }
.task-col-head{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; }
.task-col-body{ display:flex; flex-direction:column; gap:8px; padding:0 8px 10px; }
.task-col-empty{ padding:12px 4px; text-align:center; }
.task-card{ display:flex; flex-direction:column; gap:6px; padding:10px 12px; background:var(--surface); border:1px solid var(--border); border-radius:8px; cursor:grab; }
.task-card:hover{ border-color:var(--text-mute); }
.task-card.dragging{ opacity:.5; }
.task-card.is-done .task-title-text{ text-decoration:line-through; color:var(--text-mute); }
.task-card-foot{ display:flex; align-items:center; gap:8px; }
.task-card-move{ font-size:12px; padding:4px 6px; }

/* the task dialog */
.task-link-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.task-link-row .input{ flex:1; min-width:120px; }
.task-state-select{ width:auto; }
.task-quick{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.task-checklist{ margin:18px 0; }
.task-step{ display:flex; align-items:center; gap:10px; padding:6px 0; }
.task-step-text{ flex:1; min-width:0; overflow-wrap:anywhere; cursor:text; font-size:13.5px; }
.task-step-text.done{ text-decoration:line-through; color:var(--text-mute); }
.task-progress{ height:6px; border-radius:3px; background:var(--surface-2); overflow:hidden; margin:6px 0 8px; }
.task-progress i{ display:block; height:100%; background:var(--green); transition:width .2s; }
.task-history{ margin-top:18px; font-size:13px; }
.task-history summary{ cursor:pointer; color:var(--text-soft); }
.task-event{ display:flex; justify-content:space-between; gap:12px; padding:5px 0; border-bottom:1px solid var(--border); }
.task-event:last-child{ border-bottom:none; }
.task-note-bar{ display:flex; gap:8px; align-items:center; margin-top:6px; }
.task-mention{ width:auto; max-width:170px; }

@media (max-width: 900px){
  .task-tiles{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .wl-nums{ width:auto; }
}
@media (max-width: 700px){
  .task-tiles{ display:flex; overflow-x:auto; gap:8px; margin-right:-16px; padding-right:16px; scroll-snap-type:x proximity; }
  .task-tile{ flex:0 0 112px; scroll-snap-align:start; }
  .task-toolbar{ gap:8px; }
  .task-toolbar .task-search{ flex:1 1 100%; width:100%; order:3; }
  .task-toolbar .input{ width:auto; flex:1; }
  .task-chips{ display:flex; gap:6px; flex:1 1 100%; overflow-x:auto; order:2; padding-bottom:2px; }
  .task-chips .chip{ flex:none; }
  .view-toggle{ order:1; }
  .task-quickadd{ flex-wrap:wrap; }
  .task-quickadd > .icon{ display:none; }
  .task-quickadd .input:first-of-type{ flex:1 1 100%; order:-1; }
  .task-quickadd select.input{ flex:1; }
  .task-row{ flex-wrap:wrap; padding:12px; }
  .task-main{ flex:1 1 calc(100% - 80px); }
  .task-side{ flex:1 1 100%; padding-left:58px; }
  .task-row{ position:relative; }
  .task-main{ padding-right:30px; }
  .task-del{ opacity:1; position:absolute; top:6px; right:6px; }
  .task-bulk{ top:4px; }
  .wl-name{ width:90px; }
  .task-board{ grid-template-columns:repeat(4, 82%); scroll-snap-type:x mandatory; }
  .task-col{ scroll-snap-align:start; }
}

/* ---------------------------------------------------------------- Teams */
.task-assignee-team{ display:inline-flex; align-items:center; gap:6px; min-width:0; }
.task-team{ max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.task-team-dot{ border-style:solid; border-color:var(--violet-soft); background:var(--violet-soft); color:var(--violet-ink); font-weight:600; }

.teams-panel{ margin-top:4px; }
.team-list{ border:1px solid var(--border); border-radius:var(--radius); }
.team-row{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-bottom:1px solid var(--border); }
.team-row:last-child{ border-bottom:none; }
.team-main{ flex:1; min-width:0; }
.team-name{ font-weight:600; font-size:13.5px; }
.team-faces{ display:flex; flex:none; }
.team-faces .avatar{ margin-left:-6px; border:2px solid var(--surface); box-sizing:content-box; }
.team-faces .avatar:first-child{ margin-left:0; }
.team-picks{ display:flex; flex-direction:column; gap:2px; max-height:280px; overflow:auto; border:1px solid var(--border); border-radius:8px; padding:4px; }
.team-pick{ display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:6px; cursor:pointer; font-size:13.5px; }
.team-pick:hover{ background:var(--surface-2); }
.team-pick .cell-sub{ margin-left:auto; }
.team-pick input{ width:16px; height:16px; accent-color:var(--accent); }

@media (max-width: 700px){
  .team-row{ flex-wrap:wrap; }
  .team-faces{ display:none; }
  .task-team{ max-width:80px; }
}

/* ---------------------------------------------------------- People and roles */
.member-list{ border:1px solid var(--border); border-radius:var(--radius); }
.member-row{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.member-row:last-child{ border-bottom:none; }
.member-row.is-off{ opacity:.65; }
.member-main{ flex:1; min-width:180px; }
.member-name{ font-weight:600; font-size:13.5px; }
.member-actions{ display:flex; align-items:center; gap:6px; }

.role-list{ display:flex; flex-direction:column; gap:10px; }
.role-card{ border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; background:var(--surface); }
.role-card.is-off{ opacity:.65; }
.role-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:2px; }
.role-name{ font-weight:600; font-size:14px; }
.role-perms{ display:flex; flex-wrap:wrap; gap:4px 6px; margin-top:8px; }
.role-perm{ font-size:11.5px; padding:2px 8px; border-radius:100px; background:var(--surface-2); border:1px solid var(--border); color:var(--text-soft); }
.role-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }

.perm-grid{ display:flex; flex-direction:column; border:1px solid var(--border); border-radius:8px; }
.perm-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; align-items:center; padding:8px 12px; border-bottom:1px solid var(--border); }
.perm-row:last-child{ border-bottom:none; }
.perm-row label{ font-size:13px; }
.perm-flags{ display:flex; flex-direction:column; gap:6px; }
.perm-flag{ display:flex; align-items:center; gap:10px; font-size:13.5px; cursor:pointer; }
.perm-flag input{ width:16px; height:16px; accent-color:var(--accent); flex:none; }

@media (max-width: 700px){
  .perm-row{ grid-template-columns:1fr; gap:6px; }
  .member-actions{ margin-left:auto; }
}

/* plan notice and usage */
.plan-banner.plan-red{ background:var(--red-soft); }
.plan-banner.plan-amber{ background:var(--amber-soft); }
.plan-bar{ height:6px; border-radius:3px; background:var(--surface-2); overflow:hidden; }
.plan-bar i{ display:block; height:100%; }
.plan-bar-ok{ background:var(--green); }
.plan-bar-near{ background:var(--amber); }
.plan-bar-full{ background:var(--red); }

/* ---------- Permission grid (Settings, Roles; platform console, Role defaults) ---------- */
.fgrid-module{ margin-bottom:22px; }
.fgrid-title{ font-size:14px; margin-bottom:8px; }
.fgrid-feature{ border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); padding:12px 14px; margin-bottom:12px; }
.fgrid-head{ display:flex; flex-direction:column; gap:2px; margin-bottom:8px; }
.fgrid-table{ width:100%; }
.fgrid-table th, .fgrid-table td{ padding:8px 10px; text-align:left; vertical-align:middle; }
.fgrid-c{ text-align:center !important; width:72px; }
.fgrid-role{ font-weight:600; font-size:13px; }
.fgrid-state{ display:flex; gap:8px; align-items:center; }
.fgrid-table input[type=checkbox]{ width:16px; height:16px; }

/* Busy signal: a thin bar across the top, and a short note while changes are saved. */
html.is-busy, html.is-busy body { cursor: progress; }

/* The Save and Discard bar of the permission grid. */
.fgrid-savebar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 14px; border: 1px solid var(--border, #2a3350); border-radius: 10px; background: var(--surface-2, #1c2233); box-shadow: 0 4px 14px rgba(0,0,0,.25); }

/* Multiple choice dropdown. */
.multi { position: relative; }
.multi-summary { cursor: pointer; list-style: none; min-height: 38px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.multi-summary::-webkit-details-marker { display: none; }
.multi-list { margin-top: 4px; max-height: 220px; overflow: auto; padding: 6px 8px; border: 1px solid var(--border, #2a3350); border-radius: 8px; background: var(--surface-2, #1c2233); }
.multi-row { padding: 5px 2px; }
.multi-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.course-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.course-row .input { flex: 1; }
.course-row .course-fee { flex: 0 0 120px; text-align: right; }
.course-plan { margin: -4px 0 12px; }
.date-clear { display: flex; gap: 8px; align-items: center; }
.date-clear .input { flex: 1; min-width: 0; }
.order-row{ cursor:default; }
.order-row[draggable="true"]{ cursor:grab; }
.order-row .grip{ flex:0 0 14px; width:14px; height:22px; margin-right:10px; opacity:.6;
  background-image:radial-gradient(currentColor 1.4px, transparent 1.6px); background-size:7px 7px; color:var(--text-mute); }
.order-row .grip-space{ flex:0 0 14px; margin-right:10px; }
.order-row.dragging{ opacity:.45; }
.order-row.drop-here{ box-shadow:inset 0 2px 0 var(--accent); }

/* Celebration when an enquiry is won. Below dialogs, never blocks clicks. */
.celebrate-canvas{ position:fixed; inset:0; z-index:90; pointer-events:none; }
.celebrate-banner{ position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:95; min-width:260px; max-width:min(92vw,460px); text-align:center; padding:14px 24px; border-radius:14px; cursor:pointer;
  color:#fff; background:linear-gradient(120deg,#4f7cff,#7c5cff 55%,#16c784); box-shadow:0 12px 36px rgba(79,124,255,.45); animation:celebrateIn .45s cubic-bezier(.16,1,.3,1) both; }
.celebrate-banner.leaving{ opacity:0; transform:translate(-50%,-12px); transition:opacity .3s ease, transform .3s ease; }
.celebrate-title{ font-weight:800; font-size:18px; letter-spacing:.2px; }
.celebrate-msg{ margin-top:2px; font-size:13.5px; opacity:.95; }
@keyframes celebrateIn{ from{ opacity:0; transform:translate(-50%,-24px) scale(.94); } to{ opacity:1; transform:translate(-50%,0) scale(1); } }
@media (prefers-reduced-motion: reduce){ .celebrate-banner{ animation:none; } }
.celebrate-line{ margin-top:8px; display:inline-block; padding:3px 12px; border-radius:999px; font-size:12.5px; font-weight:700; background:rgba(255,255,255,.2); }
/* The celebration follows the chosen look. Light mode keeps the bright banner, dark mode a deeper one with a soft glow. */
[data-theme="dark"] .celebrate-banner{ background:linear-gradient(120deg,#2b3f9e,#4b3a9e 55%,#127a58); border:1px solid rgba(165,139,255,.45); box-shadow:0 10px 34px rgba(125,162,255,.28), 0 0 0 1px rgba(255,255,255,.04) inset; }
[data-theme="dark"] .celebrate-line{ background:rgba(255,255,255,.14); }
:root:not([data-theme="dark"]) .celebrate-banner{ border:1px solid rgba(255,255,255,.35); }

/* The business switcher (Stage 7) */
.biz-switch{ position:relative; margin:0 12px 8px; }
.biz-btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--text); cursor:pointer; font:inherit; font-weight:600; font-size:13px; }
.biz-btn:hover{ background:var(--surface-2, var(--surface)); }
.biz-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.biz-menu{ display:none; position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:50; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.18); padding:4px; max-height:320px; overflow:auto; }
.biz-menu.open{ display:block; }
.biz-item{ width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:1px; padding:8px 10px; border:0; border-radius:8px; background:transparent; color:var(--text); cursor:pointer; font:inherit; font-size:13px; text-align:left; }
.biz-item small{ color:var(--text-mute); font-size:11.5px; }
.biz-item:hover{ background:var(--surface-2, rgba(127,127,127,.12)); }
.biz-item.is-current{ background:rgba(127,127,127,.12); }
.biz-add{ flex-direction:row; align-items:center; gap:6px; color:var(--primary, var(--text)); font-weight:600; }

/* All my businesses (Stage 10) */
.ab-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.ab-stats{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ab-stat{ display:flex; flex-direction:column; gap:2px; text-align:left; padding:10px; border:1px solid var(--border, #e5e7eb); border-radius:8px; background:transparent; color:inherit; cursor:pointer; font:inherit; }
.ab-stat b{ font-size:18px; }
.ab-stat span{ font-size:12px; color:var(--text-soft, #6b7280); }
.ab-stat:disabled{ cursor:default; opacity:.7; }
.ab-stat:disabled b{ font-size:12px; font-weight:600; }
@media (max-width:480px){ .ab-stats{ grid-template-columns:1fr; } }

/* Settings: groups on the side, each group a stack of clearly separate sections. */
.set-layout{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:24px; align-items:start; }
.set-side{ position:sticky; top:12px; display:flex; flex-direction:column; gap:10px; }
.set-nav{ display:flex; flex-direction:column; gap:2px; }
.set-nav-item{ text-align:left; background:none; border:0; border-radius:8px; padding:9px 12px; font:inherit; font-size:13.5px; color:var(--text-soft, var(--text-mute)); cursor:pointer; border-left:3px solid transparent; }
.set-nav-item:hover{ background:var(--accent-soft); color:var(--text); }
.set-nav-item.active{ background:var(--accent-soft); color:var(--tint-ink, var(--accent-ink)); font-weight:600; border-left-color:var(--accent); }
.set-picker{ display:none; }
.set-results{ display:flex; flex-direction:column; gap:2px; }
.set-hit{ display:flex; flex-direction:column; align-items:flex-start; gap:1px; text-align:left; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:8px 10px; font:inherit; cursor:pointer; }
.set-hit:hover{ border-color:var(--accent); }
.set-main{ display:flex; flex-direction:column; gap:20px; min-width:0; max-width:760px; }
.set-group-head h2{ font-size:18px; margin:0; }
.set-group-head p{ margin:2px 0 0; color:var(--text-mute); font-size:13px; }
.set-section{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 1px 2px rgba(20,24,40,.05); overflow:hidden; scroll-margin-top:12px; }
.set-section-head{ padding:14px 20px 12px; background:var(--accent-soft); border-bottom:1px solid var(--border); border-left:4px solid var(--accent); }
.set-section-head h2{ font-size:15px; margin:0; }
.set-section-head p{ margin:2px 0 0; font-size:12.5px; color:var(--text-mute); }
.set-section-body{ padding:16px 20px 20px; }
.set-flash{ box-shadow:var(--ring); }
@media (max-width:760px){
  .set-layout{ grid-template-columns:1fr; gap:14px; }
  .set-side{ position:static; }
  .set-nav{ display:none; }
  .set-picker{ display:block; }
  .set-section-body{ padding:14px 14px 16px; }
}

/* Arranging the cards of a page. */
.lay-editor{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.lay-col{ background:var(--accent-soft); border:1px dashed var(--border); border-radius:var(--radius); padding:10px; display:flex; flex-direction:column; gap:8px; min-height:80px; }
.lay-col h4{ margin:0 0 2px; font-size:12.5px; color:var(--text-mute); font-weight:600; }
.lay-card{ background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:10px; }
.lay-card.lay-off{ opacity:.6; }
.lay-card.lay-drag{ outline:2px solid var(--accent); }
.lay-card-top{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.lay-actions{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.lay-rows{ margin-top:8px; padding-top:8px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:4px; }
@media (max-width:620px){ .lay-editor{ grid-template-columns:1fr; } }
.lay-rowlist{ display:flex; flex-direction:column; }
.lay-rowitem{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--border); }
.lay-rowitem:last-child{ border-bottom:none; }
.lay-tray{ margin-top:14px; padding:12px; border:1px dashed var(--border); border-radius:var(--radius); }
.lay-tray h4{ margin:0 0 4px; font-size:12.5px; color:var(--text-mute); font-weight:600; }
.lay-avail{ display:flex; justify-content:space-between; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:8px 10px; margin-bottom:6px; cursor:grab; }
.lay-card.lay-over{ outline:2px dashed var(--accent); }
.lay-grip{ margin-right:auto; }
.lay-rowitem .check-row{ flex:1 1 auto; min-width:0; }
.lay-actions .sort-grip{ margin-right:auto; }
.reorder-btn{ flex:none; }
.lay-rowitem.lay-over{ outline:2px dashed var(--accent); }

/* Layout editors on a phone or tablet: no dragging on touch, so the buttons carry it; roomy tap targets; nothing wider than the screen. */
.lay-editor, .lay-col, .lay-card, .lay-tray, .lay-avail{ min-width:0; }
.lay-card input.input{ width:100%; }
.lay-avail b, .lay-card-top b{ overflow-wrap:anywhere; }
@media (pointer: coarse){
  .lay-grip{ display:none; }
  .lay-card, .lay-rowitem, .lay-avail{ cursor:default; }
  .lay-actions .btn, .lay-card-top .btn, .lay-avail .btn, .lay-rowitem .btn{ min-height:40px; padding-left:14px; padding-right:14px; }
  .lay-rows .check-row{ min-height:40px; }
}
@media (max-width:620px){
  .lay-actions .btn{ flex:1 1 calc(50% - 6px); justify-content:center; }
  .lay-avail{ flex-wrap:wrap; }
  .lay-rowitem{ flex-wrap:wrap; }
}

/* Payment plan (installments) */
.inv-sched-head{ margin:4px 0 8px; }
.inv-adjust-tick{ margin-top:10px; align-items:flex-start; }
.inv-adjust-tick input{ margin-top:2px; flex:none; }
.sch{ display:grid; gap:10px; }
.sch-plan-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; align-items:end; }
.sch-go{ align-self:end; }
.sch-rows{ display:grid; gap:8px; }
.sch-row{ display:grid; grid-template-columns:28px minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) 36px; gap:8px; align-items:end; padding:8px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2, transparent); }
.sch-row .inv-l-label{ display:none; }
.sch-n{ align-self:center; text-align:center; font-weight:600; color:var(--text-muted); }
.sch-paid{ grid-column:2 / -1; }
.sch-left{ font-size:13.5px; font-weight:600; padding:8px 10px; border-radius:8px; }
.sch-left.ok{ background:var(--success-bg, #e8f6ee); color:var(--success, #17803d); }
.sch-left.bad{ background:var(--warn-bg, #fff4e0); color:var(--warn, #9a5b00); }
.sch-list{ display:grid; gap:8px; }
.sch-item{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) auto; gap:8px; align-items:center; padding:9px 10px; border:1px solid var(--border); border-radius:10px; }
.sch-bar{ height:8px; border-radius:6px; background:var(--border); overflow:hidden; }
.sch-bar > span{ display:block; height:100%; background:var(--accent); }
.sch-short{ display:grid; gap:8px; margin-top:10px; padding:10px; border:1px solid var(--border); border-radius:10px; }
@media (max-width:640px){
  .sch-row{ grid-template-columns:24px minmax(0,1fr) 36px; }
  .sch-row .inv-l-label{ display:block; }
  .sch-row .sch-f{ grid-column:2 / 3; }
  .sch-row .icon-btn{ grid-column:3; grid-row:1; align-self:start; }
  .sch-n{ grid-row:1; align-self:start; padding-top:30px; }
  .sch-paid{ grid-column:2 / -1; }
  .sch-plan-grid{ grid-template-columns:1fr 1fr; }
  .sch-item{ grid-template-columns:1fr 1fr; }
  .sch-row .input, .sch-plan-grid .input{ min-height:44px; }
}

/* Switch to a library pipeline */
.sw-rows{ display:grid; gap:8px; margin-top:12px; }
.sw-row{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:10px; align-items:center; padding:8px 10px; border:1px solid var(--border); border-radius:10px; }
.sw-arrow{ font-size:12px; color:var(--text-muted); }
@media (max-width:640px){
  .sw-row{ grid-template-columns:1fr; gap:6px; }
  .sw-row .input{ min-height:44px; }
}

/* Tabs inside a Settings group */
.set-tabs{ display:flex; flex-wrap:wrap; gap:4px; margin:12px 0 14px; border-bottom:1px solid var(--border); }
.set-tab{ flex:none; background:none; border:0; border-bottom:2px solid transparent; padding:10px 14px; margin-bottom:-1px; font:inherit; font-size:13.5px; color:var(--text-soft, var(--text-mute)); cursor:pointer; white-space:nowrap; }
.set-tab:hover{ color:var(--text); }
.set-tab.active{ color:var(--tint-ink, var(--accent-ink)); font-weight:600; border-bottom-color:var(--accent); }
.set-tab:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; border-radius:6px; }
@media (max-width:760px){
  .set-tabs{ flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:thin; margin-left:-4px; margin-right:-4px; }
  .set-tab{ min-height:44px; padding:10px 14px; }
}

@media (max-width:640px){
  .course-row.course-add{ flex-wrap:wrap; }
  .course-row.course-add .input:first-child{ flex:1 1 100%; }
  .course-row.course-add .course-fee{ flex:1 1 0; }
  .course-row .input, .course-row .btn{ min-height:44px; }
}
.field-note-error{ margin-top:6px; font-size:12.5px; color:var(--red); }
input[aria-invalid="true"]{ border-color:var(--red); }

/* Pipeline views: icon switch, list, calendar. Phone rules are at the end of this block. */
.vsw{ display:inline-flex; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--surface); }
.vsw-btn{ width:38px; height:36px; display:grid; place-items:center; background:transparent; border:0; color:var(--text-mute); cursor:pointer; }
.vsw-btn + .vsw-btn{ border-left:1px solid var(--border); }
.vsw-btn svg{ width:18px; height:18px; }
.vsw-btn:hover{ color:var(--text); }
.vsw-btn.on{ background:var(--accent-soft); color:var(--accent); }
.kcol-more{ align-self:stretch; margin-top:2px; }
.plist-sum{ margin-bottom:8px; }
.plist-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.plist{ width:100%; border-collapse:collapse; font-size:13.5px; }
.plist th{ text-align:left; padding:0; border-bottom:1px solid var(--border); background:var(--surface-2); }
.plist-sort{ display:flex; align-items:center; gap:4px; width:100%; padding:10px 12px; background:transparent; border:0; color:var(--text-mute); font:inherit; font-weight:600; font-size:12.5px; cursor:pointer; }
.plist-sort svg{ width:14px; height:14px; }
.plist td{ padding:8px 12px; border-bottom:1px solid var(--border); vertical-align:middle; }
.plist tr:last-child td{ border-bottom:0; }
.plist-name{ font-weight:600; color:var(--text); text-decoration:none; }
.plist select.input{ min-width:150px; }
.cal-bar{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.cal-title{ flex:1; font-weight:700; font-size:15px; text-align:center; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
.cal-dow{ font-size:11.5px; font-weight:600; color:var(--text-mute); text-align:center; padding:4px 0; }
.cal-cell{ min-height:84px; display:flex; flex-direction:column; align-items:stretch; gap:3px; padding:6px; text-align:left; background:var(--surface); border:1px solid var(--border); border-radius:8px; color:var(--text); cursor:pointer; overflow:hidden; font:inherit; }
.cal-cell.out{ opacity:.45; }
.cal-cell.today .cal-num{ color:var(--accent); font-weight:800; }
.cal-cell.picked{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.cal-num{ font-size:12px; font-weight:600; }
.cal-chip{ font-size:11px; padding:1px 6px; border-radius:6px; background:var(--accent-soft); color:var(--accent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.cal-chip.task{ background:var(--surface-2); color:var(--text-mute); }
.cal-more{ font-size:11px; color:var(--text-mute); }
.cal-dot{ display:none; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.cal-day{ margin-top:14px; }
.cal-item{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 12px; margin-bottom:6px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); text-decoration:none; }
.cal-item-name{ font-weight:600; }
.cal-undated{ margin-top:14px; }
.cal-undated summary{ cursor:pointer; font-weight:600; padding:8px 0; }
@media (max-width: 620px){
  .vsw-btn{ width:44px; height:44px; }
  .page-head > div:last-child{ width:100%; justify-content:space-between; flex-wrap:wrap; }
  .cal-cell{ min-height:46px; padding:4px; align-items:center; }
  .cal-chip, .cal-more{ display:none; }
  .cal-dot{ display:block; }
  .cal-bar .btn, .cal-bar .icon-btn{ min-height:44px; }
  .plist thead{ display:none; }
  .plist, .plist tbody, .plist tr, .plist td{ display:block; width:100%; }
  .plist-row{ padding:10px 12px; border-bottom:1px solid var(--border); }
  .plist td{ border:0; padding:3px 0; display:flex; justify-content:space-between; gap:12px; }
  .plist td::before{ content:attr(data-l); color:var(--text-mute); font-size:12px; }
  .plist select.input{ min-width:0; flex:1; max-width:60%; min-height:44px; }
}

.form-problems{ margin-bottom:14px; padding:12px 14px; border:1px solid var(--red); border-left-width:5px; border-radius:8px; background:var(--red-soft); color:var(--text); font-size:13.5px; }
.form-problems ul{ margin:6px 0 0 18px; padding:0; }
.form-problems li{ margin:2px 0; }
.modal .field-error{ margin-top:6px; padding:5px 9px; border-radius:6px; background:var(--red-soft); color:var(--red); font-size:13px; font-weight:600; }
.input.invalid, select.input.invalid, textarea.input.invalid{ border-color:var(--red); box-shadow:0 0 0 2px var(--red-soft); }

.multi-ok{ position:sticky; bottom:-6px; display:flex; justify-content:flex-end; padding:6px 0 2px; background:var(--surface-2, #1c2233); }
@media (max-width: 620px){ .multi-ok .btn{ min-height:44px; min-width:88px; } .multi-row{ padding:9px 2px; } }

/* Pipeline board: narrower columns and tighter cards, so more of the pipeline fits on screen. */
.kcol{ width:236px; }
.kcard{ padding:9px 11px; }
.kcard-name{ margin-bottom:2px; }
.kcard-org{ margin-bottom:6px; }
.kcard-org:empty{ display:none; }
.kcard-end{ display:inline-flex; align-items:center; gap:6px; }
.kcard-move{ display:grid; place-items:center; width:26px; height:26px; background:transparent; border:0; border-radius:6px; color:var(--text-mute); cursor:pointer; }
.kcard-move:hover{ background:var(--surface-2); color:var(--text); }
.kcard-move svg{ width:15px; height:15px; }
.kadd{ padding:6px 9px; }
.move-list{ display:flex; flex-direction:column; gap:6px; }
.move-item{ display:flex; align-items:center; gap:10px; padding:11px 12px; background:var(--surface); border:1px solid var(--border); border-radius:8px; color:var(--text); font:inherit; text-align:left; cursor:pointer; }
.move-item:hover:not(:disabled){ border-color:var(--accent); }
.move-item.here{ opacity:.55; cursor:default; }
@media (max-width: 620px){ .kcol{ width:min(82vw, 280px); } .kcard-move{ width:36px; height:36px; } .move-item{ min-height:46px; } }

/* Choose columns: tick, and move up or down (or drag) to set the order. */
.colch-list{ display:flex; flex-direction:column; gap:6px; }
.colch-row{ display:flex; align-items:center; gap:8px; padding:6px 8px; border:1px solid var(--border); border-radius:10px; background:var(--surface); }
.colch-row.off{ opacity:.6; }
.colch-row.dragging{ opacity:.35; }
.colch-row.dragover{ border-color:var(--accent); background:var(--accent-soft); }
.colch-row[draggable="true"]{ cursor:grab; }
.colch-grip{ width:18px; color:var(--text-mute); display:grid; place-items:center; flex:none; }
.colch-grip svg{ width:16px; height:16px; }
.colch-name{ flex:1; min-width:0; display:flex; align-items:center; gap:10px; cursor:pointer; padding:6px 0; }
.colch-name span{ overflow:hidden; text-overflow:ellipsis; }
.colch-move{ display:flex; gap:4px; flex:none; }
.colch-btn{ width:32px; height:32px; display:grid; place-items:center; background:var(--surface-2); border:1px solid var(--border); border-radius:8px; color:var(--text-soft, var(--text)); cursor:pointer; }
.colch-btn:disabled{ opacity:.3; cursor:default; }
.colch-btn svg{ width:16px; height:16px; }
.colch-preview{ margin-top:10px; }
@media (max-width: 620px){ .colch-btn{ width:44px; height:44px; } .colch-row{ padding:6px; } .colch-grip{ display:none; } }
.pane-tools{ display:flex; justify-content:flex-end; margin-bottom:10px; }
@media (max-width: 620px){ .pane-tools .btn{ min-height:44px; } }

/* Row actions: two icons on the row, the rest in a menu. A sheet from the bottom on a phone. */
.rm-th{ width:1%; }
.rm-cell{ white-space:nowrap; text-align:right; }
.rm{ display:inline-flex; gap:6px; align-items:center; }
.rm-btn{ width:34px; height:34px; display:grid; place-items:center; background:var(--surface); border:1px solid var(--border); border-radius:8px; color:var(--text-soft, var(--text)); cursor:pointer; }
.rm-btn:hover{ background:var(--surface-2); color:var(--text); }
.rm-btn svg{ width:16px; height:16px; }
.rm-pop{ position:fixed; z-index:400; width:230px; max-height:70vh; overflow:auto; background:var(--surface-popover, var(--surface)); border:1px solid var(--border-strong, var(--border)); border-radius:12px; box-shadow:var(--shadow-lg); padding:6px; }
.rm-pop-title{ display:none; padding:8px 10px 4px; font-weight:700; font-size:13px; }
.rm-item{ width:100%; display:flex; align-items:center; gap:10px; padding:9px 10px; background:transparent; border:0; border-radius:8px; color:var(--text); font:inherit; font-size:13.5px; text-align:left; cursor:pointer; }
.rm-item:hover, .rm-item:focus-visible{ background:var(--surface-2); outline:none; }
.rm-item svg{ width:16px; height:16px; color:var(--text-mute); flex:none; }
@media (max-width: 620px){
  .rm-btn{ width:44px; height:44px; }
  .rm-pop{ left:0; right:0; bottom:0; width:auto; max-height:75vh; border-radius:16px 16px 0 0; padding:8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .rm-pop-title{ display:block; }
  .rm-item{ min-height:50px; font-size:15px; }
}

@media (max-width: 620px){ .bulk-bar .btn{ min-height:44px; } }

/* Students list: search and filters, fee and attendance cells. The name column stays in view when the table scrolls sideways. */
.stu-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.stu-filters .input{ width:auto; min-width:150px; flex:0 1 190px; }
.stu-filters .stu-search{ flex:1 1 260px; min-width:200px; }
.stu-count{ display:flex; gap:12px; align-items:center; min-height:22px; margin:0 2px 8px; font-size:12.5px; color:var(--text-muted, var(--muted)); }
.link-btn{ background:none; border:0; padding:4px 0; color:var(--accent); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; }
.cell-late{ color:var(--red, #b3261e); font-weight:600; }
.stu-table td, .stu-table th{ white-space:nowrap; }
.stu-table .col-check{ position:sticky; left:0; z-index:2; background:var(--surface); }
.stu-table .col-name{ position:sticky; left:34px; z-index:1; background:var(--surface); }
.stu-table tbody tr.row-selected .col-check, .stu-table tbody tr.row-selected .col-name{ background:var(--accent-soft); }
@media (max-width: 620px){
  .stu-filters{ display:grid; grid-template-columns:1fr 1fr; }
  .stu-filters .stu-search{ grid-column:1 / -1; }
  .stu-filters .input{ min-width:0; width:100%; min-height:44px; }
  .stu-count .link-btn{ min-height:44px; }
  .stu-table .col-name{ box-shadow:2px 0 0 var(--border); }
}

/* Send messages and the message editor. */
.msg-top{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:10px; }
.msg-who{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.msg-who .input{ flex:1 1 180px; min-width:0; }
.msg-days{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-size:13px; }
.msg-edit-row{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 10px; }
.msg-text{ width:100%; resize:vertical; min-height:110px; font-family:inherit; line-height:1.45; }
.msg-sample{ white-space:pre-wrap; background:var(--accent-soft); border:1px solid var(--border); border-radius:12px; padding:12px 14px; font-size:13.5px; line-height:1.5; max-height:200px; overflow:auto; }
.msg-note{ margin:12px 0 8px; font-size:12.5px; color:var(--text-soft, var(--text)); }
.msg-rcpts{ margin-top:8px; border:1px solid var(--border); border-radius:12px; max-height:340px; overflow:auto; }
.msg-rcpt{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-bottom:1px solid var(--border); }
.msg-rcpt:last-child{ border-bottom:0; }
.msg-rcpt-main{ display:flex; align-items:center; gap:10px; min-width:0; flex:1; cursor:pointer; }
.msg-rcpt-main input{ width:18px; height:18px; accent-color:var(--accent); flex:none; }
.msg-sent{ background:var(--accent-soft); }
.msg-list{ display:flex; flex-direction:column; gap:8px; }
.msg-row{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; padding:12px; border:1px solid var(--border); border-radius:12px; }
.msg-off{ opacity:.55; }
.msg-main{ min-width:0; flex:1; }
.msg-name{ font-weight:600; font-size:14px; }
.msg-from{ margin-left:8px; font-size:12px; color:var(--text-muted, var(--muted)); font-weight:400; }
.msg-preview{ font-size:12.5px; color:var(--text-soft, var(--text)); margin-top:4px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.msg-actions{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.msg-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.msg-chip{ border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:999px; padding:6px 12px; font:inherit; font-size:12.5px; cursor:pointer; }
.msg-chip:hover{ border-color:var(--accent); color:var(--accent); }
@media (max-width: 620px){
  .msg-top{ grid-template-columns:1fr; }
  .msg-row{ flex-direction:column; }
  .msg-actions{ justify-content:flex-start; }
  .msg-actions .btn, .msg-edit-row .btn, .msg-rcpt .btn{ min-height:44px; }
  .msg-chip{ min-height:40px; }
  .msg-rcpt{ padding:12px; }
  .msg-rcpt-main input{ width:22px; height:22px; }
  .msg-modal .modal-foot .btn{ flex:1 1 auto; min-height:46px; }
  .msg-rcpts{ max-height:300px; }
}
.msg-confirm{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:12px 0 4px; padding:12px 14px; border:1px solid var(--accent); background:var(--accent-soft); border-radius:12px; font-size:13.5px; font-weight:600; position:sticky; top:0; z-index:3; }
.msg-confirm-btns{ display:flex; gap:8px; flex-wrap:wrap; }
@media (max-width: 620px){ .msg-confirm-btns{ width:100%; } .msg-confirm-btns .btn{ flex:1 1 auto; min-height:44px; } }
.msg-check-row{ padding:12px; border-bottom:1px solid var(--border); }
.msg-check-row:last-child{ border-bottom:0; }
.msg-rcpt-head{ position:sticky; top:0; z-index:1; background:var(--surface); font-size:13px; cursor:pointer; justify-content:flex-start; gap:10px; }
.msg-rcpt-head input{ width:18px; height:18px; accent-color:var(--accent); }
@media (max-width: 620px){ .msg-rcpt-head input{ width:22px; height:22px; } }
.msg-empty{ padding:14px; border:1px dashed var(--border); border-radius:12px; }
.msg-switch{ display:inline-flex; align-items:center; gap:8px; font-size:13px; cursor:pointer; min-height:34px; }
.msg-switch input{ width:18px; height:18px; accent-color:var(--accent); }
@media (max-width: 620px){ .msg-switch{ min-height:44px; } .msg-switch input{ width:22px; height:22px; } }
.msg-block{ margin:8px 0; padding:10px 12px; border:1px solid var(--amber, #b7791f); background:var(--amber-soft, #fff7e0); color:var(--text); border-radius:10px; font-size:13px; line-height:1.45; }

/* Fees due page, dashboard cards, reminder times editor */
.rem-card:empty,.fd-card:empty{display:none}
.rem-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.rem-row:last-child{border-bottom:0}
.fd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.fd-box{border:1px solid var(--border);border-radius:10px;padding:12px;cursor:pointer;min-width:0}
.fd-box b{display:block;font-size:17px;margin:2px 0;overflow-wrap:anywhere}
.fd-box.late{border-color:var(--red,#d33)}
.fd-box.late b{color:var(--red,#d33)}
.fd-tabs{display:flex;gap:6px;overflow-x:auto;margin-bottom:12px;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.fd-tab{flex:0 0 auto;border:1px solid var(--border);background:transparent;color:inherit;border-radius:999px;padding:8px 14px;min-height:40px;cursor:pointer;font:inherit;display:inline-flex;align-items:center;gap:8px}
.fd-tab.on{background:var(--brand,#4f46e5);border-color:var(--brand,#4f46e5);color:#fff}
.fd-count{font-size:12px;opacity:.85}
.fd-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.rt-editor{display:flex;flex-direction:column;gap:10px;max-width:640px}
.rt-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--border)}
.rt-name{display:flex;align-items:center;gap:8px;font-weight:600}
.rt-set{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rt-set .input{width:auto;min-height:40px}
.rt-days{width:72px!important}
.rt-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
@media (max-width:640px){
  .fd-grid{grid-template-columns:1fr}
  .fd-box{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
  .fd-box b{margin:0}
  .fd-table thead{display:none}
  .fd-table tr{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:10px 0;border-bottom:1px solid var(--border)}
  .fd-table td{border:0;padding:0}
  .fd-table td[data-label]::before{content:attr(data-label) ": ";color:var(--text-mute)}
  .rt-row{flex-direction:column;align-items:flex-start}
  .fd-bar .btn,.rt-actions .btn{min-height:44px}
}

/* Ready lists for Students */
.ql-bar{display:flex;gap:8px;overflow-x:auto;margin-bottom:12px;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.ql-chip{flex:0 0 auto;border:1px solid var(--border);background:transparent;color:inherit;border-radius:999px;padding:8px 14px;min-height:40px;cursor:pointer;font:inherit}
.ql-chip.on{background:var(--brand,#4f46e5);border-color:var(--brand,#4f46e5);color:#fff}
.ql-add{border-style:dashed;color:var(--text-mute)}
.ql-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.ql-add-form{display:flex;flex-direction:column;gap:8px;margin-top:14px}
@media (max-width:640px){.ql-chip,.ql-row .btn{min-height:44px}}

/* Team filter on the staff attendance sheet */
.att-teams{display:flex;gap:8px;overflow-x:auto;margin-bottom:12px;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.att-teams .chip{flex:0 0 auto;min-height:40px}
@media (max-width:640px){.att-teams .chip{min-height:44px}}

/* Students not in any batch */
.att-addbatch{white-space:nowrap}
@media (max-width:640px){.att-addbatch{min-height:44px;width:100%}}

/* Team report: rows that open to show who was marked what */
.att-clickrow { cursor: pointer; }
.att-clickrow:focus-visible { outline: 2px solid var(--accent, #4c6fff); outline-offset: -2px; }
.att-detail { display: grid; gap: 6px; padding: 6px 4px; }
.att-detail-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
@media (max-width: 640px) { .att-detail-row { font-size: 14px; } }

/* Attendance insights: day tiles and the month register */
.att-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.att-tile { border: 1px solid var(--border, rgba(255,255,255,.1)); border-radius: 10px; padding: 10px 8px; text-align: center; }
.att-tile-n { font-size: 22px; font-weight: 700; }
.att-legend { margin: 0 0 8px; }
.att-grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.att-grid { border-collapse: separate; border-spacing: 0; min-width: 100%; }
.att-grid th, .att-grid td { padding: 6px 4px; text-align: center; white-space: nowrap; }
.att-grid .att-grid-name { position: sticky; left: 0; z-index: 1; text-align: left; background: var(--surface, #14161d); padding-left: 10px; padding-right: 10px; min-width: 130px; }
.att-grid-day { font-size: 12px; font-weight: 500; min-width: 26px; }
.att-grid-cell { font-size: 12px; font-weight: 600; min-width: 26px; }
.att-grid-cell.att-present { color: #3ecf8e; }
.att-grid-cell.att-late { color: #f5b942; }
.att-grid-cell.att-half_day { color: #5aa2ff; }
.att-grid-cell.att-absent { color: #ff6b6b; background: rgba(255,107,107,.12); }
.att-grid-cell.att-leave { color: #9aa0b4; }
@media (max-width: 640px) {
  .att-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .att-grid .att-grid-name { min-width: 100px; }
}

/* Leave */
.lv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.lv-card .lv-big { font-size: 22px; font-weight: 700; margin: 2px 0; }
.lv-row + .lv-row { border-top: 1px solid var(--border, #e5e7eb); padding-top: 10px; margin-top: 10px; }
@media (max-width: 600px) { .lv-cards { grid-template-columns: 1fr 1fr; } .lv-row .btn { width: 100%; } }
.ql-chip.ql-empty{opacity:.6}

/* The Demo card, briefly highlighted when someone presses Schedule demo. */
.card.flash{ box-shadow:0 0 0 3px var(--accent, #2f5bff); transition:box-shadow .3s; }

/* ---------------------------------------------------------------- Demo sheet (slip and receipt on one A4 page) */
.demo-sheet{ color:var(--text); font-size:13.5px; max-width:780px; margin:0 auto; }
.demo-half{ padding:16px 4px 20px; min-height:320px; overflow:visible; }
.demo-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding-bottom:12px; border-bottom:2px solid var(--text); margin-bottom:14px; }
.demo-biz{ display:flex; align-items:center; gap:10px; }
.demo-title{ font-size:18px; font-weight:700; text-align:right; }
.demo-info{ display:flex; gap:10px; padding:3px 0; }
.demo-info .inv-k{ min-width:80px; }
.demo-table{ width:100%; border-collapse:separate; border-spacing:0; margin-top:12px; border:1px solid var(--text-mute, #888); border-radius:4px; overflow:visible; }
.demo-table th, .demo-table td{ border-right:1px solid var(--text-mute, #888); border-bottom:1px solid var(--text-mute, #888); padding:8px 10px; text-align:left; }
.demo-table th:last-child, .demo-table td:last-child{ border-right:0; }
.demo-table tbody tr:last-child td{ border-bottom:0; }
.demo-table th{ font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.demo-table td:first-child{ width:48px; }
.demo-sign{ min-width:150px; height:38px; }
.demo-stamp{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; margin-top:16px; }
.demo-stamp-box{ width:96px; height:96px; border:1px dashed var(--text-mute, #888); border-radius:50%; }
.demo-tear{ border-top:2px dashed var(--text-mute, #888); margin:6px 0; position:relative; height:0; }
.demo-tear span{ position:absolute; left:50%; top:-10px; transform:translateX(-50%); background:var(--surface, #fff); padding:0 10px; font-size:12px; color:var(--text-mute); }
.demo-note{ margin-top:10px; font-size:12.5px; }
.demo-foot{ display:flex; gap:16px; align-items:flex-end; justify-content:space-between; margin-top:10px; }
.demo-foot .demo-note{ flex:1 1 auto; margin:0; font-weight:600; }
.demo-foot .demo-stamp{ margin-top:0; flex:none; }
.demo-foot .demo-stamp-box{ width:72px; height:72px; }
.demo-compact .demo-half{ min-height:0; padding-bottom:8px; }
.demo-modal .modal-body, .demo-modal .modal-card{ overflow:auto; }
@media (max-width:640px){
  .demo-head{ flex-direction:column; }
  .demo-title{ text-align:left; }
  .demo-table th, .demo-table td{ padding:6px; }
  .demo-sign{ min-width:80px; }
}
@media print{
  body.printing-doc .demo-sheet{ max-width:none; height:268mm; display:flex; flex-direction:column; color:#000; font-size:11.5pt; }
  body.printing-doc .demo-half{ flex:1 1 0; min-height:0; overflow:hidden; padding:4mm 0; }
  body.printing-doc .demo-head{ border-bottom-color:#000; }
  body.printing-doc .demo-table, body.printing-doc .demo-table th, body.printing-doc .demo-table td{ border-color:#000; }
  body.printing-doc .demo-tear{ border-top-color:#000; }
  body.printing-doc .demo-tear span{ background:#fff; color:#000; }
  body.printing-doc .demo-stamp-box{ border-color:#000; }
  /* A free demo slip: under half of an A4 page (148 mm), so the other half can be used for a second slip or cut away. */
  body.printing-doc .demo-compact{ height:auto; max-height:140mm; display:block; }
  body.printing-doc .demo-compact .demo-half{ flex:none; overflow:visible; }
}

/* Saving freeze: the rest of the page is blurred and cannot be clicked. An open form stays sharp but cannot be changed until the answer comes. */

/* Staff list: on a phone each person is a card, with the name on top and a label for every value. */
@media (max-width: 620px){
  .staff-table, .staff-table tbody, .staff-table tr, .staff-table td { display:block; width:100%; }
  .staff-table thead { display:none; }
  .staff-table tr { position:relative; border-bottom:1px solid var(--border); padding:10px 12px 10px 44px; }
  .staff-table td { white-space:normal; border:0; padding:3px 0; }
  .staff-table td[data-label]:not(.col-name)::before { content:attr(data-label); display:inline-block; min-width:96px; margin-right:8px; font-size:12px; color:var(--text-muted, var(--muted)); }
  .staff-table td.col-name { position:static; background:none; box-shadow:none; padding-bottom:6px; }
  .staff-table td.col-check { position:absolute; left:12px; top:14px; width:auto; padding:0; background:none; }
  .staff-table td.col-check input { width:20px; height:20px; }
  .staff-table td.rm-cell { padding-top:8px; }
}
.ql-help{min-width:40px;font-weight:700;padding:8px 12px}

/* Reorder handle in the Manage lists window. */
.drag-handle{ width:36px; height:36px; display:grid; place-items:center; background:transparent; border:1px solid var(--border); border-radius:8px; color:var(--text-soft, var(--text)); cursor:grab; flex:none; }
.drag-handle svg{ width:16px; height:16px; }
.drag-handle:active{ cursor:grabbing; }
.sl-sort .ql-row{ background:var(--surface); }
.sl-sort .ql-row.dragging{ box-shadow:0 4px 14px rgba(0,0,0,.25); opacity:.9; position:relative; z-index:1; }
.sl-sort .ql-row .sl-main{ display:flex; align-items:center; gap:10px; min-width:0; flex:1; }
@media (max-width:640px){ .drag-handle{ width:44px; height:44px; } }

/* The one tooltip for the whole site (tipBubble.js). */
.tip-bubble{ position:fixed; z-index:10000; max-width:min(280px, calc(100vw - 16px)); padding:8px 10px; border-radius:8px; background:#111827; color:#fff; font-size:12.5px; line-height:1.4; box-shadow:0 6px 18px rgba(0,0,0,.35); pointer-events:none; white-space:normal; overflow-wrap:anywhere; }
@media (prefers-color-scheme: dark){ .tip-bubble{ background:#e5e7eb; color:#111827; } }
[data-tip]{ -webkit-touch-callout:none; }

/* The help line under a list bar (hintLine.js). */
.hint-line{ margin:-4px 0 12px; padding:8px 12px; border-radius:10px; background:var(--accent-soft); border:1px solid var(--border); font-size:12.5px; line-height:1.45; }

.ql-add{display:inline-flex;align-items:center;gap:6px}
.ql-add .icon{width:13px;height:13px}
body.is-sorting{user-select:none;-webkit-user-select:none;cursor:grabbing}
.drag-handle{touch-action:none}
.task-lead-link.is-done{ text-decoration:line-through; color:var(--text-mute); }
.task-table .task-facts{ margin-top:2px; }
.lead-task-title.is-done { text-decoration: line-through; color: var(--text-mute); }

/* The shared tooltip: dark on a light page and light on a dark page, so it always stands out. */
.tip-bubble{
  position:fixed; z-index:100000; max-width:min(260px, calc(100vw - 16px)); padding:6px 9px; border-radius:8px;
  background:var(--text); color:var(--surface); font-size:12.5px; line-height:1.35; font-weight:500;
  box-shadow:var(--shadow); pointer-events:none; overflow-wrap:anywhere;
}
.tip-bubble[hidden]{ display:none; }

/* A task opened to read. Edit is a separate button. */
.task-view-title{ font-size:18px; line-height:1.3; margin:0 0 6px; overflow-wrap:anywhere; }
.task-view-title.is-done{ text-decoration:line-through; color:var(--text-mute); }
.task-view-desc{ white-space:pre-wrap; overflow-wrap:anywhere; margin:0 0 12px; color:var(--text-soft); }
.task-facts-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px 18px; margin-top:8px; }
.task-fact > div{ overflow-wrap:anywhere; font-weight:500; }
@media (max-width:560px){ .task-facts-grid{ grid-template-columns:minmax(0, 1fr); } }

/* Drag to reorder: the grip is the handle. It works with a mouse, a finger or a pen. */
.sort-grip{ flex:none; display:inline-grid; place-items:center; width:32px; height:32px; padding:0; border:0; background:transparent; color:var(--text-mute); cursor:grab; touch-action:none; border-radius:6px; }
.sort-grip:hover{ background:var(--surface-2, rgba(128,128,128,.12)); color:var(--text); }
.sort-grip svg{ width:16px; height:16px; }
.sort-dragging{ opacity:.5; }
.sort-over-before{ box-shadow:inset 0 3px 0 var(--accent); }
.sort-over-after{ box-shadow:inset 0 -3px 0 var(--accent); }
@media (max-width: 620px){ .sort-grip{ width:44px; height:44px; } }

/* A confirmation after a save: big enough to notice, with a Close button. */

/* Enquiry fields list: the row wraps on a small screen so every control stays reachable. */
.field-row{ flex-wrap:wrap; gap:6px 10px; }
.field-row .prop-main{ flex:1 1 200px; min-width:0; }
.field-row-use{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.field-row .prop-actions{ display:flex; flex-wrap:wrap; gap:2px; }

/* A detail page (one batch): the standard layout for every detail page. */
.back-link{ display:inline-flex; align-items:center; gap:4px; font-size:13px; color:var(--text-soft); text-decoration:none; margin-bottom:8px; }
.back-link:hover{ color:var(--text); }
.bp-head{ align-items:flex-start; gap:12px; flex-wrap:wrap; }
.bp-head .page-sub{ display:flex; align-items:center; gap:8px; }
.bp-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.bp-cards{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; margin:4px 0 10px; }
.bp-card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px 14px; min-width:0; }
.bp-value{ font-weight:600; margin:2px 0; overflow-wrap:anywhere; }
.bp-quiet{ margin:0 0 14px; }
.bp-low{ color:var(--red); }
.bp-menu{ position:absolute; z-index:60; min-width:220px; padding:6px; display:flex; flex-direction:column; }
.bp-menu-item{ text-align:left; background:none; border:0; padding:9px 10px; border-radius:8px; color:var(--text); cursor:pointer; font:inherit; }
.bp-menu-item:hover, .bp-menu-item:focus-visible{ background:var(--surface-2); }
.batch-link{ color:var(--accent); }
@media (max-width: 760px){
  .bp-cards{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .bp-table thead{ display:none; }
  .bp-table tr{ display:grid; grid-template-columns:1fr auto; gap:4px 10px; padding:10px 12px; border-bottom:1px solid var(--border); }
  .bp-table td{ border:0; padding:0; }
  .bp-table td:first-child{ grid-column:1 / -1; }
}
/* The teaching log: one block per day; a module heading row in the course progress table. */
.tl-day + .tl-day{ margin-top:14px; padding-top:10px; border-top:1px solid var(--border); }
.tl-module td{ background:var(--surface-2); }
.tl-dayhead{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:4px; }

/* ---------------------------------------------------------------- Look chooser (header) */
.look-menu{ position:fixed; z-index:90; min-width:170px; max-height:70vh; overflow-y:auto; padding:6px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg); display:flex; flex-direction:column; gap:2px; }
.look-item{ display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border:0; border-radius:var(--radius-sm); background:none; color:var(--text); font:inherit; font-size:13.5px; text-align:left; cursor:pointer; }
.look-item:hover, .look-item:focus-visible{ background:var(--surface-2); outline:none; }
.look-item.active{ background:var(--accent-soft); color:var(--tint-ink); font-weight:600; }
.look-item .icon{ width:15px; height:15px; margin-left:auto; }
.look-dot{ width:12px; height:12px; border-radius:50%; flex:none; box-shadow:0 0 0 2px var(--surface), 0 0 0 3px var(--border-strong); }
.look-name{ flex:1; }
.look-row{ display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:0.5px solid var(--border); flex-wrap:wrap; }
.look-row .input{ min-width:0; }
.look-row input.look-short{ width:120px; }
.look-row input.look-full{ flex:1; min-width:180px; }

/* Tasks calendar: the same month grid as Admission Stages; a task chip is red when overdue and faded when done. */
.cal-chip.task.overdue{ background:var(--red-soft, #fee2e2); color:var(--red); }
.cal-chip.task.done{ text-decoration:line-through; opacity:.6; }
.cal-dot.late{ background:var(--red); }
.cal-day .task-list, .cal-undated .task-list{ margin-bottom:6px; }

/* Tasks calendar, Week view: seven columns, one per day. */
.cal-bar .view-toggle{ margin-left:auto; }
.cal-wk{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
.cal-wk-col{ min-height:160px; padding:6px; background:var(--surface); border:1px solid var(--border); border-radius:8px; display:flex; flex-direction:column; gap:6px; }
.cal-wk-col.today{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.cal-wk-head{ display:flex; align-items:baseline; gap:6px; padding:0; background:none; border:0; font:inherit; color:var(--text); cursor:pointer; text-align:left; }
.cal-wk-head:hover .cal-num{ text-decoration:underline; }
.cal-wk-col.today .cal-num{ color:var(--accent); font-weight:800; }
.cal-wk-list{ display:flex; flex-direction:column; gap:4px; }
.cal-wk-task{ text-align:left; font:inherit; font-size:12px; padding:4px 6px; border-radius:6px; border:0; background:var(--accent-soft); color:var(--accent); cursor:pointer; overflow-wrap:anywhere; }
.cal-wk-task:hover{ filter:brightness(.97); }
.cal-wk-task.overdue{ background:var(--red-soft); color:var(--red); }
.cal-wk-task.done{ text-decoration:line-through; opacity:.6; }
.cal-wk-empty{ font-size:12px; }
@media (max-width:720px){
  .cal-wk{ grid-template-columns:1fr; }
  .cal-wk-col{ min-height:0; }
  .cal-bar{ flex-wrap:wrap; }
  .cal-bar .view-toggle{ margin-left:0; width:100%; }
}

/* Finance pages */
.fin-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; }
.fin-list{ display:flex; flex-direction:column; }
.fin-line{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--border); }
.fin-line:last-child{ border-bottom:0; }
.fin-line.clickable{ cursor:pointer; }
.fin-line.clickable:hover .cell-name{ text-decoration:underline; }
.fin-total{ display:flex; justify-content:space-between; padding-top:10px; margin-top:4px; border-top:1px solid var(--border); font-variant-numeric:tabular-nums; }
.fin-chart{ display:flex; gap:10px; align-items:flex-end; height:170px; padding-top:6px; }
.fin-col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; }
.fin-bars{ flex:1; width:100%; display:flex; align-items:flex-end; justify-content:center; gap:4px; }
.fin-bar{ width:36%; max-width:22px; border-radius:4px 4px 0 0; min-height:0; }
.fin-bar.in, .fin-key.in{ background:var(--green); }
.fin-bar.out, .fin-key.out{ background:var(--red); }
.fin-legend{ display:flex; gap:16px; margin-top:10px; font-size:12px; color:var(--text-mute); }
.fin-key{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; }
.fin-voided td{ color:var(--text-mute); }
.fin-voided td b, .fin-voided td .cell-num{ text-decoration:line-through; }
@media (max-width:900px){ .fin-grid{ grid-template-columns:1fr; } }
.fin-foot td{ border-top:2px solid var(--border); background:var(--surface-2); }
.fin-report-title{ font-size:16px; font-weight:700; margin:0 0 2px; }
.fin-report{ margin-top:8px; }


/* ---- Payroll ---- */
.pay-line{ margin-bottom:12px; }
.pay-line-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; cursor:pointer; }
.pay-line-head:hover{ background:var(--surface-2); }
.pay-line-right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.pay-net{ font-size:15px; }
.pay-chevron{ color:var(--text-mute); display:inline-flex; }
.pay-line-body{ padding:4px 16px 16px; border-top:1px solid var(--border); }
.pay-parts{ width:100%; border-collapse:collapse; margin-top:12px; max-width:520px; }
.pay-parts td{ padding:6px 0; border-bottom:1px solid var(--border); }
.pay-parts .pay-total td{ font-weight:700; border-bottom:none; padding-top:10px; }
.pay-neg{ color:var(--red); }
.pay-warn{ color:var(--amber); font-size:12.5px; }
.pay-reason{ font-size:12.5px; }
.pay-skipped{ margin-top:10px; }
.pay-skipped summary{ cursor:pointer; padding:6px 0; }
.pay-slip-head{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; border-bottom:1px solid var(--border); padding-bottom:12px; }
.pay-slip{ max-width:760px; }

/* ---- Left menu order (drag to reorder) ---- */
.menu-order{ display:grid; gap:12px; max-width:560px; }
.menu-order-group{ border:1px solid var(--border); border-radius:10px; background:var(--surface); overflow:hidden; }
.menu-order-row{ display:flex; align-items:center; gap:6px; padding:4px 8px; }
.menu-order-head{ background:var(--surface-2); font-weight:600; }
.menu-order-page{ border-top:1px solid var(--border); padding-left:28px; }
.menu-order-name{ flex:1; min-width:0; }
.menu-order-row .icon-btn[disabled]{ opacity:.35; cursor:default; }

/* ---- One progress and message box for the whole site (src/lib/busy.js) ---- */
.busy-bar{ position:fixed; top:0; left:0; right:0; height:3px; z-index:6000; opacity:0; pointer-events:none; transition:opacity .15s; background:transparent; }
.busy-bar.on{ opacity:1; }
.busy-bar > i{ display:block; height:100%; width:0; background:var(--accent, #3b6cff); border-radius:0 2px 2px 0; transition:width .25s ease-out; }
.busy-veil{ position:fixed; inset:0; z-index:5000; display:none; align-items:center; justify-content:center; padding:16px; pointer-events:none; }
.busy-veil.on{ display:flex; }
.busy-veil.blocks{ pointer-events:auto; background:rgba(11,15,30,.30); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.busy-veil.blocks.light{ backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(11,15,30,.18); }
.busy-card{ width:min(360px,100%); padding:20px 22px; border-radius:14px; text-align:center; background:var(--surface); color:var(--text); border:1px solid var(--border); box-shadow:0 14px 40px rgba(0,0,0,.28); animation:busy-in .16s ease-out; }
@keyframes busy-in{ from{ opacity:0; transform:translateY(6px) scale(.98); } to{ opacity:1; transform:none; } }
.busy-msg{ font-weight:600; font-size:15px; overflow-wrap:anywhere; }
.busy-track{ height:8px; margin-top:12px; border-radius:999px; background:var(--surface-2, rgba(128,128,128,.18)); overflow:hidden; }
.busy-track > i{ display:block; height:100%; width:0; border-radius:999px; background:var(--accent, #3b6cff); transition:width .25s ease-out; }
.busy-sub{ margin-top:10px; font-size:12.5px; color:var(--text-mute); }
.busy-spin{ width:34px; height:34px; margin:0 auto 12px; border-radius:50%; border:4px solid var(--surface-2, rgba(128,128,128,.2)); border-top-color:var(--accent, #3b6cff); animation:busy-rot .8s linear infinite; }
@keyframes busy-rot{ to{ transform:rotate(360deg); } }
.busy-tick{ width:44px; height:44px; margin:0 auto 10px; border-radius:50%; background:#1f8f55; color:#fff; font-size:24px; line-height:44px; }
.busy-close{ margin-top:14px; }
/* Which parts show in each state. */
.busy-card .busy-spin, .busy-card .busy-tick, .busy-card .busy-track, .busy-card .busy-sub, .busy-card .busy-close{ display:none; }
.busy-card.work .busy-track, .busy-card.work .busy-sub{ display:block; }
.busy-card.open .busy-spin, .busy-card.open .busy-sub{ display:block; }
.busy-card.done .busy-tick{ display:block; }
.busy-card.done .busy-track{ display:block; }
.busy-card.done .busy-track > i{ background:#1f8f55; }
.busy-card.notice .busy-sub{ display:none; }
.busy-card.bad{ text-align:left; border-color:var(--danger, #c0392b); border-left:6px solid var(--danger, #c0392b); }
.busy-card.bad .busy-msg{ color:var(--danger, #c0392b); font-size:14.5px; }
.busy-card.bad .busy-close{ display:inline-block; }
.busy-card.ok .busy-tick{ display:block; }
html.is-saving .overlay .modal{ pointer-events:none; }
html.is-saving .overlay .modal-foot .btn, html.is-saving .overlay .modal-head .icon-btn{ opacity:.6; }
@media (prefers-reduced-motion: reduce){ .busy-spin{ animation:none; } .busy-card{ animation:none; } .busy-veil.blocks{ backdrop-filter:none; -webkit-backdrop-filter:none; } .busy-bar > i, .busy-track > i{ transition:none; } }

/* Buttons at the foot of a full-page form: Save is last, after the fields. */
.form-foot { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border, #e5e7eb); flex-wrap: wrap; }
.form-foot-gap { flex: 1; }

/* One person's pay page: what they get now, and what they would get. */
.pay-now { margin-bottom: 14px; display: flex; flex-direction: column; gap: 4px; }
.pay-now-main { font-size: 17px; }
.pay-preview { margin-top: 14px; padding: 10px 12px; border-radius: 8px; background: var(--accent-soft); color: var(--tint-ink); font-size: 14px; }

/* A pay model the plan does not include: visible, explained, not usable. */
.upgrade-card { margin-bottom: 14px; border: 1px solid var(--accent); background: var(--accent-soft); }
.upgrade-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--tint-ink); text-transform: uppercase; letter-spacing: .04em; }
.upgrade-benefit { margin: 0 0 8px; font-size: 15px; }

/* Higher plans, shown quietly in Settings: a text link that opens a short list. */
.plan-up { padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }

/* Menu items are not text to select, so no text cursor can show or blink on them (it did with caret browsing on). */
.sidebar, .sidebar *{ -webkit-user-select:none; user-select:none; caret-color:transparent; }
.sidebar input, .sidebar textarea{ -webkit-user-select:text; user-select:text; caret-color:auto; }

/* Course plan: a module is a banded header; its topics sit indented under it, behind a guide line. */
.mod-card{ overflow:hidden; padding:0; }
.mod-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 20px; background:var(--surface-2); border-left:4px solid var(--accent); }
.mod-head.mod-none{ border-left-color:#d98a00; }
.mod-tag{ font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:2px; }
.mod-none .mod-tag{ color:#d98a00; }
.mod-name{ font-size:16px; font-weight:700; line-height:1.3; }
.mod-body{ margin:6px 0 10px 28px; border-left:2px solid var(--border); }
.mod-body table{ font-size:13.5px; }
.mod-body th{ font-size:10.5px; }
.mod-body .cell-name{ font-weight:500; font-size:14px; }
.mod-empty{ margin:6px 0 12px 28px; padding:6px 0 6px 16px; border-left:2px solid var(--border); }

/* Written notes on a topic (student page and the editor preview): plain paragraphs, headings and bullets. */
.topic-notes{ margin-top:6px; line-height:1.6; max-width:70ch; }
.topic-notes h3{ font-size:15px; margin:14px 0 4px; }
.topic-notes p{ margin:0 0 10px; white-space:pre-wrap; }
.topic-notes ul{ margin:0 0 10px; padding-left:20px; }

/* Choose or type boxes: a field and a tag box that suggest names while someone types. */
.sg-wrap { position: relative; }
.sg-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; margin: 4px 0 0; padding: 4px; list-style: none; max-height: 240px; overflow: auto; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.sg-list[hidden] { display: none; }
.sg-item { padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--text); }
.sg-item:hover, .sg-item.sg-active { background: var(--surface-2); outline: 1px solid var(--border); }
.sg-new { color: var(--text-soft); }
.sg-new-label { color: var(--text-mute); }
.sg-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 40px; cursor: text; }
.sg-chips { display: contents; }
.sg-chip { display: inline-flex; align-items: center; gap: 4px; }
.sg-x { border: 0; background: transparent; color: var(--text-mute); cursor: pointer; padding: 0 2px; font-size: 14px; line-height: 1; }
.sg-x:hover { color: var(--text); }
.sg-tag-input { flex: 1 1 120px; min-width: 90px; border: 0; outline: 0; background: transparent; font: inherit; color: var(--text); padding: 4px 2px; }

/* The editor for a list of names. */
.nl-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.nl-row, .nl-add { display: flex; gap: 6px; align-items: center; }
.nl-input { flex: 1 1 auto; min-width: 0; }

/* A dialog moves by its title bar. */
.modal-drag { cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
.modal.dragging { box-shadow: 0 18px 48px rgba(0, 0, 0, .28); }
.modal.dragging .modal-drag { cursor: grabbing; }
@media (max-width: 620px) { .modal-drag { cursor: default; touch-action: auto; } }

/* Small buttons in a dialog's title bar, next to Close. */
.modal-head-actions { display: flex; align-items: center; gap: 4px; }

/* ---------- Switch ---------- */
.sw { position: relative; display: inline-block; width: 38px; height: 22px; cursor: pointer; flex: none; }
.sw-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.sw-track { position: absolute; inset: 0; border-radius: 22px; background: #cfd9d4; transition: background .15s; }
.sw-dot { position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.sw-input:checked + .sw-track { background: var(--accent); }
.sw-input:checked + .sw-track .sw-dot { transform: translateX(16px); }
.sw-input:focus-visible + .sw-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.sw-disabled, .sw-disabled .sw-input { cursor: not-allowed; }
.sw-disabled .sw-track { opacity: .55; }

/* ---------- Menu button ---------- */
.mb-menu { position: fixed; z-index: 10001; min-width: 180px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 28px rgba(20,40,30,.18); }
.mb-item { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 7px; padding: 8px 10px; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; }
.mb-item:hover:not(:disabled), .mb-item:focus-visible { background: var(--accent-soft); outline: none; }
.mb-item:disabled { color: var(--text-mute); opacity: .55; cursor: default; }
.mb-danger { color: #b42318; }
.mb-sep { height: 1px; background: var(--border); margin: 4px 0; }

/* ---------- Settings table (Enquiry fields) ---------- */
.ft { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.ft-head, .ft-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 92px 104px 84px 76px; align-items: center; column-gap: 8px; padding: 0 14px; }
.ft-head { padding-top: 9px; padding-bottom: 9px; background: var(--surface-2, #f7faf8); border-bottom: 1px solid var(--border); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-mute); }
.ft-head .c, .ft-row .c { text-align: center; display: flex; justify-content: center; align-items: center; }
.ft-row { padding-top: 11px; padding-bottom: 11px; border-bottom: 1px solid var(--border); }
.ft-row:last-child { border-bottom: 0; }
.ft-row.ft-off .ft-name { color: var(--text-mute); }
.ft-row.ft-locked { background: var(--surface-2, #fbfdfc); }
.ft-name { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ft-sub { font-size: 12px; color: var(--text-mute); margin-top: 1px; }
.ft-chip { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 20px; background: var(--accent-soft); color: var(--accent-ink, var(--accent)); }
.ft-acts { display: flex; justify-content: flex-end; gap: 2px; }
.ft-yes { font-size: 12px; font-weight: 600; color: var(--accent-ink, var(--accent)); }
.ft-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ft-bar p { margin: 0; font-size: 13px; color: var(--text-mute); }
@media (max-width: 640px) {
  .ft-head { display: none; }
  .ft-row { grid-template-columns: 28px minmax(0, 1fr) auto; row-gap: 8px; }
  .ft-row .c { grid-column: 2 / 4; justify-content: space-between; }
  .ft-row .c::before { content: attr(data-label); font-size: 12.5px; color: var(--text-mute); }
}

/* Interns on a phone: a bottom bar of their main pages instead of the drawer (desktop keeps the left menu) */
.intern-tabs{ display:none; }
@media (max-width: 760px){
  body.is-intern .intern-tabs{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:45; background:var(--surface, #fff); border-top:1px solid var(--border); padding:4px 4px calc(4px + env(safe-area-inset-bottom)); }
  body.is-intern .intern-tab{ flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 2px; font-size:11px; color:var(--text-soft); text-decoration:none; border-radius:8px; }
  body.is-intern .intern-tab svg{ width:20px; height:20px; }
  body.is-intern .intern-tab.active{ color:var(--primary, #1f6f4a); font-weight:600; }
  body.is-intern .main{ padding-bottom:72px; }
  body.is-intern #menu-toggle, body.is-intern .menu-toggle{ display:none; }
}

.look-group{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-mute); padding:6px 10px 2px; }

/* Task Library */
.tlb-card{ padding:0; overflow:hidden; }
.tlb-project{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 18px; background:var(--violet-soft); border-left:4px solid var(--violet-ink); }
.tlb-platform{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 18px; background:var(--accent-soft); border-left:4px solid var(--accent); }
.tlb-kicker{ font-size:10.5px; font-weight:700; letter-spacing:.08em; color:var(--text-mute); }
.tlb-title{ font-size:17px; font-weight:700; letter-spacing:-0.01em; }
.tlb-btns{ display:flex; gap:8px; align-items:center; }
.tlb-chips{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:10px 18px; background:var(--surface-2); border-bottom:1px solid var(--border); }
.tlb-chip{ border:1px solid var(--border); background:var(--surface); color:var(--text-soft); border-radius:8px; padding:6px 12px; font-size:13px; font-weight:600; cursor:pointer; display:inline-flex; gap:8px; align-items:center; }
.tlb-chip:hover{ border-color:var(--accent); color:var(--text); }
.tlb-chip.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.tlb-chip-n{ font-size:11.5px; opacity:.85; }
.tlb-icon{ padding:6px 8px; }
.tlb-tabs{ align-items:center; }
.tlb-tabs .btn{ margin-left:6px; margin-bottom:6px; }
.tlb-actions{ display:flex; gap:6px; justify-content:flex-end; align-items:center; white-space:nowrap; }
.tlb-card .table-wrap{ overflow-x:auto; }
.tlb-card table{ width:100%; }
.tlb-wait{ color:var(--amber); }
.tlb-menu{ position:absolute; z-index:60; min-width:230px; padding:6px; display:flex; flex-direction:column; }
.tlb-menu-item{ text-align:left; background:none; border:0; padding:8px 10px; border-radius:6px; font-size:13px; color:var(--text); cursor:pointer; }
.tlb-menu-item:hover{ background:var(--surface-2); }
.tlb-menu-item.danger{ color:var(--red); }
.tlb-two{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.tlb-home{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:10px 12px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2); }
.tlb-link{ margin-left:auto; color:var(--accent); font-weight:600; font-size:13px; }
.tlb-check{ display:flex; gap:8px; align-items:center; font-size:13px; }
.tlb-warn{ background:var(--amber-soft); color:var(--amber); padding:8px 12px; border-radius:8px; margin-bottom:12px; font-size:13px; }
.tlb-per{ display:grid; grid-template-columns:1fr 1.4fr; gap:10px; align-items:center; margin-top:6px; }
.tlb-pick{ max-height:240px; overflow:auto; border:1px solid var(--border); border-radius:8px; }
.tlb-pick-row{ display:flex; gap:10px; align-items:center; padding:8px 12px; border-bottom:1px solid var(--border); font-size:13px; }
.tlb-pick-row:last-child{ border-bottom:0; }
.tlb-pick-row span:nth-of-type(1){ flex:1; }
@media (max-width:640px){ .tlb-two{ grid-template-columns:1fr; } }

/* Hand in block on a task */
.hand-box{ margin:12px 0; display:flex; flex-direction:column; gap:10px; }
.hand-head{ display:flex; gap:10px; align-items:center; }
.hand-row{ display:flex; justify-content:space-between; gap:10px; align-items:center; padding:8px 10px; border:1px solid var(--border); border-radius:8px; word-break:break-word; }
.hand-add{ display:flex; gap:8px; align-items:flex-start; }
.hand-add .input{ flex:1; }