:root{
  --bg:#0b0f14;
  --text:#e9eef7;
  --muted:#a8b3c7;
  --line:rgba(255,255,255,.10);

  /* honey */
  --honey:#ffcc33;
  --honey2:#ffb000;

  /* honey accents */
  --honeyBorder: rgba(255,204,51,.28);
  --honeyBorder2: rgba(255,204,51,.40);
  --honeyGlow: rgba(255,204,51,.18);
  --honeySoft: rgba(255,204,51,.10);
  --honeySoft2: rgba(255,204,51,.16);

  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --radius: 18px;
  --radius2: 22px;

  --danger:#ff6b6b;
  --ok:#66e3a6;
  --warn:#ffd166;

  /* =========================
     Beelder Design System（基準）
     ＝「Beelderの説明カード」の濃さを全体基準にする
  ========================= */
  --frame-bg: rgba(16,24,35,.70);
  --frame-bg-hover: rgba(16,24,35,.84);
  --frame-bg-strong: rgba(16,24,35,.72);
  --frame-line: rgba(255,255,255,.12);
  --frame-line-strong: rgba(255,255,255,.14);
  --frame-shadow: 0 18px 50px rgba(0,0,0,.50);

  /* daily cards（仕事管理/予定/経理） */
  --card-bg: rgba(16,24,35,.70);
  --card-bg-hover: rgba(16,24,35,.84);
  --card-line: rgba(255,255,255,.12);
  --card-shadow: 0 18px 50px rgba(0,0,0,.50);

  /* readable text */
  --text-soft: rgba(233,238,247,.88);
  --text-strong: rgba(255,255,255,.98);

  /* honeycomb for mascot */
  --honeycomb-a: rgba(90, 60,  0, .18);
  --honeycomb-b: rgba(90, 60,  0, .12);

  /* footer QR size */
  --foot-qr-box: 74px;
  --foot-qr-img: 58px;
}

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

body{
  margin:0;

  /* ベース：薄い蜂蜜色 */
  background-color: #f6e8b6;

  /* うっすら六角形（ハチの巣）＋柔らかい光 */
  background-image:
    radial-gradient(1200px 600px at 20% 0%, rgba(255, 204, 51, .35), transparent 60%),
    radial-gradient(1200px 600px at 80% 100%, rgba(255, 176, 0, .18), transparent 60%),

    /* honeycomb pattern */
    linear-gradient(30deg,  rgba(90, 60,  0, .08) 12%, transparent 12.5%, transparent 87%, rgba(90, 60, 0, .08) 87.5%, rgba(90, 60, 0, .08)),
    linear-gradient(150deg, rgba(90, 60,  0, .08) 12%, transparent 12.5%, transparent 87%, rgba(90, 60, 0, .08) 87.5%, rgba(90, 60, 0, .08)),
    linear-gradient(90deg,  rgba(90, 60,  0, .06) 12%, transparent 12.5%, transparent 87%, rgba(90, 60, 0, .06) 87.5%, rgba(90, 60, 0, .06));

  background-size:
    auto,
    auto,
    46px 80px,
    46px 80px,
    46px 80px;

  background-position:
    center,
    center,
    0 0,
    0 0,
    23px 40px;

  background-attachment: fixed;

  color:var(--text);
}

/* =========================
   Layout
========================= */

.app{
  display:grid;
  grid-template-columns: 340px 1fr;
  min-height:100vh;
}

/* =========================
   Sidebar
========================= */

.sidebar{
  position:relative;
  border-right:1px solid var(--line);
  padding:18px 16px;

  background:
    radial-gradient(900px 380px at 30% 0%, rgba(255,204,51,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,204,51,.12), transparent 45%),
    rgba(15,23,34,.58);

  backdrop-filter: blur(8px);

  /* ★下フッターを最下段に固定しやすく */
  display:flex;
  flex-direction:column;
}
.sidebar::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-right:1px solid rgba(255,204,51,.10);
}

/* ---- brand card ---- */

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 12px;

  border:1px solid var(--honeyBorder);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);

  background:
    linear-gradient(135deg, rgba(255,204,51,.08), transparent 55%),
    rgba(16,24,35,.72);
}

.bee-badge{
  width:64px; height:64px;

  display:flex;
  align-items:center;
  justify-content:center;

  line-height:0;

  border-radius:16px;
  background:
    radial-gradient(60px 60px at 30% 20%, rgba(255,204,51,.26), transparent 60%),
    linear-gradient(135deg, rgba(255,204,51,.24), rgba(255,176,0,.12));
  border:1px solid rgba(255,204,51,.35);
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
}

/* ✅ ここに入れる（bee-badge の直後） */
.bee-badge .icon-xxl{
  transform: translate(1px, 2px);
}

/* ✅ SVGは block 化（これが効きます） */
.bee-badge svg{ display:block; }

/* ✅ ハチを“前の仕様（黄色）”に戻す：ここは上書きで勝たせる */
.bee-badge svg.icon-xxl{
  width:44px;
  height:44px;
  color: var(--honey) !important; /* ← 白化してるならこれが効きます */
  display:block;
}

.brand-title{
  font-size:22px;
  font-weight:800;
  line-height:1;
  color: rgba(255, 235, 190, .98);
}
.brand-sub{
  color:rgba(255,235,190,.70);
  font-size:12px;
  margin-top:6px;
}

/* ---- auth ---- */

.authbox{
  margin-top:14px;
  padding:12px;

  border:1px solid rgba(255,204,51,.18);
  border-radius: var(--radius2);

  background:
    linear-gradient(135deg, rgba(255,204,51,.06), transparent 55%),
    rgba(16,24,35,.55);
}

.authrow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.pill{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius: 999px;

  background: rgba(255,204,51,.08);
  border:1px solid rgba(255,204,51,.18);
  color: rgba(255,235,190,.85);
  font-size:12px;
}

.login{ display:grid; gap:10px; }

.field{ display:grid; gap:6px; }
.field span{
  font-size:12px;
  color: rgba(255,235,190,.78);
}
.field input, .field select{
  height:44px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.26);
  color: var(--text);
  padding:0 12px;
  font-size:15px;
  outline:none;
}
.field input:focus, .field select:focus{
  border-color: rgba(255,204,51,.35);
  box-shadow: 0 0 0 3px rgba(255,204,51,.10);
}

.field.inline{
  grid-template-columns: 80px 1fr;
  align-items:center;
}
.field.inline span{font-size:13px;}
.field.inline input, .field.inline select{height:44px;}

.hint{
  color: rgba(255,235,190,.70);
  font-size:12px;
  line-height:1.4;
}

.btn{
  height:44px;
  border-radius: 14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding:0 12px;
  font-size:14px;
  cursor:pointer;
}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.58; cursor:not-allowed}

.btn.primary{
  border-color: rgba(255,204,51,.45);
  background: linear-gradient(135deg, rgba(255,204,51,.28), rgba(255,176,0,.14));
  color: rgba(255,245,220,.98);
  font-weight:800;
}
.btn.primary:active{
  transform: translateY(1px);
  filter: brightness(0.98);
}

.btn.ghost{
  background: transparent;
  border-color: rgba(255,204,51,.18);
  color: rgba(255,235,190,.78);
}
.btn.ghost:hover{
  background: rgba(255,204,51,.08);
  border-color: rgba(255,204,51,.28);
}

/* ---- nav ---- */

.nav{
  margin-top:14px;
  display:grid;
  gap:10px;
}

.navgroup{
  border:1px solid rgba(255,204,51,.14);
  border-radius: var(--radius2);
  padding:10px;
  background:
    linear-gradient(135deg, rgba(255,204,51,.05), transparent 55%),
    rgba(16,24,35,.40);
}

.navhead{
  color: rgba(255,235,190,.70);
  font-size:12px;
  padding:2px 6px 10px 6px;
}

.navbtn{
  width:100%;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
  padding:12px 12px;
  border-radius: 16px;
  border:1px solid transparent;
  background: transparent;
  color: var(--text);
  font-size:16px;
  cursor:pointer;
}
.navbtn:hover{
  background: rgba(255,204,51,.10);
  border-color: rgba(255,204,51,.22);
}
.navbtn.active{
  background: rgba(255,204,51,.18);
  border-color: rgba(255,204,51,.34);
  box-shadow: 0 0 0 3px rgba(255,204,51,.08) inset;
}

.navicon{
  width:28px;
  display:inline-grid; place-items:center;
  font-size:18px;
}

/* ---- foot (接続/ポート + スマホ用QR) ---- */

.foot{
  margin-top:auto; /* ★サイドバー最下段へ */
  color: rgba(255,235,190,.70);
  padding:10px;
}

.footRow{
  display:flex;
  align-items:flex-start;         /* ←文字を上寄りに */
  justify-content:space-between;
  gap:12px;
}

.footLeft{
  display:grid;
  gap:4px;
  padding-top:2px;                /* ←上寄り感をほんの少し */
}

.tiny{font-size:12px; opacity:.95}

.footQrBox{
  width: var(--foot-qr-box);
  padding:8px 8px 10px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);    /* 黒枠 */
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  display:grid;
  gap:6px;
  justify-items:center;
  flex: 0 0 auto;
}

.footQrLabel{
  font-size:11px;
  color: rgba(255,235,190,.86);
  letter-spacing:.2px;
}

.loginQrFoot{
  width: var(--foot-qr-img);
  height: var(--foot-qr-img);
  display:block;
  background:#fff;               /* QRが読めるよう白地 */
  border-radius: 10px;
}

/* =========================
   Main / Topbar
========================= */

.main{ padding:18px 18px 24px 18px; }

.topbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px;

  border:1px solid var(--frame-line);
  border-radius: var(--radius2);
  background: var(--frame-bg-strong);
  box-shadow: var(--frame-shadow);
  backdrop-filter: blur(8px);
}

.page-title{font-size:28px; font-weight:900; letter-spacing:.4px}
.page-sub{margin-top:6px; color: var(--text-soft); font-size:13px}

.topbar-right{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.chip{
  border:1px solid var(--frame-line);
  background: rgba(255,255,255,.06);
  border-radius:999px;
  padding:8px 10px;
  font-size:12px;
  color: var(--text-soft);
}

.content{margin-top:14px;}
.page[hidden]{display:none}

/* =========================
   HERO
========================= */

.hero{
  display:grid;
  grid-template-columns: 1fr 260px;
  gap:14px;
  margin-bottom:14px;
}

.hero-card{
  padding:18px;
  border:1px solid var(--frame-line);
  border-radius: var(--radius2);
  background: var(--frame-bg);
  box-shadow: var(--frame-shadow);
  backdrop-filter: blur(8px);
}

.hero-title{ font-size:26px; font-weight:900; }

.hero-desc{
  margin-top:10px;
  color: var(--text-soft);
  font-size:15px;
  line-height:1.7;
}
.hero-note{
  margin-top:12px;
  color: var(--text-soft);
  font-size:13px;
}

.hero-mascot{
  padding:18px;
  border:1px solid rgba(255,204,51,.20);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  display:grid;
  place-items:center;
  backdrop-filter: blur(8px);

  /* 右上イラスト：ハニカム強調（文字が埋もれない） */
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.28)),
    linear-gradient(30deg,  var(--honeycomb-a) 12%, transparent 12.5%, transparent 87%, var(--honeycomb-a) 87.5%, var(--honeycomb-a)),
    linear-gradient(150deg, var(--honeycomb-a) 12%, transparent 12.5%, transparent 87%, var(--honeycomb-a) 87.5%, var(--honeycomb-a)),
    linear-gradient(90deg,  var(--honeycomb-b) 12%, transparent 12.5%, transparent 87%, var(--honeycomb-b) 87.5%, var(--honeycomb-b)),
    radial-gradient(900px 380px at 30% 0%, rgba(255,204,51,.25), transparent 60%),
    linear-gradient(135deg, rgba(255,204,51,.18), rgba(255,176,0,.10));

  background-size:
    auto,
    46px 80px,
    46px 80px,
    46px 80px,
    auto,
    auto;

  background-position:
    0 0,
    0 0,
    0 0,
    23px 40px,
    center,
    center;
}

.mascot-emoji{
  font-size:64px;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.25));
}
.mascot-text{
  margin-top:8px;
  color: var(--text-strong);
  font-weight:900;
  text-shadow: 0 2px 14px rgba(0,0,0,.65);
}

/* =========================
   Bee Friendly UI：ステータス表示
========================= */

.mascot{
  width:100%;
  display:grid;
  place-items:center;
  text-align:center;
}

.mascot-status{
  width: 100%;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.26);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 22px rgba(0,0,0,.20);
}

.ms-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.ms-row:last-child{ border-bottom:none; }

.ms-key{
  font-size:12px;
  color: rgba(255,235,190,.86);
}

.ms-val{
  font-size:12px;
  color: rgba(233,238,247,.95);
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
  font-weight: 700;
}

/* =========================
   CARDS（統一：仕事管理/予定/経理）
========================= */

.cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
}

/* button化されてても見た目が変わらないように */
.card{
  appearance: none;
  -webkit-appearance: none;

  text-align:left;
  padding:18px;
  border-radius: var(--radius2);
  border:1px solid var(--card-line);
  background: var(--card-bg);
  cursor:pointer;
  color: var(--text);
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(8px);

  transition: transform .12s ease, filter .12s ease, background .12s ease, border-color .12s ease;
  position: relative; /* disabled overlay用 */
}

.card-icon{font-size:34px}
.card-title{
  font-size:20px;
  font-weight:900;
  margin-top:8px;
  color: var(--text-strong);
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}
.card-desc{
  margin-top:8px;
  font-size:14px;
  line-height:1.6;
  color: var(--text-soft);
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.card-foot{
  margin-top:12px;
  font-size:12px;
  color: var(--text-soft);
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}

/* hover（押せるカードだけ） */
.card:not(:disabled):hover{
  transform: translateY(-2px);
  filter:brightness(1.06);
  background: var(--card-bg-hover);
  border-color: rgba(255,204,51,.22);
}

/* ★キーボード操作でも押せる感を統一 */
.card:focus-visible{
  outline: 2px solid rgba(255,204,51,.35);
  outline-offset: 2px;
}

/* disabledでも “透けない” が最優先（統一感維持） */
.card:disabled{
  opacity: 1;
  filter: none;
  cursor: not-allowed;
  -webkit-text-fill-color: currentColor; /* Chrome/Edgeの灰色化対策 */
}

/* disabledは薄い幕だけ掛ける */
.card:disabled::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: rgba(0,0,0,.10);
  pointer-events:none;
}

/* =========================
   PANEL / JOBS
========================= */

/* =========================================================
   Toolbar / Filters (共通)
   - 案件 / 業者 / 発注 / 完了 で “同じ並び・同じ高さ”
   - 既存の .filters を .toolbar に寄せる（互換: .filters も残す）
   ========================================================= */
.toolbar, .filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:flex-end;
  justify-content:space-between;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(0,0,0,.14);
  border: 1px solid rgba(255,204,51,.10);
}

.toolbar .left, .filters .left{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:flex-end;
  min-width: 0;
}

.toolbar .right, .filters .right{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:flex-end;
}

/* フィルタ入力（共通） */
.toolbar .field.inline, .filters .field.inline{
  grid-template-columns: 90px 1fr;
}
.toolbar .field.inline span, .filters .field.inline span{
  font-size:13px;
  opacity:.9;
}
.toolbar .field.inline input,
.toolbar .field.inline select,
.filters .field.inline input,
.filters .field.inline select{
  height:44px;
}

/* “検索行だけ狭い” のを防ぐ */
.toolbar input[type="text"],
.toolbar input[type="search"],
.toolbar select,
.filters input[type="text"],
.filters input[type="search"],
.filters select{
  min-width: 220px;
}

/* 小画面は縦積み */
@media (max-width: 980px){
  .toolbar, .filters{ align-items:stretch; }
  .toolbar .left, .filters .left,
  .toolbar .right, .filters .right{ width:100%; justify-content:flex-start; }
  .toolbar input[type="text"], .toolbar input[type="search"], .toolbar select,
  .filters input[type="text"], .filters input[type="search"], .filters select{
    min-width: 180px;
    flex: 1 1 220px;
  }
}

.panel{
  padding:16px;
  border:1px solid var(--frame-line);
  border-radius: var(--radius2);
  background: var(--frame-bg);
  box-shadow: var(--frame-shadow);
  backdrop-filter: blur(8px);
}
.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.panel-title{
  font-size:20px;
  font-weight:900;
  color: var(--text-strong);
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}
.panel-actions{display:flex; gap:10px}

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

.split{
  margin-top:14px;
  display:grid;
  grid-template-columns: 440px 1fr;
  gap:12px;
  min-height: 520px;
}

.list{
  border:1px solid var(--frame-line-strong);
  border-radius: var(--radius2);
  background: var(--frame-bg);           /* ★ここ */
  overflow:auto;
}
.list-item{
  padding:14px 14px;
  border-bottom:1px solid var(--line);
  cursor:pointer;
}
.list-item:hover{background: rgba(255,204,51,.08)}
.list-item.active{background: rgba(255,204,51,.14)}
.li-title{
  font-weight:900;
  font-size:16px;
  color: var(--text-strong);
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}
.li-meta{
  margin-top:6px;
  color: var(--text-soft);
  font-size:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}

.badge{
  display:inline-flex; align-items:center;
  padding:4px 8px;
  border-radius: 999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: var(--text-soft);
  font-size:12px;
}
.badge.warn{border-color: rgba(255,209,102,.35); color: var(--warn)}
.badge.danger{border-color: rgba(255,107,107,.35); color: var(--danger)}
.badge.ok{border-color: rgba(102,227,166,.35); color: var(--ok)}

.detail{
  border:1px solid var(--frame-line-strong);
  border-radius: var(--radius2);
  background: var(--frame-bg);           /* ★ここ */
  padding:14px;
  overflow:auto;
}

.empty{
  height:100%;
  display:grid;
  place-items:center;
  text-align:center;
  color: var(--text-soft);
}
.empty-emoji{font-size:40px}
.empty-title{
  margin-top:6px;
  font-size:18px;
  font-weight:900;
  color: var(--text-strong);
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}
.empty-desc{
  margin-top:6px;
  font-size:13px;
  color: var(--text-soft);
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}

.kv{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap:10px;
  margin-top:10px;
}
.kv .k{color: rgba(233,238,247,.82); font-size:13px}
.kv .v{font-size:14px}

.alerts{ margin-top:12px; display:grid; gap:8px; }
.alert{
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,209,102,.30);
  background: rgba(255,209,102,.08);
  color: var(--warn);
  font-weight:800;
}
.alert.danger{
  border-color: rgba(255,107,107,.30);
  background: rgba(255,107,107,.08);
  color: var(--danger);
}

/* =========================
   Toast
========================= */

.toast{
  position: fixed;
  right: 18px;
  bottom: 18px;
  max-width: 460px;
  padding: 12px 14px;
  border-radius: 14px;
  border:1px solid var(--frame-line);
  background: rgba(16,24,35,.88);
  box-shadow: var(--shadow);
  color: var(--text);
  z-index: 9999;
}

/* =========================
   Jobs: Create Form (right detail)
========================= */
.job-form{
  display:grid;
  gap:12px;
}

.job-form .form-grid{
  display:grid;
  grid-template-columns: 160px 1fr;
  gap:10px 12px;
  align-items:center;
}

.job-form label{
  color: rgba(233,238,247,.82);
  font-size:13px;
}

.job-form input,
.job-form select,
.job-form textarea{
  height:42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: rgba(233,238,247,.96);
  padding:0 12px;
  outline:none;
}

.job-form textarea{
  height:auto;
  padding:10px 12px;
  line-height:1.6;
  min-height:84px;
  resize: vertical;
}

.job-form input:focus,
.job-form select:focus,
.job-form textarea:focus{
  border-color: rgba(255,204,51,.35);
  box-shadow: 0 0 0 3px rgba(255,204,51,.10);
}

.job-form .form-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:6px;
}

.job-form .help{
  color: rgba(233,238,247,.78);
  font-size:12px;
  line-height:1.5;
}

/* =========================
   Modal (共通)
========================= */

.modal { position: fixed; inset: 0; z-index: 9999; }
.modal[hidden] { display: none; }

.modal-backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.35);
}

.modal-panel{
  position: relative;
  width: min(520px, calc(100% - 24px));
  margin: 64px auto;
  padding: 14px;
  border-radius: 16px;
  background: rgba(35, 38, 42, .92);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.08);
}

.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 6px 6px 10px;
}

.modal-title{ font-size: 18px; font-weight: 700; }

.modal-body{ display:grid; gap: 10px; padding: 6px; }

.modal-actions{ display:flex; gap: 10px; justify-content:flex-end; margin-top: 6px; }

/* =========================
   Calendar top area (見やすさ改善) - #page-calendar 限定
========================= */

#page-calendar .toolbar{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;

  /* 追加：帯として見えるように */
  padding: 10px 12px;
  border-radius: 14px;
}

#page-calendar .toolbar label{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}

#page-calendar .toolbar input[type="date"]{ width: 140px; }
#page-calendar .toolbar .btn{ flex: 0 0 auto; }

#page-calendar #calendarMeta{
  margin-left:auto;
  white-space:nowrap;
  flex: 0 0 auto;
}

/* カレンダー上部の説明＋帯を“パネル色”で固定（#page-calendar 限定） */
#page-calendar .cal-top,
#page-calendar .toolbar,
#page-calendar .calendar-head,
#page-calendar .calendar-lead {
  background: rgba(35, 35, 35, 0.70);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  color: rgba(255,255,255,0.92);
}

#page-calendar p,
#page-calendar .help,
#page-calendar .subtle {
  color: rgba(255,255,255,0.90);
}

/* disabled入力の見た目（←全ページに効かせない！） */
#page-calendar input:disabled,
#page-calendar textarea:disabled,
#page-calendar select:disabled {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.60);
  border-color: rgba(255,255,255,0.10);
  cursor: not-allowed;
  opacity: 1;
}

/* =========================
   Calendar Board (Month/Week) - bands  #page-calendar 限定
========================= */

/* ✅ ここが効く：カレンダー本体を“パネル化”して柄背景から分離 */
#page-calendar #calendarBoard{
  border-radius: 14px;
  background: rgba(35, 35, 35, 0.62);
  border: 1px solid rgba(255,255,255,0.10);
  padding: 12px;
  color: rgba(255,255,255,0.92);
}

/* もしJS側で board 内を .panel で包んでいても二重にならないように透明化 */
#page-calendar #calendarBoard > .panel{
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 以降 .cal-* は全部 #page-calendar #calendarBoard 配下に限定 */
#page-calendar #calendarBoard .cal-board-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
  flex-wrap:wrap;
}

#page-calendar #calendarBoard .cal-board-title{ font-weight:800; font-size:16px; }
#page-calendar #calendarBoard .cal-board-sub{ opacity:.75; font-size:12px; margin-top:2px; }

#page-calendar #calendarBoard .cal-board-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap: wrap;
}

#page-calendar #calendarBoard .cal-mode{
  display:flex;
  gap:6px;
  align-items:center;
  padding: 4px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
}

#page-calendar #calendarBoard .cal-mode .btn{
  padding: 6px 10px;
  border-radius: 999px;
}

#page-calendar #calendarBoard .cal-mode .btn.is-active{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.18);
}

#page-calendar #calendarBoard .cal-dow{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}

#page-calendar #calendarBoard .cal-dow > div{
  text-align: center;
  font-weight: 700;
  opacity: .9;
}

#page-calendar #calendarBoard .cal-week{
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 14px;
  padding: 10px;
  margin-bottom: 10px;

  /* 追加：週ブロックも柄から分離 */
  background: rgba(0,0,0,.10);
}

#page-calendar #calendarBoard .cal-days{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

#page-calendar #calendarBoard .cal-day{
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  padding: 8px;
  min-height: 56px;

  /* 追加：日セルも柄から分離 */
  background: rgba(255,255,255,.04);
}

#page-calendar #calendarBoard .cal-day .cal-daynum{
  font-weight: 700;
  opacity: .9;
}

#page-calendar #calendarBoard .cal-day .cal-daynum .muted{
  opacity: .6;
  font-weight: 600;
  font-size: 12px;
  margin-left: 6px;
}

#page-calendar #calendarBoard .cal-day.is-today{
  outline: 2px solid rgba(99, 102, 241, .60);
  outline-offset: 1px;
}

#page-calendar #calendarBoard .cal-day.is-out{ opacity: .6; }

#page-calendar #calendarBoard .cal-bands{ margin-top: 8px; }

#page-calendar #calendarBoard .cal-lanes{
  display:flex;
  flex-direction: column;
  gap: 4px;
}

#page-calendar #calendarBoard .cal-lane{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  height: 22px;
  align-items: stretch;
}

#page-calendar #calendarBoard .cal-bar{
  height: 20px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .10);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  padding: 2px 8px;
  cursor: pointer;
  color: rgba(255, 255, 255, .92);
  background: rgba(255,255,255,.10);
}

#page-calendar #calendarBoard .cal-bar:hover{ filter: brightness(1.08); }

/* 色（最低限） */
#page-calendar #calendarBoard .cal-bar.ck-personal { background: rgba(16,185,129,.20); border-color: rgba(16,185,129,.25); }
#page-calendar #calendarBoard .cal-bar.ck-job      { background: rgba(59,130,246,.20); border-color: rgba(59,130,246,.25); }

#page-calendar #calendarBoard .cal-bar.ck-draft       { background: rgba(148,163,184,.22); border-color: rgba(148,163,184,.28); }
#page-calendar #calendarBoard .cal-bar.ck-in_progress { background: rgba(59,130,246,.22); border-color: rgba(59,130,246,.28); }
#page-calendar #calendarBoard .cal-bar.ck-done        { background: rgba(34,197,94,.22);  border-color: rgba(34,197,94,.28); }
#page-calendar #calendarBoard .cal-bar.ck-closed      { background: rgba(100,116,139,.22); border-color: rgba(100,116,139,.28); }
#page-calendar #calendarBoard .cal-bar.ck-canceled    { background: rgba(239,68,68,.18);  border-color: rgba(239,68,68,.25); }

#page-calendar #calendarBoard .empty{ padding: 12px 8px; }

/* =========================
   Mobile (Smartphone) layout
========================= */
@media (max-width: 820px) {

  .app{
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:10px;
  }

  .sidebar{
    width:100%;
    min-width:0;
    position:static;
    height:auto;
    border-radius:18px;
  }

  .sidebar .brand{
    position:sticky;
    top:0;
    z-index:5;
    padding:12px 12px;
    border-radius:16px;
    backdrop-filter: blur(6px);
  }

  .authbox{
    margin-top:10px;
    padding:12px;
  }

  .login .field input{
    height:44px;
    font-size:16px;
  }

  .nav{ margin-top:12px; }
  .navgroup{ margin-top:10px; }

  .navhead{
    margin:10px 0 6px;
    font-size:12px;
    opacity:.85;
  }

  .navbtn{
    width:100%;
    justify-content:flex-start;
    padding:12px 12px;
    font-size:15px;
    border-radius:14px;
  }

  .main{
    width:100%;
    min-width:0;
    border-radius:18px;
  }

  .topbar{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  .topbar-right{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
  }

  .hero{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .hero-card,
  .hero-mascot{ width:100%; }

  .cards{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }
  .card{ width:100%; }

  .split{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .list, .detail{
    width:100%;
    min-width:0;
  }
}

/* =========================
   Vendors（業者）
   入力欄が画面サイズに追従しない時の“最後の一手”
   - #page-vendors / #vendorsHost どちらのDOMでも効くよう二重に当てる
   - grid/flex の “伸びない” を潰す（min-width:0 / justify-self:stretch）
========================= */

/* まず “当たっていない” 問題を潰す（IDズレ対策） */
#page-vendors,
#vendorsHost{
  font-size:16px;
}

/* パネル/フォームが親に負けて縮まないように */
#page-vendors .panel,
#vendorsHost .panel,
#page-vendors form,
#vendorsHost form{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
}

/* grid の子が縮めないと 1fr が死ぬので必須 */
#page-vendors * ,
#vendorsHost *{
  min-width:0;
}

/* ✅ “入力そのもの” を強制的に伸ばす（classが付いてなくても効く） */
#page-vendors input:not([type="checkbox"]):not([type="radio"]),
#page-vendors select,
#page-vendors textarea,
#vendorsHost input:not([type="checkbox"]):not([type="radio"]),
#vendorsHost select,
#vendorsHost textarea{
  box-sizing:border-box;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  inline-size:100% !important;
  display:block;
  justify-self:stretch; /* grid対策 */
}

/* ✅ Beelder共通入力の見た目（ベース） */
#page-vendors .input,
#vendorsHost .input{
  font-size:16px;
  line-height:1.4;
  padding:10px 12px;
  min-height:42px;
  border-radius:10px;
}

/* ✅ ベンダー登録フォーム：2列gridを確実に “右端まで” */
#page-vendors .ven-form-grid,
#vendorsHost .ven-form-grid{
  display:grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap:10px 10px;
  align-items:center;
  width:100%;
}

/* ✅ チェックボックス（クリック領域をデカく） */
.chk{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  background:rgba(255,255,255,.70);
  cursor:pointer;
  user-select:none;
}
.chk input[type="checkbox"]{
  width:22px;
  height:22px;
  margin:0;
  cursor:pointer;
}
.chk .chk-label{
  font-weight:800;
  font-size:14px;
}
.chk .chk-sub{
  font-size:12px;
  opacity:.85;
}
/* =========================
   Vendors（業者）画面：入力欄を大きく
   ========================= */
#page-vendors {
  font-size: 16px; /* 画面全体の文字も少し大きく */
}

#page-vendors .input,
#page-vendors input.input,
#page-vendors select.input {
  font-size: 16px;
  line-height: 1.4;
  padding: 10px 12px;     /* ←ここで“厚み”が出ます */
  min-height: 42px;       /* ←入力欄の高さ */
  border-radius: 10px;
}

/* 備考などで長文入力する場合に備えて（今はinputだけでもOK） */
#page-vendors textarea.input {
  min-height: 96px;
  padding: 10px 12px;
  font-size: 16px;
}

/* -----------------------------
   Vendors: 仮登録チェックを大きく
----------------------------- */
#venProvRow{
  display:flex;
  align-items:center;
}

.venProvLabel{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:14px;      /* ← ラベル全体を少し大きく */
  cursor:pointer;
  user-select:none;
}

#venProv{
  transform: scale(1.55);          /* ← チェック欄を大きく */
  transform-origin: left center;
}

#venProvHelp{
  color: var(--muted);
  font-size:14px;       /* ← コメントを大きく */
  line-height:1.25;
}

#authBody[hidden] { display: none !important; }

/* ログイン中は高さを詰めて“折りたたみ感”を出す */
.authbox.collapsed {
  padding-bottom: 10px;
}
.authbox.collapsed .authrow {
  margin-bottom: 0;
}

#btnAuthToggle{
  width: 38px;
  min-width: 38px;
  padding: 0;
  text-align: center;
  font-weight: 700;
}

/* hidden属性は必ず非表示（作者CSSで上書きされても潰す） */
[hidden] { display: none !important; }

/* ログイン枠：状態ピル/▽/ログアウトのサイズ統一 */
#authState,
#btnLogout,
#btnAuthToggle {
  height: 36px;
  min-height: 36px;

  padding: 0 14px;
  line-height: 36px;
  font-size: 14px;
  font-weight: 600;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
  white-space: nowrap;
}

/* 「ログイン中」と「ログアウト」を同じ横幅にもしたい場合 */
#authState,
#btnLogout {
  min-width: 104px;   /* 好みで 96〜120px くらいで調整 */
}

/* ▽ボタンは正方形 */
#btnAuthToggle {
  width: 36px;
  padding: 0;
  line-height: 1;
}

/* =========================================================
   Orders（発注）入力欄を Vendors（業者）と同等サイズにする【置き換え版】
   - #page-orders の中だけに効かせる（他ページへ影響させない）
   - 既存CSSに負けないよう !important で勝ち切る
   ========================================================= */

/* ✅ type無し input も拾う（これが効かない原因になりがち） */
#page-orders #ordersHost input:not([type]),
#page-orders #ordersHost input[type="text"],
#page-orders #ordersHost input[type="search"],
#page-orders #ordersHost input[type="number"],
#page-orders #ordersHost input[type="date"],
#page-orders #ordersHost input[type="email"],
#page-orders #ordersHost input[type="tel"],
#page-orders #ordersHost select,
#page-orders #ordersHost textarea{
  font-size: 15px !important;
  line-height: 1.25 !important;

  min-height: 40px !important;
  padding: 10px 12px !important;

  border-radius: 10px !important;
  box-sizing: border-box !important;

  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* hidden は対象外（崩れ防止） */
#page-orders #ordersHost input[type="hidden"]{
  display: none !important;
}

/* select はブラウザ差が出るので高さを固定寄せ */
#page-orders #ordersHost select{
  height: 40px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* textarea は見やすい最低高さを確保 */
#page-orders #ordersHost textarea{
  min-height: 96px !important;
  height: auto !important;
  resize: vertical !important;
}

/* checkbox は対象外（勝手に大きくしない） */
#page-orders #ordersHost input[type="checkbox"]{
  min-height: auto !important;
  height: auto !important;
  padding: 0 !important;
}

/* =========================================================
   Orders：検索帯だけ「横並び」を復活（フォームは今のまま幅100%）
   ========================================================= */
#page-orders #ordersHost .orders-toolbar input[type="text"],
#page-orders #ordersHost .orders-toolbar input[type="search"],
#page-orders #ordersHost .orders-toolbar input[type="number"],
#page-orders #ordersHost .orders-toolbar input[type="date"],
#page-orders #ordersHost .orders-toolbar select{
  width: auto !important;                 /* ✅ 100% を解除 */
  flex: 1 1 220px !important;             /* ✅ 横に並ぶ */
  min-width: 180px !important;
}

/* “検索/クリア”ボタンは伸ばさない */
#page-orders #ordersHost .orders-toolbar .btn{
  width: auto !important;
  flex: 0 0 auto !important;
}

/* checkbox は崩れやすいので固定 */
#page-orders #ordersHost .orders-toolbar input[type="checkbox"]{
  width: auto !important;
  flex: 0 0 auto !important;
  min-height: auto !important;
  padding: 0 !important;
}

/* 画面が狭い時は縦並びに戻す（スマホ/小窓対応） */
@media (max-width: 900px){
  #page-orders #ordersHost .orders-toolbar input[type="text"],
  #page-orders #ordersHost .orders-toolbar input[type="search"],
  #page-orders #ordersHost .orders-toolbar input[type="number"],
  #page-orders #ordersHost .orders-toolbar input[type="date"],
  #page-orders #ordersHost .orders-toolbar select{
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* =========================================================
   Orders: 検索帯（削除済チェック + 検索/クリア）整列 & 見た目調整
   - #page-orders #ordersHost のみ
   ========================================================= */

#page-orders #ordersHost .ord-search-actions{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  margin-top:10px !important;
  flex-wrap:wrap !important;           /* ✅ 画面が狭いとき崩れない */
}

#page-orders #ordersHost .ord-search-actions .ord-spacer{
  flex:1 !important;
  min-width: 16px !important;
}

/* ✅ 「削除済みも含む」を“見た目として”大きく・押しやすく */
#page-orders #ordersHost .ord-chk{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;

  font-size:15px !important;           /* ← ここで文字を大きく */
  font-weight:700 !important;
  line-height:1 !important;

  color: var(--muted) !important;
  white-space:nowrap !important;

  padding:6px 10px !important;         /* ✅ クリックしやすい */
  border:1px solid rgba(0,0,0,.12) !important;
  border-radius:12px !important;
  cursor:pointer !important;
  user-select:none !important;
}

/* spanにも明示（他CSSに負けない） */
#page-orders #ordersHost .ord-chk span{
  font-size:15px !important;
}

/* ✅ チェックボックスも見た目を大きく */
#page-orders #ordersHost .ord-chk input[type="checkbox"]{
  width:20px !important;
  height:20px !important;
  transform: translateY(1px) scale(1.25) !important; /* ← 見た目拡大 */
  transform-origin:left center !important;

  min-height:auto !important;
  padding:0 !important;
  margin:0 !important;
}

/* ✅ 検索/クリアボタンの高さも揃える */
#page-orders #ordersHost .ord-search-actions .btn{
  height:36px !important;
  padding:0 14px !important;
  border-radius:10px !important;
  font-size:13px !important;
}

:root{
  --ok: #22c55e;
  --muted: #9ca3af;
}

/* ✅ #ordersHost が無い/別DOMでも効くように保険（新規発注フォーム崩れ対策） */
#page-orders .drawer input:not([type]),
#page-orders .drawer input[type="text"],
#page-orders .drawer input[type="search"],
#page-orders .drawer input[type="number"],
#page-orders .drawer input[type="date"],
#page-orders .drawer input[type="email"],
#page-orders .drawer input[type="tel"],
#page-orders .drawer select,
#page-orders .drawer textarea,

#page-orders .modal input:not([type]),
#page-orders .modal input[type="text"],
#page-orders .modal input[type="search"],
#page-orders .modal input[type="number"],
#page-orders .modal input[type="date"],
#page-orders .modal input[type="email"],
#page-orders .modal input[type="tel"],
#page-orders .modal select,
#page-orders .modal textarea,

/* 最後の保険：新規発注フォームが単独パネルで出る場合に拾う */
#page-orders .order-form input:not([type]),
#page-orders .order-form input[type="text"],
#page-orders .order-form input[type="search"],
#page-orders .order-form input[type="number"],
#page-orders .order-form input[type="date"],
#page-orders .order-form input[type="email"],
#page-orders .order-form input[type="tel"],
#page-orders .order-form select,
#page-orders .order-form textarea{
  font-size: 15px !important;
  line-height: 1.25 !important;
  min-height: 40px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* =========================================
   新規案件フォーム：入力欄サイズを他と統一
   ========================================= */
#jobForm input,
#jobForm select,
#jobForm textarea,
#jobDetail input,
#jobDetail select,
#jobDetail textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 36px;          /* 他のフォームに合わせて調整 */
  padding: 8px 10px !important;
  font-size: 14px;
}

/* 日付入力が細く見える場合の保険 */
#jobForm input[type="date"],
#jobDetail input[type="date"] {
  min-height: 36px;
}

/* もしラベルと入力が横並びで狭い場合、入力側を優先して伸ばす */
#jobForm .row,
#jobDetail .row {
  gap: 10px;
}

/* =========================
   Calendar: typography & list
   ========================= */
#page-calendar .cal-wrap,
#page-calendar .cal-toolbar,
#page-calendar .cal-label {
  font-size: 14px;
}

#page-calendar .cal-toolbar input[type="date"],
#page-calendar .cal-toolbar input[type="text"],
#page-calendar .cal-toolbar button {
  font-size: 14px;
  padding: 6px 10px;
  height: 34px;
}

#page-calendar .cal-daynum {
  font-size: 14px;
}

#page-calendar .cal-bar {
  font-size: 12px;
  padding: 2px 6px;
  min-height: 20px;
}

#page-calendar .cal-list {
  margin-top: 10px;
}

#page-calendar .cal-list-title {
  font-weight: 700;
  margin: 6px 0 8px;
}

#page-calendar .cal-list-row {
  display: flex;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.10);
  cursor: pointer;
  margin-bottom: 6px;
}

#page-calendar .cal-list-row:hover {
  background: rgba(0,0,0,.16);
}

#page-calendar .cal-list-range {
  min-width: 150px;
  font-variant-numeric: tabular-nums;
  opacity: .9;
}

#page-calendar .cal-list-head {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
}

#page-calendar .cal-list-tag {
  font-size: 12px;
  opacity: .75;
}

#page-calendar .cal-list-note {
  font-size: 13px;
  opacity: .85;
  margin-top: 2px;
}

/* カレンダーセルの範囲ハイライト */
#page-calendar .cal-day.is-range {
  outline: 2px solid rgba(80, 200, 120, .35);
}
#page-calendar .cal-day.is-range-start,
#page-calendar .cal-day.is-range-end {
  outline-color: rgba(80, 200, 120, .85);
}

@import url("/ui/ui_patch_forms.css?v=20260111");

/* === Modal/form controls unify (Vendor baseline) ===
   - 業者(Vendor) と同じ見た目になるように、モーダル(案件/カレンダー)含む入力の基準を統一
   - 既存CSSに必ず勝つよう !important で上書き
*/
:root{
  --ctl-font: 16px;
  --ctl-h: 52px;
  --ctl-py: 12px;
  --ctl-px: 14px;
}

/* 「業者」基準の入力サイズを、モーダルにも適用 */
.input,
.modal-panel input,
.modal-panel select,
.modal-panel textarea{
  font-size: var(--ctl-font) !important;
  line-height: 1.2 !important;
  min-height: var(--ctl-h) !important;
  height: var(--ctl-h) !important;
  padding: var(--ctl-py) var(--ctl-px) !important;
  box-sizing: border-box !important;
}

/* textarea は高さ固定を解除して、読みやすい高さを確保 */
textarea.input,
.modal-panel textarea{
  height: auto !important;
  min-height: calc(var(--ctl-h) * 2) !important;
  padding-top: var(--ctl-py) !important;
  padding-bottom: var(--ctl-py) !important;
}

/* ラベル文字も少し大きく */
.modal-panel label,
.modal-panel .label,
.modal-panel .m-label{
  font-size: 15px !important;
}

/* ===== 完了ページ：cashflow（支払い/入金）チェックを押しやすく ===== */
#page-complete .cf-wrap{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:10px;
}

#page-complete .cf-item{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  background:rgba(255,255,255,.75);
  cursor:pointer;         /* ラベルごと押せる感 */
  user-select:none;
}

#page-complete .cf-item:hover{
  background:rgba(255,255,255,.95);
}

#page-complete .cf-item input[type="checkbox"]{
  width:22px;
  height:22px;
  accent-color: #2e7d32;  /* 見やすく（好みでOK） */
  cursor:pointer;
}

#page-complete .cf-item .cf-label{
  font-size:16px;
  font-weight:700;
  line-height:1.2;
}

#page-complete .cf-badge-closed{
  display:inline-block;
  margin-left:10px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.15);
  background:rgba(46,125,50,.12);
  font-weight:800;
}

/* [CLOSED-GRAY] クローズ案件を視覚的にグレー化 */
.is-closed {
  opacity: 0.55;
  filter: grayscale(1);
}

.closed-badge{
  display:inline-flex;
  align-items:center;
  height:18px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.20);
  background:rgba(0,0,0,.18);
  color:rgba(255,255,255,.78);
  font-size:11px;
  font-weight:900;
  letter-spacing:.04em;
  line-height:1;
  user-select:none;
}

/* =========================
   Beelder UI Common
   追記でOK（ui.css末尾推奨）
   ========================= */

:root{
  --ui-font: system-ui, -apple-system, "Segoe UI", "Meiryo", sans-serif;
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;

  --h-ctl: 40px;   /* input / btn */
  --h-mini: 32px;  /* row action */
  --r: 12px;
  --r-sm: 10px;

  --bd: 1px solid rgba(255,255,255,.10);
  --bd2: 1px solid rgba(0,0,0,.18);
  --focus: 0 0 0 3px rgba(0,120,255,.22);
}

/* ---- Headings ---- */
.ui-title{ font-family:var(--ui-font); font-size:var(--fs-18); font-weight:800; line-height:1.2; }
.ui-sub{ font-family:var(--ui-font); font-size:var(--fs-12); opacity:.78; }

/* ---- Panel / Card ---- */
/* ---- Panel / Card ---- */
.panel{
  border-radius: var(--r);
  border: var(--bd);
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  padding: 14px;

  /* ★追加：完了の枠色（frame-bg）に統一 */
  background: var(--frame-bg);
  backdrop-filter: blur(8px);
}
.card{
  border-radius: var(--r);
  border: var(--bd);
  padding: 14px;
}

/* ---- Toolbar (filters + actions) ---- */
.toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.toolbar-left, .toolbar-right{
  display:flex; align-items:center; gap: 10px; flex-wrap: wrap;
}

/* ---- Buttons ---- */
.btn{
  font-family:var(--ui-font);
  font-size:var(--fs-14);
  min-height: var(--h-ctl);
  padding: 0 14px;
  border-radius: var(--r-sm);
  border: var(--bd2);
  cursor:pointer;
  user-select:none;
}
.btn--mini{ min-height: var(--h-mini); padding: 0 10px; font-size: var(--fs-12); }
.btn:focus{ outline:none; box-shadow: var(--focus); }
.btn--primary{ border: none; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.btn--ghost{ background: transparent; }
.btn--danger{ border: 1px solid rgba(255,60,60,.35); }

/* ---- Inputs ---- */
.input, .select, .textarea{
  font-family:var(--ui-font);
  font-size:var(--fs-14);
  border-radius: var(--r-sm);
  border: var(--bd2);
  box-sizing: border-box;
}
.input, .select{
  min-height: var(--h-ctl);
  padding: 0 12px;
}
.textarea{
  padding: 10px 12px;
  min-height: 160px;
  resize: vertical;
}
.input:focus, .select:focus, .textarea:focus{
  outline:none;
  box-shadow: var(--focus);
  border-color: rgba(0,120,255,.35);
}

/* ---- Badge ---- */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--ui-font);
  font-size:var(--fs-12);
  font-weight:800;
  line-height:1;
  padding: 6px 10px;
  border-radius: 999px;
  border: var(--bd);
  white-space: nowrap;
}
.badge--closed{ opacity:.92; }
.badge--issued{ opacity:.92; }
.badge--done{ opacity:.92; }
.badge--canceled{ opacity:.92; }

/* ---- Checkbox (big hit area) ---- */
.chk{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  border: var(--bd2);
  cursor:pointer;
  user-select:none;
}
.chk input[type="checkbox"]{
  width: 18px; height: 18px; margin: 0;
  transform: scale(1.15);
}
.chk:focus-within{
  outline:none;
  box-shadow: var(--focus);
  border-color: rgba(0,120,255,.35);
}

/* ---- Form rows ---- */
.form{
  display:flex; flex-direction:column; gap: 10px;
}
.form-row{
  display:grid;
  grid-template-columns: 160px 1fr;
  gap: 10px;
  align-items:center;
}
.form-label{ font-size: var(--fs-12); opacity:.85; font-weight:700; }
.form-help{ font-size: var(--fs-12); opacity:.70; }

/* ---- List row (左タイトル＋サブ／右操作) ---- */
.list{ display:flex; flex-direction:column; gap: 10px; }
.list-item{
  border-radius: var(--r);
  border: var(--bd);
  padding: 10px 12px;
  display:flex; justify-content:space-between; align-items:flex-start; gap: 12px;
}
.list-main{ min-width: 0; }
.list-title{ font-weight: 800; font-size: var(--fs-14); }
.list-sub{ font-size: var(--fs-12); opacity:.78; margin-top: 4px; }
.list-actions{ display:flex; gap: 8px; flex-wrap: wrap; }

/* ===== Complete: big checkbox pill ===== */
.chk{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;                 /* ← ここが効く（押しやすさ） */
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.22);
  background: rgba(255,255,255,.10);
  cursor: pointer;
  user-select: none;
}

.chk:hover{
  background: rgba(255,255,255,.14);
}

.chk input[type="checkbox"]{
  width: 20px;
  height: 20px;
  margin: 0;
  transform: scale(1.2);
}

.chk__text{
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.1;
}

.chk__title{
  font-weight: 800;
  font-size: 14px;
}

.chk__meta{
  font-size: 12px;
  opacity: .75;
}

/* ON状態が一目で分かるように（色は既存テーマに合わせて控えめ） */
.chk--on{
  border-color: rgba(0,0,0,.28);
  background: rgba(255,255,255,.16);
}

.badge.badge--closed{
  /* もし badge を使う場合の保険（既存があれば不要） */
  opacity: .92;
}

/* =========================
   Settings page (見やすさ調整) - #page-settings 限定
========================= */

.modal-panel.wide{
  width: min(920px, calc(100% - 24px));
}

#page-settings .panel-title{
  font-size: 20px;
  font-weight: 800;
}

#page-settings .tiny{
  font-size: 13px;
}

#page-settings input,
#page-settings select,
#page-settings textarea{
  font-size: 16px;
  line-height: 1.4;
}

#page-settings textarea{
  min-height: 140px;
}

#page-settings textarea.settings-textarea{
  background: rgba(0,0,0,.50) !important;
}

/* 設定ページの入力欄が class="input" でない場合にも効かせる */
#page-settings input:not([type="checkbox"]),
#page-settings select,
#page-settings textarea{
  width: 100%;
  max-width: none;
  min-width: 0;
}
/* =========================
   #page-settings : order.json preview layout
   - 左: JSON編集
   - 右: PDFサムネイル（iframe）
========================= */
#page-settings .settings-split{
  display:flex;
  gap:12px;
  align-items:stretch;
}

#page-settings .settings-left{
  flex: 1 1 auto;
  min-width: 420px;
}

#page-settings .settings-right{
  flex: 0 0 380px;
  width: 380px;
  min-width: 280px;
}

#page-settings .settings-preview{
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  overflow:hidden;
  background: rgba(255,255,255,.06);
}

#page-settings .settings-preview-head{
  display:flex;
  gap:8px;
  align-items:center;
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

#page-settings .settings-preview-head .label{
  font-weight: 900;
}

#page-settings .settings-preview-frame{
  width: 100%;
  height: 520px;
  border: 0;
  display:block;
  background: rgba(255,255,255,.04);
}

#page-settings .settings-preview-hint{
  padding: 10px;
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 980px){
  #page-settings .settings-split{
    flex-direction: column;
  }
  #page-settings .settings-left{
    min-width: 0;
  }
  #page-settings .settings-right{
    width: 100%;
    flex: 1 1 auto;
  }
  #page-settings .settings-preview-frame{
    height: 420px;
  }
}

/* 設定ページの文字が小さい対策（微増） */
#page-settings .panel-title{ font-size: 22px; }
#page-settings .tiny{ font-size: 14px; }
/* =========================================================
   HOTFIX: 2026-01-30
   - 背景/マスコットがクリックを邪魔しない
   - 設定ページの入力枠を大きく（小さすぎ問題の対策）
   ========================================================= */
.bee-badge,
.bee-badge *,
.honey-bg,
.honey-bg * ,
.bg-bee,
#bgBee,
#appBg{
  pointer-events: none;
}

/* SETTINGS (settings page) */
#page-settings .settings-panel{ max-width: 1200px; }
#page-settings .settings-wrap{ display:flex; gap:16px; align-items:stretch; }
#page-settings .settings-left{ flex: 1 1 720px; min-width: 560px; }
#page-settings .settings-right{ flex: 0 0 380px; }

#page-settings .settings-block{ margin-top: 14px; padding: 14px; border-radius: 16px; background: rgba(0,0,0,.12); }
#page-settings .settings-h{ font-weight: 800; font-size: 16px; }
#page-settings .settings-actions{ display:flex; gap:8px; flex-wrap:wrap; }

#page-settings .settings-editor{
  width:100%;
  min-height: 560px;
  resize: vertical;
  font-size: 14px;
  line-height: 1.5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  padding: 12px;
  border-radius: 12px;
}

#page-settings .settings-home-input{
  height: 44px;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 12px;
}
#page-settings .settings-home-textarea{
  min-height: 160px;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  resize: vertical;
}

#page-settings .settings-preview-frame{
  width:100%;
  height: 600px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px;
  background: rgba(255,255,255,.06);
}

@media (max-width: 1100px){
  #page-settings .settings-wrap{ flex-direction: column; }
  #page-settings .settings-right{ flex: 1 1 auto; }
  #page-settings .settings-left{ min-width: 0; }
  #page-settings .settings-preview-frame{ height: 420px; }
}

/* =========================================================
   Settings Page (scoped) - 既存UIへ影響させない
   ========================================================= */

#page-settings .settings-status{
  margin: 10px 0 14px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 14px;
  opacity: .95;
}
#page-settings .settings-status.info{ border: 1px solid rgba(255,255,255,.12); }
#page-settings .settings-status.ok  { border: 1px solid rgba(80,255,120,.30); }
#page-settings .settings-status.err { border: 1px solid rgba(255,80,80,.35); }

#page-settings .settings-grid{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 12px;
  align-items: start;
}
@media (max-width: 1100px){
  #page-settings .settings-grid{ grid-template-columns: 1fr; }
}

#page-settings .settings-card{
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.15);
  box-shadow: 0 6px 18px rgba(0,0,0,.20);
  margin-bottom: 12px;
}
#page-settings .settings-card-title{
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
  opacity: .95;
}

#page-settings .settings-toolbar{
  margin: 8px 0 10px;
}

#page-settings .settings-textarea{
  width: 100%;
  min-height: 420px;
  resize: vertical;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  color: inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.45;
  outline: none;
}

#page-settings .settings-form input[type="text"],
#page-settings .settings-form input[type="password"],
#page-settings .settings-form input[type="number"],
#page-settings .settings-form textarea,
#page-settings .settings-form select{
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  color: inherit;
  outline: none;
  font-size: 14px;
}


#page-settings .settings-field{ margin: 10px 0; }
#page-settings .settings-label{
  font-size: 12px;
  opacity: .85;
  margin: 0 0 6px 2px;
}

#page-settings .settings-hint{
  margin-top: 8px;
  font-size: 12px;
  opacity: .75;
}

#page-settings .settings-preview-status{
  font-size: 12px;
  opacity: .75;
  margin: 2px 0 8px 2px;
}

/* PDF template preview */
#page-settings .settings-preview-box{
  width: 100%;

  /* ★枠いっぱい：画面の高さに追従して大きく */
  height: clamp(560px, 78vh, 980px);

  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);

  /* ★中身を全面フィットさせるため */
  position: relative;
}

/* PNG / PDF iframe を “枠いっぱい” */
#page-settings #orderPreviewImg,
#page-settings #orderPreviewFrame{
  display: none;          /* 表示切替はJSに任せる */
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  border: 0;
}

/* PNGは切れない最大化 */
#page-settings #orderPreviewImg{
  object-fit: contain;
  background: #fff;
}

/* （任意）共通 toolbar の最低限の安定化：使っているページだけに効く設計 */
.toolbar{
  display:flex;
  gap: 8px;
  align-items:center;
  flex-wrap: wrap;
}

/* ===== Settings readability boost ===== */
#page-settings .settings-card{
  background: rgba(0,0,0,.28) !important;  /* ←柄に負けない */
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.28) !important;
  backdrop-filter: blur(2px);
}

#page-settings .settings-textarea{
  background: rgba(0,0,0,.20) !important;  /* ←ここが主犯 */
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.20);
}

#page-settings .settings-grid + .settings-grid{
  margin-top: 14px;
}

#page-settings .settings-grid + .settings-grid{
  margin-top: 10px; /* 14px→10px くらいが見やすい */
}

/* ===== Settings：発注書テンプレの上枠を見やすく ===== */
#page-settings .settings-left .settings-card{
  border: 1px solid rgba(255,255,255,.14) !important;
  border-top: 2px solid rgba(255,255,255,.28) !important; /* ← 上側だけ強調 */
  box-shadow:
    0 12px 26px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
  overflow: hidden; /* タイトル帯の角を綺麗に */
}

/* タイトル帯も“帯”にして境界を作る（上枠がさらに分かりやすくなる） */
#page-settings .settings-left .settings-card.settings-card-title{
  padding: 12px 14px;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.35),
    rgba(0,0,0,.12)
  ) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

/* Settings：OKステータス帯を非表示 */
#page-settings #settingsStatus{
  display: none !important;
}




/* ============================
   共通：ボタン列（toolbar）統一
   ============================ */
.toolbar{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.toolbar.toolbar-right{ justify-content: flex-end; }
.toolbar.toolbar-left{  justify-content: flex-start; }
.toolbar.toolbar-between{ justify-content: space-between; }

/* フィルタ行＋ボタン行を「左=入力群 / 右=操作ボタン」で揃える */
.page-toolbar{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
}

.page-toolbar .filters{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.page-toolbar .actions{
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* =========================
   Settings: header/border visibility + toolbar alignment
   ========================= */
#page-settings .settings-card{
  border: 1px solid rgba(255,255,255,.10);
  overflow: hidden; /* headの角丸を効かせる */
}

#page-settings .settings-card-head{
  padding: 12px 12px 10px;
  background: rgba(0,0,0,.16);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

#page-settings .settings-card-title{
  margin: 0 0 10px 0;
  font-weight: 700;
}

#page-settings .settings-textarea{
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
}

.toolbar{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.toolbar-actions{
  justify-content: flex-end; /* ボタンは右寄せ */
}

#page-settings .settings-toolbar{
  margin: 0;
  padding: 0;
}

/* === unified page toolbar (v1) ============================ */
.page-toolbar{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  width:100%;
}

.page-toolbar-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.page-toolbar-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-left:auto;           /* 右寄せの要 */
  justify-content:flex-end;
}

/* 入力とボタンの高さを揃える（ページ横断で“見た目の統一”） */
.page-toolbar .btn{
  min-height:42px;
}
.page-toolbar .input,
.page-toolbar input,
.page-toolbar select{
  min-height:42px;
}

/* Complete は refresh を最右に寄せたい（order で視覚順を統一） */
#btnCompleteRefresh{ order: 99; margin-left:auto; }
#btnCompleteSearch{ order: 2; }

/* Calendar: 読み込みを右側へ寄せたい（親がflexなら効く） */
#btnCalLoad{ margin-left:auto; }

/* =========================================================
   FINAL-SELECT-CLIP-FIX v2 (2026-02-08)
   - “見切れ再発” を止める最終上書き
   - 既存の width:100% 等に負けないよう、width を明示
   ========================================================= */

:where(#page-vendors, #vendors, [data-page="vendors"], body.page-vendors,
       #page-orders,  #orders,  [data-page="orders"],  body.page-orders) select{
  box-sizing: border-box !important;
  font: inherit !important;

  /* 縦欠け：高さを少し増やし、上paddingで確実に文字を下げる */
  height: 46px !important;
  min-height: 46px !important;
  line-height: normal !important;
  padding: 12px 56px 8px 14px !important;   /* ←上12/下8で“上欠け”を止める */
  padding-right: 56px !important;           /* ▼分 */

  /* “どこかのCSSで全幅になる” を強制的に止める */
  width: auto !important;
  max-width: 100% !important;

  /* flex内で縮んで切れるのを防ぐ（成長はさせない） */
  flex: 0 0 auto !important;
}

/* 業者：表示件数（50）が欠けない＆全幅化しないよう “幅を固定” */
:where(#page-vendors, #vendors, [data-page="vendors"], body.page-vendors) select{
  width: 9em !important;
  min-width: 9em !important;
}

/* 発注：ステータス（(全ステータス)）は “幅を固定” して右切れを止める */
:where(#page-orders, #orders, [data-page="orders"], body.page-orders) select{
  width: 16em !important;
  min-width: 16em !important;
  flex: 0 0 16em !important;
}



/* =========================================================
   VENDORS-UNIFY (2026-02-08)
   - 新規業者モーダルを“右側パネル風（drawer）”にする
   - ベースは案件ページと同じ見た目（panel/toolbar）を使う前提
   使い方:
     1) モーダルの外側 .modal に "modal-right" を付与する
        例: modal.classList.add("modal-right");
     2) モーダルが #page-vendors 配下に出る/もしくは body 配下でもOK
        （下のCSSは両方効くようにしてある）
   ========================================================= */

@keyframes _beelderSlideInRight{
  from{ transform: translateX(24px); opacity: 0; }
  to  { transform: translateX(0);   opacity: 1; }
}

/* “右側ドロワー”レイアウト */
:where(#page-vendors, #vendors, [data-page="vendors"], body.page-vendors) .modal.modal-right{
  align-items: stretch;
  justify-content: flex-end;
  padding: 0; /* 端まで使う */
}

/* モーダル本体を右側のパネルに */
:where(#page-vendors, #vendors, [data-page="vendors"], body.page-vendors) .modal.modal-right .modal-panel{
  width: min(560px, calc(100% - 24px));
  height: calc(100vh - 24px);
  max-height: calc(100vh - 24px);
  margin: 12px;
  border-radius: 22px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,204,51,.14);
  box-shadow: 0 18px 50px rgba(0,0,0,.60);
  backdrop-filter: blur(10px);
  overflow: auto;
  animation: _beelderSlideInRight .18s ease-out;
}

/* ヘッダはstickyで上に固定（案件のpanel headと同系） */
:where(#page-vendors, #vendors, [data-page="vendors"], body.page-vendors) .modal.modal-right .modal-head{
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(0,0,0,.18);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}

/* フォームの詰まりを防ぐ（左の古い“縦長フォーム”の名残対策） */
:where(#page-vendors, #vendors, [data-page="vendors"], body.page-vendors) .modal.modal-right .form-grid{
  grid-template-columns: 1fr;
}

/* ---------------------------------------------------------
   Vendors page toolbar: 案件と同じ“横並び”を維持するため
   既存の「#page-vendors は input/select を width:100%」指定を
   toolbar内だけ打ち消す（フォーム/モーダルは従来通りフル幅OK）
   --------------------------------------------------------- */
:where(#page-vendors, #vendors, [data-page="vendors"], body.page-vendors) .toolbar input[type="text"],
:where(#page-vendors, #vendors, [data-page="vendors"], body.page-vendors) .toolbar input[type="search"]{
  width: 320px !important;
  max-width: 520px !important;
}
:where(#page-vendors, #vendors, [data-page="vendors"], body.page-vendors) .toolbar select{
  width: auto !important;
  max-width: none !important;
}

/* --- robustness: 既存が left 固定でも右に寄せる ----------------- */
:where(#page-vendors, #vendors, [data-page="vendors"], body.page-vendors) .modal.modal-right .modal-panel{
  position: fixed !important;
  top: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
  left: auto !important;
  height: auto !important;
  max-height: none !important;
}


/* =========================
   approvals (admin)
   ========================= */
.btn.danger{
  border-color: rgba(255, 80, 80, 0.55);
  color: rgba(255, 220, 220, 0.95);
}
.btn.danger:hover{
  background: rgba(255, 80, 80, 0.15);
}

.approvals-toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  margin: 10px 0 12px;
}
.approvals-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.approvals-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content:space-between;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  background: rgba(0,0,0,0.12);
}
.approvals-main{
  min-width: 220px;
}
.approvals-name{
  font-weight: 700;
  margin-bottom: 4px;
}
.approvals-meta{
  font-size: 12px;
  opacity: 0.8;
}
.approvals-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.approvals-actions .input{
  min-width: 220px;
}

.approvals-section{
  display:block;
}

.approvals-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin: 6px 0 10px;
}

.approvals-section-title{
  font-weight: 800;
  letter-spacing: .02em;
}

.approvals-divider{
  height: 1px;
  background: rgba(255,255,255,0.10);
  margin: 12px 0;
}

.approved-actions{
  gap: 10px;
}

.role-buttons{
  display:flex;
  gap:6px;
  align-items:center;
}

.role-btn{
  width: 38px;
  height: 38px;
  padding: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 18px;
}

.role-btn.is-selected{
  border-color: rgba(255,200,80,0.55);
  background: rgba(255,200,80,0.14);
}

.badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  margin-left: 6px;
}

.badge-off{
  border: 1px solid rgba(255,80,80,0.45);
  color: rgba(255,120,120,0.95);
  background: rgba(255,80,80,0.10);
}

.approved-item.inactive{
  opacity: 0.85;
}

.approved-item.inactive .approvals-name{
  color: rgba(255,180,180,0.95);
}

@media (max-width: 880px){
  .approvals-actions .input{
    min-width: 160px;
  }
}


/* =========================================================
   ACCOUNT-MANAGER (layout)
   - アカウント管理の別ウィンドを“広め”に使う
   - settings.js の #page-settings 専用CSSに依存しないよう、ここで完結
   ========================================================= */

body.page-account-manager .app{
  max-width: 1220px;
  margin: 0 auto;
}

body.page-account-manager .panel{
  width: 100%;
}

/* 2カラム（左右） */
body.page-account-manager .settings-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* モバイル/狭幅は縦積み */
@media (max-width: 980px){
  body.page-account-manager .settings-grid{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   [PATCH 2026-02-15] Orders（発注）新規発注ドロワー崩れ対策
   - 新規発注UIが .field を使っていない/独自DOMでも最低限“Beelder入力”に揃える
   - 影響範囲は #page-orders 内に限定
   ========================================================= */

#page-orders :is(
  .order-drawer,.orders-drawer,.drawer-left,.panel-left,.side-form,.subwin,
  #orderDrawer,#ordersDrawer,#orderEditor,#ordersEditor,#orderForm,#ordersForm,#newOrderForm,#newOrderPanel,#ordersNewPanel
) input:not([type]),
#page-orders :is(
  .order-drawer,.orders-drawer,.drawer-left,.panel-left,.side-form,.subwin,
  #orderDrawer,#ordersDrawer,#orderEditor,#ordersEditor,#orderForm,#ordersForm,#newOrderForm,#newOrderPanel,#ordersNewPanel
) input[type="text"],
#page-orders :is(
  .order-drawer,.orders-drawer,.drawer-left,.panel-left,.side-form,.subwin,
  #orderDrawer,#ordersDrawer,#orderEditor,#ordersEditor,#orderForm,#ordersForm,#newOrderForm,#newOrderPanel,#ordersNewPanel
) input[type="search"],
#page-orders :is(
  .order-drawer,.orders-drawer,.drawer-left,.panel-left,.side-form,.subwin,
  #orderDrawer,#ordersDrawer,#orderEditor,#ordersEditor,#orderForm,#ordersForm,#newOrderForm,#newOrderPanel,#ordersNewPanel
) input[type="number"],
#page-orders :is(
  .order-drawer,.orders-drawer,.drawer-left,.panel-left,.side-form,.subwin,
  #orderDrawer,#ordersDrawer,#orderEditor,#ordersEditor,#orderForm,#ordersForm,#newOrderForm,#newOrderPanel,#ordersNewPanel
) input[type="date"],
#page-orders :is(
  .order-drawer,.orders-drawer,.drawer-left,.panel-left,.side-form,.subwin,
  #orderDrawer,#ordersDrawer,#orderEditor,#ordersEditor,#orderForm,#ordersForm,#newOrderForm,#newOrderPanel,#ordersNewPanel
) select,
#page-orders :is(
  .order-drawer,.orders-drawer,.drawer-left,.panel-left,.side-form,.subwin,
  #orderDrawer,#ordersDrawer,#orderEditor,#ordersEditor,#orderForm,#ordersForm,#newOrderForm,#newOrderPanel,#ordersNewPanel
) textarea{
  width:100%;
  box-sizing:border-box;
  border:1px solid var(--line);
  background: rgba(0,0,0,.26);
  color: var(--text);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 15px;
  outline:none;
}

#page-orders :is(
  .order-drawer,.orders-drawer,.drawer-left,.panel-left,.side-form,.subwin,
  #orderDrawer,#ordersDrawer,#orderEditor,#ordersEditor,#orderForm,#ordersForm,#newOrderForm,#newOrderPanel,#ordersNewPanel
) textarea{
  min-height: 96px;
  resize: vertical;
}

#page-orders :is(
  .order-drawer,.orders-drawer,.drawer-left,.panel-left,.side-form,.subwin,
  #orderDrawer,#ordersDrawer,#orderEditor,#ordersEditor,#orderForm,#ordersForm,#newOrderForm,#newOrderPanel,#ordersNewPanel
) input:focus,
#page-orders :is(
  .order-drawer,.orders-drawer,.drawer-left,.panel-left,.side-form,.subwin,
  #orderDrawer,#ordersDrawer,#orderEditor,#ordersEditor,#orderForm,#ordersForm,#newOrderForm,#newOrderPanel,#ordersNewPanel
) select:focus,
#page-orders :is(
  .order-drawer,.orders-drawer,.drawer-left,.panel-left,.side-form,.subwin,
  #orderDrawer,#ordersDrawer,#orderEditor,#ordersEditor,#orderForm,#ordersForm,#newOrderForm,#newOrderPanel,#ordersNewPanel
) textarea:focus{
  border-color: rgba(255,204,51,.35);
  box-shadow: 0 0 0 3px rgba(255,204,51,.10);
}

/* =========================================================
   [PATCH 2026-02-15] Complete（完了）リスト：Closeスタンプ（赤文字）
   - JS側で <span class="close-stamp">Close</span> を差し込む前提
   - 互換：.stamp-close / .closed-stamp / .closed-badge も同じ見た目
   ========================================================= */

#page-complete .complete-item,
#page-complete .list-item,
#page-complete .row-item,
#page-complete .card{
  position: relative;
}

#page-complete :is(.close-stamp,.stamp-close,.closed-stamp){
  position:absolute;
  top:10px;
  right:10px;
  z-index:2;
  padding:6px 10px;
  border-radius: 10px;
  border: 2px solid rgba(255,107,107,.75);
  background: rgba(0,0,0,.30);
  color: var(--danger);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: rotate(-10deg);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  pointer-events:none;
}

#page-complete .closed-badge{
  border-color: rgba(255,107,107,.35);
  background: rgba(255,107,107,.12);
  color: rgba(255,235,235,.92);
  font-weight: 900;
}

/* 完了：CLOSE ピルを赤に（前の形状は維持） */
#page-complete #completeList .closed-badge--close{
  border-color: rgba(255,90,90,.55) !important;
  background: rgba(255,90,90,.14) !important;
  color: rgba(255,90,90,1) !important;
}

/* close-stamp を使ってもピル形状が崩れないよう保険（既存デザイン優先） */
#page-complete #completeList .close-stamp{
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .04em;
}

/* ===== modalHost: 画面全体に固定（発注 新規登録が左で潰れる対策） ===== */
#modalHost{ position: fixed; inset: 0; z-index: 9999; }

/* overlay（暗幕＋配置の土台） */
#modalHost .modal-overlay{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-start;           /* 既存モーダルは上寄せのまま */
  justify-content: center;
  padding: 14px;
  background: rgba(0,0,0,.55);
}

/* ★使い方（howto）だけ中央寄せ（idでもclassでも効くよう二重で当てる） */
#modalHost #howtoOverlay.modal-overlay,
#modalHost .modal-overlay.howto-overlay{
  align-items: center;
}

/* モーダル共通（既存） */
#modalHost .modal{
  width: min(820px, calc(100vw - 28px));
  margin-top: 64px;                 /* 既存は上に余白 */
  max-height: calc(100vh - 96px);
  overflow: auto;
}

/* ★使い方モーダル専用（中央表示＆見た目統一） */
#modalHost .modal.modal-howto{
  width: min(860px, calc(100vw - 36px));   /* 少し広めで読みやすく */
  margin-top: 0 !important;                /* ★上寄せ要因を解除 */
  max-height: min(86vh, calc(100vh - 36px));
  overflow: auto;

  border-radius: var(--radius2);
  background: rgba(20,24,28,.96);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}

#modalHost .modal.modal-howto .modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

#modalHost .modal.modal-howto .modal-title{
  font-size:18px;
  font-weight:900;
}

#modalHost .modal.modal-howto .modal-body{
  padding:18px;
  line-height:1.75;
}

/* =========================================
   FORCE: Orders toolbar inputs (match dark theme)
   ========================================= */
#page-orders #ordersRoot .page-toolbar input.input#q,
#page-orders #ordersRoot .page-toolbar select.input#status{
  background: rgba(0,0,0,.18) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.92) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

#page-orders #ordersRoot .page-toolbar input.input#q::placeholder{
  color: rgba(255,255,255,.48) !important;
}

#page-orders #ordersRoot .page-toolbar select.input#status option{
  background: rgb(20,24,28) !important;
  color: rgba(255,255,255,.92) !important;
}

/* HOME：カード段の高さを揃える（カード高さ統一＋foot下揃え） */
#page-home .cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;                 /* ★全体 .cards と統一 */
  grid-auto-rows: 1fr;
  align-items: stretch;
}

#page-home .cards .card{
  height: auto !important;
  min-height: 140px;
  display: flex;
  flex-direction: column;
}

#page-home .cards .card .card-desc{
  flex: 1 1 auto;
}

#page-home .cards .card .card-foot{
  margin-top: auto;          /* ★必ず下へ */
  padding-top: 10px;         /* ★footが詰まって見えるのを防ぐ */
}

/* ★foot内の導線（カレンダーへ等）を幅100%で統一 */
#page-home .cards .card .card-foot a.btn,
#page-home .cards .card .card-foot button.btn{
  width: 100%;
}

/* =========================================
   HOME：会社/Bee を上へ、ToDo群をメモ風に
   ========================================= */
#page-home .home-main-wrap{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap:14px;
  align-items:stretch;
  margin-bottom:14px;
}

#homeTodoWrap,
.home-todo-wrap{
  width:100%;
  max-width:none;
  min-width:0;
  margin:12px 0 14px;
  box-sizing:border-box;
  align-self:stretch;
  justify-self:stretch;
}

#homeTodoWrap .home-memo-wrap,
.home-todo-wrap .home-memo-wrap{
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
  margin:0;
  width:100%;
  max-width:none;
  min-width:0;
  box-sizing:border-box;
  align-items:stretch;
}

#page-home .home-company-card,
#page-home .home-bee-card{
  min-height:220px;
}

#homeTodoWrap .home-memo-card,
.home-todo-wrap .home-memo-card{
  position:relative;
  min-height:132px;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0;
  box-sizing:border-box;
  align-self:stretch;
  justify-self:stretch;
  border-radius:22px !important;
  border:1px solid rgba(130,97,20,.24) !important;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(120,92,28,0) 0 28px,
      rgba(120,92,28,.08) 28px 29px
    ),
    linear-gradient(
      180deg,
      rgba(255,244,190,.96),
      rgba(243,225,153,.92)
    ) !important;
  box-shadow:
    0 12px 28px rgba(123,93,18,.22),
    inset 0 1px 0 rgba(255,255,255,.55) !important;
  color:#4d3d14 !important;
}

#homeTodoWrap .home-memo-card::before,
.home-todo-wrap .home-memo-card::before{
  content:"";
  position:absolute;
  top:10px;
  right:18px;
  width:38px;
  height:14px;
  border-radius:4px;
  background:rgba(194,160,78,.58);
  box-shadow:0 2px 6px rgba(0,0,0,.10);
  transform:rotate(-6deg);
}

#homeTodoWrap .home-memo-card .card-title,
.home-todo-wrap .home-memo-card .card-title{
  color:#5b4512 !important;
  text-shadow:none !important;
}

#homeTodoWrap .home-memo-card .card-desc,
#homeTodoWrap .home-memo-card .card-foot,
#homeTodoWrap .home-memo-card small,
#homeTodoWrap .home-memo-card .ms-key,
#homeTodoWrap .home-memo-card .ms-val,
.home-todo-wrap .home-memo-card .card-desc,
.home-todo-wrap .home-memo-card .card-foot,
.home-todo-wrap .home-memo-card small,
.home-todo-wrap .home-memo-card .ms-key,
.home-todo-wrap .home-memo-card .ms-val{
  color:#6a5420 !important;
  text-shadow:none !important;
}

#homeTodoWrap .home-memo-card .card-foot,
.home-todo-wrap .home-memo-card .card-foot{
  font-weight:700;
  border-top:none;
  padding-top:0;
}

#page-home .home-bee-card .ms-row{
  border-bottom:1px solid rgba(255,255,255,.10);
}

#page-home .home-bee-card .ms-row:nth-child(3) .ms-key{
  letter-spacing:.04em;
}

@media (max-width: 980px){
  #page-home .home-main-wrap{
    grid-template-columns:1fr;
  }

  #homeTodoWrap,
  .home-todo-wrap{
    width:100%;
    max-width:none;
    min-width:0;
    margin:10px 0 12px;
  }

  #homeTodoWrap .home-memo-wrap,
  .home-todo-wrap .home-memo-wrap{
    grid-template-columns:1fr;
    gap:10px;
    width:100%;
    max-width:none;
    min-width:0;
  }

  #homeTodoWrap .home-memo-card,
  .home-todo-wrap .home-memo-card{
    min-height:104px;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
  }
}

/* =========================================================
   Settings: 右側プレビュー廃止（左を全幅に）
   ========================================================= */
#page-settings .settings-right{ display:none !important; }  /* 右カラムを消す */
#page-settings .settings-split{ display:block !important; } /* 2カラムflexを解除 */
#page-settings .settings-left{
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
}