/* ============================================================
   ShoppyPY Admin Panel — Hybrid Theme (Dark Sidebar / Light Content)
   ============================================================ */

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
    /* Sidebar */
    --spy-sidebar:    #0d1120;
    --spy-sidebar-border: rgba(255,255,255,0.07);
    --spy-sidebar-text: rgba(200,215,245,0.82);
    --spy-sidebar-muted: rgba(160,180,225,0.5);
    --spy-accent:     #d32f2f;
    --spy-accent2:    #1a3faa;

    /* Content area (light) */
    --spy-bg:         #f0f2f7;
    --spy-surface:    #ffffff;
    --spy-surface2:   #f4f6fb;
    --spy-border:     #e2e6f0;
    --spy-text:       #1a1f2e;
    --spy-muted:      #6b7280;
    --spy-heading:    #111827;
    --spy-link:       #1a3faa;

    /* Table */
    --spy-th-bg:      #1e2a42;
    --spy-th-text:    #ffffff;
}

/* ── Body & outer container ────────────────────────────────── */
html, body {
    background-color: var(--spy-bg) !important;
    color: var(--spy-text) !important;
}

.container-fluid {
    background-color: var(--spy-bg) !important;
}

/* ── SIDEBAR (dark) ──────────────────────────────────────────── */
.aside {
    background-color: var(--spy-sidebar) !important;
    border-right: 1px solid var(--spy-sidebar-border) !important;
}

.aside header {
    border-bottom: 1px solid var(--spy-sidebar-border);
    padding-bottom: 12px !important;
}

.aside footer,
.aside .bg-dark {
    background-color: var(--spy-sidebar) !important;
    border-top: 1px solid var(--spy-sidebar-border);
}

.aside .nav-pills .nav-link {
    color: var(--spy-sidebar-text) !important;
    border-radius: 10px;
    font-size: 0.875rem;
    transition: background 0.15s, color 0.15s;
}

.aside .nav-pills .nav-link:hover {
    background-color: rgba(255,255,255,0.07) !important;
    color: #fff !important;
}

.aside .nav-pills .nav-link.active,
.aside .nav-pills .show > .nav-link {
    background-color: rgba(211,47,47,0.2) !important;
    color: #f87171 !important;
    font-weight: 600;
}

.aside .nav-pills .nav-link .text-muted,
.aside small,
.aside .text-muted {
    color: var(--spy-sidebar-muted) !important;
}

.aside .divider,
.aside hr {
    border-color: var(--spy-sidebar-border) !important;
    opacity: 1;
}

/* Sidebar scrollbar */
.aside ::-webkit-scrollbar { width: 4px; }
.aside ::-webkit-scrollbar-track { background: transparent; }
.aside ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }

/* ── CONTENT AREA (light) ────────────────────────────────────── */
.col-xxl.col-lg-9,
.workspace {
    background-color: var(--spy-bg) !important;
}

/* Command bar */
.command-bar-wrapper,
.command-bar-wrapper .layout,
.layout {
    background-color: var(--spy-bg) !important;
}

h1.text-body-emphasis,
.text-body-emphasis,
h1, h2, h3, h4, h5, h6 {
    color: var(--spy-heading) !important;
}

small.text-muted,
.text-muted {
    color: var(--spy-muted) !important;
}

/* Breadcrumbs */
.breadcrumb {
    background-color: transparent !important;
}

.breadcrumb-item + .breadcrumb-item::before,
.breadcrumb-item.active {
    color: var(--spy-muted) !important;
}

.breadcrumb-item a {
    color: var(--spy-link) !important;
    text-decoration: none;
}

.breadcrumb-item a:hover {
    text-decoration: underline;
}

/* ── Cards ───────────────────────────────────────────────────── */
.card {
    background-color: var(--spy-surface) !important;
    border: 1px solid var(--spy-border) !important;
    color: var(--spy-text) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}

.card-header {
    background-color: var(--spy-surface2) !important;
    border-bottom: 1px solid var(--spy-border) !important;
    color: var(--spy-heading) !important;
}

.card-body {
    background-color: var(--spy-surface) !important;
    color: var(--spy-text) !important;
}

.bg-white,
.bg-body,
.bg-body-tertiary {
    background-color: var(--spy-surface) !important;
    color: var(--spy-text) !important;
}

.bg-light {
    background-color: var(--spy-surface2) !important;
    color: var(--spy-text) !important;
}

/* ── Tables ──────────────────────────────────────────────────── */
.table {
    --bs-table-bg: #fff;
    --bs-table-color: var(--spy-text);
    --bs-table-border-color: var(--spy-border);
    --bs-table-striped-bg: #f8f9fd;
    --bs-table-hover-bg: #eef1f8;
    color: var(--spy-text) !important;
    border-radius: 10px;
    overflow: hidden;
}

.table thead th {
    background-color: var(--spy-th-bg) !important;
    color: var(--spy-th-text) !important;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: none !important;
    padding: 12px 16px !important;
}

/* Sortable column links inside thead must stay white */
.table thead th a,
.table thead th a:hover,
.table thead th a:visited {
    color: #ffffff !important;
    text-decoration: none !important;
}

.table td {
    color: var(--spy-text) !important;
    border-color: var(--spy-border) !important;
    vertical-align: middle;
}

.table th {
    border-color: rgba(255,255,255,0.1) !important;
}

/* ── Forms ───────────────────────────────────────────────────── */
.form-control,
.form-select {
    background-color: #fff !important;
    border: 1px solid #d1d8e8 !important;
    color: var(--spy-text) !important;
    border-radius: 8px !important;
}

.form-control:focus,
.form-select:focus {
    background-color: #fff !important;
    border-color: var(--spy-accent2) !important;
    box-shadow: 0 0 0 3px rgba(26,63,170,0.1) !important;
    color: var(--spy-text) !important;
}

.form-control::placeholder {
    color: #b0b8cc !important;
}

.form-label {
    color: #374151 !important;
    font-size: 0.84rem;
    font-weight: 500;
}

.input-group-text {
    background-color: #f4f6fb !important;
    border: 1px solid #d1d8e8 !important;
    color: var(--spy-muted) !important;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn-default,
.btn-light {
    background-color: #fff !important;
    border-color: #d1d8e8 !important;
    color: var(--spy-text) !important;
}

.btn-default:hover,
.btn-light:hover {
    background-color: var(--spy-surface2) !important;
    color: var(--spy-heading) !important;
}

.btn-primary {
    background-color: var(--spy-accent2) !important;
    border-color: var(--spy-accent2) !important;
    color: #fff !important;
}

.btn-danger {
    background-color: var(--spy-accent) !important;
    border-color: var(--spy-accent) !important;
    color: #fff !important;
}

/* ── Tabs ────────────────────────────────────────────────────── */
.nav-tabs {
    border-bottom-color: var(--spy-border) !important;
}

.nav-tabs .nav-link {
    color: var(--spy-muted) !important;
    border-color: transparent !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background-color: var(--spy-surface) !important;
    border-color: var(--spy-border) var(--spy-border) var(--spy-surface) !important;
    color: var(--spy-heading) !important;
}

/* ── Dropdowns ───────────────────────────────────────────────── */
.dropdown-menu {
    background-color: var(--spy-surface) !important;
    border: 1px solid var(--spy-border) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important;
    border-radius: 10px !important;
}

.dropdown-item {
    color: var(--spy-text) !important;
    border-radius: 6px;
    margin: 1px 4px;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--spy-surface2) !important;
    color: var(--spy-heading) !important;
}

.dropdown-divider {
    border-color: var(--spy-border) !important;
}

/* ── Modals ──────────────────────────────────────────────────── */
.modal-content {
    background-color: var(--spy-surface) !important;
    border: 1px solid var(--spy-border) !important;
    color: var(--spy-text) !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
}

.modal-header {
    border-bottom-color: var(--spy-border) !important;
    background-color: var(--spy-surface2) !important;
    border-radius: 14px 14px 0 0 !important;
}

.modal-footer {
    border-top-color: var(--spy-border) !important;
}

/* ── Alerts ──────────────────────────────────────────────────── */
.alert-success {
    background-color: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
    color: #065f46 !important;
}

.alert-danger {
    background-color: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #991b1b !important;
}

.alert-warning {
    background-color: #fffbeb !important;
    border-color: #fde68a !important;
    color: #92400e !important;
}

.alert-info {
    background-color: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #1e40af !important;
}

/* ── Pagination ──────────────────────────────────────────────── */
.page-link {
    background-color: var(--spy-surface) !important;
    border-color: var(--spy-border) !important;
    color: var(--spy-link) !important;
}

.page-link:hover {
    background-color: var(--spy-surface2) !important;
    color: var(--spy-heading) !important;
}

.page-item.active .page-link {
    background-color: var(--spy-accent) !important;
    border-color: var(--spy-accent) !important;
    color: #fff !important;
}

/* ── Toast ───────────────────────────────────────────────────── */
.toast {
    background-color: var(--spy-surface) !important;
    border: 1px solid var(--spy-border) !important;
    color: var(--spy-text) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
}

.toast-header {
    background-color: var(--spy-surface2) !important;
    border-bottom-color: var(--spy-border) !important;
    color: var(--spy-heading) !important;
}

/* ── Filter section ──────────────────────────────────────────── */

/* "▽ Filtros" toggle bar */
[data-action*="filter"],
a[data-action*="filter"],
.command-bar-wrapper a[href*="filter"],
p.text-muted a,
.filter-toggle {
    color: var(--spy-text) !important;
}

/* Filter card: label headers inside the filter panel */
.card .form-group > label,
.card .form-label,
.card legend,
.card fieldset legend {
    color: var(--spy-heading) !important;
    font-weight: 600;
    font-size: 0.82rem;
}

/* Card header — give it the same dark treatment as table headers */
.card-header {
    background-color: var(--spy-th-bg) !important;
    color: #ffffff !important;
    border-bottom: none !important;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.card-header a,
.card-header a:hover {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* KPI metric card labels */
.p-4.bg-white small.text-muted,
.p-4.bg-white .text-muted {
    color: var(--spy-muted) !important;
    font-weight: 500;
}

/* ── Links ───────────────────────────────────────────────────── */
a { color: var(--spy-link); }
a:hover { color: #0f2980; }

/* ── Misc ────────────────────────────────────────────────────── */
hr { border-color: var(--spy-border) !important; opacity: 1; }
.border { border-color: var(--spy-border) !important; }
.shadow-sm { box-shadow: 0 1px 4px rgba(0,0,0,0.07) !important; }
.text-body { color: var(--spy-text) !important; }

code, pre {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    border-radius: 6px;
    border: 1px solid var(--spy-border);
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--spy-surface2); }
::-webkit-scrollbar-thumb { background: #c1c9dc; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #a0aabe; }