/* ============================================================================
 * Shell, layout and shared components.
 * Utilities, the sidebar/topbar frame, cards, buttons, form fields, the
 * focus ring, data tables, empty states, the spinner, and the master-detail
 * frame that both Sites and Products Design render into.
 *
 * Loaded first: every module file below may override what is set here.
 *
 * Split out of app.css on 19-08-2026 (was lines 1-34, 157-550, 660-793). Rules are the
 * originals, sliced not retyped.
 * ========================================================================== */

/* ============================================================================
 * Boiler-Studio app shell + base components.
 * Implements the recipes in UI-UX-CONVENTIONS.md: fixed nav sidebar, sticky
 * topbar, soft-shadow surfaces, cyan/navy palette, uppercase micro-labels,
 * 3px cyan accents, the signature cyan focus ring.
 * ========================================================================== */

/* ---------------------------------------------------------------- utilities */
.u-upper {
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.hidden { display: none !important; }

/*
 * Present to assistive technology, absent from the screen.
 *
 * NOT `display: none` or `visibility: hidden` — both remove the element from the
 * accessibility tree as well, so a live region styled that way is silent, which
 * is the failure mode this class exists to avoid. The 1px-clip technique keeps
 * it rendered and readable while occupying no visible space.
 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ================================================================= LAYOUT */
.layout {
    display: block;
    min-height: 100vh;
}

/* ---- Sidebar ---- */
.sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--sidebar-width, 250px);
    background: #fff;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    box-shadow: 1px 0 0 var(--light-silver, #E3E4E9), 4px 0 20px rgba(15,159,196,0.06);
    transition: width 0.3s ease, transform 0.3s ease;
}
.sidebar__brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--light-silver, #E3E4E9);
    white-space: nowrap;
    overflow: hidden;
}
.sidebar__logo { font-size: 1.2rem; }
.sidebar__title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-dark, #0F1E45);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.sidebar__nav {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 0;
}
/*
 * The house mark at the foot of the rail.
 *
 * `.sidebar__nav` above takes `flex: 1`, so this is pushed to the bottom of the
 * column on a tall screen and simply follows the last nav item on a short one —
 * it never overlaps the navigation, and it never floats in the middle.
 *
 * `flex-shrink: 0` matters: without it a short viewport squeezes this block
 * instead of scrolling the nav, and the mark distorts.
 *
 * The source PNG is 136px wide; the cap below stays under that, so it is never
 * upscaled. See `.login__mark` in login.css, which carries the same mark.
 */
.sidebar__mark {
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid var(--light-silver, #E3E4E9);
}
.sidebar__mark img {
    width: 84px;
    max-width: 100%;
    height: auto;
    transition: width 0.3s ease;
}

.nav-group { margin-bottom: 0.5rem; }
.nav-group__label {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--slate, #55648A);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    padding: 0.5rem 1.25rem 0.25rem;
    white-space: nowrap;
}
.nav-item {
    display: flex;
    align-items: center;
    padding: 0.7rem 1.25rem;
    margin: 2px 0.5rem;
    border-radius: var(--radius-btn, 8px);
    color: var(--slate, #55648A);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
}
.nav-item > .fa, .nav-item > i {
    width: 24px;
    margin-right: 0.875rem;
    text-align: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.nav-item:hover {
    background: var(--pale-cyan, #EAF7FA);
    color: var(--cyan-ink, #0A7A97);
    border-left-color: var(--soft-cyan, #C3E7F0);
}
.nav-item.active {
    background: var(--pale-cyan, #EAF7FA);
    color: var(--cyan-ink, #0A7A97);
    border-left: 3px solid var(--primary-blue, #0F9FC4);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(15,159,196,0.12);
}

/* ---- Collapsed sidebar ---- */
.layout--collapsed .sidebar { width: var(--sidebar-collapsed, 60px); }
.layout--collapsed .sidebar__title,
.layout--collapsed .nav-group__label,
.layout--collapsed .nav-item span { display: none; }
.layout--collapsed .nav-item { justify-content: center; }
.layout--collapsed .nav-item > .fa, .layout--collapsed .nav-item > i { margin-right: 0; }
/* The mark stays in the 60px rail rather than hiding with the text labels —
   the droplet-and-Wex shape still reads at this size, and it keeps the foot of
   the rail from ending in nothing. The strapline under it is not legible here,
   which is accepted: it is a mark at this width, not a signature. */
.layout--collapsed .sidebar__mark { padding: 0.75rem 0.4rem 1rem; }
.layout--collapsed .sidebar__mark img { width: 40px; }
.layout--collapsed .main { margin-left: var(--sidebar-collapsed, 60px); }

/* ---- Main column ---- */
.main {
    margin-left: var(--sidebar-width, 250px);
    transition: margin-left 0.3s ease;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ---- Topbar ---- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: #fff;
    border-bottom: 1px solid var(--light-silver, #E3E4E9);
    padding: 0.75rem 1.5rem;
}
.topbar__left { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.topbar__toggle {
    background: #fff;
    border: 1px solid var(--border-grey, #E3E4E9);
    border-radius: var(--radius-btn, 8px);
    width: 36px; height: 36px;
    color: var(--text-dark, #0F1E45);
    cursor: pointer;
    box-shadow: var(--shadow-float, 0 2px 8px rgba(0,0,0,0.1));
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.topbar__toggle:hover { background: var(--off-white, #F7F7F8); border-color: var(--cyan-ink, #0A7A97); transform: scale(1.05); }
.topbar__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-dark, #0F1E45);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topbar__actions { display: flex; align-items: center; gap: 0.75rem; }

/* ---- "What is this screen for?" ---- */
/*
 * Sits before the user menu, in the one place the question is the same on every
 * screen. Quiet by default and only coloured on hover: it is there for the
 * person who needs it and should not compete with the work for attention.
 */
.topbar__help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--border-grey, #E3E4E9);
    border-radius: 50%;
    background: #fff;
    color: var(--slate, #55648A);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
}
.topbar__help:hover {
    border-color: var(--cyan-ink, #0A7A97);
    color: var(--cyan-ink, #0A7A97);
}
/* `hidden` on a flex child is otherwise ignored — the screens with no help
   written for them would show an empty circle. */
.topbar__help[hidden] { display: none; }

/* ---- the help dialog ---- */
/*
 * Prose, so it gets a prose measure and a comfortable line height rather than
 * the tight setting the rest of the UI uses. Somebody opening this is reading,
 * not scanning a form.
 */
.help { font-size: 0.82rem; line-height: 1.6; color: var(--text-dark, #0F1E45); }

.help__intro { margin: 0 0 1rem; }

.help__head {
    margin: 1.1rem 0 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--cyan-ink, #0A7A97);
}

.help__list { margin: 0; padding-left: 1.15rem; list-style: disc; }
.help__list li { margin-bottom: 0.45rem; }

/* Sub-points are the detail under a point, so they are indented, lighter, and
   marked differently — two levels have to read as two levels. */
.help__list--sub {
    margin: 0.35rem 0 0;
    list-style: circle;
    color: var(--slate, #55648A);
}
.help__list--sub li { margin-bottom: 0.25rem; }

/* ---- User menu ---- */
.usermenu { position: relative; }
.usermenu__button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    border: 1px solid var(--border-grey, #E3E4E9);
    border-radius: var(--radius-btn, 8px);
    padding: 0.4rem 0.75rem;
    color: var(--text-dark, #0F1E45);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}
.usermenu__button:hover { background: var(--off-white, #F7F7F8); border-color: var(--cyan-ink, #0A7A97); }
.usermenu__button .fa-user-circle, .usermenu__button .fa-circle-user { color: var(--cyan-ink, #0A7A97); font-size: 1rem; }
.usermenu__button .fa-chevron-down { font-size: 0.7rem; color: var(--slate, #55648A); transition: transform 0.3s ease; }
.usermenu.open .usermenu__button .fa-chevron-down { transform: rotate(180deg); }
.usermenu__dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    min-width: 200px;
    background: #fff;
    border-radius: var(--radius-card, 10px);
    box-shadow: var(--shadow-menu, 0 10px 30px rgba(0,0,0,0.15));
    padding: 0.4rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
}
.usermenu.open .usermenu__dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.usermenu__head {
    padding: 0.5rem 0.75rem 0.6rem;
    border-bottom: 1px solid var(--light-silver, #E3E4E9);
    margin-bottom: 0.3rem;
}
.usermenu__name { font-weight: 700; font-size: 0.85rem; color: var(--text-dark, #0F1E45); }
.usermenu__role { font-size: 0.68rem; color: var(--slate, #55648A); text-transform: uppercase; letter-spacing: 0.5px; }
.usermenu__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-btn, 8px);
    color: var(--text-dark, #0F1E45);
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.usermenu__item .fa { color: var(--cyan-ink, #0A7A97); width: 18px; text-align: center; }
.usermenu__item:hover { background: var(--off-white, #F7F7F8); }
.usermenu__item--logout { color: var(--logout-red, #e05c5c); }
.usermenu__item--logout .fa { color: var(--logout-red, #e05c5c); }
.usermenu__item--logout:hover { background: #fdeeee; }

/* ---- Content ---- */
.content { flex: 1; padding: 1.25rem 1.5rem; }
.view-container { max-width: 1600px; margin: 0 auto; }

/* =========================================================== COMPONENTS */

/* Card / panel */
.section-block {
    background: #fff;
    border-radius: var(--radius-card, 10px);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-card);
}
.section-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-dark, #0F1E45);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    padding-bottom: 0.5rem;
    margin: 0 0 0.875rem;
    border-bottom: 1px solid var(--light-silver, #E3E4E9);
}
/* Dotted divider inside a section (e.g. above Feed Water Temperature). */
.wiz-rule {
    border: none;
    border-top: 1px dashed var(--light-silver, #E3E4E9);
    margin: 1.1rem 0 1.5rem;
}
/* Sub-heading for a grouped block inside a section (e.g. COC within System Design). */
.subsection-title {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--slate, #55648A);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding-bottom: 0.35rem;
    margin: 1.75rem 0 0.75rem;
    border-bottom: 1px dashed var(--light-silver, #E3E4E9);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--border-grey, #E3E4E9);
    background: #fff;
    color: var(--text-dark, #0F1E45);
    border-radius: var(--radius-btn, 8px);
    padding: 0.5rem 1rem;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn:hover { background: var(--off-white, #F7F7F8); border-color: var(--cyan-ink, #0A7A97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn .fa { font-size: 0.8rem; }
.btn--primary {
    background: linear-gradient(135deg, var(--primary-blue, #0F9FC4), var(--secondary-blue, #1F3D7C));
    color: #fff;
    border: none;
    padding: 0.625rem 1.5rem;
    transition: all 0.3s ease;
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(15,159,196,0.35); background: linear-gradient(135deg, var(--primary-blue, #0F9FC4), var(--secondary-blue, #1F3D7C)); }
.btn--danger { color: var(--logout-red, #e05c5c); border-color: #f2c9c9; }
.btn--danger:hover { background: #fdeeee; border-color: var(--logout-red, #e05c5c); }
.btn--block { width: 100%; justify-content: center; }
.btn--sm { padding: 0.3rem 0.65rem; font-size: 0.74rem; }
.btn--sm.btn--primary { padding: 0.35rem 0.8rem; }

/* Form fields */
.field { margin-bottom: 0.875rem; }
.field__label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--slate, #55648A);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 0.3rem;
}
input, select, textarea {
    width: 100%;
    border: 1px solid var(--light-silver, #E3E4E9);
    border-radius: var(--radius-input, 6px);
    padding: 0.45rem 0.7rem;
    font-size: 0.85rem;
    color: var(--text-dark, #0F1E45);
    background: var(--off-white, #F7F7F8);
    transition: all 0.2s ease;
}
textarea { resize: vertical; min-height: 70px; }

/* ------------------------------------------------ show what was typed ---- */
/*
 * A password box with an eye in its right-hand end.
 *
 * The button is positioned over the input rather than sitting beside it, so the
 * box keeps the full width every other field has and nothing on the form shifts
 * when a password field appears among text ones.
 *
 * `padding-right` on the input is what stops a long password running under the
 * icon. It has to beat the base `input` rule above, which is why the selector
 * names the wrapper.
 */
.pw-field { position: relative; display: block; }

.pw-field input { padding-right: 2.4rem; }

.pw-reveal {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 2.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--slate, #55648A);
    font-size: 0.85rem;
    cursor: pointer;
    /* The base `input` rule sets width:100%; a button in the same form would
       otherwise inherit nothing, but the reset is cheap and states the intent. */
    border-radius: 0 var(--radius-input, 6px) var(--radius-input, 6px) 0;
}

.pw-reveal:hover { color: var(--cyan-ink, #0A7A97); }

/* Keyboard users get the same ring the inputs do — the button sits ON the
   field, so without this its focus is invisible against the box behind it. */
.pw-reveal:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    color: var(--cyan-ink, #0A7A97);
}

/* Showing: the icon is the state, so it is coloured like an active control. */
.pw-reveal[aria-pressed="true"] { color: var(--cyan-ink, #0A7A97); }
input:focus, select:focus, textarea:focus {
    border-color: var(--cyan-ink, #0A7A97);
    box-shadow: var(--focus-ring);
    outline: none;
    background: #fff;
}

/* ================================================== KEYBOARD FOCUS (U12)
 *
 * Text inputs above keep `:focus` rather than `:focus-visible` deliberately —
 * seeing which field you clicked into is useful, not noise. Everything BELOW
 * uses `:focus-visible`, so a ring appears for keyboard users and not on every
 * mouse click of a button.
 *
 * It is an OUTLINE with an offset, not `--focus-ring`. That token is
 * rgba(15,159,196,0.15) — a 15%-alpha tint that reads well inside a white input
 * and is all but invisible on .btn--primary, which is a cyan-to-navy gradient.
 * An outline offset outside the element is legible whatever the element's own
 * background is. This follows .login__link:focus-visible, which already did it
 * this way; it is now the rule rather than the exception.
 *
 * Element selectors, not class ones, so a button added later is covered without
 * anyone remembering this block. `[tabindex]` is here for the same reason and
 * for what comes next: the master-detail list rows are click-only <div>s and
 * cannot be reached by keyboard at all (recorded as U19) — when they become
 * focusable they inherit this ring.
 */
button:focus-visible,
a:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--cyan-ink, #0A7A97);
    outline-offset: 2px;
}

/*
 * The publish tiles put a checkbox inside a large clickable label. Ringing the
 * checkbox alone marks a 13px square while the thing being chosen is the whole
 * tile, so the tile takes the ring when its input holds focus.
 */
.pub-opt:has(input:focus-visible),
.field__check:has(input:focus-visible) {
    outline: 2px solid var(--cyan-ink, #0A7A97);
    outline-offset: 2px;
}

/* Data table */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.data-table thead { background: var(--off-white, #F7F7F8); border-bottom: 2px solid var(--primary-blue, #0F9FC4); }
.data-table th {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dark, #0F1E45);
    text-align: left;
    padding: 0.65rem 0.85rem;
    white-space: nowrap;
}
.data-table tbody tr { border-bottom: 1px solid var(--light-silver, #E3E4E9); transition: background-color 0.2s ease; cursor: default; }
.data-table tbody tr.is-clickable { cursor: pointer; }
.data-table tbody tr:hover { background-color: rgba(15,159,196,0.05); }
.data-table td { padding: 0.6rem 0.85rem; vertical-align: middle; }
/*
 * Tabular figures in the BODY face, not Courier New.
 *
 * tabular-nums gives every digit the same advance width, so columns still line
 * up exactly as a monospace font made them — but Courier is unusually wide, and
 * on the Dosage Quantities table that width was part of why six columns would
 * not fit their panel. It also never matched anything else on the screen.
 */
.data-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
/*
 * A numeric heading sits over its figures, not away from them.
 *
 * `td.num` right-aligns the numbers; without this the heading stayed left and
 * every numeric column in the application read as two columns that had come
 * apart — the title at one edge, the digits at the other. The printed
 * quotation has always done it correctly (`td.num, th.num` in core/document.js),
 * so this brings the screen into line with the paper rather than inventing a
 * convention.
 *
 * Applying it needs `.num` on the `th` as well as the `td`. That is deliberate:
 * CSS cannot ask "what are the cells in my column doing", and inferring it from
 * position would break the moment a column moved.
 */
.data-table th.num { text-align: right; }

/*
 * The unit, under the column title rather than inside it.
 *
 * A heading like "Qty Total Kg - 12 Months" sets the column's width from the
 * WORDS, not the numbers: it measured 204px while the Product column beside it
 * was squeezed to 92px. Splitting the unit onto its own smaller line lets each
 * column shrink to the width of its data.
 */
.data-table .th-unit {
    display: block;
    margin-top: 2px;
    font-size: 0.64rem;
    font-weight: 400;
    letter-spacing: 0.2px;
    text-transform: none;
    color: var(--slate, #55648A);
}
.data-table .col-label { font-weight: 600; color: var(--text-dark, #0F1E45); }

/* Empty / placeholder state */
.empty {
    text-align: center;
    color: var(--slate, #55648A);
    padding: 3rem 1rem;
    font-size: 0.9rem;
}
.placeholder {
    background: #fff;
    border-radius: var(--radius-card, 10px);
    box-shadow: var(--shadow-card);
    padding: 3rem 2rem;
    text-align: center;
}
.placeholder .fa { font-size: 2rem; color: var(--soft-cyan, #C3E7F0); margin-bottom: 1rem; }
.placeholder h2 { color: var(--text-dark, #0F1E45); font-size: 1.1rem; margin: 0 0 0.5rem; }
.placeholder p { color: var(--slate, #55648A); font-size: 0.85rem; margin: 0; }

/* Spinner */
.spinner {
    width: 18px; height: 18px;
    border: 2px solid rgba(15,159,196,0.25);
    border-top-color: var(--cyan-ink, #0A7A97);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    display: inline-block;
    vertical-align: middle;
}

/* ====================================================== MASTER-DETAIL */
.master-detail {
    display: grid;
    /* minmax(0, 1fr) lets the right column shrink below its content's min-content
       width, so a wide table's own overflow-x:auto scroller engages instead of the
       whole column pushing past the viewport edge at low resolutions. */
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}
@media (max-width: 900px) { .master-detail { grid-template-columns: 1fr; } }

/* Left: record list (a card with its own header/tools/scroll area) */
.record-list { padding: 0; overflow: hidden; }
.record-list__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--light-silver, #E3E4E9);
}
.record-list__head h2 {
    margin: 0; font-size: 0.75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.7px;
    color: var(--text-dark, #0F1E45);
}
.record-list__count { font-size: 0.7rem; color: var(--slate, #55648A); font-weight: 600; }
.record-list__tools {
    display: flex; flex-direction: column; gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--light-silver, #E3E4E9);
}
/* Caption above the Water Analysis grid on both screens that render it. */
.wa-hint { font-size: 0.72rem; color: var(--slate, #55648A); margin-bottom: 0.5rem; }

/* Wraps because the Products list carries two filters plus the category
   select in a 340px column; without it the labels break mid-phrase. */
.record-list__toolrow { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.record-list__toolrow .btn { flex-shrink: 0; }
.record-list__inactive { display: flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; color: var(--slate, #55648A); white-space: nowrap; }
.record-list__inactive input { width: auto; }
.record-list__items { max-height: 64vh; overflow-y: auto; }
.record-item {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--light-silver, #E3E4E9);
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}
.record-item:hover { background: var(--pale-cyan, #EAF7FA); }
.record-item.active { background: var(--pale-cyan, #EAF7FA); border-left-color: var(--cyan-ink, #0A7A97); }
.record-item--inactive { opacity: 0.55; }
.record-item__name { font-weight: 600; color: var(--text-dark, #0F1E45); font-size: 0.85rem; display: flex; align-items: center; gap: 0.5rem; }
.record-item__meta { font-size: 0.72rem; color: var(--slate, #55648A); margin-top: 2px; }

/* Right: detail / form */
.detail__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.detail__title { font-size: 1rem; font-weight: 700; color: var(--text-dark, #0F1E45); }
.detail__sub { font-size: 0.72rem; color: var(--slate, #55648A); margin-top: 2px; }
/* A .detail__sub used as a standalone explanatory line above or below a
   control, rather than as the second line of a heading. */
.detail__sub--lead { margin-bottom: 0.75rem; }
.detail__sub--foot { margin-top: 0.5rem; }
.detail__actions { display: flex; gap: 0.5rem; flex-shrink: 0; }

/* Read-only detail grid. Mirrors .form-grid so a record keeps the same shape
   in view and edit mode; values echo the input's geometry to avoid a jump. */
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 1.25rem; }
.info-grid .span-2 { grid-column: 1 / -1; }
.info { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.info__label {
    font-size: 0.7rem; font-weight: 600; color: var(--slate, #55648A);
    text-transform: uppercase; letter-spacing: 0.6px;
}
.info__value {
    font-size: 0.85rem; color: var(--text-dark, #0F1E45); font-weight: 500;
    padding: 0.45rem 0.7rem; min-height: 2.05rem;
    background: var(--off-white, #F7F7F8);
    border: 1px solid var(--light-silver, #E3E4E9);
    border-radius: var(--radius-input, 6px);
    overflow-wrap: anywhere;
}
/* Multi-line fields (addresses, remark) keep their line breaks. */
.info--pre .info__value { white-space: pre-wrap; }
.info__value--empty { color: var(--slate, #55648A); font-weight: 400; }
@media (max-width: 700px) { .info-grid { grid-template-columns: 1fr; } }

.dl { display: grid; grid-template-columns: 160px 1fr; gap: 0.55rem 1rem; font-size: 0.85rem; }
.dl dt { color: var(--slate, #55648A); text-transform: uppercase; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.5px; padding-top: 2px; }
.dl dd { margin: 0; color: var(--text-dark, #0F1E45); white-space: pre-wrap; }

.detail-empty { color: var(--slate, #55648A); text-align: center; padding: 3.5rem 1rem; }
.detail-empty .fa { font-size: 1.8rem; color: var(--soft-cyan, #C3E7F0); margin-bottom: 0.75rem; }

/* Form grid */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem 1rem; }
.form-grid .span-2 { grid-column: 1 / -1; }
.form-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--light-silver, #E3E4E9); }
.field__error { display: none; color: var(--logout-red, #e05c5c); font-size: 0.7rem; margin-top: 3px; }
/* Says what a field's value will turn into — e.g. the two brand names built
   from a product number. Same slot as __error, quieter. */
.field__hint { color: var(--cyan-ink, #0A7A97); font-size: 0.7rem; margin-top: 3px; }
.field.has-error input, .field.has-error select, .field.has-error textarea {
    border-color: var(--logout-red, #e05c5c);
    box-shadow: 0 0 0 3px rgba(224,92,92,0.12);
}
.field.has-error .field__error { display: block; }
.field__check { display: flex; align-items: center; gap: 0.45rem; font-size: 0.78rem; color: var(--slate, #55648A); margin: 0.1rem 0 0.6rem; cursor: pointer; }
.field__check input { width: auto; }

/* Badge */
.badge { display: inline-block; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 6px; border-radius: 4px; }
.badge--inactive { background: #eef0f3; color: var(--slate, #55648A); }
.badge--region { background: var(--pale-cyan, #EAF7FA); color: var(--cyan-ink, #0A7A97); }
.badge--warn { background: #fdf2e3; color: #8a5a12; border: 1px solid #f0d8ab; }

/* Inline form-level error banner */
.form-error {
    display: none; margin-bottom: 0.875rem; padding: 0.6rem 0.75rem;
    border-radius: var(--radius-input, 6px); background: #fdeeee;
    color: var(--logout-red, #e05c5c); font-size: 0.8rem; font-weight: 500;
    border-left: 3px solid var(--logout-red, #e05c5c);
}
.form-error.is-visible { display: block; }

/* Inline form-level note — states a constraint (e.g. territory scope) that
   explains why a dropdown is short. Informational, so it reads calmer than
   .form-error above. */
.form-note {
    margin-bottom: 0.875rem; padding: 0.6rem 0.75rem;
    border-radius: var(--radius-input, 6px); background: var(--pale-cyan, #EAF7FA);
    color: var(--cyan-ink, #0A7A97); font-size: 0.8rem; font-weight: 500;
    border-left: 3px solid var(--cyan-ink, #0A7A97);
}
.form-note i { margin-right: 0.35rem; }