/* Camada visual Smart3Lab — única fonte de acabamento, carregada após layout.css. */
:root {
  --smart3-bg: #f3f5f7;
  --smart3-surface: #ffffff;
  --smart3-surface-soft: #f7f9fa;
  --smart3-text: #17232d;
  --smart3-muted: #78858f;
  --smart3-border: #d9e1e7;
  --smart3-primary: #17668f;
  --smart3-primary-hover: #105477;
  --smart3-navy: #154a65;
  --smart3-radius: 16px;
  --smart3-shadow: 0 10px 30px rgba(23, 35, 45, .08);
  --font-system: Inter, "Segoe UI", Arial, sans-serif;
  --color-bg: var(--smart3-bg);
  --color-surface: var(--smart3-surface);
  --color-surface-muted: var(--smart3-surface-soft);
  --color-text: var(--smart3-text);
  --color-muted: var(--smart3-muted);
  --color-border: var(--smart3-border);
  --color-primary: var(--smart3-primary);
  --color-primary-strong: var(--smart3-primary-hover);
  --shadow-soft: var(--smart3-shadow);
  --shadow-subtle: 0 4px 16px rgba(23, 35, 45, .06);
}

body:not(.login-screen) {
  background: var(--smart3-bg) !important;
}

.app-page::before { display: none !important; }

.app-topbar {
  border-bottom: 1px solid var(--smart3-border) !important;
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.app-topbar .app-logo {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.menu-cluster {
  border: 0 !important;
  border-radius: 11px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.menu-cluster:hover,
.menu-cluster:focus-within,
.menu-cluster.is-active {
  background: #edf3f6 !important;
}

.app-main,
.app-shell { width: min(1600px, calc(100% - 40px)); }

.app-card,
.data-panel,
.kpi-card,
.daily-summary,
.dashboard-hero-card,
.ios-calendar-widget {
  border: 1px solid var(--smart3-border) !important;
  border-radius: var(--smart3-radius) !important;
  background: var(--smart3-surface) !important;
  box-shadow: var(--smart3-shadow) !important;
  backdrop-filter: none !important;
}

.app-card.padded,
.data-panel.padded { padding: 24px !important; }

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.field-group input,
.field-group select,
.field-group textarea {
  border: 1px solid #cbd6de !important;
  border-radius: 11px !important;
  background: #fff !important;
  color: var(--smart3-text) !important;
  box-shadow: none !important;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
.field-group input,
.field-group select { min-height: 48px; }

input:focus,
select:focus,
textarea:focus {
  border-color: var(--smart3-primary) !important;
  box-shadow: 0 0 0 2px rgba(23, 102, 143, .12) !important;
}

.primary-button,
.button.primary,
button[type="submit"] {
  min-height: 46px;
  border-radius: 10px !important;
  background: var(--smart3-primary) !important;
  box-shadow: 0 8px 18px rgba(16, 84, 119, .14) !important;
}

.primary-button:hover,
.button.primary:hover,
button[type="submit"]:hover { background: var(--smart3-primary-hover) !important; }

.data-table-container,
.table-shell,
.table-wrapper {
  max-width: 100%;
  overflow: auto !important;
  border: 1px solid var(--smart3-border) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: none !important;
}

table { border-collapse: separate; border-spacing: 0; }
thead th {
  background: #f5f7f8 !important;
  color: #52616c !important;
  font-size: .75rem !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
}
tbody td { border-bottom-color: #e7ecef !important; }

/* Login medido diretamente no criador.smart3lab.com. */
body.login-screen { background: var(--smart3-bg) !important; }
.login-screen .login-background {
  opacity: 0 !important;
  filter: grayscale(.04) saturate(.96) contrast(1.03) !important;
}
.login-screen .login-background.is-visible { opacity: .58 !important; }
.login-screen .login-background::after { background: rgba(243, 247, 249, .16) !important; }
:root.theme-dim .login-screen .login-background::after { background: rgba(20, 29, 36, .22) !important; }
:root.theme-dark .login-screen .login-background::after { background: rgba(4, 10, 15, .32) !important; }
:root[data-contrast="high"] .login-screen .login-background.is-visible { opacity: .18 !important; }
.login-screen .login-page .app-main {
  width: min(1180px, calc(100% - 32px)) !important;
  padding: 24px 0 !important;
}
.login-screen .hero-grid {
  width: 100% !important;
  height: min(700px, calc(100dvh - 72px)) !important;
  max-height: 700px !important;
  grid-template-columns: 42.03% 57.97% !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: #fff !important;
  box-shadow: 0 24px 56px rgba(23, 35, 45, .14) !important;
}
.login-screen .hero-copy {
  width: 100% !important;
  justify-self: stretch !important;
  padding: 54px !important;
  gap: 24px !important;
  border-radius: 24px 0 0 24px !important;
  background: linear-gradient(145deg, #154a65, #1b6d8e) !important;
}
.login-screen .brand-logo--glow::before { display: none !important; }
.login-screen .login-brand-logo {
  width: min(205px, 100%) !important;
  height: 72px !important;
  min-height: 72px !important;
  flex: 0 0 72px !important;
  padding: 8px 12px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: none !important;
}
.login-screen .login-brand-logo .login-hero-logo {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 56px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.login-screen .login-hero-title {
  max-width: 8ch !important;
  margin: 14px 0 20px !important;
  font-size: clamp(3rem, 4.05vw, 3.65rem) !important;
  font-weight: 690 !important;
  line-height: 1.01 !important;
  letter-spacing: -.045em !important;
}
.login-screen .hero-copy .lead {
  max-width: 34ch !important;
  font-size: .9rem !important;
  line-height: 1.65 !important;
  color: rgba(255,255,255,.78) !important;
}
.login-screen .login-feature-list { gap: 12px !important; }
.login-screen .login-feature-list li { font-size: .76rem !important; line-height: 1.25 !important; }
.login-screen .login-card {
  width: min(460px, calc(100% - 64px)) !important;
  max-width: 460px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.login-screen .login-card .section-title {
  margin: 14px 0 12px !important;
  font-size: clamp(2.35rem, 3.05vw, 2.75rem) !important;
  font-weight: 690 !important;
  line-height: 1.04 !important;
  letter-spacing: -.04em !important;
}
.login-screen .login-card .form-stack { margin-top: 28px !important; gap: 14px !important; }
.login-screen .login-card input { min-height: 52px !important; }
.login-screen .login-card button[type="submit"] { min-height: 48px !important; }
.login-screen .app-footer {
  color: #78858f !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

:root.theme-dim {
  --smart3-bg: #27313a;
  --smart3-surface: #35414b;
  --smart3-surface-soft: #3e4a54;
  --smart3-text: #f3f6f8;
  --smart3-muted: #b6c0c7;
  --smart3-border: #53606a;
}
:root.theme-dark {
  --smart3-bg: #0f171e;
  --smart3-surface: #18242d;
  --smart3-surface-soft: #22313b;
  --smart3-text: #f4f7f9;
  --smart3-muted: #aebbc4;
  --smart3-border: #344550;
}
:root.theme-dim body:not(.login-screen),
:root.theme-dark body:not(.login-screen) { background: var(--smart3-bg) !important; }
:root.theme-dim .app-topbar,
:root.theme-dark .app-topbar { border-color: var(--smart3-border) !important; background: #121d25 !important; }
:root.theme-dim .app-topbar .app-logo,
:root.theme-dark .app-topbar .app-logo { padding: 2px 11px !important; background: #fff !important; }
:root.theme-dim .login-screen .hero-grid { background: #35414b !important; }
:root.theme-dark .login-screen .hero-grid { background: #18242d !important; }
:root.theme-dim .login-screen .login-card,
:root.theme-dark .login-screen .login-card { background: transparent !important; }
:root.theme-dim .menu-cluster:hover,
:root.theme-dim .menu-cluster.is-active,
:root.theme-dark .menu-cluster:hover,
:root.theme-dark .menu-cluster.is-active { background: #22323d !important; }
:root.theme-dim .app-card,
:root.theme-dim .data-panel,
:root.theme-dim .kpi-card,
:root.theme-dark .app-card,
:root.theme-dark .data-panel,
:root.theme-dark .kpi-card { border-color: var(--smart3-border) !important; background: var(--smart3-surface) !important; color: var(--smart3-text) !important; }
:root.theme-dim input,
:root.theme-dim select,
:root.theme-dim textarea,
:root.theme-dark input,
:root.theme-dark select,
:root.theme-dark textarea { border-color: var(--smart3-border) !important; background: var(--smart3-surface-soft) !important; color: var(--smart3-text) !important; }

@media (max-width: 820px) {
  .login-screen .hero-grid { grid-template-columns: 1fr !important; grid-template-rows: auto minmax(0,1fr) !important; }
  .login-screen .hero-copy { padding: 10px 18px !important; border-radius: 20px 20px 0 0 !important; }
  .login-screen .login-card { width: calc(100% - 36px) !important; }
}

/* Agenda: o acesso à compra pertence à variação selecionada, no item do produto. */
.product-selection-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 14px;
}
.product-selection-result .selected-client-card { min-width: 0; }
.product-selection-result .purchase-link-action {
  align-self: stretch;
  justify-content: center;
  margin-top: 15px;
}
.product-selection-result .purchase-link-button {
  min-width: 210px;
  height: 100%;
  min-height: 58px;
  border: 1px solid #0873ad;
  background: #087fbd;
  color: #fff;
  box-shadow: 0 8px 18px rgba(8, 127, 189, .2);
}
.product-selection-result .purchase-link-button:hover,
.product-selection-result .purchase-link-button:focus-visible {
  background: #066c9f;
  color: #fff;
}

/* Controles de rolagem mais largos e fáceis de localizar. */
html,
* {
  scrollbar-width: auto;
  scrollbar-color: #718795 #dce4e9;
}
*::-webkit-scrollbar { width: 15px; height: 15px; }
*::-webkit-scrollbar-track {
  background: #dce4e9;
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb {
  min-height: 44px;
  border: 3px solid #dce4e9;
  border-radius: 999px;
  background: #718795;
}
*::-webkit-scrollbar-thumb:hover { background: #526b7a; }
:root.theme-dim *,
:root.theme-dark * { scrollbar-color: #8195a2 #1a2730; }
:root.theme-dim *::-webkit-scrollbar-track,
:root.theme-dark *::-webkit-scrollbar-track { background: #1a2730; }
:root.theme-dim *::-webkit-scrollbar-thumb,
:root.theme-dark *::-webkit-scrollbar-thumb {
  border-color: #1a2730;
  background: #8195a2;
}

/* Menu superior: ícones maiores, rótulos abaixo e estados de acessibilidade. */
.app-topbar .menu-cluster { min-width: 64px !important; gap: 3px !important; }
.app-topbar .nav-icon-button {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 5px !important;
}
.app-topbar .nav-icon,
.app-topbar .nav-icon-button .nav-icon,
.app-topbar .nav-icon .ui-svg-icon {
  width: 30px !important;
  height: 30px !important;
}
:root[data-icon-size="large"] .app-topbar .nav-icon-button {
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
}
:root[data-icon-size="large"] .app-topbar .nav-icon,
:root[data-icon-size="large"] .app-topbar .nav-icon .ui-svg-icon {
  width: 36px !important;
  height: 36px !important;
}
:root[data-icon-size="xlarge"] .app-topbar .nav-icon-button {
  width: 54px !important;
  min-width: 54px !important;
  height: 54px !important;
  min-height: 54px !important;
}
:root[data-icon-size="xlarge"] .app-topbar .nav-icon,
:root[data-icon-size="xlarge"] .app-topbar .nav-icon .ui-svg-icon {
  width: 42px !important;
  height: 42px !important;
}

@media (max-width: 760px) {
  .product-selection-result { grid-template-columns: 1fr; }
  .product-selection-result .purchase-link-button { width: 100%; }
}


/* Mega menu Smart3: painel amplo, descritivo e com abertura suave. */
.app-topbar { overflow: visible !important; }
.app-topbar .menu-dropdown {
  position: fixed !important;
  inset: var(--topbar-height, 72px) 0 auto 0 !important;
  width: 100vw !important;
  max-width: none !important;
  min-width: 0 !important;
  max-height: min(520px, calc(100dvh - var(--topbar-height, 72px) - 24px));
  display: grid !important;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 70px) !important;
  padding: 26px max(32px, calc((100vw - 1500px) / 2)) 30px !important;
  overflow-y: auto;
  border: 0 !important;
  border-top: 1px solid var(--smart3-border) !important;
  border-bottom: 1px solid var(--smart3-border) !important;
  border-radius: 0 0 22px 22px !important;
  background: rgba(250, 252, 253, .985) !important;
  box-shadow: 0 24px 46px rgba(23, 35, 45, .13) !important;
  backdrop-filter: blur(18px) saturate(125%) !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-14px) !important;
  transform-origin: top center;
  transition: opacity 210ms ease, transform 240ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 240ms;
}
.app-topbar .menu-cluster.is-open .menu-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) !important;
  transition-delay: 0s;
}
.mega-menu-intro {
  align-self: start;
  padding: 8px 4px;
}
.mega-menu-eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--smart3-primary);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.mega-menu-intro h2 {
  margin: 0;
  color: var(--smart3-text);
  font-size: clamp(1.55rem, 2.2vw, 2.15rem);
  line-height: 1.05;
  letter-spacing: -.035em;
}
.mega-menu-intro p {
  margin: 10px 0 0;
  color: var(--smart3-muted);
  font-size: .94rem;
  line-height: 1.5;
}
.mega-menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  gap: 10px 14px;
}
.app-topbar .menu-dropdown .mega-menu-item {
  min-width: 0;
  min-height: 76px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 18px;
  gap: 12px;
  align-items: center;
  padding: 11px 12px !important;
  border: 1px solid transparent;
  border-radius: 13px !important;
  color: var(--smart3-text) !important;
  background: transparent;
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.app-topbar .menu-dropdown .mega-menu-item:hover,
.app-topbar .menu-dropdown .mega-menu-item:focus-visible,
.app-topbar .menu-dropdown .mega-menu-item.is-active {
  border-color: #d5e4eb;
  background: #fff !important;
  box-shadow: 0 8px 22px rgba(23, 35, 45, .07);
  transform: translateY(-1px);
}
.mega-menu-item-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--smart3-primary-hover);
  background: #e7f1f5;
  font-size: 1.22rem;
  font-weight: 800;
}
.mega-menu-item-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.mega-menu-item-copy strong {
  color: inherit;
  font-size: .93rem;
  line-height: 1.2;
}
.mega-menu-item-copy > span {
  color: var(--smart3-muted);
  font-size: .78rem;
  line-height: 1.35;
}
.mega-menu-item-arrow {
  color: #8da0ab;
  font-size: 1.4rem;
  transition: transform 160ms ease, color 160ms ease;
}
.mega-menu-item:hover .mega-menu-item-arrow,
.mega-menu-item:focus-visible .mega-menu-item-arrow {
  color: var(--smart3-primary);
  transform: translateX(3px);
}

/* Superfícies, formulários e tabelas mais leves e legíveis. */
.app-card,
.data-panel,
.module-workspace {
  box-shadow: 0 8px 24px rgba(23, 35, 45, .055) !important;
}
main input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
main select,
main textarea {
  background: #fbfcfd !important;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
main input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
main select:hover,
main textarea:hover {
  border-color: #aebdc7 !important;
  background: #fff !important;
}
main .filter-group > span,
main .field-group > label,
main label.filter-group > span {
  color: #52616c;
  font-size: .76rem;
  font-weight: 750;
  letter-spacing: .035em;
}
main table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
main table thead th {
  min-height: 46px;
  padding: 12px 13px !important;
  vertical-align: middle;
  white-space: normal !important;
  overflow-wrap: anywhere;
  line-height: 1.25 !important;
}
main table tbody td {
  min-height: 50px;
  padding: 12px 13px !important;
  vertical-align: middle;
  line-height: 1.4;
  transition: background-color 130ms ease;
}
main table tbody tr:nth-child(even) td {
  background: rgba(245, 248, 249, .58);
}
main table tbody tr:hover td {
  background: #edf6f9 !important;
}
.table-scroll,
.table-responsive,
[class*="table-wrapper"],
.data-table-container,
.preview-table-container,
.validation-table-wrap {
  scrollbar-width: auto;
  scrollbar-color: #8195a2 #e8edf0;
  scrollbar-gutter: stable;
}
.table-scroll::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
[class*="table-wrapper"]::-webkit-scrollbar,
.data-table-container::-webkit-scrollbar,
.preview-table-container::-webkit-scrollbar,
.validation-table-wrap::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
.table-scroll::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
[class*="table-wrapper"]::-webkit-scrollbar-thumb,
.data-table-container::-webkit-scrollbar-thumb,
.preview-table-container::-webkit-scrollbar-thumb,
.validation-table-wrap::-webkit-scrollbar-thumb {
  min-width: 46px;
  border: 3px solid #e8edf0;
  border-radius: 999px;
  background: #8195a2;
}
.app-button,
.app-button-secondary,
.primary-button,
.button {
  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease, border-color 150ms ease;
}
.app-button:hover,
.app-button-secondary:hover,
.primary-button:hover,
.button:hover {
  transform: translateY(-1px);
}

:root.theme-dim .app-topbar .menu-dropdown,
:root.theme-dark .app-topbar .menu-dropdown {
  border-color: var(--color-border) !important;
  background: rgba(25, 36, 45, .985) !important;
}
:root.theme-dim .mega-menu-intro h2,
:root.theme-dark .mega-menu-intro h2,
:root.theme-dim .mega-menu-item-copy strong,
:root.theme-dark .mega-menu-item-copy strong {
  color: var(--color-text);
}
:root.theme-dim .app-topbar .menu-dropdown .mega-menu-item:hover,
:root.theme-dim .app-topbar .menu-dropdown .mega-menu-item:focus-visible,
:root.theme-dim .app-topbar .menu-dropdown .mega-menu-item.is-active,
:root.theme-dark .app-topbar .menu-dropdown .mega-menu-item:hover,
:root.theme-dark .app-topbar .menu-dropdown .mega-menu-item:focus-visible,
:root.theme-dark .app-topbar .menu-dropdown .mega-menu-item.is-active {
  border-color: #425562;
  background: #24343f !important;
}
:root.theme-dim .mega-menu-item-icon,
:root.theme-dark .mega-menu-item-icon {
  color: #8ed5ef;
  background: #273e4b;
}
:root.theme-dim main table tbody tr:nth-child(even) td,
:root.theme-dark main table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, .018);
}
:root.theme-dim main table tbody tr:hover td,
:root.theme-dark main table tbody tr:hover td {
  background: #263a47 !important;
}

@media (max-width: 1100px) {
  .app-topbar .menu-dropdown { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .app-topbar .menu-dropdown,
  .mega-menu-item,
  .mega-menu-item-arrow { transition: none !important; }
}

/* QA visual 3 temas: controles, linhas e estados sempre distinguíveis. */
.app-button,
.app-button-primary,
.primary-button,
.button.primary,
button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid #105477 !important;
  border-radius: 10px !important;
  background-color: var(--smart3-primary) !important;
  background-image: none !important;
  color: #ffffff !important;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.app-button:hover,
.app-button:focus-visible,
.app-button-primary:hover,
.app-button-primary:focus-visible,
.primary-button:hover,
.primary-button:focus-visible,
.button.primary:hover,
.button.primary:focus-visible,
button[type="submit"]:hover,
button[type="submit"]:focus-visible {
  border-color: #0b435f !important;
  background-color: var(--smart3-primary-hover) !important;
  color: #ffffff !important;
}
.app-button-secondary,
.button:not(.primary):not(.danger),
button.secondary,
button.ghost {
  border: 1px solid #91a2ae !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #243743 !important;
}
.app-button-secondary:hover,
.app-button-secondary:focus-visible,
.button:not(.primary):not(.danger):hover,
.button:not(.primary):not(.danger):focus-visible,
button.secondary:hover,
button.secondary:focus-visible,
button.ghost:hover,
button.ghost:focus-visible {
  border-color: #607b8c !important;
  background-color: #eaf1f5 !important;
  color: #102b3b !important;
}
.app-button[disabled],
.app-button-primary[disabled],
.app-button-secondary[disabled],
.primary-button[disabled],
.button[disabled],
button[disabled] {
  border-color: #aebbc4 !important;
  background-color: #e4e9ec !important;
  color: #5b6871 !important;
  opacity: 1 !important;
}
main table thead th {
  border-top: 1px solid #cbd6de !important;
  border-bottom: 1px solid #aebdc7 !important;
  color: #41535f !important;
}
main table tbody td { border-bottom: 1px solid #d8e0e5 !important; }
main table tbody tr:last-child td { border-bottom-color: #c5d0d7 !important; }
.modal-content,
.dialog-content,
[role="dialog"] {
  border-color: var(--smart3-border) !important;
  color: var(--smart3-text) !important;
}

:root.theme-dim .app-button,
:root.theme-dark .app-button,
:root.theme-dim .app-button-primary,
:root.theme-dark .app-button-primary,
:root.theme-dim .primary-button,
:root.theme-dark .primary-button,
:root.theme-dim .button.primary,
:root.theme-dark .button.primary,
:root.theme-dim button[type="submit"],
:root.theme-dark button[type="submit"] {
  border-color: #72c4e5 !important;
  background-color: #197cab !important;
  color: #ffffff !important;
}
:root.theme-dim .app-button-secondary,
:root.theme-dark .app-button-secondary,
:root.theme-dim .button:not(.primary):not(.danger),
:root.theme-dark .button:not(.primary):not(.danger),
:root.theme-dim button.secondary,
:root.theme-dark button.secondary,
:root.theme-dim button.ghost,
:root.theme-dark button.ghost {
  border-color: #718592 !important;
  background-color: #2b3b46 !important;
  color: #f7fafc !important;
}
:root.theme-dim .app-button-secondary:hover,
:root.theme-dark .app-button-secondary:hover,
:root.theme-dim .app-button-secondary:focus-visible,
:root.theme-dark .app-button-secondary:focus-visible,
:root.theme-dim .button:not(.primary):not(.danger):hover,
:root.theme-dark .button:not(.primary):not(.danger):hover,
:root.theme-dim .button:not(.primary):not(.danger):focus-visible,
:root.theme-dark .button:not(.primary):not(.danger):focus-visible {
  border-color: #9eb0ba !important;
  background-color: #3a4c58 !important;
  color: #ffffff !important;
}
:root.theme-dim .app-button[disabled],
:root.theme-dark .app-button[disabled],
:root.theme-dim .app-button-primary[disabled],
:root.theme-dark .app-button-primary[disabled],
:root.theme-dim .app-button-secondary[disabled],
:root.theme-dark .app-button-secondary[disabled],
:root.theme-dim button[disabled],
:root.theme-dark button[disabled] {
  border-color: #566873 !important;
  background-color: #293740 !important;
  color: #aebcc5 !important;
  opacity: 1 !important;
}
:root.theme-dim main table thead th,
:root.theme-dark main table thead th {
  border-top-color: #536875 !important;
  border-bottom-color: #6b818e !important;
  background: #22313b !important;
  color: #e5edf2 !important;
}
:root.theme-dim main table tbody td,
:root.theme-dark main table tbody td { border-bottom-color: #455a67 !important; }
:root.theme-dim .data-table-container,
:root.theme-dark .data-table-container,
:root.theme-dim .table-shell,
:root.theme-dark .table-shell,
:root.theme-dim .table-wrapper,
:root.theme-dark .table-wrapper {
  border-color: #536875 !important;
  background: var(--smart3-surface) !important;
}
:root.theme-dim .modal-content,
:root.theme-dark .modal-content,
:root.theme-dim .dialog-content,
:root.theme-dark .dialog-content,
:root.theme-dim [role="dialog"],
:root.theme-dark [role="dialog"] {
  border-color: #607480 !important;
  background: var(--smart3-surface) !important;
  color: var(--smart3-text) !important;
}