/* inc/css/app.css
   New CSS bucket for add-ons so we don't clutter header.php / index.php.
*/

/* --- App Accent: green instead of Bootstrap warning yellow --- */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"]{
  --app-accent:#198754;
  --app-accent-rgb:25,135,84;
  --app-accent-hover:color-mix(in srgb, var(--app-accent) 88%, #000);
  --app-accent-active:color-mix(in srgb, var(--app-accent) 78%, #000);
  --bs-warning:var(--app-accent);
  --bs-warning-rgb:var(--app-accent-rgb);
  --bs-warning-text-emphasis:color-mix(in srgb, var(--app-accent) 72%, #000);
  --bs-warning-bg-subtle:color-mix(in srgb, var(--app-accent) 18%, #fff);
  --bs-warning-border-subtle:color-mix(in srgb, var(--app-accent) 42%, #fff);
  --bs-success:var(--app-accent);
  --bs-success-rgb:var(--app-accent-rgb);
  --bs-success-text-emphasis:color-mix(in srgb, var(--app-accent) 72%, #000);
  --bs-success-bg-subtle:color-mix(in srgb, var(--app-accent) 18%, #fff);
  --bs-success-border-subtle:color-mix(in srgb, var(--app-accent) 42%, #fff);
}
.btn-warning,
.btn-success{
  --bs-btn-color:#fff;
  --bs-btn-bg:var(--app-accent);
  --bs-btn-border-color:var(--app-accent);
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:var(--app-accent-hover);
  --bs-btn-hover-border-color:var(--app-accent-hover);
  --bs-btn-focus-shadow-rgb:var(--app-accent-rgb);
  --bs-btn-active-color:#fff;
  --bs-btn-active-bg:var(--app-accent-active);
  --bs-btn-active-border-color:var(--app-accent-active);
  --bs-btn-disabled-color:#fff;
  --bs-btn-disabled-bg:var(--app-accent);
  --bs-btn-disabled-border-color:var(--app-accent);
}
.bg-success,
.text-bg-success,
.badge.text-bg-success{
  background-color:var(--app-accent) !important;
  color:#fff !important;
}
.text-success{
  color:var(--app-accent) !important;
}
.border-success{
  border-color:var(--app-accent) !important;
}
.text-bg-warning,
.text-bg-warning.text-dark,
.btn-warning.text-dark{
  color:#fff !important;
}

/* --- Member Avatars --- */
.member-avatar{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  object-fit: cover;
  flex: 0 0 auto;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
}
html[data-bs-theme="light"] .member-avatar{
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.16);
}

.deptmini-owner{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  min-width:112px;
  padding:6px 8px 6px 10px;
  border:1px solid rgba(108,117,125,.2);
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:var(--bs-secondary-color);
  font-size:.78rem;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}
.deptmini-owner img{
  width:34px;
  height:34px;
  border-radius:999px;
  object-fit:cover;
  flex:0 0 auto;
  border:2px solid rgba(var(--app-accent-rgb),.85);
  background:rgba(108,117,125,.14);
  box-shadow:0 8px 18px rgba(0,0,0,.14);
}
html[data-bs-theme="light"] .deptmini-owner{
  background:rgba(255,255,255,.68);
  border-color:rgba(108,117,125,.24);
}

/* Optional small size */
.member-avatar.sm{
  width: 26px;
  height: 26px;
}

/* --- Over-budget dot (smooth pulse + ring) ---
   If you already style this elsewhere, this is only for the new .blink-dot class.
*/
.blink-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  position: relative;
  transform: translateZ(0);
  animation: kpiPulse 1.35s ease-in-out infinite;
  opacity: 0.95;
}
.blink-dot::after{
  content:'';
  position:absolute;
  inset:-6px;
  border-radius: 999px;
  border: 2px solid currentColor;
  opacity: .28;
  transform: scale(.75);
  animation: kpiRing 1.35s ease-in-out infinite;
}

@keyframes kpiPulse{
  0%   { transform: scale(0.92); opacity: .65; }
  50%  { transform: scale(1.00); opacity: 1.00; }
  100% { transform: scale(0.92); opacity: .65; }
}
@keyframes kpiRing{
  0%   { transform: scale(.70); opacity: .00; }
  40%  { transform: scale(1.00); opacity: .32; }
  100% { transform: scale(1.25); opacity: .00; }
}
@media (prefers-reduced-motion: reduce){
  .blink-dot, .blink-dot::after{ animation: none !important; }
}


.kpi-info-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .kpi-info-grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:12px 18px;
  }
  .kpi-info-item{
    min-width:0;
  }
  .kpi-info-label{
    font-size: .82rem;
    opacity: .75;
    margin-bottom: 2px;
  }
  .kpi-info-value{
    font-weight: 600;
    line-height: 1.2;
    word-break: break-word;
  }

  /* responsive: 2 columns then 1 */
  @media (max-width: 992px){
    .kpi-info-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 576px){
  .kpi-info-grid{ grid-template-columns: 1fr; }
    .deptmini-owner{
      min-width:auto;
      padding:5px;
    }
    .deptmini-owner span{
      display:none;
    }
  }

/* --- KPI daily headcount strip --- */
.kpi-headcount-strip{
  border-bottom: 1px solid rgba(108,117,125,.16);
  padding: .7rem 0 .75rem;
}
.kpi-headcount-days{
  display: grid;
  grid-template-columns: repeat(var(--kpi-headcount-days, 31), minmax(0, 1fr));
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}
.kpi-headcount-day{
  min-width: 0;
  border: 1px solid rgba(108,117,125,.22);
  background: rgba(255,255,255,.46);
  color: var(--bs-body-color);
  border-radius: 8px;
  padding: 5px 4px;
  line-height: 1.05;
  text-align: center;
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.kpi-headcount-day:hover{
  border-color: rgba(13,110,253,.45);
  background: rgba(13,110,253,.08);
  transform: translateY(-1px);
}
.kpi-headcount-day.is-focus{
  border-color: rgba(var(--app-accent-rgb),.8);
  background: rgba(var(--app-accent-rgb),.16);
}
.kpi-headcount-day.is-empty{
  opacity: .46;
}
.kpi-headcount-day-num{
  display: block;
  font-size: .67rem;
  opacity: .72;
}
.kpi-headcount-day-val{
  display: block;
  margin-top: 3px;
  font-size: clamp(.72rem, .8vw, .86rem);
  font-weight: 800;
}
@media (max-width: 768px){
  .kpi-headcount-days{
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(38px, 1fr);
    gap: 6px;
  }
  .kpi-headcount-day{
    min-width: 38px;
  }
}
html[data-bs-theme="dark"] .kpi-headcount-day{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}
html[data-bs-theme="dark"] .kpi-headcount-day:hover{
  background: rgba(13,110,253,.18);
}

/* --- Staff clock-in reveal --- */
.staff-clock-action{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:36px;
}
.staff-clock-budget-text{
  white-space:nowrap;
}
.staff-clock-button-wrap{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
}
.staff-clock-toggle{
  border-radius:999px;
  padding:.34rem .64rem;
  box-shadow:0 10px 20px rgba(var(--app-accent-rgb),.16);
  white-space:nowrap;
}
.staff-clock-budget-extra{
  display:none;
}
.staff-clock-mini-count{
  white-space:nowrap;
  text-align:right;
}
.staff-clock-panel{
  border-color:rgba(var(--app-accent-rgb),.24);
}
.staff-clock-panel-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.staff-clock-close{
  width:34px;
  height:34px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
.staff-clock-count{
  min-width:82px;
  border:1px solid rgba(108,117,125,.18);
  border-radius:8px;
  padding:.42rem .6rem;
  text-align:center;
  line-height:1.05;
}
.staff-clock-count b{
  display:block;
  font-size:1.05rem;
}
.staff-clock-count span{
  display:block;
  font-size:.72rem;
  opacity:.7;
}
.staff-clock-groups{
  display:grid;
  gap:16px;
}
.staff-clock-role-group{
  min-width:0;
}
.staff-clock-role-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
  padding:0 2px;
  font-size:.78rem;
  font-weight:800;
  color:var(--bs-secondary-color);
  text-transform:uppercase;
}
.staff-clock-role-head b{
  min-width:26px;
  border-radius:999px;
  padding:2px 8px;
  background:rgba(108,117,125,.12);
  color:var(--bs-body-color);
  text-align:center;
  font-size:.72rem;
}
.staff-clock-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:10px;
  max-height:none;
  overflow:auto;
  padding-right:2px;
  scrollbar-width:thin;
}
.staff-clock-person{
  display:grid;
  grid-template-columns:38px minmax(0, 1fr) auto;
  align-items:center;
  gap:10px;
  border:1px solid rgba(108,117,125,.17);
  border-radius:8px;
  padding:10px;
  background:rgba(255,255,255,.5);
}
.staff-clock-avatar{
  width:38px;
  height:38px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.78rem;
  font-weight:800;
  color:#1f2328;
  background:linear-gradient(135deg, #ffd400, #7dd3fc);
  border:1px solid rgba(255,255,255,.6);
}
.staff-clock-avatar-img{
  width:38px;
  height:38px;
  border-radius:999px;
  object-fit:cover;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(108,117,125,.22);
}
.staff-clock-main{
  min-width:0;
}
.staff-clock-name{
  font-weight:700;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.staff-clock-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin-top:4px;
  font-size:.75rem;
  opacity:.78;
}
.staff-clock-time{
  display:flex;
  align-items:center;
  gap:6px;
  border-radius:999px;
  padding:.34rem .52rem;
  font-size:.8rem;
  font-weight:800;
  white-space:nowrap;
  cursor:pointer;
}
.staff-clock-time:focus{
  outline:2px solid rgba(var(--app-accent-rgb),.65);
  outline-offset:2px;
}
.staff-clock-time.is-on-time{
  border:1px solid rgba(var(--app-accent-rgb),.24);
  background:rgba(var(--app-accent-rgb),.1);
  color:var(--app-accent);
}
.staff-clock-time.is-late{
  border:1px solid rgba(220,53,69,.28);
  background:rgba(220,53,69,.1);
  color:var(--bs-danger);
}
.staff-clock-time.is-early{
  border:1px solid rgba(255,20,147,.36);
  background:rgba(255,20,147,.14);
  color:#ff1493;
}
.staff-clock-empty{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:92px;
  border:1px dashed rgba(108,117,125,.35);
  border-radius:8px;
  color:var(--bs-secondary-color);
}
.burn-panel{
  border-color:rgba(var(--app-accent-rgb),.26);
}
.burn-meter-list{
  display:grid;
  gap:12px;
}
.burn-meter-row{
  display:grid;
  grid-template-columns:minmax(150px, 240px) 1fr;
  gap:14px;
  align-items:center;
  --burn-color: #12d900;
  --burn-color-soft: rgba(18,217,0,.42);
  --burn-color-mid: rgba(18,217,0,.86);
}
.burn-meter-row.is-rank-1{
  --burn-color:#dc3545;
  --burn-color-soft:rgba(220,53,69,.42);
  --burn-color-mid:rgba(220,53,69,.88);
}
.burn-meter-row.is-rank-2{
  --burn-color:#fd7e14;
  --burn-color-soft:rgba(253,126,20,.42);
  --burn-color-mid:rgba(253,126,20,.88);
}
.burn-meter-row.is-rank-3{
  --burn-color:#ffc107;
  --burn-color-soft:rgba(255,193,7,.44);
  --burn-color-mid:rgba(255,193,7,.9);
}
.burn-meter-label{
  min-width:0;
}
.burn-meter-label span{
  display:block;
  font-weight:800;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.burn-meter-label small{
  display:block;
  margin-top:3px;
  color:var(--bs-secondary-color);
  font-weight:700;
}
.burn-meter-track{
  position:relative;
  height:42px;
  border-radius:999px;
  background:rgba(108,117,125,.14);
  overflow:visible;
  margin-right:74px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.burn-meter-bar{
  position:relative;
  z-index:1;
  height:100%;
  border-radius:999px;
  background:
    linear-gradient(90deg,
      var(--burn-color-soft) 0%,
      var(--burn-color-mid) 28%,
      var(--burn-color) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    0 10px 28px var(--burn-color-soft);
  transition:width .55s ease, background .35s ease;
}
.burn-meter-marker{
  position:absolute;
  left:min(max(var(--burn-pos, 0%), 24px), calc(100% - 6px));
  top:50%;
  transform:translate(-50%, -50%);
  display:flex;
  align-items:center;
  gap:0;
  z-index:3;
  transition:left .55s ease, transform .25s ease;
}
.burn-meter-count{
  min-width:28px;
  height:28px;
  border-radius:999px;
  display:grid;
  place-items:center;
  padding:0 8px;
  background:linear-gradient(135deg, rgba(0,0,0,.82), color-mix(in srgb, var(--burn-color) 42%, #111));
  color:#fff;
  font-weight:900;
  font-size:.85rem;
  box-shadow:0 8px 20px color-mix(in srgb, var(--burn-color) 22%, rgba(0,0,0,.18));
}
.burn-meter-avatar{
  width:56px;
  height:56px;
  margin-left:-8px;
  border-radius:999px;
  object-fit:cover;
  border:3px solid color-mix(in srgb, var(--burn-color) 62%, rgba(0,0,0,.75));
  background:var(--bs-body-bg);
  box-shadow:0 12px 28px color-mix(in srgb, var(--burn-color) 20%, rgba(0,0,0,.22));
}
.leaderboard-months{
  display:grid;
  gap:18px;
}
.leaderboard-month-title{
  font-weight:900;
  margin-bottom:10px;
}
.leaderboard-podium{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}
.leaderboard-card{
  position:relative;
  min-height:132px;
  border:1px solid rgba(108,117,125,.22);
  border-radius:8px;
  padding:14px 14px 14px 76px;
  background:rgba(255,255,255,.055);
  box-shadow:0 16px 34px rgba(0,0,0,.12);
}
.leaderboard-avatar{
  position:absolute;
  left:14px;
  top:18px;
  width:48px;
  height:48px;
  border-radius:999px;
  object-fit:cover;
  border:2px solid rgba(var(--app-accent-rgb),.45);
}
.leaderboard-medal{
  font-size:1.35rem;
  line-height:1;
}
.leaderboard-name{
  font-weight:900;
  margin-top:4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.leaderboard-meta{
  color:var(--bs-secondary-color);
  font-size:.82rem;
  font-weight:700;
}
.leaderboard-score{
  margin-top:8px;
  font-size:.82rem;
  font-weight:900;
  color:var(--bs-warning);
}
.at-risk-open{
  border-color:rgba(220,53,69,.55);
  box-shadow:0 10px 22px rgba(220,53,69,.08);
  white-space:nowrap;
  animation:atRiskOutlinePulse 2.1s ease-in-out infinite;
}
@keyframes atRiskOutlinePulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(220,53,69,0), 0 10px 22px rgba(220,53,69,.08); }
  50%{ box-shadow:0 0 0 4px rgba(220,53,69,.18), 0 10px 26px rgba(220,53,69,.16); }
}
.kpi-heartbeat{
  width:8px;
  height:8px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--bs-danger);
  box-shadow:0 0 0 0 rgba(220,53,69,.45);
  animation:kpiHeartbeat 1.6s ease-out infinite;
}
@keyframes kpiHeartbeat{
  0%,35%,100%{ transform:scale(.88); box-shadow:0 0 0 0 rgba(220,53,69,.40); }
  12%{ transform:scale(1.2); box-shadow:0 0 0 5px rgba(220,53,69,.10); }
  24%{ transform:scale(1); box-shadow:0 0 0 9px rgba(220,53,69,0); }
}
.turnover-panel-shell{
  border:1px solid rgba(108,117,125,.16);
  box-shadow:0 18px 42px rgba(31,41,55,.09);
}
.turnover-summary-note{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 8px;
  color:var(--bs-secondary-color);
  font-size:.82rem;
}
.turnover-card{
  min-height:124px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:16px 16px 16px 13px;
  border:1px solid rgba(108,117,125,.18);
  border-left-width:4px;
  border-radius:10px;
  background:rgba(255,255,255,.62);
}
.turnover-card span{
  color:var(--bs-secondary-color);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.turnover-card b{ font-size:1.8rem; line-height:1.1; margin:.42rem 0 .3rem; }
.turnover-card small{ color:var(--bs-secondary-color); }
.turnover-card-total{ border-left-color:#6f42c1; }
.turnover-card-total b{ color:#6f42c1; }
.turnover-card-confirmed{ border-left-color:var(--bs-danger); }
.turnover-card-confirmed b{ color:var(--bs-danger); }
.turnover-card-potential{ border-left-color:#e99a00; }
.turnover-card-potential b{ color:#e99a00; }
.turnover-card-excluded{ border-left-color:#7b848c; }
.turnover-card-excluded b{ color:#6c757d; }
.turnover-weekly{
  padding:16px;
  border:1px solid rgba(108,117,125,.18);
  border-radius:10px;
}
.turnover-weekly-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:16px;
}
.turnover-week-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
  align-items:end;
  gap:18px;
}
.turnover-week-item{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  color:var(--bs-body-color);
}
.turnover-week-rate{ margin-bottom:6px; font-size:.82rem; }
.turnover-week-column{
  position:relative;
  width:54px;
  height:150px;
  overflow:hidden;
  border:1px solid rgba(108,117,125,.18);
  border-radius:9px 9px 2px 2px;
  background:repeating-linear-gradient(to top, transparent 0, transparent 36px, rgba(108,117,125,.10) 37px);
}
.turnover-week-stack{
  position:absolute;
  inset:auto 0 0;
  display:flex;
  flex-direction:column-reverse;
  overflow:hidden;
  min-height:0;
}
.turnover-week-confirmed{ width:100%; background:linear-gradient(#f13b50,#dc3545); }
.turnover-week-potential{ width:100%; background:linear-gradient(#ffd35a,#f0ad1f); }
.turnover-week-zero{ position:absolute; inset:50% 0 auto; transform:translateY(-50%); color:var(--bs-secondary-color); font-size:.78rem; }
.turnover-week-count{ margin-top:6px; font-size:.86rem; }
.turnover-week-label{ font-size:.78rem; font-weight:700; }
.turnover-week-item small{ color:var(--bs-secondary-color); font-size:.7rem; }
.turnover-legend{ display:flex; justify-content:flex-end; gap:14px; color:var(--bs-secondary-color); font-size:.75rem; white-space:nowrap; }
.turnover-dot{ width:8px; height:8px; display:inline-block; margin-right:5px; border-radius:50%; }
.turnover-dot.confirmed{ background:var(--bs-danger); }
.turnover-dot.potential{ background:#f0ad1f; }
.turnover-cases{
  overflow:hidden;
  border:1px solid rgba(108,117,125,.18);
  border-radius:10px;
}
.turnover-cases-head,.turnover-cases-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:14px 16px;
}
.turnover-cases-head{ border-bottom:1px solid rgba(108,117,125,.18); }
.turnover-cases-foot{ border-top:1px solid rgba(108,117,125,.18); }
.turnover-table{ margin-bottom:0; }
.turnover-table th{
  white-space:nowrap;
  color:var(--bs-secondary-color);
  font-size:.75rem;
  text-transform:uppercase;
}
.turnover-classification{
  display:inline-flex;
  padding:3px 8px;
  border-radius:999px;
  font-size:.73rem;
  font-weight:800;
  background:rgba(108,117,125,.12);
}
.turnover-classification.is-confirmed{ color:#fff; background:var(--bs-danger); }
.turnover-classification.is-potential{ color:#302100; background:#f0ad1f; }
.turnover-classification.is-approved{ color:#fff; background:var(--bs-info); }
.turnover-classification.is-returned{ color:#fff; background:#6c757d; }
html[data-bs-theme="dark"] .turnover-card{ background:rgba(255,255,255,.035); }
html[data-bs-theme="dark"] .turnover-card-potential b{ color:#ffc247; }
.at-risk-modal{
  overflow:hidden;
  color:var(--bs-body-color);
  background:var(--bs-body-bg);
  box-shadow:0 24px 70px rgba(0,0,0,.36);
  transform-origin:center;
}
.modal.show .at-risk-modal{
  animation:atRiskModalIn .22s cubic-bezier(.2,.9,.25,1) both;
}
@keyframes atRiskModalIn{
  from{
    opacity:0;
    transform:translateY(14px) scale(.965);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}
.at-risk-close{
  opacity:.75;
}
.at-risk-close:hover{
  opacity:1;
}
.at-risk-summary{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:14px 16px;
  border:1px solid rgba(220,53,69,.18);
  border-radius:8px;
  background:linear-gradient(135deg, rgba(220,53,69,.12), rgba(255,193,7,.08));
}
.at-risk-summary-count{
  font-size:1.55rem;
  line-height:1;
  font-weight:900;
  color:var(--bs-danger);
  margin-right:6px;
}
.at-risk-groups{
  display:grid;
  gap:16px;
  max-height:min(68vh, 720px);
  overflow:auto;
  padding-right:4px;
}
.at-risk-group{
  border:1px solid rgba(108,117,125,.22);
  border-radius:8px;
  overflow:hidden;
  background:rgba(255,255,255,.42);
}
.at-risk-group-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-bottom:1px solid rgba(108,117,125,.18);
  background:rgba(220,53,69,.07);
}
.at-risk-table th{
  font-size:.76rem;
  color:var(--bs-secondary-color);
  text-transform:uppercase;
  letter-spacing:0;
  white-space:nowrap;
}
.at-risk-table td{
  vertical-align:middle;
}
.at-risk-save-cell{
  min-width:76px;
}
.at-risk-transfer-note{
  display:inline-flex;
  margin-top:4px;
  padding:2px 7px;
  border-radius:999px;
  background:rgba(13,110,253,.10);
  color:var(--bs-primary);
  font-size:.72rem;
  font-weight:700;
}
html[data-bs-theme="dark"] .staff-clock-person{
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.11);
}
html[data-bs-theme="dark"] .staff-clock-count{
  border-color:rgba(255,255,255,.12);
}
html[data-bs-theme="dark"] .staff-clock-role-head b{
  background:rgba(255,255,255,.08);
}
html[data-bs-theme="dark"] .at-risk-group{
  background:rgba(255,255,255,.045);
}
html[data-bs-theme="dark"] .at-risk-summary{
  background:linear-gradient(135deg, rgba(220,53,69,.16), rgba(255,193,7,.07));
}
html[data-bs-theme="dark"] .at-risk-close{
  filter:var(--bs-btn-close-white-filter);
}
@media (prefers-reduced-motion:reduce){
  .at-risk-open,
  .kpi-heartbeat,
  .modal.show .at-risk-modal{
    animation:none !important;
  }
}
@media (max-width:576px){
  .staff-clock-action{
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px 10px;
    min-height:0;
  }
  .staff-clock-budget-text{
    grid-column:1 / 2;
  }
  .staff-clock-button-wrap{
    position:static;
    transform:none;
    grid-column:1 / -1;
    grid-row:2;
  }
  .staff-clock-mini-count{
    grid-column:2 / 3;
    grid-row:1;
  }
  .staff-clock-panel-actions{
    width:100%;
    justify-content:space-between;
  }
  .staff-clock-person{
    grid-template-columns:34px minmax(0, 1fr);
  }
  .staff-clock-avatar,
  .staff-clock-avatar-img{
    width:34px;
    height:34px;
  }
  .staff-clock-time{
    grid-column:1 / -1;
    justify-content:center;
  }
  .burn-meter-row{
    grid-template-columns:1fr;
  }
  .leaderboard-podium{
    grid-template-columns:1fr;
  }
  .at-risk-summary,
  .at-risk-group-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .turnover-weekly-head,
  .turnover-cases-head,
  .turnover-cases-foot{
    align-items:flex-start;
    flex-direction:column;
  }
  .turnover-week-grid{
    grid-template-columns:repeat(5,minmax(90px,1fr));
    overflow-x:auto;
    padding-bottom:6px;
  }
}