/* ============================================================
   INSTANT COSMETICS — Platform Design System  (ic.css)
   Clinical platform · crimson accent on warm off-white
   Three shells: marketing · portal app · WordPress admin
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

/* ---------- Tokens ---------- */
:root {
  /* Brand neutrals — warm off-white */
  --ic-canvas: #faf9f5;
  --ic-paper: #ffffff;
  --ic-paper-2: #f5f3ec;
  --ic-ink: #1b1418;
  --ic-ink-2: #4a3a40;
  --ic-ink-3: #7a6970;
  --ic-faint: #b0a0a8;
  --ic-line: #ebe4d8;
  --ic-line-2: #ddd5c5;

  /* Brand colour — deep crimson + accents */
  --ic-primary: #a6093d;
  --ic-primary-2: #7c0a2e;
  --ic-primary-3: #1b1418; /* dark sidebar (near-black, warm undertone) */
  --ic-primary-tint: #fdeef3;
  --ic-primary-tint2: #f9d8e2;

  --ic-crimson-50: #fdeef3;
  --ic-crimson-100: #f9d8e2;
  --ic-crimson-200: #f0b3c5;
  --ic-crimson-300: #e088a3;

  /* Legacy accent kept for compatibility — softened to a warmer tone that pairs with crimson */
  --ic-accent: #c0185c;
  --ic-accent-2: #8e1f4f;
  --ic-accent-tint: #fde7ef;

  /* Sidebar surface — dark warm */
  --ic-side-bg: #1b1418;
  --ic-side-bg-2: #261a20;
  --ic-side-text: #f5e8ec;
  --ic-side-muted: #a0848e;
  --ic-side-active: rgba(255, 255, 255, 0.1);

  /* Semantic */
  --ic-success: #237a4d;
  --ic-success-tint: #dff0e6;
  --ic-warn: #b8801f;
  --ic-warn-tint: #faecd5;
  --ic-danger: #b22a2a;
  --ic-danger-tint: #f8dada;
  --ic-info: #2e5f7a;
  --ic-info-tint: #dfeaf0;

  /* Type — single grotesk family throughout (--ic-serif kept as a token name
     for display-weight headings; the family is the same as --ic-sans). */
  --ic-serif:
    "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ic-sans:
    "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ic-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Radius + shadow */
  --r-sm: 7px;
  --r: 11px;
  --r-lg: 16px;
  --r-xl: 22px;
  --sh-1: 0 1px 2px rgba(27, 20, 24, 0.05), 0 1px 3px rgba(27, 20, 24, 0.04);
  --sh-2:
    0 4px 14px -6px rgba(27, 20, 24, 0.12), 0 1px 3px rgba(27, 20, 24, 0.05);
  --sh-3:
    0 22px 50px -22px rgba(27, 20, 24, 0.3),
    0 4px 14px -8px rgba(27, 20, 24, 0.12);

  /* WordPress admin (authentic) */
  --wp-bg: #f0f0f1;
  --wp-menu: #1d2327;
  --wp-menu-sub: #2c3338;
  --wp-menu-tx: #f0f0f1;
  --wp-menu-ic: #a7aaad;
  --wp-blue: #2271b1;
  --wp-blue-700: #135e96;
  --wp-text: #3c434a;
  --wp-text-2: #646970;
  --wp-border: #c3c4c7;
  --wp-line: #dcdcde;
  --wp-white: #fff;
  --wp-green: #00a32a;
  --wp-red: #d63638;
  --wp-orange: #dba617;
  --wp-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,
    Cantarell, "Helvetica Neue", sans-serif;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}

img.img-fluid,
img {
  display: block;
  max-width: 100%;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
a {
  color: inherit;
  text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
p {
  margin: 0;
}
::selection {
  background: var(--ic-primary-tint2);
}

/* --- Global accessibility ------------------------------------------------ */
/* Keyboard-only focus ring for anything that doesn't define its own. Pointer
   clicks don't match :focus-visible, so mouse users see nothing extra.
   Components with their own :focus ring (class-level) out-specify this. */
:focus-visible {
  outline: 2px solid var(--ic-primary);
  outline-offset: 2px;
  border-radius: 3px;
}
/* Lock background scroll while the mobile sidebar drawer is open
   (portal.js toggles body.app-side-open on burger open/close). */
body.app-side-open {
  overflow: hidden;
}
/* Respect reduced-motion preferences — neutralise transitions/animations. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Global toast (window.icToast) --------------------------------------- */
.ic-gtoast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  max-width: 380px;
  padding: 13px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #fff;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.ic-gtoast.show {
  opacity: 1;
  transform: translateY(0);
}
.ic-gtoast[hidden] {
  display: none;
}
.ic-gtoast[data-type="error"] {
  background: var(--ic-danger);
}
.ic-gtoast[data-type="success"] {
  background: var(--ic-success);
}
@media (max-width: 575px) {
  .ic-gtoast {
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-width: none;
  }
}

/* ============================================================
   BRAND PRIMITIVES (used by marketing + portal)
   ============================================================ */
.ic {
  font-family: var(--ic-sans);
  color: var(--ic-ink);
  background: var(--ic-canvas);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.006em;
}

/* Type helpers */
.display {
  font-family: var(--ic-serif);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.022em;
}
.serif {
  font-family: var(--ic-serif);
}
.mono {
  font-family: var(--ic-mono);
}
.eyebrow {
  font-family: var(--ic-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ic-ink-3);
}
.muted {
  color: var(--ic-ink-2);
}
.dim {
  color: var(--ic-ink-3);
}

/* Buttons */
.btn {
  --bg: var(--ic-ink);
  --fg: var(--ic-paper);
  --bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--ic-sans);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -0.01em;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  border: 1.5px solid var(--bd);
  cursor: pointer;
  transition: all 0.16s ease;
  white-space: nowrap;
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--sh-2);
}
.btn:active {
  transform: translateY(0);
}
.btn--primary {
  --bg: var(--ic-primary);
  --fg: #fff;
}
.btn--primary:hover {
  --bg: var(--ic-primary-2);
}
.btn--accent {
  --bg: var(--ic-accent);
  --fg: #fff;
}
.btn--ghost {
  --bg: transparent;
  --fg: var(--ic-ink);
  --bd: var(--ic-line-2);
}
.btn--ghost:hover {
  --bg: var(--ic-paper);
}
.btn--light {
  --bg: var(--ic-paper);
  --fg: var(--ic-ink);
  --bd: var(--ic-line);
  box-shadow: var(--sh-1);
}
.btn--sm {
  padding: 7px 14px;
  font-size: 13px;
}
.btn--lg {
  padding: 14px 26px;
  font-size: 16px;
}
.btn--block {
  display: flex;
  width: 100%;
}
.btn--square {
  border-radius: var(--r-sm);
}
/* Disabled / inert button (e.g. a past course's "Registration closed"): muted
   and non-clickable. Use on a <span class="btn …" aria-disabled="true">. */
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
  box-shadow: none;
}

/* Pills / badges / tags */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--ic-paper);
  border: 1px solid var(--ic-line);
  color: var(--ic-ink-2);
}
.pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ic-ink-3);
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--ic-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  background: var(--ic-paper-2);
  border: 1px solid var(--ic-line);
  color: var(--ic-ink-2);
}
.tag--primary {
  background: var(--ic-primary-tint);
  border-color: var(--ic-primary-tint2);
  color: var(--ic-primary-2);
}
.tag--accent {
  background: var(--ic-accent-tint);
  border-color: #ecd9c9;
  color: var(--ic-accent-2);
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
}
.badge--ok {
  background: var(--ic-success-tint);
  color: var(--ic-success);
}
.badge--warn {
  background: var(--ic-warn-tint);
  color: var(--ic-warn);
}
.badge--dng {
  background: var(--ic-danger-tint);
  color: var(--ic-danger);
}
.badge--neutral {
  background: var(--ic-paper-2);
  color: var(--ic-ink-2);
  border: 1px solid var(--ic-line);
}

/* Cards */
.card {
  background: var(--ic-paper);
  border: 1px solid var(--ic-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.card--flat {
  box-shadow: none;
}
.card--pad {
  padding: 22px;
}

/* Forms */
.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ic-ink-2);
  letter-spacing: -0.005em;
}
.label .req {
  color: var(--ic-danger);
}
.input,
.select,
.textarea {
  width: 100%;
  font-family: var(--ic-sans);
  font-size: 15px;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  background: var(--ic-paper);
  border: 1.5px solid var(--ic-line-2);
  color: var(--ic-ink);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.input::placeholder,
.textarea::placeholder {
  color: var(--ic-ink-3);
}
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--ic-primary);
  box-shadow: 0 0 0 3px var(--ic-primary-tint);
}
.input--lg {
  font-size: 17px;
  padding: 14px 16px;
}
.hint {
  font-size: 12.5px;
  color: var(--ic-ink-3);
}
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238C8475' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

/* Category filter <select> — shared by Resources + Training (replaces a pill row,
   which overflowed with several categories; a select scales + is mobile-native). */
.ic-res-cat-select,
.ic-cat-select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--ic-paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238C8475' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  border: 1.5px solid var(--ic-line-2);
  border-radius: 999px;
  padding: 9px 38px 9px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ic-ink-2);
  cursor: pointer;
  max-width: 100%;
}
@media (max-width: 575px) {
  .ic-cat-select {
    width: 100%;
  }
}
.ic-res-cat-select:focus,
.ic-cat-select:focus {
  outline: none;
  border-color: var(--ic-primary);
  box-shadow: 0 0 0 3px var(--ic-primary-tint);
}

/* Image placeholder — refined editorial treatment */
.imgph {
  position: relative;
  overflow: hidden;
  background: radial-gradient(
    120% 120% at 30% 20%,
    #ece6db 0%,
    #e3dacb 55%,
    #d8cdb9 100%
  );
  border-radius: var(--r);
}
.imgph::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, transparent 40%),
    radial-gradient(
      closest-side at 68% 70%,
      rgba(47, 93, 80, 0.1),
      transparent 70%
    );
}
.imgph--green {
  background: radial-gradient(
    120% 120% at 30% 20%,
    #cfe0d8 0%,
    #aec7bc 60%,
    #93b1a4 100%
  );
}
.imgph .imgph__tag {
  position: absolute;
  left: 12px;
  bottom: 11px;
  z-index: 1;
  font-family: var(--ic-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(32, 32, 28, 0.5);
  display: flex;
  align-items: center;
  gap: 6px;
}
.imgph .imgph__tag::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 1.5px solid rgba(32, 32, 28, 0.35);
  border-radius: 3px;
}


/* Tables (portal) */
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.tbl tfoot th,
.tbl thead th {
  text-align: left;
  font-family: var(--ic-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ic-ink-3);
  padding: 11px 16px;
  border-bottom: 1px solid var(--ic-line);
}
.tbl tfoot td,
.tbl tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--ic-line);
  vertical-align: middle;
}
.tbl tfoot th,
.tbl tfoot td {border-bottom: 2px solid var(--ic-ink);}

.tbl tfoot tr:last-child th,
.tbl tfoot tr:last-child td,
.tbl tbody tr:last-child td {
  border-bottom: none;
}
.tbl tfoot tr:hover,
.tbl tbody tr:hover {
  background: var(--ic-paper-2);
}

/* Responsive tables (any width): a table wider than its card scrolls horizontally
   INSIDE the card rather than being clipped (cards use overflow:hidden inline) or
   squished. overflow-x:auto is a no-op when the table fits, so wide desktops show no
   scrollbar. The !important is needed to beat the card's inline overflow:hidden.
   Through ≤1400px (tablet + laptop, incl. iPad landscape) cells stay single-line so the
   table grows + scrolls instead of wrapping into cramped multi-line rows; >1400px keeps
   the desktop wrap. The table stays ONE table so <thead> lines up with the body. */
.card:has(> .tbl),
.card:has(> table.tbl) {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 1400px) {
  .tbl thead th,
  .tbl tbody td {
    white-space: nowrap;
  }
}

/* Progress */
.track {
  height: 8px;
  border-radius: 999px;
  background: var(--ic-line);
  overflow: hidden;
}
.track > i {
  display: block;
  height: 100%;
  background: var(--ic-primary);
  border-radius: 999px;
}

/* Divider */
.hr {
  height: 1px;
  background: var(--ic-line);
  border: 0;
}

/* Utilities */
.row {
  display: flex;
}
.col {
  display: flex;
  flex-direction: column;
}
.ctr {
  align-items: center;
}
.btw {
  justify-content: space-between;
}
.wrap {
  flex-wrap: wrap;
}
.grow {
  flex: 1;
  min-width: 0;
}
.g4 {
  gap: 4px;
}
.g6 {
  gap: 6px;
}
.g8 {
  gap: 8px;
}
.g10 {
  gap: 10px;
}
.g12 {
  gap: 12px;
}
.g14 {
  gap: 14px;
}
.g16 {
  gap: 16px;
}
.g20 {
  gap: 20px;
}
.g24 {
  gap: 24px;
}
.g32 {
  gap: 32px;
}
.mono-num {
  font-family: var(--ic-mono);
  font-variant-numeric: tabular-nums;
}

/* Brand mark inside .app-top — sits where the burger would be on non-portal
   pages (single product, etc.). The brand__name text reads with the IC sans
   stack, not the serif display. */
.app-top__brand {
  text-decoration: none;
  color: inherit;
}
.app-top__brand .brand__name {
  font-family: var(--ic-sans);
  font-weight: 700;
  font-size: 15px;
  color: var(--ic-ink);
  letter-spacing: -0.005em;
}
@media (max-width: 575px) {
  /* Hide the brand text on tight phones — keep just the IC mark. */
  .app-top__brand .brand__name {
    display: none;
  }
}

/* ============================================================
   BRAND MARK  (used by /apply/ /login/ bespoke shells + .app-top
   when rendered on a non-portal page like single product)
   ============================================================ */
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: inherit;
}
.brand__mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--ic-primary);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--ic-serif);
  font-weight: 600;
  font-size: 20px;
}
.brand__name {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
}
.brand__name small {
  display: block;
  font-family: var(--ic-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ic-ink-3);
  margin-top: 1px;
}

/* ============================================================
   PORTAL APP SHELL
   ============================================================ */
.app {
  display: flex;
  min-height: 100vh;
  background: var(--ic-canvas);
}
.app-side {
  width: 250px;
  flex-shrink: 0;
  background: var(--ic-primary-3);
  color: #d3ddd8;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.app-side__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 22px 22px 20px;
}
.app-side__brand .brand__name {
  color: #fff;
}
.app-nav {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  flex: 1;
}
.app-nav__sec {
  font-family: var(--ic-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(211, 221, 216, 0.45);
  padding: 16px 12px 7px;
}
.app-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 13px;
  border-radius: 9px;
  font-size: 14.5px;
  font-weight: 500;
  color: #c5d2cc;
  transition:
    background 0.14s,
    color 0.14s;
}
.app-nav a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.app-nav a.active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.app-nav a.sub {
  padding-left: 40px;
  font-size: 13.5px;
}
.app-nav .ico {
  width: 18px;
  height: 18px;
  opacity: 0.85;
  flex-shrink: 0;
}
.app-nav a.active .ico {
  opacity: 1;
}
.app-side__foot {
  padding: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  position: relative; /* anchor for the user popup menu */
}
.app-side__user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  width: 100%;
  background: none;
  border: 0;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.app-side__user:hover {
  background: rgba(255, 255, 255, 0.06);
}
/* Sidebar user menu — popup above the avatar button (Account / Log out).
   Toggled by assets/portal.js via [data-ic-user-toggle]. */
.app-side__user-chev { transition: transform .15s; flex: none; }
.app-side__foot.is-open .app-side__user-chev { transform: rotate(180deg); }
.app-side__menu {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: calc(100% - 8px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--ic-primary-3, #1d2e27);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  z-index: 50;
}
.app-side__menu[hidden] { display: none; }
.app-side__menu-item {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: #cdd9d3;
  text-decoration: none;
  white-space: nowrap;
}
.app-side__menu-item:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.app-side__menu-item--logout { color: #e9a6a6; }
.app-side__menu-item--logout:hover { background: rgba(199, 76, 88, 0.18); color: #fff; }
.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ic-accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}

.app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
/* Skip-link — off-screen until focused; lets keyboard users jump past the long
   sidebar nav straight to the page content (target: <main id="ic-main">). */
.ic-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 10px 16px;
  background: var(--ic-primary);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  border-radius: 0 0 var(--r) 0;
}
.ic-skip-link:focus {
  left: 0;
}

.app-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  background: rgba(252, 250, 246, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ic-line);
  position: sticky;
  top: 0;
  z-index: 20;
}
/* The right-hand action group (tier pill / buttons) always hugs the right edge —
   even on pages with no left element (no top-bar search) where, with the burger
   hidden on desktop, a lone flex child would otherwise sit left under
   justify-content:space-between. The right group is always the last child. */
.app-top > .row:last-child {
  margin-left: auto;
}
.app-search {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  max-width: 420px;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--ic-paper);
  border: 1px solid var(--ic-line);
  color: var(--ic-ink-3);
  font-size: 14px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.app-search:focus-within {
  border-color: var(--ic-primary);
  background: #fff;
  box-shadow: 0 0 0 3px var(--ic-primary-tint);
}
.app-search input[type="search"] {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  color: var(--ic-ink);
  padding: 0;
}
.app-search input[type="search"]::placeholder {
  color: var(--ic-ink-3);
  opacity: 1;
}
.app-search input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.app-body {
  padding: 30px 24px 48px;
  max-width: 1320px;
  margin: 0 auto;
  width: 100%;
}
.page-h {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
.page-h h1 {
  font-family: var(--ic-serif);
  font-weight: 500;
  font-size: 38px;
  letter-spacing: -0.01em;
}

/* Mobile burger — hidden on desktop */
.app-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: transparent;
  border: 1px solid var(--ic-line);
  color: var(--ic-ink-2);
  cursor: pointer;
  flex-shrink: 0;
}
.app-burger:hover {
  background: var(--ic-paper);
}

.app-side-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 50;
}
.app-side-scrim[hidden] {
  display: none;
}

/* Phones — tighten the top bar. The eyebrow context is redundant with the page
   heading below, so hide it and give the burger + actions the room; keep pills
   and tags on a single line instead of wrapping mid-word. */
@media (max-width: 767px) {
  .app-top {
    gap: 10px;
  }
  .app-top .pill,
  .app-top .tag {
    white-space: nowrap;
  }
  /* The eyebrow context (e.g. "Speed flow · Target: 10 entries…") is redundant
     with the page heading below and breaks the bar on mobile — hide it so the
     burger + actions get the room. */
  .app-top .app-top__lead {
    display: none;
  }
  /* Long pill labels (e.g. "By: …name…") truncate with an ellipsis on mobile
     instead of overflowing; the full text returns on desktop (no rule there). */
  .app-top .pill {
    min-width: 0;
  }
  .app-top .pill .pill__label {
    display: inline-block;
    max-width: 20vw;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
  }
}

@media (max-width: 991px) {
  .app-burger {
    display: inline-flex;
  }
  .app-side {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  }
  .app-side.is-open {
    transform: translateX(0);
  }
  .app-top {
    padding: 12px 24px;
  }
  .app-body {
    padding: 20px 24px 40px;
  }

  /* Stack flex utilities on mobile */
  .row {
    flex-wrap: wrap;
  }

  /* Page header: title row + sub-nav stack */
  .page-h {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .page-h h1 {
    font-size: 28px;
  }

  /* Metric card rows: 2-up instead of 1-tall-column */
  .row > .card.grow {
    flex: 1 1 calc(50% - 14px);
    min-width: 140px;
  }

  /* Inline-styled hint paragraphs (display:flex) should wrap, not column */
  p.hint {
    flex-wrap: wrap;
  }

  /* Record-usage form: stack 4-col grid into a single column */
  .rec-fields {
    grid-template-columns: 1fr !important;
  }
  .rec-f {
    border-right: none !important;
    border-bottom: 1px solid var(--ic-line);
  }
  .rec-f:last-child {
    border-bottom: none;
  }
  .rec-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .rec-foot .btn {
    width: 100%;
  }

  /* Hide the timer pill in portal-top, keep the user pill */
  .app-top .pill.mono {
    display: none;
  }

  /* Hide the search box on mobile — it eats too much space; users tap the
     burger for navigation and use page filters for finding. */
  .app-top .app-search {
    display: none;
  }

  /* ----- Generic multi-column grids → stack ----- */
  .dash-grid,
  .blog-grid,
  .cart-grid,
  .co,
  .pdp,
  .tier-hero,
  .credit-card,
  .auth,
  .apply,
  .form-grid,
  .shop {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  /* Override the inline grid-template on the lower dashboard row */
  .app-body .dash-grid[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* ----- Tile grids: 3-4 col → 2 col (or 1 col for very small) ----- */
  .prod-grid,
  .bcols,
  .res-grid {
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 24px !important;
  }
  /* Single-event inline 2-col article */
  article[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Inline 2-col form rows inside cards (checkout, etc.) */
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Tier-hero inner spans full width when stacked */
  .tier-hero > * {
    padding: 20px !important;
  }

  /* My-account portal-style shell (index.php) — stack sidebar above content */
  .ic-account-shell {
    flex-direction: column !important;
  }
  .ic-account-side {
    width: 100% !important;
    height: auto !important;
    position: static !important;
  }

  /* Calendar (.cal) stays 7-col but card scrolls if needed */
  .cal {
    font-size: 12px;
    min-width: 560px;
  }
  .card:has(> .cal) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Single-product gallery thumbs: 4 stays fine; pdp stacked above */

  /* Display headings shrink on mobile */
  .display {
    font-size: 26px !important;
    line-height: 1.15;
  }

  /* Buttons in stacked footers go full-width */
  .rec-foot .btn,
  .auth-form .btn {
    width: 100%;
  }

  /* Generic large-padding cards: tighten */
  .card.card--pad {
    padding: 20px !important;
  }

  /* Login / apply: dark rails shouldn't be full-screen tall when stacked */
  .auth {
    min-height: 0 !important;
  }
  .auth-brand {
    padding: 36px 24px !important;
    min-height: auto !important;
  }
  .auth-form {
    padding: 28px 20px !important;
  }
  .apply {
    min-height: 0 !important;
  }
  .apply-rail {
    padding: 32px 24px !important;
    gap: 24px !important;
  }
  .apply-main {
    padding: 32px 20px !important;
  }
}

@media (min-width:576px) {
  .prod-grid,
  .bcols,
  .res-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}
@media (min-width:1400px) {
  .prod-grid,
  .bcols,
  .res-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--ic-paper);
  border: 1px solid var(--ic-line);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--ic-ink-2);
  position: relative;
}
.icon-btn:hover {
  background: var(--ic-paper-2);
}
.icon-btn .ntf {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ic-danger);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: grid;
  place-items: center;
  border: 2px solid var(--ic-canvas);
}

/* stat / metric */
.metric {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.metric__k {
  font-family: var(--ic-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ic-ink-3);
}
.metric__v {
  font-family: var(--ic-serif);
  font-weight: 500;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.01em;
}
.delta {
  font-size: 12.5px;
  font-weight: 700;
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.delta--up {
  color: var(--ic-success);
}
.delta--dn {
  color: var(--ic-danger);
}

/* ============================================================
   WORDPRESS ADMIN SHELL  (authentic wp-admin)
   ============================================================ */
.wp {
  font-family: var(--wp-sans);
  font-size: 13px;
  color: var(--wp-text);
  background: var(--wp-bg);
  min-height: 100vh;
}
.wp * {
  box-sizing: border-box;
}
/* admin bar */
.wp-bar {
  height: 32px;
  background: #1d2327;
  color: #f0f0f1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  font-size: 13px;
  position: sticky;
  top: 0;
  z-index: 99;
}
.wp-bar a {
  color: #f0f0f1;
}
.wp-bar .grp {
  display: flex;
  align-items: center;
}
.wp-bar .itm {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
}
.wp-bar .itm:hover {
  background: #2c3338;
  color: #72aee6;
  cursor: pointer;
}
.wp-bar .dot-ico {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
}
/* layout */
.wp-layout {
  display: flex;
  min-height: calc(100vh - 32px);
}
.wp-menu {
  width: 160px;
  flex-shrink: 0;
  background: var(--wp-menu);
  color: var(--wp-menu-tx);
  padding-top: 0;
}
.wp-menu .mi {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px 8px 12px;
  font-size: 14px;
  line-height: 1.3;
  color: #f0f0f1;
  cursor: pointer;
  border-left: 4px solid transparent;
  min-height: 34px;
}
.wp-menu .mi .ico {
  width: 18px;
  height: 18px;
  color: var(--wp-menu-ic);
  flex-shrink: 0;
}
.wp-menu .mi:hover {
  background: #2c3338;
  color: #72aee6;
}
.wp-menu .mi:hover .ico {
  color: #72aee6;
}
.wp-menu .mi.current {
  background: var(--wp-blue);
  color: #fff;
  border-left-color: #fff;
  font-weight: 600;
}
.wp-menu .mi.current .ico {
  color: #fff;
}
.wp-menu .mi .cnt {
  margin-left: auto;
  background: #d63638;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 10px;
  padding: 1px 7px;
}
.wp-menu .sep {
  height: 1px;
  background: #3c434a;
  margin: 6px 0;
}
.wp-submenu {
  background: #2c3338;
}
.wp-submenu .si {
  padding: 6px 12px 6px 40px;
  font-size: 13px;
  color: #c3c4c7;
  cursor: pointer;
}
.wp-submenu .si:hover {
  color: #72aee6;
}
.wp-submenu .si.current {
  color: #fff;
  font-weight: 600;
}

.wp-content {
  flex: 1;
  min-width: 0;
  padding: 10px 20px 40px;
}
.wp-h1 {
  font-size: 23px;
  font-weight: 400;
  color: #1d2327;
  padding: 9px 0 4px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.wp-h1 .add {
  font-size: 13px;
}
.wp-subtitle {
  color: var(--wp-text-2);
  font-size: 13px;
  margin-bottom: 8px;
}

.wp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 400;
  line-height: 2.15384615;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 3px;
  border: 1px solid;
  cursor: pointer;
  background: #f6f7f7;
  border-color: var(--wp-blue);
  color: var(--wp-blue);
}
.wp-btn:hover {
  background: #f0f6fc;
}
.wp-btn--primary {
  background: var(--wp-blue);
  border-color: var(--wp-blue);
  color: #fff;
}
.wp-btn--primary:hover {
  background: var(--wp-blue-700);
  border-color: var(--wp-blue-700);
}
.wp-btn--sm {
  min-height: 26px;
  font-size: 12px;
  padding: 0 8px;
  line-height: 2;
}
.wp-btn--link {
  background: none;
  border: none;
  color: var(--wp-blue);
  padding: 0;
  min-height: auto;
}
.wp-btn--del {
  color: var(--wp-red);
}

/* notices */
.wp-notice {
  background: #fff;
  border-left: 4px solid var(--wp-blue);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
  padding: 10px 12px;
  margin: 12px 0;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wp-notice--ok {
  border-left-color: var(--wp-green);
}
.wp-notice--warn {
  border-left-color: var(--wp-orange);
}
.wp-notice--err {
  border-left-color: var(--wp-red);
}

/* list table */
.wp-card {
  background: #fff;
  border: 1px solid var(--wp-line);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}
.wp-tablenav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  gap: 10px;
  flex-wrap: wrap;
}
.wp-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--wp-line);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
  font-size: 13px;
}
.wp-table thead th,
.wp-table tfoot th {
  text-align: left;
  padding: 10px;
  border-bottom: 1px solid var(--wp-line);
  font-weight: 600;
  color: #2c3338;
  font-size: 13px;
}
.wp-table tbody td {
  padding: 11px 10px;
  border-bottom: 1px solid #f0f0f1;
  vertical-align: middle;
  color: #3c434a;
}
.wp-table tbody tr:hover {
  background: #f6f7f7;
}
.wp-table .check {
  width: 2.2em;
}
.wp-table .row-title {
  font-weight: 600;
  color: var(--wp-blue);
  font-size: 14px;
  cursor: pointer;
}
.wp-table .row-title:hover {
  color: var(--wp-blue-700);
  text-decoration: underline;
}
.wp-rowactions {
  color: var(--wp-text-2);
  font-size: 13px;
  margin-top: 3px;
  visibility: hidden;
}
.wp-table tbody tr:hover .wp-rowactions {
  visibility: visible;
}
.wp-rowactions a {
  color: var(--wp-blue);
}
.wp-rowactions a.del {
  color: var(--wp-red);
}
.wp-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
}
.wp-status .led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.wp-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 3px;
  background: #f0f0f1;
  color: #50575e;
  border: 1px solid #dcdcde;
}
.wp-input {
  font-size: 14px;
  padding: 6px 8px;
  border: 1px solid #8c8f94;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 0 0 transparent;
}
.wp-input:focus {
  outline: none;
  border-color: var(--wp-blue);
  box-shadow: 0 0 0 1px var(--wp-blue);
}
.wp-select {
  font-size: 14px;
  padding: 5px 24px 5px 8px;
  border: 1px solid #8c8f94;
  border-radius: 4px;
  background: #fff;
}
.wp-search {
  display: flex;
  gap: 6px;
  align-items: center;
}
.wp-metabox {
  background: #fff;
  border: 1px solid var(--wp-line);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
  margin-bottom: 16px;
}
.wp-metabox__h {
  padding: 8px 12px;
  border-bottom: 1px solid var(--wp-line);
  font-weight: 600;
  font-size: 14px;
  color: #1d2327;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wp-metabox__b {
  padding: 12px;
}
.wp-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--wp-line);
  margin-bottom: 0;
}
.wp-tabs .t {
  padding: 8px 14px;
  font-size: 14px;
  border: 1px solid transparent;
  border-bottom: none;
  cursor: pointer;
  color: var(--wp-blue);
  margin-bottom: -1px;
}
.wp-tabs .t.active {
  background: #fff;
  border-color: var(--wp-line);
  color: #1d2327;
  font-weight: 600;
  border-bottom: 1px solid #fff;
}
.wp-fieldrow {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f1;
  align-items: start;
}
.wp-fieldrow > .lab {
  font-weight: 600;
  font-size: 14px;
  padding-top: 6px;
}
.screen-pad {
  padding: 0;
}

/* scrollbars (portal) */
.app-nav::-webkit-scrollbar {
  width: 8px;
}
.app-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}

/* ============================================================
   PAGE-SCOPED STYLES
   Per-page CSS moved out of each template's inline <style> block and scoped
   under body.page-{slug} (added by the body_class filter) so a block only ever
   affects its own page. The matching JS lives in assets/pages/{slug}.js.
   ============================================================ */

/* --- Training (page-training.php) --- */
.page-training .course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.page-training .course-card { display: flex; flex-direction: column; overflow: hidden; transition: box-shadow .15s, transform .15s; }
.page-training .course-card:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.page-training .course-img { aspect-ratio: 16/9; background: linear-gradient(135deg, var(--ic-primary-tint), var(--ic-paper-2)); display: flex; align-items: center; justify-content: center; color: var(--ic-primary-2); font-weight: 700; letter-spacing: .12em; font-size: 11px; text-transform: uppercase; padding: 0 12px; text-align: center; }
.page-training .seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--ic-paper-2); border: 1px solid var(--ic-line); border-radius: 999px; }
.page-training .seg button { padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ic-ink-2); border: none; background: transparent; cursor: pointer; font-family: inherit; }
.page-training .seg button.on { background: var(--ic-primary); color: #fff; }
.page-training .seg button:hover:not(.on) { color: var(--ic-ink); }
.page-training .course-card[hidden] { display: none !important; }
.page-training .course-filter__toggle { display: none; }
@media (max-width: 767px) {
  .page-training .course-filter__toggle { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 16px; border: 1px solid var(--ic-line); border-radius: var(--r); background: var(--ic-paper); font-family: inherit; font-weight: 600; font-size: 14px; color: var(--ic-ink); cursor: pointer; }
  .page-training .course-filter__toggle svg { transition: transform .15s; flex: none; }
  .page-training .course-filter.open .course-filter__toggle svg { transform: rotate(180deg); }
  .page-training .course-filter .seg { display: none; flex-direction: column; align-items: stretch; width: 100%; border-radius: var(--r); margin-top: 6px; gap: 2px; }
  .page-training .course-filter.open .seg { display: flex; }
  .page-training .course-filter .seg button { text-align: left; border-radius: var(--r-sm); }
}

/* --- Dashboard (front-page.php) --- */
.page-dashboard .dash-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 18px; }
.page-dashboard .dash-lower { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; }
.page-dashboard .section-label { font-family: var(--ic-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ic-ink-3); font-weight: 700; }
.page-dashboard .quality-bar { height: 8px; border-radius: 99px; background: var(--ic-line); overflow: hidden; }
.page-dashboard .quality-bar > i { display: block; height: 100%; border-radius: 99px; }
.page-dashboard .alert-row { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ic-ink-2); line-height: 1.45; }
.page-dashboard .alert-row .d { width: 8px; height: 8px; border-radius: 99px; margin-top: 6px; flex: none; }
.page-dashboard .link-btn { background: none; border: none; padding: 0; font-size: 13px; font-weight: 700; color: var(--ic-primary); cursor: pointer; }
.page-dashboard .mini-prod { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--ic-line); }
.page-dashboard .mini-prod:last-child { border-bottom: none; }
.page-dashboard .mini-prod .th { width: 48px; height: 48px; flex: none; border-radius: 8px; background: var(--ic-paper-2); display: grid; place-items: center; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; color: var(--ic-faint); }
.page-dashboard .appt-row { width: 100%; text-align: left; padding: 12px 14px; border: 1px solid var(--ic-line); border-left-width: 3px; border-radius: var(--r); background: var(--ic-paper); cursor: pointer; transition: background .15s; }
.page-dashboard .appt-row:hover { background: var(--ic-paper-2); }
@media (max-width: 980px) {
  .page-dashboard .dash-cards { grid-template-columns: 1fr; }
  .page-dashboard .dash-lower { grid-template-columns: 1fr; }
}
@media (max-width: 991px) {
  .page-dashboard .dashboard-title { font-size: 24px !important; }
}

/* --- Capture Complication (page-complication.php) --- */
.page-complication .emergency-banner { display:flex; gap: 14px; padding: 16px 20px; background: var(--ic-danger-tint); border: 1px solid var(--ic-danger); border-radius: var(--r); color: var(--ic-danger); line-height: 1.55; align-items: flex-start; }
.page-complication .emergency-banner svg { color: var(--ic-danger); flex: none; margin-top: 1px; }
.page-complication .comp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .page-complication .comp-grid { grid-template-columns: 1fr; } }
.page-complication .comp-card { padding: 20px 22px; border: 1.5px solid var(--ic-line); border-radius: var(--r); background: var(--ic-paper); cursor: pointer; text-align: left; transition: border-color .15s, box-shadow .15s; font: inherit; }
.page-complication .comp-card:hover { border-color: var(--ic-primary); box-shadow: var(--sh-1); }
.page-complication .comp-card.minor[data-on="true"] { border-color: var(--ic-warn); background: var(--ic-warn-tint); }
.page-complication .comp-card.major[data-on="true"] { border-color: var(--ic-danger); background: var(--ic-danger-tint); }
.page-complication .comp-head { font-family: var(--ic-serif); font-size: 19px; font-weight: 400; letter-spacing: -.005em; margin-bottom: 12px; }
.page-complication .comp-card ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.page-complication .comp-card li { font-size: 13px; color: var(--ic-ink-2); display: flex; gap: 6px; align-items: center; }
.page-complication .comp-card li::before { content: ''; width: 5px; height: 5px; border-radius: 99px; background: var(--ic-ink-3); flex: none; }
.page-complication .select-pill { padding: 8px 14px; border: 1.5px solid var(--ic-line-2); border-radius: 999px; background: var(--ic-paper); font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: var(--ic-ink-2); }
.page-complication .select-pill[data-on="true"] { background: var(--ic-primary); color: #fff; border-color: var(--ic-primary); }
.page-complication .select-pill[data-on="true"] svg { display: inline; }
.page-complication .select-pill svg { display: none; }
.page-complication .field-hint { font-size: 12.5px; color: var(--ic-ink-3); margin-top: 8px; }
.page-complication .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; }
@media (max-width: 720px) { .page-complication .form-grid-2 { grid-template-columns: 1fr; } }

/* --- Loyalty & rewards (page-loyalty.php) --- */
.page-loyalty .tier-hero { display:grid; grid-template-columns: 1.2fr 1fr; gap:0; overflow:hidden; }
.page-loyalty .tier-hero .left { padding:28px 30px; }
.page-loyalty .tier-hero .right { background:var(--ic-primary-3); color:#e6ede9; padding:28px 30px; display:flex; flex-direction:column; justify-content:center; gap:6px; position:relative; overflow:hidden; }
.page-loyalty .tier-hero .right::after { content:""; position:absolute; right:-80px; top:-80px; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle, rgba(190,132,96,.3), transparent 70%); }
.page-loyalty .ttrack { position:relative; height:70px; margin:26px 0 0; }
.page-loyalty .ttrack .bar { position:absolute; top:31px; left:0; right:0; height:5px; border-radius:99px; background:var(--ic-line); }
.page-loyalty .ttrack .bar > i { display:block; height:100%; width:60%; border-radius:99px; background:var(--ic-primary); }
/* "You are here" marker — rides the leading edge of the fill (left = progress %), so
   it slides toward the next tier as spend grows, instead of a dot fixed on the current
   tier. The current-tier node renders filled (achieved) below. */
.page-loyalty .ttrack__you { position:absolute; top:33px; width:20px; height:20px; border-radius:50%; background:var(--ic-primary); border:4px solid #fff; box-shadow:0 0 0 3px var(--ic-primary); transform:translate(-50%,-50%); transition:left .35s ease; z-index:3; }
.page-loyalty .ttrack .node { position:absolute; top:20px; display:flex; flex-direction:column; align-items:center; gap:8px; transform:translateX(-50%); }
.page-loyalty .ttrack .node .pt { width:26px;height:26px;border-radius:50%;background:var(--ic-line);border:2px solid var(--ic-line); }
.page-loyalty .ttrack .node.done .pt { background:var(--ic-primary);border-color:var(--ic-primary); }
.page-loyalty .ttrack .node.cur .pt { background:var(--ic-primary);border-color:var(--ic-primary); }
.page-loyalty .ttrack .node .lb { font-family:var(--ic-mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ic-ink-2); font-weight:600; white-space:nowrap; }
.page-loyalty .ttrack .node--first { transform: translateX(0); align-items: flex-start; }
.page-loyalty .ttrack .node--last  { transform: translateX(-100%); align-items: flex-end; }
.page-loyalty .ttrack .node--first .lb { text-align: left; }
.page-loyalty .ttrack .node--last  .lb { text-align: right; }
.page-loyalty .bcols { display:grid; grid-template-columns: repeat(3,1fr); gap:14px; }
.page-loyalty .bcol { padding:20px; display:flex; flex-direction:column; gap:12px; }
.page-loyalty .bcol.cur { border:2px solid var(--ic-primary); }
.page-loyalty .bcol h3 { font-family:var(--ic-serif); font-size:22px; font-weight:600; }
.page-loyalty .blist { display:flex; flex-direction:column; gap:9px; font-size:14px; color:var(--ic-ink-2); }
.page-loyalty .blist .b { display:flex; gap:9px; align-items:flex-start; }
.page-loyalty .blist .b svg { flex-shrink:0; margin-top:2px; }

/* --- Create treatment plan (page-treatment-plan.php) --- */
.page-treatment-plan .stepper-bar { display:flex; align-items:center; gap: 0; margin: 20px 0 26px; }
.page-treatment-plan .step { display:inline-flex; align-items:center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: none; border: none; font-size: 14px; font-weight: 600; color: var(--ic-ink-3); cursor: pointer; font-family: inherit; }
.page-treatment-plan .step[data-state="on"]   { background: var(--ic-primary); color: #fff; }
.page-treatment-plan .step[data-state="done"] { color: var(--ic-primary); cursor: pointer; }
.page-treatment-plan .step[data-state="todo"] { cursor: default; }
.page-treatment-plan .step-dot { display:inline-flex; align-items:center; justify-content:center; width: 24px; height: 24px; border-radius: 99px; background: var(--ic-paper-2); border: 1.5px solid var(--ic-line-2); font-size: 12px; font-weight: 700; color: var(--ic-ink-3); }
.page-treatment-plan .step[data-state="on"]   .step-dot { background: #fff; color: var(--ic-primary); border-color: #fff; }
.page-treatment-plan .step[data-state="done"] .step-dot { background: var(--ic-primary); color: #fff; border-color: var(--ic-primary); }
.page-treatment-plan .step-line { flex: 1; height: 2px; background: var(--ic-line); margin: 0 8px; min-width: 32px; }
.page-treatment-plan .step-line[data-done="true"] { background: var(--ic-primary); }
.page-treatment-plan .chip-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.page-treatment-plan .chip { padding: 8px 14px; border: 1.5px solid var(--ic-line-2); border-radius: 999px; background: var(--ic-paper); font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ic-ink-2); display: inline-flex; align-items: center; gap: 6px; font-family: inherit; }
.page-treatment-plan .chip[data-on="true"] { background: var(--ic-primary); color: #fff; border-color: var(--ic-primary); }
.page-treatment-plan .chip svg { display: none; }
.page-treatment-plan .chip[data-on="true"] svg { display: inline; }
.page-treatment-plan .q-row { display:flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
.page-treatment-plan .q-row p { color: var(--ic-ink-2); line-height: 1.55; font-size: 14px; flex: 1; margin: 0; }
.page-treatment-plan .yesno { display:inline-flex; padding: 3px; background: var(--ic-paper-2); border: 1px solid var(--ic-line); border-radius: 99px; flex: none; }
.page-treatment-plan .yesno button { padding: 5px 14px; border: none; background: none; font-size: 12.5px; font-weight: 700; color: var(--ic-ink-3); border-radius: 99px; cursor: pointer; font-family: inherit; }
.page-treatment-plan .yesno button.on { background: var(--ic-primary); color: #fff; }
.page-treatment-plan .rule { border: 0; border-top: 1px solid var(--ic-line); }
.page-treatment-plan .pass-back { display:flex; align-items:center; justify-content: space-between; gap: 16px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--ic-line); flex-wrap: wrap; }
.page-treatment-plan .pass-back > div { display:flex; gap: 10px; align-items: center; font-size: 14px; color: var(--ic-ink-2); }
.page-treatment-plan .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; }
@media (max-width: 720px) { .page-treatment-plan .form-grid-2 { grid-template-columns: 1fr; } }
.page-treatment-plan .sign-pad { border: 1.5px dashed var(--ic-line-2); border-radius: var(--r); min-height: 120px; display: flex; align-items: center; justify-content: center; color: var(--ic-faint); cursor: pointer; background: var(--ic-paper-2); position: relative; }
.page-treatment-plan .face-map svg { display: block; }

/* --- Users (page-users.php) --- */
.page-users .users-tbl { width:100%; border-collapse: collapse; font-size: 14px; }
.page-users .users-tbl th { text-align: left; font-family: var(--ic-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ic-ink-3); padding: 14px 16px; border-bottom: 1px solid var(--ic-line); font-weight: 600; }
.page-users .users-tbl td { padding: 14px 16px; border-bottom: 1px solid var(--ic-line); vertical-align: middle; }
.page-users .users-tbl tr:last-child td { border-bottom: none; }
.page-users .users-tbl tr:hover td { background: var(--ic-paper-2); }
.page-users .avatar-lg { width: 38px; height: 38px; border-radius: 99px; background: var(--ic-primary); color: #fff; font-weight: 700; font-size: 13px; display:flex; align-items:center; justify-content:center; flex: none; }
.page-users .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; }
@media (max-width: 720px) { .page-users .form-grid-2 { grid-template-columns: 1fr; } }
.page-users .form-grid-2 .span-2 { grid-column: 1 / -1; }

/* --- Appointments (page-appointments.php) --- */
.page-appointments .app-top { position: relative; z-index: 20; }
.page-appointments .app-top .app-search, .page-appointments .app-top .app-search input { pointer-events: auto; }
@media (min-width: 992px) {
    .page-appointments .app-top { justify-content: flex-end; }
}
.page-appointments .seg-toggle { display:inline-flex; padding:3px; background:var(--ic-paper-2); border:1px solid var(--ic-line); border-radius:999px; gap:0; }
.page-appointments .seg-toggle button { background:none; border:0; padding:7px 16px; border-radius:999px; font-size:13px; font-weight:600; color:var(--ic-ink-2); cursor:pointer; font-family:inherit; }
.page-appointments .seg-toggle button.on { background:var(--ic-primary); color:#fff; }
.page-appointments .icon-btn { width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; background:var(--ic-paper); border:1px solid var(--ic-line); border-radius:8px; cursor:pointer; color:var(--ic-ink-2); transition:border-color .15s, color .15s, background-color .15s; }
.page-appointments .icon-btn:hover { border-color:var(--ic-primary); color:var(--ic-primary); }
.page-appointments .icon-btn.on { background:var(--ic-ink); color:#fff; border-color:var(--ic-ink); }
.page-appointments .appt-toolbar-right { display:inline-flex; align-items:center; gap:8px; flex-wrap:nowrap; }
.page-appointments .filter-btn { display:inline-flex; align-items:center; gap:8px; padding:8px 16px; background:var(--ic-paper); border:1px solid var(--ic-line); border-radius:999px; font-size:13.5px; font-weight:600; color:var(--ic-ink-2); cursor:pointer; font-family:inherit; position:relative; }
.page-appointments .filter-btn:hover { border-color:var(--ic-primary); color:var(--ic-primary); }
.page-appointments .filter-btn.is-active { background:var(--ic-crimson-50); border-color:var(--ic-primary); color:var(--ic-primary); }
.page-appointments .filter-popover { position:absolute; top:calc(100% + 6px); right:0; min-width:180px; background:var(--ic-paper); border:1px solid var(--ic-line); border-radius:var(--r-md); box-shadow:var(--sh-2); padding:6px; z-index:200; }
.page-appointments .filter-popover[hidden] { display:none; }
.page-appointments .filter-popover label { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:var(--r-sm); cursor:pointer; font-size:13px; font-weight:500; color:var(--ic-ink-2); }
.page-appointments .filter-popover label:hover { background:var(--ic-paper-2); }
.page-appointments .filter-popover input[type="checkbox"] { width:14px; height:14px; accent-color:var(--ic-primary); }
.page-appointments .appt-search-row { display:flex; align-items:center; gap:10px; padding:10px 18px; border-bottom:1px solid var(--ic-line); background:var(--ic-paper); position:relative; }
.page-appointments .appt-search-row__icon { flex:none; color:var(--ic-ink-3); }
.page-appointments .appt-search-row__input { flex:1; border:0; background:transparent; padding:6px 0; font-family:inherit; font-size:14px; color:var(--ic-ink); outline:none; min-width:0; }
.page-appointments .appt-search-row__input::placeholder { color:var(--ic-ink-3); }
.page-appointments .appt-search-row__clear { background:none; border:0; padding:6px; border-radius:6px; color:var(--ic-ink-3); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.page-appointments .appt-search-row__clear:hover { background:var(--ic-paper-2); color:var(--ic-ink); }
.page-appointments .appt-search-row__clear[hidden] { display:none; }
.page-appointments .month-popover { position:absolute; top:calc(100% + 6px); left:0; background:var(--ic-paper); border:1px solid var(--ic-line); border-radius:var(--r-md); box-shadow:var(--sh-2); padding:14px; z-index:200; min-width:240px; }
.page-appointments .month-popover[hidden] { display:none; }
.page-appointments .month-popover__year { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.page-appointments .month-popover__year button { background:var(--ic-paper-2); border:1px solid var(--ic-line); width:28px; height:28px; border-radius:6px; cursor:pointer; font-size:16px; line-height:1; color:var(--ic-ink-2); }
.page-appointments .month-popover__year button:hover { border-color:var(--ic-primary); color:var(--ic-primary); }
.page-appointments .month-popover__year span { font-family:var(--ic-mono); font-size:13px; font-weight:700; letter-spacing:.04em; color:var(--ic-ink); }
.page-appointments .month-popover__grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:4px; }
.page-appointments .month-popover__m { padding:8px 0; border:1px solid transparent; background:transparent; border-radius:var(--r-sm); font-size:12.5px; font-weight:600; color:var(--ic-ink-2); cursor:pointer; font-family:inherit; }
.page-appointments .month-popover__m:hover { background:var(--ic-paper-2); color:var(--ic-ink); }
.page-appointments .month-popover__m.on { background:var(--ic-primary); color:#fff; border-color:var(--ic-primary); }
.page-appointments .cal-week { display:grid; grid-template-columns: 70px repeat(7, 1fr); }
.page-appointments .cal-day  { display:grid; grid-template-columns: 70px 1fr; }
.page-appointments .cal-day-head { padding:14px 12px; text-align:center; border-left:1px solid var(--ic-line); }
.page-appointments .cal-day-head .dow { font-size:11px; letter-spacing:.08em; color:var(--ic-ink-3); font-weight:700; }
.page-appointments .cal-day-num { display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:32px; margin-top:4px; border-radius:8px; font-weight:700; font-size:15px; color:var(--ic-ink); }
.page-appointments .cal-day-num.today { background:var(--ic-primary); color:#fff; }
.page-appointments .cal-time-col { padding-top:8px; text-align:right; padding-right:12px; font-size:12px; color:var(--ic-ink-3); font-weight:600; }
.page-appointments .cal-hour { border-bottom:1px solid var(--ic-line); min-height:84px; }
.page-appointments .cal-slot { border-left:1px solid var(--ic-line); padding:5px 6px; position:relative; }
.page-appointments .appt-pill { width:100%; text-align:left; padding:8px 10px; border-radius:8px; border:0; border-left:3px solid currentColor; background:var(--ic-paper); cursor:pointer; transition:filter .14s, transform .14s; font-family:inherit; }
.page-appointments .appt-pill:hover { filter:brightness(0.97); transform:translateY(-1px); }
.page-appointments .appt-pill .row { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.page-appointments .appt-pill .nm { font-weight:700; font-size:13px; color:var(--ic-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.page-appointments .appt-pill .cat-tag { font-family:var(--ic-mono); font-size:9.5px; font-weight:700; letter-spacing:.04em; padding:2px 7px; border-radius:99px; flex:none; color:#fff; }
.page-appointments .appt-pill .tm { font-family:var(--ic-mono); font-size:11px; color:var(--ic-ink-3); margin-top:3px; letter-spacing:.02em; }
.page-appointments .cal-month { display:grid; grid-template-columns:repeat(7, 1fr); }
.page-appointments .cal-month .dow { font-family:var(--ic-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ic-ink-3); padding:10px; text-align:center; border-bottom:1px solid var(--ic-line); }
.page-appointments .cal-month .cell { min-height:100px; padding:8px 10px; border-right:1px solid var(--ic-line); border-bottom:1px solid var(--ic-line); display:flex; flex-direction:column; gap:4px; }
.page-appointments .cal-month .cell:nth-child(7n+1) ~ .cell:nth-child(7n) { border-right:none; }
.page-appointments .cal-month .cell.dim { background:var(--ic-paper-2); }
.page-appointments .cal-month .cell.today .dn { background:var(--ic-primary); color:#fff; border-radius:50%; width:22px; height:22px; display:grid; place-items:center; font-weight:700; }
.page-appointments .cal-month .cell .dn { font-family:var(--ic-mono); font-size:12px; color:var(--ic-ink-3); font-weight:600; }
.page-appointments .cal-month .cell .ev { font-size:11px; font-weight:600; padding:3px 7px; border-radius:5px; line-height:1.25; text-decoration:none; cursor:pointer; border:0; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.page-appointments .cal-month .cell .ev:hover { filter:brightness(0.94); }
.page-appointments .appt-list-row { display:grid; grid-template-columns:90px 1fr auto; gap:20px; align-items:center; padding:16px 20px; border-bottom:1px solid var(--ic-line); }
.page-appointments .appt-list-row:last-child { border-bottom:none; }
.page-appointments .appt-list-row .date-block { text-align:center; padding:8px 0; border:1px solid var(--ic-line); border-radius:var(--r-md); background:var(--ic-paper-2); }
.page-appointments .appt-list-row .date-block__d { font-family:var(--ic-serif); font-size:26px; font-weight:700; color:var(--ic-ink); line-height:1; }
.page-appointments .appt-list-row .date-block__m { font-family:var(--ic-mono); font-size:11px; letter-spacing:.1em; color:var(--ic-ink-3); margin-top:2px; }
.page-appointments .appt-list-row .body .nm { font-size:16px; font-weight:700; color:var(--ic-ink); margin:0; }
.page-appointments .appt-list-row .body .meta { display:flex; gap:8px; align-items:center; margin-top:4px; font-size:13px; color:var(--ic-ink-3); }
.page-appointments .appt-list-row .body .meta .cat-tag { color:#fff; }
.page-appointments .appt-list-row .body .tx { color:var(--ic-ink-2); font-size:13.5px; margin-top:4px; }
.page-appointments .appt-empty { text-align:center; padding:48px 24px; color:var(--ic-ink-3); }
.page-appointments .ic-appt-modal[hidden] { display:none !important; }
.page-appointments .ic-appt-modal { position:fixed; inset:0; z-index:9000; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; padding:24px; }
.page-appointments .ic-appt-modal__box { background:var(--ic-paper); border-radius:14px; max-width:440px; width:100%; padding:22px 24px 18px; box-shadow:0 14px 40px rgba(0,0,0,.25); position:relative; }
.page-appointments .ic-appt-modal__topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.page-appointments .ic-appt-modal__id { font-size:13px; color:var(--ic-ink-3); }
.page-appointments .ic-appt-modal__id strong { color:var(--ic-ink); font-weight:600; }
.page-appointments .ic-appt-modal__kebab { background:none; border:0; width:32px; height:32px; border-radius:8px; cursor:pointer; color:var(--ic-ink-3); display:grid; place-items:center; padding:0; }
.page-appointments .ic-appt-modal__kebab:hover { background:var(--ic-paper-2); color:var(--ic-ink); }
.page-appointments .ic-appt-modal__menu { position:absolute; top:calc(100% + 4px); right:0; background:var(--ic-paper); border:1px solid var(--ic-line); border-radius:var(--r-md); box-shadow:var(--sh-2); padding:4px; z-index:10; min-width:180px; }
.page-appointments .ic-appt-modal__menu[hidden] { display:none; }
.page-appointments .ic-appt-modal__menu button { display:block; width:100%; text-align:left; padding:8px 12px; background:none; border:0; font-family:inherit; font-size:13px; color:var(--ic-ink-2); cursor:pointer; border-radius:var(--r-sm); }
.page-appointments .ic-appt-modal__menu button:hover { background:var(--ic-paper-2); color:var(--ic-ink); }
.page-appointments .ic-appt-modal__menu button[data-ic-appt-action="cancel"] { color:var(--ic-danger); }
.page-appointments .ic-appt-modal__menu button[data-ic-appt-action="cancel"]:hover { background:var(--ic-danger-tint); }
.page-appointments .ic-appt-modal__title { font-size:22px; font-weight:700; letter-spacing:-.015em; line-height:1.2; margin:0 0 4px; color:var(--ic-ink); }
.page-appointments .ic-appt-modal__sub { color:var(--ic-ink-2); font-size:14px; margin:0 0 10px; }
.page-appointments .ic-appt-modal__cat { display:inline-flex; align-items:center; font-family:var(--ic-mono); font-size:10px; font-weight:700; letter-spacing:.06em; padding:3px 9px; border-radius:99px; background:#222; color:#fff; margin-bottom:18px; }
.page-appointments .ic-appt-modal__notes { display:flex; align-items:center; gap:10px; padding:12px 0 14px; border-top:1px solid var(--ic-line); border-bottom:1px solid var(--ic-line); font-size:13.5px; color:var(--ic-ink-2); line-height:1.5; min-height:44px; }
.page-appointments .ic-appt-modal__notes [data-ic-appt-notes] { flex:1; min-width:0; }
.page-appointments .ic-appt-modal__notes [data-ic-appt-notes][contenteditable="true"] { outline:1px dashed var(--ic-primary); outline-offset:4px; }
.page-appointments .ic-appt-modal__notes-edit { background:none; border:0; font-size:12.5px; color:var(--ic-primary); font-weight:600; cursor:pointer; font-family:inherit; padding:4px 8px; border-radius:var(--r-sm); flex:none; }
.page-appointments .ic-appt-modal__notes-edit:hover { background:var(--ic-crimson-50); }
.page-appointments .ic-appt-modal__meta { display:flex; gap:32px; padding:14px 0 16px; }
.page-appointments .ic-appt-modal__meta-cell { display:flex; flex-direction:column; gap:2px; }
.page-appointments .ic-appt-modal__meta-label { font-family:var(--ic-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ic-ink-3); font-weight:600; }
.page-appointments .ic-appt-modal__meta-value { font-size:15px; color:var(--ic-ink); font-weight:600; }
.page-appointments .ic-appt-modal__patient-link {
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 0;
    color:var(--ic-primary); font-size:13.5px; font-weight:600;
    text-decoration:none;
    border-top:1px solid var(--ic-line);
    width:100%;
    justify-content:center;
    margin-top:4px;
    transition:background .12s;
    border-radius:var(--r-sm);
}
.page-appointments .ic-appt-modal__patient-link:hover { background:var(--ic-crimson-50); }
.page-appointments .ic-book-modal[hidden] { display:none !important; }
.page-appointments .ic-book-modal { position:fixed; inset:0; z-index:9000; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; padding:24px; }
.page-appointments .ic-book-modal__box { background:var(--ic-paper); border-radius:14px; max-width:520px; width:100%; padding:26px 28px; box-shadow:0 14px 40px rgba(0,0,0,.25); position:relative; }
.page-appointments .ic-book-modal__close { position:absolute; top:14px; right:14px; background:none; border:none; width:32px; height:32px; border-radius:8px; cursor:pointer; color:var(--ic-ink-3); display:grid; place-items:center; }
.page-appointments .ic-book-modal__close:hover { background:var(--ic-paper-2); color:var(--ic-ink); }
.page-appointments .ic-book-modal__title { font-family:var(--ic-serif); font-size:22px; font-weight:600; margin:0 0 18px; }
.page-appointments .ic-book-form { display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
.page-appointments .ic-book-form .field { display:flex; flex-direction:column; gap:6px; }
.page-appointments .ic-book-form .field.full { grid-column:1 / -1; }
.page-appointments .ic-book-form label { font-size:13px; font-weight:600; color:var(--ic-ink-2); }
.page-appointments .ic-book-form input, .page-appointments .ic-book-form select, .page-appointments .ic-book-form textarea {
    width:100%; background:var(--ic-paper); border:1px solid var(--ic-line); border-radius:var(--r-md);
    padding:10px 12px; font-family:inherit; font-size:14px; color:var(--ic-ink); box-sizing:border-box;
    transition:border-color .15s, box-shadow .15s;
}
.page-appointments .ic-book-form input:focus, .page-appointments .ic-book-form select:focus, .page-appointments .ic-book-form textarea:focus {
    outline:none; border-color:var(--ic-primary); box-shadow:0 0 0 3px var(--ic-crimson-50);
}
.page-appointments .ic-book-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:22px; }
.page-appointments .ic-toast { position:fixed; bottom:24px; right:24px; background:var(--ic-success); color:#fff; padding:13px 20px 13px 18px; border-radius:10px; font-size:14px; font-weight:600; letter-spacing:-.005em; box-shadow:0 6px 24px rgba(0,0,0,.18); display:flex; align-items:center; gap:10px; z-index:9999; max-width:380px; opacity:0; transform:translateY(8px); transition:opacity .2s ease, transform .2s ease; }
.page-appointments .ic-toast.show { opacity:1; transform:translateY(0); }
@media (max-width: 991px) {
    .page-appointments .cal-week { grid-template-columns: 56px repeat(7, minmax(120px, 1fr)); }
}
@media (max-width: 767px) {
    .page-appointments .ic-book-form { grid-template-columns:1fr; }
    .page-appointments .appt-list-row { grid-template-columns:70px 1fr; }
    .page-appointments .appt-list-row .actions { grid-column: 1 / -1; }
}
@media (max-width: 575px) {
    .page-appointments .ic-appt-modal__grid { grid-template-columns:1fr; }
    .page-appointments .ic-appt-modal__cell { border-right:none; border-bottom:1px solid var(--ic-line); }
    .page-appointments .ic-appt-modal__cell:last-child { border-bottom:none; }
}

/* --- Events & training (page-events.php) --- */
.page-events .seg { display:inline-flex; padding:4px; background:var(--ic-paper-2); border:1px solid var(--ic-line); border-radius:999px; }
.page-events .seg button, .page-events .seg a { border:none; background:none; padding:7px 16px; border-radius:999px; font-size:13.5px; font-weight:600; color:var(--ic-ink-2); cursor:pointer; text-decoration:none; }
.page-events .seg button.on, .page-events .seg a.on { background:var(--ic-primary); color:#fff; }
.page-events .cal-nav { display:inline-flex; align-items:center; gap:6px; }
.page-events .cal-nav a, .page-events .cal-nav button { background:var(--ic-paper); border:1px solid var(--ic-line); width:32px; height:32px; border-radius:8px; display:grid; place-items:center; color:var(--ic-ink-2); text-decoration:none; cursor:pointer; transition:border-color .15s, color .15s; }
.page-events .cal-nav a:hover, .page-events .cal-nav button:hover { border-color:var(--ic-primary); color:var(--ic-primary); }
.page-events .cal-nav .month-label { font-family:var(--ic-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ic-ink-2); padding:0 10px; min-width:130px; text-align:center; }
.page-events .cal-nav .today-btn { width:auto; padding:0 12px; font-family:var(--ic-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; font-weight:600; }
.page-events .cal { display:grid; grid-template-columns: repeat(7,1fr); }
.page-events .cal .dow { font-family:var(--ic-mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ic-ink-3); padding:10px; text-align:center; border-bottom:1px solid var(--ic-line); }
.page-events .cal .cell { min-height:96px; padding:8px 9px; border-right:1px solid var(--ic-line); border-bottom:1px solid var(--ic-line); display:flex; flex-direction:column; gap:5px; }
.page-events .cal .cell:nth-child(7n) { border-right:none; }
.page-events .cal .cell.dim { background:var(--ic-paper-2); }
.page-events .cal .cell .dn { font-family:var(--ic-mono); font-size:12px; color:var(--ic-ink-3); }
.page-events .cal .cell.today .dn { background:var(--ic-primary); color:#fff; border-radius:50%; width:22px; height:22px; display:grid; place-items:center; }
.page-events .cal .cell.past { opacity:.55; }
.page-events .ev { font-size:11px; font-weight:600; padding:3px 7px; border-radius:5px; line-height:1.25; color:var(--ic-primary-2); background:var(--ic-primary-tint); text-decoration:none; cursor:pointer; }
.page-events .ev:hover { background:var(--ic-primary); color:#fff; }
.page-events .res-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:14px; }
@media (max-width: 991px) { .page-events .res-grid { grid-template-columns: repeat(2,1fr); } .page-events .cal .cell { min-height:72px; } }
@media (max-width: 575px) { .page-events .res-grid { grid-template-columns: 1fr; } }
.page-events .ev-featured { display:grid; grid-template-columns:0.7fr 1.3fr; }
@media (max-width: 767px) { .page-events .ev-featured { grid-template-columns:1fr; } }
.page-events .res { overflow:hidden; cursor:pointer; transition:box-shadow .16s, transform .16s; text-decoration:none; color:inherit; }
.page-events .res:hover { box-shadow:var(--sh-2); transform:translateY(-2px); }
.page-events .res .rt { aspect-ratio:16/10; position:relative; background:linear-gradient(135deg, var(--ic-crimson-50) 0%, var(--ic-crimson-100) 100%); }
.page-events .res .play { position:absolute; inset:0; display:grid; place-items:center; }
.page-events .res .play span { width:38px;height:38px;border-radius:50%;background:rgba(252,250,246,.9);display:grid;place-items:center;box-shadow:var(--sh-1); }
.page-events .res .rb { padding:11px 13px; }
.page-events .ic-event-modal[hidden] { display:none !important; }
.page-events .ic-event-modal { position:fixed; inset:0; z-index:9000; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; padding:24px; }
.page-events .ic-event-modal__box { background:var(--ic-paper); border-radius:14px; max-width:540px; width:100%; padding:28px 30px; box-shadow:0 14px 40px rgba(0,0,0,.25); position:relative; }
.page-events .ic-event-modal__close { position:absolute; top:14px; right:14px; background:none; border:none; width:32px; height:32px; border-radius:8px; cursor:pointer; color:var(--ic-ink-3); display:grid; place-items:center; }
.page-events .ic-event-modal__close:hover { background:var(--ic-paper-2); color:var(--ic-ink); }
.page-events .ic-event-modal__title { font-family:var(--ic-serif); font-size:24px; font-weight:400; line-height:1.2; margin:6px 0 8px; }
.page-events .ic-event-modal__meta { display:flex; flex-direction:column; gap:5px; font-size:13.5px; color:var(--ic-ink-2); margin-bottom:16px; }
.page-events .ic-event-meta__row { line-height:1.45; }
.page-events .ic-event-meta__label { display:inline-block; min-width:92px; color:var(--ic-ink-3); font-weight:600; }
.page-events .ic-event-modal__desc { color:var(--ic-ink-2); line-height:1.55; margin-bottom:16px; }
.page-events .ic-event-modal__actions { display:flex; gap:10px; }
.page-events .events-list-row { display:grid; grid-template-columns: 90px 1fr auto; gap:20px; align-items:center; padding:18px 20px; border-bottom:1px solid var(--ic-line); }
.page-events .events-list-row:last-child { border-bottom:none; }
.page-events .events-list-row.is-past { opacity:.55; }
.page-events .events-list-date { text-align:center; padding:8px 0; border:1px solid var(--ic-line); border-radius:var(--r-md); background:var(--ic-paper-2); }
.page-events .events-list-date__d { font-family:var(--ic-serif); font-size:26px; font-weight:700; color:var(--ic-ink); line-height:1; }
.page-events .events-list-date__m { font-family:var(--ic-mono); font-size:11px; letter-spacing:.1em; color:var(--ic-ink-3); margin-top:2px; }
.page-events .events-list-date__t { font-family:var(--ic-mono); font-size:11px; color:var(--ic-ink-3); margin-top:6px; }
.page-events .events-list-body { min-width:0; }
.page-events .events-list-meta { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:6px; }
.page-events .events-list-title { font-size:17px; font-weight:700; margin:0 0 4px; letter-spacing:-.005em; color:var(--ic-ink); }
.page-events .events-list-desc { font-size:13.5px; color:var(--ic-ink-2); margin:0; line-height:1.5; }
.page-events .events-list-actions { display:flex; flex-direction:column; gap:8px; flex:none; }
@media (max-width: 767px) {
    .page-events .events-list-row { grid-template-columns: 70px 1fr; row-gap:14px; }
    .page-events .events-list-actions { grid-column: 1 / -1; flex-direction:row; }
}
.page-events .ic-res-modal[hidden] { display:none !important; }
.page-events .ic-res-modal { position:fixed; inset:0; z-index:9000; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:24px; }
.page-events .ic-res-modal__box { background:var(--ic-paper); border-radius:14px; max-width:820px; width:100%; padding:22px; box-shadow:0 14px 40px rgba(0,0,0,.3); position:relative; }
.page-events .ic-res-modal__close { position:absolute; top:-14px; right:-14px; background:var(--ic-paper); border:1px solid var(--ic-line); width:36px; height:36px; border-radius:50%; cursor:pointer; color:var(--ic-ink-2); display:grid; place-items:center; box-shadow:var(--sh-1); }
.page-events .ic-res-modal__title { font-family:var(--ic-serif); font-size:20px; font-weight:400; margin:0 0 12px; padding-right:24px; }
.page-events .ic-res-modal__embed { position:relative; aspect-ratio:16/9; border-radius:var(--r); overflow:hidden; background:#000; }
.page-events .ic-res-modal__embed iframe { position:absolute; inset:0; width:100% !important; height:100% !important; border:0; }

/* --- Resources (page-resources.php) --- */
.page-resources .res-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }
.page-resources .res { overflow:hidden; cursor:pointer; transition:box-shadow .16s, transform .16s; text-decoration:none; color:inherit; }
.page-resources .res:hover { box-shadow:var(--sh-2); transform:translateY(-2px); }
.page-resources .res .rt { aspect-ratio:16/10; position:relative; }
.page-resources .res .play { position:absolute; inset:0; display:grid; place-items:center; }
.page-resources .res .play span { width:42px;height:42px;border-radius:50%;background:rgba(252,250,246,.92);display:grid;place-items:center;box-shadow:var(--sh-1); }
.page-resources .res .rb { padding:13px 14px 15px; }
.page-resources .res[hidden] { display:none !important; }
.page-resources .seg { display:inline-flex; padding:4px; background:var(--ic-paper-2); border:1px solid var(--ic-line); border-radius:999px; }
.page-resources .seg a, .page-resources .seg button { padding:7px 14px; border-radius:999px; font-size:13px; font-weight:600; color:var(--ic-ink-2); text-decoration:none; border:none; background:transparent; cursor:pointer; font-family:inherit; }
.page-resources .seg a.on, .page-resources .seg button.on { background:var(--ic-primary); color:#fff; }
.page-resources .seg button:hover:not(.on) { color:var(--ic-ink); }
@media (max-width: 1024px) { .page-resources .res-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 768px)  { .page-resources .res-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px)  { .page-resources .res-grid { grid-template-columns: 1fr; } }
.page-resources .ic-res-modal[hidden] { display:none !important; }
.page-resources .ic-res-modal { position:fixed; inset:0; z-index:9000; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:24px; }
.page-resources .ic-res-modal__box { background:var(--ic-paper); border-radius:14px; max-width:820px; width:100%; padding:22px; box-shadow:0 14px 40px rgba(0,0,0,.3); position:relative; }
.page-resources .ic-res-modal__close { position:absolute; top:-14px; right:-14px; background:var(--ic-paper); border:1px solid var(--ic-line); width:36px; height:36px; border-radius:50%; cursor:pointer; color:var(--ic-ink-2); display:grid; place-items:center; box-shadow:var(--sh-1); }
.page-resources .ic-res-modal__title { font-family:var(--ic-serif); font-size:20px; font-weight:400; margin:0 0 12px; padding-right:24px; }
.page-resources .ic-res-modal__embed { position:relative; aspect-ratio:16/9; border-radius:var(--r); overflow:hidden; background:#000; }
.page-resources .ic-res-modal__embed iframe { position:absolute; inset:0; width:100% !important; height:100% !important; border:0; }

/* --- My orders (page-orders.php) --- */
.page-orders .credit-card { display:grid; grid-template-columns: 1.1fr 1fr; gap:0; overflow:hidden; }
@media (max-width: 575px) { .page-orders .credit-card { grid-template-columns: 1fr; } .page-orders .credit-card .cc { border-right:none; border-bottom:1px solid var(--ic-line); } }
.page-orders .credit-card .cc { padding:18px 22px; border-right:1px solid var(--ic-line); }
.page-orders .credit-card .cc:last-child { border-right:none; }
.page-orders .status-pill { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px; }
.page-orders .ord-tbl td { vertical-align:middle; }

/* --- Drug Book · Stock on hand (page-drug-book.php) --- */
.page-drug-book .legend { display:flex; align-items:center; gap:20px; padding:11px 16px; background:var(--ic-paper); border:1px solid var(--ic-line); border-radius:var(--r); flex-wrap:wrap; }
.page-drug-book .legend .lk { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ic-ink-2); }
.page-drug-book .legend .sw { width:14px; height:14px; border-radius:4px; }
.page-drug-book .exp { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; padding:3px 10px; border-radius:999px; }
.page-drug-book .stock-tbl td { vertical-align:middle; }
.page-drug-book .batch-cell { display:flex; flex-direction:column; gap:2px; }
.page-drug-book .prod-name { font-weight:700; font-size:14.5px; }
.page-drug-book .row-bar { width:4px; align-self:stretch; border-radius:4px; }
/* Drug-book filter bar — SHARED by Stock (source/status, drug-book.js) and
   History (type, drug-book-history.js). Inline row on desktop; on phones each
   label+select collapses to its own full-width row. */
.ic-db-filters { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; }
/* History: the "Showing" card sits inline with the filter row. */
.page-drug-book-history .ic-db-history-head { display: flex; align-items:center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.page-drug-book-history .ic-db-history-head .ic-db-filters {margin-bottom: 0;}
@media (max-width: 575px) {
  .page-drug-book-history .ic-db-history-head .ic-db-filters,
  .page-drug-book-history .ic-db-filters .inner-filter-wrap select,
  .page-drug-book-history .ic-db-filters .inner-filter-wrap {
    width: 100%;
  }
  .page-drug-book-history .ic-db-filters .inner-filter-wrap label {width:100%; display:block; margin-bottom:8px;}
}
.page-drug-book-history .ic-db-filters .inner-filter-wrap { width:100%; font-size: 13px; font-weight: 600; color: var(--ic-ink-2); }
@media (min-width:576px) {
  .page-drug-book-history .ic-db-filters .inner-filter-wrap { display: inline-flex; align-items: center; gap: 8px; width:auto; }
  .page-drug-book-history .ic-db-history-head .ic-db-filters {
    width: calc(100% - 166px);
    margin-bottom: 0;
    justify-content: end;
  }
  .page-drug-book-history .ic-db-history-head .history-showing-wrap {
    width: 100%;
    max-width: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
.ic-db-filters select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--ic-paper);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23677' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 11px;
  border: 1px solid var(--ic-line);
  border-radius: var(--r-md);
  padding: 8px 30px 8px 12px;
  font-family: inherit;
  font-size: 13px;
  color: var(--ic-ink);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.ic-db-filters select:hover { border-color: var(--ic-ink-3); }
.ic-db-filters select:focus { outline: none; border-color: var(--ic-primary); box-shadow: 0 0 0 3px var(--ic-crimson-50); }
@media (max-width: 575px) {
  .ic-db-filters { gap: 10px; }
  .ic-db-filters label { width: 100%; justify-content: space-between; }
  .ic-db-filters select { flex: 0 0 auto; width: 62%; min-width: 0; }
}

/* Drug-book success toast (Record + next, etc.) — fixed bottom-right. */
.ic-db-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9500;
  background: var(--ic-success);
  color: #fff;
  padding: 13px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  max-width: 360px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
}
.ic-db-toast.show { opacity: 1; transform: translateY(0); }
.ic-db-toast[hidden] { display: none; }

/* Client-side paginator nav (assets/portal.js [data-ic-paginate]). */
.ic-db-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--ic-line);
}
.ic-training-pager,
.ic-resources-pager {
  border-top:0;
  padding:12px 0;
}
.ic-db-pager:empty { display: none; }
.ic-db-pager .btn:disabled { opacity: .45; cursor: default; pointer-events: none; }
/* Pager on phones: stack the label above the buttons, and keep Previous / Next
   side-by-side as two equal-width buttons. Without this the global .row
   flex-wrap:wrap stacks the two buttons vertically and the row looks broken. */
@media (max-width: 575px) {
  .ic-db-pager { flex-direction: column; align-items: stretch; gap: 10px; }
  .ic-db-pager .row { flex-wrap: nowrap; gap: 10px; }
  .ic-db-pager .row .btn { flex: 1 1 0; }
}

/* --- Drug Book · Record Usage (page-drug-book-record.php) --- */
.page-drug-book-record .rec-form { background:var(--ic-paper); border:1px solid var(--ic-line); border-radius:var(--r-lg); box-shadow:var(--sh-2); overflow:hidden; }
.page-drug-book-record .rec-fields { display:grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap:0; }
.page-drug-book-record .rec-f { padding:20px 22px; border-right:1px solid var(--ic-line); display:flex; flex-direction:column; gap:9px; }
.page-drug-book-record .rec-f:last-child { border-right:none; }
.page-drug-book-record .rec-f .step { display:flex; align-items:center; gap:8px; font-family:var(--ic-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ic-ink-3); }
.page-drug-book-record .rec-f .step b { width:18px;height:18px;border-radius:50%;background:var(--ic-primary);color:#fff;display:grid;place-items:center;font-size:10px; }
.page-drug-book-record select.big-input {appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: var(--ic-paper); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23677'  stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");}
.page-drug-book-record .big-input { font-size:28px; font-weight:700; font-family:var(--ic-serif); padding:10px 14px; border:1.5px solid var(--ic-line-2); border-radius:var(--r-sm); background:var(--ic-paper);}
.page-drug-book-record .big-input:focus { outline:none; border-color:var(--ic-primary); box-shadow:0 0 0 3px var(--ic-primary-tint); }
.page-drug-book-record .typed { border:1.5px solid var(--ic-primary); box-shadow:0 0 0 3px var(--ic-primary-tint); border-radius:var(--r-sm); padding:11px 14px; font-weight:600; font-size:15px; display:flex; justify-content:space-between; align-items:center; }
.page-drug-book-record .rec-foot { display:flex; align-items:center; justify-content:space-between; padding:16px 22px; border-top:1px solid var(--ic-line); background:var(--ic-paper-2); }
.page-drug-book-record .kbd { font-family:var(--ic-mono); font-size:11px; background:var(--ic-paper); border:1px solid var(--ic-line-2); border-bottom-width:2px; border-radius:5px; padding:2px 7px; }
.page-drug-book-record .sess-tbl td { padding:10px 16px; }
.page-drug-book-record .sess-tbl .mono { font-size:12.5px; }
/* Drug · batch cell — stack product over batch (same as Stock/History/etc.) so
   the two run on separate lines instead of concatenating ("100uC3-3029"). */
.page-drug-book-record .batch-cell { display:flex; flex-direction:column; gap:2px; }
.page-drug-book-record .prod-name { font-weight:700; font-size:14.5px; }

/* --- Drug Book · Receive (page-drug-book-receive.php) --- */
.page-drug-book-receive .stock-tbl td { vertical-align:middle; }
.page-drug-book-receive .batch-cell { display:flex; flex-direction:column; gap:2px; }
.page-drug-book-receive .prod-name { font-weight:700; font-size:14.5px; }
.page-drug-book-receive .row-bar { width:4px; align-self:stretch; border-radius:4px; }
.page-drug-book-receive .ic-recv-modal[hidden] { display:none !important; }
.page-drug-book-receive .ic-recv-modal { position:fixed; inset:0; z-index:9000; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; padding:24px; }
.page-drug-book-receive .ic-recv-modal__box { background:var(--ic-paper); border-radius:14px; max-width:480px; width:100%; padding:26px 28px; box-shadow:0 14px 40px rgba(0,0,0,.28); position:relative; }
.page-drug-book-receive .ic-recv-modal__close { position:absolute; top:14px; right:14px; background:none; border:none; width:32px; height:32px; border-radius:8px; cursor:pointer; color:var(--ic-ink-3); display:grid; place-items:center; }
.page-drug-book-receive .ic-recv-modal__title { font-family:var(--ic-serif); font-size:22px; font-weight:400; margin:0 0 18px; }
.page-drug-book-receive .ic-recv-field { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.page-drug-book-receive .ic-recv-field[hidden] { display:none !important; }
.page-drug-book-receive .ic-recv-field label { font-family:var(--ic-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ic-ink-3); font-weight:600; }
.page-drug-book-receive .ic-recv-field input, .page-drug-book-receive .ic-recv-field select { padding:10px 12px; border:1.5px solid var(--ic-line-2); border-radius:var(--r-sm); background:var(--ic-paper); font:inherit; font-size:15px; }
.page-drug-book-receive .ic-recv-field input:focus, .page-drug-book-receive .ic-recv-field select:focus { outline:none; border-color:var(--ic-primary); box-shadow:0 0 0 3px var(--ic-primary-tint); }
.page-drug-book-receive .ic-recv-fixed { font-weight:700; font-size:15px; padding:8px 0; }
/* Over-receipt confirmation prompt — replaces the footer when qty > expected.
   NB: the footer is a .row (display:flex), which beats the UA [hidden] rule, so
   it needs an explicit hide or both button sets show at once. */
.page-drug-book-receive [data-ic-recv-footer][hidden] { display:none !important; }
.page-drug-book-receive .ic-recv-overconfirm { margin-top:16px; padding:14px 16px; border-radius:var(--r-sm); background:var(--ic-paper-2); border-left:3px solid var(--ic-warn); }
.page-drug-book-receive .ic-recv-overconfirm[hidden] { display:none; }
.page-drug-book-receive .ic-recv-overconfirm__msg { margin:0 0 12px; font-size:14px; font-weight:600; color:var(--ic-ink); line-height:1.45; }

/* --- Drug Book · Dispose (page-drug-book-dispose.php) --- */
.page-drug-book-dispose .stock-tbl td { vertical-align:middle; }
.page-drug-book-dispose .batch-cell { display:flex; flex-direction:column; gap:2px; }
.page-drug-book-dispose .prod-name { font-weight:700; font-size:14.5px; }
.page-drug-book-dispose .row-bar { width:4px; align-self:stretch; border-radius:4px; }
.page-drug-book-dispose .ic-disp-modal[hidden] { display:none !important; }
.page-drug-book-dispose .ic-disp-modal { position:fixed; inset:0; z-index:9000; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; padding:24px; }
.page-drug-book-dispose .ic-disp-modal__box { background:var(--ic-paper); border-radius:14px; max-width:480px; width:100%; padding:26px 28px; box-shadow:0 14px 40px rgba(0,0,0,.28); position:relative; }
.page-drug-book-dispose .ic-disp-modal__close { position:absolute; top:14px; right:14px; background:none; border:none; width:32px; height:32px; border-radius:8px; cursor:pointer; color:var(--ic-ink-3); display:grid; place-items:center; }
.page-drug-book-dispose .ic-disp-modal__title { font-family:var(--ic-serif); font-size:22px; font-weight:400; margin:0 0 18px; }
.page-drug-book-dispose .ic-disp-field { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.page-drug-book-dispose .ic-disp-field label { font-family:var(--ic-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ic-ink-3); font-weight:600; }
.page-drug-book-dispose .ic-disp-field input, .page-drug-book-dispose .ic-disp-field select { padding:10px 12px; border:1.5px solid var(--ic-line-2); border-radius:var(--r-sm); background:var(--ic-paper); font:inherit; font-size:15px; }
.page-drug-book-dispose .ic-disp-field input:focus, .page-drug-book-dispose .ic-disp-field select:focus { outline:none; border-color:var(--ic-primary); box-shadow:0 0 0 3px var(--ic-primary-tint); }

/* --- Drug Book · History (page-drug-book-history.php) --- */
.page-drug-book-history .stock-tbl td { vertical-align:middle; }
.page-drug-book-history .batch-cell { display:flex; flex-direction:column; gap:2px; }
.page-drug-book-history .prod-name { font-weight:700; font-size:14.5px; }
.page-drug-book-history .row-bar { width:4px; align-self:stretch; border-radius:4px; }
.page-drug-book-history .type-pill { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:3px 10px; border-radius:999px; text-transform:capitalize; }

/* --- Drug Book sub-nav (parts/drug-book-nav.php) — SHARED component used on
   all 5 drug-book pages, so it is NOT page-scoped; the .db-sub class names are
   unique to this component. JS lives in assets/portal.js. --- */
.db-sub { display:inline-flex; gap:6px; padding:8px 16px; background:var(--ic-paper-2); border:1px solid var(--ic-line); border-radius:999px;  }
.db-sub__list { display:contents; }
.db-sub a { padding:8px 16px; border-radius:8px; font-size:13.5px; font-weight:600; color:var(--ic-ink-2); text-decoration:none; white-space:nowrap; }
.db-sub a.on { background:var(--ic-primary); color:#fff; }
.db-sub a:hover:not(.on) { color:var(--ic-ink); }
.db-sub__toggle { display:none; }
@media (min-width:768px) {
  .db-sub {max-width: min-content;}
}
@media (max-width: 767px) {
  .db-sub { display:block; width:100%; padding:0; background:none; border:none; border-radius:0; }
  .db-sub__toggle { display:flex; width:100%; justify-content:space-between; align-items:center; gap:10px; padding:11px 16px; border:1px solid var(--ic-line); border-radius:var(--r); background:var(--ic-paper-2); font-family:inherit; font-weight:600; font-size:14px; color:var(--ic-ink); cursor:pointer; }
  .db-sub__toggle svg { transition:transform .15s; flex:none; }
  .db-sub.open .db-sub__toggle svg { transform:rotate(180deg); }
  .db-sub__list { display:none; flex-direction:column; gap:2px; margin-top:6px; padding:5px; border:1px solid var(--ic-line); border-radius:var(--r); background:var(--ic-paper); }
  .db-sub.open .db-sub__list { display:flex; }
  .db-sub a { display:block; }
}

/* --- Apply to order (page-apply.php — full-page, scoped via body.page-apply) --- */
.page-apply .apply { display:grid; grid-template-columns: 300px 1fr; min-height:100vh; }
.page-apply .apply-rail { background:var(--ic-primary-3); color:#cdd9d3; padding:40px 36px; display:flex; flex-direction:column; gap:40px; position:relative; overflow:hidden; }
.page-apply .apply-rail::after { content:""; position:absolute; right:-100px; bottom:-60px; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle, rgba(190,132,96,.22), transparent 70%); }
.page-apply .steps { display:flex; flex-direction:column; gap:4px; position:relative; z-index:1; }
.page-apply .stp { display:flex; gap:14px; align-items:flex-start; padding:12px 0; }
.page-apply .stp .ix { width:30px;height:30px;border-radius:50%;border:1.5px solid rgba(255,255,255,.28); display:grid;place-items:center;font-family:var(--ic-mono);font-size:13px;flex-shrink:0;color:#cdd9d3; }
.page-apply .stp.done .ix { background:var(--ic-accent); border-color:var(--ic-accent); color:#fff; }
.page-apply .stp.cur .ix { background:#fff; border-color:#fff; color:var(--ic-primary-3); font-weight:700; }
.page-apply .stp .lb b { display:block; color:#fff; font-size:14.5px; }
.page-apply .stp .lb span { font-size:12.5px; color:#9fb8ae; }
.page-apply .apply-main { padding:48px 64px; max-width:820px; }
.page-apply .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px 22px; }
.page-apply .ahpra-status { display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--ic-success); }
.page-apply .conditional { border:1.5px dashed var(--ic-accent); background:var(--ic-accent-tint); border-radius:var(--r); padding:16px 18px; }

/* --- Sign in (page-login.php — full-page, scoped via body.page-login) --- */
.page-login .auth { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.page-login .auth-brand { background: var(--ic-primary-3); color:#e6ede9; padding: 48px 56px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
.page-login .auth-brand::after { content:""; position:absolute; right:-120px; bottom:-120px; width:420px; height:420px; border-radius:50%; background: radial-gradient(circle, rgba(190,132,96,.28), transparent 70%); }
.page-login .auth-quote { max-width: 440px; position:relative; z-index:1; }
.page-login .auth-quote .mk { font-family:var(--ic-serif); font-size: 90px; line-height:0; color: var(--ic-accent); }
.page-login .auth-quote h2 { font-family:var(--ic-serif); font-weight:500; font-size: 34px; line-height:1.18; color:#fff; letter-spacing:-0.01em; }
.page-login .auth-quote p { color:#aec0b8; margin-top:18px; font-size:15px; }
.page-login .auth-feat { display:flex; gap:24px; position:relative; z-index:1; }
.page-login .auth-feat .f { display:flex; flex-direction:column; gap:4px; }
.page-login .auth-feat .f b { color:#fff; font-family:var(--ic-serif); font-size:24px; font-weight:500; }
.page-login .auth-feat .f span { color:#9fb8ae; font-size:12.5px; }
.page-login .auth-form { display:flex; align-items:center; justify-content:center; padding: 40px; background: var(--ic-canvas); }
.page-login .auth-card { width: 100%; max-width: 408px; }
.page-login .auth-card h1 { font-family:var(--ic-serif); font-weight:500; font-size: 36px; letter-spacing:-0.01em; }
.page-login .silk { display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:var(--r-sm); background:var(--ic-primary-tint); border:1px solid var(--ic-primary-tint2); font-size:13px; color:var(--ic-primary-2); }
.page-login .input-wrap { position:relative; }
.page-login .input-wrap .reveal { position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:13px; color:var(--ic-ink-3); cursor:pointer; font-weight:600; }
.page-login .auth-or { display:flex; align-items:center; gap:14px; color:var(--ic-ink-3); font-size:12.5px; }
.page-login .auth-or::before, .page-login .auth-or::after { content:""; height:1px; background:var(--ic-line); flex:1; }
.page-login .mfa { border:1px dashed var(--ic-line-2); border-radius:var(--r); padding:14px; background:var(--ic-paper); }
.page-login .mfa-dots { display:flex; gap:8px; margin-top:10px; }
.page-login .mfa-dots i { width:42px; height:50px; border-radius:8px; border:1.5px solid var(--ic-line-2); background:var(--ic-paper-2); display:grid; place-items:center; font-family:var(--ic-mono); font-size:20px; font-weight:600; color:var(--ic-ink); }

/* --- 404 Not Found (404.php) --- */
.error404 .notfound { min-height: 60vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding: 64px 24px; max-width: 640px; margin: 0 auto; }
.error404 .notfound .code { font-family:var(--ic-serif); font-weight:500; font-size:120px; line-height:1; letter-spacing:-0.02em; color:var(--ic-primary); margin-bottom:16px; }
.error404 .notfound h1 { font-family:var(--ic-serif); font-weight:500; font-size:36px; letter-spacing:-0.01em; margin-bottom:14px; }
.error404 .notfound p { color:var(--ic-ink-2); font-size:16px; line-height:1.6; margin-bottom:28px; }
.error404 .notfound .row { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }

/* --- Single Post (single.php) --- */
.single-post .post { max-width: 720px; margin: 0 auto; padding: 56px 24px 80px; }
.single-post .post-head { padding-bottom:28px; border-bottom:1px solid var(--ic-line); margin-bottom:36px; }
.single-post .post-head .meta { font-family:var(--ic-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ic-ink-3); }
.single-post .post-head h1 { font-family:var(--ic-serif); font-weight:500; font-size:48px; line-height:1.05; letter-spacing:-0.015em; margin-top:10px; }
.single-post .post-head .excerpt { font-size:18px; color:var(--ic-ink-2); margin-top:14px; line-height:1.55; }
.single-post .post-hero { aspect-ratio: 16/9; margin: 24px 0 36px; border-radius: var(--r-lg); overflow:hidden; }
.single-post .post-body { font-size: 17px; line-height: 1.75; color: var(--ic-ink); }
.single-post .post-body p { margin-bottom: 1.2em; }
.single-post .post-body h2 { font-family:var(--ic-serif); font-size:30px; font-weight:600; margin: 1.4em 0 0.6em; letter-spacing:-0.01em; }
.single-post .post-body h3 { font-family:var(--ic-serif); font-size:22px; font-weight:600; margin: 1.4em 0 0.5em; letter-spacing:-0.005em; }
.single-post .post-body a { color: var(--ic-primary); text-decoration: underline; }
.single-post .post-body blockquote { border-left: 3px solid var(--ic-accent); padding: 4px 0 4px 22px; margin: 1.5em 0; font-style: italic; color: var(--ic-ink-2); }
.single-post .post-body ul, .single-post .post-body ol { padding-left: 24px; margin-bottom: 1.2em; }
.single-post .post-body li { margin-bottom: 0.4em; }
.single-post .post-body img { border-radius: var(--r); }
.single-post .post-body code { background: var(--ic-paper-2); padding: 2px 6px; border-radius: var(--r-sm); font-size: 0.9em; }
.single-post .post-foot { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--ic-line); display:flex; justify-content:space-between; gap:20px; }

/* --- Single Event (single-ic_event.php) --- */
.single-ic_event .ic-single { max-width: 820px; }
.single-ic_event .ic-crumb { font-size: 13px; color: var(--ic-ink-3); margin-bottom: 14px; display: flex; gap: 8px; align-items: center; }
.single-ic_event .ic-crumb a { color: inherit; text-decoration: none; }
.single-ic_event .ic-crumb a:hover { color: var(--ic-ink); }
.single-ic_event .ic-embed { position: relative; aspect-ratio: 16 / 9; margin-bottom: 18px; border-radius: var(--r); overflow: hidden; background: var(--ic-paper-2); }
.single-ic_event .ic-embed iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; }

/* --- Single Resource (single-ic_resource.php) --- */
.single-ic_resource .ic-single { max-width: 820px; }
.single-ic_resource .ic-crumb { font-size: 13px; color: var(--ic-ink-3); margin-bottom: 14px; display: flex; gap: 8px; align-items: center; }
.single-ic_resource .ic-crumb a { color: inherit; text-decoration: none; }
.single-ic_resource .ic-crumb a:hover { color: var(--ic-ink); }
.single-ic_resource .ic-embed { position: relative; aspect-ratio: 16 / 9; margin-bottom: 18px; border-radius: var(--r); overflow: hidden; background: var(--ic-paper-2); }
.single-ic_resource .ic-embed iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; }
.single-ic_resource .ic-embed--pdf { aspect-ratio: auto; height: min(80vh, 800px); }
.single-ic_resource .ic-single .res-hero-img { width: 100%; border-radius: var(--r); margin-bottom: 18px; display: block; }

/* --- Blog Home (home.php) — inner .blog wrapper inside body.blog --- */
.blog .blog { max-width: 1080px; margin: 0 auto; padding: 56px 48px 80px; }
.blog .blog-head { padding-bottom:28px; border-bottom:1px solid var(--ic-line); margin-bottom:40px; }
.blog .blog-head h1 { font-family:var(--ic-serif); font-weight:500; font-size:48px; letter-spacing:-0.015em; }
.blog .blog-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.blog .bcard { overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .16s, transform .16s; }
.blog .bcard:hover { box-shadow:var(--sh-2); transform:translateY(-2px); }
.blog .bcard .bimg { aspect-ratio: 16/9; }
.blog .bcard .bbody { padding: 22px 24px 24px; display:flex; flex-direction:column; gap:10px; }
.blog .bcard h2 { font-family:var(--ic-serif); font-size:24px; font-weight:600; letter-spacing:-0.01em; }
.blog .bcard .meta { font-family:var(--ic-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ic-ink-3); }
.blog .bcard p { font-size:14.5px; color:var(--ic-ink-2); line-height:1.55; }
.blog .bpag { display:flex; gap:10px; justify-content:center; margin-top: 48px; }

/* --- My Account Dashboard (woocommerce/myaccount/dashboard.php) --- */
.woocommerce-account .acc-dash-grid     { display:grid; grid-template-columns: 1.4fr 1fr; gap:18px; margin-bottom:18px; }
.woocommerce-account .acc-order-row     { display:grid; grid-template-columns: auto 1fr auto auto; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--ic-line); }
.woocommerce-account .acc-order-row:last-child { border-bottom:none; }
.woocommerce-account .acc-order-id      { font-family:var(--ic-mono); font-weight:700; font-size:13px; color:var(--ic-primary); }
.woocommerce-account .acc-order-meta    { font-size:12.5px; color:var(--ic-ink-3); }
.woocommerce-account .acc-order-total   { font-weight:700; font-size:14px; color:var(--ic-ink); }
.woocommerce-account .acc-status-pill   { display:inline-block; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:700; }
.woocommerce-account .loyalty-ring-wrap { display:flex; align-items:center; gap:14px; }
.woocommerce-account .loyalty-ring      { position:relative; width:74px; height:74px; flex:none; }
.woocommerce-account .loyalty-ring svg  { transform:rotate(-90deg); }
.woocommerce-account .loyalty-ring__lbl { position:absolute; inset:0; display:grid; place-items:center; font-weight:700; font-size:15px; color:var(--ic-ink); }
@media (max-width: 768px) {
    .woocommerce-account .acc-dash-grid { grid-template-columns: 1fr; }
    .woocommerce-account .acc-order-row { grid-template-columns: auto 1fr; row-gap:4px; }
    .woocommerce-account .acc-order-row .acc-status-pill,
    .woocommerce-account .acc-order-row .acc-order-total { grid-column: 2; justify-self:end; }
}

/* --- Inline field-validation error (drug-book record + receive forms) --- */
.ic-field-err { display: block; color: var(--ic-danger); font-size: 12.5px; margin-top: 4px; font-weight: 500; }
.ic-field-err[hidden] { display: none; }

/* --- Receive success toast (page-drug-book-receive.php) --- */
.page-drug-book-receive .ic-recv-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9500;
  background: var(--ic-success);
  color: #fff;
  padding: 13px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  max-width: 360px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
}
.page-drug-book-receive .ic-recv-toast.show { opacity: 1; transform: translateY(0); }
.page-drug-book-receive .ic-recv-toast[hidden] { display: none; }