/* beneluxbc.com — tenant overrides, loaded AFTER /assets/app.css.
 *
 * Every value here was read out of beneluxbc.com's own theme stylesheet
 * (static/frontend/Hiddentechies/bizkick/en_US/css/styles-m.css), not chosen to
 * taste. Provenance is noted per block so the next person can check it or drop it.
 *
 * CLAUDE.md §4.7: master markup can change and silently break these overrides.
 * That is why this file is deliberately short and touches only classes that
 * already exist in public/assets/app.css — every selector below is in that file.
 * If a login screen or card ever looks wrong after a master change, look here first.
 *
 * WHY EVERY SELECTOR IS PREFIXED WITH `body`: layout.php links this file in the
 * <head>, but the pages ported from BCD carry their own inline <style> in the
 * <body> — later in the document, and written with class-only selectors. At
 * equal specificity the later rule wins, so an unprefixed `.kpi-card.kpi-birthday`
 * here lost to BCD's `#8e44ad` purple and none of the Benelux palette applied.
 * `body .kpi-card.kpi-birthday` is one element more specific and wins wherever it
 * appears. This is the reason, and it is not cosmetic — do not "tidy" the prefix
 * away. !important would also work and is worse: it cannot then be overridden by
 * anything, including a later fix in this same file.
 */

/* Typography. Their body rule is
 *   body{color:#41362f;font-family:'Open Sans',...;font-weight:400;
 *        line-height:1.42857143;font-size:1.4rem}
 * on a 10px rem base, i.e. 14px. app.css sets the family from --brand-font
 * already, so only the size, leading and ink are set here. */
body {
    font-size: 14px;
    line-height: 1.42857143;
    color: #41362f;
}

/* Their headings are LIGHT, not bold: h1{font-weight:300;line-height:1.1}.
 * This is the single most recognisable thing about their pages. */
body h1 {
    font-weight: 300;
    line-height: 1.1;
}

/* Square corners. Their theme is flat: border-radius:0 appears 61 times and is
 * the dominant value; inputs are the exception at 1px. app.css rounds cards to
 * 10px, buttons to 6px and alerts to 8px, which reads as a different product. */
.dash-card,
.kpi-card,
.alert-bar,
.btn-save,
.btn-cancel,
.pill,
.toolbar input[type="search"],
body .cmvx-menu .menu-search input {
    border-radius: 0;
}

/* Inputs: background:#fff;border:1px solid #e1e1e1;border-radius:1px */
body .form-row input {
    border: 1px solid #e1e1e1;
    border-radius: 1px;
    padding: 8px 10px;
    background: #fff;
}

/* Buttons. Their base button is
 *   background:#eee;border:1px solid #e1e1e1;color:#333;font-weight:700;
 *   padding:12px 18px
 * and the primary action is the one that turns orange:
 *   .action-primary:hover{background:#f66d1f;...;color:#fff}
 * So the save button rests dark and goes to the brand orange on hover, rather
 * than sitting orange permanently as app.css has it. */
.btn-save,
body .btn-cancel {
    font-weight: 700;
    padding: 12px 18px;
}
body .btn-save {
    background: #41362f;
    color: #fff;
}
body .btn-save:hover {
    background: var(--brand-accent);
}
body .btn-cancel {
    background: #eee;
    border: 1px solid #e1e1e1;
    color: #333;
}

/* Links are the brand orange and are not underlined:
 *   a,.alink{color:#f66d1f;text-decoration:none}
 * The menu is excluded — its links are navigation, not body links, and orange
 * across a whole nav bar is not what their site does. */
body a {
    color: var(--brand-accent);
    text-decoration: none;
}
body a:hover {
    text-decoration: underline;
}

/* ...but NOT in navigation, on buttons, or on the logo. The rule above comes
 * from beneluxbc.com's body links; BCD's navbar, offcanvas and buttons never
 * underline on hover, and applying it there was a difference from the original
 * rather than a port of it. */
body .uk-navbar-nav a:hover,
body .uk-navbar-item:hover,
body .uk-nav a:hover,
body .uk-logo:hover,
body .uk-button:hover,
body .cmvx-menu a:hover,
body .btn-save:hover,
body .btn-cancel:hover {
    text-decoration: none;
}
body .cmvx-menu li a {
    color: #41362f;
}

/* Their navigation strip sits on a light grey: .nav-sections{background:#f5f5f5} */
body .cmvx-menu ul {
    background: #f5f5f5;
}

/* ── Benelux palette ──────────────────────────────────────────────────────
 * The three national flag colours, named once here and referenced everywhere
 * below. Defining them as custom properties rather than repeating hex literals
 * means a future adjustment - a darker Dutch blue, say - is one edit, and it
 * also documents WHICH country each colour belongs to at the point of use.
 *
 * These are the official flag specifications, not approximations:
 *   Netherlands  red #AE1C28   white  blue #21468B
 *   Belgium      black #000000  yellow #FDDA24  red #EF3340
 *   Luxembourg   red #ED2939   white  light blue #00A1DE
 *
 * They are deliberately SEPARATE from --brand-primary / --brand-accent, which
 * master renders from config.php: those two say "this tenant's identity", these
 * six say "this specific flag". config.php points primary at the Dutch blue and
 * accent at the Belgian red, so the two sets agree - but a page wanting the
 * Luxembourg blue should ask for it by name, not reach for an accent that
 * happens to be red today.
 */
:root {
    --nl-red:    #AE1C28;
    --nl-blue:   #21468B;
    --be-black:  #000000;
    --be-yellow: #FDDA24;
    --be-red:    #EF3340;
    --lu-red:    #ED2939;
    --lu-blue:   #00A1DE;

    /* One derived shade, for the header gradient's far end. */
    --nl-blue-dark: #16305e;
}

/* The ported BCD pages carry their own inline <style> with the original's
 * colours hardcoded - the welcome bar's #222->#444 gradient and the KPI cards'
 * blue/green/purple accents. A brand token cannot reach those, so they are
 * overridden here, which is exactly what §4.7 provides custom.css for.
 *
 * One flag colour per card, so the row reads as the three countries. */
/* The top banner deliberately keeps BCD's original black gradient (#222 -> #444,
 * declared in each ported page's own inline <style>). Jan's call: the flag
 * colours belong on the accents, and a dark banner is what carries the logo and
 * the community name. Nothing is overridden here - the absence IS the decision,
 * so do not "restore" a Benelux gradient later thinking it was forgotten. */

body .kpi-card.kpi-members { border-left-color: var(--nl-blue); }
body .kpi-card.kpi-event { border-left-color: var(--be-yellow); }
body .kpi-card.kpi-birthday { border-left-color: var(--be-red); }
body .kpi-card.kpi-company { border-left-color: var(--lu-blue); }
body .kpi-card.kpi-active { border-left-color: var(--nl-red); }

/* The active navbar item and primary actions follow the accent, so they pick
   up the Belgian red rather than BCD's blue underline. */
body .cmvx-menu li.is-active a { box-shadow: inset 0 -3px 0 var(--brand-accent); }
body .uk-navbar-nav > li.uk-active > a { color: var(--brand-accent); }

/* ── BCD's own accent palette, remapped ───────────────────────────────────
 * The ported pages style cards with .dash-card.accent-* and status pills with
 * .org-*, in BCD's colours: green #32d296, orange #faa05a, purple #8e44ad,
 * blue #1e87f0. GREEN, ORANGE AND PURPLE ARE IN NONE OF THE THREE FLAGS -
 * Netherlands is red/white/blue, Belgium black/yellow/red, Luxembourg
 * red/white/light blue - so each is remapped onto a colour that is.
 *
 * The class NAMES stay BCD's, because the ported markup writes them; only what
 * they resolve to changes. A card asking for "accent-green" gets Luxembourg
 * blue, which is the nearest thing to a fresh, positive accent in this palette.
 */
body .dash-card.accent-dark   { border-top-color: var(--be-black); }
body .dash-card.accent-green  { border-top-color: var(--lu-blue); }
body .dash-card.accent-blue   { border-top-color: var(--nl-blue); }
body .dash-card.accent-orange { border-top-color: var(--be-yellow); }
body .dash-card.accent-red    { border-top-color: var(--be-red); }
body .dash-card.accent-purple { border-top-color: var(--nl-red); }

body .org-pill.org-bcd { background: var(--nl-blue); color: #fff; }
body .org-pill.org-bbc { background: #999; color: #fff; }
body .org-pill.org-hon { background: var(--nl-red); color: #fff; }

/* BCD's "all clear" / delta indicators are green and red. The red is a flag
   colour already; the green is not, so it becomes the Luxembourg blue. */
body .kpi-up { color: var(--lu-blue); }
body .kpi-down { color: var(--be-red); }

/* The semantic state colours, mapped onto the flags. These reach the style=""
   attributes in the ported markup, which no selector can touch - it is why
   "All clear" was still green on a palette that has no green in it. */
:root {
    --state-ok:      var(--lu-blue);
    --state-warn:    var(--be-yellow);
    --state-alert:   var(--be-red);
    --state-info:    var(--nl-blue);
    --state-special: var(--nl-red);
}