/* App styling entrypoint */

body {
    margin: 0;
    padding: 0;
    font-family:'Gill Sans', sans-serif
}

.bslib-sidebar-layout, .page-fluid {
    border: 0 !important;
    box-shadow: none !important;
}

.sidebar {
    background-color: transparent !important;
}

.nav {
    margin-top: 10px!important;
    margin-bottom: 10px!important;
    padding-bottom: 5px!important;
    border-bottom: 1px solid #000;
}

[data-bs-theme=dark] .nav {
    margin-top: 10px!important;
    margin-bottom: 10px!important;
    padding-bottom: 5px!important;
    border-bottom: 1px solid white;
}

.nav-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-inline .shiny-input-container {
    margin-bottom: 0;
}

.nav-inline .form-label {
    display: none;
}

.nav-inline .input-group {
    flex-wrap: nowrap;
}

.nav-inline .input-group > .form-control {
    min-width: 96px;
}

.nav-inline .input-group-text,
.nav-inline .form-control {
    height: 32px;
    padding: 4px 8px;
}

.nav-pills .nav-link {
    border-radius: 28px!important;
    color: #000!important;
    border: 0.5px solid #000 !important;
    font-family: 'Work Sans', sans-serif;
    margin: 0 5px;
}

.nav-pills .nav-link.active {
    background-color: #DBFE7D!important;
    border: 0px solid white !important;
    font-family: 'Work Sans', sans-serif;
}

[data-bs-theme=dark] .nav-pills .nav-link {
    border-radius: 28px!important;
    color: white!important;
    border: 0.5px solid white !important;
    font-family: 'Work Sans', sans-serif;
    margin: 0 5px;
}

[data-bs-theme=dark] .nav-pills .nav-link.active {
    background-color: #DBFE7D!important;
    color: black!important;
    border: 0px solid white !important;
    font-family: 'Work Sans', sans-serif;
}

.card {
    background-color: rgba(103, 103, 103, 0.12);
    border-radius: 26px;
    border: 1px solid #676767;
    box-shadow: none;
}

[data-bs-theme=dark] .card {
    border-color: #676767;
}

.section-desc h1 {
    font-size: 115px!important;
    font-weight: 500!important;
}

.section-desc h5 {
    font-size: 22px!important;
    font-weight: 500!important;
}

.value-box-value {
    font-size: 115px!important;
    font-weight: 300!important;
}

.value-box,
.bslib-value-box {
    box-shadow: none !important;
    background-color: transparent!important;
}

/* Data Quality tab: compact value boxes */
.dq-value-boxes .value-box-value {
    font-size: 28px !important;
    font-weight: 500 !important;
}

.dq-value-boxes .value-box-title {
    font-size: 13px !important;
}

.dq-value-boxes .value-box,
.dq-value-boxes .bslib-value-box {
    background-color: rgba(103, 103, 103, 0.12) !important;
    border: 1px solid #676767;
    border-radius: 16px;
}

/* Stoplight clock icons — override bslib default showcase background/color */
.dq-clock .value-box-showcase,
.dq-clock .bslib-value-box-showcase {
    background-color: transparent !important;
}

.dq-clock-green .value-box-showcase svg,
.dq-clock-green .value-box-showcase svg path,
.dq-clock-green .bslib-value-box-showcase svg,
.dq-clock-green .bslib-value-box-showcase svg path {
    fill: #2DBE6C !important;
    color: #2DBE6C !important;
}

.dq-clock-yellow .value-box-showcase svg,
.dq-clock-yellow .value-box-showcase svg path,
.dq-clock-yellow .bslib-value-box-showcase svg,
.dq-clock-yellow .bslib-value-box-showcase svg path {
    fill: #F5C518 !important;
    color: #F5C518 !important;
}

.dq-clock-red .value-box-showcase svg,
.dq-clock-red .value-box-showcase svg path,
.dq-clock-red .bslib-value-box-showcase svg,
.dq-clock-red .bslib-value-box-showcase svg path {
    fill: #E0432F !important;
    color: #E0432F !important;
}

.pnl-table {
    width: 100%;
}

.table-skin td,
.table-skin th,
.pnl-table td {
    padding: 6px 10px;
    vertical-align: middle;
}

.table-skin tr + tr td,
.pnl-table tr + tr td {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

[data-bs-theme=dark] .table-skin tr + tr td,
[data-bs-theme=dark] .pnl-table tr + tr td {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.table-skin .gridjs-container {
    font-family: 'Work Sans', sans-serif;
}

.table-skin .gridjs-table {
    width: 100%;
}

.table-skin .gridjs-th,
.table-skin .gridjs-td {
    padding: 6px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

[data-bs-theme=dark] .table-skin .gridjs-th,
[data-bs-theme=dark] .table-skin .gridjs-td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.table-skin .gridjs-th {
    font-weight: 600;
    background: transparent;
}

[data-bs-theme=dark] .table-skin .gridjs-th {
    background: transparent;
}

[data-bs-theme=dark] .table-skin .gridjs-th,
[data-bs-theme=dark] .table-skin .gridjs-th-content,
[data-bs-theme=dark] .table-skin .gridjs-container {
    color: #FFFFFF;
    text-shadow: none;
}

[data-bs-theme=dark] .table-skin .gridjs-head,
[data-bs-theme=dark] .table-skin .gridjs-header,
[data-bs-theme=dark] .table-skin .gridjs-thead,
[data-bs-theme=dark] .table-skin thead {
    background: #242424;
}

[data-bs-theme=dark] .table-skin .gridjs-filter input,
[data-bs-theme=dark] .table-skin .gridjs-input {
    background: #1b1b1b;
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

[data-bs-theme=dark] .table-skin .gridjs-th,
[data-bs-theme=dark] .table-skin .gridjs-th-content {
    background: #242424;
    color: #FFFFFF;
}

[data-bs-theme=dark] .table-skin .gridjs-table {
    background: #1f1f1f;
}

[data-bs-theme=dark] .table-skin table {
    background: #1f1f1f;
}

[data-bs-theme=dark] .table-skin thead,
[data-bs-theme=dark] .table-skin th {
    background: #242424 !important;
    color: #FFFFFF !important;
}

[data-bs-theme=dark] .table-skin th div {
    color: #FFFFFF !important;
}

[data-bs-theme=dark] .table-skin th svg path {
    stroke: #FFFFFF;
}

[data-bs-theme=dark] .shiny-data-grid thead,
[data-bs-theme=dark] .shiny-data-grid th {
    background: #242424 !important;
    color: #FFFFFF !important;
}

[data-bs-theme=dark] .shiny-data-grid th div,
[data-bs-theme=dark] .shiny-data-grid th span {
    color: #FFFFFF !important;
}

[data-bs-theme=dark] .shiny-data-grid table {
    background: #1f1f1f;
}

[data-bs-theme=dark] .shiny-data-grid td {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.12);
}

[data-bs-theme=dark] .shiny-data-grid input,
[data-bs-theme=dark] .shiny-data-grid select {
    background: #1b1b1b;
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.exec_headlines {
    background-color: rgba(103, 103, 103, 0.22);
    border-radius: 23px;
    border: 1px solid #676767 !important;
    padding: 5px;
}

.exec-headline-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background-color: rgba(103, 103, 103, 0.12);
    border-radius: 26px;
    border: 1px solid #676767;
    padding: 24px 28px;
}

.exec-title-block {
    flex: 1 1 40%;
}

.exec-title-label {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin: 0 0 8px 0;
}

.exec-title-text {
    font-size: 72px;
    font-weight: 500;
    line-height: 1;
    margin: 0;
}

.exec-metrics {
    flex: 1 1 60%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.exec-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 140px;
}

.exec-metric-label {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

.exec-metric-value {
    font-size: 72px;
    font-weight: 300;
    line-height: 1;
}

.exec-divider {
    width: 1px;
    height: 96px;
    background-color: #000000;
    opacity: 0.4;
}

[data-bs-theme=dark] .exec-divider {
    background-color: #FFFFFF;
    opacity: 0.35;
}

.exec-disclosure {
    margin-top: 12px;
    padding: 0 16px 16px 16px;
    line-height: 1.4;
    max-width: 960px;
}

@media (max-width: 768px) {
    .section-desc h1 {
        font-size: 56px;
    }

    .section-desc h5 {
        font-size: 14px;
    }

    .value-box-value {
        font-size: 64px;
        font-weight: 300;
    }

    .exec-headline-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .exec-title-text {
        font-size: 44px;
    }

    .exec-metrics {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }

    .exec-metric {
        align-items: flex-start;
    }

    .exec-divider {
        width: 100%;
        height: 1px;
    }
}

/* Dark mode: table row hover */
[data-bs-theme=dark] .table-skin tr:hover td,
[data-bs-theme=dark] .table-skin .gridjs-tr:hover td,
[data-bs-theme=dark] .pnl-table tr:hover td {
    background-color: rgba(219, 254, 125, 0.12);
}

/* Dark mode: Shiny DataGrid — override CSS custom properties */
[data-bs-theme=dark] shiny-data-frame .shiny-data-grid {
    --shiny-datagrid-grid-header-bgcolor: #242424;
    --shiny-datagrid-grid-body-hover-bgcolor: rgba(219, 254, 125, 0.12);
    --shiny-datagrid-grid-body-selected-bgcolor: rgba(219, 254, 125, 0.22);
    --shiny-datagrid-grid-body-selected-color: #FFFFFF;
    --shiny-datagrid-grid-header-gridlines-color: rgba(255, 255, 255, 0.12);
    --shiny-datagrid-grid-gridlines-color: rgba(255, 255, 255, 0.12);
}

/* Dark mode: Shiny DataGrid row hover — fallback for table mode */
[data-bs-theme=dark] shiny-data-frame .shiny-data-grid.shiny-data-grid-table > table > tbody > tr:hover {
    background-color: rgba(219, 254, 125, 0.12) !important;
}

/* Dark mode: Shiny DataGrid selected row — fallback for table mode */
[data-bs-theme=dark] shiny-data-frame .shiny-data-grid.shiny-data-grid-table > table > tbody > tr[aria-selected=true] {
    background-color: rgba(219, 254, 125, 0.22) !important;
    color: #FFFFFF !important;
}

/* Dark mode: GridJS selected/active row */
[data-bs-theme=dark] .table-skin .gridjs-tr-selected td,
[data-bs-theme=dark] .table-skin .gridjs-tr.gridjs-tr-selected td {
    background-color: rgba(219, 254, 125, 0.22) !important;
    color: #FFFFFF !important;
}

/* Dark mode: ensure all table cell text is visible */
[data-bs-theme=dark] .shiny-data-grid td,
[data-bs-theme=dark] .shiny-data-grid .cell-content {
    color: #FFFFFF;
}