/*
 * Dark mode overrides — GitHub "dark dimmed" palette.
 *
 * These are unlayered rules and therefore beat Tailwind's @layer utilities at
 * equal specificity. The html.dark ancestor also gives every selector here
 * higher specificity than Tailwind's bare utility classes, so the cascade is
 * reliable without !important (except where noted).
 *
 * Color legend:
 *   #1c2128  canvas-inset  (page background)
 *   #22272e  canvas-default (cards, panels, navbar)
 *   #2d333b  canvas-subtle  (hover surfaces, footer, badges)
 *   #373e47  border-muted
 *   #444c56  border-default
 *   #adbac7  fg-default     (primary text)
 *   #909dab  fg-emphasis
 *   #768390  fg-muted       (secondary text)
 *   #636e7b  fg-subtle      (dim text)
 *   #545d68  fg-placeholder
 */

.app-viewport {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.app-navbar,
.app-footer,
.viewport-chrome {
  flex-shrink: 0;
}

.app-shell,
.viewport-fill {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.app-shell {
  width: 100%;
}

.app-main {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: clip;
  overflow-y: auto;
}

.app-main:has(> .viewport-fill) {
  padding-bottom: 0;
}

.job-preview-actions {
  align-items: center;
  display: flex;
  gap: 0.5rem;
}

.job-preview-loading {
  align-items: center;
  color: #52525b;
  display: none;
  font-size: 0.75rem;
  gap: 0.375rem;
}

form[aria-busy="true"] .job-preview-loading {
  display: inline-flex;
}

.job-preview-spinner {
  animation: job-preview-spin 0.8s linear infinite;
  border: 1px solid #d4d4d8;
  border-radius: 9999px;
  border-top-color: #18181b;
  height: 0.75rem;
  width: 0.75rem;
}

html[data-navigation-spinner-cursor="true"],
html[data-navigation-spinner-cursor="true"] * {
  cursor: none !important;
}

.navigation-spinner-cursor {
  height: 0.875rem;
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  translate: -50% -50%;
  width: 0.875rem;
  z-index: 9999;
}

@keyframes job-preview-spin {
  to {
    transform: rotate(360deg);
  }
}

.scroll-region {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.job-selection-checkbox {
  accent-color: #475569;
}

.job-selection-checkbox:focus-visible {
  outline: 2px solid #64748b;
  outline-offset: 2px;
}

.job-row-selected {
  background-color: #e8eef5;
}

.job-row-keyboard-selected {
  background-color: #f4f7fb;
  transition-property: none;
}

.job-asset-keyboard-selected {
  background-color: #f4f7fb;
  box-shadow: inset 0 0 0 1px #cbd5e1;
}

.resume-library-keyboard-selected {
  background-color: #f4f7fb;
  box-shadow: inset 0 0 0 1px #cbd5e1;
}

.resume-entry-keyboard-selected {
  background-color: #f4f7fb;
  box-shadow: inset 0 0 0 1px #cbd5e1;
}

.resume-builder-shell {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  min-height: 0;
}

.resume-builder-sidebar {
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 10;
}

.resume-builder-list-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* padding-right: 0.25rem; */
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
  padding-right: 0;
  scroll-padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
}

.resume-preview-toggle-button {
  display: none;
}

.resume-compiler-layout {
  transition: grid-template-columns 180ms ease;
}

.resume-entry-content-line::after {
  clear: both;
  content: "";
  display: block;
}

.resume-entry-content-body {
  min-width: 0;
}

.resume-entry-actions {
  align-items: center;
  float: right;
  flex-shrink: 0;
  margin: 0.125rem 0 0.25rem 0.5rem;
}

.resume-entry-actions form {
  display: inline-flex;
  margin: 0;
}

.resume-entry-branch-toggle {
  align-items: center;
  border: 1px solid #e4e4e7;
  border-radius: 0.125rem;
  color: #a1a1aa;
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  height: 1.25rem;
  justify-content: center;
  padding: 0;
  transition: border-color 150ms ease, color 150ms ease;
  width: 1.25rem;
}

.resume-entry-branch-toggle:hover {
  border-color: #d4d4d8;
  color: #52525b;
}

.resume-entry-fold-closed {
  display: none;
}

.resume-entry-branch-toggle[aria-expanded="false"] .resume-entry-fold-open {
  display: none;
}

.resume-entry-branch-toggle[aria-expanded="false"] .resume-entry-fold-closed {
  display: block;
}

.resume-selection-reason {
  clear: both;
}

.resume-entry-children-root {
  margin-left: 1.25rem;
}

.resume-entry-children-nested {
  margin-left: 0.75rem;
}

@media (min-width: 64rem) {
  .resume-builder-shell {
    align-items: stretch;
    gap: 1.5rem;
  }

  .resume-builder-sidebar {
    width: 100%;
  }

  .resume-builder-list-scroll {
    height: 100%;
  }
}

@media (min-width: 40rem) {
  .resume-entry-content-line {
    align-items: flex-start;
    display: flex;
    gap: 0.75rem;
  }

  .resume-entry-content-body {
    flex: 1 1 auto;
  }

  .resume-entry-actions {
    float: none;
    margin: 0.125rem 0 0;
    order: 2;
  }

  .resume-entry-content-line::after {
    content: none;
  }

  .resume-entry-children-root {
    margin-left: 2.25rem;
  }

  .resume-entry-children-nested {
    margin-left: 1.75rem;
  }
}

html.dark {
  color-scheme: dark;

  /* ── Backgrounds ─────────────────────────────────────────── */

  & .bg-white        { background-color: #22272e; }
  & .bg-zinc-50      { background-color: #2d333b; }
  & .bg-zinc-100     { background-color: #2d333b; }
  & .bg-zinc-200     { background-color: #373e47; }
  & .bg-zinc-900     { background-color: #373e47; }
  & .bg-black        { background-color: #373e47; }
  & .bg-amber-50     { background-color: rgba(187, 128, 9, 0.15); }
  & .job-row-selected { background-color: #2a3038; }
  & .job-row-keyboard-selected {
    background-color: #252b33;
  }
  & .job-asset-keyboard-selected {
    background-color: #252b33;
    box-shadow: inset 0 0 0 1px #444c56;
  }
  & .resume-library-keyboard-selected {
    background-color: #252b33;
    box-shadow: inset 0 0 0 1px #444c56;
  }
  & .resume-entry-keyboard-selected {
    background-color: #252b33;
    box-shadow: inset 0 0 0 1px #444c56;
  }

  /* gray-* variants used in resume entry views */
  & .bg-gray-100     { background-color: #2d333b; }
  & .bg-gray-200     { background-color: #373e47; }

  /* ── Borders ─────────────────────────────────────────────── */

  & .border-zinc-100 { border-color: #2d333b; }
  & .border-zinc-200 { border-color: #373e47; }
  & .border-zinc-300 { border-color: #444c56; }
  & .border-zinc-400 { border-color: #545d68; }
  & .border-zinc-500 { border-color: #636e7b; }
  & .border-zinc-600 { border-color: #768390; }
  & .border-zinc-700 { border-color: #909dab; }
  & .border-zinc-800 { border-color: #adbac7; }
  & .border-zinc-900 { border-color: #adbac7; }
  & .border-amber-200 { border-color: #9e6a03; }
  & .border-gray-200 { border-color: #373e47; }
  & .border-gray-300 { border-color: #373e47; }
  & .border-red-200  { border-color: #5f292f; }
  & .border-red-300  { border-color: #7d333b; }

  /* divide-y / divide-x siblings share the border-color property */
  & .divide-zinc-100 > :not(:last-child),
  & .divide-zinc-100 > * + * { border-color: #2d333b; }
  & .divide-zinc-200 > :not(:last-child),
  & .divide-zinc-200 > * + * { border-color: #373e47; }

  /* ── Text — zinc ─────────────────────────────────────────── */

  & .text-zinc-900 { color: #adbac7; }
  & .text-zinc-800 { color: #adbac7; }
  & .text-zinc-700 { color: #909dab; }
  & .text-zinc-600 { color: #768390; }
  & .text-zinc-500 { color: #636e7b; }
  & .text-zinc-400 { color: #545d68; }
  & .text-zinc-300 { color: #444c56; }
  & .text-amber-800 { color: #f2cc60; }
  & .text-amber-700 { color: #e3b341; }

  /* ── Text — gray (resume entry / sidebar views) ──────────── */

  & .text-gray-800 { color: #adbac7; }
  & .text-gray-700 { color: #909dab; }
  & .text-gray-600 { color: #768390; }
  & .text-gray-500 { color: #636e7b; }
  & .text-gray-400 { color: #545d68; }
  & .text-gray-300 { color: #444c56; }

  /* ── Hover — backgrounds ─────────────────────────────────── */

  & .hover\:bg-zinc-50:hover   { background-color: #2d333b; }
  & .hover\:bg-zinc-100:hover  { background-color: #373e47; }
  & .hover\:bg-zinc-200:hover  { background-color: #444c56; }
  & .hover\:bg-zinc-800:hover  { background-color: #444c56; }
  & .hover\:bg-gray-800:hover  { background-color: #444c56; }
  & .hover\:bg-red-50:hover    { background-color: rgba(95, 41, 47, 0.25); }

  /* table row hover (50/80 opacity variant) */
  & .hover\:bg-zinc-50\/80:hover { background-color: rgba(45, 51, 59, 0.8); }
  & .group:hover .group-hover\:bg-zinc-200 { background-color: #373e47; }

  /* ── Hover — text ────────────────────────────────────────── */

  & .hover\:text-zinc-900:hover { color: #adbac7; }
  & .hover\:text-zinc-700:hover { color: #909dab; }
  & .hover\:text-gray-600:hover { color: #768390; }
  & .hover\:text-gray-700:hover { color: #909dab; }
  & .hover\:text-red-700:hover  { color: #ff938a; }

  /* ── Hover — borders ─────────────────────────────────────── */

  & .hover\:border-gray-400:hover { border-color: #444c56; }
  & .hover\:border-zinc-400:hover { border-color: #444c56; }
  & .hover\:border-red-300:hover  { border-color: #7d333b; }

  /* ── Focus ───────────────────────────────────────────────── */

  & .focus\:border-zinc-400:focus { border-color: #636e7b; }
  & .focus\:border-gray-400:focus  { border-color: #636e7b; }

  /* ── Form elements ───────────────────────────────────────── */

  & input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
  & textarea,
  & select {
    background-color: #22272e;
    color: #adbac7;
    border-color: #373e47;
  }

  & input[type="file"]::file-selector-button {
    background-color: #373e47;
    color: #adbac7;
  }

  & ::placeholder { color: #545d68; }

  & select option {
    background-color: #22272e;
    color: #adbac7;
  }

  & .accent-black {
    accent-color: auto;
  }

  & .job-preview-loading {
    color: #768390;
  }

  & .job-preview-actions a {
    color: #768390;
  }

  & .job-preview-actions a:hover {
    color: #adbac7;
  }

  & .job-preview-spinner {
    border-color: #444c56;
    border-top-color: #adbac7;
  }

  /* ── Misc ────────────────────────────────────────────────── */

  /* dashed border add-entry button */
  & .border-dashed { border-color: #444c56; }
}

/* ── Drag-and-drop visual feedback (SortableJS) ──────────────── */

.sortable-chosen {
  cursor: grabbing;
}

.sortable-drag,
.sortable-ghost {
  opacity: 1;
}

[data-section-drag-handle] {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

[data-drag-handle] {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.resume-section-drag-active {
  cursor: grabbing;
  user-select: none;
}

.resume-entry-drag-active {
  cursor: grabbing;
  user-select: none;
}

.resume-section-dragging {
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.08);
  pointer-events: none;
  position: fixed;
  z-index: 60;
}

.resume-entry-dragging {
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12), 0 3px 10px rgba(15, 23, 42, 0.08);
  pointer-events: none;
  position: fixed;
  z-index: 70;
}

.resume-section-drop-placeholder {
  border: 1px dashed #cbd5e1;
  border-radius: 0.125rem;
  background: rgba(241, 245, 249, 0.55);
}

.resume-entry-drop-placeholder {
  border: 1px dashed #cbd5e1;
  border-radius: 0.125rem;
  background: rgba(241, 245, 249, 0.55);
}

.document-preview-window {
  max-width: 100%;
}

.document-preview-viewport {
  background-color: #f4f4f5;
  border: 1px solid #d4d4d8;
  border-radius: 0.125rem;
  box-sizing: border-box;
  margin-inline: auto;
  max-width: 100%;
  overflow: hidden;
  padding: 1.25rem;
  overscroll-behavior: contain;
  width: min(100%, 34rem);
}

.document-preview-page {
  aspect-ratio: 8.5 / 11;
  background-color: #fff;
  border: 1px solid #d4d4d8;
  border-radius: 0.125rem;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  box-sizing: border-box;
  margin-inline: auto;
  overflow: hidden;
  padding: 1.8rem 2.2rem;
  width: min(100%, 31rem);
}

.document-preview-page-content {
  height: 100%;
  overflow: hidden;
  width: 100%;
}

.document-preview-scale {
  --document-preview-scale: 0.53;
  height: 100%;
  transform-origin: top left;
  width: 100%;
}

.document-preview-flow {
  background-color: transparent;
  border: 0;
  break-inside: auto;
  column-fill: auto;
  column-gap: 6rem;
  transition: transform 0.18s ease;
  will-change: transform;
}

.document-preview-flow .resume {
  display: block;
}

.document-preview-flow .resume h2,
.document-preview-flow .resume .row {
  break-after: avoid;
  break-inside: avoid;
}

.document-preview-flow .resume section.employer,
.document-preview-flow .resume section.education,
.document-preview-flow .resume section.project,
.document-preview-flow .resume section.volunteer,
.document-preview-flow .resume.cover-letter .letter-signoff {
  break-inside: avoid;
}

@media (min-width: 80rem) {
  .resume-preview-toggle-button {
    display: inline-flex;
  }

  .resume-compiler-editor[data-preview-hidden="true"] .resume-compiler-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .asset-editor-preview {
    position: fixed;
    right: max(1.5rem, calc((100vw - 50rem) / 2 - 12.5rem));
    top: 7.2rem;
    width: min(31rem, calc(100vw - 42rem));
    z-index: 15;
  }

  .asset-editor-preview .document-preview-viewport {
    width: min(100%, calc((100dvh - 18rem) * 8.5 / 11 + 2.5rem));
  }

  .resume-draft-editor .asset-editor-preview {
    top: 6.25rem;
  }
}

@media (min-width: 80rem) {
  .asset-editor-preview {
    width: min(35rem, calc(100vw - 42rem));
  }
}

@media (min-width: 80rem) and (max-height: 48rem) {
  .resume-preview-toggle-button {
    display: none;
  }

  .asset-editor-preview {
    display: none;
  }

  .live-preview-fallback-action {
    display: inline-flex;
  }
}

html.dark .document-preview-viewport {
  background-color: #2d333b;
  border-color: #444c56;
}

html.dark .document-preview-page {
  background-color: #373e47;
  border-color: #545d68;
}

.resume-section-fold-closed {
  display: none;
}

.resume-status-fold-summary::-webkit-details-marker {
  display: none;
}

.inline-entry-submit:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

details:not([open]) > summary .resume-section-fold-open {
  display: none;
}

details:not([open]) > summary .resume-section-fold-closed {
  display: block;
}