/*
 * Design system stylesheet: tokens, utilities, and components.
 * Load after tailwind.css so custom colors and components apply.
 * Tailwind v4 CLI may not emit @theme / @layer components into the build;
 * this file supplies them as plain CSS.
 */

:root {
  --color-background: #111827;
  --color-surface: #1F2937;
  --color-border: #374151;
  --color-primary: #3B82F6;
  --color-primary-hover: #2563EB;
  --color-success: #10B981;
  --color-danger: #EF4444;
  --color-text-primary: #F9FAFB;
  --color-text-secondary: #9CA3AF;
  --color-text-tertiary: #6B7280;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --radius-card: 12px;
  --radius-input: 8px;
}

/* Mobile hamburger: explicit media query bypasses Tailwind layer/ordering issues */
.mobile-hamburger {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) {
  .mobile-hamburger {
    display: none !important;
  }
}

/* Desktop nav: hidden on mobile, flex on desktop */
.desktop-nav {
  display: none !important;
}
@media (min-width: 768px) {
  .desktop-nav {
    display: flex !important;
  }
}

/* Utility-style classes (match class names used in views) */
.bg-background { background-color: var(--color-background); }
.bg-surface { background-color: var(--color-surface); }
.border-border { border-color: var(--color-border); }
.rounded-card { border-radius: var(--radius-card); }
.rounded-input { border-radius: var(--radius-input); }
.text-text-primary { color: var(--color-text-primary); }
.text-text-secondary { color: var(--color-text-secondary); }
.text-text-tertiary { color: var(--color-text-tertiary); }
.text-primary { color: var(--color-primary); }
.text-danger { color: var(--color-danger); }
.font-sans { font-family: var(--font-sans); }

/* Left-border color utilities (used with Tailwind .border-l-4) */
.border-l-primary { border-left-color: var(--color-primary); }
.border-l-danger { border-left-color: var(--color-danger); }
.border-l-success { border-left-color: var(--color-success); }
.border-l-warning { border-left-color: #EAB308; }

/* Optional variants used in views */
.bg-background\/50 { background-color: color-mix(in srgb, var(--color-background) 50%, transparent); }
.hover\:bg-border\/50:hover { background-color: color-mix(in srgb, var(--color-border) 50%, transparent); }
.focus\:ring-primary:focus { --tw-ring-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary); }
.focus\:ring-offset-background:focus { --tw-ring-offset-color: var(--color-background); }
.bg-success\/20 { background-color: color-mix(in srgb, var(--color-success) 20%, transparent); }
.bg-success\/10 { background-color: color-mix(in srgb, var(--color-success) 10%, transparent); }
.bg-danger\/20 { background-color: color-mix(in srgb, var(--color-danger) 20%, transparent); }
.bg-danger\/10 { background-color: color-mix(in srgb, var(--color-danger) 10%, transparent); }
.border-success\/50 { border-color: color-mix(in srgb, var(--color-success) 50%, transparent); }
.border-danger\/50 { border-color: color-mix(in srgb, var(--color-danger) 50%, transparent); }
.bg-primary { background-color: var(--color-primary); }
.hover\:bg-primary-hover:hover { background-color: var(--color-primary-hover); }

/* Component classes */
.input-reskin {
  min-height: 44px;
  border-radius: var(--radius-input);
  border: 1px solid var(--color-border);
  background-color: var(--color-background);
  padding: 0.5rem 1rem;
  font-size: 1rem; /* 16px min prevents iOS Safari auto-zoom on input focus */
  color: var(--color-text-primary);
  transition-property: color, background-color, border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.input-reskin::placeholder {
  color: var(--color-text-secondary);
}
.input-reskin:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-primary);
  border-color: var(--color-primary);
}
.input-reskin-error {
  border-color: var(--color-danger);
}
.input-reskin-error:focus {
  box-shadow: 0 0 0 2px var(--color-danger);
  border-color: var(--color-danger);
}

/* Read-only/disabled: muted so clearly distinct from editable fields */
.input-reskin:disabled,
.input-reskin[readonly] {
  background-color: var(--color-surface);
  color: var(--color-text-tertiary);
  border-color: color-mix(in srgb, var(--color-border) 80%, transparent);
}
.input-reskin:disabled {
  cursor: not-allowed;
}
.input-reskin:disabled:focus {
  outline: none;
  box-shadow: none;
  border-color: color-mix(in srgb, var(--color-border) 80%, transparent);
}
.input-reskin[readonly] {
  cursor: default;
}
.input-reskin[readonly]:focus {
  outline: none;
  box-shadow: 0 0 0 1px var(--color-border);
  border-color: var(--color-border);
}

.btn-primary {
  min-height: 44px;
  border-radius: var(--radius-input);
  background-color: var(--color-primary);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-primary);
  transition-property: color, background-color, border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.btn-primary:hover:not(:disabled) {
  background-color: var(--color-primary-hover);
}
.btn-primary:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--tw-ring-offset-color, #fff), 0 0 0 4px var(--color-primary);
}
.btn-primary:disabled,
.btn-primary.btn-busy {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-danger {
  min-height: 44px;
  border-radius: var(--radius-input);
  background-color: var(--color-danger);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: white;
  transition-property: color, background-color, border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.btn-danger:hover:not(:disabled) {
  background-color: #dc2626;
}
.btn-danger:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--tw-ring-offset-color, #fff), 0 0 0 4px var(--color-danger);
}
.btn-danger:disabled,
.btn-danger.btn-busy {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-ghost {
  min-height: 44px;
  border-radius: var(--radius-input);
  background-color: transparent;
  border: 1px solid var(--color-border);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  transition-property: color, background-color, border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.btn-ghost:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--color-border) 50%, transparent);
  color: var(--color-text-primary);
}
.btn-ghost:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--tw-ring-offset-color, #fff), 0 0 0 4px var(--color-border);
}
.btn-ghost:disabled,
.btn-ghost.btn-busy {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.card-reskin {
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  padding: 1rem;
}
@media (min-width: 640px) {
  .card-reskin {
    padding: 1.5rem;
  }
}

/* Tooltip popover: hidden state uses visibility/opacity so toggling never causes layout reflow. */
.tooltip-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Toast stack: fixed bottom-right (desktop) / bottom-center (mobile). Outside overflow wrapper so X is never clipped. */
[data-controller="notification"] {
  position: fixed;
  bottom: 1.5rem;
  right: 2rem;
  z-index: 50;
  width: min(340px, calc(100vw - 4rem));
  max-width: 340px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.75rem;
  max-height: 50vh;
  overflow-y: hidden;
}
[data-controller="notification"] [data-notification-target="container"] {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.75rem;
}

/* Individual toasts: content wrapper + justify-between so message never pushes close button. */
[data-controller="notification"] [role="alert"] {
  max-width: 100%;
  overflow: hidden;
}
[data-controller="notification"] [role="alert"] .toast-content {
  flex: 1;
  min-width: 0;
}
.toast .toast-message {
  word-break: break-word;
  user-select: text;
  cursor: text;
}
.toast .toast-close {
  flex-shrink: 0;
}

/* Toast content: limit to 3 lines with ellipsis to reduce screen coverage */
.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* Toast expand/collapse functionality */
.toast-chevron-btn {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toast-chevron {
  color: currentColor;
  opacity: 0.7;
  min-width: 16px;
  min-height: 16px;
}

.toast-chevron-btn:hover .toast-chevron {
  opacity: 1;
}

/* Confirmation Modal Animations */
@keyframes modal-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes modal-fade-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

.animate-modal-in {
  animation: modal-fade-in 0.15s ease-out;
}

.animate-modal-out {
  animation: modal-fade-out 0.15s ease-in;
}