/* WGTK Claims Portal — first styled after keytek.co.uk: white header, gradient
   hero, white rounded cards, charcoal text, accent highlights. These are the
   Keytek colours; each portal overrides --kt-orange, --kt-orange-dark,
   --kt-amber and --kt-gold with its own (templates/base.html), so anything
   brand-coloured must use those variables. */
:root {
  --kt-orange: #F07D1A;
  --kt-orange-dark: #D9650B;
  --kt-amber: #F2A93B;
  --kt-gold: #E9A23B;
  --kt-charcoal: #3F4042;
  --kt-grey: #58595B;
  --kt-muted: #7A7B7E;
  --kt-line: #E3E3E3;
  --kt-bg: #F5F5F4;
  --kt-card: #FFFFFF;
  --kt-soft: color-mix(in srgb, var(--kt-orange) 8%, #fff);
  --kt-focus: color-mix(in srgb, var(--kt-orange) 22%, transparent);
  --kt-green: #1E8E4E;
  --kt-green-bg: #E6F4EC;
  --kt-blue: #1F6FB2;
  --kt-blue-bg: #E7F0F8;
  --kt-red: #C0392B;
  --kt-red-bg: #FBEAE8;
  --kt-radius: 10px;
  --kt-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
  --kt-font: "Roboto", "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--kt-font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--kt-charcoal);
  background: var(--kt-bg);
}
a { color: var(--kt-orange-dark); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; }

/* Header */
.kt-header { background: #fff; border-bottom: 1px solid var(--kt-line); }
.kt-header__inner {
  max-width: 1100px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.kt-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.kt-brand__logo { height: 40px; width: auto; display: block; }
.kt-brand__name { font-size: 22px; font-weight: 700; color: var(--kt-orange-dark); white-space: nowrap; }
.kt-brand__with {
  color: var(--kt-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  padding-left: 12px; border-left: 1px solid var(--kt-line); line-height: 1.2; max-width: 74px;
}
.kt-brand__wgtk { height: 36px; display: block; }
.kt-nav { display: flex; gap: 2px; flex-wrap: wrap; margin-left: auto; align-items: center; }
.kt-nav a, .kt-nav button {
  color: var(--kt-grey); text-decoration: none; padding: 8px 9px; border-radius: 6px;
  font: inherit; font-size: 15px; background: none; border: 0; cursor: pointer;
}
.kt-nav a:hover, .kt-nav button:hover { background: var(--kt-soft); color: var(--kt-orange-dark); }
.kt-nav a.is-active { color: var(--kt-orange-dark); font-weight: 500; }
.kt-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--kt-muted); padding: 0 6px; }
.kt-switch select { width: auto; padding: 5px 8px; font-size: 14px; }
.kt-nav__who {
  color: var(--kt-muted); font-size: 13px; padding: 0 4px;
  display: inline-flex; flex-direction: column; line-height: 1.35; text-align: right;
}
.kt-session { font-size: 12px; white-space: nowrap; }
.kt-nav .kt-link-btn {
  padding: 0; margin-left: 2px; color: var(--kt-orange-dark); font-size: 13px; text-decoration: underline;
}
.kt-nav .kt-link-btn:hover { background: none; }
.kt-session-warning {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 50;
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center;
  background: #fff; color: var(--kt-charcoal); border: 1px solid var(--kt-line); border-left: 4px solid var(--kt-orange);
  border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.15); padding: 12px 16px; max-width: calc(100% - 32px);
}
.kt-session-warning[hidden] { display: none; }

/* Hero band */
.kt-hero {
  background: linear-gradient(100deg, color-mix(in srgb, var(--kt-orange) 50%, var(--kt-orange-dark)) 0%, var(--kt-orange) 45%, var(--kt-amber) 100%);
  color: #fff;
}
.kt-hero__inner { max-width: 1100px; margin: 0 auto; padding: 28px 16px 64px; }
.kt-hero h1 { font-size: 30px; font-weight: 700; }
.kt-hero p { margin: 0; font-size: 18px; opacity: .95; }

.kt-main { max-width: 1100px; margin: -44px auto 48px; padding: 0 16px; }
.kt-main--plain { margin-top: 24px; }

/* Cards */
.kt-card {
  background: var(--kt-card); border-radius: var(--kt-radius); box-shadow: var(--kt-shadow);
  padding: 24px; margin-bottom: 20px;
}
.kt-card h2 { font-size: 19px; display: flex; align-items: center; gap: 10px; }
.kt-card h2 .kt-step {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--kt-gold); color: var(--kt-gold);
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700;
}
.kt-card__hint { color: var(--kt-muted); font-size: 14px; margin: -4px 0 16px; }

/* Forms */
.kt-grid { display: grid; gap: 14px 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.kt-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kt-field--wide { grid-column: 1 / -1; }
.kt-field label { font-size: 14px; font-weight: 500; color: var(--kt-grey); }
.kt-field .kt-opt { font-weight: 400; color: var(--kt-muted); }
input[type=text], input[type=email], input[type=tel], input[type=search], input[type=number],
input[type=datetime-local], select, textarea {
  font: inherit; color: var(--kt-charcoal); width: 100%;
  padding: 10px 12px; border: 1px solid #CFCFCF; border-radius: 8px; background: #fff;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--kt-orange); box-shadow: 0 0 0 3px var(--kt-focus);
}
.kt-check { display: flex; gap: 8px; align-items: center; font-size: 15px; }
.kt-check input { width: 18px; height: 18px; accent-color: var(--kt-orange); }

/* Big reg box, styled like a UK number plate */
.kt-reg { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.kt-plate {
  display: flex; align-items: stretch; border: 2px solid #222; border-radius: 8px; overflow: hidden;
  background: #FFD500; flex: 1 1 260px; max-width: 360px;
}
.kt-plate__gb {
  background: #1C4DA1; color: #fff; font-weight: 700; font-size: 13px; width: 38px;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px;
}
.kt-plate input {
  border: 0; border-radius: 0; background: transparent; font-size: 30px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase; text-align: center; padding: 8px; color: #111;
}
.kt-plate input:focus { box-shadow: none; }
.kt-plate input::placeholder { color: rgba(0,0,0,.35); letter-spacing: 1px; font-size: 22px; }

/* Vehicle result */
.kt-vehicle {
  display: none; margin-top: 16px; border: 1px solid var(--kt-line); border-left: 4px solid var(--kt-gold);
  border-radius: 8px; padding: 14px 16px; background: var(--kt-soft);
}
.kt-vehicle.is-shown { display: block; }
.kt-vehicle__title { font-size: 20px; font-weight: 700; }
.kt-vehicle__meta { color: var(--kt-grey); font-size: 14px; }

/* Choice chips */
.kt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kt-chip input { position: absolute; opacity: 0; pointer-events: none; }
.kt-chip span {
  display: inline-block; padding: 8px 14px; border: 1px solid #CFCFCF; border-radius: 999px;
  cursor: pointer; font-size: 15px; background: #fff; user-select: none;
}
.kt-chip input:checked + span { background: var(--kt-orange); border-color: var(--kt-orange); color: #fff; }
.kt-chip input:focus-visible + span { box-shadow: 0 0 0 3px var(--kt-focus); }

/* Buttons */
.kt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 500; padding: 10px 20px; border-radius: 8px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.kt-btn--primary { background: var(--kt-orange); color: #fff; }
.kt-btn--primary:hover { background: var(--kt-orange-dark); }
.kt-btn--light { background: #F1F1F1; color: var(--kt-charcoal); border-color: #DADADA; }
.kt-btn--light:hover { background: #E8E8E8; }
.kt-btn--danger { background: #fff; color: var(--kt-red); border-color: #E8B4AE; }
.kt-btn--big { font-size: 18px; padding: 14px 28px; }
.kt-btn--sm { font-size: 14px; padding: 6px 12px; }
.kt-btn[disabled] { opacity: .6; cursor: progress; }

.kt-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.kt-sticky {
  position: sticky; bottom: 0; background: rgba(245, 245, 244, .96); padding: 12px 0;
  border-top: 1px solid var(--kt-line); margin-top: 8px; z-index: 5;
}

/* Messages and notes */
.kt-msg { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; background: var(--kt-blue-bg); color: var(--kt-blue); }
.kt-msg--success { background: var(--kt-green-bg); color: var(--kt-green); }
.kt-msg--error { background: var(--kt-red-bg); color: var(--kt-red); }
.kt-msg--warning { background: var(--kt-soft); color: #8A4A0B; }
.kt-inline-msg { font-size: 14px; color: var(--kt-muted); margin-top: 8px; min-height: 1em; }
.kt-inline-msg.is-error { color: var(--kt-red); }
.kt-errors { color: var(--kt-red); font-size: 14px; }

/* Address picker */
.kt-addresses { margin-top: 10px; }
.kt-suggest button { margin: 4px 6px 0 0; }

/* Status badges */
.kt-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.kt-badge--new { background: var(--kt-blue-bg); color: var(--kt-blue); }
.kt-badge--contact { background: #FFF4D6; color: #8A5A00; }
.kt-badge--quote { background: #F3E8FF; color: #6B21A8; }
.kt-badge--booked { background: #FFF1E3; color: #A04F06; }
.kt-badge--closed { background: var(--kt-green-bg); color: var(--kt-green); }
.kt-badge--ended { background: #EEEEEE; color: #4A4B4D; }
.kt-badge--failed { background: var(--kt-red-bg); color: var(--kt-red); }

/* Tables */
.kt-table-wrap { overflow-x: auto; }
.kt-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.kt-table th { text-align: left; font-weight: 500; color: var(--kt-muted); font-size: 13px; text-transform: uppercase; letter-spacing: .03em; padding: 8px 10px; border-bottom: 1px solid var(--kt-line); }
.kt-table td { padding: 12px 10px; border-bottom: 1px solid var(--kt-line); vertical-align: top; }
.kt-table tr:last-child td { border-bottom: 0; }
.kt-table tfoot td { border-top: 2px solid var(--kt-line); }
.kt-table a { text-decoration: none; font-weight: 500; }
.kt-plate-sm { display: inline-block; background: #FFD500; border: 1px solid #222; border-radius: 4px; padding: 0 6px; font-weight: 700; letter-spacing: 1px; font-size: 14px; }
.kt-muted { color: var(--kt-muted); font-size: 14px; }

.kt-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.kt-toolbar input[type=search] { max-width: 320px; }

/* Summary: stat tiles + month table */
.kt-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-bottom: 20px; }
.kt-tile { background: var(--kt-card); border-radius: var(--kt-radius); box-shadow: var(--kt-shadow); padding: 20px 22px; }
.kt-tile__period { font-size: 13px; color: var(--kt-muted); text-transform: uppercase; letter-spacing: .04em; }
.kt-tile__label { font-size: 15px; color: var(--kt-grey); margin-top: 2px; }
.kt-tile__value { font-size: 44px; font-weight: 700; line-height: 1.1; margin-top: 6px; color: var(--kt-charcoal); }
.kt-tile__sub { font-size: 14px; color: var(--kt-muted); margin-top: 4px; min-height: 1.4em; }
.kt-table .kt-num { text-align: right; font-variant-numeric: tabular-nums; }
.kt-table tr.is-current td { font-weight: 500; }

.kt-note { border-left: 3px solid var(--kt-orange); padding: 4px 0 4px 12px; margin: 0 0 14px; }
.kt-dl { display: grid; grid-template-columns: 180px 1fr; gap: 8px 16px; margin: 0; }
.kt-dl dt { color: var(--kt-muted); font-size: 14px; }
.kt-dl dd { margin: 0; }

/* Login */
.kt-login { max-width: 440px; margin: 0 auto; }
.kt-divider { display: flex; align-items: center; gap: 12px; color: var(--kt-muted); font-size: 14px; margin: 20px 0; }
.kt-divider::before, .kt-divider::after { content: ""; flex: 1; border-top: 1px solid var(--kt-line); }
.kt-ms { width: 100%; }

.kt-footer { text-align: center; padding: 8px 16px 32px; }
.kt-footer p { margin: 0 0 4px; }
.kt-footer__tag { color: var(--kt-orange-dark); font-style: italic; }
.kt-footer__partner { color: var(--kt-muted); font-size: 13px; }

details.kt-more summary { cursor: pointer; color: var(--kt-orange-dark); font-weight: 500; margin: 8px 0; }

/* WGTK staff overview: a tile per broker portal */
.kt-hero--wgtk { background: linear-gradient(100deg, #1E7A4C 0%, #2A9D62 55%, #48B27B 100%); }
.kt-brokers { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-bottom: 20px; }
.kt-broker {
  background: var(--kt-card); border-radius: var(--kt-radius); box-shadow: var(--kt-shadow);
  border-top: 5px solid var(--tile-colour); padding: 18px; display: flex; flex-direction: column; gap: 12px;
}
.kt-broker__logo {
  width: 100%; height: 96px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--kt-line); border-radius: 8px; background: #fff; cursor: pointer; padding: 12px;
  transition: border-color .15s, box-shadow .15s;
}
.kt-broker__logo:hover, .kt-broker__logo:focus-visible { border-color: var(--tile-colour); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tile-colour) 25%, transparent); outline: none; }
.kt-broker__logo img { max-height: 64px; max-width: 100%; }
.kt-broker__logo span { font-size: 22px; font-weight: 700; color: var(--tile-colour); }
.kt-broker__counts { display: flex; flex-direction: column; gap: 6px; }
.kt-broker__counts form { margin: 0; }
.kt-broker__count {
  width: 100%; display: flex; align-items: baseline; gap: 10px; text-align: left; font: inherit; color: var(--kt-muted);
  background: none; border: 1px solid transparent; border-radius: 6px; padding: 6px 8px; cursor: pointer;
}
.kt-broker__count strong { font-size: 22px; min-width: 2ch; text-align: right; color: var(--kt-muted); }
.kt-broker__count.has-some { color: var(--kt-charcoal); }
.kt-broker__count.has-some strong { color: var(--kt-charcoal); }
.kt-broker__count.is-alert strong { color: var(--kt-red); }
.kt-broker__count:not([disabled]):hover { background: var(--kt-bg); border-color: var(--kt-line); }
.kt-broker__count[disabled] { cursor: default; }
.kt-broker__host { font-size: 12px; }

/* Parts being sent */
.kt-parts { width: 100%; border-collapse: collapse; }
.kt-parts th { text-align: left; font-weight: 500; color: var(--kt-muted); font-size: 13px; padding: 0 8px 6px 0; }
.kt-parts td { padding: 0 8px 8px 0; vertical-align: top; }
.kt-parts td:last-child { padding-right: 0; width: 1%; }
.kt-parts .kt-parts__sku { width: 30%; }
.kt-parts .kt-parts__qty { width: 90px; }
.kt-parts .kt-parts__hint { font-size: 13px; margin-top: 2px; min-height: 1.2em; color: var(--kt-muted); }
.kt-parts .kt-parts__hint.is-new { color: #8A4A0B; }
.kt-parts input[readonly] { background: var(--kt-bg); }
.kt-tag { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 999px; background: #FFF4D6; color: #8A5A00; margin-left: 6px; }

/* Quotes */
.kt-quote { border: 1px solid var(--kt-line); border-left: 4px solid var(--kt-gold); border-radius: 8px; padding: 14px 16px; background: var(--kt-soft); }
.kt-quote__price { font-size: 32px; font-weight: 700; line-height: 1.1; }

@media (max-width: 640px) {
  .kt-parts thead { display: none; }
  .kt-parts tr { display: grid; grid-template-columns: 1fr 80px auto; gap: 0 8px; margin-bottom: 10px; }
  .kt-parts td { padding: 0; }
  .kt-parts td.kt-parts__name-cell { grid-column: 1 / -1; grid-row: 2; margin-top: 6px; }
  .kt-parts .kt-parts__sku, .kt-parts .kt-parts__qty { width: auto; }
  .kt-hero h1 { font-size: 24px; }
  .kt-hero p { font-size: 16px; }
  .kt-card { padding: 18px 16px; }
  .kt-dl { grid-template-columns: 1fr; }
  .kt-dl dt { margin-top: 6px; }
  .kt-nav { margin-left: 0; }
  .kt-plate input { font-size: 26px; }
  .kt-sticky .kt-muted { display: none; }
  .kt-brand { gap: 8px; }
  .kt-brand__logo { height: 32px; }
  .kt-brand__name { font-size: 18px; }
  .kt-brand__wgtk { height: 28px; }
  .kt-brand__with { font-size: 10px; padding-left: 8px; }
  .kt-sticky .kt-btn { width: 100%; }
}
.kt-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }