/*
 * Mushghal Unified UI 2026
 * A shared, responsive visual layer for tenant, platform, student and
 * representative surfaces. Functional selectors and page logic stay intact.
 */

:root {
  color-scheme: light;
  --ui-font: "Cairo", "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ui-bg: #f5f7fb;
  --ui-bg-soft: #eef2f9;
  --ui-surface: rgba(255, 255, 255, .94);
  --ui-surface-solid: #ffffff;
  --ui-surface-soft: #f8fafc;
  --ui-surface-hover: #f1f5f9;
  --ui-text: #111827;
  --ui-text-soft: #334155;
  --ui-muted: #718096;
  --ui-faint: #94a3b8;
  --ui-line: #dce4ef;
  --ui-line-strong: #cbd5e1;
  --ui-primary: #2563eb;
  --ui-primary-2: #7c3aed;
  --ui-primary-soft: #eaf1ff;
  --ui-primary-line: rgba(37, 99, 235, .24);
  --ui-success: #059669;
  --ui-success-soft: #e7f8f1;
  --ui-warning: #d97706;
  --ui-warning-soft: #fff7e6;
  --ui-danger: #e11d48;
  --ui-danger-soft: #fff0f3;
  --ui-info: #0891b2;
  --ui-radius-xs: 10px;
  --ui-radius-sm: 14px;
  --ui-radius: 18px;
  --ui-radius-lg: 24px;
  --ui-radius-xl: 30px;
  --ui-shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --ui-shadow-sm: 0 8px 24px -16px rgba(30, 41, 59, .24);
  --ui-shadow: 0 20px 50px -30px rgba(30, 41, 59, .30);
  --ui-shadow-lg: 0 30px 80px -42px rgba(30, 41, 59, .38);
  --ui-ring: 0 0 0 4px rgba(37, 99, 235, .13);
  --ui-gradient: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-2));
  --ui-transition: 180ms cubic-bezier(.2, .8, .2, 1);
}

html.dark,
html[data-theme="dark"] {
  color-scheme: dark;
  --ui-bg: #080e1b;
  --ui-bg-soft: #0d1526;
  --ui-surface: rgba(15, 23, 42, .92);
  --ui-surface-solid: #0f172a;
  --ui-surface-soft: #131e33;
  --ui-surface-hover: #19263d;
  --ui-text: #f8fafc;
  --ui-text-soft: #dbe4f0;
  --ui-muted: #94a3b8;
  --ui-faint: #718096;
  --ui-line: rgba(148, 163, 184, .18);
  --ui-line-strong: rgba(148, 163, 184, .30);
  --ui-primary: #60a5fa;
  --ui-primary-2: #a78bfa;
  --ui-primary-soft: rgba(96, 165, 250, .13);
  --ui-primary-line: rgba(96, 165, 250, .32);
  --ui-success: #34d399;
  --ui-success-soft: rgba(52, 211, 153, .13);
  --ui-warning: #fbbf24;
  --ui-warning-soft: rgba(251, 191, 36, .13);
  --ui-danger: #fb7185;
  --ui-danger-soft: rgba(251, 113, 133, .13);
  --ui-info: #22d3ee;
  --ui-shadow-xs: 0 1px 2px rgba(0, 0, 0, .22);
  --ui-shadow-sm: 0 10px 26px -16px rgba(0, 0, 0, .58);
  --ui-shadow: 0 24px 56px -30px rgba(0, 0, 0, .72);
  --ui-shadow-lg: 0 36px 90px -44px rgba(0, 0, 0, .86);
  --ui-ring: 0 0 0 4px rgba(96, 165, 250, .16);
}

html {
  min-width: 320px;
  background: var(--ui-bg);
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--ui-font);
  accent-color: var(--ui-primary);
  transition: background-color var(--ui-transition), color var(--ui-transition);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

::selection {
  color: #fff;
  background: color-mix(in srgb, var(--ui-primary) 82%, var(--ui-primary-2));
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ui-primary) !important;
  outline-offset: 2px;
  box-shadow: var(--ui-ring);
}

:where(button, a, input, select, textarea) {
  -webkit-tap-highlight-color: transparent;
}

:where(button, .btn, .icon-btn, a) {
  transition:
    color var(--ui-transition),
    background-color var(--ui-transition),
    border-color var(--ui-transition),
    box-shadow var(--ui-transition),
    transform var(--ui-transition),
    opacity var(--ui-transition);
}

:where(button, .btn):active {
  transform: translateY(1px);
}

img,
video,
canvas {
  max-width: 100%;
}

/* Shared scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ui-primary) 35%, var(--ui-line)) transparent;
}

*::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ui-primary) 28%, var(--ui-line-strong));
  background-clip: padding-box;
}

/* =====================================================================
   Tenant administration shell
   ===================================================================== */

body.authed {
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ui-text);
  background:
    radial-gradient(circle at 12% -8%, rgba(124, 58, 237, .09), transparent 29rem),
    radial-gradient(circle at 98% 4%, rgba(37, 99, 235, .11), transparent 32rem),
    var(--ui-bg) !important;
}

html.dark body.authed,
html[data-theme="dark"] body.authed {
  background:
    radial-gradient(circle at 8% -4%, rgba(124, 58, 237, .12), transparent 34rem),
    radial-gradient(circle at 100% 0%, rgba(37, 99, 235, .15), transparent 38rem),
    var(--ui-bg) !important;
}

body.authed .sidebar {
  color: var(--ui-text-soft) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-radius-xl) !important;
  background:
    linear-gradient(160deg, rgba(255,255,255,.96), rgba(248,250,252,.91)) !important;
  box-shadow: var(--ui-shadow-lg) !important;
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
}

html.dark body.authed .sidebar,
html[data-theme="dark"] body.authed .sidebar {
  background:
    linear-gradient(160deg, rgba(15,23,42,.97), rgba(10,17,32,.94)) !important;
}

body.authed .sidebar-brand {
  min-height: 66px;
  margin: 0 5px 12px;
  padding: 10px 11px 15px;
  border-bottom: 1px solid var(--ui-line);
}

body.authed .sidebar-logo {
  display: grid;
  width: 45px;
  height: 45px;
  place-items: center;
  border: 0 !important;
  border-radius: 15px !important;
  color: #fff !important;
  background: var(--ui-gradient) !important;
  box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--ui-primary) 72%, transparent);
}

body.authed .sidebar-title {
  color: var(--ui-text) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: -.015em;
}

body.authed .sidebar-sub,
body.authed .sidebar-hint {
  color: var(--ui-muted) !important;
}

body.authed .sidebar-nav {
  padding: 3px 4px 10px !important;
}

body.authed .nav-section {
  margin: 18px 12px 7px !important;
  color: var(--ui-faint) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .02em;
}

body.authed .sidebar-nav a,
body.authed .sidebar-nav button {
  min-height: 43px;
  margin-block: 3px;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  color: var(--ui-text-soft) !important;
}

body.authed .sidebar-nav a:hover,
body.authed .sidebar-nav button:hover {
  color: var(--ui-primary) !important;
  border-color: var(--ui-primary-line) !important;
  background: var(--ui-primary-soft) !important;
  transform: translateX(-2px);
}

body.authed .sidebar-nav a.active,
body.authed .sidebar-nav .active > a,
body.authed .sidebar-nav [aria-current="page"] {
  color: var(--ui-primary) !important;
  border-color: var(--ui-primary-line) !important;
  background:
    linear-gradient(135deg, var(--ui-primary-soft), color-mix(in srgb, var(--ui-primary-soft) 42%, transparent)) !important;
  box-shadow: inset -3px 0 0 var(--ui-primary), var(--ui-shadow-xs);
}

body.authed .sidebar-nav svg {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 1.8;
}

body.authed .sidebar-footer {
  margin-top: auto !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--ui-line);
}

body.authed .user-pill,
body.authed .tenant-sidebar-subscription {
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-radius) !important;
  background: color-mix(in srgb, var(--ui-surface-solid) 78%, transparent) !important;
  box-shadow: var(--ui-shadow-xs) !important;
}

body.authed .user-name,
body.authed .tenant-sidebar-subscription__head,
body.authed .tenant-sidebar-subscription__rows dt,
body.authed .tenant-sidebar-subscription__rows dd {
  color: var(--ui-text) !important;
}

body.authed .user-sub {
  color: var(--ui-muted) !important;
}

body.authed .main {
  min-width: 0;
}

body.authed .main > .topbar,
body.authed .student-shell > .topbar {
  z-index: 110 !important;
  min-height: 82px;
  gap: 14px;
  margin: 14px 16px 0 !important;
  padding: 13px 16px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-radius-lg) !important;
  color: var(--ui-text) !important;
  background: color-mix(in srgb, var(--ui-surface) 94%, transparent) !important;
  box-shadow: var(--ui-shadow) !important;
  backdrop-filter: blur(22px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
}

body.authed .top-title {
  color: var(--ui-text) !important;
  font-size: clamp(19px, 1.45vw, 27px) !important;
  font-weight: 900 !important;
  letter-spacing: -.025em;
}

body.authed .top-sub,
body.authed .breadcrumbs,
body.authed .breadcrumbs a {
  color: var(--ui-muted) !important;
}

body.authed .top-search {
  flex: 1 1 260px;
  max-width: 520px !important;
}

body.authed .top-search-input {
  min-height: 47px !important;
  padding-inline: 16px 42px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 15px !important;
  color: var(--ui-text) !important;
  background: var(--ui-surface-soft) !important;
  box-shadow: inset 0 1px 1px rgba(15,23,42,.025);
}

body.authed .top-search-input::placeholder {
  color: var(--ui-faint) !important;
}

body.authed .top-search-input:focus {
  border-color: var(--ui-primary) !important;
  background: var(--ui-surface-solid) !important;
  box-shadow: var(--ui-ring) !important;
}

body.authed .icon-btn,
body.authed .tp-trigger,
body.authed .user-menu-btn,
body.authed .qa-btn {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--ui-line) !important;
  border-radius: 14px !important;
  color: var(--ui-text-soft) !important;
  background: var(--ui-surface-solid) !important;
  box-shadow: var(--ui-shadow-xs) !important;
}

body.authed .icon-btn:hover,
body.authed .tp-trigger:hover,
body.authed .user-menu-btn:hover {
  color: var(--ui-primary) !important;
  border-color: var(--ui-primary-line) !important;
  background: var(--ui-primary-soft) !important;
  box-shadow: var(--ui-shadow-sm) !important;
  transform: translateY(-1px);
}

body.authed .tp-menu,
body.authed .qa-dd,
body.authed .user-menu-dd {
  padding: 8px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-radius) !important;
  color: var(--ui-text) !important;
  background: var(--ui-surface-solid) !important;
  box-shadow: var(--ui-shadow-lg) !important;
}

body.authed .tp-item,
body.authed .qa-item,
body.authed .user-menu-item {
  border-radius: 12px !important;
  color: var(--ui-text-soft) !important;
}

body.authed .tp-item:hover,
body.authed .qa-item:hover,
body.authed .user-menu-item:hover {
  color: var(--ui-primary) !important;
  background: var(--ui-primary-soft) !important;
}

body.authed .content {
  padding: 24px 16px 42px !important;
}

body.authed .content > .container {
  width: min(100%, 1600px) !important;
  max-width: 1600px !important;
  padding-inline: clamp(2px, 1.2vw, 20px) !important;
}

body.authed main :where(.card, .panel, .stat-card, .widget, .table-card, .form-card, .dashboard-card),
body.authed main :where(section, article)[class*="card"] {
  border-color: var(--ui-line) !important;
  color: var(--ui-text);
  background-color: var(--ui-surface-solid);
  box-shadow: var(--ui-shadow-sm);
}

body.authed main :where(.card, .panel, .stat-card, .widget, .table-card, .form-card, .dashboard-card):hover {
  border-color: color-mix(in srgb, var(--ui-primary) 22%, var(--ui-line)) !important;
}

body.authed main h1,
body.authed main h2,
body.authed main h3,
body.authed main h4 {
  color: var(--ui-text);
  letter-spacing: -.018em;
}

body.authed main :where(p, small, .muted, .help, .hint, .subtitle) {
  color: var(--ui-muted);
}

body.authed main :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: 45px;
  border-color: var(--ui-line-strong) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text) !important;
  background: var(--ui-surface-solid) !important;
}

body.authed main :where(input, textarea)::placeholder {
  color: var(--ui-faint) !important;
}

body.authed main :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
  border-color: var(--ui-primary) !important;
  box-shadow: var(--ui-ring) !important;
}

body.authed main :where(.btn, button[type="submit"], a.btn) {
  min-height: 43px;
  border-radius: var(--ui-radius-sm) !important;
  font-family: inherit;
  font-weight: 800;
}

body.authed main :where(.btn-primary, .primary, button[type="submit"]:not(.ghost):not(.danger)) {
  color: #fff !important;
  border-color: transparent !important;
  background: var(--ui-gradient) !important;
  box-shadow: 0 14px 28px -18px var(--ui-primary) !important;
}

body.authed main :where(.btn-primary, .primary, button[type="submit"]:not(.ghost):not(.danger)):hover {
  filter: saturate(1.08) brightness(1.03);
  transform: translateY(-1px);
}

body.authed main :where(table) {
  color: var(--ui-text);
}

body.authed main :where(th) {
  color: var(--ui-text-soft) !important;
  background: var(--ui-surface-soft) !important;
  border-color: var(--ui-line) !important;
}

body.authed main :where(td) {
  border-color: var(--ui-line) !important;
}

body.authed main tbody tr:hover {
  background: color-mix(in srgb, var(--ui-primary-soft) 58%, transparent) !important;
}

body.authed :where(.modal, .modal-card, .dialog, [role="dialog"]) {
  border-color: var(--ui-line) !important;
  color: var(--ui-text) !important;
  background: var(--ui-surface-solid) !important;
  box-shadow: var(--ui-shadow-lg) !important;
}

body.authed :where(.modal-backdrop, .backdrop) {
  background: rgba(4, 10, 24, .58) !important;
  backdrop-filter: blur(8px);
}

@media (min-width: 981px) {
  body.authed:not(.fs) .sidebar,
  body.theme-v4.authed:not(.fs) .sidebar,
  body.theme-laravel.authed:not(.fs) .sidebar,
  body.theme-shadcn.authed:not(.fs) .sidebar {
    top: 14px !important;
    right: 14px !important;
    bottom: 14px !important;
    width: 284px !important;
    max-height: calc(100dvh - 28px) !important;
  }

  body.authed:not(.fs) .main,
  body.theme-v4.authed:not(.fs) .main,
  body.theme-laravel.authed:not(.fs) .main,
  body.theme-shadcn.authed:not(.fs) .main {
    margin-right: 306px !important;
  }

  body.authed:not(.fs).sb-mini .sidebar {
    width: 90px !important;
  }

  body.authed:not(.fs).sb-mini .main {
    margin-right: 112px !important;
  }
}

/* =====================================================================
   SaaS / owner / client platform shell
   ===================================================================== */

body.neo2090 {
  --bg: var(--ui-bg);
  --bg-2: var(--ui-bg-soft);
  --surface: var(--ui-surface-solid);
  --surface-2: var(--ui-surface-soft);
  --elev: var(--ui-surface-solid);
  --ink: var(--ui-text);
  --ink-2: var(--ui-text-soft);
  --ink-3: var(--ui-muted);
  --line: var(--ui-line);
  --line-2: var(--ui-line-strong);
  --violet: var(--ui-primary-2);
  --violet-hi: color-mix(in srgb, var(--ui-primary-2) 80%, white);
  --violet-soft: color-mix(in srgb, var(--ui-primary-2) 12%, transparent);
  --violet-line: color-mix(in srgb, var(--ui-primary-2) 27%, transparent);
  --cyan: var(--ui-primary);
  --cyan-hi: color-mix(in srgb, var(--ui-primary) 78%, #22d3ee);
  --shadow-sm: var(--ui-shadow-sm);
  --shadow-md: var(--ui-shadow);
  --shadow-lg: var(--ui-shadow-lg);
  min-height: 100vh;
  color: var(--ui-text) !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(124,58,237,.11), transparent 34rem),
    radial-gradient(circle at 100% 8%, rgba(37,99,235,.12), transparent 38rem),
    var(--ui-bg) !important;
}

body.neo2090::before,
body.neo2090::after {
  opacity: .22 !important;
  pointer-events: none;
}

body.neo2090 .owner-shell {
  grid-template-columns: 282px minmax(0, 1fr) !important;
}

body.neo2090 .owner-sidebar {
  margin: 14px;
  height: calc(100dvh - 28px);
  padding: 18px 13px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-radius-xl) !important;
  color: var(--ui-text-soft) !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow-lg) !important;
  backdrop-filter: blur(22px) saturate(145%);
}

body.neo2090 .owner-sidebar .brand {
  min-height: 64px;
  padding: 9px 8px 16px !important;
  border-bottom: 1px solid var(--ui-line);
}

body.neo2090 .owner-sidebar .nav-link {
  min-height: 43px;
  margin: 3px 0;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  color: var(--ui-text-soft) !important;
}

body.neo2090 .owner-sidebar .nav-link:hover,
body.neo2090 .owner-sidebar .nav-link.active {
  color: var(--ui-primary) !important;
  border-color: var(--ui-primary-line) !important;
  background: var(--ui-primary-soft) !important;
}

body.neo2090 .owner-sidebar .nav-link.active {
  box-shadow: inset -3px 0 0 var(--ui-primary);
}

body.neo2090 .owner-main {
  min-width: 0;
  background: transparent !important;
}

body.neo2090 .owner-topbar,
body.neo2090 .public-top,
body.neo2090 .public-header {
  margin: 14px 14px 0 !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-radius-lg) !important;
  color: var(--ui-text) !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow) !important;
  backdrop-filter: blur(22px) saturate(145%);
}

body.neo2090 .owner-main main {
  width: min(100%, 1600px);
  padding: 24px clamp(12px, 2vw, 30px) 48px !important;
}

body.neo2090 :where(.card, .card-flat, .card-inset, .platform-card, .soft-card, .owner-card, .card-glow) {
  border-color: var(--ui-line) !important;
  border-radius: var(--ui-radius-lg) !important;
  color: var(--ui-text) !important;
  background: var(--ui-surface-solid) !important;
  box-shadow: var(--ui-shadow-sm) !important;
}

body.neo2090 :where(.card-hero, .platform-hero-2090) {
  overflow: hidden;
  border-color: var(--ui-primary-line) !important;
  border-radius: var(--ui-radius-xl) !important;
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--ui-primary-2) 18%, transparent), transparent 24rem),
    linear-gradient(145deg, var(--ui-surface-solid), var(--ui-surface-soft)) !important;
  box-shadow: var(--ui-shadow) !important;
}

body.neo2090 :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .field) {
  min-height: 45px;
  border-color: var(--ui-line-strong) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-text) !important;
  background: var(--ui-surface-solid) !important;
}

body.neo2090 :where(input, textarea)::placeholder {
  color: var(--ui-faint) !important;
}

body.neo2090 :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
  border-color: var(--ui-primary) !important;
  box-shadow: var(--ui-ring) !important;
}

body.neo2090 :where(.btn, button, a[class*="btn"]) {
  min-height: 42px;
  border-radius: var(--ui-radius-sm) !important;
  font-family: inherit;
}

body.neo2090 :where(.btn-primary, .public-cta) {
  color: #fff !important;
  background: var(--ui-gradient) !important;
  box-shadow: 0 16px 34px -20px var(--ui-primary) !important;
}

body.neo2090 table {
  color: var(--ui-text);
}

body.neo2090 th {
  color: var(--ui-text-soft) !important;
  background: var(--ui-surface-soft) !important;
}

body.neo2090 :where(th, td) {
  border-color: var(--ui-line) !important;
}

/* =====================================================================
   Representative, student and booking portals
   ===================================================================== */

body.rep-body,
body:has(> .student-portal-aux),
body:has(> .portal-shell) {
  --rep-green: var(--ui-primary);
  --rep-deep: #1e40af;
  --rep-soft: var(--ui-primary-soft);
  --rep-line: var(--ui-line);
  --rep-ink: var(--ui-text);
  --rep-muted: var(--ui-muted);
  --bk-body: var(--ui-bg);
  --bk-card: var(--ui-surface-solid);
  --bk-ink: var(--ui-text);
  --bk-muted: var(--ui-muted);
  --bk-line: var(--ui-line);
  --bk-green: var(--ui-primary);
  --bk-green-dark: #1d4ed8;
  --bk-green-deep: #1e3a8a;
  --bk-green-pale: var(--ui-primary-soft);
  --bk-green-wash: color-mix(in srgb, var(--ui-primary-soft) 60%, transparent);
  --bk-shadow: var(--ui-shadow);
  --bk-shadow-soft: var(--ui-shadow-sm);
  color: var(--ui-text) !important;
  background:
    radial-gradient(circle at 4% 0%, rgba(124,58,237,.10), transparent 32rem),
    radial-gradient(circle at 100% 0%, rgba(37,99,235,.11), transparent 34rem),
    var(--ui-bg) !important;
}

body.rep-body :where(.rep-sidebar, .mn-side, .portal-sidebar),
.student-portal-aux > .sidebar {
  border-color: var(--ui-line) !important;
  color: var(--ui-text-soft) !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow-lg) !important;
  backdrop-filter: blur(22px);
}

body.rep-body :where(.mn-top, .rep-topbar, .portal-topbar),
.student-portal-aux .topbar {
  border-color: var(--ui-line) !important;
  color: var(--ui-text) !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow-sm) !important;
  backdrop-filter: blur(20px);
}

body.rep-body :where(.mn-card, .rep-card, .portal-card, section[class*="card"]),
.student-portal-aux :where(.card, section[class*="card"]) {
  border-color: var(--ui-line) !important;
  color: var(--ui-text) !important;
  background-color: var(--ui-surface-solid) !important;
  box-shadow: var(--ui-shadow-sm) !important;
}

body.rep-body :where(input, select, textarea),
.student-portal-aux :where(input, select, textarea) {
  border-color: var(--ui-line-strong) !important;
  color: var(--ui-text) !important;
  background: var(--ui-surface-solid) !important;
}

body.rep-body :where(input, select, textarea):focus,
.student-portal-aux :where(input, select, textarea):focus {
  border-color: var(--ui-primary) !important;
  box-shadow: var(--ui-ring) !important;
}

/* Standalone public/account surfaces */
body.mushghal-standalone {
  min-height: 100vh;
  color: var(--ui-text) !important;
  background:
    radial-gradient(circle at 5% -5%, rgba(124,58,237,.10), transparent 32rem),
    radial-gradient(circle at 100% 0%, rgba(37,99,235,.12), transparent 35rem),
    var(--ui-bg) !important;
}

body.mushghal-standalone :where(.wrap, .page, main) {
  max-width: min(100%, 1440px);
}

body.mushghal-standalone :where(.card, .sheet, .hero, .status, [class*="-card"], [class*="-sheet"]) {
  border-color: var(--ui-line) !important;
  color: var(--ui-text) !important;
  background: var(--ui-surface-solid) !important;
  box-shadow: var(--ui-shadow) !important;
}

body.mushghal-standalone :where(input, select, textarea) {
  border-color: var(--ui-line-strong) !important;
  color: var(--ui-text) !important;
  background: var(--ui-surface-solid) !important;
}

body.mushghal-standalone :where(input, select, textarea):focus {
  border-color: var(--ui-primary) !important;
  box-shadow: var(--ui-ring) !important;
}

body.mushghal-standalone :where(h1, h2, h3, h4, label, strong, b) {
  color: var(--ui-text);
}

body.mushghal-standalone :where(p, small, .muted, .subtitle, .hint) {
  color: var(--ui-muted) !important;
}

body.student-booking-status {
  --ink: var(--ui-text);
  --canvas: var(--ui-bg);
  --canvas-2: var(--ui-bg-soft);
  --surface: var(--ui-surface-solid);
  --surface-soft: var(--ui-surface-soft);
  --surface-warm: var(--ui-surface-solid);
  --line: var(--ui-line);
  --line-cool: var(--ui-line-strong);
  --muted: var(--ui-muted);
  --faint: var(--ui-faint);
  --blue: var(--ui-primary);
  --blue-soft: var(--ui-primary-soft);
  --green: var(--ui-success);
  --green-soft: var(--ui-success-soft);
  --rose: var(--ui-danger);
  --shadow-xl: var(--ui-shadow-lg);
  --shadow-lg: var(--ui-shadow);
  --shadow-md: var(--ui-shadow-sm);
}

body.client-profile-page {
  --bg: var(--ui-bg);
  --card: var(--ui-surface-solid);
  --card2: var(--ui-surface-soft);
  --line: var(--ui-line);
  --muted: var(--ui-muted);
  --text: var(--ui-text);
  --green: var(--ui-primary);
  --green2: var(--ui-primary-2);
}

/* Theme control for standalone pages that have no existing switch */
.mushghal-ui-theme-toggle {
  position: fixed;
  z-index: 99990;
  left: max(18px, env(safe-area-inset-left));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: grid;
  width: 48px;
  height: 48px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  color: var(--ui-text-soft);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow);
  backdrop-filter: blur(18px);
  cursor: pointer;
}

.mushghal-ui-theme-toggle:hover {
  color: var(--ui-primary);
  border-color: var(--ui-primary-line);
  background: var(--ui-primary-soft);
  transform: translateY(-2px);
}

.mushghal-ui-theme-toggle svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mushghal-ui-theme-toggle .ui-sun,
html.dark .mushghal-ui-theme-toggle .ui-moon,
html[data-theme="dark"] .mushghal-ui-theme-toggle .ui-moon {
  display: none;
}

html.dark .mushghal-ui-theme-toggle .ui-sun,
html[data-theme="dark"] .mushghal-ui-theme-toggle .ui-sun {
  display: block;
}

.mushghal-table-scroll,
.table-responsive,
.table-wrap,
.overflow-x-auto {
  max-width: 100%;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

/* =====================================================================
   Responsive rules shared by every surface
   ===================================================================== */

@media (max-width: 1280px) {
  body.authed .tp-label {
    display: none !important;
  }

  body.authed .theme-picker .tp-trigger {
    min-width: 118px !important;
  }

  body.neo2090 .owner-shell {
    grid-template-columns: 258px minmax(0, 1fr) !important;
  }
}

@media (max-width: 1100px) and (min-width: 981px) {
  body.authed:not(.fs) .sidebar {
    width: 258px !important;
  }

  body.authed:not(.fs) .main {
    margin-right: 280px !important;
  }

  body.authed .top-search {
    max-width: 320px !important;
  }

  body.authed .user-menu-name {
    display: none !important;
  }
}

@media (max-width: 980px) {
  body.authed {
    padding: 0;
  }

  body.authed .sidebar {
    top: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    width: min(86vw, 310px) !important;
    height: calc(100dvh - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    border-radius: 24px !important;
    transform: translateX(calc(100% + 28px));
    transition: transform 240ms cubic-bezier(.2,.8,.2,1) !important;
  }

  body.authed.sidebar-open .sidebar {
    transform: translateX(0);
  }

  body.authed::after {
    position: fixed;
    z-index: 180;
    inset: 0;
    content: "";
    visibility: hidden;
    opacity: 0;
    background: rgba(3, 8, 20, .48);
    backdrop-filter: blur(4px);
    transition: opacity var(--ui-transition), visibility var(--ui-transition);
    pointer-events: none;
  }

  body.authed.sidebar-open::after {
    visibility: visible;
    opacity: 1;
  }

  body.authed .main,
  body.authed .student-shell {
    width: 100% !important;
    margin: 0 !important;
  }

  body.authed .main > .topbar,
  body.authed .student-shell > .topbar,
  body.theme-v4.authed:not(.fs) .main > .topbar,
  body.theme-laravel.authed:not(.fs) .main > .topbar,
  body.theme-shadcn.authed:not(.fs) .main > .topbar {
    position: sticky !important;
    top: 8px !important;
    display: flex !important;
    min-height: 70px;
    margin: 8px !important;
    padding: 10px 12px !important;
    border-radius: 20px !important;
  }

  body.authed .sidebar-toggle {
    display: inline-grid !important;
    flex: 0 0 44px;
    place-items: center;
  }

  body.authed .sidebar .sidebar-nav {
    display: block !important;
    flex: 0 1 auto !important;
    width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    white-space: normal !important;
  }

  body.authed .sidebar .sidebar-nav a,
  body.authed .sidebar .sidebar-nav button {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }

  body.authed .topbar-titles {
    flex: 1 1 160px;
    min-width: 0;
  }

  body.authed .top-title {
    overflow: hidden;
    font-size: 18px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.authed .top-sub,
  body.authed .breadcrumbs {
    display: none !important;
  }

  body.authed .top-search,
  body.authed .theme-picker {
    display: none !important;
  }

  body.authed .topbar-actions {
    gap: 6px !important;
  }

  body.authed .topbar-actions > :not(.mode-btn):not(.icon-wrap):not(.user-menu):not(.qa-menu) {
    display: none;
  }

  body.authed .content {
    padding: 12px 8px 34px !important;
  }

  body.authed .content > .container {
    padding-inline: 0 !important;
  }

  body.neo2090 .owner-shell {
    display: block !important;
  }

  body.neo2090 .owner-sidebar {
    position: relative !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    margin: 8px !important;
    padding: 10px !important;
    overflow: hidden !important;
    border-radius: 20px !important;
  }

  body.neo2090 .owner-sidebar nav {
    display: flex !important;
    gap: 7px !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
    white-space: nowrap !important;
  }

  body.neo2090 .owner-sidebar .nav-link {
    flex: 0 0 auto;
    padding-inline: 13px !important;
  }

  body.neo2090 .owner-topbar,
  body.neo2090 .public-top,
  body.neo2090 .public-header {
    position: relative !important;
    top: auto !important;
    margin: 8px !important;
    padding: 12px !important;
    border-radius: 20px !important;
  }

  body.neo2090 .owner-main main,
  body.neo2090 > main {
    width: 100% !important;
    padding: 12px 8px 34px !important;
    overflow-x: hidden;
  }

  body.neo2090 :where(.grid-cols-2, .grid-cols-3, .grid-cols-4, .grid-cols-5),
  body.neo2090 [class*="md:grid-cols"],
  body.neo2090 [class*="lg:grid-cols"],
  body.neo2090 [class*="xl:grid-cols"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.rep-body :where(.mn-content, .rep-content, .portal-content) {
    padding-inline: 10px !important;
  }

  body.rep-body :where(.mn-card, .rep-card, .portal-card, section[class*="card"]) {
    border-radius: 20px !important;
  }
}

@media (max-width: 720px) {
  :root {
    --ui-radius: 16px;
    --ui-radius-lg: 20px;
    --ui-radius-xl: 24px;
  }

  body.authed main :where(.grid, [class*="grid-cols"]) {
    min-width: 0;
  }

  body.authed main :where(.grid-cols-2, .grid-cols-3, .grid-cols-4, .grid-cols-5),
  body.authed main [class*="md:grid-cols"],
  body.authed main [class*="lg:grid-cols"],
  body.authed main [class*="xl:grid-cols"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.authed main :where(.card, .panel, .widget, section[class*="card"]) {
    border-radius: 18px !important;
  }

  body.authed main :where(.flex, .actions, .toolbar) {
    max-width: 100%;
  }

  body.authed main :where(.actions, .toolbar) {
    flex-wrap: wrap;
  }

  body.authed main :where(table),
  body.neo2090 :where(table) {
    min-width: 680px;
  }

  body.authed main :where(.overflow-x-auto, .table-wrap, .table-responsive),
  body.neo2090 :where(.overflow-x-auto, .table-wrap, .table-responsive) {
    overflow-x: auto !important;
    border-radius: 15px;
  }

  body.mushghal-standalone {
    padding: 12px !important;
  }

  body.mushghal-standalone :where(.hero, .grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .mushghal-ui-theme-toggle {
    left: 12px;
    bottom: 12px;
    width: 46px;
    height: 46px;
    border-radius: 15px;
  }
}

@media (max-width: 520px) {
  body.authed .main > .topbar,
  body.authed .student-shell > .topbar {
    gap: 7px;
  }

  body.authed .topbar-actions .qa-menu,
  body.authed .topbar-actions .icon-wrap {
    display: none !important;
  }

  body.authed .icon-btn,
  body.authed .user-menu-btn {
    min-width: 42px;
    min-height: 42px;
  }

  body.authed main :where(.btn, button[type="submit"], a.btn),
  body.neo2090 :where(.btn, button, a[class*="btn"]) {
    min-height: 44px;
  }

  body.authed main :where(h1) {
    font-size: clamp(23px, 7vw, 30px) !important;
  }

  body.authed main :where(h2) {
    font-size: clamp(18px, 5.8vw, 24px) !important;
  }
}

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

@media print {
  .mushghal-ui-theme-toggle,
  .no-print {
    display: none !important;
  }

  html,
  body {
    color-scheme: light !important;
    background: #fff !important;
  }
}

/* ========================================================================== 
   Mushghal unified UI — reference edition 03
   Borderless black navigation, spacious dashboard and clean filter controls.
   ========================================================================== */

/* The navigation is a single uninterrupted black surface. */
html body.authed:not(.fs) .sidebar,
html body.theme-v4.authed:not(.fs) .sidebar,
html body.theme-laravel.authed:not(.fs) .sidebar,
html body.theme-shadcn.authed:not(.fs) .sidebar,
html.dark body.authed:not(.fs) .sidebar,
html[data-theme="dark"] body.authed:not(.fs) .sidebar {
  border: 0 !important;
  border-radius: 0 !important;
  background: #101111 !important;
  box-shadow: none !important;
}

body.authed .sidebar-brand,
body.authed .sidebar .sb-brand,
body.authed .sidebar-footer {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.authed .sidebar-brand {
  min-height: 100px !important;
  margin: 0 14px 16px !important;
  padding: 20px 2px 16px !important;
}

body.authed .sidebar .sidebar-logo,
body.authed .sidebar .sb-mini-btn {
  border: 0 !important;
  color: #f7f8f8 !important;
  background: #1b1d1d !important;
  box-shadow: none !important;
}

body.authed .sidebar .sidebar-logo {
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
}

body.authed .sidebar .sb-mini-btn {
  width: 46px !important;
  height: 46px !important;
  border-radius: 13px !important;
}

body.authed .sidebar-nav {
  padding-inline: 14px !important;
}

body.authed .sidebar-nav :where(.nav-item, .nav-sub-item, .nav-group-toggle),
html body.theme-v4.authed:not(.fs) .sidebar .sidebar-nav :where(a, button),
html body.theme-laravel.authed:not(.fs) .sidebar .sidebar-nav :where(a, button),
html body.theme-shadcn.authed:not(.fs) .sidebar .sidebar-nav :where(a, button) {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.authed .sidebar-nav :where(.nav-item, .nav-sub-item, .nav-group-toggle) :where(.ni, svg),
body.authed .sidebar-nav :where(.nav-item, .nav-sub-item, .nav-group-toggle)::before,
body.authed .sidebar-nav :where(.nav-item, .nav-sub-item, .nav-group-toggle)::after {
  border-color: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

body.authed .sidebar-nav :where(.nav-item, .nav-sub-item, .nav-group-toggle):hover {
  border: 0 !important;
  color: #fff !important;
  background: #181a1a !important;
  box-shadow: none !important;
}

/* A direct page is green; an expanded group is only a quiet dark row. */
html body.theme-v4.authed:not(.fs) .sidebar .sidebar-nav a.nav-item.active,
html body.theme-laravel.authed:not(.fs) .sidebar .sidebar-nav a.nav-item.active,
html body.theme-shadcn.authed:not(.fs) .sidebar .sidebar-nav a.nav-item.active,
body.authed .sidebar-nav a.nav-item.active,
body.authed .sidebar-nav a.nav-item[aria-current="page"] {
  border: 0 !important;
  border-radius: 16px !important;
  color: #fff !important;
  background: var(--ui-gradient) !important;
  box-shadow: 0 15px 28px -19px rgba(91, 177, 0, .92) !important;
}

html body.theme-v4.authed:not(.fs) .sidebar .sidebar-nav button.nav-group-toggle.active,
html body.theme-laravel.authed:not(.fs) .sidebar .sidebar-nav button.nav-group-toggle.active,
html body.theme-shadcn.authed:not(.fs) .sidebar .sidebar-nav button.nav-group-toggle.active,
body.authed .sidebar-nav button.nav-group-toggle.active {
  border: 0 !important;
  border-radius: 14px !important;
  color: #f7f8f8 !important;
  background: #191b1b !important;
  box-shadow: none !important;
}

html body.theme-v4.authed:not(.fs) .sidebar .sidebar-nav a.nav-sub-item.active,
html body.theme-laravel.authed:not(.fs) .sidebar .sidebar-nav a.nav-sub-item.active,
html body.theme-shadcn.authed:not(.fs) .sidebar .sidebar-nav a.nav-sub-item.active,
body.authed .sidebar-nav a.nav-sub-item.active {
  border: 0 !important;
  color: #fff !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.authed .sidebar-nav .nav-submenu {
  margin-inline: 0 !important;
  padding-inline: 8px 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.authed .sidebar .user-pill,
body.authed .sidebar .tenant-sidebar-subscription,
body.authed .sidebar .tenant-sidebar-subscription__status,
body.authed .sidebar .tenant-sidebar-subscription__badge {
  border: 0 !important;
  box-shadow: none !important;
}

body.authed .sidebar {
  scrollbar-color: rgba(255,255,255,.18) transparent;
  scrollbar-width: thin;
}

body.authed .sidebar::-webkit-scrollbar { width: 7px; }
body.authed .sidebar::-webkit-scrollbar-track { background: transparent; }
body.authed .sidebar::-webkit-scrollbar-thumb {
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
}

/* Maximise the useful dashboard canvas without narrowing its sections. */
body.authed .content {
  padding-inline: 12px !important;
}

body.authed .content > .container {
  padding-inline: 0 !important;
}

body.authed .dashboard-page {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(20px, 1.45vw, 28px) !important;
  border: 0 !important;
  background: var(--ui-surface-solid) !important;
  box-shadow: 0 24px 54px -40px rgba(15,23,42,.30) !important;
}

body.authed .dashboard-page .dash-grid {
  grid-template-columns: minmax(340px, .76fr) minmax(0, 1.62fr) !important;
}

/* Borderless filter/search toolbar on the fast additions screen. */
body.authed .fast-additions {
  width: 100% !important;
  max-width: none !important;
  border: 0 !important;
}

body.authed .fast-additions .fast-tabs,
body.authed .fast-additions .toolbar,
body.authed .fast-additions .lv-toolbar-grid,
body.authed .fast-additions .lv-toolbar-grid > .field,
body.authed .fast-additions .lv-inline,
body.authed .fast-additions .rectangle-addition-filter,
body.authed .fast-additions .addition-filter-inline,
body.authed .fast-additions .toggle,
body.authed .fast-additions .colmenu {
  border: 0 !important;
  box-shadow: none !important;
}

body.authed .fast-additions .toolbar,
body.authed .fast-additions .lv-toolbar-grid,
body.authed .fast-additions .lv-toolbar-grid > .field {
  background: transparent !important;
}

body.authed .fast-additions .toolbar {
  padding: 0 !important;
}

body.authed .fast-additions .lv-toolbar-grid {
  gap: 14px !important;
  align-items: end !important;
}

body.authed .fast-additions .lv-toolbar-grid > .field {
  padding: 0 !important;
}

body.authed .fast-additions .lv-inline,
body.authed .fast-additions .rectangle-addition-filter,
body.authed .fast-additions .addition-filter-inline,
body.authed .fast-additions .lv-toolbar-grid > .lv-sort > select,
body.authed .fast-additions .toggle,
body.authed .fast-additions #colMenuBtn,
body.authed .fast-additions .lv-reset > .btn {
  border: 0 !important;
  border-radius: 15px !important;
  background: var(--ui-surface-soft) !important;
  box-shadow: none !important;
}

body.authed .fast-additions .lv-inline {
  min-height: 54px !important;
  padding: 6px !important;
}

body.authed .fast-additions .rectangle-addition-filter,
body.authed .fast-additions .addition-filter-inline {
  min-height: 54px !important;
  height: 54px !important;
  padding-inline: 13px !important;
}

body.authed .fast-additions .lv-toolbar-grid :where(input:not([type="checkbox"]), select),
body.authed .fast-additions .rectangle-addition-filter input,
body.authed .fast-additions .addition-filter-inline input {
  min-height: 42px !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.authed .fast-additions .lv-toolbar-grid > .lv-sort > select {
  min-height: 54px !important;
  padding-inline: 14px !important;
}

body.authed .fast-additions .lv-toolbar-grid :where(.btn, button),
body.authed .fast-additions .fast-tab-btn {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

body.authed .fast-additions .lv-toolbar-grid .btn.gray,
body.authed .fast-additions .lv-toolbar-grid button.gray,
body.authed .fast-additions .lv-quick-links .btn.gray {
  color: var(--ui-text) !important;
  background: var(--ui-surface-soft) !important;
}

body.authed .fast-additions .lv-apply > .btn.primary {
  border: 0 !important;
  background: var(--ui-gradient) !important;
  box-shadow: 0 14px 28px -19px rgba(91,177,0,.86) !important;
}

body.authed .fast-additions .lv-reset > .btn,
body.authed .fast-additions .lv-apply > .btn,
body.authed .fast-additions .toggle,
body.authed .fast-additions #colMenuBtn {
  width: 100% !important;
  min-height: 54px !important;
}

body.authed .fast-additions :where(.lv-inline, .rectangle-addition-filter, .addition-filter-inline):focus-within,
body.authed .fast-additions .lv-toolbar-grid > .lv-sort > select:focus-visible,
body.authed .fast-additions .lv-toolbar-grid :where(.btn, button):focus-visible {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(99, 179, 9, .18) !important;
}

body.authed .fast-additions .fast-tabs {
  padding: 6px !important;
  background: var(--ui-surface-soft) !important;
}

body.authed .fast-additions .fast-tab-btn {
  background: transparent !important;
}

body.authed .fast-additions .fast-tab-btn.active {
  color: #fff !important;
  background: var(--ui-gradient) !important;
}

html.dark body.authed .fast-additions :where(.lv-inline, .rectangle-addition-filter, .addition-filter-inline),
html[data-theme="dark"] body.authed .fast-additions :where(.lv-inline, .rectangle-addition-filter, .addition-filter-inline),
html.dark body.authed .fast-additions .lv-toolbar-grid > .lv-sort > select,
html[data-theme="dark"] body.authed .fast-additions .lv-toolbar-grid > .lv-sort > select,
html.dark body.authed .fast-additions :where(.toggle, #colMenuBtn, .lv-reset > .btn),
html[data-theme="dark"] body.authed .fast-additions :where(.toggle, #colMenuBtn, .lv-reset > .btn) {
  border: 0 !important;
  background: #171b1c !important;
  box-shadow: none !important;
}

/* The same borderless navigation language for platform and portal shells. */
body.neo2090 .owner-sidebar,
html body.neo2090 .owner-sidebar .brand,
body.neo2090 .owner-sidebar .nav-link,
body.rep-body :where(.mn-side, .rep-sidebar, .portal-sidebar),
.student-portal-aux > .sidebar,
body.rep-body :where(.mn-nav a, .mn-nav button, .rep-nav a, .portal-nav a),
.student-portal-aux > .sidebar .nav button {
  border: 0 !important;
  box-shadow: none !important;
}

body.neo2090 .owner-sidebar,
body.rep-body :where(.mn-side, .rep-sidebar, .portal-sidebar),
.student-portal-aux > .sidebar {
  border-radius: 0 !important;
  background: #101111 !important;
}

body.neo2090 .owner-sidebar .nav-link:hover,
body.rep-body :where(.mn-nav a, .mn-nav button, .rep-nav a, .portal-nav a):hover,
.student-portal-aux > .sidebar .nav button:hover {
  border: 0 !important;
  background: #181a1a !important;
  box-shadow: none !important;
}

body.neo2090 .owner-sidebar .nav-link.active,
body.rep-body :where(.mn-nav .active, .mn-nav .is-active, .rep-nav .active, .portal-nav .active),
.student-portal-aux > .sidebar .nav button.active {
  border: 0 !important;
  color: #fff !important;
  background: var(--ui-gradient) !important;
  box-shadow: 0 15px 28px -19px rgba(91,177,0,.90) !important;
}

@media (min-width: 981px) {
  body.authed:not(.fs) .sidebar,
  body.theme-v4.authed:not(.fs) .sidebar,
  body.theme-laravel.authed:not(.fs) .sidebar,
  body.theme-shadcn.authed:not(.fs) .sidebar {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: var(--ui-sidebar-width) !important;
    max-height: 100dvh !important;
  }

  body.authed:not(.fs) .main,
  body.theme-v4.authed:not(.fs) .main,
  body.theme-laravel.authed:not(.fs) .main,
  body.theme-shadcn.authed:not(.fs) .main {
    margin-right: calc(var(--ui-sidebar-width) + 16px) !important;
  }
}

@media (max-width: 1180px) {
  body.authed .dashboard-page .dash-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 980px) {
  html body.authed .sidebar,
  html.dark body.authed .sidebar,
  html[data-theme="dark"] body.authed .sidebar,
  body.neo2090 .owner-sidebar {
    border: 0 !important;
    border-radius: 0 !important;
  }

  body.authed .content {
    padding-inline: 7px !important;
  }

  body.authed .dashboard-page {
    padding: 15px !important;
  }

  body.authed .fast-additions .lv-toolbar-grid {
    gap: 11px !important;
  }
}

/* =====================================================================
   Reference edition 02 — black navigation, green accent, wide workspace
   ===================================================================== */

:root {
  --ui-primary: #63b309;
  --ui-primary-2: #8acb16;
  --ui-primary-soft: #eff9df;
  --ui-primary-line: rgba(99, 179, 9, .30);
  --ui-gradient: linear-gradient(135deg, #5aa807, #79c40d);
  --ui-sidebar: #101111;
  --ui-sidebar-2: #151616;
  --ui-sidebar-line: rgba(255, 255, 255, .09);
  --ui-sidebar-text: #d7d8d8;
  --ui-sidebar-muted: #898c8d;
  --ui-workspace-max: 1920px;
}

html.dark,
html[data-theme="dark"] {
  --ui-primary: #89d52c;
  --ui-primary-2: #b0e550;
  --ui-primary-soft: rgba(137, 213, 44, .14);
  --ui-primary-line: rgba(137, 213, 44, .32);
  --ui-gradient: linear-gradient(135deg, #69b914, #95db32);
}

html.theme-green,
body.theme-green {
  --ui-primary: #63b309;
  --ui-primary-2: #8acb16;
  --ui-primary-soft: #eff9df;
  --ui-primary-line: rgba(99, 179, 9, .30);
  --ui-gradient: linear-gradient(135deg, #5aa807, #79c40d);
}

html.dark.theme-green,
html[data-theme="dark"].theme-green,
html.dark body.theme-green,
html[data-theme="dark"] body.theme-green {
  --ui-primary: #89d52c;
  --ui-primary-2: #b0e550;
  --ui-primary-soft: rgba(137, 213, 44, .14);
  --ui-primary-line: rgba(137, 213, 44, .32);
}

html.theme-blue,
body.theme-blue {
  --ui-primary: #2563eb;
  --ui-primary-2: #3b82f6;
  --ui-primary-soft: #eaf1ff;
  --ui-primary-line: rgba(37, 99, 235, .28);
  --ui-gradient: linear-gradient(135deg, #2563eb, #4f7ff0);
}

html.theme-amber,
body.theme-amber {
  --ui-primary: #d97706;
  --ui-primary-2: #f59e0b;
  --ui-primary-soft: #fff6e3;
  --ui-primary-line: rgba(217, 119, 6, .28);
  --ui-gradient: linear-gradient(135deg, #d97706, #f59e0b);
}

html.theme-red,
body.theme-red {
  --ui-primary: #dc2626;
  --ui-primary-2: #f43f5e;
  --ui-primary-soft: #fff0f1;
  --ui-primary-line: rgba(220, 38, 38, .27);
  --ui-gradient: linear-gradient(135deg, #dc2626, #f43f5e);
}

/* Wide tenant workspace */
body.authed {
  --ui-sidebar-width: clamp(296px, 17vw, 326px);
  background:
    radial-gradient(circle at 7% -4%, rgba(124, 58, 237, .045), transparent 31rem),
    radial-gradient(circle at 91% -5%, rgba(99, 179, 9, .055), transparent 34rem),
    #f6f8fa !important;
}

html.dark body.authed,
html[data-theme="dark"] body.authed {
  background:
    radial-gradient(circle at 5% -8%, rgba(124, 58, 237, .08), transparent 34rem),
    radial-gradient(circle at 94% -6%, rgba(137, 213, 44, .07), transparent 36rem),
    var(--ui-bg) !important;
}

body.authed .sidebar,
html body.theme-v4.authed:not(.fs) .sidebar,
html body.theme-laravel.authed:not(.fs) .sidebar,
html body.theme-shadcn.authed:not(.fs) .sidebar,
html.dark body.authed .sidebar,
html[data-theme="dark"] body.authed .sidebar {
  color: var(--ui-sidebar-text) !important;
  border-color: var(--ui-sidebar-line) !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, var(--ui-sidebar) 0%, #111212 58%, #0d0e0e 100%) !important;
  box-shadow: 0 28px 70px -32px rgba(0, 0, 0, .72) !important;
  backdrop-filter: none !important;
}

body.authed .sidebar-brand {
  min-height: 84px;
  margin: 0 8px 14px;
  padding: 14px 10px 18px;
  border-color: var(--ui-sidebar-line) !important;
}

html body.theme-v4.authed:not(.fs) .sidebar .sidebar-brand,
html body.theme-laravel.authed:not(.fs) .sidebar .sidebar-brand,
html body.theme-shadcn.authed:not(.fs) .sidebar .sidebar-brand {
  color: var(--ui-sidebar-text) !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.authed .sidebar-logo {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  border-radius: 14px !important;
  color: #fff !important;
  background: linear-gradient(145deg, #222424, #171818) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 12px 28px -18px #000 !important;
}

body.authed .sidebar-title,
body.authed .sidebar .user-name,
body.authed .sidebar .tenant-sidebar-subscription__head,
body.authed .sidebar .tenant-sidebar-subscription__rows dt,
body.authed .sidebar .tenant-sidebar-subscription__rows dd {
  color: #f6f7f7 !important;
}

body.authed .sidebar-sub,
body.authed .sidebar-hint,
body.authed .sidebar .user-sub {
  color: var(--ui-sidebar-muted) !important;
}

body.authed .sidebar-nav {
  padding: 4px 9px 14px !important;
}

body.authed .nav-section {
  margin: 22px 14px 8px !important;
  color: #717475 !important;
  font-size: 11px !important;
}

body.authed .sidebar-nav :where(a, button) {
  min-height: 48px;
  margin-block: 4px;
  padding-inline: 15px !important;
  border-color: transparent !important;
  border-radius: 14px !important;
  color: var(--ui-sidebar-text) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.theme-v4.authed:not(.fs) .sidebar .sidebar-nav :where(a, button),
html body.theme-laravel.authed:not(.fs) .sidebar .sidebar-nav :where(a, button),
html body.theme-shadcn.authed:not(.fs) .sidebar .sidebar-nav :where(a, button) {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  color: var(--ui-sidebar-text) !important;
  background: transparent !important;
}

body.authed .sidebar-nav :where(a, button):hover {
  color: #fff !important;
  border-color: var(--ui-sidebar-line) !important;
  background: #1a1c1c !important;
  transform: translateX(-2px);
}

body.authed .sidebar-nav :where(.nav-item.active, .nav-sub-item.active, .nav-group-toggle.active, [aria-current="page"]),
body.authed .sidebar-nav a.active {
  color: #fff !important;
  border-color: rgba(137, 213, 44, .22) !important;
  background: var(--ui-gradient) !important;
  box-shadow: 0 16px 30px -18px rgba(99, 179, 9, .92) !important;
}

html body.theme-v4.authed:not(.fs) .sidebar .sidebar-nav :where(a.active, button.active, [aria-current="page"]),
html body.theme-laravel.authed:not(.fs) .sidebar .sidebar-nav :where(a.active, button.active, [aria-current="page"]),
html body.theme-shadcn.authed:not(.fs) .sidebar .sidebar-nav :where(a.active, button.active, [aria-current="page"]) {
  color: #fff !important;
  border-color: rgba(137, 213, 44, .22) !important;
  background: var(--ui-gradient) !important;
  box-shadow: 0 16px 30px -18px rgba(99, 179, 9, .92) !important;
}

body.authed .sidebar-nav :where(.nav-item.active, .nav-sub-item.active, .nav-group-toggle.active, [aria-current="page"]) :where(svg, .nav-ic),
body.authed .sidebar-nav a.active :where(svg, .nav-ic) {
  color: #fff !important;
  stroke: currentColor !important;
}

body.authed .sidebar-nav .nav-submenu {
  margin: 4px 8px 8px !important;
  padding: 4px 5px !important;
  border-inline-start: 1px solid var(--ui-sidebar-line);
}

body.authed .sidebar-footer {
  margin-inline: 8px !important;
  border-color: var(--ui-sidebar-line) !important;
}

body.authed .sidebar .user-pill,
body.authed .sidebar .tenant-sidebar-subscription {
  border-color: var(--ui-sidebar-line) !important;
  color: var(--ui-sidebar-text) !important;
  background: linear-gradient(145deg, #191a1a, #141515) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}

body.authed .sidebar .tenant-sidebar-subscription__status,
body.authed .sidebar .tenant-sidebar-subscription__badge {
  color: var(--ui-sidebar-text) !important;
  border-color: var(--ui-sidebar-line) !important;
  background: rgba(255, 255, 255, .055) !important;
}

body.authed .main {
  width: auto !important;
  max-width: none !important;
}

body.authed .main > .topbar,
body.authed .student-shell > .topbar {
  min-height: 108px;
  margin: 20px 20px 0 !important;
  padding: 16px 20px !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 22px 48px -32px rgba(15,23,42,.28) !important;
}

html.dark body.authed .main > .topbar,
html[data-theme="dark"] body.authed .main > .topbar,
html.dark body.authed .student-shell > .topbar,
html[data-theme="dark"] body.authed .student-shell > .topbar {
  background: rgba(15,23,42,.96) !important;
}

body.authed .top-search {
  max-width: 620px !important;
}

body.authed .top-search-input {
  min-height: 50px !important;
  border-radius: 14px !important;
}

body.authed .content {
  width: 100% !important;
  max-width: none !important;
  padding: 42px 20px 52px !important;
}

body.authed .content > .container {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: 4px !important;
}

body.authed .content > .container > .card {
  width: 100% !important;
  max-width: none !important;
  padding: clamp(18px, 1.6vw, 30px) !important;
  border-radius: 22px !important;
  box-shadow: 0 24px 58px -38px rgba(15,23,42,.26) !important;
}

body.authed .dash-head {
  gap: 18px !important;
  margin-bottom: 16px !important;
}

body.authed .dash-head .actions {
  flex: 0 0 auto;
  gap: 10px !important;
}

body.authed .metrics {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: clamp(12px, 1vw, 18px) !important;
  width: 100% !important;
  overflow: visible !important;
}

body.authed .metric {
  min-width: 0 !important;
  min-height: 168px !important;
  padding: clamp(16px, 1.25vw, 22px) !important;
  overflow: hidden !important;
  border-radius: 19px !important;
}

body.authed .metric .m-top {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
}

body.authed .metric .m-ic {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 14px !important;
}

body.authed .metric .m-val {
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: visible !important;
  color: var(--ui-text) !important;
  font-size: clamp(19px, 1.18vw, 27px) !important;
  font-weight: 950 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.045em !important;
  line-height: 1.22 !important;
  text-align: right !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

body.authed .metric .m-lbl {
  margin-top: 16px !important;
  color: var(--ui-text) !important;
  font-size: clamp(14px, .88vw, 17px) !important;
  line-height: 1.55 !important;
}

body.authed .metric .m-sub {
  margin-top: 5px !important;
  color: var(--ui-muted) !important;
  line-height: 1.55 !important;
}

body.authed .dash-grid {
  grid-template-columns: minmax(320px, .78fr) minmax(0, 1.52fr) !important;
  gap: clamp(14px, 1.25vw, 22px) !important;
}

body.authed .chart-card {
  min-width: 0 !important;
  border-radius: 20px !important;
}

body.authed main :where(.card, .panel, .widget, .table-card, .form-card, .dashboard-card),
body.authed main :where(section, article)[class*="card"] {
  max-width: 100%;
  border-radius: 20px;
}

body.authed main :where(.form-grid, .fields-grid, .filter-grid) {
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

/* Platform receives the same black navigation and wide content language */
body.neo2090 {
  --violet: var(--ui-primary);
  --violet-hi: var(--ui-primary-2);
  --violet-soft: var(--ui-primary-soft);
  --violet-line: var(--ui-primary-line);
  --cyan: var(--ui-primary-2);
  --cyan-hi: color-mix(in srgb, var(--ui-primary-2) 78%, white);
  --grad: var(--ui-gradient);
}

body.neo2090 .owner-shell {
  grid-template-columns: clamp(286px, 16vw, 318px) minmax(0, 1fr) !important;
}

body.neo2090 .owner-sidebar {
  color: var(--ui-sidebar-text) !important;
  border-color: var(--ui-sidebar-line) !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, var(--ui-sidebar), #0d0e0e) !important;
  box-shadow: 0 28px 70px -32px rgba(0,0,0,.74) !important;
  backdrop-filter: none !important;
}

body.neo2090 .owner-sidebar :where(.brand-title, .brand, b, strong) {
  color: #f6f7f7 !important;
}

html body.neo2090 .owner-sidebar .brand {
  color: var(--ui-sidebar-text) !important;
  border-color: var(--ui-sidebar-line) !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.neo2090 .owner-sidebar :where(.brand-sub, small, .nav-section) {
  color: var(--ui-sidebar-muted) !important;
}

body.neo2090 .owner-sidebar .nav-link {
  min-height: 48px;
  color: var(--ui-sidebar-text) !important;
  background: transparent !important;
}

body.neo2090 .owner-sidebar .nav-link:hover {
  color: #fff !important;
  border-color: var(--ui-sidebar-line) !important;
  background: #1a1c1c !important;
}

body.neo2090 .owner-sidebar .nav-link.active {
  color: #fff !important;
  border-color: rgba(137,213,44,.22) !important;
  background: var(--ui-gradient) !important;
  box-shadow: 0 16px 30px -18px rgba(99,179,9,.92) !important;
}

body.neo2090 .owner-topbar,
body.neo2090 .public-top,
body.neo2090 .public-header {
  min-height: 96px;
  margin: 18px 18px 0 !important;
  background: var(--ui-surface-solid) !important;
}

body.neo2090 .owner-main main {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding: 34px clamp(18px, 2vw, 36px) 56px !important;
}

body.neo2090 .owner-main main > :where(section, div, article) {
  max-width: 100%;
}

body.neo2090 :where(.btn-primary, .public-cta) {
  background: var(--ui-gradient) !important;
}

/* Representative and student portals */
body.rep-body :where(.mn-side, .rep-sidebar, .portal-sidebar),
.student-portal-aux > .sidebar {
  color: var(--ui-sidebar-text) !important;
  border-color: var(--ui-sidebar-line) !important;
  background: linear-gradient(180deg, var(--ui-sidebar), #0d0e0e) !important;
  box-shadow: 0 28px 70px -34px rgba(0,0,0,.76) !important;
}

body.rep-body :where(.mn-side, .rep-sidebar, .portal-sidebar) :where(b, strong, h2, h3),
.student-portal-aux > .sidebar :where(b, strong, h2, h3) {
  color: #f6f7f7 !important;
}

body.rep-body :where(.mn-side, .rep-sidebar, .portal-sidebar) :where(small, p, span),
.student-portal-aux > .sidebar :where(small, p, span) {
  color: var(--ui-sidebar-muted);
}

body.rep-body :where(.mn-nav a, .mn-nav button, .rep-nav a, .portal-nav a),
.student-portal-aux > .sidebar .nav button {
  min-height: 47px;
  border-radius: 14px !important;
}

body.rep-body :where(.mn-nav .active, .mn-nav .is-active, .rep-nav .active, .portal-nav .active),
.student-portal-aux > .sidebar .nav button.active {
  color: #fff !important;
  background: var(--ui-gradient) !important;
  box-shadow: 0 16px 30px -18px rgba(99,179,9,.90) !important;
}

body.rep-body :where(.mn-main, .rep-main, .portal-main),
.student-portal-aux > .main {
  width: auto !important;
  max-width: none !important;
}

body.rep-body :where(.mn-content, .rep-content, .portal-content),
.student-portal-aux .content,
.student-portal-aux .page {
  width: 100% !important;
  max-width: none !important;
}

.booking-luxe .bk-shell,
.portal-nova .bk-shell {
  width: min(100%, 1580px) !important;
  max-width: 1580px !important;
}

.booking-luxe .bk-shell--narrow,
.portal-nova .bk-shell--narrow {
  width: min(100%, 1040px) !important;
  max-width: 1040px !important;
}

body.client-profile-page :where(.wrap, main),
body.representative-public-page :where(main, .wrap, .page) {
  width: min(100%, 1500px) !important;
  max-width: 1500px !important;
}

/* Laptop: preserve breadth by reducing the sidebar and using practical grids. */
@media (max-width: 1540px) and (min-width: 981px) {
  body.authed {
    --ui-sidebar-width: 286px;
  }

  body.authed .metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.authed .metric {
    min-height: 158px !important;
  }

  body.authed .metric .m-val {
    font-size: clamp(22px, 2vw, 30px) !important;
  }

  body.neo2090 .owner-shell {
    grid-template-columns: 270px minmax(0, 1fr) !important;
  }
}

@media (min-width: 981px) {
  body.authed:not(.fs) .sidebar,
  body.theme-v4.authed:not(.fs) .sidebar,
  body.theme-laravel.authed:not(.fs) .sidebar,
  body.theme-shadcn.authed:not(.fs) .sidebar {
    top: 20px !important;
    right: 16px !important;
    bottom: 20px !important;
    width: var(--ui-sidebar-width) !important;
    max-height: calc(100dvh - 40px) !important;
  }

  body.authed:not(.fs) .main,
  body.theme-v4.authed:not(.fs) .main,
  body.theme-laravel.authed:not(.fs) .main,
  body.theme-shadcn.authed:not(.fs) .main {
    margin-right: calc(var(--ui-sidebar-width) + 32px) !important;
  }

  body.authed:not(.fs).sb-mini .sidebar {
    width: 90px !important;
  }

  body.authed:not(.fs).sb-mini .main {
    margin-right: 114px !important;
  }
}

@media (max-width: 1180px) and (min-width: 981px) {
  body.authed .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.authed .metrics > .metric:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  body.authed .dash-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.authed .top-search {
    max-width: 300px !important;
  }
}

@media (max-width: 980px) {
  body.authed .sidebar,
  html.dark body.authed .sidebar,
  html[data-theme="dark"] body.authed .sidebar {
    border-radius: 22px !important;
  }

  body.authed .main > .topbar,
  body.authed .student-shell > .topbar,
  body.theme-v4.authed:not(.fs) .main > .topbar,
  body.theme-laravel.authed:not(.fs) .main > .topbar,
  body.theme-shadcn.authed:not(.fs) .main > .topbar {
    min-height: 72px !important;
    margin: 8px !important;
    padding: 10px 12px !important;
    border-radius: 18px !important;
  }

  body.authed .content {
    padding: 18px 8px 38px !important;
  }

  body.authed .content > .container > .card {
    padding: 16px !important;
    border-radius: 18px !important;
  }

  body.authed .dash-head {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  body.authed .dash-head .actions {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 3px;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }

  body.authed .dash-head .actions::-webkit-scrollbar {
    display: none;
  }

  body.authed .dash-head .actions .btn {
    flex: 0 0 auto;
    white-space: nowrap !important;
  }

  body.authed .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  body.authed .metric {
    min-height: 152px !important;
    padding: 15px !important;
  }

  body.authed .metric .m-val {
    font-size: clamp(21px, 4.4vw, 28px) !important;
  }

  html body.theme-v4.authed .metric .m-val,
  html body.theme-laravel.authed .metric .m-val,
  html body.theme-shadcn.authed .metric .m-val {
    font-size: clamp(21px, 3.2vw, 27px) !important;
    line-height: 1.24 !important;
  }

  body.authed .metrics > .metric:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  body.authed .dash-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.neo2090 .owner-sidebar {
    border-radius: 20px !important;
  }

  body.neo2090 .owner-main main {
    padding: 18px 9px 40px !important;
  }
}

@media (max-width: 640px) {
  body.neo2090 :where(.topbar-title, .owner-topbar h1) {
    font-size: clamp(22px, 7vw, 28px) !important;
    line-height: 1.34 !important;
  }

  body.neo2090 :where(.card-hero h1, .card-hero h2, .platform-hero-2090 h1, .platform-hero-2090 h2) {
    font-size: clamp(25px, 8vw, 34px) !important;
    line-height: 1.36 !important;
  }

  body.authed .metrics {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.authed .metric {
    min-height: 142px !important;
  }

  body.authed .metric .m-top {
    grid-template-columns: 46px minmax(0, 1fr) !important;
  }

  body.authed .metric .m-ic {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }

  body.authed .metric .m-val {
    font-size: clamp(23px, 7vw, 31px) !important;
    white-space: normal !important;
  }

  html body.theme-v4.authed .metric .m-val,
  html body.theme-laravel.authed .metric .m-val,
  html body.theme-shadcn.authed .metric .m-val {
    font-size: clamp(23px, 7vw, 29px) !important;
    line-height: 1.24 !important;
  }

  body.authed .content > .container > .card {
    padding: 13px !important;
  }

  body.rep-body :where(.mn-content, .rep-content, .portal-content),
  .student-portal-aux .content,
  .student-portal-aux .page {
    padding-inline: 8px !important;
  }
}

@media print {
  html,
  body,
  body.authed,
  body.neo2090,
  body.rep-body,
  body.mushghal-standalone {
    color-scheme: light !important;
    color: #000 !important;
    background: #fff !important;
  }
}

/* Edition 03 final precedence: keep legacy theme bundles from restoring frames. */
html body.authed:not(.fs) .sidebar,
html body.theme-v4.authed:not(.fs) .sidebar,
html body.theme-laravel.authed:not(.fs) .sidebar,
html body.theme-shadcn.authed:not(.fs) .sidebar,
html.dark body.authed:not(.fs) .sidebar,
html[data-theme="dark"] body.authed:not(.fs) .sidebar {
  border: 0 !important;
  border-radius: 0 !important;
  background: #101111 !important;
  box-shadow: none !important;
}

html body.authed .sidebar :where(.sidebar-brand, .sb-brand, .sidebar-footer),
html body.authed .sidebar :where(.sidebar-logo, .sb-mini-btn),
html body.authed .sidebar-nav :where(.nav-item, .nav-sub-item, .nav-group-toggle),
html body.authed .sidebar-nav :where(.nav-item, .nav-sub-item, .nav-group-toggle) :where(.ni, svg),
html body.authed .sidebar-nav .nav-submenu,
html body.authed .sidebar :where(.user-pill, .tenant-sidebar-subscription, .tenant-sidebar-subscription__status, .tenant-sidebar-subscription__badge) {
  border: 0 !important;
  box-shadow: none !important;
}

html body.authed .sidebar :where(.sidebar-brand, .sb-brand, .sidebar-footer),
html body.authed .sidebar-nav .nav-submenu {
  background: transparent !important;
}

html body.authed .sidebar :where(.sidebar-logo, .sb-mini-btn) {
  background: #1b1d1d !important;
}

html body.theme-v4.authed .sidebar :where(.sidebar-title, .user-name),
html body.theme-laravel.authed .sidebar :where(.sidebar-title, .user-name),
html body.theme-shadcn.authed .sidebar :where(.sidebar-title, .user-name),
html body.authed .sidebar :where(.sidebar-title, .user-name) {
  color: #f7f8f8 !important;
}

html body.theme-v4.authed .sidebar :where(.sidebar-sub, .sidebar-hint, .user-sub),
html body.theme-laravel.authed .sidebar :where(.sidebar-sub, .sidebar-hint, .user-sub),
html body.theme-shadcn.authed .sidebar :where(.sidebar-sub, .sidebar-hint, .user-sub),
html body.authed .sidebar :where(.sidebar-sub, .sidebar-hint, .user-sub) {
  color: #8f9494 !important;
}

html body.authed .sidebar .sidebar-title {
  font-size: 18px !important;
  font-weight: 900 !important;
}

html body.authed .sidebar-nav :where(.nav-item, .nav-sub-item, .nav-group-toggle) .ni {
  border: 0 !important;
  color: currentColor !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme="light"] body.theme-v4.authed .sidebar .sidebar-nav .nav-item .ni,
html[data-theme="light"] body.theme-laravel.authed .sidebar .sidebar-nav .nav-item .ni,
html[data-theme="light"] body.theme-shadcn.authed .sidebar .sidebar-nav .nav-item .ni,
html.dark body.authed .sidebar .sidebar-nav .nav-item .ni,
html[data-theme="dark"] body.authed .sidebar .sidebar-nav .nav-item .ni,
html body.authed .sidebar .sidebar-nav .nav-item .ni {
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: currentColor !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.authed .sidebar .sidebar-nav .nav-item .ni svg {
  width: 21px !important;
  height: 21px !important;
  color: currentColor !important;
  background: transparent !important;
}

html body.theme-v4.authed .sidebar .sidebar-nav .nav-item::before,
html body.theme-v4.authed .sidebar .sidebar-nav .nav-item::after,
html body.theme-laravel.authed .sidebar .sidebar-nav .nav-item::before,
html body.theme-laravel.authed .sidebar .sidebar-nav .nav-item::after,
html body.theme-shadcn.authed .sidebar .sidebar-nav .nav-item::before,
html body.theme-shadcn.authed .sidebar .sidebar-nav .nav-item::after,
html body.authed .sidebar .sidebar-nav .nav-item::before,
html body.authed .sidebar .sidebar-nav .nav-item::after {
  display: none !important;
  content: none !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

html body.authed .sidebar-nav :where(.nav-item, .nav-sub-item, .nav-group-toggle) .nt {
  color: currentColor !important;
  font-size: 15px !important;
  font-weight: 850 !important;
}

html body.theme-v4.authed:not(.fs) .sidebar .sidebar-nav button.nav-group-toggle.active,
html body.theme-laravel.authed:not(.fs) .sidebar .sidebar-nav button.nav-group-toggle.active,
html body.theme-shadcn.authed:not(.fs) .sidebar .sidebar-nav button.nav-group-toggle.active,
html body.authed .sidebar-nav button.nav-group-toggle.active {
  border: 0 !important;
  color: #f7f8f8 !important;
  background: #191b1b !important;
  box-shadow: none !important;
}

html body.theme-v4.authed:not(.fs) .sidebar .sidebar-nav a.nav-sub-item.active,
html body.theme-laravel.authed:not(.fs) .sidebar .sidebar-nav a.nav-sub-item.active,
html body.theme-shadcn.authed:not(.fs) .sidebar .sidebar-nav a.nav-sub-item.active,
html body.authed .sidebar-nav a.nav-sub-item.active {
  border: 0 !important;
  color: #fff !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.theme-v4.authed:not(.fs) .sidebar .sidebar-nav a.nav-item.active,
html body.theme-laravel.authed:not(.fs) .sidebar .sidebar-nav a.nav-item.active,
html body.theme-shadcn.authed:not(.fs) .sidebar .sidebar-nav a.nav-item.active,
html body.authed .sidebar-nav a.nav-item.active {
  border: 0 !important;
  color: #fff !important;
  background: var(--ui-gradient) !important;
  box-shadow: 0 15px 28px -19px rgba(91,177,0,.92) !important;
}

html body.authed .content {
  width: 100% !important;
  max-width: none !important;
  padding-inline: 12px !important;
}

html body.authed .content > .container {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}

html body.authed .dashboard-page {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(20px, 1.45vw, 28px) !important;
  border: 0 !important;
  background: var(--ui-surface-solid) !important;
  box-shadow: 0 24px 54px -40px rgba(15,23,42,.30) !important;
}

html body.authed .dashboard-page .dash-grid {
  grid-template-columns: minmax(340px, .76fr) minmax(0, 1.62fr) !important;
}

body.neo2090 .owner-sidebar,
body.rep-body :where(.mn-side, .rep-sidebar, .portal-sidebar),
.student-portal-aux > .sidebar {
  border: 0 !important;
  border-radius: 0 !important;
  background: #101111 !important;
  box-shadow: none !important;
}

body.neo2090 .owner-sidebar :where(.brand, .nav-link),
body.rep-body :where(.mn-nav a, .mn-nav button, .rep-nav a, .portal-nav a),
.student-portal-aux > .sidebar .nav button {
  border: 0 !important;
}

@media (min-width: 981px) {
  html body.authed:not(.fs) .sidebar,
  html body.theme-v4.authed:not(.fs) .sidebar,
  html body.theme-laravel.authed:not(.fs) .sidebar,
  html body.theme-shadcn.authed:not(.fs) .sidebar {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: var(--ui-sidebar-width) !important;
    max-height: 100dvh !important;
    padding-inline: 10px !important;
  }

  html body.authed:not(.fs) .sidebar .sidebar-brand {
    margin-inline: 7px !important;
  }

  html body.authed:not(.fs) .sidebar .sidebar-nav {
    padding-inline: 10px !important;
  }

  html body.authed:not(.fs) .sidebar .sidebar-nav > .nav-section {
    position: relative;
    left: -5px;
    margin-inline: 5px !important;
  }

  html body.authed:not(.fs) .main,
  html body.theme-v4.authed:not(.fs) .main,
  html body.theme-laravel.authed:not(.fs) .main,
  html body.theme-shadcn.authed:not(.fs) .main {
    margin-right: calc(var(--ui-sidebar-width) + 16px) !important;
  }
}

@media (max-width: 1180px) {
  html body.authed .dashboard-page .dash-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 980px) {
  html body.authed .sidebar,
  html.dark body.authed .sidebar,
  html[data-theme="dark"] body.authed .sidebar,
  body.neo2090 .owner-sidebar {
    border: 0 !important;
    border-radius: 0 !important;
  }

  html body.authed .content {
    padding-inline: 7px !important;
  }

  html body.authed .dashboard-page {
    padding: 15px !important;
  }
}

/* ========================================================================== 
   Mushghal unified UI — video reference edition 05
   The reference uses very light one-pixel frames, white surfaces and restrained
   shadows.  Keep those details instead of globally deleting every border.
   ========================================================================== */

html body.authed :where(a, button, input, select, textarea, summary, [tabindex]):focus,
html body.authed :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 0 !important;
  border-color: var(--ui-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 16%, transparent) !important;
}

html body.authed :where(
  .card, .panel, .widget, .form-card, .table-card, .dashboard-card,
  .modal, .modal-card, .dialog, .dropdown, .dropdown-menu,
  .menu, .popover, .sheet, .drawer, details, fieldset
) {
  border: 1px solid color-mix(in srgb, var(--ui-line) 78%, transparent) !important;
  background-color: var(--ui-surface-solid) !important;
  box-shadow: 0 10px 30px -24px rgba(15, 23, 42, .30) !important;
}

html body.authed :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea, .input, .select, .textarea,
  [class*="input-wrap"], [class*="select-wrap"]
) {
  border: 1px solid color-mix(in srgb, var(--ui-line) 84%, transparent) !important;
  outline: 0 !important;
  background-color: var(--ui-surface-solid) !important;
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, .015) !important;
}

html body.authed :where(.btn, button, [role="button"], .icon-btn) {
  outline: 0 !important;
}

html body.authed :where(.badge, .pill, .chip, .tag, .status-badge) {
  border: 1px solid color-mix(in srgb, var(--ui-line) 78%, transparent) !important;
  box-shadow: none !important;
}

html body.authed :where(
  .btn.gray, .btn.secondary, .btn.light, .btn.ghost,
  button.gray, button.secondary
) {
  color: var(--ui-text) !important;
  border: 1px solid color-mix(in srgb, var(--ui-line) 82%, transparent) !important;
  background: var(--ui-surface-solid) !important;
  box-shadow: 0 5px 15px -13px rgba(15, 23, 42, .34) !important;
}

html body.authed :where(
  .btn.primary, .btn-success, button.primary, button[type="submit"].primary,
  .public-cta, .fast-tab-btn.active
) {
  color: #fff !important;
  border: 1px solid transparent !important;
  background: var(--ui-gradient) !important;
  box-shadow: 0 12px 24px -18px color-mix(in srgb, var(--ui-primary) 74%, transparent) !important;
}

html body.authed :where(.table-wrap, .table-responsive, .data-table, .table-toolbar) {
  border-color: color-mix(in srgb, var(--ui-line) 78%, transparent) !important;
}

html body.authed :where(th, td) {
  border-color: color-mix(in srgb, var(--ui-line) 74%, transparent) !important;
}

html body.authed hr {
  height: 1px !important;
  margin-block: 12px !important;
  border: 0 !important;
  background: color-mix(in srgb, var(--ui-line) 72%, transparent) !important;
}

html body.authed .content,
html body.neo2090 .owner-main main,
html body.rep-body :where(.mn-content, .rep-content, .portal-content),
.student-portal-aux :where(.content, .page) {
  width: 100% !important;
  max-width: none !important;
}

html body.authed .content > .container,
html body.authed .content > .container > .card,
html body.neo2090 .owner-main main > :where(section, article, div) {
  width: 100% !important;
  max-width: none !important;
}

/* Exact black/green navigation reference. */
html body.authed:not(.fs) .sidebar,
html body.theme-v4.authed:not(.fs) .sidebar,
html body.theme-laravel.authed:not(.fs) .sidebar,
html body.theme-shadcn.authed:not(.fs) .sidebar,
html.dark body.authed:not(.fs) .sidebar,
html[data-theme="dark"] body.authed:not(.fs) .sidebar,
body.neo2090 .owner-sidebar,
body.rep-body :where(.mn-side, .rep-sidebar, .portal-sidebar),
.student-portal-aux > .sidebar {
  border: 0 !important;
  border-radius: 0 !important;
  color: #d8dada !important;
  background: #101111 !important;
  box-shadow: none !important;
}

html body.authed .sidebar-brand {
  min-height: 112px !important;
  margin: 0 18px 12px !important;
  padding: 20px 0 18px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.authed .sidebar :where(.sb-brand, .sidebar-footer, .nav-submenu) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.authed .sidebar :where(.sidebar-logo, .sb-mini-btn) {
  border: 0 !important;
  border-radius: 14px !important;
  color: #f7f8f8 !important;
  background: #1b1d1d !important;
  box-shadow: none !important;
}

html body.authed .sidebar .sidebar-title {
  color: #f7f8f8 !important;
  font-size: 18px !important;
  font-weight: 950 !important;
}

html body.authed .sidebar :where(.sidebar-sub, .sidebar-hint, .user-sub) {
  color: #969a9a !important;
}

html body.authed .sidebar-nav {
  padding-inline: 18px !important;
}

html body.authed .sidebar-nav :where(.nav-item, .nav-sub-item, .nav-group-toggle) {
  min-height: 50px !important;
  margin-block: 2px !important;
  padding-inline: 13px !important;
  border: 0 !important;
  color: #d4d6d6 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.authed .sidebar-nav :where(.nav-item, .nav-sub-item, .nav-group-toggle) .nt {
  color: currentColor !important;
  font-size: 17px !important;
  font-weight: 900 !important;
}

html body.authed .sidebar-nav :where(.nav-item, .nav-sub-item, .nav-group-toggle) .ni,
html[data-theme="light"] body.theme-v4.authed .sidebar .sidebar-nav .nav-item .ni,
html[data-theme="light"] body.theme-laravel.authed .sidebar .sidebar-nav .nav-item .ni,
html[data-theme="light"] body.theme-shadcn.authed .sidebar .sidebar-nav .nav-item .ni {
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: currentColor !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.authed .sidebar-nav :where(.nav-item, .nav-sub-item, .nav-group-toggle):hover {
  border: 0 !important;
  color: #fff !important;
  background: #191b1b !important;
  box-shadow: none !important;
}

/* A page is green; an expanded payments/students group is green too. */
html body.theme-v4.authed:not(.fs) .sidebar .sidebar-nav a.nav-item.active,
html body.theme-laravel.authed:not(.fs) .sidebar .sidebar-nav a.nav-item.active,
html body.theme-shadcn.authed:not(.fs) .sidebar .sidebar-nav a.nav-item.active,
html body.authed .sidebar-nav a.nav-item.active,
html body.theme-v4.authed:not(.fs) .sidebar .sidebar-nav button.nav-group-toggle.active,
html body.theme-laravel.authed:not(.fs) .sidebar .sidebar-nav button.nav-group-toggle.active,
html body.theme-shadcn.authed:not(.fs) .sidebar .sidebar-nav button.nav-group-toggle.active,
html body.authed .sidebar-nav button.nav-group-toggle.active,
html body.authed .sidebar-nav .nav-group.open > button.nav-group-toggle {
  border: 0 !important;
  border-radius: 16px !important;
  color: #fff !important;
  background: var(--ui-gradient) !important;
  box-shadow: 0 16px 30px -20px rgba(91,177,0,.92) !important;
}

html body.theme-v4.authed:not(.fs) .sidebar .sidebar-nav a.nav-sub-item.active,
html body.theme-laravel.authed:not(.fs) .sidebar .sidebar-nav a.nav-sub-item.active,
html body.theme-shadcn.authed:not(.fs) .sidebar .sidebar-nav a.nav-sub-item.active,
html body.authed .sidebar-nav a.nav-sub-item.active {
  border: 0 !important;
  border-radius: 13px !important;
  color: #fff !important;
  background: rgba(99, 179, 9, .17) !important;
  box-shadow: none !important;
}

html body.authed .sidebar-nav .nav-submenu {
  margin: 4px 0 10px !important;
  padding: 4px 8px 2px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.authed .sidebar-nav :where(.nav-item, .nav-sub-item, .nav-group-toggle)::before,
html body.authed .sidebar-nav :where(.nav-item, .nav-sub-item, .nav-group-toggle)::after {
  display: none !important;
  content: none !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* Fast additions: wide borderless tabs and entry/list controls like the sample. */
html body.authed .fast-additions,
html body.authed .fast-additions :where(
  .fast-tabs, .fast-tab-btn, .toolbar, .lv-toolbar-grid,
  .field, .lv-inline, .rectangle-addition-filter, .addition-filter-inline,
  .toggle, .colmenu, .colmenu-dd, .sticky-actions,
  input, select, textarea, .btn, button, details, summary
) {
  border: 0 !important;
  outline: 0 !important;
}

html body.authed .fast-additions .fast-tabs {
  padding: 7px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: #f2f3f2 !important;
  box-shadow: none !important;
}

html body.authed .fast-additions .fast-tab-btn {
  min-height: 50px !important;
  border: 0 !important;
  color: #777b78 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.authed .fast-additions .fast-tab-btn.active {
  color: #fff !important;
  background: var(--ui-gradient) !important;
  box-shadow: 0 15px 30px -22px rgba(91,177,0,.88) !important;
}

html body.authed .fast-additions :where(
  input:not([type="checkbox"]):not([type="radio"]), select, textarea,
  .lv-inline, .rectangle-addition-filter, .addition-filter-inline,
  .toggle, #colMenuBtn, .lv-reset > .btn
) {
  border: 0 !important;
  border-radius: 14px !important;
  background: #f7f8f7 !important;
  box-shadow: none !important;
}

html.dark body.authed .fast-additions .fast-tabs,
html[data-theme="dark"] body.authed .fast-additions .fast-tabs {
  background: #151919 !important;
}

html.dark body.authed .fast-additions :where(
  input:not([type="checkbox"]):not([type="radio"]), select, textarea,
  .lv-inline, .rectangle-addition-filter, .addition-filter-inline,
  .toggle, #colMenuBtn, .lv-reset > .btn
),
html[data-theme="dark"] body.authed .fast-additions :where(
  input:not([type="checkbox"]):not([type="radio"]), select, textarea,
  .lv-inline, .rectangle-addition-filter, .addition-filter-inline,
  .toggle, #colMenuBtn, .lv-reset > .btn
) {
  color: var(--ui-text) !important;
  background: #171b1c !important;
}

/* Other application shells receive the identical active state, without frames. */
body.neo2090 .owner-sidebar .nav-link,
body.rep-body :where(.mn-nav a, .mn-nav button, .rep-nav a, .portal-nav a),
.student-portal-aux > .sidebar .nav button {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.neo2090 .owner-sidebar .nav-link.active,
body.rep-body :where(.mn-nav .active, .mn-nav .is-active, .rep-nav .active, .portal-nav .active),
.student-portal-aux > .sidebar .nav button.active {
  border: 0 !important;
  color: #fff !important;
  background: var(--ui-gradient) !important;
  box-shadow: 0 16px 30px -20px rgba(91,177,0,.92) !important;
}

@media (max-width: 980px) {
  html body.authed .sidebar-nav {
    padding-inline: 16px !important;
  }

  html body.authed .sidebar-nav :where(.nav-item, .nav-sub-item, .nav-group-toggle) .nt {
    font-size: 16px !important;
  }

  html body.authed .fast-additions .fast-tabs {
    padding: 5px !important;
  }
}

@media print {
  html:root:root:root:root:root:root:root:root body *,
  html:root:root:root:root:root:root:root:root body *::before,
  html:root:root:root:root:root:root:root:root body *::after {
    box-shadow: none !important;
  }
}

/* ========================================================================== 
   Video-reference polish — 2026-07-19
   Mobile interaction hardening, compact toolbars and invoice fidelity.
   ========================================================================== */

body.authed :where(button, a, input, select, textarea) {
  min-width: 0;
}

/* Content cards are already opaque in the reference skin. Keeping a
   backdrop-filter on them turns fixed dialogs into card-sized overlays in
   Chromium, so dialogs must live in an unfiltered containing block. */
html body.authed main :where(.card, .panel, .widget, .form-card, .table-card) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.authed :where(button, input, select, textarea):disabled,
body.authed :where([aria-disabled="true"]) {
  cursor: not-allowed !important;
  opacity: .55 !important;
}

/* The invoice is the one table that must keep its precise black grid. */
html:root:root:root:root:root:root:root:root body .invoice-table-wrap {
  border: 1px solid #000 !important;
}

html:root:root:root:root:root:root:root:root body table.invoice-table,
html:root:root:root:root:root:root:root:root body table.invoice-table th,
html:root:root:root:root:root:root:root:root body table.invoice-table td {
  border: 1px solid #000 !important;
}

/* neo2090 also styles every type="button"; preserve the invoice's purpose-
   specific controls from the reference instead of flattening them to ghosts. */
html:root:root:root:root:root:root:root:root body.page-print_additions_invoice .invoice-actions button.btn-pdf-lux {
  color: #fff !important;
  background: linear-gradient(135deg, #0d8f8f 0%, #0f7a7a 45%, #0a5f63 100%) !important;
  box-shadow: 0 8px 22px rgba(15,122,122,.38), inset 0 1px 0 rgba(255,255,255,.25) !important;
}

html:root:root:root:root:root:root:root:root body.page-print_additions_invoice .invoice-actions button.telegram-send-btn {
  color: #fff !important;
  background: linear-gradient(135deg, #229ed9, #0f7a7a) !important;
  box-shadow: 0 10px 24px rgba(34,158,217,.24) !important;
}

html:root:root:root:root:root:root:root:root body.page-print_additions_invoice .invoice-actions button.telegram-change-btn {
  color: #0f7a7a !important;
  border: 1.5px solid rgba(34,158,217,.45) !important;
  background: #fff !important;
}

@media (max-width: 980px) {
  body.authed.sidebar-open {
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: none;
  }

  body.authed.sidebar-open::after {
    pointer-events: auto;
  }

  body.authed .sidebar {
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  body.authed .main > .topbar,
  body.authed .student-shell > .topbar {
    overflow: visible !important;
    isolation: isolate;
  }

  body.authed .topbar-actions {
    min-width: 0;
    flex: 0 0 auto;
  }

  body.authed main :where(
    .page-actions, .form-actions, .filter-actions, .table-actions,
    .invoice-actions, .modal-actions, .sticky-actions
  ) {
    max-width: 100%;
    flex-wrap: wrap !important;
  }

  body.authed main :where(
    .page-actions, .form-actions, .filter-actions, .table-actions,
    .invoice-actions, .modal-actions, .sticky-actions
  ) > :where(.btn, button, a) {
    max-width: 100%;
  }

  body.authed :where(.modal, .dialog, [role="dialog"], .confirm-modal, .cmdk-modal) {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
  }
}

@media (max-width: 640px) {
  body.authed .main > .topbar,
  body.authed .student-shell > .topbar {
    min-height: 104px !important;
    align-content: center;
    flex-wrap: wrap !important;
    gap: 7px 8px !important;
    padding: 9px 11px !important;
  }

  body.authed .sidebar-toggle {
    order: 1;
  }

  body.authed .topbar-actions {
    order: 2;
    margin-inline-start: auto;
  }

  body.authed .topbar-titles {
    order: 3;
    width: 100%;
    min-height: 32px;
    flex: 1 0 100% !important;
    padding-inline: 3px;
  }

  body.authed .topbar .top-title {
    font-size: 17px !important;
    line-height: 1.45 !important;
  }

  body.authed .content {
    padding: 10px 7px 34px !important;
  }

  /* All three dashboard actions stay visible; no half-hidden third button. */
  body.authed .dash-head .actions {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  body.authed .dash-head .actions > :where(.btn, button, a) {
    width: 100% !important;
    min-height: 44px !important;
    padding-inline: 9px !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    white-space: normal !important;
  }

  body.authed .dash-head .actions > :nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  body.authed .dash-head .actions > :nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  body.authed .dash-head .actions > :nth-child(3) {
    grid-column: 2;
    grid-row: 1;
  }

  body.authed main :where(
    .page-actions, .form-actions, .filter-actions, .table-actions,
    .invoice-actions, .modal-actions
  ) > :where(.btn, button, a) {
    flex: 1 1 min(100%, 150px);
    justify-content: center;
    white-space: normal !important;
  }

  body.authed main :where(input, select, textarea, .input, .select, .textarea) {
    max-width: 100% !important;
  }

  body.authed .table-wrap.rt-card-wrap,
  body.authed .table-responsive.rt-card-wrap {
    overflow: visible !important;
  }

  body.authed table.rt-card {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.authed .invoice-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  body.authed .invoice-actions > :where(.btn, button, a) {
    width: 100% !important;
  }
}

@media print {
  html:root:root:root:root:root:root:root:root body .invoice-table-wrap {
    border: 0 !important;
  }

  html:root:root:root:root:root:root:root:root body table.invoice-table,
  html:root:root:root:root:root:root:root:root body table.invoice-table th,
  html:root:root:root:root:root:root:root:root body table.invoice-table td {
    border: 1px solid #000 !important;
  }
}

/* ========================================================================== 
   Exact desktop proportions from the 01:19:24 video reference
   ========================================================================== */

body.authed {
  --ui-sidebar-width: 310px;
}

/* The warning panel in the reference invoice is deliberately semantic red,
   independent from the selectable tenant accent used by the rest of the page. */
html body.page-print_additions_invoice .invoice-footer-notice {
  border-color: rgba(239, 68, 68, .72) !important;
}

html body.page-print_additions_invoice .invoice-footer-notice .notice-title {
  color: #fff !important;
  background: linear-gradient(135deg, #f43f4b, #ef4444) !important;
}

html body.page-print_additions_invoice .invoice-footer-notice .notice-batch {
  color: #fff !important;
  background: rgba(255, 255, 255, .16) !important;
}

@media (min-width: 981px) {
  html body.authed:not(.fs) .sidebar,
  html body.theme-v4.authed:not(.fs) .sidebar,
  html body.theme-laravel.authed:not(.fs) .sidebar,
  html body.theme-shadcn.authed:not(.fs) .sidebar {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 310px !important;
    max-height: 100dvh !important;
  }

  html body.authed:not(.fs) .main,
  html body.theme-v4.authed:not(.fs) .main,
  html body.theme-laravel.authed:not(.fs) .main,
  html body.theme-shadcn.authed:not(.fs) .main {
    margin-top: -12px !important;
    margin-right: 313px !important;
    margin-left: 15px !important;
  }

  html body.authed:not(.fs) .main > .topbar {
    min-height: 102px !important;
    padding: 9px 14px !important;
    border: 1px solid color-mix(in srgb, var(--ui-line) 72%, transparent) !important;
    border-radius: 18px !important;
    background: color-mix(in srgb, var(--ui-surface-solid) 98%, transparent) !important;
    box-shadow: 0 12px 30px -24px rgba(15, 23, 42, .34) !important;
  }

  html body.authed .content {
    padding: 4px 19px 48px !important;
  }

  html body.authed .content > .container {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  html body.authed .content > .container > .card.dashboard-page {
    padding: 24px 18px 18px !important;
    border: 1px solid color-mix(in srgb, var(--ui-line) 72%, transparent) !important;
    border-radius: 22px !important;
    box-shadow: 0 14px 34px -28px rgba(15, 23, 42, .32) !important;
  }

  html body.authed .dashboard-page .dash-head {
    margin-bottom: 16px !important;
  }

  html body.authed .dashboard-page .metrics {
    gap: 14px !important;
  }

  html body.authed .dashboard-page .metric {
    height: 146px !important;
    min-height: 146px !important;
    padding: 14px 16px !important;
    border: 1px solid color-mix(in srgb, var(--ui-line) 66%, transparent) !important;
    border-radius: 17px !important;
  }

  html body.authed .dashboard-page .metric .m-ic {
    width: 42px !important;
    height: 42px !important;
    flex-basis: 42px !important;
    border: 1px solid color-mix(in srgb, var(--ui-line) 64%, transparent) !important;
    border-radius: 13px !important;
  }

  html body.authed .dashboard-page .metric .m-val {
    font-size: 24px !important;
    line-height: 1.25 !important;
  }

  html body.authed .dashboard-page .metric .m-lbl {
    margin-top: 7px !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  html body.authed .dashboard-page .metric .m-sub {
    margin-top: 2px !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
  }

  html body.authed .dashboard-page .dash-grid {
    grid-template-columns: minmax(340px, .73fr) minmax(0, 1.62fr) !important;
    gap: 33px !important;
    margin-top: 12px !important;
  }

  html body.authed .dashboard-page .chart-card {
    border: 1px solid color-mix(in srgb, var(--ui-line) 68%, transparent) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 26px -23px rgba(15, 23, 42, .28) !important;
  }
}

@media (max-width: 980px) {
  html body.authed:not(.fs) .main,
  html body.theme-v4.authed:not(.fs) .main,
  html body.theme-laravel.authed:not(.fs) .main,
  html body.theme-shadcn.authed:not(.fs) .main {
    margin: 0 !important;
  }

  html body.authed .topbar,
  html body.authed .dashboard-page,
  html body.authed main :where(.card, .panel, .form-card, .table-card) {
    border-color: color-mix(in srgb, var(--ui-line) 72%, transparent) !important;
  }
}

/* Genuine desktop page zoom at 90% (operator interfaces only). */
@media screen and (min-width: 981px) {
  html body.authed:not(.student) {
    zoom: .9 !important;
  }

  /* CSS zoom also scales 100dvh; compensate so the fixed sidebar still fills the viewport. */
  html body.authed:not(.student):not(.fs) .sidebar {
    height: 111.111111dvh !important;
    max-height: 111.111111dvh !important;
  }
}

/* Keep the same effective dashboard breakpoints after applying the 90% page zoom. */
@media screen and (min-width: 1063px) {
  html body.authed:not(.student) .dashboard-page .metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media screen and (min-width: 1387px) {
  html body.authed:not(.student) .dashboard-page .metrics {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

@media print {
  html body.authed:not(.student) {
    zoom: 1 !important;
  }
}

/* Operator submenus: larger labels and refined framed rows. */
@media screen {
  html body.authed:not(.sb-mini) .sidebar
  .nav-group.open > .nav-sub {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    margin: 5px 0 11px !important;
    padding: 5px 6px 7px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.authed.sb-mini .sidebar
  .nav-group > .nav-sub {
    display: none !important;
  }

  html body.authed .sidebar .sidebar-nav
  .nav-group.open > button.nav-group-toggle {
    border: 1.111111px solid rgba(255, 255, 255, .18) !important;
    box-shadow:
      0 14px 28px -20px color-mix(in srgb, var(--ui-primary) 75%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, .12) !important;
  }

  html body.authed .sidebar .sidebar-nav
  .nav-group > .nav-sub > a.nav-sub-item {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    width: 100% !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 10px 13px !important;
    border: 1.111111px solid rgba(255, 255, 255, .15) !important;
    border-radius: 15px !important;
    color: #e1e4e4 !important;
    background: rgba(255, 255, 255, .022) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
    transform: none !important;
    transition:
      color var(--ui-transition),
      border-color var(--ui-transition),
      background-color var(--ui-transition),
      box-shadow var(--ui-transition),
      transform var(--ui-transition) !important;
  }

  html body.authed .sidebar .sidebar-nav
  .nav-group > .nav-sub > a.nav-sub-item .st {
    min-width: 0 !important;
    color: currentColor !important;
    font-size: 18px !important;
    font-weight: 850 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body.authed .sidebar .sidebar-nav
  .nav-group > .nav-sub > a.nav-sub-item .si {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: currentColor !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.authed .sidebar .sidebar-nav
  .nav-group > .nav-sub > a.nav-sub-item .si svg {
    width: 20px !important;
    height: 20px !important;
  }

  html body.authed .sidebar .sidebar-nav
  .nav-group > .nav-sub > a.nav-sub-item:hover {
    border-color: color-mix(in srgb, var(--ui-primary) 25%, rgba(255, 255, 255, .17)) !important;
    color: #fff !important;
    background: rgba(255, 255, 255, .065) !important;
    box-shadow:
      0 8px 20px -18px rgba(0, 0, 0, .9),
      inset 0 1px 0 rgba(255, 255, 255, .04) !important;
    transform: translateY(-1px) !important;
  }

  html body.authed .sidebar .sidebar-nav
  .nav-group > .nav-sub > a.nav-sub-item.active {
    border-color: color-mix(in srgb, var(--ui-primary) 48%, rgba(255, 255, 255, .12)) !important;
    color: #fff !important;
    background: color-mix(in srgb, var(--ui-primary) 16%, #101111) !important;
    box-shadow:
      inset -3px 0 0 color-mix(in srgb, var(--ui-primary) 84%, #fff),
      inset 0 1px 0 rgba(255, 255, 255, .045),
      0 10px 22px -18px color-mix(in srgb, var(--ui-primary) 75%, transparent) !important;
    transform: none !important;
  }

  html body.authed .sidebar .sidebar-nav
  .nav-group > .nav-sub > a.nav-sub-item:focus-visible {
    outline: 0 !important;
    border-color: var(--ui-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 16%, transparent) !important;
  }
}

/* Fast additions: crisp field frames without double borders on composite controls. */
@media screen {
  html body.authed .fast-additions {
    --fast-frame-width: 1.111111px;
    --fast-field-line: #cbd7e5;
    --fast-field-hover: #aebfd1;
    --fast-field-bg: #fcfdfe;
    --fast-panel-line: #d9e3ed;
    --fast-panel-hover: color-mix(in srgb, var(--ui-primary) 28%, #d9e3ed);
    --fast-panel-bg: #fff;
    --fast-section-line: #dce5ee;
    --fast-section-bg: #fbfcfe;
    --fast-inset-highlight: rgba(255, 255, 255, .72);
    --fast-inset-highlight-hover: rgba(255, 255, 255, .82);
    --fast-field-shadow: 0 1px 2px rgba(15, 23, 42, .025);
    --fast-card-shadow: 0 8px 24px rgba(15, 23, 42, .045);
    --fast-section-shadow: 0 4px 14px rgba(15, 23, 42, .035);
  }

  html.dark body.authed .fast-additions,
  html[data-theme="dark"] body.authed .fast-additions {
    --fast-field-line: rgba(148, 163, 184, .42);
    --fast-field-hover: rgba(148, 163, 184, .62);
    --fast-field-bg: color-mix(in srgb, var(--ui-surface-solid) 94%, var(--ui-surface-soft));
    --fast-panel-line: rgba(148, 163, 184, .28);
    --fast-panel-hover: color-mix(in srgb, var(--ui-primary) 34%, rgba(148, 163, 184, .30));
    --fast-panel-bg: color-mix(in srgb, var(--ui-surface-solid) 96%, var(--ui-surface-soft));
    --fast-section-line: rgba(148, 163, 184, .24);
    --fast-section-bg: color-mix(in srgb, var(--ui-surface-solid) 97%, var(--ui-surface-soft));
    --fast-inset-highlight: rgba(255, 255, 255, .045);
    --fast-inset-highlight-hover: rgba(255, 255, 255, .065);
    --fast-field-shadow: 0 2px 6px rgba(0, 0, 0, .22);
    --fast-card-shadow: 0 12px 28px rgba(0, 0, 0, .24);
    --fast-section-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  }

  html body.authed .fast-additions #fastFormPane .field > :where(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
    select,
    textarea
  ),
  html body.authed .fast-additions #fastListPane .field > :where(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
    select,
    textarea
  ),
  html body.authed .fast-additions #fastFormPane .field > .row,
  html body.authed .fast-additions #fastListPane :where(
    .lv-inline,
    .rectangle-addition-filter,
    .addition-filter-inline
  ) {
    border: var(--fast-frame-width) solid var(--fast-field-line) !important;
    border-radius: 14px !important;
    background: var(--fast-field-bg) !important;
    box-shadow: var(--fast-field-shadow) !important;
    transition:
      border-color var(--ui-transition),
      box-shadow var(--ui-transition),
      background-color var(--ui-transition) !important;
  }

  html body.authed .fast-additions #fastFormPane .field > .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0 !important;
    min-height: 54px !important;
    padding: 4px !important;
  }

  html body.authed .fast-additions #fastFormPane .field > .row > :where(input, select, textarea) {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.authed .fast-additions #fastFormPane .field > .row > :where(.btn, button) {
    flex: 0 0 auto !important;
    align-self: stretch !important;
    border: 0 !important;
    border-inline-start: var(--fast-frame-width) solid var(--fast-field-line) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html body.authed .fast-additions #fastListPane :where(
    .lv-inline,
    .rectangle-addition-filter,
    .addition-filter-inline
  ) > :where(input, select, textarea) {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.authed .fast-additions #fastListPane .lv-inline > :where(.btn, button) {
    border: 0 !important;
    border-inline-start: var(--fast-frame-width) solid var(--fast-field-line) !important;
    box-shadow: none !important;
  }

  html body.authed .fast-additions #fastFormPane .field > :where(input, select, textarea):hover,
  html body.authed .fast-additions #fastFormPane .field > .row:hover,
  html body.authed .fast-additions #fastListPane .field > :where(input, select, textarea):hover,
  html body.authed .fast-additions #fastListPane :where(
    .lv-inline,
    .rectangle-addition-filter,
    .addition-filter-inline
  ):hover {
    border-color: var(--fast-field-hover) !important;
  }

  html body.authed .fast-additions #fastFormPane .field > :where(input, select, textarea):focus,
  html body.authed .fast-additions #fastFormPane .field > :where(input, select, textarea):focus-visible,
  html body.authed .fast-additions #fastFormPane .field > .row:focus-within,
  html body.authed .fast-additions #fastListPane .field > :where(input, select, textarea):focus,
  html body.authed .fast-additions #fastListPane .field > :where(input, select, textarea):focus-visible,
  html body.authed .fast-additions #fastListPane :where(
    .lv-inline,
    .rectangle-addition-filter,
    .addition-filter-inline
  ):focus-within {
    border-color: var(--ui-primary) !important;
    outline: 0 !important;
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--ui-primary) 14%, transparent),
      0 4px 12px rgba(15, 23, 42, .06),
      var(--fast-field-shadow) !important;
  }

  html body.authed .fast-additions #fastListPane :where(
    .lv-inline,
    .rectangle-addition-filter,
    .addition-filter-inline
  ):focus-within > :where(input, select, textarea) {
    border: 0 !important;
    box-shadow: none !important;
  }

  html body.authed .fast-additions #fastFormPane .field > .row:focus-within > :where(
    input,
    select,
    textarea,
    .btn,
    button
  ),
  html body.authed .fast-additions #fastListPane :where(
    .lv-inline,
    .rectangle-addition-filter,
    .addition-filter-inline
  ):focus-within > :where(input, select, textarea, .btn, button) {
    outline: 0 !important;
    box-shadow: none !important;
  }

  html body.authed .fast-additions #fastFormPane .field > :where(input, select, textarea):disabled,
  html body.authed .fast-additions #fastListPane .field > :where(input, select, textarea):disabled {
    color: var(--ui-muted) !important;
    border-color: var(--fast-panel-line) !important;
    background: var(--ui-surface-soft) !important;
    opacity: 1 !important;
  }

  html body.authed .fast-additions #fastFormPane .field > .row > :where(input, select, textarea):disabled {
    color: var(--ui-muted) !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
  }

  html body.authed .fast-additions #fastFormPane :where(.card.mini, .add-details) {
    border: var(--fast-frame-width) solid var(--fast-panel-line) !important;
    border-radius: 18px !important;
    background: var(--fast-panel-bg) !important;
    box-shadow:
      var(--fast-card-shadow),
      inset 0 1px 0 var(--fast-inset-highlight) !important;
    transition:
      border-color var(--ui-transition),
      box-shadow var(--ui-transition),
      background-color var(--ui-transition) !important;
  }

  html body.authed .fast-additions #fastFormPane :where(.card.mini, .add-details):hover,
  html body.authed .fast-additions #fastFormPane :where(.card.mini, .add-details):focus-within {
    border-color: var(--fast-panel-hover) !important;
    box-shadow:
      0 10px 28px rgba(15, 23, 42, .065),
      inset 0 1px 0 var(--fast-inset-highlight-hover) !important;
  }

  html body.authed .fast-additions #fastListPane > .toolbar.sticky-actions {
    border: var(--fast-frame-width) solid var(--fast-section-line) !important;
    border-radius: 18px !important;
    background: var(--fast-section-bg) !important;
    box-shadow:
      var(--fast-section-shadow),
      inset 0 1px 0 var(--fast-inset-highlight) !important;
  }

  html body.authed .fast-additions .fast-tabs {
    border: var(--fast-frame-width) solid var(--fast-section-line) !important;
    border-radius: 16px !important;
    box-shadow: inset 0 1px 0 var(--fast-inset-highlight) !important;
  }

  html body.authed .fast-additions #fastListPane :where(
    .lv-reset > .btn,
    .lv-hide > .toggle,
    #colMenuBtn
  ) {
    border: var(--fast-frame-width) solid var(--fast-panel-line) !important;
    border-radius: 14px !important;
    background: var(--fast-field-bg) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .035) !important;
  }

  html body.authed .fast-additions #fastListPane :where(
    .lv-reset > .btn,
    .lv-hide > .toggle,
    #colMenuBtn
  ):hover {
    border-color: var(--fast-field-hover) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .055) !important;
  }

  html body.authed .fast-additions :where(.card.mini, .add-details) > .badge,
  html body.authed .fast-additions .lv-quick-links .btn.gray {
    border: 1px solid var(--fast-panel-line) !important;
  }
}