/*
  Konsol admin IOX. Design system sama dengan aplikasi Android:
  - warna  : mobile/app/src/main/res/values/colors.xml
  - jarak & radius : values/dimens.xml (skala 4 px, radius 8/12/16/20/pill)
  - teks, tombol, kartu : values/themes.xml (Text.Iox.*, Widget.Iox.Button.*, Iox.Card)
  - font   : Plus Jakarta Sans (res/font), disajikan sendiri supaya tidak bergantung CDN
  Gaya: simpel dan kontras tinggi. Dasar putih gading, aksi hijau, kuning IOX hanya aksen kecil.
*/
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 400; font-display: swap; src: url("../fonts/plus_jakarta_sans_regular.ttf") format("truetype"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600; font-display: swap; src: url("../fonts/plus_jakarta_sans_semibold.ttf") format("truetype"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 700; font-display: swap; src: url("../fonts/plus_jakarta_sans_bold.ttf") format("truetype"); }

:root {
  /* colors.xml */
  --primary: #1E8E3E;
  --primary-dark: #166C2F;
  --primary-soft: #E3F2E7;
  --accent: #FFDD00;
  --warning: #E65100;
  --background: #FAF8F2;
  --white: #FFFFFF;
  --surface-muted: #F0EDE4;
  --text-primary: #1F1F1F;
  --text-secondary: #5F5F5F;
  --divider: #E3E0D8;
  --info: #1565C0;
  --checkpoint-pending: #9E9E9E;
  --track-line: #1F1F1F;

  /* dimens.xml */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --radius-md: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-3xl: 20px; --radius-pill: 72px;
  --touch-min: 48px;
  --button-height: 56px;   /* driving_button_height */

  /* Iox.Card: elevasi rendah */
  --shadow-card: 0 2px 4px rgba(0, 0, 0, .08);
  --shadow-float: 0 4px 8px rgba(0, 0, 0, .12);
  --topbar-height: 64px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.4;
  background: var(--background);
  color: var(--text-primary);
}
a { color: var(--primary); font-weight: 700; }
p { margin: 0; }

/* Text.Iox.* */
h1, .text-title   { font-size: 24px; font-weight: 700; line-height: 1.2; margin: 0; }
h2, .text-section { font-size: 18px; font-weight: 700; line-height: 1.3; margin: 0; }
h3 { font-size: 16px; font-weight: 700; margin: 0; }
.text-body { font-size: 16px; }
.muted, .text-caption { color: var(--text-secondary); font-size: 14px; }
.small { font-size: 13px; }

/* ---------- Topbar: putih seperti bottom nav, indikator aktif kuning (Iox.NavIndicator) ---------- */
.topbar {
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center; gap: var(--space-3);
  height: var(--topbar-height); padding: 0 var(--space-4);
  background: var(--white); box-shadow: var(--shadow-card);
}
.brand { display: flex; align-items: center; gap: var(--space-2); color: var(--text-primary); text-decoration: none; }
.brand strong { font-size: 18px; }
.logo { border-radius: 50%; object-fit: cover; background: var(--white); display: block; }
.logo-sm { width: 40px; height: 40px; border: 2px solid var(--accent); padding: 1px; }
.nav-link {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-4);
  border-radius: var(--radius-pill); color: var(--text-primary); text-decoration: none; font-weight: 600; white-space: nowrap;
}
.nav-link.active { background: var(--accent); font-weight: 700; }
.nav-link:hover:not(.active) { background: var(--surface-muted); }
.topbar form { margin: 0; }
.spacer { flex: 1; }
.user { color: var(--text-secondary); font-size: 14px; }

/* ---------- Tombol: Widget.Iox.Button.Primary / .Ghost ---------- */
button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--touch-min); padding: 0 var(--space-6);
  border: 0; border-radius: var(--radius-pill);
  background: var(--primary); color: var(--white);
  font: inherit; font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer;
}
button:hover, .button:hover { background: var(--primary-dark); }
button:disabled { background: var(--divider); color: var(--text-secondary); cursor: default; }
.button-block { width: 100%; min-height: var(--button-height); font-size: 18px; }
button.ghost, .button.ghost {
  min-height: 40px; padding: 0 var(--space-4);
  background: transparent; color: var(--text-primary); border: 1.5px solid var(--text-primary); font-weight: 600;
}
button.ghost:hover, .button.ghost:hover { background: var(--surface-muted); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- Form: Widget.Iox.TextInput (outlined, radius 8, garis gelap) ---------- */
.field { display: block; margin-bottom: var(--space-4); }
.field span { display: block; font-size: 14px; font-weight: 600; margin-bottom: var(--space-1); }
input {
  width: 100%; min-height: var(--button-height); padding: 0 var(--space-4);
  border: 1px solid var(--text-primary); border-radius: var(--radius-md);
  background: var(--white); color: var(--text-primary); font: inherit; font-size: 16px;
}
input:focus { outline: none; border: 2px solid var(--primary); padding: 0 calc(var(--space-4) - 1px); }

/* Kotak pesan seperti loginMessage di aplikasi (surface_muted) */
.message { padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-muted); margin-bottom: var(--space-4); }
.message.error { border-left: 4px solid var(--warning); }
.message.ok { background: var(--primary-soft); border-left: 4px solid var(--primary); }

/* ---------- Kartu: Iox.Card ---------- */
.card { background: var(--white); border-radius: var(--radius-2xl); box-shadow: var(--shadow-card); padding: var(--space-4); }

/* Badge kuning (team_you / cardBadge) dan chip status putih (statusChip) */
.badge {
  display: inline-block; padding: 2px var(--space-2); border-radius: var(--radius-pill);
  background: var(--accent); color: var(--text-primary); font-size: 11px; font-weight: 700; white-space: nowrap;
}
.chip {
  display: inline-block; padding: 2px var(--space-2); border-radius: var(--radius-pill);
  background: var(--white); font-size: 11px; font-weight: 700; white-space: nowrap;
}
.chip.berjalan, .chip.akan_datang { color: var(--primary-dark); }
.chip.selesai, .chip.draft { color: var(--text-primary); }
.status { display: inline-block; padding: 2px var(--space-2); border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; white-space: nowrap; }
.status.berjalan { background: var(--primary-soft); color: var(--primary-dark); }
.status.finish { background: var(--text-primary); color: var(--white); }
.status.belum_start { background: var(--surface-muted); color: var(--text-secondary); }

/* ---------- Login: sama dengan activity_login.xml ---------- */
.login-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: var(--space-12) var(--space-4) var(--space-8); }
.logo-lg { width: 120px; height: 120px; padding: var(--space-2); margin-bottom: var(--space-6); }
.login-card { width: min(440px, 100%); border-radius: var(--radius-3xl); padding: var(--space-6); }
.login-card h1 { margin-bottom: var(--space-1); }
.login-card .text-caption { margin-bottom: var(--space-5); }

/* ---------- Daftar event: kartu seperti item_event_compact.xml ---------- */
.page { padding: var(--space-6) var(--space-4) var(--space-8); max-width: 1200px; margin: 0 auto; }
.page-head { margin-bottom: var(--space-4); }
.page-head .text-caption { margin-top: var(--space-1); }
.event-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-4); }
.event-card { background: var(--white); border-radius: var(--radius-2xl); box-shadow: var(--shadow-card); overflow: hidden; display: flex; flex-direction: column; }
.event-hero {
  position: relative; height: 96px; padding: var(--space-2);
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));   /* bg_hero_gradient */
}
.event-hero.muted { background: linear-gradient(135deg, var(--text-primary), #4A4A4A); }   /* bg_hero_muted */
.event-hero .initials { position: absolute; right: var(--space-2); bottom: 0; color: var(--white); opacity: .4; font-size: 36px; font-weight: 700; line-height: 1.2; }
.event-body { padding: var(--space-3) var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.event-body h2 { font-size: 16px; }
.info-rows { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--space-3); font-size: 14px; }
.info-rows dt { color: var(--text-secondary); }
.info-rows dd { margin: 0; font-weight: 700; white-space: nowrap; }
.event-body .button { margin-top: auto; }
.empty { padding: var(--space-6); text-align: center; color: var(--text-secondary); }

/* ---------- Monitor: peta + panel mobil ---------- */
.monitor { display: grid; grid-template-columns: 1fr 400px; height: calc(100vh - var(--topbar-height)); }
/* .map-area: wadah peta + kartu melayang (elevasi level 1 di atas peta, seperti search bar di aplikasi peta) */
.map-area { position: relative; min-height: 0; }
#map { position: absolute; inset: 0; background: #EFEBE0; }   /* map_background */
.map-chip {
  position: absolute; top: var(--space-3); left: var(--space-3); z-index: 1000;
  display: flex; align-items: center; gap: var(--space-3);
  max-width: calc(100% - 80px);   /* sisakan ruang untuk tombol zoom di kanan atas */
  padding: var(--space-1) var(--space-5) var(--space-1) var(--space-1);
  background: var(--white); border-radius: var(--radius-pill); box-shadow: var(--shadow-float);
}
.back-btn {
  flex: none; width: var(--touch-min); height: var(--touch-min); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-muted); color: var(--text-primary);
}
.back-btn:hover { background: var(--divider); }
.back-btn svg { width: 22px; height: 22px; fill: currentColor; }
.map-chip-text { display: flex; flex-direction: column; min-width: 0; }
.map-chip-text strong, .map-chip-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-chip-text strong { font-size: 16px; line-height: 1.3; }
.map-chip-text span { font-size: 13px; color: var(--text-secondary); }
.side { overflow: auto; padding: var(--space-4); background: var(--background); border-left: 1px solid var(--divider); }
.side-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-1); }
.side .hint { margin-bottom: var(--space-3); font-size: 13px; }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-4); font-size: 13px; color: var(--text-secondary); }
.legend span { display: inline-flex; align-items: center; gap: var(--space-1); }
.legend i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--white); box-shadow: 0 0 0 1px var(--divider); display: inline-block; }

/* Kartu mobil seperti item_team_car.xml */
.car-list { display: flex; flex-direction: column; gap: var(--space-3); }
.car-card {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--white); border: 2px solid transparent; border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card); padding: var(--space-4); font: inherit; font-weight: 400; color: inherit; min-height: 0;
}
.car-card:hover { background: var(--white); border-color: var(--divider); }
.car-card.selected { border-color: var(--primary); }
.car-row { display: flex; align-items: center; gap: var(--space-3); }
.car-badge {
  flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--text-primary);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.car-badge svg { width: 20px; height: 20px; fill: var(--accent); }
.car-badge b { color: var(--white); font-size: 13px; line-height: 1; }
.car-badge.stale { background: var(--checkpoint-pending); }
.car-main { flex: 1; min-width: 0; }
.car-title { display: flex; align-items: center; gap: var(--space-2); }
.car-title strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.car-sub { color: var(--text-secondary); font-size: 13px; margin-top: 2px; }
.progress { margin-top: var(--space-3); }
.progress-track { height: 8px; border-radius: 4px; background: var(--surface-muted); overflow: hidden; }
.progress-bar { height: 100%; border-radius: 4px; background: var(--primary); }
.progress-text { margin-top: var(--space-1); font-size: 13px; font-weight: 700; }

/* Kartu detail seperti item_info_card + item_info_row */
.detail { margin-bottom: var(--space-4); border: 2px solid var(--primary); }
.detail-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.detail-head h3 { flex: 1; font-size: 18px; }
.detail-section { padding-top: var(--space-2); margin-top: var(--space-2); border-top: 1px solid var(--divider); }
.detail-section h4 { margin: 0 0 var(--space-1); font-size: 14px; }
.row { display: grid; grid-template-columns: 2fr 3fr; gap: var(--space-2); padding: 2px 0; }
.row .label { color: var(--text-secondary); font-size: 14px; }
.row .value { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.row .value.blood { font-size: 18px; color: var(--warning); }
.row .value a { color: var(--text-primary); }
.detail .close { min-height: 32px; padding: 0 var(--space-3); font-size: 14px; }

/* ---------- Marker peta: sama dengan TrackCanvasView.drawMarker + carBadge ---------- */
.leaflet-container { font-family: inherit; }
.leaflet-div-icon.map-marker { background: transparent; border: 0; }
.car-marker {
  width: 40px; height: 40px; border-radius: 50%; background: var(--text-primary); border: 3px solid var(--white);
  box-shadow: var(--shadow-float); display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.car-marker svg { width: 14px; height: 14px; fill: var(--accent); }
.car-marker b { color: var(--white); font-size: 11px; line-height: 1; }
.car-marker.stale { background: var(--checkpoint-pending); }
.car-marker.selected { border-color: var(--accent); }
.wp-marker {
  width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--white); box-shadow: var(--shadow-card);
  display: flex; align-items: center; justify-content: center; color: var(--white); font-weight: 700; font-size: 12px;
}
.wp-marker.cp { background: var(--primary); }
.wp-marker.start { background: var(--primary-dark); }
.wp-marker.finish { background: var(--text-primary); }
.wp-marker.basecamp { background: var(--accent); color: var(--text-primary); font-size: 10px; }
.wp-marker.note { width: 20px; height: 20px; background: var(--info); font-size: 11px; }
.legend .cp { background: var(--primary); }
.legend .start { background: var(--primary-dark); }
.legend .finish { background: var(--text-primary); }
.legend .basecamp { background: var(--accent); }
.legend .note { background: var(--info); }
.legend .stale { background: var(--checkpoint-pending); }

@media (max-width: 900px) {
  .monitor { grid-template-columns: 1fr; grid-template-rows: 55vh auto; height: auto; }
  .side { border-left: 0; border-top: 1px solid var(--divider); }
  .user { display: none; }
}
@media (max-width: 640px) {
  .nav-link { padding: 0 var(--space-2); }
}
@media (max-width: 480px) {
  .topbar { gap: var(--space-2); padding: 0 var(--space-3); }
  .brand strong { display: none; }
}