* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif; background: #f4f6f8; color: #222; }
.hidden { display: none !important; }
.view { min-height: 100vh; }
/* ===== ログイン / 初回パスワード変更（スマリハポータル） ===== */
#view-login, #view-changepw { position: relative; display: flex; align-items: center; justify-content: center; padding: 24px 16px; overflow: hidden;
  background: linear-gradient(150deg, #143764 0%, #175573 45%, #1E6450 100%); }
#view-login::before, #view-changepw::before { content: ""; position: absolute; width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(253,219,58,.20) 0%, rgba(253,219,58,0) 65%); top: -180px; right: -120px; }
#view-login::after, #view-changepw::after { content: ""; position: absolute; width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.13) 0%, rgba(255,255,255,0) 65%); bottom: -260px; left: -160px; }
.login-box { position: relative; z-index: 1; width: 100%; max-width: 400px; background: #fff; padding: 34px 32px 24px; border-radius: 20px; box-shadow: 0 18px 50px rgba(8,32,24,.35); }
.login-box h1 { font-size: 20px; margin: 0 0 4px; }
.login-box .sub { color: #666; margin: 0 0 16px; }
.login-brand { text-align: center; margin-bottom: 22px; }
.login-logo { width: 190px; max-width: 70%; height: auto; margin-bottom: 14px; }
.login-brand h1 { font-size: 27px; font-weight: 800; color: #143764; letter-spacing: .14em; margin: 0; }
.login-en { font-size: 10px; letter-spacing: .42em; color: #7d99a8; margin: 5px 0 0; }
.login-accent { width: 56px; height: 4px; border-radius: 2px; margin: 14px auto 12px; background: linear-gradient(90deg, #1E6450, #fddb3a); }
.login-catch { font-size: 12.5px; color: #145F69; letter-spacing: .08em; margin: 0; }
#view-login label, #view-changepw label { font-size: 12px; font-weight: 700; color: #55707f; letter-spacing: .06em; margin: 14px 0 0; }
#view-login input, #view-changepw input { background: #F0F6F6; border: 1.5px solid #d9e6e2; border-radius: 10px; padding: 11px 12px; margin-top: 6px; transition: border-color .15s, box-shadow .15s; }
#view-login input:focus, #view-changepw input:focus { outline: none; border-color: #1E6450; box-shadow: 0 0 0 3px rgba(30,100,80,.15); background: #fff; }
#view-login .btn.primary, #view-changepw .btn.primary { background: #1E6450; border-color: #1E6450; border-radius: 10px; padding: 13px 16px; font-size: 16px; font-weight: 700; letter-spacing: .2em; margin-top: 18px; transition: background .15s, transform .15s; }
#view-login .btn.primary:hover, #view-changepw .btn.primary:hover { background: #17573f; transform: translateY(-1px); }
.login-footer { text-align: center; font-size: 11px; color: #9db4ac; letter-spacing: .24em; margin: 20px 0 0; }
label { display: block; margin: 10px 0; font-size: 14px; }
input, select, textarea { font-size: 16px; padding: 8px; border: 1px solid #bbb; border-radius: 6px; width: 100%; margin-top: 4px; background: #fff; }
.controls label, .row label { display: inline-block; width: auto; margin: 4px 8px 4px 0; }
.controls input, .controls select, .row input { width: auto; }
.btn { background: #e8ecf1; border: 1px solid #c3cad4; border-radius: 8px; padding: 9px 16px; font-size: 15px; cursor: pointer; }
a.btn { text-decoration: none; color: inherit; display: inline-block; }
.btn.primary { background: #1a73e8; border-color: #1a73e8; color: #fff; }
.btn.danger { background: #d93025; border-color: #d93025; color: #fff; }
.btn.small { padding: 5px 10px; font-size: 13px; }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .5; }
.error { color: #d93025; min-height: 1em; font-size: 14px; }
.warn { color: #b06000; font-weight: 600; white-space: pre-line; }
.hint { color: #666; font-size: 13px; }
.topbar { display: flex; justify-content: space-between; align-items: center; background: #1a73e8; color: #fff; padding: 10px 14px; }
.brand { font-weight: 700; font-size: 17px; }
.facility-name { font-weight: 400; font-size: 14px; opacity: .9; }
.user-box { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.tabs, .subtabs { display: flex; gap: 6px; padding: 8px 10px; background: #fff; border-bottom: 1px solid #ddd; flex-wrap: wrap; }
.tab, .mtab { border: 1px solid #c3cad4; background: #f0f3f7; border-radius: 999px; padding: 7px 14px; cursor: pointer; font-size: 14px; }
.tab.active, .mtab.active { background: #1a73e8; color: #fff; border-color: #1a73e8; }
.tabpage { padding: 12px; max-width: 1100px; margin: 0 auto; }
.card { background: #fff; border-radius: 10px; padding: 12px 14px; margin: 10px 0; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.space-between { justify-content: space-between; }
.attendees { max-height: 220px; overflow: auto; border: 1px solid #e0e0e0; border-radius: 8px; padding: 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px 10px; }
.attendees label { display: flex; gap: 6px; align-items: center; margin: 2px 0; font-size: 14px; }
.attendees input { width: auto; margin: 0; }
.trips-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.trip-card { background: #fff; border-radius: 10px; padding: 12px 14px; box-shadow: 0 1px 4px rgba(0,0,0,.1); cursor: pointer; border-left: 6px solid #1a73e8; }
.trip-card h4 { margin: 0 0 6px; font-size: 17px; }
.trip-card .meta { font-size: 14px; color: #555; line-height: 1.7; }
.trip-card.delay-warn { border-left-color: #f9ab00; background: #fff8e1; }
.trip-card.delay-late { border-left-color: #d93025; background: #fce8e6; }
.trip-card .delay-badge { background: #f9ab00; color: #fff; }
.trip-card.delay-late .delay-badge { background: #d93025; }
.badge { display: inline-block; background: #e8f0fe; color: #1a73e8; border-radius: 999px; padding: 1px 8px; font-size: 12px; margin-right: 4px; }
.badge.warnb { background: #fdecea; color: #b3261e; }
.badge.okb { background: #e6f4ea; color: #137333; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { border-bottom: 1px solid #e5e5e5; padding: 6px 8px; text-align: left; vertical-align: top; }
th { background: #f0f3f7; }
.seat-chart { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 430px; margin: 10px 0; }
.seat { border: 2px solid #9aa5b1; border-radius: 8px; padding: 6px; min-height: 58px; background: #fff; font-size: 12px; text-align: center; }
.seat .slabel { color: #666; font-size: 11px; }
.seat .sname { font-weight: 700; font-size: 14px; }
.seat.driver { background: #eceff1; color: #777; }
.seat.unused { background: #f5f5f5; color: #aaa; border-style: dashed; }
.seat.selected { border-color: #1a73e8; background: #e8f0fe; }
.seat-row-label { grid-column: 1 / -1; font-size: 12px; color: #666; margin-top: 4px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #323232; color: #fff; padding: 10px 18px; border-radius: 8px; font-size: 14px; z-index: 99; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 14px; }
.checkline { display: flex; align-items: center; gap: 6px; }
.checkline input { width: auto; }
details.trip-edit { margin-top: 8px; }
summary { cursor: pointer; font-size: 14px; color: #1a73e8; }
.big-btn { font-size: 17px; padding: 14px 18px; }
.stop-actions { display: flex; gap: 6px; }
.stop-actions .btn { padding: 6px 10px; font-size: 13px; }
.done { color: #137333; font-weight: 700; }
@media (max-width: 640px) {
  .tabpage { padding: 8px; }
  table { font-size: 13px; }
  th, td { padding: 5px 4px; }
}

/* 印刷（送迎表） */
#print-area { display: none; }
@media print {
  body * { visibility: hidden; }
  #print-area { display: block; visibility: visible; position: absolute; inset: 0; padding: 10px; }
  #print-area * { visibility: visible; }
  .sheet { page-break-after: always; font-size: 13px; }
  .sheet h2 { font-size: 18px; margin: 0 0 4px; }
  .sheet table th, .sheet table td { border: 1px solid #999; }
  .seat-chart .seat { border: 1px solid #666; min-height: 44px; }
}

/* ===== 運行モニター ===== */
.badge.gray { background: #eeeeee; color: #5f6368; }
#monitor-map { height: 340px; border-radius: 8px; background: #e8eef2; margin: 8px 0; }
#monitor-list .mrow { padding: 5px 0; border-bottom: 1px dashed #dadce0; font-size: 14px; }
#monitor-list .mrow:last-child { border-bottom: none; }
.veh-pin-wrap { background: transparent; border: none; }
.veh-pin { width: 132px; text-align: center; white-space: nowrap; overflow: hidden; font-size: 11px; font-weight: 700; line-height: 24px; border-radius: 999px; color: #fff; background: #1a73e8; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.veh-pin.stale { background: #80868b; }
.fac-pin { background: transparent; border: none; }
.fac-pin-inner { text-align: center; font-size: 12px; font-weight: 700; line-height: 24px; border-radius: 999px; color: #202124; background: #fbbc04; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); }

/* ===== 連絡依頼 ===== */
#contact-alert { background: #fff3cd; border: 2px solid #e67e22; border-radius: 8px; padding: 10px 12px; margin: 10px 0; }
#contact-alert.hidden { display: none; }
#contact-alert .contact-alert-row { padding: 5px 0; font-size: 15px; }
#contact-alert .contact-alert-row + .contact-alert-row { border-top: 1px dashed #e0a458; }
.btn.contact-open { background: #e67e22; border-color: #e67e22; color: #fff; }
.btn.contact-done { background: #27ae60; border-color: #27ae60; color: #fff; }
#contact-popup { position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; z-index: 1500; background: #27ae60; color: #fff; padding: 14px 18px; border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.35); max-width: 92vw; font-size: 16px; }
#contact-popup.hidden { display: none; }
#contact-popup .btn { background: #fff; color: #1e7a46; border-color: #fff; margin-left: 8px; }

/* ===== モーダル ===== */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal.hidden { display: none; }
.modal-box { max-width: 430px; width: 92%; }