/* ==========================================================================
   Moonfire ATS — Apple-style skin
   File: /assets/css/apple.css   (loaded AFTER app.css; app.css is untouched)

   Palette and type follow apple.com: #f5f5f7 canvas, #1d1d1f ink, #6e6e73 secondary,
   #0071e3 buttons, #0066cc links, 18px card radius, pill buttons, frosted header,
   SF Pro. SF itself is licensed for Apple platforms, so the stack asks for it first
   (real SF on iPhone, iPad and Mac) and falls back to Inter, its closest open match,
   on Windows and Android.

   To go back to the old look, delete the <link> to this file in core/Layout.php.
   ========================================================================== */

:root {
  --mf-navy:        #2c2c2e;   /* Apple charcoal: dark tiles and dark buttons, never pure black */
  --mf-accent:      #0071e3;
  --mf-accent-dark: #0066cc;
  --mf-accent-ink:  #0071e3;
  --mf-accent-soft: #f0f7ff;
  --mf-accent-mid:  #cfe4ff;
  --mf-ring:        rgba(0, 113, 227, .30);

  --ap-font:  -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ap-ease:  cubic-bezier(.28, .11, .32, 1);
  --ap-line:  rgba(0, 0, 0, .08);
}

/* ---------------------------------------------------------------- type */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ap-font);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -.012em;
  font-feature-settings: "kern", "liga", "calt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button, input, select, textarea { font-family: inherit; letter-spacing: inherit; }
h1, h2, h3 { letter-spacing: -.022em; }
h1 { line-height: 1.08; font-weight: 700; }
h2 { line-height: 1.12; }
.font-extrabold { font-weight: 700; }
.tracking-tight { letter-spacing: -.025em; }
::selection { background: rgba(0, 113, 227, .22); }

/* Careers hero: the big, calm Apple headline. */
#hero-title { font-size: clamp(2.5rem, 5.6vw, 3.75rem); line-height: 1.04; letter-spacing: -.035em; font-weight: 700; }

/* ---------------------------------------------------------------- header */
header.sticky {
  background: rgba(251, 251, 253, .78);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 1px solid var(--ap-line);
}
header.sticky > div { height: 3.5rem; }

/* ---------------------------------------------------------------- cards */
.mf-card {
  background: #fff;
  border: 0;
  border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .035), 0 10px 30px -14px rgba(0, 0, 0, .10);
  transition: box-shadow .35s var(--ap-ease), transform .35s var(--ap-ease);
}
.mf-card-hover:hover {
  border: 0;
  transform: translateY(-3px) scale(1.004);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 22px 44px -18px rgba(0, 0, 0, .20);
}
.rounded-3xl { border-radius: 28px; }
.rounded-2xl { border-radius: 20px; }
.rounded-xl  { border-radius: 14px; }

/* ---------------------------------------------------------------- buttons */
.mf-btn {
  border-radius: 980px;
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: -.01em;
  padding: .62rem 1.3rem;
  transition: background-color .25s var(--ap-ease), box-shadow .25s var(--ap-ease), transform .25s var(--ap-ease), color .25s var(--ap-ease);
}
.mf-btn:active:not(:disabled) { transform: scale(.975); }
.mf-btn-primary { background: #0071e3; color: #fff; }
.mf-btn-primary:hover:not(:disabled) { background: #0077ed; box-shadow: none; }
.mf-btn-primary:active:not(:disabled) { background: #006edb; }
.mf-btn-dark { background: #2c2c2e; color: #fff; }
.mf-btn-dark:hover:not(:disabled) { background: #444446; }
.mf-btn-ghost { background: transparent; color: #0066cc; border-color: rgba(0, 102, 204, .55); }
.mf-btn-ghost:hover:not(:disabled) { background: rgba(0, 113, 227, .08); border-color: #0066cc; }
.mf-btn-danger { background: transparent; color: #d70015; border-color: rgba(215, 0, 21, .35); }
.mf-btn-danger:hover:not(:disabled) { background: rgba(215, 0, 21, .06); border-color: #d70015; }

/* ---------------------------------------------------------------- fields */
.mf-input.mf-input, .mf-select.mf-select, .mf-textarea.mf-textarea {
  border: 1px solid #d2d2d7;
  border-radius: 12px;
  padding: .75rem 1rem;
  font-size: 1rem;
  color: #1d1d1f;
  background: #fff;
}
.mf-input.mf-input::placeholder, .mf-textarea.mf-textarea::placeholder { color: #86868b; }
.mf-input.mf-input:focus, .mf-select.mf-select:focus, .mf-textarea.mf-textarea:focus {
  border-color: #0071e3;
  box-shadow: 0 0 0 4px rgba(0, 113, 227, .22);
}
.mf-input.mf-input:disabled, .mf-textarea.mf-textarea:disabled { background: #f5f5f7; color: #86868b; }
/* File pickers: the browser's grey square button becomes a rounded pill, and the field is rounded to match. */
input[type="file"].mf-input.mf-input { padding: .5rem .6rem; border-radius: 980px; color: #6e6e73; font-size: .9375rem; cursor: pointer; }
input[type="file"].mf-input::file-selector-button {
  margin-right: .85rem; padding: .5rem 1.1rem; border: 0; border-radius: 980px;
  background: rgba(0, 113, 227, .1); color: #0066cc; font: inherit; font-weight: 600; cursor: pointer;
  transition: background-color .2s;
}
input[type="file"].mf-input:hover::file-selector-button { background: rgba(0, 113, 227, .18); }
[data-theme="dark"] input[type="file"].mf-input.mf-input { color: #a1a1a6; }
[data-theme="dark"] input[type="file"].mf-input::file-selector-button { background: rgba(41, 151, 255, .18); color: #2997ff; }
[data-theme="dark"] input[type="file"].mf-input:hover::file-selector-button { background: rgba(41, 151, 255, .28); }
.mf-label { font-size: .8125rem; font-weight: 600; color: #1d1d1f; letter-spacing: -.005em; }
.mf-label > svg { color: #86868b; }
.mf-hint { color: #6e6e73; }
.mf-error { color: #d70015; }
/* A card that holds a problem (photo missing, nothing to show recruiters): thin red frame. */
.mf-card.mf-card-invalid, .mf-card:has(.is-invalid) { scroll-margin-top: 5rem; }
.mf-card.mf-card-invalid { box-shadow: 0 0 0 1.5px #ff3b30, 0 10px 30px -14px rgba(255, 59, 48, .28); }
[data-theme="dark"] .mf-card.mf-card-invalid { box-shadow: 0 0 0 1.5px #ff453a, 0 10px 30px -14px rgba(0, 0, 0, .6); }

/* ---------------------------------------------------------------- chips, misc */
.mf-chip { border-radius: 980px; font-weight: 600; letter-spacing: 0; }
.mf-empty { color: #6e6e73; }
.mf-empty svg { color: #d2d2d7; }
.mf-toast, .mf-modal { border-radius: 18px; }
.mf-scroll::-webkit-scrollbar-thumb { background: #c7c7cc; background-clip: content-box; }
.mf-scroll::-webkit-scrollbar-thumb:hover { background: #8e8e93; background-clip: content-box; }

/* Links inside running text: Apple's #0066cc, underlined on hover. */
a.text-brand-600:hover, a.text-brand-700:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- dark: soft Apple greys */
[data-theme="dark"] {
  --mf-d-canvas: #1c1c1e;   /* Apple system gray 6, not black */
  --mf-d-panel:  #2c2c2e;
  --mf-d-raised: #3a3a3c;
  --mf-d-sunken: #232325;
  --mf-d-line:   #48484a;
  --mf-d-line-2: #636366;
  --mf-d-ink:    #f5f5f7;
  --mf-d-ink-2:  #d2d2d7;
  --mf-d-ink-3:  #a1a1a6;
  --mf-d-accent: #2997ff;
  --ap-line:     rgba(255, 255, 255, .12);
}
[data-theme="dark"] header.sticky { background: rgba(44, 44, 46, .72); }
[data-theme="dark"] .mf-card { background: #2c2c2e; box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 16px 40px -18px rgba(0, 0, 0, .55); }
[data-theme="dark"] .mf-btn-primary { background: #0a84ff; color: #fff; }
[data-theme="dark"] .mf-btn-primary:hover:not(:disabled) { background: #3395ff; }
[data-theme="dark"] .mf-btn-dark { background: #f5f5f7; color: #2c2c2e; }
[data-theme="dark"] .mf-btn-dark:hover:not(:disabled) { background: #e8e8ed; }
[data-theme="dark"] .mf-btn-ghost { color: #2997ff; border-color: rgba(41, 151, 255, .55); }
[data-theme="dark"] .mf-btn-ghost:hover:not(:disabled) { background: rgba(41, 151, 255, .12); border-color: #2997ff; }
[data-theme="dark"] .mf-input.mf-input, [data-theme="dark"] .mf-select.mf-select, [data-theme="dark"] .mf-textarea.mf-textarea {
  background: #232325; border-color: #636366; color: #f5f5f7;
}
[data-theme="dark"] .mf-input.mf-input:focus, [data-theme="dark"] .mf-select.mf-select:focus, [data-theme="dark"] .mf-textarea.mf-textarea:focus {
  border-color: #0a84ff; box-shadow: 0 0 0 4px rgba(10, 132, 255, .30);
}
[data-theme="dark"] .mf-label { color: #f5f5f7; }

@media (prefers-reduced-motion: reduce) {
  .mf-card, .mf-btn { transition: none; }
  .mf-card-hover:hover { transform: none; }
}

/* Resume dropzone: breathing room inside the dashed / green box in every state. */
.mf-dropzone { padding: 1.25rem 1.5rem; border-radius: 1.125rem; }
.mf-dropzone [data-dz-idle] { padding: .75rem 0; }
.mf-dropzone [data-dz-done] > .flex { gap: 1rem; }
.mf-dropzone [data-dz-done] .mf-hint { margin-top: 1rem; padding-top: .875rem; border-top: 1px solid rgba(0, 0, 0, .08); }
[data-theme="dark"] .mf-dropzone [data-dz-done] .mf-hint { border-top-color: rgba(255, 255, 255, .12); }

/* Toasts: centred on screen, no coloured edge, coloured status icon. */
#mf-toasts { top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%); align-items: center; width: min(26rem, calc(100vw - 2rem)); }
.mf-toast { width: 100%; border-left-width: 1px; align-items: center; padding: 1rem 1.25rem; font-size: .9375rem; box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .35); }
.mf-toast > svg:first-child { width: 1.375rem; height: 1.375rem; margin-top: 0; }
.mf-toast--success > svg:first-child { color: #34c759; }
.mf-toast--error   > svg:first-child { color: #ff3b30; }
.mf-toast--info    > svg:first-child { color: #0071e3; }
.mf-toast--warn    > svg:first-child { color: #ff9f0a; }
.mf-toast--success, .mf-toast--error, .mf-toast--info, .mf-toast--warn { border-left-color: #e2e8f0; }
[data-theme="dark"] .mf-toast--success, [data-theme="dark"] .mf-toast--error,
[data-theme="dark"] .mf-toast--info, [data-theme="dark"] .mf-toast--warn { border-left-color: var(--mf-d-line); }
[data-theme="dark"] .mf-toast--success > svg:first-child { color: #30d158; }
/* Errors must not be missed: red frame, soft red wash, bolder text. */
.mf-toast.mf-toast--error { border: 2px solid #ff3b30; background: #fff5f4; color: #7a1410; font-weight: 600; box-shadow: 0 24px 60px -16px rgba(255, 59, 48, .45), 0 0 0 4px rgba(255, 59, 48, .12); }
[data-theme="dark"] .mf-toast.mf-toast--error { border-color: #ff453a; background: #3a1d1b; color: #ffd9d6; box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .7), 0 0 0 4px rgba(255, 69, 58, .2); }

/* Candidate dashboard: lighter hero, and notice cards that never leave a hole beside them. */
.mf-hero.mf-hero { background: linear-gradient(135deg, #58585c 0%, #6c6c70 100%); }
.mf-hero .text-slate-300 { color: #f0f0f3; }
.mf-hero .text-slate-400 { color: #e2e2e7; }
.mf-hero .text-brand-300 { color: #a9d4ff; }
.mf-hero .bg-white\/10 { background: rgba(255, 255, 255, .22); }
[data-theme="dark"] .mf-hero.mf-hero { background: linear-gradient(135deg, #3a3a3c 0%, #4a4a4d 100%); }

.mf-notices:not(:has(*)) { display: none; }
@media (min-width: 768px) {
  .mf-notices > :is(:only-child, :nth-child(odd):last-child, :nth-child(odd):has(+ .mf-train-banner)) { grid-column: 1 / -1; }
  .mf-notices > :is(:only-child, :nth-child(odd):last-child, :nth-child(odd):has(+ .mf-train-banner)):not(.mf-train-banner) { align-items: center; }
  .mf-notices > :is(:only-child, :nth-child(odd):last-child, :nth-child(odd):has(+ .mf-train-banner)):not(.mf-train-banner) > .min-w-0 {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.5rem; align-items: center;
  }
  .mf-notices > :is(:only-child, :nth-child(odd):last-child, :nth-child(odd):has(+ .mf-train-banner)):not(.mf-train-banner) > .min-w-0 > p { grid-column: 1; }
  .mf-notices > :is(:only-child, :nth-child(odd):last-child, :nth-child(odd):has(+ .mf-train-banner)):not(.mf-train-banner) > .min-w-0 > :is(a, button).mf-btn {
    grid-column: 2; grid-row: 1 / span 3; margin-top: 0 !important; align-self: center;
  }
}

/* Dark mode: the sky (info) notice boxes had no dark text/ring colours, so their text stayed dark blue on dark. */
[data-theme="dark"] .text-sky-800, [data-theme="dark"] .text-sky-900 { color: #bae6fd; }
[data-theme="dark"] .ring-sky-200 { --tw-ring-color: rgba(56, 189, 248, .4); }