/* =======================================================================================
    CUSTOM THEME STYLESHEET
    Description: Contains branding variables, UI component overrides, and responsive fixes
    Author: [Your Name]
    Last Updated: [Date]
======================================================================================= */

/* ---------------------------------------------------------------------------------------
   1. GLOBAL BRAND COLOURS (Bootstrap Overrides)
--------------------------------------------------------------------------------------- */
:root {
    --bs-primary: #004990;
    --bs-primary-rgb: 124, 181, 138;
    --bs-primary-active: 68739a;
    --bs-primary-inverse: #ffffff;
    --bs-primary-text-emphasis: #343a40;
    --bs-primary-bg-subtle: #e3e7f0;
    --bs-primary-border-subtle: #343a40;
    --bs-primary-light: #e3e7f0;
    --bs-secondary: #FFF6E1;
    --bs-secondary-rgb: 229, 189, 101;
    --bs-success: #90C979;
    --bs-success-rgb: 144, 201, 121;
    --bs-info: #a1c6d1;
    --bs-info-rgb: 161, 209, 198;
    --bs-purple: #BFA9D7;
    --bs-cyan: #c3d1ea;
    --bs-focus-ring-color: rgba(124, 181, 138, 0.25);
    --bs-white: #FFFFFF;
    --bs-black: #000000;
    --bs-app-header-sticky-bg-color: #ffffff;
    --bs-text-primary: #004990;
}

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

/* ---------------------------------------------------------------------------------------
   2. QUICKGRID TABLE STYLING
--------------------------------------------------------------------------------------- */
.table thead tr {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.925rem;
    color: #343a40;
}

.table thead th {
    background-color: transparent;
    border-bottom: 1px dashed #DDE7DE;
    vertical-align: middle;
    padding: 1rem 0.75rem;
}

    .table thead th button {
        all: unset;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        cursor: pointer;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.925rem;
        color: #343a40;
    }

.col-title {
    all: unset;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: inherit;
    color: inherit;
    cursor: pointer;
    padding: 0;
    background: none;
    border: none;
}

.col-title-text {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.925rem;
    color: #343a40;
}

.table th .sort-indicator {
    display: none;
}

.table th.col-sort-asc .sort-indicator {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.25rem;
    border-left: 0.35rem solid transparent;
    border-right: 0.35rem solid transparent;
    border-bottom: 0.4rem solid var(--bs-primary);
    transform: translateY(-0.2rem);
}

.table th.col-sort-desc .sort-indicator {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.25rem;
    border-left: 0.35rem solid transparent;
    border-right: 0.35rem solid transparent;
    border-top: 0.4rem solid var(--bs-primary);
    transform: translateY(0.2rem);
}

.quickgrid input[type="checkbox"].form-check-input {
    width: 1.1rem;
    height: 1.1rem;
}

/* ---------------------------------------------------------------------------------------
   3. PAGINATION CONTROLS (QUICKGRID)
--------------------------------------------------------------------------------------- */

nav[role="navigation"] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    font-size: 0.95rem;
    margin-top: 1rem;
}

    nav[role="navigation"] .pagination-text {
        color: #343a40;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    nav[role="navigation"] button {
        width: 2.2rem;
        height: 2.2rem;
        border: none;
        background-color: #F5F9F4;
        color: #343a40;
        border-radius: 0.45rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        transition: background-color 0.2s;
    }

        nav[role="navigation"] button:hover:not(:disabled) {
            background-color: #D5E6CE;
        }

        nav[role="navigation"] button:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

    nav[role="navigation"] .go-first::before {
        content: "⏮";
    }

    nav[role="navigation"] .go-previous::before {
        content: "◀";
    }

    nav[role="navigation"] .go-next::before {
        content: "▶";
    }

    nav[role="navigation"] .go-last::before {
        content: "⏭";
    }

/* ---------------------------------------------------------------------------------------
   4. BUTTONS & BADGES
--------------------------------------------------------------------------------------- */

.btn-primary,
.btn-check:checked + .btn.btn-primary,
.btn-check:active + .btn.btn-primary,
.btn.btn-primary:focus:not(.btn-active),
.btn.btn-primary:hover:not(.btn-active),
.btn.btn-primary:active:not(.btn-active),
.btn.btn-primary.active,
.btn.btn-primary.show,
.show > .btn.btn-primary {
    background-color: #343a40 !important; /* darker green for hover/active */
    border-color: #343a40 !important;
    color: #ffffff !important;
}

    .btn-primary:not(:hover):not(:active):not(.active):not(.show):not(:focus) {
        background-color: #004990 !important; /* base state */
        border-color: #004990 !important;
        color: #ffffff !important;
    }

.badge {
    --bs-badge-font-size: 1rem;
    --bs-badge-font-weight: 400;
}

/* ---------------------------------------------------------------------------------------
   5. VALIDATION MESSAGES
--------------------------------------------------------------------------------------- */

.validation-message {
    color: #EF476F;
    font-size: 0.925rem;
    margin-top: 0.25rem;
    display: block;
}

.validation-errors {
    padding-left: 1.5rem !important;
    margin-bottom: 1rem;
    list-style: disc inside !important;
}

    .validation-errors .validation-message {
        display: list-item !important;
        list-style-type: disc !important;
        margin-bottom: 0.5rem;
        color: #EF476F;
        font-size: 0.925rem;
    }

/* ---------------------------------------------------------------------------------------
   6. ERROR UI
--------------------------------------------------------------------------------------- */

#blazor-error-ui {
    display: none;
    background-color: #EF476F;
    color: #fff;
    font-weight: 500;
    font-size: 1rem;
    padding: 1rem 1.5rem;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 2000;
    text-align: center;
    animation: slideUpFade 0.5s ease-in-out;
}

    #blazor-error-ui a {
        color: #fff;
        font-weight: 500;
        text-decoration: underline;
        margin-left: 1rem;
    }

    #blazor-error-ui .dismiss {
        position: absolute;
        right: 1rem;
        top: 0.75rem;
        font-size: 1.2rem;
        cursor: pointer;
    }

@keyframes slideUpFade {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

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

/* ---------------------------------------------------------------------------------------
   7. MANUAL PAGE STYLES
--------------------------------------------------------------------------------------- */

.manual-section {
    padding-top: 3rem;
    margin-top: 3rem;
    border-top: 1px solid #D4DDD1;
}

#manual-nav .nav-link.active {
    font-weight: 600;
    color: var(--bs-primary);
    background-color: transparent;
}

html {
    scroll-behavior: smooth;
}

/* ---------------------------------------------------------------------------------------
   8. SIDEBAR & MENU UTILITY COLOURS
--------------------------------------------------------------------------------------- */

.menu-link.utility-link .menu-title,
.menu-title.utility-title {
    color: var(--bs-primary) !important;
    font-weight: 700 !important;
    font-size: 1.075rem !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.menu-link.utility-link:hover .menu-title,
.menu-item.show.here .menu-link .menu-title,
.menu-item.show.here .menu-title.utility-title {
    color: #000000 !important;
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------------------
   9. DASHBOARD TILES & MAIN CONTENT HEIGHT
--------------------------------------------------------------------------------------- */

@media (min-width: 768px) {
    .dashboard-tile.min-height-lg .card {
        min-height: 500px;        
    }

    .dashboard-tile .card {
        min-height: 400px;
        display: flex;
        flex-direction: column;
    }

    .dashboard-tile .card-body {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

        .dashboard-tile .card-body .btn,
        .dashboard-tile .card-body .dashboard-card-footer {
            margin-top: auto;
        }
}

/*#kt_app_content {
    border: 1px solid var(--bs-gray-200);
}*/

@media (min-width: 992px) {
    #kt_app_content {
        min-height: 600px;
    }
}

.first-row-tile {
    margin-top: 0 !important;
}
/* ---------------------------------------------------------------------------------------
   10. TEXT UTILITIES
--------------------------------------------------------------------------------------- */
.text-warning-contrast {
    color: #7A5D1C !important;
}

/* ---------------------------------------------------------------------------------------
   11. DASHBOARD LAYOUT ENHANCEMENTS (Adjusted to match generated HTML)
--------------------------------------------------------------------------------------- */

.app-toolbar-wrapper {
    background-color: #EDF5ED;
    border-radius: 0.75rem;
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
}

#kt_app_main > .row.gy-10 {
    background-color: #FCFCFA;
    padding: 2rem;
    border-radius: 0.75rem;
    margin-bottom: 2rem;
}

.dashboard-tile .card {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    border: 1px solid #DDE7DE;
    border-radius: 0.75rem;
}

    .dashboard-tile .card:has(.card-title:contains("Benefit Statements")) {
        background-color: #F0F4EB;
    }

#kt_app_content main > .row.gy-10 {
    background-color: #FCFCFA;
    padding: 2rem;
    border-radius: 0.75rem;
    margin-bottom: 2rem;
}

.page-heading {
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#kt_app_hero {
    /*background-color: var(--bs-primary);*/ /* Match login page */
    background-color: #e1e4e5;
    padding: 2rem 0 0.5rem; /* Reduced bottom padding */
    color: #343a40;
}

#kt_app_hero_container {
    display: flex !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
}

    /* Adjust spacing between logo and identity block */
    #kt_app_hero_container .d-flex.flex-stack {
        justify-content: flex-start !important; /* Prevent wide space distribution */
        align-items: flex-start !important;
        gap: 2rem !important; /* Reduced from gap-lg-10 */
        margin-bottom: 0 !important; /* Removes extra vertical space */
    }

    #kt_app_hero_container img {
        height: 90px !important;
        align-self: flex-start !important;
    }

/* Optional divider */
.app-divider {
    border-top: 5px solid #8a8b8e;
    margin: 0;
}

.btn-highlight {
    background-color: #8a8b8e;
    color: #333333;
    font-weight: 600;
    border-radius: 0.45rem;
}

/* Additional spacing for toolbar area */
#kt_app_toolbar {
    margin-top: 0.75rem;
}

/* ---------------------------------------------------------------------------------------
   12. MEMBER DASHBOARD TAB AREA (Metronic Tab Styling Enhancements)
--------------------------------------------------------------------------------------- */

.app-content-menu {
    background-color: #FFF6E1 !important; /* Light gold background */
    box-shadow: inset 0 -1px 0 #E5BD65; /* Soft divider */
    margin-top: 1rem;
    border-radius: 0.75rem;
    padding: 0.5rem 1rem;
}

    .app-content-menu .menu-link {
        border-bottom: 3px solid transparent;
    }

        .app-content-menu .menu-link.active {
            background-color: #FFF6E1 !important;
            color: #4F3F18 !important;
            border-radius: 0.5rem;
            font-weight: 600;
            border-bottom: 5px solid #E5BD65;
            box-shadow: none !important;
        }

    .app-content-menu .menu-link.active {
        background-color: #FFF6E1 !important;
        color: #4F3F18 !important;
        border-radius: 0.5rem;
        font-weight: 600;
        border-bottom: 5px solid #E5BD65;
        box-shadow: none !important;
    }

    .app-content-menu .menu-link:hover {
        background-color: #F9F6EB;
        color: #4F3F18;
    }

    .app-content-menu .menu-link .menu-title {
        color: #4F3F18 !important;
    }


    /* ---------------------------------------------------------------------------------------
   13. OPTIONAL DASHBOARD TAB ENHANCEMENTS (Refined Spacing & Responsiveness)
--------------------------------------------------------------------------------------- */

    .app-content-menu .menu-item {
        margin-right: 0.5rem;
    }

@media (max-width: 768px) {
    .app-content-menu {
        justify-content: center;
    }
}

/* ---------------------------------------------------------------------------------------
   14. RESPONSIVE UTILITIES
--------------------------------------------------------------------------------------- */

@media (max-width: 576px) {
    .w-md-600px {
        width: 100% !important;
        padding: 1rem;
    }
}

/* ---------------------------------------------------------------------------------------
   15. HERO LABELS & RESPONSIVENESS
--------------------------------------------------------------------------------------- */

.hero-label {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--bs-white);
    opacity: 0.9;
}

.hero-label-block {
    display: flex;
    gap: 1rem;
}

@media (max-width: 768px) {
    .hero-label-block {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
}

/* ---------------------------------------------------------------------------------------
   16. TOOLBAR AREA (Green Styling)
--------------------------------------------------------------------------------------- */

.app-toolbar-wrapper {
    background-color: #e3e7f0; /* Light green */
    border-left: 5px solid #343a40; /* Dark green */
    padding: 1rem 1.25rem;
    font-weight: 500;
    margin-bottom: 2.5rem;
    box-shadow: 0 1px 0 #DDE7DE;
}

.page-heading {
    color: #343a40;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.breadcrumb-item a,
.breadcrumb-item.text-gray-700 {
    color: #343a40 !important;
}

/* ---------------------------------------------------------------------------------------
   17. ALERT STYLES
--------------------------------------------------------------------------------------- */

.bg-light-info {
    background-color: #FFF6E1 !important; /* Light gold background */
}

.border-info-subtle {
    border-color: #E5BD65 !important; /* Darker gold border */
}

.text-dark {
    color: #4F3F18 !important; /* Deep earthy tone for heading */
}

/* ---------------------------------------------------------------------------------------
   18. HEADER & TOOLBAR COLOUR SWAP (June 2025 Refresh)
--------------------------------------------------------------------------------------- */

/* Main top navigation bar background */
#kt_app_header,
#kt_app_header_container {
    background-color: #343a40 !important;
}

/* Navigation link colours (top bar) */
.menu-link.utility-link .menu-title,
.menu-title.utility-title {
    color: #ffffff !important;
}

.menu-link.utility-link:hover .menu-title,
.menu-item.show.here .menu-link .menu-title,
.menu-item.show.here .menu-title.utility-title {
    color: #ffffff !important;
    text-decoration: underline;
}

/* Toolbar background now matches former tab background */
.app-toolbar-wrapper {
    background-color: #FFF6E1 !important;
    border-left: 5px solid #E5BD65;
    padding: 1rem 1.25rem;
    font-weight: 500;
    margin-bottom: 2.5rem;
    box-shadow: 0 1px 0 #E5BD65;
}

/* Adjust heading color for toolbar */
.page-heading {
    color: #4F3F18 !important;
}

/* ---------------------------------------------------------------------------------------
   19. MEMBER DASHBOARD TAB AREA UPDATED (Now uses green)
--------------------------------------------------------------------------------------- */

.app-content{
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.app-content-menu {
    background-color: transparent !important;
    box-shadow: none !important;
    margin-top: 1rem;
    border-radius: 0.75rem;
    padding: 0.5rem 1rem;
}

    .app-content-menu .menu-link {
        color: #343a40 !important;
        border-bottom: 3px solid transparent;
    }

        .app-content-menu .menu-link.active {
            background-color: #FFFFFF !important;
            color: #2E3B44 !important;
            border-radius: 0.5rem;
            font-weight: 600;
            border-bottom: 5px solid #004990;
            box-shadow: none !important;
        }

        .app-content-menu .menu-link:hover {
            background-color: #C6DCC6;
            color: #2E3B44;
        }

        .app-content-menu .menu-link .menu-title {
            color: #2E3B44 !important;
        }

    .app-content-menu .menu-item {
        margin-right: 0.5rem;
    }

@media (max-width: 768px) {
    .app-content-menu {
        justify-content: center;
    }
}

/* ---------------------------------------------------------------------------------------
   20. SUBTLE WELCOME TOOLBAR STYLING
--------------------------------------------------------------------------------------- */

/* Softer green background and less aggressive left border */
.app-toolbar-wrapper {
    background-color: #e1e4e5 !important;
    border: 2px solid #004990;
    padding: 1rem 1.25rem;
    font-weight: 500;
    margin-bottom: 2rem;
    box-shadow: none;
}

/* Friendlier, softer text styling */
.page-heading {
    color: #343a40 !important;
    text-transform: none;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: normal;
}