/* Global mobile-first responsive rules for small phones (320px - 425px)
   Purpose: improve usability across dashboard, employees, forms, tables, and sidebar.
*/

@media (max-width: 425px) {
  .page-container,
  .content-wrapper,
  .dashboard-page,
  .employees-page,
  .app-main {
    padding: 12px !important;
    box-sizing: border-box;
  }

  /* Make topbars and hero areas stack */
  .dashboard-topbar,
  .employees-file__hero-grid,
  .page-hero,
  .page-header-grid,
  .header-actions-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Full-width cards and business profile */
  .employee-business-card,
  .business-profile-card,
  .workspace-card,
  .employee-business-card__logo,
  .employee-profile__avatar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Make primary actions tappable and full width */
  .btn,
  button {
    width: 100% !important;
    min-height: 44px !important;
    box-sizing: border-box;
  }

  .app-menu-toggle,
  .ai-assistant-button,
  .ai-assistant-panel__close {
    width: auto !important;
    min-height: auto !important;
  }

  .app-menu-toggle {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
  }

  .ai-assistant-button {
    width: 3.35rem !important;
    height: 3.35rem !important;
    min-width: 3.35rem !important;
    padding: 0 !important;
  }

  .ai-assistant-panel__close {
    width: 2rem !important;
    height: 2rem !important;
    min-width: 2rem !important;
    padding: 0 !important;
  }

  .btn-group {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  input,
  select,
  textarea {
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Force single-column forms */
  .form-grid,
  .employee-form-grid,
  .payroll-form-grid,
  .employee-create__grid,
  .employee-create__sidebar,
  .employee-create__main {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Stack metric and summary grids */
  .dashboard-stats-grid,
  .metrics-grid,
  .summary-grid,
  .hero-stats,
  .employee-profile__metrics {
    grid-template-columns: 1fr !important;
  }

  .page-hero-actions {
    justify-content: flex-start !important;
  }

  /* Headings scale down for small phones */
  h1 { font-size: 2rem !important; line-height: 1.08 !important; }
  h2 { font-size: 1.5rem !important; }

  /* Table containers become horizontally scrollable, tables keep large min-width */
  .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrapper table { min-width: 700px; }

  /* Prevent page-level horizontal scrolling where possible */
  html, body { overflow-x: hidden; }

  /* Employees File mobile order (explicit) */
  .employees-file__hero-grid > .employees-file__business-card { order: 1; }
  .employees-file__hero-grid > .employees-file__intro { order: 2; }
  .employees-file__hero-grid > .employees-file__hero-actions { order: 3; }

  .employees-page .employees-file__hero {
    padding: 0.95rem !important;
  }

  .employees-page .employees-file__hero-grid {
    gap: 0.9rem !important;
    align-items: stretch !important;
  }

  .employees-page .employees-file__business-card {
    margin-bottom: 0 !important;
  }

  .employees-page .employees-file__intro {
    text-align: left !important;
  }

  .employees-page .employees-file__intro .page-hero-title {
    font-size: clamp(1.55rem, 6.5vw, 2.1rem) !important;
    line-height: 1.06 !important;
  }

  .employees-page .employees-file__intro .page-hero-subtitle {
    max-width: 100% !important;
    font-size: 0.9rem !important;
  }

  .employees-page .employees-file__hero-actions {
    gap: 0.65rem !important;
  }

  .employees-page .employees-file__search-form {
    width: 100% !important;
    gap: 0.7rem !important;
  }

  .employees-page .employees-file__search-group {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .employees-page .employees-file__search-group .form-control,
  .employees-page .employees-file__search-group .btn,
  .employees-page .employees-file__sort-select {
    width: 100% !important;
  }

  .employees-page .employees-file__actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    justify-content: stretch !important;
  }

  .employees-page .employees-file__actions > .btn,
  .employees-page .employees-file__actions > a.btn,
  .employees-page .employees-file__actions > .btn-group {
    width: 100% !important;
  }

  .employees-page .employees-file__actions > .btn:last-child,
  .employees-page .employees-file__actions > a.btn:last-child {
    grid-column: 1 / -1 !important;
  }

  /* Dashboard ordered priority */
  .dashboard-topbar .workspace-search { order: 1; }
  .dashboard-topbar .workspace-language-pill { order: 2; }
  .dashboard-topbar .workspace-topbar__left .workspace-icon-btn { order: 3; }
  .dashboard-topbar .workspace-user { order: 4; }
  .dashboard-topbar .workspace-date-pill { order: 5; }
  .dashboard-business-card { order: 6; }
  .dashboard-welcome { order: 7; }

  .dashboard-page .ai-assistant-widget {
    bottom: calc(4.75rem + env(safe-area-inset-bottom)) !important;
  }

  /* Step wizard: convert to vertical timeline under 425px */
  .employee-create__stepper {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }
  .employee-create__step {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0.65rem 0.8rem !important;
    border-radius: 0.9rem !important;
  }

  /* Cards become full width */
  .card,
  .employee-panel,
  .employee-profile__summary,
  .employee-business-card,
  .employee-hover-card__surface {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Ensure form control min-heights and tappable areas */
  .form-control,
  .form-select { min-height: 44px !important; }

  /* Misc safe spacing for small phones */
  .mb-1 { margin-bottom: .25rem !important; }
  .mb-2 { margin-bottom: .5rem !important; }
  .mb-3 { margin-bottom: .75rem !important; }

  /* Avoid fixed widths that overflow */
  [style*="width:"] { max-width: 100% !important; }
}

/* Sidebar mobile behavior: slides from left and uses Bootstrap collapse 'show' class */
@media (max-width: 767.98px) {
  .app-sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(82vw, 280px) !important;
    transform: translateX(-100%) !important;
    transition: transform 0.22s ease !important;
    z-index: 1040 !important;
    background: linear-gradient(180deg,#10213f 0%, #0a1426 100%) !important;
  }
  /* Bootstrap adds 'show' when the collapse is open */
  .app-sidebar.show { transform: translateX(0) !important; }
  /* Optional backdrop if markup adds one next to sidebar */
  .app-sidebar-backdrop { display: none; }
  .app-sidebar.show + .app-sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.36); z-index: 1039; }

  .auth-shell .app-main { margin-left: 0 !important; padding: 12px !important; }
}

/* Slightly larger phones / portrait phablets fallback */
@media (max-width: 425px) and (min-width: 376px) {
  /* tighten some gaps */
  .dashboard-topbar, .employees-file__hero-grid { gap: 10px !important; }
  .btn, button { min-height: 48px !important; }
}

/* ===== MOBILE DASHBOARD REDESIGN (Modern SaaS Style) ===== */
@media (max-width: 767.98px) {
  /* Hide elements not needed on mobile */
  .dashboard-page .dashboard-actions-area,
  .dashboard-page .dashboard-search-area,
  .dashboard-page .workspace-date-pill,
  .dashboard-page .workspace-language-pill,
  .workspace-card--chart {
    display: none !important;
  }

  /* Hero header: compact user profile + notifications */
  .dashboard-page .dashboard-topbar {
    grid-template-columns: 1fr auto auto !important;
    background: linear-gradient(135deg, #0F172A 0%, #1E3A8A 100%) !important;
    border-radius: 0 0 16px 16px !important;
    padding: 12px 16px !important;
    margin-bottom: 0 !important;
    gap: 12px !important;
    align-items: center !important;
    height: auto !important;
    min-height: 100px !important;
    position: sticky !important;
    top: 60px !important;
    z-index: 100 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  }

  /* Workspace selector area - hide, will be below header */
  .dashboard-page .workspace-select-area {
    display: none !important;
  }

  /* Notifications consolidated into header */
  .dashboard-page .workspace-pulse {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
    order: 3 !important;
  }

  .dashboard-page .workspace-pulse .workspace-signal {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    color: #FFFFFF !important;
    position: relative !important;
  }

  .dashboard-page .workspace-pulse .workspace-signal i {
    font-size: 16px !important;
    margin: 0 !important;
  }

  .dashboard-page .workspace-pulse .workspace-signal strong {
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    background: #EF4444 !important;
    color: white !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    font-size: 11px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* User info in header */
  .dashboard-page .workspace-user {
    order: 1 !important;
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: white !important;
  }

  .dashboard-page .workspace-user__photo,
  .dashboard-page .workspace-user__avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
  }

  .dashboard-page .workspace-user__meta {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
  }

  .dashboard-page .workspace-user__meta strong {
    font-size: 14px !important;
    color: white !important;
    line-height: 1 !important;
  }

  .dashboard-page .workspace-user__meta span {
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    line-height: 1 !important;
  }

  /* Hamburger menu button in header */
  .app-menu-toggle {
    order: 2 !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: none !important;
    color: white !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
  }

  /* === New Compact Workspace Selector Below Header === */
  .dashboard-page .workspace-select-area {
    display: block !important;
    margin-bottom: 12px !important;
    padding: 0 12px !important;
  }

  .workspace-switcher {
    max-width: 100% !important;
  }

  .workspace-switcher__trigger {
    height: 44px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    border: 1px solid #E5E7EB !important;
    background: white !important;
  }

  /* === Sticky Search Bar (reduced visual weight) === */
  .dashboard-page .dashboard-search-area {
    display: block !important;
    position: sticky !important;
    top: 160px !important;
    z-index: 99 !important;
    padding: 8px 12px !important;
    background: #F5F7FB !important;
    margin-bottom: 12px !important;
  }

  .workspace-search {
    height: 40px !important;
    border-radius: 12px !important;
    background: white !important;
    border: 1px solid #E5E7EB !important;
    font-size: 14px !important;
  }

  .workspace-search__shortcut {
    display: none !important;
  }

  /* === Quick Actions Grid (2x2) === */
  .dashboard-mobile-quick-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    padding: 0 12px !important;
  }

  .dashboard-mobile-action-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 16px 12px !important;
    background: white !important;
    border-radius: 12px !important;
    border: 1px solid #E5E7EB !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    min-height: 100px !important;
    text-decoration: none !important;
    color: inherit !important;
  }

  .dashboard-mobile-action-card:active {
    background: #F9FAFB !important;
    transform: scale(0.98) !important;
  }

  .dashboard-mobile-action-card__icon {
    font-size: 28px !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    background: #F3F4F6 !important;
  }

  .dashboard-mobile-action-card.action-attendance .dashboard-mobile-action-card__icon {
    background: #DBEAFE !important;
    color: #2563EB !important;
  }

  .dashboard-mobile-action-card.action-leave .dashboard-mobile-action-card__icon {
    background: #D1FAE5 !important;
    color: #10B981 !important;
  }

  .dashboard-mobile-action-card.action-payroll .dashboard-mobile-action-card__icon {
    background: #FED7AA !important;
    color: #F97316 !important;
  }

  .dashboard-mobile-action-card.action-schedule .dashboard-mobile-action-card__icon {
    background: #F3E8FF !important;
    color: #8B5CF6 !important;
  }

  .dashboard-mobile-action-card__label {
    font-size: 12px !important;
    font-weight: 600 !important;
    text-align: center !important;
    color: #1F2937 !important;
  }

  /* === Today's Summary KPI Cards === */
  .dashboard-mobile-summary {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    padding: 0 12px !important;
  }

  .dashboard-mobile-kpi-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 12px !important;
    background: white !important;
    border-radius: 12px !important;
    border-left: 4px solid #2563EB !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  }

  .dashboard-mobile-kpi-card.status-present {
    border-left-color: #10B981 !important;
  }

  .dashboard-mobile-kpi-card.status-late {
    border-left-color: #F97316 !important;
  }

  .dashboard-mobile-kpi-card.status-leave {
    border-left-color: #3B82F6 !important;
  }

  .dashboard-mobile-kpi-card.status-pending {
    border-left-color: #EF4444 !important;
  }

  .dashboard-mobile-kpi-card__label {
    font-size: 11px !important;
    color: #6B7280 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 600 !important;
  }

  .dashboard-mobile-kpi-card__value {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1F2937 !important;
    line-height: 1 !important;
  }

  /* === Notifications Card === */
  .dashboard-mobile-notifications {
    margin-bottom: 16px !important;
    padding: 0 12px !important;
  }

  .workspace-pulse {
    background: white !important;
    border-radius: 12px !important;
    border: 1px solid #E5E7EB !important;
    padding: 16px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 12px !important;
  }

  .workspace-pulse .workspace-signal {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px !important;
    background: #F9FAFB !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    color: inherit !important;
  }

  /* === Compact Business Profile Card === */
  .dashboard-page .dashboard-business-card {
    margin-bottom: 16px !important;
    padding: 0 12px !important;
  }

  .dashboard-page .employee-business-card {
    padding: 16px !important;
    gap: 12px !important;
    height: auto !important;
    min-height: 60px !important;
  }

  .dashboard-page .employee-business-card__content {
    flex: 1 !important;
  }

  .dashboard-page .employee-business-card__eyebrow {
    font-size: 10px !important;
    margin-bottom: 2px !important;
  }

  .dashboard-page .employee-business-card__title {
    font-size: 16px !important;
    margin: 0 !important;
  }

  .dashboard-page .employee-business-card__logo {
    width: 48px !important;
    height: 48px !important;
  }

  /* === Welcome Section - Compact on Mobile === */
  .dashboard-page .dashboard-welcome-row {
    grid-template-columns: 1fr !important;
    margin-bottom: 12px !important;
    padding: 0 12px !important;
  }

  .dashboard-page .dashboard-welcome {
    margin: 0 !important;
    margin-bottom: 12px !important;
  }

  .dashboard-page .workspace-kicker {
    font-size: 12px !important;
    margin: 0 0 4px 0 !important;
  }

  .dashboard-page .workspace-title {
    font-size: 24px !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.1 !important;
  }

  .dashboard-page .workspace-lead {
    font-size: 13px !important;
    color: #6B7280 !important;
    margin: 0 !important;
  }

  /* === Hero Stats Cards - Responsive Grid === */
  .dashboard-page .stat-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
    padding: 0 12px !important;
  }

  .dashboard-page .hero-stat-card {
    padding: 10px !important;
    border-radius: 12px !important;
    gap: 7px !important;
    align-items: flex-start !important;
  }

  .dashboard-page .hero-stat-card__icon {
    width: 30px !important;
    height: 30px !important;
    font-size: 14px !important;
  }

  .dashboard-page .hero-stat-card__content {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
  }

  .dashboard-page .hero-stat-card__label {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  .dashboard-page .hero-stat-card strong {
    font-size: 18px !important;
    line-height: 1.05 !important;
  }

  .dashboard-page .hero-stat-card small {
    font-size: 11px !important;
    line-height: 1.3 !important;
    margin-top: 2px !important;
  }

  .dashboard-page .hero-stat-card__metric {
    font-size: 10.5px !important;
    line-height: 1.3 !important;
    margin-top: 4px !important;
  }

  .dashboard-page .hero-stat-card__meta {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 2px 4px !important;
    margin-top: 3px !important;
  }

  .dashboard-page .hero-stat-card__meta .hero-stat-card__metric {
    margin-top: 0 !important;
  }

  .dashboard-page .hero-stat-card__link {
    max-width: 100% !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .dashboard-page .hero-stat-card__meter {
    height: 3px !important;
    margin-top: 4px !important;
  }

  /* === Bottom Navigation Fixed Bar === */
  .dashboard-page .dashboard-mobile-bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 56px !important;
    background: white !important;
    border-top: 1px solid #E5E7EB !important;
    z-index: 1000 !important;
    justify-content: space-around !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .dashboard-mobile-nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    flex: 1 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    color: #6B7280 !important;
    transition: color 0.2s ease !important;
    padding: 0 !important;
  }

  .dashboard-mobile-nav-item:active,
  .dashboard-mobile-nav-item.active {
    color: #2563EB !important;
  }

  .dashboard-mobile-nav-item__icon {
    font-size: 20px !important;
  }

  .dashboard-mobile-nav-item__label {
    font-size: 10px !important;
    font-weight: 600 !important;
  }

  /* === Adjust main content padding for bottom nav === */
  .dashboard-page .app-main {
    padding-bottom: 80px !important;
  }

  /* === Dashboard grid sections === */
  .dashboard-page .dashboard-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 12px !important;
    margin-bottom: 16px !important;
  }

  /* === Hide sections that are too verbose on mobile === */
  .dashboard-page .dashboard-main {
    display: none !important;
  }

  .dashboard-page .dashboard-sidebar {
    display: none !important;
  }

  .dashboard-page .hero-stats--payroll {
    display: none !important;
  }

  /* === Additional mobile polish === */
  .dashboard-page {
    background: #F5F7FB !important;
  }

  .dashboard-page .app-main {
    padding-top: 8px !important;
  }
}