/* ============================================================
   YouTech Portal — UI Design System (v4)

   Presentation-only layer loaded after the theme (style.css,
   pages.css, custom_style.css and the DB-driven theme/styles.php).

   Ground rules for this file:
   - Never set `display` with !important on anything scripts may
     show/hide (.btn, .badge, label, .alert, .form-group, rows…).
     jQuery .hide()/.show() write inline display, and an !important
     stylesheet rule would silently override them.
   - Never touch heights/widths the pcoded layout JS depends on
     (header 70px, sidebar width, collapsed states).
   - Never change pointer-events, visibility or z-index of plugin UI.
   ============================================================ */

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

/* ============================================================
   0. DESIGN TOKENS
   ============================================================ */

:root {
    /* Brand */
    --yt-primary: #170D46;          /* deep navy purple: sidebar, dark surfaces */
    --yt-secondary: #4520A5;        /* royal purple: primary cards, info actions */
    --yt-accent: #FF512F;           /* vibrant orange-red: brand accents, CTAs */
    --yt-accent-dark: #E8431F;
    --yt-bg: #F4F7FD;
    --yt-card: #FFFFFF;
    --yt-text: #171044;
    --yt-muted: #687AA5;
    --yt-border: #DFE6F2;
    --yt-border-soft: #EAF0F8;
    --yt-surface: #F8FAFE;
    --yt-hover: #F1F4FB;

    /* Status */
    --yt-success: #10A875;
    --yt-success-dark: #0B8A60;
    --yt-success-bg: #E7F7F1;
    --yt-danger: #F04438;
    --yt-danger-dark: #D12F24;
    --yt-danger-bg: #FEECEB;
    --yt-warning: #F59E0B;
    --yt-warning-dark: #D98306;
    --yt-warning-bg: #FFF5E5;
    --yt-warning-text: #A65300;
    --yt-info: #2675D8;
    --yt-info-dark: #1C5FB6;
    --yt-info-bg: #EAF2FC;

    /* Dashboard metrics (base + gradient end) */
    --yt-m-royal: #4520A5;   --yt-m-royal-dark: #331780;
    --yt-m-green: #10A875;   --yt-m-green-dark: #0B8A60;
    --yt-m-blue: #2675D8;    --yt-m-blue-dark: #1C5FB6;
    --yt-m-red: #F04438;     --yt-m-red-dark: #D12F24;
    --yt-m-violet: #7544D8;  --yt-m-violet-dark: #5A30B8;
    --yt-m-pink: #D83D7A;    --yt-m-pink-dark: #B92C63;
    --yt-m-amber: #F59E0B;   --yt-m-amber-dark: #D98306;
    --yt-m-teal: #0D9AA6;    --yt-m-teal-dark: #0A7C86;

    /* Field icons (shared by native selects, select2 and date fields) */
    --yt-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234520A5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --yt-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%234520A5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
    --yt-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%234520A5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
    --yt-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23687AA5' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");

    --yt-header-gradient: linear-gradient(90deg, #170D46 0%, #64236D 55%, #FF512F 100%);
    --yt-sidebar-bg: #170D46;
    --yt-sidebar-active: #352078;
    --yt-sidebar-hover: rgba(255, 255, 255, 0.06);
    --yt-sidebar-text: rgba(255, 255, 255, 0.82);

    --yt-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Type scale */
    --yt-fs-brand: 27px;         /* brand name, 700 */
    --yt-fs-title: 26px;         /* page title, 700 */
    --yt-fs-section: 18px;       /* section heading, 600 */
    --yt-fs-card: 16px;          /* card heading, 600 */
    --yt-fs-card-sm: 15px;       /* stat card label, 600 */
    --yt-fs-nav: 15px;           /* sidebar item, 500 */
    --yt-fs-subnav: 14px;        /* sidebar sub-item, 500 */
    --yt-fs-label: 13px;         /* form label, 600 */
    --yt-fs-body: 14px;          /* input and table text, 400 */
    --yt-fs-th: 12.5px;          /* table heading, 600 */
    --yt-fs-btn: 14px;           /* button, 600 */
    --yt-fs-btn-sm: 13px;
    --yt-fs-kpi: clamp(24px, 1.55vw, 30px); /* KPI figure in stat cards, 700 */
    --yt-fs-kpi-lg: 32px;        /* KPI figure in counters, 700 */
    --yt-radius-sm: 8px;
    --yt-radius: 10px;
    --yt-radius-lg: 14px;
    --yt-shadow-sm: 0 1px 2px rgba(23, 13, 70, 0.04);
    --yt-shadow: 0 2px 12px rgba(23, 13, 70, 0.05);
    --yt-shadow-lg: 0 18px 48px rgba(23, 13, 70, 0.18);
    --yt-focus: 0 0 0 3px rgba(255, 81, 47, 0.14);
    --yt-control-h: 42px;
}

/* ============================================================
   1. FOUNDATIONS & TYPOGRAPHY
   Font is set on text containers only; icon fonts (<i>, .fa,
   .feather, .icofont, .ti-*) keep their own font-family.
   ============================================================ */

body,
h1, h2, h3, h4, h5, h6,
.pcoded .pcoded-navbar,
.header-navbar,
.btn,
.form-control,
input, select, textarea, button,
table,
.modal-title,
.sweet-alert,
.select2-container {
    font-family: var(--yt-font) !important;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--yt-bg) !important;
    color: var(--yt-text);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--yt-text);
    font-weight: 700;
    letter-spacing: -0.2px;
}

a {
    color: var(--yt-secondary);
}

a:hover {
    color: var(--yt-accent);
}

.text-muted {
    color: var(--yt-muted) !important;
}

.pcoded-main-container,
.pcoded-content {
    background-color: var(--yt-bg) !important;
}

.pcoded-inner-content,
.page-wrapper {
    padding: 0 !important;
}

.page-body {
    padding: 0 28px 28px !important;
}

/* ============================================================
   2. TOP NAVBAR
   ============================================================ */

.pcoded .pcoded-header,
nav.header-navbar.pcoded-header,
.pcoded .pcoded-header[header-theme] {
    background: var(--yt-header-gradient) !important;
}

/* The logo block sits on the header, so it shows the header gradient through
   (giving it its own gradient left a visible seam) */
.header-navbar .navbar-wrapper .navbar-logo,
.header-navbar .navbar-wrapper .navbar-logo[logo-theme] {
    background: transparent !important;
}

@media (min-width: 992px) {
    .header-navbar .navbar-wrapper .navbar-logo .mobile-menu {
        right: 10px;
    }
}

nav.header-navbar.pcoded-header {
    box-shadow: 0 4px 18px rgba(23, 13, 70, 0.22) !important;
    border-bottom: 0 !important;
}

.header-navbar .navbar-wrapper .navbar-container,
.header-navbar .navbar-wrapper .navbar-container .nav-left,
.header-navbar .navbar-wrapper .navbar-container .nav-right {
    background: transparent !important;
}

.header-navbar .navbar-logo a,
.header-navbar .navbar-logo h2 {
    color: #FFFFFF !important;
}

.header-navbar .navbar-logo h2 {
    font-weight: 700 !important;
    font-size: var(--yt-fs-brand) !important;
    letter-spacing: -0.5px !important;
    margin: 0 !important;
}

.header-navbar .navbar-logo .mobile-menu i,
.header-navbar .navbar-logo .mobile-options i,
.header-navbar .navbar-container .nav-right > li > i,
.header-navbar .navbar-container .nav-right .notify--list > i {
    color: #FFFFFF !important;
}

/* Theme gives every header item line-height 4.4 (70px); children reset it */
.header-navbar .navbar-wrapper .navbar-container .nav-left li,
.header-navbar .navbar-wrapper .navbar-container .nav-right li {
    height: 70px;
}

/* Round translucent icon buttons: sidebar toggle and bell */
.header-navbar .navbar-logo .mobile-menu i,
.header-navbar .notify--list > i.fa-bell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.16);
    line-height: 1;
    vertical-align: middle;
    transition: background-color 0.2s ease;
}

.header-navbar .navbar-logo .mobile-menu i {
    font-size: 1.05rem;
}

.header-navbar .notify--list > i.fa-bell {
    font-size: 1.1rem;
}

.header-navbar .navbar-logo .mobile-menu:hover i,
.header-navbar .notify--list:hover > i.fa-bell {
    background: rgba(255, 255, 255, 0.2);
}

/* Thin divider between the bell and the profile chip */
.header-navbar .navbar-wrapper .navbar-container .nav-right .notify--list::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 1px;
    height: 28px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.24);
}

/* Low stock pill */
.header-navbar .navbar-wrapper .navbar-container .low_stock_wrapper li {
    display: flex;
    align-items: center;
    padding-left: 20px;
}

nav.header-navbar .low_stock_wrapper li > a {
    line-height: 1.3 !important;
    vertical-align: middle;
    background: rgba(255, 255, 255, 0.10) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 999px !important;
    padding: 8px 16px !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.1px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

nav.header-navbar .low_stock_wrapper li > a::before {
    content: "\f071";
    font-family: FontAwesome;
    margin-right: 8px;
    color: #FFC56B;
}

nav.header-navbar .low_stock_wrapper li > a:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.36) !important;
}

/* User profile chip */
.header-navbar .navbar-wrapper .navbar-container .nav-right .user-profile {
    padding-right: 20px;
}

.header-navbar .user-profile .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    line-height: 1.2;
    padding: 4px 14px 4px 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.16);
    transition: background-color 0.2s ease;
}

.header-navbar .user-profile .dropdown-toggle:hover,
.header-navbar .user-profile .dropdown.show .dropdown-toggle {
    background: rgba(255, 255, 255, 0.2);
}

.header-navbar .navbar-wrapper .navbar-container .header-notification.user-profile img,
.header-navbar .user-profile .img-radius {
    width: 36px !important;
    height: 36px !important;
    margin-right: 10px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255, 255, 255, 0.7) !important;
    background: #FFFFFF;
    object-fit: cover;
}

.header-navbar .user-profile .dropdown-toggle span,
.header-navbar .user-profile .dropdown-toggle i {
    color: #FFFFFF !important;
    font-weight: 600 !important;
}

.header-navbar .user-profile .dropdown-toggle span {
    font-size: var(--yt-fs-body);
}

.header-navbar .user-profile .dropdown-toggle i {
    margin-left: 8px !important;
    opacity: 0.85;
}

/* Notification badge: white on the gradient so it reads at any position */
.header-navbar .notify--list .badge {
    position: absolute !important;
    top: 14px !important;
    left: 44px !important;
    right: auto !important;
    margin: 0 !important;
    min-width: 19px;
    height: 19px;
    padding: 0 5px !important;
    justify-content: center;
    align-items: center;
    background: #FFFFFF !important;
    color: var(--yt-primary) !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: 0 2px 6px rgba(23, 13, 70, 0.35) !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    line-height: 19px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Until the count arrives the badge is an empty ring; hide it visually
   (visibility, not display, so nothing scripted is affected). */
.header-navbar .notify--list .badge:has(> .bcount:empty) {
    visibility: hidden;
}

/* Header dropdowns */
.header-navbar .profile-notification,
.header-navbar .show-notification {
    border: 1px solid var(--yt-border) !important;
    border-radius: var(--yt-radius) !important;
    box-shadow: var(--yt-shadow-lg) !important;
    overflow: hidden;
}

.header-navbar .profile-notification li > a {
    color: var(--yt-text) !important;
    font-weight: 500;
}

.header-navbar .profile-notification li:hover,
.header-navbar .profile-notification li:hover > a {
    background: var(--yt-hover) !important;
    color: var(--yt-accent) !important;
}

/* ============================================================
   3. SIDEBAR
   ============================================================ */

.pcoded .pcoded-navbar,
.pcoded .pcoded-navbar .nav-list,
.pcoded .pcoded-navbar[navbar-theme] .nav-user,
.pcoded .pcoded-navbar[navbar-theme] .pcoded-inner-navbar,
.pcoded .pcoded-navbar[navbar-theme=theme1] .nav-user,
.pcoded .pcoded-navbar[navbar-theme=theme1] .pcoded-inner-navbar {
    background: var(--yt-sidebar-bg) !important;
}

.pcoded .pcoded-navbar {
    box-shadow: 4px 0 24px rgba(23, 13, 70, 0.16) !important;
}

.pcoded .pcoded-navbar .pcoded-inner-navbar {
    padding-top: 14px;
    padding-bottom: 24px;
}

/* Top-level items */
.pcoded .pcoded-navbar .pcoded-item {
    margin: 0 !important;
}

.pcoded .pcoded-navbar .pcoded-item > li > a,
.pcoded .pcoded-navbar[navbar-theme=theme1] .pcoded-item > li > a {
    color: var(--yt-sidebar-text) !important;
    margin: 2px 12px !important;
    border-radius: var(--yt-radius) !important;
    border-left: 3px solid transparent !important;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease !important;
}

.pcoded .pcoded-navbar .pcoded-item > li > a > .pcoded-micon i {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 1.12rem !important;
}

.pcoded .pcoded-navbar .pcoded-item > li > a .pcoded-mtext {
    font-weight: 500 !important;
    font-size: var(--yt-fs-nav) !important;
    letter-spacing: 0.1px;
}

.pcoded .pcoded-navbar .pcoded-item > li:hover > a,
.pcoded .pcoded-navbar[navbar-theme=theme1] .pcoded-item > li:hover > a {
    background: var(--yt-sidebar-hover) !important;
    color: #FFFFFF !important;
}

/* Active item: purple pill + orange accent bar */
.pcoded[theme-layout=vertical] .pcoded-navbar[navbar-theme=theme1][active-item-theme=theme1] .pcoded-item > li.active > a,
.pcoded[theme-layout=vertical] .pcoded-navbar[navbar-theme=theme1][active-item-theme=theme1] .pcoded-item > li.pcoded-trigger > a,
.pcoded[theme-layout=vertical] .pcoded-navbar[navbar-theme=theme1][active-item-theme=theme1] .pcoded-item > li.active:hover > a,
.pcoded[theme-layout=vertical] .pcoded-navbar[navbar-theme=theme1][active-item-theme=theme1] .pcoded-item > li.pcoded-trigger:hover > a,
.pcoded .pcoded-navbar .pcoded-item > li.active > a {
    background: var(--yt-sidebar-active) !important;
    color: #FFFFFF !important;
    border-left-color: var(--yt-accent) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.pcoded .pcoded-navbar .pcoded-item > li.active > a > .pcoded-micon i,
.pcoded .pcoded-navbar .pcoded-item > li.pcoded-trigger > a > .pcoded-micon i {
    color: #FFFFFF !important;
}

/* Keep long labels clear of the chevron (expanded sidebar only) */
.pcoded:not([vertical-nav-type=collapsed]) .pcoded-navbar .pcoded-item > li.pcoded-hasmenu > a {
    padding-right: 30px !important;
}

.pcoded:not([vertical-nav-type=collapsed]) .pcoded-navbar .pcoded-item > li.pcoded-hasmenu > a::after {
    right: 10px !important;
}

/* Expanded sidebar: icon + label as a flex row so long labels wrap beside
   the icon. Sidebar links are never shown/hidden by script. */
.pcoded:not([vertical-nav-type=collapsed]) .pcoded-navbar .pcoded-item > li > a {
    display: flex !important;
    align-items: center;
}

.pcoded:not([vertical-nav-type=collapsed]) .pcoded-navbar .pcoded-item > li > a > .pcoded-micon {
    flex: 0 0 auto;
}

.pcoded:not([vertical-nav-type=collapsed]) .pcoded-navbar .pcoded-item > li > a .pcoded-mtext {
    white-space: normal;
    display: block !important;
    flex: 1 1 auto;
    min-width: 0;
    position: relative !important; /* theme makes it absolute, so it could not wrap or size the link */
    top: auto !important;
    line-height: 1.3;
    vertical-align: middle;
}

/* Expand / collapse chevron of menus with children */
.pcoded .pcoded-navbar .pcoded-item > li.pcoded-hasmenu > a::after {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Submenus */
.pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu,
.pcoded .pcoded-navbar[navbar-theme=theme1] .pcoded-item .pcoded-hasmenu .pcoded-submenu,
.pcoded[theme-layout=vertical] .pcoded-navbar .pcoded-item > .pcoded-hasmenu > .pcoded-submenu {
    background: transparent !important;
    padding: 4px 0 6px !important;
    border-left-color: transparent !important;
}

.pcoded .pcoded-navbar .pcoded-item > li,
.pcoded .pcoded-navbar .pcoded-item > li.pcoded-trigger {
    border-left: 0 !important;
}

.pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu li > a,
.pcoded .pcoded-navbar[navbar-theme=theme1] .pcoded-item .pcoded-hasmenu .pcoded-submenu li > a {
    color: rgba(255, 255, 255, 0.68) !important;
    border-radius: var(--yt-radius-sm) !important;
    margin: 1px 12px 1px 28px !important;
    border-left: 0 !important;
    transition: background-color 0.18s ease, color 0.18s ease !important;
}

.pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu li > a .pcoded-mtext {
    font-weight: 500 !important;
    font-size: var(--yt-fs-subnav) !important;
}

.pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu li:hover > a {
    background: var(--yt-sidebar-hover) !important;
    color: #FFFFFF !important;
}

.pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu li.active > a {
    background: rgba(255, 81, 47, 0.14) !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
}

.pcoded .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu li.active > a .pcoded-mtext::before {
    color: var(--yt-accent) !important;
}

/* Collapsed (icon-only) sidebar: submenus become flyouts, so they
   need a solid background, and items need less horizontal margin. */
.pcoded[theme-layout=vertical][vertical-nav-type=collapsed] .pcoded-navbar .pcoded-item > li > a,
.pcoded[theme-layout=vertical][vertical-nav-type=collapsed] .pcoded-navbar[navbar-theme=theme1] .pcoded-item > li > a {
    margin: 2px 0 !important;
    border-radius: 0 !important;
}

.pcoded[theme-layout=vertical][vertical-nav-type=collapsed] .pcoded-navbar .pcoded-item li .pcoded-submenu,
.pcoded[theme-layout=vertical][vertical-nav-type=collapsed] .pcoded-navbar[navbar-theme=theme1] .pcoded-item li .pcoded-submenu {
    background: var(--yt-sidebar-bg) !important;
    border-radius: 0 var(--yt-radius) var(--yt-radius) 0;
    box-shadow: 8px 8px 24px rgba(23, 13, 70, 0.25);
}

.pcoded[theme-layout=vertical][vertical-nav-type=collapsed] .pcoded-navbar .pcoded-item .pcoded-hasmenu .pcoded-submenu li > a {
    margin: 1px 8px !important;
}

/* Theme section labels inside the sidebar, if any */
.pcoded .pcoded-navbar .pcoded-navigatio-lavel {
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 0.7rem !important;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Sales Reps: grouped, compact navigation, including the collapsed flyout.
   Scope these rules so the other sidebar menus keep their existing layout. */
.pcoded .pcoded-navbar .commission-sidebar-menu {
    caret-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

.pcoded .pcoded-navbar .pcoded-item > li.commission-sidebar-menu > .pcoded-submenu {
    padding: 4px 0 12px !important;
}

.pcoded .pcoded-navbar .pcoded-item > li.commission-sidebar-menu .commission-menu-group {
    margin: 6px 12px 0;
    padding: 0;
    border: 0;
}

.pcoded .pcoded-navbar .pcoded-item > li.commission-sidebar-menu .commission-menu-group:first-child {
    margin-top: 4px;
}

.pcoded .pcoded-navbar .pcoded-item > li.commission-sidebar-menu .commission-menu-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 36px;
    padding: 9px 10px;
    border-radius: 6px;
    color: #b8b2d4;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .09em;
    text-transform: uppercase;
    list-style: none;
    cursor: pointer;
}

.pcoded .pcoded-navbar .commission-menu-heading::-webkit-details-marker {
    display: none;
}

.pcoded .pcoded-navbar .commission-menu-heading::marker {
    content: '';
}

.pcoded .pcoded-navbar .commission-menu-heading:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.pcoded .pcoded-navbar .commission-menu-section.has-current-page > .commission-menu-heading {
    color: #fff;
}

.pcoded .pcoded-navbar .commission-menu-chevron {
    flex: 0 0 auto;
    font-size: 14px;
    transform: rotate(-90deg);
}

.pcoded .pcoded-navbar .commission-menu-section[open] > summary .commission-menu-chevron {
    transform: none;
}

.pcoded .pcoded-navbar .commission-menu-links {
    list-style: none;
    margin: 0;
    padding: 0 0 4px;
}

.pcoded .pcoded-navbar .pcoded-item > li.commission-sidebar-menu .commission-menu-links > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    margin: 2px 0 2px 10px !important;
    padding: 8px 10px !important;
    border-radius: 7px !important;
    color: #d8d3ea !important;
    box-sizing: border-box;
}

.pcoded .pcoded-navbar .pcoded-item > li.commission-sidebar-menu .commission-menu-links > li > a > .pcoded-mtext {
    position: static;
    min-width: 0;
    margin: 0;
    padding: 0;
    font-size: 13px !important;
    line-height: 1.45;
    white-space: normal;
    overflow-wrap: break-word;
}

.pcoded .pcoded-navbar .pcoded-item > li.commission-sidebar-menu .commission-menu-links > li > a::before,
.pcoded .pcoded-navbar .pcoded-item > li.commission-sidebar-menu .commission-menu-links > li > a > .pcoded-mtext::before {
    display: none !important;
}

.pcoded .pcoded-navbar .pcoded-item > li.commission-sidebar-menu .commission-menu-icon {
    flex: 0 0 18px;
    width: 18px;
    font-size: 16px;
    text-align: center;
    color: #aaa1cd;
}

.pcoded .pcoded-navbar .pcoded-item > li.commission-sidebar-menu .commission-menu-links > li > a:hover {
    background: rgba(255, 255, 255, .08) !important;
    color: #fff !important;
}

.pcoded .pcoded-navbar .pcoded-item > li.commission-sidebar-menu .commission-menu-links > li.active > a {
    background: rgba(255, 81, 47, .18) !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 var(--yt-accent);
}

.pcoded .pcoded-navbar .pcoded-item > li.commission-sidebar-menu .commission-menu-links > li > a:hover .commission-menu-icon,
.pcoded .pcoded-navbar .pcoded-item > li.commission-sidebar-menu .commission-menu-links > li.active .commission-menu-icon {
    color: #fff;
}

.pcoded .pcoded-navbar .pcoded-item > li.commission-sidebar-menu .commission-menu-heading:focus-visible,
.pcoded .pcoded-navbar .pcoded-item > li.commission-sidebar-menu .commission-menu-links > li > a:focus-visible {
    outline: 2px solid #85c8ff;
    outline-offset: 1px;
    color: #fff !important;
}

/* ============================================================
   4. PAGE HEADER (.page-header.card)
   ============================================================ */

.page-header.card {
    background: var(--yt-card) !important;
    border: 1px solid var(--yt-border-soft) !important;
    border-radius: var(--yt-radius-lg) !important;
    box-shadow: var(--yt-shadow) !important;
    margin: 28px 28px 24px !important;
    padding: 22px 28px !important;
}

.page-header.card > .row {
    margin: 0;
    width: 100%;
    align-items: center !important;
}

.page-header.card .page-header-title {
    display: flex;
    align-items: center;
    gap: 18px;
}

.page-header.card .page-header-title > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    float: none !important;
    flex-shrink: 0;
    width: 64px !important;
    height: 64px !important;
    margin: 0 !important;
    border-radius: 16px !important;
    background: var(--yt-primary) !important;
    color: #FFFFFF !important;
    font-size: 1.6rem !important;
    box-shadow: 0 8px 20px rgba(23, 13, 70, 0.22) !important;
}

.page-header.card .page-header-title h5 {
    font-size: var(--yt-fs-title) !important;
    font-weight: 700 !important;
    color: var(--yt-primary) !important;
    letter-spacing: -0.4px;
    line-height: 1.2;
    margin: 0 !important;
}

.page-header.card .page-header-title span {
    display: block;
    margin-top: 6px;
    font-size: 0.98rem !important;
    color: var(--yt-muted) !important;
    font-weight: 400;
}

/* Breadcrumbs */
.page-header.card .page-header-breadcrumb {
    display: flex;
    justify-content: flex-end;
}

.page-header.card .breadcrumb {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

.page-header.card .breadcrumb-item,
.page-header.card .breadcrumb-item a {
    font-size: 0.84rem !important;
    font-weight: 500;
    color: var(--yt-muted) !important;
}

.page-header.card .breadcrumb-item a:hover {
    color: var(--yt-accent) !important;
}

.page-header.card .breadcrumb-item:last-child,
.page-header.card .breadcrumb-item:last-child a {
    color: var(--yt-primary) !important;
    font-weight: 600;
}

.page-header.card .breadcrumb-item + .breadcrumb-item::before {
    color: #B7C2D6 !important;
}

/* ============================================================
   5. CARDS
   ============================================================ */

.card:not(.card-counter):not(.prod-p-card):not(.auth-box):not(.page-header) {
    background: var(--yt-card);
    border: 1px solid var(--yt-border-soft) !important;
    border-radius: var(--yt-radius-lg) !important;
    box-shadow: var(--yt-shadow) !important;
    margin-bottom: 24px;
}

.card .card-header {
    background: transparent;
    border-bottom: 1px solid var(--yt-border-soft);
    padding: 18px 24px;
}

.card .card-header:first-child {
    border-radius: var(--yt-radius-lg) var(--yt-radius-lg) 0 0;
}

.card .card-header h5,
.card .card-header .card-title {
    color: var(--yt-text) !important;
    font-weight: 600 !important;
    font-size: var(--yt-fs-card) !important;
}

/* The theme draws a coloured bar before card-header h5 */
.card .card-header h5::after {
    background-color: var(--yt-accent) !important;
}

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

.card .card-footer {
    background: var(--yt-surface);
    border-top: 1px solid var(--yt-border-soft);
    border-radius: 0 0 var(--yt-radius-lg) var(--yt-radius-lg);
}

/* ============================================================
   6. FILTER / SEARCH BAR (.search-tag)
   Where a card starts with a .search-tag header, the header and
   the body render as two separate cards (like the reference).
   ============================================================ */

.card .card-header.search-tag,
.search-tag {
    background: var(--yt-card) !important;
    border-bottom: 1px solid var(--yt-border-soft) !important;
    padding: 20px 24px !important;
}

.search-tag > .row {
    row-gap: 12px;
    align-items: center;
}

@supports selector(:has(*)) {
    /* Same :not() chain as the generic card rule so this one wins on specificity */
    .card:not(.card-counter):not(.prod-p-card):not(.auth-box):not(.page-header):has(> .card-header.search-tag) {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .card > .card-header.search-tag {
        border: 1px solid var(--yt-border-soft) !important;
        border-radius: var(--yt-radius-lg) !important;
        box-shadow: var(--yt-shadow) !important;
        margin-bottom: 24px;
    }

    .card:has(> .card-header.search-tag) > .card-block,
    .card:has(> .card-header.search-tag) > .card-body,
    /* Some templates (e.g. products) close the card right after the filter
       header, leaving the table body as the card's next sibling */
    .card:has(> .card-header.search-tag) + .card-block,
    .card:has(> .card-header.search-tag) + .card-body {
        background: var(--yt-card);
        border: 1px solid var(--yt-border-soft);
        border-radius: var(--yt-radius-lg);
        box-shadow: var(--yt-shadow);
    }
}

.search-tag .form-control,
.search-tag select,
.search-tag input[type="text"],
.search-tag input[type="date"],
.search-tag input[type="month"],
.search-tag input:not([type]) {
    height: var(--yt-control-h) !important;
}

/* Filter-bar action buttons are deep purple (Apply / Search) */
.search-tag .btn-primary,
.search-tag .apply--button {
    background: var(--yt-primary) !important;
    border-color: var(--yt-primary) !important;
    color: #FFFFFF !important;
    height: var(--yt-control-h);
    padding-left: 22px !important;
    padding-right: 22px !important;
    box-shadow: 0 6px 16px rgba(23, 13, 70, 0.22) !important;
}

.search-tag .btn-primary:hover,
.search-tag .apply--button:hover {
    background: var(--yt-secondary) !important;
    border-color: var(--yt-secondary) !important;
}

/* ============================================================
   7. BUTTONS
   Several templates use .btn-sm/.btn-primary without .btn, so
   the base shape is applied to those too. `display` is left to
   Bootstrap so .hide()/.show() keep working.
   ============================================================ */

.btn,
a.btn-sm, button.btn-sm, input.btn-sm,
a.btn-primary, button.btn-primary, input.btn-primary,
a.btn-success, button.btn-success, input.btn-success,
a.btn-danger, button.btn-danger, input.btn-danger,
a.btn-warning, button.btn-warning, input.btn-warning,
a.btn-info, button.btn-info, input.btn-info,
a.btn-secondary, button.btn-secondary, input.btn-secondary {
    border-radius: var(--yt-radius-sm) !important;
    font-weight: 600 !important;
    font-size: var(--yt-fs-btn) !important;
    line-height: 1.45 !important;
    padding: 9px 18px !important;
    border: 1px solid transparent;
    vertical-align: middle;
    cursor: pointer;
    text-decoration: none !important;
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease !important;
}

.btn-sm,
.btn.btn-sm {
    padding: 7px 14px !important;
    font-size: var(--yt-fs-btn-sm) !important;
}

.btn-xs,
.btn.btn-xs {
    padding: 4px 9px !important;
    font-size: 0.76rem !important;
    border-radius: 6px !important;
}

.btn-lg,
.btn.btn-lg {
    padding: 12px 24px !important;
    font-size: 0.95rem !important;
    border-radius: var(--yt-radius) !important;
}

.btn i,
.btn-sm i,
.btn-primary i {
    margin-right: 2px;
}

.btn:focus,
.btn.focus,
.btn-primary:focus,
.btn-sm:focus {
    box-shadow: var(--yt-focus) !important;
    outline: none;
}

.btn:disabled,
.btn.disabled,
[class*="btn-"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Primary = accent orange */
.btn-primary,
.btn-primary:visited,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
    background: var(--yt-accent) !important;
    border-color: var(--yt-accent) !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 16px rgba(255, 81, 47, 0.24) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--yt-accent-dark) !important;
    border-color: var(--yt-accent-dark) !important;
    color: #FFFFFF !important;
}

.btn-success,
.btn-success:active,
.btn-success:not(:disabled):not(.disabled):active {
    background: var(--yt-success) !important;
    border-color: var(--yt-success) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(16, 168, 117, 0.2) !important;
}

.btn-success:hover, .btn-success:focus {
    background: var(--yt-success-dark) !important;
    border-color: var(--yt-success-dark) !important;
    color: #FFFFFF !important;
}

.btn-danger,
.btn-danger:active,
.btn-danger:not(:disabled):not(.disabled):active {
    background: var(--yt-danger) !important;
    border-color: var(--yt-danger) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(240, 68, 56, 0.2) !important;
}

.btn-danger:hover, .btn-danger:focus {
    background: var(--yt-danger-dark) !important;
    border-color: var(--yt-danger-dark) !important;
    color: #FFFFFF !important;
}

.btn-warning,
.btn-warning:active,
.btn-warning:not(:disabled):not(.disabled):active {
    background: var(--yt-warning) !important;
    border-color: var(--yt-warning) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.22) !important;
}

.btn-warning:hover, .btn-warning:focus {
    background: var(--yt-warning) !important;
    border-color: var(--yt-warning) !important;
    color: #FFFFFF !important;
}

.btn-info,
.btn-info:active,
.btn-info:not(:disabled):not(.disabled):active {
    background: var(--yt-secondary) !important;
    border-color: var(--yt-secondary) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(69, 32, 165, 0.2) !important;
}

.btn-info:hover, .btn-info:focus {
    background: var(--yt-primary) !important;
    border-color: var(--yt-primary) !important;
    color: #FFFFFF !important;
}

.btn-secondary,
.btn-default,
.btn-light {
    background: var(--yt-card) !important;
    border: 1px solid var(--yt-border) !important;
    color: var(--yt-text) !important;
    box-shadow: var(--yt-shadow-sm) !important;
}

.btn-secondary:hover,
.btn-default:hover,
.btn-light:hover {
    background: var(--yt-hover) !important;
    border-color: #C9D4E7 !important;
    color: var(--yt-text) !important;
}

.btn-dark {
    background: var(--yt-primary) !important;
    border-color: var(--yt-primary) !important;
    color: #FFFFFF !important;
}

[class*="btn-outline-"] {
    background: transparent !important;
    box-shadow: none !important;
}

.btn-outline-primary {
    color: var(--yt-accent) !important;
    border: 1px solid var(--yt-accent) !important;
}

.btn-outline-primary:hover {
    background: var(--yt-accent) !important;
    color: #FFFFFF !important;
}

/* Primary "Add / Create" action, usually floated right above a table */
.card-block > .pull-right.btn-primary,
.card-block > a.pull-right.btn-sm,
.card-body > .pull-right.btn-primary,
.card-header > .pull-right.btn-primary,
.card-header > a.pull-right.btn-sm {
    padding: 11px 22px !important;
    font-size: var(--yt-fs-btn) !important;
    border-radius: var(--yt-radius) !important;
}

.card-block > .pull-right.btn-primary::before,
.card-body > .pull-right.btn-primary::before,
.card-header > .pull-right.btn-primary::before {
    content: "+";
    font-weight: 500;
    font-size: 1.2em;
    line-height: 1;
    margin-right: 8px;
}

/* ============================================================
   8. FORMS
   One control style for every module: text-like inputs, native
   selects, select2, date fields, file inputs, textareas and input
   groups all share height, border, radius, type and focus ring.
   ============================================================ */

.form-group {
    margin-bottom: 18px;
}

label,
.col-form-label,
.form-group label {
    color: var(--yt-text);
    font-size: var(--yt-fs-label);
    font-weight: 600;
    margin-bottom: 6px;
}

/* Some modals use <h5><b>Label</b></h5> in place of <label> */
.modal-body h5:has(> b:only-child) {
    margin-bottom: 6px;
    color: var(--yt-text);
    font-size: var(--yt-fs-label) !important;
    font-weight: 600 !important;
}

.modal-body h5 > b:only-child {
    font-weight: 600;
}

/* ---- Base control ---- */
.form-control,
.form-control.fill,
.form-material .form-control,
.custom-select {
    min-height: var(--yt-control-h);
    border: 1px solid var(--yt-border) !important;
    border-radius: var(--yt-radius-sm) !important;
    background-color: var(--yt-card) !important;
    color: var(--yt-text) !important;
    font-size: var(--yt-fs-body) !important;
    font-weight: 400;
    line-height: 1.45;
    padding: 9px 14px !important;
    box-shadow: var(--yt-shadow-sm);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.form-control:hover:not(:disabled):not([readonly]):not(:focus),
.custom-select:hover:not(:disabled):not(:focus) {
    border-color: #C5D0E4 !important;
}

.form-control::placeholder {
    color: #9AA6BE !important;
    opacity: 1;
}

.form-control:focus,
.form-material .form-control:focus,
.custom-select:focus {
    border-color: var(--yt-accent) !important;
    box-shadow: var(--yt-focus) !important;
    outline: none !important;
}

.form-control:disabled,
.form-control[readonly],
.custom-select:disabled {
    background-color: var(--yt-surface) !important;
    color: #5D6A86 !important;
    cursor: default;
}

/* Small variant keeps the same look at a tighter size */
.form-control-sm,
.input-group-sm > .form-control {
    min-height: 34px;
    padding: 5px 10px !important;
    font-size: var(--yt-fs-btn-sm) !important;
}

/* ---- Native selects (one chevron everywhere) ---- */
select.form-control:not([multiple]):not([size]),
.custom-select:not([multiple]):not([size]) {
    height: var(--yt-control-h) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 38px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: var(--yt-chevron) !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 14px 14px !important;
    text-overflow: ellipsis;
    cursor: pointer;
}

select.form-control[multiple],
select.form-control[size] {
    height: auto !important;
    padding: 6px !important;
}

select.form-control[multiple] option {
    padding: 6px 8px;
    border-radius: 6px;
}

/* ---- Textarea ---- */
textarea.form-control {
    min-height: 96px;
    height: auto;
    padding: 10px 14px !important;
    resize: vertical;
}

/* ---- Native date / month / time inputs: brand calendar icon ---- */
input.form-control[type="date"],
input.form-control[type="month"],
input.form-control[type="time"],
input.form-control[type="datetime-local"],
input.form-control[type="week"] {
    height: var(--yt-control-h);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    cursor: pointer;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
    width: 18px;
    height: 18px;
    padding: 2px;
    border-radius: 6px;
    background: var(--yt-calendar) no-repeat center / 18px 18px;
    color: transparent;
    opacity: 1;
    cursor: pointer;
}

input[type="time"]::-webkit-calendar-picker-indicator {
    width: 18px;
    height: 18px;
    padding: 2px;
    background: var(--yt-clock) no-repeat center / 18px 18px;
    color: transparent;
    cursor: pointer;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
    background-color: var(--yt-hover);
}

input[type="date"]::-webkit-datetime-edit,
input[type="month"]::-webkit-datetime-edit {
    color: var(--yt-text);
}

/* ---- Text fields driven by a date plugin get the same calendar icon ---- */
input.form-control.date:not([type="date"]),
input.form-control.datepicker:not([type="date"]),
input.form-control.daterange,
input.form-control[id^="daterange"],
input.form-control[id^="datepicker"],
input.form-control[id^="date_range"],
input.form-control[name="daterange"],
input.form-control[data-provide="datepicker"] {
    padding-left: 42px !important;
    background-image: var(--yt-calendar) !important;
    background-repeat: no-repeat !important;
    background-position: 14px center !important;
    background-size: 18px 18px !important;
    cursor: pointer;
}

/* ---- Text search fields in filter bars get a magnifier ---- */
.search-tag input[type="text"][placeholder^="Search"],
.search-tag input[type="text"][placeholder^="search"],
input.form-control[type="search"] {
    padding-left: 42px !important;
    background-image: var(--yt-search) !important;
    background-repeat: no-repeat !important;
    background-position: 14px center !important;
    background-size: 18px 18px !important;
}

/* ---- Number inputs: quieter spinners ---- */
input[type="number"].form-control::-webkit-inner-spin-button,
input[type="number"].form-control::-webkit-outer-spin-button {
    opacity: 0.45;
}

input[type="number"].form-control:hover::-webkit-inner-spin-button,
input[type="number"].form-control:focus::-webkit-inner-spin-button {
    opacity: 1;
}

/* ---- File inputs ---- */
input[type="file"].form-control,
input[type="file"].form-control-file {
    height: auto;
    min-height: var(--yt-control-h);
    padding: 5px 6px !important;
    font-size: var(--yt-fs-btn-sm) !important;
    color: var(--yt-muted) !important;
    cursor: pointer;
}

input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 6px 14px;
    border: 0;
    border-radius: 6px;
    background: rgba(69, 32, 165, 0.09);
    color: var(--yt-secondary);
    font-family: var(--yt-font);
    font-size: var(--yt-fs-btn-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}

input[type="file"]:hover::file-selector-button {
    background: var(--yt-secondary);
    color: #FFFFFF;
}

/* ---- Checkboxes and radios ---- */
input[type="checkbox"],
input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--yt-secondary);
    vertical-align: middle;
    cursor: pointer;
}

/* ---- The material theme's animated underline is not used ---- */
.form-material .form-bar::before,
.form-material .form-bar::after {
    display: none;
}

/* ---- Validation (jquery-validate and Laravel @error) ---- */
label.error,
span.error,
.error:not(input):not(select):not(textarea),
.invalid-feedback {
    color: var(--yt-danger) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    margin-top: 5px;
}

input.error,
select.error,
textarea.error,
.form-control.is-invalid {
    border-color: var(--yt-danger) !important;
    background-image: none;
}

input.error:focus,
select.error:focus,
textarea.error:focus,
.form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(240, 68, 56, 0.14) !important;
}

.form-control.is-valid {
    border-color: var(--yt-success) !important;
}

/* ---- Input groups ---- */
.input-group > .form-control:not(:first-child),
.input-group > .custom-select:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.input-group > .form-control:not(:last-child),
.input-group > .custom-select:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group-text,
.input-group-addon {
    min-width: 42px;
    justify-content: center;
    background: var(--yt-surface) !important;
    border: 1px solid var(--yt-border) !important;
    color: var(--yt-muted) !important;
    font-size: var(--yt-fs-body);
    font-weight: 500;
}

.input-group-prepend .input-group-text {
    border-right: 0 !important;
    border-radius: var(--yt-radius-sm) 0 0 var(--yt-radius-sm) !important;
}

.input-group-append .input-group-text {
    border-left: 0 !important;
    border-radius: 0 var(--yt-radius-sm) var(--yt-radius-sm) 0 !important;
}

.input-group-text i {
    font-size: 1rem;
}

.input-group:focus-within .input-group-text {
    border-color: var(--yt-accent) !important;
    color: var(--yt-accent) !important;
}

/* Some views use Simple Line Icons classes (icon-*), a font the app never
   loads. Feather defines most of the same names, so render them with the
   Feather font; the few names Feather lacks get the nearest glyph. */
i[class^="icon-"]:not(.feather),
i[class*=" icon-"]:not(.feather) {
    font-family: feather !important;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    speak: none;
}

i.icon-calculator:not(.feather)::before { content: "\e8fd"; }
i.icon-book-open:not(.feather)::before  { content: "\e837"; }
i.icon-note:not(.feather)::before       { content: "\e870"; }

/* A few views use Font Awesome 5 prefixes (fas/far/fab) but the app loads
   Font Awesome 4.7. The icon names they use exist in 4.7, so only the font
   is needed, plus the two file icons 4.7 names with an -o suffix. */
.fas,
.far,
.fab {
    display: inline-block;
    font-family: FontAwesome !important;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.fa-file-excel::before { content: "\f1c3"; }
.fa-file-pdf::before   { content: "\f1c1"; }

/* ---- Select2 (single and multiple) ---- */
.select2-container {
    max-width: 100%;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: var(--yt-control-h) !important;
    border: 1px solid var(--yt-border) !important;
    border-radius: var(--yt-radius-sm) !important;
    background: var(--yt-card) !important;
    box-shadow: var(--yt-shadow-sm);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    outline: none;
}

.select2-container--default:not(.select2-container--disabled):not(.select2-container--open):hover .select2-selection--single,
.select2-container--default:not(.select2-container--disabled):not(.select2-container--open):hover .select2-selection--multiple {
    border-color: #C5D0E4 !important;
}

.select2-container--default .select2-selection--single {
    height: var(--yt-control-h) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    margin: 0 !important;
    padding: 0 40px 0 14px !important;
    line-height: calc(var(--yt-control-h) - 2px) !important;
    color: var(--yt-text) !important;
    font-size: var(--yt-fs-body);
    background: transparent !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container--default .select2-selection--multiple .select2-search__field::placeholder {
    color: #9AA6BE !important;
}

/* Same chevron as native selects; the select2 caret is hidden */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0 !important;
    right: 12px !important;
    width: 16px !important;
    height: calc(var(--yt-control-h) - 2px) !important;
    background: var(--yt-chevron) no-repeat center / 14px 14px;
    transition: transform 0.18s ease;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: transparent !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow {
    transform: rotate(180deg);
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    margin-right: 6px;
    color: var(--yt-muted);
    font-size: 1.1rem;
}

.select2-container--default .select2-selection--multiple {
    padding: 4px 8px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin: 3px 6px 3px 0 !important;
    padding: 3px 8px !important;
    background: rgba(69, 32, 165, 0.08) !important;
    border: 1px solid rgba(69, 32, 165, 0.16) !important;
    border-radius: 6px !important;
    color: var(--yt-secondary) !important;
    font-size: var(--yt-fs-btn-sm);
    font-weight: 500;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    margin-right: 4px;
    color: var(--yt-secondary) !important;
    font-weight: 700;
}

.select2-container--default .select2-selection--multiple .select2-search__field {
    margin-top: 6px;
    font-size: var(--yt-fs-body);
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--yt-accent) !important;
    box-shadow: var(--yt-focus) !important;
}

.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
    background: var(--yt-surface) !important;
    cursor: default;
}

/* Dropdown panel (shared look with daterangepicker and datepicker) */
.select2-dropdown {
    margin-top: 4px;
    padding: 6px;
    border: 1px solid var(--yt-border) !important;
    border-radius: var(--yt-radius) !important;
    background: var(--yt-card);
    box-shadow: 0 14px 36px rgba(23, 13, 70, 0.16) !important;
    overflow: hidden;
}

.select2-dropdown--above {
    margin-top: 0;
    margin-bottom: 4px;
}

.select2-search--dropdown {
    padding: 2px 0 6px !important;
}

.select2-search--dropdown .select2-search__field {
    height: 36px;
    padding: 6px 10px 6px 34px !important;
    border: 1px solid var(--yt-border) !important;
    border-radius: var(--yt-radius-sm) !important;
    background: var(--yt-surface) var(--yt-search) no-repeat 10px center / 16px 16px !important;
    font-size: var(--yt-fs-body);
    outline: none;
}

.select2-search--dropdown .select2-search__field:focus {
    border-color: var(--yt-accent) !important;
    background-color: var(--yt-card) !important;
}

.select2-results > .select2-results__options {
    max-height: 260px !important;
}

.select2-results__option {
    margin: 1px 0;
    padding: 8px 10px !important;
    border-radius: 6px;
    color: var(--yt-text);
    font-size: var(--yt-fs-body);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--yt-hover) !important;
    color: var(--yt-secondary) !important;
}

.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option--selected {
    background: rgba(69, 32, 165, 0.1) !important;
    color: var(--yt-secondary) !important;
    font-weight: 600;
}

.select2-container--default .select2-results__group {
    padding: 8px 10px 4px !important;
    color: var(--yt-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.select2-results__message {
    color: var(--yt-muted) !important;
}

/* select2 inside table cells (order, quotation, purchase lines) */
.table td .select2-container {
    min-width: 140px;
}

/* ---- Bootstrap tags input ---- */
.bootstrap-tagsinput {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-height: var(--yt-control-h);
    padding: 5px 8px !important;
    border: 1px solid var(--yt-border) !important;
    border-radius: var(--yt-radius-sm) !important;
    box-shadow: var(--yt-shadow-sm) !important;
}

.bootstrap-tagsinput:focus-within {
    border-color: var(--yt-accent) !important;
    box-shadow: var(--yt-focus) !important;
}

.bootstrap-tagsinput .tag {
    padding: 4px 8px !important;
    background: rgba(69, 32, 165, 0.08) !important;
    border: 1px solid rgba(69, 32, 165, 0.16);
    border-radius: 6px !important;
    color: var(--yt-secondary) !important;
    font-size: var(--yt-fs-btn-sm);
    font-weight: 500;
}

.bootstrap-tagsinput input {
    font-size: var(--yt-fs-body);
}

/* ============================================================
   9. TABLES & DATATABLES
   ============================================================ */

.dt-responsive,
.table-responsive {
    border: 1px solid var(--yt-border-soft);
    border-radius: var(--yt-radius);
    background: var(--yt-card);
}

.table {
    color: var(--yt-text);
    margin-bottom: 0;
}

/* A DataTables wrapper carries its own toolbar, so the outer frame goes
   and the table itself gets the border. */
.dt-responsive:has(> .dataTables_wrapper),
.table-responsive:has(> .dataTables_wrapper) {
    border: 0;
    background: transparent;
}

.dataTables_wrapper table.dataTable {
    border: 1px solid var(--yt-border-soft) !important;
    border-radius: var(--yt-radius);
}

/* DataTables forces border-collapse: separate; drop the default 2px gaps */
table.dataTable {
    border-spacing: 0 !important;
    margin-top: 0 !important;
}

.table > thead > tr:first-child > th:first-child { border-top-left-radius: var(--yt-radius-sm); }
.table > thead > tr:first-child > th:last-child  { border-top-right-radius: var(--yt-radius-sm); }

.table-bordered,
.table-bordered th,
.table-bordered td {
    border-color: var(--yt-border-soft) !important;
}

/* Header row (theme/styles.php paints every th with !important) */
.table thead th,
.table > thead > tr > th,
table.dataTable thead th,
table.dataTable thead td {
    background: var(--yt-primary) !important;
    color: #FFFFFF !important;
    font-size: var(--yt-fs-th) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    padding: 15px 16px !important;
    vertical-align: middle !important;
    white-space: nowrap;
    border-color: var(--yt-primary) !important;
    border-bottom: 0 !important;
}

/* Room for DataTables sort arrows */
table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc {
    padding-right: 34px !important;
}

table.dataTable thead .sorting::before,
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::before,
table.dataTable thead .sorting_desc::after {
    color: #FFFFFF;
    opacity: 0.35;
    bottom: auto !important;
    top: 50% !important;
    transform: translateY(-50%);
    font-size: 0.85rem;
}

table.dataTable thead .sorting::before,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_desc::before {
    right: 18px !important;
}

table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
    right: 10px !important;
}

table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_desc::after {
    opacity: 1;
    color: var(--yt-accent);
}

/* Body rows */
.table tbody td,
.table > tbody > tr > td,
table.dataTable tbody td {
    padding: 14px 16px !important;
    font-size: var(--yt-fs-body);
    font-weight: 400;
    color: var(--yt-text);
    vertical-align: middle !important;
    border-color: var(--yt-border-soft) !important;
}

.table-striped tbody tr:nth-of-type(odd),
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd {
    background-color: var(--yt-surface) !important;
}

.table-striped tbody tr:nth-of-type(even) {
    background-color: var(--yt-card) !important;
}

.table-hover tbody tr:hover,
.table tbody tr:hover,
table.dataTable tbody tr:hover {
    background-color: var(--yt-hover) !important;
}

.table tfoot th,
.table tfoot td {
    background: var(--yt-surface) !important;
    color: var(--yt-text) !important;
    font-weight: 700;
    border-color: var(--yt-border-soft) !important;
}

/* Empty state (DataTables and server-rendered) */
table.dataTable td.dataTables_empty,
.table td.dataTables_empty {
    text-align: center !important;
    padding: 132px 20px 44px !important;
    color: var(--yt-muted) !important;
    font-size: 0.92rem;
    background-color: var(--yt-card) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='104' viewBox='0 0 104 104' fill='none'%3E%3Ccircle cx='52' cy='52' r='46' fill='%23EEF0FA'/%3E%3Cpath d='M36 28h32v46l-5.3-4-5.4 4-5.3-4-5.3 4-5.4-4-5.3 4z' stroke='%234520A5' stroke-width='2.6' stroke-linejoin='round' fill='%23fff'/%3E%3Cpath d='M43 40h18M43 48h18M43 56h12' stroke='%234520A5' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M18 50h-6M92 50h-6M24 30l-4-3M80 30l4-3M24 72l-4 3M80 72l4 3' stroke='%23B9BEDC' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center 26px !important;
    background-size: 96px 96px !important;
}

/* Row action icons emitted as <a><i class="fa …"></i></a> (not inside .btn) */
.table tbody td a:not(.btn):not([class*="btn-"]) > i.fa,
.table tbody td a:not(.btn):not([class*="btn-"]) > i.feather,
.table tbody td a:not(.btn):not([class*="btn-"]) > i[class*="icofont"],
.table tbody td a:not(.btn):not([class*="btn-"]) > i[class*="ti-"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--yt-radius-sm);
    font-size: 0.92rem;
    background: rgba(69, 32, 165, 0.07);
    color: var(--yt-secondary) !important;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.table tbody td a:not(.btn):not([class*="btn-"]):hover > i {
    background: var(--yt-secondary);
    color: #FFFFFF !important;
}

.table tbody td a:not(.btn):not([class*="btn-"]) > i.fa-pencil,
.table tbody td a:not(.btn):not([class*="btn-"]) > i.fa-edit,
.table tbody td a:not(.btn):not([class*="btn-"]) > i.fa-pencil-square-o,
.table tbody td a:not(.btn):not([class*="btn-"]) > i.icon-edit,
.table tbody td a:not(.btn):not([class*="btn-"]) > i.icon-edit-2 {
    background: var(--yt-warning-bg);
    color: var(--yt-warning-dark) !important;
}

.table tbody td a:not(.btn):not([class*="btn-"]):hover > i.fa-pencil,
.table tbody td a:not(.btn):not([class*="btn-"]):hover > i.fa-edit,
.table tbody td a:not(.btn):not([class*="btn-"]):hover > i.fa-pencil-square-o,
.table tbody td a:not(.btn):not([class*="btn-"]):hover > i.icon-edit,
.table tbody td a:not(.btn):not([class*="btn-"]):hover > i.icon-edit-2 {
    background: var(--yt-warning);
    color: #FFFFFF !important;
}

.table tbody td a:not(.btn):not([class*="btn-"]) > i.fa-trash,
.table tbody td a:not(.btn):not([class*="btn-"]) > i.fa-trash-o,
.table tbody td a:not(.btn):not([class*="btn-"]) > i.icon-trash,
.table tbody td a:not(.btn):not([class*="btn-"]) > i.icon-trash-2,
.table tbody td a:not(.btn):not([class*="btn-"]) > i.fa-times,
.table tbody td a:not(.btn):not([class*="btn-"]) > i.fa-close,
.table tbody td a:not(.btn):not([class*="btn-"]) > i.fa-ban {
    background: var(--yt-danger-bg);
    color: var(--yt-danger) !important;
}

.table tbody td a:not(.btn):not([class*="btn-"]):hover > i.fa-trash,
.table tbody td a:not(.btn):not([class*="btn-"]):hover > i.fa-trash-o,
.table tbody td a:not(.btn):not([class*="btn-"]):hover > i.icon-trash,
.table tbody td a:not(.btn):not([class*="btn-"]):hover > i.icon-trash-2,
.table tbody td a:not(.btn):not([class*="btn-"]):hover > i.fa-times,
.table tbody td a:not(.btn):not([class*="btn-"]):hover > i.fa-close,
.table tbody td a:not(.btn):not([class*="btn-"]):hover > i.fa-ban {
    background: var(--yt-danger);
    color: #FFFFFF !important;
}

.table tbody td a:not(.btn):not([class*="btn-"]) > i.fa-check,
.table tbody td a:not(.btn):not([class*="btn-"]) > i.fa-check-circle,
.table tbody td a:not(.btn):not([class*="btn-"]) > i.icon-check {
    background: var(--yt-success-bg);
    color: var(--yt-success) !important;
}

.table tbody td a:not(.btn):not([class*="btn-"]):hover > i.fa-check,
.table tbody td a:not(.btn):not([class*="btn-"]):hover > i.fa-check-circle,
.table tbody td a:not(.btn):not([class*="btn-"]):hover > i.icon-check {
    background: var(--yt-success);
    color: #FFFFFF !important;
}

/* Bare <button><i></i></button> actions (e.g. delete forms) get the same box */
.table tbody td button:not(.btn):not([class*="btn-"]) {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    cursor: pointer;
}

.table tbody td button:not(.btn):not([class*="btn-"]) > i.fa,
.table tbody td button:not(.btn):not([class*="btn-"]) > i.feather {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--yt-radius-sm);
    font-size: 0.92rem;
    background: var(--yt-danger-bg);
    color: var(--yt-danger) !important;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.table tbody td button:not(.btn):not([class*="btn-"]):hover > i {
    background: var(--yt-danger);
    color: #FFFFFF !important;
}

.table tbody td a:not(.btn):not([class*="btn-"]) > i.fa-eye,
.table tbody td a:not(.btn):not([class*="btn-"]) > i.icon-eye {
    background: var(--yt-info-bg);
    color: var(--yt-info) !important;
}

.table tbody td a:not(.btn):not([class*="btn-"]):hover > i.fa-eye,
.table tbody td a:not(.btn):not([class*="btn-"]):hover > i.icon-eye {
    background: var(--yt-info);
    color: #FFFFFF !important;
}

/* Colour row actions by their title too (server-rendered links vary in icon) */
.table tbody td a[title^="View"]:not(.btn):not([class*="btn-"]) > i {
    background: var(--yt-info-bg);
    color: var(--yt-info) !important;
}

.table tbody td a[title^="Edit"]:not(.btn):not([class*="btn-"]) > i,
.table tbody td a[title^="Update"]:not(.btn):not([class*="btn-"]) > i {
    background: var(--yt-warning-bg);
    color: var(--yt-warning-dark) !important;
}

.table tbody td a[title^="Delete"]:not(.btn):not([class*="btn-"]) > i,
.table tbody td a[title^="Cancel"]:not(.btn):not([class*="btn-"]) > i,
.table tbody td a[title^="Reject"]:not(.btn):not([class*="btn-"]) > i {
    background: var(--yt-danger-bg);
    color: var(--yt-danger) !important;
}

.table tbody td a[title^="Approve"]:not(.btn):not([class*="btn-"]) > i {
    background: var(--yt-success-bg);
    color: var(--yt-success) !important;
}

.table tbody td a[title^="View"]:not(.btn):not([class*="btn-"]):hover > i    { background: var(--yt-info);    color: #FFFFFF !important; }
.table tbody td a[title^="Edit"]:not(.btn):not([class*="btn-"]):hover > i,
.table tbody td a[title^="Update"]:not(.btn):not([class*="btn-"]):hover > i  { background: var(--yt-warning); color: #FFFFFF !important; }
.table tbody td a[title^="Delete"]:not(.btn):not([class*="btn-"]):hover > i,
.table tbody td a[title^="Cancel"]:not(.btn):not([class*="btn-"]):hover > i,
.table tbody td a[title^="Reject"]:not(.btn):not([class*="btn-"]):hover > i  { background: var(--yt-danger);  color: #FFFFFF !important; }
.table tbody td a[title^="Approve"]:not(.btn):not([class*="btn-"]):hover > i { background: var(--yt-success); color: #FFFFFF !important; }

/* Row-label <th> cells: inside a body, or in key/value rows that mix <th>
   and <td> (Profit & Loss builds its whole statement inside <thead>) */
.table tbody th,
.table > tbody > tr > th,
.table > thead > tr:has(> td) > th {
    background: var(--yt-surface) !important;
    color: var(--yt-text) !important;
    font-size: var(--yt-fs-body) !important;
    font-weight: 600 !important;
    text-transform: none;
    letter-spacing: 0;
    padding: 14px 16px !important;
    border-color: var(--yt-border-soft) !important;
}

/* Small buttons inside table cells */
.table tbody td .btn-sm,
.table tbody td .btn-xs,
.table tbody td .btn {
    padding: 6px 10px !important;
    font-size: 0.8rem !important;
    box-shadow: none !important;
    margin: 1px 0;
}

/* DataTables chrome */
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_info {
    color: var(--yt-muted) !important;
    font-size: var(--yt-fs-body) !important;
    font-weight: 500 !important;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--yt-border) !important;
    border-radius: var(--yt-radius-sm) !important;
    background-color: var(--yt-card) !important;
    color: var(--yt-text) !important;
    height: 38px !important;
    font-size: var(--yt-fs-body) !important;
    box-shadow: var(--yt-shadow-sm);
    margin: 0 8px !important;
}

.dataTables_wrapper .dataTables_length select {
    min-width: 76px;
    width: auto !important;
    padding: 0 30px 0 12px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: var(--yt-chevron) !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 13px 13px !important;
}

.dataTables_wrapper .dataTables_filter input {
    padding: 0 12px !important;
}

.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--yt-accent) !important;
    box-shadow: var(--yt-focus) !important;
    outline: none;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 16px;
}

.dataTables_wrapper .dataTables_processing {
    background: var(--yt-card) !important;
    border: 1px solid var(--yt-border) !important;
    border-radius: var(--yt-radius) !important;
    box-shadow: var(--yt-shadow-lg) !important;
    color: var(--yt-secondary) !important;
    font-weight: 600;
}

/* Export buttons (Excel / PDF / CSV / Print / Copy) */
div.dt-buttons {
    margin-bottom: 16px;
}

div.dt-buttons .dt-button,
div.dt-buttons button.dt-button,
div.dt-buttons a.dt-button {
    background: var(--yt-card) !important;
    background-image: none !important;
    border: 1px solid var(--yt-border) !important;
    border-radius: var(--yt-radius-sm) !important;
    color: var(--yt-text) !important;
    font-size: var(--yt-fs-btn) !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    margin: 0 0 0 8px !important;
    box-shadow: var(--yt-shadow-sm) !important;
    line-height: 1.4 !important;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease !important;
}

div.dt-buttons .dt-button::before {
    font-family: FontAwesome;
    font-weight: 400;
    margin-right: 8px;
    font-size: 1.05em;
}

div.dt-buttons .dt-button.buttons-excel,
div.dt-buttons .dt-button.buttons-csv {
    color: var(--yt-success-dark) !important;
    background: #EEF9F2 !important;
    border-color: #B9E5CB !important;
}

div.dt-buttons .buttons-excel::before { content: "\f1c3"; }
div.dt-buttons .buttons-csv::before   { content: "\f0f6"; }

div.dt-buttons .dt-button.buttons-excel:hover,
div.dt-buttons .dt-button.buttons-csv:hover {
    background: var(--yt-success-dark) !important;
    border-color: var(--yt-success-dark) !important;
    color: #FFFFFF !important;
}

div.dt-buttons .dt-button.buttons-pdf {
    color: var(--yt-danger-dark) !important;
    background: #FDF0F0 !important;
    border-color: #F5C2C2 !important;
}

div.dt-buttons .buttons-pdf::before { content: "\f1c1"; }

div.dt-buttons .dt-button.buttons-pdf:hover {
    background: var(--yt-danger-dark) !important;
    border-color: var(--yt-danger-dark) !important;
    color: #FFFFFF !important;
}

div.dt-buttons .buttons-print::before { content: "\f02f"; }
div.dt-buttons .buttons-copy::before  { content: "\f0c5"; }

div.dt-buttons .dt-button.buttons-print:hover,
div.dt-buttons .dt-button.buttons-copy:hover {
    background: var(--yt-hover) !important;
}

/* Pagination (DataTables and Laravel paginator) */
.dataTables_wrapper .dataTables_paginate {
    padding-top: 12px !important;
}

.pagination {
    gap: 6px;
}

.pagination .page-item .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.page-item) {
    border: 1px solid var(--yt-border) !important;
    border-radius: var(--yt-radius-sm) !important;
    background: var(--yt-card) !important;
    color: var(--yt-text) !important;
    font-size: var(--yt-fs-body) !important;
    font-weight: 500 !important;
    min-width: 40px;
    padding: 8px 14px !important;
    text-align: center;
    box-shadow: var(--yt-shadow-sm);
    margin: 0 !important;
}

.pagination .page-item .page-link:hover {
    background: var(--yt-hover) !important;
    color: var(--yt-primary) !important;
}

.pagination .page-item.active .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--yt-primary) !important;
    border-color: var(--yt-primary) !important;
    color: #FFFFFF !important;
}

.pagination .page-item.disabled .page-link {
    color: #A6B0C4 !important;
    background: var(--yt-card) !important;
}

.pagination .page-link:focus {
    box-shadow: var(--yt-focus) !important;
}

/* ============================================================
   10. BADGES & STATUS LABELS
   ============================================================ */

.badge,
label.badge,
.label {
    border-radius: 999px !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px;
    padding: 5px 11px !important;
    line-height: 1.2;
    border: 1px solid transparent;
}

.badge-success, .badge.bg-success, .label-success {
    background: var(--yt-success-bg) !important;
    color: var(--yt-success) !important;
    border-color: rgba(16, 168, 117, 0.22) !important;
}

.badge-danger, .badge.bg-danger, .label-danger {
    background: var(--yt-danger-bg) !important;
    color: var(--yt-danger) !important;
    border-color: rgba(240, 68, 56, 0.22) !important;
}

.badge-warning, .badge.bg-warning, .label-warning {
    background: var(--yt-warning-bg) !important;
    color: var(--yt-warning-text) !important;
    border-color: rgba(245, 158, 11, 0.24) !important;
}

.badge-info, .badge.bg-info, .label-info {
    background: var(--yt-info-bg) !important;
    color: var(--yt-info) !important;
    border-color: rgba(38, 117, 216, 0.22) !important;
}

.badge-primary, .badge.bg-primary, .label-primary {
    background: rgba(69, 32, 165, 0.08) !important;
    color: var(--yt-secondary) !important;
    border-color: rgba(69, 32, 165, 0.18) !important;
}

.badge-secondary, .badge-default, .label-default {
    background: #EEF1F7 !important;
    color: #56627D !important;
    border-color: var(--yt-border) !important;
}

/* ============================================================
   11. TABS
   ============================================================ */

.nav-tabs {
    border-bottom: 1px solid var(--yt-border) !important;
}

.nav-tabs .nav-link {
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    color: var(--yt-muted) !important;
    font-weight: 600;
    font-size: var(--yt-fs-btn);
    padding: 11px 18px;
    background: transparent !important;
}

.nav-tabs .nav-link:hover {
    color: var(--yt-primary) !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--yt-accent) !important;
    border-bottom-color: var(--yt-accent) !important;
}

/* The theme's animated tab underline */
.md-tabs .nav-item .nav-link.active ~ .slide,
.nav-tabs .slide {
    background: var(--yt-accent) !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background: var(--yt-primary) !important;
    color: #FFFFFF !important;
}

/* ============================================================
   12. DROPDOWNS
   ============================================================ */

.dropdown-menu {
    border: 1px solid var(--yt-border) !important;
    border-radius: var(--yt-radius) !important;
    box-shadow: 0 14px 36px rgba(23, 13, 70, 0.14) !important;
    padding: 6px;
}

.dropdown-menu .dropdown-item {
    border-radius: 6px;
    color: var(--yt-text);
    font-size: var(--yt-fs-body);
    padding: 8px 12px;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background: var(--yt-hover);
    color: var(--yt-accent);
}

.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
    background: var(--yt-secondary);
    color: #FFFFFF;
}

/* ============================================================
   13. MODALS & CONFIRM DIALOGS
   ============================================================ */

.modal-backdrop.show {
    background: var(--yt-primary);
    opacity: 0.5;
}

.modal-content {
    border: 0 !important;
    border-radius: var(--yt-radius-lg) !important;
    box-shadow: var(--yt-shadow-lg) !important;
    overflow: hidden;
}

.modal-header {
    background: var(--yt-card) !important;
    border-bottom: 1px solid var(--yt-border-soft) !important;
    padding: 18px 24px !important;
    align-items: center;
}

.modal-title,
.modal-header h4,
.modal-header h5 {
    color: var(--yt-primary) !important;
    font-weight: 600 !important;
    font-size: var(--yt-fs-section) !important;
}

.modal-header {
    gap: 12px;
}

/* Some modals put the close button before the title; keep the title on the
   left and the button on the right, and give empty buttons a visible glyph */
.modal-header .close {
    order: 2;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    line-height: 1;
    font-size: 1.5rem;
    font-weight: 400;
}

.modal-header .close:empty::before {
    content: "\00D7";
}

.modal-header .close:hover {
    background: var(--yt-hover);
}

.modal-header .modal-title {
    order: 1;
    margin: 0;
    text-align: left;
}

.modal-header .close {
    color: var(--yt-muted);
    opacity: 1;
    text-shadow: none;
}

.modal-header .close:hover {
    color: var(--yt-accent);
}

.modal-body {
    padding: 22px 24px;
    color: var(--yt-text);
}

.modal-footer {
    background: var(--yt-surface) !important;
    border-top: 1px solid var(--yt-border-soft) !important;
    padding: 14px 24px !important;
}

/* SweetAlert v1 */
.sweet-alert {
    border-radius: var(--yt-radius-lg) !important;
    box-shadow: var(--yt-shadow-lg) !important;
    padding: 28px 24px 22px !important;
}

.sweet-alert h2 {
    color: var(--yt-primary) !important;
    font-weight: 700 !important;
    font-size: 1.4rem !important;
}

.sweet-alert p {
    color: var(--yt-muted) !important;
    font-size: 0.95rem !important;
}

.sweet-alert button {
    border-radius: var(--yt-radius-sm) !important;
    font-weight: 600 !important;
    font-size: var(--yt-fs-btn) !important;
    padding: 10px 24px !important;
    box-shadow: none !important;
}

.sweet-alert button.confirm {
    background-color: var(--yt-accent) !important;
}

.sweet-alert button.cancel {
    background-color: #EEF1F7 !important;
    color: var(--yt-text) !important;
}

.sweet-overlay {
    background-color: rgba(23, 13, 70, 0.45) !important;
}

/* ============================================================
   14. ALERTS
   ============================================================ */

.alert {
    border: 1px solid transparent;
    border-left-width: 4px !important;
    border-radius: var(--yt-radius) !important;
    font-size: var(--yt-fs-body);
    font-weight: 500;
    padding: 14px 18px;
}

.alert-success {
    background: var(--yt-success-bg) !important;
    border-color: rgba(16, 168, 117, 0.25) !important;
    border-left-color: var(--yt-success) !important;
    color: #0A6B4B !important;
}

.alert-danger {
    background: var(--yt-danger-bg) !important;
    border-color: rgba(240, 68, 56, 0.25) !important;
    border-left-color: var(--yt-danger) !important;
    color: #B42318 !important;
}

.alert-warning {
    background: var(--yt-warning-bg) !important;
    border-color: rgba(245, 158, 11, 0.25) !important;
    border-left-color: var(--yt-warning) !important;
    color: var(--yt-warning-text) !important;
}

.alert-info {
    background: var(--yt-info-bg) !important;
    border-color: rgba(38, 117, 216, 0.25) !important;
    border-left-color: var(--yt-info) !important;
    color: #1A54A0 !important;
}

/* ============================================================
   15. DATE PICKERS & CALENDARS
   daterangepicker (list filters), bootstrap-datepicker (the
   .datepicker() fields) and bootstrap-datetimepicker share one
   calendar look: white panel, plain month header, round day cells,
   royal-purple selection, accent ring for today.
   theme/styles.php paints every <th> with !important, so header
   cells are reset here with higher specificity.
   ============================================================ */

/* ---- Shared panel ---- */
.daterangepicker,
.datepicker.datepicker-dropdown,
.bootstrap-datetimepicker-widget.dropdown-menu {
    padding: 12px !important;
    border: 1px solid var(--yt-border) !important;
    border-radius: var(--yt-radius-lg) !important;
    background: var(--yt-card) !important;
    box-shadow: 0 18px 44px rgba(23, 13, 70, 0.18) !important;
    font-family: var(--yt-font) !important;
    color: var(--yt-text);
}

/* Little pointer arrows match the panel */
.daterangepicker::before,
.datepicker-dropdown::before {
    border-bottom-color: var(--yt-border) !important;
}

.datepicker-dropdown.datepicker-orient-top::before {
    border-top-color: var(--yt-border) !important;
}

/* ---- Header cells: month title and arrows ---- */
.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td,
.datepicker table tr td.day,
.datepicker table tr th.dow,
.datepicker table tr th.prev,
.datepicker table tr th.next,
.datepicker table tr th.datepicker-switch,
.bootstrap-datetimepicker-widget table td.day,
.bootstrap-datetimepicker-widget table th {
    width: 36px !important;
    min-width: 36px !important;
    height: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: var(--yt-radius-sm) !important;
    font-size: 13px !important;
    text-align: center;
    vertical-align: middle;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.daterangepicker .calendar-table th,
.datepicker table tr th,
.bootstrap-datetimepicker-widget table th {
    background: transparent !important;
    color: var(--yt-text) !important;
    font-weight: 700 !important;
}

/* Month / year title */
.daterangepicker .calendar-table th.month,
.datepicker table tr th.datepicker-switch,
.bootstrap-datetimepicker-widget table th.picker-switch {
    width: auto !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--yt-primary) !important;
}

/* Previous / next arrows as round buttons */
.daterangepicker .calendar-table th.prev,
.daterangepicker .calendar-table th.next,
.datepicker table tr th.prev,
.datepicker table tr th.next,
.bootstrap-datetimepicker-widget table th.prev,
.bootstrap-datetimepicker-widget table th.next {
    color: var(--yt-secondary) !important;
    cursor: pointer;
}

.daterangepicker .calendar-table th.available:hover,
.datepicker table tr th.prev:hover,
.datepicker table tr th.next:hover,
.datepicker table tr th.datepicker-switch:hover,
.bootstrap-datetimepicker-widget table th.prev:hover,
.bootstrap-datetimepicker-widget table th.next:hover,
.bootstrap-datetimepicker-widget table th.picker-switch:hover {
    background: var(--yt-hover) !important;
}

.daterangepicker .calendar-table th.prev i,
.daterangepicker .calendar-table th.next i {
    font-size: 11px;
}

/* Weekday row */
.daterangepicker .calendar-table thead tr:last-child th,
.datepicker table tr th.dow,
.bootstrap-datetimepicker-widget table th.dow {
    height: 28px !important;
    color: var(--yt-muted) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    cursor: default;
}

.daterangepicker .calendar-table thead tr:last-child th:hover {
    background: transparent !important;
}

/* ---- Day cells ---- */
.daterangepicker .calendar-table td,
.datepicker table tr td,
.bootstrap-datetimepicker-widget table td.day {
    background: transparent !important;
    color: var(--yt-text) !important;
    font-weight: 500;
    cursor: pointer;
}

.daterangepicker .calendar-table td.available:hover,
.datepicker table tr td.day:hover,
.datepicker table tr td.day.focused,
.bootstrap-datetimepicker-widget table td.day:hover {
    background: var(--yt-hover) !important;
    color: var(--yt-secondary) !important;
}

/* Days outside the month */
.daterangepicker .calendar-table td.off,
.daterangepicker .calendar-table td.off.in-range,
.datepicker table tr td.old,
.datepicker table tr td.new,
.bootstrap-datetimepicker-widget table td.old,
.bootstrap-datetimepicker-widget table td.new {
    color: #B4BED2 !important;
    background: transparent !important;
}

/* Disabled days */
.daterangepicker .calendar-table td.disabled,
.datepicker table tr td.disabled,
.bootstrap-datetimepicker-widget table td.disabled {
    color: #C9D1E0 !important;
    text-decoration: line-through;
    cursor: not-allowed;
}

/* Today: accent ring */
.daterangepicker .calendar-table td.today:not(.active),
.datepicker table tr td.today:not(.active),
.bootstrap-datetimepicker-widget table td.today:not(.active) {
    box-shadow: inset 0 0 0 1.5px var(--yt-accent);
    color: var(--yt-accent) !important;
    font-weight: 700;
}

.bootstrap-datetimepicker-widget table td.today::before {
    display: none;
}

/* Range between start and end */
.daterangepicker .calendar-table td.in-range:not(.off) {
    background: rgba(69, 32, 165, 0.09) !important;
    color: var(--yt-secondary) !important;
    border-radius: 0 !important;
}

/* Selected day / range ends */
.daterangepicker .calendar-table td.active,
.daterangepicker .calendar-table td.active:hover,
.daterangepicker .calendar-table td.active.off,
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.day,
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover,
.bootstrap-datetimepicker-widget table td span.active {
    background: var(--yt-secondary) !important;
    background-image: none !important;
    color: #FFFFFF !important;
    font-weight: 700;
    text-shadow: none !important;
}

.daterangepicker .calendar-table td.start-date:not(.end-date) {
    border-radius: var(--yt-radius-sm) 0 0 var(--yt-radius-sm) !important;
}

.daterangepicker .calendar-table td.end-date:not(.start-date) {
    border-radius: 0 var(--yt-radius-sm) var(--yt-radius-sm) 0 !important;
}

.daterangepicker .calendar-table td.start-date.end-date {
    border-radius: var(--yt-radius-sm) !important;
}

/* Month / year / decade grids (bootstrap-datepicker and datetimepicker) */
.datepicker table tr td span,
.bootstrap-datetimepicker-widget table td span {
    height: 40px !important;
    line-height: 40px !important;
    margin: 2px 1% !important;
    border-radius: var(--yt-radius-sm) !important;
    color: var(--yt-text);
    font-size: 13px;
    font-weight: 500;
}

.datepicker table tr td span:hover,
.datepicker table tr td span.focused,
.bootstrap-datetimepicker-widget table td span:hover {
    background: var(--yt-hover) !important;
    color: var(--yt-secondary) !important;
}

.datepicker table tr td span.old,
.datepicker table tr td span.new {
    color: #B4BED2 !important;
}

/* "Today" / "Clear" footer buttons when enabled */
.datepicker table tfoot tr th.today,
.datepicker table tfoot tr th.clear {
    width: auto !important;
    color: var(--yt-secondary) !important;
    font-weight: 600 !important;
    cursor: pointer;
}

.datepicker table tfoot tr th.today:hover,
.datepicker table tfoot tr th.clear:hover {
    background: var(--yt-hover) !important;
}

/* ---- daterangepicker: presets, inputs, buttons ---- */
.daterangepicker .calendar {
    margin: 0 6px !important;
}

.daterangepicker .calendar-table {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.daterangepicker .calendar-table table {
    border-collapse: separate;
    border-spacing: 0 2px;
}

.daterangepicker .daterangepicker_input {
    margin-bottom: 8px;
}

.daterangepicker .daterangepicker_input i {
    top: 9px !important;
    left: 10px !important;
    color: var(--yt-muted);
}

/* The picker's own small inputs keep their compact size */
.daterangepicker .form-control,
.daterangepicker .input-mini {
    min-height: 0;
    height: 34px !important;
    padding: 4px 10px 4px 30px !important;
    border-radius: var(--yt-radius-sm) !important;
    background-image: none !important;
    font-size: 13px !important;
    box-shadow: none;
}

.daterangepicker .input-mini.active {
    border-color: var(--yt-accent) !important;
    box-shadow: var(--yt-focus) !important;
}

.daterangepicker .ranges {
    margin: 0 6px 0 0 !important;
}

.daterangepicker .ranges ul {
    width: 150px;
}

.daterangepicker .ranges li {
    margin-bottom: 4px !important;
    padding: 8px 12px !important;
    border: 1px solid transparent !important;
    border-radius: var(--yt-radius-sm) !important;
    background: transparent !important;
    color: var(--yt-text) !important;
    font-size: 13px !important;
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.daterangepicker .ranges li:hover {
    background: var(--yt-hover) !important;
    color: var(--yt-secondary) !important;
}

.daterangepicker .ranges li.active {
    background: var(--yt-secondary) !important;
    color: #FFFFFF !important;
    font-weight: 600;
}

.daterangepicker .range_inputs {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--yt-border-soft);
}

.daterangepicker .range_inputs .btn {
    flex: 1 1 0;
    padding: 7px 10px !important;
    font-size: 13px !important;
}

.daterangepicker .applyBtn {
    background: var(--yt-accent) !important;
    border-color: var(--yt-accent) !important;
    color: #FFFFFF !important;
}

.daterangepicker .applyBtn:disabled {
    opacity: 0.5;
}

.daterangepicker .cancelBtn {
    background: var(--yt-card) !important;
    border: 1px solid var(--yt-border) !important;
    color: var(--yt-text) !important;
    box-shadow: none !important;
}

.daterangepicker .calendar-time select {
    height: 30px;
    padding: 2px 6px;
    border: 1px solid var(--yt-border);
    border-radius: 6px;
    font-size: 13px;
}

/* ---- bootstrap-datetimepicker extras ---- */
.bootstrap-datetimepicker-widget .timepicker-hour,
.bootstrap-datetimepicker-widget .timepicker-minute,
.bootstrap-datetimepicker-widget .timepicker-second {
    color: var(--yt-text);
    font-size: 18px;
    font-weight: 700;
}

.bootstrap-datetimepicker-widget .btn {
    box-shadow: none !important;
}

.bootstrap-datetimepicker-widget a[data-action] {
    color: var(--yt-secondary);
}

/* ---- Phones: stack the range picker's presets above the calendars ---- */
@media (max-width: 575.98px) {
    .daterangepicker .ranges ul {
        width: 100%;
    }

    .daterangepicker .calendar {
        margin: 6px 0 !important;
    }
}

/* ============================================================
   16. DASHBOARD
   ============================================================ */

.card-counter {
    border-radius: var(--yt-radius-lg) !important;
    box-shadow: var(--yt-shadow) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.card-counter:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(23, 13, 70, 0.14) !important;
}

.card-counter.info    { background: linear-gradient(135deg, var(--yt-m-royal) 0%, var(--yt-m-royal-dark) 100%) !important; }
.card-counter.success { background: linear-gradient(135deg, var(--yt-m-green) 0%, var(--yt-m-green-dark) 100%) !important; }
.card-counter.primary { background: linear-gradient(135deg, var(--yt-m-blue) 0%, var(--yt-m-blue-dark) 100%) !important; }
.card-counter.danger  { background: linear-gradient(135deg, var(--yt-m-red) 0%, var(--yt-m-red-dark) 100%) !important; }

.card-counter .count-numbers {
    font-weight: 700 !important;
}

.card-counter .count-name {
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-size: var(--yt-fs-label) !important;
}

.prod-p-card {
    border: 0 !important;
    border-radius: var(--yt-radius-lg) !important;
    box-shadow: var(--yt-shadow) !important;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.prod-p-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(23, 13, 70, 0.14) !important;
}

.prod-p-card.card-red,
.prod-p-card.bg-c-red    { background: linear-gradient(135deg, var(--yt-m-red) 0%, var(--yt-m-red-dark) 100%) !important; }
.prod-p-card.card-blue,
.prod-p-card.bg-c-blue   { background: linear-gradient(135deg, var(--yt-m-royal) 0%, var(--yt-m-royal-dark) 100%) !important; }
.prod-p-card.card-green,
.prod-p-card.bg-c-green  { background: linear-gradient(135deg, var(--yt-m-green) 0%, var(--yt-m-green-dark) 100%) !important; }
.prod-p-card.card-yellow,
.prod-p-card.bg-c-yellow { background: linear-gradient(135deg, var(--yt-m-amber) 0%, var(--yt-m-amber-dark) 100%) !important; }

/* Page-header icon colour helpers used across modules collapse to brand purple */
.page-header-title > i.bg-c-blue,
.page-header-title > i.bg-c-green,
.page-header-title > i.bg-c-pink,
.page-header-title > i.bg-c-yellow,
.page-header-title > i.bg-c-red,
.page-header-title > i.bg-c-orenge,
.page-header-title > i.bg-c-lite-green,
.page-header-title > i.bg-c-purple {
    background: var(--yt-primary) !important;
}

/* ============================================================
   17. LOGIN
   ============================================================ */

body.login-body {
    background: radial-gradient(circle at 15% 10%, rgba(255, 81, 47, 0.22) 0%, transparent 40%),
                radial-gradient(circle at 85% 90%, rgba(122, 42, 102, 0.35) 0%, transparent 45%),
                linear-gradient(135deg, #170D46 0%, #352078 100%) !important;
    background-attachment: fixed !important;
    min-height: 100vh;
}

.auth-box.card {
    background: var(--yt-card) !important;
    border: 0 !important;
    border-radius: 18px !important;
    box-shadow: 0 30px 70px rgba(10, 4, 34, 0.45) !important;
    overflow: hidden;
    position: relative;
}

.auth-box.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--yt-header-gradient);
}

.auth-box .card-block {
    padding: 2.4rem 2.5rem 2.1rem !important;
}

.auth-box h3,
.auth-box h3.txt-primary {
    color: var(--yt-primary) !important;
    font-weight: 700 !important;
    letter-spacing: -0.4px;
}

.auth-box .btn-primary {
    width: 100%;
    padding: 13px !important;
    font-size: var(--yt-fs-btn) !important;
    border-radius: var(--yt-radius) !important;
}

.login-body .text-inverse,
.login-body .text-right a {
    color: var(--yt-secondary) !important;
}

/* ============================================================
   18. MISC
   ============================================================ */

.loader-bar {
    background: var(--yt-header-gradient) !important;
}

hr {
    border-top-color: var(--yt-border-soft);
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #C7D0E2; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #A7B3CC; }

.pcoded-navbar ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); }

/* ============================================================
   19. RESPONSIVE
   ============================================================ */

@media (max-width: 991.98px) {
    .page-header.card .page-header-breadcrumb {
        justify-content: flex-start;
        margin-top: 12px;
    }
}

@media (max-width: 767.98px) {
    .page-header.card {
        margin: 16px 16px 16px !important;
        padding: 16px !important;
    }

    .page-header.card .page-header-title {
        gap: 14px;
    }

    .page-header.card .page-header-title > i {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.2rem !important;
        border-radius: 12px !important;
    }

    .page-header.card .page-header-title h5 {
        font-size: 1.25rem !important;
    }

    .page-body {
        padding: 0 16px 20px !important;
    }

    .card-block,
    .card-body,
    .search-tag {
        padding: 16px !important;
    }

    .search-tag > .row > [class*="col-"] {
        margin-bottom: 4px;
    }

    .header-navbar .navbar-logo h2 {
        font-size: 1.3rem !important;
    }

    nav.header-navbar .low_stock_wrapper li > a {
        font-size: 0.74rem !important;
        padding: 5px 10px !important;
    }

    div.dt-buttons .dt-button {
        margin: 0 8px 8px 0 !important;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        text-align: left !important;
    }
}

/* Key/value rows inside <thead> keep body-style value cells */
.table > thead > tr:has(> td) > td {
    background: var(--yt-card) !important;
    padding: 14px 16px !important;
    border-color: var(--yt-border-soft) !important;
}

/* Dashboard stat cards paint their colour on an ::after overlay (widget.css) */
.prod-p-card.card-red::after    { background: linear-gradient(135deg, var(--yt-m-red) 0%, var(--yt-m-red-dark) 100%) !important; }
.prod-p-card.card-blue::after   { background: linear-gradient(135deg, var(--yt-m-royal) 0%, var(--yt-m-royal-dark) 100%) !important; }
.prod-p-card.card-green::after  { background: linear-gradient(135deg, var(--yt-m-green) 0%, var(--yt-m-green-dark) 100%) !important; }
.prod-p-card.card-yellow::after { background: linear-gradient(135deg, var(--yt-m-amber) 0%, var(--yt-m-amber-dark) 100%) !important; }

/* ============================================================
   20. PRINT
   Browsers drop backgrounds when printing, so white-on-purple
   headers would vanish; print them dark-on-light instead.
   ============================================================ */

@media print {
    .table thead th,
    .table > thead > tr > th,
    table.dataTable thead th {
        background: #FFFFFF !important;
        color: #000000 !important;
        border-bottom: 2px solid #000000 !important;
    }

    .card:not(.card-counter):not(.prod-p-card):not(.auth-box),
    .page-header.card {
        box-shadow: none !important;
        border-color: #DDDDDD !important;
    }

    .btn,
    .btn-primary {
        box-shadow: none !important;
    }
}

/* Phones/tablets: the "…" button slides .nav-right down below the header,
   so it needs a solid background (the desktop rule makes it transparent) */
@media only screen and (max-width: 991px) {
    .header-navbar .navbar-wrapper .navbar-container .nav-right {
        background: var(--yt-primary) !important;
        box-shadow: 0 8px 18px rgba(23, 13, 70, 0.25);
    }
}

/* ============================================================
   21. DASHBOARD (dashboards/home)
   ============================================================ */

.yt-dash-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 28px 0 20px;
    padding: 22px 28px;
    background: var(--yt-card);
    border: 1px solid var(--yt-border-soft);
    border-radius: var(--yt-radius-lg);
    box-shadow: var(--yt-shadow);
}

.yt-dash-title {
    display: flex;
    align-items: center;
    gap: 18px;
}

.yt-dash-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: var(--yt-primary);
    color: #FFFFFF;
    font-size: 1.6rem;
    box-shadow: 0 8px 20px rgba(23, 13, 70, 0.22);
}

.yt-dash-title h5 {
    margin: 0;
    font-size: var(--yt-fs-title);
    font-weight: 700;
    color: var(--yt-primary);
    letter-spacing: -0.4px;
}

.yt-dash-title span:not(.yt-dash-icon) {
    display: block;
    margin-top: 4px;
    color: var(--yt-muted);
    font-size: 0.98rem;
}

.yt-dash-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--yt-border);
    border-radius: 999px;
    background: var(--yt-card);
    color: var(--yt-secondary) !important;
    font-size: var(--yt-fs-btn);
    font-weight: 600;
    text-decoration: none !important;
    box-shadow: var(--yt-shadow-sm);
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

.yt-dash-switch:hover {
    background: var(--yt-hover);
    border-color: #C9D4E7;
}

.yt-dash-switch i {
    color: var(--yt-accent);
    font-size: 1.1rem;
}

/* Unapproved-invoices line (#skip is hidden by script when the count is 0) */
.yt-dash-notice {
    margin: 0 0 8px;
    padding: 12px 16px;
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-left: 4px solid var(--yt-warning);
    border-radius: var(--yt-radius);
    background: var(--yt-warning-bg);
    color: var(--yt-warning-text);
    font-size: var(--yt-fs-body);
    font-weight: 500;
}

.yt-dash-notice #unapproved {
    font-weight: 800;
}

/* Section headings with an accent bar; optional control on the right */
.yt-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 28px 0 16px;
}

.yt-section-head h5 {
    position: relative;
    margin: 0;
    padding-left: 14px;
    color: var(--yt-text);
    font-size: var(--yt-fs-section);
    font-weight: 600;
}

.yt-section-head h5::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 18px;
    transform: translateY(-50%);
    border-radius: 4px;
    background: var(--yt-accent);
}

.yt-section-head .yt-month {
    width: 190px;
    flex: 0 0 auto;
}

/* Invoice status counters (the page's own <style> loads after this file) */
.card-counter {
    position: relative;
    height: 116px !important;
    margin: 0 0 24px !important;
    padding: 22px 24px !important;
}

.card-counter i {
    opacity: 0.22 !important;
}

.card-counter .count-numbers {
    top: 22px !important;
    right: 26px !important;
    font-size: var(--yt-fs-kpi-lg) !important;
    line-height: 1.1;
}

.card-counter .count-name {
    top: 72px !important;
    right: 26px !important;
    opacity: 0.85 !important;
    font-style: normal !important;
}

/* Stat cards: equal heights per row, values never pushed under the icon */
.row > [class*="col-"] > .prod-p-card {
    height: calc(100% - 24px);
    margin-bottom: 24px;
    border-radius: var(--yt-radius-lg) !important;
    box-shadow: var(--yt-shadow) !important;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.row > [class*="col-"] > .prod-p-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(23, 13, 70, 0.16) !important;
}

.prod-p-card .card-body {
    padding: 20px 22px !important;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.prod-p-card [onclick] {
    cursor: pointer;
}

/* Single-metric cards: header row has label on left, icon on right */
.prod-p-card .stat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    width: 100%;
}

.prod-p-card .stat-header h6 {
    margin: 0 !important;
    font-size: var(--yt-fs-card-sm) !important;
    font-weight: 600 !important;
    letter-spacing: 0.1px;
    text-transform: none;
    opacity: 0.94;
    color: #FFFFFF !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prod-p-card .stat-icon,
.prod-p-card .col-auto i {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.05rem !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12) !important;
    flex-shrink: 0;
}

.prod-p-card.card-red .stat-icon i,
.prod-p-card.card-red .col-auto i    { color: var(--yt-m-red-dark) !important; }
.prod-p-card.card-green .stat-icon i,
.prod-p-card.card-green .col-auto i  { color: var(--yt-m-green-dark) !important; }
.prod-p-card.card-blue .stat-icon i,
.prod-p-card.card-blue .col-auto i   { color: var(--yt-m-royal) !important; }
.prod-p-card.card-yellow .stat-icon i,
.prod-p-card.card-yellow .col-auto i { color: var(--yt-m-amber-dark) !important; }

.prod-p-card.yt-card-violet { background: linear-gradient(135deg, var(--yt-m-violet) 0%, var(--yt-m-violet-dark) 100%) !important; }
.prod-p-card.yt-card-rose   { background: linear-gradient(135deg, var(--yt-m-pink) 0%, var(--yt-m-pink-dark) 100%) !important; }
.prod-p-card.yt-card-sky    { background: linear-gradient(135deg, var(--yt-m-blue) 0%, var(--yt-m-blue-dark) 100%) !important; }
.prod-p-card.yt-card-teal   { background: linear-gradient(135deg, var(--yt-m-teal) 0%, var(--yt-m-teal-dark) 100%) !important; }

.prod-p-card.yt-card-violet .stat-icon i,
.prod-p-card.yt-card-violet .col-auto i { color: var(--yt-m-violet-dark) !important; }
.prod-p-card.yt-card-rose .stat-icon i,
.prod-p-card.yt-card-rose .col-auto i   { color: var(--yt-m-pink-dark) !important; }
.prod-p-card.yt-card-sky .stat-icon i,
.prod-p-card.yt-card-sky .col-auto i    { color: var(--yt-m-blue-dark) !important; }
.prod-p-card.yt-card-teal .stat-icon i,
.prod-p-card.yt-card-teal .col-auto i   { color: var(--yt-m-teal-dark) !important; }

/* Single-metric KPI value: spans full width below header row */
.prod-p-card .stat-value,
.prod-p-card strong:not(.stat-dual-value) {
    display: block;
    width: 100%;
    font-size: clamp(20px, 1.4vw, 25px);
    font-weight: 700 !important;
    line-height: 1.25;
    color: #FFFFFF !important;
    white-space: nowrap;
    letter-spacing: -0.3px;
}

/* Dual-metric cards (Sale & Shipping, Cash & Advance) */
.stat-dual-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.stat-dual-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 3px 6px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.stat-dual-row:hover {
    background-color: rgba(255, 255, 255, 0.14);
}

.stat-dual-label {
    font-size: 13.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin-right: 12px;
    flex-shrink: 0;
}

.stat-dual-value {
    font-size: clamp(15px, 1.15vw, 18.5px);
    font-weight: 700;
    color: #FFFFFF !important;
    letter-spacing: -0.2px;
    white-space: nowrap;
    text-align: right;
    line-height: 1.25;
}

.stat-dual-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.22);
    margin: 4px 0;
    width: 100%;
}

/* Defensive rule for legacy markup using .row > .col + .col */
.prod-p-card .row:has(> .col + .col) {
    flex-direction: column !important;
    gap: 2px !important;
    margin: 0 !important;
}

.prod-p-card .row:has(> .col + .col) > .col {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    padding: 4px 6px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
}

.prod-p-card .row:has(> .col + .col) > .col:hover {
    background-color: rgba(255, 255, 255, 0.14) !important;
}

.prod-p-card .row:has(> .col + .col) > .col + .col {
    border-left: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.22) !important;
    margin-top: 2px !important;
    padding-top: 6px !important;
}

.prod-p-card .row:has(> .col + .col) h6 {
    margin-bottom: 0 !important;
    font-size: 13.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

.prod-p-card .row:has(> .col + .col) strong {
    font-size: clamp(15px, 1.15vw, 18.5px) !important;
    text-align: right !important;
    line-height: 1.25 !important;
}

/* Pending-approval panels */
.yt-panel {
    height: calc(100% - 24px);
    margin-bottom: 24px;
    padding: 20px 22px;
    background: var(--yt-card);
    border: 1px solid var(--yt-border-soft);
    border-radius: var(--yt-radius-lg);
    box-shadow: var(--yt-shadow);
}

.yt-panel h4 {
    margin: 0 0 14px;
    font-size: var(--yt-fs-card);
    font-weight: 600;
    color: var(--yt-text);
}

/* Older templates set line-height: 0 inline on tables, which collapses text */
.table[style*="line-height: 0"],
.table[style*="line-height:0"] {
    line-height: 1.5 !important;
}

@media (max-width: 767.98px) {
    .yt-dash-header {
        margin-top: 16px;
        padding: 16px;
    }

    .yt-dash-icon {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
        border-radius: 12px;
    }

    .yt-dash-title h5 {
        font-size: 1.25rem;
    }
}

/* Counter cards get too narrow for the decorative icon below 1400px */
@media (max-width: 1399.98px) {
    .card-counter > i {
        display: none;
    }
}

/* ============================================================
   22. LINE-ITEM FORMS
   Orders, quotations and promotions (create/update) share one
   layout: form#create-order-form with an #items lines table.
   ============================================================ */

/* Header fields (dealer, date, tag) sit in a card */
#create-order-form > .row:has(> [class*="col-"] .form-group) {
    margin: 0 0 24px;
    padding: 22px 10px 4px;
    background: var(--yt-card);
    border: 1px solid var(--yt-border-soft);
    border-radius: var(--yt-radius-lg);
    box-shadow: var(--yt-shadow);
}

/* Lines, add button, totals and remarks share one panel */
#create-order-form .col-12:has(#items) {
    margin-top: 0 !important;
    padding: 22px;
    background: var(--yt-card);
    border: 1px solid var(--yt-border-soft);
    border-radius: var(--yt-radius-lg);
    box-shadow: var(--yt-shadow);
}

#create-order-form > .row:has(#items) {
    margin: 0;
}

/* Lines table */
#create-order-form #items td {
    padding: 12px 10px !important;
    vertical-align: middle !important;
}

#create-order-form #items .form-control {
    min-width: 88px;
}

#create-order-form #items input[type="number"][name="quantity[]"] {
    min-width: 64px;
}

#create-order-form #items .select2-container {
    min-width: 140px;
}

#create-order-form #items select.form-control:not([multiple]) {
    padding-left: 12px !important;
    padding-right: 32px !important;
    background-position: right 11px center !important;
}

#create-order-form #items .select2-container .select2-selection__rendered {
    padding-left: 12px !important;
    padding-right: 34px !important;
}

#create-order-form #items input[readonly] {
    font-weight: 600;
    color: var(--yt-text) !important;
}

/* Stock / quantity hints shown above a field */
#create-order-form #items [id^="avaialble_stock_"],
#create-order-form #items [id^="total_quantity_"] {
    display: block;
    margin-bottom: 4px;
    color: var(--yt-muted);
    font-size: 12px !important;
    font-weight: 500;
}

/* Product catalog icon becomes a small square button */
#create-order-form #items .fa-picture-o {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-right: 8px;
    border: 1px solid var(--yt-border);
    border-radius: var(--yt-radius-sm);
    background: var(--yt-surface);
    color: var(--yt-secondary);
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}

#create-order-form #items .fa-picture-o:hover {
    background: var(--yt-secondary);
    border-color: var(--yt-secondary);
    color: #FFFFFF;
}

/* Remove-line button */
#create-order-form #items a.ibtnDel > i {
    margin-top: 0 !important;
    font-size: 0.95rem !important;
    cursor: pointer;
}

/* Add-line button */
#create-order-form #addrow {
    width: 44px;
    height: 44px;
    padding: 0 !important;
    border: 1px dashed var(--yt-secondary) !important;
    border-radius: 50% !important;
    background: rgba(69, 32, 165, 0.06) !important;
    color: var(--yt-secondary) !important;
    box-shadow: none !important;
}

#create-order-form #addrow:hover {
    background: var(--yt-secondary) !important;
    border-style: solid !important;
    color: #FFFFFF !important;
}

#create-order-form .row.card-body:has(#addrow) {
    margin: 4px 0 8px;
    padding: 12px 0 !important;
}

/* Totals and remarks boxes */
#create-order-form .align--right > .card,
#create-order-form .align--left > .card {
    padding: 18px 20px !important;
    border: 1px solid var(--yt-border-soft) !important;
    border-radius: var(--yt-radius) !important;
    background: var(--yt-surface) !important;
    box-shadow: none !important;
}

#create-order-form .align--right .d-flex {
    gap: 16px;
}

#create-order-form .align--right > .card > .d-flex:last-child {
    margin-bottom: 0 !important;
    padding-top: 12px;
    border-top: 1px solid var(--yt-border);
}

#create-order-form .align--right .h5,
#create-order-form .align--right .h5 strong {
    margin: 0;
    color: var(--yt-muted) !important;
    font-size: var(--yt-fs-body) !important;
    font-weight: 600 !important;
    white-space: nowrap;
}

#create-order-form .align--right > .card > .d-flex:last-child .h5 strong {
    color: var(--yt-text) !important;
    font-size: var(--yt-fs-card) !important;
    font-weight: 700 !important;
}

#create-order-form .align--right .ml-auto {
    flex: 0 1 220px;
}

#create-order-form .align--right .form-control {
    text-align: right;
}

#create-order-form #total_amount {
    border: 1px solid transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--yt-primary) !important;
    font-size: 1.35rem !important;
    font-weight: 800;
    padding-right: 0 !important;
}

/* Remarks textarea has no .form-control class in these templates */
#create-order-form textarea[name="remarks"] {
    width: 100%;
    min-height: 120px;
    padding: 10px 14px;
    border: 1px solid var(--yt-border);
    border-radius: var(--yt-radius-sm);
    background: var(--yt-card);
    color: var(--yt-text);
    font-family: var(--yt-font);
    font-size: var(--yt-fs-body);
    resize: vertical;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

#create-order-form textarea[name="remarks"]::placeholder {
    color: #9AA6BE;
}

#create-order-form textarea[name="remarks"]:focus {
    border-color: var(--yt-accent);
    box-shadow: var(--yt-focus);
}

/* Footer actions: Cancel is a quiet secondary action next to Save */
#create-order-form .text-right > a.btn-danger[href] {
    background: var(--yt-card) !important;
    border: 1px solid var(--yt-border) !important;
    color: var(--yt-text) !important;
    box-shadow: var(--yt-shadow-sm) !important;
}

#create-order-form .text-right > a.btn-danger[href]:hover {
    background: var(--yt-hover) !important;
    border-color: #C5D0E4 !important;
}

#create-order-form > .row > .col-md-12.text-right,
#create-order-form .col-md-12.text-right:has(#submitbtn) {
    margin-top: 20px;
    padding: 0;
}

#create-order-form #submitbtn {
    min-width: 120px;
}

/* Discount row (orders): plain label like "Shipping Cost", compact type select */
#create-order-form #discount_tab .input-group-prepend {
    align-items: center;
    gap: 8px;
}

#create-order-form #discount_tab .input-group-text {
    min-width: 0;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--yt-muted) !important;
    font-size: var(--yt-fs-body) !important;
    font-weight: 600;
}

#create-order-form #discount_tab #discountSelect {
    width: 76px !important;
    margin: 0 !important;
    border: 1px solid var(--yt-border) !important;
    border-radius: var(--yt-radius-sm) !important;
}

/* Right-hand totals inputs share one width */
#create-order-form .align--right .ml-auto .form-control {
    width: 100% !important;
}

/* Product cell: the select grows to fill the space beside the catalog button */
#create-order-form #items .select-container > span[style*="flex"] {
    width: 100%;
}

#create-order-form #items .select-container > span[style*="flex"] > .select2-container {
    flex: 1 1 auto;
    width: auto !important;
}

/* Column widths: the product column gets the most room (templates set 15% each inline) */
#create-order-form .table:has(#items) thead th:nth-child(1) { width: 25% !important; }
#create-order-form .table:has(#items) thead th:nth-child(2),
#create-order-form .table:has(#items) thead th:nth-child(3),
#create-order-form .table:has(#items) thead th:nth-child(4) { width: 12% !important; }
#create-order-form .table:has(#items) thead th:nth-child(5) { width: 9% !important; }
#create-order-form .table:has(#items) thead th:nth-child(6),
#create-order-form .table:has(#items) thead th:nth-child(7) { width: 11% !important; }
#create-order-form .table:has(#items) thead th:nth-child(8) { width: 56px !important; }

/* ============================================================
   10. PAGINATION & NAVIGATION
   ============================================================ */

/* Defensive bounds: Never allow any pagination SVG to blow up */
.pagination svg,
nav[role="navigation"] svg,
.pagination-wrapper svg,
.pagination-container svg {
    width: 14px !important;
    height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
    display: inline-block !important;
    vertical-align: middle;
}

.pagination {
    display: flex !important;
    align-items: center;
    gap: 4px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.pagination .page-item {
    margin: 0 !important;
}

.pagination .page-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 6px 12px !important;
    border-radius: var(--yt-radius-sm) !important;
    border: 1px solid var(--yt-border) !important;
    background: var(--yt-card) !important;
    color: var(--yt-text) !important;
    font-size: var(--yt-fs-btn-sm) !important;
    font-weight: 600 !important;
    box-shadow: var(--yt-shadow-sm) !important;
    transition: all 0.18s ease !important;
    text-decoration: none !important;
    line-height: 1 !important;
}

.pagination .page-link:hover {
    background: var(--yt-hover) !important;
    border-color: #C5D0E4 !important;
    color: var(--yt-accent) !important;
}

.pagination .page-item.active .page-link {
    background: var(--yt-accent) !important;
    border-color: var(--yt-accent) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(255, 81, 47, 0.28) !important;
}

.pagination .page-item.disabled .page-link {
    background: var(--yt-surface) !important;
    border-color: var(--yt-border-soft) !important;
    color: var(--yt-muted) !important;
    opacity: 0.55;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

nav[role="navigation"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

nav[role="navigation"] > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ============================================================
   REFERENCE THEME
   Match the supplied YouTech dashboard reference: solid red header,
   deep-purple navigation, pale blue workspace and bright flat cards.
   Kept as a final layer so the dashboard and all inner pages stay aligned.
   ============================================================ */
:root {
    --yt-primary: #12043f;
    --yt-secondary: #087cf0;
    --yt-accent: #ff4d3d;
    --yt-accent-dark: #e93524;
    --yt-bg: #eef5fa;
    --yt-card: #ffffff;
    --yt-text: #263238;
    --yt-muted: #6f7b86;
    --yt-border: #d9e0e5;
    --yt-border-soft: #e9eef2;
    --yt-surface: #f7fafc;
    --yt-hover: #f4f7fa;
    --yt-header-gradient: #ed2108;
    --yt-sidebar-bg: #12043f;
    --yt-sidebar-active: #ffffff;
    --yt-sidebar-hover: rgba(255, 255, 255, 0.08);
    --yt-sidebar-text: rgba(255, 255, 255, 0.92);
    --yt-font: 'Quicksand', 'Open Sans', sans-serif;
}

body,
.pcoded-main-container,
.pcoded-content {
    background-color: var(--yt-bg) !important;
}

.pcoded .pcoded-header,
nav.header-navbar.pcoded-header,
.pcoded .pcoded-header[header-theme] {
    background: #ed2108 !important;
    box-shadow: 0 3px 12px rgba(26, 37, 48, 0.18) !important;
}

.header-navbar .navbar-wrapper .navbar-logo,
.header-navbar .navbar-wrapper .navbar-logo[logo-theme] {
    background: #12043f !important;
}

.header-navbar .navbar-logo a,
.header-navbar .navbar-logo h2 {
    color: #ff4b22 !important;
    letter-spacing: 0 !important;
    font-weight: 500 !important;
}

nav.header-navbar .low_stock_wrapper li > a {
    background: transparent !important;
    border: 0 !important;
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    padding: 8px 16px !important;
}

.pcoded .pcoded-navbar,
.pcoded .pcoded-navbar .nav-list,
.pcoded .pcoded-navbar[navbar-theme] .nav-user,
.pcoded .pcoded-navbar[navbar-theme] .pcoded-inner-navbar,
.pcoded .pcoded-navbar[navbar-theme=theme1] .nav-user,
.pcoded .pcoded-navbar[navbar-theme=theme1] .pcoded-inner-navbar {
    background: #12043f !important;
}

.pcoded .pcoded-navbar .pcoded-item > li > a,
.pcoded .pcoded-navbar[navbar-theme=theme1] .pcoded-item > li > a {
    margin: 0 !important;
    border-radius: 0 !important;
    border-left: 4px solid transparent !important;
    color: #ffffff !important;
}

.pcoded .pcoded-navbar .pcoded-item > li:hover > a {
    background: rgba(255, 255, 255, 0.08) !important;
}

.pcoded[theme-layout=vertical] .pcoded-navbar[navbar-theme=theme1][active-item-theme=theme1] .pcoded-item > li.active > a,
.pcoded .pcoded-navbar .pcoded-item > li.active > a {
    background: #ffffff !important;
    border-left-color: #42a5f5 !important;
    color: #d43c28 !important;
}

.pcoded .pcoded-navbar .pcoded-item > li.active > a > .pcoded-micon i {
    color: #d43c28 !important;
}

/* Keep the selected item readable while hovering it. */
.pcoded .pcoded-navbar .pcoded-item > li.active:hover > a,
.pcoded .pcoded-navbar .pcoded-item > li.active:hover > a .pcoded-mtext,
.pcoded .pcoded-navbar .pcoded-item > li.active:hover > a > .pcoded-micon i,
.pcoded[theme-layout=vertical] .pcoded-navbar[navbar-theme=theme1][active-item-theme=theme1] .pcoded-item > li.active:hover > a,
.pcoded[theme-layout=vertical] .pcoded-navbar[navbar-theme=theme1][active-item-theme=theme1] .pcoded-item > li.active:hover > a .pcoded-mtext,
.pcoded[theme-layout=vertical] .pcoded-navbar[navbar-theme=theme1][active-item-theme=theme1] .pcoded-item > li.active:hover > a > .pcoded-micon i {
    background: #ffffff !important;
    color: #d43c28 !important;
}

/* Sky-blue selected sidebar tab, matching the reference interaction state. */
.pcoded[theme-layout=vertical] .pcoded-navbar[navbar-theme=theme1][active-item-theme=theme1] .pcoded-item > li.active > a,
.pcoded .pcoded-navbar .pcoded-item > li.active > a,
.pcoded .pcoded-navbar .pcoded-item > li.active:hover > a,
.pcoded .pcoded-navbar .pcoded-item > li.active:hover > a .pcoded-mtext,
.pcoded .pcoded-navbar .pcoded-item > li.active:hover > a > .pcoded-micon i {
    background: #42a5f5 !important;
    color: #ffffff !important;
}

.pcoded .pcoded-navbar .pcoded-item > li.active > a > .pcoded-micon i {
    color: #ffffff !important;
}

/* Avoid a white-on-white transition flash while the active class changes. */
.pcoded .pcoded-navbar .pcoded-item > li > a,
.pcoded .pcoded-navbar .pcoded-item > li > a:hover,
.pcoded .pcoded-navbar .pcoded-item > li > a:focus,
.pcoded .pcoded-navbar .pcoded-item > li > a:active {
    transition: none !important;
}

/* Prevent the browser/theme focus flash when changing sidebar tabs. */
.pcoded .pcoded-navbar .pcoded-item > li > a:focus,
.pcoded .pcoded-navbar .pcoded-item > li > a:active,
.pcoded .pcoded-navbar .pcoded-item > li.active > a:focus,
.pcoded .pcoded-navbar .pcoded-item > li.active > a:active,
.pcoded .pcoded-navbar .pcoded-item > li.active > a:focus .pcoded-mtext,
.pcoded .pcoded-navbar .pcoded-item > li.active > a:active .pcoded-mtext,
.pcoded .pcoded-navbar .pcoded-item > li.active > a:focus > .pcoded-micon i,
.pcoded .pcoded-navbar .pcoded-item > li.active > a:active > .pcoded-micon i {
    background: #42a5f5 !important;
    color: #ffffff !important;
    outline: none !important;
}

.page-body {
    padding: 0 28px 28px !important;
}

.card-counter,
.prod-p-card {
    border-radius: 7px !important;
    box-shadow: 0 4px 12px rgba(42, 56, 68, 0.16) !important;
}

.yt-section-head h5,
.yt-dash-header h5,
.yt-dash-header span {
    color: #263238 !important;
}

/* Lighter, dimensional dashboard cards (instead of heavy flat fills). */
.card-counter.info,
.prod-p-card.card-blue,
.prod-p-card.bg-c-blue,
.prod-p-card.yt-card-sky {
    background: linear-gradient(135deg, #6abfd0 0%, #4a91cb 100%) !important;
}

.card-counter.success,
.prod-p-card.card-green {
    background: linear-gradient(135deg, #68c29f 0%, #3b9b7f 100%) !important;
}

.card-counter.primary,
.prod-p-card.yt-card-violet {
    background: linear-gradient(135deg, #8b78d1 0%, #6751b4 100%) !important;
}

.card-counter.danger,
.prod-p-card.card-red {
    background: linear-gradient(135deg, #ef8d84 0%, #d9655b 100%) !important;
}

.prod-p-card.card-yellow {
    background: linear-gradient(135deg, #f4c875 0%, #dda343 100%) !important;
}

.prod-p-card.yt-card-rose {
    background: linear-gradient(135deg, #d889aa 0%, #b85d82 100%) !important;
}

.prod-p-card.yt-card-teal {
    background: linear-gradient(135deg, #68bfc1 0%, #3d999f 100%) !important;
}

.card-counter,
.prod-p-card {
    background-blend-mode: screen;
    box-shadow: 0 6px 16px rgba(42, 56, 68, 0.12) !important;
}

/* Expanded parent menus must remain readable before a submenu is selected. */
:root {
    --yt-sidebar-active: #42a5f5;
}

.pcoded .pcoded-navbar .pcoded-item > li > a:focus {
    background: #42a5f5 !important;
    color: #ffffff !important;
}