:root {
  --ink: #16243a;
  --muted: #718096;
  --line: #e3eaf3;
  --bg: #f3f6fb;
  --green: #117967;
  --pale: #e7f5f0;
  --gold: #b58134;
  --red: #c94e5b;
  --shadow: 0 12px 32px rgba(19, 42, 75, .08);
}

body {
  background: radial-gradient(ellipse at 85% -15%, #e5f1ff 0, transparent 36%), var(--bg);
  color: var(--ink);
  font-size: 14px;
}

.sidebar {
  width: 258px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 25px 16px;
  background: linear-gradient(180deg, #15233a 0%, #101b2d 100%);
  box-shadow: 8px 0 32px rgba(21, 35, 58, .09);
  z-index: 4;
}

.brand {
  margin: 2px 8px 38px;
  font-family: Arial, sans-serif;
  font-size: 19px;
  letter-spacing: .1px;
  color: #fff;
}

.brandmark {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(145deg, #42b6a1, #277de2);
  box-shadow: 0 7px 18px #1688c544;
  font: 700 13px Arial, sans-serif;
  letter-spacing: -.7px;
}

.navlabel { color: #9eb0c8; letter-spacing: .5px; }

.navitem {
  margin: 4px 0;
  padding: 12px 13px;
  border: 1px solid transparent;
  color: #d5dfed;
  cursor: pointer;
  transition: all .18s ease;
}

.navitem > span:first-child { width: 23px; text-align: center; color: #9cb4d3; font-size: 17px; }
.navitem:hover { background: #ffffff10; color: #fff; border-color: #ffffff12; transform: translateX(-2px); }
.navitem.active { background: linear-gradient(100deg, #2f80ed, #3c9be8); box-shadow: 0 8px 18px #237ce344; color: #fff; border-color: #65a9ff55; }
.navitem.active > span:first-child { color: #fff; }
.navitem > span:first-child {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #ffffff12;
  color: #b7c9e2;
  font-size: 15px;
  line-height: 1;
}
.navitem.active > span:first-child { background: #ffffff28; color: #fff; }
.sidebar-foot { border-top: 1px solid #ffffff17; margin-top: 28px; padding-top: 18px; color: #9eb0c8; }
.main { background: transparent; }

.topbar {
  height: 68px;
  position: sticky;
  top: 0;
  z-index: 3;
  background: #ffffffdf;
  border-bottom: 1px solid #dce5f0;
  backdrop-filter: blur(16px);
  padding: 0 clamp(16px, 3vw, 38px);
}

.content { max-width: 1640px; padding: clamp(18px, 3vw, 36px) clamp(16px, 3vw, 40px) 64px; }
.heading, .fin-heading, .partner-heading { margin-bottom: 22px; }
.heading h1, .fin-heading h1, .partner-heading h1 { color: #172a45; letter-spacing: -.3px; }
.sub, .fin-heading p, .partner-heading p { line-height: 1.8; }
.actions, .fin-head-actions { flex-wrap: wrap; }

.btn {
  border-color: #dce5ef;
  border-radius: 10px;
  padding: 10px 15px;
  color: #283b57;
  box-shadow: 0 2px 5px #16243a08;
  transition: all .18s ease;
}

.btn:hover { background: #f4f8fd; border-color: #bdcfe2; box-shadow: 0 5px 14px #172a4510; transform: translateY(-1px); }
.btn.primary { background: linear-gradient(120deg, #147e6b, #168c78); border-color: #147e6b; box-shadow: 0 6px 16px #13816c30; }
.btn.primary:hover { background: linear-gradient(120deg, #106d5e, #137965); }
.control { border-color: #dce5ef; border-radius: 10px; padding: 10px 12px; background: #fff; transition: box-shadow .18s, border-color .18s; }
.control:focus { border-color: #5797e8; box-shadow: 0 0 0 4px #438ce21c; }
:focus-visible { outline: 3px solid #438ce288; outline-offset: 2px; }
.filters, .partner-filters { border-color: #e2e9f1; border-radius: 14px; box-shadow: 0 5px 18px #182a4406; padding: 13px; }

.table-wrap, .panel, .settings-panel, .cash-ledger, .partner-ledger-card, .barari-person, .barari-delivery-card, .fin-table-card {
  border-color: #e2e9f1;
  border-radius: 15px;
  box-shadow: 0 7px 22px rgba(24, 47, 79, .055);
}

.table-wrap, .cash-ledger, .partner-ledger-card, .fin-table-card { overflow: hidden; }
table { font-variant-numeric: tabular-nums; }
th { background: #f6f8fc; color: #61738b; font-size: 11px; letter-spacing: .12px; }
td { border-bottom-color: #edf1f6; }
tbody tr:hover { background: #f7faff; }

.stat, .fin-card, .cash-stat, .partner-stat {
  border-radius: 15px;
  box-shadow: 0 8px 22px #18304f0a;
  transition: transform .18s, box-shadow .18s;
}

.stat:hover, .fin-card:hover, .cash-stat:hover, .partner-stat:hover { transform: translateY(-2px); box-shadow: 0 12px 26px #18304f12; }
.stat strong, .cash-stat strong, .partner-stat strong, .fin-card strong { font-variant-numeric: tabular-nums; }
.cash-stat.in { background: linear-gradient(135deg, #f0fbf7, #fff); border-color: #c5e8d9; }
.cash-stat.out { background: linear-gradient(135deg, #fff7f5, #fff); border-color: #f1d4d1; }
.cash-stat.out strong, .cash-amount-out { color: #c64d58; }
.cash-stat.net { background: linear-gradient(135deg, #f0f6ff, #fff); border-color: #cfdef6; }
.cash-ledger > header, .fin-table-card > header { padding: 16px 18px; }
.partner-ledger-card > header { padding: 17px 19px; }
.cash-income > header, .cash-income-card > header { background: linear-gradient(110deg, #ecf8f2, #f7fcf9); }
.cash-withdraw > header { background: linear-gradient(110deg, #fff3f1, #fff9f8); }
.cash-ledger .cash-add { background: #fff; border-color: #dce6ed; }
.partner-table-scroll, .fin-table-scroll { overscroll-behavior: contain; }
.badge { letter-spacing: .1px; }
.iconbtn { border-color: #e1e8f0; border-radius: 8px; transition: all .16s ease; }
.iconbtn:hover { transform: translateY(-1px); background: #f7faff; }
.modal-back { background: rgba(13, 25, 43, .55); backdrop-filter: blur(4px); z-index: 20; }
.modal { border: 1px solid #e5ebf3; border-radius: 18px; box-shadow: 0 24px 80px rgba(11, 27, 49, .24); }
.modal-title, .modal-foot { background: #fbfcfe; }
.toast { background: #172b46; border: 1px solid #ffffff20; box-shadow: 0 12px 32px #101e3466; }
.brand-text { font-family: Arial, 'IBM Plex Sans Arabic', sans-serif; font-weight: 700; direction: ltr; unicode-bidi: isolate; }
.partner-hint { line-height: 1.9; }
.barari-tabs .btn.primary { background: linear-gradient(120deg, #2678de, #3a92e9); border-color: #2678de; }
.souq-carry-card { border-radius: 14px; box-shadow: 0 5px 16px #18304f08; }
.souq-carry-card b { color: var(--green); }

/* Shared premium dashboard treatment across every account section */
.content > .heading,
.content > .fin-heading,
.content > .partner-heading {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 22px 24px;
  border: 1px solid #e0e8f2;
  border-radius: 18px;
  background: linear-gradient(118deg, #fff 20%, #f5f9ff 100%);
  box-shadow: 0 10px 28px rgba(27, 53, 86, .055);
}

.content > .heading::after,
.content > .fin-heading::after,
.content > .partner-heading::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -34px;
  top: -52px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(71, 145, 225, .11), rgba(71, 145, 225, 0) 70%);
  pointer-events: none;
}

.content > .heading h1,
.content > .fin-heading h1,
.content > .partner-heading h1 { font-size: clamp(23px, 2vw, 29px); font-weight: 700; }
.content > .heading .sub,
.content > .fin-heading p,
.content > .partner-heading p { color: #718096; font-size: 13px; }
.content > .heading .actions,
.content > .fin-heading .actions,
.content > .partner-heading .actions { position: relative; z-index: 1; }

.stats, .detail-stats, .fin-summary, .cash-summary, .partner-stats {
  gap: 15px;
  margin-bottom: 20px;
}

.stat, .fin-card, .cash-stat, .partner-stat {
  position: relative;
  overflow: hidden;
  padding: 19px 20px;
  border: 1px solid #e2e9f2;
  background: linear-gradient(145deg, #fff, #fbfcff);
}

.stat::before, .fin-card::before, .cash-stat::before, .partner-stat::before {
  content: "";
  position: absolute;
  inset-block: 15px;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: #80a8d8;
}

.stat strong, .fin-card strong, .cash-stat strong, .partner-stat strong { color: #1d3658; line-height: 1.35; }
.stat-top, .fin-card > span, .cash-stat > span, .partner-stat > span { color: #6d7e95; font-weight: 600; }
.fin-card.income::before, .cash-stat.in::before { background: #31a879; }
.fin-card.expense::before, .cash-stat.out::before { background: #d7646d; }
.fin-card.net::before, .cash-stat.net::before { background: #4c8ee2; }
.partner-stat.due::before { background: #5888d0; }
.partner-stat.got::before { background: #31a879; }
.partner-stat.balance::before { background: #d7646d; }
.stats .stat { min-height: 112px; }

.filters, .partner-filters, .fin-filters {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(8px);
}

.table-wrap, .fin-table-card, .cash-ledger, .partner-ledger-card, .panel, .settings-panel {
  background: #fff;
  border: 1px solid #e2e9f2;
  box-shadow: 0 9px 26px rgba(23, 45, 73, .055);
}

.table-head, .panel-title { background: linear-gradient(90deg, #fff, #f8faff); }
.table-head { min-height: 58px; }
.table-head strong, .panel-title { color: #243955; }
th { position: sticky; top: 0; z-index: 1; background: #f4f7fc; color: #61738b; }
td { color: #34465f; }
tbody tr { transition: background .15s ease; }
tbody tr:nth-child(even) { background-color: #fcfdff; }
tbody tr:hover { background: #f1f7ff; }

.cash-ledger > header,
.fin-table-card > header,
.partner-ledger-card > header,
.barari-person > header,
.barari-delivery-card > header {
  border-bottom: 1px solid #e9eef5;
}

.cash-head-icon, .fin-building, .partner-ledger-icon {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(30, 83, 132, .1);
}

.cash-ledger h2, .fin-table-card h2, .partner-ledger-card h2, .barari-people-heading h2 {
  color: #223954;
  letter-spacing: -.15px;
}

.cash-ledger .partner-table tfoot,
.partner-ledger-card .partner-table tfoot,
.barari-person .partner-table tfoot { background: #f6f9fd; }
.cash-ledger .partner-table tfoot th,
.partner-ledger-card .partner-table tfoot th,
.barari-person .partner-table tfoot th { color: #344b68; font-weight: 700; }

.row-actions { flex-wrap: wrap; }
.iconbtn { color: #4d617c; font-weight: 600; }
.iconbtn.partner-remove, .iconbtn.danger, .fin-delete { color: #c34e59; }
.iconbtn.partner-remove:hover, .iconbtn.danger:hover, .fin-delete:hover { background: #fff2f1; border-color: #f0c7c7; }

.badge.active, .badge.done { box-shadow: inset 0 0 0 1px rgba(38, 132, 92, .08); }
.badge.late, .badge.legal { box-shadow: inset 0 0 0 1px rgba(193, 78, 70, .08); }
.reminder-bar { border-radius: 15px; box-shadow: 0 7px 20px #182a4407; }
.reminder-item { border-radius: 10px; background: #f8fbff; }
.settings-intro { border-radius: 16px; box-shadow: 0 8px 20px #213e5b09; }
.settings-panel { padding: 22px; }
.settings-panel h2 { color: #243955; }
.migration-result { border-radius: 12px; }
.partner-empty, .fin-empty, .empty { color: #8290a2; }

.modal-title { min-height: 65px; }
.modal-title h2 { color: #203652; }
.formfield label { color: #43556e; }
.modal-foot { position: sticky; bottom: 0; z-index: 2; }

@media (max-width: 720px) {
  .content > .heading,
  .content > .fin-heading,
  .content > .partner-heading { padding: 18px 16px; border-radius: 15px; }
  .stats, .detail-stats, .fin-summary, .cash-summary, .partner-stats { gap: 10px; }
  .stat, .fin-card, .cash-stat, .partner-stat { padding: 14px 15px; }
  .row-actions { min-width: 94px; }
}

@media (max-width: 900px) {
  .sidebar { width: 224px; }
  .topbar { padding-inline: 20px; }
  .content { padding-inline: 20px; }
}

@media (max-width: 720px) {
  .shell { display: block; }
  .sidebar { display: block; position: sticky; top: 0; width: 100%; height: auto; max-height: 154px; overflow-x: auto; overflow-y: hidden; padding: 10px 12px 8px; white-space: nowrap; box-shadow: 0 6px 20px #11223a17; }
  .brand { display: inline-flex; vertical-align: middle; margin: 0 8px 8px 18px; font-size: 16px; }
  .brandmark { width: 34px; height: 34px; border-radius: 11px; }
  .navlabel, .sidebar-foot { display: none; }
  .navitem { display: inline-flex; vertical-align: middle; margin: 0 2px 4px; padding: 9px 10px; border-radius: 10px; font-size: 12px; }
  .navitem:hover { transform: none; }
  .main { width: 100%; }
  .topbar { position: relative; }
  .topbar { height: 55px; padding: 0 15px; }
  .content { padding: 19px 13px 40px; }
  .heading, .fin-heading, .partner-heading { align-items: flex-start; flex-direction: column; }
  .heading h1, .fin-heading h1, .partner-heading h1 { font-size: 23px; }
  .actions, .fin-head-actions { width: 100%; gap: 7px; }
  .actions .btn, .fin-head-actions .btn { flex: 1; justify-content: center; min-width: max-content; padding: 9px 10px; font-size: 12px; }
  .stats, .detail-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .stat, .fin-card, .cash-stat, .partner-stat { padding: 14px; }
  .stat strong, .cash-stat strong, .partner-stat strong, .fin-card strong { font-size: 19px; }
  .cash-summary, .fin-summary, .partner-stats { grid-template-columns: 1fr; gap: 9px; }
  .cash-ledger-grid, .partner-ledgers, .fin-grid, .barari-income-page { grid-template-columns: 1fr; gap: 14px; }
  .partner-filters, .filters { align-items: stretch; }
  .partner-filters label, .filters > .control { flex: 1; min-width: 130px; }
  .search { min-width: 100%; flex-basis: 100%; }
  .table-wrap, .partner-table-scroll, .fin-table-scroll, .partner-modal-table { overflow: auto; }
  .table-wrap table, .partner-table, .fin-table { min-width: 680px; }
  .guarantor { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .detail-head { flex-wrap: wrap; }
  .formgrid { grid-template-columns: 1fr; }
  .formfield.full { grid-column: auto; }
  .reportcards { grid-template-columns: 1fr; }
  .barari-withdraw-grid { grid-template-columns: 1fr; }
  .barari-tabs { flex-direction: row; }
  .barari-tabs .btn { min-width: 0; flex: 1; }
  .souq-carry-card { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 13px; }
  .modal-back { padding: 10px; }
  .modal { max-height: 95vh; }
  .modal-title, .form, .modal-foot { padding-inline: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Calm motion and clear feedback across the dashboard */
:root { --motion-smooth: cubic-bezier(.2,.75,.25,1); }
body {
  background-image: radial-gradient(ellipse at 86% 5%, rgba(81, 150, 226, .10), transparent 32%),
    radial-gradient(ellipse at 12% 82%, rgba(42, 154, 117, .055), transparent 28%);
  background-attachment: fixed;
}
.visual-page-enter { animation: visualPageIn .38s var(--motion-smooth) both; }
@keyframes visualPageIn {
  from { opacity: .45; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}
.content > .heading, .content > .fin-heading, .content > .partner-heading,
.stat, .fin-card, .cash-stat, .partner-stat, .table-wrap, .cash-ledger,
.partner-ledger-card, .fin-table-card, .settings-panel, .barari-person,
.barari-delivery-card, .panel {
  transition: transform .24s var(--motion-smooth), box-shadow .24s var(--motion-smooth), border-color .24s ease;
}
.content > .heading:hover, .content > .fin-heading:hover, .content > .partner-heading:hover {
  border-color: #d4e2f2;
  box-shadow: 0 14px 34px rgba(27, 53, 86, .075);
}
.navitem { transition: color .2s ease, background .2s ease, transform .2s var(--motion-smooth), box-shadow .2s ease; }
.navitem.active { box-shadow: inset 3px 0 rgba(255,255,255,.65), 0 7px 19px rgba(35,124,227,.19); }
.btn, .iconbtn, .filter-chip, .close, .visual-sound-toggle { -webkit-tap-highlight-color: transparent; }
.btn:active, .iconbtn:active, .filter-chip:active { transform: translateY(1px) scale(.985); }
.control:hover { border-color: #c7d6e8; }
tbody tr { transition: background-color .16s ease, box-shadow .16s ease; }
tbody tr:hover { box-shadow: inset 3px 0 #68a0df; }
.modal-back[style*="display: flex"] .modal { animation: modalIn .24s var(--motion-smooth) both; }
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
#toast { animation: toastIn .24s var(--motion-smooth) both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
.visual-ripple {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(80, 151, 223, .2);
  transform: translate(-50%, -50%) scale(0);
  animation: visualRipple .52s ease-out forwards;
}
@keyframes visualRipple { to { transform: translate(-50%, -50%) scale(15); opacity: 0; } }
.visual-sound-toggle {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid #dce5ef;
  border-radius: 12px;
  background: linear-gradient(145deg, #fff, #f5f8fc);
  color: #435a75;
  box-shadow: 0 3px 10px rgba(22, 36, 58, .07);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.visual-sound-toggle:hover { transform: translateY(-1px); box-shadow: 0 6px 15px rgba(22,36,58,.12); }
.visual-sound-toggle[aria-pressed="true"] { background: #edf7f3; border-color: #b8dfce; }
@media (max-width: 720px) {
  .visual-sound-toggle { flex-basis: 32px; width: 32px; height: 32px; border-radius: 10px; font-size: 13px; }
  .visual-ripple { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .visual-page-enter, #toast, .modal-back[style*="display: flex"] .modal { animation: none !important; }
}

.quick-add-launch { flex: 0 0 auto; white-space: nowrap; border-radius: 11px; box-shadow: 0 5px 14px #176b5026; }
.quick-add-back { z-index: 80; }
.quick-add-modal { width: min(640px, 100%); border-radius: 20px; box-shadow: 0 24px 70px #10243b3d; }
.quick-add-subtitle { margin: 5px 0 0; color: var(--muted, #718096); font-size: 13px; }
.quick-add-nested { width: 100%; margin: 0; }
@media (max-width: 720px) { .topbar { gap: 8px; } .topbar > .crumb { max-width: 28%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; } .quick-add-launch { padding: 8px 9px; font-size: 11px; } .topbar .profile { gap: 5px; } .topbar .profile .muted { display: none; } .topbar .profile .avatar { width: 30px; height: 30px; } }