/* =============================================================================
   採用カレンダー ページ専用スタイル (cal- プレフィックスで console.css と非干渉)
   ============================================================================= */

.cal-loading, .cal-empty { text-align:center; color:#9CA3AF; padding:40px 16px; font-size:13px; }

/* ---------- KPI 行 ---------- */
.cal-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px; }
@media (max-width:720px) { .cal-kpis { grid-template-columns:repeat(2,1fr); } }
.cal-kpi { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:14px 16px;
    display:flex; align-items:center; gap:12px; }
.cal-kpi__icon { font-size:22px; }
.cal-kpi__label { font-size:11px; color:var(--ink-mute); }
.cal-kpi__value { font-size:24px; font-weight:800; line-height:1.1; }
.cal-kpi__value small { font-size:12px; font-weight:600; color:var(--ink-soft); margin-left:2px; }

/* ---------- ツールバー ---------- */
.cal-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px;
    flex-wrap:wrap; margin-bottom:14px; }
.cal-monthnav { display:flex; align-items:center; gap:8px; }
.cal-monthnav__title { font-size:18px; font-weight:800; min-width:140px; text-align:center; }
.cal-navbtn { width:32px; height:32px; border:1px solid var(--border); background:var(--card);
    border-radius:8px; cursor:pointer; font-size:18px; line-height:1; color:var(--ink-mute); }
.cal-navbtn:hover { background:var(--bg); color:var(--ink); border-color:var(--brand); }

.cal-filters { display:flex; flex-wrap:wrap; gap:6px; }
.cal-chip { display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:999px;
    border:1px solid var(--border); background:var(--card); cursor:pointer; font-size:12px;
    font-weight:600; color:var(--ink-mute); font-family:inherit; }
.cal-chip:hover { border-color:var(--brand); }
.cal-chip.is-active { background:var(--brand); border-color:var(--brand); color:#fff; }
.cal-chip__dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.cal-chip__count { font-size:11px; opacity:.8; }

/* ---------- 月グリッド ---------- */
.cal-grid { background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.cal-grid__dow { display:grid; grid-template-columns:repeat(7,1fr); background:var(--bg);
    border-bottom:1px solid var(--border); }
.cal-grid__dow span { padding:8px 4px; text-align:center; font-size:11px; font-weight:700; color:var(--ink-mute); }
.cal-grid__dow span:first-child { color:#DC2626; }
.cal-grid__dow span:last-child  { color:#2563EB; }
.cal-grid__body { display:grid; grid-template-columns:repeat(7,1fr); }
.cal-day { min-height:104px; border-right:1px solid var(--border); border-bottom:1px solid var(--border);
    padding:5px 5px 4px; cursor:pointer; position:relative; }
.cal-day:nth-child(7n) { border-right:none; }
.cal-day:hover { background:#FAFBFC; }
.cal-day--out { background:#FAFAFA; }
.cal-day--out .cal-day__num { color:#C7CCD1; }
.cal-day--today { background:#F0FDF4; }
.cal-day__num { font-size:12px; font-weight:700; color:var(--ink); }
.cal-day--today .cal-day__num { background:var(--brand); color:#fff; border-radius:50%;
    width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; }
.cal-day__num--sun { color:#DC2626; }
.cal-day__num--sat { color:#2563EB; }
.cal-evs { margin-top:3px; display:flex; flex-direction:column; gap:2px; }
.cal-ev { display:flex; align-items:center; gap:4px; padding:2px 5px; border-radius:4px;
    font-size:11px; line-height:1.4; cursor:pointer; color:#fff; overflow:hidden;
    white-space:nowrap; text-overflow:ellipsis; }
.cal-ev--done { opacity:.55; }
.cal-ev__t { overflow:hidden; text-overflow:ellipsis; }
.cal-ev__more { font-size:10px; color:var(--ink-soft); padding:1px 4px; }

@media (max-width:720px) {
    .cal-day { min-height:72px; }
    .cal-ev__t { display:none; }
    .cal-ev { padding:3px; height:6px; }
}

/* ---------- 直近の予定 ---------- */
.cal-sec-title { font-size:15px; font-weight:800; margin:26px 0 12px; }
.cal-sec-title span { font-size:12px; font-weight:500; color:var(--ink-soft); margin-left:8px; }
.cal-up { display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--border);
    border-radius:10px; padding:11px 14px; margin-bottom:8px; cursor:pointer; }
.cal-up:hover { border-color:var(--brand); }
.cal-up__date { flex:0 0 52px; text-align:center; }
.cal-up__date-d { font-size:20px; font-weight:800; line-height:1; }
.cal-up__date-m { font-size:10px; color:var(--ink-soft); }
.cal-up__bar { width:4px; align-self:stretch; border-radius:999px; }
.cal-up__body { flex:1; min-width:0; }
.cal-up__title { font-size:13.5px; font-weight:700; }
.cal-up__meta { font-size:11px; color:var(--ink-mute); margin-top:2px; }
.cal-up__badge { font-size:10px; font-weight:700; padding:2px 8px; border-radius:999px;
    background:var(--bg); color:var(--ink-mute); }
.cal-up__badge--soon { background:#FEF3C7; color:#92400E; }
.cal-up__badge--done { background:#D1FAE5; color:#047857; }

/* ---------- ドロワー ---------- */
.cal-overlay { position:fixed; inset:0; background:rgba(17,24,39,.4); z-index:60;
    opacity:0; pointer-events:none; transition:opacity .2s; }
.cal-overlay.is-open { opacity:1; pointer-events:auto; }
.cal-drawer { position:fixed; top:0; right:0; bottom:0; width:440px; max-width:92vw;
    background:var(--card); z-index:61; display:flex; flex-direction:column;
    box-shadow:-8px 0 28px rgba(0,0,0,.16); transform:translateX(100%); transition:transform .22s ease; }
.cal-drawer.is-open { transform:translateX(0); }
.cal-drawer__head { display:flex; align-items:center; justify-content:space-between;
    padding:16px 20px; border-bottom:1px solid var(--border); flex-shrink:0; }
.cal-drawer__title { font-size:16px; font-weight:800; margin:0; }
.cal-drawer__close { width:30px; height:30px; border:none; background:var(--bg); border-radius:8px;
    cursor:pointer; font-size:14px; color:var(--ink-mute); }
.cal-drawer__close:hover { background:var(--border); color:var(--ink); }
.cal-drawer__body { flex:1; overflow-y:auto; padding:18px 20px; }
.cal-drawer__foot { display:flex; align-items:center; gap:8px; padding:12px 20px;
    border-top:1px solid var(--border); flex-shrink:0; }

/* ドロワー内フォーム */
.cal-f { margin-bottom:13px; }
.cal-f__label { display:block; font-size:12px; font-weight:700; color:var(--ink-mute); margin-bottom:4px; }
.cal-f__input, .cal-f__select, .cal-f__textarea {
    width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:8px;
    font-size:13px; font-family:inherit; background:var(--card); outline:none; }
.cal-f__input:focus, .cal-f__select:focus, .cal-f__textarea:focus {
    border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.cal-f__textarea { resize:vertical; min-height:60px; }
.cal-f-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.cal-f-row--2 { grid-template-columns:1fr 1fr; }

.cal-sec { margin:16px 0 4px; padding-top:14px; border-top:1px dashed var(--border); }
.cal-sec__h { font-size:12px; font-weight:800; color:var(--ink); margin-bottom:10px; }

/* 資料リスト */
.cal-mat { display:grid; grid-template-columns:1fr 1fr auto; gap:6px; margin-bottom:6px; }
.cal-mat__del { width:30px; border:1px solid var(--border); background:var(--card); border-radius:7px;
    cursor:pointer; color:var(--danger); font-size:12px; }
.cal-add { width:100%; padding:7px; border:1px dashed var(--border); border-radius:7px;
    background:transparent; cursor:pointer; font-size:12px; font-weight:600; color:var(--ink-mute);
    font-family:inherit; }
.cal-add:hover { border-color:var(--brand); color:var(--brand); }

/* タグピッカー */
.cal-taggrp { margin-bottom:8px; }
.cal-taggrp__h { font-size:11px; font-weight:700; color:var(--ink-mute); margin-bottom:4px; }
.cal-tags { display:flex; flex-wrap:wrap; gap:5px; }
.cal-tag { font-size:11px; padding:3px 9px; border-radius:999px; border:1px solid var(--border);
    background:var(--card); cursor:pointer; color:var(--ink-mute); }
.cal-tag.is-on { background:var(--brand-soft); border-color:var(--brand); color:var(--brand-dark); font-weight:700; }

.cal-status-toggle { display:inline-flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.cal-status-toggle button { padding:7px 16px; border:none; background:var(--card); cursor:pointer;
    font-size:12px; font-weight:700; color:var(--ink-mute); font-family:inherit; }
.cal-status-toggle button.is-on { background:var(--brand); color:#fff; }

/* ---------- スマホ (≤640px): イベントドロワーをフルスクリーン化 ---------- */
@media (max-width: 640px) {
    .cal-drawer { width:100vw; max-width:100vw; box-shadow:none; }
    .cal-drawer__head { padding:12px 14px; }
    .cal-drawer__title { font-size:15px; }
    .cal-drawer__body { padding:14px 14px 20px; }
    .cal-drawer__foot { padding:10px 14px; gap:6px; }
}