html {
  font-size: 14px;
}

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

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

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

body {
  margin-bottom: 60px;
}

.footer {
  position: relative;
  padding: 1rem 0;
  z-index: 1;
}

.payroll-engine { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .75rem; }
.payroll-engine-label { font-size: .8rem; color: #526072; }
.payroll-chip { display: inline-flex; align-items: center; border-radius: 999px; padding: .15rem .55rem; font-size: .75rem; font-weight: 650; letter-spacing: .02em; }
.payroll-chip-legacy { background: #eef2f6; color: #243140; }
.payroll-chip-v2 { background: #e7f6ee; color: #0d6b3a; }
.payroll-chip-muted { background: #f4f7fb; color: #3d4d5c; border: 1px solid #e1e7ee; }
.payroll-banner { background: #f3f8fc; border: 1px solid #d5e4f0; color: #1d3b52; }
.payroll-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.payroll-card { background: #fff; border: 1px solid #e4e9ef; border-radius: .6rem; padding: .7rem .8rem; min-width: 0; }
.payroll-card span { display: block; color: #5c6b7a; font-size: .75rem; }
.payroll-card strong { display: block; margin-top: .15rem; font-size: .95rem; font-variant-numeric: tabular-nums; }
.payroll-card-net { background: #16324f; color: #fff; }
.payroll-card-net span, .payroll-card-net strong { color: #fff; }
.payroll-card-net strong { font-size: 1.25rem; }
.payroll-negative { color: #9a3412; }
.payroll-person { display: flex; gap: .6rem; align-items: center; min-width: 12rem; }
.payroll-avatar { width: 2.1rem; height: 2.1rem; border-radius: 50%; background: #dbe7f3; color: #1e3a5f; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; flex: 0 0 auto; }
.payroll-person-name { font-weight: 650; }
.payroll-person-meta, .payroll-role { display: block; font-size: .75rem; color: #5c6b7a; }
.payroll-role { display: inline-block; margin-left: .25rem; }
.payroll-sheet th.num, .payroll-sheet td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.payroll-sheet td.net { font-weight: 750; color: #16324f; }
.payroll-period { color: #5c6b7a; font-size: .8rem; }
.payroll-section { border: 1px solid #e4e9ef; border-radius: .7rem; padding: .9rem 1rem; margin-bottom: .8rem; background: #fff; }
.payroll-section h2 { font-size: 1rem; margin: 0 0 .7rem; }
.payroll-group { border: 1px solid #e4e9ef; border-radius: .7rem; margin-bottom: .6rem; background: #fff; }
.payroll-group summary { cursor: pointer; padding: .75rem .9rem; list-style: none; }
.payroll-group summary::-webkit-details-marker { display: none; }
.payroll-pay-line { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0; }
.payroll-pay-net { font-size: 1.35rem; font-weight: 750; color: #16324f; }
.payroll-period-picker { display: flex; align-items: flex-end; gap: .35rem; }
.payroll-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; }
.payroll-toolbar .payroll-toolbar-end { margin-left: auto; display: flex; align-items: flex-end; gap: .5rem; }
.payroll-form-card { border: 1px solid #e4e9ef; border-radius: .7rem; background: #fff; margin-bottom: 1rem; }
.payroll-form-card > .payroll-form-card-title { font-weight: 650; font-size: .95rem; padding: .75rem 1rem; border-bottom: 1px solid #eef2f6; color: #16324f; }
.payroll-form-card > .payroll-form-card-body { padding: 1rem; }
.payroll-form-actions { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .75rem 1rem; margin-top: .5rem; background: #fff; border: 1px solid #e4e9ef; border-radius: .7rem; box-shadow: 0 -4px 12px rgba(15, 35, 60, .06); }
.payroll-form-actions .payroll-form-actions-hint { margin-left: auto; font-size: .8rem; color: #5c6b7a; }
.payroll-masked { color: #8592a0; letter-spacing: .1em; }
.payroll-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.payroll-kpi { background: #fff; border: 1px solid #e4e9ef; border-left: 4px solid var(--payroll-kpi-accent, #16324f); border-radius: .6rem; padding: .65rem .8rem; min-width: 0; }
.payroll-kpi span { display: block; color: #5c6b7a; font-size: .75rem; }
.payroll-kpi strong { display: block; margin-top: .15rem; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.payroll-kpi small { display: block; color: #5c6b7a; font-size: .75rem; margin-top: .1rem; }
.payroll-dl dt { color: #5c6b7a; font-weight: 500; font-size: .85rem; }
.payroll-dl dd { font-weight: 600; }
[data-theme="dark"] .payroll-form-card, [data-theme="dark"] .payroll-form-actions, [data-theme="dark"] .payroll-kpi { background: var(--bs-body-bg); border-color: var(--bs-border-color); }
[data-theme="dark"] .payroll-form-card > .payroll-form-card-title { color: var(--bs-body-color); border-color: var(--bs-border-color); }
@media (max-width: 1100px) { .payroll-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) {
  .payroll-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payroll-sheet thead { display: none; }
  .payroll-sheet tr { display: block; border-bottom: 1px solid #e4e9ef; padding: .4rem 0; }
  .payroll-sheet td { display: flex; justify-content: space-between; gap: .75rem; border: 0; padding: .2rem .4rem; }
  .payroll-sheet td::before { content: attr(data-label); color: #5c6b7a; }
  .payroll-sheet td.person::before { content: none; }
}
/* A field that failed client validation is marked on every layout (login and other landing pages included). */
.form-control.input-validation-error,
.form-select.input-validation-error {
  border-color: #dc3545;
}

/* Doctor performance payment (date range): non-payable rows are visibly distinct; touch-sized controls; 16 px gutters on phones. */
.dpp-row-skip td { background: #f3f4f6; }
.dpp-row-skip .num { text-decoration: line-through; text-decoration-color: #9ca3af; }
.dpp-btn { min-height: 44px; }
.dpp-input { min-height: 44px; }
.dpp-page { max-width: 100%; overflow-wrap: anywhere; }
[data-theme="dark"] .dpp-row-skip td { background: rgba(255, 255, 255, .05); }
@media (max-width: 767.98px) {
  .dpp-page { padding-left: 16px; padding-right: 16px; }
  .dpp-lines { width: 100%; }
  .dpp-lines tr.dpp-row-skip { border-left: 3px solid #9ca3af; }
}