/*--------------------------------------------------------------
# Offcanvas
--------------------------------------------------------------*/
.summit-offcanvas {
    width: 450px !important; /* Set your desired width */
}
/*--------------------------------------------------------------
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Initials Circle Avatar
--------------------------------------------------------------*/
.avatar-title {
    background-color: #495057; /* Dark background color */
    color: #ffffff; /* White text color */
    border: 1px solid #6c757d; /* Optional: darker border color */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px; /* Ensure it's circular */
    height: 24px; /* Ensure it's circular */
}
/*--------------------------------------------------------------
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# TMC Colors
--------------------------------------------------------------*/
.lite-green {
    color: #000;
    background-color: #d1e7dd !important;
}

.lite-green-text {
    background-color: #d1e7dd;
}

.dark-green {
    color: #FFFFF0;
    background-color: #67AC73 !important;
}

.lite-red {
    color: #000;
    background-color: #FFC7CE !important;
}

.lite-red-text {
    background: #FFC7CE;
}

.dark-red {
    color: #000;
    background-color: #FF0000 !important;
}

.lite-blue {
    color: #000;
    background-color: #8ABDF2 !important;
}

.lite-blue-text {
    background: #8ABDF2;
}

.dark-blue {
    color: #000;
    background-color: #10ACE6 !important;
}

.lite-yellow {
    color: #000;
    background-color: #FFFF00 !important;
}

.lite-yellow-text {
    background-color: #FFFF00;
}

.dark-yellow {
    color: #000;
    background-color: #FCC203 !important;
}

.dark-yellow-text {
    background-color: #FCC203;
}

.lite-gray {
    color: #000;
    background-color: #E2E2E2 !important;
}
/*--------------------------------------------------------------
--------------------------------------------------------------*/


.nav-highlight {
    color: #ffc107; /* Bootstrap warning text color */
}

.tmc-card-round {
    border-radius: 15px;
}

.btn.btn-toggle {
    padding: 20px;
}

.topbar-toggler.more {
    padding: 20px;
}


/*--------------------------------------------------------------
# Back To Top
--------------------------------------------------------------*/
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    z-index: 1000;
    border: none; /* Remove border */
    border-radius: 0.25rem; /* Match the border radius of the "Download PDF" button */
    padding: 0.375rem 0.75rem; /* Match the padding of the "Download PDF" button */
    font-size: 1rem; /* Match the font size of the "Download PDF" button */
    text-align: center; /* Center the icon */
    line-height: 1.5; /* Match the line height of the "Download PDF" button */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Add shadow */
    transition: background-color 0.3s, transform 0.3s; /* Smooth transitions */
}
.back-to-top:hover {
    transform: translateY(-5px); /* Slightly move up on hover */
}

.back-to-top i {
    font-size: 1.25rem; /* Match the icon size of the "Download PDF" button */
}
/*--------------------------------------------------------------
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Container & Control Full Viewport Sizing
--------------------------------------------------------------*/
.full-height-section {
    height: calc(100vh - 125px);  /*Adjust based on actual navbar and footer height*/
    display: flex;
    flex-direction: column;
}
.full-height-control {
    flex-grow: 1;  /*Allow the grid to grow and fill the available space*/
    width: 100%;
}
/*--------------------------------------------------------------
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Leaflet z-index fix & other settings
--------------------------------------------------------------*/
.leaflet-container {
    z-index: 0; /* Set a lower value */
}

.tmc-marker .leaflet-popup-scrolled {
    border-top: none;
    border-bottom: none;
}
.tmc-marker .leaflet-popup-content-wrapper {
    background: #2c3e50;
    color: #fff;
    font-size: 16px;
    line-height: 24px;
    border-radius: 0px;
}
.tmc-marker .leaflet-popup-content-wrapper a {
    color: rgba(255, 255, 255, 0.1);
}
.tmc-marker .leaflet-popup-tip-container {
    width: 30px;
    height: 15px;
}
.tmc-marker .leaflet-popup-tip {
    background: transparent;
    border: none;
    box-shadow: none;
}



/*--------------------------------------------------------------
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Login card size
--------------------------------------------------------------*/
.auth-card {
    max-width: 700px; /* Set your desired width */
    width: 100%; /* Ensures it remains responsive */
}
/*--------------------------------------------------------------
--------------------------------------------------------------*/




.tooltip.bs-tooltip-top .tooltip-inner,
.tooltip.bs-tooltip-bottom .tooltip-inner,
.tooltip.bs-tooltip-left .tooltip-inner,
.tooltip.bs-tooltip-right .tooltip-inner {
    background-color: #cce5ff !important;
    color: #004085 !important;
    border: 1px solid #b8daff !important;
}

.tooltip.bs-tooltip-top .arrow::before,
.tooltip.bs-tooltip-bottom .arrow::before,
.tooltip.bs-tooltip-left .arrow::before,
.tooltip.bs-tooltip-right .arrow::before {
    border-top-color: #cce5ff !important;
    border-bottom-color: #cce5ff !important;
    border-left-color: #cce5ff !important;
    border-right-color: #cce5ff !important;
}






/*--------------------------------------------------------------
# Bootstrap tabs style
--------------------------------------------------------------*/
.nav-tabs {
    border-bottom: 2px solid #dee2e6; /* Adjust as per your preference */
}
.nav-tabs .nav-link {
    border: 1px solid transparent;
    border-radius: 0; /* Remove rounded corners */
    color: #495057;
    padding: 10px 15px; /* Comfortable spacing for tabs */
    transition: color 0.3s, background-color 0.3s, border-color 0.3s; /* Smooth transitions */
}
.nav-tabs .nav-link:hover {
    border-color: #e9ecef #e9ecef #dee2e6;
    color: #0056b3; /* Adjust hover color */
    background-color: #f8f9fa; /* Subtle hover effect */
}
.nav-tabs .nav-link.active {
    border-color: #dee2e6 #dee2e6 #fff;
    color: #212529;
    background-color: #fff; /* Active tab background */
}
.nav-tabs .nav-item {
    margin-bottom: -1px; /* Align tabs to the bottom border */
}
/*--------------------------------------------------------------
--------------------------------------------------------------*/



.h-85 {
    height: 85% !important;
}



/* ==============================================================
   TMC Summit – Brand Color Overrides (non-destructive, additive)
   Paste this entire block at the END of tmc.summit.css so it wins.
   (If an old color persists, clear cache or append ?v=2 to CSS URL.)
   Palette (HEX):
   #00507C, #18234F, #22346A, #1362A1, #2F86CC, #5CCAEB,
   #F26A22, #148E45, #B4B5B3, #52565A, gold: #B47F2B → #F8DF7C → #B47F2B
   ============================================================== */

/* 1) Brand tokens (custom variables for easy reuse) */
:root {
    /* Core brand */
    --tmc-teal-800: #00507C;
    --tmc-navy-900: #18234F;
    --tmc-navy-800: #22346A;
    --tmc-blue-700: #1362A1; /* primary in light theme */
    --tmc-blue-500: #2F86CC; /* primary in dark theme / secondary in light */
    --tmc-cyan-300: #5CCAEB;
    /* Accents / status */
    --tmc-orange-500: #F26A22; /* danger/warn accent */
    --tmc-green-600: #148E45; /* success */
    /* Neutrals */
    --tmc-gray-300: #B4B5B3;
    --tmc-gray-700: #52565A;
    /* Gold gradient stops */
    --tmc-gold-700: #B47F2B;
    --tmc-gold-300: #F8DF7C;
}

/* 2) Bootstrap semantic token remap (LIGHT) */
:root,
[data-bs-theme="light"] {
    --bs-primary: var(--tmc-blue-700); /* main brand */
    --bs-secondary: var(--tmc-blue-500);
    --bs-info: var(--tmc-cyan-300);
    --bs-success: var(--tmc-green-600);
    --bs-warning: var(--tmc-gold-300);
    --bs-danger: var(--tmc-orange-500);
    --bs-link-color: var(--tmc-blue-700);
    --bs-link-hover-color: var(--tmc-blue-500);
    --bs-gray-400: var(--tmc-gray-300);
    --bs-gray-700: var(--tmc-gray-700);
    --bs-border-color: #e6e8ea;
    /* Subtle backgrounds & borders for contextual components */
    --bs-primary-bg-subtle: color-mix(in srgb, var(--tmc-blue-700) 12%, white);
    --bs-info-bg-subtle: color-mix(in srgb, var(--tmc-cyan-300) 16%, white);
    --bs-success-bg-subtle: color-mix(in srgb, var(--tmc-green-600) 12%, white);
    --bs-warning-bg-subtle: color-mix(in srgb, var(--tmc-gold-300) 24%, white);
    --bs-danger-bg-subtle: color-mix(in srgb, var(--tmc-orange-500) 16%, white);
    --bs-primary-border-subtle: color-mix(in srgb, var(--tmc-blue-700) 35%, transparent);
    --bs-info-border-subtle: color-mix(in srgb, var(--tmc-cyan-300) 35%, transparent);
    --bs-success-border-subtle: color-mix(in srgb, var(--tmc-green-600) 35%, transparent);
    --bs-warning-border-subtle: color-mix(in srgb, var(--tmc-gold-300) 35%, transparent);
    --bs-danger-border-subtle: color-mix(in srgb, var(--tmc-orange-500) 35%, transparent);
}

/* 3) Bootstrap semantic token remap (DARK) */
[data-bs-theme="dark"] {
    --bs-primary: var(--tmc-blue-500); /* brighter for dark */
    --bs-secondary: var(--tmc-teal-800);
    --bs-info: var(--tmc-cyan-300);
    --bs-success: var(--tmc-green-600);
    --bs-warning: var(--tmc-gold-300);
    --bs-danger: var(--tmc-orange-500);
    --bs-link-color: var(--tmc-cyan-300);
    --bs-link-hover-color: var(--tmc-blue-500);
    --bs-primary-bg-subtle: color-mix(in srgb, var(--tmc-blue-700) 22%, transparent);
    --bs-info-bg-subtle: color-mix(in srgb, var(--tmc-cyan-300) 18%, transparent);
    --bs-success-bg-subtle: color-mix(in srgb, var(--tmc-green-600) 18%, transparent);
    --bs-warning-bg-subtle: color-mix(in srgb, var(--tmc-gold-300) 28%, transparent);
    --bs-danger-bg-subtle: color-mix(in srgb, var(--tmc-orange-500) 20%, transparent);
    --bs-border-color: #333f55;
}

/* 4) DEFENSIVE PRIMARY HOTFIX (wins over any earlier rules) */
.bg-primary {
    background-color: var(--bs-primary) !important;
}

[data-bs-theme="light"] .bg-primary {
    background-color: var(--bs-primary) !important;
}

[data-bs-theme="dark"] .bg-primary {
    background-color: var(--bs-primary) !important;
}

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

.border-primary {
    border-color: var(--bs-primary) !important;
}

.text-bg-primary {
    color: #fff !important;
    background-color: var(--bs-primary) !important;
}

/* 5) Buttons – keep Bootstrap API, retint to brand */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 92%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 92%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 95%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 95%, black);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: 19, 98, 161; /* ~ #1362A1 */
}

.btn-secondary {
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--tmc-blue-500) 92%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--tmc-blue-500) 92%, black);
}

.btn-success {
    --bs-btn-bg: var(--bs-success);
    --bs-btn-border-color: var(--bs-success);
    --bs-btn-hover-bg: color-mix(in srgb, var(--tmc-green-600) 92%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--tmc-green-600) 92%, black);
}

.btn-info {
    --bs-btn-bg: var(--bs-info);
    --bs-btn-border-color: var(--bs-info);
    --bs-btn-hover-bg: color-mix(in srgb, var(--tmc-cyan-300) 92%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--tmc-cyan-300) 92%, black);
}

.btn-warning {
    --bs-btn-bg: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-bg: color-mix(in srgb, var(--tmc-gold-300) 92%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--tmc-gold-300) 92%, black);
    --bs-btn-color: #212529;
}

.btn-danger {
    --bs-btn-bg: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-bg: color-mix(in srgb, var(--tmc-orange-500) 92%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--tmc-orange-500) 92%, black);
}

/* 6) Badge alignment (when using bg-primary) */
.badge.bg-primary {
    background-color: var(--bs-primary) !important;
}

/* 7) Utility helpers for direct use (keeps your old classes intact) */
.text-tmc-teal {
    color: var(--tmc-teal-800) !important;
}

.text-tmc-navy {
    color: var(--tmc-navy-900) !important;
}

.text-tmc-blue {
    color: var(--tmc-blue-700) !important;
}

.text-tmc-blue-2 {
    color: var(--tmc-blue-500) !important;
}

.text-tmc-cyan {
    color: var(--tmc-cyan-300) !important;
}

.text-tmc-orange {
    color: var(--tmc-orange-500) !important;
}

.text-tmc-green {
    color: var(--tmc-green-600) !important;
}

.text-tmc-gray {
    color: var(--tmc-gray-700) !important;
}

.bg-tmc-teal {
    background-color: var(--tmc-teal-800) !important;
    color: #fff !important;
}

.bg-tmc-navy {
    background-color: var(--tmc-navy-900) !important;
    color: #fff !important;
}

.bg-tmc-blue {
    background-color: var(--tmc-blue-700) !important;
    color: #fff !important;
}

.bg-tmc-blue-2 {
    background-color: var(--tmc-blue-500) !important;
    color: #fff !important;
}

.bg-tmc-cyan {
    background-color: var(--tmc-cyan-300) !important;
    color: #003244 !important;
}

.bg-tmc-orange {
    background-color: var(--tmc-orange-500) !important;
    color: #fff !important;
}

.bg-tmc-green {
    background-color: var(--tmc-green-600) !important;
    color: #fff !important;
}

.bg-tmc-gray {
    background-color: var(--tmc-gray-700) !important;
    color: #fff !important;
}

/* 8) Gold gradient helper */
.bg-tmc-gold-gradient {
    background-image: linear-gradient(90deg, var(--tmc-gold-700), var(--tmc-gold-300) 50%, var(--tmc-gold-700));
    color: #222;
}

/* 9) Gentle re-skin of a few custom bits already referenced */
.avatar-title {
    background-color: var(--tmc-navy-900);
    color: #ffffff;
    border-color: var(--tmc-gray-700);
}

/* Optional: tooltip palette aligns with info color */
.tooltip.bs-tooltip-top .tooltip-inner,
.tooltip.bs-tooltip-bottom .tooltip-inner,
.tooltip.bs-tooltip-left .tooltip-inner,
.tooltip.bs-tooltip-right .tooltip-inner {
    background-color: color-mix(in srgb, var(--tmc-cyan-300) 30%, white) !important;
    color: var(--tmc-navy-900) !important;
    border: 1px solid color-mix(in srgb, var(--tmc-cyan-300) 50%, white) !important;
}




.card-body .list-unstyled li .fw-bold {
    font-weight: 700 !important;
}

.card-body .list-unstyled li .fw-normal {
    font-weight: 400 !important;
}













/* =========================================================
   Accordion header — LIGHT MODE ONLY
   Header background: #E5F7FC
   Header text:       #0B3B57
   ========================================================= */

html:not([data-bs-theme="dark"]) .accordion,
[data-bs-theme="light"] .accordion {
    --bs-accordion-btn-bg: #E5F7FC;
    --bs-accordion-active-bg: #E5F7FC;
    --bs-accordion-btn-color: #0B3B57;
    --bs-accordion-active-color: #0B3B57;
    --bs-accordion-border-color: rgba(11, 59, 87, 0.28);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%230B3B57' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
}

html:not([data-bs-theme="dark"]) .accordion .accordion-button,
[data-bs-theme="light"] .accordion .accordion-button {
    background-color: var(--bs-accordion-btn-bg);
    color: var(--bs-accordion-btn-color);
    box-shadow: none;
}

html:not([data-bs-theme="dark"]) .accordion .accordion-button:not(.collapsed),
[data-bs-theme="light"] .accordion .accordion-button:not(.collapsed) {
    background-color: var(--bs-accordion-active-bg);
    color: var(--bs-accordion-active-color);
    box-shadow: none;
}

html:not([data-bs-theme="dark"]) .accordion .accordion-button:hover,
html:not([data-bs-theme="dark"]) .accordion .accordion-button:focus,
[data-bs-theme="light"] .accordion .accordion-button:hover,
[data-bs-theme="light"] .accordion .accordion-button:focus {
    background-color: var(--bs-accordion-btn-bg);
    color: var(--bs-accordion-btn-color);
    box-shadow: none;
}



/* =========================================================
   Nav-pills — LIGHT MODE ONLY
   ========================================================= */
.nav.nav-pills {
    --tmc-pill-active-bg: var(--bs-btn-bg, var(--bs-primary));
    --tmc-pill-active-color: var(--bs-btn-color, #fff);
    --tmc-pill-hover-bg: var(--bs-btn-hover-bg, var(--bs-primary));
    --tmc-pill-focus-shadow-rgb: var(--bs-btn-focus-shadow-rgb, var(--bs-primary-rgb, 13,110,253));
    --bs-nav-pills-link-active-bg: var(--tmc-pill-active-bg);
    --bs-nav-pills-link-active-color: var(--tmc-pill-active-color);
}

.nav.nav-pills .nav-link.active,
.nav.nav-pills .show > .nav-link {
    background-color: var(--tmc-pill-active-bg);
    color: var(--tmc-pill-active-color);
}

.nav.nav-pills .nav-link:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(var(--tmc-pill-focus-shadow-rgb), .25);
}

.nav.nav-pills .nav-link:not(.active):hover {
    background-color: color-mix(in srgb, var(--tmc-pill-hover-bg) 12%, transparent);
}





/* Top toolbar that visually matches AG Grid using theme CSS variables */
.tmc-ag-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    /* Use AG theme variables so it blends in with any theme */
    background: var(--ag-background-color, #fff);
    border: 1px solid var(--ag-border-color, #d9d9d9);
    border-bottom: none; /* merges visually with grid header */
    border-top-left-radius: var(--ag-border-radius, 4px);
    border-top-right-radius: var(--ag-border-radius, 4px);
}

/* Optional: keep button look simple; keep your own styles if you have them */
.tmc-ag-toolbar button {
    padding: 4px 10px;
    border: 1px solid var(--ag-border-color, #d9d9d9);
    background: var(--ag-foreground-color, #f7f7f7);
    cursor: pointer;
}

.tmc-ag-toolbar button:active {
    transform: translateY(1px);
}



/* Bootstrap Icon Sizing */
.bi.fs-1 {
    font-size: calc(1.375rem + 1.5vw) !important;
}

.bi.fs-2 {
    font-size: calc(1.325rem + .9vw) !important;
}

.bi.fs-3 {
    font-size: calc(1.3rem + .6vw) !important;
}

.bi.fs-4 {
    font-size: 1.5rem !important;
}

.bi.fs-5 {
    font-size: 1.25rem !important;
}

.bi.fs-6 {
    font-size: 1rem !important;
}