/* Premium Modern UI/UX Stylesheet for Admin Panel */

/* 1. Typography Overrides */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&display=swap');

body, p, li, a, span, button, input, select, textarea, th, td, label {
    font-family: 'Inter', sans-serif !important;
}

h1, h2, h3, h4, h5, h6, .card-title, .brand-logo {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
}

/* 2. Color Variable Palettes */
:root {
    --admin-bg-dark: #0f172a;
    --admin-sidebar-bg: #1e293b;
    --admin-accent-blue: #3b82f6;
    --admin-accent-gradient: linear-gradient(135deg, #2563eb, #1d4ed8);
    --admin-border-light: rgba(226, 232, 240, 0.8);
    --admin-card-bg: #ffffff;
}

/* 3. Modern Navbar & Sidebar Styles */
.navbar {
    background: #ffffff !important;
    border-bottom: 1px solid var(--admin-border-light) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    /* The template's py-lg-5 utility (96px) made the bar far taller than
       its content needs — that, combined with the invisible text below,
       is what read as a big blank gap at the top of every admin page. */
    padding: 18px 24px !important;
    min-height: auto !important;
}

/* The heading/toggle icon were white-on-white against our new white
   navbar (the template's navbar was originally dark) — invisible text,
   not actually empty space. */
.navbar h3 {
    color: var(--admin-bg-dark) !important;
    font-size: 20px !important;
}

.navbar .navbar-toggler .mdi {
    color: var(--admin-bg-dark) !important;
}

/* Light theme matching the public site's navbar (white bg, navy text,
   gold accent) instead of a separate dark admin theme. */
.sidebar {
    background: #ffffff !important;
    border-right: 1px solid var(--admin-border-light) !important;
}

/* Logo now sits directly on white (matches the public header) — no
   badge box needed. A bottom border separates it from the menu. */
.sidebar .nav > .nav-item:first-child {
    background: transparent !important;
    border-bottom: 1px solid var(--admin-border-light) !important;
    margin: 0 16px 12px !important;
    padding: 20px 8px !important;
}

.sidebar .nav .nav-item .nav-link,
.sidebar .nav.sub-menu .nav-item .nav-link {
    color: #334155 !important;
    border-radius: 8px;
    border-left: 3px solid transparent !important;
    margin: 4px 12px;
    padding: 12px 16px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease-in-out;
}

.sidebar .nav .nav-item .nav-link i {
    color: #64748b !important;
    margin-right: 12px !important;
    font-size: 1.1rem !important;
    transition: color 0.2s ease;
}

/* Hover, keyboard-focus and click(:active) all get the same treatment —
   previously an unstyled click/focus state briefly flashed a pale,
   broken-looking default background before this was added. */
.sidebar .nav .nav-item .nav-link:hover,
.sidebar .nav .nav-item .nav-link:focus,
.sidebar .nav .nav-item .nav-link:active,
.sidebar .nav.sub-menu .nav-item .nav-link:hover,
.sidebar .nav.sub-menu .nav-item .nav-link:focus,
.sidebar .nav.sub-menu .nav-item .nav-link:active {
    background: rgba(37, 99, 235, 0.07) !important;
    color: var(--admin-accent-blue) !important;
    outline: none !important;
}

.sidebar .nav .nav-item .nav-link:hover i,
.sidebar .nav .nav-item .nav-link:focus i,
.sidebar .nav .nav-item .nav-link:active i {
    color: var(--admin-accent-blue) !important;
}

/* A section that's currently expanded (its submenu is open) gets a gold
   left-border accent — distinct from "this is the current page," which
   is what a solid highlight block used to (misleadingly) suggest. */
.sidebar .nav .nav-item.active > .nav-link {
    background: rgba(37, 99, 235, 0.07) !important;
    color: var(--admin-accent-blue) !important;
    border-left-color: #c8952a !important;
}

.sidebar .nav .nav-item.active > .nav-link i {
    color: var(--admin-accent-blue) !important;
}

/* Sub-menu (nested links under Features/Library) */
.sidebar .nav.sub-menu {
    padding-left: 2.25rem !important;
}

.sidebar .nav.sub-menu .nav-item::before {
    background: #94a3b8 !important;
}

.sidebar .nav.sub-menu .nav-item .nav-link {
    font-size: 0.9rem !important;
    color: #475569 !important;
}

.sidebar .nav.sub-menu .nav-item .nav-link.active {
    color: #c8952a !important;
    background: transparent !important;
    font-weight: 700 !important;
}

/* 4. Elegant Cards & Layout containers */
.content-wrapper {
    background: #f8fafc !important;
    padding: 40px !important;
}

.card {
    background: var(--admin-card-bg) !important;
    border: 1px solid var(--admin-border-light) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.02) !important;
    overflow: hidden;
}

.card-title {
    color: var(--admin-bg-dark) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 12px;
    margin-bottom: 24px !important;
}

/* 5. Modernized Forms, Textboxes & Controls */
.form-group label {
    font-weight: 600 !important;
    color: #475569 !important;
    margin-bottom: 8px !important;
    font-size: 14px !important;
}

.form-control {
    border: 1.5px solid var(--admin-border-light) !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    color: #334155 !important;
    background-color: #ffffff !important;
    transition: all 0.25s ease !important;
}

.form-control:focus {
    border-color: var(--admin-accent-blue) !important;
    box-shadow: 0 0 0 3.5px rgba(59, 130, 246, 0.15) !important;
    color: var(--admin-bg-dark) !important;
}

/* 6. Clean Grid Tables */
.table-responsive {
    border-radius: 12px !important;
    border: 1px solid var(--admin-border-light);
    margin-top: 15px;
}

.table {
    margin-bottom: 0 !important;
}

.table thead th {
    background: #f1f5f9 !important;
    color: #334155 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 16px 20px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    /* admin/header.php's inline <style> centers these (text-align:center),
       while the data cells below are left-aligned — that mismatch is what
       makes every column header drift away from its own data. */
    text-align: left !important;
}

.table tbody td {
    padding: 16px 20px !important;
    font-size: 14px !important;
    color: #475569 !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.table tbody tr:hover {
    background-color: #f8fafc !important;
}

/* 7. Action Icons & Status Badges */
.mdi-pencil, .mdi-delete, .mdi-pencil-box-outline {
    font-size: 1.25rem !important;
    padding: 6px !important;
    border-radius: 6px !important;
    margin-right: 4px;
    display: inline-block;
    transition: all 0.2s ease;
}

.mdi-pencil {
    color: #2563eb !important;
    background: rgba(37, 99, 235, 0.08) !important;
}

.mdi-pencil:hover {
    color: #ffffff !important;
    background: #2563eb !important;
    text-decoration: none !important;
}

.mdi-delete {
    color: #dc2626 !important;
    background: rgba(220, 38, 38, 0.08) !important;
}

.mdi-delete:hover {
    color: #ffffff !important;
    background: #dc2626 !important;
    text-decoration: none !important;
}

/* Modern Pill Buttons */
.btn {
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
}

.btn-primary {
    background: var(--admin-accent-gradient) !important;
    border: none !important;
    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.15) !important;
}

.btn-primary:hover {
    box-shadow: 0 6px 12px rgba(37, 99, 235, 0.3) !important;
    transform: translateY(-1px);
}

/* 8. Login / Auth Screen */
.content-wrapper.auth {
    background: linear-gradient(150deg, var(--admin-bg-dark) 0%, #1e3a6d 100%) !important;
    min-height: 100vh !important;
}

.auth-form-light {
    background: #ffffff !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35) !important;
    padding: 3rem !important;
}

.auth-form-light h4 {
    color: var(--admin-bg-dark) !important;
    font-weight: 700 !important;
    font-size: 24px !important;
}

.auth-form-light h6 {
    color: #64748b !important;
    font-weight: 400 !important;
    margin-bottom: 24px !important;
}

.auth-form-btn {
    background: var(--admin-accent-gradient) !important;
    border: none !important;
}

/* 9. Pagination — replace the plain black-bordered squares
   (inline <style> in admin/header.php) with the modern theme */
.pagination a {
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #475569 !important;
    padding: 8px 14px !important;
    margin: 0 3px !important;
    border: 1.5px solid var(--admin-border-light) !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

.pagination a.active {
    background: var(--admin-accent-gradient) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

.pagination a:hover:not(.active) {
    background: #f1f5f9 !important;
    border-color: var(--admin-accent-blue) !important;
}

/* 10. Sidebar Collapsed & Hover Popup Overlap Fixes */
.sidebar .nav .nav-item .collapse,
.sidebar .nav .nav-item.hover-open .collapse,
.sidebar-icon-only .sidebar .nav-item .collapse {
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
    overflow: hidden !important;
}

body.sidebar-icon-only .sidebar .nav-item .collapse,
body.sidebar-icon-only .sidebar .nav-item.hover-open .collapse {
    position: absolute !important;
    left: 70px !important;
    top: 0 !important;
    width: 220px !important;
    background: #0f172a !important;
    z-index: 9999 !important;
    padding: 12px 8px !important;
    margin: 0 !important;
}

body.sidebar-icon-only .sidebar .nav-item .collapse .sub-menu,
.sidebar .nav.sub-menu {
    list-style: none !important;
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.sidebar .nav.sub-menu .nav-item::before {
    display: none !important;
}

body.sidebar-icon-only .sidebar .nav-item .collapse .sub-menu .nav-item .nav-link {
    color: #f8fafc !important;
    padding: 10px 14px !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    display: block !important;
    background: transparent !important;
    white-space: nowrap !important;
}

body.sidebar-icon-only .sidebar .nav-item .collapse .sub-menu .nav-item .nav-link:hover {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #3b82f6 !important;
}

/* Clean up menu arrow positioning */
.sidebar .nav .nav-item .menu-arrow {
    margin-left: auto !important;
    transition: transform 0.2s ease !important;
}
.sidebar .nav .nav-item .nav-link[aria-expanded="true"] .menu-arrow {
    transform: rotate(90deg) !important;
}