/* ==========================
   GLOBAL
========================== */
body {
    background-color: #F6FAFD;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    color: #1F2D3D;
    overflow-x: hidden;
}

.sidebar-lock-form {
    margin: 0;
}

.sidebar-lock-form .nav-link {
    width: 100%;
    border: 0;
    font: inherit;
    text-align: left;
}

.environment-banner {
    position: relative;
    z-index: 1100;
    padding: .35rem 1rem;
    color: #fff;
    background: #475569;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-align: center;
}

.environment-development,
.environment-test,
.environment-recovery {
    background: #b45309;
}

.environment-production {
    background: #166534;
}

/* Laboratory Statistics */
.laboratory-statistics {
    --statistics-border: #e2e8f0;
    --statistics-muted: #64748b;
    --statistics-surface: #ffffff;
    color: #0f172a;
}

.statistics-page-heading,
.statistics-card-heading,
.statistics-filter-actions {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.statistics-eyebrow {
    margin-bottom: .3rem;
    color: #2563eb;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.statistics-heading-actions {
    display: flex;
    gap: .65rem;
    flex-wrap: wrap;
}

.statistics-filter-bar {
    margin-bottom: 1.35rem;
    padding: 1.15rem;
    border: 1px solid var(--statistics-border);
    border-radius: 1rem;
    background: linear-gradient(145deg, #fff, #f8fafc);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
}

.statistics-filter-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(145px, 1fr));
    gap: .85rem;
}

.statistics-filter-grid > label {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 0;
}

.statistics-filter-grid > label > span:first-child {
    color: #475569;
    font-size: .76rem;
    font-weight: 700;
}

.statistics-filter-grid .form-control,
.statistics-filter-grid .form-select {
    min-height: 40px;
    border-color: #dbe3ee;
    font-size: .86rem;
}

.statistics-compare .form-check {
    display: flex;
    align-items: center;
    min-height: 40px;
    margin: 0;
    padding: .45rem .65rem .45rem 2.8rem;
    border: 1px solid #dbe3ee;
    border-radius: .5rem;
    background: #fff;
}

.statistics-filter-actions {
    align-items: center;
    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px solid #e8edf4;
}

.statistics-period-label {
    color: var(--statistics-muted);
    font-size: .82rem;
    font-weight: 600;
}

.statistics-loading,
.statistics-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    min-height: 220px;
    border: 1px solid var(--statistics-border);
    border-radius: 1rem;
    background: #fff;
    color: var(--statistics-muted);
}

.statistics-loading {
    flex-direction: column;
    align-items: stretch;
    padding: 1rem;
}

.statistics-loading-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
}

.statistics-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
    width: 100%;
}

.statistics-skeleton-grid span {
    height: 82px;
    border-radius: .8rem;
    background: linear-gradient(90deg, #eef2f7 25%, #f8fafc 45%, #eef2f7 65%);
    background-size: 220% 100%;
    animation: statistics-skeleton 1.25s ease-in-out infinite;
}

@keyframes statistics-skeleton {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

.statistics-loading[hidden],
.statistics-empty[hidden] {
    display: none;
}

.statistics-empty {
    flex-direction: column;
    text-align: center;
}

.statistics-empty > i {
    color: #94a3b8;
    font-size: 3rem;
}

.statistics-empty h3 {
    margin: .25rem 0 0;
    font-size: 1.05rem;
}

.statistics-empty p {
    margin: 0;
}

.statistics-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.statistics-kpi-card,
.statistics-chart-card,
.statistics-insights-card,
.statistics-quality-card,
.statistics-allocation-section {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--statistics-border);
    border-radius: 1rem;
    background: var(--statistics-surface);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .055);
}

.statistics-kpi-card {
    min-height: 166px;
    padding: 1.15rem 1.2rem;
}

.statistics-kpi-card::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: #94a3b8;
    content: '';
}

.statistics-kpi-card.kpi-primary::before { background: #2563eb; }
.statistics-kpi-card.kpi-success::before { background: #16a34a; }
.statistics-kpi-card.kpi-warning::before { background: #f59e0b; }
.statistics-kpi-card.kpi-info::before { background: #0891b2; }

.statistics-kpi-icon {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: .75rem;
    background: #eff6ff;
    color: #2563eb;
    font-size: 1.05rem;
}

.statistics-kpi-label {
    max-width: calc(100% - 45px);
    margin-bottom: .65rem;
    color: var(--statistics-muted);
    font-size: .79rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.statistics-kpi-card > strong {
    display: block;
    margin-bottom: .4rem;
    font-size: clamp(1.45rem, 2.2vw, 2rem);
    line-height: 1.05;
    letter-spacing: -.035em;
}

.statistics-kpi-meta {
    color: var(--statistics-muted);
    font-size: .76rem;
}

.statistics-sparkline {
    position: absolute;
    right: .8rem;
    bottom: .4rem;
    left: .8rem;
    height: 40px;
    opacity: .75;
}

.statistics-chart-card,
.statistics-insights-card,
.statistics-quality-card,
.statistics-allocation-section {
    padding: 1.2rem;
}

.statistics-card-heading {
    align-items: center;
    margin-bottom: .9rem;
}

.statistics-card-heading h3 {
    margin: 0 0 .2rem;
    font-size: 1rem;
    font-weight: 750;
}

.statistics-card-heading p {
    margin: 0;
    color: var(--statistics-muted);
    font-size: .78rem;
}

.statistics-chart { height: 310px; }
.statistics-chart-sm { height: 175px; margin-top: 1rem; }
.statistics-chart-lg { height: 360px; }
.statistics-chart-xl { height: 410px; }
.statistics-chart-dynamic { min-height: 340px; height: 410px; }

.statistics-two-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.statistics-donut-wrap {
    position: relative;
    height: 330px;
}

.statistics-donut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translate(-50%, -58%);
    pointer-events: none;
}

.statistics-donut-center strong { font-size: 1.55rem; }
.statistics-donut-center span { color: var(--statistics-muted); font-size: .72rem; }

.statistics-allocation-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(220px, .85fr);
    gap: 1rem;
}

.statistics-allocation-grid > .statistics-chart-card {
    border: 0;
    box-shadow: none;
}

.statistics-mini-kpis {
    display: grid;
    align-content: center;
    gap: .8rem;
}

.statistics-mini-kpis article {
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: .8rem;
    background: #f8fafc;
}

.statistics-mini-kpis span {
    display: block;
    color: var(--statistics-muted);
    font-size: .76rem;
}

.statistics-mini-kpis strong {
    display: block;
    margin-top: .25rem;
    font-size: 1.45rem;
}

.statistics-gauge {
    display: grid;
    grid-template-columns: 165px 1fr;
    align-items: center;
    gap: 1.2rem;
}

.statistics-gauge-ring {
    --gauge-value: 0%;
    position: relative;
    display: flex;
    width: 155px;
    height: 155px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at center, #fff 57%, transparent 58%), conic-gradient(#16a34a var(--gauge-value), #e8edf4 0);
}

.statistics-gauge-ring strong { font-size: 1.6rem; }
.statistics-gauge-ring span { max-width: 90px; color: var(--statistics-muted); font-size: .69rem; text-align: center; }

.statistics-gauge-legend {
    display: grid;
    gap: .55rem;
}

.statistics-gauge-legend > div,
.statistics-quality-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.statistics-gauge-legend span { color: var(--statistics-muted); font-size: .76rem; }
.statistics-sort-select { width: auto; min-width: 190px; }

.statistics-insights,
.statistics-quality-grid {
    display: grid;
    gap: .65rem;
}

.statistics-insight {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .8rem;
    border: 1px solid #e2e8f0;
    border-left-width: 4px;
    border-radius: .7rem;
    background: #f8fafc;
    font-size: .82rem;
}

.statistics-insight i { margin-top: .08rem; font-size: 1rem; }
.statistics-insight.insight-positive { border-left-color: #16a34a; color: #166534; }
.statistics-insight.insight-warning { border-left-color: #f59e0b; color: #92400e; }
.statistics-insight.insight-critical { border-left-color: #dc2626; color: #991b1b; }
.statistics-insight.insight-neutral { border-left-color: #2563eb; color: #1e40af; }

.statistics-quality-item {
    padding: .72rem .8rem;
    border: 1px solid #e2e8f0;
    border-radius: .7rem;
    color: #334155;
    text-decoration: none;
    font-size: .81rem;
    transition: border-color .16s ease, transform .16s ease;
}

.statistics-quality-item:hover {
    border-color: #93c5fd;
    color: #1d4ed8;
    transform: translateY(-1px);
}

.statistics-quality-item strong {
    display: grid;
    min-width: 30px;
    height: 30px;
    place-items: center;
    border-radius: .6rem;
}

.quality-good { background: #dcfce7; color: #166534; }
.quality-warning { background: #fef3c7; color: #92400e; }

@media (max-width: 1199.98px) {
    .statistics-filter-grid { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
    .statistics-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .statistics-filter-grid,
    .statistics-kpi-grid,
    .statistics-two-column,
    .statistics-allocation-grid { grid-template-columns: 1fr; }
    .statistics-heading-actions,
    .statistics-heading-actions .btn { width: 100%; }
    .statistics-chart-xl { height: 330px; }
    .statistics-chart-lg,
    .statistics-chart-dynamic { height: 320px; }
    .statistics-gauge { grid-template-columns: 1fr; justify-items: center; }
    .statistics-gauge-legend { width: 100%; }
    .statistics-card-heading .btn-group { width: 100%; }
    .statistics-card-heading .btn-group .btn { flex: 1; }
    .statistics-sort-select { width: 100%; }
    .statistics-skeleton-grid { grid-template-columns: 1fr; }
}

@media print {
    #sidebar,
    .app-topbar,
    .laboratory-control-tabs,
    .statistics-filter-bar,
    .statistics-heading-actions,
    .sidebar-backdrop { display: none !important; }
    .content { padding: 0 !important; }
    .laboratory-statistics { font-size: 10px; }
    .statistics-kpi-card,
    .statistics-chart-card,
    .statistics-insights-card,
    .statistics-quality-card,
    .statistics-allocation-section { break-inside: avoid; box-shadow: none; }
    .statistics-chart-xl { height: 300px; }
}

.iban-verification-panel,
.statement-upload-card {
    border: 1px solid #dbe6f2;
    border-radius: 1rem;
    background: linear-gradient(135deg, #f8fbff 0%, #fff 100%);
    padding: 1.25rem;
}

.iban-panel-kicker {
    color: #2f6eb4;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: .3rem;
}

.iban-list { display: grid; gap: .55rem; }
.iban-value { display: flex; align-items: center; gap: .75rem; padding: .75rem .9rem; border-radius: .75rem; background: #fff; border: 1px solid #e1e8f1; }
.iban-value code { color: #183b66; font-size: 1rem; font-weight: 700; overflow-wrap: anywhere; }
.iban-number-label { min-width: 2.2rem; color: #738197; font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.iban-confirmation-row { border-top: 1px solid #dfe7f1; padding-top: 1rem; padding-left: 2rem; }
.iban-confirmation-row .form-check-input { width: 1.15rem; height: 1.15rem; margin-left: -2rem; }

.pdf-dropzone { border: 2px dashed #b8cbe2; border-radius: .9rem; padding: 1.35rem; text-align: center; color: #55718f; background: #fff; transition: border-color .18s ease, background .18s ease; }
.pdf-dropzone.is-dragging { border-color: #2f72bd; background: #edf6ff; }
.pdf-dropzone.is-disabled { opacity: .62; background: #f3f5f8; }
.selected-pdf-list, .existing-attachment-list { display: grid; gap: .6rem; }
.selected-pdf-row, .existing-attachment-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem .9rem; border: 1px solid #e1e7ef; border-radius: .75rem; background: #fff; }
.statement-document-grid { display: grid; gap: .8rem; }
.statement-document-card { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; border: 1px solid #e2e8f0; border-radius: .85rem; background: #fff; }
.document-icon { display: grid; place-items: center; flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: .7rem; background: #fdeaea; color: #bd2c35; font-size: 1.25rem; }
.document-count-badge { display: inline-flex; gap: .35rem; align-items: center; padding: .25rem .55rem; border-radius: 999px; background: #edf4fd; color: #285f9d; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.min-w-0 { min-width: 0; }

/* Laboratory dashboard spreadsheet */
.spreadsheet-filter-card .form-label { margin-bottom: .35rem; font-weight: 700; }
.spreadsheet-more-filters summary { color: #315f93; cursor: pointer; font-size: .86rem; font-weight: 700; width: max-content; }
.statement-spreadsheet-panel { overflow: hidden; }
.spreadsheet-save-status { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.1rem; padding: .4rem .75rem; border-radius: 999px; border: 1px solid #dce5ef; background: #f8fafc; color: #526174; font-size: .8rem; font-weight: 700; }
.spreadsheet-save-status.is-saved { color: #1f7a4f; background: #eefaf4; border-color: #ccebdc; }
.spreadsheet-save-status.is-saving { color: #255f9f; background: #eef6ff; border-color: #cfe2f8; }
.spreadsheet-save-status.is-error { color: #a12a35; background: #fff1f2; border-color: #f3cbd0; }
.spreadsheet-save-status.is-unsaved { color: #946319; background: #fff8e7; border-color: #f1dfb4; }
.spreadsheet-spin { animation: spreadsheet-spin .85s linear infinite; }
@keyframes spreadsheet-spin { to { transform: rotate(360deg); } }

.statement-month-group { border-top: 1px solid #e2e8f0; }
.statement-month-group:last-child { border-bottom: 1px solid #e2e8f0; }
.month-group-toggle { width: 100%; display: flex; align-items: center; gap: .8rem; padding: .9rem 1.15rem; border: 0; background: linear-gradient(90deg, #f8fbff 0%, #fff 72%); color: #26384d; text-align: left; }
.month-group-toggle:hover { background: #f2f7fd; }
.month-group-toggle:focus-visible { position: relative; z-index: 4; outline: 3px solid rgba(47, 114, 189, .28); outline-offset: -3px; }
.month-group-chevron { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: .4rem; color: #3c6fa8; transition: transform .18s ease; }
.month-group-toggle[aria-expanded="false"] .month-group-chevron { transform: rotate(-90deg); }
.month-group-title { min-width: 9.5rem; font-size: .98rem; font-weight: 800; }
.month-group-metrics { display: flex; align-items: center; gap: .75rem 1rem; flex-wrap: wrap; color: #6c7889; font-size: .78rem; }
.month-group-metrics > span { white-space: nowrap; }
.month-review-count { color: #98671c; }
.month-group-body[hidden] { display: none; }

.statement-sheet-scroll { max-height: min(62vh, 650px); overflow: auto; overscroll-behavior: contain; border-top: 1px solid #e6ebf1; }
.statement-spreadsheet { min-width: 2450px; font-size: .79rem; --sheet-first-width: 225px; --sheet-second-width: 185px; }
.statement-spreadsheet th { position: sticky; top: 0; z-index: 5; height: 42px; padding: .65rem .7rem; background: #edf3f9; color: #536477; border-bottom: 1px solid #d8e1eb; box-shadow: inset 0 -1px 0 #d8e1eb; font-size: .68rem; letter-spacing: .035em; text-transform: uppercase; white-space: nowrap; }
.statement-spreadsheet td { position: relative; min-width: 105px; height: 51px; padding: .55rem .7rem; vertical-align: middle; border-color: #e7ecf1; background: #fff; }
.statement-spreadsheet tbody tr:nth-child(even) td { background: #fbfcfe; }
.statement-spreadsheet tbody tr:hover td { background: #f5f9fe; }
.statement-spreadsheet th:first-child,
.statement-spreadsheet td:first-child { width: var(--sheet-first-width); min-width: var(--sheet-first-width); max-width: var(--sheet-first-width); }
.statement-spreadsheet th:nth-child(2),
.statement-spreadsheet td:nth-child(2) { width: var(--sheet-second-width); min-width: var(--sheet-second-width); max-width: var(--sheet-second-width); }
.statement-spreadsheet th:first-child { left: 0; z-index: 8; }
.statement-spreadsheet th:nth-child(2) { left: var(--sheet-first-width); z-index: 8; }
.statement-spreadsheet .sheet-sticky-primary { position: sticky; left: 0; z-index: 3; box-shadow: 1px 0 0 #e1e7ee; }
.statement-spreadsheet .sheet-sticky-secondary { position: sticky; left: var(--sheet-first-width); z-index: 3; box-shadow: 2px 0 4px rgba(28, 47, 71, .06); }
.sheet-cell.is-editable { cursor: cell; transition: box-shadow .12s ease, background .12s ease; }
.sheet-cell.is-editable::after { content: ''; position: absolute; inset: 2px; border: 1px solid transparent; border-radius: .25rem; pointer-events: none; }
.sheet-cell.is-editable:hover::after { border-color: #aac9ec; }
.sheet-cell.is-editable:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #3f7fc5; }
.sheet-cell.is-editing { z-index: 10 !important; min-width: 185px; background: #fff !important; box-shadow: inset 0 0 0 2px #3f7fc5, 0 6px 18px rgba(25, 60, 98, .15); }
.sheet-cell.is-saving { background: #f1f7ff !important; }
.sheet-cell.has-error { box-shadow: inset 0 0 0 2px #d84453; background: #fff7f8 !important; }
.sheet-cell.has-warning { box-shadow: inset 0 0 0 2px #e0a33a; background: #fffaf0 !important; }
.cell-editor { min-width: 145px; font-size: .78rem; }
.sheet-notes-cell .cell-editor { min-width: 260px; resize: vertical; }
.cell-feedback { position: absolute; left: .45rem; top: calc(100% - .15rem); z-index: 20; min-width: 170px; max-width: 320px; color: #566579; background: #fff; border-radius: .35rem; font-size: .68rem; line-height: 1.25; box-shadow: 0 5px 16px rgba(25, 46, 70, .15); }
.cell-feedback:not(:empty) { padding: .35rem .5rem; border: 1px solid #dce4ed; }
.has-error .cell-feedback { color: #a12a35; border-color: #efc7cc; }
.has-warning .cell-feedback { color: #865d1d; border-color: #edd8ad; }
.sheet-more-badge { display: inline-flex; margin-left: .35rem; padding: .15rem .35rem; border-radius: 999px; background: #edf4fd; color: #34679f; font-size: .66rem; font-weight: 800; }
.sheet-document-menu { position: relative; }
.sheet-document-menu summary { list-style: none; }
.sheet-document-menu summary::-webkit-details-marker { display: none; }
.sheet-document-popover { position: absolute; right: 0; top: calc(100% + .35rem); z-index: 30; display: grid; gap: .4rem; min-width: 230px; max-width: 310px; padding: .7rem; border: 1px solid #dce4ed; border-radius: .6rem; background: #fff; box-shadow: 0 12px 28px rgba(23, 43, 68, .18); }
.sheet-document-popover a { display: flex; align-items: center; gap: .45rem; color: #315f93; text-decoration: none; overflow-wrap: anywhere; }
.sheet-actions-cell { min-width: 175px !important; }

.inline-reason-dialog { width: min(94vw, 540px); padding: 0; border: 0; border-radius: 1rem; box-shadow: 0 22px 70px rgba(16, 34, 57, .3); }
.inline-reason-dialog::backdrop { background: rgba(20, 34, 50, .55); backdrop-filter: blur(2px); }
.reason-dialog-icon { display: grid; place-items: center; flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: .7rem; background: #fff3d8; color: #a97019; font-size: 1.2rem; }
.dialog-actions { display: flex; justify-content: flex-end; gap: .6rem; padding: 1rem 1.5rem; border-top: 1px solid #e6ebf1; background: #f8fafc; }

@media (max-width: 767.98px) {
    .selected-pdf-row,
    .existing-attachment-row,
    .statement-document-card { align-items: flex-start; flex-direction: column; }
    .iban-value { align-items: flex-start; flex-direction: column; gap: .25rem; }
    .month-group-toggle { align-items: flex-start; }
    .month-group-title { min-width: 0; }
    .month-group-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .statement-sheet-scroll { max-height: none; overflow: visible; }
    .statement-spreadsheet { display: block; min-width: 0; padding: .75rem; background: #f5f8fc; }
    .statement-spreadsheet thead { display: none; }
    .statement-spreadsheet tbody { display: grid; gap: .8rem; }
    .statement-spreadsheet tr.statement-sheet-row { display: block; overflow: visible; border: 1px solid #dce4ed; border-radius: .8rem; background: #fff; box-shadow: 0 3px 12px rgba(24, 47, 75, .06); }
    .statement-spreadsheet td,
    .statement-spreadsheet td:first-child,
    .statement-spreadsheet td:nth-child(2) { position: relative; left: auto; z-index: auto; display: grid; grid-template-columns: minmax(112px, 36%) minmax(0, 1fr); align-items: start; gap: .6rem; width: 100%; min-width: 0; max-width: none; height: auto; min-height: 42px; padding: .55rem .7rem; background: #fff !important; box-shadow: none; }
    .statement-spreadsheet td::before { content: attr(data-label); color: #6b7788; font-size: .67rem; font-weight: 800; letter-spacing: .025em; text-transform: uppercase; }
    .statement-spreadsheet td .cell-feedback { grid-column: 1 / -1; position: static; max-width: none; }
    .statement-spreadsheet .cell-editor { min-width: 0; width: 100%; }
    .sheet-document-popover { position: static; grid-column: 1 / -1; margin-top: .4rem; box-shadow: none; }
    .sheet-actions-cell > div { justify-content: flex-end; }
}

.laboratory-ajax-progress {
    position: fixed;
    z-index: 1090;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem 1rem;
    color: #1f2937;
    background: rgba(255, 255, 255, .98);
    border: 1px solid #dbe5f0;
    border-radius: 999px;
    box-shadow: 0 .5rem 1.5rem rgba(31, 41, 55, .16);
}

.laboratory-ajax-progress[hidden] {
    display: none;
}

.laboratory-ajax-loading #page-content {
    opacity: .58;
    pointer-events: none;
    transition: opacity .15s ease;
}

/* Laboratory financial control */
.laboratory-control-header {
    padding: 1.2rem 1.35rem;
    border: 1px solid #e7edf5;
    border-radius: 1rem;
    background: linear-gradient(135deg, #ffffff 0%, #f5f9ff 100%);
    box-shadow: 0 8px 24px rgba(30, 64, 175, .06);
}

.laboratory-control-tabs { gap: .35rem; overflow-x: auto; flex-wrap: nowrap; padding-bottom: .15rem; }
.laboratory-control-tabs .nav-link { color: #546179; white-space: nowrap; border: 1px solid transparent; }
.laboratory-control-tabs .nav-link:hover { color: #1e5ba8; border-color: #dbe7f6; background: #fff; }

.control-kpi {
    min-height: 104px;
    padding: 1rem 1.15rem;
    border: 1px solid #e7edf5;
    border-radius: .9rem;
    background: #fff;
    box-shadow: 0 5px 18px rgba(30, 50, 80, .06);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.control-kpi span { color: #718096; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.control-kpi strong { color: #1f2937; font-size: 1.8rem; line-height: 1.15; margin-top: .35rem; }
.control-kpi .control-money { font-size: 1.25rem; }
.control-kpi-success { border-top: 3px solid #22a06b; }
.control-kpi-warning { border-top: 3px solid #e9a23b; }
.control-kpi-info { border-top: 3px solid #3b82f6; }
.control-kpi-danger { border-top: 3px solid #d84f4f; }

.control-table thead th { padding: .85rem 1rem; background: #f7f9fc; color: #637083; border-bottom: 1px solid #e5eaf1; font-size: .75rem; text-transform: uppercase; letter-spacing: .035em; white-space: nowrap; }
.control-table tbody td { padding: .9rem 1rem; border-color: #edf0f5; }
.control-status { display: inline-flex; align-items: center; border-radius: 999px; padding: .28rem .62rem; background: #eef2f7; color: #4b5563; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.status-paid_automatic, .status-paid_manual, .status-confirmed { background: #e2f6ed; color: #147a50; }
.status-review_required, .status-match_found, .status-suggested { background: #e8f1ff; color: #235fba; }
.status-partially_paid { background: #fff2d9; color: #9a6410; }
.status-overpaid, .status-rejected_match, .status-rejected, .status-cancelled { background: #fde8e8; color: #b4232c; }
.status-no_match, .status-open { background: #eef1f5; color: #5f6b7c; }
.score-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 3rem; padding: .28rem .55rem; border-radius: 999px; background: #e8f1ff; color: #225fae; font-size: .8rem; font-weight: 800; }
.score-perfect { background: #e2f6ed; color: #147a50; }
.score-large { min-width: 4.4rem; padding: .6rem .8rem; font-size: 1.05rem; }
.control-empty { min-height: 140px; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #7a8799; text-align: center; padding: 1.5rem; }
.control-empty i { font-size: 1.8rem; color: #9db1cb; margin-bottom: .5rem; }
.control-empty p { margin: 0; }

.match-panel { padding: 1.5rem; border: 1px solid #dfe7f1; border-radius: 1rem; background: #fff; box-shadow: 0 6px 20px rgba(30, 50, 80, .06); }
.match-panel-label { color: #376da9; text-transform: uppercase; font-weight: 700; font-size: .75rem; letter-spacing: .05em; margin-bottom: 1rem; }
.control-definition-list { display: grid; grid-template-columns: minmax(110px, .8fr) 1.2fr; gap: .7rem 1rem; margin: 0; }
.control-definition-list dt { color: #758196; font-weight: 500; }
.control-definition-list dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.score-component { height: 100%; min-width: 110px; border: 1px solid #e4eaf2; border-radius: .75rem; padding: .85rem; background: #f9fbfd; display: flex; flex-direction: column; }
.score-component span { color: #778397; font-size: .75rem; }
.score-component strong { margin-top: .25rem; font-size: 1.05rem; }
.audit-event { position: relative; display: flex; gap: 1rem; padding: .2rem 0 1.4rem; }
.audit-event:not(:last-child)::before { content: ""; position: absolute; top: .65rem; left: .3rem; bottom: -.2rem; width: 1px; background: #dfe6ef; }
.audit-marker { position: relative; z-index: 1; width: .65rem; height: .65rem; margin-top: .35rem; border-radius: 50%; background: #3976bd; box-shadow: 0 0 0 4px #e9f2fc; flex: 0 0 auto; }

@media (max-width: 767.98px) {
    .laboratory-control-header { padding: 1rem; }
    .control-definition-list { grid-template-columns: 1fr; gap: .15rem; }
    .control-definition-list dd { text-align: left; margin-bottom: .65rem; }
}

.wrapper {
    min-height: 100vh;
}

.app-shell {
    width: 100%;
    align-items: stretch;
}

/* ==========================
   SIDEBAR
========================== */
:root {
    --sidebar-expanded-width: 260px;
    --sidebar-collapsed-width: 76px;
    --sidebar-transition: 230ms ease;
}

.sidebar {
    width: var(--sidebar-expanded-width);
    flex: 0 0 var(--sidebar-expanded-width);
    background: #ffffff;
    border-right: 1px solid #E6EEF5;
    box-shadow: 2px 0 15px rgba(0,0,0,0.03);
    min-height: 100vh;
    max-height: 100vh;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    z-index: 1030;
    transition: width var(--sidebar-transition), flex-basis var(--sidebar-transition), transform var(--sidebar-transition), box-shadow var(--sidebar-transition);
}

.sidebar-header {
    border-bottom: 1px solid #E6EEF5;
    position: relative;
    flex: 0 0 auto;
}

.sidebar-brand {
    display: block;
    transition: opacity var(--sidebar-transition);
}

.sidebar-logo {
    width: 96px;
    height: auto;
    display: block;
    margin: 0 auto;
    transition: width var(--sidebar-transition), margin var(--sidebar-transition), opacity var(--sidebar-transition);
}

.brand-name {
    color: #1F2D3D;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    margin-top: 8px;
    padding: 0 14px;
    transition: opacity var(--sidebar-transition), max-height var(--sidebar-transition), margin var(--sidebar-transition);
}

.login-logo {
    width: 150px;
    max-width: 100%;
    height: auto;
}

.login-brand-name {
    color: #1F2D3D;
    font-size: 16px;
    font-weight: 600;
    margin-top: 10px;
}

.sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #6B7C93;
    padding: 9px 12px;
    border-radius: 8px;
    margin-bottom: 4px;
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: normal;
    line-height: 1.25;
    position: relative;
}

.sidebar .nav-link i,
.sidebar-group-summary i {
    flex: 0 0 18px;
    text-align: center;
}

.sidebar .nav-link span,
.sidebar-group-summary span,
.sidebar-group-links,
.sidebar-group-summary::after {
    transition: opacity var(--sidebar-transition), visibility var(--sidebar-transition);
}

.sidebar .nav-link:hover {
    background-color: #EAF4FF;
    color: #3A8DFF;
    transform: translateX(4px);
}

.sidebar .nav-link.active {
    background-color: #3A8DFF;
    color: white;
}

.sidebar-section-label {
    color: #8A9AAF;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
    padding: 12px 16px 6px;
    text-transform: uppercase;
}

.sidebar-nav {
    overflow-y: auto;
    padding-top: 12px;
    padding-bottom: 16px;
    flex: 1 1 auto;
    min-height: 0;
}

.sidebar-root-link {
    font-weight: 700;
}

.sidebar-group {
    border: 1px solid #E6EEF5;
    border-radius: 8px;
    background: #FFFFFF;
    margin-bottom: 8px;
    overflow: hidden;
}

.sidebar-group-summary {
    display: grid;
    grid-template-columns: 18px 1fr 16px;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 10px 12px;
    color: #1F2D3D;
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
    list-style: none;
}

.sidebar-group-summary::-webkit-details-marker {
    display: none;
}

.sidebar-group-summary::after {
    content: "\F282";
    font-family: "bootstrap-icons";
    color: #8A9AAF;
    font-size: 12px;
    transition: transform 0.2s ease;
}

.sidebar-group[open] .sidebar-group-summary::after {
    transform: rotate(180deg);
}

.sidebar-group-summary:hover {
    background: #F6FAFD;
    color: #2F7BE6;
}

.sidebar-group-links {
    border-top: 1px solid #EEF3F8;
    padding: 8px;
    background: #FBFDFF;
}

.sidebar-group-links .nav-link {
    font-size: 13px;
    padding-left: 14px;
}

.sidebar-toggle {
    display: none;
    align-items: center;
    gap: 8px;
    border: 1px solid #D9E3EC;
    background: #fff;
    color: #1F2D3D;
    border-radius: 8px;
    padding: 8px 10px;
    font-weight: 600;
}

.sidebar-collapse-toggle {
    position: absolute;
    top: 12px;
    right: -14px;
    z-index: 1040;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid #D9E3EC;
    border-radius: 50%;
    background: #fff;
    color: #1F2D3D;
    box-shadow: 0 4px 12px rgba(31,45,61,0.12);
    transition: transform var(--sidebar-transition), background var(--sidebar-transition), color var(--sidebar-transition);
}

.sidebar-collapse-toggle:hover,
.sidebar-collapse-toggle:focus {
    background: #EAF4FF;
    color: #2F7BE6;
}

.mobile-sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid #D9E3EC;
    border-radius: 8px;
    background: #fff;
    color: #1F2D3D;
    font-size: 22px;
}

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1025;
    background: rgba(31,45,61,0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--sidebar-transition);
}

.sidebar-floating-menu {
    position: fixed;
    left: calc(var(--sidebar-collapsed-width) + 10px);
    z-index: 1050;
    width: 236px;
    max-width: calc(100vw - var(--sidebar-collapsed-width) - 24px);
    border: 1px solid #E6EEF5;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(31,45,61,0.16);
    padding: 8px;
}

.sidebar-floating-menu[hidden],
.sidebar-backdrop[hidden] {
    display: none !important;
}

.sidebar-floating-title {
    color: #1F2D3D;
    font-size: 13px;
    font-weight: 800;
    padding: 8px 10px 10px;
    border-bottom: 1px solid #EEF3F8;
}

.sidebar-floating-links {
    display: grid;
    gap: 4px;
    padding-top: 8px;
}

.sidebar-floating-links .nav-link {
    display: block;
    color: #6B7C93;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.sidebar-floating-links .nav-link:hover,
.sidebar-floating-links .nav-link:focus {
    background: #EAF4FF;
    color: #2F7BE6;
}

.sidebar-collapsed .sidebar {
    width: var(--sidebar-collapsed-width);
    flex-basis: var(--sidebar-collapsed-width);
}

.sidebar-collapsed .sidebar-header {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

.sidebar-collapsed .sidebar-logo {
    width: 42px;
}

.sidebar-collapsed .brand-name,
.sidebar-collapsed .sidebar .nav-link span,
.sidebar-collapsed .sidebar-group-summary span,
.sidebar-collapsed .sidebar-group-summary::after,
.sidebar-collapsed .sidebar-group-links {
    opacity: 0;
    visibility: hidden;
}

.sidebar-collapsed .brand-name {
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
}

.sidebar-collapsed .sidebar-nav {
    padding-left: 10px !important;
    padding-right: 10px !important;
    overflow-y: auto;
    overflow-x: visible;
}

.sidebar-collapsed .sidebar .nav-link,
.sidebar-collapsed .sidebar-group-summary {
    justify-content: center;
    grid-template-columns: 1fr;
    gap: 0;
    width: 48px;
    min-height: 44px;
    padding: 10px;
    margin-left: auto;
    margin-right: auto;
}

.sidebar-collapsed .sidebar-group {
    border-color: transparent;
    background: transparent;
    overflow: visible;
}

.sidebar-collapsed .sidebar-group[open] .sidebar-group-links {
    display: none;
}

.sidebar-collapsed .sidebar-group[open] .sidebar-group-summary::after {
    transform: none;
}

.sidebar-collapsed .sidebar .nav-link:hover {
    transform: none;
}

.sidebar-collapsed .sidebar [data-sidebar-tooltip]::before {
    content: attr(data-sidebar-tooltip);
    position: fixed;
    left: calc(var(--sidebar-collapsed-width) + 10px);
    z-index: 1060;
    min-width: max-content;
    max-width: 220px;
    border-radius: 8px;
    background: #1F2D3D;
    color: #fff;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(3px);
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

.sidebar-collapsed .sidebar [data-sidebar-tooltip]:hover::before,
.sidebar-collapsed .sidebar [data-sidebar-tooltip]:focus::before,
.sidebar-collapsed .sidebar [data-sidebar-tooltip]:focus-visible::before {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sidebar-toggle-bars,
.sidebar-toggle-bars::before,
.sidebar-toggle-bars::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 99px;
    background: #1F2D3D;
}

.sidebar-toggle-bars {
    position: relative;
}

.sidebar-toggle-bars::before,
.sidebar-toggle-bars::after {
    content: "";
    position: absolute;
    left: 0;
}

.sidebar-toggle-bars::before {
    top: -6px;
}

.sidebar-toggle-bars::after {
    top: 6px;
}

/* ==========================
   CONTENT
========================== */
.content {
    padding: 40px;
    min-width: 0;
    flex: 1 1 auto;
    transition: padding var(--sidebar-transition), margin var(--sidebar-transition), width var(--sidebar-transition);
}

.app-topbar {
    width: 100%;
}

.language-form .form-select {
    min-width: 140px;
}

.container-fluid {
    padding-left: 0;
    padding-right: 0;
}

/* ==========================
   CARDS
========================== */
.info-card {
    border: none;
    border-radius: 8px;
    background: white;
    padding: 20px;
    box-shadow:
        0 4px 20px rgba(58, 141, 255, 0.08),
        0 1px 3px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
}

.info-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 12px 30px rgba(58, 141, 255, 0.15),
        0 3px 8px rgba(0,0,0,0.05);
}

.info-card h6 {
    color: #6B7C93;
    font-size: 14px;
    margin-bottom: 10px;
}

.info-card h3 {
    font-weight: 700;
    color: #1F2D3D;
}

/* ==========================
   LARGE PANELS
========================== */
.card {
    border: none;
    border-radius: 8px;
    box-shadow:
        0 4px 25px rgba(0,0,0,0.05);
}

.card-header {
    background: white;
    border-bottom: 1px solid #EEF3F8;
    font-weight: 600;
    padding: 18px 20px;
}

/* ==========================
   BUTTONS
========================== */
.btn-primary {
    background-color: #3A8DFF;
    border: none;
    border-radius: 8px;
    padding: 10px;
    font-weight: 600;
}

.btn-primary:hover {
    background-color: #2F7BE6;
}

.btn-success {
    background-color: #37C8AB;
    border: none;
    border-radius: 8px;
}

.btn-info {
    background-color: #5BC0F8;
    border: none;
    border-radius: 8px;
}


/*========================
Data table
=========================*/
/* Modern Table Style */
.modern-table thead {
    background-color: #F4F9FF;
}

.modern-table thead th {
    font-weight: 600;
    font-size: 14px;
    color: #6B7C93;
    padding: 16px;
    border-bottom: 1px solid #E6EEF5;
}

.modern-table tbody td {
    padding: 16px;
    border-bottom: 1px solid #F0F4F8;
    font-size: 14px;
    vertical-align: middle;
}

.modern-table tbody tr:hover {
    background-color: #F9FCFF;
    transition: 0.2s ease;
}

.btn-outline-primary {
    border-radius: 8px;
    font-size: 13px;
    padding: 5px 12px;
}

.btn-outline-danger {
    border-radius: 8px;
    font-size: 13px;
    padding: 5px 12px;
}

.btn-outline-warning,
.btn-outline-secondary {
    border-radius: 8px;
    font-size: 13px;
    padding: 5px 12px;
}

.table-actions {
    white-space: nowrap;
}

.table-actions form {
    margin-left: 4px;
}

.form-card {
    max-width: 760px;
}

.form-card input,
.form-card select,
.form-card textarea {
    width: 100%;
    max-width: 100%;
    border: 1px solid #D9E3EC;
    border-radius: 8px;
    padding: 9px 11px;
}

.form-card input[type="checkbox"] {
    width: auto;
    max-width: none;
    padding: 0;
}

/* =========================
   DASHBOARD OVERVIEW
========================= */
.dashboard-overview {
    max-width: 1180px;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 360px));
    gap: 16px;
}

.dashboard-tile {
    background: #fff;
    border: 1px solid #E6EEF5;
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.04);
    padding: 18px;
    color: inherit;
}

.dashboard-tile-link {
    display: block;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-tile-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(58, 141, 255, 0.12);
}

.dashboard-tile-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.dashboard-tile h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 6px;
    color: #1F2D3D;
}

.dashboard-tile p {
    color: #6B7C93;
    margin: 0;
    font-size: 14px;
}

.dashboard-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #EAF4FF;
    color: #3A8DFF;
    font-size: 26px;
    line-height: 1;
    flex: 0 0 auto;
}

.dashboard-tile-progress {
    margin-top: 22px;
}

.dashboard-tile-progress strong {
    display: block;
    color: #1F2D3D;
    font-size: 24px;
}

.dashboard-tile-progress span {
    color: #6B7C93;
    font-size: 13px;
}

.dashboard-progress {
    height: 8px;
    margin-top: 12px;
    border-radius: 999px;
    background: #EAF1F8;
}

.dashboard-progress .progress-bar {
    background: #3A8DFF;
}

/* =========================
   TASK DASHBOARD
========================= */
.task-dashboard {
    max-width: 1180px;
}

.task-progress {
    min-width: 140px;
    padding: 10px 14px;
    border: 1px solid #E6EEF5;
    border-radius: 8px;
    background: #fff;
    text-align: center;
}

.task-progress strong {
    display: block;
    font-size: 20px;
    color: #1F2D3D;
}

.task-progress span {
    color: #6B7C93;
    font-size: 13px;
}

.task-tabs {
    gap: 8px;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 2px;
}

.task-tabs .nav-link {
    border-radius: 8px;
    white-space: nowrap;
    color: #4D6075;
}

.task-tabs .nav-link.active {
    background: #3A8DFF;
}

.task-list {
    display: grid;
    gap: 12px;
}

.task-card {
    background: #fff;
    border: 1px solid #E6EEF5;
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.04);
    padding: 16px;
}

.task-card.is-done {
    border-color: #CFECDC;
    background: #F7FCF9;
}

.task-card-main {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 14px;
}

.task-check {
    padding-top: 2px;
}

.task-complete-button,
.task-pending-icon,
.task-done-icon,
.task-locked-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.task-complete-button {
    border: 2px solid #3A8DFF;
    background: #fff;
}

.task-complete-button:hover {
    background: #EAF4FF;
}

.task-pending-icon {
    border: 2px solid #AEBBCD;
}

.task-done-icon {
    background: #2DAE66;
    color: #fff;
    font-weight: 700;
}

.task-locked-icon {
    background: #EEF3F8;
    color: #6B7C93;
    font-size: 14px;
}

.task-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    color: #1F2D3D;
}

.task-meta {
    color: #6B7C93;
    font-size: 12px;
    font-weight: 600;
    background: #F4F9FF;
    border-radius: 999px;
    padding: 4px 9px;
    align-self: flex-start;
}

.task-description {
    color: #5A6C7F;
    margin: 8px 0 0;
}

.task-status {
    color: #6B7C93;
    font-size: 13px;
    margin-top: 8px;
}

.task-card.is-done .task-status {
    color: #24784B;
    font-weight: 600;
}

.task-complete-form {
    margin-top: 10px;
}

.task-window-note {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    border-radius: 999px;
    background: #F4F9FF;
    color: #4D6075;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 700;
}

.task-proof-grid {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr);
    gap: 8px;
}

.empty-state {
    background: #fff;
    border: 1px dashed #C8D6E5;
    border-radius: 8px;
    padding: 24px;
    color: #6B7C93;
    text-align: center;
}

.team-progress {
    height: 24px;
    min-width: 140px;
    border-radius: 999px;
    background-color: #EAF1F8;
}

.team-progress .progress-bar {
    background-color: #3A8DFF;
}

.missing-task-list {
    margin: 0;
    padding-left: 18px;
}

/* =========================
   TEAM REPORT
========================= */
.team-report {
    max-width: 1320px;
}

.team-report-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.team-report-score {
    min-width: 150px;
    padding: 12px 16px;
    border: 1px solid #D9E6F2;
    border-radius: 8px;
    background: #fff;
    text-align: right;
}

.team-report-score strong {
    display: block;
    color: #1F2D3D;
    font-size: 28px;
    line-height: 1;
}

.team-report-score span {
    color: #6B7C93;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.team-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(170px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.team-kpi {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 86px;
    padding: 16px;
    border: 1px solid #E2EAF2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(0,0,0,0.035);
}

.team-kpi.is-attention {
    border-color: #F3D19E;
    background: #FFFBF4;
}

.team-kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #EAF4FF;
    color: #2F7BE6;
    font-size: 20px;
    flex: 0 0 auto;
}

.team-kpi.is-attention .team-kpi-icon {
    background: #FFF1D8;
    color: #A76500;
}

.team-kpi-value {
    color: #1F2D3D;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
}

.team-kpi-label {
    color: #6B7C93;
    font-size: 13px;
    font-weight: 600;
}

.team-report-layout {
    display: grid;
    grid-template-columns: minmax(260px, 340px) 1fr;
    gap: 18px;
}

.team-report-panel {
    border: 1px solid #E2EAF2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(0,0,0,0.035);
    padding: 18px;
}

.team-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.team-panel-header h2 {
    margin: 0;
    color: #1F2D3D;
    font-size: 16px;
    font-weight: 800;
}

.team-panel-header span {
    color: #6B7C93;
    font-size: 13px;
    font-weight: 700;
}

.attention-list,
.role-breakdown,
.shared-task-grid {
    display: grid;
    gap: 10px;
}

.attention-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid #F0D8B2;
    border-radius: 8px;
    background: #FFFBF4;
}

.attention-item strong,
.attention-item span {
    display: block;
}

.attention-item strong {
    color: #1F2D3D;
    font-size: 14px;
}

.attention-item span {
    color: #6B7C93;
    font-size: 12px;
}

.attention-count {
    color: #A76500;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.role-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(220px, 44%);
    gap: 16px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #EEF3F8;
}

.role-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.role-row-main strong,
.role-row-main span {
    display: block;
}

.role-row-main strong {
    color: #1F2D3D;
}

.role-row-main span {
    color: #6B7C93;
    font-size: 13px;
}

.role-row-progress {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 10px;
    align-items: center;
}

.role-row-progress span {
    color: #1F2D3D;
    font-size: 13px;
    font-weight: 800;
    text-align: right;
}

.team-report .team-progress {
    height: 8px;
    min-width: 0;
}

.team-report .team-progress .progress-bar {
    background: #2F7BE6;
}

.team-member-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.team-member-card {
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 14px;
    min-height: 230px;
    border: 1px solid #E2EAF2;
    border-radius: 8px;
    background: #fff;
    padding: 16px;
}

.team-member-card.is-complete {
    border-color: #CFECDC;
    background: #F8FCFA;
}

.team-member-card.is-attention {
    border-color: #F0D8B2;
    background: #FFFBF4;
}

.team-member-card.is-muted {
    background: #FAFCFE;
}

.team-member-top,
.team-member-count,
.shared-task-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.team-member-top h3,
.shared-task-title-row h3 {
    margin: 0;
    color: #1F2D3D;
    font-size: 15px;
    font-weight: 800;
}

.team-member-top p {
    margin: 3px 0 0;
    color: #6B7C93;
    font-size: 13px;
}

.team-status-pill {
    border-radius: 999px;
    background: #EAF4FF;
    color: #2F7BE6;
    padding: 4px 9px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.team-member-card.is-complete .team-status-pill {
    background: #DFF4E8;
    color: #24784B;
}

.team-member-card.is-attention .team-status-pill {
    background: #FFF1D8;
    color: #A76500;
}

.team-member-card.is-muted .team-status-pill {
    background: #EEF3F8;
    color: #6B7C93;
}

.team-member-count {
    margin-bottom: 8px;
}

.team-member-count strong {
    color: #1F2D3D;
    font-size: 20px;
    line-height: 1;
}

.team-member-count span {
    color: #6B7C93;
    font-size: 13px;
    font-weight: 800;
}

.missing-heading {
    color: #6B7C93;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.team-member-missing .missing-task-list {
    color: #3C4D60;
    font-size: 13px;
}

.team-member-missing .missing-task-list li + li {
    margin-top: 4px;
}

.missing-more {
    color: #6B7C93;
    font-size: 12px;
    font-weight: 700;
    margin-top: 8px;
}

.complete-note {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #24784B;
    font-size: 13px;
    font-weight: 800;
}

.shared-task-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.shared-task-card {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 12px;
    border: 1px solid #E2EAF2;
    border-radius: 8px;
    background: #fff;
    padding: 14px;
}

.shared-task-card.is-done {
    border-color: #CFECDC;
    background: #F8FCFA;
}

.shared-task-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #FFF1D8;
    color: #A76500;
    font-size: 18px;
}

.shared-task-card.is-done .shared-task-state {
    background: #2DAE66;
    color: #fff;
}

.shared-task-title-row {
    flex-wrap: wrap;
}

.shared-task-title-row span {
    border-radius: 999px;
    background: #F4F9FF;
    color: #6B7C93;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 700;
}

.shared-task-body p {
    margin: 8px 0 0;
    color: #6B7C93;
    font-size: 13px;
}

.shared-task-card.is-done .shared-task-body p {
    color: #24784B;
    font-weight: 700;
}

.shared-task-action {
    margin-top: 10px;
}

.laboratory-page .filter-panel .form-label {
    color: #6B7C93;
    font-size: 13px;
    font-weight: 600;
}

.laboratory-page .chart-card .card-body {
    min-height: 300px;
}

.laboratory-page .compact-table thead th,
.laboratory-page .compact-table tbody td {
    padding: 12px 14px;
    vertical-align: middle;
}

.laboratory-page .paid-date-form {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.laboratory-page .card-footer {
    border-top: 1px solid #EEF3F8;
}

.pdf-preview-frame {
    width: 100%;
    height: 78vh;
    border: 0;
    display: block;
}

.bank-statements-page {
    max-width: 1320px;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 14px;
}

.summary-panel {
    background: #fff;
    border: 1px solid #E2EAF2;
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.035);
    padding: 18px;
}

.summary-panel h2 {
    color: #1F2D3D;
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 14px;
}

.summary-panel dl {
    display: grid;
    gap: 8px;
    margin: 0;
}

.summary-panel dl div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #EEF3F8;
    padding-bottom: 8px;
}

.summary-panel dt {
    color: #6B7C93;
    font-weight: 600;
}

.summary-panel dd {
    color: #1F2D3D;
    font-weight: 800;
    margin: 0;
    text-align: right;
}

.bank-transaction-table {
    overflow-x: auto;
}

.bank-transaction-table table {
    min-width: 1120px;
}

.transaction-month-list {
    display: grid;
    gap: 14px;
}

.transaction-toolbar {
    border: 1px solid #E1EAF3;
    background: #fff;
}

.transaction-toolbar .card-body {
    padding: 16px;
}

.transaction-toolbar .form-label {
    color: #6B7C93;
    font-size: 13px;
    font-weight: 700;
}

.transaction-toolbar .input-group-text {
    border-color: #D9E3EC;
    background: #F4F9FF;
    color: #2F7BE6;
}

.transaction-toolbar .form-control {
    border-color: #D9E3EC;
}

.transaction-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.transaction-result-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 32px;
    border: 1px solid #DCE8F3;
    border-radius: 8px;
    background: #F8FBFE;
    color: #6B7C93;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 700;
}

.transaction-result-count strong {
    color: #1F2D3D;
}

.transaction-year-list {
    display: grid;
    gap: 18px;
}

.transaction-year-group {
    overflow: hidden;
    border: 1px solid #BFD7F1;
    border-radius: 8px;
    background: #F7FBFF;
    box-shadow: 0 8px 24px rgba(47, 123, 230, 0.08);
}

.transaction-year-summary {
    display: grid;
    grid-template-columns: minmax(230px, 1fr) repeat(4, minmax(120px, auto));
    gap: 16px;
    align-items: center;
    cursor: pointer;
    list-style: none;
    padding: 18px;
    border-bottom: 1px solid #CFE0F3;
    background: #EAF4FF;
}

.transaction-year-summary::-webkit-details-marker {
    display: none;
}

.transaction-year-summary::before {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #BFD7F1;
    color: #2F7BE6;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(47, 123, 230, 0.12);
}

.transaction-year-group[open] .transaction-year-summary::before {
    content: "-";
}

.transaction-year-group:not([open]) .transaction-year-summary {
    border-bottom: 0;
}

.year-primary {
    display: grid;
    gap: 3px;
    padding-left: 36px;
}

.year-title {
    color: #1F2D3D;
    font-size: 20px;
    font-weight: 800;
}

.year-meta {
    color: #6B7C93;
    font-size: 12px;
    font-weight: 700;
}

.transaction-year-group > .transaction-month-list {
    padding: 14px;
    background: #F7FBFF;
}

.transaction-month-group {
    overflow: hidden;
    border: 1px solid #CDE8DF;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(36, 120, 75, 0.055);
}

.transaction-month-summary {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) repeat(5, minmax(112px, auto));
    gap: 16px;
    align-items: center;
    cursor: pointer;
    list-style: none;
    padding: 16px 18px;
    border-bottom: 1px solid #DDF0EA;
    background: #F1FBF7;
}

.transaction-month-summary::-webkit-details-marker {
    display: none;
}

.transaction-month-summary::before {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #CDE8DF;
    color: #24784B;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(36, 120, 75, 0.1);
}

.transaction-month-group[open] .transaction-month-summary::before {
    content: "-";
}

.month-primary {
    display: grid;
    gap: 3px;
    padding-left: 34px;
}

.month-title {
    color: #1F2D3D;
    font-size: 17px;
    font-weight: 800;
}

.month-meta {
    color: #6B7C93;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}

.month-stat {
    display: grid;
    gap: 2px;
    text-align: right;
    white-space: nowrap;
    border: 1px solid rgba(217, 227, 236, 0.8);
    border-radius: 8px;
    background: rgba(255,255,255,0.75);
    padding: 7px 9px;
}

.month-stat span {
    color: #6B7C93;
    font-size: 12px;
    font-weight: 700;
}

.month-stat strong {
    color: inherit;
    font-size: 14px;
    font-weight: 800;
}

.transaction-month-group:not([open]) .transaction-month-summary {
    border-bottom: 0;
}

.table-sort-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 700;
    padding: 3px 6px;
    text-align: left;
}

.table-sort-button:hover,
.table-sort-button:focus {
    border-color: #CFE0F3;
    background: #EAF4FF;
    color: #2F7BE6;
}

.table-sort-button.is-end {
    justify-content: flex-end;
    width: 100%;
}

.table-sort-button::after {
    content: "sort";
    color: #9AABBD;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.table-sort-button[data-direction="asc"]::after {
    content: "asc";
    color: #2F7BE6;
}

.table-sort-button[data-direction="desc"]::after {
    content: "desc";
    color: #2F7BE6;
}

.transaction-sortable-table tbody tr[hidden] {
    display: none !important;
}

.transaction-filter-empty {
    margin-top: 12px;
}

.invoice-control-page .invoice-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
}

.invoice-summary-card {
    border: 1px solid #E1EAF3;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.035);
    padding: 14px;
}

.invoice-summary-card span {
    display: block;
    color: #6B7C93;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.invoice-summary-card strong {
    display: block;
    color: #1F2D3D;
    font-size: 24px;
    line-height: 1.2;
}

.invoice-summary-card.is-good {
    border-color: #CFECDC;
    background: #F7FCF9;
}

.invoice-summary-card.is-warning {
    border-color: #F2D4A8;
    background: #FFFBF4;
}

.invoice-summary-card.is-progress {
    border-color: #BFD7F1;
    background: #F4F9FF;
}

.invoice-filter-card input,
.invoice-filter-card select,
.invoice-filter-card textarea {
    width: 100%;
    border: 1px solid #D9E3EC;
    border-radius: 8px;
    padding: 8px 10px;
}

.invoice-status-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.status-missing_invoice,
.status-removed {
    background: #F8D7DA;
    color: #842029;
}

.status-invoice_uploaded,
.status-multiple_invoices,
.status-replaced,
.status-active {
    background: #DFF4E8;
    color: #24784B;
}

.status-contract_available,
.status-no_invoice_required {
    background: #EAF4FF;
    color: #2F7BE6;
}

.status-needs_review {
    background: #FFF1D8;
    color: #A76500;
}





/* =========================
   BRANCH CARDS
========================= */
.branch-card {
    background: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 25px rgba(0,0,0,0.05);
    cursor: pointer;
    transition: 0.3s ease;
}

.branch-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 30px rgba(58,141,255,0.15);
}

.branch-card h5 {
    font-weight: 600;
    margin-bottom: 6px;
}

.branch-card p {
    color: #6B7C93;
    margin: 0;
}

/* =========================
   REMINDER BADGES
========================= */
.reminder-badge {
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.level-1 {
    background: #EAF4FF;
    color: #3A8DFF;
}

.level-2 {
    background: #FFF3CD;
    color: #856404;
}

.level-3 {
    background: #F8D7DA;
    color: #842029;
}
.action-buttons .btn {
    margin-right: 6px;
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s ease;
}

.action-buttons .btn:hover {
    transform: translateY(-2px);
}

















/* ==========================
   MOBILE
========================== */
@media (max-width: 992px) {
    .sidebar {
        width: var(--sidebar-expanded-width);
        flex-basis: var(--sidebar-expanded-width);
    }

    .sidebar-logo {
        width: 72px;
    }

    .brand-name {
        font-size: 12px;
        padding: 0 10px;
    }

    .sidebar .nav-link {
        font-size: 13px;
        padding: 9px 10px;
    }

    .sidebar-group-summary {
        grid-template-columns: 16px 1fr 14px;
        gap: 8px;
        padding: 9px 10px;
    }

    .content {
        padding: 24px;
    }

    .modern-table thead th,
    .modern-table tbody td {
        padding: 12px;
    }

    .table-actions {
        white-space: normal;
    }

    .table-actions .btn,
    .table-actions form {
        margin-top: 4px;
    }
}

@media (max-width: 767.98px) {
    html.sidebar-collapsed .sidebar,
    html.sidebar-expanded .sidebar,
    .sidebar {
        width: 280px;
        flex: 0 0 280px;
    }

    .app-shell {
        display: block !important;
    }

    .sidebar {
        min-height: 100vh;
        max-height: 100vh;
        border-right: 0;
        border-bottom: 0;
        box-shadow: 10px 0 30px rgba(31,45,61,0.16);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1030;
        display: flex;
        transform: translateX(-105%);
    }

    body.sidebar-mobile-open .sidebar {
        transform: translateX(0);
    }

    body.sidebar-mobile-open {
        overflow: hidden;
    }

    body.sidebar-mobile-open .sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .sidebar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 12px !important;
    }

    .sidebar-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }

    .sidebar-logo {
        width: 52px;
        margin: 0;
        flex: 0 0 auto;
    }

    html.sidebar-collapsed .sidebar-logo {
        width: 52px;
    }

    .brand-name {
        opacity: 1 !important;
        visibility: visible !important;
        max-height: none !important;
        margin-top: 0;
        padding: 0;
        font-size: 12px;
        max-width: none;
        text-align: left;
        overflow-wrap: anywhere;
    }

    .sidebar-collapse-toggle {
        display: none;
    }

    .mobile-sidebar-toggle {
        display: inline-flex;
        flex: 0 0 auto;
    }

    .sidebar-nav {
        display: block;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 8px 12px 12px !important;
        margin: 0;
        max-height: calc(100vh - 74px);
    }

    .sidebar-nav li {
        width: 100%;
    }

    .sidebar .nav-link {
        display: flex;
        align-items: center;
        margin-bottom: 0;
        padding: 11px 12px;
        font-size: 13px;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .sidebar .nav-link span,
    .sidebar-group-summary span,
    .sidebar-group-summary::after,
    .sidebar-group-links {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .sidebar-group-summary {
        grid-template-columns: 16px 1fr 14px !important;
        width: auto !important;
        justify-content: initial !important;
    }

    .sidebar-root-link {
        background: #F6FAFD;
    }

    .sidebar-group {
        margin-bottom: 0;
    }

    .sidebar .nav-link:hover {
        transform: none;
    }

    .content {
        padding: 16px;
        width: 100%;
    }

    .app-topbar {
        align-items: stretch !important;
    }

    .language-form,
    .language-form .form-select,
    .language-form .btn {
        width: 100%;
    }

    .language-form {
        display: grid !important;
        grid-template-columns: 1fr auto;
    }

    .card-header,
    .card-body {
        padding: 14px;
    }

    .modern-table,
    .modern-table thead,
    .modern-table tbody,
    .modern-table th,
    .modern-table td,
    .modern-table tr {
        display: block;
    }

    .modern-table thead {
        display: none;
    }

    .modern-table tbody tr {
        background: #fff;
        border-bottom: 1px solid #E6EEF5;
        padding: 12px 14px;
    }

    .modern-table tbody tr:hover {
        background: #fff;
    }

    .modern-table tbody td {
        border-bottom: 0;
        padding: 8px 0;
        display: grid;
        grid-template-columns: minmax(94px, 38%) 1fr;
        gap: 12px;
        align-items: start;
        overflow-wrap: anywhere;
    }

    .modern-table tbody td::before {
        content: attr(data-label);
        color: #6B7C93;
        font-weight: 600;
    }

    .modern-table tbody td.text-end {
        text-align: left !important;
    }

    .table-actions {
        white-space: normal;
    }

    .table-actions .btn,
    .table-actions form,
    .table-actions form button {
        width: 100%;
    }

    .table-actions form {
        display: block !important;
        margin: 8px 0 0;
    }

    .task-progress {
        width: 100%;
    }

    .task-card {
        padding: 14px;
    }

    .task-card-main {
        grid-template-columns: 34px 1fr;
        gap: 10px;
    }

    .task-proof-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .team-report-header {
        display: grid;
    }

    .team-report-score {
        width: 100%;
        text-align: left;
    }

    .team-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .team-report-layout {
        grid-template-columns: 1fr;
    }

    .role-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .role-row-progress {
        grid-template-columns: 42px 1fr;
    }

    .team-member-grid,
    .shared-task-grid {
        grid-template-columns: 1fr;
    }

    .summary-grid {
        grid-template-columns: 1fr;
    }

    .transaction-month-summary {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .transaction-year-summary {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .transaction-month-summary::before {
        grid-column: 1;
    }

    .transaction-year-summary::before {
        grid-column: 1;
    }

    .month-primary,
    .year-primary {
        grid-column: 1 / -1;
    }

    .month-stat {
        text-align: left;
        white-space: normal;
    }

    .transaction-toolbar-actions {
        justify-content: flex-start;
    }

    .transaction-toolbar-actions .btn-group {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .transaction-toolbar-actions .btn-group .btn {
        border-radius: 8px !important;
    }
}

@media (max-width: 420px) {
    .content {
        padding: 12px;
    }

    h1,
    .h3 {
        font-size: 1.35rem;
    }

    .modern-table tbody td {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .language-form {
        grid-template-columns: 1fr;
    }

    .team-kpi-grid {
        grid-template-columns: 1fr;
    }

    .team-report-panel {
        padding: 14px;
    }

    .team-member-top,
    .team-member-count,
    .attention-item {
        align-items: flex-start;
    }

    .team-member-top,
    .attention-item {
        display: grid;
    }

    .team-status-pill,
    .attention-count {
        justify-self: start;
        white-space: normal;
    }

    .shared-task-card {
        grid-template-columns: 1fr;
    }

    .transaction-month-summary {
        grid-template-columns: 1fr;
    }

    .transaction-year-summary {
        grid-template-columns: 1fr;
    }
}

/* Laboratory statement-to-bank reconciliation */
.reconciliation-layout {
    display: grid;
    grid-template-columns: minmax(280px, .72fr) minmax(0, 1.65fr);
    gap: 1rem;
    align-items: start;
}

.reconciliation-statements,
.reconciliation-candidates {
    min-height: 560px;
    overflow: hidden;
}

.reconciliation-statements {
    position: sticky;
    top: 1rem;
}

.reconciliation-statement-list {
    max-height: 68vh;
    overflow-y: auto;
}

.reconciliation-statement-card {
    display: block;
    padding: 1rem;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid #edf0f5;
    border-left: 4px solid transparent;
    transition: background .15s ease, border-color .15s ease;
}

.reconciliation-statement-card:hover {
    background: #f8fbff;
}

.reconciliation-statement-card.is-selected {
    background: #eef6ff;
    border-left-color: #2767b0;
}

.reconciliation-statement-meta {
    display: flex;
    gap: 1rem;
    margin: .75rem 0 .45rem;
    color: #405168;
    font-size: .875rem;
}

.reconciliation-statement-meta i {
    margin-right: .35rem;
    color: #6f8daf;
}

.reconciliation-selected-summary {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
}

.reconciliation-candidate-table-wrap {
    max-height: 68vh;
}

.reconciliation-candidate-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.reconciliation-candidate-row {
    cursor: pointer;
}

.reconciliation-candidate-row.is-selected {
    background: #edf7ff;
    box-shadow: inset 4px 0 #2767b0;
}

.reconciliation-candidate-row.is-exact:not(.is-selected) {
    background: #f7fcf9;
}

.candidate-select-col {
    width: 42px;
}

.reconciliation-purpose,
.completed-purpose {
    max-width: 320px;
    white-space: normal;
    overflow-wrap: anywhere;
}

.confirmation-detail {
    height: 100%;
    padding: .8rem 1rem;
    border: 1px solid #e3eaf3;
    border-radius: .75rem;
    background: #f9fbfd;
}

.confirmation-detail span,
.confirmation-detail strong {
    display: block;
}

.confirmation-detail span {
    color: #708096;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .035em;
    margin-bottom: .25rem;
}

.completed-matches-table td {
    min-width: 120px;
}

.suggested-transactions-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.suggested-statements-panel,
.suggested-bank-panel {
    min-width: 0;
}

.suggested-panel-scroll {
    max-height: 640px;
    overflow: auto;
}

.suggested-statement-row,
.suggested-bank-row {
    transition: background-color .15s ease, box-shadow .15s ease;
}

.suggested-statement-row.is-selected,
.suggested-bank-row.is-selected {
    background: #edf7ff;
    box-shadow: inset 4px 0 #2767b0;
}

.suggested-statement-row.is-recommended:not(.is-selected) {
    background: #f2fbf5;
    box-shadow: inset 4px 0 #22a06b;
}

.suggested-allocation-summary {
    position: sticky;
    z-index: 20;
    bottom: 1rem;
}

@media (max-width: 1199.98px) {
    .reconciliation-layout {
        grid-template-columns: 1fr;
    }

    .reconciliation-statements {
        position: static;
        min-height: auto;
    }

    .reconciliation-statement-list {
        max-height: 420px;
    }

    .suggested-transactions-workspace {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .reconciliation-selected-summary {
        display: grid;
    }

    .reconciliation-selected-summary .text-end {
        text-align: left !important;
    }

    .reconciliation-candidates,
    .reconciliation-statements {
        min-height: auto;
    }
}