/* ──────────────────────────────────────────────────────────
   TransmedOne — App-wide shared component classes.

   Loaded after Bootstrap 5.3 in base.html. All colours flow
   through `var(--bs-*)` tokens so dark mode (data-bs-theme)
   works automatically. Compact, neutral chrome by default —
   matches the mobile drawer DNA established in base.html.
   ────────────────────────────────────────────────────────── */

:root {
    /* Spacing — page wrappers + cards + rows */
    --app-pad-page-y-top: 12px;
    --app-pad-page-y-bottom: 32px;
    --app-pad-card: 14px 16px;
    --app-pad-row: 10px 12px;

    /* Radius scale */
    --app-radius-sm: 6px;
    --app-radius: 10px;
    --app-radius-lg: 12px;

    /* Font-size scale (matches mobile drawer 13.5px / 0.7rem labels) */
    --app-text-xs: 0.7rem;
    --app-text-sm: 0.78rem;
    --app-text-base: 0.875rem;

    /* Brand-identity colours — used by the home-page app icons and
       the desktop Apps-launcher in base.html. Single source of truth so
       new colours get added in one place, not 7. */
    --app-color-purple: #6f42c1;
    --app-color-purple-rgb: 111, 66, 193;   /* for rgba() tints — keep in sync with --app-color-purple */
    --app-color-pink:   #d63384;
    --app-color-teal:   #20c997;
    --app-color-indigo: #4f46e5;
    --app-color-orange: #fd7e14;

    /* Gradient endpoints for special-cased brand surfaces (AI app, AmazonPO
       time-saved tile). Defined as tokens so they can be tuned per theme later. */
    --app-purple-grad-end: #8e5bd9;
    --app-ai-grad-1: #667eea;
    --app-ai-grad-2: #764ba2;
    --app-ai-grad-3: #f093fb;
}

/* ── Page wrapper ───────────────────────────────────────────
   `base.html` already wraps content in <div class="container">
   which provides the horizontal gutter. `.page-wrap` adds only
   vertical padding — never repeat horizontal here. */
.page-wrap {
    padding: var(--app-pad-page-y-top) 0 var(--app-pad-page-y-bottom);
}

/* ── Card tile ──────────────────────────────────────────────
   Default neutral surface. Theme-aware. */
.card-tile {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--app-radius);
    padding: var(--app-pad-card);
}
/* Same chrome but no internal padding — for tables or lists
   that handle their own padding internally. */
.card-tile-flush {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--app-radius);
    overflow: hidden;
}

/* ── List row ───────────────────────────────────────────────
   Compact row used by list pages (targets / msl / items / etc.).
   Mirrors the mobile drawer's `.drawer-link` DNA. Flush by default
   (no border-radius) so it can sit inside `.card-tile-flush`
   without inner-radius clash. Adjacent rows get a top-border
   separator automatically. */
.list-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: var(--app-pad-row);
    text-decoration: none;
    color: var(--bs-body-color);
    transition: background 0.15s, color 0.15s;
}
.list-row + .list-row { border-top: 1px solid var(--bs-border-color); }
.list-row:hover,
.list-row:focus {
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}
.list-row-title {
    font-size: var(--app-text-base);
    font-weight: 500;
    color: var(--bs-body-color);
}
.list-row-meta {
    font-size: var(--app-text-sm);
    color: var(--bs-secondary-color);
}
.list-row-chevron {
    color: var(--bs-secondary-color);
    font-size: 0.9rem;
    flex-shrink: 0;
}
/* Numeric count chip (employee count, SKU count) — sentence-case,
   distinct from `.app-pill` which is uppercase status text. */
.row-count-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: var(--app-radius-sm);
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    font-size: var(--app-text-sm);
    font-weight: 600;
}

/* Score display — clean right-side numeric stacked over a tiny label.
   Used by performance/scorecard rows. Colour comes from the value's
   text colour, not a boxy chrome (intentional — a quieter alternative
   to .app-pill for numeric KPIs). */
.score-display {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1;
    flex-shrink: 0;
    min-width: 48px;
}
.score-display-value {
    font-size: 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--bs-body-color);
}
.score-display-label {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin-top: 3px;
}
.score-display.good .score-display-value { color: var(--bs-success-text-emphasis); }
.score-display.warn .score-display-value { color: var(--app-warn-fg); }
.score-display.bad  .score-display-value { color: var(--bs-danger-text-emphasis); }
.score-display.none .score-display-value { color: var(--bs-secondary-color); }

/* ── Icon chips ─────────────────────────────────────────────
   Two variants — neutral (compact lists, drawers) and brand
   (hero/launcher contexts where a coloured tile is the point). */
.icon-chip-neutral {
    width: 32px;
    height: 32px;
    border-radius: var(--app-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    font-size: 0.95rem;
    flex-shrink: 0;
}
.icon-chip-brand {
    width: 40px;
    height: 40px;
    border-radius: var(--app-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--chip-color, var(--bs-primary));
    color: #fff;
    font-size: 1.15rem;
    flex-shrink: 0;
}

/* ── Status pills ───────────────────────────────────────────
   Replaces the per-app `.status-pill.ok` / `.env-pill` /
   `.owner-pill` variants. All use Bootstrap's bg-subtle +
   text-emphasis pairs so dark mode stays legible. */
.app-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: var(--app-text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
}
.app-pill.ok      { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.app-pill.error   { background: var(--bs-danger-bg-subtle);  color: var(--bs-danger-text-emphasis); }
.app-pill.running { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }
.app-pill.warn    { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.app-pill.info    { background: var(--bs-info-bg-subtle);    color: var(--bs-info-text-emphasis); }
.app-pill i { font-size: 0.85rem; }

/* ── App buttons ────────────────────────────────────────────
   Neutral default (matches `.apo-btn` from amazonpo). Use
   `.app-btn-primary` for the primary CTA in any block. */
.app-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-radius: var(--app-radius-sm);
    padding: 5px 10px;
    font-size: var(--app-text-sm);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.app-btn:hover {
    background: var(--bs-tertiary-bg);
    border-color: var(--bs-secondary-color);
    color: var(--bs-body-color);
}
.app-btn-primary {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}
.app-btn-primary:hover {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
    filter: brightness(0.92);
}
.app-btn-disabled {
    pointer-events: none;
    opacity: 0.55;
}

/* ── Section label ──────────────────────────────────────────
   Small uppercase divider above grouped content. Weight 600
   intentional — 700 here competes with page-level headings
   for visual emphasis. */
.app-section-label {
    font-size: var(--app-text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}