/* Zoom Optimization for 125% scale ONLY */
/* IMPORTANT: Only applies to desktop devices - does NOT affect mobile design */
/* Add this file after style.css in index.html */

/* 125% zoom optimization - DESKTOP ONLY */
/* STRICT: Only applies when browser zoom is exactly 125% */
@media (min-width: 769px) and (min-resolution: 1.25dppx) and (max-resolution: 1.25dppx),
       (min-width: 769px) and (-webkit-min-device-pixel-ratio: 1.25) and (-webkit-max-device-pixel-ratio: 1.25),
       (min-width: 769px) and (min-zoom: 1.25) and (max-zoom: 1.25) {
  
  /* Sidebar adjustments */
  .sidebar {
    width: 220px !important;
    padding: 1.5rem 0.8rem !important;
  }
  
  .content {
    margin-left: 220px !important;
    padding: 1.5rem !important;
  }
  
  /* Card adjustments */
  .card {
    padding: 1.2rem !important;
    margin-bottom: 1.2rem !important;
  }
  
  .card-icon img {
    width: 48px !important;
    height: 48px !important;
  }
  
  /* Typography adjustments */
  .sidebar-header {
    font-size: 1.4rem !important;
  }
  
  .nav-link {
    padding: 0.5rem 0.8rem !important;
    font-size: 0.9rem !important;
  }
  
  .section h2 {
    font-size: 1.5rem !important;
  }
  
  .card-content h3 {
    font-size: 1.1rem !important;
  }
  
  /* Modal adjustments */
  .modal-box {
    max-width: 400px !important;
    font-size: 0.8rem !important;
  }
  
  /* Button adjustments */
  .switch {
    width: 38px !important;
    height: 22px !important;
  }
  
  .slider:before {
    width: 14px !important;
    height: 14px !important;
    left: 3px !important;
    bottom: 3px !important;
  }
  
  input:checked + .slider:before {
    transform: translateX(16px) !important;
  }
}

/* Only apply 125% zoom adjustments - NO other zoom levels supported */
/* This ensures normal scale looks exactly like original design */

/* Better viewport handling for 125% zoom - DESKTOP ONLY */
/* STRICT: Only applies when browser zoom is exactly 125% */
@supports (zoom: 1) {
  @media (min-width: 769px) and (zoom: 1.25) {
    .sidebar { width: 220px !important; }
    .content { margin-left: 220px !important; }
  }
}