/* 勤務表Webアプリ スタイル
   - スマートフォン(<=760px)ではカレンダーを縦1列のリストに切り替える
   - 印刷は A4 横向き。操作系は一切印刷しない
*/
:root{
  --bg:#f4f6f9;
  --surface:#ffffff;
  --line:#dde3ec;
  --line-strong:#c3ccda;
  --text:#1d2530;
  --muted:#66748a;
  --primary:#2563a8;
  --primary-dark:#1c4e86;
  --primary-soft:#e8f0fa;
  --red:#c92a2a;
  --red-soft:#fdecec;
  --amber:#b26a00;
  --amber-soft:#fff5e0;
  --green:#1f7a45;
  --green-soft:#e8f6ee;
  --radius:10px;
  --shadow:0 1px 3px rgba(20,32,52,.08),0 6px 20px rgba(20,32,52,.06);
}
*{box-sizing:border-box}
/* hidden属性を必ず最優先で効かせる（display:flex等の指定に打ち消されないように） */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Yu Gothic UI",Meiryo,sans-serif;
  font-size:15px;line-height:1.6;-webkit-text-size-adjust:100%;
}
button{font-family:inherit;font-size:inherit}
h1,h2,h3{margin:0;font-weight:700}

/* ---------------- buttons ---------------- */
.btn{
  border:1px solid var(--line-strong);background:var(--surface);color:var(--text);
  border-radius:8px;padding:8px 14px;cursor:pointer;transition:.15s;white-space:nowrap;
}
.btn:hover{background:#eef2f7}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark)}
.btn-secondary{background:var(--primary-soft);border-color:#bcd2ea;color:var(--primary-dark)}
.btn-secondary:hover{background:#dbe8f8}
.btn-ghost{background:transparent}
.btn-danger{background:#fff;border-color:#e2b3b3;color:var(--red)}
.btn-danger:hover{background:var(--red-soft)}
.btn-block{width:100%}
.btn-small{padding:5px 10px;font-size:13px}
.btn-icon{padding:6px 12px}

/* ---------------- login ---------------- */
.login-screen{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{background:var(--surface);border-radius:14px;box-shadow:var(--shadow);padding:28px 24px;width:100%;max-width:380px}
.login-title{font-size:24px;text-align:center;letter-spacing:.08em}
.login-sub{margin:4px 0 20px;text-align:center;color:var(--muted);font-size:13px}
.tabs{display:flex;gap:6px;background:#eef2f7;border-radius:9px;padding:4px;margin-bottom:18px}
.tab{flex:1;border:0;background:transparent;border-radius:7px;padding:9px;cursor:pointer;color:var(--muted);font-weight:600}
.tab.is-active{background:var(--surface);color:var(--primary-dark);box-shadow:0 1px 3px rgba(20,32,52,.12)}
.field{display:block;margin-bottom:14px}
.field-label{display:block;font-size:13px;color:var(--muted);margin-bottom:5px}
input[type=text],input[type=password],select,textarea{
  width:100%;padding:9px 11px;border:1px solid var(--line-strong);border-radius:8px;
  background:#fff;color:var(--text);font-size:15px;font-family:inherit;
}
input:focus,select:focus,textarea:focus{outline:2px solid #a9c8e8;outline-offset:-1px;border-color:var(--primary)}
.error-text{color:var(--red);font-size:13px;margin:0 0 12px}
.login-note{margin:14px 0 0;text-align:center;color:var(--muted);font-size:12px}

/* ---------------- topbar ---------------- */
.topbar{
  position:sticky;top:0;z-index:30;background:var(--surface);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px;flex-wrap:wrap;
}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.brand{font-weight:700;letter-spacing:.06em;font-size:17px}
.badge{font-size:11px;padding:2px 9px;border-radius:999px;background:var(--primary-soft);color:var(--primary-dark);font-weight:700}
.badge.is-staff{background:var(--green-soft);color:var(--green)}
.save-status{font-size:12px;color:var(--muted);padding:3px 9px;border-radius:999px;background:#eef2f7}
.save-status.is-saving{background:var(--amber-soft);color:var(--amber)}
.save-status.is-saved{background:var(--green-soft);color:var(--green)}
.save-status.is-failed{background:var(--red-soft);color:var(--red);font-weight:700}

/* ---------------- banners ---------------- */
.edit-banner{
  background:var(--amber-soft);color:var(--amber);border-bottom:1px solid #f0dcb4;
  padding:9px 16px;font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:8px;
}
.edit-banner .dot{width:9px;height:9px;border-radius:50%;background:var(--amber);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.info-banner{background:var(--primary-soft);color:var(--primary-dark);padding:9px 16px;font-size:13px;border-bottom:1px solid #cfdff2}

/* ---------------- month nav ---------------- */
.month-nav{
  display:flex;align-items:center;gap:10px;padding:14px 16px 6px;flex-wrap:wrap;
}
.month-picker{display:flex;gap:6px}
.month-picker select{width:auto;padding:7px 10px}
.published-info{margin-left:auto;font-size:12.5px;color:var(--muted)}
.month-alert{
  margin:10px 16px 0;padding:10px 14px;border-radius:var(--radius);font-size:13.5px;
  background:var(--amber-soft);color:var(--amber);border:1px solid #f0dcb4;
}
.month-alert.is-error{background:var(--red-soft);color:var(--red);border-color:#efc9c9}
.month-alert.is-info{background:var(--primary-soft);color:var(--primary-dark);border-color:#cfdff2}

/* ---------------- calendar ---------------- */
.calendar{padding:12px 16px 4px;display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.weekday-head{
  text-align:center;font-size:12.5px;font-weight:700;color:var(--muted);padding:6px 0;
  background:var(--surface);border-radius:8px;border:1px solid var(--line);
}
.weekday-head.is-sun{color:var(--red)}
.weekday-head.is-sat{color:#2563a8}
.day-cell{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:7px;min-height:104px;display:flex;flex-direction:column;gap:5px;
}
.day-cell.is-empty{background:transparent;border-color:transparent;min-height:0}
.day-cell.is-red .day-num{color:var(--red)}
.day-head{display:flex;align-items:baseline;gap:6px;justify-content:space-between}
.day-num{font-weight:700;font-size:14px}
.day-num .dow{font-size:11px;font-weight:600;color:var(--muted);margin-left:2px}
.day-cell.is-red .day-num .dow{color:var(--red)}
.holiday-name{font-size:10.5px;color:var(--red);line-height:1.25;text-align:right;flex:1}
.slot{
  border:1px solid var(--line);border-radius:7px;padding:4px 6px;font-size:12.5px;
  background:#fbfcfe;position:relative;cursor:pointer;
}
.slot:hover{border-color:var(--primary);background:var(--primary-soft)}
.slot.is-editing{border-color:#e2b96b;background:var(--amber-soft)}
.slot-head{display:flex;align-items:center;justify-content:space-between;gap:4px}
.slot-label{font-size:10.5px;color:var(--muted);font-weight:700}
.edit-tag{
  font-size:9.5px;font-weight:700;color:var(--amber);background:#fff;border:1px solid #e2b96b;
  border-radius:4px;padding:0 4px;line-height:1.5;white-space:nowrap;
}
.slot-body{display:flex;align-items:center;gap:5px;min-height:20px}
.state{font-weight:600;font-size:12.5px;word-break:break-all}
.state-assigned{color:var(--text)}
.state-undecided{color:var(--amber)}
.state-none{color:#aab4c4}
.state-closed{color:var(--red);font-weight:700}
.slot.is-closed .slot-label{color:var(--red)}
.note-mark{
  margin-left:auto;font-size:10px;color:var(--primary);background:var(--primary-soft);
  border:1px solid #bcd2ea;border-radius:4px;padding:0 4px;cursor:pointer;line-height:1.6;
}
.slot-menu-btn{
  position:absolute;right:2px;bottom:2px;border:0;background:transparent;color:var(--muted);
  cursor:pointer;font-size:13px;line-height:1;padding:2px 3px;border-radius:4px;display:none;
}
.slot:hover .slot-menu-btn{display:block}
.slot-menu-btn:hover{background:#e6ecf4}

/* ---------------- 表示切替（月間／詳細） ---------------- */
.view-toggle{display:inline-flex;background:#eef2f7;border-radius:9px;padding:3px;gap:3px}
.vt-btn{border:0;background:transparent;border-radius:7px;padding:6px 12px;cursor:pointer;color:var(--muted);font-weight:700;font-size:13px}
.vt-btn.is-active{background:var(--surface);color:var(--primary-dark);box-shadow:0 1px 3px rgba(20,32,52,.12)}

/* ---------------- 月間カレンダー（コンパクト） ---------------- */
.month-legend{display:flex;flex-wrap:wrap;align-items:center;gap:5px 14px;padding:9px 16px 0;font-size:12px;color:var(--muted)}
.month-legend .lg{display:inline-flex;align-items:center;gap:5px}
.lg-bar{width:4px;height:12px;border-radius:2px;display:inline-block;background:var(--line)}
.lg-bar.is-assigned{background:var(--primary)}
.lg-bar.is-undecided{background:#e2b96b}
.lg-bar.is-closed{background:var(--red)}
.lg-bar.is-none{background:#cfd6e2}
.lg-dot{width:6px;height:6px;border-radius:50%;display:inline-block;background:var(--primary)}

.calendar.is-month{grid-template-columns:repeat(7,1fr);gap:5px;padding:10px 16px 0}
.calendar.is-month .weekday-head{display:block;background:transparent;border:0;padding:2px 0;font-size:11.5px}
.mcell{
  background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:5px 5px 6px;
  min-height:66px;display:flex;flex-direction:column;gap:3px;position:relative;cursor:pointer;overflow:hidden;
}
.mcell:hover{border-color:var(--primary);background:#fbfdff}
.mcell.is-empty{background:transparent;border-color:transparent;cursor:default;min-height:0}
.mcell.is-editing{border-color:#e2b96b;background:var(--amber-soft)}
.mcell-top{display:flex;align-items:baseline;gap:3px;line-height:1.1}
.mnum{font-weight:700;font-size:12.5px}
.mdow{font-size:9.5px;font-weight:600;color:var(--muted)}
.mcell.is-red .mnum,.mcell.is-red .mdow{color:var(--red)}
.mline{
  font-size:10.5px;font-weight:600;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border-left:3px solid var(--line);padding-left:4px;
}
.mline.is-assigned{border-left-color:var(--primary);color:var(--text)}
.mline.is-undecided{border-left-color:#e2b96b;color:var(--amber)}
.mline.is-closed{border-left-color:var(--red);color:var(--red)}
.mline.is-none{border-left-color:#cfd6e2;color:#aab4c4}
.mnote{position:absolute;top:4px;right:4px;width:6px;height:6px;border-radius:50%;background:var(--primary)}

/* ---------------- 日別の詳細シート ---------------- */
.daysheet{display:flex;flex-direction:column;gap:10px}
.ds-row{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fbfcfe}
.ds-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.ds-label{font-weight:700;font-size:13px;color:var(--muted)}
.ds-body{font-size:15px}
.ds-note{font-size:13px;color:var(--muted);margin-top:5px;white-space:pre-wrap}
.ds-edit{margin-top:9px}
/* 定期の休診（表示オフ）は控えめに表示する */
.ds-row.is-regular-closed{background:#f7f9fc;border-style:dashed}
.ds-tag{font-size:11px;font-weight:700;color:var(--muted);background:#eef2f7;border-radius:999px;padding:2px 8px;white-space:nowrap}
.state-regular{color:#aab4c4;font-weight:600}
.slot.is-regular-closed{border-style:dashed;background:#fafbfd}
.slot.is-regular-closed .slot-label{color:#aab4c4}
.slot.is-regular-closed:hover{background:#f1f5fa}

/* ---------------- panels ---------------- */
.panel{margin:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.panel-title{font-size:15px;margin-bottom:10px;padding-left:9px;border-left:4px solid var(--primary);line-height:1.3}
.notes-table{width:100%;border-collapse:collapse;font-size:13.5px}
.notes-table th,.notes-table td{border-bottom:1px solid var(--line);padding:7px 8px;text-align:left;vertical-align:top}
.notes-table th{background:#f7f9fc;font-size:12px;color:var(--muted);white-space:nowrap}
.notes-table td.note-cell{white-space:pre-wrap}
.notes-empty{color:var(--muted);font-size:13.5px;padding:6px 2px}
.memo-input{min-height:180px;resize:vertical;line-height:1.7}
.memo-view{white-space:pre-wrap;line-height:1.8;font-size:14px;min-height:60px}
.admin-actions{display:flex;gap:10px;justify-content:flex-end;padding:6px 16px 40px;flex-wrap:wrap}

/* ---------------- modal ---------------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(18,26,38,.45);z-index:100;display:flex;align-items:center;justify-content:center;padding:16px}
.modal{
  background:var(--surface);border-radius:14px;box-shadow:var(--shadow);width:100%;max-width:560px;
  max-height:92dvh;overflow:auto;padding:20px;
}
.modal.modal-wide{max-width:720px}
.modal.modal-xwide{max-width:1040px}
.modal-title{font-size:17px;margin-bottom:4px}
.modal-sub{color:var(--muted);font-size:13px;margin:0 0 14px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
.modal-row{display:flex;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.modal-row>.field{flex:1;min-width:150px;margin-bottom:0}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14px;margin:12px 0}
.kv dt{color:var(--muted)}
.kv dd{margin:0;font-weight:600}
.warn-box{background:var(--amber-soft);border:1px solid #f0dcb4;color:var(--amber);border-radius:8px;padding:10px 12px;font-size:13.5px;margin:12px 0}
.danger-box{background:var(--red-soft);border:1px solid #efc9c9;color:var(--red);border-radius:8px;padding:10px 12px;font-size:13.5px;margin:12px 0}
.info-box{background:var(--primary-soft);border:1px solid #cfdff2;color:var(--primary-dark);border-radius:8px;padding:10px 12px;font-size:13.5px;margin:12px 0}

/* ---------------- staff / pattern tables ---------------- */
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th,.table td{border-bottom:1px solid var(--line);padding:8px;text-align:left;vertical-align:middle}
.table th{background:#f7f9fc;font-size:12px;color:var(--muted)}
.row-inactive{opacity:.55}
.tag{font-size:11px;padding:2px 8px;border-radius:999px;font-weight:700}
.tag-on{background:var(--green-soft);color:var(--green)}
.tag-off{background:#eef2f7;color:var(--muted)}
.pattern-grid{display:grid;grid-template-columns:88px 1fr 1fr;gap:8px;align-items:center}
.pattern-grid .hdr{font-size:12px;color:var(--muted);font-weight:700;text-align:center}
.pattern-cell{border:1px solid var(--line);border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:6px}
.pattern-cell select{font-size:13.5px;padding:6px 8px}
.pattern-wd{font-weight:700;text-align:center}
.pattern-wd.is-sun{color:var(--red)}

/* 曜日を横並びにした基本パターン表（列=日〜土 / 行=朝診・夜診） */
.pattern-hscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.pattern-table{width:100%;border-collapse:separate;border-spacing:6px;min-width:820px}
.pattern-table th.pt-wd{font-size:12.5px;font-weight:700;color:var(--muted);text-align:center;padding-bottom:2px}
.pattern-table th.pt-wd.is-sun{color:var(--red)}
.pattern-table th.pt-slot-h{font-size:12px;font-weight:700;color:var(--muted);text-align:right;white-space:nowrap;width:44px;padding-right:2px}
.pt-cell{vertical-align:top;background:#fbfcfe;border:1px solid var(--line);border-radius:8px;padding:6px}
.pt-cell.is-off{background:#f7f9fc}
.pt-cell select{width:100%;font-size:12px;padding:4px 6px;margin-bottom:4px}
.pt-cell select:last-child{margin-bottom:0}
.pt-cell select:disabled{opacity:.4}
.pt-cell select.pt-state{font-weight:700}
.pt-scroll-hint{display:none;font-size:12px;color:var(--muted);text-align:center;margin:2px 0 0}
@media (max-width:900px){ .pt-scroll-hint{display:block} }

/* ---------------- context menu / tooltip / toast ---------------- */
.context-menu{
  position:fixed;z-index:200;background:var(--surface);border:1px solid var(--line-strong);
  border-radius:9px;box-shadow:var(--shadow);padding:5px;min-width:180px;
}
.context-menu button{
  display:block;width:100%;text-align:left;border:0;background:transparent;padding:8px 11px;
  border-radius:6px;cursor:pointer;font-size:14px;
}
.context-menu button:hover{background:var(--primary-soft)}
.tooltip{
  position:fixed;z-index:210;background:#1d2530;color:#fff;padding:7px 10px;border-radius:8px;
  font-size:12.5px;max-width:260px;white-space:pre-wrap;line-height:1.5;box-shadow:var(--shadow);
}
.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:300;
  background:#1d2530;color:#fff;padding:10px 18px;border-radius:999px;font-size:13.5px;box-shadow:var(--shadow);
}
.toast.is-error{background:var(--red)}
.toast.is-ok{background:var(--green)}

/* ---------------- mobile ---------------- */
@media (max-width:760px){
  body{font-size:14.5px}
  .calendar{grid-template-columns:1fr;gap:7px;padding:10px 12px 0}
  .weekday-head{display:none}
  .day-cell.is-empty{display:none}
  .day-cell{min-height:0;padding:8px 10px}
  .day-head{padding-bottom:4px;border-bottom:1px dashed var(--line)}
  .day-slots{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .slot{font-size:13px;padding:6px 8px}
  .slot-menu-btn{display:block;font-size:15px;right:4px;bottom:4px}
  .panel,.month-alert{margin:12px 12px}
  .admin-actions{padding:6px 12px 40px}
  .admin-actions .btn{flex:1}
  .published-info{margin-left:0;width:100%}
  .modal{padding:16px}
  .pattern-grid{grid-template-columns:64px 1fr;gap:6px}
  .pattern-grid .hdr.pm-hdr{display:none}
  .notes-table thead{display:none}
  .notes-table tr{display:block;border-bottom:1px solid var(--line);padding:8px 0}
  .notes-table td{display:block;border:0;padding:1px 0}
  .notes-table td::before{content:attr(data-label) "：";color:var(--muted);font-size:11.5px}

  /* 月間カレンダーはスマホでも7列を保つ（詳細表示のみ縦1列リストにする） */
  .calendar.is-month{grid-template-columns:repeat(7,1fr);gap:4px;padding:8px 8px 0}
  .calendar.is-month .weekday-head{display:block;font-size:11px}
  .mcell{min-height:60px;padding:4px 4px 5px;border-radius:7px;gap:2px}
  .mnum{font-size:11.5px}
  .mdow{font-size:9px}
  .mline{font-size:9.5px;border-left-width:2px;padding-left:3px}
  .month-legend{padding:8px 12px 0;font-size:11.5px;gap:4px 10px}
  .vt-btn{padding:6px 10px;font-size:12.5px}
  .topbar{padding:8px 12px;gap:8px}
  .brand{font-size:15px}

  /* スマホではモーダルを下から出るシート状にして押しやすくする */
  .modal-backdrop{align-items:flex-end;padding:0}
  .modal{border-radius:16px 16px 0 0;max-height:88dvh;padding:18px 16px 24px}
  .modal.modal-wide{max-width:100%}
  .modal-actions .btn{flex:1}
}

/* ---------------- print (A4 横向き) ---------------- */
.print-root{display:none}
@page{size:A4 landscape;margin:10mm}
@media print{
  body{background:#fff;font-size:11pt}
  body>*{display:none !important}
  body>#print-root{display:block !important}
  .print-root{display:block !important;padding:0}
  .print-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid #000;padding-bottom:5px;margin-bottom:8px}
  .print-head h1{font-size:16pt;margin:0}
  .print-head .meta{font-size:9pt;text-align:right;line-height:1.5}
  .print-draft-flag{color:#c00;font-weight:700}
  table.print-cal{width:100%;border-collapse:collapse;table-layout:fixed}
  table.print-cal th,table.print-cal td{border:1px solid #666;padding:3px 4px;vertical-align:top;font-size:9pt}
  table.print-cal th{background:#eee;text-align:center;font-size:9.5pt}
  table.print-cal th.sun{color:#c00}
  table.print-cal td.empty{background:#fafafa}
  .pc-day{font-weight:700;font-size:10pt}
  .pc-day.sun{color:#c00}
  .pc-holiday{font-size:7.5pt;color:#c00}
  .pc-slot{margin-top:2px;line-height:1.35}
  .pc-slot .lbl{font-weight:700}
  .pc-slot .nm{font-weight:700}
  .pc-closed{color:#c00;font-weight:700}
  .pc-undecided{color:#8a5a00;font-weight:700}
  .pc-none{color:#555}
  .pc-note{display:block;font-size:7.5pt;color:#333;margin-top:1px}
  .print-section{margin-top:10px}
  .print-section h2{font-size:12pt;border-bottom:1px solid #000;padding-bottom:3px;margin:0 0 6px}
  table.print-notes{width:100%;border-collapse:collapse;font-size:9pt}
  table.print-notes th,table.print-notes td{border:1px solid #999;padding:3px 5px;text-align:left;vertical-align:top}
  table.print-notes th{background:#eee}
  table.print-notes td.note{white-space:pre-wrap}
  .print-memo{white-space:pre-wrap;font-size:10pt;line-height:1.6;border:1px solid #999;padding:8px;min-height:24px}
  .page-break{break-before:page;page-break-before:always}
  table.print-cal tr,table.print-notes tr,.print-memo{break-inside:avoid;page-break-inside:avoid}
}