@import "tailwindcss";
@import "flatpickr/dist/flatpickr.min.css";

/* ============================================
   STATUS PLANNER DESIGN SYSTEM
   "Departure Lounge" Theme
   ============================================ */

@theme {
  /* Primary Colors */
  --color-midnight-50: #f8fafc;
  --color-midnight-100: #f1f5f9;
  --color-midnight-200: #e2e8f0;
  --color-midnight-300: #cbd5e1;
  --color-midnight-400: #94a3b8;
  --color-midnight-500: #64748b;
  --color-midnight-600: #475569;
  --color-midnight-700: #334155;
  --color-midnight-800: #1e293b;
  --color-midnight-900: #0f172a;
  --color-midnight-950: #020617;

  /* Tier Colors - Generic progression (set via CSS vars per program) */
  --color-tier-1: #94a3b8;  /* Entry tier - cool gray */
  --color-tier-2: #f59e0b;  /* Mid tier - amber */
  --color-tier-3: #0ea5e9;  /* High tier - sky */
  --color-tier-4: #8b5cf6;  /* Top tier - violet */

  /* Flight Status Colors */
  --color-flown: #10b981;
  --color-booked: #3b82f6;
  --color-planned: #64748b;

  /* Accent */
  --color-accent: #0ea5e9;

  /* Typography */
  --font-display: 'DM Sans', system-ui, sans-serif;
  --font-body: 'Source Sans 3', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Animation */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================
   BASE STYLES
   ============================================ */

@layer base {
  html {
    font-family: var(--font-body);
    color: var(--color-midnight-900);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.025em;
  }

  code, pre, .font-mono {
    font-family: var(--font-mono);
  }
}

/* ============================================
   COMPONENT STYLES
   ============================================ */

@layer components {
  /* IATA Code Display */
  .iata-code {
    font-family: var(--font-mono);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  /* Status Points Display */
  .points-display {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.025em;
  }

  /* Flight Route Line - Status aware */
  .route-line {
    flex: 1;
    height: 2px;
    position: relative;
  }

  .route-line::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-midnight-300);
  }

  .route-line-flown::before {
    background: var(--color-flown);
  }

  .route-line-booked::before {
    background: var(--color-booked);
  }

  .route-line-planned::before {
    background: repeating-linear-gradient(
      90deg,
      var(--color-midnight-300),
      var(--color-midnight-300) 4px,
      transparent 4px,
      transparent 8px
    );
  }

  /* Airplane icon on route line */
  .route-line::after {
    content: '✈';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.75rem;
    color: var(--color-midnight-400);
  }

  .route-line-flown::after {
    color: var(--color-flown);
  }

  .route-line-booked::after {
    color: var(--color-booked);
  }

  /* Tier Badge - uses CSS custom property for color */
  .tier-badge {
    --tier-color: var(--color-tier-1);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: color-mix(in srgb, var(--tier-color) 15%, transparent);
    color: var(--tier-color);
    border: 1px solid color-mix(in srgb, var(--tier-color) 30%, transparent);
  }

  .tier-badge[data-tier="1"] { --tier-color: var(--color-tier-1); }
  .tier-badge[data-tier="2"] { --tier-color: var(--color-tier-2); }
  .tier-badge[data-tier="3"] { --tier-color: var(--color-tier-3); }
  .tier-badge[data-tier="4"] { --tier-color: var(--color-tier-4); }

  /* Status Indicator Dots */
  .status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
  }

  .status-dot-flown {
    background: var(--color-flown);
  }

  .status-dot-booked {
    background: var(--color-booked);
  }

  .status-dot-planned {
    background: transparent;
    border: 2px solid var(--color-planned);
  }

  /* Progress Bar */
  .progress-track {
    height: 0.5rem;
    background: var(--color-midnight-200);
    border-radius: 9999px;
    overflow: hidden;
  }

  .progress-fill {
    --progress-color: var(--color-accent);
    height: 100%;
    border-radius: 9999px;
    background: var(--progress-color);
    transition: width 500ms var(--ease-out);
  }

  .progress-fill[data-tier="1"] { --progress-color: var(--color-tier-1); }
  .progress-fill[data-tier="2"] { --progress-color: var(--color-tier-2); }
  .progress-fill[data-tier="3"] { --progress-color: var(--color-tier-3); }
  .progress-fill[data-tier="4"] { --progress-color: var(--color-tier-4); }

  /* Card Styles */
  .card {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    transition: transform 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
  }

  .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  }

  .card-static {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  }

  /* Flight Card (legacy) */
  .flight-card {
    background: white;
    border-radius: 0.75rem;
    border: 1px solid var(--color-midnight-200);
    padding: 1rem 1.25rem;
    transition: all 150ms var(--ease-out);
  }

  .flight-card:hover {
    border-color: var(--color-midnight-300);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  }

  /* Button Styles */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 150ms var(--ease-out);
    cursor: pointer;
  }

  .btn-primary {
    background: var(--color-midnight-900);
    color: white;
  }

  .btn-primary:hover {
    background: var(--color-midnight-800);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  }

  .btn-secondary {
    background: transparent;
    color: var(--color-midnight-900);
    border: 1px solid var(--color-midnight-300);
  }

  .btn-secondary:hover {
    background: var(--color-midnight-50);
    border-color: var(--color-midnight-400);
  }

  .btn-ghost {
    background: transparent;
    color: var(--color-midnight-600);
  }

  .btn-ghost:hover {
    background: var(--color-midnight-100);
    color: var(--color-midnight-900);
  }

  /* Form Inputs */
  .input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-midnight-200);
    border-radius: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-midnight-900);
    background: var(--color-midnight-50);
    transition: all 150ms var(--ease-out);
  }

  .input:hover {
    border-color: var(--color-midnight-300);
    background: white;
  }

  .input:focus {
    outline: none;
    border-color: var(--color-midnight-900);
    background: white;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-midnight-900) 8%, transparent);
  }

  .input::placeholder {
    color: var(--color-midnight-400);
    font-weight: 400;
  }

  /* Select inputs */
  .select {
    appearance: none;
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    border: 1px solid var(--color-midnight-200);
    border-radius: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-midnight-900);
    background-color: var(--color-midnight-50);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25rem;
    cursor: pointer;
    transition: all 150ms var(--ease-out);
  }

  .select:hover {
    border-color: var(--color-midnight-300);
    background-color: white;
  }

  .select:focus {
    outline: none;
    border-color: var(--color-midnight-900);
    background-color: white;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-midnight-900) 8%, transparent);
  }

  /* IATA Code Input - monospace, centered, distinctive */
  .input-iata {
    font-family: var(--font-mono);
    font-size: 1.125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    text-align: center;
    padding: 0.75rem 0.5rem;
  }

  .input-iata::placeholder {
    font-weight: 400;
    letter-spacing: 0.1em;
  }

  /* Textarea */
  .textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-midnight-200);
    border-radius: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-midnight-900);
    background: var(--color-midnight-50);
    resize: vertical;
    min-height: 5rem;
    transition: all 150ms var(--ease-out);
  }

  .textarea:hover {
    border-color: var(--color-midnight-300);
    background: white;
  }

  .textarea:focus {
    outline: none;
    border-color: var(--color-midnight-900);
    background: white;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-midnight-900) 8%, transparent);
  }

  /* Form Label */
  .label {
    display: block;
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-midnight-500);
    margin-bottom: 0.5rem;
  }

  /* Form Group - label + input wrapper */
  .form-group {
    display: flex;
    flex-direction: column;
  }

  /* Segment Card - boarding pass inspired */
  .segment-card {
    background: white;
    border-radius: 0.75rem;
    border: 1px solid var(--color-midnight-200);
    position: relative;
    overflow: hidden;
  }

  .segment-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--color-midnight-300);
  }

  .segment-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px dashed var(--color-midnight-200);
    background: var(--color-midnight-50);
  }

  .segment-card-body {
    padding: 1.25rem;
  }

  /* Route display in segment */
  .route-display {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
  }

  .route-display-code {
    flex: 1;
  }

  .route-display-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    color: var(--color-midnight-400);
  }

  /* Section divider within forms */
  .form-divider {
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      var(--color-midnight-200) 20%,
      var(--color-midnight-200) 80%,
      transparent
    );
    margin: 1.5rem 0;
  }

  /* Compact input for fare class, carrier codes */
  .input-compact {
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
  }

  /* Radio Card Group */
  .radio-group {
    display: flex;
    gap: 0.75rem;
  }

  .radio-group-vertical {
    flex-direction: column;
    gap: 0.5rem;
  }

  /* Radio Card - clickable card-style radio buttons */
  .radio-card {
    position: relative;
    flex: 1;
  }

  .radio-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 1;
  }

  .radio-card-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 0.875rem 1rem;
    background: var(--color-midnight-50);
    border: 1px solid var(--color-midnight-200);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 150ms var(--ease-out);
  }

  .radio-card-label:hover {
    background: white;
    border-color: var(--color-midnight-300);
  }

  .radio-card input[type="radio"]:checked + .radio-card-label {
    background: white;
    border-color: var(--color-midnight-900);
    box-shadow: 0 0 0 1px var(--color-midnight-900);
  }

  .radio-card input[type="radio"]:focus-visible + .radio-card-label {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  .radio-card-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-midnight-400);
    transition: color 150ms ease;
  }

  .radio-card input[type="radio"]:checked + .radio-card-label .radio-card-icon {
    color: var(--color-midnight-900);
  }

  .radio-card-text {
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-midnight-600);
    transition: color 150ms ease;
  }

  .radio-card input[type="radio"]:checked + .radio-card-label .radio-card-text {
    color: var(--color-midnight-900);
  }

  /* Status Radio - with status color indicators */
  .radio-status input[type="radio"]:checked + .radio-card-label {
    --status-color: var(--color-midnight-900);
    border-color: var(--status-color);
    box-shadow: 0 0 0 1px var(--status-color);
  }

  .radio-status[data-status="planned"] input[type="radio"]:checked + .radio-card-label {
    --status-color: var(--color-planned);
  }

  .radio-status[data-status="booked"] input[type="radio"]:checked + .radio-card-label {
    --status-color: var(--color-booked);
  }

  .radio-status[data-status="flown"] input[type="radio"]:checked + .radio-card-label {
    --status-color: var(--color-flown);
  }

  .radio-status .status-indicator {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: var(--color-midnight-300);
    transition: all 150ms ease;
  }

  .radio-status[data-status="planned"] .status-indicator {
    background: transparent;
    border: 2px solid var(--color-midnight-400);
  }

  .radio-status[data-status="planned"] input[type="radio"]:checked + .radio-card-label .status-indicator {
    border-color: var(--color-planned);
  }

  .radio-status[data-status="booked"] input[type="radio"]:checked + .radio-card-label .status-indicator {
    background: var(--color-booked);
  }

  .radio-status[data-status="flown"] input[type="radio"]:checked + .radio-card-label .status-indicator {
    background: var(--color-flown);
  }

  /* Navigation */
  .nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-weight: 500;
    color: var(--color-midnight-600);
    transition: all 150ms ease;
  }

  .nav-link:hover {
    background: var(--color-midnight-100);
    color: var(--color-midnight-900);
  }

  .nav-link-active {
    background: var(--color-midnight-900);
    color: white;
  }

  /* Alert/Notice boxes */
  .alert {
    padding: 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
  }

  .alert-success {
    background: color-mix(in srgb, var(--color-flown) 10%, white);
    color: #065f46;
    border: 1px solid color-mix(in srgb, var(--color-flown) 20%, white);
  }

  .alert-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
  }

  .alert-info {
    background: color-mix(in srgb, var(--color-accent) 10%, white);
    color: #0c4a6e;
    border: 1px solid color-mix(in srgb, var(--color-accent) 20%, white);
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

@layer utilities {
  /* Tier text colors */
  .text-tier-1 { color: var(--color-tier-1); }
  .text-tier-2 { color: var(--color-tier-2); }
  .text-tier-3 { color: var(--color-tier-3); }
  .text-tier-4 { color: var(--color-tier-4); }

  /* Tier background colors */
  .bg-tier-1 { background-color: var(--color-tier-1); }
  .bg-tier-2 { background-color: var(--color-tier-2); }
  .bg-tier-3 { background-color: var(--color-tier-3); }
  .bg-tier-4 { background-color: var(--color-tier-4); }

  /* Tier bonus badge styles - subtle background + border */
  .bonus-badge-1 {
    background-color: color-mix(in srgb, var(--color-tier-1) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-tier-1) 25%, transparent);
  }
  .bonus-badge-2 {
    background-color: color-mix(in srgb, var(--color-tier-2) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-tier-2) 25%, transparent);
  }
  .bonus-badge-3 {
    background-color: color-mix(in srgb, var(--color-tier-3) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-tier-3) 25%, transparent);
  }
  .bonus-badge-4 {
    background-color: color-mix(in srgb, var(--color-tier-4) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-tier-4) 25%, transparent);
  }

  /* Status text colors */
  .text-flown { color: var(--color-flown); }
  .text-booked { color: var(--color-booked); }
  .text-planned { color: var(--color-planned); }

  /* Animation utilities - subtle and fast */
  .animate-fade-in {
    animation: fadeIn 150ms ease-out forwards;
  }

  .animate-slide-up {
    animation: slideUp 200ms ease-out forwards;
  }

  .animate-number {
    animation: numberPop 150ms var(--ease-spring);
  }

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

  @keyframes slideUp {
    from {
      opacity: 0.8;
      transform: translateY(4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes numberPop {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
  }

  /* Minimal stagger - barely perceptible */
  .stagger-1 { animation-delay: 20ms; }
  .stagger-2 { animation-delay: 40ms; }
  .stagger-3 { animation-delay: 60ms; }
  .stagger-4 { animation-delay: 80ms; }
  .stagger-5 { animation-delay: 100ms; }
  .stagger-6 { animation-delay: 120ms; }

  /* Subtle grain texture overlay */
  .grain::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    z-index: 1000;
  }

  /* Atmospheric gradient backgrounds */
  .bg-lounge {
    background: linear-gradient(
      135deg,
      var(--color-midnight-50) 0%,
      var(--color-midnight-100) 50%,
      var(--color-midnight-50) 100%
    );
  }

  .bg-lounge-dark {
    background: linear-gradient(
      180deg,
      var(--color-midnight-900) 0%,
      var(--color-midnight-950) 100%
    );
  }

  /* Auth page decorative element */
  .auth-decoration {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40vh;
    background: linear-gradient(
      180deg,
      var(--color-midnight-900) 0%,
      var(--color-midnight-800) 60%,
      transparent 100%
    );
    z-index: -1;
  }

  .auth-decoration::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 2px;
    background: linear-gradient(
      90deg,
      transparent,
      var(--color-accent),
      transparent
    );
  }
}

/* ============================================
   FLATPICKR THEME - Departure Lounge
   ============================================ */

.flatpickr-calendar {
  font-family: var(--font-body);
  background: white;
  border: 1px solid var(--color-midnight-200);
  border-radius: 0.75rem;
  box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.flatpickr-calendar::before,
.flatpickr-calendar::after {
  display: none;
}

/* Month Header */
.flatpickr-months {
  background: var(--color-midnight-900);
  border-radius: 0.65rem 0.65rem 0 0;
  padding: 0.5rem 0;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  fill: white;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  fill: var(--color-accent);
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--color-accent);
}

.flatpickr-current-month {
  font-family: var(--font-display);
  font-weight: 600;
  color: white;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  background: transparent;
  font-weight: 600;
  color: white;
}

.flatpickr-current-month input.cur-year {
  font-weight: 600;
  color: white;
}

/* Weekdays */
.flatpickr-weekdays {
  background: var(--color-midnight-50);
}

.flatpickr-weekday {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-midnight-500);
}

/* Days */
.flatpickr-day {
  font-family: var(--font-body);
  color: var(--color-midnight-700);
  border-radius: 0.375rem;
}

.flatpickr-day:hover {
  background: var(--color-midnight-100);
  border-color: transparent;
}

.flatpickr-day.today {
  border-color: var(--color-accent);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--color-midnight-900);
  border-color: var(--color-midnight-900);
  color: white;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--color-midnight-300);
}

/* Time Picker */
.flatpickr-time {
  border-top: 1px solid var(--color-midnight-200);
  background: var(--color-midnight-50);
}

.flatpickr-time input {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-midnight-900);
}

.flatpickr-time .flatpickr-time-separator {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--color-midnight-400);
}

.flatpickr-time .flatpickr-am-pm {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-midnight-600);
}

.flatpickr-time .flatpickr-am-pm:hover {
  background: var(--color-midnight-100);
}

/* Alt input styling */
.flatpickr-input[readonly] {
  cursor: pointer;
  background: var(--color-midnight-50);
}

.flatpickr-input[readonly]:hover {
  background: white;
  border-color: var(--color-midnight-300);
}