/* ============================================================
   Zugbam theme bridge
   ------------------------------------------------------------
   Maps Bootstrap 5.3's variables onto the Zugbam tokens, then
   restates the rules the design system is explicit about where
   Bootstrap's defaults would contradict them.

   Loaded after site.css so it wins on shared selectors. App-owned
   classes are themed by remapping site.css's own :root block, not
   here — see the token block at the top of site.css.
   ============================================================ */

/* ── Bootstrap variable bridge ───────────────────────────────── */

:root {
    --bs-body-bg: var(--surface-app);
    --bs-body-color: var(--text-primary);
    --bs-body-font-family: var(--font-sans);
    --bs-body-font-size: var(--fs-body);
    --bs-body-line-height: calc(var(--lh-body) / var(--fs-body));

    --bs-emphasis-color: var(--text-primary);
    --bs-secondary-color: var(--text-secondary);
    --bs-tertiary-color: var(--text-tertiary);
    --bs-secondary-bg: var(--surface-card-raised);
    --bs-tertiary-bg: var(--surface-inset);

    --bs-border-color: var(--divider);
    --bs-border-color-translucent: var(--divider);
    --bs-border-radius: var(--radius-control);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-card);
    --bs-border-radius-xl: var(--radius-xl);
    --bs-border-radius-pill: var(--radius-pill);

    /* Copper is the only accent; Bootstrap's blue primary is retired. */
    --bs-primary: var(--copper-500);
    --bs-primary-rgb: 184, 115, 51;
    --bs-link-color: var(--text-accent);
    --bs-link-hover-color: var(--accent-hover);
    --bs-link-color-rgb: 184, 115, 51;

    --bs-success: var(--success-500);
    --bs-warning: var(--warning-500);
    --bs-danger: var(--error-500);
    --bs-info: var(--info-500);

    --bs-box-shadow-sm: var(--shadow-1);
    --bs-box-shadow: var(--shadow-2);
    --bs-box-shadow-lg: var(--shadow-3);
}

/* ── Cards ───────────────────────────────────────────────────
   "Graphite fill, 1px hairline border at 8% off-white, 12px radius,
   0 1px 2px rgba(0,0,0,.32)." Depth steps by surface value first.
   No coloured left borders, no gradient fills. */

.card {
    background: var(--surface-card);
    border: var(--border-hairline) solid var(--divider);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-1);
    color: var(--text-primary);
}

.card-header,
.card-footer {
    background: transparent;
    border-color: var(--divider);
    color: var(--text-primary);
}

.card-header.bg-light,
.bg-light {
    background: var(--surface-inset) !important;
    color: var(--text-primary);
}

.card-body {
    padding: var(--card-pad-lg);
}

/* Raised: dialogs and popovers sitting on top of another card. */
.modal-content,
.dropdown-menu,
.card.card-raised {
    background: var(--surface-card-raised);
    border: var(--border-hairline) solid var(--divider);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-3);
    color: var(--text-primary);
}

/* ── Buttons ─────────────────────────────────────────────────
   Hover lightens, press darkens and scales to 0.98. Focus is a
   copper border plus a 3px copper ring. */

.btn {
    border-radius: var(--radius-control);
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-body);
    transition: background-color var(--dur-fast) var(--ease-standard),
                border-color var(--dur-fast) var(--ease-standard),
                color var(--dur-fast) var(--ease-standard),
                transform var(--dur-instant) var(--ease-standard);
}

.btn:active {
    transform: scale(var(--press-scale));
}

.btn:focus-visible {
    border-color: var(--border-color-focus);
    box-shadow: var(--focus-ring);
    outline: none;
}

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text-on-accent);
}

.btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--text-on-accent);
}

.btn-primary:active,
.btn-primary:focus:active {
    background: var(--accent-pressed);
    border-color: var(--accent-pressed);
    color: var(--text-on-accent);
}

.btn-secondary,
.btn-outline-secondary {
    background: transparent;
    border-color: var(--divider-strong);
    color: var(--text-primary);
}

.btn-secondary:hover,
.btn-outline-secondary:hover {
    background: var(--surface-hover);
    border-color: var(--divider-strong);
    color: var(--text-primary);
}

.btn-outline-primary {
    background: transparent;
    border-color: var(--accent);
    color: var(--text-accent);
}

.btn-outline-primary:hover {
    background: var(--copper-tint-12);
    border-color: var(--accent-hover);
    color: var(--accent-hover);
}

.btn-link {
    color: var(--text-accent);
    text-decoration: none;
}

.btn-link:hover {
    color: var(--accent-hover);
}

.btn-sm {
    min-height: var(--control-height-sm);
    font-size: var(--fs-body-sm);
    border-radius: var(--radius-control);
}

.btn:disabled,
.btn.disabled {
    background: var(--accent-disabled);
    border-color: transparent;
    color: var(--text-disabled);
    opacity: 1;
}

/* Status buttons keep their hue but adopt the tint + border treatment. */
.btn-success { background: var(--success-500); border-color: var(--success-500); color: var(--text-on-accent); }
.btn-warning { background: var(--warning-500); border-color: var(--warning-500); color: var(--text-on-accent); }
.btn-danger  { background: var(--error-500);   border-color: var(--error-500);   color: var(--offwhite-500); }
.btn-info    { background: var(--info-500);    border-color: var(--info-500);    color: var(--offwhite-500); }

.btn-outline-success { border-color: var(--success-border); color: var(--success-500); background: transparent; }
.btn-outline-warning { border-color: var(--warning-border); color: var(--warning-500); background: transparent; }
.btn-outline-danger  { border-color: var(--error-border);   color: var(--error-500);   background: transparent; }
.btn-outline-info    { border-color: var(--info-border);    color: var(--info-500);    background: transparent; }

.btn-outline-success:hover { background: var(--success-tint); color: var(--success-500); }
.btn-outline-warning:hover { background: var(--warning-tint); color: var(--warning-500); }
.btn-outline-danger:hover  { background: var(--error-tint);   color: var(--error-500); }
.btn-outline-info:hover    { background: var(--info-tint);    color: var(--info-500); }

/* ── Forms ───────────────────────────────────────────────────
   Transparent field on a 14% hairline; focus is copper + ring. */

.form-control,
.form-select {
    background: var(--field-bg);
    border: var(--border-hairline) solid var(--field-border);
    border-radius: var(--radius-control);
    color: var(--text-primary);
    font-size: var(--fs-body);
    transition: border-color var(--dur-fast) var(--ease-standard),
                box-shadow var(--dur-fast) var(--ease-standard);
}

.form-control:focus,
.form-select:focus {
    background: var(--field-bg);
    border-color: var(--field-border-focus);
    box-shadow: var(--focus-ring);
    color: var(--text-primary);
}

.form-control::placeholder { color: var(--field-placeholder); }

.form-control:disabled,
.form-select:disabled {
    background: var(--accent-disabled);
    color: var(--text-disabled);
}

/* Native pickers and dropdown lists render light without this. */
.form-select option,
.form-control option { background: var(--surface-card-raised); color: var(--text-primary); }
.form-control[type="date"]::-webkit-calendar-picker-indicator,
.form-control[type="time"]::-webkit-calendar-picker-indicator { opacity: .55; }

.form-label { color: var(--text-secondary); font-size: var(--fs-label); font-weight: var(--fw-medium); }
.form-text  { color: var(--text-tertiary); font-size: var(--fs-body-sm); }

.form-check-input {
    background-color: transparent;
    border: var(--border-hairline) solid var(--divider-strong);
    border-radius: var(--radius-xs);
}

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

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

.input-group-text {
    background: var(--surface-inset);
    border-color: var(--field-border);
    color: var(--text-secondary);
}

/* ── Tables ──────────────────────────────────────────────────
   "Horizontal rules only — no vertical rules, no zebra striping." */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--divider);
    --bs-table-striped-bg: transparent;
    --bs-table-striped-color: var(--text-primary);
    --bs-table-hover-bg: var(--surface-hover);
    --bs-table-hover-color: var(--text-primary);
    color: var(--text-primary);
    border-color: var(--divider);
}

.table > :not(caption) > * > * {
    background: transparent;
    border-bottom-width: var(--border-hairline);
    border-left: 0;
    border-right: 0;
    color: var(--text-primary);
}

.table.table-bordered,
.table.table-bordered > :not(caption) > * > * {
    border-left: 0;
    border-right: 0;
}

.table > thead th,
.table .table-light,
.table .table-light > * {
    background: transparent !important;
    color: var(--text-secondary) !important;
    font-size: var(--fs-label);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-label);
    border-bottom-color: var(--divider-strong);
}

/* Row status tints, not fills. */
.table .table-success, .table .table-success > * { background: var(--success-tint) !important; color: var(--text-primary) !important; }
.table .table-warning, .table .table-warning > * { background: var(--warning-tint) !important; color: var(--text-primary) !important; }
.table .table-danger,  .table .table-danger  > * { background: var(--error-tint)   !important; color: var(--text-primary) !important; }
.table .table-secondary, .table .table-secondary > * { background: var(--surface-inset) !important; color: var(--text-secondary) !important; }

/* ── Badges ──────────────────────────────────────────────────
   "Tint + 38% border + coloured label. A flat saturated status
   fill appears nowhere." Pill radius. */

.badge {
    border-radius: var(--radius-pill);
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-caption);
    padding: 4px 10px;
    border: var(--border-hairline) solid transparent;
}

.badge.bg-primary   { background: var(--copper-tint-12) !important; border-color: var(--copper-tint-32); color: var(--copper-400) !important; }
.badge.bg-success   { background: var(--success-tint) !important;   border-color: var(--success-border); color: var(--success-500) !important; }
.badge.bg-warning   { background: var(--warning-tint) !important;   border-color: var(--warning-border); color: var(--warning-500) !important; }
.badge.bg-danger    { background: var(--error-tint) !important;     border-color: var(--error-border);   color: var(--error-500) !important; }
.badge.bg-info      { background: var(--info-tint) !important;      border-color: var(--info-border);    color: var(--info-500) !important; }
.badge.bg-secondary { background: var(--surface-inset) !important;  border-color: var(--divider);        color: var(--text-secondary) !important; }
.badge.text-dark    { color: inherit !important; }

/* ── Alerts ──────────────────────────────────────────────────
   Same tint + border + coloured label treatment as badges. */

.alert {
    border-radius: var(--radius-card);
    border-width: var(--border-hairline);
    font-size: var(--fs-body);
}

.alert-success { background: var(--success-tint); border-color: var(--success-border); color: var(--success-500); }
.alert-warning { background: var(--warning-tint); border-color: var(--warning-border); color: var(--warning-500); }
.alert-danger  { background: var(--error-tint);   border-color: var(--error-border);   color: var(--error-500); }
.alert-info    { background: var(--info-tint);    border-color: var(--info-border);    color: var(--info-500); }
.alert-secondary { background: var(--surface-inset); border-color: var(--divider); color: var(--text-secondary); }

.alert .btn-close { opacity: .6; }

/* ── Progress ────────────────────────────────────────────────
   Pill track, copper fill, 320ms eased fill on mount. */

.progress {
    background: var(--surface-inset);
    border-radius: var(--radius-pill);
    height: 8px;
}

.progress-bar {
    background: var(--accent);
    border-radius: var(--radius-pill);
    transition: width var(--dur-slow) var(--ease-out);
}

/* ── Navigation, dropdowns, modals ───────────────────────────── */

.dropdown-menu {
    --bs-dropdown-bg: var(--surface-card-raised);
    --bs-dropdown-link-color: var(--text-primary);
    --bs-dropdown-link-hover-bg: var(--surface-hover);
    --bs-dropdown-link-hover-color: var(--text-primary);
    --bs-dropdown-border-color: var(--divider);
    --bs-dropdown-divider-bg: var(--divider);
}

.nav-link { color: var(--text-secondary); }
.nav-link:hover { color: var(--text-primary); }
.nav-link.active { color: var(--text-accent); }

.modal-header,
.modal-footer { border-color: var(--divider); }

.modal-backdrop { background: var(--surface-overlay); }

.page-link {
    background: transparent;
    border-color: var(--divider);
    color: var(--text-secondary);
}

.page-link:hover { background: var(--surface-hover); color: var(--text-primary); }
.page-item.active .page-link { background: var(--copper-tint-12); border-color: var(--copper-tint-32); color: var(--text-accent); }

/* ── Type ────────────────────────────────────────────────────
   Headings 700 with negative tracking. No serif anywhere — the
   system specifies a single family. */

h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); font-weight: var(--fw-bold); }
h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: var(--fw-bold); }
h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: var(--fw-bold); }
h4, h5, h6 { font-weight: var(--fw-semibold); letter-spacing: var(--ls-title); }

.text-muted { color: var(--text-secondary) !important; }
.text-primary { color: var(--text-accent) !important; }
.small, small { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); }

hr { border-color: var(--divider); opacity: 1; }

/* Bootstrap utility backgrounds that would punch light holes in a dark surface. */
.bg-white { background: var(--surface-card) !important; }
.bg-body,
.bg-body-tertiary { background: var(--surface-inset) !important; }

/* ── Brand ───────────────────────────────────────────────────
   "A copper architectural monogram over the letterspaced ZUGBAM
   wordmark and a copper People & Work OS line." The wordmark is
   one of only two letterspaced types in the system (+0.34em). */

/* The mark sits inside a copper tile, so it takes the on-accent value. */
.sidebar-logo-icon-svg { color: var(--text-on-accent); }

.sidebar-logo-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sidebar-logo-text {
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    font-size: var(--fs-title);
    letter-spacing: 0.34em;
    color: var(--offwhite-500);
    line-height: 1.1;
    white-space: nowrap;
}

.sidebar-logo-sub {
    display: block;
    font-size: var(--fs-overline);
    line-height: var(--lh-overline);
    letter-spacing: var(--ls-overline);
    text-transform: uppercase;
    color: var(--copper-500);
    margin-top: 3px;
    white-space: nowrap;
}

/* ── Auth and onboarding imagery ─────────────────────────────
   "Photography appears only in auth, onboarding and marketing …
   Over photography, text sits on a vertical protection gradient,
   never on a translucent capsule." */

.login-brand-panel {
    background-image: var(--scrim-bottom), url("/images/zugbam/img-architecture.png");
    background-size: cover, cover;
    background-position: center, center;
}

.login-brand-kicker {
    font-size: var(--fs-overline);
    line-height: var(--lh-overline);
    letter-spacing: var(--ls-overline);
    text-transform: uppercase;
    color: var(--copper-500);
}

.login-brand-tagline { color: var(--offwhite-500); }
.login-form-panel,
.login-form-card { background: var(--surface-card); }

/* The system specifies one family; any residual serif moment falls back to it. */
.serif-moment { font-family: var(--font-sans); font-weight: var(--fw-bold); letter-spacing: var(--ls-h1); }