/* ヘッダーは通常フロー */
    .gs-topbar {
      position: static !important;
      backdrop-filter: none !important;
    }

    .ok-wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px 40px; }

    /* v6.2.6: 2 カラム化 (PC: 左=メイン / 右=履歴 380px / SP: 1 カラム) */
    @media (min-width: 1200px) {
      .ok-wrap { max-width: 1500px; }
      .ok-layout { display: grid; grid-template-columns: 1fr 380px; gap: 20px; align-items: start; }
      .ok-main   { min-width: 0; }
      .ok-history-card {
        position: sticky;
        top: 20px;
      }
    }
    .ok-history-card {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: 20px;
      box-shadow: var(--shadow-1);
      overflow: hidden;
      margin-top: 14px;
    }
    @media (min-width: 1200px) {
      .ok-history-card { margin-top: 0; }
    }
    .ok-history-head {
      padding: 14px 20px;
      font-weight: 600;
      font-size: var(--text-base, 16px);
      border-bottom: 1px solid var(--color-divider);
      background: var(--color-surface);
    }
    .ok-history-body {
      max-height: calc(100vh - 200px);
      overflow-y: auto;
    }
    .ok-history-day {
      position: sticky;
      top: 0;
      background: var(--color-surface-2);
      padding: 6px 20px;
      font-size: 11px;
      font-weight: 600;
      color: var(--color-text-muted);
      z-index: 1;
      border-top: 1px solid var(--color-divider);
      border-bottom: 1px solid var(--color-divider);
    }
    .ok-history-item {
      padding: 10px 20px;
      border-bottom: 1px solid var(--color-divider);
      font-size: 13px;
    }
    .ok-history-item:last-child { border-bottom: none; }
    .ok-history-row1 {
      display: flex; align-items: center; gap: 8px;
      white-space: normal;
    }
    .ok-history-dot {
      width: 8px; height: 8px; border-radius: 50%;
      flex-shrink: 0; display: inline-block;
    }
    .ok-history-time {
      font-size: 11px; color: var(--color-text-muted);
      font-variant-numeric: tabular-nums; min-width: 34px;
      flex-shrink: 0;
    }
    .ok-history-text { font-size: 13px; color: var(--color-text); line-height: 1.4; }
    .ok-history-sub {
      margin-top: 3px; margin-left: 20px;
      font-size: 12px; color: var(--color-text-faint);
    }
    .ok-history-ng-reason {
      margin-top: 4px; margin-left: 20px;
      padding: 4px 8px;
      background: rgba(197,34,31,.08);
      border-radius: 6px;
      font-size: 12px; color: #c5221f;
    }
    .ok-history-empty {
      padding: 32px 20px; text-align: center;
      color: var(--color-text-muted); font-size: 13px;
    }

    /* DESIGN.md 準拠: コントロール行の全要素を 44px ピル型に統一
       基準: TOPページ .k-pill-btn / .k-primary-btn (height:44px, radius:9999px, font-size:var(--text-sm)) */
    .ctrl-row > *,
    .ctrl-row .ok-filter-group > * {
      height: 44px !important;
      min-height: 44px !important;
      box-sizing: border-box !important;
      font-size: var(--text-sm) !important;
      line-height: 1 !important;
    }
    /* ピル内部の select / input も外枠に追従 */
    .ctrl-row select,
    .ctrl-row input[type="date"] {
      height: 100% !important;
      line-height: 1 !important;
      font-size: var(--text-sm) !important;
    }

    /* フィルタータブ (DESIGN.md §2-4: ピルボタンと同じ形状・アクティブは薄青) */
    .ok-tab {
      height: 44px;
      padding: 0 18px;
      border-radius: 9999px !important;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      box-shadow: var(--shadow-1);
      color: var(--color-text-muted);
      font-size: var(--text-sm);
      font-weight: 500;
      cursor: pointer;
      font-family: inherit;
      transition: transform 180ms, box-shadow 180ms;
    }
    .ok-tab:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow-2);
    }
    .ok-tab.active {
      background: #e8f0fe;
      color: #1a73e8;
      border-color: #c5d8f6;
      font-weight: 600;
    }
    /* フィルタータブ群 (PC は右寄せ、SP は折り返し左寄せ) */
    .ok-filter-group {
      margin-left: auto;
      display: flex;
      gap: 8px;
      align-items: center;
    }
    @media (max-width: 768px) {
      .ok-filter-group {
        margin-left: 0;
        width: 100%;
      }
      /* SP は 36px に縮小 */
      .ctrl-row > *,
      .ctrl-row .ok-filter-group > * {
        height: 36px !important;
        min-height: 36px !important;
        font-size: 13px !important;
        padding: 0 12px !important;
      }
    }
    .ok-tab-badge {
      height: 17px;
      padding: 0 6px;
      border-radius: 9999px;
      font-size: 10px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
    }
    .ok-tab-badge.ng      { background: rgba(197,34,31,.10);  color: #c5221f; }
    .ok-tab-badge.pending { background: rgba(242,153,0,.12);  color: #b06000; }
    .ok-tab-badge.done    { background: rgba(24,128,56,.10);  color: #188038; }

    /* 社員カード */
    .ok-staff-card {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: 20px;
      margin-bottom: 10px;
      overflow: hidden;
      box-shadow: var(--shadow-1);
    }
    .ok-staff-head {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 9px 16px;
      border-bottom: 1px solid var(--color-divider);
    }
    .ok-staff-name {
      font-size: 16px;
      font-weight: 700;
      flex: 1;
      color: var(--color-text);
    }
    .ok-staff-prog-wrap {
      width: 100px;
      height: 5px;
      background: var(--color-surface-3, #eef3fd);
      border-radius: 9999px;
      overflow: hidden;
    }
    .ok-staff-prog { height: 100%; border-radius: 9999px; }
    .ok-staff-prog.full    { background: #188038; }
    .ok-staff-prog.partial { background: #f29900; }
    .ok-staff-prog.none    { background: rgba(60,64,67,.14); }
    .ok-staff-prog-label {
      font-size: 12px;
      color: var(--color-text-muted);
      white-space: nowrap;
      min-width: 28px;
      text-align: right;
    }

    /* テーブル */
    .ok-assign-table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
    }
    .ok-assign-table th {
      font-size: 13px;
      font-weight: 600;
      color: var(--color-text-muted);
      padding: 5px 16px;
      text-align: left;
      background: var(--color-surface-2, #f8fafd);
      border-bottom: 1px solid var(--color-border);
      letter-spacing: .03em;
    }
    .ok-assign-table td {
      padding: 6px 16px;
      border-bottom: 0.5px solid var(--color-divider);
      font-size: 14px;
      vertical-align: middle;
    }
    .ok-assign-table tr:last-child td { border-bottom: none; }
    .ok-assign-table tr:hover td { background: var(--color-surface-2); }
    /* 確認列 (3列目) + 代理列 (最終列) を中央寄せ */
    .ok-assign-table th:nth-child(3),
    .ok-assign-table td:nth-child(3),
    .ok-assign-table th:last-child,
    .ok-assign-table td:last-child {
      text-align: center;
    }

    /* 日付セル */
    .ok-date-cell { white-space: nowrap; font-size: 14px; font-weight: 500; }
    .ok-date-cell.sat-row { color: #1a73e8; }
    .ok-date-cell.sun-row { color: #c5221f; }
    .ok-dow { font-size: 11px; margin-left: 2px; font-weight: 400; }

    /* 現場セル */
    .ok-site-name  { font-weight: 500; color: var(--color-text); margin-bottom: 2px; font-size: 14px; }
    .ok-site-row2  { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .ok-site-client{ font-size: 12px; color: var(--color-text-faint, #80868b); }
    .ok-site-time  { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }

    /* OK ステータスバッジ */
    .ok-status-badge {
      height: 20px; padding: 0 8px;
      border-radius: 9999px;
      font-size: 11px; font-weight: 600;
      display: inline-flex; align-items: center; gap: 3px;
      white-space: nowrap;
    }
    .ok-status-badge.ok      { background: rgba(24,128,56,.10);  color: #188038; }
    .ok-status-badge.ng      { background: rgba(197,34,31,.10);  color: #c5221f; }
    .ok-status-badge.pending { background: rgba(242,153,0,.12);  color: #b06000; }
    .ok-status-badge.unasked { background: var(--color-surface-3,#eef3fd); color: var(--color-text-muted); }

    .ng-reason-text { font-size: 11px; color: #c5221f; margin-top: 2px; }

    .row-action-btn {
      padding: 3px 10px; border-radius: 9999px; border: 1px solid var(--color-border);
      background: var(--color-surface); cursor: pointer; font-size: 11px; font-family: inherit;
      margin-left: 4px;
    }
    .row-action-btn:hover { background: rgba(26,115,232,.06); }

    /* 代理ボタン群: OK / NG / 再依頼 (DESIGN.md 準拠・translucent chip 形式) */
    .proxy-btns {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      flex-wrap: nowrap;
    }
    .proxy-btn {
      height: 26px;
      width: 50px;
      border-radius: 9999px !important;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 400;
      font-family: inherit;
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
      border: 1px solid;
      transition: transform var(--tr, 180ms), box-shadow var(--tr, 180ms);
    }
    .proxy-btn.resend { width: 68px; }
    .proxy-btn.ok     { background: rgba(24,128,56,.10);  border-color: rgba(24,128,56,.25);  color: #188038; }
    .proxy-btn.ng     { background: rgba(197,34,31,.10);  border-color: rgba(197,34,31,.25);  color: #c5221f; }
    .proxy-btn.resend { background: rgba(26,115,232,.10); border-color: rgba(26,115,232,.25); color: #1a73e8; }
    .proxy-btn:not(.disabled):hover {
      transform: translateY(-1px);
      box-shadow: 0 1px 2px rgba(60,64,67,.12), 0 1px 3px 1px rgba(60,64,67,.08);
    }
    .proxy-btn.disabled {
      opacity: 0.6;
      cursor: not-allowed;
      pointer-events: none;
    }

    .empty-state {
      padding: 32px; text-align: center; color: var(--color-text-muted);
      font-size: 14px; background: var(--color-surface-2); border-radius: 16px;
    }

    @media (max-width: 768px) {
      .ok-wrap { padding: 0 12px 32px; }
      .ok-staff-head { flex-wrap: wrap; }

      /* コントロール行は自動的に flex-wrap: wrap で 2 行折り返し */
      .ctrl-row { gap: 6px !important; }

      /* 社員名を少し小さく */
      .ok-staff-name { font-size: 14px; }

      /* テーブルのセル padding 縮小 & フォント縮小 */
      .ok-assign-table th,
      .ok-assign-table td { padding: 5px 10px; }
      .ok-assign-table td { font-size: 12px; }
      .ok-date-cell { font-size: 12px; }
      .ok-site-name { font-size: 12px; }
      .ok-site-client,
      .ok-site-time { font-size: 10px; }

      /* 現場列 2 段目: 得意先名と時間を横並び */
      .ok-site-row2 {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 4px;
        flex-wrap: nowrap;
      }

      /* テーブル列幅: 日付 72 / 現場 auto / 確認 56 */
      .ok-assign-table colgroup col:nth-child(1) { width: 72px !important; }
      .ok-assign-table colgroup col:nth-child(3) { width: 56px !important; }
      /* 代理列は 3 ボタン幅に合わせ、狭い画面では折り返し許容 */
      .ok-assign-table colgroup col:nth-child(4) { width: 180px !important; }
      .proxy-btn { width: 44px; font-size: 10px; }
      .proxy-btn.resend { width: 58px; }
      .proxy-btns { gap: 3px; flex-wrap: wrap; }

      /* 確認列のバッジや再依頼/修正リンクがはみ出ないよう縮小 */
      .ok-status-badge { padding: 0 6px; font-size: 10px; }
      .row-action-btn { padding: 2px 6px; font-size: 10px; margin-left: 2px; }
    }