/* ═══════════════════════════════════════════════════════════════════════════
   Flipa Admin Theme — color-coded navigation + UI polish
   ─────────────────────────────────────────────────────────────────────────────
   Each sidebar section gets its own accent color so screens are locatable at
   a glance:

     ▣ Core Operations          → Indigo
     ▣ Users & Monetization     → Emerald
     ▣ Content & Engagement     → Orange
     ▣ System & Administration  → Rose

   Technique: the section-title divs (.sec-core, .sec-users, …) are siblings
   of the <li> items inside the same <ul>. `.sec-x ~ li` styles every item
   AFTER that title; the next section's rules (written later in this file)
   override for the items after IT. Net effect: every item inherits the accent
   of its nearest preceding section title — zero per-item markup needed.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --flipa-core:        #4F46E5;
    --flipa-core-bg:     #EEF2FF;
    --flipa-users:       #059669;
    --flipa-users-bg:    #ECFDF5;
    --flipa-content:     #EA580C;
    --flipa-content-bg:  #FFF7ED;
    --flipa-system:      #E11D48;
    --flipa-system-bg:   #FFF1F2;
    --flipa-ink:         #0F172A;
    --flipa-muted:       #64748B;
}

/* ── Sidebar shell ─────────────────────────────────────────────────────────── */
#sidebar .sidebar-wrapper {
    border-inline-end: 1px solid #EDF0F5;
}

#sidebar .sidebar-menu {
    scrollbar-width: thin;
    scrollbar-color: #CBD5E1 transparent;
}
#sidebar .sidebar-menu::-webkit-scrollbar { width: 5px; }
#sidebar .sidebar-menu::-webkit-scrollbar-thumb {
    background: #CBD5E1; border-radius: 99px;
}

/* ── Menu items: pill rows with icon chips ─────────────────────────────────── */
#sidebar ul.menu li.sidebar-item > a.sidebar-link {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 2px 10px;
    padding: 7px 10px;
    border-radius: 11px;
    font-weight: 600;
    color: #334155;
    transition: background-color .15s ease, color .15s ease;
}

/* Icon chip: rounded tile that takes the section accent */
#sidebar ul.menu li.sidebar-item > a.sidebar-link i {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 15px;
    background: #F1F5F9;
    color: #64748B;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

#sidebar ul.menu li.sidebar-item > a.sidebar-link:hover i {
    transform: scale(1.06);
}

#sidebar ul.menu li.sidebar-item > a.sidebar-link .menu-item {
    font-size: 13.5px;
    line-height: 1.25;
    white-space: normal;
}

/* ── Section titles ────────────────────────────────────────────────────────── */
#sidebar .sidebar-new-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 14px 4px;
    padding: 12px 6px 6px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    border-top: 1px dashed #E2E8F0;
}
#sidebar .sidebar-new-title:first-of-type { border-top: 0; }
#sidebar .sidebar-new-title i { font-size: 13px; }

/* ── Section accents (order matters: later sections override earlier) ──────── */

/* 1 ▣ Core Operations — indigo */
#sidebar .sidebar-new-title.sec-core { color: var(--flipa-core); }
#sidebar .sec-core ~ li.sidebar-item > a.sidebar-link i {
    background: var(--flipa-core-bg);
    color: var(--flipa-core);
}
#sidebar .sec-core ~ li.sidebar-item > a.sidebar-link:hover,
#sidebar .sec-core ~ li.sidebar-item > a.sidebar-link.is-active {
    background: var(--flipa-core-bg);
    color: var(--flipa-core);
}
#sidebar .sec-core ~ li.sidebar-item > a.sidebar-link.is-active i {
    background: var(--flipa-core);
    color: #fff;
}

/* 2 ▣ Users & Monetization — emerald */
#sidebar .sidebar-new-title.sec-users { color: var(--flipa-users); }
#sidebar .sec-users ~ li.sidebar-item > a.sidebar-link i {
    background: var(--flipa-users-bg);
    color: var(--flipa-users);
}
#sidebar .sec-users ~ li.sidebar-item > a.sidebar-link:hover,
#sidebar .sec-users ~ li.sidebar-item > a.sidebar-link.is-active {
    background: var(--flipa-users-bg);
    color: var(--flipa-users);
}
#sidebar .sec-users ~ li.sidebar-item > a.sidebar-link.is-active i {
    background: var(--flipa-users);
    color: #fff;
}

/* 3 ▣ Content & Engagement — orange */
#sidebar .sidebar-new-title.sec-content { color: var(--flipa-content); }
#sidebar .sec-content ~ li.sidebar-item > a.sidebar-link i {
    background: var(--flipa-content-bg);
    color: var(--flipa-content);
}
#sidebar .sec-content ~ li.sidebar-item > a.sidebar-link:hover,
#sidebar .sec-content ~ li.sidebar-item > a.sidebar-link.is-active {
    background: var(--flipa-content-bg);
    color: var(--flipa-content);
}
#sidebar .sec-content ~ li.sidebar-item > a.sidebar-link.is-active i {
    background: var(--flipa-content);
    color: #fff;
}

/* 4 ▣ System & Administration — rose */
#sidebar .sidebar-new-title.sec-system { color: var(--flipa-system); }
#sidebar .sec-system ~ li.sidebar-item > a.sidebar-link i {
    background: var(--flipa-system-bg);
    color: var(--flipa-system);
}
#sidebar .sec-system ~ li.sidebar-item > a.sidebar-link:hover,
#sidebar .sec-system ~ li.sidebar-item > a.sidebar-link.is-active {
    background: var(--flipa-system-bg);
    color: var(--flipa-system);
}
#sidebar .sec-system ~ li.sidebar-item > a.sidebar-link.is-active i {
    background: var(--flipa-system);
    color: #fff;
}

/* Active row: accent bar on the reading edge (RTL-safe) */
#sidebar ul.menu li.sidebar-item > a.sidebar-link.is-active {
    font-weight: 800;
    box-shadow: inset 3px 0 0 0 currentColor;
}
[dir="rtl"] #sidebar ul.menu li.sidebar-item > a.sidebar-link.is-active {
    box-shadow: inset -3px 0 0 0 currentColor;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Global UI polish — cards, tables, titles, buttons
   ═══════════════════════════════════════════════════════════════════════════ */

.page-title h4 {
    font-weight: 800;
    color: var(--flipa-ink);
    letter-spacing: -.01em;
}

.card {
    border: 1px solid #EDF0F5;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
.card .card-header {
    background: transparent;
    border-bottom: 1px solid #F1F4F9;
    border-radius: 14px 14px 0 0;
}

/* Softer dark table headers */
.table thead.thead-dark th,
.table .thead-dark th {
    background-color: #1E293B;
    border-color: #1E293B;
    color: #E2E8F0;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: #FAFBFD;
    --bs-table-accent-bg: transparent;
}

.btn { border-radius: 9px; }
.btn-primary {
    background-color: var(--flipa-core);
    border-color: var(--flipa-core);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: #4338CA;
    border-color: #4338CA;
}

/* Inputs: calmer focus ring matching the core accent */
.form-control:focus, .form-select:focus {
    border-color: var(--flipa-core);
    box-shadow: 0 0 0 .2rem rgba(79, 70, 229, .12);
}

/* Badges: slightly larger + softer corners (status chips in tables) */
.badge { border-radius: 7px; font-weight: 700; letter-spacing: .01em; }