/* ============================================================
   SmartPay4U Admin — UI Reskin
   Pure presentational CSS/markup layer. Nothing in here changes
   any data, route, permission check, or form submission target —
   every element still posts to / links to exactly the same
   backend endpoints as before this file existed.
   ============================================================ */

/* ---------- 1. Navbar: solid color + icon nav ---------- */
.navbar.navbar-dark-reskin {
    background: #2c3e91;
}
.navbar.navbar-dark-reskin .navbar-brand {
    color: #fff !important;
    font-weight: 700;
}

.icon-navbar {
    background: #fff;
    border-bottom: 1px solid #e6e7e9;
}
.icon-navbar .navbar-nav {
    flex-wrap: wrap;
    gap: 4px;
}
.icon-navbar .nav-item {
    margin: 0 4px;
}
.icon-navbar .nav-item > .nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 16px !important;
    font-size: 0.75rem;
    font-weight: 600;
    color: #45516b;
    border-radius: 8px;
    transition: background 0.15s ease;
}
.icon-navbar .nav-item > .nav-link:hover,
.icon-navbar .nav-item.active > .nav-link {
    background: #f1f3fb;
}
.icon-navbar .nav-icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.icon-navbar .nav-icon svg { width: 16px; height: 16px; }

/* One distinct accent color per top-level group — matches the
   reference's colorful icon-tile look. Order matches header.php's
   actual 6 groups: Dashboard, Catalog, Retailers, Finance,
   Communication, Admin. */
.nav-icon.icon-dashboard    { background: #f39c12; }
.nav-icon.icon-catalog      { background: #e74c3c; }
.nav-icon.icon-retailers    { background: #3498db; }
.nav-icon.icon-finance      { background: #16a085; }
.nav-icon.icon-communication{ background: #9b59b6; }
.nav-icon.icon-admin        { background: #34495e; }

/* ---------- 2. Gradient stat cards ---------- */
.card-gradient {
    border: none;
    border-radius: 10px;
    color: #fff;
}
.card-gradient .card-body { padding: 1.25rem 1.5rem; }
.card-gradient .subheader { color: rgba(255,255,255,0.85); }
.card-gradient .h1 { color: #fff; }
.card-gradient .text-secondary { color: rgba(255,255,255,0.75) !important; }

.card-gradient-success { background: linear-gradient(135deg, #11998e, #38ef7d); }
.card-gradient-danger  { background: linear-gradient(135deg, #eb3349, #f45c43); }
.card-gradient-warning { background: linear-gradient(135deg, #f7971e, #ffd200); }
.card-gradient-info    { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.card-gradient-purple  { background: linear-gradient(135deg, #7f53ac, #647dee); }
.card-gradient-teal    { background: linear-gradient(135deg, #0acffe, #495aff); }

/* ---------- Dropdown menus inside a scrollable table wrapper ----------
   .table-responsive sets overflow-x: auto, which clips any absolutely
   positioned child that extends past its bounds — including an open
   Bootstrap dropdown menu. data-bs-strategy="fixed" (set on the toggle
   button in the HTML) tells Popper to position the menu relative to the
   viewport instead of the scrolling ancestor, escaping the clip. */

/* ---------- 3. Toggle switches (visual only — same underlying
   active/inactive value as the badge it replaces; no new field,
   no new endpoint. If the row's action isn't wired to actually
   PATCH status on click, the switch is display-only until that's
   built — see the accompanying note.) ---------- */
.status-toggle {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
}
.status-toggle input { opacity: 0; width: 0; height: 0; }
.status-toggle .slider {
    position: absolute;
    cursor: default;
    inset: 0;
    background-color: #ccc;
    transition: 0.2s;
    border-radius: 22px;
}
.status-toggle .slider:before {
    position: absolute;
    content: "";
    height: 16px; width: 16px;
    left: 3px; bottom: 3px;
    background-color: #fff;
    transition: 0.2s;
    border-radius: 50%;
}
.status-toggle input:checked + .slider { background-color: #2fb344; }
.status-toggle input:checked + .slider:before { transform: translateX(18px); }

/* ---------- 4. Actions dropdown (consolidates several row-level
   links into one button + menu — same links, same hrefs) ---------- */
.actions-dropdown-btn {
    width: 32px; height: 32px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dde1e6;
    background: #fff;
}
.actions-dropdown-btn:hover { background: #f1f3fb; }

/* ---------- 5. Sidebar drawer (slide-in detail panel) ---------- */
.detail-drawer {
    position: fixed;
    top: 0; right: -420px;
    width: 400px; height: 100%;
    background: #fff;
    box-shadow: -2px 0 16px rgba(0,0,0,0.15);
    z-index: 1050;
    transition: right 0.25s ease;
    overflow-y: auto;
}
.detail-drawer.open { right: 0; }
/* On phone-width screens, 400px is wider than the viewport itself —
   go full-width instead of overflowing/causing horizontal scroll. */
@media (max-width: 480px) {
    .detail-drawer { width: 100%; right: -100%; }
}
.detail-drawer-header {
    background: #2c3e91;
    color: #fff;
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.detail-drawer-header .btn-close-drawer {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}
.detail-drawer-body { padding: 1.25rem; }
.drawer-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 1040;
    display: none;
}
.drawer-backdrop.open { display: block; }

/* ---------- 6. Modal header accent (matches the drawer's color
   so both patterns look like one consistent design language) ---------- */
.modal-header-accent {
    background: #2c3e91;
    color: #fff;
}
.modal-header-accent .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}