/*!
 * Afya360 UI Overrides (drop-in) — v2 (No-wrap menu)
 * -------------------------------------------------
 * Purpose: Improve look & feel (icons, colors, spacing, mobile UX)
 * Scope: CSS only (no backend / logic changes)
 *
 * How to use:
 *   1) Save as: Afya360.Portal/wwwroot/css/site.overrides.css
 *   2) Load AFTER existing site.css in Pages/Shared/_Layout.cshtml:
 *        <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
 *        <link rel="stylesheet" href="~/css/site.overrides.css" asp-append-version="true" />
 *
 * Notes:
 *  - Menu NEVER wraps (single line). If space is tight, it scrolls horizontally.
 *  - Icons are injected via CSS (no markup changes required).
 */

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

:root{
  --bg: #f6f8fb;
  --surface: #ffffff;
  --surface-2: #f8fafc;

  --ink: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;

  --brand-1: #0b3d91;
  --brand-2: #00bfa6;

  --success: #16a34a;
  --warning: #f59e0b;
  --danger:  #dc2626;
  --info:    #0284c7;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
  --shadow-sm: 0 6px 16px rgba(15, 23, 42, 0.06);

  --ring: 0 0 0 4px rgba(0, 191, 166, 0.18);
}

html, body{
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

a{ color: var(--brand-1); text-decoration: none; }
a:hover{ text-decoration: underline; }

hr{ border: none; border-top: 1px solid var(--border); }

main, .content, .container, .page{ max-width: 1200px; }

/* Cards / sections */
.card, .panel, .section, .widget, .content-card, .box,
[class*="card"], [class*="panel"]{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card, .panel, .section, .widget, .content-card, .box{ padding: 16px; }

h1,h2,h3{ letter-spacing: -0.01em; }
h1{ font-size: 1.5rem; margin: 0 0 12px; }
h2{ font-size: 1.25rem; margin: 0 0 10px; }
h3{ font-size: 1.05rem; margin: 0 0 8px; }

/* Header / Nav */
header, .navbar, .topbar{
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

/* --- NO-WRAP MENU (single line) --- */
.nav, nav, .navbar-nav{
  display: flex;
  align-items: center;
  gap: 10px;

  flex-wrap: nowrap !important;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
}

.nav::-webkit-scrollbar, nav::-webkit-scrollbar, .navbar-nav::-webkit-scrollbar{ height: 6px; }
.nav::-webkit-scrollbar-thumb, nav::-webkit-scrollbar-thumb, .navbar-nav::-webkit-scrollbar-thumb{
  background: rgba(92,102,122,.25);
  border-radius: 999px;
}

/* Nav items */
.nav a, nav a, .navbar a, .navbar-nav a, .sidebar a, .sidenav a{
  border-radius: 999px;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;

  white-space: nowrap;
  flex: 0 0 auto;

  color: var(--ink);
  text-decoration: none;
  transition: background .15s ease, transform .08s ease, box-shadow .15s ease;
}

.nav a:hover, nav a:hover, .navbar a:hover, .navbar-nav a:hover, .sidebar a:hover, .sidenav a:hover{
  background: rgba(11, 61, 145, 0.06);
  text-decoration: none;
}
.nav a:active, nav a:active, .navbar a:active{ transform: translateY(1px); }

.nav a.active,
nav a.active,
.nav a[aria-current="page"],
nav a[aria-current="page"],
.navbar-nav a.active,
.navbar-nav a[aria-current="page"]{
  background: rgba(0, 191, 166, 0.12);
  border: 1px solid rgba(0, 191, 166, 0.35);
  color: var(--ink);
  font-weight: 700;
}

/* Topbar user chip */
.topbar-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 12px;
  min-width: 0;
}
.userchip{
  display:inline-flex;
  align-items:center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.85);
  box-shadow: var(--shadow-sm);
}
.userchip-meta{ display:flex; flex-direction:column; line-height:1.1; min-width:0; }
.userchip-name{ font-weight:800; font-size:12.5px; max-width: 220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.userchip-roles{ color: var(--muted); font-size: 11.5px; max-width: 220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.userchip-logout{
  text-decoration:none;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(11, 61, 145, 0.25);
  background: rgba(11, 61, 145, 0.06);
  font-weight: 800;
  font-size: 12px;
  color: var(--ink);
}
.userchip-logout:hover{ background: rgba(11, 61, 145, 0.10); }

/* Tighter on smaller screens so more items fit */
@media (max-width: 1024px){
  .nav a, nav a, .navbar-nav a{ padding: 8px 12px; font-size: 14px; }
}
@media (max-width: 576px){
  .nav a, nav a, .navbar-nav a{ padding: 8px 10px; font-size: 13px; }
}

/* Nav icons (CSS-only) */
.nav a, nav a, .navbar-nav a{ position: relative; padding-left: 38px; }
.nav a::before, nav a::before, .navbar-nav a::before{
  font-family: "bootstrap-icons";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  opacity: 0.9;
  line-height: 1;
  flex-shrink: 0;
}

/* Default icon */
.nav a::before, nav a::before, .navbar-nav a::before{ content: "\F425"; }

/* Route-based overrides (best effort; update if your routes differ) */
.nav a[href="/"]::before, nav a[href="/"]::before, .navbar-nav a[href="/"]::before{ content:"\F425"; }
.nav a[href*="Dashboard"]::before, nav a[href*="Dashboard"]::before, .navbar-nav a[href*="Dashboard"]::before{ content:"\F4B0"; }
.nav a[href*="Patients"]::before, nav a[href*="Patients"]::before, .navbar-nav a[href*="Patients"]::before{ content:"\F4CF"; }
.nav a[href*="Employee"]::before, nav a[href*="Employee"]::before, .navbar-nav a[href*="Employee"]::before{ content:"\F4CF"; }
.nav a[href*="Register"]::before, nav a[href*="Register"]::before, .navbar-nav a[href*="Register"]::before{ content:"\F4A0"; }
.nav a[href*="Clinician"]::before, nav a[href*="Clinician"]::before, .navbar-nav a[href*="Clinician"]::before{ content:"\F4D5"; }
.nav a[href*="Employer"]::before, nav a[href*="Employer"]::before, .navbar-nav a[href*="Employer"]::before{ content:"\F3E8"; }
.nav a[href*="Engagement"]::before, nav a[href*="Engagement"]::before, .navbar-nav a[href*="Engagement"]::before{ content:"\F26A"; }
.nav a[href*="Message"]::before, nav a[href*="Message"]::before, .navbar-nav a[href*="Message"]::before{ content:"\F4E7"; }
.nav a[href*="Alert"]::before, nav a[href*="Alert"]::before, .navbar-nav a[href*="Alert"]::before{ content:"\F189"; }
.nav a[href*="Report"]::before, nav a[href*="Report"]::before, .navbar-nav a[href*="Report"]::before{ content:"\F3D1"; }
.nav a[href*="Settings"]::before, nav a[href*="Settings"]::before, .navbar-nav a[href*="Settings"]::before{ content:"\F3E5"; }
.nav a[href*="Admin"]::before, nav a[href*="Admin"]::before, .navbar-nav a[href*="Admin"]::before{ content:"\F4AA"; }
.nav a[href*="Help"]::before, nav a[href*="Help"]::before, .navbar-nav a[href*="Help"]::before{ content:"\F431"; }

.nav a i, nav a i, .navbar-nav a i{ display:none; }

/* Buttons */
.btn, button, input[type="button"], input[type="submit"]{
  border-radius: var(--radius-sm) !important;
  padding: 10px 14px;
  font-weight: 700;
  min-height: 42px;
  cursor: pointer;
}

.btn-primary, .btn:not(.secondary):not(.btn-secondary):not(.btn-outline):not(.btn-link){
  background: linear-gradient(135deg, var(--brand-1), #134ab6) !important;
  border: 1px solid rgba(11,61,145,.25) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(11,61,145,.16);
}
.btn-primary:hover, .btn:not(.secondary):hover{ filter: brightness(1.02); }

.btn-secondary, .btn.secondary, .btn-outline, .btn-link, button.secondary{
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
.btn-secondary:hover, .btn.secondary:hover, .btn-outline:hover{ background: rgba(15,23,42,.03) !important; }

/* Danger action (used for explicit escalation close) */
.btn.danger{
  background:#b91c1c !important;
  border:1px solid #991b1b !important;
  color:#fff !important;
}
.btn.danger:hover{ filter:brightness(.95); }

.btn + .btn, button + button, input[type="submit"] + .btn{ margin-left: 8px; }

@media (max-width: 576px){
  .btn, button, input[type="button"], input[type="submit"]{ width: 100%; }
  .btn + .btn, button + button, input[type="submit"] + .btn{ margin-left: 0; margin-top: 8px; }
}

/* Inputs / Forms */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], select, textarea,
.input, .form-control{
  width: 100%;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 12px;
  background: #fff;
  color: var(--ink);
  min-height: 44px;
}
textarea{ min-height: 110px; }

input:focus, select:focus, textarea:focus,
.input:focus, .form-control:focus{
  outline: none;
  box-shadow: var(--ring);
  border-color: rgba(0,191,166,.55) !important;
}
label, .lbl{ font-weight: 700; color: var(--ink); }
small, .text-muted, .help, .hint{ color: var(--muted) !important; }
.form-grid, .grid, .row{ gap: 14px; }

/* Tables */
.table-wrap, .table-responsive{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
}

table, .tbl{
  width: 100%;
  border-collapse: collapse;
  background: transparent;
}

th, td{
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

thead th, .tbl th{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  background: var(--surface-2);
  position: sticky;
  top: 0;
  z-index: 1;
}

tbody tr:hover td{ background: rgba(11,61,145,.03); }

/* Badges */
.badge, .pill, .tag{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink);
}
.badge.good, .pill.good, .tag.good{ background: rgba(22,163,74,.12); color: var(--success); border-color: rgba(22,163,74,.25); }
.badge.warn, .pill.warn, .tag.warn{ background: rgba(245,158,11,.12); color: var(--warning); border-color: rgba(245,158,11,.25); }
.badge.bad, .pill.bad, .tag.bad{ background: rgba(220,38,38,.10); color: var(--danger); border-color: rgba(220,38,38,.22); }
.badge.info, .pill.info, .tag.info{ background: rgba(2,132,199,.10); color: var(--info); border-color: rgba(2,132,199,.22); }

/* Clinician priority score pill (ensure visible in all themes) */
.pill.priority{
  background: rgba(17,24,39,.06);
  border-color: rgba(17,24,39,.18);
  color: #111827;
}

/* Alerts */
.alert, .message, .notification{
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 12px 14px;
  background: var(--surface);
}
.alert.success{ border-color: rgba(22,163,74,.25); box-shadow: 0 0 0 3px rgba(22,163,74,.10); }
.alert.warning{ border-color: rgba(245,158,11,.25); box-shadow: 0 0 0 3px rgba(245,158,11,.10); }
.alert.danger { border-color: rgba(220,38,38,.22); box-shadow: 0 0 0 3px rgba(220,38,38,.08); }

/* Spacing */
main, .content, .container, .page{ padding: 16px; }
@media (max-width: 820px){
  main, .content, .container, .page{ padding: 12px; }
  .card, .panel, .section, .widget, .content-card, .box{ padding: 12px; }
}

/* Clickable cards */
a.card, a.panel, a.section{
  display: block;
  color: inherit;
  text-decoration: none;
}
a.card:hover, a.panel:hover, a.section:hover{
  box-shadow: var(--shadow);
  transform: translateY(-1px);
  transition: transform .12s ease, box-shadow .12s ease;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; scroll-behavior: auto !important; }
}


/* =====================================
   DataGrid / Table Header Styling
   ===================================== */
table thead th,
.tbl thead th,
.table thead th,
.table th,
th{
  font-weight: 700 !important;   /* bold */
  color: #000000 !important;     /* black */
}

/* Subtle separation line for headers */
table thead th,
.tbl thead th{
  border-bottom: 2px solid rgba(0,0,0,0.08);
}


/* =====================================
   RegisterPatient – Full Width Form
   ===================================== */

/* Make forms span full available width */
form,
.form,
.form-grid,
.form-container,
.register-form{
  width: 100% !important;
  max-width: 100% !important;
}

/* If the page uses a two-column layout, collapse it */
.form-grid{
  grid-template-columns: 1fr !important;
}

/* Ensure inputs use full width */
.form-grid > *,
.form-grid .field,
.form-grid .form-group{
  width: 100% !important;
}

/* Center the form content container if constrained */
.page form,
.section form{
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* =====================================
   UX Enhancements for Forms
   1) Sectioned form with visual dividers
   2) Progressive disclosure (advanced fields collapsed)
   3) Validation highlight styling
   -------------------------------------
   Notes:
   - Pure CSS: progressive disclosure works automatically if your markup already uses:
       a) <details class="advanced">...</details>
       b) A wrapper class like .advanced, .advanced-fields, [data-advanced="true"]
     If those are not present, you can add them in the Razor page without touching backend logic.
   ===================================== */

/* ---------- 1) Sectioned form with visual dividers ---------- */

/* Support both <fieldset> and simple wrapper divs */
form fieldset,
.form-section,
.section-block,
.card.section,
.section.form-section{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 14px 12px;
  margin: 0 0 14px;
  background: var(--surface);
}

/* Legend / section title styling */
form fieldset > legend,
.form-section-title,
.section-title,
h3.form-title,
h4.form-title{
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 10px;
  padding: 0 6px;
  letter-spacing: -0.01em;
}

/* Light divider utility (for simple <hr> or .divider elements) */
hr,
.divider,
.form-divider{
  border: 0;
  border-top: 1px solid var(--border);
  margin: 14px 0;
}

/* Optional: “subtle section header bar” if you have a header element */
.form-section-header,
.section-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  margin: -14px -14px 12px; /* align to section padding */
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(11,61,145,0.06), rgba(11,61,145,0.00));
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

/* ---------- 2) Progressive disclosure (advanced fields collapsed) ---------- */

/* Pattern A: <details class="advanced"> */
details.advanced,
details.advanced-fields{
  border: 1px dashed rgba(100,116,139,0.45);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: rgba(15,23,42,0.02);
  margin: 10px 0 14px;
}

details.advanced > summary,
details.advanced-fields > summary{
  cursor: pointer;
  list-style: none;
  font-weight: 800;
  color: var(--brand-1);
  display: flex;
  align-items: center;
  gap: 10px;
}

details.advanced > summary::-webkit-details-marker,
details.advanced-fields > summary::-webkit-details-marker{
  display: none;
}

/* Chevron indicator */
details.advanced > summary::before,
details.advanced-fields > summary::before{
  font-family: "bootstrap-icons";
  content: "\F285"; /* bi-chevron-right */
  display: inline-block;
  transition: transform .12s ease;
  opacity: .9;
}

details.advanced[open] > summary::before,
details.advanced-fields[open] > summary::before{
  transform: rotate(90deg);
}

/* Pattern B: wrapper classes — hide by default, show on body class toggle */
.advanced,
.advanced-fields,
[data-advanced="true"]{
  display: none;
}

/* If you can add a toggle class on <body> (no backend logic required if hardcoded) */
body.show-advanced .advanced,
body.show-advanced .advanced-fields,
body.show-advanced [data-advanced="true"]{
  display: block;
}

/* If you already have a button/link styled as an “advanced toggle” */
.advanced-toggle,
.show-advanced-toggle{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  color: var(--brand-1);
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(11,61,145,0.18);
  background: rgba(11,61,145,0.06);
  text-decoration: none;
}

.advanced-toggle::before,
.show-advanced-toggle::before{
  font-family: "bootstrap-icons";
  content: "\F4AA"; /* bi-shield-lock (generic advanced/settings icon) */
  opacity: .9;
}

/* ---------- 3) Validation highlight styling (ASP.NET friendly) ---------- */

/* ASP.NET MVC / Razor standard classes */
.input-validation-error,
.field-validation-error,
.validation-summary-errors,
.validation-summary-valid{
  font-weight: 700;
}

.input-validation-error{
  border-color: rgba(220,38,38,0.55) !important;
  box-shadow: 0 0 0 4px rgba(220,38,38,0.10) !important;
}

.field-validation-error{
  color: var(--danger) !important;
  font-size: 13px;
  margin-top: 6px;
}

/* Summary block */
.validation-summary-errors{
  border: 1px solid rgba(220,38,38,0.25);
  background: rgba(220,38,38,0.08);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 0 0 14px;
}
.validation-summary-errors ul{
  margin: 8px 0 0;
  padding-left: 18px;
}

/* HTML5 validation support (when attributes like required/pattern exist) */
input:invalid, select:invalid, textarea:invalid{
  border-color: rgba(220,38,38,0.45);
}

input:invalid:focus, select:invalid:focus, textarea:invalid:focus{
  box-shadow: 0 0 0 4px rgba(220,38,38,0.10);
}

/* Optional: Success hint if you set .is-valid class in markup */
.is-valid,
input.valid, select.valid, textarea.valid{
  border-color: rgba(22,163,74,0.45) !important;
  box-shadow: 0 0 0 4px rgba(22,163,74,0.10) !important;
}

/* Make required labels clearer (works if you use .required or [required] attr nearby) */
label.required::after{
  content: " *";
  color: var(--danger);
  font-weight: 900;
}


/* =====================================
   RegisterPatient & Clinician Page Spacing
   ===================================== */

/* Add inner padding so controls don't hug table/card borders */
.register-patient table,
.register-patient .table-wrap,
.register-patient .tbl,
.register-patient .card,
.register-patient .section,
.clinician table,
.clinician .table-wrap,
.clinician .tbl,
.clinician .card,
.clinician .section{
  padding: 16px !important;
}

/* If tables are wrapped in a container */
.table-wrap table,
.tbl{
  margin-top: 8px;
}

/* Ensure form controls inside tables/cards have breathing room */
.register-patient input,
.register-patient select,
.register-patient textarea,
.clinician input,
.clinician select,
.clinician textarea{
  margin-bottom: 12px;
}

/* =====================================
   Clinician Page – Alert Spacing
   ===================================== */

/* Space alerts apart vertically */
.clinician .alert,
.clinician .notification,
.clinician .message{
  margin-bottom: 12px;
}

/* Avoid alerts sticking to container edges */
.clinician .alert,
.clinician .notification,
.clinician .message{
  padding: 14px 16px;
}

/* If alerts are in a stack or column */
.clinician .alerts > *,
.clinician .alert-list > *{
  margin-bottom: 12px;
}


/* =====================================
   Page-specific spacing (based on actual classes in the Portal)
   - RegisterPatient: .reg-full, .reg-onecard-grid, .reg-actions
   - Clinician: .kpi-grid, .list, .alert-row
   ===================================== */

/* ---------- RegisterPatient: more breathing room inside bordered sections/cards ---------- */
.card.reg-full{
  padding: 18px !important;
}

.reg-onecard-grid .section{
  padding: 18px !important;
}

/* Give inner grids a little inset so controls aren't tight to section border */
.reg-onecard-grid .card-grid-2{
  padding: 6px 2px 2px !important;
}

/* Space between fields (in case base CSS is tight) */
.card.reg-full .input,
.reg-onecard-grid .input{
  margin-top: 2px;
  margin-bottom: 12px;
}

/* ---------- Clinician: padding inside cards and spacing between alert rows ---------- */
/* Add a bit more padding in clinician cards (scoped by unique .kpi-grid / .list usage) */
.page .kpi-grid ~ .card,
.page .list{
  /* list gets padding even if not inside a card */
}

.page .kpi-grid ~ .card{
  padding: 18px !important;
}

/* The alert list container: inset so rows don't hug borders */
.page .list{
  padding: 12px 12px 2px !important;
  border-radius: var(--radius);
}

/* Space between alert items */
.page .alert-row{
  margin-bottom: 12px !important;
}

/* If an alert row itself has a border/background, soften it and add inner padding */
.page .alert-row{
  padding: 12px 12px !important;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
}

/* If risk classes already color the row background, keep them but still preserve padding */
.page .alert-row.risk-red,
.page .alert-row.risk-amber,
.page .alert-row.risk-green{
  padding: 12px 12px !important;
}

/* Prevent the last alert from having extra space */
.page .alert-row:last-child{
  margin-bottom: 0 !important;
}


/* =====================================
   RegisterPatient – EXTRA INNER PADDING
   Goal: ensure textboxes NEVER touch container borders
   ===================================== */

/* Increase padding on the main registration card */
.card.reg-full{
  padding: 24px !important;
}

/* Increase padding on each section inside the registration grid */
.reg-onecard-grid .section{
  padding: 22px !important;
}

/* Inner grid where fields sit – add strong inset */
.reg-onecard-grid .card-grid-2{
  padding: 16px 16px 8px !important;
}

/* Ensure form controls have vertical breathing room */
.reg-onecard-grid .input,
.reg-onecard-grid input,
.reg-onecard-grid select,
.reg-onecard-grid textarea{
  margin-bottom: 14px !important;
}

/* If inputs are wrapped in form groups or rows */
.reg-onecard-grid .form-group,
.reg-onecard-grid .field,
.reg-onecard-grid .row{
  padding-left: 4px;
  padding-right: 4px;
}

/* Last field should not collapse spacing */
.reg-onecard-grid .form-group:last-child{
  margin-bottom: 0;
}


/* =====================================
   Clinician Risk Cards (Red/Amber/Green)
   ===================================== */

/* Layout: 3-up on desktop, stack on mobile */
.kpi-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 820px){
  .kpi-grid{ grid-template-columns: 1fr; }
}

/* Base card look */
.kpi-grid .risk-red,
.kpi-grid .risk-amber,
.kpi-grid .risk-green{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px 16px;
  position: relative;
  overflow: hidden;
}

/* Color cue: left border + subtle tint */
.kpi-grid .risk-red{
  border-left: 6px solid var(--danger);
  background: linear-gradient(90deg, rgba(220,38,38,0.08), rgba(255,255,255,0) 55%);
}
.kpi-grid .risk-amber{
  border-left: 6px solid var(--warning);
  background: linear-gradient(90deg, rgba(245,158,11,0.10), rgba(255,255,255,0) 55%);
}
.kpi-grid .risk-green{
  border-left: 6px solid var(--success);
  background: linear-gradient(90deg, rgba(22,163,74,0.08), rgba(255,255,255,0) 55%);
}

/* Typography inside risk card (best-effort) */
.kpi-grid .risk-red strong,
.kpi-grid .risk-amber strong,
.kpi-grid .risk-green strong{
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  display: block;
  margin-bottom: 6px;
}

/* If your markup has a numeric element with class .value, style it */
.kpi-grid .risk-red .value,
.kpi-grid .risk-amber .value,
.kpi-grid .risk-green .value{
  font-size: 32px;
  font-weight: 900;
  color: var(--ink);
  line-height: 1.1;
}

/* Fallback: emphasize spans */
.kpi-grid .risk-red span,
.kpi-grid .risk-amber span,
.kpi-grid .risk-green span{
  font-weight: 900;
}


/* =========================================================
   PATCH: Clinician KPI (Red/Amber/Green) cards + spacing
   Why: KPI blocks are <div class="kpi"> within .kpi-grid (no risk-* classes)
   ========================================================= */

/* Make KPI blocks look like cards */
.kpi-grid .kpi{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px 16px;
  position: relative;
  overflow: hidden;
  text-align: center; /* KPI snapshot numbers should be centered */
}

/* Colored left border + subtle tint by position:
   Order in Clinician.cshtml is Red, Amber, Green */
.kpi-grid .kpi:nth-child(1){
  border-left: 6px solid var(--danger);
  background: linear-gradient(90deg, rgba(220,38,38,0.08), rgba(255,255,255,0) 55%);
}
.kpi-grid .kpi:nth-child(2){
  border-left: 6px solid var(--warning);
  background: linear-gradient(90deg, rgba(245,158,11,0.10), rgba(255,255,255,0) 55%);
}
.kpi-grid .kpi:nth-child(3){
  border-left: 6px solid var(--success);
  background: linear-gradient(90deg, rgba(22,163,74,0.08), rgba(255,255,255,0) 55%);
}

/* Improve KPI text */
.kpi-grid .kpi .muted{
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.kpi-grid .kpi .kpi-val{
  font-size: 32px;
  font-weight: 900;
  color: var(--ink);
  line-height: 1.1;
  margin-top: 6px;
  text-align: center;
}

/* =========================================================
   PATCH: Clinician alert spacing
   Targets .list and .alert-row used in Clinician.cshtml
   ========================================================= */
.list{
  padding: 14px !important;              /* inset from border */
}

/* Space between alert rows and make each row feel like a card */
.alert-row{
  margin-bottom: 12px !important;
  border-radius: var(--radius-sm) !important;
  padding: 12px 12px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
}

/* Keep existing risk tint but preserve our padding/card feel */
.alert-row.risk-red{
  border-left-color: #c62828 !important;
  background: linear-gradient(90deg, rgba(198,40,40,0.08), rgba(255,255,255,0) 55%) !important;
}
.alert-row.risk-amber{
  border-left-color: #ef6c00 !important;
  background: linear-gradient(90deg, rgba(239,108,0,0.10), rgba(255,255,255,0) 55%) !important;
}
.alert-row.risk-green{
  border-left-color: #2e7d32 !important;
  background: linear-gradient(90deg, rgba(46,125,50,0.08), rgba(255,255,255,0) 55%) !important;
}

.alert-row:last-child{ margin-bottom: 0 !important; }

/* =========================================================
   PATCH: RegisterPatient extra inner padding (uses actual classes)
   ========================================================= */
.card.reg-full{
  padding: 24px !important;
}
.reg-onecard-grid .section{
  padding: 22px !important;
}
.reg-onecard-grid .card-grid-2{
  padding: 16px 16px 8px !important;     /* key inset so inputs never touch border */
}
.reg-onecard-grid .input,
.reg-onecard-grid input,
.reg-onecard-grid select,
.reg-onecard-grid textarea{
  margin-bottom: 14px !important;
}

/* =========================================================
   PATCH: DataGrid / table header bold + black
   ========================================================= */
table thead th,
.tbl thead th,
.table thead th,
.table th,
th{
  font-weight: 700 !important;
  color: #000000 !important;
}

/* =========================================================
   DEBUG AID (safe): If you still see no change, uncomment the line below
   to confirm the overrides file is being loaded.
   ========================================================= */
/* body{ outline: 4px solid magenta !important; } */


/* ----------------------------
   Clinician dashboard tweaks
   ---------------------------- */
.alert-row .patient-details{margin-top:6px}
.alert-row .patient-ident{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.alert-row .patient-avatar{
  width:30px;
  height:30px;
  border-radius:999px;
  background:#eef2ff;
  color:#1f2a44;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:12px;
  line-height:1;
  flex:0 0 30px;
  box-shadow:inset 0 0 0 1px rgba(17,24,39,.08);
}
.alert-row .patient-sub{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:2px;
}
.alert-row .patient-sub .meta{white-space:nowrap}

.alert-row .patient-name{
  font-weight:800;
  font-size:15px;
  color:#111;
  line-height:1.25;
}
.alert-row .patient-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.alert-row .patient-meta .meta{white-space:nowrap}
.alert-row .patient-meta .label{opacity:.85; margin-right:4px}

/* Outcome modal uses the core .modal-backdrop + .modal styles (centered). */
#outcomeBackdrop{z-index:9999}

/* =========================================================
   Clinician Dashboard v2 (two-column, drawer, tasks, trends)
   ========================================================= */
.clinician-v2 .dash-top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
}
.clinician-v2 .dash-top-actions{display:flex; gap:10px; align-items:flex-end;}
.clinician-v2 .dash-search{min-width:320px;}

.clinician-v2 .dash-grid{
  display:grid;
  grid-template-columns: 1.65fr 1fr;
  gap:14px;
}
.clinician-v2 .dash-main{min-width:0;}
.clinician-v2 .dash-side{min-width:0;}

.clinician-v2 .dash-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}

.clinician-v2 .chip-row{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end;}
.clinician-v2 .chip{
  border:1px solid var(--border);
  background: var(--surface);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  cursor:pointer;
}
.clinician-v2 .chip.active{box-shadow: inset 0 0 0 2px rgba(17,24,39,.14); font-weight:700;}

/* KPI colour indicators (Reports + Dashboard) */
.clinician-v2 .kpi-value{font-size:28px; font-weight:900; line-height:1.1; text-align:center; margin-top:6px;}
.clinician-v2 .kpi-card{position:relative;}
.clinician-v2 .kpi-indicator{width:10px; height:10px; border-radius:999px; display:inline-block; margin-right:8px;}
.clinician-v2 .kpi-indicator.green{background:#2e7d32;}
.clinician-v2 .kpi-indicator.amber{background:#ef6c00;}
.clinician-v2 .kpi-indicator.red{background:#c62828;}
.clinician-v2 .kpi-indicator.neutral{background:rgba(17,24,39,.35);}

.clinician-v2 .pill.delta{font-weight:800; border:1px solid rgba(17,24,39,.15);}
.clinician-v2 .pill.delta.good{background: rgba(46,125,50,.12); color:#2e7d32; border-color: rgba(46,125,50,.25);}
.clinician-v2 .pill.delta.bad{background: rgba(198,40,40,.12); color:#c62828; border-color: rgba(198,40,40,.25);}
.clinician-v2 .pill.delta.neutral{background: rgba(17,24,39,.06); color: rgba(17,24,39,.75);}

.clinician-v2 .kpi-grid-2{grid-template-columns: 1fr 1fr; gap:10px;}
.clinician-v2 .kpi-btn{cursor:pointer; text-align:left;}
.clinician-v2 .kpi-btn:hover{transform: translateY(-1px);}

.clinician-v2 .pq-row{cursor:pointer;}
.clinician-v2 .pq-title{font-weight:800;}

.clinician-v2 .tbl tbody tr.caseload-row{cursor:pointer;}
.clinician-v2 .tbl tbody tr.caseload-row:hover{background: rgba(17,24,39,.03);}

.clinician-v2 .activity{display:flex; flex-direction:column; gap:10px;}
.clinician-v2 .activity-item{
  display:grid;
  grid-template-columns: 26px 1fr auto;
  gap:10px;
  align-items:flex-start;
  border:1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:10px;
  cursor:pointer;
}
.clinician-v2 .activity-item:hover{background: rgba(17,24,39,.03);}
.clinician-v2 .activity-icon{
  width:26px; height:26px;
  display:flex; align-items:center; justify-content:center;
  border-radius:10px;
  background: rgba(11,61,145,.08);
  font-weight:800;
}
.clinician-v2 .activity-title{line-height:1.25;}

.clinician-v2 .task-add{display:grid; grid-template-columns: 1fr 150px auto; gap:10px; align-items:center;}
.clinician-v2 .task-list{display:flex; flex-direction:column; gap:10px;}
.clinician-v2 .task{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  border:1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:10px;
}
.clinician-v2 .task.done{opacity:.65;}
.clinician-v2 .task-title{font-weight:700;}
.clinician-v2 .task-meta{display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end;}

.clinician-v2 .trend-legend{display:flex; gap:10px; flex-wrap:wrap; font-size:12px; opacity:.9;}
.clinician-v2 .trend-legend .dot{width:10px; height:10px; border-radius:3px; display:inline-block; margin-right:6px;}
.clinician-v2 .trend-legend .dot.red{background:#c62828;}
.clinician-v2 .trend-legend .dot.amber{background:#ef6c00;}
.clinician-v2 .trend-legend .dot.green{background:#2e7d32;}
.clinician-v2 .trend-legend .dot.esc{background:#111827;}

.clinician-v2 .trend-chart svg .t-red{fill: rgba(198,40,40,.9);}
.clinician-v2 .trend-chart svg .t-amber{fill: rgba(239,108,0,.9);}
.clinician-v2 .trend-chart svg .t-green{fill: rgba(46,125,50,.9);}
.clinician-v2 .trend-chart svg .t-esc{fill: rgba(17,24,39,.9);}

/* SVG chart helpers used by ClinicianReports (no 3rd-party charts) */
.clinician-v2 .trend svg .trend-red{fill: rgba(198,40,40,.9);}
.clinician-v2 .trend svg .trend-amber{fill: rgba(239,108,0,.9);}
.clinician-v2 .trend svg .trend-green{fill: rgba(46,125,50,.9);}

.clinician-v2 .trend svg .cond-line{stroke: rgba(11,61,145,.85);}
.clinician-v2 .trend svg .cond-dot{fill: rgba(11,61,145,.95);}

/* Condition stacked-bar palette (c1..c6) */
.clinician-v2 .trend svg .cond-bar.c1{fill: rgba(11,61,145,.85);}  /* blue */
.clinician-v2 .trend svg .cond-bar.c2{fill: rgba(198,40,40,.85);}  /* red */
.clinician-v2 .trend svg .cond-bar.c3{fill: rgba(239,108,0,.85);}  /* amber */
.clinician-v2 .trend svg .cond-bar.c4{fill: rgba(46,125,50,.85);}   /* green */
.clinician-v2 .trend svg .cond-bar.c5{fill: rgba(124,58,237,.85);}  /* violet */
.clinician-v2 .trend svg .cond-bar.c6{fill: rgba(17,24,39,.6);}     /* other */

.clinician-v2 .trend svg .cond-legend.c1{fill: rgba(11,61,145,.85);}
.clinician-v2 .trend svg .cond-legend.c2{fill: rgba(198,40,40,.85);}
.clinician-v2 .trend svg .cond-legend.c3{fill: rgba(239,108,0,.85);}
.clinician-v2 .trend svg .cond-legend.c4{fill: rgba(46,125,50,.85);}
.clinician-v2 .trend svg .cond-legend.c5{fill: rgba(124,58,237,.85);}
.clinician-v2 .trend svg .cond-legend.c6{fill: rgba(17,24,39,.6);}

/* Drawer */
.drawer-backdrop{
  position:fixed;
  inset:0;
  background: rgba(17,24,39,.42);
  display:flex;
  justify-content:flex-end;
  z-index: 9998;
}
.drawer{
  width: min(420px, 92vw);
  height: 100vh;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -12px 0 30px rgba(0,0,0,.18);
  display:flex;
  flex-direction:column;
}
.drawer-head{
  padding: 14px 14px;
  border-bottom: 1px solid var(--border);
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}
.drawer-title{font-size:18px; font-weight:900;}
.drawer-body{padding:14px; overflow:auto;}
.drawer-section{border:1px solid var(--border); border-radius: var(--radius-sm); padding:10px; margin-bottom:12px;}
.drawer-kv{display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px dashed rgba(17,24,39,.08);}
.drawer-kv:last-child{border-bottom:none;}
.drawer-kv .k{opacity:.72; font-size:12px;}
.drawer-kv .v{font-weight:700; text-align:right;}
.drawer-actions{display:flex; gap:10px;}

@media (max-width: 980px){
  .clinician-v2 .dash-grid{grid-template-columns: 1fr;}
  .clinician-v2 .dash-top{flex-direction:column; align-items:flex-start;}
  .clinician-v2 .dash-search{min-width:0; width:100%;}
  .clinician-v2 .dash-top-actions{width:100%;}
  .clinician-v2 .task-add{grid-template-columns: 1fr;}
}

/* ----------------------------
   Patient profile tables: no horizontal scrolling
   ---------------------------- */
.table-wrap.no-x-scroll{overflow-x:hidden}

table[aria-label="Care plans"],
table[aria-label="Alerts"],
table[aria-label="Engagement events"],
table[aria-label="Vitals"]{
  min-width:0 !important;
  width:100% !important;
  table-layout:fixed;
}

table[aria-label="Care plans"] th,
table[aria-label="Care plans"] td,
table[aria-label="Alerts"] th,
table[aria-label="Alerts"] td,
table[aria-label="Recent readings"] th,
table[aria-label="Recent readings"] td,
table[aria-label="Engagement events"] th,
table[aria-label="Vitals"] th,
table[aria-label="Engagement events"] td,
table[aria-label="Vitals"] td{
  white-space:normal;
  word-break:break-word;
}

/* Red check-ins highlight */
.risk-row.red{
  border-left:4px solid #d32f2f;
  background:rgba(211,47,47,.06);
}

/* Badge colors (fallback if not present) */
.badge.red{background:#d32f2f;color:#fff;border-color:#d32f2f}
.badge.amber{background:#f59e0b;color:#111;border-color:#f59e0b}
.badge.green{background:#16a34a;color:#fff;border-color:#16a34a}


/* =========================================================
   Auth page (Login) — split hero + form (Afya360)
   ========================================================= */
.auth-body{
  background: var(--bg);
  min-height: 100vh;
}

.auth-page{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 28px 16px;
}

.auth-shell{
  width: min(1120px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
}

.auth-hero{
  position: relative;
  min-height: 640px;
  display:flex;
  flex-direction: column;
}

.auth-hero-image{
  flex: 1 1 auto;
  background-image: url('/images/auth/login-hero.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.auth-hero-bottom{
  background: linear-gradient(135deg, rgba(11,61,145,1), rgba(11,61,145,0.92));
  padding: 22px 26px 26px 26px;
  color: #fff;
}

.auth-hero-brand{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-bottom: 14px;
}

.auth-hero-brand-text{ line-height: 1.1; }
.auth-hero-brand-name{
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 22px;
}
.auth-hero-brand-tag{
  opacity: .85;
  font-size: 12.5px;
  margin-top: 3px;
}

.auth-hero-card{
  border-left: 4px solid rgba(255,255,255,.55);
  padding-left: 16px;
  background: rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 18px 16px;
}

.auth-hero-title{
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 6px 0;
}
.auth-hero-title span{ color: #eaf2ff; }
.auth-hero-sub{
  font-size: 13.5px;
  opacity: .9;
  margin: 0;
  max-width: 520px;
}

.auth-panel{
  padding: 40px 42px;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
}

.auth-brand{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-bottom: 10px;
}

.auth-brand-text{ line-height: 1.1; }
.auth-brand-name{
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 20px;
  color: var(--brand-1);
}
.auth-brand-tag{
  color: var(--muted);
  font-size: 12.5px;
  margin-top: 3px;
}

.auth-panel-body{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 100%;
}

.auth-form{
  width: min(100%, 460px);
  max-width: 460px;
  margin-inline: auto;
}

.auth-form-centered{
  width: 100%;
  padding: 48px 40px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
  margin-inline: auto;
}

.auth-form-centered .auth-title,
.auth-form-centered .auth-subtitle{
  text-align: center;
}

.auth-form-centered .auth-label,
.auth-form-centered .auth-label-row{
  text-align: left;
}

.auth-title{
  margin: 4px 0 6px 0;
  font-size: 34px;
  font-weight: 900;
  color: var(--ink);
}

.auth-subtitle{
  margin: 0 0 18px 0;
  color: var(--muted);
  font-size: 14px;
}

.auth-form-fields{ margin-top: 10px;
}

.auth-field{ margin-bottom: 20px; }

.auth-label{
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink);
  margin-bottom: 6px;
}

.auth-label-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.auth-help{
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.auth-input{
  border-radius: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: none;
}
.auth-input:focus{
  border-color: rgba(0,191,166,.55);
  box-shadow: var(--ring);
}

.auth-submit{
  margin-top: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 15px;
  box-shadow: 0 12px 26px rgba(11,61,145,.20);
}

.auth-footnote{
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
}

.auth-alert{
  border-radius: 14px;
  padding: 12px 14px;
  margin: 12px 0 14px 0;
  border: 1px solid var(--border);
  background: rgba(245, 158, 11, 0.10);
}
.auth-alert-success{
  border: 1px solid rgba(0, 191, 166, 0.35);
  background: rgba(0, 191, 166, 0.12);
}
.auth-alert-success .auth-alert-body{ color: #0b4b42; }
.auth-alert-title{
  font-weight: 800;
  margin-bottom: 2px;
}
.auth-alert-body{
  color: #6b4b00;
  font-size: 13.5px;
}

/* Responsive */
@media (max-width: 980px){
  .auth-shell{
    grid-template-columns: 1fr;
  }
  .auth-hero{
    min-height: 420px;
  }
  .auth-panel{
    padding: 22px 20px;
  }
  .auth-panel-body{
    align-items: flex-start;
    justify-content: center;
    padding-top: 8px;
  }
  .auth-form{
    width: min(100%, 560px);
    max-width: 560px;
  }
  .auth-form-centered{
    padding: 30px 24px;
  }
}

@media (max-width: 576px){
  .auth-page{
    padding: 14px 10px;
  }
  .auth-panel{
    padding: 16px 12px;
  }
  .auth-form-centered{
    padding: 22px 14px;
  }
  .auth-title{
    font-size: 28px;
  }
}

/* Option 1 auth layout refresh */
.auth-shell{
  width: min(1160px, 100%);
  border-radius: 20px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
}

.auth-hero{
  background: linear-gradient(180deg, #0f3f80 0%, #0b2f60 100%);
  color: #fff;
  padding: 28px;
  min-height: 680px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-hero-image,
.auth-hero-bottom,
.auth-hero-brand,
.auth-hero-card,
.auth-hero-title,
.auth-hero-sub{
  display: none !important;
}

.auth-hero-header{
  display: flex;
  align-items: center;
  gap: 12px;
}

.auth-hero-header .logo{
  flex: 0 0 auto;
}

.auth-hero-brand-name{
  color: #fff;
  font-size: 22px;
  font-weight: 900;
}

.auth-hero-brand-tag{
  color: rgba(255,255,255,.85);
}

.auth-info-card{
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 12px;
  background: rgba(255,255,255,.10);
  padding: 12px 14px;
}

.auth-info-card h3{
  margin: 0 0 8px 0;
  font-size: 15px;
  color: #fff;
}

.auth-info-item{
  font-size: 13.5px;
  line-height: 1.5;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.20);
}

.auth-info-item:last-child{
  border-bottom: none;
}

.auth-hero-build{
  margin-top: auto;
  font-size: 12px;
  color: rgba(255,255,255,.88);
}

.auth-panel{
  padding: 34px 28px;
}

.auth-panel-body{
  justify-content: center;
  align-items: center;
}

.auth-form{
  width: min(100%, 460px);
  max-width: 460px;
  margin-inline: auto;
}

.auth-form-centered{
  margin-inline: auto;
}

@media (max-width: 980px){
  .auth-shell{
    grid-template-columns: 1fr;
  }
  .auth-hero{
    min-height: 0;
    padding: 18px;
  }
  .auth-panel{
    padding: 20px 14px;
  }
  .auth-panel-body{
    align-items: flex-start;
  }
  .auth-form{
    width: min(100%, 560px);
    max-width: 560px;
  }
}

/* Auth layout: centered login with full-width bottom announcements strip */
body.auth-body.auth-btm-layout{
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: #0f2135;
  background:
    linear-gradient(135deg, rgba(7,39,83,.82), rgba(5,31,67,.76)),
    url('https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?auto=format&fit=crop&w=1800&q=80') center/cover no-repeat;
}

.auth-top{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 20px;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.16);
  background: transparent !important;
}

.auth-top-brand{
  font-weight: 900;
}

.auth-top-right{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.auth-status-pill{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(18,184,134,.18);
  border: 1px solid rgba(18,184,134,.4);
  color: #dcfff3;
}

.auth-status-time{
  color: #d6e2f5;
  font-size: 12px;
  line-height: 1;
}

.auth-build-meta{
  color: #d6e2f5;
  font-size: 11.5px;
  line-height: 1.2;
  text-align: right;
}

.auth-main{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  width: 100%;
  max-width: none !important;
}

.auth-login-wrap{
  width: min(430px, 100%);
}

body.auth-body.auth-btm-layout .auth-form{
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
}

body.auth-body.auth-btm-layout .auth-form-centered{
  width: 100%;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 16px;
  padding: 24px;
  background: rgba(255,255,255,.84);
  backdrop-filter: blur(9px);
  box-shadow: 0 16px 36px rgba(2,14,35,.35);
  margin-inline: auto;
}

.auth-bottom-strip{
  width: 100%;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255,255,255,.35);
  padding: 10px 12px;
}

.auth-strip-row{
  width: min(1200px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.auth-strip-card{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 10px;
  padding: 8px 10px;
  color: #f5f8ff;
  font-size: 12.5px;
  line-height: 1.35;
  min-height: 58px;
}

.auth-strip-card strong{
  display: block;
  margin-bottom: 3px;
  color: #fff;
  font-size: 12px;
  letter-spacing: .2px;
}

@media (max-width: 980px){
  .auth-strip-row{
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px){
  .auth-top{
    padding: 12px;
  }
  .auth-main{
    padding: 14px 10px;
  }
  .auth-strip-row{
    grid-template-columns: 1fr;
  }
}