/* ── Matrix ── */
    .matrix-wrap {
      flex: 1;
      overflow: auto;
    }

    .matrix {
      border-collapse: collapse;
      white-space: nowrap;
      min-width: 100%;
    }

    .matrix th {
      position: sticky;
      top: 0;
      background: #edeae4;
      border: 1px solid var(--border);
      z-index: 2;
      padding: 5px 2px;
      text-align: center;
      font-size:var(--fs-date);
      font-weight: 700;
      color: var(--muted);
      user-select: none;
    }

    .matrix th.wknd { color: var(--red); background: #f5ede8; }
    .matrix th.today-th { background: var(--today-bg); color: var(--green); }
    .matrix-date { font-size:var(--fs-date); }
    .matrix-weekday { font-size:var(--fs-weekday); font-weight:400; }

    .th-emp {
      position: sticky !important;
      left: 0;
      z-index: 4 !important;
      min-width: 150px;
      width: 150px;
      width: 102px;
      text-align: left !important;
      padding-left: 10px !important;
      font-size:var(--fs-sm);
    }

    .th-total {
      position: sticky !important;
      right: 0;
      z-index: 3 !important;
      min-width: 48px;
      background: #e4e0d8 !important;
      font-size:var(--fs-sm);
    }

    .matrix td {
      border: 1px solid var(--border);
      height: 36px;
    }

    .emp-cell {
      position: sticky;
      left: 0;
      background: var(--surface);
      z-index: 1;
      padding: 0 10px;
      font-size:var(--fs-base);
      font-weight: 600;
      min-width: 150px;
      width: 150px;
      white-space: nowrap;
    }

    .matrix tr:hover .emp-cell { background: #f8f6f2; }

    .mcell {
      width: 36px;
      min-width: 36px;
      height: 36px;
      cursor: pointer;
      text-align: center;
      transition: background 0.08s;
      position: relative;
    }
    .mcell:hover { background: var(--green-light) !important; }
    .mcell.on { background: var(--green) !important; }
    .mcell.on:hover { background: var(--green-hover) !important; }
    .mcell.wknd { background: var(--weekend-bg); }
    .mcell.today-col { background: var(--today-col); }

    /* ── Right-click leave menu ── */
    .leave-menu {
      position: fixed;
      z-index: 250;
      display: flex;
      flex-direction: column;
      gap: 2px;
      width: max-content;
      min-width: 172px;
      max-width: min(240px, calc(100vw - 16px));
      padding: 6px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 7px;
      box-shadow: 0 8px 24px rgba(35, 34, 30, .2);
    }
    .leave-menu-title {
      padding: 4px 8px 5px;
      color: var(--muted);
      font-size: var(--fs-xs);
      font-weight: 700;
      white-space: nowrap;
    }
    .leave-menu-option, .leave-menu-clear {
      display: flex;
      align-items: center;
      gap: 7px;
      width: 100%;
      min-width: 0;
      border: 1px solid transparent;
      border-radius: 4px;
      padding: 6px 8px;
      background: transparent;
      color: var(--text);
      cursor: pointer;
      font: inherit;
      font-size: var(--fs-sm);
      line-height: 1.35;
      text-align: left;
      white-space: normal;
      overflow-wrap: anywhere;
    }
    .leave-menu-option:hover, .leave-menu-option.selected { background: var(--green-light); border-color: #c8ddc5; }
    .leave-menu-option.selected { font-weight: 700; }
    .leave-menu-color {
      width: 12px;
      height: 12px;
      flex: 0 0 12px;
      border: 1px solid var(--border);
      border-radius: 3px;
      background: #b8b5ad;
    }
    .leave-menu-label { min-width: 0; }
    .leave-menu-divider { height: 1px; margin: 3px 2px; background: var(--border); }
    .leave-menu-clear { color: var(--muted); }
    .leave-menu-clear:hover { background: #f7eeee; color: var(--red); }

    .total-cell {
      position: sticky;
      right: 0;
      background: var(--bg);
      text-align: center;
      font-weight: 800;
      font-size:var(--fs-base);
      color: var(--green);
      border-left: 2px solid var(--border) !important;
    }
    .total-cell.zero { color: #ccc; font-weight: 400; }

    /* ── Copy / Paste ── */
    .emp-cell { display: flex; align-items: center; justify-content: space-between; gap: 6px; }

    .copy-btn {
      opacity: 0;
      flex-shrink: 0;
      width: 22px; height: 22px;
      border: 1px solid var(--border);
      background: var(--surface);
      border-radius: 4px;
      cursor: pointer;
      font-size:var(--fs-sm);
      color: var(--muted);
      display: flex; align-items: center; justify-content: center;
      transition: opacity 0.1s, background 0.1s;
      padding: 0;
    }
    .matrix tr:hover .copy-btn { opacity: 1; }
    .copy-btn:hover { background: var(--green-light); color: var(--green); border-color: var(--green); }

    .emp-cell.copied { background: #fff8e1 !important; cursor: default; }
    .emp-cell.copied .copy-btn { opacity: 1; background: #f59e0b; color: #fff; border-color: #f59e0b; }

    .emp-cell.paste-target { cursor: pointer; }
    .emp-cell.paste-target:hover { background: #e8f0e6 !important; }
    .emp-cell.paste-target .copy-btn { opacity: 0 !important; }

    /* Clipboard bar */
    .clip-bar {
      display: none;
      align-items: center;
      gap: 12px;
      padding: 10px 16px;
      background: #1a1a1a;
      color: #fff;
      font-size:var(--fs-base);
      flex-shrink: 0;
    }
    .clip-bar.open { display: flex; }
    .clip-bar-msg { flex: 1; }
    .clip-bar-msg strong { color: #fbbf24; }
    .clip-cancel {
      padding: 5px 12px; border: 1px solid #555; background: transparent;
      color: #fff; border-radius: 4px; cursor: pointer; font-size:var(--fs-sm);
      font-family: inherit; transition: background 0.1s;
    }
    .clip-cancel:hover { background: #333; }

    /* ── Legend ── */
    .legend {
      padding: 8px 16px;
      border-top: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 16px;
      font-size:var(--fs-sm);
      color: var(--muted);
      background: var(--surface);
      flex-shrink: 0;
    }
    .legend-item { display: flex; align-items: center; gap: 6px; }
    .legend-box {
      width: 18px; height: 18px; border-radius: 3px; border: 1px solid var(--border);
    }
    .legend-box.on { background: var(--green); border-color: var(--green); }
    .legend-box.off { background: var(--surface); }

    /* ── Calendar ── */
    .calendar-view-headbar { justify-content:space-between; gap:12px; }
    .calendar-name-tabs { display:inline-flex; align-items:center; flex:0 0 auto; border:1px solid var(--border); border-radius:6px; overflow:hidden; background:var(--surface); }
    .calendar-name-tab { min-height:var(--ctl-h-sm); padding:4px 10px; border:0; border-radius:0; background:transparent; color:var(--muted); cursor:pointer; font:inherit; font-size:var(--fs-sm); white-space:nowrap; }
    .calendar-name-tab + .calendar-name-tab { border-left:1px solid var(--border); }
    .calendar-name-tab:hover { color:var(--green); background:var(--green-light); }
    .calendar-name-tab[aria-selected="true"] { background:var(--green); color:#fff; }
    .calendar-name-tab:focus-visible { position:relative; z-index:1; outline:2px solid var(--green); outline-offset:-2px; }

    .cal-wrap { max-width:var(--content-max); margin:0 auto; width:100%; min-width:0; box-sizing:border-box; flex: 1; overflow-y: auto; padding: 16px; background: #f7f6f2; }

    .cal-grid {
      display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); min-width:0;
      border: 1px solid #d5d2ca; border-radius: 10px;
      overflow: hidden; background: #d5d2ca; gap: 1px;
      box-shadow: 0 2px 8px rgba(53, 52, 45, 0.06);
    }
    .dow {
      background: #e8e6df; text-align: center; padding: 9px 4px;
      font-size:var(--fs-weekday); font-weight: 700; letter-spacing: .08em; color: #4b4a44;
    }
    .dow.wknd { background: #f8e9e6; color: var(--red); }
    .cell {
      background: var(--surface); min-width:0; min-height: 108px; padding: 8px; cursor: default;
      transition: background 0.1s, box-shadow 0.1s;
    }
    .cell-clickable { cursor: pointer; }
    .cell:hover { background: #f5faf4; }
    .cell-clickable:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
    .cell.empty { background: #f0efeb; cursor: default; pointer-events: none; }
    .cell.wknd { background: #fff9f7; }
    .cell.today { background: #fffbea; box-shadow: inset 0 0 0 2px #d5ab2f; }
    .cell-top { display: flex; align-items: center; gap: 6px; min-width:0; margin-bottom: 8px; }
    .cell-day {
      width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
      border-radius: 6px; background: #f2f1ed; color: #3f3e39; font-size:var(--fs-date); font-weight: 800;
    }
    .cell.wknd .cell-day { color: var(--red); background: #fff0ec; }
    .cell.today .cell-day {
      background: var(--green); color: #fff;
      width: 26px; height: 26px; border-radius: 7px; font-size:var(--fs-date);
    }
    .cell-count {
      font-size:var(--fs-xs); font-weight: 800; background: #eef5eb; color: var(--green);
      border: 1px solid #c8ddc5; border-radius: 999px; padding: 2px 7px;
    }
    .cell-names { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-content: start; gap: 4px; min-width:0; }
    .name-tag {
      display: flex; align-items: center; justify-content:center; width:100%; min-width:0; max-width: 100%; overflow-wrap:anywhere;
      text-align:center; font-size:var(--fs-xs); line-height: 1.2; font-weight: 600;
      background: #f4f8f3; color: #29422c;
      border: 1px solid #d5e5d3; border-left: 3px solid var(--leave-color, #4a8c42);
      border-radius: 4px; padding: 3px 2px;
    }
    .name-tag.shift-early { color:#38512f; background:#e8f1e6; border-color:#d5e5d3; border-left-color:#4a8c42; }
    .name-tag.shift-late { color:#31558c; background:#e7edf8; border-color:#d2ddef; border-left-color:#3a5a8c; }
    .name-tag.shift-pt { color:#7a438b; background:#f0e5f5; border-color:#dfcde7; border-left-color:#9b4f96; }
    .name-tag.shift-unknown { color:#4b4a44; background:#f3f1ed; border-color:#dedbd3; border-left-color:#9a978e; }

    /* ── Summary ── */
    .sum-wrap { max-width:var(--content-max); margin:0 auto; width:100%; flex: 1; overflow-y: auto; padding: 16px; }
    .sum-table {
      width: 100%; border-collapse: collapse; background: var(--surface);
      border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
    }
    .sum-table th {
      background: #eeebe6; padding: 9px 16px; text-align: left;
      font-size:var(--fs-sm); font-weight: 700; color: var(--muted); border-bottom: 1px solid var(--border);
    }
    .sum-table td { padding: 9px 16px; font-size:var(--fs-base); border-bottom: 1px solid #f0ece6; vertical-align: top; }
    .sum-table tr:last-child td { border-bottom: none; }
    .sum-table tr:hover td { background: var(--bg); }
    .s-count { font-weight: 800; font-size:var(--fs-xl); color: var(--green); }
    .s-days { color: var(--muted); line-height: 2; }
    .s-day-date { font-size:var(--fs-date); }
    .s-day-weekday { font-size:var(--fs-weekday); }

    /* ── Staffing ── */
    .staffing-wrap { max-width:var(--content-max); margin:0 auto; width:100%; flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }

    .day-strip-wrap {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 8px; padding: 10px 12px; overflow-x: auto;
    }
    .day-strip { display: flex; gap: 4px; min-width: max-content; }

    .day-pill {
      flex-shrink: 0; width: 38px; height: 42px; border-radius: 6px;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      cursor: pointer; border: 1px solid transparent; font-size:var(--fs-date); font-weight: 700;
      line-height: 1.2; transition: all 0.12s; color: var(--text); background: transparent;
      font-family: inherit;
    }
    .day-pill:hover { background: var(--green-light); }
    .day-pill.active { background: var(--green); color: #fff; }
    .day-pill.wknd { color: var(--red); }
    .day-pill.active.wknd { background: var(--red); color: #fff; }
    .day-pill .pill-day { font-size:var(--fs-date); }
    .day-pill .pill-dow { font-size:var(--fs-weekday); font-weight: 400; margin-top: 1px; opacity: 0.75; }
    .day-pill.active .pill-dow { opacity: 0.85; }

    .staffing-date-label {
      text-align: center; font-weight: 700; color: var(--muted);
      margin-bottom: 4px;
    }
    .staffing-date-value { font-size:var(--fs-date); }
    .staffing-weekday { font-size:var(--fs-weekday); }

    .staffing-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; flex: 1; min-height: 0; }

    .staffing-col {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 8px; overflow: hidden; display: flex; flex-direction: column;
    }
    .staffing-col-head {
      padding: 12px 16px; display: flex; align-items: center; gap: 10px;
      border-bottom: 1px solid var(--border); flex-shrink: 0;
    }
    .off-head { background: #fef2f2; }
    .work-head { background: #f0fdf4; }
    .staffing-col-title { font-size:var(--fs-lg); font-weight: 700; flex: 1; }
    .off-head .staffing-col-title { color: #b03030; }
    .work-head .staffing-col-title { color: var(--green); }
    .staffing-badge { font-weight: 800; padding: 2px 12px; border-radius: 10px; font-size:var(--fs-base); }
    .off-head .staffing-badge { background: #fee2e2; color: #b03030; }
    .work-head .staffing-badge { background: #d1fae5; color: var(--green); }
    .staffing-emp-list { overflow-y: auto; flex: 1; }
    .staffing-emp {
      display: flex; align-items: center; gap: 10px;
      padding: 9px 16px; font-size:var(--fs-base); border-bottom: 1px solid #f5f2ed;
    }
    .staffing-emp:last-child { border-bottom: none; }
    .staffing-emp:hover { background: var(--bg); }
    .emp-avatar {
      width: 30px; height: 30px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size:var(--fs-base); font-weight: 700; flex-shrink: 0;
    }
    .off-avatar { background: #fee2e2; color: #b03030; }
    .work-avatar { background: #d1fae5; color: var(--green); }
    .staffing-empty { text-align: center; padding: 24px; color: var(--muted); font-size:var(--fs-base); }

    /* ── Cal Legend ── */
    .cal-legend { display:flex; gap:10px; flex-wrap:wrap; padding:6px 14px 8px; font-size:var(--fs-xs); align-items:center; border-top:1px solid var(--border); background:var(--surface); }
    .cal-legend-item { display:inline-flex; align-items:center; gap:3px; color:#555; }
    .cal-legend-dot { width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0; }

    /* ── Staffing Legend ── */
    .staffing-legend { display:flex; gap:10px; flex-wrap:wrap; padding:4px 12px 8px; font-size:var(--fs-xs); align-items:center; border-bottom:1px solid var(--border); }

    /* ── Matrix pending-draft ── */
    .matrix-save-bar { display: flex; align-items: center; gap: 8px; margin-left: auto; padding: 0 0 0 12px; background: transparent; border: none; font-size:var(--fs-base); flex-shrink: 0; }
    .matrix-save-count { font-weight: 600; color: #c57a00; flex: 0 0 auto; white-space: nowrap; }
    .matrix-save-bar button:disabled { opacity:.5; cursor:not-allowed; }
    .mcell.pending-change { background: #fff8e1; outline: 2px solid #f5a623; outline-offset: -2px; }
    .mcell.on.pending-change { outline: 2px solid #f5a623; outline-offset: -2px; }
    .legend-box.pending-change { background: #f5a623; border: 1.5px solid #c57a00; }