/* ── Modal ── */
    .modal-backdrop {
      position: fixed; inset: 0; background: rgba(0,0,0,0.3);
      display: none; align-items: center; justify-content: center; z-index: 100;
    }
    .modal-backdrop.open { display: flex; }
    .modal {
      background: var(--surface); border-radius: 10px; padding: 24px;
      width: 320px; box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    }
    .modal h3 { font-size:var(--fs-lg); margin-bottom: 8px; }
    .modal-hint { font-size:var(--fs-sm); color: var(--muted); margin-bottom: 14px; line-height: 1.5; }
    .modal input {
      width: 100%; padding: 9px 12px; border: 1px solid var(--border);
      border-radius: 6px; font-size:var(--fs-lg); outline: none; font-family: inherit;
      margin-bottom: 12px;
    }
    .modal input:focus { border-color: var(--green); }
    .modal-btns { display: flex; gap: 8px; justify-content: flex-end; }
    .btn-cancel {
      padding: 8px 16px; border: 1px solid var(--border); background: transparent;
      border-radius: 6px; cursor: pointer; font-size:var(--fs-base); font-family: inherit;
    }
    .btn-green {
      padding: 8px 16px; background: var(--green); color: #fff;
      border: none; border-radius: 6px; cursor: pointer; font-size:var(--fs-base); font-family: inherit;
    }
    .btn-green:hover { background: var(--green-hover); }

    /* ── Toast ── */
    .toast {
      position: fixed; bottom: 20px; left: 50%;
      transform: translateX(-50%) translateY(60px);
      background: #1a1a1a; color: #fff; padding: 9px 20px;
      border-radius: 6px; font-size:var(--fs-base); opacity: 0;
      transition: transform 0.2s, opacity 0.2s;
      pointer-events: none; z-index: 200;
    }
    .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

    /* ── Shift badge (summary / staffing) ── */
    .shift-badge {
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: 4px; padding: 1px 5px; min-width: 22px;
      line-height: 1.25; font-size: var(--fs-base); font-weight: 700;
      white-space: nowrap; text-decoration: none; flex-shrink: 0;
    }
    .shift-badge.early { color: #38512f; background: #e8f1e6; }
    .shift-badge.late  { color: #31558c; background: #e7edf8; }
    .shift-badge.pt    { color: #7a438b; background: #f0e5f5; }
    .emp-name-wrap { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
    .emp-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .emp-no { color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; flex-shrink: 0; }

    /* ── Sub-tab bar (inside scheduling / employee views) ── */
    .sub-tab-bar {
      display: flex;
      align-items: center;
      min-height: var(--bar-h);
      border-bottom: 1px solid var(--border);
      padding: 0 16px;
      background: var(--surface);
      flex-shrink: 0;
    }
    .view-headbar { display:flex; align-items:center; min-height:var(--bar-h); border-bottom:1px solid var(--border); padding:0 16px; background:var(--surface); color:var(--muted); font-size:var(--fs-base); font-weight:600; flex-shrink:0; }
    .sub-tab {
      padding: 8px 14px;
      font-size:var(--fs-base);
      border: none;
      border-bottom: 2px solid transparent;
      background: transparent;
      cursor: pointer;
      color: var(--muted);
      margin-bottom: -1px;
      font-family: inherit;
      transition: color 0.1s, border-color 0.1s;
    }
    .sub-tab:hover { color: var(--green); }
    .sub-tab.active { color: var(--green); border-bottom-color: var(--green); font-weight: 600; }
    .sub-panel { flex: 1; overflow: hidden; display: none; flex-direction: column; }
    .sub-panel.active { display: flex; }

    /* ── Shared delete confirmation dialog ── */
    .confirm-dialog-backdrop {
      position: fixed; inset: 0; z-index: 300;
      display: flex; align-items: center; justify-content: center;
      padding: 16px; box-sizing: border-box;
      background: rgba(35,34,30,.45);
    }
    .confirm-dialog {
      width: min(420px, 100%); box-sizing: border-box;
      padding: 20px; border: 1px solid var(--border); border-radius: 10px;
      background: var(--surface); box-shadow: 0 16px 48px rgba(0,0,0,.22);
    }
    .confirm-dialog:focus { outline: none; }
    .confirm-dialog-title {
      display: block; color: var(--text); font-size:var(--fs-lg); line-height: 1.35;
    }
    .confirm-dialog-message {
      margin-top: 8px; color: var(--muted); font-size:var(--fs-base); line-height: 1.5;
      overflow-wrap: anywhere; white-space: pre-wrap;
    }
    .confirm-dialog-actions {
      display: flex; align-items: center; justify-content: flex-end;
      gap: 8px; margin-top: 18px; flex-wrap: wrap;
    }
    .confirm-dialog-button {
      flex: 0 0 auto; min-width: 64px; padding: 7px 12px;
      border-radius: 5px; cursor: pointer; font: inherit; font-size:var(--fs-base);
      white-space: nowrap;
    }
    .confirm-dialog-cancel {
      border: 1px solid var(--border); background: var(--surface); color: var(--text);
    }
    .confirm-dialog-cancel:hover { background: var(--bg); }
    .confirm-dialog-confirm {
      border: 1px solid var(--green); background: var(--green); color: #fff;
    }
    .confirm-dialog-confirm:hover { filter: brightness(.95); }
    .confirm-dialog-confirm.is-danger { border-color: #b03030; background: #b03030; }

    .mobile-scroll-hint {
      display: none;
      color: var(--muted);
      font-size: var(--fs-xs);
      line-height: 1.4;
    }