:root {
  --smdr-primary: #206bc4;
  --smdr-ink: #17233c;
  --smdr-muted: #667085;
  --smdr-sidebar: #111827;
  --smdr-sidebar-soft: #1f2937;
  --smdr-green: #12b76a;
  --smdr-orange: #f79009;
}

body {
  background:
    radial-gradient(circle at top right, rgba(32, 107, 196, .10), transparent 34rem),
    #f6f8fb;
}

.app-loading-overlay {
  align-items: center;
  background: rgba(246, 248, 251, .72);
  backdrop-filter: blur(3px);
  display: flex;
  inset: 0;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transition: opacity .14s ease;
  z-index: 3000;
}

.app-loading-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.app-loading-box {
  align-items: center;
  background: #fff;
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .14);
  color: #17233c;
  display: flex;
  gap: .85rem;
  min-width: 13.5rem;
  padding: .95rem 1.05rem;
}

.app-loading-spinner {
  animation: app-loading-spin .72s linear infinite;
  border: 3px solid rgba(32, 107, 196, .18);
  border-radius: 50%;
  border-top-color: #206bc4;
  display: inline-block;
  flex: 0 0 auto;
  height: 2rem;
  width: 2rem;
}

.app-loading-title {
  font-size: .9rem;
  font-weight: 750;
  line-height: 1.2;
}

.app-loading-text {
  color: #667085;
  font-size: .76rem;
  margin-top: .1rem;
}

button.is-loading {
  pointer-events: none;
}

@keyframes app-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.page-wrapper > .navbar .container-xl,
.page-body > .container-xl {
  max-width: 1600px;
}

.sidebar-brand {
  background: linear-gradient(180deg, var(--smdr-sidebar), #0b1220);
  border-right: 0;
}

.sidebar-brand .navbar-brand {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.brand-lockup {
  align-items: center;
  color: #fff;
  display: inline-flex;
  font-weight: 800;
  gap: .75rem;
  letter-spacing: 0;
  text-decoration: none;
}

.brand-logo {
  display: block;
  height: 2.55rem;
  max-width: 12.5rem;
  object-fit: contain;
}

.hero-login .brand-logo {
  height: 3rem;
  max-width: 15rem;
}

.auth-logo-wrap {
  align-items: center;
  background: #0f172a;
  border: 1px solid rgba(116, 192, 252, .22);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  padding: .65rem 1rem;
  width: 100%;
}

.auth-logo {
  display: block;
  height: 2.35rem;
  max-width: 13rem;
  object-fit: contain;
}

.sidebar-brand .navbar-brand .brand-lockup:hover,
.sidebar-brand .navbar-brand .brand-lockup:focus {
  opacity: 1;
}

.brand-lockup span span {
  color: #74c0fc;
}

.brand-mark {
  align-items: center;
  background: rgba(116, 192, 252, .16);
  border: 1px solid rgba(116, 192, 252, .30);
  border-radius: 8px;
  display: inline-flex;
  height: 2.25rem;
  justify-content: center;
  width: 2.25rem;
}

.sidebar-brand .nav-link {
  color: rgba(255, 255, 255, .78) !important;
}

.sidebar-brand .nav-link:hover,
.sidebar-brand .nav-link:focus,
.sidebar-brand .nav-link.show,
.sidebar-brand .nav-item.show > .nav-link,
.sidebar-brand .sidebar-group:hover > .nav-link,
.sidebar-brand .nav-item.active > .nav-link,
.sidebar-brand .nav-item.dropdown:has(.dropdown-menu.show) > .nav-link {
  background: rgba(255, 255, 255, .08);
  color: #fff !important;
}

.sidebar-brand .nav-link:hover .nav-link-title,
.sidebar-brand .nav-link:focus .nav-link-title,
.sidebar-brand .nav-link.show .nav-link-title,
.sidebar-brand .nav-item.show > .nav-link .nav-link-title,
.sidebar-brand .sidebar-group:hover > .nav-link .nav-link-title,
.sidebar-brand .nav-item.active > .nav-link .nav-link-title {
  color: #fff !important;
}

.sidebar-brand .nav-link:hover .nav-link-icon,
.sidebar-brand .nav-link:focus .nav-link-icon,
.sidebar-brand .nav-link.show .nav-link-icon,
.sidebar-brand .nav-item.show > .nav-link .nav-link-icon,
.sidebar-brand .sidebar-group:hover > .nav-link .nav-link-icon,
.sidebar-brand .nav-item.active > .nav-link .nav-link-icon {
  color: #93c5fd !important;
}

.sidebar-brand .dropdown-menu {
  background: rgba(15, 23, 42, .74);
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 8px;
  box-shadow: none;
  margin: .25rem .75rem .65rem 2.35rem;
  padding: .35rem;
}

.sidebar-brand .dropdown-menu .dropdown-item {
  border-radius: 6px;
  color: rgba(226, 232, 240, .86) !important;
  font-size: .875rem;
  padding: .48rem .7rem;
}

.sidebar-brand .dropdown-menu .dropdown-item:hover,
.sidebar-brand .dropdown-menu .dropdown-item:focus,
.sidebar-brand .dropdown-menu .dropdown-item.active {
  background: rgba(96, 165, 250, .16) !important;
  color: #fff !important;
}

.sidebar-brand .dropdown-toggle::after {
  color: rgba(226, 232, 240, .72);
}

.topbar-blur {
  backdrop-filter: blur(14px);
  background: rgba(255, 255, 255, .86);
  border-bottom: 1px solid rgba(15, 23, 42, .07);
  position: relative;
  z-index: 1020;
}

.topbar-blur .dropdown-menu {
  z-index: 1030;
}

.user-profile-menu {
  background: #fff;
  min-width: 9rem;
  opacity: 1;
}

.mobile-profile-dropdown {
  display: none;
}

@media (max-width: 767.98px) {
  .sidebar-brand .navbar-toggler {
    border-color: rgba(116, 192, 252, .28);
    color: #e5f2ff;
    height: 2.25rem;
    left: 1rem;
    opacity: 1;
    position: absolute;
    top: 1.15rem;
    width: 2.25rem;
  }

  .sidebar-brand .navbar-brand {
    margin-left: 3rem;
  }

  .brand-logo {
    height: 2.35rem;
    max-width: 11rem;
  }

  .sidebar-brand .navbar-toggler-icon {
    filter: brightness(0) invert(1);
    opacity: .9;
  }

  .topbar-blur .navbar-nav.order-md-last {
    display: none;
  }

  .mobile-profile-dropdown {
    display: block;
    position: absolute;
    right: 1rem;
    top: .15rem;
    transform: none;
    z-index: 1040;
  }

  .mobile-profile-dropdown .avatar {
    height: 2.25rem;
    width: 2.25rem;
  }

  .mobile-profile-dropdown.nav-item.dropdown {
    position: relative;
  }

  .mobile-profile-dropdown .user-profile-menu {
    background: #fff !important;
    border-color: rgba(15, 23, 42, .12) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .16);
    left: auto !important;
    max-width: calc(100vw - 1rem);
    right: 0 !important;
    transform: none !important;
  }

  .mobile-profile-dropdown .user-profile-menu .dropdown-item {
    color: #17233c !important;
  }

  .mobile-profile-dropdown .user-profile-menu .dropdown-item:hover,
  .mobile-profile-dropdown .user-profile-menu .dropdown-item:focus {
    background: #eef4ff !important;
    color: #0f172a !important;
  }

  .mobile-profile-dropdown .user-profile-menu.dropdown-menu-arrow::before {
    left: auto;
    right: .85rem;
  }
}

.modal-backdrop {
  z-index: 2000;
}

.modal {
  z-index: 2010;
}

.page-body {
  position: relative;
}

.pbx-switcher {
  min-width: 15rem;
}

.metric-card {
  border: 0;
  box-shadow: 0 14px 40px rgba(15, 23, 42, .07);
}

.metric-icon {
  align-items: center;
  border-radius: 8px;
  display: inline-flex;
  height: 2.75rem;
  justify-content: center;
  width: 2.75rem;
}

.metric-icon.blue { background: rgba(32, 107, 196, .12); color: #206bc4; }
.metric-icon.green { background: rgba(18, 183, 106, .12); color: #12b76a; }
.metric-icon.orange { background: rgba(247, 144, 9, .14); color: #f79009; }
.metric-icon.red { background: rgba(214, 57, 57, .12); color: #d63939; }

.hero-login {
  background:
    linear-gradient(135deg, rgba(17, 24, 39, .96), rgba(30, 64, 175, .88)),
    url("data:image/svg+xml,%3Csvg width='720' height='720' viewBox='0 0 720 720' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.13'%3E%3Cpath d='M60 430c90-130 140-130 230 0s150 130 240 0 140-130 210 0'/%3E%3Cpath d='M-10 300c90-130 140-130 230 0s150 130 240 0 140-130 210 0'/%3E%3Cpath d='M100 560c90-130 140-130 230 0s150 130 240 0'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  color: #fff;
}

.login-stat {
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  padding: 1rem;
}

.table-vcenter td,
.table-vcenter th {
  vertical-align: middle;
}

.mail-account-table th,
.mail-account-table td,
.mail-plan-table th,
.mail-plan-table td,
.customer-table th,
.customer-table td,
.pbx-table th,
.pbx-table td {
  font-size: .875rem;
  height: 2.75rem;
  padding-bottom: .72rem;
  padding-top: .72rem;
}

.mail-account-table thead th,
.mail-plan-table thead th,
.customer-table thead th,
.pbx-table thead th {
  background: #e8eef6;
  color: #17233c;
  font-size: .775rem;
  font-weight: 700;
  height: 2.75rem;
}

.mail-account-table > :not(caption) > * > *,
.mail-plan-table > :not(caption) > * > *,
.customer-table > :not(caption) > * > *,
.pbx-table > :not(caption) > * > * {
  font-size: .875rem;
}

.mail-list-card {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 9.5rem);
  min-height: 30rem;
}

.mail-list-card .card-header {
  flex: 0 0 auto;
}

.mail-settings-tabs {
  margin-bottom: -1px;
}

.mail-settings-tabs .nav-tabs {
  border-bottom: 0;
}

.mail-settings-tabs .nav-link {
  background: transparent;
  border-color: transparent;
  color: #4b5565;
  font-size: .875rem;
}

.mail-settings-tabs .nav-link.active {
  background: #fff;
  border-color: #d9e0ea #d9e0ea #fff;
  color: #17233c;
}

.mail-list-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.mail-list-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.mail-plan-dialog {
  max-width: min(760px, calc(100vw - 2rem));
}

.mail-plan-form {
  background: #f8fafc;
  border: 1px solid #e5eaf2;
  border-radius: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  overflow: hidden;
}

.mail-plan-form-pair,
.mail-plan-scope-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.mail-plan-scope-grid {
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
}

.mail-plan-section-title {
  background: #eef3f9;
  border-bottom: 1px solid #dfe7f1;
  color: #17233c;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: 0;
  padding: .5rem .75rem;
}

.mail-plan-form-row {
  align-items: center;
  border-bottom: 1px solid #edf1f6;
  display: grid;
  grid-template-columns: 8.6rem 1fr;
  min-height: 2.55rem;
}

.mail-plan-form > .mail-plan-form-row:nth-child(3),
.mail-plan-form > .mail-plan-section-title,
.mail-plan-form > .mail-plan-section-title + .mail-plan-form-row,
.mail-plan-form > .mail-plan-form-row:nth-last-child(2),
.mail-plan-form > .mail-plan-form-row:last-child {
  grid-column: 1 / -1;
}

.mail-plan-form > .mail-plan-extension-row {
  grid-column: 1;
  grid-row: 7 / span 6;
}

.mail-plan-form > .mail-plan-extension-row ~ .mail-plan-form-row:not(:nth-last-child(2)):not(:last-child) {
  grid-column: 2;
}

.mail-plan-form-row:last-child {
  border-bottom: 0;
}

.mail-plan-form-pair .mail-plan-form-row:first-child,
.mail-plan-scope-grid > .mail-plan-form-row {
  border-right: 1px solid #edf1f6;
}

.mail-plan-form-row-tall,
.mail-plan-extension-row {
  align-items: stretch;
}

.mail-plan-form-label {
  align-self: stretch;
  align-items: center;
  background: #f3f6fa;
  color: #0f172a;
  display: flex;
  font-size: .78rem;
  font-weight: 700;
  padding: .5rem .65rem;
}

.mail-plan-form-control {
  padding: .3rem .45rem;
}

.mail-plan-form-control .form-control,
.mail-plan-form-control .form-select {
  font-size: .78rem;
  min-height: 2rem;
  padding-bottom: .28rem;
  padding-top: .28rem;
}

.mail-plan-form-control textarea.form-control {
  min-height: 4.7rem;
}

.mail-plan-department-control {
  align-items: stretch;
  display: grid;
  gap: .35rem;
  grid-template-columns: minmax(0, 1fr) 2.1rem;
}

.mail-plan-department-control .btn {
  min-height: 2rem;
}

.mail-plan-form-control select[multiple] {
  min-height: 7rem;
}

.notification-card {
  border: 1px solid #dfe7f1;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 9.5rem);
  min-height: 30rem;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .05);
}

.notification-card > .card-header {
  flex: 0 0 auto;
}

.notification-card > .card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.notification-card .tab-content {
  flex: 1 1 auto;
  min-height: 0;
}

.notification-card .tab-pane {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.notification-card .tab-pane.active {
  display: flex;
  flex-direction: column;
}

.notification-form-grid {
  background: #f8fafc;
  border: 1px solid #e5eaf2;
  border-radius: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  overflow: hidden;
}

.notification-form-row {
  align-items: stretch;
  border-bottom: 1px solid #edf1f6;
  display: grid;
  grid-template-columns: 8.8rem minmax(0, 1fr);
  margin: 0;
  min-height: 2.55rem;
}

.notification-form-row:nth-child(odd) {
  border-right: 1px solid #edf1f6;
}

.notification-form-row > span {
  align-items: center;
  background: #f3f6fa;
  color: #0f172a;
  display: flex;
  font-size: .78rem;
  font-weight: 700;
  padding: .45rem .65rem;
}

.notification-form-row > .form-control,
.notification-form-row > .form-select,
.notification-event-list {
  border: 0;
  border-radius: 0;
  font-size: .8rem;
  min-height: 2.45rem;
}

.notification-event-list {
  align-items: center;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .65rem;
  padding: .45rem .65rem;
}

.notification-public-key-control {
  align-items: stretch;
  background: #fff;
}

.notification-public-key-control .form-control,
.notification-public-key-control .btn {
  border-bottom: 0;
  border-radius: 0;
  border-top: 0;
}

.notification-row-tall select[multiple] {
  min-height: 8rem;
}

.notification-row-wide {
  grid-column: 1 / -1;
}

.notification-row-wide:nth-child(odd) {
  border-right: 0;
}

.notification-table th,
.notification-table td {
  font-size: .875rem;
  height: 2.75rem;
  padding-bottom: .68rem;
  padding-top: .68rem;
}

.notification-table thead th {
  background: #e8eef6;
  color: #17233c;
  font-size: .775rem;
  font-weight: 700;
  text-transform: uppercase;
}

.notification-table-scroll {
  flex: 1 1 auto;
  max-height: none;
  min-height: 0;
  overflow: auto;
}

.notification-settings-form {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.notification-history-scroll {
  max-height: none;
}

.notification-history-filter {
  border-bottom: 1px solid rgba(98, 105, 118, .16);
  margin: -.25rem -.25rem .75rem;
  padding: .25rem .25rem .75rem;
}

.notification-device-toolbar {
  min-height: 2.4rem;
}

.notification-device-table-scroll {
  max-height: none;
  min-height: 0;
}

.notification-device-name-input {
  max-width: 24rem;
}

.notification-invite-link-group {
  min-width: 22rem;
}

.notification-table-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.notification-current-device-badge {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  .mail-plan-form {
    grid-template-columns: 1fr;
  }

  .mail-plan-form > .mail-plan-extension-row,
  .mail-plan-form > .mail-plan-extension-row ~ .mail-plan-form-row:not(:nth-last-child(2)):not(:last-child) {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .mail-plan-form-pair,
  .mail-plan-scope-grid {
    grid-template-columns: 1fr;
  }

  .mail-plan-form-pair .mail-plan-form-row:first-child,
  .mail-plan-scope-grid > .mail-plan-form-row {
    border-right: 0;
  }
}

@media (max-width: 575.98px) {
  .mail-plan-form-row {
    grid-template-columns: 1fr;
  }

  .mail-plan-form-label {
    border-bottom: 1px solid #edf1f6;
  }
}

.status-dot {
  border-radius: 999px;
  display: inline-block;
  height: .55rem;
  margin-right: .35rem;
  width: .55rem;
}

.status-dot.ok { background: var(--smdr-green); }
.status-dot.warn { background: var(--smdr-orange); }
.status-dot.err { background: #d63939; }

.customer-pbx-picker {
  max-height: 180px;
  overflow-y: auto;
}

.customer-pbx-row {
  align-items: flex-start;
  border-bottom: 1px solid rgba(98, 105, 118, .16);
  cursor: pointer;
  display: flex;
  gap: .65rem;
  margin: 0;
  padding: .65rem .8rem;
}

.customer-pbx-row:last-child {
  border-bottom: 0;
}

.customer-pbx-check {
  accent-color: var(--smdr-primary);
  flex: 0 0 auto;
  height: 1rem;
  margin-top: .18rem;
  width: 1rem;
}

.customer-pbx-label {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: .25rem .45rem;
  min-width: 0;
}

.customer-list-card {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 9.5rem);
  min-height: 30rem;
}

.customer-list-card .card-header {
  flex: 0 0 auto;
  gap: .75rem;
}

.customer-list-card .card-header .ms-auto {
  flex: 0 1 auto;
  flex-wrap: nowrap;
  justify-content: flex-end;
  min-width: 0;
}

.customer-list-search,
.customer-search {
  align-items: center;
  display: flex;
  gap: .5rem;
  min-width: 14rem;
  width: min(22rem, 42vw);
}

.customer-list-scroll {
  flex: 1 1 auto;
  max-height: none;
  min-height: 0;
  overflow: auto;
}

.customer-list-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.ajax-customer-select {
  position: relative;
}

.ajax-customer-results {
  max-height: 220px;
  overflow-y: auto;
  width: 100%;
}

.users-management-page {
  height: calc(100vh - 9.5rem);
  min-height: 0;
}

.user-form-card,
.user-list-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.user-form-scroll,
.user-list-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.user-form-card .card-footer,
.user-list-card .card-header {
  flex: 0 0 auto;
}

.user-list-header {
  align-items: center;
  gap: .75rem;
}

.user-list-search {
  margin-left: auto;
  width: min(18rem, 100%);
}

.group-list-search {
  margin-left: auto;
  width: min(18rem, 100%);
}

.user-list-scroll thead th {
  background: var(--tblr-card-bg, #fff);
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 2;
}

.user-list-card .table tbody tr:hover > td,
.user-list-card .table tbody tr:hover > th {
  --tblr-table-bg-state: #eef3f9;
  background-color: #eef3f9 !important;
}

.user-action-cell {
  min-width: 5.5rem;
  white-space: nowrap;
}

.user-action-cell .btn + form,
.user-action-cell form + .btn {
  margin-left: .25rem;
}

.user-online-dot,
.user-offline-dot {
  border-radius: 50%;
  display: inline-block;
  height: .55rem;
  width: .55rem;
}

.user-online-dot {
  background: #12b76a;
  box-shadow: 0 0 0 .2rem rgba(18, 183, 106, .16);
}

.user-offline-dot {
  background: #98a2b3;
}

.group-action-cell {
  min-width: 5.5rem;
  white-space: nowrap;
}

.group-action-cell .btn + form,
.group-action-cell form + .btn {
  margin-left: .25rem;
}

.groups-management-page {
  height: calc(100vh - 10.5rem);
  min-height: 0;
}

.groups-management-page > [class*="col-"] {
  height: 100%;
  min-height: 0;
}

.group-form-card,
.group-list-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.group-form-scroll,
.group-list-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.group-form-card .card-footer,
.group-list-card .card-header {
  flex: 0 0 auto;
}

.group-list-scroll thead th {
  background: var(--tblr-card-bg, #fff);
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 2;
}

.group-list-card .table tbody tr:hover > td,
.group-list-card .table tbody tr:hover > th {
  --tblr-table-bg-state: #eef3f9;
  background-color: #eef3f9 !important;
}

.departments-management-page {
  height: calc(100vh - 10.5rem);
  min-height: 0;
}

.departments-management-page > [class*="col-"] {
  height: 100%;
  min-height: 0;
}

.department-form-card,
.department-list-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.department-form-scroll,
.department-list-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.department-form-card .card-footer,
.department-list-card .card-header {
  flex: 0 0 auto;
}

.department-list-search {
  margin-left: auto;
  width: min(18rem, 100%);
}

.department-list-scroll thead th {
  background: var(--tblr-card-bg, #fff);
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 2;
}

.department-list-card .table tbody tr:hover > td,
.department-list-card .table tbody tr:hover > th {
  --tblr-table-bg-state: #eef3f9;
  background-color: #eef3f9 !important;
}

.department-action-cell {
  min-width: 5.5rem;
  white-space: nowrap;
}

.department-action-cell > .btn,
.department-action-cell > form {
  margin-left: .25rem;
}

.department-action-cell > .btn:first-child,
.department-action-cell > form:first-child {
  margin-left: 0;
}

.department-action-cell .btn + form,
.department-action-cell form + .btn {
  margin-left: .25rem;
}

@media (max-width: 991.98px) {
  .users-management-page {
    height: auto;
  }

  .groups-management-page {
    height: auto;
  }

  .departments-management-page {
    height: auto;
  }

  .groups-management-page > [class*="col-"] {
    height: auto;
  }

  .departments-management-page > [class*="col-"] {
    height: auto;
  }

  .user-form-card,
  .user-list-card,
  .group-form-card,
  .group-list-card,
  .department-form-card,
  .department-list-card {
    height: auto;
    max-height: calc(100vh - 7.5rem);
    min-height: 24rem;
  }
}

.pbx-page {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: calc(100vh - 9.5rem);
  min-height: 30rem;
}

.pbx-form-card,
.pbx-list-card {
  flex: 0 0 auto;
}

.pbx-list-card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.pbx-list-header {
  align-items: center;
  gap: .75rem;
}

.pbx-list-search {
  align-items: center;
  display: flex;
  gap: .35rem;
  margin-left: auto;
  width: min(18rem, 100%);
}

.pbx-new-button {
  flex: 0 0 auto;
}

.pbx-list-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.pbx-list-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.pbx-table tbody tr:hover td {
  background: #eef4fb;
}

#pbx-new-modal .col-md-6:has(input[name="recording_disk_limit_gb"]),
#pbx-new-modal .col-md-6:has(input[name="recording_retention_days"]),
#pbx-basic-modal .col-md-6:has(input[name="recording_disk_limit_gb"]),
#pbx-basic-modal .col-md-6:has(input[name="recording_retention_days"]) {
  margin-top: 0.75rem;
}

.recordings-page {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: calc(100vh - 9.5rem);
  min-height: 32rem;
}

.calls-page {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: calc(100vh - 9.5rem);
  min-height: 32rem;
}

.recording-filter-card,
.recording-list-card,
.call-list-card {
  flex: 0 0 auto;
}

.recording-filter-card .form-label {
  align-items: center;
  display: inline-flex;
  gap: .15rem;
}

.recording-filter-card .form-label i {
  color: #206bc4;
  font-size: .9rem;
}

.recording-filter-card .form-label .btn-link,
.recording-filter-card .form-label .btn-link:hover,
.recording-filter-card .form-label .btn-link:focus {
  text-decoration: none;
}

.recording-filter-submit {
  align-items: center;
  display: inline-flex;
  height: 2.5rem;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0;
  width: 2.5rem;
}

.recording-filter-submit i {
  font-size: .95rem;
  line-height: 1;
}

.recording-search-group {
  align-items: stretch;
  display: flex;
  width: 100%;
}

.recording-search-group .input-icon-addon {
  z-index: 2;
}

.recording-search-group .form-control {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  flex: 1 1 auto;
  height: 2.5rem;
  min-width: 0;
  width: 1%;
}

.recording-search-group .recording-filter-submit {
  align-self: stretch;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  flex: 0 0 2.5rem;
  height: 2.5rem;
  margin-left: -1px;
  min-height: 2.5rem;
  width: 2.5rem;
}

.recording-list-card,
.call-list-card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.recording-list-card .card-header,
.call-list-card .card-header {
  flex: 0 0 auto;
}

.recording-table-scroll,
.call-table-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.recording-table-scroll thead th,
.call-table-scroll thead th {
  background: #edf2f7;
  color: #17233c;
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 2;
}

.recording-table tbody tr:hover td {
  background: #eef4fb;
}

.call-table tbody tr:hover td {
  background: #eef4fb;
}

.call-table th,
.call-table td,
.recording-table th,
.recording-table td {
  font-size: .875rem;
  height: 2.75rem;
  padding-bottom: .72rem;
  padding-top: .72rem;
}

.call-table > :not(caption) > * > *,
.recording-table > :not(caption) > * > * {
  font-size: .875rem;
}

.call-table thead th,
.recording-table thead th {
  height: 2.75rem;
}

.recording-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.recording-action-cell {
  min-width: 12rem;
  white-space: nowrap;
}

.table-loading {
  opacity: .55;
}

.recording-log-dialog {
  inset: 0;
  position: fixed;
  z-index: 2010;
}

.recording-log-backdrop {
  background: rgba(15, 23, 42, .35);
  inset: 0;
  position: absolute;
}

.recording-log-panel {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(15, 23, 42, .24);
  max-height: min(32rem, calc(100vh - 4rem));
  overflow: hidden;
  position: absolute;
  right: 2rem;
  top: 2rem;
  width: min(28rem, calc(100vw - 2rem));
}

.recording-note-dialog .recording-log-panel {
  left: 50%;
  right: auto;
  top: 50%;
  transform: translate(-50%, -50%);
}

.recording-log-header {
  align-items: center;
  border-bottom: 1px solid rgba(98, 105, 118, .16);
  display: flex;
  justify-content: space-between;
  padding: .9rem 1rem;
}

.recording-log-content {
  max-height: 27rem;
  overflow-y: auto;
  padding: .75rem 1rem;
}

.recording-note-content {
  padding: 1.25rem 1.35rem 1.4rem;
}

.recording-note-content textarea {
  min-height: 8rem;
  padding: .75rem .85rem;
  resize: vertical;
}

.recording-log-row {
  border-bottom: 1px solid rgba(98, 105, 118, .12);
  padding: .65rem 0;
}

.recording-log-row:last-child {
  border-bottom: 0;
}

.dashboard-date-picker {
  max-width: 150px;
}

.dashboard-grid {
  align-items: start;
  display: grid;
  gap: 1rem;
  grid-auto-flow: dense;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.dashboard-widget {
  min-width: 0;
}

.dashboard-widget-full {
  grid-column: 1 / -1;
}

.dashboard-widget-wide {
  grid-column: span 8;
}

.dashboard-widget-small {
  grid-column: span 4;
}

.dashboard-metric-col .text-secondary {
  line-height: 1.2;
}

#direction-chart .apexcharts-pie-series path {
  cursor: pointer;
}

.profile-avatar-xl {
  width: 5.5rem;
  height: 5.5rem;
  font-size: 2.25rem;
  font-weight: 700;
  color: #0054a6;
  background: #e8f3ff;
  background-position: center;
  background-size: cover;
  border: 1px solid #cfe4ff;
}

.profile-attempts-table {
  max-height: 360px;
  overflow: auto;
}

.profile-attempts-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #e9eff6;
}

.dashboard-chart-legend {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.25rem;
  justify-content: center;
  margin-top: .25rem;
  min-height: 1.25rem;
}

.dashboard-chart-legend span {
  align-items: center;
  color: #52606d;
  display: inline-flex;
  font-size: .8125rem;
  gap: .35rem;
  line-height: 1;
}

.dashboard-chart-legend i {
  background: var(--legend-color);
  border-radius: 50%;
  display: inline-block;
  height: .7rem;
  width: .7rem;
}

.call-sort-button,
.recording-sort-button {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  display: inline-flex;
  font: inherit;
  font-size: .875rem;
  gap: .25rem;
  min-height: 1.35rem;
  padding: 0;
  text-align: left;
  white-space: nowrap;
}

.call-sort-button i,
.recording-sort-button i {
  color: #6c7a91;
  font-size: .9rem;
}

.call-sort-button.active,
.recording-sort-button.active {
  color: #0b5ed7;
}

.call-sort-button,
.recording-sort-button {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.call-sort-button i,
.recording-sort-button i {
  font-size: .75rem;
}

.recording-report-page {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.report-stat-card {
  border: 1px solid rgba(98, 105, 118, .16);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
}

.report-stat-icon-card {
  overflow: hidden;
  position: relative;
}

.report-stat-icon-card .card-body {
  position: relative;
  z-index: 1;
}

.report-stat-bg-icon {
  color: #206bc4;
  font-size: 4.6rem;
  line-height: 1;
  opacity: .08;
  position: absolute;
  right: .85rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
}

.report-stat-card .h1 {
  color: #17233c;
  font-weight: 750;
}

.report-table thead th {
  background: #edf2f7;
  color: #17233c;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.report-table td {
  font-size: .9rem;
}

.report-textarea {
  font-family: inherit;
  line-height: 1.55;
  min-height: 15rem;
  resize: vertical;
}

.report-text-print {
  display: none;
  line-height: 1.55;
  white-space: pre-wrap;
}

.classic-report-page {
  align-items: flex-start;
  display: grid;
  gap: 1rem;
  grid-template-columns: 240px minmax(0, 1fr);
  height: calc(100vh - 9.75rem);
  min-height: 28rem;
  overflow: hidden;
}

.classic-report-filter {
  height: 100%;
  min-height: 0;
  overflow: auto;
}

.classic-report-filter .form-label {
  font-size: .73rem;
  font-weight: 650;
  margin-bottom: .25rem;
}

.classic-report-output {
  height: 100%;
  min-width: 0;
  overflow: hidden;
}

.classic-report-paper {
  color: #111827;
  font-size: .72rem;
  height: 100%;
  min-height: 0;
  overflow: auto;
  padding: 1.5rem 2rem;
}

.classic-report-meta {
  border-bottom: 2px solid #111827;
  display: grid;
  gap: .15rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 auto .75rem;
  max-width: 720px;
  padding-bottom: .45rem;
}

.classic-report-meta strong {
  display: inline-block;
  min-width: 7rem;
}

.classic-report-title {
  font-size: 1.05rem;
  font-weight: 750;
  margin: .65rem 0 .5rem;
  text-align: center;
}

.classic-report-table {
  border-collapse: collapse;
  font-size: .7rem;
  margin: 0 auto;
  max-width: 100%;
  width: auto;
}

.classic-period-title {
  border-bottom: 1px solid #111827;
  font-size: .78rem;
  font-weight: 750;
  margin: .95rem auto .3rem;
  max-width: 720px;
  padding-bottom: .15rem;
}

.classic-department-title {
  background: #17233c;
  color: #fff;
  font-size: .82rem;
  font-weight: 750;
  margin: 1rem auto .45rem;
  max-width: 720px;
  padding: .3rem .45rem;
}

.classic-period-summary {
  background: #f4f6f8;
  border-top: 1px solid #c9d2dc;
  color: #17233c;
  font-size: .68rem;
  font-weight: 700;
  margin: .2rem auto .7rem;
  max-width: 720px;
  padding: .25rem .4rem;
}

.classic-report-table thead th {
  background: #7f7f7f;
  border-color: #7f7f7f;
  color: #fff;
  font-size: .68rem;
  font-weight: 750;
  padding: .22rem .35rem;
  white-space: nowrap;
}

.classic-report-table tbody td {
  border-color: #d9d9d9;
  padding: .18rem .35rem;
  white-space: nowrap;
}

.classic-report-table tbody tr:nth-child(even) td {
  background: #f0f0f0;
}

.classic-report-footer {
  align-items: center;
  display: flex;
  font-size: .62rem;
  justify-content: space-between;
  margin: 2rem auto 0;
  max-width: 720px;
}

.classic-limit-note {
  font-size: .72rem;
  margin: .75rem auto 0;
  max-width: 720px;
}

.monitoring-dashboard {
  display: grid;
  gap: .85rem;
}

.monitoring-hero {
  align-items: center;
  background: rgba(255, 255, 255, .94);
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 1rem;
}

.monitoring-hero-main {
  align-items: center;
  display: flex;
  gap: .8rem;
  min-width: 0;
}

.monitoring-hero-icon {
  align-items: center;
  background: #dbeafe;
  border: 1px solid rgba(32, 107, 196, .25);
  border-radius: 8px;
  color: #206bc4;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1.35rem;
  height: 2.55rem;
  justify-content: center;
  width: 2.55rem;
}

.monitoring-title {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 .15rem;
}

.monitoring-hero-side {
  align-items: center;
  display: flex;
  gap: .6rem;
}

.monitoring-live-badge {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  display: inline-flex;
  font-size: .78rem;
  font-weight: 800;
  gap: .45rem;
  min-height: 2rem;
  padding: .4rem .7rem;
  white-space: nowrap;
}

.monitoring-live-badge span {
  background: currentColor;
  border-radius: 50%;
  height: .48rem;
  width: .48rem;
}

.monitoring-live-badge.is-online {
  background: #dcfae6;
  border-color: rgba(18, 183, 106, .25);
  color: #067647;
}

.monitoring-live-badge.is-waiting {
  background: #fff3d6;
  border-color: rgba(247, 144, 9, .30);
  color: #b54708;
}

.monitoring-live-badge.is-error {
  background: #fee4e2;
  border-color: rgba(240, 68, 56, .30);
  color: #b42318;
}

.monitoring-stats {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  position: relative;
  z-index: 1;
}

.monitoring-stat {
  align-items: center;
  background: #fff;
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  display: flex;
  gap: .8rem;
  min-height: 5rem;
  padding: .85rem;
}

.monitoring-stat-icon {
  align-items: center;
  background: #f4f7fb;
  border-radius: 8px;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1.25rem;
  height: 2.45rem;
  justify-content: center;
  width: 2.45rem;
}

.monitoring-stat-label {
  color: #667085;
  font-size: .7rem;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.monitoring-stat-value {
  color: #17233c;
  font-size: 1.45rem;
  font-weight: 850;
  line-height: 1.2;
  margin-top: .2rem;
}

.monitoring-board {
  background: #fff;
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  overflow: visible;
  position: relative;
  z-index: 5;
}

.monitoring-section {
  border-top: 1px solid #d9e2ec;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 8rem;
  position: relative;
}

.monitoring-section:first-child {
  border-top: 0;
}

.monitoring-section-side {
  background: #f8fafc;
  border-right: 1px solid #d9e2ec;
  padding: 1rem;
}

.monitoring-section-title {
  align-items: center;
  color: #17233c;
  display: flex;
  font-size: .84rem;
  font-weight: 850;
  gap: .45rem;
  text-transform: uppercase;
}

.monitoring-section-side p {
  color: #667085;
  font-size: .75rem;
  line-height: 1.45;
  margin: .65rem 0 0;
}

.monitoring-section-content {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  padding: .85rem;
  position: relative;
}

.monitoring-co-grid,
.monitoring-system-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.monitoring-empty {
  align-items: center;
  color: #667085;
  display: flex;
  font-size: .85rem;
  min-height: 4rem;
  padding: .75rem;
}

.monitoring-device-card {
  background: #fff;
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  min-width: 0;
  overflow: visible;
  position: relative;
}

.monitoring-device-card.is-wide {
  grid-column: span 2;
}

.monitoring-device-card.is-extra-wide {
  grid-column: span 2;
}

.monitoring-device-card.is-grouped {
  grid-column: 1 / -1;
}

.monitoring-device-head {
  align-items: flex-start;
  border-bottom: 1px solid #d9e2ec;
  display: flex;
  gap: .75rem;
  justify-content: space-between;
  padding: .75rem;
}

.monitoring-device-name {
  color: #17233c;
  font-size: .86rem;
  font-weight: 850;
}

.monitoring-device-info {
  color: #667085;
  font-size: .68rem;
  margin-top: .15rem;
}

.monitoring-device-badge {
  border-radius: 6px;
  flex: 0 0 auto;
  font-size: .66rem;
  font-weight: 850;
  padding: .24rem .45rem;
}

.monitoring-device-badge.is-online {
  background: #dcfae6;
  color: #067647;
}

.monitoring-device-badge.is-offline {
  background: #fee4e2;
  color: #b42318;
}

.monitoring-port-grid {
  display: grid;
  gap: .42rem;
  grid-template-columns: repeat(auto-fill, minmax(3.05rem, 1fr));
  padding: .75rem;
}

.monitoring-port {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  justify-content: center;
  min-height: 2.9rem;
  min-width: 0;
  padding: .35rem .25rem;
  position: relative;
}

.monitoring-port-tip {
  background: #101828;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  bottom: calc(100% + .45rem);
  box-shadow: 0 .75rem 1.8rem rgba(16, 24, 40, .18);
  color: #fff;
  font-size: .68rem;
  font-weight: 600;
  left: 50%;
  line-height: 1.45;
  max-width: 16rem;
  min-width: 11rem;
  opacity: 0;
  padding: .55rem .65rem;
  pointer-events: none;
  position: absolute;
  text-align: left;
  transform: translate(-50%, .25rem);
  transition: opacity .12s ease, transform .12s ease;
  z-index: 9999;
}

.monitoring-port:hover .monitoring-port-tip {
  opacity: 1;
  transform: translate(-50%, 0);
}

.monitoring-tip-row {
  align-items: center;
  display: flex;
  gap: .4rem;
  min-width: 0;
  padding: .12rem 0;
  white-space: nowrap;
}

.monitoring-tip-row i {
  color: #74c0fc;
  flex: 0 0 auto;
  font-size: .85rem;
}

.monitoring-tip-row strong {
  color: #fff;
  font-weight: 850;
}

.monitoring-port-number {
  font-size: .86rem;
  font-weight: 900;
  line-height: 1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monitoring-port-state {
  font-size: .5rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.monitoring-port.is-idle {
  background: #f8fafc;
  border-color: #e4e7ec;
  color: #344054;
}

.monitoring-port.is-busy {
  background: #fff3d6;
  border-color: rgba(247, 144, 9, .45);
  color: #93370d;
}

.monitoring-port.is-ringing {
  background: #dbeafe;
  border-color: rgba(32, 107, 196, .35);
  color: #175cd3;
}

.monitoring-port.is-offline {
  background: #fee4e2;
  border-color: rgba(240, 68, 56, .35);
  color: #b42318;
}

.monitoring-port.is-na {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}

.monitoring-port.is-feature {
  background: #eef4ff;
  border-color: #c7d7fe;
  color: #3538cd;
}

.monitoring-port.is-unknown {
  background: #f4f7fb;
  border-color: #d9e2ec;
  color: #475467;
}

@media print {
  .sidebar-brand,
  .topbar-blur,
  .recording-filter-card,
  .classic-report-filter,
  .recording-actions,
  .recording-table th:last-child,
  .recording-table td:last-child {
    display: none !important;
  }

  .page-wrapper,
  .page-body,
  .container-xl,
  .recordings-page,
  .recording-list-card,
  .recording-table-scroll {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .recording-report-page {
    display: block;
  }

  .report-stat-card,
  .recording-report-page .card {
    box-shadow: none !important;
  }

  .report-textarea {
    display: none;
  }

  .report-text-print {
    display: block;
  }

  .classic-report-page {
    display: block;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .classic-report-output,
  .classic-report-output.card {
    border: 0 !important;
    box-shadow: none !important;
  }

  .classic-report-paper {
    height: auto !important;
    font-size: 9px;
    min-height: 0;
    overflow: visible !important;
    padding: 0;
  }

  .classic-report-table {
    font-size: 8px;
    width: 100%;
  }

  .classic-report-table thead th,
  .classic-report-table tbody td {
    padding: 2px 4px;
  }
}

@media (max-width: 991.98px) {
  .classic-report-page {
    height: auto;
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .classic-report-filter {
    height: auto;
    overflow: visible;
  }

  .classic-report-output {
    height: auto;
    overflow: visible;
  }

  .classic-report-paper {
    height: auto;
    overflow: visible;
    padding: 1rem;
  }

  .classic-report-meta {
    grid-template-columns: 1fr;
  }

  .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monitoring-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monitoring-section {
    grid-template-columns: 1fr;
  }

  .monitoring-section-side {
    border-bottom: 1px solid #d9e2ec;
    border-right: 0;
  }

  .monitoring-device-card.is-wide {
    grid-column: span 1;
  }

  .monitoring-co-grid,
  .monitoring-system-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monitoring-device-card.is-extra-wide,
  .monitoring-device-card.is-grouped {
    grid-column: 1 / -1;
  }

  .dashboard-widget-full,
  .dashboard-widget-wide,
  .dashboard-widget-small {
    grid-column: 1 / -1;
  }

  .topbar-title-row {
    align-items: stretch !important;
    flex-direction: column;
    gap: .75rem !important;
    width: 100%;
  }

  .pbx-switcher {
    min-width: 100%;
  }

  .pbx-switcher .form-select {
    width: 100%;
  }

  .recordings-page {
    height: auto;
    min-height: 0;
  }

  .calls-page {
    height: auto;
    min-height: 0;
  }

  .recording-table-scroll,
  .call-table-scroll {
    max-height: 70vh;
  }

  .notification-card {
    height: calc(100vh - 7.5rem);
    min-height: 28rem;
  }

  .customer-list-card {
    height: auto;
    min-height: 28rem;
  }

  .customer-list-scroll {
    max-height: 70vh;
  }

  .notification-card .card-header-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .notification-card .card-header-tabs .nav-link {
    white-space: nowrap;
  }
}

@media (max-width: 575.98px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .monitoring-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .monitoring-hero-side {
    justify-content: space-between;
  }

  .monitoring-stats,
  .monitoring-section-content {
    grid-template-columns: 1fr;
  }

  .monitoring-co-grid,
  .monitoring-system-grid {
    grid-template-columns: 1fr;
  }

  .notification-card {
    height: calc(100vh - 6.5rem);
  }
}