* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Hiragino Kaku Gothic Pro','メイリオ',Arial,sans-serif; background:#f0f2f5; color:#1a1a2e; min-height:100vh; }

/* ヘッダー */
.header { background:linear-gradient(135deg,#062E22 0%,#0b5e3a 100%); color:#fff; padding:14px 28px; display:flex; align-items:center; justify-content:space-between; box-shadow:0 2px 8px rgba(0,0,0,0.25); }
.header h1 { font-size:1.2rem; font-weight:700; }
.header .sub { font-size:0.78rem; color:#a8d5c2; margin-top:2px; }
.header-right { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.hbadge { background:#c0392b; color:#fff; font-size:0.72rem; font-weight:700; padding:3px 10px; border-radius:20px; }
.hbadge.orange { background:#d35400; }
.btn-logout { color:#a8d5c2; font-size:0.8rem; text-decoration:none; border:1px solid rgba(255,255,255,0.25); padding:4px 12px; border-radius:6px; }

.container { max-width:1100px; margin:0 auto; padding:20px 16px; }

/* ========== 今月の業務進捗 ========== */
.workflow-panel { background:#fff; border-radius:10px; border:1px solid #e0e6ed; padding:20px; margin-bottom:20px; }
.workflow-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.workflow-title { font-size:1rem; font-weight:700; color:#062E22; }
.workflow-progress { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.workflow-bar-wrap { width:120px; height:10px; background:#e8edf2; border-radius:5px; overflow:hidden; }
.workflow-bar { height:100%; background:#062E22; border-radius:5px; transition:width 0.4s; }
.workflow-rate { font-size:0.9rem; font-weight:700; color:#062E22; }
.workflow-remain { font-size:0.8rem; color:#666; }
.workflow-section { margin-top:12px; }
.workflow-section-title { font-size:0.75rem; font-weight:700; color:#888; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:6px; padding-bottom:4px; border-bottom:1px solid #f0f0f0; }
.workflow-item { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:6px; margin-bottom:4px; font-size:0.85rem; }
.wf-urgent { background:#fff5f5; border-left:3px solid #c0392b; }
.wf-error  { background:#fff5f5; border-left:3px solid #e74c3c; }
.wf-warn   { background:#fffbf0; border-left:3px solid #f39c12; }
.wf-done   { background:#f8fffe; color:#888; }
.wf-icon   { font-size:1rem; flex-shrink:0; }
.wf-name   { font-weight:600; min-width:120px; }
.wf-label  { flex:1; color:#555; }
.wf-min    { font-size:0.75rem; color:#aaa; white-space:nowrap; }
.wf-actions { display:flex; gap:6px; }
.wf-btn    { font-size:0.75rem; padding:3px 10px; background:#062E22; color:#fff; border-radius:4px; text-decoration:none; white-space:nowrap; }
.wf-btn:hover { background:#0b5e3a; }
.wf-top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid #f0f0f0; }
.wf-month { font-size:0.9rem; font-weight:700; color:#062E22; }
.wf-next { background:#f0f7f4; border:2px solid #062E22; border-radius:8px; padding:16px 20px; margin-bottom:12px; }
.wf-next-label { font-size:0.7rem; font-weight:700; color:#062E22; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:8px; }
.wf-next-body { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.wf-next-info { display:flex; align-items:center; gap:8px; }
.wf-next-icon { font-size:1.3rem; }
.wf-next-name { font-size:1rem; font-weight:700; color:#062E22; }
.wf-next-detail { font-size:0.8rem; color:#555; }
.wf-btn-main { padding:8px 20px; background:#FF8A00; color:#fff; border-radius:6px; text-decoration:none; font-weight:700; font-size:0.85rem; white-space:nowrap; }
.wf-btn-main:hover { background:#e67a00; }
.wf-rest { margin-bottom:12px; }
.wf-rest-label { font-size:0.7rem; font-weight:700; color:#888; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:6px; }
.wf-rest-item { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:4px; font-size:0.82rem; color:#666; }
.wf-rest-name { font-weight:600; min-width:110px; }
.wf-rest-detail { flex:1; color:#999; }
.wf-btn-sub { font-size:0.72rem; padding:2px 8px; background:#e8edf2; color:#444; border-radius:4px; text-decoration:none; white-space:nowrap; }
.wf-btn-sub:hover { background:#d0d8e0; }
.wf-done-wrap { border-top:1px solid #f0f0f0; padding-top:8px; }
.wf-done-toggle { background:none; border:none; cursor:pointer; font-size:0.82rem; color:#888; padding:4px 0; display:flex; align-items:center; gap:6px; }
.wf-arrow { transition:transform 0.2s; display:inline-block; }
.wf-arrow.open { transform:rotate(180deg); }
.wf-done-list { display:none; margin-top:6px; }
.wf-done-list.open { display:block; }
.wf-done-item { display:flex; align-items:center; gap:8px; padding:4px 8px; font-size:0.82rem; color:#aaa; }
.wf-done-detail { color:#bbb; }
.wf-deadline { font-size:0.75rem; padding:2px 8px; border-radius:10px; background:#f0f7f4; color:#555; white-space:nowrap; }
.wf-deadline.urgent { background:#fff8e6; color:#d35400; font-weight:600; }
.wf-deadline.overdue { background:#fdf2f2; color:#c0392b; font-weight:600; }
.wf-deadline-mini { font-size:0.72rem; color:#999; white-space:nowrap; }
.wf-deadline-mini.urgent { color:#d35400; font-weight:600; }
.wf-deadline-mini.overdue { color:#c0392b; font-weight:600; }
/* ========== モード切替プルダウン ========== */
.mode-dropdown-wrap { display:flex; align-items:center; gap:8px; margin-bottom:16px; }
.mode-dropdown-label { font-size:0.78rem; color:#888; }
.mode-dropdown-box { position:relative; }
.mode-dropdown-btn { display:flex; align-items:center; gap:6px; padding:5px 14px; background:#062E22; color:#fff; border:none; border-radius:20px; font-size:0.78rem; font-weight:700; cursor:pointer; }
.mode-dropdown-btn:hover { background:#0b5e3a; }
.mode-arrow { font-size:0.6rem; transition:transform 0.2s; }
.mode-menu { display:none; position:absolute; top:calc(100% + 4px); left:0; background:#fff; border:1px solid #e0e6ed; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.1); z-index:100; min-width:140px; overflow:hidden; }
.mode-menu.open { display:block; }
.mode-menu-item { display:block; padding:8px 16px; font-size:0.82rem; color:#333; text-decoration:none; }
.mode-menu-item:hover { background:#f5f7fa; }
.mode-menu-item.active { background:#f0f7f4; color:#062E22; font-weight:700; }
/* ========== 前回分析コンパクト版 ========== */
.change-panel-compact { background:#fff; border-radius:10px; border:1px solid #e0e6ed; margin-bottom:20px; overflow:hidden; }
.chg-compact-head { display:flex; align-items:center; gap:12px; padding:12px 18px; flex-wrap:wrap; border-bottom:1px solid #f0f0f0; }
.chg-compact-title { font-size:0.9rem; font-weight:700; color:#062E22; display:flex; align-items:center; gap:8px; }
.chg-compact-ym { font-size:0.75rem; color:#888; font-weight:400; }
.chg-compact-stats { display:flex; gap:12px; flex:1; flex-wrap:wrap; }
.chg-stat-mini { font-size:0.82rem; color:#666; padding:2px 8px; border-radius:12px; background:#f5f5f5; }
.chg-stat-mini.green { background:#eafaf1; color:#1e8449; }
.chg-stat-mini.red { background:#fdf2f2; color:#c0392b; }
.chg-toggle-btn { background:none; border:1px solid #d0d8e0; border-radius:4px; padding:4px 12px; font-size:0.78rem; color:#555; cursor:pointer; white-space:nowrap; display:flex; align-items:center; gap:4px; }
.chg-toggle-btn:hover { background:#f5f7fa; }
.chg-btn-arrow { transition:transform 0.2s; display:inline-block; }
.chg-btn-arrow.open { transform:rotate(180deg); }
.chg-detail-wrap { display:none; padding:16px 18px; }
.chg-detail-wrap.open { display:block; }

/* モジュールタグ */
.mod-tags { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.mod-tag { font-size:0.72rem; font-weight:700; padding:3px 10px; border-radius:20px; }
.mt-analysis { background:#e8f5e9; color:#1e8449; border:1px solid #1e8449; }
.mt-life     { background:#e3f2fd; color:#1565c0; border:1px solid #1565c0; }
.mt-training { background:#f3e5f5; color:#6a1b9a; border:1px solid #6a1b9a; }
.mt-off      { background:#f5f5f5; color:#bbb;    border:1px solid #ddd; }

/* ========== 本日の最重要課題 ========== */
.priority-section { margin-bottom:24px; }
.priority-header {
    display:flex; align-items:center; gap:10px;
    margin-bottom:14px;
}
.priority-header h2 { font-size:1.05rem; font-weight:700; color:#c0392b; }
.priority-header .today-date { font-size:0.8rem; color:#888; }

.task-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; }

.task-card {
    background:#fff;
    border-radius:10px;
    box-shadow:0 2px 10px rgba(0,0,0,0.09);
    overflow:hidden;
    border-left:5px solid #ccc;
}
.task-card.grade-d  { border-left-color:#c0392b; }
.task-card.csv-warn { border-left-color:#d35400; }
.task-card.intv     { border-left-color:#8e44ad; }

.task-card-head {
    padding:12px 16px 8px;
    display:flex; align-items:center; gap:10px;
}
.task-card-icon { font-size:1.6rem; }
.task-card-meta { flex:1; }
.task-card-meta .label {
    font-size:0.7rem; font-weight:700; color:#fff;
    background:#c0392b; padding:2px 8px; border-radius:10px;
    display:inline-block; margin-bottom:4px;
}
.task-card.csv-warn .task-card-meta .label { background:#d35400; }
.task-card.intv     .task-card-meta .label { background:#8e44ad; }
.task-card-meta h3 { font-size:0.95rem; font-weight:700; color:#1a1a2e; line-height:1.3; }
.task-card-body { padding:8px 16px 14px; }
.task-stat { display:flex; gap:16px; margin-bottom:10px; flex-wrap:wrap; }
.task-stat-item { text-align:center; }
.task-stat-item .num { font-size:1.5rem; font-weight:800; line-height:1; }
.task-stat-item .num.red    { color:#c0392b; }
.task-stat-item .num.orange { color:#d35400; }
.task-stat-item .num.purple { color:#8e44ad; }
.task-stat-item .lbl { font-size:0.7rem; color:#888; margin-top:2px; }
.task-desc { font-size:0.8rem; color:#555; line-height:1.6; margin-bottom:12px; }
.btn-task {
    display:inline-block; padding:9px 20px;
    border-radius:8px; font-size:0.85rem; font-weight:700;
    text-decoration:none; color:#fff; border:none; cursor:pointer;
}
.btn-task.red    { background:#c0392b; }
.btn-task.orange { background:#d35400; }
.btn-task.purple { background:#8e44ad; }
.btn-task:hover  { opacity:0.88; }

/* 課題なし */
.no-task { background:#f0faf4; border:1.5px solid #1e8449; border-radius:10px; padding:16px 20px; display:flex; align-items:center; gap:12px; color:#1e8449; font-weight:700; font-size:0.95rem; margin-bottom:24px; }

/* ========== CSV取込状況 ========== */
.csv-panel { background:#fff; border-radius:12px; box-shadow:0 2px 10px rgba(0,0,0,0.07); margin-bottom:24px; overflow:hidden; }
.csv-panel-head { background:linear-gradient(90deg,#062E22,#0b5e3a); color:#fff; padding:14px 22px; display:flex; align-items:center; justify-content:space-between; }
.csv-panel-head h2 { font-size:1rem; font-weight:700; }
.sum-badges { display:flex; gap:8px; flex-wrap:wrap; }
.sum-badge { font-size:0.72rem; font-weight:700; padding:3px 10px; border-radius:20px; border:1px solid rgba(255,255,255,0.4); color:#fff; }

table.csv-tbl { width:100%; border-collapse:collapse; }
table.csv-tbl th { background:#f5f7fa; font-size:0.78rem; color:#666; font-weight:600; padding:9px 14px; text-align:left; border-bottom:2px solid #e8e8e8; }
table.csv-tbl td { padding:11px 14px; border-bottom:1px solid #f0f0f0; font-size:0.88rem; vertical-align:middle; }
table.csv-tbl tr:last-child td { border-bottom:none; }
table.csv-tbl tr.row-critical { background:#fff5f5; }
table.csv-tbl tr.row-danger   { background:#fff8f3; }
table.csv-tbl tr.row-warning  { background:#fffdf0; }

.sbadge { display:inline-flex; align-items:center; gap:4px; font-size:0.75rem; font-weight:700; padding:3px 9px; border-radius:20px; color:#fff; }
.btn-sm { font-size:0.75rem; padding:5px 11px; border-radius:6px; border:none; cursor:pointer; text-decoration:none; font-weight:600; color:#fff; display:inline-block; margin:2px; }
.btn-sm.red    { background:#c0392b; }
.btn-sm.orange { background:#d35400; }
.btn-sm.green  { background:#1e8449; }
.btn-sm.blue   { background:#1565c0; }

/* ========== KPI ========== */
.sec-title { font-size:1rem; font-weight:700; color:#062E22; margin-bottom:14px; display:flex; align-items:center; gap:6px; }
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:24px; }
.kpi-card { background:#fff; border-radius:10px; padding:16px; text-align:center; box-shadow:0 2px 8px rgba(0,0,0,0.07); border-top:4px solid #ddd; cursor:default; }
.kpi-card.red    { border-top-color:#c0392b; }
.kpi-card.orange { border-top-color:#d35400; }
.kpi-card.purple { border-top-color:#8e44ad; }
.kpi-card.green  { border-top-color:#1e8449; }
.kpi-card.blue   { border-top-color:#1f618d; }
.kpi-num { font-size:2rem; font-weight:800; line-height:1; margin-bottom:4px; }
.kpi-card.red    .kpi-num { color:#c0392b; }
.kpi-card.orange .kpi-num { color:#d35400; }
.kpi-card.purple .kpi-num { color:#8e44ad; }
.kpi-card.green  .kpi-num { color:#1e8449; }
.kpi-lbl { font-size:0.78rem; color:#666; font-weight:600; }
.kpi-sub { font-size:0.7rem; color:#aaa; margin-top:3px; }

/* ========== フローチャート ========== */
.flow-wrap { background:#fff; border-radius:12px; box-shadow:0 2px 10px rgba(0,0,0,0.07); padding:22px; margin-bottom:24px; }
.flow-wrap h2 { font-size:1rem; font-weight:700; color:#062E22; margin-bottom:18px; }
.flow-chart { display:flex; align-items:stretch; overflow-x:auto; padding-bottom:4px; }
.flow-step { background:#f8faf9; border:1.5px solid #e0e0e0; border-radius:10px; padding:16px 14px; flex:1; min-width:150px; max-width:190px; display:flex; flex-direction:column; align-items:center; text-align:center; transition:box-shadow 0.2s; }
.flow-step:hover { box-shadow:0 3px 14px rgba(0,0,0,0.12); border-color:#062E22; }
.flow-step.disabled { opacity:0.4; pointer-events:none; }
.flow-arrow { display:flex; align-items:center; padding:0 6px; color:#062E22; font-size:1.3rem; flex-shrink:0; }
.fnum { width:28px; height:28px; border-radius:50%; background:#062E22; color:#fff; font-size:0.8rem; font-weight:700; display:flex; align-items:center; justify-content:center; margin-bottom:8px; }
.ficon { font-size:1.5rem; margin-bottom:6px; }
.ftitle { font-size:0.85rem; font-weight:700; color:#1a1a2e; margin-bottom:4px; line-height:1.3; }
.fdesc { font-size:0.72rem; color:#888; margin-bottom:10px; line-height:1.5; flex:1; }
.fbadge { font-size:0.68rem; font-weight:700; padding:2px 8px; border-radius:10px; margin-bottom:8px; }
.fb-analysis { background:#e8f5e9; color:#1e8449; }
.fb-life { background:#e3f2fd; color:#1565c0; }
.fb-all { background:#f3e5f5; color:#6a1b9a; }
.btn-flow { display:block; width:100%; background:#FF8A00; color:#fff; border:none; border-radius:7px; padding:8px 0; font-size:0.78rem; font-weight:700; cursor:pointer; text-decoration:none; transition:background 0.2s; }
.btn-flow:hover { background:#e67a00; }
.btn-flow.dark { background:#062E22; }
.btn-flow.dark:hover { background:#0b5e3a; }
.btn-flow.blue { background:#1565c0; }
.btn-flow.disabled-btn { background:#ccc; cursor:not-allowed; pointer-events:none; }

@media(max-width:768px) {
    .kpi-grid { grid-template-columns:repeat(2,1fr); }
    .task-cards { grid-template-columns:1fr; }
    .flow-chart { flex-direction:column; align-items:stretch; }
    .flow-arrow { transform:rotate(90deg); align-self:center; padding:4px 0; }
    .flow-step { max-width:100%; }
}

/* ========== 前回分析からの変化 ========== */
.change-panel { background:#fff; border-radius:12px; box-shadow:0 2px 10px rgba(0,0,0,0.08); margin-bottom:24px; overflow:hidden; }
.change-panel-head { background:linear-gradient(90deg,#1f618d,#2980b9); color:#fff; padding:14px 22px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.change-panel-head h2 { font-size:1rem; font-weight:700; }
.change-ym { font-size:0.75rem; color:rgba(255,255,255,0.75); margin-top:2px; display:block; }
.change-summary-badges { display:flex; gap:8px; flex-wrap:wrap; }
.chg-badge { font-size:0.75rem; font-weight:700; padding:4px 12px; border-radius:20px; border:1px solid rgba(255,255,255,0.4); }
.chg-badge.up   { background:rgba(30,132,73,0.8); }
.chg-badge.down { background:rgba(192,57,43,0.8); }
.chg-badge.flat { background:rgba(255,255,255,0.2); }

.change-body { padding:20px 22px; }

/* サマリー行 */
.change-summary-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
.chg-stat-card { background:#f8faf9; border-radius:10px; padding:14px; text-align:center; border:1.5px solid #e8e8e8; }
.chg-stat-card.green { border-color:#1e8449; background:#f0faf4; }
.chg-stat-card.red   { border-color:#c0392b; background:#fff5f5; }
.chg-stat-icon { font-size:1.2rem; font-weight:800; margin-bottom:4px; color:#555; }
.chg-stat-card.green .chg-stat-icon { color:#1e8449; }
.chg-stat-card.red   .chg-stat-icon { color:#c0392b; }
.chg-stat-num { font-size:1.3rem; font-weight:800; color:#1a1a2e; line-height:1.2; margin-bottom:4px; }
.chg-stat-card.green .chg-stat-num { color:#1e8449; }
.chg-stat-card.red   .chg-stat-num { color:#c0392b; }
.chg-stat-lbl { font-size:0.72rem; color:#888; }

/* 事業所別変化行 */
.change-rows { display:flex; flex-direction:column; gap:10px; }
.change-row { background:#f8faf9; border-radius:8px; padding:14px 16px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; border-left:4px solid #ddd; }
.change-row.row-up   { border-left-color:#1e8449; background:#f0faf4; }
.change-row.row-down { border-left-color:#c0392b; background:#fff5f5; }
.change-row-name { min-width:160px; }
.change-row-name strong { display:block; font-size:0.9rem; font-weight:700; }
.change-row-type { font-size:0.72rem; color:#888; }
.change-row-scores { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.grade-chip { font-size:0.78rem; font-weight:700; padding:4px 10px; border-radius:6px; color:#fff; }
.grade-chip.current { box-shadow:0 0 0 2px rgba(0,0,0,0.15); }
.arrow-mid { color:#888; font-size:1rem; }
.diff-badge { font-size:0.82rem; font-weight:800; padding:3px 8px; border-radius:6px; border:1.5px solid; background:#fff; }
.change-row-trend { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.trend-icon { font-size:0.82rem; font-weight:700; padding:3px 10px; border-radius:20px; }
.trend-icon.up   { background:#e8f5e9; color:#1e8449; }
.trend-icon.down { background:#fdf2f2; color:#c0392b; }
.trend-icon.flat { background:#f5f5f5; color:#888; }
.streak { font-size:0.72rem; background:#fff3cd; color:#856404; padding:2px 8px; border-radius:10px; }
.streak.bad { background:#fdf2f2; color:#c0392b; }
.change-row-loss { font-size:0.8rem; color:#555; margin-left:auto; }

@media(max-width:768px) {
    .change-summary-row { grid-template-columns:repeat(2,1fr); }
    .change-row { flex-direction:column; align-items:flex-start; }
    .change-row-loss { margin-left:0; }
}
.wf-btn-today { display:inline-block; padding:8px 18px; margin-left:8px; background:#062E22; color:#fff; border-radius:6px; text-decoration:none; font-weight:700; font-size:.85rem; }
.wf-btn-today:hover { background:#0b5e3a; }
