/* ═══════════════════════════════════════════ css/style.css */

/* ─── Design Tokens ───────────────────────────────────────── */
:root {
  --sidebar-w: 240px;
  --topbar-h: 56px;

  /* Colors */
  --c-bg:       #f0f2f5;
  --c-surface:  #ffffff;
  --c-border:   #e2e8f0;
  --c-border-2: #cbd5e1;

  /* Sidebar */
  --c-sidebar-bg:      #0f172a;
  --c-sidebar-hover:   #1e293b;
  --c-sidebar-active:  #1d4ed8;
  --c-sidebar-text:    #94a3b8;
  --c-sidebar-text-hi: #f1f5f9;
  --c-sidebar-label:   #475569;

  /* Brand */
  --c-primary:   #2563eb;
  --c-primary-h: #1d4ed8;
  --c-primary-l: #eff6ff;

  /* Status */
  --c-success:   #10b981;
  --c-success-l: #ecfdf5;
  --c-warning:   #f59e0b;
  --c-warning-l: #fffbeb;
  --c-danger:    #ef4444;
  --c-danger-l:  #fef2f2;
  --c-info:      #3b82f6;
  --c-info-l:    #eff6ff;

  /* Text */
  --c-text:    #1e293b;
  --c-text-2:  #475569;
  --c-text-3:  #94a3b8;

  /* Misc */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow:    0 4px 12px rgba(0,0,0,.1);
  --shadow-lg: 0 8px 30px rgba(0,0,0,.15);
  --transition: .18s ease;
}

/* ─── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--c-bg);
  color: var(--c-text);
  line-height: 1.5;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* ─── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--c-border-2); border-radius: 3px; }

/* ─── Utility ─────────────────────────────────────────────── */
.d-flex   { display: flex; }
.align-c  { align-items: center; }
.gap-1    { gap: 8px; }
.gap-2    { gap: 16px; }
.ml-auto  { margin-left: auto; }
.text-sm  { font-size: .85rem; }
.text-xs  { font-size: .75rem; }
.text-2   { color: var(--c-text-2); }
.text-3   { color: var(--c-text-3); }
.fw-600   { font-weight: 600; }
.fw-500   { font-weight: 500; }
.mt-1     { margin-top: 8px; }
.mt-2     { margin-top: 16px; }
.mt-3     { margin-top: 24px; }
.mb-2     { margin-bottom: 16px; }
.w-100    { width: 100%; }

/* ─── Badges / Status ─────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px 10px; border-radius: 99px;
  font-size: .73rem; font-weight: 600; letter-spacing: .03em;
}
.badge-success { background: var(--c-success-l); color: var(--c-success); }
.badge-warning { background: var(--c-warning-l); color: var(--c-warning); }
.badge-danger  { background: var(--c-danger-l);  color: var(--c-danger);  }
.badge-info    { background: var(--c-info-l);    color: var(--c-info);    }
.badge-gray    { background: #f1f5f9;            color: var(--c-text-2);  }

/* ─── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius-sm);
  font-size: .875rem; font-weight: 500;
  transition: background var(--transition), box-shadow var(--transition);
  white-space: nowrap;
}
.btn-primary { background: var(--c-primary); color: #fff; }
.btn-primary:hover { background: var(--c-primary-h); }
.btn-success { background: var(--c-success); color: #fff; }
.btn-danger  { background: var(--c-danger);  color: #fff; }
.btn-danger:hover  { background: #dc2626; }
.btn-ghost   {
  background: transparent; color: var(--c-text-2);
  border: 1px solid var(--c-border);
}
.btn-ghost:hover { background: var(--c-bg); }
.btn-icon {
  padding: 6px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-text-2); transition: background var(--transition), color var(--transition);
}
.btn-icon:hover { background: var(--c-bg); color: var(--c-text); }
.btn-icon.edit:hover   { color: var(--c-primary); background: var(--c-primary-l); }
.btn-icon.delete:hover { color: var(--c-danger);  background: var(--c-danger-l); }
.btn-icon.copy:hover   { color: var(--c-success); background: var(--c-success-l); }
.btn-sm { padding: 5px 12px; font-size: .8rem; }

/* ─── Loading / Spinner ──────────────────────────────────── */
.loading-screen {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; height: 300px; gap: 16px; color: var(--c-text-3);
}
.spinner {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid var(--c-border);
  border-top-color: var(--c-primary);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Empty State ─────────────────────────────────────────── */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 60px 20px; gap: 12px;
  color: var(--c-text-3);
}
.empty-state svg { opacity: .35; }
.empty-state p  { font-size: .95rem; }

/* ─── Toast ──────────────────────────────────────────────── */
.toast-container {
  position: fixed; bottom: 24px; right: 24px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 9999;
}
.toast {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-radius: var(--radius);
  background: var(--c-surface); box-shadow: var(--shadow);
  border-left: 4px solid var(--c-primary);
  min-width: 260px; max-width: 380px;
  animation: slideIn .25s ease;
  font-size: .875rem;
}
.toast.success { border-color: var(--c-success); }
.toast.error   { border-color: var(--c-danger);  }
.toast.warning { border-color: var(--c-warning); }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fadeOut { to { transform: translateX(110%); opacity: 0; } }
.toast.removing { animation: fadeOut .25s ease forwards; }