/* Self-hosted fonts (vendored from Google Fonts) */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/jetbrains-mono-latin-68dbce1c.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/jetbrains-mono-latin-ext-b0c48b7a.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/outfit-latin-9bbb8353.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/outfit-latin-ext-6bff6d2d.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Terminal theme fonts */
@layer base {
  body {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
  }

  /* Ensure form inputs with w-full class respect full width by overriding size attribute */
  input.w-full[type="email"],
  input.w-full[type="text"],
  textarea.w-full {
    min-width: 0;
    width: 100% !important;
  }
}

/* Terminal animations */
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

@keyframes scan {
  0% {
    background-position: 0 -100vh;
  }
  35%, 100% {
    background-position: 0 100vh;
  }
}

@keyframes flicker {
  0% { opacity: 0.27861; }
  5% { opacity: 0.34769; }
  10% { opacity: 0.23604; }
  15% { opacity: 0.90626; }
  20% { opacity: 0.18128; }
  25% { opacity: 0.83891; }
  30% { opacity: 0.65583; }
  35% { opacity: 0.67807; }
  40% { opacity: 0.26559; }
  45% { opacity: 0.84693; }
  50% { opacity: 0.96019; }
  55% { opacity: 0.08594; }
  60% { opacity: 0.20313; }
  65% { opacity: 0.71988; }
  70% { opacity: 0.53455; }
  75% { opacity: 0.37288; }
  80% { opacity: 0.71428; }
  85% { opacity: 0.70419; }
  90% { opacity: 0.7003; }
  95% { opacity: 0.36108; }
  100% { opacity: 0.24387; }
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Sign out link hover effect */
.sign-out-link:hover {
  color: rgb(252 165 165); /* red-300 */
  transition: color 0.2s;
}

/* Custom select styling with properly positioned chevron */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.25em 1.25em;
  padding-right: 2.5rem;
}

/* Custom checkbox styling for consistent emerald accent */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 0.25rem;
  border: 2px solid rgb(156 163 175); /* gray-400 */
  background-color: transparent;
  cursor: pointer;
  position: relative;
}

@media (prefers-color-scheme: dark) {
  input[type="checkbox"] {
    border-color: rgb(107 114 128); /* gray-500 */
  }
}

input[type="checkbox"]:checked {
  background-color: rgb(16 185 129); /* emerald-500 */
  border-color: rgb(16 185 129); /* emerald-500 */
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

input[type="checkbox"]:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgb(52 211 153 / 0.4); /* emerald-400/40 */
}

input[type="checkbox"].accent-red-500:focus {
  box-shadow: 0 0 0 2px rgb(248 113 113 / 0.4); /* red-400/40 */
}

input[type="checkbox"].accent-orange-500:focus {
  box-shadow: 0 0 0 2px rgb(251 146 60 / 0.4); /* orange-400/40 */
}

input[type="checkbox"].accent-amber-500:focus {
  box-shadow: 0 0 0 2px rgb(251 191 36 / 0.4); /* amber-400/40 */
}

input[type="checkbox"].accent-blue-500:focus {
  box-shadow: 0 0 0 2px rgb(96 165 250 / 0.4); /* blue-400/40 */
}

/* Custom radio button styling for consistent accent colors */
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 2px solid rgb(156 163 175); /* gray-400 */
  background-color: transparent;
  cursor: pointer;
  position: relative;
}

@media (prefers-color-scheme: dark) {
  input[type="radio"] {
    border-color: rgb(107 114 128); /* gray-500 */
  }
}

input[type="radio"]:checked {
  border-width: 4px;
  border-color: rgb(16 185 129); /* emerald-500 default */
}

/* Severity accent colors */
input[type="radio"].accent-red-500:checked {
  border-color: rgb(239 68 68); /* red-500 */
}

input[type="radio"].accent-orange-500:checked {
  border-color: rgb(249 115 22); /* orange-500 */
}

input[type="radio"].accent-amber-500:checked {
  border-color: rgb(245 158 11); /* amber-500 */
}

input[type="radio"].accent-blue-500:checked {
  border-color: rgb(59 130 246); /* blue-500 */
}

/* Status accent colors */
input[type="radio"].accent-purple-500:checked {
  border-color: rgb(168 85 247); /* purple-500 */
}

input[type="radio"].accent-pink-500:checked {
  border-color: rgb(236 72 153); /* pink-500 */
}

input[type="radio"].accent-emerald-500:checked {
  border-color: rgb(16 185 129); /* emerald-500 */
}

/* Checkbox accent color overrides */
input[type="checkbox"].accent-red-500:checked {
  background-color: rgb(239 68 68); /* red-500 */
  border-color: rgb(239 68 68);
}

input[type="checkbox"].accent-orange-500:checked {
  background-color: rgb(249 115 22); /* orange-500 */
  border-color: rgb(249 115 22);
}

input[type="checkbox"].accent-amber-500:checked {
  background-color: rgb(245 158 11); /* amber-500 */
  border-color: rgb(245 158 11);
}

input[type="checkbox"].accent-blue-500:checked {
  background-color: rgb(59 130 246); /* blue-500 */
  border-color: rgb(59 130 246);
}

/* Turbo Frame loading state — avoid opacity transitions which cause
   macOS compositing bugs (content in DOM but not visually rendered) */
turbo-frame[aria-busy="true"] {
  cursor: wait;
}

/* Lexxy rich text editor — dark mode overrides */
.dark {
  --lexxy-color-ink: oklch(95% 0 0);
  --lexxy-color-ink-medium: oklch(70% 0 0);
  --lexxy-color-ink-light: oklch(50% 0 0);
  --lexxy-color-ink-lighter: var(--color-gray-700);
  --lexxy-color-ink-lightest: oklch(20% 0 0);
  --lexxy-color-ink-inverted: oklch(15% 0 0);

  --lexxy-color-accent-dark: oklch(75% 0.15 260);
  --lexxy-color-accent-medium: oklch(60% 0.15 258);
  --lexxy-color-accent-light: oklch(30% 0.05 254);
  --lexxy-color-accent-lightest: oklch(25% 0.03 254);

  --lexxy-color-code-token-att: #f97583;
  --lexxy-color-code-token-comment: #6a737d;
  --lexxy-color-code-token-function: #b392f0;
  --lexxy-color-code-token-operator: #f97583;
  --lexxy-color-code-token-property: #79b8ff;
  --lexxy-color-code-token-punctuation: #e1e4e8;
  --lexxy-color-code-token-selector: #85e89d;
  --lexxy-color-code-token-variable: #ffab70;

}

/* Rich text highlight colors — matched to app palette.
   Overrides Lexxy defaults. Uses html selector to beat :root specificity. */

/* Light mode */
html {
  /* Text colors: muted, professional tones */
  --highlight-1: #92400e; /* amber-800 */
  --highlight-2: #c2410c; /* orange-700 */
  --highlight-3: #be123c; /* rose-700 */
  --highlight-4: #a21caf; /* fuchsia-700 */
  --highlight-5: #6d28d9; /* violet-700 */
  --highlight-6: #1d4ed8; /* blue-700 */
  --highlight-7: #047857; /* emerald-700 */
  --highlight-8: #0e7490; /* cyan-700 */
  --highlight-9: #4b5563; /* gray-600 */

  /* Background highlights: soft washes */
  --highlight-bg-1: rgba(245, 208, 97, 0.25);
  --highlight-bg-2: rgba(251, 146, 60, 0.2);
  --highlight-bg-3: rgba(251, 113, 133, 0.2);
  --highlight-bg-4: rgba(232, 121, 249, 0.18);
  --highlight-bg-5: rgba(167, 139, 250, 0.2);
  --highlight-bg-6: rgba(96, 165, 250, 0.2);
  --highlight-bg-7: rgba(52, 211, 153, 0.2);
  --highlight-bg-8: rgba(34, 211, 238, 0.18);
  --highlight-bg-9: rgba(156, 163, 175, 0.2);
}

/* Dark mode */
html.dark {
  /* Text colors: lighter pastels for readability */
  --highlight-1: #fbbf24; /* amber-400 */
  --highlight-2: #fb923c; /* orange-400 */
  --highlight-3: #fb7185; /* rose-400 */
  --highlight-4: #e879f9; /* fuchsia-400 */
  --highlight-5: #a78bfa; /* violet-400 */
  --highlight-6: #60a5fa; /* blue-400 */
  --highlight-7: #34d399; /* emerald-400 */
  --highlight-8: #22d3ee; /* cyan-400 */
  --highlight-9: #9ca3af; /* gray-400 */

  /* Background highlights: subtle tints */
  --highlight-bg-1: rgba(251, 191, 36, 0.12);
  --highlight-bg-2: rgba(251, 146, 60, 0.12);
  --highlight-bg-3: rgba(251, 113, 133, 0.12);
  --highlight-bg-4: rgba(232, 121, 249, 0.1);
  --highlight-bg-5: rgba(167, 139, 250, 0.12);
  --highlight-bg-6: rgba(96, 165, 250, 0.12);
  --highlight-bg-7: rgba(52, 211, 153, 0.12);
  --highlight-bg-8: rgba(34, 211, 238, 0.1);
  --highlight-bg-9: rgba(156, 163, 175, 0.1);
}

/* Lexxy rendered content — dark mode fixes */
.dark .lexxy-content {
  color: var(--color-gray-200);
}

.dark .lexxy-content a {
  color: var(--color-blue-400);
}

.dark .lexxy-content blockquote {
  border-color: var(--color-gray-600);
  color: var(--color-gray-400);
}

.dark .lexxy-content pre,
.dark .lexxy-content code {
  background: var(--color-gray-900);
  color: var(--color-gray-200);
}

.dark .lexxy-content table {
  border-color: var(--color-gray-700);
}

.dark .lexxy-content th {
  background: var(--color-gray-800);
  border-color: var(--color-gray-700);
  color: var(--color-gray-300);
}

.dark .lexxy-content td {
  border-color: var(--color-gray-700);
  color: var(--color-gray-300);
  background: transparent;
}

.dark .lexxy-content hr {
  border-color: var(--color-gray-700);
}

/* Lexxy editor — match app input styling */
lexxy-editor {
  --lexxy-color-canvas: var(--color-gray-100);
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  display: block;
  width: 100%;
  min-width: 0;
  --lexxy-toolbar-button-size: 1.75lh;
}

/* Note composer — unified editor + submit button */
.note-composer {
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  background: var(--color-gray-100);
}

.note-composer lexxy-editor {
  border: none;
  border-radius: 0;
  border-start-start-radius: calc(0.375rem - 1px);
  border-start-end-radius: calc(0.375rem - 1px);
  --lexxy-color-canvas: white;
  --lexxy-color-ink-lighter: var(--color-gray-300); /* matches note-composer border */
}

.dark .note-composer lexxy-editor {
  --lexxy-color-canvas: var(--color-gray-900);
  --lexxy-color-ink-lighter: var(--color-gray-700); /* matches note-composer border */
}

.note-composer lexxy-editor:focus-within {
  border-color: transparent;
  box-shadow: none;
}

/* Compact variant — shorter editor for inline compose */
.note-composer--compact lexxy-editor [contenteditable] {
  min-height: 2.5rem;
  padding-block-end: 0;
}

.note-composer-footer {
  background: white;
  display: flex;
  justify-content: flex-end;
  padding: 0.5rem 0.75rem;
  border-end-start-radius: calc(0.375rem - 1px);
  border-end-end-radius: calc(0.375rem - 1px);
  position: relative;
  margin-top: -1px;
}

:where(.dark, .dark *) .note-composer-footer {
  background: var(--color-gray-900);
}

.note-composer:focus-within {
  border-color: var(--color-emerald-400);
  box-shadow: 0 0 0 1px var(--color-emerald-400);
}

.dark .note-composer {
  border-color: var(--color-gray-700);
  background: var(--color-gray-800);
}

.dark .note-composer:focus-within {
  border-color: var(--color-emerald-400);
  box-shadow: 0 0 0 1px var(--color-emerald-400);
}

/* Note bubble — visually frames user-authored rich text */
.hide-field-changes .activity-field-change {
  display: none;
}

.note-bubble {
  background: var(--color-gray-100);
  border-radius: 0.5rem;
  padding: 0.625rem 0.75rem;
}

.note-bubble .lexxy-content > :first-child {
  margin-top: 0;
}

.note-bubble .lexxy-content > :last-child {
  margin-bottom: 0;
}

.dark .note-bubble {
  background: var(--color-gray-800);
}

/* Variant for bubbles on the page background (not inside a card) */
.note-bubble--on-page {
  background: white;
  border: 1px solid var(--color-gray-200);
}

.dark .note-bubble--on-page {
  background: var(--color-gray-900);
  border-color: var(--color-gray-700);
}

/* Variant for customer messages (blue tint) */
.note-bubble--customer {
  background: color-mix(in srgb, var(--color-blue-50) 50%, transparent);
}

.dark .note-bubble--customer {
  background: color-mix(in srgb, var(--color-blue-900) 10%, transparent);
}

/* Variant for internal notes (amber tint) */
.note-bubble--internal {
  background: color-mix(in srgb, var(--color-amber-50) 50%, transparent);
}

.dark .note-bubble--internal {
  background: color-mix(in srgb, var(--color-amber-900) 10%, transparent);
}

lexxy-editor:focus-within {
  border-color: var(--color-emerald-400);
  outline: none;
  box-shadow: 0 0 0 1px var(--color-emerald-400);
}

.dark lexxy-editor {
  --lexxy-color-canvas: var(--color-gray-800);
  --lexxy-color-ink-lighter: var(--color-gray-700);
  border-color: var(--color-gray-700);
}

.dark lexxy-editor:focus-within {
  border-color: var(--color-emerald-400);
  box-shadow: 0 0 0 1px var(--color-emerald-400);
}

/* Field-level error highlighting for lexxy editor */
.field-error lexxy-editor {
  border-color: var(--color-red-500);
}

.field-error lexxy-editor:focus-within {
  border-color: var(--color-red-500);
  box-shadow: 0 0 0 1px var(--color-red-500);
}

.dark .field-error lexxy-editor {
  border-color: var(--color-red-500);
}

.dark .field-error lexxy-editor:focus-within {
  border-color: var(--color-red-500);
  box-shadow: 0 0 0 1px var(--color-red-500);
}

/* Override Lexxy's image constraints on attachments so they span full width */
.attachment--preview {
  inline-size: 100%;
  padding: 0;
}

.attachment--preview img {
  inline-size: 100%;
  max-block-size: none;
}

/* ── Collapsible sidebar ─────────────────────────────────────────────── */

/* Prevent text wrapping during width animation */
aside[data-sidebar-state] {
  white-space: nowrap;
}

/* Smooth width + margin transition for toggle click */
aside[data-sidebar-state].sidebar-animating {
  transition: width 200ms ease-in-out;
}

aside[data-sidebar-state] ~ main.sidebar-animating {
  transition: margin-left 200ms ease-in-out;
}

/* Collapsed: narrow icon-only sidebar */
aside[data-sidebar-state="collapsed"] {
  width: 4rem;
}

/* Hide text/badges/chevrons when collapsed */
aside[data-sidebar-state="collapsed"] .sidebar-label,
aside[data-sidebar-state="collapsed"] .sidebar-section-header,
aside[data-sidebar-state="collapsed"] .sidebar-badge,
aside[data-sidebar-state="collapsed"] .sidebar-chevron {
  display: none;
}

/* Collapsed nav: center icons in the narrow strip */
aside[data-sidebar-state="collapsed"] nav {
  padding-left: 0;
  padding-right: 0;
}

aside[data-sidebar-state="collapsed"] nav a,
aside[data-sidebar-state="collapsed"] nav button {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
}

/* Collapsed org selector: show only logo centered */
aside[data-sidebar-state="collapsed"] .sidebar-org-selector {
  padding: 0.75rem 0;
  display: flex;
  justify-content: center;
}

aside[data-sidebar-state="collapsed"] .sidebar-org-selector > div {
  margin: 0;
}

aside[data-sidebar-state="collapsed"] .sidebar-org-selector button {
  justify-content: center;
  padding: 0.25rem;
  width: auto;
}

/* Collapsed user menu: show only avatar centered */
aside[data-sidebar-state="collapsed"] .sidebar-user-section {
  padding: 0.75rem 0;
  display: flex;
  justify-content: center;
}

aside[data-sidebar-state="collapsed"] .sidebar-user-section > div {
  margin: 0;
}

aside[data-sidebar-state="collapsed"] .sidebar-user-section button {
  justify-content: center;
  padding: 0.25rem;
  width: auto;
}

/* Collapsed section dividers: thin line, no extra spacing */
aside[data-sidebar-state="collapsed"] .sidebar-section-divider {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  padding-top: 0.25rem;
  padding-bottom: 0;
}

/* Ensure dropdown menus are wide enough when sidebar is collapsed */
aside[data-sidebar-state="collapsed"] [data-dropdown-target="menu"] {
  min-width: 16rem;
}

/* Collapse toggle icon swap */
aside[data-sidebar-state="collapsed"] .sidebar-collapse-icon-close {
  display: none;
}

aside[data-sidebar-state="collapsed"] .sidebar-collapse-icon-open {
  display: inline;
}

/* Collapse toggle: center when collapsed */
aside[data-sidebar-state="collapsed"] .sidebar-collapse-toggle {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}