/* 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);
}
.kpi-card-actions{
  flex-wrap:nowrap !important;
  gap:.4rem !important;
}
.kpi-card-actions .btn{
  padding-inline:.48rem;
  white-space:nowrap;
}
.at-risk-open{
  flex-shrink:0;
  border-color:rgba(220,53,69,.55);
  box-shadow:0 10px 22px rgba(220,53,69,.08);
  animation:atRiskOutlineHeartbeat 1.8s ease-in-out infinite;
}
@keyframes atRiskOutlineHeartbeat{
  0%, 22%, 38%, 100%{
    border-color:rgba(220,53,69,.55);
    box-shadow:0 0 0 0 rgba(220,53,69,0), 0 10px 22px rgba(220,53,69,.08);
  }
  10%, 30%{
    border-color:rgba(220,53,69,.9);
    box-shadow:0 0 0 3px rgba(220,53,69,.15), 0 10px 22px rgba(220,53,69,.1);
  }
}
.kpi-heartbeat-dot{
  width:7px;
  height:7px;
  display:inline-block;
  flex:0 0 7px;
  position:relative;
  border-radius:999px;
  color:var(--app-accent);
  background:currentColor;
  box-shadow:0 0 0 0 currentColor;
  animation:kpiHeartbeat 1.8s ease-in-out infinite;
}
.kpi-heartbeat-dot::after{
  content:'';
  position:absolute;
  inset:-4px;
  border:1px solid currentColor;
  border-radius:999px;
  opacity:0;
  animation:kpiHeartbeatRing 1.8s ease-out infinite;
}
.kpi-heartbeat-dot.is-primary{
  color:var(--app-accent);
}
@keyframes kpiHeartbeat{
  0%, 22%, 38%, 100%{
    transform:scale(1);
    opacity:.68;
  }
  10%, 30%{
    transform:scale(1.28);
    opacity:1;
  }
}
@keyframes kpiHeartbeatRing{
  0%, 8%{
    transform:scale(.7);
    opacity:0;
  }
  18%{
    opacity:.28;
  }
  40%, 100%{
    transform:scale(1.45);
    opacity:0;
  }
}
.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){
  .modal.show .at-risk-modal,
  .at-risk-open,
  .kpi-heartbeat-dot,
  .kpi-heartbeat-dot::after{
    animation:none;
  }
}
@media (max-width:576px){
  .kpi-card-actions{
    flex-wrap:wrap !important;
  }
  .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 / quit exposure */
.turnover-toggle{
  white-space:nowrap;
}
.turnover-department-modal{
  color:var(--bs-body-color);
  background:var(--bs-body-bg);
  box-shadow:0 24px 70px rgba(0,0,0,.28);
}
.turnover-panel{
  --turnover-potential:#e7a11a;
  overflow:hidden;
}
.turnover-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.turnover-summary-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
  margin-bottom:16px;
}
.turnover-metric{
  position:relative;
  min-height:124px;
  padding:15px 16px;
  overflow:hidden;
  border:1px solid rgba(108,117,125,.18);
  border-radius:10px;
  background:rgba(255,255,255,.48);
}
.turnover-metric::before{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:var(--turnover-color, var(--bs-primary));
}
.turnover-metric.is-total{ --turnover-color:#6f42c1; }
.turnover-metric.is-confirmed{ --turnover-color:var(--bs-danger); }
.turnover-metric.is-potential{ --turnover-color:var(--turnover-potential); }
.turnover-metric.is-excluded{ --turnover-color:var(--bs-secondary); }
.turnover-metric-label{
  display:block;
  color:var(--bs-secondary-color);
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.turnover-metric strong{
  display:block;
  margin:6px 0 2px;
  color:var(--turnover-color, var(--bs-primary));
  font-size:1.9rem;
  line-height:1.05;
}
.turnover-metric small{
  color:var(--bs-secondary-color);
}
.turnover-chart-card,
.turnover-cases{
  border:1px solid rgba(108,117,125,.18);
  border-radius:10px;
  background:rgba(255,255,255,.38);
}
.turnover-chart-card{
  padding:16px;
  margin-bottom:16px;
}
.turnover-chart-head,
.turnover-cases-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.turnover-legend{
  display:flex;
  align-items:center;
  gap:14px;
  color:var(--bs-secondary-color);
  font-size:.76rem;
  font-weight:700;
  white-space:nowrap;
}
.turnover-legend span{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.turnover-legend i{
  width:9px;
  height:9px;
  border-radius:3px;
}
.turnover-legend i.is-confirmed{ background:var(--bs-danger); }
.turnover-legend i.is-potential{ background:var(--turnover-potential); }
.turnover-week-chart{
  display:grid;
  grid-template-columns:repeat(var(--turnover-weeks), minmax(92px, 1fr));
  gap:12px;
  min-width:calc(var(--turnover-weeks) * 92px);
  margin-top:18px;
  overflow-x:auto;
  padding:0 2px 4px;
}
.turnover-week{
  display:grid;
  grid-template-rows:24px 150px 24px auto 18px;
  text-align:center;
}
.turnover-week-rate{
  color:var(--bs-body-color);
  font-size:.82rem;
  font-weight:800;
}
.turnover-bar-wrap{
  position:relative;
  display:flex;
  flex-direction:column-reverse;
  justify-content:flex-start;
  align-items:stretch;
  width:54px;
  height:150px;
  margin:0 auto;
  overflow:hidden;
  border:1px solid rgba(108,117,125,.16);
  border-radius:8px 8px 3px 3px;
  background:
    repeating-linear-gradient(
      to top,
      rgba(108,117,125,.06) 0,
      rgba(108,117,125,.06) 1px,
      transparent 1px,
      transparent 25%
    );
}
.turnover-bar{
  flex:0 0 auto;
  width:100%;
  min-height:0;
  transition:height .25s ease;
}
.turnover-bar.is-confirmed{ background:linear-gradient(180deg, #ef6674, var(--bs-danger)); }
.turnover-bar.is-potential{ background:linear-gradient(180deg, #ffd75e, var(--turnover-potential)); }
.turnover-zero{
  position:absolute;
  inset:50% 0 auto;
  transform:translateY(-50%);
  color:var(--bs-secondary-color);
  font-size:.75rem;
}
.turnover-week-count{
  padding-top:4px;
  font-size:.86rem;
  font-weight:900;
}
.turnover-week-label{
  color:var(--bs-body-color);
  font-size:.78rem;
  font-weight:700;
}
.turnover-week-hc{
  color:var(--bs-secondary-color);
  font-size:.68rem;
}
.turnover-cases{
  overflow:hidden;
}
.turnover-cases-head{
  padding:14px 16px;
  border-bottom:1px solid rgba(108,117,125,.16);
}
.turnover-table th{
  padding:9px 12px;
  color:var(--bs-secondary-color);
  font-size:.72rem;
  letter-spacing:.02em;
  text-transform:uppercase;
  white-space:nowrap;
}
.turnover-table td{
  padding:9px 12px;
}
.turnover-status{
  min-width:210px;
}
.turnover-save-cell{
  min-width:76px;
}
.turnover-pagination{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:54px;
  padding:9px 12px;
  border-top:1px solid rgba(108,117,125,.16);
  background:rgba(108,117,125,.035);
}
.turnover-page-controls{
  display:flex;
  align-items:center;
  gap:9px;
}
.turnover-page-button{
  min-width:92px;
  white-space:nowrap;
}
.turnover-page-indicator{
  min-width:86px;
  color:var(--bs-secondary-color);
  font-size:.78rem;
  font-weight:800;
  text-align:center;
}
.turnover-badge-potential{
  color:#352300;
  background:#f2b63f;
}
html[data-bs-theme="dark"] .turnover-metric,
html[data-bs-theme="dark"] .turnover-chart-card,
html[data-bs-theme="dark"] .turnover-cases{
  border-color:rgba(255,255,255,.11);
  background:rgba(255,255,255,.04);
}
html[data-bs-theme="dark"] .turnover-panel .btn-close{
  filter:var(--bs-btn-close-white-filter);
}
html[data-bs-theme="dark"] .turnover-department-modal .btn-close{
  filter:var(--bs-btn-close-white-filter);
}
@media (prefers-reduced-motion:reduce){
  .turnover-bar{
    transition:none;
  }
}
@media (max-width:992px){
  .turnover-summary-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media (max-width:576px){
  .turnover-summary-grid{
    grid-template-columns:1fr;
  }
  .turnover-chart-head,
  .turnover-cases-head{
    flex-direction:column;
  }
  .turnover-metric{
    min-height:106px;
  }
  .turnover-pagination{
    align-items:stretch;
    flex-direction:column;
  }
  .turnover-page-controls{
    justify-content:space-between;
  }
}