/* ============================================================================
   FayoPlus — global design layer
   ----------------------------------------------------------------------------
   Loaded last on every page (surface.php + dashboard.php), so it restyles all
   232 pages from one file. app.css is a PRECOMPILED Tailwind v4 build, so no new
   utility classes can be invented — everything here is hand-written CSS that
   overrides the existing markup's utilities by load order and specificity.

   Contents
     1. Design tokens (light + dark)
     2. Typography
     3. Motion
     4. App shell & header
     5. Navigation menu + popovers
     6. Cards & page headers
     7. Buttons
     8. Form controls (inputs, selects, Tom Select)
     9. Tables
    10. Badges, stats, empty states
    11. Modals & dialogs
    12. Skeletons & loading
    13. Scrollbars, misc, print
   ========================================================================== */

/* ============ 0. BRAND ============
   app.css is a precompiled Tailwind v4 build, and every colour utility in it
   resolves through a variable — .bg-primary is background-color:var(--color-primary),
   and even .bg-primary/10 is a color-mix() over the same variable. Re-pointing
   those variables here therefore re-themes every one of the ~1,459 `primary`,
   ~1,129 `info` and ~2,352 `accent` usages across the app without touching a
   single page.

   success / warning / error are DELIBERATELY left alone: they carry meaning
   ("active", "paid", "overdue", "delete"), and recolouring them red would erase
   the distinction between a confirmation and a destructive action.
   secondary was an off-brand magenta with only 11 uses; it becomes a neutral. */
:root{
  --color-primary:#d32029;        /* brand red, taken from the hospital logo */
  --color-primary-focus:#b3161f;
  --color-info:#d32029;
  --color-info-focus:#b3161f;
  --color-accent:#e0343d;         /* dark-mode accent: a lighter sibling */
  --color-accent-focus:#d32029;
  --color-accent-light:#f0616a;
  --color-secondary:#7a828f;
  --color-secondary-focus:#5b6270;
  --color-secondary-light:#9aa1ad;
}

/* ============================ 1. TOKENS ================================== */
:root{
  /* motion */
  --fp-ease: cubic-bezier(.4,0,.2,1);
  --fp-spring: cubic-bezier(.34,1.56,.64,1);
  --fp-fast:.15s; --fp-med:.24s; --fp-slow:.4s;

  /* brand */
  --fp-primary:#d32029;
  --fp-primary-hi:#b3161f;
  --fp-primary-lo:rgba(211,32,41,.08);
  --fp-accent:211,32,41;
  --fp-ring: rgba(211,32,41,.20);

  /* semantic */
  --fp-success:#059669; --fp-success-lo:#ecfdf5;
  --fp-warning:#d97706; --fp-warning-lo:#fffbeb;
  --fp-error:#dc2626;   --fp-error-lo:#fef2f2;
  --fp-info:#0284c7;    --fp-info-lo:#f0f9ff;

  /* surfaces */
  --fp-bg:#f5f6fa;
  --fp-surface:#ffffff;
  --fp-surface-2:#fafbfd;
  --fp-border:rgba(15,23,42,.07);
  --fp-border-2:rgba(15,23,42,.12);

  /* text */
  --fp-text:#0f172a;
  --fp-text-soft:#5b6579;
  --fp-text-faint:#93a0b4;

  /* elevation */
  --fp-sh-1:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.05);
  --fp-sh-2:0 2px 4px rgba(15,23,42,.03), 0 10px 20px -6px rgba(15,23,42,.09);
  --fp-sh-3:0 18px 40px -12px rgba(15,23,42,.22);
  --fp-sh-ring:0 0 0 1px var(--fp-border);

  /* geometry */
  --fp-r-xs:6px; --fp-r-sm:8px; --fp-r:10px; --fp-r-lg:14px; --fp-r-xl:18px;
  --fp-ctl-h:2.6rem;
}

html.dark, .dark{
  --fp-primary:#f0616a;
  --fp-primary-hi:#f78d94;
  --fp-primary-lo:rgba(240,97,106,.14);
  --fp-ring: rgba(240,97,106,.26);

  --fp-success:#34d399; --fp-success-lo:rgba(52,211,153,.12);
  --fp-warning:#fbbf24; --fp-warning-lo:rgba(251,191,36,.12);
  --fp-error:#f87171;   --fp-error-lo:rgba(248,113,113,.12);
  --fp-info:#38bdf8;    --fp-info-lo:rgba(56,189,248,.12);

  --fp-bg:#0f172a;
  --fp-surface:#1e293b;
  --fp-surface-2:#243044;
  --fp-border:rgba(148,163,184,.14);
  --fp-border-2:rgba(148,163,184,.22);

  --fp-text:#e2e8f0;
  --fp-text-soft:#94a3b8;
  --fp-text-faint:#64748b;

  --fp-sh-1:0 1px 2px rgba(0,0,0,.3);
  --fp-sh-2:0 2px 4px rgba(0,0,0,.2), 0 10px 20px -6px rgba(0,0,0,.4);
  --fp-sh-3:0 18px 40px -12px rgba(0,0,0,.6);
}

/* ========================= 2. TYPOGRAPHY ================================= */
/* Inter reads better than Poppins for dense clinical data: tighter, more
   legible at small sizes, and it ships with the app already. */
body, .font-inter{
  font-family:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  letter-spacing:-.005em;
}
h1,h2,h3,h4,h5{ letter-spacing:-.019em; }
/* Numbers in data contexts line up column-to-column */
table td, table th, .fp-stat-value, .fp-num{ font-variant-numeric: tabular-nums; }

/* ============================ 3. MOTION ================================== */
@keyframes fpPageIn { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
@keyframes fpFadeUp { from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }
@keyframes fpSpin   { to{ transform:rotate(360deg); } }
@keyframes fpShimmer{ 0%{background-position:-450px 0} 100%{background-position:450px 0} }
@keyframes fpPop    { 0%{transform:scale(.94);opacity:0} 100%{transform:scale(1);opacity:1} }

.main-content{ animation: fpPageIn .32s var(--fp-ease) both; }
/* NOTE: never add `will-change:transform` to .card — it creates a PERMANENT
   stacking context per card that traps in-card popovers (Tom Select dropdowns)
   underneath the following card. The entrance animation runs fine without it. */
.main-content .card{ animation: fpFadeUp .42s var(--fp-ease) both; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
}

/* ====================== 4. APP SHELL & HEADER ============================ */
/* :not(.fp-auth) — the sign-in screen paints its own deep ground, and this
   !important rule would otherwise repaint it with the light app background. */
body:not(.fp-auth-body), #root:not(.fp-auth){ background:var(--fp-bg)!important; }

.header{
  background:rgba(255,255,255,.82)!important;
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--fp-border);
  box-shadow:0 1px 2px rgba(15,23,42,.03);
}
.dark .header{ background:rgba(30,41,59,.82)!important; }

/* ==================== 5. NAV MENU & POPOVERS ============================= */
/* The module strip ships as `bg-info text-white` (bright cyan), which fights the
   brand indigo and dates the whole app. Make it a calm surface bar so the active
   module pill is the only strong colour in the chrome. Targeted via :has() on the
   menu container so no markup change is needed. */
.header div:has(> #menuContainer){
  background:var(--fp-surface)!important;
  /* module labels sit in brand red by default; hover and the active pill are unchanged */
  color:var(--fp-primary)!important;
  border:1px solid var(--fp-border);
  box-shadow:var(--fp-sh-1);
  border-radius:var(--fp-r-lg)!important;
}
.header div:has(> #menuContainer) #scrollLeft,
.header div:has(> #menuContainer) #scrollRight{
  color:var(--fp-text-faint); transition:color var(--fp-fast) var(--fp-ease), background-color var(--fp-fast) var(--fp-ease);
}
.header div:has(> #menuContainer) #scrollLeft:hover,
.header div:has(> #menuContainer) #scrollRight:hover{
  color:var(--fp-primary); background:var(--fp-primary-lo)!important;
}

/* The module bar: pill triggers that highlight on hover and when their module
   is the one being viewed. */
#menuContainer{ gap:.15rem; align-items:center; }
#menuContainer .btn{
  border-radius:var(--fp-r); color:var(--fp-primary);
  padding:.44rem .7rem; font-weight:500;
}
#menuContainer .btn:hover{
  background:var(--fp-primary-lo); color:var(--fp-primary); transform:none;
}
#menuContainer .btn i{ opacity:.85; }
/* the active module is marked by the legacy dotted-underline span */
#menuContainer .btn span[class*="border-dotted"]{
  border-bottom:none!important; padding-bottom:0!important;
  position:relative;
}
#menuContainer .btn:has(span[class*="border-dotted"]){
  background:var(--fp-primary); color:#fff;
  box-shadow:0 4px 12px -4px rgba(211,32,41,.45);
}
#menuContainer .btn:has(span[class*="border-dotted"]) i{ opacity:1; }
#menuContainer .btn:has(span[class*="border-dotted"]):hover{ background:var(--fp-primary-hi); color:#fff; }

/* dropdown panels are now mega panels — see section 24 */

/* ======================= 6. CARDS & PAGE HEADS =========================== */
.card{
  background:var(--fp-surface)!important;
  border:1px solid var(--fp-border);
  border-radius:var(--fp-r-lg)!important;
  box-shadow:var(--fp-sh-1);
  transition: box-shadow var(--fp-med) var(--fp-ease), border-color var(--fp-med) var(--fp-ease), transform var(--fp-med) var(--fp-ease);
}
.card:hover{ box-shadow:var(--fp-sh-2); border-color:var(--fp-border-2); }

/* page header block built by fp-ui.js (icon badge + title + description) */
.fp-hdr-ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:3rem; height:3rem; border-radius:var(--fp-r-lg); flex:0 0 auto;
  background:linear-gradient(135deg, #b3161f 0%, var(--fp-primary) 100%);
  color:#fff; font-size:1.4rem;
  box-shadow:0 6px 16px -6px rgba(211,32,41,.5);
}
.fp-page-title{ font-size:1.35rem; font-weight:650; color:var(--fp-text); line-height:1.2; }
.fp-page-desc{ font-size:.8rem; color:var(--fp-text-soft); margin-top:.15rem; max-width:65ch; }

/* =========================== 7. BUTTONS ================================== */
.btn{
  border-radius:var(--fp-r)!important;
  font-weight:550;
  transition: transform var(--fp-fast) var(--fp-ease),
              box-shadow var(--fp-med) var(--fp-ease),
              background-color var(--fp-med) var(--fp-ease),
              border-color var(--fp-med) var(--fp-ease),
              color var(--fp-med) var(--fp-ease);
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0) scale(.975); }
.btn:focus-visible{ outline:2px solid var(--fp-primary); outline-offset:2px; }
.btn > i, .btn > svg{ transition:transform var(--fp-med) var(--fp-ease); }
.btn:hover > i{ transform:scale(1.1); }
.btn > i.fp-btn-icon{ margin-right:.4rem; }

/* give the app's solid buttons real depth */
.btn.bg-primary,.btn.bg-info,.btn.bg-success,.btn.bg-error,.btn.bg-warning,
a.bg-primary,a.bg-info,a.bg-success,a.bg-error{
  box-shadow:0 1px 2px rgba(15,23,42,.08), 0 6px 14px -6px rgba(15,23,42,.35);
}
.btn.bg-primary:hover,.btn.bg-info:hover,.btn.bg-success:hover,.btn.bg-error:hover,
a.bg-primary:hover,a.bg-info:hover,a.bg-success:hover,a.bg-error:hover{
  box-shadow:0 2px 4px rgba(15,23,42,.1), 0 12px 22px -8px rgba(15,23,42,.45);
}
/* loading spinner (fp-ui.js adds .fp-loading) */
.btn.fp-loading{ pointer-events:none; position:relative; color:transparent!important; }
.btn.fp-loading::after{
  content:""; position:absolute; top:calc(50% - .5rem); left:calc(50% - .5rem);
  width:1rem; height:1rem; border:2px solid currentColor; border-right-color:transparent;
  border-radius:50%; animation:fpSpin .6s linear infinite; color:#fff;
}

/* ======================== 8. FORM CONTROLS =============================== */
.form-input, .form-textarea, textarea, select,
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="time"], input[type="tel"], input[type="search"]{
  border-color:var(--fp-border-2)!important;
  background:var(--fp-surface-2)!important;
  color:var(--fp-text);
  transition: border-color var(--fp-med) var(--fp-ease),
              box-shadow var(--fp-med) var(--fp-ease),
              background-color var(--fp-med) var(--fp-ease);
}
.form-input:hover, textarea:hover, select:hover,
input[type="text"]:hover, input[type="number"]:hover, input[type="date"]:hover{
  border-color:var(--fp-border-2)!important; background:var(--fp-surface)!important;
}
.form-input:focus, .form-textarea:focus, textarea:focus, select:focus,
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="number"]:focus, input[type="date"]:focus, input[type="time"]:focus,
input[type="tel"]:focus, input[type="search"]:focus{
  border-color:var(--fp-primary)!important;
  background:var(--fp-surface)!important;
  box-shadow:0 0 0 3.5px var(--fp-ring)!important;
  outline:none;
}

/* Radius is applied separately: an input that is half of a joined group carries
   `rounded-l-lg` (with the button carrying `rounded-r-lg`), and blanket-rounding
   all four corners visually breaks the group apart. The trailing hyphen in
   "rounded-l-" matters — without it the match would also catch "rounded-lg" and
   wrongly exclude every ordinary input. */
.form-input:not([class*="rounded-l-"]):not([class*="rounded-r-"]):not([class*="rounded-t-"]):not([class*="rounded-b-"]):not([class*="rounded-none"]),
.form-textarea:not([class*="rounded-l-"]):not([class*="rounded-r-"]),
textarea:not([class*="rounded-l-"]):not([class*="rounded-r-"]),
select:not([class*="rounded-l-"]):not([class*="rounded-r-"]),
input[type="text"]:not([class*="rounded-l-"]):not([class*="rounded-r-"]):not([class*="rounded-none"]),
input[type="email"]:not([class*="rounded-l-"]):not([class*="rounded-r-"]),
input[type="password"]:not([class*="rounded-l-"]):not([class*="rounded-r-"]),
input[type="number"]:not([class*="rounded-l-"]):not([class*="rounded-r-"]),
input[type="date"]:not([class*="rounded-l-"]):not([class*="rounded-r-"]),
input[type="time"]:not([class*="rounded-l-"]):not([class*="rounded-r-"]),
input[type="tel"]:not([class*="rounded-l-"]):not([class*="rounded-r-"]),
input[type="search"]:not([class*="rounded-l-"]):not([class*="rounded-r-"]){
  border-radius:var(--fp-r)!important;
}
/* Keep a grouped input's own side-rounding, just at the system's radius. */
.form-input[class*="rounded-l-"]{ border-top-left-radius:var(--fp-r)!important; border-bottom-left-radius:var(--fp-r)!important; }

/* The appended button in a search group (e.g. the patient lookup on the
   appointment form) must read as one control with the input beside it: same
   border colour, same fill, no doubled divider, and a clickable hover. */
.form-input[class*="rounded-l-"] ~ div[onclick]{
  border-color:var(--fp-border-2)!important;
  background:var(--fp-surface-2);
  color:var(--fp-text-soft);
  border-left:none!important;
  border-top-right-radius:var(--fp-r)!important;
  border-bottom-right-radius:var(--fp-r)!important;
  transition:background-color var(--fp-fast) var(--fp-ease), color var(--fp-fast) var(--fp-ease);
}
.form-input[class*="rounded-l-"] ~ div[onclick]:hover{
  background:var(--fp-primary-lo); color:var(--fp-primary);
}

input::placeholder, textarea::placeholder{ color:var(--fp-text-faint); }

/* field labels get a consistent, quieter voice */
label > span:first-child{ font-size:.8rem; font-weight:550; color:var(--fp-text-soft); }

/* Tom Select parity — every select in the app becomes one of these at runtime */
.ts-wrapper .ts-control{
  border-radius:var(--fp-r)!important;
  border-color:var(--fp-border-2)!important;
  background:var(--fp-surface-2)!important;
  min-height:var(--fp-ctl-h);
  transition: box-shadow var(--fp-med) var(--fp-ease), border-color var(--fp-med) var(--fp-ease), background-color var(--fp-med) var(--fp-ease);
}
.ts-wrapper.focus .ts-control{
  border-color:var(--fp-primary)!important;
  background:var(--fp-surface)!important;
  box-shadow:0 0 0 3.5px var(--fp-ring)!important;
}
.ts-dropdown{
  border-radius:var(--fp-r-lg)!important;
  border:1px solid var(--fp-border)!important;
  box-shadow:var(--fp-sh-3)!important;
  padding:.3rem!important;
  background:var(--fp-surface)!important;
  /* must clear every overflow/stacking ancestor; .fp-modal sits at 9999 */
  z-index:2147483000!important;
}
.ts-dropdown .option{
  border-radius:var(--fp-r-sm)!important; padding:.5rem .65rem!important;
  color:var(--fp-text-soft);
}
.ts-dropdown .option.active{ background:var(--fp-primary-lo)!important; color:var(--fp-primary)!important; }
.ts-wrapper.dropdown-active{ position:relative; z-index:60; }
/* Fallback for in-place (non-body) dropdowns: lift the whole card above its
   siblings while a select inside it is open. */
.card:has(.ts-wrapper.dropdown-active){ position:relative; z-index:40; }
.space-y-5 > .card:has(.ts-wrapper.dropdown-active){ z-index:40; }

/* =========================== 9. TABLES =================================== */
/* Replaces the heavy dark header bar with a light, typographic one. */
table thead tr{ background:transparent!important; }
table thead th{
  background:var(--fp-surface-2)!important;
  color:var(--fp-text-soft)!important;
  font-size:.68rem!important; font-weight:650!important;
  letter-spacing:.06em; text-transform:uppercase;
  padding-top:.7rem!important; padding-bottom:.7rem!important;
  border-bottom:1px solid var(--fp-border);
  position:sticky; top:0; z-index:2;
}
table thead th:first-child{ border-top-left-radius:var(--fp-r); border-bottom-left-radius:0; }
table thead th:last-child{ border-top-right-radius:var(--fp-r); border-bottom-right-radius:0; }
table tbody tr{
  transition: background-color var(--fp-fast) var(--fp-ease), box-shadow var(--fp-fast) var(--fp-ease);
  border-bottom:1px solid var(--fp-border);
}
table tbody tr:last-child{ border-bottom:none; }
table tbody tr:hover{ background:var(--fp-primary-lo)!important; }
table tbody td{ padding-top:.62rem!important; padding-bottom:.62rem!important; color:var(--fp-text); }

/* ================= 10. BADGES, STATS, EMPTY STATES ======================= */
.badge{
  border-radius:999px!important; font-weight:600; font-size:.7rem;
  letter-spacing:.01em; padding:.2rem .6rem;
  animation:fpPop var(--fp-med) var(--fp-spring) both;
}
/* stat tiles rendered by fp_stat() */
.fp-stat{ transition: transform var(--fp-med) var(--fp-ease), box-shadow var(--fp-med) var(--fp-ease); }
.fp-stat:hover{ transform:translateY(-2px); box-shadow:var(--fp-sh-2); }

.fp-empty{ display:flex; flex-direction:column; align-items:center; gap:.5rem; padding:2.5rem 1rem; color:var(--fp-text-faint); }
.fp-empty i{ font-size:2.2rem; opacity:.5; }
.fp-empty-title{ font-weight:600; color:var(--fp-text-soft); }
.fp-empty-hint{ font-size:.78rem; }

/* ====================== 11. MODALS & DIALOGS ============================= */
.fp-modal{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:1rem; }
.fp-modal.hidden{ display:none; }
.fp-modal__backdrop{
  position:absolute; inset:0; background:rgba(15,23,42,.5);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .2s ease;
}
.fp-modal__panel{
  position:relative; width:100%; max-width:34rem; max-height:calc(100vh - 2rem); overflow-y:auto;
  transform:translateY(12px) scale(.97); opacity:0;
  transition:transform .24s var(--fp-spring), opacity .2s ease;
}
.fp-modal.show .fp-modal__backdrop{ opacity:1; }
.fp-modal.show .fp-modal__panel{ transform:none; opacity:1; }
.fp-modal__panel > div{ border-radius:var(--fp-r-xl)!important; box-shadow:var(--fp-sh-3)!important; }

/* SweetAlert, used for confirmations across the app */
.sweet-alert{
  border-radius:var(--fp-r-xl)!important;
  box-shadow:var(--fp-sh-3)!important;
  font-family:'Inter',ui-sans-serif,system-ui,sans-serif!important;
}
.sweet-alert h2{ font-weight:650!important; letter-spacing:-.02em; }
.sweet-alert button{ border-radius:var(--fp-r)!important; font-weight:600!important; }

/* ==================== 12. SKELETONS & LOADING ============================ */
.fp-skeleton{
  display:block; border-radius:var(--fp-r-sm); height:.8rem; min-width:2rem;
  background:#e6e9ef;
  background-image:linear-gradient(90deg,#e6e9ef 0,#f3f5f9 200px,#e6e9ef 400px);
  background-size:900px 100%;
  animation:fpShimmer 1.25s linear infinite;
}
.fp-skeleton.circle{ border-radius:9999px; }
.dark .fp-skeleton{
  background:#334155;
  background-image:linear-gradient(90deg,#334155 0,#42536b 200px,#334155 400px);
}
.fp-skel-row > td{ padding:.75rem 1rem!important; }
.fp-just-loaded{ animation: fpPageIn var(--fp-med) var(--fp-ease) both; }

/* ================= 13. SCROLLBARS, MISC, PRINT =========================== */
*::-webkit-scrollbar{ width:9px; height:9px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:rgba(100,116,139,.28); border-radius:999px; }
*::-webkit-scrollbar-thumb:hover{ background:rgba(100,116,139,.5); }

a{ transition: color var(--fp-fast) var(--fp-ease), background-color var(--fp-fast) var(--fp-ease); }

@media print{
  .header, .fp-modal, .pagination-wrapper, nav{ display:none!important; }
  .card{ box-shadow:none!important; border:1px solid #ddd!important; }
}

/* ==================== 14. PAGINATION (client-side pager) ================= */
/* Built by core.js for every list; restyled here to match the control system. */
.pagination-wrapper{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:1rem; }
.pagination{ display:flex; align-items:center; gap:.25rem; list-style:none; padding:0; margin:0; }
.pagination li a, .pagination li .page-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2rem; height:2rem; padding:0 .55rem;
  border-radius:var(--fp-r-sm)!important;
  border:1px solid transparent;
  color:var(--fp-text-soft); font-size:.8rem; font-weight:600;
  background:transparent; cursor:pointer;
  transition:background-color var(--fp-fast) var(--fp-ease), color var(--fp-fast) var(--fp-ease), border-color var(--fp-fast) var(--fp-ease);
}
.pagination li a:hover, .pagination li .page-btn:hover{
  background:var(--fp-primary-lo); color:var(--fp-primary); border-color:transparent;
}
.pagination li.active a, .pagination li.active .page-btn{
  background:var(--fp-primary)!important; color:#fff!important;
  box-shadow:0 4px 10px -4px rgba(211,32,41,.5);
}
.pagination li.disabled a, .pagination li.disabled .page-btn{ opacity:.38; pointer-events:none; }
.pagination li.dots a, .pagination li.dots .page-btn{ pointer-events:none; opacity:.5; }
.fp-page-info{ font-size:.78rem; color:var(--fp-text-faint); }

/* ==================== 15. AUTH / LOGIN SCREEN =========================== */
/* Split screen: a red brand panel carrying the hospital's identity, and a calm
   white panel carrying the form. The brand side is a gradient in the logo's own
   red (#d32029 -> #8f1119) woven with a faint cross-and-grid pattern drawn in
   CSS -- no image file, so it stays crisp at any size and costs nothing to load.
   Below 62rem the brand panel collapses to a compact header above the form.
   Hand-written: app.css is a precompiled Tailwind build with no arbitrary
   utilities, so none of this can come from a class. */

body.fp-auth-body{ background:#ffffff!important; }
body.fp-auth-body .app-preloader{ background:#ffffff!important; }

#root.fp-auth{
  position:relative; min-height:100vh; min-height:100dvh; width:100%;
  display:grid; grid-template-columns:1.05fr 1fr;
  background:#ffffff; overflow:hidden;
}

/* ---------- brand side ---------- */
.fp-auth-brand{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:3.2rem 3.4rem;
  background:linear-gradient(150deg,#e0343d 0%,#d32029 38%,#a91520 74%,#8f1119 100%);
  color:#fff; isolation:isolate;
}
/* the woven pattern: a fine grid plus a sparse cross motif, both in white at low
   alpha so they read as texture rather than decoration */
.fp-auth-brand::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.16) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255,255,255,.16) 2px, transparent 2px);
  background-size:34px 34px, 34px 34px, 170px 170px, 170px 170px;
  background-position:0 0, 0 0, 12px 12px, 12px 12px;
  mask-image:radial-gradient(120% 100% at 15% 0%, #000 25%, rgba(0,0,0,.35) 70%, transparent 100%);
  -webkit-mask-image:radial-gradient(120% 100% at 15% 0%, #000 25%, rgba(0,0,0,.35) 70%, transparent 100%);
}
/* a soft bloom so the flat gradient gains depth */
.fp-auth-brand::after{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  width:46rem; height:46rem; right:-16rem; bottom:-20rem; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.20) 0%, rgba(255,255,255,.06) 45%, transparent 70%);
}

.fp-auth-brand-top{ display:flex; align-items:center; gap:.85rem; }
.fp-auth-mark{
  width:3.4rem; height:3.4rem; border-radius:16px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; padding:.4rem;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.45);
}
.fp-auth-mark img{ max-width:100%; max-height:100%; object-fit:contain; }
.fp-auth-brand-name{ font-size:1rem; font-weight:700; letter-spacing:.01em; line-height:1.2; }
.fp-auth-brand-tag{ font-size:.72rem; color:rgba(255,255,255,.66); letter-spacing:.04em; }

.fp-auth-brand-mid{ padding:2.5rem 0; max-width:26rem; }
.fp-auth-headline{
  font-size:clamp(1.9rem, 2.6vw, 2.6rem); font-weight:700; line-height:1.16;
  letter-spacing:-.02em; margin:0;
}
.fp-auth-headline em{ font-style:normal; color:rgba(255,255,255,.62); }
.fp-auth-blurb{
  margin-top:.9rem; font-size:.92rem; line-height:1.6; color:rgba(255,255,255,.76);
}
.fp-auth-pulse{
  /* height is explicit: app.css's reset gives svg a fixed box, so width alone collapses it
     rather than letting the viewBox set the ratio */
  display:block; width:11rem; height:1.55rem; margin:1.4rem 0 0;
  color:rgba(255,255,255,.5); overflow:visible;
}

.fp-auth-points{ display:flex; flex-direction:column; gap:.7rem; margin-top:2rem; }
.fp-auth-point{ display:flex; align-items:center; gap:.65rem; font-size:.84rem; color:rgba(255,255,255,.9); }
.fp-auth-point i{
  width:1.7rem; height:1.7rem; border-radius:8px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center; font-size:.9rem;
  background:rgba(255,255,255,.16); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
}
/* ---------- brand-side art + infographic ---------- */
/* Line-art hospital anchored to the bottom-right of the panel, behind the copy. It is drawn in
   currentColor at low alpha so it reads as an engraving in the gradient rather than a picture
   sitting on top of it, and it is faded out toward the top-left so it never fights the headline. */
.fp-auth-art{
  position:absolute; z-index:0; pointer-events:none;
  right:-2.5rem; bottom:2rem; width:27rem; max-width:80%;
  /* deliberately faint: the copy and the figure tiles are allowed to sit over it, which is the
     only thing that holds up across panel widths -- a corner-anchored piece large enough to read
     would collide with the tiles as soon as the panel narrows */
  color:rgba(255,255,255,.15);
  mask-image:linear-gradient(120deg, transparent 4%, #000 42%);
  -webkit-mask-image:linear-gradient(120deg, transparent 4%, #000 42%);
}
/* Everything below animates a state that is already visible, and none of it uses a fill mode.
   That matters: an entrance or draw-on animation has to START from a hidden state, so if the
   timeline never advances the element just stays invisible. Written this way, the worst case
   anywhere the animation does not run is the art sitting still -- which is what it did before. */

.fp-auth-ecg{ stroke-linecap:round; stroke-linejoin:round; }

/* A short bright dash rides along the trace. The base line underneath is fully drawn and never
   touched, so the divider reads the same whether or not this runs. */
.fp-auth-ecg-spark{
  stroke-dasharray:16 264;
  filter:drop-shadow(0 0 4px rgba(255,255,255,.9));
  animation:fpEcgSpark 2.8s linear infinite;
}
@keyframes fpEcgSpark{
  from{ stroke-dashoffset:280; }
  to  { stroke-dashoffset:0; }
}

/* The building drifts, as though seen through air. */
.fp-auth-art{ animation:fpArtDrift 11s ease-in-out infinite alternate; }
@keyframes fpArtDrift{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-6px,-9px,0); }
}

/* Windows light up storey by storey, then dim again. The keyframes never go below .4, and the
   resting value is full strength, so a stalled animation leaves the windows simply drawn. */
.fp-auth-win{ stroke:#fff; opacity:.5; animation:fpWinGlow 6.5s ease-in-out infinite; }
/* indexed explicitly rather than with :nth-of-type -- the svg has other <path> siblings (the
   canopy, the ground line), so nth-of-type does not line up with the windows and three of them
   ended up sharing a phase */
.fp-auth-win[data-w="2"]{ animation-delay:-5.6s; }
.fp-auth-win[data-w="3"]{ animation-delay:-4.7s; }
.fp-auth-win[data-w="4"]{ animation-delay:-3.8s; }
.fp-auth-win[data-w="5"]{ animation-delay:-2.9s; }
.fp-auth-win[data-w="6"]{ animation-delay:-2.0s; }
.fp-auth-win[data-w="7"]{ animation-delay:-1.1s; }
.fp-auth-win[data-w="8"]{ animation-delay:-0.2s; }
@keyframes fpWinGlow{
  0%,100%{ opacity:.18; }
  45%    { opacity:.62; }
}

/* The cross emblem breathes. transform-box:fill-box makes the transform-origin resolve against
   the element's own box rather than the whole SVG viewport. */
.fp-auth-cross{
  transform-box:fill-box; transform-origin:center;
  animation:fpCrossBeat 3.4s ease-in-out infinite;
}
@keyframes fpCrossBeat{
  0%,100%{ transform:scale(1);    opacity:.75; }
  50%    { transform:scale(1.09); opacity:1; }
}

/* Figure tiles lift on hover -- an interaction, so there is nothing to stall. */
.fp-auth-fig{
  transition:transform var(--fp-fast) var(--fp-ease), background-color var(--fp-fast) var(--fp-ease);
}
.fp-auth-fig:hover{ transform:translateY(-3px); background:rgba(255,255,255,.16); }

@media (prefers-reduced-motion:reduce){
  .fp-auth-ecg-spark, .fp-auth-art, .fp-auth-win, .fp-auth-cross{ animation:none; }
  .fp-auth-ecg-spark{ opacity:0; }
}

/* the panel's own content has to sit above the art */
.fp-auth-brand-top,
.fp-auth-brand-mid,
.fp-auth-brand-foot{ position:relative; z-index:1; }

.fp-auth-figs{
  display:flex; gap:.55rem; margin-top:2.1rem; flex-wrap:wrap;
}
.fp-auth-fig{
  flex:1 1 6.5rem; min-width:6.5rem;
  padding:.7rem .8rem; border-radius:12px;
  background:rgba(255,255,255,.10);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  backdrop-filter:blur(2px);
}
.fp-auth-fig i{ font-size:1rem; color:rgba(255,255,255,.7); }
.fp-auth-fig b{
  display:block; margin-top:.15rem;
  font-size:1.35rem; font-weight:700; letter-spacing:-.02em; line-height:1.1; color:#fff;
}
.fp-auth-fig span{
  display:block; margin-top:.1rem;
  font-size:.68rem; letter-spacing:.04em; color:rgba(255,255,255,.62);
}

.fp-auth-brand-foot{
  display:flex; align-items:center; gap:.55rem;
  font-size:.72rem; color:rgba(255,255,255,.55);
}
.fp-auth-brand-foot i{ width:1px; height:.8rem; background:rgba(255,255,255,.28); flex:0 0 auto; }

/* ---------- form side ---------- */
.fp-auth-pane{
  position:relative; display:flex; align-items:center; justify-content:center;
  padding:3rem 2rem; background:#fff;
}
.fp-auth-card{
  width:100%; max-width:23rem;
  animation:fpAuthIn .5s var(--fp-ease) both;
}
@keyframes fpAuthIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

.fp-auth-eyebrow{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#d32029; background:rgba(211,32,41,.08);
  padding:.3rem .6rem; border-radius:999px;
}
.fp-auth-title{
  margin-top:.9rem; font-size:1.65rem; font-weight:700; letter-spacing:-.02em;
  color:#111827; line-height:1.2;
}
.fp-auth-sub{ margin-top:.4rem; font-size:.86rem; color:#6b7280; }

.fp-auth-form{ margin-top:1.9rem; display:flex; flex-direction:column; gap:1.05rem; }
.fp-auth-label{
  display:block; margin-bottom:.4rem;
  font-size:.7rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#8b93a1;
}
.fp-auth-ctl{ position:relative; display:flex; align-items:stretch; }
#root.fp-auth .fp-auth-ctl .fp-auth-ico{
  position:absolute; left:0; top:0; width:2.7rem; height:100%;
  display:flex; align-items:center; justify-content:center;
  color:#9aa1ad; font-size:1.05rem; pointer-events:none;
  transition:color var(--fp-fast) var(--fp-ease);
}
/* #root.fp-auth prefix: the global input rules score (0,3,1) through their
   :not([class*="rounded-l-"]) chain, which outranks a plain class even with
   !important, so these have to match that weight. */
#root.fp-auth .fp-auth-ctl input{
  width:100%; height:2.95rem; padding:0 .9rem 0 2.7rem!important;
  border-radius:11px!important; border:1px solid #e2e5ea!important;
  background:#f7f8fa!important; color:#111827!important;
  font-size:.9rem; outline:none!important;
  transition:border-color var(--fp-fast) var(--fp-ease), background-color var(--fp-fast) var(--fp-ease), box-shadow var(--fp-fast) var(--fp-ease);
}
#root.fp-auth .fp-auth-ctl input::placeholder{ color:#aab1bd; }
#root.fp-auth .fp-auth-ctl input:hover{ background:#fff!important; border-color:#cfd4dc!important; }
#root.fp-auth .fp-auth-ctl input:focus{
  background:#fff!important; border-color:#d32029!important;
  box-shadow:0 0 0 3.5px rgba(211,32,41,.13)!important;
}
#root.fp-auth .fp-auth-ctl input:focus ~ .fp-auth-ico{ color:#d32029; }
#root.fp-auth .fp-auth-ctl input.has-eye{ padding-right:3rem!important; }
#root.fp-auth .fp-auth-eye{
  position:absolute; right:.25rem; top:50%; transform:translateY(-50%);
  width:2.3rem; height:2.3rem; border-radius:9px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:#9aa1ad; font-size:1.05rem; background:transparent;
  transition:background-color var(--fp-fast) var(--fp-ease), color var(--fp-fast) var(--fp-ease);
}
#root.fp-auth .fp-auth-eye:hover{ background:rgba(211,32,41,.08); color:#d32029; }

.fp-auth-btn{
  margin-top:.35rem; position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  width:100%; height:2.95rem; border:none; border-radius:11px; cursor:pointer;
  background:linear-gradient(135deg,#e0343d 0%,#d32029 55%,#b3161f 100%);
  color:#fff; font-size:.92rem; font-weight:650; letter-spacing:.01em;
  box-shadow:0 12px 26px -12px rgba(211,32,41,.75);
  transition:transform var(--fp-fast) var(--fp-ease), box-shadow var(--fp-med) var(--fp-ease);
}
.fp-auth-btn::after{                    /* sheen sweep on hover */
  content:""; position:absolute; top:0; left:-60%; width:45%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  transform:skewX(-20deg); transition:left .6s var(--fp-ease);
}
.fp-auth-btn:hover{ transform:translateY(-2px); box-shadow:0 18px 36px -12px rgba(211,32,41,.8); }
.fp-auth-btn:hover::after{ left:120%; }
.fp-auth-btn:active{ transform:translateY(0) scale(.99); }

.fp-auth-foot{
  margin-top:1.9rem; padding-top:1.1rem; border-top:1px solid #eef0f3;
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; color:#a2a9b5;
}
.fp-auth-foot span{ width:1px; height:.8rem; background:#e2e5ea; }

.fp-auth-toggle{
  position:absolute; top:1.2rem; right:1.4rem; z-index:3;
  width:2.4rem; height:2.4rem; border-radius:50%; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; font-size:1.05rem;
  background:#f7f8fa; border:1px solid #e2e5ea; color:#6b7280;
  transition:background-color var(--fp-fast) var(--fp-ease), color var(--fp-fast) var(--fp-ease);
}
.fp-auth-toggle:hover{ background:#fff; color:#d32029; }

/* ---------- responsive ---------- */
@media (max-width:62rem){
  #root.fp-auth{ grid-template-columns:1fr; grid-template-rows:auto 1fr; }
  .fp-auth-brand{ padding:1.6rem 1.6rem 1.9rem; }
  .fp-auth-brand-mid, .fp-auth-points, .fp-auth-brand-foot, .fp-auth-art{ display:none; }
  .fp-auth-pane{ padding:2.4rem 1.5rem 3rem; align-items:flex-start; }
}
@media (max-width:480px){
  .fp-auth-brand{ padding:1.3rem 1.2rem 1.5rem; }
  .fp-auth-mark{ width:2.8rem; height:2.8rem; border-radius:13px; }
  .fp-auth-title{ font-size:1.45rem; }
}

/* ---------- dark ---------- */
html.dark body.fp-auth-body,
html.dark body.fp-auth-body .app-preloader{ background:#0f1115!important; }
html.dark #root.fp-auth{ background:#0f1115; }
html.dark .fp-auth-brand{
  background:linear-gradient(150deg,#b3161f 0%,#8f1119 42%,#5e0b11 100%);
}
html.dark .fp-auth-pane{ background:#0f1115; }
html.dark .fp-auth-title{ color:#f3f4f6; }
html.dark .fp-auth-sub{ color:rgba(255,255,255,.55); }
html.dark .fp-auth-label{ color:rgba(255,255,255,.45); }
html.dark .fp-auth-eyebrow{ color:#f0616a; background:rgba(240,97,106,.14); }
html.dark #root.fp-auth .fp-auth-ctl input{
  background:rgba(255,255,255,.05)!important; border-color:rgba(255,255,255,.12)!important;
  color:#f3f4f6!important;
}
html.dark #root.fp-auth .fp-auth-ctl input::placeholder{ color:rgba(255,255,255,.3); }
html.dark #root.fp-auth .fp-auth-ctl input:hover{ background:rgba(255,255,255,.08)!important; border-color:rgba(255,255,255,.2)!important; }
html.dark #root.fp-auth .fp-auth-ctl input:focus{
  background:rgba(255,255,255,.1)!important; border-color:#f0616a!important;
  box-shadow:0 0 0 3.5px rgba(240,97,106,.18)!important;
}
html.dark #root.fp-auth .fp-auth-ctl input:focus ~ .fp-auth-ico{ color:#f0616a; }
html.dark #root.fp-auth .fp-auth-eye:hover{ background:rgba(240,97,106,.14); color:#f0616a; }
html.dark .fp-auth-foot{ color:rgba(255,255,255,.35); border-top-color:rgba(255,255,255,.09); }
html.dark .fp-auth-foot span{ background:rgba(255,255,255,.14); }
html.dark .fp-auth-toggle{
  background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.13); color:rgba(255,255,255,.7);
}
html.dark .fp-auth-toggle:hover{ background:rgba(255,255,255,.14); color:#fff; }


/* Lab parameter priority. The result-entry screen lays parameters out as a grid of labelled
   inputs rather than a table, so the priority rides in front of the label as a small chip
   instead of getting a column of its own. */
.fp-lab-pri{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:1.35rem; height:1.35rem; padding:0 .3rem; border-radius:6px;
  background:var(--fp-primary-lo); color:var(--fp-primary);
  font-size:.68rem; font-weight:700; line-height:1;
  vertical-align:middle; margin-right:.15rem;
}

/* A lab result outside its normal range. Colour alone is not enough on a clinical report -- it
   has to survive a greyscale print and a colour-blind reader -- so the arrow and the word carry
   the meaning and the colour reinforces it. */
.fp-lab-abn{
  display:inline-flex; align-items:center; gap:.25rem;
  color:var(--fp-error); font-weight:700;
}
.fp-lab-abn i{ font-size:.95rem; }
.fp-lab-abn b{
  font-size:.62rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:.08rem .3rem; border-radius:5px;
  background:var(--fp-error-lo); color:var(--fp-error);
}
/* on the entry screen the flag sits beside the label, not in place of a value */
.fp-lab-abn--tag{ margin-left:.4rem; font-weight:600; }

/* Age-specific normal ranges. On the lab-test page the child / infant ranges sit under the adult
   one as editable chips; an unset chip stays visible and reads "not set", because a range you
   cannot see is a range nobody fills in. */
.fp-lab-bands{ display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.3rem; }
.fp-lab-band{
  display:inline-flex; align-items:center; gap:.3rem; cursor:pointer;
  padding:.12rem .4rem; border-radius:6px;
  font-size:.68rem; line-height:1.4;
  background:var(--fp-surface-2); color:var(--fp-text-soft);
  border:1px solid var(--fp-border-2);
  transition:background-color var(--fp-fast) var(--fp-ease), color var(--fp-fast) var(--fp-ease);
}
.fp-lab-band b{ font-weight:700; color:var(--fp-primary); }
.fp-lab-band:hover{ background:var(--fp-primary-lo); color:var(--fp-primary); }
.fp-lab-band.is-empty{ opacity:.6; font-style:italic; }

/* which band a stored result was judged against, shown beside its range */
.fp-lab-bandtag{
  display:inline-flex; align-items:center;
  padding:.05rem .3rem; border-radius:5px;
  font-size:.6rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  background:var(--fp-info-lo); color:var(--fp-info);
  vertical-align:middle;
}

/* ==================== 16. SECTION HEADS & DETAIL CARDS =================== */
/* fp_form_section() / fp_dcard() headings — a coloured rule reads as structure
   without adding another box. */
.fp-section-head{
  display:flex; align-items:center; gap:.55rem;
  font-size:.82rem; font-weight:650; letter-spacing:.02em; text-transform:uppercase;
  color:var(--fp-text-soft); padding-bottom:.5rem; margin-bottom:.25rem;
  border-bottom:1px solid var(--fp-border);
}
.fp-section-head i{ color:var(--fp-primary); font-size:1rem; }

/* ==================== 17. TOASTS ======================================== */
/* Deliberately NOT restyled. jquery.toast positions its icon with its own
   padding maths, so overriding padding here pushed the icon on top of the text.
   Toasts keep their original appearance. */

/* ==================== 18. ROW ACTIONS ==================================== */
/* The small pill buttons in table rows (View / Edit / Delete). They were washed
   out at 10% tint; give them a readable weight, a hairline edge, and a clear
   hover so they read as controls rather than labels. */
table .btn.rounded-full{
  height:1.8rem!important; padding:0 .7rem!important;
  font-size:.72rem!important; font-weight:600;
  border:1px solid transparent;
  gap:.3rem;
}
table .btn.rounded-full:hover{ transform:translateY(-1px); }
table .btn.rounded-full.bg-primary\/10{ background:var(--fp-primary-lo)!important; color:var(--fp-primary)!important; border-color:rgba(211,32,41,.18); }
table .btn.rounded-full.bg-primary\/10:hover{ background:var(--fp-primary)!important; color:#fff!important; border-color:transparent; }
table .btn.rounded-full.bg-success\/10{ background:var(--fp-success-lo)!important; color:var(--fp-success)!important; border-color:rgba(5,150,105,.2); }
table .btn.rounded-full.bg-success\/10:hover{ background:var(--fp-success)!important; color:#fff!important; border-color:transparent; }
table .btn.rounded-full.bg-error\/10{ background:var(--fp-error-lo)!important; color:var(--fp-error)!important; border-color:rgba(220,38,38,.2); }
table .btn.rounded-full.bg-error\/10:hover{ background:var(--fp-error)!important; color:#fff!important; border-color:transparent; }

/* Status pills read better as soft tints than as solid blocks */
.badge.bg-success{ background:var(--fp-success-lo)!important; color:var(--fp-success)!important; }
.badge.bg-warning{ background:var(--fp-warning-lo)!important; color:var(--fp-warning)!important; }
.badge.bg-error{ background:var(--fp-error-lo)!important; color:var(--fp-error)!important; }
.badge.bg-info{ background:var(--fp-info-lo)!important; color:var(--fp-info)!important; }

/* ==================== 19. SEARCH FIELDS ================================== */
/* List-page search boxes ship tinted (bg-info/10 etc.); normalise them to the
   same control language as every other input. */
input[id^="srch"], input[placeholder*="search"], input[placeholder*="Search"]{
  background:var(--fp-surface-2)!important;
  border-color:var(--fp-border-2)!important;
}
input[id^="srch"]:focus, input[placeholder*="search"]:focus, input[placeholder*="Search"]:focus{
  background:var(--fp-surface)!important; border-color:var(--fp-primary)!important;
}

/* ==================== 20. PATIENT SUGGESTION BOX ======================== */
/* The lookup under the appointment form's patient field. custom.css styles the
   old plain list; these rules supersede it with a real suggestion panel. */
/* Anchor the panel to the field. In the markup the suggest-box is a SIBLING of
   the input's `relative` wrapper rather than a child, so `position:absolute` was
   resolving against a far-up ancestor and the panel landed underneath the whole
   card. Making the wrapping <label> the containing block puts it directly under
   the input, and left/right:0 makes it exactly the field's width. */
label:has(> div.suggest-box){ position:relative; }

/* The panel must float over the fields below it. .main-content .card runs a
   transform/opacity entrance animation with fill-mode `both`, which leaves a
   stacking context behind that would otherwise trap the panel inside the card,
   so lift the card while the panel actually has results in it. */
.card:has(div.suggest-box.is-open){ position:relative; z-index:60; }

div.suggest-box{
  position:absolute; top:calc(100% + .4rem); left:0; right:0; width:auto!important;
  z-index:2147483000;
  max-height:22rem; overflow-y:auto;
  background:var(--fp-surface)!important;
  border:1px solid var(--fp-border)!important;
  border-radius:var(--fp-r-lg)!important;
  box-shadow:var(--fp-sh-3)!important;
  padding:.35rem!important;
  color:var(--fp-text)!important;
  animation:fpPop .16s var(--fp-ease) both;
}
/* `is-open` rather than `:not(:empty)`: the container ships with whitespace in
   it, so an emptiness test would read as "open" on every page load. */
div.suggest-box:not(.is-open){ display:none!important; }

.fp-sg-item{
  display:flex; align-items:center; gap:.7rem;
  padding:.5rem .6rem; border-radius:var(--fp-r); cursor:pointer;
  border-bottom:none!important;
  transition:background-color var(--fp-fast) var(--fp-ease);
}
.fp-sg-item:hover, .fp-sg-item.is-active{ background:var(--fp-primary-lo); }
.fp-sg-item.is-active{ box-shadow:inset 0 0 0 1px rgba(211,32,41,.25); }

.fp-sg-av{
  flex:0 0 auto; width:2.35rem; height:2.35rem; border-radius:50%;
  object-fit:cover; display:inline-flex; align-items:center; justify-content:center;
  font-size:.78rem; font-weight:650; color:#fff; letter-spacing:.02em;
  box-shadow:0 2px 6px -2px rgba(15,23,42,.35);
}

.fp-sg-main{ min-width:0; flex:1 1 auto; display:flex; flex-direction:column; gap:.12rem; }
.fp-sg-name{
  font-size:.86rem; font-weight:600; color:var(--fp-text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-transform:capitalize;
}
.fp-sg-meta{
  display:flex; flex-wrap:wrap; gap:.15rem .75rem;
  font-size:.72rem; color:var(--fp-text-soft);
}
.fp-sg-meta > span{ display:inline-flex; align-items:center; gap:.25rem; white-space:nowrap; }
.fp-sg-meta i{ font-size:.85rem; opacity:.6; }

.fp-sg-id{
  flex:0 0 auto; font-size:.66rem; font-weight:650; letter-spacing:.03em;
  color:var(--fp-text-faint); background:var(--fp-surface-2);
  border:1px solid var(--fp-border); border-radius:999px; padding:.15rem .5rem;
}

/* the matched run inside a name or phone */
mark.fp-sg-hi{
  background:rgba(211,32,41,.14); color:var(--fp-primary);
  border-radius:3px; padding:0 .1em; font-weight:700;
}

.fp-sg-empty{
  display:flex; flex-direction:column; align-items:center; gap:.3rem;
  padding:1.6rem 1rem; text-align:center; color:var(--fp-text-faint);
}
.fp-sg-empty i{ font-size:1.6rem; opacity:.5; }
.fp-sg-empty span{ font-size:.82rem; font-weight:600; color:var(--fp-text-soft); }
.fp-sg-empty small{ font-size:.72rem; }

/* ==================== 21. HEADER CHROME ================================== */
/* The top bar previously mixed a green, an orange and a blue icon at 24px with
   no shared container. These are one monochrome set that only takes brand
   colour on hover, so the eye goes to the content rather than the chrome. */
.fp-hdr-actions{ display:flex; align-items:center; gap:.3rem; }

.fp-icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.3rem; height:2.3rem; border-radius:var(--fp-r); flex:0 0 auto;
  color:var(--fp-text-soft); font-size:1.2rem; cursor:pointer;
  background:transparent; border:none;
  transition:background-color var(--fp-fast) var(--fp-ease), color var(--fp-fast) var(--fp-ease), transform var(--fp-fast) var(--fp-ease);
}
.fp-icon-btn:hover{ background:var(--fp-primary-lo); color:var(--fp-primary); }
.fp-icon-btn:active{ transform:scale(.94); }
.fp-icon-btn:focus-visible{ outline:2px solid var(--fp-primary); outline-offset:2px; }

.fp-hdr-div{ width:1px; height:1.5rem; background:var(--fp-border-2); margin:0 .45rem; flex:0 0 auto; }

/* user chip */
.fp-user-chip{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.3rem .6rem .3rem .35rem; border-radius:999px;
  background:transparent; border:1px solid transparent; cursor:pointer;
  transition:background-color var(--fp-fast) var(--fp-ease), border-color var(--fp-fast) var(--fp-ease);
}
.fp-user-chip:hover{ background:var(--fp-surface-2); border-color:var(--fp-border); }
.fp-user-av{
  width:2.1rem; height:2.1rem; border-radius:50%; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:700; color:#fff; letter-spacing:.02em;
  box-shadow:0 2px 8px -2px rgba(211,32,41,.5);
}
.fp-user-meta{ display:none; flex-direction:column; align-items:flex-start; line-height:1.15; min-width:0; }
@media (min-width:768px){ .fp-user-meta{ display:flex; } }
.fp-user-name{
  font-size:.8rem; font-weight:600; color:var(--fp-text);
  max-width:10rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-transform:capitalize;
}
.fp-user-role{ font-size:.66rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--fp-text-faint); }
.fp-user-caret{ display:none; color:var(--fp-text-faint); font-size:1.1rem; }
@media (min-width:768px){ .fp-user-caret{ display:inline-block; } }

/* ==================== 22. MOBILE SIDEBAR ================================= */
/* _mobile.php is the drawer behind the hamburger. It shares the app's language
   now instead of looking like a separate, older screen. */
.sidebar-panel{
  background:var(--fp-surface)!important;
  border-right:1px solid var(--fp-border);
  box-shadow:var(--fp-sh-3);
}
.sidebar-panel .accordion-item,
.sidebar-panel [x-data*="accordionItem"]{ border-bottom:1px solid var(--fp-border); }
/* group headers */
.sidebar-panel button{
  border-radius:var(--fp-r); color:var(--fp-text); font-weight:550;
  transition:background-color var(--fp-fast) var(--fp-ease), color var(--fp-fast) var(--fp-ease);
}
.sidebar-panel button:hover{ background:var(--fp-primary-lo); color:var(--fp-primary); }
/* leaf links */
.sidebar-panel li > a{
  border-radius:var(--fp-r-sm); color:var(--fp-text-soft); font-weight:500;
  transition:background-color var(--fp-fast) var(--fp-ease), color var(--fp-fast) var(--fp-ease), padding-left var(--fp-fast) var(--fp-ease);
}
.sidebar-panel li > a:hover{ background:var(--fp-primary-lo); color:var(--fp-primary); padding-left:1.1rem; }
.sidebar-panel li > a .rounded-full{ border-color:currentColor; opacity:.45; }

/* ==================== 23. RIGHT USER DRAWER ============================== */
.drawer-content, #right-drawer .drawer-content{
  background:var(--fp-surface)!important;
  border-left:1px solid var(--fp-border);
  box-shadow:var(--fp-sh-3);
}

/* ==================== 24. MEGA MENU ====================================== */
/* The module menus were flat lists of links. Each is now a panel that says what
   the module contains: an icon, the label, and the one-line description from
   fp_nav_meta() — the same text the page itself carries, so the menu and the
   page agree. */

.fp-nav-trigger{
  display:inline-flex; align-items:center; gap:.45rem;
  height:2.3rem; padding:0 .75rem; border-radius:var(--fp-r);
  border:1px solid transparent; background:transparent; cursor:pointer;
  color:var(--fp-primary); font-size:.82rem; font-weight:560; white-space:nowrap;
  transition:background-color var(--fp-fast) var(--fp-ease), color var(--fp-fast) var(--fp-ease), box-shadow var(--fp-med) var(--fp-ease);
}
.fp-nav-trigger-ico{ font-size:1.05rem; opacity:.8; }
.fp-nav-caret{ font-size:1rem; opacity:.5; transition:transform var(--fp-fast) var(--fp-ease); }
.fp-nav-trigger:hover{ background:var(--fp-primary-lo); color:var(--fp-primary); }
.fp-nav-trigger:hover .fp-nav-caret{ transform:translateY(1px); }
.fp-nav-trigger.is-active{
  background:var(--fp-primary); color:#fff;
  box-shadow:0 4px 12px -4px rgba(211,32,41,.5);
}
.fp-nav-trigger.is-active .fp-nav-trigger-ico,
.fp-nav-trigger.is-active .fp-nav-caret{ opacity:1; }

.fp-mega{
  width:min(30rem, calc(100vw - 2rem));
  max-height:calc(100vh - 140px); overflow-y:auto;
  background:var(--fp-surface);
  border:1px solid var(--fp-border);
  border-radius:var(--fp-r-xl);
  box-shadow:var(--fp-sh-3);
  padding:.4rem;
  animation:fpPop .16s var(--fp-ease) both;
}
.fp-mega-head{
  display:flex; align-items:center; gap:.6rem;
  padding:.6rem .65rem .7rem; margin-bottom:.25rem;
  border-bottom:1px solid var(--fp-border);
}
.fp-mega-head-ico{
  width:2.1rem; height:2.1rem; border-radius:var(--fp-r-sm); flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--fp-primary-lo); color:var(--fp-primary); font-size:1rem;
}
.fp-mega-title{ display:block; font-size:.86rem; font-weight:650; color:var(--fp-text); line-height:1.2; }
.fp-mega-count{ display:block; font-size:.68rem; color:var(--fp-text-faint); }

.fp-mega-grid{ display:grid; grid-template-columns:1fr; gap:.1rem; }
@media (min-width:640px){ .fp-mega-grid{ grid-template-columns:1fr 1fr; } }

.fp-mega-item{
  display:flex; align-items:flex-start; gap:.6rem;
  padding:.55rem .6rem; border-radius:var(--fp-r);
  border-bottom:none!important; color:var(--fp-text-soft);
  transition:background-color var(--fp-fast) var(--fp-ease);
}
.fp-mega-item:hover{ background:var(--fp-primary-lo); }
.fp-mega-item-ico{
  width:1.9rem; height:1.9rem; border-radius:var(--fp-r-sm); flex:0 0 auto; margin-top:.05rem;
  display:inline-flex; align-items:center; justify-content:center; font-size:.95rem;
  background:var(--fp-surface-2); color:var(--fp-text-soft);
  transition:background-color var(--fp-fast) var(--fp-ease), color var(--fp-fast) var(--fp-ease);
}
.fp-mega-item:hover .fp-mega-item-ico{ background:var(--fp-primary); color:#fff; }
/* The submenu the page is currently on. Tinted ground plus a red rail down the left edge, so
   an open panel says which of its entries you are looking at without competing with :hover. */
.fp-mega-item.is-current{
  background:var(--fp-primary-lo);
  box-shadow:inset 3px 0 0 0 var(--fp-primary);
}
.fp-mega-item.is-current .fp-mega-item-ico{ background:var(--fp-primary); color:#fff; }
.fp-mega-item.is-current .fp-mega-item-label{ color:var(--fp-primary); font-weight:700; }

.fp-mega-item-body{ min-width:0; display:flex; flex-direction:column; gap:.1rem; }
.fp-mega-item-label{ font-size:.8rem; font-weight:600; color:var(--fp-text); line-height:1.25; }
.fp-mega-item:hover .fp-mega-item-label{ color:var(--fp-primary); }
.fp-mega-item-desc{
  font-size:.7rem; line-height:1.35; color:var(--fp-text-faint);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* ==================== 25. USER DROPDOWN ================================== */
/* Replaces the slide-out right drawer: an account panel anchored to the chip. */
.fp-userdrop{
  width:17rem; background:var(--fp-surface);
  border:1px solid var(--fp-border); border-radius:var(--fp-r-xl);
  box-shadow:var(--fp-sh-3); overflow:hidden;
  animation:fpPop .16s var(--fp-ease) both;
}
.fp-userdrop-head{
  display:flex; align-items:center; gap:.7rem; padding:.9rem .9rem 1rem;
  background:linear-gradient(135deg, rgba(211,32,41,.07) 0%, rgba(211,32,41,.02) 100%);
  border-bottom:1px solid var(--fp-border);
}
.fp-userdrop-av{
  width:2.6rem; height:2.6rem; border-radius:50%; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.82rem; font-weight:700; color:#fff;
  box-shadow:0 3px 10px -3px rgba(211,32,41,.55);
}
.fp-userdrop-id{ min-width:0; display:flex; flex-direction:column; gap:.05rem; }
.fp-userdrop-name{ font-size:.85rem; font-weight:650; color:var(--fp-text); text-transform:capitalize; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fp-userdrop-mail{ font-size:.7rem; color:var(--fp-text-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fp-userdrop-role{
  margin-top:.15rem; align-self:flex-start;
  font-size:.6rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--fp-primary); background:var(--fp-primary-lo);
  padding:.1rem .4rem; border-radius:999px;
}
.fp-userdrop-body{ padding:.35rem; }
.fp-userdrop-foot{ padding:.35rem; border-top:1px solid var(--fp-border); }
.fp-userdrop-item{
  display:flex; align-items:center; gap:.6rem; width:100%;
  padding:.55rem .6rem; border-radius:var(--fp-r);
  border:none; background:transparent; cursor:pointer; text-align:left;
  color:var(--fp-text-soft); font-size:.82rem; font-weight:550;
  border-bottom:none!important;
  transition:background-color var(--fp-fast) var(--fp-ease), color var(--fp-fast) var(--fp-ease);
}
.fp-userdrop-item i{ font-size:1.05rem; opacity:.75; }
.fp-userdrop-item:hover{ background:var(--fp-primary-lo); color:var(--fp-primary); }
.fp-userdrop-item--danger:hover{ background:var(--fp-error-lo); color:var(--fp-error); }

/* ==================== 26. MY ACCOUNT PAGE ================================ */
.fp-prof-av{
  width:6rem; height:6rem; border-radius:50%; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.6rem; font-weight:700; color:#fff; letter-spacing:.02em;
  box-shadow:0 10px 26px -10px rgba(211,32,41,.6);
}

/* Avatars come in two flavours that must NOT share a background: the initials
   fallback wants the brand gradient, an uploaded photo wants a neutral frame.
   Photos use object-fit:contain so the whole picture is visible instead of being
   cropped by the circle -- the thin inset ring and the surface-coloured ground
   make the letterboxing read as a deliberate frame rather than a gap. */
.fp-user-av--ini,
.fp-userdrop-av--ini,
.fp-prof-av--ini{
  background:linear-gradient(135deg,#b3161f 0%,var(--fp-primary) 100%);
}

img.fp-user-av,
img.fp-userdrop-av,
img.fp-prof-av{
  object-fit:contain;
  object-position:center;
  background:#fff;
  border:1px solid var(--fp-border-2);
  box-shadow:0 2px 8px -3px rgba(15,23,42,.28);
}
img.fp-user-av{ padding:2px; }
img.fp-userdrop-av{ padding:2px; }
img.fp-prof-av{ padding:4px; box-shadow:0 10px 26px -12px rgba(15,23,42,.4); }
html.dark img.fp-user-av,
html.dark img.fp-userdrop-av,
html.dark img.fp-prof-av{ background:var(--fp-surface-2); }
.fp-prof-role{
  margin-top:.55rem; display:inline-block;
  font-size:.65rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--fp-primary); background:var(--fp-primary-lo);
  padding:.2rem .6rem; border-radius:999px;
}
.fp-prof-facts{ margin-top:1.4rem; display:flex; flex-direction:column; gap:.1rem; }
.fp-prof-facts > div{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.55rem .1rem; border-bottom:1px solid var(--fp-border);
  font-size:.8rem;
}
.fp-prof-facts > div:last-child{ border-bottom:none; }
.fp-prof-facts span{ color:var(--fp-text-faint); }
.fp-prof-facts b{ color:var(--fp-text); font-weight:600; text-align:right; }

/* photo picker on the account page */
.fp-prof-photo-btn{
  margin-top:.75rem; display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .75rem; border-radius:999px; cursor:pointer;
  border:1px solid var(--fp-border-2); background:var(--fp-surface-2);
  color:var(--fp-text-soft); font-size:.75rem; font-weight:600;
  transition:background-color var(--fp-fast) var(--fp-ease), color var(--fp-fast) var(--fp-ease), border-color var(--fp-fast) var(--fp-ease);
}
.fp-prof-photo-btn:hover{ background:var(--fp-primary-lo); color:var(--fp-primary); border-color:transparent; }
.fp-prof-photo-hint{ margin-top:.3rem; font-size:.68rem; color:var(--fp-text-faint); }