/* ============================================================
   공용차량 배차 — 화면 스타일 (혼자 서는 파일)
   ------------------------------------------------------------
   경영지원 대시보드에서 옮겨 왔다. 대시보드의 tokens.css 를 가져오지 않고,
   쓰는 값만 아래 :root 에 다시 적었다 — 그쪽이 바뀌어도 이 화면은 흔들리지
   않는다. 총무관리 색에 맞추려면 :root 값만 바꾸면 되고 아래 규칙은
   손대지 않아도 된다.
   ============================================================ */
:root {
  --bg-0:#F4F7F5; --card:#FFFFFF; --card2:#EEF2EF;
  --t1:#1F2933; --t2:#3E4C59; --t3:#7B8794; --fg-on:#FFFFFF;
  --b1:#DCE3DF; --b2:#C3CDC7;
  --primary:#2E7D5B; --ok:#2E7D5B; --warn:#B7791F; --danger:#C0392B; --info:#2C6FBF;
  /* 강조색 — 달력에서 차량마다 색을 고정하는 데 쓴다. 여섯 가지를 돌려 쓴다. */
  --a1:#3B82F6; --a2:#8B5CF6; --a3:#10B981; --a4:#F59E0B; --a5:#EC4899; --a6:#EF4444;
  --radius:6px; --radius-md:8px; --shadow-sm:0 1px 2px rgba(0,0,0,.06);
  --font-sans:-apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-0:#151A17; --card:#1E2521; --card2:#28312B;
    --t1:#E8EDEA; --t2:#B9C4BE; --t3:#8A9791;
    --b1:#313A35; --b2:#44504A;
  }
}
:root[data-theme="dark"] {
  --bg-0:#151A17; --card:#1E2521; --card2:#28312B;
  --t1:#E8EDEA; --t2:#B9C4BE; --t3:#8A9791;
  --b1:#313A35; --b2:#44504A;
}

/* 보기 전환 단추 · 알림줄 */
.car-viewtabs { display:inline-flex; gap:2px; background:var(--card2); border-radius:var(--radius); padding:2px; }
.car-viewtabs button {
  border:0; background:transparent; color:var(--t2); font-family:inherit;
  font-size:14px; padding:5px 14px; border-radius:var(--radius); cursor:pointer;
}
.car-viewtabs button.on { background:var(--a1); color:var(--fg-on); }
.car-status { font-size:13px; color:var(--t3); }
.car-status[data-kind="ok"]    { color:var(--ok); }
.car-status[data-kind="error"] { color:var(--danger); }
/* ── 공용차량 배차 ─────────────────────────────────────────
   차량 × 시간 격자. 막대 하나가 예약 한 건이다. */
.car-body { flex:1; overflow:auto; padding:12px 14px; }
.car-empty { font-size:14px; color:var(--t3); padding:20px; text-align:center; }
.car-hint { font-size:13px; color:var(--t3); margin-top:8px; }
.car-datebar { display:inline-flex; align-items:center; gap:4px; }
.car-datebar input {
  background:var(--card2); border:1px solid var(--b2); color:var(--t1);
  padding:4px 8px; border-radius:var(--radius); font-size:13px;
}
.car-mini {
  border:1px solid var(--b2); background:var(--card2); color:var(--t2);
  font-size:13px; padding:4px 10px; border-radius:var(--radius); cursor:pointer;
}
.car-mini:hover { background:var(--b2); }
.car-mini.danger { border-color:var(--danger); color:var(--danger); }

.car-grid { border:1px solid var(--b1); border-radius:var(--radius); overflow:hidden; }
.car-grid-head, .car-grid-row { display:flex; align-items:stretch; }
.car-grid-head { background:var(--card2); border-bottom:1px solid var(--b1); }
.car-grid-car {
  width:200px; flex-shrink:0; padding:7px 10px; font-size:13px; color:var(--t1);
  border-right:1px solid var(--b1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.car-grid-head .car-grid-car { color:var(--t3); font-weight:700; }
.car-grid-hour { flex:1; text-align:center; font-size:12px; color:var(--t3); padding:6px 0; }
.car-grid-row { border-bottom:1px solid var(--b1); }
.car-grid-row:last-child { border-bottom:0; }
.car-grid-track { position:relative; flex:1; display:flex; min-height:38px; cursor:crosshair; }
.car-grid-cell { flex:1; border-right:1px solid var(--b1); }
.car-grid-cell:last-child { border-right:0; }
.car-bar {
  position:absolute; top:3px; bottom:3px; border-radius:var(--radius);
  background:var(--b2); color:var(--t2); font-size:12px; line-height:32px;
  padding:0 6px; overflow:hidden; white-space:nowrap; cursor:default;
}
.car-bar.own { background:var(--a1); color:var(--fg-on); }
.car-bar.done { opacity:.6; }

.car-table { width:100%; border-collapse:collapse; font-size:13px; }
.car-table th {
  text-align:left; padding:6px 8px; color:var(--t3); font-weight:600;
  border-bottom:1px solid var(--b1); white-space:nowrap;
}
.car-table td { padding:6px 8px; color:var(--t1); border-bottom:1px solid var(--b1); }
.car-logbar { margin-bottom:8px; }

.car-admin { margin-top:16px; border-top:1px solid var(--b1); padding-top:10px; }
/* 페이지 안 입력 폼 — 예약·운행기록을 팝업 없이 여기서 받는다. */
.car-form {
  border:1px solid var(--b1); border-left:3px solid var(--primary, #2E7D5B);
  border-radius:var(--radius-md, 8px); background:var(--card);
  padding:14px 16px; margin-bottom:14px; box-shadow:var(--shadow-sm);
}
.car-form-head {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:15px; color:var(--t1); margin-bottom:12px;
}
.car-form-head b { font-size:16px; font-weight:800; }
.car-form-head span { font-size:13px; color:var(--t3); }
.car-form-head button { margin-left:auto; }
.car-form-tag {
  font-size:12px; color:var(--primary, #2E7D5B);
  border:1px solid var(--primary, #2E7D5B); border-radius:var(--radius);
  padding:1px 8px;
}
/* 필드를 한 화면에 모두 편다 — 무엇을 채워야 하는지 한눈에 보이게. */
.car-form-grid {
  display:grid; grid-template-columns:repeat(4, minmax(150px, 1fr)); gap:10px 14px;
}
.car-field { display:flex; flex-direction:column; gap:4px; min-width:0; }
.car-field.wide { grid-column:span 2; }
.car-field > span { font-size:13px; font-weight:600; color:var(--t2); }
.car-field input, .car-field select {
  width:100%; padding:7px 10px; font-size:14px; font-family:inherit;
  color:var(--t1); background:var(--bg-0, transparent);
  border:1px solid var(--b1); border-radius:var(--radius);
}
.car-field input:focus, .car-field select:focus {
  outline:none; border-color:var(--primary, #2E7D5B);
}
/* 월별 배차 달력 — 안전진단 납품일정의 월 격자를 따랐다.
   칸에 몇 건만 칩으로 보이고 자세한 것은 그날로 넘어가서 본다. */
.car-cal-bar {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:12px;
}
.car-cal-bar strong { font-size:17px; font-weight:800; color:var(--t1); }
.car-cal-sum { display:flex; gap:8px; margin-bottom:12px; }
.car-cal-sum div {
  flex:1; text-align:center; padding:8px 4px;
  border-radius:var(--radius-md, 8px); background:var(--card2);
}
.car-cal-sum b { display:block; font-size:19px; font-weight:800; color:var(--primary, #2E7D5B); line-height:1.2; }
.car-cal-sum span { font-size:12px; color:var(--t3); }
.car-cal { display:grid; grid-template-columns:repeat(7, 1fr); gap:3px; }
.car-cal-dow { text-align:center; font-size:13px; color:var(--t3); padding:4px 0; font-weight:600; }
.car-cal-day {
  min-height:88px; border:1px solid transparent; background:var(--card);
  color:var(--t1); border-radius:var(--radius-md, 8px); font-family:inherit;
  display:flex; flex-direction:column; align-items:stretch; gap:2px;
  padding:4px 3px; cursor:pointer; overflow:hidden; text-align:left;
}
.car-cal-day:hover { border-color:var(--b2); }
.car-cal-num { text-align:center; font-size:13px; line-height:1.3; flex:0 0 auto; }
/* 예약이 있는 날은 옅게 깔아 빈 날과 구분한다. */
.car-cal-day.has { background:var(--card2); }
.car-cal-day.other { opacity:.4; }
.car-cal-day.sat .car-cal-num { color:var(--info, #2C6FBF); }
.car-cal-day.sun .car-cal-num { color:var(--danger, #C2185B); }
.car-cal-day.today { border:1px dashed var(--primary, #2E7D5B); }
.car-cal-day.today .car-cal-num { font-weight:800; }
/* 보고 있는 날 — .has 배경을 덮어야 하므로 반드시 뒤에 온다. */
.car-cal-day.picked, .car-cal-day.has.picked, .car-cal-day.today.picked {
  border:2px solid var(--primary, #2E7D5B); padding:3px 2px; opacity:1;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.car-cal-day.picked .car-cal-num {
  background:var(--primary, #2E7D5B); color:var(--fg-on, #fff); font-weight:800;
  border-radius:999px; width:fit-content; min-width:22px; margin:0 auto 1px; padding:0 7px;
}
.car-cal-ev {
  display:block; width:100%; font-size:11px; line-height:1.6; font-weight:700;
  color:var(--fg-on, #fff); border-radius:3px; padding:0 4px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.car-cal-more { font-size:11px; color:var(--t3); text-align:center; line-height:1.4; }
@media (max-width:720px) {
  .car-cal-day { min-height:64px; }
  .car-cal-ev { font-size:9px; padding:0 2px; }
  .car-cal-sum span { font-size:11px; }
}
/* 필수 표시와 빠진 칸 — 무엇을 채워야 하는지, 무엇이 비었는지 눈으로 알게. */
.car-req { color:var(--danger, #C0392B); font-weight:700; margin-left:3px; }
.car-opt { color:var(--t3); font-style:normal; font-weight:400; font-size:12px; margin-left:4px; }
.car-field input.missing, .car-field select.missing {
  border-color:var(--danger, #C0392B);
  background:color-mix(in srgb, var(--danger, #C0392B) 8%, transparent);
}
.car-rowbtns { white-space:nowrap; }
.car-rowbtns button + button { margin-left:4px; }
.car-form-foot {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px;
}
.car-form-hint { font-size:12px; color:var(--t3); }
.car-primary {
  border:1px solid var(--primary, #2E7D5B); background:var(--primary, #2E7D5B);
  color:var(--fg-on, #fff); font-size:14px; font-weight:700; font-family:inherit;
  padding:7px 20px; border-radius:var(--radius); cursor:pointer;
}
.car-primary:hover { filter:brightness(1.08); }
.car-logbar { margin-bottom:12px; }
@media (max-width:900px) {
  .car-form-grid { grid-template-columns:repeat(2, minmax(140px, 1fr)); }
  .car-field.wide { grid-column:span 2; }
}
@media (max-width:560px) {
  .car-form-grid { grid-template-columns:1fr; }
  .car-field.wide { grid-column:span 1; }
}
.car-admin-head { font-size:13px; font-weight:700; color:var(--t2); margin-bottom:8px; }
.car-admin-list { display:flex; flex-wrap:wrap; gap:6px; }
.car-admin-item {
  display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--t1);
  border:1px solid var(--b1); border-radius:var(--radius); padding:5px 10px; cursor:pointer;
}
.car-admin-item.off { color:var(--t3); }
.car-admin-item span { font-size:12px; color:var(--t3); }
.car-admin-item input { accent-color:var(--primary); cursor:pointer; }