/* Shared visual system applied after the existing section styles. */
:root {
  --ui-ink: #1c2b24;
  --ui-muted: #66766d;
  --ui-line: #e1e8e3;
  --ui-line-strong: #d2ddd6;
  --ui-bg: #f5f7f5;
  --ui-surface: #fff;
  --ui-surface-soft: #f8faf8;
  --ui-primary: var(--user-accent, #176b50);
  --ui-primary-soft: #eaf4ee;
  --ui-danger: #b84949;
  --ui-warning: #a66d1e;
  --ui-success: #23764e;
  --ui-radius-sm: 7px;
  --ui-radius-md: 11px;
  --ui-radius-lg: 14px;
  --ui-shadow-sm: 0 2px 8px rgba(26, 48, 34, .045);
  --ui-shadow-md: 0 8px 22px rgba(26, 48, 34, .07);
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-6: 24px;
  --ui-space-8: 32px;
  --ink: var(--ui-ink);
  --muted: var(--ui-muted);
  --line: var(--ui-line);
  --bg: var(--ui-bg);
  --green: var(--ui-primary);
  --pale: var(--ui-primary-soft);
  --gold: var(--ui-warning);
  --red: var(--ui-danger);
  --shadow: var(--ui-shadow-md);
}

html { color-scheme: light; }
body {
  background: var(--ui-bg);
  background-image: none;
  color: var(--ui-ink);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.shell, .main, .content { min-width: 0; }
.main { background: transparent; }
.content { max-width: 1560px; padding-block: 24px 48px; }

/* Page headings */
.content > .heading,
.content > .fin-heading,
.content > .partner-heading {
  gap: var(--ui-space-4);
  margin-bottom: var(--ui-space-6);
  padding: 18px 20px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-sm);
}
.content > .heading::after,
.content > .fin-heading::after,
.content > .partner-heading::after { display: none; }
.content > .heading h1,
.content > .fin-heading h1,
.content > .partner-heading h1 {
  color: var(--ui-ink);
  font-size: clamp(22px, 1.8vw, 27px);
  line-height: 1.35;
  letter-spacing: 0;
}
.content > .heading .sub,
.content > .fin-heading p,
.content > .partner-heading p {
  color: var(--ui-muted);
  font-size: 13px;
  line-height: 1.65;
}
.crumb { color: var(--ui-muted); }

/* Shared cards, panels, summaries and filters */
.stat, .fin-card, .cash-stat, .partner-stat,
.table-wrap, .fin-table-card, .cash-ledger, .partner-ledger-card,
.panel, .settings-panel, .barari-person, .barari-delivery-card,
.overview-panel, .overview-stats article, .reminder-bar, .settings-intro, .souq-carry-card {
  border-color: var(--ui-line);
  border-radius: var(--ui-radius-md);
  box-shadow: var(--ui-shadow-sm);
}
.stat, .fin-card, .cash-stat, .partner-stat {
  background: var(--ui-surface);
  padding: 16px 18px;
}
.stat:hover, .fin-card:hover, .cash-stat:hover, .partner-stat:hover {
  transform: translateY(-1px);
  box-shadow: var(--ui-shadow-md);
}
#stats .stat { border-radius: var(--ui-radius-md); background: var(--ui-surface); box-shadow: var(--ui-shadow-sm); }
#stats .stat:hover { transform: translateY(-1px); box-shadow: var(--ui-shadow-md); }
.filters, .partner-filters, .fin-filters {
  gap: var(--ui-space-2);
  padding: var(--ui-space-3);
  border-color: var(--ui-line);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
  box-shadow: none;
  backdrop-filter: none;
}
.panel, .settings-panel { margin-bottom: var(--ui-space-4); }
.panel-title, .table-head {
  min-height: 50px;
  padding: 13px 16px;
  border-color: var(--ui-line);
  background: var(--ui-surface-soft);
}
.panel-title, .table-head strong, .settings-panel h2 { color: var(--ui-ink); }

/* Buttons and controls */
.btn, .iconbtn, .back, .filter-chip, .close, .visual-sound-toggle {
  border-radius: var(--ui-radius-sm);
  transition: color .16s ease, background-color .16s ease, border-color .16s ease,
    box-shadow .16s ease, transform .16s ease;
}
.btn {
  min-height: 38px;
  padding: 8px 13px;
  border-color: var(--ui-line-strong);
  background: var(--ui-surface);
  color: var(--ui-ink);
  box-shadow: none;
  font-size: 13px;
  font-weight: 600;
}
.btn:hover {
  border-color: #b8c9be;
  background: var(--ui-surface-soft);
  box-shadow: var(--ui-shadow-sm);
  transform: translateY(-1px);
}
.btn.primary, .barari-tabs .btn.primary {
  border-color: var(--ui-primary);
  background: var(--ui-primary);
  color: #fff;
  box-shadow: 0 3px 9px color-mix(in srgb, var(--ui-primary), transparent 84%);
}
.btn.primary:hover, .barari-tabs .btn.primary:hover {
  border-color: color-mix(in srgb, var(--ui-primary), #000 12%);
  background: color-mix(in srgb, var(--ui-primary), #000 8%);
}
.btn.danger, .iconbtn.partner-remove, .iconbtn.danger, .fin-delete { color: var(--ui-danger); }
.control, input.control, select.control, textarea.control,
.formfield input, .formfield select, .formfield textarea {
  min-height: 39px;
  min-width: 0;
  border: 1px solid var(--ui-line-strong);
  border-radius: var(--ui-radius-sm);
  background-color: var(--ui-surface);
  color: var(--ui-ink);
  box-shadow: none;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.control:focus, input.control:focus, select.control:focus, textarea.control:focus,
.formfield input:focus, .formfield select:focus, .formfield textarea:focus {
  border-color: color-mix(in srgb, var(--ui-primary), white 22%);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary), transparent 86%);
}
.formfield label, .field-label { color: #43534a; font-size: 12px; font-weight: 600; }
.hint, .settings-note, .partner-hint, .fin-hint { color: var(--ui-muted); }
:focus-visible { outline: 2px solid color-mix(in srgb, var(--ui-primary), white 15%); outline-offset: 2px; }

/* Tables use one compact, readable rhythm while keeping their own scroll wrappers. */
.table-wrap, .partner-table-scroll, .fin-table-scroll, .partner-modal-table {
  max-width: 100%;
  overscroll-behavior: contain;
}
.table-wrap, .fin-table-card, .cash-ledger, .partner-ledger-card { overflow: hidden; }
table { font-variant-numeric: tabular-nums; }
th, .partner-table th, .fin-table th {
  padding: 11px 12px;
  border-color: var(--ui-line);
  background: #f5f8f6;
  color: #526359;
  font-size: 12px;
  font-weight: 650;
}
td, .partner-table td, .fin-table td {
  padding: 11px 12px;
  border-bottom-color: #edf1ee;
  color: #34443a;
  font-size: 13px;
}
tbody tr:nth-child(even) { background-color: #fbfcfb; }
tbody tr:hover { background: #f2f7f3; }
.row-actions { gap: 6px; }
.iconbtn { min-height: 31px; padding: 5px 8px; border-color: var(--ui-line-strong); color: #4d5d53; }
.iconbtn:hover { border-color: #b8c9be; background: #f6faf7; transform: translateY(-1px); }

/* Semantic status colors stay stable throughout the system. */
.badge { border-radius: 999px; font-size: 11px; font-weight: 650; }
.badge.active, .badge.done { color: #216b46; background: #eaf5ee; }
.badge.late, .badge.legal { color: #a7443e; background: #fff0ed; }
.badge.stopped { color: #59665e; background: #eef1ef; }
.cash-stat.in, .cash-income > header, .cash-income-card > header { background: #f1f8f3; }
.cash-stat.out, .cash-withdraw > header { background: #fff5f3; }
.cash-stat.net { background: #f3f6f9; }

/* Dialogs, notifications, and feedback */
.modal-back { z-index: 20; padding: 18px; background: rgba(20, 33, 26, .48); backdrop-filter: blur(3px); }
.modal {
  width: min(680px, 100%);
  max-height: min(92dvh, 900px);
  overflow: auto;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: 0 20px 55px rgba(20, 36, 25, .18);
}
.modal-title, .modal-foot { background: var(--ui-surface-soft); border-color: var(--ui-line); }
.modal-title { min-height: 58px; padding: 15px 18px; }
.modal-title h2 { color: var(--ui-ink); font-size: 17px; }
.form { padding: 18px; }
.formgrid { gap: var(--ui-space-3); }
.modal-foot { padding: 12px 18px; }
.close { width: 34px; height: 34px; display: grid; place-items: center; color: var(--ui-muted); }
.toast { border: 1px solid rgba(255,255,255,.14); border-radius: var(--ui-radius-md); box-shadow: var(--ui-shadow-md); }
.notification-panel, .appearance-popover, .global-search-dialog {
  border-color: var(--ui-line);
  border-radius: var(--ui-radius-md);
  box-shadow: var(--ui-shadow-md);
}
.empty, .partner-empty, .fin-empty { color: var(--ui-muted); }

/* Responsive safeguards */
html, body { max-width: 100%; }
body { overflow-x: clip; }
@media (max-width: 850px) {
  .content { padding: 18px 16px 36px; }
  .content > .heading, .content > .fin-heading, .content > .partner-heading {
    align-items: stretch;
    padding: 16px;
  }
  .content > .heading .actions, .content > .fin-heading .actions, .content > .partner-heading .actions,
  .fin-head-actions { gap: 7px; }
  .content > .heading .actions .btn, .content > .fin-heading .actions .btn,
  .content > .partner-heading .actions .btn, .fin-head-actions .btn { min-width: 0; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal-back { align-items: flex-start; overflow-y: auto; }
  .modal { max-height: calc(100dvh - 24px); }
}
@media (max-width: 560px) {
  .content { padding: 14px 12px 28px; }
  .content > .heading, .content > .fin-heading, .content > .partner-heading { padding: 14px; }
  .content > .heading h1, .content > .fin-heading h1, .content > .partner-heading h1 { font-size: 21px; }
  .content > .heading .actions, .content > .fin-heading .actions, .content > .partner-heading .actions,
  .fin-head-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .content > .heading .actions .btn, .content > .fin-heading .actions .btn,
  .content > .partner-heading .actions .btn, .fin-head-actions .btn { width: 100%; padding-inline: 8px; font-size: 12px; }
  .cash-summary, .fin-summary, .partner-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partner-filters, .fin-filters { align-items: stretch; }
  .partner-filters > *, .fin-filters > * { min-width: 0; }
  .form { padding: 14px; }
  .modal-title, .modal-foot { padding-inline: 14px; }
  .modal-back { padding: 8px; }
  .modal { max-height: calc(100dvh - 16px); border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

:root[data-app-theme="dark"] {
  color-scheme: dark;
  --ui-ink: #e4ece6;
  --ui-muted: #a0b0a6;
  --ui-line: #304138;
  --ui-line-strong: #405449;
  --ui-bg: #111a16;
  --ui-surface: #1a2620;
  --ui-surface-soft: #202e27;
  --ui-primary-soft: #243b2e;
  --ui-danger: #f09a96;
  --ui-warning: #e7b968;
  --ui-success: #8fd2a9;
}
:root[data-app-theme="dark"] body { background: var(--ui-bg); color: var(--ui-ink); }
:root[data-app-theme="dark"] .content > .heading,
:root[data-app-theme="dark"] .content > .fin-heading,
:root[data-app-theme="dark"] .content > .partner-heading,
:root[data-app-theme="dark"] .stat, :root[data-app-theme="dark"] .fin-card,
:root[data-app-theme="dark"] .cash-stat, :root[data-app-theme="dark"] .partner-stat,
:root[data-app-theme="dark"] .table-wrap, :root[data-app-theme="dark"] .fin-table-card,
:root[data-app-theme="dark"] .cash-ledger, :root[data-app-theme="dark"] .partner-ledger-card,
:root[data-app-theme="dark"] .panel, :root[data-app-theme="dark"] .settings-panel,
:root[data-app-theme="dark"] .barari-person, :root[data-app-theme="dark"] .barari-delivery-card,
:root[data-app-theme="dark"] .overview-panel, :root[data-app-theme="dark"] .reminder-bar,
:root[data-app-theme="dark"] .overview-stats article, :root[data-app-theme="dark"] .settings-intro,
:root[data-app-theme="dark"] .souq-carry-card {
  background: var(--ui-surface); border-color: var(--ui-line); color: var(--ui-ink);
}
:root[data-app-theme="dark"] .table-head, :root[data-app-theme="dark"] .panel-title,
:root[data-app-theme="dark"] .modal-title, :root[data-app-theme="dark"] .modal-foot,
:root[data-app-theme="dark"] th, :root[data-app-theme="dark"] .partner-table th,
:root[data-app-theme="dark"] .fin-table th { background: var(--ui-surface-soft); color: #c5d2c9; border-color: var(--ui-line); }
:root[data-app-theme="dark"] td, :root[data-app-theme="dark"] .partner-table td,
:root[data-app-theme="dark"] .fin-table td, :root[data-app-theme="dark"] .formfield label { color: #d2ded5; }
:root[data-app-theme="dark"] tbody tr:nth-child(even) { background: #1c2a23; }
:root[data-app-theme="dark"] tbody tr:hover { background: #26362d; }
:root[data-app-theme="dark"] .control, :root[data-app-theme="dark"] input.control,
:root[data-app-theme="dark"] select.control, :root[data-app-theme="dark"] textarea.control,
:root[data-app-theme="dark"] .formfield input, :root[data-app-theme="dark"] .formfield select,
:root[data-app-theme="dark"] .formfield textarea { background-color: var(--ui-surface); color: var(--ui-ink); border-color: var(--ui-line-strong); }
:root[data-app-theme="dark"] .cash-stat.in, :root[data-app-theme="dark"] .cash-income > header { background: #1d3427; }
:root[data-app-theme="dark"] .cash-stat.out, :root[data-app-theme="dark"] .cash-withdraw > header { background: #382725; }
:root[data-app-theme="dark"] .cash-stat.net { background: #1d2b35; }
:root[data-app-theme="dark"] .badge.active, :root[data-app-theme="dark"] .badge.done { color: #9ed6b4; background: #233b2d; }
:root[data-app-theme="dark"] .badge.late, :root[data-app-theme="dark"] .badge.legal { color: #f2a5a0; background: #402b29; }