:root {
  --brand: #0f9d78;
  --brand-dark: #08745d;
  --brand-soft: #e8f8f3;
  --navy: #071c2c;
  --navy-2: #0d2a3d;
  --ink: #14242f;
  --muted: #6f7d87;
  --line: #e5eaee;
  --canvas: #f5f7f9;
  --surface: #ffffff;
  --danger: #d84f4f;
  --danger-soft: #fff0f0;
  --warning: #b7791f;
  --warning-soft: #fff8e8;
  --info: #3076b8;
  --info-soft: #edf6ff;
  --radius: 18px;
  --radius-sm: 11px;
  --shadow: 0 16px 45px rgba(8, 32, 48, 0.08);
  --sidebar-width: 260px;
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--canvas);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--brand-dark); text-decoration: none; }
a:hover { color: var(--brand); }
img { max-width: 100%; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { color: var(--navy); line-height: 1.17; letter-spacing: -0.025em; }
h1 { font-size: 27px; margin-bottom: 0; }
h2 { font-size: clamp(24px, 3vw, 36px); margin-bottom: 8px; }
h3 { font-size: 18px; margin-bottom: 5px; }
p { color: var(--muted); }
small { display: block; color: var(--muted); font-size: 12px; }
.muted { color: var(--muted); }
.tiny { font-size: 11px; }
.grow { flex: 1; min-width: 0; }
.text-danger { color: var(--danger) !important; }
.eyebrow {
  display: block;
  margin-bottom: 7px;
  color: var(--brand-dark);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
}
.button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: 11px;
  cursor: pointer;
  font-weight: 750;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.button:hover { transform: translateY(-1px); }
.button.primary { color: #fff; background: var(--brand); box-shadow: 0 9px 22px color-mix(in srgb, var(--brand) 25%, transparent); }
.button.primary:hover { color: #fff; background: var(--brand-dark); }
.button.soft { color: var(--navy); background: #f0f4f6; border-color: #e2e8ec; }
.button.soft:hover { color: var(--navy); background: #e6edf0; }
.button.danger { color: #fff; background: var(--danger); }
.button.danger-ghost { color: var(--danger); background: var(--danger-soft); border-color: #f6d3d3; }
.button.link-button { min-height: 38px; color: var(--brand-dark); background: transparent; }
.button.wide { width: 100%; }
.button.tiny { min-height: 32px; padding: 5px 11px; border-radius: 8px; font-size: 12px; }
.icon-button {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--navy);
  background: #fff;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
}
.icon-button:hover { border-color: var(--brand); color: var(--brand); }
.danger-text { color: var(--danger); }
.form-stack { display: grid; gap: 18px; }
.form-grid { display: grid; gap: 15px; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field { display: grid; gap: 7px; color: #42515a; font-size: 12px; font-weight: 700; }
.field.full { grid-column: 1 / -1; }
.field input, .field select, .field textarea, .search-box input, .pos-search input,
.purchase-add-row input, .purchase-add-row select, .date-filter input, .date-filter select, .row-actions select {
  width: 100%;
  min-height: 44px;
  padding: 10px 13px;
  border: 1px solid #dce3e7;
  border-radius: 10px;
  outline: none;
  color: var(--ink);
  background: #fff;
  transition: border .15s ease, box-shadow .15s ease;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .search-box input:focus,
.pos-search input:focus, .purchase-add-row input:focus, .purchase-add-row select:focus, .date-filter select:focus, .row-actions select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent);
}
.field input[type="color"] { padding: 5px; }
.password-field { display: flex; position: relative; }
.password-field input { padding-right: 70px; }
.password-field button { position: absolute; right: 7px; top: 6px; padding: 6px 9px; border: 0; color: var(--brand-dark); background: transparent; cursor: pointer; font-size: 11px; font-weight: 800; }
.check { display: inline-flex; align-items: center; gap: 8px; color: #55636d; font-size: 12px; cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--brand); }
.consent { align-items: flex-start; line-height: 1.45; }
.info-note { padding: 11px 13px; border-radius: 10px; color: #47606c; background: #f0f6f8; font-size: 12px; }
.alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 15px;
  border: 1px solid transparent;
  border-radius: 11px;
  font-weight: 650;
}
.alert button { border: 0; color: inherit; background: transparent; cursor: pointer; font-size: 20px; }
.alert-success { color: #14654f; background: #e9f8f2; border-color: #c6eadf; }
.alert-danger { color: #a83c3c; background: var(--danger-soft); border-color: #f2d0d0; }
.alert-warning { color: #8d5f13; background: var(--warning-soft); border-color: #f2dfb6; }
.alert-info { color: #245f92; background: var(--info-soft); border-color: #d2e7f8; }

/* Guest and authentication */
.guest-body { background: var(--navy); }
.guest-shell { display: grid; min-height: 100vh; grid-template-columns: minmax(360px, .78fr) minmax(520px, 1.22fr); }
.guest-brand {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: space-between;
  padding: 42px clamp(34px, 4vw, 70px);
  overflow: hidden;
  position: relative;
  color: #fff;
  background:
    radial-gradient(circle at 82% 16%, rgba(15, 157, 120, .26), transparent 29%),
    radial-gradient(circle at 18% 86%, rgba(233, 185, 73, .13), transparent 27%),
    linear-gradient(145deg, #071c2c 0%, #0a2639 100%);
}
.guest-brand::after {
  width: 450px; height: 450px; content: ""; position: absolute; right: -240px; bottom: -220px;
  border: 1px solid rgba(255,255,255,.09); border-radius: 50%; box-shadow: 0 0 0 55px rgba(255,255,255,.018), 0 0 0 110px rgba(255,255,255,.012);
}
.guest-logo { display: flex; align-items: center; gap: 13px; color: #fff; position: relative; z-index: 1; }
.guest-logo:hover { color: #fff; }
.guest-logo img { width: 50px; height: 50px; }
.guest-logo strong { display: block; font-size: 20px; letter-spacing: -0.02em; }
.guest-logo small { color: #8fa7b5; font-size: 10px; text-transform: uppercase; letter-spacing: .11em; }
.brand-stage { display: flex; flex: 1; align-items: center; justify-content: center; position: relative; z-index: 1; }
.brand-emblem {
  display: flex; width: clamp(150px, 16vw, 230px); height: clamp(150px, 16vw, 230px);
  align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%; position: relative; z-index: 2; background: rgba(255,255,255,.025);
  box-shadow: 0 40px 90px rgba(0,0,0,.2), inset 0 0 0 18px rgba(255,255,255,.012);
}
.brand-emblem img { width: 56%; height: 56%; filter: drop-shadow(0 20px 28px rgba(0,0,0,.25)); }
.brand-orbit { position: absolute; border: 1px solid rgba(95,212,179,.12); border-radius: 50%; }
.brand-orbit-one { width: clamp(260px, 27vw, 410px); height: clamp(260px, 27vw, 410px); }
.brand-orbit-two { width: clamp(370px, 38vw, 570px); height: clamp(370px, 38vw, 570px); opacity: .55; }
.brand-signature { display: flex; align-items: center; gap: 13px; position: relative; z-index: 1; color: #748e9b; font-size: 9px; font-weight: 750; letter-spacing: .16em; }
.brand-signature i { width: 4px; height: 4px; border-radius: 50%; background: var(--brand); }
.guest-panel {
  display: flex; min-height: 100vh; align-items: center; justify-content: flex-start; flex-direction: column;
  padding: 32px max(35px, 6vw) 22px; position: relative; overflow-y: auto; background: #f8fafb;
}
.guest-panel > .alert { width: 100%; max-width: 600px; flex: 0 0 auto; margin-bottom: 14px; }
.auth-card { width: 100%; max-width: 455px; margin: auto 0; padding: 24px 0; }
.auth-card h2 { font-size: 31px; }
.auth-card > .muted { margin-bottom: 28px; }
.application-card { max-width: 690px; margin: 0; padding: 30px 0 20px; }
.setup-card { max-width: 570px; }
.back-link { display: inline-block; margin-bottom: 30px; font-size: 12px; font-weight: 750; }
.form-options { display: flex; align-items: center; justify-content: space-between; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 23px 0 14px; color: #9aa5ab; font-size: 9px; letter-spacing: .13em; }
.auth-divider::before, .auth-divider::after { flex: 1; height: 1px; content: ""; background: var(--line); }
.security-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 22px 0 0; font-size: 10px; }
.security-note span { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.guest-footer { flex: 0 0 auto; margin-top: auto; padding-top: 24px; color: #9aa6ad; font-size: 10px; }
.guest-mobile-brand { display: none; }
.form-section { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.section-number { display: flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 10px; color: #fff; background: var(--navy); font-size: 10px; font-weight: 800; }
.form-section h3, .form-section p { margin: 0; }
.form-section p { font-size: 11px; }
.success-card { text-align: center; }
.success-mark { display: flex; width: 70px; height: 70px; align-items: center; justify-content: center; margin: 0 auto 24px; border-radius: 22px; color: #fff; background: var(--brand); box-shadow: 0 15px 35px rgba(15,157,120,.24); font-size: 30px; }
.reference-box { margin: 25px 0; padding: 20px; border: 1px dashed #b9d9cf; border-radius: 14px; background: var(--brand-soft); }
.reference-box span, .reference-box small { color: var(--brand-dark); }
.reference-box span { display: block; font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.reference-box strong { display: block; margin: 5px 0; color: var(--navy); font-size: 24px; letter-spacing: .05em; }

/* Main app shell */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  display: flex; width: var(--sidebar-width); height: 100vh; flex-direction: column; position: fixed; inset: 0 auto 0 0; z-index: 50;
  color: #d0dce3; background: var(--navy); box-shadow: 8px 0 30px rgba(3, 20, 31, .08);
}
.sidebar-brand { display: flex; min-height: 86px; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid rgba(255,255,255,.075); }
.sidebar-brand img { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 12px; object-fit: cover; background: #fff; }
.sidebar-brand strong { display: block; max-width: 155px; overflow: hidden; color: #fff; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-brand small { max-width: 155px; overflow: hidden; color: #78909d; font-size: 8px; text-overflow: ellipsis; letter-spacing: .11em; white-space: nowrap; }
.sidebar-nav { flex: 1; padding: 15px 12px; overflow-y: auto; }
.sidebar-nav::-webkit-scrollbar { width: 3px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); }
.nav-section { display: block; margin: 17px 11px 6px; color: #55717f; font-size: 8px; font-weight: 800; letter-spacing: .15em; }
.sidebar-nav a { display: flex; min-height: 42px; align-items: center; gap: 11px; margin: 2px 0; padding: 9px 11px; border-radius: 10px; color: #96aab5; font-size: 12px; font-weight: 620; }
.sidebar-nav a i { display: flex; width: 25px; height: 25px; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.08); border-radius: 7px; color: #66818f; font-size: 8px; font-style: normal; }
.sidebar-nav a span { flex: 1; }
.sidebar-nav a b { padding: 2px 5px; border-radius: 5px; color: #68d1b3; background: rgba(15,157,120,.13); font-size: 7px; letter-spacing: .06em; }
.sidebar-nav a:hover { color: #fff; background: rgba(255,255,255,.045); }
.sidebar-nav a.active { color: #fff; background: linear-gradient(90deg, rgba(15,157,120,.22), rgba(15,157,120,.075)); box-shadow: inset 3px 0 var(--brand); }
.sidebar-nav a.active i { border-color: rgba(80,211,173,.25); color: #6bd8b9; background: rgba(15,157,120,.17); }
.sidebar-user { display: flex; align-items: center; gap: 9px; margin: 10px 12px 14px; padding: 12px 10px; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; background: rgba(255,255,255,.025); }
.sidebar-user > div:nth-child(2) { flex: 1; min-width: 0; }
.sidebar-user strong { display: block; overflow: hidden; color: #e6edf1; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user small { color: #6f8995; font-size: 9px; }
.sidebar-user .icon-button { border-color: rgba(255,255,255,.07); color: #8ba0aa; background: rgba(255,255,255,.04); }
.avatar, .top-avatar { display: flex; align-items: center; justify-content: center; border-radius: 10px; color: #fff; background: var(--brand); font-size: 10px; font-weight: 800; }
.avatar { width: 34px; height: 34px; }
.top-avatar { width: 36px; height: 36px; }
.app-main { width: calc(100% - var(--sidebar-width)); min-width: 0; margin-left: var(--sidebar-width); }
.topbar { display: flex; min-height: 86px; align-items: center; justify-content: space-between; padding: 14px clamp(18px, 3vw, 38px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.93); backdrop-filter: blur(14px); }
.breadcrumb { color: #91a0a9; font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.page-heading h1 { margin-top: 3px; font-size: 23px; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.quick-action { display: inline-flex; min-height: 38px; align-items: center; padding: 8px 13px; border-radius: 9px; color: #fff; background: var(--navy); font-size: 11px; font-weight: 750; }
.quick-action:hover { color: #fff; background: var(--brand-dark); }
.menu-button { display: none; width: 38px; height: 38px; align-items: center; justify-content: center; flex-direction: column; gap: 4px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.menu-button span { width: 16px; height: 2px; border-radius: 2px; background: var(--navy); }
.page-content { width: 100%; max-width: 1700px; margin: 0 auto; padding: 28px clamp(18px, 3vw, 38px) 45px; }
.support-banner { display: flex; min-height: 38px; align-items: center; justify-content: space-between; gap: 15px; padding: 7px 22px; color: #fff; background: #8a5d15; font-size: 11px; }
.support-banner form { margin: 0; }
.support-banner button { border: 0; color: #fff; background: transparent; cursor: pointer; font-size: 10px; font-weight: 800; text-decoration: underline; }
.sidebar-overlay { display: none; }
.mobile-nav { display: none; }

/* Reusable content */
.welcome-strip { display: flex; min-height: 160px; align-items: center; justify-content: space-between; gap: 25px; margin-bottom: 22px; padding: 28px clamp(24px, 4vw, 44px); border-radius: var(--radius); overflow: hidden; position: relative; color: #fff; background: linear-gradient(120deg, var(--navy), #0e354b); box-shadow: var(--shadow); }
.welcome-strip::after { width: 260px; height: 260px; content: ""; position: absolute; right: -90px; top: -125px; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; box-shadow: 0 0 0 35px rgba(255,255,255,.018), 0 0 0 70px rgba(255,255,255,.012); }
.welcome-strip > * { position: relative; z-index: 1; }
.welcome-strip h2 { margin-bottom: 7px; color: #fff; font-size: 29px; }
.welcome-strip p { margin-bottom: 0; color: #a9bac4; }
.welcome-strip .eyebrow { color: #64d1b2; }
.welcome-actions, .toolbar-actions { display: flex; gap: 9px; }
.tenant-welcome .button.soft { border-color: rgba(255,255,255,.15); color: #fff; background: rgba(255,255,255,.08); }
.stat-grid { display: grid; gap: 16px; margin-bottom: 20px; }
.stat-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-card { min-height: 142px; padding: 20px; border: 1px solid #e6ebee; border-radius: 16px; position: relative; background: #fff; box-shadow: 0 8px 26px rgba(16,40,54,.04); }
.stat-card::after { width: 4px; height: 34px; content: ""; position: absolute; left: 0; top: 22px; border-radius: 0 4px 4px 0; background: #d8e2e6; }
.stat-card.accent::after { background: var(--brand); }
.stat-card.warning::after { background: #e2a940; }
.stat-card > span { display: block; margin-bottom: 9px; color: #6d7b84; font-size: 11px; font-weight: 700; }
.stat-card > strong { display: block; margin-bottom: 7px; color: var(--navy); font-size: clamp(20px, 2vw, 27px); letter-spacing: -0.04em; }
.stat-card > small { font-size: 10px; }
.stat-icon { display: flex; width: 30px; height: 30px; align-items: center; justify-content: center; margin-bottom: 13px; border-radius: 8px; color: var(--brand-dark); background: var(--brand-soft); font-size: 8px; font-weight: 900; letter-spacing: .06em; }
.content-grid { display: grid; gap: 18px; margin-bottom: 18px; }
.content-grid.split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dashboard-grid { grid-template-columns: minmax(0, 1.65fr) minmax(280px, .65fr); }
.panel { border: 1px solid #e6ebee; border-radius: var(--radius); background: var(--surface); box-shadow: 0 8px 26px rgba(16,40,54,.035); }
.panel:not(.table-panel) { padding: 21px; }
.panel-head { display: flex; min-height: 48px; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 13px; }
.panel-head h3 { margin: 0; }
.panel-head a { font-size: 11px; font-weight: 750; white-space: nowrap; }
.table-panel .panel-head { padding: 20px 20px 0; }
.list-stack { display: grid; }
.list-row { display: flex; min-height: 61px; align-items: center; gap: 11px; padding: 9px 3px; border-bottom: 1px solid #edf1f3; color: var(--ink); }
.list-row:last-child { border-bottom: 0; }
.list-row strong { font-size: 12px; }
.list-row small { margin-top: 2px; font-size: 10px; }
.entity-avatar, .product-mini {
  display: inline-flex; width: 38px; height: 38px; flex: 0 0 auto; align-items: center; justify-content: center;
  border-radius: 11px; color: var(--brand-dark); background: var(--brand-soft); font-size: 9px; font-weight: 900;
}
.entity-avatar.dark { color: #fff; background: var(--navy); }
.entity-avatar.large { width: 48px; height: 48px; border-radius: 14px; font-size: 11px; }
.product-mini { width: 34px; height: 34px; border-radius: 9px; }
.status { display: inline-flex; min-height: 23px; align-items: center; padding: 3px 8px; border-radius: 999px; color: #65747d; background: #eef2f4; font-size: 8px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.status.active, .status.approved, .status.paid, .status.received, .status.accepted { color: #137058; background: #e5f7f1; }
.status.pending, .status.partial, .status.credit, .status.ordered, .status.draft { color: #8d5f13; background: #fff4d8; }
.status.sent { color: #245f92; background: #edf6ff; }
.status.suspended, .status.inactive, .status.rejected, .status.returned, .status.cancelled, .status.expired { color: #ac4040; background: #ffeded; }
.empty-state { display: flex; min-height: 200px; align-items: center; justify-content: center; flex-direction: column; gap: 6px; padding: 25px; text-align: center; color: var(--muted); }
.empty-state.compact { min-height: 100px; }
.empty-state strong { color: var(--navy); }
.empty-state span { font-size: 11px; }
.empty-state.success strong { color: var(--brand-dark); }
.table-responsive { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { padding: 12px 16px; border-bottom: 1px solid var(--line); color: #86949c; background: #fafbfc; font-size: 8px; font-weight: 850; letter-spacing: .09em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.data-table td { padding: 13px 16px; border-bottom: 1px solid #edf1f3; color: #40505a; font-size: 11px; vertical-align: middle; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: #fcfdfd; }
.data-table td > strong { color: var(--ink); }
.data-table small { margin-top: 2px; font-size: 9px; }
.compact-table th, .compact-table td { padding-right: 9px; padding-left: 9px; }
.table-entity { display: flex; min-width: 180px; align-items: center; gap: 10px; }
.table-entity strong, .table-entity small { display: block; }
.row-actions { display: flex; align-items: center; gap: 5px; }
.row-actions form { display: inline-flex; margin: 0; }
.row-actions select { min-height: 32px; padding: 5px 28px 5px 8px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #fff; font-size: 10px; }
.toolbar { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 17px; }
.toolbar p { margin: 0; }
.search-box { display: flex; width: min(480px, 100%); }
.search-box input { border-radius: 10px 0 0 10px; }
.search-box button { padding: 0 16px; border: 0; border-radius: 0 10px 10px 0; color: #fff; background: var(--navy); cursor: pointer; font-weight: 750; }
.filter-tabs { display: inline-flex; padding: 4px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.filter-tabs a { padding: 7px 13px; border-radius: 8px; color: #718089; font-size: 11px; font-weight: 700; }
.filter-tabs a.active { color: #fff; background: var(--navy); }
.date-filter { display: flex; align-items: flex-end; gap: 8px; }
.date-filter label { display: grid; gap: 4px; color: #72818a; font-size: 9px; font-weight: 750; text-transform: uppercase; }
.date-filter input, .date-filter select { min-height: 39px; padding: 7px 9px; }
.mini-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 17px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.mini-summary div { padding: 16px 20px; border-right: 1px solid var(--line); }
.mini-summary div:last-child { border-right: 0; }
.mini-summary span { display: block; color: var(--muted); font-size: 10px; }
.mini-summary strong { display: block; margin-top: 3px; color: var(--navy); font-size: 18px; }
.metric-inline { text-align: right; }
.metric-inline span { display: block; color: var(--muted); font-size: 9px; }
.metric-inline strong { color: var(--navy); font-size: 15px; }
.bar-chart { display: flex; height: 230px; align-items: flex-end; justify-content: space-around; gap: clamp(6px, 2vw, 20px); padding: 25px 5px 0; border-top: 1px solid #edf1f3; }
.bar-column { display: flex; height: 100%; flex: 1; align-items: center; justify-content: flex-end; flex-direction: column; gap: 7px; position: relative; }
.bar-column i { width: min(35px, 68%); min-height: 4px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--brand), var(--brand-dark)); box-shadow: 0 8px 16px color-mix(in srgb, var(--brand) 15%, transparent); }
.bar-column b { color: #87959d; font-size: 8px; text-transform: uppercase; }
.bar-value { color: var(--brand-dark); font-size: 8px; font-weight: 800; }
.stock-value-panel { min-height: 300px; overflow: hidden; position: relative; color: #fff; background: linear-gradient(145deg, #0e805f, #075844); }
.stock-value-panel h3, .stock-value-panel .hero-number { color: #fff; }
.stock-value-panel h3 { font-size: 22px; }
.stock-value-panel .eyebrow { color: #90e0ca; }
.hero-number { display: block; margin: 35px 0 5px; position: relative; z-index: 2; font-size: clamp(26px, 3vw, 39px); letter-spacing: -.05em; }
.stock-value-panel p { color: #9ed4c5; position: relative; z-index: 2; }
.stock-value-panel a { position: absolute; left: 21px; bottom: 22px; z-index: 2; color: #fff; font-size: 11px; font-weight: 750; }
.orb { position: absolute; border-radius: 50%; background: rgba(255,255,255,.07); }
.orb-one { width: 180px; height: 180px; right: -55px; bottom: -55px; }
.orb-two { width: 90px; height: 90px; right: 50px; top: 45px; }
.stock-indicator { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #e6a83c; box-shadow: 0 0 0 4px #fff5df; }
.stock-indicator.zero { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }

/* Super admin */
.tenant-grid, .customer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.tenant-card, .customer-card { padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 8px 25px rgba(16,40,54,.04); }
.tenant-card-head, .customer-card-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.tenant-card h3, .customer-card h3 { margin-bottom: 4px; font-size: 18px; }
.tenant-card > p, .customer-card > p { min-height: 42px; margin-bottom: 15px; font-size: 11px; }
.tenant-metrics { display: grid; grid-template-columns: .7fr .8fr 1.5fr; padding: 13px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tenant-metrics div { padding: 0 8px; border-right: 1px solid var(--line); }
.tenant-metrics div:first-child { padding-left: 0; }
.tenant-metrics div:last-child { border-right: 0; padding-right: 0; }
.tenant-metrics strong, .tenant-metrics span { display: block; }
.tenant-metrics strong { overflow: hidden; color: var(--navy); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.tenant-metrics span { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.license-line, .license-detail { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; color: var(--muted); font-size: 10px; }
.license-line strong, .license-detail strong { color: var(--navy); font-size: 11px; }
.card-actions { display: flex; align-items: center; gap: 7px; }
.card-actions form { flex: 1; margin: 0; }
.card-actions form .button, .customer-card .card-actions .button { width: 100%; min-height: 37px; font-size: 10px; }
.timeline { display: grid; }
.timeline-row { display: flex; min-height: 62px; align-items: center; gap: 12px; padding: 9px 4px; border-bottom: 1px solid var(--line); }
.timeline-row:last-child { border-bottom: 0; }
.timeline-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 5px var(--brand-soft); }
.timeline-row strong { display: block; color: var(--ink); font-size: 11px; }
.timeline-row time { color: #94a1a8; font-size: 9px; white-space: nowrap; }

/* Dialogs */
dialog.modal { width: min(660px, calc(100% - 28px)); max-height: calc(100vh - 35px); padding: 0; border: 0; border-radius: 18px; color: var(--ink); background: #fff; box-shadow: 0 35px 90px rgba(2, 20, 32, .3); overflow-y: auto; }
dialog.modal.small-modal { width: min(460px, calc(100% - 28px)); }
dialog.modal.wide-modal { width: min(900px, calc(100% - 28px)); }
dialog.modal::backdrop { background: rgba(4, 20, 31, .68); backdrop-filter: blur(3px); }
dialog.modal form { display: grid; gap: 16px; padding: 23px; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; font-size: 21px; }
.modal-head button { width: 34px; height: 34px; border: 0; border-radius: 9px; color: #76858e; background: #f0f3f5; cursor: pointer; font-size: 19px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px; border-radius: 12px; background: #f7f9fa; }
.detail-grid div { padding: 7px; }
.detail-grid span, .detail-grid strong { display: block; }
.detail-grid span { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.detail-grid strong { margin-top: 3px; font-size: 11px; }
.balance-callout { padding: 15px; border-radius: 12px; background: var(--warning-soft); }
.balance-callout span, .balance-callout strong { display: block; }
.balance-callout span { color: #8d6a30; font-size: 10px; }
.balance-callout strong { margin-top: 2px; color: #815a13; font-size: 22px; }

/* POS */
.pos-layout { display: grid; min-height: calc(100vh - 159px); grid-template-columns: minmax(0, 1.55fr) minmax(350px, .75fr); gap: 17px; }
.pos-catalog, .pos-cart { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 8px 25px rgba(16,40,54,.04); }
.pos-catalog { padding: 20px; }
.pos-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 17px; }
.pos-toolbar h2 { margin: 0; font-size: 22px; }
.pos-search { display: flex; width: min(390px, 52%); align-items: center; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.pos-search span { padding-left: 12px; color: var(--muted); }
.pos-search input { min-height: 40px; border: 0; }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-height: calc(100vh - 270px); padding-right: 4px; overflow-y: auto; }
.product-tile { display: grid; min-height: 142px; grid-template-columns: 42px 1fr; align-content: start; gap: 10px; padding: 14px; border: 1px solid #e5eaed; border-radius: 13px; position: relative; text-align: left; background: #fff; cursor: pointer; transition: transform .14s ease, border .14s ease, box-shadow .14s ease; }
.product-tile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand) 45%, #dce4e8); box-shadow: 0 10px 24px rgba(15,50,65,.08); }
.product-tile[hidden] { display: none; }
.product-art { display: flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 11px; color: var(--brand-dark); background: var(--brand-soft); font-size: 10px; font-weight: 900; }
.product-info { min-width: 0; }
.product-info strong { display: block; overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.product-info small { overflow: hidden; margin-top: 4px; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.product-price { grid-column: 1 / -1; align-self: end; margin-top: 17px; color: var(--navy); font-size: 14px; font-weight: 850; }
.product-tile.shake { animation: shake .35s ease; border-color: var(--danger); }
@keyframes shake { 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }
.pos-cart { display: flex; flex-direction: column; position: sticky; top: 104px; height: calc(100vh - 130px); overflow: hidden; }
.cart-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 18px 12px; border-bottom: 1px solid var(--line); }
.cart-head h3 { margin: 0; font-size: 21px; }
.pos-cart form { display: flex; min-height: 0; flex: 1; flex-direction: column; }
.cart-items { flex: 1; min-height: 130px; padding: 7px 15px; overflow-y: auto; }
.empty-cart { display: flex; height: 100%; min-height: 150px; align-items: center; justify-content: center; flex-direction: column; color: var(--muted); text-align: center; }
.empty-cart > span { display: flex; width: 42px; height: 42px; align-items: center; justify-content: center; margin-bottom: 8px; border: 1px dashed #c9d3d8; border-radius: 12px; font-size: 20px; }
.empty-cart strong { color: var(--navy); }
.empty-cart small { font-size: 10px; }
.cart-line { display: grid; grid-template-columns: 32px minmax(85px, 1fr) auto auto 22px; align-items: center; gap: 7px; padding: 10px 0; border-bottom: 1px solid #edf1f3; }
.cart-line .product-mini { width: 32px; height: 32px; font-size: 8px; }
.cart-line strong { color: var(--navy); font-size: 10px; }
.cart-line small { font-size: 8px; }
.qty-control { display: inline-flex; align-items: center; gap: 3px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; }
.qty-control button { width: 23px; height: 23px; border: 0; border-radius: 6px; color: var(--navy); background: #f0f4f5; cursor: pointer; }
.qty-control b { min-width: 18px; font-size: 9px; text-align: center; }
.remove-line { padding: 0; border: 0; color: #a7b1b6; background: transparent; cursor: pointer; font-size: 17px; }
.cart-form { padding: 12px 15px 6px; border-top: 1px solid var(--line); }
.compact-grid { gap: 8px !important; }
.compact-grid .field { gap: 3px; font-size: 9px; }
.compact-grid .field input, .compact-grid .field select, .cart-form > .field input { min-height: 35px; padding: 6px 8px; font-size: 10px; }
.cart-form > .field { margin-top: 7px; gap: 3px; font-size: 9px; }
.cart-summary { display: grid; gap: 4px; padding: 9px 16px; border-top: 1px solid var(--line); background: #fafcfc; }
.cart-summary div { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 10px; }
.cart-summary strong { color: var(--navy); font-size: 12px; }
.cart-summary .cart-total { padding: 5px 0; color: var(--navy); font-size: 12px; }
.cart-summary .cart-total strong { font-size: 20px; }
.checkout-button { min-height: 49px; border-radius: 0; }
.checkout-button:disabled, .purchase-total + .button:disabled { cursor: not-allowed; opacity: .45; transform: none; box-shadow: none; }

/* Customers, purchases, settings */
.customer-balance, .customer-total { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 10px; background: #f5f8f9; }
.customer-balance.has-debt { color: #a23e3e; background: var(--danger-soft); }
.customer-balance span, .customer-total span { font-size: 10px; }
.customer-balance strong, .customer-total strong { font-size: 13px; }
.customer-total { margin: 6px 0 13px; }
.statement-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; padding: 25px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.statement-head h2 { margin: 2px 0 5px; font-size: 24px; }
.statement-head p { margin: 0; font-size: 11px; }
.purchase-builder { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.purchase-add-row { display: grid; grid-template-columns: 1.6fr .55fr .75fr auto; gap: 7px; padding: 10px; background: #f6f9fa; }
.purchase-add-row input, .purchase-add-row select { min-height: 39px; }
.purchase-lines { max-height: 260px; padding: 4px 12px; overflow-y: auto; }
.purchase-line { display: flex; min-height: 53px; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); font-size: 11px; }
.purchase-line strong, .purchase-line small { display: block; }
.purchase-line button { border: 0; color: var(--danger); background: transparent; cursor: pointer; font-size: 18px; }
.purchase-total { display: flex; align-items: center; justify-content: space-between; padding: 15px; border-radius: 12px; color: #fff; background: var(--navy); }
.purchase-total span { font-size: 11px; }
.purchase-total strong { font-size: 22px; }
.report-heading { margin-bottom: 17px; text-align: center; }
.report-heading h2, .report-heading p { margin-bottom: 3px; }
.role-chip { padding: 5px 8px; border-radius: 7px; color: #415561; background: #edf3f5; font-size: 9px; text-transform: capitalize; }
.settings-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(270px, .5fr); gap: 18px; margin-bottom: 18px; }
.brand-preview { display: flex; align-items: center; gap: 13px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: #f8fafb; }
.brand-preview img, .brand-preview > span { display: flex; width: 48px; height: 48px; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 12px; object-fit: cover; color: #fff; background: var(--navy); font-weight: 850; }
.brand-preview strong, .brand-preview small { display: block; }
.license-card { overflow: hidden; position: relative; color: #d5e1e7; background: var(--navy); }
.license-card .eyebrow { color: #66d4b5; }
.license-card h3 { color: #fff; font-size: 25px; text-transform: capitalize; }
.license-card p { color: #8097a3; font-size: 11px; }
.license-badge { display: inline-flex; margin: 13px 0 24px; padding: 5px 9px; border-radius: 999px; color: #6cdbbd; background: rgba(15,157,120,.16); font-size: 8px; font-weight: 850; letter-spacing: .1em; }
.license-detail { border-bottom: 1px solid rgba(255,255,255,.08); color: #7f96a2; }
.license-detail strong { color: #fff; }
.branch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.branch-grid article { display: flex; align-items: center; gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; }
.branch-grid article > div { flex: 1; }
.branch-grid strong, .branch-grid small { display: block; }

/* Receipt */
.receipt-body { padding: 25px; background: #e9eef1; }
.receipt-actions { display: flex; max-width: 800px; justify-content: space-between; margin: 0 auto 14px; }
.receipt-paper { width: min(800px, 100%); min-height: 1050px; margin: 0 auto; padding: 50px; color: #1f2d35; background: #fff; box-shadow: 0 15px 50px rgba(15,35,48,.15); }
.receipt-header { text-align: center; }
.receipt-header img { width: 64px; height: 64px; margin-bottom: 10px; border-radius: 16px; object-fit: cover; }
.receipt-header h1 { margin-bottom: 5px; font-size: 25px; }
.receipt-header p { margin-bottom: 3px; font-size: 11px; }
.receipt-header small { font-size: 9px; }
.receipt-title { display: flex; align-items: center; justify-content: space-between; margin: 28px 0 14px; padding: 12px 0; border-top: 2px solid var(--navy); border-bottom: 1px solid #bfc8cd; }
.receipt-title strong { font-size: 13px; letter-spacing: .08em; }
.receipt-title span { font-size: 12px; font-weight: 800; }
.receipt-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 30px; margin-bottom: 22px; }
.receipt-meta div { display: flex; justify-content: space-between; gap: 15px; }
.receipt-meta span { color: var(--muted); font-size: 10px; }
.receipt-meta strong { font-size: 10px; text-align: right; }
.receipt-table { width: 100%; border-collapse: collapse; }
.receipt-table th, .receipt-table td { padding: 10px 8px; border-bottom: 1px solid #dce2e5; font-size: 10px; text-align: right; }
.receipt-table th { color: #66757e; background: #f5f7f8; font-size: 8px; text-transform: uppercase; }
.receipt-table th:first-child, .receipt-table td:first-child { text-align: left; }
.receipt-totals { width: 330px; margin: 18px 0 20px auto; }
.receipt-totals div { display: flex; justify-content: space-between; padding: 6px 0; font-size: 10px; }
.receipt-totals .grand { margin: 5px 0; padding: 10px 0; border-top: 1px solid var(--navy); border-bottom: 1px solid var(--navy); font-size: 14px; }
.quotation-customer, .quotation-notes { margin: 18px 0; padding: 13px; border-radius: 9px; background: #f5f7f8; font-size: 10px; }
.quotation-customer strong, .quotation-customer span, .quotation-notes strong { display: block; }
.quotation-customer span, .quotation-notes p { margin: 4px 0 0; color: var(--muted); font-size: 9px; }
.payment-history { margin: 22px 0; padding: 13px; border-radius: 9px; background: #f5f7f8; font-size: 9px; }
.payment-history > strong { display: block; margin-bottom: 5px; }
.payment-history div { display: flex; justify-content: space-between; padding: 3px 0; }
.receipt-footer { margin-top: 40px; padding-top: 18px; border-top: 1px dashed #bac4c9; text-align: center; }
.receipt-footer strong, .receipt-footer span { display: block; }
.receipt-footer strong { font-size: 11px; }
.receipt-footer span { margin-top: 5px; color: var(--muted); font-size: 8px; }
.error-page { display: flex; min-height: 60vh; align-items: center; justify-content: center; flex-direction: column; text-align: center; }
.error-page > span { color: var(--brand); font-size: 70px; font-weight: 900; letter-spacing: -.07em; }

@media (max-width: 1250px) {
  .stat-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tenant-grid, .customer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pos-layout { grid-template-columns: minmax(0, 1.35fr) minmax(340px, .75fr); }
}

@media (max-width: 1020px) {
  .guest-shell { grid-template-columns: 1fr; }
  .guest-brand { display: none; }
  .guest-panel { min-height: 100svh; padding: 24px max(22px, 6vw) 16px; overflow-x: hidden; }
  .guest-mobile-brand {
    display: flex; width: 100%; align-items: center; justify-content: center; gap: 10px;
    flex: 0 0 auto; margin-bottom: 18px; color: var(--navy); font-size: 18px;
  }
  .guest-mobile-brand img { width: 42px; height: 42px; }
  .guest-mobile-brand strong, .guest-mobile-brand small { display: block; }
  .guest-mobile-brand small { color: #8a989f; font-size: 7px; letter-spacing: .12em; }
  .guest-panel > .auth-card { margin: auto 0; }
  .guest-panel > .application-card { margin: 0; }
  .guest-footer { width: 100%; padding-top: 20px; text-align: center; }
  .app-main { width: 100%; margin-left: 0; }
  .sidebar { transform: translateX(-105%); transition: transform .2s ease; }
  .sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-open .sidebar-overlay { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(3,19,29,.55); }
  .menu-button { display: flex; }
  .topbar { gap: 12px; }
  .page-heading { flex: 1; }
  .content-grid.split, .dashboard-grid, .settings-grid { grid-template-columns: 1fr; }
  .pos-layout { display: block; }
  .pos-cart { height: auto; min-height: 580px; margin-top: 15px; position: static; }
  .product-grid { max-height: none; }
  .stock-value-panel { min-height: 260px; }
}

@media (max-width: 720px) {
  body.app-body { padding-bottom: 72px; }
  .topbar { min-height: 70px; padding: 10px 14px; }
  .page-heading h1 { font-size: 19px; }
  .breadcrumb { display: none; }
  .quick-action { display: none; }
  .page-content { padding: 17px 12px 24px; }
  .welcome-strip { min-height: 180px; align-items: flex-start; flex-direction: column; padding: 23px; }
  .welcome-strip h2 { font-size: 24px; }
  .welcome-actions { width: 100%; }
  .welcome-actions .button { flex: 1; }
  .stat-grid.four { grid-template-columns: 1fr 1fr; gap: 9px; }
  .stat-card { min-height: 125px; padding: 15px; }
  .stat-card > strong { font-size: 18px; }
  .stat-icon { display: none; }
  .content-grid.split { gap: 12px; }
  .panel:not(.table-panel) { padding: 16px; }
  .tenant-grid, .customer-grid { grid-template-columns: 1fr; gap: 11px; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .toolbar > .button, .toolbar-actions .button { flex: 1; }
  .toolbar-actions { display: flex; }
  .filter-tabs { width: 100%; overflow-x: auto; }
  .filter-tabs a { flex: 1; text-align: center; white-space: nowrap; }
  .date-filter { display: grid; grid-template-columns: 1fr 1fr; }
  .date-filter .button { grid-column: 1 / -1; }
  .form-grid.two, .form-grid.three { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .mini-summary { grid-template-columns: 1fr; }
  .mini-summary div { border-right: 0; border-bottom: 1px solid var(--line); }
  .mini-summary div:last-child { border-bottom: 0; }
  .bar-chart { height: 200px; }
  .product-grid { grid-template-columns: 1fr 1fr; gap: 7px; }
  .pos-catalog { padding: 12px; }
  .pos-toolbar { align-items: stretch; flex-direction: column; }
  .pos-search { width: 100%; }
  .product-tile { min-height: 135px; grid-template-columns: 34px 1fr; padding: 11px; }
  .product-art { width: 34px; height: 34px; }
  .cart-line { grid-template-columns: 30px 1fr auto 22px; }
  .cart-line > strong { grid-column: 2 / 4; }
  .qty-control { grid-column: 3; grid-row: 1; }
  .remove-line { grid-column: 4; grid-row: 1; }
  .purchase-add-row { grid-template-columns: 1fr 1fr; }
  .purchase-add-row select { grid-column: 1 / -1; }
  .purchase-add-row .button { grid-column: 1 / -1; }
  .purchase-line { align-items: flex-start; flex-wrap: wrap; padding: 10px 0; }
  .statement-head { align-items: flex-start; flex-direction: column; }
  .statement-head .balance-callout { width: 100%; }
  .branch-grid { grid-template-columns: 1fr; }
  .support-banner { align-items: flex-start; flex-direction: column; gap: 2px; padding: 8px 13px; }
  .mobile-nav {
    display: flex; height: 66px; align-items: center; justify-content: space-around; padding: 5px max(10px, env(safe-area-inset-left)) calc(5px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line);
    position: fixed; inset: auto 0 0; z-index: 40; background: rgba(255,255,255,.96); box-shadow: 0 -8px 25px rgba(10,34,48,.08); backdrop-filter: blur(12px);
  }
  .mobile-nav a { display: flex; min-width: 47px; align-items: center; justify-content: center; flex-direction: column; gap: 2px; color: #819099; font-size: 8px; font-weight: 700; }
  .mobile-nav a i { display: flex; width: 24px; height: 22px; align-items: center; justify-content: center; border-radius: 7px; background: #f1f4f5; font-size: 7px; font-style: normal; }
  .mobile-nav a.active { color: var(--brand-dark); }
  .mobile-nav a.active i { color: #fff; background: var(--brand); }
  .mobile-nav .mobile-pos { transform: translateY(-12px); }
  .mobile-nav .mobile-pos b { display: flex; width: 45px; height: 45px; align-items: center; justify-content: center; border: 5px solid #fff; border-radius: 16px; color: #fff; background: var(--brand); box-shadow: 0 8px 18px color-mix(in srgb, var(--brand) 26%, transparent); font-size: 22px; }
  .receipt-body { padding: 0; background: #fff; }
  .receipt-actions { padding: 10px; }
  .receipt-paper { min-height: 100vh; padding: 28px 18px; box-shadow: none; }
  .receipt-meta { grid-template-columns: 1fr; }
  .receipt-totals { width: 100%; }
  .guest-panel { padding: 18px 18px 14px; }
  .guest-mobile-brand { justify-content: center; margin-bottom: 16px; }
  .auth-card { max-width: 100%; padding: 18px 0; }
  .application-card, .setup-card { padding-top: 10px; }
  .form-options { justify-content: flex-start; }
}

@media (max-width: 420px) {
  .stat-grid.four { grid-template-columns: 1fr; }
  .stat-card { min-height: 105px; }
  .product-grid { grid-template-columns: 1fr; }
  .guest-panel { padding-right: 18px; padding-left: 18px; }
  .auth-card h2 { font-size: 27px; }
}

@media print {
  @page { margin: 10mm; }
  body { padding: 0 !important; background: #fff !important; }
  .sidebar, .topbar, .mobile-nav, .support-banner, .no-print, .toolbar, .sidebar-overlay { display: none !important; }
  .app-main { width: 100% !important; margin: 0 !important; }
  .page-content { max-width: none !important; padding: 0 !important; }
  .panel, .stat-card, .mini-summary, .receipt-paper { break-inside: avoid; box-shadow: none !important; }
  .receipt-paper { width: 100%; min-height: 0; padding: 0; }
  .report-heading { margin-top: 0; }
  .data-table th, .data-table td { padding: 7px; }
  .content-grid.split { grid-template-columns: 1fr 1fr; }
}

/* MauzoCore v1.0.2 — app-style visual system */
:root {
  --brand: #1825b7;
  --brand-dark: #111b89;
  --brand-soft: #eef0ff;
  --navy: #111a46;
  --navy-2: #18235f;
  --ink: #17182a;
  --muted: #77788c;
  --line: #e8e6ef;
  --canvas: #f7f6fb;
  --surface: #ffffff;
  --shadow: 0 14px 38px rgba(35, 29, 80, .08);
}

body {
  background: var(--canvas);
  font-family: ui-rounded, "Segoe UI", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, sans-serif;
}

svg { display: block; }
.sidebar-nav a i svg { width: 17px; height: 17px; }
.sidebar-user .icon-button svg { width: 15px; height: 15px; }
.menu-button svg { width: 23px; height: 23px; }
.mobile-brand-title { display: none; }

/* Clean single-panel login */
.guest-body {
  background:
    radial-gradient(circle at 18% 12%, rgba(143, 86, 210, .10), transparent 30%),
    radial-gradient(circle at 82% 88%, rgba(24, 37, 183, .10), transparent 32%),
    #f8f7fc;
}
.guest-shell-single { display: block; min-height: 100vh; }
.guest-shell-single .guest-brand { display: none !important; }
.guest-shell-single .guest-panel {
  min-height: 100svh;
  align-items: center;
  justify-content: center;
  padding: 30px 20px 18px;
  background: transparent;
}
.guest-shell-single .guest-mobile-brand {
  display: flex;
  width: auto;
  margin: 0 0 18px;
  color: var(--navy);
  text-align: left;
}
.guest-shell-single .guest-mobile-brand:hover { color: var(--navy); }
.login-logo-mark {
  display: flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  border: 1px solid #e3e2ee;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(38, 31, 85, .09);
}
.login-logo-mark img { width: 34px !important; height: 34px !important; }
.guest-shell-single .guest-mobile-brand strong { font-size: 20px; }
.guest-shell-single .guest-mobile-brand small { color: #8c8ca0; font-size: 8px; font-weight: 800; letter-spacing: .13em; }
.guest-shell-single .auth-card {
  width: min(100%, 470px);
  max-width: 470px;
  margin: 0;
  padding: 32px;
  border: 1px solid rgba(227, 225, 238, .95);
  border-radius: 24px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 24px 70px rgba(39, 31, 83, .11);
}
.login-card-heading { margin-bottom: 24px; text-align: center; }
.login-card-heading h2 { margin-bottom: 8px; font-size: 30px; }
.login-card-heading p { margin-bottom: 0; }
.login-field { gap: 7px; }
.input-with-icon {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  border: 1px solid #e1dfeb;
  border-radius: 13px;
  background: #faf9fd;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.input-with-icon:focus-within {
  border-color: color-mix(in srgb, var(--brand) 55%, #d8d5e6);
  background: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 10%, transparent);
}
.input-with-icon > svg { width: 19px; height: 19px; flex: 0 0 auto; color: #7775a0; }
.input-with-icon input { min-height: 45px; padding: 0; border: 0; background: transparent; box-shadow: none !important; }
.password-field.input-with-icon { border: 1px solid #e1dfeb; border-radius: 13px; }
.password-field.input-with-icon input { border: 0; }
.password-field.input-with-icon button { position: static; padding: 7px 0 7px 8px; white-space: nowrap; }
.login-submit { min-height: 49px; border-radius: 13px; background: linear-gradient(135deg, var(--brand), #4a25b9); box-shadow: 0 12px 28px color-mix(in srgb, var(--brand) 24%, transparent); }
.guest-shell-single .guest-footer { width: auto; margin-top: 18px; padding-top: 0; text-align: center; }

/* Main shell */
.tenant-panel-body .page-content { max-width: 1500px; }
.sidebar { background: linear-gradient(180deg, #111a46 0%, #141d50 100%); }
.sidebar-nav a.active { background: linear-gradient(90deg, rgba(92, 79, 220, .28), rgba(67, 54, 180, .08)); box-shadow: inset 3px 0 #7d70ff; }
.sidebar-nav a.active i { border-color: rgba(143, 132, 255, .34); color: #b1a9ff; background: rgba(94, 81, 220, .20); }
.sidebar-nav a b { color: #b8b2ff; background: rgba(107, 93, 230, .16); }
.avatar, .top-avatar { background: linear-gradient(145deg, var(--brand), #7b35c9); }
.topbar { border-bottom-color: #ebe9f1; background: rgba(250,249,253,.91); }
.topbar .page-heading h1 { color: #1c1d32; }
.quick-action { background: var(--brand); }
.quick-action:hover { background: var(--brand-dark); }

/* App-like dashboard module cards */
.dashboard-mobile-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.dashboard-mobile-intro h2 { margin: 0 0 4px; font-size: 27px; }
.dashboard-mobile-intro p { margin: 0; font-size: 12px; }
.dashboard-kicker { display: block; margin-bottom: 5px; color: var(--brand); font-size: 9px; font-weight: 850; letter-spacing: .14em; }
.dashboard-crown {
  display: flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(145deg, var(--brand), #5b29ba);
  box-shadow: 0 12px 26px rgba(41, 36, 154, .23);
}
.dashboard-crown:hover { color: #fff; transform: translateY(-1px); }
.dashboard-crown svg { width: 23px; height: 23px; }
.module-launcher {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 30px;
}
.module-card {
  display: flex;
  min-height: 154px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 16px 10px;
  border: 1px solid #e8e5ef;
  border-radius: 19px;
  color: var(--ink);
  text-align: center;
  background: #fff;
  box-shadow: 0 8px 24px rgba(38, 30, 79, .055);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.module-card:hover {
  transform: translateY(-3px);
  border-color: #dcd7e9;
  color: var(--ink);
  box-shadow: 0 16px 34px rgba(40, 31, 84, .10);
}
.module-icon {
  display: flex;
  width: 62px;
  height: 62px;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  border-radius: 17px;
}
.module-icon svg { width: 36px; height: 36px; stroke-width: 1.75; }
.module-card strong { display: block; color: #222233; font-size: 13px; }
.module-card small { margin-top: 3px; font-size: 9px; }
.tone-purple { color: #8730a3; background: #f3e5f7; }
.tone-amber { color: #bd7605; background: #fff0dc; }
.tone-violet { color: #8b2ca8; background: #f4e6f8; }
.tone-magenta { color: #9e32aa; background: #f2e3f5; }
.tone-green { color: #189365; background: #e2f5ec; }
.tone-blue { color: #286eae; background: #e6f0fb; }
.tone-teal { color: #168c6a; background: #e2f4ed; }
.tone-orange { color: #ba7309; background: #fff0de; }
.dashboard-summary-head { display: flex; align-items: end; justify-content: space-between; margin: 0 0 12px; }
.dashboard-summary-head h3 { margin: 0; }
.dashboard-summary-head a { font-size: 11px; font-weight: 750; }
.compact-stats { margin-bottom: 18px; }
.compact-stats .stat-card { min-height: 148px; border-color: #e8e5ef; border-radius: 18px; }
.compact-stats .stat-icon { display: flex; width: 38px; height: 38px; }
.compact-stats .stat-icon svg { width: 19px; height: 19px; }
.stock-value-blue { background: linear-gradient(145deg, #1724ae, #5630b8); }
.dashboard-analytics, .dashboard-lists { margin-top: 0; }

/* Tenant admin login controls */
.tenant-admin-line {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 13px;
  padding: 10px;
  border-radius: 11px;
  background: #f7f6fb;
}
.tenant-admin-line strong { display: block; overflow: hidden; max-width: 180px; color: #25263a; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.tenant-admin-line small { font-size: 8px; }
.tenant-admin-icon { display: flex; width: 29px; height: 29px; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 9px; color: #7c37a9; background: #eee3f5; }
.tenant-admin-icon svg { width: 16px; height: 16px; }
.tenant-control-tabs > .modal-head { margin: 0 23px; padding-top: 23px; }
.tenant-control-tabs > form + form { border-top: 1px solid var(--line); }
.compact-section { margin-top: 0; padding-top: 0; border-top: 0; }
.compact-section .section-number svg { width: 17px; height: 17px; }
.compact-section h3 { font-size: 16px; }
.login-reset-form .info-note { font-size: 10px; }

@media (max-width: 1250px) {
  .module-launcher { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1020px) {
  .module-launcher { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  body.app-body { padding-bottom: 76px; }
  .topbar {
    min-height: 68px;
    padding: 9px 17px;
    position: sticky;
  }
  .topbar .page-heading { display: none; }
  .mobile-brand-title {
    display: block;
    max-width: calc(100% - 110px);
    overflow: hidden;
    position: absolute;
    left: 50%;
    color: #17206e;
    font-size: 17px;
    font-weight: 800;
    text-overflow: ellipsis;
    transform: translateX(-50%);
    white-space: nowrap;
  }
  .menu-button { border: 0; color: var(--brand); background: transparent; }
  .topbar-actions { margin-left: auto; }
  .top-avatar { width: 36px; height: 36px; border-radius: 50%; }
  .page-content { padding: 18px 17px 24px; }
  .dashboard-mobile-intro { margin-bottom: 15px; }
  .dashboard-mobile-intro h2 { font-size: 22px; }
  .dashboard-mobile-intro p { max-width: 245px; font-size: 10px; }
  .dashboard-crown { width: 43px; height: 43px; border-radius: 14px; }
  .module-launcher { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 26px; }
  .module-card { min-height: 137px; padding: 13px 5px; border-radius: 17px; }
  .module-icon { width: 56px; height: 56px; margin-bottom: 10px; border-radius: 15px; }
  .module-icon svg { width: 32px; height: 32px; }
  .module-card strong { font-size: 11px; }
  .module-card small { display: none; }
  .dashboard-summary-head { margin-bottom: 10px; }
  .compact-stats { grid-template-columns: 1fr 1fr !important; gap: 9px; }
  .compact-stats .stat-card { min-height: 118px; padding: 14px; }
  .compact-stats .stat-card > strong { font-size: 16px; }
  .compact-stats .stat-icon { display: flex; width: 32px; height: 32px; }
  .compact-stats .stat-icon svg { width: 16px; height: 16px; }
  .dashboard-analytics, .dashboard-lists { gap: 12px; }
  .mobile-nav {
    height: 70px;
    border-top-color: #e6e3ee;
    background: rgba(255,255,255,.97);
  }
  .mobile-nav a { color: #a2a0b1; font-size: 8px; }
  .mobile-nav a i { width: 28px; height: 25px; color: #aaa7b8; background: transparent; }
  .mobile-nav a i svg { width: 21px; height: 21px; }
  .mobile-nav a.active { color: var(--brand); }
  .mobile-nav a.active i { color: var(--brand); background: transparent; }
  .mobile-nav .mobile-pos { transform: translateY(-14px); }
  .mobile-nav .mobile-pos b { width: 53px; height: 53px; border-radius: 50%; background: linear-gradient(145deg, var(--brand), #4924b5); }
  .guest-shell-single .guest-panel { padding: 22px 16px 14px; }
  .guest-shell-single .auth-card { padding: 25px 20px; border-radius: 21px; }
  .login-card-heading h2 { font-size: 26px; }
}

@media (max-width: 420px) {
  .module-launcher { gap: 9px; }
  .module-card { min-height: 128px; }
  .module-icon { width: 52px; height: 52px; }
  .module-icon svg { width: 29px; height: 29px; }
  .compact-stats { grid-template-columns: 1fr 1fr !important; }
  .guest-shell-single .auth-card { padding: 23px 17px; }
}

/* MauzoCore v1.0.4 — responsive login and cache-safe icon sizing */
svg[width][height] { flex: 0 0 auto; }
.input-with-icon > svg,
.password-field.input-with-icon > svg { width: 20px !important; height: 20px !important; }
.module-icon > svg { width: 31px !important; height: 31px !important; }
.stat-icon > svg { width: 18px !important; height: 18px !important; }
.dashboard-crown > svg { width: 22px !important; height: 22px !important; }

@media (min-width: 1401px) {
  .module-launcher { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
  .module-card { min-height: 128px; padding: 14px 9px; border-radius: 17px; }
  .module-icon { width: 52px; height: 52px; margin-bottom: 10px; border-radius: 15px; }
}

@media (min-width: 721px) {
  .guest-shell-single .guest-panel {
    padding: 40px 28px 24px;
  }
  .guest-shell-single .guest-mobile-brand {
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
  }
  .guest-shell-single .auth-card {
    width: min(100%, 520px);
    max-width: 520px;
    padding: 36px 42px;
    border-radius: 28px;
  }
  .login-card-heading { margin-bottom: 27px; }
  .login-card-heading h2 { font-size: 32px; }
  .input-with-icon { min-height: 52px; padding-inline: 15px; }
  .input-with-icon input { min-height: 49px; }
  .login-submit { min-height: 52px; }
}

@media (max-width: 1400px) and (min-width: 1251px) {
  .module-launcher { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .module-card { min-height: 132px; }
  .module-icon { width: 54px; height: 54px; }
}

@media (max-width: 720px) {
  .guest-shell-single .guest-panel {
    justify-content: flex-start;
    padding-top: max(20px, env(safe-area-inset-top));
  }
  .guest-shell-single .guest-mobile-brand {
    align-items: center;
    justify-content: center;
    margin: 8px 0 14px;
  }
  .guest-shell-single .auth-card {
    width: 100%;
    max-width: 430px;
    padding: 24px 19px;
    border-radius: 22px;
  }
  .login-logo-mark { width: 46px; height: 46px; border-radius: 14px; }
  .login-logo-mark img { width: 30px !important; height: 30px !important; }
  .guest-shell-single .guest-mobile-brand strong { font-size: 18px; }
  .login-card-heading { margin-bottom: 20px; }
  .login-card-heading h2 { font-size: 25px; }
  .login-card-heading p { font-size: 12px; }
  .input-with-icon { min-height: 49px; }
  .module-icon > svg { width: 29px !important; height: 29px !important; }
}



/* MauzoCore v1.1.1 — top account dropdown and self-service profile */
.account-menu { position: relative; }
.account-menu-toggle {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 13px;
  background: transparent;
  cursor: pointer;
}
.account-menu-toggle .top-avatar {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--brand) 22%, transparent);
  transition: transform .16s ease, box-shadow .16s ease;
}
.account-menu-toggle:hover .top-avatar,
.account-menu.open .top-avatar {
  transform: translateY(-1px);
  box-shadow: 0 11px 24px color-mix(in srgb, var(--brand) 30%, transparent);
}
.account-menu-toggle:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 24%, transparent); outline-offset: 3px; }
.account-dropdown {
  width: min(286px, calc(100vw - 28px));
  padding: 9px;
  border: 1px solid #e4e7ef;
  border-radius: 17px;
  position: absolute;
  top: calc(100% + 11px);
  right: 0;
  z-index: 80;
  background: #fff;
  box-shadow: 0 22px 60px rgba(23, 26, 61, .17);
  transform-origin: top right;
  animation: account-menu-in .16s ease-out;
}
.account-dropdown[hidden] { display: none !important; }
@keyframes account-menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.account-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
  padding: 10px;
  border-radius: 12px;
  background: #f7f7fb;
}
.account-summary-avatar {
  display: inline-flex;
  width: 39px;
  height: 39px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: #fff;
  background: var(--brand);
  font-size: 11px;
  font-weight: 850;
}
.account-summary > span:last-child { min-width: 0; }
.account-summary strong,
.account-summary small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-summary strong { color: #1d2238; font-size: 12px; }
.account-summary small { margin-top: 2px; color: #83899c; font-size: 9px; }
.account-dropdown form { margin: 0; }
.account-menu-item {
  display: flex;
  width: 100%;
  min-height: 54px;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border: 0;
  border-radius: 12px;
  color: #263047;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background .14s ease, transform .14s ease;
}
.account-menu-item:hover { background: #f2f3fa; transform: translateX(1px); }
.account-menu-item i {
  display: inline-flex;
  width: 35px;
  height: 35px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, #fff);
  font-style: normal;
}
.account-menu-item i svg { width: 18px !important; height: 18px !important; }
.account-menu-item span { min-width: 0; }
.account-menu-item strong, .account-menu-item small { display: block; }
.account-menu-item strong { color: inherit; font-size: 11px; }
.account-menu-item small { margin-top: 2px; color: #8a91a2; font-size: 9px; }
.account-menu-logout { margin-top: 4px; color: #bd3f45; border-top: 1px solid #eef0f5; border-radius: 0 0 12px 12px; }
.account-menu-logout i { color: #bd3f45; background: #fff0f1; }
.account-menu-logout:hover { background: #fff3f3; }
.account-form-note { margin: -2px 0 14px; color: #7d8791; font-size: 10px; line-height: 1.55; }

@media (max-width: 720px) {
  .account-menu-toggle,
  .account-menu-toggle .top-avatar { width: 38px; height: 38px; border-radius: 12px; }
  .account-dropdown { top: calc(100% + 10px); right: -2px; }
}

/* MauzoCore v1.2.0 — finance, report center, branches, commission and language */
.account-dropdown { width: min(320px, calc(100vw - 24px)); max-height: min(660px, calc(100vh - 90px)); overflow-y: auto; }
.account-language-box { margin: 5px 0; padding: 10px; border-top: 1px solid #eef0f5; border-bottom: 1px solid #eef0f5; }
.account-language-title { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; }
.account-language-title > i { display: inline-flex; width: 35px; height: 35px; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 11px; color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, #fff); }
.account-language-title i svg { width: 18px !important; height: 18px !important; }
.account-language-title span { min-width: 0; }
.account-language-title strong, .account-language-title small { display: block; }
.account-language-title strong { color: #263047; font-size: 11px; }
.account-language-title small { margin-top: 2px; color: #8a91a2; font-size: 9px; }
.language-choice-form { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.language-option { display: flex; min-height: 39px; align-items: center; gap: 7px; padding: 6px 8px; border: 1px solid #e5e8f0; border-radius: 10px; color: #4b5264; background: #fff; cursor: pointer; font-size: 10px; font-weight: 750; }
.language-option > span { display: inline-flex; width: 25px; height: 25px; align-items: center; justify-content: center; border-radius: 8px; color: #555d71; background: #f0f2f7; font-size: 8px; font-weight: 900; }
.language-option b { margin-left: auto; color: var(--brand); }
.language-option:hover, .language-option.active { border-color: color-mix(in srgb, var(--brand) 32%, #e5e8f0); color: var(--brand); background: color-mix(in srgb, var(--brand) 6%, #fff); }
.language-option.active > span { color: #fff; background: var(--brand); }

.finance-hero, .report-center-hero, .store-overview-banner, .commission-hero {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-bottom: 18px; padding: 25px 27px; overflow: hidden; border-radius: 22px;
  color: #fff; background: linear-gradient(135deg, #0f8f69 0%, #23bb74 55%, #45d680 100%);
  box-shadow: 0 18px 42px rgba(15, 143, 105, .16);
}
.finance-hero::after, .report-center-hero::after, .store-overview-banner::after, .commission-hero::after {
  content: ''; position: absolute; width: 210px; height: 210px; right: -62px; bottom: -104px; border-radius: 50%; background: rgba(255,255,255,.12);
}
.finance-hero > *, .report-center-hero > *, .store-overview-banner > *, .commission-hero > * { position: relative; z-index: 1; }
.finance-hero .eyebrow, .report-center-hero .eyebrow, .store-overview-banner .eyebrow, .commission-hero .eyebrow { color: rgba(255,255,255,.78); }
.finance-hero h2, .report-center-hero h2, .store-overview-banner h2, .commission-hero h2 { margin: 5px 0 7px; color: #fff; font-size: clamp(22px, 3vw, 32px); }
.finance-hero p, .report-center-hero p, .store-overview-banner p, .commission-hero p { max-width: 680px; margin: 0; color: rgba(255,255,255,.86); line-height: 1.6; }
.finance-hero .button { border-color: rgba(255,255,255,.35); color: #127457; background: #fff; box-shadow: 0 11px 24px rgba(0,0,0,.13); }

.finance-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 14px; }
.finance-metric { min-height: 132px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 10px 28px rgba(35, 40, 78, .055); }
.finance-metric span, .finance-metric small { display: block; }
.finance-metric span { color: var(--muted); font-size: 10px; font-weight: 750; }
.finance-metric strong { display: block; margin: 10px 0 8px; color: var(--navy); font-size: clamp(19px, 2vw, 27px); }
.finance-metric small { color: #9097a8; font-size: 9px; line-height: 1.45; }
.finance-metric.capital-card { background: linear-gradient(145deg, #151fb5, #3c2bd5); }
.finance-metric.profit-card { background: linear-gradient(145deg, #07885e, #23bd73); }
.finance-metric.stock-card { background: linear-gradient(145deg, #126ab4, #238bcc); }
.finance-metric.capital-card span, .finance-metric.capital-card strong, .finance-metric.capital-card small,
.finance-metric.profit-card span, .finance-metric.profit-card strong, .finance-metric.profit-card small,
.finance-metric.stock-card span, .finance-metric.stock-card strong, .finance-metric.stock-card small { color: #fff; }
.finance-metric.capital-card span, .finance-metric.profit-card span, .finance-metric.stock-card span,
.finance-metric.capital-card small, .finance-metric.profit-card small, .finance-metric.stock-card small { opacity: .78; }
.finance-flow-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.finance-flow-grid article { display: flex; min-height: 92px; flex-direction: column; justify-content: center; padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.finance-flow-grid article i { display: inline-flex; width: 31px; height: 31px; align-items: center; justify-content: center; margin-bottom: 9px; border-radius: 10px; color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, #fff); }
.finance-flow-grid article i svg { width: 17px !important; height: 17px !important; }
.finance-flow-grid article span { color: var(--muted); font-size: 9px; }
.finance-flow-grid article strong { margin-top: 3px; color: var(--navy); font-size: 14px; }
.finance-rule-note { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 18px; padding: 15px 17px; border: 1px solid #cfe9df; border-radius: 16px; background: #effaf5; }
.finance-rule-note > i { display: inline-flex; width: 37px; height: 37px; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 12px; color: #0c8c64; background: #d9f3e8; }
.finance-rule-note i svg { width: 19px !important; height: 19px !important; }
.finance-rule-note strong { display: block; color: #14684f; font-size: 11px; }
.finance-rule-note p { margin: 4px 0 0; color: #4c7769; font-size: 10px; line-height: 1.55; }
.finance-type { display: inline-flex; padding: 5px 8px; border-radius: 999px; color: #334155; background: #f0f3f7; font-size: 8px; font-weight: 800; white-space: nowrap; }
.finance-type.profit_to_capital, .finance-type.capital_addition, .finance-type.opening_capital, .finance-type.profit_credit { color: #087755; background: #e7f8f1; }
.finance-type.profit_withdrawal, .finance-type.capital_withdrawal, .finance-type.profit_debit { color: #a53d46; background: #fff0f1; }

.dashboard-finance-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; margin: -3px 0 22px; }
.dashboard-finance-strip a { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: 15px; color: inherit; background: #fff; transition: transform .16s ease, box-shadow .16s ease; }
.dashboard-finance-strip a:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(32, 38, 72, .08); }
.dashboard-finance-strip span, .dashboard-finance-strip small { display: block; }
.dashboard-finance-strip span { color: var(--muted); font-size: 9px; }
.dashboard-finance-strip strong { display: block; margin: 4px 0; color: var(--navy); font-size: 17px; }
.dashboard-finance-strip small { color: #969cad; font-size: 8px; }

.report-center-hero { background: linear-gradient(135deg, #118e62 0%, #2cbd70 60%, #80d84b 100%); }
.report-hero-badge { min-width: 210px; padding: 15px; border: 1px solid rgba(255,255,255,.25); border-radius: 15px; background: rgba(255,255,255,.14); backdrop-filter: blur(6px); }
.report-hero-badge i { display: inline-flex; margin-bottom: 8px; }
.report-hero-badge i svg { width: 25px !important; height: 25px !important; }
.report-hero-badge span, .report-hero-badge strong { display: block; }
.report-hero-badge span { color: rgba(255,255,255,.72); font-size: 9px; }
.report-hero-badge strong { margin-top: 3px; color: #fff; font-size: 13px; }
.report-module-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.report-module-card { display: flex; min-height: 84px; align-items: center; gap: 11px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; color: inherit; background: #fff; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.report-module-card:hover, .report-module-card.active { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); box-shadow: 0 12px 27px rgba(30, 35, 76, .08); }
.report-module-card.active { background: color-mix(in srgb, var(--brand) 4%, #fff); }
.report-module-card > span:nth-child(2) { min-width: 0; flex: 1; }
.report-module-card strong, .report-module-card small { display: block; }
.report-module-card strong { color: var(--navy); font-size: 10px; }
.report-module-card small { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.report-module-card > b { color: #aab0bd; font-size: 20px; }
.quick-period-panel { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 15px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.quick-period-panel strong, .quick-period-panel small { display: block; }
.quick-period-panel strong { color: var(--navy); font-size: 10px; }
.quick-period-panel small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.quick-period-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.quick-period-links a { padding: 7px 10px; border-radius: 9px; color: #5d6474; background: #f2f4f8; font-size: 8px; font-weight: 800; }
.quick-period-links a:hover { color: #fff; background: var(--brand); }
.alert-report-card { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding: 18px; border: 1px solid #f4d8dc; border-radius: 17px; background: #fff3f4; }
.alert-report-card i { display: inline-flex; width: 45px; height: 45px; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 14px; color: #d24956; background: #ffe2e5; }
.alert-report-card strong { display: block; color: #8e3039; }
.alert-report-card p { margin: 3px 0 0; color: #a35d63; font-size: 10px; }
.report-finance-grid { margin-top: 4px; }

.store-overview-banner { background: linear-gradient(135deg, #1763af, #2c8fd0); }
.store-banner-count { display: flex; min-width: 110px; height: 90px; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.25); border-radius: 18px; background: rgba(255,255,255,.14); }
.store-banner-count strong { color: #fff; font-size: 28px; }
.store-banner-count span { color: rgba(255,255,255,.75); font-size: 9px; }
.store-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.store-card { padding: 17px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 10px 25px rgba(34, 40, 75, .05); }
.store-card.main-store { border-color: color-mix(in srgb, var(--brand) 25%, var(--line)); background: linear-gradient(150deg, color-mix(in srgb, var(--brand) 4%, #fff), #fff 60%); }
.store-card-head { display: flex; align-items: center; justify-content: space-between; }
.store-card h3 { margin: 13px 0 4px; color: var(--navy); font-size: 16px; }
.store-card > p { min-height: 30px; margin: 0 0 13px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.store-card > small { display: block; margin-top: 12px; color: #8d94a4; font-size: 9px; }
.store-card-metrics { display: grid; grid-template-columns: 1.5fr .8fr .8fr; gap: 6px; }
.store-card-metrics div { padding: 9px; border-radius: 11px; background: #f6f7fa; }
.store-card-metrics span, .store-card-metrics strong { display: block; }
.store-card-metrics span { color: var(--muted); font-size: 7px; }
.store-card-metrics strong { margin-top: 3px; overflow: hidden; color: var(--navy); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.commission-hero { background: linear-gradient(135deg, #3427bd, #7250d7); }
.commission-summary { grid-template-columns: repeat(3, 1fr); }
.inline-rate-form { display: flex; min-width: 125px; align-items: center; gap: 5px; }
.inline-rate-form input { width: 65px; height: 32px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 8px; font-size: 9px; }
.inline-rate-form button { height: 32px; padding: 0 8px; border: 0; border-radius: 8px; color: #fff; background: var(--brand); cursor: pointer; font-size: 8px; font-weight: 800; }
.muted { color: #9aa0ae !important; }

@media (max-width: 1250px) {
  .finance-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-flow-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .report-module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .finance-hero, .report-center-hero, .store-overview-banner, .commission-hero { align-items: flex-start; flex-direction: column; padding: 20px; border-radius: 18px; }
  .finance-hero .button { width: 100%; }
  .finance-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .finance-metric { min-height: 118px; padding: 14px; border-radius: 15px; }
  .finance-flow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-finance-strip { grid-template-columns: 1fr; }
  .report-hero-badge { width: 100%; min-width: 0; }
  .report-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-period-panel { align-items: flex-start; flex-direction: column; }
  .quick-period-links { justify-content: flex-start; }
  .store-grid { grid-template-columns: 1fr; }
  .commission-summary { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .finance-metric-grid { grid-template-columns: 1fr; }
  .report-module-grid { grid-template-columns: 1fr; }
  .finance-flow-grid { grid-template-columns: 1fr; }
  .language-choice-form { grid-template-columns: 1fr 1fr; }
}
@media print {
  .report-center-hero, .report-module-grid, .quick-period-panel { display: none !important; }
  .finance-metric, .finance-rule-note, .finance-flow-grid article { break-inside: avoid; box-shadow: none !important; }
}

/* v1.2.1 product import */
.import-template-card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px;
  border: 1px solid #dfe8ed;
  border-radius: 14px;
  background: linear-gradient(135deg, #f8fbfc, #eef8f5);
}
.import-template-card .button { flex: 0 0 auto; }
.import-template-card svg,
.toolbar-actions .button svg,
.import-guidance + .button svg { width: 18px; height: 18px; }
.import-template-icon {
  display: inline-flex;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: var(--brand-dark);
  background: var(--brand-soft);
}
.import-template-icon svg { width: 22px; height: 22px; }
.import-guidance { display: grid; gap: 4px; }
.import-guidance strong { color: var(--navy); }
.import-guidance span { color: #5f707a; }

@media (max-width: 640px) {
  .import-template-card { align-items: flex-start; flex-wrap: wrap; }
  .import-template-card .grow { flex-basis: calc(100% - 58px); }
  .import-template-card .button { width: 100%; }
}

/* =========================================================
   MauzoCore v1.3.0 - Sales Hub
   ========================================================= */
.nav-hub{margin:2px 0;border-radius:16px;overflow:hidden}.nav-hub summary{list-style:none;display:flex;align-items:center;gap:13px;min-height:52px;padding:0 14px;color:var(--sidebar-muted,#9fb0c9);font-weight:800;cursor:pointer;border-radius:14px;transition:.2s ease}.nav-hub summary::-webkit-details-marker{display:none}.nav-hub summary>i{display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(255,255,255,.1);border-radius:10px;flex:0 0 auto}.nav-hub summary>i svg{width:18px;height:18px}.nav-hub summary>span{flex:1}.nav-hub summary>b{display:grid;place-items:center;transition:transform .2s ease}.nav-hub summary>b svg{width:16px;height:16px}.nav-hub[open] summary>b{transform:rotate(180deg)}.nav-hub summary:hover,.nav-hub summary.active{background:rgba(99,102,241,.16);color:#fff}.nav-hub-links{display:grid;gap:3px;padding:4px 8px 10px 50px}.nav-hub-links a{display:flex;align-items:center;gap:8px;min-height:36px;padding:7px 10px;border-radius:10px;color:var(--sidebar-muted,#9fb0c9);font-size:.82rem;font-weight:700}.nav-hub-links a:hover,.nav-hub-links a.active{background:rgba(255,255,255,.08);color:#fff}.nav-hub-links a.active{box-shadow:inset 3px 0 0 #8b5cf6}.nav-hub-links em{margin-left:auto;padding:2px 6px;border-radius:6px;background:rgba(139,92,246,.2);font-size:.65rem;font-style:normal}

.sales-hub-tabs{display:flex;gap:8px;margin-bottom:18px;padding:7px;background:#fff;border:1px solid var(--line,#e7eaf2);border-radius:18px;overflow-x:auto;box-shadow:0 8px 30px rgba(15,23,42,.04);scrollbar-width:none}.sales-hub-tabs::-webkit-scrollbar{display:none}.sales-hub-tabs a{display:flex;align-items:center;gap:8px;min-width:max-content;padding:10px 13px;border-radius:12px;color:#64748b;font-size:.82rem;font-weight:800}.sales-hub-tabs a svg{width:18px;height:18px}.sales-hub-tabs a:hover{background:#f8fafc;color:#1e293b}.sales-hub-tabs a.active{background:linear-gradient(135deg,var(--brand,#1825b7),#6d28d9);color:#fff;box-shadow:0 8px 18px rgba(67,56,202,.2)}

.sales-hub-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:18px;padding:24px 26px;border-radius:24px;background:linear-gradient(135deg,#ffffff 0%,#f3f4ff 58%,#eef2ff 100%);border:1px solid #e4e7ff;box-shadow:0 15px 40px rgba(30,41,59,.06);position:relative;overflow:hidden}.sales-hub-hero:after{content:"";position:absolute;right:-60px;top:-80px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(109,40,217,.18),transparent 68%)}.sales-hub-hero>div,.sales-hub-hero>a,.sales-hub-hero>button{position:relative;z-index:1}.sales-hub-hero h2{margin:4px 0 7px;font-size:clamp(1.35rem,2.3vw,2rem)}.sales-hub-hero p{max-width:720px;margin:0;color:#64748b;line-height:1.6}.sales-hub-hero-actions{display:flex;gap:10px;flex-wrap:wrap}.sales-hub-hero .button{display:inline-flex;align-items:center;gap:8px}.sales-hub-hero .button svg{width:18px;height:18px}.return-hero{background:linear-gradient(135deg,#fff 0%,#fff7ed 58%,#ffedd5 100%);border-color:#fed7aa}.profit-hero{background:linear-gradient(135deg,#fff 0%,#ecfdf5 55%,#d1fae5 100%);border-color:#a7f3d0}

.sales-metric-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:18px}.sales-metric-grid.four-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}.sales-metric-grid article{padding:18px 19px;border-radius:19px;background:#fff;border:1px solid #e8ebf3;box-shadow:0 10px 25px rgba(15,23,42,.045)}.sales-metric-grid article span{display:block;color:#64748b;font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.sales-metric-grid article strong{display:block;margin:8px 0 4px;color:#111827;font-size:1.25rem;line-height:1.15}.sales-metric-grid article small{display:block;color:#94a3b8}.sales-metric-grid .metric-sales{background:linear-gradient(145deg,#eff6ff,#fff);border-color:#bfdbfe}.sales-metric-grid .metric-collected{background:linear-gradient(145deg,#ecfdf5,#fff);border-color:#a7f3d0}.sales-metric-grid .metric-return{background:linear-gradient(145deg,#fff7ed,#fff);border-color:#fed7aa}.sales-metric-grid .metric-debt{background:linear-gradient(145deg,#fef2f2,#fff);border-color:#fecaca}

.sales-filter-panel{margin-bottom:18px;padding:16px}.sales-filter-form{display:grid;grid-template-columns:repeat(4,minmax(140px,1fr));gap:12px;align-items:end}.sales-filter-form .field{margin:0}.sales-filter-form .sales-search-field{grid-column:span 2}.sales-filter-form .button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:7px}.sales-filter-form .button svg{width:17px;height:17px}.returns-filter{grid-template-columns:160px 160px minmax(240px,1fr) auto auto}.sales-table-panel .panel-heading{padding:18px 20px 4px}.record-count{padding:7px 10px;border-radius:999px;background:#f1f5f9;color:#475569;font-size:.75rem;font-weight:800}.sales-hub-table td{vertical-align:middle}.sales-hub-table td small{display:block;margin-top:4px;color:#94a3b8}.sale-number{color:var(--brand,#1825b7);font-weight:900}.sales-action-group{display:flex;gap:6px;flex-wrap:wrap}.action-chip{display:inline-flex;align-items:center;gap:5px;padding:7px 9px;border:1px solid #e2e8f0;border-radius:10px;background:#fff;color:#475569;font-size:.72rem;font-weight:800;cursor:pointer}.action-chip svg{width:15px;height:15px}.action-chip:hover{border-color:#c7d2fe;background:#eef2ff;color:#3730a3}.danger-chip{color:#b91c1c}.danger-chip:hover{background:#fef2f2;border-color:#fecaca;color:#991b1b}.status.partially_returned{background:#fff7ed;color:#c2410c}.status.returned{background:#fef2f2;color:#b91c1c}.status.cancelled{background:#f1f5f9;color:#64748b}.status.completed{background:#ecfdf5;color:#047857}

.sales-entry-shell>form,.return-create-layout>form{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;align-items:start}.sales-entry-main,.return-create-main{display:grid;gap:18px}.sales-entry-side,.return-create-side{position:sticky;top:92px}.sales-entry-panel,.sales-product-picker,.sales-total-card,.return-sale-card,.return-items-panel,.return-summary-card{padding:20px}.stock-note{color:#64748b;font-size:.75rem}.sales-product-add-row{display:grid;grid-template-columns:minmax(260px,1fr) 110px 140px auto;gap:10px;align-items:end;margin-bottom:18px}.sales-product-add-row .field{margin:0}.sales-add-product{min-height:44px;display:inline-flex;align-items:center;gap:7px}.sales-add-product svg{width:17px;height:17px}.sales-lines-table-wrap{border:1px solid #e7eaf2;border-radius:15px}.sales-lines-table{min-width:700px}.line-edit-input,.return-qty-input{width:100px;min-height:38px;padding:7px 9px;border:1px solid #dbe1ec;border-radius:9px}.sales-total-card{display:grid;gap:12px}.sales-total-lines{display:grid;gap:10px;padding:16px;border-radius:15px;background:#f8fafc;border:1px solid #e7eaf2}.sales-total-lines>div{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#64748b}.sales-total-lines strong{color:#0f172a}.sales-total-lines .grand-total{margin:4px -6px;padding:12px 6px;border-top:1px dashed #cbd5e1;border-bottom:1px dashed #cbd5e1;color:#0f172a;font-size:1.05rem}.sales-total-lines .grand-total strong{font-size:1.45rem;color:var(--brand,#1825b7)}.sales-save-button{display:flex;align-items:center;justify-content:center;gap:8px}.sales-save-button svg{width:18px;height:18px}

.return-sale-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.return-sale-meta>div{padding:13px;border-radius:13px;background:#f8fafc;border:1px solid #e8ebf2}.return-sale-meta span{display:block;color:#64748b;font-size:.72rem;font-weight:700}.return-sale-meta strong{display:block;margin-top:5px;color:#0f172a}.return-items-table{min-width:760px}.return-items-table input[type=checkbox]{width:19px;height:19px;accent-color:var(--brand,#1825b7)}.return-item-disabled{opacity:.48}.return-summary-card{display:grid;gap:13px}.return-estimate{padding:16px;border-radius:16px;background:linear-gradient(135deg,#fff7ed,#fffbeb);border:1px solid #fed7aa}.return-estimate span,.return-estimate small{display:block;color:#92400e}.return-estimate strong{display:block;margin:7px 0;color:#9a3412;font-size:1.55rem}.switch-field{display:flex;gap:10px;align-items:flex-start;padding:13px;border:1px solid #e2e8f0;border-radius:13px;background:#f8fafc}.switch-field input{width:19px;height:19px;margin-top:2px;accent-color:var(--brand,#1825b7)}.switch-field span{display:grid;gap:3px}.switch-field small{color:#64748b;line-height:1.45}

.summary-filter-panel{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:18px;padding:15px}.summary-filter-form{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.summary-filter-form .field{min-width:160px;margin:0}.quick-periods{display:flex;gap:7px;flex-wrap:wrap}.quick-periods a{padding:8px 10px;border-radius:9px;background:#f1f5f9;color:#475569;font-size:.75rem;font-weight:800}.quick-periods a:hover{background:#e0e7ff;color:#3730a3}.profit-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}.profit-kpi{padding:18px;border:1px solid #e5e7eb;border-radius:19px;background:#fff;box-shadow:0 10px 25px rgba(15,23,42,.04)}.profit-kpi span{display:block;color:#64748b;font-size:.74rem;font-weight:800;text-transform:uppercase}.profit-kpi strong{display:block;margin:8px 0 4px;color:#0f172a;font-size:1.26rem}.profit-kpi small{color:#94a3b8}.profit-kpi.net-sales{border-color:#bfdbfe;background:#eff6ff}.profit-kpi.collected{border-color:#a7f3d0;background:#ecfdf5}.profit-kpi.cogs{border-color:#fde68a;background:#fffbeb}.profit-kpi.gross-profit{border-color:#bbf7d0;background:#f0fdf4}.profit-kpi.expenses{border-color:#fecaca;background:#fef2f2}.profit-kpi.other-income{border-color:#bae6fd;background:#f0f9ff}.profit-kpi.net-profit{border-color:#c4b5fd;background:linear-gradient(135deg,#f5f3ff,#fff)}.profit-kpi.orders{border-color:#e2e8f0;background:#f8fafc}.summary-dashboard-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,.75fr);gap:18px;margin-bottom:18px}.summary-chart-card,.payment-mix-card{padding:20px}.sales-bar-chart{display:flex;align-items:flex-end;gap:10px;height:280px;padding:25px 4px 4px;overflow-x:auto}.sales-bar-column{display:grid;grid-template-rows:20px 1fr 24px;gap:5px;min-width:42px;height:100%;text-align:center}.sales-bar-value{font-size:.62rem;color:#64748b;white-space:nowrap;transform:rotate(-35deg);transform-origin:center}.sales-bar-track{height:100%;display:flex;align-items:flex-end;border-radius:10px 10px 5px 5px;background:#f1f5f9;overflow:hidden}.sales-bar-track i{display:block;width:100%;min-height:4px;background:linear-gradient(180deg,#6366f1,#22c55e);border-radius:10px 10px 4px 4px}.sales-bar-column small{color:#64748b;font-size:.65rem}.payment-mix-list{display:grid;gap:13px}.payment-mix-row{display:grid;grid-template-columns:1fr auto;gap:6px 10px}.payment-mix-row>div:first-child{display:grid}.payment-mix-row span{color:#94a3b8;font-size:.7rem}.payment-progress{grid-column:1/-1;height:8px;border-radius:999px;background:#eef2f7;overflow:hidden}.payment-progress i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--brand,#1825b7),#8b5cf6)}.summary-table-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.summary-table-grid .panel-heading{padding:18px 20px 4px}

@media (max-width:1200px){.sales-metric-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.profit-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.sales-filter-form{grid-template-columns:repeat(3,minmax(150px,1fr))}.sales-entry-shell>form,.return-create-layout>form{grid-template-columns:minmax(0,1fr) 320px}.return-sale-meta{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:980px){.sales-entry-shell>form,.return-create-layout>form{grid-template-columns:1fr}.sales-entry-side,.return-create-side{position:static}.summary-dashboard-grid,.summary-table-grid{grid-template-columns:1fr}.sales-product-add-row{grid-template-columns:minmax(220px,1fr) 100px 130px}.sales-product-add-row .sales-add-product{grid-column:1/-1;justify-content:center}.summary-filter-panel{align-items:stretch;flex-direction:column}.profit-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.sales-hub-tabs{margin:0 -4px 14px;padding:5px;border-radius:14px}.sales-hub-tabs a{padding:9px 10px;font-size:.75rem}.sales-hub-hero{align-items:flex-start;flex-direction:column;padding:19px;border-radius:19px}.sales-hub-hero-actions{width:100%}.sales-hub-hero-actions .button{flex:1;justify-content:center}.sales-metric-grid,.sales-metric-grid.four-metrics,.profit-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.sales-metric-grid article,.profit-kpi{padding:14px;border-radius:15px}.sales-metric-grid article strong,.profit-kpi strong{font-size:1.05rem}.sales-filter-form,.returns-filter{grid-template-columns:repeat(2,minmax(0,1fr))}.sales-filter-form .sales-search-field{grid-column:1/-1}.sales-filter-form .button{width:100%}.sales-entry-panel,.sales-product-picker,.sales-total-card,.return-sale-card,.return-items-panel,.return-summary-card{padding:15px}.sales-product-add-row{grid-template-columns:1fr 1fr}.sales-product-add-row .grow{grid-column:1/-1}.sales-product-add-row .sales-add-product{grid-column:1/-1}.return-sale-meta{grid-template-columns:1fr 1fr}.summary-filter-form{display:grid;grid-template-columns:1fr 1fr;width:100%}.summary-filter-form .field{min-width:0}.summary-filter-form .button{grid-column:1/-1}.quick-periods{overflow-x:auto;flex-wrap:nowrap}.sales-bar-chart{height:235px}.nav-hub-links{padding-left:43px}}
@media (max-width:480px){.sales-metric-grid,.sales-metric-grid.four-metrics,.profit-kpi-grid{grid-template-columns:1fr 1fr}.sales-filter-form,.returns-filter{grid-template-columns:1fr}.sales-filter-form .sales-search-field{grid-column:1}.return-sale-meta{grid-template-columns:1fr}.summary-filter-form{grid-template-columns:1fr}.sales-hub-hero .button{width:100%;justify-content:center}.sales-action-group{min-width:175px}.sales-metric-grid article span,.profit-kpi span{font-size:.67rem}.sales-metric-grid article strong,.profit-kpi strong{font-size:.95rem}}
@media print{.sales-hub-tabs,.sales-hub-hero .button,.summary-filter-panel,.no-print,.mobile-nav,.sidebar,.topbar{display:none!important}.app-main{margin:0!important}.page-content{padding:0!important}.profit-kpi-grid{grid-template-columns:repeat(4,1fr)}.summary-dashboard-grid,.summary-table-grid{grid-template-columns:1fr 1fr}.panel,.profit-kpi{box-shadow:none!important;break-inside:avoid}}


/* ================================================================
   MauzoCore v1.3.1 - Sales Hub responsive UI refinement
   Keeps the Sales Hub compact on phones and removes cramped forms.
   ================================================================ */
.sales-entry-shell,
.sales-entry-shell > form,
.sales-entry-main,
.sales-entry-side,
.sales-entry-panel,
.sales-product-picker,
.sales-total-card,
.sales-product-add-row,
.sale-info-grid { min-width: 0; }

.sales-entry-shell { width: 100%; overflow-x: clip; }
.sales-entry-shell > form {
  width: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
  gap: 20px;
}
.sales-entry-panel .inline-heading,
.sales-product-picker .inline-heading { align-items: flex-start; }
.sales-entry-panel .inline-heading > div,
.sales-product-picker .inline-heading > div { min-width: 0; }
.sales-entry-panel .inline-heading .button { flex: 0 0 auto; white-space: nowrap; }
.sale-info-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sale-info-grid .field,
.sales-product-add-row .field { min-width: 0; }
.sales-product-add-row select,
.sale-info-grid select,
.sale-info-grid input { min-width: 0; }
.sales-lines-table-wrap { max-width: 100%; }
.sales-total-card .field { margin: 0; }

/* Switch to a comfortable two-column sale form before it becomes squeezed. */
@media (max-width: 1450px) {
  .sales-entry-shell > form { grid-template-columns: minmax(0, 1fr) 300px; }
  .sale-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Move payment summary below the sale form on laptops/tablets with limited room. */
@media (max-width: 1180px) {
  .sales-entry-shell > form { grid-template-columns: 1fr; }
  .sales-entry-side { position: static; }
  .sales-total-card {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
  }
  .sales-total-card .panel-heading,
  .sales-total-card .sales-total-lines,
  .sales-total-card .sales-save-button,
  .sales-total-card > .button,
  .sales-total-card .field:last-of-type { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  /* A compact 3 x 2 Sales Hub menu; no wide Add Sale chip and no page overflow. */
  .sales-hub-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    margin: 0 0 13px;
    padding: 7px;
    gap: 6px;
    overflow: visible;
    border-radius: 16px;
  }
  .sales-hub-tabs a {
    display: flex;
    min-width: 0;
    min-height: 57px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 7px 4px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 0;
    line-height: 1.05;
    text-align: center;
    overflow: hidden;
  }
  .sales-hub-tabs a::after {
    content: attr(data-mobile-label);
    display: block;
    width: 100%;
    overflow: hidden;
    font-size: 10px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sales-hub-tabs a span { display: none; }
  .sales-hub-tabs a svg { width: 18px; height: 18px; flex: 0 0 auto; }
  .sales-hub-tabs a:not(.active) { background: #f8fafc; border-color: #edf0f5; }
  .sales-hub-tabs a.active { box-shadow: 0 7px 14px rgba(67, 56, 202, .16); }

  .sales-entry-shell > form { gap: 12px; }
  .sales-entry-main { gap: 12px; }
  .sales-entry-panel,
  .sales-product-picker,
  .sales-total-card { padding: 14px; border-radius: 16px; }
  .sales-entry-panel .panel-heading,
  .sales-product-picker .panel-heading { margin-bottom: 12px; }
  .sales-entry-panel .inline-heading,
  .sales-product-picker .inline-heading {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
  }
  .sales-entry-panel .inline-heading .button {
    width: 100%;
    min-height: 38px;
  }
  .sales-entry-panel h2 { font-size: 24px; }
  .sales-product-picker h3,
  .sales-total-card h3 { font-size: 17px; }
  .stock-note { font-size: 10px; line-height: 1.4; }

  .sale-info-grid { grid-template-columns: 1fr; gap: 11px; }
  .sales-product-add-row {
    grid-template-columns: minmax(0, 1fr) minmax(86px, .42fr);
    gap: 9px;
    margin-bottom: 13px;
  }
  .sales-product-add-row .grow { grid-column: 1 / -1; }
  .sales-product-add-row .field:nth-child(3) { grid-column: 1; }
  .sales-product-add-row .field:nth-child(2) { grid-column: 2; grid-row: 2; }
  .sales-product-add-row .sales-add-product {
    grid-column: 1 / -1;
    min-height: 42px;
    justify-content: center;
  }

  /* Selected products become readable cards instead of a very wide table. */
  .sales-lines-table-wrap { border: 0; border-radius: 0; overflow: visible; }
  .sales-lines-table { display: block; min-width: 0; }
  .sales-lines-table thead { display: none; }
  .sales-lines-table tbody { display: grid; gap: 9px; }
  .sales-lines-table tbody > tr[data-sales-line] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 12px;
    padding: 13px;
    border: 1px solid #e6eaf1;
    border-radius: 14px;
    position: relative;
    background: #fff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .035);
  }
  .sales-lines-table tbody > tr[data-sales-line] > td {
    display: grid;
    min-width: 0;
    gap: 3px;
    padding: 0;
    border: 0;
  }
  .sales-lines-table tbody > tr[data-sales-line] > td::before {
    content: attr(data-label);
    color: #8a96a3;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .sales-lines-table tbody > tr[data-sales-line] > td:first-child {
    grid-column: 1 / -1;
    padding-right: 30px;
  }
  .sales-lines-table tbody > tr[data-sales-line] > td:first-child::before { display: none; }
  .sales-lines-table tbody > tr[data-sales-line] > td:first-child strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sales-lines-table tbody > tr[data-sales-line] > td.sales-line-remove {
    display: block;
    position: absolute;
    top: 9px;
    right: 9px;
  }
  .sales-lines-table tbody > tr[data-sales-line] > td.sales-line-remove::before { display: none; }
  .sales-lines-table .line-edit-input { width: 100%; min-width: 0; }
  .sales-lines-table tbody > tr:not([data-sales-line]) { display: block; }
  .sales-lines-table tbody > tr:not([data-sales-line]) > td { display: block; padding: 0; border: 0; }
  .sales-lines-table .empty-state.compact {
    min-height: 115px;
    padding: 18px 10px;
    border: 1px dashed #dfe4eb;
    border-radius: 14px;
    background: #fbfcfd;
  }

  .sales-total-card { display: grid; grid-template-columns: 1fr; gap: 11px; }
  .sales-total-card .panel-heading,
  .sales-total-card .sales-total-lines,
  .sales-total-card .sales-save-button,
  .sales-total-card > .button,
  .sales-total-card .field:last-of-type { grid-column: auto; }
  .sales-total-lines { padding: 14px; }
}

@media (max-width: 380px) {
  .sales-hub-tabs { gap: 5px; padding: 6px; }
  .sales-hub-tabs a { min-height: 54px; padding: 6px 3px; }
  .sales-hub-tabs a::after { font-size: 9px; }
  .sales-product-add-row { grid-template-columns: 1fr; }
  .sales-product-add-row .grow,
  .sales-product-add-row .field:nth-child(2),
  .sales-product-add-row .field:nth-child(3),
  .sales-product-add-row .sales-add-product { grid-column: 1; grid-row: auto; }
}

/* ================================================================
   MauzoCore v1.3.2 - Sales Hub layout polish
   Fixes desktop control overlap and keeps the mobile sale flow compact.
   ================================================================ */
.sales-entry-panel .panel-heading.inline-heading,
.sales-product-picker .panel-heading.inline-heading {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.sales-entry-panel .panel-heading.inline-heading > div,
.sales-product-picker .panel-heading.inline-heading > div {
  flex: 1 1 auto;
  min-width: 0;
}
.sales-entry-panel .panel-heading.inline-heading .button,
.sales-product-picker .panel-heading.inline-heading .stock-note {
  flex: 0 0 auto;
}
.sales-entry-panel h2 {
  margin-bottom: 0;
  font-size: clamp(27px, 2.1vw, 34px);
}
.sales-product-add-row {
  grid-template-columns: minmax(0, 1fr) 88px 118px 112px;
  width: 100%;
}
.sales-product-add-row > * { min-width: 0; }
.sales-product-add-row .sales-add-product {
  width: 100%;
  min-width: 0;
  padding-inline: 10px;
  white-space: nowrap;
  overflow: hidden;
}
.sales-product-add-row .sales-add-product svg { flex: 0 0 auto; }
.sales-entry-side { min-width: 0; }
.sales-total-card { overflow: hidden; }
.sales-total-lines strong { white-space: nowrap; }

/* On ordinary desktop/laptop widths, give the product selector its own row.
   This prevents the Add button from entering the payment-summary column. */
@media (max-width: 1500px) {
  .sale-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sales-product-add-row {
    grid-template-columns: 92px minmax(150px, 1fr) 116px;
  }
  .sales-product-add-row .grow { grid-column: 1 / -1; }
  .sales-product-add-row .field:nth-child(2) { grid-column: 1; }
  .sales-product-add-row .field:nth-child(3) { grid-column: 2; }
  .sales-product-add-row .sales-add-product { grid-column: 3; }
}

@media (max-width: 1180px) {
  .sales-total-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sales-total-card .panel-heading,
  .sales-total-card .sales-total-lines,
  .sales-total-card .sales-save-button,
  .sales-total-card > .button,
  .sales-total-card .field:last-of-type { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .sales-hub-tabs {
    gap: 4px;
    padding: 5px;
    margin-bottom: 11px;
    border-radius: 14px;
  }
  .sales-hub-tabs a {
    min-height: 48px;
    padding: 5px 3px;
    border-radius: 10px;
  }
  .sales-hub-tabs a::after { font-size: 9px; }
  .sales-hub-tabs a svg { width: 17px; height: 17px; }

  .sales-entry-panel .panel-heading.inline-heading,
  .sales-product-picker .panel-heading.inline-heading {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 11px;
  }
  .sales-entry-panel .panel-heading.inline-heading .button {
    width: 100%;
    min-height: 35px;
    padding: 6px 10px;
  }
  .sales-entry-panel h2 {
    font-size: 22px;
  }
  .sales-entry-panel,
  .sales-product-picker,
  .sales-total-card {
    padding: 13px;
  }
  .sale-info-grid { gap: 10px; }
  .sales-entry-shell .field { gap: 5px; }
  .sales-entry-shell .field input,
  .sales-entry-shell .field select,
  .sales-entry-shell .field textarea {
    min-height: 42px;
    padding: 9px 11px;
  }

  .sales-product-add-row {
    grid-template-columns: minmax(0, 1fr) 82px;
    gap: 8px;
  }
  .sales-product-add-row .grow { grid-column: 1 / -1; }
  .sales-product-add-row .field:nth-child(3) { grid-column: 1; }
  .sales-product-add-row .field:nth-child(2) { grid-column: 2; grid-row: 2; }
  .sales-product-add-row .sales-add-product {
    grid-column: 1 / -1;
    min-height: 40px;
  }

  .sales-total-card { grid-template-columns: 1fr; }
  .sales-total-card .panel-heading,
  .sales-total-card .sales-total-lines,
  .sales-total-card .sales-save-button,
  .sales-total-card > .button,
  .sales-total-card .field:last-of-type { grid-column: auto; }
  .sales-total-lines { padding: 12px; }
  .sales-total-lines .grand-total strong { font-size: 1.25rem; }
}

@media (max-width: 380px) {
  .sales-hub-tabs a { min-height: 45px; }
  .sales-hub-tabs a::after { font-size: 8px; }
  .sales-product-add-row { grid-template-columns: 1fr; }
  .sales-product-add-row .grow,
  .sales-product-add-row .field:nth-child(2),
  .sales-product-add-row .field:nth-child(3),
  .sales-product-add-row .sales-add-product {
    grid-column: 1;
    grid-row: auto;
  }
}