/* ============================================================
   admin.css - Admin chrome component rules.
   Consumes semantic roles from tokens.css only - no raw hex.
   ============================================================ */

/* Page canvas & typography ride the token system so dark mode
   is a pure attribute swap on <html data-theme>. */
body {
    background-color: var(--bg-canvas);
    color: var(--text-1);
    font-family: var(--font-family);
    font-weight: var(--wght-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

    /* Admin canvas: the spec's #F8FAFD (front site keeps #F0F4F9).
       Scoped to light; dark keeps its designed deep canvas. */
    --bg-canvas-light: #f8fafd;
    --bs-body-color: var(--text-1);
    --bs-secondary-color: var(--text-2);
    --bs-emphasis-color: var(--text-1);
    --bs-body-bg: var(--bg-canvas);
    --bs-secondary-bg: var(--bg-surface);
    --bs-tertiary-bg: var(--bg-elevated);
    --bs-border-color: var(--border);
    --bs-code-color: var(--text-1);
}

html:not([data-theme="dark"]) body {
    --bg-canvas: var(--bg-canvas-light);
}

/* Bootstrap contextual text utilities re-tuned onto status tokens
   (!important matches the utility's own specificity guard). */
.text-danger { color: var(--status-danger) !important; }
.text-success { color: var(--status-success) !important; }
.text-warning { color: var(--status-warning-strong) !important; }
.text-info { color: var(--status-info) !important; }

/* Content-area anchors: Bootstrap's stock link blue fails AA on
   the canvas in dark mode. */
main a {
    color: var(--link);
}

/* Top brand bar */
.navbar-brand {
    padding-top: .75rem;
    padding-bottom: .75rem;
}

.admin-topbar {
    position: relative;
    background-color: var(--bg-surface);
    box-shadow: var(--shadow-1);
    z-index: var(--z-sticky);
}

/* Four-color brand bar pinned to the top of the admin toolbar */
.admin-topbar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--four-color-bar);
}

.admin-topbar .navbar-brand {
    color: var(--text-1);
}

.admin-topbar .nav-link {
    color: var(--text-2);
}

.admin-topbar .nav-link:hover,
.admin-topbar .nav-link:focus {
    color: var(--link);
}

/* Theme toggle (same id/class contract as the public site header) */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-pill);
    color: var(--text-2);
    transition: color var(--motion-fast) ease-in-out,
                background-color var(--motion-fast) ease-in-out;
}

.theme-toggle:hover {
    color: var(--text-1);
    background-color: var(--bg-hover-row);
}

.theme-toggle:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Section navigation pills */
.admin-nav {
    background-color: var(--bg-surface);
    border-bottom: 1px solid var(--gray-200);
    padding: 0.5rem 0;
    overflow-x: auto;
}

[data-theme="dark"] .admin-nav {
    border-bottom-color: #2a323c;
}

.admin-nav .nav {
    flex-wrap: nowrap;
    min-width: max-content;
}

.admin-nav .nav-link {
    font-weight: var(--wght-ui);
    color: var(--text-2);
    padding: 0.75rem 1rem;
    margin: 0 0.25rem;
    border-radius: var(--radius-pill);
    transition: all var(--motion-fast) ease-in-out;
    white-space: nowrap;
}

.admin-nav .nav-link .bi {
    margin-right: 6px;
    color: var(--text-3);
}

/* Selected section: light-blue capsule + deep-sea text
   (Chrome-settings style), dark-tuned pair below. */
.admin-nav .nav-link.active {
    color: var(--accent-ramp-950);
    background-color: var(--accent-ramp-200);
}

.admin-nav .nav-link.active .bi {
    color: var(--accent-ramp-950);
}

[data-theme="dark"] .admin-nav .nav-link.active {
    color: var(--accent-ramp-300);
    background-color: var(--accent-soft);
}

[data-theme="dark"] .admin-nav .nav-link.active .bi {
    color: var(--accent-ramp-300);
}

.admin-nav .nav-link:hover {
    color: var(--link);
    background-color: var(--bg-canvas);
}

.admin-nav .nav-link:hover .bi {
    color: var(--link);
}

@media (max-width: 768px) {
    .admin-nav {
        overflow-x: visible;
    }

    .admin-nav .nav {
        flex-wrap: wrap;
        justify-content: center;
        min-width: auto;
    }

    .admin-nav .nav-link {
        padding: 0.6rem;
        margin: 0.1rem;
        font-size: 1.1rem;
        min-width: 44px;
        text-align: center;
    }

    .admin-nav .nav-link .bi {
        margin-right: 0;
        display: block;
    }

    .admin-nav .nav-link .nav-text {
        display: none;
    }
}

main {
    padding: 20px;
    margin-top: 0;
}


/* Bootstrap alerts re-tuned onto status tokens for both themes;
   borders retired - the soft wash is the surface */
.alert-warning {
    background-color: var(--status-warning-soft);
    border: none;
    color: var(--status-warning-strong);
    font-weight: var(--wght-ui);
}

.alert-danger {
    background-color: var(--status-danger-soft);
    border: none;
    color: var(--status-danger);
    font-weight: var(--wght-ui);
}

.alert-success {
    background-color: var(--status-success-soft);
    border: none;
    color: var(--status-success);
    font-weight: var(--wght-ui);
}

.alert-info {
    background-color: var(--status-info-soft);
    border: none;
    color: var(--status-info);
    font-weight: var(--wght-ui);
}

/* ------------------------------------------------------------
   Bootstrap component re-tuning onto token roles (AA in both
   themes). Resting-state text/border colors only; hover/focus
   machinery stays stock Bootstrap.
   ------------------------------------------------------------ */

.btn-outline-primary {
    --bs-btn-color: var(--link);
    --bs-btn-border-color: var(--link);
}

.btn-outline-secondary {
    --bs-btn-color: var(--text-2);
    --bs-btn-border-color: var(--text-2);
}

.btn-outline-success {
    --bs-btn-color: var(--status-success);
    --bs-btn-border-color: var(--status-success);
}

.btn-outline-danger {
    --bs-btn-color: var(--status-danger);
    --bs-btn-border-color: var(--status-danger);
}

.btn-outline-warning {
    --bs-btn-color: var(--status-warning-strong);
    --bs-btn-border-color: var(--status-warning-strong);
}

.btn-outline-info {
    --bs-btn-color: var(--status-info);
    --bs-btn-border-color: var(--status-info);
}

/* Surfaces follow the token system so dark mode is not stuck on
   Bootstrap's white cards/modals. Borders retired: floating islands. */
.card,
.modal-content {
    background-color: var(--bg-surface);
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
}

.card-header {
    border-bottom: 1px solid var(--gray-100);
}

[data-theme="dark"] .card-header {
    border-bottom-color: #2a323c;
}

.text-muted {
    color: var(--text-2);
}

/* Links inside soft-tinted alerts need a role that clears 4.5:1
   against both light and dark alert washes. */
.alert a {
    color: var(--status-info);
}

/* Content-page tab strip: Bootstrap default link blue fails AA
   on the canvas in dark mode. */
.nav-tabs .nav-link {
    color: var(--text-2);
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    color: var(--link);
}

/* ThoughtLog code blocks (agent config/state, turn payloads, tool args).
   Bootstrap's .bg-light is a hardcoded light surface that breaks AA in dark
   theme (1.18:1); these blocks use token roles instead. */
.thought-pre {
    background-color: var(--bg-canvas);
    color: var(--text-1);
    border: none;
    border-radius: var(--radius-md);
}

/* Table headers: harmonize standard Bootstrap tables with admin token typography */
.table thead th {
    color: var(--text-2);
    font-size: var(--font-size-xs, 0.8125rem);
    font-weight: var(--wght-strong);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border-bottom-color: var(--gray-200);
}

[data-theme="dark"] .table thead th {
    border-bottom-color: #2a323c;
}

/* Dark mode overrides for Bootstrap light utility classes to prevent glaring white surfaces */
[data-theme="dark"] .table-light {
    --bs-table-bg: var(--bg-surface);
    --bs-table-color: var(--text-2);
    --bs-table-border-color: var(--border);
    background-color: var(--bg-surface);
    color: var(--text-2);
}

[data-theme="dark"] .bg-light {
    background-color: var(--bg-surface) !important;
    color: var(--text-1) !important;
}

[data-theme="dark"] .bg-body-tertiary {
    background-color: var(--bg-elevated) !important;
}

[data-theme="dark"] .text-dark {
    color: var(--text-1) !important;
}

/* ------------------------------------------------------------
   Pill controls: Bootstrap buttons and form fields join the
   front-site capsule language. Input groups restore joined
   shapes so adjoining fields still read as one control.
   ------------------------------------------------------------ */
.btn,
.form-control,
.form-select {
    border-radius: var(--radius-pill);
}

.input-group .form-control,
.input-group .form-select,
.input-group-text {
    border-radius: var(--radius-sm);
}

.input-group .btn {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.input-group > :first-child {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.dropdown-menu {
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-3);
}

.pagination .page-link {
    border-radius: var(--radius-pill);
    border: none;
}

.pagination .page-item + .page-item .page-link {
    margin-left: 4px;
}

/* ------------------------------------------------------------
   Scrollbar: quiet rounded thumb, Windows arrow buttons removed
   (same contract as the public site).
   ------------------------------------------------------------ */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--gray-300) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--gray-300);
    border-radius: var(--radius-pill);
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-button {
    display: none;
    height: 0;
    width: 0;
}

[data-theme="dark"] {
    scrollbar-color: #3c4454 transparent;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background-color: #3c4454;
}

/* Align admin chrome with the public site while keeping dense tools readable. */
.admin-topbar { box-shadow:none; border-bottom:1px solid var(--gray-200); }
.admin-topbar::before { display:none; }
.admin-topbar .navbar-brand { color:var(--link); }
.admin-nav .nav-link { border-radius:8px; }
html[data-theme="dark"] .admin-topbar { border-bottom-color:#2a323c; }