/*
 * Anbulten Motorsport — grafisk profil
 * Vit #FFFFFF · Röd #D4001A · Mörk #1F2328 · Grå #A7ACB1
 * Typografi: Rajdhani
 */

:root {
  /* Typsnitt: Rajdhani är ett display-typsnitt — smalt och stiliserat.
     Det duger till rubriker men inte till artikelnummer på en platta.
     Brödtext, tabeller och fält sätts därför i Atkinson Hyperlegible,
     framtaget för nedsatt syn: det skiljer tydligt på 0/O och 1/l. */
  --font-text: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --font-display: "Rajdhani", "Segoe UI", sans-serif;

  /* Varumärkets färger ligger fast */
  --red: #D4001A;
  --red-dark: #b00016;
  --white: #FFFFFF;
  --ink: #1F2328;          /* mörk text på ljus botten */

  /* Ljust arbetsläge — verkstaden är ljus och plattan används i dagsljus */
  --darker: #eef0f3;       /* sidans botten */
  --panel: #FFFFFF;        /* kort och paneler */
  --border: #c9d0d8;
  --gray: #444b55;         /* dämpad text — mörkare för bättre kontrast */

  /* Toppmenyn förblir mörk: varumärkesankaret och plats för loggan */
  --dark: #1F2328;
  --topbar-text: #FFFFFF;
  --topbar-muted: #A7ACB1;

  /* Status, mörkare toner så de syns mot ljus botten */
  --green: #1a7f37;
  --green-text: #116329;
  --red-text: #b00016;
  --yellow: #9a6700;
  --yellow-text: #7a5200;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--darker);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 19px;
  line-height: 1.6;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--red); }

/* --- Toppmeny --- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding: 0.75rem 1.25rem;
  background: var(--dark);
  color: var(--topbar-text);
  border-bottom: 3px solid var(--red);
}

.brand { display: flex; align-items: center; line-height: 1; }
/* Loggan är en bild i sina rätta proportioner — höjden styr, bredden följer. */
.brand-logo { height: 2.3rem; width: auto; display: block; }
.login-logo { width: 15rem; max-width: 100%; height: auto; display: block; margin: 0 auto 0.75rem; }

.topnav { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.topnav a, .topnav .linklike {
  color: var(--topbar-text);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
}

.linklike {
  background: none; border: none; color: var(--topbar-muted); cursor: pointer;
  font-family: inherit; padding: 0;
}
.linklike:hover { color: var(--red); }

/* --- Innehåll --- */
.container { max-width: 1000px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.75rem;
}
h1 { font-size: 1.9rem; border-left: 5px solid var(--red); padding-left: 0.75rem; }
h2 { font-size: 1.35rem; color: var(--ink); margin-top: 2rem; }

.page-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.page-head h1 { margin: 0; }

.muted { color: var(--gray); }
.small { font-size: 0.95rem; }

/* --- Knappar --- */
.btn {
  display: inline-block;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
  padding: 0.5rem 1.1rem;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}
.btn:hover { background: var(--red-dark); color: var(--white); }

.btn-secondary { background: transparent; border: 1px solid var(--gray); color: var(--gray); }
.btn-secondary:hover { border-color: var(--ink); color: var(--ink); background: transparent; }

.btn-danger { background: transparent; border: 1px solid var(--red); color: var(--red); }
.btn-danger:hover { background: var(--red); color: var(--white); }

.actions { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin-top: 1.5rem; }

/* --- Paneler & tabeller --- */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--border); }
th { color: var(--gray); text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.06em; font-weight: 700; }
/* Siffror i fasta bredder gör priskolumner och artikelnummer lätta att jämföra */
td.num, th.num, .stat .value, .picker-qty { font-variant-numeric: tabular-nums; }
tr:hover td { background: rgba(31, 35, 40, 0.035); }
td.num, th.num { text-align: right; }

/* --- Statistikkort --- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat { background: var(--panel); border: 1px solid var(--border); border-left: 4px solid var(--red); border-radius: 6px; padding: 1rem 1.25rem; }
.stat .value { font-size: 2.2rem; font-weight: 700; line-height: 1.1; }
.stat .label { color: var(--gray); text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.08em; }

/* --- Formulär --- */
.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: 700; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.06em; color: var(--gray); margin-bottom: 0.35rem; }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="tel"], textarea, select {
  width: 100%;
  max-width: 480px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.05rem;
  padding: 0.65rem 0.8rem;
}
input:focus, textarea:focus { outline: none; border-color: var(--red); }
textarea { min-height: 6rem; }

.field-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.field-row .field { flex: 1 1 200px; }

.checkbox-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0; border-bottom: 1px solid var(--border); }
.checkbox-row:last-child { border-bottom: none; }
.checkbox-row input[type="checkbox"] { width: 1.2rem; height: 1.2rem; accent-color: var(--red); }
.checkbox-row .wi-name { flex: 1; }
.checkbox-row input[type="number"] { max-width: 130px; }

/* --- Flash & fel --- */
.flash { padding: 0.75rem 1rem; border-radius: 4px; margin-bottom: 1.25rem; font-weight: 600; }
.flash-notice { background: rgba(26, 127, 55, 0.12); border: 1px solid var(--green); color: var(--green-text); }
.flash-alert { background: rgba(212, 0, 26, 0.10); border: 1px solid var(--red); color: var(--red-text); }

.form-errors { background: rgba(212, 0, 26, 0.08); border: 1px solid var(--red); border-radius: 4px; padding: 0.75rem 1rem 0.75rem 2rem; margin-bottom: 1.25rem; }

/* --- Inloggning --- */
.login-wrap { max-width: 400px; margin: 8vh auto 0; }
.login-brand { text-align: center; margin-bottom: 2rem; }
.login-brand .tagline { color: var(--gray); letter-spacing: 0.3em; font-size: 0.75rem; text-transform: uppercase; display: block; }

/* --- Bilder --- */
.image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; margin-top: 0.5rem; }
.image-grid a img, .image-grid img { width: 100%; height: 130px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border); display: block; }
.image-item { position: relative; }

/* --- Summeringsrad --- */
.total-row td { font-weight: 700; font-size: 1.1rem; border-top: 2px solid var(--red); }

.btn-small { padding: 0.3rem 0.75rem; font-size: 0.85rem; }

.ok-chip, .warn-chip {
  display: inline-block; font-weight: 600; font-size: 0.85rem;
  padding: 0.15rem 0.6rem; border-radius: 999px; white-space: nowrap;
}
.ok-chip { background: rgba(26, 127, 55, 0.12); border: 1px solid var(--green); color: var(--green-text); }
.warn-chip { background: rgba(212, 0, 26, 0.10); border: 1px solid var(--red); color: var(--red-text); }

/* Delstatus-knappar: tydlig färg per steg */
.status-bestall { border-color: var(--red); color: var(--red-text); }
.status-bestalld { border-color: var(--yellow); color: var(--yellow-text); }
.status-mottagen { border-color: var(--green); color: var(--green-text); }

.note {
  background: var(--panel); border: 1px solid var(--border); border-left: 4px solid var(--red);
  border-radius: 6px; padding: 0.8rem 1rem; max-width: 44rem;
}

.file-chip {
  display: inline-block; background: var(--darker); border: 1px solid var(--border);
  border-radius: 4px; padding: 0.4rem 0.7rem; font-size: 0.9rem;
}

/* --- Platta (~10") och mobil --- */
@media (max-width: 1080px) {
  /* Större tryckytor för fingrar */
  .btn { padding: 0.65rem 1.3rem; }
  .topnav a, .topnav .linklike { padding: 0.45rem 0.25rem; }
  .brand-logo { height: 2rem; }
  .checkbox-row { padding: 0.6rem 0; }
  .checkbox-row input[type="checkbox"] { width: 1.45rem; height: 1.45rem; }
  input[type="text"], input[type="email"], input[type="password"], input[type="number"],
  input[type="date"], input[type="tel"], textarea, select { padding: 0.7rem 0.8rem; }
  td, th { padding: 0.7rem 0.75rem; }
}

@media (max-width: 600px) {
  h1 { font-size: 1.4rem; }
  .container { padding: 1rem 0.75rem 3rem; }
  .field input, .field textarea, .field select { max-width: 100%; }
}

/* --- Delväljaren -------------------------------------------------------
   Används på både servicelogg och bokning. Tryckytorna är tilltagna för
   att fungera med fingrar på verkstadsplattan. */
.picker-head {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  align-items: center; justify-content: space-between;
  margin-bottom: 0.75rem;
}
.picker-family select { max-width: 260px; }

.picker-tabs {
  display: flex; gap: 0.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.75rem;
}
.picker-tab {
  padding: 0.6rem 1.1rem;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  color: inherit; opacity: 0.65;
}
.picker-tab.is-active {
  opacity: 1; font-weight: 600;
  border-bottom-color: var(--red, #D4001A);
}

.picker-groups { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; }
.picker-chip {
  padding: 0.4rem 0.8rem; border-radius: 999px;
  border: 1px solid var(--border);
  text-decoration: none; color: inherit; font-size: 0.9rem;
}
.picker-chip.is-active { background: var(--red, #D4001A); border-color: var(--red, #D4001A); color: #fff; }

.picker-table td { vertical-align: middle; }
.picker-add form { display: flex; gap: 0.4rem; align-items: center; margin: 0; }
.picker-qty { width: 4.5rem; text-align: center; }

@media (max-width: 900px) {
  .picker-add form { flex-wrap: wrap; justify-content: flex-end; }
  .picker-tab { padding: 0.7rem 0.9rem; }
}

/* --- Snabbtillägg av arbetsmoment ------------------------------------
   Stora tryckytor: Markus lägger till moment med handskar på, stående
   vid bänken, och ska träffa rätt utan att sikta. */
.quick-add {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin: 0.75rem 0;
}
.quick-add form { margin: 0; }
.quick-add-btn {
  padding: 0.7rem 1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.quick-add-btn:hover { border-color: var(--red, #D4001A); }
.quick-add-btn .muted { margin-left: 0.4rem; }

@media (max-width: 900px) {
  .quick-add-btn { padding: 0.85rem 1.1rem; }
}

/* --- Fakturering ------------------------------------------------------ */
.actions.tight { margin-top: 0; }
.invoicing-mark { display: flex; gap: 0.5rem; align-items: center; margin: 0; }
.invoicing-ref { max-width: 10rem; }

/* --- Motorval på egna artiklar --------------------------------------- */
.family-checks { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.family-check {
  display: flex; align-items: center; gap: 0.45rem;
  text-transform: none; font-weight: 400; margin: 0;
}
.family-check input[type="checkbox"] { width: 1.3rem; height: 1.3rem; accent-color: var(--red); }

/* --- Rabatt per rad --------------------------------------------------- */
.rabatt-falt { width: 4.5rem; text-align: right; display: inline-block; }
.rabatt-spara { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin: 0 0 1.5rem; }

/* --- Inbyggda manualen ------------------------------------------------ */
.hjalp-knapp {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  border: 2px solid var(--topbar-muted); color: var(--topbar-text);
  font-weight: 700; font-size: 1rem; line-height: 1;
}
.hjalp-knapp:hover { border-color: var(--red); color: var(--red); }

.hjalp-layout { display: grid; grid-template-columns: 15rem 1fr; gap: 1.25rem; align-items: start; }
.hjalp-meny { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.75rem; }
.hjalp-meny a {
  padding: 0.55rem 0.7rem; border-radius: 4px;
  border-left: 3px solid transparent;
}
.hjalp-meny a:hover { background: var(--darker); }
.hjalp-meny a.aktiv { border-left-color: var(--red); font-weight: 700; background: var(--darker); }

.hjalp-innehall h3 { font-size: 1.3rem; margin-top: 0; }
.hjalp-innehall h4 { font-size: 1rem; color: var(--gray); margin: 1.5rem 0 0.4rem; }
.hjalp-innehall ul, .hjalp-innehall ol { padding-left: 1.3rem; }
.hjalp-innehall li { margin-bottom: 0.4rem; }
.hjalp-innehall p { max-width: 44rem; }
.hjalp-innehall .steg { counter-reset: steg; list-style: none; padding-left: 0; }
.hjalp-innehall .steg li {
  counter-increment: steg; position: relative; padding-left: 2.4rem; margin-bottom: 0.8rem;
}
.hjalp-innehall .steg li::before {
  content: counter(steg); position: absolute; left: 0; top: 0;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--red); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-size: 0.9rem;
}

@media (max-width: 900px) {
  .hjalp-layout { grid-template-columns: 1fr; }
  .hjalp-meny { flex-direction: row; flex-wrap: wrap; }
}