/**
 * Admin console layout.
 *
 * A section list beside a scrolling body. The theme supplies cards, tables and
 * forms; this only builds the frame and the few small pieces the theme has no
 * component for.
 */

.admin {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    height: calc(100vh - var(--bs-app-header-height, 60px));
    overflow: hidden;
}

.admin-nav {
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0.5rem;
    gap: 0.15rem;
    overflow-y: auto;
    border-right: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
}

.admin-nav-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    text-align: left;
    color: inherit;
    background: none;
    border: 0;
    border-radius: 0.375rem;
}

.admin-nav-item:hover { background: rgba(var(--bs-inverse-rgb), 0.06); }

.admin-nav-item.is-active {
    font-weight: 600;
    color: var(--bs-theme);
    background: rgba(var(--bs-theme-rgb), 0.12);
}

.admin-body {
    min-width: 0;
    overflow-y: auto;
    padding: 1.5rem;
}

/* A single flash line, pinned above the panel it belongs to. */
.admin-flash {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
}

.min-w-0 { min-width: 0; }

/* ------------------------------------------------------------- workspace -- */

.logo-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 7rem;
    height: 4.5rem;
    padding: 0.5rem;
    border: 1px dashed var(--bs-border-color);
    border-radius: 0.5rem;
    background: rgba(var(--bs-inverse-rgb), 0.04);
}

.logo-preview img { max-width: 100%; max-height: 100%; }

.hours-row {
    display: grid;
    grid-template-columns: 7rem 6.5rem 1fr auto 1fr;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
    border-bottom: 1px dotted var(--bs-border-color);
}

.hours-day { font-size: 0.8125rem; font-weight: 500; }

@media (max-width: 575.98px) {
    .hours-row { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------------------ team -- */

.activity-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.4rem 0;
    border-bottom: 1px dotted var(--bs-border-color);
}

/* ------------------------------------------------------------- knowledge -- */

.import-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--bs-border-color);
}

/* -------------------------------------------------------------- channels -- */

.health-stat {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    height: 100%;
}

.health-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.6;
}

.health-value { font-size: 0.9375rem; font-weight: 600; }

/* -------------------------------------------------------------- features -- */

.feature-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.feature-row + .feature-row { border-top: 1px dotted var(--bs-border-color); }

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 767.98px) {
    .admin {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
    }

    .admin-nav {
        flex-direction: row;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid var(--bs-border-color);
    }

    .admin-nav-item { width: auto; white-space: nowrap; }

    .admin-body { padding: 1rem; }
}

/* --------------------------------------------------------- coverage -- */

/* A gap is a heading, the customers' own words, and one action. The
   questions are the point: they are how the answer should be written. */
.gap {
    padding: 0.75rem 0;
    border-top: 1px solid var(--bs-border-color);
}

.gap-questions {
    margin: 0.4rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.8125rem;
    color: var(--bs-body-color);
    opacity: 0.75;
}

.gap-questions li { margin-bottom: 0.15rem; }

/* ---------------------------------------------------- add knowledge -- */

/* Upload and website import side by side, because they are two answers to
   the same question and a customer should see both before choosing. */
.add-knowledge {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.6fr);
    gap: 1rem;
    align-items: start;
}

.add-knowledge-option .panel-title { opacity: 0.85; }

.add-knowledge-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.5;
}

/* A hairline above and below the word, so "or" reads as a choice rather
   than a label floating between two panels. */
.add-knowledge-divider::before,
.add-knowledge-divider::after {
    content: '';
    flex: 1;
    width: 1px;
    background: var(--bs-border-color);
}

.add-knowledge-divider span { padding: 0.35rem 0; }

@media (max-width: 991.98px) {
    .add-knowledge { grid-template-columns: minmax(0, 1fr); }

    .add-knowledge-divider {
        flex-direction: row;
        gap: 0.5rem;
    }

    .add-knowledge-divider::before,
    .add-knowledge-divider::after {
        width: auto;
        height: 1px;
    }
}

/* ------------------------------------------------------ beta scorecard -- */

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

/* The status colour lives on the left edge rather than the whole card: five
   filled panels read as an alarm even when three of them are passing. */
.metric {
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--bs-border-color);
    border-left-width: 3px;
    border-radius: 0.5rem;
    background: rgba(var(--bs-inverse-rgb), 0.02);
}

.metric.is-pass { border-left-color: var(--bs-success); }
.metric.is-fail { border-left-color: var(--bs-danger); }
.metric.is-unmeasured { border-left-color: var(--bs-border-color); }

/* Wraps rather than squeezing: with the status pinned nowrap, the label was
   being broken mid-word into "RETRIEVAL TOP-" / "1". The status dropping to
   its own line costs nothing; a hyphenated metric name is unreadable. */
.metric-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.15rem 0.5rem;
    margin-bottom: 0.15rem;
    min-height: 2.1em;
}

.metric-label {
    /* Never hyphenate a metric name. */
    hyphens: manual;
    word-break: keep-all;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.7;
}

.metric-status {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.6;
    white-space: nowrap;
}

.is-pass .metric-status { color: var(--bs-success); opacity: 1; }
.is-fail .metric-status { color: var(--bs-danger); opacity: 1; }

.metric-value { font-size: 1.5rem; font-weight: 600; line-height: 1.1; }
.is-unmeasured .metric-value { opacity: 0.35; }

.metric-target { font-size: 0.6875rem; opacity: 0.55; }

.metric-bar {
    position: relative;
    height: 4px;
    margin: 0.5rem 0 0.35rem;
    border-radius: 2px;
    background: rgba(var(--bs-inverse-rgb), 0.1);
    overflow: hidden;
}

.metric-bar-fill { height: 100%; background: var(--bs-secondary); }
.is-pass .metric-bar-fill { background: var(--bs-success); }
.is-fail .metric-bar-fill { background: var(--bs-danger); }

/* A tick where the target sits, so the bar answers "how far off" rather than
   just "how big". */
.metric-bar-target {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 2px;
    background: var(--bs-body-color);
    opacity: 0.55;
    overflow: visible;
}

.metric-note { font-size: 0.6875rem; opacity: 0.6; }

.metric { display: flex; flex-direction: column; }

.metric-note { margin-top: auto; }

.metric-warning {
    margin-top: 0.35rem;
    font-size: 0.6875rem;
    color: var(--bs-warning);
}

/* ------------------------------------------------------------ latency -- */

.latency-bar {
    display: flex;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    background: rgba(var(--bs-inverse-rgb), 0.1);
}

.latency-retrieval { background: var(--bs-info); }
.latency-generation { background: var(--bs-theme); }

.legend {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 0.35rem;
    vertical-align: middle;
}

.legend-retrieval { background: var(--bs-info); }
.legend-generation { background: var(--bs-theme); }
/* ------------------------------------------------------ beta dashboard -- */

/* Two columns on a wide screen so the four questions are visible together:
   containment means nothing without the grounded rate beside it. */
.dash-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.dash-group { margin-bottom: 0; }

.dash-group .card-header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; }

.dash-sub {
    font-size: 0.6875rem;
    font-weight: 400;
    opacity: 0.55;
    text-transform: none;
    letter-spacing: 0;
}

.dash-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
}

.dash-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.6;
}

.dash-value { font-size: 1.35rem; font-weight: 600; line-height: 1.2; }
.dash-hint { font-size: 0.625rem; opacity: 0.5; }

.dash-split {
    margin-top: 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--bs-border-color);
}

.dash-split-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.6;
    margin-bottom: 0.35rem;
}

.dash-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    padding: 0.15rem 0;
    min-width: 0;
}

.dash-row-meta { font-size: 0.6875rem; opacity: 0.5; margin-left: auto; }
.dash-row strong { margin-left: 0.5rem; }

.dash-empty { font-size: 0.75rem; opacity: 0.5; padding: 0.25rem 0; }

/* Draft outcomes: one bar, because the split between them is the point. */
.dash-bar {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: rgba(var(--bs-inverse-rgb), 0.1);
}

.dash-unchanged { background: var(--bs-success); }
.dash-edited { background: var(--bs-warning); }
.dash-discarded { background: var(--bs-danger); }

.dash-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.4rem;
    font-size: 0.6875rem;
    opacity: 0.75;
}

.legend-unchanged { background: var(--bs-success); }
.legend-edited { background: var(--bs-warning); }
.legend-discarded { background: var(--bs-danger); }

@media (max-width: 991.98px) {
    .dash-groups { grid-template-columns: minmax(0, 1fr); }
}