:root {
  --ink: #1b1930; --ink-soft: #615f73; --paper: #fbfafc; --canvas: #f6f5f9; --line: #e9e7ee;
  --purple: #805bd7; --purple-dark: #6641bb; --purple-wash: #efe9ff; --orange: #ee955d; --orange-wash: #fff0e7;
  --blue: #48a4cf; --blue-wash: #e6f6fd; --green: #319b6a; --green-wash: #e7f7ef; --red: #df6071; --red-wash: #ffedf0;
  --shadow: 0 12px 30px rgba(38, 30, 70, .055); --sidebar: #171625; --sidebar-2: #222037; --white: #fff;
}

/* Single-store identity and the complete product labelling workflow. */
.store-card { display: flex; align-items: center; gap: 10px; margin: 10px 0 16px; padding: 12px 10px; border: 1px solid #ffffff16; border-radius: 12px; background: #ffffff08; }
.store-card .branch-icon { display: grid; width: 30px; height: 30px; place-items: center; color: #ffc680; border-radius: 8px; background: #f7a7661a; }
.store-card .branch-icon svg { width: 16px; }
.store-card strong, .store-card small { display: block; }
.store-card small { color: #9e9bac; font-size: 10px; }
.store-card strong { color: #e8e7f0; font-size: 12px; }
.print-product-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border: 1px solid #e4ddef; border-radius: 7px; color: var(--purple); background: #faf8ff; font-size: 10px; font-weight: 700; }
.print-product-btn svg { width: 14px; height: 14px; }
.app-modal { max-height: 90vh; overflow-y: auto; }
.product-barcode-field { margin-top: 16px; padding: 14px; border: 1px solid #e5def3; border-radius: 10px; background: #fbf9ff; }
.product-barcode-field > label { display: block; margin-bottom: 6px; color: #736d7d; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.barcode-input-row { display: flex; gap: 8px; }
.barcode-input-row > input { width: 100%; min-width: 0; height: 38px; padding: 0 9px; border: 1px solid #e2dfe7; border-radius: 7px; color: #4d4756; background: #fff; font-size: 12px; }
.barcode-input-row button { flex-shrink: 0; }
.field-help { margin: 7px 0 0; color: #857d93; font-size: 11px; line-height: 1.5; }
.new-barcode-preview { margin-top: 12px; padding: 10px; border: 1px solid #eee8f4; border-radius: 6px; color: #000; background: #fff; text-align: center; }
.new-barcode-preview svg { display: block; max-width: 100%; width: auto; height: 45px; margin: 0 auto; }
.new-barcode-preview small { display: block; margin-top: 5px; color: #161616; font: 11px monospace; overflow-wrap: anywhere; }
.new-barcode-preview.invalid { color: #ae3951; font-size: 12px; }
.product-save-options { margin-top: 14px; color: #746c82; font-size: 12px; }
.product-save-options label { display: flex; align-items: center; gap: 6px; }
input[type="checkbox"] { accent-color: var(--purple); }
.barcode-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .9fr); gap: 20px; align-items: start; }
.barcode-products { padding: 21px; }
.barcode-products > .toolbar-search { margin-top: 18px; min-width: 0; }
.label-selection-toolbar { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; padding-bottom: 10px; border-bottom: 1px solid var(--line); color: #8a8298; font-size: 11px; }
.label-selection-toolbar label { display: inline-flex; align-items: center; gap: 6px; }
.label-selection-toolbar input, .label-product-choice input { width: 15px; height: 15px; flex-shrink: 0; }
.barcode-product-list { max-height: 470px; overflow-y: auto; }
.barcode-product-row { display: flex; align-items: center; gap: 10px; min-height: 76px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.label-product-choice { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; cursor: pointer; }
.label-product-choice img { width: 35px; height: 39px; border-radius: 7px; object-fit: cover; }
.label-product-choice > span { min-width: 0; }
.label-product-choice strong { display: block; color: var(--ink); font-size: 12px; }
.label-product-choice small { display: block; margin-top: 3px; color: #9991a6; font-size: 10px; overflow-wrap: anywhere; }
.label-copies { display: grid; gap: 3px; color: #8a8296; font-size: 9px; text-transform: uppercase; letter-spacing: .5px; }
.label-copies input { width: 61px; height: 30px; padding: 0 5px; border: 1px solid #e1dbe9; border-radius: 6px; color: var(--ink); background: var(--white); font-size: 12px; }
.label-copies input:disabled { opacity: .4; cursor: not-allowed; }
.label-help { display: flex; align-items: flex-start; gap: 9px; margin-top: 18px; padding: 12px; border-radius: 10px; color: #7e748f; background: #f7f3fd; }
.label-help > svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: #946bdb; }
.label-help p { margin: 0; font-size: 11px; line-height: 1.6; }
.label-settings { position: sticky; top: 98px; padding: 21px; }
.label-settings-fields { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; margin-top: 20px; }
.label-settings-fields label { display: grid; gap: 5px; color: #7c738c; font-size: 10px; font-weight: 600; }
.label-settings-fields select { width: 100%; min-width: 0; height: 37px; padding: 0 6px; border: 1px solid #e3ddeb; border-radius: 7px; color: var(--ink); background: var(--white); font-size: 11px; }
.label-display-options { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 16px 0; color: #7d738d; font-size: 11px; }
.label-display-options label { display: flex; align-items: center; gap: 4px; }
.label-preview-stage { display: flex; align-items: center; justify-content: center; min-height: 205px; padding: 20px 10px; overflow-x: auto; border: 1px solid #ede7f4; border-radius: 12px; background: radial-gradient(#d4cce1 .7px, transparent .7px) 0 0 / 9px 9px, #f3eff8; }
.label-empty { display: grid; justify-items: center; gap: 5px; text-align: center; color: #9d90ad; }
.label-empty svg { width: 31px; height: 31px; margin-bottom: 5px; color: #b3a3ca; }
.label-empty strong { color: #8b7a9e; font-size: 12px; }
.label-empty span { font-size: 10px; }
.label-validation { margin: 10px 0; color: #bb465d; font-size: 11px; }
.label-validation:empty { display: none; }
.print-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 15px; padding-bottom: 13px; border-bottom: 1px dashed var(--line); color: #82778f; font-size: 11px; }
.print-summary strong { color: var(--purple); }
.print-tips { display: flex; align-items: flex-start; gap: 8px; margin-top: 13px; color: #94889f; }
.print-tips svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }
.print-tips p { margin: 0; font-size: 10px; line-height: 1.6; }
.primary-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.barcode-label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3mm; flex-shrink: 0; width: var(--label-width); height: var(--label-height); box-sizing: border-box; padding: 2mm; overflow: hidden; color: #000; background: #fff; font-family: Arial, sans-serif; text-align: center; }
.label-preview-stage .barcode-label { box-shadow: 0 4px 14px #43314d18; }
.barcode-store-name { max-width: 100%; overflow: hidden; font-size: 6.5pt; line-height: 1; letter-spacing: .15mm; white-space: nowrap; }
.barcode-product-name { width: 100%; overflow: hidden; font-size: 6.5pt; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.barcode-image { width: 100%; height: var(--barcode-height); flex: 0 0 var(--barcode-height); }
.barcode-image svg { display: block; width: 100%; height: 100%; }
.barcode-value { max-width: 100%; font: 6.5pt/1.05 monospace; white-space: nowrap; }
.barcode-price { font-size: 7.5pt; line-height: 1; }
#barcodePrintArea { display: none; }
.dark .product-barcode-field, .dark .label-help { background: #30283f; border-color: #494054; }
.dark .barcode-input-row > input { color: #e2d9ef; background: #2b293c; border-color: #4b4357; }
.dark .label-preview-stage { background: radial-gradient(#5b4e6e .7px, transparent .7px) 0 0 / 9px 9px, #30283f; border-color: #494054; }
@media (max-width: 1200px) { .barcode-layout { grid-template-columns: 1fr; }.label-settings { position: static; }.barcode-products, .label-settings { min-width: 0; } }
@media (max-width: 540px) { .barcode-products, .label-settings { padding: 16px; }.label-product-choice img { display: none; }.label-product-choice strong { font-size: 11px; }.label-settings-fields { grid-template-columns: 1fr; }.barcode-input-row { flex-wrap: wrap; }.barcode-input-row button { min-height: 33px; }.label-selection-toolbar { gap: 5px; font-size: 10px; } }
@media print {
  html, body, body.dark { width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; color: #000 !important; background: #fff !important; }
  body > :not(#barcodePrintArea):not(#barcodePageStyle) { display: none !important; }
  #barcodePrintArea { display: block !important; margin: 0; padding: 0; }
  .label-print-page { margin: 0; padding: 0; break-inside: avoid; break-after: page; page-break-after: always; }
  .label-print-page:last-child { break-after: auto; page-break-after: auto; }
  .label-print-page.thermal { display: block; width: var(--label-width); height: var(--label-height); }
  .label-print-page.a4 { display: grid; grid-template-columns: repeat(var(--label-columns), var(--label-width)); grid-auto-rows: var(--label-height); justify-content: center; align-content: start; gap: 3mm; width: 190mm; height: 277mm; }
  .barcode-label { border: none; box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--canvas); font: 14px/1.45 "DM Sans", sans-serif; }
button, input, select { font: inherit; } button { cursor: pointer; } button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid rgba(128,91,215,.32); outline-offset: 2px; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { position: fixed; z-index: 20; inset: 0 auto 0 0; width: 252px; display: flex; flex-direction: column; padding: 23px 14px 16px; color: #ccc9da; background: linear-gradient(160deg, #1b192b, #13121f 72%); }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 11px 27px; color: var(--white); text-decoration: none; }.brand-mark { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 12px; color: #2a2141; font: 700 23px/1 "Playfair Display", serif; background: #f5b170; box-shadow: 0 5px 20px #0003; }.brand strong, .brand small { display: block; }.brand strong { font-size: 17px; letter-spacing: -.4px; }.brand small { margin-top: -2px; color: #a8a4b8; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; }
.nav-list { display: grid; gap: 3px; }.nav-link { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px; border-radius: 11px; color: #aaa7ba; text-decoration: none; transition: .2s; }.nav-link svg { width: 19px; }.nav-link:hover { color: #fff; background: #ffffff10; }.nav-link.active { color: #fff; background: linear-gradient(90deg, #805bd7 0%, #7350c8 100%); box-shadow: 0 6px 18px #5f3bb74a; }.nav-hotkey { margin-left: auto; padding: 2px 5px; border: 1px solid #ffffff2d; border-radius: 4px; color: #e6dcff; font-size: 10px; font-weight: 500; }
.sidebar-bottom { margin-top: auto; }.branch-card { width: 100%; display: flex; align-items: center; gap: 9px; margin: 10px 0 16px; padding: 10px; border: 1px solid #ffffff16; border-radius: 12px; color: #e8e7f0; text-align: left; background: #ffffff08; }.branch-card .branch-icon { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 8px; color: #ffc680; background: #f7a7661a; }.branch-card .branch-icon svg { width: 15px; }.branch-card small, .branch-card strong { display: block; }.branch-card small { color: #9e9bac; font-size: 10px; }.branch-card strong { font-size: 11px; }.branch-card > svg { width: 14px; margin-left: auto; color: #aaa8b6; }.profile-card { display: flex; align-items: center; gap: 9px; padding: 11px 5px 0; border-top: 1px solid #ffffff12; }.avatar { display: grid; width: 34px; height: 34px; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 700; background: linear-gradient(135deg, #f3aa7d, #cf6687); }.profile-card strong, .profile-card small { display: block; }.profile-card strong { color: #e7e6eb; font-size: 12px; }.profile-card small { color: #92909e; font-size: 10px; }.profile-card .icon-btn { margin-left: auto; }
.main-content { width: calc(100% - 252px); min-width: 0; margin-left: 252px; }.topbar { position: sticky; z-index: 10; top: 0; display: flex; align-items: center; min-height: 78px; padding: 0 38px; border-bottom: 1px solid var(--line); background: #fbfafcf0; backdrop-filter: blur(14px); }.crumbs { flex: 1; }.crumbs > span { display: block; margin-bottom: 1px; color: #9794a5; font-size: 11px; letter-spacing: .4px; }.crumbs h1 { margin: 0; font-size: 19px; letter-spacing: -.4px; }.crumbs h1 span { color: #f1a55a; }.topbar-actions { display: flex; align-items: center; gap: 10px; }.quick-search { display: flex; align-items: center; width: 270px; height: 38px; gap: 8px; padding: 0 8px 0 11px; border: 1px solid #e5e2eb; border-radius: 9px; color: #898697; background: #fff; }.quick-search svg { width: 16px; }.quick-search input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; }.quick-search input::placeholder { color: #aaa6b4; }.quick-search kbd, .primary-btn kbd { padding: 1px 4px; border: 1px solid #dedbe5; border-radius: 4px; color: #9692a1; background: #f7f6f9; font: 10px "DM Sans"; white-space: nowrap; }.icon-btn { position: relative; display: inline-grid; width: 36px; height: 36px; place-items: center; flex: 0 0 auto; padding: 0; border: 1px solid #e6e3ea; border-radius: 9px; color: #666275; background: #fff; }.icon-btn svg { width: 17px; }.icon-btn em { position: absolute; top: 7px; right: 8px; width: 5px; height: 5px; border: 1px solid #fff; border-radius: 50%; background: var(--red); }.icon-btn.muted { width: 27px; height: 27px; border: 0; color: #9c98a9; background: transparent; }.icon-btn.mini { width: 30px; height: 30px; border: 0; background: #f5f3f8; }.date-pill { display: flex; align-items: center; gap: 6px; height: 37px; padding: 0 10px; border: 1px solid #e5e2eb; border-radius: 9px; color: #5c596a; background: #fff; font-size: 12px; }.date-pill svg { width: 15px; }.date-pill svg:last-child { width: 12px; color: #9994a2; }.mobile-menu { display: none; margin-right: 10px; }
.view { display: none; padding: 31px 38px 48px; }.view.active { display: block; animation: view-in .25s ease-out; } @keyframes view-in { from { opacity: .45; transform: translateY(7px); } to { opacity: 1; transform: none; } }.eyebrow { margin: 0 0 4px; color: #9a94a9; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }.panel { border: 1px solid #ebe8ef; border-radius: 15px; background: var(--white); box-shadow: var(--shadow); }.dashboard-hero { position: relative; display: flex; min-height: 221px; overflow: hidden; align-items: center; justify-content: space-between; margin-bottom: 24px; padding: 32px 45px; border-radius: 17px; color: #f7f6ff; background: linear-gradient(110deg, #252044 0%, #3d2b67 61%, #6f54a4 100%); isolation: isolate; }.dashboard-hero:after { position: absolute; z-index: -1; top: -230px; right: -170px; width: 550px; height: 550px; border: 55px solid #ffffff08; border-radius: 50%; content: ""; }.dashboard-hero h2 { margin: 0 0 5px; color: #fff; font: 700 33px/.98 "Playfair Display", serif; letter-spacing: -.9px; }.dashboard-hero h2 em { color: #f3b770; font-style: normal; }.dashboard-hero > div > p:not(.eyebrow) { margin: 0 0 19px; color: #d3cde4; }.dashboard-hero .eyebrow { color: #bcb0db; }.primary-btn, .secondary-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; gap: 8px; padding: 0 14px; border: 0; border-radius: 9px; font-size: 12px; font-weight: 700; transition: .18s transform, .18s box-shadow; }.primary-btn { color: #fff; background: var(--purple); box-shadow: 0 6px 14px #7853cc42; }.primary-btn:hover, .checkout-btn:hover { transform: translateY(-1px); box-shadow: 0 9px 18px #7853cc46; }.primary-btn svg, .secondary-btn svg { width: 16px; }.dashboard-hero .primary-btn { color: #2a2140; background: #f5b170; box-shadow: none; }.hero-orb-wrap { position: relative; width: 305px; height: 160px; }.hero-orb { position: absolute; top: 5px; left: 76px; width: 152px; height: 152px; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #fbc479, #d98f8e 38%, #7655c8 72%); box-shadow: inset -16px -13px 30px #432b7555, 0 0 0 18px #ffffff08; }.hero-ring { position: absolute; top: 21px; left: 40px; width: 181px; height: 126px; border: 1px solid #d6c9fa42; border-radius: 50%; transform: rotate(-24deg); }.hero-float { position: absolute; z-index: 2; display: flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid #ffffff27; border-radius: 8px; color: #f9f7ff; background: #ffffff18; box-shadow: 0 8px 20px #1c153a29; backdrop-filter: blur(6px); font-size: 11px; font-weight: 600; }.hero-float svg { width: 16px; color: #ffc57c; }.hero-float.one { top: 8px; right: 12px; }.hero-float.two { bottom: 4px; left: 14px; }.hero-float.two svg { color: #97d9bd; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 21px; }.metric-card { position: relative; min-height: 177px; overflow: hidden; padding: 18px 19px; border: 1px solid #ebe8ef; border-radius: 15px; background: #fff; box-shadow: var(--shadow); }.metric-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }.metric-icon { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 10px; }.metric-icon svg { width: 18px; }.metric-icon.lilac { color: #7e5cd0; background: #eee9ff; }.metric-icon.peach { color: #dd7e44; background: #fff0e5; }.metric-icon.sky { color: #368eb8; background: #e5f5fb; }.metric-icon.rose { color: #d95b71; background: #ffedf0; }.metric-card p { margin: 0 0 2px; color: #777384; font-size: 12px; }.metric-card h3 { margin: 0; font-size: 24px; letter-spacing: -.6px; }.metric-card > small { color: #aaa6b2; font-size: 10px; }.trend { display: inline-flex; align-items: center; gap: 2px; padding: 3px 6px; border-radius: 5px; font-size: 10px; font-weight: 700; }.trend svg { width: 11px; }.trend.positive { color: #2e9769; background: #e6f7ef; }.trend.neutral { color: #ae7a39; background: #fdf4df; }.metric-spark { position: absolute; right: 13px; bottom: 14px; display: flex; height: 34px; align-items: end; gap: 4px; }.metric-spark span { width: 5px; border-radius: 5px 5px 1px 1px; opacity: .8; }.metric-spark span:nth-child(1){height: 12px}.metric-spark span:nth-child(2){height: 20px}.metric-spark span:nth-child(3){height: 15px}.metric-spark span:nth-child(4){height: 27px}.metric-spark span:nth-child(5){height: 18px}.metric-spark span:nth-child(6){height: 31px}.metric-spark span:nth-child(7){height: 25px}.spark-purple span{background:#c0aef6}.spark-orange span{background:#f4bc8f}.spark-blue span{background:#8dcde6}.low-stock button { position: absolute; right: 14px; bottom: 15px; display: flex; align-items: center; gap: 4px; padding: 0; border: 0; color: var(--purple); background: transparent; font-size: 10px; font-weight: 700; }.low-stock button svg { width: 12px; }.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #e0796d; box-shadow: 0 0 0 4px #ffedea; }
.dashboard-grid { display: grid; grid-template-columns: 1.38fr .92fr; gap: 19px; }.panel-head { display: flex; align-items: flex-start; justify-content: space-between; }.panel-head h3 { margin: 0; font-size: 16px; letter-spacing: -.25px; }.sales-chart-card, .payment-card, .product-table-card, .activity-card { padding: 21px; }.sales-chart-card { min-height: 332px; }.segmented { display: flex; padding: 3px; border-radius: 8px; background: #f4f2f7; }.segmented button { padding: 4px 7px; border: 0; border-radius: 5px; color: #9995a3; background: transparent; font-size: 10px; }.segmented button.selected { color: #5b4b82; background: #fff; box-shadow: 0 1px 4px #35295e1c; }.chart-wrap { display: flex; height: 235px; margin-top: 19px; }.chart-y { display: flex; width: 40px; padding: 6px 5px 20px 0; flex-direction: column; justify-content: space-between; color: #aaa6b4; font-size: 9px; text-align: right; }.chart-plot { position: relative; flex: 1; }.grid-lines { position: absolute; inset: 4px 0 23px; background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(25% - 1px), #edeaf1 calc(25% - 1px), #edeaf1 25%); }.chart-plot svg { position: absolute; inset: 4px 0 23px; width: 100%; height: calc(100% - 27px); overflow: visible; }.chart-area { fill: url(#area); }.chart-line { fill: none; stroke: #8160d8; stroke-width: 3; }.chart-plot circle { fill: #fff; stroke: #8160d8; stroke-width: 3; }.chart-days { position: absolute; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-between; color: #a29eac; font-size: 10px; }.chart-tip { position: absolute; top: 13px; right: 0; padding: 7px 9px; border-radius: 7px; color: #fff; background: #29243f; font-size: 10px; box-shadow: 0 6px 14px #1d17351d; }.chart-tip:after { position: absolute; bottom: -4px; left: 13px; width: 8px; height: 8px; content: ""; background: #29243f; transform: rotate(45deg); }.chart-tip strong,.chart-tip small { position: relative; z-index: 1; display: block; }.chart-tip small { color: #c9c2d9; font-size: 8px; }.text-btn { display: inline-flex; align-items: center; gap: 4px; padding: 2px; border: 0; color: var(--purple); background: transparent; font-size: 11px; font-weight: 700; }.text-btn svg { width: 14px; }.donut-layout { display: flex; align-items: center; gap: 24px; margin-top: 25px; }.donut { display: grid; width: 144px; height: 144px; place-items: center; flex: 0 0 auto; border-radius: 50%; background: conic-gradient(var(--purple) 0 52%, var(--orange) 52% 79%, var(--blue) 79% 95%, #d5d1dc 95%); }.donut:before { position: absolute; width: 105px; height: 105px; border-radius: 50%; content: ""; background: #fff; }.donut > div { position: relative; z-index: 1; text-align: center; }.donut strong,.donut small { display: block; }.donut strong { font-size: 17px; letter-spacing: -.6px; }.donut small { color: #9995a4; font-size: 9px; }.payment-legend { display: grid; width: 100%; gap: 11px; margin: 0; padding: 0; list-style: none; }.payment-legend li { display: flex; align-items: center; gap: 7px; color: #767182; font-size: 11px; }.payment-legend b { margin-left: auto; color: #403a50; font-size: 11px; }.legend-dot { width: 8px; height: 8px; border-radius: 50%; }.legend-dot.purple{background:var(--purple)}.legend-dot.orange{background:var(--orange)}.legend-dot.blue{background:var(--blue)}.legend-dot.grey{background:#d5d1dc}.legend-dot.green{background:var(--green)}.legend-dot.rose{background:var(--red)}.product-table-card,.activity-card { min-height: 247px; }.product-list { margin-top: 13px; }.product-mini { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px solid #f0eef2; }.product-mini:last-child { border: 0; }.product-thumb { width: 33px; height: 33px; border-radius: 8px; object-fit: cover; background: #efe8e1; }.product-mini strong,.product-mini small { display: block; }.product-mini strong { color: #403b50; font-size: 11px; }.product-mini small { color: #aaa5b1; font-size: 9px; }.product-mini .product-revenue { margin-left: auto; color: #5b5767; font-size: 11px; font-weight: 700; }.product-mini .mini-progress { width: 58px; height: 4px; margin-top: 4px; overflow: hidden; border-radius: 4px; background: #efedf2; }.product-mini .mini-progress i { display: block; height: 100%; border-radius: inherit; background: var(--purple); }.activity-list { margin-top: 9px; }.activity-row { display: flex; align-items: center; gap: 9px; padding: 10px 0; border-bottom: 1px solid #f0eef2; }.activity-row:last-child { border: 0; }.activity-avatar { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 9px; color: #7050bd; background: #f0ebff; font-size: 10px; font-weight: 700; }.activity-info { min-width: 0; }.activity-info strong,.activity-info small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.activity-info strong { color: #4c4758; font-size: 11px; }.activity-info small { color: #aaa6b3; font-size: 9px; }.activity-amount { margin-left: auto; color: #3c3749; font-size: 11px; font-weight: 700; }.activity-amount small { display: block; color: #aaa5b2; font-size: 9px; text-align: right; font-weight: 400; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 22px; }.page-heading h2 { margin: 0 0 2px; font-size: 28px; letter-spacing: -.8px; }.page-heading > div > p:not(.eyebrow) { margin: 0; color: #827e8d; }.page-heading-actions { display: flex; align-items: center; gap: 9px; }.secondary-btn { border: 1px solid #e2dfe7; color: #605b6c; background: #fff; }.secondary-btn:hover { border-color: #c6bedb; color: var(--purple-dark); }.sale-layout { display: grid; grid-template-columns: minmax(580px, 1fr) 325px; gap: 19px; align-items: start; }.sale-workspace { position: relative; overflow: visible; }.invoice-meta { display: grid; grid-template-columns: 1.1fr 1fr 1.35fr auto; gap: 12px; padding: 20px 20px 17px; border-bottom: 1px solid #eeeaf0; }.invoice-meta label, .invoice-notes label { display: grid; gap: 5px; color: #767182; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }.invoice-meta input, .invoice-meta select, .invoice-notes input { min-width: 0; height: 35px; padding: 0; border: 0; border-bottom: 1px solid #e4e0e8; outline: none; color: #332f40; background: #fff; font-size: 12px; font-weight: 600; }.select-wrap { position: relative; display: block; }.select-wrap select { width: 100%; appearance: none; }.select-wrap svg { position: absolute; right: 1px; bottom: 10px; width: 12px; color: #8e8a98; pointer-events: none; }.add-customer { display: inline-flex; align-items: center; align-self: end; gap: 5px; height: 31px; padding: 0; border: 0; color: var(--purple); background: transparent; font-size: 11px; font-weight: 700; white-space: nowrap; }.add-customer svg { width: 15px; }.scan-row { display: flex; gap: 8px; margin: 18px 20px 12px; }.scan-row label { display: flex; align-items: center; flex: 1; gap: 8px; min-width: 0; height: 43px; padding: 0 11px; border: 1.5px solid #d6c9f4; border-radius: 10px; color: var(--purple); background: #fbf9ff; }.scan-row label svg { width: 19px; }.scan-row input { min-width: 0; width: 100%; border: 0; outline: none; color: var(--ink); background: transparent; }.scan-row input::placeholder { color: #aaa5b5; }.scan-row kbd { padding: 2px 4px; border: 1px solid #ded5ef; border-radius: 4px; color: #9380bc; background: #f1ebfc; font-size: 9px; }.scan-row > button { display: inline-flex; align-items: center; gap: 4px; padding: 0 12px; border: 0; border-radius: 9px; color: #fff; background: #51476a; font-size: 11px; font-weight: 700; }.scan-row button svg { width: 14px; }.suggestions { position: absolute; z-index: 3; top: 142px; right: 20px; left: 20px; overflow: hidden; border: 1px solid #e5dff3; border-radius: 10px; background: #fff; box-shadow: 0 15px 30px #271e4a1c; }.suggestion { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 11px; border: 0; border-bottom: 1px solid #f0eef3; color: var(--ink); text-align: left; background: #fff; }.suggestion:last-child { border: 0; }.suggestion:hover { background: #faf8ff; }.suggestion img { width: 30px; height: 30px; border-radius: 7px; object-fit: cover; }.suggestion strong,.suggestion small { display: block; }.suggestion strong { font-size: 11px; }.suggestion small { color: #948f9f; font-size: 10px; }.suggestion b { margin-left: auto; color: var(--purple); font-size: 11px; }.sale-table-wrap { overflow-x: auto; }.sale-table { width: 100%; min-width: 690px; border-spacing: 0; }.sale-table th { padding: 9px 10px; color: #95909e; background: #faf9fb; font-size: 9px; letter-spacing: .65px; text-align: left; text-transform: uppercase; }.sale-table th:first-child,.sale-table td:first-child { padding-left: 20px; }.sale-table th:last-child,.sale-table td:last-child { padding-right: 15px; }.sale-table td { padding: 10px; border-bottom: 1px solid #f0edf2; vertical-align: middle; }.line-product { display: flex; align-items: center; gap: 8px; min-width: 150px; }.line-product img { width: 32px; height: 32px; border-radius: 7px; object-fit: cover; }.line-product strong,.line-product small { display: block; }.line-product strong { font-size: 11px; }.line-product small,.line-sku { color: #a09ba8; font-size: 10px; }.sale-table input { width: 59px; height: 31px; padding: 0 7px; border: 1px solid #e4e0e8; border-radius: 6px; outline-color: var(--purple); color: #4e495a; text-align: center; font-size: 11px; }.sale-table .discount-input { width: 55px; }.line-total { font-size: 11px; font-weight: 700; white-space: nowrap; }.remove-line { display: grid; width: 26px; height: 26px; place-items: center; padding: 0; border: 0; border-radius: 5px; color: #a7a1b0; background: transparent; }.remove-line:hover { color: var(--red); background: var(--red-wash); }.remove-line svg { width: 14px; }.add-line-btn { display: inline-flex; align-items: center; gap: 5px; margin: 13px 20px 17px; padding: 0; border: 0; color: var(--purple); background: transparent; font-size: 11px; font-weight: 700; }.add-line-btn svg { width: 14px; }.invoice-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; padding: 14px 20px 19px; border-top: 1px solid #eeeaf0; background: #fcfbfd; }.invoice-notes label span { display: flex; gap: 5px; align-items: center; }.invoice-notes svg { width: 12px; }.checkout-card { position: sticky; top: 95px; padding: 20px; }.checkout-head { display: flex; justify-content: space-between; }.checkout-head h3 { margin: 0; font-size: 18px; }.draft-badge { align-self: flex-start; padding: 3px 7px; border-radius: 5px; color: #97701d; background: #fff5db; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; }.amount-lines { display: grid; gap: 10px; margin: 20px 0 15px; padding-bottom: 15px; border-bottom: 1px dashed #ded9e4; }.amount-lines p { display: flex; justify-content: space-between; margin: 0; color: #777182; font-size: 11px; }.amount-lines p span { display: flex; align-items: center; gap: 4px; }.amount-lines small { color: #aaa5b1; }.amount-lines b { color: #56505f; }.tiny-edit { display: inline-grid; width: 16px; height: 16px; place-items: center; padding: 0; border: 0; color: var(--purple); background: transparent; }.tiny-edit svg { width: 11px; }.grand-total { display: flex; align-items: end; justify-content: space-between; margin-bottom: 21px; }.grand-total span { color: #65606f; font-size: 12px; font-weight: 700; }.grand-total strong { color: #332b49; font-size: 25px; letter-spacing: -.8px; }.payment-methods > p { margin: 0 0 8px; color: #726d7c; font-size: 11px; font-weight: 700; }.method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.payment-method { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 8px; border: 1px solid #e7e3ea; border-radius: 7px; color: #817c8a; background: #fff; font-size: 10px; font-weight: 700; }.payment-method svg { width: 14px; }.payment-method.active { border-color: #bba7ed; color: #6f4ebd; background: #faf8ff; box-shadow: inset 0 0 0 1px #dacdfa; }.received-row { display: grid; grid-template-columns: 1.25fr .75fr; gap: 10px; margin: 18px 0; }.received-row label { display: grid; gap: 5px; color: #7b7684; font-size: 10px; font-weight: 700; }.received-row input { width: 100%; height: 34px; padding: 0 8px; border: 1px solid #e5e1e9; border-radius: 7px; outline-color: var(--purple); color: #4d4655; font-size: 11px; }.received-row p { display: grid; align-content: end; gap: 4px; margin: 0; color: #918d9b; font-size: 10px; }.received-row p strong { color: #397f62; font-size: 12px; }.checkout-btn { display: grid; width: 100%; grid-template-columns: 1fr auto 16px; align-items: center; min-height: 45px; padding: 0 13px; border: 0; border-radius: 10px; color: #fff; text-align: left; background: linear-gradient(100deg, #7450cc, #8d6be1); box-shadow: 0 7px 15px #7957c544; transition: .18s; }.checkout-btn span { font-size: 12px; font-weight: 700; }.checkout-btn strong { margin-right: 10px; font-size: 12px; }.checkout-btn svg { width: 16px; }.checkout-hint { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 10px 0 0; color: #aaa5b2; font-size: 9px; }.checkout-hint svg { width: 12px; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 15px; padding: 12px 14px; }.toolbar-search { display: flex; align-items: center; gap: 7px; height: 35px; min-width: min(330px, 100%); padding: 0 9px; border: 1px solid #e5e2e9; border-radius: 7px; color: #9a96a5; background: #fff; }.toolbar-search svg { width: 15px; }.toolbar-search input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 11px; }.toolbar-filters { display: flex; gap: 8px; }.toolbar select,.filter-btn { height: 35px; padding: 0 9px; border: 1px solid #e5e2e9; border-radius: 7px; color: #716c7a; background: #fff; font-size: 11px; }.filter-btn { display: inline-flex; align-items: center; gap: 5px; }.filter-btn svg { width: 14px; }.inventory-panel { overflow: hidden; }.inventory-summary { display: flex; align-items: center; gap: 15px; padding: 15px 20px; border-bottom: 1px solid #eeeaf0; color: #777181; font-size: 11px; }.inventory-summary p { display: flex; align-items: center; gap: 6px; margin: 0; }.inventory-summary b { color: #494353; }.inventory-summary > span { margin-left: auto; color: #aaa5b1; }.responsive-table { overflow-x: auto; }.inventory-table,.voucher-table { width: 100%; min-width: 760px; border-spacing: 0; text-align: left; }.inventory-table th,.voucher-table th { padding: 10px 16px; color: #96919f; background: #faf9fb; font-size: 9px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; }.inventory-table td,.voucher-table td { padding: 12px 16px; border-bottom: 1px solid #f0edf2; color: #716c7b; font-size: 11px; }.inventory-product { display: flex; align-items: center; gap: 9px; }.inventory-product img { width: 34px; height: 34px; border-radius: 7px; object-fit: cover; }.inventory-product strong,.inventory-product small { display: block; }.inventory-product strong { color: #4c4655; font-size: 11px; }.inventory-product small { color: #aaa5b1; font-size: 9px; }.stock-number { color: #4d4756; font-weight: 700; }.stock-number.low { color: #d27039; }.stock-number.out { color: #d45466; }.status-pill { display: inline-flex; padding: 3px 7px; border-radius: 5px; font-size: 9px; font-weight: 700; }.status-pill.in-stock,.status-pill.paid { color: #278458; background: #e9f8ef; }.status-pill.low { color: #b76b29; background: #fff3e3; }.status-pill.out,.status-pill.pending { color: #c34d60; background: #ffecef; }.row-menu { display: grid; width: 25px; height: 25px; place-items: center; padding: 0; border: 0; border-radius: 4px; color: #8f8999; background: transparent; }.row-menu:hover { background: #f4f1f8; }.row-menu svg { width: 15px; }.table-footer { display: flex; align-items: center; justify-content: space-between; padding: 13px 20px; color: #9a95a3; font-size: 10px; }.table-footer div { display: flex; gap: 4px; }.table-footer button { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid #e5e1e9; border-radius: 5px; color: #b5b0bc; background: #fff; }.table-footer svg { width: 14px; }
.customer-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 18px; }.customer-stats article { position: relative; min-height: 136px; padding: 18px 21px; }.customer-stats .metric-icon { position: absolute; top: 18px; right: 18px; }.customer-stats p { margin: 14px 0 0; color: #777181; font-size: 11px; }.customer-stats strong,.customer-stats small { display: block; }.customer-stats strong { font-size: 25px; letter-spacing: -.6px; }.customer-stats small { color: #56a17d; font-size: 10px; }.customers-panel { padding: 21px; }.toolbar-search.compact { min-width: 220px; }.customer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-top: 18px; }.customer-card { display: flex; align-items: center; gap: 10px; padding: 13px; border: 1px solid #efecf2; border-radius: 11px; transition: .16s; }.customer-card:hover { border-color: #d8cdee; transform: translateY(-1px); }.customer-card .avatar { width: 37px; height: 37px; font-size: 11px; }.customer-card strong,.customer-card small { display: block; }.customer-card strong { color: #4c4655; font-size: 12px; }.customer-card small { color: #a19ca9; font-size: 10px; }.customer-card > div:last-child { margin-left: auto; text-align: right; }.customer-card > div:last-child small:first-child { color: #7660b5; font-weight: 700; }.empty-feature { min-height: 500px; display: flex; align-items: center; flex-direction: column; justify-content: center; padding: 40px; text-align: center; }.empty-visual { display: grid; width: 74px; height: 74px; place-items: center; margin-bottom: 18px; border-radius: 25px; color: #7955ce; background: linear-gradient(135deg, #eee8ff, #faedff); box-shadow: 12px 13px 0 #f7f1ff; }.empty-visual svg { width: 34px; height: 34px; }.empty-feature h2 { max-width: 400px; margin: 0 0 8px; font: 700 30px/1.1 "Playfair Display"; }.empty-feature > p:not(.eyebrow) { max-width: 510px; margin: 0 0 21px; color: #827d8c; }.feature-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 28px; }.feature-chips span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border-radius: 7px; color: #756e81; background: #f7f5f9; font-size: 10px; }.feature-chips svg { width: 13px; color: #8b69db; }.payment-overview { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; margin-bottom: 18px; }.balance-card,.collection-card { min-height: 178px; padding: 21px; }.balance-card p,.collection-card p { margin: 0; color: #7b7584; font-size: 11px; }.balance-card strong,.collection-card strong { display: block; margin: 3px 0 7px; font-size: 25px; letter-spacing: -.7px; }.balance-card .trend { margin-top: 0; }.balance-bars { display: flex; height: 37px; align-items: end; gap: 6px; margin-top: 11px; }.balance-bars i { display: block; width: 17px; border-radius: 5px 5px 1px 1px; background: #d8c9fa; }.balance-bars i:nth-child(1){height:30%}.balance-bars i:nth-child(2){height:44%}.balance-bars i:nth-child(3){height:38%}.balance-bars i:nth-child(4){height:72%}.balance-bars i:nth-child(5){height:53%}.balance-bars i:nth-child(6){height:90%}.balance-bars i:nth-child(7){height:63%;background:#805bd7}.collection-card { display: flex; align-items: center; justify-content: space-between; }.collection-card small { color: #aaa5b1; font-size: 10px; }.collection-icon { display: grid; width: 53px; height: 53px; place-items: center; border-radius: 17px; color: #de8345; background: #fff0e7; }.collection-icon svg { width: 27px; }.voucher-panel { overflow: hidden; padding-top: 21px; }.voucher-panel .panel-head { padding: 0 21px 17px; }.voucher-table td:first-child { color: #574d69; font-weight: 700; }.method-pill { padding: 3px 6px; border-radius: 5px; color: #665293; background: #f1ecff; font-size: 9px; font-weight: 700; }.report-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 19px; }.report-card { position: relative; min-height: 151px; padding: 17px; border: 1px solid #ebe8ef; text-align: left; transition: .18s; }.report-card:hover { border-color: #d3c3ed; transform: translateY(-2px); }.report-icon { display: grid; width: 36px; height: 36px; place-items: center; margin-bottom: 14px; border-radius: 10px; }.report-icon svg { width: 18px; }.report-icon.purple { color: #7656c8; background: #eee8ff; }.report-icon.orange { color: #dc7f42; background: #ffefe3; }.report-icon.blue { color: #3c97c5; background: #e6f5fc; }.report-icon.green { color: #2e9364; background: #e8f8ef; }.report-card strong,.report-card small { display: block; }.report-card strong { color: #4b4555; font-size: 12px; }.report-card small { margin-top: 3px; color: #9893a1; font-size: 10px; }.report-card > svg { position: absolute; right: 16px; bottom: 16px; width: 15px; color: #afaab5; }.insight-panel { display: flex; align-items: center; justify-content: space-between; min-height: 210px; padding: 27px 30px; overflow: hidden; background: linear-gradient(105deg, #2b2643, #493572); color: #fff; }.insight-panel .eyebrow { color: #b5a7d4; }.insight-panel h3 { max-width: 500px; margin: 0; font: 600 23px/1.15 "Playfair Display"; }.insight-panel p:not(.eyebrow) { max-width: 600px; margin: 9px 0 12px; color: #d4cce4; font-size: 12px; }.insight-panel .text-btn { color: #f5b170; }.insight-visual { display: grid; width: 230px; height: 130px; grid-template-columns: repeat(4, 1fr); align-items: end; gap: 11px; padding: 13px 15px 0; border: 1px solid #ffffff18; border-radius: 14px; background: #ffffff0d; }.insight-visual i { display: block; width: 100%; grid-row: 1; align-self: end; border-radius: 6px 6px 0 0; background: linear-gradient(#f3b574, #9875e6); }.insight-visual span { grid-row: 2; margin-top: 7px; color: #bfb4d7; font-size: 9px; text-align: center; }
.modal-backdrop { position: fixed; z-index: 29; inset: 0; background: #17122570; backdrop-filter: blur(2px); }.app-modal { z-index: 30; width: min(580px, calc(100vw - 28px)); padding: 0; border: 0; border-radius: 15px; box-shadow: 0 20px 65px #120d244d; }.app-modal::backdrop { background: transparent; }.app-modal form { padding: 22px; }.modal-head { display: flex; justify-content: space-between; margin-bottom: 20px; }.modal-head h3 { margin: 0; font-size: 19px; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }.form-grid label,.full-label { display: grid; gap: 5px; color: #736d7d; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }.full-label { margin-top: 13px; }.form-grid input,.form-grid select,.full-label input,.discount-field input { width: 100%; height: 38px; padding: 0 9px; border: 1px solid #e2dfe7; border-radius: 7px; outline-color: var(--purple); color: #4d4756; background: #fff; font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 500; }.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }.small-modal { max-width: 465px; }.discount-field { position: relative; display: block; color: #736d7d; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }.discount-field input { margin-top: 5px; padding-left: 27px; }.discount-field span { position: absolute; bottom: 11px; left: 10px; color: #8e8997; font-size: 12px; }.toast { position: fixed; z-index: 50; right: 25px; bottom: 24px; display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 40px); padding: 12px 15px; border: 1px solid #ccebdc; border-radius: 10px; color: #276c4a; background: #f0fbf5; box-shadow: 0 12px 25px #1c39271a; transform: translateY(110px); opacity: 0; transition: .25s; font-size: 12px; font-weight: 700; }.toast.show { transform: translateY(0); opacity: 1; }.toast svg { width: 17px; }.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
body.dark { --ink: #f0eef6; --ink-soft: #c2bfce; --paper: #252336; --canvas: #191824; --line: #343143; --white: #252336; --shadow: 0 12px 30px #00000024; }.dark .topbar { background: #191824ed; }.dark .quick-search,.dark .icon-btn:not(.muted),.dark .date-pill,.dark .metric-card,.dark .sale-table th,.dark .invoice-meta input,.dark .invoice-meta select,.dark .invoice-notes input,.dark .toolbar-search,.dark .toolbar select,.dark .filter-btn,.dark .table-footer button,.dark .payment-method,.dark .form-grid input,.dark .form-grid select,.dark .full-label input,.dark .discount-field input { background: #2b293c; border-color: #3b384c; color: #e2dfeb; }.dark .chart-tip,.dark .sales-chart-card,.dark .payment-card,.dark .product-table-card,.dark .activity-card,.dark .sale-workspace,.dark .checkout-card,.dark .inventory-panel,.dark .customers-panel,.dark .balance-card,.dark .collection-card,.dark .voucher-panel,.dark .customer-stats article,.dark .empty-feature,.dark .report-card,.dark .app-modal { background: #252336; }.dark .suggestions,.dark .suggestion { background: #2b293c; color: #eeeaf7; }.dark .suggestion:hover { background: #363349; }.dark .invoice-notes,.dark .sale-table th,.dark .inventory-table th,.dark .voucher-table th { background: #2b293b; }.dark .chart-area { opacity: .65; }.dark .grid-lines { opacity: .45; }.dark .donut:before { background: #252336; }.dark .low-stock button,.dark .text-btn { color: #ae94f1; }.dark .empty-visual { background: linear-gradient(135deg,#3d3457,#342a4d); }.dark .metric-card h3,.dark .grand-total strong,.dark .product-mini strong,.dark .activity-amount,.dark .inventory-product strong,.dark .stock-number,.dark .customer-card strong,.dark .report-card strong,.dark .voucher-table td:first-child { color: #f0ecf7; }
@media (max-width: 1200px) { .metric-grid { grid-template-columns: repeat(2,1fr); }.dashboard-grid { grid-template-columns: 1fr; }.payment-card { min-height: 290px; }.sale-layout { grid-template-columns: 1fr; }.checkout-card { position: static; }.customer-grid { grid-template-columns: repeat(2,1fr); }.report-cards { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 840px) { .sidebar { width: 230px; transform: translateX(-100%); transition: .25s; box-shadow: 10px 0 35px #0e0b1c45; }.sidebar.open { transform: none; }.main-content { width: 100%; margin-left: 0; }.topbar { min-height: 68px; padding: 0 20px; }.mobile-menu { display: inline-grid; }.quick-search { display: none; }.view { padding: 24px 20px 36px; }.dashboard-hero { padding: 30px; }.hero-orb-wrap { display: none; }.page-heading { align-items: flex-start; flex-direction: column; }.page-heading-actions { align-self: stretch; }.page-heading-actions .primary-btn,.page-heading-actions .secondary-btn { flex: 1; }.invoice-meta { grid-template-columns: 1fr 1fr; }.invoice-meta .customer-select { grid-column: 1 / -1; }.invoice-meta .add-customer { justify-content: flex-start; }.customer-stats { grid-template-columns: 1fr; }.payment-overview { grid-template-columns: 1fr; }.insight-visual { display: none; } }
@media (max-width: 540px) { .topbar { padding: 0 14px; }.crumbs > span { display: none; }.crumbs h1 { font-size: 16px; }.date-pill span { display: none; }.view { padding: 19px 14px 30px; }.dashboard-hero { min-height: 210px; padding: 25px; }.dashboard-hero h2 { font-size: 29px; }.metric-grid { grid-template-columns: 1fr; gap: 11px; }.metric-card { min-height: 144px; }.metric-spark { bottom: 23px; }.sales-chart-card,.payment-card,.product-table-card,.activity-card { padding: 16px; }.segmented button { padding: 4px 5px; }.chart-wrap { height: 200px; }.donut-layout { gap: 15px; }.donut { width: 120px; height: 120px; }.donut:before { width: 87px; height: 87px; }.payment-legend { gap: 8px; }.page-heading h2 { font-size: 25px; }.page-heading-actions { flex-wrap: wrap; }.page-heading-actions .primary-btn,.page-heading-actions .secondary-btn { min-width: 135px; }.page-heading-actions .primary-btn { flex: 1; }.invoice-meta { grid-template-columns: 1fr; }.invoice-meta .customer-select { grid-column: auto; }.scan-row > button { width: 40px; padding: 0; justify-content: center; font-size: 0; }.scan-row > button svg { width: 17px; }.invoice-notes { grid-template-columns: 1fr; }.customer-grid,.report-cards { grid-template-columns: 1fr; }.toolbar { align-items: stretch; flex-direction: column; }.toolbar-search { min-width: 0; }.toolbar-filters { width: 100%; }.toolbar-filters select,.filter-btn { flex: 1; }.inventory-summary { flex-wrap: wrap; gap: 8px 12px; }.inventory-summary > span { width: 100%; margin-left: 0; }.customer-stats article { min-height: 122px; }.empty-feature { min-height: 420px; padding: 28px 16px; }.empty-feature h2 { font-size: 27px; }.form-grid { grid-template-columns: 1fr; }.app-modal form { padding: 18px; }.toast { right: 15px; bottom: 15px; }.dashboard-grid { gap: 12px; } }