/* ==========================================================================
   e-Count Financial Suite — Custom Design Enhancements & Select2 Polish
   ========================================================================== */

/* Brand & Typography */
.brand-logo-text {
    font-weight: 800;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, #3E97FF 0%, #7239EA 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Aside Menu Title Alignment & Multi-word Centering */
#kt_aside_menu .menu>.menu-item>.menu-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#kt_aside_menu .menu>.menu-item>.menu-link .menu-title {
    display: flex;
    justify-content: center;
    text-align: center;
    width: 100%;
    font-size: 0.775rem;
    line-height: 1.2;
    white-space: normal;
    word-break: normal;
    margin-top: 0.25rem;
}

/* Card & Shadow Elevations */
.card {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card-hover-elevate {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-hover-elevate:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.08) !important;
}

/* Select2 Global Enhancements to Match Metronic Solid Theme */
/* Single and multiple share the multiple's natural theme height */
.select2-container--bootstrap5 .select2-selection--single {
    height: calc(1.5em + 1.55rem + 2px) !important;
    padding: 0.575rem 1rem !important;
    border-radius: 0.475rem !important;
}

.select2-container--bootstrap5 .select2-selection--single.form-select-sm {
    height: calc(1.5em + 0.85rem + 2px) !important;
    padding: 0.425rem 0.75rem !important;
    font-size: 0.925rem !important;
}

/* Multiple keeps its natural theme height (min-height so it can grow with selected tags) */
.select2-container--bootstrap5 .select2-selection--multiple {
    min-height: calc(1.5em + 1.55rem + 2px) !important;
    border-radius: 0.475rem !important;
}

.select2-container--bootstrap5 .select2-dropdown {
    border-radius: 0.475rem !important;
    box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.08) !important;
    border: 1px solid var(--bs-border-color, #f1f1f4) !important;
    background-color: var(--bs-body-bg, #ffffff) !important;
}

.select2-container--bootstrap5 .select2-search--dropdown .select2-search__field {
    border-radius: 0.35rem !important;
    padding: 0.45rem 0.75rem !important;
    font-size: 0.875rem !important;
    border: 1px solid var(--bs-border-color, #e4e6ef) !important;
}

.select2-container--bootstrap5 .select2-results__option--highlighted {
    background-color: var(--bs-primary, #3E97FF) !important;
    color: #ffffff !important;
}

.select2-container--bootstrap5 .select2-results__option {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
}

/* COA Tree Table Styling & Hierarchical Guides */
.tree-node-row {
    transition: background-color 0.15s ease;
}

.tree-node-row:hover {
    background-color: rgba(62, 151, 255, 0.04) !important;
}

.tree-indent-guide {
    display: inline-block;
    position: relative;
}

.tree-indent-guide::before {
    content: "";
    position: absolute;
    top: -12px;
    left: -14px;
    width: 12px;
    height: 24px;
    border-left: 1px dashed var(--bs-gray-400, #d8d8e4);
    border-bottom: 1px dashed var(--bs-gray-400, #d8d8e4);
    pointer-events: none;
}

/* Accounting Numeric Alignment & Balance Formats */
.accounting-numeric {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

.accounting-negative {
    color: var(--bs-danger, #F1416C) !important;
}

.table-accounting tfoot tr:last-child td {
    border-top: 2px solid var(--bs-gray-800, #181C32) !important;
    border-bottom: 3px double var(--bs-gray-800, #181C32) !important;
}

[data-bs-theme="dark"] .table-accounting tfoot tr:last-child td {
    border-top: 2px solid var(--bs-gray-400, #6d6d80) !important;
    border-bottom: 3px double var(--bs-gray-400, #6d6d80) !important;
}

/* Live Journal Balance Indicator Box */
.balance-status-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.balance-status-card.is-balanced {
    background-color: rgba(80, 205, 137, 0.1) !important;
    border-color: rgba(80, 205, 137, 0.4) !important;
}

.balance-status-card.is-unbalanced {
    background-color: rgba(241, 65, 108, 0.08) !important;
    border-color: rgba(241, 65, 108, 0.4) !important;
}

/* Category Tab Custom Badges */
.nav-line-tabs .nav-link {
    transition: color 0.2s ease, border-color 0.2s ease;
}

.nav-line-tabs .nav-link.active {
    font-weight: 700;
}

/* Print Stylesheet for Financial Reports */
@media print {

    #kt_aside,
    #kt_header,
    #kt_toolbar,
    .btn,
    .no-print {
        display: none !important;
    }

    #kt_wrapper {
        margin: 0 !important;
        padding: 0 !important;
    }

    .content {
        padding: 0 !important;
    }

    .card {
        box-shadow: none !important;
        border: none !important;
    }

    .table {
        width: 100% !important;
    }
}

/* Redesigned Command Bar Toolbar & Header Polish */
#kt_header {
    background-color: var(--bs-body-bg, #ffffff);
    border-bottom: 1px solid var(--bs-border-color, #f1f1f4);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

[data-bs-theme="dark"] #kt_header {
    background-color: var(--bs-body-bg, #1e1e2d);
    border-bottom: 1px solid var(--bs-border-color, #2b2b40);
}

.toolbar {
    background-color: var(--bs-body-bg, #ffffff);
    border-bottom: 1px solid var(--bs-border-color, #f1f1f4);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

[data-bs-theme="dark"] .toolbar {
    background-color: var(--bs-body-bg, #1e1e2d);
    border-bottom: 1px solid var(--bs-border-color, #2b2b40);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.toolbar .breadcrumb {
    margin-bottom: 0.25rem;
}

.toolbar .breadcrumb .breadcrumb-item a {
    transition: color 0.15s ease;
}

.toolbar .breadcrumb .bullet {
    background-color: var(--bs-gray-400, #d8d8e4);
}

.shadow-2xs {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04) !important;
}

/* Footer Refactor & Polish */
#kt_footer {
    background-color: var(--bs-body-bg, #ffffff);
    border-top: 1px solid var(--bs-border-color, #f1f1f4);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

[data-bs-theme="dark"] #kt_footer {
    background-color: var(--bs-body-bg, #1e1e2d);
    border-top: 1px solid var(--bs-border-color, #2b2b40);
}

/* ==========================================================================
   FormValidation.io & Select2 Polish
   ========================================================================== */
.fv-plugins-message-container {
    padding-top: 0.25rem;
}

.fv-plugins-message-container .fv-plugins-message-id {
    color: var(--bs-danger, #F1416C);
    font-size: 0.825rem;
    font-weight: 500;
    line-height: 1.25;
}

/* Select2 invalid border when wrapped or adjacent */
.is-invalid+.select2-container .select2-selection,
.is-invalid+.select2-container--bootstrap5 .select2-selection--single,
.fv-row .is-invalid+.select2-container .select2-selection {
    border-color: var(--bs-danger, #F1416C) !important;
}

.fv-row .is-invalid+.select2-container.select2-container--focus .select2-selection,
.is-invalid+.select2-container.select2-container--focus .select2-selection {
    border-color: var(--bs-danger, #F1416C) !important;
    box-shadow: 0 0 0 0.25rem rgba(241, 65, 108, 0.25) !important;
}

/* ==========================================================================
   Form Submit Loading States
   ========================================================================== */
.btn-loading {
    pointer-events: none;
    opacity: 0.75;
}

.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

/* Smooth page transitions */
.content {
    animation: fadeIn 0.2s ease-in;
}

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

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

/* ==========================================================================
   Mobile Responsive Fixes
   ========================================================================== */
@media (max-width: 767.98px) {


    /* Header toolbar mobile */
    #kt_toolbar_container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .toolbar .breadcrumb {
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 0.25rem;
    }

    /* Card headers stack on mobile */
    .card-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.75rem;
    }

    .card-toolbar {
        width: 100%;
    }

    /* Table responsive improvements */
    .table-responsive {
        border-radius: 0.475rem;
    }

    /* Stat cards spacing */
    .row.g-5>[class*="col-"] {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Welcome banner mobile */
    .card.border-0.rounded-4 .card-body {
        padding: 1.5rem;
    }

    /* Quick action cards mobile */
    .row.g-4>.col-sm-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 991.98px) {
    #kt_aside_menu .menu>.menu-item>.menu-link .menu-title {
        font-size: 0.725rem;
    }
}

/* Hover effects for interactive elements */
.btn {
    transition: all 0.15s ease-in-out;
}

.badge {
    transition: all 0.15s ease-in-out;
}

/* Focus visible states for accessibility */
.btn:focus-visible,
/* .form-control:focus-visible, */
/* .form-select:focus-visible, */
.nav-link:focus-visible {
    outline: 2px solid var(--bs-primary, #3E97FF);
    outline-offset: 2px;
}

/* ==========================================================================
   Auth Module UI/UX — Premium Modern & Clean SaaS Design
   ========================================================================== */

/* Auth Page Body & Ambient Lighting Atmosphere */
.auth-page-bg {
    background-color: #f8fafc;
    background-image:
        radial-gradient(at 50% 0%, rgba(62, 151, 255, 0.06) 0px, transparent 60%),
        radial-gradient(at 100% 100%, rgba(114, 57, 234, 0.04) 0px, transparent 50%);
    background-attachment: fixed;
    min-height: 100vh;
}

[data-bs-theme="dark"] .auth-page-bg {
    background-color: #0b0d14;
    background-image:
        radial-gradient(at 50% 0%, rgba(62, 151, 255, 0.10) 0px, transparent 65%),
        radial-gradient(at 100% 100%, rgba(114, 57, 234, 0.08) 0px, transparent 50%);
}

/* Premium Modern Auth Card */
.auth-card {
    background-color: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.03),
        0 2px 6px -1px rgba(0, 0, 0, 0.02),
        0 20px 35px -6px rgba(0, 0, 0, 0.05) !important;
    border-radius: 1.25rem !important;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

[data-bs-theme="dark"] .auth-card {
    background-color: #151824;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.05),
        0 25px 50px -12px rgba(0, 0, 0, 0.6) !important;
}

/* Modern Squircle Brand Badge */
.auth-brand-badge {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, #3E97FF 0%, #7239EA 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.35),
        inset 0 -2px 4px rgba(0, 0, 0, 0.12),
        0 10px 24px -6px rgba(62, 151, 255, 0.5);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

/* Glass highlight on top edge of the badge */
.auth-brand-badge::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(120% 80% at 25% 0%, rgba(255, 255, 255, 0.35) 0%, transparent 55%);
    pointer-events: none;
}

.auth-brand-lockup:hover .auth-brand-badge,
.auth-brand-lockup:focus-visible .auth-brand-badge {
    transform: translateY(-2px) scale(1.05) rotate(-3deg);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.4),
        inset 0 -2px 4px rgba(0, 0, 0, 0.12),
        0 16px 32px -8px rgba(114, 57, 234, 0.55);
}

/* Brand Lockup (badge + wordmark) */
.auth-brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
}

.auth-brand-wordmark {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.15;
}

/* Uppercase micro-label tagline */
.auth-brand-tagline {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* Polished Modern Input Fields */
.auth-input-group {
    position: relative;
    transition: all 0.2s ease;
}

.auth-input-group .form-control {
    padding-left: 2.85rem;
    height: 48px;
    font-size: 0.925rem;
    border-radius: 0.65rem;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    color: var(--bs-gray-800, #181C32);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.auth-input-group .form-control:hover {
    border-color: #cbd5e1;
    background-color: #ffffff;
}

.auth-input-group .form-control:focus {
    background-color: #ffffff;
    border-color: #3E97FF;
    box-shadow: 0 0 0 3.5px rgba(62, 151, 255, 0.14);
}

[data-bs-theme="dark"] .auth-input-group .form-control {
    background-color: #1a1d2d;
    border-color: rgba(255, 255, 255, 0.08);
    color: #f1f1f4;
}

[data-bs-theme="dark"] .auth-input-group .form-control:hover {
    border-color: rgba(255, 255, 255, 0.14);
    background-color: #1e2236;
}

[data-bs-theme="dark"] .auth-input-group .form-control:focus {
    background-color: #1e2236;
    border-color: #3E97FF;
    box-shadow: 0 0 0 3.5px rgba(62, 151, 255, 0.22);
}

.auth-input-group .auth-input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 1.15rem;
    pointer-events: none;
    z-index: 4;
    transition: color 0.2s ease;
}

.auth-input-group:focus-within .auth-input-icon {
    color: #3E97FF;
}

.auth-input-group .password-toggle-btn {
    position: absolute;
    right: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    padding: 0.45rem;
    color: #94a3b8;
    border-radius: 0.5rem;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.auth-input-group .password-toggle-btn:hover {
    color: #3E97FF;
    background-color: rgba(62, 151, 255, 0.08);
}

/* Modern Submit Button */
.btn-auth-submit {
    height: 48px;
    border-radius: 0.65rem;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
    box-shadow: 0 4px 14px 0 rgba(62, 151, 255, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.btn-auth-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px 0 rgba(62, 151, 255, 0.42);
}

.btn-auth-submit:active {
    transform: translateY(0);
}

/* Modern Secondary Button */
.btn-auth-secondary {
    height: 46px;
    border-radius: 0.65rem;
    font-weight: 500;
    font-size: 0.9rem;
    border: 1px solid var(--bs-border-color, #e2e8f0);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn-auth-secondary:hover {
    background-color: var(--bs-gray-100, #f1f5f9);
    border-color: #cbd5e1;
}

/* Minimalist Icon Header Badge */
.auth-icon-badge {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

/* Minimalist Topbar */
.auth-topbar {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    z-index: 10;
}

@media (max-width: 991.98px) {
    .auth-topbar {
        top: 0.75rem;
        right: 0.75rem;
    }
}

/* SweetAlert2 Dark Mode */
[data-bs-theme="dark"] .swal2-popup {
    background-color: #1a1d2d;
}

[data-bs-theme="dark"] .swal2-title {
    color: #f1f1f4;
}

[data-bs-theme="dark"] .swal2-html-container {
    color: #c1c2c5;
}

/* ==========================================================================
   User Management — Role Option Cards Polish
   ========================================================================== */
.role-option-card {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--bs-gray-300, #e4e6ef) !important;
}

.role-option-card:hover {
    border-color: var(--bs-primary, #3E97FF) !important;
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1.25rem rgba(62, 151, 255, 0.08) !important;
}

.role-option-card.is-selected,
.role-option-card:has(.form-check-input:checked) {
    border-color: var(--bs-primary, #3E97FF) !important;
    background-color: rgba(62, 151, 255, 0.04) !important;
    box-shadow: 0 0 0 1px var(--bs-primary, #3E97FF);
}

[data-bs-theme="dark"] .role-option-card {
    border-color: var(--bs-gray-300, #2b2b40) !important;
}

[data-bs-theme="dark"] .role-option-card.is-selected,
[data-bs-theme="dark"] .role-option-card:has(.form-check-input:checked) {
    background-color: rgba(62, 151, 255, 0.12) !important;
}

.role-option-card:has(.form-check-input:disabled) {
    opacity: 0.55;
    pointer-events: none;
    cursor: not-allowed;
}

/* ==========================================================================
   DataTables Polish — Metronic 8 Theme Alignment
   ========================================================================== */
table.dataTable thead th {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--bs-gray-500, #99a1b7);
    letter-spacing: 0.03em;
    border-bottom: 1px dashed var(--bs-gray-200, #f1f1f4) !important;
}

[data-bs-theme="dark"] table.dataTable thead th {
    color: var(--bs-gray-400, #6d6d80);
    border-bottom: 1px dashed var(--bs-border-color, #2b2b40) !important;
}