/*
 * SimpleMonkey - Responsive Styles
 */

/* Desktop (1200px and down) */
@media (max-width: 1200px) {
  .sm-hero-bg {
    opacity: 0.3;
    right: -20%;
  }
}

/* Tablet (992px and down) */
@media (max-width: 991.98px) {
  .sm-sidebar {
    transform: translateX(-100%);
  }
  
  .sm-sidebar.show {
    transform: translateX(0);
  }
  
  .sm-main-content {
    margin-left: 0 !important;
  }

  .sm-sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998; /* Just below sidebar */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }

  .sm-sidebar-overlay.show {
    opacity: 1;
    visibility: visible;
  }
  
  .sm-search-box {
    width: 200px;
  }
  
  /* Make all cards stack neatly with fixed margins */
  .row > [class*='col-'] > .sm-card {
    margin-bottom: 16px;
  }
}

/* Mobile (768px and down) */
@media (max-width: 767.98px) {
  :root {
    --sm-content-padding: 16px;
  }
  
  .sm-hero-content {
    max-width: 100%;
  }
  
  .sm-search-box {
    display: none; /* Hide large search on mobile, can use a button instead */
  }
  
  .sm-kpi-value {
    font-size: 28px;
  }
  
  .sm-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .sm-card-header .btn {
    width: 100%;
  }
}

/* Small Mobile (576px and down) */
@media (max-width: 575.98px) {
  .sm-topbar {
    padding: 0 16px;
  }
  
  .sm-topbar-right {
    gap: 4px;
  }
}