/* ========================================================================= QA Portal — Design System Fonts : DM Sans (headings) · Source Sans 3 (body) via Google Fonts Theming: [data-theme="light|dark"] on ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap'); /* ========================================================================= Design tokens — light mode (default) ========================================================================= */ :root { /* Brand */ --accent: #2563EB; --accent-hover: #1D4ED8; --accent-light: #EFF6FF; --accent-border: #BFDBFE; /* Semantic colours */ --success: #16A34A; --success-light: #F0FDF4; --success-border: #86EFAC; --warning: #D97706; --warning-light: #FFFBEB; --warning-border: #FCD34D; --danger: #DC2626; --danger-light: #FEF2F2; --danger-border: #FCA5A5; /* Surface */ --bg: #F8FAFC; --surface: #FFFFFF; --surface-2: #F1F5F9; --surface-3: #E2E8F0; --border: #E2E8F0; --border-strong: #CBD5E1; --text: #0F172A; --text-muted: #64748B; --text-subtle: #94A3B8; /* Header */ --header-bg: #0F172A; --header-text: #F1F5F9; --header-muted: #94A3B8; --header-hover: rgba(255, 255, 255, .08); /* Elevation */ --shadow-xs: 0 1px 2px rgba(0,0,0,.06); --shadow-sm: 0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06); --shadow-md: 0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -2px rgba(0,0,0,.06); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -4px rgba(0,0,0,.06); /* Radii */ --r-sm: 0.25rem; --r: 0.5rem; --r-lg: 0.75rem; --r-xl: 1rem; --r-full: 9999px; /* Layout */ --header-h: 3.5rem; --content-max: 1280px; } /* ========================================================================= Dark mode tokens ========================================================================= */ [data-theme="dark"] { --bg: #0F172A; --surface: #1E293B; --surface-2: #293548; --surface-3: #334155; --border: #334155; --border-strong: #475569; --text: #F1F5F9; --text-muted: #94A3B8; --text-subtle: #64748B; --header-bg: #080D1A; --header-text: #F1F5F9; --header-muted: #64748B; --accent: #3B82F6; --accent-hover: #2563EB; --accent-light: #1E3A5F; --accent-border: #1D4ED8; --success-light: #052E16; --success-border: #166534; --warning-light: #422006; --warning-border: #92400E; --danger-light: #3B0A0A; --danger-border: #991B1B; --shadow-xs: 0 1px 2px rgba(0,0,0,.30); --shadow-sm: 0 1px 3px rgba(0,0,0,.40), 0 1px 2px rgba(0,0,0,.30); --shadow-md: 0 4px 6px -1px rgba(0,0,0,.50), 0 2px 4px -2px rgba(0,0,0,.40); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.50), 0 4px 6px -4px rgba(0,0,0,.40); } /* ========================================================================= Reset ========================================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; } img, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; } /* ========================================================================= Base ========================================================================= */ body { font-family: 'Source Sans 3', 'Segoe UI', Arial, sans-serif; font-size: 1rem; line-height: 1.6; color: var(--text); background: var(--bg); min-height: 100vh; transition: background .15s, color .15s; } h1, h2, h3, h4, h5, h6 { font-family: 'DM Sans', 'Segoe UI', Arial, sans-serif; font-weight: 600; line-height: 1.3; color: var(--text); } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* ========================================================================= App shell (authenticated layout) ========================================================================= */ .app-shell { display: flex; flex-direction: column; min-height: 100vh; } /* ----- Header ----- */ .app-header { position: sticky; top: 0; z-index: 100; height: var(--header-h); background: var(--header-bg); display: flex; align-items: center; padding: 0 1.25rem; gap: 0.75rem; box-shadow: 0 1px 0 rgba(255,255,255,.06); flex-shrink: 0; } .app-header__logo { font-family: 'DM Sans', sans-serif; font-size: 1.0625rem; font-weight: 700; color: var(--header-text); text-decoration: none; letter-spacing: .01em; white-space: nowrap; flex-shrink: 0; display: flex; align-items: center; gap: 0.5rem; } .app-header__logo:hover { text-decoration: none; color: var(--header-text); } /* .logo-portal colours the "Portal" part of the logo wordmark */ .logo-portal { color: var(--accent); } .app-header__spacer { flex: 1; } .app-header__actions { display: flex; align-items: center; gap: 0.25rem; } /* ----- Icon button (theme toggle, bell) ----- */ .icon-btn { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--r); background: transparent; border: none; cursor: pointer; color: var(--header-muted); transition: background .15s, color .15s; flex-shrink: 0; } .icon-btn:hover { background: var(--header-hover); color: var(--header-text); } .icon-btn svg { width: 1.125rem; height: 1.125rem; } /* ----- Theme toggle slider ----- */ .theme-toggle { display: inline-flex; align-items: center; gap: 0.4rem; background: transparent; border: none; cursor: pointer; padding: 0.25rem 0.5rem; border-radius: var(--r); color: var(--header-muted); transition: background .15s, color .15s; flex-shrink: 0; } .theme-toggle:hover { background: var(--header-hover); color: var(--header-text); } .theme-toggle__icon { display: flex; align-items: center; flex-shrink: 0; line-height: 1; } .theme-toggle__icon svg { width: 0.875rem; height: 0.875rem; } .theme-toggle__track { position: relative; width: 2.375rem; /* 38 px */ height: 1.375rem; /* 22 px */ background: rgba(255, 255, 255, .18); border-radius: var(--r-full); transition: background .25s; flex-shrink: 0; } [data-theme="dark"] .theme-toggle__track { background: var(--accent); } .theme-toggle__thumb { position: absolute; top: 0.1875rem; /* 3 px — centres 16 px thumb in 22 px track */ left: 0.1875rem; /* 3 px */ width: 1rem; /* 16 px */ height: 1rem; /* 16 px */ background: #fff; border-radius: var(--r-full); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .25s cubic-bezier(.4, 0, .2, 1); } /* Dark: slide = track(38) − thumb(16) − 2 × pad(6) = 16 px = 1 rem */ [data-theme="dark"] .theme-toggle__thumb { transform: translateX(1rem); } /* Auth-page variant — fixed corner button with light-bg colour context */ .auth-theme-toggle { position: fixed; top: 1rem; right: 1rem; z-index: 50; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-full); box-shadow: var(--shadow-sm); padding: 0.375rem 0.625rem; color: var(--text-muted); } .auth-theme-toggle:hover { background: var(--surface-2); color: var(--text); } /* Track on light background defaults to a soft gray */ .auth-theme-toggle .theme-toggle__track { background: var(--surface-3); } [data-theme="dark"] .auth-theme-toggle .theme-toggle__track { background: var(--accent); } /* Thumb uses accent in light mode, white in dark mode */ .auth-theme-toggle .theme-toggle__thumb { background: var(--accent); box-shadow: none; } [data-theme="dark"] .auth-theme-toggle .theme-toggle__thumb { background: #fff; } /* ----- Account dropdown ----- */ .account-menu { position: relative; } .account-menu__btn { display: flex; align-items: center; gap: 0.5rem; background: transparent; border: none; cursor: pointer; padding: 0.3125rem 0.5rem; border-radius: var(--r); transition: background .15s; } .account-menu__btn:hover { background: var(--header-hover); } .account-menu__avatar { width: 2rem; height: 2rem; border-radius: var(--r-full); background: var(--accent); color: #fff; font-family: 'DM Sans', sans-serif; font-size: 0.6875rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: .04em; } .account-menu__name { font-size: 0.875rem; font-weight: 500; color: var(--header-text); max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-menu__caret { color: var(--header-muted); transition: transform .15s; flex-shrink: 0; } .account-menu__caret svg { width: 1rem; height: 1rem; } .account-menu__btn[aria-expanded="true"] .account-menu__caret { transform: rotate(180deg); } /* Dropdown panel */ .account-menu__panel { display: none; position: absolute; top: calc(100% + 0.375rem); right: 0; min-width: 15rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 0.375rem; z-index: 200; } .account-menu__panel.is-open { display: block; } .account-menu__header { padding: 0.625rem 0.75rem 0.5rem; border-bottom: 1px solid var(--border); margin-bottom: 0.375rem; } .account-menu__full-name { font-size: 0.875rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .account-menu__role { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.125rem; } .account-menu__item { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.75rem; border-radius: var(--r-sm); font-size: 0.875rem; color: var(--text); cursor: pointer; background: transparent; border: none; width: 100%; text-align: left; text-decoration: none; transition: background .1s; } .account-menu__item:hover, .account-menu__item:focus { background: var(--surface-2); text-decoration: none; outline: none; } .account-menu__item svg { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--text-muted); } .account-menu__item--disabled { color: var(--text-subtle); cursor: not-allowed; pointer-events: none; } .account-menu__item--disabled svg { color: var(--text-subtle); } .account-menu__item--danger { color: var(--danger); } .account-menu__item--danger svg { color: var(--danger); } .account-menu__item--danger:hover { background: var(--danger-light); } .account-menu__divider { height: 1px; background: var(--border); margin: 0.375rem 0; } /* Logout form wrapping a menu item */ .account-menu__logout-form { margin: 0; padding: 0; } .account-menu__logout-form .account-menu__item { width: 100%; } /* ========================================================================= Breadcrumb bar — full-width strip below the header Doubles as the action bar (export buttons etc.) on report pages ========================================================================= */ .breadcrumb-bar { background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; min-height: 2.625rem; gap: 1rem; flex-shrink: 0; } .breadcrumb-bar .breadcrumb { margin-bottom: 0; } .breadcrumb__home-link { display: flex; align-items: center; gap: 0.3rem; color: var(--text-muted); line-height: 1; font-size: 0.8125rem; } .breadcrumb__home-link:hover { color: var(--accent); text-decoration: none; } .breadcrumb__home-link svg { width: 0.9375rem; height: 0.9375rem; } .breadcrumb-bar__actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } /* ========================================================================= Main content area ========================================================================= */ .site-main { flex: 1; max-width: var(--content-max); width: 100%; margin: 0 auto; padding: 1.75rem 1.5rem 3rem; } /* ----- Page header (title + breadcrumb + actions) ----- */ .page-header { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.75rem; flex-wrap: wrap; } .page-header__title-group { flex: 1; min-width: 0; } .page-header__title-group h1 { font-size: 1.5rem; font-weight: 700; color: var(--text); } .page-header__subtitle { font-size: 0.9375rem; color: var(--text-muted); margin-top: 0.25rem; } .page-header__actions { display: flex; align-items: center; gap: 0.625rem; flex-shrink: 0; } /* ----- Breadcrumb ----- */ .breadcrumb { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--text-muted); margin-bottom: 0; flex-wrap: wrap; } .breadcrumb a { color: var(--text-muted); } .breadcrumb a:hover { color: var(--accent); text-decoration: none; } .breadcrumb__sep { color: var(--text-subtle); } .breadcrumb__current { color: var(--text); } /* ========================================================================= Cards ========================================================================= */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 1.5rem; } .card-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; } .card-title { font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: 600; color: var(--text); } .card-subtitle { font-size: 0.875rem; color: var(--text-muted); margin-top: 0.125rem; } /* ========================================================================= Dashboard nav grid ========================================================================= */ .nav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; } .nav-card { display: flex; flex-direction: column; align-items: flex-start; gap: 0.875rem; padding: 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); color: var(--text); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .1s; cursor: pointer; } .nav-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; color: var(--text); } .nav-card__icon { width: 2.5rem; height: 2.5rem; border-radius: var(--r); background: var(--accent-light); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .nav-card__icon svg { width: 1.25rem; height: 1.25rem; } .nav-card__title { font-family: 'DM Sans', sans-serif; font-size: 0.9375rem; font-weight: 600; color: var(--text); } .nav-card__desc { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.5; } /* ========================================================================= Stat cards ========================================================================= */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; } .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.25rem 1.5rem; box-shadow: var(--shadow-sm); } .stat-card__label { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 0.5rem; } .stat-card__value { font-family: 'DM Sans', sans-serif; font-size: 2rem; font-weight: 700; color: var(--text); line-height: 1; margin-bottom: 0.25rem; } .stat-card__trend { font-size: 0.8125rem; color: var(--text-muted); } .stat-card__trend--up { color: var(--success); } .stat-card__trend--down { color: var(--danger); } /* ========================================================================= Alerts / Flash messages ========================================================================= */ .alert { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.875rem 1rem; border-radius: var(--r); font-size: 0.9375rem; line-height: 1.5; margin-bottom: 1.25rem; border: 1px solid transparent; } .alert svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; margin-top: .15rem; } .alert ul { margin: 0.25rem 0 0 1.25rem; } .alert-success { background: var(--success-light); border-color: var(--success-border); color: var(--success); } .alert-error { background: var(--danger-light); border-color: var(--danger-border); color: var(--danger); } .alert-warning { background: var(--warning-light); border-color: var(--warning-border); color: var(--warning); } .alert-info { background: var(--accent-light); border-color: var(--accent-border); color: var(--accent); } /* ========================================================================= Forms ========================================================================= */ .form-group { margin-bottom: 1.125rem; } .form-label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--text); margin-bottom: 0.375rem; } /* Input wrapper — positions icons and password toggle relative to the input */ .input-wrap { position: relative; display: flex; align-items: center; } .input-wrap .input-icon { position: absolute; left: 0.75rem; color: var(--text-subtle); pointer-events: none; display: flex; align-items: center; } .input-wrap .input-icon svg { width: 1rem; height: 1rem; } /* When the wrapper has an icon, indent the input text */ .input-wrap .form-control { padding-left: 2.5rem; } /* Password show/hide toggle */ .pw-toggle { position: absolute; right: 0.625rem; background: transparent; border: none; cursor: pointer; color: var(--text-muted); font-size: 0.75rem; font-weight: 500; padding: 0.25rem 0.375rem; border-radius: var(--r-sm); transition: color .1s, background .1s; display: flex; align-items: center; gap: 0.25rem; line-height: 1; } .pw-toggle:hover { color: var(--text); background: var(--surface-2); } .pw-toggle svg { width: 0.875rem; height: 0.875rem; } /* Extra right padding when there's a pw-toggle inside the wrapper */ .input-wrap--pw .form-control { padding-right: 4rem; } .form-control { display: block; width: 100%; padding: 0.5625rem 0.875rem; font-size: 0.9375rem; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r); outline: none; transition: border-color .15s, box-shadow .15s; appearance: none; -webkit-appearance: none; } .form-control::placeholder { color: var(--text-subtle); } .form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); } [data-theme="dark"] .form-control:focus { box-shadow: 0 0 0 3px rgba(59, 130, 246, .2); } .form-control:disabled { background: var(--surface-2); color: var(--text-muted); cursor: not-allowed; } .form-hint { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.375rem; } /* Checkbox row */ .form-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--text-muted); } .form-check input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; } .form-check input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .5; } /* Password requirements callout */ .password-rules { background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--r); padding: 0.75rem 1rem 0.75rem 1.25rem; margin: 0 0 1.25rem; font-size: 0.8125rem; color: var(--text-muted); line-height: 1.85; } /* ========================================================================= Buttons ========================================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5625rem 1.25rem; font-family: 'DM Sans', 'Segoe UI', sans-serif; font-size: 0.9375rem; font-weight: 500; border-radius: var(--r); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, color .15s, box-shadow .15s; white-space: nowrap; line-height: 1.4; } .btn:hover { text-decoration: none; } .btn svg { width: 1rem; height: 1rem; flex-shrink: 0; } .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); } .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; } .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); } .btn-secondary:hover { background: var(--surface-2); color: var(--text); } .btn-ghost { background: transparent; color: var(--text-muted); border-color: transparent; } .btn-ghost:hover { background: var(--surface-2); color: var(--text); } .btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); } .btn-danger:hover { background: #B91C1C; border-color: #B91C1C; color: #fff; } .btn-full { width: 100%; justify-content: center; } .btn-sm { padding: 0.3125rem 0.75rem; font-size: 0.875rem; } /* ========================================================================= Badges ========================================================================= */ .badge { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; font-size: 0.75rem; font-weight: 600; border-radius: var(--r-full); border: 1px solid transparent; white-space: nowrap; } .badge-success { background: var(--success-light); color: var(--success); border-color: var(--success-border); } .badge-warning { background: var(--warning-light); color: var(--warning); border-color: var(--warning-border); } .badge-danger { background: var(--danger-light); color: var(--danger); border-color: var(--danger-border); } .badge-neutral { background: var(--surface-2); color: var(--text-muted); border-color: var(--border); } .badge-accent { background: var(--accent-light); color: var(--accent); border-color: var(--accent-border); } /* ========================================================================= Tables ========================================================================= */ .table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--border); } .table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; } .table th { padding: 0.75rem 1rem; font-family: 'DM Sans', sans-serif; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; text-align: left; } .table td { padding: 0.75rem 1rem; color: var(--text); border-bottom: 1px solid var(--border); vertical-align: middle; } .table tbody tr:last-child td { border-bottom: none; } .table tbody tr:hover td { background: var(--surface-2); } .table--striped tbody tr:nth-child(even) td { background: var(--surface-2); } .table tfoot th { padding: 0.75rem 1rem; font-family: 'DM Sans', sans-serif; font-size: .8125rem; font-weight: 700; border-top: 2px solid var(--border); background: var(--surface-2); color: var(--text); } .table .row--zero td { color: var(--text-muted); font-style: italic; } /* ========================================================================= Progress bar ========================================================================= */ .progress-bar { height: 0.5rem; background: var(--surface-3); border-radius: var(--r-full); overflow: hidden; } .progress-bar__fill { height: 100%; border-radius: var(--r-full); background: var(--accent); transition: width .3s ease; } .progress-bar__fill--success { background: var(--success); } .progress-bar__fill--warning { background: var(--warning); } .progress-bar__fill--danger { background: var(--danger); } /* ========================================================================= Auth pages (login, reset password) — standalone, no app-shell ========================================================================= */ .auth-shell { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; background: var(--bg); } .auth-brand { font-family: 'DM Sans', sans-serif; font-size: 1.3125rem; font-weight: 700; color: var(--text); margin-bottom: 1.5rem; letter-spacing: -.01em; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .logo-icon { width: 1.625rem; height: 1.625rem; flex-shrink: 0; } /* .logo-portal handles the accent colour in auth pages too */ .auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 2rem 2.25rem; width: 100%; max-width: 26rem; } .auth-card__title { font-family: 'DM Sans', sans-serif; font-size: 1.1875rem; font-weight: 700; color: var(--text); margin-bottom: 0.25rem; } .auth-card__subtitle { font-size: 0.9375rem; color: var(--text-muted); margin-bottom: 1.5rem; } .auth-card__footer { margin-top: 1.25rem; text-align: center; font-size: 0.875rem; color: var(--text-muted); } .auth-card__footer a { color: var(--accent); } /* ========================================================================= Section dividers / spacing utilities ========================================================================= */ .section-gap { margin-top: 2rem; } .mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-4 { margin-top: 1rem; } .mb-4 { margin-bottom: 1rem; } .text-muted { color: var(--text-muted); } .text-sm { font-size: 0.875rem; } /* ========================================================================= Status dashboard (Phase 7) ========================================================================= */ /* 4-column grid for the top-row health cards; collapses to 2 then 1 */ .status-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } @media (max-width: 900px) { .status-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .status-grid { grid-template-columns: 1fr; } } /* Key/value pair list inside status cards */ .status-dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 0; font-size: 0.9375rem; } .status-dl dt { font-weight: 600; color: var(--text-muted); white-space: nowrap; } .status-dl dd { margin: 0; word-break: break-word; } /* Wider label column for the "Last Run" detail card */ .status-dl--wide { grid-template-columns: 9rem 1fr; } /* ========================================================================= Print ========================================================================= */ @media print { .app-header, .account-menu, .icon-btn, .auth-theme-toggle, .btn, .nav-grid { display: none !important; } .site-main { padding: 0; } .card, .table-wrap { box-shadow: none; border: 1px solid #ccc; } } /* ========================================================================= Responsive ========================================================================= */ @media (max-width: 640px) { .auth-card { padding: 1.5rem 1.25rem; } .site-main { padding: 1.25rem 1rem 2rem; } .account-menu__name { display: none; } .nav-grid { grid-template-columns: 1fr 1fr; } .page-header { flex-direction: column; align-items: stretch; } } @media (max-width: 480px) { .nav-grid { grid-template-columns: 1fr; } } /* ========================================================================= Report navigation ========================================================================= */ .report-nav { display: flex; gap: .25rem; flex-wrap: wrap; border-bottom: 2px solid var(--border); margin-bottom: 1.5rem; padding-bottom: 0; } .report-nav__item { display: inline-block; padding: .5rem .875rem; font-size: .875rem; font-weight: 500; color: var(--text-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px; border-radius: .25rem .25rem 0 0; transition: color .15s, border-color .15s; } .report-nav__item:hover { color: var(--text); border-bottom-color: var(--border); } .report-nav__item--active, .report-nav__item[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); } /* ========================================================================= Report filters card ========================================================================= */ .report-filters { margin-bottom: 1rem; } .filter-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; } .filter-group { display: flex; flex-direction: column; gap: .3rem; } .filter-group--submit { margin-left: auto; flex-direction: row; align-items: flex-end; } .filter-group--check { justify-content: flex-end; padding-bottom: .2rem; } /* Secondary actions row — checkboxes left, Apply right */ .filter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--border); } .filter-actions .filter-group--check { padding-bottom: 0; } .filter-actions .filter-group--submit { margin-left: auto; } /* Full-width pills area below the filter controls (external pill target) */ .filter-pills-row { margin-top: .5rem; } /* Small form control variant */ .form-control--sm { padding: .3rem .6rem; font-size: .875rem; min-width: 9rem; } /* Date preset buttons row */ .date-presets { display: flex; flex-wrap: wrap; gap: .35rem; } .date-preset { background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); padding: .3rem .7rem; font-size: .8125rem; font-weight: 500; border-radius: .25rem; text-decoration: none; transition: background .15s, color .15s, border-color .15s; } .date-preset:hover { background: var(--bg); color: var(--text); border-color: var(--text-muted); } .date-preset--active { background: var(--accent); color: #fff; border-color: var(--accent); } /* Custom date range inputs */ .date-range-inputs { display: flex; align-items: center; gap: .4rem; } /* ========================================================================= Report meta bar + sort links ========================================================================= */ .report-meta { display: flex; justify-content: space-between; align-items: center; font-size: .875rem; color: var(--text-muted); margin-bottom: .5rem; } .sort-link { display: inline-flex; align-items: center; gap: .2em; color: inherit; text-decoration: none; white-space: nowrap; } .sort-link:hover { color: var(--accent); } .sort-icon { font-size: .7em; opacity: .7; } /* ========================================================================= Pagination ========================================================================= */ .pagination { display: flex; justify-content: center; align-items: center; gap: .25rem; padding: .75rem 0 .25rem; flex-wrap: wrap; } .pagination__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; padding: 0 .5rem; font-size: .875rem; font-weight: 500; border-radius: .25rem; text-decoration: none; color: var(--text-muted); border: 1px solid transparent; transition: background .15s, color .15s, border-color .15s; } .pagination__btn:hover { background: var(--bg); color: var(--text); border-color: var(--border); } .pagination__btn--active { background: var(--accent); color: #fff; border-color: var(--accent); pointer-events: none; } .pagination__btn--disabled { opacity: .4; pointer-events: none; } .pagination__ellipsis { font-size: .875rem; color: var(--text-muted); padding: 0 .25rem; } /* ========================================================================= Table helpers ========================================================================= */ .no-data { text-align: center; color: var(--text-muted); font-style: italic; padding: 2rem; } /* ========================================================================= Pill picker — multi-value filter control ========================================================================= */ /* * Use on .filter-row when pill pickers are present so that selects and the * Apply button stay top-aligned regardless of how many pills are in each picker. * The submit group needs a .form-label-ghost sibling above the buttons so that * buttons visually line up with the select inputs. */ .filter-row--start { align-items: flex-start; } .filter-row--start .filter-group--submit { flex-direction: column; align-items: flex-start; } /* Invisible spacer that matches .form-label height so buttons sit at the same vertical position as select inputs in adjacent pill-picker groups. */ .form-label-ghost { display: block; font-size: 0.875rem; margin-bottom: 0.375rem; visibility: hidden; user-select: none; pointer-events: none; } .filter-group__btns { display: flex; gap: .5rem; align-items: center; } .filter-group--pill { flex: 1; min-width: 11rem; max-width: 22rem; } .pill-picker { display: flex; flex-direction: column; gap: .375rem; } .pill-picker__select { width: 100%; } .pill-picker__pills { display: flex; flex-wrap: wrap; gap: .3rem; min-height: 0; } .pill { display: inline-flex; align-items: center; gap: .25rem; background: var(--accent-light); color: var(--accent); border: 1px solid var(--accent-border); border-radius: var(--r-full); padding: .125rem .375rem .125rem .625rem; font-size: .8125rem; font-weight: 500; max-width: 18rem; white-space: nowrap; } .pill__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pill__remove { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.125rem; height: 1.125rem; background: transparent; border: none; cursor: pointer; color: var(--accent); font-size: 1rem; line-height: 1; border-radius: var(--r-full); padding: 0; transition: background .1s, color .1s; } .pill__remove:hover { background: var(--accent); color: #fff; } /* ========================================================================= Score badges — coloured inline badges for Total Score cells Thresholds are defined in src/Views/reports/_helpers.php (SCORE_* consts) ========================================================================= */ .score-badge { display: inline-block; padding: .125rem .5rem; border-radius: var(--r-full); font-size: .8125rem; font-weight: 600; border: 1px solid transparent; white-space: nowrap; } /* ≥ 90% — passing (green) */ .score--pass { color: #15803d; background: #dcfce7; border-color: #bbf7d0; } /* 80–89% — minor improvement needed (yellow) */ .score--minor { color: #854d0e; background: #fefce8; border-color: #fef08a; } /* 70–79% — warning (orange) */ .score--warn { color: #c2410c; background: #ffedd5; border-color: #fb923c; } /* < 70% — poor (red) */ .score--poor { color: #b91c1c; background: #fee2e2; border-color: #fecaca; } [data-theme="dark"] .score--pass { color: #4ade80; background: rgba(74,222,128,.12); border-color: rgba(74,222,128,.25); } [data-theme="dark"] .score--minor { color: #fde047; background: rgba(253,224,71,.12); border-color: rgba(253,224,71,.25); } [data-theme="dark"] .score--warn { color: #fb923c; background: rgba(251,146,60,.12); border-color: rgba(251,146,60,.25); } [data-theme="dark"] .score--poor { color: #f87171; background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.25); } /* ---- Trend indicators (monthly vs-prior columns) ---- */ .trend { font-size: .8125rem; font-weight: 600; white-space: nowrap; } .trend--up { color: #15803d; } .trend--down { color: #b91c1c; } .trend--neutral { color: var(--text-muted); } [data-theme="dark"] .trend--up { color: #4ade80; } [data-theme="dark"] .trend--down { color: #f87171; } [data-theme="dark"] .trend--neutral { color: var(--text-muted); } /* ========================================================================= Report responsive ========================================================================= */ @media (max-width: 640px) { .filter-row { flex-direction: column; align-items: stretch; } .filter-actions { flex-direction: column; align-items: stretch; } .filter-actions .filter-group--submit { margin-left: 0; } .filter-group--submit { margin-left: 0; } .date-presets { flex-direction: column; } .date-range-inputs { flex-wrap: wrap; } .report-nav { gap: 0; } .report-nav__item { padding: .4rem .6rem; font-size: .8125rem; } }