/* ═══════════════════════════════════════════════════════════════
   ShopaHR Portal — Responsive CSS
   Applied via CSS classes added to JSX alongside existing inline styles.
   Inline styles handle colors/borders; these classes handle layout at breakpoints.
   ═══════════════════════════════════════════════════════════════ */

/* ── Global overflow protection ──────────────────────────────── */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}
.shopahr-body {
  overflow-x: hidden;
  box-sizing: border-box;
  max-width: 100%;
}
/* Page root wrappers (direct children of body with inline font-family) */
body > div {
  overflow-x: hidden;
  max-width: 100vw;
}
/* All grids — prevent children from forcing overflow */
[class*="shopahr-grid"] > * {
  min-width: 0 !important;
}
.shopahr-header {
  overflow: visible;
}
.shopahr-att-grid > * {
  min-width: 0 !important;
}

/* ── Wide tablet / small laptop (≤ 1024px) ───────────────────── */
@media (max-width: 1024px) {
  /* 5-col grids → 3 cols */
  .shopahr-grid-5 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  /* 6-col grids → 3 cols */
  .shopahr-grid-6 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .shopahr-quicklinks-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  /* 4-col grids → 2 cols */
  .shopahr-grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Attendance main grid (sidebar + main) → stacked */
  .shopahr-att-grid {
    grid-template-columns: 1fr !important;
  }
  /* Header user name/email hidden */
  .shopahr-header-user-info {
    display: none !important;
  }
}

/* ── Tablet breakpoint (≤ 768px) ─────────────────────────────── */
@media (max-width: 768px) {
  /* Header */
  .shopahr-header {
    padding: 10px 14px !important;
  }
  .shopahr-header-logo {
    height: 28px !important;
  }
  .shopahr-header-title {
    font-size: 14px !important;
  }
  .shopahr-header-badge {
    display: none !important;
  }

  /* Navbar */
  .shopahr-navbar {
    padding: 0 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .shopahr-navbar a {
    padding: 8px 12px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Body container */
  .shopahr-body {
    padding: 14px 12px !important;
  }

  /* Welcome banner */
  .shopahr-welcome-banner {
    flex-direction: column !important;
    padding: 18px 16px !important;
    border-radius: 14px !important;
    gap: 12px;
  }
  .shopahr-welcome-right {
    text-align: left !important;
  }

  /* Quick actions */
  .shopahr-quick-actions {
    flex-direction: column !important;
  }

  /* Grid layouts */
  .shopahr-grid-2 {
    grid-template-columns: 1fr !important;
  }
  .shopahr-grid-3 {
    grid-template-columns: 1fr !important;
  }
  .shopahr-grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .shopahr-grid-5 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .shopahr-grid-6 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .shopahr-quicklinks-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* All grid children — prevent overflow */
  .shopahr-grid-2 > *,
  .shopahr-grid-3 > *,
  .shopahr-grid-4 > *,
  .shopahr-grid-5 > *,
  .shopahr-grid-6 > * {
    min-width: 0 !important;
    overflow: hidden;
  }

  /* Table wrapper — horizontal scroll */
  .shopahr-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .shopahr-table-wrap table {
    min-width: 600px;
  }

  /* Cards — prevent overflow */
  .shopahr-card {
    padding: 16px !important;
    border-radius: 14px !important;
  }

  /* Profile hero — stack */
  .shopahr-profile-hero {
    flex-direction: column !important;
    text-align: center;
    gap: 14px !important;
  }
  .shopahr-profile-hero-actions {
    justify-content: center !important;
  }

  /* Profile 2-col grid */
  .shopahr-profile-grid {
    grid-template-columns: 1fr !important;
  }

  /* Modal */
  .shopahr-modal-content {
    width: 95vw !important;
    max-width: 95vw !important;
    margin: 0 8px !important;
    padding: 18px !important;
  }
  .shopahr-modal-grid-2 {
    grid-template-columns: 1fr !important;
  }

  /* Toggle / filter bars */
  .shopahr-toggle-bar {
    flex-wrap: wrap !important;
  }

  /* Onboarding form */
  .shopahr-onboard-grid-2 {
    grid-template-columns: 1fr !important;
  }
  .shopahr-onboard-grid-3 {
    grid-template-columns: 1fr !important;
  }
  .shopahr-onboard-container {
    padding: 16px 12px 40px !important;
  }
  .shopahr-onboard-form {
    padding: 16px !important;
  }

  /* Employees page — filter bar */
  .shopahr-emp-filters {
    flex-direction: column !important;
  }
  .shopahr-emp-filters > * {
    width: 100% !important;
  }

  /* Employees table — hide extra columns on mobile */
  .shopahr-col-hide-mobile {
    display: none !important;
  }

  /* Leave page form grid */
  .shopahr-leave-form-grid {
    grid-template-columns: 1fr !important;
  }

  /* HR toolbar */
  .shopahr-hr-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Calendar grid */
  .shopahr-cal-grid {
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 2px !important;
  }
  .shopahr-cal-cell {
    width: auto !important;
    height: 32px !important;
    font-size: 11px !important;
  }

  /* Employees drawer */
  .shopahr-drawer {
    width: 100vw !important;
    max-width: 100vw !important;
  }
  .shopahr-drawer-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Phone breakpoint (≤ 480px) ──────────────────────────────── */
@media (max-width: 480px) {
  .shopahr-header {
    padding: 8px 10px !important;
  }

  .shopahr-body {
    padding: 10px 8px !important;
  }

  .shopahr-welcome-banner {
    padding: 14px 12px !important;
  }
  .shopahr-welcome-banner .shopahr-welcome-name {
    font-size: 20px !important;
  }
  .shopahr-welcome-banner .shopahr-att-rate {
    font-size: 24px !important;
  }

  .shopahr-grid-3 {
    grid-template-columns: 1fr !important;
  }
  .shopahr-grid-4 {
    grid-template-columns: 1fr !important;
  }
  .shopahr-grid-5 {
    grid-template-columns: 1fr !important;
  }
  .shopahr-grid-6 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .shopahr-quicklinks-grid {
    grid-template-columns: 1fr !important;
  }

  .shopahr-card {
    padding: 12px !important;
    border-radius: 12px !important;
  }

  .shopahr-modal-content {
    padding: 14px !important;
    border-radius: 14px !important;
  }

  .shopahr-onboard-container {
    padding: 10px 6px 30px !important;
  }
  .shopahr-onboard-form {
    padding: 12px !important;
    border-radius: 12px !important;
  }
}

/* ── Bulk upload drop zone ────────────────────────────────────── */
.shopahr-dropzone:hover {
  border-color: #663dff !important;
  background: #faf8ff;
}

@media (max-width: 768px) {
  .shopahr-dropzone {
    padding: 20px 14px !important;
  }
}

/* ── Mobile blocked message ──────────────────────────────────── */
.shopahr-mobile-blocked {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #f1f5f9;
  font-family: 'DM Sans', sans-serif;
  padding: 20px;
}
.shopahr-mobile-blocked-card {
  background: #fff;
  border-radius: 20px;
  padding: 40px 28px;
  text-align: center;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}
.shopahr-mobile-blocked-card .icon {
  font-size: 56px;
  margin-bottom: 16px;
}
.shopahr-mobile-blocked-card h2 {
  color: #474747;
  font-size: 20px;
  margin: 0 0 8px;
}
.shopahr-mobile-blocked-card p {
  color: #888;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}