/* ==========================================================================
1. ULTRAWIDE MONITORS
   ========================================================================== */
@media (max-width: 1920px) {
  /* Desktop styles are perfectly handled in admin.css; no overrides needed here */
}

/* ==========================================================================
2. LARGE DESKTOPS
   ========================================================================== */
@media (max-width: 1600px) {
  /* Desktop styles are perfectly handled in admin.css; no overrides needed here */
}

/* ==========================================================================
3. DESKTOPS
   ========================================================================== */
@media (max-width: 1440px) {
  /* Desktop styles are perfectly handled in admin.css; no overrides needed here */
}

/* ==========================================================================
4. SMALL DESKTOPS / LARGE LAPTOPS
   ========================================================================== */
@media (max-width: 1280px) {
  .admin-card {
    padding: 38px;
  }
}

/* ==========================================================================
5. LAPTOPS
   ========================================================================== */
@media (max-width: 1100px) {
  .admin-container {
    padding: 30px 16px;
  }
}

/* ==========================================================================
6. TABLET LANDSCAPE
   ========================================================================== */
@media (max-width: 1024px) {
  .admin-card {
    width: 90%;
    max-width: 400px;
    padding: 35px 30px;
  }
}

/* ==========================================================================
7. SMALL TABLET LANDSCAPE
   ========================================================================== */
@media (max-width: 992px) {
  /* Tablet scale remains stable; no overrides needed here */
}

/* ==========================================================================
8. IPAD AIR / IPAD MINI / SMALL TABLETS
   ========================================================================== */
@media (max-width: 820px) {
  .admin-card {
    width: 90%;
    max-width: 390px;
    padding: 30px 24px;
    border-radius: 20px;
  }
  .admin-title {
    font-size: 24px;
  }
  .admin-logo-img {
    height: 52px;
  }
}

/* ==========================================================================
9. TABLET PORTRAIT
   ========================================================================== */
@media (max-width: 768px) {
  /* Proportional scaling matches previous tablet layout */
}

/* ==========================================================================
10. MOBILE LANDSCAPE / SMALL TABLET
    ========================================================================== */
@media (max-width: 640px) {
  .admin-container {
    padding: 20px 10px;
  }
  .admin-card {
    width: 95%;
    max-width: 380px;
    padding: 24px 20px;
  }
  .admin-title {
    font-size: 22px;
  }
  .admin-logo-text {
    font-size: 13px;
    margin-bottom: 12px;
  }
  .admin-logo-img {
    height: 48px;
  }
  .admin-security-title {
    font-size: 11.5px;
  }
  .admin-security-subtitle {
    font-size: 10.5px;
  }
  .admin-footer p {
    font-size: 11px;
  }
}

/* ==========================================================================
11. LARGE MOBILE
    ========================================================================== */
@media (max-width: 480px) {
  .admin-card {
    width: 95%;
    max-width: 360px;
    padding: 20px 16px;
    border-radius: 18px;
  }
  .admin-title {
    font-size: 20px;
  }
  .admin-subtitle {
    font-size: 12.5px;
  }
  .admin-options-row {
    font-size: 12px;
  }
  .admin-input {
    font-size: 13.5px;
    padding: 11px 14px 11px 42px;
  }
  .admin-input-wrapper .admin-input[type="password"],
  .admin-input-wrapper .admin-input[type="text"] {
    padding-right: 42px;
  }
  .admin-field-icon {
    left: 14px;
    font-size: 14px;
  }
  .admin-toggle-password {
    right: 14px;
    font-size: 14px;
  }
  .admin-btn {
    font-size: 14px;
    padding: 11px 16px;
  }
  .back-to-site-btn {
    font-size: 13.5px;
    padding: 11px 16px;
  }
  .admin-security-badge {
    width: 34px;
    height: 34px;
    font-size: 14px;
  }
  .admin-divider-container {
    margin: 18px 0;
  }
}

/* ==========================================================================
12. IPHONE PLUS / PRO MAX
    ========================================================================== */
@media (max-width: 430px) {
  /* Perfect fit in standard mobile width; no overrides needed here */
}

/* ==========================================================================
13. MOBILE SMALL-MEDIUM
    ========================================================================== */
@media (max-width: 414px) {
  /* Perfect fit in standard mobile width; no overrides needed here */
}

/* ==========================================================================
14. MOBILE SMALL
    ========================================================================== */
@media (max-width: 390px) {
  .admin-card {
    width: 95%;
    max-width: 350px;
  }
}

/* ==========================================================================
15. IPHONE SE / SMALL
    ========================================================================== */
@media (max-width: 375px) {
  .admin-card {
    width: 95%;
    max-width: 340px;
  }
  .admin-title {
    font-size: 19px;
  }
  .admin-subtitle {
    font-size: 12px;
  }
  .admin-logo-text {
    font-size: 12px;
  }
}

/* ==========================================================================
16. ANDROID SMALL
    ========================================================================== */
@media (max-width: 360px) {
  .admin-card {
    width: 95%;
    max-width: 330px;
    padding: 16px 12px;
  }
  .admin-options-row {
    flex-direction: row;
    gap: 4px;
    font-size: 11px;
  }
  .admin-input {
    font-size: 13px;
  }
}

/* ==========================================================================
17. EXTRA SMALL DEVICES
    ========================================================================== */
@media (max-width: 320px) {
  .admin-card {
    width: 95%;
    max-width: 300px;
    padding: 14px 10px;
  }
  .admin-title {
    font-size: 18px;
  }
  .admin-subtitle {
    font-size: 11px;
  }
  .admin-logo-img {
    height: 40px;
  }
  .admin-logo-text {
    font-size: 11px;
    margin-bottom: 8px;
  }
  .admin-options-row {
    font-size: 10px;
  }
}