/* css/styles.css - FlowState Kinetic CRM Tokens & Styles */

:root {
  --primary-color: #4f46e5;
  --primary-hover: #4338ca;
  --primary-light: #eef2ff;
  --bg-canvas: #f8fafc;
  --bg-card: #ffffff;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --border-color: #e2e8f0;

  /* transitions.dev Motion Tokens */
  --ease-smooth-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-sidebar: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
}

/* Theme: Pure White Kinetic (Light) */
.theme-light {
  --bg-canvas: #ffffff;
  --bg-card: #ffffff;
  --border-color: #e2e8f0;
}

/* Theme: Obsidian Dark */
.theme-dark {
  --bg-canvas: #090d16;
  --bg-card: #0f172a;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --border-color: #1e293b;
}

.theme-dark body {
  background-color: #090d16;
  color: #f8fafc;
}

.theme-dark .bg-white,
.theme-dark .bg-white\/95 {
  background-color: #0f172a !important;
  color: #f8fafc !important;
}

.theme-dark header {
  background-color: rgba(15, 23, 42, 0.95) !important;
  border-bottom-color: #1e293b !important;
}

.theme-dark .border-slate-200,
.theme-dark .border-slate-200\/80,
.theme-dark .border-slate-200\/70,
.theme-dark .border-slate-200\/60,
.theme-dark .border-slate-100 {
  border-color: #1e293b !important;
}

.theme-dark .text-slate-900,
.theme-dark .text-slate-800 {
  color: #f8fafc !important;
}

.theme-dark .text-slate-700,
.theme-dark .text-slate-600 {
  color: #cbd5e1 !important;
}

.theme-dark .text-slate-500,
.theme-dark .text-slate-400 {
  color: #94a3b8 !important;
}

.theme-dark .bg-slate-50,
.theme-dark .bg-slate-50\/40,
.theme-dark .bg-slate-50\/50,
.theme-dark .bg-slate-50\/70,
.theme-dark .bg-slate-50\/80,
.theme-dark .bg-slate-100,
.theme-dark .bg-slate-100\/70,
.theme-dark .bg-slate-100\/80 {
  background-color: #131c31 !important;
}

.theme-dark .hover\:bg-slate-50:hover,
.theme-dark .hover\:bg-slate-50\/80:hover,
.theme-dark .hover\:bg-slate-100:hover {
  background-color: #1e293b !important;
}

.theme-dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
.theme-dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: #1e293b !important;
}

/* Density Controls */
.density-compact td,
.density-compact th {
  padding-top: 0.375rem !important;
  padding-bottom: 0.375rem !important;
}

.density-compact .kinetic-card {
  padding: 0.875rem !important;
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Kinetic Cards & Site Cards - Rock-Solid Surface (zero 3D tilt/jitter, stable cursor interaction) */
.kinetic-card,
.site-card {
  will-change: box-shadow;
  transition: box-shadow var(--duration-fast) var(--ease-smooth-out), border-color var(--duration-fast) var(--ease-smooth-out);
}
.kinetic-card:hover,
.site-card:hover {
  box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.03);
}

/* Expandable Left-Rail Sidebar Smooth Physics */
#left-rail {
  transition: width var(--duration-normal) var(--ease-sidebar), padding var(--duration-normal) var(--ease-sidebar);
}

.rail-active-glow {
  box-shadow: 0 0 16px -1px rgba(99, 102, 241, 0.5), inset 0 0 8px rgba(99, 102, 241, 0.2);
}

.rail-pill-active {
  background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%);
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.7);
}

/* Tactile Interactive Controls */
.pill-interactive {
  transition: transform var(--duration-fast) var(--ease-smooth-out), box-shadow var(--duration-fast) var(--ease-smooth-out), background-color var(--duration-fast) ease;
}
.pill-interactive:hover {
  filter: brightness(1.05);
}
.pill-interactive:active {
  transform: scale(0.96);
}

.btn-tactile {
  transition: transform var(--duration-fast) var(--ease-smooth-out), filter var(--duration-fast) ease;
}
.btn-tactile:active {
  transform: scale(0.96);
}

/* Drag & Drop Visual Cues */
.drag-over-column {
  background-color: rgba(99, 102, 241, 0.08) !important;
  border-color: #6366f1 !important;
  border-style: dashed !important;
  transform: scale(1.004);
  transition: all var(--duration-fast) var(--ease-smooth-out);
}

.card-dragging {
  opacity: 0.45 !important;
  transform: scale(0.98) !important;
  box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.2) !important;
  cursor: grabbing !important;
}

/* Google Calendar Aesthetics */
.gcal-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.gcal-cell {
  min-height: 105px;
  border-right: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
  transition: background-color var(--duration-fast) ease;
}
.theme-dark .gcal-cell {
  border-right-color: #1e293b;
  border-bottom-color: #1e293b;
}
.gcal-cell:hover {
  background-color: rgba(241, 245, 249, 0.6);
}
.theme-dark .gcal-cell:hover {
  background-color: rgba(30, 41, 59, 0.6);
}
.gcal-chip {
  transition: transform var(--duration-fast) var(--ease-smooth-out), box-shadow var(--duration-fast) var(--ease-smooth-out);
}
.gcal-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.gcal-chip:active {
  transform: scale(0.98);
}

/* Printable Area */
@media print {
  body * {
    visibility: hidden;
  }
  .printable-area,
  .printable-area * {
    visibility: visible;
  }
  .printable-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 20px;
    box-shadow: none !important;
    border: none !important;
  }
}

/* ========================================================================== */
/* Impeccable Typography & Precision Layout Polish (/impeccable)              */
/* ========================================================================== */

/* Tabular Numbers: prevent layout shift and digit jitter */
.tabular-nums,
.font-mono,
table,
th,
td,
[data-numeric],
.kpi-number,
.stat-digit {
  font-variant-numeric: tabular-nums;
  -webkit-font-feature-settings: "tnum" 1;
  font-feature-settings: "tnum" 1;
}

/* Selectable Text across all cards, tables, and typography */
body,
.select-text,
.kinetic-card,
.site-card,
table,
td,
th,
p,
span,
h1, h2, h3, h4, h5, h6,
.remarks-text,
.dossier-body {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

/* Concentric Border Radii & Optical Alignment */
.rounded-2xl {
  border-radius: 1rem; /* 16px outer */
}
.rounded-2xl .rounded-xl {
  border-radius: 0.75rem; /* 12px inner (16px - 4px padding/optical gap) */
}
.rounded-xl .rounded-lg {
  border-radius: 0.5rem; /* 8px inner */
}

/* Optical Alignment for Badges & Icons */
.badge-aligned {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
}

/* Multi-Select Floating / Sticky Selection Bar */
.multi-select-bar {
  transition: all var(--duration-normal) var(--ease-smooth-out);
  animation: slideDownIn 0.2s var(--ease-smooth-out);
}

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

/* High-Density Transition Table Styles */
.transition-table th {
  letter-spacing: 0.05em;
}
.transition-table tr {
  transition: background-color var(--duration-fast) ease;
}