/* App-specific overrides on top of govuk-frontend.min.css */

:root {
  --app-brand: #1d70b8;
  --app-accent: #00703c;
  --app-warning: #d4351c;
  --app-muted: #505a5f;
}

/* Thai-aware typography. GDS Transport doesn't include Thai glyphs,
   so let the system Thai fall through after Latin. */
.govuk-template,
.govuk-body,
.govuk-body-l,
.govuk-body-s,
.govuk-heading-xl,
.govuk-heading-l,
.govuk-heading-m,
.govuk-heading-s,
.govuk-caption-xl,
.govuk-caption-l,
.govuk-caption-m,
.govuk-button,
.govuk-tag,
.govuk-label,
.govuk-hint,
.govuk-panel__title,
.govuk-panel__body,
.govuk-fieldset__legend,
.govuk-notification-banner__title,
.govuk-notification-banner__heading,
.govuk-warning-text__text,
.govuk-summary-card__title,
.govuk-error-summary__title {
  font-family: "GDS Transport", "Sarabun", "Noto Sans Thai",
    "Helvetica Neue", Arial, sans-serif;
}

/* Thai diacritics (สระบน, วรรณยุกต์) sit above the consonant and need
   roomier line-height than GDS's ~1.04 default — otherwise tone marks
   from one line clip into the line above (e.g. "เรื่อง" overlapping
   the caption). Override line-heights for every text component that
   carries Thai. Keep margins as-is; this is a leading fix only. */
.govuk-heading-xl { line-height: 1.3; }
.govuk-heading-l  { line-height: 1.3; }
.govuk-heading-m  { line-height: 1.35; }
.govuk-heading-s  { line-height: 1.4; }
.govuk-caption-xl,
.govuk-caption-l,
.govuk-caption-m  { line-height: 1.45; }
.govuk-panel__title { line-height: 1.3; }
.govuk-panel__body  { line-height: 1.4; }
.govuk-fieldset__legend--xl { line-height: 1.3; }
.govuk-fieldset__legend--l  { line-height: 1.3; }
.govuk-fieldset__legend--m  { line-height: 1.35; }
.govuk-summary-card__title  { line-height: 1.35; }
.govuk-error-summary__title { line-height: 1.35; }
.govuk-notification-banner__title   { line-height: 1.35; }
.govuk-notification-banner__heading { line-height: 1.4; }
.govuk-warning-text__text   { line-height: 1.5; }
/* Tags: GOV.UK ships tight padding (~5px/4px) plus letter-spacing tuned
   for uppercase Latin. Thai needs full vertical padding so tone marks
   above the consonant don't touch the tag's top border, no letter-spacing
   (which adds gaps between Thai characters), and word-break controlled so
   long labels can wrap to a second line cleanly. */
.govuk-tag {
  line-height: 1.4;
  padding: 5px 8px 5px;
  letter-spacing: 0;
  white-space: normal;
  text-transform: none;
}
.govuk-button { line-height: 1.3; }
.govuk-label, .govuk-hint, .govuk-body, .govuk-body-l, .govuk-body-s { line-height: 1.5; }

/* Tables: align top so a 2-line wrapped status tag doesn't push the
   neighbouring cells to vertical centre, and give th cells extra leading
   so diacritics on header text render in full. */
.govuk-table { line-height: 1.45; }
.govuk-table__header,
.govuk-table__cell {
  vertical-align: top;
  padding-top: 12px;
  padding-bottom: 12px;
}
.govuk-table__header { line-height: 1.4; }
.govuk-summary-list { line-height: 1.45; }

/* Headings that follow a caption need a touch of breathing room so the
   first line of Thai diacritics never touches the caption descender. */
.govuk-caption-xl + .govuk-heading-xl,
.govuk-caption-l + .govuk-heading-xl { margin-top: 8px; }
.govuk-caption-l + .govuk-heading-l,
.govuk-caption-m + .govuk-heading-m { margin-top: 4px; }

/* Brand the service header — re-use the GOV.UK component but override
   the chrome to read as a Thai municipal service. */
.app-service-name {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}
.app-service-name__crest {
  width: 36px;
  height: 36px;
  background: #fff;
  color: var(--app-brand);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* Role switcher pill in the header */
.app-role-switcher {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.app-role-switcher button {
  background: transparent;
  border: 0;
  color: #fff;
  padding: 6px 14px;
  font: inherit;
  font-size: 14px;
  border-radius: 999px;
  cursor: pointer;
}
.app-role-switcher button[aria-pressed="true"] {
  background: #fff;
  color: var(--app-brand);
  font-weight: 700;
}
.app-role-switcher button:focus {
  outline: 3px solid #ffdd00;
  outline-offset: 1px;
}

/* Hero card on home */
.app-hero {
  background: #f3f2f1;
  padding: 30px;
  border-left: 10px solid var(--app-brand);
  margin-bottom: 30px;
}
.app-hero h1 {
  margin-top: 0;
}

/* Action card grid */
.app-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.app-card {
  background: #fff;
  border: 1px solid #b1b4b6;
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.app-card h3 { margin-top: 0; }
.app-card .govuk-button { margin-top: auto; margin-bottom: 0; }

/* KPI tiles for dashboard */
.app-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 15px;
  margin-bottom: 25px;
}
.app-kpi {
  background: #fff;
  border: 1px solid #b1b4b6;
  border-top: 4px solid var(--app-brand);
  padding: 16px 18px;
}
.app-kpi__label {
  font-size: 14px;
  color: var(--app-muted);
  margin: 0 0 4px;
}
.app-kpi__value {
  font-size: 32px;
  font-weight: 700;
  margin: 0;
  line-height: 1.1;
}
.app-kpi__delta {
  font-size: 13px;
  margin-top: 4px;
}
.app-kpi__delta--up { color: var(--app-warning); }
.app-kpi__delta--down { color: var(--app-accent); }

/* Make KPI tiles function as drill-down links when given an href */
a.app-kpi {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
a.app-kpi:hover {
  border-color: var(--app-brand);
  box-shadow: 0 4px 12px rgba(29, 112, 184, 0.18);
  transform: translateY(-1px);
}
a.app-kpi:focus {
  outline: 3px solid #ffdd00;
  outline-offset: 0;
}

/* Dashboard panels */
.app-panel {
  background: #fff;
  border: 1px solid #b1b4b6;
  padding: 18px 20px;
  margin-bottom: 20px;
}
.app-panel h2 { margin-top: 0; }
.app-panel--map { padding: 0; overflow: hidden; }
#dashboard-map { height: 380px; }

/* Two-column dashboard row */
.app-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 900px) {
  .app-row.app-row--2 { grid-template-columns: 1.4fr 1fr; }
  .app-row.app-row--3 { grid-template-columns: 1fr 1fr 1fr; }
}

/* Ranking table */
.app-rank-list { list-style: none; margin: 0; padding: 0; }
.app-rank-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #e5e5e5;
}
.app-rank-list li:last-child { border-bottom: 0; }
.app-rank-list .rank-num {
  display: inline-block;
  background: var(--app-brand);
  color: #fff;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  text-align: center;
  font-size: 13px;
  line-height: 24px;
  margin-right: 10px;
}

/* Status timeline on track page */
.app-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.app-timeline::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: #b1b4b6;
}
.app-timeline li {
  position: relative;
  padding: 0 0 18px 36px;
}
.app-timeline li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #b1b4b6;
}
.app-timeline li.is-done::before {
  background: var(--app-accent);
  border-color: var(--app-accent);
}
.app-timeline li.is-current::before {
  background: var(--app-brand);
  border-color: var(--app-brand);
  box-shadow: 0 0 0 4px rgba(29, 112, 184, 0.2);
}
.app-timeline__time { color: var(--app-muted); font-size: 14px; }

/* Chatbot */
.app-chat {
  background: #fff;
  border: 1px solid #b1b4b6;
  display: flex;
  flex-direction: column;
  height: 540px;
}
.app-chat__log {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  background: #f8f8f8;
}
.app-chat__msg {
  max-width: 80%;
  margin-bottom: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  line-height: 1.4;
}
.app-chat__msg--bot {
  background: #fff;
  border: 1px solid #b1b4b6;
  border-bottom-left-radius: 4px;
}
.app-chat__msg--user {
  background: var(--app-brand);
  color: #fff;
  margin-left: auto;
  border-bottom-right-radius: 4px;
}
.app-chat__quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 18px;
  border-top: 1px solid #e5e5e5;
}
.app-chat__quick button {
  background: #fff;
  border: 1px solid var(--app-brand);
  color: var(--app-brand);
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
}
.app-chat__quick button:hover {
  background: var(--app-brand);
  color: #fff;
}
.app-chat__form {
  display: flex;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid #b1b4b6;
}
.app-chat__form input {
  flex: 1;
  padding: 10px 12px;
  border: 2px solid #0b0c0c;
  font: inherit;
}
.app-chat__form input:focus {
  outline: 3px solid #ffdd00;
  outline-offset: 0;
}

/* Star rating */
.app-stars {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: 4px;
  font-size: 36px;
}
.app-stars input { position: absolute; opacity: 0; }
.app-stars label {
  cursor: pointer;
  color: #b1b4b6;
  line-height: 1;
}
.app-stars label:hover,
.app-stars label:hover ~ label,
.app-stars input:checked ~ label {
  color: #ffb000;
}
.app-stars input:focus + label {
  outline: 3px solid #ffdd00;
}

/* Step indicator */
.app-steps {
  display: flex;
  gap: 0;
  margin-bottom: 25px;
  border-bottom: 1px solid #b1b4b6;
}
.app-steps__item {
  flex: 1;
  padding: 12px 10px;
  font-size: 14px;
  color: var(--app-muted);
  border-bottom: 4px solid transparent;
  text-align: center;
}
.app-steps__item.is-active {
  color: #0b0c0c;
  font-weight: 700;
  border-bottom-color: var(--app-brand);
}
.app-steps__item.is-done { color: var(--app-accent); }
.app-steps__num {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #b1b4b6;
  color: #fff;
  font-size: 13px;
  line-height: 22px;
  text-align: center;
  margin-right: 6px;
}
.app-steps__item.is-active .app-steps__num { background: var(--app-brand); }
.app-steps__item.is-done .app-steps__num { background: var(--app-accent); }

/* Filter row on complaints list */
.app-filter {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: end;
  background: #f3f2f1;
  padding: 15px;
  margin-bottom: 20px;
}
.app-filter > * { margin-bottom: 0; }

/* Map containers */
#submit-map { height: 320px; border: 2px solid #0b0c0c; }
.leaflet-container a { color: var(--app-brand); }

/* Photo upload preview */
.app-photo-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.app-photo-preview img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid #b1b4b6;
}

/* Side nav for admin */
.app-sidebar {
  background: #fff;
  border: 1px solid #b1b4b6;
}
.app-sidebar a {
  display: block;
  padding: 12px 16px;
  color: #0b0c0c;
  text-decoration: none;
  border-bottom: 1px solid #e5e5e5;
}
.app-sidebar a:last-child { border-bottom: 0; }
.app-sidebar a.is-active {
  background: var(--app-brand);
  color: #fff;
  font-weight: 700;
}
.app-sidebar a:hover:not(.is-active) {
  background: #f3f2f1;
  text-decoration: underline;
}

/* Utility */
.app-mb-0 { margin-bottom: 0 !important; }
.app-flex-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Print hides interactive bits */
@media print {
  .app-role-switcher, .govuk-back-link, .govuk-button { display: none; }
}