/* =============================================================================
   Design tokens
   -----------------------------------------------------------------------------
   Single source of truth for colour, type, spacing, borders and radius.

   Every value below is measured from the customer's design workbook
   (design/Screen_-_layout_revise 06.xlsx). To re-read any of them:

       python3 tools/xlsx-preview.py "design/Screen_-_layout_revise 06.xlsx" \
               --sheet 1 --inspect A3 O5 AO5

   Two rules for anyone editing CSS in this project:
     1. No literal hex, px font-size or border-radius outside this file.
        config/mappings/fml_colors.json is the one exception -- those are the
        NEN2580/BBMI usable-area colours, which are domain data, not UI chrome.
     2. This file must load AFTER the Bootstrap CDN stylesheet. The --bs-*
        block below overrides Bootstrap's own :root declarations, and with
        equal specificity the last declaration wins.
============================================================================= */

/* -----------------------------------------------------------------------------
   Inter -- stand-in for the workbook's Aptos Display
   Aptos is a Microsoft Office font and is not licensed for web embedding, so we
   ship Inter (SIL OFL, see public/fonts/LICENSE.txt) and keep Aptos first in the
   stack: machines that have it installed still render the customer's exact font.
----------------------------------------------------------------------------- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter-latin-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter-latin-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/inter-latin-700.woff2') format('woff2');
}

:root {
    /* ---- Brand ---------------------------------------------------------- */
    --tibi-brand: #7E102C;          /* sidebar, logo strip, primary + Disapproved buttons */
    --tibi-brand-hover: #650D23;    /* derived: the workbook draws no hover states */
    --tibi-brand-accent: #A3153A;   /* Decline button; Decline/Disapproved status text */
    --tibi-nav-accent: #FFC000;     /* sidebar top-level nav labels and Setting */

    /* ---- Status --------------------------------------------------------- */
    --tibi-status-new: #D4AC0D;
    --tibi-status-assigned: #2E86C1;
    --tibi-status-wip: #1A5276;
    --tibi-status-qc: #AAB7B8;
    --tibi-status-approved: #2E4053;
    --tibi-status-disapprove: #A3153A;
    --tibi-status-pending: #7030A0;
    --tibi-status-completed: #4EA72E;
    --tibi-status-archived: #4A6B3F; /* Completed, darkened: done and put away. Not in the workbook */
    --tibi-status-total: #000000;

    /* ---- Ink and surfaces ----------------------------------------------- */
    --tibi-ink: #000000;
    --tibi-ink-muted: #383838;       /* table column headers, secondary labels */
    --tibi-surface: #FFFFFF;
    --tibi-surface-alt: #FAFAFA;     /* inset panels; not drawn in the workbook */
    --tibi-on-brand: #FFFFFF;        /* text and borders on a brand-coloured ground */
    --tibi-disabled: #7F7F7F;        /* dialog title strip */
    --tibi-disabled-soft: #BFBFBF;   /* disabled Upload button */
    --tibi-cancel: #A5A5A5;          /* Cancel button -- all five drawn in the workbook */
    --tibi-excel: #1D6F42;           /* export action -- the workbook draws the Excel logo */

    /* Floor-type badges on the FML screens. The workbook specifies no colours
       for these, so the existing palette is kept verbatim -- flagged in
       design/gap-analysis.md rather than invented. */
    --tibi-badge-unknown-bg: #FEF3C7;
    --tibi-badge-unknown-fg: #92400E;
    --tibi-badge-main-bg: #E0F2FE;
    --tibi-badge-main-fg: #075985;
    --tibi-badge-attic-bg: #F1F5F9;
    --tibi-badge-attic-fg: #334155;
    --tibi-badge-basement-bg: #EDE9FE;
    --tibi-badge-basement-fg: #5B21B6;

    /* ---- Semantic ------------------------------------------------------- */
    --tibi-positive: #00B050;        /* m2 values */
    --tibi-negative: #C00000;
    --tibi-link: #467886;

    /* ---- Rules ---------------------------------------------------------- */
    /* Priority rows. The workbook draws Prio as a checkbox and gives it no
       colour, so this is the gold of the New status at low opacity. */
    /* B5.4: a repeated address in red, the same street at another number in
       orange. The red is the customer's own, full strength -- "graag kleur
       (#CF1B1B) als project dubbel geregistreerd is" -- with white text on it
       (5.4:1); the orange stays a tint, being the milder of the two. */
    --tibi-address-duplicate: #CF1B1B;
    --tibi-address-variant: #FCEBD5;
    --tibi-address-variant-bar: #E08A17;

    --tibi-prio-row: #FDF6E0;
    --tibi-prio-row-hover: #F8ECC8;

    --tibi-rule: #D8D8D8;            /* table row separators */
    --tibi-rule-strong: #A5A5A5;     /* underline beneath the status counters */
    --tibi-rule-light: #F2F2F2;      /* vertical dividers between counters */

    /* ---- Type ----------------------------------------------------------- */
    --tibi-font: Aptos, 'Aptos Display', Inter, 'Segoe UI', system-ui, sans-serif;
    --tibi-fs-base: 11px;            /* 8pt in the workbook -- the entire UI */
    --tibi-fs-small: 10px;
    --tibi-fs-heading: 18px;         /* 14pt bold -- section headings */
    --tibi-fs-panel: 13px;           /* 10pt bold -- panel titles and tabs on the module sheets */

    /* ---- Metrics -------------------------------------------------------- */
    --tibi-sp-1: 4px;
    --tibi-sp-2: 8px;
    --tibi-sp-3: 12px;
    --tibi-sp-4: 16px;
    --tibi-radius: 0;                /* the workbook is square throughout */
    --tibi-row-h: 20px;              /* every drawn row is exactly 20px tall */
    --tibi-control-h: 24px;          /* one height for the controls in a list button bar */
    --tibi-sidebar-w: 160px;         /* merged range A:F = 26px + 5x27px */

    /* =========================================================================
       Bootstrap 5.3 remap
       Bootstrap is loaded from CDN, so its Sass cannot be recompiled. It does
       expose CSS custom properties, which is the supported override lever.
    ========================================================================= */
    --bs-body-font-family: var(--tibi-font);
    --bs-body-font-size: var(--tibi-fs-base);
    --bs-body-color: var(--tibi-ink);
    --bs-body-color-rgb: 0, 0, 0;
    --bs-body-bg: var(--tibi-surface);
    --bs-emphasis-color: var(--tibi-ink);
    --bs-secondary-color: var(--tibi-ink-muted);

    --bs-border-color: var(--tibi-rule);
    --bs-border-color-translucent: var(--tibi-rule);

    --bs-primary: #7E102C;
    --bs-primary-rgb: 126, 16, 44;

    --bs-link-color: var(--tibi-link);
    --bs-link-color-rgb: 70, 120, 134;
    --bs-link-hover-color: var(--tibi-brand);
    --bs-link-hover-color-rgb: 126, 16, 44;

    /* Square, everywhere. */
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-border-radius-xl: 0;
    --bs-border-radius-xxl: 0;
    --bs-border-radius-2xl: 0;
    --bs-border-radius-pill: 0;
}

/* -----------------------------------------------------------------------------
   Button variants
   Bootstrap compiles each .btn-* variant with literal colours rather than
   var(--bs-primary), so overriding --bs-primary alone does not recolour them.
   Each variant is remapped through its own --bs-btn-* properties instead, which
   is what lets the existing markup render correctly with no class changes.

   The mapping follows what the workbook draws for each action:
     .btn-primary   -> brand        (primary actions)
     .btn-danger    -> brand accent (Decline and Disapproved: the workbook fills
                                     both confirm buttons #A3153A, not #7E102C)
     .btn-secondary -> slate        (Assign, Registration)
     .btn-warning   -> brand        (Disapprove on the partner overview)
     .btn-success   -> slate        (Approve)
     .btn-light     -> cancel grey  (Cancel)
----------------------------------------------------------------------------- */
.btn-primary,
.btn-warning {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--tibi-brand);
    --bs-btn-border-color: var(--tibi-brand);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--tibi-brand-hover);
    --bs-btn-hover-border-color: var(--tibi-brand-hover);
    --bs-btn-focus-shadow-rgb: 126, 16, 44;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--tibi-brand-hover);
    --bs-btn-active-border-color: var(--tibi-brand-hover);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--tibi-disabled-soft);
    --bs-btn-disabled-border-color: var(--tibi-disabled-soft);
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--tibi-brand-accent);
    --bs-btn-border-color: var(--tibi-brand-accent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--tibi-brand);
    --bs-btn-hover-border-color: var(--tibi-brand);
    --bs-btn-focus-shadow-rgb: 163, 21, 58;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--tibi-brand);
    --bs-btn-active-border-color: var(--tibi-brand);
}

.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--tibi-status-approved);
    --bs-btn-border-color: var(--tibi-status-approved);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #22303d;
    --bs-btn-hover-border-color: #22303d;
    --bs-btn-focus-shadow-rgb: 46, 64, 83;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #22303d;
    --bs-btn-active-border-color: #22303d;
}

/* Confirming actions (Approve, Save, Convert). The workbook paints Approved in
   slate, not green -- Bootstrap's default #198754 is outside the palette. */
.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--tibi-status-approved);
    --bs-btn-border-color: var(--tibi-status-approved);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #22303d;
    --bs-btn-hover-border-color: #22303d;
    --bs-btn-focus-shadow-rgb: 46, 64, 83;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #22303d;
    --bs-btn-active-border-color: #22303d;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--tibi-disabled-soft);
    --bs-btn-disabled-border-color: var(--tibi-disabled-soft);
}

/* Neutral / dismissing actions, drawn as the grey "Cancel" button. */
/* The bare Excel logo, kept for the CSV *upload* the workbook marks with it
   (revision 07b writes export out as text). Nothing uses it yet. */
.btn-csv-upload {
    --bs-btn-color: var(--tibi-excel);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--tibi-excel);
    --bs-btn-hover-bg: var(--tibi-rule-light);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--tibi-excel);
    --bs-btn-active-bg: var(--tibi-rule-light);
    --bs-btn-active-border-color: transparent;
    font-size: var(--tibi-fs-heading);
    line-height: 1;
}

.btn-light {
    --bs-btn-color: var(--tibi-ink);
    --bs-btn-bg: var(--tibi-cancel);
    --bs-btn-border-color: var(--tibi-cancel);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--tibi-ink-muted);
    --bs-btn-hover-border-color: var(--tibi-ink-muted);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--tibi-ink-muted);
    --bs-btn-active-border-color: var(--tibi-ink-muted);
}

.btn-outline-primary {
    --bs-btn-color: var(--tibi-brand);
    --bs-btn-border-color: var(--tibi-brand);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--tibi-brand);
    --bs-btn-hover-border-color: var(--tibi-brand);
    --bs-btn-focus-shadow-rgb: 126, 16, 44;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--tibi-brand);
    --bs-btn-active-border-color: var(--tibi-brand);
}

/* -----------------------------------------------------------------------------
   Forms
   The workbook draws inputs as a label with a single underline -- no box, no
   fill, no radius. Bootstrap's box outline is stripped back to that bottom rule.
----------------------------------------------------------------------------- */
.form-control,
.form-select {
    --bs-body-font-size: var(--tibi-fs-base);
    border: 0;
    border-bottom: 1px solid var(--tibi-ink);
    border-radius: 0;
    padding: var(--tibi-sp-1) 0;
    background-color: transparent;
    font-size: var(--tibi-fs-base);
}

.form-control:focus,
.form-select:focus {
    border-bottom-color: var(--tibi-brand);
    box-shadow: none;
    background-color: transparent;
}

.form-label {
    margin-bottom: 0;
    font-size: var(--tibi-fs-base);
    font-weight: 700;
    color: var(--tibi-ink);
}

.form-check-input {
    border-radius: 0;
    border-color: var(--tibi-ink);
}

.form-check-input:checked {
    background-color: var(--tibi-brand);
    border-color: var(--tibi-brand);
}

.form-check-input:focus {
    border-color: var(--tibi-brand);
    box-shadow: none;
}

/* -----------------------------------------------------------------------------
   Tables
   Horizontal rules only: the workbook has no vertical grid lines, no striping
   and no filled header band. .table-bordered / .table-striped / .table-dark are
   neutralised here so the existing markup renders correctly; the classes get
   removed from the blades in the layout stage.
----------------------------------------------------------------------------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--tibi-rule);
    --bs-table-striped-bg: transparent;
    --bs-table-striped-color: var(--tibi-ink);
    --bs-table-hover-bg: rgba(0, 0, 0, 0.03);
    --bs-table-color: var(--tibi-ink);

    font-size: var(--tibi-fs-base);
    border-color: var(--tibi-rule);
}

.table > :not(caption) > * > * {
    padding: var(--tibi-sp-1) var(--tibi-sp-2);
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid var(--tibi-rule);
    background-color: transparent;
}

.table > thead > tr > th {
    font-weight: 700;
    color: var(--tibi-ink-muted);
    border-bottom: 2px solid var(--tibi-rule);
    vertical-align: bottom;
}

/* .table-dark on a <thead> would repaint it near-black; the workbook draws the
   header on the page background. */
.table > .table-dark {
    --bs-table-bg: transparent;
    --bs-table-color: var(--tibi-ink-muted);
    --bs-table-border-color: var(--tibi-rule);
}

/* -----------------------------------------------------------------------------
   Pagination and modals
----------------------------------------------------------------------------- */
.page-item.active .page-link {
    background-color: var(--tibi-brand);
    border-color: var(--tibi-brand);
    color: #fff;
}

.page-link {
    color: var(--tibi-brand);
    border-color: var(--tibi-rule);
    border-radius: 0;
}

.page-link:hover,
.page-link:focus {
    background-color: var(--tibi-brand-hover);
    border-color: var(--tibi-brand-hover);
    color: #fff;
    box-shadow: none;
}

.modal-content,
.card,
.dropdown-menu {
    border-radius: 0;
}

/* -----------------------------------------------------------------------------
   Tabs
   Measured from "Mod. - BBMI" H36:AA36 -- the Classified floors / Room list /
   Classification summary strip. Flat 10pt text on a shared 2px #A5A5A5 rule,
   separated by 1px hairlines; the active tab is bold, the inactive ones italic.
   No boxes, no rounded corners, no raised tab.
----------------------------------------------------------------------------- */
.nav-tabs {
    border-bottom: 2px solid var(--tibi-rule-strong);
}

.nav-tabs .nav-link {
    padding: var(--tibi-sp-1) var(--tibi-sp-3);
    border: 0;
    border-left: 1px solid var(--tibi-rule);
    border-radius: 0;
    background: transparent;
    font-size: var(--tibi-fs-panel);
    font-style: italic;
    color: var(--tibi-ink-muted);
}

.nav-tabs .nav-item:first-child .nav-link {
    border-left: 0;
    padding-left: 0;
}

.nav-tabs .nav-link:hover {
    border-color: var(--tibi-rule);
    color: var(--tibi-ink);
}

.nav-tabs .nav-link.active {
    background: transparent;
    font-style: normal;
    font-weight: 700;
    color: var(--tibi-ink-muted);
}

/* -----------------------------------------------------------------------------
   File inputs
   -----------------------------------------------------------------------------
   One control for every upload in the app. The browser's default file picker is
   a rounded grey pill, which is the one Bootstrap component that ignores
   --bs-border-radius: it is drawn by the browser, not by CSS, and is reachable
   only through ::file-selector-button. Left alone it puts a rounded button in a
   design that is square throughout, so it is restyled here rather than worked
   around per screen.

   Screens used to work around it: the FML and WWS uploads each hid the real
   input and drove it from a <label class="btn">, which gave three different
   pickers on three screens. They now use this control. The compact attach
   affordances -- the paperclip on a project note and on a report row -- are
   deliberately not this: they are icon buttons inside a table row or a comment
   box, where a full-width picker does not fit.
----------------------------------------------------------------------------- */
.form-control[type="file"] {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.9;
}

.form-control[type="file"]::file-selector-button {
    margin: 0 var(--tibi-sp-2) 0 0;
    padding: var(--tibi-sp-1) var(--tibi-sp-3);
    border: 0;
    border-radius: var(--tibi-radius);
    background: var(--tibi-status-approved);
    color: var(--tibi-on-brand);
    font-family: var(--tibi-font);
    font-size: var(--tibi-fs-base);
    line-height: inherit;
    cursor: pointer;
}

.form-control[type="file"]:hover::file-selector-button {
    background: var(--tibi-brand);
}

.form-control[type="file"]:disabled::file-selector-button {
    background: var(--tibi-disabled-soft);
    cursor: default;
}