:root {
    /* Global Typography - Figma Design Rules */
    --bs-font-sans-serif: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    --bs-body-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    --btn-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;

    /* Base Colors */
    --color-neutral-50: #ffffff;
    --color-neutral-100: #f8fafc;
    --color-neutral-200: #e2e8f0;
    --color-neutral-300: #cbd5e1;
    --color-neutral-400: #94a3b8;
    --color-neutral-500: #64748b;
    --color-neutral-600: #475569;
    --color-neutral-700: #334155;
    --color-neutral-800: #1e293b;
    --color-neutral-900: #0f172a;
    --color-neutral-950: #020617;

    /* Primary (#017AFF Brand Blue) */
    --color-primary-50: #e6f2ff;
    --color-primary-100: #cce5ff;
    --color-primary-200: #99cbff;
    --color-primary-300: #66b0ff;
    --color-primary-400: #3395ff;
    --color-primary-500: #017AFF;
    --color-primary-600: #0066d6;
    --color-primary-700: #0052ad;
    --color-primary-800: #003e85;
    --color-primary-900: #002957;
    --color-primary-950: #001733;

    /* Secondary */
    --color-secondary-50: #fff6cc;
    --color-secondary-100: #fef0aa;
    --color-secondary-200: #fee880;
    --color-secondary-300: #fee055;
    --color-secondary-400: #fdd92a;
    --color-secondary-500: #fdd100;
    --color-secondary-600: #d3ae00;
    --color-secondary-700: #a98b00;
    --color-secondary-800: #7e6800;
    --color-secondary-900: #544600;
    --color-secondary-950: #332a00;

    /* Info */
    --color-info-50: #eef8ff;
    --color-info-100: #d9eeff;
    --color-info-200: #bce2ff;
    --color-info-300: #8ed0ff;
    --color-info-400: #59b5ff;
    --color-info-500: #2d92ff;
    --color-info-600: #1b75f5;
    --color-info-700: #145fe1;
    --color-info-800: #174cb6;
    --color-info-900: #19438f;
    --color-info-950: #142a57;

    /* Warning */
    --color-warning-50: #fffbeb;
    --color-warning-100: #fff4c6;
    --color-warning-200: #ffe688;
    --color-warning-300: #ffd44a;
    --color-warning-400: #ffbc14;
    --color-warning-500: #f99e07;
    --color-warning-600: #dd7602;
    --color-warning-700: #b75206;
    --color-warning-800: #943e0c;
    --color-warning-900: #7a330d;
    --color-warning-950: #461a02;

    /* Danger */
    --color-danger-50: #fff0f1;
    --color-danger-100: #ffe2e4;
    --color-danger-200: #ffcad0;
    --color-danger-300: #ff9fa9;
    --color-danger-400: #ff697c;
    --color-danger-500: #ff304f;
    --color-danger-600: #ed113c;
    --color-danger-700: #c80833;
    --color-danger-800: #a80932;
    --color-danger-900: #8f0c31;
    --color-danger-950: #500115;

    /* Success */
    --color-success-50: #f3fcf1;
    --color-success-100: #e0fade;
    --color-success-200: #c5f2c0;
    --color-success-300: #94e78e;
    --color-success-400: #5dd355;
    --color-success-500: #33ab2b;
    --color-success-600: #289821;
    --color-success-700: #22781d;
    --color-success-800: #205f1c;
    --color-success-900: #1b4e19;
    --color-success-950: #082b08;

    --rounded-none: 0;
    --rounded-sm: 0.125rem;
    --rounded: 0.25rem;
    --rounded-md: 0.375rem;
    --rounded-lg: 0.5rem;
    --rounded-xl: 0.75rem;
    --rounded-2xl: 1rem;
    --rounded-3xl: 1.5rem;
    --rounded-full: 9999px;

    --rounded-button: 8px;
    --rounded-input: 8px;
    --rounded-card: 12px;
}

/* Button primary overrides with #017AFF */
html body .btn-primary,
html body .btn-primary[data-trigger=hover].dropdown-toggle:not(.show) {
    background-color: var(--color-primary-500) !important;
    border-color: var(--color-primary-500) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(1, 122, 255, 0.25) !important;
}

html body .btn-primary:hover,
html body .btn-primary[data-trigger=hover].show.dropdown-toggle:hover {
    background-color: var(--color-primary-600) !important;
    border-color: var(--color-primary-600) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

html body .btn-check:focus + .btn-primary,
html body .btn-primary:focus,
html body .btn-primary.focus {
    background-color: var(--color-primary-600) !important;
    border-color: var(--color-primary-600) !important;
    color: #fff !important;
    box-shadow: 0 0 0 3px rgba(1, 122, 255, 0.35) !important;
}

html body .btn-check:checked + .btn-primary,
html body .btn-check:active + .btn-primary,
html body .btn-primary:active,
html body .btn-primary.active,
html body .btn-primary.show.dropdown-toggle,
html body .show > .btn-primary.dropdown-toggle {
    background-color: var(--color-primary-700) !important;
    border-color: var(--color-primary-700) !important;
    color: #fff !important;
}

html body .bg-primary {
    background-color: var(--color-primary-500) !important;
}

html body .text-primary {
    color: var(--color-primary-500) !important;
}

html body .border-primary {
    border-color: var(--color-primary-500) !important;
}

/* Form control & input focus overrides with #017AFF */
.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
    border-color: #017AFF !important;
    box-shadow: 0 0 0 3px rgba(1, 122, 255, 0.2) !important;
}

.input-group:focus-within .form-control,
.input-group:focus-within .input-group-text {
    border-color: #017AFF !important;
}

.form-check-input:focus {
    border-color: #017AFF !important;
    box-shadow: 0 0 0 3px rgba(1, 122, 255, 0.2) !important;
}

.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
    background-color: #017AFF !important;
    border-color: #017AFF !important;
}

.form-switch .form-check-input:checked {
    background-color: #017AFF !important;
    border-color: #017AFF !important;
}

.custom-option.checked {
    border-color: #017AFF !important;
}

/* FULL WIDTH TOP NAVBAR STYLING */
.layout-navbar {
    width: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    background-color: #ffffff !important;
    height: 70px !important;
    padding: 0 1.5rem !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
}

/* ========================================================
   SIDEBAR BRAND STYLING (#017AFF) & TOGGLE ROTATION
   ======================================================== */
.bg-menu-theme.menu-vertical {
    background-color: #ffffff !important;
    border-right: 1px solid #e2e8f0 !important;
}

.bg-menu-theme .menu-inner > .menu-item.active > .menu-link,
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link:hover,
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link:focus,
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link:active {
    background: linear-gradient(135deg, #017AFF 0%, #0052ad 100%) !important;
    color: #ffffff !important;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(1, 122, 255, 0.35) !important;
}

.bg-menu-theme .menu-inner > .menu-item.active > .menu-link .menu-icon,
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link:hover .menu-icon,
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link:focus .menu-icon {
    color: #ffffff !important;
}

.bg-menu-theme .menu-inner > .menu-item:not(.active) > .menu-link:hover {
    background-color: #f1f5f9 !important;
    color: #017AFF !important;
}

.bg-menu-theme .menu-inner > .menu-item:not(.active) > .menu-link:hover .menu-icon {
    color: #017AFF !important;
}

.bg-menu-theme .menu-header .menu-header-text {
    color: #94a3b8 !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em;
}

/* Sidebar Menu Toggle Icon Rotation (Expanded vs Mini) */
.layout-menu-toggle {
    color: #64748b;
    transition: all 0.25s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.layout-menu-toggle i {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
    font-size: 1.4rem;
}

.layout-menu-toggle:hover i {
    color: #017AFF;
}

/* Rotate 180deg pointing right when collapsed/mini */
html.layout-menu-collapsed .layout-menu-toggle i {
    transform: rotate(180deg);
}

/* Ensure toggle button is visible when hovering collapsed logo */
html.layout-menu-collapsed .app-brand:hover .layout-menu-toggle,
html.layout-menu-collapsed.layout-menu-hover .app-brand .layout-menu-toggle {
    display: flex !important;
    opacity: 1 !important;
}

/* CONTENT CONTAINER FULL WIDTH OVERRIDES */
.content-wrapper > .container-xxl,
.content-wrapper > .container-fluid {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

.card-custom,
.card {
    width: 100% !important;
}

/* ========================================================
   GLOBAL TYPOGRAPHY RULES (FIGMA SPECIFICATIONS)
   - Body, Input, Button, Label, Description -> Inter
   - Headings, Titles, Money/Nominal amounts -> Rubik
   ======================================================== */
body, input, button, select, textarea,
.form-control, .form-select, .btn,
table, .table, .dropdown-menu, .nav-link,
.menu-link, .menu-header, .form-label, .text-muted,
label, p, td, th {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

span:not([class*="bx"]):not([class*="tf-icons"]):not([class*="fa"]) {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.auth-title, .app-brand-text, .card-title, .modal-title,
.heading-font, .fs-1, .fs-2, .fs-3, .fs-4, .fs-5,
.total-amount, .nominal-amount {
    font-family: 'Rubik', sans-serif !important;
}

/* Ensure Icon Fonts (Boxicons & FontAwesome) are NEVER overridden by typography rules */
.bx, .bxs, .tf-icons, i, i.bx, i[class*="bx"], [class^="bx-"], [class*=" bx-"] {
    font-family: 'boxicons' !important;
}

/* Custom Card Full Width */
.card-custom {
    width: 100% !important;
}

/* DataTables Processing / Loading Indicator Styling */
div.dataTables_wrapper {
    position: relative;
}

div.dataTables_processing {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0.5rem 1rem !important;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    z-index: 100;
    width: auto !important;
    max-width: 170px !important;
    min-width: 120px !important;
    white-space: nowrap !important;
    color: #1e293b;
    font-weight: 500;
    font-size: 0.85rem;
    text-align: center;
}

/* Layout Overlay for Mobile Sidemenu Backdrop (Click Outside to Close) */
.layout-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(15, 23, 42, 0.4);
    z-index: 1080;
    display: none;
    cursor: pointer;
    backdrop-filter: blur(2px);
}

html.layout-menu-expanded .layout-overlay {
    display: block !important;
}

/* Global Table Header Bold Styling */
table thead th,
.table thead th,
.table-custom thead th {
    font-weight: 700 !important;
    color: #0f172a !important;
}