/* UNO Time — Mobile Styles */
/* Only applies to screens 768px and below */

/* Kill iOS bounce/overscroll globally */
html, body {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}

/* Prevent iOS auto-zoom on input focus */
input, select, textarea {
  font-size: 16px !important;
}

@media (max-width: 768px) {

  /* ========== LOGIN ========== */
  .login-container {
    min-height: 100vh;
    min-height: -webkit-fill-available;
    overflow: hidden;
    padding: 20px;
  }
  .login-card {
    width: 100%;
    max-width: 360px;
    padding: 32px 24px;
  }

  /* ========== DASHBOARD ========== */
  #dash-kpis {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  #dash-kpis .kpi:nth-child(5) {
    display: none;
  }
  #dash-kpis .kpi {
    padding: 12px 14px;
    text-align: center;
  }
  #dash-kpis .kpi-label {
    font-size: 9px;
  }
  #dash-kpis .kpi-val {
    font-size: 24px;
  }

  .who-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .who-card {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    margin-bottom: 0 !important;
  }
  .who-card:first-child {
    border-radius: 12px 12px 0 0 !important;
    border: 1px solid #e5e5e0 !important;
    border-bottom: none !important;
  }
  .who-card:last-child {
    border-radius: 0 0 12px 12px !important;
    border: 1px solid #e5e5e0 !important;
  }
  .who-card:not(:first-child):not(:last-child) {
    border-top: 1px solid #f0f0ec !important;
    border-left: 1px solid #e5e5e0 !important;
    border-right: 1px solid #e5e5e0 !important;
  }

  #dash-week {
    display: none !important;
  }
  /* Hide "This week's activity" wrapper (parent of #dash-week) */
  #dash-content > div:last-child > div:last-child {
    display: none !important;
  }
  /* Today's activity full width */
  #dash-content > div:last-child {
    display: block !important;
  }

  /* ========== EMPLOYEES ========== */

  /* Fix scroll on all pages — topbar is outside .app, so body must be the flex container */
  body {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    overflow: hidden !important;
    margin: 0 !important;
  }
  .mobile-topbar {
    flex-shrink: 0 !important;
  }
  .app {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
  }
  .main {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Page header — button stays right */
  .page-header {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
  }
  .page-header .btn {
    font-size: 13px !important;
    padding: 8px 14px !important;
    white-space: nowrap;
  }

  /* Filters: search full width, pills horizontal below */
  .filters {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }
  .filters input.flt {
    width: 100% !important;
  }
  .filters .qf-sep {
    display: none !important;
  }
  .filters .flt-sep {
    display: none !important;
  }
  .filters .dp-wrap {
    width: 100% !important;
  }
  .filters .dp-trigger {
    width: 100% !important;
    justify-content: center !important;
  }
  .filters > .btn {
    flex: 1 1 0 !important;
    text-align: center !important;
  }
  .filters > div[style*="flex:1"] {
    display: none !important;
  }
  /* Pills wrapper — horizontal row, centered */
  .filters .qf-pills {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center;
    gap: 8px;
  }
  .filters .qf-pill {
    flex: 0 0 auto !important;
    width: auto !important;
  }

  /* Hide table, show cards */
  #emp-table-wrap {
    display: none !important;
  }
  #emp-cards {
    display: block !important;
    background: #fff;
    border: 1px solid #e5e5e0;
    border-radius: 12px;
    overflow: visible;
  }
  .emp-card {
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0ec;
  }
  .emp-card:last-child {
    border-bottom: none;
  }

  /* ========== SETTINGS ========== */
  .settings-card {
    border-radius: 12px !important;
  }
  .settings-sec-header {
    padding: 12px 16px !important;
  }
  .settings-sec-body {
    padding: 0 16px !important;
  }
  .settings-sec-footer {
    padding: 16px !important;
  }
  .settings-sec-footer .btn {
    width: 100%;
    text-align: center;
    padding: 12px !important;
  }
  .setting-label small {
    display: none;
  }
  .setting-val input[type="text"] {
    width: 100% !important;
  }
  /* Stack send-from-email row vertically */
  .setting-row:has(input[name="report_from_email"]) {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .setting-row:has(input[name="report_from_email"]) .setting-val {
    width: 100%;
  }

  /* ========== TIMESHEET / PAY REPORTS / REPORTS ========== */

  /* Quick filters: select full width, pills centered in row, equal spacing */
  .quick-filters {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  .quick-filters > select.flt {
    width: 100% !important;
  }
  .quick-filters .qf-sep {
    display: none !important;
  }
  .quick-filters .qf-pill {
    padding: 6px 12px !important;
    font-size: 12px !important;
    flex: 0 0 auto !important;
  }

  /* Date pickers + Filter/Reset + View toggle: wrap in row */
  .quick-filters + div {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }
  .quick-filters + div .flt-sep {
    display: none !important;
  }
  .quick-filters + div .dp-wrap {
    width: 100% !important;
  }
  .quick-filters + div .dp-trigger {
    width: 100% !important;
    justify-content: center !important;
  }
  .quick-filters + div > .btn {
    flex: 1 1 0 !important;
    text-align: center !important;
  }
  .quick-filters + div .qf-sep {
    display: none !important;
  }

  /* Timesheet: hide table, show cards */
  #ts-table-wrap {
    display: none !important;
  }
  #ts-cards {
    display: block !important;
    background: #fff;
    border: 1px solid #e5e5e0;
    border-radius: 12px;
    overflow: visible;
  }
  .ts-card {
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0ec;
  }
  .ts-card:last-child {
    border-bottom: none;
  }
  .ts-card.ts-edited {
    background: #fef9eb;
  }

  /* View toggle full width */
  #view-toggle {
    width: 100% !important;
    display: flex !important;
  }
  #view-toggle .view-btn {
    flex: 1 !important;
    text-align: center !important;
  }

  /* Header action buttons: keep all in one row */
  .page-header > div[style*="display:flex"] {
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }
  .page-header > div[style*="display:flex"] .btn {
    font-size: 11px !important;
    padding: 6px 8px !important;
    white-space: nowrap;
  }

  /* ========== PAY REPORTS ========== */
  /* KPI grid: 2x2 instead of 4 across */
  .report-card > div:nth-child(2) {
    grid-template-columns: 1fr 1fr !important;
  }
  .report-card table {
    min-width: auto !important;
  }

  /* ========== REPORTS ========== */
  /* Reports pills: 2x2 grid */
  .quick-filters.no-print {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .quick-filters.no-print > select.flt {
    grid-column: 1 / -1;
  }
  .quick-filters.no-print .qf-sep {
    display: none !important;
  }
  .quick-filters.no-print .qf-pill {
    text-align: center !important;
  }
  /* Reports KPIs: 2 top + 1 full width bottom */
  #rp-results .kpi-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  #rp-results .kpi-grid .kpi:nth-child(3) {
    grid-column: 1 / -1;
  }
  /* Hide the Grid/Charts toggle on Reports */
  .filters #view-toggle {
    display: none !important;
  }
  /* Hide Print button on Reports in mobile */
  .page-header > div.no-print {
    display: none !important;
  }

  /* ========== USERS ========== */
  #users-table-wrap {
    display: none !important;
  }
  #user-cards {
    display: block !important;
    background: #fff;
    border: 1px solid #e5e5e0;
    border-radius: 12px;
    overflow: visible;
  }
  .user-card {
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0ec;
  }
  .user-card:last-child {
    border-bottom: none;
  }

  /* Modal — full width, scrollable, buttons always reachable */
  .modal-overlay {
    align-items: flex-start !important;
    padding: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    min-height: auto;
    overflow-y: visible !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  .modal .form-row {
    flex-direction: column !important;
    gap: 0 !important;
  }
  .modal-footer {
    padding: 16px 20px !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1px solid #e5e5e0;
    z-index: 10;
  }

}