/* Cleaning Team Manager - Style */
#ctm-root { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; max-width: 960px; margin: 0 auto; padding: 0 0 2rem; }
.ctm-topbar { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; flex-wrap: wrap; gap: 10px; }
.ctm-title { font-size: 18px; font-weight: 600; color: #1a1a18; }
.ctm-subtitle { font-size: 13px; color: #888; margin-top: 2px; }
.ctm-addbtn { padding: 9px 18px; background: #185FA5; color: #fff; border: none; border-radius: 8px; font-size: 14px; cursor: pointer; font-weight: 500; }
.ctm-addbtn:hover { background: #0C447C; }

.ctm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 1rem; }
.ctm-stat { background: #f5f5f3; border-radius: 8px; padding: 12px 14px; text-align: center; }
.ctm-stat-n { font-size: 22px; font-weight: 600; color: #1a1a18; }
.ctm-stat-l { font-size: 12px; color: #888; margin-top: 3px; }

.ctm-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 1rem; align-items: center; }
.ctm-filters input, .ctm-filters select { padding: 7px 11px; border: 1px solid #ddd; border-radius: 8px; font-size: 13px; color: #1a1a18; background: #fff; outline: none; }
.ctm-filters input { flex: 1; min-width: 160px; }
.ctm-filters input:focus, .ctm-filters select:focus { border-color: #378ADD; }
.ctm-fb { padding: 7px 14px; border: 1px solid #ddd; border-radius: 20px; background: #fff; color: #888; font-size: 12px; cursor: pointer; }
.ctm-fb.on { background: #E6F1FB; color: #185FA5; border-color: #378ADD; }
.ctm-fb:hover { background: #f5f5f3; }

.ctm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.ctm-card { background: #fff; border: 1px solid #e5e3dc; border-radius: 12px; padding: 15px; cursor: pointer; transition: border-color .15s, transform .1s; }
.ctm-card:hover { border-color: #378ADD; transform: translateY(-1px); }
.ctm-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ctm-av { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; flex-shrink: 0; }
.ctm-mname { font-size: 15px; font-weight: 600; color: #1a1a18; }
.ctm-mloc { font-size: 12px; color: #888; margin-top: 2px; }
.ctm-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.ctm-badge { font-size: 11px; padding: 3px 9px; border-radius: 20px; }
.ctm-bw { background: #E6F1FB; color: #0C447C; }
.ctm-ba { background: #EEEDFE; color: #3C3489; }
.ctm-bs { background: #E1F5EE; color: #085041; }
.ctm-cfoot { border-top: 1px solid #eee; padding-top: 9px; display: flex; justify-content: space-between; align-items: center; }
.ctm-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 3px; }
.ctm-loading, .ctm-empty { text-align: center; padding: 36px; color: #888; font-size: 14px; grid-column: 1/-1; }

/* Overlay / Modal */
.ctm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.ctm-box { background: #fff; border-radius: 14px; padding: 24px; width: 100%; max-width: 400px; max-height: 90vh; overflow-y: auto; }
.ctm-box h2 { font-size: 16px; font-weight: 600; color: #1a1a18; margin-bottom: 16px; }
.ctm-row { margin-bottom: 13px; }
.ctm-row label { font-size: 12px; color: #888; display: block; margin-bottom: 4px; }
.ctm-row input, .ctm-row select { width: 100%; padding: 8px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; color: #1a1a18; background: #fff; outline: none; }
.ctm-row input:focus { border-color: #378ADD; }

.ctm-chk-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 5px; }
.ctm-chk { padding: 6px 14px; border: 1px solid #ddd; border-radius: 20px; font-size: 13px; cursor: pointer; color: #555; user-select: none; transition: all .15s; }
.ctm-chk:hover { background: #f5f5f3; }
.ctm-chk.sel.svc-water { background: #E6F1FB; border-color: #378ADD; color: #0C447C; }
.ctm-chk.sel.svc-ac    { background: #EEEDFE; border-color: #534AB7; color: #3C3489; }
.ctm-chk.sel.svc-sofa  { background: #E1F5EE; border-color: #0F6E56; color: #085041; }

.ctm-status-row { display: flex; gap: 8px; margin-top: 5px; }
.ctm-stbtn { flex: 1; padding: 8px; border: 1px solid #ddd; border-radius: 8px; font-size: 13px; cursor: pointer; background: #fff; color: #888; text-align: center; transition: all .15s; }
.ctm-stbtn.active-sel { background: #E1F5EE; border-color: #0F6E56; color: #085041; }
.ctm-stbtn.busy-sel   { background: #FAEEDA; border-color: #BA7517; color: #633806; }

.ctm-fbtns { display: flex; gap: 8px; margin-top: 18px; align-items: center; }
.ctm-savebtn   { flex: 1; padding: 9px; background: #185FA5; color: #fff; border: none; border-radius: 8px; font-size: 14px; cursor: pointer; font-weight: 500; }
.ctm-savebtn:hover { background: #0C447C; }
.ctm-cancelbtn { padding: 9px 16px; border: 1px solid #ddd; border-radius: 8px; background: #fff; color: #888; font-size: 13px; cursor: pointer; }
.ctm-delbtn    { padding: 9px 14px; background: #FCEBEB; color: #A32D2D; border: none; border-radius: 8px; font-size: 13px; cursor: pointer; }

@media (max-width: 600px) {
  .ctm-stats { grid-template-columns: repeat(2, 1fr); }
  .ctm-grid  { grid-template-columns: 1fr 1fr; }
  .ctm-box   { padding: 18px; }
}
@media (max-width: 400px) {
  .ctm-grid { grid-template-columns: 1fr; }
}