/* ==========================================================================
   MarGen design system
   Source: "MarGen Design/" (DelRx system with the MarGen purple accent and
   lavender neutrals). Loaded last on every portal page by layouts/app.blade.php
   and on the auth pages, so it re-skins the Bootstrap 4 / Vuexy markup used
   across the app as well as providing the .mg-* shell and components.
   ========================================================================== */

/* ---- Tokens ------------------------------------------------------------- */
:root {
  /* MarGen purple (named orange-* to match the shared DelRx token names) */
  --orange-50: #F3EDFE; --orange-100: #E5D9FD; --orange-200: #CBB3FB; --orange-300: #A983F7;
  --orange-400: #8950F3; --orange-500: #6E22EE; --orange-600: #5C16D2; --orange-700: #4A12A8; --orange-800: #380E7E;
  /* Lavender neutrals */
  --sand-0: #FFFFFF; --sand-50: #F6F5FB; --sand-100: #EFEDF7; --sand-200: #E4E1F0; --sand-300: #D5D1E4;
  --sand-400: #B5B0C8; --sand-500: #8F8AA3;
  --ink-300: #8C899E; --ink-400: #6B6880; --ink-500: #55526A; --ink-700: #37344D; --ink-900: #1E1B33;
  --green-500: #2F9E6B; --green-50: #E7F5EE; --amber-500: #D9921A; --amber-50: #FBF1DE;
  --red-500: #D2442F; --red-50: #FBE8E4; --blue-500: #3A6FD8; --blue-50: #E7EEFB;

  /* Semantic */
  --bg-page: var(--sand-50); --surface-card: var(--sand-100); --surface-raised: var(--sand-0);
  --surface-sunken: var(--sand-200); --surface-inverse: var(--ink-900);
  --text-heading: var(--ink-900); --text-body: var(--ink-500); --text-muted: var(--ink-400);
  --text-subtle: var(--ink-300); --text-on-accent: #FFFFFF; --text-accent: var(--orange-500);
  --accent: var(--orange-500); --accent-hover: var(--orange-600); --accent-press: var(--orange-700); --accent-soft: var(--orange-50);
  --border-subtle: var(--sand-200); --border-default: var(--sand-300); --border-strong: var(--sand-400);
  --focus-ring: rgba(110, 34, 238, .3);
  --success: var(--green-500); --success-soft: var(--green-50); --warning: var(--amber-500); --warning-soft: var(--amber-50);
  --warning-text: #9A6410;
  --danger: var(--red-500); --danger-soft: var(--red-50); --info: var(--blue-500); --info-soft: var(--blue-50);

  /* Type */
  --font-sans: 'Figtree', 'Google Sans', 'Helvetica Neue', Helvetica, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Spacing, radii, controls */
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px;
  --control-h-sm: 32px; --control-h-md: 40px; --control-h-lg: 48px;

  /* Effects */
  --shadow-xs: 0 1px 2px rgba(30, 27, 60, .06);
  --shadow-sm: 0 1px 2px rgba(30, 27, 60, .05), 0 2px 6px rgba(30, 27, 60, .06);
  --shadow-md: 0 2px 4px rgba(30, 27, 60, .04), 0 8px 24px rgba(30, 27, 60, .08);
  --shadow-lg: 0 4px 8px rgba(30, 27, 60, .04), 0 24px 56px rgba(30, 27, 60, .14);
  --shadow-accent: 0 6px 18px rgba(110, 34, 238, .28);
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: 120ms; --dur-base: 200ms;

  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236B6880' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236B6880' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
}

/* ---- Base --------------------------------------------------------------- */
html { font-size: 14px; max-width: 100%; overflow-x: hidden; }
/* clip, not hidden: overflow:hidden on body would make it a scroll container and break the sticky header and sidebar */
body { max-width: 100%; overflow-x: clip; }
body {
  margin: 0; background: var(--bg-page) !important; color: var(--text-body);
  font-family: var(--font-sans); font-size: 14px; line-height: 1.45;
  -webkit-font-smoothing: antialiased; letter-spacing: 0;
}
::selection { background: var(--orange-100); }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: none; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-sans); color: var(--text-heading); font-weight: 600; letter-spacing: -.015em; line-height: 1.25;
}
h1, .h1 { font-size: 22px; letter-spacing: -.02em; }
h2, .h2 { font-size: 18px; }
h3, .h3 { font-size: 16px; }
h4, .h4 { font-size: 15px; }
h5, .h5 { font-size: 14.5px; }
h6, .h6 { font-size: 13px; }
.card h6, .mg-eyebrow {
  font-size: 12px; font-weight: 600; color: var(--text-muted); letter-spacing: .06em; text-transform: uppercase;
}
p { line-height: 1.6; }
hr { border-color: var(--border-subtle); }
code, kbd, pre, samp, .mg-mono { font-family: var(--font-mono); }
code { color: var(--orange-700); background: var(--accent-soft); border-radius: 4px; padding: 1px 5px; font-size: 12px; }
.text-primary { color: var(--accent) !important; }
.text-muted, .text-secondary { color: var(--text-muted) !important; }
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.text-warning { color: var(--warning-text) !important; }
.text-info { color: var(--info) !important; }
.text-dark, .text-body { color: var(--text-heading) !important; }
.bg-primary { background-color: var(--accent) !important; }
.bg-light { background-color: var(--sand-100) !important; }
.border, .border-top, .border-bottom, .border-left, .border-right { border-color: var(--border-subtle) !important; }
.font-weight-bold, .font-weight-bolder, b, strong { font-weight: 600; }
.small, small { font-size: 12px; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--sand-300); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---- Icons (Lucide via CSS mask, same as the design) -------------------- */
.mg-i {
  display: inline-block; flex: none; width: 16px; height: 16px; background: currentColor; vertical-align: -3px;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat;
}

/* ---- Shell -------------------------------------------------------------- */
.mg-app { display: flex; min-height: 100vh; background: var(--bg-page); }

.mg-sidebar {
  width: 232px; max-width: 85vw; flex: none; box-sizing: border-box;
  background: var(--surface-card); border-right: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; padding: clamp(12px, 2.2vh, 22px) 14px;
  height: 100vh; height: 100dvh; position: sticky; top: 0; z-index: 85; overflow-y: auto;
  transition: transform .22s ease;
}
.mg-wordmark { display: inline-flex; font-size: 24px; font-weight: 700; letter-spacing: -.045em; line-height: 1; text-decoration: none; }
.mg-wordmark:hover { text-decoration: none; }
.mg-wordmark .mg-w1 { color: var(--ink-900); }
.mg-wordmark .mg-w2 { color: var(--accent); }
.mg-sidebar .mg-wordmark { padding: 0 10px clamp(10px, 2.4vh, 26px); }

.mg-nav { display: flex; flex-direction: column; gap: 1px; }
.mg-nav-link {
  display: flex; align-items: center; gap: 11px; flex: none;
  height: clamp(28px, 3.8vh, 36px); padding: 0 10px; border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 400; color: var(--ink-500); text-decoration: none;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.mg-nav-link > span:not(.mg-i) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-nav-link:hover { color: var(--text-heading); background: rgba(255, 255, 255, .6); text-decoration: none; }
.mg-nav-link.active { font-weight: 500; color: var(--text-heading); background: var(--surface-raised); box-shadow: var(--shadow-xs); }
.mg-nav-link.active .mg-i { color: var(--accent); }
.mg-nav-count { flex: none !important; font-size: 11.5px; color: var(--text-muted); }
.mg-nav-divider { height: 1px; background: var(--border-subtle); margin: clamp(4px, 1.1vh, 12px) 10px; }

.mg-user {
  margin-top: auto; display: flex; align-items: center; gap: 10px;
  padding: clamp(8px, 1.4vh, 12px) 10px 0; border-top: 1px solid var(--border-subtle);
}
.mg-user-link { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; text-decoration: none; }
.mg-user-link:hover { text-decoration: none; }
.mg-user-meta { min-width: 0; display: flex; flex-direction: column; }
.mg-user-name { font-size: 13px; font-weight: 500; color: var(--text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-user-role { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mg-avatar {
  width: 32px; height: 32px; flex: none; border-radius: 99px; overflow: hidden;
  background: var(--orange-100); color: var(--orange-700);
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600;
}
.mg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mg-avatar-lg { width: 48px; height: 48px; font-size: 16px; }
.mg-avatar-xl { width: 72px; height: 72px; font-size: 22px; }

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

.mg-imp {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px clamp(16px, 4vw, 32px); background: var(--ink-900); color: #fff; font-size: 13px;
}
.mg-imp .mg-i { color: var(--orange-300); }
.mg-imp-text { flex: 1; min-width: min(100%, 200px); }

.mg-header {
  display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap;
  padding: clamp(12px, 2.4vw, 20px) clamp(16px, 4vw, 32px);
  border-bottom: 1px solid var(--border-subtle); background: var(--bg-page);
  position: sticky; top: 0; z-index: 30;
}
.mg-header-titles { min-width: min(100%, 180px); flex: 1 1 0; }
.mg-title { margin: 0; font-size: clamp(18px, 3.4vw, 22px); font-weight: 600; letter-spacing: -.02em; color: var(--text-heading); line-height: 1.2; }
.mg-subtitle { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }
.mg-header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; }
.mg-menu-btn {
  display: none; width: 44px; height: 44px; flex: none; padding: 0; cursor: pointer;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-raised);
  align-items: center; justify-content: center; color: var(--text-heading);
}

/* Header nav: holds the notifications bell (<li class="nav-item dropdown">) */
.mg-header-nav { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 10px; }
.mg-header-nav > .nav-item { position: relative; }
.mg-header-nav > .nav-item > .nav-link {
  width: 36px; height: 36px; padding: 0; border-radius: 999px; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .8); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-xs);
  color: var(--text-heading); font-size: 15px;
}
.mg-header-nav > .nav-item > .nav-link:hover { background: var(--sand-0); }
.mg-header-nav > .nav-item > .nav-link::after { display: none; }
.mg-header-nav > .nav-item > .nav-link .badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  border-radius: 999px; background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 600;
  border: 2px solid var(--surface-raised); justify-content: center;
}
.mg-header-nav .dropdown-menu { width: 360px; max-width: calc(100vw - 32px); padding: 0; overflow: hidden; margin-top: 8px; }

.mg-content { padding: clamp(16px, 4vw, 32px); display: flex; flex-direction: column; gap: 20px; flex: 1; min-width: 0; }

.mg-scrim { display: none; position: fixed; inset: 0; z-index: 80; background: rgba(30, 27, 51, .35); }

@media (max-width: 1023.98px) {
  .mg-sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); }
  .mg-sb-open .mg-sidebar { transform: none; box-shadow: var(--shadow-lg); }
  .mg-sb-open .mg-scrim { display: block; }
  .mg-menu-btn { display: inline-flex; }
}

/* ---- Vuexy content wrappers inside the new shell ------------------------ */
.mg-content .content,
.mg-content .app-content,
.mg-content .content.app-content { margin: 0 !important; padding: 0 !important; min-height: 0 !important; transition: none; }
.mg-content .content-wrapper { padding: 0; }
.mg-content .content-wrapper > * + * { margin-top: 0; }
.content-overlay, .sidenav-overlay, .drag-target, .header-navbar-shadow, .pace { display: none !important; }
.mg-content .content-header { margin: 0 0 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mg-content .content-header:empty { display: none; }
.mg-content .content-header h1, .mg-content .content-header .content-header-title { margin: 0; font-size: 18px; padding: 0; border: 0; }
.mg-content .row.match-height > [class*="col"] { display: flex; flex-direction: column; }
.mg-content .row.match-height > [class*="col"] > .card { flex: 1; }

/* ---- Design components (.mg-*) ----------------------------------------- */
.mg-stack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.mg-grid-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 14px; }
.mg-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 20px; align-items: start; }
.mg-grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 0 16px; }

.mg-kpi {
  display: block; background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: 16px 18px; box-shadow: var(--shadow-xs); color: inherit; text-decoration: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
a.mg-kpi:hover { border-color: var(--border-default); box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; }
.mg-kpi-label { font-size: 12px; color: var(--text-muted); }
.mg-kpi-value { font-size: 28px; font-weight: 600; letter-spacing: -.02em; color: var(--text-heading); margin-top: 6px; line-height: 1; }
.mg-kpi-sub { font-size: 11.5px; color: var(--text-subtle); margin-top: 8px; }

.mg-section {
  background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs); overflow: hidden; min-width: 0;
}
.mg-section-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--border-subtle);
}
.mg-section-head.compact { padding: 12px 20px; min-height: 57px; box-sizing: border-box; }
.mg-section-title { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--text-heading); letter-spacing: -.01em; }
.mg-section-sub { font-size: 12px; color: var(--text-muted); }
.mg-section-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mg-section-body { padding: 20px; }
.mg-section-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 20px; font-size: 12px; color: var(--text-muted);
}

.mg-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border-subtle);
  color: inherit; text-decoration: none;
}
.mg-row:last-child { border-bottom: 0; }
a.mg-row:hover { background: var(--sand-50); text-decoration: none; color: inherit; }
.mg-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mg-row-title { font-size: 13px; font-weight: 500; color: var(--text-heading); line-height: 1.4; }
.mg-row-sub { font-size: 11.5px; color: var(--text-muted); }
.mg-empty { padding: 20px; font-size: 13px; color: var(--text-muted); }
.mg-empty-box { padding: 24px 16px; border: 1px dashed var(--border-default); border-radius: var(--radius-lg); font-size: 13px; color: var(--text-muted); text-align: center; }

.mg-dl { display: grid; grid-template-columns: minmax(96px, 150px) minmax(0, 1fr); margin: 0; }
.mg-dl dt { font-size: 12.5px; font-weight: 400; color: var(--text-muted); padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }
.mg-dl dd { margin: 0; font-size: 13.5px; color: var(--text-heading); padding: 10px 0; border-bottom: 1px solid var(--border-subtle); min-width: 0; overflow-wrap: anywhere; }

.mg-setting-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px; padding: 16px 0; align-items: center; border-bottom: 1px solid var(--border-subtle); }
.mg-setting-row:last-child { border-bottom: 0; }
.mg-section-rows { padding: 4px 20px; }
.mg-setting-control { max-width: 320px; }
.mg-setting-label { font-size: 13.5px; font-weight: 500; color: var(--text-heading); }
.mg-setting-hint { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
@media (max-width: 640px) { .mg-setting-row { grid-template-columns: minmax(0, 1fr); gap: 10px; } }

.mg-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mg-toolbar .mg-search { margin-left: auto; flex: 1 1 220px; max-width: min(100%, 300px); }
@media (max-width: 640px) { .mg-toolbar .mg-search { margin-left: 0; max-width: 100%; } }
.mg-tab .mg-tab-count { margin-left: 6px; color: var(--text-subtle); }
.mg-cell-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }

/* In-page toasts for Livewire actions (same look as the design Toast and the toastr skin) */
.mg-toasts {
  position: fixed; right: clamp(12px, 3vw, 24px); bottom: clamp(12px, 3vw, 24px); z-index: 1060;
  display: flex; flex-direction: column; gap: 10px; width: 340px; max-width: calc(100vw - 24px); pointer-events: none;
}
.mg-toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; cursor: pointer;
  background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  font-size: 13.5px; font-weight: 500; line-height: 1.45; color: var(--text-heading);
}
.mg-toast > .mg-i { margin-top: 1px; }
.mg-toast.success > .mg-i { color: var(--success); }
.mg-toast.warning > .mg-i { color: var(--warning); }
.mg-toast.danger > .mg-i { color: var(--danger); }

.mg-search { position: relative; display: flex; align-items: center; }
.mg-search > .mg-i { position: absolute; left: 13px; color: var(--text-muted); width: 15px; height: 15px; pointer-events: none; }
.mg-search > .form-control { padding-left: 36px; }

.mg-callout {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-md);
  background: var(--sand-100); font-size: 13px; line-height: 1.5; color: var(--ink-700);
}
.mg-callout > .mg-i { margin-top: 1px; color: var(--text-muted); }
.mg-callout.info { background: var(--info-soft); } .mg-callout.info > .mg-i { color: var(--info); }
.mg-callout.warning { background: var(--warning-soft); } .mg-callout.warning > .mg-i { color: var(--warning); }
.mg-callout.danger { background: var(--danger-soft); } .mg-callout.danger > .mg-i { color: var(--danger); }
.mg-callout.success { background: var(--success-soft); } .mg-callout.success > .mg-i { color: var(--success); }
.mg-callout.accent { background: var(--accent-soft); } .mg-callout.accent > .mg-i { color: var(--accent); }

.mg-icon-tile {
  width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.mg-icon-tile.lg { width: 56px; height: 56px; border-radius: 16px; }
/* dm+d / SNOMED release card: icon tile, text, action */
.mg-release-card { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 20px; }

.mg-progress { height: 6px; border-radius: 99px; background: var(--sand-200); overflow: hidden; }
.mg-progress > span { display: block; height: 100%; border-radius: 99px; background: var(--accent); }

.mg-chip {
  display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 999px;
  background: var(--sand-200); font-size: 12px; color: var(--ink-700);
}
.mg-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.mg-choices { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.mg-rounds { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 8px; }
.mg-chip:has(> .mg-icon-btn), .mg-chip:has(> button) { padding-right: 4px; }

/* Permission matrix cells (on = granted) */
.mg-perm-cell {
  width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex: none;
  background: var(--sand-100); color: var(--text-subtle);
}
.mg-perm-cell.on { background: var(--success-soft); color: var(--success); }

/* Activity log before/after values */
.mg-diff-box { padding: 10px 12px; border-radius: 8px; font-size: 12.5px; line-height: 1.5; color: var(--ink-700); overflow-wrap: anywhere; }
.mg-diff-box.before { background: var(--danger-soft); }
.mg-diff-box.after { background: var(--success-soft); }

.mg-tabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--sand-200); border-radius: var(--radius-md); max-width: 100%; overflow-x: auto; }
.mg-tab {
  display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: var(--radius-sm); border: 0;
  font-family: inherit; font-size: 13px; font-weight: 500; color: var(--text-muted); background: transparent;
  white-space: nowrap; cursor: pointer; text-decoration: none; transition: all var(--dur-fast);
}
.mg-tab:hover { color: var(--text-heading); text-decoration: none; }
.mg-tab.active { background: var(--surface-raised); color: var(--text-heading); box-shadow: var(--shadow-sm); }

.mg-file-drop {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px dashed var(--border-default);
  border-radius: 8px; background: var(--sand-50); color: var(--text-muted);
}
.mg-file-drop input[type="file"] { font-family: inherit; font-size: 12.5px; color: var(--text-body); max-width: 100%; }

/* File-type tile (PDF, DOCX...) before a document title */
.mg-ext {
  width: 36px; height: 22px; flex: none; border-radius: 4px; background: var(--sand-200);
  display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10px; color: var(--ink-700);
}

/* Conversation bubbles (support tickets) */
.mg-bubble { padding: 12px 14px; border-radius: var(--radius-md); background: var(--sand-100); display: flex; flex-direction: column; gap: 4px; }
.mg-bubble.accent { background: var(--accent-soft); }
.mg-bubble-head { display: flex; align-items: baseline; gap: 8px; }
.mg-bubble-name { font-size: 12.5px; font-weight: 600; color: var(--text-heading); }
.mg-bubble-time { margin-left: auto; font-size: 11.5px; color: var(--text-muted); }
.mg-bubble-body { font-size: 13px; line-height: 1.5; color: var(--ink-700); white-space: pre-wrap; }

.mg-cell-title { color: var(--text-heading); font-weight: 500; }
a.mg-cell-title:hover { color: var(--accent); }
/* A button that looks like its text (e.g. a clickable name in a row that is itself the trigger) */
.mg-plain-btn { border: 0; background: none; padding: 0; margin: 0; font: inherit; text-align: left; cursor: pointer; }
.mg-plain-btn:hover { color: var(--accent); }
.mg-plain-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }
.mg-cell-sub { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.mg-actions { display: inline-flex; gap: 2px; align-items: center; justify-content: flex-end; }

/* Plain round icon button (table row actions, close buttons) */
.mg-icon-btn {
  width: 30px; height: 30px; padding: 0; border-radius: 999px; border: 1px solid transparent; background: transparent;
  display: inline-flex; align-items: center; justify-content: center; color: var(--text-heading); cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out); text-decoration: none; flex: none;
}
.mg-icon-btn:hover { background: rgba(30, 27, 51, .06); color: var(--text-heading); text-decoration: none; }
.mg-icon-btn .mg-i { width: 14px; height: 14px; }
.mg-icon-btn.danger { color: var(--danger); }
.mg-icon-btn.danger:hover { background: var(--danger-soft); }
.mg-icon-btn.success { color: var(--success); }
.mg-icon-btn.success:hover { background: var(--success-soft); }
.mg-icon-btn.soft { width: 36px; height: 36px; background: rgba(255, 255, 255, .8); border-color: var(--border-subtle); box-shadow: var(--shadow-xs); }
.mg-icon-btn.soft .mg-i { width: 16px; height: 16px; }
.mg-icon-btn.lg { width: 32px; height: 32px; }

.mg-error-page { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: clamp(48px, 10vh, 96px) 24px; }

/* Auth (sign in, reset password) */
.mg-auth { min-height: 100vh; background: var(--bg-page); display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; }
.mg-auth-card {
  width: 400px; max-width: 100%; box-sizing: border-box; background: var(--surface-raised); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: clamp(24px, 6vw, 36px) clamp(20px, 6vw, 32px);
  display: flex; flex-direction: column; gap: 18px;
}
.mg-auth-title { font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--text-heading); margin: 0; }
.mg-auth-title .dot, .mg-dot { color: var(--accent); }
.mg-auth-sub { font-size: 13px; line-height: 1.5; color: var(--text-muted); margin-top: 4px; }
.mg-auth .form-group { margin-bottom: 0; }
.mg-auth-card form { display: flex; flex-direction: column; gap: 18px; }
.mg-auth-fine { font-size: 11.5px; line-height: 1.5; color: var(--text-muted); }

/* ---- Bootstrap re-skin: cards ------------------------------------------ */
.card {
  background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs); margin-bottom: 20px; color: var(--text-body);
}
.mg-content .card:last-child { margin-bottom: 0; }
.card-header {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px; flex-wrap: wrap;
  padding: 16px 20px; background: transparent; border-bottom: 1px solid var(--border-subtle);
}
.card-header:first-child { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.card-header .card-title, .card-title { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--text-heading); letter-spacing: -.01em; }
.card-header > .btn:last-child, .card-header > .heading-elements, .card-header .ml-auto { margin-left: auto; }
.card-body { padding: 20px; }
.card-footer { padding: 12px 20px; background: transparent; border-top: 1px solid var(--border-subtle); }
.card-footer:last-child { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.card-subtitle { color: var(--text-muted) !important; font-size: 12.5px; }
.card > .table-responsive:first-child, .card > .table:first-child { border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; }
.card-company-table .card-body { padding: 0; }

/* ---- Tables + DataTables ------------------------------------------------ */
.table { width: 100%; margin-bottom: 0; color: var(--text-body); font-size: 13px; border-collapse: collapse; background: transparent; }
.table thead th, table.dataTable thead th, table.dataTable thead td {
  font-size: 11.5px; font-weight: 500; color: var(--text-muted); text-transform: none; letter-spacing: 0;
  padding: 10px 20px; background-color: var(--sand-50) !important; border: 0; border-bottom: 1px solid var(--border-subtle) !important;
  vertical-align: middle; white-space: nowrap;
}
.table td, .table th, table.dataTable tbody td, table.dataTable tbody th {
  padding: 12px 20px; border: 0; border-top: 0; border-bottom: 1px solid var(--border-subtle); vertical-align: middle;
}
.table td { color: var(--text-body); }
.table tbody tr:last-child td { border-bottom-color: var(--border-subtle); }
.table-bordered, .table-bordered td, .table-bordered th { border: 0; border-bottom: 1px solid var(--border-subtle); }
.table-striped tbody tr:nth-of-type(odd), table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd,
table.dataTable tbody tr, table.dataTable tbody tr.odd, table.dataTable tbody tr.even { background-color: transparent !important; }
.table tbody tr { transition: background var(--dur-fast); }
.table-hover tbody tr:hover, .table tbody tr:hover, table.dataTable tbody tr:hover { background-color: var(--sand-50) !important; }
.table-sm td, .table-sm th { padding: 8px 14px; }
.table .thead-light th, .table .thead-dark th { background: var(--sand-50); color: var(--text-muted); border-color: var(--border-subtle); }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.dataTable { border-collapse: collapse !important; margin: 0 !important; width: 100% !important; }
table.dataTable.no-footer { border-bottom: 0 !important; }
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled { background-repeat: no-repeat !important; background-position: center right 8px !important; background-size: 12px !important; padding-right: 26px; }
/* Lucide chevrons instead of DataTables' grey/blue PNG arrows: muted when sortable, accent when sorted */
table.dataTable thead .sorting { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B5B0C8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E") !important; }
table.dataTable thead .sorting_asc { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E22EE' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E") !important; color: var(--text-heading); }
table.dataTable thead .sorting_desc { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E22EE' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; color: var(--text-heading); }
table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled { background-image: none !important; padding-right: 20px; }

.dataTables_wrapper { position: relative; clear: both; font-size: 13px; color: var(--text-muted); }
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { padding: 12px 20px; color: var(--text-muted); font-size: 12.5px; }
.dataTables_wrapper .dataTables_length label, .dataTables_wrapper .dataTables_filter label { margin: 0; font-weight: 400; font-size: 12.5px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 8px; }
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select {
  height: 36px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); box-shadow: var(--shadow-xs);
  background-color: var(--surface-raised); color: var(--text-heading); font-family: inherit; font-size: 13.5px; outline: none; margin: 0 !important;
}
.dataTables_wrapper .dataTables_filter input { width: 260px; max-width: 60vw; padding: 0 12px 0 34px; background: var(--surface-raised) var(--search) 11px center / 15px no-repeat; }
.dataTables_wrapper .dataTables_length select { padding: 0 30px 0 10px; appearance: none; -webkit-appearance: none; background: var(--surface-raised) var(--chevron) right 9px center / 14px no-repeat; }
.dataTables_wrapper .dataTables_filter input:focus, .dataTables_wrapper .dataTables_length select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.dataTables_wrapper .dataTables_info { padding: 14px 20px !important; font-size: 12px; color: var(--text-muted) !important; }
.dataTables_wrapper .dataTables_paginate { padding: 10px 20px !important; display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.dataTables_wrapper .dataTables_paginate > span { display: inline-flex; gap: 6px; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  display: inline-flex !important; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 12px !important; margin: 0 !important;
  border-radius: var(--radius-sm) !important; border: 1px solid var(--border-subtle) !important; background: rgba(255, 255, 255, .85) !important;
  box-shadow: var(--shadow-sm); color: var(--text-heading) !important; font-size: 12.5px; font-weight: 500;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--sand-0) !important; box-shadow: var(--shadow-md); color: var(--text-heading) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; box-shadow: none;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  opacity: .45; cursor: not-allowed; box-shadow: none; background: rgba(255, 255, 255, .85) !important; color: var(--text-heading) !important;
}
.dataTables_wrapper .dataTables_paginate .ellipsis { padding: 0 4px; }
.dataTables_wrapper .dataTables_processing { background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-md); color: var(--text-heading); }
.dataTables_empty { color: var(--text-muted) !important; padding: 24px 20px !important; text-align: left !important; }
@media (max-width: 767.98px) {
  .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { float: none !important; text-align: left !important; }
  .dataTables_wrapper .dataTables_paginate { justify-content: flex-start; }
  .dataTables_wrapper .dataTables_length { padding-bottom: 0; }
  .dataTables_wrapper .dataTables_filter label, .dataTables_wrapper .dataTables_filter input { display: flex; width: 100%; max-width: none; }
}

/* Phone-width table cards (design "mobile cards"). The layout script adds .mg-cardify and data-label to
   each cell from its column header; tables can opt out with .mg-no-cards. */
@media (max-width: 640px) {
  .table.mg-cardify thead { display: none; }
  .table.mg-cardify, .table.mg-cardify tbody { display: block; width: 100%; }
  .table.mg-cardify tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 16px;
    padding: 14px 16px; border-bottom: 1px solid var(--border-subtle);
  }
  .table.mg-cardify tbody td {
    display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
    min-width: 0 !important; width: auto !important; /* beat inline desktop column widths */
    padding: 0 !important; border: 0 !important; text-align: left !important; overflow-wrap: anywhere; white-space: normal !important;
  }
  .table.mg-cardify tbody td::before { content: attr(data-label); font-family: var(--font-sans); font-size: 11px; color: var(--text-muted); font-weight: 400; letter-spacing: 0; }
  /* Cells holding buttons or nested lists need the full card width */
  .table.mg-cardify tbody td:has(.btn), .table.mg-cardify tbody td:has(> div > div + div) { grid-column: 1 / -1; }
  .table.mg-cardify tbody td > * { max-width: 100%; }
  /* Group header rows (e.g. a resident above their medicines) */
  .table.mg-cardify tbody tr:has(> td[colspan]):not(:has(> td.dataTables_empty)) { padding: 10px 16px; gap: 6px 16px; background: var(--sand-50); }
  .table.mg-cardify tbody tr:has(> td[colspan]) > td { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px; background: transparent !important; }
  .table.mg-cardify tbody tr:has(> td[colspan]) > td::before { display: none; }
  .table.mg-cardify tbody td[data-label=""]::before { display: none; }
  /* First cell is the card heading; group rows, empty states and action cells span the full width */
  .table.mg-cardify tbody td:first-child, .table.mg-cardify tbody td[colspan], .table.mg-cardify tbody td.text-right,
  .table.mg-cardify tbody td.dataTables_empty { grid-column: 1 / -1; }
  .table.mg-cardify tbody td:first-child::before { display: none; }
  .table.mg-cardify tbody td:first-child { font-size: 14px; }
  .table.mg-cardify tbody td.text-right { flex-direction: row; justify-content: flex-start; }
  .table.mg-cardify tbody td.text-right::before { display: none; }
  .table.mg-cardify tbody td.text-right .mg-actions { margin-left: -6px; }
  /* A leading checkbox column stays inline with the heading */
  .table.mg-cardify tbody td:first-child:has(> input[type="checkbox"]:only-child) { grid-column: auto; }
  .table-responsive:has(> .table.mg-cardify) { overflow-x: visible; }
}

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--control-h-md); padding: 0 18px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; line-height: 1.2; white-space: nowrap;
  box-shadow: none; text-transform: none; letter-spacing: 0; vertical-align: middle;
  transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out), color var(--dur-fast), border-color var(--dur-fast);
}
.btn:active:not(:disabled):not(.disabled) { transform: translateY(1px); }
.btn:focus, .btn.focus { outline: none; box-shadow: 0 0 0 3px var(--focus-ring) !important; }
.btn:disabled, .btn.disabled { opacity: .45; cursor: not-allowed; box-shadow: none !important; }
.btn .mg-i { width: 14px; height: 14px; }
.btn i.fa { font-size: 13px; }
.btn-sm, .btn-group-sm > .btn { min-height: var(--control-h-sm); padding: 0 14px; font-size: 12.5px; border-radius: var(--radius-sm); }
.btn-sm .mg-i { width: 13px; height: 13px; }
.btn-lg, .btn-group-lg > .btn { min-height: var(--control-h-lg); padding: 0 22px; font-size: 15px; border-radius: var(--radius-sm); }
.btn-lg .mg-i { width: 15px; height: 15px; }
.btn-block { display: flex; width: 100%; }

/* Variants. Vuexy sets button colours with !important, so these must too. */
.btn-primary, .btn-primary:not(:disabled):not(.disabled), .btn-primary:focus {
  background: var(--accent) !important; border-color: var(--accent) !important; color: var(--text-on-accent) !important; box-shadow: 0 1px 2px rgba(74, 18, 168, .25);
}
.btn-primary:hover:not(:disabled):not(.disabled) { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; color: #fff !important; box-shadow: var(--shadow-accent) !important; }
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active { background: var(--accent-press) !important; border-color: var(--accent-press) !important; color: #fff !important; }

.btn-secondary, .btn-light, .btn-default, .btn-white,
.btn-outline-primary, .btn-outline-secondary, .btn-outline-dark, .btn-outline-info, .btn-outline-light,
.btn-flat-primary, .btn-flat-secondary {
  background: rgba(255, 255, 255, .85) !important; color: var(--text-heading) !important; border-color: var(--border-subtle) !important; box-shadow: var(--shadow-sm);
}
.btn-secondary:hover:not(:disabled):not(.disabled), .btn-light:hover:not(:disabled):not(.disabled), .btn-default:hover:not(:disabled):not(.disabled), .btn-white:hover:not(:disabled):not(.disabled),
.btn-outline-primary:hover:not(:disabled):not(.disabled), .btn-outline-secondary:hover:not(:disabled):not(.disabled), .btn-outline-dark:hover:not(:disabled):not(.disabled),
.btn-outline-info:hover:not(:disabled):not(.disabled), .btn-outline-light:hover:not(:disabled):not(.disabled),
.btn-flat-primary:hover:not(:disabled):not(.disabled), .btn-flat-secondary:hover:not(:disabled):not(.disabled),
.btn-secondary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled):active {
  background: var(--sand-0) !important; color: var(--text-heading) !important; border-color: var(--border-subtle) !important; box-shadow: var(--shadow-md) !important;
}
.btn-outline-primary.active, .btn-outline-secondary.active, .btn-group-toggle .btn.active { background: var(--accent-soft) !important; color: var(--orange-700) !important; border-color: var(--orange-200) !important; }

.btn-ghost, .btn-flat-dark { background: transparent !important; color: var(--text-heading) !important; border-color: transparent !important; box-shadow: none; }
.btn-ghost:hover:not(:disabled), .btn-flat-dark:hover:not(:disabled) { background: rgba(30, 27, 51, .05) !important; }

.btn-dark, .btn-inverse { background: var(--ink-900) !important; border-color: var(--ink-900) !important; color: #fff !important; }
.btn-dark:hover:not(:disabled), .btn-inverse:hover:not(:disabled) { background: var(--ink-700) !important; border-color: var(--ink-700) !important; }

.btn-link, .btn-link:focus {
  background: transparent !important; border: 0 !important; min-height: 0; padding: 0; border-radius: 0; color: var(--text-heading) !important;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; box-shadow: none !important;
}
.btn-link:hover { color: var(--accent) !important; text-decoration: underline; }
.btn-link.btn-sm { font-size: 12.5px; min-height: 0; padding: 0; }

.btn-danger, .btn-flat-danger { background: var(--danger-soft) !important; border-color: transparent !important; color: var(--danger) !important; }
.btn-danger:hover:not(:disabled):not(.disabled), .btn-flat-danger:hover:not(:disabled) { background: var(--danger) !important; border-color: var(--danger) !important; color: #fff !important; }
.btn-success, .btn-flat-success { background: var(--success-soft) !important; border-color: transparent !important; color: var(--success) !important; }
.btn-success:hover:not(:disabled):not(.disabled), .btn-flat-success:hover:not(:disabled) { background: var(--success) !important; border-color: var(--success) !important; color: #fff !important; }
.btn-warning, .btn-flat-warning { background: var(--warning-soft) !important; border-color: transparent !important; color: var(--warning-text) !important; }
.btn-warning:hover:not(:disabled):not(.disabled), .btn-flat-warning:hover:not(:disabled) { background: var(--warning) !important; border-color: var(--warning) !important; color: #fff !important; }
.btn-info, .btn-flat-info { background: var(--info-soft) !important; border-color: transparent !important; color: var(--info) !important; }
.btn-info:hover:not(:disabled):not(.disabled), .btn-flat-info:hover:not(:disabled) { background: var(--info) !important; border-color: var(--info) !important; color: #fff !important; }
.btn-outline-danger { background: rgba(255, 255, 255, .85) !important; border-color: var(--border-subtle) !important; color: var(--danger) !important; box-shadow: var(--shadow-sm); }
.btn-outline-danger:hover:not(:disabled) { background: var(--danger-soft) !important; border-color: var(--danger-soft) !important; }
.btn-outline-success { background: rgba(255, 255, 255, .85) !important; border-color: var(--border-subtle) !important; color: var(--success) !important; box-shadow: var(--shadow-sm); }
.btn-outline-success:hover:not(:disabled) { background: var(--success-soft) !important; }
.btn-outline-warning { background: rgba(255, 255, 255, .85) !important; border-color: var(--border-subtle) !important; color: var(--warning-text) !important; box-shadow: var(--shadow-sm); }
.btn-outline-warning:hover:not(:disabled) { background: var(--warning-soft) !important; }

.btn-icon { padding: 0; width: var(--control-h-md); }
.btn-icon.btn-sm { width: var(--control-h-sm); }
.btn-group { gap: 4px; }
.btn-group > .btn:not(:first-child), .btn-group > .btn-group:not(:first-child) { margin-left: 0; }
.btn-group > .btn, .btn-group > .btn:not(:last-child):not(.dropdown-toggle), .btn-group > .btn:not(:first-child) { border-radius: var(--radius-sm); }
.waves-effect { overflow: visible; }

/* ---- Forms -------------------------------------------------------------- */
label, .col-form-label { font-size: 12.5px; font-weight: 500; color: var(--text-heading); margin-bottom: 6px; }
.form-check-label, .custom-control-label { font-size: 14px; font-weight: 400; margin-bottom: 0; }
.form-group { margin-bottom: 16px; }
.form-control, .custom-select, .custom-file-label {
  height: var(--control-h-md); padding: 0 14px; font-family: var(--font-sans); font-size: 14px; color: var(--text-heading);
  background-color: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs); transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.form-control::placeholder { color: var(--text-subtle); opacity: 1; }
.form-control:focus, .custom-select:focus {
  color: var(--text-heading); background-color: var(--surface-raised); border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); outline: none;
}
.form-control:disabled, .form-control[readonly], .custom-select:disabled { background-color: var(--sand-100); color: var(--text-body); opacity: 1; }
textarea.form-control { height: auto; min-height: 84px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
select.form-control, .custom-select {
  appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
  background: var(--surface-raised) var(--chevron) right 12px center / 15px no-repeat;
}
select.form-control[multiple], select.form-control[size] { height: auto; padding: 6px 10px; background-image: none; }
input[type="file"].form-control, .form-control-file { height: auto; padding: 8px 12px; font-size: 12.5px; }
/* Native file picker button styled as a design secondary button */
input[type="file"]::file-selector-button {
  height: 30px; padding: 0 12px; margin-right: 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  background: var(--sand-0); box-shadow: var(--shadow-xs); font-family: var(--font-sans); font-size: 12.5px; font-weight: 500;
  color: var(--text-heading); cursor: pointer; transition: box-shadow var(--dur-fast);
}
input[type="file"]::file-selector-button:hover { box-shadow: var(--shadow-sm); }
input[type="file"] { font-family: var(--font-sans); font-size: 12.5px; color: var(--text-muted); }
input[type="color"].form-control { padding: 4px; width: 56px; }
.form-control-sm { height: var(--control-h-sm); font-size: 13px; padding: 0 10px; }
.form-control-lg { height: var(--control-h-lg); font-size: 15px; }
.form-control.is-invalid, .was-validated .form-control:invalid { border-color: var(--danger); background-image: none; padding-right: 14px; }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(210, 68, 47, .2); }
.form-control.is-valid { border-color: var(--success); background-image: none; }
.invalid-feedback, .text-danger.small, span.text-danger, small.text-danger, .error { font-size: 12px; color: var(--danger) !important; }
.form-text, .help-block { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.input-group > .form-control { box-shadow: none; }
.input-group { box-shadow: var(--shadow-xs); border-radius: var(--radius-sm); flex-wrap: nowrap; }
.input-group-text { background: var(--sand-100); border-color: var(--border-default); color: var(--text-muted); font-size: 13px; }
.input-group-merge .form-control:not(:last-child) { border-right: 0; }
.input-group > .input-group-append > .btn, .input-group > .input-group-prepend > .btn { min-height: var(--control-h-md); box-shadow: none; }

input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
.mg-check { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 400; color: var(--text-heading); cursor: pointer; margin: 0; line-height: 1.4; }
.mg-check input[type="checkbox"], .mg-check input[type="radio"] { width: 16px; height: 16px; margin: 0; flex: none; cursor: pointer; }
.custom-control { min-height: 20px; padding-left: 28px; }
.custom-control-label::before, .custom-control-label::after { top: 1px; left: -28px; width: 18px; height: 18px; }
.custom-control-label::before { border: 1.25px solid var(--border-strong); background: var(--surface-raised); box-shadow: none; }
.custom-checkbox .custom-control-label::before { border-radius: var(--radius-xs); }
.custom-control-input:checked ~ .custom-control-label::before { border-color: var(--accent); background-color: var(--accent); box-shadow: none; }
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 3px var(--focus-ring); }
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: var(--accent); }
.custom-switch { padding-left: 46px; }
.custom-switch .custom-control-label::before { left: -46px; width: 36px; height: 20px; border-radius: 999px; border: 0; background: var(--sand-300); }
.custom-switch .custom-control-label::after { top: 3px; left: -44px; width: 16px; height: 16px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.custom-switch .custom-control-input:checked ~ .custom-control-label::after { transform: translateX(16px); background: #fff; }
.custom-switch .custom-control-label { padding-left: 0; line-height: 20px; } /* undo Vuexy's 3.5rem label indent */

/* Input with a leading icon and an optional trailing action (e.g. show password) */
.mg-input-icon { position: relative; display: flex; align-items: center; }
.mg-input-icon > .mg-i { position: absolute; left: 13px; width: 15px; height: 15px; color: var(--text-muted); pointer-events: none; z-index: 1; }
.mg-input-icon > .form-control { padding-left: 36px; }
.mg-input-icon > .form-control:not(:last-child) { padding-right: 44px; }
.mg-input-icon > .mg-input-action { position: absolute; right: 5px; }
.form-check { padding-left: 24px; }
.form-check-input { margin-top: 3px; margin-left: -24px; width: 16px; height: 16px; }

/* ---- Badges ------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 500; line-height: 1; white-space: nowrap; vertical-align: middle; letter-spacing: 0;
  background: var(--sand-200); color: var(--ink-700); text-transform: none;
}
.badge-dot::before { content: ''; width: 6px; height: 6px; border-radius: 99px; background: currentColor; flex: none; }
.badge-pill { border-radius: 999px; }
.badge-primary, .badge-light-primary, .badge-accent { background: var(--accent-soft); color: var(--orange-700); }
.badge-success, .badge-light-success { background: var(--success-soft); color: var(--success); }
.badge-warning, .badge-light-warning { background: var(--warning-soft); color: var(--warning-text); }
.badge-danger, .badge-light-danger { background: var(--danger-soft); color: var(--danger); }
.badge-info, .badge-light-info { background: var(--info-soft); color: var(--info); }
.badge-secondary, .badge-light-secondary, .badge-light, .badge-neutral { background: var(--sand-200); color: var(--ink-700); }
.badge-dark, .badge-solid { background: var(--accent); color: #fff; }
a.badge:hover { filter: brightness(.97); }

/* ---- Alerts ------------------------------------------------------------- */
.alert {
  border: 0; border-radius: var(--radius-md); padding: 12px 14px; font-size: 13px; line-height: 1.5;
  color: var(--ink-700) !important; background: var(--sand-100); box-shadow: none !important;
}
.alert .alert-body { padding: 0; }
.alert .alert-heading { font-size: 13.5px; font-weight: 600; color: var(--text-heading); padding: 0; margin-bottom: 4px; box-shadow: none; }
.alert-primary { background: var(--accent-soft) !important; }
.alert-success { background: var(--success-soft) !important; }
.alert-warning { background: var(--warning-soft) !important; }
.alert-danger { background: var(--danger-soft) !important; }
.alert-info { background: var(--info-soft) !important; }
.alert-secondary, .alert-light, .alert-dark { background: var(--sand-100) !important; }
.alert ul { margin: 0; padding-left: 18px; }

/* ---- Modals as right-hand drawers (design pattern) ---------------------- */
.modal-backdrop { background-color: #1E1B33; }
.modal-backdrop.show { opacity: .2; }
.modal .modal-dialog {
  position: fixed; top: 0; right: 0; bottom: 0; left: auto; margin: 0; width: 480px; max-width: 100%;
  height: 100%; min-height: 0; display: flex; pointer-events: none;
}
.modal .modal-dialog.modal-lg { width: 720px; }
.modal .modal-dialog.modal-xl { width: 960px; }
.modal.fade .modal-dialog { transform: translateX(100%); transition: transform .24s var(--ease-out); }
.modal.show .modal-dialog { transform: none; }
.modal .modal-content {
  flex: 1; height: 100%; border: 0; border-radius: 0; background: var(--surface-raised); color: var(--text-body);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; pointer-events: auto; overflow: hidden;
}
.modal .modal-content > form { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.modal-header {
  display: flex; align-items: flex-start; gap: 12px; padding: 22px 24px; border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-raised) !important; border-radius: 0;
}
.modal-title, .modal-header h4, .modal-header h5 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: var(--text-heading); line-height: 1.3; }
.modal-header .mg-subtitle, .modal-header .mg-modal-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }
.modal-header .close {
  margin: -4px -4px 0 auto; padding: 0; width: 32px; height: 32px; border-radius: 999px; opacity: 1;
  display: inline-flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 300; line-height: 1;
  color: var(--text-heading); text-shadow: none; background: transparent !important; box-shadow: none !important; transform: none !important;
}
.modal-header .close:hover { background: rgba(30, 27, 51, .06) !important; opacity: 1; }
.modal-body { flex: 1; overflow-y: auto; padding: 24px; }
.modal-footer {
  display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px;
  padding: 16px 24px; border-top: 1px solid var(--border-subtle); background: var(--surface-raised);
}
.modal-footer > * { margin: 0; }
/* Small modals stay centred dialogs (confirmations) */
.modal .modal-dialog.modal-sm { top: 50%; left: 50%; right: auto; bottom: auto; height: auto; width: 400px; max-width: calc(100% - 32px); }
.modal.fade .modal-dialog.modal-sm { transform: translate(-50%, -46%); transition: transform .2s var(--ease-out); }
.modal.show .modal-dialog.modal-sm { transform: translate(-50%, -50%); }
.modal .modal-dialog.modal-sm .modal-content { border-radius: var(--radius-xl); height: auto; }
body.modal-open { padding-right: 0 !important; }
/* Livewire-rendered modals (.modal.show.d-block inside @if) have no Bootstrap backdrop: give them their own scrim */
.modal.show.d-block { background: rgba(30, 27, 51, .2); overflow-y: auto; }

/* Round time-slot chips (care home rounds); background is an inline slot colour, so text stays dark */
.time-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 6px 0 10px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--ink-900) !important; border: 1px solid rgba(30, 27, 51, .08); }
.time-chip .close, .time-chip button { color: var(--ink-900); opacity: .6; font-size: 16px; line-height: 1; background: none; border: 0; padding: 0 2px; }
.time-colour-input { width: 28px; height: 28px; padding: 0; border: 1px solid var(--border-subtle); border-radius: 8px; background: none; cursor: pointer; flex: none; }
.time-colour-input::-webkit-color-swatch-wrapper { padding: 2px; }
.time-colour-input::-webkit-color-swatch { border: 0; border-radius: 6px; }

/* ---- Dropdowns, popovers, tooltips -------------------------------------- */
.dropdown-menu {
  background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: 12px; box-shadow: var(--shadow-md);
  padding: 6px; font-size: 13px; color: var(--text-body);
}
.dropdown-item { border-radius: var(--radius-sm); padding: 8px 10px; color: var(--text-heading); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--sand-100); color: var(--text-heading); }
.dropdown-item.active, .dropdown-item:active { background: var(--accent-soft); color: var(--orange-700); }
.dropdown-divider { border-color: var(--border-subtle); margin: 6px 0; }
.dropdown-header { font-size: 11.5px; color: var(--text-muted); }
.tooltip-inner { background: var(--ink-900); color: #fff; font-family: var(--font-sans); font-size: 11.5px; line-height: 1.45; padding: 8px 10px; border-radius: var(--radius-sm); max-width: 260px; text-align: left; }
.bs-tooltip-top .arrow::before { border-top-color: var(--ink-900); }
.bs-tooltip-bottom .arrow::before { border-bottom-color: var(--ink-900); }
.bs-tooltip-left .arrow::before { border-left-color: var(--ink-900); }
.bs-tooltip-right .arrow::before { border-right-color: var(--ink-900); }
.popover { border: 1px solid var(--border-subtle); border-radius: 12px; box-shadow: var(--shadow-md); font-family: var(--font-sans); }
.popover-header { background: var(--surface-raised); border-bottom: 1px solid var(--border-subtle); color: var(--text-heading); font-size: 13.5px; }

/* ---- Tabs, pills, pagination, list groups, progress --------------------- */
.nav-tabs, .nav-pills {
  display: inline-flex; flex-wrap: nowrap; gap: 2px; padding: 3px; margin-bottom: 20px; max-width: 100%; overflow-x: auto;
  background: var(--sand-200); border: 0; border-radius: var(--radius-md);
}
.nav-tabs .nav-item, .nav-pills .nav-item { margin: 0; }
.nav-tabs .nav-link, .nav-pills .nav-link {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border: 0 !important; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 500; color: var(--text-muted); background: transparent; white-space: nowrap; box-shadow: none;
}
.nav-tabs .nav-link::after, .nav-pills .nav-link::after { display: none !important; content: none !important; }
.nav-tabs .nav-link:hover, .nav-pills .nav-link:hover { color: var(--text-heading); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link, .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  background: var(--surface-raised) !important; color: var(--text-heading) !important; box-shadow: var(--shadow-sm) !important;
}
.tab-content > .tab-pane { min-width: 0; }

.pagination { gap: 6px; flex-wrap: wrap; margin: 0; }
.page-item .page-link, .page-item:first-child .page-link, .page-item:last-child .page-link {
  display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 12px; margin: 0;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm) !important; background: rgba(255, 255, 255, .85);
  color: var(--text-heading); font-size: 12.5px; font-weight: 500; box-shadow: var(--shadow-sm);
}
.page-item .page-link:hover { background: var(--sand-0); color: var(--text-heading); box-shadow: var(--shadow-md); }
.page-item.active .page-link { background: var(--accent) !important; border-color: var(--accent); color: #fff !important; box-shadow: none; }
.page-item.disabled .page-link { opacity: .45; background: rgba(255, 255, 255, .85); color: var(--text-heading); }
.page-link:focus { box-shadow: 0 0 0 3px var(--focus-ring); }

.list-group-item { border-color: var(--border-subtle); padding: 10px 14px; font-size: 13px; color: var(--text-heading); background: var(--surface-raised); }
.list-group-item:first-child { border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }
.list-group-item:last-child { border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }
.list-group-item.active { background: var(--accent-soft); color: var(--orange-700); border-color: var(--border-subtle); }
.list-group-item-action:hover { background: var(--sand-50); }

.progress { height: 8px; border-radius: 99px; background: var(--sand-200); box-shadow: none; }
.progress-bar { background-color: var(--accent); border-radius: 99px; }
.progress-bar.bg-success { background-color: var(--success) !important; }
.progress-bar.bg-warning { background-color: var(--warning) !important; }
.progress-bar.bg-danger { background-color: var(--danger) !important; }

.breadcrumb { background: transparent; padding: 0; margin: 0; font-size: 12.5px; }
.breadcrumb-item a { color: var(--text-muted); }
.breadcrumb-item.active { color: var(--text-heading); }

.close { color: var(--text-heading); text-shadow: none; opacity: .7; }
.close:hover { opacity: 1; }

.spinner-border { color: var(--accent); }

/* ---- Toastr → design Toast ---------------------------------------------- */
#toast-container > div, #toast-container > .toast {
  width: 340px !important; max-width: calc(100vw - 24px); box-sizing: border-box; opacity: 1 !important;
  padding: 14px 36px 14px 46px !important; margin: 0 0 10px !important;
  background: var(--surface-raised) !important; background-image: none !important; color: var(--text-heading) !important;
  border: 1px solid var(--border-subtle) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-md) !important;
  font-family: var(--font-sans); position: relative;
}
#toast-container > div:hover { box-shadow: var(--shadow-lg) !important; }
#toast-container > div::before {
  content: ''; position: absolute; left: 16px; top: 15px; width: 18px; height: 18px; background: var(--info);
  -webkit-mask: var(--ti) center / contain no-repeat; mask: var(--ti) center / contain no-repeat;
  --ti: url('https://unpkg.com/lucide-static@0.469.0/icons/info.svg');
}
#toast-container > .toast-success::before { background: var(--success); --ti: url('https://unpkg.com/lucide-static@0.469.0/icons/circle-check.svg'); }
#toast-container > .toast-error::before { background: var(--danger); --ti: url('https://unpkg.com/lucide-static@0.469.0/icons/circle-x.svg'); }
#toast-container > .toast-warning::before { background: var(--warning); --ti: url('https://unpkg.com/lucide-static@0.469.0/icons/triangle-alert.svg'); }
#toast-container .toast-title { font-size: 13.5px; font-weight: 500; color: var(--text-heading) !important; text-transform: none; }
#toast-container .toast-message { font-size: 12.5px; line-height: 1.45; color: var(--text-muted) !important; margin-top: 3px; }
#toast-container .toast-close-button { position: absolute; right: 12px; top: 12px; color: var(--text-subtle) !important; text-shadow: none; opacity: 1; font-weight: 400; font-size: 18px; }
#toast-container .toast-progress { background: var(--accent); opacity: .5; height: 2px; }
.toast-bottom-right { right: clamp(12px, 3vw, 24px) !important; bottom: clamp(12px, 3vw, 24px) !important; }

/* ---- Select2 ------------------------------------------------------------ */
.select2-container { font-family: var(--font-sans); }
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  min-height: var(--control-h-md); border: 1px solid var(--border-default) !important; border-radius: var(--radius-sm) !important;
  background: var(--surface-raised); box-shadow: var(--shadow-xs);
}
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 38px; padding-left: 14px; color: var(--text-heading); font-size: 14px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; right: 8px; }
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border: 0 !important; padding: 0 !important; width: 14px; height: 14px; left: 50%; top: 50%; margin: -7px 0 0 -7px;
  background: var(--chevron) center / 14px no-repeat !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered { padding: 6px 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 38px; box-sizing: border-box; }
.select2-container--default .select2-selection--multiple .select2-search--inline { flex: 1; }
.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field { padding-left: 6px; width: 100% !important; min-width: 120px; }
.select2-container--default .select2-search--inline .select2-search__field::placeholder { color: var(--text-subtle); }
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--focus-ring); }
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  display: inline-flex; align-items: center; gap: 4px; margin: 0; height: 26px; padding: 0 8px 0 10px; border: 0 !important;
  border-radius: 999px !important; background: var(--accent-soft) !important; color: var(--orange-700) !important; font-size: 12px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  position: static; order: 2; border: 0 !important; background: none !important; color: var(--orange-700) !important; padding: 0 !important; margin: 0 !important;
}
.select2-container--default .select2-search--inline .select2-search__field { margin: 0; height: 26px; font-family: inherit; font-size: 14px; color: var(--text-heading); }
.select2-dropdown { border: 1px solid var(--border-subtle) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-md); overflow: hidden; }
.select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid var(--border-default); border-radius: var(--radius-sm); height: 36px; padding: 0 10px; }
.select2-results__option { font-size: 13.5px; padding: 8px 12px; color: var(--text-heading); }
.select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background: var(--accent-soft) !important; color: var(--text-heading) !important;
}
.select2-container--default .select2-results__option[aria-selected=true], .select2-container--default .select2-results__option--selected { background: var(--sand-100); }

/* ---- Misc --------------------------------------------------------------- */
.avatar img { border-radius: 50%; }
.bordered-box { border: 1px solid var(--border-subtle) !important; border-radius: var(--radius-md); padding: 14px; overflow: hidden; }
.shadow, .shadow-sm, .box-shadow-1, .box-shadow-2 { box-shadow: var(--shadow-sm) !important; }
.rounded { border-radius: var(--radius-md) !important; }
[wire\:loading] { color: var(--text-muted); }
.loader, .spinner { border-top-color: var(--accent); }

@media print {
  .mg-sidebar, .mg-header, .mg-imp, #toast-container { display: none !important; }
  .mg-content { padding: 0; }
}