@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ════════════════════════════════════════════
   ROYAL FOCUS — QUOTEFLOW
   Design System: Corporate Premium v3
   Palette: Obsidian Sidebar · Clean Canvas · Crimson
   ════════════════════════════════════════════ */

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

:root {
  /* ── Brand ── */
  --red:         #C8102E;
  --red-dark:    #A00D23;
  --red-deeper:  #7A0919;
  --red-wash:    #FFF1F3;
  --red-tint:    #FFE0E5;
  --red-glow:    rgba(200,16,46,0.12);

  --ink:         #0D0D0D;
  --ink-80:      #1A1A1A;
  --ink-60:      #2E2E2E;

  /* ── Content Surface — clean, light, professional ── */
  --canvas:      #F1F2F5;
  --surface:     #FFFFFF;
  --surface-2:   #F8F8FB;
  --line:        #E5E6EB;
  --line-strong: #D1D3DC;
  --text:        #111318;
  --text-2:      #444854;
  --ghost:       #8C909C;

  /* ── Sidebar — Obsidian ── */
  --s-bg:        #111113;
  --s-mid:       #18181B;
  --s-line:      #27272A;
  --s-text:      #FAFAFA;
  --s-ghost:     #71717A;
  --s-hover:     rgba(255,255,255,0.05);
  --s-active:    rgba(200,16,46,0.15);
  --s-active-t:  #FF3B57;

  /* ── Status ── */
  --ok:          #16A34A;
  --ok-wash:     #F0FDF4;
  --ok-line:     #BBF7D0;
  --warn:        #B45309;
  --warn-wash:   #FFFBEB;
  --warn-line:   #FDE68A;
  --err:         #DC2626;
  --err-wash:    #FEF2F2;
  --err-line:    #FECACA;
  --info:        #1D4ED8;
  --info-wash:   #EFF6FF;
  --info-line:   #BFDBFE;
  --purple:      #7C3AED;
  --purple-wash: #F5F3FF;

  /* ── Aliases ── */
  --bg:            var(--canvas);
  --border:        var(--line);
  --muted:         var(--ghost);
  --accent:        var(--red);
  --accent-hover:  var(--red-dark);
  --accent-light:  var(--red-wash);
  --success:       var(--ok);
  --success-light: var(--ok-wash);
  --warning:       var(--warn);
  --warning-light: var(--warn-wash);
  --danger:        var(--err);
  --danger-light:  var(--err-wash);
  --radius:        var(--r);
  --radius-lg:     var(--r-lg);
  --shadow:        var(--e1);
  --shadow-md:     var(--e2);
  --shadow-lg:     var(--e4);

  /* ── Geometry ── */
  --sidebar-w:     256px;
  --sidebar-w-col: 64px;
  --r:             8px;
  --r-lg:          12px;
  --r-xl:          18px;

  /* ── Elevation ── */
  --e1: 0 1px 2px rgba(0,0,0,0.05), 0 1px 4px rgba(0,0,0,0.04);
  --e2: 0 2px 8px rgba(0,0,0,0.06), 0 4px 20px rgba(0,0,0,0.05);
  --e3: 0 4px 16px rgba(0,0,0,0.08), 0 16px 48px rgba(0,0,0,0.08);
  --e4: 0 8px 32px rgba(0,0,0,0.12), 0 24px 64px rgba(0,0,0,0.12);
}

/* ════ BASE ════ */
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--canvas);
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ════ LOADING ════ */
#loading-screen {
  position: fixed; inset: 0; z-index: 9999;
  background: #111113;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: #fff;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
#loading-screen::before {
  content: '';
  position: absolute;
  width: 80px; height: 80px; border-radius: 50%;
  border: 1px solid rgba(200,16,46,0.2);
  animation: pulse-ring 2s ease-in-out infinite;
}
#loading-screen.exiting {
  animation: loading-exit 0.45s cubic-bezier(0.4,0,1,1) forwards;
}
.loading-wordmark {
  font-size: 1.5rem; font-weight: 900;
  letter-spacing: -0.04em; margin-bottom: 0.35rem;
}
.loading-wordmark span { color: var(--red); }
.loading-sub { font-size: 0.78rem; color: rgba(255,255,255,0.3); }
.spinner {
  width: 28px; height: 28px;
  border: 2px solid rgba(200,16,46,0.15);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  margin-bottom: 2rem;
}

/* ════ AUTH ════ */
#auth-screen {
  min-height: 100vh; display: none;
  position: relative; overflow: hidden;
  background: #0D0D0F;
}
.auth-bg-left {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 20% 50%, #140408 0%, #0D0D0F 60%, #0C0C0E 100%);
  z-index: 0; overflow: hidden;
}
.auth-bg-left::before {
  content: '';
  position: absolute;
  width: 800px; height: 800px; border-radius: 50%;
  background: radial-gradient(circle, rgba(200,16,46,0.18) 0%, rgba(200,16,46,0.04) 45%, transparent 70%);
  bottom: -300px; left: -120px;
  animation: orb-drift 9s ease-in-out infinite alternate;
}
.auth-bg-left::after {
  content: '';
  position: absolute;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(200,16,46,0.08) 0%, transparent 70%);
  top: -120px; right: -80px;
  animation: orb-drift 14s ease-in-out infinite alternate-reverse;
}
.auth-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 48px 48px;
}
.auth-bg-right { display: none; }
.auth-split {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 100vh; position: relative; z-index: 1; width: 100%;
}
.auth-brand {
  display: flex; flex-direction: column;
  justify-content: space-between;
  padding: 3rem 4rem; position: relative; z-index: 1;
}
.auth-brand-top { animation: fade-in 0.5s ease 0.1s both; }
.auth-brand-mark { display: inline-flex; align-items: center; gap: 0.65rem; }
.auth-brand-mark-icon {
  width: 36px; height: 36px; background: var(--red); border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(200,16,46,0.5); flex-shrink: 0;
}
.auth-brand-mark-icon svg { width: 18px; height: 18px; stroke: #fff; }
.auth-brand-mark-name { font-size: 0.88rem; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.auth-brand-mark-name sup {
  font-size: 0.5rem; font-weight: 600; color: rgba(255,255,255,0.28);
  letter-spacing: 0.08em; text-transform: uppercase; vertical-align: super; margin-left: 2px;
}
.auth-brand-mid { padding: 1rem 0; }
.auth-brand-headline {
  font-size: clamp(2.8rem, 5vw, 4.8rem); font-weight: 900; color: #fff;
  line-height: 1.0; letter-spacing: -0.05em; margin-bottom: 1.75rem;
  animation: headline-reveal 0.8s cubic-bezier(0.22,1,0.36,1) 0.2s both;
}
.auth-brand-headline em { font-style: italic; color: var(--red); display: block; }
.auth-brand-rule {
  width: 36px; height: 2px; background: rgba(255,255,255,0.1);
  border-radius: 2px; margin-bottom: 1rem;
  animation: fade-in 0.5s ease 0.5s both;
}
.auth-brand-desc {
  font-size: 0.85rem; color: rgba(255,255,255,0.32);
  line-height: 1.78; max-width: 360px;
  animation: fade-up 0.5s ease 0.55s both;
}
.auth-brand-feats { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 2rem; animation: fade-up 0.5s ease 0.65s both; }
.auth-feat {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.26rem 0.65rem; border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px; background: rgba(255,255,255,0.03);
}
.auth-feat-dot { width: 4px; height: 4px; background: var(--red); border-radius: 50%; flex-shrink: 0; }
.auth-feat-text { font-size: 0.68rem; font-weight: 500; color: rgba(255,255,255,0.38); white-space: nowrap; }
.auth-brand-foot { animation: fade-in 0.4s ease 0.8s both; }
.auth-brand-foot p { font-size: 0.68rem; color: rgba(255,255,255,0.15); font-weight: 500; }
.auth-form-panel {
  display: flex; align-items: center; justify-content: center;
  padding: 3rem 3.5rem; position: relative; z-index: 2;
  background: rgba(255,255,255,0.025);
  border-left: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(2px); min-height: 100vh; width: 100%;
}
.auth-card {
  background: transparent; border-radius: 0; padding: 0;
  width: 100%; max-width: 400px; box-shadow: none; position: relative;
  animation: card-float-in 0.7s cubic-bezier(0.22,1,0.36,1) 0.1s both;
}
.auth-card::before { display: none; }
.auth-logo { margin-bottom: 1.75rem; }
.auth-logo-eyebrow { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.6rem; }
.auth-logo-eyebrow-line {
  height: 2px; width: 0; background: var(--red); border-radius: 2px;
  animation: line-draw 0.4s cubic-bezier(0.22,1,0.36,1) 0.65s both;
}
.auth-logo-eyebrow-text { font-size: 0.63rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); }
.auth-logo h1 { font-size: 1.55rem; font-weight: 900; letter-spacing: -0.04em; color: #fff; line-height: 1.15; animation: fade-up 0.5s ease 0.45s both; }
.auth-logo p { margin-top: 0.4rem; font-size: 0.82rem; color: rgba(255,255,255,0.36); line-height: 1.5; animation: fade-up 0.5s ease 0.5s both; }
.auth-tabs {
  display: flex; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 11px;
  padding: 4px; margin-bottom: 1.75rem; gap: 3px;
  animation: fade-up 0.4s ease 0.55s both;
}
.auth-tab {
  flex: 1; padding: 0.52rem; border: none; border-radius: 8px;
  background: none; cursor: pointer; font-size: 0.82rem; font-weight: 500;
  color: rgba(255,255,255,0.36); font-family: inherit;
  transition: all 0.22s cubic-bezier(0.22,1,0.36,1); position: relative;
}
.auth-tab.active { background: rgba(255,255,255,0.09); color: #fff; font-weight: 700; box-shadow: 0 1px 6px rgba(0,0,0,0.35); }
.auth-tab.active::after {
  content: ''; position: absolute; bottom: -1px; left: 20%; right: 20%;
  height: 2px; background: var(--red); border-radius: 2px; animation: fade-in 0.2s ease;
}
.auth-card .form-group { margin-bottom: 1rem; }
.auth-card .form-group label { font-size: 0.7rem; font-weight: 700; color: rgba(255,255,255,0.38); text-transform: uppercase; letter-spacing: 0.09em; margin-bottom: 0.4rem; display: block; }
.auth-card .form-group input {
  padding: 0.75rem 1rem; border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,0.09); font-size: 0.88rem;
  background: rgba(255,255,255,0.05); color: #fff;
  transition: all 0.18s ease; width: 100%;
}
.auth-card .form-group input::placeholder { color: rgba(255,255,255,0.22); }
.auth-card .form-group input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(200,16,46,0.18); background: rgba(255,255,255,0.07); outline: none; }
.auth-card .btn-primary { height: 48px; font-size: 0.88rem; font-weight: 700; border-radius: 11px; background: var(--red); box-shadow: 0 4px 20px rgba(200,16,46,0.4); transition: all 0.2s cubic-bezier(0.22,1,0.36,1); animation: fade-up 0.4s ease 0.7s both; }
.auth-card .btn-primary:hover { background: var(--red-dark); box-shadow: 0 8px 32px rgba(200,16,46,0.5); transform: translateY(-2px); }
.auth-card .btn-primary:active { transform: translateY(0); }
.auth-msg { padding: 0.65rem 1rem; border-radius: 10px; font-size: 0.82rem; margin-bottom: 1rem; display: none; }
.auth-error  { background: rgba(220,38,38,0.12); color: #fca5a5; border: 1px solid rgba(220,38,38,0.25); }
.auth-success { background: rgba(22,163,74,0.12); color: #86efac; border: 1px solid rgba(22,163,74,0.25); }
#pw-strength-bar { transition: width 0.35s cubic-bezier(0.22,1,0.36,1), background 0.3s ease; }
#login-form, #register-form { animation: fade-up 0.3s ease both; }

/* ════ GLOBAL FORMS ════ */
.form-group { margin-bottom: 1.1rem; }
.form-group label {
  display: block; font-size: 0.7rem; font-weight: 700;
  color: var(--ghost); margin-bottom: 0.4rem;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 0.68rem 0.9rem;
  border: 1.5px solid var(--line); border-radius: var(--r);
  font-size: 0.875rem; font-family: inherit;
  color: var(--text); background: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s; line-height: 1.4;
}
.form-group input::placeholder, .form-group textarea::placeholder { color: #B8BAC4; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-glow);
}
.form-group select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238C909C' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9rem center; padding-right: 2.5rem; cursor: pointer;
}
.form-group textarea { resize: vertical; min-height: 80px; }
.form-group:focus-within label { color: var(--red); transition: color 0.15s ease; }

/* ════ BUTTONS ════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.6rem 1.25rem; border-radius: var(--r);
  font-size: 0.845rem; font-weight: 600; cursor: pointer; border: none;
  transition: all 0.15s cubic-bezier(0.4,0,0.2,1);
  font-family: inherit; letter-spacing: -0.01em; white-space: nowrap;
  position: relative; overflow: hidden;
}
.btn-primary { background: var(--red); color: #fff; box-shadow: 0 1px 3px rgba(200,16,46,0.3), 0 4px 12px rgba(200,16,46,0.15); }
.btn-primary:hover { background: var(--red-dark); box-shadow: 0 2px 6px rgba(200,16,46,0.35), 0 8px 20px rgba(200,16,46,0.2); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(200,16,46,0.25); }
.btn-secondary { background: var(--surface); color: var(--text-2); border: 1.5px solid var(--line); box-shadow: var(--e1); }
.btn-secondary:hover { background: var(--surface-2); border-color: var(--line-strong); color: var(--text); }
.btn-danger  { background: var(--err-wash); color: var(--err); border: 1.5px solid var(--err-line); }
.btn-danger:hover { background: var(--err-line); }
.btn-success { background: var(--ok); color: #fff; box-shadow: 0 2px 8px rgba(22,163,74,0.25); }
.btn-success:hover { background: #15803D; transform: translateY(-1px); }
.btn-warning { background: var(--warn-wash); color: #92400E; border: 1.5px solid var(--warn-line); }
.btn-warning:hover { background: var(--warn-line); }
.btn-full { width: 100%; }
.btn-sm { font-size: 0.775rem !important; padding: 0.35rem 0.75rem !important; }
.btn .ripple-el {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,0.2); transform: scale(0);
  animation: ripple 0.55s linear; pointer-events: none;
}

/* ════ APP SHELL ════ */
#app { display: none; min-height: 100vh; }
.layout { display: flex; min-height: 100vh; }

/* ════ SIDEBAR — OBSIDIAN ════ */
.sidebar {
  width: var(--sidebar-w);
  background: var(--s-bg);
  border-right: 1px solid var(--s-line);
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; height: 100vh; z-index: 100;
  transition: width 0.26s cubic-bezier(0.4,0,0.2,1), transform 0.26s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
}
.sidebar.collapsed { width: var(--sidebar-w-col); }
.sidebar.collapsed .sidebar-logo-text,
.sidebar.collapsed .nav-item-label,
.sidebar.collapsed .nav-section-label,
.sidebar.collapsed .user-name,
.sidebar.collapsed #user-role-badge,
.sidebar.collapsed .sidebar-company-name { opacity: 0; width: 0; overflow: hidden; white-space: nowrap; }
.sidebar.collapsed .sidebar-logo { padding: 0.9rem 0; justify-content: center; }
.sidebar.collapsed .sidebar-logo-icon { margin: 0; }
.sidebar.collapsed .nav-item { padding: 0.6rem 0; justify-content: center; }
.sidebar.collapsed .nav-item::before { display: none; }
.sidebar.collapsed .sidebar-footer { padding: 0.6rem 0; }
.sidebar.collapsed .user-info { padding: 0.5rem; justify-content: center; background: transparent; }
.sidebar.collapsed .btn-logout { display: none; }
.sidebar.collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }
.sidebar.collapsed .nav-divider { margin: 0.5rem 0.6rem; }

.sidebar-logo {
  padding: 1rem 0.9rem 0.85rem;
  border-bottom: 1px solid var(--s-line);
  display: flex; align-items: center; gap: 0.65rem; position: relative;
}
.sidebar-logo-icon {
  width: 30px; height: 30px; background: var(--red); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(200,16,46,0.4);
  animation: logo-pulse 1.2s ease 0.8s both;
}
.sidebar-logo-icon svg { width: 15px; height: 15px; stroke: #fff; }
.sidebar-logo-text { flex: 1; min-width: 0; transition: opacity 0.2s ease, width 0.26s ease; }
.sidebar-logo-text h2 { font-size: 0.875rem; font-weight: 800; color: var(--s-text); letter-spacing: -0.025em; }
.sidebar-logo-text p { font-size: 0.62rem; color: var(--s-ghost); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }

.sidebar-collapse-btn {
  position: absolute; right: -11px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  background: #1C1C1F; border: 1px solid var(--s-line);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 10; color: var(--s-ghost);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.sidebar-collapse-btn:hover { background: var(--s-active); border-color: rgba(200,16,46,0.3); color: var(--s-active-t); }
.sidebar-collapse-btn svg { width: 11px; height: 11px; transition: transform 0.26s cubic-bezier(0.4,0,0.2,1); }

.sidebar-nav {
  flex: 1; padding: 0.75rem 0.55rem;
  display: flex; flex-direction: column; gap: 1px;
  overflow-y: auto; overflow-x: hidden;
}
.sidebar-nav::-webkit-scrollbar { width: 2px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--s-line); border-radius: 2px; }

.nav-item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.7rem; border-radius: 7px;
  border: none; background: none; width: 100%; text-align: left; cursor: pointer;
  font-family: inherit; font-size: 0.82rem; font-weight: 500;
  color: var(--s-ghost); transition: background 0.13s, color 0.13s;
  position: relative; white-space: nowrap;
}
.nav-item:hover { background: var(--s-hover); color: var(--s-text); }
.nav-item.active { background: var(--s-active); color: var(--s-active-t); font-weight: 600; }
.nav-item.active::before {
  content: ''; position: absolute; left: -0.3rem; top: 20%; bottom: 20%;
  width: 3px; background: var(--s-active-t); border-radius: 0 3px 3px 0;
}
.nav-icon { width: 15px; height: 15px; flex-shrink: 0; }
.nav-item-label { transition: opacity 0.2s ease, width 0.26s ease; }
.nav-divider { height: 1px; background: var(--s-line); margin: 0.5rem 0.3rem; }
.nav-section-label {
  font-size: 0.59rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--s-ghost); padding: 0.5rem 0.95rem 0.2rem; opacity: 0.45;
  transition: opacity 0.2s ease, width 0.26s ease;
}

.sidebar-footer { padding: 0.55rem 0.55rem; border-top: 1px solid var(--s-line); transition: padding 0.26s ease; }
.user-info {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.65rem; border-radius: 7px;
  background: var(--s-mid); transition: background 0.13s, padding 0.26s; cursor: default;
}
.user-info:hover { background: rgba(255,255,255,0.06); }
.user-avatar {
  width: 26px; height: 26px; border-radius: 7px; background: var(--red);
  color: #fff; font-weight: 800; font-size: 0.68rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.user-avatar.admin-av { background: linear-gradient(135deg, var(--red-deeper) 0%, #7C3AED 100%); }
.user-name { font-size: 0.77rem; font-weight: 600; color: var(--s-text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: opacity 0.2s ease; }
#user-role-badge { font-size: 0.62rem !important; color: var(--s-ghost) !important; transition: opacity 0.2s; }
.btn-logout { background: none; border: none; cursor: pointer; color: var(--s-ghost); padding: 0.2rem; line-height: 1; border-radius: 5px; font-size: 0.85rem; transition: all 0.13s; }
.btn-logout:hover { color: var(--s-active-t); background: rgba(200,16,46,0.1); }

/* ════ TOPBAR — white, clean, professional ════ */
.main {
  margin-left: var(--sidebar-w); flex: 1;
  display: flex; flex-direction: column; min-width: 0;
  transition: margin-left 0.26s cubic-bezier(0.4,0,0.2,1);
}
.main.sidebar-collapsed { margin-left: var(--sidebar-w-col); }

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 0 1.75rem;
  height: 56px;
  display: flex; align-items: center; gap: 1rem;
  position: sticky; top: 0; z-index: 50;
  box-shadow: 0 1px 0 var(--line);
  animation: fade-in 0.4s ease both;
}
.topbar h1 {
  font-size: 0.9rem; font-weight: 700; flex: 1;
  color: var(--text); letter-spacing: -0.015em;
}
.topbar h1.animating { animation: title-swap 0.26s cubic-bezier(0.22,1,0.36,1) both; }
.menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.3rem; color: var(--text-2); border-radius: 6px; }
.menu-toggle:hover { background: var(--canvas); }
.content { padding: 1.75rem 2rem; flex: 1; }
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 99; backdrop-filter: blur(4px); }

/* ════ CARDS ════ */
.card {
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  padding: 1.5rem;
  box-shadow: var(--e1);
  animation: fade-up 0.4s cubic-bezier(0.22,1,0.36,1) 0.08s both;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:hover { border-color: var(--line-strong); box-shadow: var(--e2); }

/* ════ STAT CARDS — professional, clean ════ */
.stat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1rem; margin-bottom: 1.5rem;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.35rem 1.35rem 1.2rem;
  box-shadow: var(--e1);
  position: relative; overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
  cursor: default;
}
.stat-card:hover { box-shadow: var(--e2); transform: translateY(-2px); border-color: var(--line-strong); }
/* Crimson left accent bar */
.stat-card::before {
  content: '';
  position: absolute; top: 1rem; bottom: 1rem; left: 0;
  width: 3px; background: var(--red); border-radius: 0 3px 3px 0;
}
/* Very subtle crimson tint at top */
.stat-card::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--line); pointer-events: none;
}
.stat-card-icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--red-wash);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1);
}
.stat-card:hover .stat-card-icon { transform: scale(1.08) rotate(-4deg); }
.stat-card-icon svg { width: 18px; height: 18px; stroke: var(--red); stroke-width: 1.75; }
.stat-label { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ghost); }
.stat-value {
  font-size: 2rem; font-weight: 900; letter-spacing: -0.04em;
  line-height: 1.05; color: var(--text); margin-top: 0.2rem;
  animation: value-pop 0.5s cubic-bezier(0.22,1,0.36,1) 0.3s both;
}
.stat-sub { font-size: 0.67rem; color: var(--ghost); margin-top: 0.3rem; font-weight: 500; }

/* ════ SECTION HEADERS ════ */
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem; flex-wrap: wrap; gap: 0.75rem;
}
.section-header h2 { font-size: 0.9rem; font-weight: 700; color: var(--text); letter-spacing: -0.015em; }

/* ════ TABLES ════ */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; min-width: 480px; }
thead { border-bottom: 1.5px solid var(--line); }
th {
  text-align: left; font-size: 0.64rem; font-weight: 700;
  color: var(--ghost); text-transform: uppercase; letter-spacing: 0.09em;
  padding: 0.7rem 1rem; background: var(--surface-2); white-space: nowrap;
}
td {
  padding: 0.82rem 1rem; border-bottom: 1px solid var(--line);
  font-size: 0.855rem; vertical-align: middle; color: var(--text-2);
}
td:first-child { color: var(--text); font-weight: 500; }
tr:last-child td { border-bottom: none; }
tbody tr { animation: row-in 0.28s ease both; transition: background 0.1s; }
tbody tr:hover td { background: var(--surface-2); }
tbody tr:nth-child(1)  { animation-delay: 0.04s; }
tbody tr:nth-child(2)  { animation-delay: 0.08s; }
tbody tr:nth-child(3)  { animation-delay: 0.12s; }
tbody tr:nth-child(4)  { animation-delay: 0.16s; }
tbody tr:nth-child(5)  { animation-delay: 0.20s; }
tbody tr:nth-child(6)  { animation-delay: 0.24s; }
tbody tr:nth-child(7)  { animation-delay: 0.28s; }
tbody tr:nth-child(8)  { animation-delay: 0.32s; }
tbody tr:nth-child(9)  { animation-delay: 0.36s; }
tbody tr:nth-child(10) { animation-delay: 0.40s; }

/* ════ BADGES ════ */
.badge {
  display: inline-flex; align-items: center; padding: 0.2rem 0.6rem;
  border-radius: 999px; font-size: 0.67rem; font-weight: 700;
  letter-spacing: 0.02em; white-space: nowrap;
  animation: badge-pop 0.3s cubic-bezier(0.22,1,0.36,1) both;
  transition: transform 0.14s ease;
}
.badge:hover { transform: scale(1.04); }
.badge-new      { background: var(--info-wash);   color: var(--info);   border: 1px solid var(--info-line); }
.badge-followup { background: var(--warn-wash);   color: var(--warn);   border: 1px solid var(--warn-line); }
.badge-closed   { background: var(--ok-wash);     color: var(--ok);     border: 1px solid var(--ok-line); }
.badge-saved    { background: var(--ok-wash);     color: var(--ok);     border: 1px solid var(--ok-line); }
.badge-draft    { background: #F3F4F6; color: #4B5563; border: 1px solid #E5E7EB; }
.badge-sent     { background: var(--info-wash);   color: var(--info);   border: 1px solid var(--info-line); }
.badge-accepted { background: var(--ok-wash);     color: var(--ok);     border: 1px solid var(--ok-line); }
.badge-rejected { background: var(--err-wash);    color: #991B1B;       border: 1px solid var(--err-line); }
.badge-admin    { background: var(--red-wash);    color: var(--red);    border: 1px solid var(--red-tint); }
.badge-salesman { background: #F0F9FF; color: #0369A1; border: 1px solid #BAE6FD; }

/* ════ ADMIN BADGE BAR ════ */
.admin-badge-bar {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--red-wash); border: 1px solid var(--red-tint);
  border-radius: var(--r); padding: 0.6rem 1rem; margin-bottom: 1.5rem;
  font-size: 0.78rem; font-weight: 600; color: var(--red);
}

/* ════ INFO BOX ════ */
.info-box {
  background: var(--info-wash); border: 1px solid var(--info-line);
  border-radius: var(--r); padding: 0.7rem 1rem;
  font-size: 0.82rem; color: var(--info); margin-bottom: 1rem;
}

/* ════ QUOTE FORM ════ */
.quote-section {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.6rem;
  margin-bottom: 1.1rem; box-shadow: var(--e1);
}
.quote-section-title {
  font-size: 0.63rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--ghost); margin-bottom: 1.2rem;
  padding-bottom: 0.75rem; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 0.5rem;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
.quote-number-field {
  background: var(--red-wash); border: 1.5px solid var(--red-tint);
  border-radius: var(--r); padding: 0.7rem 1rem;
  font-size: 0.92rem; font-weight: 900; color: var(--red); letter-spacing: 0.04em;
}
.product-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.product-table { width: 100%; border-collapse: collapse; min-width: 520px; }
.product-table th {
  font-size: 0.63rem; font-weight: 700; color: var(--ghost);
  text-transform: uppercase; letter-spacing: 0.09em;
  padding: 0.55rem 0.5rem; text-align: left;
  background: var(--canvas); border-bottom: 1px solid var(--line);
}
.product-table td { padding: 0.38rem 0.35rem; vertical-align: middle; }
.product-table input {
  width: 100%; padding: 0.48rem 0.6rem; border: 1.5px solid var(--line);
  border-radius: 7px; font-size: 0.84rem; font-family: inherit;
  color: var(--text); background: var(--surface); transition: border-color 0.14s;
}
.product-table input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 2.5px var(--red-glow); }
.product-table input[readonly] { background: var(--canvas); color: var(--ghost); cursor: default; }
.btn-remove {
  background: none; border: none; cursor: pointer; color: #D1D5DB;
  padding: 0.3rem; border-radius: 5px;
  display: flex; align-items: center; justify-content: center; transition: all 0.13s;
}
.btn-remove:hover { color: var(--err); background: var(--err-wash); }

.totals-box {
  background: var(--canvas); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.1rem 1.3rem; margin-top: 1.1rem;
}
.totals-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.28rem 0; font-size: 0.86rem; color: var(--text-2);
}
.totals-row .label { color: var(--ghost); }
.totals-row.total-final {
  border-top: 1.5px solid var(--line); margin-top: 0.6rem; padding-top: 0.75rem;
  font-size: 1.05rem; font-weight: 900; color: var(--red); letter-spacing: -0.02em;
}
.actions-bar { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: flex-end; margin-top: 1.1rem; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }

/* ════ MODALS ════ */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: overlay-in 0.2s ease both;
}
.modal {
  background: var(--surface); border-radius: var(--r-xl); padding: 1.75rem;
  width: 100%; max-width: 500px; box-shadow: var(--e4);
  max-height: 90vh; overflow-y: auto; border: 1px solid var(--line);
  animation: modal-in 0.3s cubic-bezier(0.22,1,0.36,1) both;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.4rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--line);
}
.modal-header h3 { font-size: 0.96rem; font-weight: 700; letter-spacing: -0.02em; }
.modal-close {
  width: 26px; height: 26px; background: var(--canvas); border: 1px solid var(--line);
  border-radius: 7px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--ghost); font-size: 0.88rem; transition: all 0.13s;
}
.modal-close:hover { background: var(--line); color: var(--text); }

/* ════ TABS ════ */
.tab-bar {
  display: flex; gap: 2px; background: var(--canvas);
  border: 1px solid var(--line); border-radius: var(--r); padding: 3px;
  margin-bottom: 1.5rem; overflow-x: auto;
}
.tab-btn {
  padding: 0.4rem 0.9rem; border-radius: 6px; border: none; background: none;
  font-size: 0.8rem; font-weight: 500; color: var(--ghost); cursor: pointer;
  white-space: nowrap; font-family: inherit; transition: all 0.13s;
}
.tab-btn.active { background: var(--surface); color: var(--red); font-weight: 700; box-shadow: var(--e1); }

/* ════ MISC ════ */
.page { display: none; }
.page.active { display: block; animation: page-enter 0.3s cubic-bezier(0.22,1,0.36,1) both; }
.empty-state { text-align: center; padding: 4rem 1rem; color: var(--ghost); }
.empty-state svg { margin: 0 auto 1.1rem; display: block; opacity: 0.15; }
.empty-state p { font-size: 0.875rem; font-weight: 500; }

/* ════ TOAST ════ */
.toast {
  position: fixed; bottom: 1.75rem; right: 1.75rem;
  background: #18181B; color: #FAFAFA;
  padding: 0.78rem 1.15rem; border-radius: var(--r-lg);
  font-size: 0.82rem; font-weight: 500; z-index: 500;
  transform: translateY(120px); opacity: 0;
  transition: transform 0.38s cubic-bezier(0.22,1,0.36,1), opacity 0.28s ease !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.12);
  max-width: 320px; border: 1px solid rgba(255,255,255,0.08);
}
.toast.show { transform: translateY(0) !important; opacity: 1 !important; }

/* ════════════════════════════════════════════
   ANIMATIONS
   ════════════════════════════════════════════ */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes loading-exit { 0% { opacity:1; transform:translateY(0); } 100% { opacity:0; transform:translateY(-12px); pointer-events:none; } }
@keyframes fade-up { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes fade-left { from { opacity:0; transform:translateX(-14px); } to { opacity:1; transform:translateX(0); } }
@keyframes fade-right { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:translateX(0); } }
@keyframes value-pop { 0% { opacity:0; transform:translateY(8px) scale(0.92); } 60% { transform:translateY(-2px) scale(1.02); } 100% { opacity:1; transform:translateY(0) scale(1); } }
@keyframes card-rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@keyframes row-in { from { opacity:0; transform:translateX(-5px); } to { opacity:1; transform:translateX(0); } }
@keyframes modal-in { from { opacity:0; transform:scale(0.96) translateY(10px); } to { opacity:1; transform:scale(1) translateY(0); } }
@keyframes overlay-in { from { opacity:0; } to { opacity:1; } }
@keyframes page-enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes headline-reveal { from { opacity:0; transform:translateY(24px) rotate(-0.5deg); } to { opacity:1; transform:translateY(0) rotate(0); } }
@keyframes panel-slide-in { from { opacity:0; transform:translateX(32px); } to { opacity:1; transform:translateX(0); } }
@keyframes pulse-ring { 0% { transform:scale(0.8); opacity:0.6; } 50% { transform:scale(1.15); opacity:0.2; } 100% { transform:scale(0.8); opacity:0.6; } }
@keyframes line-draw { from { width:0; } to { width:24px; } }
@keyframes badge-pop { 0% { transform:scale(0.8); opacity:0; } 70% { transform:scale(1.06); } 100% { transform:scale(1); opacity:1; } }
@keyframes logo-pulse { 0% { box-shadow:0 0 0 0 rgba(200,16,46,0.5); } 60% { box-shadow:0 0 0 8px rgba(200,16,46,0); } 100% { box-shadow:0 0 0 0 rgba(200,16,46,0); } }
@keyframes line-grow { from { left:50%; right:50%; } to { left:1.25rem; right:1.25rem; } }
@keyframes title-swap { 0% { opacity:0; transform:translateY(6px); } 100% { opacity:1; transform:translateY(0); } }
@keyframes ripple { to { transform:scale(4); opacity:0; } }
@keyframes orb-drift { 0% { transform:translate(0,0) scale(1); } 100% { transform:translate(28px,-38px) scale(1.08); } }
@keyframes card-float-in { from { opacity:0; transform:translateY(28px) scale(0.96); } to { opacity:1; transform:translateY(0) scale(1); } }

/* ── Staggered auth animations ── */
.auth-brand-top  { animation: fade-in 0.6s ease 0.1s both; }
.auth-brand-desc { animation: fade-up 0.6s ease 0.45s both; }
.auth-brand-feats { animation: fade-up 0.6s ease 0.55s both; }
.auth-brand-foot  { animation: fade-in 0.5s ease 0.7s both; }
.auth-feat:nth-child(1) { animation: fade-left 0.5s ease 0.6s both; }
.auth-feat:nth-child(2) { animation: fade-left 0.5s ease 0.68s both; }
.auth-feat:nth-child(3) { animation: fade-left 0.5s ease 0.76s both; }
.auth-feat:nth-child(4) { animation: fade-left 0.5s ease 0.84s both; }
.auth-form-panel { animation: panel-slide-in 0.65s cubic-bezier(0.22,1,0.36,1) 0.15s both; }
.auth-logo-eyebrow-line { width:0; animation: line-draw 0.5s cubic-bezier(0.22,1,0.36,1) 0.6s both; }
.auth-card .form-group:nth-child(1) { animation: fade-up 0.45s ease 0.5s both; }
.auth-card .form-group:nth-child(2) { animation: fade-up 0.45s ease 0.58s both; }
.auth-card .form-group:nth-child(3) { animation: fade-up 0.45s ease 0.66s both; }
.auth-card .btn-full { animation: fade-up 0.45s ease 0.74s both; }

/* Nav stagger */
.nav-item:nth-child(1)  { animation: fade-left 0.3s ease 0.12s both; }
.nav-item:nth-child(2)  { animation: fade-left 0.3s ease 0.17s both; }
.nav-item:nth-child(3)  { animation: fade-left 0.3s ease 0.22s both; }
.nav-item:nth-child(4)  { animation: fade-left 0.3s ease 0.27s both; }
.nav-item:nth-child(5)  { animation: fade-left 0.3s ease 0.32s both; }
.nav-item:nth-child(6)  { animation: fade-left 0.3s ease 0.37s both; }
.nav-item:nth-child(7)  { animation: fade-left 0.3s ease 0.42s both; }
.nav-item:nth-child(8)  { animation: fade-left 0.3s ease 0.47s both; }

/* Stat cards stagger */
.stat-card:nth-child(1) { animation: card-rise 0.45s cubic-bezier(0.22,1,0.36,1) 0.05s both; }
.stat-card:nth-child(2) { animation: card-rise 0.45s cubic-bezier(0.22,1,0.36,1) 0.11s both; }
.stat-card:nth-child(3) { animation: card-rise 0.45s cubic-bezier(0.22,1,0.36,1) 0.17s both; }
.stat-card:nth-child(4) { animation: card-rise 0.45s cubic-bezier(0.22,1,0.36,1) 0.23s both; }
.sidebar-footer .user-info { animation: fade-up 0.4s ease 0.55s both; }

/* ── Reduce motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}



/* ═══ DARK MODE ═══ */
body.dark {
  /* ── Content Surface — dark ── */
  --canvas:      #0F1117;
  --surface:     #1A1D26;
  --surface-2:   #141720;
  --line:        #2A2D38;
  --line-strong: #3A3D48;
  --text:        #E8EAF0;
  --text-2:      #A0A4B2;
  --ghost:       #6B6F7E;

  /* ── Aliases update ── */
  --bg:            var(--canvas);
  --border:        var(--line);
  --muted:         var(--ghost);

  /* ── Status (softer for dark bg) ── */
  --ok:          #22C55E;
  --ok-wash:     rgba(34,197,94,0.12);
  --ok-line:     rgba(34,197,94,0.25);
  --warn:        #F59E0B;
  --warn-wash:   rgba(245,158,11,0.12);
  --warn-line:   rgba(245,158,11,0.25);
  --err:         #EF4444;
  --err-wash:    rgba(239,68,68,0.12);
  --err-line:    rgba(239,68,68,0.25);
  --info:        #3B82F6;
  --info-wash:   rgba(59,130,246,0.12);
  --info-line:   rgba(59,130,246,0.25);
  --purple:      #8B5CF6;
  --purple-wash: rgba(139,92,246,0.12);

  --red-wash:    rgba(200,16,46,0.12);
  --red-tint:    rgba(200,16,46,0.25);
  --red-glow:    rgba(200,16,46,0.18);

  /* ── Elevation (darker shadows) ── */
  --e1: 0 1px 2px rgba(0,0,0,0.2), 0 1px 4px rgba(0,0,0,0.15);
  --e2: 0 2px 8px rgba(0,0,0,0.25), 0 4px 20px rgba(0,0,0,0.2);
  --e3: 0 4px 16px rgba(0,0,0,0.3), 0 16px 48px rgba(0,0,0,0.3);
  --e4: 0 8px 32px rgba(0,0,0,0.4), 0 24px 64px rgba(0,0,0,0.4);

  /* ── Badge overrides ── */
  --accent-light: rgba(200,16,46,0.12);
  --success-light: rgba(34,197,94,0.12);
  --warning-light: rgba(245,158,11,0.12);
  --danger-light: rgba(239,68,68,0.12);
}

/* Dark mode badge fixes */
body.dark .badge-draft { background: rgba(255,255,255,0.08); color: #9CA3AF; border: 1px solid rgba(255,255,255,0.12); }
body.dark .badge-admin { background: rgba(200,16,46,0.15); color: #FF6B7D; border: 1px solid rgba(200,16,46,0.3); }
body.dark .badge-salesman { background: rgba(59,130,246,0.12); color: #60A5FA; border: 1px solid rgba(59,130,246,0.25); }

/* Dark mode auth screen — already dark, no changes needed */

/* Dark mode Kanban columns */
body.dark .k-column { background: #1E2028; border-color: #2A2D38; }
body.dark .k-column.drop-target { background: #252830; }
body.dark .k-card { background: var(--surface); border-color: var(--line); }
body.dark .k-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.3); }

/* Dark mode toast */
body.dark .toast { background: #2A2D38; border-color: rgba(255,255,255,0.1); }

/* Dark mode modals */
body.dark .modal { background: var(--surface); border-color: var(--line); }
body.dark .modal-overlay { background: rgba(0,0,0,0.7); }

/* Dark mode settings block tab active */
body.dark .settings-block-tab.active { background: var(--red); color: #fff; }

/* Dark mode scrollbar */
body.dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); }
body.dark ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* ── Theme Toggle Button ── */
.theme-toggle-wrap {
  padding: 0.35rem 0.55rem;
}
.theme-toggle-btn {
  display: flex; align-items: center; gap: 0.5rem;
  width: 100%; padding: 0.45rem 0.65rem;
  border: none; border-radius: 7px;
  background: var(--s-hover); cursor: pointer;
  color: var(--s-ghost); font-family: inherit;
  font-size: 0.78rem; font-weight: 500;
  transition: background 0.13s, color 0.13s;
}
.theme-toggle-btn:hover { background: rgba(255,255,255,0.08); color: var(--s-text); }
.theme-toggle-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.theme-toggle-label { transition: opacity 0.2s ease, width 0.26s ease; }
.sidebar.collapsed .theme-toggle-label { opacity: 0; width: 0; overflow: hidden; white-space: nowrap; }
.sidebar.collapsed .theme-toggle-btn { justify-content: center; padding: 0.45rem 0; }

/* ════ RESPONSIVE ════ */
@media (max-width: 1100px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .auth-split { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .auth-form-panel { width:100%; padding:3rem 2rem; min-height:100vh; border-left:none; background:transparent; }
  .auth-card { max-width:480px; }
}
@media (max-width: 768px) {
  .auth-split { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .auth-form-panel { width:100%; padding:2rem 1.25rem; min-height:100vh; }
  .auth-card { max-width:100%; border-radius:16px; }
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay.show { display: block; }
  .main { margin-left: 0 !important; }
  .menu-toggle { display: block; }
  .topbar { padding: 0 1rem; }
  .content { padding: 1rem; }
  .form-row { grid-template-columns: 1fr !important; }
  .settings-grid { grid-template-columns: 1fr !important; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .actions-bar { flex-wrap: wrap; gap: 0.5rem; }
  .actions-bar .btn { flex: 1; min-width: 120px; }
  .quote-section { padding: 1rem; }
  .quote-header-row { flex-direction: column; gap: 0.75rem; align-items: stretch; }
  .table-wrap, .quote-items-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 540px; }
  .card { padding: 1rem; }
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal { border-radius:20px 20px 0 0; max-width:100% !important; width:100%; max-height:92vh; overflow-y:auto; }
  #logo-preview { width:100% !important; height:120px !important; }
  .logo-upload-row { flex-direction:column !important; align-items:flex-start !important; }
  td > div { flex-wrap: wrap !important; }
  .section-header { flex-wrap: wrap; gap: 0.5rem; }
  .section-header h2 { font-size: 0.88rem; }
  .tab-bar { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .tab-btn { flex-shrink: 0; }
}
@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr; }
  .auth-form-panel { padding: 1.5rem 1rem; }
  .topbar h1 { font-size: 0.78rem; }
  .content { padding: 0.75rem; }
  .btn { padding: 0.5rem 0.9rem; font-size: 0.8rem; }
}

/* ─── SETTINGS BLOCK TABS ─── */
.settings-block-tabs { display:flex; gap:0.5rem; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:0.35rem; width:fit-content; }
.settings-block-tab { display:flex; align-items:center; gap:0.45rem; padding:0.5rem 1rem; border-radius:8px; border:none; background:transparent; color:var(--muted); font-size:0.85rem; font-weight:500; font-family:inherit; cursor:pointer; transition:all 0.15s ease; white-space:nowrap; }
.settings-block-tab:hover { background:var(--bg); color:var(--text); }
.settings-block-tab.active { background:var(--accent); color:#fff; font-weight:600; }
.settings-block-tab svg { flex-shrink:0; }

/* ─── ROLES LIST ─── */
.role-list-item { display:flex; align-items:center; gap:0.5rem; padding:0.65rem 0.75rem; border-radius:8px; cursor:pointer; transition:background 0.12s; margin-bottom:2px; }
.role-list-item:hover { background:var(--bg); }
.role-list-item.active { background:var(--accent); color:#fff; }
.role-list-item.active .role-list-item-desc { color:rgba(255,255,255,0.75); }
.role-list-item-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.role-list-item.active .role-list-item-dot { background:rgba(255,255,255,0.8); }
.role-list-item-system { font-size:0.65rem; padding:0.1rem 0.4rem; border-radius:4px; background:var(--bg); color:var(--muted); margin-left:auto; flex-shrink:0; }
.role-list-item.active .role-list-item-system { background:rgba(255,255,255,0.2); color:rgba(255,255,255,0.85); }
.role-list-item-name { font-weight:600; font-size:0.875rem; line-height:1.2; }
.role-list-item-desc { font-size:0.75rem; color:var(--muted); line-height:1.2; margin-top:1px; }

/* ─── PERMISSIONS GRID ─── */
.perm-module-block { margin-bottom:1.25rem; }
.perm-module-title { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--accent); margin-bottom:0.6rem; padding-bottom:0.4rem; border-bottom:1px solid var(--border); }
.perm-items-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:0.4rem; }
.perm-item { display:flex; align-items:center; gap:0.6rem; padding:0.55rem 0.75rem; border-radius:8px; border:1.5px solid var(--border); background:var(--surface); cursor:pointer; transition:all 0.12s; user-select:none; }
.perm-item:hover { border-color:var(--accent); background:var(--bg); }
.perm-item input[type="checkbox"] { width:15px; height:15px; accent-color:var(--accent); cursor:pointer; flex-shrink:0; }
.perm-item-label { font-size:0.82rem; font-weight:500; color:var(--text); line-height:1.2; }
.perm-item-label small { display:block; font-size:0.7rem; color:var(--muted); font-weight:400; margin-top:1px; }
.perm-item.checked { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, var(--surface)); }

@media (max-width: 768px) {
  .settings-block-tabs { width:100%; overflow-x:auto; }
  .settings-block-tab { flex:1; justify-content:center; }
  #settings-block-users-roles > div:last-child { grid-template-columns:1fr !important; }
}

/* ─── WORKFLOW CARDS ─── */
.wf-card { background:var(--surface); border:1.5px solid var(--border); border-radius:12px; padding:1.25rem 1.4rem; margin-bottom:1rem; }
.wf-card-header { display:flex; align-items:flex-start; gap:0.9rem; margin-bottom:1rem; }
.wf-icon { width:38px; height:38px; border-radius:10px; background:color-mix(in srgb, var(--accent) 10%, var(--bg)); border:1.5px solid color-mix(in srgb, var(--accent) 25%, var(--border)); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.wf-title { font-weight:700; font-size:0.92rem; color:var(--text); line-height:1.3; }
.wf-subtitle { font-size:0.75rem; color:var(--muted); margin-top:3px; line-height:1.4; }
.wf-subtitle code { background:var(--bg); border:1px solid var(--border); border-radius:4px; padding:1px 5px; font-size:0.72rem; color:var(--accent); font-family:monospace; }
.wf-badge { margin-left:auto; flex-shrink:0; font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; padding:0.25rem 0.6rem; border-radius:20px; }
.wf-badge-active { background:color-mix(in srgb, #10B981 12%, var(--surface)); color:#059669; border:1px solid color-mix(in srgb, #10B981 30%, var(--border)); }
.wf-steps { display:flex; flex-direction:column; gap:0.6rem; margin-bottom:0.9rem; }
.wf-step { display:flex; align-items:flex-start; gap:0.75rem; font-size:0.84rem; line-height:1.5; color:var(--text); }
.wf-step-num { width:22px; height:22px; border-radius:50%; background:var(--accent); color:#fff; font-size:0.7rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; }
.wf-step strong { color:var(--text); }
.wf-step em { font-style:normal; color:var(--accent); font-weight:600; }
.wf-step code { background:var(--bg); border:1px solid var(--border); border-radius:4px; padding:1px 5px; font-size:0.75rem; color:var(--accent); font-family:monospace; }
.wf-note { font-size:0.78rem; color:var(--muted); background:var(--bg); border-left:3px solid var(--accent); border-radius:0 6px 6px 0; padding:0.55rem 0.85rem; line-height:1.5; }
@media (max-width: 600px) { .wf-card-header { flex-wrap:wrap; } .wf-badge { margin-left:0; } }

/* ═══ LOGISTICS BOARD — Kanban ═══ */
#page-logistics { display:none; flex-direction:column; height:calc(100vh - 56px); overflow:hidden; padding:0; }
#page-logistics.active { display:flex; }
.logistics-topbar { display:flex; align-items:center; justify-content:space-between; padding:0.65rem 1.5rem; background:var(--surface); border-bottom:1px solid var(--line); gap:1rem; flex-shrink:0; box-shadow:var(--e1); }
.logistics-topbar-left { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.logistics-topbar-right { display:flex; align-items:center; gap:0.6rem; flex-shrink:0; }
.logistics-board-title { display:flex; align-items:center; gap:0.5rem; font-size:0.88rem; font-weight:700; color:var(--text); letter-spacing:-0.01em; white-space:nowrap; }
.logistics-stats-row { display:flex; gap:0.4rem; flex-wrap:wrap; }
.logistics-stat-chip { font-size:0.68rem; font-weight:600; padding:3px 9px; border-radius:20px; background:var(--canvas); border:1px solid var(--line); color:var(--text-2); white-space:nowrap; }
.logistics-stat-chip.active { background:var(--red-wash); border-color:var(--red-tint); color:var(--red); }
.logistics-tab-bar { display:flex; gap:2px; padding:0 1.5rem; background:var(--surface); border-bottom:1px solid var(--line); flex-shrink:0; }
.logistics-tab { display:flex; align-items:center; gap:0.4rem; padding:0.52rem 0.9rem; font-size:0.77rem; font-weight:600; color:var(--ghost); border:none; background:none; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color 0.13s, border-color 0.13s; font-family:inherit; }
.logistics-tab:hover { color:var(--text-2); }
.logistics-tab.active { color:var(--red); border-bottom-color:var(--red); }
.logistics-filter-wrap { display:flex; align-items:center; gap:0.4rem; background:var(--canvas); border:1px solid var(--line); border-radius:8px; padding:5px 10px; }
.logistics-filter-wrap svg { color:var(--ghost); flex-shrink:0; }
.logistics-filter-wrap input { border:none; background:transparent; font-size:0.82rem; color:var(--text); outline:none; width:160px; font-family:inherit; }
.logistics-filter-wrap input::placeholder { color:var(--ghost); }
.logistics-archive-banner { background:var(--warn-wash); border-bottom:1px solid var(--warn-line); color:var(--warn); font-size:0.8rem; font-weight:600; padding:0.5rem 1.5rem; display:flex; align-items:center; gap:0.5rem; flex-shrink:0; }
.logistics-board-wrap { overflow-x:auto; overflow-y:hidden; padding:0 0 1rem; flex:1; min-height:0; }
.logistics-board { display:flex; gap:10px; padding:1rem 1.5rem 2rem; min-width:max-content; align-items:flex-start; }

/* Kanban columns */
.k-column { width:258px; flex-shrink:0; background:#EDEDF1; border-radius:12px; display:flex; flex-direction:column; max-height:calc(100vh - 175px); overflow:hidden; border:1px solid rgba(0,0,0,0.05); }
.k-column-header { padding:10px 12px 0; flex-shrink:0; }
.k-column-accent { height:3px; border-radius:2px; margin-bottom:10px; }
.k-column-header-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.k-column-name { font-size:0.72rem; font-weight:700; color:var(--text-2); letter-spacing:0.05em; text-transform:uppercase; }
.k-column-count { font-size:0.67rem; font-weight:700; background:var(--surface); border:1px solid var(--line-strong); color:var(--ghost); border-radius:10px; padding:1px 7px; min-width:22px; text-align:center; }
.k-column-cards { padding:6px 8px 10px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:6px; }
.k-column-cards::-webkit-scrollbar { width:3px; }
.k-column-cards::-webkit-scrollbar-thumb { background:var(--line-strong); border-radius:2px; }
.k-column.drop-target { background:#E4E4EA; }

/* Kanban cards */
.k-card { background:var(--surface); border-radius:10px; border:1px solid rgba(0,0,0,0.06); box-shadow:0 1px 3px rgba(0,0,0,0.06); padding:0; cursor:pointer; transition:box-shadow 0.17s, transform 0.13s; position:relative; overflow:hidden; }
.k-card:hover { box-shadow:0 4px 14px rgba(0,0,0,0.1); transform:translateY(-2px); }
.k-card.dragging { opacity:0.55; transform:rotate(1.5deg) scale(0.97); box-shadow:0 12px 32px rgba(0,0,0,0.18); }
.k-card.archived { opacity:0.6; background:var(--canvas); border-style:dashed; box-shadow:none; }
.k-card.urgent-amber { border-left:3px solid #F59E0B; }
.k-card.urgent-red   { border-left:3px solid #DC2626; }
.k-card-top { display:flex; align-items:flex-start; justify-content:space-between; padding:11px 12px 0; gap:6px; }
.k-card-quote { font-size:0.82rem; font-weight:800; color:var(--text); letter-spacing:-0.02em; line-height:1.2; }
.k-card-value { font-size:0.7rem; font-weight:700; color:var(--ok); white-space:nowrap; background:var(--ok-wash); border:1px solid var(--ok-line); border-radius:6px; padding:2px 6px; flex-shrink:0; }
.k-card-client { font-size:0.74rem; color:var(--text-2); padding:4px 12px 0; display:flex; align-items:center; gap:5px; font-weight:500; }
.k-card-client svg { color:var(--ghost); flex-shrink:0; }
.k-card-client.hidden-client { color:var(--ghost); font-style:italic; font-weight:400; }
.k-card-items-preview { margin:6px 10px 0; background:var(--canvas); border-radius:6px; padding:5px 8px; display:flex; flex-direction:column; gap:2px; }
.k-card-item-row { display:flex; justify-content:space-between; align-items:baseline; font-size:0.68rem; }
.k-card-item-name { color:var(--text-2); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px; }
.k-card-item-qty { color:var(--ghost); font-size:0.65rem; flex-shrink:0; }
.k-card-items-more { font-size:0.65rem; color:var(--ghost); font-style:italic; margin-top:1px; }
.k-card-middle { display:flex; align-items:center; justify-content:space-between; padding:6px 12px 0; gap:6px; }
.k-card-assignee { display:flex; align-items:center; gap:5px; }
.k-card-avatar { width:20px; height:20px; border-radius:50%; background:var(--red-wash); color:var(--red); font-size:0.55rem; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; border:1.5px solid var(--red-tint); }
.k-card-assignee-name { font-size:0.68rem; color:var(--text-2); font-weight:500; }
.k-card-due { font-size:0.68rem; font-weight:600; display:flex; align-items:center; gap:3px; padding:2px 6px; border-radius:5px; }
.k-card-due.due-ok { color:var(--ghost); }
.k-card-due.due-soon { color:var(--warn); background:var(--warn-wash); }
.k-card-due.due-overdue { color:var(--err); background:var(--err-wash); }
.k-card-footer { display:flex; align-items:center; justify-content:space-between; padding:6px 12px 10px; margin-top:4px; border-top:1px solid var(--line); }
.k-card-meta { display:flex; align-items:center; gap:8px; font-size:0.65rem; color:var(--ghost); }
.k-card-meta-item { display:flex; align-items:center; gap:3px; }
.k-card-invoice { font-size:0.65rem; font-weight:700; color:var(--info); background:var(--info-wash); padding:2px 6px; border-radius:6px; }
.k-card-date { font-size:0.65rem; color:var(--ghost); }
.k-card-actions { position:absolute; top:8px; right:8px; display:flex; gap:3px; opacity:0; pointer-events:none; transition:opacity 0.14s; }
.k-card:hover .k-card-actions { opacity:1; pointer-events:all; }
.k-card-action-btn { width:24px; height:24px; border-radius:6px; background:var(--surface); border:1px solid var(--line-strong); box-shadow:0 1px 3px rgba(0,0,0,0.08); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--ghost); transition:background 0.12s, color 0.12s; font-family:inherit; }
.k-card-action-btn:hover { background:var(--red-wash); border-color:var(--red-tint); color:var(--red); }

/* Card detail modal */
.card-detail-modal-inner { max-width:800px; width:96vw; max-height:90vh; overflow:hidden; display:flex; flex-direction:column; }
.cd-meta-strip { display:flex; align-items:center; gap:0.75rem; padding:0.6rem 1.5rem; background:var(--canvas); border-bottom:1px solid var(--line); flex-shrink:0; flex-wrap:wrap; }
.cd-meta-pill { display:flex; align-items:center; gap:5px; font-size:0.74rem; font-weight:600; padding:4px 10px; border-radius:20px; border:1px solid var(--line); background:var(--surface); color:var(--text-2); }
.cd-meta-pill svg { flex-shrink:0; }
.cd-meta-pill.due-ok { color:var(--ghost); }
.cd-meta-pill.due-soon { color:var(--warn); background:var(--warn-wash); border-color:var(--warn-line); }
.cd-meta-pill.due-overdue { color:var(--err); background:var(--err-wash); border-color:var(--err-line); }
.cd-meta-pill.has-assignee { color:var(--red); background:var(--red-wash); border-color:var(--red-tint); }
.card-detail-body { display:flex; gap:0; overflow:hidden; flex:1; }
.card-detail-left { flex:1; overflow-y:auto; padding:1.25rem 1.5rem; border-right:1px solid var(--line); }
.card-detail-left::-webkit-scrollbar { width:3px; }
.card-detail-left::-webkit-scrollbar-thumb { background:var(--line-strong); border-radius:2px; }
.card-detail-right { width:228px; flex-shrink:0; padding:1.1rem 1rem; overflow-y:auto; background:var(--canvas); }
.card-detail-right::-webkit-scrollbar { width:3px; }
.card-detail-right::-webkit-scrollbar-thumb { background:var(--line-strong); border-radius:2px; }
.card-detail-section { margin-bottom:1.2rem; }
.card-detail-section-title { font-size:0.65rem; font-weight:700; text-transform:uppercase; letter-spacing:0.09em; color:var(--ghost); margin-bottom:0.55rem; display:flex; align-items:center; gap:0.35rem; }
.card-detail-stage-pill { font-size:0.65rem; font-weight:700; padding:3px 10px; border-radius:20px; background:var(--red-wash); color:var(--red); border:1px solid var(--red-tint); display:inline-block; margin-bottom:0.3rem; text-transform:uppercase; letter-spacing:0.05em; }
.cd-detail-row { display:flex; align-items:baseline; justify-content:space-between; padding:5px 0; border-bottom:1px solid var(--line); font-size:0.82rem; }
.cd-detail-label { color:var(--ghost); font-size:0.75rem; font-weight:500; }
.cd-detail-value { color:var(--text); font-weight:600; text-align:right; }
.cd-activity-log { display:flex; flex-direction:column; gap:8px; }
.cd-activity-item { display:flex; gap:0.6rem; align-items:flex-start; }
.cd-activity-avatar { width:24px; height:24px; border-radius:50%; background:var(--red-wash); color:var(--red); font-size:0.6rem; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cd-activity-avatar.sys { background:var(--canvas); color:var(--ghost); }
.cd-activity-content { flex:1; min-width:0; }
.cd-activity-text { font-size:0.77rem; color:var(--text-2); line-height:1.45; }
.cd-activity-text strong { color:var(--text); font-weight:600; }
.cd-activity-time { font-size:0.65rem; color:var(--ghost); margin-top:1px; }
.cd-comment-wrap { display:flex; gap:0.5rem; align-items:flex-end; }
.cd-comment-wrap textarea { flex:1; resize:none; font-size:0.82rem; border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-family:inherit; background:var(--canvas); color:var(--text); outline:none; transition:border-color 0.13s; line-height:1.4; }
.cd-comment-wrap textarea:focus { border-color:var(--red); background:var(--surface); }
.cd-move-buttons { display:flex; flex-direction:column; gap:4px; }
.cd-move-btn { width:100%; padding:6px 10px; font-size:0.73rem; font-weight:600; border:1px solid var(--line); border-radius:7px; background:var(--surface); color:var(--text-2); cursor:pointer; text-align:left; transition:background 0.12s, border-color 0.12s, color 0.12s; font-family:inherit; display:flex; align-items:center; gap:7px; }
.cd-move-btn:hover { background:var(--red-wash); border-color:var(--red-tint); color:var(--red); }
.cd-move-btn.current-stage { background:var(--red-wash); border-color:var(--red-tint); color:var(--red); cursor:default; font-weight:700; }
.cd-move-btn:disabled { opacity:0.35; cursor:not-allowed; background:var(--canvas); }

/* Analytics */
.logistics-analytics-wrap { flex:1; overflow-y:auto; padding:1.5rem; background:var(--canvas); }
.analytics-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-bottom:1.25rem; }
.analytics-stat-card { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:1.1rem 1.1rem 1rem; box-shadow:var(--e1); }
.analytics-stat-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:0.75rem; }
.analytics-stat-label { font-size:0.69rem; font-weight:700; color:var(--ghost); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:0.3rem; }
.analytics-stat-value { font-size:1.6rem; font-weight:800; color:var(--text); letter-spacing:-0.03em; line-height:1; }
.analytics-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.analytics-panel { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:1.1rem; box-shadow:var(--e1); }
.analytics-panel-title { font-size:0.78rem; font-weight:700; color:var(--text); margin-bottom:1rem; letter-spacing:-0.01em; }
.an-bar-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.an-bar-label { font-size:0.72rem; color:var(--text-2); font-weight:500; min-width:90px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.an-bar-track { flex:1; height:6px; background:var(--canvas); border-radius:3px; overflow:hidden; }
.an-bar-fill { height:100%; border-radius:3px; transition:width 0.6s cubic-bezier(0.22,1,0.36,1); }
.an-bar-count { font-size:0.7rem; font-weight:700; color:var(--text-2); min-width:24px; text-align:right; }
.an-empty { font-size:0.78rem; color:var(--ghost); text-align:center; padding:1.5rem 0; font-style:italic; }

/* New card modal items table */
.nc-items-table { width:100%; border-collapse:collapse; font-size:0.8rem; }
.nc-items-table thead th { text-align:left; font-size:0.67rem; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--ghost); padding:0 4px 6px; border-bottom:1px solid var(--line); }
.nc-items-table tbody td { padding:4px 4px; vertical-align:middle; }
.nc-items-table input { width:100%; border:1px solid var(--line); border-radius:6px; padding:5px 7px; font-size:0.8rem; font-family:inherit; color:var(--text); background:var(--surface); outline:none; transition:border-color 0.13s; }
.nc-items-table input:focus { border-color:var(--red); }

/* Card detail items table */
.cd-items-table { width:100%; border-collapse:collapse; font-size:0.8rem; }
.cd-items-table thead th { text-align:left; font-size:0.67rem; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--ghost); padding:0 6px 6px; border-bottom:1px solid var(--line); }
.cd-items-row td { padding:7px 6px; border-bottom:1px solid var(--line); vertical-align:middle; }
.cd-items-name { color:var(--text); font-weight:500; max-width:160px; }
.cd-items-qty { text-align:center; color:var(--text-2); font-size:0.78rem; }
.cd-items-price { text-align:right; color:var(--text-2); font-size:0.78rem; }
.cd-items-subtotal { text-align:right; color:var(--text); font-weight:600; font-size:0.78rem; }
.cd-items-table tfoot td { padding-top:8px; }