:root {
  --green-950: #092f2c;
  --green-900: #0f5f59;
  --green-800: #0f766e;
  --green-700: #13847c;
  --green-100: #dff7f3;
  --cream: #f5f7fb;
  --paper: #fff;
  --ink: #111827;
  --muted: #667085;
  --line: #e6ebf2;
  --red: #d14343;
  --red-soft: #fff0f0;
  --amber: #c47a12;
  --amber-soft: #fff6df;
  --blue: #2563eb;
  --blue-soft: #eaf1ff;
  --cyan: #0e7490;
  --violet: #6d5bd0;
  --shadow: 0 18px 44px rgba(17, 24, 39, .08);
  --shadow-soft: 0 8px 24px rgba(17, 24, 39, .06);
  --radius: 8px;
  --arabic-font: "Alexandria", "Cairo", "Tajawal", "Noto Kufi Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(180deg, #f8fafc 0%, #eef7f5 48%, #f5f7fb 100%);
  font-family: var(--arabic-font);
  font-size: 14px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .62; }
button, a, input, select, textarea { transition: border-color .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(14, 116, 144, .18);
  outline-offset: 2px;
}
::selection { color: #fff; background: var(--green-800); }
.connection-banner {
  position: fixed; top: 0; right: 0; left: 0; z-index: 200;
  padding: 10px 16px; color: #fff; background: #b42318; text-align: center; font-weight: 700;
}
.activity-list { display: grid; gap: 9px; }
.activity-item { padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #f9fbfc; }
.activity-item strong, .activity-item small { display: block; }
.activity-item small { margin-top: 4px; color: var(--muted); }
.field-error { border-color: var(--red) !important; box-shadow: 0 0 0 3px rgba(201,76,76,.1) !important; }
.app-shell { min-height: 100vh; display: flex; }
.sidebar {
  position: fixed; inset: 0 0 0 auto; z-index: 20;
  width: 268px; padding: 22px 16px;
  max-height: 100dvh;
  background:
    linear-gradient(180deg, #092f2c 0%, #123a42 48%, #172033 100%);
  color: #fff;
  display: flex; flex-direction: column;
  overflow: hidden;
  border-left: 1px solid rgba(255,255,255,.08);
  box-shadow: -18px 0 42px rgba(17,24,39,.08);
}
.brand { display: flex; flex-shrink: 0; align-items: center; gap: 12px; padding: 2px 8px 24px; border-bottom: 1px solid rgba(255,255,255,.12); }
.brand-mark, .receipt-logo {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: var(--radius); color: #0b2d2a;
  background: linear-gradient(135deg, #f7c948, #b7f4e7);
  box-shadow: 0 12px 28px rgba(0,0,0,.16);
  font-size: 24px; font-weight: 800;
}
.brand strong, .sidebar-footer strong { display: block; font-size: 16px; }
.brand span, .sidebar-footer span { display: block; margin-top: 4px; color: #b8c7d3; font-size: 12px; }
.main-nav {
  display: grid; flex: 1 1 auto; gap: 7px; min-height: 0;
  margin-top: 20px; padding: 0 0 14px;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.nav-item {
  position: relative; display: flex; align-items: center; gap: 10px;
  border: 1px solid transparent; border-radius: var(--radius); padding: 11px 12px;
  color: #d7e3e8; background: transparent; text-align: right;
}
.nav-item span {
  display: inline-grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px;
  border-radius: 7px; color: #e9fbf7; background: rgba(255,255,255,.09);
  font-weight: 800; line-height: 1;
}
.nav-item:hover { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.08); }
.nav-item.active {
  color: #092f2c; background: #f8fffd; border-color: rgba(255,255,255,.55);
  box-shadow: 0 10px 26px rgba(0,0,0,.16);
  font-weight: 700;
}
.nav-item.active span { color: #0f5f59; background: #dff7f3; }
.nav-item.active::before { content: ""; position: absolute; right: -16px; top: 10px; bottom: 10px; width: 4px; border-radius: 5px; background: #f7c948; }
.nav-count { margin-right: auto; min-width: 22px; padding: 3px 6px; border-radius: 999px; color: #172033; background: #f7c948; text-align: center; font-size: 11px; }
.sidebar-footer { display: flex; flex-shrink: 0; align-items: center; gap: 10px; margin-top: auto; padding: 16px 8px 0; border-top: 1px solid rgba(255,255,255,.12); }
.avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--green-900); background: #dff7f3; font-weight: 800; }
.main-area { width: calc(100% - 268px); margin-right: 268px; min-width: 0; }
.topbar {
  min-height: 84px; padding: 17px 34px; background: rgba(248,250,252,.86);
  display: flex; align-items: center; gap: 16px; justify-content: space-between;
  position: sticky; top: 0; z-index: 10; backdrop-filter: blur(16px); border-bottom: 1px solid rgba(17,24,39,.07);
}
.topbar h1 { margin: 2px 0 0; font-size: 24px; font-weight: 800; line-height: 1.35; }
.eyebrow { margin: 0; color: var(--green-800); font-size: 11px; font-weight: 800; letter-spacing: 0; }
.topbar-actions { display: flex; gap: 10px; align-items: center; }
.icon-button { border: 1px solid var(--line); width: 42px; height: 42px; border-radius: var(--radius); background: #fff; color: var(--green-900); box-shadow: var(--shadow-soft); }
.icon-button:hover { transform: translateY(-1px); border-color: #c9d6e2; box-shadow: var(--shadow); }
.notification-button { position: relative; font-size: 18px; }
.notification-button span { position: absolute; top: 8px; left: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); border: 1px solid white; }
.menu-button { display: none; }
.primary-button, .outline-button, .light-button, .full-outline-button {
  border-radius: var(--radius); padding: 11px 17px; border: 1px solid var(--green-800); font-weight: 800;
}
.primary-button { color: #fff; background: linear-gradient(135deg, var(--green-800), var(--cyan)); box-shadow: 0 10px 22px rgba(15,118,110,.2); }
.primary-button:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(15,118,110,.26); }
.outline-button, .full-outline-button { color: var(--green-900); background: #fff; }
.outline-button:hover, .full-outline-button:hover { border-color: var(--green-800); background: var(--green-100); }
.light-button { color: #173019; background: #f7c948; border-color: #f7c948; box-shadow: 0 8px 20px rgba(247,201,72,.2); }
.light-button:hover { transform: translateY(-1px); background: #ffd96a; }
.full-outline-button, .full-button { width: 100%; }
.content { padding: 12px 34px 44px; }
.page { display: none; animation: pageIn .25s ease; }
.page.active { display: block; }
@keyframes pageIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.welcome-banner {
  min-height: 164px; padding: 28px 32px; border-radius: var(--radius); color: #fff;
  background:
    linear-gradient(135deg, rgba(15,118,110,.96), rgba(14,116,144,.95) 54%, rgba(31,41,55,.96)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.11) 0 1px, transparent 1px 18px);
  display: flex; align-items: center; justify-content: space-between;
  overflow: hidden; position: relative;
  box-shadow: 0 22px 46px rgba(15,118,110,.18);
}
.welcome-banner h2 { margin: 12px 0 8px; font-size: 27px; font-weight: 800; line-height: 1.45; }
.welcome-banner p { margin: 0; color: #e3f4f0; }
.soft-label { color: #ffe6a8; font-size: 12px; font-weight: 700; }
.welcome-banner button { z-index: 1; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0; }
.stat-card {
  position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px; display: flex; align-items: center; gap: 14px;
  box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.stat-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--card-accent, var(--green-800)); }
.stat-card:hover, .panel:hover, .product-card:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.stat-icon { display: grid; place-items: center; flex: 0 0 46px; height: 46px; border-radius: var(--radius); font-weight: 800; font-size: 17px; }
.stat-card.green { --card-accent: var(--green-800); }
.stat-card.blue { --card-accent: var(--blue); }
.stat-card.amber { --card-accent: #f59e0b; }
.stat-card.red { --card-accent: var(--red); }
.stat-card.green .stat-icon { background: var(--green-100); color: var(--green-800); }
.stat-card.blue .stat-icon { background: var(--blue-soft); color: var(--blue); }
.stat-card.amber .stat-icon { background: var(--amber-soft); color: var(--amber); }
.stat-card.red .stat-icon { background: var(--red-soft); color: var(--red); }
.stat-card span, .mini-stats span { display: block; color: var(--muted); font-size: 12px; }
.stat-card strong { display: block; margin: 6px 0 4px; font-size: 21px; line-height: 1.35; }
.stat-card small { color: #8b98a8; font-size: 10px; }
.dashboard-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.panel {
  background: rgba(255,255,255,.96); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow-soft); min-width: 0;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.span-2 { grid-column: 1; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.panel-header h3 { margin: 5px 0 0; font-size: 18px; font-weight: 800; line-height: 1.45; }
.panel-header select { max-width: 220px; border: 1px solid #d7dee8; border-radius: var(--radius); padding: 9px 12px; background: #fff; outline: 0; }
.panel-header select:focus { border-color: #48b7aa; box-shadow: 0 0 0 4px rgba(15,118,110,.1); }
.text-button { border: 0; background: transparent; color: var(--green-700); font-weight: 700; }
.text-button:hover, .row-action:hover { color: var(--cyan); }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th { color: #768295; font-size: 11px; font-weight: 700; text-align: right; background: #f7fafc; }
th, td { padding: 13px 11px; border-bottom: 1px solid #edf1f5; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #f8fbfd; }
.customer-cell { display: flex; align-items: center; gap: 10px; }
.customer-cell .avatar { width: 34px; height: 34px; background: var(--green-100); color: var(--green-800); }
.customer-cell strong, .customer-cell small { display: block; }
.customer-cell small { margin-top: 3px; color: var(--muted); }
.status { display: inline-block; border-radius: 999px; padding: 5px 9px; font-size: 10px; font-weight: 800; }
.status.paid, .status.approved, .status.regular { color: #287458; background: #e6f5ee; }
.status.today, .status.pending { color: #966319; background: #fff3d9; }
.status.late, .status.rejected { color: #b13f3f; background: #faeaea; }
.status.upcoming, .status.edit { color: #356890; background: #e9f1f8; }
.status.partial { color: #7a58a4; background: #f1eafa; }
.status.partialLate { color: #a63f56; background: #f9e5eb; }
.status.archived { color: #56615d; background: #ecefed; }
.row-action { border: 0; background: transparent; color: var(--green-700); font-weight: 700; }
.record-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.danger-action { color: var(--red); }
.danger-outline { color: var(--red); border-color: var(--red); }
.danger-button { border-color: var(--red); background: var(--red); color: #fff; }
.count-bubble { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 50%; color: #9c6820; background: var(--amber-soft); font-weight: 700; }
.request-mini-list { display: grid; gap: 12px; margin-bottom: 16px; }
.request-mini { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.request-mini:last-child { border: 0; padding-bottom: 0; }
.request-mini strong, .request-mini small { display: block; }
.request-mini small { margin-top: 4px; color: var(--muted); }
.success-label { color: #287458; background: #e6f5ee; border-radius: 999px; padding: 6px 10px; font-size: 10px; font-weight: 800; }
.chart { height: 210px; position: relative; overflow: hidden; }
.empty-chart { display: grid; place-items: center; }
.chart-line { position: absolute; right: 0; left: 0; border-top: 1px dashed #e4e9e6; }
.line-1 { top: 20%; } .line-2 { top: 48%; } .line-3 { top: 76%; }
.bars { position: absolute; inset: 12px 10px 0; display: flex; align-items: end; justify-content: space-around; gap: 12px; }
.bars div { height: 100%; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: end; gap: 8px; }
.bars i { width: min(42px, 70%); border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #5eead4, var(--green-800)); z-index: 1; box-shadow: 0 8px 20px rgba(15,118,110,.18); }
.bars span { color: var(--muted); font-size: 10px; }
.quick-panel { align-self: stretch; }
.quick-panel > button { width: 100%; display: flex; align-items: center; gap: 10px; border: 0; border-bottom: 1px solid var(--line); padding: 12px 5px; color: var(--ink); background: #fff; text-align: right; }
.quick-panel > button:last-child { border: 0; }
.quick-panel > button:hover { color: var(--green-900); transform: translateX(-2px); }
.quick-panel > button span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius); color: var(--green-800); background: var(--green-100); font-weight: 800; }
.page-heading { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.page-heading p { margin: 0; color: var(--muted); }
.toolbar { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.search-box { display: flex; align-items: center; gap: 8px; width: min(460px, 100%); padding: 0 13px; border: 1px solid var(--line); border-radius: var(--radius); background: #f8fafc; }
.search-box input { width: 100%; padding: 11px 0; border: 0; outline: 0; background: transparent; }
.toolbar select, .field input, .field select, .field textarea {
  border: 1px solid #d7dee8; border-radius: var(--radius); padding: 11px 12px; background: #fff; outline: 0;
}
.search-box:focus-within, .toolbar select:focus, .field input:focus, .field select:focus, .field textarea:focus { border-color: #48b7aa; box-shadow: 0 0 0 4px rgba(15,118,110,.1); }
.legacy-customer-picker, .payment-customer-picker { position: relative; }
.combo-results {
  display: grid; gap: 6px; max-height: 230px; overflow-y: auto;
  padding: 8px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; box-shadow: var(--shadow); overscroll-behavior: contain;
}
.combo-results p { margin: 0; padding: 10px; color: var(--muted); text-align: center; }
.combo-option {
  display: grid; gap: 3px; width: 100%; padding: 10px 11px;
  border: 1px solid transparent; border-radius: var(--radius);
  color: var(--ink); background: #f8fafc; text-align: right;
}
.combo-option:hover, .combo-option:focus-visible {
  border-color: #b7d9d3; background: var(--green-100);
}
.combo-option strong, .combo-option small { display: block; }
.combo-option small { color: var(--muted); font-size: 10px; font-weight: 600; }
.selected-customer-note { color: var(--muted); font-size: 11px; font-weight: 600; }
.selected-customer-note.selected { color: var(--green-800); }
.mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
.mini-stats article { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-soft); }
.mini-stats strong { display: block; margin-top: 8px; font-size: 20px; }
.mini-stats .warning { border-color: #f5d58f; background: #fffaf0; }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.product-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; background: #fff; box-shadow: var(--shadow-soft); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.product-top { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.product-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius); background: var(--green-100); color: var(--green-800); font-size: 21px; font-weight: 800; }
.product-card h4 { margin: 14px 0 5px; font-size: 16px; line-height: 1.5; }
.product-card p { margin: 0; color: var(--muted); font-size: 11px; }
.product-info { display: flex; justify-content: space-between; margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line); }
.product-info span { color: var(--muted); font-size: 10px; }
.product-info b { display: block; margin-top: 4px; }
.product-actions { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.calculator-layout, .payment-layout, .settings-layout { display: grid; grid-template-columns: 1.35fr .8fr; gap: 18px; align-items: start; }
.legacy-layout { display: grid; grid-template-columns: 1.35fr .8fr; gap: 18px; align-items: start; }
.form-panel { padding: 24px; }
.source-toggle, .tabs { display: flex; gap: 7px; padding: 5px; border-radius: var(--radius); background: #eaf0f5; margin-bottom: 18px; width: fit-content; max-width: 100%; overflow-x: auto; }
.source-toggle button, .tabs button { border: 0; border-radius: 6px; padding: 9px 14px; color: var(--muted); background: transparent; white-space: nowrap; }
.source-toggle button.active, .tabs button.active { color: var(--green-900); background: #fff; box-shadow: var(--shadow-soft); font-weight: 800; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.field { display: grid; gap: 7px; color: #52615d; font-size: 12px; font-weight: 700; }
.field.full { grid-column: 1 / -1; }
.field input[readonly] { color: var(--green-900); background: #eef8f5; font-weight: 800; }
.field textarea { resize: vertical; }
.hidden { display: none !important; }
.form-panel .full-button { margin-top: 20px; }
.result-card { padding: 28px; border-radius: var(--radius); color: #fff; background: linear-gradient(145deg, #092f2c, #0e7490 62%, #172033); box-shadow: var(--shadow); }
.result-card > span { display: block; margin-top: 24px; color: #bee5df; }
.result-card > strong { display: block; margin: 6px 0 24px; color: #ffe08a; font-size: 38px; line-height: 1.25; }
.result-card > strong small { font-size: 16px; }
.result-breakdown { display: grid; gap: 12px; margin-bottom: 22px; }
.result-breakdown div { display: flex; justify-content: space-between; color: #c8d8d3; }
.result-breakdown b { color: #fff; }
.result-breakdown .total-line { padding-top: 13px; border-top: 1px solid rgba(255,255,255,.15); }
.result-note { display: block; margin-top: 13px; color: #a9beb7; text-align: center; }
.compact-calculator .form-panel { padding: 20px; }
.compact-calculator .source-toggle { margin-bottom: 14px; }
.compact-calculator .form-grid { gap: 12px; }
.compact-calculator .field { gap: 6px; }
.calculator-summary { padding: 22px; }
.calculator-summary > span { margin-top: 14px; }
.calculator-summary > strong { margin-bottom: 16px; font-size: 34px; }
.calculator-summary .result-breakdown { gap: 8px; margin-bottom: 16px; }
.calculator-summary .result-breakdown div { font-size: 12px; line-height: 1.7; }
.payment-layout { grid-template-columns: 1fr .65fr; }
.receipt-preview { padding: 26px; border: 1px dashed #bdc9c4; border-radius: var(--radius); background: #fff; text-align: center; box-shadow: var(--shadow-soft); }
.receipt-preview .receipt-logo { margin: auto; }
.receipt-preview h3 { margin: 10px 0 4px; }
.receipt-preview p { margin: 0 0 18px; color: var(--muted); }
.receipt-preview > div:not(.receipt-logo):not(.receipt-line) { display: flex; justify-content: space-between; padding: 8px 0; text-align: right; }
.receipt-preview span { color: var(--muted); }
.receipt-line { border-top: 1px dashed #cfd7d3; margin: 13px 0; }
.receipt-preview small { color: #9aa5a1; }
.report-stats { margin-top: 0; }
.report-stat-link { cursor: pointer; }
.report-stat-link:focus-visible { outline: 3px solid var(--green-700); outline-offset: 3px; }
.report-detail-summary { display: flex; justify-content: space-between; align-items: end; margin-bottom: 18px; }
.report-detail-summary span, .report-detail-summary small { color: var(--muted); display: block; }
.report-detail-summary strong { font-size: 30px; }
.report-detail-toolbar { margin-bottom: 16px; }
.payment-bars { display: grid; gap: 20px; }
.payment-bars div { display: grid; grid-template-columns: 100px 110px 1fr; align-items: center; gap: 14px; }
.payment-bars i { height: 8px; border-radius: 10px; background: #e9eeeb; overflow: hidden; }
.payment-bars em { display: block; height: 100%; border-radius: inherit; background: var(--green-700); }
.category-list { display: grid; gap: 13px; }
.category-list div { display: flex; justify-content: space-between; padding: 13px; border: 1px solid var(--line); border-radius: var(--radius); background: #f8fafc; }
.settings-layout { grid-template-columns: 1.2fr .8fr; }
.users-layout { display: grid; grid-template-columns: 1.7fr .8fr; gap: 18px; align-items: start; }
.user-stats { grid-template-columns: repeat(4, 1fr); }
.table-note { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; white-space: normal; }
.permission-list { display: grid; gap: 12px; }
.permission-row {
  display: grid; gap: 10px; padding: 13px; border: 1px solid var(--line);
  border-radius: var(--radius); background: #fafbf9;
}
.permission-row strong { color: var(--green-900); }
.permission-row div { display: flex; flex-wrap: wrap; gap: 7px; }
.permission-row span {
  border-radius: 999px; padding: 5px 9px; color: #7b8581;
  background: #ecefed; font-size: 10px; font-weight: 700;
}
.permission-row span.allowed { color: #287458; background: #e6f5ee; }
.rates-table { display: grid; gap: 10px; }
.rates-table > div { display: flex; align-items: center; justify-content: space-between; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #f8fafc; }
.rates-table label { display: flex; align-items: center; gap: 5px; font-weight: 700; }
.rates-table input { width: 65px; padding: 7px; border: 1px solid var(--line); border-radius: 6px; text-align: center; }
.helper-text { color: var(--muted); line-height: 1.8; font-size: 11px; }
.category-settings { margin-top: 18px; }
.category-admin-list { display: grid; gap: 10px; }
.category-admin-row {
  display: grid; grid-template-columns: 1.2fr .6fr auto; gap: 12px;
  align-items: center; padding: 12px; border: 1px solid var(--line);
  border-radius: var(--radius); background: #fafbf9;
}
.category-admin-row input {
  width: 100%; padding: 9px 10px; border: 1px solid var(--line);
  border-radius: var(--radius); background: #fff;
}
.switch-button {
  min-width: 82px; border: 0; border-radius: 999px; padding: 8px 11px;
  color: #287458; background: #e6f5ee; font-weight: 700;
}
.switch-button.off { color: #7b8581; background: #ecefed; }
.upload-box {
  position: relative; display: grid; place-items: center; min-height: 84px;
  padding: 12px; border: 1px dashed #afbeb8; border-radius: var(--radius);
  color: var(--muted); background: #f8fafc; text-align: center;
}
.upload-box input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.form-section-title {
  grid-column: 1 / -1; margin: 8px 0 0; padding: 10px 0 3px;
  color: var(--green-900); border-bottom: 1px solid var(--line); font-size: 14px;
}
.installment-schedule { margin-top: 16px; }
.product-selector { width: 100%; margin: 6px 0 4px; }
.file-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.file-chip { padding: 6px 9px; border-radius: 999px; color: var(--green-800); background: var(--green-100); font-size: 10px; }
.cash-summary { min-height: 380px; }
.legacy-summary { position: sticky; top: 106px; }
.legacy-payment-header { margin-top: 25px; padding-top: 18px; border-top: 1px solid var(--line); }
.legacy-payment-rows, .legacy-guarantor-rows { display: grid; gap: 10px; margin-bottom: 12px; }
.legacy-payment-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 8px;
  padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: #fafbf9;
}
.legacy-guarantor-row {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr auto; gap: 8px;
  padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: #fafbf9;
}
.legacy-payment-row input, .legacy-payment-row select, .legacy-guarantor-row input {
  width: 100%; padding: 9px; border: 1px solid var(--line); border-radius: 6px; background: #fff;
}
.remove-row { width: 38px; border: 0; border-radius: var(--radius); color: var(--red); background: var(--red-soft); }
.mobile-nav { display: none; }
.customer-action-search { display: grid; gap: 16px; }
.action-search-box { width: 100%; max-width: none; }
.customer-search-results { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.customer-result, .customer-result-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; color: var(--ink); text-align: right; box-shadow: var(--shadow-soft);
}
.customer-result { width: 100%; }
.customer-result:hover, .customer-result-card:hover { transform: translateY(-1px); border-color: #b7d9d3; box-shadow: var(--shadow); }
.customer-result-card > div:last-child { display: grid; justify-items: end; gap: 7px; }
.empty-message { color: var(--muted); text-align: center; }
.book-page { display: inline-block; color: var(--green-700); background: var(--green-100); padding: 2px 8px; border-radius: 12px; font-size: 11px; white-space: nowrap; }
.customer-profile-view { display: grid; gap: 16px; margin-top: 16px; scroll-margin-top: 96px; }
.customer-profile-card {
  padding: 22px; border-radius: var(--radius); color: #fff;
  background: linear-gradient(120deg, var(--green-950), var(--cyan));
  box-shadow: var(--shadow);
}
.customer-profile-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.customer-profile-head .customer-cell .avatar { background: #f1c875; color: var(--green-950); }
.customer-profile-head .customer-cell small { color: #c9d8d3; }
.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0; }
.profile-stats div { padding: 12px; border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); background: rgba(255,255,255,.1); }
.profile-stats span, .profile-stats b { display: block; }
.profile-stats span { margin-bottom: 6px; color: #c9d8d3; font-size: 10px; }
.customer-actions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.customer-actions-grid button {
  min-height: 70px; padding: 10px 7px; border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius); color: #fff; background: rgba(255,255,255,.08);
}
.customer-actions-grid button:hover { background: rgba(255,255,255,.15); transform: translateY(-1px); }
.customer-actions-grid button span { display: block; margin-bottom: 7px; color: #f2d598; font-size: 18px; }
.profile-schedule select { padding: 9px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.printable-receipt { text-align: right; }
.printable-receipt > .receipt-logo { margin: 0 auto 12px; }
.printable-receipt > .eyebrow, .printable-receipt > h2 { text-align: center; }
.thermal-receipt {
  width: min(360px, 100%); margin: 0 auto; padding: 18px 18px 8px;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  color: var(--ink); box-shadow: var(--shadow-soft);
}
.thermal-receipt .receipt-logo {
  width: 42px; height: 42px; margin: 0 auto 8px; font-size: 17px;
}
.thermal-store { margin: 0; text-align: center; font-size: 15px; font-weight: 900; }
.thermal-phone { display: block; margin-top: 4px; color: var(--muted); text-align: center; font-size: 11px; }
.thermal-receipt h2 { margin: 7px 0 4px; text-align: center; font-size: 18px; }
.receipt-meta { display: grid; gap: 5px; color: var(--muted); text-align: center; font-size: 11px; }
.receipt-meta b { color: var(--ink); }
.receipt-rows { display: grid; }
.receipt-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px dashed #d6dde5;
}
.receipt-row span { color: var(--muted); font-size: 11px; white-space: nowrap; }
.receipt-row b {
  max-width: 68%; color: var(--ink); text-align: left; font-size: 13px;
  font-weight: 800; line-height: 1.65; overflow-wrap: anywhere;
}
.thermal-total {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 12px 0 8px; padding: 10px 0;
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
}
.thermal-total span { color: var(--muted); font-size: 12px; }
.thermal-total b { font-size: 18px; font-weight: 900; }
.receipt-footer { margin: 12px 0 0; color: var(--muted); text-align: center; font-size: 11px; }
.customer-statement { color: var(--ink); }
.statement-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.statement-head .receipt-logo { flex: 0 0 48px; }
.statement-head h2 { margin: 3px 0; }
.statement-head small { color: var(--muted); }
.statement-section { margin-top: 16px; break-inside: avoid; }
.statement-section h3 { margin: 0 0 10px; font-size: 15px; color: var(--green-900); }
.statement-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.statement-grid div { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fafbf9; }
.statement-grid span, .statement-grid b { display: block; }
.statement-grid span { margin-bottom: 5px; color: var(--muted); font-size: 10px; }
.statement-grid b { font-size: 12px; }
.paid-date-badge {
  display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 700;
  color: #0f766e; background: #e6f4f1;
}
.account-summary-bar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px;
  margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line);
}
.account-summary-card {
  padding: 10px 12px; border-radius: var(--radius); background: #f8fafc;
  border: 1px solid #eef2f6; text-align: center;
}
.account-summary-card span { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.account-summary-card strong { display: block; font-size: 13px; color: var(--ink); font-weight: 800; }
.account-summary-card.green { background: #f0fdf4; border-color: #bbf7d0; }
.account-summary-card.green strong { color: #15803d; }
.account-summary-card.red { background: #fef2f2; border-color: #fecaca; }
.account-summary-card.red strong { color: #b91c1c; }
.account-summary-card.blue { background: #f0f9ff; border-color: #bae6fd; }
.account-summary-card.blue strong { color: #0369a1; }
.statement-product-card {
  margin-top: 16px; padding: 16px; border: 1px solid var(--line);
  border-radius: var(--radius); background: #fff; break-inside: avoid;
}
.product-card-header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-bottom: 10px; border-bottom: 2px solid var(--green-100); margin-bottom: 12px;
}
.product-card-header h4 { margin: 0; font-size: 15px; color: var(--green-900); font-weight: 800; }
.product-card-header .product-num {
  display: inline-block; padding: 2px 8px; border-radius: 6px; background: var(--green-100); color: var(--green-800); font-size: 11px; margin-left: 6px;
}
.book-page-badge {
  display: inline-block; margin-top: 4px; padding: 3px 8px; border-radius: 4px; background: var(--amber-soft); color: #7a4a06; font-size: 11px; font-weight: 700;
}
.product-mini-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 14px;
}
.product-mini-stats div {
  padding: 8px 10px; border-radius: var(--radius); background: #f8fafc; border: 1px solid #eef2f6; text-align: center;
}
.product-mini-stats span { display: block; font-size: 10px; color: var(--muted); margin-bottom: 3px; }
.product-mini-stats b { display: block; font-size: 12px; color: var(--ink); }
.product-mini-stats b.remaining-highlight { color: #b91c1c; font-weight: 800; }
.sub-table-block { margin-top: 12px; }
.sub-table-block h5 { margin: 0 0 6px; font-size: 12px; color: var(--green-800); font-weight: 700; }
.statement-customer-grid { grid-template-columns: repeat(3, 1fr); }
.statement-guarantors-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.guarantor-card { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: #fafbf9; }
.guarantor-card div span { font-size: 10px; color: var(--muted); display: block; }
.guarantor-card div b { font-size: 11px; display: block; }
.empty-guarantors { color: var(--muted); font-size: 12px; }
.statement-table { border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; }
.statement-table table { white-space: normal; }
.statement-table th, .statement-table td { padding: 9px 8px; font-size: 11px; vertical-align: top; }
.receipt-status-note {
  padding: 10px 12px; border-radius: var(--radius); color: #8a611e;
  background: var(--amber-soft); text-align: center; line-height: 1.7;
}
.receipt-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 10px; }
.whatsapp-button {
  display: grid; place-items: center; min-height: 44px; padding: 10px 16px;
  border-radius: var(--radius); color: #fff; background: #18864b; text-decoration: none; font-weight: 700;
}
.receipt-schedule { max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.barcode-card { text-align: center; }
.barcode-card h2 { margin: 6px 0 18px; }
.barcode-customer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 18px; padding: 12px; border: 1px solid var(--line);
  border-radius: var(--radius); background: #f8fafc; text-align: right;
}
.barcode-box {
  display: grid; justify-items: center; gap: 10px; margin: 0 0 16px; padding: 18px;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
}
.qr-svg {
  display: block; width: min(220px, 100%); aspect-ratio: 1 / 1;
  fill: #111827; border: 10px solid #fff; box-shadow: inset 0 0 0 1px #eef2f6;
}
.barcode-box strong { color: var(--ink); font-size: 20px; letter-spacing: 0; direction: ltr; }
.barcode-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: right; }
.barcode-meta div { padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #f8fafc; }
.barcode-meta span, .barcode-meta b { display: block; }
.barcode-meta span { margin-bottom: 5px; color: var(--muted); font-size: 10px; }
.modal-backdrop { display: none; position: fixed; inset: 0; z-index: 100; padding: 20px; background: rgba(9, 20, 28, .62); backdrop-filter: blur(8px); place-items: center; }
.modal-backdrop.open { display: grid; }
.modal { position: relative; width: min(760px, 100%); max-height: 90vh; overflow-y: auto; padding: 0 28px 28px; border-radius: var(--radius); background: #fff; box-shadow: 0 30px 90px rgba(0,0,0,.28); }
.modal-header-bar { position: sticky; top: 0; z-index: 10; display: flex; justify-content: flex-start; padding: 14px 0 0; background: #fff; border-radius: var(--radius) var(--radius) 0 0; }
.modal-close { width: 34px; height: 34px; border: 0; border-radius: var(--radius); background: #eef2f6; color: #475467; font-size: 22px; cursor: pointer; flex-shrink: 0; }
.modal-close:hover { background: var(--red-soft); color: var(--red); }
.modal h2 { margin-top: 0; font-weight: 800; }
.modal-actions { display: flex; gap: 10px; margin-top: 22px; }
.modal-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0; }
.modal-summary div { padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #f8fafc; }
.modal-summary span, .modal-summary b { display: block; }
.modal-summary span { margin-bottom: 5px; color: var(--muted); font-size: 11px; }
.legacy-schedule-scroll { max-height: 400px; overflow-y: auto; margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--radius); }
.legacy-schedule-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.legacy-schedule-table th, .legacy-schedule-table td { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--line); }
.legacy-schedule-table thead th { background: #f8fafc; position: sticky; top: 0; z-index: 2; font-weight: 800; color: var(--muted); }
.legacy-schedule-table .paid-row { background: #e7f8ec; }
.legacy-schedule-table .paid-row td { color: #166534; }
.legacy-schedule-table .next-due-row { background: #eff6ff; border-right: 3px solid var(--green-800); }
.legacy-periodic-preview { grid-column: 1 / -1; overflow: auto; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #f8fafc; }
.legacy-periodic-preview p { margin: 0 0 8px; color: var(--muted); font-size: 12px; }
.legacy-periodic-preview table { width: 100%; border-collapse: collapse; font-size: 13px; }
.legacy-periodic-preview th, .legacy-periodic-preview td { padding: 7px 9px; text-align: right; border-bottom: 1px solid var(--line); }
.schedule-tag { display: block; margin-top: 4px; color: var(--muted); font-weight: 700; }
.legacy-warning { margin: 0 0 18px; padding: 10px 14px; border-radius: var(--radius); background: #fef6e4; color: #92400e; font-size: 13px; line-height: 1.8; text-align: center; }
.danger-zone { margin: 14px 0; padding: 14px; border: 1px solid #f0c7c7; border-radius: var(--radius); color: #8f3030; background: var(--red-soft); }
.danger-zone strong, .danger-zone p { display: block; margin: 0; }
.danger-zone p { margin-top: 8px; line-height: 1.8; }
.toast { position: fixed; z-index: 150; bottom: 25px; left: 25px; max-width: 340px; padding: 13px 18px; border-radius: var(--radius); color: #fff; background: #172033; box-shadow: var(--shadow); opacity: 0; transform: translateY(20px); pointer-events: none; transition: .25s; }
.toast.show { opacity: 1; transform: none; }
.primary, .outline {
  border-radius: var(--radius); padding: 11px 16px; font-weight: 800; text-decoration: none; text-align: center;
}
.primary { border: 0; color: #fff; background: linear-gradient(135deg, var(--green-800), var(--cyan)); box-shadow: 0 10px 22px rgba(15,118,110,.2); }
.outline { border: 1px solid var(--green-900); color: var(--green-900); background: #fff; }
.full { width: 100%; }
.auth-page { min-height: 100vh; background: linear-gradient(135deg, #f8fafc 0%, #eef7f5 56%, #f5f7fb 100%); }
.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-card { position: relative; overflow: hidden; width: min(430px, 100%); border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 30px; box-shadow: var(--shadow); }
.auth-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--green-800), #f7c948, var(--cyan)); }
.auth-logo { display: grid; place-items: center; width: 58px; height: 58px; border-radius: var(--radius); color: var(--green-950); background: linear-gradient(135deg, #f7c948, #b7f4e7); font-size: 30px; font-weight: 800; margin-bottom: 14px; box-shadow: 0 14px 28px rgba(15,118,110,.15); }
.auth-card h1 { margin: 0 0 8px; font-size: 28px; font-weight: 800; }
.auth-card p { color: var(--muted); line-height: 1.8; }
.auth-form { display: grid; gap: 14px; margin-top: 16px; }
.auth-form label { display: grid; gap: 7px; font-weight: 800; }
.auth-form input { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 12px; outline: none; }
.auth-form input:focus { border-color: #48b7aa; box-shadow: 0 0 0 4px rgba(15,118,110,.1); }
.auth-message, .error-box, .success-box { margin-top: 14px; border-radius: var(--radius); padding: 11px 13px; font-weight: 700; }
.auth-message, .error-box { color: var(--red); }
.error-box { background: var(--red-soft); }
.success-box { color: #237154; background: #e4f5ed; }
.setup-link { display: inline-block; margin-top: 16px; color: var(--green-800); font-weight: 800; }
.auth-link-button { display: block; margin-top: 12px; }

@media (max-width: 1120px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .product-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 850px) {
  .sidebar { transform: translateX(100%); transition: .25s; box-shadow: -20px 0 50px rgba(0,0,0,.2); }
  .sidebar.open { transform: none; }
  .main-area { width: 100%; margin-right: 0; }
  .menu-button { display: block; }
  .topbar { padding: 14px 18px; align-items: flex-start; flex-wrap: wrap; }
  .topbar-actions { flex: 1 1 100%; justify-content: stretch; }
  .topbar-actions .primary-button { flex: 1 1 auto; }
  .content { padding: 10px 18px 30px; }
  .dashboard-grid, .calculator-layout, .payment-layout, .settings-layout, .users-layout, .legacy-layout { grid-template-columns: 1fr; }
  .legacy-summary { position: static; }
  .span-2 { grid-column: auto; }
  .toolbar, .page-heading { align-items: stretch; flex-direction: column; }
  .page-heading { min-height: auto; padding: 12px 2px; }
  .page-heading .primary-button, .page-heading .outline-button { width: 100%; }
  .toolbar select { padding: 11px; }
  .toolbar .search-box { width: 100%; }
}
@media (max-width: 600px) {
  body { font-size: 13px; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  button, input, select, textarea { min-height: 44px; }
  .topbar { min-height: 68px; padding: 10px 12px; gap: 10px; }
  .topbar h1 { font-size: 17px; }
  .topbar .eyebrow, .notification-button { display: none; }
  .icon-button { width: 44px; height: 44px; }
  .content { padding: 8px 10px 24px; }
  .welcome-banner { min-height: auto; padding: 20px; align-items: start; flex-direction: column; gap: 18px; border-radius: var(--radius); }
  .welcome-banner h2 { margin-top: 8px; font-size: 20px; line-height: 1.5; }
  .welcome-banner p { line-height: 1.7; }
  .welcome-banner button { width: 100%; }
  .stats-grid, .mini-stats, .user-stats, .product-grid, .form-grid { grid-template-columns: 1fr; }
  .stats-grid { gap: 9px; margin: 12px 0; }
  .stat-card { padding: 13px; border-radius: var(--radius); }
  .stat-card strong { font-size: 18px; }
  .stat-icon { flex-basis: 42px; height: 42px; }
  .panel { padding: 14px; border-radius: var(--radius); }
  .panel-header { align-items: flex-start; margin-bottom: 13px; }
  .field.full { grid-column: auto; }
  .payment-bars div { grid-template-columns: 1fr auto; }
  .payment-bars i { grid-column: 1 / -1; }
  .modal-summary { grid-template-columns: 1fr; }
  .category-admin-row { grid-template-columns: 1fr; }
  .legacy-payment-row, .legacy-guarantor-row { grid-template-columns: 1fr; }
  .remove-row { width: 100%; }
  .source-toggle, .tabs { width: 100%; }
  .source-toggle button, .tabs button { flex: 1; }
  .result-card { padding: 22px; border-radius: var(--radius); }
  .result-card > strong { font-size: 32px; }
  .receipt-preview { padding: 20px 15px; }
  .customer-search-results { grid-template-columns: 1fr; }
  .customer-result-card { min-height: 72px; }
  .customer-profile-card { padding: 16px; border-radius: var(--radius); }
  .customer-profile-head { align-items: flex-start; }
  .profile-stats { grid-template-columns: 1fr 1fr; }
  .profile-stats div:last-child { grid-column: 1 / -1; }
  .customer-actions-grid { grid-template-columns: repeat(2, 1fr); }
  .customer-actions-grid button { min-height: 72px; }
  .modal-backdrop { align-items: end; padding: 0; }
  .modal {
    width: 100%; max-height: 94vh; padding: 22px 14px calc(22px + env(safe-area-inset-bottom));
    border-radius: 8px 8px 0 0;
  }
  .modal-actions { position: sticky; bottom: 0; padding: 10px 0; background: #fff; flex-direction: column; }
  .modal-actions button { width: 100%; }
  .receipt-actions { grid-template-columns: 1fr; }
  .receipt-schedule { max-height: 230px; overflow-y: auto; }
  .legacy-schedule-scroll { max-height: 280px; overflow: auto; }
  .legacy-schedule-table { font-size: 12px; }
  .legacy-schedule-table th, .legacy-schedule-table td { padding: 6px 7px; white-space: nowrap; }
  .toast { right: 12px; left: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); max-width: none; text-align: center; }
  .mobile-nav {
    position: fixed; right: 0; bottom: 0; left: 0; z-index: 80;
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
    min-height: 68px; padding: 7px 6px calc(7px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line); background: rgba(255,255,255,.97);
    box-shadow: 0 -8px 30px rgba(16,47,41,.1); backdrop-filter: blur(12px);
  }
  .mobile-nav button {
    min-height: 52px; border: 0; border-radius: var(--radius); color: #74827d;
    background: transparent; font-size: 10px; min-width: 0;
  }
  .mobile-nav button span { display: block; margin-bottom: 4px; font-size: 18px; }
  .mobile-nav button.active { color: var(--green-900); background: var(--green-100); font-weight: 700; }
  .mobile-nav .mobile-main-action {
    align-self: start; transform: translateY(-16px); min-height: 58px;
    color: #fff; background: var(--green-900); border-radius: var(--radius);
    box-shadow: 0 8px 20px rgba(23,63,53,.24);
  }
  .sidebar { width: min(300px, 86vw); z-index: 90; }
  .table-wrap { overflow: visible; }
  .table-wrap table:not(.keep-table) { white-space: normal; }
  .table-wrap table:not(.keep-table) thead { display: none; }
  .table-wrap table:not(.keep-table) tbody { display: grid; gap: 10px; }
  .table-wrap table:not(.keep-table) tr {
    display: grid; gap: 8px; padding: 13px; border: 1px solid var(--line);
    border-radius: var(--radius); background: #fff;
  }
  .table-wrap table:not(.keep-table) td {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 4px 0; border: 0; text-align: left;
  }
  .table-wrap table:not(.keep-table) td::before {
    content: attr(data-label); color: var(--muted); font-size: 10px; text-align: right;
  }
  .table-wrap table:not(.keep-table) td:empty { display: none; }
  .customer-cell { text-align: right; }
}

.statement-print-signatures { display: none; }
.statement-print-footer { display: none; }

@media print {
  @page {
    size: A4 portrait;
    margin: 10mm 12mm;
  }

  body.printing-modal {
    margin: 0; background: #fff !important;
  }
  body.printing-modal > *:not(#modalBackdrop) { display: none !important; }
  body.printing-modal .modal-backdrop {
    display: block !important; position: static !important; inset: auto !important;
    padding: 0 !important; background: #fff !important; backdrop-filter: none !important;
  }
  body.printing-modal .modal {
    position: static !important; width: 100% !important; max-height: none !important; overflow: visible !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  }
  body.printing-modal.printing-thermal,
  body.printing-modal.printing-thermal .modal {
    width: 72mm !important;
  }
  body.printing-modal.printing-thermal .modal { padding: 0 !important; }
  body.printing-modal .modal-close,
  body.printing-modal .modal-header-bar,
  body.printing-modal .receipt-actions,
  body.printing-modal .modal > .full-button { display: none !important; }

  /* تنسيق طباعة كشف الحساب A4 الاحترافي الموزع على صفحات */
  body.printing-modal .customer-statement {
    width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important;
    color: #000 !important; font-size: 11pt !important; background: #fff !important;
  }
  body.printing-modal .customer-statement .statement-head {
    border-bottom: 2px solid #0f766e !important; padding-bottom: 10px !important; margin-bottom: 16px !important;
    display: flex !important; justify-content: space-between !important; align-items: center !important;
  }
  body.printing-modal .customer-statement .statement-head h2 {
    margin: 0 !important; font-size: 18pt !important; color: #0f766e !important;
  }
  body.printing-modal .statement-product-card {
    border: 1px solid #cbd5e1 !important; border-radius: 6px !important; margin-top: 14px !important;
    padding: 12px !important; background: #fff !important;
    break-inside: avoid !important; page-break-inside: avoid !important;
  }
  body.printing-modal .product-card-header {
    border-bottom: 1.5px solid #0f766e !important; padding-bottom: 6px !important; margin-bottom: 8px !important;
  }
  body.printing-modal .product-card-header h4 {
    color: #0f766e !important; font-size: 13pt !important; margin: 0 !important;
  }
  body.printing-modal .product-mini-stats {
    display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin-bottom: 10px !important;
  }
  body.printing-modal .product-mini-stats div {
    flex: 1 1 18% !important; border: 1px solid #cbd5e1 !important; background: #f8fafc !important;
    padding: 5px 8px !important; border-radius: 4px !important; text-align: center !important;
  }
  body.printing-modal .product-mini-stats span { font-size: 8.5pt !important; color: #475467 !important; }
  body.printing-modal .product-mini-stats b { font-size: 10pt !important; color: #0f172a !important; }

  body.printing-modal .statement-table { overflow: visible !important; border: 1px solid #cbd5e1 !important; border-radius: 4px !important; }
  body.printing-modal .statement-table table { width: 100% !important; border-collapse: collapse !important; }
  body.printing-modal .statement-table th {
    background: #f1f5f9 !important; color: #0f172a !important; border: 1px solid #cbd5e1 !important;
    font-weight: bold !important; font-size: 9.5pt !important; padding: 5px 6px !important;
  }
  body.printing-modal .statement-table td {
    border: 1px solid #e2e8f0 !important; font-size: 9.5pt !important; padding: 5px 6px !important; color: #0f172a !important;
  }
  body.printing-modal .statement-table tr { break-inside: avoid !important; page-break-inside: avoid !important; }
  body.printing-modal .statement-table tr:nth-child(even) td { background: #f8fafc !important; }

  body.printing-modal .statement-section {
    break-inside: avoid !important; page-break-inside: avoid !important; margin-top: 14px !important;
  }
  body.printing-modal .statement-section h3 {
    color: #0f766e !important; font-size: 12pt !important; border-bottom: 1px solid #e2e8f0 !important;
    padding-bottom: 4px !important; margin-bottom: 8px !important;
    break-after: avoid !important; page-break-after: avoid !important;
  }
  body.printing-modal .statement-customer-grid {
    display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important;
  }
  body.printing-modal .statement-customer-grid div {
    border: 1px solid #cbd5e1 !important; background: #f8fafc !important; padding: 5px 8px !important; border-radius: 4px !important;
  }
  body.printing-modal .statement-customer-grid span { font-size: 8.5pt !important; color: #475467 !important; }
  body.printing-modal .statement-customer-grid b { font-size: 10pt !important; color: #0f172a !important; }

  body.printing-modal .statement-guarantors-grid {
    display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important;
  }
  body.printing-modal .guarantor-card {
    border: 1px solid #cbd5e1 !important; background: #f8fafc !important; padding: 6px 8px !important;
  }

  body.printing-modal .statement-print-signatures {
    display: flex !important; justify-content: space-between !important; margin-top: 20px !important;
    padding-top: 12px !important; border-top: 1px dashed #cbd5e1 !important;
    break-inside: avoid !important; page-break-inside: avoid !important;
  }
  body.printing-modal .statement-print-signatures div { font-size: 9.5pt !important; color: #0f172a !important; }
  body.printing-modal .statement-print-footer {
    display: block !important; margin-top: 12px !important; text-align: center !important;
    font-size: 8.5pt !important; color: #64748b !important; border-top: 1px solid #e2e8f0 !important; padding-top: 6px !important;
  }

  body.printing-modal .barcode-card {
    width: 80mm; max-width: 100%; margin: 0 auto !important; break-inside: avoid; page-break-inside: avoid;
  }
  body.printing-modal .qr-svg { width: 42mm; border-width: 4mm; }
  body.printing-modal .thermal-receipt {
    width: 72mm; max-width: 72mm; margin: 0 !important; padding: 3mm 3mm 4mm !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: #000 !important;
    background: #fff !important; font-size: 10.5px; break-inside: avoid; page-break-inside: avoid;
  }
  body.printing-modal .thermal-receipt .receipt-logo {
    width: 10mm; height: 10mm; margin-bottom: 1.5mm; color: #000; background: #fff;
    border: 1px solid #000; font-size: 12px;
  }
  body.printing-modal .thermal-store { font-size: 13px; }
  body.printing-modal .thermal-phone,
  body.printing-modal .receipt-meta,
  body.printing-modal .receipt-row span,
  body.printing-modal .thermal-total span,
  body.printing-modal .receipt-footer { color: #000 !important; }
  body.printing-modal .thermal-receipt h2 { margin: 1mm 0; font-size: 14px; }
  body.printing-modal .receipt-line { margin: 2mm 0; border-top-color: #000; }
  body.printing-modal .receipt-meta { gap: 1mm; font-size: 10px; }
  body.printing-modal .receipt-row { gap: 3mm; padding: 1.6mm 0; border-bottom-color: #000; }
  body.printing-modal .receipt-row span { font-size: 10px; }
  body.printing-modal .receipt-row b {
    max-width: 42mm; color: #000 !important; font-size: 10.5px; line-height: 1.45;
  }
  body.printing-modal .thermal-total {
    margin: 2mm 0; padding: 2mm 0; border-top: 1px dashed #000; border-bottom: 1px dashed #000;
  }
  body.printing-modal .thermal-total b { font-size: 14px; }
  body.printing-modal .receipt-footer { margin-top: 2mm; font-size: 10px; }
}

.schedule-table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
.schedule-table th, .schedule-table td { padding: 0.3rem; text-align: center; }
.schedule-table th { background: #f8f9fa; font-size: 0.85rem; }
.schedule-table input { width: 100%; padding: 0.3rem; box-sizing: border-box; }
.schedule-toolbar { display: flex; align-items: center; gap: 0.4rem; margin: 0.5rem 0; flex-wrap: wrap; font-size: 0.85rem; }
.schedule-toolbar .button-sm { padding: 0.25rem 0.6rem; font-size: 0.8rem; }
.periodic-schedule-area { margin-top: 0.75rem; padding: 0.75rem; border: 1px solid #cfe7df; border-radius: 10px; background: #f6fcfa; }
.periodic-schedule-area .helper-text { margin: 0 0 0.45rem; }

/* حالة التحميل على أزرار الحفظ */
.button-spinner {
  display: inline-block; width: 15px; height: 15px; vertical-align: -3px; margin-left: 7px;
  border: 2px solid currentColor; border-left-color: transparent; border-radius: 50%;
  animation: btnSpin .7s linear infinite;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }
button.button-loading { pointer-events: none; }

/* شاشة التحميل الأولية */
.app-loading {
  position: fixed; inset: 0; z-index: 400; display: grid; place-items: center;
  background: linear-gradient(180deg, #f8fafc 0%, #eef7f5 48%, #f5f7fb 100%);
}
.app-loading.hidden { display: none; }
.app-loading-box { display: grid; justify-items: center; gap: 14px; color: var(--green-900); font-weight: 800; }
.app-loading-logo {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px;
  color: #0b2d2a; background: linear-gradient(135deg, #f7c948, #b7f4e7);
  box-shadow: 0 12px 28px rgba(0,0,0,.16); font-size: 34px; font-weight: 800;
}
.app-loading-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 4px solid var(--green-100); border-top-color: var(--green-800);
  animation: btnSpin .8s linear infinite;
}
.app-loading-box p { margin: 0; font-size: 13px; }

/* أرقام صفحات الدفتر في ملف العميل */
.profile-book-pages {
  margin-top: 12px; padding: 10px 14px; border-radius: var(--radius);
  background: var(--amber-soft); color: #7a4a06; font-size: 13px; font-weight: 600;
}
.profile-book-pages b { font-weight: 800; }

/* ترقيم الصفحات */
.pagination {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 6px; margin-top: 14px;
}
.pagination:empty { display: none; }
.pagination-info { width: 100%; text-align: center; color: var(--muted); font-size: 12px; margin-bottom: 2px; }
.pagination button {
  min-width: 36px; min-height: 36px; padding: 6px 10px; border: 1px solid var(--line);
  border-radius: var(--radius); background: #fff; color: var(--green-900); font-weight: 700;
}
.pagination button:hover:not(:disabled) { border-color: var(--green-800); background: var(--green-100); }
.pagination button.active { color: #fff; background: var(--green-800); border-color: var(--green-800); }
.pagination button:disabled { cursor: not-allowed; opacity: .45; }
.pagination .pagination-dots { border: 0; background: transparent; pointer-events: none; }