/* ============================================================
   SPL Back Office — base layout styles
   Dark theme. Module-specific styles live in their own bundles.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bo-gold:      #b8922a;
    --bo-gold-lt:   #e8c97a;
    --bo-ink:       #0e1a2b;
    --bo-ink-2:     #14243a;
    --bo-ink-soft:  #3a4a60;
    --bo-cream:     #f9f5ee;
    --bo-border:    rgba(255, 255, 255, .08);
    --bo-serif:     'Georgia', serif;
    --bo-mono:      monospace;

    /* Soft-motion timing tokens. The whole back-office (and the
       public site) routes its transitions through these so the
       UI feels uniformly gentle — 0.2-0.5s, eased on a Material-
       style curve. Override one variable to tune the whole app.

       Use --bo-transition-fast for hover/focus colour swaps,
       --bo-transition for panel resizes / collapse / reveal,
       --bo-transition-slow for full-section layout shifts. */
    --bo-transition-fast: .22s;
    --bo-transition:      .3s;
    --bo-transition-slow: .45s;
    --bo-ease:            cubic-bezier(.4, 0, .2, 1);

    /* Tell the browser to render native form controls — the
       date-picker dropdown, scrollbars, the select pop-out, the
       autofill chrome — in their dark variant so they don't flash
       white against our dark theme. Chromium/Edge/Safari honour
       this directly; Firefox uses it too as a hint. */
    color-scheme: dark;
}

/* Universal soft-motion layer. Targets only properties that are
   safe to interpolate everywhere — colours, borders, shadows,
   transforms, opacity — so state changes (hover, focus, .active,
   media-query breakpoints that flip a class) glide instead of
   snapping. Layout properties (width, height, padding, margin,
   gap) are NOT in the universal list because they change every
   pixel during a window-resize and would create perceptible lag;
   each container that benefits from a soft resize gets its own
   targeted rule further down.

   Operators with `prefers-reduced-motion` get an immediate
   override below that collapses everything to a near-instant
   transition — keeps the UI accessible without removing the
   visual feedback entirely. */
*,
*::before,
*::after {
    transition-property: background-color, color, border-color, outline-color, box-shadow, fill, stroke, transform, opacity;
    transition-duration: var(--bo-transition-fast);
    transition-timing-function: var(--bo-ease);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --bo-transition-fast: .01ms;
        --bo-transition:      .01ms;
        --bo-transition-slow: .01ms;
    }

    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

html { font-size: 16px; }

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background: var(--bo-ink);
    color: var(--bo-cream);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ── Top navigation bar ─────────────────────────────────── */
.bo-header {
    background: var(--bo-ink);
    border-bottom: 1px solid rgba(184, 146, 42, .3);
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 2rem;
    gap: 1.25rem;
    position: sticky;
    top: 0;
    z-index: 200;
    flex-shrink: 0;
}

.bo-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.bo-logo img {
    display: block;
    height: 36px;
    width: auto;
}

.bo-nav {
    display: flex;
    align-items: center;
    gap: .25rem;
}

/* Right nav floats: margin-left:auto eats remaining space, pushing right
   nav + user menu against the trailing edge of the header. */
.bo-nav-right {
    margin-left: auto;
}

.bo-nav-link {
    font-size: .8rem;
    font-family: var(--bo-mono), monospace;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(249, 245, 238, .45);
    text-decoration: none;
    padding: .4rem .85rem;
    border-radius: 2px;
    transition: background var(--bo-transition-fast) var(--bo-ease), color var(--bo-transition-fast) var(--bo-ease);
    white-space: nowrap;
}

.bo-nav-link:hover {
    background: rgba(255, 255, 255, .06);
    color: var(--bo-cream);
}

.bo-nav-link.active {
    background: rgba(184, 146, 42, .15);
    color: var(--bo-gold-lt);
}

/* ── Nav group dropdowns (Tenancies, Settings) ──────────── */
.bo-nav-group {
    position: relative;
    outline: none;
}

.bo-nav-group-trigger {
    background: transparent;
    border: 0;
    cursor: pointer;
    color: rgba(249, 245, 238, .45);
    font-size: .8rem;
    font-family: var(--bo-mono), monospace;
    letter-spacing: .05em;
    text-transform: uppercase;
    /* The Buildings group uses an <a> as its trigger (it navigates to
       the list on click while hover/focus reveals the panel), so kill
       the default link underline; harmless on the <button> triggers. */
    text-decoration: none;
    padding: .4rem .85rem;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    transition: background var(--bo-transition-fast) var(--bo-ease), color var(--bo-transition-fast) var(--bo-ease);
}

.bo-nav-group:hover .bo-nav-group-trigger,
.bo-nav-group:focus-within .bo-nav-group-trigger {
    background: rgba(255, 255, 255, .06);
    color: var(--bo-cream);
}

.bo-nav-group.active .bo-nav-group-trigger {
    background: rgba(184, 146, 42, .15);
    color: var(--bo-gold-lt);
}

.bo-nav-chevron {
    width: 11px;
    height: 11px;
    color: currentColor;
}

.bo-nav-group-icon .bo-nav-group-trigger {
    padding: .35rem .55rem;
}

.bo-nav-icon {
    width: 20px;
    height: 20px;
    color: currentColor;
    display: block;
}

.bo-nav-group-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 200px;
    background: var(--bo-ink-2);
    border: 1px solid rgba(184, 146, 42, .3);
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    padding: .35rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--bo-transition) var(--bo-ease), transform var(--bo-transition) var(--bo-ease), visibility var(--bo-transition) var(--bo-ease);
    z-index: 1000;
}

.bo-nav-group-panel-right {
    left: auto;
    right: 0;
}

/* `.is-lingering` is set by JS for a 1s grace period after mouse-away.
   It's coordinated across all groups so opening one closes a sibling's
   linger immediately (see backend.js). */
.bo-nav-group:hover .bo-nav-group-panel,
.bo-nav-group.is-lingering .bo-nav-group-panel,
.bo-nav-group:focus-within .bo-nav-group-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.bo-nav-group-item {
    font-size: .78rem;
    font-family: var(--bo-mono), monospace;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(249, 245, 238, .65);
    text-decoration: none;
    padding: .55rem .9rem;
    border-radius: 2px;
    white-space: nowrap;
    transition: background var(--bo-transition-fast) var(--bo-ease), color var(--bo-transition-fast) var(--bo-ease);
}

.bo-nav-group-item:hover {
    background: rgba(255, 255, 255, .06);
    color: var(--bo-cream);
}

.bo-nav-group-item.active {
    background: rgba(184, 146, 42, .15);
    color: var(--bo-gold-lt);
}

/* ── Nested subgroups (e.g. Financials → Accounting) ────── */
.bo-nav-subgroup {
    position: relative;
    outline: none;
    border-radius: 2px;
}

.bo-nav-subgroup-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-size: .78rem;
    font-family: var(--bo-mono), monospace;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(249, 245, 238, .65);
    padding: .55rem .9rem;
    cursor: default;
    transition: background var(--bo-transition-fast) var(--bo-ease), color var(--bo-transition-fast) var(--bo-ease);
}

.bo-nav-subgroup:hover .bo-nav-subgroup-trigger,
.bo-nav-subgroup:focus-within .bo-nav-subgroup-trigger {
    background: rgba(255, 255, 255, .06);
    color: var(--bo-cream);
}

.bo-nav-subgroup.active .bo-nav-subgroup-trigger {
    background: rgba(184, 146, 42, .15);
    color: var(--bo-gold-lt);
}

.bo-nav-chevron-right {
    flex-shrink: 0;
    opacity: .7;
}

.bo-nav-subgroup-panel {
    position: absolute;
    top: -6px;
    left: calc(100% + 4px);
    min-width: 200px;
    background: var(--bo-ink-2);
    border: 1px solid rgba(184, 146, 42, .3);
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    padding: .35rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-4px);
    transition: opacity var(--bo-transition) var(--bo-ease), transform var(--bo-transition) var(--bo-ease), visibility var(--bo-transition) var(--bo-ease);
    z-index: 1010;
}

.bo-nav-subgroup:hover .bo-nav-subgroup-panel,
.bo-nav-subgroup.is-lingering .bo-nav-subgroup-panel,
.bo-nav-subgroup:focus-within .bo-nav-subgroup-panel {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* ── Main content area ──────────────────────────────────── */
.bo-main {
    flex: 1;
    width: 100%;
    padding: 16px;
    transition: padding var(--bo-transition) var(--bo-ease);
}

/* ── Footer ─────────────────────────────────────────────── */
.bo-footer {
    border-top: 1px solid var(--bo-border);
    padding: 1rem 2rem;
    font-size: .72rem;
    font-family: var(--bo-mono), monospace;
    color: rgba(249, 245, 238, .2);
    letter-spacing: .05em;
    text-align: center;
}

/* ── Account menu (top-right avatar + dropdown) ──────────── */
.user-menu {
    position: relative;
    display: inline-flex;
    outline: none;
    margin-left: .5rem;
}

.user-menu-trigger {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    border-radius: 999px;
    transition: box-shadow var(--bo-transition) var(--bo-ease);
}

.user-menu-trigger:hover,
.user-menu:focus-within .user-menu-trigger {
    box-shadow: 0 0 0 4px rgba(184, 146, 42, .25);
}

.user-avatar {
    display: inline-block;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    object-fit: cover;
    background: rgba(184, 146, 42, .25);
    vertical-align: middle;
}

.user-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--bo-gold), var(--bo-gold-lt));
    color: var(--bo-ink);
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .02em;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

.user-avatar-lg {
    width: 56px;
    height: 56px;
    font-size: 1.1rem;
}

.user-menu-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 280px;
    background: var(--bo-ink-2);
    border: 1px solid rgba(184, 146, 42, .3);
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
    padding: .65rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--bo-transition) var(--bo-ease), transform var(--bo-transition) var(--bo-ease), visibility var(--bo-transition) var(--bo-ease);
    z-index: 1000;
}

.user-menu:hover .user-menu-panel,
.user-menu:focus-within .user-menu-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-menu-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .35rem .35rem .75rem;
    border-bottom: 1px solid rgba(184, 146, 42, .2);
    margin-bottom: .5rem;
}

.user-menu-id {
    min-width: 0;
    flex: 1;
}

.user-menu-name {
    font-weight: 600;
    color: var(--bo-cream);
    font-size: .95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

.user-menu-email {
    color: rgba(249, 245, 238, .55);
    font-size: .8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-menu-link,
.user-menu-signout {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: .5rem .65rem;
    border-radius: 3px;
    color: rgba(249, 245, 238, .8);
    font-size: .85rem;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--bo-transition-fast) var(--bo-ease), color var(--bo-transition-fast) var(--bo-ease);
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

.user-menu-link:hover,
.user-menu-signout:hover {
    background: rgba(184, 146, 42, .12);
    color: var(--bo-gold-lt);
}

.user-menu-form {
    margin: 0;
}

/* ============================================================
   Shared page primitives (aci-*)
   Page wrappers, headers, tables, buttons, pills, empty states —
   reused by every list/detail page in the back-office. The `aci-`
   prefix is historical (it originated in the AC index page) but
   the rules below are entirely generic.
   ============================================================ */

.aci-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.25rem 1.5rem 3rem;
    transition: max-width var(--bo-transition) var(--bo-ease), padding var(--bo-transition) var(--bo-ease);
}

.aci-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.aci-head h1 {
    font-family: var(--bo-serif), serif;
    color: var(--bo-gold-lt);
    font-size: 1.4rem;
    font-weight: 500;
}

.aci-head-meta {
    font-family: var(--bo-mono), monospace;
    font-size: .76rem;
    color: rgba(249, 245, 238, .6);
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}

.aci-errors {
    margin-bottom: 1rem;
    padding: .75rem 1rem;
    border: 1px solid rgba(228, 90, 75, .45);
    background: rgba(228, 90, 75, .12);
    border-radius: 3px;
}

.aci-error {
    color: #ffd5cc;
    font-size: .82rem;
}

.aci-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.aci-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--bo-mono), monospace;
    font-size: .76rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bo-cream);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--bo-border);
    border-radius: 3px;
    padding: .5rem .9rem;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--bo-transition-fast) var(--bo-ease), border-color var(--bo-transition-fast) var(--bo-ease), color var(--bo-transition-fast) var(--bo-ease), transform var(--bo-transition-fast) var(--bo-ease), box-shadow var(--bo-transition-fast) var(--bo-ease);
}

.aci-btn:hover {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(184, 146, 42, .35);
    color: var(--bo-gold-lt);
}

.aci-btn-primary {
    color: var(--bo-ink);
    background: var(--bo-gold-lt);
    border-color: var(--bo-gold);
}

.aci-btn-primary:hover {
    background: var(--bo-gold);
    color: var(--bo-ink);
}

.aci-btn-sm {
    padding: .35rem .6rem;
    font-size: .7rem;
}

.aci-btn-danger {
    border-color: rgba(228, 90, 75, .35);
    color: #ffd5cc;
}

.aci-btn-danger:hover {
    background: rgba(228, 90, 75, .14);
    color: #ffd5cc;
    border-color: rgba(228, 90, 75, .55);
}

.aci-section {
    margin-top: 1.4rem;
    background: var(--bo-ink-2);
    border: 1px solid var(--bo-border);
    border-radius: 4px;
    padding: 1rem 1.25rem 1.25rem;
    transition: padding var(--bo-transition) var(--bo-ease), border-color var(--bo-transition-fast) var(--bo-ease), background var(--bo-transition-fast) var(--bo-ease);
}

.aci-section-title {
    font-family: var(--bo-serif), serif;
    color: var(--bo-cream);
    font-size: 1.05rem;
    font-weight: 500;
    margin-bottom: .25rem;
}

.aci-section-sub {
    font-family: var(--bo-mono), monospace;
    font-size: .72rem;
    letter-spacing: .04em;
    color: rgba(249, 245, 238, .55);
    margin-bottom: .8rem;
}

.aci-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
}

.aci-table th,
.aci-table td {
    text-align: left;
    padding: .55rem .6rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    vertical-align: top;
}

.aci-table th {
    font-family: var(--bo-mono), monospace;
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(249, 245, 238, .55);
    font-weight: 500;
    background: rgba(0, 0, 0, .15);
}

.aci-row-inactive td {
    color: rgba(249, 245, 238, .55);
}

.aci-mono {
    font-family: var(--bo-mono), monospace;
    font-variant-numeric: tabular-nums;
}

.aci-pill {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-family: var(--bo-mono), monospace;
    font-size: .68rem;
    padding: .12rem .5rem;
    border-radius: 999px;
    border: 1px solid var(--bo-border);
    color: var(--bo-cream);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.aci-pill-active {
    color: #d3edcb;
    border-color: rgba(101, 161, 67, .55);
    background: rgba(101, 161, 67, .14);
}

.aci-pill-historical {
    color: rgba(249, 245, 238, .55);
    background: rgba(0, 0, 0, .25);
}

.aci-pill-warn {
    color: #f6d899;
    border-color: rgba(217, 158, 51, .55);
    background: rgba(217, 158, 51, .14);
}

.aci-row-sub {
    font-family: var(--bo-mono), monospace;
    font-size: .72rem;
    color: rgba(249, 245, 238, .55);
    margin-top: .15rem;
    max-width: 36em;
}

.aci-row-sub-warn {
    color: #ffd5cc;
}

.aci-col-actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.aci-inline-form {
    display: inline;
}

.aci-empty {
    margin-top: 1rem;
    padding: 1.2rem 1.4rem;
    border: 1px dashed var(--bo-border);
    border-radius: 4px;
    text-align: center;
    color: rgba(249, 245, 238, .65);
    font-size: .9rem;
}

.aci-empty a {
    color: var(--bo-gold-lt);
}

/* ============================================================
   Form & panel chrome (.acf-*) — promoted out of the per-module
   committee-form bundle so every backend page renders panels,
   forms, list-rows, and detail-flyouts identically. Add module-
   specific rules to the module's own bundle if any are needed;
   defaults live here.
   ============================================================ */

.acf-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.25rem 1.5rem 3rem;
    transition: max-width var(--bo-transition) var(--bo-ease), padding var(--bo-transition) var(--bo-ease);
}

.acf-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.acf-head h1 {
    font-family: var(--bo-serif), serif;
    color: var(--bo-gold-lt);
    font-size: 1.4rem;
    font-weight: 500;
}

.acf-link {
    color: var(--bo-gold-lt);
    text-decoration: none;
    font-family: var(--bo-mono), monospace;
    font-size: .8rem;
}

.acf-link:hover {
    text-decoration: underline;
}

.acf-mono {
    font-family: var(--bo-mono), monospace;
    font-variant-numeric: tabular-nums;
}

.acf-errors {
    margin-bottom: 1rem;
    padding: .75rem 1rem;
    border: 1px solid rgba(228, 90, 75, .45);
    background: rgba(228, 90, 75, .12);
    border-radius: 3px;
}

.acf-error {
    color: #ffd5cc;
    font-size: .82rem;
}

.acf-flash {
    margin-bottom: 1rem;
    padding: .75rem 1rem;
    border: 1px solid rgba(86, 196, 130, .45);
    background: rgba(86, 196, 130, .12);
    border-radius: 3px;
}

.acf-flash-msg {
    color: #c8f4da;
    font-size: .82rem;
}

.acf-panel {
    background: var(--bo-ink-2);
    border: 1px solid var(--bo-border);
    border-radius: 4px;
    padding: 1.1rem 1.4rem 1.4rem;
    margin-bottom: 1.4rem;
    transition: padding var(--bo-transition) var(--bo-ease), border-color var(--bo-transition-fast) var(--bo-ease), background var(--bo-transition-fast) var(--bo-ease), box-shadow var(--bo-transition-fast) var(--bo-ease);
}

.acf-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .9rem;
}

.acf-panel-title {
    font-family: var(--bo-serif), serif;
    color: var(--bo-cream);
    font-size: 1.05rem;
    font-weight: 500;
}

.acf-panel-sub {
    font-family: var(--bo-mono), monospace;
    font-size: .72rem;
    letter-spacing: .04em;
    color: rgba(249, 245, 238, .55);
}

.acf-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
    transition: gap var(--bo-transition) var(--bo-ease);
}

.acf-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

/* `display: flex` above overrides the implicit `display: none`
   that the HTML `hidden` attribute applies, so a hidden flex
   field would still take layout space. Re-honour `hidden`
   explicitly so views can use the bare attribute (e.g. the
   "Specify document type" field that the GL transaction form
   reveals only when the operator picks "Other"). */
.acf-field[hidden] {
    display: none;
}

.acf-field-full {
    grid-column: 1 / -1;
}

.acf-label {
    font-family: var(--bo-mono), monospace;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(249, 245, 238, .55);
}

/* Required-field marker. A trailing red asterisk on the label
   tells the user the field can't be blank at submit time. Apply
   by adding `.is-required` to the .acf-label / .dls-row-label
   span (kept as a modifier so existing labels render unchanged). */
.acf-label.is-required::after,
.dls-row-label.is-required::after {
    content: ' *';
    color: #ff6b6b;
    font-weight: bold;
}

.acf-input,
.acf-select {
    background: var(--bo-ink);
    border: 1px solid var(--bo-border);
    border-radius: 3px;
    padding: .55rem .65rem;
    color: var(--bo-cream);
    font-size: .9rem;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    transition: border-color var(--bo-transition-fast) var(--bo-ease), background var(--bo-transition-fast) var(--bo-ease), box-shadow var(--bo-transition-fast) var(--bo-ease);
}

.acf-input:focus,
.acf-select:focus {
    outline: none;
    border-color: var(--bo-gold-lt);
    background: rgba(0, 0, 0, .25);
}

/* Native <optgroup> labels paint as light-grey bands under
   `color-scheme: dark` — visually loud against our cream-on-ink
   palette. Chromium now respects background / color / font-*
   on optgroup, so repaint to gold-on-ink-2 to match the rest of
   the chrome. Firefox/Safari ignore the background but still
   pick up the colour + serif treatment. */
.acf-select optgroup,
.acf-code-prefix-select optgroup {
    background: var(--bo-ink-2);
    color: var(--bo-gold-lt);
    font-family: var(--bo-serif), serif;
    font-style: normal;
    font-weight: 600;
    font-size: .9rem;
}

.acf-select option {
    background: var(--bo-ink);
    color: var(--bo-cream);
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400;
}

/* Currently-selected option. Chromium otherwise renders it as a
   dimmed dark-on-dark band that's barely legible against
   var(--bo-ink). Repaint with the brand gold so the operator can
   see at a glance which value the field currently holds.

   Three selectors so the rule fires in every state Chromium might
   be in:
     - :checked            — works in some popup-mode versions
     - [selected]          — server-rendered initial state
     - .is-current         — class added by backend.js on change
                             (most reliable across Chromium versions)

   !important defeats the OS-level "selected" overlay Chromium
   sprays over options in popup mode — without it the gold gets
   muddied to near-grey. */
.acf-select option:checked,
.acf-select option[selected],
.acf-select option.is-current,
.acf-code-prefix-select option:checked,
.acf-code-prefix-select option[selected],
.acf-code-prefix-select option.is-current {
    background: var(--bo-gold) !important;
    color: var(--bo-ink) !important;
    font-weight: 600 !important;
}

/* Prefix dropdown options inherit the parent's mono treatment so
   "AR-" / "CA-" / "—" line up with the suffix input typeface. */
.acf-code-prefix-select option {
    background: var(--bo-ink);
    color: var(--bo-cream);
    font-family: var(--bo-mono), monospace;
    font-weight: 400;
}

/* Under `color-scheme: dark` (set on :root) Chromium already
   renders the picker glyph in its light variant. Just nudge the
   resting opacity so it doesn't compete with the value, and
   bump it on hover for the click affordance. */
.acf-input[type="date"]::-webkit-calendar-picker-indicator,
.acf-input[type="time"]::-webkit-calendar-picker-indicator,
.acf-input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.acf-input[type="month"]::-webkit-calendar-picker-indicator,
.acf-input[type="week"]::-webkit-calendar-picker-indicator {
    opacity: .6;
    cursor: pointer;
    transition: opacity var(--bo-transition-fast) var(--bo-ease);
}

.acf-input[type="date"]::-webkit-calendar-picker-indicator:hover,
.acf-input[type="time"]::-webkit-calendar-picker-indicator:hover,
.acf-input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
.acf-input[type="month"]::-webkit-calendar-picker-indicator:hover,
.acf-input[type="week"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Click-to-edit pattern: an .acf-input that lives next to a pen
   icon, rendered read-only on first paint so the value is
   visible-but-locked, with the pen-icon button as the explicit
   "I want to change this" affordance. The input keeps its value
   in the POST when readonly (unlike `disabled`), which is the
   key reason we use readonly here. */
.acf-edit-toggle {
    display: flex;
    gap: .4rem;
    align-items: stretch;
}

.acf-edit-toggle .acf-input {
    flex: 1;
    min-width: 0;
}

.acf-input[readonly] {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 255, 255, .04);
    /* Full-strength cream so values with leading whitespace + literal
       quote characters (e.g. ` " MAIROZA N.6 " `) don't visually get
       lost. The "locked" state is communicated by the dim background
       and the default cursor, not by faded text. */
    color: var(--bo-cream);
    cursor: default;
}

.acf-input[readonly]:focus {
    /* Cancel the normal-focus gold border on a read-only field. */
    border-color: rgba(255, 255, 255, .04);
    background: rgba(255, 255, 255, .03);
}

.acf-edit-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--bo-border);
    border-radius: 3px;
    padding: 0 .7rem;
    cursor: pointer;
    color: rgba(249, 245, 238, .55);
    transition: background var(--bo-transition-fast) var(--bo-ease), border-color var(--bo-transition-fast) var(--bo-ease), color var(--bo-transition-fast) var(--bo-ease), opacity var(--bo-transition-fast) var(--bo-ease);
}

.acf-edit-toggle-btn:hover {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(184, 146, 42, .35);
    color: var(--bo-gold-lt);
}

.acf-edit-toggle.is-editing .acf-edit-toggle-btn {
    opacity: 0;
    pointer-events: none;
}

.acf-edit-toggle-icon {
    width: 14px;
    height: 14px;
    display: block;
}

/* Open-dropdown styling. Modern Chromium / Firefox honour
   background-color + color on <option>; older / OS-themed
   renderers ignore it and fall back to system grey. */
.acf-select option {
    background-color: var(--bo-ink-2);
    color: var(--bo-cream);
    padding: .35rem .5rem;
}

.acf-select option:checked,
.acf-select option:hover {
    background: linear-gradient(var(--bo-gold) 0%, var(--bo-gold) 100%);
    color: var(--bo-ink);
}

.acf-select option:disabled {
    color: rgba(249, 245, 238, .35);
}

textarea.acf-input {
    resize: vertical;
    min-height: 4rem;
}

.acf-actions {
    margin-top: 1.2rem;
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    flex-wrap: wrap;
}

.acf-actions-left {
    margin-right: auto;
}

.acf-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--bo-mono), monospace;
    font-size: .76rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bo-cream);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--bo-border);
    border-radius: 3px;
    padding: .55rem 1.1rem;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--bo-transition-fast) var(--bo-ease), border-color var(--bo-transition-fast) var(--bo-ease), color var(--bo-transition-fast) var(--bo-ease), transform var(--bo-transition-fast) var(--bo-ease), box-shadow var(--bo-transition-fast) var(--bo-ease);
}

.acf-btn:hover {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(184, 146, 42, .35);
    color: var(--bo-gold-lt);
}

/* Disabled buttons. Without this rule a `<button disabled>` keeps
   its full-colour appearance — so the user can't tell it's not
   clickable. opacity dims it, cursor flips to "not-allowed", and
   pointer-events:none belts-and-braces against the hover styles. */
.acf-btn:disabled,
.acf-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.acf-btn-primary {
    color: var(--bo-ink);
    background: var(--bo-gold-lt);
    border-color: var(--bo-gold);
}

.acf-btn-primary:hover {
    background: var(--bo-gold);
    color: var(--bo-ink);
}

/* Success / additive action — paired with .acf-btn-danger for the
   negative-action affordance. Used today by the "Add account"
   toggle at the top of the Chart of Accounts panel. */
.acf-btn-success {
    color: var(--bo-ink);
    background: #a3c987;
    border-color: #8fb874;
}

.acf-btn-success:hover {
    background: #b9d99e;
    border-color: #a3c987;
    color: var(--bo-ink);
}

.acf-btn-sm {
    padding: .35rem .65rem;
    font-size: .7rem;
}

.acf-btn-danger {
    border-color: rgba(228, 90, 75, .35);
    color: #ffd5cc;
}

.acf-btn-danger:hover {
    background: rgba(228, 90, 75, .14);
    color: #ffd5cc;
    border-color: rgba(228, 90, 75, .55);
}

/* ── List rows (membership timeline, document chain, …) ──── */

.acf-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1.1rem;
}

.acf-list-item {
    background: rgba(0, 0, 0, .2);
    border: 1px solid var(--bo-border);
    border-radius: 4px;
    padding: .9rem 1rem;
    transition: padding var(--bo-transition) var(--bo-ease), border-color var(--bo-transition-fast) var(--bo-ease), background var(--bo-transition-fast) var(--bo-ease), box-shadow var(--bo-transition-fast) var(--bo-ease);
}

.acf-list-item-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: .25rem;
}

.acf-list-item-title {
    font-family: var(--bo-serif), serif;
    color: var(--bo-cream);
    font-size: .98rem;
}

.acf-list-item-meta {
    font-family: var(--bo-mono), monospace;
    font-size: .72rem;
    color: rgba(249, 245, 238, .55);
}

.acf-list-item-pill {
    display: inline-flex;
    align-items: center;
    font-family: var(--bo-mono), monospace;
    font-size: .68rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    border: 1px solid var(--bo-border);
    text-transform: uppercase;
    letter-spacing: .06em;
    background: rgba(255, 255, 255, .04);
    color: var(--bo-cream);
    margin-left: .35rem;
}

.acf-list-item-pill-serving {
    color: #d3edcb;
    border-color: rgba(101, 161, 67, .5);
    background: rgba(101, 161, 67, .12);
}

.acf-list-item-pill-ended {
    color: rgba(249, 245, 238, .55);
    background: rgba(0, 0, 0, .25);
}

.acf-list-item-body {
    font-size: .85rem;
    color: var(--bo-cream);
    margin-bottom: .5rem;
}

.acf-list-item-body a {
    color: var(--bo-gold-lt);
}

.acf-list-item-form {
    margin-top: .6rem;
    border-top: 1px dashed var(--bo-border);
    padding-top: .75rem;
}

.acf-list-item-actions {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    justify-content: center;
}

.acf-inline-form {
    display: inline;
}

.acf-inline-form-spaced {
    margin-top: .7rem;
}

.acf-list-item-actions-spaced {
    margin-top: .8rem;
}

.acf-list-item-body-muted {
    color: rgba(249, 245, 238, .45);
}

.acf-empty-row {
    padding: 1rem;
    border: 1px dashed var(--bo-border);
    border-radius: 4px;
    color: rgba(249, 245, 238, .55);
    font-size: .85rem;
    text-align: center;
    font-style: italic;
}

.acf-details {
    border: 1px solid var(--bo-border);
    border-radius: 4px;
    background: rgba(0, 0, 0, .12);
}

.acf-details > summary {
    list-style: none;
    cursor: pointer;
    padding: .55rem .85rem;
    font-family: var(--bo-mono), monospace;
    font-size: .72rem;
    letter-spacing: .06em;
    color: var(--bo-gold-lt);
}

.acf-details > summary::-webkit-details-marker {
    display: none;
}

.acf-details[open] > summary {
    border-bottom: 1px solid var(--bo-border);
}

.acf-details-body {
    padding: 1rem 1.1rem;
}

@media (max-width: 720px) {
    .acf-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Tabs (.acf-tabs)
   Used to split a detail page's panels into a tab strip + panels.
   Progressive enhancement: without JS, panels still render
   because :target rules make them visible when the URL hash
   matches and a fallback keeps the first panel open otherwise.
   The JS layer adds keyboard nav, syncs the hash on click, and
   honours data-acf-active-tab for server-side selection.
   ============================================================ */
.acf-tab-list {
    display: flex;
    gap: .15rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--bo-border);
    margin-bottom: 1.4rem;
}

.acf-tab {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: .65rem 1.1rem;
    font-family: var(--bo-mono), monospace;
    font-size: .76rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(249, 245, 238, .55);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--bo-transition-fast) var(--bo-ease), border-color var(--bo-transition-fast) var(--bo-ease), background var(--bo-transition-fast) var(--bo-ease);
}

.acf-tab:hover {
    color: var(--bo-cream);
    background: rgba(255, 255, 255, .04);
}

.acf-tab:focus-visible {
    outline: none;
    color: var(--bo-cream);
    background: rgba(255, 255, 255, .06);
}

.acf-tab[aria-selected="true"] {
    color: var(--bo-gold-lt);
    border-bottom-color: var(--bo-gold);
}

.acf-tab-panel[hidden] {
    display: none;
}

/* ============================================================
   Locale switcher (nav-bar EN / EL / RU pills)
   ============================================================ */

.bo-locale-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 0 .35rem;
    padding: 2px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--bo-border);
    border-radius: 999px;
}

.bo-locale-form {
    margin: 0;
    padding: 0;
    display: inline-flex;
}

.bo-locale-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 22px;
    padding: 0 .55rem;
    font-size: .68rem;
    font-family: var(--bo-mono), monospace;
    font-weight: 600;
    letter-spacing: .06em;
    color: rgba(249, 245, 238, .55);
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--bo-transition-fast) var(--bo-ease), color var(--bo-transition-fast) var(--bo-ease);
}

.bo-locale-pill:hover {
    color: var(--bo-cream);
    background: rgba(255, 255, 255, .06);
}

.bo-locale-pill.active {
    color: var(--bo-ink);
    background: var(--bo-gold-lt);
    cursor: default;
}