/* ============================================================
   ICE Multi-Panel Platform — Shared Brand Design System
   Design-only static mockups. Pairs with Tailwind CDN.
   One layout language across 3 panels; only accent changes.
   ============================================================ */

:root {
  /* Brand palette */
  --ice-blue: #4B5FE7;
  --ice-blue-light: #5C6CFF;
  --ice-green: #57D46B;
  --ice-green-dark: #45C95A;
  --deep-indigo: #1E2A63;
  --ice-dark: #1B1F2A;        /* icewebb text-ice-dark = rgb(27 31 42) */
  --ice-ink: #374151;         /* icewebb body / prose text (gray-700) */
  --ice-bg: #F7F9FC;          /* icewebb bg-ice-bg = rgb(247 249 252) */
  --ice-border: #E5E7EB;
  --ice-muted: #6B7280;

  /* Status */
  --st-pending: #F59E0B;
  --st-approved: #57D46B;
  --st-rejected: #EF4444;
  --st-hold: #64748B;

  /* §M1 #2, 21 Oct 2026 — "highlight required fields in dark red". A token of
     its own rather than darkening --st-rejected, which also paints .btn-danger,
     the notification dot and the "down" trend arrow: making those the colour of
     a form error would be a different change nobody asked for. This is the red
     for an unanswered or refused field, and only that. */
  --form-error: #B91C1C;

  --shadow-card: 0 4px 24px rgba(75, 95, 231, .08);   /* icewebb shadow-ice-card */
  --shadow-hover: 0 12px 36px rgba(75, 95, 231, .10);
  --shadow-pop: 0 20px 60px rgba(27, 31, 42, .25);
  --radius: 16px;             /* icewebb card radius = 1rem */

  /* Accent — overridden per panel via body class */
  --accent: #4B5FE7;
  --accent-2: #5C6CFF;
  --accent-soft: rgba(75, 95, 231, .10);
  --accent-grad: linear-gradient(135deg, #4B5FE7, #57D46B);
  /* The login page's brand panel (.auth-art). Since §P1 moved the sidebar onto
     --nav-bg this is the token's only remaining job, so it is tinted to match
     the nav you land on after signing in: arriving at an ink-blue HR portal
     from a green login screen read as two different products. */
  --sidebar-grad: linear-gradient(180deg, #3A4048, #23272D);

  /* Nav surface (§P1) — the sidebar is a coloured surface per portal, not a
     white panel with a coloured accent. Every .sb-* rule reads these, so a
     portal's nav is retinted by overriding the tokens and nothing else.
     :root carries the Super Admin greys as the fallback, so a page that
     somehow renders without a theme class is still legible. */
  --nav-bg: #2F343B;
  --nav-fg: #F3F4F6;
  --nav-muted: rgba(255, 255, 255, .55);
  --nav-active: rgba(255, 255, 255, .14);
  --nav-hover: rgba(255, 255, 255, .07);
  --nav-line: rgba(255, 255, 255, .12);
}

/* Per-panel accent themes ---------------------------------- */
/* The client named three nav colours: dark grey for Super Admin, ink blue for
   HR, dark purple for Partner. The accent tokens are unchanged — they colour
   buttons and badges in the content area, which is a separate question from
   what the nav surface looks like. */
body.theme-admin {
  --accent: #4B5FE7; --accent-2: #5C6CFF;
  --accent-soft: rgba(75, 95, 231, .10);
  --sidebar-grad: linear-gradient(180deg, #3A4048, #23272D);
  /* Dark grey */
  --nav-bg: #2F343B;
  --nav-active: rgba(255, 255, 255, .14);
}
body.theme-hr {
  --accent: #57D46B; --accent-2: #45C95A;
  --accent-soft: rgba(87, 212, 107, .12);
  /* 30 Oct 2026 — the HR login panel wears the ICE app's splash blue
     (#0332E4, sampled from the app), lifting a touch at the centre as the
     splash does. The partner login keeps its own ink blue below. */
  --sidebar-grad: radial-gradient(circle at 50% 45%, #0434E9, #0332E4 70%);
  /* 30 Oct 2026 — the app's splash blue across the whole HR panel, was ink
     blue #1D3557. Section labels lifted from .55 so they still read on the
     brighter surface. */
  --nav-bg: #0332E4;
  --nav-active: rgba(255, 255, 255, .18);
  --nav-muted: rgba(255, 255, 255, .72);
}
body.theme-partner {
  --accent: #1E2A63; --accent-2: #2c3d86;
  --accent-soft: rgba(30, 42, 99, .10);
  /* 30 Oct 2026 — Yogesh: #8A00C4 for the partner login and the partner
     panel alike (was ink blue on the login, #513E96 in the nav). White text
     clears 7.8:1 on it; section labels lifted from .55 so they still read. */
  --sidebar-grad: radial-gradient(circle at 50% 45%, #9206CF, #8A00C4 70%);
  --nav-bg: #8A00C4;
  --nav-active: rgba(255, 255, 255, .18);
  --nav-muted: rgba(255, 255, 255, .72);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--ice-bg);
  color: var(--ice-dark);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   APP SHELL — sidebar + topbar + content
   ============================================================ */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: 256px; flex-shrink: 0;
  background: var(--nav-bg);
  color: var(--nav-fg);
  border-right: 1px solid var(--nav-line);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  overflow-y: auto;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }

.sb-brand {
  display: flex; align-items: center; gap: 11px;
  padding: 20px 18px; font-weight: 800; font-size: 17px;
  letter-spacing: .3px;
}
.sb-logo {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  font-size: 16px; font-weight: 900;
  border: none;
}
.sb-tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--nav-muted); padding: 8px 18px 8px;
}
/* §M5 #29, 21 Oct 2026 — "make the B2B and B2C sections visually distinct."
   They were two `.sb-tag` labels in the same grey, one above the other, and a
   partner who sells into both could not tell at a glance which half of the
   menu they were in. Each group gets a colour of its own: a dot beside the
   label and a rail down the items it owns. The nav surface is one dark hue per
   portal, so the two hues are chosen to read on it rather than taken from the
   accent tokens — the Partner accent is navy and vanishes on dark purple. */
/* Yogesh, 22 Oct 2026: "B2B and B2C doghanchi font size increase." Only
   these two, not `.sb-tag` — Overview sits in the same class, and the two
   group labels are the ones a partner navigates by. */
.sb-tag-b2b, .sb-tag-b2c { display: flex; align-items: baseline; gap: 7px; font-size: 12.5px; }
.sb-tag-b2b::before, .sb-tag-b2c::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.sb-tag-b2b::before { background: #6EA8FF; }
.sb-tag-b2c::before { background: #57D46B; }
/* The second half of a group label: what the group is *for*, in words, since
   "B2B" on its own is jargon a new partner has to guess at. */
.sb-tag-note { font-size: 11px; font-weight: 600; letter-spacing: .2px; text-transform: none; opacity: .62; }
.sb-nav-b2b, .sb-nav-b2c { border-left: 2px solid; margin-left: 18px; padding-left: 6px; }
.sb-nav-b2b { border-left-color: rgba(110, 168, 255, .45); }
.sb-nav-b2c { border-left-color: rgba(87, 212, 107, .45); }
.app.nav-collapsed .sb-nav-b2b, .app.nav-collapsed .sb-nav-b2c { border-left: 0; margin-left: 0; padding-left: 12px; }
/* Account Details used to be indented as a child of My Profile. Yogesh,
   22 Oct 2026: "Khaalche 3 fields line madhe asu de, Account details left
   side la ghe" — the three sit on one left edge now, so the class is left
   defined but no longer used by the partner sidebar. Kept because the HR
   sidebar may still want it; nothing here depends on it. */
.sb-link.sb-sub { padding-left: 30px; font-size: 13px; }
.sb-link.sb-sub svg { width: 15px; height: 15px; }
.app.nav-collapsed .sb-link.sb-sub { padding-left: 12px; }

.sb-nav { padding: 4px 12px; display: flex; flex-direction: column; gap: 2px; }
.sb-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  color: var(--nav-fg); text-decoration: none;
  font-size: 14px; font-weight: 500; transition: .15s;
}
/* Idle links sit back a little so the active one reads first. Opacity rather
   than a dimmer colour, so it works on any nav hue without a fourth token. */
.sb-link { opacity: .82; }
.sb-link svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .8; }
.sb-link:hover { background: var(--nav-hover); color: var(--nav-fg); opacity: 1; }
/* The active item is a lighter tint of the nav's own hue, not the accent: the
   Partner accent is navy and would be unreadable on dark purple. The accent
   still leads in the content area, where contrast is not a problem. */
.sb-link.active { background: var(--nav-active); color: var(--nav-fg); font-weight: 600; opacity: 1; }
.sb-link.active svg { opacity: 1; }
/* Locked until the profile is complete — no href, so a click goes nowhere; the
   title says why. */
.sb-link.locked { opacity: .38; cursor: not-allowed; }
.sb-link.locked:hover { background: none; opacity: .38; }
.sb-link:focus-visible { background: var(--nav-hover); opacity: 1; outline: none; }
/* HR sidebar — profile completion card (menu stays open; this says what's left). */
.sb-profile { display: block; margin: 4px 12px 10px; padding: 10px 12px; border-radius: 10px;
  background: var(--nav-hover); color: var(--nav-fg); text-decoration: none; font-size: 12px; transition: .15s; }
.sb-profile:hover { background: var(--nav-active); }
.sb-profile-top { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; }
.sb-profile-cta { font-weight: 600; opacity: .85; white-space: nowrap; }
.sb-profile-bar { display: block; height: 5px; margin: 7px 0 6px; border-radius: 99px; background: rgba(127,127,127,.25); overflow: hidden; }
.sb-profile-bar > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg,#4B5FE7,#57D46B); }
.sb-profile-left { display: block; font-size: 11px; line-height: 1.4; opacity: .8; }
.app.nav-collapsed .sb-profile { display: none; }
/* §O1 #9 — Partner asked for grey idle links and white on hover/selected. The
   opacity trick above still read as white on purple, so the partner nav uses
   real colours instead: #C9CBD1 clears AA (5.3:1) on #513E96, and the jump to
   #fff is what marks the item under the pointer. Icons follow via currentColor. */
body.theme-partner .sb-link { color: #C9CBD1; opacity: 1; }
body.theme-partner .sb-link svg { opacity: 1; }
body.theme-partner .sb-link:hover,
body.theme-partner .sb-link.active { color: #fff; }
body.theme-partner .sb-link.locked,
body.theme-partner .sb-link.locked:hover { color: #C9CBD1; opacity: .38; }
.sb-foot {
  margin-top: auto; padding: 16px 18px;
  border-top: 1px solid var(--nav-line);
  display: flex; align-items: center; gap: 11px; font-size: 13px;
  color: var(--nav-fg);
}
.sb-foot .muted, .sb-foot [style*="opacity"] { color: var(--nav-muted) !important; opacity: 1 !important; }

/* Collapsed nav — the sidebar folds to an icon rail she can widen again. The
   labels are hidden with font-size rather than a wrapper span so the three
   sidebars keep their bare-text links; the icons carry their own size. */
.sb-collapse {
  margin-left: auto; flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px;
  border: 0; background: none; color: var(--nav-fg); opacity: .7;
  display: grid; place-items: center; cursor: pointer;
}
.sb-collapse:hover { background: var(--nav-hover); opacity: 1; }
.sb-collapse svg { width: 17px; height: 17px; }

.app.nav-collapsed .sidebar { width: 74px; }
.app.nav-collapsed .sb-brand { flex-direction: column; gap: 8px; padding: 16px 8px; }
.app.nav-collapsed .sb-brand > div:not(.sb-logo) { display: none; }
.app.nav-collapsed .sb-collapse { margin-left: 0; transform: rotate(180deg); }
.app.nav-collapsed .sb-tag { visibility: hidden; height: 0; padding: 6px 0 0; }
.app.nav-collapsed .sb-nav { padding: 4px 10px; }
.app.nav-collapsed .sb-link { font-size: 0; gap: 0; justify-content: center; padding: 11px 0; }
.app.nav-collapsed .sb-link svg { width: 20px; height: 20px; }
.app.nav-collapsed .sb-foot { justify-content: center; padding: 16px 8px; }
.app.nav-collapsed .sb-foot > div:not(.sb-avatar) { display: none; }
.sb-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--nav-active); color: var(--nav-fg); display: grid; place-items: center;
  font-weight: 700; font-size: 13px;
}
/* The topbar reuses .sb-avatar on a white surface and sets its own colours
   inline, so that one is unaffected by the nav tokens above. */

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

.topbar {
  height: 64px; background: #fff; border-bottom: 1px solid var(--ice-border);
  display: flex; align-items: center; gap: 18px;
  padding: 0 26px; position: sticky; top: 0; z-index: 30;
}
.topbar h1 { font-size: 16.5px; font-weight: 700; margin: 0; }
.topbar .crumb { font-size: 12.5px; color: var(--ice-muted); font-weight: 500; }
.search {
  flex: 1; max-width: 380px; position: relative;
}
.search input {
  width: 100%; height: 40px; border: 1px solid var(--ice-border);
  border-radius: 10px; padding: 0 14px 0 38px; font-size: 13.5px;
  background: var(--ice-bg); color: var(--ice-dark);
}
.search input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); background:#fff; }
.search svg { position: absolute; left: 12px; top: 11px; width: 18px; height: 18px; color: var(--ice-muted); }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--ice-border);
  background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--ice-dark);
  position: relative;
}
.icon-btn:hover { background: var(--ice-bg); }
.icon-btn .dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--st-rejected); border: 2px solid #fff; }

.content { padding: 26px; flex: 1; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head h2 { margin: 0 0 4px; font-size: 20px; font-weight: 800; letter-spacing: -.3px; }
/* §Q1 — "break it in two lines so that we can put Add New Service button on
   the right side, it shud be at this place on all the screens." The header was
   already flex/space-between; what pushed the button onto its own row was this
   paragraph, whose max-content width is one very long line, so .page-head's
   flex-wrap dropped the button rather than shrinking the text. Capping it here
   rather than per page is what makes the button sit in the same corner on
   every portal screen — HR and admin included. */
.page-head p { margin: 0; color: var(--ice-muted); font-size: 13.5px; max-width: 62ch; }

/* ============================================================
   COMPONENTS
   ============================================================ */
.card {
  background: #fff; border: 1px solid var(--ice-border);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
}
.card-pad { padding: 20px; }
.card-head {
  padding: 16px 20px; border-bottom: 1px solid var(--ice-border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.card-head h3 { margin: 0; font-size: 15px; font-weight: 700; }

.grid { display: grid; gap: 18px; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px){ .g-4{grid-template-columns:repeat(2,1fr);} .g-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width: 680px){ .g-4,.g-3,.g-2{grid-template-columns:1fr;} }

/* KPI stat cards */
.stat { position: relative; overflow: hidden; }
.stat .ico {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); margin-bottom: 14px;
}
.stat .ico svg { width: 22px; height: 22px; }
.stat .label { font-size: 13px; color: var(--ice-muted); font-weight: 500; }
.stat .value { font-size: 24px; font-weight: 800; letter-spacing: -.5px; margin: 3px 0 6px; }
.stat .trend { font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.trend.up { color: var(--ice-green-dark); }
.trend.down { color: var(--st-rejected); }
.stat .spark { position:absolute; right:-6px; bottom:-6px; opacity:.14; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 20px; border-radius: 12px; font-size: 13.5px; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: all .15s cubic-bezier(.4,0,.2,1); color: var(--ice-dark); background: #fff;
}
.btn svg { width: 17px; height: 17px; }
.btn-primary { background: var(--accent-grad); color: #fff; }
.btn-primary:hover { filter: brightness(1.05); }
/* 30 Oct 2026 — the Sign in button on the HR and Partner login pages wears
   the colour of the panel beside it. Login only: everything else keeps the
   accent gradient. */
.theme-hr .auth-signin { background: #0332E4; }
.theme-partner .auth-signin { background: #8A00C4; }
/* ...and inside the signed-in HR and Partner panels (`.app`), every brand
   button does the same. Approve / reject / hold keep their meaning colours.
   Scoped to `.app` so the public /hr-registration form, which also carries
   theme-hr, is not touched. */
.theme-hr .app { --btn-brand: #0332E4; --btn-brand-soft: rgba(3, 50, 228, .10); }
.theme-partner .app { --btn-brand: #8A00C4; --btn-brand-soft: rgba(138, 0, 196, .10); }
.theme-hr .app :is(.btn-primary, .btn-grad, .btn-blue),
.theme-partner .app :is(.btn-primary, .btn-grad, .btn-blue) { background: var(--btn-brand); color: #fff; }
.theme-hr .app .btn-ghost,
.theme-partner .app .btn-ghost { background: var(--btn-brand-soft); color: var(--btn-brand); }
.theme-hr .app .btn-outline:hover,
.theme-partner .app .btn-outline:hover { border-color: var(--btn-brand); color: var(--btn-brand); }
.btn-grad { background: var(--accent-grad); color: #fff; }
.btn-grad:hover { filter: brightness(1.05); }
.btn-outline { border-color: var(--ice-border); background: #fff; color: var(--ice-dark); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-ghost { background: var(--accent-soft); color: var(--accent); }
.btn-ghost:hover { filter: brightness(.97); }
.btn-success { background: var(--ice-green); color: #fff; }
.btn-success:hover { background: var(--ice-green-dark); }
.btn-danger { background: var(--st-rejected); color: #fff; }
.btn-danger:hover { filter: brightness(.95); }
.btn-hold { background: var(--st-hold); color: #fff; }
/* A fixed blue, not the theme accent: §R2 asks for the nominate actions to be
   blue "like the Infosys logo colour", and the HR portal's own accent is green.
   Kept here rather than inline so Trainings and Sports cannot drift apart. */
.btn-blue { background: var(--ice-blue); color: #fff; }
.btn-blue:hover { filter: brightness(1.08); }
.btn-sm { height: 34px; padding: 0 12px; font-size: 12.5px; border-radius: 10px; gap: 6px; }
/* §Q1 — a 17px icon on a 34px row button crowds the label. Row actions carry
   an icon now (Edit, Delete, Publish, Relaunch, Complete Payment, View), so
   this is the difference between "icons help" and "icons shout". */
.btn-sm svg { width: 14.5px; height: 14.5px; }

/* §Q1 — the row actions whose icon carries the whole meaning: Edit, Delete,
   View. Their label moves into title/aria-label, so the button still explains
   itself on hover and is still announced to a screen reader. Square, so a
   column of them lines up down the table. The ones that name an outcome —
   Publish, Complete Payment, Relaunch — keep their words, because no icon
   means "complete payment". */
.btn-icon-only { width: 34px; padding: 0; gap: 0; }
.btn-icon-only svg { width: 15.5px; height: 15.5px; }
/* With the word gone, colour is the only thing left saying "this destroys
   something", so the trash reads red rather than accent. */
.btn-icon-only.act-delete { background: rgba(239, 68, 68, .08); color: #B91C1C; border-color: transparent; }
.btn-icon-only.act-delete:hover { background: rgba(239, 68, 68, .16); filter: none; }
.btn-lg { height: 48px; padding: 0 28px; font-size: 15px; border-radius: 14px; }
.btn-block { width: 100%; }

/* Badges */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.b-pending { color: #B45309; background: #FEF3C7; }
.b-approved { color: #15803D; background: #DCFCE7; }
.b-rejected { color: #B91C1C; background: #FEE2E2; }
.b-hold { color: #475569; background: #F1F5F9; }
.b-info { color: #3730A3; background: #E0E7FF; }
.b-plain { color: var(--ice-muted); background: var(--ice-bg); }
.badge.no-dot::before { display: none; }
.tag { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:7px; font-size:11.5px; font-weight:600; background:var(--ice-bg); color:var(--ice-muted); border:1px solid var(--ice-border); }

/* Tables */
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl thead th {
  text-align: left; padding: 12px 16px; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .5px; color: var(--ice-muted); font-weight: 700; background: var(--ice-bg);
  border-bottom: 1px solid var(--ice-border); white-space: nowrap;
}
.tbl tbody td { padding: 13px 16px; border-bottom: 1px solid var(--ice-border); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover { background: #FAFBFF; }
.tbl.tbl-static tbody tr:hover { background: transparent; cursor: default; }
.tbl .u { display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center; font-weight: 700; font-size: 12.5px; color: #fff;
  background: var(--accent-grad);
}
.avatar.sq { border-radius: 9px; }
.muted { color: var(--ice-muted); }
.small { font-size: 12px; }
.strong { font-weight: 700; }

/* The sentence under a card heading. §M2 #5, 21 Oct 2026 — "increase the
   subtitle font size (approximately two points larger)" — applied then to
   the registration form, which carried its own copy of this rule, and
   extended to the portal cards on 22 Oct when Yogesh pointed at Add
   Service: "hyacha font motha nahi kela aahe, subtitle cha… 2 point ne
   motha kara."

   A class of its own rather than two points on `.small`. That token is 12px
   on roughly sixty lines across both portals — field hints, table meta, the
   "(optional)" beside a label — and growing all of it is a change to the
   whole product, not to the line somebody could not read. Put this class on
   a card subtitle as you meet one; leave `.small` where it is. */
.sec-sub { font-size: 14px; color: var(--ice-muted); line-height: 1.55; }

/* Forms */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; }
.field label .req { color: var(--form-error); }
/* §D6 — the same red asterisk, on a section heading rather than a field label.
   The rule above is scoped to `.field label`, so a `.req` in an <h3> rendered as
   a plain black star: the mark was there and did not read as one. `.need-one`
   is the pill that says what the section needs, lifted from the sign-up form,
   which had defined both of these page-locally. */
.req { color: var(--form-error); font-weight: 800; }
.need-one {
  display: inline-flex; align-items: center; margin-left: 10px;
  font-size: 11.5px; font-weight: 700; color: var(--ice-muted);
  background: var(--ice-bg); border: 1px solid var(--ice-border);
  border-radius: 999px; padding: 2px 10px; white-space: nowrap;
  vertical-align: middle;
}
.field .hint { font-size: 11.5px; color: var(--ice-muted); margin-top: 5px; }
/* §O2 — Round 3 #24, #25. The message under a wrong field and the red box
   around it, for every portal form (form-check.js and <x-field-error>). The
   sign-up page had these page-locally; the portal forms had neither, so a
   server error showed only in the list at the top of the page. */
.field-err { display: flex; align-items: flex-start; gap: 7px; margin-top: 6px; font-size: 12.5px; font-weight: 600; line-height: 1.45; color: var(--form-error, #B91C1C); }
.input.is-bad, .select.is-bad, .textarea.is-bad, input.is-bad, select.is-bad, textarea.is-bad { border-color: var(--form-error, #B91C1C) !important; background: rgba(185, 28, 28, .045); }
.input.is-bad:focus, .select.is-bad:focus, .textarea.is-bad:focus { outline: none; box-shadow: 0 0 0 3px rgba(185, 28, 28, .16); }
.fc-flash { animation: fc-flash 1.2s ease-out 1; }
@keyframes fc-flash { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .45); } 100% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } }
/* Segmented switch between two whole panels — Services / Gifts on Orders &
   Quotes (§P6). Built on .tab so switchTab() drives it, with the underline
   look overridden: these read as a pair of buttons, not as a second row of
   tabs above the real ones. */
.seg {
  display: inline-flex; gap: 5px; padding: 5px; border-radius: 13px;
  background: var(--ice-bg); border: 1px solid var(--ice-border);
}
.seg .tab.seg-btn {
  display: flex; align-items: center; gap: 8px; margin: 0;
  padding: 9px 17px; border-radius: 9px; border-bottom: 0;
  color: var(--ice-muted); background: none;
}
.seg .tab.seg-btn svg { width: 16px; height: 16px; }
.seg .tab.seg-btn:hover { color: var(--ice-dark); }
.seg .tab.seg-btn.active {
  background: #fff; color: var(--ice-dark); border-bottom-color: transparent;
  box-shadow: 0 1px 3px rgba(24,28,64,.12);
}

/* Heading above a section that owns its own tab bar — Orders & Quotes renders
   one per half of the business (§P6). */
.section-title {
  margin: 0 0 12px; font-size: 15px; font-weight: 800; letter-spacing: -.2px;
  display: flex; align-items: center; gap: 9px;
}
.section-title::before {
  content: ''; width: 4px; height: 17px; border-radius: 3px; background: var(--accent-grad, var(--accent));
}

/* Remove-this-row button inside a repeatable form table (Duration & Pricing).
   Quiet until hovered — it sits on every row, and a column of red trash icons
   would read as a warning about the data rather than a control. */
.row-del {
  width: 32px; height: 32px; border-radius: 9px; border: 1px solid transparent;
  background: none; color: var(--ice-muted); display: grid; place-items: center;
  cursor: pointer; transition: .15s;
}
.row-del svg { width: 16px; height: 16px; }
.row-del:hover { background: rgba(220,38,38,.09); border-color: rgba(220,38,38,.25); color: #dc2626; }

/* Current-logo preview above the replace-file input on My Profile. */
.logo-preview {
  width: 96px; height: 96px; margin-bottom: 9px; padding: 8px;
  border: 1px solid var(--ice-border); border-radius: 12px; background: #fff;
  display: grid; place-items: center;
}
.logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.input, .select, .textarea {
  width: 100%; border: 1px solid var(--ice-border); border-radius: 12px;
  padding: 11px 13px; font-size: 13.5px; background: #fff; color: var(--ice-dark);
  font-family: inherit;
}
.input:focus, .select:focus, .textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.textarea { min-height: 96px; resize: vertical; }
.input-group { display: grid; gap: 16px; }
.ig-2 { grid-template-columns: 1fr 1fr; }
.ig-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width:680px){ .ig-2,.ig-3{grid-template-columns:1fr;} }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }
.upload {
  display: block;   /* it is usually a <label>, which is inline by default and collapses the box */
  border: 2px dashed var(--ice-border); border-radius: 12px; padding: 26px; text-align: center;
  color: var(--ice-muted); background: var(--ice-bg); cursor: pointer;
}
.upload:hover { border-color: var(--accent); color: var(--accent); }
.upload svg { width: 30px; height: 30px; margin-bottom: 8px; }

/* Chips / filter pills */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--ice-border); background: #fff; color: var(--ice-dark); cursor: pointer; white-space: nowrap;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--ice-border); margin-bottom: 20px; flex-wrap: wrap; }
.tab {
  padding: 11px 16px; font-size: 13.5px; font-weight: 600; color: var(--ice-muted);
  border-bottom: 2px solid transparent; cursor: pointer; text-decoration: none; margin-bottom: -1px;
}
.tab:hover { color: var(--ice-dark); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Chart placeholders */
.chart { height: 240px; display: flex; align-items: flex-end; gap: 10px; padding: 10px 4px 0; }
.bar { flex: 1; border-radius: 7px 7px 0 0; background: var(--accent-grad); opacity: .85; min-height: 8px; position: relative; }
.bar:hover { opacity: 1; }
.chart-line { width: 100%; height: 240px; }
.donut {
  width: 170px; height: 170px; border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(var(--ice-blue) 0 45%, var(--ice-green) 45% 72%, var(--st-pending) 72% 88%, var(--ice-border) 88% 100%);
  display: grid; place-items: center; position: relative;
}
.donut::after { content: ""; position: absolute; inset: 26px; background: #fff; border-radius: 50%; }
.donut .dn-c { position: relative; z-index: 1; text-align: center; }
.legend { display: flex; flex-direction: column; gap: 12px; }
.legend .li { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.legend .sw { width: 12px; height: 12px; border-radius: 4px; }

/* Progress */
.progress { height: 8px; border-radius: 999px; background: var(--ice-border); overflow: hidden; }
.progress > i { display: block; height: 100%; border-radius: 999px; background: var(--accent-grad); }

/* Login shell */
.auth {
  min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr;
}
@media (max-width: 900px){ .auth { grid-template-columns: 1fr; } .auth .auth-art{ display:none; } }
.auth-art {
  background: var(--sidebar-grad); color: #fff; position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; padding: 46px;
}
.auth-art::before {
  content:""; position:absolute; width:420px; height:420px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%);
  top:-120px; right:-120px;
}
.auth-art::after {
  content:""; position:absolute; width:320px; height:320px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.12), transparent 70%);
  bottom:-100px; left:-80px;
}
.auth-form { display: grid; place-items: center; padding: 40px; }
.auth-box { width: 100%; max-width: 380px; }
.auth-badge {
  display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px;
  background: var(--accent-soft); color: var(--accent); font-size:12px; font-weight:700; margin-bottom:18px;
}

/* Popup / modal */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(27,31,42,.5); backdrop-filter: blur(2px);
  display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal {
  background: #fff; border-radius: 18px; width: 100%; max-width: 520px;
  box-shadow: var(--shadow-pop); max-height: 92vh; overflow-y: auto;
}
.modal-head { padding: 20px 22px; border-bottom: 1px solid var(--ice-border); display: flex; align-items: center; justify-content: space-between; }
.modal-head h3 { margin: 0; font-size: 17px; font-weight: 700; }
.modal-body { padding: 22px; }
.modal-foot { padding: 16px 22px; border-top: 1px solid var(--ice-border); display: flex; gap: 10px; justify-content: flex-end; }
.x-btn { border: none; background: var(--ice-bg); width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 16px; color: var(--ice-muted); }

/* The conversation on a booking (x-booking-thread), inside the Reply modal on
   both the HR and the partner side. It scrolls: a ten-message thread must not
   push the box she is typing in off the bottom of the dialog, which is the
   whole complaint that moved it in here. */
.chat-thread {
  display: flex; flex-direction: column; gap: 10px;
  max-height: 46vh; overflow-y: auto; padding: 4px 2px 2px;
  margin-bottom: 16px;
}
.chat-line { display: flex; }
.chat-line.is-mine { justify-content: flex-end; }
.chat-bubble {
  max-width: 82%; padding: 9px 12px; border-radius: 14px; font-size: 13px; line-height: 1.5;
  background: var(--ice-bg); border: 1px solid var(--ice-border);
}
/* Colour by who is speaking, not by which side is reading — so a line looks
   the same on both screens and the three voices never blur into two. */
.chat-bubble.from-hr { background: rgba(87,212,107,.12); border-color: rgba(69,201,90,.35); }
.chat-bubble.from-partner { background: rgba(110,168,255,.12); border-color: rgba(110,168,255,.35); }
.chat-bubble.from-ice { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.35); }
.chat-who { font-size: 11.5px; font-weight: 700; margin-bottom: 3px; }
.chat-when { font-weight: 500; color: var(--ice-muted); margin-left: 6px; }
.chat-body { white-space: pre-line; overflow-wrap: anywhere; }

/* Label/value pairs in a details dialog (My Bookings › View). Two columns on
   anything wider than a phone, stacked below that — a label and its value on
   one cramped line is how a date ends up reading as part of a venue name. */
.kv { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 1px 14px; margin: 0; font-size: 13px; }
.kv dt { color: var(--ice-muted); padding: 7px 0; }
.kv dd { margin: 0; padding: 7px 0; font-weight: 600; overflow-wrap: anywhere; }
.kv dt + dd { border-bottom: 1px solid var(--ice-border); }
.kv dt { border-bottom: 1px solid var(--ice-border); }
.kv dt:last-of-type, .kv dd:last-of-type { border-bottom: 0; }
.kv-head { text-transform: uppercase; letter-spacing: .4px; margin: 16px 0 6px; }
.kv-list { margin: 0; padding-left: 18px; line-height: 1.7; }
@media (max-width: 560px) {
  .kv { grid-template-columns: 1fr; gap: 0; }
  .kv dt { padding-bottom: 0; border-bottom: 0; }
  .kv dd { padding-top: 2px; }
}

.alert { display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px; font-size: 13px; align-items: flex-start; }
.alert svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
/* Compact — a one-line note beside a form's buttons, not a message to stop and read. */
.alert-sm { gap: 8px; padding: 8px 12px; border-radius: 10px; font-size: 12px; line-height: 1.45; align-items: center; width: fit-content; max-width: 100%; }
.alert-sm svg { width: 15px; height: 15px; margin-top: 0; }
.alert-info { background: #EEF2FF; color: #3730A3; }
.alert-warn { background: #FEF3C7; color: #92400E; }
.alert-success { background: #DCFCE7; color: #166534; }

.divider { height: 1px; background: var(--ice-border); margin: 20px 0; }
hr.soft { border: none; border-top: 1px solid var(--ice-border); margin: 18px 0; }

/* Utility */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.wrap { flex-wrap: wrap; }
.mt-1{margin-top:6px;}.mt-2{margin-top:12px;}.mt-3{margin-top:18px;}.mt-4{margin-top:24px;}
.mb-2{margin-bottom:12px;}.mb-3{margin-bottom:18px;}
.text-accent { color: var(--accent); }
.w-full{width:100%;}

/* Mobile sidebar collapse note */
@media (max-width: 860px){
  .sidebar { position: fixed; left: 0; top: 0; z-index: 60; transform: translateX(-100%); transition:.2s; box-shadow: var(--shadow-pop); }
  .sidebar.show { transform: translateX(0); }
  .menu-toggle { display: grid !important; }
  .app.nav-collapsed .sidebar { width: 256px; }
  .app.nav-collapsed .sb-brand { flex-direction: row; gap: 11px; padding: 20px 18px; }
  .app.nav-collapsed .sb-brand > div:not(.sb-logo),
  .app.nav-collapsed .sb-foot > div:not(.sb-avatar) { display: block; }
  .app.nav-collapsed .sb-tag { visibility: visible; height: auto; padding: 8px 18px; }
  .app.nav-collapsed .sb-link { font-size: 14px; gap: 12px; justify-content: flex-start; padding: 10px 12px; }
  /* 30 Oct 2026 — the collapse button is the drawer's ✕ on a phone (ui.js
     toggleNavCollapse), shown whatever the desktop setting is. */
  .sidebar .sb-collapse, .app.nav-collapsed .sb-collapse { display: grid; transform: none; margin-left: auto; opacity: .9; }
  .sidebar .sb-collapse svg { display: none; }
  .sidebar .sb-collapse::before { content: "\2715"; font-size: 17px; line-height: 1; }
  .sb-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(15, 18, 30, .45); opacity: 0; pointer-events: none; transition: opacity .2s; }
  .sb-backdrop.show { opacity: 1; pointer-events: auto; }
  body.sb-locked { overflow: hidden; }
}
.menu-toggle { display: none; }

/* User menu dropdown (top-bar avatar) */
.user-menu { position: relative; }
.um-trigger { border: none; background: none; padding: 0; cursor: pointer; display: block; }
.um-drop {
  position: absolute; right: 0; top: calc(100% + 10px);
  background: #fff; border: 1px solid var(--ice-border); border-radius: 14px;
  box-shadow: var(--shadow-pop); min-width: 252px; padding: 6px; z-index: 60; display: none;
}
.um-drop.open { display: block; }
/* Profile panel head — the account's own identity: a large avatar, the name,
   then the identifiers she quotes to other people (Employer Code, plan). It is
   centred because it reads as a card about her, not as a list of actions. */
.um-head { padding: 16px 14px 14px; border-bottom: 1px solid var(--ice-border); margin-bottom: 6px; text-align: center; }
.um-avatar {
  width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 10px;
  display: grid; place-items: center; font-weight: 800; font-size: 21px;
}
.um-name { font-size: 15px; font-weight: 800; letter-spacing: -.2px; }
.um-meta { margin-top: 8px; font-size: 11.5px; color: var(--ice-muted); line-height: 1.5; }
.um-meta .strong { color: var(--ice-dark); letter-spacing: .4px; }
.um-meta .badge { margin-left: 5px; vertical-align: middle; }
.um-plan-link {
  display: inline-block; margin-top: 9px; font-size: 12px; font-weight: 700;
  color: var(--accent); text-decoration: none;
}
.um-plan-link:hover { text-decoration: underline; }
.um-item {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 9px;
  font-size: 13.5px; font-weight: 500; color: var(--ice-dark); text-decoration: none; cursor: pointer;
}
.um-item:hover { background: var(--ice-bg); }
.um-item svg { width: 17px; height: 17px; color: var(--ice-muted); }
.um-item.danger, .um-item.danger svg { color: var(--st-rejected); }
.um-sep { height: 1px; background: var(--ice-border); margin: 6px 4px; }

/* Row "view details" icon + auto-injected detail popup */
.tbl th.act-col, .tbl td.act-cell { width: 46px; text-align: center; }
.icon-view {
  width: 32px; height: 32px; border: 1px solid var(--ice-border); background: #fff;
  border-radius: 8px; color: var(--accent); cursor: pointer; display: inline-grid; place-items: center; transition: .15s;
}
.icon-view:hover { background: var(--accent-soft); border-color: var(--accent); }
.icon-view svg { width: 16px; height: 16px; }
.dl-row { display: flex; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--ice-border); }
.dl-row:last-child { border-bottom: none; }
.dl-k { width: 148px; flex-shrink: 0; font-size: 11.5px; font-weight: 700; color: var(--ice-muted); text-transform: uppercase; letter-spacing: .4px; padding-top: 2px; }
.dl-v { font-size: 14px; color: var(--ice-dark); font-weight: 500; line-height: 1.5; }

/* §W7 — the topbar bell (11 Sep 2026). Shares .user-menu / .um-drop with the
   profile menu so one toggle and one click-outside serve both. */
.bell-drop { min-width: 340px; max-width: 380px; padding: 0 0 6px; }
.bell-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--ice-border); font-size: 13.5px; }
.bell-link { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; font-weight: 700; color: var(--accent); cursor: pointer; }
.bell-link:hover { text-decoration: underline; }
.bell-item {
  display: flex; gap: 11px; width: 100%; text-align: left; padding: 10px 14px; border: 0; background: none;
  font: inherit; color: var(--ice-dark); cursor: pointer; border-bottom: 1px solid var(--ice-bg);
}
.bell-item:hover { background: var(--ice-bg); }
.bell-item.unread { background: var(--accent-soft); }
.bell-item.unread:hover { background: var(--accent-soft); filter: brightness(.97); }
.bell-ico { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px; background: #fff; border: 1px solid var(--ice-border); display: grid; place-items: center; color: var(--accent); }
.bell-ico svg { width: 15px; height: 15px; }
.bell-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bell-title { font-size: 13px; font-weight: 700; line-height: 1.35; }
.bell-item.unread .bell-title::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-left: 6px; vertical-align: middle; }
.bell-body { font-size: 12.5px; color: var(--ice-muted); line-height: 1.4; }
.bell-ago { font-size: 11px; color: var(--ice-muted); }
.bell-empty { padding: 18px 14px; line-height: 1.5; }
/* The full page */
.notif-list .bell-item { padding: 14px 16px; border-bottom: 1px solid var(--ice-border); }
.notif-list .bell-title { font-size: 14px; }
.notif-list .bell-body { font-size: 13px; }

/* §W8 — the topbar search is a <form> now; results page lines reuse the
   bell's list styling. */
form.search { margin: 0; }
.srch-group { margin-bottom: 18px; }
.srch-group h3 { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--ice-muted); }
.srch-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-decoration: none; color: var(--ice-dark); border-bottom: 1px solid var(--ice-bg); }
.srch-item:last-child { border-bottom: 0; }
.srch-item:hover { background: var(--ice-bg); }
.srch-title { font-size: 14px; font-weight: 700; }
.srch-meta { font-size: 12.5px; color: var(--ice-muted); margin-top: 2px; }
.srch-badge { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--ice-muted); white-space: nowrap; }