*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.hidden { display: none !important; }

/* ── Offline Banner ── */

.offline-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  padding: 10px 16px;
  background: #d32f2f;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.offline-banner svg {
  flex-shrink: 0;
}

/* ── Splash Screen ── */

.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--bg, #f5f5f0);
  transition: opacity 0.3s ease;
}

.splash-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}

.splash-logo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
}

.splash-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: -0.3px;
}

.splash-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #e5e5e5;
  border-top-color: #c8a951;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

:root {
  --bg: #f5f5f0;
  --surface: #ffffff;
  --text: #1a1a1a;
  --text-secondary: #6b7280;
  --primary: #1a1a1a;
  --primary-light: #f0ebe0;
  --accent: #d4a017;
  --accent-light: #fdf6e3;
  --danger: #dc2626;
  --danger-light: #fee2e2;
  --warning: #d97706;
  --warning-light: #fef3c7;
  --success: #16a34a;
  --success-light: #dcfce7;
  --border: #e2e0d8;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);
  --radius: 12px;
  --radius-sm: 8px;
  --nav-height: 64px;
  --header-height: 60px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e0e0e;
    --surface: #1a1a1a;
    --text: #f5f5f0;
    --text-secondary: #9ca3af;
    --primary: #f5f5f0;
    --primary-light: #2a2520;
    --accent: #d4a017;
    --accent-light: #2a2510;
    --border: #2d2d2a;
    --danger-light: #3b1c1c;
    --warning-light: #3b2e10;
    --success-light: #1a3320;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5);
  }
}

html {
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  height: 100%;
  height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  user-select: none;
  -webkit-user-select: none;
}

/* ── Header ── */

.app-header {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  z-index: 10;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-logo {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

.app-header h1 {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.3px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.header-actions button {
  background: none;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  padding: 8px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  transition: background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-actions button:hover {
  background: var(--border);
}

/* ── Stats Bar ── */

#stats-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 12px 16px;
  flex-shrink: 0;
}

.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: var(--shadow);
}

.stat strong {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
}

.stat span {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.2;
  word-break: keep-all;
  white-space: nowrap;
}

.stat-warn strong {
  color: var(--warning);
}

.stat-danger strong {
  color: var(--danger);
}

.stat[data-filter]:not([data-filter="none"]) {
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.stat[data-filter]:not([data-filter="none"]):active {
  transform: scale(0.95);
}

.stat-active {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent), var(--shadow) !important;
}

.stat-warn.stat-active {
  border-color: var(--warning) !important;
  box-shadow: 0 0 0 2px var(--warning), var(--shadow) !important;
}

.stat-danger.stat-active {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 2px var(--danger), var(--shadow) !important;
}

.stat-cat strong {
  font-size: 1rem;
  letter-spacing: 2px;
}
.stat-cat span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-cat.stat-active {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px var(--primary), var(--shadow) !important;
}

/* ── Views ── */

.view {
  display: none;
}

.view.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px));
  animation: viewFadeIn 0.25s ease-out;
}

@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── View Loading Spinner ── */

.view-loader {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(245, 245, 240, 0.6);
  backdrop-filter: blur(2px);
  opacity: 1;
  transition: opacity 0.2s;
  pointer-events: all;
}

.view-loader.fade-out {
  opacity: 0;
  pointer-events: none;
}

.view-loader-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Search ── */

.search-bar {
  padding: 0 16px 12px;
  flex-shrink: 0;
}

.search-row {
  display: flex;
  gap: 8px;
}

.search-row input {
  flex: 1;
  min-width: 0;
}

.search-bar input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.15s;
}

.search-bar input:focus {
  border-color: var(--accent);
}

.search-bar input::placeholder {
  color: var(--text-secondary);
}

/* ── Product List ── */

#product-list {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  padding: 0 16px 16px;
  display: block;
}

.product-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 10px 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow);
  transition: transform 0.15s, box-shadow 0.15s;
  border-left: 4px solid var(--success);
  margin-bottom: 8px;
  cursor: pointer;
}

.product-card:active {
  transform: scale(0.98);
}

.product-card.stock-low {
  border-left-color: var(--warning);
}

.product-card.stock-out {
  border-left-color: var(--danger);
  opacity: 0.75;
}

.product-avatar {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--accent-light);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.78rem;
  flex-shrink: 0;
  overflow: hidden;
}
.product-avatar.has-image {
  background: transparent;
  padding: 0;
}
.product-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-info {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

.product-name {
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-barcode {
  display: block;
  font-size: 0.68rem;
  color: var(--text-secondary);
  letter-spacing: 0.3px;
  margin-top: 1px;
}

.product-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  color: var(--text-primary);
  font-weight: 500;
  margin-top: 1px;
}

.product-category-badge {
  display: inline-block;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 0.56rem;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 5px;
  white-space: nowrap;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.stock-badge {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 1px 5px;
  border-radius: 4px;
  display: inline-block;
  flex-shrink: 0;
  white-space: nowrap;
}

.stock-badge.stock-ok {
  background: var(--success-light);
  color: var(--success);
}

.stock-badge.stock-low {
  background: var(--warning-light);
  color: var(--warning);
}

.stock-badge.stock-out {
  background: var(--danger-light);
  color: var(--danger);
}

/* ── Stock +/- Buttons ── */

.product-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.product-actions button {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s, transform 0.1s;
}

.product-actions button:active:not(:disabled) {
  transform: scale(0.9);
  background: var(--accent-light);
}

.product-actions button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.stock-count {
  font-size: 1rem;
  font-weight: 700;
  min-width: 24px;
  text-align: center;
}
.product-card.stock-low .stock-count { color: var(--warning); }
.product-card.stock-out .stock-count { color: var(--danger); }

/* ── Scanner View ── */

#view-scan {
  align-items: center;
  padding: 12px;
  gap: 12px;
}

#scanner-viewport {
  width: 100%;
  flex: 1;
  min-height: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
}

#scanner-viewport video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}

.scan-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-align: center;
}

.scan-tip {
  font-size: 0.7rem;
  color: var(--accent);
  text-align: center;
  margin: -4px 0 0;
  padding: 0;
}

#scan-result {
  position: fixed;
  bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + 12px);
  left: 12px;
  right: 12px;
  z-index: 40;
  max-width: 400px;
  margin: 0 auto;
}

#scan-result.hidden {
  display: none;
}

/* ── Scan Product Hero ── */

.scan-product-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  padding: 20px 16px 0;
  text-align: center;
  gap: 6px;
  animation: heroIn 0.4s ease-out;
}

@keyframes heroIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.scan-hero-avatar {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: var(--accent-light);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.5rem;
  margin-bottom: 4px;
  border: 2px solid var(--accent);
}

.scan-hero-name {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
  max-width: 280px;
}

.scan-hero-meta {
  font-size: 0.75rem;
  color: var(--text-secondary);
  letter-spacing: 0.3px;
}

.scan-hero-stock {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 6px 0 2px;
}

.scan-hero-stock-num {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
}

.scan-hero-stock-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* ── Scan Result Cards ── */

.scan-found,
.scan-not-found,
.scan-error {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
  box-shadow: var(--shadow-lg);
}

.scan-found h3 {
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.scan-stock {
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.scan-stock strong {
  color: var(--text);
  font-size: 1.3rem;
}

.scan-not-found {
  border-color: var(--warning);
  animation: shake 0.4s ease-in-out;
}

.scan-not-found p {
  color: var(--warning);
  font-weight: 600;
  margin-bottom: 4px;
}

.scan-not-found strong {
  font-size: 0.9rem;
  display: block;
  margin-bottom: 16px;
  word-break: break-all;
  color: var(--text-secondary);
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.scan-error {
  border-color: var(--danger);
}

.scan-error p {
  color: var(--danger);
  font-weight: 600;
}

.scan-error-detail {
  font-size: 0.75rem;
  color: var(--text-secondary) !important;
  font-weight: 400 !important;
  margin-top: 8px;
}

.scan-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.scan-actions-row {
  display: flex;
  gap: 8px;
}

.scan-actions-row button {
  flex: 1;
}

/* ── Add Product View ── */

#view-add {
  padding: 0;
  gap: 0;
}

#add-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 16px;
}

#view-add h2 {
  font-size: 1.2rem;
  font-weight: 700;
}

#view-settings {
  padding: 24px 16px;
  padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + 24px);
  gap: 20px;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

#settings-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#view-settings h2 {
  font-size: 1.2rem;
  font-weight: 700;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
}

.form-group input,
.form-group textarea {
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--accent);
  outline: none;
}
.form-group textarea {
  resize: vertical;
  line-height: 1.5;
}

.barcode-input-row {
  display: flex;
  gap: 8px;
}

.barcode-input-row input {
  flex: 1;
}

.btn-scan-inline {
  padding: 12px 16px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent-light);
  color: var(--accent);
  font-size: 1.1rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}

.btn-scan-inline:active {
  background: var(--accent);
  color: #fff;
}

/* ── Duplicate Barcode Alert ── */

.barcode-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--warning);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--warning) 10%, var(--surface));
  animation: alertIn 0.35s ease;
}

@keyframes alertIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.barcode-alert-icon {
  font-size: 1.8rem;
  line-height: 1;
  flex-shrink: 0;
}

.barcode-alert-body {
  flex: 1;
  min-width: 0;
}

.barcode-alert-title {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--warning);
  margin-bottom: 2px;
}

.barcode-alert-text {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.barcode-alert-text strong {
  color: var(--text);
}

.barcode-alert-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.barcode-alert-actions button {
  flex: 1;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition: background 0.15s;
}

.barcode-alert-actions button.alert-btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.barcode-alert-actions button:active {
  opacity: 0.8;
}

/* ── Buttons ── */

.btn-primary {
  padding: 14px 24px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}

.btn-primary:active {
  transform: scale(0.97);
  opacity: 0.9;
}

.btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-primary.btn-danger {
  background: var(--danger);
}

.btn-primary.btn-success {
  background: var(--success, #2ecc71);
}

.btn-secondary {
  padding: 14px 24px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.btn-secondary:active {
  transform: scale(0.97);
  background: var(--border);
}

.btn-reset {
  margin-top: auto;
  padding: 12px;
  background: none;
  border: 1px solid var(--danger);
  border-radius: var(--radius-sm);
  color: var(--danger);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-reset:active {
  background: var(--danger-light);
}

/* ── Bottom Nav ── */

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom, 0);
  z-index: 50;
}

.nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 20px;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: color 0.15s;
  border-radius: var(--radius-sm);
}

.nav-btn .nav-icon {
  width: 22px;
  height: 22px;
  transition: transform 0.15s;
}

.nav-btn.active {
  color: var(--accent);
}

.nav-btn.active .nav-icon {
  transform: scale(1.15);
}

.nav-btn:active .nav-icon {
  transform: scale(0.9);
}

/* ── Stock Confirm Modal ── */

.stock-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: overlayIn 0.2s ease;
}

.stock-confirm-overlay.hidden {
  display: none;
}
#stock-confirm,
#barcode-exists {
  z-index: 200;
}

@keyframes overlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.stock-confirm-sheet {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  padding: 24px 24px calc(env(safe-area-inset-bottom, 0px) + 20px);
  animation: sheetUp 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  box-sizing: border-box;
  margin: 0 auto;
}

@keyframes sheetUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.stock-confirm-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.confirm-avatar {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--accent-light);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.confirm-avatar-danger {
  background: #fef2f2;
  color: var(--danger);
  font-size: 1.3rem;
}

.confirm-title {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
}

.confirm-subtitle {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.stock-confirm-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 16px 0;
  margin-bottom: 8px;
}

.confirm-stock-box {
  text-align: center;
}

.confirm-stock-box .label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.confirm-stock-box .value {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}

.confirm-arrow {
  font-size: 1.4rem;
  color: var(--text-secondary);
}

.confirm-stock-box .value.text-danger { color: var(--danger); }
.confirm-stock-box .value.text-success { color: var(--success); }

.stock-confirm-actions {
  display: flex;
  gap: 10px;
}

.stock-confirm-actions button {
  flex: 1;
  padding: 14px;
  font-size: 0.9rem;
  font-weight: 600;
}

/* ── Product Edit Sheet ── */

.edit-sheet {
  max-height: 85vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.edit-sheet form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.edit-sheet-handle {
  width: 40px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 0 auto 16px;
}

/* ── Full-screen Edit Modal ── */
.edit-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  animation: editFsIn 0.25s ease;
}
.edit-fullscreen.hidden { display: none; }
@keyframes editFsIn {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.edit-fs-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.edit-fs-back {
  background: none;
  border: none;
  color: var(--text);
  padding: 6px;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.edit-fs-back:active { background: var(--border); }
.edit-fs-title {
  flex: 1;
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.edit-fs-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.edit-fs-btn {
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 7px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}
.edit-fs-btn-sell { background: var(--success); color: #fff; }
.edit-fs-btn-del { background: transparent; color: var(--danger); padding: 7px 8px; }
.edit-fullscreen .modal-tabs {
  flex-shrink: 0;
  padding: 0;
  margin: 0;
  background: var(--surface);
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  overflow: visible;
}
.edit-fullscreen .modal-tabs .modal-tab {
  flex: 1;
  text-align: center;
  white-space: nowrap;
  font-size: 0.78rem;
  padding: 12px 14px;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--text-secondary);
  transition: color 0.15s, border-color 0.15s;
}
.edit-fullscreen .modal-tabs .modal-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: none;
}
.edit-tabs-5 .modal-tab {
  font-size: 0.68rem;
  padding: 10px 4px;
  letter-spacing: -0.01em;
}
@media (max-width: 380px) {
  .edit-tabs-5 .modal-tab { font-size: 0.62rem; padding: 9px 2px; }
}
.edit-fs-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
}
.edit-fs-body form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.edit-fs-body .history-list {
  max-height: none;
}

.edit-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.image-preview-box {
  width: 100%;
  height: 120px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 8px;
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 0.8rem;
}
.image-preview-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.image-gallery-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 8px;
  min-height: 0;
}
.image-gallery-preview:empty {
  display: none;
}
.gallery-thumb {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}
.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-thumb-new {
  border: 2px dashed var(--primary);
  border-radius: var(--radius-sm);
}
.gallery-thumb-new .preview-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(220, 38, 38, 0.9);
  color: #fff;
  border: none;
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 2;
}
.gallery-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(220, 38, 38, 0.85);
  color: #fff;
  border: none;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.gallery-remove:hover {
  background: #dc2626;
}
.gallery-empty {
  font-size: 0.8rem;
  color: var(--text-secondary);
  padding: 8px 0;
}

.edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.edit-actions button {
  flex: 1;
  padding: 13px 10px;
  font-size: 0.85rem;
}

.btn-edit-delete {
  color: var(--danger) !important;
  border-color: var(--danger) !important;
}

.btn-edit-delete:active {
  background: var(--danger-light) !important;
}

.btn-edit-history {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

.btn-edit-history:active {
  background: var(--accent-light) !important;
}

/* ── Product History Modal ── */

.history-list {
  max-height: 50vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.history-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.history-entry:last-child {
  border-bottom: none;
}

.history-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}

.history-details {
  flex: 1;
  min-width: 0;
}

.history-details .history-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}

.history-details .history-meta {
  font-size: 0.72rem;
  color: var(--text-secondary);
}
.history-details .history-note {
  font-size: 0.7rem;
  color: var(--accent);
  margin-top: 2px;
}
.history-stock-after {
  font-size: 0.65rem;
  color: var(--text-secondary);
  text-align: right;
  margin-top: 2px;
}

.history-qty {
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
}

.history-qty.qty-in { color: var(--success); }
.history-qty.qty-out { color: var(--danger); }
.history-qty.qty-edit { color: var(--accent); }

.history-empty {
  text-align: center;
  padding: 24px;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

/* History subtabs */
.history-subtabs {
  display: flex;
  gap: 0;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.history-subtab {
  flex: 1;
  padding: 10px 0;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
}
.history-subtab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.history-subtab-content {
  display: none;
}
.history-subtab-content.active {
  display: block;
}

/* Change entries */
.change-entry .history-entry,
.change-entry {
  align-items: flex-start;
}
.icon-change {
  background: rgba(99, 102, 241, 0.15);
  color: #818cf8;
}
.change-diff {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 0.78rem;
  flex-wrap: wrap;
}
.change-old {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  padding: 2px 8px;
  border-radius: 4px;
  text-decoration: line-through;
  word-break: break-all;
}
.change-arrow {
  color: var(--text-secondary);
  font-size: 0.7rem;
  flex-shrink: 0;
}
.change-new {
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
  padding: 2px 8px;
  border-radius: 4px;
  word-break: break-all;
}
.change-reverted {
  opacity: 0.5;
}
.change-reverted-badge {
  display: inline-block;
  font-size: 0.65rem;
  color: var(--text-secondary);
  background: var(--surface);
  padding: 1px 6px;
  border-radius: 4px;
  margin-top: 3px;
  border: 1px solid var(--border);
}
.btn-revert-change {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: all 0.15s;
}
.btn-revert-change:hover {
  background: var(--accent);
  color: #fff;
}
.btn-warning {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* ── Category Sidebar ── */

.cat-sidebar-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.cat-sidebar-overlay.open {
  opacity: 1;
}
.cat-sidebar-overlay.hidden {
  display: none;
}

.cat-sidebar {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  max-width: 85vw;
  height: 100%;
  background: var(--bg);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.cat-sidebar-overlay.open .cat-sidebar {
  transform: translateX(0);
}

.cat-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.cat-sidebar-header h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}
.cat-sidebar-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.cat-sidebar-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0;
}

.cat-sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.cat-sidebar-item:last-child {
  border-bottom: none;
}
.cat-sidebar-item:active {
  background: rgba(255, 255, 255, 0.04);
}
.cat-sidebar-item.active {
  background: rgba(var(--primary-rgb, 245, 166, 35), 0.12);
  border-left: 3px solid var(--primary);
}

.cat-sidebar-name {
  flex: 1;
  min-width: 0;
  font-size: 0.88rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cat-sidebar-badges {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.cat-sidebar-badge {
  font-size: 0.68rem;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.cat-sidebar-badge-count {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
}
.cat-sidebar-badge-stock {
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
}

/* ── Toast ── */

.toast {
  position: fixed;
  top: calc(var(--header-height) + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-200%);
  opacity: 0;
  padding: 12px 24px;
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-weight: 600;
  z-index: 9999;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  pointer-events: none;
  white-space: normal;
  max-width: calc(100vw - 32px);
  text-align: center;
  box-shadow: var(--shadow-lg);
}

.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.toast-success {
  background: var(--success);
  color: #fff;
}

.toast-error {
  background: var(--danger);
  color: #fff;
}

.toast-info {
  background: var(--accent);
  color: #fff;
}

/* ── Log View ── */

#view-log {
  padding: 0;
}

.log-header {
  padding: 16px 16px 0;
  flex-shrink: 0;
}

.log-header h2 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.log-filters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding-bottom: 12px;
}

.log-filter {
  padding: 8px 4px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  transition: all 0.15s;
}

.log-filter.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

#log-list {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  padding: 0 16px 16px;
}

.log-date-header {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  padding: 12px 0 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

.log-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.log-entry:last-child {
  border-bottom: none;
}

.log-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.log-icon svg {
  width: 18px;
  height: 18px;
}

.log-in .log-icon {
  background: var(--success-light);
  color: var(--success);
}

.log-out .log-icon {
  background: var(--danger-light);
  color: var(--danger);
}

.log-edit .log-icon {
  background: var(--accent-light);
  color: var(--accent);
}

.log-delete .log-icon {
  background: var(--danger-light);
  color: var(--danger);
}

.log-details {
  flex: 1;
  min-width: 0;
}

.log-product {
  font-size: 0.85rem;
  font-weight: 600;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.log-meta {
  font-size: 0.7rem;
  color: var(--text-secondary);
  display: block;
  margin-top: 2px;
}

.log-qty {
  font-size: 1rem;
  font-weight: 700;
  flex-shrink: 0;
  min-width: 40px;
  text-align: right;
}

.log-qty.log-in {
  color: var(--success);
}

.log-qty.log-out {
  color: var(--danger);
}

.log-cancel .log-icon {
  background: #fef2f2;
  color: #dc2626;
}

.log-qty.log-cancel {
  color: var(--danger);
  text-decoration: line-through;
}

.log-entry-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin-left: auto;
  flex-shrink: 0;
}

.btn-log-delete {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  opacity: 0.3;
  transition: opacity 0.15s, color 0.15s;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  border-radius: 50%;
}

.btn-log-delete:hover,
.btn-log-delete:active {
  opacity: 1;
  color: #ef5350;
  background: rgba(239, 83, 80, 0.1);
}

/* ── Scroll Loader ── */
.scroll-loader {
  text-align: center;
  padding: 16px;
  color: var(--text-secondary);
  font-size: 0.82rem;
}

/* ── Empty State ── */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  color: var(--text-secondary);
}

.empty-icon {
  font-size: 3rem;
  margin-bottom: 12px;
}

.empty-state p {
  font-size: 0.95rem;
}

/* ── Scrollbar ── */

::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}

/* ── Login View ── */

.login-view {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 24px;
  background: var(--bg);
}

.login-view.hidden { display: none; }

.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 24px;
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.login-logo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 16px;
}

.login-card h1 {
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.login-subtitle {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.login-card .form-group {
  text-align: left;
}

.login-error {
  color: var(--danger);
  font-size: 0.8rem;
  margin-top: 12px;
  min-height: 1em;
}

.remember-me {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}
.remember-me input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}

.login-dev-hint {
  margin-top: 20px;
  padding: 12px 14px;
  background: rgba(200, 169, 81, 0.08);
  border: 1px dashed rgba(200, 169, 81, 0.35);
  border-radius: var(--radius-sm);
  text-align: left;
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.login-dev-hint strong {
  color: var(--accent);
}

.login-dev-hint code {
  background: rgba(0,0,0,0.06);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.74rem;
  font-family: monospace;
}

/* ── App Shell ── */

.app-shell {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}

.app-shell.hidden { display: none; }

.user-name {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 600;
  margin-right: 4px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.user-name:hover {
  background: var(--surface);
  color: var(--accent);
}

/* ── Form Row (side by side) ── */

.form-row {
  display: flex;
  gap: 10px;
}

.form-row .form-group {
  flex: 1;
  min-width: 0;
}

/* ── Sale Modal ── */

.sale-fs-hero {
  flex-shrink: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.sale-hero {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sale-hero strong {
  display: block;
  font-size: 0.95rem;
}

.sale-hero .product-meta {
  font-size: 0.75rem;
}

.sale-discount-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 12px 0;
}

.discount-chip {
  padding: 10px 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: all 0.15s;
}

.discount-chip.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.discount-chip.chip-damage {
  border-color: var(--danger);
  color: var(--danger);
}

.discount-chip.chip-damage.active {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}

.quick-stock-chips {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.stock-chip {
  flex: 1;
  padding: 10px 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
}
.stock-chip.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.sale-total {
  text-align: center;
  font-size: 1.1rem;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}

.sale-total strong {
  font-size: 1.5rem;
  color: var(--accent);
}

/* ── Modal Tabs ── */
.modal-tabs {
  display: flex;
  gap: 0;
}
.modal-tab {
  flex: 1;
  border: none;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

/* Pill style (only inside bottom-sheets) */
.stock-confirm-sheet .modal-tabs {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 16px;
}
.stock-confirm-sheet .modal-tab {
  flex: 1;
  padding: 10px 0;
  border: none;
  background: var(--bg);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.stock-confirm-sheet .modal-tab.active {
  background: var(--accent);
  color: #fff;
}
.modal-tab-content {
  display: none;
}
.modal-tab-content.active {
  display: block;
}
.edit-tab-content {
  display: none;
}
.edit-tab-content.active {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#add-description, #edit-description {
  width: 100%;
  resize: vertical;
  font-family: inherit;
  font-size: 0.88rem;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}
#add-description:focus, #edit-description:focus {
  outline: none;
  border-color: var(--accent);
}

/* ── Stock Update Tab ── */
.su-stock-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 0 16px;
}
.su-stock-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  padding: 12px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
}
.su-stock-box-new {
  border-color: var(--accent);
}
.su-stock-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.su-stock-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent);
}
.su-stock-arrow {
  font-size: 1.4rem;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.su-delta-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.su-delta-btn {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 1.4rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
}
.su-delta-btn:active {
  transform: scale(0.95);
}
.su-minus { color: var(--danger); border-color: var(--danger); }
.su-plus { color: var(--success); border-color: var(--success); }
.su-delta-row input {
  flex: 1;
  text-align: center;
  font-size: 1.3rem;
  font-weight: 700;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  min-width: 0;
}
.su-quick-chips {
  margin-top: 10px;
}
.btn-link-sm {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.su-batches {
  background: var(--surface-alt, #111);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px;
  margin-bottom: 8px;
  max-height: 160px;
  overflow-y: auto;
}
.su-batches-tab {
  padding: 0;
}
.su-batch-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--border);
}
.su-batch-row:last-child { border-bottom: none; }
.su-batch-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 44px;
  flex-shrink: 0;
}
.su-batch-qty-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  line-height: 1;
}
.su-batch-qty-value {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--accent);
  line-height: 1.2;
}
.su-batch-qty-value small { font-weight: 400; color: var(--text-secondary); font-size: 0.7em; }
.su-batch-info { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px; }
.su-batch-cost { font-weight: 600; font-size: 0.85rem; }
.su-batch-meta { color: var(--text-secondary); font-size: 0.72rem; }
.su-batch-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; }
.btn-batch-action {
  background: none;
  border: 1px solid var(--border);
  padding: 8px;
  cursor: pointer;
  color: var(--text-secondary);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.btn-batch-action:hover { background: rgba(255,255,255,0.06); }
.btn-batch-edit:hover { color: var(--accent); }
.btn-batch-del:hover { color: var(--danger); }
.su-batch-empty { text-align: center; color: var(--text-secondary); font-size: 0.8rem; padding: 12px; }
.su-batch-depleted { opacity: 0.4; }
.su-batch-depleted .su-batch-qty-value { color: var(--text-secondary); }

/* ── Users View ── */

.users-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  flex-shrink: 0;
}

.users-header h2 {
  font-size: 1.1rem;
  font-weight: 700;
}

#view-users {
  padding: 0;
}

#user-list {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px 16px;
}

.user-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}

.user-card-info strong {
  display: block;
  font-size: 0.9rem;
}

.user-card-info span {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.user-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-user-edit,
.btn-user-delete {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  opacity: 0.6;
  transition: opacity 0.15s;
  color: var(--text);
  display: flex;
  align-items: center;
}

.btn-user-edit:active,
.btn-user-delete:active {
  opacity: 1;
}

.btn-user-edit:hover { opacity: 0.9; color: var(--accent); }
.btn-user-delete:hover { opacity: 0.9; color: #ef5350; }

.badge-you {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-light);
  padding: 4px 10px;
  border-radius: 12px;
}

#user-edit-modal { z-index: 150; }

.user-add-form {
  padding: 0 16px 12px;
}

.user-add-form.hidden { display: none; }

.user-add-form form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.btn-sm {
  padding: 10px 16px !important;
  font-size: 0.8rem !important;
}

/* ── Log emoji icon ── */

.log-icon-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.log-icon-circle svg {
  display: block;
}

.icon-in {
  background: #ecfdf5;
  color: #059669;
}

.icon-out {
  background: #fef2f2;
  color: #dc2626;
}

.icon-sale {
  background: #fffbeb;
  color: #d97706;
}

.icon-damage {
  background: #fce4ec;
  color: #c62828;
}

.log-damage .log-product,
.log-damage .log-meta {
  color: #c62828;
}

.log-qty.log-damage,
.history-qty.qty-damage {
  color: #c62828;
}

.icon-edit {
  background: #eff6ff;
  color: #2563eb;
}

.icon-delete {
  background: #fef2f2;
  color: #dc2626;
}

.icon-cancel {
  background: #fef2f2;
  color: #dc2626;
}

.btn-cancel-sale {
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid var(--danger);
  border-radius: 6px;
  background: transparent;
  color: var(--danger);
  cursor: pointer;
  margin-top: 4px;
  transition: all 0.15s;
}

.btn-cancel-sale:active {
  background: var(--danger);
  color: #fff;
}

/* ── Reports ── */
#view-reports {
  padding: 16px 16px 100px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.report-header {
  margin-bottom: 16px;
}

/* Report sub-tabs */
.report-tabs-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.report-tab {
  flex: 1;
  padding: 9px 0;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.report-tab.active {
  background: var(--primary);
  color: #1a1a2e;
  border-color: var(--primary);
  font-weight: 700;
}
.report-tab-content {
  display: none;
}
.report-tab-content.active {
  display: block;
}
.report-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 12px;
}
.report-date-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.report-date-presets {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.report-preset {
  padding: 8px 0;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.report-preset.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.report-custom-dates {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.report-custom-dates input[type="date"] {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 0.8rem;
}
.report-custom-dates span {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

/* Summary Cards */
.report-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}
.rcard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
  min-width: 0;
  gap: 8px;
}
.rcard-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rcard-icon svg {
  width: 16px;
  height: 16px;
}
.rcard-blue { background: rgba(33,150,243,0.12); color: #2196f3; }
.rcard-green { background: rgba(76,175,80,0.12); color: #4caf50; }
.rcard-purple { background: rgba(156,39,176,0.12); color: #9c27b0; }
.rcard-orange { background: rgba(255,152,0,0.12); color: #ff9800; }
.rcard-teal { background: rgba(0,188,212,0.12); color: #00bcd4; }
.rcard-cyan { background: rgba(0,150,136,0.12); color: #009688; }
.rcard-indigo { background: rgba(63,81,181,0.12); color: #3f51b5; }
.rcard-red { background: rgba(244,67,54,0.12); color: #f44336; }
.rcard-lime { background: rgba(139,195,74,0.12); color: #8bc34a; }
.rcard-emerald { background: rgba(16,185,129,0.12); color: #10b981; }
.rcard-indigo2 { background: rgba(103,58,183,0.12); color: #673ab7; }
.rcard-data {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  width: 100%;
}
.rcard-value {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.rcard-value-sub {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.rcard-label {
  font-size: 0.6rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-weight: 600;
  white-space: nowrap;
}

/* Chart sections */
.report-section {
  margin-bottom: 24px;
}
.report-section-title {
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text);
  padding-left: 10px;
  border-left: 3px solid var(--accent);
}
.report-chart-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  height: 260px;
  position: relative;
}
.report-chart-small {
  height: 220px;
}

/* Report Tables */
.report-table {
  margin-top: 12px;
  overflow-x: auto;
}
.report-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}
.report-table th {
  text-align: left;
  padding: 8px 10px;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.report-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.report-table td.mono {
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 0.7rem;
  color: var(--text-secondary);
}
.report-table tr:last-child td {
  border-bottom: none;
}

/* Infinite scroll sentinel (report tables) */
.report-infinite-sentinel {
  height: 2px;
  width: 100%;
  pointer-events: none;
}

.report-show-more {
  display: block;
  width: 100%;
  padding: 10px;
  margin-top: 8px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--accent);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.report-show-more:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

tr.report-deleted td {
  color: #ef5350;
  text-decoration: line-through;
  opacity: 0.7;
}

tr.report-product-link:hover td {
  background: rgba(0, 188, 212, 0.08);
  color: var(--accent);
}
tr.report-product-link td:first-child {
  position: relative;
}

tr.report-damage td {
  color: #c62828;
}

.report-pagination {
  display: flex;
  gap: 6px;
  padding: 12px 0 4px;
  flex-wrap: wrap;
}
.report-page-btn {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-light);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.report-page-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.report-page-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.sale-damage-badge {
  display: inline-block;
  padding: 1px 6px;
  font-size: 0.65rem;
  font-weight: 700;
  background: #c62828;
  color: #fff;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 4px;
}

@media (min-width: 768px) {
  .report-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Category Dropdown ── */
.cat-dropdown-group {
  position: relative;
}
.cat-dropdown-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  max-height: 200px;
  overflow-y: auto;
  z-index: 50;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.cat-dropdown-list.open {
  display: block;
}
.cat-dropdown-item {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text);
  transition: background 0.1s;
  border-bottom: 1px solid var(--border);
}
.cat-dropdown-item:last-child {
  border-bottom: none;
}
.cat-dropdown-item:hover,
.cat-dropdown-item:active {
  background: var(--accent-light);
}
.cat-dropdown-item.new-cat {
  color: var(--accent);
  font-weight: 600;
}
.cat-dropdown-item .cat-count {
  float: right;
  font-size: 0.72rem;
  color: var(--text-secondary);
  font-weight: 400;
}

/* ── Category Settings ── */
/* ── Settings Tabs ── */
.settings-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-bottom: 20px;
}
.settings-tab {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
}
.settings-tab.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.settings-tab-content.hidden {
  display: none !important;
}

.cat-settings-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 12px;
}
.cat-add-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.cat-add-row input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 0.9rem;
  outline: none;
  box-sizing: border-box;
}
.cat-add-row input:focus {
  border-color: var(--accent);
}
.cat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.cat-item-name {
  font-size: 0.85rem;
  flex: 1;
}
.cat-item-count {
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-right: 12px;
}
.cat-item-actions {
  display: flex;
  gap: 4px;
}
.cat-item-actions button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  opacity: 0.5;
  color: var(--text);
  display: flex;
  transition: opacity 0.15s;
}
.cat-item-actions button:hover {
  opacity: 1;
}
.cat-item-actions .cat-del:hover {
  color: #ef5350;
}

.cat-item-name {
  cursor: pointer;
  transition: color 0.15s;
}
.cat-item-name:hover {
  color: var(--accent);
}

.cat-products-list {
  max-height: 55vh;
  overflow-y: auto;
  padding: 4px 0;
}
.cat-product-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface);
  margin-bottom: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.cat-product-row:active {
  background: var(--border);
}
.cat-product-avatar {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-secondary);
  flex-shrink: 0;
  overflow: hidden;
}
.cat-product-avatar.has-img {
  background: transparent;
}
.cat-product-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}
.cat-product-info {
  flex: 1;
  min-width: 0;
}
.cat-product-info strong {
  display: block;
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cat-product-info span {
  font-size: 0.73rem;
  color: var(--text-secondary);
}
.cat-product-stock {
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
  min-width: 28px;
  text-align: right;
}
.cat-product-stock.stock-ok { color: var(--success); }
.cat-product-stock.stock-low { color: #ff9800; }
.cat-product-stock.stock-out { color: #ef5350; }
.cat-product-arrow {
  flex-shrink: 0;
  color: var(--text-secondary);
  opacity: 0.4;
}

/* Toggle Switch */
.toggle-row {
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  gap: 12px !important;
}
.toggle-row > label:first-child {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
  flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  inset: 0;
  background: #444;
  border-radius: 26px;
  cursor: pointer;
  transition: background 0.25s;
}
.toggle-slider::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.25s;
}
.toggle-switch input:checked + .toggle-slider {
  background: var(--primary);
}
.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(20px);
}

.product-fav-star {
  color: #f5a623;
  margin-right: 3px;
  font-size: 0.85em;
}

/* ── Stock Alerts Tab ── */
.alerts-tab-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: 12px;
  line-height: 1.4;
}
.alerts-empty {
  color: var(--text-secondary);
  font-size: 0.85rem;
  padding: 20px 0;
  text-align: center;
}
.alert-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.alert-item-product {
  flex: 1;
  min-width: 0;
}
.alert-item-product strong {
  display: block;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alert-item-barcode {
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-right: 6px;
}
.alert-stock-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  vertical-align: middle;
}
.alert-stock-in {
  background: #e8f5e9;
  color: #2e7d32;
}
.alert-stock-out {
  background: #ffebee;
  color: #c62828;
}
.alert-item-contact {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--text);
  min-width: 140px;
}
.alert-item-contact svg {
  flex-shrink: 0;
  color: var(--text-secondary);
}
.alert-item-date {
  font-size: 0.72rem;
  color: var(--text-secondary);
  white-space: nowrap;
  min-width: 100px;
  text-align: right;
}
.alert-item--notified {
  opacity: 0.55;
}
.alert-notified-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  background: #e0f2f1;
  color: #00796b;
  vertical-align: middle;
  margin-left: 4px;
}
.alert-item-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.alert-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
  text-decoration: none;
}
.alert-action-btn:hover {
  opacity: 0.85;
  transform: scale(1.08);
}
.alert-action-btn:disabled {
  pointer-events: none;
}
.alert-action-loading {
  position: relative;
  opacity: 0.7;
}
.alert-action-loading svg {
  visibility: hidden;
}
.alert-action-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: alertSpinner 0.6s linear infinite;
}
@keyframes alertSpinner {
  to { transform: rotate(360deg); }
}
.alert-action-wp {
  background: #25d366;
  color: #fff;
}
.alert-action-mail {
  background: #1e88e5;
  color: #fff;
}
.alert-action-mail svg {
  stroke: #fff;
}
.alert-item-del {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px;
  opacity: 0.5;
  transition: opacity 0.15s, color 0.15s;
  flex-shrink: 0;
}
.alert-item-del:hover {
  opacity: 1;
  color: #ef5350;
}

.cat-sidebar-fav {
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}

.header-alert-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  font-size: 0.6rem;
  font-weight: 700;
  text-align: center;
  border-radius: 8px;
  background: #ef5350;
  color: #fff;
  padding: 0 4px;
  pointer-events: none;
}
.alerts-tab-badge {
  display: inline-block;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  font-size: 0.6rem;
  font-weight: 700;
  text-align: center;
  border-radius: 8px;
  background: #ef5350;
  color: #fff;
  padding: 0 4px;
  vertical-align: middle;
  margin-left: 4px;
}

@media (max-width: 480px) {
  .alert-item { flex-direction: column; align-items: flex-start; gap: 4px; }
  .alert-item-contact { min-width: 0; }
  .alert-item-date { text-align: left; }
  .alert-item-actions { position: absolute; right: 0; top: 10px; }
  .alert-item { position: relative; padding-right: 80px; }
}