/*
 * This is a manifest file that'll be compiled into application.css.
 */

/* ─── Pigon Design System ─── */
:root {
  --pg-sidebar: #FFFFFF;
  --pg-sidebar-border: #F0EDE8;
  --pg-bg: #F4F2EE;
  --pg-accent: #4F46E5;
  --pg-accent-light: #EEF2FF;
  --pg-surface: #FFFFFF;
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body: 'DM Sans', sans-serif;
}

body {
  font-family: var(--font-body);
  background: var(--pg-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -0.015em;
}

/* ─── Dark Sidebar Nav Items ─── */
.pg-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: #6B7280;
  transition: background 0.15s ease, color 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
}
.pg-nav-item:hover {
  background: #F4F2EE;
  color: #111827;
}
.pg-nav-item.active {
  background: var(--pg-accent-light);
  color: var(--pg-accent);
  font-weight: 600;
}
.pg-nav-item svg { flex-shrink: 0; }
.pg-nav-item.active svg { color: var(--pg-accent); }

/* ─── Bottom Mobile Nav ─── */
.pg-bottom-nav {
  background: var(--pg-sidebar);
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-bottom: env(safe-area-inset-bottom);
}
.pg-bottom-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 4px;
  color: rgba(255,255,255,0.35);
  font-size: 10px;
  font-weight: 500;
  transition: color 0.15s ease;
  text-decoration: none;
  flex: 1;
}
.pg-bottom-nav a.active {
  color: #fff;
}
.pg-bottom-nav a.active svg {
  filter: drop-shadow(0 0 6px rgba(99,102,241,0.7));
}
.pg-bottom-nav svg { display: block; }

/* Tom Select - searchable dropdowns */
.ts-wrapper { width: 100%; }
.ts-wrapper .ts-control {
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  background: white;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.ts-wrapper .ts-control:focus-within {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}
.ts-wrapper .ts-dropdown {
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  margin-top: 4px;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  z-index: 50;
  background: white;
}
.ts-wrapper .ts-dropdown .active {
  background: #eef2ff;
  color: #4338ca;
}
.ts-wrapper .ts-dropdown .option {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
}
.ts-wrapper .ts-control input { font-size: 0.875rem; }