/*
 * BC Signage theme, following Bella Center Copenhagen's identity (bellacenter.dk):
 * warm off-white ground, near-black ink, deep olive (#2e3629) for actions and chrome,
 * and the signature lemon (#ffff77) as the "state" colour for active and selected things.
 *
 * --brand-* are RGB triplets so Tailwind can apply opacity modifiers (bg-brand-500/20).
 * The scale runs lemon (50–200) into olive (500–950): light steps are highlights, dark steps are ink.
 * Keep Branding:PrimaryColor in appsettings.json in sync (used in mails).
 *
 * Typeface: Bella Center uses Nationale (licensed). It is first in the stack, so dropping licensed
 * files into /fonts and adding @font-face rules switches the app over; Hanken Grotesk stands in.
 */
:root {
    --brand-50: 255 255 230;
    --brand-100: 255 255 196;
    --brand-200: 255 255 119;
    --brand-300: 166 161 158;
    --brand-400: 109 117 98;
    --brand-500: 74 84 66;
    --brand-600: 46 54 41;
    --brand-700: 36 43 32;
    --brand-800: 29 35 26;
    --brand-900: 23 28 21;
    --brand-950: 15 18 13;

    --lemon: #ffff77;
    --olive: #2e3629;
    --olive-2: #3a4434;
    --olive-3: #48533f;
    --ink: #191919;
    --muted: #66625e;
    --line: #e2e0df;
    --line-soft: #ecebe9;
    --sand: #cfc9ad;
    --stone: #a6a19e;
    --bg: #f6f5f5;
}

[x-cloak] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body { color: var(--ink); background: var(--bg); font-feature-settings: "ss01"; }
::selection { background: var(--lemon); color: var(--ink); }
:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; }
a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
.table, .tabular, input[type=number] { font-variant-numeric: tabular-nums; }

* { scrollbar-color: #c9c6c3 transparent; scrollbar-width: thin; }
.sidebar * { scrollbar-color: var(--olive-3) transparent; }

h1, h2, h3 { text-wrap: balance; letter-spacing: -0.015em; }

.eyebrow { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); font-weight: 500; }

/* Status badges: small and squared like Bella Center's labels, tones drawn from its theme palette. */
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; line-height: 18px; border-radius: 2px; padding: 1px 8px; white-space: nowrap; border: 1px solid transparent; }
.badge-green { background: #e6f2ea; color: #1d6a3f; border-color: #c9e2d2; }
.badge-red { background: #fbe9e7; color: #a8261b; border-color: #f2ccc7; }
.badge-blue { background: #e8eced; color: #3b4749; border-color: #cdd5d6; }
.badge-orange { background: #f3f0e4; color: #6b5a1c; border-color: #e0d9bd; }
.badge-purple { background: var(--lemon); color: var(--ink); border-color: #e6e65c; }
.badge-gray { background: #efedeb; color: #4a4643; border-color: var(--line); }

.card { background: #fff; border: 1px solid var(--line); border-radius: 4px; }
a.card, .card[href] { transition: border-color .15s; }

/* Buttons: olive with white text is Bella Center's CTA. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 2px; font-size: 14px; font-weight: 500; transition: background .15s, border-color .15s, color .15s; white-space: nowrap; border: 1px solid transparent; }
.btn-primary { background: var(--olive); color: #fff; }
.btn-primary:hover:not(:disabled) { background: #1f251b; }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover:not(:disabled) { background: var(--lemon); }
.btn-danger { background: #fff; color: #a8261b; border-color: #f2ccc7; }
.btn-danger:hover:not(:disabled) { background: #fbe9e7; }
.btn-success { background: #1d6a3f; color: #fff; }
.btn-success:hover:not(:disabled) { background: #15532f; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.input { width: 100%; height: 42px; padding: 0 12px; font-size: 14px; color: var(--ink); border: 1px solid #c9c6c3; border-radius: 2px; background: #fff; transition: border-color .15s, box-shadow .15s; }
textarea.input { height: auto; padding: 10px 12px; }
.input::placeholder { color: #8a8581; }
.input:hover { border-color: var(--stone); }
.input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--lemon); }
input[type=checkbox], input[type=radio] { accent-color: var(--olive); }
.label { display: block; font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 6px; }
.hint { font-size: 12.5px; color: var(--muted); }

.table { width: 100%; font-size: 14px; }
.table th { text-align: left; font-size: 11px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); background: var(--bg); padding: 10px 14px; border-bottom: 1px solid var(--line); }
.table td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #fcfcec; }

.deadline-urgent, .deadline-overdue { background: #a8261b; color: #fff; }
.deadline-high { background: #fbe9e7; color: #a8261b; }
.deadline-soon { background: var(--lemon); color: var(--ink); }
.deadline-normal { background: #efedeb; color: #4a4643; }
.deadline-none { background: #e6f2ea; color: #1d6a3f; }

.thumb { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--bg); border-radius: 2px; }

.progress { height: 6px; background: var(--line-soft); border-radius: 0; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--olive); }

/* Sidebar: deep olive, lemon for the active page (Bella Center's "state" colour). */
.sidebar { background: var(--olive); color: #d9dcd3; }
.sidebar .navlabel { font-size: 11px; letter-spacing: 1.2px; color: #a3ab98; text-transform: uppercase; font-weight: 500; }
.sidebar .navbtn { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 8px 12px; border-radius: 2px; color: #d9dcd3; transition: background .15s, color .15s; }
.sidebar .navbtn:hover { background: var(--olive-2); color: #fff; }
.sidebar .navbtn.active { background: var(--lemon); color: var(--ink); font-weight: 500; }
.sidebar .navbtn svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .8; }
.sidebar .navbtn.active svg { opacity: 1; }
.sidebar :focus-visible { outline-color: var(--lemon); }
.sidebar details > summary { list-style: none; cursor: pointer; }
.sidebar details > summary::-webkit-details-marker { display: none; }
.sidebar details[open] > summary .chev { transform: rotate(90deg); }

/* The stepped lemon block from bellacenter.dk's hero, used on the sign-in page. */
.bc-block {
    background: var(--lemon); color: var(--ink);
    clip-path: polygon(0 32px, 6% 32px, 6% 0, 44% 0, 44% 14px, 62% 14px, 62% 0, 74% 0, 74% 22px, 100% 22px, 100% 100%, 0 100%);
    padding-top: 32px;
}

@media print {
    .no-print { display: none !important; }
    body { background: #fff; }
    main { margin-left: 0 !important; }
    .print-break { break-after: page; }
    .print-avoid { break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* iPad-friendly touch targets on Site-Visit and Onsite */
.touch .btn { height: 46px; padding: 0 18px; font-size: 15px; }
.touch .input { height: 48px; font-size: 16px; }

/* asp-validation-summary="All" always renders a placeholder list, so [&:empty]:hidden never applies.
   Hide the summary while it holds no errors (client validation swaps the class when it does). */
.validation-summary-valid {
    display: none;
}