/*
 * Shared component classes for ad_admin (Phase 1).
 * Built on tokens.css — do not hardcode colors/spacing here.
 *
 * Scope: only patterns Bootstrap doesn't already cover well.
 * For margins/padding/visibility/alignment, prefer existing Bootstrap utilities
 * (mt-3, fw-bold/font-weight-bold, text-center, d-none, etc.).
 *
 * Migration map (inline style → utility):
 *   style="margin-top: 1rem;"        → class="mt-3"                  (BS4 + BS5)
 *   style="font-weight: bold;"       → class="text-bold"             (this file, BS-version agnostic)
 *   style="text-align: center;"      → class="text-center"           (BS4 + BS5)
 *   style="display:none;"            → class="d-none"                (BS4 + BS5)
 *   style="height:...groove skyblue" → use <hr class="divider">      (this file)
 */

/* ============================================================
 * Divider — replaces the recurring inline horizontal-rule hacks:
 *   <hr style="height:10px;border:none;border-top:5px groove skyblue;">
 *   <hr style="height:2px;border:none;border-top:5px groove skyblue;">
 *   <hr style="height:2px;border:none;border-top:2px groove azure;">
 *   <hr style="height:2px;border:none;border-top:5px groove aqua;">
 * Covers ~45 inline-style occurrences across templates/op/ and templates/ssp/.
 * ============================================================ */
.divider {
    height: 10px;
    border: none;
    border-top: 5px groove var(--color-border-divider);
    /* no margin override — defer to <hr> defaults so visual matches legacy inline use */
}

.divider--thin {
    height: 2px;
}

.divider--soft {
    border-top-color: var(--color-border-divider-soft);
    border-top-width: 2px;
}

.divider--aqua {
    border-top-color: aqua;
}

/* ============================================================
 * Text weight — bridges BS4 (.font-weight-bold) and BS5 (.fw-bold)
 * so templates work the same in both services without if/else.
 * Replaces 24+ inline `font-weight: bold` occurrences.
 * ============================================================ */
.text-bold {
    font-weight: var(--font-weight-bold);
}

.text-medium {
    font-weight: var(--font-weight-medium);
}

/* ============================================================
 * Required-field marker — promote `p.required::after` from base.css
 * to a generic `.required` for any element. Token-driven color.
 * ============================================================ */
.required::after,
.required-field::after {
    content: "*";
    color: var(--color-text-required);
    margin-left: var(--space-1);
}

/* ============================================================
 * Field help text — small muted note under form inputs.
 * Replaces ad-hoc <small style="color: #6c757d; font-size: 12px;"> patterns.
 * ============================================================ */
.field-help {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: var(--line-height-tight);
}

/* ============================================================
 * KPI metric card — standardizes dashboard tile rendering
 * to replace ad-hoc divs with hardcoded sizing.
 * ============================================================ */
.metric-card {
    padding: var(--space-4);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.metric-card__label {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.metric-card__value {
    margin: 0;
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    line-height: var(--line-height-tight);
}

.metric-card__delta {
    margin: var(--space-1) 0 0;
    font-size: var(--text-sm);
}

.metric-card__delta--up    { color: var(--color-success); }
.metric-card__delta--down  { color: var(--color-danger); }
.metric-card__delta--flat  { color: var(--color-text-muted); }

/* ============================================================
 * Status badges — semantic chips for record states.
 * Reuse outside Bootstrap's badge classes to avoid BS4/BS5 divergence.
 * ============================================================ */
.chip {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
}

.chip--success { background: var(--color-success-subtle); color: var(--color-success); }
.chip--warning { background: var(--color-warning-subtle); color: #856404; }
.chip--danger  { background: var(--color-danger-subtle);  color: var(--color-danger); }
.chip--info    { background: var(--color-info-subtle);    color: var(--color-info); }
.chip--muted   { background: var(--color-bg-muted);       color: var(--color-text-muted); }

/* ============================================================
 * Sticky table header — turns standard tables into scannable
 * data grids. Apply to <thead> or wrap table in a scrolling container.
 * ============================================================ */
.table-sticky-head thead th {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: var(--color-bg);
    box-shadow: 0 1px 0 var(--color-border);
}

/* ============================================================
 * .app-table — canonical list/report table styling (Phase 4).
 *
 * Composes with Bootstrap's `.table`. Use inside `.app-table-wrap`
 * (or the `_shared/_partials/table_wrapper.html` partial) to get
 * a scrollable container with sticky header, empty state, loading
 * indicator, and density toggle.
 *
 * Usage:
 *   <div class="app-table-wrap" :class="{ 'is-compact': compact }">
 *     <table class="table app-table">...</table>
 *   </div>
 *
 * Sort headers: <th class="app-table__sort" hx-get="..."> renders an
 * inline sort indicator. Pair with the `is-sorted-asc` / `is-sorted-desc`
 * modifier on <th> to show direction.
 * ============================================================ */
.app-table-wrap {
    position: relative;
    max-height: var(--app-table-max-height, 70vh);
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
}

.app-table {
    margin-bottom: 0;
}

.app-table thead th {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: var(--color-bg-subtle);
    border-bottom: 2px solid var(--color-border);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

/* Density variants — set on the wrap so the same table works in both modes. */
.app-table-wrap.is-compact .app-table th,
.app-table-wrap.is-compact .app-table td {
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
    font-size: var(--text-xs);
}

/* Empty/zero-state row — centered muted text in a single colspan cell. */
.app-table__empty {
    text-align: center;
    color: var(--color-text-muted);
    padding: var(--space-5) var(--space-3);
}

/* Sortable headers — htmx hx-get on the <th> triggers a swap.
 * `is-sorted-asc` / `is-sorted-desc` show direction; default state shows
 * a faint up/down indicator so the affordance is discoverable. */
.app-table__sort {
    cursor: pointer;
    user-select: none;
}

.app-table__sort::after {
    content: "↕";
    margin-left: var(--space-1);
    color: var(--color-text-muted);
    font-size: 0.85em;
    opacity: 0.5;
}

.app-table__sort.is-sorted-asc::after  { content: "▲"; opacity: 1; }
.app-table__sort.is-sorted-desc::after { content: "▼"; opacity: 1; }

.app-table__sort:hover { background: var(--color-bg-muted); }

/* htmx loading indicator — wrapper-level overlay during requests.
 * Pair with `hx-indicator=".app-table__loading"` on the swap target. */
.app-table__loading {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    z-index: var(--z-sticky);
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.htmx-request .app-table__loading,
.app-table__loading.htmx-request {
    display: flex;
}

/* Density toggle button — small icon-style control in the table toolbar. */
.app-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-2) 0;
}

.app-table-toolbar .btn {
    line-height: 1;
}

/* ============================================================
 * Alpine.js helpers
 * ============================================================ */

/* Hide elements until Alpine boots; prevents flash of unstyled content. */
[x-cloak] {
    display: none !important;
}

/* ============================================================
 * Toast notifications — paired with templates/_shared/_partials/toast.html.
 * ============================================================ */
.toast-container {
    position: fixed;
    top: var(--space-4);
    right: var(--space-4);
    z-index: var(--z-tooltip);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    pointer-events: none;
}

.toast {
    padding: var(--space-3) var(--space-4);
    min-width: 240px;
    max-width: 360px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-size: var(--text-sm);
    color: var(--color-text);
    background: var(--color-bg);
    border-left: 4px solid var(--color-info);
    pointer-events: auto;
    cursor: pointer;
}

.toast--success { border-left-color: var(--color-success); }
.toast--warning { border-left-color: var(--color-warning); }
.toast--danger  { border-left-color: var(--color-danger); }
.toast--info    { border-left-color: var(--color-info); }

/* ============================================================
 * Image preview backdrop — for Alpine-driven inline magnifiers.
 * Used by templates that previously called $("#imgMagnifyModal").modal().
 * ============================================================ */
.img-preview-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}

.img-preview {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
}

/* ============================================================
 * Chart containers (Phase 6) — paired with static/js/charts.js.
 *
 * .app-chart       — full-size chart canvas
 * .app-chart--md   — preset medium height (matches prior 20rem inline)
 * .app-chart-empty — replaces blank-axes when there's no data
 * .app-sparkline   — inline sparkline next to a KPI value
 * ============================================================ */
.app-chart {
    width: 100%;
    height: 20rem;
}

.app-chart--lg { height: 26rem; }
.app-chart--sm { height: 12rem; }

.app-chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    padding: var(--space-6) var(--space-3);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-subtle);
}

.app-sparkline {
    display: inline-block;
    width: 96px;
    height: 28px;
    vertical-align: middle;
    margin-left: var(--space-2);
}

/* ============================================================
 * Sidebar icon — fixed margin around a sidebar nav <i> or empty spacer.
 * Replaces 26 inline `style="margin-left:1rem;margin-right: 10px"` in ssp/sidebar.html.
 * ============================================================ */
.sidebar-icon {
    display: inline-block;
    margin-left: 1rem;
    margin-right: 10px;
}

/* ============================================================
 * Section header — used at the top of major content blocks.
 * Replaces the existing .page-header from base.css with token-driven sizing.
 * Keep base.css class for backwards compatibility; new code uses this.
 * ============================================================ */
.section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: var(--space-2);
    margin: 0 0 var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.section-header__title {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: var(--font-weight-medium);
}

.section-header__actions {
    display: flex;
    gap: var(--space-2);
}