/* ─────────────────────────────────────────────────────────────────────────────
 * Florin theme — apothecary editorial layered over OpenBoxes legacy GSP pages.
 *
 * Visual brief: cream paper, brown ink, gold marginalia. Inspired by the way
 * Aesop and Hermès build their utility surfaces — most of the page is paper,
 * accents are reserved for actions and hairline rules. Dark brown is used for
 * one place only (the global navbar at the top); never wholesale across panels
 * or tables. Tabular content reads as a printed ledger.
 *
 * Loaded AFTER openboxes.css in custom.gsp so these declarations win the
 * cascade. The login screen has its own block further below — leave it alone.
 * ────────────────────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,300..700,0..100,0..1;1,9..144,300..700,0..100,0..1&family=IBM+Plex+Mono:wght@300;400;500;600&display=swap");

:root {
    --florin-primary:        #3d2200;
    --florin-primary-dark:   #2a1700;
    --florin-secondary:      #6b3a00;
    --florin-accent:         #bb9668;
    --florin-accent-soft:    #d4b690;
    --florin-bg:             #f8f5f0;
    --florin-surface:        #ffffff;
    --florin-text:           #212529;
    --florin-text-muted:     #5a4a35;
    --florin-border:         #e3d9c8;
    --florin-success:        #28a745;
    --florin-danger:         #dc3545;
    --florin-warning:        #ffc107;
    --florin-info:           #17a2b8;

    /* Apothecary palette (alongside the existing variables). Cream paper +
       brown ink + a single soft accent. Used by in-app surfaces. */
    --florin-paper:          #f6efe2;
    --florin-paper-2:        #fbf6ec;
    --florin-paper-rule:     rgba(61, 34, 0, 0.16);
    --florin-paper-rule-2:   rgba(61, 34, 0, 0.08);
    --florin-ink:            #2a1700;
    --florin-ink-soft:       #6b4a25;

    /* Override OpenBoxes' default blue token so anything that still references
       --blue-primary picks up brown without us having to chase every component. */
    --blue-primary:          var(--florin-primary);
    --blue-500:              var(--florin-secondary);
    --blue-700:              var(--florin-primary-dark);
}

/* ── Page surface ───────────────────────────────────────────────────────── */
html, body {
    font-family: "Fraunces", "Iowan Old Style", "Palatino", "Georgia", serif !important;
    font-variation-settings: "opsz" 14, "SOFT" 50, "WONK" 0;
    color: var(--florin-ink);
    background: var(--florin-paper);
    /* Very fine paper grain — quieter than the login screen, just enough to
       kill the dead-flat-white feel without distracting the eye. */
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.42  0 0 0 0 0.27  0 0 0 0 0.05  0 0 0 0.07 0'/></filter><rect width='100%25' height='100%25' filter='url(%23p)'/></svg>");
    background-attachment: fixed;
}

#bd, #yui-main, #content,
#doc3, #doc4, .body, .yui-b {
    background: transparent;
}

/* Editorial typography for headings everywhere except inside the navbar. */
h1, h2, h3, h4 {
    font-family: "Fraunces", serif;
    font-variation-settings: "opsz" 36, "SOFT" 70, "WONK" 0;
    font-weight: 400;
    color: var(--florin-ink);
    letter-spacing: -0.005em;
}
h1 { font-size: 32px; line-height: 1.1; }
h2 { font-size: 22px; line-height: 1.2; }
h3 { font-size: 18px; line-height: 1.25; }

a, a:visited {
    color: var(--florin-secondary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 120ms ease, border-bottom-color 160ms ease;
}
a:hover, a:focus {
    color: var(--florin-primary-dark);
    border-bottom-color: var(--florin-accent);
}

/* Anything calling itself a "label" sentence — small-caps mono. */
label, .label, .field-label, dt {
    font-family: "IBM Plex Mono", "JetBrains Mono", "SF Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--florin-ink-soft);
    font-weight: 500;
}

/* ── Top navbar (the one place dark brown is allowed) ───────────────────── */
#main-wrapper.navbar,
#main-wrapper {
    background-color: var(--florin-primary) !important;
    border-bottom: 1px solid var(--florin-accent);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}
#main-wrapper a,
#main-wrapper .navbar-nav > li > a,
#main-wrapper .nav-link,
#main-wrapper .location-chooser__button,
#main-wrapper .location-chooser__button-title,
#main-wrapper .location-chooser__button-tag {
    color: var(--florin-accent) !important;
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
/* Hover state on legacy navbar — match React shell exactly so the user
   doesn't see different hover colors moving between React and GSP pages. */
#main-wrapper .nav-item:hover,
#main-wrapper .navbar-nav > .dropdown.nav-item:hover,
#main-wrapper .nav-item > a:hover,
#main-wrapper .nav-item > button:hover,
#main-wrapper .nav-link:hover,
#main-wrapper .dropdown:hover,
#main-wrapper .dropdown.show,
#main-wrapper .location-chooser__button:hover,
#main-wrapper .navbar-icons a:hover,
#main-wrapper .navbar-icons .menu-icon:hover {
    background-color: var(--florin-primary-dark) !important;
}
#main-wrapper .nav-item:hover > a,
#main-wrapper .nav-item:hover > button,
#main-wrapper .nav-item > a:hover,
#main-wrapper .nav-link:hover,
#main-wrapper .navbar-icons a:hover,
#main-wrapper .navbar-icons a:hover i {
    color: var(--florin-accent-soft) !important;
}
#main-wrapper .dropdown:hover .dropdown-menu,
#main-wrapper .dropdown.show .dropdown-menu {
    color: var(--florin-ink) !important;
}

.megamenu > li > a {
    color: var(--florin-accent) !important;
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.megamenu > li.active > a,
.megamenu > li:hover > a {
    background-color: var(--florin-primary-dark) !important;
    color: var(--florin-accent-soft) !important;
}
.megamenu .dropdown-menu,
.megamenu .submenu,
#main-wrapper .dropdown-menu {
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid var(--florin-paper-rule) !important;
    border-top: 2px solid var(--florin-accent) !important;
    border-radius: 0 !important;
    box-shadow: 0 12px 28px rgba(61, 34, 0, 0.18) !important;
    color: var(--florin-ink) !important;
}
.megamenu .dropdown-menu a,
#main-wrapper .dropdown-menu a {
    color: var(--florin-ink) !important;
    background: transparent !important;
    background-image: none !important;
    font-family: "Fraunces", serif !important;
    font-size: 14px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
}
.megamenu .dropdown-menu a:hover,
#main-wrapper .dropdown-menu a:hover {
    background: var(--florin-paper) !important;
    color: var(--florin-primary) !important;
}

.navbar-icons i,
.navbar-icons a {
    color: var(--florin-accent) !important;
}

/* ── Buttons (deep brown ink) ───────────────────────────────────────────── */
.button, .btn, button.button, button.btn,
.primary-button, input[type="submit"].button {
    background: linear-gradient(180deg, #4a2a05, #3d2200 60%, #2a1700) !important;
    background-image: linear-gradient(180deg, #4a2a05, #3d2200 60%, #2a1700) !important;
    border: 1px solid var(--florin-primary-dark) !important;
    color: #fbeed5 !important;
    border-radius: 2px;
    padding: 8px 18px;
    font-family: "Fraunces", serif !important;
    font-style: italic;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.02em;
    text-transform: none;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 6px 14px rgba(61, 34, 0, 0.12);
    transition: filter 160ms ease, transform 120ms ease, box-shadow 160ms ease;
}
.button:hover, .btn:hover, .primary-button:hover,
button.button:hover, button.btn:hover {
    filter: brightness(1.08);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 10px 22px rgba(61, 34, 0, 0.18);
}
.button:active, .btn:active { transform: translateY(1px); }
.button:focus-visible, .btn:focus-visible {
    outline: 2px solid var(--florin-accent);
    outline-offset: 3px;
}
.btn-secondary, .button.secondary {
    background: var(--florin-paper-2) !important;
    background-image: none !important;
    border: 1px solid var(--florin-primary-dark) !important;
    color: var(--florin-primary-dark) !important;
    box-shadow: none;
}
.btn-secondary:hover, .button.secondary:hover {
    background: var(--florin-accent-soft) !important;
    color: var(--florin-primary-dark) !important;
}

/* Highlight rows / selected items — gentle wash, not a slab. */
.highlight, .selected {
    background-color: rgba(187, 150, 104, 0.18) !important;
    color: var(--florin-primary-dark) !important;
}

/* ── Tables read like a printed ledger ──────────────────────────────────── */
table.list, table.dataTable, .table {
    border-collapse: collapse;
    width: 100%;
    background: transparent;
    border: 0;
    font-family: "Fraunces", serif;
    font-variation-settings: "opsz" 14, "SOFT" 60;
    font-size: 14px;
}
table.list thead, table.dataTable thead, .table thead {
    background: transparent;
}
table.list th, table.dataTable thead th, .table thead th {
    background: transparent !important;
    color: var(--florin-ink) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--florin-ink) !important;
    font-family: "IBM Plex Mono", monospace !important;
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 12px 14px 10px;
    text-align: left;
}
table.list td, table.dataTable tbody td, .table tbody td {
    border: 0;
    border-bottom: 1px solid var(--florin-paper-rule-2) !important;
    padding: 12px 14px;
    color: var(--florin-ink);
    background: transparent;
}
table.list tbody tr:hover,
table.dataTable tbody tr:hover,
.table tbody tr:hover {
    background-color: rgba(187, 150, 104, 0.10);
}
table.list tbody tr:nth-child(even),
table.dataTable tbody tr:nth-child(even),
.table tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.35);
}

/* DataTables furniture — search, pagination, info — set in mono small-caps. */
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--florin-ink-soft);
    padding: 10px 0;
}
.dataTables_wrapper .paginate_button {
    border: 1px solid var(--florin-paper-rule) !important;
    background: var(--florin-paper-2) !important;
    color: var(--florin-ink) !important;
    padding: 6px 12px !important;
    margin: 0 2px;
    border-radius: 0 !important;
}
.dataTables_wrapper .paginate_button.current,
.dataTables_wrapper .paginate_button:hover {
    background: var(--florin-primary) !important;
    color: var(--florin-paper) !important;
    border-color: var(--florin-primary-dark) !important;
}

/* ── Panels (.box) — paper cards, no slab headers ───────────────────────── */
.box {
    background: var(--florin-surface);
    border: 1px solid var(--florin-paper-rule);
    border-top: 2px solid var(--florin-accent);
    border-radius: 0;
    box-shadow: 0 1px 0 rgba(61, 34, 0, 0.04), 0 12px 24px rgba(61, 34, 0, 0.05);
    padding: 0;
    overflow: hidden;
}
.box > * { padding-left: 22px; padding-right: 22px; }
.box h2 {
    display: block !important;
    background: transparent !important;
    color: var(--florin-ink) !important;
    margin: 0 !important;
    padding: 18px 22px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--florin-paper-rule) !important;
    font-family: "Fraunces", serif !important;
    font-style: italic !important;
    font-variation-settings: "opsz" 72, "SOFT" 80, "WONK" 0;
    font-weight: 400 !important;
    font-size: 20px !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    border-radius: 0 !important;
    text-align: left !important;
}
/* The first cell (`<th>` or `<td.name>`) of a `<table>` directly inside a
   `.box` body sometimes shows a "header" label like "Status" / "Order Number"
   that would inherit the h2-style from above. Force them back onto the
   table's mono-caps grid so they don't break alignment. */
.box table th,
.box table td.name,
.box table th.name {
    text-align: left !important;
    vertical-align: top !important;
    padding: 8px 12px !important;
}
/* React owns its own .box — stop florin from styling it. */
#root .box, #root .box h2 { all: revert; }
.box .body, .box .content, .box .form { padding: 22px; }

/* ── Legacy summary strip (was silver gradient bar) ─────────────────────── */
/* The user/product/etc. legacy GSP pages render a `.summary` table at the
   top with avatar + name + Active/Inactive tag. openboxes.css paints it as a
   muddy #f5f5f5 strip with grey hairline border — re-skin it as a paper card
   so it sits flush with the rest of the page. */
.summary {
    background-color: var(--florin-surface) !important;
    border: 1px solid var(--florin-paper-rule) !important;
    border-top: 2px solid var(--florin-accent) !important;
    border-bottom: 1px solid var(--florin-paper-rule) !important;
    padding: 14px 18px !important;
    margin-bottom: 14px;
}
.summary table { background: transparent; border: 0; }
.summary table td { padding: 6px 10px; border: 0; vertical-align: middle; }
.summary .title {
    font-family: "Fraunces", serif !important;
    font-style: italic;
    font-variation-settings: "opsz" 36, "SOFT" 70, "WONK" 0;
    font-weight: 400;
    font-size: 22px;
    color: var(--florin-ink);
    letter-spacing: -0.01em;
}
.summary .title a { color: var(--florin-ink); border: 0; }
.summary .title a:hover { color: var(--florin-primary); }
.summary .tag {
    display: inline-block;
    font-family: "IBM Plex Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--florin-secondary);
    border: 1px solid var(--florin-paper-rule);
    padding: 4px 10px;
    background: var(--florin-paper-2);
}
.summary.active .tag {
    color: var(--florin-success);
    border-color: rgba(40, 167, 69, 0.35);
    background: rgba(40, 167, 69, 0.06);
}
.summary.inactive .tag {
    color: var(--florin-text-muted);
    border-color: var(--florin-paper-rule);
}
.summary .nailthumb-container,
.summary .nailthumb-container img {
    border-radius: 50% !important;
    border: 1px solid var(--florin-paper-rule);
}

/* The collapsed action menu trigger (▾) at the top-left of `.summary`
   should sit quietly as a paper chip, not float in dead space. */
.summary .action-menu .action-btn,
.action-menu .action-btn {
    background: var(--florin-paper-2);
    border: 1px solid var(--florin-paper-rule);
    border-radius: 0;
    padding: 4px 8px;
    cursor: pointer;
    color: var(--florin-ink);
}
.action-menu .action-btn:hover { background: var(--florin-paper); }

/* `.button-bar` row above tabs (Show stock card / Record stock / etc.) —
   tighten spacing so the long ribbon doesn't wrap into a stack. */
.button-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0;
    align-items: center;
}
.button-bar .button img,
.button-bar .button .icon {
    /* Keep silk icons on the cream/brown side rather than raw 16px PNG glare. */
    filter: brightness(0.85) saturate(0.5);
    margin-right: 6px;
    vertical-align: middle;
}
/* Explicitly defeat openboxes.css `text-shadow: 1px 1px 0 #fff` and `font: 11px sans-serif`
   that come with `.button` and would render text near-invisible on brown. */
.button, a.button, button.button, input[type="submit"].button {
    text-shadow: none !important;
    font: 14px/1.2 "Fraunces", serif !important;
    font-style: italic !important;
}

/* h3 — legacy CSS sets it to grey #666; bring it onto the brown palette. */
h3 {
    color: var(--florin-ink) !important;
    font-family: "Fraunces", serif !important;
    font-style: italic !important;
    font-weight: 400 !important;
    font-size: 18px !important;
}

/* Bootstrap dropdown-menu (action menus on legacy product/order/etc. pages) —
   solid white card with brown ink, the actual fix for the "ceață" complaint. */
.dropdown-menu,
.btn-group .dropdown-menu,
ul.dropdown-menu {
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid var(--florin-paper-rule) !important;
    border-top: 2px solid var(--florin-accent) !important;
    border-radius: 0 !important;
    box-shadow: 0 16px 36px rgba(61, 34, 0, 0.18) !important;
    padding: 4px 0 !important;
    color: var(--florin-ink) !important;
}
.dropdown-menu > li > a,
.dropdown-menu li a,
ul.dropdown-menu > li > a {
    color: var(--florin-ink) !important;
    background: transparent !important;
    background-image: none !important;
    font-family: "Fraunces", serif !important;
    font-style: normal !important;
    font-size: 14px !important;
    padding: 8px 16px !important;
    text-shadow: none !important;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu li a:hover,
ul.dropdown-menu > li > a:hover {
    background-color: var(--florin-paper) !important;
    color: var(--florin-primary) !important;
}
.dropdown-menu .divider,
.dropdown-menu hr {
    background-color: var(--florin-paper-rule) !important;
    height: 1px;
    border: 0;
    margin: 4px 0;
}

/* Action-menu (legacy span.action-menu div.actions) — a hidden popover.
   When opened, ensure paper surface + brown ink. */
span.action-menu .actions,
.action-menu .actions {
    background: #ffffff !important;
    border: 1px solid var(--florin-paper-rule) !important;
    border-top: 2px solid var(--florin-accent) !important;
    box-shadow: 0 16px 36px rgba(61, 34, 0, 0.18) !important;
    padding: 4px 0 !important;
}
.action-menu .action-menu-item {
    padding: 0 !important;
    background: transparent !important;
}
.action-menu .action-menu-item a {
    display: block;
    color: var(--florin-ink) !important;
    font-family: "Fraunces", serif !important;
    font-size: 14px !important;
    padding: 8px 16px !important;
    background: transparent !important;
    border: 0 !important;
    text-shadow: none !important;
}
.action-menu .action-menu-item a:hover {
    background: var(--florin-paper) !important;
    color: var(--florin-primary) !important;
}
.action-menu .action-menu-item hr {
    margin: 4px 12px;
    border: 0;
    border-top: 1px solid var(--florin-paper-rule);
}

/* Field labels on legacy GSP pages sometimes inherit Bootstrap `.label`
   pill colors (red `.label-danger`, etc.) which is why some forms render
   labels as red ALL-CAPS. Force form-row labels back onto the mono palette. */
.fieldcontain > label,
.formItem > label,
.form-row > .label,
form .label {
    background: transparent !important;
    color: var(--florin-ink-soft) !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-weight: 500 !important;
}

/* `label.required` (openboxes.css paints these RED for product attributes).
   Bring them back onto the mono brown palette and indicate required state
   with a small gold marker instead of full-text red. */
label.required, form label.required {
    color: var(--florin-ink-soft) !important;
}
label.required::after {
    content: " *";
    color: var(--florin-accent);
    font-weight: 600;
}
label.optional { color: var(--florin-ink-soft) !important; opacity: 0.7; }

/* jQuery UI dialogs adopt the same paper treatment. */
.dialog, .ui-dialog {
    background: var(--florin-surface) !important;
    border: 1px solid var(--florin-paper-rule) !important;
    border-top: 2px solid var(--florin-accent) !important;
    border-radius: 0 !important;
    box-shadow: 0 24px 60px rgba(61, 34, 0, 0.18) !important;
}
.dialog .ui-dialog-titlebar,
.ui-dialog .ui-dialog-titlebar {
    background: transparent !important;
    color: var(--florin-ink) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--florin-paper-rule) !important;
    padding: 14px 20px !important;
    font-family: "Fraunces", serif !important;
    font-style: italic !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    letter-spacing: -0.005em !important;
}
.ui-dialog .ui-dialog-titlebar-close {
    color: var(--florin-secondary) !important;
}

/* ── Inputs — hairline underline, not slab boxes ────────────────────────── */
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="search"], input[type="date"], input[type="tel"],
select, textarea {
    border: 0;
    border-bottom: 1px solid var(--florin-ink);
    border-radius: 0;
    padding: 8px 4px;
    background: transparent;
    color: var(--florin-ink);
    font-family: "Fraunces", serif;
    font-variation-settings: "opsz" 18, "SOFT" 60;
    font-size: 16px;
    transition: border-bottom-color 160ms ease, border-bottom-width 160ms ease;
    box-sizing: border-box;
}
input[type="text"]:hover, input[type="password"]:hover, input[type="email"]:hover,
input[type="number"]:hover, select:hover, textarea:hover {
    border-bottom-color: var(--florin-secondary);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-bottom-color: var(--florin-primary);
    border-bottom-width: 2px;
    padding-bottom: 7px;
}
input::placeholder, textarea::placeholder {
    color: rgba(61, 34, 0, 0.32);
    font-style: italic;
}

/* Form rows that wrap a label + input — give them column rhythm. */
.fieldcontain, .form-group, dl, .formItem, .form-row {
    margin-bottom: 18px;
}
.fieldcontain > label, .form-group > label,
dl > dt, .form-row > .label {
    display: block;
    margin-bottom: 6px;
}

/* Checkbox + radio: leave the OS rendering, just align baseline. */
input[type="checkbox"], input[type="radio"] {
    accent-color: var(--florin-primary);
    border: 0;
}

/* ── Notice / messages (cream wash, hairline accent) ────────────────────── */
.message, .notice {
    background-color: rgba(187, 150, 104, 0.10);
    border: 0;
    border-left: 2px solid var(--florin-accent);
    color: var(--florin-primary-dark);
    border-radius: 0;
    padding: 12px 16px;
    font-style: italic;
    font-family: "Fraunces", serif;
    font-size: 14px;
}
.errors, .error {
    background-color: rgba(220, 53, 69, 0.06);
    border: 0;
    border-left: 2px solid var(--florin-danger);
    color: var(--florin-danger);
    border-radius: 0;
    padding: 12px 16px;
    font-family: "Fraunces", serif;
    font-style: italic;
    font-size: 14px;
}

/* Tabs: small-caps mono, brown active underline. */
.tabs, .ui-tabs-nav, .nav-tabs {
    border-bottom: 1px solid var(--florin-paper-rule) !important;
    background: transparent !important;
    padding-left: 0 !important;
}
.ui-tabs-nav li, .nav-tabs li {
    background: transparent !important;
    border: 0 !important;
}
.ui-tabs-nav a, .nav-tabs a, .nav-tabs .nav-link {
    font-family: "IBM Plex Mono", monospace !important;
    font-size: 11px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: var(--florin-ink-soft) !important;
    padding: 12px 18px !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    background: transparent !important;
}
.ui-tabs-nav .ui-state-active a,
.nav-tabs .nav-link.active,
.nav-tabs li.active a {
    color: var(--florin-primary) !important;
    border-bottom-color: var(--florin-primary) !important;
    font-weight: 500;
}

/* Page titles printed at top of legacy GSP pages (e.g. "Users", "Product List"). */
.body > h1:first-child,
#content > h1:first-child,
.page-header,
.page-title {
    font-family: "Fraunces", serif;
    font-variation-settings: "opsz" 144, "SOFT" 70, "WONK" 0;
    font-weight: 350;
    font-size: clamp(36px, 5vw, 64px);
    letter-spacing: -0.025em;
    color: var(--florin-ink);
    margin: 24px 0 28px;
    border-bottom: 1px solid var(--florin-paper-rule);
    padding-bottom: 18px;
}

/* ── Colophon (page footer) — proper key/value strip, hairline divided ──── */
#ft, .footer, #footer {
    background-color: var(--florin-primary) !important;
    color: var(--florin-accent) !important;
    border-top: 1px solid var(--florin-accent) !important;
    padding: 14px clamp(20px, 3vw, 40px) !important;
    font-family: "IBM Plex Mono", "JetBrains Mono", "SF Mono", monospace !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.04em !important;
}

.florin-colophon {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.florin-colophon__row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 22px;
    color: var(--florin-accent);
}
.florin-colophon__row + .florin-colophon__row {
    border-top: 1px solid rgba(187, 150, 104, 0.22);
    padding-top: 6px;
}
.florin-colophon__row li {
    display: flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}
.florin-colophon .k {
    color: rgba(187, 150, 104, 0.62);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 10px;
}
.florin-colophon .k::after { content: "·"; opacity: 0.4; margin-left: 6px; }
.florin-colophon .v {
    color: #ffffff;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-family: "Fraunces", serif;
    font-style: italic;
    font-size: 12px;
}
.florin-colophon a {
    color: var(--florin-accent-soft) !important;
    border-bottom: 1px dotted rgba(212, 182, 144, 0.55);
    text-decoration: none;
    transition: color 120ms, border-color 120ms;
}
.florin-colophon a:hover {
    color: #ffffff !important;
    border-bottom-color: var(--florin-accent);
}
.florin-colophon__locales {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: baseline;
}
.florin-colophon__locales a {
    border-bottom: 0;
    color: rgba(212, 182, 144, 0.7) !important;
    padding: 0 2px;
}
.florin-colophon__locales a.selected {
    color: #ffffff !important;
    border-bottom: 1px solid var(--florin-accent);
}

/* When the legacy footer template still renders (some pages don't use the
   new GSP), keep its inline `|` separators visually quiet. */
#ft .center, #ft .middle {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 4px 14px;
    line-height: 1.5 !important;
}

/* ── React shell (main.gsp body.florin-react-shell) ─────────────────────── */
/* The React bundle ships its own component CSS; we only paint the chrome
   that's shared across pages so the React app feels like the same product
   as the legacy GSP screens. */
.florin-react-shell {
    background: var(--florin-paper) !important;
    color: var(--florin-ink);
}

/* Top React navbar — same dark brown bar as the GSP layout. */
.florin-react-shell .main-wrapper {
    background-color: var(--florin-primary) !important;
    border-bottom: 1px solid var(--florin-accent) !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06) !important;
    color: var(--florin-accent) !important;
    min-height: 56px;
}
.florin-react-shell .main-wrapper .nav-item > a,
.florin-react-shell .main-wrapper .nav-item > button,
.florin-react-shell .main-wrapper .nav-link,
.florin-react-shell .main-wrapper .navbar-icons .menu-icon,
.florin-react-shell .main-wrapper .navbar-icons a,
.florin-react-shell .main-wrapper .location-chooser__button,
.florin-react-shell .main-wrapper .location-chooser__button-title,
.florin-react-shell .main-wrapper .location-chooser__button-tag {
    color: var(--florin-accent) !important;
    font-family: "IBM Plex Mono", monospace !important;
    font-size: 12px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}
/* Hover state — applies to BOTH the LI (.dropdown.nav-item:hover bg) and
   the inner A so React's stock rule (which paints `.navbar-nav > .dropdown.nav-item:hover`
   with `var(--blue-200)` cream) is overridden consistently. Without this, the
   parent LI gets cream on hover while the inner A gets dark-brown — a flicker
   the user described as "uneori negru, alteori maro deschis". */
.florin-react-shell .main-wrapper .nav-item:hover,
.florin-react-shell .main-wrapper .navbar-nav > .dropdown.nav-item:hover,
.florin-react-shell .main-wrapper .nav-item > a:hover,
.florin-react-shell .main-wrapper .nav-item > button:hover,
.florin-react-shell .main-wrapper .nav-link:hover,
.florin-react-shell .main-wrapper .navbar-icons a:hover,
.florin-react-shell .main-wrapper .navbar-icons .menu-icon:hover,
.florin-react-shell .main-wrapper .dropdown:hover > a:hover {
    background-color: var(--florin-primary-dark) !important;
    color: var(--florin-accent-soft) !important;
}
/* Force nav-item link color to keep gold-accent on dark-brown hover (otherwise
   React's `.nav-item a:hover { color: var(--blue-700) }` paints brown-on-brown). */
.florin-react-shell .main-wrapper .nav-item:hover > a,
.florin-react-shell .main-wrapper .nav-item:hover > button,
.florin-react-shell .main-wrapper .nav-item > a:hover,
.florin-react-shell .main-wrapper .nav-item > button:hover {
    color: var(--florin-accent-soft) !important;
}
.florin-react-shell .main-wrapper .active-section {
    background-color: var(--florin-primary-dark) !important;
    box-shadow: 0 -2px 0 var(--florin-accent) inset !important;
}
.florin-react-shell .main-wrapper .active-section .nav-link,
.florin-react-shell .main-wrapper .active-section a {
    color: #ffffff !important;
}

/* Bootstrap ships generic `.dropdown:hover { background: #fff }` and
   `.dropdown:hover .dropdown-menu { color: #000 !important }` rules — they
   produce the "alb cu text negru, apoi maro cu text alb" flicker the user
   reported because they win the cascade briefly before my rules apply.
   Force the navbar dropdown into a single, stable state. */
.florin-react-shell .main-wrapper .dropdown:hover,
.florin-react-shell .main-wrapper .nav-link:hover,
.florin-react-shell .main-wrapper .dropdown.show {
    background-color: var(--florin-primary-dark) !important;
}
.florin-react-shell .main-wrapper .dropdown:hover .dropdown-menu,
.florin-react-shell .main-wrapper .dropdown.show .dropdown-menu {
    color: var(--florin-ink) !important;
}

/* Dropdown menus opened from the React navbar — paper surface, brown ink,
   so labels are readable instead of fading into "ceata". */
.florin-react-shell .dropdown-menu-content,
.florin-react-shell .conf-subsections,
.florin-react-shell .main-wrapper .dropdown-menu-wrapper .dropdown-menu-content,
.florin-react-shell .main-wrapper .dropdown-menu {
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid var(--florin-paper-rule) !important;
    border-top: 2px solid var(--florin-accent) !important;
    border-radius: 0 !important;
    box-shadow: 0 16px 36px rgba(61, 34, 0, 0.18) !important;
    color: var(--florin-ink) !important;
}
.florin-react-shell .dropdown-menu-content a,
.florin-react-shell .dropdown-menu-content .dropdown-item,
.florin-react-shell .dropdown-menu-content .subsection-section-item {
    color: var(--florin-ink) !important;
    font-family: "Fraunces", serif !important;
    font-style: normal !important;
    font-size: 14px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border-radius: 0 !important;
    padding: 6px 12px !important;
}
.florin-react-shell .dropdown-menu-content a:hover,
.florin-react-shell .dropdown-menu-content .dropdown-item:hover,
.florin-react-shell .dropdown-menu-content .subsection-section-item:hover,
.florin-react-shell .main-wrapper .dropdown-menu-content a:hover,
.florin-react-shell .main-wrapper .dropdown-menu a:hover,
.florin-react-shell .main-wrapper .dropdown-item:hover {
    background-color: var(--florin-paper) !important;
    color: var(--florin-primary) !important;
}
.florin-react-shell .dropdown-menu-content .subsection-section-title {
    color: var(--florin-secondary) !important;
    font-family: "IBM Plex Mono", monospace !important;
    font-size: 10px !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    padding: 10px 12px 4px !important;
    border-bottom: 1px solid var(--florin-paper-rule-2);
    margin-bottom: 4px;
}

/* Action menus (the per-row "Show stock card / Record stock / Edit product…"
   list on Products and similar pages) — keep them on a clean white surface
   with brown hover, not the foggy default. */
.actions, .action-menu, .action-menu-list, .ReactModal__Content {
    background: #ffffff !important;
    border: 1px solid var(--florin-paper-rule) !important;
    border-top: 2px solid var(--florin-accent) !important;
    box-shadow: 0 12px 28px rgba(61, 34, 0, 0.16) !important;
    color: var(--florin-ink) !important;
}
.actions a, .actions .action, .action-menu a,
.action-menu-item, .action-menu-list a {
    color: var(--florin-ink) !important;
    font-family: "Fraunces", serif !important;
    font-size: 14px !important;
    padding: 8px 14px !important;
    display: block;
    border: 0 !important;
}
.actions a:hover, .action-menu a:hover,
.action-menu-item:hover, .action-menu-list a:hover {
    background: var(--florin-paper) !important;
    color: var(--florin-primary) !important;
}

/* Wizard stepper dots, table sort arrows, and other React-side accents that
   used to render in OB blue — bring them onto the brown palette. */
.florin-react-shell .progress-bar,
.florin-react-shell .step-dot.active,
.florin-react-shell .pagination .active a,
.florin-react-shell .nav-tabs .nav-link.active {
    background-color: var(--florin-primary) !important;
    color: #fff !important;
    border-color: var(--florin-primary) !important;
}
.florin-react-shell a, .florin-react-shell button.link {
    color: var(--florin-secondary);
}
.florin-react-shell a:hover {
    color: var(--florin-primary-dark);
}

/* Utility */
.text-primary { color: var(--florin-primary) !important; }
.bg-primary   { background-color: var(--florin-primary) !important; }

/* One-time, gentle reveal when a non-login page paints. Feels like the page
   has just been laid on the desk; no more motion than that. */
@media (prefers-reduced-motion: no-preference) {
    body:not(.login-screen) #bd,
    body:not(.login-screen) .body {
        animation: florinReveal 520ms cubic-bezier(0.2, 0.7, 0.25, 1) both;
    }
}
@keyframes florinReveal {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Login screen — editorial luxury (apothecary modern).
 *
 * Reference: Aesop product pages, NYT Magazine, Hermès le-monde-d'Hermès.
 * Single full-bleed cream-paper plane with a fine-press grid:
 *   – top + bottom hairline rules carrying small-caps masthead text
 *   – oversized Fraunces serif heading with italic gold full-stop
 *   – fields presented as numbered ledger entries (№ 01 / № 02), no boxes,
 *     just hairline underlines that thicken on focus (ink-bleed metaphor)
 *   – marginalia rail running vertically up the right side ("OPS LOG")
 *   – staged paper-fold reveal on load (one moment of motion, no fidgeting)
 *
 * Type pairing: Fraunces (variable serif, optical-size + soft + wonky axes
 * lend the apothecary warmth) + IBM Plex Mono (small caps, ledger numerals,
 * marginalia). Body inherits Fraunces Text weight, NOT a sans-serif —
 * deliberate refusal of the "system-ui" SaaS default.
 *
 * Fonts are imported once at the top of this file — no duplicate @import here.
 * ────────────────────────────────────────────────────────────────────────── */

body.login-screen {
    margin: 0;
    min-height: 100vh;
    color: var(--florin-primary-dark);
    /* Fraunces Text used as body — a serif login is the whole point. */
    font-family: "Fraunces", "Iowan Old Style", "Palatino", "Georgia", serif;
    font-variation-settings: "opsz" 14, "SOFT" 50, "WONK" 0;
    background: #f5ebd9;
    background-image:
        /* warm vignette so the corners feel touched-by-hand */
        radial-gradient(ellipse at 50% 0%, rgba(187, 150, 104, 0.10), transparent 55%),
        radial-gradient(ellipse at 50% 100%, rgba(61, 34, 0, 0.08), transparent 55%),
        /* paper grain — fine fractal noise multiplied over cream */
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.42  0 0 0 0 0.27  0 0 0 0 0.05  0 0 0 0.16 0'/></filter><rect width='100%25' height='100%25' filter='url(%23p)'/></svg>");
    background-attachment: fixed;
}

@font-face {
    /* Fallback so Fraunces never produces FOIT on a slow first paint */
    font-family: "FrauncesFallback";
    src: local("Iowan Old Style"), local("Palatino"), local("Georgia"), local("Times New Roman");
    size-adjust: 105%;
    ascent-override: 95%;
}

/* Hide layout chrome (navbar, footer) when the body is in login mode */
body.login-screen #main-wrapper,
body.login-screen #ft,
body.login-screen #bd,
body.login-screen #yui-main,
body.login-screen #content { all: unset; }
body.login-screen #main-wrapper,
body.login-screen #ft { display: none !important; }

/* ── Page frame ─────────────────────────────────────────────────────────── */
.login-page {
    min-height: 100vh;
    padding: 20px clamp(24px, 4vw, 56px);
    display: grid;
    grid-template-rows: auto 1fr auto;
    row-gap: clamp(20px, 3vw, 40px);
    box-sizing: border-box;
    position: relative;
}

/* Hairline frame — two horizontal rules carrying the masthead and colophon. */
.login-rule {
    height: 1px;
    background: var(--florin-primary-dark);
    opacity: 0.85;
}

.login-mast,
.login-colophon {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: baseline;
    gap: 24px;
    font-family: "IBM Plex Mono", "JetBrains Mono", "SF Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--florin-primary-dark);
    padding: 12px 0;
}
.login-mast > :last-child,
.login-colophon > :last-child { text-align: right; }
.login-mast__center,
.login-colophon__center { font-weight: 500; opacity: 0.85; }

.login-mast__monogram {
    font-family: "Fraunces", serif;
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    font-weight: 500;
    font-style: italic;
    font-size: 18px;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--florin-primary);
}

/* ── Stage (the form) ───────────────────────────────────────────────────── */
.login-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    justify-items: start;
    max-width: 720px;
    width: min(100%, 720px);
    margin-inline: auto;
    position: relative;
}

.login-stage__edition {
    /* Marginalia: vertical small-caps text running up the right margin. */
    position: absolute;
    right: -56px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: center;
    font-family: "IBM Plex Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--florin-secondary);
    opacity: 0.7;
    white-space: nowrap;
    pointer-events: none;
}

.login-eyebrow {
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--florin-secondary);
    margin: 0 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.login-eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: var(--florin-secondary);
    display: inline-block;
}

.login-title {
    font-family: "Fraunces", serif;
    font-variation-settings: "opsz" 96, "SOFT" 70, "WONK" 0;
    font-weight: 350;
    font-size: clamp(40px, 5.5vw, 72px);
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--florin-primary-dark);
    margin: 0 0 4px;
    /* Italic period in gold = the one bespoke detail */
}
.login-title .stop {
    font-style: italic;
    font-weight: 400;
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    color: var(--florin-accent);
    margin-left: -0.02em;
}

.login-lede {
    max-width: 44ch;
    margin: 0 0 24px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--florin-text-muted);
    font-variation-settings: "opsz" 18, "SOFT" 50;
}
.login-lede em {
    font-style: italic;
    color: var(--florin-primary);
    font-variation-settings: "opsz" 18, "SOFT" 100, "WONK" 1;
}

/* ── Flash / errors ─────────────────────────────────────────────────────── */
.login-flash,
.login-errors {
    width: min(100%, 460px);
    border-left: 2px solid var(--florin-accent);
    padding: 10px 14px;
    margin: 0 0 24px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--florin-primary-dark);
    background: rgba(187, 150, 104, 0.10);
    font-style: italic;
}
.login-errors {
    border-left-color: var(--florin-danger);
    background: rgba(220, 53, 69, 0.06);
    color: var(--florin-danger);
}
.login-errors ul { margin: 0; padding-left: 18px; }

/* ── Form (ledger style) ───────────────────────────────────────────────── */
.login-form {
    width: min(100%, 460px);
    display: grid;
    row-gap: 18px;
}

.login-field {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 14px;
    align-items: end;
    border-bottom: 1px solid var(--florin-primary-dark);
    padding-bottom: 8px;
    transition: border-bottom-color 200ms ease, border-bottom-width 200ms ease;
}
.login-field__num {
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--florin-secondary);
    font-feature-settings: "tnum";
    padding-bottom: 6px;
    grid-row: 1 / span 2;
    align-self: end;
}
.login-field__label {
    grid-column: 2;
    font-family: "IBM Plex Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--florin-text-muted);
    margin-bottom: 4px;
    transition: color 200ms ease;
}
.login-field input {
    grid-column: 2;
    width: 100%;
    box-sizing: border-box;
    border: 0;
    background: transparent;
    color: var(--florin-primary-dark);
    font-family: "Fraunces", serif;
    font-variation-settings: "opsz" 36, "SOFT" 70, "WONK" 0;
    font-size: 24px;
    font-weight: 350;
    letter-spacing: -0.005em;
    padding: 4px 0 8px;
    outline: 0;
    caret-color: var(--florin-accent);
}
.login-field input::placeholder {
    color: rgba(61, 34, 0, 0.28);
    font-style: italic;
}
.login-field:focus-within {
    border-bottom-width: 2px;
    border-bottom-color: var(--florin-primary);
    padding-bottom: 7px;
}
.login-field:focus-within .login-field__label,
.login-field:focus-within .login-field__num {
    color: var(--florin-primary);
}
.login-field--invalid { border-bottom-color: var(--florin-danger); }
.login-field--invalid .login-field__label,
.login-field--invalid .login-field__num { color: var(--florin-danger); }

/* Cloudflare Turnstile — let it sit in its own ledger row */
.login-turnstile {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-top: 4px;
}
.login-turnstile__label {
    font-family: "IBM Plex Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--florin-text-muted);
    white-space: nowrap;
}
.login-turnstile .cf-turnstile { flex: 1; min-width: 0; }

/* ── CTA + footer of the form ──────────────────────────────────────────── */
.login-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 8px;
}
.login-cta {
    appearance: none;
    border: 1px solid var(--florin-primary-dark);
    background: var(--florin-primary-dark);
    color: #fbeed5;
    font-family: "Fraunces", serif;
    font-variation-settings: "opsz" 36, "SOFT" 60, "WONK" 0;
    font-style: italic;
    font-weight: 400;
    font-size: 18px;
    letter-spacing: 0.01em;
    padding: 14px 26px 13px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: color 240ms ease;
}
.login-cta::before {
    /* Ink-bleed: gold pool fills from the left on hover. */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--florin-accent), var(--florin-accent-soft));
    transform: translateX(-101%);
    transition: transform 380ms cubic-bezier(0.65, 0, 0.35, 1);
    z-index: -1;
}
.login-cta:hover { color: var(--florin-primary-dark); }
.login-cta:hover::before { transform: translateX(0); }
.login-cta:active { transform: translateY(1px); }
.login-cta:focus-visible {
    outline: 2px solid var(--florin-accent);
    outline-offset: 3px;
}
.login-cta__arrow {
    display: inline-block;
    margin-left: 10px;
    transition: transform 280ms cubic-bezier(0.65, 0, 0.35, 1);
}
.login-cta:hover .login-cta__arrow { transform: translateX(6px); }

.login-signup {
    font-family: "Fraunces", serif;
    font-variation-settings: "opsz" 14, "SOFT" 60;
    font-size: 14px;
    color: var(--florin-text-muted);
    text-align: right;
    line-height: 1.4;
}
.login-signup a {
    display: inline-block;
    color: var(--florin-primary-dark);
    font-style: italic;
    text-decoration: none;
    border-bottom: 1px solid var(--florin-accent);
    padding-bottom: 1px;
    transition: border-bottom-color 160ms ease, color 160ms ease;
}
.login-signup a:hover {
    color: var(--florin-secondary);
    border-bottom-color: var(--florin-primary-dark);
}

/* ── Staged page-load reveal (one moment of motion) ────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .login-rule,
    .login-mast,
    .login-eyebrow,
    .login-title,
    .login-lede,
    .login-form,
    .login-colophon {
        opacity: 0;
        transform: translateY(8px);
        animation: loginReveal 700ms cubic-bezier(0.2, 0.7, 0.25, 1) forwards;
    }
    .login-rule:first-of-type { animation-delay: 0ms; transform: scaleX(0.6); transform-origin: left center; }
    .login-mast              { animation-delay: 80ms; }
    .login-eyebrow           { animation-delay: 220ms; }
    .login-title             { animation-delay: 320ms; }
    .login-lede              { animation-delay: 480ms; }
    .login-form              { animation-delay: 580ms; }
    .login-rule:last-of-type { animation-delay: 720ms; transform: scaleX(0.6); transform-origin: right center; }
    .login-colophon          { animation-delay: 800ms; }
}
@keyframes loginReveal {
    to { opacity: 1; transform: none; }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .login-page { padding: 20px 22px; row-gap: 28px; }
    .login-mast,
    .login-colophon {
        grid-template-columns: 1fr 1fr;
        font-size: 10px;
        gap: 14px;
    }
    .login-mast__center,
    .login-colophon__center { display: none; }
    .login-stage { padding-right: 0; }
    .login-stage__edition { display: none; }
    .login-title { font-size: clamp(48px, 12vw, 72px); }
    .login-lede { font-size: 15px; margin-bottom: 32px; }
    .login-field input { font-size: 20px; }
    .login-actions { flex-direction: column; align-items: stretch; }
    .login-cta { width: 100%; text-align: center; }
    .login-signup { text-align: center; }
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
#ft, .footer {
    background-color: var(--florin-primary);
    color: var(--florin-accent);
    border-top: 2px solid var(--florin-accent);
}
#ft a, .footer a {
    color: var(--florin-accent-soft);
}

/* ── Utility ─────────────────────────────────────────────────────────────── */
.text-primary { color: var(--florin-primary) !important; }
.bg-primary   { background-color: var(--florin-primary) !important; }