/*
 * TeleconWeb UI system
 * Final shared layer for the approved operational interface.
 * Kept separate from the legacy bundle so component ownership stays explicit.
 */

:root {
  --tw-canvas: #f4f6f8;
  --tw-surface: #ffffff;
  --tw-surface-soft: #f8fafc;
  --tw-surface-raised: #ffffff;
  --tw-border: #dfe5ec;
  --tw-divider: #e8edf3;
  --tw-heading: #202938;
  --tw-text: #4b586b;
  --tw-muted: #7a8798;
  --tw-control: #ffffff;
  --tw-control-border: #cfd8e4;
  --tw-brand: #ef3f38;
  --tw-logo-red: #e31e24;
  --tw-brand-hover: #d9342e;
  --tw-brand-soft: #fff0ef;
  --tw-info: #3478f6;
  --tw-info-soft: #edf4ff;
  --tw-success: #20aa72;
  --tw-success-soft: #eaf8f2;
  --tw-warning: #e8a11b;
  --tw-warning-soft: #fff7e5;
  --tw-danger: #e65050;
  --tw-danger-soft: #fff0f0;
  --tw-purple: #8257e6;
  --tw-focus: rgba(52, 120, 246, 0.2);
  --tw-shadow: 0 0.45rem 1.25rem rgba(24, 36, 54, 0.07);
  --tw-shadow-raised: 0 0.85rem 2.25rem rgba(24, 36, 54, 0.13);
  --tw-radius-sm: 0.25rem;
  --tw-radius: 0.375rem;
  --tw-radius-lg: 0.5rem;
  --tw-header-height: 3.5rem;
  --tw-menu-width: 13rem;
  --tw-transition: 160ms ease;
}

.dark-style {
  --tw-canvas: #101722;
  --tw-surface: #182231;
  --tw-surface-soft: #1d293a;
  --tw-surface-raised: #202c3e;
  --tw-border: #304055;
  --tw-divider: #28374a;
  --tw-heading: #f2f5fa;
  --tw-text: #c7d0dc;
  --tw-muted: #8e9daf;
  --tw-control: #121c2a;
  --tw-control-border: #3a4d65;
  --tw-brand: #ff625c;
  --tw-brand-hover: #ff7772;
  --tw-brand-soft: rgba(255, 98, 92, 0.13);
  --tw-info: #6da3ff;
  --tw-info-soft: rgba(109, 163, 255, 0.13);
  --tw-success: #47c890;
  --tw-success-soft: rgba(71, 200, 144, 0.13);
  --tw-warning: #f3b94f;
  --tw-warning-soft: rgba(243, 185, 79, 0.13);
  --tw-danger: #ff7777;
  --tw-danger-soft: rgba(255, 119, 119, 0.13);
  --tw-purple: #a78bfa;
  --tw-focus: rgba(109, 163, 255, 0.24);
  --tw-shadow: 0 0.55rem 1.6rem rgba(0, 0, 0, 0.2);
  --tw-shadow-raised: 0 1rem 2.6rem rgba(0, 0, 0, 0.34);
}

html,
.telecon-app-shell,
.telecon-app-shell button,
.telecon-app-shell input,
.telecon-app-shell select,
.telecon-app-shell textarea,
.telecon-app-shell .tooltip,
.telecon-app-shell .popover {
  font-family: "IBM Plex Sans", "Segoe UI", Arial, sans-serif !important;
  letter-spacing: 0;
}

.telecon-app-shell {
  color: var(--tw-text);
  background: var(--tw-canvas);
  font-size: 0.875rem;
  line-height: 1.45;
}

.telecon-app-shell .layout-page,
.telecon-app-shell .content-wrapper,
.telecon-app-shell .content-backdrop {
  background: var(--tw-canvas) !important;
  background-image: none !important;
}

.telecon-app-shell .telecon-content {
  width: 100%;
  max-width: none !important;
  padding: 1.125rem clamp(1rem, 1.55vw, 1.75rem) 1.5rem !important;
}

.telecon-app-shell .layout-navbar {
  min-height: var(--tw-header-height);
  height: var(--tw-header-height);
  background: color-mix(in srgb, var(--tw-surface) 96%, transparent) !important;
  border-bottom: 1px solid var(--tw-border);
  box-shadow: none !important;
  backdrop-filter: blur(0.75rem);
}

.telecon-app-shell .layout-navbar .navbar-nav-right,
.telecon-app-shell .layout-navbar .container-fluid {
  min-height: 100%;
}

.telecon-app-shell .layout-navbar .nav-link {
  display: grid;
  width: 2.25rem;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  place-items: center;
  color: var(--tw-muted);
  border-radius: var(--tw-radius);
  transition: color var(--tw-transition), background-color var(--tw-transition);
}

.telecon-app-shell .layout-navbar .nav-link:hover,
.telecon-app-shell .layout-navbar .nav-link:focus-visible {
  color: var(--tw-heading);
  background: var(--tw-surface-soft);
}

.telecon-app-shell .layout-menu.menu-vertical {
  width: var(--tw-menu-width);
  color: var(--tw-muted);
  background: var(--tw-surface) !important;
  border-right: 1px solid var(--tw-border);
  box-shadow: none;
}

.telecon-app-shell .layout-menu .app-brand {
  min-height: var(--tw-header-height);
  height: var(--tw-header-height);
  padding: 0 0.875rem;
  border-bottom: 1px solid var(--tw-border);
}

.telecon-app-shell .layout-menu .app-brand-text {
  color: var(--tw-heading) !important;
  font-size: 0.91rem;
  font-weight: 700 !important;
}

.telecon-app-shell .telecon-brand-accent {
  color: var(--tw-logo-red) !important;
}

.telecon-app-shell .layout-menu .menu-inner {
  padding: 0.75rem 0.5rem 1rem !important;
}

.telecon-app-shell .layout-menu .menu-item {
  margin: 0.125rem 0;
}

.telecon-app-shell .layout-menu .menu-link {
  min-height: 2.5rem;
  padding: 0.55rem 0.75rem;
  color: var(--tw-muted) !important;
  border: 1px solid transparent;
  border-radius: var(--tw-radius);
  font-size: 0.82rem;
  font-weight: 500;
  transition: color var(--tw-transition), background-color var(--tw-transition), border-color var(--tw-transition);
}

.telecon-app-shell .layout-menu .menu-link:hover {
  color: var(--tw-heading) !important;
  background: var(--tw-surface-soft) !important;
  border-color: var(--tw-divider);
}

.telecon-app-shell .layout-menu .menu-item.active > .menu-link,
.telecon-app-shell .layout-menu .menu-item.open > .menu-link {
  color: var(--tw-brand) !important;
  background: var(--tw-brand-soft) !important;
  border-color: color-mix(in srgb, var(--tw-brand) 18%, transparent);
  box-shadow: inset 2px 0 0 var(--tw-brand) !important;
}

.telecon-app-shell .layout-menu .menu-icon {
  width: 1.25rem;
  min-width: 1.25rem;
  margin-right: 0.625rem;
  color: inherit !important;
  font-size: 1.05rem;
}

.telecon-app-shell .layout-menu .menu-sub {
  position: static;
  width: auto;
  margin: 0.25rem 0 0.375rem 0.625rem;
  padding: 0 0 0 0.625rem !important;
  background: transparent !important;
  border-left: 1px solid var(--tw-border);
  border-radius: 0;
  box-shadow: none !important;
}

.telecon-app-shell .layout-menu .menu-sub .menu-link {
  min-height: 2.125rem;
  padding: 0.42rem 0.625rem;
  font-size: 0.77rem;
}

.telecon-app-shell .layout-menu .menu-sub .menu-link::before {
  display: none;
}

.telecon-app-shell .layout-menu .menu-inner-shadow,
.telecon-app-shell .layout-menu .menu-divider {
  display: none;
}

.telecon-app-shell .content-footer {
  color: var(--tw-muted);
  background: var(--tw-canvas) !important;
  border-top: 1px solid var(--tw-divider);
  font-size: 0.75rem;
}

.telecon-app-shell .content-footer a {
  color: var(--tw-text);
}

.telecon-app-shell h1,
.telecon-app-shell h2,
.telecon-app-shell h3,
.telecon-app-shell h4,
.telecon-app-shell h5,
.telecon-app-shell h6,
.telecon-app-shell .h1,
.telecon-app-shell .h2,
.telecon-app-shell .h3,
.telecon-app-shell .h4,
.telecon-app-shell .h5,
.telecon-app-shell .h6 {
  color: var(--tw-heading);
  font-family: inherit;
  letter-spacing: 0;
}

.telecon-app-shell .telecon-page-title {
  min-height: 2rem;
  margin: 0 0 1rem !important;
  padding: 0 !important;
  color: var(--tw-heading);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 2rem;
}

.telecon-app-shell .telecon-page-title::before,
.telecon-app-shell .telecon-page-title::after {
  display: none !important;
}

.telecon-app-shell .card,
.telecon-app-shell .modal-content,
.telecon-app-shell .offcanvas,
.telecon-app-shell .dropdown-menu {
  color: var(--tw-text);
  background: var(--tw-surface);
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius-lg);
}

.telecon-app-shell .card {
  box-shadow: var(--tw-shadow);
}

.telecon-app-shell .card-header,
.telecon-app-shell .card-footer {
  color: var(--tw-text);
  background: var(--tw-surface-soft);
  border-color: var(--tw-divider) !important;
}

.telecon-app-shell .card-header {
  min-height: 3.25rem;
  padding: 0.75rem 1rem;
}

.telecon-app-shell .card-body {
  padding: 1rem;
}

.telecon-app-shell .card-footer {
  padding: 0.7rem 1rem;
}

.telecon-app-shell .card-title,
.telecon-app-shell .card-action-title {
  color: var(--tw-heading);
  font-size: 0.92rem;
  font-weight: 700;
}

.telecon-app-shell .telecon-clickable-card {
  transition: border-color var(--tw-transition), box-shadow var(--tw-transition), transform var(--tw-transition);
}

.telecon-app-shell .telecon-clickable-card:hover {
  border-color: color-mix(in srgb, var(--telecon-info) 35%, var(--tw-border));
  box-shadow: var(--tw-shadow-raised);
  transform: translateY(-1px);
}

/* Compact page metrics and data workspaces */
.telecon-app-shell .telecon-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 20rem));
  gap: 0.75rem;
  margin: 0 0 0.875rem !important;
}

.telecon-app-shell .telecon-summary-grid > [class*="col-"] {
  width: auto;
  max-width: none;
  padding: 0;
}

.telecon-app-shell .telecon-summary-card {
  --tw-summary-accent: var(--tw-info);
  position: relative;
  min-height: 5.75rem;
  overflow: hidden;
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--tw-summary-accent) 6%, transparent), transparent 58%),
    var(--tw-surface);
  box-shadow: none;
  border-top: 1px solid var(--tw-border) !important;
}

.telecon-app-shell .telecon-summary-card::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0.1875rem;
  right: auto;
  height: auto;
  content: "";
  background: var(--tw-summary-accent);
}

.telecon-app-shell .telecon-summary-card-provider { --tw-summary-accent: var(--tw-success); }
.telecon-app-shell .telecon-summary-card-service { --tw-summary-accent: var(--tw-warning); }
.telecon-app-shell .telecon-summary-card-device { --tw-summary-accent: #20b7ca; }
.telecon-app-shell .telecon-summary-card-user { --tw-summary-accent: var(--tw-purple); }
.telecon-app-shell .telecon-summary-card-owner { --tw-summary-accent: var(--tw-info); }

.telecon-app-shell .telecon-summary-card .card-body {
  padding: 0.875rem 1rem 0.875rem 1.125rem;
}

.telecon-app-shell .telecon-summary-card .content-left > .badge {
  padding: 0;
  color: var(--tw-muted) !important;
  background: transparent !important;
  font-size: 0.65rem;
  text-transform: uppercase;
}

.telecon-app-shell .telecon-summary-card .content-left h4 {
  margin-top: 0.2rem;
  color: var(--tw-heading);
  font-size: 1.55rem;
  line-height: 1;
}

.telecon-app-shell .telecon-summary-card .card-body > .d-flex > .badge {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0 !important;
  place-items: center;
  color: var(--tw-summary-accent) !important;
  background: color-mix(in srgb, var(--tw-summary-accent) 11%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--tw-summary-accent) 22%, transparent);
  border-radius: 50% !important;
}

.telecon-app-shell .telecon-data-card {
  overflow: hidden;
  box-shadow: none;
}

.telecon-app-shell .telecon-data-card > .card-datatable:first-child,
.telecon-app-shell .telecon-data-card > .table-responsive:first-child {
  border-radius: inherit;
}

.telecon-app-shell .telecon-data-card table.dataTable {
  border-top: 0 !important;
}

.telecon-app-shell .telecon-content .telecon-data-card .card-datatable {
  background: var(--tw-surface) !important;
  border-color: var(--tw-divider) !important;
}

.telecon-app-shell .telecon-content .telecon-data-card .dataTables_wrapper > .row:first-child,
.telecon-app-shell .telecon-content .telecon-data-card .dataTables_wrapper > .row:last-child {
  margin: 0 !important;
  padding: 0.75rem 0.875rem !important;
  color: var(--tw-text) !important;
  background: var(--tw-surface) !important;
  border-color: var(--tw-divider) !important;
}

.telecon-app-shell .telecon-content .telecon-data-card .dataTables_wrapper > .row:first-child {
  grid-template-columns: auto minmax(14rem, 1fr) !important;
}

.telecon-app-shell .telecon-content .telecon-data-card .dataTables_wrapper > .row:first-child > [class*="col-"] {
  width: auto;
  max-width: none;
  min-height: 2.375rem;
  padding: 0 !important;
  align-self: center;
}

.telecon-app-shell .telecon-content .telecon-data-card .dataTables_length,
.telecon-app-shell .telecon-content .telecon-data-card .dataTables_length label,
.telecon-app-shell .telecon-content .telecon-data-card .dataTables_filter,
.telecon-app-shell .telecon-content .telecon-data-card .dataTables_filter label {
  margin: 0 !important;
}

.telecon-app-shell .telecon-content .telecon-data-card .dt-action-buttons {
  display: grid !important;
  grid-template-columns: minmax(12rem, 24rem) auto;
  gap: 0.5rem;
  margin: 0 !important;
  align-items: center;
  justify-content: end !important;
  flex-direction: row !important;
}

.telecon-app-shell .telecon-content .telecon-data-card .dt-buttons {
  display: flex !important;
  flex-wrap: nowrap !important;
  flex-direction: row !important;
  gap: 0.5rem;
  margin: 0 !important;
  align-self: center;
}

.telecon-app-shell .telecon-content .telecon-data-card .dt-buttons > .btn {
  width: auto !important;
  min-width: 7.5rem;
}

.telecon-app-shell .telecon-content .telecon-data-card .dt-buttons .btn {
  margin: 0 !important;
  white-space: nowrap;
}

.telecon-app-shell .telecon-content .telecon-data-card .dataTables_wrapper > .row:last-child {
  grid-template-columns: minmax(12rem, 1fr) auto !important;
  background: var(--tw-surface-soft) !important;
}

.telecon-app-shell .telecon-content .telecon-data-card table.dataTable thead th,
.telecon-app-shell .telecon-content .telecon-data-card .table thead th {
  padding: 0.68rem 0.75rem !important;
  color: var(--tw-muted) !important;
  background: var(--tw-surface-soft) !important;
  border-color: var(--tw-border) !important;
  font-size: 0.67rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.telecon-app-shell .telecon-content .telecon-data-card table.dataTable tbody td,
.telecon-app-shell .telecon-content .telecon-data-card .table tbody td {
  padding: 0.68rem 0.75rem !important;
  color: var(--tw-text) !important;
  background: var(--tw-surface) !important;
  border-color: var(--tw-divider) !important;
  font-size: 0.79rem !important;
}

.telecon-app-shell .telecon-content .telecon-data-card table.dataTable tbody tr:hover > *,
.telecon-app-shell .telecon-content .telecon-data-card .table tbody tr:hover > * {
  color: var(--tw-heading) !important;
  background: color-mix(in srgb, var(--tw-info-soft) 58%, var(--tw-surface)) !important;
}

/* Legacy pages with a single direct data card receive the same light table surface. */
.telecon-app-shell .content-wrapper > .telecon-content > .card:not(.telecon-dashboard-item) .card-datatable {
  background: var(--tw-surface) !important;
  border-color: var(--tw-divider) !important;
}

.telecon-app-shell .content-wrapper > .telecon-content > .card:not(.telecon-dashboard-item) .dataTables_wrapper > .row:first-child,
.telecon-app-shell .content-wrapper > .telecon-content > .card:not(.telecon-dashboard-item) .dataTables_wrapper > .row:last-child {
  color: var(--tw-text) !important;
  background: var(--tw-surface) !important;
  border-color: var(--tw-divider) !important;
}

.telecon-app-shell .content-wrapper > .telecon-content > .card:not(.telecon-dashboard-item) table.dataTable thead th,
.telecon-app-shell .content-wrapper > .telecon-content > .card:not(.telecon-dashboard-item) .table thead th {
  color: var(--tw-muted) !important;
  background: var(--tw-surface-soft) !important;
  border-color: var(--tw-border) !important;
  letter-spacing: 0 !important;
}

.telecon-app-shell .content-wrapper > .telecon-content > .card:not(.telecon-dashboard-item) table.dataTable tbody td,
.telecon-app-shell .content-wrapper > .telecon-content > .card:not(.telecon-dashboard-item) .table tbody td {
  color: var(--tw-text) !important;
  background: var(--tw-surface) !important;
  border-color: var(--tw-divider) !important;
}

.telecon-app-shell .telecon-form-drawer .offcanvas-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.telecon-app-shell .telecon-form-drawer .nav-align-top {
  overflow: hidden;
  background: var(--tw-surface);
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius);
}

.telecon-app-shell .telecon-form-drawer .nav-tabs {
  padding: 0.35rem;
  gap: 0.25rem;
  background: var(--tw-surface-soft);
  border-bottom: 1px solid var(--tw-border);
}

.telecon-app-shell .telecon-form-drawer .nav-tabs .nav-link {
  min-height: 2.25rem;
  padding: 0.5rem 0.8rem;
  color: var(--tw-muted);
  background: transparent;
  border: 0;
  border-radius: var(--tw-radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
}

.telecon-app-shell .telecon-form-drawer .nav-tabs .nav-link.active {
  color: var(--tw-heading);
  background: var(--tw-surface);
  box-shadow: 0 0 0 1px var(--tw-border);
}

.telecon-app-shell .telecon-form-drawer .tab-content {
  padding: 0 !important;
  background: var(--tw-surface) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.telecon-app-shell .telecon-form-drawer .tab-pane,
.telecon-app-shell .telecon-form-drawer .card-datatable {
  min-width: 0;
  background: var(--tw-surface) !important;
}

.telecon-app-shell .telecon-form-drawer .card-datatable {
  overflow: auto;
  border: 0 !important;
}

.telecon-app-shell .telecon-form-drawer .dataTables_wrapper > .row:first-child,
.telecon-app-shell .telecon-form-drawer .dataTables_wrapper > .row:last-child {
  min-height: 3.75rem;
  margin: 0 !important;
  padding: 0.65rem 0.75rem !important;
  align-items: center;
  background: var(--tw-surface) !important;
}

.telecon-app-shell .telecon-form-drawer .dataTables_wrapper > .row:last-child {
  background: var(--tw-surface-soft) !important;
  border-top: 1px solid var(--tw-divider);
}

.telecon-app-shell .telecon-form-drawer table.dataTable thead th {
  padding: 0.68rem 0.75rem !important;
  color: var(--tw-muted) !important;
  background: var(--tw-surface-soft) !important;
  border-color: var(--tw-border) !important;
  font-size: 0.67rem !important;
}

.telecon-app-shell .telecon-form-drawer table.dataTable tbody td {
  padding: 0.68rem 0.75rem !important;
  color: var(--tw-text) !important;
  background: var(--tw-surface) !important;
  border-color: var(--tw-divider) !important;
  font-size: 0.76rem !important;
}

.telecon-app-shell .telecon-form {
  min-height: 100%;
}

.telecon-app-shell .telecon-form:not(.telecon-form-complex) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: min-content;
  gap: 0 0.7rem;
}

.telecon-app-shell .telecon-form > .mb-3,
.telecon-app-shell .telecon-form > [class*="col-"] {
  margin-bottom: 1rem !important;
}

.telecon-app-shell .telecon-form:not(.telecon-form-complex) > .mb-3,
.telecon-app-shell .telecon-form:not(.telecon-form-complex) > [class*="col-"] {
  grid-column: 1 / -1;
}

.telecon-app-shell .telecon-form > .btn[type="submit"],
.telecon-app-shell .telecon-form > .btn[type="reset"] {
  width: 100%;
  margin: 0 !important;
}

.telecon-app-shell .telecon-form-complex {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0;
}

.telecon-app-shell .telecon-role-grid > [class*="col-"] {
  min-width: 0;
}

.telecon-app-shell .telecon-role-card {
  --tw-role-accent: var(--tw-info);
  position: relative;
  height: 100%;
  min-height: 8.5rem;
  overflow: hidden;
  box-shadow: none;
}

.telecon-app-shell .telecon-role-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 0.1875rem;
  bottom: auto;
  width: auto;
  content: "";
  background: var(--tw-role-accent);
}

.telecon-app-shell .telecon-role-card-admin { --tw-role-accent: var(--tw-brand); }
.telecon-app-shell .telecon-role-card-manager { --tw-role-accent: var(--tw-info); }
.telecon-app-shell .telecon-role-card-create { --tw-role-accent: var(--tw-success); }

.telecon-app-shell .telecon-role-card .card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.telecon-app-shell .telecon-role-card h4 {
  font-size: 1.05rem;
}

.telecon-app-shell .telecon-role-card h6 {
  color: var(--tw-muted);
  font-size: 0.75rem;
}

.telecon-app-shell .telecon-role-card-create img {
  max-height: 7rem;
  object-fit: contain;
}

.telecon-app-shell .telecon-role-card-create #addNewRoleBtn {
  width: 2.5rem;
  min-width: 2.5rem;
  height: 2.5rem;
  margin-left: auto;
  padding: 0;
}

/* Operational widgets keep summary and chart in one stable horizontal row. */
.telecon-app-shell .telecon-widget-page,
.telecon-app-shell .telecon-list-page {
  width: 100%;
  margin-right: 0;
  margin-left: 0;
}

.telecon-app-shell .telecon-widget-page > [class*="col-"],
.telecon-app-shell .telecon-list-page > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

.telecon-app-shell .telecon-widget-card {
  --tw-widget-accent: var(--tw-info);
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--tw-surface) !important;
  border-color: var(--tw-border);
  box-shadow: var(--tw-shadow);
}

.telecon-app-shell .telecon-widget-card::before {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  height: 0.1875rem;
  bottom: auto;
  width: auto;
  content: "";
  background: var(--tw-widget-accent);
}

.telecon-app-shell .telecon-widget-card-modems { --tw-widget-accent: #1da8ba; }
.telecon-app-shell .telecon-widget-card-water { --tw-widget-accent: var(--tw-info); }
.telecon-app-shell .telecon-widget-card-valve { --tw-widget-accent: var(--tw-success); }
.telecon-app-shell .telecon-widget-card-orders { --tw-widget-accent: var(--tw-warning); }

.telecon-app-shell .telecon-widget-card > .card-body {
  padding: 0.75rem 0.875rem 0;
}

.telecon-app-shell .telecon-widget-card .row-bordered {
  display: grid;
  grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr);
  min-height: 17rem;
  border: 0;
}

.telecon-app-shell .telecon-widget-card-table .row-bordered {
  display: block;
  min-height: 0;
}

.telecon-app-shell .telecon-widget-card .row-bordered > [class*="col-"] {
  width: auto;
  max-width: none;
  min-width: 0;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.telecon-app-shell .telecon-widget-card .content-left {
  width: 100%;
  height: 100%;
  padding: 0.75rem 0.875rem 0.75rem 0.25rem;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--tw-divider);
  border-radius: 0;
}

.telecon-app-shell .telecon-widget-card-table .content-left {
  padding-right: 0.25rem;
  border-right: 0;
}

.telecon-app-shell .telecon-widget-card .content-left > .badge {
  margin-bottom: 0.625rem;
  padding: 0.32rem 0.45rem;
  color: color-mix(in srgb, var(--tw-widget-accent) 78%, var(--tw-heading)) !important;
  background: color-mix(in srgb, var(--tw-widget-accent) 11%, transparent) !important;
  border-radius: var(--tw-radius-sm);
  font-size: 0.65rem;
  text-transform: uppercase;
}

.telecon-app-shell .telecon-widget-card .widget-table {
  width: 100%;
  margin: 0;
}

.telecon-app-shell .telecon-widget-card .widget-table td {
  height: 2.15rem;
  padding: 0.3rem 0.15rem !important;
  border: 0 !important;
  border-top: 1px solid var(--tw-divider) !important;
  vertical-align: middle;
}

.telecon-app-shell .telecon-widget-card .widget-table tr:first-child td {
  border-top: 0 !important;
}

.telecon-app-shell .telecon-widget-card .widget-table p,
.telecon-app-shell .telecon-widget-card .widget-table h6 {
  margin: 0;
  color: var(--tw-text);
  font-size: 0.76rem;
}

.telecon-app-shell .telecon-widget-card .widget-table h6 {
  color: var(--tw-heading);
  font-weight: 700;
  text-align: right;
}

.telecon-app-shell .telecon-widget-card .avatar-sm {
  width: 1.65rem;
  height: 1.65rem;
}

.telecon-app-shell .telecon-widget-card .card-header {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(9rem, 12rem));
  min-height: 4rem;
  padding: 0.65rem 0.875rem;
  justify-content: end !important;
  gap: 0.625rem;
  background: transparent;
  border-bottom: 1px solid var(--tw-divider);
}

.telecon-app-shell .telecon-widget-card .card-header > [class*="col-"] {
  width: 100%;
  max-width: none;
  margin: 0 !important;
}

.telecon-app-shell .telecon-widget-card .card-header > [class*="col-"]:empty {
  display: none;
}

.telecon-app-shell .telecon-widget-card .card-body.p-0 {
  min-height: 12.5rem;
  padding: 0 !important;
}

.telecon-app-shell .telecon-widget-card .card-body.p-0 > [id$="Chart"],
.telecon-app-shell .telecon-widget-card .card-body.p-0 > [id$="Widget"] {
  width: 100%;
  min-height: 12.5rem;
}

.telecon-app-shell .telecon-widget-card > .card-footer {
  display: flex;
  min-height: 3.35rem;
  padding: 0.6rem 1rem;
  align-items: center;
  gap: 0.5rem;
  background: var(--tw-surface-soft);
}

.telecon-app-shell .telecon-widget-card > .card-footer .d-flex,
.telecon-app-shell .telecon-widget-card > .card-footer h4,
.telecon-app-shell .telecon-widget-card > .card-footer small {
  margin: 0 !important;
}

.telecon-app-shell .telecon-widget-card > .card-footer h4 {
  color: var(--tw-heading);
  font-size: 1.3rem;
}

.telecon-app-shell .telecon-widget-card > .card-footer small {
  color: var(--tw-muted);
  font-size: 0.7rem;
}

.telecon-app-shell .telecon-filtered-table-card {
  overflow: hidden;
  box-shadow: none;
}

.telecon-app-shell .telecon-filtered-table-card > .telecon-filter-row,
.telecon-app-shell .telecon-filtered-table-card .card-body > .telecon-filter-row {
  margin: 0 !important;
  padding: 0.875rem 1rem;
  background: var(--tw-surface-soft);
  border-bottom: 1px solid var(--tw-divider);
}

.telecon-app-shell .telecon-filtered-table-card > .card-datatable,
.telecon-app-shell .telecon-filtered-table-card > .table-responsive {
  border-top: 0;
}

.telecon-app-shell .telecon-gateway-report > .card-body {
  padding: 0;
}

.telecon-app-shell .telecon-coverage-workspace {
  overflow: hidden;
  box-shadow: var(--tw-shadow);
}

.telecon-app-shell .telecon-coverage-workspace > .card-body {
  padding: 1rem;
}

.telecon-app-shell .telecon-coverage-workspace .telecon-coverage-map {
  overflow: hidden;
  background: var(--tw-surface-soft);
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius);
}

/* Summator is an unframed report surface; each chart remains a distinct repeated item. */
.telecon-app-shell .telecon-summator-report {
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.telecon-app-shell .telecon-summator-report > .card-header {
  min-height: 2.5rem;
  padding: 0 0 0.5rem !important;
  background: transparent !important;
  border: 0 !important;
}

.telecon-app-shell .telecon-summator-report > .card-body {
  margin-bottom: 0.875rem;
  padding: 1rem;
  background: var(--tw-surface);
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius-lg);
  box-shadow: var(--tw-shadow);
}

.telecon-app-shell .telecon-summator-report > hr {
  display: none;
}

.telecon-app-shell .telecon-summator-report > .card-body:first-of-type > .text-center:first-child {
  margin: -1rem -1rem 1rem !important;
  padding: 0.875rem 1rem;
  text-align: left !important;
  background: var(--tw-surface-soft);
  border-bottom: 1px solid var(--tw-divider);
}

.telecon-app-shell .telecon-summator-report .dt-summator-archive {
  min-width: 92rem;
  font-size: 0.72rem;
}

.telecon-app-shell .telecon-summator-report .dt-summator-archive thead th {
  position: sticky;
  z-index: 2;
  top: 0;
  white-space: nowrap;
}

.telecon-app-shell .telecon-summator-report .report_total_title,
.telecon-app-shell .telecon-summator-report > .card-body > h4 {
  margin-bottom: 1rem;
  text-align: left !important;
  font-size: 1rem;
}

.telecon-app-shell .telecon-summator-report > .card-body:last-of-type {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}

.telecon-app-shell .telecon-summator-report > .card-body:last-of-type > h4 {
  margin: 0;
}

.telecon-app-shell .telecon-summator-report > .card-body:last-of-type > .col-12 {
  width: 100%;
  padding: 0;
}

.telecon-app-shell .telecon-summator-report > .card-body:last-of-type > .col-12 > .card {
  overflow: hidden;
  box-shadow: none;
}

.telecon-app-shell .telecon-summator-report > .card-body:last-of-type .card-header {
  min-height: 3rem;
  padding: 0.7rem 0.875rem;
}

.telecon-app-shell .telecon-summator-report > .card-body:last-of-type .card-title {
  margin: 0;
  font-size: 0.83rem;
}

/* Printable order preview keeps information bands and action rail separate. */
.telecon-app-shell .telecon-order-preview {
  align-items: flex-start;
}

.telecon-app-shell .telecon-order-preview .invoice-preview-card {
  overflow: hidden;
  box-shadow: var(--tw-shadow);
}

.telecon-app-shell .telecon-order-preview .invoice-preview-card > .card-body {
  padding: 1rem 1.125rem;
}

.telecon-app-shell .telecon-order-preview .invoice-preview-card > .card-body:first-child {
  background: var(--tw-surface-soft);
}

.telecon-app-shell .telecon-order-preview .invoice-preview-card > hr {
  border-color: var(--tw-divider);
  opacity: 1;
}

.telecon-app-shell .telecon-order-preview .invoice-preview-card table {
  width: 100%;
  color: var(--tw-text);
}

.telecon-app-shell .telecon-order-preview .invoice-preview-card td {
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--tw-divider);
}

.telecon-app-shell .telecon-order-preview .invoice-actions .card {
  position: sticky;
  top: calc(var(--tw-header-height) + 1rem);
  box-shadow: none;
}

@media (max-width: 991.98px) {
  .telecon-app-shell .telecon-widget-card .row-bordered {
    grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr);
  }
}

@media (max-width: 767.98px) {
  .telecon-app-shell .telecon-widget-card .row-bordered {
    display: block;
  }

  .telecon-app-shell .telecon-widget-card .content-left {
    border-right: 0;
    border-bottom: 1px solid var(--tw-divider);
  }

  .telecon-app-shell .telecon-widget-card .card-header {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch !important;
  }
}

.telecon-app-shell .form-label {
  margin-bottom: 0.35rem;
  color: var(--tw-muted);
  font-size: 0.69rem;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
}

.telecon-app-shell .form-control,
.telecon-app-shell .form-select,
.telecon-app-shell .input-group-text,
.telecon-app-shell .bootstrap-select > .dropdown-toggle,
.telecon-app-shell .select2-container--default .select2-selection {
  min-height: 2.375rem;
  color: var(--tw-heading);
  background: var(--tw-control);
  border-color: var(--tw-control-border);
  border-radius: var(--tw-radius);
  font-size: 0.81rem;
  box-shadow: none;
}

.telecon-app-shell .form-control:focus,
.telecon-app-shell .form-select:focus,
.telecon-app-shell .bootstrap-select > .dropdown-toggle:focus,
.telecon-app-shell .select2-container--focus .select2-selection,
.telecon-app-shell .select2-container--open .select2-selection {
  border-color: var(--tw-info) !important;
  box-shadow: 0 0 0 0.2rem var(--tw-focus) !important;
}

.telecon-app-shell .form-control::placeholder {
  color: color-mix(in srgb, var(--tw-muted) 78%, transparent);
}

.telecon-app-shell .form-check-input {
  background-color: var(--tw-control);
  border-color: var(--tw-control-border);
}

.telecon-app-shell .form-check-input:checked {
  background-color: var(--tw-brand);
  border-color: var(--tw-brand);
}

.telecon-app-shell .btn {
  min-height: 2.375rem;
  padding: 0.48rem 0.85rem;
  border-radius: var(--tw-radius);
  font-size: 0.79rem;
  font-weight: 600;
  line-height: 1.25;
  box-shadow: none;
  transition: color var(--tw-transition), background-color var(--tw-transition), border-color var(--tw-transition), box-shadow var(--tw-transition);
}

.telecon-app-shell .btn-sm,
.telecon-app-shell .btn-group-sm > .btn {
  min-height: 2rem;
  padding: 0.35rem 0.625rem;
  font-size: 0.75rem;
}

.telecon-app-shell .btn-primary {
  color: #fff;
  background: var(--tw-brand);
  border-color: var(--tw-brand);
}

.telecon-app-shell .btn-primary:hover,
.telecon-app-shell .btn-primary:focus {
  color: #fff;
  background: var(--tw-brand-hover);
  border-color: var(--tw-brand-hover);
}

.telecon-app-shell .btn-outline-primary,
.telecon-app-shell .btn-label-primary {
  color: var(--tw-brand);
  background: transparent;
  border-color: color-mix(in srgb, var(--tw-brand) 50%, var(--tw-border));
}

.telecon-app-shell .btn-outline-primary:hover,
.telecon-app-shell .btn-label-primary:hover {
  color: var(--tw-brand);
  background: var(--tw-brand-soft);
  border-color: var(--tw-brand);
}

.telecon-app-shell .btn-icon {
  width: 2.375rem;
  min-width: 2.375rem;
  padding: 0;
}

.telecon-app-shell .badge {
  padding: 0.33rem 0.48rem;
  border-radius: var(--tw-radius-sm);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0;
}

.telecon-app-shell .table-responsive,
.telecon-app-shell .card-datatable {
  scrollbar-color: var(--tw-control-border) transparent;
  scrollbar-width: thin;
}

.telecon-app-shell .table {
  margin-bottom: 0;
  color: var(--tw-text);
  border-color: var(--tw-divider);
  font-size: 0.79rem;
}

.telecon-app-shell .table > :not(caption) > * > * {
  padding: 0.68rem 0.75rem;
  color: inherit;
  background: transparent;
  border-bottom-color: var(--tw-divider);
  box-shadow: none;
}

.telecon-app-shell .table thead th,
.telecon-app-shell table.dataTable thead th {
  height: 2.75rem;
  color: var(--tw-muted);
  background: var(--tw-surface-soft) !important;
  border-bottom: 1px solid var(--tw-border) !important;
  font-size: 0.67rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  vertical-align: middle;
}

.telecon-app-shell .table tbody tr {
  transition: background-color var(--tw-transition);
}

.telecon-app-shell .table tbody tr:hover > * {
  color: var(--tw-heading);
  background: color-mix(in srgb, var(--tw-info-soft) 58%, var(--tw-surface)) !important;
}

.telecon-app-shell .dataTables_wrapper > .row:first-child,
.telecon-app-shell .dataTables_wrapper > .row:last-child {
  margin: 0;
  padding: 0.875rem 1rem;
  align-items: center;
  gap: 0.75rem 0;
  background: var(--tw-surface);
}

.telecon-app-shell .dataTables_wrapper > .row:first-child {
  border-bottom: 1px solid var(--tw-divider);
}

.telecon-app-shell .dataTables_wrapper > .row:last-child {
  border-top: 1px solid var(--tw-divider);
}

.telecon-app-shell .dataTables_filter input,
.telecon-app-shell .dataTables_length select {
  min-height: 2.25rem;
}

.telecon-app-shell .dataTables_info {
  padding: 0 !important;
  color: var(--tw-muted);
  font-size: 0.75rem;
}

.telecon-app-shell .pagination {
  gap: 0.2rem;
}

.telecon-app-shell .page-link {
  display: grid;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.45rem;
  place-items: center;
  color: var(--tw-text);
  background: var(--tw-surface-soft);
  border: 1px solid transparent;
  border-radius: var(--tw-radius-sm) !important;
  font-size: 0.75rem;
}

.telecon-app-shell .page-item.active .page-link {
  color: #fff;
  background: var(--tw-brand);
  border-color: var(--tw-brand);
}

.telecon-app-shell .dropdown-menu {
  min-width: 12rem;
  padding: 0.375rem;
  box-shadow: var(--tw-shadow-raised);
}

.telecon-app-shell .dropdown-item {
  min-height: 2.25rem;
  padding: 0.45rem 0.625rem;
  color: var(--tw-text);
  border-radius: var(--tw-radius-sm);
  font-size: 0.79rem;
}

.telecon-app-shell .dropdown-item:hover,
.telecon-app-shell .dropdown-item:focus,
.telecon-app-shell .dropdown-item.active {
  color: var(--tw-heading);
  background: var(--tw-surface-soft);
}

.telecon-app-shell .nav-tabs {
  gap: 0.25rem;
  padding: 0.25rem;
  background: var(--tw-surface-soft);
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius);
}

.telecon-app-shell .nav-tabs .nav-link {
  min-height: 2.25rem;
  padding: 0.45rem 0.75rem;
  color: var(--tw-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--tw-radius-sm);
  font-size: 0.76rem;
  font-weight: 600;
}

.telecon-app-shell .nav-tabs .nav-link:hover {
  color: var(--tw-heading);
}

.telecon-app-shell .nav-tabs .nav-link.active {
  color: var(--tw-heading);
  background: var(--tw-surface);
  border-color: var(--tw-border);
  box-shadow: 0 0.2rem 0.55rem rgba(24, 36, 54, 0.07);
}

.telecon-app-shell .offcanvas {
  width: min(42rem, 100vw);
  box-shadow: var(--tw-shadow-raised);
}

.telecon-app-shell .telecon-offcanvas-lg {
  width: min(62rem, 100vw) !important;
}

.telecon-app-shell .offcanvas-header {
  position: relative;
  min-height: 4.25rem;
  padding: 1rem 1.25rem;
  background: var(--tw-surface-soft);
  border-bottom: 1px solid var(--tw-border) !important;
}

.telecon-app-shell .offcanvas-header::before {
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  left: 0;
  width: 0.1875rem;
  content: "";
  background: var(--tw-brand);
}

.telecon-app-shell .offcanvas-title {
  color: var(--tw-heading);
  font-size: 1rem;
  font-weight: 700;
}

.telecon-app-shell .offcanvas-body {
  padding: 1.25rem;
  background: var(--tw-surface);
}

.telecon-app-shell .modal-backdrop.show {
  opacity: 0.58;
  backdrop-filter: blur(2px);
}

.telecon-app-shell .modal-content {
  box-shadow: 0 1.5rem 4rem rgba(14, 24, 39, 0.22);
}

.dark-style .telecon-app-shell .modal-content {
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.5);
}

.telecon-app-shell .modal-header {
  position: relative;
  min-height: 4.25rem;
  padding: 1rem 1.25rem;
  background: var(--tw-surface-soft);
  border-bottom: 1px solid var(--tw-border);
}

.telecon-app-shell .modal-header::before {
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  left: 0;
  width: 0.1875rem;
  content: "";
  background: var(--tw-brand);
}

.telecon-app-shell .modal-title {
  color: var(--tw-heading);
  font-size: 1rem;
  font-weight: 700;
}

.telecon-app-shell .modal-body {
  padding: 1.125rem 1.25rem;
}

.telecon-app-shell .modal-footer {
  min-height: 4rem;
  padding: 0.75rem 1.25rem;
  background: var(--tw-surface-soft);
  border-top: 1px solid var(--tw-border);
}

.telecon-app-shell .modal .btn-close,
.telecon-app-shell .offcanvas .btn-close {
  width: 2rem;
  height: 2rem;
  padding: 0;
  background-color: transparent;
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius);
  box-shadow: none;
}

.telecon-app-shell .modal .btn-close:hover,
.telecon-app-shell .offcanvas .btn-close:hover {
  background-color: var(--tw-surface-raised);
  border-color: var(--tw-control-border);
}

.telecon-app-shell .modal-simple .modal-content.p-3,
.telecon-app-shell .modal-simple .modal-content.p-md-5 {
  padding: 0 !important;
}

.telecon-app-shell .modal-simple > .modal-content > .modal-body > .btn-close {
  position: absolute;
  z-index: 4;
  top: 0.875rem;
  right: 0.875rem;
}

.telecon-app-shell .modal-simple > .modal-content > .modal-body > .text-center:first-of-type {
  margin: -1.125rem -1.25rem 1.125rem !important;
  padding: 1rem 3.75rem 1rem 1.25rem;
  text-align: left !important;
  background: var(--tw-surface-soft);
  border-bottom: 1px solid var(--tw-border);
}

.telecon-app-shell .modal-simple > .modal-content > .modal-body > .text-center:first-of-type h3,
.telecon-app-shell .modal-simple > .modal-content > .modal-body > .text-center:first-of-type h4,
.telecon-app-shell .modal-simple > .modal-content > .modal-body > .text-center:first-of-type h5 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.telecon-app-shell .modal-simple > .modal-content > .modal-body > .card {
  box-shadow: none;
}

/* Modal families: table workspaces, data forms, media viewers and compact actions. */
.telecon-app-shell .telecon-dialog-table {
  width: min(calc(100vw - 2rem), 92rem);
  max-width: none;
  margin: 1rem auto;
}

.telecon-app-shell .telecon-table-modal .modal-content {
  max-height: calc(100vh - 2rem);
  overflow: hidden;
}

.telecon-app-shell .telecon-table-modal .modal-body {
  display: flex;
  min-height: 18rem;
  overflow: hidden;
  flex-direction: column;
}

.telecon-app-shell .telecon-table-modal .modal-simple > .modal-content > .modal-body > .text-center:first-of-type,
.telecon-app-shell .telecon-table-modal .modal-body > .text-center:first-of-type {
  flex: 0 0 auto;
}

.telecon-app-shell .telecon-table-modal .modal-body > .card,
.telecon-app-shell .telecon-table-modal .modal-body > .card-action {
  display: flex;
  min-height: 0;
  overflow: hidden;
  flex: 1 1 auto;
  flex-direction: column;
  background: var(--tw-surface);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.telecon-app-shell .telecon-table-modal .modal-body > .card > .card-header {
  flex: 0 0 auto;
}

.telecon-app-shell .telecon-table-modal .modal-body > .card > .card-body {
  min-height: 0;
  padding: 0;
  overflow: auto;
}

.telecon-app-shell .telecon-table-modal .telecon-filter-row {
  margin: 0 !important;
  padding: 0.875rem 1rem !important;
  background: var(--tw-surface-soft);
  border-bottom: 1px solid var(--tw-divider);
}

.telecon-app-shell .telecon-table-modal .card-datatable,
.telecon-app-shell .telecon-table-modal .table-responsive {
  min-height: 0;
  overflow: auto;
  flex: 1 1 auto;
}

.telecon-app-shell .telecon-table-modal .dataTables_wrapper {
  display: flex;
  min-height: 100%;
  flex-direction: column;
}

.telecon-app-shell .telecon-table-modal .dataTables_wrapper .dataTables_scroll,
.telecon-app-shell .telecon-table-modal .dataTables_wrapper .table-responsive {
  min-height: 0;
  flex: 1 1 auto;
}

.telecon-app-shell .telecon-dialog-form {
  width: min(calc(100vw - 2rem), 44rem);
  max-width: none;
  margin: 1rem auto;
}

.telecon-app-shell .telecon-dialog-form.telecon-dialog-wide {
  width: min(calc(100vw - 2rem), 72rem);
}

.telecon-app-shell .telecon-form-modal .modal-content {
  max-height: calc(100vh - 2rem);
  overflow: hidden;
}

.telecon-app-shell .telecon-form-modal .modal-body {
  overflow: auto;
  scrollbar-color: var(--tw-control-border) transparent;
  scrollbar-width: thin;
}

.telecon-app-shell .telecon-form-modal .modal-body > hr {
  margin: 0.9rem 0;
  border-color: var(--tw-divider);
  opacity: 1;
}

.telecon-app-shell .telecon-form-modal .modal-body > .row {
  margin-right: -0.375rem;
  margin-left: -0.375rem;
}

.telecon-app-shell .telecon-form-modal .modal-body > .row > [class*="col-"] {
  padding-right: 0.375rem;
  padding-left: 0.375rem;
}

.telecon-app-shell .telecon-form-modal .modal-body > .row > [class*="col-"][class*="mb-3"] {
  margin-bottom: 0.75rem !important;
}

/* Device configuration workspace */
.telecon-app-shell .telecon-device-config-modal .telecon-dialog-config {
  width: min(calc(100vw - 2rem), 68rem);
  max-width: none;
}

.telecon-app-shell .telecon-device-config-modal .telecon-dialog-config-compact {
  width: min(calc(100vw - 2rem), 42rem);
}

.telecon-app-shell .telecon-device-config-modal .modal-content {
  background: var(--tw-surface) !important;
  border: 1px solid var(--tw-border) !important;
  box-shadow: var(--tw-shadow-raised) !important;
}

.telecon-app-shell .telecon-device-config-modal .modal-header {
  min-height: 4.5rem;
  padding: 1rem 4rem 1rem 1.5rem;
  background: var(--tw-surface) !important;
}

.telecon-app-shell .telecon-device-config-modal .modal-header::before {
  top: 1.05rem;
  bottom: 1.05rem;
  left: 1rem;
  border-radius: 0.125rem;
}

.telecon-app-shell .telecon-device-config-modal .modal-title {
  padding-left: 0.5rem;
  line-height: 1.35;
}

.telecon-app-shell .telecon-device-config-modal .modal-body {
  padding: 0 !important;
  background: var(--tw-surface) !important;
}

.telecon-app-shell .telecon-device-config-body-compact {
  padding: 1.25rem !important;
}

.telecon-app-shell .telecon-config-workspace {
  display: grid;
  min-height: 20rem;
  margin: 0 !important;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 0;
  background: var(--tw-surface);
}

.telecon-app-shell .telecon-config-workspace .telecon-config-nav {
  display: block;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 1rem 0.75rem;
  background: var(--tw-surface-soft);
  border: 0 !important;
  border-right: 1px solid var(--tw-border) !important;
  border-radius: 0;
}

.telecon-app-shell .telecon-config-workspace .telecon-config-nav .nav-item {
  width: 100%;
}

.telecon-app-shell .telecon-config-workspace .telecon-config-nav .nav-link {
  position: relative;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.7rem 0.8rem 0.7rem 1rem;
  color: var(--tw-text);
  text-align: left;
  border: 0;
  border-radius: var(--tw-radius);
  box-shadow: none;
}

.telecon-app-shell .telecon-config-workspace .telecon-config-nav .nav-link::before {
  position: absolute;
  top: 0.55rem;
  bottom: 0.55rem;
  left: 0;
  width: 0.1875rem;
  content: "";
  background: transparent;
  border-radius: 0.125rem;
}

.telecon-app-shell .telecon-config-workspace .telecon-config-nav .nav-link.active {
  color: var(--tw-brand);
  background: var(--tw-brand-soft);
  border: 0;
  box-shadow: none;
}

.telecon-app-shell .telecon-config-workspace .telecon-config-nav .nav-link.active::before {
  background: var(--tw-brand);
}

.telecon-app-shell .telecon-config-workspace .telecon-config-content {
  min-width: 0;
  margin: 0;
  padding: 1.25rem !important;
  background: var(--tw-surface) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.telecon-app-shell .telecon-config-section-heading {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--tw-divider);
}

.telecon-app-shell .telecon-config-section-heading h6 {
  position: relative;
  margin: 0;
  padding-left: 0.75rem;
  color: var(--tw-heading);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.35;
}

.telecon-app-shell .telecon-config-section-heading h6::before {
  position: absolute;
  top: 0.1rem;
  bottom: 0.1rem;
  left: 0;
  width: 0.1875rem;
  content: "";
  background: var(--tw-brand);
  border-radius: 0.125rem;
}

.telecon-app-shell .telecon-config-form,
.telecon-app-shell .telecon-config-compact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.telecon-app-shell .telecon-config-form > .mb-3,
.telecon-app-shell .telecon-config-compact-form > .mb-3 {
  min-width: 0;
  margin: 0 !important;
  padding: 1rem;
  background: var(--tw-surface-soft);
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius);
}

.telecon-app-shell .telecon-config-form > :is(#schedulerDaysPicker, #shedulerDaysOfWeekSelectBlock, #shedulerHoursSelectBlock) {
  grid-column: 1 / -1;
}

.telecon-app-shell .telecon-config-form .form-select,
.telecon-app-shell .telecon-config-form .form-control,
.telecon-app-shell .telecon-config-compact-form .form-select,
.telecon-app-shell .telecon-config-compact-form .form-control {
  margin-bottom: 0 !important;
  background-color: var(--tw-control) !important;
}

.telecon-app-shell .telecon-config-form .bootstrap-select {
  width: 100% !important;
}

.telecon-app-shell .telecon-lora-config-workspace {
  min-height: 24rem;
}

.telecon-app-shell .telecon-config-nav .nav-link > .bx {
  margin-right: 0.5rem;
  font-size: 1rem;
  vertical-align: -0.1rem;
}

.telecon-app-shell .telecon-lora-config-form {
  align-items: stretch;
}

.telecon-app-shell .telecon-lora-config-form > .telecon-lora-profile-field {
  grid-column: 1 / -1;
  max-width: 14rem;
}

.telecon-app-shell .telecon-lora-config-form > .telecon-lora-data-field {
  grid-column: 1 / -1;
}

.telecon-app-shell .telecon-config-field-heading {
  display: flex;
  min-height: 1.75rem;
  margin-bottom: 0.625rem;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
}

.telecon-app-shell .telecon-config-field-heading .form-label {
  margin: 0;
}

.telecon-app-shell .telecon-config-mode-switch {
  display: inline-flex;
  width: auto;
  min-width: 7rem;
  margin: 0;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
}

.telecon-app-shell .telecon-config-mode-switch .switch-toggle-slider {
  flex: 0 0 auto;
}

.telecon-app-shell .telecon-config-mode-label {
  color: var(--tw-muted);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

.telecon-app-shell .telecon-lora-schedule-field .form-control,
.telecon-app-shell .telecon-lora-schedule-field .form-select {
  min-height: 2.75rem;
}

.telecon-app-shell .telecon-lora-data-field .form-select {
  min-height: 2.75rem;
}

.telecon-app-shell .telecon-config-actions {
  display: flex;
  padding-top: 0.25rem;
  grid-column: 1 / -1;
  justify-content: flex-end;
}

.telecon-app-shell .telecon-config-actions .btn,
.telecon-app-shell .telecon-device-config-modal .modal-footer .btn {
  min-width: 8.5rem;
}

.telecon-app-shell .telecon-device-config-modal .modal-footer {
  padding: 0.875rem 1.25rem;
  background: var(--tw-surface-soft) !important;
  border-top: 1px solid var(--tw-border);
}

@media (max-width: 767.98px) {
  .telecon-app-shell .telecon-device-config-modal .telecon-dialog-config,
  .telecon-app-shell .telecon-device-config-modal .telecon-dialog-config-compact {
    width: calc(100vw - 1rem);
    margin: 0.5rem auto;
  }

  .telecon-app-shell .telecon-config-workspace {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  .telecon-app-shell .telecon-config-workspace .telecon-config-nav {
    display: flex;
    padding: 0.625rem;
    overflow-x: auto;
    border-right: 0 !important;
    border-bottom: 1px solid var(--tw-border) !important;
  }

  .telecon-app-shell .telecon-config-workspace .telecon-config-nav .nav-item {
    width: auto;
    min-width: max-content;
  }

  .telecon-app-shell .telecon-config-workspace .telecon-config-content {
    padding: 1rem !important;
  }

  .telecon-app-shell .telecon-config-form,
  .telecon-app-shell .telecon-config-compact-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .telecon-app-shell .telecon-lora-config-form > .telecon-lora-profile-field,
  .telecon-app-shell .telecon-lora-config-form > .telecon-lora-data-field {
    grid-column: auto;
    max-width: none;
  }

  .telecon-app-shell .telecon-config-actions {
    grid-column: auto;
  }

  .telecon-app-shell .telecon-config-actions .btn,
  .telecon-app-shell .telecon-device-config-modal .modal-footer .btn {
    width: 100%;
  }
}

.telecon-app-shell .telecon-form-modal .telecon-mini-table {
  width: 100%;
  height: 100%;
  color: var(--tw-text);
  background: var(--tw-surface-soft);
  border: 1px solid var(--tw-divider);
  border-radius: var(--tw-radius);
}

.telecon-app-shell .telecon-form-modal .telecon-mini-table td {
  padding: 0.45rem 0.6rem;
  border-top: 1px solid var(--tw-divider);
}

.telecon-app-shell .telecon-form-modal .telecon-mini-table tr:first-child td {
  border-top: 0;
}

.telecon-app-shell #orderModal .modal-body > .row:not(:first-of-type),
.telecon-app-shell #addRoleModal form > .row,
.telecon-app-shell #addSubUserModal .modal-body > .row:first-of-type {
  padding: 0.75rem;
  background: var(--tw-surface-soft);
  border: 1px solid var(--tw-divider);
  border-radius: var(--tw-radius);
}

.telecon-app-shell #orderModal .telecon-order-map {
  min-height: 18rem;
  overflow: hidden;
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius);
}

.telecon-app-shell .telecon-order-form-modal .telecon-order-dialog {
  width: min(96rem, calc(100vw - 2rem));
  max-width: none;
  height: calc(100dvh - 2rem);
  margin: 1rem auto;
}

.telecon-app-shell .telecon-order-form-modal .telecon-order-modal-content {
  height: 100%;
  max-height: none;
  overflow: hidden;
  background: var(--tw-canvas);
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius-lg);
}

.telecon-app-shell .telecon-order-form-modal .telecon-order-modal-body {
  display: grid;
  min-height: 0;
  padding: 0 !important;
  overflow: hidden;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.telecon-app-shell .telecon-order-heading {
  position: relative;
  z-index: 4;
  display: grid;
  min-height: 4.75rem;
  padding: 0.75rem 1rem 0.75rem 1.5rem;
  grid-template-columns: minmax(12rem, 1fr) minmax(16rem, 22rem) auto;
  align-items: center;
  gap: 1rem;
  background: var(--tw-surface);
  border-bottom: 1px solid var(--tw-border);
}

.telecon-app-shell .telecon-order-heading-copy {
  display: flex;
  min-width: 0;
  align-items: center;
}

.telecon-app-shell .telecon-order-signature {
  width: 0.1875rem;
  height: 2rem;
  margin-right: 0.9rem;
  flex: 0 0 0.1875rem;
  background: var(--tw-brand);
  border-radius: 0.125rem;
}

.telecon-app-shell .telecon-order-heading h3 {
  margin: 0;
  color: var(--tw-heading);
  font-size: 1.125rem;
}

.telecon-app-shell .telecon-order-type {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
}

.telecon-app-shell .telecon-order-type .form-label {
  margin: 0;
  white-space: nowrap;
}

.telecon-app-shell .telecon-order-heading .btn-close {
  position: static !important;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0.5rem;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--tw-radius);
  opacity: 0.68;
}

.dark-style .telecon-app-shell .telecon-order-heading .btn-close {
  filter: invert(1) grayscale(1);
}

.telecon-app-shell .telecon-order-scroll {
  min-width: 0;
  min-height: 0;
  padding: 1rem;
  overflow: auto;
  background: var(--tw-canvas);
  scrollbar-color: var(--tw-control-border) transparent;
  scrollbar-width: thin;
}

.telecon-app-shell .telecon-order-scroll > .row {
  margin: 0 0 0.75rem !important;
  padding: 0.875rem 0.5rem 0.125rem;
  background: var(--tw-surface);
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius);
}

.telecon-app-shell .telecon-order-scroll > .row:has(> input[type="hidden"]) {
  display: none;
}

.telecon-app-shell .telecon-order-scroll > hr {
  display: none;
}

.telecon-app-shell .telecon-order-scroll .telecon-mini-table {
  min-height: 4.25rem;
}

.telecon-app-shell .telecon-order-scroll .header {
  margin: 0 0 0.65rem;
  color: var(--tw-muted);
  font-size: 0.72rem;
  font-weight: 600;
}

.telecon-app-shell .telecon-order-form-modal #orderModal .telecon-order-map,
.telecon-app-shell .telecon-order-form-modal .telecon-order-map {
  min-height: 22rem;
}

.telecon-app-shell .telecon-order-actions {
  position: relative;
  z-index: 4;
  display: flex;
  min-height: 4.5rem;
  padding: 0.75rem 1rem;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  background: var(--tw-surface);
  border-top: 1px solid var(--tw-border);
}

.telecon-app-shell .telecon-order-actions .btn {
  min-width: 8.5rem;
  margin: 0 !important;
}

@media (max-width: 767.98px) {
  .telecon-app-shell .telecon-order-form-modal .telecon-order-dialog {
    width: calc(100vw - 1rem);
    height: calc(100dvh - 1rem);
    margin: 0.5rem auto;
  }

  .telecon-app-shell .telecon-order-heading {
    padding: 0.75rem;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .telecon-app-shell .telecon-order-type {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .telecon-app-shell .telecon-order-heading .btn-close {
    grid-column: 2;
    grid-row: 1;
  }

  .telecon-app-shell .telecon-order-scroll {
    padding: 0.75rem;
  }

  .telecon-app-shell .telecon-order-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .telecon-app-shell .telecon-order-actions .btn {
    width: 100%;
  }
}

.telecon-app-shell .telecon-compact-modal .telecon-dialog-form {
  width: min(calc(100vw - 1.5rem), 29rem);
}

.telecon-app-shell .telecon-compact-modal .modal-body {
  padding: 1rem 1.125rem;
}

.telecon-app-shell .telecon-compact-modal .modal-footer {
  min-height: 3.75rem;
  padding: 0.625rem 1.125rem;
}

.telecon-app-shell .telecon-dialog-media {
  width: min(calc(100vw - 2rem), 78rem);
  max-width: none;
  margin: 1rem auto;
}

.telecon-app-shell .telecon-media-modal .modal-content {
  max-height: calc(100vh - 2rem);
  overflow: hidden;
}

.telecon-app-shell .telecon-media-modal .modal-body {
  overflow: auto;
}

.telecon-app-shell .telecon-media-modal .modal-body > .card,
.telecon-app-shell .telecon-media-modal .modal-body > .card > .card {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.telecon-app-shell .telecon-media-modal img.telecon-modal-image,
.telecon-app-shell .telecon-media-modal #modal-photo {
  width: auto;
  max-width: 100%;
  max-height: calc(100vh - 9rem);
  margin: auto;
  object-fit: contain;
}

.telecon-app-shell .telecon-media-modal .dropzone {
  min-height: 16rem;
  color: var(--tw-muted);
  background: var(--tw-surface-soft);
  border: 1px dashed var(--tw-control-border);
  border-radius: var(--tw-radius);
}

.telecon-app-shell #photosModal .telecon-dialog-media {
  width: min(calc(100vw - 2rem), 54rem);
}

.telecon-app-shell .telecon-media-workspace {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--tw-surface);
}

.telecon-app-shell .telecon-media-workspace .telecon-modal-heading {
  flex: 0 0 auto;
}

.telecon-app-shell .telecon-media-upload-body,
.telecon-app-shell .telecon-media-preview-body {
  padding: 1rem;
  background: var(--tw-surface-soft);
}

.telecon-app-shell .telecon-media-modal .telecon-media-dropzone {
  display: grid;
  min-height: 15rem;
  padding: 1.25rem;
  place-items: center;
  background: var(--tw-surface);
  border: 1px dashed var(--tw-accent);
  border-radius: var(--tw-radius);
  transition: border-color 160ms ease, background-color 160ms ease;
}

.telecon-app-shell .telecon-media-modal .telecon-media-dropzone:hover,
.telecon-app-shell .telecon-media-modal .telecon-media-dropzone.dz-drag-hover {
  background: var(--tw-accent-soft);
  border-color: var(--tw-accent-strong);
}

.telecon-app-shell .telecon-media-dropzone .dz-message {
  display: flex;
  max-width: 28rem;
  margin: 0;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  color: var(--tw-text);
  text-align: center;
}

.telecon-app-shell .telecon-media-dropzone-icon {
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 0.2rem;
  color: var(--tw-accent);
  background: var(--tw-accent-soft);
  border: 1px solid var(--tw-accent-border);
  border-radius: 50%;
  place-items: center;
}

.telecon-app-shell .telecon-media-dropzone-icon i {
  font-size: 1.5rem;
}

.telecon-app-shell .telecon-media-dropzone .dz-message strong {
  font-size: 1rem;
  font-weight: 700;
}

.telecon-app-shell .telecon-media-dropzone .dz-message .note {
  display: block;
  margin: 0;
  color: var(--tw-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.telecon-app-shell .telecon-media-preview-body {
  display: grid;
  min-height: 18rem;
  place-items: center;
}

.telecon-app-shell .telecon-media-preview-body .telecon-modal-image {
  display: block;
  border-radius: calc(var(--tw-radius) - 2px);
}

.telecon-app-shell #consumerDevicesBlock #providerDataTable_filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.telecon-app-shell #consumerDevicesBlock #providerDataTable_filter label {
  flex: 1 1 18rem;
  min-width: 12rem;
  margin: 0;
}

.telecon-app-shell #consumerDevicesBlock #providerDataTable_filter .btn-icon {
  flex: 0 0 2.375rem;
  width: 2.375rem;
  height: 2.375rem;
}

@media (max-width: 767.98px) {
  .telecon-app-shell .telecon-users-table-region {
    overflow-x: auto;
  }

  .telecon-app-shell .telecon-users-table-region .datatables-users {
    width: 44rem !important;
    min-width: 44rem !important;
  }

  .telecon-app-shell .telecon-dialog-table,
  .telecon-app-shell .telecon-dialog-form,
  .telecon-app-shell .telecon-dialog-form.telecon-dialog-wide,
  .telecon-app-shell .telecon-dialog-media {
    width: calc(100vw - 1rem);
    margin: 0.5rem auto;
  }

  .telecon-app-shell .telecon-table-modal .modal-content,
  .telecon-app-shell .telecon-form-modal .modal-content,
  .telecon-app-shell .telecon-media-modal .modal-content {
    max-height: calc(100vh - 1rem);
  }

  .telecon-app-shell #consumerDevicesBlock #providerDataTable_filter {
    width: 100%;
    flex-wrap: wrap;
  }

  .telecon-app-shell #consumerDevicesBlock #providerDataTable_filter label {
    flex-basis: 100%;
  }
}

.telecon-app-shell .alert {
  color: var(--tw-text);
  border-radius: var(--tw-radius);
}

.telecon-app-shell .text-muted {
  color: var(--tw-muted) !important;
}

.telecon-app-shell .bg-label-primary {
  color: var(--tw-info) !important;
  background: var(--tw-info-soft) !important;
}

.telecon-app-shell .bg-label-success {
  color: var(--tw-success) !important;
  background: var(--tw-success-soft) !important;
}

.telecon-app-shell .bg-label-warning {
  color: var(--tw-warning) !important;
  background: var(--tw-warning-soft) !important;
}

.telecon-app-shell .bg-label-danger {
  color: var(--tw-danger) !important;
  background: var(--tw-danger-soft) !important;
}

.telecon-app-shell .select2-dropdown,
.telecon-app-shell .bootstrap-select .dropdown-menu,
.telecon-app-shell .flatpickr-calendar {
  color: var(--tw-text);
  background: var(--tw-surface-raised);
  border-color: var(--tw-border);
  border-radius: var(--tw-radius);
  box-shadow: var(--tw-shadow-raised);
}

.telecon-app-shell .select2-results__option--highlighted,
.telecon-app-shell .bootstrap-select .dropdown-item:hover {
  color: var(--tw-heading) !important;
  background: var(--tw-surface-soft) !important;
}

/* Distinct widget compositions. The data shape, not a shared minimum height, controls each card. */
.telecon-app-shell .telecon-widget-card-summary .row-bordered {
  display: block;
  min-height: 0;
}

.telecon-app-shell .telecon-widget-card-summary {
  display: grid !important;
  grid-template-columns: 14rem minmax(0, 1fr);
  grid-template-rows: minmax(8.5rem, auto);
}

.telecon-app-shell .telecon-widget-card-summary > .card-body {
  grid-column: 2;
  grid-row: 1;
  padding: 0.75rem 1rem !important;
}

.telecon-app-shell .telecon-widget-card-summary .content-left {
  min-height: 100%;
  padding: 0.75rem 0.5rem;
  border-right: 0;
}

.telecon-app-shell .telecon-widget-card-summary .telecon-widget-table {
  width: 100%;
  margin-top: 0.25rem;
}

.telecon-app-shell .telecon-widget-card-summary #modemsChartBlock {
  display: none;
}

.telecon-app-shell .telecon-widget-card-summary .widget-table td {
  height: 2.4rem;
}

.telecon-app-shell .telecon-widget-card-summary .widget-table tbody {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.625rem;
}

.telecon-app-shell .telecon-widget-card-summary .widget-table tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 0.25rem 0.625rem;
  background: var(--tw-surface-soft);
  border: 1px solid var(--tw-divider);
  border-radius: var(--tw-radius);
}

.telecon-app-shell .telecon-widget-card-summary .widget-table td {
  padding: 0.25rem !important;
  border: 0 !important;
}

.telecon-app-shell .telecon-widget-card-summary > .card-footer {
  grid-column: 1;
  grid-row: 1;
  min-height: 100%;
  padding: 1.25rem !important;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  background: var(--tw-surface-soft) !important;
  border-top: 0 !important;
  border-right: 1px solid var(--tw-border) !important;
}

.telecon-app-shell .telecon-widget-card-summary > .card-footer h4 {
  font-size: 1.75rem;
  line-height: 1;
}

.telecon-app-shell .telecon-widget-card-summary > .card-footer small {
  margin-top: 0.35rem !important;
  text-transform: uppercase;
}

.telecon-app-shell .telecon-widget-card-chart .row-bordered {
  grid-template-columns: minmax(15rem, 17rem) minmax(0, 1fr);
  min-height: 22rem;
}

.telecon-app-shell .telecon-widget-card-chart .content-left {
  padding: 1rem;
  background: var(--tw-surface-soft);
}

.telecon-app-shell .telecon-widget-card-chart .card-header {
  min-height: 4.5rem;
  padding: 0.75rem 1rem;
}

.telecon-app-shell .telecon-widget-card-chart .card-body.p-0 {
  min-height: 17.5rem;
}

.telecon-app-shell .telecon-widget-card-status-list .content-left {
  padding: 1rem 1.125rem 0.75rem;
}

.telecon-app-shell .telecon-widget-card-status-list .telecon-widget-toolbar {
  display: flex;
  min-height: 3.5rem;
  margin-bottom: 0.75rem;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--tw-divider);
}

.telecon-app-shell .telecon-widget-card-status-list .telecon-widget-toolbar > .badge {
  margin-bottom: 0.8rem;
}

.telecon-app-shell .telecon-widget-card-status-list .telecon-widget-date {
  width: min(100%, 18rem);
  margin-bottom: 0.75rem;
}

.telecon-app-shell .telecon-widget-card-status-list .widget-table {
  table-layout: fixed;
}

.telecon-app-shell .telecon-widget-card-status-list .widget-table td:first-child {
  padding-right: 1rem !important;
}

.telecon-app-shell .telecon-widget-card-status-list .widget-table td:last-child {
  width: 4rem;
  color: var(--tw-heading);
  font-weight: 700;
  text-align: right;
}

.telecon-app-shell .telecon-widget-card-status-list .widget-table p {
  white-space: normal !important;
}

/* Canonical table workspace used by every large list modal. */
.telecon-app-shell .telecon-table-workspace-modal {
  --tw-workspace-accent: var(--tw-brand);
}

.telecon-app-shell .telecon-table-workspace-modal > .telecon-workspace-dialog {
  width: calc(100vw - 3rem) !important;
  max-width: 118rem !important;
  height: calc(100dvh - 3rem) !important;
  margin: 1.5rem auto !important;
}

.telecon-app-shell .telecon-table-workspace-modal .telecon-workspace-modal {
  height: 100% !important;
  max-height: none !important;
  overflow: hidden !important;
  color: var(--tw-text) !important;
  background: var(--tw-canvas) !important;
  border: 1px solid var(--tw-border) !important;
  border-radius: var(--tw-radius-lg) !important;
  box-shadow: 0 1.5rem 4rem rgba(24, 36, 54, 0.2) !important;
}

.dark-style .telecon-app-shell .telecon-table-workspace-modal .telecon-workspace-modal {
  box-shadow: 0 1.75rem 4.5rem rgba(0, 0, 0, 0.44) !important;
}

.telecon-app-shell .telecon-table-workspace-modal .telecon-workspace-body {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  padding: 0 !important;
  overflow: hidden !important;
}

.telecon-app-shell .telecon-table-workspace-modal .telecon-modal-heading {
  position: relative;
  z-index: 5;
  display: flex;
  min-height: 4.25rem;
  padding: 1rem 1.5rem 1rem 1.875rem;
  align-items: center;
  justify-content: space-between;
  background: var(--tw-surface) !important;
  border-bottom: 1px solid var(--tw-border);
}

.telecon-app-shell .telecon-table-workspace-modal .telecon-modal-heading-copy {
  display: flex;
  min-width: 0;
  align-items: stretch;
}

.telecon-app-shell .telecon-table-workspace-modal .telecon-modal-signature {
  display: block;
  width: 0.1875rem;
  min-height: 1.75rem;
  margin-right: 1rem;
  flex: 0 0 0.1875rem;
  background: var(--tw-workspace-accent);
  border-radius: 0.125rem;
}

.telecon-app-shell .telecon-table-workspace-modal .telecon-modal-heading h3 {
  margin: 0;
  color: var(--tw-heading) !important;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.45;
}

.telecon-app-shell .telecon-table-workspace-modal .telecon-modal-heading .btn-close {
  position: static !important;
  width: 2rem;
  height: 2rem;
  margin: 0 0 0 1rem;
  padding: 0.5rem;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--tw-radius);
  opacity: 0.68;
}

.telecon-app-shell .telecon-table-workspace-modal .telecon-modal-heading .btn-close:hover,
.telecon-app-shell .telecon-table-workspace-modal .telecon-modal-heading .btn-close:focus-visible {
  background-color: var(--tw-surface-soft);
  border-color: var(--tw-border);
  opacity: 1;
}

.dark-style .telecon-app-shell .telecon-table-workspace-modal .telecon-modal-heading .btn-close {
  filter: invert(1) grayscale(1);
}

.telecon-app-shell .telecon-table-workspace-modal .telecon-table-workspace {
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: var(--tw-surface) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.telecon-app-shell .telecon-table-workspace-modal .telecon-table-workspace > .card-body {
  display: grid !important;
  grid-template-columns: 17rem minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 0 !important;
}

.telecon-app-shell .telecon-table-workspace-modal .telecon-table-filter-rail {
  display: flex;
  min-width: 0;
  padding: 1.25rem;
  overflow: auto;
  flex-direction: column;
  gap: 0.875rem;
  background: var(--tw-surface-soft);
  border-right: 1px solid var(--tw-border);
}

.telecon-app-shell .telecon-table-workspace-modal .telecon-table-filter-rail .telecon-filter-row {
  display: contents !important;
}

.telecon-app-shell .telecon-table-workspace-modal .telecon-table-filter-rail .telecon-filter-panel {
  display: contents;
  margin: 0;
  padding: 0;
}

.telecon-app-shell .telecon-table-workspace-modal .telecon-table-filter-rail .telecon-filter-row > [class*="col-"] {
  width: 100% !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}

.telecon-app-shell .telecon-table-workspace-modal .telecon-table-filter-rail .telecon-filter-row > [class*="col-"]:empty {
  display: none;
}

.telecon-app-shell .telecon-table-workspace-modal .telecon-table-filter-rail .form-label {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--tw-muted) !important;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
}

.telecon-app-shell .telecon-table-workspace-modal .telecon-filter-submit {
  order: 100;
  margin-top: auto !important;
  padding-top: 0.25rem !important;
}

.telecon-app-shell .telecon-table-workspace-modal .telecon-filter-action {
  width: 100%;
  min-height: 2.5rem;
  color: #fff !important;
  background: var(--tw-workspace-accent) !important;
  border-color: var(--tw-workspace-accent) !important;
  box-shadow: none !important;
}

.telecon-app-shell .telecon-table-workspace-modal .telecon-table-pane {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--tw-surface);
}

.telecon-app-shell .telecon-table-workspace-modal .telecon-table-pane > .card-datatable {
  width: 100%;
  height: 100%;
  max-height: none !important;
  overflow: auto;
  background: var(--tw-surface) !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.telecon-app-shell .telecon-table-workspace-modal .dataTables_wrapper {
  display: flex;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  min-height: 100%;
  flex-direction: column;
  color: var(--tw-text);
  background: var(--tw-surface);
}

.telecon-app-shell .telecon-table-workspace-modal .telecon-table-pane-wide table.dataTable {
  min-width: 104rem !important;
  table-layout: auto !important;
}

.telecon-app-shell .telecon-table-workspace-modal .telecon-table-pane-valve table.dataTable {
  min-width: 126rem !important;
}

.telecon-app-shell .telecon-table-workspace-modal .telecon-table-pane-valve #devicesDataTable {
  width: 126rem !important;
  min-width: 126rem !important;
  table-layout: auto !important;
}

.telecon-app-shell .telecon-table-workspace-modal .telecon-table-pane-valve #devicesDataTable th,
.telecon-app-shell .telecon-table-workspace-modal .telecon-table-pane-valve #devicesDataTable td {
  width: auto !important;
  min-width: 6rem !important;
}

.telecon-app-shell .telecon-table-workspace-modal .telecon-table-pane-valve #devicesDataTable :is(th, td):nth-child(1) { min-width: 8rem !important; }
.telecon-app-shell .telecon-table-workspace-modal .telecon-table-pane-valve #devicesDataTable :is(th, td):nth-child(2) { min-width: 5rem !important; }
.telecon-app-shell .telecon-table-workspace-modal .telecon-table-pane-valve #devicesDataTable :is(th, td):nth-child(3) { min-width: 7rem !important; }
.telecon-app-shell .telecon-table-workspace-modal .telecon-table-pane-valve #devicesDataTable :is(th, td):nth-child(4) { min-width: 10rem !important; }
.telecon-app-shell .telecon-table-workspace-modal .telecon-table-pane-valve #devicesDataTable :is(th, td):nth-child(5) { min-width: 10rem !important; }
.telecon-app-shell .telecon-table-workspace-modal .telecon-table-pane-valve #devicesDataTable :is(th, td):nth-child(6) { min-width: 11rem !important; }
.telecon-app-shell .telecon-table-workspace-modal .telecon-table-pane-valve #devicesDataTable :is(th, td):nth-child(7) { min-width: 9rem !important; }
.telecon-app-shell .telecon-table-workspace-modal .telecon-table-pane-valve #devicesDataTable :is(th, td):nth-child(8) { min-width: 30rem !important; }
.telecon-app-shell .telecon-table-workspace-modal .telecon-table-pane-valve #devicesDataTable :is(th, td):nth-child(9) { min-width: 18rem !important; }
.telecon-app-shell .telecon-table-workspace-modal .telecon-table-pane-valve #devicesDataTable :is(th, td):nth-child(10) { min-width: 4.25rem !important; }

.telecon-app-shell .telecon-table-workspace-modal .telecon-table-pane-orders table.dataTable {
  min-width: 136rem !important;
}

/* Orders are the operators' primary workspace: use the complete viewport. */
.telecon-app-shell #openOrdersModal.telecon-orders-fullscreen {
  padding: 0 !important;
}

.telecon-app-shell #openOrdersModal.telecon-orders-fullscreen > .telecon-orders-fullscreen-dialog {
  display: flex !important;
  width: 100vw !important;
  max-width: none !important;
  height: 100dvh !important;
  margin: 0 !important;
}

.telecon-app-shell #openOrdersModal .telecon-workspace-modal {
  min-height: 100dvh !important;
  flex: 1 1 auto !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.telecon-app-shell #openOrdersModal .telecon-table-workspace {
  height: 100% !important;
  margin: 0 !important;
}

.telecon-app-shell #openOrdersModal .telecon-table-workspace > .card-body {
  grid-template-columns: clamp(13rem, 14vw, 15rem) minmax(0, 1fr);
  padding: 0 !important;
  gap: 0 !important;
}

@media (min-width: 1440px) {
  .telecon-app-shell #openOrdersModal .telecon-table-pane-orders table.dataTable {
    width: 100% !important;
    min-width: 100% !important;
    table-layout: fixed !important;
  }

  .telecon-app-shell #openOrdersModal .telecon-table-pane-orders table.dataTable :is(th, td) {
    min-width: 0 !important;
    overflow-wrap: anywhere;
  }

  .telecon-app-shell #openOrdersModal .telecon-table-pane-orders table.dataTable :is(th, td):nth-child(1) { width: 6%; }
  .telecon-app-shell #openOrdersModal .telecon-table-pane-orders table.dataTable :is(th, td):nth-child(2) { width: 6%; }
  .telecon-app-shell #openOrdersModal .telecon-table-pane-orders table.dataTable :is(th, td):nth-child(3) { width: 7%; }
  .telecon-app-shell #openOrdersModal .telecon-table-pane-orders table.dataTable :is(th, td):nth-child(4) { width: 4%; }
  .telecon-app-shell #openOrdersModal .telecon-table-pane-orders table.dataTable :is(th, td):nth-child(5) { width: 7%; }
  .telecon-app-shell #openOrdersModal .telecon-table-pane-orders table.dataTable :is(th, td):nth-child(6) { width: 7%; }
  .telecon-app-shell #openOrdersModal .telecon-table-pane-orders table.dataTable :is(th, td):nth-child(7) { width: 11%; }
  .telecon-app-shell #openOrdersModal .telecon-table-pane-orders table.dataTable :is(th, td):nth-child(8) { width: 15%; }
  .telecon-app-shell #openOrdersModal .telecon-table-pane-orders table.dataTable :is(th, td):nth-child(9) { width: 7%; }
  .telecon-app-shell #openOrdersModal .telecon-table-pane-orders table.dataTable :is(th, td):nth-child(10) { width: 6%; }
  .telecon-app-shell #openOrdersModal .telecon-table-pane-orders table.dataTable :is(th, td):nth-child(11) { width: 13%; }
  .telecon-app-shell #openOrdersModal .telecon-table-pane-orders table.dataTable :is(th, td):nth-child(12) { width: 6%; }
  .telecon-app-shell #openOrdersModal .telecon-table-pane-orders table.dataTable :is(th, td):nth-child(13) { width: 5%; }
}

.telecon-app-shell .telecon-table-workspace-modal .telecon-table-pane-user-orders table.dataTable {
  min-width: 118rem !important;
}

.telecon-app-shell .telecon-table-workspace-modal-no-filters .telecon-table-workspace > .card-body {
  display: block !important;
}

.telecon-app-shell .telecon-workspace-dialog-compact {
  width: min(90rem, calc(100vw - 2rem)) !important;
  height: min(46rem, calc(100dvh - 2rem)) !important;
}

/* Empty compact tables should read as concise states, not full-screen workspaces. */
.telecon-app-shell .telecon-table-workspace-modal-no-filters:has(.dataTables_empty) > .telecon-workspace-dialog-compact {
  display: flex;
  min-height: calc(100dvh - 2rem);
  height: auto !important;
  margin: 1rem auto !important;
  align-items: center;
}

.telecon-app-shell .telecon-table-workspace-modal-no-filters:has(.dataTables_empty) .telecon-workspace-modal {
  height: auto !important;
  max-height: calc(100dvh - 2rem) !important;
}

.telecon-app-shell .telecon-table-workspace-modal-no-filters:has(.dataTables_empty) .telecon-workspace-body {
  grid-template-rows: auto auto;
}

.telecon-app-shell .telecon-table-workspace-modal-no-filters:has(.dataTables_empty) :is(
  .telecon-table-workspace,
  .telecon-table-workspace > .card-body,
  .telecon-table-pane,
  .telecon-table-pane > .card-datatable
) {
  height: auto !important;
}

.telecon-app-shell .telecon-table-workspace-modal .telecon-table-pane-compact table.dataTable {
  min-width: 54rem !important;
}

.telecon-app-shell .telecon-table-workspace-modal .telecon-table-pane-suppliers table.dataTable {
  min-width: 74rem !important;
}

.telecon-app-shell .telecon-table-workspace-with-footer {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.telecon-app-shell .telecon-table-workspace-modal .telecon-table-workspace-with-footer > .card-body {
  height: auto;
}

.telecon-app-shell .telecon-table-workspace-with-footer .telecon-workspace-actions {
  position: relative;
  z-index: 6;
  display: flex;
  min-height: 4.5rem;
  padding: 0.875rem 1rem;
  align-items: center;
  justify-content: flex-end;
  background: var(--tw-surface);
  border-top: 1px solid var(--tw-border);
}

.telecon-app-shell .telecon-table-workspace-modal .telecon-table-section-heading {
  position: sticky;
  z-index: 5;
  top: 0;
  min-height: 3rem;
  padding: 0.875rem 1rem;
  color: var(--tw-heading);
  background: var(--tw-surface);
  border-bottom: 1px solid var(--tw-border);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.telecon-app-shell .telecon-table-workspace-modal .telecon-table-section-heading + .card-datatable {
  height: calc(100% - 3rem);
}

.telecon-app-shell .telecon-table-workspace-modal .dataTables_wrapper > .row:first-child,
.telecon-app-shell .telecon-table-workspace-modal .dataTables_wrapper > .row:last-child {
  position: sticky;
  z-index: 4;
  display: grid !important;
  min-height: 4.5rem !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0.875rem 1rem !important;
  align-items: center;
  background: var(--tw-surface) !important;
}

.telecon-app-shell .telecon-table-workspace-modal .dataTables_wrapper > .row:first-child {
  top: 0;
  grid-template-columns: auto minmax(18rem, 1fr);
  border-bottom: 1px solid var(--tw-border);
}

.telecon-app-shell .telecon-table-workspace-modal .dataTables_wrapper > .row:last-child {
  bottom: 0;
  grid-template-columns: minmax(14rem, 1fr) auto;
  margin-top: auto !important;
  border-top: 1px solid var(--tw-border);
}

.telecon-app-shell .telecon-table-workspace-modal .dataTables_wrapper > .row > [class*="col-"] {
  width: auto;
  max-width: none;
  min-height: 2.375rem;
  padding: 0 !important;
}

.telecon-app-shell .telecon-table-workspace-modal .dt-action-buttons {
  display: flex !important;
  margin: 0 !important;
  align-items: center;
  justify-content: flex-end !important;
  gap: 0.5rem;
}

.telecon-app-shell .telecon-table-workspace-modal .dataTables_filter,
.telecon-app-shell .telecon-table-workspace-modal .dataTables_length,
.telecon-app-shell .telecon-table-workspace-modal .dataTables_info,
.telecon-app-shell .telecon-table-workspace-modal .dataTables_paginate {
  margin: 0 !important;
  padding: 0 !important;
}

.telecon-app-shell .telecon-table-workspace-modal .dataTables_filter input {
  min-width: 12rem;
}

.telecon-app-shell .telecon-table-workspace-modal table.dataTable {
  width: 100% !important;
  margin: 0 !important;
  color: var(--tw-text);
  border-collapse: separate !important;
  border-spacing: 0;
}

.telecon-app-shell .telecon-table-workspace-modal table.dataTable thead th {
  position: sticky;
  z-index: 3;
  top: 4.5rem;
  padding: 0.72rem 0.7rem !important;
  color: var(--tw-heading) !important;
  background: var(--tw-surface-soft) !important;
  border-color: var(--tw-border) !important;
  font-size: 0.68rem !important;
  line-height: 1.35;
}

.telecon-app-shell .telecon-table-workspace-modal table.dataTable tbody td {
  padding: 0.68rem 0.7rem !important;
  color: var(--tw-text) !important;
  background: var(--tw-surface) !important;
  border-color: var(--tw-divider) !important;
  font-size: 0.76rem !important;
  line-height: 1.4;
  vertical-align: middle;
}

.telecon-app-shell .telecon-table-workspace-modal table.dataTable tbody tr:hover > * {
  color: var(--tw-heading) !important;
  background: color-mix(in srgb, var(--tw-info-soft) 58%, var(--tw-surface)) !important;
}

.telecon-app-shell .telecon-table-workspace-modal table.dataTable th:last-child,
.telecon-app-shell .telecon-table-workspace-modal table.dataTable td:last-child {
  position: sticky;
  z-index: 2;
  right: 0;
  min-width: 4.25rem !important;
  background: var(--tw-surface) !important;
  box-shadow: -1px 0 0 var(--tw-border);
}

.telecon-app-shell .telecon-table-workspace-modal table.dataTable thead th:last-child {
  z-index: 5;
  background: var(--tw-surface-soft) !important;
}

/* Legacy owner device details use the same workspace language without losing their original data contract. */
.telecon-app-shell .telecon-legacy-device-modal {
  --tw-workspace-accent: var(--tw-info);
}

.telecon-app-shell .telecon-legacy-device-modal .telecon-modal-heading-copy {
  align-items: stretch;
}

.telecon-app-shell .telecon-legacy-device-modal .telecon-modal-heading-copy > div {
  min-width: 0;
}

.telecon-app-shell .telecon-legacy-device-modal .telecon-modal-heading p {
  margin: 0.2rem 0 0;
  overflow: hidden;
  color: var(--tw-muted);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.telecon-app-shell .telecon-legacy-device-workspace {
  display: grid;
  min-width: 0;
  min-height: 0;
  padding: 1rem;
  overflow: auto;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-content: start;
  gap: 1rem;
  background: var(--tw-canvas);
}

.telecon-app-shell .telecon-legacy-device-meta,
.telecon-app-shell .telecon-legacy-readings,
.telecon-app-shell .telecon-legacy-archive,
.telecon-app-shell .telecon-legacy-chart {
  min-width: 0;
  margin: 0;
  background: var(--tw-surface) !important;
  border: 1px solid var(--tw-border) !important;
  border-radius: var(--tw-radius) !important;
  box-shadow: none !important;
}

.telecon-app-shell .telecon-legacy-device-meta {
  display: grid;
  padding: 1rem;
  grid-column: span 8;
  grid-template-columns: minmax(11rem, 0.7fr) minmax(0, 1.8fr);
  align-items: center;
  gap: 1rem;
}

.telecon-app-shell .telecon-legacy-device-brand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.65rem;
}

.telecon-app-shell .telecon-legacy-device-brand .app-brand-text {
  overflow: hidden;
  color: var(--tw-heading) !important;
  font-size: 1rem !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.telecon-app-shell .telecon-legacy-device-meta dl {
  display: grid;
  margin: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.telecon-app-shell .telecon-legacy-device-meta dl > div {
  min-width: 0;
  padding-left: 0.75rem;
  border-left: 1px solid var(--tw-divider);
}

.telecon-app-shell .telecon-legacy-device-meta dt,
.telecon-app-shell .telecon-legacy-readings h4,
.telecon-app-shell .telecon-legacy-reading span {
  margin: 0 0 0.25rem;
  color: var(--tw-muted);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.35;
  text-transform: uppercase;
}

.telecon-app-shell .telecon-legacy-device-meta dd {
  margin: 0;
  overflow: hidden;
  color: var(--tw-heading);
  font-size: 0.82rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.telecon-app-shell .telecon-legacy-readings {
  display: grid;
  padding: 1rem;
  grid-column: span 4;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  gap: 0.75rem;
}

.telecon-app-shell .telecon-legacy-readings h4 {
  grid-column: 1 / -1;
}

.telecon-app-shell .telecon-legacy-reading {
  min-width: 0;
  padding: 0.7rem 0.8rem;
  background: var(--tw-surface-soft);
  border: 1px solid var(--tw-divider);
  border-radius: var(--tw-radius-sm);
}

.telecon-app-shell .telecon-legacy-reading span {
  display: block;
}

.telecon-app-shell .telecon-legacy-reading strong {
  display: block;
  overflow: hidden;
  color: var(--tw-heading);
  font-size: 1.15rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.telecon-app-shell .telecon-legacy-archive {
  grid-column: span 5;
  overflow: hidden;
}

.telecon-app-shell .telecon-legacy-chart {
  grid-column: span 7;
  overflow: hidden;
}

.telecon-app-shell .telecon-legacy-device-modal .telecon-table-section-heading {
  position: static;
  display: flex;
  min-height: 3.5rem;
  padding: 0.85rem 1rem;
  align-items: center;
  text-transform: none;
}

.telecon-app-shell .telecon-legacy-device-modal .telecon-table-section-heading .telecon-modal-signature {
  min-height: 1.25rem;
  margin-right: 0.65rem;
}

.telecon-app-shell .telecon-legacy-device-modal .telecon-table-section-heading h4 {
  margin: 0;
  color: var(--tw-heading);
  font-size: 0.9rem;
}

.telecon-app-shell .telecon-legacy-device-modal .telecon-legacy-archive .dataTables_wrapper > .row:first-child,
.telecon-app-shell .telecon-legacy-device-modal .telecon-legacy-archive .dataTables_wrapper > .row:last-child {
  position: static;
  min-height: 3.75rem !important;
  padding: 0.65rem 0.75rem !important;
}

.telecon-app-shell .telecon-legacy-device-modal .telecon-legacy-archive table.dataTable thead th {
  position: static;
  padding: 0.65rem 0.75rem !important;
}

.telecon-app-shell .telecon-legacy-device-modal .telecon-legacy-archive table.dataTable th:last-child,
.telecon-app-shell .telecon-legacy-device-modal .telecon-legacy-archive table.dataTable td:last-child {
  position: static;
  min-width: 0 !important;
  box-shadow: none;
}

.telecon-app-shell .telecon-legacy-chart > .card-header {
  min-height: 3.5rem;
  padding: 0.75rem 1rem;
}

.telecon-app-shell .telecon-legacy-chart > .card-body {
  padding: 0.5rem 0.75rem 0.25rem;
}

.telecon-app-shell .telecon-icon-button {
  width: 2.25rem;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  color: var(--tw-muted);
  background: transparent;
  border: 1px solid var(--tw-border);
}

@media (max-width: 1199.98px) {
  .telecon-app-shell .telecon-legacy-device-meta,
  .telecon-app-shell .telecon-legacy-readings,
  .telecon-app-shell .telecon-legacy-archive,
  .telecon-app-shell .telecon-legacy-chart {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767.98px) {
  .telecon-app-shell .telecon-legacy-device-workspace {
    padding: 0.75rem;
    gap: 0.75rem;
  }

  .telecon-app-shell .telecon-legacy-device-meta,
  .telecon-app-shell .telecon-legacy-device-meta dl {
    grid-template-columns: 1fr;
  }

  .telecon-app-shell .telecon-legacy-device-meta dl > div {
    padding: 0.5rem 0 0;
    border-top: 1px solid var(--tw-divider);
    border-left: 0;
  }
}

@media (max-width: 991.98px) {
  .telecon-app-shell .telecon-table-workspace-modal > .telecon-workspace-dialog {
    width: calc(100vw - 1rem) !important;
    height: calc(100dvh - 1rem) !important;
    margin: 0.5rem auto !important;
  }

  .telecon-app-shell .telecon-table-workspace-modal .telecon-table-workspace > .card-body {
    grid-template-columns: 14rem minmax(0, 1fr);
  }
}

@media (max-width: 767.98px) {
  .telecon-app-shell .telecon-widget-card-summary {
    display: flex !important;
  }

  .telecon-app-shell .telecon-widget-card-summary > .card-footer {
    min-height: 3.35rem;
    padding: 0.75rem 1rem !important;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    border-top: 1px solid var(--tw-border) !important;
    border-right: 0 !important;
  }

  .telecon-app-shell .telecon-widget-card-chart .row-bordered {
    display: block;
  }

  .telecon-app-shell .telecon-widget-card-status-list .telecon-widget-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .telecon-app-shell .telecon-widget-card-status-list .telecon-widget-date {
    width: 100%;
  }

  .telecon-app-shell .telecon-table-workspace-modal .telecon-table-workspace > .card-body {
    display: flex !important;
    flex-direction: column;
  }

  .telecon-app-shell .telecon-table-workspace-modal .telecon-table-filter-rail {
    max-height: 42%;
    border-right: 0;
    border-bottom: 1px solid var(--tw-border);
  }
}

@media (min-width: 1200px) {
  html.layout-menu-fixed body.telecon-app-shell .layout-wrapper.layout-without-menu .layout-page,
  html.layout-menu-fixed-offcanvas body.telecon-app-shell .layout-wrapper.layout-without-menu .layout-page {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  html.layout-menu-fixed:not(.layout-menu-collapsed) body.telecon-app-shell .layout-page,
  html.layout-menu-fixed-offcanvas:not(.layout-menu-collapsed) body.telecon-app-shell .layout-page {
    padding-left: var(--tw-menu-width) !important;
  }

  html.layout-menu-fixed body.telecon-app-shell .layout-menu,
  html.layout-menu-fixed-offcanvas body.telecon-app-shell .layout-menu {
    width: var(--tw-menu-width);
  }

  html.layout-navbar-fixed:not(.layout-menu-collapsed) body.telecon-app-shell .layout-content-navbar:not(.layout-without-menu) .layout-navbar {
    left: var(--tw-menu-width) !important;
  }

  html.layout-footer-fixed:not(.layout-menu-collapsed) body.telecon-app-shell .layout-wrapper:not(.layout-without-menu) .content-footer {
    left: var(--tw-menu-width) !important;
  }

  html.layout-menu-fixed:not(.layout-menu-collapsed).layout-menu-flipped body.telecon-app-shell .layout-page,
  html.layout-menu-fixed-offcanvas:not(.layout-menu-collapsed).layout-menu-flipped body.telecon-app-shell .layout-page {
    padding-right: var(--tw-menu-width) !important;
    padding-left: 0 !important;
  }

  html.layout-navbar-fixed:not(.layout-menu-collapsed).layout-menu-flipped body.telecon-app-shell .layout-content-navbar:not(.layout-without-menu) .layout-navbar,
  html.layout-footer-fixed:not(.layout-menu-collapsed).layout-menu-flipped body.telecon-app-shell .layout-wrapper:not(.layout-without-menu) .content-footer {
    right: var(--tw-menu-width) !important;
    left: 0 !important;
  }
}

@media (max-width: 1199.98px) {
  .telecon-app-shell .layout-menu.menu-vertical {
    width: min(18rem, calc(100vw - 2rem));
  }
}

@media (max-width: 767.98px) {
  .telecon-app-shell .telecon-content {
    padding: 0.875rem 0.75rem 1.25rem !important;
  }

  .telecon-app-shell .telecon-page-title {
    margin-bottom: 0.75rem !important;
    font-size: 1.125rem;
  }

  .telecon-app-shell .card-header,
  .telecon-app-shell .card-body,
  .telecon-app-shell .card-footer {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
  }

  .telecon-app-shell .modal-dialog:not(.telecon-workspace-dialog) {
    margin: 0.5rem;
  }

  .telecon-app-shell .modal-body {
    padding: 1rem;
  }

  .telecon-app-shell .nav-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: thin;
  }

  .telecon-app-shell .nav-tabs .nav-link {
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .telecon-app-shell *,
  .telecon-app-shell *::before,
  .telecon-app-shell *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Device readings: preserve large meter values without splitting digits. */
.telecon-app-shell #deviceInfoModal #deviceInfoBlock .telecon-reading-primary > span:last-child {
  overflow-wrap: normal;
  word-break: normal;
  white-space: nowrap;
}

.telecon-app-shell #deviceInfoModal #deviceSatusString,
.telecon-app-shell #deviceInfoModal #deviceSatusString .badge {
  max-width: 100%;
}

.telecon-app-shell #deviceInfoModal #deviceSatusString .badge {
  line-height: 1.25;
  overflow-wrap: break-word;
  text-align: left;
  white-space: normal;
}

@container (min-width: 68.01rem) {
  .telecon-app-shell #deviceInfoModal #deviceInfoBlock .telecon-readings-grid {
    grid-template-columns:
      minmax(8.5rem, 1fr)
      minmax(5.25rem, 0.7fr)
      minmax(12rem, 1.6fr)
      minmax(7rem, 1fr)
      minmax(7rem, 1fr)
      minmax(11rem, 1.9fr)
      minmax(12rem, 2.1fr);
  }
}

.telecon-app-shell #deviceInfoModal .telecon-volume-chart-title {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.telecon-app-shell #deviceInfoModal #volumeChartUnit {
  width: auto;
  min-width: 6.25rem;
  height: 1.75rem;
  min-height: 1.75rem;
  padding: 0.15rem 1.75rem 0.15rem 0.45rem;
  color: var(--tw-heading);
  background-color: var(--tw-control-bg);
  border-color: var(--tw-control-border);
  border-radius: var(--tw-radius-sm);
  box-shadow: none;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.25;
}

.telecon-app-shell #deviceInfoModal #volumeChartUnit:focus {
  border-color: var(--tw-brand);
  box-shadow: 0 0 0 0.15rem var(--tw-focus);
}