/* Court Manager responsive role workspace - original white/navy/gold design. */
.responsive-role-nav { display:none; }

@media (max-width:1180px) {
  :root { --responsive-nav-height:76px; }
  html { scroll-padding-top:88px; scroll-padding-bottom:calc(var(--responsive-nav-height) + 24px); }
  body,body[data-theme] { background:#f4f7fb !important; color:#14213d !important; }
  body[data-theme] .main { background:transparent !important; color:#14213d !important; }
  .main { padding-bottom:calc(var(--responsive-nav-height) + 34px) !important; }
  .page { width:min(100%,1080px); margin-inline:auto; }
  body[data-theme] .main .page-header,
  body[data-theme] .main .page-header-surface {
    padding:20px !important;
    border:1px solid #dbe3ef !important;
    border-radius:22px !important;
    background:linear-gradient(135deg,#ffffff 0%,#f6f9ff 100%) !important;
    color:#14213d !important;
    box-shadow:0 14px 34px rgba(15,35,68,.08) !important;
  }
  body[data-theme] .main .page-header h1,body[data-theme] .main .page-header h2,body[data-theme] .main .page-header strong { color:#14213d !important; }
  body[data-theme] .main .page-header p,body[data-theme] .main .page-header .small-muted { color:#64748b !important; }
  body[data-theme] .main .card,
  body[data-theme] .main .module-panel,
  body[data-theme] .main .category-section,
  body[data-theme] .main .stat-card,
  body[data-theme] .main .summary-item,
  body[data-theme] .main .workspace-action-card {
    background:#fff !important;
    color:#14213d !important;
    border-color:#dbe3ef !important;
    border-radius:18px !important;
    box-shadow:0 10px 28px rgba(15,35,68,.06);
  }
  body[data-theme] .main .card h1,body[data-theme] .main .card h2,body[data-theme] .main .card h3,
  body[data-theme] .main .card strong,body[data-theme] .main .module-panel strong,
  body[data-theme] .main .category-section strong,body[data-theme] .main .summary-item strong { color:#14213d !important; }
  body[data-theme] .main .card p,body[data-theme] .main .card span:not(.badge):not(.status-chip),
  body[data-theme] .main .small-muted,body[data-theme] .main .muted { color:#64748b !important; opacity:1 !important; }
  body[data-theme] .main .page-header .trust-note,body[data-theme] .main .page-header .trust-row,
  body[data-theme] .main .page-header .small-muted { color:#526176 !important; opacity:1 !important; }
  body[data-theme] .main .summary-strip .summary-item,
  body[data-theme] .main .stats-grid .stat-card,
  body[data-theme] .main .quick-balance-grid .stat-card,
  body[data-theme] .main .metrics .metric {
    background:#fff !important; color:#14213d !important; border-color:#dbe3ef !important;
  }
  body[data-theme] .main .summary-strip .summary-item span,
  body[data-theme] .main .stats-grid .stat-card span,
  body[data-theme] .main .metrics .metric span { color:#64748b !important; opacity:1 !important; }
  body[data-theme] .main .summary-strip .summary-item strong,
  body[data-theme] .main .stats-grid .stat-card strong,
  body[data-theme] .main .metrics .metric strong { color:#14213d !important; }
  body[data-theme] .main input,body[data-theme] .main select,body[data-theme] .main textarea {
    background:#fff !important; color:#14213d !important; border-color:#cbd5e1 !important;
  }
  body[data-theme] .main input::placeholder,body[data-theme] .main textarea::placeholder { color:#94a3b8 !important; }
  body[data-theme] .main .btn:not(.danger):not(.btn-danger),body[data-theme] .main button:not(.danger):not(.btn-danger) {
    background:#102a49 !important; color:#fff !important; border-color:#244e7c !important;
  }
  body[data-theme] .main .primary { background:#102a49 !important; color:#fff !important; }
  body[data-theme] .main .badge,body[data-theme] .main .status-chip { color:inherit; }
  body[data-theme] .mobile-nav-toggle { background:#102a49 !important; border-color:#d4af37 !important; }
  .responsive-role-nav {
    position:fixed;
    z-index:1080;
    left:50%; bottom:max(10px,env(safe-area-inset-bottom));
    transform:translateX(-50%);
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(0,1fr);
    width:min(760px,calc(100vw - 22px));
    min-height:var(--responsive-nav-height);
    padding:7px;
    border:1px solid #d8c27a;
    border-radius:24px;
    background:rgba(255,255,255,.97);
    box-shadow:0 18px 48px rgba(15,35,68,.2);
    backdrop-filter:blur(18px);
  }
  .responsive-role-tab {
    min-width:0; min-height:60px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:1px; padding:6px 3px;
    border-radius:17px;
    color:#64748b !important; text-decoration:none !important;
    transition:background .16s ease,color .16s ease,transform .16s ease;
  }
  .responsive-role-tab:hover,.responsive-role-tab:focus-visible { background:#f2f6fc; color:#102a49 !important; }
  .responsive-role-tab:active { transform:scale(.96); background:#102a49; color:#fff !important; }
  .responsive-role-tab.active { background:linear-gradient(145deg,#102a49,#173c68); color:#fff !important; box-shadow:0 8px 18px rgba(16,42,73,.22); }
  .responsive-role-icon { font-size:18px; line-height:1; color:#d4af37; }
  .responsive-role-tab strong { max-width:100%; font-size:11px; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .responsive-role-tab small { max-width:100%; font-size:8px; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.82; }
  .mobile-app-bottom-nav { display:none !important; }
  .support-widget { bottom:calc(var(--responsive-nav-height) + 20px) !important; }
  .toolbar,.inline-actions { flex-wrap:wrap; }
  .toolbar > * { min-width:0; }
  button,.btn,input,select,textarea { max-width:100%; }
  button,.btn { min-height:44px; }
  .summary-strip { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .grid-3,.grid-4,.stats-grid,.resource-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .table-wrap { overflow-x:auto; border-radius:16px; -webkit-overflow-scrolling:touch; }
  table { min-width:720px; }
  details > summary { min-height:54px; padding-block:5px; }
  .tournament-command-head,.tournament-manager-header,.tournament-command-actions { display:grid !important; grid-template-columns:1fr !important; }
  .tournament-command-actions .btn,.tournament-command-actions button { width:100%; }
  .tournament-flow-board,.tournament-bracket-board { overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

@media (max-width:700px) {
  :root { --responsive-nav-height:72px; }
  .main { padding:76px 11px calc(var(--responsive-nav-height) + 28px) !important; }
  .content-shell::before { inset:68px 5px 8px !important; border-radius:20px !important; }
  .page-header,.page-header-surface { padding:17px !important; border-radius:19px !important; }
  .page-header h1 { font-size:clamp(1.65rem,8vw,2.15rem) !important; line-height:1.05; }
  .responsive-role-nav { width:calc(100vw - 12px); bottom:6px; padding:5px; border-radius:22px; }
  .responsive-role-tab { min-height:58px; padding-inline:1px; }
  .responsive-role-icon { font-size:16px; }
  .responsive-role-tab strong { font-size:9px; }
  .responsive-role-tab small { display:none; }
  .summary-strip,.grid-2,.grid-3,.grid-4,.stats-grid,.resource-grid,.form-grid { grid-template-columns:1fr !important; }
  .card,.module-panel,.category-section { padding:14px !important; border-radius:17px !important; }
  .stat-card,.summary-item { min-height:88px; padding:13px !important; }
  .inline-actions,.toolbar { align-items:stretch !important; }
  .inline-actions > a,.inline-actions > button,.inline-actions > form,.toolbar > a,.toolbar > button { flex:1 1 140px; }
  .inline-actions form button { width:100%; }
  .parent-fee-page .quick-balance-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .parent-fee-page .child-fee-card { padding:14px !important; }
  .parent-fee-page .court-topup-qr-card img,.parent-fee-page .payment-qr-link img { height:auto !important; max-height:420px; }
  .coach-month-calendar { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .tournament-workspace-panel > summary,.category-section > summary { align-items:flex-start; gap:8px; }
  .court-booking-page .court-facility-list,.court-booking-page .court-booking-grid { grid-template-columns:1fr !important; }
}

@media (max-width:430px) {
  .parent-fee-page .quick-balance-grid { grid-template-columns:1fr !important; }
  .responsive-role-tab strong { font-size:8px; }
}

/* Accessible compact light navigation shared by every role. */
@media (max-width:1180px) {
  html { font-size:17px; }
  body,body[data-theme] { background:#fffdf8 !important; }
  .main { padding-inline:12px !important; }
  body[data-theme] .main .card,
  body[data-theme] .main .module-panel,
  body[data-theme] .main .category-section,
  body[data-theme] .main .stat-card,
  body[data-theme] .main .summary-item,
  body[data-theme] .main .workspace-action-card {
    border-color:#ead8ae !important;
    box-shadow:0 6px 18px rgba(61,49,21,.06) !important;
  }
  body[data-theme] .main .btn:not(.danger):not(.btn-danger),
  body[data-theme] .main button:not(.danger):not(.btn-danger),
  body[data-theme] .main .primary {
    background:#e0ae28 !important;
    color:#1f2329 !important;
    border-color:#cf9910 !important;
  }
  body[data-theme] .mobile-nav-toggle { background:#fff !important; color:#1f2329 !important; border-color:#d9aa2c !important; }
  .responsive-role-nav {
    min-height:68px;
    padding:5px;
    border-color:#d9aa2c;
    background:rgba(255,255,255,.98);
    box-shadow:0 12px 30px rgba(62,50,22,.14);
  }
  .responsive-role-tab { min-height:56px; color:#444b56 !important; border:1px solid transparent; }
  .responsive-role-tab:hover,.responsive-role-tab:focus-visible { background:#fff8e5; color:#1f2329 !important; border-color:#ead8ae; }
  .responsive-role-tab:active { background:#f1c64f; color:#1f2329 !important; }
  .responsive-role-tab.active { background:linear-gradient(145deg,#f6d46f,#dfa91f); color:#1f2329 !important; border-color:#d09b15; box-shadow:0 5px 14px rgba(159,115,9,.18); }
  .responsive-role-icon { color:#a87400; }
  .responsive-role-tab strong { font-size:12px; line-height:1.15; }
  .responsive-role-tab small { font-size:9px; color:#535b67; opacity:1; }
  .card,.module-panel,.category-section { padding:14px !important; }
  section + section,.card + .card { margin-top:12px !important; }
  p { line-height:1.48; }
}

@media (max-width:700px) {
  html { font-size:16px; }
  :root { --responsive-nav-height:68px; }
  .main { padding:68px 8px calc(var(--responsive-nav-height) + 22px) !important; }
  .responsive-role-nav { width:calc(100vw - 10px); bottom:5px; }
  .responsive-role-tab { min-height:54px; }
  .responsive-role-tab strong { font-size:11px; }
  .card,.module-panel,.category-section { padding:12px !important; }
  .stat-card,.summary-item { min-height:74px; padding:11px !important; }
  details > summary { min-height:46px; }
}

@media (max-width:430px) {
  .responsive-role-tab strong { font-size:10px; }
}