/* Meraki v3.1.2 — correção estrutural final da interface clínica */
:root {
  --v312-sidebar: 286px;
  --v312-topbar: 76px;
  --v312-bg: #f1f5f8;
  --v312-surface: #ffffff;
  --v312-line: #dce4ec;
  --v312-line-soft: #e9eef3;
  --v312-text: #172033;
  --v312-muted: #667085;
  --v312-blue: #078bff;
  --v312-active: #eef2f5;
  --v312-shadow: 0 8px 24px rgba(31, 50, 73, .06);
}

html, body { width: 100%; min-width: 0; }
body.app-active { overflow: hidden !important; background: var(--v312-bg) !important; }

/* Recomeça o shell sem herdar proporções antigas. */
#app.app-shell {
  --summary-sidebar: var(--v312-sidebar);
  display: grid !important;
  grid-template-columns: var(--v312-sidebar) minmax(0, 1fr) !important;
  grid-template-rows: var(--v312-topbar) minmax(0, 1fr) !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-width: 0 !important;
  min-height: 0 !important;
  background: var(--v312-bg) !important;
}

/* MENU */
#app #sidebar {
  grid-column: 1 !important;
  grid-row: 1 / -1 !important;
  position: relative !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: 84px minmax(0, 1fr) auto !important;
  padding: 0 12px 12px !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 0 !important;
  border-right: 1px solid var(--v312-line) !important;
  box-shadow: none !important;
  z-index: 60 !important;
}

#app .sidebar-brand-search {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  height: 84px !important;
  min-width: 0 !important;
  padding: 10px 4px !important;
}

#app .sidebar-logo-button {
  width: 54px !important;
  height: 54px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
}

/* Corrige definitivamente logo + fallback exibidos ao mesmo tempo. */
#app .sidebar-logo-button .hidden,
#app .sidebar-logo-button [data-visible="0"] { display: none !important; }
#app .sidebar-logo-button img[data-visible="1"] { display: block !important; }
#app .sidebar-logo-button span[data-visible="1"] { display: grid !important; }
#app .topbar-logo {
  width: 52px !important;
  height: 52px !important;
  max-width: 52px !important;
  max-height: 52px !important;
  object-fit: contain !important;
  object-position: center !important;
}
#app .topbar-brand-fallback {
  width: 48px !important;
  height: 48px !important;
  place-items: center !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, #078bff, #65baff) !important;
  color: #fff !important;
  font-size: 19px !important;
  font-weight: 850 !important;
}

#app .sidebar-search {
  position: relative !important;
  width: 100% !important;
  height: 48px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--v312-line) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: 0 3px 10px rgba(31,50,73,.06) !important;
}
#app .sidebar-search input {
  width: 100% !important;
  height: 46px !important;
  min-width: 0 !important;
  padding: 0 38px 0 13px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 13px !important;
}
#app .sidebar-search-icon {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #172033 !important;
  font-size: 21px !important;
  pointer-events: none !important;
}
#app .sidebar-search .global-search-results {
  top: 53px !important;
  left: 0 !important;
  right: auto !important;
  width: min(390px, calc(100vw - 24px)) !important;
  max-height: min(430px, 70vh) !important;
}

/* Botão de recolher não rouba espaço do campo de busca. */
#app .sidebar-toggle {
  position: absolute !important;
  right: -15px !important;
  top: 25px !important;
  width: 30px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid var(--v312-line) !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: #667085 !important;
  box-shadow: 0 3px 9px rgba(31,50,73,.08) !important;
  z-index: 3 !important;
}

#app #nav.nav-summary {
  display: grid !important;
  grid-auto-rows: max-content !important;
  align-content: start !important;
  gap: 5px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 8px 0 14px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: #cbd5e1 transparent !important;
}
#app #nav.nav-summary > button {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 9px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 50px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--v312-text) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-align: left !important;
}
#app #nav.nav-summary > button > span:first-child {
  width: 42px !important;
  min-width: 42px !important;
  display: grid !important;
  place-items: center !important;
  color: #475467 !important;
  font-size: 17px !important;
  line-height: 1 !important;
}
#app #nav.nav-summary .nav-label {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
#app #nav.nav-summary > button:hover { background: #f6f8fa !important; }
#app #nav.nav-summary > button.active {
  position: relative !important;
  background: var(--v312-active) !important;
  color: #111827 !important;
  font-weight: 700 !important;
}
#app #nav.nav-summary > button.active::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 999px;
  background: #9a7b65;
}
#app #nav.nav-summary > button.active > span:first-child { color: var(--v312-blue) !important; }

#app #sidebar .sidebar-footer {
  display: grid !important;
  gap: 7px !important;
  min-width: 0 !important;
  padding: 10px 1px 0 !important;
  border-top: 1px solid var(--v312-line-soft) !important;
  background: #fff !important;
}
#app #sidebar .sidebar-user-card {
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
  padding: 7px 8px !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
}
#app #sidebar .sidebar-user-avatar {
  width: 36px !important;
  height: 36px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: var(--v312-blue) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}
#app #sidebar .sidebar-user-details { min-width: 0 !important; }
#app #sidebar .sidebar-user-card b,
#app #sidebar .sidebar-user-card small {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
#app #sidebar .sidebar-user-card b { color: #1f2937 !important; font-size: 10px !important; }
#app #sidebar .sidebar-user-card small { margin-top: 2px !important; color: #758195 !important; font-size: 8px !important; }
#app #sidebar .sidebar-footer-actions {
  display: grid !important;
  grid-template-columns: auto minmax(0,1fr) !important;
  align-items: center !important;
  gap: 7px !important;
}
#app #sidebar .version-chip { min-height: 27px !important; font-size: 8px !important; }
#app #sidebar .logout-button { min-height: 34px !important; border-radius: 9px !important; }

/* TOPBAR */
#app .workspace-topbar {
  grid-column: 2 !important;
  grid-row: 1 !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  width: auto !important;
  height: var(--v312-topbar) !important;
  min-width: 0 !important;
  padding: 10px 24px !important;
  background: #fff !important;
  border: 0 !important;
  border-bottom: 1px solid var(--v312-line) !important;
  box-shadow: none !important;
  z-index: 40 !important;
}
#app .topbar-mobile-actions { display: none !important; }
#app .workspace-context { display: flex !important; align-items: center !important; gap: 7px !important; min-width: 0 !important; }
#app .clinic-selector {
  max-width: 270px !important;
  min-height: 46px !important;
  padding: 0 14px !important;
  border: 1px solid var(--v312-line) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #111827 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
#app .topbar-icon-button {
  width: 46px !important;
  height: 46px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid var(--v312-line) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #172033 !important;
  font-size: 18px !important;
}
#app .profile-avatar {
  width: 46px !important;
  height: 46px !important;
  display: grid !important;
  place-items: center !important;
  border: 3px solid #e8efff !important;
  border-radius: 50% !important;
  background: #5121b8 !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* MAIN */
#app main {
  grid-column: 2 !important;
  grid-row: 2 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 28px clamp(20px, 2.2vw, 34px) 42px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: var(--v312-bg) !important;
}
#app .page-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin: 0 0 20px !important;
}
#app .page-heading h1 { margin: 0 !important; color: #111827 !important; font-size: clamp(28px, 2.2vw, 36px) !important; line-height: 1.1 !important; }
#app .page-heading p { margin: 6px 0 0 !important; color: #667085 !important; font-size: 12px !important; }
#app .page-actions { display: flex !important; align-items: center !important; gap: 8px !important; flex: 0 0 auto !important; }
#app .page-actions button { min-height: 43px !important; padding-inline: 14px !important; border-radius: 10px !important; white-space: nowrap !important; }

/* ATENDIMENTO — medidas controladas */
#app .clinical-workspace-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 390px) !important;
  gap: 18px !important;
  width: 100% !important;
  min-width: 0 !important;
  align-items: start !important;
}
#app .clinical-workspace-grid > * { min-width: 0 !important; }
#app .service-list-panel,
#app .service-overview,
#app .unfinished-panel,
#app .module-hub-card {
  border: 1px solid var(--v312-line) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: var(--v312-shadow) !important;
}
#app .service-list-panel {
  display: grid !important;
  grid-template-rows: auto minmax(300px, 1fr) auto !important;
  min-height: min(660px, calc(100dvh - 178px)) !important;
  padding: 0 !important;
  overflow: hidden !important;
}
#app .service-list-panel > .toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  min-height: 104px !important;
  padding: 20px 22px !important;
  border-bottom: 1px solid var(--v312-line-soft) !important;
  background: #fff !important;
}
#app .service-list-panel > .toolbar h2 { margin: 0 0 7px !important; color: #172033 !important; font-size: 22px !important; }
#app .service-list-panel > .toolbar p { margin: 0 !important; }
#app .segmented-control { display: inline-flex !important; flex: 0 0 auto !important; }
#app .segmented-control button,
#app .service-period-tabs button {
  min-height: 42px !important;
  padding: 0 16px !important;
  border: 1px solid var(--v312-line) !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: #475467 !important;
  font-size: 12px !important;
}
#app .segmented-control button:first-child,
#app .service-period-tabs button:first-child { border-radius: 9px 0 0 9px !important; }
#app .segmented-control button:last-child,
#app .service-period-tabs button:last-child { border-radius: 0 9px 9px 0 !important; }
#app .segmented-control button.active,
#app .service-period-tabs button.active { position: relative !important; z-index: 1 !important; border-color: var(--v312-blue) !important; color: #174f7c !important; background: #f6fbff !important; }
#app .service-appointment-list { min-height: 0 !important; overflow-y: auto !important; }
#app .service-empty { min-height: 300px !important; display: grid !important; place-items: center !important; padding: 30px !important; color: #667085 !important; }
#app .service-appointment-row {
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) 44px !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 98px !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--v312-line-soft) !important;
}
#app .service-panel-footer { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 9px !important; padding: 14px 18px !important; border-top: 1px solid var(--v312-line-soft) !important; background: #fff !important; }

#app .clinical-side-column { display: grid !important; gap: 16px !important; min-width: 0 !important; }
#app .service-overview { padding: 20px !important; min-width: 0 !important; }
#app .service-overview > .toolbar { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; min-height: 48px !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; }
#app .service-overview h2 { margin: 0 !important; color: #172033 !important; font-size: 21px !important; }
#app .service-period-tabs { display: inline-flex !important; margin-top: 18px !important; }
#app .service-stats { display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)) !important; margin-top: 26px !important; min-width: 0 !important; }
#app .service-stats > div { min-width: 0 !important; display: grid !important; justify-items: center !important; gap: 7px !important; padding: 7px 5px !important; border-left: 1px solid var(--v312-line-soft) !important; }
#app .service-stats > div:first-child { border-left: 0 !important; }
#app .service-stats b { color: #334155 !important; font-size: 27px !important; font-weight: 500 !important; }
#app .service-stats span { max-width: 100% !important; color: #667085 !important; font-size: 9px !important; text-align: center !important; white-space: normal !important; }

#app .unfinished-panel { padding: 0 !important; overflow: hidden !important; }
#app .unfinished-panel > button { width: 100% !important; min-height: 64px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; padding: 0 17px !important; border: 0 !important; background: #fff !important; color: #344054 !important; font-size: 12px !important; font-weight: 750 !important; text-align: left !important; }
#app .unfinished-panel i { display: inline-grid !important; place-items: center !important; width: 24px !important; height: 24px !important; margin-right: 7px !important; border-radius: 50% !important; background: #ff8900 !important; color: #fff !important; font-style: normal !important; }

/* Os atalhos laterais deixam de quebrar em colunas estreitas. */
#app .module-hub-mini-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
#app .module-hub-mini-grid .module-hub-card {
  min-height: 78px !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0,1fr) 16px !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  text-align: left !important;
}
#app .module-hub-mini-grid .module-hub-icon { width: 42px !important; height: 42px !important; border-radius: 10px !important; font-size: 17px !important; }
#app .module-hub-mini-grid .module-hub-card b { display: block !important; color: #1f2937 !important; font-size: 12px !important; }
#app .module-hub-mini-grid .module-hub-card p { margin: 3px 0 0 !important; color: #667085 !important; font-size: 9px !important; line-height: 1.35 !important; }
#app .module-hub-mini-grid .module-hub-card i { color: #98a2b3 !important; font-size: 18px !important; }

#app .module-hub-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 14px !important; }
#app .module-hub-card { min-width: 0 !important; }

/* Desktop recolhido */
#app.sidebar-collapsed {
  --v312-sidebar: 82px;
  --summary-sidebar: 82px;
  grid-template-columns: 82px minmax(0, 1fr) !important;
}
#app.sidebar-collapsed .sidebar-brand-search { grid-template-columns: 1fr !important; justify-items: center !important; padding-inline: 0 !important; }
#app.sidebar-collapsed .sidebar-search,
#app.sidebar-collapsed .sidebar-toggle,
#app.sidebar-collapsed #nav .nav-label,
#app.sidebar-collapsed .sidebar-user-details,
#app.sidebar-collapsed .version-chip,
#app.sidebar-collapsed .logout-label { display: none !important; }
#app.sidebar-collapsed #sidebar { padding-inline: 8px !important; }
#app.sidebar-collapsed #nav.nav-summary > button { grid-template-columns: 1fr !important; width: 54px !important; min-width: 54px !important; height: 50px !important; justify-self: center !important; padding: 0 !important; }
#app.sidebar-collapsed #nav.nav-summary > button > span:first-child { width: 54px !important; min-width: 54px !important; height: 50px !important; }
#app.sidebar-collapsed #sidebar .sidebar-user-card { grid-template-columns: 1fr !important; justify-items: center !important; padding: 6px !important; }
#app.sidebar-collapsed #sidebar .sidebar-footer-actions { grid-template-columns: 1fr !important; }
#app.sidebar-collapsed #sidebar .logout-button { width: 54px !important; justify-self: center !important; }

/* Notebook */
@media (max-width: 1280px) and (min-width: 961px) {
  :root { --v312-sidebar: 246px; }
  #app.app-shell { grid-template-columns: 246px minmax(0,1fr) !important; }
  #app .sidebar-brand-search { grid-template-columns: 50px minmax(0,1fr) !important; gap: 7px !important; }
  #app .sidebar-logo-button { width: 48px !important; height: 48px !important; }
  #app .topbar-logo { width: 46px !important; height: 46px !important; }
  #app .sidebar-search input { font-size: 12px !important; padding-left: 10px !important; }
  #app .clinic-selector { max-width: 210px !important; }
  #app .workspace-topbar { padding-inline: 16px !important; }
  #app main { padding-inline: 20px !important; }
  #app .clinical-workspace-grid { grid-template-columns: minmax(0,1fr) 340px !important; gap: 14px !important; }
}

/* Tablet: coluna compacta estável */
@media (max-width: 960px) and (min-width: 721px) {
  #app.app-shell { grid-template-columns: 82px minmax(0,1fr) !important; }
  #app #sidebar { padding-inline: 8px !important; }
  #app .sidebar-brand-search { grid-template-columns: 1fr !important; justify-items: center !important; padding-inline: 0 !important; }
  #app .sidebar-search,
  #app .sidebar-toggle,
  #app #nav .nav-label,
  #app .sidebar-user-details,
  #app .version-chip,
  #app .logout-label { display: none !important; }
  #app #nav.nav-summary > button { grid-template-columns: 1fr !important; width: 54px !important; min-width: 54px !important; height: 50px !important; justify-self: center !important; padding: 0 !important; }
  #app #nav.nav-summary > button > span:first-child { width: 54px !important; min-width: 54px !important; height: 50px !important; }
  #app #sidebar .sidebar-user-card { grid-template-columns: 1fr !important; justify-items: center !important; padding: 6px !important; }
  #app #sidebar .sidebar-footer-actions { grid-template-columns: 1fr !important; }
  #app #sidebar .logout-button { width: 54px !important; justify-self: center !important; }
  #app .workspace-topbar { padding-inline: 13px !important; }
  #app .clinic-selector { max-width: 190px !important; }
  #app .workspace-context #accessBtn { display: none !important; }
  #app main { padding: 22px 16px 36px !important; }
  #app .clinical-workspace-grid { grid-template-columns: 1fr !important; }
  #app .service-list-panel { min-height: 520px !important; }
  #app .module-hub-mini-grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}

/* Mobile */
@media (max-width: 720px) {
  body.app-active { overflow: auto !important; padding-bottom: 72px !important; }
  #app.app-shell,
  #app.sidebar-collapsed { display: block !important; height: auto !important; min-height: 100dvh !important; }

  #app #sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(88vw, 318px) !important;
    height: 100dvh !important;
    display: grid !important;
    transform: translateX(-105%) !important;
    transition: transform .23s ease !important;
    padding-inline: 12px !important;
    box-shadow: 20px 0 48px rgba(20,34,49,.24) !important;
    z-index: 80 !important;
  }
  #app #sidebar.open { transform: translateX(0) !important; }
  #app #sidebar .sidebar-brand-search { grid-template-columns: 54px minmax(0,1fr) !important; justify-items: stretch !important; }
  #app #sidebar .sidebar-search,
  #app #sidebar #nav .nav-label,
  #app #sidebar .sidebar-user-details,
  #app #sidebar .version-chip,
  #app #sidebar .logout-label { display: block !important; }
  #app #sidebar .sidebar-toggle { display: none !important; }
  #app #sidebar #nav.nav-summary > button { grid-template-columns: 42px minmax(0,1fr) !important; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 50px !important; justify-self: stretch !important; padding: 0 12px !important; }
  #app #sidebar #nav.nav-summary > button > span:first-child { width: 42px !important; min-width: 42px !important; height: auto !important; }
  #app #sidebar .sidebar-user-card { grid-template-columns: 36px minmax(0,1fr) !important; justify-items: stretch !important; }
  #app #sidebar .sidebar-footer-actions { grid-template-columns: auto minmax(0,1fr) !important; }
  #app #sidebar .logout-button { width: auto !important; justify-self: stretch !important; }

  #app .workspace-topbar {
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    height: 64px !important;
    min-height: 64px !important;
    display: flex !important;
    justify-content: space-between !important;
    padding: 8px 10px !important;
    z-index: 60 !important;
  }
  #app .topbar-mobile-actions { display: flex !important; gap: 6px !important; }
  #app .mobile-menu-trigger,
  #app .mobile-search-trigger { display: grid !important; width: 42px !important; height: 42px !important; }
  #app .workspace-context { gap: 5px !important; }
  #app .clinic-selector { max-width: min(47vw,190px) !important; min-height: 42px !important; padding-inline: 9px !important; font-size: 10px !important; }
  #app .workspace-context #accessBtn,
  #app .workspace-context #messagesBtn,
  #app .workspace-context #notificationsBtn,
  #app .workspace-context #helpBtn { display: none !important; }
  #app .profile-avatar { width: 42px !important; height: 42px !important; }

  #app main { display: block !important; min-height: calc(100dvh - 64px) !important; padding: 17px 11px 28px !important; overflow: visible !important; }
  #app .page-heading { align-items: flex-start !important; flex-direction: column !important; gap: 14px !important; margin-bottom: 16px !important; }
  #app .page-heading h1 { font-size: 27px !important; }
  #app .page-actions { width: 100% !important; display: grid !important; grid-template-columns: 42px repeat(3,minmax(0,1fr)) !important; }
  #app .page-actions button { width: 100% !important; min-width: 0 !important; padding-inline: 6px !important; font-size: 10px !important; }

  #app .clinical-workspace-grid { grid-template-columns: 1fr !important; gap: 13px !important; }
  #app .service-list-panel { min-height: 440px !important; grid-template-rows: auto minmax(220px,1fr) auto !important; }
  #app .service-list-panel > .toolbar { min-height: 0 !important; align-items: flex-start !important; flex-direction: column !important; padding: 16px !important; }
  #app .segmented-control { width: 100% !important; }
  #app .segmented-control button { flex: 1 1 0 !important; }
  #app .service-appointment-row { grid-template-columns: 52px minmax(0,1fr) 42px !important; min-height: 88px !important; padding: 12px !important; }
  #app .service-panel-footer { display: grid !important; grid-template-columns: 1fr 1fr !important; padding: 12px !important; }
  #app .service-panel-footer button { width: 100% !important; padding-inline: 8px !important; font-size: 10px !important; }
  #app .service-stats { grid-template-columns: repeat(2,minmax(0,1fr)) !important; row-gap: 16px !important; }
  #app .service-stats > div:nth-child(3) { border-left: 0 !important; }
  #app .module-hub-mini-grid,
  #app .module-hub-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 440px) {
  #app .clinic-selector { display: none !important; }
  #app .page-actions { grid-template-columns: 1fr 1fr !important; }
  #app .page-actions #densityToggle { display: none !important; }
}