/* ==========================================================================
   APEXFIELD SPORTS CLUB ADMIN — Design System
   Palette : Navy #1f3c4e (club ink) / Gold #dc9d1a (lane marker)
   Type    : Outfit (display) + Inter (UI/body)
   Signature: "Lane marker" stripe motif (track-lane lines) used as active
   states, section dividers, card accents & progress bars.
   ========================================================================== */

:root{
  /* --- brand core --- */
  --navy-900:#152834;
  --navy-800:#1f3c4e;   /* brand primary */
  --navy-700:#28495d;
  --navy-600:#345a70;
  --navy-100:#e6edf1;
  --navy-050:#f2f6f8;

  --gold-700:#a97711;
  --gold-600:#c78a12;
  --gold-500:#dc9d1a;   /* brand accent */
  --gold-400:#e6b64a;
  --gold-100:#fbead0;
  --gold-050:#fdf5e6;

  --ink:#152229;
  --slate:#5c7180;
  --slate-light:#8ea0ac;
  --line:#e1e8ec;
  --bg:#f2f5f7;
  --white:#ffffff;

  --success:#1c9d6c;
  --success-bg:#e2f6ee;
  --danger:#d64545;
  --danger-bg:#fbe7e7;
  --warning:#dc9d1a;
  --warning-bg:#fdf1dc;
  --info:#2a8bb0;
  --info-bg:#e3f2f7;

  --radius-sm:6px;
  --radius:10px;
  --radius-lg:16px;
  --shadow-sm:0 1px 2px rgba(21,40,52,.06);
  --shadow:0 4px 16px rgba(21,40,52,.08);
  --shadow-lg:0 12px 32px rgba(21,40,52,.14);

  --nav-h:64px;
  --subnav-h:56px;
  --lane-h:5px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:14.5px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{
  font-family:'Outfit',system-ui,sans-serif;
  color:var(--navy-900);
  font-weight:700;
  letter-spacing:-.01em;
  margin:0 0 .4em;
}
a{color:var(--navy-800);text-decoration:none;}
a:hover{color:var(--gold-600);}
.text-mono, .stat-value, .kpi-number{font-family:'Outfit',system-ui,sans-serif;font-variant-numeric:tabular-nums;}
::selection{background:var(--gold-100);color:var(--navy-900);}
:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px;}
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--slate-light);border-radius:10px;}

/* ==========================================================================
   LANE MARKER — signature motif
   ========================================================================== */
.lane-strip{
  height:var(--lane-h);
  width:100%;
  background:repeating-linear-gradient(
    90deg,
    var(--gold-500) 0 34px,
    var(--gold-700) 34px 38px,
    transparent 38px 46px
  );
  opacity:.95;
}
.lane-accent{position:relative;}
.lane-accent::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg,var(--gold-500),var(--gold-700));
  border-radius:4px 0 0 4px;
}
.lane-divider{
  border:0; height:3px; margin:1.75rem 0;
  background:repeating-linear-gradient(90deg,var(--gold-500) 0 18px,transparent 18px 26px);
  opacity:.55; border-radius:3px;
}
.section-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--gold-700);
}
.section-eyebrow::before{
  content:""; display:inline-block; width:16px; height:3px;
  background:var(--gold-500); border-radius:3px;
}

/* ==========================================================================
   TOP NAVIGATION (Horizontal — replaces vertical sidebar)
   ========================================================================== */
.topnav{
  height:var(--nav-h);
  background:var(--navy-900);
  display:flex; align-items:center;
  padding:0 20px;
  position:sticky; top:0; z-index:1030;
  box-shadow:0 2px 10px rgba(0,0,0,.18);
}
.topnav .brand{
  display:flex; align-items:center; gap:10px;
  color:var(--white); font-family:'Outfit',sans-serif; font-weight:800;
  font-size:19px; letter-spacing:-.01em; white-space:nowrap; margin-right:28px;
}
.topnav .brand .mark{
  width:36px;height:36px;border-radius:9px;
  background:linear-gradient(145deg,var(--gold-500),var(--gold-700));
  display:flex;align-items:center;justify-content:center;
  color:var(--navy-900); font-weight:800; font-size:17px;
  box-shadow:0 3px 8px rgba(220,157,26,.35);
}
.topnav .brand small{
  display:block;font-family:'Inter',sans-serif;font-weight:500;
  font-size:10px;color:var(--slate-light);letter-spacing:.06em;text-transform:uppercase;
}

.main-nav{display:flex; align-items:stretch; gap:2px; flex:1; height:100%;}
.main-nav>li{list-style:none; position:relative; display:flex; align-items:stretch;}
.main-nav>li>a, .main-nav>li>button{
  display:flex; align-items:center; gap:7px;
  height:100%; padding:0 15px;
  color:rgba(255,255,255,.72); font-weight:600; font-size:13.6px;
  background:transparent; border:0; cursor:pointer;
  position:relative; white-space:nowrap;
  transition:color .15s ease;
}
.main-nav>li>a:hover, .main-nav>li>button:hover, .main-nav>li.active>a, .main-nav>li.active>button{
  color:var(--white);
}
.main-nav>li>a::after, .main-nav>li>button::after{
  content:""; position:absolute; left:14px; right:14px; bottom:0; height:3px;
  background:var(--gold-500); border-radius:3px 3px 0 0;
  transform:scaleX(0); transform-origin:center; transition:transform .18s ease;
}
.main-nav>li>a:hover::after, .main-nav>li>button:hover::after,
.main-nav>li.active>a::after, .main-nav>li.active>button::after{transform:scaleX(1);}
.main-nav .caret{font-size:10px; transition:transform .15s ease;}
.main-nav li.open .caret{transform:rotate(180deg);}
.main-nav .badge-pill{
  background:var(--gold-500); color:var(--navy-900); font-size:10px; font-weight:800;
  border-radius:20px; padding:1px 6px; line-height:1.5;
}

/* dropdown / mega panel */
.nav-drop{
  position:absolute; top:100%; left:0; min-width:220px;
  background:var(--white); border-radius:0 0 var(--radius) var(--radius);
  box-shadow:var(--shadow-lg); padding:8px; display:none; z-index:1040;
  border-top:3px solid var(--gold-500);
}
.main-nav li.open .nav-drop{display:block; animation:dropIn .16s ease;}
@keyframes dropIn{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:translateY(0);}}
.nav-drop a{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--radius-sm);
  color:var(--navy-900); font-size:13.4px; font-weight:600;
}
.nav-drop a i{color:var(--gold-600); width:16px; text-align:center;}
.nav-drop a:hover{background:var(--navy-050); color:var(--navy-900);}
.nav-drop .drop-divider{height:1px; background:var(--line); margin:6px 4px;}

.nav-mega{width:560px; padding:16px; display:flex; gap:22px;}
.nav-mega .col h6{
  font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--slate);
  margin-bottom:8px; font-family:'Inter'; font-weight:700;
}
.nav-mega .col{flex:1;}

.topnav-actions{display:flex; align-items:center; gap:6px;}
.icon-btn{
  width:38px; height:38px; border-radius:10px; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06); color:rgba(255,255,255,.85);
  display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative;
  transition:background .15s ease;
}
.icon-btn:hover{background:rgba(255,255,255,.14); color:var(--white);}
.icon-btn .dot{
  position:absolute; top:6px; right:7px; width:8px; height:8px; border-radius:50%;
  background:var(--gold-500); border:2px solid var(--navy-900);
}
.nav-user{
  display:flex; align-items:center; gap:9px; padding:5px 10px 5px 6px; border-radius:12px;
  cursor:pointer; margin-left:6px; border:1px solid rgba(255,255,255,.12);
}
.nav-user:hover{background:rgba(255,255,255,.08);}
.nav-user img{width:30px;height:30px;border-radius:8px;object-fit:cover; border:2px solid var(--gold-500);}
.nav-user .u-name{color:var(--white); font-size:13px; font-weight:700; line-height:1.1;}
.nav-user .u-role{color:var(--slate-light); font-size:10.5px;}
.nav-toggle{display:none; background:transparent; border:0; color:var(--white); font-size:22px;}

/* ==========================================================================
   SUB HEADER (breadcrumb / page title / search)
   ========================================================================== */
.subheader{
  background:var(--white); border-bottom:1px solid var(--line);
  min-height:var(--subnav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 28px; position:sticky; top:var(--nav-h); z-index:1010;
  box-shadow:var(--shadow-sm); flex-wrap:wrap; gap:10px;
}
.subheader .page-title{display:flex; flex-direction:column; gap:2px;}
.subheader .page-title h1{font-size:19px; margin:0;}
.breadcrumb-trail{display:flex; gap:6px; align-items:center; font-size:12px; color:var(--slate); list-style:none; padding:0; margin:0;}
.breadcrumb-trail li:not(:last-child)::after{content:"/"; margin-left:6px; color:var(--slate-light);}
.breadcrumb-trail a{color:var(--slate);}
.breadcrumb-trail a:hover{color:var(--gold-600);}
.subheader-tools{display:flex; align-items:center; gap:10px;}
.search-box{
  display:flex; align-items:center; gap:8px; background:var(--navy-050);
  border:1px solid var(--line); border-radius:10px; padding:7px 12px; min-width:230px;
}
.search-box input{border:0; background:transparent; outline:0; font-size:13px; width:100%; color:var(--ink);}
.search-box i{color:var(--slate);}

.content{padding:24px 28px 60px;}
@media (max-width:576px){.content{padding:16px;} .subheader{padding:12px 16px;}}

/* ==========================================================================
   CARDS / SURFACES
   ========================================================================== */
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.card-header{
  background:transparent; border-bottom:1px solid var(--line);
  padding:16px 20px; display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.card-header h5, .card-header h6{margin:0; font-size:15px;}
.card-body{padding:20px;}
.card-top-accent{border-top:3px solid var(--gold-500); border-radius:var(--radius-lg) var(--radius-lg) 0 0;}

/* KPI stat cards */
.kpi-card{
  padding:18px 20px; border-radius:var(--radius-lg); background:var(--white);
  border:1px solid var(--line); box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:10px;
}
.kpi-card::after{
  content:""; position:absolute; right:-18px; top:-18px; width:70px; height:70px; border-radius:50%;
  background:var(--kpi-tint,var(--gold-100)); opacity:.65;
}
.kpi-top{display:flex; align-items:center; justify-content:space-between; z-index:1;}
.kpi-icon{
  width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  font-size:18px; background:var(--kpi-tint,var(--gold-100)); color:var(--kpi-color,var(--gold-700)); z-index:1;
}
.kpi-number{font-size:26px; font-weight:800; color:var(--navy-900); z-index:1;}
.kpi-label{color:var(--slate); font-size:12.5px; font-weight:600; z-index:1;}
.kpi-trend{font-size:12px; font-weight:700; display:flex; align-items:center; gap:4px; z-index:1;}
.kpi-trend.up{color:var(--success);}
.kpi-trend.down{color:var(--danger);}

/* progress as lane marker */
.lane-progress{height:8px; border-radius:20px; background:var(--navy-050); overflow:hidden; position:relative;}
.lane-progress > span{
  display:block; height:100%; border-radius:20px;
  background:repeating-linear-gradient(90deg,var(--gold-500) 0 10px, var(--gold-400) 10px 12px);
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{border-radius:9px; font-weight:600; font-size:13.4px; padding:8px 16px; border:1px solid transparent;}
.btn-primary{background:var(--navy-800); border-color:var(--navy-800); color:#fff;}
.btn-primary:hover{background:var(--navy-700); border-color:var(--navy-700); color:#fff;}
.btn-gold, .btn-accent{background:var(--gold-500); border-color:var(--gold-500); color:var(--navy-900); font-weight:700;}
.btn-gold:hover, .btn-accent:hover{background:var(--gold-600); border-color:var(--gold-600); color:var(--navy-900);}
.btn-outline-navy{border-color:var(--navy-800); color:var(--navy-800); background:transparent;}
.btn-outline-navy:hover{background:var(--navy-800); color:#fff;}
.btn-soft{background:var(--navy-050); color:var(--navy-800); border-color:var(--navy-050);}
.btn-soft:hover{background:var(--navy-100);}
.btn-sm{padding:5px 11px; font-size:12.4px;}

/* ==========================================================================
   BADGES / STATUS
   ========================================================================== */
.badge{font-weight:700; font-size:11px; padding:5px 10px; border-radius:20px; letter-spacing:.02em;}
.badge-success{background:var(--success-bg); color:var(--success);}
.badge-danger{background:var(--danger-bg); color:var(--danger);}
.badge-warning{background:var(--warning-bg); color:var(--gold-700);}
.badge-info{background:var(--info-bg); color:var(--info);}
.badge-navy{background:var(--navy-100); color:var(--navy-800);}
.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px;}

/* ==========================================================================
   TABLES / DATATABLES
   ========================================================================== */
table.dataTable{border-collapse:separate !important; border-spacing:0; width:100% !important;}
table.dataTable thead th{
  background:var(--navy-050); color:var(--navy-800); font-family:'Inter'; font-weight:700;
  font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;
  border-bottom:2px solid var(--line) !important; padding:12px 14px !important;
}
table.dataTable tbody td{padding:12px 14px !important; vertical-align:middle; border-bottom:1px solid var(--line);}
table.dataTable tbody tr:hover{background:var(--gold-050);}
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input{
  border:1px solid var(--line); border-radius:8px; padding:5px 10px; font-size:13px; background:#fff;
}
.dataTables_wrapper .dataTables_filter input:focus{outline:2px solid var(--gold-400); border-color:var(--gold-400);}
.dataTables_wrapper .dataTables_paginate .paginate_button{
  border-radius:7px !important; margin:0 2px; border:1px solid transparent !important; padding:4px 10px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background:var(--navy-800) !important; color:#fff !important; border-color:var(--navy-800) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background:var(--gold-100) !important; color:var(--navy-900) !important; border-color:var(--gold-100) !important;
}
table.dataTable>thead .sorting:before, table.dataTable>thead .sorting:after{opacity:.3;}
.member-cell{display:flex; align-items:center; gap:10px;}
.member-cell img{width:36px; height:36px; border-radius:9px; object-fit:cover;}
.member-cell .m-name{font-weight:700; color:var(--navy-900); font-size:13.4px;}
.member-cell .m-sub{font-size:11.5px; color:var(--slate);}

/* ==========================================================================
   FORMS / SELECT2
   ========================================================================== */
.form-label{font-weight:600; font-size:12.8px; color:var(--navy-800); margin-bottom:6px;}
.form-control, .form-select{
  border:1px solid var(--line); border-radius:9px; font-size:13.6px; padding:9px 12px; background:#fff;
}
.form-control:focus, .form-select:focus{
  border-color:var(--gold-500); box-shadow:0 0 0 3px rgba(220,157,26,.15);
}
.input-hint{font-size:11.5px; color:var(--slate); margin-top:4px;}
.form-section-title{
  display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:800; color:var(--navy-900);
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:16px;
}
.form-section-title i{color:var(--gold-600);}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple{
  border:1px solid var(--line) !important; border-radius:9px !important; min-height:41px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:39px; font-size:13.6px; color:var(--ink);}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:39px;}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple{border-color:var(--gold-500) !important;}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
  background:var(--navy-050); border:1px solid var(--navy-100); color:var(--navy-800); border-radius:6px; font-weight:600; font-size:12.4px;
}
.select2-dropdown{border-color:var(--line) !important; border-radius:9px !important; overflow:hidden; box-shadow:var(--shadow);}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--gold-500) !important; color:var(--navy-900) !important;}
.select2-search--dropdown .select2-search__field{border-radius:7px !important; border:1px solid var(--line) !important;}

/* summernote */
.note-editor.note-frame{border:1px solid var(--line) !important; border-radius:var(--radius) !important; overflow:hidden;}
.note-editor .note-toolbar, .note-toolbar-wrapper{background:var(--navy-050) !important; border-bottom:1px solid var(--line) !important;}
.note-btn{border-radius:6px !important;}
.note-editor .note-statusbar{background:var(--white) !important;}

/* cropper / upload */
.avatar-upload{
  position:relative; width:118px; height:118px; border-radius:18px; overflow:hidden; margin:0 auto;
  border:3px solid var(--white); box-shadow:0 0 0 3px var(--gold-500), var(--shadow);
}
.avatar-upload img{width:100%; height:100%; object-fit:cover;}
.avatar-upload .edit-btn{
  position:absolute; bottom:0; left:0; right:0; background:rgba(21,40,52,.78); color:#fff;
  text-align:center; font-size:11px; font-weight:700; padding:5px 0; cursor:pointer;
}
.crop-drop{
  border:2px dashed var(--line); border-radius:var(--radius); padding:26px; text-align:center; color:var(--slate);
  background:var(--navy-050); cursor:pointer; transition:.15s;
}
.crop-drop:hover{border-color:var(--gold-500); background:var(--gold-050);}
.crop-drop i{font-size:26px; color:var(--gold-600); margin-bottom:8px; display:block;}
.crop-container{max-height:360px; overflow:hidden; background:#111;}
.crop-container img{display:block; max-width:100%;}

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.gallery-item{
  position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; box-shadow:var(--shadow-sm);
  border:1px solid var(--line);
}
.gallery-item img{width:100%; height:100%; object-fit:cover; transition:transform .35s ease;}
.gallery-item:hover img{transform:scale(1.08);}
.gallery-item .g-overlay{
  position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(21,40,52,.85));
  display:flex; align-items:flex-end; padding:12px; opacity:0; transition:opacity .2s ease;
}
.gallery-item:hover .g-overlay{opacity:1;}
.g-overlay .g-title{color:#fff; font-weight:700; font-size:13px;}
.g-overlay .g-tag{color:var(--gold-400); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;}
.gallery-filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px;}
.gallery-filters button{
  border:1px solid var(--line); background:#fff; border-radius:20px; padding:6px 15px; font-size:12.5px; font-weight:700; color:var(--slate);
}
.gallery-filters button.active{background:var(--navy-800); border-color:var(--navy-800); color:#fff;}

/* ==========================================================================
   CALENDAR (FullCalendar overrides)
   ========================================================================== */
.fc{--fc-border-color:var(--line); --fc-today-bg-color:var(--gold-050); font-family:'Inter';}
.fc .fc-toolbar-title{font-family:'Outfit'; font-size:18px; color:var(--navy-900); font-weight:800;}
.fc .fc-button-primary{background:var(--navy-800); border-color:var(--navy-800); font-weight:600; font-size:12.6px; text-transform:capitalize;}
.fc .fc-button-primary:hover{background:var(--navy-700); border-color:var(--navy-700);}
.fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active{background:var(--gold-600); border-color:var(--gold-600); color:var(--navy-900);}
.fc-event{border:0 !important; border-radius:6px !important; padding:1px 4px; font-size:11.5px; font-weight:600;}
.fc-daygrid-day-number{color:var(--navy-800); font-weight:600; font-size:12.5px;}
.fc-col-header-cell{background:var(--navy-050);}
.fc-col-header-cell-cushion{color:var(--slate); font-size:11px; text-transform:uppercase; letter-spacing:.05em; font-weight:700;}

/* ==========================================================================
   MISC — timeline, list groups, footer
   ========================================================================== */
.activity-item{display:flex; gap:12px; padding:12px 0; border-bottom:1px dashed var(--line);}
.activity-item:last-child{border-bottom:0;}
.activity-dot{width:34px; height:34px; border-radius:10px; background:var(--navy-050); color:var(--gold-700); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.activity-time{font-size:11px; color:var(--slate-light);}

.footer-bar{
  text-align:center; padding:18px; color:var(--slate); font-size:12px; border-top:1px solid var(--line); background:var(--white);
}

.avatar-stack{display:flex;}
.avatar-stack img{width:30px; height:30px; border-radius:50%; border:2px solid #fff; object-fit:cover; margin-left:-10px;}
.avatar-stack img:first-child{margin-left:0;}

/* offcanvas mobile nav */
.mobile-nav{background:var(--navy-900); color:#fff;}
.mobile-nav .accordion-button{background:var(--navy-800); color:#fff; font-weight:700; font-size:13.5px;}
.mobile-nav .accordion-body a{color:rgba(255,255,255,.75); display:block; padding:8px 0; font-size:13px;}
.mobile-nav .accordion-body a:hover{color:var(--gold-400);}

/* ==========================================================================
   LOGIN PAGE
   ========================================================================== */
.auth-wrap{min-height:100vh; display:flex;}
.auth-side{
  flex:1.1; background:linear-gradient(160deg,var(--navy-900),var(--navy-800) 60%,var(--navy-700));
  color:#fff; padding:60px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden;
}
.auth-side::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:10px;
  background:repeating-linear-gradient(90deg,var(--gold-500) 0 46px, var(--gold-700) 46px 52px, transparent 52px 64px);
}
.auth-form-side{flex:1; display:flex; align-items:center; justify-content:center; padding:40px; background:var(--white);}
.auth-card{width:100%; max-width:400px;}
.auth-stat{display:flex; gap:26px; margin-top:30px;}
.auth-stat .n{font-family:'Outfit'; font-size:26px; font-weight:800; color:var(--gold-400);}
.auth-stat .l{font-size:11.5px; color:rgba(255,255,255,.65); letter-spacing:.03em;}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1200px){
  .gallery-grid{grid-template-columns:repeat(3,1fr);}
  .nav-mega{width:460px;}
}
@media (max-width:991px){
  .main-nav{display:none;}
  .nav-toggle{display:flex; align-items:center; margin-right:6px;}
  .search-box{min-width:150px;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .auth-side{display:none;}
  .subheader{position:static;}
}
@media (max-width:767px){
  .topnav{padding:0 12px;}
  .topnav .brand small{display:none;}
  .subheader{flex-direction:column; align-items:flex-start;}
  .subheader-tools{width:100%; justify-content:space-between;}
  .search-box{flex:1;}
  .content{padding:14px;}
  .kpi-card{padding:14px;}
}
@media (max-width:575px){
  .gallery-grid{grid-template-columns:1fr 1fr;}
  .nav-user .u-meta{display:none;}
}

/* print / reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important;}
}