:root {
    --color-primary: #17A589;
    --color-primary-hover: #138D75;
    --color-background: #F8FAFC;
    --color-card: #FFFFFF;
    --color-border: #E2E8F0;
    --color-text: #1A202C;
    --color-text-secondary: #64748B;
    --color-text-muted: #A0AEC0;
    --color-success: #22C55E;
    --color-warning: #F59E0B;
    --color-error: #EF4444;
    --color-topbar: #1A202C;
    --shadow-premium: 0 16px 40px rgba(15, 23, 42, 0.08);
    --shadow-subtle: 0 8px 24px rgba(15, 23, 42, 0.06);
    --radius-lg: 18px;
    --radius-md: 14px;
    --radius-sm: 10px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background: var(--color-background); color: var(--color-text); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.app-shell { min-height: 100vh; }
.topbar { position: sticky; top: 0; z-index: 60; background: #111827; color: #fff; padding: 10px 18px; border-bottom: 1px solid rgba(148, 163, 184, 0.2); }
.topbar-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }
.brand-area { display: flex; align-items: center; gap: 10px; }
.brand-link { display: inline-flex; gap: 10px; align-items: center; }
.brand-link strong, .user-chip strong { display: block; font-size: 0.95rem; }
.brand-link small, .user-chip small { color: rgba(255,255,255,0.68); display: block; }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--color-primary), #48C9B0); color: #fff; font-weight: 800; letter-spacing: 0.04em; box-shadow: var(--shadow-subtle); }
.topbar-toggle { display: none; border: 1px solid rgba(148,163,184,0.35); background: rgba(255,255,255,0.08); color: #E2E8F0; border-radius: 10px; width: 36px; height: 36px; cursor: pointer; }
.top-navigation { display: flex; gap: 6px; align-items: center; justify-content: center; overflow: visible; padding: 2px; }
.nav-link { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,0.72); padding: 8px 10px; border-radius: 10px; transition: background-color 0.24s ease, color 0.24s ease, transform 0.24s ease; font-size: 0.86rem; white-space: nowrap; border: 1px solid transparent; background: transparent; }
.nav-link:hover { background: rgba(23,165,137,0.25); color: #fff; border-color: rgba(23,165,137,0.45); }
.nav-link.is-active { background: rgba(23,165,137,0.32); color: #fff; border: 1px solid rgba(23,165,137,0.55); }
.nav-dropdown { position: relative; }
.nav-dropdown::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 10px;
}
.nav-dropdown__trigger { cursor: pointer; }
.nav-dropdown__chevron { display: inline-flex; font-size: 0.72rem; transform: translateY(1px); transition: transform 0.22s ease; }
.nav-dropdown__menu {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    min-width: 180px;
    background: #0F172A;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 12px;
    box-shadow: var(--shadow-subtle);
    padding: 5px;
    display: grid;
    gap: 3px;
    opacity: 0;
    transform: translateY(-6px);
    visibility: hidden;
    transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s ease;
    pointer-events: none;
    z-index: 85;
}
.nav-dropdown__item {
    color: #E2E8F0;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.84rem;
    transition: background-color 0.22s ease, color 0.22s ease;
}
.nav-dropdown__item:hover,
.nav-dropdown__item.is-active {
    background: rgba(23, 165, 137, 0.24);
    color: #fff;
}
.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown.is-open .nav-dropdown__menu {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
}
.nav-dropdown:hover .nav-dropdown__chevron,
.nav-dropdown.is-open .nav-dropdown__chevron {
    transform: rotate(180deg);
}
.nav-dropdown.is-active .nav-link {
    background: rgba(23,165,137,0.32);
    color: #fff;
    border-color: rgba(23,165,137,0.55);
}
.topbar-actions { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.topbar-utility { display: inline-flex; align-items: center; }
.company-switcher select, .form-field input, .form-field select, .form-field textarea, .search-input { width: 100%; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-card); color: var(--color-text); padding: 12px 14px; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
.company-switcher select { min-width: 220px; background: rgba(255,255,255,0.96); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus, .company-switcher select:focus, .search-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(23, 165, 137, 0.12); }
.company-autocomplete { position: relative; min-width: 190px; max-width: 240px; }
.company-autocomplete__field { display: flex; align-items: center; gap: 8px; background: rgba(15, 23, 42, 0.72); border: 1px solid rgba(148, 163, 184, 0.35); border-radius: 10px; padding: 0 10px; }
.company-autocomplete__field input { width: 100%; border: 0; background: transparent; color: #F8FAFC; padding: 9px 0; font-size: 0.86rem; }
.company-autocomplete__field input:focus { outline: none; }
.company-autocomplete__field input::placeholder { color: #94A3B8; }
.company-autocomplete__icon { color: #94A3B8; font-size: 0.82rem; }
.company-autocomplete__menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 80; background: #0F172A; border: 1px solid rgba(148, 163, 184, 0.35); border-radius: 10px; box-shadow: var(--shadow-subtle); max-height: 250px; overflow-y: auto; display: none; padding: 4px; }
.company-autocomplete__menu.is-open { display: block; }
.company-autocomplete__option { width: 100%; text-align: left; border: 0; background: transparent; color: #E2E8F0; border-radius: 8px; padding: 6px 9px; display: grid; gap: 1px; cursor: pointer; }
.company-autocomplete__option small { color: #94A3B8; font-size: 0.74rem; }
.company-autocomplete__line { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.company-autocomplete__line strong { font-size: 0.82rem; font-weight: 700; }
.company-autocomplete__current { font-style: normal; font-size: 0.68rem; font-weight: 700; color: #BFDBFE; border: 1px solid rgba(191, 219, 254, 0.45); border-radius: 999px; padding: 1px 6px; }
.company-autocomplete__option:hover,
.company-autocomplete__option.is-active { background: rgba(59, 130, 246, 0.2); }
.company-autocomplete__option.is-current { background: rgba(30, 64, 175, 0.22); }
.company-autocomplete__empty,
.company-autocomplete__empty-state { color: #94A3B8; padding: 10px; font-size: 0.84rem; }
.company-autocomplete__all { display: block; margin-top: 4px; border-top: 1px solid rgba(148, 163, 184, 0.2); padding: 8px 10px 6px; color: #93C5FD; font-size: 0.78rem; font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: 0.03em; }
.company-autocomplete__all:hover { color: #DBEAFE; }
.user-avatar { width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(23, 165, 137, 0.18); color: #fff; font-weight: 700; }
.user-menu { position: relative; }
.user-menu__trigger { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(148,163,184,0.35); background: rgba(255,255,255,0.07); color: #fff; border-radius: 12px; padding: 4px 8px 4px 4px; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; }
.user-menu__trigger:hover,
.user-menu__trigger:focus-visible { background: rgba(255,255,255,0.12); border-color: rgba(148,163,184,0.5); outline: none; }
.user-menu__identity { display: grid; gap: 0; text-align: left; }
.user-menu__identity strong { font-size: 0.84rem; line-height: 1.1; white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.user-menu__identity small { color: rgba(255,255,255,0.68); font-size: 0.72rem; }
.user-menu__chevron { font-size: 0.72rem; transition: transform 0.2s ease; }
.user-menu__panel { position: absolute; top: calc(100% + 7px); right: 0; min-width: 230px; background: #0F172A; border: 1px solid rgba(148,163,184,0.35); border-radius: 12px; box-shadow: var(--shadow-subtle); padding: 6px; display: grid; gap: 4px; opacity: 0; transform: translateY(-6px); visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; z-index: 85; }
.user-menu__header { padding: 8px 10px; border-bottom: 1px solid rgba(148,163,184,0.25); margin-bottom: 2px; }
.user-menu__header strong, .user-menu__header small { display: block; }
.user-menu__header small { color: #94A3B8; font-size: 0.75rem; word-break: break-all; }
.user-menu__item { color: #E2E8F0; border-radius: 8px; padding: 8px 10px; font-size: 0.84rem; }
.user-menu__item:hover,
.user-menu__item:focus-visible { background: rgba(23, 165, 137, 0.24); color: #fff; outline: none; }
.user-menu.is-open .user-menu__panel { opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto; }
.user-menu.is-open .user-menu__chevron { transform: rotate(180deg); }
.page-content { padding: 32px; max-width: 1440px; margin: 0 auto; }
.page-header, .section-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.page-header { margin-bottom: 24px; }
.page-header h1, .section-heading h2 { margin: 0; font-size: 2rem; line-height: 1.1; }
.eyebrow { margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; color: var(--color-primary); font-weight: 700; }
.page-description, .muted-copy { margin: 8px 0 0; color: var(--color-text-secondary); }
.page-actions { display: flex; gap: 12px; align-items: center; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 12px; font-weight: 600; border: 1px solid transparent; cursor: pointer; transition: 0.2s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--color-primary); color: #fff; }
.button-primary:hover { background: var(--color-primary-hover); }
.button-secondary { background: #fff; color: var(--color-text); border-color: var(--color-border); }
.premium-shadow { box-shadow: var(--shadow-premium); transition: transform 0.22s ease, box-shadow 0.22s ease; }
.premium-shadow:hover { transform: translateY(-2px); box-shadow: 0 22px 44px rgba(15, 23, 42, 0.11); }
.content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.content-card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 24px; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 20px; }
.detail-label { display: block; color: var(--color-text-muted); font-size: 0.82rem; margin-bottom: 6px; }
.badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 8px 12px; font-size: 0.82rem; font-weight: 700; }
.badge-success { background: rgba(34, 197, 94, 0.12); color: var(--color-success); }
.badge-warning { background: rgba(245, 158, 11, 0.12); color: var(--color-warning); }
.table-wrapper { margin-top: 20px; overflow: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.saas-table { width: 100%; border-collapse: collapse; background: #fff; }
.saas-table th, .saas-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.saas-table thead th { background: #F1F5F9; color: var(--color-text-secondary); font-weight: 600; }
.flash-stack { display: grid; gap: 12px; margin-bottom: 22px; }
.alert { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--color-border); background: #fff; }
.alert-success { border-color: rgba(34, 197, 94, 0.22); color: var(--color-success); }
.alert-error { border-color: rgba(239, 68, 68, 0.22); color: var(--color-error); }
.alert-info { border-color: rgba(23, 165, 137, 0.22); color: var(--color-primary); }
.auth-body { min-height: 100vh; background: radial-gradient(circle at top, rgba(23,165,137,0.12), transparent 35%), var(--color-background); }
.auth-layout { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-card { width: min(100%, 460px); padding: 32px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.auth-brand { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 28px; }
.auth-brand h1 { margin: 0 0 10px; font-size: 1.9rem; }
.auth-brand p { margin: 0; color: var(--color-text-secondary); line-height: 1.6; }
.auth-form { display: grid; gap: 18px; }
.form-card { max-width: 960px; }
.stack-form { display: grid; gap: 18px; }
.grid-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-form__actions { grid-column: 1 / -1; justify-content: flex-end; }
.form-field label { display: block; margin-bottom: 8px; font-weight: 600; }
.field-error { display: block; margin-top: 8px; color: var(--color-error); }
.helper-text { display: block; margin-top: 6px; color: var(--color-text-secondary); }
.inline-search-form { min-width: 280px; }
.search-input { min-width: 280px; }
.text-link { color: var(--color-primary); font-weight: 600; }
.empty-state-panel { padding: 36px; display: grid; gap: 12px; text-align: center; }
.empty-state-panel strong { font-size: 1.05rem; }
.empty-state-inline { padding: 24px 12px; text-align: center; }
.empty-state-inline strong { display: block; margin-bottom: 8px; font-size: 1rem; }
.empty-state-inline p { margin: 0; color: var(--color-text-secondary); }
.table-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.detail-action-form { margin-top: 24px; }
@media (max-width: 1180px) {
    .topbar-inner { grid-template-columns: 1fr; }
    .top-navigation { justify-content: flex-start; }
    .topbar-actions { justify-content: flex-start; }
}
@media (max-width: 900px) {
    .topbar { padding: 10px 14px; }
    .topbar-toggle { display: inline-flex; align-items: center; justify-content: center; }
    .topbar-inner { gap: 10px; }
    .top-navigation, .topbar-actions { display: none; }
    .topbar-inner.is-open .top-navigation,
    .topbar-inner.is-open .topbar-actions { display: flex; }
    .top-navigation { flex-wrap: wrap; justify-content: flex-start; border-top: 1px solid rgba(148,163,184,0.25); padding-top: 10px; }
    .nav-dropdown { width: 100%; }
    .nav-dropdown .nav-link { width: 100%; justify-content: space-between; }
    .nav-dropdown__menu { position: static; width: 100%; margin-top: 4px; min-width: 0; max-height: 0; overflow: hidden; padding: 0; border-width: 0; opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: max-height 0.28s ease, padding 0.28s ease, border-width 0.28s ease; }
    .nav-dropdown:hover .nav-dropdown__menu { max-height: 0; padding: 0; border-width: 0; }
    .nav-dropdown.is-open .nav-dropdown__menu { max-height: 240px; padding: 6px; border-width: 1px; }
    .topbar-actions { flex-direction: column; align-items: stretch; border-top: 1px solid rgba(148,163,184,0.25); padding-top: 10px; }
    .topbar-utility { width: 100%; }
    .company-autocomplete { min-width: 100%; }
    .user-menu__trigger { width: 100%; justify-content: space-between; }
    .user-menu__identity strong { max-width: none; }
    .user-menu__panel { position: static; margin-top: 6px; width: 100%; min-width: 0; opacity: 1; visibility: visible; pointer-events: auto; transform: none; max-height: 0; overflow: hidden; padding: 0; border-width: 0; transition: max-height 0.26s ease, padding 0.26s ease, border-width 0.26s ease; }
    .user-menu.is-open .user-menu__panel { max-height: 180px; padding: 6px; border-width: 1px; }
}
@media (max-width: 780px) { .page-content { padding: 20px; } .page-header, .section-heading, .page-actions { flex-direction: column; align-items: flex-start; } .content-grid, .detail-grid, .grid-form { grid-template-columns: 1fr; } .company-switcher select, .search-input { width: 100%; min-width: 0; } .table-actions { flex-direction: column; } }

.reports-header {
    align-items: flex-end;
}

.reports-catalog {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 28px;
}

.reports-catalog__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.reports-catalog__heading h2 {
    margin: 0;
    font-size: 1.35rem;
}

.reports-catalog__heading p {
    margin: 8px 0 0;
    color: var(--color-text-secondary);
}

.reports-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.report-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 240px;
    box-shadow: var(--shadow-subtle);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.report-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 26px rgba(15, 23, 42, 0.12);
    border-color: #CBD5E1;
}

.report-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(49, 130, 206, 0.12);
    color: var(--color-primary);
}

.report-card__icon svg {
    width: 22px;
    height: 22px;
}

.report-card__body h3 {
    margin: 0;
    font-size: 1.05rem;
}

.report-card__body p {
    margin: 8px 0 0;
    color: var(--color-text-secondary);
    line-height: 1.45;
}

.report-card__footer {
    margin-top: auto;
}

.report-card__footer .button {
    width: 100%;
    justify-content: center;
}

.report-dept-filters {
    margin-bottom: 20px;
}

.report-dept-filters__form {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr)) auto;
    gap: 14px;
    align-items: end;
}

.report-dept-filters__field {
    margin: 0;
}

.report-dept-filters__field label {
    margin-bottom: 6px;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.report-dept-shell {
    padding: 28px;
    border-radius: 24px;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.07);
}

.report-dept-page-header {
    margin-bottom: 20px;
}

.report-dept-page-header__copy h1 {
    font-size: 2.15rem;
    letter-spacing: -0.02em;
}

.report-dept-page-header__actions {
    flex-wrap: wrap;
}

.report-back-button {
    border-color: #CBD5E1;
    background: transparent;
    font-weight: 600;
    color: #475569;
    padding: 9px 14px;
}

.report-back-button:hover {
    background: #F8FAFC;
}

.report-dept-page-header__actions .button[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.report-dept-panel {
    background: #fff;
    border: 1px solid #DEE7F1;
    border-radius: 20px;
    padding: 18px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
}

.report-dept-panel__header {
    margin-bottom: 14px;
}

.report-dept-panel__header h2 {
    margin: 0;
    font-size: 1rem;
    letter-spacing: 0.01em;
}

.report-dept-panel__header p {
    margin: 6px 0 0;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.report-dept-filters__field input,
.report-dept-filters__field select {
    min-height: 44px;
}

.report-dept-filters__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.report-dept-filters__actions .button {
    min-width: 140px;
}

.report-payslip-filters__form {
    grid-template-columns: minmax(280px, 1fr) auto;
}

.report-payslip-filters__form.compact {
    align-items: end;
    gap: 10px;
}

.report-payslip-filters__form.compact .report-dept-filters__field label {
    font-size: 0.72rem;
    margin-bottom: 4px;
}

.report-payslip-filters__form.compact .report-dept-filters__field select {
    min-height: 40px;
    padding: 9px 12px;
    border-color: #94A3B8;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.report-payslip-filters__form.compact .report-dept-filters__actions .button {
    min-width: 126px;
    padding: 9px 14px;
}

.payslip-filter-bar.clean {
    grid-template-columns: minmax(320px, 1fr) auto;
    align-items: end;
}

.payslip-filter-bar.clean .report-dept-filters__actions {
    gap: 8px;
}

.payslip-filter-bar select:focus {
    border-color: #6366F1;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
}

.payslip-page-subtitle {
    color: #94A3B8;
}

.payslip-card-list {
    display: grid;
    gap: 18px;
}

.payslip-card {
    border: 1px solid #D1D5DB;
    border-radius: 16px;
    background: #fff;
    padding: 18px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.payslip-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.payslip-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    border-bottom: 1px solid #E5E7EB;
    padding-bottom: 8px;
    margin-bottom: 8px;
}

.payslip-card__period-title {
    display: block;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #475569;
    font-weight: 800;
}

.payslip-card__subtitle {
    margin: 2px 0 0;
    font-size: 0.73rem;
    font-weight: 700;
    color: #94A3B8;
}

.payslip-card__period-badge {
    display: inline-flex;
    background: #E5E7EB;
    border: 1px solid #D1D5DB;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #334155;
}

.payslip-card__employee {
    display: grid;
    gap: 3px;
    margin-bottom: 12px;
}

.payslip-card__employee-name {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #0F172A;
}

.payslip-card__employee-role {
    margin: 0;
    font-size: 0.84rem;
    color: #64748B;
}

.payslip-card__employee-id {
    margin: 0;
    font-size: 0.78rem;
    color: #94A3B8;
}

.payslip-card__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 10px;
}

.payslip-card__grid section h3 {
    margin: 0 0 6px;
    font-size: 0.71rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6B7280;
    font-weight: 800;
}

.payslip-card__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.payslip-card__metric {
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #F8FAFC;
    padding: 10px 12px;
}

.payslip-card__metric h3 {
    margin: 0 0 6px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748B;
}

.payslip-card__metric strong {
    font-size: 1rem;
    color: #0F172A;
    display: block;
    text-align: right;
}

.payslip-card__metric.is-neto {
    background: #EEF2FF;
    border-color: #C7D2FE;
}

.payslip-card__metric.is-neto strong {
    font-size: 1.25rem;
    color: #1E3A8A;
}

.payslip-card__footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.payslip-pdf-btn {
    border-color: #D1D5DB;
    color: #4B5563;
}

.payslip-pdf-btn:hover {
    background: #F3F4F6;
}

.payslip-summary-bar {
    margin-top: 18px;
    border: 1px solid #E2E8F0;
    background: #F1F5F9;
    border-radius: 16px;
    padding: 14px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.payslip-summary-bar__item {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 10px 12px;
}

.payslip-summary-bar span {
    display: block;
    font-size: 0.75rem;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.payslip-summary-bar strong {
    font-size: 1.15rem;
    color: #0F172A;
}

.payslip-summary-bar .is-neto {
    background: #F1F5F9;
    border: 1px solid #CBD5E1;
    border-radius: 10px;
    padding: 8px 10px;
}

.payslip-summary-bar .is-neto strong {
    color: #0F172A;
    font-size: 1.3rem;
}

.salary-certificate-shell {
    display: grid;
    gap: 16px;
}

.salary-certificate-filters {
    padding: 14px 16px;
}

.salary-certificate-filters__form {
    grid-template-columns: repeat(3, minmax(170px, 1fr)) auto;
    gap: 12px;
}

.salary-certificate-filters__actions {
    display: flex;
    justify-content: flex-end;
}

.salary-certificate-filters__pdf-btn {
    box-shadow: 0 6px 16px rgba(49, 130, 206, 0.2);
}

.salary-certificate-preview {
    background: #F8FAFC;
}

.salary-certificate-preview__header h2 {
    margin: 0;
    font-size: 1.25rem;
}

.salary-certificate-preview__header p {
    margin: 6px 0 0;
    color: #64748B;
}

.salary-certificate-preview__kicker {
    margin: 0 0 6px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: #475569;
}

.salary-certificate-document {
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    background: #fff;
    padding: 14px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}

.salary-certificate-document__intro {
    margin-bottom: 10px;
    color: #334155;
}

.salary-certificate-document__intro p {
    margin: 0 0 6px;
}

.salary-certificate-preview__table-wrap {
    margin-top: 6px;
}

.salary-certificate-preview__table tfoot th {
    background: #E2E8F0;
    font-weight: 800;
}

.report-dept-results {
    margin-top: 8px;
}

.report-dept-table-wrap {
    margin-top: 0;
    border-radius: 14px;
    max-height: 65vh;
}

.report-dept-table {
    table-layout: fixed;
}

.report-dept-table th,
.report-dept-table td {
    padding: 10px 8px;
}

.report-dept-table thead th.is-numeric,
.report-dept-table tbody td.is-numeric,
.report-dept-table tfoot th.is-numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: normal;
    overflow-wrap: anywhere;
}

.report-dept-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.report-dept-table .is-text {
    text-align: left;
}

.report-dept-table .is-cost-highlight {
    background: rgba(49, 130, 206, 0.09);
    color: #1D4ED8;
    font-weight: 700;
}

.report-dept-table tbody tr:hover td {
    background: #F8FAFC;
}

.report-dept-table tbody tr:nth-child(even) td {
    background: #FCFDFE;
}

.report-dept-table tfoot th {
    background: #E7EDF5;
    color: #0F172A;
    border-top: 2px solid #C9D7E6;
    font-weight: 800;
}

.report-dept-table tfoot .is-cost-highlight {
    background: rgba(23, 165, 137, 0.18);
}

@media (max-width: 1080px) {
    .reports-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-dept-filters__form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-payslip-filters__form {
        grid-template-columns: 1fr;
    }

    .payslip-filter-bar.clean {
        grid-template-columns: 1fr;
    }

    .salary-certificate-filters__form {
        grid-template-columns: 1fr;
    }

    .payslip-card__metrics {
        grid-template-columns: 1fr;
    }

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

    .payslip-card__footer {
        flex-direction: column;
        align-items: stretch;
    }

    .payslip-pdf-btn {
        width: 100%;
    }

    .report-dept-filters__actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .report-dept-filters__actions .button {
        width: auto;
        min-width: 0;
    }

}

@media (max-width: 780px) {
    .reports-header {
        align-items: flex-start;
    }

    .reports-catalog {
        padding: 20px;
    }

    .reports-catalog__heading {
        flex-direction: column;
    }

    .reports-cards-grid {
        grid-template-columns: 1fr;
    }

    .report-dept-filters {
        padding: 14px;
    }

    .report-dept-filters__form {
        grid-template-columns: 1fr;
    }

    .report-dept-filters__actions .button {
        width: 100%;
    }

    .report-dept-page-header__actions {
        width: 100%;
    }

    .report-dept-shell {
        padding: 18px;
    }

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

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

.dashboard-cost-history {
    padding: 0;
    overflow: hidden;
}

.dashboard-cost-history__header {
    padding: 24px 24px 16px;
    border-bottom: 1px solid var(--color-border);
}

.dashboard-cost-history__header h2 {
    margin: 0;
    font-size: 1.55rem;
}

.dashboard-cost-history__table-wrap {
    margin: 0;
    border: 0;
    border-radius: 0;
    overflow-x: auto;
}

.dashboard-cost-table thead th {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.78rem;
}

.dashboard-cost-table td {
    font-size: 1rem;
}

.month-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 12px;
    background: #E2E8F0;
    color: #0F172A;
    font-weight: 700;
    text-transform: lowercase;
}

.dashboard-cost-total {
    font-weight: 800;
    color: #0F172A;
}

@media (max-width: 780px) {
    .dashboard-cost-history__header {
        padding: 20px;
    }
}

/* QBO Settings */
.qbo-settings {
  max-width: 1024px;
  margin: 0 auto;
  display: grid;
  gap: 1.1rem;
}

.qbo-header-copy p {
  margin: 0.3rem 0 0;
  color: #64748b;
}

.qbo-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.qbo-tabs__tab {
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 999px;
  padding: 0.42rem 0.95rem;
  cursor: pointer;
  color: #1e293b;
  font-weight: 600;
  transition: all 0.15s ease-in-out;
}

.qbo-tabs__tab:hover {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #1d4ed8;
}

.qbo-tabs__tab.is-active {
  border-color: #1e3a8a;
  background: #1e3a8a;
  color: #fff;
}

.qbo-tab-panel {
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  background: #fff;
  padding: 1.25rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.qbo-empty-state h2 {
  margin: 0;
  font-size: 1.1rem;
}

.qbo-empty-state p {
  margin-top: 0.45rem;
  color: #64748b;
}

.qbo-connection-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0.9rem 0;
}

.qbo-connection-summary__item {
  border: 1px solid #e5e7eb;
  border-radius: 0.95rem;
  padding: 0.85rem 0.9rem;
  background: #f8fafc;
  display: grid;
  gap: 0.25rem;
}

.qbo-connection-summary__item .label {
  display: block;
  font-size: 0.75rem;
  color: #6b7280;
  margin-bottom: 0.15rem;
}

.qbo-connection-summary__item strong {
  font-size: 1.05rem;
  color: #0f172a;
}

.qbo-settings__header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}

.qbo-header-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.qbo-button {
  border-radius: 0.75rem;
  padding: 0.55rem 0.85rem;
  font-weight: 700;
  border: 1px solid transparent;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

.qbo-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.qbo-button--primary {
  background: #17A589;
  color: #fff;
}

.qbo-button--primary:hover:not(:disabled) {
  background: #138D75;
}

.qbo-button--outline {
  color: #1e3a8a;
  border-color: #93c5fd;
  background: #fff;
}

.qbo-button--outline:hover {
  background: #eff6ff;
}

.qbo-connection-actions {
  margin-bottom: 0.75rem;
}

.qbo-cached-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.qbo-cached-list li {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  background: #f8fafc;
}

.qbo-cached-list small {
  color: #64748b;
}

.qbo-sync-meta {
  margin: 0;
  color: #64748b;
  font-size: 0.86rem;
}

.qbo-status-card {
  border: 1px solid #e5e7eb;
  border-radius: 0.9rem;
  padding: 0.85rem;
  display: grid;
  gap: 0.35rem;
  background: #fff;
}

.qbo-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  width: fit-content;
}

.qbo-status-badge--success {
  background: #dcfce7;
  color: #166534;
}

.qbo-status-badge--error {
  background: #fee2e2;
  color: #991b1b;
}

.qbo-status-badge--running {
  background: #fef3c7;
  color: #92400e;
}

.qbo-status-badge--never {
  background: #f3f4f6;
  color: #374151;
}

.qbo-sync-meta--error {
  color: #b91c1c;
}

.qbo-inline-icon {
  width: 0.95rem;
  height: 0.95rem;
}

.qbo-inline-icon--success {
  color: #16a34a;
}

.qbo-inline-icon--error {
  color: #dc2626;
}

.qbo-inline-icon--running {
  color: #d97706;
}

.qbo-inline-icon--neutral {
  color: #64748b;
}

.qbo-spinner {
  width: 0.82rem;
  height: 0.82rem;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 999px;
  display: none;
}

[data-qbo-sync-button].is-loading .qbo-spinner {
  display: inline-block;
  animation: qbo-spin 0.7s linear infinite;
}

@keyframes qbo-spin {
  to {
    transform: rotate(360deg);
  }
}

.qbo-connection-indicator {
  font-size: 0.85rem;
  font-weight: 600;
}

@media (max-width: 900px) {
  .qbo-connection-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .qbo-settings__header {
    flex-direction: column;
  }

  .qbo-header-actions {
    width: 100%;
  }

  .qbo-header-actions form,
  .qbo-header-actions a {
    flex: 1;
  }

  .qbo-button {
    justify-content: center;
  }

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

.qbo-mapping { display: grid; gap: 1rem; }
.qbo-mapping__header { display: flex; justify-content: space-between; gap: .9rem; align-items: flex-start; }
.qbo-mapping__header h2 { margin: 0; font-size: 1.35rem; color: #0f172a; }
.qbo-mapping__header p { margin: .35rem 0 0; color: #64748b; }
.qbo-mapping__header-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.qbo-chip { display: inline-flex; align-items: center; padding: .25rem .6rem; border-radius: 999px; font-size: .76rem; font-weight: 700; }
.qbo-chip--success { color: #166534; background: #dcfce7; }
.qbo-chip--danger { color: #991b1b; background: #fee2e2; }
.qbo-chip--muted { color: #334155; background: #e2e8f0; }
.qbo-chip--status-mapped { color: #166534; background: #dcfce7; }
.qbo-chip--status-pending, .qbo-chip--status-missing { color: #92400e; background: #fef3c7; }
.qbo-chip--status-inactive { color: #991b1b; background: #fee2e2; }
.qbo-mapping__summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .75rem; }
.qbo-summary-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 1rem; padding: .8rem .9rem; box-shadow: 0 10px 28px rgba(15,23,42,.05); }
.qbo-summary-card p { margin: 0; font-size: .76rem; color: #64748b; }
.qbo-summary-card strong { display: block; margin-top: .35rem; font-size: 1.2rem; color: #0f172a; }
.qbo-summary-card--warning { background: #fffbeb; border-color: #fcd34d; }
.qbo-summary-card--success { background: #f0fdf4; border-color: #86efac; }
.qbo-mapping__layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: .9rem; align-items: start; }
.qbo-mapping__main { display: grid; gap: .9rem; }
.qbo-mapping__filters { display: grid; grid-template-columns: 2fr repeat(3, minmax(0,1fr)) auto auto; gap: .5rem; }
.qbo-mapping__filters input, .qbo-mapping__filters select { border: 1px solid #cbd5e1; border-radius: .7rem; padding: .5rem .6rem; background: #fff; }
.qbo-toggle { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid #cbd5e1; border-radius: .7rem; padding: .45rem .6rem; background: #fff; font-size: .82rem; }
.qbo-button--ghost { border-color: #cbd5e1; background: #fff; color: #334155; }
.qbo-button--ghost:hover { background: #f8fafc; }
.qbo-mapping-group { border: 1px solid #e2e8f0; border-radius: 1rem; background: #fff; }
.qbo-mapping-group > header { display:flex; justify-content: space-between; gap: .65rem; padding: .8rem .9rem; border-bottom: 1px solid #e2e8f0; }
.qbo-mapping-group h3 { margin: 0; }
.qbo-mapping-group p { margin: .2rem 0 0; color: #64748b; font-size: .82rem; }
.qbo-mapping-group__meta { display: flex; gap: .45rem; align-items: center; font-size: .8rem; color: #475569; }
.qbo-mapping-rows { display: grid; gap: .5rem; padding: .6rem; }
.qbo-mapping-row { display: grid; grid-template-columns: 1.5fr .5fr 1.2fr 1fr .65fr .75fr .7fr; gap: .45rem; align-items: center; border: 1px solid #e2e8f0; border-radius: .8rem; padding: .55rem .6rem; }
.qbo-mapping-row:hover { border-color: #93c5fd; background: #f8fbff; }
.qbo-mapping-row strong { font-size: .88rem; }
.qbo-mapping-row p { margin: .2rem 0 0; font-size: .75rem; color: #64748b; }
.qbo-mapping-row select { width: 100%; border: 1px solid #cbd5e1; border-radius: .6rem; padding: .42rem; }
.qbo-mapping-row small { color: #64748b; font-size: .72rem; }
.qbo-badge { border-radius: 999px; padding: .2rem .45rem; font-size: .72rem; text-transform: capitalize; text-align: center; }
.qbo-badge--expense { background: #dbeafe; color: #1e3a8a; }
.qbo-badge--liability { background: #ede9fe; color: #5b21b6; }
.qbo-badge--payment { background: #cffafe; color: #155e75; }
.qbo-badge--provision { background: #fef3c7; color: #92400e; }
.qbo-row-actions { display: grid; gap: .3rem; }
.qbo-help-panel { border: 1px solid #dbeafe; border-radius: 1rem; background: linear-gradient(180deg,#ffffff,#f8fbff); padding: .95rem; display: grid; gap: .65rem; position: sticky; top: 1rem; }
.qbo-help-panel h3 { margin: 0; }
.qbo-help-panel ol { margin: 0; padding-left: 1rem; color: #334155; display: grid; gap: .45rem; }
.qbo-help-legend { border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; padding: .55rem 0; display: grid; gap: .25rem; font-size: .8rem; color: #475569; }
.qbo-help-tip { border-radius: .75rem; background: #eff6ff; padding: .6rem; font-size: .8rem; color: #1e3a8a; }
.qbo-validation-card { border: 1px solid #bfdbfe; background: #f8fbff; border-radius: .9rem; padding: .7rem .8rem; }
.qbo-validation-card h3 { margin: 0; }
.qbo-validation-card p { margin: .35rem 0; color: #334155; }
.qbo-validation-card ul { margin: 0; padding-left: 1rem; color: #475569; font-size: .83rem; }
.qbo-mapping-footer { display: flex; justify-content: space-between; gap: .6rem; align-items: center; }
.qbo-mapping-footer > div { display: flex; gap: .45rem; flex-wrap: wrap; }
.qbo-mapping-footer p { margin: 0; color: #b45309; font-weight: 600; }
.qbo-empty-state--large { border: 1px dashed #cbd5e1; padding: 1.2rem; border-radius: 1rem; background: #f8fafc; display: grid; gap: .55rem; }

@media (max-width: 1100px) {
  .qbo-mapping__layout { grid-template-columns: 1fr; }
  .qbo-help-panel { position: static; }
}
@media (max-width: 900px) {
  .qbo-mapping__summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .qbo-mapping__filters { grid-template-columns: 1fr 1fr; }
  .qbo-mapping-row { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .qbo-mapping__summary-grid, .qbo-mapping__filters { grid-template-columns: 1fr; }
}
.qbo-department-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); gap:.6rem; }
.qbo-department-card { border:1px solid #dbeafe; border-radius:.9rem; background:#fff; padding:.7rem .75rem; text-decoration:none; display:grid; gap:.25rem; color:#0f172a; }
.qbo-department-card span { font-size:.78rem; color:#64748b; }
.qbo-department-card.is-active { border-color:#1d4ed8; background:#eff6ff; box-shadow:0 8px 18px rgba(29,78,216,.12); }

.qbo-mapping-dashboard { display:grid; gap:1rem; }
.qbo-map-head { display:flex; justify-content:space-between; gap:.8rem; align-items:flex-start; }
.qbo-map-head h2 { margin:0; font-size:1.3rem; color:#0f172a; }
.qbo-map-head p { margin:.35rem 0 0; color:#64748b; }
.qbo-map-head__actions { display:flex; gap:.45rem; align-items:center; }
.qbo-chip--danger-soft { color:#7f1d1d; background:#fee2e2; }
.qbo-map-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; }
.qbo-map-summary article { border:1px solid #e2e8f0; background:#fff; border-radius:.9rem; padding:.65rem .75rem; }
.qbo-map-summary p { margin:0; font-size:.76rem; color:#64748b; }
.qbo-map-summary strong { display:block; margin-top:.22rem; font-size:1.15rem; color:#0f172a; }
.qbo-department-list { display:grid; gap:.65rem; }
.qbo-department-item { border:1px solid #e2e8f0; border-radius:1rem; background:#fff; box-shadow:0 8px 20px rgba(15,23,42,.04); padding:.75rem .85rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.qbo-department-item h3 { margin:0; font-size:1rem; }
.qbo-department-item p { margin:.25rem 0 0; color:#64748b; font-size:.82rem; }
.qbo-department-item__stats { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; justify-content:flex-end; }

.qbo-map-modal { position:fixed; inset:0; background:rgba(15,23,42,.5); display:none; align-items:center; justify-content:center; z-index:120; padding:1rem; }
.qbo-map-modal.is-open { display:flex; }
.qbo-map-modal__card { width:min(1200px,96vw); max-height:92vh; background:#fff; border:1px solid #dbeafe; border-radius:1rem; display:flex; flex-direction:column; overflow:hidden; }
.qbo-map-modal__head { display:flex; justify-content:space-between; align-items:flex-start; gap:.8rem; padding:.9rem 1rem; border-bottom:1px solid #e2e8f0; background:#f8fafc; }
.qbo-map-modal__head h3 { margin:0; font-size:1.1rem; }
.qbo-map-modal__head p { margin:.25rem 0 0; color:#64748b; }
.qbo-map-modal__progress { display:flex; align-items:center; gap:.55rem; color:#334155; font-size:.82rem; }
.qbo-modal-close { border:1px solid #cbd5e1; background:#fff; color:#334155; border-radius:.6rem; width:2rem; height:2rem; cursor:pointer; font-size:1.1rem; line-height:1; }
.qbo-map-modal__filters { display:grid; grid-template-columns: minmax(0,1fr) 160px auto auto; gap:.5rem; align-items:center; padding:.7rem 1rem; border-bottom:1px solid #e2e8f0; }
.qbo-map-modal__filters input, .qbo-map-modal__filters select { border:1px solid #cbd5e1; border-radius:.65rem; padding:.45rem .55rem; }
.qbo-map-modal__body { padding:.75rem 1rem; overflow:auto; display:grid; gap:.55rem; }
.qbo-modal-row { border:1px solid #e2e8f0; border-radius:.85rem; padding:.65rem; display:grid; grid-template-columns: 1.4fr 1.2fr .8fr; gap:.55rem; align-items:center; }
.qbo-modal-row strong { font-size:.9rem; color:#0f172a; }
.qbo-modal-row p { margin:.25rem 0 .35rem; font-size:.77rem; color:#64748b; }
.qbo-modal-row select { width:100%; border:1px solid #cbd5e1; border-radius:.6rem; padding:.42rem; margin-bottom:.3rem; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
.qbo-modal-row__actions { display:grid; gap:.35rem; justify-items:start; }
.qbo-map-modal__footer { padding:.7rem 1rem; border-top:1px solid #e2e8f0; display:flex; justify-content:space-between; align-items:center; position:sticky; bottom:0; background:#fff; }
.qbo-map-modal__footer > div { display:flex; gap:.45rem; }
.qbo-map-modal__footer p { margin:0; color:#b45309; font-weight:600; }

@media (max-width: 900px) {
  .qbo-map-summary { grid-template-columns:1fr; }
  .qbo-map-head { flex-direction:column; }
  .qbo-department-item { flex-direction:column; align-items:flex-start; }
  .qbo-department-item__stats { justify-content:flex-start; }
  .qbo-map-modal__filters { grid-template-columns:1fr; }
  .qbo-modal-row { grid-template-columns:1fr; }
  .qbo-map-modal__footer { flex-direction:column; align-items:flex-start; gap:.5rem; }
  .qbo-map-modal__footer > div { width:100%; }
  .qbo-map-modal__footer .qbo-button { flex:1; justify-content:center; }
}
.qbo-map-modal__body::-webkit-scrollbar { width: 12px; }
.qbo-map-modal__body::-webkit-scrollbar-track { background: #e2e8f0; border-radius: 999px; }
.qbo-map-modal__body::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#64748b,#334155); border-radius: 999px; border:2px solid #e2e8f0; }
.qbo-map-modal__body { scrollbar-width: thin; scrollbar-color: #3b82f6 #eef2ff; }

/* QBO Mapping modal premium refresh */
.qbo-map-modal__card { width:min(96vw,1240px); max-height:90vh; box-shadow:0 24px 60px rgba(15,23,42,.28); }
.qbo-map-modal__head { position:sticky; top:0; z-index:6; background:#fff; }
.qbo-map-modal__filters { position:sticky; top:64px; z-index:5; background:#fff; grid-template-columns:minmax(0,1fr) 200px auto; box-shadow:0 1px 0 rgba(148,163,184,.25); }
.qbo-map-modal__filters input,
.qbo-map-modal__filters select { height:40px; border-color:#94a3b8; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.qbo-map-modal__filters input:focus,
.qbo-map-modal__filters select:focus,
.qbo-ac__input:focus { outline:none; border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.16); }
.qbo-map-modal__body { background:#f8fafc; overflow-y:auto; min-height:0; flex:1; }
.qbo-modal-row { background:#fff; border-color:#dbe3ef; padding:.7rem .75rem; grid-template-columns:1fr; }
.qbo-modal-row__left { display:grid; gap:.3rem; }
.qbo-modal-row__right { display:grid; grid-template-columns: minmax(280px,1.7fr) minmax(220px,1.1fr) auto auto; gap:.5rem; align-items:center; }
.qbo-ac { position:relative; min-width:0; }
.qbo-ac__input { width:100%; height:40px; border:1px solid #94a3b8; border-radius:.7rem; padding:.5rem .7rem; background:#fff; font-size:.84rem; color:#0f172a; }
.qbo-ac__dropdown { position:absolute; left:0; right:0; top:calc(100% + 6px); border:1px solid #cbd5e1; border-radius:.8rem; background:#fff; box-shadow:0 14px 28px rgba(15,23,42,.16); max-height:220px; overflow:auto; display:none; z-index:30; }
.qbo-ac.is-open .qbo-ac__dropdown { display:block; }
.qbo-ac__item { width:100%; border:0; background:#fff; text-align:left; padding:.52rem .62rem; display:grid; gap:.1rem; cursor:pointer; }
.qbo-ac__item:hover { background:#eff6ff; }
.qbo-ac__item strong { font-size:.82rem; color:#0f172a; font-weight:700; }
.qbo-ac__item small { font-size:.72rem; color:#64748b; }
.qbo-ac__empty { padding:.6rem; font-size:.8rem; color:#64748b; }
.qbo-map-modal__footer { position:sticky; bottom:0; z-index:6; background:#fff; }

.sa-scroll::-webkit-scrollbar { width:8px; height:8px; }
.sa-scroll::-webkit-scrollbar-track { background:#eef2ff; border-radius:999px; }
.sa-scroll::-webkit-scrollbar-thumb { background:#94a3b8; border-radius:999px; border:2px solid #eef2ff; }
.sa-scroll::-webkit-scrollbar-thumb:hover { background:#64748b; }
.sa-scroll { scrollbar-width:thin; scrollbar-color:#94a3b8 #eef2ff; }

@media (max-width: 1024px) {
  .qbo-map-modal__filters { top:70px; grid-template-columns:1fr; }
  .qbo-modal-row__right { grid-template-columns:1fr 1fr auto auto; }
}
@media (max-width: 760px) {
  .qbo-modal-row__right { grid-template-columns:1fr; }
}

.qbo-map-modal__body::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg,#475569,#1e293b); }

.qbo-map-modal__card form[data-qbo-modal-save-form] {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}
.qbo-modal-row__title { display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; }
.qbo-type-chip { display:inline-flex; align-items:center; padding:.16rem .46rem; border-radius:999px; font-size:.7rem; font-weight:700; }
.qbo-type-chip--expense { background:#dbeafe; color:#1e3a8a; }
.qbo-type-chip--liability { background:#ede9fe; color:#5b21b6; }
.qbo-type-chip--payment { background:#dcfce7; color:#166534; }
.qbo-type-chip--provision { background:#fef3c7; color:#92400e; }
.qbo-type-chip--income { background:#e0f2fe; color:#0c4a6e; }
.qbo-type-chip--deduction { background:#fee2e2; color:#991b1b; }
.qbo-modal-empty { border:1px dashed #cbd5e1; border-radius:.9rem; padding:1rem; background:#fff; text-align:center; display:grid; gap:.55rem; justify-items:center; }
.qbo-modal-empty p { margin:0; color:#475569; }
.qbo-map-modal__tabs { position:sticky; top:64px; z-index:5; background:#fff; display:flex; gap:.45rem; align-items:center; padding:.6rem 1rem; border-bottom:1px solid #e2e8f0; overflow:auto; }
.qbo-map-tab { border:1px solid #cbd5e1; background:#fff; color:#334155; border-radius:999px; padding:.35rem .7rem; font-size:.78rem; font-weight:700; white-space:nowrap; cursor:pointer; }
.qbo-map-tab.is-active { background:#1e3a8a; border-color:#1e3a8a; color:#fff; }