/* ======================================================================
   Ate-bit — Arcode theme
   ====================================================================== */

:root {
    /* ── Arcode brand tokens ─────────────────────────────────────── */
    --color-bg-base:         #1A1F2E;
    --color-bg-surface:      #222840;
    --color-bg-elevated:     #2A3050;
    --color-bg-subtle:       #1E2338;

    --color-cyan:            #00D4FF;
    --color-magenta:         #C850C0;
    --color-purple:          #8B5CF6;

    --color-primary:         var(--color-cyan);
    --color-primary-hover:   #00BBDD;
    --color-secondary:       var(--color-magenta);
    --color-secondary-hover: #A830A0;

    --color-danger:          #FF4D6A;
    --color-danger-hover:    #E03055;
    --color-success:         var(--color-cyan);
    --color-warning:         #F59E0B;

    --color-text-primary:    #FFFFFF;
    --color-text-secondary:  #A0AABB;
    --color-text-muted:      #5A6480;

    --color-border:          #2E3550;
    --color-border-subtle:   #252B42;
    --color-border-focus:    var(--color-cyan);

    --gradient-brand:        linear-gradient(135deg, var(--color-magenta) 0%, var(--color-purple) 50%, var(--color-cyan) 100%);
    --gradient-glow-cyan:    radial-gradient(ellipse at center, rgba(0,212,255,0.15) 0%, transparent 70%);
    --gradient-glow-magenta: radial-gradient(ellipse at center, rgba(200,80,192,0.15) 0%, transparent 70%);

    /* ── Legacy atebit-* aliases so existing component code keeps working ── */
    --atebit-primary:          var(--color-cyan);
    --atebit-primary-hover:    var(--color-primary-hover);
    --atebit-primary-active:   #009AB8;
    --atebit-secondary:        var(--color-magenta);
    --atebit-secondary-hover:  var(--color-secondary-hover);
    --atebit-accent:           var(--color-magenta);
    --atebit-accent-hover:     var(--color-secondary-hover);
    --atebit-success:          var(--color-cyan);
    --atebit-danger:           var(--color-danger);
    --atebit-warning:          var(--color-warning);
    --atebit-info:             var(--color-cyan);

    --atebit-bg:               var(--color-bg-base);
    --atebit-surface:          var(--color-bg-surface);
    --atebit-fg:               var(--color-text-primary);
    --atebit-muted:            var(--color-text-secondary);
    --atebit-border:           var(--color-border);
    --atebit-text:             var(--color-text-primary);

    --atebit-sidebar-bg:       #161B28;
    --atebit-sidebar-active:   var(--color-cyan);
    --atebit-sidebar-active-fg:#0A0E1A;
    --atebit-thead-bg:         var(--color-bg-subtle);
    --atebit-thead-fg:         var(--color-text-muted);
    --atebit-row-hover:        var(--color-bg-elevated);
    --atebit-soft-accent:      var(--color-bg-elevated);
    --atebit-soft-accent-bd:   var(--color-border);

    /* ── Bootstrap CSS variable overrides ─────────────────────────── */
    --bs-primary:            var(--color-cyan);
    --bs-primary-rgb:        0, 212, 255;
    --bs-secondary:          var(--color-magenta);
    --bs-secondary-rgb:      200, 80, 192;
    --bs-success:            var(--color-cyan);
    --bs-success-rgb:        0, 212, 255;
    --bs-danger:             var(--color-danger);
    --bs-danger-rgb:         255, 77, 106;
    --bs-warning:            var(--color-warning);
    --bs-warning-rgb:        245, 158, 11;
    --bs-info:               var(--color-cyan);
    --bs-info-rgb:           0, 212, 255;

    --bs-body-bg:            var(--color-bg-base);
    --bs-body-color:         var(--color-text-primary);
    --bs-border-color:       var(--color-border);
    --bs-border-color-translucent: rgba(46, 53, 80, 0.5);

    --bs-link-color:         var(--color-cyan);
    --bs-link-color-rgb:     0, 212, 255;
    --bs-link-hover-color:   var(--color-primary-hover);
    --bs-link-hover-color-rgb: 0, 187, 221;

    --bs-modal-bg:           var(--color-bg-surface);
    --bs-card-bg:            var(--color-bg-surface);
    --bs-card-border-color:  var(--color-border);

    --bs-dropdown-bg:        var(--color-bg-elevated);
    --bs-dropdown-color:     var(--color-text-primary);
    --bs-dropdown-border-color: var(--color-border);
    --bs-dropdown-link-color: var(--color-text-primary);
    --bs-dropdown-link-hover-bg: rgba(0, 212, 255, 0.08);
    --bs-dropdown-link-hover-color: var(--color-text-primary);

    --bs-table-color:        var(--color-text-secondary);
    --bs-table-bg:           transparent;
    --bs-table-hover-bg:     var(--color-bg-elevated);
    --bs-table-border-color: var(--color-border-subtle);

    --bs-nav-tabs-border-color: var(--color-border);
    --bs-nav-tabs-link-hover-border-color: var(--color-border);
    --bs-nav-tabs-link-active-bg: var(--color-bg-surface);
    --bs-nav-tabs-link-active-border-color: var(--color-border) var(--color-border) var(--color-bg-surface);
    --bs-nav-tabs-link-active-color: var(--color-cyan);

    --bs-list-group-bg: var(--color-bg-surface);
    --bs-list-group-border-color: var(--color-border);
    --bs-list-group-color: var(--color-text-primary);
    --bs-list-group-hover-bg: var(--color-bg-elevated);
    --bs-list-group-action-color: var(--color-text-primary);
    --bs-list-group-active-bg: var(--color-cyan);
    --bs-list-group-active-border-color: var(--color-cyan);
}

/* ── Body ──────────────────────────────────────────────────────────── */
body {
    background-color: var(--color-bg-base);
    color: var(--color-text-primary);
    font-family: 'Inter', system-ui, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    letter-spacing: -0.02em;
}

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn-primary {
    --bs-btn-bg:                  var(--color-cyan);
    --bs-btn-border-color:        var(--color-cyan);
    --bs-btn-hover-bg:            var(--color-primary-hover);
    --bs-btn-hover-border-color:  var(--color-primary-hover);
    --bs-btn-active-bg:           #009AB8;
    --bs-btn-active-border-color: #009AB8;
    --bs-btn-disabled-bg:         var(--color-cyan);
    --bs-btn-disabled-border-color: var(--color-cyan);
    --bs-btn-color:               #0A0E1A;
    --bs-btn-hover-color:         #0A0E1A;
    --bs-btn-active-color:        #0A0E1A;
    color: #0A0E1A;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: #0A0E1A;
    box-shadow: 0 0 16px rgba(0, 212, 255, 0.35);
}

.btn-secondary {
    --bs-btn-bg:               transparent;
    --bs-btn-border-color:     var(--color-cyan);
    --bs-btn-hover-bg:         rgba(0, 212, 255, 0.08);
    --bs-btn-hover-border-color: var(--color-cyan);
    --bs-btn-color:            var(--color-cyan);
    --bs-btn-hover-color:      var(--color-cyan);
    color: var(--color-cyan);
    border-color: var(--color-cyan);
    font-weight: 600;
}

.btn-success {
    --bs-btn-bg:              var(--color-cyan);
    --bs-btn-border-color:    var(--color-cyan);
    --bs-btn-hover-bg:        var(--color-primary-hover);
    --bs-btn-hover-border-color: var(--color-primary-hover);
    --bs-btn-color:           #0A0E1A;
    --bs-btn-hover-color:     #0A0E1A;
    color: #0A0E1A;
}

.btn-danger {
    --bs-btn-bg:              var(--color-danger);
    --bs-btn-border-color:    var(--color-danger);
    --bs-btn-hover-bg:        var(--color-danger-hover);
    --bs-btn-hover-border-color: var(--color-danger-hover);
}
.btn-danger:hover,
.btn-danger:focus {
    box-shadow: 0 0 12px rgba(255, 77, 106, 0.3);
}

.btn-warning {
    --bs-btn-bg:              var(--color-warning);
    --bs-btn-border-color:    var(--color-warning);
    --bs-btn-color:           #0A0E1A;
    --bs-btn-hover-bg:        #D97706;
    --bs-btn-hover-border-color: #D97706;
    --bs-btn-hover-color:     #0A0E1A;
    color: #0A0E1A;
}

.btn-outline-primary {
    --bs-btn-color:            var(--color-cyan);
    --bs-btn-border-color:     var(--color-cyan);
    --bs-btn-hover-bg:         rgba(0, 212, 255, 0.08);
    --bs-btn-hover-border-color: var(--color-cyan);
    --bs-btn-hover-color:      var(--color-cyan);
    --bs-btn-active-bg:        var(--color-cyan);
    --bs-btn-active-border-color: var(--color-cyan);
    --bs-btn-active-color:     #0A0E1A;
}

/* ── Focus ring ────────────────────────────────────────────────────── */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-check-input:focus,
.form-control:focus,
.form-select:focus {
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.2);
    border-color: var(--color-border-focus);
}

/* ── Links ─────────────────────────────────────────────────────────── */
a, .btn-link {
    color: var(--color-cyan);
}
a:hover {
    color: var(--color-primary-hover);
}

/* ── Sidebar ───────────────────────────────────────────────────────── */
.sidebar {
    background-image: none !important;
    background-color: #161B28 !important;
}

.top-row.navbar.navbar-dark {
    background-color: var(--color-bg-base) !important;
    border-bottom: 1px solid var(--color-border) !important;
}

/* Active nav item — 3px cyan left accent */
.nav-item ::deep a.active,
.nav-item a.active {
    background-color: var(--color-bg-elevated) !important;
    color: var(--color-cyan) !important;
    border-radius: 0 !important;
    font-weight: 600;
}
.nav-item ::deep a.active .nav-menu-icon,
.nav-item a.active .nav-menu-icon {
    color: var(--color-cyan) !important;
}

/* ── Tables (QuickGrid) ────────────────────────────────────────────── */
.table {
    --bs-table-color:        var(--color-text-secondary);
    --bs-table-bg:           var(--color-bg-surface);
    --bs-table-accent-bg:    transparent;
    --bs-table-hover-bg:     var(--color-bg-elevated);
    --bs-table-hover-color:  var(--color-text-primary);
    --bs-table-border-color: var(--color-border-subtle);
    color: var(--color-text-secondary);
    border-color: var(--color-border-subtle);
}

/* Bootstrap 5 paints cells via box-shadow (inset 9999px) — kill it and force dark bg */
.table > :not(caption) > * > * {
    background-color: var(--color-bg-surface) !important;
    box-shadow: none !important;
    border-bottom-color: var(--color-border-subtle) !important;
    color: var(--color-text-secondary);
}

/* Main thead: darkest stripe */
.table > thead > tr > * {
    background-color: var(--color-bg-base) !important;
    color: var(--color-text-muted) !important;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom-color: var(--color-border) !important;
}

/* Item group header rows (tr.table-secondary): elevated, clearly distinct */
.table > tbody > tr.table-secondary > * {
    background-color: var(--color-bg-elevated) !important;
    color: var(--color-text-primary) !important;
    border-top: 2px solid var(--color-border) !important;
    border-bottom-color: var(--color-border) !important;
}

/* Sub-column header rows (tr.table-light within tbody): subtle, muted */
.table > tbody > tr.table-light > * {
    background-color: var(--color-bg-subtle) !important;
    color: var(--color-text-muted) !important;
    font-size: 0.8rem;
    border-bottom-color: var(--color-border) !important;
}

/* Category separator rows (tr.table-primary): cyan-tinted accent */
.table > tbody > tr.table-primary > * {
    background-color: rgba(0, 212, 255, 0.07) !important;
    color: var(--color-text-primary) !important;
    border-top: 1px solid rgba(0, 212, 255, 0.2) !important;
    border-bottom-color: rgba(0, 212, 255, 0.2) !important;
    font-weight: 600;
}

/* Row hover — skip on special row types that already have meaningful colors */
.table > tbody > tr:not(.table-secondary):not(.table-light):not(.table-primary):hover > * {
    background-color: var(--color-bg-elevated) !important;
    color: var(--color-text-primary) !important;
}

.table thead {
    background-color: var(--color-bg-base) !important;
    color: var(--color-text-muted);
    outline-color: var(--color-border) !important;
}

/* QuickGrid renders sortable column titles as a native <button> — browsers paint
   native widget chrome (e.g. ButtonFace) over background-color unless appearance is reset. */
.table > thead button.col-title {
    appearance: none;
    background: transparent;
    color: inherit;
    font: inherit;
}

.table-footer {
    background-color: var(--color-bg-subtle);
    border-top-color: var(--color-border);
    color: var(--color-text-secondary);
}

/* ── Form controls ─────────────────────────────────────────────────── */
.form-control,
.form-select {
    background-color: var(--color-bg-subtle);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}
.form-control::placeholder {
    color: var(--color-text-muted);
}
.form-control:focus,
.form-select:focus {
    background-color: var(--color-bg-subtle);
    border-color: var(--color-border-focus);
    color: var(--color-text-primary);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.12);
}
/* Bootstrap's .form-control[readonly] (specificity 0,2,0) forces a light #e9ecef
   background; match its specificity so readonly fields stay dark-themed. */
.form-control[readonly] {
    background-color: var(--color-bg-subtle);
    color: var(--color-text-primary);
    opacity: 1;
}
.form-control:disabled,
.form-select:disabled {
    background-color: var(--color-bg-base);
    color: var(--color-text-muted);
    border-color: var(--color-border);
}
.form-label {
    color: var(--color-text-secondary);
}
.input-group-text {
    background-color: var(--color-bg-elevated);
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}
.form-check-input {
    background-color: var(--color-bg-subtle);
    border-color: var(--color-border);
}
.form-check-input:checked {
    background-color: var(--color-cyan);
    border-color: var(--color-cyan);
}

input[type=search] {
    background-color: var(--color-bg-subtle);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}
input[type=search]:focus {
    border-color: var(--color-border-focus);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.12);
}

/* ── Modal / BlazorDialog ──────────────────────────────────────────── */
.modal-content {
    background-color: var(--color-bg-surface);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}
.modal-header, .modal-footer {
    border-color: var(--color-border);
}

.blazor-dialog-content-wrapper {
    background-color: var(--color-bg-surface) !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text-primary) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}
.blazor-dialog-header {
    border-bottom-color: var(--color-border) !important;
    color: var(--color-text-primary);
    background-color: var(--color-bg-surface);
}
.blazor-dialog-body {
    color: var(--color-text-primary);
}
.blazor-dialog-footer {
    border-top-color: var(--color-border) !important;
    background-color: var(--color-bg-surface);
}
.blazor-dialog-container {
    background-color: rgba(0, 0, 0, 0.65);
}

/* ── Badges ────────────────────────────────────────────────────────── */
.badge {
    background-color: var(--color-bg-elevated);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}
.badge.bg-primary   { background-color: var(--color-cyan)    !important; color: #0A0E1A !important; border: none !important; }
.badge.bg-secondary { background-color: var(--color-magenta) !important; color: #fff !important; border: none !important; }
.badge.bg-success   { background-color: var(--color-cyan)    !important; color: #0A0E1A !important; border: none !important; }
.badge.bg-danger    { background-color: var(--color-danger)  !important; color: #fff !important; border: none !important; }
.badge.bg-warning   { background-color: var(--color-warning) !important; color: #0A0E1A !important; border: none !important; }
.badge.bg-info      { background-color: var(--color-cyan)    !important; color: #0A0E1A !important; border: none !important; }

/* ── Nav tabs ──────────────────────────────────────────────────────── */
.nav-tabs {
    border-bottom-color: var(--color-border);
}
.nav-tabs .nav-link {
    color: var(--color-text-secondary);
    border-color: transparent transparent var(--color-border);
}
.nav-tabs .nav-link:hover {
    color: var(--color-text-primary);
    border-color: var(--color-border) var(--color-border) var(--color-bg-surface);
}
.nav-tabs .nav-link.active {
    background-color: var(--color-bg-surface);
    border-color: var(--color-border) var(--color-border) var(--color-bg-surface);
    color: var(--color-cyan);
}

/* ── Cards ─────────────────────────────────────────────────────────── */
.card {
    background-color: var(--color-bg-surface);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}
.card-header, .card-footer {
    background-color: var(--color-bg-subtle);
    border-color: var(--color-border);
}

/* ── List group ────────────────────────────────────────────────────── */
.list-group-item {
    background-color: var(--color-bg-surface);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}
.list-group-item:hover {
    background-color: var(--color-bg-elevated);
}

/* ── Dropdowns ─────────────────────────────────────────────────────── */
.dropdown-menu {
    background-color: var(--color-bg-elevated);
    border-color: var(--color-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.dropdown-item {
    color: var(--color-text-primary);
}
.dropdown-item:hover, .dropdown-item:focus {
    background-color: rgba(0, 212, 255, 0.08);
    color: var(--color-text-primary);
}
.dropdown-divider {
    border-color: var(--color-border);
}

/* ── Validation states ─────────────────────────────────────────────── */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--color-cyan); }
.invalid                              { outline: 1px solid var(--color-danger); }
.validation-message                   { color: var(--color-danger); }

/* ── Feedback admin table ──────────────────────────────────────────── */
.feedback-table { table-layout: fixed; }
.feedback-table col.col-date         { width: 11%; }
.feedback-table col.col-category     { width: 10%; }
.feedback-table col.col-submitted-by { width: 12%; }
.feedback-table col.col-page         { width: 20%; }
.feedback-table col.col-message      { width: 34%; }
.feedback-table col.col-actions      { width: 13%; }