:root {
  color-scheme: light;
  --blue: #087af5;
  --blue-dark: #0067da;
  --ink: #111318;
  --muted: #737b89;
  --line: #e7e9ee;
  --surface: #ffffff;
  --canvas: #f3f4f7;
  --soft: #f0f1f4;
  --green: #1dad64;
  --orange: #f28a27;
  --red: #e34454;
  --sidebar: #121725;
  --shadow: 0 18px 55px rgba(24, 31, 48, 0.09);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; color: var(--ink); background: var(--canvas); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
[hidden] { display: none !important; }

.login-shell { min-height: 100dvh; display: grid; grid-template-columns: minmax(360px, 1.05fr) minmax(390px, .95fr); background: var(--surface); }
.login-brand { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 32px; padding: clamp(48px, 8vw, 118px); color: white; background: radial-gradient(circle at 18% 13%, rgba(70, 151, 255, .42), transparent 30%), radial-gradient(circle at 92% 82%, rgba(30, 219, 173, .22), transparent 28%), linear-gradient(145deg, #061735, #082d64 58%, #07437f); }
.login-brand::before, .login-brand::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.login-brand::before { width: 460px; height: 460px; right: -210px; top: -170px; }
.login-brand::after { width: 330px; height: 330px; left: -170px; bottom: -150px; }
.login-logo-full { position: relative; z-index: 1; display: block; width: clamp(230px, 25vw, 360px); max-width: 78%; height: auto; border-radius: 24px; background: white; box-shadow: 0 24px 65px rgba(0,0,0,.22); }
.eyebrow { margin: 0 0 10px; color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.login-brand .eyebrow { color: #79b7ff; }
.login-brand h1 { max-width: 640px; margin: 0; font-size: clamp(42px, 5vw, 72px); line-height: .98; letter-spacing: -.055em; }
.login-intro { max-width: 590px; margin: 22px 0 0; color: rgba(255,255,255,.72); font-size: clamp(16px, 1.5vw, 20px); line-height: 1.65; }
.login-feature-row { display: flex; flex-wrap: wrap; gap: 24px; color: rgba(255,255,255,.8); font-size: 13px; }
.login-panel { display: grid; place-items: center; padding: 48px; }
.login-card { width: min(100%, 430px); }
.login-card h2 { margin: 0; font-size: 34px; letter-spacing: -.035em; }
.muted { color: var(--muted); }
.login-card > .muted { margin: 10px 0 32px; }
.login-card label { display: grid; gap: 8px; margin: 18px 0; color: #3b4250; font-size: 13px; font-weight: 700; }
input, select, textarea { width: 100%; border: 1px solid #dfe2e8; border-radius: 12px; outline: none; color: var(--ink); background: var(--surface); transition: border-color .18s, box-shadow .18s; }
input, select { height: 48px; padding: 0 14px; }
textarea { min-height: 90px; padding: 12px 14px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(8, 122, 245, .11); }
.password-field { position: relative; }
.password-field input { padding-right: 48px; }
.password-field .icon-button { position: absolute; right: 4px; top: 4px; }
.primary-button, .secondary-button, .danger-button { min-height: 44px; border: 0; border-radius: 12px; padding: 0 18px; font-weight: 750; transition: transform .15s, background .15s; }
.primary-button { color: white; background: var(--blue); box-shadow: 0 9px 24px rgba(8,122,245,.2); }
.primary-button:hover { background: var(--blue-dark); transform: translateY(-1px); }
.secondary-button { color: #313846; background: var(--soft); }
.secondary-button:hover { background: #e5e7ec; }
.danger-button { color: #b72637; background: #fff0f2; }
.full { width: 100%; }
.login-help { text-align: center; color: var(--muted); font-size: 12px; margin: 18px 0 0; }
.form-error { margin: 8px 0; padding: 11px 13px; border-radius: 10px; color: #b42334; background: #fff0f2; font-size: 13px; }
.native-permission-list { display: grid; gap: 10px; margin: 18px 0; }
.native-permission-list > div { display: grid; gap: 4px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 13px; background: #fafbfc; }
.native-permission-list small { color: var(--muted); line-height: 1.45; }
.mobile-logo { display: none; }

.workspace { min-height: 100dvh; display: grid; grid-template-columns: 248px 1fr; }
.sidebar { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; padding: 28px 18px 20px; color: #dce2f0; background: var(--sidebar); }
.sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 0 10px; }
.sidebar-brand > span:last-child { display: grid; gap: 2px; }
.sidebar-brand strong { font-size: 17px; letter-spacing: -.02em; }
.sidebar-brand small { color: #7f899f; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.logo-tile { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: white; background: var(--blue); font-weight: 900; letter-spacing: -.04em; }
.side-nav { display: grid; gap: 7px; margin-top: 42px; }
.nav-item { border: 0; color: #99a3b8; background: transparent; }
.side-nav .nav-item { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 14px; border-radius: 11px; text-align: left; font-weight: 650; }
.nav-item > span { width: 23px; text-align: center; font-size: 20px; line-height: 1; }
.side-nav .nav-item:hover { color: white; background: rgba(255,255,255,.055); }
.side-nav .nav-item.active { color: white; background: linear-gradient(105deg, rgba(8,122,245,.32), rgba(8,122,245,.1)); box-shadow: inset 3px 0 var(--blue); }
.sidebar-footer { margin-top: auto; }
.connection { display: flex; align-items: center; gap: 8px; padding: 13px; color: #778197; font-size: 11px; }
.connection i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(29,173,100,.12); }
.account-button { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; width: 100%; border: 1px solid rgba(255,255,255,.06); border-radius: 13px; padding: 10px; color: white; background: rgba(255,255,255,.035); text-align: left; }
.account-button > span:first-child, .avatar-button { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: #cde4ff; background: #173e6e; font-size: 11px; font-weight: 850; }
.account-button > span:nth-child(2) { display: grid; gap: 2px; }
.account-button small { color: #7d879b; font-size: 10px; }
.account-button b { color: #778197; }
.app-column { min-width: 0; }
.main-content { min-height: 100dvh; padding: clamp(28px, 4vw, 58px); outline: none; }
.mobile-header, .bottom-nav { display: none; }

.page-shell { width: min(100%, 1420px); margin: 0 auto; }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-bottom: 26px; }
.page-header h1 { margin: 0; font-size: clamp(32px, 4vw, 47px); line-height: 1.05; letter-spacing: -.05em; }
.page-header p { margin: 8px 0 0; color: var(--muted); }
.page-actions { display: flex; align-items: center; gap: 9px; }
.icon-button { width: 44px; height: 44px; display: inline-grid; place-items: center; border: 0; border-radius: 12px; color: #596274; background: transparent; font-size: 22px; }
.icon-button:hover { background: #e9ebef; color: var(--ink); }
.icon-button.compact { width: 40px; height: 40px; font-size: 15px; }
.round-button { border-radius: 50%; background: var(--surface); }
.filter-row { display: flex; align-items: center; gap: 10px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.filter-row::-webkit-scrollbar { display: none; }
.filter-pill { flex: 0 0 auto; width: auto; height: 44px; padding: 0 38px 0 15px; border: 0; border-radius: 999px; color: #353c49; background: #e8eaee; font-weight: 700; appearance: none; background-image: linear-gradient(45deg, transparent 50%, #747d8e 50%), linear-gradient(135deg, #747d8e 50%, transparent 50%); background-position: calc(100% - 18px) 19px, calc(100% - 13px) 19px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.search-box { position: relative; min-width: min(350px, 70vw); }
.search-box input { border: 0; border-radius: 999px; padding-left: 42px; background: var(--surface); box-shadow: 0 2px 12px rgba(28,34,48,.04); }
.search-box::before { content: "⌕"; position: absolute; z-index: 1; left: 16px; top: 9px; color: var(--muted); font-size: 24px; }

.summary-card { display: grid; grid-template-columns: 1fr auto; gap: 7px 30px; margin: 22px 0; padding: 24px 28px; border-radius: 22px; background: var(--surface); box-shadow: 0 5px 20px rgba(25,32,48,.035); }
.summary-card strong { font-size: 23px; }
.summary-card b { font-size: 25px; }
.summary-card span { color: var(--muted); }
.catalog-card, .panel { border-radius: 24px; background: var(--surface); box-shadow: 0 7px 28px rgba(25,32,48,.045); }
.product-row { width: 100%; display: grid; grid-template-columns: 66px minmax(0, 1fr) minmax(130px, auto); gap: 18px; align-items: center; min-height: 112px; border: 0; padding: 20px 26px; color: var(--ink); background: transparent; text-align: left; transition: background .15s, transform .15s; }
.product-row + .product-row { border-top: 1px solid var(--line); }
.product-row:hover { background: #f8fbff; }
.product-row:focus-visible { position: relative; z-index: 1; outline: 3px solid rgba(8,122,245,.25); outline-offset: -3px; }
.product-thumb { width: 62px; height: 62px; display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; border-radius: 18px; color: var(--thumb, #5e62dc); background: color-mix(in srgb, var(--thumb, #5e62dc) 12%, white); font-size: 29px; }
.product-thumb img { width: 100%; height: 100%; display: block; object-fit: contain; background: #fff; }
.product-info { min-width: 0; }
.product-info h3 { margin: 0 0 7px; overflow: hidden; text-overflow: ellipsis; font-size: 18px; white-space: nowrap; }
.product-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.variant-badge { padding: 4px 8px; border-radius: 6px; background: var(--soft); }
.product-value { text-align: right; }
.product-value strong { display: block; font-size: 19px; }
.product-value span { display: block; margin-top: 8px; color: var(--muted); font-size: 13px; }
.product-value span.low { color: var(--orange); }
.product-value small { display: block; margin-top: 7px; color: var(--blue); font-size: 10px; opacity: 0; transition: opacity .15s; }
.product-row:hover .product-value small, .product-row:focus-visible .product-value small { opacity: 1; }
.floating-add { position: fixed; right: clamp(24px, 4vw, 62px); bottom: 34px; z-index: 4; width: 62px; height: 62px; border: 0; border-radius: 50%; color: white; background: var(--blue); box-shadow: 0 13px 30px rgba(8,122,245,.33); font-size: 32px; font-weight: 300; }
.product-page-tabs { display: inline-flex; gap: 4px; margin: -10px 0 20px; padding: 4px; border-radius: 13px; background: #e8eaee; }
.product-page-tabs button { min-height: 40px; border: 0; border-radius: 10px; padding: 0 20px; color: var(--muted); background: transparent; font-weight: 800; }
.product-page-tabs button.active { color: var(--blue); background: #fff; box-shadow: 0 3px 12px rgba(25,32,48,.09); }
.category-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.category-summary-grid article { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.category-summary-grid span { color: var(--muted); font-size: 12px; }
.category-summary-grid strong { font-size: 24px; }
.category-management-panel { padding: 20px; }
.category-management-list { display: grid; }
.category-management-row { display: grid; grid-template-columns: 38px minmax(190px, 1fr) auto auto auto; gap: 14px; align-items: center; min-height: 76px; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.category-management-row:last-child { border-bottom: 0; }
.category-management-row.inactive { opacity: .68; }
.category-order { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; color: #596274; background: var(--soft); font-size: 12px; font-weight: 850; }
.category-identity { display: grid; gap: 5px; min-width: 0; }
.category-identity strong, .category-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.category-identity small { color: var(--muted); font-size: 12px; }
.category-status { padding: 6px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.category-status.active { color: #167645; background: #e9f8ef; }
.category-status.inactive { color: #6e7581; background: #eceef2; }
.category-reorder-actions, .category-row-actions { display: flex; align-items: center; gap: 7px; }
.category-reorder-actions .icon-button:disabled { opacity: .25; }
.category-row-actions .secondary-button, .category-row-actions .danger-button { min-height: 38px; padding: 0 13px; }
.category-picker-field { display: grid; gap: 7px; color: #4f5766; font-size: 12px; font-weight: 700; }
.category-picker-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.category-picker-label button { border: 0; padding: 0; color: var(--blue); background: transparent; font-size: 11px; font-weight: 800; }
.quick-category-editor { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding-top: 4px; }
.quick-category-editor .secondary-button { min-height: 48px; }
.empty-state { display: grid; place-items: center; gap: 10px; min-height: 340px; padding: 40px; color: var(--muted); text-align: center; }
.empty-state b { color: var(--ink); font-size: 19px; }
.loading-grid { display: grid; gap: 12px; }
.skeleton { min-height: 100px; border-radius: 20px; background: linear-gradient(100deg, #eceef2 30%, #f7f8fa 50%, #eceef2 70%); background-size: 240% 100%; animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { background-position-x: -240%; } }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.metric-card { padding: 20px; border: 1px solid rgba(20,30,48,.04); border-radius: 18px; background: var(--surface); }
.metric-card .metric-label { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; font-weight: 650; }
.metric-card strong { display: block; margin-top: 16px; font-size: clamp(20px, 2vw, 28px); letter-spacing: -.035em; }
.metric-card small { display: block; margin-top: 6px; color: var(--green); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .7fr); gap: 18px; }
.panel { padding: 24px; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.panel-header h2 { margin: 0; font-size: 18px; }
.panel-header span { color: var(--muted); font-size: 12px; }
.bar-chart { height: 255px; display: flex; align-items: stretch; gap: 9px; border-bottom: 1px solid var(--line); }
.bar-column { flex: 1; min-width: 14px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; }
.bar-column i { width: min(100%, 34px); min-height: 3px; border-radius: 7px 7px 2px 2px; background: linear-gradient(180deg, #56aaff, var(--blue)); transition: height .4s; }
.bar-column span { color: var(--muted); font-size: 9px; white-space: nowrap; }
.ranking-list { display: grid; }
.ranking-row { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 13px 0; }
.ranking-row + .ranking-row { border-top: 1px solid var(--line); }
.ranking-row > span:first-child { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; color: var(--blue); background: #eaf4ff; font-size: 11px; font-weight: 800; }
.ranking-row strong { display: block; font-size: 13px; }
.ranking-row small { color: var(--muted); }
.ranking-row b { font-size: 13px; }

.pos-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(330px, .55fr); gap: 18px; align-items: start; }
.sale-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.sale-card { display: grid; grid-template-columns: 48px 1fr; gap: 13px; min-height: 118px; border: 1px solid transparent; border-radius: 17px; padding: 16px; color: var(--ink); background: var(--surface); text-align: left; box-shadow: 0 4px 15px rgba(25,32,48,.035); }
.sale-card:hover { border-color: #cfe4ff; transform: translateY(-1px); }
.sale-card .product-thumb { width: 48px; height: 48px; border-radius: 14px; font-size: 22px; }
.sale-card h3 { margin: 2px 0 6px; font-size: 14px; line-height: 1.3; }
.sale-card strong { display: block; margin-top: 10px; color: var(--blue); font-size: 15px; }
.sale-card small { color: var(--muted); }
.cart-panel { position: sticky; top: 28px; overflow: hidden; }
.cart-panel .panel-header { padding: 20px 20px 0; }
.cart-lines { max-height: calc(100dvh - 540px); overflow-y: auto; padding: 0 20px; }
.cart-line { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); }
.cart-line:first-child { border-top: 0; }
.cart-line h4 { margin: 0 0 4px; font-size: 13px; }
.cart-line small { color: var(--muted); }
.cart-line-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.quantity-control { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.quantity-control button { width: 26px; height: 26px; border: 0; border-radius: 7px; background: var(--soft); }
.line-discount-button { align-self: flex-end; height: 26px; margin-top: 10px; border: 0; padding: 0 8px; border-radius: 7px; color: var(--blue); background: #eaf4ff; font-size: 10px; font-weight: 750; }
.cart-line-value { min-width: 102px; display: grid; justify-items: end; align-content: start; gap: 4px; }
.cart-line-value strong { font-size: 13px; }
.cart-line-value del { color: var(--muted); font-size: 10px; }
.cart-line-value .cart-discount-note { color: var(--green); font-size: 9px; white-space: nowrap; }
.remove-line { border: 0; color: var(--red); background: transparent; font-size: 18px; }
.cart-footer { display: grid; gap: 12px; padding: 18px 20px 20px; border-top: 1px solid var(--line); background: #fbfbfc; }
.cart-customer-control { display: grid; gap: 6px; padding-bottom: 11px; border-bottom: 1px dashed var(--line); }
.cart-customer-control label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 700; }
.cart-customer-control select { height: 41px; padding: 0 9px; color: var(--ink); background: white; font-size: 12px; }
.cart-customer-control .secondary-button { min-height: 41px; padding: 0 12px; color: var(--blue); background: #eaf4ff; font-size: 11px; white-space: nowrap; }
.cart-customer-label { color: var(--muted); font-size: 10px; font-weight: 700; }
.cart-customer-picker-button { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 54px; border: 1px solid var(--line); border-radius: 13px; padding: 7px 11px; color: var(--ink); background: white; text-align: left; }
.cart-customer-picker-button:hover { border-color: #b9d8ff; background: #f8fbff; }
.cart-customer-picker-button .customer-avatar { width: 36px; height: 36px; border-radius: 11px; }
.cart-customer-picker-button > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.cart-customer-picker-button strong, .cart-customer-picker-button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-customer-picker-button strong { font-size: 12px; }
.cart-customer-picker-button small { color: var(--muted); font-size: 10px; }
.cart-customer-picker-button > b { color: var(--blue); font-size: 19px; }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; }
.cart-total strong { font-size: 23px; }
.cart-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cart-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 700; }
.cart-controls select { height: 39px; padding: 0 9px; font-size: 12px; }
.combined-payment-control { display: grid; gap: 9px; border-radius: 12px; padding: 12px; background: #f2f7ff; }
.combined-payment-heading, .combined-payment-summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.combined-payment-heading strong { font-size: 12px; }
.combined-payment-heading small { color: var(--muted); font-size: 10px; }
.combined-payment-grid { display: grid; grid-template-columns: 1fr; gap: 7px; }
.combined-payment-grid label { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 8px; color: var(--muted); font-size: 10px; font-weight: 700; }
.combined-payment-grid .money-input input { width: 100%; height: 38px; padding-left: 8px; padding-right: 25px; font-size: 11px; }
.combined-payment-grid input[type="number"] { appearance: textfield; }
.combined-payment-grid input[type="number"]::-webkit-inner-spin-button,
.combined-payment-grid input[type="number"]::-webkit-outer-spin-button { margin: 0; appearance: none; }
.combined-payment-grid .money-input b { right: 8px; top: 10px; }
.combined-payment-summary { font-size: 10px; }
.combined-payment-summary > span { color: var(--muted); }
.combined-payment-summary .valid { color: var(--green); }
.combined-payment-summary .invalid { color: var(--red); }
.order-discount-control { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 750; }
.money-input { position: relative; }
.money-input input { height: 41px; padding-right: 32px; color: var(--ink); background: white; font-weight: 750; }
.money-input b { position: absolute; right: 12px; top: 11px; color: var(--muted); font-size: 12px; }
.cart-summary { display: grid; gap: 7px; padding: 10px 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); }
.cart-summary > div { display: flex; justify-content: space-between; gap: 18px; color: var(--muted); font-size: 11px; }
.cart-summary b { color: #4f5766; }
.discount-quick.full-row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.discount-quick > span { margin-right: 3px; color: var(--muted); font-size: 12px; font-weight: 700; }
.discount-quick .secondary-button { min-height: 36px; padding: 0 14px; }
.line-discount-explanation { display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; border-radius: 12px; padding: 13px 14px; color: var(--muted); background: #f3f7fc; font-size: 12px; }
.line-discount-explanation b { color: var(--ink); text-align: right; }
.checkout-actions { display: grid; gap: 8px; }
.cod-order-confirmation { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; border: 1px solid #d9e7f7; border-radius: 12px; padding: 10px 12px; background: white; cursor: pointer; }
.cod-order-confirmation.disabled { opacity: .55; cursor: not-allowed; }
.cod-order-confirmation input { position: absolute; width: 1px; height: 1px; padding: 0; opacity: 0; pointer-events: none; }
.cod-confirm-toggle { position: relative; width: 42px; height: 24px; border-radius: 999px; background: #c8ced8; transition: background .18s; }
.cod-confirm-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: white; box-shadow: 0 2px 6px rgba(28, 39, 56, .22); transition: transform .18s; }
.cod-order-confirmation input:checked + .cod-confirm-toggle { background: var(--blue); }
.cod-order-confirmation input:checked + .cod-confirm-toggle::after { transform: translateX(18px); }
.cod-order-confirmation input:focus-visible + .cod-confirm-toggle { box-shadow: 0 0 0 4px rgba(8, 122, 245, .14); }
.cod-confirm-copy { display: grid; gap: 2px; }
.cod-confirm-copy strong { font-size: 11px; }
.cod-confirm-copy small { color: var(--muted); font-size: 9px; line-height: 1.35; }
.cod-order-button { min-height: 46px; border: 1px solid #b9d9ff; border-radius: 12px; padding: 0 16px; color: #075eaf; background: #eaf4ff; font-weight: 800; }
.cod-order-button:hover { border-color: #83bcff; background: #dceeff; }
.cod-order-help { color: var(--muted); font-size: 9px; line-height: 1.45; text-align: center; }

.invoice-page { max-width: 1040px; }
.invoice-toolbar { display: grid; gap: 12px; margin-bottom: 18px; }
.invoice-toolbar .filter-row { padding: 0; }
.invoice-filter-icon { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #596274; background: #e8eaee; font-size: 23px; line-height: 1; transform: rotate(180deg); }
.invoice-period-pill { color: var(--blue); background-color: #e4f1ff; }
.invoice-custom-range { display: flex; align-items: end; gap: 10px; border-radius: 18px; padding: 14px 16px; background: var(--surface); }
.invoice-custom-range label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 750; }
.invoice-custom-range input { width: 170px; height: 40px; }
.invoice-custom-range > span { padding-bottom: 12px; color: var(--muted); font-size: 12px; }
.invoice-custom-range .secondary-button { min-height: 40px; color: var(--blue); background: #eaf4ff; }
.invoice-summary-card { display: grid; grid-template-columns: 1fr auto; gap: 7px 24px; margin-bottom: 22px; border-radius: 20px; padding: 22px 26px; background: var(--surface); box-shadow: 0 5px 20px rgba(25,32,48,.035); }
.invoice-summary-card > span { font-size: 20px; font-weight: 800; }
.invoice-summary-card > b { font-size: 24px; text-align: right; }
.invoice-summary-card > strong { grid-column: 1 / -1; color: #303744; font-size: 14px; }
.invoice-list { display: grid; gap: 24px; }
.invoice-day-group { overflow: hidden; border-radius: 22px; background: var(--surface); box-shadow: 0 6px 24px rgba(25,32,48,.045); }
.invoice-day-group h2 { margin: 0; padding: 22px 26px 12px; color: #748093; font-size: 14px; letter-spacing: .025em; }
.invoice-day-list { display: grid; }
.invoice-row { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 22px; border: 0; padding: 18px 26px 20px; color: var(--ink); background: transparent; text-align: left; }
.invoice-row + .invoice-row { border-top: 1px solid var(--line); }
.invoice-row:hover { background: #f8fbff; }
.invoice-row-main, .invoice-row-value { display: grid; min-width: 0; }
.invoice-row-main { gap: 4px; }
.invoice-row-main > strong { overflow: hidden; text-overflow: ellipsis; font-size: 17px; white-space: nowrap; }
.invoice-code { color: #586375; font-size: 13px; font-weight: 750; }
.invoice-row time { color: var(--muted); font-size: 12px; }
.invoice-item-summary { display: grid; gap: 3px; margin-top: 7px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.invoice-item-summary b { color: #3b4350; }
.invoice-row-value { justify-items: end; gap: 7px; text-align: right; }
.invoice-row-value > b { font-size: 18px; }
.invoice-row-value > span { color: var(--muted); font-size: 13px; font-weight: 650; }
.invoice-cancelled { border-radius: 999px; padding: 4px 8px; color: #b32f3e; background: #fff0f2; font-size: 10px; font-weight: 750; }
.status-chip { display: inline-flex; width: max-content; padding: 5px 9px; border-radius: 99px; color: #167645 !important; background: #e9f8ef; font-size: 11px; font-weight: 750; }
.status-chip.cancelled { color: #b32f3e !important; background: #fff0f2; }
.status-chip.shipping { color: #a75805 !important; background: #fff2df; }
.status-chip.pending { color: #325da8 !important; background: #edf3ff; }
.status-chip.completed, .status-chip.success { color: #167645 !important; background: #e9f8ef; }
.status-chip.warning { color: #9b5b08 !important; background: #fff3d9; }
.status-chip.info { color: #245fbd !important; background: #eaf2ff; }
.status-chip.danger { color: #b32f3e !important; background: #fff0f2; }

.order-list { display: grid; gap: 10px; }
.order-row { display: grid; grid-template-columns: minmax(130px, .7fr) minmax(180px, 1fr) minmax(100px, .55fr) minmax(135px, .65fr) auto; align-items: center; gap: 18px; width: 100%; border: 1px solid transparent; border-radius: 17px; padding: 18px 20px; color: var(--ink); background: var(--surface); text-align: left; }
.order-row:hover { border-color: #d6e8ff; box-shadow: 0 8px 25px rgba(25,32,48,.07); }
.order-code, .order-customer, .order-created { display: grid; gap: 5px; min-width: 0; }
.order-row small { color: var(--muted); font-size: 10px; }
.order-customer strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-created b { font-size: 11px; }
.order-total { text-align: right; font-size: 15px; }
.cod-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; border-radius: 14px; padding: 14px; color: #075eaf; background: #eaf4ff; }
.cod-banner > span { font-size: 25px; }
.cod-banner > div { display: grid; gap: 3px; }
.cod-banner small { color: #4e7398; line-height: 1.4; }

.more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.module-card { min-height: 130px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid transparent; border-radius: 18px; padding: 20px; color: var(--ink); background: var(--surface); text-align: left; }
.module-card:hover { border-color: #d6e8ff; box-shadow: 0 9px 28px rgba(25,32,48,.06); }
.module-card > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: var(--blue); background: #eaf4ff; font-size: 20px; }
.module-card strong { display: block; margin-top: 22px; }
.module-card small { color: var(--muted); }
.generic-table { overflow-x: auto; }
.generic-table table { width: 100%; border-collapse: collapse; }
.generic-table th, .generic-table td { padding: 13px 14px; border-bottom: 1px solid var(--line); text-align: left; font-size: 13px; white-space: nowrap; }
.generic-table th { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.user-management-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.user-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.user-summary-grid article { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; border-radius: 18px; background: var(--surface); box-shadow: 0 7px 28px rgba(25,32,48,.045); }
.user-summary-grid span { color: var(--muted); font-size: 13px; font-weight: 700; }
.user-summary-grid strong { font-size: 28px; }
.managed-users-panel, .managed-roles-panel { margin-top: 18px; }
.managed-user-list { display: grid; }
.managed-user-row { display: grid; grid-template-columns: 48px minmax(180px, 1.4fr) minmax(150px, 1fr) minmax(145px, .9fr) auto 16px; align-items: center; gap: 14px; padding: 15px 6px; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); background: transparent; text-align: left; }
.managed-user-row:last-child { border-bottom: 0; }
.managed-user-row:hover { background: #f8fbff; }
.managed-user-avatar { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: #176dcc; background: #e9f4ff; font-weight: 850; }
.managed-user-main, .managed-user-role, .managed-user-login { display: grid; gap: 4px; min-width: 0; }
.managed-user-main strong, .managed-user-role strong, .managed-user-login strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.managed-user-main small, .managed-user-role small, .managed-user-login small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.managed-user-login strong { font-size: 12px; font-weight: 650; }
.user-status { display: inline-flex; justify-content: center; width: max-content; padding: 6px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.user-status.active { color: #167645; background: #e9f8ef; }
.user-status.locked { color: #a75805; background: #fff2df; }
.user-status.disabled { color: #b32f3e; background: #fff0f2; }
.managed-user-chevron { color: var(--muted); font-size: 24px; }
.managed-role-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.managed-role-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 78px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 15px; color: var(--ink); background: #fff; text-align: left; }
.managed-role-card:not(:disabled):hover { border-color: #a9d1ff; background: #f8fbff; }
.managed-role-card:disabled { opacity: 1; cursor: default; }
.managed-role-card > span:first-child { display: grid; gap: 5px; }
.managed-role-card small { color: var(--muted); }
.role-kind { padding: 5px 8px; border-radius: 999px; color: #546071; background: var(--soft); font-size: 10px; font-weight: 800; white-space: nowrap; }
.protected-account-note { grid-column: 1 / -1; display: grid; gap: 5px; padding: 14px 16px; border-radius: 14px; color: #73500a; background: #fff6df; }
.protected-account-note span, .form-note { color: var(--muted); font-size: 12px; }
.form-note { margin: 16px 0 0; }
.role-editor-modal { max-height: min(900px, 92dvh); overflow: auto; }
.permission-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-top: 18px; }
.permission-group { display: grid; align-content: start; gap: 5px; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 14px; }
.permission-group legend { padding: 0 7px; font-size: 12px; font-weight: 850; }
.permission-option { display: grid; grid-template-columns: 20px 1fr; align-items: start; gap: 9px; padding: 8px; border-radius: 10px; cursor: pointer; }
.permission-option:hover { background: var(--soft); }
.permission-option input { width: 18px; height: 18px; margin-top: 2px; }
.permission-option span { display: grid; gap: 2px; }
.permission-option strong { font-size: 12px; }
.permission-option small { color: var(--muted); font-size: 10px; }

.modal-root { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 22px; background: rgba(9,14,26,.46); backdrop-filter: blur(5px); }
.modal-card { width: min(100%, 560px); max-height: min(86dvh, 780px); overflow: auto; border-radius: 22px; padding: 24px; background: var(--surface); box-shadow: 0 28px 80px rgba(9,14,26,.25); }
.modal-card.wide { width: min(100%, 800px); }
.modal-header { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.modal-header h2 { margin: 0; font-size: 22px; }
.modal-header p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.modal-form { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.modal-form label { display: grid; gap: 7px; color: #4f5766; font-size: 12px; font-weight: 700; }
.modal-form label.full-row { grid-column: 1 / -1; }
.form-section-title { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 4px; padding: 13px 0 4px; border-bottom: 1px solid var(--line); }
.form-section-title:first-of-type { padding-top: 0; }
.form-section-title span { color: var(--muted); font-size: 11px; }
.product-image-editor { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; padding: 4px 0 8px; }
.product-image-preview { width: 112px; height: 112px; display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; color: var(--thumb, #5e62dc); background: color-mix(in srgb, var(--thumb, #5e62dc) 10%, white); font-size: 42px; }
.product-image-preview img { width: 100%; height: 100%; display: block; object-fit: contain; background: white; }
.image-upload-control { flex: 1; }
.image-upload-control input[type="file"] { min-height: 46px; padding: 9px; color: var(--muted); background: var(--soft); }
.image-upload-control input[type="file"]::file-selector-button { height: 28px; margin-right: 10px; border: 0; border-radius: 8px; padding: 0 12px; color: var(--blue); background: #eaf4ff; font-weight: 750; }
.image-upload-control small { color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.45; }
.checkbox-label { grid-template-columns: auto 1fr !important; align-items: center; }
.checkbox-label input { width: 18px; height: 18px; }
.modal-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 9px; padding-top: 8px; }
.invoice-detail-grid { display: grid; grid-template-columns: 1fr auto; gap: 9px 20px; padding: 14px 0; }
.invoice-detail-grid span { color: var(--muted); }
.invoice-item-value { display: grid; justify-items: end; gap: 5px; text-align: right; }
.invoice-item-value small { color: var(--green); }
.delete-invoice-warning { display: grid; gap: 6px; border: 1px solid #ffd2d8; border-radius: 14px; padding: 14px 16px; color: #8f2230; background: #fff4f5; }
.delete-invoice-warning span { color: #98535c; font-size: 12px; line-height: 1.5; }

.purchase-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.purchase-summary-grid article { display: grid; gap: 8px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.purchase-summary-grid span { color: var(--muted); font-size: 12px; }
.purchase-summary-grid strong { font-size: 21px; }
.weighted-cost-note { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; padding: 15px 18px; border: 1px solid #bee7dc; border-radius: 16px; background: #f0fbf8; color: #156b59; }
.weighted-cost-note > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: #d8f4ec; font-size: 22px; font-weight: 800; }
.weighted-cost-note p { margin: 3px 0 0; color: #4d776d; font-size: 13px; }
.purchase-receipt-list, .supplier-list { display: grid; }
.purchase-receipt-row, .supplier-row { display: grid; grid-template-columns: 1fr 2fr 1.2fr auto 18px; gap: 18px; align-items: center; width: 100%; padding: 16px 18px; border: 0; border-bottom: 1px solid var(--line); background: #fff; color: inherit; text-align: left; }
.purchase-receipt-row:last-child, .supplier-row:last-child { border-bottom: 0; }
.purchase-receipt-row:hover, .supplier-row:hover { background: #f8fafb; }
.purchase-receipt-row span, .supplier-row span { display: grid; gap: 4px; }
.purchase-receipt-row small, .supplier-row small { color: var(--muted); font-size: 12px; }
.purchase-total { text-align: right; }
.purchase-status { display: inline-flex !important; padding: 6px 10px; border-radius: 999px; color: #176a55; background: #eaf8f3; font-size: 12px; font-weight: 750; white-space: nowrap; }
.purchase-status.cancelled { color: #9a3040; background: #fff0f2; }
.supplier-row { grid-template-columns: auto 1.7fr 1fr 1fr 1fr 18px; }
.supplier-avatar { display: grid !important; width: 40px; height: 40px; place-items: center; border-radius: 13px; color: #116d58; background: #e3f6f0; font-weight: 850; }
.modal-card.extra-wide { width: min(1040px, calc(100vw - 32px)); }

.repair-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-bottom: 16px; }
.repair-summary-grid article { display: grid; gap: 5px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.repair-summary-grid span, .repair-summary-grid small { color: var(--muted); font-size: 11px; }
.repair-summary-grid strong { color: var(--ink); font-size: 27px; }
.repair-stage-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.repair-stage-toolbar label { display: grid; gap: 5px; min-width: min(260px, 70vw); }
.repair-stage-toolbar label span, .repair-stage-toolbar > span { color: var(--muted); font-size: 10px; font-weight: 700; }
.repair-stage-toolbar select { min-height: 38px; padding: 0 34px 0 11px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: var(--soft); font: inherit; }
.repair-ticket-list { padding: 0; overflow: hidden; }
.repair-ticket-row { width: 100%; display: grid; grid-template-columns: 46px minmax(0, 1fr) minmax(135px, auto) auto 12px; align-items: center; gap: 14px; border: 0; border-top: 1px solid var(--line); padding: 16px 18px; color: var(--ink); background: #fff; text-align: left; }
.repair-ticket-row:first-child { border-top: 0; }
.repair-ticket-row:hover { background: #f8fbff; }
.repair-ticket-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: #245fbd; background: #eaf2ff; font-size: 21px; }
.repair-ticket-main, .repair-ticket-time { display: grid; gap: 4px; min-width: 0; }
.repair-ticket-main strong { font-size: 13px; }
.repair-ticket-main b { margin-top: 3px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.repair-ticket-main small, .repair-ticket-time small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.repair-ticket-time { text-align: right; }
.repair-ticket-time b { font-size: 11px; }
.repair-ticket-row > i { color: var(--muted); font-size: 20px; font-style: normal; }
.repair-editor .modal-form { padding-top: 2px; }
.repair-form-section { grid-column: 1 / -1; margin: 4px 0 -3px; padding: 15px 16px; border-radius: 15px; background: #f4f8ff; }
.repair-form-section h3, .repair-form-section p { margin: 0; }
.repair-form-section h3 { color: #224f92; font-size: 13px; }
.repair-form-section p { margin-top: 4px; color: var(--muted); font-size: 10px; }
.repair-customer-result { grid-column: 1 / -1; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 15px; border: 1px dashed #c7ced8; border-radius: 15px; background: #fafbfc; }
.repair-customer-result.matched { border-style: solid; border-color: #b9e3c9; background: #f0fbf4; }
.repair-customer-result > div { display: grid; gap: 3px; min-width: 0; }
.repair-customer-result strong { font-size: 12px; }
.repair-customer-result small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.repair-customer-result > b { color: #167645; font-size: 11px; }
.repair-lookup-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #245fbd; background: #eaf2ff; font-weight: 850; }
.repair-customer-result.matched .repair-lookup-icon { color: #167645; background: #dff5e7; }
.repair-phone-field small { color: var(--muted); font-weight: 500; }
.repair-detail-hero { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px; border-radius: 17px; background: #f4f8ff; }
.repair-detail-hero > span:first-child { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px; color: #245fbd; background: #e1edff; font-size: 24px; }
.repair-detail-hero > div { display: grid; gap: 3px; min-width: 0; }
.repair-detail-hero small, .repair-detail-hero p { margin: 0; color: var(--muted); font-size: 10px; }
.repair-detail-hero strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.repair-detail-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.repair-detail-columns section { padding: 15px; border: 1px solid var(--line); border-radius: 15px; }
.repair-detail-columns h3 { margin: 0; font-size: 12px; }
.repair-notes { display: grid; gap: 9px; margin-top: 14px; }
.repair-notes article { display: grid; gap: 5px; padding: 13px 15px; border-radius: 13px; background: var(--soft); }
.repair-notes span { color: var(--muted); font-size: 10px; }
.repair-notes strong { font-size: 12px; line-height: 1.45; }
.repair-money-grid { margin-top: 8px; }
.repair-stage-form { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) auto; align-items: end; gap: 10px; margin-top: 14px; padding: 14px; border: 1px solid #cfe0f8; border-radius: 15px; background: #f4f8ff; }
.repair-stage-form label { display: grid; gap: 5px; }
.repair-stage-form label span { color: var(--muted); font-size: 10px; font-weight: 700; }
.repair-stage-form select, .repair-stage-form input { min-height: 40px; padding: 0 11px; border: 1px solid var(--line); border-radius: 11px; background: #fff; font: inherit; }
.repair-stage-history { margin-top: 14px; padding: 15px; border: 1px solid var(--line); border-radius: 15px; }
.repair-stage-history h3, .repair-stage-history p { margin: 0; }
.repair-stage-history > article { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.repair-stage-history > article:first-of-type { margin-top: 8px; border-top: 0; }
.repair-stage-history > article div { display: grid; gap: 2px; }
.repair-stage-history > article strong { font-size: 11px; }
.repair-stage-history > article small, .repair-stage-history p { color: var(--muted); font-size: 10px; }
.purchase-editor form { display: grid; gap: 16px; }
.purchase-editor-top { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(360px, 1.3fr); gap: 16px; }
.purchase-editor-top label, .purchase-line-fields label, .purchase-totals-editor label, .purchase-cancel-reason { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 700; }
.purchase-editor-top select, .purchase-line-fields input, .purchase-totals-editor input, .purchase-serials textarea, .purchase-cancel-reason textarea { min-height: 44px; border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; background: #fff; color: var(--ink); font: inherit; }
.purchase-add-product { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.purchase-draft-lines { display: grid; gap: 12px; max-height: 44vh; overflow: auto; padding-right: 4px; }
.purchase-draft-line { display: grid; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: #fbfcfd; }
.purchase-line-heading { display: flex; justify-content: space-between; gap: 12px; }
.purchase-line-heading div { display: grid; gap: 3px; }
.purchase-line-heading small { color: var(--muted); }
.purchase-line-fields { display: grid; grid-template-columns: .55fr 1fr 1fr; gap: 12px; }
.purchase-serials { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 700; }
.purchase-cost-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.purchase-cost-preview span { padding: 9px 10px; border-radius: 10px; color: #46635d; background: #edf7f4; font-size: 12px; }
.purchase-cost-preview b { color: #146653; }
.purchase-totals-editor { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)) minmax(180px, 1.25fr); gap: 12px; align-items: end; padding-top: 14px; border-top: 1px solid var(--line); }
.purchase-grand-total { display: grid; gap: 4px; text-align: right; }
.purchase-grand-total span, .purchase-grand-total small { color: var(--muted); font-size: 12px; }
.purchase-grand-total strong { color: var(--brand); font-size: 23px; }
.purchase-form-error { margin: 0; color: #a62536; font-size: 13px; }
.purchase-detail-items { margin-top: 18px; }
.purchase-detail-items h3 { margin: 0 0 10px; }
.purchase-detail-item { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.purchase-detail-item > div { display: grid; gap: 4px; }
.purchase-detail-item > div:last-child { text-align: right; }
.purchase-detail-item small, .purchase-detail-item span { color: var(--muted); font-size: 12px; }
.purchase-cancel-reason { margin-top: 16px; }

.inventory-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.inventory-summary-grid article { display: grid; gap: 8px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.inventory-summary-grid span { color: var(--muted); font-size: 12px; }
.inventory-summary-grid strong { font-size: 21px; }
.inventory-toolbar { display: grid; grid-template-columns: auto minmax(240px, 1fr) minmax(170px, auto); gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.inventory-tabs { display: inline-flex; gap: 3px; padding: 3px; border-radius: 11px; background: var(--soft); }
.inventory-tabs button { min-height: 38px; border: 0; border-radius: 9px; padding: 0 14px; color: var(--muted); background: transparent; font-weight: 750; }
.inventory-tabs button.active { color: var(--blue); background: #fff; box-shadow: 0 2px 10px rgba(24,34,58,.08); }
.inventory-toolbar select { min-height: 44px; border: 1px solid var(--line); border-radius: 11px; padding: 0 36px 0 12px; color: var(--ink); background: #fff; font: inherit; font-weight: 650; }
.inventory-list, .inventory-movement-list { display: grid; }
.inventory-row, .inventory-movement-row { display: grid; grid-template-columns: auto minmax(220px, 1fr) minmax(90px, auto) minmax(130px, auto) 18px; gap: 16px; align-items: center; width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: 15px 18px; color: inherit; background: #fff; text-align: left; }
.inventory-row:last-child, .inventory-movement-row:last-child { border-bottom: 0; }
.inventory-row:hover, .inventory-movement-row:hover { background: #f8fafb; }
.inventory-main { display: grid; gap: 4px; min-width: 0; }
.inventory-main strong, .inventory-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inventory-main small, .inventory-reserved small, .inventory-number small { color: var(--muted); font-size: 12px; }
.inventory-reserved, .inventory-number { display: grid; justify-items: end; gap: 4px; text-align: right; }
.inventory-reserved strong, .inventory-number strong { font-size: 17px; }
.inventory-number.low strong { color: var(--red); }
.inventory-movement-row { grid-template-columns: auto minmax(220px, 1fr) auto 18px; }
.movement-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; font-size: 21px; font-weight: 900; }
.movement-icon.incoming { color: #14735c; background: #e4f7f1; }
.movement-icon.outgoing { color: #aa3144; background: #fff0f2; }
.movement-delta { font-size: 18px; font-weight: 850; }
.movement-delta.incoming { color: var(--green); }
.movement-delta.outgoing { color: var(--red); }
.inventory-detail-product { display: flex; align-items: center; gap: 14px; margin-bottom: 15px; padding: 14px; border-radius: 15px; background: var(--soft); }
.inventory-detail-product > div:last-child { display: grid; gap: 5px; }
.inventory-detail-product span { color: var(--muted); font-size: 12px; }
.inventory-detail-summary { display: grid; grid-template-columns: 1fr auto; gap: 10px 18px; padding: 16px 2px; }
.inventory-detail-summary span { color: var(--muted); }
.inventory-detail-summary strong { text-align: right; }
.inventory-detail-actions { display: flex; align-items: center; gap: 14px; margin: 4px 0 18px; }
.inventory-detail-actions small { color: var(--muted); }
.inventory-history { padding-top: 16px; border-top: 1px solid var(--line); }
.inventory-history h3 { margin: 0 0 10px; }
.compact-list { max-height: 340px; overflow: auto; border: 1px solid var(--line); border-radius: 14px; }
.compact-list .inventory-movement-row { grid-template-columns: auto minmax(180px, 1fr) auto 14px; padding: 12px 13px; }

@media (max-width: 800px) {
  .purchase-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inventory-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inventory-toolbar { grid-template-columns: 1fr; }
  .inventory-tabs { width: 100%; }
  .inventory-tabs button { flex: 1; }
  .inventory-row { grid-template-columns: auto minmax(0, 1fr) auto 14px; gap: 11px; padding: 13px; }
  .inventory-row .inventory-reserved { display: none; }
  .inventory-row .product-thumb { width: 48px; height: 48px; }
  .inventory-number small { display: none; }
  .inventory-movement-row { grid-template-columns: auto minmax(0, 1fr) auto 12px; gap: 10px; padding: 13px; }
  .inventory-detail-actions { align-items: flex-start; flex-direction: column; }
  .purchase-receipt-row { grid-template-columns: 1fr auto; }
  .purchase-receipt-row .purchase-supplier, .purchase-receipt-row .purchase-total { grid-column: 1; text-align: left; }
  .purchase-receipt-row .purchase-status { grid-column: 2; grid-row: 1; }
  .supplier-row { grid-template-columns: auto 1fr 18px; }
  .supplier-row > span:nth-child(n+3):not(:last-child) { display: none; }
  .purchase-editor-top, .purchase-add-product, .purchase-line-fields, .purchase-totals-editor, .purchase-cost-preview { grid-template-columns: 1fr; }
  .purchase-draft-lines { max-height: none; }
  .purchase-detail-item { grid-template-columns: 1fr; }
  .purchase-detail-item > div:last-child { text-align: left; }
}
.delete-invoice-products { max-height: 190px; overflow: auto; margin: 14px 0; padding: 0; list-style: none; }
.delete-invoice-products li { display: flex; justify-content: space-between; gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.delete-invoice-products li b { flex: 0 0 auto; color: var(--green); }
.delete-reason-label { display: grid; gap: 7px; color: #4f5766; font-size: 12px; font-weight: 700; }
.delete-reason-label textarea { min-height: 78px; }
.customer-summary { margin-bottom: 14px; }
.customer-list { display: grid; gap: 9px; }
.customer-row { display: grid; grid-template-columns: 52px minmax(180px, 1fr) minmax(78px, .35fr) minmax(130px, .55fr) minmax(145px, .6fr) auto; align-items: center; gap: 17px; width: 100%; border: 1px solid transparent; border-radius: 17px; padding: 16px 18px; color: var(--ink); background: var(--surface); text-align: left; }
.customer-row:hover { border-color: #d6e8ff; box-shadow: 0 7px 24px rgba(25,32,48,.055); }
.customer-avatar { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; color: var(--blue); background: #eaf4ff; font-size: 13px; font-weight: 850; }
.customer-identity, .customer-stat, .customer-last { display: grid; gap: 5px; min-width: 0; }
.customer-identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-row small { color: var(--muted); font-size: 10px; }
.customer-stat b, .customer-last b { font-size: 12px; }
.customer-edit-hint { color: var(--blue); font-size: 11px; font-weight: 750; }
.customer-history-modal { gap: 16px; }
.customer-history-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.customer-history-summary > div { display: grid; gap: 6px; border-radius: 14px; padding: 14px 16px; background: var(--soft); }
.customer-history-summary small { color: var(--muted); font-size: 10px; font-weight: 700; }
.customer-history-summary strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.customer-history-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 2px; }
.customer-history-heading h3, .customer-history-heading p { margin: 0; }
.customer-history-heading h3 { font-size: 16px; }
.customer-history-heading p { margin-top: 4px; color: var(--muted); font-size: 11px; }
.customer-history-heading > span { min-width: 30px; border-radius: 999px; padding: 5px 9px; color: var(--blue); background: #eaf4ff; font-size: 11px; font-weight: 800; text-align: center; }
.customer-history-list { display: grid; max-height: min(460px, 52dvh); overflow: auto; border: 1px solid var(--line); border-radius: 15px; background: white; }
.customer-history-invoice { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; gap: 14px; width: 100%; border: 0; padding: 14px 16px; color: var(--ink); background: transparent; text-align: left; }
.customer-history-invoice + .customer-history-invoice { border-top: 1px solid var(--line); }
.customer-history-invoice:hover { background: #f7fbff; }
.customer-history-main, .customer-history-value { display: grid; gap: 4px; min-width: 0; }
.customer-history-main strong { font-size: 13px; }
.customer-history-main time, .customer-history-main small, .customer-history-value small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.customer-history-value { justify-items: end; text-align: right; }
.customer-history-value b { font-size: 13px; }
.customer-history-value em { border-radius: 999px; padding: 3px 7px; color: #b32f3e; background: #fff0f2; font-size: 9px; font-style: normal; font-weight: 750; }
.customer-history-arrow { color: var(--blue); font-size: 20px; font-weight: 700; }
.customer-picker-modal { display: grid; gap: 12px; }
.customer-picker-modal .modal-header { margin-bottom: 2px; }
.customer-picker-toolbar { display: flex; align-items: center; gap: 10px; }
.customer-picker-toolbar .search-box { flex: 1; min-width: 0; }
.customer-picker-toolbar .search-box input { width: 100%; background: var(--soft); box-shadow: none; }
.customer-picker-toolbar .primary-button { min-height: 44px; white-space: nowrap; }
.customer-picker-results { display: grid; gap: 17px; }
.customer-picker-section { display: grid; gap: 7px; }
.customer-picker-section h3 { display: flex; align-items: center; justify-content: space-between; margin: 4px 2px 0; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .035em; }
.customer-picker-section h3 span { min-width: 24px; border-radius: 999px; padding: 3px 7px; color: var(--blue); background: #eaf4ff; text-align: center; }
.customer-picker-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) minmax(180px, .8fr) 22px; align-items: center; gap: 13px; width: 100%; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; color: var(--ink); background: white; text-align: left; }
.customer-picker-row:hover { border-color: #b9d8ff; background: #f8fbff; }
.customer-picker-row.selected { border-color: #8ec5ff; background: #eff7ff; }
.customer-picker-row.walk-in { margin-bottom: 3px; }
.customer-picker-identity, .customer-picker-history { display: grid; gap: 4px; min-width: 0; }
.customer-picker-identity strong, .customer-picker-identity small, .customer-picker-history small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-picker-identity small, .customer-picker-history small { color: var(--muted); font-size: 10px; }
.customer-picker-history { text-align: right; }
.customer-picker-history strong { font-size: 11px; }
.customer-picker-check { color: var(--blue); font-size: 16px; font-weight: 850; text-align: right; }
.customer-picker-results .empty-state { min-height: 190px; }
.choice-list { display: grid; gap: 8px; }
.choice-button { display: flex; justify-content: space-between; width: 100%; border: 1px solid var(--line); border-radius: 11px; padding: 13px; color: var(--ink); background: var(--surface); }
.receipt-preview-modal { width: min(100%, 860px); overflow: hidden; }
.receipt-image-frame { display: grid; place-items: start center; max-height: calc(88dvh - 175px); overflow: auto; border: 1px solid var(--line); border-radius: 18px; padding: 20px; background: #e9edf2; }
.receipt-image-frame img { display: block; width: min(100%, 480px); height: auto; border-radius: 3px; background: white; box-shadow: 0 16px 40px rgba(26, 37, 52, .16); }
.receipt-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; padding-top: 2px; }
.store-settings-form { display: grid; gap: 24px; max-width: 850px; margin: 0 auto; }
.store-logo-card { display: grid; grid-template-columns: 180px 1fr; align-items: center; gap: 24px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.store-logo-card h2 { margin: 0 0 7px; font-size: 19px; }
.store-logo-card p { margin: 0 0 14px; color: var(--muted); }
.store-logo-card small { display: block; margin-top: 9px; color: var(--muted); }
.store-logo-preview { display: grid; place-items: center; width: 180px; height: 180px; overflow: hidden; border: 1px dashed #b8c3d2; border-radius: 22px; color: white; background: #ef1010; font-size: 45px; font-weight: 900; }
.store-logo-preview img { width: 100%; height: 100%; object-fit: contain; background: white; }
.file-button { display: inline-flex; cursor: pointer; }
.file-button input { display: none; }
.store-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.store-fields label { display: grid; gap: 7px; }
.store-fields label > span { font-size: 11px; font-weight: 750; }
.store-fields .full-row { grid-column: 1 / -1; }
.telegram-settings-page { max-width: 1120px; }
.telegram-settings-form { display: grid; gap: 22px; max-width: 900px; margin: 0 auto; }
.telegram-status-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.telegram-mark { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 16px; color: white; background: #229ed9; font-size: 25px; transform: rotate(-18deg); }
.telegram-status-card h2, .telegram-events-heading h2 { margin: 0 0 5px; font-size: 18px; }
.telegram-status-card p, .telegram-events-heading p { margin: 0; color: var(--muted); }
.telegram-status { border-radius: 999px; padding: 8px 12px; font-size: 11px; font-weight: 850; }
.telegram-status.connected { color: #147544; background: #e5f7ec; }
.telegram-status.pending { color: #875d00; background: #fff3d4; }
.telegram-error { display: grid; gap: 4px; border-radius: 13px; padding: 13px 16px; color: #9b2436; background: #fff0f2; }
.telegram-error span, .telegram-last-success { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.telegram-credentials { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.telegram-credentials label { display: grid; gap: 7px; }
.telegram-credentials label > span { font-size: 11px; font-weight: 750; }
.telegram-credentials .full-row { grid-column: 1 / -1; }
.telegram-events { display: grid; gap: 15px; border-top: 1px solid var(--line); padding-top: 20px; }
.telegram-events-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.telegram-events-heading > div:last-child { display: flex; gap: 12px; }
.text-button { border: 0; padding: 4px; color: var(--blue); background: transparent; font-weight: 800; }
.telegram-event-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.telegram-event-group { display: grid; gap: 9px; margin: 0; border: 1px solid var(--line); border-radius: 15px; padding: 14px 16px 16px; }
.telegram-event-group legend { padding: 0 6px; color: var(--ink); font-size: 12px; font-weight: 850; }
.telegram-event-group label { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; }
.telegram-event-group input { width: 18px; height: 18px; }
@media (max-width: 640px) {
  .telegram-status-card { grid-template-columns: auto 1fr; }
  .telegram-status { grid-column: 1 / -1; justify-self: start; }
  .telegram-credentials, .telegram-event-grid { grid-template-columns: 1fr; }
  .telegram-events-heading { align-items: flex-start; flex-direction: column; }
}
.toast-region { position: fixed; z-index: 80; right: 20px; top: 20px; display: grid; gap: 8px; }
.toast { max-width: 370px; padding: 13px 16px; border-radius: 12px; color: white; background: #1e2939; box-shadow: var(--shadow); animation: toast-in .2s ease-out; }
.toast.error { background: #b82d40; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }

.reports-page { max-width: 1380px; }
.report-tabs { display: inline-flex; gap: 4px; margin: -8px 0 20px; padding: 4px; border-radius: 14px; background: #e6e8ed; }
.report-tabs button { min-height: 42px; border: 0; border-radius: 11px; padding: 0 20px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 800; }
.report-tabs button.active { color: var(--blue); background: white; box-shadow: 0 4px 14px rgba(25,32,48,.1); }
.report-period-toolbar { display: grid; gap: 12px; margin-bottom: 22px; }
.report-filter-icon { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #596274; background: #e5e7ec; font-size: 23px; line-height: 1; transform: rotate(180deg); }
#report-period { color: var(--blue); background-color: #e3f0ff; }
.report-custom-range { display: flex; align-items: end; gap: 10px; border-radius: 17px; padding: 14px 16px; background: white; }
.report-custom-range label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 750; }
.report-custom-range input { width: 170px; height: 40px; }
.report-custom-range > span { padding-bottom: 12px; color: var(--muted); font-size: 12px; }
.report-custom-range .secondary-button { min-height: 40px; color: var(--blue); background: #eaf4ff; }
.report-stack { display: grid; gap: 20px; }
.report-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin: 6px 2px 14px; }
.report-section-heading p { margin: 0 0 5px; color: var(--blue); font-size: 10px; font-weight: 850; letter-spacing: .11em; }
.report-section-heading h2 { margin: 0; font-size: 22px; letter-spacing: -.025em; }
.report-section-heading > span { color: var(--muted); font-size: 12px; }
.report-metric-grid { display: grid; gap: 13px; }
.report-metric-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.report-metric-grid.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.report-metric { min-width: 0; display: grid; gap: 10px; border: 1px solid rgba(20,30,48,.045); border-radius: 18px; padding: 19px 20px; color: var(--ink); background: white; text-align: left; box-shadow: 0 5px 18px rgba(25,32,48,.035); }
.report-metric > span { color: var(--muted); font-size: 11px; font-weight: 750; }
.report-metric > strong { overflow: hidden; text-overflow: ellipsis; color: var(--metric-color, var(--blue)); font-size: clamp(19px, 2vw, 27px); letter-spacing: -.035em; white-space: nowrap; }
.report-metric > small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.report-metric.interactive { cursor: pointer; }
.report-metric.interactive:hover { border-color: color-mix(in srgb, var(--metric-color, var(--blue)) 35%, white); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(25,32,48,.08); }
.report-metric.green { --metric-color: var(--green); background: linear-gradient(145deg, #fff, #f2fbf6); }
.report-metric.red { --metric-color: var(--red); background: linear-gradient(145deg, #fff, #fff4f5); }
.report-metric.blue { --metric-color: var(--blue); background: linear-gradient(145deg, #fff, #f1f7ff); }
.report-metric.violet { --metric-color: #7458d7; background: linear-gradient(145deg, #fff, #f5f2ff); }
.report-metric.orange { --metric-color: #d97818; background: linear-gradient(145deg, #fff, #fff7ed); }
.report-metric.navy { --metric-color: #173e6e; background: linear-gradient(145deg, #fff, #edf4fb); }
.report-metric.cash { --metric-color: #16845a; background: #f1fbf6; }
.report-metric.bank { --metric-color: #176bd1; background: #f0f6ff; }
.report-metric.card { --metric-color: #7651d3; background: #f5f2ff; }
.report-panel { padding: 22px; }
.report-payment-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.report-two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.link-button { border: 0; padding: 0; color: var(--blue); background: transparent; font-size: 11px; font-weight: 800; }
.report-breakdown { display: grid; }
.report-breakdown-row { display: grid; grid-template-columns: minmax(160px, 1.15fr) minmax(90px, 1fr) auto; align-items: center; gap: 14px; min-height: 55px; padding: 9px 0; border-top: 1px solid var(--line); }
.report-breakdown-row:first-child { border-top: 0; }
.report-breakdown-row > div { display: grid; gap: 3px; min-width: 0; }
.report-breakdown-row strong, .report-breakdown-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-breakdown-row strong { font-size: 12px; }
.report-breakdown-row small { color: var(--muted); font-size: 9px; }
.report-breakdown-row > b { font-size: 11px; text-align: right; white-space: nowrap; }
.report-progress { height: 7px; overflow: hidden; border-radius: 99px; background: #eceff3; }
.report-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8ac4ff, var(--blue)); }
.report-empty-line { padding: 16px 0; }
.report-transaction-list { display: grid; }
.report-transaction-row { display: grid; grid-template-columns: 48px minmax(180px, 1fr) minmax(100px, .35fr) minmax(130px, auto); align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.report-transaction-row:first-child { border-top: 0; }
.report-transaction-row > div { display: grid; gap: 4px; min-width: 0; }
.report-transaction-row > div strong, .report-transaction-row > div small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-transaction-row > div strong { font-size: 12px; }
.report-transaction-row > div small, .report-transaction-row > span:nth-child(3) { color: var(--muted); font-size: 10px; }
.report-transaction-row > b { font-size: 12px; text-align: right; }
.report-transaction-row > b.income { color: var(--green); }
.report-transaction-row > b.expense { color: var(--red); }
.transaction-direction { border-radius: 999px; padding: 6px 8px; text-align: center; font-size: 10px; font-weight: 850; }
.transaction-direction.income { color: #15734c; background: #e8f8ef; }
.transaction-direction.expense { color: #b63041; background: #fff0f2; }
.report-access-note .empty-state { min-height: 260px; }
.report-table-wrap { overflow-x: auto; }
.report-table { width: 100%; border-collapse: collapse; }
.report-table th { padding: 10px 12px; color: var(--muted); font-size: 10px; text-align: left; }
.report-table td { border-top: 1px solid var(--line); padding: 14px 12px; font-size: 12px; }
.report-table td:first-child { min-width: 230px; }
.report-table td:first-child strong, .report-table td:first-child small { display: block; }
.report-table td:first-child small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.report-table td:last-child { color: #173e6e; text-align: right; }
.report-bar-chart { height: 280px; display: flex; align-items: end; gap: 10px; overflow-x: auto; padding: 28px 4px 0; border-bottom: 1px solid var(--line); }
.report-bar-column { min-width: 46px; flex: 1; display: grid; justify-items: center; align-content: end; gap: 7px; }
.report-bar-column > span { max-width: 84px; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.report-bar-column > i { width: min(100%, 38px); min-height: 4px; border-radius: 8px 8px 2px 2px; background: linear-gradient(180deg, #62b1ff, #087af5); box-shadow: 0 5px 13px rgba(8,122,245,.18); }
.report-bar-column > small { color: var(--muted); font-size: 9px; }
.profit-wave { width: 100%; overflow: hidden; }
.profit-wave svg { display: block; width: 100%; min-width: 520px; height: 220px; }
.profit-wave .wave-axis { stroke: #dde2e9; stroke-width: 1; }
.profit-wave .wave-area { fill: url(#none); fill: rgba(29,173,100,.1); }
.profit-wave .wave-line { fill: none; stroke: var(--green); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.profit-wave circle { fill: white; stroke: var(--green); stroke-width: 3; }
.wave-labels { display: flex; justify-content: space-between; padding: 0 3%; color: var(--muted); font-size: 9px; }
.profit-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.top-employee-list { display: grid; }
.top-employee-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 12px 0; border-top: 1px solid var(--line); }
.top-employee-row:first-child { border-top: 0; }
.top-employee-row > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: var(--blue); background: #eaf4ff; font-size: 10px; font-weight: 850; }
.top-employee-row > div { display: grid; gap: 3px; min-width: 0; }
.top-employee-row strong, .top-employee-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-employee-row strong, .top-employee-row b { font-size: 12px; }
.top-employee-row small { color: var(--muted); font-size: 9px; }
.employee-report-list { display: grid; gap: 9px; }
.employee-report-card { overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.employee-report-card summary { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 18px; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; }
.employee-report-card summary::-webkit-details-marker { display: none; }
.employee-report-card summary > div { display: grid; gap: 3px; min-width: 0; }
.employee-report-card summary strong, .employee-report-card summary small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.employee-report-card summary strong, .employee-report-card summary b { font-size: 12px; }
.employee-report-card summary small { color: var(--muted); font-size: 9px; }
.employee-rank-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--blue); background: #eaf4ff; font-size: 10px; font-weight: 850; }
.employee-report-detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 0 16px 16px 68px; }
.employee-report-detail section { padding: 12px; border-radius: 12px; background: var(--soft); }
.employee-report-detail h4 { margin: 0 0 8px; font-size: 11px; }
.employee-report-detail section > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid #dfe3e9; font-size: 10px; }
.employee-report-detail section > div:first-of-type { border-top: 0; }
.employee-report-detail small { color: var(--muted); }
.report-modal-list { max-height: 58dvh; overflow: auto; border: 1px solid var(--line); border-radius: 15px; }
.report-modal-row { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto auto 12px; align-items: center; gap: 14px; border: 0; border-top: 1px solid var(--line); padding: 14px; color: var(--ink); background: #fff; text-align: left; }
.report-modal-row:first-child { border-top: 0; }
button.report-modal-row:hover { background: #f8fbff; }
.report-modal-row > div { display: grid; gap: 4px; min-width: 0; }
.report-modal-row strong, .report-modal-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-modal-row strong, .report-modal-row > b { font-size: 12px; }
.report-modal-row small, .report-modal-row > span { color: var(--muted); font-size: 10px; }
.report-modal-row > i { color: var(--muted); font-style: normal; }
.report-category-chips { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 12px; }
.report-category-chip { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; border-radius: 999px; padding: 8px 11px; color: #33577e; background: #eaf4ff; font-size: 10px; }
.report-category-chip b { min-width: 22px; border-radius: 999px; padding: 3px 6px; color: white; background: var(--blue); text-align: center; }
.cash-voucher-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.cash-voucher-summary article { display: grid; gap: 7px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.cash-voucher-summary span { color: var(--muted); font-size: 11px; }
.cash-voucher-summary strong { font-size: 20px; }
.cash-voucher-list { display: grid; }
.cash-voucher-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto; align-items: center; gap: 13px; padding: 15px 0; border-top: 1px solid var(--line); }
.cash-voucher-row:first-child { border-top: 0; }
.cash-voucher-row.cancelled { opacity: .58; }
.cash-voucher-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: #fff; font-size: 18px; font-weight: 800; }
.cash-voucher-icon.receipt { background: var(--green); }
.cash-voucher-icon.payment { background: var(--red); }
.cash-voucher-main { display: grid; gap: 4px; min-width: 0; }
.cash-voucher-main strong, .cash-voucher-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cash-voucher-main strong { font-size: 13px; }
.cash-voucher-main small, .cash-voucher-status { color: var(--muted); font-size: 10px; }
.cash-voucher-row > strong { min-width: 130px; text-align: right; font-size: 13px; }
.cash-voucher-row > strong.income { color: var(--green); }
.cash-voucher-row > strong.expense { color: var(--red); }
.cash-voucher-actions { display: flex; gap: 6px; }
.cash-voucher-actions .compact { padding: 7px 9px; font-size: 10px; }

@media (max-width: 1050px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .pos-layout { grid-template-columns: 1fr; }
  .cart-panel { position: static; }
  .cart-lines { max-height: 340px; }
  .more-grid { grid-template-columns: repeat(2, 1fr); }
  .managed-user-row { grid-template-columns: 48px minmax(180px, 1fr) minmax(140px, .8fr) auto 16px; }
  .managed-user-login { display: none; }
  .managed-role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-metric-grid.five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .report-two-column { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .login-shell { display: block; background: linear-gradient(180deg, #eef6ff, white 38%); }
  .login-brand { display: none; }
  .login-panel { min-height: 100dvh; padding: 28px 22px; }
  .mobile-logo { display: flex; justify-content: center; margin-bottom: 38px; }
  .mobile-logo img { display: block; width: min(260px, 78vw); height: auto; border-radius: 18px; background: white; box-shadow: 0 18px 45px rgba(18,60,110,.13); }
  .login-card h2 { font-size: 30px; }
  .workspace { display: block; }
  .sidebar { display: none; }
  .mobile-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; height: calc(60px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 18px 0; border-bottom: 1px solid rgba(20,30,50,.05); background: rgba(255,255,255,.9); backdrop-filter: blur(14px); }
  .mobile-header .sidebar-brand { padding: 0; }
  .mobile-header .logo-tile { width: 34px; height: 34px; font-size: 12px; }
  .avatar-button { border: 0; }
  .main-content { min-height: calc(100dvh - 126px); padding: 24px 16px calc(94px + env(safe-area-inset-bottom)); }
  .page-header { align-items: center; margin-bottom: 20px; }
  .page-header h1 { font-size: 34px; }
  .page-header p { display: none; }
  .page-actions { gap: 0; }
  .page-actions .icon-button { width: 39px; }
  .bottom-nav { position: fixed; inset: auto 0 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr); height: calc(67px + env(safe-area-inset-bottom)); padding: 6px 5px env(safe-area-inset-bottom); border-top: 1px solid #e5e7eb; background: rgba(255,255,255,.96); backdrop-filter: blur(14px); }
  .bottom-nav .nav-item { display: grid; place-items: center; gap: 2px; padding: 3px 1px; }
  .bottom-nav .nav-item > span { width: auto; font-size: 21px; }
  .bottom-nav .nav-item small { font-size: 10px; }
  .bottom-nav .nav-item.active { color: var(--blue); }
  .report-tabs { width: 100%; overflow-x: auto; margin-top: -4px; }
  .report-tabs button { flex: 0 0 auto; padding: 0 15px; }
  .report-custom-range { align-items: stretch; flex-direction: column; }
  .report-custom-range input { width: 100%; }
  .report-custom-range > span { display: none; }
  .report-metric-grid.three, .report-payment-grid, .profit-summary-grid { grid-template-columns: 1fr; }
  .cash-voucher-summary { grid-template-columns: 1fr; }
  .report-metric-grid.five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-metric { padding: 16px; }
  .report-transaction-row { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; }
  .report-transaction-row > span:nth-child(3) { display: none; }
  .report-transaction-row > b { grid-column: 3; grid-row: 1; }
  .report-breakdown-row { grid-template-columns: minmax(120px, 1fr) auto; }
  .report-breakdown-row .report-progress { grid-column: 1 / -1; grid-row: 2; }
  .report-bar-column { min-width: 42px; }
  .employee-report-detail { grid-template-columns: 1fr; padding-left: 16px; }
  .report-modal-row { grid-template-columns: minmax(0, 1fr) auto 12px; }
  .report-modal-row > span { display: none; }
  .cash-voucher-row { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .cash-voucher-row > strong { min-width: 0; grid-column: 3; grid-row: 1; font-size: 11px; }
  .cash-voucher-actions, .cash-voucher-status { grid-column: 2 / -1; justify-content: flex-end; }
  .summary-card { padding: 20px; }
  .catalog-card { border-radius: 22px; }
  .product-row { grid-template-columns: 58px minmax(0, 1fr) auto; gap: 12px; min-height: 108px; padding: 18px 14px; }
  .product-thumb { width: 54px; height: 54px; border-radius: 15px; font-size: 24px; }
  .product-info h3 { max-width: 45vw; font-size: 16px; white-space: normal; }
  .product-meta { font-size: 11px; }
  .product-value strong { font-size: 16px; }
  .product-value span { font-size: 12px; }
  .floating-add { right: 19px; bottom: calc(83px + env(safe-area-inset-bottom)); width: 58px; height: 58px; }
  .product-page-tabs { display: flex; margin-top: -4px; }
  .product-page-tabs button { flex: 1; }
  .category-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .category-summary-grid article { display: grid; gap: 7px; padding: 13px; }
  .category-summary-grid strong { font-size: 20px; }
  .category-management-panel { padding: 14px; }
  .category-management-row { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 9px; padding: 13px 0; }
  .category-status { grid-column: 2; width: max-content; }
  .category-reorder-actions { grid-column: 1; grid-row: 2 / span 2; flex-direction: column; }
  .category-row-actions { grid-column: 2 / -1; flex-wrap: wrap; }
  .category-row-actions .secondary-button, .category-row-actions .danger-button { flex: 1; }
  .category-management-page .page-actions .primary-button { min-height: 40px; padding: 0 12px; font-size: 12px; }
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .metric-card { padding: 16px 14px; }
  .metric-card strong { font-size: 20px; }
  .panel { padding: 17px; border-radius: 18px; }
  .dashboard-grid { gap: 12px; }
  .bar-chart { height: 210px; gap: 4px; }
  .sale-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .sale-card { grid-template-columns: 1fr; min-height: 160px; padding: 13px; }
  .sale-card .product-thumb { width: 43px; height: 43px; }
  .cart-panel { border-radius: 18px; }
  .invoice-custom-range { grid-template-columns: 1fr auto 1fr; display: grid; align-items: end; padding: 13px; }
  .invoice-custom-range input { width: 100%; padding: 0 8px; font-size: 12px; }
  .invoice-custom-range > span { padding-bottom: 12px; }
  .invoice-custom-range .secondary-button { grid-column: 1 / -1; }
  .invoice-summary-card { padding: 19px 20px; }
  .invoice-summary-card > span { font-size: 18px; }
  .invoice-summary-card > b { font-size: 20px; }
  .invoice-day-group { border-radius: 20px; }
  .invoice-day-group h2 { padding: 20px 18px 10px; font-size: 13px; }
  .invoice-row { gap: 12px; padding: 17px 18px 19px; }
  .invoice-row-main > strong { max-width: 57vw; font-size: 16px; }
  .invoice-row-value > b { font-size: 16px; }
  .invoice-row-value > span { font-size: 12px; }
  .order-row { grid-template-columns: 1fr auto; gap: 8px; padding: 15px; }
  .order-customer { grid-column: 1; }
  .order-row > .status-chip { grid-row: 1; grid-column: 2; }
  .order-created { display: none; }
  .order-total { grid-row: 2; grid-column: 2; }
  .cart-customer-control { grid-template-columns: 1fr; }
  .customer-picker-toolbar { align-items: stretch; flex-direction: column; }
  .customer-picker-toolbar .primary-button { width: 100%; }
  .customer-picker-row { grid-template-columns: 42px minmax(0, 1fr) 22px; padding: 12px 11px; }
  .customer-picker-row .customer-picker-history { display: none; }
  .customer-row { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 11px; padding: 14px; }
  .customer-row .customer-stat, .customer-row .customer-last { display: none; }
  .customer-identity strong { white-space: normal; }
  .customer-history-summary { grid-template-columns: 1fr 1fr; }
  .customer-history-summary > div:last-child { grid-column: 1 / -1; }
  .customer-history-invoice { grid-template-columns: minmax(0, 1fr) auto 12px; gap: 9px; padding: 13px 11px; }
  .customer-history-value { max-width: 120px; }
  .customer-history-value small { max-width: 120px; }
  .more-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .repair-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .repair-summary-grid article { padding: 13px 11px; }
  .repair-summary-grid strong { font-size: 22px; }
  .repair-ticket-row { grid-template-columns: 42px minmax(0, 1fr) auto 10px; gap: 10px; padding: 14px 12px; }
  .repair-ticket-time { display: none; }
  .repair-ticket-main b { white-space: normal; }
  .repair-ticket-row > .status-chip { grid-column: 2; width: max-content; }
  .repair-ticket-row > i { grid-column: 4; grid-row: 1 / span 2; }
  .repair-customer-result { grid-template-columns: 38px minmax(0, 1fr); }
  .repair-customer-result > b { grid-column: 2; }
  .repair-detail-columns { grid-template-columns: 1fr; }
  .repair-detail-hero { grid-template-columns: 46px minmax(0, 1fr); }
  .repair-detail-hero > .status-chip { grid-column: 2; }
  .repair-stage-form { grid-template-columns: 1fr; }
  .module-card { min-height: 120px; padding: 16px; }
  .modal-root { align-items: end; padding: 0; }
  .modal-card, .modal-card.wide { width: 100%; max-height: 92dvh; border-radius: 24px 24px 0 0; padding: 22px 18px calc(22px + env(safe-area-inset-bottom)); }
  .receipt-preview-modal { height: 94dvh; max-height: 94dvh !important; }
  .receipt-image-frame { max-height: calc(94dvh - 190px); padding: 12px; border-radius: 15px; }
  .receipt-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .receipt-actions > button { width: 100%; }
  .store-logo-card { grid-template-columns: 1fr; text-align: center; }
  .store-logo-preview { width: 150px; height: 150px; margin: 0 auto; }
  .store-fields { grid-template-columns: 1fr; }
  .store-fields .full-row { grid-column: 1; }
  .modal-form { grid-template-columns: 1fr; }
  .modal-form label.full-row, .modal-actions, .discount-quick.full-row { grid-column: 1; }
  .user-summary-grid { grid-template-columns: 1fr; }
  .managed-user-row { grid-template-columns: 42px minmax(0, 1fr) auto 12px; gap: 10px; }
  .managed-user-avatar { width: 40px; height: 40px; }
  .managed-user-role { grid-column: 2; }
  .managed-user-login { display: none; }
  .user-status { grid-column: 3; grid-row: 1 / span 2; }
  .managed-user-chevron { grid-column: 4; grid-row: 1 / span 2; }
  .managed-role-grid, .permission-grid { grid-template-columns: 1fr; }
  .toast-region { inset: calc(10px + env(safe-area-inset-top)) 12px auto; }
  .toast { max-width: none; }
}

@media (max-width: 390px) {
  .page-header h1 { font-size: 30px; }
  .page-actions .icon-button { width: 34px; }
  .metric-grid, .more-grid { grid-template-columns: 1fr; }
  .sale-grid { grid-template-columns: 1fr; }
}

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