/* ==========================================================================
   PTS — New Hire Setup Request form
   Plain CSS, no build step. Tokens up top so this can be re-skinned quickly.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Inspirica IT brand palette.

   The two brand colours are sampled directly from the official logo artwork
   (src/img/inspirica-it-logo.png), not picked by eye:
     #1B0981  indigo - the "inspirica" wordmark; 78% of the logo's opaque px
     #CE091A  red    - the "IT" and the lead bar; 21% of opaque px

   Supporting tones come from the Inspirica IT proposal/documentation
   templates:
     #1C2848  navy     - NAVY constant in both templates' field maps; used
                         for headings and body text, where the vivid brand
                         indigo would be harsh at paragraph size
     #F2F2F9  lavender - BG_LAVENDER, the templates' light panel tint
     #FFF5F5  pink     - BG_PINK, the templates' warning-callout background

   Red is reserved for brand marks and warnings. Interactive controls use the
   brand indigo so no control reads as a destructive action.
   -------------------------------------------------------------------------- */
:root {
  --navy:        #1c2848;
  --navy-light:  #1b0981;
  --accent:      #1b0981;
  --accent-dark: #140660;
  --brand-red:   #ce091a;

  --ink:         #1a1a2e;
  --ink-soft:    #444455;
  --ink-faint:   #66667a;

  --bg:          #f2f2f9;
  --surface:     #ffffff;
  --line:        #d9d9e8;
  --line-strong: #b9b9d6;

  --ok-bg:       #e8f6ed;
  --ok-line:     #57a978;
  --ok-ink:      #1c6b3c;

  --err-bg:      #fdeceb;
  --err-line:    #d1544a;
  --err-ink:     #9b2c24;

  --radius:      8px;
  --shadow:      0 1px 2px rgba(16, 33, 48, .06), 0 4px 14px rgba(16, 33, 48, .05);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---------- Masthead ---------- */

/* White field so the logo appears in its true colours, closed by the brand
   red rule. (For a reversed treatment, swap the background to var(--navy) and
   use the all-white-letters logo variant from SharePoint.) */
.masthead {
  background: #fff;
  border-bottom: 3px solid var(--brand-red);
  box-shadow: 0 1px 3px rgba(28, 40, 72, .07);
}

.masthead-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 15px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

/* ---- Official logo artwork ---- */

.brand-img {
  height: 30px;
  width: auto;
  display: block;
  flex: 0 0 auto;
}

.brand-divider {
  width: 1px;
  height: 24px;
  background: var(--line-strong);
  flex: 0 0 auto;
}

.brand-text {
  color: var(--ink-soft);
  font-size: 13px;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.masthead-tag {
  color: var(--ink-faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}


/* ---------- Layout ---------- */

.container {
  flex: 1;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 32px 24px 56px;
}

/* Indent the intro by the card's own horizontal padding so the heading,
   paragraphs and notice share one left text axis with the field labels
   inside the cards below. Must stay in sync with .card's side padding. */
.intro {
  margin-bottom: 24px;
  padding: 0 24px;
}

.intro h1 {
  margin: 0 0 10px;
  font-size: 26px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -.2px;
}

/* No max-width here: the intro paragraph shares the notice's and the cards'
   right edge, so the whole intro block reads as one column. A reading measure
   (e.g. max-width: 64ch) wraps it short of that edge and looks misaligned. */
.intro p {
  margin: 0 0 10px;
  color: var(--ink-soft);
}

/* Lead-time warning callout. Mirrors the warning/gotcha block in the Inspirica
   IT documentation template: BG_PINK #FFF5F5 behind a brand-red rule.
   Selector is `.intro .notice` so it outranks `.intro p`'s 64ch measure —
   the callout spans the full content width rather than the reading measure. */
.intro .notice {
  margin: 14px 0 0;
  padding: 12px 16px;
  max-width: none;
  background: #fff5f5;
  border: 1px solid #f5b7bb;
  border-left: 4px solid var(--brand-red);
  border-radius: 6px;
  font-size: 14px;
  color: #8c1a22;
}

/* ---------- Cards ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 24px 8px;
  margin-bottom: 18px;
}

.card-title {
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--navy-light);
}

/* ---------- Fields ---------- */

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 22px;
}

.field {
  margin: 0 0 18px;
  border: 0;
  padding: 0;
  min-width: 0;
}

label,
legend {
  display: block;
  margin-bottom: 6px;
  padding: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

.req    { color: var(--err-line); font-weight: 700; }
.optional { color: var(--ink-faint); font-weight: 400; }

.hint {
  margin: -2px 0 8px;
  font-size: 12.5px;
  color: var(--ink-faint);
}

input[type="text"],
input[type="tel"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 9px 11px;
  font: inherit;
  font-size: 14.5px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  transition: border-color .12s ease, box-shadow .12s ease;
}

textarea { resize: vertical; min-height: 92px; }

select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23444455' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  padding-right: 32px;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(27, 9, 129, .18);
}

/* Invalid state, applied by app.js after a validation pass. */
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: var(--err-line);
  background: #fffafa;
}

.field.has-error .choice-list {
  border-left: 3px solid var(--err-line);
  padding-left: 10px;
  margin-left: -13px;
}

.error-text {
  display: none;
  margin: 6px 0 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--err-ink);
}

.field.has-error .error-text { display: block; }

/* ---------- Radios & checkboxes ---------- */

.choice-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 8px 18px;
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  font-size: 14.5px;
  font-weight: 400;
  color: var(--ink);
  cursor: pointer;
  line-height: 1.35;
}

.choice input {
  margin: 1px 0 0;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  accent-color: var(--accent);
  cursor: pointer;
}

.choice-sub { color: var(--ink-faint); }


/* ---------- Submit ---------- */

.actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding: 0 24px;   /* same text axis as .intro and the field labels */
}

.btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
  justify-content: center;
  padding: 12px 26px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent-dark);
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s ease, opacity .12s ease;
}

.btn-primary:hover:not(:disabled)  { background: var(--accent-dark); }
.btn-primary:focus-visible {
  outline: 3px solid rgba(27, 9, 129, .4);
  outline-offset: 2px;
}

.btn-primary:disabled {
  cursor: not-allowed;
  opacity: .65;
}

/* Spinner shown only while the request is in flight. */
.spinner { display: none; }

.btn-primary.is-loading .spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

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

.actions-note {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-faint);
}

/* ---------- Result / validation message ---------- */

.message {
  margin: 22px 24px 0;   /* aligns with .intro / .actions, not the card edge */
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 6px;
  background: var(--surface);
  font-size: 14.5px;
}

.message h3 {
  margin: 0 0 6px;
  font-size: 15.5px;
  font-weight: 600;
}

.message p    { margin: 0 0 6px; }
.message p:last-child { margin-bottom: 0; }

.message ul {
  margin: 6px 0 0;
  padding-left: 20px;
}

.message.is-success {
  background: var(--ok-bg);
  border-color: var(--ok-line);
  color: var(--ok-ink);
}

.message.is-error {
  background: var(--err-bg);
  border-color: var(--err-line);
  color: var(--err-ink);
}

.ticket-number {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .3px;
}

/* ---------- Footer ---------- */

.footer {
  border-top: 1px solid var(--line);
  background: #fff;
}

.footer p {
  max-width: 880px;
  margin: 0 auto;
  padding: 16px 24px;
  font-size: 12.5px;
  color: var(--ink-faint);
}

/* ---------- Small screens ---------- */

@media (max-width: 640px) {
  .grid-2      { grid-template-columns: 1fr; }
  .choice-grid { grid-template-columns: 1fr; }
  .container   { padding: 24px 16px 40px; }
  .masthead-inner { padding: 14px 16px; }
  .masthead-tag   { display: none; }
  .card        { padding: 18px 16px 6px; }
  .btn-primary { width: 100%; }

  /* Keep the shared text axis in step with the card's narrower side padding. */
  .intro       { padding: 0 16px; }
  .actions     { padding: 0 16px; }
  .message     { margin-left: 16px; margin-right: 16px; }
}