:root {
  --navy: #111b31; --navy-2: #192641; --bg: #f4f6fa; --panel: #fff;
  --ink: #172033; --muted: #69758a; --line: #e4e8ef; --primary: #2667e8;
  --primary-soft: #e9f0ff; --green: #11875d; --green-soft: #e3f6ef;
  --amber: #b66b00; --amber-soft: #fff2d6; --red: #c73c45; --red-soft: #fee9ea;
  --violet: #7457d7; --shadow: 0 10px 30px rgba(28, 42, 75, .065); --radius: 14px;
}
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); font-family: Tahoma, "Noto Sans Arabic", Arial, sans-serif; }
body { margin: 0; min-height: 100vh; }
a { color: var(--primary); text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 5px; font-size: clamp(25px, 3vw, 32px); letter-spacing: -.5px; }
h2 { margin-bottom: 4px; font-size: 18px; }
.muted { color: var(--muted); }
.eyebrow { margin: 0 0 5px; color: var(--primary); font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; text-align: left; }
.num { direction: ltr; unicode-bidi: isolate; display: inline-block; font-variant-numeric: tabular-nums; white-space: nowrap; }
.money { font-weight: 700; }
.topbar { position: sticky; top: 0; z-index: 30; background: var(--navy); color: #fff; box-shadow: 0 5px 20px rgba(7, 15, 30, .18); }
.topbar-inner { max-width: 1500px; height: 68px; margin: auto; padding: 0 22px; display: flex; align-items: center; gap: 24px; }
.brand { min-width: 190px; color: #fff; display: flex; align-items: center; gap: 11px; }
.brand-mark { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 900; background: linear-gradient(140deg, #3177f4, #8b5cf6); box-shadow: 0 5px 14px rgba(63, 104, 230, .3); }
.brand-mark.large { width: 62px; height: 62px; border-radius: 17px; font-size: 25px; margin: 0 auto 10px; }
.brand-copy { display: grid; line-height: 1.2; }
.brand-copy small { color: #8fa0bd; font-size: 10px; margin-top: 4px; }
.topbar nav { display: flex; align-items: center; gap: 4px; flex: 1; }
.topbar nav a { color: #aebbd0; padding: 10px 13px; border-radius: 9px; font-size: 14px; }
.topbar nav a:hover, .topbar nav a.active { color: #fff; background: var(--navy-2); }
.topbar nav a.active { box-shadow: inset 0 -2px var(--primary); }
.logout-form { margin: 0; }.nav-logout { color: #aebbd0; border: 1px solid #34435f; background: transparent; border-radius: 9px; padding: 8px 12px; }
.nav-logout:hover { color: #fff; border-color: #62708a; }.menu-toggle { display: none; border: 0; background: transparent; color: #fff; font-size: 23px; }
.container { width: 100%; max-width: 1500px; margin: auto; padding: 30px 22px 60px; }
.auth-container { min-height: 100vh; max-width: none; padding: 24px; display: grid; place-items: center; background: radial-gradient(circle at 78% 5%, #dce7ff 0, transparent 38%), var(--bg); }
.login-card { width: 100%; max-width: 420px; min-width: 0; padding: 38px; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 65px rgba(31, 47, 81, .12); }
.login-card .stack { margin-top: 24px; text-align: right; }
.page-heading { margin-bottom: 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.page-heading > div > p:last-child { margin-bottom: 0; }.back-link { display: inline-block; margin-bottom: 10px; color: var(--muted); font-size: 13px; }.title-row { display: flex; align-items: center; gap: 10px; }
.panel { min-width: 0; margin-bottom: 20px; padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel.flush { padding: 0; overflow: hidden; }.panel-title, .section-heading { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.panel.flush > .section-heading { padding: 18px 20px 10px; }.panel-title h2, .section-heading h2 { margin: 0; }.text-link { font-size: 12px; font-weight: 700; white-space: nowrap; }.helper-text { color: var(--muted); font-size: 12px; }
.metrics-grid { margin-bottom: 20px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.metric { min-height: 105px; padding: 17px; display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.metric > div { min-width: 0; display: grid; gap: 8px; }.metric small { color: var(--muted); font-size: 12px; }.metric strong { font-size: clamp(19px, 2vw, 25px); letter-spacing: -.5px; }
.metric-icon { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; display: grid; place-items: center; background: #edf1f7; color: #536078; font-weight: 900; }
.metric.primary .metric-icon { background: var(--primary-soft); color: var(--primary); }.metric.green .metric-icon { background: var(--green-soft); color: var(--green); }.metric.amber .metric-icon { background: var(--amber-soft); color: var(--amber); }.metric.violet .metric-icon { background: #eee9ff; color: var(--violet); }
.metric.red strong { color: var(--red); }.metric.green strong { color: var(--green); }
.metric.wide { grid-column: span 2; }.metric.wide a { margin-right: auto; font-size: 11px; font-weight: 700; }.compact-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }.compact-metrics .metric { min-height: 90px; border-right: 3px solid var(--primary); }.compact-metrics .metric.green { border-color: var(--green); }.compact-metrics .metric.amber { border-color: var(--amber); }.report-metrics { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.dashboard-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }.debt-list { display: grid; }.debt-item { padding: 12px 0; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }.debt-item:last-child { border: 0; }.debt-item div { display: grid; gap: 4px; }.debt-item small { color: var(--muted); }.debt-item > span { color: var(--red); font-weight: 800; }
.chips { display: flex; flex-wrap: wrap; gap: 9px; }.chip { padding: 8px 11px; display: inline-flex; align-items: center; gap: 12px; border-radius: 9px; background: #eef2f7; color: #445066; font-size: 12px; }.chip.warning { background: var(--amber-soft); color: #845000; }.chip.danger { background: var(--red-soft); color: #a32e36; }.empty-inline { color: var(--muted); font-size: 13px; }
.table-wrap { width: 100%; overflow-x: auto; }.data-table, .invoice-items { width: 100%; border-collapse: collapse; white-space: nowrap; }.data-table th, .data-table td, .invoice-items th, .invoice-items td { padding: 12px 14px; text-align: right; vertical-align: middle; border-bottom: 1px solid var(--line); font-size: 12px; }.data-table th, .invoice-items th { color: #68758a; background: #f8f9fb; font-size: 10px; font-weight: 800; letter-spacing: .025em; }.data-table tr:last-child td { border-bottom: 0; }.data-table tbody tr:hover { background: #fafcff; }.invoice-link { font-weight: 800; }.item-stack { display: grid; gap: 4px; font-size: 11px; }.table-subtitle { display: block; color: var(--muted); font-size: 9px; margin-top: 3px; }.cancelled-row { opacity: .58; }.debt-row td:first-child { box-shadow: inset -3px 0 var(--amber); }.debt-dot { width: 7px; height: 7px; margin-right: 6px; display: inline-block; border-radius: 50%; background: var(--amber); }.empty { padding: 34px !important; color: var(--muted); text-align: center !important; }
.badge { width: fit-content; padding: 5px 9px; display: inline-flex; align-items: center; border: 1px solid transparent; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; }.badge.paid, .badge.confirmed { color: #08734d; background: var(--green-soft); border-color: #c2e9dc; }.badge.partial { color: #8e5900; background: var(--amber-soft); border-color: #f1d9a7; }.badge.not_paid, .badge.cancelled { color: #aa3038; background: var(--red-soft); border-color: #f4c9cc; }.badge.movement.stock_in { background: var(--green-soft); color: var(--green); }.badge.movement.sale { background: var(--primary-soft); color: var(--primary); }.badge.movement.manual_adjustment { background: var(--amber-soft); color: var(--amber); }.badge.movement.return { background: #e9f7fb; color: #11738d; }.badge.movement.cancelled_sale { background: var(--red-soft); color: var(--red); }
.danger-text { color: var(--red) !important; }.success-text { color: var(--green) !important; }.stock-count { min-width: 34px; padding: 5px 9px; text-align: center; border-radius: 8px; background: #edf1f6; font-weight: 800; }.stock-count.low { color: var(--red); background: var(--red-soft); }
.button { min-height: 38px; padding: 8px 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--ink); background: #fff; border: 1px solid #cad2df; border-radius: 9px; font-size: 12px; font-weight: 800; }.button:hover { filter: brightness(.98); transform: translateY(-1px); }.button.primary { color: #fff; background: var(--primary); border-color: var(--primary); box-shadow: 0 5px 12px rgba(38, 103, 232, .18); }.button.danger { color: #fff; background: var(--red); border-color: var(--red); }.button.ghost { color: var(--muted); background: transparent; }.button.danger-ghost { color: var(--red); border-color: #efc5c8; }.button.success-ghost { color: var(--green); border-color: #bde3d6; }.button.small { min-height: 30px; padding: 5px 9px; font-size: 10px; }.button.full { width: 100%; }.button[disabled] { opacity: .62; cursor: wait; transform: none; }.row-actions { display: flex; align-items: center; gap: 5px; }.row-actions form { margin: 0; }
label { color: #4f5b70; font-size: 11px; font-weight: 700; }input, select, textarea { width: 100%; margin-top: 6px; padding: 10px 11px; color: var(--ink); background: #fff; border: 1px solid #ccd4e0; border-radius: 8px; outline: none; }input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(38, 103, 232, .1); }textarea { resize: vertical; }.ltr-input { direction: ltr; text-align: left; unicode-bidi: isolate; }.stack { display: grid; gap: 15px; }.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }.form-grid.compact { align-items: end; }.form-actions { grid-column: 1/-1; display: flex; justify-content: flex-end; gap: 8px; }
.form-section-title { grid-column: 1/-1; margin-top: 8px; padding-top: 16px; display: flex; gap: 10px; border-top: 1px solid var(--line); }.form-section-title:first-of-type { margin-top: 0; padding-top: 0; border: 0; }.form-section-title > span { width: 28px; height: 28px; display: grid; place-items: center; color: var(--primary); background: var(--primary-soft); border-radius: 8px; font-weight: 900; }.form-section-title p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }.check-card { grid-column: 1/-1; padding: 13px; display: flex; align-items: center; gap: 10px; background: #f8fafc; border: 1px solid var(--line); border-radius: 9px; }.check-card input { width: auto; margin: 0; }.check-card span { display: grid; gap: 3px; }.check-card small { color: var(--muted); font-weight: 400; }
.filter-panel { margin-bottom: 18px; padding: 14px; display: grid; grid-template-columns: repeat(7, minmax(120px, 1fr)) auto; align-items: end; gap: 9px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }.compact-filter { grid-template-columns: repeat(4, minmax(150px, 1fr)) auto; }.product-filters { grid-template-columns: 2fr repeat(3, 1fr) auto; }.filter-actions { display: flex; gap: 6px; }.search-bar { margin-bottom: 18px; display: flex; gap: 8px; }.search-input { flex: 1; position: relative; }.search-input span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 20px; }.search-input input { height: 42px; margin: 0; padding-right: 40px; }.inline-form, .inline-create, .management-row, .customer-payment-form { display: flex; align-items: end; gap: 8px; }
.payment-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.payment-panel form { grid-column: 1/-1; }.payment-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }.payment-facts span { padding: 10px; display: grid; gap: 5px; background: #f7f9fc; border-radius: 8px; color: var(--muted); font-size: 10px; }.payment-facts b { color: var(--ink); font-size: 13px; }.payment-status-card { margin-top: 14px; padding: 16px; display: grid; gap: 8px; border-radius: 11px; background: #f7f9fc; }.payment-status-card strong { font-size: 25px; }.payment-status-card.partial, .payment-status-card.not_paid { background: var(--amber-soft); }
.summary-strip { margin-bottom: 20px; display: grid; grid-template-columns: repeat(5, 1fr); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }.summary-strip article { padding: 17px; display: grid; gap: 8px; border-left: 1px solid var(--line); }.summary-strip article:last-child { border-left: 0; }.summary-strip small { color: var(--muted); }.summary-strip strong { font-size: 20px; }.summary-strip .profit strong { color: var(--green); }.summary-strip .due { background: var(--amber-soft); }
.detail-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; }.customer-grid { grid-template-columns: minmax(280px, .8fr) 1.4fr; }.detail-list { margin: 15px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 11px 18px; }.detail-list dt { color: var(--muted); font-size: 11px; }.detail-list dd { margin: 0; font-weight: 700; }.danger-zone { border-color: #efc4c7; }.danger-zone summary { color: var(--red); font-weight: 800; cursor: pointer; }.danger-content { padding-top: 15px; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); margin-top: 14px; }.danger-content p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.outstanding-list { display: grid; gap: 10px; }.outstanding-card { padding: 14px; background: #fbfcfe; border: 1px solid var(--line); border-radius: 11px; }.outstanding-main { margin-bottom: 10px; display: flex; justify-content: space-between; align-items: start; }.outstanding-main > div { display: grid; gap: 4px; }.outstanding-main small { color: var(--muted); }.customer-payment-form { margin-top: 10px; }.customer-payment-form label { flex: 1; }
.action-layout { max-width: 920px; margin: auto; display: grid; grid-template-columns: .7fr 1.3fr; gap: 20px; }.product-snapshot > small { color: var(--muted); }.product-snapshot > strong { margin: 6px 0 0; display: block; font-size: 48px; }.product-snapshot > span { color: var(--muted); }.stock-difference { padding: 12px; display: flex; justify-content: space-between; align-items: center; background: var(--primary-soft); border-radius: 8px; color: var(--primary); }.stock-difference strong { font-size: 19px; }
.management-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }.management-card summary { display: flex; justify-content: space-between; cursor: pointer; list-style: none; }.management-card summary > span { color: var(--primary); font-size: 11px; font-weight: 800; }.management-card[open] summary { padding-bottom: 13px; border-bottom: 1px solid var(--line); }.inline-create { margin: 14px 0; }.inline-create input { margin: 0; }.management-list { display: grid; }.management-row { padding: 9px 0; border-top: 1px solid var(--line); }.management-row input { margin: 0; }.switch { min-width: 95px; display: flex; align-items: center; gap: 6px; }.switch input { width: auto; margin: 0; }.switch b { font-size: 10px; }
.report-grid { display: grid; grid-template-columns: 1.6fr .8fr; gap: 20px; }.bar-chart { margin-top: 20px; display: grid; gap: 15px; }.bar-chart > div { display: grid; gap: 7px; }.bar-chart label { display: flex; justify-content: space-between; }.bar-chart > div > span { height: 10px; display: block; overflow: hidden; border-radius: 99px; background: #edf0f5; }.bar { height: 100%; min-width: 2px; display: block; border-radius: inherit; background: var(--primary); }.bar.cost { background: #8390a6; }.bar.profit { background: var(--green); }.collection-values { margin-top: 22px; display: grid; gap: 12px; }.collection-values > div { padding: 12px; display: grid; grid-template-columns: auto 1fr; gap: 3px 8px; background: #f8fafc; border-radius: 9px; }.collection-values span { grid-row: span 2; align-self: center; width: 9px; height: 9px; border-radius: 50%; }.green-dot { background: var(--green); }.amber-dot { background: var(--amber); }.collection-values small { color: var(--muted); }.collection-values strong { font-size: 18px; }.status-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }.clean-list { margin: 10px 0 0; padding: 0; list-style: none; }.clean-list li { padding: 9px 0; display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); }
.badge.order-new { color: var(--primary); background: var(--primary-soft); }.badge.order-ordered_from_supplier { color: #6848bb; background: #eee9ff; }.badge.order-arrived { color: #08734d; background: var(--green-soft); }.badge.order-delivered { color: #fff; background: var(--green); }.badge.order-cancelled { color: var(--red); background: var(--red-soft); }.catalog-identity { margin-bottom: 16px; padding: 14px 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }.catalog-identity > span { color: var(--muted); }.table-input { min-width: 90px; margin: 0; padding: 7px 8px; }.catalog-table form { margin: 4px 0 0; }.status-timeline { display: grid; gap: 10px; }.status-timeline > div { padding: 10px; display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }.status-timeline small { grid-column: 1/-1; color: var(--muted); }.section-break { margin: 32px 0 16px; }.company-report-metrics { grid-template-columns: repeat(7, minmax(0, 1fr)); }.company-order-filters { grid-template-columns: repeat(7, minmax(120px, 1fr)) auto; }
.cashbox-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }.cashbox-actions { grid-template-columns: 1fr 1fr; }.cashbox-filters { grid-template-columns: repeat(6, minmax(130px, 1fr)) auto; }.cashbox-report-metrics { grid-template-columns: repeat(7, minmax(0, 1fr)); }.balance-preview { padding: 12px; display: flex; justify-content: space-between; background: var(--primary-soft); border-radius: 9px; }.badge.cash-in { color: var(--green); background: var(--green-soft); }.badge.cash-out { color: var(--red); background: var(--red-soft); }.ledger-in td:first-child { box-shadow: inset -3px 0 var(--green); }.ledger-out td:first-child { box-shadow: inset -3px 0 var(--red); }.table-sub { margin-top: 4px; display: block; color: var(--muted); font-size: 9px; }
.partner-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }.partner-filters { grid-template-columns: repeat(5, minmax(135px, 1fr)) auto; }.rate-pill { padding: 10px 14px; color: var(--primary); background: var(--primary-soft); border-radius: 999px; }.partner-snapshot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 2fr; align-items: center; gap: 16px; }.partner-snapshot > div { display: grid; gap: 6px; }.partner-snapshot small { color: var(--muted); }.partner-snapshot strong { font-size: 19px; }.partner-snapshot p { margin: 0; color: var(--muted); font-size: 11px; }.partner-payment-form { margin-top: 16px; }.muted-row { opacity: .58; }
.alert { margin-bottom: 18px; padding: 12px 14px; display: flex; align-items: center; gap: 9px; color: #08724c; background: var(--green-soft); border: 1px solid #bfe5d8; border-radius: 10px; font-size: 12px; transition: opacity .3s; }.alert > span { width: 21px; height: 21px; display: grid; place-items: center; color: #fff; background: var(--green); border-radius: 50%; font-weight: 900; }.alert.error { color: #a72e36; background: var(--red-soft); border-color: #f0c6c9; }.alert.error > span { background: var(--red); }.alert.fade { opacity: 0; }
.invoice-sheet { max-width: 940px; min-height: 1200px; margin: auto; padding: 46px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }.invoice-toolbar { margin-bottom: 30px; display: flex; justify-content: flex-end; gap: 8px; }.invoice-header { padding-bottom: 26px; display: flex; justify-content: space-between; align-items: center; gap: 24px; border-bottom: 2px solid var(--ink); }.invoice-identity { display: flex; align-items: center; gap: 15px; }.invoice-identity h1 { margin: 0 0 5px; font-size: 25px; }.invoice-identity p { margin: 3px 0; color: var(--muted); font-size: 11px; }.invoice-logo, .invoice-logo-placeholder { width: 70px; height: 70px; object-fit: contain; border-radius: 12px; }.invoice-logo-placeholder { display: grid; place-items: center; color: #fff; background: var(--navy); font-size: 27px; font-weight: 900; }.invoice-meta { text-align: left; display: grid; gap: 6px; direction: ltr; }.invoice-meta > span { color: var(--muted); font-size: 11px; }.invoice-meta > strong { font-size: 16px; }.invoice-meta > small { color: var(--muted); }
.invoice-customer { padding: 22px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.invoice-customer div { padding: 12px; display: grid; gap: 6px; background: #f7f8fa; border-radius: 8px; }.invoice-customer small { color: var(--muted); font-size: 10px; }.invoice-items th { color: #fff; background: var(--navy); }.invoice-items td { padding-top: 15px; padding-bottom: 15px; }.invoice-bottom { margin-top: 24px; display: grid; grid-template-columns: 1fr 360px; align-items: end; gap: 30px; }.invoice-note { color: var(--muted); font-size: 12px; }.invoice-totals > div { padding: 10px 12px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); }.invoice-totals .remaining { font-size: 17px; font-weight: 800; }.invoice-payment-status { margin-top: 10px; border: 1px solid var(--line); border-radius: 8px; }.invoice-payment-status.paid { color: var(--green); border-color: var(--green); }.invoice-payment-status.partial { color: var(--amber); border-color: var(--amber); }.invoice-payment-status.not_paid { color: var(--red); border-color: var(--red); }.invoice-footer { margin-top: 55px; padding-top: 12px; display: flex; justify-content: space-between; color: var(--muted); border-top: 1px solid var(--line); font-size: 9px; }
@media (max-width: 1180px) {.metrics-grid, .report-metrics, .company-report-metrics, .cashbox-report-metrics, .partner-metrics, .cashbox-metrics { grid-template-columns: repeat(4, 1fr); }.filter-panel, .company-order-filters, .cashbox-filters, .partner-filters { grid-template-columns: repeat(4, 1fr); }.compact-filter { grid-template-columns: repeat(3, 1fr); }}
@media (max-width: 860px) {.topbar-inner { padding: 0 14px; flex-wrap: wrap; }.brand { min-width: 0; flex: 1; }.brand-copy small { display: none; }.menu-toggle { display: block; }.topbar nav { position: absolute; top: 68px; right: 0; left: 0; padding: 10px 14px 14px; display: none; flex-direction: column; align-items: stretch; background: var(--navy); box-shadow: 0 14px 20px rgba(7, 15, 30, .18); }.topbar nav.open { display: flex; }.topbar nav a { padding: 11px; }.logout-form { display: none; }.container { padding: 22px 12px 50px; }.metrics-grid, .report-metrics { grid-template-columns: repeat(2, 1fr); }.metric.wide { grid-column: span 2; }.dashboard-grid, .detail-grid, .customer-grid, .report-grid, .management-grid, .action-layout, .cashbox-actions { grid-template-columns: 1fr; }.form-grid { grid-template-columns: 1fr; }.filter-panel, .compact-filter, .product-filters { grid-template-columns: repeat(2, 1fr); }.filter-actions, .search-wide { grid-column: 1/-1; }.summary-strip { grid-template-columns: repeat(2, 1fr); }.summary-strip article { border-bottom: 1px solid var(--line); }.summary-strip article:last-child { grid-column: 1/-1; }.partner-snapshot { grid-template-columns: repeat(3, 1fr); }.partner-snapshot p { grid-column: 1/-1; }.status-grid { grid-template-columns: 1fr; }.payment-panel { grid-template-columns: 1fr; }.customer-payment-form { align-items: stretch; flex-direction: column; }.danger-content { flex-direction: column; }.invoice-sheet { min-height: 0; padding: 24px; }.invoice-header { align-items: flex-start; flex-direction: column; }.invoice-meta { text-align: right; }.invoice-customer { grid-template-columns: 1fr; }.invoice-bottom { grid-template-columns: 1fr; }.invoice-note { order: 2; }}
@media (max-width: 480px) {.auth-container { padding: 12px; }.login-card { padding: 28px 22px; }.page-heading { align-items: flex-start; flex-direction: column; }.page-heading > .button { width: 100%; }.metrics-grid, .report-metrics { grid-template-columns: 1fr 1fr; }.metric { min-height: 88px; padding: 13px; }.metric-icon { display: none; }.metric.wide { grid-column: 1/-1; }.compact-metrics { grid-template-columns: 1fr; }.filter-panel, .compact-filter, .product-filters { grid-template-columns: 1fr; }.filter-actions, .search-wide { grid-column: auto; }.filter-actions .button { flex: 1; }.search-bar { flex-wrap: wrap; }.search-input { flex-basis: 100%; }.payment-facts { grid-template-columns: 1fr; }.summary-strip { grid-template-columns: 1fr 1fr; }.partner-snapshot { grid-template-columns: 1fr; }.partner-snapshot p { grid-column: auto; }.inline-form { align-items: stretch; flex-direction: column; }.invoice-sheet { padding: 17px; }.invoice-identity { align-items: flex-start; }}
@media print {@page { size: A4; margin: 12mm; }html, body { background: #fff !important; color: #000; }.no-print, .topbar, .alert { display: none !important; }.container { width: 100%; max-width: none; padding: 0; }.panel, .metric, .invoice-sheet { box-shadow: none !important; }.panel, .metric { break-inside: avoid; border-color: #bbb; }.table-wrap { overflow: visible; }.data-table { white-space: normal; }.report-grid, .status-grid { break-inside: avoid; }.bar-chart i { border: 1px solid #444; background: #999 !important; print-color-adjust: exact; }.invoice-sheet { max-width: none; min-height: 0; padding: 0; border: 0; }.invoice-header, .invoice-customer, .invoice-items, .invoice-bottom, .invoice-totals { break-inside: avoid; }.invoice-items th { color: #000; background: #eee !important; border-top: 1px solid #333; border-bottom: 1px solid #333; print-color-adjust: exact; }.invoice-logo-placeholder { color: #000; background: #fff !important; border: 2px solid #000; }.invoice-customer div { background: #fff; border: 1px solid #bbb; }.invoice-payment-status { color: #000 !important; border: 2px solid #000 !important; }a { color: #000; }}