/* ========================================================================== WAAREE ENERGIES LTD. | UTILITY AUTOMATION PORTAL assets/css/app.css - "ultra premium" design system -------------------------------------------------------------------------- Loaded AFTER assets/vendor/bootstrap/css/bootstrap.min.css and assets/vendor/bootstrap-icons/bootstrap-icons.min.css This sheet layers on top of Bootstrap 5 - it never replaces it. OFFLINE SAFE: no @import, no webfont download, no external URL anywhere. The "Inter" family is used only when the operating system already has it; otherwise the stack falls through to Segoe UI / system-ui. Brand gradient: linear-gradient(to right,#3db6bd,#3cb878,#61b441,#3a6429) CONTENTS 01 Design tokens (:root) 02 Reset, base typography, scrollbars, selection 03 Utility atoms 04 App shell - .layout / .sidebar surface 05 Sidebar navigation 06 Collapsed icon rail + rail tooltips 07 Topbar (glass) + drawer scrim 08 Content container + page head 09 Cards 10 KPI cards 11 Buttons 12 Badges, status pills, chips 13 Avatars 14 Section titles + soft dividers 15 Filter bar 16 Premium tables 17 Pagination 18 Empty states 19 Skeleton loaders 20 Timeline 21 Form controls 22 Check sheet fill grid 23 Authentication screens 24 Motion - keyframes, page enter, micro-interactions 25 Responsive 26 Print ========================================================================== */ /* ========================================================================== 01 DESIGN TOKENS ========================================================================== */ :root { /* -- Brand ------------------------------------------------------------ */ --brand-teal: #3db6bd; --brand-green: #3cb878; --brand-lime: #61b441; --brand-forest: #3a6429; --brand-grad: linear-gradient(to right, #3db6bd, #3cb878, #61b441, #3a6429); --brand-grad-d: linear-gradient(135deg, #3db6bd 0%, #3cb878 38%, #61b441 72%, #3a6429 100%); --brand-grad-v: linear-gradient(to bottom, #3db6bd, #3cb878, #61b441, #3a6429); --brand-grad-flow: linear-gradient(120deg, #3db6bd, #3cb878, #61b441, #3a6429, #61b441, #3cb878, #3db6bd); /* derived solid brand ramp - the gradient flattened for text, borders, fills */ --brand-50: #eef8f6; --brand-100: #d8f0e8; --brand-200: #b4e2d3; --brand-300: #86d0b6; --brand-400: #58c396; --brand-500: #3cb878; /* primary solid */ --brand-600: #2f9d63; --brand-700: #27804f; --brand-800: #23653f; --brand-900: #1d4c31; --brand: var(--brand-500); --brand-ink: #1f6f4d; --brand-tint: rgba(60, 184, 120, .10); --brand-tint-2: rgba(60, 184, 120, .16); --brand-wash: linear-gradient(135deg, rgba(61,182,189,.10), rgba(58,100,41,.09)); --brand-ring: rgba(60, 184, 120, .22); /* -- Neutral ramp (very slightly cooled toward the brand teal) --------- */ --n-0: #ffffff; --n-50: #f7fafa; --n-75: #f2f6f7; --n-100: #eaf0f1; --n-150: #e2eaeb; --n-200: #d9e3e5; --n-300: #c3d0d3; --n-400: #9fb1b6; --n-500: #7b9096; --n-600: #5b7178; --n-700: #42565c; --n-800: #2a3c42; --n-900: #16262b; /* semantic surface / ink aliases built from the ramp */ --bg: #eff4f5; --bg-soft: var(--n-50); --surface: var(--n-0); --surface-2: var(--n-50); --surface-3: var(--n-75); --hairline: var(--n-150); --hairline-strong: var(--n-200); --ink: var(--n-900); --ink-2: var(--n-700); --ink-3: var(--n-600); --muted: var(--n-500); --faint: var(--n-400); /* -- Semantic colours -------------------------------------------------- */ --ok: #1f9d5b; --ok-text: #147347; --ok-soft: #e6f6ee; --ok-line: #bfe6d2; --warn: #dd9109; --warn-text: #96610a; --warn-soft: #fdf4e3; --warn-line: #f4e0b0; --danger: #e04447; --danger-text: #ad2b2f; --danger-soft: #fdecec; --danger-line: #f6c9ca; --info: #2f9aa6; --info-text: #1c6e78; --info-soft: #e6f5f6; --info-line: #c3e5e8; --neutral-soft: var(--n-100); --neutral-text: var(--n-600); --neutral-line: var(--n-200); /* -- Radii ------------------------------------------------------------- */ --r-xs: 6px; --r-sm: 9px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-2xl: 28px; --r-pill: 999px; /* -- Shadows - soft, layered, low opacity ------------------------------ */ --sh-1: 0 1px 1px rgba(16, 38, 43, .04), 0 2px 4px rgba(16, 38, 43, .04); --sh-2: 0 1px 2px rgba(16, 38, 43, .04), 0 4px 10px -2px rgba(16, 38, 43, .06), 0 10px 22px -8px rgba(16, 38, 43, .07); --sh-3: 0 2px 4px rgba(16, 38, 43, .04), 0 8px 18px -4px rgba(16, 38, 43, .07), 0 22px 44px -14px rgba(16, 38, 43, .12); --sh-4: 0 4px 8px rgba(16, 38, 43, .05), 0 16px 32px -8px rgba(16, 38, 43, .10), 0 40px 72px -20px rgba(16, 38, 43, .20); --sh-brand: 0 2px 6px -1px rgba(47, 157, 99, .28), 0 10px 22px -8px rgba(47, 157, 99, .38); --sh-brand-lg: 0 6px 14px -4px rgba(47, 157, 99, .34), 0 18px 40px -12px rgba(47, 157, 99, .44); --sh-inset: inset 0 1px 0 rgba(255, 255, 255, .7); /* -- Spacing scale ----------------------------------------------------- */ --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px; --sp-10: 64px; /* -- Typography -------------------------------------------------------- */ --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Segoe UI Variable Text", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-mono: ui-monospace, "Cascadia Mono", "Consolas", "SFMono-Regular", Menlo, monospace; --fs-2xs: 9.5px; --fs-xs: 10.5px; --fs-sm: 11.5px; --fs-md: 12.5px; --fs-base: 13.5px; --fs-lg: 15px; --fs-xl: 17px; --fs-2xl: 20px; --fs-3xl: 24px; --fs-4xl: 30px; --fs-5xl: 38px; --lh-tight: 1.15; --lh-snug: 1.35; --lh-base: 1.55; --lh-loose: 1.72; --fw-normal: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-black: 800; --tr-tight: -.012em; --tr-wide: .04em; --tr-caps: .085em; /* -- Layout metrics ---------------------------------------------------- */ --sidebar-w: 264px; --sidebar-rail: 72px; --topbar-h: 64px; --content-max: 1480px; --content-pad: 28px; /* -- Check sheet sticky-column offsets --------------------------------- */ /* PHP sets these inline on .sheet-wrap when a form has wider label columns: style="--sc-2:110px;--sc-3:220px;--sc-4:600px" */ --sc-1: 0px; --sc-2: 92px; --sc-3: 184px; --sc-4: 420px; /* -- Z-index scale ----------------------------------------------------- */ --z-sheet-cell: 1; --z-sheet-hot: 2; --z-sheet-row: 5; --z-sheet-col: 7; --z-sheet-corner: 9; --z-sticky-bar: 20; --z-topbar: 1030; --z-scrim: 1038; --z-sidebar: 1042; --z-dropdown: 1060; /* -- Motion ------------------------------------------------------------ */ --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --dur-1: .12s; --dur-2: .2s; --dur-3: .32s; --dur-4: .5s; /* -- Bootstrap bridge -------------------------------------------------- */ --bs-body-font-family: var(--font-sans); --bs-body-color: var(--ink); --bs-body-bg: var(--bg); --bs-border-color: var(--hairline); --bs-link-color: var(--brand-600); --bs-link-hover-color: var(--brand-700); --bs-border-radius: var(--r-md); --bs-focus-ring-color: var(--brand-ring); } /* ========================================================================== 02 RESET, BASE TYPOGRAPHY, SCROLLBARS ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-base); color: var(--ink); background: var(--bg); letter-spacing: var(--tr-tight); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-variant-numeric: tabular-nums; min-height: 100vh; } h1, h2, h3, h4, h5, h6 { font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); color: var(--ink); margin: 0 0 var(--sp-3); } h1 { font-size: var(--fs-3xl); font-weight: var(--fw-black); } h2 { font-size: var(--fs-2xl); } h3 { font-size: var(--fs-xl); } h4 { font-size: var(--fs-lg); } h5 { font-size: var(--fs-base); } h6 { font-size: var(--fs-md); } p { margin: 0 0 var(--sp-3); } a { color: var(--brand-600); text-decoration: none; transition: color var(--dur-1) var(--ease-out); } a:hover { color: var(--brand-700); } hr { border: 0; border-top: 1px solid var(--hairline); opacity: 1; margin: var(--sp-5) 0; } code, kbd, pre, samp { font-family: var(--font-mono); } kbd { font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--ink-3); background: var(--surface-3); border: 1px solid var(--hairline-strong); border-bottom-width: 2px; border-radius: var(--r-xs); padding: 1px 5px; } ::selection { background: rgba(60, 184, 120, .22); color: var(--n-900); } :focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; border-radius: var(--r-xs); } /* Slim, unobtrusive scrollbars everywhere ------------------------------- */ * { scrollbar-width: thin; scrollbar-color: var(--n-300) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--n-300); border-radius: var(--r-pill); border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--n-400); background-clip: padding-box; } ::-webkit-scrollbar-corner { background: transparent; } /* ========================================================================== 03 UTILITY ATOMS ========================================================================== */ .text-brand { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .bg-brand { background: var(--brand-grad) !important; color: #fff !important; } .bg-brand-soft { background: var(--brand-wash) !important; } .text-muted-2 { color: var(--muted) !important; } .text-ink-2 { color: var(--ink-2) !important; } .fs-2xs { font-size: var(--fs-2xs); } .fs-xs { font-size: var(--fs-xs); } .fs-sm { font-size: var(--fs-sm); } .fs-md { font-size: var(--fs-md); } .fw-500 { font-weight: var(--fw-medium); } .fw-600 { font-weight: var(--fw-semi); } .fw-700 { font-weight: var(--fw-bold); } .fw-800 { font-weight: var(--fw-black); } .mono { font-family: var(--font-mono); font-size: .94em; letter-spacing: 0; } .nowrap { white-space: nowrap; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .stack { display: flex; flex-direction: column; gap: var(--sp-3); } .row-flex { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } .push { margin-left: auto; } .grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp-5); } .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); } .grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); } .grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-5); } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ========================================================================== 04 APP SHELL - .layout / .sidebar surface ========================================================================== */ .layout { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns var(--dur-3) var(--ease-out); } .layout > .main { /* The sidebar is position:fixed, so it takes no grid cell. Placing .main in column 2 explicitly leaves column 1 as a spacer of exactly --sidebar-w, which the fixed sidebar sits over - and the collapse still animates, because the transition is on the container's grid-template-columns. */ grid-column: 2; display: flex; flex-direction: column; min-width: 0; min-height: 100vh; background: radial-gradient(1200px 460px at 88% -10%, rgba(61, 182, 189, .09), transparent 62%), radial-gradient(900px 380px at -5% 4%, rgba(97, 180, 65, .07), transparent 60%), var(--bg); } /* -- Sidebar surface ------------------------------------------------------ A deep, gradient-tinted graphite panel. The brand gradient bleeds in from the top-left as a low-opacity wash so the rail never reads as flat black. */ .sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: var(--z-sidebar); display: flex; flex-direction: column; color: #cddad9; background: radial-gradient(520px 300px at 8% -6%, rgba(61, 182, 189, .22), transparent 62%), radial-gradient(460px 340px at 96% 106%, rgba(97, 180, 65, .16), transparent 64%), linear-gradient(180deg, #10222a 0%, #0e1f26 52%, #0c1b21 100%); border-right: 1px solid rgba(255, 255, 255, .06); box-shadow: 1px 0 0 rgba(0, 0, 0, .25); transition: width var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); overflow: hidden; } /* a hairline of brand light down the inner edge */ .sidebar::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, rgba(61, 182, 189, .55), rgba(97, 180, 65, .30), transparent 78%); opacity: .8; pointer-events: none; } /* -- Brand block ---------------------------------------------------------- */ .sidebar .brand-block { display: flex; align-items: center; gap: var(--sp-3); padding: 18px var(--sp-5); min-height: var(--topbar-h); border-bottom: 1px solid rgba(255, 255, 255, .07); flex: 0 0 auto; position: relative; } .sidebar .brand-block::after { content: ""; position: absolute; left: var(--sp-5); right: var(--sp-5); bottom: -1px; height: 1px; background: var(--brand-grad); opacity: .55; } .sidebar .brand-block img { height: 38px; width: auto; flex: 0 0 auto; background: #fff; padding: 5px 8px; border-radius: var(--r-sm); box-shadow: 0 4px 14px rgba(0, 0, 0, .28); } .sidebar .brand-text { min-width: 0; line-height: 1.2; } .sidebar .brand-name { display: block; font-size: var(--fs-lg); font-weight: var(--fw-bold); color: #fff; letter-spacing: var(--tr-tight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar .brand-sub { display: block; font-size: var(--fs-2xs); font-weight: var(--fw-semi); text-transform: uppercase; letter-spacing: var(--tr-caps); color: #7fa8a0; white-space: nowrap; } /* -- Scrollable nav body -------------------------------------------------- */ .sidebar .side-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: var(--sp-4) var(--sp-3) var(--sp-5); scrollbar-color: #2b3f47 transparent; } .sidebar .side-nav::-webkit-scrollbar { width: 6px; } .sidebar .side-nav::-webkit-scrollbar-thumb { background: #2b3f47; border: 0; border-radius: var(--r-pill); } .sidebar .side-nav::-webkit-scrollbar-thumb:hover { background: #3a5560; } /* -- Sidebar footer ------------------------------------------------------- */ .sidebar .side-foot { flex: 0 0 auto; padding: var(--sp-4) var(--sp-5); border-top: 1px solid rgba(255, 255, 255, .07); font-size: var(--fs-xs); color: #6d878c; line-height: 1.5; } .sidebar .side-foot strong { color: #9fb8b6; font-weight: var(--fw-semi); } /* ========================================================================== 05 SIDEBAR NAVIGATION ========================================================================== */ .nav-label { display: block; margin: var(--sp-5) var(--sp-3) var(--sp-2); font-size: var(--fs-2xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tr-caps); color: #62838a; white-space: nowrap; user-select: none; } .nav-label:first-child { margin-top: var(--sp-1); } .nav-item { position: relative; display: flex; align-items: center; gap: var(--sp-3); padding: 10px 13px; margin-bottom: 3px; border-radius: var(--r-md); color: #b7c8c8; font-size: var(--fs-base); font-weight: var(--fw-medium); line-height: 1.25; cursor: pointer; white-space: nowrap; isolation: isolate; transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); } .nav-item > i, .nav-item .nav-icon { flex: 0 0 22px; width: 22px; font-size: 17px; line-height: 1; text-align: center; opacity: .92; transition: transform var(--dur-2) var(--ease-spring); } .nav-item .nav-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .nav-item:hover { background: rgba(255, 255, 255, .065); color: #ffffff; } .nav-item:hover > i, .nav-item:hover .nav-icon { transform: translateX(1px) scale(1.06); } .nav-item:active { transform: translateY(1px); } /* active = gradient pill with a soft outward glow */ .nav-item.active { color: #ffffff; font-weight: var(--fw-semi); background: var(--brand-grad); background-size: 160% auto; box-shadow: var(--sh-brand), inset 0 1px 0 rgba(255, 255, 255, .18); } .nav-item.active::before { content: ""; position: absolute; inset: -6px -8px; z-index: -1; border-radius: var(--r-lg); background: radial-gradient(60% 90% at 30% 50%, rgba(60, 184, 120, .32), transparent 72%); filter: blur(6px); pointer-events: none; } .nav-item.active > i, .nav-item.active .nav-icon { opacity: 1; } /* count badge on the right of a nav row */ .nav-item .badge { flex: 0 0 auto; margin-left: auto; min-width: 20px; padding: 2px 7px; border-radius: var(--r-pill); font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .02em; background: rgba(255, 255, 255, .12); color: #dff0ea; border: 1px solid rgba(255, 255, 255, .14); } .nav-item .badge.badge-alert { background: var(--danger); border-color: transparent; color: #fff; } .nav-item.active .badge { background: rgba(255, 255, 255, .24); border-color: rgba(255, 255, 255, .3); color: #fff; } /* ========================================================================== 06 COLLAPSED ICON RAIL + RAIL TOOLTIPS Toggled by adding class="nav-collapsed" to . ========================================================================== */ @media (min-width: 992px) { html.nav-collapsed .layout { grid-template-columns: var(--sidebar-rail) minmax(0, 1fr); } html.nav-collapsed .sidebar { width: var(--sidebar-rail); } html.nav-collapsed .sidebar .brand-block { justify-content: center; padding-left: 0; padding-right: 0; } /* .side-foot must stay visible: it holds the only control that expands the rail again, and the collapsed state is remembered across page loads, so hiding it left no way back. Only its version line is dropped. */ html.nav-collapsed .sidebar .brand-text, html.nav-collapsed .nav-item .nav-text { display: none; } html.nav-collapsed .sidebar .side-nav { padding-left: 10px; padding-right: 10px; } html.nav-collapsed .nav-label { height: 1px; margin: var(--sp-4) 10px var(--sp-3); overflow: hidden; text-indent: -999em; background: rgba(255, 255, 255, .1); } html.nav-collapsed .nav-item { justify-content: center; padding: 12px 0; gap: 0; } html.nav-collapsed .nav-item > i, html.nav-collapsed .nav-item .nav-icon { font-size: 19px; } /* the count badge shrinks to a dot on the rail */ html.nav-collapsed .nav-item .badge { position: absolute; top: 7px; right: 10px; min-width: 0; width: 8px; height: 8px; padding: 0; overflow: hidden; text-indent: -999em; border: 2px solid #0e1f26; background: var(--danger); } /* rail tooltip - fed by data-title on the .nav-item */ html.nav-collapsed .sidebar { overflow: visible; } html.nav-collapsed .sidebar .side-nav { overflow-y: auto; overflow-x: visible; } html.nav-collapsed .nav-item[data-title]::after { content: attr(data-title); position: absolute; left: calc(100% + 14px); top: 50%; transform: translateY(-50%) translateX(-6px); padding: 7px 12px; border-radius: var(--r-sm); background: #0d1b21; color: #eaf4f2; font-size: var(--fs-md); font-weight: var(--fw-semi); letter-spacing: 0; white-space: nowrap; box-shadow: var(--sh-3); border: 1px solid rgba(255, 255, 255, .1); opacity: 0; pointer-events: none; z-index: var(--z-dropdown); transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); } html.nav-collapsed .nav-item[data-title]:hover::after, html.nav-collapsed .nav-item[data-title]:focus-visible::after { opacity: 1; transform: translateY(-50%) translateX(0); } /* the pill glow would sit over the tooltip, so it is dropped on the rail */ html.nav-collapsed .nav-item.active::before { display: none; } } /* ========================================================================== 07 TOPBAR (GLASS) + DRAWER SCRIM ========================================================================== */ .topbar { position: sticky; top: 0; z-index: var(--z-topbar); flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-4); height: var(--topbar-h); padding: 0 var(--content-pad); background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid rgba(22, 38, 43, .07); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 6px 20px -18px rgba(16, 38, 43, .5); } .topbar .topbar-left { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; flex: 1 1 auto; } .topbar .topbar-right { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; margin-left: auto; } /* hamburger / rail toggle */ .nav-toggle { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-md); border: 1px solid var(--hairline); background: rgba(255, 255, 255, .8); color: var(--ink-2); font-size: 18px; cursor: pointer; transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out); } .nav-toggle:hover { border-color: var(--brand-400); color: var(--brand-700); background: var(--brand-50); } .nav-toggle:active { transform: scale(.96); } /* breadcrumb + title block */ .topbar .title-block { min-width: 0; line-height: 1.2; } .topbar .page-title { display: block; font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: var(--tr-tight); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; } .topbar .page-sub { display: block; font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .crumbs { display: flex; align-items: center; gap: 6px; margin: 0 0 1px; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--muted); min-width: 0; } .crumbs .crumb { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; color: var(--muted); font-weight: var(--fw-medium); } .crumbs .crumb a { color: var(--muted); } .crumbs .crumb a:hover { color: var(--brand-700); } .crumbs .crumb.current { color: var(--ink-2); font-weight: var(--fw-semi); } .crumbs .crumb-sep { color: var(--n-300); font-size: 11px; line-height: 1; } /* topbar search */ .topbar-search { position: relative; flex: 0 1 320px; min-width: 0; } .topbar-search > i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--faint); font-size: 15px; pointer-events: none; } .topbar-search input { width: 100%; height: 40px; padding: 0 62px 0 38px; border: 1px solid var(--hairline); border-radius: var(--r-pill); background: rgba(255, 255, 255, .72); font-family: var(--font-sans); font-size: var(--fs-base); color: var(--ink); transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); } .topbar-search input::placeholder { color: var(--faint); } .topbar-search input:focus { outline: none; background: #fff; border-color: var(--brand-400); box-shadow: 0 0 0 3px var(--brand-ring); } .topbar-search kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; } /* icon buttons (notification bell, help, refresh) */ .icon-btn { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-md); border: 1px solid var(--hairline); background: rgba(255, 255, 255, .8); color: var(--ink-2); font-size: 17px; cursor: pointer; transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); } .icon-btn:hover { border-color: var(--brand-400); color: var(--brand-700); background: var(--brand-50); } .icon-btn:active { transform: scale(.95); } .icon-btn .dot { position: absolute; top: 7px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); border: 2px solid #fff; } .icon-btn .count { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--danger); color: #fff; font-size: var(--fs-2xs); font-weight: var(--fw-bold); line-height: 18px; text-align: center; border: 2px solid #fff; } /* user menu chip */ .user-chip { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px 0 4px; border-radius: var(--r-pill); border: 1px solid var(--hairline); background: rgba(255, 255, 255, .8); cursor: pointer; color: var(--ink); transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); } .user-chip:hover { border-color: var(--brand-400); box-shadow: var(--sh-1); } .user-chip .user-meta { line-height: 1.15; text-align: left; min-width: 0; } .user-chip .user-name { display: block; font-size: var(--fs-md); font-weight: var(--fw-semi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; } .user-chip .user-role { display: block; font-size: var(--fs-2xs); font-weight: var(--fw-semi); text-transform: uppercase; letter-spacing: var(--tr-wide); color: var(--muted); } .user-chip > .bi-chevron-down { font-size: 11px; color: var(--faint); } /* dropdown refinement (user menu, notification panel) */ .dropdown-menu { border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--sh-3); padding: 6px; font-size: var(--fs-base); min-width: 220px; z-index: var(--z-dropdown); } .dropdown-menu .dropdown-header { font-size: var(--fs-2xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tr-caps); color: var(--muted); padding: 8px 12px 6px; } .dropdown-menu .dropdown-item { display: flex; align-items: center; gap: 10px; border-radius: var(--r-sm); padding: 9px 12px; font-weight: var(--fw-medium); color: var(--ink-2); } .dropdown-menu .dropdown-item i { font-size: 15px; color: var(--muted); width: 18px; } .dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus { background: var(--brand-50); color: var(--brand-800); } .dropdown-menu .dropdown-item:hover i { color: var(--brand-600); } .dropdown-menu .dropdown-item.danger { color: var(--danger-text); } .dropdown-menu .dropdown-item.danger:hover { background: var(--danger-soft); } .dropdown-menu .dropdown-divider { margin: 5px 8px; border-color: var(--hairline); } /* notification list inside a dropdown */ .notif-list { max-height: 380px; overflow-y: auto; } .notif-item { display: flex; gap: 10px; padding: 11px 12px; border-radius: var(--r-sm); cursor: pointer; transition: background-color var(--dur-1) var(--ease-out); } .notif-item:hover { background: var(--surface-2); } .notif-item.unread { background: var(--brand-50); } .notif-item .notif-title { font-size: var(--fs-md); font-weight: var(--fw-semi); color: var(--ink); margin: 0 0 2px; } .notif-item .notif-body { font-size: var(--fs-sm); color: var(--muted); margin: 0; line-height: 1.45; } .notif-item .notif-time { font-size: var(--fs-2xs); color: var(--faint); margin-top: 3px; display: block; } /* off-canvas scrim (small screens) */ .scrim { position: fixed; inset: 0; z-index: var(--z-scrim); background: rgba(10, 25, 30, .5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity var(--dur-3) var(--ease-out), visibility var(--dur-3) var(--ease-out); } .scrim.show { opacity: 1; visibility: visible; } /* lock the page behind the drawer */ html.nav-open, html.nav-open body { overflow: hidden; } /* ========================================================================== 08 CONTENT CONTAINER + PAGE HEAD ========================================================================== */ .content { flex: 1 1 auto; width: 100%; max-width: var(--content-max); margin-inline: auto; padding: var(--sp-6) var(--content-pad) var(--sp-10); min-width: 0; } .content.wide { max-width: none; } .page-head { display: flex; align-items: flex-start; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-6); } .page-head .page-head-text { min-width: 0; flex: 1 1 320px; } .page-head h1 { margin: 0; font-size: var(--fs-3xl); font-weight: var(--fw-black); letter-spacing: -.02em; } .page-head p { margin: 6px 0 0; color: var(--muted); font-size: var(--fs-base); max-width: 72ch; } .page-head .actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; } /* ========================================================================== 09 CARDS ========================================================================== */ .card { position: relative; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden; transition: box-shadow var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out); } .card.is-hoverable:hover { box-shadow: var(--sh-3); transform: translateY(-2px); border-color: var(--hairline-strong); } .card.is-flush { box-shadow: none; } .card.is-accent::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--brand-grad); } .card-head { display: flex; align-items: center; gap: var(--sp-3); padding: 16px var(--sp-5); border-bottom: 1px solid var(--hairline); background: linear-gradient(to bottom, var(--n-50), var(--surface)); flex-wrap: wrap; } .card-head h3, .card-head .card-title { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: var(--tr-tight); color: var(--ink); } .card-head .card-sub { display: block; font-size: var(--fs-sm); font-weight: var(--fw-normal); color: var(--muted); margin-top: 2px; letter-spacing: 0; } .card-head .card-head-icon { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--brand-wash); color: var(--brand-700); font-size: 17px; } .card-head .card-actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; } .card-body { padding: var(--sp-5); } .card-body.tight { padding: var(--sp-3) var(--sp-4); } .card-body.flush { padding: 0; } .card-foot { padding: 14px var(--sp-5); border-top: 1px solid var(--hairline); background: var(--surface-2); display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } /* a sticky action bar pinned to the bottom of a long card (fill screen) */ .card-sticky-foot { position: sticky; bottom: 0; z-index: var(--z-sticky-bar); display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: 13px var(--sp-5); background: rgba(255, 255, 255, .93); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--hairline); box-shadow: 0 -8px 24px -18px rgba(16, 38, 43, .6); } /* thin progress rail used in the sticky foot */ .progress-rail { flex: 1 1 180px; min-width: 140px; height: 8px; border-radius: var(--r-pill); background: var(--n-100); overflow: hidden; } /* The shorthand above assumes a row parent. Stacked under a caption the main axis is vertical, so 180px would become a height and the rail would render as a tall pill; pin it to its 8px there. */ .progress-rail.is-stacked { flex: 0 0 8px; width: 100%; min-width: 0; } .progress-rail > span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--brand-grad); transition: width var(--dur-4) var(--ease-out); } /* ========================================================================== 10 KPI CARDS ========================================================================== */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(224px, 1fr)); gap: var(--sp-5); margin-bottom: var(--sp-6); } .kpi-card { position: relative; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: var(--sp-5) var(--sp-5) 18px; overflow: hidden; isolation: isolate; transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); } /* subtle top accent bar */ .kpi-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--brand-grad); opacity: .9; } /* faint corner wash */ .kpi-card::after { content: ""; position: absolute; top: -46px; right: -46px; width: 140px; height: 140px; border-radius: 50%; background: var(--brand-wash); z-index: -1; } .kpi-card:hover { transform: translateY(-3px); box-shadow: var(--sh-3); } .kpi-card .kpi-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--r-md); margin-bottom: 16px; font-size: 21px; color: #fff; background: var(--brand-grad-d); box-shadow: var(--sh-brand); } .kpi-card .kpi-icon.teal { background: linear-gradient(135deg, #46c3ca, #2c8f95); } .kpi-card .kpi-icon.green { background: linear-gradient(135deg, #4bc687, #2a8b59); } .kpi-card .kpi-icon.lime { background: linear-gradient(135deg, #74c455, #4a8f31); } .kpi-card .kpi-icon.forest { background: linear-gradient(135deg, #4a7a35, #2a4a1e); } .kpi-card .kpi-icon.amber { background: linear-gradient(135deg, #f0ac3a, #cd7f06); } .kpi-card .kpi-icon.red { background: linear-gradient(135deg, #ec5b5e, #c02f33); } .kpi-card .kpi-icon.slate { background: linear-gradient(135deg, #6c848b, #3f5359); } .kpi-card .kpi-value { display: block; font-size: var(--fs-4xl); font-weight: var(--fw-black); line-height: 1; letter-spacing: -.028em; color: var(--ink); font-variant-numeric: tabular-nums; } .kpi-card .kpi-value small { font-size: var(--fs-lg); font-weight: var(--fw-semi); color: var(--muted); letter-spacing: 0; margin-left: 3px; } .kpi-card .kpi-label { display: block; margin-top: 7px; font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--muted); } /* delta chip */ .kpi-card .kpi-delta { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; padding: 3px 9px 3px 6px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0; background: var(--neutral-soft); color: var(--neutral-text); border: 1px solid var(--neutral-line); } .kpi-card .kpi-delta i { font-size: 12px; } .kpi-card .kpi-delta.up { background: var(--ok-soft); color: var(--ok-text); border-color: var(--ok-line); } .kpi-card .kpi-delta.down { background: var(--danger-soft); color: var(--danger-text); border-color: var(--danger-line); } .kpi-card .kpi-delta.flat { background: var(--neutral-soft); color: var(--neutral-text); } .kpi-card .kpi-delta .kpi-delta-note { font-weight: var(--fw-medium); color: inherit; opacity: .78; } /* ========================================================================== 11 BUTTONS ========================================================================== */ .btn { --bs-btn-focus-box-shadow: 0 0 0 3px var(--brand-ring); display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--font-sans); font-size: var(--fs-base); font-weight: var(--fw-semi); letter-spacing: var(--tr-tight); border-radius: var(--r-md); padding: 9px 16px; line-height: 1.3; white-space: nowrap; transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); } .btn i { font-size: 15px; line-height: 1; } .btn:disabled, .btn.disabled { opacity: .55; cursor: not-allowed; transform: none !important; box-shadow: none !important; } /* -- Primary gradient ----------------------------------------------------- */ .btn-brand { position: relative; border: 0; color: #fff; background: var(--brand-grad); background-size: 190% auto; background-position: 0% 50%; box-shadow: var(--sh-brand); overflow: hidden; transition: background-position var(--dur-4) var(--ease-out), transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); } .btn-brand::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(to bottom, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 55%); pointer-events: none; } .btn-brand:hover, .btn-brand:focus { color: #fff; background-position: 100% 50%; transform: translateY(-1px); box-shadow: var(--sh-brand-lg); } .btn-brand:active { transform: translateY(1px) scale(.99); box-shadow: var(--sh-brand); } /* -- Ghost (bordered, transparent) --------------------------------------- */ .btn-ghost { background: transparent; border: 1px solid var(--hairline-strong); color: var(--ink-2); } .btn-ghost:hover { background: var(--surface); border-color: var(--brand-400); color: var(--brand-700); transform: translateY(-1px); box-shadow: var(--sh-1); } .btn-ghost:active { transform: translateY(0); } /* -- Soft (tinted fill, no border) --------------------------------------- */ .btn-soft { background: var(--brand-50); border: 1px solid transparent; color: var(--brand-800); } .btn-soft:hover { background: var(--brand-100); color: var(--brand-900); transform: translateY(-1px); } .btn-soft:active { transform: translateY(0); } .btn-soft.soft-ok { background: var(--ok-soft); color: var(--ok-text); } .btn-soft.soft-ok:hover { background: #d7efe3; } .btn-soft.soft-warn { background: var(--warn-soft); color: var(--warn-text); } .btn-soft.soft-warn:hover { background: #fbecd0; } .btn-soft.soft-danger { background: var(--danger-soft); color: var(--danger-text); } .btn-soft.soft-danger:hover { background: #fbdcdc; } .btn-soft.soft-info { background: var(--info-soft); color: var(--info-text); } .btn-soft.soft-info:hover { background: #d7edef; } /* -- Sizes / shapes ------------------------------------------------------- */ .btn-sm { padding: 6px 12px; font-size: var(--fs-md); border-radius: var(--r-sm); } .btn-sm i { font-size: 14px; } .btn-lg { padding: 12px 22px; font-size: var(--fs-lg); border-radius: var(--r-md); } .btn-block { width: 100%; } .btn-square { width: 36px; height: 36px; padding: 0; } .btn-square.btn-lg { width: 44px; height: 44px; } .btn-pill { border-radius: var(--r-pill); } /* a small inline spinner for busy buttons */ .btn .spin { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; } .btn-ghost .spin, .btn-soft .spin { border-color: rgba(60, 184, 120, .3); border-top-color: var(--brand-600); } /* ========================================================================== 12 BADGES, STATUS PILLS, CHIPS ========================================================================== */ .badge-status { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .03em; text-transform: uppercase; line-height: 1.5; white-space: nowrap; border: 1px solid transparent; } .badge-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; opacity: .85; } .badge-status.is-draft { background: var(--neutral-soft); color: var(--neutral-text); border-color: var(--neutral-line); } .badge-status.is-submitted { background: var(--info-soft); color: var(--info-text); border-color: var(--info-line); } .badge-status.is-approved, .badge-status.is-active { background: var(--ok-soft); color: var(--ok-text); border-color: var(--ok-line); } .badge-status.is-rejected { background: var(--danger-soft); color: var(--danger-text); border-color: var(--danger-line); } .badge-status.is-inactive { background: var(--n-100); color: var(--n-500); border-color: var(--n-200); } .badge-status.is-pending { background: var(--warn-soft); color: var(--warn-text); border-color: var(--warn-line); } /* role badges reuse the same shell without the leading dot */ .badge-role { display: inline-block; padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .03em; text-transform: uppercase; background: var(--brand-wash); color: var(--brand-800); border: 1px solid var(--brand-200); white-space: nowrap; } .badge-role.role-danger { background: var(--danger-soft); color: var(--danger-text); border-color: var(--danger-line); } .badge-role.role-info { background: var(--info-soft); color: var(--info-text); border-color: var(--info-line); } .badge-role.role-warn { background: var(--warn-soft); color: var(--warn-text); border-color: var(--warn-line); } .badge-role.role-muted { background: var(--n-100); color: var(--n-600); border-color: var(--n-200); } /* chip - a compact removable / selectable token */ .chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: var(--r-pill); border: 1px solid var(--hairline-strong); background: var(--surface); color: var(--ink-2); font-size: var(--fs-md); font-weight: var(--fw-semi); line-height: 1; white-space: nowrap; cursor: pointer; transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); } .chip i { font-size: 13px; opacity: .8; } .chip:hover { border-color: var(--brand-400); color: var(--brand-700); } .chip.active, .chip[aria-pressed="true"] { background: var(--brand-grad); background-size: 160% auto; border-color: transparent; color: #fff; box-shadow: var(--sh-brand); } .chip.active i { opacity: 1; } .chip.chip-static { cursor: default; background: var(--surface-3); border-color: var(--hairline); } .chip .chip-close { display: grid; place-items: center; width: 16px; height: 16px; margin-right: -4px; border: 0; border-radius: 50%; background: rgba(22, 38, 43, .08); color: inherit; font-size: 10px; cursor: pointer; line-height: 1; } .chip .chip-close:hover { background: rgba(22, 38, 43, .16); } .chip.active .chip-close { background: rgba(255, 255, 255, .25); } .chip-row { display: flex; flex-wrap: wrap; gap: 7px; } /* ========================================================================== 13 AVATARS ========================================================================== */ .avatar { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: var(--n-100); color: var(--ink-2); font-size: var(--fs-md); font-weight: var(--fw-bold); line-height: 1; user-select: none; } .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .avatar-initials { background: var(--brand-grad-d); color: #fff; letter-spacing: .02em; text-transform: uppercase; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 2px 6px -2px rgba(47, 157, 99, .5); } .avatar-initials.tone-teal { background: linear-gradient(135deg, #46c3ca, #2c8f95); } .avatar-initials.tone-lime { background: linear-gradient(135deg, #74c455, #4a8f31); } .avatar-initials.tone-forest { background: linear-gradient(135deg, #4a7a35, #2a4a1e); } .avatar-initials.tone-slate { background: linear-gradient(135deg, #6c848b, #3f5359); } .avatar.avatar-xs { width: 24px; height: 24px; font-size: var(--fs-2xs); } .avatar.avatar-sm { width: 30px; height: 30px; font-size: var(--fs-sm); } .avatar.avatar-lg { width: 44px; height: 44px; font-size: var(--fs-lg); } .avatar.avatar-xl { width: 64px; height: 64px; font-size: var(--fs-2xl); } .avatar-stack { display: inline-flex; align-items: center; } .avatar-stack .avatar { border: 2px solid var(--surface); margin-left: -9px; } .avatar-stack .avatar:first-child { margin-left: 0; } /* a person cell used inside tables */ .person { display: flex; align-items: center; gap: 10px; min-width: 0; } .person .person-name { font-weight: var(--fw-semi); color: var(--ink); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .person .person-sub { font-size: var(--fs-sm); color: var(--muted); line-height: 1.25; white-space: nowrap; } /* ========================================================================== 14 SECTION TITLES + SOFT DIVIDERS ========================================================================== */ .section-title { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--sp-4); font-size: var(--fs-md); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tr-caps); color: var(--ink-3); } .section-title::before { content: ""; flex: 0 0 auto; width: 3px; height: 15px; border-radius: var(--r-pill); background: var(--brand-grad-v); } .section-title::after { content: ""; flex: 1 1 auto; height: 1px; background: linear-gradient(to right, var(--hairline), transparent); } .section-title.plain::after { display: none; } .section-title .section-title-note { flex: 0 0 auto; font-size: var(--fs-sm); font-weight: var(--fw-medium); text-transform: none; letter-spacing: 0; color: var(--muted); } /* a big, filled section header used above check sheet grids */ .section-band { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--sp-3); padding: 10px 16px; border-radius: var(--r-md); border-left: 3px solid var(--brand-500); background: var(--brand-wash); color: var(--brand-900); font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: var(--tr-tight); } .section-band i { font-size: 17px; color: var(--brand-700); } .divider-soft { height: 1px; border: 0; margin: var(--sp-5) 0; background: linear-gradient(to right, transparent, var(--hairline) 12%, var(--hairline) 88%, transparent); } .divider-soft.tight { margin: var(--sp-3) 0; } .divider-soft.vertical { width: 1px; height: 24px; margin: 0 var(--sp-2); background: linear-gradient(to bottom, transparent, var(--hairline), transparent); } /* ========================================================================== 15 FILTER BAR ========================================================================== */ .filter-bar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding: 12px 14px; margin-bottom: var(--sp-4); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--sh-1); } .filter-bar .filter-search { position: relative; flex: 1 1 260px; min-width: 200px; max-width: 380px; } .filter-bar .filter-search > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--faint); font-size: 15px; pointer-events: none; } .filter-bar .filter-search input { width: 100%; height: 38px; padding: 0 14px 0 36px; border: 1px solid var(--hairline-strong); border-radius: var(--r-sm); background: var(--surface-2); font-family: var(--font-sans); font-size: var(--fs-base); color: var(--ink); transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); } .filter-bar .filter-search input:focus { outline: none; background: #fff; border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-ring); } .filter-bar .filter-group { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; } .filter-bar .filter-group > label { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-semi); text-transform: uppercase; letter-spacing: var(--tr-wide); color: var(--muted); white-space: nowrap; } .filter-bar .form-select, .filter-bar .form-control { height: 38px; min-width: 132px; padding-top: 0; padding-bottom: 0; font-size: var(--fs-base); } .filter-bar .filter-spacer { flex: 1 1 auto; } .filter-bar .filter-actions { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; margin-left: auto; } .filter-bar .filter-count { font-size: var(--fs-md); color: var(--muted); white-space: nowrap; } .filter-bar .filter-count b { color: var(--ink); font-weight: var(--fw-bold); } /* ========================================================================== 16 PREMIUM TABLES ========================================================================== */ .table-wrap { position: relative; width: 100%; overflow-x: auto; overflow-y: visible; border-radius: var(--r-lg); -webkit-overflow-scrolling: touch; } .table-wrap.scroll-y { max-height: 62vh; overflow-y: auto; } .table-premium { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; background: var(--surface); font-size: var(--fs-base); color: var(--ink-2); } .table-premium thead th { position: sticky; top: 0; z-index: 3; background: linear-gradient(to bottom, #f8fbfb, #f2f7f7); color: var(--ink-3); text-align: left; font-size: var(--fs-sm); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tr-wide); padding: 12px 16px; white-space: nowrap; border-bottom: 1px solid var(--hairline-strong); vertical-align: middle; } .table-premium thead th:first-child { border-top-left-radius: var(--r-lg); } .table-premium thead th:last-child { border-top-right-radius: var(--r-lg); } .table-premium tbody td { padding: 13px 16px; border-bottom: 1px solid var(--hairline); vertical-align: middle; background: var(--surface); transition: background-color var(--dur-1) linear; } .table-premium tbody tr:last-child td { border-bottom: 0; } .table-premium tbody tr:hover td { background: #f6fbfa; } .table-premium tbody tr.is-selected td { background: var(--brand-50); } .table-premium tbody tr.is-flagged td { background: var(--danger-soft); } .table-premium tbody tr.is-flagged:hover td { background: #fbe3e3; } /* primary cell - the identifying column */ .table-premium td.cell-primary, .table-premium .cell-primary { font-weight: var(--fw-semi); color: var(--ink); } .table-premium td.cell-num, .table-premium th.cell-num { text-align: right; font-variant-numeric: tabular-nums; } .table-premium td.cell-center, .table-premium th.cell-center { text-align: center; } .table-premium td.cell-actions { text-align: right; white-space: nowrap; width: 1%; } .table-premium td.cell-actions .btn + .btn { margin-left: 5px; } .table-premium td .cell-sub { display: block; font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; } /* checkbox column */ .table-premium th.cell-check, .table-premium td.cell-check { width: 42px; padding-left: 16px; padding-right: 0; } /* sortable headers */ .table-premium thead th.sortable { cursor: pointer; user-select: none; } .table-premium thead th.sortable::after { content: "\F282"; font-family: "bootstrap-icons"; font-size: 10px; margin-left: 6px; opacity: .3; vertical-align: middle; } .table-premium thead th.sortable:hover::after { opacity: .6; } .table-premium thead th.sortable.asc::after { content: "\F235"; opacity: 1; color: var(--brand-600); } .table-premium thead th.sortable.desc::after { content: "\F229"; opacity: 1; color: var(--brand-600); } /* -- Density variants ----------------------------------------------------- */ .table-premium.density-compact thead th { padding: 9px 12px; font-size: var(--fs-xs); } .table-premium.density-compact tbody td { padding: 8px 12px; font-size: var(--fs-md); } .table-premium.density-comfortable thead th { padding: 15px 20px; } .table-premium.density-comfortable tbody td { padding: 18px 20px; } /* -- Sticky first column (opt-in; forced on below 992px) ------------------ */ .table-premium.sticky-first tbody td:first-child, .table-premium.sticky-first thead th:first-child { position: sticky; left: 0; z-index: 2; box-shadow: 1px 0 0 var(--hairline); } .table-premium.sticky-first thead th:first-child { z-index: 4; } /* a lightweight "loading rows" veil */ .table-wrap.is-loading { position: relative; min-height: 160px; } .table-wrap.is-loading::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .62); border-radius: inherit; pointer-events: none; } /* ========================================================================== 17 PAGINATION ========================================================================== */ .pagination-premium { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-4); padding: 4px 2px; font-size: var(--fs-md); color: var(--muted); } .pagination-premium .page-info { white-space: nowrap; } .pagination-premium .page-info b { color: var(--ink); font-weight: var(--fw-bold); } .pagination-premium .page-size { display: flex; align-items: center; gap: 6px; white-space: nowrap; } .pagination-premium .page-size select { height: 32px; padding: 0 26px 0 10px; border: 1px solid var(--hairline-strong); border-radius: var(--r-sm); background: var(--surface); font-size: var(--fs-md); color: var(--ink-2); font-family: var(--font-sans); } .pagination-premium .page-list { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-wrap: wrap; } .pagination-premium .page-btn { min-width: 34px; height: 34px; padding: 0 10px; border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--surface); color: var(--ink-2); font-size: var(--fs-md); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); } .pagination-premium .page-btn:hover:not(:disabled):not(.active) { border-color: var(--brand-400); color: var(--brand-700); background: var(--brand-50); } .pagination-premium .page-btn:active:not(:disabled) { transform: scale(.95); } .pagination-premium .page-btn.active { background: var(--brand-grad); background-size: 150% auto; border-color: transparent; color: #fff; box-shadow: var(--sh-brand); cursor: default; } .pagination-premium .page-btn:disabled { opacity: .42; cursor: not-allowed; } .pagination-premium .page-gap { min-width: 20px; text-align: center; color: var(--faint); user-select: none; } /* ========================================================================== 18 EMPTY STATES ========================================================================== */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--sp-9) var(--sp-5); color: var(--muted); } .empty-state .empty-icon { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: var(--sp-4); border-radius: var(--r-xl); background: var(--brand-wash); border: 1px solid var(--brand-100); color: var(--brand-600); font-size: 32px; } .empty-state .empty-title { margin: 0 0 6px; font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--ink); } .empty-state .empty-text { margin: 0; max-width: 46ch; font-size: var(--fs-base); line-height: var(--lh-loose); color: var(--muted); } .empty-state .empty-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; margin-top: var(--sp-5); } .empty-state.compact { padding: var(--sp-6) var(--sp-4); } .empty-state.compact .empty-icon { width: 52px; height: 52px; font-size: 24px; margin-bottom: var(--sp-3); } .empty-state.tone-danger .empty-icon { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); } .empty-state.tone-warn .empty-icon { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); } /* ========================================================================== 19 SKELETON LOADERS ========================================================================== */ .skeleton { position: relative; overflow: hidden; background: var(--n-100); border-radius: var(--r-sm); color: transparent !important; user-select: none; pointer-events: none; } .skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .68) 50%, rgba(255, 255, 255, 0) 100%); } .skeleton-line { height: 12px; margin-bottom: 9px; } .skeleton-line:last-child { margin-bottom: 0; } .skeleton-line.w-90 { width: 90%; } .skeleton-line.w-75 { width: 75%; } .skeleton-line.w-60 { width: 60%; } .skeleton-line.w-40 { width: 40%; } .skeleton-line.w-25 { width: 25%; } .skeleton-line.tall { height: 18px; } .skeleton-title { height: 20px; width: 45%; margin-bottom: 14px; border-radius: var(--r-sm); } .skeleton-circle { border-radius: 50%; width: 34px; height: 34px; } .skeleton-chip { height: 22px; width: 76px; border-radius: var(--r-pill); } .skeleton-block { height: 120px; border-radius: var(--r-md); } .skeleton-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-1); } .skeleton-row { display: flex; align-items: center; gap: var(--sp-3); padding: 13px 16px; border-bottom: 1px solid var(--hairline); } .skeleton-row:last-child { border-bottom: 0; } .skeleton-row .skeleton-line { flex: 1 1 auto; margin: 0; } /* ========================================================================== 20 TIMELINE (submission events) ========================================================================== */ .timeline { position: relative; margin: 0; padding: 2px 0 2px 30px; list-style: none; } .timeline::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 2px; border-radius: var(--r-pill); background: linear-gradient(to bottom, var(--brand-200), var(--hairline) 65%, transparent); } .timeline .tl-item { position: relative; padding: 0 0 var(--sp-5); } .timeline .tl-item:last-child { padding-bottom: 0; } .timeline .tl-dot { position: absolute; left: -30px; top: 1px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); border: 2px solid var(--n-300); color: transparent; font-size: 9px; box-shadow: 0 0 0 3px var(--surface); } .timeline .tl-item.is-done .tl-dot { border-color: var(--ok); background: var(--ok); color: #fff; } .timeline .tl-item.is-current .tl-dot { border-color: var(--brand-500); background: var(--brand-500); color: #fff; box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--brand-ring); } .timeline .tl-item.is-rejected .tl-dot { border-color: var(--danger); background: var(--danger); color: #fff; } .timeline .tl-item.is-pending .tl-dot { border-color: var(--n-300); background: var(--surface); } .timeline .tl-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .timeline .tl-title { margin: 0; font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--ink); letter-spacing: var(--tr-tight); } .timeline .tl-time { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; } .timeline .tl-actor { display: flex; align-items: center; gap: 7px; margin-top: 5px; font-size: var(--fs-md); color: var(--ink-3); } .timeline .tl-note { margin: 8px 0 0; padding: 9px 12px; border-radius: var(--r-sm); background: var(--surface-3); border-left: 2px solid var(--hairline-strong); font-size: var(--fs-md); color: var(--ink-2); line-height: var(--lh-base); white-space: pre-line; } .timeline .tl-item.is-rejected .tl-note { background: var(--danger-soft); border-left-color: var(--danger); color: var(--danger-text); } /* ========================================================================== 21 FORM CONTROLS ========================================================================== */ .form-label { display: block; margin-bottom: 6px; font-size: var(--fs-md); font-weight: var(--fw-semi); color: var(--ink-2); letter-spacing: 0; } .form-label .req { color: var(--danger); margin-left: 2px; font-weight: var(--fw-bold); } .form-label .form-label-note { float: right; font-size: var(--fs-sm); font-weight: var(--fw-normal); color: var(--muted); } .form-control, .form-select { font-family: var(--font-sans); font-size: var(--fs-base); color: var(--ink); background-color: var(--surface); border: 1px solid var(--hairline-strong); border-radius: var(--r-sm); padding: 10px 13px; line-height: 1.35; box-shadow: none; transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); } .form-control::placeholder { color: var(--faint); } .form-control:hover:not(:disabled):not(:focus), .form-select:hover:not(:disabled):not(:focus) { border-color: var(--n-300); } /* 2px focus ring in brand colour */ .form-control:focus, .form-select:focus { color: var(--ink); background-color: var(--surface); border-color: var(--brand-500); outline: none; box-shadow: 0 0 0 2px var(--brand-ring); } .form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--surface-3); color: var(--ink-3); border-color: var(--hairline); cursor: default; } .form-control.is-invalid, .form-select.is-invalid { border-color: var(--danger); background-image: none; padding-right: 13px; } .form-control.is-invalid:focus, .form-select.is-invalid:focus { box-shadow: 0 0 0 2px rgba(224, 68, 71, .22); } .form-control-sm, .form-select-sm { padding: 7px 10px; font-size: var(--fs-md); border-radius: var(--r-xs); } .form-control-lg { padding: 13px 16px; font-size: var(--fs-lg); border-radius: var(--r-md); } textarea.form-control { min-height: 92px; line-height: var(--lh-base); resize: vertical; } .form-text, .form-hint { display: block; margin-top: 5px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; } .invalid-feedback { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--danger-text); } /* input with a leading icon */ .input-ico { position: relative; } /* The icon is written AFTER the input so the focus rule below can reach it with a sibling combinator, so it must not be matched as :first-child - that was leaving every field's icon in normal flow underneath the input. `>` keeps this off the inside an .ico-action button. */ .input-ico > i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--faint); font-size: 15px; pointer-events: none; transition: color var(--dur-2) var(--ease-out); } .input-ico .form-control { padding-left: 39px; } .input-ico .form-control:focus ~ i { color: var(--brand-600); } .input-ico .ico-action { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: var(--r-xs); background: transparent; color: var(--muted); font-size: 15px; cursor: pointer; } .input-ico .ico-action:hover { background: var(--surface-3); color: var(--ink-2); } .form-row-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: var(--sp-4); } /* switches and checks */ .form-check-input { border-color: var(--n-300); cursor: pointer; } .form-check-input:checked { background-color: var(--brand-500); border-color: var(--brand-500); } .form-check-input:focus { border-color: var(--brand-400); box-shadow: 0 0 0 2px var(--brand-ring); } .form-check-label { font-size: var(--fs-base); color: var(--ink-2); cursor: pointer; } /* inline alert strip used by AJAX forms */ .alert-inline { display: none; align-items: flex-start; gap: 9px; padding: 11px 14px; margin-bottom: var(--sp-4); border-radius: var(--r-sm); font-size: var(--fs-md); line-height: 1.5; border: 1px solid transparent; } .alert-inline.show { display: flex; } .alert-inline i { font-size: 15px; margin-top: 1px; flex: 0 0 auto; } .alert-inline.err { background: var(--danger-soft); color: var(--danger-text); border-color: var(--danger-line); } .alert-inline.ok { background: var(--ok-soft); color: var(--ok-text); border-color: var(--ok-line); } .alert-inline.warn { background: var(--warn-soft); color: var(--warn-text); border-color: var(--warn-line); } .alert-inline.info { background: var(--info-soft); color: var(--info-text); border-color: var(--info-line); } /* modal refinement (SweetAlert2 is used for confirms; Bootstrap modals for editors) */ .modal-content { border: 1px solid var(--hairline); border-radius: var(--r-xl); box-shadow: var(--sh-4); overflow: hidden; } .modal-header { padding: 18px var(--sp-5); border-bottom: 1px solid var(--hairline); background: linear-gradient(to bottom, var(--n-50), var(--surface)); } .modal-title { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: var(--tr-tight); } .modal-body { padding: var(--sp-5); } .modal-footer { padding: 14px var(--sp-5); border-top: 1px solid var(--hairline); background: var(--surface-2); gap: var(--sp-2); } /* ========================================================================== 22 CHECK SHEET FILL GRID The one screen that carries the whole product. Both axes are sticky: the header band pins to the top, the label columns pin to the left. z-index layering inside .sheet-table body cell ................. 1 (--z-sheet-cell) focused / flagged cell .... 2 (--z-sheet-hot) lifts its ring over neighbours sticky label column ....... 5 (--z-sheet-row) clears any lifted body cell sticky header row ......... 7 (--z-sheet-col) clears the label columns header AND label (corner) . 9 (--z-sheet-corner) The order matters: a body row scrolling upward must pass UNDER the header, and a label column scrolling leftward must pass OVER the body cells. Left offsets for label columns 2..4 come from --sc-2 / --sc-3 / --sc-4, which PHP may override inline on .sheet-wrap per form. ========================================================================== */ .sheet-wrap { position: relative; width: 100%; max-height: calc(100vh - var(--topbar-h) - 210px); overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: var(--r-md); scrollbar-width: thin; } .sheet-wrap.auto-height { max-height: none; overflow: visible; } .sheet-table { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; background: var(--surface); font-size: var(--fs-md); color: var(--ink); table-layout: fixed; } /* -- Base cells ----------------------------------------------------------- */ .sheet-table th, .sheet-table td { position: relative; z-index: var(--z-sheet-cell); border-right: 1px solid var(--hairline-strong); border-bottom: 1px solid var(--hairline-strong); padding: 0; vertical-align: middle; background: var(--surface); background-clip: padding-box; } .sheet-table tr > *:first-child { border-left: 1px solid var(--hairline-strong); } .sheet-table tr:first-child > * { border-top: 1px solid var(--hairline-strong); } /* -- Document / title band ------------------------------------------------ */ .sheet-title-cell { padding: 10px 14px; text-align: center; font-size: var(--fs-2xl); font-weight: var(--fw-black); letter-spacing: .01em; color: var(--brand-900); background: var(--brand-wash); } .sheet-title-cell .sheet-title-sub { display: block; margin-top: 3px; font-size: var(--fs-md); font-weight: var(--fw-semi); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--brand-800); } .sheet-doc-cell { padding: 6px 10px; font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--ink-2); background: var(--surface-2); white-space: nowrap; } /* -- Header / footer field bands ------------------------------------------ */ .sheet-label-cell { padding: 7px 10px; font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--ink-2); background: var(--surface-3); white-space: nowrap; } .sheet-field-cell { padding: 3px 5px; background: var(--surface); } .sheet-auto-cell { padding: 7px 10px; font-size: var(--fs-md); font-weight: var(--fw-semi); color: var(--ink-3); background: var(--surface-2); } .sheet-auto-cell .auto-tag { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 0 6px; border-radius: var(--r-pill); border: 1px solid var(--ok-line); background: var(--ok-soft); color: var(--ok-text); font-size: var(--fs-2xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tr-wide); vertical-align: middle; } /* -- Sticky column head band ---------------------------------------------- */ .sheet-table thead th { position: sticky; top: 0; z-index: var(--z-sheet-col); background: linear-gradient(to bottom, #f4f9f8, #edf4f3); color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tr-wide); padding: 8px 8px; text-align: center; white-space: nowrap; box-shadow: inset 0 -1px 0 var(--hairline-strong); } /* a second stacked header row (col_groups band sits above the time band) */ .sheet-table thead tr.row-2 th { top: 34px; } .sheet-table thead th.group-head { background: linear-gradient(to bottom, #eaf4f1, #e2efeb); color: var(--brand-900); font-size: var(--fs-md); letter-spacing: .05em; } /* time column header */ .col-time-head { min-width: 62px; width: 62px; font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--brand-800); } .col-time-head .col-time-sub { display: block; margin-top: 1px; font-size: var(--fs-2xs); font-weight: var(--fw-semi); color: var(--muted); text-transform: none; letter-spacing: 0; } .col-time-head.is-now { background: linear-gradient(to bottom, #e4f4ec, #d6ede1); color: var(--brand-900); box-shadow: inset 0 -2px 0 var(--brand-500); } /* -- Sticky label columns -------------------------------------------------- */ .sheet-table .s-col { position: sticky; z-index: var(--z-sheet-row); background: var(--surface-2); text-align: left; } .sheet-table .s-col-1 { left: var(--sc-1); } .sheet-table .s-col-2 { left: var(--sc-2); } .sheet-table .s-col-3 { left: var(--sc-3); } .sheet-table .s-col-4 { left: var(--sc-4); } /* the last sticky column casts the scroll shadow */ .sheet-table .s-col.s-col-last { box-shadow: 3px 0 6px -4px rgba(16, 38, 43, .45); } /* a cell that is sticky on BOTH axes (the top-left corner of the grid) */ .sheet-table thead .s-col, .sheet-table .s-col.s-head { z-index: var(--z-sheet-corner); background: linear-gradient(to bottom, #f4f9f8, #edf4f3); } /* -- Row label content ---------------------------------------------------- */ .sheet-row-label { padding: 6px 10px; font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--ink); line-height: 1.35; white-space: normal; } .sheet-row-label .sr-no { display: inline-block; min-width: 18px; margin-right: 6px; color: var(--muted); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; } .sheet-row-label .spec-hint { display: block; margin-top: 2px; font-size: var(--fs-2xs); font-weight: var(--fw-semi); color: var(--muted); letter-spacing: 0; } .sheet-uom-cell { padding: 6px 8px; text-align: center; font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--ink-3); background: var(--surface-2); white-space: nowrap; } /* -- Rotated / merged vertical section label ------------------------------ */ .sheet-section-cell { padding: 6px 2px; text-align: center; vertical-align: middle; background: var(--brand-wash); color: var(--brand-900); font-size: var(--fs-sm); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tr-caps); white-space: nowrap; } .sheet-section-cell .rot { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); line-height: 1; max-height: 100%; } /* short section labels stay horizontal */ .sheet-section-cell.horizontal { white-space: normal; letter-spacing: var(--tr-wide); } .sheet-section-cell.horizontal .rot { writing-mode: horizontal-tb; transform: none; } .sheet-sub-cell { padding: 6px 8px; text-align: center; vertical-align: middle; background: var(--surface-3); color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-semi); line-height: 1.3; } /* -- Compact cell inputs that fill their cell ------------------------------ */ .sheet-table td.cell-input-td { padding: 0; } .cell-input { display: block; width: 100%; height: 34px; min-width: 0; padding: 4px 6px; border: 0; border-radius: 0; background: transparent; font-family: var(--font-sans); font-size: var(--fs-md); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; text-align: center; color: var(--ink); outline: none; appearance: none; transition: background-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); } .cell-input::placeholder { color: var(--n-300); font-weight: var(--fw-normal); } .cell-input::-webkit-outer-spin-button, .cell-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .cell-input[type="number"] { -moz-appearance: textfield; } .cell-input:hover:not(:disabled) { background: var(--surface-2); } .cell-input:focus { background: #fff; box-shadow: inset 0 0 0 2px var(--brand-500); position: relative; z-index: var(--z-sheet-hot); } .cell-input:disabled, .cell-input[readonly] { background: var(--surface-3); color: var(--ink-3); cursor: default; } /* a filled cell reads slightly darker so gaps are obvious at a glance */ .cell-input.has-value { color: var(--n-900); } .sheet-table td.is-empty-required { background: #fffdf5; } /* select / textual variants inside a cell */ select.cell-input { text-align-last: center; cursor: pointer; padding-right: 4px; } textarea.cell-input { height: auto; min-height: 34px; text-align: left; resize: vertical; line-height: 1.4; font-weight: var(--fw-normal); } .cell-input.text-left { text-align: left; } /* -- Out of spec ---------------------------------------------------------- */ .cell-oos { background: var(--danger-soft) !important; box-shadow: inset 0 0 0 2px var(--danger); z-index: var(--z-sheet-hot); } .cell-oos .cell-input { background: transparent; color: var(--danger-text); font-weight: var(--fw-bold); } .cell-oos .cell-input:focus { background: #fff; box-shadow: inset 0 0 0 2px var(--danger); } .cell-oos::after { content: ""; position: absolute; top: 2px; right: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--danger); pointer-events: none; } /* -- Inline remark revealed under a flagged cell -------------------------- */ .cell-remark { display: none; padding: 4px 5px 5px; background: var(--danger-soft); border-top: 1px dashed var(--danger-line); } .cell-oos > .cell-remark, .cell-remark.show { display: block; } .cell-remark input, .cell-remark textarea { display: block; width: 100%; min-height: 28px; padding: 4px 7px; border: 1px solid var(--danger-line); border-radius: var(--r-xs); background: #fff; font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--ink); line-height: 1.35; resize: vertical; transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); } .cell-remark input::placeholder, .cell-remark textarea::placeholder { color: #d09a9b; } .cell-remark input:focus, .cell-remark textarea:focus { outline: none; border-color: var(--danger); box-shadow: 0 0 0 2px rgba(224, 68, 71, .18); } .cell-remark.is-missing input, .cell-remark.is-missing textarea { border-color: var(--danger); background: #fff6f6; } .cell-remark .remark-hint { display: block; margin-top: 3px; font-size: var(--fs-2xs); font-weight: var(--fw-semi); color: var(--danger-text); letter-spacing: 0; } /* -- Sheet toolbar / legend / status strip -------------------------------- */ .sheet-toolbar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); } .sheet-legend { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--muted); } .sheet-legend .legend-item { display: inline-flex; align-items: center; gap: 6px; } .sheet-legend .legend-swatch { width: 13px; height: 13px; border-radius: 3px; border: 1px solid var(--hairline-strong); background: var(--surface); } .sheet-legend .legend-swatch.oos { background: var(--danger-soft); border-color: var(--danger); } .sheet-legend .legend-swatch.filled { background: var(--brand-50); border-color: var(--brand-300); } .sheet-legend .legend-swatch.auto { background: var(--surface-3); } .sheet-status { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--r-pill); font-size: var(--fs-md); font-weight: var(--fw-semi); background: var(--info-soft); color: var(--info-text); border: 1px solid var(--info-line); } .sheet-status.is-dirty { background: var(--warn-soft); color: var(--warn-text); border-color: var(--warn-line); } .sheet-status.is-saved { background: var(--ok-soft); color: var(--ok-text); border-color: var(--ok-line); } .sheet-status.is-blocked { background: var(--danger-soft); color: var(--danger-text); border-color: var(--danger-line); } .sheet-status i { font-size: 14px; } /* the block-submit banner shown while OOS remarks are missing */ .sheet-block-note { display: flex; align-items: flex-start; gap: 10px; padding: 12px 15px; margin-bottom: var(--sp-3); border-radius: var(--r-md); border: 1px solid var(--danger-line); border-left: 3px solid var(--danger); background: var(--danger-soft); color: var(--danger-text); font-size: var(--fs-md); line-height: var(--lh-base); } .sheet-block-note i { font-size: 17px; margin-top: 1px; flex: 0 0 auto; } .sheet-block-note b { font-weight: var(--fw-bold); } /* read-only view mode dims the inputs into flat printed values */ .sheet-table.mode-view .cell-input, .sheet-table.mode-print .cell-input { background: transparent; box-shadow: none; color: var(--ink); pointer-events: none; } .sheet-table.mode-view .cell-remark { border-top-style: solid; } /* ========================================================================== 23 AUTHENTICATION SCREENS ========================================================================== */ .auth-wrap { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 100vh; background: var(--surface); overflow: hidden; } /* -- Left brand panel ----------------------------------------------------- */ .auth-brand { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-7); padding: 46px 54px; color: #fff; overflow: hidden; background: var(--brand-grad-d); isolation: isolate; } /* animated gradient mesh */ .auth-mesh { position: absolute; inset: -20%; z-index: 0; background: radial-gradient(38% 44% at 22% 26%, rgba(61, 182, 189, .95), transparent 62%), radial-gradient(42% 40% at 78% 18%, rgba(97, 180, 65, .85), transparent 64%), radial-gradient(46% 48% at 66% 82%, rgba(58, 100, 41, .92), transparent 66%), radial-gradient(40% 40% at 16% 84%, rgba(60, 184, 120, .9), transparent 62%); filter: blur(28px) saturate(1.15); opacity: .95; pointer-events: none; } /* faint engineering grid over the mesh */ .auth-grid-lines { position: absolute; inset: 0; z-index: 1; background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: radial-gradient(circle at 58% 42%, #000 12%, transparent 76%); mask-image: radial-gradient(circle at 58% 42%, #000 12%, transparent 76%); pointer-events: none; } /* floating soft blobs */ .auth-blob { position: absolute; z-index: 1; border-radius: 50%; background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 68%); filter: blur(4px); opacity: .3; pointer-events: none; } .auth-blob.b1 { width: 340px; height: 340px; top: -84px; right: -70px; } .auth-blob.b2 { width: 240px; height: 240px; bottom: 26px; left: -86px; opacity: .22; } .auth-blob.b3 { width: 150px; height: 150px; top: 46%; right: 24%; opacity: .16; } /* a slow shimmer sweeping across the panel */ .auth-brand::after { content: ""; position: absolute; top: -40%; left: -60%; width: 45%; height: 190%; z-index: 2; transform: rotate(18deg); background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, .16), rgba(255, 255, 255, 0)); pointer-events: none; } /* Lift the real content above the decorative layers. The mesh, grid lines and blobs are absolutely positioned and MUST stay that way: this rule has the same specificity as theirs and comes later, so without the exclusions it drops them into the flex column, where their 340px + 240px + 150px heights push the logo and headline off the bottom of the page. */ .auth-brand > *:not(.auth-mesh):not(.auth-grid-lines):not(.auth-blob) { position: relative; z-index: 3; } .auth-logo { display: flex; align-items: center; gap: 14px; } .auth-logo img { height: 46px; width: auto; background: #fff; padding: 7px 11px; border-radius: var(--r-md); box-shadow: 0 10px 26px rgba(0, 0, 0, .2); } .auth-logo .auth-logo-title { display: block; font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: .01em; line-height: 1.2; } .auth-logo .auth-logo-sub { display: block; font-size: var(--fs-sm); font-weight: var(--fw-medium); letter-spacing: var(--tr-wide); text-transform: uppercase; opacity: .85; } .auth-hero { max-width: 520px; } .auth-hero h1 { margin: 0 0 14px; font-size: var(--fs-5xl); font-weight: var(--fw-black); line-height: 1.1; letter-spacing: -.026em; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .18); } .auth-hero p { margin: 0; font-size: var(--fs-lg); line-height: var(--lh-loose); opacity: .93; max-width: 44ch; } /* floating glass cards over the mesh */ .auth-foot { font-size: var(--fs-sm); opacity: .78; line-height: 1.5; } /* -- Right form panel ----------------------------------------------------- */ .auth-panel { display: flex; align-items: center; justify-content: center; padding: var(--sp-8) var(--sp-6); background: radial-gradient(760px 420px at 70% -8%, rgba(61, 182, 189, .10), transparent 62%), linear-gradient(180deg, #ffffff 0%, #f3f8f8 100%); } .auth-card { width: 100%; max-width: 420px; padding: 38px 36px 32px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-2xl); box-shadow: var(--sh-4); } .auth-card h2 { margin: 0 0 5px; font-size: var(--fs-3xl); font-weight: var(--fw-black); letter-spacing: -.02em; } .auth-card .auth-sub { margin: 0 0 26px; font-size: var(--fs-base); color: var(--muted); line-height: var(--lh-base); } .auth-card .field { margin-bottom: 17px; } .auth-card .btn-brand { width: 100%; padding: 12px; font-size: var(--fs-lg); } .auth-mobile-head { display: none; } .auth-links { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-4); font-size: var(--fs-md); } .auth-legal { margin: var(--sp-6) 0 0; padding-top: var(--sp-4); border-top: 1px solid var(--hairline); font-size: var(--fs-sm); color: var(--muted); text-align: center; line-height: 1.55; } /* -- OTP input group ------------------------------------------------------ */ .otp-group { display: flex; gap: 9px; justify-content: space-between; margin: var(--sp-2) 0 var(--sp-4); } .otp-input { flex: 1 1 0; width: 100%; min-width: 0; height: 56px; padding: 0; text-align: center; font-family: var(--font-sans); font-size: var(--fs-3xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; color: var(--ink); background: var(--surface-2); border: 1px solid var(--hairline-strong); border-radius: var(--r-md); transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); appearance: none; } .otp-input::-webkit-outer-spin-button, .otp-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .otp-input:focus { outline: none; background: #fff; border-color: var(--brand-500); box-shadow: 0 0 0 2px var(--brand-ring); transform: translateY(-1px); } .otp-input.filled { background: #fff; border-color: var(--brand-300); color: var(--brand-900); } .otp-group.is-invalid .otp-input { border-color: var(--danger); background: var(--danger-soft); color: var(--danger-text); } .otp-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--fs-md); color: var(--muted); } .otp-meta .otp-timer { font-variant-numeric: tabular-nums; font-weight: var(--fw-semi); color: var(--ink-2); } /* ========================================================================== 24 MOTION - keyframes, page enter, micro-interactions Every animation below is applied ONLY inside a `prefers-reduced-motion: no-preference` guard. Base styles are always the finished, visible state, so a reduced-motion visitor sees a complete page. ========================================================================== */ @keyframes wa-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes wa-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes wa-rise { from { opacity: 0; transform: translateY(20px) scale(.985); } to { opacity: 1; transform: none; } } @keyframes wa-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } } @keyframes wa-spin { to { transform: rotate(360deg); } } @keyframes wa-oos-pulse { 0% { box-shadow: inset 0 0 0 2px var(--danger), 0 0 0 0 rgba(224, 68, 71, .5); } 60% { box-shadow: inset 0 0 0 2px var(--danger), 0 0 0 8px rgba(224, 68, 71, 0); } 100% { box-shadow: inset 0 0 0 2px var(--danger), 0 0 0 0 rgba(224, 68, 71, 0); } } @keyframes wa-blob-float { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(16px, -26px, 0) scale(1.06); } } @keyframes wa-mesh-drift { 0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1.04); } 33% { transform: translate3d(-3%, 2%, 0) rotate(3deg) scale(1.1); } 66% { transform: translate3d(3%, -2%, 0) rotate(-3deg) scale(1.08); } 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1.04); } } @keyframes wa-sheen { from { transform: translateX(0) rotate(18deg); } to { transform: translateX(560%) rotate(18deg); } } @keyframes wa-bell { 0%, 88%, 100% { transform: rotate(0); } 90% { transform: rotate(11deg); } 93% { transform: rotate(-9deg); } 96% { transform: rotate(5deg); } } @keyframes wa-dot-ping { 0% { box-shadow: 0 0 0 0 rgba(224, 68, 71, .45); } 70% { box-shadow: 0 0 0 7px rgba(224, 68, 71, 0); } 100% { box-shadow: 0 0 0 0 rgba(224, 68, 71, 0); } } @media (prefers-reduced-motion: no-preference) { /* -- Page enter: cards fade up, staggered ------------------------------- */ .content .card, .content .kpi-card, .content .skeleton-card { animation: wa-fade-up var(--dur-4) var(--ease-out) both; } .content .card:nth-child(1), .content .kpi-card:nth-child(1) { animation-delay: .02s; } .content .card:nth-child(2), .content .kpi-card:nth-child(2) { animation-delay: .06s; } .content .card:nth-child(3), .content .kpi-card:nth-child(3) { animation-delay: .10s; } .content .card:nth-child(4), .content .kpi-card:nth-child(4) { animation-delay: .14s; } .content .card:nth-child(5), .content .kpi-card:nth-child(5) { animation-delay: .18s; } .content .card:nth-child(6), .content .kpi-card:nth-child(6) { animation-delay: .22s; } .content .card:nth-child(n+7), .content .kpi-card:nth-child(n+7) { animation-delay: .26s; } .page-head { animation: wa-fade-in var(--dur-3) var(--ease-out) both; } /* -- Skeleton shimmer ---------------------------------------------------- */ .skeleton::after { animation: wa-shimmer 1.35s ease-in-out infinite; } /* -- Spinners ------------------------------------------------------------ */ .spin, .btn .spin { animation: wa-spin .68s linear infinite; } /* -- Out of spec cell pulses exactly once when it is flagged ------------- */ .cell-oos.just-flagged { animation: wa-oos-pulse .85s var(--ease-out) 1; } /* -- Notification bell + dot -------------------------------------------- */ .icon-btn.has-alert > i { animation: wa-bell 5.5s ease-in-out infinite; transform-origin: 50% 12%; } .icon-btn .dot { animation: wa-dot-ping 2.4s ease-out infinite; } /* -- Auth panel ---------------------------------------------------------- */ .auth-mesh { animation: wa-mesh-drift 26s ease-in-out infinite; } .auth-blob { animation: wa-blob-float 13s ease-in-out infinite; } .auth-blob.b2 { animation-delay: -4.5s; } .auth-blob.b3 { animation-delay: -8.5s; } .auth-brand::after { animation: wa-sheen 9s ease-in-out infinite; } .auth-card { animation: wa-rise var(--dur-4) var(--ease-out) both; } /* -- Modal / dropdown ---------------------------------------------------- */ .dropdown-menu.show { animation: wa-fade-up .16s var(--ease-out) both; } .modal.show .modal-dialog { animation: wa-rise .28s var(--ease-out) both; } /* -- Timeline rows ------------------------------------------------------- */ .timeline .tl-item { animation: wa-fade-up .38s var(--ease-out) both; } .timeline .tl-item:nth-child(2) { animation-delay: .05s; } .timeline .tl-item:nth-child(3) { animation-delay: .10s; } .timeline .tl-item:nth-child(4) { animation-delay: .15s; } .timeline .tl-item:nth-child(n+5) { animation-delay: .2s; } } /* Reduced motion: strip transitions too, not just keyframes. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* standalone spinner used outside buttons */ .spin { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--n-200); border-top-color: var(--brand-500); border-radius: 50%; vertical-align: -3px; } .spin.spin-lg { width: 24px; height: 24px; border-width: 3px; } /* ========================================================================== 25 RESPONSIVE ========================================================================== */ /* -- Wide desktop trims --------------------------------------------------- */ @media (max-width: 1400px) { :root { --content-pad: 24px; } } @media (max-width: 1200px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .topbar-search { flex-basis: 240px; } } /* -- Tablet and below: sidebar becomes an off-canvas drawer --------------- */ @media (max-width: 991.98px) { :root { --content-pad: 18px; --topbar-h: 60px; } .layout { grid-template-columns: minmax(0, 1fr); } /* one column here, so the content returns to it */ .layout > .main { grid-column: 1; } .sidebar { width: min(86vw, 300px); transform: translateX(-100%); box-shadow: none; } .sidebar.open { transform: translateX(0); box-shadow: 0 0 60px rgba(6, 18, 22, .45); } /* the rail state is meaningless on a drawer */ html.nav-collapsed .sidebar { width: min(86vw, 300px); } html.nav-collapsed .sidebar .brand-text, html.nav-collapsed .nav-item .nav-text { display: revert; } .sidebar:focus { outline: none; } .topbar { padding: 0 var(--content-pad); gap: var(--sp-2); } .topbar .page-sub, .crumbs { display: none; } .topbar-search { display: none; } .user-chip { padding-right: 6px; } .user-chip .user-meta, .user-chip > .bi-chevron-down { display: none; } .content { padding: var(--sp-5) var(--content-pad) var(--sp-9); } .page-head h1 { font-size: var(--fs-2xl); } .page-head .actions { width: 100%; margin-left: 0; } /* KPI grid reflows to 2-up */ .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); } .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); } /* tables scroll horizontally with a sticky identity column */ .table-wrap { overflow-x: auto; } .table-premium { min-width: 720px; } .table-premium tbody td:first-child, .table-premium thead th:first-child { position: sticky; left: 0; z-index: 2; box-shadow: 1px 0 0 var(--hairline), 6px 0 10px -8px rgba(16, 38, 43, .5); } .table-premium thead th:first-child { z-index: 4; } .table-premium th.cell-check, .table-premium td.cell-check { position: static; box-shadow: none; } /* the check sheet gets the full viewport height it can spare */ .sheet-wrap { max-height: calc(100vh - var(--topbar-h) - 168px); } /* auth: one column, brand panel becomes a slim header */ .auth-wrap { grid-template-columns: minmax(0, 1fr); min-height: 100vh; } .auth-brand { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: 18px var(--sp-5); min-height: 0; } .auth-brand::after { display: none; } .auth-hero, .auth-foot, .auth-grid-lines, .auth-blob.b2, .auth-blob.b3 { display: none; } .auth-blob.b1 { width: 200px; height: 200px; top: -110px; right: -40px; } .auth-logo img { height: 38px; padding: 5px 9px; } .auth-logo .auth-logo-title { font-size: var(--fs-lg); } .auth-panel { padding: var(--sp-7) var(--sp-4) var(--sp-8); align-items: flex-start; } .auth-card { max-width: 460px; padding: 30px 24px 26px; box-shadow: var(--sh-3); } } /* -- Phone ---------------------------------------------------------------- */ @media (max-width: 767.98px) { :root { --content-pad: 14px; } body { font-size: 14px; } .page-head { margin-bottom: var(--sp-5); } .page-head h1 { font-size: var(--fs-xl); } .page-head .actions .btn { flex: 1 1 auto; justify-content: center; } /* KPI grid reflows to 1-up */ .kpi-grid { grid-template-columns: minmax(0, 1fr); } .kpi-card { padding: var(--sp-4) var(--sp-4) 16px; } .kpi-card .kpi-value { font-size: var(--fs-3xl); } .kpi-card .kpi-icon { width: 40px; height: 40px; font-size: 19px; margin-bottom: 12px; } .card-head { padding: 14px var(--sp-4); } .card-body { padding: var(--sp-4); } .card-foot, .card-sticky-foot { padding: 12px var(--sp-4); } .filter-bar { padding: 10px; gap: 8px; } .filter-bar .filter-search { flex: 1 1 100%; max-width: none; } .filter-bar .filter-group { flex: 1 1 46%; } .filter-bar .form-select, .filter-bar .form-control { min-width: 0; width: 100%; } .filter-bar .filter-actions { width: 100%; justify-content: flex-end; } .pagination-premium { gap: var(--sp-2); } .pagination-premium .page-list { margin-left: 0; width: 100%; justify-content: center; } .pagination-premium .page-size { display: none; } .table-premium.density-comfortable thead th { padding: 12px 14px; } .table-premium.density-comfortable tbody td { padding: 13px 14px; } .modal-header, .modal-body, .modal-footer { padding-left: var(--sp-4); padding-right: var(--sp-4); } .timeline { padding-left: 26px; } .timeline .tl-dot { left: -26px; } .otp-group { gap: 6px; } .otp-input { height: 50px; font-size: var(--fs-2xl); } .empty-state { padding: var(--sp-7) var(--sp-4); } /* -- Touch targets: 44px minimum ---------------------------------------- */ .btn, .nav-toggle, .icon-btn, .user-chip, .pagination-premium .page-btn, .form-control, .form-select, .filter-bar .filter-search input, .filter-bar .form-select, .filter-bar .form-control { min-height: 44px; } .btn-sm { min-height: 40px; padding: 8px 14px; } .btn-square { width: 44px; height: 44px; } .chip { height: 34px; padding: 0 13px; } .nav-item { padding: 13px; min-height: 46px; } .dropdown-menu .dropdown-item { min-height: 44px; } .form-check-input { width: 20px; height: 20px; margin-top: .15em; } /* sheet cells get taller so a thumb can hit them */ .cell-input { height: 44px; font-size: var(--fs-base); } .col-time-head { min-width: 68px; width: 68px; } .sheet-wrap { max-height: calc(100vh - var(--topbar-h) - 150px); } } @media (max-width: 575.98px) { .page-head .actions { flex-direction: column; align-items: stretch; } .auth-card { padding: 24px 18px 22px; border-radius: var(--r-xl); } .auth-card h2 { font-size: var(--fs-2xl); } .auth-links { flex-direction: column; align-items: flex-start; gap: 8px; } .filter-bar .filter-group { flex: 1 1 100%; } .sheet-legend { gap: var(--sp-3); font-size: var(--fs-2xs); } } /* short viewports (landscape phone / small tablet) */ @media (max-height: 620px) and (max-width: 991.98px) { .auth-panel { align-items: flex-start; padding-top: var(--sp-5); } .sheet-wrap { max-height: 60vh; } } /* ========================================================================== 26 PRINT print.php renders the sheet exactly as the paper log book, with a rotated repeating watermark carrying the login ID of whoever produced the copy. ========================================================================== */ @media print { @page { size: A4 landscape; margin: 10mm; } @page portrait-page { size: A4 portrait; } html, body { background: #fff !important; color: #000 !important; font-size: 9.5pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* -- Strip the shell ----------------------------------------------------- */ .sidebar, .topbar, .scrim, .nav-toggle, .filter-bar, .pagination-premium, .card-sticky-foot, .sheet-toolbar, .sheet-status, .sheet-block-note, .page-head .actions, .dropdown-menu, .btn, .icon-btn, .user-chip, .no-print { display: none !important; } .layout { display: block !important; } .layout > .main { background: #fff !important; min-height: 0; } .content { max-width: none !important; margin: 0 !important; padding: 0 !important; } /* -- Flat cards ---------------------------------------------------------- */ .card, .kpi-card { border: 1px solid #000 !important; border-radius: 0 !important; box-shadow: none !important; break-inside: avoid; page-break-inside: avoid; animation: none !important; } .card::before, .kpi-card::before, .kpi-card::after { display: none !important; } .card-head, .card-foot { background: #fff !important; border-color: #000 !important; } .card-body { padding: 6px 8px !important; } /* -- The sheet must fit the page ---------------------------------------- */ .sheet-wrap { max-height: none !important; overflow: visible !important; border: 0 !important; border-radius: 0 !important; background: #fff !important; } .sheet-table { width: 100% !important; min-width: 0 !important; table-layout: fixed; font-size: 7.4pt !important; color: #000 !important; page-break-inside: auto; } .sheet-table th, .sheet-table td { position: static !important; border: .4pt solid #000 !important; background: #fff !important; color: #000 !important; box-shadow: none !important; padding: 1pt 2pt !important; word-break: break-word; } .sheet-table thead { display: table-header-group; } .sheet-table tr { page-break-inside: avoid; } .sheet-title-cell { font-size: 13pt !important; font-weight: 800; background: #fff !important; } .sheet-title-cell .sheet-title-sub { font-size: 8pt !important; } .sheet-label-cell, .sheet-uom-cell, .sheet-sub-cell, .sheet-section-cell, .sheet-doc-cell, .sheet-auto-cell, .col-time-head { background: #fff !important; color: #000 !important; } .sheet-section-cell .rot { writing-mode: vertical-rl; transform: rotate(180deg); } .sheet-auto-cell .auto-tag { display: none !important; } .cell-input { height: auto !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: #000 !important; font-size: 7.4pt !important; font-weight: 600; padding: 0 !important; -webkit-appearance: none; appearance: none; } /* out of spec still has to read as out of spec on paper */ .cell-oos { background: #fff !important; box-shadow: none !important; outline: 1pt solid #000 !important; outline-offset: -1pt; } .cell-oos .cell-input { font-weight: 800; text-decoration: underline; } .cell-oos::after { display: none !important; } .cell-remark { display: block !important; background: #fff !important; border-top: .4pt dashed #000 !important; padding: 0 !important; } .cell-remark input, .cell-remark textarea { border: 0 !important; background: transparent !important; color: #000 !important; font-size: 6.6pt !important; padding: 0 !important; min-height: 0 !important; } .cell-remark .remark-hint { display: none !important; } /* -- Tables on paper ----------------------------------------------------- */ .table-wrap { overflow: visible !important; max-height: none !important; } .table-premium { min-width: 0 !important; font-size: 8pt !important; } .table-premium thead th, .table-premium tbody td { position: static !important; background: #fff !important; color: #000 !important; border: .4pt solid #000 !important; box-shadow: none !important; padding: 3pt 4pt !important; } .table-premium tbody tr:hover td { background: #fff !important; } .badge-status, .badge-role, .chip { background: #fff !important; color: #000 !important; border: .4pt solid #000 !important; box-shadow: none !important; } .badge-status::before { display: none !important; } .timeline::before { background: #000 !important; } .timeline .tl-dot { background: #fff !important; border-color: #000 !important; color: #000 !important; box-shadow: none !important; } .timeline .tl-note { background: #fff !important; border-left-color: #000 !important; color: #000 !important; } .section-title, .section-band { background: #fff !important; color: #000 !important; border-left-color: #000 !important; } .section-title::before { background: #000 !important; } .section-title::after { display: none !important; } .divider-soft { background: #000 !important; } /* -- Signature strip ----------------------------------------------------- */ .print-signatures { display: flex; gap: 8mm; margin-top: 6mm; page-break-inside: avoid; } .print-signatures .sig-box { flex: 1 1 0; border-top: .4pt solid #000; padding-top: 2mm; font-size: 7.6pt; } .print-signatures .sig-box b { display: block; font-size: 8.4pt; } /* -- Watermark ---------------------------------------------------------- Markup: The tile wraps, so N spans cover the whole page in a rotated lattice. */ .print-watermark { display: flex !important; position: fixed; inset: -30% -30%; z-index: 9999; flex-wrap: wrap; align-content: center; justify-content: center; gap: 26mm 22mm; transform: rotate(-32deg); pointer-events: none; overflow: hidden; } .print-watermark span { flex: 0 0 auto; font-family: var(--font-sans); font-size: 15pt; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; color: rgba(58, 100, 41, .085); -webkit-print-color-adjust: exact; print-color-adjust: exact; } .print-watermark span:nth-child(even) { color: rgba(16, 38, 43, .07); } /* a single large diagonal stamp, when a lattice is too busy */ .print-watermark.single { gap: 0; } .print-watermark.single span { font-size: 54pt; letter-spacing: .1em; color: rgba(58, 100, 41, .07); } /* portrait sheets opt in per form */ .print-portrait { page: portrait-page; } /* nothing animates on paper */ *, *::before, *::after { animation: none !important; transition: none !important; } } /* ========================================================================== 27 SHELL COMPLETION Classes emitted by includes/layout.php, includes/403.php and assets/js/app.js that the sections above do not already cover. ========================================================================== */ /* -- Sidebar footer ------------------------------------------------------ */ .side-foot { margin-top: auto; padding: var(--sp-3) var(--sp-4) var(--sp-4); border-top: 1px solid rgba(255, 255, 255, .07); display: flex; flex-direction: column; gap: var(--sp-2); } .nav-collapse-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: var(--r-sm); background: rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .74); font-size: var(--fs-md); font-weight: var(--fw-medium); cursor: pointer; transition: background .18s ease, color .18s ease; } .nav-collapse-btn:hover { background: rgba(255, 255, 255, .11); color: #fff; } .nav-collapse-btn i { font-size: 14px; transition: transform .28s ease; } .side-version { font-size: var(--fs-2xs); letter-spacing: var(--tr-caps); text-transform: uppercase; color: rgba(255, 255, 255, .32); padding-left: 3px; } html.nav-collapsed .side-version { display: none; } html.nav-collapsed .nav-collapse-btn { justify-content: center; padding: 9px 0; } html.nav-collapsed .nav-collapse-btn i { transform: rotate(180deg); } /* -- Brand mark: wordmark expanded, square icon in the rail --------------- */ .brand-mark-rail { display: none; } html.nav-collapsed .sidebar .brand-mark { display: none; } html.nav-collapsed .sidebar .brand-mark-rail { display: block; width: 40px; height: 40px; padding: 4px; object-fit: contain; } /* Below the drawer breakpoint the sidebar is full width again, so the wordmark returns even while the collapsed class is still on . */ @media (max-width: 991.98px) { html.nav-collapsed .sidebar .brand-mark { display: block; } html.nav-collapsed .sidebar .brand-mark-rail { display: none; } /* The rail does not exist on a drawer, so a collapse control there would toggle a state with no visible effect. The version line stays. */ .nav-collapse-btn { display: none; } html.nav-collapsed .side-version { display: block; } } /* -- App footer ---------------------------------------------------------- */ .app-foot { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-5) var(--sp-6) var(--sp-7); font-size: var(--fs-sm); color: var(--faint); } .app-foot-sep { opacity: .5; } /* -- Blocking overlay and spinner ---------------------------------------- */ .ua-blocker { position: fixed; inset: 0; z-index: 2200; display: flex; align-items: center; justify-content: center; background: rgba(18, 34, 40, .34); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; } .ua-blocker.is-on { opacity: 1; visibility: visible; } .ua-blocker-box { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-4); padding: var(--sp-6) var(--sp-7); display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); min-width: 190px; } .ua-blocker-text { font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--ink-2); } .ua-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--brand-100); border-top-color: var(--brand-500); animation: ua-spin .75s linear infinite; } @keyframes ua-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .ua-spinner { animation-duration: 2.4s; } } /* -- SweetAlert2 skin ---------------------------------------------------- */ .ua-swal { border-radius: var(--r-lg) !important; box-shadow: var(--sh-4) !important; font-family: var(--font-sans) !important; } .ua-swal .swal2-title { font-size: var(--fs-xl) !important; color: var(--ink) !important; font-weight: var(--fw-semi) !important; } .ua-swal .swal2-html-container { font-size: var(--fs-base) !important; color: var(--ink-3) !important; } .ua-swal .swal2-actions { gap: var(--sp-2); } .ua-swal .swal2-input, .ua-swal .swal2-textarea { border-radius: var(--r-sm) !important; border: 1px solid var(--hairline-strong) !important; box-shadow: none !important; font-size: var(--fs-base) !important; } .ua-swal .swal2-input:focus, .ua-swal .swal2-textarea:focus { border-color: var(--brand-400) !important; box-shadow: 0 0 0 3px var(--brand-ring) !important; } .ua-toast { border-radius: var(--r-md) !important; box-shadow: var(--sh-3) !important; font-family: var(--font-sans) !important; } .ua-toast .swal2-title { font-size: var(--fs-base) !important; font-weight: var(--fw-medium) !important; } /* -- Misc helpers -------------------------------------------------------- */ body.no-scroll { overflow: hidden; } .empty-row td { border: 0 !important; background: transparent !important; } .chart-wrap { position: relative; width: 100%; height: 300px; } .chart-wrap.is-tall { height: 380px; } .chart-wrap.is-short { height: 220px; } /* Progress ring used by the compliance KPI */ .stat-ring { --pct: 0; position: relative; width: 74px; height: 74px; border-radius: 50%; background: conic-gradient(var(--brand-500) calc(var(--pct) * 1%), var(--n-150) 0); display: grid; place-items: center; flex: none; } .stat-ring::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--surface); } .stat-ring > span { position: relative; z-index: 1; font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--brand-700); } /* ========================================================================== 28 SLIDE-OVER PANEL The create and edit surface used by users, stations and master data. ========================================================================== */ .slide-over-scrim { position: fixed; inset: 0; z-index: 1500; background: rgba(18, 34, 40, .34); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .24s ease, visibility .24s ease; } .slide-over-scrim.is-open { opacity: 1; visibility: visible; } .slide-over { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1600; width: min(560px, 100vw); background: var(--surface); box-shadow: var(--sh-4); display: flex; flex-direction: column; transform: translateX(102%); transition: transform .3s cubic-bezier(.32, .72, 0, 1); } .slide-over.is-open { transform: translateX(0); } .slide-over.is-wide { width: min(880px, 100vw); } .so-head { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--hairline); } .so-head h2 { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-semi); color: var(--ink); } .so-head p { margin: 3px 0 0; font-size: var(--fs-sm); color: var(--muted); } .so-close { margin-left: auto; border: 0; background: var(--n-75); color: var(--ink-3); width: 34px; height: 34px; border-radius: var(--r-sm); font-size: 16px; cursor: pointer; flex: none; transition: background .16s ease, color .16s ease; } .so-close:hover { background: var(--danger-soft); color: var(--danger-text); } .so-body { flex: 1; overflow-y: auto; padding: var(--sp-5) var(--sp-6); } .so-foot { display: flex; gap: var(--sp-2); justify-content: flex-end; padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--hairline); background: var(--bg-soft); } @media (max-width: 575.98px) { .slide-over, .slide-over.is-wide { width: 100vw; } .so-head, .so-body, .so-foot { padding-left: var(--sp-4); padding-right: var(--sp-4); } } /* ========================================================================== 29 CHECK SHEET DOCUMENT The masthead, header and footer bands and grid chrome emitted by includes/render.php. Section 22 styles the cells; this styles the document. ========================================================================== */ .sheet-doc { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; } .sheet-masthead { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); border-bottom: 2px solid var(--brand-200); background: linear-gradient(180deg, var(--brand-50), var(--surface)); } .sheet-logo { height: 40px; width: auto; flex: none; } .sheet-titles { min-width: 0; flex: 1; } .sheet-company { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--brand-700); } .sheet-title { margin: 2px 0 0; font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: var(--tr-tight); color: var(--ink); line-height: var(--lh-tight); } .sheet-subtitle { font-size: var(--fs-sm); color: var(--ink-3); margin-top: 2px; } .sheet-meta { font-size: var(--fs-sm); color: var(--muted); margin-top: 4px; } .sheet-docs { display: flex; flex-direction: column; gap: 4px; flex: none; text-align: right; } .sheet-doc-field { font-size: var(--fs-xs); color: var(--muted); display: flex; gap: 6px; justify-content: flex-end; } .sheet-doc-field b { color: var(--ink-2); font-weight: var(--fw-semi); } /* -- Header and footer bands --------------------------------------------- */ .sheet-band { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--hairline); } .sheet-band:last-child { border-bottom: 0; } .sb-cell { flex: 1 1 auto; min-width: 0; padding: 7px 10px; border-right: 1px solid var(--hairline); font-size: var(--fs-md); display: flex; align-items: center; min-height: 38px; } .sb-cell:last-child { border-right: 0; } .sb-label { background: var(--bg-soft); font-weight: var(--fw-semi); color: var(--ink-2); } .sb-auto { background: var(--brand-50); color: var(--brand-800); font-weight: var(--fw-medium); } .sb-auto-val { font-size: var(--fs-sm); } .sb-val { color: var(--ink); word-break: break-word; } .sb-field.is-static { background: var(--surface); } .sb-input { width: 100%; border: 1px solid transparent; background: transparent; padding: 4px 6px; border-radius: var(--r-xs); font-size: var(--fs-md); color: var(--ink); min-height: 30px; } .sb-input:hover { border-color: var(--hairline-strong); background: var(--n-50); } .sb-input:focus { outline: 0; border-color: var(--brand-400); background: var(--surface); box-shadow: 0 0 0 3px var(--brand-ring); } textarea.sb-input { resize: vertical; min-height: 44px; } /* -- Grid chrome --------------------------------------------------------- */ .sheet-grid-wrap { border-bottom: 1px solid var(--hairline); } .sheet-grid-wrap:last-child { border-bottom: 0; } .sheet-grid-title { padding: 9px var(--sp-5) 6px; font-size: var(--fs-md); font-weight: var(--fw-bold); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--brand-700); background: var(--bg-soft); } .rl-spec { display: block; font-size: var(--fs-2xs); font-weight: var(--fw-medium); color: var(--brand-600); margin-top: 1px; white-space: nowrap; } .col-time-input { width: 100%; min-width: 76px; border: 1px solid var(--hairline-strong); border-radius: var(--r-xs); padding: 2px 4px; font-size: var(--fs-sm); text-align: center; background: var(--surface); } .col-time-input:focus { outline: 0; border-color: var(--brand-400); box-shadow: 0 0 0 2px var(--brand-ring); } .sheet-cell.is-plain { background: var(--n-50); } /* -- Read-only cell values ----------------------------------------------- */ .cell-val { display: block; text-align: center; font-size: var(--fs-md); font-variant-numeric: tabular-nums; color: var(--ink); padding: 3px 2px; } .cell-oos .cell-val { color: var(--danger-text); font-weight: var(--fw-bold); } .cell-remark-static { display: block; font-size: var(--fs-2xs); color: var(--danger-text); line-height: 1.3; max-width: 150px; margin: 2px auto 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cell-remark { display: none; } .cell-remark.is-shown, .cell-oos .cell-remark { display: block; } /* ========================================================================== 30 QR STATION PRINT CARDS ========================================================================== */ .qr-sheet { display: grid; gap: 8mm; grid-template-columns: repeat(2, 1fr); } .qr-sheet.size-large { grid-template-columns: repeat(2, 1fr); } .qr-sheet.size-compact { grid-template-columns: repeat(3, 1fr); gap: 6mm; } .qr-card { border: 1.5px dashed var(--n-300); border-radius: var(--r-md); padding: 6mm 5mm; text-align: center; background: #fff; break-inside: avoid; page-break-inside: avoid; display: flex; flex-direction: column; align-items: center; gap: 3mm; } .qr-card img.qr-logo { height: 9mm; width: auto; } .qr-card .qr-form { font-size: 11pt; font-weight: var(--fw-bold); color: #16324a; line-height: 1.25; } .qr-card .qr-line { font-size: 9.5pt; font-weight: var(--fw-semi); color: var(--brand-700); } .qr-card .qr-code { padding: 2mm; background: #fff; border: 1px solid var(--n-200); border-radius: 4px; } .qr-card .qr-code img, .qr-card .qr-code canvas { display: block; } .qr-card .qr-station { font-family: var(--font-mono); font-size: 9pt; letter-spacing: .06em; color: #445; } .qr-card .qr-hint { font-size: 7.5pt; color: #667; line-height: 1.35; max-width: 62mm; } @media print { .qr-sheet { gap: 6mm; } .qr-card { border-color: #aab; } } /* ========================================================================== 31 ERROR PAGES ========================================================================== */ .err-page { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-6); background: radial-gradient(900px 460px at 50% -10%, rgba(61, 182, 189, .12), transparent 70%), var(--bg); font-family: var(--font-sans); } .err-box { max-width: 460px; text-align: center; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-xl); box-shadow: var(--sh-3); padding: var(--sp-8) var(--sp-7); } .err-icon { width: 68px; height: 68px; margin: 0 auto var(--sp-4); border-radius: var(--r-lg); display: grid; place-items: center; background: var(--brand-grad-d); color: #fff; font-size: 30px; box-shadow: var(--sh-brand); } .err-box h1 { margin: 0; font-size: var(--fs-5xl); font-weight: var(--fw-black); letter-spacing: var(--tr-tight); background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .err-box h2 { margin: var(--sp-1) 0 var(--sp-3); font-size: var(--fs-xl); font-weight: var(--fw-semi); color: var(--ink); } .err-box p { margin: 0 0 var(--sp-5); font-size: var(--fs-base); color: var(--ink-3); line-height: var(--lh-base); } /* ========================================================================== 32 TOPBAR DROPDOWN PANELS The notification and account panels dropped from .icon-btn / .user-chip. Section 07 styles .dropdown-menu and .notif-item; these are the panel chrome around them. ========================================================================== */ .notif-menu { width: 340px; max-width: calc(100vw - 24px); padding: 0; overflow: hidden; } .notif-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 11px 14px; border-bottom: 1px solid var(--hairline); background: var(--bg-soft); font-size: var(--fs-md); font-weight: var(--fw-semi); color: var(--ink); } .notif-list { padding: 6px; } .notif-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: var(--sp-7) var(--sp-5); color: var(--muted); font-size: var(--fs-md); text-align: center; } .notif-empty i { font-size: 26px; color: var(--brand-400); } .notif-item { text-decoration: none; flex-direction: column; } .notif-item:hover { text-decoration: none; } .user-menu { width: 268px; max-width: calc(100vw - 24px); padding: 0 6px 6px; } .um-head { padding: var(--sp-3) 10px; margin-bottom: var(--sp-1); border-bottom: 1px solid var(--hairline); } .um-name { font-size: var(--fs-base); font-weight: var(--fw-semi); color: var(--ink); } .um-meta { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; word-break: break-all; } .btn-link-sm { border: 0; background: none; padding: 0; font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--brand-600); cursor: pointer; } .btn-link-sm:hover { text-decoration: underline; } /* ========================================================================== 33 THIRD STACKED HEADER BAND Section 22 pins thead rows 1 and 2. The cooling tower water grids carry a third (two merged group bands above the leaf labels), so it needs its own sticky offset or it would overlap the band above it. ========================================================================== */ .sheet-table thead tr.row-3 th { top: 68px; } .sheet-table thead tr.row-4 th { top: 102px; } /* ========================================================================== 34 PAGE-LEVEL PIECES Small structures a single screen needs, kept here rather than inlined so there is one stylesheet for the whole portal. ========================================================================== */ /* Review queue rows (review.php) */ .q-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-3); width: 100%; padding: 11px 13px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface); cursor: pointer; text-align: left; transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out); } .q-row + .q-row { margin-top: 8px; } .q-row:hover { border-color: var(--brand-400); box-shadow: var(--sh-1); } .q-row.is-active { border-color: var(--brand-500); background: var(--brand-50); box-shadow: inset 3px 0 0 var(--brand-500); } .q-row.is-flagged { border-left: 3px solid var(--danger); } .q-chk { flex: 0 0 auto; width: 17px; height: 17px; accent-color: var(--brand-600); cursor: pointer; } /* Station picker (stations.php) */ .stn-pick { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--bg-soft); max-height: 190px; overflow-y: auto; } /* Bootstrap gives .offcanvas a header and body but no footer */ .offcanvas-footer { display: flex; gap: var(--sp-2); justify-content: flex-end; padding: var(--sp-4); border-top: 1px solid var(--hairline); background: var(--bg-soft); } /* Named font-size helpers used alongside the Bootstrap numeric scale */ .fs-lg { font-size: var(--fs-lg) !important; } .fs-md { font-size: var(--fs-md) !important; } .fs-sm { font-size: var(--fs-sm) !important; }