@import "tailwindcss";

/* Waylah Design System — Clean white + neutral grays, blue accent */
@theme {
  /* heero — surface neutral (true neutral gray) */
  --color-heero-50: #fafafa;
  --color-heero-100: #f5f5f5;
  --color-heero-200: #e5e5e5;
  --color-heero-300: #d4d4d4;
  --color-heero-400: #a3a3a3;
  --color-heero-500: #737373;
  --color-heero-600: #525252;
  --color-heero-700: #404040;
  --color-heero-800: #262626;
  --color-heero-900: #171717;
  --color-heero-950: #0a0a0a;

  /* gray — true neutral */
  --color-gray-50: #fafafa;
  --color-gray-100: #f5f5f5;
  --color-gray-200: #e5e5e5;
  --color-gray-300: #d4d4d4;
  --color-gray-400: #a3a3a3;
  --color-gray-500: #737373;
  --color-gray-600: #525252;
  --color-gray-700: #404040;
  --color-gray-800: #262626;
  --color-gray-900: #171717;
  --color-gray-950: #0a0a0a;

  /* barton — alias to accent blue (backward compat) */
  --color-barton-50: #eff6ff;
  --color-barton-100: #dbeafe;
  --color-barton-200: #bfdbfe;
  --color-barton-300: #93c5fd;
  --color-barton-400: #60a5fa;
  --color-barton-500: #3b82f6;
  --color-barton-600: #2563eb;
  --color-barton-700: #1d4ed8;
  --color-barton-800: #1e40af;
  --color-barton-900: #1e3a8a;
  --color-barton-950: #172554;

  /* duo — alias to accent blue (backward compat) */
  --color-duo-50: #eff6ff;
  --color-duo-100: #dbeafe;
  --color-duo-200: #bfdbfe;
  --color-duo-300: #93c5fd;
  --color-duo-400: #60a5fa;
  --color-duo-500: #3b82f6;
  --color-duo-600: #2563eb;
  --color-duo-700: #1d4ed8;
  --color-duo-800: #1e40af;
  --color-duo-900: #1e3a8a;
  --color-duo-950: #172554;

  /* quatre — success (green) */
  --color-quatre-50: #f0fdf0;
  --color-quatre-100: #dcfcdc;
  --color-quatre-200: #bbf7bb;
  --color-quatre-300: #86ef86;
  --color-quatre-400: #4ade4a;
  --color-quatre-500: #22c522;
  --color-quatre-600: #16a316;
  --color-quatre-700: #158015;
  --color-quatre-800: #166516;
  --color-quatre-900: #145314;
  --color-quatre-950: #052e05;

  /* wufei — danger/error (red) */
  --color-wufei-50: #fef2f2;
  --color-wufei-100: #fee2e2;
  --color-wufei-200: #fecaca;
  --color-wufei-300: #fca5a5;
  --color-wufei-400: #f87171;
  --color-wufei-500: #ef4444;
  --color-wufei-600: #dc2626;
  --color-wufei-700: #b91c1c;
  --color-wufei-800: #991b1b;
  --color-wufei-900: #7f1d1d;
  --color-wufei-950: #450a0a;

  /* zechs — accent / info (blue) */
  --color-zechs-50: #eff6ff;
  --color-zechs-100: #dbeafe;
  --color-zechs-200: #bfdbfe;
  --color-zechs-300: #93c5fd;
  --color-zechs-400: #60a5fa;
  --color-zechs-500: #3b82f6;
  --color-zechs-600: #2563eb;
  --color-zechs-700: #1d4ed8;
  --color-zechs-800: #1e40af;
  --color-zechs-900: #1e3a8a;
  --color-zechs-950: #172554;

  /* treize — warning (amber) */
  --color-treize-50: #fffbeb;
  --color-treize-100: #fef3c7;
  --color-treize-200: #fde68a;
  --color-treize-300: #fcd34d;
  --color-treize-400: #fbbf24;
  --color-treize-500: #f59e0b;
  --color-treize-600: #d97706;
  --color-treize-700: #b45309;
  --color-treize-800: #92400e;
  --color-treize-900: #78350f;
  --color-treize-950: #451a03;

  /* noin — subtle brand text */
  --color-noin: #737373;
}

/*
 * Waylah Design System
 * White primary, neutral grays, single blue accent
 */

/* Enable class-based dark mode */
@custom-variant dark (&:where(.dark, .dark *));

/* Base resets */
@layer base {
  *, *::before, *::after {
    border-radius: 0 !important;
  }

  /* Exceptions for circular elements */
  .avatar-circle {
    border-radius: 9999px !important;
    overflow: hidden;
  }

  .avatar-circle img,
  .avatar-circle > div {
    border-radius: 9999px !important;
  }

  body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* All headings use thin Noto Sans */
  .hero-title, h1, h2, h3 {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 100;
  }

  h2 {
    font-size: 1.5rem;
    line-height: 1.2;
  }

  h3 {
    font-size: 1.25rem;
    line-height: 1.3;
  }

  /* Dark mode body background */
  html.dark body {
    @apply bg-gray-950;
  }
}

/* Component styles */
@layer components {
  /* ===== Buttons ===== */

  /* Primary button */
  .btn-primary {
    @apply inline-flex items-center gap-2 px-4 py-2 bg-black dark:bg-white text-white dark:text-black text-sm font-medium
           hover:bg-gray-800 dark:hover:bg-gray-100 cursor-pointer transition-colors;
  }

  /* Secondary button */
  .btn-secondary {
    @apply inline-flex items-center gap-2 px-4 py-2 bg-white dark:bg-gray-800 text-black dark:text-white text-sm font-medium
           border border-gray-300 dark:border-gray-600
           hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition-colors;
  }

  /* Danger button */
  .btn-danger {
    @apply inline-flex items-center gap-2 px-4 py-2 bg-white dark:bg-gray-800 text-wufei-600 dark:text-wufei-400 text-sm font-medium
           border border-wufei-300 dark:border-wufei-700
           hover:bg-wufei-50 dark:hover:bg-wufei-900/20 cursor-pointer transition-colors;
  }

  /* Hero primary button (on gradient backgrounds) */
  .btn-hero-primary {
    @apply inline-flex items-center gap-2 px-4 py-2 bg-white text-gray-900 text-sm font-medium
           hover:bg-gray-100 cursor-pointer transition-colors;
  }

  /* Hero secondary button (on gradient backgrounds) */
  .btn-hero-secondary {
    @apply inline-flex items-center gap-2 px-4 py-2 bg-white/10 text-white text-sm font-medium
           border border-white/20 hover:bg-white/20 cursor-pointer transition-colors;
  }

  /* Hero danger button (on gradient backgrounds) */
  .btn-hero-danger {
    @apply inline-flex items-center gap-2 px-4 py-2 bg-wufei-500/20 text-white text-sm font-medium
           border border-wufei-400/30 hover:bg-wufei-500/30 cursor-pointer transition-colors;
  }

  /* ===== Inputs ===== */

  .input {
    @apply w-full px-4 py-3 bg-white dark:bg-gray-800
           border border-gray-300 dark:border-gray-700
           text-black dark:text-white
           placeholder-gray-400 dark:placeholder-gray-500
           focus:outline-none focus:ring-1 focus:ring-black dark:focus:ring-white;
  }

  /* Input for dark sections (hero, navbar) */
  .input-dark {
    @apply w-full px-4 py-3 bg-gray-800 border border-gray-700
           text-white placeholder-gray-500
           focus:outline-none focus:ring-1 focus:ring-white;
  }

  /* ===== Cards ===== */

  .card {
    @apply bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 p-6 select-none;
  }

  .card-header {
    @apply p-6 border-b border-gray-200 dark:border-gray-800;
  }

  .card-body {
    @apply p-6;
  }

  /* ===== Badges ===== */

  .badge {
    @apply inline-flex items-center px-2 py-0.5 text-xs font-medium;
  }

  .badge-success {
    @apply bg-quatre-50 dark:bg-quatre-900/30 text-quatre-700 dark:text-quatre-400;
  }

  .badge-error {
    @apply bg-wufei-50 dark:bg-wufei-900/30 text-wufei-700 dark:text-wufei-400;
  }

  .badge-warning {
    @apply bg-treize-50 dark:bg-treize-900/30 text-treize-700 dark:text-treize-400;
  }

  .badge-info {
    @apply bg-zechs-50 dark:bg-zechs-900/30 text-zechs-700 dark:text-zechs-400;
  }

  .badge-muted {
    @apply bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400;
  }

  /* ===== Flash Messages ===== */

  .flash {
    @apply px-4 py-3 bg-white dark:bg-gray-900 border-b-2 border-black dark:border-white;
  }

  .flash-error {
    @apply px-4 py-3 bg-wufei-50 dark:bg-wufei-900/20 border-b-2 border-wufei-600 dark:border-wufei-400
           text-wufei-800 dark:text-wufei-200;
  }

  .flash-success {
    @apply px-4 py-3 bg-quatre-50 dark:bg-quatre-900/20 border-b-2 border-quatre-600 dark:border-quatre-400
           text-quatre-800 dark:text-quatre-200;
  }

  /* ===== Stat Pills ===== */

  .stat-pill {
    @apply inline-flex items-center gap-2 px-4 py-2
           bg-white dark:bg-gray-800
           border border-gray-200 dark:border-gray-700
           text-sm hover:border-gray-400 dark:hover:border-gray-500
           transition-colors cursor-pointer;
  }

  /* ===== Quick Resume Pills ===== */

  .quick-resume-pill {
    @apply inline-flex items-center gap-1.5 px-3 py-1.5 text-xs
           bg-gray-100 dark:bg-gray-800
           text-gray-700 dark:text-gray-300
           hover:bg-barton-50 dark:hover:bg-barton-900/30
           hover:text-barton-700 dark:hover:text-barton-400
           border border-transparent hover:border-barton-200 dark:hover:border-barton-800
           transition-colors cursor-pointer;
  }

  /* ===== Tables ===== */

  .table-header {
    @apply bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700;
  }

  .table-header-cell {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase;
  }

  .table-row {
    @apply hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer transition-colors;
  }

  .table-cell {
    @apply px-6 py-4 text-sm text-gray-900 dark:text-gray-100;
  }

  /* ===== Date Group Headings ===== */

  .date-group-heading {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 100;
    font-size: 1rem;
    @apply text-gray-600 dark:text-gray-400 mb-2;
  }

  /* ===== Hero Sections ===== */

  .hero {
    @apply w-full py-3 px-6 select-none;
  }

  /* Grid overlay for hero sections */
  .hero-grid-overlay {
    position: relative;
    overflow: visible;
  }

  .hero-grid-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
    z-index: 1;
    clip-path: inset(0);
  }

  /* Ensure hero content stays above the overlay */
  .hero-grid-overlay > * {
    position: relative;
    z-index: 2;
  }

  .hero-content {
    @apply max-w-5xl mx-auto;
  }

  .hero-title {
    @apply font-light text-white;
    font-size: 24px;
  }

  .hero-subtitle {
    @apply inline text-sm text-white/70 ml-3;
  }

  /* ===== Theme Switcher (Pill Style) ===== */

  .theme-switcher-pill {
    @apply relative flex items-center bg-gray-100 dark:bg-gray-700 rounded-full p-1;
  }

  .theme-switcher-track {
    @apply absolute top-1 bottom-1 bg-white dark:bg-gray-600 rounded-full shadow-sm;
    width: calc(33.333% - 4px);
    left: 4px;
    transition: transform 0.2s ease-out;
  }

  .theme-switcher-pill[data-theme-position="light"] .theme-switcher-track {
    transform: translateX(0);
  }

  .theme-switcher-pill[data-theme-position="dark"] .theme-switcher-track {
    transform: translateX(100%);
  }

  .theme-switcher-pill[data-theme-position="system"] .theme-switcher-track {
    transform: translateX(200%);
  }

  .theme-pill-btn {
    @apply relative z-10 flex-1 flex items-center justify-center px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-full cursor-pointer transition-colors;
  }

  .theme-pill-btn[data-active="true"] {
    @apply text-gray-900 dark:text-white;
  }

  /* ===== Empty States ===== */

  .empty-state {
    @apply p-12 text-center bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-800;
  }

  .empty-state-text {
    @apply text-gray-500 dark:text-gray-400;
  }

  .empty-state-hint {
    @apply text-sm text-gray-400 dark:text-gray-500 mt-1;
  }

  /* ===== Code Blocks ===== */

  .code-block {
    @apply p-4 bg-gray-900 text-gray-100 font-mono text-sm overflow-x-auto;
  }

  .code-inline {
    @apply px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 font-mono text-sm;
  }

  /* ===== Links ===== */

  .link {
    @apply text-zechs-600 dark:text-zechs-400 hover:underline;
  }

  /* ===== Blinking Cursor ===== */

  .cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background-color: currentColor;
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: blink 1s step-end infinite;
  }

  /* ===== Inline Dropdown ===== */

  .inline-dropdown {
    @apply absolute top-full left-0 mt-1 min-w-48 py-1
           bg-gray-900 border border-gray-700
           shadow-xl z-50;
  }

  .inline-dropdown-item {
    @apply flex items-center gap-2 w-full px-3 py-2 text-left text-sm text-white
           hover:bg-gray-800 cursor-pointer transition-colors;
  }

  .inline-dropdown-item-active {
    @apply bg-gray-800;
  }

  /* ===== Running Timer Entry ===== */

  .time-entry-running {
    @apply relative border-l-2 border-zechs-600 bg-zechs-50/50 dark:bg-zechs-900/20;
  }

  .time-entry-running::before {
    content: '';
    @apply absolute left-0 top-0 bottom-0 w-0.5 bg-zechs-600;
    animation: pulse-border 2s ease-in-out infinite;
  }

  /* ===== Progress Bars ===== */

  .progress-bar {
    @apply w-full h-2 bg-gray-200 dark:bg-gray-700 overflow-hidden;
  }

  .progress-bar-fill-success {
    @apply h-full bg-quatre-500 dark:bg-quatre-400 transition-all duration-300;
  }

  .progress-bar-fill-warning {
    @apply h-full bg-treize-500 dark:bg-treize-400 transition-all duration-300;
  }

  .progress-bar-fill-danger {
    @apply h-full bg-wufei-500 dark:bg-wufei-400 transition-all duration-300;
  }

  /* ===== Report Cards ===== */

  .report-card {
    @apply hover:border-gray-300 dark:hover:border-gray-600 transition-colors;
  }

  .report-stat {
    @apply text-center;
  }

  .report-stat-label {
    @apply text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1;
  }

  .report-stat-value {
    @apply text-lg font-medium text-gray-900 dark:text-white;
  }

  /* ===== Pacing Indicator ===== */

  .pacing-indicator {
    @apply flex items-center gap-2 text-sm;
  }

  /* ===== Hero Timer ===== */

  .hero-timer-compact {
    @apply inline-flex items-center gap-2 px-3 py-1.5;
    background: linear-gradient(to right, var(--color-gray-700), var(--color-gray-800), var(--color-gray-900));
  }

  /* ===== Admin Sidebar ===== */

  .sidebar {
    @apply w-56 select-none bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800;
  }

  .sidebar-link {
    @apply flex items-center gap-3 px-3 py-2 text-sm text-gray-700 dark:text-gray-300
           hover:bg-barton-50 dark:hover:bg-gray-800 hover:text-barton-700 dark:hover:text-barton-300
           transition-colors cursor-pointer;
  }

  .sidebar-link-active {
    @apply flex items-center gap-3 px-3 py-2 text-sm font-medium border-l-2
           border-barton-500 dark:border-barton-400 bg-barton-50 dark:bg-gray-800
           text-barton-700 dark:text-barton-300 cursor-pointer;
  }

  .sidebar-section {
    @apply px-3 py-1.5 text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500;
  }

  /* ===== Tabs ===== */

  .tab-bar {
    @apply flex border-b border-gray-200 dark:border-gray-800 gap-0;
  }

  .tab-btn {
    @apply px-4 py-2 text-sm font-medium text-gray-500 dark:text-gray-400
           border-b-2 border-transparent hover:text-gray-700 dark:hover:text-gray-200
           cursor-pointer transition-colors;
  }

  .tab-btn-active {
    @apply px-4 py-2 text-sm font-medium text-zechs-600 dark:text-zechs-400
           border-b-2 border-zechs-600 dark:border-zechs-400
           cursor-pointer transition-colors;
  }

  /* ===== Sortable Drag & Drop ===== */

  .sortable-dragging {
    opacity: 0.9;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    pointer-events: none;
    transform: rotate(2deg);
  }

  .sortable-placeholder {
    border: 2px dashed var(--color-heero-400);
    background: var(--color-heero-50);
    opacity: 0.5;
  }

  .sortable-handle {
    cursor: grab;
    opacity: 0;
    transition: opacity 0.15s;
  }

  .group:hover .sortable-handle {
    opacity: 0.3;
  }

  .sortable-handle:hover {
    opacity: 0.7 !important;
  }

  .sortable-handle:active {
    cursor: grabbing;
  }

  /* ===== Column Chips (Transfer/Export) ===== */

  .column-chip {
    @apply inline-flex items-center gap-1 px-3 py-1.5 mb-2 mr-2
           text-sm cursor-grab transition-colors select-none;
  }

  .column-chip-available {
    @apply bg-gray-100 dark:bg-gray-800
           text-gray-700 dark:text-gray-300
           hover:bg-gray-200 dark:hover:bg-gray-700;
  }

  .column-chip-selected {
    @apply bg-zechs-100 dark:bg-zechs-900/30
           text-zechs-700 dark:text-zechs-300
           hover:bg-zechs-200 dark:hover:bg-zechs-800/40;
  }

  /* ===== Stealth Mode for Client Cards ===== */

  /* Toggle icon states - show/hide based on data-stealth attribute */
  [data-stealth="false"] .stealth-icon-active,
  [data-stealth="true"] .stealth-icon-normal {
    display: none;
  }

  [data-stealth="false"] .stealth-icon-normal,
  [data-stealth="true"] .stealth-icon-active {
    display: block;
  }

  /* Stealth mode card styles */
  .stealth-mode .client-compact-card {
    @apply bg-transparent border-transparent;
  }

  .stealth-mode .stealth-hideable {
    @apply opacity-0;
  }

  .stealth-mode .client-compact-card:hover .stealth-hideable {
    @apply opacity-100;
  }

  .stealth-mode .client-compact-card:hover {
    @apply bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700;
  }

  /* ===== Navbar Pill ===== */

  .navbar-pill {
    @apply flex items-center gap-1 bg-gray-950 px-1.5 py-1;
    border-radius: 9999px !important;
    box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.3);
  }

  .navbar-pill-link {
    @apply text-sm px-3 py-1 text-gray-400 hover:text-white hover:bg-gray-800/50 transition-colors;
    border-radius: 9999px !important;
  }

  .navbar-pill-link-active {
    @apply text-sm px-3 py-1 text-white bg-gray-800 transition-colors;
    border-radius: 9999px !important;
  }

  /* ===== Filter Bar Inputs ===== */

  .filter-select {
    @apply px-2 py-1 text-xs bg-gray-800 border border-gray-700 text-white
           focus:outline-none focus:ring-1 focus:ring-zechs-500
           disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .filter-input {
    @apply px-2 py-1 text-xs bg-gray-800 border border-gray-700 text-white
           placeholder-gray-500
           focus:outline-none focus:ring-1 focus:ring-zechs-500
           disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .filter-bar {
    @apply w-full py-2 px-6 bg-gray-900 border-b border-gray-800;
  }

  /* ===== Navbar Timer ===== */

  .navbar-timer {
    @apply inline-flex items-center gap-2 px-3 py-1.5 text-sm;
    background: linear-gradient(to right, var(--color-gray-700), var(--color-gray-800), var(--color-gray-900));
  }

  .navbar-timer-stop {
    @apply p-1.5 text-white/70 hover:text-white hover:bg-white/10 transition-colors cursor-pointer;

    button {
      @apply cursor-pointer;
    }
  }

  /* ===== Active Timer Bar ===== */

  .active-timer-bar {
    @apply w-full min-h-[42px] flex items-center;
    background: linear-gradient(to right, var(--color-quatre-600), var(--color-quatre-600), var(--color-quatre-700));
  }

  .active-timer-stop {
    @apply p-2 text-white/80 hover:text-white hover:bg-white/15 rounded transition-colors cursor-pointer;

    button {
      @apply cursor-pointer;
    }
  }

  /* ===== Hero Icon Button ===== */

  .btn-hero-icon {
    @apply p-2 bg-white/10 text-white hover:bg-white/20 transition-colors cursor-pointer;
  }

  /* ===== Activity Visualizations ===== */

  .activity-chart-container {
    @apply opacity-50;
  }

  .activity-grid-container {
    @apply flex items-center;
  }

  .activity-grid-container canvas {
    image-rendering: pixelated;
  }
}

/* Keyframe animations (outside @layer) */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes pulse-border {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ===== Utilities ===== */
@layer utilities {
  /* Text colors with dark variants */
  .text-primary {
    @apply text-black dark:text-white;
  }

  .text-secondary {
    @apply text-gray-600 dark:text-gray-300;
  }

  .text-muted {
    @apply text-gray-500 dark:text-gray-400;
  }

  /* Background with dark variants */
  .bg-surface {
    @apply bg-white dark:bg-gray-900;
  }

  .bg-surface-alt {
    @apply bg-gray-50 dark:bg-gray-800;
  }

  /* Border with dark variants */
  .border-default {
    @apply border-gray-200 dark:border-gray-800;
  }

  .divide-default {
    @apply divide-gray-200 dark:divide-gray-800;
  }
}