/* ═══════════════════════════════════════════════════════════════════════════
   A-liL OS — base.css
   Claymorphism Design System
   Font: Outfit (Google Fonts)
   All shadows, radii, colors, and spacing follow ui_style_guide.md exactly.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Google Fonts Import ───────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ─── Design Tokens (CSS Custom Properties) ─────────────────────────────── */
:root {
  /* Colors */
  --color-primary:    #6366F1;  /* Indigo Soft — main actions */
  --color-secondary:  #EC4899;  /* Pink Soft — Luis & Alyssa accents */
  --color-bg:         #F0F4F8;  /* Light Blue-Grey — main canvas */
  --color-surface:    #FFFFFF;  /* Clay cards, modals */
  --color-text:       #1E293B;  /* Slate 900 — primary text */
  --color-text-muted: #64748B;  /* Slate 500 — secondary text */
  --color-border:     #E2E8F0;
  --color-success:    #22C55E;
  --color-warning:    #F59E0B;
  --color-error:      #EF4444;

  /* Primary variants */
  --color-primary-light: #818CF8;
  --color-primary-dark:  #4338CA;

  /* Typography */
  --font-family: 'Outfit', sans-serif;

  /* Font sizes (px → rem) */
  --text-xs:  0.75rem;   /* 12px */
  --text-sm:  0.875rem;  /* 14px */
  --text-md:  1rem;      /* 16px */
  --text-lg:  1.25rem;   /* 20px */
  --text-xl:  1.5rem;    /* 24px */
  --text-2xl: 2rem;      /* 32px */
  --text-3xl: 2.5rem;    /* 40px */
  --text-4xl: 3rem;      /* 48px */

  /* Spacing (4px base unit) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;

  /* Border Radii */
  --radius-sm:   12px;   /* inputs */
  --radius-md:   16px;   /* buttons */
  --radius-lg:   32px;   /* cards, containers */
  --radius-full: 9999px; /* pills, avatars */

  /* ── Claymorphism Shadows ─────────────────────────────────────────── */
  /* The core clay effect = outer neumorphic shadow + inner highlight */
  --shadow-clay-outer:
    12px 12px 24px rgba(163, 177, 198, 0.4),
   -12px -12px 24px rgba(255, 255, 255, 0.9);

  --shadow-clay-inner:
    inset 4px 4px 8px  rgba(255, 255, 255, 0.6),
    inset -4px -4px 8px rgba(163, 177, 198, 0.2);

  /* Combined — apply both for full clay look */
  --shadow-clay:
    12px 12px 24px rgba(163, 177, 198, 0.4),
   -12px -12px 24px rgba(255, 255, 255, 0.9),
    inset 4px 4px 8px  rgba(255, 255, 255, 0.6),
    inset -4px -4px 8px rgba(163, 177, 198, 0.2);

  /* Pressed state (button click) */
  --shadow-clay-pressed:
    4px 4px 8px rgba(163, 177, 198, 0.5),
   -4px -4px 8px rgba(255, 255, 255, 0.8),
    inset 6px 6px 12px rgba(163, 177, 198, 0.3),
    inset -6px -6px 12px rgba(255, 255, 255, 0.5);

  /* Hover (floating) */
  --shadow-clay-hover:
    16px 16px 32px rgba(163, 177, 198, 0.5),
   -16px -16px 32px rgba(255, 255, 255, 1),
    inset 4px 4px 8px  rgba(255, 255, 255, 0.7),
    inset -4px -4px 8px rgba(163, 177, 198, 0.15);

  /* Inset only (inputs) */
  --shadow-clay-inset:
    inset 4px 4px 10px rgba(163, 177, 198, 0.35),
    inset -4px -4px 10px rgba(255, 255, 255, 0.8);

  /* Sidebar (lighter) */
  --shadow-sidebar:
    8px 0 24px rgba(163, 177, 198, 0.3),
    inset -4px 0 8px rgba(255, 255, 255, 0.5);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;
}

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

/* ─── Base ───────────────────────────────────────────────────────────────── */
html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-family);
  font-size: var(--text-md);
  color: var(--color-text);
  background-color: var(--color-bg);
  min-height: 100vh;
  line-height: 1.6;
}

/* ─── Typography utilities ───────────────────────────────────────────────── */
.text-xs    { font-size: var(--text-xs); }
.text-sm    { font-size: var(--text-sm); }
.text-md    { font-size: var(--text-md); }
.text-lg    { font-size: var(--text-lg); }
.text-xl    { font-size: var(--text-xl); }
.text-2xl   { font-size: var(--text-2xl); }
.text-3xl   { font-size: var(--text-3xl); }

.font-light   { font-weight: 300; }
.font-normal  { font-weight: 400; }
.font-medium  { font-weight: 500; }
.font-semibold{ font-weight: 600; }
.font-bold    { font-weight: 700; }
.font-extrabold{ font-weight: 800; }

.text-muted   { color: var(--color-text-muted); }
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }

/* Tight tracking for headings */
h1, h2, h3, h4 {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* ─── Clay Card ──────────────────────────────────────────────────────────── */
/* The core reusable clay surface — cards, panels, containers */
.clay-card {
  background:    var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow:    var(--shadow-clay);
  padding:       var(--space-8);
  transition:    box-shadow var(--transition-normal),
                 transform  var(--transition-normal);
}

.clay-card:hover {
  box-shadow: var(--shadow-clay-hover);
  transform:  translateY(-2px);
}

/* Flat variant — no outer shadow, just inner (good for inset sections) */
.clay-card--flat {
  box-shadow: var(--shadow-clay-inset);
}

/* Compact variant */
.clay-card--sm {
  padding:       var(--space-4);
  border-radius: var(--radius-md);
}

/* ─── Clay Button ────────────────────────────────────────────────────────── */
.clay-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2);
  height:          52px;
  padding:         0 var(--space-6);
  border-radius:   var(--radius-md);
  border:          none;
  cursor:          pointer;
  font-family:     var(--font-family);
  font-size:       var(--text-md);
  font-weight:     600;
  letter-spacing:  -0.01em;
  box-shadow:      var(--shadow-clay);
  background:      var(--color-surface);
  color:           var(--color-text);
  transition:      all var(--transition-normal);
  user-select:     none;
  white-space:     nowrap;
}

.clay-btn:hover {
  box-shadow: var(--shadow-clay-hover);
  transform:  translateY(-2px);
}

.clay-btn:active {
  box-shadow: var(--shadow-clay-pressed);
  transform:  translateY(1px);
}

/* Primary variant */
.clay-btn--primary {
  background:    var(--color-primary);
  color:         white;
  box-shadow:
    12px 12px 24px rgba(99, 102, 241, 0.3),
   -12px -12px 24px rgba(255, 255, 255, 0.9),
    inset 4px 4px 8px  rgba(255, 255, 255, 0.25),
    inset -4px -4px 8px rgba(67, 56, 202, 0.3);
}

.clay-btn--primary:hover {
  background: var(--color-primary-dark);
  box-shadow:
    16px 16px 32px rgba(99, 102, 241, 0.4),
   -16px -16px 32px rgba(255, 255, 255, 1),
    inset 4px 4px 8px  rgba(255, 255, 255, 0.3),
    inset -4px -4px 8px rgba(67, 56, 202, 0.35);
}

/* Secondary (pink) */
.clay-btn--secondary {
  background: var(--color-secondary);
  color:      white;
  box-shadow:
    12px 12px 24px rgba(236, 72, 153, 0.3),
   -12px -12px 24px rgba(255, 255, 255, 0.9),
    inset 4px 4px 8px  rgba(255, 255, 255, 0.25),
    inset -4px -4px 8px rgba(190, 24, 93, 0.3);
}

/* Danger */
.clay-btn--danger {
  background: var(--color-error);
  color:      white;
}

/* Small */
.clay-btn--sm {
  height:        38px;
  padding:       0 var(--space-4);
  font-size:     var(--text-sm);
  border-radius: var(--radius-sm);
}

/* Full width */
.clay-btn--block { width: 100%; }

/* ─── Clay Input ─────────────────────────────────────────────────────────── */
.clay-input,
.clay-select,
.clay-textarea {
  width:          100%;
  height:         56px;
  padding:        0 var(--space-4);
  border:         1.5px solid var(--color-border);
  border-radius:  var(--radius-sm);
  background:     var(--color-surface);
  box-shadow:     var(--shadow-clay-inset);
  font-family:    var(--font-family);
  font-size:      var(--text-md);
  color:          var(--color-text);
  transition:     border-color var(--transition-fast),
                  box-shadow   var(--transition-fast);
  outline:        none;
}

.clay-textarea {
  height:   auto;
  min-height: 120px;
  padding:  var(--space-4);
  resize:   vertical;
}

.clay-input:focus,
.clay-select:focus,
.clay-textarea:focus {
  border-color: var(--color-primary);
  box-shadow:
    inset 4px 4px 10px rgba(163, 177, 198, 0.25),
    inset -4px -4px 10px rgba(255, 255, 255, 0.7),
    0 0 0 3px rgba(99, 102, 241, 0.12);
}

.clay-select {
  appearance:      none;
  cursor:          pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748B' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 16px center;
  background-size:     18px;
  padding-right:       44px;
}

/* Input label */
.clay-label {
  display:       block;
  font-size:     var(--text-sm);
  font-weight:   600;
  color:         var(--color-text-muted);
  margin-bottom: var(--space-2);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Form group */
.clay-field {
  display:       flex;
  flex-direction: column;
  gap:           var(--space-2);
  margin-bottom: var(--space-6);
}

/* ─── Status Badges ──────────────────────────────────────────────────────── */
.clay-badge {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-1);
  height:          28px;
  padding:         0 var(--space-3);
  border-radius:   var(--radius-full);
  font-size:       var(--text-xs);
  font-weight:     700;
  letter-spacing:  0.05em;
  text-transform:  uppercase;
}

.clay-badge--success {
  background: rgba(34, 197, 94, 0.15);
  color: #16A34A;
}
.clay-badge--warning {
  background: rgba(245, 158, 11, 0.15);
  color: #D97706;
}
.clay-badge--error {
  background: rgba(239, 68, 68, 0.15);
  color: #DC2626;
}
.clay-badge--info {
  background: rgba(99, 102, 241, 0.12);
  color: var(--color-primary);
}
.clay-badge--neutral {
  background: rgba(100, 116, 139, 0.12);
  color: var(--color-text-muted);
}

/* ─── Avatar / Initials chip ─────────────────────────────────────────────── */
.clay-avatar {
  width:          40px;
  height:         40px;
  border-radius:  var(--radius-full);
  box-shadow:     var(--shadow-clay);
  display:        flex;
  align-items:    center;
  justify-content:center;
  font-weight:    700;
  font-size:      var(--text-sm);
  flex-shrink:    0;
}

.clay-avatar--luis  { background: linear-gradient(135deg, #6366F1, #818CF8); color: white; }
.clay-avatar--alyssa{ background: linear-gradient(135deg, #EC4899, #F9A8D4); color: white; }

/* ─── Floating Action Button ─────────────────────────────────────────────── */
.clay-fab {
  position:       fixed;
  bottom:         var(--space-8);
  right:          var(--space-8);
  width:          60px;
  height:         60px;
  border-radius:  var(--radius-full);
  background:     linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  color:          white;
  border:         none;
  cursor:         pointer;
  font-size:      1.5rem;
  display:        flex;
  align-items:    center;
  justify-content:center;
  box-shadow:
    12px 12px 24px rgba(99, 102, 241, 0.4),
   -6px  -6px  16px rgba(255, 255, 255, 0.9),
    inset 4px 4px 8px  rgba(255, 255, 255, 0.2),
    inset -4px -4px 8px rgba(67, 56, 202, 0.3);
  transition:     all var(--transition-normal);
  z-index:        100;
}

.clay-fab:hover {
  transform:  scale(1.1) translateY(-3px);
  box-shadow:
    16px 16px 32px rgba(99, 102, 241, 0.5),
   -8px  -8px  24px rgba(255, 255, 255, 1),
    inset 4px 4px 8px  rgba(255, 255, 255, 0.3),
    inset -4px -4px 8px rgba(67, 56, 202, 0.35);
}

.clay-fab:active {
  transform:  scale(0.97);
  box-shadow: var(--shadow-clay-pressed);
}

/* ─── Sidebar ────────────────────────────────────────────────────────────── */
.clay-sidebar {
  width:          260px;
  min-height:     100vh;
  background:     var(--color-surface);
  box-shadow:     var(--shadow-sidebar);
  padding:        var(--space-8) var(--space-6);
  display:        flex;
  flex-direction: column;
  gap:            var(--space-6);
  flex-shrink:    0;
  position:       sticky;
  top:            0;
}

/* Sidebar nav item */
.clay-nav-item {
  display:        flex;
  align-items:    center;
  gap:            var(--space-3);
  height:         48px;
  padding:        0 var(--space-4);
  border-radius:  var(--radius-md);
  font-size:      var(--text-md);
  font-weight:    500;
  color:          var(--color-text-muted);
  cursor:         pointer;
  transition:     all var(--transition-fast);
  text-decoration: none;
}

.clay-nav-item:hover {
  background: var(--color-bg);
  color:      var(--color-text);
  box-shadow: var(--shadow-clay-inset);
}

.clay-nav-item--active {
  background:    linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(129, 140, 248, 0.08));
  color:         var(--color-primary);
  font-weight:   700;
  box-shadow:    var(--shadow-clay-inset);
}

.clay-nav-icon {
  width:          22px;
  height:         22px;
  flex-shrink:    0;
  display:        flex;
  align-items:    center;
  justify-content: center;
}

/* ─── Page Layout ────────────────────────────────────────────────────────── */
.clay-layout {
  display:  flex;
  min-height: 100vh;
}

.clay-main {
  flex:       1;
  padding:    var(--space-8);
  overflow-y: auto;
  min-width:  0; /* prevent overflow in flex children */
}

/* ─── Queue Item Card ────────────────────────────────────────────────────── */
.queue-item {
  background:     var(--color-surface);
  border-radius:  var(--radius-lg);
  box-shadow:     var(--shadow-clay);
  padding:        var(--space-6);
  display:        grid;
  grid-template-columns: 1fr auto;
  align-items:    start;
  gap:            var(--space-4);
  transition:     all var(--transition-normal);
  animation:      slideIn 0.4s ease both;
}

.queue-item:hover {
  box-shadow: var(--shadow-clay-hover);
  transform:  translateY(-2px);
}

/* Staggered entrance animation for queue items */
@keyframes slideIn {
  from {
    opacity:   0;
    transform: translateY(20px);
  }
  to {
    opacity:   1;
    transform: translateY(0);
  }
}

/* ─── Modal Overlay ──────────────────────────────────────────────────────── */
.clay-overlay {
  position:        fixed;
  inset:           0;
  background:      rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(6px);
  z-index:         200;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         var(--space-6);
  animation:       fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.clay-modal {
  background:     var(--color-surface);
  border-radius:  var(--radius-lg);
  box-shadow:     var(--shadow-clay-hover);
  padding:        var(--space-8);
  width:          100%;
  max-width:      560px;
  max-height:     90vh;
  overflow-y:     auto;
  animation:      popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes popIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1);   }
}

/* ─── Progress / Loading ─────────────────────────────────────────────────── */
.clay-spinner {
  width:         40px;
  height:        40px;
  border-radius: var(--radius-full);
  border:        3px solid var(--color-border);
  border-top-color: var(--color-primary);
  animation:     spin 0.8s linear infinite;
  box-shadow:    var(--shadow-clay-outer);
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Toast Notification ─────────────────────────────────────────────────── */
.clay-toast-container {
  position: fixed;
  top:      var(--space-6);
  right:    var(--space-6);
  z-index:  300;
  display:  flex;
  flex-direction: column;
  gap:      var(--space-3);
}

.clay-toast {
  background:    var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow:    var(--shadow-clay-hover);
  padding:       var(--space-4) var(--space-6);
  min-width:     280px;
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
  animation:     toastIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-size:     var(--text-sm);
  font-weight:   500;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(60px) scale(0.9); }
  to   { opacity: 1; transform: translateX(0)    scale(1);   }
}

/* ─── Utility helpers ────────────────────────────────────────────────────── */
.flex          { display: flex; }
.flex-col      { flex-direction: column; }
.items-center  { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2         { gap: var(--space-2); }
.gap-3         { gap: var(--space-3); }
.gap-4         { gap: var(--space-4); }
.gap-6         { gap: var(--space-6); }
.w-full        { width: 100%; }
.min-w-0       { min-width: 0; }
.truncate      { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-only       { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* Divider */
.clay-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-4) 0;
}

/* Scrollbar (WebKit) */
::-webkit-scrollbar        { width: 6px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: var(--color-border); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

/* ─── Filter tabs (queue page) ───────────────────────────────────────────── */
.filter-tab {
  background:   var(--color-surface);
  color:        var(--color-text-muted);
  border:       1.5px solid var(--color-border);
}

.filter-tab.active {
  background:   var(--color-primary);
  color:        white;
  border-color: var(--color-primary);
  box-shadow:
    8px 8px 16px rgba(99,102,241,.3),
   -4px -4px 10px rgba(255,255,255,.9),
    inset 2px 2px 6px rgba(255,255,255,.2);
}