/* ==========================================================================
   Amaaly Systems - Global Styles (style.css)
   Companion Layer over Bootstrap 4.6 (loads after bootstrap.min.css & token.css)

   TABLE OF CONTENTS
   01. Base & Reset
   02. Typography & Text Utilities
   03. Interaction & Layer Utilities
   04. Logical Direction Utilities (Borders & Spacing)
   05. App Shell Layout (Wrapper, Header, Sidebar)
   06. Sidebar Navigation
   07. Page Header & Floating Action Buttons
   08. Forms & Inputs (Dynamic Group, Validation, Date)
   09. Buttons (Bootstrap Semantic Overrides)
   10. Avatars
   11. Cards & Modals
   12. Badges & Dropdowns
   13. Legacy Tables & Grids
   14. AML Table System
   15. Pagination
   16. Tabs & Collapse Toggles
   17. Wizard Stepper
   18. Switches & Custom Checkboxes
   19. File Upload
   20. Progress Blocker & Spinner
   21. Vendor Overrides (Select2, jQuery UI, Toastr, Google Charts)
   22. Page Specific (Login)
   23. Animations & Effects
   24. Responsive Miscellaneous
   25. Print Media
   ========================================================================== */

/* ==========================================================================
   01. BASE & RESET
   ========================================================================== */
body, html {
    scrollbar-width: none;
    scroll-behavior: smooth;
    width: 100vw;
    height: 100vh;
    text-align: start;
    color: var(--text-default);
    background-color: var(--surface-muted);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}

[dir="ltr"] .lang-switch-wrapper a {
    font-family: var(--font-family-arabic) !important;
    font-size: var(--font-size-md);
}

[dir="rtl"] .lang-switch-wrapper a {
    font-family: var(--font-family-english) !important;
}

.ltr {
    direction: ltr;
}

.rtl {
    direction: rtl;
}

a {
    color: var(--color-link);
    transition: color var(--transition-fast);
}

    a:hover {
        color: var(--color-link-hover);
    }

ul {
    padding-inline-start: 0 !important;
}

::-webkit-scrollbar {
    width: var(--scrollbar-width);
    display: none;
}

::-webkit-scrollbar-track {
    background: var(--color-neutral-gray-100);
}

::-webkit-scrollbar-thumb {
    background: var(--color-neutral-gray-600);
    border-radius: var(--border-radius-pill);
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--color-neutral-gray-900);
    }

/* ==========================================================================
   02. TYPOGRAPHY & TEXT UTILITIES
   ========================================================================== */
.text-primary, .dashboard-value, .form-label, .form-label-bold, .table, .grid-header, .grid-footer {
    color: var(--color-brand-primary) !important;
}

.form-label-bold {
    font-weight: var(--font-weight-bold);
}

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

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

.text-dark {
    color: var(--color-neutral-gray-800) !important;
}

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

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

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

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

.bg-light {
    background-color: var(--surface-muted) !important;
}

.text-start {
    text-align: start !important;
}

.text-end {
    text-align: end !important;
}

a.text-primary:focus, a.text-primary:hover {
    color: var(--color-brand-primary) !important;
}

.blur {
    color: transparent;
    text-shadow: 0 0 10px var(--color-neutral-black);
}

.text-break-word {
    word-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
}

.tabular-nums {
    font-variant-numeric: tabular-nums !important;
}

/* ==========================================================================
   03. INTERACTION & LAYER UTILITIES
   ========================================================================== */
.cursor-pointer {
    cursor: pointer;
}

.transition-fast {
    transition: var(--transition-fast);
}

.z-top {
    z-index: var(--z-index-dropdown);
}

.no-hover {
    pointer-events: none !important;
}

/* ==========================================================================
   04. LOGICAL DIRECTION UTILITIES (BORDERS & SPACING)
   ========================================================================== */
.border {
    border-color: var(--border-subtle) !important;
}

.border-end {
    border-inline-end: var(--border-width) solid var(--color-border) !important;
}

.border-start {
    border-inline-start: var(--border-width) solid var(--color-border) !important;
}

.border-end-bold {
    border-inline-end: var(--border-width-thick) solid var(--color-border) !important;
}

.border-start-bold {
    border-inline-start: var(--border-width-thick) solid var(--color-border) !important;
}

/* ---- Logical Padding Start (BS5-Aligned Scale) ---- */
.ps-0 {
    padding-inline-start: 0 !important;
}

.ps-1 {
    padding-inline-start: var(--spacing-xs) !important;
}

.ps-2 {
    padding-inline-start: var(--spacing-sm) !important;
}

.ps-3 {
    padding-inline-start: var(--spacing-md) !important;
}

.ps-4 {
    padding-inline-start: var(--spacing-lg) !important;
}

.ps-5 {
    padding-inline-start: var(--spacing-3xl) !important;
}

/* ---- Logical Padding End (BS5-Aligned Scale) ---- */
.pe-0 {
    padding-inline-end: 0 !important;
}

.pe-1 {
    padding-inline-end: var(--spacing-xs) !important;
}

.pe-2 {
    padding-inline-end: var(--spacing-sm) !important;
}

.pe-3 {
    padding-inline-end: var(--spacing-md) !important;
}

.pe-4 {
    padding-inline-end: var(--spacing-lg) !important;
}

.pe-5 {
    padding-inline-end: var(--spacing-3xl) !important;
}

/* ---- Logical Margin Start (BS5-Aligned Scale) ---- */
.ms-0 {
    margin-inline-start: 0 !important;
}

.ms-1 {
    margin-inline-start: var(--spacing-xs) !important;
}

.ms-2 {
    margin-inline-start: var(--spacing-sm) !important;
}

.ms-3 {
    margin-inline-start: var(--spacing-md) !important;
}

.ms-4 {
    margin-inline-start: var(--spacing-lg) !important;
}

.ms-5 {
    margin-inline-start: var(--spacing-3xl) !important;
}

.ms-auto {
    margin-inline-start: auto !important;
}

/* ---- Logical Margin End (BS5-Aligned Scale) ---- */
.me-0 {
    margin-inline-end: 0 !important;
}

.me-1 {
    margin-inline-end: var(--spacing-xs) !important;
}

.me-2 {
    margin-inline-end: var(--spacing-sm) !important;
}

.me-3 {
    margin-inline-end: var(--spacing-md) !important;
}

.me-4 {
    margin-inline-end: var(--spacing-lg) !important;
}

.me-5 {
    margin-inline-end: var(--spacing-3xl) !important;
}

.me-auto {
    margin-inline-end: auto !important;
}

/* ---- Flex & Grid Gap (BS5-Aligned Scale) ---- */
.gap-0 {
    gap: 0 !important;
}

.gap-1 {
    gap: var(--spacing-xs) !important;
}

.gap-2 {
    gap: var(--spacing-sm) !important;
}

.gap-3 {
    gap: var(--spacing-md) !important;
}

.gap-4 {
    gap: var(--spacing-lg) !important;
}

.gap-5 {
    gap: var(--spacing-3xl) !important;
}

/* ---- Responsive Logical Padding End (Large Screens) ---- */
@media (min-width: 992px) {
    .pe-lg-0 {
        padding-inline-end: 0 !important;
    }

    .pe-lg-1 {
        padding-inline-end: var(--spacing-xs) !important;
    }

    .pe-lg-2 {
        padding-inline-end: var(--spacing-sm) !important;
    }

    .pe-lg-3 {
        padding-inline-end: var(--spacing-md) !important;
    }

    .pe-lg-4 {
        padding-inline-end: var(--spacing-lg) !important;
    }

    .pe-lg-5 {
        padding-inline-end: var(--spacing-3xl) !important;
    }
}

/* ==========================================================================
   05. APP SHELL LAYOUT (WRAPPER, HEADER, SIDEBAR)
   ========================================================================== */
.app-body, .app-form {
    height: 100vh;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.app-wrapper {
    display: flex;
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.app-main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background-color: var(--surface-page);
    width: 100%;
}

.app-scrollable-content {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    padding-bottom: var(--spacing-xl);
}

.app-header {
    height: var(--header-height);
    flex-shrink: 0;
    background-color: var(--text-inverse);
    border-bottom: var(--border-width) solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--spacing-lg);
    position: relative;
    z-index: var(--z-index-nav);
}

.app-sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    background-color: var(--text-inverse);
    border-inline-end: var(--border-width) solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-normal);
    z-index: var(--z-index-sidebar);
    flex-shrink: 0;
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    transform: translateX(-100%);
}

[dir="rtl"] .app-sidebar {
    transform: translateX(100%);
}

.app-wrapper.toggled .app-sidebar {
    transform: translateX(0);
}

.sidebar-brand {
    padding: var(--spacing-md);
    padding-bottom: unset;
}

.sidebar-nav-container {
    flex-grow: 1;
    overflow-y: auto;
    padding-bottom: var(--spacing-xl);
}

.app-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    z-index: calc(var(--z-index-sidebar) - 1);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-normal);
}

@media (min-width: 992px) {
    .app-sidebar {
        position: relative;
        transform: translateX(0);
    }

    .app-wrapper:not(.toggled) .app-sidebar {
        margin-inline-start: calc(var(--sidebar-width) * -1);
    }

    .app-sidebar-overlay {
        display: none !important;
    }
}

@media (max-width: 991px) {
    .app-wrapper.toggled .app-sidebar-overlay {
        opacity: 1;
        visibility: visible;
    }
}

/* ==========================================================================
   06. SIDEBAR NAVIGATION
   ========================================================================== */
.sidebar-menu {
    width: 100%;
    padding-bottom: var(--spacing-lg);
}

.menu-header {
    padding: var(--spacing-sm) var(--spacing-md);
    margin: var(--spacing-md) var(--spacing-md) 0 var(--spacing-md);
    border-radius: var(--radius-control);
    color: var(--color-neutral-gray-700);
    font-weight: var(--font-weight-medium);
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: var(--transition-fast);
    background-color: transparent;
}

    .menu-header a, .menu-header a:hover {
        color: inherit !important;
        text-decoration: none !important;
        flex: 1;
    }

    .menu-header .menu-icon {
        font-size: var(--font-size-md);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--color-neutral-gray-400);
        transition: var(--transition-fast);
        width: var(--spacing-xl);
        margin-inline-end: var(--spacing-sm);
    }

    .menu-header:hover {
        background-color: var(--color-neutral-gray-100);
        color: var(--color-neutral-gray-700);
    }

        .menu-header:hover .menu-icon {
            color: var(--color-neutral-gray-600);
        }

.menu-header-selected {
    background: var(--color-brand-primary) !important;
    color: var(--text-inverse) !important;
    font-weight: var(--font-weight-bold);
    box-shadow: var(--box-shadow-sm);
}

    .menu-header-selected .menu-icon {
        color: var(--color-brand-cyan) !important;
    }

.menu-content {
    padding: var(--spacing-sm) 0;
    margin: calc(var(--spacing-xs) * -1) var(--spacing-md) var(--spacing-xs) var(--spacing-md);
    position: relative;
    background-color: var(--surface-muted);
    border-radius: var(--radius-menu);
}

    .menu-content::before {
        content: "";
        position: absolute;
        top: var(--spacing-sm);
        bottom: var(--spacing-sm);
        inset-inline-start: var(--spacing-lg);
        width: 0;
        border-inline-start: 1px dashed var(--color-border);
    }

.menu-link {
    position: relative;
    display: flex;
    align-items: center;
    padding: var(--spacing-sm) 0;
    margin-block: var(--spacing-xs);
    margin-inline-start: var(--sidebar-indent);
    margin-inline-end: var(--spacing-sm);
    color: var(--color-neutral-gray-700);
    font-weight: var(--font-weight-medium);
    text-decoration: none !important;
    transition: var(--transition-fast);
    font-size: var(--font-size-sm);
    border-radius: var(--radius-control-sm);
}

    .menu-link:hover {
        color: var(--color-brand-primary);
        background-color: var(--surface-muted);
    }

    .menu-link.active-menu {
        color: var(--color-brand-primary) !important;
        font-weight: var(--font-weight-bold) !important;
    }

        .menu-link.active-menu::before {
            content: "";
            position: absolute;
            inset-inline-start: calc(var(--spacing-md) * -1);
            top: 50%;
            transform: translateY(-50%);
            width: var(--border-width-thick);
            height: 1.25rem;
            background-color: var(--color-brand-primary);
            border-radius: var(--border-radius-pill);
            z-index: 2;
        }

    .menu-link.sidebar-splitter {
        margin-top: var(--spacing-sm) !important;
        overflow: visible !important;
    }

        .menu-link.sidebar-splitter::after {
            content: "";
            position: absolute;
            top: calc(var(--spacing-xs) * -1);
            inset-inline-start: calc(var(--spacing-md) * -1);
            inset-inline-end: 0;
            border-top: 1px dashed var(--color-border);
            pointer-events: none;
        }

/* ==========================================================================
   07. PAGE HEADER & FLOATING ACTION BUTTONS
   ========================================================================== */
#content-body > div:has(> .page-header) {
    display: contents;
}

.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 85px;
    background-color: var(--surface-page);
    padding: var(--spacing-lg) 0;
    position: sticky;
    top: 0;
    z-index: var(--z-index-header);
}

.page-header-title {
    margin: 0;
    display: flex;
    align-items: center;
}

    .page-header-title .h4, .page-header-title h4 {
        margin: 0;
        font-weight: var(--font-weight-bold);
        color: var(--color-brand-primary);
    }

.page-header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-gap);
}

.app-fab-wrapper {
    position: fixed;
    bottom: var(--spacing-lg);
    inset-inline-end: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-gap-sm);
    z-index: var(--z-index-fab);
    opacity: 0.4;
    transition: var(--transition-normal);
}

    .app-fab-wrapper:hover, .app-fab-wrapper:active {
        opacity: 1;
    }

.app-fab-btn {
    width: var(--fab-size) !important;
    height: var(--fab-size) !important;
    min-width: unset !important;
    padding: 0 !important;
    flex: 0 0 var(--fab-size);
}

@media (max-width: 767px) {
    .page-header {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-gap);
    }

    .page-header-actions {
        width: auto;
        justify-content: flex-end;
        margin-top: 0;
        flex: 1 1 auto;
        gap: var(--space-gap);
    }

        .page-header-actions > .btn, .page-header-actions > .dropdown, .page-header-actions .dropdown-toggle {
            flex: 0 1 auto;
            width: auto !important;
            text-align: center;
            margin: 0 !important;
        }

    .app-fab-wrapper {
        bottom: var(--spacing-md);
        inset-inline-end: var(--spacing-md);
    }

    .app-fab-btn {
        width: 35px !important;
        height: 35px !important;
        flex: 0 0 35px;
        font-size: var(--font-size-sm);
    }
}

/* ==========================================================================
   08. FORMS & INPUTS (DYNAMIC GROUP, VALIDATION, DATE)
   ========================================================================== */
.form-check-label {
    margin-inline-end: var(--spacing-lg);
}

select {
    padding: var(--spacing-xs) var(--spacing-sm) !important;
    border-radius: var(--radius-control);
}

.form-control {
    border-radius: var(--radius-control);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

    .form-control:focus {
        border-color: var(--color-brand-secondary-light);
        box-shadow: 0 0 0 var(--spacing-xs) var(--color-brand-secondary-light);
    }

    .form-control::selection {
        color: var(--text-inverse);
        background-color: var(--color-brand-primary) !important;
    }

    .form-control:-webkit-autofill,
    .form-control:-webkit-autofill:hover,
    .form-control:-webkit-autofill:focus,
    .form-control:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 1000px var(--color-neutral-white) inset !important;
        -webkit-text-fill-color: var(--color-brand-primary) !important;
        transition: background-color 5000s ease-in-out 0s;
    }

[type=search] {
    outline-offset: 0 !important;
}

/* ---- Dynamic Group (Floating Label Pattern) ---- */
.dynamic-group {
    position: relative;
    margin-bottom: var(--space-field);
}

    .dynamic-group:has(> .form-control-lg) {
        --input-height-md: var(--input-height-lg);
    }

    .dynamic-group:has(> .form-control-sm) {
        --input-height-md: var(--input-height-sm);
    }

    .dynamic-group .floating-label {
        position: absolute;
        top: calc(var(--input-height-md) / 2);
        inset-inline-start: var(--spacing-md);
        transform: translateY(-50%);
        color: var(--text-secondary);
        pointer-events: none;
        transition: var(--transition-normal);
        margin: 0;
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-medium);
    }

    .dynamic-group > i {
        position: absolute;
        top: calc(var(--input-height-md) / 2);
        transform: translateY(-50%);
        inset-inline-end: var(--spacing-md);
        color: var(--text-secondary);
        pointer-events: none;
        transition: var(--transition-normal);
    }

    .dynamic-group .form-control:focus ~ i {
        color: var(--color-brand-primary);
    }

    .dynamic-group:has(> i) .form-control {
        padding-inline-end: var(--control-icon-zone) !important;
    }

    .dynamic-group.is-required .floating-label::after {
        content: " *";
        color: var(--color-danger);
        font-weight: var(--font-weight-bold);
    }

    .dynamic-group .form-control {
        height: var(--input-height-md);
        border-radius: var(--radius-control);
        background-color: var(--text-inverse);
        border: 1px solid var(--color-border);
        font-size: var(--font-size-base);
        color: var(--color-brand-primary);
        font-weight: var(--font-weight-medium);
        transition: all var(--transition-normal);
        box-shadow: none;
        padding: var(--spacing-sm);
    }

        .dynamic-group .form-control:focus ~ .floating-label,
        .dynamic-group .form-control:not(:placeholder-shown) ~ .floating-label {
            top: 0;
            font-size: var(--font-size-xs);
            font-weight: var(--font-weight-medium);
            background-color: var(--text-inverse);
            padding: 0 var(--spacing-xs);
            margin-inline-start: calc(var(--spacing-xs) * -1);
        }

        .dynamic-group .form-control:not(:placeholder-shown) ~ .floating-label {
            color: var(--text-secondary);
        }

        .dynamic-group .form-control:focus ~ .floating-label {
            color: var(--color-brand-primary);
        }

        .dynamic-group .form-control:focus {
            background-color: var(--text-inverse);
            border-color: var(--color-brand-primary);
            box-shadow: var(--box-shadow-focus);
        }

/* ---- Validation & Errors ---- */
.validator {
    color: var(--color-danger) !important;
    font-size: var(--font-size-xs) !important;
    font-weight: var(--font-weight-bold) !important;
    margin-top: var(--spacing-xs);
    margin-inline-start: var(--spacing-xs);
}

    .validator[style*="visibility: hidden"], .validator[style*="display: none"] {
        display: none !important;
    }

    .validator[style*="visibility: visible"], .validator[style*="display: inline"], .validator[style*="display: block"] {
        display: block !important;
        animation: fadeInValidator 0.3s ease;
    }

@keyframes fadeInValidator {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ErrorControl, .ErrorControl ~ .select2-container .select2-selection--single, .dropdown-toggle .dropdown-toggle-split.ErrorControl, .dynamic-group.has-error .form-control {
    background-color: var(--color-danger-bg) !important;
    border-color: var(--color-danger) !important;
}

.dynamic-group.has-error .floating-label {
    color: var(--color-danger) !important;
}

.WarningControl, .WarningControl ~ .select2-container .select2-selection--single {
    background-color: var(--color-warning-bg) !important;
    border-color: var(--color-warning-border) !important;
}

/* ---- Native Date Inputs ---- */
.dynamic-group input[type="date"] ~ .floating-label {
    top: 0;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    background-color: var(--text-inverse);
    padding: 0 var(--spacing-xs);
    margin-inline-start: calc(var(--spacing-xs) * -1);
    color: var(--color-neutral-gray-600);
}

.dynamic-group input[type="date"]:focus ~ .floating-label {
    color: var(--color-brand-primary);
}

input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.4;
    transition: var(--transition-fast);
    padding: var(--spacing-xs);
}

input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="date"]:focus::-webkit-calendar-picker-indicator {
    opacity: 1;
    filter: invert(19%) sepia(82%) saturate(1915%) hue-rotate(178deg) brightness(93%) contrast(98%);
}

/* ==========================================================================
   09. BUTTONS (BOOTSTRAP SEMANTIC OVERRIDES)
   ========================================================================== */
.btn {
    height: var(--input-height);
    border-radius: var(--radius-control);
    padding-inline: var(--spacing-lg);
    min-width: var(--btn-min-width);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    transition: var(--transition-fast);
    line-height: 1;
}

    .btn.btn-sm {
        height: var(--input-height-sm);
        border-radius: var(--radius-control-sm);
        padding-inline: var(--spacing-md);
        min-width: unset;
    }

/* ---- Primary Button (Bootstrap Override) ---- */
.btn-primary {
    background-color: var(--color-action);
    border: var(--border-width) solid var(--color-action);
    border-radius: var(--radius-control);
    color: var(--text-inverse);
    font-weight: var(--font-weight-medium);
}

    .btn-primary:hover, .btn-primary:focus,
    .btn-primary:not(:disabled):not(.disabled):active,
    .show > .btn-primary.dropdown-toggle {
        background-color: var(--color-action-hover);
        border-color: var(--color-action-hover);
        color: var(--text-inverse);
    }

        .btn-primary:focus, .btn-primary.focus,
        .btn-primary:not(:disabled):not(.disabled):active:focus {
            box-shadow: var(--box-shadow-focus);
        }

/* ---- Outline Primary Button (Bootstrap Override) ---- */
.btn-outline-primary {
    color: var(--color-action);
    background-color: transparent;
    border: var(--border-width) solid var(--color-action);
    border-radius: var(--radius-control);
}

    .btn-outline-primary:hover,
    .btn-outline-primary:not(:disabled):not(.disabled):active,
    .show > .btn-outline-primary.dropdown-toggle {
        background-color: var(--color-action-hover);
        border-color: var(--color-action-hover);
        color: var(--text-inverse);
    }

    .btn-outline-primary:focus, .btn-outline-primary.focus {
        box-shadow: var(--box-shadow-focus);
    }

/* ---- Status Buttons (Bootstrap Overrides Bound to Status Tokens) ---- */
.btn-danger {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
    color: var(--text-inverse);
}

    .btn-danger:hover, .btn-danger:focus,
    .btn-danger:not(:disabled):not(.disabled):active,
    .show > .btn-danger.dropdown-toggle {
        background-color: var(--color-danger-hover);
        border-color: var(--color-danger-hover);
        color: var(--text-inverse);
    }

        .btn-danger:focus, .btn-danger.focus,
        .btn-danger:not(:disabled):not(.disabled):active:focus {
            box-shadow: var(--box-shadow-focus-danger);
        }

.btn-success {
    background-color: var(--color-success);
    border-color: var(--color-success);
    color: var(--text-inverse);
}

    .btn-success:hover, .btn-success:focus,
    .btn-success:not(:disabled):not(.disabled):active,
    .show > .btn-success.dropdown-toggle {
        background-color: var(--color-success-hover);
        border-color: var(--color-success-hover);
        color: var(--text-inverse);
    }

        .btn-success:focus, .btn-success.focus,
        .btn-success:not(:disabled):not(.disabled):active:focus {
            box-shadow: var(--box-shadow-focus-success);
        }

/* ---- Link Button (Bootstrap Override) ---- */
.btn-link {
    color: var(--color-link);
}

    .btn-link:hover, .btn-link:focus {
        color: var(--color-link-hover);
    }

.btn-light,
.bg-light.rounded-pill {
    background-color: var(--color-neutral-gray-50) !important;
    color: var(--color-neutral-gray-700) !important;
    border: 1px solid var(--border-subtle) !important;
    transition: var(--transition-fast);
}

.btn-light {
    font-weight: var(--font-weight-medium);
}

    .btn-light:hover,
    .btn-light:focus {
        background-color: var(--color-neutral-gray-100) !important;
        border-color: var(--color-neutral-gray-300) !important;
        color: var(--color-neutral-gray-900) !important;
    }

.action-btn, .menu-toggle-btn {
    width: var(--input-height);
    height: var(--input-height);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-muted);
    transition: var(--transition-fast);
    flex-shrink: 0;
}

.action-btn {
    border-radius: var(--border-radius-circle);
    color: var(--color-brand-primary);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
}

.menu-toggle-btn {
    color: var(--color-neutral-gray-600);
    font-size: var(--font-size-lg);
    border: none;
    border-radius: var(--radius-control);
    cursor: pointer;
}

.action-btn:hover {
    background: var(--color-brand-primary-light);
    color: var(--color-brand-accent);
    text-decoration: none;
}

.menu-toggle-btn:hover {
    background: var(--color-brand-primary-light);
    color: var(--color-brand-primary);
}

/* ==========================================================================
   10. AVATARS
   ========================================================================== */
.avatar-img, .avatar-sm {
    width: var(--avatar-size-sm);
    height: var(--avatar-size-sm);
    border-radius: var(--border-radius-circle);
    object-fit: cover;
}

.avatar-img {
    border: 2px solid var(--color-brand-primary-light);
    transition: var(--transition-fast);
}

.profile-toggle:hover .avatar-img {
    border-color: var(--color-brand-accent);
}

.avatar-img-lg, .avatar-lg {
    width: var(--avatar-size-lg);
    height: var(--avatar-size-lg);
    border-radius: var(--border-radius-circle);
    object-fit: cover;
}

/* ==========================================================================
   11. CARDS & MODALS
   ========================================================================== */
.card, .modal-content {
    border-radius: var(--radius-surface);
    border: none;
}

.card {
    background-color: var(--surface-card);
    box-shadow: var(--box-shadow-sm);
    transition: var(--transition-normal);
    margin-bottom: var(--space-stack);
}

.hover-elevate {
    transition: var(--transition-normal);
}

    .hover-elevate:hover {
        box-shadow: var(--box-shadow-lg) !important;
        transform: translateY(-4px);
    }

.card-header {
    background-color: transparent;
    border-bottom: var(--border-width) solid var(--color-neutral-gray-100);
    padding: var(--spacing-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-brand-primary);
    border-radius: var(--radius-surface) var(--radius-surface) 0 0 !important;
}

.card-body {
    padding: var(--space-card);
}

.modal-content {
    background-color: var(--surface-modal);
    box-shadow: var(--box-shadow-lg);
}

.modal-dialog-scrollable .modal-content {
    max-height: 90vh;
}

.modal-header {
    border-bottom: none;
    padding: var(--space-card) var(--space-card) var(--spacing-sm) var(--space-card);
    align-items: center;
}

.modal-title {
    font-weight: var(--font-weight-bold);
    color: var(--color-brand-primary);
    margin: 0;
}

.modal-header .close {
    margin: 0;
    margin-inline-start: auto;
    padding: 0;
    opacity: 0.6;
    transition: var(--transition-fast);
}

    .modal-header .close:hover {
        opacity: 1;
        color: var(--color-danger);
    }

.modal-body {
    padding: var(--spacing-sm) var(--space-card) var(--space-card) var(--space-card);
}

.modal-search-sticky {
    position: sticky;
    top: calc(var(--spacing-sm) * -1);
    z-index: var(--z-index-sticky);
    background-color: var(--surface-modal);
    margin-top: calc(var(--spacing-sm) * -1);
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-md);
}

@media (min-width: 1200px) {
    .custom-modal-xxl {
        max-width: 95%;
    }
}

.top-0 {
    position: fixed;
    top: 0;
}

.bg-modal {
    position: fixed;
    inset: 0;
    background: var(--color-neutral-black);
    z-index: var(--z-index-modal-bg);
    opacity: 0;
}

/* ==========================================================================
   12. BADGES & DROPDOWNS
   ========================================================================== */
.alert {
    margin-bottom: var(--spacing-xs)
}

.badge {
    line-height: unset;
    border-radius: var(--border-radius-pill);
    font-weight: var(--font-weight-medium);
}

.badge-primary, .bg-primary {
    background-color: var(--color-brand-primary) !important;
    color: var(--text-inverse) !important;
}

.badge-success {
    background-color: var(--color-success) !important;
    color: var(--text-inverse) !important;
}

.badge-danger {
    background-color: var(--color-danger) !important;
    color: var(--text-inverse) !important;
}

.badge-warning {
    background-color: var(--color-warning) !important;
    color: var(--color-neutral-gray-900) !important;
}

.badge-info {
    background-color: var(--color-info) !important;
    color: var(--text-inverse) !important;
}

.bg-secondary, .bg-secondary:hover {
    background-color: var(--color-brand-secondary) !important;
    color: var(--text-inverse) !important;
}

.dropdown-menu {
    border: none;
    border-radius: var(--radius-menu);
    box-shadow: var(--box-shadow-lg);
}

.dropdown-item {
    transition: var(--transition-fast);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
}

    .dropdown-item.active, .dropdown-item:active, .dropdown-item:hover {
        background-color: var(--color-brand-primary-light);
        color: var(--color-brand-primary);
    }

.dropdown-toggle::after, .dropdown-toggle-split::after {
    margin-inline-start: var(--spacing-sm);
    margin-inline-end: var(--spacing-sm);
}

.btn-group {
    --radius-group: var(--radius-control);
}

    .btn-group > a {
        border-start-start-radius: var(--radius-group) !important;
        border-end-start-radius: var(--radius-group) !important;
        border-end-end-radius: unset !important;
        border-start-end-radius: unset !important;
    }

.dropdown-toggle-split {
    border-start-start-radius: unset !important;
    border-end-start-radius: unset !important;
    border-end-end-radius: var(--radius-group, var(--radius-control)) !important;
    border-start-end-radius: var(--radius-group, var(--radius-control)) !important;
}

.dropdown-menu-user {
    min-width: var(--sidebar-width);
    max-width: var(--dropdown-max-width);
}

.dropdown-menu-notifications {
    width: var(--dropdown-width);
    max-width: 100vw;
}

/* ==========================================================================
   13. LEGACY TABLES & GRIDS
   ========================================================================== */
.border-2 {
    border-top: 2px solid var(--color-brand-secondary) !important;
    border-bottom: 2px solid var(--color-brand-secondary) !important;
}

.table {
    background-color: transparent;
    margin-bottom: 0;
}

    .table td, .table th {
        border-top: none;
        border-bottom: var(--border-width) solid var(--border-subtle);
        padding: var(--spacing-xs);
        vertical-align: middle;
        height: var(--input-height);
        font-variant-numeric: tabular-nums;
    }

    .table tr th {
        box-shadow: inset 0 0px 0 var(--color-neutral-gray-100) !important;
        align-content: center;
    }

    .table thead th {
        border-bottom: unset;
        border-top: unset;
    }

    .table tr:hover {
        background-color: var(--surface-muted);
    }

.table-hover tbody tr:hover {
    background-color: var(--text-inverse) !important;
    color: var(--color-brand-primary);
}

td .form-control, td .form-dropdownlist {
    max-width: 100%;
    text-align: center;
}

.grid-header {
    position: sticky;
    top: var(--header-height);
    background-color: var(--text-inverse);
    box-shadow: inset 0 -2px 0 var(--color-brand-secondary) !important;
    text-align: center;
    margin-inline: 0;
    z-index: 5 !important;
}

    .grid-header + .row-top {
        box-shadow: unset !important;
    }

    .grid-header + .row-bottom {
        top: calc(var(--header-height) + 40px);
    }

    .grid-header:hover {
        background-color: var(--text-inverse) !important;
    }

.grid-footer, .grid-footer-border {
    border-top: 2px solid var(--color-brand-secondary) !important;
    background-color: var(--surface-muted) !important;
}

    .grid-footer:hover {
        background-color: var(--text-inverse) !important;
    }

/* ==========================================================================
   14. AML TABLE SYSTEM
   ========================================================================== */
.aml-table-wrapper {
    width: 100%;
    position: relative;
}

@media (max-width: 991px) {
    .aml-table-wrapper {
        overflow: auto;
        max-height: calc(100vh - var(--page-header-height, 85px) - var(--spacing-xl, 2rem));
        -webkit-overflow-scrolling: touch;
    }

    .aml-table th {
        top: 0 !important;
    }

    .aml-table tr:nth-child(n+2) th {
        top: var(--table-header-height, 48px) !important;
    }

    .aml-table tfoot th,
    .aml-table tfoot td {
        bottom: 0 !important;
    }
}

.aml-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    white-space: nowrap;
}

    /* ---- Table Header (Sticky) ---- */
    .aml-table th {
        position: sticky;
        top: var(--page-header-height, 85px);
        background-color: var(--color-neutral-gray-50) !important;
        color: var(--color-neutral-gray-700) !important;
        font-weight: var(--font-weight-bold);
        font-size: var(--font-size-sm);
        letter-spacing: var(--letter-spacing-wide);
        padding: var(--spacing-td-header-y, 1.15rem) var(--spacing-md, 1rem);
        vertical-align: middle;
        text-align: center;
        border: none !important;
        border-top: none !important;
        border-bottom: 2px solid var(--border-subtle) !important;
        z-index: var(--z-index-sticky-elevated, 20);
    }

        .aml-table th::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: calc(var(--table-shadow-size, 6px) * -1);
            height: var(--table-shadow-size, 6px);
            background: linear-gradient(to bottom, var(--color-shadow-sticky-start, rgba(5, 68, 94, 0.08)) 0%, var(--color-shadow-sticky-end, rgba(5, 68, 94, 0)) 100%);
            pointer-events: none;
        }

    .aml-table tr:nth-child(n+2) th {
        top: calc(var(--page-header-height, 85px) + var(--table-header-height, 48px));
        border-top: var(--border-width, 1px) solid var(--color-neutral-gray-100) !important;
    }

        .aml-table tr:nth-child(n+2) th::after {
            display: none;
        }

    /* ---- Table Footer (Sticky) ---- */
    .aml-table tfoot th,
    .aml-table tfoot td {
        position: sticky;
        bottom: 0;
        background-color: var(--text-inverse);
        color: var(--color-neutral-gray-700);
        font-weight: var(--font-weight-bold);
        border: none !important;
        border-top: var(--border-width, 1px) solid var(--border-subtle) !important;
        z-index: var(--z-index-sticky-elevated, 20);
    }

        .aml-table tfoot th::after,
        .aml-table tfoot td::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: calc(var(--table-shadow-size, 6px) * -1);
            height: var(--table-shadow-size, 6px);
            background: linear-gradient(to top, var(--color-shadow-sticky-start, rgba(5, 68, 94, 0.08)) 0%, var(--color-shadow-sticky-end, rgba(5, 68, 94, 0)) 100%);
            pointer-events: none;
        }

    /* ---- Table Body & Rows ---- */
    .aml-table td {
        padding: var(--spacing-td-y, 0.85rem) var(--spacing-md, 1rem);
        vertical-align: middle;
        text-align: center;
        border-bottom: var(--border-width, 1px) solid var(--color-neutral-gray-100);
        background-color: var(--text-inverse);
        transition: background-color var(--transition-fast, 0.2s);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        font-variant-numeric: tabular-nums;
    }

    .aml-table tr:last-child td {
        border-bottom: none;
    }

    .aml-table tr:hover td {
        background-color: var(--color-neutral-gray-50);
    }

    /* ---- Column Modifiers ---- */
    .aml-table .col-highlight {
        background-color: var(--color-table-highlight, rgba(0,0,0,0.015));
        font-weight: var(--font-weight-bold, 700);
    }

    .aml-table tr:hover td.col-highlight {
        background-color: var(--color-table-highlight-hover, rgba(0,0,0,0.03));
    }

    .aml-table th.col-separator,
    .aml-table td.col-separator {
        border-inline-end: var(--border-width, 1px) solid var(--border-subtle) !important;
    }

    .aml-table .text-break-word {
        min-width: var(--table-col-text-min, 220px);
        max-width: var(--table-col-text-max, 280px);
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* ---- Interactive Elements Inside Table ---- */
    .aml-table .form-control {
        min-width: var(--input-min-width-table, 110px);
        height: var(--input-height-sm, 35px);
        padding: var(--spacing-xs, 0.25rem) var(--spacing-sm, 0.5rem);
        border-radius: var(--radius-control-sm);
        border: var(--border-width, 1px) solid var(--color-border);
        box-shadow: none;
    }

        .aml-table .form-control:focus {
            border-color: var(--color-brand-primary);
        }

    .aml-table .btn {
        padding: var(--spacing-xs) var(--spacing-sm) !important;
        font-size: var(--font-size-xs, 0.75rem) !important;
        border-radius: var(--radius-control-sm);
        min-width: unset !important;
        height: auto;
        line-height: 1.5;
    }

    .aml-table .btn-group {
        --radius-group: var(--radius-control-sm);
        box-shadow: var(--box-shadow-xs, 0 2px 4px rgba(0,0,0,0.05));
    }

    .aml-table .dropdown-toggle-split {
        padding-inline: var(--spacing-sm) !important;
    }

/* ---- Table Corners Fix (Inside Flush Card Body) ---- */
.card-body.p-0 .aml-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

    .card-body.p-0 .aml-table tr:last-child td:first-child,
    .card-body.p-0 .aml-table tr:last-child th:first-child {
        border-end-start-radius: var(--radius-surface) !important;
    }

    .card-body.p-0 .aml-table tr:last-child td:last-child,
    .card-body.p-0 .aml-table tr:last-child th:last-child {
        border-end-end-radius: var(--radius-surface) !important;
    }

.card-body.p-0 > .aml-table-wrapper:first-child .aml-table tr:first-child th:first-child,
.card-body.p-0 > .aml-table-wrapper:first-child .aml-table tr:first-child td:first-child {
    border-start-start-radius: var(--radius-surface) !important;
}

.card-body.p-0 > .aml-table-wrapper:first-child .aml-table tr:first-child th:last-child,
.card-body.p-0 > .aml-table-wrapper:first-child .aml-table tr:first-child td:last-child {
    border-start-end-radius: var(--radius-surface) !important;
}

/* ==========================================================================
   15. PAGINATION
   ========================================================================== */
.pagination-ys {
    padding-left: 0;
    margin: var(--spacing-xl) 0;
    border-radius: var(--radius-control-sm);
}

    .pagination-ys table > tbody > tr > td {
        border: none;
        padding: 0;
        border-bottom: none;
    }

    .pagination-ys table {
        margin-top: var(--spacing-lg);
    }

    .pagination-ys tr {
        border-bottom: none !important;
    }

    .pagination-ys table > tbody > tr > td > a, .pagination-ys table > tbody > tr > td > span {
        position: relative;
        float: inline-start;
        padding: var(--spacing-sm) var(--spacing-md);
        line-height: 1.42857143;
        text-decoration: none;
        border: var(--border-width) solid var(--border-subtle);
        margin-inline-start: -1px;
    }

    .pagination-ys table > tbody > tr > td > span {
        z-index: 2;
        color: var(--color-neutral-gray-500);
        background-color: var(--surface-muted);
        cursor: default;
    }

        .pagination-ys table > tbody > tr > td > a:focus, .pagination-ys table > tbody > tr > td > a:hover, .pagination-ys table > tbody > tr > td > span:focus, .pagination-ys table > tbody > tr > td > span:hover {
            color: var(--color-brand-secondary);
            background-color: var(--color-neutral-gray-200);
            border-color: var(--color-neutral-gray-200);
        }

    .pagination-ys table > tbody > tr:hover {
        background-color: transparent;
    }

/* ==========================================================================
   16. TABS & COLLAPSE TOGGLES
   ========================================================================== */
.nav-tabs:not(.wizard-stepper) {
    display: flex;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid var(--border-subtle);
    scrollbar-width: none;
    padding-bottom: 0 !important;
    margin-bottom: 0;
}

    .nav-tabs:not(.wizard-stepper)::-webkit-scrollbar {
        display: none;
    }

    .nav-tabs:not(.wizard-stepper) .nav-item {
        flex: 0 0 auto;
    }

    .nav-tabs:not(.wizard-stepper) .nav-link {
        border: none !important;
        border-bottom: 3px solid transparent !important;
        color: var(--color-neutral-gray-600) !important;
        border-radius: 0 !important;
        padding: var(--spacing-md) var(--spacing-lg) !important;
        font-weight: var(--font-weight-bold);
        font-size: var(--font-size-md);
        transition: all var(--transition-fast);
        background-color: transparent !important;
    }

        .nav-tabs:not(.wizard-stepper) .nav-link:hover {
            color: var(--color-brand-primary) !important;
            background-color: var(--color-neutral-gray-100) !important;
            border-bottom-color: var(--color-neutral-gray-300) !important;
        }

        .nav-tabs:not(.wizard-stepper) .nav-link.active {
            color: var(--color-brand-primary) !important;
            border-bottom-color: var(--color-brand-primary) !important;
            background-color: transparent !important;
        }

        .nav-tabs:not(.wizard-stepper) .nav-link i {
            margin-inline-end: var(--spacing-sm);
            font-size: 1.1em;
        }

.advanced-filter-toggle .toggle-icon {
    transition: transform var(--transition-fast);
}

.advanced-filter-toggle[aria-expanded="true"] .toggle-icon {
    transform: rotate(180deg);
}

/* ==========================================================================
   17. WIZARD STEPPER
   ========================================================================== */
.wizard-stepper {
    display: flex;
    justify-content: space-between;
    position: relative;
    border: none !important;
}

    .wizard-stepper::before {
        content: "";
        position: absolute;
        top: calc(var(--step-circle-size) / 2);
        left: 0;
        right: 0;
        height: var(--border-width-md);
        background-color: var(--color-neutral-gray-200);
        z-index: 0;
    }

    .wizard-stepper .nav-item {
        position: relative;
        z-index: 1;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .wizard-stepper .nav-link {
        background-color: transparent !important;
        color: var(--color-neutral-gray-400);
        font-weight: var(--font-weight-bold);
        border: none;
        padding: 0;
        transition: var(--transition-fast);
        margin-top: var(--spacing-sm);
    }

.step-circle {
    width: var(--step-circle-size);
    height: var(--step-circle-size);
    border-radius: var(--border-radius-circle);
    background-color: var(--text-inverse);
    border: 2px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
    color: var(--color-neutral-gray-500);
    font-weight: var(--font-weight-bold);
}

.wizard-stepper .nav-item.active-step .step-circle, .wizard-stepper .nav-item.completed .step-circle {
    border-color: var(--color-brand-primary);
    background-color: var(--color-brand-primary);
    color: var(--text-inverse);
    box-shadow: 0 0 0 4px var(--color-brand-primary-light);
}

.wizard-stepper .nav-item.active-step .nav-link, .wizard-stepper .nav-item.completed .nav-link {
    color: var(--color-brand-primary) !important;
}

.wizard-stepper ~ .tab-content {
    display: grid !important;
    grid-template-columns: 1fr;
    align-items: start;
}

    .wizard-stepper ~ .tab-content > .tab-pane {
        grid-area: 1 / 1;
        display: block !important;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease-in-out;
        margin: 0 !important;
    }

        .wizard-stepper ~ .tab-content > .tab-pane.active {
            visibility: visible;
            opacity: 1;
            pointer-events: auto;
        }

.wizard-btn-next, .wizard-btn-save {
    margin-inline-start: auto !important;
}

/* ==========================================================================
   18. SWITCHES & CUSTOM CHECKBOXES
   ========================================================================== */
.switch ~ span, label .switch {
    vertical-align: middle;
}

.switch {
    position: relative;
    display: inline-block;
    width: var(--switch-width);
    height: var(--switch-height);
    margin-bottom: 0;
}

    .switch input {
        opacity: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-neutral-gray-400);
    transition: var(--transition-normal);
}

    .slider:before {
        position: absolute;
        content: "";
        height: var(--switch-knob-size);
        width: var(--switch-knob-size);
        left: var(--switch-knob-offset);
        bottom: var(--switch-knob-offset);
        background-color: var(--text-inverse);
        transition: var(--transition-normal);
    }

input:checked + .slider {
    background-color: var(--color-brand-primary);
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--color-brand-primary);
}

input:checked + .slider:before {
    transform: translateX(calc(var(--switch-width) - var(--switch-knob-size) - (var(--switch-knob-offset) * 2)));
}

.slider.round {
    border-radius: var(--border-radius-pill);
}

    .slider.round:before {
        border-radius: var(--border-radius-circle);
    }

label .switch {
    margin-bottom: unset !important;
}

/* ---- Star Checkbox (Favorites) ---- */
.star-checkbox {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
    position: relative;
}

    .star-checkbox input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    .star-checkbox .star-icon::before {
        content: "\f005";
        font-family: "Font Awesome 5 Free";
        font-weight: 400;
        font-size: 1.5rem;
        color: var(--color-neutral-gray-400);
        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.2s;
        display: inline-block;
    }

    .star-checkbox input[type="checkbox"]:checked ~ .star-icon::before {
        font-weight: 900;
        color: var(--color-warning);
    }

    .star-checkbox:hover .star-icon::before {
        transform: scale(1.2);
    }

/* ---- Tick Checkbox (Conciliation) ---- */
.tick-checkbox {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
    position: relative;
}

    .tick-checkbox input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    .tick-checkbox .tick-icon::before {
        content: "\f058";
        font-family: "Font Awesome 5 Free";
        font-weight: 400;
        font-size: 1.35rem;
        color: var(--color-neutral-gray-400);
        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.2s;
        display: inline-block;
    }

    .tick-checkbox input[type="checkbox"]:checked ~ .tick-icon::before {
        font-weight: 900;
        color: var(--color-success);
    }

    .tick-checkbox:hover .tick-icon::before {
        transform: scale(1.2);
    }

/* ==========================================================================
   18b. HOVER-REVEAL LINE ACTIONS (VOUCHERS & JOURNAL ENTRY)
   ========================================================================== */
.Attachment .fa-trash-alt {
    display: none;
}

.Attachment:hover .fa-trash-alt {
    display: inline-block;
    position: fixed;
    z-index: var(--z-index-header);
}

.AccountsDiv .AccountInfo {
    display: none;
}

.AccountsDiv:hover .AccountInfo {
    display: inline-block;
    position: absolute;
    z-index: var(--z-index-header);
    margin-inline-end: var(--spacing-xl);
}

/* ==========================================================================
   19. FILE UPLOAD
   ========================================================================== */

/* ---- Attachment Chip (Hover-Reveal Delete) ---- */
.Attachment .fa-trash-alt {
    display: none;
}

.Attachment:hover .fa-trash-alt {
    display: inline-block;
    position: fixed;
    z-index: var(--z-index-header);
}

/* ---- Inline Account Info (Hover-Reveal Statement Link) ---- */
.AccountsDiv .AccountInfo {
    display: none;
}

.AccountsDiv:hover .AccountInfo {
    display: inline-block;
    position: absolute;
    z-index: var(--z-index-header);
    margin-inline-end: 30px;
}

.aml-file-upload {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: var(--input-height-lg);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-control);
    background-color: var(--color-neutral-gray-50);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--transition-fast);
    cursor: pointer;
    overflow: hidden;
}

    .aml-file-upload:hover {
        border-color: var(--color-brand-primary);
        background-color: var(--color-brand-primary-light);
    }

    .aml-file-upload input[type="file"] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0 !important;
        cursor: pointer;
        z-index: 5;
    }

    .aml-file-upload .upload-visual {
        text-align: center;
        color: var(--color-neutral-gray-500);
        z-index: 1;
        pointer-events: none;
    }

        .aml-file-upload .upload-visual i {
            transition: var(--transition-fast);
        }

        .aml-file-upload .upload-visual .file-text {
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-bold);
            margin-top: var(--spacing-sm);
            display: block;
            max-width: 100%;
            white-space: normal;
            word-wrap: break-word;
            overflow-wrap: break-word;
            line-height: 1.5;
            padding: 0 var(--spacing-sm);
        }

/* ==========================================================================
   20. PROGRESS BLOCKER & SPINNER
   ========================================================================== */
.aml-progress-blocker {
    position: fixed;
    inset: 0;
    background-color: transparent;
    z-index: 999998;
}

.aml-top-loader-pill {
    position: fixed;
    top: calc(var(--header-height) / 2);
    left: 50%;
    background-color: var(--text-inverse);
    color: var(--color-brand-primary);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius-pill);
    border: 1px solid var(--color-brand-primary-light);
    box-shadow: var(--box-shadow-brand);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    z-index: 999999;
    animation: slideDownCentered 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.aml-progress-text {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    margin: 0;
}

.aml-spinner-ring {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--color-brand-primary-light);
    border-top-color: var(--color-brand-primary);
    border-radius: var(--border-radius-circle);
    animation: spinRing 0.8s linear infinite;
}

@keyframes slideDownCentered {
    from {
        transform: translate(-50%, -120%);
        opacity: 0;
    }

    to {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

@keyframes spinRing {
    100% {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   21. VENDOR OVERRIDES (SELECT2, JQUERY UI, TOASTR, GOOGLE CHARTS)
   ========================================================================== */

/* ---- Select2 ---- */
.card-body .select2-container, .modal-body .select2-container, .table .select2-container, .dynamic-group .select2-container {
    width: 100% !important;
}

.select2 .select2-container--default {
    width: auto;
}

.select2-container--open {
    border: none !important;
}

.select2-container--default .select2-selection--single, .dynamic-group.is-select .select2-container .select2-selection--single {
    height: var(--input-height-md) !important;
    padding: var(--spacing-sm) !important;
    background-color: var(--text-inverse) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-control) !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: none !important;
    font-size: var(--font-size-sm)
}

    .select2-container--default .select2-selection--single .select2-selection__rendered, .dynamic-group.is-select .select2-container .select2-selection--single .select2-selection__rendered {
        color: var(--color-brand-primary) !important;
        font-weight: var(--font-weight-medium) !important;
        font-size: var(--font-size-base) !important;
        line-height: normal !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        text-align: start !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow, .dynamic-group.is-select .select2-container .select2-selection--single .select2-selection__arrow {
        display: none !important;
    }

.select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--single, .dynamic-group.is-select .select2-container.select2-container--open .select2-selection--single {
    border-color: var(--color-brand-primary) !important;
    box-shadow: var(--box-shadow-focus) !important;
}

.dynamic-group.is-select .floating-label {
    top: 0 !important;
    transform: translateY(-50%) !important;
    font-size: var(--font-size-xs) !important;
    color: var(--color-brand-primary) !important;
    font-weight: var(--font-weight-bold) !important;
    background-color: var(--text-inverse) !important;
    padding: 0 var(--spacing-xs) !important;
    margin-inline-start: calc(var(--spacing-xs) * -1) !important;
    z-index: 2 !important;
}

.dynamic-group.has-error.is-select .select2-selection--single {
    border-color: var(--color-danger) !important;
    background-color: var(--color-danger-bg) !important;
}

.dynamic-group.has-error.is-select .select2-selection__rendered {
    color: var(--color-danger) !important;
}

.select2-dropdown {
    border: 1px solid var(--color-neutral-gray-500) !important;
    border-top: none !important;
    border-radius: 0 0 var(--radius-menu) var(--radius-menu) !important;
    box-shadow: var(--box-shadow-menu) !important;
    background-color: var(--text-inverse) !important;
    z-index: 9999 !important;
    margin-top: 0 !important;
    overflow: hidden;
    font-family: var(--font-family-base) !important;
}

.dynamic-group.is-select .select2-container.select2-container--open .select2-selection--single {
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-color: transparent !important;
}

.select2-search--dropdown {
    padding: var(--spacing-sm) !important;
    background-color: var(--text-inverse) !important;
    border-bottom: 1px solid var(--color-neutral-gray-100) !important;
}

    .select2-search--dropdown .select2-search__field {
        border: 1px solid var(--border-subtle) !important;
        background-color: var(--text-inverse) !important;
        border-radius: var(--radius-control-sm) !important;
        padding: var(--spacing-xs) var(--spacing-sm) !important;
        height: var(--input-height) !important;
        outline: none !important;
        font-family: inherit !important;
        transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
    }

        .select2-search--dropdown .select2-search__field:focus {
            border-color: var(--color-brand-primary-light) !important;
            box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.08) !important;
        }

select.select2-hidden-accessible {
    display: none !important;
}

select:not(.select2-hidden-accessible) {
    opacity: 0;
    height: var(--input-height-md);
}

.select2-results__options {
    padding: 0 !important;
}

.select2-results__option {
    padding: var(--spacing-sm) var(--spacing-md) !important;
    font-size: var(--font-size-sm) !important;
    color: var(--color-neutral-gray-700) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    background-color: transparent !important;
    transition: background-color var(--transition-fast), color var(--transition-fast) !important;
}

    .select2-results__option:last-child {
        border-bottom: none !important;
    }

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--color-brand-primary-light) !important;
    color: var(--color-brand-primary) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-medium) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    margin: 0 !important;
    cursor: pointer !important;
}

.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option--highlighted[aria-selected=true] {
    background-color: var(--color-brand-primary) !important;
    color: var(--text-inverse) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-bold) !important;
    border-bottom: 1px solid var(--color-brand-primary) !important;
}

/* ---- jQuery UI Autocomplete ---- */
.ui-autocomplete {
    box-sizing: border-box !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-menu) !important;
    box-shadow: var(--box-shadow-menu) !important;
    background-color: var(--text-inverse) !important;
    z-index: 9999 !important;
    margin-top: var(--spacing-xs) !important;
    padding: 0 !important;
    max-height: var(--menu-max-height);
    overflow-y: auto;
    overflow-x: hidden;
    position: absolute;
    direction: inherit;
    text-align: start;
    font-family: var(--font-family-base) !important;
}

.ui-front {
    z-index: 99999 !important;
}

.ui-menu .ui-menu-item {
    margin: 0 !important;
    padding: 0 !important;
    list-style-type: none !important;
}

.ui-menu .ui-menu-item-wrapper {
    padding: var(--spacing-sm) var(--spacing-md) !important;
    font-size: var(--font-size-sm) !important;
    color: var(--color-neutral-gray-700) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    border-radius: 0 !important;
    transition: background-color var(--transition-fast), color var(--transition-fast) !important;
    display: block;
    background-color: transparent !important;
}

.ui-menu .ui-menu-item:last-child .ui-menu-item-wrapper {
    border-bottom: none !important;
}

.ui-menu .ui-menu-item-wrapper.ui-state-active, .ui-menu .ui-menu-item-wrapper.ui-state-focus, .ui-menu .ui-menu-item-wrapper:hover {
    background-color: var(--color-neutral-gray-100) !important;
    color: var(--color-brand-primary) !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    cursor: pointer !important;
    font-weight: var(--font-weight-bold) !important;
}

.aml-selected-item > .ui-menu-item-wrapper, .aml-selected-item > .ui-menu-item-wrapper.ui-state-active, .aml-selected-item > .ui-menu-item-wrapper.ui-state-focus, .aml-selected-item > .ui-menu-item-wrapper:hover {
    background-color: var(--color-brand-primary) !important;
    color: var(--text-inverse) !important;
    font-weight: var(--font-weight-bold) !important;
    border-bottom: 1px solid var(--color-brand-primary) !important;
}

/* ---- Toastr ---- */
#toast-container {
    position: fixed !important;
    top: var(--spacing-sm) !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    width: var(--toast-width) !important;
    pointer-events: none;
    z-index: var(--z-index-modal-bg) !important;
}

body #toast-container > div {
    position: relative !important;
    pointer-events: auto !important;
    overflow: hidden !important;
    margin: 0 0 var(--spacing-sm) 0 !important;
    width: 100% !important;
    opacity: 1;
    box-shadow: var(--box-shadow-md) !important;
    border-radius: var(--radius-menu) !important;
    border: none !important;
    font-family: inherit !important;
    color: var(--text-inverse) !important;
    padding: var(--spacing-md) var(--spacing-xl) var(--spacing-md) var(--spacing-md) !important;
    animation: toastPopIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}

#toast-container > div.rtl, .rtl #toast-container > div {
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) var(--spacing-xl) !important;
}

@keyframes toastPopIn {
    0% {
        transform: translateY(-30px) scale(0.9);
        opacity: 0;
    }

    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

#toast-container > div.toast-success, #toast-container > div.toast-error, #toast-container > div.toast-info, #toast-container > div.toast-warning {
    background-image: none !important;
}

#toast-container > div.toast-success {
    background-color: var(--color-success) !important;
}

#toast-container > div.toast-error {
    background-color: var(--color-danger) !important;
}

#toast-container > div.toast-info {
    background-color: var(--color-info) !important;
}

#toast-container > div.toast-warning {
    background-color: var(--color-warning) !important;
}

#toast-container .toast-close-button {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: var(--spacing-sm) !important;
    color: var(--text-inverse) !important;
    text-shadow: none !important;
    opacity: 0.6 !important;
    font-weight: var(--font-weight-regular) !important;
    font-size: var(--font-size-xl) !important;
    outline: none !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: opacity var(--transition-fast), transform var(--transition-fast) !important;
}

.rtl #toast-container .toast-close-button, #toast-container > div.rtl .toast-close-button {
    left: var(--spacing-sm) !important;
    right: auto !important;
}

#toast-container .toast-close-button:hover {
    opacity: 1 !important;
    transform: translateY(-50%) scale(1.15) !important;
}

#toast-container .toast-title {
    font-weight: var(--font-weight-bold) !important;
    font-size: var(--font-size-sm) !important;
    margin-bottom: var(--spacing-xs) !important;
}

#toast-container .toast-message {
    font-size: var(--font-size-sm) !important;
    line-height: 1.5 !important;
    word-break: break-word !important;
}

/* ---- Google Charts ---- */
.google-visualization-orgchart-node, .google-visualization-orgchart-nodesel {
    background: var(--color-brand-secondary) !important;
    border: none !important;
    color: var(--text-inverse) !important;
    font-family: inherit !important;
    font-weight: var(--font-weight-regular) !important;
    font-size: var(--font-size-base) !important;
    padding: var(--spacing-md) !important;
    width: 160px !important;
}

/* ==========================================================================
   22. PAGE SPECIFIC (LOGIN)
   ========================================================================== */
.login-page-procedural {
    background-color: var(--color-brand-primary);
}

.login-card {
    background-color: var(--text-inverse);
    border-radius: var(--radius-surface);
    padding: var(--spacing-3xl);
    box-shadow: var(--box-shadow-lg);
    width: 100%;
    --input-height-md: var(--input-height-lg);
}

.login-logo {
    max-height: 55px;
    width: auto;
}

.btn-login-primary {
    background-color: var(--color-brand-primary);
    color: var(--text-inverse);
    border: none;
    border-radius: var(--radius-control);
    height: var(--input-height-lg);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    box-shadow: var(--box-shadow-sm);
    transition: var(--transition-normal);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-login-primary:hover, .btn-login-primary:focus {
        transform: translateY(-3px);
        box-shadow: var(--box-shadow-lg);
        color: var(--text-inverse);
        filter: brightness(1.15);
    }

.login-card .form-control {
    direction: ltr !important;
    text-align: left !important;
    padding-top: 0;
    padding-bottom: 0;
}

@media (max-width: 576px) {
    .login-card {
        padding: var(--spacing-xxl) var(--spacing-md);
    }
}

.modern-link {
    color: var(--color-neutral-gray-500);
    transition: var(--transition-fast);
    text-decoration: none;
}

    .modern-link:hover {
        color: var(--color-brand-accent);
        text-decoration: none;
    }

/* ==========================================================================
   23. ANIMATIONS & EFFECTS
   ========================================================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}

.delay-1 {
    animation-delay: 0.1s;
}

.delay-2 {
    animation-delay: 0.2s;
}

.delay-3 {
    animation-delay: 0.3s;
}

.delay-4 {
    animation-delay: 0.4s;
}

.delay-5 {
    animation-delay: 0.5s;
}

/* ==========================================================================
   24. RESPONSIVE MISCELLANEOUS
   ========================================================================== */
@media (max-width: 768px) {
    .larger-font {
        font-size: var(--font-size-lg);
    }
}

@media (min-width: 768px) {
    .card-body .control-group {
        margin-bottom: var(--spacing-sm);
    }

    .sub-hover {
        display: none;
    }

    .hover:hover {
        background-color: rgba(0,0,0,0.03);
    }

        .hover:hover .sub-hover {
            position: relative;
            display: inline;
        }
}

/* ==========================================================================
   25. PRINT MEDIA
   ========================================================================== */
@media print {
    html, body, #wrapper, #page-content-wrapper, .app-scrollable-content {
        height: auto !important;
        min-height: 100% !important;
        overflow: visible !important;
        position: static !important;
        display: block !important;
    }

    .card-body div[class*=col], .modal-body, .page-header > div:first-child {
        padding: unset;
    }

    .bg-secondary, .page-header, body {
        background-color: var(--text-inverse) !important;
    }

    body {
        padding-top: 15px;
        font-size: medium;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    #sidebar-wrapper, .app-header, .floating-actions, #History, #Remark, .btn, .card-header > :not(:first-child), .page-header > div:not(:first-child) {
        display: none !important;
    }

    #page-content-wrapper {
        width: 100%;
        max-width: 100%;
        padding: 0 !important;
    }

    #lblPageCounter:after {
        content: counter(page);
        counter-increment: page;
    }

    .select2-selection__arrow {
        display: none;
    }

    .card {
        margin-bottom: 2rem;
        border: none;
        box-shadow: none;
    }

    .modal-body {
        margin-top: 2rem;
        border: var(--border-width) solid var(--border-subtle);
    }

    .row {
        margin: 0;
    }

    .page-header {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        box-shadow: none !important;
        margin-top: 2rem;
        margin-bottom: 3rem;
    }

        .page-header > div:first-child > span {
            display: inline;
            font-size: var(--font-size-xl);
            font-weight: 700;
            border-bottom: solid var(--border-width-thick) var(--color-brand-primary);
        }

    .grid-header, .table tr:first-child {
        border-bottom-width: var(--border-width) !important;
    }

    select, .select2-selection {
        -webkit-appearance: none;
        -moz-appearance: none;
        border: none !important;
    }

    .col-form-label, .form-label {
        font-size: large;
    }

    .form-control, .select2-container .select2-selection--single {
        border: none;
        font-size: medium;
    }

    .table-responsive tr:first-child {
        background-color: var(--color-brand-secondary);
        color: var(--color-neutral-black);
        border-bottom: 0.15rem solid var(--color-brand-secondary);
    }

    .print-break {
        page-break-after: always;
    }

    .border-print-0, .form-control, .form-label-bold, .multiselect, .select2-selection, .table {
        border: none !important;
    }

    .bg-secondary {
        color: var(--color-brand-secondary) !important;
    }

    .col-auto {
        padding-left: 0;
        padding-right: 0;
    }

    ::placeholder, ::-webkit-input-placeholder, ::-moz-placeholder, :-ms-input-placeholder {
        color: transparent !important;
    }
}