/* Tally — warm orange branding (HABI Controls design tokens) */ :root { color-scheme: light; --page: #f8f2e6; /* warm cream page */ --surface: #fffdf8; /* warm white cards */ --cream: #fbefd5; /* brand cream */ --ink: #33281f; /* brand dark brown */ --ink-2: #5f5244; --muted: #94897a; --grid: #ece3d2; --baseline: #d9cdb6; --border: rgba(51, 40, 31, 0.10); --brand: #f4a259; /* brand orange */ --brand-hover: #ef9440; --brand-deep: #b96712; /* readable orange for links/active text */ --series-1: #cf7419; /* chart mark orange (≥3:1 on surface) */ --good: #1b9e4b; --good-soft: #e4f4e6; --good-text: #14713a; --danger: #ec221f; /* brand red */ --radius: 14px; --shadow: 0 1px 2px rgba(51,40,31,.05), 0 6px 18px rgba(51,40,31,.06); --font-head: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; --font-body: "IBM Plex Sans", Calibri, "Segoe UI", system-ui, sans-serif; } /* Theme: data-theme on — "auto" (default, follows the system), "light", "dark" */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; /* Lifted dark theme — warm and airy rather than heavy: surfaces sit a few steps above black, cards clearly float on the page */ --page: #241e15; --surface: #31291d; --cream: #3f3423; --ink: #faf3e6; --ink-2: #dbcfb8; --muted: #a89a83; --grid: #473b27; --baseline: #60513a; --border: rgba(250, 243, 230, 0.13); --brand: #f4a259; --brand-hover: #f7b276; --brand-deep: #f6b06e; --series-1: #f4a259; --good: #3fbd68; --good-soft: #2b3d2c; --good-text: #74d696; --danger: #ff6157; --shadow: 0 1px 2px rgba(0, 0, 0, 0.20), 0 6px 20px rgba(0, 0, 0, 0.16); } :root:not([data-theme="light"]) body { /* a faint warm glow at the top so the page feels lit, not black */ background: radial-gradient(1100px 540px at 78% -12%, color-mix(in srgb, var(--brand) 10%, transparent), transparent), radial-gradient(800px 400px at 4% 112%, color-mix(in srgb, var(--brand) 5%, transparent), transparent), var(--page); background-attachment: fixed; } } :root[data-theme="dark"] { color-scheme: dark; /* Lifted dark theme — warm and airy rather than heavy: surfaces sit a few steps above black, cards clearly float on the page */ --page: #241e15; --surface: #31291d; --cream: #3f3423; --ink: #faf3e6; --ink-2: #dbcfb8; --muted: #a89a83; --grid: #473b27; --baseline: #60513a; --border: rgba(250, 243, 230, 0.13); --brand: #f4a259; --brand-hover: #f7b276; --brand-deep: #f6b06e; --series-1: #f4a259; --good: #3fbd68; --good-soft: #2b3d2c; --good-text: #74d696; --danger: #ff6157; --shadow: 0 1px 2px rgba(0, 0, 0, 0.20), 0 6px 20px rgba(0, 0, 0, 0.16); } :root[data-theme="dark"] body { background: radial-gradient(1100px 540px at 78% -12%, color-mix(in srgb, var(--brand) 10%, transparent), transparent), radial-gradient(800px 400px at 4% 112%, color-mix(in srgb, var(--brand) 5%, transparent), transparent), var(--page); background-attachment: fixed; } * { box-sizing: border-box; } /* ---------- brand scrollbars ---------- */ * { scrollbar-width: thin; scrollbar-color: var(--brand) transparent; } /* Firefox */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--brand); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--brand-hover); background-clip: padding-box; } ::-webkit-scrollbar-corner { background: transparent; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-body); background: var(--page); color: var(--ink); font-size: 15px; line-height: 1.5; } button { font: inherit; cursor: pointer; } input, select, textarea { font: inherit; color: var(--ink); } select { background: var(--surface); color: var(--ink); } option, optgroup { background: var(--surface); color: var(--ink); } h1, h2, .brand, .tile .value, .clock-elapsed, .ins-label { font-family: var(--font-head); } /* ---------- shell ---------- */ .shell { display: none; min-height: 100vh; } .shell.visible { display: flex; flex-direction: column; } .shell main { flex: 1; width: 100%; } .topbar { display: flex; align-items: center; gap: 22px; padding: 0 28px; height: 62px; background: var(--surface); border-bottom: 2px solid var(--brand); position: sticky; top: 0; z-index: 20; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; } .brand-dot { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--brand), #e08a3c); display: inline-flex; align-items: center; justify-content: center; flex: none; } .brand-dot svg { display: block; } nav.tabs { display: flex; gap: 2px; flex: 1; overflow-x: auto; scrollbar-width: none; } nav.tabs::-webkit-scrollbar { display: none; } nav.tabs button { background: none; border: 0; padding: 8px 12px; border-radius: 10px; color: var(--ink-2); font-weight: 500; font-family: var(--font-head); white-space: nowrap; flex: none; } nav.tabs button:hover { background: var(--cream); color: var(--ink); } nav.tabs button.active { background: var(--cream); color: var(--brand-deep); font-weight: 650; } .topbar .who { display: flex; align-items: center; gap: 12px; color: var(--ink-2); font-size: 13.5px; } .running-pill { display: none; align-items: center; gap: 8px; background: var(--good-soft); border: 1px solid color-mix(in srgb, var(--good) 35%, transparent); color: var(--good-text); font-weight: 600; font-size: 13px; padding: 5px 12px; border-radius: 999px; } .running-pill.on { display: inline-flex; } .running-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); animation: pulse 1.6s infinite; } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } } main { max-width: 1180px; margin: 0 auto; padding: 28px; } .view { display: none; } .view.visible { display: block; } h1 { font-size: 23px; margin: 0 0 4px; letter-spacing: -0.01em; } .sub { color: var(--muted); font-size: 13.5px; margin: 0 0 22px; } h2 { font-size: 15px; font-weight: 650; margin: 0 0 14px; } /* ---------- cards & grid ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow); } .grid { display: grid; gap: 16px; } .grid.tiles { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 16px; } .grid.two { grid-template-columns: 1fr 1fr; } .grid.dash { grid-template-columns: 1.4fr 1fr; align-items: stretch; } /* Right column FOLLOWS the left column's height instead of driving it (height:0 + min-height:100% = stretch without contributing to row height). Every card in this column keeps its own natural/capped height (see .list-scroll / .vscroll below); if they add up to more than the left column's height, THIS column scrolls as one unit instead of the page growing. This is the ONLY scroll container in the column on purpose — an earlier version also made the last card's table flex-fill the leftover space with its own independent scroll, which meant two nested scrollbars could both be active at once. When the cards above it were tall, the table's own min-height could exceed the space actually left for it, so it visually spilled out past its own card's background — exactly the "background is messed up / scrolling empty space" bug Morten reported. Don't reintroduce a second scroll container in here. */ .dash-side { height: 0; min-height: 100%; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; overflow-x: hidden; } .stack.dash-side > * + * { margin-top: 0; } /* gap replaces stack margins — and skips hidden cards */ @media (max-width: 900px) { .grid.two, .grid.dash { grid-template-columns: 1fr; } } .stack > * + * { margin-top: 16px; } /* ---------- stat tiles ---------- */ .tile { border-top: 3px solid var(--brand); } .tile .label { color: var(--ink-2); font-size: 13px; margin-bottom: 6px; } .tile .value { font-size: 30px; font-weight: 650; letter-spacing: -0.01em; } .tile .hint { color: var(--muted); font-size: 12.5px; margin-top: 4px; } /* ---------- clock card ---------- */ .clock-card { text-align: center; padding: 36px 26px; background: radial-gradient(600px 220px at 50% -60%, color-mix(in srgb, var(--brand) 22%, transparent), transparent), var(--surface); } .clock-elapsed { font-size: 48px; font-weight: 650; letter-spacing: -0.01em; margin: 8px 0 2px; } .clock-project { color: var(--ink-2); font-size: 14px; min-height: 20px; } .clock-controls { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; } .clock-controls select, .clock-controls input { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--grid); background: var(--surface); min-width: 190px; } .btn { border: 0; border-radius: 10px; padding: 10px 20px; font-weight: 650; background: var(--surface); color: var(--ink); border: 1px solid var(--grid); font-family: var(--font-head); } .btn:hover { border-color: var(--baseline); } .btn.primary { background: var(--brand); border-color: var(--brand); color: #33281f; } .btn.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); } .btn.start { background: var(--good); border-color: var(--good); color: #fff; font-size: 16px; padding: 12px 34px; } .btn.stop { background: var(--danger); border-color: var(--danger); color: #fff; font-size: 16px; padding: 12px 34px; } .btn.small { padding: 5px 10px; font-size: 12.5px; font-weight: 550; } .btn.ghost { background: none; border: 1px solid var(--grid); color: var(--ink-2); } .btn.ghost:hover { color: var(--ink); background: var(--cream); } .btn.danger-ghost { background: none; border: 1px solid var(--grid); color: var(--danger); } .btn:disabled { opacity: .45; cursor: not-allowed; } /* ---------- tables ---------- */ table { width: 100%; border-collapse: collapse; font-size: 13.5px; } th { text-align: left; color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding: 8px 10px; border-bottom: 1px solid var(--grid); font-family: var(--font-head); } td { padding: 9px 10px; border-bottom: 1px solid var(--grid); vertical-align: middle; } tr:last-child td { border-bottom: 0; } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } tr.total td { font-weight: 700; border-top: 2px solid var(--baseline); } .table-scroll { overflow-x: auto; } /* vertically capped tables: scroll inside the card, header stays visible */ .vscroll { max-height: 440px; overflow-y: auto; overscroll-behavior: contain; } .vscroll th { position: sticky; top: 0; z-index: 2; background: var(--surface); box-shadow: 0 1px 0 var(--grid); /* keeps the header line while scrolled */ border-bottom: 0; } .muted { color: var(--muted); } .small { font-size: 12.5px; } /* capped lists of rows (e.g. dashboard reminder cards) — scroll inside the card instead of growing the page, same philosophy as .vscroll for tables */ .list-scroll { max-height: 280px; overflow-y: auto; overscroll-behavior: contain; } /* ---------- badges / avatars ---------- */ .badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 650; letter-spacing: .02em; white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; } .badge.admin { background: var(--cream); color: var(--brand-deep); } /* .badge.manager was missing entirely — the Project Manager role badge in Team fell back to the bare .badge rules above (no background/color of its own), rendering as plain bold text with no pill. Given a color distinct from Admin's flat --cream fill, in the same brand family (a role above the default employee tiers, below Admin). */ .badge.manager { background: color-mix(in srgb, var(--brand) 24%, var(--surface)); color: var(--brand-deep); border: 1px solid color-mix(in srgb, var(--brand) 38%, transparent); } .badge.member { background: var(--page); color: var(--ink-2); border: 1px solid var(--grid); } .badge.studentworker { background: var(--page); color: var(--ink-2); border: 1px solid var(--grid); } .badge.freelance { background: var(--page); color: var(--ink-2); border: 1px solid var(--grid); } .badge.archived { background: var(--page); color: var(--muted); border: 1px solid var(--grid); } .badge.active-p { background: var(--good-soft); color: var(--good-text); } .badge.off { background: var(--page); color: var(--muted); border: 1px solid var(--grid); } .badge.act { background: var(--cream); color: var(--brand-deep); font-weight: 550; } .badge.late { background: var(--cream); color: var(--brand-deep); } .badge.pending { background: var(--brand); color: #33281f; } .badge.rejected { background: color-mix(in srgb, var(--danger) 14%, var(--surface)); color: var(--danger); } /* Distinct from .badge.rejected (same color family, but bordered/lighter) — an auto-stopped entry needs the owner to go fix it, it isn't a rejection. */ .badge.autostop { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); font-weight: 600; } .badge.personal { background: var(--page); color: var(--ink-2); border: 1px solid var(--grid); font-weight: 550; } .badge.half { background: var(--cream); color: var(--brand-deep); } .pending-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--grid); } .pending-row:last-child { border-bottom: 0; } .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--cream); color: var(--brand-deep); font-weight: 700; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-head); } .person { display: flex; align-items: center; gap: 10px; } /* ---------- charts ---------- */ .chart { width: 100%; } .chart svg { display: block; width: 100%; } .hbar-row { display: grid; grid-template-columns: 140px 1fr 62px; align-items: center; gap: 10px; padding: 5px 0; } .hbar-row .name { font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hbar-row.indent .name { padding-left: 18px; color: var(--muted); } .hbar-track { height: 14px; border-radius: 4px; position: relative; } .hbar-fill { height: 100%; border-radius: 0 4px 4px 0; background: var(--series-1); min-width: 2px; transition: width .35s ease; } .hbar-row.indent .hbar-fill { height: 9px; margin-top: 2.5px; opacity: .55; } .hbar-row .val { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; text-align: right; } .viz-tip { position: fixed; z-index: 50; pointer-events: none; display: none; background: var(--ink); color: var(--page); padding: 6px 10px; border-radius: 8px; font-size: 12.5px; } /* ---------- insights ---------- */ .ins-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; } .seg { display: inline-flex; background: var(--surface); border: 1px solid var(--grid); border-radius: 10px; padding: 3px; gap: 2px; } .seg button { border: 0; background: none; padding: 6px 14px; border-radius: 8px; color: var(--ink-2); font-weight: 550; font-family: var(--font-head); font-size: 13.5px; } .seg button.active { background: var(--brand); color: #33281f; font-weight: 650; } .ins-nav { display: inline-flex; align-items: center; gap: 6px; } #ins-custom { display: none; } #ins-custom.visible { display: inline-flex !important; } #ov-custom { display: none; } #ov-custom.visible { display: inline-flex !important; } .ins-date { padding: 7px 10px; border-radius: 9px; border: 1px solid var(--grid); background: var(--surface); color: var(--ink); font-family: var(--font-head); font-size: 13.5px; cursor: pointer; } .ins-date:focus { outline: 2px solid color-mix(in srgb, var(--brand) 55%, transparent); border-color: var(--brand); } .ins-date::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .75; } .ins-nav .btn { padding: 6px 12px; } .ins-label { font-weight: 650; font-size: 16px; min-width: 210px; text-align: center; } .proj-block { padding: 12px 0; border-bottom: 1px solid var(--grid); } .proj-block:last-child { border-bottom: 0; } /* ---------- vacation timeline ---------- */ .vac-grid { display: grid; grid-template-columns: 150px 1fr; row-gap: 12px; column-gap: 14px; align-items: center; } .vac-axis-track { position: relative; height: 32px; } .vac-tick { position: absolute; top: 0; font-size: 10.5px; color: var(--muted); transform: translateX(-50%); white-space: nowrap; } /* today's tick sits on its own row so it never collides with a month label */ .vac-tick.today { top: 16px; color: var(--brand-deep); font-weight: 650; } .vac-row-label { min-width: 0; } .vac-row-track { position: relative; height: 26px; background: var(--page); border-radius: 7px; border: 1px solid var(--grid); } .vac-bar { position: absolute; top: 3px; bottom: 3px; background: var(--brand); border-radius: 5px; min-width: 4px; cursor: default; } .vac-bar:hover { background: var(--brand-hover); } .vac-today-mark { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--brand-deep); opacity: .55; pointer-events: none; } @media (max-width: 700px) { .vac-grid { grid-template-columns: 96px 1fr; } } /* ---------- forms & modal ---------- */ .field { margin-bottom: 14px; } .field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; font-family: var(--font-head); } .field input, .field select, .field textarea { width: 100%; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--grid); background: var(--surface); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .field input:focus, .field select:focus, .field textarea:focus, .clock-controls select:focus, .clock-controls input:focus { outline: 2px solid color-mix(in srgb, var(--brand) 55%, transparent); border-color: var(--brand); } .modal-back { display: none; position: fixed; inset: 0; background: rgba(51,40,31,.45); z-index: 40; align-items: flex-start; justify-content: center; padding: 8vh 16px; } .modal-back.visible { display: flex; } .modal { background: var(--surface); border-radius: 16px; border: 1px solid var(--border); width: 100%; max-width: 470px; padding: 24px; box-shadow: 0 20px 60px rgba(0,0,0,.25); border-top: 4px solid var(--brand); } .modal h2 { margin-bottom: 18px; } .modal .actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; } .error-text { color: var(--danger); font-size: 13px; min-height: 18px; margin-top: 8px; } .chip-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .chip { display: inline-flex; align-items: center; gap: 6px; background: var(--cream); color: var(--brand-deep); border-radius: 999px; padding: 3px 6px 3px 11px; font-size: 12.5px; font-weight: 600; } .chip button { border: 0; background: none; color: var(--brand-deep); font-weight: 700; padding: 0 5px; border-radius: 50%; line-height: 1.4; } .chip button:hover { background: color-mix(in srgb, var(--brand) 35%, transparent); } .chip-add { display: flex; gap: 8px; } .chip-add input { flex: 1; } .chip-add input.rate { flex: 0 0 90px; } .act-row { display: grid; grid-template-columns: 1fr 110px 34px; gap: 8px; align-items: center; padding: 4px 0; } .act-row .aname { font-size: 13.5px; font-weight: 550; } .act-row input, .act-row select { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--grid); background: var(--surface); color: var(--ink); min-width: 0; } .act-row button { border: 0; background: none; color: var(--danger); font-weight: 700; border-radius: 8px; padding: 4px 8px; } .act-row button:hover { background: var(--cream); } .sp-kind { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-2); white-space: nowrap; cursor: pointer; user-select: none; } .sp-kind input { margin: 0; cursor: pointer; } .pos { color: var(--good-text); } .neg { color: var(--danger); } /* ---------- login ---------- */ .login-wrap { min-height: 100vh; display: none; align-items: center; justify-content: center; background: radial-gradient(900px 480px at 78% -8%, color-mix(in srgb, var(--brand) 30%, transparent), transparent), radial-gradient(700px 420px at 8% 108%, color-mix(in srgb, var(--brand) 18%, transparent), transparent), var(--page); padding: 20px; } .login-wrap.visible { display: flex; } .login-card { width: 100%; max-width: 380px; padding: 36px 32px; border-top: 4px solid var(--brand); } .login-card .brand { justify-content: center; margin-bottom: 6px; font-size: 21px; } .login-card .sub { text-align: center; } /* ---------- toolbar rows ---------- */ .toolbar { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .toolbar .field { margin: 0; } .toolbar .spacer { flex: 1; } .view-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } /* ---------- settings ---------- */ #btn-settings { color: var(--brand-deep); font-weight: 650; } #btn-settings:hover { color: var(--brand-deep); background: var(--cream); border-color: var(--baseline); } .settings-foot { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--grid); color: var(--muted); font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; text-align: center; } .settings-foot a { color: var(--brand-deep); text-decoration: none; } .settings-foot a:hover { text-decoration: underline; } .settings-foot .dotsep { opacity: .6; } .about-box { display: grid; grid-template-columns: 84px 1fr; row-gap: 7px; column-gap: 14px; font-size: 12.5px; line-height: 1.45; align-items: baseline; } .about-box .ab-l { color: var(--muted); font-weight: 600; font-family: var(--font-head); } .about-box .ab-v { color: var(--ink-2); } .about-box strong { color: var(--ink); } .about-box a { color: var(--brand-deep); text-decoration: none; } .about-box a:hover { text-decoration: underline; } /* ---------- app footer ---------- */ .app-foot { padding: 16px 28px 22px; margin-top: 8px; border-top: 1px solid var(--grid); color: var(--muted); font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; text-align: center; font-family: var(--font-head); } .app-foot a { color: var(--brand-deep); text-decoration: none; } .app-foot a:hover { text-decoration: underline; } .app-foot .dotsep { opacity: .6; } /* ---------- toast ---------- */ #toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--page); padding: 10px 18px; border-radius: 10px; font-size: 13.5px; z-index: 60; display: none; } /* ---------- print (investor / effort report) ---------- */ #print-report { display: none; } @media print { /* Previously this hid everything with visibility:hidden and pinned #print-report on top with position:absolute; inset:0. visibility:hidden keeps the hidden elements' layout height intact (only their pixels stop painting), so the app shell's normal height (easily 2-3 pages' worth, since .shell has min-height:100vh plus whatever view happened to be open behind the report) still drove pagination — producing extra blank pages after the one page the absolutely-positioned report was actually pinned to. display:none removes an element from the flow entirely (zero height), so with every other direct child of hidden this way, #print-report is the ONLY thing contributing height — it prints in normal document flow and paginates across exactly as many pages as its own content needs, whether that's half a page or ten. */ body > *:not(#print-report) { display: none !important; } #print-report { display: block; padding: 24px; background: #fff; color: #33281f; font-family: Calibri, "Segoe UI", sans-serif; } #print-report .pr-head { border-bottom: 3px solid #f4a259; padding-bottom: 14px; margin-bottom: 20px; } #print-report h1 { font-size: 24px; margin: 0; font-family: "IBM Plex Sans", "Segoe UI", sans-serif; } #print-report h3 { font-family: "IBM Plex Sans", "Segoe UI", sans-serif; page-break-after: avoid; } #print-report table { font-size: 12px; } #print-report th { color: #5f5244; } /* Keep a table row (and its header row) from splitting across a page break — a row sliced in half mid-print looks broken even though the browser is technically just following the flow. */ #print-report tr { page-break-inside: avoid; } }