/* ==========================================================================
   Cohesive Brand Flat Theme for Filament Admin
   Color Palette:
   - Primary:        #287A74 / rgb(40, 122, 116)
   - Primary Dark:   #1A4D49 / rgb(26, 77, 73)
   - Secondary:      #55A9A0 / rgb(85, 169, 160)
   - Mint:           #AEEED3 / rgb(174, 238, 211)
   - Butter:         #FFF8B0 / rgb(255, 248, 176)
   - Canvas:         #F4F7F6
   - Card:           #FFFFFF
   - Border:         rgba(85, 169, 160, 0.32)
   - Text Primary:   #173835
   - Text Secondary: #4D7672
   ========================================================================== */

:root {
    --brand-primary: #287A74;
    --brand-primary-dark: #1A4D49;
    --brand-secondary: #55A9A0;
    --brand-mint: #AEEED3;
    --brand-butter: #FFF8B0;
    --brand-canvas: #F4F7F6;
    --brand-card: #FFFFFF;
    --brand-border: rgba(85, 169, 160, 0.32);
    --brand-text-primary: #173835;
    --brand-text-secondary: #4D7672;
}

/* 1. Page & Layout Tonal Canvas */
body, html, .fi-body, .fi-layout, .fi-main {
    background-color: var(--brand-canvas) !important;
    color: var(--brand-text-primary) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* 2. Global Headings & Typography (Never White on Light Canvas) */
h1, h2, h3, h4, h5, h6,
.fi-header-heading,
.fi-ta-header-heading,
.fi-page-header-heading {
    color: var(--brand-text-primary) !important;
    font-weight: 700 !important;
}

.fi-breadcrumbs,
.fi-breadcrumbs * {
    color: var(--brand-text-secondary) !important;
}

/* 3. Cohesive Light Sidebar Architecture */
aside.fi-sidebar,
.fi-sidebar {
    background-color: #FFFFFF !important;
    border-right: 1px solid rgba(85, 169, 160, 0.25) !important;
}

.fi-sidebar-header {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid rgba(85, 169, 160, 0.2) !important;
    padding: 1rem 1.25rem !important;
}

.fi-sidebar-header .fi-logo,
.fi-sidebar-header span,
.fi-sidebar-header a {
    color: var(--brand-text-primary) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}

.fi-sidebar-group-label,
.fi-sidebar-group-label span {
    color: var(--brand-text-secondary) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

/* Inactive Sidebar Navigation Items */
.fi-sidebar-item-button,
.fi-sidebar-item-label,
.fi-sidebar-item-label span {
    color: var(--brand-text-primary) !important;
    font-weight: 600 !important;
}

.fi-sidebar-item-icon {
    color: var(--brand-primary) !important;
}

.fi-sidebar-item-button:hover {
    background-color: rgba(40, 122, 116, 0.08) !important;
    color: var(--brand-primary) !important;
}

/* Active navigation item */
.fi-sidebar-item-active .fi-sidebar-item-button,
.fi-sidebar-item-active .fi-sidebar-item-label,
.fi-sidebar-item-active .fi-sidebar-item-label span {
    background-color: #E6F4F1 !important;
    color: var(--brand-primary) !important;
    font-weight: 700 !important;
    border-left: 3px solid var(--brand-primary) !important;
}

.fi-sidebar-item-active .fi-sidebar-item-icon {
    color: var(--brand-primary) !important;
}

/* 4. Topbar Architecture */
.fi-topbar {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid var(--brand-border) !important;
}

.fi-topbar-item-label {
    color: var(--brand-text-primary) !important;
}

/* 5. Section & Card Styling */
.fi-section {
    background-color: var(--brand-card) !important;
    border: 1px solid var(--brand-border) !important;
    border-radius: 0.75rem !important;
    margin-bottom: 1.5rem !important;
    overflow: hidden !important;
}

.fi-section-header {
    background-color: rgba(40, 122, 116, 0.05) !important;
    border-bottom: 1px solid rgba(85, 169, 160, 0.2) !important;
    padding: 1rem 1.25rem !important;
}

.fi-section-header-heading {
    color: var(--brand-text-primary) !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
}

.fi-section-header-description {
    color: var(--brand-text-secondary) !important;
    font-size: 0.8125rem !important;
    margin-top: 0.25rem !important;
}

.fi-section-content {
    padding: 1.25rem !important;
}

/* 6. Tabs Segmented Control Bar */
.fi-tabs,
nav[role="tablist"],
.fi-tabs-nav {
    background-color: #E6F0EE !important;
    border: 1px solid var(--brand-border) !important;
    border-radius: 0.625rem !important;
    padding: 0.375rem !important;
    margin-bottom: 1.75rem !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.375rem !important;
}

.fi-tabs-item,
button[role="tab"] {
    background: transparent !important;
    color: var(--brand-primary) !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    border-radius: 0.5rem !important;
    padding: 0.625rem 1.25rem !important;
    border: 1px solid transparent !important;
    transition: all 0.15s ease-in-out !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.fi-tabs-item:hover,
button[role="tab"]:hover {
    background-color: rgba(40, 122, 116, 0.12) !important;
    color: var(--brand-text-primary) !important;
}

.fi-tabs-item[aria-selected="true"],
.fi-tabs-item.fi-active,
button[role="tab"][aria-selected="true"] {
    background-color: var(--brand-primary) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    border: 1px solid #1E605B !important;
}

.fi-tabs-item[aria-selected="true"] .fi-tabs-item-label,
.fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-tabs-item[aria-selected="true"] > span:not(.fi-badge),
.fi-tabs-item.fi-active > span:not(.fi-badge) {
    color: #FFFFFF !important;
}

.fi-tabs-item[aria-selected="true"] svg,
.fi-tabs-item.fi-active svg,
button[role="tab"][aria-selected="true"] svg {
    color: var(--brand-mint) !important;
}

.fi-tabs-item[aria-selected="true"] .fi-badge,
.fi-tabs-item.fi-active .fi-badge {
    background-color: #FFFFFF !important;
    border: 1px solid #CBDCD8 !important;
}

.fi-tabs-item[aria-selected="true"] .fi-badge *,
.fi-tabs-item.fi-active .fi-badge * {
    color: var(--brand-primary) !important;
    font-weight: 700 !important;
}

/* 7. Data Tables (Crisp High-Contrast Text & Headers) */
.fi-ta-ctn {
    background-color: #FFFFFF !important;
    border: 1px solid var(--brand-border) !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
}

.fi-ta-header {
    background-color: rgba(40, 122, 116, 0.04) !important;
    border-bottom: 1px solid rgba(85, 169, 160, 0.2) !important;
}

.fi-ta-header-cell,
.fi-ta-header-cell *,
.fi-ta-header-cell-label,
.fi-ta-header-cell-label span,
.fi-ta-header-cell button {
    color: var(--brand-text-primary) !important;
    font-weight: 700 !important;
    font-size: 0.8125rem !important;
}

/* Ensure column text is always dark teal, never white */
.fi-ta-cell,
.fi-ta-cell *,
.fi-ta-text,
.fi-ta-text *,
.fi-ta-text-item,
.fi-ta-text-item *,
.fi-ta-text-item-label,
.fi-ta-col,
.fi-ta-col span,
.fi-ta-record {
    color: var(--brand-text-primary) !important;
}

/* Keep Action links colored with brand primary */
.fi-ta-actions .fi-link,
.fi-ta-actions .fi-link *,
.fi-link-label {
    color: var(--brand-primary) !important;
    font-weight: 600 !important;
}

.fi-ta-row:hover {
    background-color: rgba(174, 238, 211, 0.12) !important;
}

.fi-ta-pagination-records-total-text,
.fi-pagination-records-total-text,
.fi-ta-pagination * {
    color: var(--brand-text-secondary) !important;
}

/* 8. Form Inputs, Textareas, and Dropdowns */
.fi-fo-field-wrp-label label,
.fi-fo-field-wrp-label span {
    color: var(--brand-text-primary) !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    letter-spacing: 0.01em !important;
}

.fi-input-wrp {
    background-color: #F8FAF9 !important;
    border: 1px solid #CBDCD8 !important;
    border-radius: 0.5rem !important;
    transition: all 0.15s ease-in-out !important;
}

.fi-input-wrp:focus-within {
    background-color: #FFFFFF !important;
    border-color: var(--brand-primary) !important;
    outline: 2px solid rgba(40, 122, 116, 0.25) !important;
}

.fi-input,
input.fi-input,
textarea.fi-input {
    background: transparent !important;
    color: var(--brand-text-primary) !important;
    font-size: 0.875rem !important;
    padding: 0.5rem 0.75rem !important;
}

.fi-input-wrp-prefix,
.fi-input-wrp-suffix {
    background-color: rgba(85, 169, 160, 0.15) !important;
    color: var(--brand-text-primary) !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    padding: 0 0.75rem !important;
    border-left: 1px solid #CBDCD8 !important;
    border-right: 1px solid #CBDCD8 !important;
}

.fi-fo-field-wrp-helper-text {
    color: var(--brand-text-secondary) !important;
    font-size: 0.78125rem !important;
    margin-top: 0.25rem !important;
}

/* 9. Switches (Toggles) */
button[role="switch"] {
    border: 1px solid rgba(85, 169, 160, 0.4) !important;
}
button[role="switch"][aria-checked="true"] {
    background-color: var(--brand-primary) !important;
}
button[role="switch"][aria-checked="false"] {
    background-color: #D1DDD9 !important;
}

/* 10. Buttons */
.fi-btn-primary,
button.fi-btn-primary,
button[type="submit"].fi-btn {
    background-color: var(--brand-primary) !important;
    color: #FFFFFF !important;
    border: 1px solid #1E605B !important;
    font-weight: 600 !important;
    border-radius: 0.5rem !important;
    padding: 0.625rem 1.25rem !important;
    transition: background-color 0.15s ease-in-out !important;
}

.fi-btn-primary:hover,
button.fi-btn-primary:hover,
button[type="submit"].fi-btn:hover {
    background-color: #1E605B !important;
}

/* 11. Status Badges */
.fi-badge-color-success {
    background-color: var(--brand-mint) !important;
    color: #103834 !important;
    border: 1px solid var(--brand-secondary) !important;
    font-weight: 600 !important;
}

.fi-badge-color-warning {
    background-color: var(--brand-butter) !important;
    color: #5C4E00 !important;
    border: 1px solid #E3D966 !important;
    font-weight: 600 !important;
}

.fi-badge-color-info {
    background-color: rgba(85, 169, 160, 0.2) !important;
    color: var(--brand-text-primary) !important;
    border: 1px solid var(--brand-secondary) !important;
    font-weight: 600 !important;
}

/* 12. System Health Dedicated Layout */
.health-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 1.25rem !important;
    margin-top: 1.25rem !important;
}

.health-card {
    background-color: #FFFFFF !important;
    border: 1px solid var(--brand-border) !important;
    border-radius: 0.75rem !important;
    padding: 1.25rem !important;
}

.health-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 0.75rem !important;
}

.health-badge-success {
    background-color: var(--brand-mint) !important;
    color: #103834 !important;
    border: 1px solid var(--brand-secondary) !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 0.375rem !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
}

.health-badge-warning {
    background-color: var(--brand-butter) !important;
    color: #5C4E00 !important;
    border: 1px solid #E3D966 !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 0.375rem !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
}

.health-badge-danger {
    background-color: #FEE2E2 !important;
    color: #991B1B !important;
    border: 1px solid #FCA5A5 !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 0.375rem !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
}

.health-metric {
    font-size: 1.75rem !important;
    font-weight: 800 !important;
    color: var(--brand-text-primary) !important;
    margin-bottom: 0.25rem !important;
}

.health-metric-sub {
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    color: var(--brand-text-secondary) !important;
}

.health-details {
    font-size: 0.8125rem !important;
    color: var(--brand-text-secondary) !important;
    line-height: 1.4 !important;
}

.health-api-row {
    padding: 0.875rem 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(85, 169, 160, 0.15) !important;
}

.health-api-row:last-child {
    border-bottom: none !important;
}

/* 13. Modals */
.fi-modal-window {
    background-color: #FFFFFF !important;
    border: 1px solid rgba(85, 169, 160, 0.4) !important;
    border-radius: 0.875rem !important;
}

/* 14. Full Width & Container Expansion (No Max Width Restriction) */
.fi-main-ctn,
.fi-main-content,
.fi-main,
.fi-page,
.fi-section,
.fi-ta-ctn {
    max-width: 100% !important;
    width: 100% !important;
}

/* 15. Modern Video Card Grid Layout (2 Cards per Row on Desktop) */
.fi-ta-content-grid {
    display: grid !important;
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 1.25rem !important;
    width: 100% !important;
}

@media (min-width: 1024px) {
    .fi-ta-content-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

.fi-ta-content-grid .fi-ta-record {
    background-color: #FFFFFF !important;
    border: 1px solid var(--brand-border) !important;
    border-radius: 0.75rem !important;
    padding: 0.85rem 1rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    position: relative !important;
    transition: all 0.15s ease-in-out !important;
    width: 100% !important;
}

.fi-ta-content-grid .fi-ta-record:hover {
    border-color: var(--brand-primary) !important;
}

/* Neatly pin bulk checkbox to top-right of card */
.fi-ta-content-grid .fi-ta-record-checkbox {
    position: absolute !important;
    top: 0.65rem !important;
    right: 0.65rem !important;
    z-index: 10 !important;
}

.fi-ta-record-content-ctn {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 0.75rem !important;
    height: 100% !important;
    padding-top: 0 !important;
}

.fi-ta-record-content {
    display: block !important;
    width: auto !important;
}

/* Dedicated Action Bar on Bottom of Each Card */
.fi-ta-record-content-ctn > .fi-ta-actions {
    border-top: 1px solid rgba(85, 169, 160, 0.18) !important;
    padding-top: 0.65rem !important;
    margin-top: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 0.4rem !important;
    width: 100% !important;
}

/* Distinct high-contrast button styling for card actions */
.fi-ta-actions .fi-btn {
    border-radius: 0.375rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    padding: 0.35rem 0.75rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    line-height: 1.25 !important;
    transition: all 0.12s ease-in-out !important;
}

.fi-ta-actions .fi-btn-color-primary,
.fi-ta-actions .fi-btn[class*="fi-color-primary"] {
    background-color: var(--brand-primary) !important;
    color: #FFFFFF !important;
    border: 1px solid #1E605B !important;
}
.fi-ta-actions .fi-btn-color-primary:hover,
.fi-ta-actions .fi-btn[class*="fi-color-primary"]:hover {
    background-color: #1E605B !important;
}

.fi-ta-actions .fi-btn-color-success,
.fi-ta-actions .fi-btn[class*="fi-color-success"] {
    background-color: #10B981 !important;
    color: #FFFFFF !important;
    border: 1px solid #059669 !important;
}
.fi-ta-actions .fi-btn-color-success:hover,
.fi-ta-actions .fi-btn[class*="fi-color-success"]:hover {
    background-color: #059669 !important;
}

.fi-ta-actions .fi-btn-color-danger,
.fi-ta-actions .fi-btn[class*="fi-color-danger"] {
    background-color: #EF4444 !important;
    color: #FFFFFF !important;
    border: 1px solid #DC2626 !important;
}
.fi-ta-actions .fi-btn-color-danger:hover,
.fi-ta-actions .fi-btn[class*="fi-color-danger"]:hover {
    background-color: #DC2626 !important;
}

.fi-ta-actions .fi-btn-color-gray,
.fi-ta-actions .fi-btn[class*="fi-color-gray"],
.fi-ta-actions .fi-btn:not([class*="fi-color-primary"]):not([class*="fi-color-success"]):not([class*="fi-color-danger"]) {
    background-color: #FFFFFF !important;
    color: var(--brand-text-primary) !important;
    border: 1px solid #CBDCD8 !important;
}
.fi-ta-actions .fi-btn-color-gray:hover,
.fi-ta-actions .fi-btn[class*="fi-color-gray"]:hover,
.fi-ta-actions .fi-btn:not([class*="fi-color-primary"]):not([class*="fi-color-success"]):not([class*="fi-color-danger"]):hover {
    background-color: #F0F6F5 !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-primary) !important;
}