/* VCS Management Portal — shared admin/staff UI styles */ :root { --ink: #16181d; --charcoal: #1f232b; --sidebar: #171a21; --accent: #0084ff; --accent-dark: #0063c4; --accent-light: #e6f3ff; --green: #1a8f5c; --amber: #b9770e; --red: #d64545; --border: #e2e6ea; --fog: #f5f7f9; --white: #ffffff; --text-muted: #6b7280; --radius: 10px; --shadow: 0 2px 10px rgba(15,17,21,0.06); --shadow-md: 0 8px 24px rgba(15,17,21,0.10); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } * { box-sizing: border-box; } /* overflow-x:hidden here is a safety net, not the fix itself — the real fix is .main below, which owns its own scrollbars (both directions) so a wide card never needs to stretch itself to be reachable. Without this net, any wide content we miss on some page would still be able to stretch , which (especially in the mobile sidebar layout below, where the sidebar's "100%" width is relative to ) can drag the whole nav out of alignment with what's actually visible on screen — exactly what showed up on the Requests page in iPad portrait. */ body { margin: 0; background: var(--fog); color: var(--ink); overflow-x: hidden; } a { color: inherit; } h1, h2, h3, h4 { margin: 0 0 6px; font-weight: 700; } p { margin: 0; } button, input, select, textarea { font-family: inherit; font-size: 0.95rem; } /* ---------- Login screens ---------- */ .login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--sidebar); padding: 24px; } .login-card { background: var(--white); width: 100%; max-width: 380px; border-radius: var(--radius); padding: 36px 32px; box-shadow: var(--shadow-md); } .login-card .login-logo { width: 64px; height: auto; display: block; margin: 0 auto 18px; } .login-card .badge { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; margin-bottom: 16px; } .badge-admin { background: var(--accent-light); color: var(--accent-dark); } .badge-staff { background: #eafaf1; color: var(--green); } .login-card h1 { font-size: 1.4rem; margin-bottom: 4px; } .login-card .sub { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 24px; display: block; } .field { margin-bottom: 16px; } .field label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; } .field input, .field select, .field textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--white); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; font-size: 0.92rem; padding: 10px 18px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; transition: background 0.15s ease, box-shadow 0.15s ease; } .btn-block { width: 100%; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-dark); } .btn-secondary { background: var(--white); color: var(--ink); border-color: var(--border); } .btn-secondary:hover { background: var(--fog); } .btn-danger { background: #fdecec; color: var(--red); } .btn-danger:hover { background: #fbdada; } .btn-sm { padding: 6px 12px; font-size: 0.82rem; } .btn:disabled { opacity: 0.55; cursor: not-allowed; } .alt-portal-link { display: block; text-align: center; margin-top: 18px; font-size: 0.85rem; color: var(--text-muted); } .alt-portal-link a { color: var(--accent); font-weight: 600; } .form-error { background: #fdecec; color: var(--red); padding: 10px 14px; border-radius: 8px; font-size: 0.85rem; margin-bottom: 16px; display: none; } .form-error.show { display: block; } /* Same shape as .form-error, but for a plain informational message (e.g. "you were logged out after being idle") that isn't actually an error — the neutral accent color instead of red keeps it from reading as a failure the person did something wrong to cause. */ .form-notice { background: var(--accent-light); color: var(--accent-dark); padding: 10px 14px; border-radius: 8px; font-size: 0.85rem; margin-bottom: 16px; display: none; } .form-notice.show { display: block; } .demo-creds { margin-top: 20px; padding: 12px 14px; background: var(--fog); border-radius: 8px; font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; } /* ---------- App shell ---------- */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: 288px; flex-shrink: 0; background: var(--sidebar); color: rgba(255,255,255,0.85); padding: 22px 16px; display: flex; flex-direction: column; /* Without this, the sidebar is just a normal flex item — it stretches to match whatever height the row ends up (i.e. the taller of sidebar vs. main content), so on long pages like Scheduling (calendar + forms + tables) or Reports (several report sections), the sidebar becomes much taller than the viewport and the "who am I logged in as" block at its bottom scrolls far out of view instead of staying visible. Pinning the sidebar to the viewport and scrolling its own contents independently keeps the account info and nav visible no matter how long the page is. */ position: sticky; top: 0; height: 100vh; overflow-y: auto; } .sidebar-brand { padding: 0 8px 22px; } .sidebar-brand .sidebar-logo { width: 40px; height: auto; display: block; margin-bottom: 12px; } .sidebar-brand .company { font-size: 0.95rem; font-weight: 700; color: #fff; } .sidebar-brand .portal-badge { display: inline-block; margin-top: 8px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; } .sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; } .sidebar-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; font-size: 0.9rem; font-weight: 500; color: rgba(255,255,255,0.72); text-decoration: none; } .sidebar-nav a:hover { background: rgba(255,255,255,0.06); color: #fff; } .sidebar-nav a.active { background: var(--accent); color: #fff; } .sidebar-foot { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 14px; margin-top: 14px; } .sidebar-foot .who { font-size: 0.82rem; color: rgba(255,255,255,0.6); margin-bottom: 10px; } .sidebar-foot .who strong { color: #fff; display: block; font-size: 0.88rem; overflow-wrap: break-word; word-break: break-word; } .sidebar-foot .who span { display: block; /* The sidebar is now wide enough that real email addresses fit on one line. Truncate with an ellipsis instead of wrapping as a safety net for the rare address that's still too long — the full address is always available as a tooltip (title attribute) on hover. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .main { flex: 1; min-width: 0; padding: 32px 40px; /* .main is its own full-height scroll pane, independent of the sidebar (which pins itself separately above) — keeps the account info at the bottom of the sidebar visible no matter how long the page content is, and keeps .main from ever stretching wider than the viewport. */ height: 100vh; overflow-y: auto; } .main-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; flex-wrap: wrap; gap: 12px; } .main-header h1 { font-size: 1.5rem; } .main-header .sub { color: var(--text-muted); font-size: 0.92rem; margin-top: 4px; display: block; } /* ---------- Stat cards ---------- */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 28px; } .stat-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); } .stat-card .num { font-size: 1.7rem; font-weight: 700; } .stat-card .label { font-size: 0.82rem; color: var(--text-muted); margin-top: 2px; } /* ---------- Panels / cards ---------- */ .panel { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 24px; /* No width rule here on purpose — a plain block box just fills .main at the same fixed width every time, on every card, with zero dependency on what's inside it. That's what makes every card on a page the same width as its neighbors, guaranteed, and it's also what keeps the card's own white background/border from ever being pushed around by a wide table — see .panel-body.no-pad below for how the table's overflow is actually handled instead. */ } .panel-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 10px; } .panel-head h2 { font-size: 1.05rem; } .panel-body { padding: 22px; } /* This is the ONE place a wide table's overflow is actually handled: the card itself (.panel) never changes size — only the table scrolls sideways inside this fixed-width box when it needs more room than the card has. overflow-x:auto is a plain, universally-supported CSS feature with no dependency on how a browser computes intrinsic/shrink-to-fit sizing across nested elements, so — unlike letting the card itself try to grow to fit its content — there's no way for a cell to visually escape the card's white background/border; it's clipped and scrollable, always. */ .panel-body.no-pad { padding: 0; overflow-x: auto; } /* ---------- Tables ---------- */ /* width:100% alone isn't reliable here: with table-layout:auto (the default) and a cell that can't shrink — like an action-buttons cell marked white-space:nowrap — some browsers cram every OTHER column down to an uncomfortable minimum (wrapping "Josh Vaughters" onto two lines, an address onto five) rather than reliably growing the table past its container the way .panel-body.no-pad's overflow-x:auto is counting on. min-width:max-content guarantees the table is never narrower than its content actually needs, so it reliably grows past 100% (and scrolls inside the card) exactly when it needs to. */ table { width: 100%; min-width: max-content; border-collapse: collapse; font-size: 0.88rem; } th { text-align: left; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); /* 20px of horizontal padding per side, times 6+ columns on tables like Active Recurring Schedules, was enough on its own — even with zero rows of data — to push the header row past the card's width at ordinary window sizes, clipping the last column until you scrolled. 14px buys back that margin so a normal-width window doesn't trigger a scrollbar just from label padding; a table with genuinely wide data still correctly scrolls (that part is working as intended). */ padding: 12px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; } td { padding: 13px 14px; border-bottom: 1px solid var(--border); vertical-align: top; } tr:last-child td { border-bottom: none; } tbody tr:hover { background: var(--fog); } .empty-row td { text-align: center; color: var(--text-muted); padding: 34px 20px; } /* ---------- Badges / pills ---------- */ .pill { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; text-transform: capitalize; white-space: nowrap; } .pill-scheduled, .pill-open, .pill-pending { background: var(--accent-light); color: var(--accent-dark); } .pill-completed, .pill-resolved, .pill-approved, .pill-active { background: #eafaf1; color: var(--green); } .pill-cancelled, .pill-denied, .pill-inactive { background: #fdecec; color: var(--red); } .pill-in_progress { background: #fff4e0; color: var(--amber); } /* An open/unclaimed shift — deliberately amber, not the same blue as a normal scheduled job, so the two are never mistaken for each other at a glance in either portal. */ .pill-available { background: #fff4e0; color: var(--amber); } .pill-high { background: #fdecec; color: var(--red); } .pill-normal { background: var(--accent-light); color: var(--accent-dark); } /* ---------- Holiday alerts ---------- */ /* The Holiday column stays hidden until at least one visible row actually falls on a holiday — a table gets .show-holidays added at that point. */ .holiday-col { display: none; } table.show-holidays .holiday-col { display: table-cell; } .holiday-alert { display: inline-flex; align-items: center; gap: 4px; background: #fff4e0; color: var(--amber); border: 1px solid #f0dcb3; border-radius: 6px; padding: 3px 8px; font-size: 0.72rem; font-weight: 700; white-space: nowrap; cursor: default; } /* ---------- Calendar view ---------- */ .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .cal-dow { text-align: center; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); padding-bottom: 6px; } .cal-cell { min-height: 92px; border: 1px solid var(--border); border-radius: 8px; padding: 6px 6px 8px; background: var(--white); cursor: pointer; display: flex; flex-direction: column; gap: 3px; transition: border-color 0.15s ease, background 0.15s ease; } .cal-cell:hover { border-color: var(--accent); } .cal-cell.other-month { background: var(--fog); } .cal-cell.other-month .cal-date { color: var(--text-muted); } .cal-cell.today .cal-date { background: var(--accent); color: var(--white); border-radius: 999px; } .cal-cell.selected { background: var(--accent-light); border-color: var(--accent); } .cal-date { font-size: 0.78rem; font-weight: 700; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; } .cal-entry { font-size: 0.68rem; line-height: 1.3; padding: 2px 6px; border-radius: 5px; background: var(--accent-light); color: var(--accent-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-entry.st-completed { background: #eafaf1; color: var(--green); } .cal-entry.st-cancelled { background: #fdecec; color: var(--red); text-decoration: line-through; } .cal-entry.st-available { background: #fff4e0; color: var(--amber); font-weight: 700; } .legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; } .cal-more { font-size: 0.68rem; color: var(--text-muted); font-weight: 600; } .view-toggle .btn.active { background: var(--accent); color: var(--white); border-color: var(--accent); } .pill-low { background: var(--fog); color: var(--text-muted); } /* ---------- Forms (in-panel) ---------- */ .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; } .form-actions { display: flex; gap: 10px; margin-top: 18px; } .field-inline { display: flex; flex-direction: column; gap: 6px; } .field-inline label { font-size: 0.82rem; font-weight: 600; } .checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; } .checkbox-row input { width: auto; } .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); padding: 0 22px; } .tab-btn { background: none; border: none; cursor: pointer; padding: 14px 6px; margin-right: 20px; font-weight: 600; font-size: 0.9rem; color: var(--text-muted); border-bottom: 2px solid transparent; } .tab-btn.active { color: var(--ink); border-bottom-color: var(--accent); } .toast { position: fixed; bottom: 24px; right: 24px; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 8px; font-size: 0.88rem; box-shadow: var(--shadow-md); opacity: 0; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; z-index: 999; } .toast.show { opacity: 1; transform: translateY(0); } .toast.error { background: var(--red); } .day-checks { display: flex; gap: 8px; flex-wrap: wrap; } .day-check { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 0.72rem; color: var(--text-muted); } .day-check input { width: auto; } .muted { color: var(--text-muted); } .small { font-size: 0.82rem; } .mt-0 { margin-top: 0; } /* ---------- Idle session-timeout warning (see initIdleTimeout in common.js) ---------- */ .idle-modal-backdrop { position: fixed; inset: 0; background: rgba(15,17,21,0.55); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; } .idle-modal { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 30px 32px; max-width: 380px; width: 100%; text-align: center; } .idle-modal h2 { font-size: 1.2rem; margin-bottom: 10px; } .idle-modal p { font-size: 0.9rem; margin-bottom: 20px; line-height: 1.5; } .idle-modal .idle-countdown { font-variant-numeric: tabular-nums; color: var(--ink); } /* Under a minute left, the countdown itself turns red — the same escalation in spirit as a separate "1 minute left!" popup, without actually interrupting the person with a second dialog stacked on the first. */ .idle-modal .idle-countdown.urgent { color: var(--red); } .idle-modal .idle-actions { display: flex; gap: 10px; justify-content: center; } @media (max-width: 860px) { .app-shell { flex-direction: column; } .sidebar { width: 100%; flex-direction: row; align-items: center; overflow-x: auto; overflow-y: visible; /* Undo the desktop sticky/full-height treatment — on mobile the sidebar is a normal horizontal top bar, not a pinned side column. */ position: static; top: auto; height: auto; } .sidebar-brand { display: none; } .sidebar-nav { flex-direction: row; } .sidebar-foot { display: none; } .main { padding: 20px; /* On mobile the sidebar becomes a normal top bar (not pinned), so .main shouldn't claim a fixed 100vh — let it size to its content and scroll vertically as part of the normal page again. It keeps its own overflow-x:auto for wide tables. */ height: auto; overflow-y: visible; } }