:root {
  color-scheme: light;
  --nav-height: 60px;
  --ink: #16221b;
  --muted: #68736d;
  --line: #dfe4dc;
  --paper: #f4f6f1;
  --panel: #ffffff;
  --deep: #0d2a1c;
  --green: #1f6b45;
  --green-soft: #eaf4e8;
  --gold: #d6ad45;
  --blue: #315f8c;
  --red: #b94d3a;
  --shadow: 0 18px 48px rgba(22, 34, 27, 0.12);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
  background:
    linear-gradient(150deg, rgba(31, 107, 69, 0.12), transparent 34%),
    linear-gradient(330deg, rgba(214, 173, 69, 0.16), transparent 36%),
    var(--paper);
  color: var(--ink);
}

body.is-app-open {
  font-size: 14px;
  overflow-x: clip;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

.phone-app {
  position: relative;
  width: min(100%, 460px);
  min-height: 100vh;
  margin: 0 auto;
  background: var(--paper);
  box-shadow: 0 0 0 1px rgba(22, 34, 27, 0.04), 0 28px 80px rgba(22, 34, 27, 0.14);
}

body.is-app-open .phone-app {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  box-shadow: none;
}

.login-view,
.app-view {
  min-height: 100vh;
  min-height: 100svh;
}

.login-view {
  display: grid;
  align-content: center;
  gap: 18px;
  padding: 24px 18px;
}

.brand-card,
.login-card,
.hero-card,
.panel-card,
.metric-grid article,
.action-list article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 10px 30px rgba(22, 34, 27, 0.06);
}

.brand-card {
  padding: 20px;
  background:
    linear-gradient(140deg, rgba(13, 42, 28, 0.96), rgba(19, 74, 47, 0.94)),
    var(--deep);
  color: #ffffff;
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  border-radius: 8px;
  background: var(--gold);
  color: var(--deep);
  font-weight: 900;
}

.brand-card h1,
.login-card h2,
.app-header h1,
.hero-card h2 {
  margin-bottom: 0;
}

.brand-card h1 {
  font-size: 28px;
}

.company-lines {
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.76);
  line-height: 1.45;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--green);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.brand-card .eyebrow {
  color: #f1d586;
}

.login-card {
  display: grid;
  gap: 16px;
  padding: 20px;
}

label {
  display: grid;
  gap: 6px;
  color: #3d4942;
  font-size: 13px;
  font-weight: 750;
}

input,
select {
  font-size: 16px;
  min-height: 48px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
  color: var(--ink);
  padding: 0 14px;
}

input:focus,
select:focus {
  border-color: var(--green);
  outline: 3px solid rgba(31, 107, 69, 0.14);
}

.primary-action {
  min-height: 50px;
  border: 0;
  border-radius: 8px;
  background: var(--deep);
  color: #ffffff;
  font-weight: 850;
}

.prototype-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.app-version-label {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.2;
}

.login-error {
  display: none;
  margin: -4px 0 0;
  color: var(--red);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}

.login-error.is-visible {
  display: block;
}

.is-hidden {
  display: none !important;
}

.app-view {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: calc(8px + env(safe-area-inset-top)) 10px 7px;
  background: rgba(244, 246, 241, 0.94);
  border-bottom: 1px solid rgba(223, 228, 220, 0.86);
  backdrop-filter: blur(14px);
}

#appRefresh { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; cursor: pointer; }
#appRefresh:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 2px; }

.app-header h1 {
  font-size: 18px;
  line-height: 1.05;
}

.app-header .app-version-label {
  margin-top: 3px;
}

.profile-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--deep);
  font-weight: 900;
}

.screen-stack {
  min-width: 0;
  padding: 8px 8px calc(var(--nav-height) + 18px);
}

.screen {
  display: none;
  min-width: 0;
  gap: 8px;
}

.screen.is-active {
  display: grid;
}

.hero-card {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  min-height: 78px;
  padding: 10px;
  color: #ffffff;
  overflow: hidden;
}

.hero-card > div {
  min-width: 0;
}

.hero-card h2 {
  font-size: 17px;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.hero-card span,
.hero-card strong {
  color: rgba(255, 255, 255, 0.88);
}

.hero-card strong {
  flex: 0 0 auto;
  max-width: 38%;
  font-size: 12px;
  line-height: 1.1;
  overflow-wrap: anywhere;
  text-align: right;
}

.cashflow-hero {
  background: linear-gradient(140deg, #0d2a1c, #9a6a21);
}



.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.metric-grid article {
  min-width: 0;
  min-height: 62px;
  padding: 7px;
}

.metric-grid span,
.metric-grid small {
  display: block;
  color: var(--muted);
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.18;
}

.metric-grid span {
  font-size: 12px;
}

.metric-grid strong {
  display: block;
  margin: 4px 0 2px;
  font-size: 17px;
  line-height: 1;
}

.toolbar {
  display: grid;
  gap: 7px;
}

.toolbar label {
  min-width: 0;
}

.toolbar span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}





.segmented-control,
.period-stepper {
  display: flex;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  overflow: hidden;
}

.segmented-control button,
.period-stepper button {
  min-width: 0;
  min-height: 36px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.segmented-control button {
  flex: 1 1 0;
  padding: 0 6px;
}

.segmented-control button.is-active {
  background: var(--deep);
  color: #ffffff;
}

.period-stepper {
  align-items: center;
  flex: 0 0 auto;
}

.period-stepper button {
  width: 32px;
  color: var(--deep);
  font-size: 22px;
  line-height: 1;
}

.period-stepper button:disabled {
  color: #aeb7b0;
  cursor: not-allowed;
}

.period-stepper strong {
  min-width: 82px;
  padding: 0 7px;
  text-align: center;
  font-size: 12px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.inventory-filter { margin-bottom: 8px; }
.inventory-order-size, .inventory-supplier-filter { margin-bottom: 8px; }
.inventory-order-size > span, .inventory-supplier-filter > span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 12px; font-weight: 700; }
.inventory-order-size button { padding-inline: 3px; font-size: 11px; white-space: nowrap; }
.inventory-supplier-filter button { flex: 1 1 auto; padding-inline: 2px; font-size: 11px; white-space: nowrap; }
.inventory-order-size button:focus-visible, .inventory-supplier-filter button:focus-visible { outline: 2px solid var(--green); outline-offset: -3px; }
.inventory-snapshot-time { margin: 0 0 8px; color: var(--muted); font-size: 12px; }
.inventory-filter input { width: 100%; min-height: 38px; }
.inventory-filter > input { margin-bottom: 8px; }
.inventory-order-cost { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 3px 8px; padding-top: 2px; font-size: 11px; }
.inventory-order-cost strong { color: var(--deep); font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.inventory-order-cost small { grid-column: 1 / -1; color: var(--muted); font-size: 10px; }

.inventory-table-wrap {
  min-width: 0;
  max-height: calc(100dvh - var(--nav-height) - 154px);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.inventory-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  line-height: 1.25;
}

.inventory-table th,
.inventory-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  overflow-wrap: anywhere;
}

.inventory-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel);
  color: var(--muted);
  font-weight: 800;
}

.inventory-table .inventory-quantity {
  width: 80px;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.inventory-table tbody tr:last-child td {
  border-bottom: 0;
}

.inventory-sort {
  display: flex;
  align-items: center;
  gap: 3px;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}

.inventory-quantity .inventory-sort { justify-content: flex-end; }
.inventory-table .inventory-average { width: 106px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
#inventoryScreen .inventory-order-multiple { width: 44px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
#inventoryScreen .inventory-order-multiple .inventory-sort { justify-content: flex-end; }
#inventoryScreen .inventory-order { width: 106px; text-align: right; font-variant-numeric: tabular-nums; }
#inventoryScreen .inventory-order .inventory-sort { justify-content: flex-end; white-space: nowrap; }
#inventoryScreen .inventory-order .inventory-sort::after { flex-shrink: 0; }
#inventoryScreen .inventory-order strong { font-weight: 700; }
#inventoryScreen .inventory-order small { display: block; font-size: 10px; color: var(--muted); }
#inventoryScreen .inventory-order.is-needed strong { color: var(--green); }
#inventoryScreen .inventory-order.is-unknown { color: var(--muted); }
@media (max-width: 480px) {
  #inventoryScreen .inventory-table th { font-size: 10px; }
  #inventoryScreen .inventory-table .inventory-quantity { width: 56px; }
  #inventoryScreen .inventory-table .inventory-average { width: 72px; }
  #inventoryScreen .inventory-order-multiple { width: 34px; }
  #inventoryScreen .inventory-order { width: 76px; }
  #inventoryScreen .inventory-order .inventory-sort,
  #inventoryScreen .inventory-average .inventory-sort { font-size: 9px; gap: 1px; }
  #inventoryScreen .inventory-average-heading { gap: 1px; }
  #inventoryScreen .inventory-table th, #inventoryScreen .inventory-table td { padding-inline: 5px; }
}
.inventory-average-heading { display: flex; align-items: center; gap: 4px; }
.inventory-average-heading .inventory-sort { justify-content: flex-end; }
.inventory-average-help { border: 0; padding: 0; background: transparent; color: var(--green); font-size: 14px; }
.inventory-average-value { width: 100%; padding: 0; border: 0; background: transparent; color: var(--green); font: inherit; text-align: right; }
.inventory-pack-value { width: 100%; min-height: 28px; padding: 0; border: 0; background: transparent; color: var(--green); font: inherit; text-align: right; cursor: pointer; }
.inventory-pack-value:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
#inventoryPackForm { grid-template-columns: minmax(0, 1fr); }
#inventoryPackForm p { margin: 0; }
#inventoryPackStatus:empty { display: none; }
#inventoryPackForm .modal-actions { display: flex; gap: 8px; margin-top: 6px; }
#inventoryPackForm .modal-actions button { flex: 1; width: auto; }
.inventory-average-formula { margin: 14px 0 8px; font-weight: 800; color: var(--green); }
#inventoryAverageDialog > p { font-size: 13px; line-height: 1.45; }
.inventory-sort::after { content: none; font-size: 10px; }
[aria-sort="ascending"] .inventory-sort::after { content: "↑"; }
[aria-sort="descending"] .inventory-sort::after { content: "↓"; }
.inventory-sort:hover,
.inventory-sort:focus-visible { color: var(--ink); }
.inventory-sort:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.inventory-product {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  overflow-wrap: anywhere;
}
.inventory-table tr[data-inventory-product] { cursor: pointer; }
.inventory-table tr[data-inventory-product]:hover { background: var(--green-soft); }
.inventory-product:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.inventory-pricing-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.inventory-pricing-toolbar .compact-action { cursor: pointer; font-size: 12px; }
#inventoryPricingToggle[aria-pressed="true"] { background: var(--green); color: white; border-color: var(--green); }
#inventoryPricingToggle:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
#inventoryPricingStatus, .inventory-pricing-note { color: var(--muted); font-size: 11px; line-height: 1.4; }
.inventory-pricing-note { margin: 8px 0 0; }
#inventoryScreen .inventory-table.has-pricing { min-width: 1000px; }
#inventoryScreen .inventory-money { width: 116px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
#inventoryScreen .inventory-money .inventory-sort { justify-content: flex-end; }
#inventoryScreen .inventory-money small { font-size: 9px; }
#inventoryScreen .inventory-money.is-negative { color: var(--red); }
#inventoryScreen .inventory-money .inventory-sort:disabled { cursor: wait; opacity: .6; }
.inventory-history-dialog {
  width: min(460px, calc(100% - 24px));
  max-height: calc(100dvh - 48px);
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.inventory-history-dialog::backdrop { background: rgba(13, 42, 28, 0.34); }
.inventory-history-dialog .modal-header h2 { font-size: 18px; overflow-wrap: anywhere; }
.inventory-history-dialog .modal-header button { flex-shrink: 0; }
.inventory-history-note { margin: 10px 0; font-size: 12px; color: var(--muted); }
.inventory-history-table-wrap { overflow: auto; max-height: 60dvh; }
.inventory-history-table .inventory-quantity { width: 96px; }
body:has(#inventoryHistoryDialog[open], #inventoryAverageDialog[open]) { overflow: hidden; }

.inventory-table .inventory-table-message {
  padding: 16px 8px;
  color: var(--muted);
  text-align: center;
}


/* The long feed scrolls with the document. Desktop's login shell must not
   capture sticky navigation inside a non-scrolling overflow container. */
body.is-app-open:has(#businessScreen.is-active) .phone-app { overflow: visible; }
.daily-revenue-wrap { min-width: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); }
.revenue-period-controls button { flex: 1; min-width: 0; }
.daily-revenue-table[data-view="weekly"] td:first-child { font-size: 10px; letter-spacing: -0.3px; }
.daily-revenue-table[data-view="weekly"] th:first-child, .daily-revenue-table[data-view="weekly"] td:first-child { width: 32%; }
.daily-revenue-table[data-view="weekly"] th:nth-child(2) { width: 25%; }
.daily-revenue-table[data-view="weekly"] th:nth-child(3) { width: 16%; }
.daily-revenue-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; font-variant-numeric: tabular-nums; line-height: 1.25; }
.daily-revenue-table th, .daily-revenue-table td { padding: 7px 6px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.daily-revenue-table th { background: var(--paper); color: var(--muted); font-size: 11px; font-weight: 700; }
.daily-revenue-table th:first-child, .daily-revenue-table td:first-child { width: 28%; text-align: left; }
.daily-revenue-table th:nth-child(2) { width: 27%; }
.daily-revenue-table th:nth-child(3) { width: 18%; }
.daily-revenue-table th:last-child { width: 27%; }
.daily-revenue-table th small { font-size: 8px; font-weight: 500; }
.daily-revenue-table tbody tr:last-child td { border-bottom: 0; }
.daily-revenue-table tbody tr:nth-child(even) { background: #f8faf6; }
.daily-revenue-amount { font-weight: 750; }
.daily-revenue-amount.is-above { color: var(--green); }
.daily-revenue-amount.is-below { color: var(--red); }
.daily-revenue-more { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 24px; color: var(--muted); font-size: 11px; }
.daily-revenue-more [hidden] { display: none; }
@media (max-width: 359px) {
  .daily-revenue-table { font-size: 11px; }
  .daily-revenue-table th, .daily-revenue-table td { padding: 7px 4px; }
  .daily-revenue-table th { font-size: 10px; }
  .daily-revenue-table th small { font-size: 7px; }
}

.panel-card {
  min-width: 0;
  overflow: hidden;
  padding: 10px;
}

.section-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
  gap: 8px;
  margin-bottom: 8px;
}

.section-title h3 {
  margin-bottom: 0;
  min-width: 0;
  font-size: 15px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.section-title h4 {
  margin: 0;
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.section-title.compact {
  align-items: center;
  margin-bottom: 0;
}

.calendar-heading {
  margin-bottom: 6px;
}

.calendar-heading .eyebrow {
  margin-bottom: 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  max-width: 58%;
  padding: 0 7px;
  border-radius: 8px;
  background: var(--green-soft);
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
  overflow-wrap: anywhere;
  line-height: 1.1;
}

.timeline-list,
.action-list {
  display: grid;
  gap: 8px;
}

.timeline-list div,
.action-list article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
}

.timeline-list span,
.action-list span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.timeline-list strong,
.action-list strong {
  font-size: 14px;
  line-height: 1.15;
}

.tab-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.tab-strip::-webkit-scrollbar {
  display: none;
}

.tab-strip button {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--muted);
  padding: 0 8px;
  font-size: 12px;
  white-space: nowrap;
}

.tab-strip button.is-active {
  background: var(--deep);
  color: #ffffff;
  border-color: var(--deep);
}

.tab-strip button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.employee-tab-panel {
  display: none;
}

.employee-tab-panel.is-active {
  display: block;
}

.compact-action,
.secondary-action {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
  color: var(--ink);
  padding: 0 12px;
  font-weight: 800;
}

.month-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 78px 88px;
  align-items: end;
  gap: 5px;
  margin: -2px 0 0;
}

.month-controls label {
  min-width: 0;
}

.month-controls select {
  min-height: 34px;
  appearance: none;
  -webkit-appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, var(--green) 50%),
    linear-gradient(135deg, var(--green) 50%, transparent 50%),
    #fbfcfa;
  background-position:
    calc(100% - 18px) 15px,
    calc(100% - 13px) 15px,
    0 0;
  background-size:
    5px 5px,
    5px 5px,
    100% 100%;
  background-repeat: no-repeat;
  color: var(--ink);
  padding: 0 25px 0 8px;
}

.month-controls select,
.month-controls .compact-action {
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.month-controls .compact-action {
  min-height: 34px;
  padding: 0 6px;
  white-space: nowrap;
}

.month-overview-card {
  padding: 5px;
}

.employee-legend {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  margin-bottom: 4px;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: 16px;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fbfcfa;
  color: var(--muted);
  padding: 0 3px;
  font-size: 7px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.legend-item b {
  display: grid;
  place-items: center;
  min-width: 14px;
  height: 11px;
  border-radius: 3px;
  font-size: 7px;
}

.legend-item.malieta b {
  background: var(--green-soft);
  color: var(--green);
}

.legend-item.sila b {
  background: #e9f1f8;
  color: var(--blue);
}

.legend-item.christelle b {
  background: #fff2dc;
  color: #94630f;
}

.legend-item.mixed b {
  background: linear-gradient(135deg, #e9f1f8 0 50%, var(--green-soft) 50% 100%);
  color: #243f54;
}

.month-timesheet {
  min-width: 0;
  overflow: hidden;
}

.timesheet-loading {
  display: grid;
  min-height: 180px;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.month-table {
  display: grid;
  grid-template-columns: minmax(34px, 1.45fr) repeat(7, minmax(0, 1fr)) minmax(17px, 0.82fr) repeat(4, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  min-width: 0;
}

.timesheet-corner,
.timesheet-head,
.timesheet-day,
.timesheet-break,
.timesheet-cell {
  min-width: 0;
  min-height: 13px;
  border-radius: 3px;
}

.timesheet-corner,
.timesheet-head {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 5px;
  font-weight: 900;
  line-height: 1;
}

.timesheet-head.is-break {
  color: #8a6b20;
}

.timesheet-day {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2px;
  border: 1px solid rgba(223, 228, 220, 0.95);
  background: #fbfcfa;
  color: var(--ink);
  padding: 0 3px;
  cursor: pointer;
}

.timesheet-day strong,
.timesheet-day span {
  display: block;
  min-width: 0;
  font-size: 6px;
  line-height: 1;
}

.timesheet-day span {
  color: var(--muted);
  overflow: hidden;
  text-overflow: clip;
}

.timesheet-day.is-selected {
  box-shadow: inset 0 0 0 1px rgba(13, 42, 28, 0.35);
}

.timesheet-day.is-holiday {
  background: #fff9ef;
}

.timesheet-day.is-day-off {
  border-color: #efc9bd;
  background: #fff0ea;
  color: #7d3828;
}

.timesheet-day.is-holiday {
  border-color: #e4b059;
  background: #fff4d7;
}

.timesheet-day.is-today {
  border-color: #1f6b45;
  background: #dff1df;
  color: #0d2a1c;
  box-shadow: inset 0 0 0 1px rgba(31, 107, 69, 0.48);
}

.timesheet-day.has-approved-vacation {
  border-color: rgba(185, 77, 58, 0.56);
  box-shadow: inset 0 -2px 0 rgba(185, 77, 58, 0.62);
}

.timesheet-day.has-approved-vacation::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--red);
}

.timesheet-day:disabled {
  opacity: 0.36;
  cursor: not-allowed;
}

.timesheet-break {
  display: grid;
  place-items: center;
  background: #f5eee0;
  color: rgba(148, 99, 15, 0.45);
  font-size: 6px;
  line-height: 1;
}

.timesheet-break.is-day-off {
  background: #f8ded6;
  color: rgba(125, 56, 40, 0.45);
}

.timesheet-cell {
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid rgba(223, 228, 220, 0.95);
  background: #f1f7ef;
  color: var(--green);
  padding: 0;
  font-size: 6px;
  font-weight: 900;
  line-height: 1;
}

.timesheet-cell.sila {
  background: #e9f1f8;
  color: var(--blue);
}

.timesheet-cell.christelle {
  background: #fff2dc;
  color: #94630f;
}

.timesheet-cell.mixed {
  background: linear-gradient(135deg, #e9f1f8 0 50%, var(--green-soft) 50% 100%);
  color: #243f54;
  font-size: 4px;
}

.timesheet-cell.other {
  background: #f4ebf7;
  color: #714174;
}

.timesheet-cell.empty {
  background: #fbfcfa;
  color: rgba(104, 115, 109, 0.48);
  font-weight: 800;
}

.timesheet-cell.is-day-off {
  border-color: rgba(185, 77, 58, 0.18);
  box-shadow: inset 0 0 0 999px rgba(185, 77, 58, 0.055);
}

.timesheet-cell.has-vacation::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: var(--red);
}

.timesheet-cell.has-approved-vacation {
  border-color: rgba(185, 77, 58, 0.42);
  box-shadow: inset 0 0 0 1px rgba(185, 77, 58, 0.2);
}

.timesheet-cell.has-approved-vacation::before {
  content: "";
  position: absolute;
  bottom: 1px;
  left: 1px;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: var(--red);
}

.timesheet-cell:disabled {
  opacity: 0.36;
  cursor: not-allowed;
}

.timesheet-cell.is-current-shift {
  border-color: #1f6b45;
  background: #dff1df;
  color: #0d2a1c;
  box-shadow: inset 0 0 0 1px rgba(31, 107, 69, 0.48);
}

.timesheet-cell.is-current-shift::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: #1f6b45;
}

.month-summary {
  display: grid;
  gap: 5px;
  margin-top: 7px;
}

.month-summary-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  color: var(--muted);
}

.month-summary-title span {
  color: var(--ink);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.month-summary-title small {
  min-width: 0;
  font-size: 8px;
  font-weight: 750;
  line-height: 1.15;
  text-align: right;
}

.summary-list {
  display: grid;
  gap: 5px;
}

.summary-employee {
  display: grid;
  grid-template-columns: minmax(48px, 1.15fr) repeat(7, minmax(0, 1fr));
  gap: 2px;
  align-items: stretch;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
  padding: 4px;
}

.summary-employee.malieta {
  border-color: rgba(31, 107, 69, 0.24);
  background: #f5fbf4;
}

.summary-employee.sila {
  border-color: rgba(49, 95, 140, 0.22);
  background: #f4f8fb;
}

.summary-employee.christelle {
  border-color: #ead8b9;
  background: #fffaf1;
}

.summary-name,
.summary-stat {
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 28px;
  border-radius: 6px;
}

.summary-name {
  padding: 0 3px;
}

.summary-name strong {
  display: block;
  min-width: 0;
  color: var(--ink);
  font-size: 9px;
  line-height: 1;
  overflow: hidden;
  text-overflow: clip;
}

.summary-name span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 7px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.summary-stat {
  place-items: center;
  border: 1px solid rgba(223, 228, 220, 0.9);
  background: rgba(255, 255, 255, 0.62);
  padding: 2px 0;
}

.summary-stat span,
.summary-stat strong {
  display: block;
  max-width: 100%;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.summary-stat span {
  color: var(--muted);
  font-size: 5px;
  font-weight: 850;
}

.summary-stat strong {
  margin-top: 3px;
  color: var(--ink);
  font-size: 8px;
  font-weight: 950;
}

.summary-stat.total {
  border-color: rgba(31, 107, 69, 0.22);
  background: #eaf4e8;
}

.summary-stat.vacation {
  border-color: rgba(185, 77, 58, 0.22);
  background: #fff0ea;
}

.month-summary-empty {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.employee-accounts-card {
  display: grid;
  gap: 9px;
  padding: 8px;
}

.account-totals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.account-total-card {
  display: grid;
  gap: 3px;
  min-width: 0;
  min-height: 62px;
  align-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
  padding: 7px;
}

.account-total-card.all {
  grid-column: 1 / -1;
  border-color: rgba(13, 42, 28, 0.18);
  background: #f7f8f4;
}

.account-total-card.malieta {
  border-color: rgba(31, 107, 69, 0.22);
  background: #f5fbf4;
}

.account-total-card.sila {
  border-color: rgba(49, 95, 140, 0.2);
  background: #f4f8fb;
}

.account-total-card.christelle {
  border-color: #ead8b9;
  background: #fffaf1;
}

.account-total-card span,
.account-total-card small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.account-total-card strong {
  color: var(--ink);
  font-size: 16px;
  line-height: 1;
}

.account-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
  padding: 8px;
}

.account-form label {
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.1;
}

.account-form input,
.account-form select {
  min-height: 38px;
  margin-top: 4px;
  padding: 0 8px;
  font-size: 16px;
}

.account-amount-field,
.account-note-field,
.account-form .primary-action {
  grid-column: 1 / -1;
}

.account-form .primary-action {
  min-height: 40px;
}

.account-status {
  min-height: 14px;
  margin: -2px 0 0;
  color: var(--green);
  font-size: 11px;
  font-weight: 850;
}

.account-status.is-error {
  color: var(--red);
}

.account-entry-list {
  display: grid;
  gap: 6px;
}

.account-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
  padding: 7px;
}

.account-entry.malieta {
  border-color: rgba(31, 107, 69, 0.22);
}

.account-entry.sila {
  border-color: rgba(49, 95, 140, 0.2);
}

.account-entry.christelle {
  border-color: #ead8b9;
}

.account-entry > div {
  min-width: 0;
}

.account-entry strong,
.account-entry span,
.account-entry small,
.account-entry b {
  display: block;
  line-height: 1.12;
}

.account-entry strong {
  color: var(--ink);
  font-size: 13px;
}

.account-entry span,
.account-entry small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.account-entry small {
  margin-top: 3px;
}

.account-entry b {
  color: var(--ink);
  font-size: 13px;
  text-align: right;
}

.account-entry button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-left: auto;
  margin-top: 4px;
  border: 1px solid rgba(185, 77, 58, 0.25);
  border-radius: 8px;
  background: #fff0ea;
  color: var(--red);
  font-size: 20px;
  line-height: 1;
}

.expense-capture-card,
.expense-list-card {
  display: grid;
  gap: 9px;
  padding: 8px;
}

.invoice-dropzone {
  display: grid;
  place-items: center;
  min-height: 96px;
  border: 1px dashed rgba(31, 107, 69, 0.42);
  border-radius: 8px;
  background: #f5fbf4;
  color: var(--green);
  padding: 12px;
  text-align: center;
}

.invoice-dropzone input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.invoice-dropzone span,
.invoice-dropzone strong {
  display: block;
  line-height: 1.1;
}

.invoice-dropzone span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.invoice-dropzone strong {
  margin-top: 5px;
  font-size: 16px;
}

.invoice-preview {
  max-height: 230px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
  overflow: auto;
}

.invoice-preview-list {
  display: grid;
  gap: 6px;
  padding: 6px;
}

.invoice-preview-item {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 28px;
  gap: 7px;
  align-items: center;
  min-height: 58px;
  border: 1px solid rgba(223, 228, 220, 0.95);
  border-radius: 8px;
  background: #fff;
  padding: 5px;
}

.invoice-preview-item img {
  display: block;
  width: 54px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
}

.invoice-file-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 48px;
  border-radius: 6px;
  background: var(--green-soft);
  color: var(--green);
  font-size: 11px;
  font-weight: 950;
}

.invoice-preview-item strong,
.invoice-preview-item span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.15;
}

.invoice-preview-item strong {
  color: var(--ink);
  font-size: 12px;
}

.invoice-preview-item span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.invoice-preview-item button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(185, 77, 58, 0.25);
  border-radius: 8px;
  background: #fff0ea;
  color: var(--red);
  font-size: 18px;
  line-height: 1;
}

.expense-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
  padding: 8px;
}

.expense-form label {
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.1;
}

.expense-form input,
.expense-form select {
  min-height: 38px;
  margin-top: 4px;
  padding: 0 8px;
  font-size: 14px;
  font-weight: 750;
}

.expense-supplier-field,
.expense-supplier-add,
.expense-category-field,
.expense-note-field,
.drive-file-hint,
.expense-form .primary-action {
  grid-column: 1 / -1;
}

.expense-supplier-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: end;
  margin-top: -1px;
}

.expense-supplier-add input {
  min-height: 38px;
  margin-top: 0;
}

.expense-supplier-add .compact-action {
  min-height: 38px;
  padding: 0 10px;
  white-space: nowrap;
}

.drive-file-hint {
  margin: -1px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.expense-form .primary-action {
  min-height: 40px;
}

.expense-list {
  display: grid;
  gap: 6px;
}

.expense-entry {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
  padding: 7px;
}

.expense-entry img,
.expense-thumb {
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #edf1eb;
}

.expense-entry img {
  object-fit: cover;
}

.expense-thumb {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.expense-thumb.is-archived {
  background: var(--green-soft);
  color: var(--green);
}

.expense-thumb.is-missing {
  background: #fff0ea;
  color: #7d3828;
}

.expense-thumb.is-local {
  background: #fff8e6;
  color: #8a6200;
}

.expense-entry > div {
  min-width: 0;
}

.expense-entry strong,
.expense-entry span,
.expense-entry small,
.expense-entry b {
  display: block;
  line-height: 1.12;
}

.expense-entry strong {
  color: var(--ink);
  font-size: 13px;
}

.expense-entry span,
.expense-entry small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.expense-entry small {
  margin-top: 3px;
}

.expense-entry b {
  color: var(--ink);
  font-size: 13px;
  text-align: right;
}

.expense-entry button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-left: auto;
  margin-top: 4px;
  border: 1px solid rgba(185, 77, 58, 0.25);
  border-radius: 8px;
  background: #fff0ea;
  color: var(--red);
  font-size: 20px;
  line-height: 1;
}

.expense-entry button.sync {
  border-color: rgba(31, 107, 69, 0.25);
  background: var(--green-soft);
  color: var(--green);
  font-size: 16px;
}

.expense-drive-link {
  display: grid;
  place-items: center;
  min-width: 48px;
  min-height: 28px;
  margin-top: 4px;
  border: 1px solid rgba(31, 107, 69, 0.22);
  border-radius: 8px;
  background: var(--green-soft);
  color: var(--green);
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
}

.vacation-card-panel {
  display: grid;
  gap: 9px;
  padding: 8px;
}

.vacation-rule-list {
  display: grid;
  gap: 5px;
}

.vacation-rule-list div {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
  padding: 7px;
}

.vacation-rule-list strong {
  color: var(--ink);
  font-size: 11px;
  line-height: 1;
}

.vacation-rule-list span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.22;
}

.vacation-summary-grid {
  display: grid;
  gap: 7px;
}

.vacation-card {
  display: grid;
  gap: 6px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
  padding: 7px;
}

.vacation-card.malieta {
  border-color: rgba(31, 107, 69, 0.22);
  background: #f5fbf4;
}

.vacation-card.sila {
  border-color: rgba(49, 95, 140, 0.2);
  background: #f4f8fb;
}

.vacation-card.christelle {
  border-color: #ead8b9;
  background: #fffaf1;
}

.vacation-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.vacation-card-head strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1;
}

.vacation-card-head span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

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

.vacation-stats div {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 34px;
  border: 1px solid rgba(223, 228, 220, 0.85);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.62);
  padding: 3px;
}

.vacation-stats div.available {
  border-color: rgba(31, 107, 69, 0.22);
  background: #eaf4e8;
}

.vacation-stats span,
.vacation-stats b {
  display: block;
  line-height: 1;
  text-align: center;
}

.vacation-stats span {
  color: var(--muted);
  font-size: 7px;
  font-weight: 850;
}

.vacation-stats b {
  margin-top: 3px;
  color: var(--ink);
  font-size: 11px;
}

.vacation-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
  padding: 8px;
}

.vacation-form label {
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.1;
}

.vacation-form input,
.vacation-form select {
  min-height: 38px;
  margin-top: 4px;
  padding: 0 8px;
  font-size: 16px;
}

.vacation-form #vacationEmployee,
.vacation-form input[type="date"] {
  font-size: 14px;
  font-weight: 750;
  line-height: 1.15;
}

.vacation-employee-field,
.vacation-range-fields {
  grid-column: 1 / -1;
}

.vacation-range-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.vacation-range-fields label {
  min-width: 0;
}

.vacation-date-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.1;
}

.vacation-date-heading strong {
  color: var(--ink);
  font-size: 11px;
  text-align: right;
}

.vacation-date-calendar {
  display: grid;
  gap: 8px;
}

.vacation-date-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 38px;
  margin-top: 4px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
}

.vacation-date-popover {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 8px;
  box-shadow: 0 12px 28px rgba(41, 34, 24, 0.12);
}

.vacation-calendar-nav {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  gap: 6px;
  align-items: center;
}

.vacation-calendar-nav strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.vacation-calendar-nav button {
  display: grid;
  place-items: center;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
  color: var(--ink);
  font-size: 21px;
  line-height: 1;
}

.vacation-calendar-nav button:disabled {
  opacity: 0.35;
}

.vacation-calendar-month {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 7px;
}

.vacation-calendar-month h4 {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.vacation-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.vacation-calendar-grid button {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f6f8f5;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.vacation-calendar-grid button.is-available {
  background: #fbfcfa;
  color: var(--ink);
}

.vacation-calendar-grid button.is-today {
  border-color: var(--gold);
}

.vacation-calendar-grid button.is-selected {
  background: var(--deep);
  border-color: var(--deep);
  color: #ffffff;
}

.vacation-calendar-grid button:disabled {
  opacity: 0.34;
  cursor: not-allowed;
}

.vacation-calendar-grid small {
  margin-top: 2px;
  font-size: 8px;
  font-weight: 850;
}

.vacation-day-schedule {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
}

.vacation-schedule-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.vacation-schedule-heading strong {
  color: var(--ink);
  font-size: 11px;
  text-align: right;
}

.vacation-range-note {
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.25;
}

.vacation-hour-toolbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.vacation-hour-toolbar button {
  min-height: 34px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
}

.vacation-range-summary {
  display: grid;
  gap: 5px;
}

.vacation-range-summary span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 7px 8px;
}

.vacation-range-summary b,
.vacation-range-summary strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vacation-range-summary b {
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.vacation-range-summary strong {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.vacation-schedule-row {
  display: grid;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 7px;
}

.vacation-schedule-row.is-selected {
  border-color: var(--deep);
}

.vacation-schedule-row.malieta {
  border-left: 4px solid #1f6b45;
}

.vacation-schedule-row.sila {
  border-left: 4px solid #315f8c;
}

.vacation-schedule-row.christelle {
  border-left: 4px solid #8f6c24;
}

.vacation-schedule-person {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.vacation-schedule-person strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.vacation-schedule-person span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}

.vacation-slot-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.vacation-slot-list button {
  min-height: 44px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f6f8f5;
  color: var(--ink);
  font-weight: 900;
}

.vacation-timeslot {
  display: grid;
  gap: 3px;
  align-content: center;
  text-align: left;
  padding: 6px 7px;
}

.vacation-timeslot span,
.vacation-timeslot strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vacation-timeslot span {
  color: var(--muted);
  font-size: 10px;
}

.vacation-timeslot strong {
  color: var(--ink);
  font-size: 11px;
}

.vacation-timeslot:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.vacation-slot-list button.is-selected,
.vacation-timeslot.is-selected {
  background: var(--deep);
  border-color: var(--deep);
  color: #ffffff;
}

.vacation-timeslot.is-selected span,
.vacation-timeslot.is-selected strong {
  color: #ffffff;
}

.vacation-note-field,
.vacation-form .primary-action {
  grid-column: 1 / -1;
}

.vacation-form .primary-action {
  min-height: 40px;
}

.vacation-request-list {
  display: grid;
  gap: 6px;
}

.vacation-request {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
  padding: 7px;
}

.vacation-request.malieta {
  border-color: rgba(31, 107, 69, 0.22);
}

.vacation-request.sila {
  border-color: rgba(49, 95, 140, 0.2);
}

.vacation-request.christelle {
  border-color: #ead8b9;
}

.vacation-request > div {
  min-width: 0;
}

.vacation-request strong,
.vacation-request span,
.vacation-request small,
.vacation-request b {
  display: block;
  line-height: 1.12;
}

.vacation-request strong {
  color: var(--ink);
  font-size: 13px;
}

.vacation-request span,
.vacation-request small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.vacation-request small {
  margin-top: 3px;
}

.vacation-request b {
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}

.vacation-request b.approved {
  color: var(--green);
}

.vacation-request b.rejected {
  color: var(--red);
}

.vacation-request-actions {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
}

.vacation-request button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.vacation-request button.approve {
  border: 1px solid rgba(31, 107, 69, 0.24);
  background: #eaf6ef;
  color: var(--green);
}

.vacation-request button.reject,
.vacation-request button.cancel,
.vacation-request button.delete {
  border: 1px solid rgba(185, 77, 58, 0.25);
  background: #fff0ea;
  color: var(--red);
}

.vacation-request button.cancel,
.vacation-request button.delete {
  font-size: 20px;
}

.salary-card-panel {
  display: grid;
  gap: 9px;
  padding: 8px;
}

.salary-title-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.salary-info-button {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border: 1px solid rgba(31, 107, 69, 0.24);
  border-radius: 999px;
  background: #eaf6ef;
  color: var(--green);
  padding: 0;
  font-size: 12px;
  font-weight: 950;
  font-family: Georgia, serif;
  line-height: 1;
}

.month-confirm-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(223, 228, 220, 0.95);
  border-radius: 8px;
  background: #fbfcfa;
  padding: 8px;
}

.month-confirm-bar strong,
.month-confirm-bar span {
  display: block;
  min-width: 0;
  line-height: 1.12;
}

.month-confirm-bar strong {
  color: var(--ink);
  font-size: 12px;
}

.month-confirm-bar span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.month-confirm-bar button {
  min-height: 32px;
  border: 1px solid rgba(31, 107, 69, 0.24);
  border-radius: 8px;
  background: #1f6b45;
  color: #fff;
  padding: 0 9px;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.month-confirm-bar button.is-confirmed {
  background: #eaf6ef;
  color: var(--green);
}

.month-confirm-bar button:disabled {
  opacity: 0.66;
}

.salary-process {
  display: grid;
  gap: 6px;
}

.salary-step {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) minmax(76px, auto);
  gap: 7px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
  padding: 7px;
}

.salary-step > b {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #eef2ea;
  color: var(--ink);
  font-size: 12px;
}

.salary-step.is-done > b {
  background: #eaf6ef;
  color: var(--green);
}

.salary-step div {
  min-width: 0;
}

.salary-step strong,
.salary-step span {
  display: block;
  min-width: 0;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.salary-step strong {
  color: var(--ink);
  font-size: 12px;
}

.salary-step span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.salary-step-status {
  display: grid;
  place-items: center;
  min-height: 28px;
  border-radius: 8px;
  background: #f4f1ec;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.salary-step.is-done .salary-step-status {
  background: #eaf6ef;
  color: var(--green);
}

.salary-total-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.salary-total-grid div,
.salary-number-grid div {
  display: grid;
  place-items: center;
  min-width: 0;
  border: 1px solid rgba(223, 228, 220, 0.85);
  border-radius: 7px;
  background: #fbfcfa;
  padding: 5px 4px;
}

.salary-total-grid div.available,
.salary-number-grid div.available {
  border-color: rgba(31, 107, 69, 0.22);
  background: #eaf4e8;
}

.salary-total-grid span,
.salary-total-grid b,
.salary-number-grid span,
.salary-number-grid b {
  display: block;
  max-width: 100%;
  line-height: 1;
  text-align: center;
}

.salary-total-grid span,
.salary-number-grid span {
  color: var(--muted);
  font-size: 8px;
  font-weight: 850;
}

.salary-total-grid b,
.salary-number-grid b {
  margin-top: 4px;
  color: var(--ink);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.salary-employee-list {
  display: grid;
  gap: 7px;
}

.salary-employee-selector {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.salary-employee-selector select {
  width: 100%;
  min-height: 36px;
  font-size: 13px;
  font-weight: 850;
}

.salary-employee {
  display: grid;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
  padding: 7px;
}

.salary-employee.malieta {
  border-color: rgba(31, 107, 69, 0.22);
  background: #f5fbf4;
}

.salary-employee.sila {
  border-color: rgba(49, 95, 140, 0.2);
  background: #f4f8fb;
}

.salary-employee.christelle {
  border-color: #ead8b9;
  background: #fffaf1;
}

.salary-employee-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.salary-employee-head div {
  min-width: 0;
}

.salary-employee-head strong,
.salary-employee-head span,
.salary-employee-head b {
  display: block;
  line-height: 1.1;
}

.salary-employee-head strong {
  color: var(--ink);
  font-size: 13px;
}

.salary-employee-head span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.salary-employee-head b {
  color: var(--green);
  font-size: 12px;
  text-align: right;
  white-space: nowrap;
}

.salary-warning-block {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(185, 77, 58, 0.28);
  border-radius: 8px;
  background: #fff4ef;
  padding: 8px;
}

.salary-warning-block > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.salary-warning-block strong,
.salary-warning-block li {
  min-width: 0;
  color: #7d3828;
  line-height: 1.2;
}

.salary-warning-block strong {
  font-size: 11px;
}

.salary-warning-block ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
}

.salary-warning-block li {
  font-size: 10px;
  font-weight: 800;
}

.salary-input-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.salary-input-grid label {
  min-width: 0;
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
  line-height: 1.1;
}

.field-label-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.field-label-row .salary-info-button {
  width: 17px;
  height: 17px;
  font-size: 10px;
}

.salary-input-grid input {
  width: 100%;
  min-height: 34px;
  margin-top: 4px;
  padding: 0 7px;
  font-size: 13px;
  font-weight: 850;
}

.salary-note-field {
  grid-column: 1 / -1;
}

.salary-number-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.month-table.is-confirmed {
  opacity: 0.62;
}

.month-table.is-confirmed .timesheet-cell,
.month-table.is-confirmed .timesheet-day {
  cursor: not-allowed;
}

.salary-sheet-block {
  display: grid;
  gap: 5px;
}

.salary-sheet-block h4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.05;
}

.salary-sheet-block h4 span {
  min-width: 0;
}

.salary-sheet-block h4 .salary-info-button {
  width: 18px;
  height: 18px;
  font-size: 11px;
}

.salary-sheet {
  display: grid;
  overflow: hidden;
  border: 2px solid #6b5849;
  border-radius: 4px;
  background: #fff;
}

.salary-sheet-5 {
  grid-template-columns: minmax(92px, 1.45fr) minmax(38px, 0.6fr) minmax(70px, 0.95fr) minmax(54px, 0.7fr) minmax(82px, 1fr);
}

.salary-head,
.salary-cell {
  min-width: 0;
  border-right: 1px solid #6b5849;
  border-bottom: 1px solid #6b5849;
  padding: 6px 5px;
  line-height: 1.05;
}

.salary-head:nth-child(5n),
.salary-cell:nth-child(5n) {
  border-right: 0;
}

.salary-head {
  display: grid;
  place-items: center;
  background: #e7cfbf;
  color: #5e5044;
  font-size: 10px;
  font-weight: 900;
  text-align: center;
}

.salary-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5a4d41;
  font-size: 10px;
  font-weight: 800;
}

.salary-cell.label {
  justify-content: flex-start;
  background: #e7cfbf;
  overflow-wrap: anywhere;
}

.salary-cell.money {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px;
  justify-content: stretch;
}

.salary-cell.money span {
  color: #5a4d41;
}

.salary-cell.money b {
  min-width: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

.salary-sheet-total,
.salary-grand-total,
.salary-split-total,
.salary-pay-total {
  justify-self: end;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  overflow: hidden;
  border: 2px solid #6b5849;
  border-radius: 4px;
  color: #5a4d41;
  font-weight: 950;
}

.salary-sheet-total span,
.salary-sheet-total b,
.salary-grand-total span,
.salary-grand-total b,
.salary-pay-total span,
.salary-pay-total b {
  padding: 7px 9px;
}

.salary-sheet-total b,
.salary-grand-total b,
.salary-pay-total b {
  border-left: 2px solid #6b5849;
  text-align: right;
}

.salary-sheet-total {
  font-size: 12px;
}

.salary-grand-total {
  background: #e7cfbf;
  font-size: 15px;
}

.salary-split-total {
  grid-template-columns: 1fr 1fr;
  gap: 0;
  width: 100%;
  border-width: 1px;
  font-size: 10px;
}

.salary-split-total span {
  padding: 7px;
  text-align: center;
}

.salary-split-total span + span {
  border-left: 1px solid #6b5849;
}

.salary-lower-grid {
  display: grid;
  gap: 7px;
}

.salary-mini-table {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(82px, auto);
  overflow: hidden;
  border: 2px solid #6b5849;
  border-radius: 4px;
}

.salary-mini-table span,
.salary-mini-table b {
  border-bottom: 1px solid #6b5849;
  padding: 7px;
  color: #5a4d41;
  font-size: 11px;
  line-height: 1.05;
}

.salary-mini-table span {
  background: #e7cfbf;
  font-weight: 850;
}

.salary-mini-table b {
  text-align: right;
  font-weight: 850;
}

.salary-mini-table span:nth-last-child(-n + 2),
.salary-mini-table b:nth-last-child(-n + 1) {
  border-bottom: 0;
}

.salary-vacation-dates {
  min-height: 54px;
  margin: 0;
  border: 2px solid #6b5849;
  border-radius: 4px;
  padding: 8px;
  color: #5a4d41;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

.salary-pay-total {
  justify-self: stretch;
  grid-template-columns: 1fr auto;
  background: #f7f3ef;
  font-size: 20px;
}

.salary-pay-total span,
.salary-pay-total b {
  padding: 11px 13px;
}

.salary-pay-total span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.vacation-ledger-section {
  display: grid;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.vacation-ledger-controls {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 7px;
}

.vacation-ledger-controls label {
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.1;
}

.vacation-ledger-controls select {
  width: 100%;
  min-height: 36px;
  margin-top: 4px;
  padding: 0 8px;
  font-size: 13px;
  font-weight: 800;
}

.vacation-ledger-totals {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}

.vacation-ledger-totals div {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 34px;
  border: 1px solid rgba(223, 228, 220, 0.85);
  border-radius: 7px;
  background: #fbfcfa;
  padding: 3px;
}

.vacation-ledger-totals div.available {
  border-color: rgba(31, 107, 69, 0.22);
  background: #eaf4e8;
}

.vacation-ledger-totals span,
.vacation-ledger-totals b {
  display: block;
  line-height: 1;
  text-align: center;
}

.vacation-ledger-totals span {
  color: var(--muted);
  font-size: 7px;
  font-weight: 850;
}

.vacation-ledger-totals b {
  margin-top: 3px;
  color: var(--ink);
  font-size: 10px;
}

.vacation-ledger-table {
  display: grid;
  gap: 3px;
  min-width: 0;
  overflow-x: auto;
}

.vacation-ledger-header,
.vacation-ledger-row {
  display: grid;
  grid-template-columns: minmax(76px, 1.3fr) repeat(3, minmax(54px, 0.85fr)) minmax(70px, 1fr);
  gap: 3px;
  align-items: stretch;
  min-width: 430px;
}

.vacation-ledger-header {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.vacation-ledger-header span {
  padding: 0 3px;
}

.vacation-ledger-row {
  min-height: 40px;
}

.vacation-ledger-day,
.vacation-ledger-row input,
.vacation-ledger-row b,
.vacation-ledger-used {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #ffffff;
}

.vacation-ledger-day {
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 5px 6px;
}

.vacation-ledger-day strong {
  color: var(--ink);
  font-size: 12px;
  line-height: 1;
}

.vacation-ledger-day span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}

.vacation-ledger-row input {
  width: 100%;
  min-height: 40px;
  padding: 0 5px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
  text-align: center;
}

.vacation-ledger-used {
  position: relative;
  display: grid;
}

.vacation-ledger-used input {
  border: 0;
}

.vacation-ledger-used small {
  position: absolute;
  right: 3px;
  bottom: 2px;
  color: var(--green);
  font-size: 7px;
  font-weight: 900;
  line-height: 1;
}

.vacation-ledger-row b {
  display: grid;
  place-items: center;
  padding: 0 4px;
  color: var(--ink);
  font-size: 11px;
  line-height: 1;
  text-align: center;
}

.vacation-ledger-row.is-negative b {
  border-color: rgba(185, 77, 58, 0.25);
  background: #fff0ea;
  color: var(--red);
}

.secondary-action {
  min-height: 44px;
  width: 100%;
  background: var(--panel);
}

.calendar-weekdays,
.month-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.calendar-weekdays {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-align: center;
  text-transform: uppercase;
}

.month-calendar button,
.month-empty {
  aspect-ratio: 1;
  min-width: 0;
}

.month-calendar button {
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #fbfcfa;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
}

.month-calendar button.is-today {
  border-color: var(--gold);
}

.month-calendar button.is-selected {
  background: var(--deep);
  border-color: var(--deep);
  color: #ffffff;
}

.month-calendar button.has-approved-vacation {
  border-color: rgba(185, 77, 58, 0.5);
  box-shadow: inset 0 -3px 0 rgba(185, 77, 58, 0.58);
}

.month-calendar button:disabled,
.week-day.is-disabled,
.hour-cell:disabled {
  opacity: 0.36;
  cursor: not-allowed;
}

.week-timeline {
  margin: 0 -12px -12px;
  overflow-x: auto;
  padding: 0 12px 12px;
  scrollbar-width: thin;
}

.week-grid {
  display: grid;
  grid-template-columns: 40px repeat(7, minmax(0, 1fr));
  gap: 3px;
  min-width: 0;
}

.week-corner,
.week-day,
.hour-label,
.hour-cell {
  min-height: 32px;
  border-radius: 8px;
}

.week-corner,
.hour-label {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.week-day {
  display: grid;
  place-items: center;
  gap: 1px;
  padding: 5px 2px;
  border: 1px solid var(--line);
  background: #fbfcfa;
}

.week-day strong,
.week-day span {
  display: block;
  font-size: 9px;
  line-height: 1;
}

.week-day span {
  color: var(--muted);
}

.week-day.is-selected {
  border-color: var(--deep);
  background: var(--deep);
  color: #ffffff;
}

.week-day.is-selected span {
  color: rgba(255, 255, 255, 0.75);
}

.week-day.is-today:not(.is-selected) {
  border-color: var(--gold);
}

.week-day.has-approved-vacation {
  border-color: rgba(185, 77, 58, 0.45);
  box-shadow: inset 0 -2px 0 rgba(185, 77, 58, 0.55);
}

.hour-cell {
  position: relative;
  border: 1px solid var(--line);
  background: #f1f7ef;
  color: var(--green);
  font-size: 9px;
  font-weight: 850;
}

.hour-cell.sila {
  background: #e9f1f8;
  color: var(--blue);
}

.hour-cell.christelle,
.employee-picker .christelle {
  background: #fff2dc;
  color: #94630f;
}

.hour-cell.mixed {
  background: linear-gradient(135deg, #e9f1f8 0 50%, var(--green-soft) 50% 100%);
  color: #243f54;
}

.hour-cell.other {
  background: #f4ebf7;
  color: #714174;
}

.hour-cell.empty {
  background: #fbfcfa;
  color: var(--muted);
  font-weight: 750;
}

.hour-cell.is-selected-day {
  box-shadow: inset 0 0 0 2px rgba(13, 42, 28, 0.16);
}

.hour-cell.is-current-shift {
  position: relative;
  border-color: #1f6b45;
  background: #dff1df;
  color: #0d2a1c;
  box-shadow: inset 0 0 0 1px rgba(31, 107, 69, 0.48);
}

.hour-cell.is-current-shift::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #1f6b45;
}

.hour-cell.has-approved-vacation {
  border-color: rgba(185, 77, 58, 0.42);
  box-shadow: inset 0 0 0 1px rgba(185, 77, 58, 0.18);
}

.hour-cell.has-approved-vacation::before {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 2px;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--red);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  padding: calc(18px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(13, 42, 28, 0.34);
}

.shift-modal,
.day-modal,
.salary-info-modal {
  width: min(100%, 420px);
  max-height: calc(100vh - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  max-height: calc(100svh - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  max-height: calc(100dvh - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--shadow);
}

.day-modal {
  width: min(100%, 440px);
  padding: 14px;
}

.salary-info-modal {
  width: min(100%, 460px);
}

.salary-info-body {
  display: grid;
  gap: 10px;
}

.salary-info-body ul {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  padding-left: 20px;
}

.salary-info-body li {
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.modal-header h2 {
  margin: 0;
  font-size: 23px;
}

.modal-header button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
}

.modal-meta {
  margin: 6px 0 14px;
  color: var(--muted);
  font-weight: 750;
}

.employee-picker {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.employee-picker button {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 900;
}

.employee-picker .malieta {
  background: var(--green-soft);
  color: var(--green);
}

.employee-picker .sila {
  background: #e9f1f8;
  color: var(--blue);
}

.employee-picker .christelle {
  border-color: #ead8b9;
  color: #94630f;
}

.employee-picker .empty {
  background: #fbfcfa;
  color: var(--muted);
}

.day-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: -4px 0 10px;
}

.day-summary-chip {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
  color: var(--muted);
  padding: 0 8px;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
}

.day-summary-chip.malieta {
  background: var(--green-soft);
  color: var(--green);
}

.day-summary-chip.sila {
  background: #e9f1f8;
  color: var(--blue);
}

.day-summary-chip.christelle {
  background: #fff2dc;
  color: #94630f;
}

.day-summary-chip.mixed {
  background: linear-gradient(135deg, #e9f1f8 0 50%, var(--green-soft) 50% 100%);
  color: #243f54;
}

.day-summary-chip.off {
  background: #fff0ea;
  color: #7d3828;
  border-color: #efc9bd;
}

.day-summary-chip.vacation {
  background: #fff0ea;
  color: #7d3828;
  border-color: #efc9bd;
}

.day-summary-chip.approved-vacation {
  background: #fff0ea;
  color: #7d3828;
  border-color: rgba(185, 77, 58, 0.36);
}

.day-summary-chip.total {
  background: #f7f8f4;
  color: var(--ink);
}

.day-hours {
  display: grid;
  gap: 5px;
  margin-bottom: 10px;
}

.day-hour-row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  min-height: 36px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
  color: var(--ink);
  padding: 0 10px;
  text-align: left;
}

.day-hour-row strong {
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
}

.day-hour-row span {
  min-width: 0;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.day-hour-row small {
  display: block;
  margin-top: 2px;
  color: #7d3828;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.1;
}

.day-hour-row.malieta {
  background: var(--green-soft);
  color: var(--green);
}

.day-hour-row.sila {
  background: #e9f1f8;
  color: var(--blue);
}

.day-hour-row.christelle {
  background: #fff2dc;
  color: #94630f;
}

.day-hour-row.mixed {
  background: linear-gradient(135deg, #e9f1f8 0 50%, var(--green-soft) 50% 100%);
  color: #243f54;
}

.day-hour-row.other {
  background: #f4ebf7;
  color: #714174;
}

.day-hour-row.empty,
.day-hour-row.break {
  background: #fbfcfa;
  color: var(--muted);
}

.day-hour-row.break {
  border-style: dashed;
}

.day-hour-row.has-vacation {
  border-color: #efc9bd;
  box-shadow: inset 3px 0 0 #b94d3a;
}

.day-hour-row.has-approved-vacation {
  border-color: rgba(185, 77, 58, 0.35);
  box-shadow: inset 3px 0 0 #b94d3a;
}

.bottom-nav {
  position: sticky;
  bottom: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-height: var(--nav-height);
  width: min(100%, 460px);
  margin: 0 auto;
  padding: 5px 5px calc(5px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(223, 228, 220, 0.9);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
}

body.is-app-open .bottom-nav {
  width: 100%;
  max-width: none;
  margin: 0;
}

.bottom-nav button {
  display: grid;
  place-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 50px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.bottom-nav button.is-active {
  background: var(--green-soft);
  color: var(--green);
}

.bottom-nav svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

  .week-grid {
    grid-template-columns: 44px repeat(7, minmax(0, 1fr));
    gap: 4px;
  }

  .bottom-nav button span {
    font-size: 9px;
  }
}

@media (min-width: 700px) {
  body {
    padding: 24px 0;
  }

  body.is-app-open {
    padding: 0;
  }

  .phone-app {
    min-height: calc(100vh - 48px);
    border-radius: 28px;
    overflow: hidden;
  }

  body.is-app-open .phone-app {
    min-height: 100vh;
    border-radius: 0;
  }

  .login-view,
  .app-view {
    min-height: calc(100vh - 48px);
    min-height: calc(100svh - 48px);
  }

  body.is-app-open .app-view {
    min-height: 100vh;
    min-height: 100svh;
  }

  .bottom-nav {
    border-radius: 0 0 28px 28px;
  }

  body.is-app-open .bottom-nav {
    border-radius: 0;
  }
}

.bank-balance-summary { display: grid; gap: 3px; margin-bottom: 10px; }
.bank-balance-label { color: var(--muted); font-size: 12px; }
.bank-balance-summary strong { font-size: 24px; font-variant-numeric: tabular-nums; }
/* Banque and Espèces use the same responsive balance typography. */
:is(#bankTransactionsPanel, #bankCashPanel) .bank-balance-summary strong { font-size: clamp(17px, 5vw, 24px); }
.bank-balance-summary .is-credit { color: var(--green); }
.bank-balance-summary .is-debit { color: var(--red); }
.bank-balance-summary small { color: var(--muted); font-size: 11px; }
.bank-table-wrap { max-height: calc(100dvh - var(--nav-height) - 164px); }
.bank-table .bank-id { width: 132px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bank-table .bank-amount { width: 116px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bank-amount .inventory-sort { justify-content: flex-end; }
.bank-table td.is-credit { color: var(--green); font-weight: 750; }
.bank-table td.is-debit { color: var(--red); font-weight: 750; }

/* Inventory owns one scroll area; its controls stay outside it. */
body.is-app-open:has(#inventoryScreen.is-active) {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}
body.is-app-open:has(#inventoryScreen.is-active) .phone-app,
body.is-app-open:has(#inventoryScreen.is-active) .app-view {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}
body.is-app-open:has(#inventoryScreen.is-active) .app-view {
  grid-template-rows: auto minmax(0, 1fr) auto;
}
body.is-app-open:has(#inventoryScreen.is-active) .screen-stack {
  min-height: 0;
  padding-bottom: 8px;
  overflow: hidden;
}
#inventoryScreen.is-active {
  height: 100%;
  min-height: 0;
  grid-template-rows: auto auto minmax(0, 1fr);
}
#inventoryScreen > .inventory-table-wrap {
  min-height: 0;
  max-height: none;
}

/* Compact finance subtabs, matching the F3 tab layout in the Relais palette. */
.bank-subtabs { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 2px; padding: 3px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 8px; background: #edf4f0; }
.bank-subtabs button { min-width: 0; min-height: 34px; padding: 4px 0; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); font: inherit; font-size: 10.8px; font-weight: 750; line-height: 1.15; cursor: pointer; }
.bank-subtabs button.is-active { border-color: var(--green); background: var(--green); color: white; }
.bank-subtabs button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.bank-panel { min-width: 0; }
.bank-panel[hidden] { display: none; }
.bank-panel .bank-table-wrap { max-height: calc(100dvh - var(--nav-height) - 285px); }
.charges-content { display: grid; gap: 8px; min-width: 0; }
.finance-table-wrap { max-height: calc(100dvh - var(--nav-height) - 220px); }
.finance-table { font-size: 11px; line-height: 1.2; }
.finance-table th, .finance-table td { padding: 4px 6px; }
.finance-table th:last-child, .finance-table td:last-child { width: 90px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.finance-table th:last-child { font-size: 11px; }
.finance-table th:first-child { width: 74px; }
.finance-table td:first-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.supplier-invoices-list th:nth-child(2) { width: 23%; }
.finance-table.charges-list th:first-child { width: 64px; }
.finance-table small { color: var(--muted); }
.charge-value { border: 0; padding: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; text-align: right; min-height: 0; }
.charge-value:hover { text-decoration: underline; }
.charges-list sup { margin-left: 2px; color: var(--muted); }
.charges-note { font-size: 11px; line-height: 1.5; color: var(--muted); margin: 0; }
.charges-unassigned, .charges-detail-dialog { font-size: 12px; line-height: 1.5; }
.charges-unassigned summary { cursor: pointer; font-weight: 750; }
.charges-unassigned p, .charges-detail-dialog p { margin: 10px 0 0; overflow-wrap: anywhere; }
.charges-missing { color: var(--muted); font-weight: 400; }
.cash-receipt-breakdown { margin-top: 10px; }
.cash-receipt-help { margin: 4px 0; min-width: 0; }
.cash-help-button { display: inline-flex; align-items: center; justify-content: center; width: 28px; min-height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--green); font: inherit; font-size: 16px; vertical-align: middle; cursor: help; }
.cash-help-button:hover, .cash-help-button[aria-expanded="true"] { background: #edf4f0; }
.cash-help-button:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.cash-help-text { display: block; margin: 3px 0 8px; padding: 8px 10px; border-left: 3px solid var(--green); border-radius: 4px; background: #edf4f0; color: var(--ink); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.cash-help-text[hidden] { display: none; }
@media (max-width: 360px) { .bottom-nav button { font-size: 9px; } }

@media (max-width: 360px) {
  .finance-table, .finance-table th:last-child { font-size: 10px; }
  .finance-table th, .finance-table td { padding: 4px; }
  .finance-table th:first-child { width: 64px; }
  .finance-table th:last-child, .finance-table td:last-child { width: 80px; }
}

/* Bidirectional reconciliation links; long transaction lists expand on demand. */
.finance-link { display: block; width: fit-content; max-width: 100%; padding: 1px 0; border: 0; border-radius: 0; background: none; color: var(--green); font: inherit; text-align: left; white-space: normal; overflow-wrap: anywhere; cursor: pointer; }
.finance-link:hover { text-decoration: underline; }
.finance-link:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.bank-recon .finance-link { font-size: 11px; }
.bank-table tr[data-bank-operation] { cursor: pointer; }
.bank-table tr[data-bank-operation]:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.bank-table tr[data-bank-operation]:hover td { background: var(--green-soft); }
.finance-table .finance-bank-column { width: 116px; }
.finance-bank-links .finance-link { white-space: nowrap; font-size: 10px; font-variant-numeric: tabular-nums; }
.finance-bank-links summary { width: fit-content; color: var(--green); cursor: pointer; font-size: 10px; }
:is(#supplierInvoicesContent, #monthlyChargesContent) .finance-table-wrap { width: 100%; max-width: 100%; }
.finance-table.supplier-invoices-list { width: 100%; min-width: 0; }
.supplier-invoices-list th, .supplier-invoices-list td { padding: 3px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.supplier-invoices-list th:first-child { width: 22%; }
.supplier-invoices-list th:nth-child(2) { width: 20%; }
.supplier-invoices-list th:nth-child(3) { width: calc(35% - 28px); }
.supplier-invoices-list .invoice-amount { width: 23%; text-align: right; font-variant-numeric: tabular-nums; }
.supplier-invoices-list th:last-child, .supplier-invoices-list td:last-child { width: 28px; padding-inline: 1px; text-align: center; font-size: inherit; color: var(--green); }
.supplier-invoices-list .invoice-payment-code { display: inline-block; margin-left: 2px; color: var(--green); font-size: 9px; font-weight: 700; line-height: 1.2; }
.finance-table.charges-list { min-width: 450px; }
.bank-full-description { white-space: pre-wrap; }
.bank-modal-links .finance-link { margin: 5px 0; }

/* Supplier documents and payments share the Banque invoice workbench. */
.supplier-invoice-actions { display: flex; justify-content: flex-start; margin-bottom: 8px; }
.supplier-invoice-actions > select { width: 240px; max-width: 100%; min-width: 0; min-height: 36px; padding: 6px 30px 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font: inherit; font-size: 14px; }
/* One shared toolbar for Supplier and Charges, including narrow phones. */
.invoice-list-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 8px; }
.invoice-list-toolbar > select { width: 100%; max-width: none; text-overflow: ellipsis; }
.invoice-list-toolbar > button { min-height: 36px; padding: 6px 10px; font-size: 14px; white-space: nowrap; }
.supplier-invoice-toolbar, .charge-invoice-toolbar { grid-template-columns: minmax(0, 1fr) auto auto; }
.invoice-list-toolbar > .invoice-add-icon { min-width: 36px; padding: 2px 8px; font-size: 24px; line-height: 1; }
#supplierInvoiceEmptyFilter[aria-pressed="true"], #monthlyChargeEmptyFilter[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; }
#supplierAccountFilter { width: 100%; }
.supplier-invoices-list tr[data-supplier-invoice-key] { cursor: pointer; }
.supplier-invoices-list tr[data-supplier-invoice-key]:hover td { background: var(--green-soft); }
.supplier-invoices-list tr[data-supplier-invoice-key]:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
:is(.supplier-invoice-dialog,.charges-detail-dialog:has(.account-repayment-detail)), .expense-capture-dialog, .expense-ledger-dialog { width: min(640px, calc(100vw - 20px)); max-height: calc(100dvh - 24px); overflow: auto; overscroll-behavior: contain; }
:is(.supplier-invoice-dialog,.charges-detail-dialog:has(.account-repayment-detail)) > .modal-header, .expense-capture-dialog > .modal-header, .expense-ledger-dialog > .modal-header { position: sticky; top: -16px; z-index: 2; padding: 8px 0; background: var(--panel); }
:is(.supplier-invoice-dialog,.charges-detail-dialog:has(.account-repayment-detail)) { width: min(420px, calc(100vw - 20px)); font-size: 13px; line-height: 1.4; }
:is(.supplier-invoice-dialog,.charges-detail-dialog:has(.account-repayment-detail)) > .modal-header { padding: 0 0 2px; align-items: flex-start; }
:is(.supplier-invoice-dialog,.charges-detail-dialog:has(.account-repayment-detail)) > .modal-header button { width: 28px; height: 28px; font-size: 21px; }
:is(.supplier-invoice-dialog,.charges-detail-dialog:has(.account-repayment-detail)) .modal-header h2 { margin: 0; font-size: 23px; line-height: 1.2; overflow-wrap: anywhere; }
.supplier-invoice-summary { margin-top: 0; margin-bottom: 10px; }
.supplier-invoice-summary p { margin: 2px 0; overflow-wrap: anywhere; }
.supplier-invoice-summary .supplier-invoice-amount { margin-bottom: 6px; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.supplier-invoice-date, .supplier-invoice-number { font-size: 12px; color: var(--muted); }
.supplier-invoice-document { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.supplier-invoice-document-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; min-width: 0; }
.supplier-invoice-picture { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.supplier-invoice-information { margin-top: 12px; padding: 10px 0 0; }
.supplier-invoice-fields { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 5px 12px; margin: 0; font-size: 12px; }
.supplier-invoice-fields + .supplier-invoice-fields { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.supplier-invoice-fields dt { color: var(--muted); }
.supplier-invoice-fields dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.invoice-detail-section { padding: 12px 0; border-top: 1px solid var(--line); }
.invoice-detail-section h3 { margin: 0 0 8px; font-size: 14px; }
.invoice-detail-section p { margin: 6px 0; overflow-wrap: anywhere; }
.invoice-document-status { font-weight: 700; }
.invoice-record, .invoice-payment { padding: 10px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 8px; }
.invoice-payment details { font-size: 11px; color: var(--muted); }
.invoice-payment summary { cursor: pointer; }
.invoice-warning { color: #865c12; }
.expense-capture-dialog .expense-capture-card, .expense-ledger-dialog .expense-list-card { border: 0; box-shadow: none; padding: 0; background: transparent; }
.expense-capture-dialog { width: min(420px, calc(100vw - 20px)); padding: 14px; }
.expense-capture-dialog > .modal-header { top: -14px; padding: 0 0 8px; }
.expense-capture-dialog .modal-header h2 { font-size: 20px; line-height: 1.3; }
.expense-capture-dialog .modal-header button { width: 32px; height: 32px; font-size: 22px; }
.expense-capture-dialog .expense-capture-card { min-width: 0; gap: 10px; }
.expense-capture-supplier { margin: 0; font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
.expense-capture-supplier:empty { display: none; }
.expense-capture-dialog .invoice-dropzone { position: relative; min-height: 46px; padding: 10px; background: transparent; }
.expense-capture-dialog .invoice-dropzone span { color: var(--green); font-size: 13px; font-weight: 550; text-transform: none; }
.expense-capture-dialog .invoice-dropzone:focus-within { outline: 2px solid var(--green); outline-offset: 2px; }
.expense-capture-dialog .invoice-preview { max-height: 130px; background: transparent; }
.expense-capture-dialog .invoice-no-document:not([hidden]) { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 12px; font-weight: 400; color: var(--muted); cursor: pointer; }
.expense-capture-dialog .invoice-no-document[hidden] { display: none; }
.expense-capture-dialog .invoice-no-document input { flex: 0 0 16px; width: 16px; height: 16px; min-height: 16px; margin: 0; padding: 0; accent-color: var(--green); }
.supplier-invoices-list .invoice-registered.is-no-invoice { color: #865c12; }
.supplier-invoices-list .invoice-registered.is-inventory-movement { color: #b42318; font-size: 18px; font-weight: 800; }
.supplier-inventory-movement-toggle { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 8px 0; cursor: pointer; }
.supplier-inventory-movement-toggle input { position: absolute; right: 0; width: 40px; height: 24px; opacity: 0; margin: 0; cursor: pointer; }
.inventory-movement-switch { flex: 0 0 40px; height: 24px; border-radius: 20px; background: #a4aaa6; padding: 3px; pointer-events: none; }
.inventory-movement-switch::before { content: ''; display: block; width: 18px; height: 18px; border-radius: 50%; background: white; transition: transform .15s; }
.supplier-inventory-movement-toggle input:checked + .inventory-movement-switch { background: var(--green); }
.supplier-inventory-movement-toggle input:checked + .inventory-movement-switch::before { transform: translateX(16px); }
.supplier-inventory-movement-toggle input:focus-visible + .inventory-movement-switch { outline: 2px solid var(--ink); outline-offset: 3px; }
.supplier-inventory-movement-toggle input:disabled + .inventory-movement-switch { opacity: .5; }

.expense-capture-dialog .expense-form { margin: 0; padding: 0; border: 0; background: transparent; gap: 9px 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.expense-capture-dialog .expense-form > * { min-width: 0; }
.expense-capture-dialog .expense-form label { display: block; font-size: 11px; font-weight: 500; line-height: 1.2; }
.expense-capture-dialog .expense-form input, .expense-capture-dialog .expense-form select { display: block; min-width: 0; max-width: 100%; width: 100%; min-height: 36px; margin-top: 4px; padding: 6px 8px; background: #fff; font-size: 16px; font-weight: 400; }
.expense-capture-dialog .expense-date-field, .expense-capture-dialog .expense-payment-field { grid-column: 1 / -1; }
.expense-capture-dialog input[type="date"] { -webkit-appearance: none; appearance: none; box-sizing: border-box; min-inline-size: 0; max-inline-size: 100%; inline-size: 100%; text-align: left; }
.expense-capture-dialog input[type="date"]::-webkit-date-and-time-value { min-width: 0; text-align: left; }
.expense-capture-dialog input[type="date"]::-webkit-datetime-edit { min-width: 0; padding: 0; }
.expense-capture-dialog.is-source-invoice .expense-supplier-field, .expense-capture-dialog.is-source-invoice .expense-category-field, .expense-capture-dialog.is-source-invoice .expense-supplier-add { display: none; }
.expense-capture-dialog .expense-note-field { font-size: 12px; color: var(--muted); }
.expense-capture-dialog .expense-note-field summary { cursor: pointer; padding: 3px 0; }
.expense-capture-dialog .expense-form .primary-action { min-height: 38px; font-size: 14px; font-weight: 650; }
.expense-capture-dialog .account-status { margin: 0; font-size: 12px; overflow-wrap: anywhere; }
.expense-capture-dialog .account-status:empty { display: none; }
.expense-ledger-period { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.expense-ledger-total { margin-bottom: 12px; }
.expense-ledger-dialog .expense-list { margin-top: 12px; }
@media (max-width: 400px) {
  .expense-ledger-dialog .expense-entry { grid-template-columns: minmax(0,1fr); }
}

/* Private, on-demand invoice viewer. */
.invoice-picture-dialog { box-sizing: border-box; width: min(1000px, 96vw); max-width: 96vw; height: 92vh; height: 92dvh; max-height: 96dvh; padding: 12px; overflow: hidden; }
.invoice-picture-dialog[open] { display: flex; flex-direction: column; gap: 8px; }
.invoice-picture-dialog .modal-header { position: static; flex: 0 0 auto; margin: 0; padding: 0; min-width: 0; }
.invoice-picture-dialog .modal-header h2 { font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invoice-picture-toolbar:not([hidden]) { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.invoice-picture-toolbar .compact-action { min-width: 34px; min-height: 34px; padding: 5px 9px; }
#invoicePicturePage { font-size: 12px; white-space: nowrap; }
#invoicePictureStatus { font-size: 13px; margin: 0; }
#invoicePictureStatus:empty { display: none; }
#invoicePictureRetry { align-self: flex-start; }
.invoice-picture-canvas { flex: 1 1 auto; min-height: 0; min-width: 0; overflow: auto; background: #f2f3f2; border-radius: 6px; overscroll-behavior: contain; }
.invoice-picture-canvas img { display: block; width: 100%; max-width: none; height: auto; margin: 0; }
.invoice-picture-canvas iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }

.invoice-delete-button { color: #b42318; background: #fff4f3; border: 1px solid #f5c2bd; border-radius: 7px; cursor: pointer; }
.invoice-information-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.invoice-information-heading h3 { margin: 0; }
.invoice-information-actions > .invoice-delete-button { flex: 0 0 auto; width: 30px; height: 30px; padding: 0; font-size: 23px; line-height: 1; }
.invoice-picture-dialog .modal-header h2 { min-width: 0; }
.invoice-delete-button:disabled { opacity: .5; cursor: wait; }

.invoice-picture-canvas img[role="button"] { cursor: zoom-in; }
.invoice-picture-canvas img[role="button"]:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.invoice-lightbox-dialog { position: fixed; inset: 0; box-sizing: border-box; width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: #000; overflow: hidden; }
.invoice-lightbox-dialog::backdrop { background: #000; }
.invoice-lightbox-dialog .pswp__top-bar { padding-top: env(safe-area-inset-top); padding-right: env(safe-area-inset-right); }

/* VT product breakdown inside the supplier invoice popup. */
.supplier-invoice-products { margin-top: 10px; padding-bottom: 0; }
.invoice-lines-table-wrap { overflow-x: auto; }
.invoice-lines-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.invoice-lines-table th, .invoice-lines-table td { padding: 5px 4px; border-bottom: 1px solid var(--line); text-align: right; vertical-align: top; font-variant-numeric: tabular-nums; }
.invoice-lines-table thead th { background: var(--paper); font-weight: 650; white-space: nowrap; }
.invoice-lines-table th:first-child, .invoice-lines-table td:first-child { text-align: left; }
.invoice-lines-table tbody td:first-child { width: 50%; overflow-wrap: anywhere; }
.invoice-lines-table tbody td:not(:first-child), .invoice-lines-table tfoot td { white-space: nowrap; }
.invoice-lines-table tfoot th, .invoice-lines-table tfoot td { border-top: 1px solid var(--line); font-weight: 750; }

/* All bank panes share the available viewport; navigation and safe areas stay outside the table. */
body.is-app-open:has(#bankScreen.is-active) {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}
body.is-app-open:has(#bankScreen.is-active) .phone-app,
body.is-app-open:has(#bankScreen.is-active) .app-view {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}
body.is-app-open:has(#bankScreen.is-active) .app-view {
  grid-template-rows: auto minmax(0, 1fr) auto;
}
body.is-app-open:has(#bankScreen.is-active) .screen-stack {
  min-height: 0;
  padding-bottom: 8px;
  overflow: hidden;
}
#bankScreen.is-active {
  height: 100%;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
}
#bankScreen .bank-subtabs { margin-bottom: 0; }
:is(#bankInvoicesPanel, #bankMonthlyChargesPanel):not([hidden]) {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  min-height: 0;
  overflow: hidden;
}
:is(#bankInvoicesPanel, #bankMonthlyChargesPanel) .supplier-invoice-actions { margin-bottom: 0; }
:is(#supplierInvoicesContent, #monthlyChargesContent) {
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}
:is(#supplierInvoicesContent, #monthlyChargesContent) .finance-table-wrap {
  height: 100%;
  min-height: 0;
  max-height: none;
}

/* Keep the full bank ID readable alongside the existing mobile columns. */
@media (max-width: 520px) {
  .bank-table { font-size: 11px; }
  .bank-table th, .bank-table td { padding: 5px 4px; }
  .bank-table .bank-id { width: 96px; font-size: 10px; }
  .bank-table .bank-amount { width: 94px; }
}
@media (max-width: 360px) {
  .bank-table .bank-id { width: 64px; white-space: normal; overflow-wrap: normal; }
  .bank-table .bank-amount .inventory-sort { font-size: 10px; }
  .bank-table .bank-amount { width: 88px; }
}

/* Let the device offer its native photo, camera and file choices. */
.expense-capture-dialog .invoice-upload-sources { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.expense-capture-dialog .invoice-upload-sources .invoice-dropzone { min-width: 0; min-height: 50px; padding: 7px 5px; }
.expense-capture-dialog .invoice-upload-sources .invoice-dropzone span { font-size: 12px; line-height: 1.2; }

/* In-app PDF pages render independently of the device's PDF plug-in. */
.invoice-pdf-toolbar { flex: 0 0 auto; min-width: 0; display: grid; gap: 5px; }
.invoice-pdf-filename { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); }
.invoice-pdf-controls { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.invoice-pdf-controls .compact-action { min-width: 32px; min-height: 32px; padding: 4px 7px; }
.invoice-pdf-controls [hidden] { display: none; }
.invoice-pdf-counter { font-size: 12px; font-weight: 650; margin-right: 4px; }
.invoice-picture-canvas .invoice-pdf-page { display: block; width: calc(100% - 16px); height: auto; margin: 8px; max-width: none; background: #fff; }
.invoice-pdf-password { display: grid; gap: 12px; max-width: 300px; margin: 20px auto; padding: 12px; }
.invoice-pdf-password input { display: block; width: 100%; margin-top: 8px; font-size: 16px; }

/* Monthly charge register: the same compact supplier table, with no guessed amounts. */
.bank-subtabs { grid-template-columns: 1fr 1.6fr .9fr 1.1fr; }
.monthly-charges-list th:first-child { width: 22%; }
.monthly-charges-list th:nth-child(2) { width: calc(55% - 28px); }
.monthly-charges-list th.invoice-amount { width: 23%; }

.monthly-charges-list tr[data-monthly-charge] { cursor: pointer; }
.monthly-charges-list tr[data-monthly-charge]:hover td { background: var(--green-soft); }
.monthly-charges-list tr[data-monthly-charge]:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }

/* Add a single planned row without changing the shared filter/table sizing. */
.monthly-charge-description { grid-column: 1 / -1; }
.monthly-charges-list td:nth-child(2) { overflow-wrap: anywhere; }
#monthlyChargeAddStatus:empty { display: none; }

#monthlyChargeAddForm [hidden] { display: none; }

.monthly-charge-delete-actions { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); text-align: right; }
.monthly-charge-delete-actions .compact-action { color: #b42318; }
.monthly-charge-delete { width: 100%; padding: 10px 14px; border: 1px solid #b42318; border-radius: 8px; background: #b42318; color: white; font: inherit; font-weight: 700; cursor: pointer; }
.monthly-charge-delete:hover { background: #912018; }
.monthly-charge-delete:focus-visible { outline: 3px solid #f5c2bd; outline-offset: 2px; }
.monthly-charge-delete:disabled { opacity: .5; cursor: wait; }

.monthly-charge-bank-source { margin-top: 0; }
.monthly-charge-bank-source h3 { font-size: 1rem; margin: 0 0 10px; }
.monthly-charge-bank-source details summary { cursor: pointer; font-weight: 700; }
.monthly-charge-bank-source ul { list-style: none; padding: 0; margin: 10px 0 0; }
.monthly-charge-bank-source li { border-top: 1px solid var(--border, #dce4dd); padding: 12px 0; overflow-wrap: anywhere; }
.monthly-charge-bank-source li p { margin: 5px 0; }
.monthly-charge-bank-source small { color: var(--muted, #66756b); }

/* Compact cash ledger, matching Banque. */
.bank-subtabs { grid-template-columns: repeat(5, auto); }
.supplier-account-table tr[data-supplier-account-key] { cursor: pointer; }
.supplier-account-table tr[data-supplier-account-key]:hover td { background: var(--green-soft); }
.supplier-account-table tr[data-supplier-account-key]:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
#bankSupplierAccountsPanel .bank-table-wrap { max-height: calc(100dvh - var(--nav-height) - 235px); }
.cash-table tr[data-cash-key] { cursor: pointer; }
.cash-table tr[data-cash-key]:hover td { background: var(--green-soft); }
.cash-table tr[data-cash-key]:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
/* Allow the existing date/suffix break on every mobile browser. The shared
   Banque nowrap rule otherwise lets IDs paint over Recon on iOS. */
.cash-table .bank-id { width: 110px; white-space: normal; }
@media(max-width:520px) { .cash-table .bank-id { width: 90px; } }
@media(max-width:360px) { .cash-table .bank-id { width: 63px; } }

/* Banque and Espèces have only their balance above the transactions. */
#bankTransactionsPanel .bank-table-wrap, #bankCashPanel .bank-table-wrap { max-height: calc(100dvh - var(--nav-height) - 185px); }

.supplier-invoice-method { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.invoice-payment-select { max-width: 100%; padding: 6px; border: 1px solid var(--line); border-radius: 6px; background: white; font: inherit; color: var(--ink); }

/* Non-blocking invoice outbox, above navigation and within the phone safe area. */
.invoice-upload-queue { position: fixed; z-index: 35; bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 10px); right: max(10px, env(safe-area-inset-right)); width: min(340px, calc(100vw - 20px)); border: 1px solid var(--line); border-radius: 12px; background: white; color: var(--ink); box-shadow: 0 5px 24px #16221b30; font-size: 12px; overflow: hidden; }
.invoice-upload-queue[hidden], .invoice-queue-content[hidden] { display: none; }
.invoice-queue-heading { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 40px; padding: 8px 12px; border: 0; background: #edf4f0; color: var(--green); text-align: left; font: inherit; cursor: pointer; }
.invoice-queue-content { max-height: min(350px, 45dvh); padding: 0 12px 10px; overflow-y: auto; overscroll-behavior: contain; }
.invoice-queue-note { margin: 8px 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.invoice-queue-item { display: grid; gap: 3px; padding: 9px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.invoice-queue-item small { color: var(--muted); }
.invoice-queue-item progress { width: 100%; height: 8px; accent-color: var(--green); }
.invoice-queue-item p { margin: 3px 0; font-size: 11px; color: var(--red); }
.invoice-queue-state { font-size: 11px; }
.invoice-queue-actions { display: flex; gap: 8px; }
.invoice-queue-actions button { padding: 4px 8px; min-height: 30px; background: white; color: var(--green); border: 1px solid var(--line); border-radius: 5px; font: inherit; font-size: 11px; cursor: pointer; }

/* Imported bank balance stays separate from unmatched expected debits. */
.bank-dual-balance { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.bank-dual-balance strong { overflow-wrap: anywhere; }
.bank-book-summary, .bank-projected-summary { display: grid; min-width: 0; }
.bank-projected-summary { justify-items: end; text-align: right; }
.bank-book-summary small, .bank-projected-summary small { font-size: 10px; }
.bank-coming-heading th { position: static; color: #856017; background: #fff4d9; font-size: 11px; padding-block: 2.5px; }
.bank-table .bank-coming-row td { background: #fffaf0; }
.bank-coming-row { cursor: pointer; }
.bank-coming-row:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.coming-badge { color: #856017; font-weight: 750; font-size: 10px; }
.payment-connection { margin: 8px 0; font-size: 12px; }
.payment-connection small { display: inline-block; color: var(--muted); font-size: 11px; }

/* Temporary Supplier rows stay above imported VT, distinct from bank Coming. */
.supplier-invoices-list .supplier-temporary-heading th { position: static; color: #215a79; background: #e6f2f9; padding-block: 5px; text-align: left; }
.supplier-invoices-list .supplier-vt-heading th { position: static; text-align: left; color: var(--muted); background: var(--panel); }
.supplier-invoices-list .supplier-temporary-row td { background: #f1f8fc; }
.supplier-invoices-list .supplier-temporary-row:hover td { background: #e2f0f8; }
.temporary-invoice-note { color: #215a79; background: #e6f2f9; padding: 7px 9px; border-radius: 6px; font-size: 12px; }
#temporaryInvoiceForm datalist { display: none; }

/* Size ledgers from the actual header, controls and safe-area-aware navigation,
   not a fixed pixel estimate. This keeps the final row above the bottom bar. */
:is(#bankTransactionsPanel, #bankCashPanel, #bankSupplierAccountsPanel):not([hidden]) {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}
#bankSupplierAccountsPanel:not([hidden]) {
  grid-template-rows: auto auto minmax(0, 1fr);
}
#bankTransactionsPanel:not([hidden]) { grid-template-rows: auto auto minmax(0, 1fr); }
.bank-filters { display: flex; flex-wrap: nowrap; align-items: center; width: 100%; min-width: 0; gap: 3px; margin-bottom: 8px; }
.bank-filter-group, .bank-filter-options { display: inline-flex; flex: 1 1 auto; min-width: 0; }
.bank-filters button { flex: 1 1 auto; min-width: 0; min-height: 32px; padding: 4px 1px; border: 1px solid var(--line); border-radius: 6px; background: white; color: var(--green); font: inherit; font-size: 9px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.bank-filter-options button:not(:first-child) { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.bank-filter-options button:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.bank-filters button.is-active, .bank-filters button:focus-visible { position: relative; }
@media (min-width: 360px) { .bank-filters button { font-size: 9.9px; } }
@media (min-width: 390px) { .bank-filters button { font-size: 10.8px; } }
.bank-filters button.is-active { border-color: var(--green); background: var(--green); color: white; }
.bank-filters button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.bank-filters button:disabled { opacity: .5; cursor: default; }
#bankTransactionsPanel .bank-table .bank-id { width: 80px; white-space: nowrap; }
.bank-cheque-number { display: block; font-weight: 700; white-space: normal; overflow-wrap: anywhere; }
.bank-cheque-detail { margin-top: 2px; }
.bank-group-open { margin-top: 16px; }
.bank-debit-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.bank-unassigned { color: var(--red); }
.bank-manual-note { display: block; overflow-wrap: anywhere; color: #b85c00; }
.bank-manual-note-form { display: grid; gap: 10px; margin-top: 16px; }
.bank-manual-note-form[hidden] { display: none; }
.bank-manual-note-form label { font-size: 12px; font-weight: 650; }
.bank-manual-note-form input { box-sizing: border-box; width: 100%; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 16px; }
.bank-invoice-group-dialog { width: min(520px, calc(100% - 24px)); max-height: min(660px, calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); padding: 12px; overflow: hidden; }
.bank-invoice-group-dialog[open] { display: flex; flex-direction: column; }
.bank-invoice-group-dialog > :not(.bank-group-choices) { flex-shrink: 0; }
.bank-invoice-group-dialog .modal-header { align-items: center; gap: 8px; }
.bank-invoice-group-dialog .modal-header h2 { font-size: 16px; line-height: 1.25; }
.bank-invoice-group-dialog .modal-header button { width: 28px; height: 28px; padding: 0; font-size: 21px; }
#bankInvoiceGroupBank { margin: 4px 0 8px; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.bank-group-search { display: grid; gap: 4px; margin: 0 0 8px; color: var(--muted); font-size: 11px; }
.bank-group-search input { width: 100%; min-width: 0; min-height: 36px; height: 36px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; font: inherit; font-size: 16px; font-weight: 400; color: var(--ink); background: white; }
.bank-group-choices { flex: 1 1 auto; min-height: 0; max-height: 48dvh; overflow: auto; overscroll-behavior: contain; border-block: 1px solid var(--line); }
.bank-group-choice { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; column-gap: 8px; row-gap: 0; align-items: center; min-height: 48px; padding: 7px 2px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 650; line-height: 1.25; cursor: pointer; }
.bank-group-choice:last-child { border-bottom: 0; }
.bank-group-choice input[type="checkbox"] { appearance: auto; width: 18px; min-width: 18px; max-width: 18px; height: 18px; min-height: 18px; margin: 0; padding: 0; justify-self: start; accent-color: var(--green); }
.bank-group-choice:has(input:checked) { background: var(--green-soft); }
.bank-group-choice:focus-within { outline: 2px solid var(--green); outline-offset: -2px; }
.bank-group-choice span { min-width: 0; overflow-wrap: anywhere; }
.bank-group-choice small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; font-weight: 500; }
.bank-group-choice strong { white-space: nowrap; font-size: 11px; font-variant-numeric: tabular-nums; }
.bank-group-footer { padding-top: 8px; }
.bank-group-total { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.bank-group-footer p { margin: 5px 0; font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.bank-group-footer p:empty { display: none; }
.bank-group-footer .is-debit, .bank-group-warning { color: var(--red); }
#bankInvoiceGroupStatus { color: var(--red); }
.bank-group-footer .is-credit { color: var(--green); }
.bank-group-footer .primary-action { width: 100%; min-height: 38px; margin-top: 3px; font-size: 13px; }
.bank-group-footer .primary-action:disabled { opacity: .45; cursor: not-allowed; }
:is(#bankTransactionsPanel, #bankCashPanel, #bankSupplierAccountsPanel) .bank-table-wrap {
  min-height: 0;
  max-height: none;
}

/* Optional cheque reference, placed directly beneath its payment selector. */
.invoice-cheque-field{margin:8px 0 12px;max-width:100%}
.invoice-cheque-field label{display:block;font-size:.85rem;margin-bottom:5px}
.invoice-cheque-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.invoice-cheque-controls input{min-width:0;flex:1 1 140px;max-width:100%;padding:8px;border:1px solid #ccd5d2;border-radius:6px;font:inherit}
.expense-cheque-field{grid-column:1/-1}
.expense-cheque-field[hidden]{display:none!important}

/* Archived off-account operations are collapsed beneath the real bank entries. */
.bank-archived-heading th{position:static;background:#eceff0;color:#60676b;font-size:11px;padding-block:5px}
#bankComingToggle,#bankArchivesToggle{display:block;width:100%;min-height:30px;padding:3px 0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
#bankComingToggle:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.bank-table .bank-archived-row td{background:#f0f1f2;color:#697075}
.bank-archived-row .finance-link,.bank-archived-row .bank-amount{color:#697075}
.bank-archive-note{display:block;margin-top:2px;font-size:10px;line-height:1.25;white-space:normal;overflow-wrap:anywhere}

/* Shared supplier / shop customer account ledger. */
.account-context:not(:empty) { margin: 0 0 8px; }
#bankSupplierAccountsPanel:not([hidden]) { grid-template-rows: auto auto auto minmax(0, 1fr); }
#bankSupplierAccountsPanel .bank-table-wrap { grid-row: 4; }
.account-context:empty { display: none; }
.supplier-account-table .account-movement-label { white-space: normal; overflow-wrap: anywhere; min-width: 90px; }

/* Saved invoice metadata editor; its photo and VT source stay attached. */
.invoice-information-heading h3 { min-width: 0; }
.invoice-information-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.invoice-information-actions .invoice-edit-button { min-height: 30px; padding: 4px 6px; font-size: 11px; }
.supplier-invoice-fields .finance-link { max-width: 100%; margin-left: auto; padding: 0; text-align: right; white-space: normal; overflow-wrap: anywhere; }
.supplier-invoice-edit-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.supplier-invoice-edit-form label { display: grid; min-width: 0; gap: 4px; font-size: 12px; font-weight: 650; }
.supplier-invoice-edit-form input, .supplier-invoice-edit-form select { display: block; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; min-height: 38px; padding: 7px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 16px; background: var(--surface, #fff); color: var(--ink); }
.supplier-invoice-edit-form input[type="date"] { appearance: none; -webkit-appearance: none; }
.invoice-edit-wide { grid-column: 1 / -1; }
.supplier-invoice-edit-form [hidden] { display: none; }
.invoice-edit-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.invoice-edit-actions .primary-action { width: auto; }
@media (max-width: 400px) {
  .supplier-invoice-edit-form label { grid-column: 1 / -1; }
}

/* Account cumul stays tied to chronology, independently of display sorting. */
.supplier-account-table th:first-child { width: 100px; }
.supplier-account-table th:first-child,
.supplier-account-table td:first-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.supplier-account-table .bank-amount { width: 110px; }
.supplier-account-table .account-running-total { width: 120px; }
.supplier-account-table .account-running-total.account-balance-reference { color: #1f6b45; background-color: #e6f4ea; }
.supplier-account-table .account-calibration { width: 120px; }
.account-heading-short { display: none; }
.supplier-account-table td.account-calibration.has-checkpoint { background: #e6f4ea; }
.account-calibration-value { display: inline; width: auto; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; color: #1f6b45; font: inherit; font-weight: 750; text-align: right; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
/* Temporary invoices share the invoice detail style, with a compact linking panel. */
.is-temporary-invoice { padding: 12px; }
#supplierInvoiceDialog.is-temporary-invoice[open] { display: flex; flex-direction: column; overflow: hidden; }
#supplierInvoiceDialog.is-temporary-invoice > .modal-header { position: static; flex: 0 0 auto; margin: 0; padding: 0 0 6px; }
#supplierInvoiceDialog.is-temporary-invoice > #supplierInvoiceBody { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
#supplierInvoiceDialog.is-temporary-invoice .modal-header h2 { font-size: 18px; }
.is-temporary-invoice .supplier-invoice-summary { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 8px; }
.is-temporary-invoice .supplier-invoice-summary p { margin: 0; }
.is-temporary-invoice .supplier-invoice-summary .supplier-invoice-number { display: none; }
.is-temporary-invoice .supplier-invoice-summary .charges-note { flex-basis: 100%; }
.temporary-invoice-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.temporary-invoice-toolbar .temporary-invoice-note { margin: 0; padding: 4px 6px; font-size: 11px; line-height: 1.35; }
.temporary-invoice-toolbar button { flex: 0 0 auto; min-height: 28px; padding: 3px 7px; font-size: 11px; color: var(--muted); }
.is-temporary-invoice #supplierInvoiceMethodStatus:empty,
.is-temporary-invoice #temporaryInvoiceLinkStatus:empty { display: none; }
.is-temporary-invoice .supplier-invoice-document { padding-top: 8px; gap: 8px; font-size: 12px; }
.is-temporary-invoice .supplier-invoice-picture { min-height: 28px; padding: 4px 8px; font-size: 11px; }
.is-temporary-invoice .invoice-detail-section { margin-top: 8px; padding: 8px 0 0; }
.is-temporary-invoice .invoice-detail-section h3 { font-size: 12px; }
.is-temporary-invoice .invoice-information-heading { gap: 6px; margin-bottom: 6px; }
.is-temporary-invoice .supplier-invoice-fields { gap: 3px 10px; font-size: 12px; }
.is-temporary-invoice .payment-connection { margin: 8px 0 0; font-size: 11px; line-height: 1.35; }
.is-temporary-invoice .payment-connection small { font-size: 10px; }
.temporary-invoice-link-search { display: block; margin: 0; }
.temporary-invoice-link-search input { display: block; box-sizing: border-box; min-width: 0; width: 100%; height: 36px; min-height: 36px; padding: 6px 8px; font: inherit; font-size: 16px; font-weight: 400; }
.temporary-invoice-link-search input::placeholder { font-size: 12px; }
.temporary-invoice-link-options { min-width: 0; margin: 6px 0 0; padding: 0; border: 0; }
.temporary-invoice-link-list { max-height: min(184px, 28dvh); overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 6px; }
.temporary-invoice-link-choice { display: grid; grid-template-columns: 16px minmax(0,1fr) auto; column-gap: 8px; align-items: center; min-height: 44px; padding: 6px 8px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 12px; font-weight: 400; line-height: 1.3; }
.temporary-invoice-link-choice:last-child { border-bottom: 0; }
.temporary-invoice-link-choice:has(:checked) { background: var(--green-soft); }
.temporary-invoice-link-choice:has(:focus-visible) { outline: 2px solid var(--green); outline-offset: -2px; }
.temporary-invoice-link-choice:has(:disabled) { opacity: .6; cursor: default; }
.temporary-invoice-link-choice input[type="radio"] { appearance: auto; box-sizing: border-box; width: 16px; min-width: 16px; max-width: 16px; height: 16px; min-height: 16px; max-height: 16px; margin: 0; padding: 0; accent-color: var(--green); }
.temporary-invoice-link-identity { min-width: 0; }
.temporary-invoice-link-choice strong { display: block; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.temporary-invoice-link-facts { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.temporary-invoice-link-choice small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.temporary-invoice-link-amount { white-space: nowrap; text-align: right; font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; }
.temporary-invoice-link-confirm { margin-top: 8px; }
.temporary-invoice-link-confirm button { width: 100%; min-height: 34px; padding: 6px 10px; font-size: 12px; color: #fff; background: var(--green); border-color: var(--green); }
.account-calibration-value:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
@media (max-width: 520px) {
  .account-movement-heading .account-heading-full { display: none; }
  .account-movement-heading .account-heading-short { display: inline; }
  .supplier-account-table { font-size: 10px; }
  .supplier-account-table th:first-child { width: 58px; }
  .supplier-account-table td:first-child { white-space: nowrap; font-size: 9px; }
  .supplier-account-table th { font-size: 9px; }
  .supplier-account-table .account-movement-label { min-width: 0; }
  .supplier-account-table .bank-amount { width: 54px; }
  .supplier-account-table .account-running-total { width: 66px; }
  .supplier-account-table .account-calibration { width: 64px; }
  .supplier-account-table .inventory-sort { font-size: 9px; }
}

/* Compact pending-operation detail; keep shared finance dialogs unchanged. */
#chargeDetailDialog:has(.pending-operation) { width: min(460px, calc(100% - 24px)); max-height: calc(100dvh - 32px); padding: 12px; overflow: hidden; }
#chargeDetailDialog[open]:has(.pending-operation) { display: flex; flex-direction: column; gap: 10px; }
#chargeDetailDialog:has(.pending-operation) .modal-header { flex: 0 0 auto; align-items: center; gap: 8px; }
#chargeDetailDialog:has(.pending-operation) .modal-header h2 { font-size: 16px; line-height: 1.25; }
#chargeDetailDialog:has(.pending-operation) .modal-header button { width: 32px; height: 32px; padding: 0; font-size: 22px; }
#chargeDetailDialog:has(.pending-operation) #chargeDetailBody { min-height: 0; overflow: auto; overscroll-behavior: contain; }
.pending-operation { min-width: 0; font-size: 12px; line-height: 1.4; }
.pending-operation-summary { display: grid; gap: 5px; }
.pending-operation-source { font-size: 14px; overflow-wrap: anywhere; }
.pending-operation-facts { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; font-variant-numeric: tabular-nums; }
.pending-operation-method { font-size: 11px; color: var(--muted); }
.pending-operation-actions { display: flex; justify-content: flex-start; margin-top: 10px; }
.pending-operation .compact-action { min-height: 32px; padding: 5px 10px; font-size: 12px; }
.pending-operation p:empty { display: none; }
.pending-bank-suggestions { min-width: 0; margin: 12px 0 0; padding: 8px; border: 1px solid var(--line); border-radius: 8px; }
.pending-bank-suggestions legend { font-size: 12px; font-weight: 700; padding: 0 4px; }
.pending-operation .pending-bank-suggestions > .charges-note { margin: 2px 0 8px; font-size: 11px; line-height: 1.4; }
.pending-bank-choice { display: grid; margin: 6px 0; padding: 8px; border: 1px solid var(--line); border-radius: 6px; overflow-wrap: anywhere; }
.pending-bank-choice:has(input:checked) { border-color: var(--green); background: #edf6ef; }
.pending-bank-choice label { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 8px; align-items: start; cursor: pointer; }
.pending-bank-choice input[type="radio"] { box-sizing: border-box; width: 18px; height: 18px; min-width: 18px; min-height: 18px; margin: 1px 0 0; padding: 0; accent-color: var(--green); }
.pending-bank-details { min-width: 0; }
.pending-bank-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 3px 8px; }
.pending-bank-choice label strong { font-size: 12px; line-height: 1.4; }
.pending-bank-choice label small { display: block; margin-top: 3px; font-size: 11px; line-height: 1.35; }
.pending-bank-reference { color: var(--muted); }
.pending-bank-amount { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pending-bank-choice > .finance-link { justify-self: end; display: inline-flex; align-items: center; min-height: 28px; padding: 2px 4px; margin-top: 2px; font-size: 12px; }
.pending-bank-choice:has(input:disabled) { opacity: .7; }
.pending-bank-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.pending-operation .pending-bank-footer .charges-note { margin: 0; font-size: 11px; line-height: 1.35; }
.pending-bank-footer .primary-action { flex: 0 0 auto; width: auto; min-height: 34px; margin: 0; padding: 6px 12px; font-size: 12px; }
.pending-bank-footer .primary-action:disabled { opacity: .45; cursor: not-allowed; }
.pending-bank-suggestions [data-pending-status] { margin: 8px 0 0; font-size: 12px; overflow-wrap: anywhere; }

/* Uncertain past operations remain actionable without reducing available funds. */
.bank-reconciling-heading th { position: static; color: #46627b; background: #e6eef6; font-size: 11px; padding-block: 2.5px; }
#bankReconcilingToggle { display: block; width: 100%; min-height: 30px; padding: 3px 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
#bankReconcilingToggle:focus-visible, #bankArchivesToggle:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.bank-table .bank-reconciling-row td, .bank-table .bank-reconciling-empty td { background: #f2f6fb; }
.bank-table .bank-reconciling-empty td { color: #526a80; font-size: 10px; white-space: normal; padding-block: 8px; }
.bank-classification-button { display: block; min-height: 28px; max-width: 100%; margin-top: 4px; padding: 3px 6px; border: 1px solid #c4cdd2; border-radius: 5px; background: rgba(255,255,255,.8); color: #46627b; font: inherit; font-size: 10px; line-height: 1.25; white-space: normal; cursor: pointer; }
.bank-classification-button:disabled { opacity: .6; cursor: wait; }
.bank-classification-status { display: block; white-space: normal; overflow-wrap: anywhere; font-size: 10px; }
.pending-operation-actions { align-items: center; flex-wrap: wrap; gap: 8px; }
.pending-operation-actions .bank-classification-button { margin: 0; min-height: 32px; font-size: 12px; }
.pending-operation-actions .bank-classification-status:empty { display: none; }

/* Planning estimates are not pending bank debits. */
.bank-preparing-heading th { position: static; color: #68527f; background: #eee8f5; font-size: 11px; padding-block: 2.5px; }
#bankPreparingToggle { width: 100%; min-height: 30px; padding: 3px 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
#bankPreparingToggle:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
#bankPreparingToggle.bank-section-toggle, #bankComingToggle.bank-section-toggle, #bankReconcilingToggle.bank-section-toggle { display: flex; min-height: 24px; padding: 1px 0; line-height: 1.1; align-items: center; justify-content: space-between; gap: 6px; }
.bank-section-title { min-width: 0; white-space: normal; }
.bank-section-total { flex: 0 0 auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bank-section-total small { display: block; margin-top: 3px; font-size: 9px; text-align: right; }
.bank-table .bank-preparing-row td, .bank-table .bank-preparing-empty td { background: #f8f5fc; color: #68527f; }
.bank-table .bank-customer-account-row td.is-credit { color: var(--green); }
.bank-preparing-row { cursor: pointer; }
.bank-preparing-note { display: block; font-size: 9px; color: #79678d; }
.bank-table .bank-preparing-empty td { white-space: normal; font-size: 10px; }
.bank-preparation-history { padding-left: 18px; overflow-wrap: anywhere; }
.bank-preparation-history li { margin-bottom: 6px; }

/* Shared multi-payment editor; scoped so existing form controls stay intact. */
.split-payment-editor { min-width:0; grid-column:1/-1; }
.split-payment-editor [hidden] { display:none!important; }
.split-payment-heading { font-weight:700; margin-bottom:8px; }
.split-payment-heading small,.split-payment-summary small { display:block; font-size:.78rem; color:var(--muted,#64748b); font-weight:400; }
.split-payment-row { min-width:0; margin:0 0 10px; padding:10px; border:1px solid #d7e2e9; border-radius:9px; }
.split-payment-row legend { padding:0 4px; font-weight:600; font-size:.85rem; }
.split-payment-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; }
.split-payment-row label { display:flex; flex-direction:column; gap:4px; min-width:0; font-size:.8rem; }
.split-payment-editor input,.split-payment-editor select { width:100%; min-width:0; max-width:100%; box-sizing:border-box; min-height:40px; padding:8px; font-size:.85rem; }
.split-reuse-label { margin-top:8px; }
.split-reuse-note { font-size:.76rem; margin:5px 0; color:#526476; }
.split-payment-row .split-remove { margin-top:8px; min-height:36px; }
.split-total { font-size:.85rem; font-weight:600; margin:8px 0; }
.split-invalid { color:#a53824; }
.split-payment-actions .compact-action,.split-add { width:100%; min-height:44px; white-space:normal; }
.split-payment-summary p { margin:4px 0 8px; }
#expenseForm > label[hidden],#supplierInvoiceEditForm > label[hidden] { display:none!important; }
.supplier-invoice-edit-form .split-payment-grid > label { grid-column:auto; }
.split-payment-grid > label:has(input[type="date"]),
.supplier-invoice-edit-form .split-payment-grid > label:has(input[type="date"]) { grid-column:1/-1; }

/* iOS must not auto-zoom focused form controls; retain pinch-to-zoom. */
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  body select, body textarea { font-size: 16px !important; }
}

.header-tools { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.analysis-link { text-decoration: none; }
.analysis-link:hover { background: var(--soft, #edf3e8); }

/* Cash running balances share the ledger's signs, without narrowing other bank tables. */
.cash-table .cash-running-total { width: 120px; }
@media (max-width: 520px) {
  .cash-table .bank-id { width: 64px; }
  .cash-table .bank-amount { width: 88px; }
  .cash-table .cash-running-total { width: 100px; }
  .cash-table th { font-size: 10px; }
  .cash-table .inventory-sort { font-size: 10px; }
}
@media (max-width: 360px) {
  .cash-table { font-size: 10px; }
  .cash-table .bank-id { width: 64px; }
  .cash-table .bank-amount { width: 80px; }
  .cash-table .cash-running-total { width: 91px; }
  .cash-table th, .cash-table .inventory-sort { font-size: 9px; }
}

.bank-classification-control { min-width: 0; max-width: 100%; }
.bank-classification-control label { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; }
.bank-classification-select { width: auto; max-width: 100%; min-height: 36px; padding: 5px 28px 5px 8px; border: 1px solid #c4cdd2; border-radius: 5px; color: #46627b; background-color: #fff; font: inherit; font-size: 16px; }
.bank-classification-select:disabled { opacity: .6; }

.salary-download-row { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.salary-download-row .salary-employee-selector { flex: 1 1 150px; min-width: 0; }
.salary-download-row #salaryPdfDownload { flex: 0 0 auto; min-height: 34px; }