/* ==========================================================================
   Modern Admin Panel Theme Overhaul
   Primary Accent Color: #6E260E (Terracotta / Deep Burgundy / Mahogany)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
    --admin-primary: #6E260E;
    --admin-primary-hover: #561D0A;
    --admin-primary-dark: #451708;
    --admin-primary-light: rgba(110, 38, 14, 0.08);
    --admin-primary-subtle: rgba(110, 38, 14, 0.03);
    --admin-primary-glow: rgba(110, 38, 14, 0.22);

    --admin-secondary: #D4A017;
    --admin-secondary-hover: #B88910;
    --admin-secondary-light: rgba(212, 160, 23, 0.12);

    --admin-accent: #F5E6D3;
    --admin-bg-body: #FAF8F5;
    --admin-card-bg: #FFFFFF;
    --admin-text-main: #2D2D2D;
    --admin-text-muted: #646464;
    --admin-text-light: #888888;

    --admin-success: #16A34A;
    --admin-success-light: rgba(22, 163, 74, 0.1);

    --admin-danger: #DC2626;
    --admin-danger-light: rgba(220, 38, 38, 0.1);

    --admin-border-color: #E6E1DA;
    --admin-font: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body, html {
    font-family: var(--admin-font) !important;
    background-color: var(--admin-bg-body) !important;
    color: var(--admin-text-main) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--admin-font) !important;
    font-weight: 700 !important;
    color: var(--admin-text-main) !important;
    letter-spacing: -0.02em;
}

/* --- Top Header Navbar --- */
.pcoded-header.header-lightblue {
    background: linear-gradient(135deg, #6E260E 0%, #561D0A 100%) !important;
    box-shadow: 0 4px 20px -4px rgba(110, 38, 14, 0.35) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    height: 64px !important;
}

.pcoded-header .topbar-title {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1.15rem !important;
    letter-spacing: -0.01em;
}

.pcoded-header a, .pcoded-header .navbar-nav > li > a {
    color: #ffffff !important;
    transition: all 0.2s ease !important;
}

.pcoded-header .dropdown-toggle {
    padding: 8px 14px !important;
    border-radius: 8px !important;
    transition: background 0.2s ease !important;
}

.pcoded-header .dropdown-toggle:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Header Dropdowns Alignment & Colors */
.pcoded-header .dropdown {
    position: relative !important;
}

.pcoded-header .dropdown .show:before {
    color: var(--admin-primary) !important;
    top: 52px !important;
}

.pcoded-header .dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid var(--admin-border-color) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.15), 0 4px 12px -2px rgba(0, 0, 0, 0.05) !important;
    padding: 0 !important;
    margin-top: 8px !important;
    overflow: hidden !important;
    min-width: 260px !important;
}

.pcoded-header .dropdown-menu.notification {
    width: 320px !important;
}

.pcoded-header .dropdown-menu .noti-head,
.pcoded-header .dropdown-menu .pro-head {
    background: linear-gradient(135deg, #6E260E 0%, #561D0A 100%) !important;
    border-radius: 14px 14px 0 0 !important;
    padding: 14px 18px !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.pcoded-header .dropdown-menu .noti-head h6,
.pcoded-header .dropdown-menu .noti-head h6.d-inline-block,
.pcoded-header .dropdown-menu .noti-head *,
.pcoded-header .dropdown-menu .pro-head span,
.pcoded-header .dropdown-menu .pro-head * {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    margin: 0 !important;
    letter-spacing: -0.01em !important;
}

.pcoded-header .dropdown-menu .pro-head .dud-logout {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 16px !important;
    transition: color 0.2s ease !important;
}

.pcoded-header .dropdown-menu .pro-head .dud-logout:hover {
    color: #ffffff !important;
}

/* Dropdown Body List (.noti-body & .pro-body) */
.pcoded-header .dropdown-menu .noti-body,
.pcoded-header .dropdown-menu .pro-body {
    padding: 6px 0 !important;
    margin: 0 !important;
    list-style: none !important;
    background-color: #ffffff !important;
}

.pcoded-header .dropdown-menu .noti-body li.notification {
    padding: 12px 18px !important;
    margin: 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    transition: all 0.2s ease !important;
    background-color: #ffffff !important;
}

.pcoded-header .dropdown-menu .noti-body li.notification:last-child {
    border-bottom: none !important;
}

/* Language and Notification Links inside Dropdown */
.pcoded-header .dropdown-menu .noti-body li.notification a,
.pcoded-header .dropdown-menu .noti-body li.notification a.language,
.pcoded-header .dropdown-menu .noti-body li.notification a.media {
    color: #334155 !important;
    font-weight: 500 !important;
    font-size: 13.5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-decoration: none !important;
    width: 100% !important;
}

.pcoded-header .dropdown-menu .noti-body li.notification p {
    color: #334155 !important;
    margin-bottom: 4px !important;
    font-size: 13px !important;
}

.pcoded-header .dropdown-menu .noti-body li.notification p strong {
    color: #1e293b !important;
    font-weight: 600 !important;
}

.pcoded-header .dropdown-menu .noti-body li.notification .n-time {
    color: #64748b !important;
    font-size: 11px !important;
}

/* Active & Hover States for Dropdown Items */
.pcoded-header .dropdown-menu .noti-body li.notification:hover {
    background-color: var(--admin-primary-light) !important;
}

.pcoded-header .dropdown-menu .noti-body li.notification:hover a,
.pcoded-header .dropdown-menu .noti-body li.notification:hover a.language,
.pcoded-header .dropdown-menu .noti-body li.notification:hover p,
.pcoded-header .dropdown-menu .noti-body li.notification:hover p strong {
    color: var(--admin-primary) !important;
}

.pcoded-header .dropdown-menu .noti-body li.notification.active {
    background-color: var(--admin-primary-light) !important;
}

.pcoded-header .dropdown-menu .noti-body li.notification.active a,
.pcoded-header .dropdown-menu .noti-body li.notification.active a.language {
    color: var(--admin-primary) !important;
    font-weight: 700 !important;
}

/* Profile Menu Items */
.pcoded-header .dropdown-menu .pro-body li a.dropdown-item {
    color: #334155 !important;
    padding: 10px 16px !important;
    font-weight: 500 !important;
    font-size: 13.5px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    transition: all 0.2s ease !important;
}

.pcoded-header .dropdown-menu .pro-body li a.dropdown-item i {
    color: #64748b !important;
    font-size: 15px !important;
    transition: color 0.2s ease !important;
}

.pcoded-header .dropdown-menu .pro-body li a.dropdown-item:hover {
    background-color: var(--admin-primary-light) !important;
    color: var(--admin-primary) !important;
}

.pcoded-header .dropdown-menu .pro-body li a.dropdown-item:hover i {
    color: var(--admin-primary) !important;
}

/* --- Sidebar Base Layout & Container --- */
.pcoded-navbar,
.pcoded-navbar.navbar-lightblue,
.pcoded-navbar .navbar-wrapper,
.pcoded-navbar .navbar-content,
.pcoded-navbar .scroll-div {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

.pcoded-navbar {
    box-shadow: 2px 0 15px rgba(0, 0, 0, 0.04) !important;
    border-right: 1px solid var(--admin-border-color) !important;
    height: 100vh !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1029 !important;
    overflow: hidden !important;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.pcoded-navbar .navbar-wrapper {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.pcoded-navbar .header-logo {
    background: linear-gradient(135deg, #6E260E 0%, #561D0A 100%) !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    position: relative !important;
    flex-shrink: 0 !important;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.pcoded-navbar .header-logo .b-brand {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    max-width: 195px !important;
    overflow: hidden !important;
    text-decoration: none !important;
}

.pcoded-navbar .header-logo .b-brand .b-title {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.pcoded-navbar .header-logo .mobile-menu,
.pcoded-header .m-header .mobile-menu {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    background: transparent !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.pcoded-navbar .header-logo .mobile-menu:hover,
.pcoded-header .m-header .mobile-menu:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

.pcoded-navbar .header-logo .mobile-menu i,
.pcoded-header .m-header .mobile-menu i {
    font-size: 20px !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.2s ease !important;
}

/* Hide legacy CSS span pseudo-element icon */
.pcoded-navbar .header-logo .mobile-menu span,
.pcoded-header .mobile-menu span {
    display: none !important;
}

/* === EXPANDED DESKTOP SIDEBAR STATE === */
.pcoded-navbar:not(.navbar-collapsed) {
    width: 264px !important;
}

.pcoded-navbar:not(.navbar-collapsed) .header-logo {
    width: 264px !important;
    justify-content: space-between !important;
}

.pcoded-navbar:not(.navbar-collapsed) .header-logo .b-brand .b-title {
    display: block !important;
    opacity: 1 !important;
}

.pcoded-navbar:not(.navbar-collapsed) .header-logo .mobile-menu {
    display: flex !important;
    opacity: 1 !important;
}

.pcoded-navbar:not(.navbar-collapsed) ~ .pcoded-header,
.pcoded-navbar:not(.navbar-collapsed) ~ .pcoded-main-container {
    margin-left: 264px !important;
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.pcoded-navbar:not(.navbar-collapsed) .pcoded-inner-navbar > li > a {
    padding: 10px 16px !important;
    justify-content: flex-start !important;
}

.pcoded-navbar:not(.navbar-collapsed) .pcoded-inner-navbar > li > a .pcoded-mtext {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin-left: 10px !important;
}

.pcoded-navbar:not(.navbar-collapsed) .pcoded-inner-navbar li.pcoded-hasmenu > a:after {
    display: block !important;
    opacity: 1 !important;
}

/* === COLLAPSED DESKTOP SIDEBAR STATE (CLOSED MODE) === */
.pcoded-navbar.navbar-collapsed:not(:hover) {
    width: 80px !important;
}

.pcoded-navbar.navbar-collapsed:not(:hover) .header-logo {
    width: 80px !important;
    padding: 0 8px !important;
    justify-content: center !important;
}

.pcoded-navbar.navbar-collapsed:not(:hover) .header-logo .b-brand .b-title {
    display: none !important;
    opacity: 0 !important;
}

.pcoded-navbar.navbar-collapsed:not(:hover) .header-logo .mobile-menu {
    display: none !important;
    opacity: 0 !important;
}

.pcoded-navbar.navbar-collapsed:not(:hover) .pcoded-menu-caption {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pcoded-navbar.navbar-collapsed:not(:hover) .pcoded-inner-navbar > li {
    margin: 6px auto !important;
    width: 100% !important;
    text-align: center !important;
}

.pcoded-navbar.navbar-collapsed:not(:hover) .pcoded-inner-navbar > li > a {
    padding: 12px 0 !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
}

.pcoded-navbar.navbar-collapsed:not(:hover) .pcoded-inner-navbar > li > a .pcoded-micon {
    margin: 0 auto !important;
    font-size: 18px !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.pcoded-navbar.navbar-collapsed:not(:hover) .pcoded-inner-navbar li a .pcoded-mtext,
.pcoded-navbar.navbar-collapsed:not(:hover) .pcoded-inner-navbar > li > a .pcoded-mtext {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

.pcoded-navbar.navbar-collapsed:not(:hover) .pcoded-inner-navbar li.pcoded-hasmenu > a:after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Strictly hide all submenu elements when sidebar is collapsed and NOT hovered */
.pcoded-navbar.navbar-collapsed:not(:hover) .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu,
.pcoded-navbar.navbar-collapsed:not(:hover) .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li,
.pcoded-navbar.navbar-collapsed:not(:hover) .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li a {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden !important;
}

.pcoded-navbar.navbar-collapsed ~ .pcoded-header,
.pcoded-navbar.navbar-collapsed ~ .pcoded-main-container {
    margin-left: 80px !important;
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* === HOVER EXPAND ON COLLAPSED SIDEBAR === */
.pcoded-navbar.navbar-collapsed:hover {
    width: 264px !important;
    box-shadow: 6px 0 30px rgba(0, 0, 0, 0.15) !important;
}

.pcoded-navbar.navbar-collapsed:hover .header-logo {
    width: 264px !important;
    padding: 0 16px !important;
    justify-content: space-between !important;
}

.pcoded-navbar.navbar-collapsed:hover .header-logo .b-brand .b-title {
    display: block !important;
    opacity: 1 !important;
}

.pcoded-navbar.navbar-collapsed:hover .header-logo .mobile-menu {
    display: flex !important;
    opacity: 1 !important;
}

.pcoded-navbar.navbar-collapsed:hover .pcoded-menu-caption {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    margin: 16px 16px 8px 16px !important;
}

.pcoded-navbar.navbar-collapsed:hover .pcoded-inner-navbar > li > a {
    justify-content: flex-start !important;
    padding: 10px 16px !important;
}

.pcoded-navbar.navbar-collapsed:hover .pcoded-inner-navbar > li > a .pcoded-micon {
    margin-right: 10px !important;
}

.pcoded-navbar.navbar-collapsed:hover .pcoded-inner-navbar li a .pcoded-mtext,
.pcoded-navbar.navbar-collapsed:hover .pcoded-inner-navbar > li > a .pcoded-mtext {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
    color: inherit !important;
}

.pcoded-navbar.navbar-collapsed:hover .pcoded-inner-navbar li.pcoded-hasmenu > a:after {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Restore Submenus on Hover for Collapsed Sidebar and fix white text bug */
.pcoded-navbar.navbar-collapsed:hover .pcoded-inner-navbar li.pcoded-hasmenu.pcoded-trigger > .pcoded-submenu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
}

.pcoded-navbar.navbar-collapsed:hover .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    margin: 2px 4px !important;
}

.pcoded-navbar.navbar-collapsed:hover .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li > a,
.pcoded-navbar.navbar-collapsed:hover .pcoded-inner-navbar > li.pcoded-trigger .pcoded-submenu li a {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: #64748b !important;
    padding: 9px 14px 9px 44px !important;
}

.pcoded-navbar.navbar-collapsed:hover .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li:hover > a,
.pcoded-navbar.navbar-collapsed:hover .pcoded-inner-navbar > li.pcoded-trigger .pcoded-submenu li:hover > a {
    color: var(--admin-primary) !important;
    background: var(--admin-primary-light) !important;
}

.pcoded-navbar.navbar-collapsed:hover .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li.active > a,
.pcoded-navbar.navbar-collapsed:hover .pcoded-inner-navbar > li.pcoded-trigger .pcoded-submenu li.active > a {
    color: var(--admin-primary) !important;
    background: var(--admin-primary-light) !important;
    font-weight: 700 !important;
}

/* === MOBILE RESPONSIVENESS === */
@media (max-width: 991px) {
    .pcoded-navbar,
    .pcoded-navbar:not(.navbar-collapsed) {
        left: -264px !important;
        position: fixed !important;
        top: 0 !important;
        z-index: 1030 !important;
        transition: left 0.3s ease-in-out !important;
    }

    .pcoded-navbar.mob-open {
        left: 0 !important;
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.2) !important;
    }

    .pcoded-navbar ~ .pcoded-header,
    .pcoded-navbar ~ .pcoded-main-container,
    .pcoded-navbar:not(.navbar-collapsed) ~ .pcoded-header,
    .pcoded-navbar:not(.navbar-collapsed) ~ .pcoded-main-container,
    .pcoded-navbar.navbar-collapsed ~ .pcoded-header,
    .pcoded-navbar.navbar-collapsed ~ .pcoded-main-container {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* Single Scrollbar Setup */
.pcoded-navbar .scroll-div.navbar-content {
    flex: 1 1 auto !important;
    height: calc(100vh - 64px) !important;
    max-height: calc(100vh - 64px) !important;
    background-color: #ffffff !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
    scrollbar-color: #cbd5e1 transparent !important;
}

.pcoded-navbar .scroll-div.navbar-content::-webkit-scrollbar {
    width: 5px !important;
}

.pcoded-navbar .scroll-div.navbar-content::-webkit-scrollbar-track {
    background: transparent !important;
}

.pcoded-navbar .scroll-div.navbar-content::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 10px !important;
}

.pcoded-navbar .scroll-div.navbar-content::-webkit-scrollbar-thumb:hover {
    background: var(--admin-primary) !important;
}

.pcoded-navbar .ps__rail-y,
.pcoded-navbar .ps__rail-x {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.pcoded-navbar .pcoded-inner-navbar {
    padding: 12px 0 24px 0 !important;
}

.pcoded-navbar .pcoded-inner-navbar > li {
    position: relative !important;
    display: block !important;
    float: none !important;
}

.pcoded-navbar .pcoded-inner-navbar > li > a {
    border-radius: 10px !important;
    font-weight: 500 !important;
    font-size: 13.5px !important;
    color: #475569 !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.pcoded-navbar .pcoded-inner-navbar > li > a .pcoded-micon {
    font-size: 15px !important;
    width: 24px !important;
    min-width: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #64748b !important;
    transition: color 0.2s ease !important;
}

.pcoded-navbar .pcoded-inner-navbar > li > a .pcoded-mtext {
    position: static !important;
    vertical-align: middle !important;
    white-space: normal !important;
    word-break: break-word !important;
    font-weight: 600 !important;
}

/* Fix pseudo element background-color issue */
.pcoded-navbar .pcoded-inner-navbar li > a::before,
.pcoded-navbar .pcoded-inner-navbar li > a::after,
.pcoded-navbar .pcoded-inner-navbar li.active > a::after,
.pcoded-navbar .pcoded-inner-navbar li.pcoded-trigger > a::after,
.pcoded-navbar.navbar-lightblue .pcoded-inner-navbar > li.active > a::after,
.pcoded-navbar.navbar-lightblue .pcoded-inner-navbar > li.pcoded-trigger > a::after {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Chevron Dropdown Arrow Indicator */
.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu > a:after {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    transition: transform 0.2s ease !important;
    font-family: 'feather' !important;
    content: "\e844" !important;
    font-size: 13px !important;
    color: #94a3b8 !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
}

.pcoded-navbar .pcoded-inner-navbar > li:hover > a {
    background: var(--admin-primary-light) !important;
    color: var(--admin-primary) !important;
}

.pcoded-navbar .pcoded-inner-navbar > li:hover > a .pcoded-micon {
    color: var(--admin-primary) !important;
}

/* Top-level Parent Menu when expanded (Trigger Active state) */
.pcoded-navbar.navbar-lightblue .pcoded-inner-navbar > li.pcoded-trigger > a {
    background: var(--admin-primary-light) !important;
    color: var(--admin-primary) !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
}

.pcoded-navbar.navbar-lightblue .pcoded-inner-navbar > li.pcoded-trigger > a .pcoded-micon {
    color: var(--admin-primary) !important;
}

.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu.pcoded-trigger > a:after {
    transform: translateY(-50%) rotate(90deg) !important;
    color: var(--admin-primary) !important;
}

/* Top-level standalone active page (e.g. Dashboard) */
.pcoded-navbar.navbar-lightblue .pcoded-inner-navbar > li.active:not(.pcoded-hasmenu) > a {
    background: var(--admin-primary) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px var(--admin-primary-glow) !important;
    border-radius: 10px !important;
}

.pcoded-navbar.navbar-lightblue .pcoded-inner-navbar > li.active:not(.pcoded-hasmenu) > a .pcoded-micon {
    color: #ffffff !important;
}

/* --- Submenu Containers & Nested Sub-Items Fix --- */
.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu {
    background: transparent !important;
    padding: 2px 0 4px 0 !important;
    margin: 2px 0 !important;
    border: none !important;
    position: relative !important;
    float: none !important;
    width: 100% !important;
    height: auto !important;
}

.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li {
    position: relative !important;
    margin: 2px 4px !important;
    display: block !important;
    float: none !important;
    width: auto !important;
}

.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li > a {
    padding: 9px 14px 9px 44px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    color: #64748b !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
    white-space: normal !important;
    line-height: 1.4 !important;
    transition: all 0.2s ease !important;
}

/* Remove unwanted pseudo hyphen '-' / dash bullet elements */
.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li > a:before {
    display: none !important;
    content: "" !important;
}

.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li:hover > a {
    color: var(--admin-primary) !important;
    background: var(--admin-primary-light) !important;
}

/* Active Submenu Item (e.g. Subject Attendances) */
.pcoded-navbar.navbar-lightblue .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li.active > a {
    color: var(--admin-primary) !important;
    background: var(--admin-primary-light) !important;
    font-weight: 700 !important;
}

/* Nested submenus chevron arrow (Level 2 dropdowns like Attendances >, Enrollments >) */
.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li.pcoded-hasmenu > a:after {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 12px !important;
    color: #94a3b8 !important;
    font-family: 'feather' !important;
    content: "\e844" !important;
    background: transparent !important;
}

.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li.pcoded-hasmenu.pcoded-trigger > a:after {
    transform: translateY(-50%) rotate(90deg) !important;
    color: var(--admin-primary) !important;
}

/* Sub-submenu items (Level 3 items like Subject Attendances) */
.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li .pcoded-submenu li > a {
    padding-left: 56px !important;
}

/* --- Content Area & Card Layout --- */
.pcoded-main-container {
    background-color: var(--admin-bg-body) !important;
    min-height: 100vh !important;
}

.page-header {
    margin-bottom: 24px !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.page-header .page-header-title h5 {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: var(--admin-text-main) !important;
    letter-spacing: -0.02em;
}

.breadcrumb {
    background: transparent !important;
    padding: 0 !important;
}

.breadcrumb-item {
    font-size: 13px !important;
    color: var(--admin-text-muted) !important;
}

.breadcrumb-item.active {
    color: var(--admin-primary) !important;
    font-weight: 600 !important;
}

.card {
    border: 1px solid var(--admin-border-color) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.03), 0 2px 6px -2px rgba(0, 0, 0, 0.02) !important;
    margin-bottom: 24px !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
    overflow: visible !important;
}

.card:not([class*="bg-"]) {
    background: var(--admin-card-bg) !important;
}

.card[class*="bg-"] {
    border: none !important;
}

.card[class*="bg-"] .card-block,
.card[class*="bg-"] .card-body {
    background: transparent !important;
}

/* Metric card background overrides */
.card.bg-brown-dark, .bg-brown-dark {
    background: #451708 !important;
    color: #ffffff !important;
}
.card.bg-brown-medium, .bg-brown-medium {
    background: #561D0A !important;
    color: #ffffff !important;
}
.card.bg-brown-light, .bg-brown-light {
    background: #6E260E !important;
    color: #ffffff !important;
}
.card.bg-brown-terracotta, .bg-brown-terracotta {
    background: #803014 !important;
    color: #ffffff !important;
}
.card.bg-brown-sienna, .bg-brown-sienna {
    background: #A04018 !important;
    color: #ffffff !important;
}
.card.bg-brown-tan, .bg-brown-tan {
    background: #B88910 !important;
    color: #ffffff !important;
}
.card.bg-brown-chocolate, .bg-brown-chocolate {
    background: #D4A017 !important;
    color: #ffffff !important;
}
.card.bg-brown-mahogany, .bg-brown-mahogany {
    background: #5C230E !important;
    color: #ffffff !important;
}

.card:hover {
    box-shadow: 0 8px 30px -5px rgba(0, 0, 0, 0.05) !important;
    border-color: #cbd5e1 !important;
}

.card .card-header {
    background: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 20px 24px !important;
    border-radius: 16px 16px 0 0 !important;
}

.card .card-header h5 {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--admin-text-main) !important;
    margin: 0 !important;
}

.card .card-block, .card .card-body {
    padding: 24px !important;
}

/* --- Multi-step Form Visibility --- */
.wizard-sec-bg {
    background: #ffffff !important;
    border-radius: 0 0 16px 16px !important;
    padding: 0 24px 24px 24px !important;
}

.wizard, .tabcontrol {
    width: 100% !important;
    overflow: visible !important;
}

.wizard > .content {
    position: relative !important;
    overflow: visible !important;
    min-height: 450px !important;
    height: auto !important;
    float: none !important;
    width: 100% !important;
    background: transparent !important;
    margin: 1.5em 0 !important;
}

.wizard > .content > .body {
    position: relative !important;
    float: none !important;
    width: 100% !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 10px 0 !important;
}

.wizard > .content > .body.current {
    display: block !important;
}

.wizard > .content > .body:not(.current) {
    display: none !important;
}

.wizard > .steps {
    margin-bottom: 20px !important;
}

.wizard > .steps > ul {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.wizard > .steps > ul > li {
    float: none !important;
    flex: 1 1 200px !important;
    width: auto !important;
}

.wizard > .steps a, .wizard > .steps a:hover, .wizard > .steps a:active {
    border-radius: 10px !important;
    padding: 12px 18px !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    text-align: center !important;
    background: #f1f5f9 !important;
    color: #64748b !important;
    margin: 0 !important;
    display: block !important;
    transition: all 0.2s ease !important;
}

.wizard > .steps .current a, .wizard > .steps .current a:hover, .wizard > .steps .current a:active {
    background: var(--admin-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px var(--admin-primary-glow) !important;
}

.wizard > .steps .done a, .wizard > .steps .done a:hover, .wizard > .steps .done a:active {
    background: rgba(110, 38, 14, 0.12) !important;
    color: var(--admin-primary) !important;
}

.wizard > .actions {
    position: static !important;
    margin-top: 24px !important;
    padding-top: 16px !important;
    border-top: 1px solid #f1f5f9 !important;
}

.wizard > .actions > ul {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}

.wizard > .actions a, .wizard > .actions a:hover, .wizard > .actions a:active {
    background: var(--admin-primary) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    padding: 10px 24px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
}

.wizard > .actions .disabled a, .wizard > .actions .disabled a:hover, .wizard > .actions .disabled a:active {
    background: #e2e8f0 !important;
    color: #94a3b8 !important;
    cursor: not-allowed !important;
}

/* Fieldset & Legend Styling in Forms */
fieldset.scheduler-border {
    border: 1px solid #cbd5e1 !important;
    padding: 20px 24px !important;
    border-radius: 12px !important;
    margin-bottom: 24px !important;
    background: #fafbfc !important;
}

legend.scheduler-border, fieldset.scheduler-border legend {
    width: auto !important;
    padding: 4px 14px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--admin-primary) !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    margin-bottom: 0 !important;
}

/* --- Form Controls & Filter Cards --- */
.form-control, select.form-control, textarea.form-control, .select2-container--default .select2-selection--single {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 9px 14px !important;
    font-size: 13.5px !important;
    color: var(--admin-text-main) !important;
    font-family: var(--admin-font) !important;
    height: auto !important;
    min-height: 42px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
    transition: all 0.2s ease !important;
}

.form-control:focus, select.form-control:focus, textarea.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--admin-primary) !important;
    box-shadow: 0 0 0 3.5px var(--admin-primary-glow) !important;
    outline: none !important;
}

.form-group label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin-bottom: 6px !important;
}

.form-group .btn-filter,
.form-group .btn-search {
    margin-top: 25px !important;
    width: 100% !important;
}

@media (max-width: 767px) {
    .form-group .btn-filter,
    .form-group .btn-search {
        margin-top: 0 !important;
    }
}

/* --- Buttons & Action Icons --- */
.btn {
    font-family: var(--admin-font) !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    border-radius: 10px !important;
    padding: 9px 18px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important;
}

.btn-primary, .btn-secondary, .btn-info, .btn-search {
    background-color: var(--admin-primary) !important;
    border-color: var(--admin-primary) !important;
    color: #ffffff !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-secondary:hover, .btn-info:hover, .btn-search:hover {
    background-color: var(--admin-primary-hover) !important;
    border-color: var(--admin-primary-hover) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px var(--admin-primary-glow) !important;
}

.btn-primary:active, .btn-secondary:active {
    transform: translateY(0) !important;
}

/* Table Action Buttons Fix */
.table .btn-icon,
.table .btn-action,
.table .btn-sm.btn-icon {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    margin: 2px !important;
    box-shadow: none !important;
    border: none !important;
}

/* Unified Theme Colors for Table Action Buttons */
.table .btn-success, .table .btn-info, .table .btn-primary, .table a.btn-success {
    background: var(--admin-primary-light) !important;
    color: var(--admin-primary) !important;
}

.table .btn-success:hover, .table .btn-info:hover, .table .btn-primary:hover, .table a.btn-success:hover {
    background: var(--admin-primary) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

.table .btn-danger, .table button.btn-danger {
    background: rgba(220, 38, 38, 0.1) !important;
    color: #dc2626 !important;
}

.table .btn-danger:hover, .table button.btn-danger:hover {
    background: #dc2626 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

.table .btn-warning {
    background: rgba(217, 119, 6, 0.1) !important;
    color: #d97706 !important;
}

.table .btn-warning:hover {
    background: #d97706 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

/* --- DataTables & Tables Overhaul --- */
.table-responsive {
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid var(--admin-border-color) !important;
}

.table {
    width: 100% !important;
    margin-bottom: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.table thead th {
    background-color: var(--admin-primary) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 14px 16px !important;
    border: none !important;
    vertical-align: middle !important;
}

.table tbody td {
    padding: 14px 16px !important;
    vertical-align: middle !important;
    font-size: 13.5px !important;
    color: #334155 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-top: none !important;
    background: #ffffff !important;
}

.table tbody tr {
    transition: background-color 0.15s ease !important;
}

.table tbody tr:nth-child(even) td {
    background-color: #fcfcfd !important;
}

.table tbody tr:hover td {
    background-color: var(--admin-primary-subtle) !important;
}

/* DataTables Filter/Export Buttons Bar */
.dt-buttons .btn, .dt-buttons .dt-button, .dt-buttons button {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    border-radius: 8px !important;
    padding: 6px 14px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    margin-right: 6px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
    transition: all 0.2s ease !important;
}

.dt-buttons .btn:hover, .dt-buttons .dt-button:hover, .dt-buttons button:hover {
    background: var(--admin-primary-light) !important;
    border-color: var(--admin-primary) !important;
    color: var(--admin-primary) !important;
    transform: translateY(-1px) !important;
}

/* --- Badges & Status Pills --- */
.badge, span.badge {
    font-family: var(--admin-font) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    border-radius: 50px !important;
    letter-spacing: 0.02em !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    box-shadow: none !important;
}

.badge-success, .badge-approved, span.badge-success {
    background-color: rgba(110, 38, 14, 0.1) !important;
    color: var(--admin-primary) !important;
    border: 1px solid rgba(110, 38, 14, 0.25) !important;
}

.badge-warning, .badge-pending, span.badge-warning {
    background-color: rgba(110, 38, 14, 0.05) !important;
    color: #8A3018 !important;
    border: 1px dashed rgba(110, 38, 14, 0.3) !important;
}

.badge-danger, .badge-rejected, span.badge-danger {
    background-color: rgba(110, 38, 14, 0.22) !important;
    color: var(--admin-primary-dark) !important;
    border: 1px solid rgba(110, 38, 14, 0.4) !important;
}

.badge-primary, .badge-info {
    background-color: var(--admin-primary) !important;
    color: #ffffff !important;
}

/* --- Pagination --- */
.pagination {
    gap: 4px !important;
}

.page-item .page-link {
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    color: var(--admin-primary) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 7px 13px !important;
    transition: all 0.15s ease !important;
}

.page-item.active .page-link {
    background-color: var(--admin-primary) !important;
    border-color: var(--admin-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px var(--admin-primary-glow) !important;
}

.page-item .page-link:hover {
    background-color: var(--admin-primary-light) !important;
    border-color: var(--admin-primary) !important;
    color: var(--admin-primary) !important;
}

/* --- Pre-loader & Animations --- */
.loader-bg .loader-track .loader-fill {
    background: var(--admin-primary) !important;
}

/* ==========================================
   Modern Material DateTimePicker Overlay & Styling
   ========================================== */

.dtp {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(15, 23, 42, 0.55) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 99999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    box-sizing: border-box !important;
}

.dtp > .dtp-content {
    background: #ffffff !important;
    width: 100% !important;
    max-width: 330px !important;
    max-height: 90vh !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin: 0 auto !important;
    transform: none !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25), 0 10px 10px -5px rgba(0, 0, 0, 0.1) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(110, 38, 14, 0.12) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

.dtp .dtp-date-view {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    background: #ffffff !important;
}

.dtp > .dtp-content > .dtp-date-view > header.dtp-header {
    background: var(--admin-primary) !important;
    color: #ffffff !important;
    text-align: left !important;
    padding: 14px 18px 6px 18px !important;
    position: relative !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    opacity: 0.95 !important;
}

.dtp div.dtp-date,
.dtp div.dtp-time {
    background: var(--admin-primary) !important;
    text-align: center !important;
    color: #ffffff !important;
    padding: 4px 18px 18px 18px !important;
}

.dtp div.dtp-date > div {
    padding: 0 !important;
    margin: 0 !important;
}

.dtp div.dtp-actual-month {
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    color: #ffffff !important;
}

.dtp div.dtp-actual-num {
    font-size: 42px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    margin: 6px 0 2px 0 !important;
    color: #ffffff !important;
}

.dtp div.dtp-actual-maxtime {
    font-size: 40px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    margin: 6px 0 !important;
    color: #ffffff !important;
}

.dtp div.dtp-actual-year {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    display: inline-block !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    transition: background 0.2s ease !important;
}

.dtp div.dtp-actual-year:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    cursor: pointer !important;
}

.dtp div.dtp-picker {
    padding: 14px 14px 8px 14px !important;
    text-align: center !important;
    background: #ffffff !important;
}

.dtp div.dtp-picker-month,
.dtp div.dtp-actual-time {
    font-weight: 700 !important;
    text-align: center !important;
    font-size: 14px !important;
    color: var(--admin-text-main) !important;
}

.dtp div.dtp-picker-month {
    padding-bottom: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.dtp .dtp-close {
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
}

.dtp .dtp-close > a {
    color: #ffffff !important;
    opacity: 0.85 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.dtp .dtp-close > a:hover {
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.2) !important;
}

.dtp table.dtp-picker-days {
    margin: 0 auto !important;
    width: 100% !important;
    min-height: auto !important;
    border-collapse: separate !important;
    border-spacing: 2px !important;
}

.dtp table.dtp-picker-days,
.dtp table.dtp-picker-days tr,
.dtp table.dtp-picker-days tr > td {
    border: none !important;
}

.dtp table.dtp-picker-days tr > td {
    font-weight: 600 !important;
    font-size: 13px !important;
    text-align: center !important;
    padding: 2px !important;
    height: 34px !important;
    width: 34px !important;
    vertical-align: middle !important;
}

.dtp table.dtp-picker-days tr > td > span.dtp-select-day {
    color: #D1D5DB !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
}

.dtp table.dtp-picker-days tr > td > a,
.dtp .dtp-picker-time > a {
    color: var(--admin-text-main) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    transition: all 0.15s ease-in-out !important;
    font-weight: 500 !important;
}

.dtp table.dtp-picker-days tr > td > a:hover {
    background: var(--admin-accent) !important;
    color: var(--admin-primary) !important;
}

.dtp table.dtp-picker-days tr > td > a.selected {
    background: var(--admin-primary) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 3px 6px var(--admin-primary-glow) !important;
}

.dtp table.dtp-picker-days tr > th {
    color: var(--admin-primary) !important;
    text-align: center !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    padding: 6px 2px !important;
    background: transparent !important;
}

.dtp .p10 > a {
    color: #ffffff !important;
    opacity: 0.85 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    text-decoration: none !important;
    transition: background 0.2s ease !important;
}

.dtp .p10 > a:hover {
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.2) !important;
}

.dtp .p10 { width: 10%; display: inline-block; }
.dtp .p20 { width: 20%; display: inline-block; }
.dtp .p60 { width: 60%; display: inline-block; }
.dtp .p80 { width: 80%; display: inline-block; }

.dtp a.dtp-meridien-am,
.dtp a.dtp-meridien-pm {
    position: relative;
    top: 10px;
    color: #ffffff !important;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px !important;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.2) !important;
    font-size: 1em;
}

.dtp .dtp-actual-meridien a.selected {
    background: #ffffff !important;
    color: var(--admin-primary) !important;
}

.dtp .dtp-picker-time > .dtp-select-hour,
.dtp .dtp-picker-time > .dtp-select-minute {
    cursor: pointer;
}

.dtp .dtp-buttons {
    padding: 12px 16px !important;
    text-align: right !important;
    background: var(--admin-bg-body) !important;
    border-top: 1px solid var(--admin-border-color) !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: auto !important;
}

.dtp .dtp-buttons button.btn {
    padding: 7px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    border: none !important;
    outline: none !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    margin: 0 !important;
    box-shadow: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.dtp .dtp-buttons .dtp-btn-cancel {
    background: transparent !important;
    color: var(--admin-text-muted) !important;
}

.dtp .dtp-buttons .dtp-btn-cancel:hover {
    background: #E5E7EB !important;
    color: var(--admin-text-main) !important;
}

.dtp .dtp-buttons .dtp-btn-ok {
    background: var(--admin-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 4px var(--admin-primary-glow) !important;
}

.dtp .dtp-buttons .dtp-btn-ok:hover {
    background: var(--admin-primary-hover) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 6px var(--admin-primary-glow) !important;
}

.dtp .dtp-buttons .dtp-btn-clear,
.dtp .dtp-buttons .dtp-btn-now {
    background: var(--admin-accent) !important;
    color: var(--admin-primary) !important;
}

.dtp .dtp-buttons .dtp-btn-clear:hover,
.dtp .dtp-buttons .dtp-btn-now:hover {
    background: #e8d5bf !important;
    color: var(--admin-primary-hover) !important;
}

.dtp.hidden, .dtp .hidden { display: none !important; }
.dtp .invisible { visibility: hidden; }

.year-picker-item {
    text-align: center !important;
    padding: 8px 12px !important;
    font-size: 15px !important;
    cursor: pointer !important;
    margin: 2px auto !important;
    border-radius: 8px !important;
    transition: all 0.15s ease !important;
    color: var(--admin-text-main) !important;
}

.year-picker-item:hover {
    color: var(--admin-primary) !important;
    background: var(--admin-accent) !important;
}

.year-picker-item.active {
    color: #ffffff !important;
    background: var(--admin-primary) !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
}

/* ==========================================================================
   Checkbox & Radio Theme Color Overrides
   ========================================================================== */
input[type="checkbox"] {
    accent-color: var(--admin-primary) !important;
}

input[type="radio"] {
    accent-color: var(--admin-primary) !important;
}

.checkbox input[type=checkbox] + .cr:before {
    border-color: #d1d5db !important;
}

.checkbox input[type=checkbox]:checked + .cr:before {
    background: var(--admin-primary) !important;
    border-color: var(--admin-primary) !important;
    color: #ffffff !important;
}

.checkbox.checkbox-fill input[type=checkbox]:checked + .cr:before {
    background: transparent !important;
    color: var(--admin-primary) !important;
    border-color: transparent !important;
}

.radio input[type=radio]:checked + .cr:before {
    border-color: var(--admin-primary) !important;
}

.radio input[type=radio]:checked + .cr:after {
    background: var(--admin-primary) !important;
}