:root { --bg: #0f1520; --panel: #161e2c; --panel-border: #253045; --text: #e7ecf5; --text-dim: #8b98ad; --accent: #4f8cff; --accent-dim: #2e4a80; --good: #35c76e; --fair: #d8c93c; --critical: #e0503c; --unknown: #5c6a80; --radius: 8px; } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .app-shell { display: flex; min-height: 100vh; } .sidebar-backdrop { display: none; } .sidebar { width: 210px; flex-shrink: 0; background: var(--panel); border-right: 1px solid var(--panel-border); padding: 16px 0; display: flex; flex-direction: column; } .sidebar .brand { font-weight: 700; font-size: 16px; padding: 0 16px 16px; border-bottom: 1px solid var(--panel-border); margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; white-space: nowrap; overflow: hidden; } /* min-width: 0 overrides the flex-item default of min-width: auto, which otherwise refuses to shrink a flex child below its content's intrinsic width — without it, "Keke Connect" (longer than FieldLogger's own brand text, which is why this never showed up there) overflowed .brand's fixed width entirely, and that overflow silently ate every bit of padding-right tried here (16px up to 40px, all visually identical) instead of actually pushing the toggle button rightward. brand-name (not brand-text itself, which also holds the logo image) gets the truncation so a still-longer name later degrades to an ellipsis instead of breaking this layout again. */ .brand-text { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; } .brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .brand-logo { height: 16px; width: auto; display: block; flex-shrink: 0; } html.sidebar-collapsed .brand-logo { display: none; } .sidebar-toggle, .mobile-menu-toggle { background: transparent; border: 1px solid var(--panel-border); color: var(--text-dim); border-radius: 6px; width: 28px; height: 28px; flex-shrink: 0; cursor: pointer; font-size: 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .sidebar-toggle:hover, .mobile-menu-toggle:hover { color: var(--text); border-color: var(--accent); } .mobile-menu-toggle { display: none; margin-right: 12px; } .sidebar-toggle svg, .mobile-menu-toggle svg { width: 16px; height: 16px; } .sidebar nav a { display: flex; align-items: center; gap: 10px; padding: 10px 16px; color: var(--text-dim); border-left: 3px solid transparent; white-space: nowrap; overflow: hidden; } .sidebar nav a:hover { color: var(--text); text-decoration: none; background: rgba(255,255,255,0.03); } .sidebar nav a.active { color: var(--text); border-left-color: var(--accent); background: rgba(79,140,255,0.08); } .nav-icon { flex-shrink: 0; width: 20px; display: inline-flex; align-items: center; justify-content: center; } .nav-icon svg { width: 18px; height: 18px; } .sidebar .user-box { margin-top: auto; padding: 12px 16px; border-top: 1px solid var(--panel-border); font-size: 12px; color: var(--text-dim); } .user-box-icon { display: none; align-items: center; justify-content: center; } .user-box-icon svg { width: 18px; height: 18px; } /* Collapsed (icon-rail) state — toggled on so it applies before the sidebar itself has painted (see the blocking script in partials/header.php). */ html.sidebar-collapsed .sidebar { width: 56px; } html.sidebar-collapsed .brand-text, html.sidebar-collapsed .nav-label, html.sidebar-collapsed .user-box-full { display: none; } html.sidebar-collapsed .brand { justify-content: center; padding: 0 0 16px; } html.sidebar-collapsed .sidebar nav a { justify-content: center; padding: 10px 0; } html.sidebar-collapsed .user-box-icon { display: flex; } .main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .topbar { padding: 14px 24px; border-bottom: 1px solid var(--panel-border); display: flex; align-items: center; } .topbar h1 { font-size: 18px; margin: 0; } .content { padding: 24px; flex: 1; overflow: auto; } .badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; } .badge-admin { background: rgba(79,140,255,0.15); color: var(--accent); } .badge-soon { background: rgba(216,201,60,0.15); color: var(--fair); } .badge-good { background: rgba(53,199,110,0.15); color: var(--good); } .badge-poor { background: rgba(216,201,60,0.15); color: var(--fair); } .badge-critical { background: rgba(224,80,60,0.15); color: var(--critical); } .badge-unknown { background: rgba(92,106,128,0.15); color: var(--unknown); } .badge-viewer { background: rgba(255,255,255,0.06); color: var(--text-dim); } @media (max-width: 768px) { .mobile-menu-toggle { display: inline-flex; } /* Collapsed (icon rail, the default on first mobile visit) stays inline. Expanded becomes an overlay drawer instead of pushing content into a sliver: taken out of flow via fixed positioning, so .main (the other flex child) reclaims the full width underneath, with a backdrop to close on outside tap. */ html:not(.sidebar-collapsed) .sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 2001; width: 230px; box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4); } html:not(.sidebar-collapsed) .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 2000; } .topbar { padding: 12px 16px; } .content { padding: 16px; } table { display: block; overflow-x: auto; white-space: nowrap; } } .panel { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; } table { width: 100%; border-collapse: collapse; font-size: 13px; } th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--panel-border); } th { color: var(--text-dim); font-weight: 600; } tr:hover td { background: rgba(255,255,255,0.02); } .btn { display: inline-block; background: var(--accent); color: #fff; border: none; padding: 10px 18px; border-radius: var(--radius); cursor: pointer; font-size: 14px; font-weight: 600; } .btn:hover { background: #3f78e0; text-decoration: none; } .btn-secondary { background: transparent; border: 1px solid var(--panel-border); color: var(--text); } .btn-danger { background: var(--critical); } .btn-sm { padding: 5px 12px; font-size: 12px; } input[type=text], input[type=password], input[type=email], input[type=tel], select { background: #0c1119; border: 1px solid var(--panel-border); color: var(--text); padding: 10px 12px; border-radius: 6px; font-size: 14px; width: 100%; } .form-row { margin-bottom: 14px; } .form-row label { display: block; margin-bottom: 6px; color: var(--text-dim); font-size: 12px; text-transform: uppercase; font-weight: 600; } .error-box { background: rgba(224,80,60,0.12); border: 1px solid var(--critical); color: #ff8f7d; padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px; font-size: 13px; } .notice-box { background: rgba(53,199,110,0.1); border: 1px solid var(--good); color: var(--good); padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px; font-size: 13px; } /* Native — no JS modal library needed, but it defaults to a plain white box + no backdrop dimming, which clashes with this app's dark theme. Used by users.php's "Add admin" / "Manage permissions" dialogs. */ dialog.modal { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius); padding: 20px; color: var(--text); width: min(460px, 90vw); max-height: 85vh; overflow-y: auto; } dialog.modal::backdrop { background: rgba(0,0,0,0.55); } dialog.modal h3 { margin-top: 0; } dialog.modal input[type=text], dialog.modal input[type=email], dialog.modal input[type=password], dialog.modal select { width: 100%; } .login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; } .login-card { width: 340px; max-width: 90vw; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 12px; padding: 28px; } .login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .login-logo { display: block; height: 26px; width: auto; } .login-card h1 { font-size: 18px; margin: 0; } .portal-countdown { font-size: 48px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; color: var(--good); margin: 12px 0 4px; } .sub { color: var(--text-dim); margin: 0 0 20px; font-size: 13px; } .login-card .btn { width: 100%; margin-top: 6px; }