/* =======================================================================
   📱 RESPONSIVE DESIGN — AR MANAGER
   This file contains all responsive breakpoints for every page.
   Each page has its own dedicated section with clear headers.
   ======================================================================= */


/* ***********************************************************************
   PAGE: LOGIN (index.html)
   Description:
     Responsive adjustments for the login page to ensure the form,
     logos, input fields, and buttons scale properly on tablets and
     mobile devices.
   *********************************************************************** */


/* -------------------------------
   📌 Tablet — max-width 768px
   ------------------------------- */
@media (max-width: 768px) {

  .login-container {
    width: 90%;
    padding: 35px 35px;
  }

  .login-logo-main {
    height: 70px;
  }

  .login-logo-sub {
    height: 55px;
  }

  .login-input {
    width: 80% !important;
    max-width: 260px;
  }

  .password-wrapper {
    width: 80% !important;
    max-width: 260px;
  }

  .login-btn {
    width: 80%;
    max-width: 260px;
  }
}


/* -------------------------------
   📌 Mobile — max-width 480px
   ------------------------------- */
@media (max-width: 480px) {

  .login-container {
    width: 92%;
    padding: 25px 20px;
  }

  .login-logo-main {
    height: 60px;
  }

  .login-logo-sub {
    height: 48px;
  }

  .login-input {
    width: 100% !important;
  }

  .password-wrapper {
    width: 100% !important;
  }

  .show-password {
    right: 10px;
    width: 16px;
    height: 16px;
  }

  .login-btn {
    width: 100%;
    padding: 12px;
    font-size: 15px;
  }

  .forgot-password {
    font-size: 13px;
    margin-top: 8px;
  }
}

/* ***********************************************************************
   PAGE: DASHBOARD (dashboard.html)
   — Overridden with higher specificity to beat style.css
   *********************************************************************** */


/* =======================================================================
   📌 TABLET — max-width 1024px
   ======================================================================= */
@media (max-width: 1024px) {

  body .logo-center {
    height: 95px !important;
  }

  body .user-menu {
    right: 18% !important;
    top: 32% !important;
  }

  body .navbar {
    gap: 50px !important;
    padding: 12px 20px !important;
  }

  body .dashboard-logo {
    height: 90px !important;
  }

  body .search-input {
    width: 320px !important;
  }

  body .filter-select {
    width: 120px !important;
  }

  body .filter-btn {
    padding: 8px 15px !important;
  }

  body .account-details-container {
    gap: 20px !important;
  }

  body .customer-details {
    width: 300px !important;
    padding: 20px !important;
  }
}



/* =======================================================================
   📌 MOBILE — max-width 768px
   ======================================================================= */
@media (max-width: 768px) {

  /* HEADER */
  body .logo-center {
    height: 80px !important;
  }

  body .user-menu {
    right: 10% !important;
    top: 30% !important;
  }

  body .avatar {
    width: 40px !important;
    height: 40px !important;
  }

  /* NAVBAR */
  body .navbar {
    gap: 30px !important;
    padding: 10px 10px !important;
  }

  body .navbar a {
    font-size: 15px !important;
  }

  /* LOGO */
  body .dashboard-logo {
    height: 80px !important;
  }

  body .table-desc {
    font-size: 14px !important;
    width: 90% !important;
  }

  /* FILTER BAR STACK */
  body .filter-bar {
    flex-direction: column !important;
    text-align: center !important;
    gap: 18px !important;
  }

  body .filter-center form {
    flex-direction: column !important;
    width: 100% !important;
  }

  body .search-input {
    width: 100% !important;
    max-width: 400px !important;
  }

  body .filter-text {
    font-size: 14px !important;
  }

  body .filter-select {
    width: 100% !important;
    max-width: 200px !important;
  }

  body .filter-btn {
    width: 100% !important;
    max-width: 200px !important;
  }

  body .filter-right {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* TWO-COLUMN → SINGLE COLUMN */
  body .account-details-container {
    flex-direction: column !important;
    align-items: center !important;
    gap: 25px !important;
  }

  body .customer-details {
    width: 90% !important;
    max-width: 380px !important;
  }

  body .table-container {
    width: 95% !important;
    max-width: 95% !important;
  }
}



/* =======================================================================
   📌 SMALL MOBILE — max-width 480px
   ======================================================================= */
@media (max-width: 480px) {

  /* HEADER */
  body .logo-center {
    height: 60px !important;
  }

  body .user-menu {
    right: 5% !important;
    top: 28% !important;
  }

  body .avatar {
    width: 36px !important;
    height: 36px !important;
  }

  /* NAVBAR */
  body .navbar {
    gap: 12px !important;
    padding: 8px 0 !important;
  }

  body .navbar a {
    font-size: 14px !important;
  }

  /* LOGO */
  body .dashboard-logo {
    height: 70px !important;
  }

  body .table-desc {
    font-size: 13px !important;
    width: 95% !important;
  }

  /* FILTER BAR */
  body .search-input {
    width: 100% !important;
    max-width: none !important;
    font-size: 14px !important;
    padding: 8px 12px !important;
  }

  body .filter-select,
  body .filter-btn {
    width: 100% !important;
    max-width: none !important;
  }

  body .filter-text {
    font-size: 13px !important;
  }

  /* LEFT PANEL */
  body .customer-details {
    width: 100% !important;
    padding: 18px !important;
  }

  #add-product-form label {
    font-size: 13px !important;
  }

  #add-product-form input,
  #add-product-form select {
    font-size: 14px !important;
  }

  /* TABLE OVERRIDES */
  body table {
    min-width: 650px !important;
  }

  /* Hide: Practice Name + Phone */
  body th:nth-child(2),
  body td:nth-child(2),
  body th:nth-child(5),
  body td:nth-child(5) {
    display: none !important;
  }

  body th,
  body td {
    padding: 8px 10px !important;
    font-size: 13px !important;
  }

  body .sort-arrow {
    font-size: 0.75rem !important;
  }

  body .no-data-message {
    font-size: 0.9rem !important;
  }
}



/* =======================================================================
   📌 ULTRA-SMALL MOBILE — max-width 360px
   ======================================================================= */
@media (max-width: 360px) {

  body .logo-center {
    height: 50px !important;
  }

  body .navbar a {
    font-size: 13px !important;
  }

  body .customer-details {
    padding: 15px !important;
  }

  body .dashboard-logo {
    height: 60px !important;
  }

  body table {
    min-width: 600px !important;
  }
}