/*
  ADMIN LAYOUT STABILITY
  This file loads last on purpose. It owns only the shared shell and common
  components, leaving department-specific layout and functionality untouched.
*/

:root {
  --ec-admin-radius-sm: 10px;
  --ec-admin-radius-md: 14px;
  --ec-admin-radius-lg: 18px;
  --ec-admin-layer-chat: 45000;
  --ec-admin-layer-modal: 1000000;
}

/* One scroll owner: dashboard content. This prevents blank or trapped pages. */
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden !important;
}

#dashboard-shell,
#dashboard-shell .app-shell,
#dashboard-shell .main-content {
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

#dashboard-shell .main-content {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

#dashboard-shell .content-area {
  display: block !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 14px 18px 16px !important;
}

/* A single shared app footer remains visible and is never displaced by a
   dynamically-created view. Every page lives inside .content-area above it. */
#main-content > .footer {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px !important;
  padding: 8px 18px !important;
  border-top: 1px solid var(--border) !important;
  border-radius: 0 !important;
  background: var(--surface) !important;
  color: var(--muted) !important;
  font-size: 11px;
  font-weight: 800;
}

#dashboard-shell .view-section {
  width: 100%;
  max-width: 1440px;
  min-height: max-content;
  margin: 0 auto;
}

/* Leave safe space for the floating chat button before the footer, not after it. */
#dashboard-shell .view-section:not(.hidden) {
  padding-bottom: 96px;
}

/* Restore a visual hierarchy after the old universal 4px-radius override. */
#dashboard-shell .topbar,
#dashboard-shell .toolbar2,
#dashboard-shell .panel,
#dashboard-shell .event-list-card,
#dashboard-shell .event-table-card,
#dashboard-shell .event-detail-card,
#dashboard-shell .admin-pro-panel,
#dashboard-shell .admin-table-card,
#dashboard-shell .admin-sidecard,
#dashboard-shell .fin-panel,
#dashboard-shell .qa-card,
#dashboard-shell .cs-panel,
#dashboard-shell .prd-panel,
#dashboard-shell .cc-operations-bar,
#dashboard-shell .cc-table-wrap,
#dashboard-shell .cc-card,
#dashboard-shell .cc-import-zone {
  border-radius: var(--ec-admin-radius-lg) !important;
}

#dashboard-shell .btn,
#dashboard-shell .icon-btn,
#dashboard-shell input,
#dashboard-shell select,
#dashboard-shell textarea,
#dashboard-shell .search2,
#dashboard-shell .topbar-chip,
#dashboard-shell .profile-chip {
  border-radius: var(--ec-admin-radius-sm) !important;
}

#dashboard-shell .nav-item,
#dashboard-shell .ecw-workflow-row,
#dashboard-shell .ecw-panel-kpis > div,
#dashboard-shell .ecw-empty {
  border-radius: var(--ec-admin-radius-md) !important;
}

#dashboard-shell .nav-badge,
#dashboard-shell .cc-chip,
#dashboard-shell .event-pill,
#dashboard-shell .event-slim-pill,
#dashboard-shell .mk-chip,
#dashboard-shell .ecw-stage {
  border-radius: 999px !important;
}

/* Tables are allowed to scroll horizontally in their own wrapper only. */
#dashboard-shell .table-wrap,
#dashboard-shell .event-table-wrap,
#dashboard-shell .admin-table-wrap,
#dashboard-shell .cc-table-wrap,
#dashboard-shell [class*="table-wrap"] {
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
}

#dashboard-shell table {
  max-width: none;
}

/* Tables produced directly by older modules get their own scroll surface,
   instead of widening the entire admin page. */
#dashboard-shell .ec-auto-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--border);
  border-radius: var(--ec-admin-radius-md);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}

#dashboard-shell .ec-auto-table-scroll > table {
  width: max-content;
  min-width: min(760px, 100%);
}

/* Marketing is a compact work queue, not a wall of oversized cards. */
#marketing-view .mkt-page,
#marketing-view .mkt-card {
  min-width: 0;
}

#marketing-view .mkt-kpi-card {
  min-height: 92px !important;
  padding: 14px !important;
}

#marketing-view .mkt-kpi-card strong {
  font-size: 26px !important;
}

#marketing-view .mkt-tabs {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--border);
}

#marketing-view .mkt-approval-list {
  max-height: 420px;
  overflow: auto;
  padding: 8px 12px !important;
  background: var(--surface-2);
  scrollbar-gutter: stable;
}

#marketing-view .mk-item-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  margin: 8px 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--ec-admin-radius-md);
  background: var(--surface);
}

#marketing-view .mk-item-top,
#marketing-view .mk-item-main {
  min-width: 0;
}

#marketing-view .mk-item-title,
#marketing-view .mk-item-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#marketing-view .mk-item-title {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

#marketing-view .mk-item-sub {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

#marketing-view .mk-item-actions {
  grid-column: 2;
  grid-row: 1;
}

#marketing-view .mkt-scroll-list {
  max-height: 300px;
  overflow: auto;
  scrollbar-gutter: stable;
}

/* Clear, restrained status colours shared across operational lists. */
#dashboard-shell .admin-badge,
#dashboard-shell .ec-report-status,
#dashboard-shell .event-pill,
#dashboard-shell .event-slim-pill {
  font-weight: 900;
}

#dashboard-shell .ec-report-status.ok,
#dashboard-shell .event-pill.approved,
#dashboard-shell .event-slim-pill.approved {
  color: #166534;
  background: #dcfce7;
  border-color: #bbf7d0;
}

#dashboard-shell .ec-report-status.wait,
#dashboard-shell .event-pill.pending,
#dashboard-shell .event-slim-pill.pending {
  color: #9a6700;
  background: #fff7d6;
  border-color: #fde68a;
}

#dashboard-shell .ec-report-status.danger,
#dashboard-shell .event-pill.rejected,
#dashboard-shell .event-slim-pill.rejected {
  color: #b42318;
  background: #fee4e2;
  border-color: #fecdca;
}

#notif-btn .ec-notification-badge:not(.hidden) {
  animation: ec-notification-pulse 2s ease-in-out infinite;
}

@keyframes ec-notification-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .35); }
  50% { box-shadow: 0 0 0 5px rgba(239, 68, 68, 0); }
}

@media (prefers-reduced-motion: reduce) {
  #notif-btn .ec-notification-badge:not(.hidden) { animation: none; }
}

/* Do not crop data merely because labels or live numbers grow. */
#dashboard-shell .row-chart-map > .panel,
#dashboard-shell .chart-stage,
#dashboard-shell .chart-stage-compact,
#dashboard-shell .chart-stage-advanced,
#dashboard-shell .fin-small-card,
#dashboard-shell .fin-compact-card {
  max-height: none !important;
}

#dashboard-shell .fin-small-card,
#dashboard-shell .fin-compact-card {
  min-height: 0 !important;
  overflow: visible !important;
}

/* One bounded Team Chat presentation. It never sits above a modal. */
html body button#company-chat-float.company-chat-float {
  position: fixed !important;
  right: 20px !important;
  bottom: 20px !important;
  left: auto !important;
  top: auto !important;
  z-index: var(--ec-admin-layer-chat) !important;
  width: auto !important;
  min-width: 144px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
}

html body #company-chat-panel {
  position: fixed !important;
  right: 20px !important;
  bottom: 80px !important;
  left: auto !important;
  top: auto !important;
  z-index: calc(var(--ec-admin-layer-chat) + 1) !important;
  width: min(400px, calc(100vw - 40px)) !important;
  height: min(560px, calc(100vh - 110px)) !important;
  max-height: calc(100vh - 110px) !important;
  border-radius: var(--ec-admin-radius-lg) !important;
}

#company-chat-panel.hidden {
  display: none !important;
}

.ecw-modal-root,
.cc-modal,
.ec-notification-centre {
  z-index: var(--ec-admin-layer-modal) !important;
}

/* Preserve dark mode despite historical forced-white component rules. */
html.dark #dashboard-shell,
html.dark #dashboard-shell .main-content,
html.dark #dashboard-shell .content-area {
  background: var(--app-bg) !important;
  color: var(--text) !important;
}

html.dark #main-content > .footer {
  background: var(--surface) !important;
  color: var(--muted) !important;
}

html.dark #dashboard-shell .topbar,
html.dark #dashboard-shell .toolbar2,
html.dark #dashboard-shell .panel,
html.dark #dashboard-shell .event-list-card,
html.dark #dashboard-shell .event-table-card,
html.dark #dashboard-shell .event-detail-card,
html.dark #dashboard-shell .admin-pro-panel,
html.dark #dashboard-shell .admin-table-card,
html.dark #dashboard-shell .admin-sidecard,
html.dark #dashboard-shell .fin-panel,
html.dark #dashboard-shell .qa-card,
html.dark #dashboard-shell .cs-panel,
html.dark #dashboard-shell .prd-panel,
html.dark #dashboard-shell .cc-operations-bar,
html.dark #dashboard-shell .cc-table-wrap,
html.dark #dashboard-shell .cc-card,
html.dark #dashboard-shell .cc-import-zone,
html.dark #company-chat-panel {
  background: var(--surface) !important;
  color: var(--text) !important;
}

html.dark #dashboard-shell input,
html.dark #dashboard-shell select,
html.dark #dashboard-shell textarea,
html.dark #dashboard-shell table tbody td {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}

/* Local responsive behaviour: toolbars stay usable; only content stacks. */
@media (max-width: 900px) {
  html,
  body {
    overflow: hidden !important;
  }

  #dashboard-shell .content-area {
    padding: 12px !important;
  }

  #main-content > .footer {
    padding: 8px 12px !important;
  }

  #dashboard-shell .topbar,
  #dashboard-shell .toolbar2 {
    width: calc(100% - 24px) !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
  }

  #dashboard-shell .view-section:not(.hidden) {
    padding-bottom: 76px;
  }

  #dashboard-shell .topbar .btn,
  #dashboard-shell .topbar button,
  #dashboard-shell .toolbar2 .btn,
  #dashboard-shell .toolbar2 button,
  #dashboard-shell .cc-toolbar .btn,
  #dashboard-shell .cc-toolbar button {
    width: auto !important;
  }

  #dashboard-shell .topbar-right,
  #dashboard-shell .toolbar2-left,
  #dashboard-shell .toolbar2-right {
    min-width: 0;
  }
}

@media (max-width: 700px) {
  #marketing-view .mk-item-card {
    grid-template-columns: minmax(0, 1fr);
  }

  #marketing-view .mk-item-actions {
    grid-column: auto;
    grid-row: auto;
  }

  #dashboard-shell .topbar,
  #dashboard-shell .toolbar2 {
    margin-top: 8px !important;
  }

  #dashboard-shell .topbar-right,
  #dashboard-shell .toolbar2-left,
  #dashboard-shell .toolbar2-right {
    width: 100%;
    flex-wrap: wrap;
  }

  #main-content > .footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
    min-height: 46px !important;
  }

  html body button#company-chat-float.company-chat-float {
    right: 12px !important;
    bottom: 12px !important;
    min-width: 0 !important;
    height: 46px !important;
    min-height: 46px !important;
  }

  html body #company-chat-panel {
    right: 10px !important;
    bottom: 70px !important;
    left: 10px !important;
    width: auto !important;
    height: min(72vh, 560px) !important;
    max-height: calc(100vh - 86px) !important;
  }
}

/* Shared shell: bars must grow with their controls, never shrink over content. */
#dashboard-shell .topbar,
#dashboard-shell .toolbar2 {
  flex: 0 0 auto !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
#dashboard-shell .topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px !important;
  padding: 10px 12px !important;
}
#dashboard-shell .topbar-left { flex: 1 1 180px; min-width: 0; }
#dashboard-shell .topbar-right {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  flex-wrap: wrap;
}
#dashboard-shell .page-title { font-size: 18px !important; line-height: 1.25; }
#dashboard-shell .breadcrumbs { line-height: 1.4; }
#dashboard-shell .profile-chip { min-width: 0; max-width: 200px; }
#dashboard-shell #profile-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dashboard-shell #profile-avatar { flex: 0 0 28px; border-radius: 50% !important; }
#dashboard-shell .topbar-chip { min-width: 0; height: 40px; }
#dashboard-shell .topbar-chip select { min-width: 0; max-width: 100%; }
#dashboard-shell .topbar-actions { flex-wrap: nowrap !important; }
#dashboard-shell #mobile-menu-btn { display: none !important; }
#dashboard-shell .topbar-actions .icon-btn,
#dashboard-shell #mobile-menu-btn,
#dashboard-shell #admin-back-btn {
  flex: 0 0 40px; width: 40px !important; height: 40px !important;
  min-width: 40px; padding: 8px !important;
}
#dashboard-shell .toolbar2-left {
  display: grid !important;
  grid-template-columns: minmax(180px, 1fr) minmax(260px, 1fr);
  width: 100%; min-width: 0; overflow: visible !important;
  gap: 10px !important;
}
#dashboard-shell .search2 { width: 100%; min-width: 0; max-width: none; height: 42px; }
#dashboard-shell .search2 input { min-width: 0; width: 100%; font-size: 14px !important; }
#dashboard-shell .filters2 {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0; width: 100%; gap: 8px;
}
#dashboard-shell .filters2 select { min-width: 0; width: 100%; height: 42px !important; }
#dashboard-shell .kpi-strip {
  display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-column: 1 / -1; width: 100%; min-width: 0;
}
#dashboard-shell .kpi-mini { min-width: 0; width: auto; }
#dashboard-shell .kpi-mini-label { font-size: 12px !important; }
#ec-admin-filters-toggle { display: none !important; }
/* Role-based hiding is authoritative, even when responsive layout changes. */
#dashboard-shell .toolbar2[aria-hidden="true"],
#dashboard-shell .topbar-chip[aria-hidden="true"],
body.ec-staff-mode #dashboard-shell .toolbar2,
body.ec-staff-mode #dashboard-shell .topbar-chip { display: none !important; }

/* Consistent, legible controls without changing any department's workflow. */
#dashboard-shell :is(.btn, .button, select, textarea),
#dashboard-shell input:not([type="checkbox"]):not([type="radio"]) {
  font-size: 13px !important; line-height: 1.45; font-weight: 600 !important;
}
#dashboard-shell :is(h1, h2, h3, .nav-text, .profile-chip, .panel-h) { font-weight: 700 !important; }
#dashboard-shell :is(.panel-sub, .ec-data-state, .admin-pro-hero p) { font-weight: 500 !important; }
#dashboard-shell :is(.admin-pro-hero, .admin-pro-kpis > div, .fin-small-card, .fin-compact-card, .mkt-kpi-card) {
  border-radius: var(--ec-admin-radius-md) !important;
}
#dashboard-shell .ec-tour-hub { border-radius: var(--ec-admin-radius-lg) !important; }
#dashboard-shell #programs-view .prd-amenities-grid label {
  white-space: normal !important; overflow-wrap: anywhere;
  height: auto !important; min-height: 48px; line-height: 1.4;
  font-size: 12px !important; font-weight: 500 !important; min-width: 0;
}
#dashboard-shell #programs-view .prd-amenities-grid input { flex-shrink: 0; }
#dashboard-shell .search2 input { border: 0 !important; background: transparent !important; box-shadow: none !important; padding-left: 0; }
#dashboard-shell .search2 #clear-search { flex: 0 0 32px; width: 32px !important; border: 0 !important; background: transparent !important; }
#ec-admin-menu-close { display: none !important; }
body.ec-menu-open #company-chat-float,
body.ec-menu-open #company-chat-panel { visibility: hidden !important; }
html:not([data-ec-authenticated="true"]) body button#company-chat-float.company-chat-float,
html:not([data-ec-authenticated="true"]) body #company-chat-panel { display: none !important; }

/* Grid children need an explicit zero minimum; long form controls otherwise
   force a wider column even when the page itself reports no overflow. */
#marketing-view :is(.mkt-main, .mkt-side, .mkt-form, .mkt-grid),
#supportTickets-view :is(.cs-pro-page, .cs-panel, .cs-support-grid, .cs-chat-layout,
  .cs-chat-window, .cs-chat-compose, .cs-chat-user, .cs-form) { min-width: 0 !important; max-width: 100%; }
#marketing-view :is(input, textarea, select),
#supportTickets-view :is(input, textarea, select) { min-width: 0 !important; max-width: 100%; }
#supportTickets-view .cs-pro-page,
#supportTickets-view .cs-form { grid-template-columns: minmax(0, 1fr) !important; }
#supportTickets-view .cs-chat-compose input { width: 0; min-width: 0; flex: 1 1 0; }
#supportTickets-view #cs-send-chat-reply { flex: 0 0 44px; width: 44px !important; min-width: 44px; }
#supportTickets-view :is(.cs-top-actions, .cs-panel-head, .cs-filters) { flex-wrap: wrap; }
#supportTickets-view .cs-filters { width: 100%; }
#supportTickets-view .cs-filters select { flex: 1 1 130px; width: auto; }
@media (max-width: 1100px) {
  #supportTickets-view .cs-support-grid { grid-template-columns: minmax(0, 1fr) !important; }
  #supportTickets-view .cs-table-panel { grid-column: 1 !important; }
}
@media (max-width: 700px) {
  #marketing-view .mkt-grid,
  #supportTickets-view .cs-chat-layout { grid-template-columns: minmax(0, 1fr) !important; }
  #supportTickets-view .cs-chat-list { max-height: 240px; }
  #supportTickets-view .cs-top-actions .btn { flex: 1 1 120px; width: auto !important; }
  #marketing-view .mkt-tabs .btn { width: auto !important; flex: 1 1 90px; }
}
#dashboard-shell :is(.panel-sub, .muted, .fin-small-card p, .fin-compact-card p,
  .fin-panel small, .fin-panel label, .fin-small-head, .fin-mini-label,
  .fin-kpi-label, .fin-stat-label, .mk-item-sub, .admin-pro-kicker,
  .ec-eyebrow, .ec-data-state, .nav-section-label) { font-size: 12px !important; }
#dashboard-shell :is(.fin-panel, .fin-small-card, .fin-compact-card) :is(td, th) {
  font-size: 12px !important; line-height: 1.5;
}
#dashboard-shell #finance-view :is(td, th, .muted, .fin-panel-sub, .btn,
  .fin-stat-card > span, .fin-expense-mini-card > span, .fin-sheet-target > *,
  .fin-sync-grid span, .fin-sync-grid strong) {
  font-size: 12px !important; line-height: 1.5; overflow-wrap: anywhere;
}
#dashboard-shell #finance-view :is(.fin-card-grid, .fin-work-grid, .fin-small-card, .fin-panel,
  .fin-sync-grid > div, .fin-stat-card) { min-width: 0; }
#dashboard-shell #finance-view .fin-tab-row { flex-wrap: wrap; }
#dashboard-shell .nav-item.active :is(.material-icons-outlined, .material-icons) {
  color: #fff !important;
}
#dashboard-shell .ec-data-state {
  color: #526173 !important; background: #f1f5f9 !important;
  border-color: #dbe3ed !important; line-height: 1.45;
}
#dashboard-shell .ec-data-state i { background: #64748b !important; box-shadow: none !important; }
#dashboard-shell .ec-data-state[data-network="offline"] { color: #854d0e !important; background: #fef9c3 !important; }
#dashboard-shell .ec-tour-tools button {
  display: grid !important; grid-template-columns: 24px minmax(0, 1fr);
  grid-template-rows: auto auto; align-items: center; column-gap: 9px;
  row-gap: 3px; text-align: left; min-height: 64px; padding: 10px 12px;
}
#dashboard-shell .ec-tour-tools button > .material-icons-outlined { grid-row: 1 / 3; }
#dashboard-shell .ec-tour-tools button > b { grid-column: 2; font-size: 13px; line-height: 1.3; }
#dashboard-shell .ec-tour-tools button > small { grid-column: 2; display: block; font-size: 12px !important; line-height: 1.4; }
#dashboard-shell .admin-pro-hero { gap: 16px; flex-wrap: wrap; }
#dashboard-shell .admin-pro-hero > div { min-width: 0; }
#dashboard-shell .admin-pro-actions { display: flex; flex-wrap: wrap; gap: 8px; max-width: 100%; }
#dashboard-shell .admin-pro-actions .btn { flex: 0 1 auto; max-width: 100%; white-space: normal; }
#dashboard-shell :is(button, a, input, select, textarea):focus-visible,
#login-screen :is(button, a, input):focus-visible {
  outline: 3px solid #b8430e !important; outline-offset: 3px;
}

/* Login has content-sized rows, including on short laptops and at 200% zoom. */
#login-screen { overflow-y: auto !important; overflow-x: hidden !important; height: 100dvh !important; }
#login-screen .ec-login-shell { height: auto !important; min-height: 100dvh; overflow: visible !important; }
#login-screen .ec-login-panel { min-height: 0 !important; }
#login-screen .ec-login-card { flex-shrink: 0; border-radius: 18px !important; }
#login-screen :is(.ec-login-input-wrap, .ec-login-submit) { border-radius: 10px !important; }
#login-screen .ec-login-help, #login-screen .ec-login-field label { font-size: 13px; }
#login-screen :is(h1, h2, button) { font-weight: 700 !important; }
#login-screen :is(p, label, input) { font-weight: 500 !important; }
@media (max-width: 1100px) {
  #login-screen .ec-login-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
  #login-screen .ec-login-visual { min-height: 0; padding: 28px; }
  #login-screen .ec-login-brand h1 { font-size: clamp(28px, 5vw, 42px); }
  #login-screen .ec-login-brand p { margin-top: 12px; font-size: 14px; }
  #login-screen .ec-login-logo { margin-bottom: 14px; }
  #login-screen .ec-login-panel { padding: 24px; align-items: flex-start; }
}
@media (max-width: 900px) {
  #dashboard-shell .app-shell { grid-template-columns: minmax(0, 1fr) !important; }
  #dashboard-shell .topbar {
    display: grid !important; grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px !important;
  }
  #dashboard-shell .topbar-left { grid-column: 1; grid-row: 1; gap: 6px; }
  #dashboard-shell .topbar-right { display: contents; }
  #dashboard-shell .profile-chip { grid-column: 2; grid-row: 1; max-width: 160px; }
  #dashboard-shell .topbar-chip { grid-column: 1; grid-row: 2; justify-self: start; }
  #dashboard-shell .topbar-actions { grid-column: 2; grid-row: 2; justify-self: end; }
  #dashboard-shell .topbar-title { overflow: hidden; }
  #dashboard-shell .page-title { font-size: 16px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #dashboard-shell .breadcrumbs { display: none; }
  #dashboard-shell #mobile-menu-btn { display: inline-flex !important; }
  #dashboard-shell .toolbar2-left { grid-template-columns: minmax(0, 1fr) auto; }
  #ec-admin-filters-toggle { display: inline-flex !important; align-items: center; gap: 6px; min-height: 42px; }
  #dashboard-shell .toolbar2.ec-filters-ready .filters2,
  #dashboard-shell .toolbar2.ec-filters-ready .kpi-strip { grid-column: 1 / -1; }
  #dashboard-shell .toolbar2.ec-filters-ready:not(.ec-filters-open) .filters2,
  #dashboard-shell .toolbar2.ec-filters-ready:not(.ec-filters-open) .kpi-strip { display: none !important; }
  #dashboard-shell .toolbar2:not(.ec-filters-ready) .filters2 { grid-column: 1 / -1; }
  #dashboard-shell .admin-pro-hero { flex-direction: column; align-items: stretch; }
  #dashboard-shell .admin-pro-actions { width: 100%; }
  #sidebar {
    position: fixed !important; inset: 0 auto 0 0 !important;
    width: min(280px, calc(100vw - 48px)) !important; height: 100dvh !important;
    z-index: 60000 !important; transform: translateX(-110%) !important;
    visibility: hidden; transition: transform .18s ease;
  }
  #sidebar.open { transform: translateX(0) !important; visibility: visible; }
  #sidebar-overlay { z-index: 59999 !important; }
  #sidebar-overlay.open { display: block !important; pointer-events: auto; }
  #ec-admin-menu-close { display: flex !important; margin: 12px; flex: 0 0 42px; }
  #sidebar-nav { padding-top: 8px !important; }
  #main-content > .footer { padding-right: 80px !important; font-size: 11px; }
}
@media (max-width: 480px) {
  html body button#company-chat-float.company-chat-float { width: 48px !important; min-width: 48px !important; padding: 0 !important; border-radius: 50% !important; }
  html body button#company-chat-float.company-chat-float > span:not(.material-icons-outlined):not(.company-chat-badge) { display: none !important; }
  #dashboard-shell .profile-chip { max-width: 116px; padding: 4px 6px; gap: 6px; }
  #dashboard-shell #profile-name { font-size: 12px; }
  #dashboard-shell .topbar-actions .icon-btn,
  #dashboard-shell #mobile-menu-btn { flex-basis: 40px; }
  #dashboard-shell .filters2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #dashboard-shell #global-sort { grid-column: 1 / -1; }
  #dashboard-shell .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #dashboard-shell .admin-pro-actions .btn { flex-grow: 1; }
  #login-screen .ec-login-panel { padding: 16px; }
  #login-screen .ec-login-card { padding: 22px !important; }
}
@media (max-height: 600px) and (max-width: 900px) {
  /* Let the entire main column scroll on landscape phones / enlarged text. */
  #dashboard-shell .main-content { overflow-y: auto !important; }
  #dashboard-shell .content-area { overflow: visible !important; flex: 1 0 auto !important; }
}
@media (prefers-reduced-motion: reduce) {
  #sidebar, #dashboard-shell .btn, #dashboard-shell .nav-item { transition: none !important; }
}