/* ==========================================================================
   responsive.css — tablet and mobile behaviour (loaded last)
   Desktop >= 1200px: full sidebar. Tablet 768–1199px: compact sidebar (auto).
   Mobile < 768px: sidebar becomes an off-canvas drawer.
   ========================================================================== */
@media (max-width: 1199.98px) {
  .page-content { padding: var(--space-4); }
  .topbar { padding: 0 var(--space-4); }
}
@media (max-width: 767.98px) {
  .sidebar { transform: translateX(-100%); width: min(86vw, 300px); box-shadow: var(--shadow-lg); }
  body.sidebar-open .sidebar { transform: none; }
  .app-main, body.sidebar-collapsed .app-main { margin-left: 0; }
  /* On mobile the drawer is always full width, never icon-only */
  body.sidebar-collapsed .sidebar { width: min(86vw, 300px); }
  body.sidebar-collapsed .sidebar .label, body.sidebar-collapsed .sidebar .sidebar-brand span,
  body.sidebar-collapsed .sidebar .nav-group-label { display: revert; }
  body.sidebar-collapsed .sidebar-brand, body.sidebar-collapsed .sidebar-link,
  body.sidebar-collapsed .sidebar-logout { justify-content: flex-start; }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 1035; background: rgba(15, 23, 42, 0.5); }
  body.sidebar-open .sidebar-backdrop { display: block; }
  body.sidebar-open { overflow: hidden; }
  .profile-toggle .name, .profile-toggle .role, .profile-toggle .bi-chevron-down { display: none; }
  .global-search { max-width: none; }
  .btn, .form-control, .form-select { min-height: 42px; }
  .btn-icon { width: 40px; height: 40px; }
  .page-header h1 { font-size: 1.15rem; }
  .stat-card { padding: var(--space-3) var(--space-4); }
  .stat-value { font-size: 1.35rem; }
  .nav-tabs-modern .nav-link { padding: 0.7rem 0.75rem; font-size: 0.9rem; }
  .kv { grid-template-columns: 1fr; gap: 0 0; }
  .kv dt { margin-top: 0.6rem; }
  .cal-day { min-height: 54px; padding: 4px; }
  .cal-day .st, .cal-day .hrs { display: none; }
  .cal-day::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, transparent); }
  .payslip { padding: 1rem; }
  .payslip .ps-meta { grid-template-columns: 1fr; }
  .kanban { grid-auto-columns: 82%; }
  .chart-box { height: 240px; padding: var(--space-3); }
}
@media (max-width: 575.98px) {
  /* Stack icon above text so long figures (e.g. ₹25,51,280) get the full card width and never split mid-number */
  .stat-card { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .stat-icon { width: 36px; height: 36px; font-size: 1.1rem; }
  .stat-value { font-size: clamp(1.1rem, 5.4vw, 1.35rem); overflow-wrap: normal; white-space: nowrap; }
  .filter-bar .field, .filter-bar .field.grow { flex: 1 1 100%; }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1 1 auto; }
  .toast-stack { right: 8px; left: 8px; width: auto; }
}

@media (max-width: 575.98px) {
  /* Table footer: let "Rows" picker and pager wrap instead of overflowing the card */
  .table-footer { padding: var(--space-3); }
  .table-footer-controls { flex-wrap: wrap; gap: var(--space-2) var(--space-3) !important; width: 100%; }
  .table-footer-controls .pagination { flex-wrap: wrap; }
  /* Task cards: stack status/actions under the content so title + description get full width */
  .task-row { flex-direction: column; }
  .task-main { width: 100%; }
  .task-side { width: 100%; flex-direction: row !important; align-items: center; justify-content: space-between; }
  .task-side select[data-status] { width: auto !important; flex: 1 1 auto; min-width: 0; }
  .task-actions { flex-shrink: 0; }
}