:root {
  --bg: #f4f6fa;
  --panel: #ffffff;
  --panel-soft: #f8fafc;
  --line: #e6eaf0;
  --text: #172033;
  --muted: #667085;
  --primary: #14213d;
  --primary-2: #1e315c;
  --accent: #d9a514;
  --accent-soft: #fff7da;
  --success: #16a34a;
  --success-soft: #eaf8ef;
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --warning: #f59e0b;
  --warning-soft: #fff7e6;
  --info: #2563eb;
  --shadow-sm: 0 4px 16px rgba(20,33,61,.06);
  --shadow: 0 14px 34px rgba(20,33,61,.08);
  --shadow-lg: 0 24px 60px rgba(15,23,42,.16);
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 24px;
  --sidebar: 264px;
  --mobile-nav-height: 78px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
img { max-width: 100%; }
.app-icon { width: 20px; height: 20px; flex: 0 0 auto; }

.app-shell { min-height: 100dvh; display: flex; }
.mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.48);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
  z-index: 999;
}
.mobile-overlay.show { opacity: 1; visibility: visible; }

/* Desktop sidebar */
.sidebar {
  width: var(--sidebar);
  background: linear-gradient(180deg, #14213d 0%, #101b33 100%);
  color: #fff;
  padding: 16px;
  position: fixed;
  inset: 0 auto 0 0;
  overflow-y: auto;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transition: transform .24s ease;
}
.sidebar-top { display: flex; align-items: flex-start; gap: 10px; }
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 1;
  min-width: 0;
  padding: 5px 4px 17px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.11);
}
.brand-logo {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  object-fit: cover;
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.brand-copy { min-width: 0; }
.brand-title {
  font-size: 15px;
  line-height: 1.25;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-sub { margin-top: 2px; color: rgba(255,255,255,.62); font-size: 11px; }
.sidebar-close {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.08);
  color: #fff;
  border-radius: 12px;
  cursor: pointer;
}
.sidebar-close .app-icon { width: 18px; height: 18px; }
.nav-menu { display: grid; gap: 4px; }
.nav-section-label {
  padding: 15px 11px 5px;
  color: rgba(255,255,255,.43);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.nav-menu a {
  min-height: 45px;
  padding: 11px 12px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  gap: 11px;
  color: rgba(255,255,255,.76);
  font-size: 14px;
  font-weight: 600;
  transition: .18s ease;
}
.nav-menu a .app-icon { width: 19px; height: 19px; opacity: .92; }
.nav-menu a:hover { background: rgba(255,255,255,.07); color: #fff; transform: translateX(1px); }
.nav-menu a.active {
  background: rgba(217,165,20,.16);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--accent);
}
.nav-menu a.active .app-icon { color: #f2c84f; }
.sidebar-account {
  margin-top: auto;
  padding: 12px 10px 2px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.sidebar-avatar, .user-avatar, .sheet-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 800;
  text-transform: uppercase;
}
.sidebar-avatar { width: 37px; height: 37px; background: var(--accent); color: #1d2433; font-size: 14px; }
.sidebar-account-copy { display: grid; min-width: 0; flex: 1; }
.sidebar-account-copy strong { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-account-copy span { color: rgba(255,255,255,.55); font-size: 10px; }
.sidebar-logout { width: 34px; height: 34px; display: grid; place-items: center; color: rgba(255,255,255,.72); border-radius: 10px; }
.sidebar-logout:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-logout .app-icon { width: 17px; height: 17px; }

/* Main app area */
.main-wrap { flex: 1; margin-left: var(--sidebar); min-width: 0; display: flex; flex-direction: column; }
.topbar {
  min-height: 72px;
  padding: 10px 22px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(230,234,240,.85);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 12px; min-width: 0; }
.page-heading-wrap { min-width: 0; }
.topbar h1 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.page-subheading { margin-top: 1px; font-size: 11px; }
.icon-btn, .topbar-icon-btn, .profile-trigger {
  border: 0;
  background: #fff;
  cursor: pointer;
}
.icon-btn {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 13px;
  display: none;
  align-items: center;
  justify-content: center;
}
.mobile-brand { display: none; }
.live-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border-radius: 999px;
  background: #ecfdf3;
  color: #166534;
  font-size: 11px;
  font-weight: 800;
}
.live-chip span { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.12); }
.user-box { text-align: right; line-height: 1.25; }
.user-name { font-size: 12px; font-weight: 800; }
.profile-trigger { display: none; padding: 0; border-radius: 50%; background: transparent; }
.user-avatar { width: 38px; height: 38px; background: var(--primary); color: #fff; box-shadow: 0 0 0 3px #eef2f7; font-size: 13px; }
.mobile-notification { display: none; position: relative; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 13px; }
.notification-dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); right: 9px; top: 8px; border: 2px solid #fff; }

.content { padding: 20px; min-width: 0; }
.page-shell { width: 100%; max-width: 1220px; margin: 0 auto; display: grid; gap: 18px; min-width: 0; }

/* Common surfaces */
.card, .panel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.panel { padding: 18px; overflow: hidden; }
.grid { display: grid; gap: 16px; }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid > *, .kpi-row > *, .form-grid > *, .form-grid-3 > * { min-width: 0; }

.stat-card { padding: 17px; overflow: hidden; position: relative; }
.stat-label { color: var(--muted); font-size: 12px; font-weight: 700; }
.stat-value { margin: 7px 0 5px; font-size: clamp(20px, 2.1vw, 28px); font-weight: 850; letter-spacing: -.035em; }
.stat-foot { font-size: 11px; color: var(--muted); }
.success-line { border-left: 4px solid var(--success); }
.danger-line { border-left: 4px solid var(--danger); }
.warning-line { border-left: 4px solid var(--warning); }
.primary-line { border-left: 4px solid var(--info); }

.page-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 0; }
.btn {
  min-height: 42px;
  border: 0;
  border-radius: 13px;
  padding: 10px 15px;
  cursor: pointer;
  font-weight: 750;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .12s ease, box-shadow .18s ease, opacity .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn .app-icon { width: 17px; height: 17px; }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 8px 16px rgba(20,33,61,.16); }
.btn-success { background: var(--success); color: #fff; }
.btn-warning { background: var(--warning); color: #fff; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-light { background: #eef2f7; color: var(--text); }
.btn-sm { min-height: 35px; padding: 8px 11px; border-radius: 11px; font-size: 12px; }
.chip { padding: 8px 11px; border-radius: 999px; font-size: 11px; font-weight: 750; }
.chip.warn { background: var(--warning-soft); color: #9a6700; }
.small { font-size: 11px; }
.muted { color: var(--muted); }

.alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 13px;
  border: 1px solid transparent;
  font-size: 13px;
  box-shadow: var(--shadow-sm);
}
.alert-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .85; }
.alert-success { background: #ecfdf3; border-color: #d1fadf; color: #166534; }
.alert-error { background: #fef2f2; border-color: #fee2e2; color: #991b1b; }
.alert-warning { background: #fff7e6; border-color: #fde7ba; color: #9a6700; }

.table-wrap { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; min-width: 680px; }
th, td { padding: 13px 11px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .035em; background: #fbfcfd; }
td { font-size: 13px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fafbfd; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.form-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
label { color: #344054; font-weight: 750; font-size: 12px; }
input, select, textarea {
  width: 100%;
  min-height: 44px;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid #d6dce6;
  background: #fff;
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus { border-color: #8093b7; box-shadow: 0 0 0 3px rgba(20,33,61,.08); }
textarea { min-height: 96px; resize: vertical; }
.login-wrap { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.login-card { width: 100%; max-width: 430px; padding: 28px; }
.kpi-row { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.product-cards { display: none; gap: 12px; }
.product-card { padding: 15px; }
.badge { padding: 5px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; gap: 5px; }
.badge-success { background: var(--success-soft); color: #166534; }
.badge-warning { background: var(--warning-soft); color: #9a6700; }
.badge-danger { background: var(--danger-soft); color: #991b1b; }
.flex { display: flex; gap: 11px; align-items: center; flex-wrap: wrap; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.desktop-only { display: inline-flex; }
.mobile-only { display: none; }
.quick-total {
  position: sticky;
  bottom: 0;
  padding: 14px;
  border-top: 1px solid var(--line);
  background: #fff;
  margin: 18px -18px -18px;
  border-radius: 0 0 var(--radius) var(--radius);
}

/* Dashboard app experience */
.dashboard-welcome {
  position: relative;
  overflow: hidden;
  min-height: 126px;
  padding: 22px;
  border: 0;
  border-radius: var(--radius-lg);
  color: #fff;
  background:
    radial-gradient(circle at 88% 18%, rgba(217,165,20,.24), transparent 25%),
    linear-gradient(135deg, #14213d 0%, #20345f 100%);
  box-shadow: 0 20px 38px rgba(20,33,61,.18);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
}
.dashboard-welcome::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  right: -52px;
  bottom: -78px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  box-shadow: 0 0 0 26px rgba(255,255,255,.025), 0 0 0 54px rgba(255,255,255,.018);
}
.welcome-copy { position: relative; z-index: 1; min-width: 0; }
.welcome-eyebrow { color: rgba(255,255,255,.64); font-size: 11px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.welcome-copy h2 { margin: 5px 0 4px; font-size: clamp(20px, 3vw, 27px); letter-spacing: -.03em; }
.welcome-copy p { margin: 0; color: rgba(255,255,255,.70); font-size: 12px; }
.welcome-date {
  position: relative;
  z-index: 1;
  min-width: 122px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  border-radius: 16px;
  backdrop-filter: blur(6px);
}
.welcome-date strong { display: block; font-size: 13px; }
.welcome-date span { color: rgba(255,255,255,.64); font-size: 10px; }

.dashboard-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.dashboard-stat {
  padding: 16px;
  border-radius: 17px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.dashboard-stat-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dashboard-stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: #eef2f7;
  color: var(--primary);
}
.dashboard-stat-icon .app-icon { width: 18px; height: 18px; }
.dashboard-stat.success .dashboard-stat-icon { background: var(--success-soft); color: var(--success); }
.dashboard-stat.warning .dashboard-stat-icon { background: var(--warning-soft); color: #c47d00; }
.dashboard-stat.danger .dashboard-stat-icon { background: var(--danger-soft); color: var(--danger); }
.dashboard-stat.info .dashboard-stat-icon { background: #eef4ff; color: var(--info); }
.dashboard-stat-label { color: var(--muted); font-size: 11px; font-weight: 700; }
.dashboard-stat-value { margin-top: 10px; font-size: clamp(18px, 2vw, 24px); font-weight: 850; letter-spacing: -.035em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashboard-stat-meta { margin-top: 2px; color: var(--muted); font-size: 10px; }
.dashboard-section { display: grid; gap: 11px; }
.dashboard-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dashboard-section-head h3 { margin: 0; font-size: 15px; letter-spacing: -.015em; }
.dashboard-section-head a { color: var(--primary); font-size: 11px; font-weight: 800; }
.quick-actions-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.quick-action {
  padding: 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  transition: transform .15s ease, box-shadow .15s ease;
}
.quick-action:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.quick-action-icon { width: 39px; height: 39px; border-radius: 12px; background: #eef2f7; color: var(--primary); display: grid; place-items: center; }
.quick-action.primary .quick-action-icon { background: var(--primary); color: #fff; }
.quick-action.success .quick-action-icon { background: var(--success-soft); color: var(--success); }
.quick-action.warning .quick-action-icon { background: var(--warning-soft); color: #bd7600; }
.quick-action.info .quick-action-icon { background: #eef4ff; color: var(--info); }
.quick-action-copy { min-width: 0; }
.quick-action strong { display: block; font-size: 12px; }
.quick-action small { display: block; margin-top: 1px; color: var(--muted); font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashboard-columns { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); gap: 16px; }
.dashboard-panel { padding: 17px; }
.dashboard-panel-title { margin: 0; font-size: 14px; }
.month-metrics { margin-top: 13px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.month-metric { padding: 13px; border-radius: 13px; background: var(--panel-soft); border: 1px solid #edf0f4; }
.month-metric span { display: block; color: var(--muted); font-size: 10px; }
.month-metric strong { display: block; margin-top: 4px; font-size: 15px; letter-spacing: -.025em; }
.invoice-list, .top-product-list { display: grid; margin-top: 8px; }
.invoice-item, .top-product-item { display: flex; align-items: center; gap: 11px; padding: 11px 1px; border-bottom: 1px solid var(--line); }
.invoice-item:last-child, .top-product-item:last-child { border-bottom: 0; }
.invoice-avatar, .product-rank { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 11px; display: grid; place-items: center; font-weight: 850; font-size: 11px; }
.invoice-avatar { background: #eef2f7; color: var(--primary); }
.product-rank { background: var(--accent-soft); color: #9a6700; }
.invoice-main, .top-product-main { min-width: 0; flex: 1; }
.invoice-main strong, .top-product-main strong { display: block; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.invoice-main span, .top-product-main span { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; }
.invoice-due, .top-product-value { text-align: right; flex: 0 0 auto; }
.invoice-due strong, .top-product-value strong { display: block; font-size: 11px; }
.invoice-due span { color: var(--danger); font-size: 9px; font-weight: 750; }
.empty-state { padding: 24px 12px; text-align: center; color: var(--muted); font-size: 11px; }
.empty-state-icon { width: 40px; height: 40px; margin: 0 auto 8px; display: grid; place-items: center; border-radius: 13px; background: #f1f4f8; color: #98a2b3; }

/* Mobile app bottom navigation + sheet */
.mobile-bottom-nav, .mobile-sheet { display: none; }

@media (max-width: 1100px) {
  .dashboard-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .quick-actions-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 991px) {
  .sidebar { transform: translateX(-105%); }
  .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .sidebar-close { display: inline-flex; }
  .main-wrap { margin-left: 0; }
  .icon-btn { display: inline-flex; }
  .grid-4, .grid-3, .grid-2, .kpi-row, .form-grid, .form-grid-3 { grid-template-columns: 1fr; }
  .desktop-only { display: none !important; }
  body.menu-open, body.sheet-open { overflow: hidden; }
  .dashboard-columns { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  body { background: #f4f6fa; padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); }
  .sidebar, .menu-toggle { display: none !important; }
  .topbar {
    min-height: 60px;
    padding: calc(8px + env(safe-area-inset-top)) 14px 8px;
    background: rgba(255,255,255,.94);
  }
  .topbar-left { gap: 9px; }
  .mobile-brand { width: 34px; height: 34px; display: block; border-radius: 11px; overflow: hidden; background: var(--primary); }
  .mobile-brand img { width: 100%; height: 100%; object-fit: cover; }
  .topbar h1 { font-size: 15px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 58vw; }
  .page-subheading { display: none; }
  .profile-trigger { display: inline-flex; }
  .user-avatar { width: 34px; height: 34px; font-size: 12px; box-shadow: none; }
  .content { padding: 13px 12px 8px; }
  .page-shell { gap: 13px; }
  .panel, .card { border-radius: 16px; box-shadow: 0 3px 12px rgba(20,33,61,.045); }
  .panel { padding: 14px; }
  .product-cards { display: grid; }
  .table-products, .table-mobile-hide { display: none; }
  table { min-width: 520px; }
  .flex-between { align-items: flex-start; }
  .flex-between form, form.flex { width: 100%; }
  form.flex input[type="text"], form.flex input[type="search"] { min-width: 0 !important; flex: 1 1 100%; width: 100%; }
  .btn { min-height: 44px; }
  .page-actions > .btn, .page-actions > a.btn { width: 100%; }
  .mobile-only { display: block; }
  input, select, textarea { min-height: 46px; font-size: 16px; /* prevents iOS zoom */ }

  .dashboard-welcome { min-height: 112px; padding: 17px; border-radius: 19px; align-items: flex-start; }
  .welcome-copy h2 { font-size: 20px; margin-top: 4px; }
  .welcome-copy p { font-size: 10px; max-width: 210px; }
  .welcome-date { min-width: 92px; padding: 9px 10px; border-radius: 13px; }
  .welcome-date strong { font-size: 11px; }
  .welcome-date span { font-size: 8px; }
  .dashboard-stats { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
  .dashboard-stat { padding: 13px 12px; border-radius: 15px; }
  .dashboard-stat-icon { width: 31px; height: 31px; border-radius: 10px; }
  .dashboard-stat-icon .app-icon { width: 16px; height: 16px; }
  .dashboard-stat-label { font-size: 9px; }
  .dashboard-stat-value { margin-top: 8px; font-size: clamp(15px, 4.7vw, 19px); }
  .dashboard-stat-meta { font-size: 8px; }
  .dashboard-section { gap: 9px; }
  .dashboard-section-head h3 { font-size: 13px; }
  .quick-actions-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
  .quick-action { padding: 12px; border-radius: 14px; gap: 9px; }
  .quick-action-icon { width: 34px; height: 34px; border-radius: 10px; }
  .quick-action-icon .app-icon { width: 17px; height: 17px; }
  .quick-action strong { font-size: 10px; }
  .quick-action small { font-size: 8px; }
  .dashboard-columns { gap: 12px; }
  .dashboard-panel { padding: 14px; }
  .dashboard-panel-title { font-size: 12px; }
  .month-metrics { margin-top: 10px; gap: 8px; }
  .month-metric { padding: 11px; }
  .month-metric span { font-size: 8px; }
  .month-metric strong { font-size: 13px; }

  .mobile-bottom-nav {
    position: fixed;
    z-index: 900;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
    padding: 8px 8px calc(7px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(18px) saturate(150%);
    border-top: 1px solid rgba(226,232,240,.95);
    box-shadow: 0 -10px 30px rgba(15,23,42,.07);
    display: grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    align-items: end;
    gap: 2px;
  }
  .mobile-nav-item {
    position: relative;
    min-width: 0;
    height: 54px;
    padding: 5px 2px 3px;
    border: 0;
    background: transparent;
    color: #7b8493;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
  }
  .mobile-nav-item .app-icon { width: 20px; height: 20px; stroke-width: 2; }
  .mobile-nav-item.active { color: var(--primary); }
  .mobile-nav-item.active:not(.mobile-nav-primary)::before {
    content: "";
    position: absolute;
    top: -8px;
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
  }
  .mobile-nav-primary { margin-top: -21px; color: var(--primary); }
  .mobile-nav-primary-icon {
    width: 48px;
    height: 48px;
    border-radius: 17px;
    background: var(--primary);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 9px 20px rgba(20,33,61,.24), 0 0 0 5px #fff;
  }
  .mobile-nav-primary .mobile-nav-primary-icon .app-icon { width: 22px; height: 22px; }
  .mobile-nav-primary span:last-child { color: var(--primary); font-weight: 850; }
  .mobile-nav-primary.active .mobile-nav-primary-icon { background: var(--accent); color: #182034; }

  .mobile-sheet {
    display: block;
    position: fixed;
    z-index: 1100;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: min(82dvh, 680px);
    overflow-y: auto;
    padding: 7px 14px calc(16px + env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0;
    background: #fff;
    box-shadow: 0 -24px 60px rgba(15,23,42,.20);
    transform: translateY(104%);
    visibility: hidden;
    transition: transform .25s cubic-bezier(.2,.75,.25,1), visibility .25s ease;
  }
  .mobile-sheet.open { transform: translateY(0); visibility: visible; }
  .sheet-handle { width: 38px; height: 4px; margin: 2px auto 12px; border-radius: 99px; background: #d9dee7; }
  .sheet-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 2px 1px 12px; border-bottom: 1px solid var(--line); }
  .sheet-account { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .sheet-avatar { width: 40px; height: 40px; background: var(--primary); color: #fff; font-size: 13px; }
  .sheet-account div { min-width: 0; display: grid; }
  .sheet-account strong { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sheet-account span { color: var(--muted); font-size: 9px; }
  .sheet-close { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 11px; background: #f1f4f8; cursor: pointer; }
  .sheet-close .app-icon { width: 17px; height: 17px; }
  .sheet-menu { display: grid; padding: 7px 0; }
  .sheet-menu > a {
    min-height: 55px;
    display: grid;
    grid-template-columns: 37px minmax(0,1fr) 18px;
    align-items: center;
    gap: 10px;
    padding: 7px 3px;
    border-bottom: 1px solid #f0f2f5;
  }
  .sheet-menu > a > .app-icon:first-child { width: 37px; height: 37px; padding: 9px; border-radius: 11px; background: #f2f5f8; color: var(--primary); }
  .sheet-menu > a span { min-width: 0; display: grid; }
  .sheet-menu > a strong { font-size: 11px; }
  .sheet-menu > a small { margin-top: 1px; color: var(--muted); font-size: 8px; }
  .sheet-chevron { width: 15px !important; height: 15px !important; color: #a7afbb; padding: 0 !important; background: transparent !important; }
  .sheet-logout {
    margin-top: 6px;
    min-height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 13px;
    background: var(--danger-soft);
    color: #b42318;
    font-size: 11px;
    font-weight: 800;
  }
  .sheet-logout .app-icon { width: 17px; height: 17px; }
}

@media (max-width: 390px) {
  .dashboard-welcome { padding: 15px; }
  .welcome-date { display: none; }
  .topbar h1 { max-width: 54vw; }
  .mobile-nav-item { font-size: 8px; }
  .dashboard-stat-value { font-size: 15px; }
}

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

/* =========================================================
   Phase 2 - Mobile-first POS workspace
   ========================================================= */
body[data-page="sales"] .page-shell { max-width: 1500px; }
body[data-page="sales"] .content { background: #f3f5f8; }

.pos-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(350px, .72fr);
  gap: 18px;
  align-items: start;
}
.pos-catalog,
.pos-cart-card,
.pos-checkout-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
}
.pos-catalog { padding: 20px; min-width: 0; }
.pos-side { display: grid; gap: 14px; position: sticky; top: 88px; }
.pos-cart-card,
.pos-checkout-card { padding: 18px; }
.pos-eyebrow {
  display: block;
  color: #8a94a4;
  font-size: 9px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .14em;
}
.pos-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.pos-hero h2,
.pos-section-head h2 { margin: 5px 0 0; font-size: 19px; line-height: 1.15; }
.pos-hero p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.pos-cart-summary {
  min-width: 210px;
  display: grid;
  grid-template-columns: 42px 1fr 16px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #dde3eb;
  border-radius: 15px;
  background: #f8fafc;
}
.pos-cart-summary > .app-icon { width: 15px; color: #98a2b3; }
.pos-cart-summary > span:nth-child(2) { min-width: 0; display: grid; }
.pos-cart-summary small { color: var(--muted); font-size: 9px; }
.pos-cart-summary strong { margin-top: 1px; font-size: 12px; }
.pos-cart-icon {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
}
.pos-cart-icon .app-icon { width: 19px; }
.pos-cart-icon b {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 99px;
  background: var(--accent);
  color: #172033;
  font-size: 8px;
}
.pos-search-wrap {
  position: relative;
  height: 48px;
  display: flex;
  align-items: center;
  border: 1.5px solid #dce2ea;
  border-radius: 14px;
  background: #fbfcfe;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.pos-search-wrap:focus-within { border-color: #9aa9c0; box-shadow: 0 0 0 4px rgba(20,33,61,.06); }
.pos-search-wrap > .app-icon { position: absolute; left: 14px; width: 18px; color: #7f8998; }
.pos-search-wrap input {
  width: 100%;
  height: 100%;
  padding: 0 42px 0 42px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 12px;
}
.pos-search-clear {
  position: absolute;
  right: 8px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 10px;
  display: none;
  place-items: center;
  background: #edf1f5;
  cursor: pointer;
}
.pos-search-clear.show { display: grid; }
.pos-search-clear .app-icon { width: 14px; }
.pos-product-meta {
  min-height: 34px;
  padding: 10px 1px 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 9px;
}
.pos-product-meta strong { color: var(--primary); }
.pos-products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}
.pos-product-card {
  min-width: 0;
  min-height: 158px;
  padding: 13px;
  border: 1px solid #e4e8ef;
  border-radius: 16px;
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.pos-product-card:hover { transform: translateY(-1px); border-color: #ccd4df; box-shadow: 0 8px 20px rgba(20,33,61,.07); }
.pos-product-card.is-out { opacity: .62; background: #fafbfc; }
.pos-product-top,
.pos-product-bottom,
.pos-cart-item-head,
.pos-section-head,
.pos-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pos-product-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #edf1f6;
  color: var(--primary);
  font-weight: 900;
  font-size: 12px;
}
.pos-stock {
  padding: 4px 7px;
  border-radius: 99px;
  background: var(--success-soft);
  color: #16733b;
  font-size: 8px;
  font-weight: 800;
  white-space: nowrap;
}
.pos-stock.low { background: var(--warning-soft); color: #a65c00; }
.pos-stock.out { background: #f0f2f5; color: #7c8797; }
.pos-product-copy { margin-top: 12px; min-width: 0; flex: 1; }
.pos-product-copy h3 {
  margin: 0;
  font-size: 11px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pos-product-copy p { margin: 4px 0 0; color: var(--muted); font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos-product-bottom { margin-top: 12px; }
.pos-product-bottom > strong { font-size: 11px; }
.pos-add-btn {
  height: 31px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  font-size: 9px;
  font-weight: 850;
  cursor: pointer;
}
.pos-add-btn .app-icon { width: 13px; }
.pos-add-btn:disabled { background: #d9dee6; color: #8a94a3; cursor: not-allowed; }
.pos-no-results {
  grid-column: 1 / -1;
  min-height: 230px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  text-align: center;
  color: var(--muted);
}
.pos-no-results > div,
.pos-empty-cart > div {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: #f0f3f7;
  color: #8390a1;
}
.pos-no-results strong { color: var(--text); font-size: 12px; margin-top: 4px; }
.pos-no-results span { font-size: 9px; }

.pos-section-head { align-items: flex-start; }
.pos-section-head h2 span { color: var(--muted); font-size: 10px; font-weight: 700; }
.pos-text-danger,
.pos-icon-danger {
  border: 0;
  background: transparent;
  color: #c52a2a;
  cursor: pointer;
}
.pos-text-danger { display: flex; align-items: center; gap: 4px; padding: 4px; font-size: 9px; font-weight: 800; }
.pos-text-danger .app-icon { width: 13px; }
.pos-icon-danger {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--danger-soft);
}
.pos-icon-danger .app-icon { width: 14px; }
.pos-cart-items { display: grid; gap: 10px; margin-top: 13px; }
.pos-cart-item { padding: 12px; border: 1px solid #e4e8ef; border-radius: 14px; background: #fbfcfd; }
.pos-cart-item-head { align-items: flex-start; }
.pos-cart-item-head > div:first-child { min-width: 0; display: grid; gap: 2px; }
.pos-cart-item-head strong { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos-cart-item-head span { color: var(--muted); font-size: 9px; }
.pos-line-editor {
  margin-top: 9px;
  display: grid;
  grid-template-columns: 98px minmax(105px,1fr) auto;
  gap: 7px;
  align-items: end;
}
.pos-stepper {
  height: 36px;
  display: grid;
  grid-template-columns: 31px 1fr 31px;
  border: 1px solid #dce2e9;
  border-radius: 11px;
  overflow: hidden;
  background: #fff;
}
.pos-stepper button { border: 0; background: #f2f5f8; display: grid; place-items: center; cursor: pointer; }
.pos-stepper button .app-icon { width: 12px; }
.pos-stepper input { width: 100%; min-width: 0; border: 0; outline: 0; text-align: center; background: #fff; font-size: 10px; font-weight: 800; -moz-appearance: textfield; }
.pos-stepper input::-webkit-outer-spin-button,
.pos-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pos-price-input { min-width: 0; display: grid; gap: 3px; }
.pos-price-input span { color: var(--muted); font-size: 7px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.pos-price-input input { width: 100%; height: 36px; min-width: 0; padding: 0 8px; border: 1px solid #dce2e9; border-radius: 11px; outline: 0; background: #fff; font-size: 9px; font-weight: 750; }
.pos-update-btn {
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 11px;
  background: #e8edf4;
  color: var(--primary);
  font-size: 8px;
  font-weight: 850;
  cursor: pointer;
}
.pos-empty-cart { min-height: 170px; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; gap: 4px; }
.pos-empty-cart strong { margin-top: 5px; font-size: 11px; }
.pos-empty-cart span { color: var(--muted); font-size: 9px; }
.pos-empty-cart a { margin-top: 6px; color: var(--primary); font-size: 9px; font-weight: 850; text-decoration: underline; text-underline-offset: 3px; }
.pos-cart-total {
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px dashed #d5dbe4;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}
.pos-cart-total > span { display: grid; gap: 1px; }
.pos-cart-total small { color: var(--muted); font-size: 8px; }
.pos-cart-total b { font-size: 10px; }
.pos-cart-total > strong { font-size: 18px; }

.pos-secure-badge { padding: 5px 8px; border-radius: 99px; background: var(--success-soft); color: #18753d; font-size: 8px; font-weight: 850; }
.pos-checkout-card form { margin-top: 14px; display: grid; gap: 11px; }
.pos-field { display: grid; gap: 5px; }
.pos-field > label,
.pos-label-row > label { color: #4d5969; font-size: 8px; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.pos-field select,
.pos-field > input,
.pos-new-customer-fields input {
  width: 100%;
  height: 42px;
  padding: 0 11px;
  border: 1px solid #dce2e9;
  border-radius: 12px;
  outline: 0;
  background: #fff;
  color: var(--text);
  font-size: 10px;
}
.pos-field select:focus,
.pos-field > input:focus,
.pos-new-customer-fields input:focus,
.pos-price-input input:focus { border-color: #9aa9c0; box-shadow: 0 0 0 3px rgba(20,33,61,.05); }
.pos-label-row button { border: 0; background: transparent; color: var(--info); padding: 0; font-size: 8px; font-weight: 850; cursor: pointer; }
.pos-new-customer { border: 1px solid #e4e8ef; border-radius: 12px; background: #fafbfd; }
.pos-new-customer summary { min-height: 40px; padding: 0 11px; display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-size: 9px; font-weight: 800; }
.pos-new-customer summary::-webkit-details-marker { display: none; }
.pos-new-customer summary .app-icon { width: 13px; }
.pos-new-customer summary span { margin-left: auto; color: var(--muted); font-size: 8px; font-weight: 650; }
.pos-new-customer-fields { padding: 0 10px 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pos-new-customer-fields .pos-field { min-width: 0; }
.pos-payment-methods { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 5px; }
.pos-payment-methods label { min-width: 0; cursor: pointer; }
.pos-payment-methods input { position: absolute; opacity: 0; pointer-events: none; }
.pos-payment-methods span {
  height: 36px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dce2e9;
  border-radius: 11px;
  background: #fff;
  color: #5c6775;
  font-size: 8px;
  font-weight: 800;
  text-align: center;
}
.pos-payment-methods input:checked + span { border-color: var(--primary); background: var(--primary); color: #fff; }
.pos-payment-summary { padding: 11px 12px; border-radius: 13px; background: #f6f8fb; display: grid; gap: 6px; }
.pos-payment-summary > div { display: flex; justify-content: space-between; gap: 10px; font-size: 9px; }
.pos-payment-summary span { color: var(--muted); }
.pos-payment-summary strong { font-size: 9px; }
.pos-payment-summary .pos-due-row { padding-top: 7px; border-top: 1px solid #e1e6ed; }
.pos-payment-summary .pos-due-row strong { color: #b42318; }
.pos-complete-btn {
  min-height: 50px;
  padding: 0 14px;
  border: 0;
  border-radius: 14px;
  background: var(--success);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 8px 20px rgba(22,163,74,.17);
  cursor: pointer;
}
.pos-complete-btn > span { display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 850; }
.pos-complete-btn .app-icon { width: 17px; }
.pos-complete-btn > strong { font-size: 11px; }
.pos-complete-btn:disabled { background: #bdc5d0; box-shadow: none; cursor: not-allowed; }
.pos-checkout-note { margin: -3px 0 0; text-align: center; color: var(--muted); font-size: 7px; }

.pos-history { margin-top: 18px; padding: 18px; }
.pos-history .pos-section-head { margin-bottom: 10px; }
.pos-history-list { display: grid; }
.pos-history-row {
  min-height: 58px;
  padding: 8px 4px;
  display: grid;
  grid-template-columns: 37px minmax(0,1fr) auto 14px;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid #edf0f4;
}
.pos-history-row:last-child { border-bottom: 0; }
.pos-history-icon { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 11px; background: #f0f3f7; color: var(--primary); }
.pos-history-icon .app-icon { width: 17px; }
.pos-history-main { min-width: 0; display: grid; }
.pos-history-main strong { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos-history-main span { margin-top: 2px; color: var(--muted); font-size: 8px; }
.pos-history-amount { display: grid; justify-items: end; gap: 2px; }
.pos-history-amount strong { font-size: 10px; }
.pos-history-amount span { font-size: 7px; font-weight: 850; }
.pos-history-amount span.paid { color: #16813d; }
.pos-history-amount span.invoice { color: #b76b00; }
.pos-history-row > .app-icon { width: 13px; color: #a3abb7; }
.pos-history-empty { padding: 35px 10px; text-align: center; color: var(--muted); font-size: 10px; }
.pos-mobile-cart-dock { display: none; }

@media (max-width: 1180px) {
  .pos-workspace { grid-template-columns: minmax(0,1.2fr) minmax(330px,.8fr); }
  .pos-products { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 900px) and (min-width: 769px) {
  .pos-workspace { grid-template-columns: 1fr; }
  .pos-side { position: static; grid-template-columns: 1fr 1fr; }
  .pos-products { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 768px) {
  body[data-page="sales"] .content { padding-left: 10px; padding-right: 10px; }
  body[data-page="sales"] .page-shell { padding-bottom: 94px; }
  .pos-workspace { display: block; }
  .pos-catalog,
  .pos-cart-card,
  .pos-checkout-card { border-radius: 17px; }
  .pos-catalog { padding: 13px; }
  .pos-side { position: static; margin-top: 12px; display: grid; gap: 12px; }
  .pos-cart-card,
  .pos-checkout-card { padding: 14px; }
  .pos-hero { margin-bottom: 13px; align-items: flex-start; }
  .pos-hero h2 { font-size: 16px; }
  .pos-hero p { max-width: 210px; font-size: 9px; }
  .pos-cart-summary { display: none; }
  .pos-search-wrap { height: 45px; border-radius: 13px; position: sticky; top: 64px; z-index: 8; box-shadow: 0 5px 15px rgba(20,33,61,.04); }
  .pos-search-wrap input { font-size: 11px; }
  .pos-product-meta { min-height: 31px; font-size: 8px; }
  .pos-product-meta .muted { display: none; }
  .pos-products { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .pos-product-card { min-height: 146px; padding: 10px; border-radius: 14px; }
  .pos-product-card:hover { transform: none; box-shadow: none; }
  .pos-product-avatar { width: 31px; height: 31px; border-radius: 10px; font-size: 10px; }
  .pos-stock { max-width: 77px; overflow: hidden; text-overflow: ellipsis; font-size: 7px; }
  .pos-product-copy { margin-top: 10px; }
  .pos-product-copy h3 { font-size: 10px; }
  .pos-product-copy p { font-size: 7px; }
  .pos-product-bottom { margin-top: 9px; }
  .pos-product-bottom > strong { font-size: 9px; }
  .pos-add-btn { width: 31px; height: 31px; padding: 0; justify-content: center; border-radius: 10px; }
  .pos-add-btn span { display: none; }
  .pos-add-btn .app-icon { width: 15px; }

  .pos-section-head h2 { font-size: 15px; }
  .pos-cart-items { gap: 8px; }
  .pos-cart-item { padding: 10px; border-radius: 13px; }
  .pos-line-editor { grid-template-columns: 96px minmax(92px,1fr) auto; }
  .pos-cart-total > strong { font-size: 16px; }
  .pos-payment-methods { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
  .pos-payment-methods span { height: 39px; font-size: 9px; }
  .pos-new-customer-fields { grid-template-columns: 1fr; }
  .pos-complete-btn { min-height: 52px; }
  .pos-history { margin-top: 12px; padding: 14px; }
  .pos-history-row { grid-template-columns: 34px minmax(0,1fr) auto 12px; gap: 8px; padding: 8px 0; }
  .pos-history-icon { width: 34px; height: 34px; }
  .pos-history-main span { max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pos-history-amount strong { font-size: 9px; }

  .pos-mobile-cart-dock {
    position: fixed;
    z-index: 850;
    left: 12px;
    right: 12px;
    bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 8px);
    min-height: 51px;
    padding: 7px 12px 7px 8px;
    display: grid;
    grid-template-columns: 37px minmax(0,1fr) 15px;
    align-items: center;
    gap: 9px;
    border-radius: 16px;
    background: var(--primary);
    color: #fff;
    box-shadow: 0 13px 32px rgba(15,23,42,.25);
  }
  .pos-mobile-cart-count { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 12px; background: var(--accent); color: #172033; font-size: 10px; font-weight: 900; }
  .pos-mobile-cart-dock > span:nth-child(2) { min-width: 0; display: grid; }
  .pos-mobile-cart-dock small { color: rgba(255,255,255,.68); font-size: 8px; }
  .pos-mobile-cart-dock strong { margin-top: 1px; font-size: 11px; }
  .pos-mobile-cart-dock > .app-icon { width: 14px; }
}

@media (max-width: 370px) {
  .pos-product-card { min-height: 142px; }
  .pos-product-bottom > strong { font-size: 8px; }
  .pos-line-editor { grid-template-columns: 92px minmax(84px,1fr); }
  .pos-update-btn { grid-column: 1 / -1; }
}

/* =========================================================
   Phase 3B - POS mobile polish / compact app layout
   ========================================================= */
@media (max-width: 768px) {
  body[data-page="sales"] { overflow-x: clip; }
  body[data-page="sales"] .content {
    width: 100%;
    padding: 10px 10px 8px;
    background: #f4f6fa;
  }
  body[data-page="sales"] .page-shell,
  body[data-page="sales"] .pos-workspace,
  body[data-page="sales"] .pos-catalog,
  body[data-page="sales"] .pos-side,
  body[data-page="sales"] .pos-cart-card,
  body[data-page="sales"] .pos-checkout-card,
  body[data-page="sales"] .pos-history {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  /* The app bar already says New Sale; don't repeat a web-style hero. */
  body[data-page="sales"] .pos-catalog {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  body[data-page="sales"] .pos-hero { display: none; }

  body[data-page="sales"] .pos-search-wrap {
    top: calc(60px + env(safe-area-inset-top));
    height: 48px;
    margin: 0;
    border-radius: 15px;
    border-color: #e1e6ed;
    background: rgba(255,255,255,.98);
    box-shadow: 0 4px 15px rgba(20,33,61,.055);
  }
  body[data-page="sales"] .pos-search-wrap input {
    padding-left: 43px;
    font-size: 16px;
  }
  body[data-page="sales"] .pos-product-meta {
    min-height: 28px;
    padding: 7px 3px 5px;
    font-size: 9px;
  }

  body[data-page="sales"] .pos-products {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px;
  }
  body[data-page="sales"] .pos-product-card {
    min-height: 132px;
    padding: 10px;
    border-radius: 15px;
    box-shadow: 0 2px 8px rgba(20,33,61,.035);
  }
  body[data-page="sales"] .pos-product-copy { margin-top: 8px; }
  body[data-page="sales"] .pos-product-bottom { margin-top: 8px; }

  /* Empty product/search state should not consume half of the screen. */
  body[data-page="sales"] .pos-no-results {
    min-height: 116px;
    padding: 15px 12px;
    border: 1px dashed #d9e0e9;
    border-radius: 16px;
    background: rgba(255,255,255,.72);
  }
  body[data-page="sales"] .pos-no-results > div {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }
  body[data-page="sales"] .pos-no-results > div .app-icon { width: 17px; }
  body[data-page="sales"] .pos-no-results strong { margin-top: 2px; font-size: 11px; }
  body[data-page="sales"] .pos-no-results span { font-size: 8px; }

  body[data-page="sales"] .pos-side {
    margin-top: 10px;
    gap: 10px;
  }
  body[data-page="sales"] .pos-cart-card,
  body[data-page="sales"] .pos-checkout-card,
  body[data-page="sales"] .pos-history {
    padding: 13px;
    border-radius: 18px;
    border-color: #e7ebf0;
    box-shadow: 0 4px 14px rgba(20,33,61,.045);
  }
  body[data-page="sales"] .pos-section-head h2 { font-size: 14px; }
  body[data-page="sales"] .pos-eyebrow { font-size: 7px; }

  body[data-page="sales"] .pos-cart-items { margin-top: 10px; gap: 7px; }
  body[data-page="sales"] .pos-cart-item {
    padding: 10px;
    background: #fff;
    border-radius: 14px;
  }
  body[data-page="sales"] .pos-line-editor {
    margin-top: 8px;
    gap: 7px;
    grid-template-columns: 94px minmax(0,1fr) auto;
  }
  body[data-page="sales"] .pos-stepper,
  body[data-page="sales"] .pos-price-input input,
  body[data-page="sales"] .pos-update-btn { height: 38px; }

  body[data-page="sales"] .pos-cart-total {
    margin-top: 10px;
    padding-top: 10px;
  }
  body[data-page="sales"] .pos-cart-total > strong { font-size: 17px; letter-spacing: -.02em; }

  body[data-page="sales"] .pos-checkout-card form {
    margin-top: 11px;
    gap: 9px;
  }
  body[data-page="sales"] .pos-field select,
  body[data-page="sales"] .pos-field > input,
  body[data-page="sales"] .pos-new-customer-fields input {
    height: 46px;
    border-radius: 13px;
    font-size: 16px;
  }
  body[data-page="sales"] .pos-new-customer summary { min-height: 42px; }
  body[data-page="sales"] .pos-payment-methods { gap: 6px; }
  body[data-page="sales"] .pos-payment-methods span {
    height: 42px;
    border-radius: 12px;
    font-size: 9px;
  }
  body[data-page="sales"] .pos-payment-summary {
    padding: 10px 11px;
    border-radius: 14px;
  }
  body[data-page="sales"] .pos-complete-btn {
    min-height: 54px;
    border-radius: 15px;
  }

  body[data-page="sales"] .pos-history {
    margin-top: 10px;
    margin-bottom: 8px;
  }

  /* Mini cart is a shortcut only while the cart itself is off-screen. */
  body[data-page="sales"] .pos-mobile-cart-dock {
    left: 10px;
    right: 10px;
    min-height: 48px;
    border-radius: 15px;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  }
  body[data-page="sales"].pos-cart-in-view .pos-mobile-cart-dock {
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    pointer-events: none;
  }
}

@media (max-width: 370px) {
  body[data-page="sales"] .pos-line-editor {
    grid-template-columns: 90px minmax(0,1fr);
  }
  body[data-page="sales"] .pos-update-btn { grid-column: 1 / -1; }
}

/* Phase 4: bilingual language switch */
.language-switch{display:inline-flex;align-items:center;gap:3px;padding:3px;background:#eef2f6;border:1px solid #dde3eb;border-radius:10px}
.language-switch a{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 9px;border-radius:7px;color:#5b6574;text-decoration:none;font-size:11px;font-weight:800;line-height:1;white-space:nowrap}
.language-switch a.active{background:#14213d;color:#fff;box-shadow:0 2px 8px rgba(20,33,61,.16)}
.sheet-language{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-top:1px solid #eef1f5}
.sheet-language>span{display:flex;align-items:center;gap:8px;font-size:11px;color:#253147}
.sheet-language>span .app-icon{width:17px;height:17px}
.login-language{display:flex;justify-content:center;margin-bottom:14px}
.login-language .language-switch a{min-height:30px;padding:0 12px}
@media(max-width:768px){.topbar-right>.language-switch{display:none!important}.sheet-language .language-switch{padding:2px}.sheet-language .language-switch a{min-height:27px;font-size:10px}}

/* =========================================================
   Phase 5 - Products, Stock & Customers mobile app experience
   ========================================================= */
body[data-page="products"] .page-shell,
body[data-page="customers"] .page-shell,
body[data-page="stock"] .page-shell { max-width: 1320px; }

.inventory-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}
.inventory-stat {
  min-width: 0;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}
.inventory-stat-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #eef2f7;
  color: var(--primary);
}
.inventory-stat-icon.success { background: var(--success-soft); color: var(--success); }
.inventory-stat-icon.warning { background: var(--warning-soft); color: #b96d00; }
.inventory-stat-icon.danger { background: var(--danger-soft); color: var(--danger); }
.inventory-stat-icon .app-icon { width: 18px; height: 18px; }
.inventory-stat div { min-width: 0; }
.inventory-stat small { display: block; color: var(--muted); font-size: 9px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inventory-stat strong { display: block; margin-top: 3px; font-size: 17px; letter-spacing: -.025em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.inventory-editor { padding: 0; overflow: hidden; }
.inventory-editor > summary {
  min-height: 72px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 40px minmax(0,1fr) 28px;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.inventory-editor > summary::-webkit-details-marker { display: none; }
.inventory-editor-summary-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--accent-soft);
  color: #8a6500;
}
.inventory-editor-summary-icon .app-icon { width: 18px; height: 18px; }
.inventory-editor > summary > span:nth-child(2) { min-width: 0; display: grid; }
.inventory-editor > summary strong { font-size: 13px; }
.inventory-editor > summary small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.inventory-editor-chevron { display: grid; place-items: center; color: #9aa3b1; transition: transform .18s ease; }
.inventory-editor-chevron .app-icon { width: 17px; }
.inventory-editor[open] .inventory-editor-chevron { transform: rotate(90deg); }
.inventory-editor-form { padding: 17px; border-top: 1px solid var(--line); background: #fbfcfe; }
.inventory-field-wide { grid-column: 1 / -1; }
.inventory-form-actions { display: flex; gap: 9px; flex-wrap: wrap; }

.inventory-list { padding: 17px; }
.inventory-list-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.inventory-list-head > div { min-width: 0; }
.inventory-eyebrow { color: #8a94a4; font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.inventory-list-head h2 { margin: 4px 0 0; font-size: 16px; letter-spacing: -.018em; }
.inventory-list-head p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.inventory-toolbar { margin: 14px 0 10px; display: flex; align-items: center; gap: 10px; }
.inventory-search {
  min-width: 0;
  flex: 1;
  height: 44px;
  padding: 0 8px 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #dce2ea;
  border-radius: 13px;
  background: #fbfcfe;
}
.inventory-search:focus-within { border-color: #9aa9c0; box-shadow: 0 0 0 4px rgba(20,33,61,.05); }
.inventory-search > .app-icon { width: 17px; color: #7f8998; }
.inventory-search input { min-height: 0; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none !important; font-size: 12px; }
.inventory-search-clear { width: 30px; height: 30px; display: none; place-items: center; border: 0; border-radius: 9px; background: #edf1f5; cursor: pointer; }
.inventory-search-clear.show { display: grid; }
.inventory-search-clear .app-icon { width: 13px; }
.inventory-result-count { flex: 0 0 auto; min-width: 76px; height: 44px; padding: 0 12px; display: flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.inventory-result-count strong { font-size: 12px; }
.inventory-result-count span { color: var(--muted); font-size: 9px; }
.inventory-stock-pill { display: inline-flex; padding: 5px 8px; border-radius: 999px; font-size: 9px; font-weight: 800; white-space: nowrap; }
.inventory-stock-pill.success { background: var(--success-soft); color: #16733b; }
.inventory-stock-pill.warning { background: var(--warning-soft); color: #9f5b00; }
.inventory-stock-pill.danger { background: var(--danger-soft); color: #b42318; }
.inventory-mobile-cards { display: none; }
.inventory-filter-empty { min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; color: var(--muted); }
.inventory-filter-empty[hidden] { display: none !important; }
.inventory-filter-empty > span { width: 44px; height: 44px; margin-bottom: 3px; display: grid; place-items: center; border-radius: 14px; background: #f0f3f7; color: #8995a5; }
.inventory-filter-empty > span .app-icon { width: 19px; }
.inventory-filter-empty strong { color: var(--text); font-size: 11px; }
.inventory-filter-empty small { font-size: 9px; }
.text-danger { color: var(--danger); }

.stock-app-grid { display: grid; grid-template-columns: minmax(300px,.74fr) minmax(0,1.26fr); gap: 16px; align-items: start; }
.stock-receive-card, .stock-movement-card { padding: 17px; }
.stock-receive-card { position: sticky; top: 88px; }
.stock-receive-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--success-soft); color: var(--success); }
.stock-receive-icon .app-icon { width: 18px; }
.stock-receive-form { margin-top: 16px; }
.stock-current-preview { margin: -2px 0 12px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid #e6eaf0; border-radius: 12px; background: #f8fafc; }
.stock-current-preview span { color: var(--muted); font-size: 9px; font-weight: 750; }
.stock-current-preview strong { font-size: 11px; }
.stock-quantity-input { display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; border: 1px solid #d6dce6; border-radius: 13px; overflow: hidden; background: #fff; }
.stock-quantity-input button { border: 0; background: #f4f6f9; cursor: pointer; display: grid; place-items: center; }
.stock-quantity-input button .app-icon { width: 15px; }
.stock-quantity-input input { min-height: 46px; border: 0; border-radius: 0; text-align: center; box-shadow: none !important; font-weight: 800; }
.stock-save-button { width: 100%; margin-top: 3px; }
.stock-movement-list { display: none; }
.stock-movement-item { padding: 11px 1px; display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.stock-movement-item:last-child { border-bottom: 0; }
.stock-movement-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--success-soft); color: var(--success); }
.stock-movement-icon .app-icon { width: 16px; }
.stock-movement-item div { min-width: 0; display: grid; }
.stock-movement-item strong { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stock-movement-item small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.stock-movement-item b { color: var(--success); font-size: 11px; }

@media (max-width: 900px) {
  .inventory-overview { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stock-app-grid { grid-template-columns: 1fr; }
  .stock-receive-card { position: static; }
}

@media (max-width: 768px) {
  body[data-page="products"] .content,
  body[data-page="customers"] .content,
  body[data-page="stock"] .content { padding: 10px 9px calc(var(--mobile-nav-height) + 22px); }

  .inventory-overview { gap: 8px; }
  .inventory-stat { padding: 10px; gap: 8px; border-radius: 14px; }
  .inventory-stat-icon { width: 32px; height: 32px; border-radius: 10px; }
  .inventory-stat-icon .app-icon { width: 15px; height: 15px; }
  .inventory-stat small { font-size: 8px; }
  .inventory-stat strong { margin-top: 1px; font-size: 14px; }
  .customer-overview .inventory-stat:last-child strong { font-size: 11px; }

  .inventory-editor { border-radius: 15px; }
  .inventory-editor > summary { min-height: 60px; padding: 10px 12px; grid-template-columns: 34px minmax(0,1fr) 22px; gap: 9px; }
  .inventory-editor-summary-icon { width: 34px; height: 34px; border-radius: 10px; }
  .inventory-editor-summary-icon .app-icon { width: 15px; }
  .inventory-editor > summary strong { font-size: 11px; }
  .inventory-editor > summary small { font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .inventory-editor-form { padding: 12px; }
  .inventory-editor-form .form-grid { grid-template-columns: 1fr; gap: 0; }
  .inventory-field-wide { grid-column: auto; }
  .inventory-form-actions { display: grid; grid-template-columns: 1fr; }

  .inventory-list { padding: 12px; border-radius: 16px; }
  .inventory-list-head h2 { font-size: 13px; }
  .inventory-list-head p { font-size: 8px; }
  .inventory-toolbar { margin: 11px 0 8px; gap: 7px; }
  .inventory-search { height: 42px; border-radius: 12px; }
  .inventory-search input { font-size: 16px; }
  .inventory-result-count { min-width: 63px; height: 42px; padding: 0 8px; border-radius: 12px; flex-direction: column; gap: 0; }
  .inventory-result-count strong { font-size: 11px; line-height: 1; }
  .inventory-result-count span { margin-top: 2px; font-size: 7px; }
  .inventory-desktop-table { display: none; }
  .inventory-mobile-cards { display: grid; gap: 8px; }

  .inventory-product-card,
  .customer-account-card { padding: 11px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 3px 12px rgba(20,33,61,.04); }
  .inventory-product-main,
  .customer-card-head { display: grid; grid-template-columns: 38px minmax(0,1fr) 34px; align-items: center; gap: 9px; }
  .inventory-product-avatar,
  .customer-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #edf1f6; color: var(--primary); font-size: 12px; font-weight: 900; }
  .customer-avatar { border-radius: 50%; background: var(--primary); color: #fff; }
  .inventory-product-copy,
  .customer-card-copy { min-width: 0; }
  .inventory-product-copy h3,
  .customer-card-copy h3 { margin: 0 0 4px; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .customer-card-copy span { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .customer-card-copy span .app-icon { width: 11px; height: 11px; }
  .inventory-icon-action { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #f1f4f8; color: var(--primary); }
  .inventory-icon-action.primary { background: var(--primary); color: #fff; }
  .inventory-icon-action .app-icon { width: 14px; }
  .inventory-product-prices { margin-top: 9px; padding: 9px 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-radius: 11px; background: #f8fafc; }
  .inventory-product-prices div + div { border-left: 1px solid #e4e8ef; padding-left: 10px; }
  .inventory-product-prices small { display: block; color: var(--muted); font-size: 7px; }
  .inventory-product-prices strong { display: block; margin-top: 2px; font-size: 9px; }
  .inventory-product-footer { margin-top: 9px; padding-top: 8px; border-top: 1px solid #edf0f3; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .inventory-product-footer > span { min-width: 0; display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 7px; }
  .inventory-product-footer > span .app-icon { width: 12px; flex: 0 0 auto; }
  .inventory-delete-link { padding: 0; border: 0; background: transparent; color: var(--danger); display: inline-flex; align-items: center; gap: 4px; font-size: 8px; font-weight: 750; cursor: pointer; }
  .inventory-delete-link .app-icon { width: 12px; }

  .customer-balance-grid { margin-top: 9px; display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; }
  .customer-balance-grid div { padding: 8px 9px; border-radius: 10px; background: #f8fafc; border: 1px solid #eef1f4; min-width: 0; }
  .customer-balance-grid div.has-due { background: var(--danger-soft); border-color: #fee2e2; }
  .customer-balance-grid small { display: block; color: var(--muted); font-size: 7px; }
  .customer-balance-grid strong { display: block; margin-top: 2px; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .customer-balance-grid .has-due strong { color: var(--danger); }
  .customer-card-actions { margin-top: 9px; padding-top: 8px; border-top: 1px solid #edf0f3; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; }
  .customer-card-actions a,
  .customer-card-actions button { width: 100%; min-height: 31px; padding: 0 5px; display: flex; align-items: center; justify-content: center; gap: 4px; border: 0; border-radius: 9px; background: #f1f4f8; color: var(--primary); font-size: 7px; font-weight: 800; cursor: pointer; }
  .customer-card-actions button { color: var(--danger); background: var(--danger-soft); }
  .customer-card-actions .app-icon { width: 12px; }

  .stock-app-grid { gap: 10px; }
  .stock-receive-card, .stock-movement-card { padding: 12px; border-radius: 16px; }
  .stock-receive-icon { width: 34px; height: 34px; }
  .stock-receive-form { margin-top: 12px; }
  .stock-current-preview { padding: 9px 10px; }
  .stock-quantity-input { grid-template-columns: 42px minmax(0,1fr) 42px; }
  .stock-movement-card .inventory-desktop-table { display: none; }
  .stock-movement-list { display: grid; gap: 0; }
  .stock-movement-item { padding: 10px 0; }
}
.inline-action-form { display: inline-flex; margin: 0; }

/* Phase 5 customer folder */
.customer-profile-hero { padding: 17px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.customer-profile-main { min-width: 0; display: flex; align-items: center; gap: 12px; }
.customer-profile-avatar { width: 50px; height: 50px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 16px; background: var(--primary); color: #fff; font-size: 17px; font-weight: 900; }
.customer-profile-main > div { min-width: 0; }
.customer-profile-main h2 { margin: 4px 0 1px; font-size: 18px; }
.customer-profile-main p { margin: 0; color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.customer-folder-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.customer-invoices-panel { padding: 17px; }
.customer-invoice-table { margin-top: 12px; }
.customer-items-cell { max-width: 280px; color: var(--muted); font-size: 11px; }
.customer-payment-row td { padding: 7px 10px 12px; background: #fbfcfe; }
.customer-inline-payment { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.customer-inline-payment > span { margin-right: auto; color: var(--muted); font-size: 10px; font-weight: 800; }
.customer-inline-payment input { width: 150px; min-height: 36px; }
.customer-invoice-cards { display: none; }

@media (max-width: 900px) { .customer-folder-stats { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 768px) {
  .customer-profile-hero { padding: 11px; border-radius: 15px; }
  .customer-profile-avatar { width: 42px; height: 42px; border-radius: 13px; font-size: 14px; }
  .customer-profile-main { gap: 9px; }
  .customer-profile-main h2 { font-size: 13px; }
  .customer-profile-main p { font-size: 8px; max-width: 55vw; }
  .customer-profile-hero > .btn { width: 34px; height: 34px; min-height: 34px; padding: 0; font-size: 0; }
  .customer-profile-hero > .btn .app-icon { transform: rotate(180deg); }
  .customer-folder-stats { gap: 8px; }
  .customer-folder-stats .inventory-stat:nth-child(n+2) strong { font-size: 11px; }
  .customer-invoices-panel { padding: 12px; border-radius: 16px; }
  .customer-invoice-cards { margin-top: 10px; display: grid; gap: 8px; }
  .customer-invoice-card { padding: 11px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
  .customer-invoice-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .customer-invoice-head > div { display: grid; }
  .customer-invoice-head small { color: var(--muted); font-size: 7px; }
  .customer-invoice-head strong { font-size: 11px; }
  .customer-invoice-meta { margin-top: 7px; display: flex; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: 7px; }
  .customer-invoice-meta span { display: inline-flex; align-items: center; gap: 4px; }
  .customer-invoice-meta .app-icon { width: 11px; }
  .customer-invoice-items { margin-top: 8px; padding: 8px 9px; border-radius: 10px; background: #f8fafc; }
  .customer-invoice-items small { color: var(--muted); font-size: 7px; }
  .customer-invoice-items p { margin: 2px 0 0; font-size: 8px; line-height: 1.4; }
  .customer-invoice-money { margin-top: 8px; display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
  .customer-invoice-money div { min-width: 0; padding: 7px; border: 1px solid #eef1f4; border-radius: 9px; background: #fff; }
  .customer-invoice-money div.has-due { background: var(--danger-soft); border-color: #fee2e2; }
  .customer-invoice-money small { display: block; color: var(--muted); font-size: 6px; }
  .customer-invoice-money strong { display: block; margin-top: 2px; font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .customer-invoice-money .has-due strong { color: var(--danger); }
  .customer-invoice-actions { margin-top: 8px; display: flex; align-items: center; gap: 7px; }
  .customer-invoice-actions > a { min-height: 31px; padding: 0 9px; display: inline-flex; align-items: center; gap: 5px; border-radius: 9px; background: #f1f4f8; color: var(--primary); font-size: 7px; font-weight: 800; }
  .customer-invoice-actions .app-icon { width: 12px; }
  .customer-cleared { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--success); font-size: 7px; }
  .customer-payment-details { margin-top: 8px; border: 1px solid #e5e9ef; border-radius: 10px; overflow: hidden; }
  .customer-payment-details > summary { min-height: 34px; padding: 0 9px; display: grid; grid-template-columns: 16px 1fr 16px; align-items: center; gap: 5px; list-style: none; cursor: pointer; color: var(--primary); font-size: 8px; font-weight: 800; }
  .customer-payment-details > summary::-webkit-details-marker { display: none; }
  .customer-payment-details > summary .app-icon { width: 12px; }
  .customer-payment-details > summary > span:last-child { transition: transform .18s ease; }
  .customer-payment-details[open] > summary > span:last-child { transform: rotate(90deg); }
  .customer-payment-details form { padding: 8px; display: grid; gap: 6px; border-top: 1px solid #edf0f3; background: #fbfcfe; }
  .customer-payment-details form input { min-height: 42px; }
  .customer-payment-details form .btn { width: 100%; }
}
.stock-movement-item.is-out .stock-movement-icon { background: var(--danger-soft); color: var(--danger); }
.stock-movement-item.is-out b { color: var(--danger); }

/* ========================================================================== 
   Phase 6 - Management workspace: expenses, reports, orders, staff, settings
   ========================================================================== */
.phase6-filterbar { margin-top: 14px; padding: 11px; display: grid; grid-template-columns: minmax(220px,1fr) 160px 160px auto auto; align-items: end; gap: 9px; border: 1px solid var(--line); border-radius: 14px; background: #f8fafc; }
.phase6-filterbar > label:not(.phase6-search) { display: grid; gap: 5px; }
.phase6-filterbar > label > span { font-size: 9px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.phase6-filterbar input, .phase6-filterbar select { min-height: 40px; }
.phase6-search { min-height: 40px; display: grid; grid-template-columns: 18px minmax(0,1fr); align-items: center; gap: 7px; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.phase6-search .app-icon { width: 15px; color: var(--muted); }
.phase6-search input { min-width: 0; min-height: 38px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.phase6-mobile-list { display: none; }
.phase6-record-card { padding: 13px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 3px 14px rgba(20,33,61,.04); }
.phase6-record-head { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 9px; }
.phase6-record-head > div { min-width: 0; }
.phase6-record-head h3 { margin: 0 0 2px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phase6-record-head small { color: var(--muted); font-size: 8px; }
.phase6-record-icon { width: 36px; height: 36px; display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 11px; background: #eef3f8; color: var(--primary); }
.phase6-record-icon .app-icon { width: 15px; }
.phase6-record-icon.danger { background: var(--danger-soft); color: var(--danger); }
.phase6-record-icon.warning { background: var(--warning-soft); color: #9a6700; }
.phase6-record-icon.success { background: var(--success-soft); color: var(--success); }
.phase6-record-amount { font-size: 10px; white-space: nowrap; }
.phase6-record-amount.danger { color: var(--danger); }
.phase6-record-note { margin: 9px 0 0; padding: 8px 9px; border-radius: 10px; background: #f8fafc; color: #4b5563; font-size: 8px; line-height: 1.5; }
.phase6-record-actions { margin-top: 9px; padding-top: 8px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; border-top: 1px solid #edf0f3; }
.phase6-record-actions a, .phase6-record-actions button { width: 100%; min-height: 32px; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 0 8px; border: 0; border-radius: 9px; background: #f1f4f8; color: var(--primary); font-size: 7.5px; font-weight: 850; cursor: pointer; }
.phase6-record-actions form { margin: 0; }
.phase6-record-actions button { background: var(--danger-soft); color: var(--danger); }
.phase6-record-actions a + a { background: var(--success-soft); color: var(--success); }
.phase6-record-actions .app-icon { width: 12px; }

/* Reports */
.report-hero { padding: 18px; display: flex; align-items: end; justify-content: space-between; gap: 18px; background: linear-gradient(135deg,#fff,#f7faff); }
.report-hero-copy h2 { margin: 3px 0 4px; font-size: 21px; }
.report-hero-copy p { margin: 0; max-width: 560px; color: var(--muted); font-size: 10px; }
.report-range-form { display: grid; grid-template-columns: 145px 145px auto; align-items: end; gap: 8px; }
.report-range-form label { display: grid; gap: 5px; }
.report-range-form label span { font-size: 8px; font-weight: 850; color: var(--muted); text-transform: uppercase; }
.report-range-form input { min-height: 41px; }
.report-focus-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.report-focus-card { min-width: 0; padding: 14px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 4px 16px rgba(20,33,61,.04); }
.report-focus-card > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #edf2f7; color: var(--primary); }
.report-focus-card.sales > span { background: #e9f7ef; color: var(--success); }
.report-focus-card.cost > span { background: #fff7e6; color: #9a6700; }
.report-focus-card.expense > span { background: var(--danger-soft); color: var(--danger); }
.report-focus-card.profit > span { background: #eaf0ff; color: #214c9a; }
.report-focus-card .app-icon { width: 17px; }
.report-focus-card div { min-width: 0; }
.report-focus-card small { display: block; color: var(--muted); font-size: 8px; }
.report-focus-card strong { display: block; margin-top: 3px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.report-range-caption { padding: 7px 3px 0; color: var(--muted); font-size: 9px; text-align: right; }
.report-print-strip { margin-top: 12px; padding: 13px 15px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.report-print-strip > div:first-child { display: grid; gap: 2px; }
.report-print-strip > div:first-child strong { font-size: 11px; }
.report-print-strip > div:first-child span { color: var(--muted); font-size: 8px; }
.report-print-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.report-periods { margin-top: 12px; padding: 16px; }
.report-debt-chip { min-width: 170px; padding: 9px 11px; display: grid; border-radius: 12px; background: var(--danger-soft); }
.report-debt-chip span,.report-debt-chip small { color: var(--muted); font-size: 7px; }
.report-debt-chip strong { margin: 2px 0; color: var(--danger); font-size: 13px; }
.report-period-grid { margin-top: 13px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
.report-period-card { padding: 12px; border: 1px solid #e7ebf0; border-radius: 13px; background: #fbfcfe; }
.report-period-head { display: flex; justify-content: space-between; align-items: center; }
.report-period-head strong { font-size: 10px; }
.report-period-head .app-icon { width: 12px; color: var(--muted); }
.report-period-money { margin-top: 9px; display: grid; gap: 6px; }
.report-period-money div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.report-period-money small { color: var(--muted); font-size: 7px; }
.report-period-money b { font-size: 8px; }
.report-period-money .profit { padding-top: 6px; border-top: 1px solid #e6eaf0; }
.report-period-money .profit b { color: var(--success); }
.report-insight-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.report-insight-card { padding: 15px; }
.report-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.report-section-head h3 { margin: 2px 0 0; font-size: 13px; }
.report-row-list { margin-top: 10px; display: grid; }
.report-data-row { min-width: 0; padding: 9px 0; display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 8px; border-top: 1px solid #edf0f3; }
.report-data-row:first-child { border-top: 0; }
.report-data-row > div { min-width: 0; }
.report-data-row strong { display: block; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.report-data-row small { display: block; margin-top: 2px; color: var(--muted); font-size: 7px; }
.report-data-row > b { font-size: 8px; white-space: nowrap; }
.report-rank,.report-row-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: #eef2f7; color: var(--primary); font-size: 9px; font-weight: 900; }
.report-row-icon.warning { background: var(--warning-soft); color: #9a6700; }
.report-row-icon.danger { background: var(--danger-soft); color: var(--danger); }
.report-row-icon.success { background: var(--success-soft); color: var(--success); }
.report-row-icon .app-icon { width: 12px; }
.report-empty { padding: 15px 4px; color: var(--muted); font-size: 9px; text-align: center; }

/* Purchase orders */
.order-status-pill { display: inline-flex; align-items: center; min-height: 23px; padding: 0 8px; border-radius: 999px; background: #edf1f5; color: #596273; font-size: 7px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.order-status-pill.draft { background: var(--warning-soft); color: #8a6200; }
.order-status-pill.sent { background: #eaf0ff; color: #315ca8; }
.order-status-pill.completed { background: var(--success-soft); color: var(--success); }
.order-status-pill.cancelled { background: var(--danger-soft); color: var(--danger); }
.order-filterbar { grid-template-columns: minmax(230px,1fr) 180px auto auto; }
.order-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.order-card-top h3 { margin: 2px 0 0; font-size: 11px; }
.order-card-supplier { margin-top: 10px; display: flex; align-items: center; gap: 9px; }
.order-card-supplier > div { min-width: 0; display: grid; }
.order-card-supplier strong { font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.order-card-supplier small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.order-card-total { margin-top: 9px; padding: 8px 9px; display: flex; align-items: center; justify-content: space-between; border-radius: 10px; background: #f8fafc; }
.order-card-total small { color: var(--muted); font-size: 7px; }
.order-card-total strong { font-size: 10px; }
.order-builder { padding: 18px; }
.order-builder-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.order-builder-head h2 { margin: 3px 0 4px; font-size: 20px; }
.order-builder-head p { margin: 0; color: var(--muted); font-size: 9px; }
.order-builder-section { margin-top: 15px; padding: 14px; border: 1px solid #e6ebf1; border-radius: 14px; background: #fbfcfe; }
.order-builder-title,.order-builder-title-row { display: flex; align-items: center; gap: 9px; }
.order-builder-title-row { justify-content: space-between; }
.order-builder-title > div { display: grid; }
.order-builder-title strong { font-size: 11px; }
.order-builder-title small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.order-builder-section .form-grid { margin-top: 12px; }
.order-item-list { margin-top: 10px; display: grid; gap: 8px; }
.order-item-card { padding: 12px; border: 1px solid #e5eaf0; border-radius: 13px; background: #fff; }
.order-item-card-head { display: flex; align-items: center; gap: 7px; }
.order-item-card-head strong { font-size: 10px; }
.order-item-number { width: 25px; height: 25px; display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 8px; background: #eef2f7; color: var(--primary); font-size: 8px; font-weight: 900; }
.order-item-card-head button { margin-left: auto; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 8px; background: var(--danger-soft); color: var(--danger); cursor: pointer; }
.order-item-card-head button .app-icon { width: 12px; }
.order-item-line { margin-top: 8px; padding: 8px 9px; display: flex; align-items: center; justify-content: space-between; border-radius: 9px; background: #f8fafc; }
.order-item-line span { color: var(--muted); font-size: 7px; }
.order-item-line strong { font-size: 9px; }
.order-builder-total { margin-top: 14px; padding: 13px 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-radius: 14px; background: var(--primary); color: #fff; }
.order-builder-total > div { display: grid; }
.order-builder-total small { opacity: .72; font-size: 8px; }
.order-builder-total strong { margin-top: 2px; font-size: 17px; }
.order-detail-hero { padding: 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.order-detail-main { min-width: 0; display: flex; align-items: center; gap: 10px; }
.order-detail-main > a .app-icon { transform: rotate(180deg); }
.order-detail-main > div { min-width: 0; }
.order-detail-main h2 { margin: 2px 0; font-size: 17px; }
.order-detail-main p { margin: 0; color: var(--muted); font-size: 8px; }
.order-stat-status { font-size: 11px !important; }
.order-detail-grid { margin-top: 12px; display: grid; grid-template-columns: 1.3fr .7fr; gap: 12px; }
.order-supplier-card,.order-status-card { padding: 15px; }
.order-contact-list { margin-top: 10px; display: grid; gap: 7px; }
.order-contact-list > div { min-width: 0; padding: 8px 9px; display: grid; grid-template-columns: 18px minmax(0,1fr); align-items: center; gap: 7px; border-radius: 10px; background: #f8fafc; }
.order-contact-list > div > .app-icon { width: 13px; color: var(--muted); }
.order-contact-list span { min-width: 0; display: grid; }
.order-contact-list small { color: var(--muted); font-size: 7px; }
.order-contact-list strong { margin-top: 1px; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.order-note { margin-top: 10px; padding: 9px; border: 1px dashed #dce2e8; border-radius: 10px; }
.order-note small { color: var(--muted); font-size: 7px; }
.order-note p { margin: 3px 0 0; font-size: 9px; line-height: 1.5; }
.order-status-card > .report-section-head > .app-icon { width: 18px; color: var(--primary); }
.order-status-form { margin-top: 10px; display: grid; gap: 8px; }
.order-status-form label { display: grid; gap: 5px; }
.order-status-form label span { color: var(--muted); font-size: 8px; font-weight: 800; }
.order-print-button { margin-top: 8px; width: 100%; }
.order-items-panel { margin-top: 12px; padding: 15px; }
.order-item-mobile-list { display: none; }
.order-detail-item { padding: 9px 0; display: grid; grid-template-columns: 27px minmax(0,1fr) auto; align-items: center; gap: 8px; border-top: 1px solid #edf0f3; }
.order-detail-item:first-child { border-top: 0; }
.order-detail-item > div { min-width: 0; display: grid; }
.order-detail-item strong { font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.order-detail-item small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.order-detail-item > b { font-size: 8px; white-space: nowrap; }

/* Users and permissions */
.staff-access-panel { padding: 16px; }
.staff-card-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.staff-card { position: relative; padding: 13px; border: 1px solid #e5eaf0; border-radius: 14px; background: #fff; }
.staff-card-head { display: grid; grid-template-columns: 40px minmax(0,1fr) 34px; align-items: center; gap: 9px; }
.staff-card-head > div { min-width: 0; }
.staff-card-head h3 { margin: 0; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.staff-card-head p { margin: 2px 0 0; color: var(--muted); font-size: 8px; }
.staff-meta { margin-top: 9px; display: flex; align-items: center; justify-content: space-between; gap: 7px; color: var(--muted); font-size: 7px; }
.staff-meta > span:first-child { display: inline-flex; align-items: center; gap: 4px; }
.staff-meta .app-icon { width: 11px; }
.staff-admin-access { margin-top: 10px; padding: 10px; display: flex; align-items: center; gap: 8px; border-radius: 11px; background: #edf8f2; color: var(--success); }
.staff-admin-access > .app-icon { width: 18px; }
.staff-admin-access > div { display: grid; }
.staff-admin-access strong { font-size: 9px; }
.staff-admin-access small { margin-top: 2px; color: #5f756a; font-size: 7px; }
.staff-permission-details { margin-top: 10px; border: 1px solid #e5eaf0; border-radius: 11px; overflow: hidden; }
.staff-permission-details > summary { min-height: 38px; padding: 0 9px; display: flex; align-items: center; justify-content: space-between; list-style: none; cursor: pointer; }
.staff-permission-details > summary::-webkit-details-marker { display:none; }
.staff-permission-details > summary > span:first-child { display: inline-flex; align-items: center; gap: 6px; font-size: 8px; }
.staff-permission-details > summary .app-icon { width: 12px; }
.staff-permission-details[open] > summary > span:last-child { transform: rotate(90deg); }
.staff-permission-form { padding: 9px; border-top: 1px solid #edf0f3; background: #fbfcfe; }
.permission-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.permission-option { min-width: 0; padding: 8px; display: grid; grid-template-columns: 16px minmax(0,1fr); align-items: start; gap: 6px; border: 1px solid #e8ecf1; border-radius: 9px; background: #fff; cursor: pointer; }
.permission-option input { margin-top: 2px; accent-color: var(--primary); }
.permission-option span { min-width: 0; display: grid; }
.permission-option b { font-size: 7.5px; }
.permission-option small { margin-top: 2px; color: var(--muted); font-size: 6.5px; }
.staff-permission-actions { margin-top: 8px; display: flex; gap: 6px; }
.staff-permission-actions form { margin: 0; }
.staff-delete-form { margin: 10px 0 0; padding-top: 9px; border-top: 1px solid #edf0f3; }
.staff-delete-form button { padding: 0; display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--danger); font-size: 7.5px; font-weight: 850; cursor: pointer; }
.staff-delete-form .app-icon { width: 12px; }

/* Settings */
.settings-hero { padding: 17px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: linear-gradient(135deg,#fff,#f6f9fd); }
.settings-hero h2 { margin: 3px 0 4px; font-size: 20px; }
.settings-hero p { margin: 0; color: var(--muted); font-size: 9px; }
.settings-hero-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: var(--primary); color: #fff; }
.settings-hero-icon .app-icon { width: 20px; }
.settings-app-form { margin-top: 12px; }
.settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.settings-section { padding: 15px; }
.settings-section-wide { grid-column: 1/-1; }
.settings-section-title { display: flex; align-items: center; gap: 9px; }
.settings-section-title > div { display: grid; }
.settings-section-title strong { font-size: 11px; }
.settings-section-title small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.settings-section .form-grid { margin-top: 12px; }
.settings-note { margin-top: 9px; padding: 8px 9px; display: flex; align-items: center; gap: 6px; border-radius: 10px; background: #fff8e6; color: #7a5c00; font-size: 7.5px; line-height: 1.4; }
.settings-note .app-icon { width: 13px; flex: 0 0 auto; }
.settings-status-row { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.settings-status { min-width: 0; padding: 9px; display: flex; align-items: center; gap: 7px; border-radius: 10px; background: #f8fafc; }
.settings-status.ok { background: var(--success-soft); color: var(--success); }
.settings-status.warning { background: var(--warning-soft); color: #8a6200; }
.settings-status > .app-icon { width: 15px; flex: 0 0 auto; }
.settings-status > span { min-width: 0; display: grid; }
.settings-status strong { font-size: 8px; }
.settings-status small { margin-top: 1px; color: var(--muted); font-size: 7px; }
.settings-language-row { margin-top: 11px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.settings-language-row a { padding: 10px; display: grid; border: 1px solid #e2e7ed; border-radius: 11px; color: var(--primary); background: #fff; }
.settings-language-row a.active { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: #f3f6fb; }
.settings-language-row strong { font-size: 9px; }
.settings-language-row small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.settings-save-dock { margin-top: 12px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 14px; background: var(--primary); color: #fff; box-shadow: 0 8px 22px rgba(20,33,61,.14); }
.settings-save-dock > div { display: grid; }
.settings-save-dock strong { font-size: 10px; }
.settings-save-dock small { margin-top: 2px; opacity: .72; font-size: 7px; }

@media (max-width: 1020px) {
  .phase6-filterbar { grid-template-columns: minmax(180px,1fr) 140px 140px; }
  .phase6-filterbar .btn { width: 100%; }
  .report-hero { align-items: stretch; flex-direction: column; }
  .report-range-form { grid-template-columns: 1fr 1fr auto; }
  .report-focus-grid,.report-period-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .staff-card-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .expense-overview,.order-overview,.user-overview,.order-detail-stats { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
  .phase6-filterbar { margin-top: 10px; padding: 8px; grid-template-columns: 1fr 1fr; gap: 6px; border-radius: 12px; }
  .phase6-filterbar .phase6-search { grid-column: 1/-1; }
  .phase6-filterbar > label > span { font-size: 6.5px; }
  .phase6-filterbar input,.phase6-filterbar select { min-height: 37px; font-size: 9px; }
  .phase6-filterbar .btn { min-height: 35px; font-size: 7px; }
  .phase6-mobile-list { margin-top: 9px; display: grid; gap: 7px; }
  .expense-list-panel,.order-list-panel { padding: 11px; border-radius: 16px; }
  .expense-list-panel .inventory-list-head,.order-list-panel .inventory-list-head { align-items: center; }
  .order-list-panel .inventory-list-head .btn { min-height: 33px; padding: 0 8px; font-size: 7px; }

  .report-hero { padding: 11px; border-radius: 15px; }
  .report-hero-copy h2 { font-size: 14px; }
  .report-hero-copy p { font-size: 7.5px; line-height: 1.45; }
  .report-range-form { grid-template-columns: 1fr 1fr; gap: 6px; }
  .report-range-form .btn { grid-column: 1/-1; min-height: 36px; }
  .report-range-form label span { font-size: 6.5px; }
  .report-range-form input { min-height: 37px; font-size: 9px; }
  .report-focus-grid { margin-top: 8px; gap: 7px; }
  .report-focus-card { padding: 9px; gap: 7px; border-radius: 12px; }
  .report-focus-card > span { width: 30px; height: 30px; border-radius: 9px; }
  .report-focus-card .app-icon { width: 13px; }
  .report-focus-card small { font-size: 6.5px; }
  .report-focus-card strong { font-size: 9px; }
  .report-range-caption { font-size: 6.5px; }
  .report-print-strip { padding: 10px; align-items: stretch; flex-direction: column; }
  .report-print-strip > div:first-child strong { font-size: 9px; }
  .report-print-strip > div:first-child span { font-size: 7px; }
  .report-print-actions { display: grid; grid-template-columns: repeat(3,1fr); }
  .report-print-actions .btn { min-height: 32px; padding: 0 4px; font-size: 6.5px; }
  .report-periods { padding: 11px; border-radius: 15px; }
  .report-periods .inventory-list-head { align-items: start; }
  .report-debt-chip { min-width: 115px; padding: 7px; }
  .report-debt-chip strong { font-size: 9px; }
  .report-debt-chip span,.report-debt-chip small { font-size: 6px; }
  .report-period-grid { margin-top: 9px; gap: 6px; }
  .report-period-card { padding: 8px; border-radius: 10px; }
  .report-period-head strong { font-size: 8px; }
  .report-period-money { margin-top: 6px; gap: 4px; }
  .report-period-money small { font-size: 6px; }
  .report-period-money b { font-size: 6.5px; }
  .report-insight-grid { margin-top: 8px; grid-template-columns: 1fr; gap: 8px; }
  .report-insight-card { padding: 11px; border-radius: 15px; }
  .report-section-head h3 { font-size: 10px; }
  .report-data-row { padding: 8px 0; grid-template-columns: 27px minmax(0,1fr) auto; gap: 6px; }
  .report-data-row strong { font-size: 8px; }
  .report-data-row small { font-size: 6px; }
  .report-data-row > b { font-size: 7px; }

  .order-builder { padding: 11px; border-radius: 15px; }
  .order-builder-head { align-items: center; }
  .order-builder-head h2 { font-size: 14px; }
  .order-builder-head p { font-size: 7px; }
  .order-builder-head .btn { width: 34px; min-height: 34px; padding: 0; font-size: 0; }
  .order-builder-head .btn .app-icon { width: 13px; transform: rotate(180deg); }
  .order-builder-section { margin-top: 9px; padding: 9px; border-radius: 11px; }
  .order-builder-title strong { font-size: 9px; }
  .order-builder-title small { font-size: 6.5px; }
  .order-builder-title-row .btn { min-height: 30px; padding: 0 7px; font-size: 6.5px; }
  .order-item-card { padding: 9px; border-radius: 11px; }
  .order-item-card .form-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .order-item-card .form-group:nth-child(-n+2) { grid-column: 1/-1; }
  .order-item-card .form-group label { font-size: 6.5px; }
  .order-item-card input,.order-item-card select { min-height: 37px; font-size: 8px; }
  .order-builder-total { position: sticky; bottom: calc(74px + env(safe-area-inset-bottom)); z-index: 8; padding: 10px; border-radius: 12px; }
  .order-builder-total strong { font-size: 12px; }
  .order-builder-total small { font-size: 6.5px; }
  .order-builder-total .btn { min-height: 34px; font-size: 7px; }
  .order-detail-hero { padding: 10px; border-radius: 14px; }
  .order-detail-main h2 { font-size: 12px; }
  .order-detail-main p { font-size: 6.5px; }
  .order-detail-grid { margin-top: 8px; grid-template-columns: 1fr; gap: 8px; }
  .order-supplier-card,.order-status-card,.order-items-panel { padding: 11px; border-radius: 15px; }
  .order-items-panel { margin-top: 8px; }
  .order-item-mobile-list { margin-top: 8px; display: grid; }

  .staff-access-panel { padding: 11px; border-radius: 15px; }
  .staff-card-grid { margin-top: 9px; gap: 7px; }
  .staff-card { padding: 10px; border-radius: 13px; }
  .staff-card-head { grid-template-columns: 36px minmax(0,1fr) 32px; gap: 7px; }
  .staff-card-head .customer-avatar { width: 36px; height: 36px; }
  .staff-card-head h3 { font-size: 9px; }
  .staff-card-head p { font-size: 6.5px; }
  .permission-grid { grid-template-columns: 1fr; }
  .permission-option { padding: 7px; }
  .staff-permission-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .staff-permission-actions .btn { width: 100%; min-height: 31px; padding: 0 5px; font-size: 6.5px; }

  .settings-hero { padding: 11px; border-radius: 15px; }
  .settings-hero h2 { font-size: 13px; }
  .settings-hero p { max-width: 68vw; font-size: 7px; line-height: 1.4; }
  .settings-hero-icon { width: 37px; height: 37px; border-radius: 11px; }
  .settings-grid { grid-template-columns: 1fr; gap: 8px; }
  .settings-section-wide { grid-column: auto; }
  .settings-section { padding: 11px; border-radius: 15px; }
  .settings-section-title strong { font-size: 9px; }
  .settings-section-title small { font-size: 6.5px; }
  .settings-status-row { align-items: stretch; flex-direction: column; }
  .settings-status-row .btn { width: 100%; }
  .settings-language-row { gap: 6px; }
  .settings-language-row a { padding: 8px; }
  .settings-save-dock { position: sticky; bottom: calc(74px + env(safe-area-inset-bottom)); z-index: 8; padding: 9px 10px; border-radius: 12px; }
  .settings-save-dock strong { font-size: 8px; }
  .settings-save-dock small { display: none; }
  .settings-save-dock .btn { min-height: 34px; font-size: 7px; }
}
.staff-permission-reset { margin: 0; padding: 0 9px 9px; background: #fbfcfe; }
.staff-permission-reset .btn { width: 100%; }

/* Phase 6 POS flow hotfix: real-time cart controls + easy return to product search. */
.pos-catalog { scroll-margin-top: 92px; }
.pos-cart-head-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.pos-add-more-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-height:30px;
  padding:0 9px;
  border:1px solid #dce3ec;
  border-radius:10px;
  background:#f7f9fc;
  color:var(--primary);
  font-size:9px;
  font-weight:900;
  text-decoration:none;
}
.pos-add-more-link .app-icon { width:13px; }
.pos-line-editor.is-saving { opacity:.72; }
.pos-line-editor.is-saving .pos-update-btn { pointer-events:none; }
.pos-line-editor.is-saving .pos-update-btn::after { content:'…'; margin-left:2px; }

@media (max-width: 768px) {
  body[data-page="sales"] #posCatalog { scroll-margin-top: calc(118px + env(safe-area-inset-top)); }
  body[data-page="sales"] .pos-cart-head-actions { gap:5px; }
  body[data-page="sales"] .pos-add-more-link {
    min-height:29px;
    padding:0 8px;
    border-radius:9px;
    font-size:8px;
  }
  body[data-page="sales"] .pos-line-editor .pos-update-btn {
    min-width:52px;
    font-size:8px;
  }
}


/* =========================================================
   Phase 6.1 - Sales mobile viewport stability hotfix
   Keeps POS locked to the device layout width after pinch zoom,
   prevents iOS input-focus auto zoom, and removes width drift.
   ========================================================= */
@media (max-width: 768px) {
  body[data-page="sales"] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    overscroll-behavior-x: none;
  }
  body[data-page="sales"] .app-shell,
  body[data-page="sales"] .main-wrap,
  body[data-page="sales"] .content,
  body[data-page="sales"] .page-shell,
  body[data-page="sales"] .pos-workspace,
  body[data-page="sales"] .pos-catalog,
  body[data-page="sales"] .pos-side,
  body[data-page="sales"] .pos-cart-card,
  body[data-page="sales"] .pos-checkout-card,
  body[data-page="sales"] .pos-history {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  body[data-page="sales"] .app-shell,
  body[data-page="sales"] .main-wrap {
    flex: 1 1 100%;
  }
  body[data-page="sales"] .content {
    overflow-x: hidden;
  }
  body[data-page="sales"] .page-shell {
    margin-left: 0;
    margin-right: 0;
  }
  body[data-page="sales"] .pos-products,
  body[data-page="sales"] .pos-product-card,
  body[data-page="sales"] .pos-product-bottom,
  body[data-page="sales"] .pos-cart-items,
  body[data-page="sales"] .pos-cart-item,
  body[data-page="sales"] .pos-cart-item-head,
  body[data-page="sales"] .pos-line-editor,
  body[data-page="sales"] .pos-cart-head-actions,
  body[data-page="sales"] .pos-history-row,
  body[data-page="sales"] .pos-payment-methods {
    min-width: 0;
    max-width: 100%;
  }
  body[data-page="sales"] .pos-product-bottom > strong,
  body[data-page="sales"] .pos-cart-item-head > div,
  body[data-page="sales"] .pos-history-main {
    min-width: 0;
  }
  body[data-page="sales"] .pos-product-bottom > strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Safari/iOS zooms focused form controls smaller than 16px. */
  body[data-page="sales"] .pos-stepper input,
  body[data-page="sales"] .pos-price-input input,
  body[data-page="sales"] .pos-search-wrap input,
  body[data-page="sales"] .pos-field select,
  body[data-page="sales"] .pos-field > input,
  body[data-page="sales"] .pos-new-customer-fields input {
    font-size: 16px !important;
  }

  /* Fixed UI always follows the viewport edges, not a shrunken content box. */
  body[data-page="sales"] .pos-mobile-cart-dock,
  body[data-page="sales"] .mobile-bottom-nav {
    max-width: 100vw;
  }
}


/* Phase 6.2 - final management mobile polish.
   Normalise tiny Phase 6 typography, keep form controls at 16px to prevent
   browser auto-zoom, and make management screens feel like the same app as POS. */
.permission-count {
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #edf2f7;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}
.permission-bulk-actions {
  margin-bottom: 8px;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 7px;
}
.permission-bulk-actions .btn { width: 100%; }
.order-qty-stepper {
  min-height: 42px;
  display: grid;
  grid-template-columns: 40px minmax(0,1fr) 40px;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
}
.order-qty-stepper button {
  border: 0;
  background: #f1f4f8;
  color: var(--primary);
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
}
.order-qty-stepper input {
  min-width: 0;
  min-height: 40px !important;
  padding: 0 6px !important;
  border: 0 !important;
  border-radius: 0 !important;
  text-align: center;
  box-shadow: none !important;
  appearance: textfield;
}
.order-qty-stepper input::-webkit-inner-spin-button,
.order-qty-stepper input::-webkit-outer-spin-button { appearance: none; margin: 0; }

@media (max-width: 768px) {
  /* Filters */
  .phase6-filterbar { gap: 8px; padding: 10px; }
  .phase6-filterbar > label > span { font-size: 10px; letter-spacing: .04em; }
  .phase6-filterbar input,
  .phase6-filterbar select,
  .report-range-form input,
  .order-item-card input,
  .order-item-card select,
  .settings-section input,
  .settings-section select,
  .settings-section textarea,
  .inventory-editor-form input,
  .inventory-editor-form select,
  .inventory-editor-form textarea { min-height: 46px; font-size: 16px; }
  .phase6-filterbar .btn { min-height: 44px; font-size: 12px; }
  .phase6-search { min-height: 46px; border-radius: 12px; }
  .phase6-search input { min-height: 44px; }

  /* Shared Phase 6 records */
  .phase6-mobile-list { gap: 10px; }
  .phase6-record-card { padding: 14px; border-radius: 16px; }
  .phase6-record-head { grid-template-columns: 42px minmax(0,1fr) auto; gap: 10px; }
  .phase6-record-icon { width: 40px; height: 40px; border-radius: 12px; }
  .phase6-record-icon .app-icon { width: 17px; }
  .phase6-record-head h3 { font-size: 13px; }
  .phase6-record-head small { font-size: 11px; }
  .phase6-record-amount { font-size: 13px; }
  .phase6-record-note { padding: 10px; font-size: 11px; }
  .phase6-record-actions { gap: 8px; }
  .phase6-record-actions a,
  .phase6-record-actions button { min-height: 42px; font-size: 11px; border-radius: 11px; }
  .phase6-record-actions .app-icon { width: 14px; }

  /* Reports */
  .report-hero { padding: 14px; }
  .report-hero-copy h2 { font-size: 17px; }
  .report-hero-copy p { font-size: 11px; }
  .report-range-form label span { font-size: 10px; }
  .report-range-form .btn { min-height: 44px; font-size: 12px; }
  .report-focus-card { min-height: 68px; padding: 11px; }
  .report-focus-card > span { width: 36px; height: 36px; }
  .report-focus-card small { font-size: 10px; }
  .report-focus-card strong { font-size: 12px; }
  .report-range-caption { padding-top: 9px; font-size: 10px; text-align: left; }
  .report-print-strip > div:first-child strong { font-size: 13px; }
  .report-print-strip > div:first-child span { font-size: 10px; }
  .report-print-actions .btn { min-height: 40px; font-size: 10px; }
  .report-debt-chip { min-width: 128px; padding: 9px; }
  .report-debt-chip span,.report-debt-chip small { font-size: 9px; }
  .report-debt-chip strong { font-size: 12px; }
  .report-period-card { padding: 10px; }
  .report-period-head strong { font-size: 11px; }
  .report-period-money small { font-size: 9px; }
  .report-period-money b { font-size: 10px; }
  .report-section-head h3 { font-size: 13px; }
  .report-data-row { grid-template-columns: 32px minmax(0,1fr) auto; gap: 8px; }
  .report-data-row strong { font-size: 11px; }
  .report-data-row small { font-size: 9px; }
  .report-data-row > b { font-size: 10px; }
  .report-rank,.report-row-icon { width: 30px; height: 30px; }
  .report-empty { font-size: 11px; }

  /* Purchase Orders */
  .order-list-panel .inventory-list-head .btn { min-height: 42px; font-size: 11px; }
  .order-builder { padding: 13px; }
  .order-builder-head h2 { font-size: 17px; }
  .order-builder-head p { font-size: 11px; }
  .order-builder-section { padding: 12px; }
  .order-builder-title strong { font-size: 13px; }
  .order-builder-title small { font-size: 10px; }
  .order-builder-title-row .btn { min-height: 40px; font-size: 10px; }
  .order-item-card { padding: 11px; }
  .order-item-card .form-group label { font-size: 10px; }
  .order-item-line { font-size: 11px; }
  .order-qty-stepper { min-height: 46px; grid-template-columns: 44px minmax(0,1fr) 44px; }
  .order-qty-stepper input { min-height: 44px !important; font-size: 16px !important; }
  .order-builder-total { padding: 11px 12px; }
  .order-builder-total strong { font-size: 15px; }
  .order-builder-total small { font-size: 10px; }
  .order-builder-total .btn { min-height: 42px; font-size: 11px; }
  .order-detail-main h2 { font-size: 15px; }
  .order-detail-main p { font-size: 10px; }
  .order-detail-item strong { font-size: 12px; }
  .order-detail-item small { font-size: 10px; }

  /* Staff & permissions */
  .staff-card { padding: 12px; }
  .staff-card-head { grid-template-columns: 40px minmax(0,1fr) 38px; }
  .staff-card-head h3 { font-size: 13px; }
  .staff-card-head p { font-size: 10px; }
  .staff-meta { font-size: 10px; }
  .staff-admin-access strong { font-size: 12px; }
  .staff-admin-access small { font-size: 10px; }
  .staff-permission-details > summary { min-height: 46px; padding: 0 11px; }
  .staff-permission-details > summary > span:first-child { font-size: 11px; }
  .staff-permission-form { padding: 11px; }
  .permission-grid { gap: 8px; }
  .permission-option { min-height: 48px; padding: 9px 10px; }
  .permission-option input { width: 20px; height: 20px; }
  .permission-option b { font-size: 11px; }
  .permission-option small { font-size: 9px; }
  .staff-permission-actions .btn,
  .staff-permission-reset .btn { min-height: 42px; font-size: 11px; }
  .staff-delete-form button { min-height: 40px; font-size: 11px; }

  /* Settings */
  .settings-hero { padding: 13px; }
  .settings-hero h2 { font-size: 16px; }
  .settings-hero p { max-width: 72vw; font-size: 10px; }
  .settings-section { padding: 13px; }
  .settings-section-title strong { font-size: 13px; }
  .settings-section-title small { font-size: 10px; }
  .settings-note { padding: 10px; font-size: 10px; }
  .settings-status { padding: 11px; }
  .settings-status strong { font-size: 11px; }
  .settings-status small { font-size: 9px; }
  .settings-language-row a { min-height: 58px; padding: 10px; }
  .settings-language-row strong { font-size: 12px; }
  .settings-language-row small { font-size: 9px; }
  .settings-save-dock { padding: 10px 11px; }
  .settings-save-dock strong { font-size: 11px; }
  .settings-save-dock .btn { min-height: 42px; font-size: 11px; }
}

/* =========================================================
   Phase 7 — production audit & final core polish
   ========================================================= */
.sidebar-account-copy { text-decoration: none; color: inherit; min-width: 0; }
.sidebar-avatar { text-decoration: none; }

.sales-history-panel { overflow: hidden; }
.sales-history-filters { display: grid; grid-template-columns: minmax(260px, 1fr) 170px 170px auto auto; gap: 10px; align-items: end; margin: 14px 0; }
.sales-history-search { min-width: 0; }
.sales-history-date { display: flex; flex-direction: column; gap: 6px; }
.sales-history-date label { font-size: 12px; font-weight: 800; color: var(--muted); }
.sales-history-result-bar { display: flex; align-items: center; gap: 6px; min-height: 38px; padding: 8px 11px; margin-bottom: 10px; background: #f7f9fc; border: 1px solid var(--border); border-radius: 12px; font-size: 12px; color: var(--muted); }
.sales-history-result-bar strong { color: var(--text); font-size: 14px; }
.sales-history-result-bar em { margin-left: auto; font-style: normal; }
.sales-history-items { max-width: 290px; line-height: 1.45; }
.sales-history-actions { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.sales-history-cards { gap: 10px; }
.sales-history-card { border: 1px solid var(--border); border-radius: 16px; padding: 13px; background: #fff; box-shadow: 0 4px 16px rgba(18, 35, 64, .05); }
.sales-history-card-head, .sales-history-card-meta, .sales-history-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sales-history-card-head > div { display: flex; flex-direction: column; gap: 2px; }
.sales-history-card-head small, .sales-history-card-items small, .sales-history-card-money small { font-size: 11px; color: var(--muted); }
.sales-history-card-head strong { font-size: 17px; }
.sales-history-card-meta { justify-content: flex-start; flex-wrap: wrap; margin: 10px 0; color: var(--muted); font-size: 12px; }
.sales-history-card-meta span, .sales-history-card-foot span { display: inline-flex; align-items: center; gap: 5px; }
.sales-history-card-meta .app-icon, .sales-history-card-foot .app-icon { width: 15px; height: 15px; }
.sales-history-card-items { padding: 10px 0; border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border); }
.sales-history-card-items p { margin: 4px 0 0; font-size: 13px; line-height: 1.45; }
.sales-history-card-money { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; margin: 10px 0; }
.sales-history-card-money > div { padding: 8px; background: #f7f9fc; border-radius: 11px; min-width: 0; }
.sales-history-card-money strong { display: block; margin-top: 3px; font-size: 12px; overflow-wrap: anywhere; }
.sales-history-card-money .has-due { background: #fff4f2; }
.sales-history-card-foot { justify-content: flex-start; flex-wrap: wrap; color: var(--muted); font-size: 11px; margin-bottom: 10px; }
.phase7-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
.phase7-pagination > span { font-size: 12px; font-weight: 800; color: var(--muted); }

.phase7-import-steps { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 8px; }
.phase7-import-steps li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 12px; background: #fafbfd; font-size: 13px; }
.phase7-import-steps li span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 9px; background: var(--primary); color: #fff; font-weight: 900; }
.phase7-import-form { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); }
.phase7-import-note { margin-top: 10px; }
.phase7-import-rules { margin-top: 16px; padding: 12px; border-radius: 12px; background: #f7f9fc; border: 1px solid var(--border); }
.phase7-import-rules ul { margin: 8px 0 0; padding-left: 18px; color: var(--muted); line-height: 1.65; font-size: 12px; }

.phase7-profile-hero { display: flex; align-items: center; gap: 14px; }
.phase7-profile-avatar { width: 58px; height: 58px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 18px; background: var(--primary); color: #fff; font-size: 22px; font-weight: 900; }
.phase7-profile-hero > div { min-width: 0; flex: 1; }
.phase7-profile-hero h2 { margin: 3px 0; font-size: 20px; }
.phase7-profile-hero p { margin: 0; color: var(--muted); font-size: 13px; }
.phase7-profile-grid { margin-top: 14px; }
.phase7-profile-form { display: grid; gap: 12px; }

.customer-inline-payment select, .customer-payment-details select { min-width: 130px; }
.phase7-payment-ledger { margin-top: 14px; }
.phase7-payment-cards { gap: 9px; }
.phase7-payment-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px 10px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.phase7-payment-card > div { display: flex; flex-direction: column; gap: 2px; }
.phase7-payment-card > div strong { font-size: 15px; }
.phase7-payment-card > div small { color: var(--muted); }
.phase7-payment-card > span { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; justify-self: end; }
.phase7-payment-card .app-icon { width: 14px; height: 14px; }

@media (max-width: 1100px) {
  .sales-history-filters { grid-template-columns: minmax(220px, 1fr) repeat(2, 150px); }
  .sales-history-filters .btn { width: 100%; }
}

@media (max-width: 768px) {
  .sales-history-panel { padding: 10px; border-radius: 15px; }
  .sales-history-filters { grid-template-columns: 1fr 1fr; gap: 8px; }
  .sales-history-search { grid-column: 1 / -1; }
  .sales-history-filters input, .sales-history-filters select, .sales-history-filters button, .sales-history-filters a,
  .phase7-import-form input, .phase7-profile-form input, .customer-inline-payment input, .customer-inline-payment select,
  .customer-payment-details input, .customer-payment-details select { font-size: 16px !important; min-height: 44px; }
  .sales-history-filters .btn { min-height: 44px; }
  .sales-history-result-bar { margin-top: 4px; }
  .sales-history-card { padding: 12px; }
  .sales-history-card-money strong { font-size: 11px; }
  .phase7-pagination { justify-content: space-between; }
  .phase7-import-grid, .phase7-profile-grid { grid-template-columns: 1fr !important; }
  .phase7-profile-hero { padding: 12px; border-radius: 15px; }
  .phase7-profile-avatar { width: 48px; height: 48px; border-radius: 14px; font-size: 18px; }
  .phase7-profile-hero h2 { font-size: 16px; }
  .phase7-profile-hero p { font-size: 12px; }
  .phase7-profile-hero .badge { font-size: 10px; }
  .customer-profile-main h2 { font-size: 15px; }
  .customer-profile-main p { font-size: 12px; max-width: 58vw; }
  .customer-inline-payment { display: grid; grid-template-columns: 1fr 150px auto; gap: 7px; }
  .customer-inline-payment > span { grid-column: 1 / -1; }
  .phase7-payment-card { grid-template-columns: 1fr; }
  .phase7-payment-card > span { justify-self: start; font-size: 12px; }
}

@media (max-width: 480px) {
  .sales-history-filters { grid-template-columns: 1fr; }
  .sales-history-search { grid-column: auto; }
  .sales-history-card-money { gap: 5px; }
  .sales-history-card-money > div { padding: 7px 6px; }
  .customer-inline-payment { grid-template-columns: 1fr; }
  .customer-inline-payment > span { grid-column: auto; }
}

/* Phase 7.1 finance / capital */
.capital-overview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}.capital-equity-card{border-color:#b8e2ca;background:#f5fff8}.capital-rules-card{margin-bottom:14px}.capital-rule-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.capital-rule-grid>div{padding:12px;border:1px solid #e5eaf0;border-radius:12px;background:#fbfcfe;display:grid;gap:5px}.capital-rule-grid strong{font-size:13px}.capital-rule-grid span{color:var(--muted);font-size:12px;line-height:1.45}.capital-note{margin:12px 0 0}.capital-history-list{display:grid}.capital-history-item{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid #edf0f3}.capital-history-item:last-child{border-bottom:0}.capital-history-icon{width:36px;height:36px;border-radius:11px;display:grid;place-items:center}.capital-history-icon .app-icon{width:18px}.capital-history-icon.in{background:#eaf8ef;color:#168348}.capital-history-icon.out{background:#fff1f0;color:#c83d36}.capital-history-main{min-width:0;display:grid;gap:2px}.capital-history-main strong{font-size:13px}.capital-history-main span,.capital-history-main small{color:var(--muted);font-size:11px;white-space:normal}.capital-history-amount{font-size:13px;white-space:nowrap}.capital-history-amount.positive{color:#168348}.capital-history-amount.negative{color:#c83d36}.inventory-product-prices.selling-only{grid-template-columns:1fr}
@media(max-width:900px){.capital-overview{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.capital-overview{gap:8px}.capital-rule-grid{grid-template-columns:1fr}.capital-rule-grid>div{padding:10px}.capital-history-item{grid-template-columns:36px minmax(0,1fr);gap:8px}.capital-history-amount{grid-column:2}.capital-history-main strong{font-size:12px}.capital-history-main span,.capital-history-main small{font-size:10px}}
.permission-option.permission-finance{border-color:#f1cf8b;background:#fffaf0}.permission-option.permission-finance small{color:#9a5b00}.finance-permission-note{margin:10px 0}

/* DUKA Cosmetics C1 ------------------------------------------------------- */
.cosmetics-migration-alert{padding:14px 16px;margin-bottom:12px;border-color:#f3c85a;background:#fff9e8;display:grid;gap:4px}.cosmetics-migration-alert strong{font-size:13px}.cosmetics-migration-alert span{font-size:11px;color:#765b12;line-height:1.45}
.cosmetics-form-section{padding:14px 0;border-bottom:1px solid var(--line)}.cosmetics-form-section:first-child{padding-top:2px}.cosmetics-form-section:last-of-type{border-bottom:0}.cosmetics-form-title{margin-bottom:11px;display:grid;gap:2px}.cosmetics-form-title strong{font-size:12px}.cosmetics-form-title small{font-size:10px;color:var(--muted)}.cosmetics-form-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.cosmetics-form-grid .inventory-field-wide{grid-column:span 2}.cosmetics-active-field{display:flex;flex-direction:column}.cosmetics-switch{min-height:44px;padding:0 11px;display:flex;align-items:center;gap:9px;border:1px solid #d6dce6;border-radius:12px;background:#fff;cursor:pointer}.cosmetics-switch input{position:absolute;opacity:0;pointer-events:none}.cosmetics-switch span{width:35px;height:20px;border-radius:20px;background:#dce2e9;position:relative;transition:.18s}.cosmetics-switch span:after{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:.18s}.cosmetics-switch input:checked+span{background:var(--success)}.cosmetics-switch input:checked+span:after{transform:translateX(15px)}.cosmetics-switch b{font-size:10px}
.cosmetics-image-upload{display:grid;grid-template-columns:86px minmax(0,1fr);gap:13px;align-items:center}.cosmetics-image-preview{width:86px;height:86px;border:1px dashed #cbd3df;border-radius:16px;background:#f7f9fc;display:grid;place-items:center;overflow:hidden;color:#8a95a5}.cosmetics-image-preview img{width:100%;height:100%;object-fit:cover}.cosmetics-image-preview .app-icon{width:28px}.cosmetics-image-upload input[type=file]{font-size:11px}.cosmetics-image-upload small,.cosmetics-remove-image{display:block;margin-top:6px;font-size:9px;color:var(--muted)}
.cosmetics-toolbar{align-items:stretch}.cosmetics-filter-row{margin:-1px 0 10px;display:grid;grid-template-columns:repeat(2,minmax(0,220px));gap:7px}.cosmetics-filter-row select{min-height:38px;padding:0 10px;border:1px solid var(--line);border-radius:11px;background:#f8fafc;font-size:10px}.cosmetics-table-product{display:flex;align-items:center;gap:9px;min-width:220px}.cosmetics-table-thumb{width:37px;height:37px;flex:0 0 37px;border-radius:10px;background:#edf1f6;display:grid;place-items:center;overflow:hidden;font-weight:900;color:var(--primary)}.cosmetics-table-thumb img{width:100%;height:100%;object-fit:cover}.cosmetics-table-product>div{display:grid;gap:2px}.cosmetics-table-product small{font-size:9px;color:var(--muted)}.cosmetics-table-product em{font-size:8px;color:#778295;font-style:normal;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.cosmetics-product-avatar{overflow:hidden}.cosmetics-product-avatar img{width:100%;height:100%;object-fit:cover}.cosmetics-card-meta{display:block;color:var(--muted);font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cosmetics-variant-chips{margin-top:8px;display:flex;gap:5px;flex-wrap:wrap}.cosmetics-variant-chips span{padding:4px 7px;border-radius:999px;background:#f1eefc;color:#5d42a8;font-size:8px;font-weight:750}.cosmetics-card-stock{margin-top:8px;display:flex;align-items:center;justify-content:space-between;gap:8px}.cosmetics-card-stock code{font-size:8px;color:#697386;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cosmetics-pos-avatar{overflow:hidden}.cosmetics-pos-avatar img{width:100%;height:100%;object-fit:cover}.pos-product-copy h3{word-break:break-word}
.cosmetics-batch-details{margin:12px 0;border:1px solid #e4e9f0;border-radius:14px;background:#f9fbfd;overflow:hidden}.cosmetics-batch-details summary{list-style:none;padding:11px 12px;display:grid;grid-template-columns:30px minmax(0,1fr) 18px;align-items:center;gap:9px;cursor:pointer}.cosmetics-batch-details summary::-webkit-details-marker{display:none}.cosmetics-batch-details summary>span{width:30px;height:30px;border-radius:9px;background:#fff0db;color:#b76a00;display:grid;place-items:center}.cosmetics-batch-details summary .app-icon{width:14px}.cosmetics-batch-details summary div{display:grid}.cosmetics-batch-details summary strong{font-size:10px}.cosmetics-batch-details summary small{font-size:8px;color:var(--muted)}.cosmetics-batch-details>summary>.app-icon{transition:.18s}.cosmetics-batch-details[open]>summary>.app-icon{transform:rotate(90deg)}.cosmetics-batch-form{padding:0 12px 12px}.cosmetics-always-list{display:grid!important}.cosmetics-batch-ledger{margin-top:14px;padding:16px}.cosmetics-batch-cards{margin-top:12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.cosmetics-batch-card{padding:12px;border:1px solid var(--line);border-radius:14px;background:#fff}.cosmetics-batch-card.is-soon{border-color:#efc66b;background:#fffaf0}.cosmetics-batch-card.is-expired{border-color:#f0b0b0;background:#fff6f6}.cosmetics-batch-card.is-empty{opacity:.68}.cosmetics-batch-head{display:flex;justify-content:space-between;gap:9px;align-items:start}.cosmetics-batch-head div{min-width:0;display:grid}.cosmetics-batch-head strong{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cosmetics-batch-head small{font-size:8px;color:var(--muted)}.cosmetics-batch-head>span{padding:4px 6px;border-radius:7px;background:#eef2f6;font-size:8px;font-family:ui-monospace,SFMono-Regular,monospace;white-space:nowrap}.cosmetics-batch-metrics{margin-top:10px;padding:9px;border-radius:10px;background:#f7f9fb;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.cosmetics-batch-metrics div{min-width:0}.cosmetics-batch-metrics small{display:block;font-size:7px;color:var(--muted)}.cosmetics-batch-metrics b{display:block;margin-top:2px;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cosmetics-batch-foot{margin-top:8px;padding-top:7px;border-top:1px solid #edf0f4;display:flex;justify-content:space-between;gap:8px;font-size:7px;color:var(--muted)}.cosmetics-expiry-state{font-weight:850;color:#16733b}.is-soon .cosmetics-expiry-state{color:#a65c00}.is-expired .cosmetics-expiry-state{color:var(--danger)}
@media(max-width:1000px){.cosmetics-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cosmetics-batch-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:768px){body[data-page="products"] .content,body[data-page="stock"] .content{max-width:100vw;overflow-x:hidden}.cosmetics-form-grid{grid-template-columns:1fr}.cosmetics-form-grid .inventory-field-wide{grid-column:auto}.cosmetics-form-title strong{font-size:13px}.cosmetics-form-title small{font-size:10px;line-height:1.35}.cosmetics-image-upload{grid-template-columns:74px minmax(0,1fr)}.cosmetics-image-preview{width:74px;height:74px;border-radius:14px}.cosmetics-filter-row{grid-template-columns:1fr 1fr}.cosmetics-filter-row select{width:100%;min-width:0;font-size:16px}.cosmetics-product-card{padding:12px}.cosmetics-card-meta{font-size:9px}.cosmetics-variant-chips span{font-size:9px}.cosmetics-batch-ledger{padding:12px;border-radius:16px}.cosmetics-batch-cards{grid-template-columns:1fr;gap:8px}.cosmetics-batch-card{padding:11px}.cosmetics-batch-head strong{font-size:11px}.cosmetics-batch-head small,.cosmetics-batch-head>span{font-size:9px}.cosmetics-batch-metrics small{font-size:8px}.cosmetics-batch-metrics b{font-size:10px}.cosmetics-batch-foot{font-size:8px}.cosmetics-batch-details input,.cosmetics-batch-details select{font-size:16px}.cosmetics-pos-avatar{width:38px;height:38px}.pos-product-copy h3{font-size:11px!important}.pos-product-copy p{font-size:9px!important}}
/* Cosmetics C1 stock safety */
.cosmetics-pos-stock-stack{display:grid;justify-items:end;gap:3px;min-width:0}.cosmetics-expired-stock{display:inline-flex;align-items:center;padding:2px 6px;border-radius:999px;background:#fff0f0;color:#b52f2f;font-size:8px;font-weight:850;white-space:nowrap}
@media(max-width:768px){.cosmetics-expired-stock{font-size:10px}.cosmetics-card-meta{font-size:10px}.cosmetics-variant-chips span{font-size:10px}.cosmetics-batch-head strong{font-size:12px}.cosmetics-batch-head small,.cosmetics-batch-head>span{font-size:10px}.cosmetics-batch-metrics small{font-size:9px}.cosmetics-batch-metrics b{font-size:11px}.cosmetics-batch-foot{font-size:9px}.pos-product-copy h3{font-size:12px!important}.pos-product-copy p{font-size:10px!important}}

/* Cosmetics C1.1: standardized taxonomy controls */
.cosmetics-filter-row{grid-template-columns:repeat(3,minmax(0,220px))}
.cosmetics-product-form select{width:100%;min-height:44px}
@media(max-width:768px){
  .cosmetics-filter-row{grid-template-columns:1fr 1fr}
  #cosmeticsSubcategoryFilter{grid-column:1/-1}
}