/* ==========================================================================
   e-Procurement portal - design system
   Light-only, print-friendly, no build step. Loaded directly from /public.
   ========================================================================== */

:root {
    --navy: #123a5e;
    --navy-dark: #0d2b46;
    --navy-light: #1d5183;
    --crimson: #a8182b;
    --crimson-dark: #85121f;

    --ink: #1a2129;
    --ink-soft: #4a5764;
    --ink-faint: #74818e;
    --line: #dfe4ea;
    --line-soft: #edf0f4;
    --paper: #ffffff;
    --ground: #f2f5f8;

    --ok: #14713d;
    --ok-bg: #e6f4ec;
    --warn: #8a5a00;
    --warn-bg: #fdf1dc;
    --danger: #a3182a;
    --danger-bg: #fbe9eb;
    --info: #1c5182;
    --info-bg: #e7f0f8;

    --radius: 4px;
    --shadow: 0 1px 2px rgba(18, 58, 94, .08), 0 4px 12px rgba(18, 58, 94, .06);
    --mono: ui-monospace, "Cascadia Mono", "Consolas", monospace;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font: 14px/1.55 "Segoe UI", Roboto, "Noto Sans", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--navy-light); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.25; font-weight: 600; color: var(--navy-dark); }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.02rem; }
h4 { font-size: .92rem; }
p { margin: 0 0 .75rem; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 1rem; }
.wrap-narrow { max-width: 860px; margin: 0 auto; padding: 0 1rem; }

/* ------------------------------------------------------------ public header */

.topbar {
    background: var(--navy-dark);
    color: #c9d8e6;
    font-size: .78rem;
    padding: .3rem 0;
}
.topbar .wrap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.topbar a { color: #e4edf5; }

.masthead { background: var(--navy); color: #fff; padding: 1rem 0; }
.masthead .wrap { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.masthead .crest {
    width: 52px; height: 52px; flex: 0 0 52px;
    border-radius: 50%;
    background: #fff;
    color: var(--navy);
    display: grid; place-items: center;
    font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em;
}
.masthead .org { flex: 1 1 320px; min-width: 0; }
.masthead .org strong { display: block; font-size: 1.22rem; font-weight: 600; }
.masthead .org span { display: block; font-size: .82rem; color: #b8cde0; }
.masthead .actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.mainnav { background: var(--navy-light); }
.mainnav .wrap { display: flex; gap: 0; flex-wrap: wrap; }
.mainnav a {
    color: #eaf2f9;
    padding: .62rem .95rem;
    font-size: .87rem;
    font-weight: 500;
    border-bottom: 3px solid transparent;
}
.mainnav a:hover { background: rgba(255, 255, 255, .1); text-decoration: none; }
.mainnav a.active { background: rgba(0, 0, 0, .18); border-bottom-color: #f0c419; }

/* --------------------------------------------------------------- app shell */

.appbar { background: var(--navy); color: #fff; padding: .55rem 0; }
.appbar .wrap { display: flex; align-items: center; gap: 1rem; }
.appbar .brand { font-weight: 600; color: #fff; font-size: 1rem; }
.appbar .brand:hover { text-decoration: none; }
.appbar .spacer { flex: 1; }
.appbar .who { font-size: .82rem; color: #c5d7e6; text-align: right; line-height: 1.3; }
.appbar .who strong { display: block; color: #fff; }

.subnav { background: #fff; border-bottom: 1px solid var(--line); }
.subnav .wrap { display: flex; gap: 0; flex-wrap: wrap; }
.subnav a {
    padding: .6rem .85rem;
    font-size: .86rem;
    color: var(--ink-soft);
    border-bottom: 3px solid transparent;
}
.subnav a:hover { color: var(--navy); text-decoration: none; }
.subnav a.active { color: var(--navy); border-bottom-color: var(--crimson); font-weight: 600; }

main { padding: 1.25rem 0 3rem; }

/* ------------------------------------------------------------------- cards */

.card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 1rem;
}
.card > header {
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--line);
    background: #fafbfd;
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    border-radius: var(--radius) var(--radius) 0 0;
}
.card > header h2, .card > header h3 { margin: 0; font-size: .95rem; }
.card > header .spacer { flex: 1; }
.card .body { padding: 1rem; }
.card .body.tight { padding: .6rem 1rem; }
.card > footer {
    padding: .6rem 1rem; border-top: 1px solid var(--line);
    background: #fafbfd; font-size: .83rem;
}

.grid { display: grid; gap: 1rem; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.layout-side { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
@media (max-width: 940px) { .layout-side { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------- stats */

.stat {
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
    padding: .8rem .9rem; box-shadow: var(--shadow);
    border-left: 3px solid var(--navy-light);
}
.stat .label { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); }
.stat .value { font-size: 1.6rem; font-weight: 600; color: var(--navy-dark); line-height: 1.15; }
.stat .hint { font-size: .76rem; color: var(--ink-faint); }
.stat.accent { border-left-color: var(--crimson); }
.stat.ok { border-left-color: var(--ok); }
.stat.warn { border-left-color: var(--warn); }

/* ------------------------------------------------------------------ tables */

.table-scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: .86rem; }
table.data th, table.data td { padding: .5rem .6rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
table.data thead th {
    background: #f6f8fa; color: var(--ink-soft); font-weight: 600;
    font-size: .74rem; text-transform: uppercase; letter-spacing: .03em;
    border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.data tbody tr:hover { background: #fbfcfe; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data td.mono { font-family: var(--mono); font-size: .82rem; }
table.data tfoot td { font-weight: 600; background: #f6f8fa; border-top: 2px solid var(--line); }
.table-compact th, .table-compact td { padding: .35rem .5rem; }

.empty { padding: 2rem 1rem; text-align: center; color: var(--ink-faint); font-size: .9rem; }

/* ------------------------------------------------------------------- pills */

.pill {
    display: inline-block; padding: .1rem .45rem; border-radius: 999px;
    font-size: .72rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
    border: 1px solid transparent;
}
.pill.live { background: var(--ok-bg); color: var(--ok); border-color: #b7dfc8; }
.pill.success { background: var(--ok-bg); color: var(--ok); border-color: #b7dfc8; }
.pill.warning { background: var(--warn-bg); color: var(--warn); border-color: #f0d9a8; }
.pill.danger { background: var(--danger-bg); color: var(--danger); border-color: #f0c2c8; }
.pill.info { background: var(--info-bg); color: var(--info); border-color: #bcd5ea; }
.pill.muted { background: #eef1f4; color: var(--ink-faint); border-color: var(--line); }

.tag {
    display: inline-block; padding: .05rem .4rem; border-radius: var(--radius);
    background: #eef2f6; color: var(--ink-soft); font-size: .73rem; border: 1px solid var(--line);
}

/* ----------------------------------------------------------------- buttons */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    padding: .42rem .85rem; border-radius: var(--radius);
    border: 1px solid var(--navy); background: var(--navy); color: #fff;
    font: inherit; font-size: .85rem; font-weight: 500; cursor: pointer;
    text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--navy-dark); border-color: var(--navy-dark); text-decoration: none; color: #fff; }
.btn:disabled, .btn.disabled { opacity: .5; cursor: not-allowed; }
.btn.ghost { background: #fff; color: var(--navy); border-color: var(--line); }
.btn.ghost:hover { background: #f2f6fa; color: var(--navy-dark); }
.btn.accent { background: var(--crimson); border-color: var(--crimson); }
.btn.accent:hover { background: var(--crimson-dark); border-color: var(--crimson-dark); }
.btn.ok { background: var(--ok); border-color: var(--ok); }
.btn.ok:hover { background: #0f5a30; border-color: #0f5a30; }
.btn.danger { background: #fff; color: var(--danger); border-color: #eabec5; }
.btn.danger:hover { background: var(--danger-bg); color: var(--danger); }
.btn.sm { padding: .22rem .5rem; font-size: .78rem; }
.btn.block { width: 100%; }
.btn-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* ------------------------------------------------------------------- forms */

.field { margin-bottom: .85rem; }
.field > label, .field-label {
    display: block; font-size: .8rem; font-weight: 600; color: var(--ink-soft); margin-bottom: .22rem;
}
.field .hint { font-size: .76rem; color: var(--ink-faint); margin-top: .2rem; }
.req { color: var(--crimson); }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=datetime-local], input[type=time], input[type=url], input[type=tel],
input[type=search], input[type=file], select, textarea {
    width: 100%; padding: .42rem .55rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: #fff; color: var(--ink); font: inherit; font-size: .87rem;
}
input:focus, select:focus, textarea:focus {
    outline: 2px solid rgba(29, 81, 131, .35); outline-offset: 0; border-color: var(--navy-light);
}
input[readonly], input:disabled, select:disabled, textarea:disabled { background: #f4f6f8; color: var(--ink-faint); }
textarea { min-height: 84px; resize: vertical; }
input.err, select.err, textarea.err { border-color: var(--danger); background: #fffafa; }

.check { display: flex; align-items: flex-start; gap: .45rem; font-size: .86rem; margin-bottom: .4rem; }
.check input { width: auto; margin-top: .2rem; flex: 0 0 auto; }

.form-grid { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.form-grid .span-2 { grid-column: span 2; }
@media (max-width: 640px) { .form-grid .span-2 { grid-column: span 1; } }

fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: .85rem 1rem; margin: 0 0 1rem; }
legend { font-size: .82rem; font-weight: 600; color: var(--navy); padding: 0 .35rem; }

/* filter bar above listings */
.filters { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-end; }
.filters .field { margin-bottom: 0; min-width: 150px; }
.filters .field.grow { flex: 1 1 220px; }

/* ------------------------------------------------------------------ alerts */

.alert {
    padding: .65rem .85rem; border-radius: var(--radius); margin-bottom: 1rem;
    border: 1px solid; font-size: .87rem;
}
.alert.success { background: var(--ok-bg); border-color: #b7dfc8; color: #0f5a30; }
.alert.error { background: var(--danger-bg); border-color: #f0c2c8; color: var(--danger); }
.alert.warning { background: var(--warn-bg); border-color: #f0d9a8; color: var(--warn); }
.alert.info { background: var(--info-bg); border-color: #bcd5ea; color: var(--info); }
.alert ul { margin: .35rem 0 0; padding-left: 1.1rem; }
.alert strong { display: block; margin-bottom: .15rem; }

/* --------------------------------------------------------------- notice UI */

.notice-row td { padding-top: .6rem; padding-bottom: .6rem; }
.notice-row .ref { font-family: var(--mono); font-size: .78rem; color: var(--ink-faint); }
.notice-row .title { font-weight: 600; color: var(--navy-dark); display: block; margin: .1rem 0; }
.notice-row .meta { font-size: .78rem; color: var(--ink-faint); }

.countdown { font-variant-numeric: tabular-nums; font-weight: 600; }
.countdown.urgent { color: var(--crimson); }
.countdown.closed { color: var(--ink-faint); font-weight: 500; }

.deadline-box {
    background: var(--navy-dark); color: #fff; border-radius: var(--radius);
    padding: .85rem 1rem; text-align: center;
}
.deadline-box .label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #a8c3da; }
.deadline-box .big { font-size: 1.55rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.deadline-box .sub { font-size: .78rem; color: #c3d6e6; }

/* definition list used on detail pages */
.dl { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: .3rem .8rem; font-size: .87rem; }
.dl dt { color: var(--ink-faint); }
.dl dd { margin: 0; color: var(--ink); }
@media (max-width: 560px) { .dl { grid-template-columns: 1fr; } .dl dt { margin-top: .5rem; font-size: .78rem; } }

/* sealed-bid banner */
.sealed {
    border: 1px dashed #b9c6d3; background: #f7fafc; border-radius: var(--radius);
    padding: 1.1rem; text-align: center; color: var(--ink-soft);
}
.sealed .lock { font-size: 1.6rem; }
.sealed strong { display: block; color: var(--navy-dark); margin: .2rem 0; }

/* checklist on the bid preparation screen */
.checklist { list-style: none; margin: 0; padding: 0; font-size: .86rem; }
.checklist li { padding: .3rem 0 .3rem 1.4rem; position: relative; border-bottom: 1px solid var(--line-soft); }
.checklist li:last-child { border-bottom: 0; }
.checklist li::before { position: absolute; left: 0; top: .3rem; font-weight: 700; }
.checklist li.done::before { content: "\2713"; color: var(--ok); }
.checklist li.todo::before { content: "\2717"; color: var(--danger); }

/* ------------------------------------------------------------------- misc */

.muted { color: var(--ink-faint); }
.small { font-size: .8rem; }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.center { text-align: center; }
.mt { margin-top: 1rem; }
.mt-sm { margin-top: .5rem; }
.mb0 { margin-bottom: 0; }
.divider { height: 1px; background: var(--line); margin: 1rem 0; border: 0; }

.pagination { display: flex; gap: .25rem; flex-wrap: wrap; list-style: none; padding: 0; margin: 1rem 0 0; font-size: .85rem; }
.pagination li a, .pagination li span {
    display: block; padding: .3rem .6rem; border: 1px solid var(--line);
    border-radius: var(--radius); background: #fff; color: var(--navy);
}
.pagination li.active span { background: var(--navy); color: #fff; border-color: var(--navy); }
.pagination li.disabled span { color: var(--ink-faint); background: #f6f8fa; }

.breadcrumb { font-size: .8rem; color: var(--ink-faint); margin-bottom: .6rem; }
.breadcrumb a { color: var(--ink-soft); }

.page-head { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.page-head .spacer { flex: 1; }
.page-head p { margin: 0; color: var(--ink-faint); font-size: .87rem; }

footer.site {
    background: var(--navy-dark); color: #b9cddf; padding: 1.5rem 0 1rem; font-size: .84rem;
    margin-top: 2rem;
}
footer.site a { color: #dce8f2; }
footer.site .cols { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
footer.site h4 { color: #fff; font-size: .88rem; margin-bottom: .4rem; }
footer.site ul { list-style: none; margin: 0; padding: 0; }
footer.site li { padding: .12rem 0; }
footer.site .legal {
    border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 1.2rem; padding-top: .7rem;
    font-size: .78rem; color: #8fa9c0;
}

/* tabs on listing pages */
.tabs { display: flex; gap: .3rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
.tabs a {
    padding: .45rem .8rem; font-size: .87rem; color: var(--ink-soft);
    border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0;
    margin-bottom: -1px;
}
.tabs a:hover { text-decoration: none; background: #f6f8fa; }
.tabs a.active { background: #fff; border-color: var(--line); color: var(--navy); font-weight: 600; }
.tabs .count { color: var(--ink-faint); font-size: .78rem; }

@media print {
    .topbar, .mainnav, .appbar, .subnav, .btn, .filters, footer.site, .no-print { display: none !important; }
    body { background: #fff; }
    .card { box-shadow: none; border-color: #999; break-inside: avoid; }
}

/* language switcher ------------------------------------------------------- */
.langswitch { display: inline-flex; gap: .3rem; align-items: center; }
.langswitch a {
    padding: .05rem .4rem; border-radius: var(--radius);
    font-size: .78rem; line-height: 1.5; color: inherit; opacity: .75;
    border: 1px solid transparent;
}
.langswitch a:hover { opacity: 1; text-decoration: none; background: rgba(255, 255, 255, .12); }
.langswitch a.on { opacity: 1; font-weight: 600; background: rgba(255, 255, 255, .18); }
/* Devanagari needs a little more line height to avoid clipped matras. */
:lang(ne) { line-height: 1.7; }

/* installable app -------------------------------------------------------- */

/* The install offer and the update notice. One slim card at the foot of the
   page: visible enough to act on, never in the way of the page itself. */
.pwa-bar {
    position: fixed; z-index: 60;
    left: 1rem; right: 1rem; bottom: 1rem;
    max-width: 30rem; margin: 0 auto;
    display: flex; align-items: center; gap: .6rem;
    padding: .7rem .8rem;
    background: var(--paper); color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: 0 6px 24px rgba(18, 58, 94, .18);
}
/* display:flex would otherwise beat the browser's own [hidden] rule, leaving
   an invisible bar sitting over the foot of every page and eating clicks. */
.pwa-bar[hidden], .pwa-offline[hidden] { display: none !important; }
.pwa-bar img { border-radius: 6px; flex: none; }
.pwa-bar-text { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.pwa-bar-text strong { display: block; font-size: .88rem; color: var(--navy-dark); }
.pwa-bar-text span { font-size: .78rem; color: var(--ink-soft); }
.pwa-bar .btn { flex: none; }

/* The offline bar sits above everything, including the masthead: whether the
   page in front of you is live is the first thing you need to know. */
.pwa-offline {
    position: fixed; z-index: 80; top: 0; left: 0; right: 0;
    padding: .4rem 1rem;
    background: var(--crimson-dark); color: #fff;
    font-size: .8rem; text-align: center;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .25);
}
body.is-offline { padding-top: 1.85rem; }

@media (max-width: 560px) {
    .pwa-bar { flex-wrap: wrap; }
    .pwa-bar-text { flex-basis: calc(100% - 2.6rem); }
    .pwa-bar .btn { flex: 1 1 auto; justify-content: center; }
}

@media print {
    .pwa-bar, .pwa-offline { display: none !important; }
}

/* --------------------------------------------------------- paired BS/AD dates */

/* One date, two calendars side by side. The AD box posts; the BS box mirrors. */
.date-pair-inputs { display: flex; gap: .4rem; flex-wrap: wrap; }
.date-pair-box { flex: 1 1 11rem; min-width: 9.5rem; display: block; }
.date-pair-box.date-pair-time { flex: 0 1 7rem; min-width: 6rem; }
.date-pair-cal {
    display: block; font-size: .68rem; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--ink-faint); margin-bottom: .12rem;
}
.date-pair .hint { display: flex; gap: .5rem; flex-wrap: wrap; }
.date-pair .hint [data-role=hint]:not(:empty) { font-weight: 600; color: var(--ink-soft); }
.date-pair-note { color: var(--ink-faint); }
.date-pair-error { font-size: .76rem; color: var(--danger); margin-top: .25rem; }

@media (max-width: 560px) {
    .date-pair-box { flex: 1 1 100%; }
}

/* The awarded row on the comparison sheet, legible in print too. */
tr.is-awarded > td { background: var(--ok-bg); font-weight: 600; }

/* ------------------------------------------------ reference-data dropdowns */

/* A select with a "+" beside it, and the one-field add row it reveals. */
.master-select-row { display: flex; gap: .35rem; align-items: stretch; }
.master-select-row select { flex: 1 1 auto; min-width: 0; }
.master-select-add {
    flex: 0 0 auto; width: 2rem; padding: 0; font-size: 1.05rem; line-height: 1;
    font-weight: 600;
}
.master-select-new { display: flex; gap: .35rem; margin-top: .35rem; flex-wrap: wrap; }
.master-select-new input { flex: 1 1 8rem; min-width: 0; }
.master-select-error {
    font-size: .76rem; color: var(--danger); margin-top: .25rem;
}

/* touched by a test */