/* =========================================================================
   Digitalshop CRM — Design Tokens (from design system)
   ========================================================================= */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  --bg-base:       #0B0D12;
  --bg-panel:      #13161D;
  --bg-raised:     #1A1E27;
  --bg-hover:      rgba(255, 255, 255, 0.03);
  --bg-active:     rgba(99, 102, 241, 0.10);
  --fg-primary:    #ECEEF3;
  --fg-secondary:  #B4BAC6;
  --fg-muted:      #6B7280;
  --fg-disabled:   #3F4451;
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default:rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --border-focus:  #6366F1;
  --accent:        #6366F1;
  --accent-hover:  #7C7FF3;
  --accent-press:  #5457D9;
  --accent-soft:   rgba(99, 102, 241, 0.15);
  --accent-ring:   rgba(99, 102, 241, 0.32);
  --status-new:        #94A3B8;
  --status-confirmed:  #3B82F6;
  --status-preparing:  #F59E0B;
  --status-shipped:    #8B5CF6;
  --status-completed:  #10B981;
  --status-cancelled:  #F43F5E;
  --status-new-soft:        rgba(148, 163, 184, 0.12);
  --status-confirmed-soft:  rgba(59, 130, 246, 0.14);
  --status-preparing-soft:  rgba(245, 158, 11, 0.14);
  --status-shipped-soft:    rgba(139, 92, 246, 0.14);
  --status-completed-soft:  rgba(16, 185, 129, 0.14);
  --status-cancelled-soft:  rgba(244, 63, 94, 0.14);
  --credit:  #10B981;
  --debit:   #F43F5E;
  --warning: #F59E0B;
  --danger:  #F43F5E;
  --success: #10B981;
  --bank-privat: #5A9C32;
  --bank-mono:   #000000;
  --bank-pumb:   #E63946;
  --bank-oschad: #1E5F3B;
  --font-ui:   "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --fs-xs:  11px; --fs-sm: 12px; --fs-base: 13px; --fs-md: 14px;
  --fs-lg: 16px;  --fs-xl: 20px; --fs-2xl: 24px;  --fs-3xl: 32px;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --lh-tight: 1.2; --lh-snug: 1.35; --lh-base: 1.45; --lh-flat: 1.0;
  --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-caps: 0.04em;
  --sp-1: 4px; --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 12px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.25);
  --shadow-2: 0 8px 24px rgba(0,0,0,.5), 0 24px 64px rgba(0,0,0,.4);
  --shadow-focus: 0 0 0 3px var(--accent-ring);
  --sidebar-w:   240px;
  --topbar-h:    56px;
  --tabbar-h:    64px;
  --tabbar-total: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  --sidepanel-w: 480px;
  --ease: cubic-bezier(.2, 0, 0, 1);
  --dur-fast: 120ms; --dur-base: 150ms; --dur-slow: 200ms;
}

/* ── Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  background: var(--bg-base);
  color: var(--fg-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; color: inherit; font: inherit; }
svg { display: block; flex-shrink: 0; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.credit { color: var(--credit); }
.debit  { color: var(--debit); }

/* ── Status chips ─────────────────────────────────────────────────── */
.status-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-medium); white-space: nowrap;
}
.status-chip::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.status-new             { color: var(--status-new);       background: var(--status-new-soft); }
.status-preparing       { color: var(--status-preparing);  background: var(--status-preparing-soft); }
.status-shipped         { color: var(--status-shipped);    background: var(--status-shipped-soft); }
.status-completed       { color: var(--status-completed);  background: var(--status-completed-soft); }
.status-cancelled       { color: var(--status-cancelled);  background: var(--status-cancelled-soft); }
.status-waiting-reply   { color: #60A5FA; background: rgba(96,165,250,.14); }
.status-processing      { color: #3B82F6; background: rgba(59,130,246,.14); }
.status-at-branch       { color: #6366F1; background: rgba(99,102,241,.14); }
.status-awaiting-supply { color: #F97316; background: rgba(249,115,22,.14); }
.status-client-thinking { color: #9CA3AF; background: rgba(156,163,175,.14); }
.status-ttn-ready       { color: #06B6D4; background: rgba(6,182,212,.14); }

/* ── Scrollbar ────────────────────────────────────────────────────── */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }
*::-webkit-scrollbar-track { background: transparent; }

/* ── Light theme ──────────────────────────────────────────────────── */
.light-theme {
  --bg-base:        #F4F5F8;
  --bg-panel:       #FFFFFF;
  --bg-raised:      #FFFFFF;
  --bg-hover:       rgba(0, 0, 0, 0.03);
  --bg-active:      rgba(99, 102, 241, 0.10);
  --fg-primary:     #0F1419;
  --fg-secondary:   #4A5160;
  --fg-muted:       #8A93A2;
  --fg-disabled:    #C8CDD6;
  --border-subtle:  rgba(15, 20, 25, 0.06);
  --border-default: rgba(15, 20, 25, 0.10);
  --border-strong:  rgba(15, 20, 25, 0.16);
}

/* ── App layout ───────────────────────────────────────────────────── */
#app { display: flex; height: 100dvh; overflow: hidden; background: var(--bg-base); }
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; width: 0; }

/* ── Animations ───────────────────────────────────────────────────── */
@keyframes slideIn   { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideUp   { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes fadeIn    { from { opacity: 0; } to { opacity: 1; } }
@keyframes shimmer   { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── Skeleton ─────────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--bg-panel) 25%, var(--bg-raised) 50%, var(--bg-panel) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--r-sm);
}

/* ── Toast ────────────────────────────────────────────────────────── */
.toast-wrap {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; align-items: center; z-index: 500;
  pointer-events: none;
}
.toast {
  background: var(--bg-raised); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); padding: 10px 18px;
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  box-shadow: var(--shadow-1); animation: fadeIn 150ms var(--ease);
  pointer-events: all; white-space: nowrap;
}
.toast-success { color: var(--credit); border-color: rgba(16,185,129,.3); }
.toast-error   { color: var(--danger); border-color: rgba(244,63,94,.3); }

/* ── Mobile ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .main { padding-bottom: var(--tabbar-total); }
  .toast-wrap { bottom: calc(var(--tabbar-total) + 12px); }
}