/* ==========================================================================
   Failov Medical Services — brand token layer
   --------------------------------------------------------------------------
   Loaded AFTER assets/css/style.css (the Preclinic template) and overrides it.
   The template is almost entirely var()-driven, so redefining :root below
   re-skins every one of the 63 Blade views without touching a single one.

   Brand colours are SAMPLED from public/assets/img/logo.png, not guessed:
     wordmark  #A090BF   mark  #CF9B4F
   The template shipped with --primary: #B94EDC, a redder orchid that is not
   the brand colour and fails WCAG AA on white at 3.1:1. The violet ramp below
   is the logo hue carried down until it can hold text.

   Nothing here changes markup. Delete the <link> in the two layouts to revert.
   ========================================================================== */

:root {
  /* ---- brand: violet, anchored on the logo wordmark ---------------------- */
  --fv-violet-50:  #F7F5FB;
  --fv-violet-100: #EDEAF5;
  --fv-violet-200: #DBD4E9;
  --fv-violet-300: #C2B7D8;
  --fv-violet-400: #A090BF;  /* the logo wordmark, exact */
  --fv-violet-500: #8674A9;
  --fv-violet-600: #6D5C90;  /* 5.9:1 on white */
  --fv-violet-700: #574776;  /* 8.2:1 on white — actions, links, active nav */
  --fv-violet-800: #43355C;
  --fv-violet-900: #2C2245;

  /* ---- brand: gold, anchored on the logo mark --------------------------- */
  --fv-gold-100: #F9EFDD;
  --fv-gold-200: #EEDFC2;
  --fv-gold-400: #CF9B4F;  /* the logo mark, exact */
  --fv-gold-500: #B9873C;
  --fv-gold-600: #8F6522;  /* 5.2:1 on white — the only gold that holds text */
  --fv-gold-700: #6E4D18;

  /* ---- laterality: right eye violet, left eye gold, on every screen ------ */
  --fv-od: var(--fv-violet-700);
  --fv-od-bg: var(--fv-violet-50);
  --fv-od-line: var(--fv-violet-200);
  --fv-os: var(--fv-gold-600);
  --fv-os-bg: var(--fv-gold-100);
  --fv-os-line: var(--fv-gold-200);

  /* ---- type ------------------------------------------------------------- */
  --fv-font: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fv-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- shape & depth ---------------------------------------------------- */
  --fv-r-sm: 6px;
  --fv-r: 8px;
  --fv-r-lg: 12px;
  --fv-ctl: 44px;          /* one control height, desktop and touch alike */
  --fv-ctl-sm: 36px;       /* inside table rows only */
  --fv-sh-1: 0 1px 2px rgba(10, 27, 57, .06), 0 1px 1px rgba(10, 27, 57, .04);
  --fv-sh-2: 0 6px 20px rgba(10, 27, 57, .08);
  --fv-sh-3: 0 16px 40px rgba(10, 27, 57, .14);

  /* ---- remap the template's own tokens ---------------------------------- */
  --primary: var(--fv-violet-700);
  --primary-hover: var(--fv-violet-800);
  --primary-rgb: 87, 71, 118;
  --primary-transparent: var(--fv-violet-50);

  --secondary: var(--fv-gold-400);
  --secondary-hover: var(--fv-gold-500);
  --secondary-rgb: 207, 155, 79;
  --secondary-transparent: var(--fv-gold-100);

  /* the template aliased every accent to --primary; keep them in step */
  --indigo: var(--fv-violet-700);
  --purple: var(--fv-violet-700);
  --pink: var(--fv-violet-700);
  --cyan: var(--fv-violet-700);
  --teal: var(--fv-violet-700);
  --orange: var(--fv-gold-500);
  --indigo-hover: var(--fv-violet-800);
  --purple-hover: var(--fv-violet-800);
  --indigo-transparent: var(--fv-violet-50);
  --purple-transparent: var(--fv-violet-50);

  --topbar-height: 64px;   /* was 55px — too tight for 44px controls */

  /* status colours are inherited from the template unchanged */
}

/* ==========================================================================
   Typography
   ========================================================================== */

body {
  font-family: var(--fv-font);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--fv-font);
  color: var(--heading-color);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.012em;
}

h1, .h1 { font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
h2, .h2 { font-size: 22px; }
h3, .h3 { font-size: 18px; }
h4, .h4 { font-size: 17px; }
h5, .h5 { font-size: 15px; }
h6, .h6 { font-size: 13px; }

/* Patient numbers, phones, acuity, IOP and money — tabular figures so columns
   line up and a transposed digit is easier to catch. */
.fv-mono,
.text-mono {
  font-family: var(--fv-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

/* ==========================================================================
   Buttons — one height, 44px, everywhere
   ========================================================================== */

.btn {
  min-height: var(--fv-ctl);
  padding: 0 18px;
  gap: 8px;
  font-family: var(--fv-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
  border-radius: var(--fv-r);
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.btn-sm,
.btn-group-sm > .btn {
  min-height: var(--fv-ctl-sm);
  padding: 0 12px;
  font-size: 13px;
  border-radius: var(--fv-r-sm);
}

.btn-lg,
.btn-group-lg > .btn {
  min-height: 50px;
  padding: 0 24px;
  font-size: 15px;
}

/* icon-only buttons stay square/round at the same height */
.btn.rounded-circle,
.btn.btn-icon { width: var(--fv-ctl); padding: 0; }
.btn-sm.rounded-circle,
.btn-sm.btn-icon { width: var(--fv-ctl-sm); padding: 0; }

.btn-primary { box-shadow: 0 1px 2px rgba(44, 34, 69, .24); }

/* the template's outline buttons sit on a white page — give them a real border */
.btn-outline-primary { border-color: var(--fv-violet-300); }
.btn-outline-primary:hover { background-color: var(--fv-violet-700); border-color: var(--fv-violet-700); }

/* Confirming money received is a success action, not a brand one. */
.btn-ok { background-color: var(--success); border-color: var(--success); color: #fff; }
.btn-ok:hover { background-color: var(--success-hover); border-color: var(--success-hover); color: #fff; }

/* --secondary is now the brand gold, which made every Cancel and Back button
   shout like a warning. Secondary actions are neutral. */
.btn-outline-secondary {
  border-color: var(--border-color);
  color: var(--gray-700);
  background-color: #fff;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus-visible {
  border-color: var(--fv-violet-300);
  background-color: var(--fv-violet-50);
  color: var(--fv-violet-800);
}
/* Bootstrap paints the disabled state from --bs-btn-disabled-color, which the
   theme points at --secondary, so a disabled secondary button came out gold */
.btn-outline-secondary:disabled,
.btn-outline-secondary.disabled {
  --bs-btn-disabled-color: var(--gray-300);
  --bs-btn-disabled-border-color: var(--border-color);
  color: var(--gray-300);
  border-color: var(--border-color);
  background-color: #fff;
}

.btn-light {
  background-color: #fff;
  border-color: var(--border-color);
  color: var(--gray-700);
}
.btn-light:hover {
  background-color: var(--fv-violet-50);
  border-color: var(--fv-violet-200);
  color: var(--fv-violet-800);
}

.btn:disabled,
.btn.disabled { opacity: .5; }

/* ==========================================================================
   Form controls
   ========================================================================== */

.form-control,
.form-select {
  min-height: var(--fv-ctl);
  padding: 10px 14px;
  font-family: var(--fv-font);
  font-size: 14px;
  color: var(--heading-color);
  border-radius: var(--fv-r);
  transition: border-color .16s ease, box-shadow .16s ease;
}

textarea.form-control { min-height: 96px; line-height: 1.6; }

.form-control::placeholder { color: var(--gray-300); }

.form-control:focus,
.form-select:focus {
  border-color: var(--fv-violet-500);
  box-shadow: 0 0 0 3px var(--fv-violet-100);
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-transparent);
}

.form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: 6px;
}

.form-check-input { width: 18px; height: 18px; margin-top: .18em; border-color: var(--gray-300); }
.form-check-input:checked { background-color: var(--fv-violet-700); border-color: var(--fv-violet-700); }
.form-check-input:focus { border-color: var(--fv-violet-500); box-shadow: 0 0 0 3px var(--fv-violet-100); }
.form-check-label { font-size: 14px; color: var(--gray-700); }

/* radios and checkboxes are hit targets too */
.form-check { min-height: var(--fv-ctl-sm); display: flex; align-items: center; gap: 4px; }

.input-group > .form-control,
.input-group > .form-select,
.input-group > .input-group-text { min-height: var(--fv-ctl); }
.input-group-text { background: #FBFBFC; border-color: var(--border-color); font-size: 13px; color: var(--gray-500); }

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
  border-radius: var(--fv-r-lg);
  box-shadow: var(--fv-sh-1);
  margin-bottom: 1rem;
}

.card .card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  background: transparent;
  border-radius: var(--fv-r-lg) var(--fv-r-lg) 0 0;
}

.card .card-title { font-size: 17px; font-weight: 600; }
.card .card-footer { border-radius: 0 0 var(--fv-r-lg) var(--fv-r-lg); background: #FCFCFD; }

/* the views pair .shadow-sm with .border-0 constantly; keep a hairline anyway
   so cards still read as separate surfaces on the grey page background */
.card.border-0 { border: 1px solid var(--border-color) !important; }

/* ==========================================================================
   Tables
   ========================================================================== */

/* Several tables (records dashboard, payments) are .table-nowrap with seven
   columns and already overflow their .table-responsive wrapper. Uppercase
   headers must therefore be width-neutral: 10.5px with tight tracking costs
   no more than the template's 12px sentence case. Do not widen these without
   re-measuring against the wrapper. */
.table > thead > tr > th,
.table thead tr th {
  padding: 11px 16px;
  background: #FAFAFC;
  border-bottom: 1px solid var(--border-color);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gray-400);
  white-space: nowrap;
}

/* row actions keep the template's horizontal padding so the Actions column
   does not grow; the extra font size is paid for out of the tracking above */
.table .btn-sm { padding: 0 10px; }

.table > tbody > tr > td { border-bottom-color: #F0F1F4; vertical-align: middle; }
.table > tbody > tr:last-child > td { border-bottom: 0; }
.table-hover > tbody > tr:hover > * { background-color: var(--fv-violet-50); }

.table-responsive { border-radius: var(--fv-r-lg); }

/* DataTables chrome */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  min-height: var(--fv-ctl);
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--fv-r);
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  outline: 0;
  border-color: var(--fv-violet-500);
  box-shadow: 0 0 0 3px var(--fv-violet-100);
}

.page-link {
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--fv-r-sm);
  color: var(--gray-700);
}
.page-item.active .page-link { background-color: var(--fv-violet-700); border-color: var(--fv-violet-700); }

/* ==========================================================================
   Badges — tinted, not solid. Colour plus a word, never colour alone.
   The .bg-* utilities carry !important, so these must too.
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -.005em;
}

.badge.bg-primary   { background-color: var(--fv-violet-100) !important; color: var(--fv-violet-800) !important; }
.badge.bg-secondary { background-color: var(--fv-gold-100)   !important; color: var(--fv-gold-700)   !important; }
.badge.bg-success   { background-color: var(--success-transparent) !important; color: #166B3A !important; }
.badge.bg-info      { background-color: var(--info-transparent)    !important; color: #17559F !important; }
.badge.bg-warning   { background-color: var(--warning-transparent) !important; color: #8A6410 !important; }
.badge.bg-danger    { background-color: var(--danger-transparent)  !important; color: #A31111 !important; }
.badge.bg-light     { background-color: #F0F1F4 !important; color: var(--gray-600) !important; }
.badge.bg-dark      { background-color: var(--gray-800) !important; color: #fff !important; }

/* several views write `badge bg-info text-dark` to claw back contrast the solid
   fill destroyed; the tint already handles it */
.badge.text-dark { color: inherit !important; }

/* ==========================================================================
   Alerts
   ========================================================================== */

.alert {
  padding: 14px 16px;
  border-radius: var(--fv-r);
  border-width: 1px;
  font-size: 13.5px;
}
.alert-success { background: var(--success-transparent); border-color: #CBE9D8; color: #166B3A; }
.alert-info    { background: var(--info-transparent);    border-color: #CFE0FA; color: #17559F; }
.alert-warning { background: var(--warning-transparent); border-color: #F1E1B4; color: #8A6410; }
.alert-danger  { background: var(--danger-transparent);  border-color: #F5CFCF; color: #A31111; }

/* ==========================================================================
   Shell — topbar and sidebar
   ========================================================================== */

.navbar-header { min-height: 64px; box-shadow: var(--fv-sh-1); padding: 0; }

.fv-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 64px;
  padding: 0 24px;
}
.fv-topbar__right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.fv-greeting { display: flex; flex-direction: column; line-height: 1.3; }
.fv-greeting__hello { font-size: 14px; font-weight: 600; color: var(--heading-color); }
.fv-greeting__sub { font-size: 12px; color: var(--gray-400); }

.fv-avatar {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  background: var(--fv-violet-700);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
}

.fv-usermenu {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--fv-ctl);
  padding: 0 8px 0 4px;
  border-radius: var(--fv-r);
  color: var(--gray-500);
  text-decoration: none;
}
.fv-usermenu:hover { background: var(--fv-violet-50); }
.fv-usermenu__text { flex-direction: column; line-height: 1.25; text-align: left; }
.fv-usermenu__name { font-size: 13.5px; font-weight: 600; color: var(--heading-color); }
.fv-usermenu__role { font-size: 12px; color: var(--gray-400); }
.fv-usermenu__panel { min-width: 264px; }
.fv-usermenu__head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px;
  margin-bottom: 4px;
  border-radius: var(--fv-r);
  background: var(--fv-violet-50);
}
.fv-usermenu__head p { margin: 0; }
.fv-usermenu__mail { font-size: 12px; color: var(--gray-500); word-break: break-all; }
.dropdown-item.fv-signout { color: var(--danger); font-weight: 600; }
.dropdown-item.fv-signout:hover { background: var(--danger-transparent); color: var(--danger); }

/* --- sidebar ---
   The theme takes .sidebar-logo out of the flow (position:fixed, height:56px)
   and compensates with a 56px top margin on .sidebar-menu. That coupling
   breaks as soon as the menu markup changes, so the logo is put back in the
   flex column instead and the magic margin is dropped. Selector must be
   .sidebar .sidebar-logo to outrank the theme's own two-class rule. */
.sidebar .sidebar-logo {
  position: static;
  height: auto;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  min-height: 64px;
  padding: 0 20px;
  border-bottom: 1px solid var(--border-color);
}
.fv-side-logo { height: 34px; width: auto; }

.sidebar-inner { padding: 8px 0 12px; }
.sidebar .sidebar-menu { margin: 0 0 4px; padding: 0; }

.sidebar .menu-title {
  padding: 16px 22px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gray-300);
}

.sidebar .sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--fv-ctl);
  padding: 10px 12px;
  margin: 2px 12px;
  border-radius: var(--fv-r);
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-600);
  text-decoration: none;
  position: relative;
  transition: background-color .16s ease, color .16s ease;
}
.sidebar .sidebar-link i { font-size: 19px; flex: none; }
.sidebar .sidebar-link > span { flex: 1; min-width: 0; }

.sidebar .sidebar-link:hover {
  background: #F0F1F4;
  color: var(--heading-color);
}
.sidebar .sidebar-link.active {
  background: var(--fv-violet-50);
  color: var(--fv-violet-800);
  font-weight: 600;
}
.sidebar .sidebar-link.active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--fv-violet-700);
}

.fv-caret { font-size: 15px !important; transition: transform .18s ease; }
.fv-open > .sidebar-link .fv-caret { transform: rotate(180deg); }

/* Collapsed until its parent is opened. The theme sets
   `.sidebar .sidebar-menu ul { display:flex; padding:0 }` at (0,2,1), which
   outranks a two-class selector, so these have to match that specificity --
   which is also why the submenu was stuck open and its items sat at x=0. */
.sidebar .sidebar-menu ul.submenu-list {
  display: none;
  padding: 2px 0 6px 46px;
  margin: 0;
}
.sidebar .sidebar-menu li.fv-open > ul.submenu-list { display: block; }
.sidebar .submenu-list a {
  display: flex;
  align-items: center;
  min-height: var(--fv-ctl-sm);
  padding: 4px 10px;
  border-radius: var(--fv-r-sm);
  font-size: 13px;
  color: var(--gray-500);
  text-decoration: none;
}
.sidebar .submenu-list a:hover { color: var(--fv-violet-700); background: var(--fv-violet-50); }
.sidebar .submenu-list a.active { color: var(--fv-violet-800); font-weight: 600; }

/* sidebar footer: who is signed in, always visible */
.fv-side-user {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: auto 12px 12px;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--fv-r);
}
.fv-side-user__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.fv-side-user__name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--heading-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fv-side-user__role { font-size: 12px; color: var(--gray-400); }

/* the sidebar is a column so the footer can sit at the bottom, and the nav
   scrolls on its own when a role's menu is taller than the viewport */
.sidebar { flex-direction: column; }
.sidebar .sidebar-inner {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--gray-200) transparent;
}
.sidebar .sidebar-inner::-webkit-scrollbar { width: 8px; }
.sidebar .sidebar-inner::-webkit-scrollbar-thumb {
  background: var(--gray-100);
  border: 2px solid #fff;
  border-radius: 999px;
}
.sidebar .sidebar-inner:hover::-webkit-scrollbar-thumb { background: var(--gray-200); }

/* ==========================================================================
   Modals & dropdowns
   ========================================================================== */

.modal-content { border: 0; border-radius: var(--fv-r-lg); box-shadow: var(--fv-sh-3); }
.modal-header { padding: 18px 22px; border-bottom: 1px solid var(--border-color); }
.modal-body { padding: 22px; }
.modal-footer { padding: 16px 22px; border-top: 1px solid var(--border-color); }

.dropdown-menu { border: 1px solid var(--border-color); border-radius: var(--fv-r-lg); box-shadow: var(--fv-sh-2); padding: 6px; }
.dropdown-item { min-height: var(--fv-ctl); display: flex; align-items: center; border-radius: var(--fv-r-sm); font-size: 14px; }
.dropdown-item:hover { background: var(--fv-violet-50); color: var(--fv-violet-800); }

/* ==========================================================================
   Blade components (resources/views/components)
   ========================================================================== */

/* --- <x-page-header> --- */
.fv-pagehead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.fv-pagehead__text { min-width: 0; }
.fv-pagehead__title { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.fv-pagehead__sub { margin: 4px 0 0; font-size: 13px; color: var(--gray-400); }
.fv-pagehead__actions { flex: none; display: flex; flex-wrap: wrap; gap: 10px; }

.fv-crumb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--gray-400);
}
.fv-crumb a { color: var(--gray-500); }
.fv-crumb a:hover { color: var(--fv-violet-700); }
.fv-crumb i { font-size: 13px; }
.fv-crumb span { color: var(--gray-600); font-weight: 500; }

/* --- <x-card> --- */
.card .fv-card__sub { margin: 2px 0 0; font-size: 12px; color: var(--gray-400); }
.fv-card__head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* --- <x-field> --- */
.fv-field { display: flex; flex-direction: column; }
.fv-req { margin-left: 3px; color: var(--danger); }
.fv-hint { margin-top: 5px; font-size: 12px; color: var(--gray-400); }

/* --- <x-badge> --- */
.badge .fv-dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}

/* --- <x-stat> : the summary row above every dashboard --- */
.fv-statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 20px; }
.fv-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 15px 17px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--border-color);
  border-radius: var(--fv-r-lg);
  box-shadow: var(--fv-sh-1);
}
.fv-stat__label {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; color: var(--gray-500);
}
.fv-stat__label i { font-size: 15px; }
.fv-stat__value { font-size: 26px; font-weight: 700; color: var(--heading-color); line-height: 1.15; letter-spacing: -.02em; }
.fv-stat__sub { font-size: 12px; color: var(--gray-400); }

.fv-stat--brand { border-left-color: var(--fv-violet-600); }
.fv-stat--brand .fv-stat__label i { color: var(--fv-violet-700); }
.fv-stat--ok { border-left-color: var(--success); }
.fv-stat--ok .fv-stat__label i, .fv-stat--ok .fv-stat__value { color: var(--ok700, #166B3A); }
.fv-stat--warn { border-left-color: var(--warning); }
.fv-stat--warn .fv-stat__label i, .fv-stat--warn .fv-stat__value { color: #8A6410; }
.fv-stat--stop { border-left-color: var(--danger); }
.fv-stat--stop .fv-stat__label i, .fv-stat--stop .fv-stat__value { color: var(--dgr700, #A31111); }

/* --- <x-queue> --- */
.fv-queue { margin-bottom: 16px; }
.fv-queue__id { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fv-queue__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 22px; padding: 0 7px;
  border-radius: 999px;
  background: #F0F1F4; color: var(--gray-600);
  font-family: var(--fv-mono); font-size: 12px; font-weight: 500;
}
.fv-queue__note { font-size: 12px; color: var(--gray-400); }
.fv-queue--ok   .fv-queue__count { background: var(--success-transparent); color: #166B3A; }
.fv-queue--warn .fv-queue__count { background: var(--warning-transparent); color: #8A6410; }
.fv-queue--stop .fv-queue__count { background: var(--danger-transparent);  color: #A31111; }
/* a cleared queue: one line, so the queues with work stay above the fold */
.fv-queue--clear {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  margin-bottom: 8px;
  border: 1px solid var(--border-color);
  border-radius: var(--fv-r);
  background: #FBFBFC;
}
.fv-queue--clear i { font-size: 16px; color: var(--success); flex: none; }
.fv-queue__clear-title { font-size: 14px; font-weight: 600; color: var(--gray-600); }
.fv-queue__clear-msg { font-size: 13px; color: var(--gray-400); }
.fv-queue--clear + .fv-queue--clear { margin-top: -4px; }

/* --- admin catalogue: flatten the template's card-inside-a-card ---
   These pages wrap their content in an outer card whose only job was to hold a
   settings sidebar beside it. The sidebar is gone (it duplicated the Fees &
   catalogue submenu), so the outer shell becomes a plain container and the
   inner card is the surface. Left in the markup rather than unpicked, because
   the nesting is cosmetic and rewriting it means unbalanced div surgery across
   twelve files. */
.card:has(> .card-body > .settings-wrapper) {
  border: 0;
  box-shadow: none;
  background: transparent;
  margin-bottom: 0;
}
.settings-wrapper { gap: 0; }
.settings-wrapper > .card { margin-bottom: 0; box-shadow: var(--fv-sh-1); border: 1px solid var(--border-color); }

/* --- filter tabs ---
   Gap sits wider than the space between a label and its own count, so a count
   reads as belonging to the tab on its left rather than the one on its right. */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  border-bottom: 1px solid var(--border-color);
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--fv-ctl);
  padding: 0 2px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-500);
  text-decoration: none;
}
.tab:hover { color: var(--heading-color); text-decoration: none; }
.tab.on { color: var(--fv-violet-800); border-bottom-color: var(--fv-violet-700); }
.tab.on .fv-queue__count { background: var(--fv-violet-100); color: var(--fv-violet-800); }

/* --- front desk: find a patient ---
   The search sits above the tabs because it searches all of them, not the one
   on screen. */
.fv-deskfind { margin-bottom: 14px; }
.fv-deskfind .form-label { margin-bottom: 6px; }
.fv-deskfind__field { position: relative; max-width: 420px; }
.fv-deskfind__field .ti {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  color: var(--gray-400);
  pointer-events: none;
}
.fv-deskfind__field .form-control { padding-left: 40px; }
.fv-deskfind .fv-hint { margin-top: 6px; }

/* Tabs are a button row, so without JavaScript they would be four dead
   buttons above four stacked panels. The row is hidden until the script marks
   the desk ready, which leaves the unscripted page as the queues it always
   was. */
.fv-desk > .tabs { display: none; }
.fv-desk--ready > .tabs { display: flex; margin-bottom: 16px; }
.fv-desk .tab { background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; }

.fv-panel + .fv-panel { margin-top: 16px; }
.fv-desk--ready .fv-panel + .fv-panel { margin-top: 0; }

.fv-nomatch { padding: 20px; margin: 0; color: var(--gray-500); text-align: center; }

/* --- row actions ---
   Visible buttons rather than a kebab menu. On a catalogue list there are only
   ever three or four, and hiding them behind a click was concealing the fact
   that two of them did not work. Wraps rather than overflowing on narrow
   screens; the delete confirmation lives inside this box but is positioned by
   Bootstrap, so it must not affect the flex layout. */
.fv-rowactions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.fv-rowactions > .modal { position: fixed; }

/* --- admin: one row of a drug's stock ledger --- */
.fv-movement {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--lineSoft, #F0F1F4);
  font-size: 13.5px;
}
.fv-movement:last-child { border-bottom: 0; }
.fv-movement__qty { font-weight: 700; }
.fv-movement__what strong { color: var(--heading-color); font-weight: 600; }
.fv-movement__balance {
  font-weight: 600;
  color: var(--gray-600);
  padding: 2px 8px;
  border-radius: var(--fv-r-sm);
  background: #F0F1F4;
  white-space: nowrap;
}

/* --- admin: preview of the clinic's details as they print --- */
.fv-letterhead {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 18px;
  border: 1px dashed var(--border-color);
  border-radius: var(--fv-r);
  background: #FBFBFC;
  font-size: 13px;
  color: var(--gray-600);
}
.fv-letterhead strong { font-size: 16px; color: var(--heading-color); }

/* --- admin: a failed reminder, with the provider's reason --- */
.fv-failrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid #F0F1F4;
  font-size: 13px;
}
.fv-failrow:last-child { border-bottom: 0; }
.fv-failrow__who { font-weight: 600; color: var(--heading-color); margin-right: 6px; }
.fv-failrow__why { color: var(--danger); text-align: right; flex: none; max-width: 55%; }

/* --- the oversight line: one tile per stage of the patient journey --- */
.fv-line { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 10px; }
.fv-linestage {
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: 2px;
  padding: 14px 15px;
  border: 1px solid var(--border-color);
  border-top: 3px solid var(--gray-200);
  border-radius: var(--fv-r);
  background: #fff;
  text-decoration: none;
  transition: border-color .16s ease, background-color .16s ease;
}
.fv-linestage:hover { text-decoration: none; background: #FBFBFC; }
.fv-linestage__n { font-size: 11px; color: var(--gray-300); }
.fv-linestage__count { font-size: 28px; font-weight: 700; line-height: 1.1; color: var(--heading-color); letter-spacing: -.02em; }
.fv-linestage__name { font-size: 13px; font-weight: 600; color: var(--gray-700); line-height: 1.3; }
.fv-linestage__owner { font-size: 11px; color: var(--gray-400); }
.fv-linestage__wait { font-size: 12px; font-weight: 600; margin-top: 4px; }

.fv-linestage--clear { background: #FBFBFC; }
.fv-linestage--clear .fv-linestage__count { color: var(--gray-300); }
.fv-linestage--clear .fv-linestage__wait { color: var(--success); }
.fv-linestage--ok   { border-top-color: var(--success); }
.fv-linestage--ok   .fv-linestage__wait { color: var(--gray-500); }
.fv-linestage--warn { border-top-color: var(--warning); }
.fv-linestage--warn .fv-linestage__wait { color: #8A6410; }
.fv-linestage--stop { border-top-color: var(--danger); background: var(--danger-transparent); }
.fv-linestage--stop .fv-linestage__wait { color: var(--danger); }

/* waiting time, ranked by how long it has been */
.fv-wait { font-family: var(--fv-mono); font-size: 13px; font-weight: 600; color: var(--gray-500); white-space: nowrap; }
.fv-wait--warn { color: #8A6410; }
.fv-wait--stop { color: var(--danger); }

/* --- <x-empty> --- */
.fv-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 44px 20px;
}
.fv-empty__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--fv-violet-50);
  color: var(--fv-violet-700);
  font-size: 26px;
}
.fv-empty__title { font-size: 18px; font-weight: 600; margin: 0; }
.fv-empty__msg { max-width: 340px; margin: 0; font-size: 13px; color: var(--gray-400); }
.fv-empty__action { margin-top: 6px; }

/* --- <x-patient-bar> --- */
.fv-patientbar {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 14px 20px;
  margin-bottom: 16px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--fv-r-lg);
  box-shadow: var(--fv-sh-1);
}
.fv-avatar--lg { width: 46px; height: 46px; font-size: 15px; }
.fv-patientbar__id { min-width: 0; }
.fv-patientbar__name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fv-patientbar__name h2 { font-size: 20px; font-weight: 600; margin: 0; }
.fv-patientbar__meta { margin: 2px 0 0; font-size: 13px; color: var(--gray-400); }

.fv-tag-id {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--fv-r-sm);
  background: #F0F1F4;
  color: var(--gray-700);
  font-family: var(--fv-mono);
  font-size: 12px;
}

.fv-patientbar__vitals {
  display: flex;
  gap: 22px;
  margin: 0 0 0 14px;
  padding-left: 28px;
  border-left: 1px solid var(--border-color);
}
.fv-vital dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 3px;
}
.fv-vital dd { margin: 0; font-size: 15px; font-weight: 500; color: var(--heading-color); }
.fv-vital.is-od dt { color: var(--fv-od); }
.fv-vital.is-os dt { color: var(--fv-os); }
.fv-patientbar__novitals { margin-left: 8px; }

.fv-patientbar__actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* --- <x-consult-steps> --- */
.fv-steps {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0 0 18px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--fv-r-lg);
  box-shadow: var(--fv-sh-1);
}
.fv-step {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--fv-ctl);
  border-radius: var(--fv-r);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gray-400);
}
.fv-step__n {
  width: 22px;
  height: 22px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #F0F1F4;
  color: var(--gray-400);
  font-size: 11px;
  font-weight: 700;
}
.fv-step.is-done { color: var(--ok700, #166B3A); }
.fv-step.is-done .fv-step__n { background: var(--success-transparent); color: var(--success); }
.fv-step.is-current { background: var(--fv-violet-700); color: #fff; }
.fv-step.is-current .fv-step__n { background: rgba(255, 255, 255, .22); color: #fff; }

@media (max-width: 767.98px) {
  .fv-patientbar { gap: 12px; padding: 14px; }
  .fv-patientbar__vitals {
    width: 100%;
    margin: 0;
    padding: 12px 0 0;
    border-left: 0;
    border-top: 1px solid var(--border-color);
    gap: 18px;
    flex-wrap: wrap;
  }
  .fv-patientbar__actions { width: 100%; margin-left: 0; }
  .fv-patientbar__actions .btn { flex: 1; }
  .fv-step__label { display: none; }
  .fv-step.is-current .fv-step__label { display: inline; }
}

/* ==========================================================================
   Shared bits for the money-handling screens
   ========================================================================== */

/* label/value pairs, used where facts were previously readonly <input>s */
.fv-kv { margin: 0; }
.fv-kv > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid #F0F1F4;
  font-size: 13.5px;
}
.fv-kv > div:last-child { border-bottom: 0; }
/* A key can be an unbreakable string -- a backup filename ran a dd 43px past
   the viewport at 390px -- so keys break and rows wrap rather than overflow. */
.fv-kv > div { flex-wrap: wrap; }
.fv-kv dt { color: var(--gray-400); font-weight: 400; min-width: 0; overflow-wrap: anywhere; }
.fv-kv dd { margin: 0; color: var(--heading-color); font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.fv-kv dd.dim { color: var(--gray-300); font-weight: 400; }

.fv-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
}
.fv-total span { font-size: 14px; font-weight: 600; color: var(--heading-color); }
.fv-total strong { font-size: 21px; font-weight: 600; color: var(--fv-violet-800); }

.fv-sticky { position: sticky; top: 80px; }

/* --- accept payment --- */
.fv-payrow {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
  align-items: end;
  padding: 12px 0;
  border-bottom: 1px solid #F0F1F4;
}
.fv-payrow:last-child { border-bottom: 0; }
.fv-payrow .form-label { margin-bottom: 6px; }
.fv-payrow__remove .btn { width: var(--fv-ctl); padding: 0; }

.fv-balance {
  display: flex;
  gap: 24px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--fv-r);
  background: #FAFAFC;
  border: 1px solid var(--border-color);
}
.fv-balance > div { display: flex; flex-direction: column; gap: 2px; }
.fv-balance span { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--gray-400); }
.fv-balance strong { font-size: 16px; color: var(--heading-color); }
.fv-balance.is-settled { background: var(--success-transparent); border-color: #CBE9D8; }
.fv-balance.is-over { background: var(--danger-transparent); border-color: #F5CFCF; }
.fv-balance.is-over strong { color: var(--danger); }

/* --- registration type cards --- */
.fv-typegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; border: 0; padding: 0; margin: 0; }
.fv-typecard { position: relative; display: block; cursor: pointer; }
.fv-typecard input { position: absolute; top: 16px; left: 16px; }
.fv-typecard__body {
  display: block;
  padding: 16px 16px 16px 44px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--fv-r-lg);
  transition: border-color .16s ease, background-color .16s ease;
}
.fv-typecard:hover .fv-typecard__body { border-color: var(--fv-violet-300); }
.fv-typecard input:checked + .fv-typecard__body { border-color: var(--fv-violet-600); background: var(--fv-violet-50); }
.fv-typecard input:focus-visible + .fv-typecard__body { box-shadow: 0 0 0 3px var(--fv-violet-100); }
.fv-typecard__name { display: block; font-size: 15px; font-weight: 600; color: var(--heading-color); }
.fv-typecard__desc { display: block; margin-top: 3px; font-size: 13px; color: var(--gray-500); }
.fv-typecard__fee { display: block; margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--fv-violet-800); }

.fv-next { margin: 0; padding: 0; list-style: none; counter-reset: step; }
/* three grid children per item -- the ::before counter, the heading and the
   detail -- so the last two must be placed in column 2 explicitly, or the
   detail falls into the 26px counter column and wraps a character at a time */
.fv-next li { display: grid; grid-template-columns: 26px 1fr; column-gap: 12px; padding: 8px 0; counter-increment: step; }
.fv-next li::before {
  content: counter(step);
  grid-column: 1; grid-row: 1 / span 2;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #F0F1F4;
  color: var(--gray-500);
  font-size: 12px; font-weight: 700;
}
.fv-next strong { grid-column: 2; grid-row: 1; font-size: 13.5px; color: var(--heading-color); }
.fv-next span { grid-column: 2; grid-row: 2; font-size: 12px; line-height: 1.5; color: var(--gray-400); }

/* --- treatment: option toggles, pick lists, basket --- */
.fv-optiongrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.fv-option {
  display: flex; align-items: center; gap: 10px;
  min-height: var(--fv-ctl);
  padding: 0 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--fv-r);
  font-size: 14px; font-weight: 500; color: var(--gray-600);
  cursor: pointer;
}
.fv-option i { font-size: 18px; color: var(--gray-400); }
.fv-option:hover { border-color: var(--fv-violet-300); }
.fv-option:has(input:checked) { border-color: var(--fv-violet-600); background: var(--fv-violet-50); color: var(--fv-violet-800); font-weight: 600; }
.fv-option:has(input:checked) i { color: var(--fv-violet-700); }

.fv-picklist { margin: 0; padding: 0; list-style: none; max-height: 380px; overflow-y: auto; }
.fv-pick {
  display: grid;
  grid-template-columns: auto 1fr auto 84px;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--fv-r);
  border: 1px solid transparent;
}
.fv-pick + .fv-pick { margin-top: 2px; }
.fv-pick:hover { background: #FAFAFC; }
.fv-pick.is-on { background: var(--fv-violet-50); border-color: var(--fv-violet-200); }
.fv-pick__label { display: flex; flex-direction: column; min-width: 0; margin: 0; cursor: pointer; }
.fv-pick__name { font-size: 14px; font-weight: 500; color: var(--heading-color); }
.fv-pick__meta { font-size: 12px; color: var(--gray-400); }
.fv-pick__price { font-size: 13px; color: var(--gray-500); white-space: nowrap; }
.fv-pick .drug-qty { width: 84px; text-align: center; }
.fv-pick .drug-qty[hidden] { display: none; }
/* the services list has no quantity column */
#servicesList .fv-pick { grid-template-columns: auto 1fr auto; }
.fv-empty-note { padding: 14px 12px; }

.search {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--fv-ctl);
  padding: 0 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--fv-r);
  background: #fff;
  color: var(--gray-400);
}
.search:focus-within { border-color: var(--fv-violet-500); box-shadow: 0 0 0 3px var(--fv-violet-100); }
.search i { font-size: 17px; flex: none; }
.search .fv-searchinput { border: 0; background: none; outline: none; width: 100%; font-size: 14px; color: var(--heading-color); }
.search .fv-searchinput::placeholder { color: var(--gray-300); }

/* radio/checkbox rendered as a hit-target pill rather than a bare control */
.fv-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.fv-choice {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--fv-r-pill, 999px);
  background: #fff;
  font-size: 13px; font-weight: 500; color: var(--gray-600);
  cursor: pointer;
}
.fv-choice:hover { border-color: var(--fv-violet-300); }
.fv-choice:has(input:checked) { border-color: var(--fv-violet-600); background: var(--fv-violet-50); color: var(--fv-violet-800); font-weight: 600; }
.fv-choice .form-check-input { margin: 0; }

.dim { color: var(--gray-300) !important; }

/* --- the two lines inside a table cell ---
   A name with a quieter identifier or timestamp under it. Seven views already
   used these three classes -- both dashboards, the staff list, the roles list,
   the SMS log -- but they were never carried over from the design into this
   stylesheet, so all of them were rendering at the browser default. */
/* Clinical notes come out of a rich text editor. The markup is stripped for
   display, so the line breaks it carried have to survive as whitespace. */
.fv-prewrap { white-space: pre-line; text-align: left; }

/* --- clinical record ---
   A consultation printed as a document: two eyes side by side, and what became
   of what was ordered stated rather than left to be worked out. */
.fv-record__side {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 600;
  margin: 0 0 8px;
}
.fv-record__list { margin: 0; padding-left: 18px; }
.fv-record__list li { margin-bottom: 4px; }

.fv-record__outcome {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--fv-violet-100);
}
.fv-record__outcome-label {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 600;
}

@media print {
  .fv-record__head { display: block !important; }
  .fv-record__head h1 { font-size: 20px; margin: 0 0 14px; }
}

/* --- receipt ---
   Shown on screen inside a card and printed on its own. The email carries its
   own copy of these rules inline, because mail clients do not fetch CSS. */
.fv-receipt__head { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.fv-receipt__org { font-size: 17px; font-weight: 700; color: var(--heading-color); }
.fv-receipt__orgline { font-size: 13px; color: var(--gray-500); line-height: 1.5; }
.fv-receipt__stamp { text-align: right; }
.fv-receipt__title { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--fv-gold-600); font-weight: 700; }
.fv-receipt__no { font-size: 16px; font-weight: 700; color: var(--heading-color); }

.fv-receipt__kv { margin: 0 0 20px; }
.fv-receipt__kv > div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--fv-violet-100); flex-wrap: wrap; }
.fv-receipt__kv dt { font-size: 13px; color: var(--gray-500); font-weight: 400; margin: 0; }
.fv-receipt__kv dd { font-size: 14px; font-weight: 600; margin: 0; text-align: right; }

.fv-receipt__table { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
.fv-receipt__table th,
.fv-receipt__table td { padding: 9px 0; border-bottom: 1px solid var(--fv-violet-100); font-size: 14px; text-align: left; }
.fv-receipt__table thead th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-500); font-weight: 600; }
.fv-receipt__table tfoot th { border-bottom: none; border-top: 2px solid var(--fv-violet-200); font-size: 15px; padding-top: 12px; }
.fv-receipt__table .ta-r { text-align: right; }

.fv-receipt__foot { font-size: 13px; color: var(--gray-500); margin: 0; }

/* --- printing ---
   There were no print rules at all, so printing any page produced the sidebar,
   the header, the footer and every button. A receipt is the first thing here
   meant to leave the building on paper, so printing gives that alone. */
@media print {
  .sidebar,
  .navbar-header,
  .footer,
  .fv-noprint,
  .fv-pagehead,
  .alert { display: none !important; }

  body, .page-wrapper, .content { margin: 0 !important; padding: 0 !important; background: #fff !important; }

  .card { border: none !important; box-shadow: none !important; }
  .card-body { padding: 0 !important; }

  /* The receipt column takes the page rather than staying in its grid. */
  .row > [class*="col-"] { max-width: 100% !important; flex: 0 0 100% !important; }

  .fv-receipt { max-width: 100%; }
  .fv-receipt__table { page-break-inside: avoid; }

  @page { margin: 16mm; }
}

/* A one-time password, sized to be read off the screen and said aloud. */
.fv-otp {
  display: inline-block;
  padding: 10px 16px;
  border: 1px solid var(--fv-violet-300, #c9bede);
  border-radius: 8px;
  background: #fff;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .08em;
  user-select: all;
}

.rowname { font-size: 14px; font-weight: 600; color: var(--heading-color); }
.rowsub { font-size: 12px; color: var(--gray-400); }

/* A booking still to come, sat under the patient's name. Coloured so it does
   not read as another phone number. */
.fv-appt { color: var(--fv-violet-700) !important; font-weight: 600; }
.t-sm { font-size: 13px; }

.fv-basket__empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 20px 8px; color: var(--gray-400); }
.fv-basket__empty i { font-size: 26px; color: var(--fv-violet-300); }
.fv-basket__empty p { margin: 0; font-size: 13px; }
.fv-basket__group + .fv-basket__group { margin-top: 14px; }
.fv-basket__group h4 { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--gray-400); margin-bottom: 6px; }
.fv-basket__group ul { margin: 0; padding: 0; list-style: none; }
.fv-basket__group li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 13.5px; }
.fv-basket__name { color: var(--gray-700); }
.fv-basket__amt { color: var(--heading-color); font-weight: 500; white-space: nowrap; }

@media (max-width: 991.98px) {
  .fv-sticky { position: static; }
}
@media (max-width: 575.98px) {
  .fv-payrow { grid-template-columns: 1fr; }
  .fv-payrow__remove .btn { width: 100%; }
  .fv-pick { grid-template-columns: auto 1fr; row-gap: 6px; }
  .fv-pick__price, .fv-pick .drug-qty { grid-column: 2; justify-self: start; }
}

/* --- embedded (modal iframe) pages --- */
.fv-embed { background: var(--light); }
.fv-embed__inner { padding: 20px; }
.fv-embed__inner > .fv-pagehead { margin-bottom: 16px; }
.fv-embed .card:last-child { margin-bottom: 0; }

/* --- examination field groups --- */
.fv-exam-group {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 22px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gray-400);
}
.fv-exam-group:first-child { margin-top: 0; }
.fv-exam-group span { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--gray-300); }
.fv-eye .col-form-label { font-size: 13px; font-weight: 600; color: var(--gray-800); }

/* --- <x-eye-card> --- */
.fv-eye .card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fv-eye__id { display: flex; align-items: center; gap: 10px; }
.fv-eye__meta { font-size: 13px; font-weight: 600; }
.fv-eye-od .fv-eye__meta { color: var(--fv-od); }
.fv-eye-os .fv-eye__meta { color: var(--fv-os); }

@media (max-width: 767.98px) {
  .fv-pagehead { flex-direction: column; align-items: stretch; }
  .fv-pagehead__actions .btn { flex: 1; }
}

/* ==========================================================================
   Laterality helpers — used by the clinical views once they are restructured
   ========================================================================== */

.fv-eye-od { --fv-eye: var(--fv-od); --fv-eye-bg: var(--fv-od-bg); --fv-eye-line: var(--fv-od-line); }
.fv-eye-os { --fv-eye: var(--fv-os); --fv-eye-bg: var(--fv-os-bg); --fv-eye-line: var(--fv-os-line); }
.fv-eye-od > .card-header,
.fv-eye-os > .card-header { background: var(--fv-eye-bg); border-bottom-color: var(--fv-eye-line); }
.fv-eye-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 22px;
  border-radius: var(--fv-r-sm);
  background: var(--fv-eye);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
}

/* ==========================================================================
   Auth — two-panel shell (layouts/auth.blade.php)
   Brand on the left, form on the right. All eight auth views yield into the
   form panel, so none of them needed changing; the card chrome several of
   them still ship is neutralised below.
   ========================================================================== */

.fv-auth-body { background: #fff; }

.fv-auth { display: flex; min-height: 100vh; }

/* --- brand panel --- */
.fv-auth__brand {
  width: 560px;
  flex: none;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px;
  background: var(--fv-violet-900);
}

/* The logo mark blown up as a watermark. logo-alt.png is a 214x100 lockup with
   the pinwheel at x148-197, y12-59; scaled 10.4x that is x1539-2049, y125-614
   inside a 2226x1040 box, which is what the inset() crops to. The negative
   offset then slides that region to x300, bleeding off the panel's right edge. */
.fv-auth__mark {
  position: absolute;
  width: 1284px;          /* 214 x 6 */
  max-width: none;
  left: -558px;
  top: 228px;
  opacity: .12;
  pointer-events: none;
  /* crop to the pinwheel: x888-1182, y72-354 within the scaled 1284x600 box */
  clip-path: inset(72px 102px 246px 888px);
}

/* align-self matters: .fv-auth__brand is a column flex container, and the
   default align-items:stretch would pull the logo to the panel width and
   distort it against its fixed height */
.fv-auth__logo { position: relative; align-self: flex-start; height: 44px; width: auto; }

.fv-auth__pitch { position: relative; max-width: 400px; }
.fv-auth__pitch h1 {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.025em;
  color: #fff;
  margin-bottom: 16px;
}
.fv-auth__pitch p { font-size: 16px; line-height: 1.65; color: #C6BDD8; }

.fv-auth__areas { position: relative; display: flex; gap: 28px; list-style: none; padding: 0; margin: 0; }
.fv-auth__areas li { font-size: 13px; color: #E4DFEE; }
.fv-auth__areas span {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #9C8FBA;
}

/* --- form panel --- */
.fv-auth__form {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background: #fff;
}
.fv-auth__inner { width: 100%; }

.fv-auth__head { margin-bottom: 30px; }
.fv-auth__head h2 { font-size: 28px; font-weight: 700; letter-spacing: -.022em; margin-bottom: 7px; }
.fv-auth__head p { font-size: 15px; color: var(--gray-500); margin: 0; }

.fv-auth__fields { display: flex; flex-direction: column; gap: 18px; }

.fv-label-row { display: flex; align-items: center; justify-content: space-between; }
.fv-label-row .form-label { margin-bottom: 0; }
.fv-label-row a,
.fv-label-row .fv-linkbtn { font-size: 13px; font-weight: 600; }

/* Reads as a link, but opens a dialog rather than going anywhere, so it is a
   button underneath -- a link with no destination is a trap for a screen
   reader and for anyone middle-clicking it. */
.fv-linkbtn {
  background: none;
  border: 0;
  padding: 0;
  color: var(--fv-violet-700);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.fv-linkbtn:hover { color: var(--fv-violet-800); }
.fv-linkbtn:focus-visible { outline: 2px solid var(--fv-violet-700); outline-offset: 2px; border-radius: 3px; }

.fv-password { position: relative; }
.fv-password .form-control { padding-right: 48px; }
.fv-password__toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  border-radius: var(--fv-r-sm);
  color: var(--gray-400);
  cursor: pointer;
}
.fv-password__toggle:hover { color: var(--fv-violet-700); background: var(--fv-violet-50); }

.fv-err { display: block; margin-top: 5px; font-size: 12px; font-weight: 500; color: var(--danger); }

.fv-auth__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--border-color);
  font-size: 12px;
  color: var(--gray-400);
}
.fv-auth__foot a { font-weight: 600; }

/* The other seven auth views still wrap their content in .card. In this shell
   the form sits directly on white, so strip the chrome rather than edit them. */
.fv-auth .card { border: 0 !important; box-shadow: none !important; background: transparent; margin: 0; }
.fv-auth .card > .card-body { padding: 0; }
.fv-auth .card .text-center { text-align: left !important; }
.fv-auth .card h5 { font-size: 26px; font-weight: 700; letter-spacing: -.022em; margin-bottom: 6px; }

@media (max-width: 991.98px) {
  .fv-auth { flex-direction: column; min-height: 100vh; }
  .fv-auth__brand {
    width: auto;
    padding: 22px 24px;
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
  .fv-auth__logo { height: 34px; }
  .fv-auth__pitch,
  .fv-auth__areas,
  .fv-auth__mark { display: none; }
  .fv-auth__form { padding: 32px 24px 40px; align-items: flex-start; }
  .fv-auth__inner { margin: 0 auto; }
}

/* ==========================================================================
   Touch — anything tappable clears 44px on a phone
   ========================================================================== */

@media (max-width: 767.98px) {
  .btn-sm,
  .btn-group-sm > .btn { min-height: var(--fv-ctl); padding: 0 14px; font-size: 14px; }
  .card .card-body { padding: 16px; }
  h1, .h1 { font-size: 24px; }

  /* ------------------------------------------------------------------
     Tables become cards.

     Every listing table is wrapped in .table-responsive, which on a phone
     means dragging a seven-column table sideways to reach the button that
     matters. Below this breakpoint each row becomes a card instead: the
     column name on the left, the value on the right, and the row's action
     full-width at the bottom.

     .fv-cards and the per-cell data-label are added by failov.js. Without
     it these rules never apply and the table scrolls as before.
     ------------------------------------------------------------------ */

  .fv-cards { overflow: visible; }

  .fv-cards > table,
  .fv-cards > table > tbody,
  .fv-cards > table > tbody > tr,
  .fv-cards > table > tbody > tr > td { display: block; width: 100%; }

  .fv-cards > table > thead { display: none; }

  .fv-cards > table { background: transparent; }

  .fv-cards > table > tbody > tr {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--fv-r-lg);
    box-shadow: var(--fv-sh-1);
    margin-bottom: 12px;
    padding: 4px 0;
    overflow: hidden;
  }

  /* zebra striping reads as "this card is different" once rows are cards */
  .fv-cards > table.table-striped > tbody > tr > *,
  .fv-cards > table.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: transparent;
    background-color: transparent !important;
    box-shadow: none !important;
  }

  /* a cell whose content is blank would otherwise leave an orphan label */
  .fv-cards > table > tbody > tr > td.fv-cell-empty { display: none; }

  .fv-cards > table > tbody > tr > td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 14px !important;
    border: 0 !important;
    text-align: right;
    white-space: normal !important;
  }

  .fv-cards > table > tbody > tr > td::before {
    content: attr(data-label);
    flex: none;
    max-width: 45%;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--gray-400);
    text-align: left;
  }

  /* a cell with no label (spacer columns) shouldn't leave a gap */
  .fv-cards > table > tbody > tr > td:not([data-label])::before { display: none; }

  /* the action cell: label suppressed, sits under a rule, button full width */
  .fv-cards > table > tbody > tr > td.fv-cell-last {
    display: block;
    text-align: left;
    margin-top: 4px;
    padding-top: 12px !important;
    border-top: 1px solid #F0F1F4 !important;
  }
  .fv-cards > table > tbody > tr > td.fv-cell-last::before { display: none; }
  .fv-cards > table > tbody > tr > td.fv-cell-last .btn { width: 100%; }
  .fv-cards > table > tbody > tr > td.fv-cell-last .btn + .btn { margin-top: 8px; }
  /* a state-changing row action is a POST form, so the wrapper has to stretch
     too or the button inside it only fills an inline-block */
  .fv-cards > table > tbody > tr > td.fv-cell-last form.d-inline { display: block !important; }
  .fv-cards > table > tbody > tr > td.fv-cell-last form + form,
  .fv-cards > table > tbody > tr > td.fv-cell-last form + .btn,
  .fv-cards > table > tbody > tr > td.fv-cell-last .btn + form { margin-top: 8px; }
  .fv-cards > table > tbody > tr > td.fv-cell-last br { display: none; }

  /* the row's first cell reads as the card's title */
  .fv-cards > table > tbody > tr > td:first-child {
    font-size: 15px;
    font-weight: 600;
    color: var(--heading-color);
  }

  .fv-cards + .dataTables_info,
  .fv-cards ~ .dataTables_paginate { margin-top: 8px; }
}

/* The provider's own reply, shown as it came back rather than summarised. */
.fv-response {
  background: var(--fv-violet-50);
  border: 1px solid var(--fv-violet-100);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 220px;
  overflow: auto;
}