@charset "utf-8";
/* Partner Area design system (redesign spec §4.5): tokens, base, layout, components.
   Every colour is a token. The two dark blocks below must stay identical (test_72 checks it). */

/* DR YIELD design system (claude.ai artifact LzCeV5gHPeWuNjM3nHMHfm, synced from DRYield/Web): Inter + Aldrich,
   self-hosted; yellow #ffc000 for the focus ring only. The accent is the band blue #3278b4, not the brand blue #008cd2
   (white on #008cd2 is 3.70:1, too low for 14px labels; the design system README names #3278b4 for AA). It
   has no dark mode: the dark blocks below are this app's own. */
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url(../fonts/inter-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url(../fonts/inter-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url(../fonts/inter-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Aldrich"; font-weight: 400; font-display: swap; src: url(../fonts/aldrich-latin-400-normal.woff2) format("woff2"); }

/* ---------- tokens: light ---------- */
:root {
	--accent: var(--color-main, #3278b4);
	--accent-hover: color-mix(in srgb, var(--accent) 82%, #000);
	--accent-soft: color-mix(in srgb, var(--accent) 12%, var(--surface));
	--on-accent: #ffffff;
	--band: #3278b4;
	--focus: #ffc000;
	--bg: #fafafa;
	--surface: #ffffff;
	--surface-2: #f7f7f7;
	--surface-hover: #f0f0f0;
	--border: #e6e6e6;
	--border-strong: #cccccc;
	--text: #000000;
	--text-2: #696969;
	--text-muted: #696969;
	--ok: #157f3b; --ok-soft: #e2f5e7;
	--warn: #9a5800; --warn-soft: #fcf0d6;
	--danger: #be2a30; --danger-soft: #fce6e6;
	--info: var(--accent); --info-soft: var(--accent-soft);
	--day-weekend: #faf4e4;
	--day-holiday: #fbe7bd;
	--st-1: #24a148; --st-1-fg: #06200d;
	--st-2: #f1c21b; --st-2-fg: #2b2100;
	--st-3: #ff832b; --st-3-fg: #2e1200;
	--st-4: #8a3ffc; --st-4-fg: #ffffff;
	--st-5: #6a0fac; --st-5-fg: #ffffff;
	--st-6: #6ab9ff; --st-6-fg: #04233f;
	--st-7: #034cbf; --st-7-fg: #ffffff;
	--hue-0: #2563eb; --hue-1: #0f8f84; --hue-2: #16a34a; --hue-3: #65a30d; --hue-4: #d97706;
	--hue-5: #ea580c; --hue-6: #db2777; --hue-7: #9333ea; --hue-8: #4f46e5; --hue-9: #0891b2;
	--tint: 12%;
	--shadow-1: none;
	--shadow-pop: 0 12px 24px -12px rgba(0, 0, 0, .25), 0 0 0 1px rgba(0, 0, 0, .04);
	--r-sm: 4px;
	--r: 8px;
	--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
	--font: "Inter", sans-serif;
	--font-eyebrow: "Aldrich", "Inter", sans-serif;
	--mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
	color-scheme: light;
}
/* CJK UI: prefer native Japanese / Simplified Chinese faces so shared Han characters get the right glyph forms */
:root:lang(ja) { --font: "Inter", system-ui, -apple-system, "Hiragino Sans", "Yu Gothic UI", Meiryo, "Segoe UI", Roboto, sans-serif; }
:root:lang(zh) { --font: "Inter", system-ui, -apple-system, "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif; }

/* ---------- tokens: dark (explicit choice) ---------- */
:root[data-theme="dark"] {
	--accent: color-mix(in srgb, var(--color-main, #3278b4) 65%, #ffffff);
	--accent-hover: color-mix(in srgb, var(--accent) 85%, #ffffff);
	--accent-soft: color-mix(in srgb, var(--accent) 18%, var(--surface));
	--on-accent: #0b1220;
	--bg: #0d1422;
	--surface: #151e2f;
	--surface-2: #1a2438;
	--surface-hover: #212d45;
	--border: #263248;
	--border-strong: #36445f;
	--text: #e4e9f1;
	--text-2: #b7c2d3;
	--text-muted: #8b98ad;
	--ok: #5ad17f; --ok-soft: rgba(90, 209, 127, .14);
	--warn: #f2bd4b; --warn-soft: rgba(242, 189, 75, .14);
	--danger: #f47a7f; --danger-soft: rgba(244, 122, 127, .14);
	--day-weekend: rgba(242, 189, 75, .06);
	--day-holiday: rgba(242, 189, 75, .14);
	--shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
	--shadow-pop: 0 10px 28px rgba(0, 0, 0, .5);
	--hue-0: #60a5fa; --hue-1: #2dd4bf; --hue-2: #4ade80; --hue-3: #a3e635; --hue-4: #fbbf24;
	--hue-5: #fb923c; --hue-6: #f472b6; --hue-7: #c084fc; --hue-8: #a5b4fc; --hue-9: #22d3ee;
	--tint: 18%;
	color-scheme: dark;
}

/* ---------- tokens: dark (system preference, no explicit light choice) ---------- */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--accent: color-mix(in srgb, var(--color-main, #3278b4) 65%, #ffffff);
		--accent-hover: color-mix(in srgb, var(--accent) 85%, #ffffff);
		--accent-soft: color-mix(in srgb, var(--accent) 18%, var(--surface));
		--on-accent: #0b1220;
		--bg: #0d1422;
		--surface: #151e2f;
		--surface-2: #1a2438;
		--surface-hover: #212d45;
		--border: #263248;
		--border-strong: #36445f;
		--text: #e4e9f1;
		--text-2: #b7c2d3;
		--text-muted: #8b98ad;
		--ok: #5ad17f; --ok-soft: rgba(90, 209, 127, .14);
		--warn: #f2bd4b; --warn-soft: rgba(242, 189, 75, .14);
		--danger: #f47a7f; --danger-soft: rgba(244, 122, 127, .14);
		--day-weekend: rgba(242, 189, 75, .06);
		--day-holiday: rgba(242, 189, 75, .14);
		--shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
		--shadow-pop: 0 10px 28px rgba(0, 0, 0, .5);
		--hue-0: #60a5fa; --hue-1: #2dd4bf; --hue-2: #4ade80; --hue-3: #a3e635; --hue-4: #fbbf24;
		--hue-5: #fb923c; --hue-6: #f472b6; --hue-7: #c084fc; --hue-8: #a5b4fc; --hue-9: #22d3ee;
		--tint: 18%;
		color-scheme: dark;
	}
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 var(--font); font-variant-numeric: tabular-nums; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 var(--s-2); font-weight: 700; line-height: 1.25; color: var(--text); }
h1 { font-size: 22px; } h2 { font-size: 17px; } h3 { font-size: 15px; } h4 { font-size: 14px; }
p { margin: 0 0 var(--s-3); }
img { border: 0; max-width: 100%; }
ul, ol { margin: 0 0 var(--s-3); padding-left: 20px; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--s-4) 0; }
abbr[title] { text-decoration: none; cursor: help; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -4px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--text-muted); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.stack > * + * { margin-top: var(--s-4); }

/* ---------- layout ---------- */
.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-4) var(--s-3); background: var(--surface); border-right: 1px solid var(--border); }
.sidebar-brand { padding: var(--s-1) var(--s-2) var(--s-2); }
.sidebar-brand img { display: block; width: 180px; height: auto; }
/* full-colour logo on light grounds, one-colour white logo on dark ones (design system: never recolour it) */
.logo-dark { display: none !important; }
:root[data-theme="dark"] .logo-light { display: none !important; }
:root[data-theme="dark"] .logo-dark { display: block !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-light { display: none !important; } :root:not([data-theme="light"]) .logo-dark { display: block !important; } }
.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-group-label { margin: var(--s-3) var(--s-2) var(--s-1); font: 12px/1.4 var(--font-eyebrow); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.nav-item { display: flex; align-items: center; gap: var(--s-3); padding: 7px var(--s-2); border-radius: var(--r-sm); color: var(--text-2); font-weight: 500; }
.nav-item:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; }
.nav-item[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
.sidebar-user { position: relative; border-top: 1px solid var(--border); padding-top: var(--s-3); }
.user-menu > summary { display: flex; align-items: center; gap: var(--s-2); padding: 6px var(--s-2); border-radius: var(--r-sm); cursor: pointer; list-style: none; color: var(--text); font-weight: 500; }
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary:hover { background: var(--surface-hover); }
.user-menu > summary .icon:last-child { margin-left: auto; color: var(--text-muted); }
.avatar { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 600; text-transform: uppercase; flex: none; }
.user-menu-panel { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 30; display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-pop); }
.user-menu-panel > a { display: flex; align-items: center; gap: var(--s-2); padding: 6px var(--s-2); border-radius: var(--r-sm); color: var(--text); }
.user-menu-panel > a:hover { background: var(--surface-hover); text-decoration: none; }
.menu-label { margin: var(--s-2) var(--s-2) 2px; font: 12px/1.4 var(--font-eyebrow); text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); }
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: none; }
.content { flex: 1; width: 100%; margin: 0 auto; padding: var(--s-5) var(--s-6); }
.content.standard { max-width: 1264px; }
.content.wide { max-width: none; }
.app-footer { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); justify-content: center; padding: var(--s-4); font-size: 12px; color: var(--text-muted); }
.app-footer a { color: var(--text-muted); }
.sidebar-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .35); }
@media (max-width: 900px) {
	.app { grid-template-columns: minmax(0, 1fr); }
	.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; width: 272px; transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow-pop); }
	.app.nav-open .sidebar { transform: none; }
	.topbar { display: flex; align-items: center; gap: var(--s-2); position: sticky; top: 0; z-index: 20; padding: var(--s-2) var(--s-3); background: var(--surface); border-bottom: 1px solid var(--border); }
	.topbar-brand img { display: block; height: 32px; width: auto; }
	.content { padding: var(--s-4); }
}
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }

/* ---------- login ---------- */
.login-page { min-height: calc(100vh - 60px); display: grid; place-items: center; padding: var(--s-5) var(--s-4); }
.login-card { width: 100%; max-width: 400px; padding: var(--s-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-1); }
.login-card .brand img { display: block; width: 240px; height: auto; margin: 0 auto var(--s-5); }
.login-card h1 { font-size: 19px; text-align: center; margin-bottom: var(--s-4); }
.login-card .btn { width: 100%; justify-content: center; }
.login-divider { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-4) 0; color: var(--text-muted); font-size: 12px; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; border-top: 1px solid var(--border); }

/* ---------- page header, tabs ---------- */
.page-header { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3) var(--s-4); margin-bottom: var(--s-4); }
.page-header-text { flex: 1 1 320px; min-width: 0; }
.page-header h1 { margin: 0; }
.page-subtitle { margin: 2px 0 0; color: var(--text-2); }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.tabs { display: flex; gap: var(--s-1); margin: 0 0 var(--s-4); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: thin; }
.tabs a { padding: var(--s-2) var(--s-3); margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--text-2); font-weight: 500; white-space: nowrap; }
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- cards ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-1); margin-bottom: var(--s-4); min-width: 0; }
.card-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border); }
.card-title { margin: 0; font-size: 15px; font-weight: 600; flex: 1; }
.card-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.card-body { padding: var(--s-4); }
.card-body > :last-child { margin-bottom: 0; }
.card > .table-scroll { border-radius: 0 0 var(--r) var(--r); }
.card.is-editing { border-color: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); }
.toolbar .field { margin: 0; min-width: 160px; }
.toolbar-end { justify-content: flex-end; margin-bottom: var(--s-4); }
.toolbar-title { margin: 0 0 0 var(--s-3); font-size: 16px; align-self: center; }
.radio-row { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); min-height: 36px; align-items: center; }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
.project-row { padding: var(--s-3) 0; border-bottom: 1px solid var(--border); }
.project-row:first-child { padding-top: 0; }
.project-row:last-child { border-bottom: 0; padding-bottom: 0; }
.project-row-head { display: flex; align-items: center; gap: var(--s-1); margin-bottom: var(--s-2); }
.hours-grid { border-collapse: collapse; }
.hours-grid th, .hours-grid td { padding: 4px; text-align: center; }
.hours-grid thead th { font-size: 12px; font-weight: 600; color: var(--text-2); }
.hours-grid th[scope="row"] { text-align: left; font-weight: 600; color: var(--text-2); white-space: nowrap; padding-right: var(--s-3); }
.hours-grid input { width: 72px; text-align: center; }
.inline-form { display: inline; }
.card form > .field { max-width: 560px; }
.table .tr-group th { position: static; background: var(--surface-2); color: var(--text); text-transform: none; font-size: 13px; letter-spacing: 0; }
.toolbar-filter { margin: var(--s-4) 0; }
.token-users-form { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: flex-start; }
.token-users-form select { width: auto; min-width: 160px; }
.mono { font-family: var(--mono); }
.support-phone { font-size: 17px; font-weight: 600; }
.empty-state-action { text-align: center; }
.card-actions .toolbar .field { min-width: 0; }
.card-actions .field-check { padding-top: 0; }
a.progress { display: block; }

/* ---------- forms ---------- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-3) var(--s-4); align-items: start; }
.form-grid .span-2 { grid-column: span 2; }
.form-grid .span-all { grid-column: 1 / -1; }
@media (max-width: 600px) { .form-grid .span-2 { grid-column: 1 / -1; } }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin-bottom: var(--s-3); }
.form-grid .field { margin-bottom: 0; }
.field > label, .field-label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.field-hint { font-size: 12px; color: var(--text-muted); }
.field-error { font-size: 12px; color: var(--danger); }
.field-check { flex-direction: row; align-items: center; gap: var(--s-2); padding-top: 22px; }
.field-check label { font-weight: 500; color: var(--text); }
.input-suffix { display: flex; align-items: center; gap: 6px; }
.input-suffix > input { flex: 1; min-width: 0; }
.resp-working-time { display: contents; }
input, select, textarea, button { font: inherit; color: inherit; }
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]), select, textarea {
	width: 100%; min-height: 36px; padding: 6px 10px; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--r-sm); margin: 0;
}
textarea { min-height: 84px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input[disabled], select[disabled], textarea[disabled] { background: var(--surface-2); color: var(--text-muted); cursor: not-allowed; }
input[readonly] { background: var(--surface-2); }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; margin: 0 6px 0 0; accent-color: var(--accent); vertical-align: -3px; }
input[type="date"] { color-scheme: inherit; }

/* ---------- buttons ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 6px 14px;
	border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text);
	font-weight: 500; line-height: 1.2; cursor: pointer; text-decoration: none; white-space: nowrap; width: auto;
}
.btn:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-hover); }
.btn-danger { color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); color: var(--danger); }
.btn-sm { min-height: 30px; padding: 4px 10px; font-size: 13px; }
.btn-icon { min-width: 36px; padding: 6px; }
.btn-sm.btn-icon { min-width: 30px; padding: 4px; }
.btn[disabled], .btn.disabled { opacity: .55; cursor: not-allowed; }
.segmented { display: inline-flex; padding: 2px; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); }
.segmented > a, .segmented > button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 0; border-radius: 4px; background: transparent; color: var(--text-2); font-weight: 500; white-space: nowrap; cursor: pointer; }
.segmented > a:hover, .segmented > button:hover { color: var(--text); text-decoration: none; }
.segmented > [aria-current], .segmented > [aria-pressed="true"] { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-1); }
.user-menu-panel .segmented { display: flex; margin: 0 var(--s-1); }
.user-menu-panel .segmented > * { flex: 1 1 auto; justify-content: center; padding: 4px 6px; }

/* ---------- tables ---------- */
.table-scroll { overflow: auto; max-width: 100%; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; }
.table th, .table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); color: var(--text-2); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.table tbody tr:hover td { background: var(--surface-hover); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .num, .table th.num { text-align: right; }
.table td.hours, .table th.hours { text-align: right; }
.table .row-actions { text-align: right; white-space: nowrap; width: 1%; }
.table .row-actions .btn { margin-left: 2px; }
.table .tr-total td { font-weight: 600; background: var(--surface-2); }
.table tr.is-me td { font-weight: 600; }
.table .is-inactive { color: var(--text-muted); }
.table tr.is-editing td { background: var(--warn-soft); }
.table td.day-saturday, .table td.day-sunday { background: var(--day-weekend); }
.table td.day-holiday { background: var(--day-holiday); }
.table td.day-past, .table td.day-future { color: var(--text-muted); }
.table td.is-overlap { background: var(--danger-soft); }
.table td.edit { background: var(--warn-soft); }

/* ---------- badges, chips, alerts, empty states ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }
.badge-accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.badge-success { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.badge-warning { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.badge-danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
.chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 13px; cursor: pointer; }
.chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.chip .icon { width: 15px; height: 15px; }
.alert { display: flex; gap: var(--s-3); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4); border-radius: var(--r); border: 1px solid transparent; background: var(--info-soft); color: var(--text); }
.alert > .icon { color: var(--info); margin-top: 1px; }
.alert-ok { background: var(--ok-soft); } .alert-ok > .icon { color: var(--ok); }
.alert-warning { background: var(--warn-soft); } .alert-warning > .icon { color: var(--warn); }
.alert-danger { background: var(--danger-soft); } .alert-danger > .icon { color: var(--danger); }
.alert-body > :last-child { margin-bottom: 0; }
.empty-state { padding: var(--s-6) var(--s-4); text-align: center; color: var(--text-2); }
.empty-state h3 { margin-bottom: var(--s-1); }

/* ---------- KPIs, progress ---------- */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s-3); margin-bottom: var(--s-4); }
.kpi { padding: var(--s-3) var(--s-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-1); min-width: 0; }
.kpi-label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.kpi-value { font-size: 22px; font-weight: 600; line-height: 1.3; }
.kpi-sub { font-size: 12px; color: var(--text-muted); }
.kpi.is-ok .kpi-value { color: var(--ok); }
.kpi.is-danger .kpi-value { color: var(--danger); }
.kpi.is-warn .kpi-value { color: var(--warn); }
.progress { height: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.progress.is-danger > span { background: var(--danger); }
/* share of the budget booked, as colour: the DR YIELD blue at 0 %, red at 100 % and over (--load is set per bar) */
.progress-load > span { background: color-mix(in oklab, var(--danger) var(--load, 0%), var(--accent)); }
.progress-legend { display: flex; justify-content: space-between; margin-top: 4px; font-size: 12px; color: var(--text-muted); }

/* ---------- home ---------- */
.home-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: var(--s-4); align-items: start; }
@media (max-width: 1100px) { .home-grid { grid-template-columns: minmax(0, 1fr); } }
/* staff home: "Your projects" beside "Book time" once both fit; the page then drops the standard width cap */
@media (min-width: 1600px) {
	.content:has(> .home-columns) { max-width: none; }
	.home-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-4); align-items: start; }
}
.download-list { list-style: none; padding: 0; margin: 0 0 var(--s-3); }
.download-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s-2); padding: 6px 0; border-bottom: 1px solid var(--border); }
.download-list li:last-child { border-bottom: 0; }
.download-list a { font-weight: 500; overflow-wrap: anywhere; }
.passwordarea { display: none; font-family: var(--mono); font-size: 12px; padding: 1px 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; }
.collapse-toggle .icon { transition: transform .15s ease; }
.collapse-toggle.expandedIcon .icon, .collapse-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.card-flush > .card-body { padding: 0; }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
#seriesdata, #oldversions { display: none; }
.booking-rows { margin: var(--s-4) 0 0; }
.inputrow { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(0, 2fr) 120px auto; gap: var(--s-3); align-items: end; margin-bottom: var(--s-3); }
.inputrow .field { margin: 0; }
.booking-rows .buttons { display: flex; flex-wrap: wrap; gap: var(--s-2); }
@media (max-width: 700px) { .inputrow { grid-template-columns: minmax(0, 1fr) auto; } .inputrow .field:nth-child(2) { grid-column: 1 / -1; grid-row: 2; } }
#savedProjectButtons { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
#projectRecordingModalButton { align-self: flex-start; margin: var(--s-2) 0 var(--s-3); }
.recording .form-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

/* ---------- week strip ---------- */
.week-strip { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-4); }
.week-days { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.week-day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); text-align: center; line-height: 1.25; }
.week-day:hover { border-color: var(--accent); text-decoration: none; color: var(--text); }
.week-dow { font-size: 12px; font-weight: 600; }
.week-hours { font-size: 12px; color: inherit; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.week-day.is-ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.week-day.is-partial { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.week-day.is-missing { border: 1.5px dashed var(--danger); color: var(--danger); }
.week-day.is-weekend { background: var(--surface-2); color: var(--text-muted); }
.week-day.is-holiday { background: var(--day-holiday); color: var(--text-2); }
.week-day.is-today { box-shadow: 0 0 0 2px var(--accent); }
.week-day.is-unbooked { border: 1.5px dashed var(--danger) !important; }
.week-day.is-selected { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 600px) { .week-hours { font-size: 11px; } .week-strip .week-nav { display: none; } }

/* ---------- calendar statuses (shared by calendar grid, legend, week strip) ---------- */
.status-1 { background: var(--st-1) !important; color: var(--st-1-fg) !important; border-color: transparent !important; }
.status-2 { background: var(--st-2) !important; color: var(--st-2-fg) !important; border-color: transparent !important; }
.status-3 { background: var(--st-3) !important; color: var(--st-3-fg) !important; border-color: transparent !important; }
.status-4 { background: var(--st-4) !important; color: var(--st-4-fg) !important; border-color: transparent !important; }
.status-5 { background: var(--st-5) !important; color: var(--st-5-fg) !important; border-color: transparent !important; }
.status-6 { background: var(--st-6) !important; color: var(--st-6-fg) !important; border-color: transparent !important; }
.status-7 { background: var(--st-7) !important; color: var(--st-7-fg) !important; border-color: transparent !important; }
.legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--text-2); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; }

/* ---------- calendar grid ---------- */
.cal-scroll { overflow: auto; max-height: 72vh; }
.cal-grid { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: 13px; }
.cal-grid th, .cal-grid td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: 0; text-align: center; }
.cal-grid thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); color: var(--text-2); font-weight: 600; }
.cal-grid thead tr.cal-days th { top: 29px; }
.cal-grid .cal-week { height: 29px; font-size: 12px; letter-spacing: .04em; }
.cal-grid .cal-day { min-width: 38px; height: 40px; padding: 2px; }
.cal-dow { display: block; font-size: 11px; font-weight: 500; color: var(--text-muted); }
.cal-dom { display: block; font-size: 13px; }
.cal-grid .cal-name { position: sticky; left: 0; z-index: 1; min-width: 170px; padding: 6px 12px; text-align: left; background: var(--surface); white-space: nowrap; font-weight: 500; }
.cal-grid thead .cal-name { z-index: 3; background: var(--surface-2); }
.cal-grid tr.is-me .cal-name { color: var(--accent); }
.cal-grid td.cal-cell { height: 36px; min-width: 38px; }
.cal-grid .day-saturday, .cal-grid .day-sunday { background: var(--day-weekend); }
.cal-grid .day-holiday { background: var(--day-holiday); }
.cal-grid td.day-past { opacity: .55; }
.cal-grid .is-today { box-shadow: inset 0 3px 0 var(--accent); }
.cal-grid td.is-today:not([class*="status-"]) { background: var(--accent-soft); }
.cal-grid select.calendar-select { width: 100%; min-height: 34px; padding: 0 2px; border: 0; background: transparent; color: inherit; font-size: 12px; }
.cal-btn { display: block; width: 100%; height: 36px; border: 0; background: transparent; color: inherit; cursor: pointer; border-radius: 0; }
.cal-btn:hover { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-out { display: flex; flex-direction: column; gap: var(--s-3); }
.cal-out-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.cal-out-day { min-width: 160px; }
.cal-out-person { display: inline-flex; align-items: center; gap: 6px; }
.popover { position: absolute; z-index: 60; min-width: 190px; padding: var(--s-1); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-pop); }
.popover [role="option"] { display: flex; align-items: center; gap: var(--s-2); width: 100%; padding: 6px var(--s-2); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.popover [role="option"]:hover, .popover [role="option"]:focus, .popover [role="option"][aria-selected="true"] { background: var(--surface-hover); outline: none; }

/* ---------- charts ---------- */
.chart { display: block; width: 100%; height: auto; max-height: 260px; }
.chart-grid { stroke: var(--border); stroke-width: 1; }
.chart-tick, .chart-label { fill: var(--text-muted); font-size: 11px; font-family: var(--font); }
.chart-bar rect { fill: var(--accent); }
.chart-bar:hover rect { fill: var(--accent-hover); }
.chart-bar.is-muted rect { fill: var(--border-strong); }
.chart-bar.is-ok rect { fill: var(--ok); }
.chart-bar.is-warn rect { fill: var(--warn); }
.chart-bar.is-danger rect { fill: var(--danger); }
.chart-target { stroke: var(--text); stroke-width: 2; opacity: .55; }
.hbars { display: flex; flex-direction: column; gap: var(--s-2); }
.hbar { display: grid; grid-template-columns: minmax(90px, 220px) minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); }
.hbar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.hbar-track { position: relative; display: flex; height: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.hbar-fill { display: block; height: 100%; background: var(--accent); }
.hbar-fill.is-ok { background: var(--ok); }
.hbar-fill.is-warn { background: var(--warn); }
.hbar-fill.is-danger { background: var(--danger); }
.hbar-fill.is-muted { background: var(--border-strong); }
.hbar-max { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--text); opacity: .55; }
.hbar-value { font-size: 12px; color: var(--text-2); white-space: nowrap; text-align: right; }
@media (max-width: 600px) { .hbar { grid-template-columns: minmax(0, 1fr) auto; } .hbar-track { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- pager ---------- */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--border); }
.pager select { width: auto; min-height: 30px; }

/* ---------- stopwatch area generated by js/time.js (visibility rules copied from time.css) ---------- */
.ext-area { padding: 0 0 var(--s-3); }
.ext-main-row { display: flex; justify-content: flex-end; gap: var(--s-2); }
.ext-button, .ext-button-main, .ext-button-secondary { all: unset; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); cursor: pointer; font-size: 13px; }
.ext-button-main { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.ext-button-secondary { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.ext-link, .ext-link:visited, .ext-link:active { color: inherit; }
.ext-link-danger, .ext-link-danger:visited, .ext-link-danger:active, .text-danger { color: var(--danger); }
.ext-link:hover, .ext-link-danger:hover { text-decoration: underline dashed; }
.text-bold { font-weight: 600; }
.ext-task { display: grid; grid-template-columns: [start] repeat(3, auto 1fr) auto [end]; align-items: center; gap: 6px; padding: 6px 10px; margin: 6px 0; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text); }
.ext-task [name="stop-wrapper"] { grid-column: span 2; display: flex; align-items: center; justify-content: end; gap: 3px; }
.ext-task [name="apply"] { display: inline-block; margin-right: 8px; }
.ext-task [name="stop-wrapper"] .ext-link-danger { font-size: .8em; }
.ext-main-row [name="apply-wrapper"] { display: flex; align-items: center; justify-content: end; gap: 3px; font-size: .9em; }
.ext-summary { display: grid; grid-template-columns: [start] auto repeat(3, auto 1fr) [end]; gap: 6px; align-items: center; margin-left: auto; width: min-content; white-space: nowrap; }
.ext-summary .text-bold { margin-right: 6px; }
.ext-area:not(.has-tasks) [name="apply-wrapper"],
.ext-area:not(.has-finished-tasks) [name="apply-wrapper"],
.ext-area:not(.has-tasks) .ext-summary,
.ext-area:not(.has-tasks) .ext-main-row > [name="clear"],
.ext-area.has-finished-tasks .ext-main-row > [name="clear"],
.ext-area.has-running-tasks [name="start-button"] { display: none; }
.ext-task.has-ended .running, .ext-task:not(.has-ended) .end, .ext-task:not(.has-ended) [name="apply"] { display: none; }

/* ---------- jQuery UI datepicker skin ---------- */
.ui-datepicker { padding: var(--s-2); background: var(--surface) !important; color: var(--text); border: 1px solid var(--border) !important; border-radius: var(--r) !important; box-shadow: var(--shadow-pop); font: 13px var(--font); }
.ui-datepicker .ui-widget-header { background: transparent !important; border: 0 !important; color: var(--text) !important; }
.ui-datepicker td a, .ui-datepicker td span { text-align: center !important; border: 0 !important; border-radius: 4px; background: transparent !important; color: var(--text) !important; }
.ui-datepicker td a:hover { background: var(--surface-hover) !important; }
.ui-datepicker .ui-state-highlight { background: var(--accent-soft) !important; color: var(--accent) !important; }
.ui-datepicker .ui-state-active { background: var(--accent) !important; color: var(--on-accent) !important; }

/* ---------- home redesign (2026-10-06) ---------- */
.budget { display: flex; align-items: center; gap: var(--s-2); min-width: 160px; }
.budget .progress { flex: 1; }
.budget-label { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.budget-none { color: var(--text-muted); }
.project-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-4); margin-bottom: var(--s-4); }
.project-card .card-title { margin-bottom: var(--s-3); }
.project-card-hours { font-size: 13px; color: var(--text-2); margin: var(--s-2) 0 var(--s-3); }
.download-list.is-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-2) var(--s-4); }
.download-list.is-grid li { border-bottom: 0; background: var(--surface-2); border-radius: var(--r); padding: var(--s-2) var(--s-3); }
details.downloads-card > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
details.downloads-card > summary::-webkit-details-marker { display: none; }
details.downloads-card[open] > summary .icon { transform: rotate(180deg); }
.project-table td { vertical-align: middle; }
.my-projects-other { margin: 0; padding: var(--s-2) var(--s-4); }
.field-project .booking-row-project { display: none; align-items: center; gap: var(--s-2); min-height: 36px; }
.inputrow.has-project .booking-row-project { display: flex; }
.inputrow.has-project .field-project select { display: none; }
.booking-row-change { font-size: 12px; }
.chip-wrap { display: inline-flex; align-items: center; }
/* chips: two short lines, project over task, both cut (the title has the full text) */
.chip .chip-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.25; }
.chip .chip-project, .chip .chip-task { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip .chip-project { font-size: 11px; color: var(--text-2); }
.chip { border-radius: var(--r); text-align: left; }
.user-pick { margin-bottom: var(--s-4); }
.day-entries:empty { display: none; }
.day-entries-title { margin: 0 0 var(--s-2); font-size: 14px; }
.table-compact td { padding-top: 4px; padding-bottom: 4px; }
dialog.popup { width: min(560px, calc(100vw - 32px)); padding: var(--s-4); color: var(--text); box-shadow: var(--shadow-pop); }
dialog.popup::backdrop { background: rgba(0, 0, 0, .4); }
.popup-close { float: right; font-size: 18px; }
.fav-form { display: inline; margin: 0; }
.fav-star.is-pinned .icon, .project-table .icon[role="img"] { fill: currentColor; color: var(--accent); }

/* ---------- colour coding (2026-10-08): data-pc="N" picks hue N, see ui_hue_attr() ---------- */
[data-pc="0"] { --pc: var(--hue-0); } [data-pc="1"] { --pc: var(--hue-1); } [data-pc="2"] { --pc: var(--hue-2); }
[data-pc="3"] { --pc: var(--hue-3); } [data-pc="4"] { --pc: var(--hue-4); } [data-pc="5"] { --pc: var(--hue-5); }
[data-pc="6"] { --pc: var(--hue-6); } [data-pc="7"] { --pc: var(--hue-7); } [data-pc="8"] { --pc: var(--hue-8); }
[data-pc="9"] { --pc: var(--hue-9); }
.proj-dot { display: inline-block; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--pc, var(--border-strong)); vertical-align: 0; }
.proj-label { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; }
.booking-row-project .proj-dot { margin-right: -2px; }
/* chips: tinted in the project's hue, edge in full colour */
.chip[data-pc] { border-color: color-mix(in srgb, var(--pc) 45%, var(--border)); background: color-mix(in srgb, var(--pc) var(--tint), var(--surface)); box-shadow: inset 3px 0 0 var(--pc); padding-left: 12px; }
.chip[data-pc]:hover { border-color: var(--pc); color: var(--text); background: color-mix(in srgb, var(--pc) calc(var(--tint) * 2), var(--surface)); }
/* project cards (customer home) and the project page header */
.project-card[data-pc] { border-top: 4px solid var(--pc); }
.project-card[data-pc] .card-title { display: flex; align-items: center; gap: var(--s-2); }
.project-card[data-pc] .progress:not(.is-danger) > span { background: var(--pc); }
.hbar[data-pc] .hbar-fill:not([class*="is-"]) { background: var(--pc); }
.page-header.has-hue { padding-left: var(--s-3); border-left: 4px solid var(--pc); }
/* tinted icon tile for KPIs and card titles */
.tile-icon { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--pc, var(--accent)) var(--tint), var(--surface)); color: var(--pc, var(--accent)); }
.tile-icon .icon { width: 20px; height: 20px; vertical-align: 0; }
.card-title .tile-icon { width: 28px; height: 28px; margin-right: var(--s-2); vertical-align: middle; }
.card-title .tile-icon .icon { width: 16px; height: 16px; }
.kpi.has-icon { display: flex; align-items: center; gap: var(--s-3); border-top: 3px solid var(--pc); }
.kpi-text { min-width: 0; }
/* customer home banner ("Partner Area") */
/* a blue band: --band, not the brand blue, so body-size white text keeps 4.5:1; flat, no gradient (design system) */
.hero { position: relative; overflow: hidden; margin-bottom: var(--s-5); padding: var(--s-5) var(--s-5) var(--s-5) var(--s-5); border-radius: var(--r); color: #fff; background: var(--band); }
.hero-eyebrow { margin: 0 0 var(--s-1); font: 13.6px/1.4 var(--font-eyebrow); letter-spacing: .12em; text-transform: uppercase; }
.hero h1 { margin: 0 0 var(--s-2); font-size: 26px; color: #fff; }
.hero p { margin: 0; max-width: 60ch; opacity: .92; }
.hero-meta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.hero-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: 13px; }
.hero-pill .icon { width: 15px; height: 15px; }
a.hero-pill { color: #fff; }
a.hero-pill:hover { background: rgba(255, 255, 255, .26); color: #fff; text-decoration: none; }
.hero a:focus-visible { outline-color: #fff; }
@media (max-width: 600px) { .hero { padding: var(--s-4); } .hero h1 { font-size: 22px; } }

/* ---------- print ---------- */
@media print {
	.sidebar, .topbar, .sidebar-backdrop, .page-actions, .tabs, .toolbar, .btn, .pager, .app-footer, .week-nav { display: none !important; }
	.app { display: block; }
	body { background: #fff; color: #000; }
	.card, .kpi { box-shadow: none; border-color: #ccc; break-inside: avoid; }
	.content { padding: 0; max-width: none; }
}