@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #f5f5f5;
  --card:      #ffffff;
  --border:    #e8e8e8;
  --text:      #111111;
  --muted:     #6b6b6b;
  --label:     #aaaaaa;
  --hover:     #f0f0f0;
  --active:    #ececec;
  --sb-w:      280px;
  --r:         12px;
  --r-sm:      8px;

  /* ═══════════════════════════════
     BRAND COLOR STANDARD  (Trust palette)
     ocean = primary · apple = success · amber = warning
  ═══════════════════════════════ */
  --ocean-100: #e5ecfd; --ocean-200: #c9d8fa; --ocean-300: #9db9f6;
  --ocean-400: #6692f1; --ocean-500: #2563eb; --ocean-600: #1f54c8;
  --ocean-700: #1943a0; --ocean-800: #133276; --ocean-900: #0c204b;

  --apple-100: #e3f4e9; --apple-200: #c5e8d2; --apple-300: #96d6ae;
  --apple-400: #5cbf80; --apple-500: #16a34a; --apple-600: #138b3f;
  --apple-700: #0f6f32; --apple-800: #0b5225; --apple-900: #073418;

  --amber-100: #fef3e2; --amber-200: #fde7c2; --amber-300: #fbd391;
  --amber-400: #f8bb54; --amber-500: #f59e0b; --amber-600: #d08609;
  --amber-700: #a76b07; --amber-800: #7b4f06; --amber-900: #4e3304;

  /* Semantic aliases — use these in components */
  --brand:        var(--ocean-500);
  --brand-dark:   var(--ocean-600);
  --brand-darker: var(--ocean-700);
  --brand-tint:   var(--ocean-100);
  --success:      var(--apple-500);
  --success-tint: var(--apple-100);
  --warn:         var(--amber-500);
  --warn-tint:    var(--amber-100);
}

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════
   APP SHELL
═══════════════════════════════ */
.app { display: flex; min-height: 100vh; }

/* ═══════════════════════════════
   SIDEBAR
═══════════════════════════════ */
.sidebar {
  width: var(--sb-w);
  min-width: var(--sb-w);
  background: var(--card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 200;
}

.sb-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 22px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 8px;
}

.brand-icon {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  background: url('/logo.jpeg') center/contain no-repeat #ffffff;
}

.brand-icon span { display: none; }

.brand-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.greeting { padding: 4px 8px 0; }

.greeting p {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 2px;
}

.greeting h2 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.nav-sec {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.nav-lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--label);
  padding: 0 12px 6px;
}

a.nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  transition: background 0.1s;
}

a.nav-item:hover { background: var(--hover); }
a.nav-item.active { background: var(--brand-tint); color: var(--brand-darker); font-weight: 600; }
.nav-arrow { font-size: 11px; color: var(--label); }

.sb-footer {
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 9px;
}

.av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #111;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
}

.sb-footer-info { flex: 1; min-width: 0; }
.sb-footer-name { font-size: 12px; font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-footer-role { font-size: 11px; color: var(--muted); }
a.sb-logout {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  color: var(--muted);
  flex-shrink: 0;
  text-decoration: none;
  transition: background 0.1s, color 0.1s;
}
a.sb-logout:hover { background: var(--hover); color: var(--text); }
a.sb-logout svg { width: 16px; height: 16px; }

/* ═══════════════════════════════
   MAIN CONTENT
═══════════════════════════════ */
.main {
  margin-left: var(--sb-w);
  flex: 1;
  padding: 32px 36px;
  min-height: 100vh;
}

.page-head { margin-bottom: 28px; }
.page-head h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 4px; }
.page-head p { font-size: 13px; color: var(--muted); }

.s-lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--label);
  margin-bottom: 10px;
}

.s-gap { margin-bottom: 24px; }

/* ═══════════════════════════════
   CARDS
═══════════════════════════════ */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 20px 22px;
}

/* ═══════════════════════════════
   KPI GRID
═══════════════════════════════ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.kpi-grid-3 { grid-template-columns: repeat(3, 1fr); }

.kpi {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 18px 20px;
}

.kpi-lbl { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--label); display: block; margin-bottom: 8px; }
.kpi-val { font-size: 34px; font-weight: 700; letter-spacing: -0.025em; line-height: 1; display: block; margin-bottom: 5px; }
.kpi-sub { font-size: 12px; color: var(--muted); }

/* ═══════════════════════════════
   CHARTS
═══════════════════════════════ */
.chart-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 10px;
}

.chart-inner { position: relative; height: 180px; }

/* ═══════════════════════════════
   FUNNEL
═══════════════════════════════ */
.funnel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.f-step {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px;
  text-align: center;
}

.f-step small { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--label); display: block; margin-bottom: 6px; }
.f-step b { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; display: block; margin-bottom: 4px; }
.f-step span { font-size: 12px; color: var(--muted); }

/* ═══════════════════════════════
   WORKLOAD
═══════════════════════════════ */
.wl-list { display: flex; flex-direction: column; gap: 10px; }
.wl-row { display: flex; align-items: center; gap: 12px; }
.wl-name { font-size: 13px; font-weight: 500; min-width: 120px; flex-shrink: 0; }
.wl-track { flex: 1; height: 5px; background: var(--bg); border-radius: 99px; overflow: hidden; }
.wl-fill { height: 100%; background: var(--brand); border-radius: 99px; }
.wl-nums { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* ═══════════════════════════════
   INSPECTOR LIST
═══════════════════════════════ */
.insp-list { display: flex; flex-direction: column; gap: 10px; }

.insp-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px 20px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.insp-row:hover { border-color: var(--ocean-300); box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.insp-row:hover .insp-go { color: var(--brand); transform: translateX(2px); }

.insp-go { display: flex; align-items: center; color: var(--label); flex-shrink: 0; transition: color 0.12s, transform 0.12s; }
.insp-go svg { width: 18px; height: 18px; }

.insp-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand-darker);
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
}

.insp-id { flex: 1; min-width: 0; }
.insp-name { font-size: 14px; font-weight: 600; line-height: 1.25; }
.insp-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.insp-metrics { display: flex; gap: 26px; flex-shrink: 0; }
.insp-metric { text-align: center; min-width: 56px; }
.insp-metric b { display: block; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; margin-bottom: 5px; }
.insp-metric small { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--label); }
.insp-metric.done b { color: var(--success); }
.insp-metric.pending b { color: var(--warn); }

/* ── Inspector detail page ── */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 18px;
  transition: color 0.12s;
}
.back-link:hover { color: var(--text); }
.back-link svg { width: 15px; height: 15px; }

.prof-head { display: flex; align-items: center; gap: 16px; }
.prof-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand-darker);
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
}
.prof-name { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.prof-meta { font-size: 13px; color: var(--muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ═══════════════════════════════
   TABLE
═══════════════════════════════ */
.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--label); text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 13px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: 13px; }
tbody tr { transition: background 0.1s; }
tbody tr:hover td { background: var(--hover); }
tr:last-child td { border-bottom: none; }
.td-name { font-weight: 600; font-size: 13px; }
.td-muted { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ═══════════════════════════════
   STATUS PILLS
═══════════════════════════════ */
.pill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; border: 1px solid transparent; }
.p-new         { background:#eff6ff; color:#1d4ed8; border-color:#bfdbfe; }
.p-assigned    { background:#fefce8; color:#854d0e; border-color:#fde68a; }
.p-inprogress  { background:#fff7ed; color:#9a3412; border-color:#fed7aa; }
.p-submitted   { background:#f0fdf4; color:#166534; border-color:#bbf7d0; }
.p-reportready { background:#faf5ff; color:#6b21a8; border-color:#e9d5ff; }
.p-closed      { background:#f5f5f5; color:#555555; border-color:#e0e0e0; }
.p-callback    { background:#fef9c3; color:#713f12; border-color:#fde047; }

/* ═══════════════════════════════
   BUTTONS
═══════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.1s;
  white-space: nowrap;
}

.btn:hover { background: var(--hover); }
.btn-dark { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn-dark:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-pill { border-radius: 999px; }

/* ═══════════════════════════════
   FORMS
═══════════════════════════════ */
.form-row-4 { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 10px; align-items: end; }

.f-group { display: flex; flex-direction: column; gap: 5px; }
.f-lbl { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--label); }
.f-inp { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 10px; font-size: 13px; font-family: inherit; background: var(--card); color: var(--text); width: 100%; }
.f-inp:focus { outline: none; border-color: var(--ocean-400); }

select.f-sel { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 6px 8px; font-size: 12px; font-family: inherit; background: var(--card); color: var(--text); cursor: pointer; }

/* ═══════════════════════════════
   FLASH
═══════════════════════════════ */
.flash { padding: 11px 14px; border-radius: var(--r-sm); font-size: 13px; border: 1px solid transparent; margin-bottom: 20px; }
.flash-ok  { background:#f0fdf4; color:#166534; border-color:#bbf7d0; }
.flash-err { background:#fef2f2; color:#991b1b; border-color:#fecaca; }

/* ═══════════════════════════════
   ACTIONS
═══════════════════════════════ */
.acts { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }

/* ═══════════════════════════════
   INSPECTION FORM  (inspection.php)
═══════════════════════════════ */
.panel-head {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px 20px;
  margin-bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.panel-head h2 { font-size: 16px; font-weight: 700; margin-bottom: 5px; letter-spacing: -0.01em; }
.panel-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--muted); }

.stag { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 600; border: 1px solid transparent; }
.stag-ok      { background:#f0fdf4; color:#166534; border-color:#bbf7d0; }
.stag-pending { background:#fefce8; color:#854d0e; border-color:#fde68a; }

.insp-form-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 20px;
}

.cl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }

.cl-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.cl-cat { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--label); }
.cl-lbl { font-size: 13px; font-weight: 500; line-height: 1.3; }
.cl-ctrl { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

select.sev { border: 1px solid var(--border); border-radius: 7px; padding: 5px 8px; font: inherit; font-size: 12px; background: var(--card); cursor: pointer; }
select.sev.pass   { border-color: #bbf7d0; color: #166534; background: #f0fdf4; }
select.sev.low    { border-color: #fde68a; color: #854d0e; background: #fefce8; }
select.sev.medium { border-color: #fed7aa; color: #9a3412; background: #fff7ed; }
select.sev.high   { border-color: #fecaca; color: #991b1b; background: #fef2f2; }

input.cost-inp { border: 1px solid var(--border); border-radius: 7px; padding: 5px 8px; font: inherit; font-size: 12px; width: 120px; }
input.cost-inp:focus { outline: none; border-color: var(--ocean-400); }

.cl-notes textarea { width: 100%; min-height: 50px; resize: vertical; border: 1px solid var(--border); border-radius: 7px; padding: 6px 8px; font: inherit; font-size: 12px; color: var(--text); background: var(--card); }
.cl-notes textarea:focus { outline: none; border-color: var(--ocean-400); }

.cl-imgs-lbl { font-size: 11px; color: var(--label); text-transform: uppercase; letter-spacing: 0.06em; display: block; margin-bottom: 3px; }

.drop-zone { border: 1.5px dashed var(--border); border-radius: 7px; padding: 10px; text-align: center; cursor: pointer; position: relative; transition: border-color 0.15s, background 0.15s; }
.drop-zone:hover, .drop-zone.dragover { border-color: #999; background: var(--hover); }
.drop-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.drop-zone span { font-size: 11px; color: var(--label); pointer-events: none; }

.img-prev { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 4px; margin-top: 4px; }
.img-prev img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 5px; border: 1px solid var(--border); }

.score-row { display: grid; grid-template-columns: 140px 1fr; gap: 12px; margin-bottom: 14px; }
.score-inp { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px; font: inherit; font-size: 16px; text-align: center; width: 100%; }
.score-inp:focus { outline: none; border-color: var(--ocean-400); }
.summary-inp { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px; font: inherit; font-size: 13px; min-height: 70px; resize: vertical; width: 100%; }
.summary-inp:focus { outline: none; border-color: var(--ocean-400); }

.submit-row { display: flex; align-items: center; gap: 12px; }
.last-sub { font-size: 12px; color: var(--muted); }

/* ═══════════════════════════════
   BOOKING DETAIL
═══════════════════════════════ */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.kv { margin-bottom: 10px; }
.kv-key { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--label); margin-bottom: 3px; }
.kv-val { font-size: 14px; }

.sev-badge { display: inline-flex; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; border: 1px solid transparent; }
.sev-pass   { background:#f0fdf4; color:#166534; border-color:#bbf7d0; }
.sev-low    { background:#fefce8; color:#854d0e; border-color:#fde68a; }
.sev-medium { background:#fff7ed; color:#9a3412; border-color:#fed7aa; }
.sev-high   { background:#fef2f2; color:#991b1b; border-color:#fecaca; }

/* ═══════════════════════════════
   LOGIN
═══════════════════════════════ */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card { width: 100%; max-width: 420px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 32px 28px; }
.login-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 28px; }
.login-head { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 6px; }
.login-sub { font-size: 13px; color: var(--muted); margin-bottom: 24px; }
.login-lbl { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--label); margin-bottom: 5px; margin-top: 14px; }
.login-inp { width: 100%; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; font: inherit; font-size: 14px; background: var(--card); color: var(--text); }
.login-inp:focus { outline: none; border-color: var(--ocean-400); }
.login-btn { width: 100%; margin-top: 18px; padding: 11px; border: 1px solid var(--brand); border-radius: 999px; background: var(--brand); color: #fff; font: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; }
.login-btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.login-hint { margin-top: 16px; font-size: 12px; color: var(--label); }
.login-hint a { color: var(--muted); }

/* ═══════════════════════════════
   RESPONSIVE
═══════════════════════════════ */
@media (max-width: 1200px) {
  .chart-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1100px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .funnel-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row-4 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 980px) {
  .cl-grid { grid-template-columns: 1fr; }
  .score-row { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .sidebar { display: none; }
  .main { margin-left: 0; padding: 20px 16px; }
  .chart-grid { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .insp-row { flex-wrap: wrap; }
  .insp-metrics { width: 100%; justify-content: flex-start; gap: 22px; padding-left: 58px; }
}