html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

/* ===== Global layout / reporting polish ===== */

/* Consistent max-width for header + page content */
header .container-fluid,
.app-container .container-fluid {
    max-width: 1400px;
    margin: 0 auto;
}

/* Page / system title */
#page-title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.4px;
}

/* Logo sizing */
.logo-img {
    height: 42px;
    width: auto;
}

/* Cards (filters + report body) */
.card {
    border-radius: 12px;
}

/* Buttons (icons, actions) */
.btn {
    border-radius: 10px;
}

/* Filter summary chips */
.badge {
    font-size: 0.85rem;
    padding: 0.45em 0.75em;
}

/* Prevent filter name/value from breaking */
.text-nowrap {
    white-space: nowrap;
}

/* ===== Report grid helpers ===== */

/* Alternate detail rows */
.bs-report tbody tr.detail-row:nth-of-type(even) td {
    background: #f8f9fa;
}

/* Group headers */
.bs-report .group-l1 td {
    background: #eef2ff;
    font-weight: 700;
}

.bs-report .group-l2 td {
    background: #f1f5f9;
    font-weight: 650;
}

.bs-report .group-l3 td {
    background: #f8fafc;
    font-weight: 600;
}

/* Subtotals */
.bs-report .subtotal-l3 td {
    background: #fffbea;
    font-weight: 700;
}

.bs-report .subtotal-l2 td {
    background: #fff7ed;
    font-weight: 800;
}

/* Grand total */
.bs-report .grand-total td {
    background: #dcfce7;
    font-weight: 900;
    border-top: 2px solid #22c55e;
}

/* Spacer row */
.bs-report .section-gap td {
    background: #fff;
    padding: 6px;
    border: none;
}
    .report-meta-table .meta-value {
        word-break: break-word;
    }

/* ================================
   Report Meta Table (Banking style)
   ================================ */

.report-meta-table {
    width: 100%;
    table-layout: fixed; /* REQUIRED for % widths to work */
    border-collapse: collapse;
    font-size: 0.85rem;
}

    /* Force column widths */
    .report-meta-table col.meta-col-label {
        width: 30%;
    }

    .report-meta-table col.meta-col-value {
        width: 70%;
    }

.meta-label {
    background-color: #2f5597;
}
    /* Cell base */
    .report-meta-table th,
    .report-meta-table td {
        padding: 4px 8px;
        vertical-align: top;
        border: 1px solid #1f3a63;
    }

        /* FIRST COLUMN  deep blue (override Bootstrap) */
        .report-meta-table th.meta-label {
            background-color: #2f5597 !important; /* deep CBS blue */
            color: #ffffff !important;
            font-weight: 600;
            white-space: nowrap;
        }

    /* SECOND COLUMN */
    .report-meta-table td.meta-value {
        background-color: #ffffff;
        color: #000000;
        word-break: break-word;
    }


/* ===== Theme additions (light/dark) ===== */
:root{
  --report-detail-alt: var(--bs-secondary-bg);
  --report-group-l2: var(--bs-primary-bg-subtle);
  --report-group-l3: var(--bs-secondary-bg);
  --report-subtotal-l3: var(--bs-warning-bg-subtle);
  --report-subtotal-l2: var(--bs-warning-bg-subtle);
  --report-grand-total: var(--bs-success-bg-subtle);
  --report-border-strong: var(--bs-border-color);
}
html[data-bs-theme="dark"]{
  /* Use darker but still distinct surfaces */
  --report-detail-alt: rgba(255,255,255,.04);
  --report-group-l2: rgba(13,110,253,.18);
  --report-group-l3: rgba(255,255,255,.06);
  --report-subtotal-l3: rgba(255,193,7,.14);
  --report-subtotal-l2: rgba(255,193,7,.18);
  --report-grand-total: rgba(25,135,84,.18);
  --report-border-strong: rgba(255,255,255,.18);
}

    /* Dark header buttons should look like "light outline" */
    html[data-bs-theme="dark"] .app-header .btn.btn-outline-secondary {
        color: #fff;
        border-color: rgba(255,255,255,0.55);
    }

        html[data-bs-theme="dark"] .app-header .btn.btn-outline-secondary:hover {
            background: rgba(255,255,255,0.10);
            border-color: rgba(255,255,255,0.75);
        }

.report-toolbar {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    padding: 6px 10px;
}

/* Make muted icons/text readable in dark */
html[data-bs-theme="dark"] .report-toolbar .text-secondary,
html[data-bs-theme="dark"] .report-toolbar i {
    color: var(--bs-body-color) !important;
    opacity: 0.95;
}


/* ===== Seamless app-shell spacing fixes ===== */

/* Your earlier rule sets max-width:1400px on container-fluid and centers it.
   That creates the left/right "gaps" inside app-main.
   Override containers inside the main area to be full-width. */
.app-main > .container,
.app-main > .container-fluid,
.app-main .container,
.app-main .container-fluid{
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Keep comfortable padding without "floating card" look */
.app-main > .container,
.app-main > .container-fluid{
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: .75rem;
}

/* Reduce common top-margin utilities inside app-main (makes it feel like one page) */
.app-main .mt-4,
.app-main .mt-5{
  margin-top: 0 !important;
}

/* Logo readability in dark theme (works even if logo doesn't have a class yet) */
html[data-bs-theme="dark"] .app-header img[alt="SIL Logo"]{
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.12);
}

/* Make icon buttons (hamburger/theme/export) more prominent in dark mode */
html[data-bs-theme="dark"] .btn.btn-outline-secondary{
  color: var(--bs-body-color);
  border-color: rgba(255,255,255,0.45);
}
html[data-bs-theme="dark"] .btn.btn-outline-secondary:hover{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.65);
}

/* If your report toolbar uses outline buttons, ensure they remain visible */
html[data-bs-theme="dark"] .report-toolbar .btn,
html[data-bs-theme="dark"] .report-toolbar .btn-outline-secondary{
  color: var(--bs-body-color);
  border-color: rgba(255,255,255,0.45);
}
html[data-bs-theme="dark"] .report-toolbar .btn-outline-secondary:hover{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.65);
}
/* Theme-aware card header used for report tabs */
.report-card-header {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-bottom: 1px solid var(--bs-border-color);
}

/* Optional: give a subtle accent in light theme */
html[data-bs-theme="light"] .report-card-header {
    background: var(--bs-primary-bg-subtle);
}

/* Optional: slightly lift in dark theme */
html[data-bs-theme="dark"] .report-card-header {
    background: rgba(255,255,255,0.04);
}

.report-card-header h5 {
    color: inherit;
}


/* Label cells (th) */
.report-meta-table th{
  background: var(--bs-tertiary-bg);
  font-weight: 600;
}

/* Improve muted text readability in dark mode */
html[data-bs-theme="dark"] .report-meta-table .text-muted{
  color: rgba(255,255,255,0.75) !important;
}

/* If legacy markup uses bg-white/text-dark inside summary rows */
html[data-bs-theme="dark"] .report-meta-table .bg-white{
  background-color: transparent !important;
}
html[data-bs-theme="dark"] .report-meta-table .text-dark{
  color: var(--bs-body-color) !important;
}

/* Links */
.report-meta-table a{
  color: var(--bs-link-color);
  text-decoration: none;
}
.report-meta-table a:hover{
  color: var(--bs-link-hover-color);
  text-decoration: underline;
}

/* =========================================================
   REPORT UI THEME OVERRIDES
   Keep this block near END of site.css so it wins in CSS cascade.
   ========================================================= */

/* Report tab card header should follow theme (avoid forced blue text/borders) */
.card > .card-header.report-card-header{
  background: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border-bottom: 1px solid var(--bs-border-color) !important;
  box-shadow: none !important;
  background-image: none !important;
}
.card > .card-header.report-card-header *{
  color: var(--bs-body-color) !important;
}

html[data-bs-theme="light"] .card > .card-header.report-card-header{
  background: var(--bs-primary-bg-subtle) !important;
}
html[data-bs-theme="dark"] .card > .card-header.report-card-header{
  background: rgba(255,255,255,0.06) !important;
  border-bottom-color: rgba(255,255,255,0.12) !important;
}

/* ReportMetaBlock meta/summary table (theme-aware) */
.report-meta-table{
  width: 100%;
  table-layout: fixed;

  background: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;

  --bs-table-bg: var(--bs-body-bg) !important;
  --bs-table-color: var(--bs-body-color) !important;
  --bs-table-border-color: var(--bs-border-color) !important;
  --bs-table-striped-bg: var(--bs-secondary-bg);
  --bs-table-striped-color: var(--bs-body-color);
  --bs-table-hover-bg: var(--bs-secondary-bg);
  --bs-table-hover-color: var(--bs-body-color);
}

.report-meta-table th,
.report-meta-table td{
  background-color: transparent !important;
  color: inherit !important;
  border-color: var(--bs-border-color) !important;
  vertical-align: middle;
}

/* 30/70 column split (label/value). If you don't have meta-value class, first-child rule still helps. */
.report-meta-table td.meta-label,
.report-meta-table th.meta-label,
.report-meta-table tr > *:first-child{
  width: 20% !important;
  font-weight: 600;
  white-space: nowrap;
}

.report-meta-table td.meta-value,
.report-meta-table th.meta-value,
.report-meta-table tr > *:not(:first-child){
  width: 85% !important;
}

/* Label background: match pivot-style header grey in dark */
html[data-bs-theme="dark"] .report-meta-table td.meta-label,
html[data-bs-theme="dark"] .report-meta-table th.meta-label,
html[data-bs-theme="dark"] .report-meta-table tr > *:first-child{
  background-color: #4a4a4a !important;
  color: #ffffff !important;
}
.meta-value.text-danger {
    color: #FF6B66;
}
/* Improve muted text readability in dark mode */
html[data-bs-theme="dark"] .report-meta-table .text-muted{
  color: rgba(255,255,255,0.75) !important;
}

/* Override common forced-light helpers inside summary rows */
html[data-bs-theme="dark"] .report-meta-table .bg-white,
html[data-bs-theme="dark"] .report-meta-table .table-light{
  background-color: transparent !important;
}
html[data-bs-theme="dark"] .report-meta-table .text-dark{
  color: var(--bs-body-color) !important;
}

/* Links */
.report-meta-table a{
  color: var(--bs-link-color) !important;
  text-decoration: none;
}
.report-meta-table a:hover{
  color: var(--bs-link-hover-color) !important;
  text-decoration: underline;
}

.copilot-menu-btn {
    float: right;
    margin-top: -28px;
    margin-right: 8px;
    position: relative;
    z-index: 20;
    text-decoration: none;
}

    .copilot-menu-btn:hover {
        text-decoration: none;
    }





/* Sidebar submenu arrow toggle */
.icon-expanded {
    display: none;
}

.submenu-toggle:not(.collapsed) .icon-expanded {
    display: inline-block;
}

.submenu-toggle:not(.collapsed) .icon-collapsed {
    display: none;
}

.submenu-toggle.collapsed .icon-collapsed {
    display: inline-block;
}

.submenu-toggle.collapsed .icon-expanded {
    display: none;
}