/*
JobMee! final theme + Application Studio save visibility patch

Place at:
  JobMee/static/final_theme_save_fix.css

Load AFTER:
  styles.css
  profile_layout_fix.css (if used)
  final_quick_fixes.css (if used)
*/

/* =========================================================
   THEME-SAFE FORM CONTROLS
   ========================================================= */

html[data-theme="light"] {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

/* Use theme variables for every editable/native control in the app. */
.app-shell input:not([type="checkbox"]):not([type="radio"]),
.app-shell textarea,
.app-shell select,
.modal input:not([type="checkbox"]):not([type="radio"]),
.modal textarea,
.modal select,
.drawer input:not([type="checkbox"]):not([type="radio"]),
.drawer textarea,
.drawer select {
  background: var(--field) !important;
  color: var(--app-text) !important;
  border-color: var(--app-line) !important;
  caret-color: var(--accent);
  box-shadow: none;
}

.app-shell input::placeholder,
.app-shell textarea::placeholder,
.modal input::placeholder,
.modal textarea::placeholder,
.drawer input::placeholder,
.drawer textarea::placeholder {
  color: var(--app-muted) !important;
  opacity: .86;
}

/* Fix the Opportunities sorting menu in dark mode. */
#view-jobs .toolbar select,
#jobSort {
  min-width: 160px;
  height: 48px;
  padding: 0 42px 0 16px !important;
  border: 1px solid var(--app-line) !important;
  border-radius: 14px;
  background-color: var(--field) !important;
  color: var(--app-text) !important;
  font-weight: 700;
  line-height: 48px;
  outline: none;
  cursor: pointer;
  color-scheme: inherit;
  transition:
    border-color .2s ease,
    background-color .2s ease,
    box-shadow .2s ease,
    color .2s ease;
}

#view-jobs .toolbar select:hover,
#view-jobs .toolbar select:focus,
#jobSort:hover,
#jobSort:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}

/* Native dropdown menus need explicit option colors on Windows. */
html[data-theme="dark"] select,
html[data-theme="dark"] select option,
html[data-theme="dark"] select optgroup {
  background-color: #111111 !important;
  color: #f5f5f1 !important;
}

html[data-theme="light"] select,
html[data-theme="light"] select option,
html[data-theme="light"] select optgroup {
  background-color: #ffffff !important;
  color: #111111 !important;
}

/* Ensure every common text surface respects the active theme. */
.app-shell label,
.app-shell strong,
.app-shell h1,
.app-shell h2,
.app-shell h3,
.app-shell h4,
.app-shell p,
.app-shell li,
.app-shell small,
.modal label,
.modal strong,
.modal h1,
.modal h2,
.modal h3,
.modal h4,
.modal p,
.modal li,
.modal small,
.drawer label,
.drawer strong,
.drawer h1,
.drawer h2,
.drawer h3,
.drawer h4,
.drawer p,
.drawer li,
.drawer small {
  text-rendering: optimizeLegibility;
}

.app-shell .panel,
.modal,
.drawer,
.application-card,
.job-card,
.studio-job-item,
.academy-job-item,
.interview-job-item,
.finder-result,
.breakdown-item,
.insight-item,
.evidence-row {
  color: var(--app-text);
}

/* Buttons keep readable foregrounds in both themes. */
.app-shell .ghost-button,
.modal .ghost-button,
.drawer .ghost-button {
  background: var(--app-panel-2);
  border-color: var(--app-line);
  color: var(--app-text);
}

.app-shell .ghost-button:hover,
.modal .ghost-button:hover,
.drawer .ghost-button:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, var(--app-panel-2));
}

.app-shell .primary-button,
.modal .primary-button,
.drawer .primary-button {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.app-shell .icon-button,
.modal .icon-button,
.drawer .icon-button,
.app-shell .text-button {
  color: var(--app-text);
}

/* Browser autofill can otherwise force bright fields in dark mode. */
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus,
html[data-theme="dark"] textarea:-webkit-autofill,
html[data-theme="dark"] select:-webkit-autofill {
  -webkit-text-fill-color: #f5f5f1 !important;
  -webkit-box-shadow: 0 0 0 1000px #111111 inset !important;
  box-shadow: 0 0 0 1000px #111111 inset !important;
  caret-color: #d6ff3f;
}

html[data-theme="light"] input:-webkit-autofill,
html[data-theme="light"] input:-webkit-autofill:hover,
html[data-theme="light"] input:-webkit-autofill:focus,
html[data-theme="light"] textarea:-webkit-autofill,
html[data-theme="light"] select:-webkit-autofill {
  -webkit-text-fill-color: #111111 !important;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
}

/* Date/file controls also follow the theme. */
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="time"],
html[data-theme="dark"] input[type="datetime-local"] {
  color-scheme: dark;
}

html[data-theme="light"] input[type="date"],
html[data-theme="light"] input[type="time"],
html[data-theme="light"] input[type="datetime-local"] {
  color-scheme: light;
}

/* =========================================================
   APPLICATION STUDIO — OBVIOUS PERSISTENT SAVE ACTION
   ========================================================= */

.studio-save-banner {
  position: sticky;
  top: 82px;
  z-index: 18;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  margin: 18px 0;
  padding: 15px 16px 15px 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 46%, var(--app-line));
  border-radius: 18px;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--accent) 10%, var(--app-panel)),
      var(--app-panel)
    );
  color: var(--app-text);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .14);
  backdrop-filter: blur(20px);
  animation: studioSaveEnter .35s var(--ease);
}

@keyframes studioSaveEnter {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.studio-save-banner-copy {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px;
  align-items: center;
}

.studio-save-pulse {
  grid-row: 1 / 3;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent);
  animation: studioSavePulse 2s ease-out infinite;
}

@keyframes studioSavePulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 42%, transparent);
  }
  70% {
    box-shadow: 0 0 0 10px transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

.studio-save-banner-copy strong {
  display: block;
  color: var(--app-text);
  font: 800 14px/1.25 var(--font-display);
}

.studio-save-banner-copy span {
  display: block;
  color: var(--app-muted);
  font-size: 11px;
  line-height: 1.45;
}

.studio-save-banner .primary-button {
  flex: 0 0 auto;
  min-width: 184px;
  min-height: 48px;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 22%, transparent);
}

.studio-save-banner.is-saved .studio-save-pulse {
  animation: none;
  box-shadow: none;
}

.studio-save-banner.is-dirty {
  border-color: var(--accent);
}

.studio-save-banner.is-saving {
  opacity: .84;
}

.studio-save-banner.is-saving .studio-save-pulse {
  animation-duration: .7s;
}

/* Keep the original bottom action row visible and visually secondary. */
.studio-actions {
  position: relative;
  z-index: 2;
  margin-top: 28px !important;
  padding: 16px;
  border: 1px solid var(--app-line);
  border-radius: 18px;
  background: var(--app-panel-2);
}

.studio-actions [data-save-application] {
  min-width: 170px;
  box-shadow: 0 9px 24px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Keep the save banner clear of a collapsed/mobile header. */
@media (max-width: 900px) {
  #view-jobs .toolbar select,
  #jobSort {
    width: 100%;
    min-width: 0;
  }

  .studio-save-banner {
    top: 72px;
    align-items: stretch;
    flex-direction: column;
  }

  .studio-save-banner .primary-button {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .studio-save-banner {
    top: 64px;
    margin: 14px 0;
    padding: 14px;
    border-radius: 16px;
  }

  .studio-save-banner-copy {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .studio-actions {
    display: grid !important;
    grid-template-columns: 1fr;
  }

  .studio-actions > * {
    width: 100%;
  }
}