/* Overtime Report (HR) view -- js/views/overtime.js.
   Native Hub view ported from the approved standalone prototype. Reuses the
   portal design tokens (navy, ashley-orange, table-border, font stack) and the
   shared .data-table / .ms-wrap / .csv-btn components; this file only adds the
   card row, the control bar spacing and the RYG status dot. No captions, no
   legends, no sub-labels -- big number + short label on the cards, clean grid. */

/* Loading / no-access state (same treatment as rsa_bonus .rb-empty). */
.ot-empty {
  padding: 40px; text-align: center; color: #6b7280;
  font-family: var(--font-stack); font-size: 14px;
}

/* -- Summary cards (mirror the RSA Bonus tile treatment) -- */
.ot-cards {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 14px; margin: 0 0 16px;
}
.ot-card {
  background: #fff; border: 1px solid var(--table-border);
  border-top: 3px solid var(--ashley-orange);
  border-radius: var(--radius); padding: 14px 16px;
  box-shadow: var(--shadow);
}
.ot-card-v {
  font-size: 26px; font-weight: 800; color: var(--navy);
  font-family: var(--font-stack); line-height: 1.1; white-space: nowrap;
}
.ot-card-l {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--navy); margin-top: 5px; font-weight: 700;
}
/* The lead card (In Overtime) is the alert metric -- navy stripe swaps to the
   danger tone and the value burns red so the eye lands on it first. */
.ot-card-alert { border-top-color: var(--danger-red); }
.ot-card-alert .ot-card-v { color: var(--danger-red); }

@media (max-width: 1100px) {
  .ot-cards { grid-template-columns: repeat(2, 1fr); }
}

/* -- Control bar (location filter + search + toggle + CSV) -- */
.ot-controls {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--table-border);
  border-radius: var(--radius); padding: 10px 14px; margin: 0 0 14px;
}
.ot-controls .ms-wrap .ms-trigger { min-width: 200px; }
.ot-search {
  padding: 7px 12px; font-size: 13px; font-family: var(--font-stack);
  border: 1px solid var(--table-border); border-radius: 6px;
  background: #fff; color: var(--navy); min-width: 220px; outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ot-search:focus { border-color: var(--primary-blue); box-shadow: 0 0 0 2px rgba(63,115,141,0.15); }
.ot-search::placeholder { color: #9ca3af; }
.ot-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-family: var(--font-stack); color: var(--navy);
  font-weight: 600; cursor: pointer; user-select: none;
}
.ot-toggle input { accent-color: var(--primary-blue); cursor: pointer; }
.ot-controls .csv-btn { margin-left: auto; }

/* -- Grid: the shared .data-table carries header/hover/typography.
   These rules only add the number alignment, the RYG dot column and the
   overtime / zero cell tones. -- */
.ot-table td.ot-num, .ot-table th.ot-num { text-align: right; font-variant-numeric: tabular-nums; }
.ot-table th.ot-num { text-align: right; }
.ot-table td.ot-hot { color: var(--danger-red); font-weight: 700; }
.ot-table td.ot-zero { color: #c2c8d1; }
.ot-table td.ot-pay { color: #c2c8d1; }
.ot-table td.ot-loc { color: #6b7280; }

.ot-table td.ot-stat, .ot-table th.ot-stat { width: 46px; text-align: center; }
.ot-dot {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  vertical-align: middle;
}
.ot-dot.red { background: var(--danger-red); }
.ot-dot.yellow { background: var(--ashley-orange); }
.ot-dot.green { background: var(--success-green); }

/* Red rows carry a thin danger stripe on the status cell -- the same "this
   one needs attention" language the tree/RSA grids use. */
.ot-table tr.red-row td.ot-stat { box-shadow: inset 3px 0 var(--danger-red); }

/* Terminated: grouped to the bottom, muted so they read as context, not
   active headcount. */
.ot-table tr.ot-term td { color: #9aa4b2; }
.ot-table tr.ot-term td.ot-loc { font-style: italic; }
.ot-table tr.ot-term td.ot-hot { color: #b98a8a; }

.ot-table th .sort-arrow { color: #b3bac4; }
.ot-table th.sorted .sort-arrow { color: var(--ashley-orange); opacity: 1; }