/**
 * Custom UI Enhancement & System Font Override
 * KLOCKNOW BPC Web
 */

/* ==========================================================================
   1. Inter & Hanuman (Khmer) Font Integration
   ========================================================================== */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../assets/fonts/custom/Inter/Inter-VariableFont_opsz,wght.ttf') format('truetype-variations'),
        url('/assets/fonts/custom/Inter/Inter-VariableFont_opsz,wght.ttf') format('truetype');
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('../assets/fonts/custom/Inter/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype-variations'),
        url('/assets/fonts/custom/Inter/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
}

/* Hanuman (Primary default font for Khmer locale) */
@font-face {
    font-family: 'Hanuman';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../assets/fonts/custom/Hanuman/Hanuman-VariableFont_wght.ttf') format('truetype-variations'),
        url('/assets/fonts/custom/Hanuman/Hanuman-VariableFont_wght.ttf') format('truetype');
}

@font-face {
    font-family: 'Hanuman';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../assets/fonts/custom/Hanuman/static/Hanuman-Light.ttf') format('truetype'),
        url('/assets/fonts/custom/Hanuman/static/Hanuman-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Hanuman';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../assets/fonts/custom/Hanuman/static/Hanuman-Regular.ttf') format('truetype'),
        url('/assets/fonts/custom/Hanuman/static/Hanuman-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Hanuman';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../assets/fonts/custom/Hanuman/static/Hanuman-Medium.ttf') format('truetype'),
        url('/assets/fonts/custom/Hanuman/static/Hanuman-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Hanuman';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../assets/fonts/custom/Hanuman/static/Hanuman-SemiBold.ttf') format('truetype'),
        url('/assets/fonts/custom/Hanuman/static/Hanuman-SemiBold.ttf') format('truetype');
}

@font-face {
    font-family: 'Hanuman';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../assets/fonts/custom/Hanuman/static/Hanuman-Bold.ttf') format('truetype'),
        url('/assets/fonts/custom/Hanuman/static/Hanuman-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Hanuman';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('../assets/fonts/custom/Hanuman/static/Hanuman-Black.ttf') format('truetype'),
        url('/assets/fonts/custom/Hanuman/static/Hanuman-Black.ttf') format('truetype');
}

/* Noto Sans Khmer (Registered as secondary/alternative font) */
@font-face {
    font-family: 'Noto Sans Khmer';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../assets/fonts/custom/Noto_Sans_Khmer/NotoSansKhmer-VariableFont_wdth,wght.ttf') format('truetype-variations'),
        url('/assets/fonts/custom/Noto_Sans_Khmer/NotoSansKhmer-VariableFont_wdth,wght.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Sans Khmer';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../assets/fonts/custom/Noto_Sans_Khmer/static/NotoSansKhmer-Regular.ttf') format('truetype'),
        url('/assets/fonts/custom/Noto_Sans_Khmer/static/NotoSansKhmer-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Sans Khmer';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../assets/fonts/custom/Noto_Sans_Khmer/static/NotoSansKhmer-Medium.ttf') format('truetype'),
        url('/assets/fonts/custom/Noto_Sans_Khmer/static/NotoSansKhmer-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Sans Khmer';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../assets/fonts/custom/Noto_Sans_Khmer/static/NotoSansKhmer-SemiBold.ttf') format('truetype'),
        url('/assets/fonts/custom/Noto_Sans_Khmer/static/NotoSansKhmer-SemiBold.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Sans Khmer';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../assets/fonts/custom/Noto_Sans_Khmer/static/NotoSansKhmer-Bold.ttf') format('truetype'),
        url('/assets/fonts/custom/Noto_Sans_Khmer/static/NotoSansKhmer-Bold.ttf') format('truetype');
}

/* Default English System Text Font
   Applies to html, body, text elements, and native form elements.
   Uses standard specificity (no !important) so icon fonts and custom font features
   are NEVER clobbered. */
html,
body,
p,
span:not([class*="icon"]):not([class*="fa"]):not([class*="mdi"]):not([class*="zmdi"]):not([class*="ti-"]):not([class*="glyphicon"]):not([class*="font-kh"]),
h1,
h2,
h3,
h4,
h5,
h6,
input,
button,
select,
textarea,
table,
th,
td,
label,
.table,
.btn,
.form-control,
.card,
.modal,
.breadcrumb,
.dropdown-menu,
.sidebar-nav {
    font-family: 'Inter', 'Hanuman', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

pre {
    font-family: 'Inter', 'Hanuman', sans-serif !important;
}

/* Default Khmer System Text Font (When language switched to Khmer 'km')
   Uses 'Inter' first for Latin/Numbers, falling back to 'Hanuman' for Khmer characters.
   Strictly exempts ID Card and Contract Document elements. */
html[lang="km"],
html[lang="km"] body,
html[lang="km"] p:not(.id-card *):not(.contract-page *):not(.contract-doc *):not(.page-container *),
html[lang="km"] span:not([class*="icon"]):not([class*="fa"]):not([class*="mdi"]):not([class*="zmdi"]):not([class*="ti-"]):not([class*="glyphicon"]):not([class*="font-kh"]):not(.id-card *):not(.contract-page *):not(.contract-doc *):not(.page-container *),
html[lang="km"] h1:not(.id-card *):not(.contract-page *):not(.contract-doc *):not(.page-container *),
html[lang="km"] h2:not(.id-card *):not(.contract-page *):not(.contract-doc *):not(.page-container *),
html[lang="km"] h3:not(.id-card *):not(.contract-page *):not(.contract-doc *):not(.page-container *),
html[lang="km"] h4:not(.id-card *):not(.contract-page *):not(.contract-doc *):not(.page-container *),
html[lang="km"] h5:not(.id-card *):not(.contract-page *):not(.contract-doc *):not(.page-container *),
html[lang="km"] h6:not(.id-card *):not(.contract-page *):not(.contract-doc *):not(.page-container *),
html[lang="km"] input:not(.id-card *):not(.contract-page *):not(.contract-doc *):not(.page-container *),
html[lang="km"] button:not(.id-card *):not(.contract-page *):not(.contract-doc *):not(.page-container *),
html[lang="km"] select:not(.id-card *):not(.contract-page *):not(.contract-doc *):not(.page-container *),
html[lang="km"] textarea:not(.id-card *):not(.contract-page *):not(.contract-doc *):not(.page-container *),
html[lang="km"] table:not(.id-card *):not(.contract-page *):not(.contract-doc *):not(.page-container *),
html[lang="km"] th:not(.id-card *):not(.contract-page *):not(.contract-doc *):not(.page-container *),
html[lang="km"] td:not(.id-card *):not(.contract-page *):not(.contract-doc *):not(.page-container *),
html[lang="km"] label:not(.id-card *):not(.contract-page *):not(.contract-doc *):not(.page-container *),
html[lang="km"] .table:not(.id-card *):not(.contract-page *):not(.contract-doc *):not(.page-container *),
html[lang="km"] .btn:not(.id-card *):not(.contract-page *):not(.contract-doc *):not(.page-container *),
html[lang="km"] .form-control:not(.id-card *):not(.contract-page *):not(.contract-doc *):not(.page-container *),
html[lang="km"] .card:not(.id-card):not(.contract-page *):not(.contract-doc *):not(.page-container *),
html[lang="km"] .modal:not(.id-card *):not(.contract-page *):not(.contract-doc *):not(.page-container *),
html[lang="km"] .breadcrumb:not(.id-card *):not(.contract-page *):not(.contract-doc *):not(.page-container *),
html[lang="km"] .dropdown-menu:not(.id-card *):not(.contract-page *):not(.contract-doc *):not(.page-container *),
html[lang="km"] .sidebar-nav:not(.id-card *):not(.contract-page *):not(.contract-doc *):not(.page-container *) {
    font-family: 'Inter', 'Hanuman', 'Noto Sans Khmer', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html[lang="km"] pre {
    font-family: 'Inter', 'Hanuman', 'Noto Sans Khmer', sans-serif !important;
}

/* Welcome page Time & Date Khmer font support */
html[lang="km"] .clock,
html[lang="km"] .clock-text,
html[lang="km"] #clock,
html[lang="km"] #indicator,
html[lang="km"] .clock-date {
    font-family: 'Inter', 'Hanuman', sans-serif !important;
}

/* Language Switcher Dropdown & Option Fonts */
.topbar .nav-item.dropdown a.dropdown-toggle.lang-khmer-font,
.topbar .nav-item.dropdown a.dropdown-toggle.lang-khmer-font *,
.topbar .nav-item.dropdown .dropdown-menu .dropdown-item.lang-khmer-font,
.topbar .nav-item.dropdown .dropdown-menu .dropdown-item[href*="lang=km"],
.topbar .nav-item.dropdown .dropdown-menu .dropdown-item.lang-khmer-font *,
.topbar .nav-item.dropdown .dropdown-menu .dropdown-item[href*="lang=km"] *,
.language-icon .lang-khmer-font,
.language-icon a[href*="lang=km"] span,
.lang-khmer-font {
    font-family: 'Hanuman', sans-serif !important;
}

.topbar .nav-item.dropdown .dropdown-menu .dropdown-item {
    font-size: 13px !important;
    line-height: 1.6 !important;
    display: flex !important;
    align-items: center !important;
}

.topbar .nav-item.dropdown .dropdown-menu .dropdown-item .flag-icon {
    margin-right: 8px !important;
    flex-shrink: 0 !important;
}

/* Header menu links, buttons, and dropdown elements when in Khmer locale */
html[lang="km"] .topbar a:not([class*="icon"]):not([class*="fa"]):not([class*="mdi"]):not([class*="zmdi"]):not([class*="ti-"]):not([class*="flag-icon"]),
html[lang="km"] .topbar span:not([class*="icon"]):not([class*="fa"]):not([class*="mdi"]):not([class*="zmdi"]):not([class*="ti-"]):not([class*="flag-icon"]),
html[lang="km"] .topbar .dropdown-toggle,
html[lang="km"] .topbar .dropdown-menu,
html[lang="km"] .topbar .dropdown-item,
html[lang="km"] .topbar .dropdown-user li a {
    font-family: 'Inter', 'Hanuman', 'Noto Sans Khmer', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* ==========================================================================
   Dual-Language Font Detection: English is 'Inter', Khmer is 'Hanuman'
   ========================================================================== */
.font-khmer,
[class*="font-khmer"] {
    font-family: 'Hanuman', sans-serif !important;
}

.font-english,
[class*="font-english"] {
    font-family: 'Inter', sans-serif !important;
}

.font-auto-kh-en {
    font-family: 'Inter', 'Hanuman', sans-serif !important;
}

/* ==========================================================================
   Payroll KH Module Scope: Dual Font Detection
   Applies Inter for English/Numbers and Hanuman for Khmer across all payroll views
   ========================================================================== */
.payroll-info-wrapper,
.payroll-info-wrapper *,
.payroll-payslip-wrapper,
.payroll-payslip-wrapper *,
.payroll-a4-printing,
.payroll-a4-printing *,
.pk-table-container,
.pk-table,
.pk-table th,
.pk-table td,
.page:not(.contract-page),
.page:not(.contract-page) *,
.subpage,
.subpage *,
.payroll-table,
.payroll-table th,
.payroll-table td,
table.table-payroll,
table.table-payroll th,
table.table-payroll td,
table.table-payroll *,
.payslip-container,
.payslip-container * {
    font-family: 'Inter', 'Hanuman', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* ==========================================================================
   Icon Fonts & Custom Fonts Protection (Strictly Preserved with !important)
   ========================================================================== */

/* Icomoon & .icon fonts */
.icon,
.icomoon,
[class^="icon-"],
[class*=" icon-"],
[class^="icomoon-"],
[class*=" icomoon-"],
.icon:before,
.icomoon:before,
[class^="icon-"]:before,
[class*=" icon-"]:before {
    font-family: 'icomoon' !important;
}

/* Material Design Icons (.mdi, .mdi-*) */
.mdi,
.mdi-set,
[class^="mdi-"],
[class*=" mdi-"],
.mdi:before,
.mdi:after,
[class^="mdi-"]:before,
[class*=" mdi-"]:before {
    font-family: "Material Design Icons" !important;
}

/* Material Design Iconic Font (.zmdi, .zmdi-*) */
.zmdi,
.zmdi-hc,
[class^="zmdi-"],
[class*=" zmdi-"],
.zmdi:before,
.zmdi:after,
[class^="zmdi-"]:before,
[class*=" zmdi-"]:before {
    font-family: 'Material-Design-Iconic-Font' !important;
}

/* Google Material Icons */
.material-icons,
[class^="material-icons"],
[class*=" material-icons"],
.material-icons:before {
    font-family: 'Material Icons' !important;
}

/* FontAwesome */
.fa,
.fas,
.far,
.fal,
.fab,
[class^="fa-"],
[class*=" fa-"],
.fa:before,
[class^="fa-"]:before,
[class*=" fa-"]:before {
    font-family: 'FontAwesome' !important;
}

/* Bootstrap Glyphicons */
.glyphicon,
[class^="glyphicon-"],
[class*=" glyphicon-"],
.glyphicon:before,
[class^="glyphicon-"]:before,
[class*=" glyphicon-"]:before {
    font-family: 'Glyphicons Halflings' !important;
}

/* Themify Icons */
.themify-icons,
[class^="ti-"],
[class*=" ti-"],
[class^="ti-"]:before,
[class*=" ti-"]:before {
    font-family: 'themify' !important;
}

/* Simple Line Icons */
.simple-line-icons,
.simple-line-icons:before {
    font-family: 'simple-line-icons' !important;
}

/* Linea Icons */
.linea-icon,
[class^="linea-icon-"],
[class*=" linea-icon-"],
[class^="linea-icon-"]:before,
[class*=" linea-icon-"]:before {
    font-family: 'linea-icons' !important;
}

/* Weather Icons */
.wi,
[class^="wi-"],
[class*=" wi-"],
.wi:before,
[class^="wi-"]:before,
[class*=" wi-"]:before {
    font-family: 'weathericons' !important;
}

/* Flag Icons */
.flag-icon,
[class^="flag-icon-"],
[class*=" flag-icon-"] {
    font-family: 'flag-icon' !important;
}

/* FooTable Icons */
.fooicon,
[class^="fooicon-"],
[class*=" fooicon-"],
.footable-sort-indicator {
    font-family: 'footable' !important;
}

/* ==========================================================================
   Khmer Fonts (Strictly Preserved with !important)
   ========================================================================== */
.font-kh,
[class*="font-kh"] {
    font-family: 'Khmer OS', sans-serif !important;
}

.font-kh-title {
    font-family: 'Khmer Moul', sans-serif !important;
}

/* ==========================================================================
   ID Card & Contract Document Font Isolation (Strictly Protected)
   ========================================================================== */
.id-card,
.id-card *,
.id-card-item-wrapper,
.id-card-item-wrapper *,
.contract-page,
.contract-page *,
.contract-doc,
.contract-doc *,
.page-container,
.page-container * {
    /* Excluded from global font overrides to preserve card and contract template selections */
}

/* ==========================================================================
   2. Typography - Slightly Smaller Base Font Size
   ========================================================================== */
body,
html {
    font-size: 13px !important;
    line-height: 1.45 !important;
}

.form-control,
select,
input,
textarea,
.dropdown-menu,
.nav-tabs,
.card-title,
.modal-body,
.modal-title,
.pagination {
    font-size: 13px !important;
}

table:not(.contract-page *):not(.contract-doc *),
.table:not(.contract-page *):not(.contract-doc *),
table tr:not(.contract-page *):not(.contract-doc *),
.table tr:not(.contract-page *):not(.contract-doc *),
table th:not(.contract-page *):not(.contract-doc *),
.table th:not(.contract-page *):not(.contract-doc *),
table td:not(.contract-page *):not(.contract-doc *),
.table td:not(.contract-page *):not(.contract-doc *) {
    font-size: 12px !important;
}

h1,
.h1 {
    font-size: 24px !important;
}

h2,
.h2 {
    font-size: 20px !important;
}

h3,
.h3 {
    font-size: 17px !important;
}

h4,
.h4 {
    font-size: 15px !important;
}

h5,
.h5 {
    font-size: 13.5px !important;
}

h6,
.h6 {
    font-size: 12px !important;
}

.small,
small {
    font-size: 11.5px !important;
}

/* ==========================================================================
   Khmer Font Size Optimization: Increase all font sizes by +1px when in Khmer locale
   ========================================================================== */
html[lang="km"],
html[lang="km"] body {
    font-size: 14px !important;
}

html[lang="km"] .form-control,
html[lang="km"] select,
html[lang="km"] input,
html[lang="km"] textarea,
html[lang="km"] .dropdown-menu,
html[lang="km"] .nav-tabs,
html[lang="km"] .card-title,
html[lang="km"] .modal-body,
html[lang="km"] .modal-title,
html[lang="km"] .pagination {
    font-size: 14px !important;
}

html[lang="km"] table:not(.contract-page *):not(.contract-doc *),
html[lang="km"] .table:not(.contract-page *):not(.contract-doc *),
html[lang="km"] table tr:not(.contract-page *):not(.contract-doc *),
html[lang="km"] .table tr:not(.contract-page *):not(.contract-doc *),
html[lang="km"] table th:not(.contract-page *):not(.contract-doc *),
html[lang="km"] .table th:not(.contract-page *):not(.contract-doc *),
html[lang="km"] table td:not(.contract-page *):not(.contract-doc *),
html[lang="km"] .table td:not(.contract-page *):not(.contract-doc *) {
    font-size: 13px !important;
}

html[lang="km"] h1,
html[lang="km"] .h1 {
    font-size: 25px !important;
}

html[lang="km"] h2,
html[lang="km"] .h2 {
    font-size: 21px !important;
}

html[lang="km"] h3,
html[lang="km"] .h3 {
    font-size: 18px !important;
}

html[lang="km"] h4,
html[lang="km"] .h4 {
    font-size: 16px !important;
}

html[lang="km"] h5,
html[lang="km"] .h5 {
    font-size: 14.5px !important;
}

html[lang="km"] h6,
html[lang="km"] .h6 {
    font-size: 13px !important;
}

html[lang="km"] .small,
html[lang="km"] small {
    font-size: 12.5px !important;
}

html[lang="km"] .col-form-label {
    font-size: 14px !important;
}

html[lang="km"] .btn {
    font-size: 13px !important;
}

html[lang="km"] .btn-sm,
html[lang="km"] .btn-group-sm > .btn {
    font-size: 12px !important;
}

html[lang="km"] .btn-xs {
    font-size: 11.5px !important;
}

html[lang="km"] .btn-lg,
html[lang="km"] .btn-group-lg > .btn {
    font-size: 15px !important;
}

html[lang="km"] .breadcrumb,
html[lang="km"] .breadcrumb-item,
html[lang="km"] .breadcrumb-item a,
html[lang="km"] .breadcrumb a {
    font-size: 14px !important;
}

html[lang="km"] .dropdown-item {
    font-size: 14px !important;
}

html[lang="km"] .alert {
    font-size: 14px !important;
}

html[lang="km"] .fc-event {
    font-size: 12px !important;
}

html[lang="km"] .topbar .top-navbar .navbar-nav > .nav-item > .nav-link {
    font-size: 15px !important;
}

/* ==========================================================================
   3. Container-Fluid & Topbar 90% Width
   ========================================================================== */
.container-fluid {
    width: 90% !important;
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

@media (max-width: 1280px) {

    .container-fluid,
    .topbar .top-navbar {
        width: 90% !important;
        max-width: 90% !important;
    }
}

@media (max-width: 1024px) {

    .container-fluid,
    .topbar .top-navbar {
        width: 90% !important;
        max-width: 90% !important;
    }
}

/* ==========================================================================
   4. Header Bar Fixed 50px Height & Element Alignments
   ========================================================================== */
.topbar {
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    position: relative;
    z-index: 50;
    transition: background 0.3s ease;
}

.topbar .top-navbar {
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    width: 90% !important;
    max-width: 90% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.topbar .top-navbar .navbar-header {
    height: 60px !important;
    line-height: 60px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
}

.topbar .top-navbar .navbar-header .navbar-brand {
    height: 60px !important;
    line-height: 60px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.topbar .top-navbar .navbar-header a {
    display: flex !important;
    align-items: center !important;
    height: 60px !important;
}

.topbar .top-navbar .navbar-header img,
.topbar .top-navbar .navbar-brand img {
    max-height: 40px !important;
    height: 40px !important;
    width: auto !important;
    object-fit: contain !important;
    vertical-align: middle !important;
}

.topbar .top-navbar .navbar-collapse {
    height: 50px !important;
    min-height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

.topbar .top-navbar .navbar-nav {
    height: 50px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
}

.topbar .top-navbar .navbar-nav>.nav-item {
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
}

.topbar .top-navbar .navbar-nav>.nav-item>.nav-link {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 14px !important;
}

/* User Avatar & Initials Circle scaled to fit 50px header */
.topbar .profile-pic,
.topbar .nav-item .profile-pic {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    vertical-align: middle !important;
}

.topbar .nav-link .user-avatar-circle {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: solid 2px #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.topbar .nav-link .user-avatar-circle h4 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    color: #fff !important;
}

/* Birthday Icon adjustment for 36px avatar */
.topbar .birthday-icon {
    width: 18px !important;
    height: 18px !important;
    bottom: 4px !important;
    right: 2px !important;
    padding: 2px !important;
}

.topbar .birthday-icon img {
    width: 70% !important;
    height: 70% !important;
}

/* Flag Icon alignment */
.topbar .nav-link .flag-icon {
    font-size: 15px !important;
    line-height: 1 !important;
}

/* ==========================================================================
   5. Compact Spacing & Reduced Padding
   ========================================================================== */
/* Compact Grid Column Gutters & Margins (.col, .col-sm, .col-md, .col-lg, etc.) */
.row {
    margin-left: -7px !important;
    margin-right: -7px !important;
}

.col,
[class*="col-"],
[class^="col-"],
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col-sm,
.col-sm-auto,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-md,
.col-md-auto,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-lg,
.col-lg-auto,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-xl,
.col-xl-auto,
.col-xl-1,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12 {
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-top: 0 !important;
}


.form-group.row,
.row.form-group {
    margin-left: -7px !important;
    margin-right: -7px !important;
    margin-bottom: 8px !important;
}

.form-group.row>[class*="col-"],
.row.form-group>[class*="col-"] {
    margin-bottom: 0 !important;
}

/* Compact Tables */
table,
.table,
table tr,
.table tr,
table th,
.table th,
table td,
.table td {
    font-size: 12px !important;
}

/* table td, *//* table th, */
.table td,
.table th {
    padding: 6px 10px !important;
    vertical-align: middle !important;
}


.table thead th {
    padding: 8px 10px !important;
}

/* Compact Cards */
.card {
    margin-bottom: 12px !important;
    border-radius: 4px !important;
}

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

.card .card-header {
    padding: 8px 14px !important;
}

.card .card-footer {
    padding: 8px 14px !important;
}

.card .card-subtitle {
    margin-bottom: 10px !important;
}

/* Compact Forms & Controls */
.form-group {
    margin-bottom: 10px !important;
}

.form-control {
    min-height: 34px !important;
    height: 34px !important;
    padding: 4px 10px !important;
    font-size: 13px !important;
    border-radius: 4px !important;
}

textarea.form-control {
    min-height: 60px !important;
    height: auto !important;
}

.col-form-label {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    font-size: 13px !important;
}

/* Compact Buttons */
.btn {
    padding: 8px 12px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    border-radius: 5px !important;
}

.btn-sm,
.btn-group-sm>.btn {
    padding: 6px 8px !important;
    font-size: 11px !important;
    border-radius: 4px !important;
}

.btn-xs {
    padding: 4px 6px !important;
    font-size: 10.5px !important;
    border-radius: 3px !important;
}

.btn-lg,
.btn-group-lg>.btn {
    padding: 8px 16px !important;
    font-size: 14px !important;
}

/* Compact Breadcrumbs & Page Titles */
.page-wrapper {
    padding-bottom: 30px !important;
}

@media (max-width: 767px) {
    .mini-sidebar .page-wrapper,
    .page-wrapper {
        padding-top: 0 !important;
    }
}

@media (max-width: 1023px) {

    .container-fluid {
        padding: 5px 0 !important;
    }
}

.row.page-titles {
    margin-top: 8px !important;
    margin-bottom: 4px !important;
    padding-bottom: 0 !important;
}

.row.page-titles .col-sm-12 {
    padding-bottom: 8px !important;
}

.breadcrumb,
.breadcrumb-item,
.breadcrumb-item a,
.breadcrumb a {
    font-size: 13px !important;
    padding: 2px 0 !important;
    margin-bottom: 0 !important;
}

.breadcrumb-item i,
.breadcrumb i {
    font-size: 10.5px !important;
}

/* Compact Modals */
.modal-header {
    padding: 10px 15px !important;
}

.modal-body {
    padding: 15px !important;
}

.modal-footer {
    padding: 8px 15px !important;
}

/* Compact Dropdowns */
.dropdown-menu {
    padding: 4px 0 !important;
    border-radius: 4px !important;
}

.dropdown-item {
    padding: 5px 14px !important;
    font-size: 13px !important;
}

/* Compact Badges & Alerts */
.badge {
    padding: 3px 7px !important;
    font-weight: 500 !important;
}

.alert {
    padding: 8px 12px !important;
    margin-bottom: 12px !important;
    font-size: 13px !important;
}

/* ==========================================================================
   6. Color Theme Gradient Palette & Controls
   ========================================================================== */
.theme-gradient-preview-bar {
    height: 40px;
    width: 100%;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    margin-top: 8px;
    transition: background 0.3s ease;
}

.solid-preset-chip,
.gradient-preset-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    margin: 3px;
    border-radius: 14px;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.15);
    font-size: 11.5px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    font-weight: 500;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.solid-preset-chip:hover,
.gradient-preset-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* ==========================================================================
   7. Dashboard / Welcome Page Module Box Enhancements (Outside li.list-group-item)
   ========================================================================== */
/* The dashboard module column (.col-sm-12.col-md-6.col-lg-6.box-rounded.waves-effect) */
[class*="col-"].box-rounded.waves-effect {
    padding-bottom: 0 !important;
    margin-bottom: 8px !important;
    border-radius: 4px !important;
    vertical-align: top !important;
}

/* Eliminate excessive bottom space inside the ripple container */
[class*="col-"].box-rounded.waves-effect .card,
[class*="col-"].box-rounded.waves-effect .my-box {
    margin-bottom: 5px !important;
    border-radius: 4px !important;
    padding: 5px !important;
}

/* Compact padding inside each module box */
[class*="col-"].box-rounded.waves-effect .my-box .box {
    padding: 7px 10px !important;
}

[class*="col-"].box-rounded.waves-effect .my-box .box-text h3 {
    margin-top: 0 !important;
    margin-bottom: 2px !important;
    font-size: 14.5px !important;
    line-height: 1.3 !important;
}

[class*="col-"].box-rounded.waves-effect .my-box .box-text .small {
    font-size: 11.5px !important;
    line-height: 1.25 !important;
}

[class*="col-"].box-rounded.waves-effect .my-box .box-icon {
    width: 32px !important;
}

[class*="col-"].box-rounded.waves-effect .my-box .box-icon i {
    font-size: 28px !important;
}

/* Welcome page card title and separators */
.card-title {
    margin-bottom: 8px !important;
}

.card-title h3 {
    margin-bottom: 0 !important;
}

.asColorPicker-trigger {
    position: absolute;
    top: 0;
    right: -32px;
    border: 1px solid #d9d9d9;
    width: 32px;
    height: 32px;
}

.select2-container .select2-selection--single{
    height: 36px !important;
}

.btn-info{
    background-color: #2E3192 !important;
}

.wizard-content .wizard>.actions>ul>li>a {
    background: #2E3192;
    color: #fff;
    display: block;
    padding: 7px 12px;
    border-radius: 4px;
    border: 1px solid transparent;
}

.wizard-content .wizard>.actions>ul>li>a[href="#previous"]{
    background-color: #fff;
    color: #54667a;
    border: 1px solid #d9d9d9;
}

.fc-toolbar{
    margin-bottom: 0px !important;
}

.fc-event{
    font-size:11px !important;
}

/* .my-icon-box{
    padding-top: 5px;
    line-height: 17px;
    font-weight: bolder;
}
.my-icon-box > h3{
    font-weight: bolder !important;
} */