/* The stylesheet of the staff panel. One set of tokens, two themes: the panel is read in an office in daylight and at 23:00 during an incident, and neither reader should have to squint. Light is the default; `[data-theme="dark"]` on switches the tokens, and the toggle in the sidebar remembers the choice (see `app.js`). */ :root { --bg: #f5f6f8; --surface: #ffffff; --surface-2: #fafbfc; --surface-3: #f2f4f7; --ink: #16191d; --ink-2: #384152; --muted: #6b7686; --line: #e3e6ea; --line-2: #d3d8de; --accent: #1f5eff; --accent-ink: #ffffff; --accent-soft: #eaf0ff; --ok: #0f7b46; --ok-soft: #e6f6ed; --warn: #8a5200; --warn-soft: #fdf3e0; --bad: #b42318; --bad-soft: #fdeceb; --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06); --radius: 10px; --side: 244px; } :root[data-theme="dark"] { --bg: #0e1116; --surface: #161b22; --surface-2: #1b2129; --surface-3: #212832; --ink: #e8ecf2; --ink-2: #c3cbd8; --muted: #94a1b2; --line: #262d38; --line-2: #333c49; --accent: #6f9bff; --accent-ink: #0b1020; --accent-soft: #1c2740; --ok: #56d39a; --ok-soft: #12291f; --warn: #e8b866; --warn-soft: #2b2313; --bad: #ff8b81; --bad-soft: #2e1715; --shadow: none; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; } h1 { font-size: 21px; margin: 0; letter-spacing: -.01em; } h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 12px; font-weight: 600; } h3 { font-size: 14px; margin: 18px 0 8px; } hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; } /* --- shell: sidebar + content ------------------------------------------------------------------- */ .shell { display: flex; min-height: 100%; align-items: stretch; } .sidebar { width: var(--side); flex: 0 0 var(--side); background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .side-brand { padding: 18px 18px 14px; border-bottom: 1px solid var(--line); } .side-brand a { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 650; font-size: 15px; } .side-brand a:hover { text-decoration: none; } .tag { background: var(--accent); color: var(--accent-ink); border-radius: 5px; padding: 1px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; } .side-brand .sub { display: block; color: var(--muted); font-size: 11.5px; margin-top: 6px; line-height: 1.4; } .side-nav { padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; } .side-nav .group { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; padding: 14px 10px 6px; } .side-nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--ink-2); font-weight: 500; } .side-nav a:hover { background: var(--surface-3); color: var(--ink); text-decoration: none; } .side-nav a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .side-nav a .ico { width: 16px; height: 16px; flex: 0 0 16px; stroke: currentColor; fill: none; stroke-width: 1.7; } .side-nav a .count { margin-left: auto; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; } .side-foot { margin-top: auto; padding: 12px 14px 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; } .side-note { color: var(--muted); font-size: 11.5px; line-height: 1.45; } .main { flex: 1 1 auto; min-width: 0; } .wrap { max-width: 1180px; margin: 0 auto; padding: 26px 28px 44px; } /* --- page head ---------------------------------------------------------------------------------- */ .crumbs { color: var(--muted); font-size: 12.5px; margin-bottom: 10px; } .crumbs a { color: var(--muted); } .crumbs a:hover { color: var(--accent); } .crumbs span { margin: 0 6px; color: var(--line-2); } .page-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; } .page-head .grow { flex: 1 1 auto; min-width: 240px; } .page-head .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .lead { color: var(--muted); margin: 6px 0 0; } .lead .mono { color: var(--ink-2); } /* --- cards, tiles ------------------------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 18px; box-shadow: var(--shadow); } .card.flush { padding: 0; overflow: hidden; } .card-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .card-head h2 { margin: 0; } .card-head h3 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .card-note { color: var(--muted); font-size: 12px; margin-left: auto; text-align: right; } .card-actions { display: flex; gap: 8px; align-items: center; } .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; } .tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); color: inherit; display: block; } a.tile:hover { border-color: var(--accent); text-decoration: none; } .tile .n { font-size: 23px; font-weight: 650; display: block; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .tile .k { color: var(--muted); font-size: 12px; } .tile.warn .n { color: var(--warn); } .tile.bad .n { color: var(--bad); } .tile.ok .n { color: var(--ok); } .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 20px; } /* --- tables ------------------------------------------------------------------------------------- */ .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; } th { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; background: var(--surface-2); position: sticky; top: 0; z-index: 1; } tbody tr:hover { background: var(--surface-2); } tbody tr:last-child td { border-bottom: 0; } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } td.tight { white-space: nowrap; } .muted { color: var(--muted); } .small { font-size: 12.5px; } .nowrap { white-space: nowrap; } /* a table inside a card that already has a heading is a "sub table": no extra frame */ .sub { margin-top: 6px; } .sub th { background: transparent; } .pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; background: var(--surface-3); color: var(--muted); white-space: nowrap; } .pill.ok { background: var(--ok-soft); color: var(--ok); } .pill.warn { background: var(--warn-soft); color: var(--warn); } .pill.bad { background: var(--bad-soft); color: var(--bad); } .pill.info { background: var(--accent-soft); color: var(--accent); } /* --- forms -------------------------------------------------------------------------------------- */ .filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 16px; } .field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); } .field.grow { flex: 1 1 320px; } .field.auto { flex: 0 0 auto; } /* `email` and `url` are listed next to `text`: an account field that is not in this list falls back to the browser's own look and sits next to a styled password box as a different control. */ input[type=text], input[type=email], input[type=password], input[type=search], input[type=url], select { border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 11px; font: inherit; background: var(--surface); color: var(--ink); min-width: 150px; } input:focus, select:focus { outline: 2px solid var(--accent-soft); outline-offset: 0; border-color: var(--accent); } input::placeholder { color: var(--muted); } input[type=search] { min-width: 260px; } .btn { background: var(--accent); color: var(--accent-ink); border: 1px solid transparent; border-radius: 8px; padding: 8px 15px; font: inherit; font-weight: 550; cursor: pointer; display: inline-block; } .btn:hover { filter: brightness(1.07); text-decoration: none; } .btn.ghost { background: var(--surface); color: var(--ink-2); border-color: var(--line-2); } .btn.ghost:hover { border-color: var(--accent); color: var(--accent); } .btn.small { padding: 5px 10px; font-size: 12.5px; } .btn.danger { background: var(--surface); color: var(--bad); border-color: var(--line-2); } .pager { display: flex; gap: 12px; align-items: center; margin-top: 14px; color: var(--muted); flex-wrap: wrap; } .pager a, .pager span.page { padding: 5px 11px; border: 1px solid var(--line-2); border-radius: 7px; background: var(--surface); } .pager span.page { border-style: dashed; } .problems { background: var(--warn-soft); border: 1px solid var(--line-2); color: var(--warn); border-radius: var(--radius); padding: 11px 15px; margin-bottom: 16px; } .problems ul { margin: 6px 0 0; padding-left: 18px; } .problems .mono { color: inherit; } /* --- detail: sticky section navigation + definition lists ---------------------------------------- */ .detail { display: grid; grid-template-columns: minmax(0, 1fr) 196px; grid-template-areas: "main nav"; gap: 24px; align-items: start; } .detail-main { grid-area: main; min-width: 0; } .section-nav { grid-area: nav; position: sticky; top: 18px; font-size: 13px; } .section-nav .group, .section-nav .title { display: block; color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; } .section-nav a { display: block; padding: 4px 0 4px 10px; color: var(--ink-2); border-left: 2px solid var(--line); } .section-nav a:hover { color: var(--accent); text-decoration: none; border-color: var(--accent); } .section-nav a.active { color: var(--accent); border-color: var(--accent); font-weight: 600; } .kv { display: grid; grid-template-columns: 210px 1fr; gap: 7px 16px; margin: 0; } .kv dt { color: var(--muted); } .kv dd { margin: 0; word-break: break-word; } .empty { color: var(--muted); font-style: italic; margin: 6px 0 0; } .hint { color: var(--muted); font-size: 12.5px; margin: 10px 0 0; } .foot { margin-top: 30px; color: var(--muted); font-size: 12px; } /* --- login -------------------------------------------------------------------------------------- The first screen of the panel, and the only one that runs BEFORE any client data is on it: it has to look like the product and stay readable in both themes, on a laptop and on a phone. The form is a single column inside a card, so the eye follows one line: heading, explanation, fields, button. Everything is token-driven — a hard-coded colour here breaks one of the two themes. */ .login { max-width: 420px; margin: 7vh auto 0; padding: 0 20px 40px; } .login-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 26px 26px 22px; box-shadow: var(--shadow); } .login-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .login-head h1 { font-size: 20px; display: flex; align-items: center; gap: 8px; } /* The toggle is a control, not a link: it must not grow with the heading. */ .login-head .btn { flex: 0 0 auto; } .login .lead { color: var(--muted); font-size: 13px; margin: 12px 0 20px; line-height: 1.5; } /* Fields: one rhythm for label + input + gap, so e-mail and password line up exactly. */ .login .field-label { display: block; color: var(--ink-2); font-size: 12.5px; font-weight: 550; margin-bottom: 6px; } /* The two account fields sit closer to their own label than to each other. */ .login input[type=email], .login input[type=password] { width: 100%; padding: 10px 12px; font-size: 14.5px; } .login input[type=email] { margin-bottom: 16px; } .login input[type=password] { margin-bottom: 20px; } .login .btn.primary { width: 100%; padding: 11px 16px; font-size: 14.5px; } /* Chrome/Safari repaint an autofilled field with their own background and ink, which in the dark theme looks like a white hole in the card. The `inset` shadow is the only way to override it; the `-webkit-text-fill-color` keeps the typed address readable in both themes. */ .login input:-webkit-autofill, .login input:-webkit-autofill:hover, .login input:-webkit-autofill:focus { -webkit-text-fill-color: var(--ink); box-shadow: 0 0 0 1000px var(--surface) inset; caret-color: var(--ink); } /* The refusal is read first: it sits above the fields, in the alarm colour, with the same shape as every other card on the panel. A refusal is not a warning — the account did not get in. */ .login .login-error { background: var(--bad-soft); border: 1px solid var(--bad); color: var(--bad); border-radius: 8px; padding: 11px 14px; margin: 0 0 18px; font-size: 13px; line-height: 1.5; } /* The machine door is folded away: it is not for the person signing in, but it must stay reachable for whoever automates. `details` needs its own styling because the browser default is unstyled. */ .login-token { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 14px; } .login-token > summary { cursor: pointer; color: var(--muted); font-size: 12.5px; list-style: none; display: flex; align-items: center; gap: 6px; } .login-token > summary::-webkit-details-marker { display: none; } /* One caret, drawn from a border — no icon font, no request. It turns when the block opens. */ .login-token > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); transition: transform .15s; flex: 0 0 auto; margin-top: -2px; } .login-token[open] > summary::before { transform: rotate(45deg); } .login-token > summary:hover { color: var(--accent); } .login-token[open] > summary { margin-bottom: 12px; } .login-token .who { margin: 0 0 12px; } /* The nested form is a separate door with a quieter button: it is not the main action of the page. */ .login-token-form input[type=password] { width: 100%; padding: 10px 12px; font-size: 14.5px; margin-bottom: 12px; } .login-token-form .btn { width: 100%; } .login .who { color: var(--muted); font-size: 12.5px; margin: 14px 0 0; line-height: 1.5; } .login-foot { text-align: center; } /* On a phone the two paddings (page + card) would eat a fifth of the screen, so both shrink and the form keeps the width it needs for a long e-mail address. */ @media (max-width: 480px) { .login { margin-top: 4vh; padding: 0 12px 32px; } .login-card { padding: 20px 18px 18px; border-radius: 12px; } .login .lead { margin: 10px 0 16px; } .login input[type=email] { margin-bottom: 14px; } .login input[type=password] { margin-bottom: 16px; } } .problem-page { max-width: 620px; margin: 10vh auto; padding: 0 20px; } .problem-page h1 { font-size: 26px; margin-bottom: 6px; } /* --- toolbar: search first, narrowing next, shortcuts last -------------------------------------- */ .toolbar { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; } .toolbar.compact { padding: 12px 14px; gap: 10px; } .search { display: flex; gap: 8px; align-items: stretch; position: relative; } /* The magnifier sits INSIDE the box, so the field keeps the whole row and the button stays at the right edge. The input therefore carries the left padding the icon needs. */ .search .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--muted); stroke: currentColor; fill: none; pointer-events: none; } .search input[type=search] { flex: 1 1 auto; padding-left: 36px; min-width: 0; font-size: 15px; } .selects { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; } .selects label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--muted); } .selects select { min-width: 160px; } .chips { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; } .chips-label { color: var(--muted); font-size: 11.5px; } .chip { border: 1px solid var(--line-2); border-radius: 999px; padding: 3px 11px; font-size: 12.5px; color: var(--ink-2); background: var(--surface-2); white-space: nowrap; } .chip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; } .chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; } .page-actions, .page-head .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .page-head .meta { color: var(--muted); font-size: 12.5px; margin: 6px 0 0; } .page-head .meta .dot { margin: 0 5px; color: var(--line-2); } .tiles.tight { grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); } .tiles.tight .tile { padding: 10px 12px; } .tiles.tight .tile .n { font-size: 18px; } .table-wrap.tall { max-height: 620px; overflow-y: auto; } table.tabela-tabel td.share, table.tabela-tabel th.share { width: 140px; } tbody tr.zero td { color: var(--muted); } .bar { display: block; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; } .bar > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; } tbody tr.zero .bar > span { background: var(--line-2); } .card h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 18px 0 6px; } .btn.off, .btn.ghost.off { opacity: .45; pointer-events: none; } h1 + .meta { margin-top: 8px; } /* --- narrower screens: the sidebar becomes a strip at the top ----------------------------------- */ @media (max-width: 940px) { .shell { display: block; } .sidebar { width: auto; flex: none; position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); } .side-nav { flex-direction: row; overflow-x: auto; padding: 8px 10px; } .side-nav .group { display: none; } .side-nav a { white-space: nowrap; } .side-foot { flex-direction: row; align-items: center; justify-content: space-between; } .wrap { padding: 18px 16px 36px; } .detail { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "nav"; gap: 14px; } .section-nav { display: flex; flex-wrap: wrap; gap: 4px 12px; border-top: 1px solid var(--line); padding-top: 10px; } .section-nav a { border-left: 0; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); } .section-nav { position: static; display: flex; flex-wrap: wrap; gap: 4px 12px; } .section-nav .title { display: none; } .kv { grid-template-columns: 1fr; gap: 2px 0; } .kv dd { margin-bottom: 8px; } } @media print { .sidebar, .section-nav, .filters, .pager { display: none; } .card { break-inside: avoid; box-shadow: none; } }