/* WearView Academy IT Support — stylesheet
   Mobile-first: base styles target small screens, then two media
   queries adapt the layout for tablet and desktop.
*/

/* Design tokens (from the moodboard) */
:root {
  --primary:  #1E3A8A;   /* deep blue — header, headings */
  --action:   #2563EB;   /* bright blue — primary button, focus */
  --success:  #0D9488;   /* teal — success messages */
  --danger:   #DC2626;   /* red — validation errors */
  --ink:      #0F172A;   /* body text */
  --muted:    #64748B;   /* secondary text */
  --border:   #CBD5E1;   /* input borders */
  --surface:  #FFFFFF;   /* cards */
  --page:     #F1F5F9;   /* page background */
  --radius:   8px;
}

/* Reset / base */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Inter", Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--page);
  line-height: 1.5;
}

.container {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Skip link (visible only when focused) */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--action);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0 0 var(--radius) 0;
  z-index: 10;
}
.skip-link:focus { left: 0; }

/* Header/footer */
.site-header {
  background: var(--primary);
  color: #fff;
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}
.logo {
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 5px;
  display: inline-block;
}
.site-name { font-weight: 600; font-size: 1.05rem; }

.site-footer {
  margin-top: 2.5rem;
  padding: 1.25rem 0;
  color: var(--muted);
  font-size: 0.85rem;
  border-top: 1px solid var(--border);
}

/* Headings/intro */
h1 {
  color: var(--primary);
  font-size: 1.6rem;
  margin: 1.5rem 0 0.4rem;
}
.intro { color: var(--muted); margin: 0 0 1.5rem; }

/* Card / form */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
}

.form-grid { display: grid; gap: 1.1rem; }

.field { display: flex; flex-direction: column; }

label, legend {
  font-weight: 500;
  margin-bottom: 0.35rem;
  color: var(--ink);
}
.optional { font-weight: 400; color: var(--muted); }

input, select, textarea {
  font: inherit;
  color: var(--ink);
  background: #F8FAFC;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.65rem 0.7rem;
  width: 100%;
}
textarea { resize: vertical; min-height: 120px; }

/* Visible focus state for keyboard users (accessibility) */
input:focus, select:focus, textarea:focus, .btn:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.35);
  outline-offset: 1px;
  border-color: var(--action);
}

/* Priority radio group */
.priority {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem 0.9rem;
  margin: 0;
}
.radio-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.radio { display: inline-flex; align-items: center; gap: 0.35rem; }
.radio input { width: auto; }
.radio label { margin: 0; font-weight: 400; }

/* Help and error text */
.field-help { font-size: 0.82rem; color: var(--muted); margin-top: 0.3rem; }
.field-error {
  font-size: 0.82rem;
  color: var(--danger);
  margin-top: 0.3rem;
  min-height: 1em;  /* reserve space so layout does not jump */
}

/* Invalid-field styling, toggled by JavaScript via aria-invalid */
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"],
.priority[aria-invalid="true"] {
  border-color: var(--danger);
}

/* Form-level status message */
.form-status {
  border-radius: var(--radius);
  font-weight: 500;
  /* hidden until JS adds a state class */
}
.form-status:empty { display: none; }
.form-status.is-success {
  background: #CFEEE6;
  color: #045048;
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
}
.form-status.is-error {
  background: #FDE8E8;
  color: #8A1C1C;
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
}

/* Buttons */
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }
.btn {
  font: inherit;
  font-weight: 600;
  border-radius: var(--radius);
  padding: 0.7rem 1.3rem;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn--primary { background: var(--action); color: #fff; }
.btn--primary:hover { background: #1D4ED8; }
.btn--secondary { background: #fff; color: var(--primary); border-color: var(--border); }
.btn--secondary:hover { background: var(--page); }

/* TABLET — from 600px wide: form becomes a two-column grid */
@media (min-width: 600px) {
  .container { max-width: 720px; }
  .form-grid { grid-template-columns: 1fr 1fr; }
  /* Fields that should span the full width of the two-column grid */
  .field--full { grid-column: 1 / -1; }
  h1 { font-size: 1.9rem; }
}

/* DESKTOP — from 1024px wide: wider card and more generous spacing */
@media (min-width: 1024px) {
  .container { max-width: 880px; }
  .card { padding: 2rem 2.25rem; }
  .form-grid { gap: 1.4rem; }
  h1 { font-size: 2.1rem; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Styles for the login page, the technician job dashboard and the
   status badges. These reuse the same design tokens declared at the top
   of this file, so the new pages match the original design.
*/

/* Container variants */
.container--narrow { max-width: 460px; }
.container--wide   { max-width: 780px; }

@media (min-width: 1024px) {
  .container--narrow { max-width: 480px; }
  .container--wide   { max-width: 1000px; }
}

/* Header log-out link */
.site-header__inner { justify-content: flex-start; }
.site-link {
  margin-left: auto;
  color: #DBEAFE;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
}
.site-link:hover, .site-link:focus { color: #fff; text-decoration: underline; }

/* Optional-field hint */
.optional { font-weight: 400; color: var(--muted); }

/* Tabs (incomplete / completed) */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.tab {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--primary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  text-decoration: none;
}
.tab:hover { background: #E8EEF9; }
.tab.is-current {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.tab:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.35);
  outline-offset: 2px;
}

/* Job cards */
.job { margin-bottom: 1rem; }

.job__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.job__title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--primary);
  margin: 0;
  flex: 1 1 100%;
}
.job__description {
  margin: 0 0 0.9rem;
  color: var(--ink);
}

/* Job details: stacked on mobile, two columns from tablet up */
.job__meta {
  display: grid;
  gap: 0.5rem 1.5rem;
  margin: 0 0 1rem;
  font-size: 0.88rem;
}
.job__meta dt { color: var(--muted); }
.job__meta dd { margin: 0; color: var(--ink); font-weight: 500; }

@media (min-width: 600px) {
  .job__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .job__title { flex: 1 1 auto; }
}
@media (min-width: 1024px) {
  .job__meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Status and priority badges */
.badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 500;
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  white-space: nowrap;
}
.badge--incomplete { background: #FAE6CB; color: #7A4406; }  /* amber  */
.badge--complete   { background: #CFEEE6; color: #045048; }  /* teal   */
.badge--high       { background: #FDE2E2; color: #8A1C1C; }  /* red    */
.badge--medium     { background: #FAE6CB; color: #7A4406; }  /* amber  */
.badge--low        { background: #E2E8F0; color: #334155; }  /* grey   */

/* Success button (mark job complete) */
.btn--success { background: var(--success); color: #fff; }
.btn--success:hover { background: #0B7C72; }

/* Empty state */
.empty-state { text-align: center; color: var(--muted); }
.empty-state p { margin: 0; }