/* ==========================================================================
   responsive.css — the application's viewport breakpoints: the shell chrome's
   narrow-viewport rules plus three framework-class steps.
   --------------------------------------------------------------------------
   WHAT IT OWNS — media blocks only, no base rule:
     · Shell chrome at ≤522 / ≤591.98 / ≤991.98 / ≤838.98 / ≤767.98 / ≤991 /
       ≤575px: `.sidebar`, `.sidebar-footer`, `.logo-area`, `.header-logo`
       (+ img), `.profile-info`, `.profile-btn`, `.profile-area`,
       `.profile-dropdown`, `.bell-dropdown`, `.notification-dropdown`,
       `.full-width-header`, `#lblUserName`.
     · Framework classes: `.btn-sm` (≤578.98), `.btn-outline-secondary`
       (≤767.98), `.modal-lg` (≥992).
   The base rules these blocks override live in `legacy-chrome.css`,
   `compat\bootstrap5-shims.css`, `components\ics-layout.css` and the framework
   sheet. A NEW viewport breakpoint belongs in this sheet.

   LINK ORDER — LOAD-BEARING: LINK IT LAST. A media query adds NO specificity,
   so these blocks beat the base rules they override only by coming later in
   the cascade. `_Meta` links this sheet last of all stylesheets, after
   `components\ics-layout.css`; `_AuthMeta` links it last as well. Link it
   before `ics-layout.css` and every breakpoint here stops overriding the
   chrome it targets. `_MobileLayout` does not link it.

   DEPENDENCIES: none — raw values throughout.
   ========================================================================== */

@media (max-width: 522px) {
  .sidebar {
          min-height: auto;
          border-right: none;
          border-bottom: 1px solid #a1a1a1;
          padding: 0px;
      }

  .logo-area {
          width: auto;
          padding: 8px;
      }

  .header-logo {
          width: auto !important;
          padding: 2px !important;
      }

  .logo-area::after {
          display: none;
      }

  .profile-dropdown {
          top: 54px !important;
          right: 0;
      }
}

@media (max-width: 591.98px) {
  .header-logo img {
          width: auto !important;
          height: 35px !important;
      }
}

@media (max-width: 578.98px) {
  .btn-sm {
          /*        padding: 0px !important;*/
          border-radius: .2rem !important;
          font-size: 10px !important;
      }
}

@media (max-width: 991.98px) {
  .sidebar {
          min-height: auto;
          border-right: none;
          border-bottom: 1px solid #a1a1a1;
          padding: 0px;
      }

  .sidebar-footer {
          display: block;
          font-size: 12px;
      }
}

@media (max-width: 838.98px) {
  .profile-info {
          display: none;
      }

  .profile-btn {
          padding: 0px;
          width: auto;
      }

  .profile-dropdown {
          top: 31px !important;
          right: 0;
      }
}

@media (max-width: 767.98px) {
  .logo-area {
          width: auto;
          padding: 8px;
      }

  .header-logo {
          width: auto !important;
          padding: 2px !important;
      }

  .logo-area::after {
          display: none;
      }

  .btn-outline-secondary {
          font-size: 0.7rem;
          padding: 0.2rem 0.5rem;
      }
}

@media (min-width: 992px) {
  .modal-lg {
          max-width: 870px;
      }
}

@media (max-width: 991px) {
  .full-width-header {
          height: auto;
          min-height: 42px;
          padding: 4px 8px;
          flex-wrap: nowrap;          /* keep toggle + profile on one line */
      }

  .bell-dropdown,
      .notification-dropdown {
          right: 0 !important;
          left: auto !important;
      }

  .profile-dropdown {
          right: 0 !important;
          left: auto !important;
      }
}

@media (max-width: 575px) {
  #lblUserName {
          display: none !important;
      }

  .profile-area {
          gap: 8px !important;
      }

  .bell-dropdown,
      .notification-dropdown,
      .profile-dropdown {
          min-width: min(250px, 90vw) !important;
          max-width: 90vw !important;
      }
}