/* ========================================================================= CFS CRM — visual system Aesthetic: industrial / utilitarian operations tool for a fire-safety firm. Warm paper ground, ink charcoal, a single signal-red accent, amber highlight. Type: Archivo (display) + IBM Plex Sans (body) + IBM Plex Mono (data). Mobile-first; tables/forms densify on wider screens. ========================================================================= */ /* Fonts load via + stylesheet in base.html (faster + less FOUT than @import). */ :root { /* palette */ --paper: #f4f1ec; /* warm off-white ground */ --surface: #ffffff; /* card surface */ --surface-2: #faf8f4; /* subtle alt surface */ --ink: #1c1a17; /* near-black text */ --ink-soft: #5a544c; /* secondary text */ --line: #ddd6cb; /* hairline borders */ --line-soft: #ebe6dd; --signal: #c8260f; /* fire signal red — primary action */ --signal-dk: #9e1d0a; --amber: #d9890b; /* warm highlight */ --ok: #2f6e3f; /* active / yes */ --ok-bg: #e6efe7; --muted-bg: #efe9df; /* inactive chip */ --danger: #b00020; --focus: #1c1a17; /* type scale */ --display: 'Archivo', system-ui, sans-serif; --body: 'IBM Plex Sans', system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace; --amber-ink: #9a5a08; /* amber dark enough for AA text (~4.8:1) */ --r: 10px; --r-sm: 7px; --shadow: 0 1px 2px rgba(28,26,23,.06), 0 8px 24px -16px rgba(28,26,23,.28); --shadow-lg: 0 1px 2px rgba(28,26,23,.06), 0 24px 48px -24px rgba(28,26,23,.34); --shadow-nav: 0 1px 0 var(--line), 0 6px 18px -14px rgba(28,26,23,.4); --ring: 0 0 0 3px rgba(200,38,15,.22); /* branded focus ring */ } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--body); font-size: 16px; line-height: 1.5; letter-spacing: -.005em; color: var(--ink); background: radial-gradient(120% 80% at 100% 0%, #fbf9f5 0%, var(--paper) 55%) fixed; background-color: var(--paper); -webkit-font-smoothing: antialiased; } /* ---- page shell -------------------------------------------------------- */ main, .shell { width: 100%; max-width: 1120px; margin: 0 auto; padding: 22px 18px 80px; } /* ---- typography -------------------------------------------------------- */ h1 { font-family: var(--display); font-weight: 800; font-size: clamp(1.45rem, 4vw, 2rem); letter-spacing: -.015em; line-height: 1.1; margin: .2em 0 .6rem; } h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.05rem, 2.6vw, 1.3rem); letter-spacing: -.01em; margin: 1.8rem 0 .7rem; padding-bottom: .3rem; border-bottom: 1px solid var(--line); } .h2--plain { border: 0; padding: 0; margin: 0; } p { margin: .4rem 0; color: var(--ink-soft); } a { color: var(--signal-dk); text-decoration: none; } a:hover { color: var(--signal); text-decoration: underline; text-underline-offset: 2px; } /* numeric / data emphasis */ .num, td .num { font-family: var(--mono); font-variant-numeric: tabular-nums; } /* ---- top navigation ---------------------------------------------------- */ .nav { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-nav); } .nav__inner { max-width: 1120px; margin: 0 auto; padding: 0 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 56px; } .nav__brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 800; letter-spacing: -.02em; color: var(--ink); font-size: 1.05rem; padding-right: 6px; } .nav__brand:hover { text-decoration: none; color: var(--ink); } .nav__mark { width: 26px; height: 26px; display: grid; place-items: center; background: var(--signal); color: #fff; border-radius: 7px; font-size: .82rem; font-weight: 800; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 2px 5px -1px rgba(200,38,15,.5); } .nav__links { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; flex: 1 1 auto; } .nav__links a { color: var(--ink-soft); font-weight: 500; font-size: .92rem; padding: 7px 11px; border-radius: var(--r-sm); line-height: 1.1; white-space: nowrap; } .nav__links a:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; } .nav__links a.is-active { color: var(--signal-dk); background: #fbeae6; box-shadow: inset 0 0 0 1px #f1cfc8; } .nav__user { display: flex; align-items: center; gap: 10px; margin-left: auto; } .nav__email { font-family: var(--mono); font-size: .76rem; color: var(--ink-soft); max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav__user form { margin: 0; } .nav__signout { font: inherit; font-size: .82rem; font-weight: 600; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 12px; cursor: pointer; min-height: 36px; } .nav__signout:hover { background: var(--surface-2); border-color: var(--ink-soft); } /* ---- cards & layout helpers ------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 18px 18px; margin: 0 0 16px; } .stack > * + * { margin-top: 14px; } .muted { color: var(--ink-soft); } /* meta line under headings (address · status · hours) */ .meta { font-family: var(--mono); font-size: .85rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; } .meta strong { color: var(--ink); font-weight: 600; } /* stat strip */ .stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 8px; } .stat { flex: 1 1 140px; position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: var(--r); padding: 14px 16px 15px; } .stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--line); } .stat:has(.is-ok)::before { background: var(--ok); } .stat:has(.is-amber)::before { background: var(--amber); } .stat:has(.is-signal)::before { background: var(--signal); } .stat__k { font-size: .66rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-soft); font-weight: 600; } .stat__v { font-family: var(--mono); font-weight: 700; font-size: 1.7rem; line-height: 1.05; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 6px; } .stat--text .stat__v { font-family: var(--body); font-weight: 600; font-size: 1rem; line-height: 1.3; word-break: break-word; } /* status chips */ .chip { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 600; letter-spacing: .02em; text-transform: capitalize; padding: 2px 9px; border-radius: 999px; background: var(--muted-bg); color: var(--ink-soft); white-space: nowrap; } .chip--active { background: var(--ok-bg); color: var(--ok); } .chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; } /* project-type chips — one accent per service line */ .chip--type { text-transform: none; } .chip--type[data-type="Engineering"] { background: #e8eef6; color: #2a5587; } .chip--type[data-type="Design"] { background: #fbeee0; color: #9a5a08; } .chip--type[data-type="BCA/Audit"] { background: #efeaf6; color: #59428a; } .chip--type[data-type="Expert/QA"] { background: #e6efe7; color: var(--ok); } .chip--type[data-type="Other"] { background: var(--muted-bg); color: var(--ink-soft); } /* page header row: title left, action right */ .page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 14px; } .page-head h1 { margin: 0; } .page-head .spacer { flex: 1 1 auto; } /* ---- buttons ----------------------------------------------------------- */ button, .btn { font: inherit; font-weight: 600; font-size: .92rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 11px 18px; border-radius: var(--r-sm); border: 1px solid var(--signal-dk); background: linear-gradient(180deg, #d62f15 0%, var(--signal) 58%, var(--signal-dk) 100%); color: #fff; cursor: pointer; text-decoration: none; box-shadow: 0 1px 2px rgba(158,29,10,.35), inset 0 1px 0 rgba(255,255,255,.18); transition: filter .12s ease, box-shadow .12s ease, transform .04s ease; } button:hover, .btn:hover { filter: brightness(1.04); text-decoration: none; color: #fff; box-shadow: 0 3px 8px -2px rgba(158,29,10,.45), inset 0 1px 0 rgba(255,255,255,.2); } button:active, .btn:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(158,29,10,.3); } button:focus-visible, .btn:focus-visible, .seg__btn:focus-visible, .nav__links a:focus-visible, .nav__signout:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--signal); } .btn--ghost, button.btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: none; } .btn--ghost:hover { background: var(--surface-2); border-color: var(--ink-soft); color: var(--ink); } .btn--quiet, button.btn--quiet { background: transparent; color: var(--ink); border-color: var(--line); box-shadow: none; } .btn--quiet:hover { background: var(--surface-2); color: var(--ink); } .btn--danger, button.btn--danger { background: var(--surface); color: var(--danger); border-color: #e7c4cb; box-shadow: none; } .btn--danger:hover { background: #fbeaed; border-color: var(--danger); color: var(--danger); } .btn--sm, button.btn--sm { min-height: 38px; padding: 8px 13px; font-size: .85rem; } /* ---- forms ------------------------------------------------------------- */ label { display: block; font-weight: 600; font-size: .82rem; color: var(--ink); margin-bottom: 12px; } label > input, label > select, label > textarea { margin-top: 5px; } input, select, textarea { font: inherit; font-size: 1rem; width: 100%; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 12px; min-height: 44px; } textarea { min-height: 84px; resize: vertical; line-height: 1.45; } input::placeholder, textarea::placeholder { color: #6f6a61; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), var(--ring); } select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px; } /* checkbox row */ label.check { display: flex; align-items: center; gap: 10px; font-weight: 500; } label.check input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; accent-color: var(--signal); flex: 0 0 auto; } /* a vertical form on a card */ .form-card { max-width: 560px; } .form-card button[type="submit"], .form-card .btn { width: 100%; margin-top: 4px; } /* filter / toolbar form */ .toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin: 0; } .toolbar input[type="search"] { flex: 2 1 200px; } .toolbar select { flex: 1 1 130px; min-width: 120px; } .toolbar button { flex: 0 0 auto; } /* ---- lists (projects) -------------------------------------------------- */ .list { list-style: none; margin: 0; padding: 0; } .list li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: 8px; transition: border-color .12s ease, transform .04s ease, box-shadow .12s ease; } .list li:hover { border-color: var(--ink-soft); box-shadow: var(--shadow); } .list li .li-main { flex: 1 1 auto; min-width: 0; } .list li .li-no { font-family: var(--mono); font-weight: 600; color: var(--signal-dk); font-size: .82rem; } .list li .li-name { display: block; font-weight: 600; color: var(--ink); margin-top: 1px; overflow-wrap: anywhere; } .list li a.li-link::after { content: ""; position: absolute; inset: 0; } .list li { position: relative; } .empty { text-align: center; color: var(--ink-soft); padding: 40px 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); } .empty__title { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--ink); margin-bottom: 4px; } .empty__hint { color: var(--ink-soft); font-size: .9rem; margin-bottom: 14px; } /* task list on project detail */ .tasks { list-style: none; margin: 0; padding: 0; } .tasks li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 13px 15px; margin-bottom: 9px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; } .tasks .t-cat { font-weight: 600; color: var(--ink); } .tasks .t-meta { font-family: var(--mono); font-size: .8rem; color: var(--ink-soft); } .tasks .t-actions { margin-left: auto; display: flex; gap: 8px; } .tasks .t-actions a { font-size: .82rem; font-weight: 600; padding: 6px 11px; border-radius: var(--r-sm); border: 1px solid var(--line); color: var(--ink); } .tasks .t-actions a:hover { background: var(--surface-2); text-decoration: none; border-color: var(--ink-soft); } .tasks .t-actions a.is-primary { color: #fff; background: var(--signal); border-color: var(--signal); } .tasks .t-actions a.is-primary:hover { filter: brightness(1.06); color: #fff; } /* ---- time entry editors (my_time / all_time) -------------------------- */ .entry { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; margin-bottom: 10px; } .entry form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; } .entry form + form { margin-top: 8px; } .entry input[type="date"] { flex: 1 1 150px; } .entry input[type="number"] { flex: 0 1 110px; } .entry input[name="note"] { flex: 3 1 180px; } .entry button { flex: 0 0 auto; min-height: 44px; } .entry .read-line { font-size: .95rem; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; } .entry .read-line .when { font-family: var(--mono); color: var(--ink-soft); font-size: .85rem; } .entry .read-line .who { font-weight: 600; } .entry .read-line .hrs { font-family: var(--mono); font-weight: 600; } /* ---- tables (review / rates / admin) ---------------------------------- */ .table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow-x: auto; -webkit-overflow-scrolling: touch; } table { width: 100%; border-collapse: collapse; font-size: .92rem; } thead th { text-align: left; font-family: var(--display); font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); background: var(--surface-2); padding: 11px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; } tbody td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; } tbody tr:last-child td { border-bottom: none; } tbody tr:hover td { background: var(--surface-2); } td.r, th.r { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); } /* inline edit forms inside table cells */ table form { display: flex; gap: 7px; align-items: center; margin: 0; flex-wrap: wrap; } table form input { min-height: 40px; } table form input[type="number"] { width: 100px; flex: 0 0 auto; } table form input[type="password"] { width: 160px; flex: 1 1 120px; } table form button { min-height: 40px; padding: 8px 13px; font-size: .85rem; } .yes { color: var(--ok); font-weight: 600; } .no { color: var(--ink-soft); } .note-line { margin-top: 12px; font-size: .85rem; } /* ---- login ------------------------------------------------------------- */ .login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px 18px; background: radial-gradient(120% 90% at 50% -10%, #fff 0%, var(--paper) 60%); } .login-card { position: relative; overflow: hidden; width: 100%; max-width: 392px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 36px 34px 30px; } .login-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--signal); } .login-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; } .login-brand .nav__mark { width: 40px; height: 40px; font-size: 1.05rem; border-radius: 10px; } .login-brand b { font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; } .login-card h1 { font-size: 1.55rem; margin: 0 0 4px; } .login-foot { text-align: center; font-size: .74rem; margin-top: 8px; color: var(--ink-soft); } .login-card .sub { margin: 0 0 18px; font-size: .9rem; } .login-card form > * { margin-bottom: 14px; } .login-card button { width: 100%; } .error { color: var(--danger); background: #fbeaed; border: 1px solid #e7c4cb; border-radius: var(--r-sm); padding: 9px 12px; font-size: .88rem; font-weight: 500; margin: 0 0 14px; } /* inline status banners (e.g. password changed) */ .banner { border-radius: var(--r-sm); padding: 9px 12px; font-size: .88rem; font-weight: 500; margin: 0 0 14px; } .banner--ok { color: var(--ok); background: var(--ok-bg); border: 1px solid #cfe1d2; } a.nav__email:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; } /* ---- responsive: densify on wider screens ----------------------------- */ @media (min-width: 720px) { main, .shell { padding: 30px 26px 90px; } .form-card .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; } .entry input[name="note"] { flex: 2 1 220px; } } @media (min-width: 980px) { body { font-size: 16px; } .stat { flex: 0 1 170px; } } /* reduce motion */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ========================================================================= TIMESHEET GRID + DASHBOARD ADDITIONS (extends the system above; no new colour variables — every value references an existing token) ========================================================================= */ /* --- period nav: segmented toggle + week stepper + copy --- */ .ts-nav { display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; margin-bottom:16px; } .seg { display:inline-flex; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; background:var(--surface); } .seg__btn { padding:9px 15px; font-size:.85rem; font-weight:600; color:var(--ink-soft); min-height:44px; display:inline-flex; align-items:center; border-right:1px solid var(--line); } .seg__btn:last-child { border-right:0; } .seg__btn:hover { background:var(--surface-2); text-decoration:none; color:var(--ink); } .seg__btn.is-on { background:#fbeae6; color:var(--signal-dk); box-shadow:inset 0 0 0 1px #f1cfc8; } .ts-stepper { display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; } .ts-range { font-weight:600; font-family:var(--mono); font-size:.9rem; min-width:11ch; text-align:center; } .ts-step { min-width:44px; justify-content:center; font-size:1.1rem; line-height:1; padding:8px 10px; } .ts-saved { font-family:var(--mono); font-size:.76rem; color:var(--ok); } .ts-saved.is-err { color:var(--danger); } .ts-copy { margin:0; } /* --- the grid --- */ .ts-wrap { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); overflow-x:auto; -webkit-overflow-scrolling:touch; } .tsgrid { width:100%; border-collapse:collapse; font-size:.92rem; } .tsgrid th, .tsgrid td { border-bottom:1px solid var(--line-soft); padding:8px 10px; } .tsgrid thead th { background:var(--surface-2); border-bottom:1px solid var(--line); font-family:var(--display); font-weight:700; font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); } .ts-rowhead { position:sticky; left:0; z-index:2; background:var(--surface); text-align:left; min-width:220px; max-width:300px; border-right:1px solid var(--line); box-shadow:6px 0 8px -8px rgba(28,26,23,.18); } .tsgrid thead .ts-rowhead, .tsgrid tfoot .ts-rowhead { background:var(--surface-2); } .tsgrid tbody tr:nth-child(even) td:not(.ts-rowhead) { background:rgba(250,248,244,.55); } .ts-rowhead .li-no { font-family:var(--mono); font-weight:600; color:var(--signal-dk); font-size:.8rem; } .ts-rowhead .li-name { display:block; font-weight:600; color:var(--ink); overflow-wrap:anywhere; } .ts-rowhead .ts-cat { display:block; font-family:var(--mono); font-size:.74rem; color:var(--ink-soft); margin-top:1px; } .ts-day { text-align:right; white-space:nowrap; } .ts-day .ts-dow { display:block; } .ts-day .ts-date { display:block; font-family:var(--mono); font-weight:400; font-size:.66rem; color:var(--ink-soft); } .ts-day.is-today, td.ts-cell.is-today { background:var(--surface); box-shadow:inset 0 2px 0 var(--amber); } .ts-day.is-weekend, td.ts-cell.is-weekend { background:var(--surface-2); } .ts-cell { text-align:right; padding:4px 6px !important; } .tscell { width:58px; min-height:38px; padding:7px 6px; text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; border:1px solid transparent; border-radius:var(--r-sm); background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--line-soft); } .tscell:hover { box-shadow:inset 0 0 0 1px var(--line); background:var(--surface); } .tscell:focus { box-shadow:inset 0 0 0 1px var(--ink), var(--ring); background:var(--surface); outline:none; } .tscell.is-error { box-shadow:inset 0 0 0 1px var(--signal), 0 0 0 3px rgba(200,38,15,.14); } .ts-multi { display:inline-flex; align-items:center; gap:4px; font-family:var(--mono); font-weight:600; color:var(--ink); padding:6px 8px; border:1px dashed var(--line); border-radius:var(--r-sm); } .ts-multi:hover { border-color:var(--ink-soft); background:var(--surface-2); text-decoration:none; } .ts-readcell { font-family:var(--mono); color:var(--ink-soft); } .ts-rowtotal { font-family:var(--mono); font-weight:600; text-align:right; background:var(--surface-2); } .ts-foot td, .ts-foot th { background:var(--surface-2); font-weight:600; border-top:2px solid var(--line); } .ts-foot td { text-align:right; font-family:var(--mono); } .ts-grand { font-family:var(--mono); font-weight:800; text-align:right; } .ts-grand.is-ok { color:var(--ok); } .ts-grand.is-under { color:var(--amber-ink); } .tscell.is-saved { animation:tssaved 1.1s ease; } @keyframes tssaved { 0%{ box-shadow:0 0 0 3px var(--ok-bg);} 100%{ box-shadow:0 0 0 3px transparent;} } .ts-addrow td { padding:12px 10px; } .ts-cell form { display:flex; gap:3px; align-items:center; justify-content:flex-end; margin:0; } .ts-rowsave { min-height:32px; padding:4px 7px; font-size:.8rem; border-color:var(--line); background:var(--surface); color:var(--ink-soft); } .has-htmx .ts-rowsave { display:none; } /* --- extra status chips (reuse .chip base) --- */ .chip--warn { background:#fbeee0; color:var(--amber-ink); } .chip--alert { background:#fbeae6; color:var(--signal-dk); } .chip--idle { background:var(--muted-bg); color:var(--ink-soft); } /* --- roster (All Time) --- */ .roster .ts-mini { font-family:var(--mono); font-size:.8rem; text-align:right; color:var(--ink); } .roster .ts-mini.is-empty { color:#9b9484; } .roster .is-alert td { background:#fdf3f0; } .roster td.name { font-weight:600; } .delta-pos { color:var(--ok); } .delta-neg { color:var(--amber-ink); } .roster .num { font-family:var(--mono); } /* corrected badge + audit */ .ts-corrected { font-size:.7rem; color:var(--amber-ink); font-weight:700; text-transform:uppercase; letter-spacing:.04em; } /* day-detail / multi editor card */ .daydetail { margin-top:12px; } .daydetail .entry { margin-bottom:8px; } /* --- dashboard --- */ .dash-grid { display:grid; gap:16px; grid-template-columns:1fr; margin-top:4px; } @media (min-width:760px) { .dash-grid { grid-template-columns:1fr 1fr; } } .chartcard { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:16px 18px; } .chartcard { transition:box-shadow .15s ease; } .chartcard:hover { box-shadow:var(--shadow-lg); } .chartcard h2 { margin:0 0 14px; border-bottom:1px solid var(--line-soft); padding-bottom:12px; font-family:var(--display); font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); } .chartcard .chart-box { position:relative; height:300px; } .chartcard canvas { max-height:300px; } .chartcard .chart-fallback { width:100%; font-size:.86rem; } .stat__sub { font-size:.7rem; margin-top:3px; color:var(--ink-soft); } .stat__v.is-ok { color:var(--ok); } .stat__v.is-amber { color:var(--amber-ink); } .stat__v.is-signal { color:var(--signal); } .preset-links { display:flex; gap:6px; flex-wrap:wrap; } .preset-links a { font-size:.82rem; padding:6px 11px; border:1px solid var(--line); border-radius:var(--r-sm); color:var(--ink); } .preset-links a:hover { background:var(--surface-2); text-decoration:none; border-color:var(--ink-soft); } .preset-links a.is-on { background:#fbeae6; color:var(--signal-dk); border-color:#f1cfc8; } /* --- mobile: switch grid -> day accordion (class-based, no :has) --- */ .ts-days { display:none; } @media (max-width:719px) { .ts-wrap { display:none; } .ts-days { display:block; } .ts-days details { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); margin-bottom:8px; } .ts-days summary { padding:13px 15px; display:flex; justify-content:space-between; align-items:center; font-weight:600; min-height:46px; cursor:pointer; list-style:none; } .ts-days summary::-webkit-details-marker { display:none; } .ts-days summary .ts-daytotal { font-family:var(--mono); } .ts-days .ts-dayrow { padding:11px 15px; border-top:1px solid var(--line-soft); display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .ts-days .ts-dayrow .ts-dl { flex:1 1 60%; min-width:0; } .ts-days .ts-dayrow .ts-dl small { display:block; color:var(--ink-soft); } .ts-days .ts-dayrow input[type="number"] { flex:0 0 84px; } .ts-days .ts-dayrow .ts-note { flex:1 1 100%; font-size:.84rem; } .seg { width:100%; } .seg__btn { flex:1 1 0; justify-content:center; } .dash-grid { grid-template-columns:1fr; } } /* --- v2 review polish: status strip, elevated editor, utilities --- */ .ts-status { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin-bottom:12px; } .ts-status .ts-target { font-size:.8rem; } .daydetail { box-shadow:var(--shadow-lg); } .flex-none { flex:0 0 auto; } .center { text-align:center; } .mt-3 { margin-top:16px; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ---- rate card: pricing-card grid ---- */ .ratecard-grid { display:grid; gap:18px; margin-top:10px; align-items:start; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); } .ratecard { position:relative; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px 22px 18px; box-shadow:var(--shadow); transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease; animation:rc-rise .42s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--i, 0) * 45ms); } .ratecard::before { /* accent rail on the left edge */ content:""; position:absolute; left:0; top:16px; bottom:16px; width:3px; border-radius:0 3px 3px 0; background:var(--signal); opacity:.85; } .ratecard:hover { box-shadow:var(--shadow-lg); transform:translateY(-2px); border-color:var(--line-soft); } @keyframes rc-rise { from { opacity:0; transform:translateY(8px); } } @media (prefers-reduced-motion:reduce) { .ratecard { animation:none; } } .ratecard__head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:10px; } .ratecard__name { font-family:var(--display); font-size:1.02rem; font-weight:700; letter-spacing:-.01em; margin:0; line-height:1.25; } .ratecard__rate { display:flex; align-items:baseline; gap:7px; margin:2px 0 0; } .ratecard__cur { font-family:var(--display); font-weight:800; font-size:2.3rem; letter-spacing:-.025em; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; } .ratecard__unit { font-family:var(--mono); font-size:.78rem; color:var(--ink-soft); } /* history disclosure */ .ratecard__hist { margin-top:12px; } .ratecard__hist > summary, .ratecard__edit > summary { list-style:none; cursor:pointer; width:max-content; } .ratecard__hist > summary::-webkit-details-marker, .ratecard__edit > summary::-webkit-details-marker { display:none; } .ratecard__hist > summary { font-size:.76rem; font-weight:600; letter-spacing:.02em; color:var(--ink-soft); text-transform:uppercase; } .ratecard__hist[open] > summary { color:var(--ink); } .ratecard__hist ul { list-style:none; margin:10px 0 0; padding:10px 0 0; border-top:1px solid var(--line-soft); font-size:.82rem; } .ratecard__hist li { display:flex; justify-content:space-between; gap:10px; padding:3px 0; color:var(--ink-soft); } .ratecard__hist .rc-amt { font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink); } /* footer actions */ .ratecard__foot { display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:16px; } .ratecard__edit { flex:0 0 auto; } .ratecard__edit > summary { display:inline-flex; align-items:center; gap:6px; min-height:38px; padding:8px 14px; border-radius:var(--r-sm); font-size:.85rem; font-weight:600; border:1px solid var(--line); background:var(--surface-2); color:var(--ink); transition:background .12s, border-color .12s; } .ratecard__edit > summary::before { content:"✎"; font-size:.85em; opacity:.7; } .ratecard__edit > summary:hover { background:#f2eee7; border-color:var(--ink-soft); } .ratecard__edit[open] > summary { background:#f2eee7; border-color:var(--ink-soft); } .ratecard__archive { margin-left:auto; } /* the inline editor + add form */ .ratecard__form { display:grid; gap:11px; margin-top:0; } .ratecard__edit[open] .ratecard__form { margin-top:13px; padding:15px; background:var(--surface-2); border:1px solid var(--line-soft); border-radius:11px; } .ratecard__form label { display:flex; flex-direction:column; gap:5px; font-size:.78rem; font-weight:600; color:var(--ink-soft); letter-spacing:.01em; } .ratecard__form input { font:inherit; } .ratecard__form button { width:100%; margin-top:2px; } .ratecard--add { border-style:dashed; box-shadow:none; background:var(--surface-2); animation:none; } .ratecard--add::before { display:none; } .ratecard--add:hover { transform:none; box-shadow:var(--shadow); } .ratecard__addnote { font-size:.82rem; margin:4px 0 14px; } .ratecard__form--add { margin-top:auto; } /* archived strip */ .rates-archived { margin-top:34px; max-width:680px; } .rates-archived h2 { margin-bottom:4px; } .archived-list { list-style:none; margin:14px 0 0; padding:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; } .archived-list li { display:flex; align-items:center; gap:14px; padding:12px 16px; background:var(--surface); } .archived-list li + li { border-top:1px solid var(--line-soft); } .archived-name { font-weight:600; color:var(--ink-soft); } .archived-rate { font-variant-numeric:tabular-nums; color:var(--ink-soft); font-size:.88rem; } .archived-list form { margin-left:auto; }