/* ============================================================================ CAMPUSGATE ADMIN — theme tokens Five palettes, swapped by setting data-theme on . The value comes from site_settings.dashboard_theme (see Settings screen). ============================================================================ */ :root, [data-theme="maroon"]{ --primary:#8B0000; --primary-light:#a52a2a; --primary-dark:#5a0000; --primary-50:#F7E9E6; --accent:#C9A961; --accent-light:#D4AF37; --ink:#1a1a1a; --ink-light:#2e2e2e; --ink-dark:#0d0d0d; } [data-theme="navy"]{ --primary:#1B3A6B; --primary-light:#2C5290; --primary-dark:#0F2547; --primary-50:#E8EEF6; --accent:#3FA9A0; --accent-light:#57C2B8; --ink:#12202E; --ink-light:#1C3044; --ink-dark:#0A1620; } [data-theme="scholar"]{ --primary:#4B2E6F; --primary-light:#6B4593; --primary-dark:#301D48; --primary-50:#F0EAF6; --accent:#C9A961; --accent-light:#D4AF37; --ink:#1E1526; --ink-light:#2D1F3A; --ink-dark:#120C18; } [data-theme="forest"]{ --primary:#2C5233; --primary-light:#3E7248; --primary-dark:#1B3620; --primary-50:#EBF2EC; --accent:#D98E36; --accent-light:#E8A85C; --ink:#16241A; --ink-light:#213524; --ink-dark:#0D160F; } [data-theme="charcoal"]{ --primary:#3A4750; --primary-light:#556370; --primary-dark:#252E34; --primary-50:#EEF1F3; --accent:#4A9FD8; --accent-light:#6FB7E5; --ink:#20262B; --ink-light:#2E363D; --ink-dark:#14181B; } :root{ --white:#ffffff; --gray-50:#FAF8F4; --gray-100:#F2F0EC; --gray-200:#E2DFD8; --gray-300:#C9C4BA; --gray-400:#A39C8E; --gray-500:#7A7367; --gray-600:#4A453D; --gray-700:#242018; --good-bg:#F0FBF4; --good-fg:#0D6B41; --warn-bg:#FEF3D9; --warn-fg:#92670C; --bad-bg:#FBEAEA; --bad-fg:#B3261E; /* Flat, square design language — every corner is a hard 90°. */ --r-sm:0px; --r-md:0px; --r-lg:0px; --r-xl:0px; --r-round:0px; --shadow-xs:0 1px 2px rgba(23,23,17,.04); --shadow-sm:0 1px 2px rgba(23,23,17,.05); --shadow-md:0 2px 6px rgba(23,23,17,.06); --shadow-lg:0 8px 20px rgba(15,20,32,.10); --shadow-primary:none; --ease:cubic-bezier(.4,0,.2,1); } *,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; } } html{ font-size:16px; overflow-x:hidden; } body.admin-body{ font-family:'DM Sans', sans-serif; background:#fff; color:var(--ink); -webkit-font-smoothing:antialiased; line-height:1.45; overflow-x:hidden; max-width:100vw; } a{ color:inherit; } ::selection{ background:rgba(139,0,0,0.14); } :focus-visible{ outline:2px solid var(--primary); outline-offset:2px; } /* ============================================================================ TOP BAR ============================================================================ */ .admin-topbar{ position:fixed; top:0; left:0; right:0; height:54px; background:var(--ink-dark); border-bottom:1px solid rgba(255,255,255,0.08); color:rgba(255,255,255,0.92); display:flex; align-items:center; justify-content:space-between; padding:0 22px; z-index:200; font-size:13px; } .admin-topbar-left{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.01em; } .admin-topbar-left i{ color:var(--accent); font-size:13px; } .admin-topbar-logo{ height:34px; max-width:195px; object-fit:contain; } .admin-topbar-section-badge{ display:none; } .admin-topbar-right{ display:flex; align-items:center; gap:18px; } .admin-role-pill{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; background:transparent; border:1px solid rgba(255,255,255,0.22); padding:4px 10px; border-radius:var(--r-round); color:rgba(255,255,255,0.78); } .admin-gate-pill{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; background:rgba(139,0,0,0.25); border:1px solid var(--accent); padding:4px 10px; border-radius:var(--r-round); color:var(--accent-light); } .admin-gate-pill i{ margin-right:4px; font-size:10px; } .admin-user{ display:flex; align-items:center; gap:9px; padding-left:16px; border-left:1px solid rgba(255,255,255,0.14); } .admin-avatar{ width:26px; height:26px; border-radius:var(--r-round); background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:11px; } .admin-avatar-photo{ width:26px; height:26px; border-radius:var(--r-round); object-fit:cover; } .admin-logout-btn{ background:transparent; border:1px solid rgba(255,255,255,0.18); color:rgba(255,255,255,0.85); padding:7px 13px; border-radius:var(--r-round); font-size:12px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:6px; transition:background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); } .admin-logout-btn:hover{ background:rgba(255,255,255,0.1); color:#fff; border-color:rgba(255,255,255,0.3); } /* ============================================================================ SIDEBAR ============================================================================ */ .admin-shell{ display:block; max-width:100%; overflow-x:hidden; } .admin-sidebar{ position:fixed; top:54px; left:0; bottom:0; width:224px; overflow-y:auto; z-index:10; background:var(--ink-dark); color:#fff; display:flex; flex-direction:column; padding:18px 0 16px; border-right:1px solid rgba(255,255,255,0.06); } /* These two only ever mean anything on the ≤900px Head-of-Security layout (see that media query below) — hidden here by default so they can never leak into the desktop layout as stray unstyled content. */ .mobile-menu-backdrop{ display:none; } .mobile-tabbar{ display:none; } .admin-nav{ display:flex; flex-direction:column; gap:1px; padding:6px 0; } .admin-nav a{ display:flex; align-items:center; gap:11px; padding:10px 20px; border-radius:var(--r-round); color:rgba(255,255,255,0.6); text-decoration:none; font-size:13px; font-weight:600; border-left:2px solid transparent; transition:background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); } .admin-nav a i{ width:16px; text-align:center; font-size:13px; } .admin-nav a:hover{ background:rgba(255,255,255,0.05); color:#fff; } .admin-nav a.active{ background:rgba(255,255,255,0.06); color:#fff; border-left-color:var(--accent); } .admin-nav-divider{ padding:18px 20px 6px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,0.32); } .admin-nav-count{ margin-left:auto; background:var(--accent); color:var(--ink, #1a1a1a); font-size:10px; font-weight:800; line-height:1; padding:3px 6px; border-radius:999px; } .badge.role-housemaster{ background:var(--primary-50); color:var(--primary); } .admin-main{ margin-left:224px; padding-top:54px; min-height:100vh; max-width:100%; overflow-x:hidden; } .admin-content{ padding:36px 44px 64px; max-width:none; width:100%; overflow-x:hidden; } .admin-page-header{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:28px; gap:14px; flex-wrap:wrap; padding-bottom:20px; border-bottom:1px solid var(--gray-200); } .admin-page-header h1{ font-size:21px; font-weight:800; letter-spacing:-.01em; margin-bottom:4px; } .admin-page-header p{ font-size:13px; color:var(--gray-500); } /* ============================================================================ FLASH MESSAGES ============================================================================ */ .flash{ display:flex; align-items:center; gap:10px; padding:13px 16px; border-radius:var(--r-sm); font-size:13.5px; font-weight:600; margin-bottom:20px; border-left:3px solid transparent; } .flash.success{ background:var(--good-bg); color:var(--good-fg); border-left-color:var(--good-fg); } .flash.error{ background:var(--bad-bg); color:var(--bad-fg); border-left-color:var(--bad-fg); } /* ============================================================================ CARDS ============================================================================ */ .admin-card{ background:#fff; border:1px solid var(--gray-200); border-radius:var(--r-lg); padding:28px; margin-bottom:24px; box-shadow:var(--shadow-xs); } .admin-card h2{ font-size:14px; font-weight:700; margin-bottom:16px; letter-spacing:-.005em; padding-bottom:12px; border-bottom:1px solid var(--gray-100); } .admin-card h3{ font-size:11.5px; font-weight:700; color:var(--gray-600); text-transform:uppercase; letter-spacing:.06em; margin:18px 0 10px; } .stat-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; margin-bottom:24px; } .dashboard-grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:20px; margin-bottom:24px; align-items:stretch; } .dash-chart-summary{ font-size:12.5px; color:var(--gray-500); margin-bottom:10px; } .dash-chart-summary strong{ color:var(--gray-700); } .dash-chart-wrap{ position:relative; } .dash-chart{ width:100%; height:180px; display:block; } .dash-bar{ fill:var(--primary-light); transition:fill .15s var(--ease); transform-box:fill-box; transform-origin:50% 100%; animation:dash-bar-grow .5s var(--ease) backwards; } .dash-bar:hover{ fill:var(--primary); } .dash-bar-today{ fill:var(--accent); } .dash-bar-today:hover{ fill:var(--accent-light); } @keyframes dash-bar-grow{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } } @media (prefers-reduced-motion: reduce){ .dash-bar{ animation:none; } } .dash-chart-grid{ stroke:var(--gray-100); stroke-width:1; stroke-dasharray:3,3; } .dash-chart-baseline{ stroke:var(--gray-300); stroke-width:1; } .dash-chart-values{ position:absolute; inset:0; pointer-events:none; } .dash-chart-value{ position:absolute; transform:translateX(-50%); font-size:10.5px; font-weight:800; color:var(--gray-600); white-space:nowrap; animation:dash-value-in .3s var(--ease) backwards; } @keyframes dash-value-in{ from{ opacity:0; transform:translate(-50%, 4px); } to{ opacity:1; transform:translateX(-50%); } } @media (prefers-reduced-motion: reduce){ .dash-chart-value{ animation:none; } } .dash-chart-labels{ display:flex; margin-top:8px; } .dash-chart-label-cell{ flex:1 1 0; min-width:0; text-align:center; font-size:9.5px; font-weight:600; color:var(--gray-500); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .dash-chart-label-cell.is-today{ color:var(--accent); font-weight:800; } .chart-empty{ color:var(--gray-500); font-size:13px; text-align:center; padding:60px 0; } .dash-chart-filter{ display:flex; gap:6px; flex-wrap:wrap; margin-left:auto; } .dash-chart-filter a{ font-size:11.5px; font-weight:700; padding:5px 11px; border-radius:var(--r-round); border:1px solid var(--gray-300); color:var(--gray-600); text-decoration:none; transition:background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); } .dash-chart-filter a:hover{ border-color:var(--primary); color:var(--primary); } .dash-chart-filter a.active{ background:var(--primary); border-color:var(--primary); color:#fff; } .dashboard-export-links{ display:flex; gap:8px; margin-left:auto; } .out-list{ display:flex; flex-direction:column; gap:0; max-height:280px; overflow-y:auto; } .out-list-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 2px; border-bottom:1px solid var(--gray-100); text-decoration:none; color:inherit; } .out-list-row:last-child{ border-bottom:none; } .out-list-row:hover{ background:var(--gray-50); } .out-list-name{ font-size:13px; font-weight:700; } .out-list-meta{ font-size:11.5px; color:var(--gray-500); margin-top:2px; } .out-list-empty{ color:var(--gray-500); font-size:13px; padding:20px 2px; text-align:center; } .stat-card{ background:#fff; border-radius:var(--r-lg); padding:24px; border:1px solid var(--gray-200); border-top:2px solid var(--primary); box-shadow:var(--shadow-xs); position:relative; overflow:hidden; text-decoration:none; color:inherit; transition:background .15s var(--ease), box-shadow .15s var(--ease); } .stat-card::before{ content:none; } .stat-card:hover{ box-shadow:var(--shadow-md); background:var(--gray-50); } .stat-card-icon{ width:36px; height:36px; border-radius:var(--r-sm); background:var(--primary-50); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:14px; margin-bottom:14px; } .stat-card-num{ font-size:28px; font-weight:800; letter-spacing:-.01em; } .stat-card-label{ font-size:11.5px; color:var(--gray-500); font-weight:600; margin-top:4px; text-transform:uppercase; letter-spacing:.03em; } /* ============================================================================ BUTTONS ============================================================================ */ .btn-admin{ display:inline-flex; align-items:center; gap:7px; padding:10px 17px; border-radius:var(--r-sm); font-size:13px; font-weight:700; text-decoration:none; border:1px solid transparent; cursor:pointer; font-family:inherit; transition:box-shadow .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); } .btn-admin.primary{ background:var(--primary); color:#fff; border-color:var(--primary); } .btn-admin.primary:hover{ background:var(--primary-dark); border-color:var(--primary-dark); } .btn-admin.outline{ background:#fff; color:var(--ink); border:1px solid var(--gray-300); } .btn-admin.outline:hover{ background:var(--gray-50); border-color:var(--gray-400); } .btn-admin.danger{ background:#fff; color:#B91C1C; border:1px solid #F3C6CB; } .btn-admin.danger:hover{ background:var(--bad-bg); } .btn-admin.small{ padding:7px 12px; font-size:12px; } .btn-admin:disabled{ opacity:.45; cursor:not-allowed; } /* ============================================================================ FORMS ============================================================================ */ .form-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; } .form-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; } .form-field.full{ grid-column:1 / -1; } .form-field label{ font-size:11.5px; font-weight:700; color:var(--gray-600); text-transform:uppercase; letter-spacing:.04em; } .form-field input, .form-field select, .form-field textarea{ width:100%; padding:11px 13px; border:1px solid var(--gray-300); border-radius:var(--r-sm); font-family:inherit; font-size:13.5px; background:#fff; transition:border-color .15s var(--ease), box-shadow .15s var(--ease); } .form-field input:disabled{ background:var(--gray-100); color:var(--gray-600); } .form-field input:focus, .form-field select:focus, .form-field textarea:focus{ border-color:var(--primary); outline:none; box-shadow:0 0 0 3px var(--primary-50); } .readonly-note{ font-size:11.5px; color:var(--good-fg); display:flex; align-items:center; gap:5px; margin-top:-6px; margin-bottom:14px; } .readonly-note:first-child{ margin-top:0; } .form-row{ display:flex; gap:16px; } .form-row .form-field{ flex:1; min-width:0; } @media (max-width:520px){ .form-row{ flex-direction:column; gap:0; } } /* Combobox: text input + custom suggestion list (used for "Reason for leaving"). */ .combo{ position:relative; } .combo-input{ width:100%; } .combo-list{ position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:50; background:#fff; border:1px solid var(--gray-300); border-radius:var(--r-sm); max-height:220px; overflow-y:auto; box-shadow:var(--shadow-lg); display:none; list-style:none; margin:0; padding:4px 0; } .combo-list.open{ display:block; } .combo-option{ padding:9px 13px; font-size:13.5px; color:var(--ink); cursor:pointer; } .combo-option:hover, .combo-option.active{ background:var(--primary-50); color:var(--primary); } /* Custom-styled hidden but still focusable/functional. */ .file-upload{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .file-upload-input{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .file-upload-button{ display:inline-flex; align-items:center; gap:7px; padding:10px 15px; background:#fff; border:1px solid var(--gray-300); border-radius:var(--r-sm); font-size:12.5px; font-weight:700; color:var(--ink); cursor:pointer; white-space:nowrap; transition:background .15s var(--ease), border-color .15s var(--ease); } .file-upload-button:hover{ background:var(--gray-50); border-color:var(--gray-400); } .file-upload-button:active{ background:var(--gray-100); } .file-upload-input:focus-visible + .file-upload-button{ outline:2px solid var(--primary); outline-offset:2px; } .file-upload-filename{ font-size:12.5px; color:var(--gray-500); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px; } .sw-maroon{ background:linear-gradient(135deg,#8B0000,#C9A961); } .sw-navy{ background:linear-gradient(135deg,#1B3A6B,#3FA9A0); } .sw-scholar{ background:linear-gradient(135deg,#4B2E6F,#C9A961); } .sw-forest{ background:linear-gradient(135deg,#2C5233,#D98E36); } .sw-charcoal{ background:linear-gradient(135deg,#3A4750,#4A9FD8); } /* ============================================================================ RESPONSIVE Three tiers: large tablets / small laptops, tablets (the primary device for gate officers), and phones. Sidebar nav only becomes a scrollable top bar once there's genuinely not enough width for it — down to that point a fixed vertical sidebar is more efficient than eating a horizontal band out of every screen. ============================================================================ */ /* ---- ≤1024px: large tablets landscape / small laptops ---- */ @media (max-width:1024px){ .gate-layout{ grid-template-columns:1fr; } .gate-side{ max-width:480px; width:100%; margin:0 auto; } .stat-grid{ grid-template-columns:1fr 1fr; } .dashboard-grid{ grid-template-columns:1fr; } .control-grid{ grid-template-columns:1fr 1fr; } .system-info-grid{ grid-template-columns:1fr 1fr; } .admin-content{ padding:28px 28px 56px; } } /* ---- ≤900px: tablets (portrait) — the main device gate officers use ---- */ @media (max-width:900px){ .admin-topbar{ padding:0 14px; gap:8px; } .admin-topbar-right{ gap:10px; } .admin-topbar-section-badge{ display:inline-flex; align-items:center; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,0.55); border-left:1px solid rgba(255,255,255,0.18); padding-left:10px; margin-left:2px; white-space:nowrap; } /* Nav moves to a fixed bottom bar — reachable with a thumb, and always available without scrolling back up, which matters when you're standing at a gate holding a tablet rather than sitting at a desk. */ .admin-sidebar{ width:100%; height:auto; position:fixed; top:auto; bottom:0; left:0; right:0; flex-direction:row; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:4px; border-right:none; border-top:1px solid rgba(255,255,255,0.08); border-bottom:none; box-shadow:0 -4px 14px rgba(0,0,0,0.18); z-index:150; } .admin-main{ margin-left:0; padding-bottom:70px; } .admin-nav{ width:100%; flex-direction:row; padding:6px 4px; justify-content:space-around; align-items:stretch; gap:2px; } .admin-nav a{ flex-direction:column; justify-content:center; gap:5px; min-width:68px; flex:1; border-left:none; border-top:2px solid transparent; border-bottom:none; white-space:nowrap; padding:8px 12px; } .admin-nav a:not(:last-child){ border-right:1px solid rgba(255,255,255,0.08); } .admin-nav a i{ font-size:17px; width:auto; } .admin-nav a span{ display:block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; } .admin-nav a.active{ border-top-color:var(--accent); } /* The "Administration" divider doesn't read well squeezed between icons in a horizontal bar — it moves to the top bar instead (see .admin-topbar-section-badge), so it's hidden here entirely. */ .admin-nav-divider{ display:none; } /* ---- Head of Security: 4-item tab bar + slide-out drawer ---- Too many sections for the plain horizontal bar above, so this role gets a compact bottom bar (3 pages + Menu) and the full sidebar becomes an off-canvas drawer opened by the Menu button, instead of being pinned to the bottom. Scoped to body.has-mobile-menu so every other role keeps the plain bottom bar defined above, untouched. */ body.has-mobile-menu .admin-sidebar{ position:fixed; top:0; bottom:0; left:0; right:auto; width:280px; max-width:82vw; height:100%; flex-direction:column; overflow-y:auto; overflow-x:hidden; padding:14px 0 16px; border-right:1px solid rgba(255,255,255,0.08); border-top:none; box-shadow:4px 0 18px rgba(0,0,0,0.25); transform:translateX(-100%); transition:transform .25s ease; z-index:300; } body.has-mobile-menu .admin-sidebar.mobile-open{ transform:translateX(0); } body.has-mobile-menu .admin-nav{ flex-direction:column; width:100%; padding:6px 0; justify-content:flex-start; align-items:stretch; gap:1px; } body.has-mobile-menu .admin-nav a{ flex-direction:row; justify-content:flex-start; gap:12px; min-width:0; flex:none; border-left:3px solid transparent; border-top:none; white-space:normal; padding:13px 20px; border-radius:0; } body.has-mobile-menu .admin-nav a:not(:last-child){ border-right:none; } body.has-mobile-menu .admin-nav a i{ font-size:15px; width:18px; text-align:center; } body.has-mobile-menu .admin-nav a span{ display:inline; font-size:13.5px; font-weight:600; text-transform:none; letter-spacing:0; } body.has-mobile-menu .admin-nav a.active{ border-top-color:transparent; border-left-color:var(--accent); } body.has-mobile-menu .admin-nav-divider{ display:block; } body.has-mobile-menu .admin-main{ margin-left:0; padding-bottom:70px; } body.has-mobile-menu .mobile-menu-backdrop.is-visible{ display:block; position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:250; } body.has-mobile-menu .mobile-tabbar{ display:flex; position:fixed; left:0; right:0; bottom:0; width:100%; z-index:150; background:var(--ink-dark); border-top:1px solid rgba(255,255,255,0.08); box-shadow:0 -4px 14px rgba(0,0,0,0.18); padding:4px; justify-content:space-around; align-items:stretch; } body.has-mobile-menu .mobile-tabbar a, body.has-mobile-menu .mobile-tabbar-menu-btn{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:8px 6px; color:rgba(255,255,255,0.65); text-decoration:none; background:none; border:none; border-top:2px solid transparent; font-family:inherit; cursor:pointer; } body.has-mobile-menu .mobile-tabbar a:not(:last-child), body.has-mobile-menu .mobile-tabbar-menu-btn:not(:last-child){ border-right:1px solid rgba(255,255,255,0.08); } body.has-mobile-menu .mobile-tabbar a i, body.has-mobile-menu .mobile-tabbar-menu-btn i{ font-size:17px; } body.has-mobile-menu .mobile-tabbar a span, body.has-mobile-menu .mobile-tabbar-menu-btn span{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; } body.has-mobile-menu .mobile-tabbar a.active{ color:#fff; border-top-color:var(--accent); } body.has-mobile-menu .mobile-tabbar-menu-btn.is-open{ color:#fff; border-top-color:var(--accent); } .form-grid{ grid-template-columns:1fr; } .admin-content{ padding:22px 20px 48px; } .admin-page-header{ margin-bottom:22px; padding-bottom:16px; } /* Comfortable touch targets: taps matter more than density here. */ .form-field input, .form-field select, .form-field textarea{ padding:13px 14px; font-size:14.5px; } .btn-admin{ padding:12px 18px; font-size:13.5px; } .btn-admin.small{ padding:9px 13px; } .admin-table th, .admin-table td{ padding:15px 16px; } .combo-option{ padding:12px 14px; } } /* ---- ≤600px: phones ---- */ @media (max-width:600px){ .admin-topbar{ padding:0 10px; } .admin-role-pill{ display:none; } .admin-user-name{ display:none; } .admin-user{ padding-left:8px; } .admin-logout-label{ display:none; } .admin-logout-btn{ padding:8px 10px; } .admin-topbar-title{ display:inline-block; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; } .admin-topbar-section-badge{ font-size:9px; padding-left:8px; } .admin-nav a{ min-width:56px; padding:6px 8px; } .admin-nav a i{ font-size:15px; } .admin-nav a span{ font-size:9px; } .admin-content{ padding:16px 14px 32px; } .admin-card{ padding:18px; } .admin-page-header{ flex-direction:column; align-items:stretch; } .admin-page-header .btn-admin{ justify-content:center; } .stat-grid{ grid-template-columns:1fr 1fr; gap:10px; } .stat-card{ padding:16px; } .stat-card-num{ font-size:22px; } .control-grid{ grid-template-columns:1fr; } .system-info-grid{ grid-template-columns:1fr 1fr; } .gate-search{ flex-direction:column; max-width:none; } .gate-search button{ justify-content:center; } .gate-photo-card{ padding:18px 14px; } }