/*
 * [CHANGE] Workspace shell and operations dashboards (BulkPurchaseIndia tokens).
 *
 * A deliberate visual identity rather than a copy of the reference screenshots.
 * Three rules were followed and are worth writing down, because they are what
 * keeps this from drifting back into template styling:
 *
 *  1. ONE accent colour, used only for the thing the eye should land on. The
 *     reference paints every tile a different colour, which means none of them
 *     is emphasised. Here the surface is neutral and colour carries meaning:
 *     amber is a warning, red is a breach, green is settled.
 *  2. NUMBERS ARE THE CONTENT. Tabular figures, generous size, label above and
 *     context below. A KPI you have to read twice is not a KPI.
 *  3. Borders and elevation instead of gradients. Every panel is one hairline
 *     and one very soft shadow, so a dense operations screen stays calm.
 *
 * Scoped under .aznow-* class names so nothing here can reach the rest of the
 * admin theme by accident.
 */

:root {
    --aznow-accent: var(--bpi-primary);
    --aznow-accent-soft: rgba(var(--bpi-primary-rgb), 0.08);
    --aznow-surface: var(--bpi-surface);
    --aznow-canvas: var(--bpi-surface-secondary);
    --aznow-border: var(--bpi-border);
    --aznow-text: var(--bpi-text-primary);
    --aznow-muted: var(--bpi-text-muted);
    --aznow-good: var(--bpi-success);
    --aznow-warn: var(--bpi-warning);
    --aznow-bad: var(--bpi-error);
}

/* ---------------------------------------------------------------- shell -- */

.workspace-bar {
    min-width: 0;
}

.workspace-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--bpi-border);
    border-radius: var(--bpi-radius);
    background: var(--bpi-surface);
    color: var(--bpi-text-primary);
    font-size: 0.8125rem;
    line-height: 1.2;
    white-space: nowrap;
}

.workspace-chip:hover {
    border-color: var(--bpi-primary);
    background: var(--bpi-primary-subtle);
}

.workspace-chip-static:hover {
    border-color: var(--bpi-border);
    background: var(--bpi-surface);
}

.workspace-chip-label {
    color: var(--bpi-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.625rem;
    font-weight: 600;
}

.workspace-chip-value {
    font-weight: 600;
}

.workspace-chip-muted .workspace-chip-value {
    color: var(--bpi-text-muted);
    font-weight: 500;
}

.workspace-chip-warning {
    border-color: rgba(var(--bpi-warning-rgb), 0.35);
    background: rgba(var(--bpi-warning-rgb), 0.08);
    color: var(--bpi-warning);
}

.workspace-menu {
    min-width: 17rem;
    padding: 0.35rem;
}

.workspace-app-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    border-radius: 0.5rem;
    padding: 0.5rem 0.6rem;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
}

.workspace-app-icon {
    font-size: 1rem;
    margin-top: 0.1rem;
    color: var(--bpi-primary);
}

.workspace-app-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.workspace-app-name {
    font-weight: 600;
    font-size: 0.875rem;
}

.workspace-app-desc {
    font-size: 0.75rem;
    color: var(--bpi-text-muted);
    white-space: normal;
}

.workspace-app-check {
    margin-left: auto;
    color: var(--bpi-success);
}

/* ----------------------------------------------------------- dashboards -- */

.aznow-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.75rem;
}

.aznow-kpi {
    background: var(--bpi-surface);
    border: 1px solid var(--bpi-border);
    border-radius: 0.75rem;
    padding: 0.9rem 1rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.aznow-kpi-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.aznow-kpi-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--bpi-text-muted);
}

.aznow-kpi-icon {
    color: var(--bpi-primary);
    font-size: 1rem;
    opacity: 0.8;
    flex: none;
}

.aznow-kpi-value {
    font-size: 1.65rem;
    font-weight: 650;
    line-height: 1.15;
    color: var(--bpi-text-primary);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.aznow-kpi-foot {
    font-size: 0.75rem;
    color: var(--bpi-text-muted);
}

.aznow-kpi--good .aznow-kpi-value { color: var(--bpi-success); }
.aznow-kpi--warn .aznow-kpi-value { color: var(--bpi-warning); }
.aznow-kpi--bad  .aznow-kpi-value { color: var(--bpi-error); }

/* [CHANGE 2026-09-08] Section bands on the consolidated Operations console.
   One long page needs waypoints or it reads as an undifferentiated wall of
   cards. A band is a rule and two lines of text — deliberately quieter than a
   panel header, because it labels a REGION rather than a component, and if it
   competed with the panel titles inside it the hierarchy would inverted. */
.aznow-band {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.35rem 0 0.5rem;
    margin-top: 0.35rem;
    border-top: 1px solid var(--bpi-border);
}

.aznow-band:first-child {
    border-top: 0;
    margin-top: 0;
}

.aznow-band-title {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--bpi-primary);
}

.aznow-band-sub {
    font-size: 0.75rem;
    color: var(--bpi-text-muted);
}

.aznow-panel-foot {
    padding: 0.55rem 1rem;
    border-top: 1px solid var(--bpi-border);
    font-size: 0.75rem;
    color: var(--bpi-text-muted);
    background: var(--bpi-background);
}

.aznow-panel {
    background: var(--bpi-surface);
    border: 1px solid var(--bpi-border);
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    overflow: hidden;
}

.aznow-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bpi-border);
}

.aznow-panel-title {
    font-size: 0.9375rem;
    font-weight: 650;
    margin: 0;
}

.aznow-panel-sub {
    font-size: 0.75rem;
    color: var(--bpi-text-muted);
    margin: 0;
}

.aznow-panel-body {
    padding: 1rem;
}

/* Wide tables scroll inside their own panel; the page never scrolls sideways. */
.aznow-table-wrap {
    overflow-x: auto;
}

.aznow-table {
    width: 100%;
    margin: 0;
    font-size: 0.8125rem;
}

.aznow-table th {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bpi-text-muted);
    font-weight: 600;
    white-space: nowrap;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--bpi-border);
    background: var(--bpi-background);
}

.aznow-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--bpi-border);
    vertical-align: middle;
}

.aznow-table tbody tr:last-child td {
    border-bottom: 0;
}

.aznow-table tbody tr:hover td {
    background: var(--bpi-primary-subtle);
}

/* A row's action buttons must never wrap or be clipped mid-word. The table
   itself scrolls inside its panel, so the cell just has to refuse to shrink. */
.aznow-table td:last-child,
.aznow-table th:last-child {
    white-space: nowrap;
}

.aznow-num {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.aznow-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: var(--bpi-radius);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    border: 1px solid transparent;
}

.aznow-badge--neutral { background: var(--bpi-surface-sunken); color: var(--bpi-text-secondary); }
.aznow-badge--good    { background: rgba(var(--bpi-success-rgb), 0.10); color: var(--bpi-success); }
.aznow-badge--warn    { background: rgba(var(--bpi-warning-rgb), 0.12); color: var(--bpi-warning); }
.aznow-badge--bad     { background: rgba(var(--bpi-error-rgb), 0.10); color: var(--bpi-error); }

/* Empty and loading states are part of the design, not an afterthought:
   a table that renders nothing at all looks broken. */
.aznow-empty {
    text-align: center;
    padding: 2.25rem 1rem;
    color: var(--bpi-text-muted);
}

.aznow-empty i {
    font-size: 1.75rem;
    display: block;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.aznow-empty-title {
    font-weight: 600;
    color: var(--bpi-text-primary);
    margin-bottom: 0.2rem;
}

.aznow-meter {
    height: 6px;
    border-radius: var(--bpi-radius);
    background: var(--bpi-surface-sunken);
    overflow: hidden;
}

.aznow-meter > span {
    display: block;
    height: 100%;
    border-radius: var(--bpi-radius);
    background: var(--bpi-primary);
}

.aznow-meter--warn > span { background: var(--bpi-warning); }
.aznow-meter--bad  > span { background: var(--bpi-error); }

@media (max-width: 575.98px) {
    .aznow-kpi-value { font-size: 1.35rem; }
    .workspace-chip-label { display: none; }
}

/* The theme ships a dark mode; the panels must not stay white inside it. */
[data-bs-theme="dark"] {
    --aznow-surface: var(--bpi-surface);
    --aznow-canvas: var(--bpi-surface);
    --aznow-border: var(--bpi-border);
    --aznow-text: var(--bpi-text-primary);
    --aznow-muted: var(--bpi-text-secondary);
    --aznow-accent: var(--bpi-primary);
    --aznow-accent-soft: rgba(var(--bpi-info-rgb), 0.12);
}

[data-bs-theme="dark"] .aznow-badge--neutral { background: var(--bpi-surface-secondary); color: var(--bpi-info); }
[data-bs-theme="dark"] .aznow-meter { background: var(--bpi-surface-secondary); }