/* =============================================================
   SUPERVISOR.CSS — All supervisor/front desk tabs
   Merged from: hk-list.css + front-board.css + cleaning-sheet.css
                + lost-found.css + assignment.css + inspection.css
   Design System: Variation D (Dashboard/Management)
   ============================================================= */


/* ===== HK List ===== */

.hk-summary{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.hk-chip{padding:8px 16px;border-radius:var(--radius-pill);font-size:var(--text-sm);font-weight:600;
  background:var(--color-todo-bg);color:var(--color-gray-600);border:1px solid var(--color-gray-200)}
.hk-chip.todo{color:var(--color-gray-600)}
.hk-chip.inprog{color:var(--color-inprog);background:var(--color-inprog-bg);border-color:var(--color-inprog-border)}
.hk-chip.done{color:var(--color-done);background:var(--color-done-bg);border-color:var(--color-done-border)}
.hk-filters{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.hk-floor-btn{padding:10px 22px;border-radius:var(--radius-pill);font-size:var(--text-base);font-weight:700;
  border:2px solid var(--color-gray-200);background:#fff;color:var(--color-gray-600);transition:all var(--transition-fast);min-height:44px}
.hk-floor-btn.active{border-color:var(--color-navy);background:var(--color-navy);color:#fff}
.hk-floor-btn:hover:not(.active){border-color:var(--color-navy-light);background:rgba(27,45,79,.04)}
.hk-card{background:#fff;border-radius:var(--radius-md);padding:16px 20px;margin-bottom:12px;
  box-shadow:var(--shadow-md);display:flex;align-items:center;gap:20px;
  transition:transform var(--transition-fast),box-shadow var(--transition-fast);cursor:pointer;border-left:4px solid var(--color-gray-300)}
.hk-card:hover{box-shadow:var(--shadow-lg)}
.hk-card:active{transform:scale(.98);box-shadow:var(--shadow-md)}
.hk-card.st-TODO{border-left-color:var(--color-todo)}
.hk-card.st-IN_PROGRESS{border-left-color:var(--color-inprog)}
.hk-card.st-DONE{border-left-color:var(--color-done)}
.hk-room{font-family:var(--font-num);font-size:2rem;font-weight:var(--font-num-weight);font-variant-numeric:tabular-nums;min-width:70px;text-align:center;color:var(--color-gray-900)}
.hk-info{flex:1;min-width:0}
.hk-info-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:4px}
.hk-guest{font-size:var(--text-sm);color:var(--color-gray-600);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hk-eta{font-size:var(--text-sm);color:var(--color-gray-400)}
.hk-status-btn{min-width:120px;min-height:48px;padding:10px 16px;border-radius:var(--radius-pill);
  font-size:var(--text-base);font-weight:700;text-align:center;transition:all var(--transition-normal);flex-shrink:0}
.hk-status-btn.TODO{background:var(--color-todo-bg);color:var(--color-todo);border:2px solid var(--color-todo-border)}
.hk-status-btn.IN_PROGRESS{background:var(--color-inprog-bg);color:var(--color-inprog);border:2px solid var(--color-inprog-border)}
.hk-status-btn.DONE{background:var(--color-done-bg);color:var(--color-done);border:2px solid var(--color-done-border)}

/* ===== Bulk Edit ===== */
.hk-bulk-toggle{padding:8px 18px;border-radius:var(--radius-pill);font-size:var(--text-sm);font-weight:600;
  border:2px solid var(--color-navy-light);background:#fff;color:var(--color-navy);transition:all var(--transition-fast);min-height:44px;
  margin-left:auto}
.hk-bulk-toggle.active{background:var(--color-navy);color:#fff;border-color:var(--color-navy)}
.hk-card .bulk-check{width:32px;height:32px;accent-color:var(--color-navy);flex-shrink:0;cursor:pointer}
.hk-card.selected{background:rgba(27,45,79,.06);box-shadow:0 0 0 2px var(--color-navy-light)}
.bulk-bar{position:fixed;bottom:0;left:0;right:0;background:var(--color-navy);color:#fff;
  padding:14px 24px;display:flex;align-items:center;gap:14px;z-index:150;
  box-shadow:0 -4px 16px rgba(0,0,0,.2);flex-wrap:wrap}
.bulk-bar-count{font-size:var(--text-lg);font-weight:700;margin-right:auto}
.bulk-bar-btn{padding:12px 24px;border-radius:var(--radius-pill);font-size:var(--text-base);font-weight:700;
  min-height:48px;border:none}
.bulk-bar-btn.b-todo{background:var(--color-todo-bg);color:var(--color-todo)}
.bulk-bar-btn.b-inprog{background:var(--color-inprog-bg);color:var(--color-inprog)}
.bulk-bar-btn.b-done{background:var(--color-done-bg);color:var(--color-done)}
.bulk-bar-btn.b-sel{background:rgba(255,255,255,.15);color:#fff}


/* ===== Front Board ===== */

.front-table-wrap{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden}
.front-table{width:100%;border-collapse:separate;border-spacing:0}
.front-table th{background:var(--color-navy-deep);color:#fff;padding:14px 12px;font-size:var(--text-base);
  text-align:left;white-space:nowrap;user-select:none;font-weight:600;
  position:sticky;top:var(--sticky-top,104px);z-index:10}
.front-table th.sortable{cursor:pointer;padding-right:28px}
.front-table th.sortable:hover{background:var(--color-navy)}
.front-table th.sortable::after{content:'⇅';position:absolute;right:8px;top:50%;
  transform:translateY(-50%);font-size:.85rem;opacity:.5}
.front-table th.sortable.asc::after{content:'▲';opacity:1}
.front-table th.sortable.desc::after{content:'▼';opacity:1}
.front-table td{padding:14px 12px;border-bottom:1px solid var(--color-gray-100);font-size:var(--text-base);vertical-align:top}
.front-table tr:last-child td{border-bottom:none}
.front-table tr:hover{background:var(--color-gray-50)}
.room-status{font-weight:700;font-size:var(--text-sm);padding:6px 12px;border-radius:var(--radius-sm);display:inline-block}
.room-status.occupied{background:var(--color-occupied-bg);color:var(--color-occupied)}
.room-status.departing{background:var(--color-departing-bg);color:var(--color-departing)}
.room-status.vacant{background:var(--color-vacant-bg);color:var(--color-vacant)}
.front-table .front-row-clickable{cursor:pointer}
.front-table .front-row-clickable:active{background:rgba(27,45,79,.06)}
.front-table .room-num{font-family:var(--font-num);font-weight:var(--font-num-weight);font-variant-numeric:tabular-nums;font-size:1.3rem;color:var(--color-navy);
  text-decoration:underline;text-decoration-style:dotted}

/* ===== Door Notification Panel ===== */
.dn-panel{
  background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);
  margin-bottom:20px;overflow:hidden;
}
/* Collapsed header bar */
.dn-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;background:var(--color-gray-50);cursor:pointer;
  border-bottom:1px solid transparent;transition:border-color var(--transition-fast);
}
.dn-panel.expanded .dn-header{border-bottom-color:var(--color-gray-200)}
.dn-header-left{display:flex;align-items:center;gap:10px}
.dn-title{font-weight:700;font-size:var(--text-base);color:var(--color-navy);display:flex;align-items:center;gap:8px}
.dn-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;border-radius:11px;
  background:var(--color-error);color:#fff;font-size:var(--text-xs);font-weight:700;padding:0 6px;
}
.dn-expand-arrow{font-size:.8rem;color:var(--color-gray-400);transition:transform var(--transition-normal)}
.dn-panel.expanded .dn-expand-arrow{transform:rotate(180deg)}
.dn-body{display:none}
.dn-panel.expanded .dn-body{display:block}

/* Toggle switch (auto/manual) */
.dn-toggle-wrap{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--color-gray-50);border-bottom:1px solid var(--color-gray-100)}
.dn-toggle{
  display:flex;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--color-gray-300);
}
.dn-toggle-btn{
  padding:6px 14px;border:none;background:#fff;color:var(--color-gray-600);
  font-size:.8rem;font-weight:600;cursor:pointer;transition:all var(--transition-fast);
}
.dn-toggle-btn.active{background:var(--color-navy);color:#fff}
.dn-toggle-btn:not(.active):hover{background:var(--color-gray-50)}
/* Bulk apply button */
.dn-bulk-apply{
  margin-left:auto;padding:6px 14px;border-radius:var(--radius-md);border:none;
  background:var(--color-success);color:#fff;font-size:var(--text-sm);font-weight:700;
  cursor:pointer;display:flex;align-items:center;gap:4px;transition:background var(--transition-fast);
}
.dn-bulk-apply:hover{background:#16a34a}
.dn-bulk-apply:disabled{opacity:.4;cursor:default}
.dn-mode-hint{font-size:.7rem;color:var(--color-gray-400);font-weight:400}

/* Notification list */
.dn-list{padding:8px 12px;display:flex;flex-direction:column;gap:8px}
.dn-item{
  padding:10px 14px;border-radius:var(--radius-md);
  border:1px solid var(--color-gray-200);background:var(--color-gray-50);
}
.dn-item.pending{border-color:var(--color-inprog-border);background:var(--color-inprog-bg)}
.dn-item-header{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.dn-item-time{font-size:.8rem;color:var(--color-gray-600);font-weight:600}
.dn-item-staff{font-size:var(--text-sm);font-weight:600;color:var(--color-gray-900)}
.dn-item-photo{
  font-size:.7rem;font-weight:600;color:var(--color-info);
  padding:2px 6px;border-radius:var(--radius-xs);background:var(--color-info-bg);
}
.dn-item-entries{display:flex;flex-wrap:wrap;gap:6px}
.dn-entry{display:flex;align-items:center;gap:4px}
.dn-entry-room{font-size:var(--text-sm);font-weight:700;color:var(--color-gray-900)}
.dn-entry-status{
  font-size:.7rem;font-weight:700;color:#fff;
  padding:2px 8px;border-radius:5px;
}
.dn-item-memo{font-size:.8rem;color:var(--color-gray-600);margin-top:6px;font-style:italic}
/* ---- Notification card: horizontal layout (content left, buttons right) ---- */
.dn-item.pending{display:flex;align-items:stretch;gap:0}
.dn-item-content{flex:1;min-width:0}
.dn-item-actions-right{
  display:flex;flex-direction:column;gap:4px;margin-left:10px;flex-shrink:0;
  justify-content:center;
}
.dn-apply-btn-big{
  padding:14px 20px;border-radius:var(--radius-md);border:none;
  background:var(--color-info);color:#fff;font-size:var(--text-base);font-weight:700;
  cursor:pointer;min-width:72px;min-height:52px;transition:background var(--transition-fast);
}
.dn-apply-btn-big:hover{background:#2563eb}
.dn-apply-btn-big:active{background:#1d4ed8}
.dn-dismiss-btn-big{
  padding:14px 20px;border-radius:var(--radius-md);border:2px solid var(--color-error);
  background:#fff;color:var(--color-error);font-size:var(--text-base);font-weight:700;
  cursor:pointer;min-width:72px;min-height:52px;transition:all var(--transition-fast);
}
.dn-dismiss-btn-big:hover{background:var(--color-error-bg)}
.dn-dismiss-btn-big:active{background:var(--color-error-border)}

/* ---- Sub-tab bar (door status / staff reports) ---- */
.dn-subtab-bar{display:flex;border-bottom:2px solid var(--color-gray-200);background:#fff}
.dn-subtab{
  flex:1;padding:12px 16px;font-size:var(--text-sm);font-weight:600;color:var(--color-gray-600);
  border:none;background:none;border-bottom:3px solid transparent;
  text-align:center;cursor:pointer;transition:all var(--transition-fast);min-height:48px;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.dn-subtab.active{color:var(--color-navy);border-bottom-color:var(--color-navy);background:var(--color-gray-50)}
.dn-subtab:hover:not(.active){background:var(--color-gray-50)}

/* ---- Staff notification tags ---- */
.sn-item-tag{
  display:inline-block;padding:3px 10px;border-radius:var(--radius-sm);
  font-size:.8rem;font-weight:600;background:var(--color-warning-bg);color:var(--color-warning);
}
.sn-photo-badge{font-size:var(--text-xs);color:var(--color-info);margin-top:4px;font-weight:600}
.dn-item-room-tag{
  font-size:var(--text-sm);font-weight:700;color:var(--color-navy);
  background:rgba(27,45,79,.06);padding:2px 8px;border-radius:var(--radius-xs);
}

/* ---- Room unit (tile + cleaning bar as one unified card) ---- */
.ri-unit{display:flex;flex-direction:column;cursor:pointer;transition:transform .1s;
  border-left:4px solid var(--color-gray-300);border-radius:var(--radius-md);overflow:hidden;
  box-shadow:var(--shadow-sm);background:#fff}
.ri-unit:active{transform:scale(.96)}
.ri-unit.st-occupied{border-left-color:var(--color-occupied)}
.ri-unit.st-departing{border-left-color:var(--color-departing)}
.ri-unit.st-vacant{border-left-color:var(--color-vacant)}

/* ---- Room tile (fixed height, same size for all rooms) ---- */
.ri-tile{padding:6px 8px;display:flex;flex-direction:column;height:110px;background:#fff}

/* Status label (text only, color matches left border) */
.ri-status-label{display:block;font-size:.7rem;font-weight:700;white-space:nowrap;margin:1px 0;letter-spacing:.02em}
.ri-status-label.occupied{color:var(--color-occupied)}
.ri-status-label.departing{color:var(--color-departing)}
.ri-status-label.vacant{color:var(--color-vacant)}

/* Guest info */
.ri-guest-info{font-size:.7rem;color:var(--color-gray-600);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}

/* Spacer pushes notes to bottom */
.ri-spacer{flex:1}

/* Notes area (bottom of tile) */
.ri-notes{display:flex;gap:2px;flex-wrap:wrap;align-items:flex-end}

/* ---- Cleaning progress bar (below tile, vertical layout) ---- */
.ri-progress-wrap{display:flex;flex-direction:column;gap:2px;
  padding:4px 8px 6px;background:var(--color-gray-100);min-height:28px}
.ri-progress-wrap.ri-progress-none{justify-content:center;align-items:center;color:var(--color-gray-400);font-size:.7rem}
.ri-progress-top{display:flex;align-items:center;justify-content:space-between}
.ri-progress-label{font-size:.65rem;font-weight:800;color:var(--color-gray-600);white-space:nowrap}
.ri-progress-check{font-size:.8rem;color:var(--color-success);font-weight:700;line-height:1}
.ri-progress-track{width:100%;height:6px;background:var(--color-gray-200);border-radius:3px;overflow:hidden}
.ri-progress-fill{height:100%;background:var(--color-navy);border-radius:3px;transition:width var(--transition-slow)}

/* ---- Legend separator ---- */
.ri-legend-sep{width:1px;height:14px;background:var(--color-gray-300);margin:0 4px}

/* ---- Lights-off dimming (vacant from before) ---- */
.ri-unit.ri-dimmed{opacity:0.25;filter:saturate(0.2);transition:opacity var(--transition-normal),filter var(--transition-normal)}
.ri-unit.ri-dimmed:active{opacity:0.5;filter:saturate(0.5)}

/* Empty state */
.dn-empty{padding:20px;text-align:center;color:var(--color-gray-400);font-size:var(--text-sm)}

/* Applied section */
.dn-applied-section{border-top:1px solid var(--color-gray-200)}
.dn-applied-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;font-size:var(--text-sm);color:var(--color-gray-400);
}
.dn-clear-btn{
  padding:4px 10px;border-radius:var(--radius-sm);border:1px solid var(--color-gray-200);
  background:#fff;color:var(--color-gray-400);font-size:var(--text-xs);cursor:pointer;
}
.dn-clear-btn:hover{border-color:var(--color-error);color:var(--color-error)}
.dn-applied-list{padding:4px 12px 10px}
.dn-item.applied{
  padding:6px 12px;border-radius:var(--radius-md);
  background:var(--color-gray-50);border:1px solid var(--color-gray-100);
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:var(--text-sm);color:var(--color-gray-400);margin-bottom:4px;
}
.dn-applied-content{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.dn-undo-btn{
  padding:4px 10px;border-radius:var(--radius-sm);border:1px solid var(--color-gray-200);
  background:#fff;color:var(--color-gray-400);font-size:var(--text-xs);cursor:pointer;
  white-space:nowrap;flex-shrink:0;transition:all var(--transition-fast);
}
.dn-undo-btn:hover{border-color:var(--color-info);color:var(--color-info);background:var(--color-info-bg)}
.dn-entry-mini{font-size:.8rem;color:var(--color-gray-400);margin-right:6px}


/* ===== Cleaning Sheet ===== */

/* ===== Cleaning Sheet: Header ===== */
.sheet-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:12px}
.sheet-header h2{font-size:var(--text-xl);font-weight:700;color:var(--color-navy)}
.sheet-header-right{display:flex;align-items:center;gap:8px}
.sheet-date-picker{padding:6px 10px;border:1px solid var(--color-gray-300);border-radius:var(--radius-md);font-size:var(--text-sm);
  background:#fff;color:var(--color-gray-900);cursor:pointer}
.sheet-date-picker:focus{border-color:var(--color-navy);outline:none}
.btn-print{background:var(--color-navy);color:#fff;padding:14px 28px;border-radius:var(--radius-pill);
  font-size:var(--text-base);font-weight:600;min-height:56px;border:none}
.btn-print:hover{background:var(--color-navy-light)}
.sheet-meta{margin-top:12px;font-size:var(--text-sm);color:var(--color-gray-600);text-align:right}

/* ===== Cleaning Sheet: Table (screen & print shared) ===== */
.sheet-table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-md)}
.sheet-table th{background:var(--color-navy);color:#fff;padding:10px 8px;font-size:var(--text-sm);text-align:left;white-space:nowrap}
.sheet-table th.th-sortable{cursor:pointer;user-select:none;transition:background var(--transition-fast)}
.sheet-table th.th-sortable:hover{background:var(--color-navy-light)}
.sort-arrow{font-size:.7rem;margin-left:3px;opacity:.85}
.sheet-table td{padding:8px 8px;border-bottom:1px solid var(--color-gray-100);font-size:var(--text-sm);vertical-align:top}
.sheet-table .td-room{font-weight:700;font-size:var(--text-base);white-space:nowrap}
.sheet-table .td-time{white-space:nowrap}
.sheet-table .td-notes{white-space:normal;font-size:.8rem;min-width:120px}
.sheet-table .td-guest{white-space:nowrap}
.sheet-table tr:nth-child(even){background:var(--color-gray-50)}

/* Notes: auto-generated + editable comment */
.notes-auto{margin-bottom:4px;color:var(--color-gray-600);font-size:.78rem}
.notes-input{width:100%;padding:4px 6px;border:1px solid var(--color-gray-200);border-radius:var(--radius-xs);font-size:.8rem;
  background:var(--color-gray-50);color:var(--color-gray-900);outline:none;min-width:100px}
.notes-input:focus{border-color:var(--color-navy);background:#fff}
.notes-comment-print{display:none}
.notes-edit-row{display:flex;gap:4px;align-items:center}
.notes-edit-row .notes-input{flex:1}
.sheet-save-btn{background:var(--color-navy);color:#fff;border:none;border-radius:var(--radius-xs);
  padding:4px 10px;font-size:var(--text-xs);cursor:pointer;white-space:nowrap}
.sheet-save-btn:hover{background:var(--color-navy-light)}

/* ===== Filters & Column Toggle ===== */
.sheet-filters{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:12px;
  padding:10px 12px;background:var(--color-gray-50);border-radius:var(--radius-md)}
.sheet-filter-group{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.sheet-filter-label{font-size:.78rem;font-weight:600;color:var(--color-gray-600);margin-right:2px;white-space:nowrap}
.sheet-filter-btn{background:#fff;border:1px solid var(--color-gray-300);border-radius:var(--radius-sm);
  padding:4px 10px;font-size:.78rem;cursor:pointer;color:var(--color-gray-900);transition:all var(--transition-fast)}
.sheet-filter-btn:hover{border-color:var(--color-navy);color:var(--color-navy)}
.sheet-filter-btn.active{background:var(--color-navy);color:#fff;border-color:var(--color-navy)}

.sheet-col-toggle{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-bottom:10px}
.sheet-col-btn{background:rgba(27,45,79,.06);border:1px solid var(--color-gray-200);border-radius:var(--radius-sm);
  padding:3px 10px;font-size:var(--text-xs);cursor:pointer;color:var(--color-gray-900);transition:all var(--transition-fast)}
.sheet-col-btn:hover{border-color:var(--color-navy)}
.sheet-col-btn.active{background:var(--color-navy);color:#fff;border-color:var(--color-navy)}

/* Guest: show icon version on screen, text on print */
.guest-print{display:none}

/* ===== Type Legend ===== */
.sheet-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;padding:8px 4px;
  font-size:.8rem;color:var(--color-gray-600);border-top:1px solid var(--color-gray-200)}
.sheet-legend span{white-space:nowrap}

/* ===== Print ===== */
@media print{
  body{background:#fff;font-size:9pt}
  .header,.tab-bar,.no-print,#tab-hk,#tab-front,#tab-lf,#tab-assign,#tab-inspect,.modal-overlay{display:none!important}
  #tab-sheet{display:block!important}
  main{padding:0;max-width:100%}
  .sheet-table{box-shadow:none;border:1px solid #333;border-radius:0}
  .sheet-table th{background:#333!important;color:#fff!important;-webkit-print-color-adjust:exact;
    print-color-adjust:exact;padding:6px 6px;font-size:8pt}
  .sheet-table td{border:1px solid #ccc;padding:5px 6px;font-size:8pt}
  .sheet-table .td-notes{min-width:80px}
  .notes-auto{margin-bottom:2px}
  .notes-edit-row{display:none}
  .notes-comment-print{display:inline;font-style:italic;color:#333}
  .guest-screen{display:none}
  .guest-print{display:inline}
  .badge,.tag-exception,.tag-severity,.badge-policy{border:1px solid #999;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .sheet-legend{border-top:1px solid #999;padding-top:6px;font-size:7.5pt;color:#333}
}


/* ===== Lost & Found ===== */

.lf-register{background:#fff;border-radius:var(--radius-lg);padding:20px;margin-bottom:20px;
  box-shadow:var(--shadow-md)}
.lf-register h3{font-size:var(--text-lg);margin-bottom:14px;color:var(--color-navy)}
.lf-form-row{display:flex;gap:12px;margin-bottom:12px;flex-wrap:wrap;align-items:center}
.lf-input{padding:12px 16px;border:2px solid var(--color-gray-200);border-radius:var(--radius-md);font-size:var(--text-base);
  min-height:52px;flex:1;min-width:120px;transition:border-color var(--transition-fast)}
.lf-input:focus{outline:none;border-color:var(--color-navy)}
.lf-input-sm{max-width:140px}
.lf-btn-add{background:var(--color-navy);color:#fff;padding:12px 28px;border-radius:var(--radius-pill);
  font-size:var(--text-base);font-weight:700;min-height:52px;transition:background var(--transition-fast)}
.lf-btn-add:hover{background:var(--color-navy-light)}
.lf-filters{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.lf-filter-btn{padding:10px 22px;border-radius:var(--radius-pill);font-size:var(--text-base);font-weight:600;
  border:2px solid var(--color-gray-200);background:#fff;color:var(--color-gray-600);transition:all var(--transition-fast);min-height:44px}
.lf-filter-btn.active{border-color:var(--color-navy);background:var(--color-navy);color:#fff}
.lf-filter-btn:hover:not(.active){border-color:var(--color-navy-light);background:rgba(27,45,79,.04)}
.lf-count{font-size:var(--text-sm);color:var(--color-gray-400);margin-bottom:12px}
.lf-table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-md)}
.lf-table th{background:var(--color-navy-deep);color:#fff;padding:14px 12px;font-size:var(--text-sm);
  font-weight:600;text-align:left;white-space:nowrap}
.lf-table td{padding:12px;border-bottom:1px solid var(--color-gray-100);font-size:var(--text-base);vertical-align:middle}
.lf-table tr:last-child td{border-bottom:none}
.lf-table tr:hover{background:var(--color-gray-50)}
.lf-status-sel{padding:8px 12px;border:2px solid var(--color-gray-200);border-radius:var(--radius-sm);font-size:var(--text-sm);
  font-weight:600;min-height:42px;background:#fff}
.lf-status-sel.stored{border-color:var(--color-info);color:var(--color-info)}
.lf-status-sel.return_plan{border-color:var(--color-warning);color:var(--color-warning)}
.lf-status-sel.returned{border-color:var(--color-success);color:var(--color-success)}
.lf-thumb{width:50px;height:50px;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--color-gray-200);cursor:pointer}
.lf-no-items{text-align:center;padding:40px;color:var(--color-gray-400);font-size:var(--text-lg)}
.lf-img-row{display:flex;gap:12px;align-items:center}


/* ===== Assignment Tab ===== */

.assign-summary{display:flex;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.assign-summary-chip{padding:10px 20px;border-radius:var(--radius-pill);font-size:var(--text-base);font-weight:600;
  display:flex;align-items:center;gap:8px;background:#fff;
  box-shadow:var(--shadow-sm)}
.assign-staff-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0}
.assign-staff-filter{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap;align-items:center}
.assign-staff-btn{padding:12px 20px;border-radius:var(--radius-pill);font-size:var(--text-base);font-weight:700;
  border:2px solid var(--color-gray-200);background:#fff;color:var(--color-gray-600);transition:all var(--transition-fast);min-height:52px;
  display:flex;align-items:center;gap:8px}
.assign-staff-btn.active{border-color:var(--color-navy);background:var(--color-navy);color:#fff}
.assign-staff-btn:hover:not(.active){border-color:var(--color-navy-light);background:rgba(27,45,79,.04)}
.assign-table{margin-top:4px}
.assign-table td{vertical-align:middle}
.assign-table tr{border-left:4px solid var(--color-gray-300)}
.assign-sel{min-height:44px;padding:6px 10px;border-radius:var(--radius-sm);
  border:2px solid var(--color-gray-200);font-size:var(--text-sm);font-weight:600;background:#fff;width:100%;
  color:var(--color-gray-900);appearance:auto}
.assign-sel:focus{border-color:var(--color-navy);outline:none}

/* View toggle */
.assign-view-toggle{display:flex;gap:6px;margin-bottom:14px}
.assign-view-btn{padding:10px 22px;border-radius:var(--radius-pill);font-size:var(--text-base);font-weight:700;
  border:2px solid var(--color-gray-200);background:#fff;color:var(--color-gray-600);min-height:48px;
  display:flex;align-items:center;gap:6px;transition:all var(--transition-fast);cursor:pointer}
.assign-view-btn.active{border-color:var(--color-navy);background:var(--color-navy);color:#fff}
.assign-view-btn:hover:not(.active){border-color:var(--color-navy-light);background:rgba(27,45,79,.04)}

/* Assignment grid */
.assign-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.assign-grid-cell{background:#fff;border-radius:var(--radius-md);padding:8px 10px;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:3px;
  border-left:4px solid var(--color-gray-300);min-height:0;transition:transform .1s}
.assign-grid-cell:active{transform:scale(.96)}
.assign-grid-cell.st-occupied{border-left-color:var(--color-occupied);background:var(--color-occupied-bg)}
.assign-grid-cell.st-departing{border-left-color:var(--color-departing);background:var(--color-departing-bg)}
.assign-grid-cell.st-vacant{border-left-color:var(--color-vacant);background:var(--color-vacant-bg)}
.assign-grid-cell.no-task{opacity:.4;pointer-events:none}
.assign-grid-cell.staff-dim{opacity:.25}
.assign-grid-room{font-family:var(--font-num);font-size:1.4rem;font-weight:var(--font-num-weight);font-variant-numeric:tabular-nums;color:var(--color-gray-900);line-height:1}
.assign-grid-badges{display:flex;gap:3px;flex-wrap:wrap;align-items:center}
.assign-grid-staff{font-size:var(--text-xs);font-weight:700;color:var(--color-gray-600);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.assign-grid-cell .assign-sel{min-height:36px;font-size:.8rem;padding:3px 6px;border-width:1.5px}


/* ===== Inspection Tab ===== */

.insp-summary{display:flex;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.insp-chip{padding:12px 24px;border-radius:var(--radius-pill);font-size:var(--text-base);font-weight:600;
  display:inline-flex;align-items:center;gap:8px}
.insp-chip .chip-num{font-family:var(--font-num);font-size:var(--text-xl);font-weight:var(--font-num-weight);font-variant-numeric:tabular-nums}
.insp-chip.pending{background:var(--color-warning-bg);color:var(--color-warning);border:1px solid var(--color-warning-border)}
.insp-chip.completed{background:var(--color-success-bg);color:var(--color-success);border:1px solid var(--color-success-border)}
.insp-filters{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.insp-filter-btn{padding:10px 22px;border-radius:var(--radius-pill);font-size:var(--text-base);font-weight:600;
  border:2px solid var(--color-gray-200);background:#fff;color:var(--color-gray-600);transition:all var(--transition-fast);min-height:44px}
.insp-filter-btn.active{border-color:var(--color-navy);background:var(--color-navy);color:#fff}
.insp-filter-btn:hover:not(.active){border-color:var(--color-navy-light);background:rgba(27,45,79,.04)}
.insp-card{background:#fff;border-radius:var(--radius-lg);padding:14px 18px;margin-bottom:12px;
  box-shadow:var(--shadow-md);border-left:4px solid var(--color-success)}
.insp-card.inspected{border-left-color:var(--color-success);opacity:.85}
.insp-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;
  flex-wrap:wrap;gap:6px}
.insp-card-room{font-family:var(--font-num);font-size:1.8rem;font-weight:var(--font-num-weight);font-variant-numeric:tabular-nums;color:var(--color-gray-900)}
.insp-card-meta{font-size:var(--text-sm);color:var(--color-gray-600);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.insp-rating-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;margin-bottom:10px}
.insp-rating-row{display:flex;align-items:center;gap:8px}
.insp-rating-label{min-width:100px;font-size:var(--text-sm);font-weight:600;color:var(--color-gray-900)}
.insp-rating-btns{display:flex;gap:6px}
.insp-rating-btn{width:46px;height:46px;border-radius:var(--radius-md);font-size:1.3rem;font-weight:800;
  border:2px solid var(--color-gray-200);background:#fff;color:var(--color-gray-400);transition:all var(--transition-fast);
  display:flex;align-items:center;justify-content:center}
.insp-rating-btn:hover{border-color:var(--color-info-light);background:var(--color-info-bg)}
.insp-rating-btn.selected.rate-4{border-color:var(--color-success);background:var(--color-success-bg);color:var(--color-success)}
.insp-rating-btn.selected.rate-3{border-color:var(--color-info);background:var(--color-info-bg);color:var(--color-info)}
.insp-rating-btn.selected.rate-2{border-color:var(--color-warning);background:var(--color-warning-bg);color:var(--color-warning)}
.insp-rating-btn.selected.rate-1{border-color:var(--color-error);background:var(--color-error-bg);color:var(--color-error)}
.insp-note-input{width:100%;min-height:44px;padding:10px 14px;border:2px solid var(--color-gray-200);
  border-radius:var(--radius-md);font-size:var(--text-sm);resize:vertical;box-sizing:border-box}
.insp-note-input:focus{outline:none;border-color:var(--color-navy)}
.insp-save-btn{padding:10px 24px;border-radius:var(--radius-pill);font-size:var(--text-base);font-weight:700;
  min-height:46px;background:var(--color-navy);color:#fff;transition:background var(--transition-fast);margin-top:6px}
.insp-save-btn:hover{background:var(--color-navy-light)}
.insp-save-btn.saved{background:var(--color-success)}
.insp-avg-section{background:#fff;border-radius:var(--radius-lg);padding:20px;margin-bottom:20px;
  box-shadow:var(--shadow-md)}
.insp-avg-section h3{font-size:var(--text-lg);color:var(--color-navy);margin-bottom:12px}
.insp-avg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.insp-avg-item{text-align:center;padding:14px;border-radius:var(--radius-md);background:var(--color-gray-50)}
.insp-avg-item .label{font-size:var(--text-sm);color:var(--color-gray-600);margin-bottom:4px}
.insp-avg-item .value{font-family:var(--font-num);font-size:2rem;font-weight:var(--font-num-weight);font-variant-numeric:tabular-nums;color:var(--color-navy)}
.insp-avg-item .symbol{font-size:1.2rem}