/* ==============================
   Tokens / Base
============================== */
:root {
  --bg:#CDD6DD;
  --fg:#111;
  --muted:#666;
  --primary:#004BB1;
  --danger:#e11d48;
  --border:#e5e7eb;
  --card:#fff;
  --text:#3B4043;
  --vh:100vh;
}

* { box-sizing:border-box }

html, body {
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--fg);
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP",sans-serif;
  height:100%;
}

a { color:var(--text); text-decoration:none; }

h3 { margin: 0px; margin-bottom: 16px; }

/* iOSキーボード時のスクロール余白対策（既存） */
input, select, textarea { font-size:16px; }

/* ==============================
   Layout
============================== */
.container { max-width:980px; margin:0 auto; padding:8px; }
main.container { padding-top:16px; }

.site-header {
  position:sticky;
  top:0;
  background:#fff;
  border-bottom:1px solid var(--border);
  z-index:10;
}
.site-header .brand { font-weight:700; font-size:18px; }
.site-header nav ul {
  list-style:none;
  margin:8px 0 0;
  padding:0;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.site-header nav .user { color:var(--muted); font-size:14px; }
.site-header nav .role { font-size:12px; color:var(--muted); }

.site-footer {
  border-top:1px solid var(--border);
  margin-top:24px;
  background:#fff;
}

/* アプリ骨格（既存） */
.app { display:flex; flex-direction:column; }
.main-area {
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
}

/* ==============================
   Alerts
============================== */
.alert {
  background:#fff3cd;
  border:1px solid #ffecb5;
  padding:12px;
  border-radius:var(--radius);
  margin:12px 0;
}

/* ==============================
   Forms / Buttons
============================== */
.form .form-row { margin-bottom:12px; }
.form input[type="text"],
.form input[type="date"],
.form input[type="number"],
.form input[type="password"],
.form textarea,
.form select {
  width:100%;
  padding:12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  font-size:16px;
}
.form textarea { min-height:120px; }
.form .req { color:var(--danger); margin-left:6px; }

.actions { display:flex; gap:10px; align-items:center; margin-top:10px; flex-wrap:wrap; }

.button, button {
  display:inline-block;
  background:var(--primary);
  color:#fff;
  padding:10px 16px;
  border-radius:16px;
  border:none;
  cursor:pointer;
  font-size:16px;
}
.button.outline { background:transparent; color:var(--primary); border:1px solid var(--primary); }
.button.sm, button.sm { padding:8px 12px; font-size:14px; }
button.danger { background:var(--danger); }
.inline { display:inline; }

/* 汎用ボタン（既存） */
.btn {
  appearance:none;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-size:16px;
  min-height:44px;
}
.btn.primary { background:var(--primary); color:#fff; border-color:var(--primary); }

/* ==============================
   Search grid
============================== */
.search .grid {
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-bottom:10px;
}

/* ==============================
   Header(progress) / Nav
============================== */
.header {
  padding:.75rem 1rem;
  border-bottom:1px solid #eee;
  display:flex;
  align-items:center;
  gap:.75rem;
}
.progress {
  flex:1;
  height:6px;
  background:#eee;
  border-radius:999px;
  overflow:hidden;
}
.progress > div {
  height:100%;
  width:0%;
  background:#0a7cff;
  transition:width .25s;
}

.nav {
  display:flex;
  gap:.5rem;
  padding:.75rem;
  border-top:1px solid #eee;
}
.nav button {
  flex:1;
  padding:.9rem;
  border:none;
  border-radius:.6rem;
  background:#0a7cff;
  color:#fff;
  font-size:1rem;
}
.nav button.ghost { background:#f2f5f9; color:#0a2740; }

.error { color:#b00020; font-size:.9rem; }

/* ==============================
   Swiper / Slides
============================== */
.swiper {
  flex:1 1 auto;
  min-height:0;
  height:auto !important;
  background:#fff;
  padding-bottom:var(--dock-h, 72px);
  touch-action:pan-y;
}
.swiper-wrapper { height:100%; }

.swiper-slide {
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  height:100% !important;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:var(--dock-h, 72px);
}

.slide-inner { padding:1rem; display:flex; flex-direction:column; gap:.75rem; }
.slide-title { font-weight:700; }

/* ==============================
   Slide 1
============================== */

#select-site, #select-leader {
  list-style: none;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  font-size: 16px;
  line-height: 1.4;
  padding: 10px 12px;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}

/* ==============================
   Cards (Slide 2)
============================== */
.cards { display:grid; gap:12px; }
.card {
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.card-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.card-title { font-weight:700; flex:1; }
.handle { cursor:grab; user-select:none; font-size:18px; padding:0 6px; border-radius:8px; }
.handle:active { cursor:grabbing; }

.row { display:grid; gap:10px; grid-template-columns:1fr; }
.field { display:flex; flex-direction:column;}
.label { font-weight:600; }
.hint { color:var(--muted); font-size:.82rem; }

.input, .ts-wrapper {
  width:100%;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
}
.input { font-size:16px; line-height:1.4; padding:10px 12px; }
.input.adorned { padding-right:46px; position:relative; }
.adorn {
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  color:#475569; font-size:.9rem; pointer-events:none;
}

.ghost { opacity:.6; outline:2px dashed #94a3b8; }
.mini { color:var(--muted); font-size:.9rem; }

/* ==============================
   Dock (Bottom Nav)
============================== */
.dock{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:1000;
  background:rgba(248,250,252,.95);
  backdrop-filter:blur(6px);
  border-top:1px solid var(--border);
  padding:8px;
}
.dock .row { display:flex; gap:8px; align-items:center; }

/* Dock 分の下余白 */
main.container,
.main-area {
  padding-bottom:calc(var(--dock-h, 72px));
}

/* ==============================
   Tables / Responsive
============================== */
.table-wrap {
  overflow-x:auto;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
}
table { width:100%; border-collapse:collapse; }
th, td { padding:12px; border-bottom:1px solid var(--border); vertical-align:top; }
th { background:#fafafa; text-align:left; }
td.num { text-align:right; }
td.desc { white-space:pre-wrap; }

/* 小画面カード化 */
@media (max-width:640px) {
  table.responsive thead { display:none; }
  table.responsive,
  table.responsive tbody,
  table.responsive tr,
  table.responsive td { display:block; width:100%; }
  table.responsive tr { border-bottom:1px solid var(--border); padding:12px; }
  table.responsive td { border:none; padding:0px; }
  table.responsive td[data-label]::before {
    content: attr(data-label) "：";
    display:inline-block;
    min-width:6em;
    color:var(--muted);
    font-size:14px;
  }
  .ops { margin-top:8px; }
}

/* ==============================
   Pagination
============================== */
.pagination { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.pagination a,
.pagination .current {
  padding:8px 12px;
  border-radius:8px;
  border:1px solid var(--border);
  background:#fff;
}
.pagination .current { background:#e5efff; border-color:#c7d8ff; }

/* ==============================
   Media Queries
============================== */
@media (min-width:640px) {
  .search .grid { grid-template-columns:repeat(2,1fr); }
}

@media (min-width:720px) {
  .row { grid-template-columns:1fr 1fr; }
}

/* ==============================
   Worker Pick
============================== */

.field-label{display:block;font-weight:700;color:#3B4043;letter-spacing:.02em;margin:4px 0 10px}

/* 検索バー風トリガ */
.search-proxy{
  display:flex;align-items:center;gap:10px;padding:12px 14px;background:#fff;border:1px solid #cfd8e3;
  border-radius:10px;color:#667085;cursor:pointer;user-select:none;
}
.search-proxy .icon{opacity:.9}
.search-proxy .ph{opacity:.8}

/* ピッカー（ドロップダウン） */
.picker{position:relative;margin-top:0px;margin-bottom:6px;}
.picker.open{ margin-top:8px; }
.picker-panel{
  overflow:hidden; height:0; padding:0; border:0; border-radius:12px; background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.08);pointer-events:none;
}
.picker.open .picker-panel{
  height:auto; padding:8px; border:1px solid var(--border);pointer-events:auto; 
}
.picker-list{max-height:260px; overflow:auto; margin:0; padding:4px 2px; list-style:none}
.picker-item{
  display:flex; align-items:center; gap:10px; padding:10px 8px; border-radius:8px; cursor:pointer;
}
.picker-item:hover{background:#f7f7f9}
.picker-empty{padding:10px;color:#667085}

/* 追加された従業員の行 */
.worker-rows {
  display: grid;
  row-gap: 10px;
  margin-top: 0;
}
.worker-row {
  display: grid;
  grid-template-rows: auto auto;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 10px;
}

.worker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.worker-header .avatar {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #eef2f7;
  display: grid;
  place-items: center;
}

.worker-header .name {
  flex: 1 1 40%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.worker-inputs {
  display: flex;
  gap: 1em;
  align-items: center;
}

.ot {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #667085;
}

.ot input {
  width: 6em;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.worker-header .del {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;

  flex: 0 0 3em;
  width: 3em;
  height: 2em;
  overflow: hidden;
}


.worker-header .del::before {
  content: "削除";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  line-height: 1;
}

.error-message {
  color: red;
  font-size: 0.9em;
  margin-top: 4px;
}

/* 捨て場単位セレクタ */
.segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 4px;
  background: #f9f9f9;
  inline-size: 50%;
}

.segmented label {
  display: grid;
  place-items: center;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.segmented input[type="radio"] {
  appearance: none;
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* 選択中の見た目を強調 */
.segmented label:has(input:checked) {
  background: #0078d4;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 0 0 2px #0078d4 inset;
}


@media (max-width:640px) {
  .segmented {inline-size: 100%;}
}
/* --------------- */

/*password input*/
.form-row {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  margin-bottom: 1em;
}

.password-field {
  position: relative;
  display: flex;
  align-items: center;
}

.password-field input {
  width: 100%;
  padding: 0.6em 2.4em 0.6em 0.8em;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-family: inherit;
  font-size: 1em;
  box-sizing: border-box;
}

.toggle-password {
  position: absolute;
  right: 0.6em;
  background: none;
  border: none;
  cursor: pointer;
  color: #666;
  font-size: 1.2em;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.toggle-password:hover {
  color: #007bff;
}