/* ==========================================================================
   InfiERP — Brand Theme  (Simplify • Manage • Grow)
   Presentation layer only. Loaded after the template stylesheets; it changes
   look & feel (colors, type, spacing, shapes) and never markup behaviour.
   ========================================================================== */

/* ---------- 1. Brand font (self-hosted, OFL) ---------- */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/infierp/plus-jakarta-sans-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/infierp/plus-jakarta-sans-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/infierp/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/infierp/plus-jakarta-sans-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("../assets/fonts/infierp/plus-jakarta-sans-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/infierp/plus-jakarta-sans-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/infierp/plus-jakarta-sans-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/infierp/plus-jakarta-sans-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- 2. Design tokens ---------- */
:root {
    /* Brand palette — sampled from the InfiERP logo */
    --if-navy-950: #061531;
    --if-navy-900: #08204a;
    --if-navy-800: #0b2b5f;
    --if-navy: #0d3a7e;          /* "Infi" wordmark */
    --if-blue: #0b63ce;          /* "i C" mark */
    --if-blue-700: #0a4fa8;
    --if-cyan: #0bb4ec;          /* growth arrow */
    --if-orange: #ff6a13;        /* "ERP" wordmark */
    --if-orange-700: #e8530a;
    --if-amber: #ffa908;         /* chart bars / dot */

    /* Neutrals */
    --if-bg: #f3f6fb;
    --if-surface: #ffffff;
    --if-surface-2: #f7f9fc;
    --if-border: #e4eaf3;
    --if-border-strong: #d5deea;
    --if-text: #15233b;
    --if-text-2: #3c4a63;
    --if-muted: #6b7a93;

    /* Semantic */
    --if-success: #12a46b;
    --if-danger: #e5484d;
    --if-warning: #f5a20a;
    --if-info: #0aa5d8;

    /* Shape & depth */
    --if-radius-sm: 8px;
    --if-radius: 12px;
    --if-radius-lg: 18px;
    --if-shadow-xs: 0 1px 2px rgba(13, 38, 76, .05);
    --if-shadow-sm: 0 1px 2px rgba(13, 38, 76, .04), 0 6px 18px -10px rgba(13, 38, 76, .14);
    --if-shadow: 0 2px 4px rgba(13, 38, 76, .04), 0 18px 40px -18px rgba(13, 38, 76, .22);
    --if-font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Accent used by interactive elements. Follows the company's colour choice in
       Settings → Brand Settings; the default (theme-3 / no choice) is InfiERP Blue. */
    --theme-color: var(--if-blue);
    --if-primary: var(--theme-color);
    --if-primary-soft: color-mix(in srgb, var(--if-primary) 10%, #fff);
    --if-primary-soft-2: color-mix(in srgb, var(--if-primary) 18%, #fff);
    --if-primary-ring: color-mix(in srgb, var(--if-primary) 22%, transparent);
    --if-primary-grad: linear-gradient(135deg, var(--if-primary) 0%, color-mix(in srgb, var(--if-primary) 62%, var(--if-cyan)) 100%);
    --if-brand-grad: linear-gradient(120deg, var(--if-navy-900) 0%, var(--if-navy) 45%, var(--if-blue) 100%);
    --if-accent-grad: linear-gradient(135deg, var(--if-amber) 0%, var(--if-orange) 100%);
}

/* The default theme slot (theme-3) becomes InfiERP Blue */
body.theme-3 { --theme-color: #0b63ce !important; }
body { --if-primary: var(--theme-color); }
body.theme-1, body.theme-2, body.theme-3, body.theme-4, body.theme-5, body.theme-6, body.theme-7,
body.theme-8, body.theme-9, body.theme-10, body.custom-color {
    --if-primary: var(--theme-color);
    --if-primary-soft: color-mix(in srgb, var(--if-primary) 10%, #fff);
    --if-primary-soft-2: color-mix(in srgb, var(--if-primary) 18%, #fff);
    --if-primary-ring: color-mix(in srgb, var(--if-primary) 22%, transparent);
    --if-primary-grad: linear-gradient(135deg, var(--if-primary) 0%, color-mix(in srgb, var(--if-primary) 62%, var(--if-cyan)) 100%);
}
.doc-img.themes-color > a[data-value="theme-3"],
.theme-color.themes-color > a[data-value="theme-3"] {
    background: linear-gradient(135deg, #0b63ce 0%, #0bb4ec 100%) !important;
}

/* ---------- 3. Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--if-font) !important;
    color: var(--if-text-2);
    background: var(--if-bg) !important;
    font-size: 14px;
    letter-spacing: -0.003em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body.custom-color, body[class*="theme-"] { background: var(--if-bg) !important; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--if-font); color: var(--if-text); letter-spacing: -0.015em; }
b, strong { font-weight: 700; }
a { color: var(--if-primary); }
a:hover { color: color-mix(in srgb, var(--if-primary) 80%, #000); }
.text-primary { color: var(--if-primary) !important; }
.text-muted { color: var(--if-muted) !important; }
.text-dark { color: var(--if-text) !important; }
.bg-primary { background: var(--if-primary-grad) !important; }
.border-primary { border-color: var(--if-primary) !important; }
::selection { background: var(--if-primary-soft-2); color: var(--if-navy-900); }
hr { border-color: var(--if-border); opacity: 1; }

/* Thin brand scrollbars */
* { scrollbar-width: thin; scrollbar-color: #c4cfde transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #c9d3e1; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background-color: #aab8cc; }
*::-webkit-scrollbar-track { background: transparent; }

/* Page loader bar */
.loader-bg .loader-track { background: var(--if-primary-soft-2) !important; }
.loader-bg .loader-fill, .loader-bg .loader-track .loader-fill { background: var(--if-accent-grad) !important; }

/* ---------- 4. Sidebar ---------- */
.dash-sidebar,
.dash-sidebar.light-sidebar,
.dash-sidebar.light-sidebar.transprent-bg {
    background: var(--if-surface) !important;
    border-inline-end: 1px solid var(--if-border);
    box-shadow: none !important;
    font-family: var(--if-font);
}
@media (min-width: 1025px) {
    /* "Transparent" sidebar option = seamless panel; the other option = floating card */
    .dash-sidebar.light-sidebar:not(.transprent-bg) {
        top: 14px; bottom: 14px; inset-inline-start: 14px;
        border-radius: var(--if-radius-lg);
        border: 1px solid var(--if-border);
        box-shadow: var(--if-shadow) !important;
        overflow: hidden;
    }
}
.dash-sidebar .navbar-wrapper { background: transparent; }
.dash-sidebar .m-header {
    height: 76px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--if-border);
    background: transparent;
}
.dash-sidebar .m-header .b-brand { display: flex; align-items: center; width: 100%; }
.dash-sidebar .m-header .b-brand .logo,
.dash-sidebar .m-header .b-brand img.logo-lg {
    max-height: 46px !important;
    max-width: 206px !important;
    width: auto !important;
    height: auto;
    object-fit: contain;
}
.dash-sidebar .navbar-content { padding: 12px 0 18px; }

/* Top-level items */
.dash-sidebar .dash-navbar { padding: 0 12px; }
.dash-sidebar .dash-navbar > .dash-item { margin: 2px 0; }
.dash-sidebar .dash-navbar > .dash-item > .dash-link,
.dash-sidebar.light-sidebar .dash-navbar > .dash-item > .dash-link {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0 !important;
    padding: 7px 12px 7px 7px !important;
    border-radius: 12px;
    color: var(--if-text-2) !important;
    font-size: 13.5px;
    font-weight: 600;
    background: transparent !important;
    box-shadow: none !important;
    transition: background .18s ease, color .18s ease;
}
.dash-sidebar .dash-navbar > .dash-item > .dash-link .dash-mtext { flex: 1 1 auto; min-width: 0; }
.dash-sidebar .dash-micon,
.dash-sidebar.light-sidebar .dash-micon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px;
    margin-inline-end: 12px !important;
    border-radius: 10px !important;
    background: var(--if-surface-2) !important;
    border: 1px solid var(--if-border);
    box-shadow: none !important;
    color: var(--if-navy) !important;
    transition: all .18s ease;
}
.dash-sidebar .dash-micon i { font-size: 18px; color: inherit !important; }
.dash-sidebar .dash-micon svg { width: 18px; height: 18px; color: inherit !important; stroke: currentColor; }
.dash-sidebar .dash-arrow { margin-inline-start: auto; opacity: .55; display: inline-flex; }
.dash-sidebar .dash-arrow svg { width: 15px !important; height: 15px !important; }

.dash-sidebar .dash-navbar > .dash-item:hover > .dash-link,
.dash-sidebar .dash-navbar > .dash-item:focus > .dash-link,
.dash-sidebar.light-sidebar .dash-navbar > .dash-item:hover > .dash-link,
.dash-sidebar.light-sidebar .dash-navbar > .dash-item:focus > .dash-link {
    background: var(--if-surface-2) !important;
    color: var(--if-text) !important;
}
.dash-sidebar .dash-navbar > .dash-item:hover > .dash-link .dash-micon {
    background: var(--if-primary-soft) !important;
    border-color: var(--if-primary-soft-2);
    color: var(--if-primary) !important;
}

/* Active / expanded group */
body .dash-sidebar .dash-navbar > .dash-item.active > .dash-link,
body .dash-sidebar .dash-navbar > .dash-item:active > .dash-link,
body .dash-sidebar.light-sidebar .dash-navbar > .dash-item.active > .dash-link,
body .dash-sidebar.light-sidebar .dash-navbar > .dash-item:active > .dash-link,
body[class] .dash-sidebar.light-sidebar .dash-navbar > .dash-item.active > .dash-link {
    background: var(--if-primary-grad) !important;
    color: #fff !important;
    box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--if-primary) 85%, transparent) !important;
    position: relative;
}
body .dash-sidebar .dash-navbar > .dash-item.active > .dash-link .dash-micon,
body[class] .dash-sidebar.light-sidebar .dash-navbar > .dash-item.active > .dash-link .dash-micon {
    background: rgba(255, 255, 255, .18) !important;
    border-color: rgba(255, 255, 255, .28);
    color: #fff !important;
}
body .dash-sidebar .dash-navbar > .dash-item.active > .dash-link .dash-micon i,
body .dash-sidebar .dash-navbar > .dash-item.active > .dash-link .dash-micon svg { color: #fff !important; }
body .dash-sidebar .dash-navbar > .dash-item.active > .dash-link .dash-arrow { opacity: .9; }
body .dash-sidebar .dash-navbar > .dash-item.active > .dash-link::after {
    content: "";
    position: absolute;
    inset-inline-end: 7px;
    top: 50%;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--if-amber);
    box-shadow: 0 0 0 3px rgba(255, 169, 8, .25);
    transform: translateY(-50%);
    display: none;
}

/* Sub menus */
.dash-sidebar .dash-submenu { padding: 4px 0 6px; }
.dash-sidebar .dash-submenu .dash-link,
.dash-sidebar.light-sidebar .dash-submenu .dash-link {
    padding: 8px 14px 8px 56px !important;
    margin: 1px 0 !important;
    border-radius: 10px;
    color: var(--if-muted) !important;
    font-size: 13px;
    font-weight: 500 !important;
}
.dash-sidebar .dash-submenu .dash-submenu .dash-link { padding-inline-start: 72px !important; }
.dash-sidebar .dash-submenu .dash-submenu .dash-submenu .dash-link { padding-inline-start: 88px !important; }
[dir="rtl"] .dash-sidebar .dash-submenu .dash-link { padding: 8px 56px 8px 14px !important; }

/* Guide line + node dots */
body:not(.minimenu) .dash-sidebar .dash-navbar > .dash-item > .dash-submenu::before {
    content: "";
    position: absolute;
    inset-inline-start: 31px;
    top: 6px; bottom: 10px;
    width: 1.5px;
    background: var(--if-border);
    border-radius: 2px;
}
body:not(.minimenu) .dash-sidebar .dash-submenu .dash-item:before,
body[class]:not(.minimenu) .dash-sidebar .dash-submenu .dash-item:before,
body[class] .dash-sidebar.light-sidebar .dash-item .dash-submenu .dash-item::before {
    left: 28.5px !important;
    top: 15px !important;
    width: 7px !important;
    height: 7px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #c9d4e3 !important;
    transform: none !important;
    box-shadow: 0 0 0 3px var(--if-surface);
}
[dir="rtl"] body:not(.minimenu) .dash-sidebar .dash-submenu .dash-item:before { left: auto !important; right: 28.5px !important; }
body:not(.minimenu) .dash-sidebar .dash-submenu .dash-submenu > .dash-item:before { left: 44.5px !important; }
body:not(.minimenu) .dash-sidebar .dash-submenu .dash-submenu .dash-submenu > .dash-item:before { left: 60.5px !important; }

.dash-sidebar .dash-submenu .dash-item:hover > .dash-link,
body[class] .dash-sidebar.light-sidebar .dash-item .dash-submenu .dash-item:hover > .dash-link {
    color: var(--if-text) !important;
    background: var(--if-surface-2);
}
body[class] .dash-sidebar .dash-item > .dash-submenu .dash-item.active > .dash-link,
body[class] .dash-sidebar.light-sidebar .dash-item .dash-submenu .dash-item.active > .dash-link,
body .dash-sidebar .dash-item > .dash-submenu .dash-item.active > .dash-link {
    color: var(--if-primary) !important;
    font-weight: 700 !important;
    background: var(--if-primary-soft);
}
body[class] .dash-sidebar .dash-submenu .dash-item.active:before,
body[class] .dash-sidebar.light-sidebar .dash-item .dash-submenu .dash-item.active::before {
    background: var(--if-orange) !important;
    box-shadow: 0 0 0 3px var(--if-surface), 0 0 0 5px rgba(255, 106, 19, .25);
}

/* Collapsed (mini) menu flyouts */
.minimenu .dash-sidebar .dash-submenu {
    background: var(--if-surface) !important;
    border: 1px solid var(--if-border);
    border-radius: var(--if-radius);
    box-shadow: var(--if-shadow);
}

/* ---------- 5. Header ---------- */
.dash-header,
.dash-header.transprent-bg {
    background: color-mix(in srgb, var(--if-bg) 82%, transparent) !important;
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
    color: var(--if-text-2);
    min-height: 72px;
    box-shadow: none !important;
    font-family: var(--if-font);
}
@media (min-width: 1025px) {
    .dash-header:not(.transprent-bg) {
        background: rgba(255, 255, 255, .86) !important;
        border: 1px solid var(--if-border);
        box-shadow: var(--if-shadow-sm) !important;
        border-radius: var(--if-radius-lg);
    }
}
.dash-header .header-wrapper { min-height: 72px; align-items: center; }
.dash-header .dash-head-link {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 4px 12px !important;
    margin: 0 4px !important;
    background: var(--if-surface) !important;
    border: 1px solid var(--if-border) !important;
    border-radius: 12px !important;
    color: var(--if-text-2) !important;
    box-shadow: var(--if-shadow-xs) !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.dash-header .dash-head-link:hover,
.dash-header .dash-head-link[aria-expanded="true"] {
    border-color: var(--if-primary-soft-2) !important;
    box-shadow: 0 0 0 4px var(--if-primary-ring) !important;
}
.dash-header .dash-head-link > i:not(.nocolor),
.dash-header .dash-head-link i { color: var(--if-navy) !important; font-size: 19px; }
.dash-header .drp-language .drp-text,
body[class] .dash-header .drp-language .drp-text { color: var(--if-text-2) !important; font-weight: 600; font-size: 13px; }
.dash-header .drp-company .dash-head-link { padding: 4px 12px 4px 4px !important; font-weight: 600; font-size: 13.5px; color: var(--if-text) !important; }
[dir="rtl"] .dash-header .drp-company .dash-head-link { padding: 4px 4px 4px 12px !important; }
.dash-header .drp-company .theme-avtar,
body[class] .dash-header .drp-company .theme-avtar {
    width: 34px !important; height: 34px !important;
    border-radius: 10px !important;
    background: var(--if-primary-soft) !important;
    overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
}
.dash-header .drp-company .theme-avtar img { border: 0 !important; border-radius: 10px !important; width: 100%; height: 100%; object-fit: cover; }
.dash-header .dash-h-badge {
    background: var(--if-orange) !important;
    border: 2px solid #fff;
    font-weight: 700;
    min-width: 18px; height: 18px; line-height: 14px;
    border-radius: 9px;
    font-size: 10px;
    top: 4px !important;
}
.dash-header .dash-h-dropdown,
.dropdown-menu {
    border: 1px solid var(--if-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--if-shadow) !important;
    padding: 6px !important;
    font-family: var(--if-font);
}
.dropdown-menu .dropdown-item {
    border-radius: 9px;
    padding: 8px 12px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--if-text-2);
    display: flex; align-items: center; gap: 8px;
}
.dropdown-menu .dropdown-item i { font-size: 17px; }
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus { background: var(--if-primary-soft) !important; color: var(--if-primary) !important; }
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active { background: var(--if-primary) !important; color: #fff !important; }
.dash-header .dash-h-dropdown { max-height: 70vh; overflow-y: auto; }

/* Mobile hamburger */
.dash-header .mob-hamburger .dash-head-link { padding: 4px 10px !important; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { background-color: var(--if-navy) !important; border-radius: 2px; }

/* ---------- 6. Content & page header ---------- */
.dash-container .dash-content { padding-top: 22px; }
.page-header {
    position: relative;
    overflow: hidden;
    margin-bottom: 20px !important;
    padding: 22px 26px !important;
    border-radius: var(--if-radius-lg);
    background: var(--if-brand-grad);
    box-shadow: 0 18px 36px -24px rgba(8, 32, 74, .7);
    isolation: isolate;
}
/* Signature motif: the logo's growth bars + arrow */
.page-header::before {
    content: "";
    position: absolute;
    inset-inline-end: clamp(120px, 24%, 380px);
    bottom: -6px;
    width: 230px;
    height: 110px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 230 110' fill='none'%3E%3Crect x='70' y='62' width='18' height='48' rx='4' fill='%23ffffff' fill-opacity='.12'/%3E%3Crect x='98' y='44' width='18' height='66' rx='4' fill='%23ffffff' fill-opacity='.16'/%3E%3Crect x='126' y='24' width='18' height='86' rx='4' fill='%23ffa908' fill-opacity='.75'/%3E%3Cpath d='M20 104C92 98 150 70 196 22' stroke='%230bb4ec' stroke-opacity='.55' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M174 18l26-2-4 26' stroke='%230bb4ec' stroke-opacity='.55' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right bottom / contain;
    pointer-events: none;
    z-index: -1;
}
[dir="rtl"] .page-header::before { transform: scaleX(-1); }
.page-header::after {
    content: "";
    position: absolute;
    inset-inline-start: -60px; top: -90px;
    width: 260px; height: 260px;
    background: radial-gradient(closest-side, rgba(11, 180, 236, .28), transparent);
    pointer-events: none;
    z-index: -1;
}
.page-header .page-block { position: relative; }
.page-header .page-header-title h4,
.page-header .page-header-title h5,
.page-header h4 {
    color: #fff !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
    margin-bottom: 6px !important;
}
.page-header .breadcrumb { margin: 0; padding: 0; background: transparent; flex-wrap: wrap; }
.page-header .breadcrumb .breadcrumb-item,
.page-header .breadcrumb .breadcrumb-item a { color: rgba(255, 255, 255, .72) !important; font-size: 12.5px; font-weight: 500; }
.page-header .breadcrumb .breadcrumb-item a:hover { color: #fff !important; }
.page-header .breadcrumb .breadcrumb-item:last-child { color: #fff !important; font-weight: 600; }
.page-header .breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .45) !important; }

/* Page action buttons on the brand banner */
.page-header .action-btn-col { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.page-header .action-btn-col .btn,
.page-header .float-end .btn {
    background: rgba(255, 255, 255, .12) !important;
    border: 1px solid rgba(255, 255, 255, .26) !important;
    color: #fff !important;
    box-shadow: none !important;
    min-width: 38px; min-height: 38px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border-radius: 11px !important;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.page-header .action-btn-col .btn i, .page-header .action-btn-col .btn svg { color: #fff !important; }
.page-header .action-btn-col .btn:hover { background: rgba(255, 255, 255, .22) !important; }
.page-header .action-btn-col .btn.btn-primary,
.page-header .float-end .btn.btn-primary {
    background: #fff !important;
    border-color: #fff !important;
    color: var(--if-navy) !important;
}
.page-header .action-btn-col .btn.btn-primary i,
.page-header .action-btn-col .btn.btn-primary svg { color: var(--if-blue) !important; }
.page-header .action-btn-col .btn.btn-primary:hover { background: #f1f6ff !important; }
.page-header .action-btn-col .form-control,
.page-header .action-btn-col .form-select { min-height: 38px; }
.page-header .action-btn-col .btn-danger { background: rgba(229, 72, 77, .9) !important; border-color: transparent !important; }

/* ---------- 7. Cards ---------- */
.card {
    border: 1px solid var(--if-border) !important;
    border-radius: var(--if-radius-lg) !important;
    box-shadow: var(--if-shadow-sm) !important;
    background: var(--if-surface);
    margin-bottom: 24px;
}
.card .card-header,
.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--if-border) !important;
    padding: 18px 22px !important;
}
.card .card-header:first-child { border-radius: var(--if-radius-lg) var(--if-radius-lg) 0 0 !important; }
.card .card-header h5, .card .card-header .h5, .card-header h5 {
    font-size: 15.5px !important;
    font-weight: 700 !important;
    color: var(--if-text) !important;
    position: relative;
    padding-inline-start: 14px;
    margin-bottom: 0;
}
/* replace the template's vertical bar with the brand accent */
.card .card-header h5:after, .card .card-header .h5:after,
body[class] .card .card-header h5:after, body[class] .card .card-header .h5:after,
.card-header h5:after {
    background: var(--if-accent-grad) !important;
    width: 4px !important;
    height: 16px !important;
    border-radius: 4px !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%);
}
[dir="rtl"] .card .card-header h5:after { left: auto !important; right: 0 !important; }
.card .card-header .card-header-right .btn { border-radius: 10px; }
.card .card-body { padding: 22px; }
.card .card-footer { background: var(--if-surface-2); border-top: 1px solid var(--if-border); border-radius: 0 0 var(--if-radius-lg) var(--if-radius-lg) !important; }
.card.bg-primary, .card .bg-primary { color: #fff; }

/* Dashboard stat tiles (accounting, POS, HRM jobs, CRM deals, support, payouts) */
:is(.dash-info-card .info-card-inner, .pos-dash-card .pos-card-inner, .job-info-card .job-card-inner, .deals-card .deals-card-inner, .support-ticket-card .support-card-inner, .payout-card .payout-card-inner) {
    background: var(--if-surface) !important;
    border: 1px solid var(--if-border) !important;
    border-radius: var(--if-radius-lg) !important;
    box-shadow: var(--if-shadow-sm) !important;
    overflow: hidden;
    position: relative;
    transition: transform .18s ease, box-shadow .18s ease;
}
:is(.dash-info-card .info-card-inner, .pos-dash-card .pos-card-inner, .job-info-card .job-card-inner, .deals-card .deals-card-inner, .support-ticket-card .support-card-inner, .payout-card .payout-card-inner):hover {
    transform: translateY(-2px); box-shadow: var(--if-shadow) !important;
}
:is(.dash-info-card, .pos-dash-card, .job-info-card, .deals-card, .support-ticket-card, .payout-card, .project-dash-card, .crm-dash-card) .star-bg { display: none !important; }
:is(.dash-info-card, .pos-dash-card, .job-info-card, .deals-card, .support-ticket-card, .payout-card) .bottom-svg { opacity: .09 !important; }
:is(.dash-info-card .info-icon, .pos-dash-card .pos-icon, .job-info-card .job-icon, .deals-card .deals-icon, .support-ticket-card .support-icon, .payout-card .payout-icon) {
    width: 48px !important; height: 48px !important;
    border-radius: 14px !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    box-shadow: 0 10px 20px -12px rgba(11, 43, 95, .6);
}
:is(.dash-info-card .info-icon, .pos-dash-card .pos-icon, .job-info-card .job-icon, .deals-card .deals-icon, .support-ticket-card .support-icon, .payout-card .payout-icon) svg path { fill: #fff !important; }
.dash-info-card .info-icon-wrp h3, .pos-dash-card h3, .job-info-card h3, .deals-card h3, .support-ticket-card h3, .payout-card h3 {
    font-weight: 800 !important; color: var(--if-text) !important; letter-spacing: -0.02em;
}
body .dash-info-card:nth-child(n) .info-card-inner .info-content .info-link,
body .pos-dash-card:nth-child(n) .pos-info a,
.dash-info-card .info-content a {
    color: var(--if-text-2) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}
body .dash-info-card:nth-child(n) .info-card-inner .info-content .info-link:hover, body .pos-dash-card:nth-child(n) .pos-info a:hover { color: var(--if-primary) !important; }
:is(.dash-info-card, .pos-dash-card, .job-info-card, .deals-card, .support-ticket-card, .payout-card):nth-child(4n+1) :is(.info-icon, .pos-icon, .job-icon, .deals-icon, .support-icon, .payout-icon) { background: linear-gradient(135deg, var(--if-blue), var(--if-cyan)) !important; }
:is(.dash-info-card, .pos-dash-card, .job-info-card, .deals-card, .support-ticket-card, .payout-card):nth-child(4n+2) :is(.info-icon, .pos-icon, .job-icon, .deals-icon, .support-icon, .payout-icon) { background: linear-gradient(135deg, var(--if-amber), var(--if-orange)) !important; }
:is(.dash-info-card, .pos-dash-card, .job-info-card, .deals-card, .support-ticket-card, .payout-card):nth-child(4n+3) :is(.info-icon, .pos-icon, .job-icon, .deals-icon, .support-icon, .payout-icon) { background: linear-gradient(135deg, var(--if-navy), #2a6fd6) !important; }
:is(.dash-info-card, .pos-dash-card, .job-info-card, .deals-card, .support-ticket-card, .payout-card):nth-child(4n+4) :is(.info-icon, .pos-icon, .job-icon, .deals-icon, .support-icon, .payout-icon) { background: linear-gradient(135deg, #0f9d67, #2fd3a0) !important; }
:is(.dash-info-card, .pos-dash-card, .job-info-card, .deals-card, .support-ticket-card, .payout-card):nth-child(4n+1) .bottom-svg :is(path, rect) { fill: var(--if-blue) !important; }
:is(.dash-info-card, .pos-dash-card, .job-info-card, .deals-card, .support-ticket-card, .payout-card):nth-child(4n+2) .bottom-svg :is(path, rect) { fill: var(--if-orange) !important; }
:is(.dash-info-card, .pos-dash-card, .job-info-card, .deals-card, .support-ticket-card, .payout-card):nth-child(4n+3) .bottom-svg :is(path, rect) { fill: var(--if-navy) !important; }
:is(.dash-info-card, .pos-dash-card, .job-info-card, .deals-card, .support-ticket-card, .payout-card):nth-child(4n+4) .bottom-svg :is(path, rect) { fill: #0f9d67 !important; }
.dash-info-card .info-card-inner .card-label { background: var(--if-primary-soft) !important; color: var(--if-primary) !important; }


/* Tinted KPI tiles (CRM, Project, HRM staff, Leave, Warehouse) — brand series colours */
:is(.crm-dash-card .crm-card-inner, .project-dash-card .project-card-inner, .warehouse-card .warehouse-card-inner, .staff-info-card .staff-info-inner, .leave-card .leave-card-inner) { border-radius: 14px !important; border: 1px solid transparent; transition: transform .18s ease; }
:is(.crm-dash-card .crm-card-inner, .project-dash-card .project-card-inner, .warehouse-card .warehouse-card-inner, .staff-info-card .staff-info-inner, .leave-card .leave-card-inner):hover { transform: translateY(-1px); }
:is(.crm-dash-card .crm-icon, .project-dash-card .project-icon, .warehouse-card .warehouse-icon, .staff-info-card .staff-info-icon, .leave-card .leave-icon) { border-radius: 12px !important; background: #fff !important; box-shadow: 0 6px 14px -10px rgba(13, 38, 76, .5); }
body .crm-dash-card:nth-child(3n + 1) .crm-card-inner { background: rgba(11, 99, 206, .08) !important; border-color: color-mix(in srgb, var(--if-blue) 14%, transparent); }
body .crm-dash-card:nth-child(3n + 1) .crm-card-inner .crm-icon svg path { fill: var(--if-blue) !important; }
body .crm-dash-card:nth-child(3n + 1) .crm-card-inner :is(h3, h4, h5, .h4, a.dashboard-link) { color: var(--if-text) !important; }
body .crm-dash-card:nth-child(3n + 2) .crm-card-inner { background: rgba(255, 106, 19, .09) !important; border-color: color-mix(in srgb, var(--if-orange) 14%, transparent); }
body .crm-dash-card:nth-child(3n + 2) .crm-card-inner .crm-icon svg path { fill: var(--if-orange) !important; }
body .crm-dash-card:nth-child(3n + 2) .crm-card-inner :is(h3, h4, h5, .h4, a.dashboard-link) { color: var(--if-text) !important; }
body .crm-dash-card:nth-child(3n + 3) .crm-card-inner { background: rgba(13, 58, 126, .07) !important; border-color: color-mix(in srgb, var(--if-navy) 14%, transparent); }
body .crm-dash-card:nth-child(3n + 3) .crm-card-inner .crm-icon svg path { fill: var(--if-navy) !important; }
body .crm-dash-card:nth-child(3n + 3) .crm-card-inner :is(h3, h4, h5, .h4, a.dashboard-link) { color: var(--if-text) !important; }
body .project-dash-card:nth-child(3n + 1) .project-card-inner { background: rgba(11, 99, 206, .08) !important; border-color: color-mix(in srgb, var(--if-blue) 14%, transparent); }
body .project-dash-card:nth-child(3n + 1) .project-card-inner .project-icon svg path { fill: var(--if-blue) !important; }
body .project-dash-card:nth-child(3n + 1) .project-card-inner :is(h3, h4, h5, .h4, a.dashboard-link) { color: var(--if-text) !important; }
body .project-dash-card:nth-child(3n + 2) .project-card-inner { background: rgba(255, 106, 19, .09) !important; border-color: color-mix(in srgb, var(--if-orange) 14%, transparent); }
body .project-dash-card:nth-child(3n + 2) .project-card-inner .project-icon svg path { fill: var(--if-orange) !important; }
body .project-dash-card:nth-child(3n + 2) .project-card-inner :is(h3, h4, h5, .h4, a.dashboard-link) { color: var(--if-text) !important; }
body .project-dash-card:nth-child(3n + 3) .project-card-inner { background: rgba(13, 58, 126, .07) !important; border-color: color-mix(in srgb, var(--if-navy) 14%, transparent); }
body .project-dash-card:nth-child(3n + 3) .project-card-inner .project-icon svg path { fill: var(--if-navy) !important; }
body .project-dash-card:nth-child(3n + 3) .project-card-inner :is(h3, h4, h5, .h4, a.dashboard-link) { color: var(--if-text) !important; }
body .warehouse-card:nth-child(3n + 1) .warehouse-card-inner { background: rgba(11, 99, 206, .08) !important; border-color: color-mix(in srgb, var(--if-blue) 14%, transparent); }
body .warehouse-card:nth-child(3n + 1) .warehouse-card-inner .warehouse-icon svg path { fill: var(--if-blue) !important; }
body .warehouse-card:nth-child(3n + 1) .warehouse-card-inner :is(h3, h4, h5, .h4, a.dashboard-link) { color: var(--if-text) !important; }
body .warehouse-card:nth-child(3n + 2) .warehouse-card-inner { background: rgba(255, 106, 19, .09) !important; border-color: color-mix(in srgb, var(--if-orange) 14%, transparent); }
body .warehouse-card:nth-child(3n + 2) .warehouse-card-inner .warehouse-icon svg path { fill: var(--if-orange) !important; }
body .warehouse-card:nth-child(3n + 2) .warehouse-card-inner :is(h3, h4, h5, .h4, a.dashboard-link) { color: var(--if-text) !important; }
body .warehouse-card:nth-child(3n + 3) .warehouse-card-inner { background: rgba(13, 58, 126, .07) !important; border-color: color-mix(in srgb, var(--if-navy) 14%, transparent); }
body .warehouse-card:nth-child(3n + 3) .warehouse-card-inner .warehouse-icon svg path { fill: var(--if-navy) !important; }
body .warehouse-card:nth-child(3n + 3) .warehouse-card-inner :is(h3, h4, h5, .h4, a.dashboard-link) { color: var(--if-text) !important; }
body .staff-info-card:nth-child(4n + 1) .staff-info-inner { background: rgba(11, 99, 206, .08) !important; border-color: color-mix(in srgb, var(--if-blue) 14%, transparent); }
body .staff-info-card:nth-child(4n + 1) .staff-info-inner .staff-info-icon svg path { fill: var(--if-blue) !important; }
body .staff-info-card:nth-child(4n + 1) .staff-info-inner :is(h3, h4, h5, .h4, a.dashboard-link) { color: var(--if-text) !important; }
body .staff-info-card:nth-child(4n + 2) .staff-info-inner { background: rgba(255, 106, 19, .09) !important; border-color: color-mix(in srgb, var(--if-orange) 14%, transparent); }
body .staff-info-card:nth-child(4n + 2) .staff-info-inner .staff-info-icon svg path { fill: var(--if-orange) !important; }
body .staff-info-card:nth-child(4n + 2) .staff-info-inner :is(h3, h4, h5, .h4, a.dashboard-link) { color: var(--if-text) !important; }
body .staff-info-card:nth-child(4n + 3) .staff-info-inner { background: rgba(13, 58, 126, .07) !important; border-color: color-mix(in srgb, var(--if-navy) 14%, transparent); }
body .staff-info-card:nth-child(4n + 3) .staff-info-inner .staff-info-icon svg path { fill: var(--if-navy) !important; }
body .staff-info-card:nth-child(4n + 3) .staff-info-inner :is(h3, h4, h5, .h4, a.dashboard-link) { color: var(--if-text) !important; }
body .staff-info-card:nth-child(4n + 4) .staff-info-inner { background: rgba(18, 164, 107, .09) !important; border-color: color-mix(in srgb, #12a46b 14%, transparent); }
body .staff-info-card:nth-child(4n + 4) .staff-info-inner .staff-info-icon svg path { fill: #12a46b !important; }
body .staff-info-card:nth-child(4n + 4) .staff-info-inner :is(h3, h4, h5, .h4, a.dashboard-link) { color: var(--if-text) !important; }
body .leave-card:nth-child(4n + 1) .leave-card-inner { background: rgba(11, 99, 206, .08) !important; border-color: color-mix(in srgb, var(--if-blue) 14%, transparent); }
body .leave-card:nth-child(4n + 1) .leave-card-inner .leave-icon svg path { fill: var(--if-blue) !important; }
body .leave-card:nth-child(4n + 1) .leave-card-inner :is(h3, h4, h5, .h4, a.dashboard-link) { color: var(--if-text) !important; }
body .leave-card:nth-child(4n + 2) .leave-card-inner { background: rgba(255, 106, 19, .09) !important; border-color: color-mix(in srgb, var(--if-orange) 14%, transparent); }
body .leave-card:nth-child(4n + 2) .leave-card-inner .leave-icon svg path { fill: var(--if-orange) !important; }
body .leave-card:nth-child(4n + 2) .leave-card-inner :is(h3, h4, h5, .h4, a.dashboard-link) { color: var(--if-text) !important; }
body .leave-card:nth-child(4n + 3) .leave-card-inner { background: rgba(13, 58, 126, .07) !important; border-color: color-mix(in srgb, var(--if-navy) 14%, transparent); }
body .leave-card:nth-child(4n + 3) .leave-card-inner .leave-icon svg path { fill: var(--if-navy) !important; }
body .leave-card:nth-child(4n + 3) .leave-card-inner :is(h3, h4, h5, .h4, a.dashboard-link) { color: var(--if-text) !important; }
body .leave-card:nth-child(4n + 4) .leave-card-inner { background: rgba(18, 164, 107, .09) !important; border-color: color-mix(in srgb, #12a46b 14%, transparent); }
body .leave-card:nth-child(4n + 4) .leave-card-inner .leave-icon svg path { fill: #12a46b !important; }
body .leave-card:nth-child(4n + 4) .leave-card-inner :is(h3, h4, h5, .h4, a.dashboard-link) { color: var(--if-text) !important; }

:is(.crm-dash-card, .project-dash-card) .bottom-svg { opacity: .35 !important; }
body :is(.crm-dash-card, .project-dash-card):nth-child(3n + 1) .bottom-svg :is(path, rect) { fill: var(--if-blue) !important; }
body :is(.crm-dash-card, .project-dash-card):nth-child(3n + 2) .bottom-svg :is(path, rect) { fill: var(--if-orange) !important; }
body :is(.crm-dash-card, .project-dash-card):nth-child(3n + 3) .bottom-svg :is(path, rect) { fill: var(--if-navy) !important; }

/* Generic icon chips used across dashboards & lists */
.theme-avtar {
    border-radius: 12px !important;
}

/* ---------- 8. Buttons ---------- */
.btn {
    font-family: var(--if-font);
    font-weight: 600;
    border-radius: 10px;
    letter-spacing: 0;
    transition: background .15s ease, box-shadow .15s ease, transform .1s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus, .btn:focus-visible { box-shadow: 0 0 0 4px var(--if-primary-ring) !important; }
.btn-sm { border-radius: 9px; }
.btn-lg { border-radius: 12px; }

body[class] .btn-primary, .btn-primary {
    background: var(--if-primary-grad) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--if-primary) 90%, transparent);
}
body[class] .btn-primary:hover, .btn-primary:hover {
    background: var(--if-primary) !important;
    filter: brightness(1.05);
}
body[class] .btn-outline-primary, .btn-outline-primary {
    color: var(--if-primary) !important;
    border-color: color-mix(in srgb, var(--if-primary) 55%, #fff) !important;
    background: transparent !important;
}
body[class] .btn-outline-primary:hover, .btn-outline-primary:hover,
body[class] .btn-outline-primary.active, .btn-check:checked + .btn-outline-primary {
    background: var(--if-primary) !important;
    border-color: var(--if-primary) !important;
    color: #fff !important;
}
body[class] .btn-light-primary, .btn-light-primary {
    background: var(--if-primary-soft) !important;
    color: var(--if-primary) !important;
    border-color: transparent !important;
}
body[class] .btn-light-primary:hover, .btn-light-primary:hover { background: var(--if-primary) !important; color: #fff !important; }
.btn-secondary, .btn-light, .btn-light-secondary {
    background: var(--if-surface) !important;
    border: 1px solid var(--if-border-strong) !important;
    color: var(--if-text-2) !important;
}
.btn-secondary:hover, .btn-light:hover, .btn-light-secondary:hover { background: var(--if-surface-2) !important; color: var(--if-text) !important; }
.btn-warning, .btn-orange { background: var(--if-accent-grad) !important; border-color: transparent !important; color: #fff !important; }
.btn-danger { background: var(--if-danger) !important; border-color: var(--if-danger) !important; }
.btn-success { background: var(--if-success) !important; border-color: var(--if-success) !important; }
.btn-info { background: var(--if-info) !important; border-color: var(--if-info) !important; color: #fff !important; }
.btn-dark { background: var(--if-navy-900) !important; border-color: var(--if-navy-900) !important; }

/* Row action icon buttons */
.action-btn { border-radius: 9px !important; width: 32px; height: 32px; }
.action-btn .btn, .action-btn > a { border-radius: 9px !important; }
.action-btn.bg-info, .action-btn.bg-primary { background: var(--if-blue) !important; }
.action-btn.bg-warning { background: var(--if-amber) !important; }
.action-btn.bg-danger { background: var(--if-danger) !important; }
.action-btn.bg-success { background: var(--if-success) !important; }
.action-btn.bg-dark, .action-btn.bg-secondary { background: var(--if-navy) !important; }
.action-btn:hover { filter: brightness(1.06); box-shadow: 0 6px 14px -8px rgba(13, 38, 76, .45); }

/* ---------- 9. Forms ---------- */
.form-label, label.form-label, .col-form-label {
    font-weight: 600 !important;
    font-size: 13px;
    color: var(--if-text) !important;
    margin-bottom: 6px;
}
.form-control, .form-select, .custom-select, .dataTable-input, .dataTable-selector, .select2-container--default .select2-selection--single, .choices__inner {
    font-family: var(--if-font);
    border: 1px solid var(--if-border-strong) !important;
    border-radius: 10px !important;
    background-color: var(--if-surface);
    color: var(--if-text);
    font-size: 14px;
    min-height: 42px;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
textarea.form-control { min-height: 84px; }
.form-control-sm, .form-select-sm { min-height: 34px; border-radius: 8px !important; }
.form-control::placeholder { color: #9aa7bb; }
.form-control:focus, .form-select:focus, .dataTable-input:focus, .dataTable-selector:focus, .choices.is-focused .choices__inner, .choices.is-open .choices__inner {
    border-color: var(--if-primary) !important;
    box-shadow: 0 0 0 4px var(--if-primary-ring) !important;
    outline: 0;
}
.form-control:disabled, .form-control[readonly] { background-color: var(--if-surface-2); }
.input-group-text { border-radius: 10px; background: var(--if-surface-2); border-color: var(--if-border-strong); color: var(--if-muted); }
.input-group > .form-control:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group > .form-control:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.form-check-input { border-color: #b9c6d8; }
.form-check-input:checked,
body[class] .form-check-input:checked { background-color: var(--if-primary) !important; border-color: var(--if-primary) !important; }
.form-check-input:focus { box-shadow: 0 0 0 4px var(--if-primary-ring) !important; border-color: var(--if-primary); }
.form-switch .form-check-input { height: 1.25em; width: 2.3em; }
.choices__list--multiple .choices__item, .choices__list--multiple .choices__item.is-highlighted {
    background: var(--if-primary-soft) !important;
    border: 1px solid var(--if-primary-soft-2) !important;
    color: var(--if-primary) !important;
    border-radius: 8px !important;
    font-weight: 600;
}
.choices__list--dropdown, .choices__list[aria-expanded] { border-radius: 12px !important; border-color: var(--if-border) !important; box-shadow: var(--if-shadow); }
.choices__list--dropdown .choices__item--selectable.is-highlighted { background: var(--if-primary-soft) !important; }
.invalid-feedback, .text-danger { color: var(--if-danger) !important; }

/* ---------- 10. Tables & data tables ---------- */
.table { color: var(--if-text-2); border-color: var(--if-border); margin-bottom: 0; }
.table thead th, .table > thead > tr > th, .dataTable-table > thead > tr > th {
    background: var(--if-surface-2) !important;
    color: var(--if-muted) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-top: 1px solid var(--if-border) !important;
    border-bottom: 1px solid var(--if-border) !important;
    padding-top: 13px !important; padding-bottom: 13px !important;
    white-space: nowrap;
    vertical-align: middle;
}
.table td, .table > tbody > tr > td {
    border-color: var(--if-border) !important;
    padding-top: 13px; padding-bottom: 13px;
    vertical-align: middle;
    font-size: 13.5px;
}
.table tbody tr { transition: background .12s ease; }
.table-hover tbody tr:hover, .table tbody tr:hover { background: color-mix(in srgb, var(--if-primary) 4%, #fff); }
.table-hover tbody tr:hover > * { --bs-table-accent-bg: transparent; }
.table a:not(.btn):not(.dropdown-item) { font-weight: 600; }
.table-responsive { -webkit-overflow-scrolling: touch; }
.dataTable-top, .dataTable-bottom { padding: 16px 22px !important; }
.dataTable-dropdown label, .dataTable-info { color: var(--if-muted); font-size: 13px; }
.dataTable-sorter::before { border-top-color: #b6c2d3 !important; }
.dataTable-sorter::after { border-bottom-color: #b6c2d3 !important; }
.dataTable-pagination .dataTable-pagination-list a,
.dataTable-pagination a {
    border-radius: 9px !important;
    border: 1px solid var(--if-border) !important;
    color: var(--if-text-2) !important;
    min-width: 34px; height: 34px;
    font-weight: 600;
}
.dataTable-pagination li.active a,
.dataTable-pagination li a:hover {
    background: var(--if-primary) !important;
    border-color: var(--if-primary) !important;
    color: #fff !important;
}
.dataTable-empty { color: var(--if-muted); padding: 34px 0 !important; }
.page-link { border-radius: 9px !important; margin: 0 3px; border-color: var(--if-border); color: var(--if-text-2); }
.page-item.active .page-link { background: var(--if-primary); border-color: var(--if-primary); }

/* ---------- 11. Badges, alerts, progress ---------- */
.badge { font-weight: 600; letter-spacing: .01em; border-radius: 8px; padding: .45em .75em; }
body[class] .badge.bg-primary, .badge.bg-primary { background: var(--if-primary-soft) !important; color: var(--if-primary) !important; }
body[class] .badge.bg-success, .badge.bg-success { background: #e3f6ee !important; color: #0b7d50 !important; }
body[class] .badge.bg-danger, .badge.bg-danger { background: #fdeaea !important; color: #c22f34 !important; }
body[class] .badge.bg-warning, .badge.bg-warning { background: #fff3dc !important; color: #a8640a !important; }
body[class] .badge.bg-info, .badge.bg-info { background: #e1f5fc !important; color: #0679a3 !important; }
.badge.bg-secondary, .badge.bg-dark { background: #e9eef5 !important; color: var(--if-text-2) !important; }
.badge.status_badge, .status_badge { min-width: 92px; }
.alert { border-radius: var(--if-radius); border-width: 1px; }
.alert-primary { background: var(--if-primary-soft); border-color: var(--if-primary-soft-2); color: var(--if-navy); }
.progress { background: #e8eef6; border-radius: 10px; }
.progress-bar.bg-primary { background: var(--if-primary-grad) !important; }

/* ---------- 12. Navs, tabs, list groups (settings side nav) ---------- */
.nav-pills .nav-link { border-radius: 10px; font-weight: 600; color: var(--if-text-2); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link,
body[class] .nav-pills .nav-link.active {
    background: var(--if-primary-grad) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--if-primary) 90%, transparent);
}
.nav-tabs { border-bottom-color: var(--if-border); }
.nav-tabs .nav-link { font-weight: 600; color: var(--if-muted); border: 0; border-bottom: 2px solid transparent; }
.nav-tabs .nav-link.active { color: var(--if-primary); border-bottom-color: var(--if-primary); background: transparent; }
.list-group { border-radius: var(--if-radius-lg); }
.list-group-item { border-color: var(--if-border); color: var(--if-text-2); font-weight: 500; }
.list-group-item-action:hover { background: var(--if-surface-2); color: var(--if-text); }
.list-group-item.active,
body[class] .list-group-item.active {
    background: var(--if-primary-soft) !important;
    border-color: var(--if-border) !important;
    color: var(--if-primary) !important;
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--if-primary);
}
[dir="rtl"] .list-group-item.active { box-shadow: inset -3px 0 0 var(--if-primary); }
#useradd-sidenav, .sticky-top .list-group { box-shadow: var(--if-shadow-sm); }

/* ---------- 13. Modals, toasts, popovers ---------- */
.modal-content {
    border: 0 !important;
    border-radius: 20px !important;
    box-shadow: 0 30px 70px -20px rgba(6, 21, 49, .45) !important;
    overflow: hidden;
}
.modal-header {
    padding: 18px 24px !important;
    border-bottom: 1px solid var(--if-border) !important;
    background: linear-gradient(180deg, var(--if-surface-2), var(--if-surface));
}
.modal-header .modal-title { font-weight: 800; font-size: 17px; color: var(--if-text); letter-spacing: -0.01em; }
.modal-body { padding: 22px 24px; }
.modal-footer { border-top: 1px solid var(--if-border) !important; padding: 14px 24px; background: var(--if-surface-2); }
.modal-backdrop.show { opacity: .55; background: var(--if-navy-950); }
.btn-close { border-radius: 8px; opacity: .55; }
.btn-close:hover { opacity: .9; }
.toast { border-radius: 14px !important; box-shadow: var(--if-shadow) !important; }
.swal2-popup { border-radius: 20px !important; font-family: var(--if-font) !important; }
.swal2-styled.swal2-confirm { background: var(--if-primary) !important; border-radius: 10px !important; }
.swal2-styled.swal2-cancel { border-radius: 10px !important; }

/* ---------- 14. Footer ---------- */
.dash-footer, footer.dash-footer {
    background: transparent !important;
    border-top: 1px solid var(--if-border);
    color: var(--if-muted);
    font-size: 12.5px;
}
.dash-footer .footer-wrapper span, .dash-footer .footer-wrapper p { color: var(--if-muted) !important; }

/* ---------- 15. Misc components ---------- */
.avatar, .user-group img, .wid-40 { border-radius: 10px; }
.user-group img { border: 2px solid #fff; }
.apexcharts-tooltip, .apexcharts-xaxistooltip { border-radius: 10px !important; box-shadow: var(--if-shadow) !important; border-color: var(--if-border) !important; font-family: var(--if-font) !important; }
.apexcharts-text, .apexcharts-legend-text { font-family: var(--if-font) !important; }
.fc .fc-button-primary { background: var(--if-primary) !important; border-color: var(--if-primary) !important; border-radius: 9px !important; text-transform: capitalize; }
.fc .fc-toolbar-title { font-weight: 800; color: var(--if-text); }
.fc .fc-daygrid-day.fc-day-today { background: var(--if-primary-soft) !important; }
.note-editor.note-frame, .ql-container, .ql-toolbar { border-color: var(--if-border-strong) !important; border-radius: 10px; }
.kanban-wrapper .card, .kanban-box .card { border-radius: 14px !important; }
.pct-customizer .pct-c-btn .btn { background: var(--if-primary-grad) !important; }

/* POS screen top bar */
.pos-top-bar, .pos-top-bar.bg-color, body[class] .pos-top-bar.bg-primary {
    background: var(--if-brand-grad) !important;
    border-radius: 14px !important;
    padding: 14px 18px !important;
    box-shadow: 0 14px 30px -20px rgba(8, 32, 74, .8);
}
.pos-top-bar span { font-weight: 800; letter-spacing: .02em; }

/* Pricing / plan cards */
.price-card .price-badge, .plan_card .price-badge { background: var(--if-accent-grad) !important; color: #fff; border-radius: 8px; }
.price-card.price-2 { background: var(--if-brand-grad) !important; }

/* Cookie consent */
#cm, #s-cnt #s-bl, #s-inr { font-family: var(--if-font) !important; border-radius: 18px !important; }
#cm .c-bn, #s-bns .c-bn { border-radius: 10px !important; font-weight: 700 !important; }
#c-p-bn, #s-all-bn, #s-sv-bn { background: var(--if-navy) !important; color: #fff !important; }
#c-p-bn:hover, #s-all-bn:hover, #s-sv-bn:hover { background: var(--if-blue) !important; }
#c-s-bn, #s-rall-bn { background: var(--if-surface-2) !important; color: var(--if-text) !important; }

/* ---------- 16. Responsive ---------- */
@media (max-width: 1024px) {
    .dash-sidebar,
    .dash-sidebar.light-sidebar {
        width: 280px;
        box-shadow: none !important;
        border-radius: 0;
    }
    .dash-sidebar { left: -290px; }
    [dir="rtl"] .dash-sidebar { left: auto; right: -290px; }
    .dash-sidebar.mob-sidebar-active { left: 0; box-shadow: 0 30px 70px rgba(6, 21, 49, .35) !important; }
    [dir="rtl"] .dash-sidebar.mob-sidebar-active { right: 0; left: auto; }
    .dash-sidebar.mob-sidebar-active .navbar-wrapper { background: var(--if-surface) !important; }
    .dash-menu-overlay, .dash-sidebar .dash-menu-overlay { background: rgba(6, 21, 49, .45) !important; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
    .dash-header { position: fixed; top: 0; }
    .dash-sidebar, .dash-sidebar.light-sidebar { top: 72px; }
    .dash-container { top: 72px; min-height: calc(100vh - 72px); }
}
@media (max-width: 767.98px) {
    body { font-size: 13.5px; }
    .dash-container .dash-content { padding: 14px 14px 0 !important; }
    .dash-header .header-wrapper { padding: 0 10px !important; }
    .dash-header .dash-head-link { margin: 0 2px !important; padding: 4px 9px !important; min-height: 40px; }
    .dash-header .drp-company .dash-head-link { padding: 3px !important; }
    .page-header { padding: 18px 18px !important; margin-bottom: 16px !important; border-radius: 16px; }
    .page-header::before { width: 150px; height: 74px; opacity: .8; }
    .page-header h4 { font-size: 19px !important; }
    .page-header .page-block > .d-flex { flex-direction: column; align-items: flex-start !important; }
    .page-header .action-btn-col, .page-header .float-end { width: 100%; justify-content: flex-start; float: none !important; }
    .card { border-radius: 16px !important; margin-bottom: 16px; }
    .card .card-header { padding: 14px 16px !important; }
    .card .card-body { padding: 16px; }
    .dataTable-top, .dataTable-bottom { padding: 12px 14px !important; display: flex; flex-wrap: wrap; gap: 10px; }
    .dataTable-top > div, .dataTable-bottom > div { float: none !important; }
    .dataTable-search { width: 100%; }
    .dataTable-search .dataTable-input { width: 100% !important; }
    .dataTable-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table td, .table th { white-space: nowrap; }
    .modal-dialog { margin: 10px; }
    .modal-content { border-radius: 18px !important; }
    .modal-body { padding: 16px; }
    .dash-info-card .info-card-inner { min-height: 116px; }
    .dropdown-menu { max-width: calc(100vw - 20px); }
    .row > [class*="col-"] > .card { margin-bottom: 16px; }
}
@media (max-width: 420px) {
    .dash-header .drp-language .drp-text { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation-duration: .01ms !important; }
}