/* =====================================================
   Global Brand Variables
   ===================================================== */

:root {
    /* Primary brand navy */
    --brand-navy: #1E304B;
    --brand-navy-rgb: 30, 48, 75;
    /* Success brand green */
    --brand-success: #00B603;
    --brand-success-rgb: 0, 182, 3;
}

.highlight-row {
    background-color: rgba(255, 193, 7, 0.15);
    transition: background-color 0.2s ease-in-out;
    border: 3px solid black;
}

/* =====================================================
  Scroll bar
   ===================================================== */
/* ============================= */
/* WebKit Browsers (Chrome, Safari, Edge) */
/* ============================= */
::-webkit-scrollbar {
    width: 12px; /* width of vertical scrollbar */
    height: 12px; /* height of horizontal scrollbar */
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1); /* track background */
    border-radius: 6px;
}

::-webkit-scrollbar-thumb {
    background-color: white; /* scrollbar thumb color */
    border-radius: 6px; /* rounded corners */
    border: 3px solid rgba(255, 255, 255, 0.1); /* creates padding around thumb */
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: #f0f0f0; /* hover effect for better UX */
    }

/* ============================= */
/* Firefox */
/* ============================= */
* {
    scrollbar-width: thin; /* "auto", "thin", or "none" */
    scrollbar-color: white rgba(255, 255, 255, 0.1); /* thumb color, track color */
}

/* ============================= */
/* Optional: For specific container only (example: main-screen) */
/* ============================= */
/* Scrollbars inside .main-screen only */
.main-screen::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.main-screen::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
}

.main-screen::-webkit-scrollbar-thumb {
    background-color: white;
    border-radius: 6px;
    border: 3px solid rgba(255, 255, 255, 0.1);
}

    .main-screen::-webkit-scrollbar-thumb:hover {
        background-color: #f0f0f0;
    }

.main-screen {
    scrollbar-width: thin;
    scrollbar-color: white rgba(255, 255, 255, 0.1);
}




.form-control {
    font-weight: 600;
}

.custom-text-shadow {
    text-shadow: 1px 1px 2px #000000;
}

.custom-textbox {
    padding: 8px;
    border-radius: 4px;
}

strong {
    font-weight: 800;
}


@media (min-width: 1600px) {
    .container-fluid {
        width: 80%;
        margin: auto
    }
}


.form-label {
    min-width: 180px;
    margin-bottom: .3rem;
    letter-spacing: .5px;
}


.logo {
    height: 50px;
}


.content {
    padding-top: 76px;
}







h2 {
    font-size: 1.7rem;
    font-weight: 600;
}



.btn-brand {
    --bs-btn-color: #fff;
    --bs-btn-bg: #1E304B;
    --bs-btn-border-color: var(--brand-navy);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #16243A;
    --bs-btn-hover-border-color: #16243A;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #121D30;
    --bs-btn-active-border-color: #121D30;
    --bs-btn-focus-shadow-rgb: var(--brand-navy-rgb);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--brand-navy);
    --bs-btn-disabled-border-color: var(--brand-navy);
}

    .btn-brand:focus,
    .btn-brand:focus-visible {
        box-shadow: none !important;
    }

    .btn-brand:focus-visible {
        outline: 2px solid var(--brand-navy);
        outline-offset: 2px;
    }

/* Base button style */
.btn-brand-link {
    --bs-btn-color: var(--brand-navy);
    border: 0;
    font-weight: 500;
    --bs-btn-disabled-opacity: 0.50;
    color: var(--bs-btn-color);
    text-decoration: none;
    background: transparent;
    transition: color 0.2s ease, opacity 0.2s ease, text-decoration 0.2s ease;
    outline: none; /* remove focus outline for mobile */
    box-shadow: none;
}

    /* Disabled state */
    .btn-brand-link:disabled {
        opacity: var(--bs-btn-disabled-opacity);
        cursor: not-allowed;
    }

    /* Tap / active state feedback */
    .btn-brand-link:active {
        color: var(--brand-navy-rgb); /* slightly darker or custom active color */
        text-decoration: underline; /* optional for visual feedback */
    }

/* Optional hover for small devices with pointer support */
@media (hover: hover) and (pointer: fine) {
    .btn-brand-link:hover {
        color: var(--brand-navy-rgb);
        text-decoration: underline;
    }
}

/* For touch devices (mobile) */
@media (pointer: coarse) {
    .btn-brand-link {
        outline: none !important;
        box-shadow: none !important;
        text-decoration: none !important; /* remove underline */
    }

        .btn-brand-link:active,
        .btn-brand-link:focus,
        .btn-brand-link:focus-visible {
            outline: none !important;
            box-shadow: none !important;
            text-decoration: none !important; /* prevent underline flash */
        }
}





/* =====================================================
   Brand-aligned dropdown
   ===================================================== */

.dropdown-menu {
    --bs-dropdown-link-color: var(--brand-navy);
    --bs-dropdown-link-hover-color: var(--brand-navy);
    --bs-dropdown-link-hover-bg: rgba(var(--brand-navy-rgb), 0.08);
    --bs-dropdown-link-active-bg: var(--brand-navy);
}

.dropdown-menu-brand {
    --bs-dropdown-link-hover-bg: rgba(var(--brand-navy-rgb), 0.08);
    --bs-dropdown-link-active-bg: var(--brand-navy);
}

.dropdown-item {
    color: var(--brand-navy);
}

    .dropdown-item:focus {
        color: var(--brand-navy);
        background-color: rgba(var(--brand-navy-rgb), 0.2);
    }


.clear-btn {
    color: #dc3545 !important; /* Bootstrap danger red */
    background-color: transparent;
}

    .clear-btn:hover {
        background-color: rgba(220,53,69,0.1); /* light red hover */
    }

    .clear-btn:focus {
        background-color: rgba(220,53,69,0.2); /* light red hover */
    }




/* =====================================================
   Success Button Variant
   Base color: #00B603
   ===================================================== */

.btn-success-brand {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-success);
    --bs-btn-border-color: var(--brand-success);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #009E03;
    --bs-btn-hover-border-color: #009E03;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #008803;
    --bs-btn-active-border-color: #008803;
    --bs-btn-focus-shadow-rgb: 0, 182, 3;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--brand-success);
    --bs-btn-disabled-border-color: var(--brand-success);
}

.btn-outline-success-brand {
    --bs-btn-color: var(--brand-success);
    --bs-btn-border-color: var(--brand-success);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-success);
    --bs-btn-hover-border-color: var(--brand-success);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #009E03;
    --bs-btn-active-border-color: #009E03;
    --bs-btn-focus-shadow-rgb: 0, 182, 3;
}

    .btn-success-brand:focus,
    .btn-success-brand:focus-visible,
    .btn-outline-success-brand:focus,
    .btn-outline-success-brand:focus-visible {
        box-shadow: none !important;
    }

    .btn-success-brand:focus-visible,
    .btn-outline-success-brand:focus-visible {
        outline: 2px solid var(--brand-success);
        outline-offset: 2px;
    }



/* Entire accordion item */


/* Header highlight when payment exists */
.accordion-button-has-payment {
    background-color: rgba(13, 110, 253, 0.15); /* bootstrap info-ish */
    font-weight: 600;
}

    /* Keep arrow visible and themed */
    .accordion-button-has-payment::after {
        filter: brightness(0.8);
    }

/* Optional: outline the entire card */
.accordion-item-has-payment {
    border-left: 6px solid #0d6efd;
}

/* Make sure highlight persists when collapsed */
.accordion-button-has-payment.collapsed {
    background-color: #cff4fc
}