/* ============================================================================ Payroll Control — Material You (Material Design 3) stylesheet Seed colour: #6750A4. Light + dark schemes, adaptive navigation: bottom nav (<600px) → rail (600–1239px) → expanded drawer (≥1240px). ========================================================================== */ :root { /* ---- M3 tonal palette (light scheme) ---- */ --primary: #6750A4; --on-primary: #FFFFFF; --primary-container: #EADDFF; --on-primary-container:#21005D; --secondary: #625B71; --secondary-container:#E8DEF8; --on-secondary-container:#1D192B; --tertiary: #7D5260; --tertiary-container: #FFD8E4; --on-tertiary-container:#31111D; --error: #B3261E; --error-container: #F9DEDC; --on-error-container: #410E0B; --success: #1E6B45; --success-container: #C8F0DA; --on-success-container:#03301B; --warning: #8A5100; --warning-container: #FFDDB3; --surface: #FEF7FF; --surface-dim: #DED8E1; --surface-container-lowest:#FFFFFF; --surface-container-low:#F7F2FA; --surface-container: #F3EDF7; --surface-container-high:#ECE6F0; --surface-container-highest:#E6E0E9; --on-surface: #1D1B20; --on-surface-variant: #49454F; --outline: #79747E; --outline-variant: #CAC4D0; --scrim: rgba(0,0,0,.32); /* ---- shape & motion ---- */ --r-xs: 8px; --r-s: 12px; --r-m: 16px; --r-l: 20px; --r-xl: 28px; --r-full: 999px; --ease: cubic-bezier(.2,0,0,1); --dur: .22s; --e1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15); --e2: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15); --e3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.30); --rail-w: 88px; --drawer-w: 248px; color-scheme: light; } /* Dark scheme. The active theme lives in the data-theme attribute on : · rendered by PHP from the "theme" cookie (no flash for returning visitors) · otherwise resolved from the OS preference by assets/theme.js in · changed instantly by the sun/moon button in the top bar Single source of truth — there is no prefers-color-scheme copy to keep in sync. */ :root[data-theme="dark"] { color-scheme: dark; --primary: #D0BCFF; --on-primary: #381E72; --primary-container: #4F378B; --on-primary-container:#EADDFF; --secondary: #CCC2DC; --secondary-container:#4A4458; --on-secondary-container:#E8DEF8; --tertiary: #EFB8C8; --tertiary-container: #633B48; --on-tertiary-container:#FFD8E4; --error: #F2B8B5; --error-container: #8C1D18; --on-error-container: #F9DEDC; --success: #8CD9AE; --success-container: #17513A; --on-success-container:#C8F0DA; --warning: #FFB86B; --warning-container: #5B3A00; --surface: #141218; --surface-dim: #141218; --surface-container-lowest:#0F0D13; --surface-container-low:#1D1B20; --surface-container: #211F26; --surface-container-high:#2B2930; --surface-container-highest:#36343B; --on-surface: #E6E0E9; --on-surface-variant: #CAC4D0; --outline: #938F99; --outline-variant: #49454F; --scrim: rgba(0,0,0,.55); } /* ------------------------------------------------------------------ base */ * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: Roboto, "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; font-size: 15px; line-height: 1.5; background: var(--surface); color: var(--on-surface); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } a { color: var(--primary); text-decoration: none; } h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -.01em; } svg { width: 24px; height: 24px; fill: currentColor; display: block; } /* ------------------------------------------------------------------ shell */ /* overflow-x: clip stops any single wide element (a table, a filter bar) from making the whole page horizontally scrollable — which on phones shows up as everything "zoomed out". Internal scrollers (.table-wrap, .week-strip) keep their own horizontal scroll. clip (not hidden) doesn't break sticky headers. */ .app { display: flex; min-height: 100dvh; overflow-x: clip; } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-x: clip; } /* Navigation rail / drawer (hidden on phones) */ .rail { display: none; width: var(--rail-w); flex-direction: column; gap: 4px; padding: 12px 8px 16px; background: var(--surface-container-low); position: sticky; top: 0; height: 100dvh; } .rail-brand { display: flex; align-items: center; gap: 10px; padding: 8px 8px 20px; } .brand-mark { width: 40px; height: 40px; border-radius: var(--r-s); background: var(--primary-container); color: var(--on-primary-container); display: grid; place-items: center; flex: none; } .brand-name { display: none; font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rail nav { display: flex; flex-direction: column; gap: 4px; flex: 1; } .rail-foot { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--outline-variant); padding-top: 8px; } .rail-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: var(--r-m); color: var(--on-surface-variant); font-size: 12px; font-weight: 500; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .rail-ico { width: 56px; height: 32px; border-radius: var(--r-full); display: grid; place-items: center; transition: background var(--dur) var(--ease); } .rail-item:hover .rail-ico { background: var(--surface-container-high); } .rail-item.is-active { color: var(--on-secondary-container); } .rail-item.is-active .rail-ico { background: var(--secondary-container); } .rail-label { text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .avatar-sm { background: var(--tertiary-container); color: var(--on-tertiary-container); font-weight: 600; font-size: 12px; width: 32px; height: 32px; } /* ---------------------------------------------------------------- top bar */ .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; /* Pad the top by the iPhone safe area so content clears the Dynamic Island / status bar when the app runs full-screen as an installed PWA. */ padding: 14px 20px; padding-top: calc(14px + env(safe-area-inset-top, 0px)); padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); min-height: 68px; background: var(--surface); border-bottom: 1px solid transparent; /* No backdrop-filter: on installed iOS PWAs a blurred sticky header renders wrong until the user scrolls (the "looks broken until you move" bug). */ } .topbar.scrolled, body.scrolled .topbar { background: var(--surface-container); border-bottom-color: var(--outline-variant); } .topbar-text { flex: 1; min-width: 0; } .topbar h1 { font-size: 22px; line-height: 1.25; } .topbar .sub { margin: 2px 0 0; font-size: 13px; color: var(--on-surface-variant); } .topbar-actions { display: flex; align-items: center; gap: 10px; } .avatar { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--primary-container); color: var(--on-primary-container); font-weight: 600; font-size: 14px; cursor: pointer; } /* ---- light / dark switch ---- */ .theme-toggle { width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; cursor: pointer; background: none; color: var(--on-surface-variant); display: grid; place-items: center; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .theme-toggle:hover { background: var(--surface-container-high); color: var(--on-surface); } .theme-toggle svg { width: 22px; height: 22px; } .theme-toggle .ico-sun { display: none; } :root[data-theme="dark"] .theme-toggle .ico-sun { display: block; } :root[data-theme="dark"] .theme-toggle .ico-moon { display: none; } .menu-theme { padding: 10px 12px 4px; border-top: 1px solid var(--outline-variant); margin-top: 6px; } .menu-theme > span { display: block; font-size: 12px; color: var(--on-surface-variant); margin-bottom: 8px; } .seg { display: flex; gap: 4px; padding: 3px; background: var(--surface-container); border-radius: var(--r-full); } .seg button { flex: 1; padding: 7px 4px !important; border: 0; border-radius: var(--r-full) !important; background: none; color: var(--on-surface-variant); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; text-align: center !important; } .seg button:hover { background: var(--surface-container-highest); } .seg button[aria-pressed="true"] { background: var(--secondary-container); color: var(--on-secondary-container); } /* Floating switch for the pages without an app bar (sign-in, installer). */ .theme-float { position: fixed; top: 16px; right: 16px; z-index: 50; background: var(--surface-container); box-shadow: var(--e1); } .menu { position: relative; } .menu-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 240px; padding: 8px; background: var(--surface-container-high); border-radius: var(--r-s); box-shadow: var(--e2); display: flex; flex-direction: column; } .menu-panel[hidden] { display: none; } .menu-head { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-bottom: 1px solid var(--outline-variant); margin-bottom: 6px; } .menu-head span { font-size: 12px; color: var(--on-surface-variant); } .menu-panel a, .menu-panel button { text-align: left; padding: 10px 12px; border: 0; border-radius: var(--r-xs); background: none; color: var(--on-surface); font: inherit; cursor: pointer; } .menu-panel a:hover, .menu-panel button:hover { background: var(--surface-container-highest); } .link-danger { color: var(--error) !important; width: 100%; } /* ---------------------------------------------------------------- content */ .content { flex: 1; padding: 20px; padding-bottom: calc(96px + env(safe-area-inset-bottom)); max-width: 1400px; width: 100%; margin: 0 auto; /* Without this, a wide descendant (a table's min-content) can stretch the whole column past the viewport, cutting off everything on phones. */ min-width: 0; } /* --------------------------------------------------------------- bottom nav */ .bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: space-around; padding: 10px 4px calc(10px + env(safe-area-inset-bottom)); background: var(--surface-container); border-top: 1px solid var(--outline-variant); } .bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; font-weight: 500; color: var(--on-surface-variant); padding: 2px; } .bn-ico { width: 60px; max-width: 100%; height: 30px; border-radius: var(--r-full); display: grid; place-items: center; transition: background var(--dur) var(--ease); } .bottom-nav a.is-active { color: var(--on-secondary-container); } .bottom-nav a.is-active .bn-ico { background: var(--secondary-container); } @media (min-width: 600px) { .bottom-nav { display: none; } .rail { display: flex; } .content { padding: 24px 28px 48px; } } @media (min-width: 1240px) { .rail { width: var(--drawer-w); align-items: stretch; padding: 16px 12px; } .brand-name { display: block; } .rail-item { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 4px; border-radius: var(--r-full); font-size: 14px; } .rail-item .rail-ico { width: 40px; height: 40px; } .rail-item.is-active { background: var(--secondary-container); } .rail-item.is-active .rail-ico { background: none; } .rail-label { text-align: left; } } /* ------------------------------------------------------------------ cards */ .card { background: var(--surface-container-low); border-radius: var(--r-l); padding: 20px; border: 1px solid var(--outline-variant); } .card + .card { margin-top: 16px; } .card-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .card-title h2 { font-size: 17px; } .card-sub { font-size: 13px; color: var(--on-surface-variant); margin: -8px 0 14px; } .grid { display: grid; gap: 16px; } .grid-stats { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .grid-2 { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr; } @media (min-width: 900px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: 2fr 1fr; } } /* stat tiles */ .stat { border-radius: var(--r-l); padding: 18px; display: flex; flex-direction: column; gap: 6px; border: 1px solid transparent; } .stat .label { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; opacity: .85; } .stat .value { font-size: 27px; font-weight: 500; letter-spacing: -.02em; line-height: 1.15; } .stat .hint { font-size: 12.5px; opacity: .8; } .stat-in { background: var(--success-container); color: var(--on-success-container); } .stat-out { background: var(--error-container); color: var(--on-error-container); } .stat-pay { background: var(--primary-container); color: var(--on-primary-container); } .stat-net { background: var(--secondary-container); color: var(--on-secondary-container); } .stat-plain { background: var(--surface-container); color: var(--on-surface); border-color: var(--outline-variant); } /* ---------------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 24px; border: 0; border-radius: var(--r-full); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; background: var(--primary); color: var(--on-primary); transition: box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease), background var(--dur) var(--ease); white-space: nowrap; } .btn:hover { box-shadow: var(--e1); filter: brightness(1.06); } .btn:active { filter: brightness(.96); } .btn svg { width: 18px; height: 18px; } .btn-tonal { background: var(--secondary-container); color: var(--on-secondary-container); } .btn-outline { background: none; color: var(--primary); box-shadow: inset 0 0 0 1px var(--outline); } .btn-text { background: none; color: var(--primary); padding: 0 12px; } .btn-danger { background: var(--error-container); color: var(--on-error-container); } .btn-sm { height: 34px; padding: 0 16px; font-size: 13px; } .btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; } .btn-block { width: 100%; } .fab { position: fixed; right: 20px; bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 25; height: 56px; padding: 0 20px; border-radius: var(--r-m); box-shadow: var(--e3); background: var(--primary-container); color: var(--on-primary-container); } @media (min-width: 600px) { .fab { bottom: 28px; } } /* ----------------------------------------------------------------- fields */ .field { position: relative; margin-bottom: 18px; } .field > label { display: block; font-size: 12.5px; font-weight: 500; color: var(--on-surface-variant); margin-bottom: 6px; } .field .hint { font-size: 12px; color: var(--on-surface-variant); margin-top: 5px; } input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=search], input[type=tel], select, textarea { width: 100%; padding: 12px 14px; font: inherit; font-size: 15px; color: var(--on-surface); background: var(--surface-container-lowest); border: 1px solid var(--outline); border-radius: var(--r-xs); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); min-height: 48px; } textarea { min-height: 90px; resize: vertical; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); } input::placeholder, textarea::placeholder { color: var(--outline); } select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; } .field-row { display: grid; gap: 0 16px; grid-template-columns: 1fr; } @media (min-width: 700px) { .field-row.cols-2 { grid-template-columns: 1fr 1fr; } .field-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; } .field-row.cols-4 { grid-template-columns: repeat(4, 1fr); } } .checkline { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 14px; } .checkline input { width: 20px; height: 20px; min-height: 0; accent-color: var(--primary); } /* Country code + number, joined into one control. */ .phone-group { display: flex; gap: 8px; } .phone-group select { flex: 0 0 auto; width: auto; max-width: 46%; } .phone-group input { flex: 1 1 auto; min-width: 0; } .prefix-money { position: relative; } .prefix-money input { padding-left: 30px; } .prefix-money::before { content: attr(data-sym); position: absolute; left: 13px; top: 13px; color: var(--on-surface-variant); font-size: 15px; } /* ------------------------------------------------------------------ chips */ .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: var(--r-xs); font-size: 13px; font-weight: 500; background: var(--surface-container); color: var(--on-surface-variant); border: 1px solid var(--outline-variant); white-space: nowrap; } .chip-tonal { background: var(--secondary-container); color: var(--on-secondary-container); border-color: transparent; } .chip.is-on { background: var(--secondary-container); color: var(--on-secondary-container); border-color: transparent; } .chip-draft { background: var(--surface-container-high); color: var(--on-surface-variant); } .chip-approved{ background: var(--primary-container); color: var(--on-primary-container); border-color: transparent; } .chip-paid { background: var(--warning-container); color: var(--warning); border-color: transparent; } .chip-acknowledged, .chip-ok { background: var(--success-container); color: var(--on-success-container); border-color: transparent; } .chip-void, .chip-danger { background: var(--error-container); color: var(--on-error-container); border-color: transparent; } .chip-sm { height: 24px; padding: 0 10px; font-size: 11.5px; } /* ----------------------------------------------------------------- tables */ .table-wrap { overflow-x: auto; margin: 0 -20px; padding: 0 20px; } table.data { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 620px; } table.data th { text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--on-surface-variant); padding: 10px 12px; border-bottom: 1px solid var(--outline-variant); white-space: nowrap; } table.data td { padding: 13px 12px; border-bottom: 1px solid var(--outline-variant); vertical-align: middle; } table.data tr:last-child td { border-bottom: 0; } table.data tbody tr { transition: background var(--dur) var(--ease); } table.data tbody tr:hover { background: var(--surface-container); } .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .pos { color: var(--success); font-weight: 500; } .neg { color: var(--error); font-weight: 500; } .muted { color: var(--on-surface-variant); } .small { font-size: 12.5px; } .strong { font-weight: 600; } .row-link { cursor: pointer; } /* mobile card list (replaces tables on phones where used) */ .list { display: flex; flex-direction: column; gap: 10px; } .list-item { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--surface-container-low); border: 1px solid var(--outline-variant); border-radius: var(--r-m); } .list-item .grow { flex: 1; min-width: 0; } .list-item .title { font-weight: 500; } .list-item .meta { font-size: 12.5px; color: var(--on-surface-variant); } .ava { width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--primary-container); color: var(--on-primary-container); font-weight: 600; font-size: 14px; } /* --------------------------------------------------------------- banners */ .banner { padding: 14px 16px; border-radius: var(--r-m); margin-bottom: 16px; font-size: 14px; display: flex; align-items: flex-start; gap: 10px; } .banner-success { background: var(--success-container); color: var(--on-success-container); } .banner-error { background: var(--error-container); color: var(--on-error-container); } .banner-warn { background: var(--warning-container); color: var(--warning); } .banner-info { background: var(--secondary-container); color: var(--on-secondary-container); } .empty { text-align: center; padding: 48px 20px; color: var(--on-surface-variant); } .empty svg { width: 48px; height: 48px; margin: 0 auto 12px; opacity: .5; } /* ------------------------------------------------------------------ bars */ .bars { display: flex; align-items: flex-end; gap: 10px; height: 160px; padding-top: 8px; } .bars .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; } .bars .stack { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 4px; } .bars .bar { width: 42%; max-width: 22px; border-radius: var(--r-xs) var(--r-xs) 0 0; min-height: 3px; transition: height var(--dur) var(--ease); } .bar-in { background: var(--success); } .bar-out { background: var(--primary); } .bars .cap { font-size: 11.5px; color: var(--on-surface-variant); } .legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--on-surface-variant); margin-top: 12px; } .legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 6px; } /* ------------------------------------------------------------------ login */ .auth { min-height: 100dvh; display: grid; place-items: center; padding: calc(24px + env(safe-area-inset-top, 0px)) 24px calc(24px + env(safe-area-inset-bottom, 0px)); background: radial-gradient(120% 120% at 15% 0%, var(--primary-container) 0%, var(--surface) 55%); } .auth-card { width: 100%; max-width: 420px; background: var(--surface-container-lowest); border-radius: var(--r-xl); padding: 32px 28px; box-shadow: var(--e2); } .auth-logo { width: 56px; height: 56px; border-radius: var(--r-m); margin: 0 auto 18px; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; } .auth h1 { font-size: 24px; text-align: center; margin-bottom: 6px; } .auth .lead { text-align: center; color: var(--on-surface-variant); font-size: 14px; margin: 0 0 26px; } .auth-foot { text-align: center; font-size: 12px; color: var(--on-surface-variant); margin-top: 22px; display: flex; align-items: center; justify-content: center; gap: 6px; } .auth-foot svg { width: 14px; height: 14px; } /* ------------------------------------------------------------ line editor */ .items-editor { display: flex; flex-direction: column; gap: 12px; } .item-row { display: grid; gap: 10px; padding: 14px; align-items: end; grid-template-columns: 1fr; background: var(--surface-container); border-radius: var(--r-m); } @media (min-width: 860px) { .item-row { grid-template-columns: 150px 1.6fr 1fr 78px 130px 130px 44px; align-items: end; } } .item-row .field { margin-bottom: 0; } .icon-btn { width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer; background: var(--surface-container-highest); color: var(--on-surface-variant); display: grid; place-items: center; } .icon-btn:hover { background: var(--error-container); color: var(--on-error-container); } .totals-preview { display: flex; flex-wrap: wrap; gap: 20px; padding: 16px; background: var(--surface-container-high); border-radius: var(--r-m); margin-top: 16px; } .totals-preview div { display: flex; flex-direction: column; } .totals-preview span:first-child { font-size: 12px; color: var(--on-surface-variant); } .totals-preview span:last-child { font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; } /* ------------------------------------------------------- weekly payroll */ .week-nav { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .week-nav-title { display: flex; flex-direction: column; line-height: 1.25; } .week-nav-title strong { font-size: 17px; font-weight: 500; } .week-nav-title span { font-size: 13px; color: var(--on-surface-variant); } .week-nav .icon-btn { background: var(--surface-container-high); color: var(--on-surface); } .week-nav .icon-btn:hover { background: var(--secondary-container); color: var(--on-secondary-container); } .week-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 18px; } .week-chip { flex: 0 0 auto; min-width: 92px; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: var(--r-m); text-align: center; background: var(--surface-container); border: 1px solid var(--outline-variant); color: var(--on-surface); } .week-chip .wk { font-size: 13px; font-weight: 600; } .week-chip .amt { font-size: 12.5px; font-variant-numeric: tabular-nums; } .week-chip .ppl { font-size: 11px; color: var(--on-surface-variant); } .week-chip .dot { width: 8px; height: 8px; border-radius: 50%; margin: 1px auto; background: var(--outline); } .week-chip.state-done .dot { background: var(--success); } .week-chip.state-partial .dot { background: var(--warning); } .week-chip.state-none .dot { background: var(--outline-variant); } .week-chip.is-on { background: var(--secondary-container); color: var(--on-secondary-container); border-color: transparent; } .week-row { display: grid; gap: 12px; padding: 16px; margin-bottom: 12px; background: var(--surface-container-low); border: 1px solid var(--outline-variant); border-radius: var(--r-l); grid-template-columns: 1fr; align-items: end; transition: opacity var(--dur) var(--ease); } .week-row.is-off { opacity: .45; } .week-row .field { margin-bottom: 0; } .week-person { display: flex; align-items: center; gap: 12px; grid-column: 1 / -1; } .week-person .title { font-weight: 500; } .week-person .meta { font-size: 12.5px; color: var(--on-surface-variant); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .week-include { display: flex; align-items: center; gap: 10px; cursor: pointer; } .week-include input { width: 20px; height: 20px; min-height: 0; accent-color: var(--primary); } .week-total { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 8px 12px; border-radius: var(--r-s); background: var(--surface-container-high); } .week-total .label { font-size: 11.5px; color: var(--on-surface-variant); text-transform: uppercase; letter-spacing: .04em; } .week-total .value { font-size: 19px; font-weight: 500; font-variant-numeric: tabular-nums; } .week-note { grid-column: 1 / -1; } @media (min-width: 760px) { .week-row { grid-template-columns: minmax(180px, 1.4fr) 110px 1fr 1fr 140px; } .week-person { grid-column: 1; grid-row: 1; } .week-total { grid-column: 5; grid-row: 1; } .week-note { grid-column: 1 / -1; } } @media (min-width: 1100px) { .week-row { grid-template-columns: minmax(200px, 1.3fr) 108px 120px 1fr 120px 1fr 150px; } .week-total { grid-column: 7; } } .week-summary { position: sticky; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 15; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 16px 18px; margin-top: 18px; border-radius: var(--r-l); background: var(--surface-container-high); box-shadow: var(--e2); } .week-summary > div { display: flex; flex-direction: column; } .week-summary span:first-child { font-size: 12px; color: var(--on-surface-variant); } .week-summary .strong { font-size: 21px; font-weight: 500; font-variant-numeric: tabular-nums; } @media (min-width: 600px) { .week-summary { bottom: 16px; } } .only-sm { display: block; } @media (min-width: 600px) { .only-sm { display: none; } } /* --------------------------------------------------------- signature pad */ .sigpad-wrap { border: 2px dashed var(--outline); border-radius: var(--r-m); background: var(--surface-container-lowest); overflow: hidden; } canvas.sigpad { display: block; width: 100%; height: 200px; touch-action: none; cursor: crosshair; background: #fff; } .sig-preview { max-width: 280px; width: 100%; border: 1px solid var(--outline-variant); border-radius: var(--r-s); background: #fff; padding: 8px; } /* --------------------------------------------------------------- helpers */ .toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; } .toolbar form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .toolbar .field { margin-bottom: 0; } .toolbar input, .toolbar select { min-height: 44px; padding: 10px 12px; } .spacer { flex: 1; } .stack-8 > * + * { margin-top: 8px; } .stack-16 > * + * { margin-top: 16px; } .divider { height: 1px; background: var(--outline-variant); margin: 20px 0; border: 0; } .hide-sm { display: none; } @media (min-width: 700px) { .hide-sm { display: table-cell; } } .nowrap { white-space: nowrap; } .kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; font-size: 14px; } .kv dt { color: var(--on-surface-variant); } .kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; } .code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; word-break: break-all; background: var(--surface-container-high); padding: 10px 12px; border-radius: var(--r-xs); } /* ========================================================================== Phone density pass (< 600px). The layout already fits — this tightens desktop-sized type and padding so a phone screen shows information instead of whitespace. ========================================================================== */ @media (max-width: 599px) { body { font-size: 14.5px; } .content { padding: 14px; padding-bottom: calc(92px + env(safe-area-inset-bottom)); } /* App bar: the primary action already lives in the FAB, so drop the duplicate button and the subtitle, and keep the title on one line. */ .topbar { padding: 10px 14px; min-height: 58px; gap: 8px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); } .topbar h1 { font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar .sub { display: none; } .topbar-actions > .btn { display: none; } .card { padding: 16px; border-radius: var(--r-m); } .card + .card { margin-top: 12px; } .card-title h2 { font-size: 16px; } .grid { gap: 12px; } /* Two stat tiles per row reads better than one tall column. */ .grid-stats { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); } .stat { padding: 14px; border-radius: var(--r-m); } .stat .value { font-size: 22px; } .stat .label { font-size: 11px; } .stat .hint { font-size: 11.5px; } /* Tables: no forced 620px, tighter cells, low-value columns hidden. No negative margins on mobile — they are a classic cause of the page overflowing sideways. */ .table-wrap { margin: 0; padding: 0; max-width: 100%; } table.data { min-width: 0; font-size: 13px; } table.data th { padding: 8px 8px; font-size: 10.5px; } table.data td { padding: 10px 8px; } .hide-xs { display: none !important; } .list-item { padding: 12px; gap: 10px; } .ava { width: 36px; height: 36px; font-size: 13px; } .field { margin-bottom: 14px; } /* Toolbar filters: a 2-column grid so date pickers never overflow; the search box and any dropdown span the full width. Guarantees everything fits. */ .toolbar { gap: 8px; align-items: stretch; } .toolbar form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; } .toolbar form > *, .toolbar .field { min-width: 0; margin: 0; } .toolbar form input, .toolbar form select { width: 100%; } .toolbar form > button { grid-column: 1 / -1; } .toolbar form .field:has(input[type=search]), .toolbar form .field:has(select) { grid-column: 1 / -1; } .week-row { padding: 14px; border-radius: var(--r-m); } /* Weekly summary bar: labels on one row, the action button full-width below. */ .week-summary { padding: 14px; gap: 10px 16px; border-radius: var(--r-m); flex-wrap: wrap; } .week-summary .spacer { display: none; } .week-summary .btn { flex: 1 1 100%; order: 5; } .week-summary .strong { font-size: 18px; } .week-nav-title strong { font-size: 16px; } .banner { padding: 12px 14px; font-size: 13.5px; } .fab { height: 52px; padding: 0 18px; font-size: 13.5px; } .empty { padding: 32px 16px; } } /* Grid and flex children must be allowed to shrink below their content width, otherwise one long select or table pushes the whole page sideways. */ .grid > *, .field-row > *, .card, .main, .list-item .grow { min-width: 0; } .card, .table-wrap, .toolbar, .list-item { max-width: 100%; } select, input, textarea { max-width: 100%; } /* ------------------------------------------------------- onboarding + tutorial */ .agreement { background: var(--surface-container); border: 1px solid var(--outline-variant); border-radius: var(--r-m); padding: 16px 18px; font-size: 14px; text-align: left; max-height: 220px; overflow-y: auto; } .agreement p { margin: 0 0 8px; } .agreement ul { margin: 8px 0; padding-left: 20px; } .agreement li { margin-bottom: 6px; } .tut-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: var(--scrim); backdrop-filter: blur(2px); } .tut-card { width: 100%; max-width: 400px; background: var(--surface-container-high); border-radius: var(--r-xl); box-shadow: var(--e3); overflow: hidden; } .tut-slides { position: relative; } .tut-slide { display: none; padding: 32px 26px 8px; text-align: center; } .tut-slide.is-on { display: block; animation: tutfade .25s var(--ease); } @keyframes tutfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .tut-emoji { font-size: 46px; line-height: 1; margin-bottom: 14px; } .tut-slide h2 { font-size: 20px; margin-bottom: 10px; } .tut-slide p { color: var(--on-surface-variant); font-size: 14.5px; line-height: 1.55; } .tut-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 20px; } .tut-dots { display: flex; gap: 7px; } .tut-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--outline-variant); transition: background var(--dur) var(--ease); } .tut-dots i.is-on { background: var(--primary); } .tut-btns { display: flex; align-items: center; gap: 6px; } .tut-btns form[hidden] { display: none; } /* --------------------------------------------------------- install / modal */ .install-item { text-align: left; padding: 10px 12px !important; border: 0; border-radius: var(--r-xs) !important; background: none; color: var(--on-surface); font: inherit; cursor: pointer; width: 100%; } .install-item:hover { background: var(--surface-container-highest); } /* Hide the install option once the app is already running standalone. */ body.is-installed .install-item { display: none; } .modal-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: var(--scrim); backdrop-filter: blur(2px); } .modal-overlay[hidden] { display: none; } .modal-card { width: 100%; max-width: 400px; background: var(--surface-container-high); border-radius: var(--r-xl); box-shadow: var(--e3); padding: 26px 24px; text-align: center; } .modal-emoji { font-size: 44px; line-height: 1; margin-bottom: 12px; } .modal-card h2 { font-size: 20px; margin-bottom: 6px; } .modal-sub { color: var(--on-surface-variant); font-size: 13px; margin: 6px 0 4px; text-align: left; } .install-steps ol { text-align: left; margin: 6px 0 18px; padding-left: 22px; } .install-steps li { margin-bottom: 10px; font-size: 14.5px; line-height: 1.5; } .ios-share { display: inline-block; } @media print { .rail, .bottom-nav, .topbar-actions, .fab, .toolbar { display: none !important; } body { background: #fff; } .card { border: 1px solid #ccc; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }