/* ===== neat.cssベース ===== */
* { box-sizing: border-box; }

:root{
  color-scheme: light dark;
  --light:#fff;
  --lesslight:#cbcbcb;
  --dark:#404040;
  --moredark:#000;
  --link:royalblue;
  --accent:#0a7;
  border-top:5px solid var(--dark);
  line-height:1.5em;
  font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size:16px;
  color:var(--dark);
}

h1{ line-height:1em; }

button, input, textarea, select{ font-size:1em; }

input{
  border:1px solid var(--dark);
  background-color:var(--light);
  border-radius:.25em;
  padding:.5em;
}

pre{ background-color:var(--lesslight); margin:.5em 0; padding:.5em; overflow:auto; }
code{ background-color:var(--lesslight); }
blockquote{ border-left:.25rem solid var(--dark); padding-left:1rem; }

body{
  background-color:var(--light);
  margin:0;
  max-width:800px;
  padding:0 20px 20px 20px;
  margin-left:auto;
  margin-right:auto;
}

a{
  outline:none;
  color:var(--dark);
  text-decoration-color: currentColor; /* 下線色＝文字色 */
}
a:hover{ text-decoration-color: var(--link); }

img{ max-width:100%; height:auto; }

button, .button, input[type=submit]{
  display:inline-block;
  background-color:var(--dark);
  color:var(--light);
  text-align:center;
  padding:.5em;
  border-radius:.25em;
  text-decoration:none;
  border:none;
  cursor:pointer;
}
.button a{ text-decoration:none; }
button:hover, .button:hover, input[type=submit]:hover{ color:var(--lesslight); background-color:var(--moredark); }
button + button, .button + .button, input[type=submit] + input[type=submit]{ margin-left:1em; }

.center{ display:block; margin-left:auto; margin-right:auto; text-align:center; }
.breathe{ margin-top:3em; }
input.center{ display:block; margin-top:1em; }
.bordered{ border:3px solid; }
.home{
  display:inline-block; background-color:var(--dark); color:var(--light);
  margin-top:20px; padding:5px 10px; text-decoration:none; font-weight:bold;
}

/* Desktop sizes */
@media (min-width:600px){
  ol.twocol{ column-count:2; }
  .row{ display:flex; flex-direction:row; padding:0; width:100%; }
  .row > *{ display:block; flex:1 1 auto; max-width:100%; width:100%; }
  .row > *:not(:last-child){ margin-right:10px; }
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark){
  :root{ --light:#222; --lesslight:#333; --dark:#eee; --moredark:#fefefe;}
  *:focus{ outline:var(--light); box-shadow:0 0 0 .25em var(--link); }
  .button a{ color:var(--light); }
}

/* Printing */
@media print{ .home{ display:none; } }

/* ===== アプリUI ===== */

/* コンテンツ */
.content{ 
  padding:16px;
  margin-top: 25px;
}

/* カード */
.card{
  background:var(--light);
  border:1px solid var(--lesslight);
  border-radius:.8rem;
  padding:1rem;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.card-md{ max-width:520px; margin:2rem auto; }

.vstack{ display:flex; flex-direction:column; gap:.75rem; }
.gap > * + *{ margin-top:.75rem; }

/* プライマリ（完了と同系色に統一） */
.btn-primary,
dialog form button.btn-primary,
input[type="submit"].btn-primary{
  background: var(--light) !important;
  color: var(--dark) !important;
  border:1px solid var(--dark);
  border-radius: .7rem;
  padding: .6rem .9rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary:hover {
  background: var(--lesslight) !important;
  color: var(--dark) !important;
}

@media (prefers-color-scheme: dark){
  .btn-primary,
  dialog form button.btn-primary,
  input[type="submit"].btn-primary{
   background: var(--light) !important;
    color: var(--dark) !important;
    border:1px solid var(--dark);
    border-radius: .7rem;
   padding: .6rem .9rem;
    font-weight: 700;
    cursor: pointer;
   text-decoration: none;
  }
  .btn-primary:hover {
   background: var(--lesslight) !important;
   color: var(--dark) !important;
  }
}

.center-screen{ min-height:100dvh; display:grid; place-items:center; }

.error{ color:#c00; }
.notice{ color:#0a7; font-weight:700; }

/* 表（TASK） */
.table, table{ width:100%; border-collapse:collapse; }
th, td{ padding:.6rem; border-bottom:1px solid var(--lesslight); text-align:left; }
th{ font-size:.9rem; opacity:.85; }
.table-wrap{ overflow:auto; }
.table th, .table td{ white-space:nowrap; }

/* 入力幅 */
label>input[type="text"],
label>input[type="password"],
label>input[type="date"],
label>input[type="number"],
label>select{
  width:100%; padding:.6rem .7rem; border:1px solid var(--dark);
  background:var(--lesslight); border-radius:.5rem;
}

/* 見出し（バーは使わない） */
.page-title{ margin:16px 12px 8px; font-size:20px; font-weight:700; }

/* ===== 右上アクションボタン（ベル/ハンバーガー共通） =====
   - 背景はボディと同じ
   - シャドウ無し
   - ホバー：ライトは少し暗い/ダークは少し明るい */
.menu-fab{
  position:fixed;
  top:calc(12px + env(safe-area-inset-top));
  right:12px;
  width:44px; height:44px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  background: var(--light);          /* ボディと同じ */
  border:1px solid var(--lesslight); /* 輪郭は淡く */
  border-radius:8px;
  box-shadow: none;                  /* シャドウ無し */
  z-index:1100;
  cursor:pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.menu-fab:hover{ background: #f2f2f2; } /* ライト時 */
.menu-fab .menu-line{
  display:block;
  width:20px; height:2px;
  background: var(--dark);
  border-radius:2px;
}

/* ダークの微調整 */
@media (prefers-color-scheme: dark){
  .menu-fab{ background: var(--light); border-color:#444; }
  .menu-fab:hover{ background:#2b2b2b; }      /* ボディ(#222)より少し明るく */
  .menu-fab .menu-line{ background: var(--dark); }
}

/* ドロワー（サイドメニュー） */
.overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  opacity:0; transition:opacity .2s ease; pointer-events:none; z-index:999;
}
.overlay.open{ opacity:1; pointer-events:auto; }

.drawer{
  position:fixed; inset:0 auto 0 0; width:280px; background-color:var(--light); color:#111;
  box-shadow:2px 0 12px rgba(0,0,0,.2);
  transform:translateX(-100%);
  transition:transform .2s ease;
  z-index:1000;
  display:flex; flex-direction:column;
}
.drawer.open{ transform:translateX(0); }

.drawer-list{ list-style:none; margin:0; padding:0; }
.drawer-link, .drawer-list a{
  display:block; width:100%; text-align:left;
  padding:12px 16px; text-decoration:none;
  background:transparent; border:none; color:--moredark; font:inherit; cursor:pointer;
}
.drawer-link:hover, .drawer-list a:hover{ background:--lesslight; }

/* ===== タスク名（リンク風ボタン/黒） ===== */
.task-title-btn{
  background:transparent;
  border:none;
  color:var(--dark);
  text-decoration:underline;
  cursor:pointer;
  padding:0;
  font:inherit;
}
.task-title-btn:hover{ filter:brightness(0.9); }

/* ===== モーダル（詳細表示） ===== */
.modal-overlay{ z-index:1200; }

.modal{
  position:fixed;
  inset:50% auto auto 50%;
  transform:translate(-50%, -50%) scale(0.98);
  width:min(92vw, 560px);
  background:var(--light);
  color:var(--dark);
  border:1px solid var(--lesslight);
  border-radius:.8rem;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
  z-index:1201;
  padding-bottom:.5rem;
  opacity:0;
  transition:transform .15s ease, opacity .15s ease;
}
.modal.open{ transform:translate(-50%, -50%) scale(1); opacity:1; }

.modal-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:.8rem 1rem; border-bottom:1px solid var(--lesslight);
}
.modal-title{ margin:0; font-size:1.05rem; font-weight:700; }
.modal-close{ background:transparent; border:none; font-size:1.25rem; cursor:pointer; line-height:1; }
.modal-body{ padding:1rem; white-space:pre-wrap; word-wrap:break-word; }
.modal-footer{ padding:.5rem 1rem .8rem; display:flex; justify-content:flex-end; }

/* ===== トースト（小さなメッセージ：画面上部） ===== */
.toast{
  position:fixed;
  left:50%;
  top:calc(10px + env(safe-area-inset-top));
  transform:translateX(-50%) translateY(-8px);
  background:rgba(0,0,0,.85);
  color:#fff;
  padding:8px 12px;
  border-radius:999px;
  font-size:.85rem;
  box-shadow:0 6px 20px rgba(0,0,0,.2);
  z-index:1300;
  opacity:0;
  transition:opacity .15s ease, transform .15s ease;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ===== 完了ボタン（縁あり・細字・背景はボディ色に合わせる） ===== */
.done-btn{
  background: var(--light);          /* ライト=白 / ダーク=#222 */
  color: var(--dark);                /* 文字は反転色 */
  border: 1px solid var(--dark);     /* ライト=黒系 / ダーク=白系 */
  border-radius: .5rem;
  padding: .45rem .8rem;
  font-weight: 400;                  /* 細字 */
  line-height: 1;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
}

.done-btn:hover{
  background: var(--light);
  color: var(--lesslight);
}

@media (prefers-color-scheme: dark){
  .done-btn:hover{
    color:var var(--dark) ;
    background:var(--lesslight);
  }
}
.done-btn:active{ transform: translateY(1px); }

/* ===== 通知ドロワー（全画面・別系統） ===== */
.notif-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.9);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
  z-index: 1600;
}
/* hidden なら確実に消す（クリックも拾わせない） */
.notif-overlay[hidden]{ display:none !important; }
.notif-overlay.open{ opacity:1; pointer-events:auto; }

.notif-drawer{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;                              /* アドレスバー対策 */
  background: var(--light);
  color: var(--moredark);
  display: flex;
  flex-direction: column;
  padding-top: calc(env(safe-area-inset-top) + 8px);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(-8px);
  opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
  z-index: 1601;                               /* overlay より上 */
}
/* hidden なら確実に消す（クリックも拾わせない） */
.notif-drawer[hidden]{ display:none !important; }
.notif-drawer.open{ transform: none; opacity: 1; }

.notif-header{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.8rem 1rem;
  border-bottom:1px solid var(--lesslight);
}

.notif-title{
  margin:0;
  flex:1;                /* タイトルが中央に来る */
  text-align:center;
}

.notif-close{
  margin-left:auto;      /* ✕ が右端へ */
  background:transparent;
  border:none;
  color:var(--dark);
  font-size:1.5rem;
  padding:.25rem .5rem;
  cursor:pointer;
}

.notif-close:hover{
  background-color: var(--light);
}

.notif-close:active{
  background-color: var(--lesslight);
}

.notif-body{
  flex:1; overflow:auto; padding: .9rem 1rem calc(env(safe-area-inset-bottom) + 1rem);
  -webkit-overflow-scrolling: touch;
}
.notif-item{ border-top:1px dashed var(--lesslight); padding:.9rem 0; }
.notif-item:first-child{ border-top:none; }
.notif-when{ font-size:.83rem; opacity:.8; margin-bottom:.25rem; }
.notif-subject{ font-weight:700; margin-bottom:.25rem; }
.notif-text{ white-space:pre-wrap; word-break:break-word; }
.notif-empty{ opacity:.7; }

/* 背景スクロールロック（通知表示中） */
.body--lock{ overflow: hidden; touch-action: none; }

/* ダーク補正 */
@media (prefers-color-scheme: dark){
  .notif-header{ border-bottom-color:#444; }
}

/* ===== モバイル最適化 ===== */
@media (max-width:599px){
  :root{ font-size:13px; line-height:1.45em; }
  th, td{ font-size:.92rem; }
  .page-title{ font-size:1.05rem; margin:12px 8px 6px; }
  .menu-fab{ width:40px; height:40px; gap:3px; }
  .menu-fab .menu-line{ width:18px; }
}

/* タップ強調を消す */
button, .btn-primary, .menu-link{ -webkit-tap-highlight-color:transparent; }

/* スクリーンリーダー専用 */
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

@media (prefers-color-scheme: dark){
  .icon{
    color: var(--lesslight);
  }
}

/* ラベルを上、入力を下に縦並びにする */
form.vstack > div { 
  display: block;
  margin: .8rem 0 1rem;
}

form.vstack > div > label{
  display: block;               /* ← 横並びをやめて縦に */
  margin: 0 0 .4rem;
  line-height: 1.4;
  font-weight: 600;
}

/* 入力系は100%幅・ブロック表示に */
form.vstack > div > input[type="text"],
form.vstack > div > input[type="number"],
form.vstack > div > input[type="tel"],
form.vstack > div > input[type="email"],
form.vstack > div > select,


form.vstack > div > textarea{
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border-radius:.25em;
  padding:.5em;
  background-color: var(--light);
}

/* 入力は全部100%幅（チェックボックスは除く） */
form.vstack .field input:not([type="checkbox"]),
form.vstack .field select,
form.vstack .field textarea{
  display:block;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

/* フラグ(チェック)は横一列で折り返し */
.checkboxes.row{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem 1rem;
}
.checkboxes.row .yn-inline{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}


/* 入力系は100%幅・ブロック表示に */
form.vstack input.task_input,
form.vstack select.task_input,
form.vstack textarea.task_input {
  display:block;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  border-radius:.25em;
  padding:.5em;
  background-color: var(--light);
}