/* 勤務状況 (public/overtime.js). Builds on muji.css (.mj-view, .mj-kpi, .mj-table, .mj-drawer); only what is its own. */

.ot-view .mj-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 900px) { .ot-view .mj-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ot-monthnav { display: flex; align-items: center; gap: var(--ui-sp-3); }
.ot-monthnav .mj-btn { min-width: 36px; font-size: 18px; line-height: 1; padding: 4px 10px; }
.ot-month { font-size: var(--ui-fs-lg, 18px); font-variant-numeric: tabular-nums; letter-spacing: .02em; min-width: 90px; text-align: center; }

/* The estimate is said where the numbers are — calm, not an alarm. */
.ot-note {
  margin: 0; padding: var(--ui-sp-3) var(--ui-sp-4);
  background: var(--ui-sunken); border: 1px solid var(--ui-border); border-left: 3px solid #5B7BD0;
  border-radius: var(--ui-r); color: var(--ui-text-2, var(--ui-text)); font-size: var(--ui-fs-sm); line-height: 1.65;
}

.ot-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--ui-fs-xs); }
.ot-view .mj-table td .mj-badge + .mj-badge { margin-left: 4px; }

.ot-sum { display: flex; flex-wrap: wrap; gap: var(--ui-sp-5); margin: var(--ui-sp-3) 0 var(--ui-sp-2); font-size: var(--ui-fs-sm); color: var(--ui-text-3); }
.ot-sum b { color: var(--ui-text); font-size: var(--ui-fs-md, 15px); font-variant-numeric: tabular-nums; }
.ot-hints { display: flex; flex-wrap: wrap; gap: 6px; }

/* One day = one 24-hour strip. Grey = standard hours, blue = outside, purple = 深夜. */
.ot-row { display: grid; grid-template-columns: 92px 1fr 64px; align-items: center; gap: var(--ui-sp-3); padding: 5px 0; border-bottom: 1px solid var(--ui-border); }
.ot-row-head { border-bottom: 0; padding-bottom: 0; }
.ot-date { font-size: var(--ui-fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ot-date small { color: var(--ui-risk); font-weight: 600; }
.ot-mins { text-align: right; font-size: var(--ui-fs-sm); font-variant-numeric: tabular-nums; font-weight: 600; cursor: help; }
.ot-strip { position: relative; height: 16px; border-radius: 4px; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / 24 - 1px), var(--ui-border) calc(100% / 24 - 1px), var(--ui-border) calc(100% / 24)); background-color: var(--ui-surface); border: 1px solid var(--ui-border); overflow: hidden; }
.ot-strip-scale { height: 14px; background: none; border: 0; overflow: visible; }
.ot-scale span { position: absolute; transform: translateX(-50%); font-size: 10px; color: var(--ui-text-4); top: 0; }
.ot-scale span:first-child { transform: none; }
.ot-scale span:last-child { transform: translateX(-100%); }
.ot-std { position: absolute; top: 0; bottom: 0; background: rgba(120, 130, 150, .22); }
.ot-burst { position: absolute; top: 2px; bottom: 2px; border-radius: 3px; background: #4F7BE0; box-shadow: 0 0 0 1px rgba(79, 123, 224, .35); }
.ot-burst.is-night { background: #8A5CD1; box-shadow: 0 0 0 1px rgba(138, 92, 209, .35); }

@media (max-width: 600px) { .ot-row { grid-template-columns: 70px 1fr 48px; gap: 6px; } }

/* Office (Osaka 9:00–18:00 / Tokyo 9:30–18:30): an office missing in Microsoft 365 is shown, not hidden. */
.ot-office-unset { color: var(--ui-risk); }
.ot-unset { display: block; margin-top: 6px; color: var(--ui-risk); font-weight: 600; }
.ot-partial { margin: 0; padding: var(--ui-sp-2) var(--ui-sp-4); border-radius: var(--ui-r); background: var(--ui-risk-bg); color: var(--ui-risk); font-size: var(--ui-fs-sm); font-weight: 600; }