/* cmgr-progress.css — Styles for Progress phase (Step 2B) */

/* ---- Section spacing ---- */
.cp-section{margin-bottom:20px}
.cp-empty{color:var(--color-gray-400);padding:12px;text-align:center;font-size:.9rem}

/* ================================================================
   1. FLOOR PROGRESS BARS
   ================================================================ */
.cp-floor-row{margin-bottom:2px}

.cp-floor-header{
  display:flex;align-items:center;gap:8px;
  padding:12px 16px;min-height:48px;
  background:var(--color-white);cursor:pointer;
  border-bottom:1px solid var(--color-gray-100);
  transition:background var(--transition-fast);
  -webkit-tap-highlight-color:transparent;
}
.cp-floor-header:hover{background:var(--color-gray-50)}
.cp-floor-header:active{background:var(--color-gray-50)}

.cp-floor-label{
  font-weight:700;font-size:.95rem;color:var(--color-gray-900);
  min-width:36px;white-space:nowrap;
}

.cp-floor-bar-wrap{flex:1;min-width:0}
.cp-floor-bar{
  position:relative;height:12px;
  background:var(--color-gray-200);border-radius:6px;overflow:hidden;
}
.cp-floor-bar-done{
  position:absolute;top:0;left:0;height:100%;
  background:var(--color-done);border-radius:6px;
  transition:width .5s ease;
}
.cp-floor-bar-prog{
  position:absolute;top:0;height:100%;
  background:var(--color-warning);border-radius:6px;
  transition:width .5s ease, left .5s ease;
}

.cp-floor-pct{
  font-weight:700;font-size:var(--text-lg);
  font-family:var(--font-num);font-variant-numeric:tabular-nums;
  color:var(--color-gray-900);min-width:36px;text-align:right;
}
.cp-floor-count{font-size:.8rem;color:var(--color-gray-400);min-width:44px;text-align:right;white-space:nowrap}
.cp-floor-chevron{font-size:.7rem;color:var(--color-gray-400);min-width:16px;text-align:center}

/* ---- Expanded room tiles ---- */
.cp-floor-rooms{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:8px;padding:12px 16px;background:var(--color-gray-50);
}

.cp-room-tile{
  background:var(--color-white);border-radius:var(--radius-md);padding:10px;
  border-left:4px solid var(--color-gray-300);cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:transform .1s;
  -webkit-tap-highlight-color:transparent;
}
.cp-room-tile:active{transform:scale(.96)}

.cp-tile-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.cp-tile-room{font-weight:800;font-size:1.1rem;color:var(--color-gray-900)}
.cp-tile-badge{
  font-size:.65rem;font-weight:700;padding:2px 6px;border-radius:var(--radius-xs);
  text-transform:uppercase;white-space:nowrap;
}
.cp-badge-todo{background:var(--color-todo-bg);color:var(--color-todo)}
.cp-badge-in-progress{background:var(--color-warning-bg);color:var(--color-warning)}
.cp-badge-done{background:var(--color-done-bg);color:var(--color-done)}

.cp-tile-staff{font-size:.8rem;color:var(--color-gray-600);margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.cp-tile-cycle-btn{
  display:block;width:100%;padding:6px 0;
  font-size:.8rem;font-weight:700;border:none;border-radius:var(--radius-sm);
  cursor:pointer;min-height:44px;
  transition:background var(--transition-fast);
}
.cp-tile-todo .cp-tile-cycle-btn{background:var(--color-warning-bg);color:var(--color-warning)}
.cp-tile-todo .cp-tile-cycle-btn:active{background:var(--color-warning-border)}
.cp-tile-in-progress .cp-tile-cycle-btn{background:var(--color-done-bg);color:var(--color-done)}
.cp-tile-in-progress .cp-tile-cycle-btn:active{background:var(--color-done-border)}

/* ================================================================
   2. ALERT PANEL
   ================================================================ */
.cp-alert-count{
  display:inline-block;background:var(--color-error);color:#fff;
  font-size:.75rem;font-weight:700;padding:1px 8px;border-radius:10px;
  vertical-align:middle;margin-left:4px;
}

.cp-alert-panel{border-radius:var(--radius-md);overflow:hidden}

.cp-alert-ok{
  background:var(--color-done-bg);padding:16px;text-align:center;
  color:var(--color-done);font-weight:600;font-size:.95rem;
}
.cp-alert-ok-icon{font-size:1.2rem}

.cp-alert-warn{background:var(--color-warning-bg);border:1px solid var(--color-warning-border)}

.cp-alert-item{
  display:flex;align-items:center;gap:8px;
  padding:12px 16px;min-height:48px;
  border-bottom:1px solid rgba(245,158,11,.15);
  cursor:pointer;transition:background var(--transition-fast);
  -webkit-tap-highlight-color:transparent;
}
.cp-alert-item:last-child{border-bottom:none}
.cp-alert-item:active{background:var(--color-warning-border)}

.cp-alert-room{
  font-weight:800;font-size:.95rem;color:var(--color-warning);
  background:var(--color-white);padding:2px 8px;border-radius:var(--radius-xs);
  white-space:nowrap;
}
.cp-alert-icon{font-size:1.1rem;flex-shrink:0}
.cp-alert-text{font-size:.85rem;color:var(--color-error);flex:1;min-width:0}

/* ================================================================
   3. ACTIVE TASKS LIST
   ================================================================ */
.cp-active-count{
  display:inline-block;background:var(--color-warning);color:#fff;
  font-size:.75rem;font-weight:700;padding:1px 8px;border-radius:10px;
  vertical-align:middle;margin-left:4px;
}

.cp-active-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:12px;
}

.cp-active-card{
  background:var(--color-white);border-radius:var(--radius-md);padding:16px;
  border-left:5px solid var(--color-gray-300);
  box-shadow:var(--shadow-md);
  transition:transform .1s;
}

.cp-active-card.cp-active-overdue{
  box-shadow:0 2px 8px rgba(239,68,68,.2);
  background:var(--color-error-bg);
}

.cp-active-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.cp-active-room{font-weight:800;font-size:1.4rem;color:var(--color-gray-900)}

.cp-overdue-badge{
  font-size:.7rem;font-weight:700;
  background:var(--color-error);color:#fff;padding:2px 8px;border-radius:var(--radius-xs);
  animation:cp-pulse 1.5s infinite;
}
@keyframes cp-pulse{
  0%,100%{opacity:1}
  50%{opacity:.6}
}

.cp-active-staff{font-size:.9rem;color:var(--color-gray-600);margin-bottom:8px}

.cp-active-times{
  display:flex;justify-content:space-between;
  font-size:.8rem;color:var(--color-gray-400);margin-bottom:12px;
}

.cp-done-btn{
  display:block;width:100%;padding:12px 0;
  background:var(--color-done);color:#fff;
  font-size:1rem;font-weight:700;
  border:none;border-radius:var(--radius-md);cursor:pointer;
  min-height:48px;
  transition:background var(--transition-fast);
  -webkit-tap-highlight-color:transparent;
}
.cp-done-btn:active{background:#16a34a}

/* ================================================================
   4. COMPLETED SECTION (uses shared .cmgr-toggle-btn from cleaning-mgr.css)
   ================================================================ */

/* ================================================================
   5. ALERT TABS (alerts / staff notifications)
   ================================================================ */
.cp-alert-tabs{
  display:flex;gap:0;margin-bottom:12px;
  border-radius:var(--radius-md);overflow:hidden;
  border:1px solid var(--color-gray-200);
}

.cp-alert-tab{
  flex:1;padding:10px 14px;
  font-size:.85rem;font-weight:600;color:var(--color-gray-600);
  background:var(--color-gray-50);border:none;cursor:pointer;
  min-height:44px;transition:all var(--transition-fast);
  display:flex;align-items:center;justify-content:center;gap:6px;
}

.cp-alert-tab.active{
  background:var(--color-white);color:var(--color-navy);
  box-shadow:var(--shadow-sm);
}

.cp-alert-tab:active{background:var(--color-gray-200)}

.cp-alert-tab + .cp-alert-tab{border-left:1px solid var(--color-gray-200)}

.cp-alert-tab-badge{
  display:inline-block;font-size:.7rem;font-weight:700;
  padding:1px 7px;border-radius:10px;min-width:18px;text-align:center;
}

.cp-badge-warn{background:var(--color-error);color:#fff}
.cp-badge-notif{background:var(--color-mode-cmgr);color:#fff}

/* ---- Notification Panel ---- */
.cp-notif-panel{
  border-radius:var(--radius-md);overflow:hidden;
  border:1px solid var(--color-gray-200);
}

.cp-notif-item{
  display:flex;align-items:center;gap:8px;
  padding:12px 16px;min-height:48px;
  border-bottom:1px solid var(--color-gray-100);
  font-size:.85rem;
}
.cp-notif-item:last-child{border-bottom:none}
.cp-notif-acked{opacity:.5}

.cp-notif-room{
  font-weight:800;font-size:.95rem;color:var(--color-navy);
  background:rgba(27,45,79,.06);padding:2px 8px;border-radius:var(--radius-xs);
  white-space:nowrap;
}

.cp-notif-from{
  font-weight:600;color:var(--color-gray-600);white-space:nowrap;
}

.cp-notif-msg{
  flex:1;color:var(--color-gray-600);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
/* Desktop: 2-column active cards */
@media(min-width:1200px){
  .cp-active-grid{grid-template-columns:repeat(2,1fr)}
}

/* Tablet and below: 1 column */
@media(max-width:768px){
  .cp-active-grid{grid-template-columns:1fr}
  .cp-floor-rooms{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
}