/* Media Queries for Large Tablets & Small Laptops (<= 1024px) */
@media screen and (max-width: 1024px) {
  :root {
    --sidebar-width: 0px; /* Collapse sidebar from margin */
  }

  .sidebar {
    left: -260px; /* Move sidebar offscreen */
    width: 260px;
    box-shadow: none;
  }

  body.sidebar-open .sidebar {
    left: 0;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
  }

  .main-content {
    margin-left: 0;
  }

  .menu-toggle {
    display: block; /* Show hamburger button */
  }

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

  .dashboard-row-2 {
    grid-template-columns: 1fr;
  }

  /* Adjust Quote widget position */
  .widget-quote {
    display: none; /* Hide on smaller screens to make space */
  }
}

/* Media Queries for Medium Tablets (<= 768px) */
@media screen and (max-width: 768px) {
  .navbar {
    padding: 0 20px;
  }

  .widget-weather {
    display: none; /* Hide weather */
  }

  .nav-search {
    max-width: 200px;
  }

  .content-body {
    padding: 20px;
    gap: 20px;
  }

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

  .page-header .btn {
    width: 100%;
  }

  .id-card-generator {
    padding: 8px;
  }

  .payslip-container {
    padding: 16px;
  }

  .payslip-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .payslip-title {
    text-align: left;
  }

  .payslip-meta {
    grid-template-columns: 1fr;
  }

  .chatbot-window {
    width: calc(100vw - 40px);
    right: 20px;
    height: 400px;
  }
}

/* Media Queries for Mobile Devices (<= 480px) */
@media screen and (max-width: 480px) {
  .nav-search {
    display: none; /* Hide search bar on very small phones, accessible on search page or reports */
  }

  .widget-clock {
    display: none; /* Hide clock to clear space */
  }

  .nav-right {
    gap: 12px;
  }

  .nav-user {
    padding: 2px;
  }

  .user-info {
    display: none; /* Hide text details, show avatar only */
  }

  .login-card {
    padding: 24px;
    width: 100%;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

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

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

  .cal-day-label, .cal-day {
    font-size: 11px;
  }

  .modal-box {
    width: 100%;
    margin: 0;
    max-height: 95vh;
  }

  .modal-body {
    padding: 16px;
  }

  .modal-footer {
    padding: 12px 16px;
    flex-direction: column;
    gap: 8px;
  }

  .modal-footer .btn {
    width: 100%;
  }
}