/* Camada responsiva global do MB Clínica.
   Mantém a identidade atual e adapta navegação, formulários, tabelas e modais. */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

html.ui-locked,
html.ui-locked body {
  overflow: hidden;
}

.app,
.main,
.content,
.view,
.view > *,
.card,
.card-body,
.card-head {
  min-width: 0;
}

img,
video,
canvas {
  max-width: 100%;
}

button,
[role="button"],
input,
select,
textarea {
  touch-action: manipulation;
}

/* Modal de procedimento: largura útil real e nenhuma rolagem lateral. */
.stk-modal.stk-procedure-modal {
  width: min(860px, calc(100vw - 32px));
  max-width: 860px;
}

.stk-procedure-modal .stk-modal-body {
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.stk-procedure-modal .stk-modal-form,
.stk-procedure-modal .stk-materials-section,
.stk-procedure-modal .svc-material-header,
.stk-procedure-modal .svc-material-row,
.stk-procedure-modal .svc-material-actions,
.stk-procedure-modal .svc-material-summary,
.stk-procedure-modal .field,
.stk-procedure-modal .svc-material-item,
.stk-procedure-modal .svc-material-input,
.stk-procedure-modal .svc-material-calc {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.stk-procedure-modal .svc-material-header,
.stk-procedure-modal .svc-material-row {
  grid-template-columns: 56px minmax(150px, 2fr) minmax(88px, .8fr) minmax(72px, .65fr) minmax(136px, 1.2fr) 30px;
}

.stk-procedure-modal input,
.stk-procedure-modal select,
.stk-procedure-modal textarea {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

.stk-procedure-modal .svc-material-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 12px;
}

.stk-procedure-modal .svc-material-summary {
  margin-top: 14px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #dfc79f;
  border-radius: 14px;
  background: #fff;
  text-align: left;
}

.svc-material-summary-empty {
  display: grid;
  gap: 4px;
  padding: 15px;
}

.svc-material-summary-empty strong {
  color: #7c5117;
  font-size: 11px;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.svc-material-summary-empty span {
  color: #74675d;
  font-size: 11px;
}

.svc-cost-dashboard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid #eadcc7;
  background: linear-gradient(135deg, #fffaf1, #fffdf9);
}

.svc-cost-dashboard-head div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.svc-cost-dashboard-head span {
  color: #a16c1e;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.svc-cost-dashboard-head strong {
  color: #3f2e1d;
  font-size: 13px;
}

.svc-cost-dashboard-head em {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  background: #edf7f0;
  color: #27734c;
  font-size: 9px;
  font-style: normal;
  font-weight: 750;
}

.svc-cost-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
}

.svc-cost-kpis > div {
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 76px;
  padding: 10px 12px;
  border: 1px solid #ece2d4;
  border-radius: 11px;
  background: #fcfaf7;
}

.svc-cost-kpis span {
  color: #887765;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.svc-cost-kpis strong {
  margin-top: 4px;
  color: #3e3023;
  font-size: 18px;
  line-height: 1.1;
}

.svc-cost-kpis small {
  margin-top: 3px;
  color: #8b8074;
  font-size: 9.5px;
}

.svc-cost-kpis .is-primary {
  border-color: #d9b879;
  background: linear-gradient(135deg, #fff7e5, #fffdf7);
}

.svc-cost-kpis .is-primary strong {
  color: #9a6518;
}

.svc-cost-lines {
  display: grid;
  gap: 0;
  margin: 0 12px 12px;
  overflow: hidden;
  border: 1px solid #eee4d7;
  border-radius: 10px;
}

.svc-cost-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 9px 11px;
  border-bottom: 1px solid #f1e9df;
}

.svc-cost-line:last-child {
  border-bottom: 0;
}

.svc-cost-line > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.svc-cost-line b {
  overflow: hidden;
  color: #4b3b2d;
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.svc-cost-line small {
  color: #918476;
  font-size: 9px;
}

.svc-cost-line > strong {
  flex: 0 0 auto;
  color: #76501d;
  font-size: 11px;
}

.svc-cost-warning {
  margin: 0 12px 12px;
  padding: 9px 10px;
  border-radius: 9px;
  background: #fff4dd;
  color: #8e611e;
  font-size: 10px;
  line-height: 1.4;
}

.stk-supplier-url-field {
  margin-top: 2px;
}

.stk-supplier-url-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.stk-supplier-url-control input {
  min-width: 0;
}

.stk-supplier-url-field > small {
  display: block;
  margin-top: 5px;
  color: #8c8072;
  font-size: 10px;
  line-height: 1.35;
}

.stk-open-supplier,
.stk-supplier-action {
  text-decoration: none;
}

.stk-open-supplier {
  min-height: 43px;
}

/* Mantém os créditos do login legíveis e dentro da área visível. */
.login-screen,
.login-shell {
  height: 100dvh;
  min-height: 100dvh;
}

.auth-side {
  box-sizing: border-box;
}

.auth-side > .login-card {
  flex: 0 1 auto;
}

.auth-side > .login-footer {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  width: fit-content;
  max-width: min(440px, calc(100% - 24px));
  box-sizing: border-box;
  margin: 16px auto 0;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, .68);
  border-radius: 999px;
  background: rgba(255, 250, 241, .78);
  box-shadow: 0 8px 24px rgba(88, 58, 18, .10);
  color: #625746;
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.auth-side > .login-footer strong {
  color: #9a681d;
}

.table-wrap,
[class*="table-wrap"],
[class*="-table-card"] {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 29;
  display: none;
  border: 0;
  background: rgba(17, 18, 15, .48);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.mobile-nav-backdrop.open {
  display: block;
}

@media (max-width: 1100px) {
  .auth-side {
    min-height: 100dvh;
    overflow-y: auto;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }

  .app,
  .app.sidebar-collapsed {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .sidebar,
  .app.sidebar-collapsed .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    width: min(320px, 88vw) !important;
    height: 100dvh;
    padding: 18px 14px;
    overflow-x: hidden;
    overflow-y: auto;
    transform: translateX(-105%);
    box-shadow: 24px 0 70px rgba(0, 0, 0, .28);
    transition: transform .22s ease;
  }

  .sidebar.open,
  .app.sidebar-collapsed .sidebar.open {
    transform: translateX(0);
  }

  .app.sidebar-collapsed .brand {
    width: auto;
    height: auto;
    margin: 0;
    border-radius: 16px;
  }

  .app.sidebar-collapsed .brand img {
    max-width: 180px;
    max-height: 55px;
    border-radius: 0;
  }

  .app.sidebar-collapsed .brand-text,
  .app.sidebar-collapsed .nav-text,
  .app.sidebar-collapsed .nav-label,
  .app.sidebar-collapsed .side-note {
    display: initial;
  }

  .app.sidebar-collapsed .nav-label {
    display: block;
  }

  .app.sidebar-collapsed .nav button {
    justify-content: flex-start;
    padding: 0 12px;
  }

  /* sidebar toggle — barra completa no mobile */
  #sidebarCollapse {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    margin-bottom: 4px;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    cursor: pointer;
    transition: all .2s;
    gap: 8px;
  }
  #sidebarCollapse:hover { background: rgba(255,255,255,0.1); }
  #sidebarCollapse svg { width: 20px; height: 20px; flex-shrink: 0; }
  #sidebarCollapse::after {
    content: "Fechar menu";
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,0.7);
    white-space: nowrap;
  }
  .app.sidebar-collapsed #sidebarCollapse {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 12px;
    gap: 0;
  }
  .app.sidebar-collapsed #sidebarCollapse::after { display: none; }
  .sidebar-toggle-btn { display: none !important; }

  .premium-mobile-menu,
  #menuToggle {
    display: inline-flex !important;
  }

  .premium-topbar,
  .app.sidebar-collapsed .premium-topbar {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px;
    align-items: stretch;
  }

  .topbar-divider {
    display: none;
  }

  .premium-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .drawer {
    width: min(640px, calc(100vw - 12px));
    height: 100dvh;
  }

  .grid4,
  .stk-kpis,
  .stk-kpi-grid,
  .fin-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .notif-panel {
    top: 132px;
    right: 18px;
    width: min(380px, calc(100vw - 36px));
  }
}

@media (max-width: 767px) {
  .auth-side > .login-footer {
    max-width: calc(100% - 12px);
    margin-top: 14px;
    padding: 8px 12px;
    font-size: 10px;
  }

  :root {
    --radius: 17px;
    --radius2: 12px;
  }

  body {
    min-height: 100dvh;
  }

  .premium-topbar,
  .app.sidebar-collapsed .premium-topbar {
    top: 0;
    margin: 0 0 8px;
    padding: 12px;
    gap: 11px;
    border-width: 0 0 1px;
    border-radius: 0 0 18px 18px;
  }

  .topbar-title-block {
    align-items: center;
    gap: 10px;
  }

  .premium-topbar .page-title {
    font-size: clamp(21px, 7vw, 27px);
    line-height: 1.06;
  }

  .page-subtitle {
    display: none;
  }

  .premium-search {
    width: 100%;
    min-height: 48px;
    padding-inline: 13px;
  }

  .premium-search input {
    height: 44px;
    min-width: 0;
    font-size: 16px;
  }

  .search-shortcut {
    display: none;
  }

  .premium-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 48px 48px;
    gap: 8px;
    align-items: center;
  }

  .topbar-whatsapp {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    min-height: 44px;
    justify-content: center;
    padding-inline: 10px;
  }

  .premium-profile {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding-right: 9px;
  }

  .premium-profile .profile-copy,
  .premium-profile .profile-copy strong {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .premium-bell {
    grid-column: 2;
    grid-row: 2;
    width: 48px;
    height: 48px;
    min-height: 48px;
  }

  .premium-logout {
    grid-column: 3;
    grid-row: 2;
    width: 48px;
    height: 48px;
    padding: 0;
    justify-content: center;
  }

  .premium-logout span {
    display: none;
  }

  .content {
    padding: 10px !important;
  }

  .card,
  .metric,
  .hero,
  .db-card,
  .db-panel,
  .db-kpi {
    border-radius: 15px !important;
  }

  .card-head,
  .section-head,
  .fin-header,
  .stk-header,
  .eq-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .card-head > .row,
  .card-head > .actions,
  .stk-header-right,
  .fin-header-right {
    width: 100%;
  }

  .grid2,
  .grid3,
  .grid4,
  .two,
  .three,
  .form.two,
  .form.three,
  .stk-kpis,
  .stk-kpi-grid,
  .fin-kpi-grid,
  .import-options,
  .attach-grid,
  .settings-grid,
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .btn,
  .primary,
  .soft,
  .ghost,
  .danger,
  .icon,
  .tab,
  .stk-header button,
  .fin-header button {
    min-height: 44px;
  }

  input,
  select,
  textarea {
    max-width: 100%;
    font-size: 16px !important;
  }

  .drawer {
    inset: 0;
    width: 100vw;
    max-width: none;
    height: 100dvh;
    border-radius: 0;
  }

  .drawer-head,
  .drawer-body,
  .drawer-foot {
    padding-inline: 14px;
  }

  .drawer-foot {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }

  .drawer-foot > * {
    width: 100%;
  }

  .notif-panel {
    inset: auto 8px 8px;
    width: auto;
    max-height: min(70dvh, 560px);
    border-radius: 18px;
  }

  .profile-modal {
    inset: auto 0 0;
    width: 100%;
    max-width: none;
    max-height: 94dvh;
    transform: none;
    border-radius: 20px 20px 0 0;
  }

  .profile-modal-body,
  .profile-modal-head,
  .profile-modal-foot {
    padding-inline: 16px;
  }

  .profile-modal-foot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  .profile-modal-foot button {
    width: 100%;
    min-height: 44px;
  }

  .sys-confirm-box,
  .wa-qr-card,
  .fin-overlay-card,
  .caixa-modal {
    width: calc(100vw - 20px) !important;
    max-width: none !important;
    max-height: calc(100dvh - 20px);
    padding: 18px !important;
    overflow: auto;
  }

  .fin-overlay-card.fin-history-card {
    width: calc(100vw - 12px) !important;
    height: calc(100dvh - 12px);
    max-height: calc(100dvh - 12px);
    padding: 0 !important;
    overflow: hidden;
    border-radius: 18px;
  }

  .fin-history-head { align-items: flex-start; padding: 17px 15px; }
  .fin-history-head h3 { font-size: 20px; }
  .fin-history-head p { max-width: 240px; font-size: 10px; }
  .fin-history-head-actions { flex-direction: column-reverse; align-items: flex-end; }
  .fin-history-new, .fin-history-export { min-height: 36px; padding-inline: 11px; font-size: 10px; }
  .fin-history-body { padding: 13px; }
  .fin-history-toolbar { grid-template-columns: 1fr 1fr; padding: 11px; }
  .fin-history-toolbar .fin-history-search { grid-column: 1 / -1; }
  .fin-history-toolbar label:last-child { grid-column: 1 / -1; }
  .fin-history-custom { justify-content: stretch; padding-inline: 0; }
  .fin-history-custom label { width: 50%; }
  .fin-history-summary { grid-template-columns: 1fr; }
  .fin-history-summary article { min-height: 88px; padding: 13px; }
  .fin-history-summary article strong { font-size: 19px; }
  .fin-history-table-wrap { display: none; }
  .fin-history-mobile-list { display: grid; gap: 10px; }
  .fin-history-mobile-card { padding: 13px; border: 1px solid #ded3c3; border-radius: 14px; background: #fff; }
  .fin-history-mobile-card.is-open { background: #f1efec; }
  .fin-history-mobile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
  .fin-history-mobile-top > div > span { display: block; margin-bottom: 4px; color: #8e8376; font-size: 8px; }
  .fin-history-mobile-top > div > strong { display: block; color: #2e2822; font-size: 12px; }
  .fin-history-mobile-meta { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0; }
  .fin-history-mobile-meta span { padding: 4px 7px; border-radius: 999px; color: #6e6459; background: #ece7df; font-size: 8px; }
  .fin-history-mobile-values { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; padding: 10px; border-radius: 10px; background: #f9f5ef; }
  .fin-history-mobile-values span { display: block; margin-bottom: 3px; color: #887d70; font-size: 7px; font-weight: 800; text-transform: uppercase; }
  .fin-history-mobile-values strong { font-size: 10px; }
  .fin-history-mobile-card .fin-history-actions { margin-top: 10px; justify-content: stretch; }
  .fin-history-mobile-card .fin-history-action { flex: 1; }

  .stk-modal {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100vw;
    max-width: none;
    max-height: 94dvh;
    border-radius: 20px 20px 0 0;
    transform: translateY(105%);
  }

  .stk-modal.stk-procedure-modal {
    width: 100vw;
    max-width: none;
  }

  .stk-procedure-modal .stk-modal-body {
    padding-inline: 14px;
  }

  .stk-procedure-modal .stk-materials-section {
    padding: 13px;
  }

  .stk-procedure-modal .svc-material-header {
    display: none;
  }

  .stk-procedure-modal .svc-material-row {
    grid-template-columns: 58px minmax(0, 1fr) 34px;
  }

  .stk-procedure-modal .svc-material-actions .svc-pkg-add {
    width: 100%;
    justify-content: center;
  }

  .svc-cost-dashboard-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .svc-cost-kpis {
    grid-template-columns: minmax(0, 1fr);
  }

  .svc-cost-kpis > div {
    min-height: 68px;
  }

  .stk-supplier-url-control {
    grid-template-columns: minmax(0, 1fr);
  }

  .stk-open-supplier {
    width: 100%;
  }

  .stk-modal.open {
    transform: translateY(0);
  }

  .stk-modal-foot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }

  .stk-search,
  .stk-header-right,
  .stk-header-right > * {
    width: 100%;
    min-width: 0;
  }

  .kanban,
  #view-agenda .ag-shell .ag-board {
    grid-auto-flow: column;
    grid-auto-columns: minmax(270px, 86vw);
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
  }

  .kanban > *,
  #view-agenda .ag-shell .ag-board > * {
    scroll-snap-align: start;
  }

  #view-dashboard .db-hero {
    padding: 20px 18px;
  }

  #view-dashboard .db-hero-sign {
    position: static !important;
    max-width: 150px !important;
    margin-top: 18px;
    transform: none !important;
  }

  #view-dashboard .db-panel-head,
  #view-dashboard .db-footer-row,
  #view-dashboard .db-agenda-foot {
    align-items: stretch;
    flex-direction: column;
  }

  #view-dashboard .db-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  #view-agenda .ag-shell .ag-app {
    padding: 0 !important;
  }

  #view-agenda .ag-shell .ag-top,
  #view-agenda .ag-shell .ag-section,
  #view-agenda .ag-shell .ag-card {
    border-radius: 15px;
  }

  #view-agenda .ag-shell .ag-actions,
  #view-agenda .ag-shell .ag-filter-left,
  #view-agenda .ag-shell .ag-filter-right {
    width: 100%;
  }

  #view-agenda .ag-shell .ag-actions .ag-btn,
  #view-agenda .ag-shell .ag-primary,
  #view-agenda .ag-shell .ag-search {
    width: 100%;
  }

  #view-agenda .ag-shell .ag-modal,
  #view-agenda .ag-shell .ag-wizard-modal {
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }

  #view-agenda .ag-shell .ag-modal-head,
  #view-agenda .ag-shell .ag-modal-body,
  #view-agenda .ag-shell .ag-modal-foot {
    padding-inline: 13px !important;
  }

  #view-agenda .ag-shell .ag-modal-foot {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-bottom: max(13px, env(safe-area-inset-bottom));
  }

  #view-agenda .ag-shell .ag-wizard-foot-note {
    grid-column: 1 / -1;
  }

  #view-agenda .ag-shell .ag-modal-foot .ag-btn {
    width: 100%;
  }

  #view-agenda .ag-shell .ag-wizard-steps {
    display: flex !important;
    gap: 7px;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  #view-agenda .ag-shell .ag-wizard-step {
    flex: 0 0 48px;
  }

  #view-agenda .ag-shell .ag-table {
    min-width: 720px !important;
  }

  #view-agenda .ag-shell .ag-client-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 5px;
  }

  #view-pacientes .cl-client-window {
    padding: 0 0 18px !important;
  }

  #view-pacientes .cl-page-head,
  #view-pacientes .cl-directory,
  #view-pacientes .cl-patient-panel {
    border-radius: 15px !important;
  }

  #view-pacientes .cl-row-actions {
    opacity: 1 !important;
    pointer-events: auto !important;
    padding-inline: 4px;
  }

  #view-pacientes .cl-modal {
    inset: auto 0 0;
    width: 100vw !important;
    max-width: none;
    max-height: 94dvh;
    padding: 16px;
    border-radius: 20px 20px 0 0;
    transform: none;
  }

  #view-financeiro .ca3-table,
  #view-financeiro .cf-table,
  #view-financeiro table,
  #view-estoque table,
  #view-comissoes table,
  #view-equipes table,
  #view-servicos table {
    min-width: 680px;
  }

  #view-financeiro .ca3-top,
  #view-financeiro .ca3-toolbar,
  #view-financeiro .fin-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  #view-financeiro .ca3-top button,
  #view-financeiro .ca3-toolbar button,
  #view-financeiro .fin-toolbar button {
    width: 100%;
  }

  .sheet-preview,
  .a4-scale {
    overflow-x: auto;
  }

  .toast-stack,
  .caixa-toast {
    right: 10px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    left: 10px !important;
    width: auto;
  }

  .version-badge {
    display: none;
  }
}

@media (max-width: 1100px) and (max-height: 650px) {
  .auth-side {
    justify-content: flex-start;
    padding-top: max(18px, env(safe-area-inset-top));
  }
}

@media (max-width: 420px) {
  .premium-actions {
    grid-template-columns: minmax(0, 1fr) 46px 46px;
  }

  .profile-avatar {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }

  .drawer-foot,
  .profile-modal-foot,
  .stk-modal-foot,
  #view-agenda .ag-shell .ag-modal-foot {
    grid-template-columns: minmax(0, 1fr);
  }

  #view-agenda .ag-shell .ag-wizard-foot-note {
    grid-column: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .drawer,
  .stk-modal {
    transition-duration: .01ms !important;
  }
}

/* Cabeçalho no fluxo da página: compacto e sem acompanhar a rolagem. */
.premium-topbar,
.app.sidebar-collapsed .premium-topbar {
  position: relative !important;
  top: auto !important;
  min-height: 0;
}

@media (max-width: 1180px) {
  .premium-topbar,
  .app.sidebar-collapsed .premium-topbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "title actions" "search search";
    gap: 12px 16px;
    align-items: center;
    margin: 12px 12px 0;
    padding: 14px 16px;
  }

  .topbar-title-block { grid-area: title; justify-content: flex-start; align-items: center; }
  .premium-search { grid-area: search; }
  .premium-actions { grid-area: actions; width: auto; justify-content: flex-end; flex-wrap: nowrap; gap: 8px; }
  .topbar-whatsapp { width: 48px; min-width: 48px; min-height: 48px; padding: 0; justify-content: center; }
  .topbar-whatsapp #syncBadge { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .topbar-whatsapp .status-dot { position: absolute; right: 8px; bottom: 8px; width: 7px; height: 7px; box-shadow: 0 0 0 3px #effaf4; }
  .premium-profile { width: 48px; min-width: 48px; min-height: 48px; padding: 5px; justify-content: center; border-radius: 16px; }
  .premium-profile .profile-copy,
  .premium-profile .profile-chevron { display: none; }
  .premium-logout { width: 48px; height: 48px; padding: 0; justify-content: center; }
  .premium-logout span { display: none; }
}

@media (max-width: 767px) {
  .premium-topbar,
  .app.sidebar-collapsed .premium-topbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "title actions" "search search";
    margin: 0 0 8px;
    padding: 11px 12px;
    gap: 9px 10px;
    border-radius: 0 0 18px 18px;
  }

  .premium-actions { display: flex !important; width: auto; gap: 6px; }
  .topbar-whatsapp,
  .premium-profile,
  .premium-bell,
  .premium-logout { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
  .premium-search { min-height: 44px; }
  .premium-search input { height: 40px; }
}

/* ===== dashboard responsivo forçado ===== */
@media (max-width: 900px) {
  .db-grid-kpi {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }
  .db-kpi {
    min-height: auto !important;
    padding: 14px !important;
    gap: 10px !important;
    grid-template-columns: 32px minmax(0, 1fr) auto !important;
  }
  .db-kpi-value { font-size: 16px !important; }
  .db-kpi-sub { font-size: 10px !important; white-space: normal !important; }
  .db-grid-top, .db-grid-content, .db-grid-bottom {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .db-quick-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .db-quick-btn { height: auto !important; min-height: 64px !important; padding: 12px !important; }
  .db-table-wrap table { min-width: 480px !important; }
  .db-charge-item { grid-template-columns: 1fr !important; }
  .db-finance-body { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 500px) {
  .db-grid-kpi { grid-template-columns: minmax(0, 1fr) !important; }
  .db-quick-grid { grid-template-columns: 1fr !important; }
  .db-finance-body { grid-template-columns: 1fr !important; }
  .db-table-wrap table { min-width: 400px !important; }
}

/* ===== Agenda responsiva ===== */
@media (max-width: 900px) {
  #view-agenda .ag-shell .ag-top {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 14px 14px !important;
  }
  #view-agenda .ag-shell .ag-heading h1 { font-size: 22px !important; }
  #view-agenda .ag-shell .ag-heading p { font-size: 11px !important; max-width: 100% !important; }
  #view-agenda .ag-shell .ag-actions { flex-wrap: wrap !important; justify-content: flex-start !important; }
  #view-agenda .ag-shell .ag-app { padding: 12px !important; gap: 12px !important; }
  #view-agenda .ag-shell .ag-card { border-radius: 16px !important; }
}
@media (max-width: 600px) {
  #view-agenda .ag-shell .ag-top { min-height: auto !important; }
  #view-agenda .ag-shell .ag-heading h1 { font-size: 20px !important; }
  #view-agenda .ag-shell .ag-btn { font-size: 12px !important; padding: 0 10px !important; min-height: 36px !important; }
}

/* ===== Agenda board responsivo ===== */
@media (max-width: 1100px) {
  #view-agenda .ag-shell .ag-board {
    grid-template-columns: repeat(2, minmax(240px, 1fr)) !important;
    overflow-x: auto !important;
  }
}
@media (max-width: 700px) {
  #view-agenda .ag-shell .ag-board {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }
  #view-agenda .ag-shell .ag-pills {
    padding: 0 10px 10px !important;
    gap: 6px !important;
  }
  #view-agenda .ag-shell .ag-pill {
    font-size: 10px !important;
    padding: 0 8px !important;
    height: 24px !important;
  }
}

/* ===== Agenda: uma coluna somente no mobile ===== */
@media (max-width: 767px) {
  #view-agenda .ag-shell .ag-board {
    grid-template-columns: minmax(0, 1fr) !important;
    overflow-x: hidden !important;
  }
  #view-agenda .ag-shell .ag-board .ag-card {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  #view-agenda .ag-shell .ag-prof-name {
    white-space: normal !important;
    word-break: break-word !important;
  }
}

/* ===== Anti-scroll horizontal global ===== */
  @media (max-width: 900px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  #appShell, .app, #view-agenda, .ag-shell, .ag-app {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  .ag-board {
    overflow-x: hidden !important;
  }
}

/* ===== Agenda mobile premium: fluxo vertical, sem cortes e com alvos de toque ===== */
@media (max-width: 767px) {
  html,
  body,
  #appShell,
  .app,
  .main {
    width: 100%;
    max-width: 100%;
    overflow-x: clip !important;
  }

  .premium-topbar,
  .app.sidebar-collapsed .premium-topbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "title actions" "search search";
    align-items: center;
    gap: 10px;
    padding: 10px 9px 12px;
  }

  .topbar-title-block {
    min-width: 0;
    gap: 8px;
  }

  .premium-topbar .page-title {
    min-width: 0;
    overflow: hidden;
    font-size: 23px;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .premium-mobile-menu,
  #menuToggle,
  .topbar-whatsapp,
  .premium-profile,
  .premium-bell,
  .premium-logout {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  .premium-actions {
    width: auto !important;
    min-width: 0;
    gap: 5px !important;
  }

  .premium-search {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    border-radius: 16px;
  }

  .content {
    width: 100%;
    min-width: 0;
    padding: 8px !important;
  }

  #view-agenda,
  #view-agenda .ag-shell,
  #view-agenda .ag-shell .ag-app,
  #view-agenda .ag-shell .ag-card,
  #view-agenda .ag-shell .ag-board,
  #view-agenda .ag-shell .ag-col,
  #view-agenda .ag-shell .ag-col-head,
  #view-agenda .ag-shell .ag-col-body,
  #view-agenda .ag-shell .ag-time-cluster,
  #view-agenda .ag-shell .ag-session {
    width: 100%;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #view-agenda .ag-shell .ag-app {
    padding: 8px !important;
    gap: 11px !important;
  }

  #view-agenda .ag-shell .ag-card {
    border-radius: 18px !important;
  }

  #view-agenda .ag-shell .ag-top {
    padding: 16px 14px !important;
    gap: 13px !important;
  }

  #view-agenda .ag-shell .ag-heading h1 {
    font-size: clamp(21px, 6.4vw, 27px) !important;
    line-height: 1.08 !important;
  }

  #view-agenda .ag-shell .ag-heading p {
    margin-top: 7px;
    font-size: 11.5px !important;
    line-height: 1.45;
  }

  #view-agenda .ag-shell .ag-actions,
  #view-agenda .ag-shell .ag-actions .ag-btn,
  #view-agenda .ag-shell .ag-primary {
    width: 100% !important;
  }

  #view-agenda .ag-shell .ag-actions .ag-btn,
  #view-agenda .ag-shell .ag-primary {
    min-height: 44px !important;
    border-radius: 13px !important;
  }

  #view-agenda .ag-shell .ag-pills {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px !important;
    padding: 11px !important;
  }

  #view-agenda .ag-shell .ag-pill {
    width: 100%;
    min-width: 0;
    height: 31px !important;
    padding-inline: 7px !important;
    justify-content: center;
    overflow: hidden;
    font-size: 10px !important;
    text-align: center;
    text-overflow: ellipsis;
  }

  #view-agenda .ag-shell .ag-section {
    padding: 16px 12px 12px !important;
  }

  #view-agenda .ag-shell .ag-section-head {
    width: 100%;
    gap: 12px !important;
    margin-bottom: 13px !important;
  }

  #view-agenda .ag-shell .ag-section-title,
  #view-agenda .ag-shell .ag-section-title h2,
  #view-agenda .ag-shell .ag-section-title p {
    min-width: 0;
    max-width: 100%;
  }

  #view-agenda .ag-shell .ag-section-title h2 {
    font-size: clamp(22px, 6.7vw, 28px) !important;
    line-height: 1.06;
  }

  #view-agenda .ag-shell .ag-section-title p {
    font-size: 12px;
  }

  #view-agenda .ag-shell .ag-section-head > .ag-btn {
    width: 100% !important;
    min-height: 42px !important;
  }

  #view-agenda .ag-shell .ag-board {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 11px !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }

  #view-agenda .ag-shell .ag-col {
    min-height: 0 !important;
    border-radius: 16px !important;
  }

  #view-agenda .ag-shell .ag-col-head {
    padding: 14px 12px !important;
  }

  #view-agenda .ag-shell .ag-prof-line {
    align-items: center !important;
    gap: 8px !important;
  }

  #view-agenda .ag-shell .ag-prof,
  #view-agenda .ag-shell .ag-prof-plain {
    min-width: 0;
    gap: 11px !important;
  }

  #view-agenda .ag-shell .ag-prof-avatar {
    position: relative;
    z-index: 1;
    width: 44px;
    min-width: 44px;
    height: 44px;
    overflow: hidden !important;
    isolation: isolate;
  }

  #view-agenda .ag-shell .ag-prof-avatar::before,
  #view-agenda .ag-shell .ag-prof-avatar::after {
    content: none !important;
  }

  #view-agenda .ag-shell .ag-prof-avatar img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    object-fit: cover;
  }

  #view-agenda .ag-shell .ag-prof-avatar-photo i {
    z-index: 2;
  }

  #view-agenda .ag-shell .ag-prof-name {
    overflow-wrap: anywhere;
    font-size: 14px;
    line-height: 1.22;
  }

  #view-agenda .ag-shell .ag-prof-role {
    overflow-wrap: anywhere;
    line-height: 1.3;
  }

  #view-agenda .ag-shell .ag-count {
    flex: 0 0 30px;
  }

  #view-agenda .ag-shell .ag-col-stats {
    gap: 7px !important;
  }

  #view-agenda .ag-shell .ag-stat {
    min-width: 0;
    padding: 9px !important;
  }

  #view-agenda .ag-shell .ag-col-body {
    padding: 10px !important;
  }

  #view-agenda .ag-shell .ag-time-cluster-head {
    padding: 10px !important;
  }

  #view-agenda .ag-shell .ag-time-cluster-count {
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #view-agenda .ag-shell .ag-time-cluster-body {
    padding: 8px !important;
  }

  #view-agenda .ag-shell .ag-session {
    padding: 11px !important;
  }

  #view-agenda .ag-shell .ag-session-top {
    grid-template-columns: minmax(0, 1fr) 38px !important;
    gap: 8px !important;
  }

  #view-agenda .ag-shell .ag-client,
  #view-agenda .ag-shell .ag-proc,
  #view-agenda .ag-shell .ag-phone,
  #view-agenda .ag-shell .ag-session-meta {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  #view-agenda .ag-shell .ag-action-icon {
    width: 38px;
    height: 38px;
  }

  .mb-demo-badge {
    display: none !important;
  }
}

@media (max-width: 390px) {
  .premium-topbar .page-title {
    font-size: 20px;
  }

  .premium-mobile-menu,
  #menuToggle,
  .topbar-whatsapp,
  .premium-profile,
  .premium-bell,
  .premium-logout {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }

  #view-agenda .ag-shell .ag-pills {
    grid-template-columns: minmax(0, 1fr);
  }
}