/* =============================================================
   BRAND PRIMARY COLOR OVERRIDE
   Replaces the default Velzon theme primary (#042A52 teal) with
   Skyzone Dark Blue (#042A52) across all components globally.
   ============================================================= */

/* 1. CSS variable overrides — covers links, badges, focus rings,
      and any component reading from --in-primary / --vz-primary  */
:root {
    /* Core primary */
    --in-primary:                #042A52;
    --in-primary-rgb:            4, 42, 82;
    --in-primary-text-emphasis:  #021422;
    --in-primary-bg-subtle:      #e8eef5;
    --in-primary-border-subtle:  #b0c4d8;

    /* Bootstrap / VZ compat aliases */
    --vz-primary:                #042A52;
    --vz-primary-rgb:            4, 42, 82;
    --vz-primary-bg-subtle:      #e8eef5;
    --vz-primary-border-subtle:  #b0c4d8;
    --vz-link-color:             #042A52;
    --vz-link-hover-color:       #D99B1F;
    --vz-component-active-bg:    #042A52;

    /* Link colors */
    --in-link-color:             #042A52;
    --in-link-color-rgb:         4, 42, 82;
    --in-link-hover-color:       #D99B1F;
    --in-link-hover-color-rgb:   217, 155, 31;

    /* Sidebar / nav active states */
    --in-vertical-menu-item-hover-color:         #D99B1F;
    --in-vertical-menu-item-active-color:        #042A52;
    --in-vertical-menu-item-active-bgcolor:      linear-gradient(to right, rgba(4, 42, 82, 0.1) 30%, transparent 100%);
    --in-vertical-menu-sub-item-hover-color:     #D99B1F;
    --in-vertical-menu-sub-item-active-color:    #042A52;
    --in-vertical-menu-bg-dark:                  #042A52;
    --in-topnav-item-color-active:               #042A52;
}

/* Fix for Data-Theme Overrides */
[data-topbar="dark"] {
    --in-header-bg-dark: #042A52;
    --in-header-item-color-dark: #b0c4d8;
}

[data-sidebar="dark"] {
    --in-vertical-menu-item-hover-color-dark: #D99B1F;
    --in-vertical-menu-sub-item-hover-color-dark: #D99B1F;
}

/* 2. btn-primary — override the hardcoded teal values inside the selector */
.btn-primary {
    --in-btn-bg:                #042A52;
    --in-btn-border-color:      #042A52;
    --in-btn-hover-bg:          #031e3b;
    --in-btn-hover-border-color:#021833;
    --in-btn-active-bg:         #021833;
    --in-btn-active-border-color:#01142a;
    --in-btn-focus-shadow-rgb:  4, 42, 82;
    background-color: #042A52 !important;
    border-color: #042A52 !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible {
    background-color: #031e3b !important;
    border-color: #021833 !important;
}
.btn-primary:active,
.btn-primary.active {
    background-color: #021833 !important;
    border-color: #01142a !important;
}

/* 3. btn-primary animation variant (hardcoded in app.min.css) */
.btn-primary.btn-animation {
    background-color: #042A52 !important;
    border-color: #042A52 !important;
}

/* 4. Pagination overrides */
.page-item.active .page-link {
    background-color: #042A52 !important;
    border-color: #042A52 !important;
    color: #ffffff !important;
}
.page-link {
    color: #042A52;
}
.page-link:hover {
    color: #031e3b;
}

/* 5. Auth Logo responsive height */
.auth-logo {
    height: 45px;
}
@media (min-width: 768px) {
    .auth-logo {
        height: 75px;
    }
}

/* 6. Dashboard Logo responsive height */
.dashboard-logo-lg {
    height: 40px;
}
@media (min-width: 768px) {
    .dashboard-logo-lg {
        height: 60px;
    }
}

/* Custom Utility Classes */

.min-h-300 {
    min-height: 300px;
}

.min-h-200 {
    min-height: 200px;
}

.border-bottom-none {
    border-bottom: none !important;
}

.icon-120 {
    font-size: 120px;
}

.text-slate {
    color: #475569;
}

.table-header-dark {
    font-weight: 500;
    color: #0f172a;
}

.table-header-dark-sm {
    font-weight: 500;
    color: #0f172a;
    font-size: 14px;
}

.w-50px { width: 50px; }
.w-60px { width: 60px; }
.w-100px { width: 100px; }
.w-120px { width: 120px; }
.w-140px { width: 140px; }
.w-30-pct { width: 30%; }

.avatar-sm {
    width: 32px;
    height: 32px;
    font-size: 14px;
}

.max-h-450-scroll {
    max-height: 450px;
    overflow-y: auto;
}

.sticky-top-80 {
    top: 80px;
}

.mb-20px {
    margin-bottom: 20px;
}

/* ---- Placeholder contrast ---- */
::placeholder {
    color: #adb5bd !important;
    opacity: 1 !important;
    font-style: italic;
}
:-ms-input-placeholder { color: #adb5bd !important; }
::-ms-input-placeholder { color: #adb5bd !important; }

/* ---- Application modal system ---- */
.app-modal {
    --app-modal-accent: var(--vz-primary, #042A52);
    --app-modal-accent-rgb: 4, 42, 82;
}

.app-modal--validation {
    --app-modal-accent: var(--vz-warning, #f7b84b);
    --app-modal-accent-rgb: 247, 184, 75;
}

.app-modal--success {
    --app-modal-accent: var(--vz-success, #0ab39c);
    --app-modal-accent-rgb: 10, 179, 156;
}

.app-modal--danger {
    --app-modal-accent: var(--vz-danger, #f06548);
    --app-modal-accent-rgb: 240, 101, 72;
}

.app-modal .app-modal__content {
    overflow: hidden;
    border: 1px solid var(--vz-border-color, #e9ebec);
    border-radius: 0.5rem;
    background: var(--vz-secondary-bg, #fff);
    box-shadow: 0 1rem 3rem rgba(15, 23, 42, 0.18);
}

.app-modal .app-modal__header {
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--vz-border-color, #e9ebec);
    background: rgba(var(--app-modal-accent-rgb), 0.08);
}

.app-modal .app-modal__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--vz-heading-color, #495057);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
}

.app-modal .app-modal__title-icon {
    color: var(--app-modal-accent);
    font-size: 1.3rem;
}

.app-modal .app-modal__description {
    margin: 0.25rem 0 0;
    color: var(--vz-secondary-color, #878a99);
    font-size: 0.8125rem;
}

.app-modal .app-modal__body {
    min-width: 0;
    padding: 1.5rem;
    overflow-wrap: anywhere;
}

.app-modal .app-modal__footer {
    gap: 0.5rem;
    padding: 1rem 1.5rem calc(1rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--vz-border-color, #e9ebec);
    background: var(--vz-tertiary-bg, #f8f9fa);
}

.app-modal .app-modal__footer .btn {
    min-height: 40px;
}

.app-modal .btn-close {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0.625rem;
    border-radius: 0.25rem;
}

.app-modal .btn-close:focus-visible,
.app-modal .btn:focus-visible,
.app-modal :is(input, select, textarea):focus-visible {
    outline: 2px solid var(--app-modal-accent);
    outline-offset: 2px;
}

.app-modal__error[hidden] {
    display: none !important;
}

.app-modal__error {
    margin-bottom: 1rem;
}

.app-modal__result {
    text-align: center;
}

.app-modal__result-icon {
    color: var(--app-modal-accent);
    font-size: 3.5rem;
    line-height: 1;
}

.app-modal--compact .modal-dialog {
    max-width: 460px;
}

@media (max-width: 575.98px) {
    .app-modal:not(.app-modal--form):not(.app-modal--transaction) .modal-dialog {
        margin: 0.75rem;
    }

    .app-modal--form .app-modal__content,
    .app-modal--transaction .app-modal__content {
        border: 0;
        border-radius: 0;
    }

    .app-modal .app-modal__header,
    .app-modal .app-modal__body {
        padding: 1rem;
    }

    .app-modal .app-modal__footer {
        display: grid;
        grid-template-columns: 1fr;
        padding: 0.875rem 1rem calc(0.875rem + env(safe-area-inset-bottom));
    }

    .app-modal .app-modal__footer .btn {
        width: 100%;
    }
}