/* ================================================================
   SmartHRM Pro — responsive.css
   Mobile-first responsive overrides
   ================================================================ */

/* ========================
   LARGE DESKTOP (1400px+)
   ======================== */
@media (min-width: 1400px) {
  .hrm-content {
    padding: 32px 40px;
  }

  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ========================
   TABLET LANDSCAPE (992px – 1199px)
   ======================== */
@media (max-width: 1199px) {
  :root {
    --sidebar-width: 240px;
  }

  .hrm-content {
    padding: 22px 24px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ========================
   TABLET PORTRAIT (768px – 991px)
   ======================== */
@media (max-width: 991px) {
  :root {
    --sidebar-width: 260px;
  }

  /* On tablet: sidebar becomes a drawer, hidden off-screen */
  .hrm-sidebar {
    transform: translateX(-100%);
    box-shadow: none;
  }

  .hrm-app.sidebar-open .hrm-sidebar {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,0.18);
  }

  .hrm-app.sidebar-open .sidebar-overlay {
    display: block;
  }

  /* Main content takes full width */
  .hrm-main {
    margin-left: 0 !important;
  }

  /* Collapse state doesn't apply on mobile */
  .hrm-app.sidebar-collapsed .hrm-main {
    margin-left: 0 !important;
  }

  .hrm-app.sidebar-collapsed .hrm-sidebar {
    width: var(--sidebar-width);
    transform: translateX(-100%);
  }

  .hrm-app.sidebar-open.sidebar-collapsed .hrm-sidebar {
    width: var(--sidebar-width);
    transform: translateX(0);
  }

  /* Restore nav text in mobile drawer */
  .hrm-app.sidebar-collapsed .nav-text,
  .hrm-app.sidebar-collapsed .nav-section-title,
  .hrm-app.sidebar-collapsed .brand-name,
  .hrm-app.sidebar-collapsed .sidebar-user-info {
    opacity: 1 !important;
    pointer-events: auto !important;
    width: auto !important;
    overflow: visible !important;
  }

  .hrm-app.sidebar-collapsed .nav-item .nav-link {
    justify-content: flex-start !important;
    padding: 10px 12px !important;
  }

  /* Show sidebar toggle button on mobile */
  .topbar-menu-btn {
    display: flex !important;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hrm-topbar {
    padding: 0 16px;
  }

  .hrm-content {
    padding: 20px 16px;
  }

  .hrm-footer {
    padding: 12px 16px;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .topbar-user-block {
    display: none;
  }
}

/* ========================
   MOBILE (< 768px)
   ======================== */
@media (max-width: 767px) {
  html {
    font-size: 13px;
  }

  .hrm-content {
    padding: 16px 12px;
  }

  .hrm-topbar {
    padding: 0 12px;
  }

  .stats-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 12px;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .stat-card {
    padding: 18px !important;
  }

  .stat-card-value {
    font-size: 26px;
  }

  .page-heading {
    font-size: 18px;
  }

  .page-title,
  h3.mb-3,
  h2.mb-3 {
    font-size: 20px;
    margin-bottom: 16px !important;
  }

  .card-body {
    padding: 16px !important;
  }

  .table th,
  .table td,
  .custom-table th,
  .custom-table td,
  .table-modern th,
  .table-modern td {
    padding: 10px 12px !important;
  }

  /* Stack action buttons */
  .table-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* Login page */
  .login-card {
    max-width: 100%;
    border-radius: var(--radius-lg) !important;
  }

  .login-card-header {
    padding: 24px 20px;
  }

  .login-card-body {
    padding: 20px;
  }

  /* Page header buttons full-width */
  .page-header .btn {
    width: 100%;
    justify-content: center;
  }

  /* Profile page */
  .info-label {
    width: 120px;
    min-width: 120px;
  }

  /* Task info grid */
  .task-info-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* DataTables */
  .dataTables_wrapper .top,
  .dataTables_wrapper .bottom {
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
  }

  /* Hide non-critical table columns on mobile */
  .hide-mobile {
    display: none !important;
  }

  /* Sidebar shown as drawer */
  .hrm-sidebar {
    width: 100%;
    max-width: 280px;
  }

  .topbar-breadcrumb {
    display: none;
  }
}

/* ========================
   SMALL MOBILE (< 480px)
   ======================== */
@media (max-width: 479px) {
  .hrm-content {
    padding: 12px 10px;
  }

  .topbar-user-name,
  .topbar-user-role {
    display: none;
  }

  .task-info-grid {
    grid-template-columns: 1fr;
  }

  .section-header {
    font-size: 13px;
    padding: 10px 14px;
  }
}

/* ========================
   PRINT STYLES
   ======================== */
@media print {
  .hrm-sidebar,
  .hrm-topbar,
  .hrm-footer,
  .sidebar-overlay,
  .btn,
  .dataTables_length,
  .dataTables_filter,
  .dataTables_paginate,
  .dataTables_info {
    display: none !important;
  }

  .hrm-main {
    margin-left: 0 !important;
  }

  .hrm-content {
    padding: 0 !important;
  }

  .card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }
}

/* ========================
   UTILITY: Hide scrollbar but keep scrollable
   ======================== */
.scroll-x-hidden {
  overflow-x: hidden;
}

/* ========================
   UTILITY: Truncate text
   ======================== */
.text-truncate-2 {
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ========================
   FOCUS VISIBLE ACCESSIBILITY
   ======================== */
*:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}