/* ============================================================
   POLIKA — ADMIN OPERATE SKIN  (loaded last in admin.html)
   World: White-box Showroom / Operate register (dark anthracite,
   hairline rules, federal-blue accent, tabular figures).
   Overrides style.css + admin-*.css component skins.
   ============================================================ */

:root {
    /* Operate palette */
    --op-bg: #141311;
    --op-sidebar: #191713;
    --op-panel: #1C1A16;
    --op-panel-2: #221F1A;
    --op-rule: #2C2A24;
    --op-rule-strong: #3A372F;
    --op-ink: #F1EFE9;
    --op-ink-2: #A6A198;
    --op-ink-3: #77736A;
    --op-accent: #9AB3F5;
    --op-accent-strong: #4F6FE0;
    --op-accent-hover: #5D7BE8;
    --op-accent-dim: rgba(154, 179, 245, 0.14);
    --op-accent-line: rgba(154, 179, 245, 0.35);
    --op-ok: #69C695;
    --op-ok-dim: rgba(105, 198, 149, 0.15);
    --op-warn: #DFA54A;
    --op-warn-dim: rgba(223, 165, 74, 0.15);
    --op-bad: #E7645A;
    --op-bad-dim: rgba(231, 100, 90, 0.15);

    /* Remap legacy tokens (style.css) */
    --bg-primary: #141311;
    --bg-secondary: #1A1815;
    --text-primary: #F1EFE9;
    --text-secondary: #A6A198;
    --accent-color: #4F6FE0;
    --accent-hover: #4060DD;
    --border-color: #2C2A24;
    --font-main: 'Archivo', 'Inter', system-ui, sans-serif;
    --font-heading: 'Bricolage Grotesque', 'Outfit', sans-serif;
    --font-mono: 'Spline Sans Mono', ui-monospace, monospace;

    /* Remap dashboard tokens (admin-dashboard.css) */
    --dash-bg-card: #1C1A16;
    --dash-bg-card-hover: #221F1A;
    --dash-bg-surface: #161412;
    --dash-border: rgba(241, 239, 233, 0.09);
    --dash-border-hover: rgba(154, 179, 245, 0.4);
    --dash-cyan: #9AB3F5;
    --dash-cyan-dim: rgba(154, 179, 245, 0.14);
    --dash-emerald: #69C695;
    --dash-emerald-dim: rgba(105, 198, 149, 0.15);
    --dash-amber: #DFA54A;
    --dash-amber-dim: rgba(223, 165, 74, 0.15);
    --dash-rose: #E7645A;
    --dash-rose-dim: rgba(231, 100, 90, 0.15);
    --dash-purple: #B79DF0;
    --dash-purple-dim: rgba(183, 157, 240, 0.15);
    --dash-text-muted: #A6A198;
    --dash-text-dim: #77736A;
    --dash-radius-sm: 6px;
    --dash-radius-md: 10px;
    --dash-radius-lg: 14px;
    --dash-shadow-card: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* Typescale */
body,
input,
select,
textarea,
button {
    font-family: var(--font-main);
}

h1, h2, h3, h4, h5 {
    font-family: var(--font-heading);
    letter-spacing: -0.01em;
}

.mono, .tabular {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #36332C; border-radius: 6px; border: 2px solid var(--op-bg); }
::-webkit-scrollbar-thumb:hover { background: #4A463C; }

/* ================= SHELL ================= */

/* Login */
#login-section {
    border-top: 1px solid rgba(154, 179, 245, 0.28);
    background: radial-gradient(ellipse at 50% 26%, #1D1B17 0%, #0F0E0C 68%);
}
.login-card {
    background: #1D1B17;
    padding: 2.6rem;
    border-radius: 12px;
    border: 1px solid rgba(241, 239, 233, 0.14);
    box-shadow: none;
    position: relative;
    max-width: 400px;
}
.login-card h2 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--op-ink);
    letter-spacing: -0.01em;
    margin-bottom: 0.25rem;
}
.login-card label {
    color: var(--op-ink-2);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.login-card .form-control {
    background: #100F0D;
    border: 1px solid var(--op-rule-strong);
    color: var(--op-ink);
    padding: 0.8rem 0.9rem;
    border-radius: 6px;
    font-size: 0.95rem;
}
.login-card .form-control:focus {
    border-color: var(--op-accent-strong);
    outline: none;
    box-shadow: 0 0 0 3px rgba(79, 111, 224, 0.25);
}

/* Sidebar */
.sidebar {
    background: var(--op-sidebar);
    border-right: 1px solid var(--op-rule);
}
.sidebar-header {
    border-bottom: 1px solid var(--op-rule);
    padding: 1.2rem 1rem;
}
.sidebar-header h2 {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    color: var(--op-ink-3);
}
.nav-item-parent {
    color: var(--op-ink-2);
    border-bottom: 1px solid rgba(241, 239, 233, 0.04);
}
.nav-tab {
    color: var(--op-ink-2);
    transition: all 0.15s ease;
}
.nav-tab:hover:not(.active) {
    color: var(--op-ink);
    background: rgba(241, 239, 233, 0.04);
}
.nav-tab.active {
    background: var(--op-accent-dim);
    color: var(--op-accent);
    border-left: 3px solid var(--op-accent-strong);
    font-weight: 500;
}
.nav-sub-menu {
    background: #151310;
    border-left: 1px solid var(--op-rule);
    margin-left: 0.85rem;
}
.sidebar-footer {
    border-top: 1px solid var(--op-rule);
}
.btn-logout {
    color: var(--op-ink-2);
    transition: all 0.15s ease;
}
.btn-logout:hover {
    color: var(--op-bad);
    background: var(--op-bad-dim);
}

/* Main + top bar */
.main-content {
    background: var(--op-bg);
}
.top-bar {
    border-bottom: 1px solid var(--op-rule);
    background: rgba(20, 19, 17, 0.85);
    backdrop-filter: blur(10px);
}
.top-bar h1 {
    font-family: var(--font-heading);
    color: var(--op-ink);
    font-size: 1.15rem;
    font-weight: 600;
}
.btn-icon {
    border: 1px solid var(--op-rule);
    color: var(--op-ink-2);
    border-radius: 6px;
}
.btn-icon:hover {
    color: var(--op-ink);
    border-color: var(--op-rule-strong);
}

/* ================= COMPONENTS ================= */

/* Buttons */
.btn-admin,
.btn-admin-secondary,
.btn-primary,
.btn-outline {
    border-radius: 6px;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: all 0.15s ease;
}
.btn-admin {
    background: var(--op-accent-strong);
    color: #FFFFFF;
    border: 1px solid var(--op-accent-strong);
    padding: 0.7rem 1.2rem;
    font-size: 0.9rem;
    width: 100%;
    border-radius: 6px;
}
.btn-admin:hover {
    background: var(--op-accent-hover);
    border-color: var(--op-accent-hover);
}
.btn-admin--ghost,
button.btn-admin.ghost {
    background: transparent;
    color: var(--op-accent);
    border: 1px solid var(--op-accent-line);
}

/* Cards & panels */
.dash-kpi-card,
.dash-pulse-card,
.dash-panel,
.dash-event-item,
.dash-farm-printer-item,
.data-card,
.admin-card,
.info-card {
    background: var(--op-panel) !important;
    border: 1px solid var(--op-rule) !important;
    border-radius: var(--dash-radius-md) !important;
}
.dash-kpi-card { box-shadow: var(--dash-shadow-card); }
.dash-kpi-card::before {
    background: linear-gradient(90deg, transparent, rgba(154, 179, 245, 0.35), transparent);
}
.dash-kpi-label,
.dash-pulse-label,
.dash-section-title,
.dash-panel-title,
.dash-printer-meta h5 {
    color: var(--op-ink-2);
}
.dash-kpi-value {
    font-family: var(--font-heading);
    color: var(--op-ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.dash-kpi-icon {
    background: var(--op-accent-dim);
    color: var(--op-accent);
}
.dash-kpi-footer,
.dash-pulse-desc,
.dash-printer-meta p {
    color: var(--op-ink-3);
}
.dash-pulse-count { color: var(--op-accent); font-variant-numeric: tabular-nums; }
.dash-pulse-card.has-urgent .dash-pulse-count { color: var(--op-bad); }

/* Command header */
.dash-header-title-group h2 {
    font-family: var(--font-heading);
    color: var(--op-ink);
    letter-spacing: -0.02em;
}
.dash-header-subtitle {
    color: var(--op-ink-3);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.dash-live-badge {
    background: var(--op-ok-dim);
    color: var(--op-ok);
    border: 1px solid rgba(105, 198, 149, 0.3);
    font-family: var(--font-mono);
    letter-spacing: 0.08em;
}
.dash-live-dot { background-color: var(--op-ok); box-shadow: 0 0 8px rgba(105, 198, 149, 0.6); }

/* Quick actions */
.dash-action-btn {
    background: rgba(241, 239, 233, 0.04);
    border: 1px solid var(--op-rule);
    color: var(--op-ink);
    border-radius: var(--dash-radius-sm);
}
.dash-action-btn:hover {
    border-color: var(--op-accent);
    color: var(--op-accent);
    background: var(--op-accent-dim);
}
.dash-action-btn.primary {
    background: var(--op-accent-strong);
    border-color: var(--op-accent-strong);
    color: #fff;
}
.dash-action-btn.primary:hover {
    background: var(--op-accent-hover);
    border-color: var(--op-accent-hover);
}

/* Time toggles */
.dash-time-btn {
    background: transparent;
    border: 1px solid var(--op-rule);
    color: var(--op-ink-2);
    border-radius: 6px;
}
.dash-time-btn.active {
    background: var(--op-accent-dim);
    border-color: var(--op-accent-line);
    color: var(--op-accent);
}

/* Tables */
.table-container {
    border: 1px solid var(--op-rule);
    border-radius: 10px;
    overflow: hidden;
    background: var(--op-panel);
}
.admin-table { background: var(--op-panel); }
.admin-table th {
    background: #211F1B;
    color: var(--op-ink-2);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--op-rule);
}
.admin-table td {
    color: var(--op-ink);
    border-bottom: 1px solid rgba(241, 239, 233, 0.06);
    font-size: 0.89rem;
}
.admin-table tr:hover td { background: rgba(154, 179, 245, 0.05); }
.dash-feed-table th {
    background: #211F1B;
    color: var(--op-ink-2);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.dash-feed-table td { color: var(--op-ink-2); border-bottom: 1px solid rgba(241, 239, 233, 0.06); }
.dash-feed-table tr:hover td { background: rgba(154, 179, 245, 0.05); }

/* Status badges */
.status-badge,
.badge,
.tag {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 100px;
    padding: 3px 10px;
    font-weight: 500;
}
.status-new { background: var(--op-ok-dim); color: var(--op-ok); }
.status-read { background: rgba(241, 239, 233, 0.06); color: var(--op-ink-2); }
.dash-source-tag.pos { background: var(--op-accent-dim); color: var(--op-accent); }
.dash-source-tag.online { background: var(--op-ok-dim); color: var(--op-ok); }
.dash-source-tag.invoice { background: var(--op-warn-dim); color: var(--op-warn); }

/* Pagination */
.pagination-controls { border-top: 1px solid var(--op-rule); }
.btn-page {
    background: transparent;
    border: 1px solid var(--op-rule);
    color: var(--op-ink-2);
    border-radius: 6px;
}
.btn-page:hover:not(:disabled) { border-color: var(--op-accent); color: var(--op-accent); }
.btn-page:disabled { opacity: 0.4; }
.page-info { color: var(--op-ink-3); font-family: var(--font-mono); font-size: 0.75rem; }

/* Forms (modal + inline) */
.form-control,
textarea.form-control,
select.form-control {
    background: #100F0D;
    border: 1px solid var(--op-rule-strong);
    color: var(--op-ink);
    border-radius: 6px;
    font-size: 0.92rem;
}
.form-control:focus {
    border-color: var(--op-accent-strong);
    box-shadow: 0 0 0 3px rgba(79, 111, 224, 0.22);
}
.form-group label {
    color: var(--op-ink-2);
    font-size: 0.8rem;
    font-weight: 500;
}

/* Modals */
.modal-content {
    background: var(--op-panel);
    border: 1px solid var(--op-rule-strong);
    border-radius: 12px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
}
.modal-header {
    border-bottom: 1px solid var(--op-rule);
    color: var(--op-ink);
}
.modal-header h3 { font-family: var(--font-heading); color: var(--op-ink); }
.close-modal {
    color: var(--op-ink-3);
    border-radius: 6px;
}
.close-modal:hover { color: var(--op-ink); background: rgba(241, 239, 233, 0.06); }
.modal-tabs { border-bottom: 1px solid var(--op-rule); }
.modal-tab-btn {
    color: var(--op-ink-2);
    border-bottom: 2px solid transparent;
    font-size: 0.85rem;
}
.modal-tab-btn.active {
    color: var(--op-accent);
    border-bottom-color: var(--op-accent-strong);
}

/* Switches */
.switch .slider {
    background: #2A2823;
    border: 1px solid var(--op-rule-strong);
}
.switch input:checked + .slider {
    background: var(--op-accent-strong);
    border-color: var(--op-accent-strong);
}

/* Search */
.search-container input,
.search-input,
table-search input {
    background: #100F0D;
    border: 1px solid var(--op-rule-strong);
    color: var(--op-ink);
    border-radius: 6px;
}
.search-container input:focus,
.search-input:focus {
    border-color: var(--op-accent-strong);
    box-shadow: 0 0 0 3px rgba(79, 111, 224, 0.22);
}

/* Printers */
.dash-printer-status-tag { border-radius: 100px; font-family: var(--font-mono); font-size: 0.7rem; }
.dash-printer-progress-bar { background: #2A2823; }
.dash-printer-progress-fill {
    background: linear-gradient(90deg, var(--op-accent-strong), var(--op-accent));
    border-radius: 6px;
}
.dash-farm-stat-box {
    border: 1px solid var(--op-rule);
    border-radius: 8px;
}
.dash-farm-stat-box .val { color: var(--op-ink); font-variant-numeric: tabular-nums; }
.dash-farm-stat-box .lbl { color: var(--op-ink-3); font-size: 0.72rem; }

/* Events */
.dash-event-date-badge {
    background: var(--op-accent-dim);
    color: var(--op-accent);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    border-radius: 6px;
}
.dash-event-title { color: var(--op-ink); }
.dash-event-subtitle { color: var(--op-ink-3); }

/* Skeleton loaders */
.dash-skeleton { background: linear-gradient(90deg, #1E1C18 25%, #262320 50%, #1E1C18 75%); }

/* Misc fills that hardcoded dark hex */
.dash-command-header { border-bottom: 1px solid var(--op-rule); }
.dash-chart-container { border: 1px solid var(--op-rule); border-radius: var(--dash-radius-md); }
.kpi-card, .metric-card { background: var(--op-panel); border: 1px solid var(--op-rule); border-radius: 10px; }