/* ── Components: the shared fixtures ──────────────────────────────────── One definition of each: a screen builds from these rather than its own classes (AGENTS.md, "Reuse the house fixtures"), and when one falls short it is extended here, not forked in a template. Colors come from tokens.css only, so every component is right in dark mode without a patch. Loaded after base.css (templates/core/_stylesheets.html). */ /* ── Buttons ───────────────────────────────────────────────────────────── A bare .btn is the everyday button: surface, hairline, text color. The variants change its paint, never its size or shape, so a row of mixed buttons lines up. Two sizes besides the default. A text-only action is .btn--quiet, an icon or a close button is .btn--icon. */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:6px; padding:8px 13px;font:inherit;font-size:12.5px;font-weight:600;letter-spacing:-.1px;line-height:1.2; color:var(--text);background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-sm); text-decoration:none;cursor:pointer;white-space:nowrap;box-shadow:none; transition:background .15s, border-color .15s, color .15s, transform .08s; } .btn:hover:not(:disabled){background:var(--card-2);color:var(--text);text-decoration:none;} .btn:active{transform:scale(.985);} .btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;} .btn--secondary{background:var(--card-2);color:var(--text);border-color:var(--border-strong);} .btn--primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent);} .btn--primary:hover:not(:disabled){background:var(--accent-d);border-color:var(--accent-d);color:var(--on-accent);} .btn--success{background:var(--green);color:var(--on-accent);border-color:var(--green-d);} .btn--success:hover:not(:disabled){background:var(--green-d);color:var(--on-accent);} .btn--danger{background:var(--red);color:var(--on-accent);border-color:var(--red-d);} .btn--danger:hover:not(:disabled){background:var(--red-d);color:var(--on-accent);} .btn--danger-ghost{background:var(--surface);color:var(--red-d);border-color:var(--red-line);} .btn--danger-ghost:hover:not(:disabled){background:var(--red-weak);color:var(--red-d);} .btn--success-ghost{background:var(--surface);color:var(--green-d);border-color:var(--green-line);} .btn--success-ghost:hover:not(:disabled){background:var(--green-weak);color:var(--green-d);} .btn--warning{background:var(--amber-weak);color:var(--amber-d);border-color:var(--amber-line);} .btn--warning:hover:not(:disabled){background:var(--amber-weak);color:var(--amber-d);border-color:var(--amber-d);} .btn--quiet{background:none;border-color:transparent;color:var(--soft);padding-inline:8px;} .btn--quiet:hover:not(:disabled){background:var(--card-2);color:var(--text);} .btn--icon{padding:0;width:30px;height:30px;background:none;border-color:transparent;color:var(--soft);font-size:15px;} .btn--icon:hover:not(:disabled){background:var(--card-2);color:var(--text);} .btn--sm{padding:4px 9px;font-size:12px;} .btn--sm.btn--icon{width:24px;height:24px;padding:0;} .btn--lg{padding:11px 18px;font-size:14px;} /* Loading: set by base.html's [data-loading-text] handler on submit. */ @keyframes btn-spin{to{transform:rotate(360deg);}} .btn.loading{cursor:not-allowed;} .btn.loading::after{content:'';display:inline-block;width:11px;height:11px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:btn-spin .55s linear infinite;margin-left:8px;vertical-align:middle;} /* Shown next to a submit button while a blocking OCR/vision/LLM call or a background job is in flight (base.html's [data-loading-text] handler). */ .form-processing-note{display:flex;align-items:flex-start;gap:6px;margin-top:8px;padding:8px 10px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:12.5px;line-height:1.4;color:var(--muted);max-width:520px;} .form-processing-note::before{content:'ℹ️';flex:0 0 auto;} /* ── Badges and pills ──────────────────────────────────────────────────── A badge states something about a row (a status, a kind); a pill is a filter chip you click. Both come in the same tones, from the tone tokens. Which tone a status gets is decided once, in apps.core.badges, and rendered with {% badge %}, not re-mapped in each template. */ .badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:7px;font-size:10.5px;font-weight:600;letter-spacing:.2px;line-height:1.3;white-space:nowrap;border:1px solid var(--border);background:var(--card);color:var(--soft);} .badge--green{background:var(--green-weak);color:var(--green-d);border-color:var(--green-line);} .badge--amber,.badge--yellow{background:var(--amber-weak);color:var(--amber-d);border-color:var(--amber-line);} .badge--red{background:var(--red-weak);color:var(--red-d);border-color:var(--red-line);} .badge--blue{background:var(--blue-weak);color:var(--blue-d);border-color:var(--blue-line);} .badge--purple{background:var(--purple-weak);color:var(--purple-d);border-color:var(--purple-line);} .badge--orange{background:var(--orange-weak);color:var(--orange-d);border-color:var(--orange-line);} .badge--gray{background:var(--gray-weak);color:var(--soft);border-color:var(--gray-line);} .pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:7px;font-size:10.5px;font-weight:600;letter-spacing:.2px;line-height:1.3;border:1px solid var(--border);background:var(--card);color:var(--soft);text-decoration:none;} a.pill:hover,button.pill:hover{border-color:var(--border-strong);color:var(--text);} button.pill{font:inherit;font-size:10.5px;font-weight:600;cursor:pointer;} .pill.green{background:var(--green-weak);color:var(--green-d);border-color:var(--green-line);} .pill.orange{background:var(--orange-weak);color:var(--orange-d);border-color:var(--orange-line);} .pill.purple{background:var(--purple-weak);color:var(--purple-d);border-color:var(--purple-line);} .pill.red{background:var(--red-weak);color:var(--red-d);border-color:var(--red-line);} .pill.amber{background:var(--amber-weak);color:var(--amber-d);border-color:var(--amber-line);} .pill.blue{background:var(--blue-weak);color:var(--blue-d);border-color:var(--blue-line);} .pill.muted{background:var(--card);color:var(--muted);border-color:var(--border);} /* The selected chip in a filter row. Several pages rendered `pill active` with nothing defining it, so the chosen filter looked like the rest. The hover rule above is more specific than these, so without the :hover copies a selected chip took the hover's text color, which is its own background, and its label vanished under the mouse. */ .pill.active,.pill.is-active,.pill[aria-current="true"],.pill[aria-current="page"],.pill[aria-pressed="true"], .pill.active:hover,.pill.is-active:hover,.pill[aria-current="true"]:hover,.pill[aria-current="page"]:hover,.pill[aria-pressed="true"]:hover{ background:var(--text);color:var(--bg);border-color:var(--text);} /* ── Cards ─────────────────────────────────────────────────────────────── The surface every section sits on. Modifiers change padding and paint; a screen's own card class adds layout only, never its own border or background. */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:14px;box-shadow:none;} .card h3{font-size:15px;font-weight:600;margin-bottom:12px;color:var(--text);letter-spacing:-.2px;} .card h4{font-size:11px;font-weight:600;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px;} .card--flush{padding:0;} .card--flush > .table{border:0;} .card--compact{padding:12px 14px;} .card--tinted{background:var(--card);} .card--interactive{cursor:pointer;transition:border-color .15s;} .card--interactive:hover{border-color:var(--border-strong);} .card--narrow{max-width:400px;margin:40px auto;} /* A card that folds:
whose is the heading (an optional .card__count sits at its right) and whose body is a .card__body. Replaces the per-screen fold sections. */ .card--fold{padding:0;} .card--fold > summary{display:flex;align-items:center;gap:8px;padding:14px 18px;list-style:none;cursor:pointer;font-size:14px;font-weight:600;color:var(--text);} .card--fold > summary::-webkit-details-marker{display:none;} .card--fold > summary::before{content:"";flex-shrink:0;border:4px solid transparent;border-left:5px solid var(--muted);border-right:0;transition:transform .15s;} .card--fold[open] > summary::before{transform:rotate(90deg);} .card--fold[open] > summary{border-bottom:1px solid var(--border);} .card--fold > summary > :is(h2,h3,h4){margin:0;font-size:inherit;} .card__count{margin-left:auto;font-size:12px;font-weight:600;color:var(--muted);} .card__body{padding:16px 18px;} /* ── Stat tiles ────────────────────────────────────────────────────────── A strip of counts across the top of a screen. A tile that filters the list below is a link, and the chosen one is .is-active. */ .stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:16px;} .stat-tile{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;color:var(--text);text-decoration:none;} a.stat-tile:hover{border-color:var(--border-strong);color:var(--text);} .stat-tile.is-active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);} .stat-tile__num{display:block;font-size:22px;font-weight:700;line-height:1.1;letter-spacing:-.3px;font-variant-numeric:tabular-nums;} .stat-tile__label{display:block;margin-top:4px;font-size:11.5px;font-weight:600;color:var(--muted);} .stat-tile--green .stat-tile__num{color:var(--green-d);} .stat-tile--amber .stat-tile__num{color:var(--amber-d);} .stat-tile--red .stat-tile__num{color:var(--red-d);} .stat-tile--blue .stat-tile__num{color:var(--blue-d);} .stat-tile--orange .stat-tile__num{color:var(--orange-d);} .stat-tile--purple .stat-tile__num{color:var(--purple-d);} /* Dense: a strip inside a card or beside other content, smaller tiles. */ .stat-strip--dense{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-bottom:12px;} .stat-strip--dense .stat-tile{padding:8px 10px;border-radius:var(--radius-sm);} .stat-strip--dense .stat-tile__num{font-size:17px;} .stat-strip--dense .stat-tile__label{margin-top:2px;font-size:11px;} /* ── Page head ─────────────────────────────────────────────────────────── The title row of a screen: its

(emoji allowed here, AGENTS.md), an optional line under it, and its actions on the right. */ /* A single column (a form, a wizard) centered on the whole window rather than the space beside the sidebar; --window-center-w sets its width. Where the window is too narrow to center it there, it starts at the content's left edge instead of sliding under the sidebar. */ .window-center{width:min(100%,var(--window-center-w,640px));margin-left:clamp(0px,calc(50vw - var(--window-center-w,640px) / 2 - var(--content-x)),calc(100% - var(--window-center-w,640px)));margin-right:0;} .page-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px;} .page-head h1{margin:0;font-size:20px;font-weight:600;letter-spacing:-.3px;} .page-head__sub{margin:4px 0 0;font-size:13px;color:var(--muted);} .page-head .actions,.page-head__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;} /* ── Filter bar ────────────────────────────────────────────────────────── Search, chips and selects in a row above a list, or any short row of controls with a button. The global input rule makes every input full width, which in a row puts each control on its own line, so controls here take their natural width and only a text box stretches. */ .toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px;} .toolbar :is(input,select):not([type=checkbox],[type=radio]){width:auto;padding:8px 10px;font-size:13px;border-radius:var(--radius-sm);} .toolbar input:is([type=search],[type=text],:not([type])){flex:1 1 12rem;max-width:22rem;} /* A bare select in a bar gets the field look, or dark mode draws the browser's gray default box. */ .toolbar select:not(.select){background:var(--surface);border:1px solid var(--border-strong);color:var(--text);font-family:inherit;} .toolbar__chips{display:flex;gap:6px;flex-wrap:wrap;} .toolbar__end{margin-left:auto;} .toolbar__count{margin-left:auto;font-size:12.5px;color:var(--muted);white-space:nowrap;} /* ── Fields ────────────────────────────────────────────────────────────── A label, its control, and an optional hint or error, from templates/core/_field.html ({% field form.x %}). */ .field{display:block;margin-bottom:14px;} .field>label,.field__label{display:block;font-size:13px;color:var(--muted);margin-bottom:4px;} /* A choice group (`use_fieldset`) is a fieldset for its legend, without the browser's box around it. */ .field>fieldset{border:0;margin:0;padding:0;min-width:0;} .field select{max-width:100%;} .field input,.field select,.field textarea{padding:8px 10px;border:1px solid var(--border-strong);border-radius:9px;font-size:14px;background:var(--surface);color:var(--text);} /* The house select's arrow, a chevron of two token-colored strokes: the browser's own sits against the border and ignores padding. Specific enough to outlast the `background` shorthands above and in base.css. */ :is(select.select,.field select,.toolbar select):not([multiple]):not([size]){appearance:none;-webkit-appearance:none;padding-right:34px;background-image:linear-gradient(45deg,transparent calc(50% - .8px),var(--muted) calc(50% - .8px) calc(50% + .8px),transparent calc(50% + .8px)),linear-gradient(135deg,transparent calc(50% - .8px),var(--muted) calc(50% - .8px) calc(50% + .8px),transparent calc(50% + .8px));background-position:right 20px center,right 14px center;background-size:6px 6px;background-repeat:no-repeat;} .field__hint{display:block;margin-top:4px;font-size:12px;line-height:1.4;color:var(--muted);} .field__error{display:block;margin-top:4px;font-size:12px;line-height:1.4;color:var(--red-d);} .field--inline{display:flex;align-items:center;gap:8px;} .field--inline>label{margin:0;} .field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--red-line);} /* ── Empty states ──────────────────────────────────────────────────────── templates/core/_empty.html for a section with nothing in it, and core/_empty_row.html for a table with no rows. */ .empty{text-align:center;color:var(--muted);background:var(--surface);border:1px dashed var(--border-strong);border-radius:var(--radius);padding:40px 16px;} .empty__title{display:block;font-size:14px;font-weight:600;color:var(--text);} .empty__body{margin:6px auto 0;max-width:46ch;font-size:13px;line-height:1.5;} .empty__action{margin-top:14px;} .empty-row td,.table .empty-row td{text-align:center;color:var(--muted);padding:28px 12px;} /* Inside one group of a sheet it is that group's quiet sub-state, not the whole table's: an ordinary muted row, so a list of empty groups stays dense. */ tbody[data-sheet-group] .empty-row td{padding:10px 12px;text-align:left;} /* ── Key-value list ─────────────────────────────────────────────────────*/ .kv{display:grid;grid-template-columns:180px 1fr;gap:6px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;} .kv dt{color:var(--muted);font-size:13px;} .kv dd{margin:0;overflow-wrap:anywhere;} /* A key-value list inside a card that already draws the frame. */ .kv--plain{background:none;border:0;border-radius:0;padding:0;} /* ── Tables ────────────────────────────────────────────────────────────── Every .table keeps its column heads in view: the head sticks under the app header as the page scrolls. The rounded corners are clipped with overflow:clip, which, unlike overflow:hidden, does not make the table a scroll box, so the head sticks to the window. A wrapper that scrolls (overflow:auto, .table-scroll) or clips with hidden still traps it; data lists belong in the sheet (templates/core/sheet/). The line under the head is an inset shadow, because a collapsed border stays behind when the cell sticks. */ .table{width:100%;border-collapse:collapse;background:var(--surface);overflow:clip;font-size:13.5px;border:1px solid var(--border);border-radius:var(--radius);} /* A table whose rows hold a `.menu` lets it open past the table's edge; the clip above would cut a last-row menu off. */ .table--menus{overflow:visible;} .table th,.table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top;} .table th{text-transform:uppercase;color:var(--muted);font-size:10.5px;font-weight:600;letter-spacing:.06em;background:var(--surface);} .table > thead th{position:sticky;top:var(--header-h);z-index:2;border-bottom:0;box-shadow:inset 0 -1px var(--border);} /* In a horizontal scroller the head can only stick inside it: stay put. */ :is(.table-scroll,.table-wrap,dialog,[style*="overflow-x:auto"],[style*="overflow-x: auto"],[style*="overflow:auto"],[style*="overflow: auto"]) .table > thead th{top:0;} .table tbody tr{transition:background .12s;} .table tbody tr:hover{background:var(--card-2);} /* A row that needs attention (rent charged and not paid), tinted red. */ .table tbody tr.table__row--alert{background:var(--red-weak);} .table tr:last-child td{border-bottom:0;} .table th a{color:inherit;} .table .num,.table td.num,.table th.num{text-align:right;font-variant-numeric:tabular-nums;} .table-scroll{overflow-x:auto;} .row-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;} /* On a itself, flex breaks the row's height and misaligns its border; there it stays a table cell and lays its actions out inline. */ td.row-actions{display:table-cell;text-align:right;} td.row-actions>a,td.row-actions>button,td.row-actions>form,td.row-actions>.btn{display:inline-block;vertical-align:top;margin-left:6px;} /* The "View proof" disclosure row in _wo_table_rows.html's report variant: an iframe of the whole WO page under the row it belongs to. Not a data row, so no hover tint. */ .wo-proof-row td{background:var(--card-2);padding:10px 4px;} .wo-proof-row:hover td{background:var(--card-2);} .wo-proof-frame{width:100%;height:70vh;border:0;border-radius:var(--radius-sm);background:var(--surface);} /* ── Pager ─────────────────────────────────────────────────────────────── templates/core/_pager.html. */ .pager{display:flex;gap:12px;align-items:center;margin-top:14px;color:var(--muted);font-size:13px;} .pager__where{min-width:0;} .pager--end{justify-content:flex-end;gap:8px;} .pager--end .btn{padding:1px 7px;font-size:13px;line-height:1.3;} /* Previous / this / next week (templates/core/_week_stepper.html). */ .stepper{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;} /* ── Typeahead (static/js/typeahead.js) ────────────────────────────────── A search box whose matches open in a list under it to pick from. */ .typeahead{position:relative;} .typeahead__menu{position:absolute;z-index:30;top:calc(100% + 4px);left:0;right:0;min-width:16rem;max-height:260px;overflow-y:auto;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);} .typeahead__opt{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;width:100%;padding:7px 10px;border:0;border-bottom:1px solid var(--border);background:none;font:inherit;font-size:13px;color:inherit;text-align:left;cursor:pointer;} .typeahead__opt:last-child{border-bottom:0;} .typeahead__opt:hover,.typeahead__opt.is-active{background:var(--accent-weak);} .typeahead__sub{color:var(--muted);} .typeahead__note{flex-basis:100%;font-size:12px;color:var(--muted);} .typeahead__none{padding:8px 10px;font-size:12.5px;color:var(--muted);} /* ── Tabs ──────────────────────────────────────────────────────────────── .page-tabs: a page's own tab strip (apps.core.page_tabs, swapped in place by static/js/tab_swap.js). .inline-tabs: a toggle between views inside one section (templates/core/_inline_tabs.html, static/js/ui.js). */ .page-tabs{display:flex;gap:.25rem;flex-wrap:wrap;background:var(--surface);border-bottom:1px solid var(--border-strong);margin:.75rem 0 1rem;} .page-tab{background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;padding:.5rem .85rem; border-radius:0;font-family:inherit;font-size:.92rem;font-weight:600;color:var(--muted);cursor:pointer;text-decoration:none;} .page-tab:hover{color:var(--text);} .page-tab.is-active{color:var(--text);border-bottom-color:var(--accent);} /* Tabs keep stretching to the band's bottom rule; only the actions center. */ .page-tabs__actions{margin-left:auto;align-self:center;display:flex;gap:.5rem;align-items:center;padding:.25rem 0;} .inline-tabs{display:inline-flex;border:1px solid var(--border-strong);border-radius:9px;overflow:clip;background:var(--surface);} .inline-tabs__tab{border:0;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--soft);padding:6px 14px;cursor:pointer;} .inline-tabs__tab + .inline-tabs__tab{border-left:1px solid var(--border-strong);} .inline-tabs__tab:hover{color:var(--text);background:var(--card-2);} .inline-tabs__tab[aria-selected="true"],.inline-tabs__tab[aria-current="page"]{background:var(--accent);color:var(--on-accent);} /* The same control as links, for two pages that are views of one thing and carry a parameter across (Day / Week keep ?date=):