/* ============================================================
   OVERRIDE FOR: public/css/admin/admin.css
   INSTRUCTION: Load this file AFTER admin.css in your layout
   template. Do NOT replace admin.css — this overrides it.

   Changes applied:
   - Font: Arial → Inter/Segoe UI, 13px → 14px
   - Body/content background: #f9f9f9 → #f1f5f9
   - Navbar height: 90px → 60px (logo adjusted to match)
   - Info-box cards: border-radius 2px → 10px, shadow upgraded
   - Status colors: AdminLTE 2015 palette → modern equivalents
   - Sidebar left-side top: 90px → 60px (media query fix)
   - Dropdown hover: added 0.15s transition
   - Control label: size/color updated
   - Content header: shadow softened
   - Active menu item: teal #259B9B → clinical blue #2563eb
   - Heading font: Source Sans Pro → Inter
   - Logo font: Kaushan Script → Inter
   ============================================================ */

/* ---- Base Font & Background ---- */
html,
body {
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    font-size: 14px;
    background: #f1f5f9;
}

/* ---- Content Area ---- */
.content {
    background: #f1f5f9;
}

.right-side {
    background-color: #f1f5f9;
}

/* ---- Headings ---- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Inter', 'Segoe UI', sans-serif;
}

/* ---- Navbar: height 90px → 60px ---- */
body > .header .navbar {
    height: 60px;
}

/* ---- Sidebar toggle: re-centered for 60px navbar ---- */
body > .header .navbar .sidebar-toggle {
    padding: 20px 5px;
    margin-top: 4px;
    margin-bottom: 4px;
}

/* ---- Logo: shrink to match 60px navbar ---- */
body > .header .logo {
    height: 60px;
    line-height: 60px;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 17px;
}

/* ---- Dashboard background ---- */
.right-side .dashboard {
    background-color: #e9eef5;
}

/* ---- Info-Box Cards (dashboard stat boxes) ---- */
.info-box {
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04);
    background: #ffffff;
    transition: box-shadow 0.15s ease;
}

.info-box:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
}

.info-box-icon {
    border-radius: 10px 0 0 10px;
    font-size: 38px;
}

/* ---- Status / Callout Colors (modern palette) ---- */
.bg-aqua,
.callout.callout-info {
    background-color: #0EA5E9 !important;
}

.bg-red,
.callout.callout-danger {
    background-color: #EF4444 !important;
}

.bg-green,
.callout.callout-success {
    background-color: #22C55E !important;
}

.bg-yellow,
.callout.callout-warning {
    background-color: #F59E0B !important;
}

/* ---- Dropdown Menu Transitions ---- */
.dropdown-menu > li > a {
    transition: background-color 0.15s ease, color 0.15s ease;
}

.dropdown-menu > li > a:hover {
    background-color: #2563eb;
    color: #ffffff;
}

/* ---- Navbar Dropdown: message/leave header ---- */
.navbar-nav > .messages-menu > .dropdown-menu > li.header,
.navbar-nav > .user-menu > .dropdown-menu > li.user-header {
    background: #1e293b;
}

.navbar-nav > .messages-menu > .dropdown-menu > li.header:after {
    border-bottom-color: #1e293b;
}

.navbar-nav > .user-menu > .dropdown-menu:after {
    border-bottom-color: #1e293b;
}

/* ---- Content Header ---- */
.right-side > .content-header {
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* ---- Sidebar Menu: active item → clinical blue ---- */
#main-menu li.active {
    background: #1d4ed8;
}

#main-menu li.active > a {
    color: #ffffff;
}

#main-menu .active:after {
    border-right-color: #f1f5f9;
}

/* ---- Sidebar Menu: sub-menu items ---- */
#main-menu ul ul li {
    background: #0c1829;
}

#main-menu ul ul ul li {
    background: #111827;
}

/* ---- Control Label ---- */
.control-label {
    color: #475569;
    font-size: 13px;
    font-weight: 500;
}

/* ---- Panel Custom (wrap-fpanel) ---- */
.wrap-fpanel .panel-default > .panel-heading {
    color: #1e40af;
    background-color: #eff6ff;
    border-color: #bfdbfe;
}

.wrap-fpanel .panel-body {
    background-color: #f8fafc;
    border-left: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
}

/* ---- Breadcrumb ---- */
.right-side > .content-header > .breadcrumb > li > a {
    color: #475569;
}

/* ---- Media Query: fix left-side top offset for 60px navbar ---- */
@media screen and (min-width: 992px) {
    .left-side {
        top: 60px;
    }
}

@media screen and (max-width: 767px) {
    body > .header .logo {
        height: 60px;
    }
    body > .header .navbar {
        height: 60px;
    }
}

@media screen and (max-width: 568px) {
    body > .header .logo {
        height: 60px;
        line-height: 60px;
    }
    body > .header .navbar {
        height: 60px;
    }
}

@media screen and (max-width: 480px) {
    body > .header .logo {
        height: 55px;
        line-height: 55px;
    }
    body > .header .navbar {
        height: 55px;
    }
}
/* ============================================
   SIDEBAR MODERNISATION — admin-override.css
   ============================================ */

/* Container */
#wrapper .sidebar,
#sidebar-nav.sidebar {
    width: 240px !important;
    background-color: #0d2b5e !important;
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.2);
    border-right: none;
}

/* Top-level nav links */
.sidebar .nav > li > a {
    padding: 13px 20px;
    color: #A8B4C8;
    font-size: 13px;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    letter-spacing: 0.01em;
}

/* Icons */
.sidebar .nav > li > a i {
    margin-right: 10px;
    font-size: 15px;
    width: 18px;
    text-align: center;
    color: #5A6A88;
    transition: color 0.2s ease;
}

/* Row separator */
.sidebar .nav > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

/* Hover */
.sidebar .nav > li > a:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff;
    border-left-color: #1251AF;
}

.sidebar .nav > li > a:hover i,
.sidebar .nav > li > a:hover .icon-submenu {
    color: #1251AF;
}

/* Active / focused top-level */
.sidebar .nav > li > a.active,
.sidebar .nav > li > a:focus { 
    color: #ffffff !important;
    border-left-color: #1251AF !important;
}

.sidebar .nav > li > a.active i,
.sidebar .nav > li > a:focus i {
    color: #1251AF !important;
}

/* Chevron arrow */
.sidebar .nav > li > a .icon-submenu {
    float: right;
    margin-top: 2px;
    font-size: 11px;
    color: #3D4F6A;
    transition: color 0.2s ease;
}

/* Submenu container — replaces the red */
.sidebar .nav .nav,
.sidebar .collapse > .nav,
.sidebar .open > .nav {
    background-color: #243154 !important;
    padding: 4px 0;
}

/* Submenu links */
.sidebar .nav .nav > li > a {
    padding: 10px 20px 10px 50px;
    color: #8FA8CC; /* brighter than before to stay readable on lighter bg */
    font-size: 12.5px;
    border-left: 3px solid transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.sidebar .nav .nav > li > a:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff;
    border-left-color: #1251AF;
}

.sidebar .nav .nav > li > a.active {
    background-color: rgba(18, 81, 175, 0.2) !important;
    color: #ffffff !important;
    border-left-color: #1251AF !important;
}

/* Badges in sidebar */
.sidebar .badge.bg-danger {
    background-color: #BC2132;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
}

/* Scrollbar track */
.slimScrollBar {
    background-color: rgba(255, 255, 255, 0.12) !important;
    border-radius: 4px !important;
}

#wrapper .main {
width: calc(100% - 245px);

}
/* ============================================
   DROPDOWN MENU REDESIGN — admin-override.css
   ============================================ */

.navbar-nav .dropdown-menu {
    min-width: 210px;
    padding: 6px 0;
    margin-top: 8px;
    background-color: #ffffff;
    border: none;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);

    /* Slide-in animation */
    animation: dropdownFadeIn 0.15s ease;
    transform-origin: top right;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Arrow pointer */
.navbar-nav .dropdown-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 18px;
    width: 12px;
    height: 12px;
    background: #ffffff;
    transform: rotate(45deg);
    box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.04);
}

/* Each item */
.navbar-nav .dropdown-menu > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    font-size: 13px;
    color: #374151;
    font-weight: 400;
    transition: background-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.navbar-nav .dropdown-menu > li > a i,
.navbar-nav .dropdown-menu > li > a span.lnr {
    font-size: 15px;
    color: #6B7280;
    width: 18px;
    text-align: center;
    transition: color 0.15s ease;
    margin-right: 0; /* reset any existing margin */
}

/* Hover */
.navbar-nav .dropdown-menu > li > a:hover {
    background-color: #F0F5FF;
    color: #1251AF;
}

.navbar-nav .dropdown-menu > li > a:hover i,
.navbar-nav .dropdown-menu > li > a:hover span.lnr {
    color: #1251AF;
}

/* Active service item (replaces the inline D8ECFA) */
.navbar-nav .dropdown-menu > li.active-service > a {
    background-color: #EEF4FF;
    color: #1251AF;
    font-weight: 600;
    border-left: 3px solid #1251AF;
}

.navbar-nav .dropdown-menu > li.active-service > a span.lnr {
    color: #1251AF;
}

/* Divider before logout */
.navbar-nav .dropdown-menu > li:last-child {
    border-top: 1px solid #F3F4F6;
    margin-top: 4px;
    padding-top: 4px;
}

/* Logout link — subtle red tint on hover */
.navbar-nav .dropdown-menu > li:last-child > a:hover {
    background-color: #FFF1F2;
    color: #BC2132;
}

.navbar-nav .dropdown-menu > li:last-child > a:hover i,
.navbar-nav .dropdown-menu > li:last-child > a:hover span.lnr {
    color: #BC2132;
}

/* Download dropdown */
.download-dropdown {
    display: none !important;          /* ← add this */
    min-width: 210px;
    padding: 4px 0;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    border: 1px solid #e2e8f0;
}

/* Show only when Bootstrap adds .open to the parent */
.btn-group.open > .download-dropdown {
    display: block !important;         /* ← add this */
}
.download-dropdown .dropdown-header {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
    padding: 8px 14px 4px;
}

.download-dropdown > li > a {
    padding: 8px 16px;
    font-size: 13px;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.15s ease;
}

.download-dropdown > li > a:hover {
    background-color: #F0F5FF;
    color: #1251AF;
}

.download-dropdown .divider {
    margin: 4px 0;
    background-color: #f1f5f9;
}