/* ============================================================
   premium-design.css — Linear/Notion-like premium enhancements
   Chantier 1 — Design Premium
   ============================================================ */

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

:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --transition-fast: 150ms cubic-bezier(0.25, 1, 0.5, 1);
  --transition-med: 250ms cubic-bezier(0.25, 1, 0.5, 1);
  --transition-slow: 400ms cubic-bezier(0.25, 1, 0.5, 1);
  --shadow-glow: 0 0 0 3px rgba(91,106,191,0.1);
}

body, * { font-family: var(--font-sans) !important; }


/* ── 2. Micro-interactions and animations ── */

/* Smooth page transitions */
#main {
  animation: pageIn 0.3s var(--transition-fast) both;
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Card hover lift effect */
.kpi-card, [style*="border-radius"][style*="border:"] {
  transition: transform var(--transition-fast), box-shadow var(--transition-fast) !important;
}
.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md) !important;
}

/* Button press effect */
button, .nav-item {
  transition: all var(--transition-fast) !important;
}
button:active {
  transform: scale(0.97);
}

/* Table row hover */
tr { transition: background var(--transition-fast); }
tbody tr:hover {
  background: rgba(59,130,246,0.04) !important;
}
[data-theme="dark"] tbody tr:hover {
  background: rgba(59,130,246,0.08) !important;
}

/* Smooth sidebar nav highlight */
.nav-item {
  position: relative;
  transition: all var(--transition-fast) !important;
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: #3b82f6;
  border-radius: 0 3px 3px 0;
  animation: slideIn 0.2s ease-out both;
}
@keyframes slideIn {
  from { height: 0; }
  to   { height: 60%; }
}

/* Focus ring for accessibility */
button:focus-visible, input:focus-visible, select:focus-visible {
  outline: none;
  box-shadow: var(--shadow-glow) !important;
}

/* Skeleton loading shimmer */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

/* Toast notification slide */
@keyframes toastIn {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes toastOut {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(100%); opacity: 0; }
}

/* Modal backdrop blur */
.modal-backdrop, [style*="position:fixed"][style*="background:rgba"] {
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}


/* ── 3. Enhanced component styles ── */

/* Premium scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(100,116,139,0.3);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,0.5); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.2); }

/* Premium input fields */
input, select, textarea {
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
}
input:focus, select:focus, textarea:focus {
  border-color: #3b82f6 !important;
  box-shadow: var(--shadow-glow) !important;
}

/* Badge pulse for notifications */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.15); }
}
.notif-badge, [style*="background:#ef4444"][style*="border-radius:50%"],
[style*="background:var(--danger)"][style*="border-radius"] {
  animation: pulse 2s ease-in-out infinite;
}

/* Kanban column hover */
.kanban-column:hover {
  background: rgba(59,130,246,0.02) !important;
}

/* Chart canvas smooth resize */
canvas {
  transition: opacity var(--transition-med);
}

/* Tag/badge hover */
[style*="border-radius:12px"][style*="font-size:11px"],
[style*="border-radius:10px"][style*="font-size:10px"] {
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}
[style*="border-radius:12px"][style*="font-size:11px"]:hover,
[style*="border-radius:10px"][style*="font-size:10px"]:hover {
  transform: scale(1.05);
}

/* Smooth number counters feel */
.kpi-card [style*="font-size:2"] {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}


/* ── 4. Dark mode premium refinements ── */

[data-theme="dark"] {
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.4);
}

[data-theme="dark"] .kpi-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
}

/* Subtle gradient on dark sidebar */
[data-theme="dark"] #sidebar,
[data-theme="dark"] nav {
  background: linear-gradient(180deg, #0f172a 0%, #0c1222 100%) !important;
}