/*
 * Auth-server admin console theme — matches optimusprimeui.
 * Tokens copied from optimusprimeui/src/styles.css (:root + .dark);
 * component styling from docs/ui/Optimus Prime Auth Admin.dc.html.
 */

:root {
    --op-surface: #FFFFFF;
    --op-surface-alt: #F6F7F9;
    --op-content: #0E1116;
    --op-content-second: #3F4650;
    --op-content-muted: #6B7280;
    --op-border-subtle: #E3E6EB;
    --op-border-input: #C3C9D2;
    --op-brand: #0B1F3B;
    --op-brand-accent: #8D0C16;

    --op-ok: #14532D;
    --op-ok-tint: #EAF6EE;
    --op-danger: #8D0C16;
    --op-danger-tint: #FBEDEE;

    --op-drawer-bg: #0B1F3B;
    --op-drawer-fg: #C7D2E0;
    --op-drawer-hover: #13294D;
    --op-drawer-active: #1E3A5F;
    --op-drawer-border: #13294D;
    --op-drawer-section: #6E86A6;

    --op-table-head: #EEF2F7;
    --op-table-alt: #FBFCFD;

    --op-elev-1: 0 2px 6px rgba(11, 31, 59, .12);
    --op-elev-2: 0 12px 32px rgba(11, 31, 59, .22);

    --op-font-ui: "DM Sans", "Google Sans", system-ui, sans-serif;
    --op-font-display: "EB Garamond", Georgia, serif;
}

.dark {
    --op-surface: #0E2340;
    --op-surface-alt: #0B1F3B;
    --op-content: #EEF2F7;
    --op-content-second: #C7D2E0;
    --op-content-muted: #9DB0C9;
    --op-border-subtle: #173056;
    --op-border-input: #173056;
    --op-brand: #9DB0C9;
    --op-brand-accent: #C24A53;

    --op-ok: #4ADE80;
    --op-ok-tint: #12351F;
    --op-danger: #C24A53;
    --op-danger-tint: #2C0306;

    --op-drawer-bg: #081629;
    --op-drawer-fg: #C7D2E0;
    --op-drawer-hover: #0E2340;
    --op-drawer-active: #13294D;
    --op-drawer-border: #12294A;
    --op-drawer-section: #6E86A6;

    --op-table-head: #0E2340;
    --op-table-alt: #0C1D38;

    --op-elev-1: 0 2px 6px rgba(0, 0, 0, .40);
    --op-elev-2: 0 12px 32px rgba(0, 0, 0, .55);
}

* {
    box-sizing: border-box;
    border-radius: 0;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--op-font-ui);
    background: var(--op-surface-alt);
    color: var(--op-content);
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--op-brand); text-decoration: none; }
a:hover { color: var(--op-brand-accent); text-decoration: underline; }

/* ---------- Shell ---------- */
.op-shell { display: flex; min-height: 100vh; }

.op-sidebar {
    width: 236px;
    flex-shrink: 0;
    background: var(--op-drawer-bg);
    color: var(--op-drawer-fg);
    display: flex;
    flex-direction: column;
}

.op-sidebar-header {
    height: 64px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 18px;
    border-bottom: 1px solid var(--op-drawer-border);
}
.op-sidebar-header .op-logo { width: 24px; height: 24px; flex-shrink: 0; }
.op-sidebar-header .op-brandname {
    color: #FFFFFF; font-size: 13px; font-weight: 700; letter-spacing: 0.12em;
}

.op-nav { flex: 1; padding: 18px 12px; overflow-y: auto; }
.op-nav-section {
    color: var(--op-drawer-section);
    font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
    padding: 14px 10px 6px;
}
.op-nav-link {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px;
    font-size: 14px; color: var(--op-drawer-fg);
    border-left: 3px solid transparent;
}
.op-nav-link:hover { background: var(--op-drawer-hover); color: #FFFFFF; text-decoration: none; }
.op-nav-link.active {
    background: var(--op-drawer-active); color: #FFFFFF; font-weight: 600;
    border-left-color: var(--op-brand-accent);
}
.op-nav-link i { font-size: 14px; width: 16px; text-align: center; }

.op-sidebar-footer {
    border-top: 1px solid var(--op-drawer-border);
    padding: 14px 16px;
    display: flex; align-items: center; gap: 10px;
}
.op-avatar {
    width: 30px; height: 30px; flex-shrink: 0;
    background: var(--op-drawer-active); color: #FFFFFF;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600;
}
.op-sidebar-footer .name { color: #FFFFFF; font-size: 13px; font-weight: 600; }
.op-sidebar-footer .sub { color: var(--op-drawer-section); font-size: 11px; }
.op-linkbtn {
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--op-drawer-fg); font: inherit; font-size: 12px;
}
.op-linkbtn:hover { color: #FFFFFF; text-decoration: underline; }

/* ---------- Main ---------- */
.op-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.op-topbar {
    height: 64px;
    background: var(--op-surface);
    border-bottom: 1px solid var(--op-border-subtle);
    box-shadow: var(--op-elev-1);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 28px;
}
.op-breadcrumb { font-size: 13px; color: var(--op-content-muted); }
.op-topbar-right { display: flex; align-items: center; gap: 16px; font-size: 13px; }
.op-iconbtn {
    background: none; border: 1px solid var(--op-border-input); cursor: pointer;
    color: var(--op-content-second); width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
}
.op-iconbtn:hover { border-color: var(--op-brand); color: var(--op-brand); }

.op-content { flex: 1; padding: 28px; overflow-y: auto; }

.op-kicker {
    font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--op-content-muted); margin-bottom: 6px;
}
.op-title {
    font-family: var(--op-font-display); font-weight: 500; font-size: 34px;
    letter-spacing: -0.01em; margin: 0; color: var(--op-content);
}
.op-blurb { font-size: 14px; color: var(--op-content-second); margin: 6px 0 0; }
.op-header-row { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; }

/* ---------- Cards / panels ---------- */
.op-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 16px; }
.op-card {
    background: var(--op-surface); border: 1px solid var(--op-border-subtle); padding: 20px;
    display: block; color: inherit;
}
.op-card:hover { border-color: var(--op-brand); text-decoration: none; }
.op-card .value { font-family: var(--op-font-display); font-weight: 500; font-size: 40px; color: var(--op-content); }
.op-card .label { font-size: 13px; color: var(--op-content-muted); margin-top: 4px; }

.op-panel { background: var(--op-surface); border: 1px solid var(--op-border-subtle); }
.op-panel-header {
    padding: 16px 20px; border-bottom: 1px solid var(--op-border-subtle);
    font-size: 14px; font-weight: 600; color: var(--op-content);
}
.op-panel-body { padding: 20px; }

/* ---------- Buttons ---------- */
.op-btn, .op-btn-secondary, .op-btn-danger {
    display: inline-flex; align-items: center; gap: 8px;
    height: 38px; padding: 0 16px; font-family: var(--op-font-ui);
    font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent;
    text-decoration: none;
}
.op-btn { background: var(--op-brand); color: #FFFFFF; border-color: var(--op-brand); }
.op-btn:hover { background: var(--op-drawer-hover); color: #FFFFFF; text-decoration: none; }
.op-btn-secondary { background: var(--op-surface); color: var(--op-brand); border-color: var(--op-border-input); }
.op-btn-secondary:hover { border-color: var(--op-brand); text-decoration: none; }
.op-btn-danger { background: var(--op-surface); color: var(--op-brand-accent); border-color: var(--op-border-input); }
.op-btn-danger:hover { background: var(--op-danger-tint); border-color: var(--op-brand-accent); text-decoration: none; }
.op-btn-sm { height: 30px; padding: 0 9px; font-size: 12px; }

/* ---------- Tables ---------- */
.op-table { width: 100%; border-collapse: collapse; background: var(--op-surface); border: 1px solid var(--op-border-subtle); }
.op-table thead th {
    background: var(--op-table-head); text-align: left;
    font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--op-brand);
    padding: 10px 16px; border-bottom: 1px solid var(--op-border-input);
}
.op-table tbody td { padding: 12px 16px; font-size: 14px; color: var(--op-content); border-bottom: 1px solid var(--op-border-subtle); }
.op-table tbody tr:nth-child(even) { background: var(--op-table-alt); }
.op-table .muted { font-size: 12px; color: var(--op-content-muted); }
.op-actions { white-space: nowrap; display: flex; gap: 8px; align-items: center; }
.op-empty { padding: 28px 16px; text-align: center; color: var(--op-content-muted); }

/* ---------- Badges / chips ---------- */
.op-badge-ok, .op-badge-danger, .op-chip {
    display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 9px; line-height: 1.4;
}
.op-badge-ok { color: var(--op-ok); background: var(--op-ok-tint); border: 1px solid var(--op-ok); }
.op-badge-danger { color: var(--op-brand-accent); background: var(--op-danger-tint); border: 1px solid var(--op-brand-accent); }
.op-chip { color: var(--op-brand); background: var(--op-table-head); border: 1px solid var(--op-border-input); margin: 0 4px 4px 0; }

/* ---------- Forms ---------- */
.op-form { background: var(--op-surface); border: 1px solid var(--op-border-subtle); padding: 24px; max-width: 720px; }
.op-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 18px; }
.op-field { display: flex; flex-direction: column; gap: 6px; }
.op-field.full { grid-column: 1 / -1; }
.op-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--op-content-muted); }
.op-req { color: var(--op-brand-accent); }
.op-input, .op-select, .op-textarea {
    background: var(--op-surface); color: var(--op-content);
    border: 1px solid var(--op-border-input); height: 38px; padding: 0 10px;
    font-family: var(--op-font-ui); font-size: 14px; width: 100%;
}
.op-textarea { height: auto; padding: 8px 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.op-input:focus, .op-select:focus, .op-textarea:focus { outline: 2px solid var(--op-brand); outline-offset: -1px; }
.op-input.invalid, .op-select.invalid { border-color: var(--op-brand-accent); }
.op-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--op-content); }
.op-check input { width: 16px; height: 16px; accent-color: var(--op-brand); }
.op-error { color: var(--op-brand-accent); font-size: 12px; margin: 2px 0 0; }
.op-form-actions { display: flex; gap: 10px; margin-top: 20px; }
.op-checks-row { display: flex; flex-wrap: wrap; gap: 18px; }

/* ---------- Toast / flash ---------- */
.op-toast {
    background: var(--op-surface); border: 1px solid var(--op-border-subtle);
    border-left: 3px solid var(--op-ok); padding: 12px 16px; font-size: 13px;
    color: var(--op-content); margin-bottom: 18px;
}
.op-toast.err { border-left-color: var(--op-brand-accent); }
.op-toast code { font-size: 12px; }

/* ---------- Login / centered ---------- */
.op-center { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--op-surface-alt); }
.op-login-card { width: 380px; max-width: 100%; background: var(--op-surface); border: 1px solid var(--op-border-subtle); box-shadow: var(--op-elev-2); border-top: 3px solid var(--op-brand-accent); padding: 32px; }
.op-login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.op-login-brand .op-logo { width: 28px; height: 28px; }
.op-login-brand span { font-weight: 700; letter-spacing: 0.12em; font-size: 14px; color: var(--op-brand); }