/* === /swim/2025/attend/ui.css === */
:root{
  --bg1:#eaf6ff;
  --bg2:#f7fbff;
  --card:#ffffffcc;
  --border:#ffffff80;
  --text:#0f172a;
  --muted:#64748b;
  --primary:#2563eb;
  --primary2:#1d4ed8;
  --shadow: 0 18px 50px rgba(15, 23, 42, .12);
  --shadow2: 0 10px 25px rgba(15, 23, 42, .10);
  --radius: 18px;
  --danger-bg: rgba(239,68,68,.12);
  --danger-bd: rgba(239,68,68,.25);
  --warn-bg: rgba(245,158,11,.12);
  --warn-bd: rgba(245,158,11,.35);
  --ok-bg: rgba(34,197,94,.12);
  --ok-bd: rgba(34,197,94,.25);
}

@media (prefers-color-scheme: dark) {
  :root{
    --bg1:#0b1220;
    --bg2:#0f1a2d;
    --card:#0b1220cc;
    --border:#1f2a44;
    --text:#e5e7eb;
    --muted:#9aa4b2;
    --shadow: 0 20px 60px rgba(0,0,0,.45);
    --shadow2: 0 12px 28px rgba(0,0,0,.35);
  }
}

*{ box-sizing:border-box; }
html, body { height:100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 600px at 10% 10%, rgba(37,99,235,.18), transparent 60%),
    radial-gradient(900px 600px at 90% 20%, rgba(34,197,94,.14), transparent 55%),
    linear-gradient(135deg, var(--bg1), var(--bg2));
  display:flex;
  align-items:flex-start;       /* 上寄せ */
  justify-content:center;
  padding: 56px 14px 28px;      /* 上を増やす（ここが効く） */
  min-height: 100svh;           /* モバイルのアドレスバー変動にも強い */
}

.wrap{ width:100%;
  max-width: 860px;
  margin-top: 12px;
}

.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow:hidden;
}

.header{
  padding: 20px 22px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.titlebox h1{
  margin:0;
  font-size: clamp(18px, 2.8vw, 24px);
  line-height:1.25;
}
.titlebox .sub{
  margin:6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.35);
}
@media (prefers-color-scheme: dark){ .badge{ background: rgba(255,255,255,.06); } }

.content{ padding: 18px 18px 8px; }

.notice{
  margin: 0 18px 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--warn-bd);
  background: var(--warn-bg);
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.notice .icon{ font-size: 18px; line-height: 1; margin-top: 1px; }

.table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow:hidden;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.35);
}
@media (prefers-color-scheme: dark){ .table{ background: rgba(255,255,255,.05); } }

.table th, .table td{
  padding: 12px 10px;
  text-align:center;
  border-bottom: 1px solid rgba(148,163,184,.18);
}
.table th{
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .04em;
}

.tr-absent{ background: var(--danger-bg); }
.tr-late{ background: var(--warn-bg); }

.actions{
  display:flex;
  gap:10px;
  padding: 0 18px 18px;
  justify-content:center;
  flex-wrap: wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  text-decoration:none;
  color: var(--text);
  background: rgba(255,255,255,.40);
  box-shadow: var(--shadow2);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
@media (prefers-color-scheme: dark){ .btn{ background: rgba(255,255,255,.05); } }

.btn:hover{ transform: translateY(-1px); border-color: rgba(37,99,235,.35); }
.btn.primary{
  color:#fff;
  border-color: rgba(37,99,235,.35);
  background: linear-gradient(135deg, var(--primary), var(--primary2));
}
.btn.muted{
  color:#fff;
  border-color: rgba(100,116,139,.35);
  background: linear-gradient(135deg, #64748b, #475569);
}

.form label{ display:block; margin: 14px 0 8px; font-weight: 700; font-size: 13px; color: var(--text); }
.input, select{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.45);
  color: var(--text);
  outline: none;
}
@media (prefers-color-scheme: dark){
  .input, select{ background: rgba(255,255,255,.06); }
}
.input:focus, select:focus{ border-color: rgba(37,99,235,.45); box-shadow: 0 0 0 4px rgba(37,99,235,.15); }

.hidden{ display:none; }

.footer{
  text-align:center;
  color: var(--muted);
  font-size: 12px;
  padding: 12px 10px 18px;
}
/* ===== Select を見やすくする（dark対応） ===== */
select.input, select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  padding-right: 44px; /* 矢印分 */
  line-height: 1.2;
  cursor: pointer;

  /* 右にカスタム矢印 */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 22px) 50%,
    calc(100% - 16px) 50%,
    0 0;
  background-size: 6px 6px, 6px 6px, 100% 100%;
  background-repeat: no-repeat;
}

/* ドロップダウンの文字色を強制 */
select, option{
  color: var(--text);
}

/* option はOS依存が強いので、効くブラウザでは背景も指定 */
option{
  background: #0b1220; /* dark時の見やすさ優先 */
}

/* ライトモード時の option 背景 */
@media (prefers-color-scheme: light){
  option{ background: #ffffff; }
}

/* フォーカス時の見やすさ */
select:focus{
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 4px rgba(37,99,235,.18);
}
/* スマホはボタンを縦にして押しやすく */
@media (max-width: 560px){
  .actions{
    flex-direction: column;
    align-items: stretch;
  }
  .actions .btn, .actions button.btn{
    width: 100%;
  }
}