/* ============================================================================
   Beta — Modern theme (design-change-first reskin) · Y GROUP BRAND-ALIGNED
   Brand (from public/assets/img/younglogo.png): BLACK #241f21 + YELLOW #ffe512.
   System: black = structural/primary (the "Y"); yellow = accent/highlight (the
   logo bar) — never text/links (fails contrast). Neutral surfaces for data
   legibility; functional status colours (green/red/amber/cyan) kept distinct
   from brand yellow.
   Layers OVER Bootstrap 3 + w3.css. VISUAL ONLY (no display/position/float/grid),
   so DataTables/dropdowns/modals/collapse + the existing flow keep working.
   ========================================================================== */
:root{
  /* brand */
  --brand:#241f21;            /* Youngman black */
  --brand-hover:#000;
  --brand-ink:#241f21;
  --accent:#ffe512;           /* Youngman yellow */
  --accent-strong:#f5d800;
  --accent-ink:#241f21;       /* text ON yellow = black (high contrast) */
  --accent-subtle:#fff8cc;    /* pale-yellow tint for active/selected */
  /* neutrals */
  --c-slate-0:#fff;--c-slate-50:#f7f8fa;--c-slate-100:#eef1f5;--c-slate-200:#e3e6ec;--c-slate-300:#cbd0da;
  --c-slate-400:#9aa1ae;--c-slate-500:#6b7280;--c-slate-600:#474b55;--c-slate-700:#33363f;--c-slate-900:#241f21;
  --bg-app:#f4f5f7;--surface-1:#fff;--surface-2:#f7f8fa;--surface-3:#eef1f5;
  --text-1:#241f21;--text-2:#474b55;--text-3:#6b7280;
  --border:#e3e6ec;--border-strong:#cbd0da;
  --brand-subtle:var(--accent-subtle);--text-on-brand:#fff;--focus:#241f21;
  /* functional status (NOT brand) */
  --success:#15803d;--success-bg:#ecfdf3;--warning:#b45309;--warning-bg:#fffbeb;
  --danger:#b91c1c;--danger-bg:#fef2f2;--danger-btn:#4b5563;--danger-btn-hover:#374151;--info:#0e7490;--info-bg:#ecfeff;
  --radius:12px;--radius-sm:8px;--radius-pill:999px;
  --shadow-1:0 1px 2px rgba(36,31,33,.06),0 1px 3px rgba(36,31,33,.05);
  --shadow-2:0 8px 24px rgba(36,31,33,.12),0 2px 6px rgba(36,31,33,.06);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* ---- base ---- */
html{font-size:clamp(14px,calc(13px + .15vw),20px)}
html,body#app-layout{background:var(--bg-app)!important;color:var(--text-1);font-family:var(--font)!important;font-size:clamp(14px,calc(13px + .15vw),20px);-webkit-font-smoothing:antialiased}
a{color:var(--brand-ink)}a:hover,a:focus{color:var(--brand-hover);text-decoration:underline}
h1,h2,h3,h4,h5{font-family:var(--font);color:var(--text-1);font-weight:700;letter-spacing:-.01em}
hr{border-top:1px solid var(--border)}
::selection{background:var(--accent);color:var(--accent-ink)}
*:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
::-webkit-scrollbar{width:11px;height:11px}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:9px;border:3px solid var(--bg-app)}

/* ---- top navbar = BLACK + YELLOW (brand) ---- */
.navbar.navbar-inverse{background:var(--brand)!important;border:0!important;border-bottom:3px solid var(--accent)!important;
  box-shadow:var(--shadow-1);margin-bottom:18px;border-radius:0;min-height:auto}
.navbar-inverse .navbar-brand{color:#fff!important;font-weight:800;letter-spacing:.12em;font-size:17px;text-transform:uppercase;display:flex;align-items:center;gap:10px}
.navbar-inverse .navbar-brand::before{content:none}
.navbar-inverse .navbar-nav>li>a{color:#e7e4dd!important;font-weight:600;font-size:12.5px;padding-top:12px;padding-bottom:12px;border-radius:6px}
.navbar-inverse .navbar-nav>li>a:hover,.navbar-inverse .navbar-nav>li>a:focus{color:var(--accent)!important;background:rgba(255,255,255,.06)!important;text-decoration:none}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>.open>a{color:var(--brand)!important;background:var(--accent)!important}
.navbar-inverse .navbar-nav>li>a .caret{opacity:.6}
.navbar-inverse .navbar-toggle{border-color:rgba(255,255,255,.3)}.navbar-inverse .navbar-toggle .icon-bar{background:#fff}
.navbar-inverse .dropdown-menu{background:var(--surface-1);border:1px solid var(--border);box-shadow:var(--shadow-2);border-radius:var(--radius-sm);padding:6px;margin-top:6px}
.navbar-inverse .dropdown-menu>li>a{color:var(--text-2);border-radius:6px;padding:7px 12px;font-size:13px}
.navbar-inverse .dropdown-menu>li>a:hover{background:var(--accent-subtle);color:var(--brand)}
/* Keep the consolidated navbar dropdown readable in EVERY state. BS3 scopes a dark
   variant to @media(max-width:767px): `.navbar-inverse .navbar-nav .open .dropdown-menu`
   goes transparent + items turn light (#9d9d9d), so at ≤767px (zoom / narrow / stuck
   collapse) the menu renders light-on-black — the "dark dropdown" glitch. These match
   BS3's high-specificity selectors with !important so the menu stays white + dark text.
   Colours only — layout/position untouched, so mobile collapse still flows inline. */
.navbar-inverse .navbar-nav .open .dropdown-menu,
.navbar-inverse .dropdown-menu{background:var(--surface-1)!important;border:1px solid var(--border)!important;box-shadow:var(--shadow-2)!important}
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a,
.navbar-inverse .dropdown-menu>li>a{color:var(--text-2)!important;background-color:transparent!important}
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus,
.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a,
.navbar-inverse .dropdown-menu>li>a:hover,
.navbar-inverse .dropdown-menu>li>a:focus,
.navbar-inverse .dropdown-menu>.active>a{background-color:var(--accent-subtle)!important;color:var(--brand)!important}
/* right-side user menu on the black bar */
.navbar-inverse .navbar-right>li>a{color:#e7e4dd!important}
.navbar-inverse .navbar-right>.open>a,.navbar-inverse .navbar-right>li>a:hover{color:var(--accent)!important;background:rgba(255,255,255,.06)!important}

/* ---- panels -> cards ---- */
.panel{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-1);overflow:hidden}
.panel-heading{background:var(--surface-1);border-bottom:1px solid var(--border);color:var(--text-1);font-weight:700;padding:14px 18px;border-radius:0!important}
.panel-title{font-size:15px;font-weight:700;color:var(--text-1)}
.panel-body{padding:18px}
.panel-primary{border-color:var(--border)}.panel-primary>.panel-heading{background:var(--brand);border-bottom-color:var(--brand);color:#fff}
.panel-primary>.panel-heading .panel-title{color:#fff}
.well{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);box-shadow:none}
.w3-card,.w3-card-2,.w3-card-4{box-shadow:var(--shadow-1)!important;border-radius:var(--radius)}
.w3-white,.w3-light-grey{background:transparent!important}

/* ---- dashboard stat tiles (home) — modernise the loud w3 colour blocks ---- */
.w3-container.w3-green,.w3-container.w3-orange,.w3-container.w3-red,.w3-container.w3-blue,.w3-container.w3-purple,.w3-container.w3-teal,
.w3-green,.w3-orange,.w3-red,.w3-blue,.w3-purple,.w3-teal{border-radius:var(--radius)}
.w3-card.w3-green,.w3-card.w3-orange,.w3-card.w3-red,.w3-card.w3-blue,.w3-card.w3-purple,.w3-card.w3-teal{box-shadow:var(--shadow-1)!important;border:0;filter:saturate(.92)}
/* w3-red background → slate (no red backgrounds; red text/font unaffected) */
.w3-red{background-color:var(--danger-btn)!important}

/* ---- tables + DataTables ---- */
.table{background:var(--surface-1);color:var(--text-1);margin-bottom:0}
.table>thead>tr>th{background:var(--surface-3);color:var(--text-2);font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  font-weight:700;border-bottom:2px solid var(--border-strong)!important;border-top:0;padding:11px 14px;vertical-align:middle}
.table>tbody>tr>td{border-top:1px solid var(--border);padding:11px 14px;vertical-align:middle;font-variant-numeric:tabular-nums}
.table-hover>tbody>tr:hover{background:var(--accent-subtle)}
.table-striped>tbody>tr:nth-of-type(odd){background:var(--surface-2)}
.table-bordered,.table-bordered>tbody>tr>td,.table-bordered>thead>tr>th{border-color:var(--border)!important}
.table>thead>tr>th.sorting_asc,.table>thead>tr>th.sorting_desc{box-shadow:inset 0 -2px 0 var(--accent)}
.panel>.table,.panel>.table-responsive>.table{margin-bottom:0}
.dataTables_wrapper{padding:4px 2px}
.dataTables_wrapper .dataTables_filter input,.dataTables_wrapper .dataTables_length select{
  border:1px solid var(--border);border-radius:var(--radius-sm);height:34px;padding:0 10px;background:var(--surface-1);color:var(--text-1);box-shadow:none;margin-left:6px}
.dataTables_wrapper .dataTables_info{color:var(--text-3);font-size:12px;padding-top:10px}

/* ---- buttons (primary = brand black; accent variant = yellow) ---- */
.btn{border-radius:var(--radius-sm);font-weight:600;font-size:13px;padding:8px 15px;border:1px solid var(--border);transition:background .12s,box-shadow .12s;box-shadow:var(--shadow-1)}
.btn:hover{text-decoration:none}.btn:active{box-shadow:none}
.btn-default{background:var(--surface-1);color:var(--text-1);border-color:var(--border-strong)}
.btn-default:hover,.btn-default:focus{background:var(--surface-3);color:var(--text-1)}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-primary:hover,.btn-primary:focus{background:var(--brand-hover);border-color:var(--brand-hover);color:#fff}
.btn-accent,.btn-warning.btn-accent{background:var(--accent);border-color:var(--accent-strong);color:var(--accent-ink)}
.btn-accent:hover{background:var(--accent-strong);color:var(--accent-ink)}
.btn-success{background:var(--success);border-color:var(--success);color:#fff}.btn-success:hover{background:#166534;border-color:#166534;color:#fff}
.btn-danger{background:var(--danger-btn);border-color:var(--danger-btn);color:#fff}.btn-danger:hover,.btn-danger:focus{background:var(--danger-btn-hover);border-color:var(--danger-btn-hover);color:#fff}
.btn-warning{background:var(--warning);border-color:var(--warning);color:#fff}.btn-warning:hover{background:#92400e;border-color:#92400e;color:#fff}
.btn-info{background:var(--info);border-color:var(--info);color:#fff}.btn-info:hover{background:#155e75;border-color:#155e75;color:#fff}
.btn-link{box-shadow:none;border:0;color:var(--brand-ink);font-weight:600}
.btn-xs{padding:4px 9px;font-size:12px}.btn-sm{padding:6px 11px;font-size:12px}.btn-lg{padding:11px 20px;font-size:15px;border-radius:var(--radius)}
.btn-group>.btn{box-shadow:none}

/* ---- forms ---- */
.form-control{height:38px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface-1);color:var(--text-1);
  box-shadow:none;font-size:14px;padding:8px 12px;transition:border-color .12s,box-shadow .12s}
.form-control:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--accent-subtle)}
.form-control::placeholder{color:var(--text-3)}
textarea.form-control{height:auto}
label,.control-label{color:var(--text-2);font-weight:600;font-size:13px;margin-bottom:6px}
.input-group-addon{background:var(--surface-3);border:1px solid var(--border-strong);color:var(--text-2);border-radius:var(--radius-sm)}
.has-error .form-control{border-color:var(--danger)}.has-error .control-label{color:var(--danger)}
.help-block{color:var(--text-3);font-size:12px}
select.form-control{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),linear-gradient(135deg,var(--text-3) 50%,transparent 50%);
  background-position:calc(100% - 17px) 16px,calc(100% - 12px) 16px;background-size:5px 5px;background-repeat:no-repeat;padding-right:32px}
.checkbox input,.radio input,input[type=checkbox],input[type=radio]{accent-color:var(--brand)}

/* ---- labels / badges -> status pills ---- */
.label,.badge{display:inline-flex;align-items:center;gap:5px;font-weight:600;font-size:11.5px;padding:4px 9px;border-radius:var(--radius-pill);letter-spacing:.01em}
.badge{background:var(--surface-3);color:var(--text-2)}
.label-default{background:var(--surface-3);color:var(--text-2)}
.label-success{background:var(--success-bg);color:var(--success)}
.label-danger{background:var(--danger-bg);color:var(--danger)}
.label-warning{background:var(--warning-bg);color:var(--warning)}
.label-info{background:var(--info-bg);color:var(--info)}
.label-primary{background:var(--accent-subtle);color:var(--brand)}

/* ---- alerts ---- */
.alert{border-radius:var(--radius);border:1px solid transparent;padding:13px 16px;font-size:13.5px;box-shadow:var(--shadow-1)}
.alert-success{background:var(--success-bg);color:var(--success);border-color:color-mix(in srgb,var(--success) 22%,transparent)}
.alert-danger{background:var(--danger-bg);color:var(--danger);border-color:color-mix(in srgb,var(--danger) 22%,transparent)}
.alert-warning{background:var(--warning-bg);color:var(--warning);border-color:color-mix(in srgb,var(--warning) 22%,transparent)}
.alert-info{background:var(--info-bg);color:var(--info);border-color:color-mix(in srgb,var(--info) 22%,transparent)}

/* ---- tabs / pills (active = brand) ---- */
.nav-tabs{border-bottom:1px solid var(--border)}
.nav-tabs>li>a{border:0;color:var(--text-2);font-weight:600;border-radius:0;margin-right:4px;padding:10px 14px}
.nav-tabs>li>a:hover{background:transparent;color:var(--brand);border-bottom:2px solid var(--accent-subtle);text-decoration:none}
.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus{color:var(--brand);background:transparent;border:0;border-bottom:3px solid var(--accent);font-weight:700}
.nav-pills>li.active>a,.nav-pills>li.active>a:hover{background:var(--brand);color:#fff}
.nav-pills>li>a{border-radius:var(--radius-pill);color:var(--text-2);font-weight:600}

/* ---- pagination (active = brand black) ---- */
.pagination>li>a,.pagination>li>span{color:var(--text-2);border-color:var(--border);background:var(--surface-1);padding:7px 13px}
.pagination>li:first-child>a,.pagination>li:first-child>span{border-top-left-radius:var(--radius-sm);border-bottom-left-radius:var(--radius-sm)}
.pagination>li:last-child>a,.pagination>li:last-child>span{border-top-right-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm)}
.pagination>.active>a,.pagination>.active>span,.pagination>.active>a:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.pagination>li>a:hover{background:var(--accent-subtle);color:var(--brand);border-color:var(--border)}

/* ---- modals / dropdowns ---- */
.modal-content{border:0;border-radius:var(--radius);box-shadow:var(--shadow-2);overflow:hidden}
.modal-header{border-bottom:1px solid var(--border);padding:16px 20px;background:var(--surface-1)}.modal-title{font-weight:700}
.modal-body{padding:20px}.modal-footer{border-top:1px solid var(--border);padding:14px 20px}
.modal-backdrop.in{opacity:.45;background:#241f21}
.dropdown-menu{border:1px solid var(--border);box-shadow:var(--shadow-2);border-radius:var(--radius-sm);padding:6px}
.dropdown-menu>li>a{border-radius:6px;padding:7px 12px;color:var(--text-2);font-size:13px}
.dropdown-menu>li>a:hover{background:var(--accent-subtle)!important;color:var(--brand)!important;text-decoration:none}
.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover{background:var(--brand);color:#fff}

/* ---- login / guest page (first impression, strongly on-brand) ---- */
body.w3-light-grey .panel:first-of-type:last-of-type,.login-card{box-shadow:var(--shadow-2)}
/* center the login panel + brand bar */
form[action$="/login"]{}
.panel-heading:has(+ .panel-body form[action$="login"]),.panel:has(form[action$="login"]) .panel-heading{border-top:4px solid var(--accent)}

/* ---- misc ---- */
.breadcrumb{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:13px}
.breadcrumb>.active{color:var(--brand)}
.list-group-item{border-color:var(--border)}
.list-group-item.active{background:var(--brand);border-color:var(--brand)}
.progress{border-radius:var(--radius-pill);background:var(--surface-3);box-shadow:none;height:10px}
.progress-bar{background:var(--brand)}.progress-bar.progress-bar-warning{background:var(--accent);color:var(--accent-ink)}
.thumbnail{border-radius:var(--radius);border-color:var(--border)}
.tooltip-inner{background:var(--brand);border-radius:8px}
small,.small,.text-muted{color:var(--text-3)!important}
.text-primary{color:var(--brand)!important}.bg-primary{background:var(--brand)!important;color:#fff}

/* ---- searchable role picker (users create/edit) ---- */
.aa-role-picker{border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface-1);overflow:hidden}
.aa-role-picker__search{display:flex;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.aa-role-picker__search .glyphicon{color:var(--text-3);font-size:13px}
.aa-role-picker__search svg{color:var(--text-3);flex:none}
.aa-role-picker__input{flex:1;border:0;background:transparent;height:40px;font-size:14px;color:var(--text-1);outline:none}
.aa-role-picker__input::placeholder{color:var(--text-3)}
.aa-role-picker__list{max-height:230px;overflow-y:auto;padding:6px}
.aa-role-picker__option{display:flex;align-items:center;gap:10px;margin:0;padding:9px 10px;border-radius:6px;font-weight:500;color:var(--text-1);cursor:pointer}
.aa-role-picker__option:hover{background:var(--accent-subtle)}
.aa-role-picker__option input{margin:0;accent-color:var(--brand);flex:none}
.aa-role-picker__name{line-height:1.2}
.aa-role-picker__empty{padding:10px 12px 12px;margin:0}

/* ---- branded page-header band (opt-in: <div class="beta-page-head">) ---- */
.beta-page-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:var(--brand);border-bottom:3px solid var(--accent);border-radius:var(--radius);
  padding:16px 20px;margin:0 0 20px}
.beta-page-head .bph-titles{min-width:0}
.beta-page-head h1,.beta-page-head h2,.beta-page-head h3{margin:0;color:#fff;font-weight:800;line-height:1.2}
.beta-page-head h2{font-size:24px}.beta-page-head h3{font-size:21px}
.beta-page-head h4{margin:6px 0 0;color:var(--accent);font-size:14px;font-weight:600}
.beta-page-head h4 p{display:inline;margin:0;color:#fff;font-weight:700}
.beta-page-head .bph-actions{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:600px){.beta-page-head{padding:14px 16px}.beta-page-head h2{font-size:20px}.beta-page-head h3{font-size:18px}}

/* ---- responsive: mobile layout improvements ---- */
@media(max-width:767px){
  .panel-body{padding:14px}
  .panel-heading{padding:12px 14px}
  .modal-body{padding:14px}
  .modal-header,.modal-footer{padding:12px 16px}
  .table>thead>tr>th,.table>tbody>tr>td{padding:9px 10px}
  /* float-clearing for DataTables toolbar on mobile */
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_length{float:none;text-align:left;margin-bottom:6px}
  .dataTables_wrapper .dataTables_filter input{width:100%;margin-left:0;box-sizing:border-box}
  /* stack button groups vertically */
  .btn-group-justified{display:flex;flex-direction:column}
  .form-group{margin-bottom:12px}
}
@media(max-width:480px){
  .beta-page-head h2{font-size:18px}.beta-page-head h3{font-size:16px}
  .nav-tabs>li>a{font-size:12px;padding:8px 10px}
  .pagination>li>a,.pagination>li>span{padding:6px 10px;font-size:13px}
}

/* ---- responsive tables app-wide (no per-view .table-responsive needed) ----
   On narrow viewports any Bootstrap .table scrolls horizontally within its own
   box instead of forcing the whole PAGE to scroll sideways. Same effect as a
   .table-responsive wrapper. DataTables (.dataTable) are excluded — display:block
   breaks their thead/tbody column sync — so their .dataTables_wrapper scrolls
   instead. A table already inside .table-responsive just no-ops here. Desktop
   (>991px) is untouched, so wide-screen layouts render exactly as before. */
@media(max-width:991px){
  .table:not(.dataTable){display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .dataTables_wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ============================================================
   FULLY RESPONSIVE NAVBAR + GLOBAL TYPOGRAPHY SCALING
   Targets: mobile phone → tablet → desktop → 1920p → 120" TV
   ============================================================ */

/* ── SHARED: logo mark — single Y box + GROUP text ──────── */
.navbar-inverse .navbar-brand{
  display:flex!important;align-items:center!important;gap:10px!important;
  padding:0 20px!important;height:56px!important;
  font-weight:800!important;letter-spacing:.14em!important;
  text-transform:uppercase!important;line-height:1!important;
}
.navbar-inverse .navbar-brand .ym-logo-box{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:7px;flex-shrink:0;
  background:var(--accent);color:var(--accent-ink);
  font-size:20px;font-weight:900;line-height:1;
  letter-spacing:0;text-transform:none;
}

/* ── MOBILE (<768px) ─────────────────────────────────────── */
@media(max-width:767px){
  /* Taller, touch-friendly bar */
  .navbar.navbar-inverse{min-height:58px!important;margin-bottom:14px!important}
  .navbar-header{
    min-height:58px;display:flex!important;flex-direction:row-reverse!important;
    align-items:center;justify-content:space-between;padding:0 14px;
  }
  .navbar-inverse .navbar-brand{font-size:15px!important;padding:0!important;height:58px!important}
  .navbar-inverse .navbar-brand .ym-logo-box{width:30px;height:30px;font-size:16px}

  /* Hamburger — 44×44px touch target */
  .navbar-inverse .navbar-toggle{
    margin:0!important;padding:0!important;
    width:44px!important;height:44px!important;
    border-radius:8px!important;border-color:rgba(255,255,255,.25)!important;
    display:flex!important;flex-direction:column;align-items:center;
    justify-content:center;gap:5px;
  }
  .navbar-inverse .navbar-toggle .icon-bar{width:22px!important;height:2px!important;border-radius:2px}

  /* Collapsed drawer */
  .navbar-collapse{
    background:#1a1714!important;
    border-top:1px solid rgba(255,255,255,.08)!important;
    box-shadow:0 8px 24px rgba(0,0,0,.4)!important;
    padding:10px 12px 16px!important;
    max-height:calc(100svh - 58px)!important;
    overflow-y:auto!important;-webkit-overflow-scrolling:touch;
  }
  /* Larger tap targets for nav links */
  .navbar-inverse .navbar-nav>li>a{
    font-size:15px!important;font-weight:600!important;
    padding:13px 14px!important;border-radius:8px!important;
    margin-bottom:3px;letter-spacing:.01em!important;
    color:#f0ece5!important;
  }
  .navbar-inverse .navbar-nav>li>a:hover,.navbar-inverse .navbar-nav>li>a:focus{
    color:var(--accent)!important;background:rgba(255,229,18,.1)!important;
  }
  /* Dropdown items — inline on mobile */
  .navbar-inverse .navbar-nav .dropdown-menu{
    background:rgba(255,255,255,.05)!important;
    border:0!important;box-shadow:none!important;
    border-radius:8px!important;padding:6px 6px!important;
    margin:4px 0 6px!important;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu>li>a{
    font-size:14px!important;padding:11px 14px!important;
    border-radius:6px!important;color:rgba(255,255,255,.75)!important;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover{
    background:rgba(255,229,18,.15)!important;color:var(--accent)!important;
  }
  /* User menu divider on mobile */
  .navbar-inverse .navbar-right{
    margin:8px 0 0!important;float:none!important;
    border-top:1px solid rgba(255,255,255,.08)!important;
    padding-top:8px!important;
  }
  /* Global mobile spacing */
  .container-fluid{padding-left:12px!important;padding-right:12px!important;padding-top:.75rem!important}
  h1{font-size:1.6rem!important}h2{font-size:1.4rem!important}
  h3{font-size:1.2rem!important}h4{font-size:1.05rem!important}
  /* Dark drawer: override the desktop white-dropdown rule so menu items are visible */
  .navbar-inverse .navbar-nav .open .dropdown-menu,
  .navbar-inverse .dropdown-menu{background:#2a2623!important;border:1px solid rgba(255,255,255,.1)!important;box-shadow:none!important}
  .navbar-inverse .navbar-nav .open .dropdown-menu>li>a,
  .navbar-inverse .dropdown-menu>li>a{color:rgba(255,255,255,.75)!important;background-color:transparent!important}
  .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus,
  .navbar-inverse .dropdown-menu>li>a:hover,
  .navbar-inverse .dropdown-menu>li>a:focus{background:rgba(255,229,18,.15)!important;color:var(--accent)!important}
  /* Dropdown header labels in dark drawer */
  .navbar-inverse .navbar-nav .open .dropdown-menu .dropdown-header,
  .navbar-inverse .dropdown-menu .dropdown-header{color:rgba(255,255,255,.4)!important;font-size:10px!important;padding:10px 14px 4px!important}
}

/* ── TABLET (768px – 1199px) ─────────────────────────────── */
@media(min-width:768px) and (max-width:1199px){
  .navbar.navbar-inverse{min-height:52px!important}
  .navbar-inverse .navbar-brand{font-size:14px!important;letter-spacing:.1em!important}
  .navbar-inverse .navbar-brand .ym-logo-box{width:28px;height:28px;font-size:15px}
  .navbar-inverse .navbar-nav>li>a{
    font-size:11.5px!important;padding:14px 9px!important;letter-spacing:.02em!important;
  }
  .navbar-inverse .dropdown-menu>li>a{font-size:13px!important;padding:8px 12px!important}
}

/* ── STANDARD DESKTOP (1200px – 1919px) ──────────────────── */
@media(min-width:1200px) and (max-width:1919px){
  .navbar.navbar-inverse{min-height:56px!important}
  .navbar-inverse .navbar-brand{font-size:17px!important}
  .navbar-inverse .navbar-brand .ym-logo-box{width:34px;height:34px;font-size:18px}
  .navbar-inverse .navbar-nav>li>a{
    font-size:13px!important;padding:16px 13px!important;letter-spacing:.02em!important;
  }
  .navbar-inverse .dropdown-menu>li>a{font-size:13.5px!important;padding:8px 13px!important}
  body{font-size:14px!important}
}

/* ── LARGE / UHD MONITORS (1920px – 2559px) ─────────────── */
@media(min-width:1920px){
  .navbar.navbar-inverse{min-height:72px!important;border-bottom-width:4px!important;margin-bottom:26px!important}
  .navbar-inverse .navbar-brand{font-size:21px!important;letter-spacing:.14em!important}
  .navbar-inverse .navbar-brand .ym-logo-box{width:42px;height:42px;font-size:22px;border-radius:8px}
  .navbar-inverse .navbar-nav>li>a{font-size:16px!important;padding:22px 16px!important}
  .navbar-inverse .dropdown-menu{min-width:220px!important;padding:8px!important}
  .navbar-inverse .dropdown-menu>li>a{font-size:15.5px!important;padding:10px 15px!important}
  /* Typography */
  body{font-size:16px!important}
  h1{font-size:2.4rem!important}h2{font-size:2rem!important}
  h3{font-size:1.7rem!important}h4{font-size:1.4rem!important}
  .table>thead>tr>th{font-size:13px!important;padding:14px 18px!important}
  .table>tbody>tr>td{font-size:15px!important;padding:14px 18px!important}
  .btn{font-size:15px!important;padding:9px 22px!important}
  .form-control{font-size:15px!important;height:42px!important}
  .pagination>li>a,.pagination>li>span{font-size:15px!important;padding:8px 14px!important}
  .container-fluid{padding-top:1.5rem!important}
  .beta-page-head h2{font-size:30px!important}.beta-page-head h3{font-size:26px!important}
  .beta-page-head h4{font-size:18px!important}
}

/* ── 4K / 120" TV (2560px+) ─────────────────────────────── */
@media(min-width:2560px){
  .navbar.navbar-inverse{min-height:96px!important;border-bottom-width:5px!important;margin-bottom:40px!important}
  .navbar-inverse .navbar-brand{font-size:30px!important;letter-spacing:.16em!important;padding:0 32px!important}
  .navbar-inverse .navbar-brand .ym-logo-box{width:56px;height:56px;font-size:30px;border-radius:10px}
  .navbar-inverse .navbar-nav>li>a{font-size:22px!important;padding:30px 22px!important;border-radius:8px!important}
  .navbar-inverse .navbar-nav>li>a .caret{border-width:7px 6px 0!important}
  .navbar-inverse .dropdown-menu{min-width:300px!important;padding:10px!important;border-radius:14px!important}
  .navbar-inverse .dropdown-menu>li>a{font-size:21px!important;padding:14px 20px!important;border-radius:8px!important}
  .navbar-inverse .navbar-right>li>a{font-size:22px!important;padding:30px 20px!important}
  /* Typography scale for 4K readability */
  body{font-size:20px!important;-webkit-font-smoothing:antialiased}
  h1{font-size:3.2rem!important}h2{font-size:2.8rem!important}
  h3{font-size:2.3rem!important}h4{font-size:1.9rem!important}
  p,li,td,th,label,input,select,textarea{font-size:inherit!important}
  .table>thead>tr>th{font-size:18px!important;padding:20px 24px!important;letter-spacing:.05em!important}
  .table>tbody>tr>td{font-size:20px!important;padding:20px 24px!important}
  .btn{font-size:20px!important;padding:14px 32px!important;border-radius:12px!important}
  .btn-xs{font-size:16px!important;padding:8px 16px!important}
  .btn-sm{font-size:18px!important;padding:11px 22px!important}
  .btn-lg{font-size:24px!important;padding:18px 40px!important}
  .form-control{font-size:20px!important;height:60px!important;padding:14px 18px!important;border-radius:10px!important}
  select.form-control{height:60px!important}
  .input-group-addon{font-size:20px!important;padding:14px 18px!important}
  .checkbox label,.radio label{font-size:20px!important}
  .pagination>li>a,.pagination>li>span{font-size:20px!important;padding:12px 22px!important}
  .dropdown-menu>li>a{font-size:20px!important;padding:14px 20px!important}
  .modal-title{font-size:28px!important}
  .modal-body{font-size:20px!important;padding:28px!important}
  .modal-header,.modal-footer{padding:20px 28px!important}
  .alert{font-size:20px!important;padding:18px 22px!important}
  .label,.badge{font-size:16px!important;padding:6px 12px!important;border-radius:8px!important}
  .help-block,.text-muted,.small,small{font-size:17px!important}
  .dataTables_wrapper .dataTables_length label,
  .dataTables_wrapper .dataTables_filter label,
  .dataTables_wrapper .dataTables_info{font-size:18px!important}
  .dataTables_wrapper .dataTables_paginate .paginate_button{font-size:18px!important;padding:10px 18px!important}
  .container-fluid{padding-top:2rem!important;padding-left:32px!important;padding-right:32px!important}
  .beta-page-head{padding:24px 28px!important;border-bottom-width:5px!important;border-radius:16px!important}
  .beta-page-head h2{font-size:40px!important}.beta-page-head h3{font-size:36px!important}
  .beta-page-head h4{font-size:24px!important}
  .panel-heading{padding:20px 24px!important}.panel-body{padding:26px!important}
  .panel-title{font-size:22px!important}
}