/*
 * Camada mobile-first do painel do estabelecimento.
 * Escopo: smartphones; desktop e tablet preservam o layout canônico existente.
 * Regra: somente tokens compartilhados, sem cores locais.
 */
@media (max-width: 42rem) {
  html,
  body {
    --establishment-mobile-topbar-height: 6.25rem;
    width: 100%;
    min-height: 100%;
    overscroll-behavior: none;
    background: var(--atende-color-background);
  }

  body.establishment-portal-ready:not(.mobile-drawer-open) {
    overflow: hidden;
  }

  html:has(body.establishment-portal-ready) {
    height: 100%;
    overflow: hidden;
  }

  .app.establishment-bootstrap-shell {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    background: var(--atende-color-background);
  }

  .main.establishment-shell-main {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: 100%;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  .topbar.establishment-shell-topbar {
    position: relative;
    z-index: 20;
    min-height: var(--establishment-mobile-topbar-height);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--atende-space-2);
    padding: calc(env(safe-area-inset-top) + var(--atende-space-4)) var(--atende-space-4) var(--atende-space-4);
    border: 0;
    color: var(--atende-color-on-dark);
    background: linear-gradient(145deg, var(--atende-color-brand-deep), color-mix(in srgb, var(--atende-color-brand-deep) 58%, var(--atende-color-brand)));
    box-shadow: none;
  }

  .topbar .menu {
    display: none;
  }

  #establishment-page-context {
    min-width: 0;
  }

  .topbar #breadcrumb {
    display: block;
    margin: 0 0 var(--atende-space-1);
    overflow: hidden;
    color: color-mix(in srgb, var(--atende-color-on-dark) 72%, transparent);
    font-size: 0.62rem;
    line-height: 1.2;
    letter-spacing: 0.11em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar #page-title {
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
    color: var(--atende-color-on-dark);
    font-size: clamp(1.12rem, 5vw, 1.38rem);
    line-height: 1.15;
    letter-spacing: -0.035em;
    text-overflow: clip;
    white-space: normal;
  }

  .topbar #page-description {
    display: -webkit-box;
    max-width: 100%;
    margin-top: var(--atende-space-1);
    overflow: hidden;
    color: color-mix(in srgb, var(--atende-color-on-dark) 70%, transparent);
    font-size: 0.69rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .topbar #page-title:focus-visible {
    border-radius: 0;
    outline: 0;
    box-shadow: inset 0 -0.1875rem 0 var(--atende-color-accent);
  }

  .establishment-tour-actions {
    display: contents;
  }

  .topbar .establishment-tour-trigger,
  .topbar .establishment-tour-help,
  .topbar .appointment-mobile-task-back,
  .topbar .refresh {
    width: var(--establishment-mobile-touch);
    min-width: var(--establishment-mobile-touch);
    height: var(--establishment-mobile-touch);
    min-height: var(--establishment-mobile-touch);
    display: inline-grid;
    place-items: center;
    padding: 0;
    border-color: color-mix(in srgb, var(--atende-color-on-dark) 30%, transparent);
    border-radius: var(--atende-radius-md);
    color: var(--atende-color-on-dark);
    background: color-mix(in srgb, var(--atende-color-on-dark) 9%, transparent);
  }

  .topbar .establishment-tour-trigger {
    display: none;
  }

  .topbar .establishment-tour-help span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .topbar .establishment-tour-help svg,
  .topbar .appointment-mobile-task-back svg,
  .topbar .refresh svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .content.container-fluid {
    width: 100%;
    min-height: 0;
    max-width: none;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-padding-block: var(--atende-space-4) calc(var(--establishment-mobile-nav-height) + var(--atende-space-4));
    padding: var(--atende-space-4) var(--atende-space-3) calc(var(--establishment-mobile-nav-height) + env(safe-area-inset-bottom) + var(--atende-space-5));
    background:
      radial-gradient(circle at top right, color-mix(in srgb, var(--atende-color-brand-soft) 72%, transparent), transparent 16rem),
      var(--atende-color-background);
  }

  .content > * {
    min-width: 0;
  }

  .content > .loading,
  .content > .empty {
    min-height: 12rem;
    display: grid;
    place-items: center;
    padding: var(--atende-space-6);
    border: 1px solid var(--atende-color-border);
    border-radius: var(--atende-radius-card);
    color: var(--atende-color-muted);
    background: var(--atende-color-surface);
    box-shadow: var(--atende-shadow-sm);
  }

  .content :where(.panel, .card, .establishment-section-card, .self-service-shell, .pending-list-shell, .automation-type-card, .automation-rule-card, .client-list-card) {
    border-color: var(--atende-color-border);
    border-radius: var(--atende-radius-card);
    background: var(--atende-color-surface);
    box-shadow: var(--atende-shadow-sm);
  }

  .content :where(.panel-head, .section-head, .list-toolbar, .client-toolbar, .pending-list-head, .establishment-page-toolbar, .automation-page-toolbar) {
    gap: var(--atende-space-3);
    align-items: stretch;
  }

  .content :where(.panel-head, .section-head, .list-toolbar, .establishment-page-toolbar, .automation-page-toolbar) > .btn,
  .content :where(.setup-actions, .pending-actions, .client-toolbar-actions, .automation-rule-actions) .btn {
    min-height: var(--establishment-mobile-touch);
  }

  .content :where(button:not(.establishment-agenda-week-event), .btn, summary, [role="button"]),
  .establishment-shell-dialog :where(button, .btn, summary, [role="button"]),
  .establishment-toast :where(button, .btn) {
    min-height: var(--establishment-mobile-touch);
  }

  .content :where(
    .btn-icon,
    .client-icon-button,
    .client-page-buttons button,
    .client-detail-pagination button,
    .client-detail-appointment-button,
    .establishment-agenda-calendar-day,
    .establishment-agenda-card-menu summary
  ),
  .establishment-toast-close {
    width: var(--establishment-mobile-touch);
    min-width: var(--establishment-mobile-touch);
    height: var(--establishment-mobile-touch);
  }

  .content.container-fluid .establishment-agenda-v2 :where(button:not(.establishment-agenda-week-event), summary) {
    min-height: var(--establishment-mobile-touch);
  }

  .content.container-fluid .establishment-agenda-v2 :where(
    .btn-icon,
    .establishment-agenda-calendar-day,
    .establishment-agenda-card-menu summary
  ) {
    width: var(--establishment-mobile-touch);
    min-width: var(--establishment-mobile-touch);
    height: var(--establishment-mobile-touch);
  }

  .content :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .form-control, .form-select) {
    min-height: var(--establishment-mobile-touch);
    border-color: var(--atende-color-border-strong);
    border-radius: var(--atende-radius-sm);
    background-color: var(--atende-color-surface);
    color: var(--atende-color-text);
    font-size: 1rem;
  }

  .content textarea {
    min-height: 7rem;
  }

  .content :where(input, select, textarea, button, a):focus-visible {
    outline: 0.2rem solid var(--atende-focus-ring);
    outline-offset: 0.12rem;
  }

  .content :where(.stats, .stat-grid, .dashboard-stats, .client-summary-grid, .pending-summary) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--atende-space-2);
  }

  .automation-central .automation-type-grid,
  .reminder-option-page .automation-type-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--atende-color-border);
    border-radius: var(--atende-radius-card);
    background: var(--atende-color-surface);
    box-shadow: var(--atende-shadow-sm);
  }

  .content :where(.automation-central, .reminder-option-page) .automation-type-card {
    position: relative;
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: var(--atende-space-1) var(--atende-space-3);
    min-width: 0;
    min-height: 6.5rem;
    padding: var(--atende-space-4);
    overflow: hidden;
    border: 0;
    border-bottom: 1px solid var(--atende-color-border);
    border-radius: 0;
    box-shadow: none;
    text-align: left;
  }

  .content :where(.automation-central, .reminder-option-page) .automation-type-card:last-child {
    border-bottom: 0;
  }

  .content :where(.automation-central, .reminder-option-page) .automation-type-card header {
    display: contents;
  }

  .content :where(.automation-central, .reminder-option-page) .automation-type-card .automation-icon {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: start;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--atende-radius-md);
  }

  .content :where(.automation-central, .reminder-option-page) .automation-type-card h2 {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    margin: 0;
    font-size: 1rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .content :where(.automation-central, .reminder-option-page) .automation-type-card p {
    grid-column: 2 / 4;
    grid-row: 2;
    min-width: 0;
    margin: 0;
    padding-right: var(--atende-space-5);
    overflow: visible;
    color: var(--atende-color-muted);
    font-size: 0.75rem;
    line-height: 1.4;
    display: block;
  }

  .content :where(.automation-central, .reminder-option-page) .automation-type-card .badge {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    justify-self: end;
    max-width: 8rem;
    overflow-wrap: anywhere;
    text-align: center;
  }

  .content :where(.automation-central, .reminder-option-page) .automation-type-card footer {
    position: absolute;
    z-index: 1;
    inset: 0;
    margin: 0;
  }

  .content :where(.automation-central, .reminder-option-page) .automation-type-card footer .btn {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: transparent;
    background: transparent;
    box-shadow: none;
    font-size: 0;
  }

  .content :where(.automation-central, .reminder-option-page) .automation-type-card footer .btn::after {
    content: "";
    position: absolute;
    top: 50%;
    right: var(--atende-space-4);
    width: 0.65rem;
    height: 0.65rem;
    border-top: 0.12rem solid var(--atende-color-muted);
    border-right: 0.12rem solid var(--atende-color-muted);
    transform: translateY(-50%) rotate(45deg);
  }

  .content :where(.automation-central, .reminder-option-page) .automation-type-card footer .btn:hover {
    border: 0;
    background: color-mix(in srgb, var(--atende-color-brand-soft) 42%, transparent);
    box-shadow: none;
  }

  .content :where(.automation-central, .reminder-option-page) .automation-type-card footer .btn:active {
    transform: none;
  }

  .content :where(.automation-central, .reminder-option-page) .automation-type-card footer .btn:focus-visible {
    outline: 0.2rem solid var(--atende-focus-ring);
    outline-offset: -0.22rem;
  }

  .content .establishment-availability-page .establishment-page-toolbar > .btn,
  .content .automation-page .automation-page-toolbar > .btn {
    width: auto;
    min-height: var(--establishment-mobile-touch);
    padding: 0 var(--atende-space-2) 0 0;
    border: 0;
    color: var(--atende-color-brand-strong);
    background: transparent;
    box-shadow: none;
  }

  .content :where(.stat, .metric-card, .client-summary-card, .pending-summary .btn) {
    min-width: 0;
    min-height: 6.75rem;
    padding: var(--atende-space-3);
    border-radius: var(--atende-radius-card);
  }

  .client-summary-card {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: var(--atende-space-2);
  }

  .client-summary-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--atende-radius-md);
  }

  .client-summary-card strong {
    font-size: 1.55rem;
  }

  .client-toolbar {
    grid-template-columns: 1fr;
    align-items: stretch;
    padding: var(--atende-space-4);
  }

  .client-toolbar-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .client-toolbar-actions .btn {
    min-width: 0;
    white-space: normal;
  }

  .content .table-responsive {
    overflow: visible;
  }

  .content table {
    max-width: 100%;
  }

  .pending-card,
  .automation-rule-card,
  .automation-history-item {
    border-color: var(--atende-color-border);
    border-radius: var(--atende-radius-card);
    background: var(--atende-color-surface);
  }

  .pending-actions,
  .automation-rule-actions,
  .setup-actions {
    width: 100%;
  }

  .pending-actions .btn,
  .automation-rule-actions .btn,
  .setup-actions .btn {
    min-width: 0;
  }

  .mobile-navigation.establishment-shell-mobile-nav {
    z-index: 45;
    min-height: var(--establishment-mobile-nav-height);
    align-items: center;
    padding: var(--atende-space-1) var(--atende-space-2) calc(env(safe-area-inset-bottom) + var(--atende-space-1));
    border-top: 1px solid var(--atende-color-border);
    background: color-mix(in srgb, var(--atende-color-surface) 96%, transparent);
    box-shadow: 0 -0.55rem 1.75rem color-mix(in srgb, var(--atende-color-text) 10%, transparent);
    backdrop-filter: blur(0.8rem);
  }

  .mobile-navigation a,
  .mobile-navigation button {
    position: relative;
    min-height: var(--establishment-mobile-touch);
    align-content: center;
    gap: calc(var(--atende-space-1) / 2);
    border-radius: var(--atende-radius-md);
    color: var(--atende-color-muted);
    font-size: 0.65rem;
  }

  .mobile-navigation a::before,
  .mobile-navigation button::before {
    content: "";
    position: absolute;
    top: calc(var(--atende-space-1) * -1);
    width: 1.8rem;
    height: 0.18rem;
    border-radius: 999px;
    background: transparent;
  }

  .mobile-navigation a.active,
  .mobile-navigation button.active {
    color: var(--atende-color-brand-strong);
    background: var(--atende-color-brand-soft);
    font-weight: 850;
  }

  .mobile-navigation a.active::before,
  .mobile-navigation button.active::before {
    background: var(--atende-color-brand);
  }

  .mobile-navigation svg {
    width: 1.35rem;
    height: 1.35rem;
  }

  .sidebar {
    width: min(21rem, 88vw);
    padding: calc(env(safe-area-inset-top) + var(--atende-space-4)) var(--atende-space-3) calc(env(safe-area-inset-bottom) + var(--atende-space-4));
    border-radius: 0 var(--atende-radius-xl) var(--atende-radius-xl) 0;
    background: var(--atende-color-brand-deep);
  }

  .sidebar nav a {
    min-height: var(--establishment-mobile-touch);
    border-radius: var(--atende-radius-md);
  }

  .sidebar-scrim {
    background: color-mix(in srgb, var(--atende-color-brand-deep) 62%, transparent);
    backdrop-filter: blur(0.12rem);
  }

  dialog.establishment-shell-dialog,
  dialog.establishment-tour-library {
    width: 100%;
    max-width: none;
    max-height: 92dvh;
    margin: auto 0 0;
    padding: 0;
    border: 0;
    border-radius: var(--atende-radius-xl) var(--atende-radius-xl) 0 0;
    color: var(--atende-color-text);
    background: var(--atende-color-surface);
    box-shadow: var(--atende-shadow-lg);
    overflow: hidden;
  }

  dialog.establishment-shell-dialog::backdrop,
  dialog.establishment-tour-library::backdrop {
    background: color-mix(in srgb, var(--atende-color-brand-deep) 58%, transparent);
    backdrop-filter: blur(0.12rem);
  }

  .modal-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    max-height: 92dvh;
    overflow: hidden;
  }

  #modal-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: var(--atende-space-4) calc(var(--establishment-mobile-touch) + var(--atende-space-6) + env(safe-area-inset-bottom));
  }

  #modal-body [data-modal-actions] {
    position: sticky;
    z-index: 1;
    bottom: calc(-1 * var(--atende-space-4));
    margin: var(--atende-space-4) calc(-1 * var(--atende-space-4)) calc(-1 * var(--atende-space-4));
    padding: var(--atende-space-3) var(--atende-space-4) calc(var(--atende-space-3) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--atende-color-border);
    background: var(--atende-color-surface);
    box-shadow: 0 -0.5rem 1rem color-mix(in srgb, var(--atende-color-brand-deep) 8%, transparent);
  }

  .establishment-tour-library-shell {
    max-height: 92dvh;
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .modal-shell > header {
    position: relative;
    z-index: 2;
    padding: var(--atende-space-4);
    border-bottom: 1px solid var(--atende-color-border);
    background: var(--atende-color-surface);
  }

  .establishment-tour-library-head {
    position: sticky;
    z-index: 2;
    top: 0;
    padding: var(--atende-space-4);
    border-bottom: 1px solid var(--atende-color-border);
    background: color-mix(in srgb, var(--atende-color-surface) 96%, transparent);
    backdrop-filter: blur(0.8rem);
  }

  .establishment-toast-region {
    --establishment-toast-top: calc(var(--establishment-mobile-topbar-height) + env(safe-area-inset-top) + var(--atende-space-3));
    top: auto;
    right: var(--atende-space-3);
    bottom: calc(var(--establishment-mobile-nav-height) + env(safe-area-inset-bottom) + var(--atende-space-3));
    left: var(--atende-space-3);
    align-content: start;
  }

  .establishment-toast-stack {
    width: 100%;
  }

  .establishment-toast[data-placement="top"] {
    position: fixed;
    z-index: 1;
    top: var(--establishment-toast-top);
    right: var(--atende-space-3);
    bottom: auto;
    left: var(--atende-space-3);
    width: auto;
  }

  .appointment-mobile-task-topbar .establishment-tour-actions {
    display: none;
  }

  .appointment-mobile-task-back {
    cursor: pointer;
  }

  .appointment-mobile-task-back svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .content.container-fluid.appointment-mobile-task-content {
    padding-top: 0;
    background: var(--atende-color-background);
  }

  .content > .appointment-mobile-detail-page {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 32rem;
    display: grid;
    gap: var(--atende-space-3);
    margin: var(--atende-space-3) auto 0;
    padding: 0 !important;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .appointment-mobile-summary-card,
  .appointment-mobile-services-card,
  .appointment-mobile-meta-card {
    border: 1px solid var(--atende-color-border);
    border-radius: var(--atende-radius-card);
    background: var(--atende-color-surface);
    box-shadow: var(--atende-shadow-md);
  }

  .appointment-mobile-summary-card {
    display: grid;
    gap: 0;
    padding: var(--atende-space-3);
  }

  .appointment-mobile-summary-card > div + div {
    border-top: 1px solid var(--atende-color-border);
  }

  .appointment-mobile-summary-head {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--atende-space-3);
    padding: var(--atende-space-1) var(--atende-space-2) var(--atende-space-2);
  }

  .appointment-mobile-calendar-icon {
    width: 3.5rem;
    height: 3.5rem;
    display: grid;
    place-items: center;
    border-radius: var(--atende-radius-lg);
    color: var(--atende-color-on-dark);
    background: linear-gradient(145deg, var(--atende-color-brand-deep), var(--atende-color-brand));
    box-shadow: var(--atende-shadow-sm);
  }

  .appointment-mobile-calendar-icon svg {
    width: 1.9rem;
    height: 1.9rem;
  }

  .appointment-mobile-date {
    min-width: 0;
  }

  .appointment-mobile-date strong,
  .appointment-mobile-date span {
    display: block;
  }

  .appointment-mobile-date strong {
    color: var(--atende-color-brand-deep);
    font-size: clamp(1.85rem, 9vw, 2.45rem);
    line-height: 0.95;
    letter-spacing: -0.055em;
  }

  .appointment-mobile-date span {
    margin-top: calc(var(--atende-space-1) / 2);
    color: var(--atende-color-text);
    font-size: 0.82rem;
    line-height: 1.2;
  }

  .appointment-mobile-status {
    min-height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--atende-space-2);
    padding: var(--atende-space-2) var(--atende-space-3);
    border-radius: var(--atende-radius-md);
    color: var(--atende-color-success);
    background: var(--atende-color-success-soft);
    font-size: 0.7rem;
    font-weight: 850;
    text-align: center;
    text-transform: uppercase;
  }

  .appointment-mobile-status i {
    width: 0.5rem;
    height: 0.5rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: currentColor;
  }

  .appointment-mobile-status.appointment-status-pending_client_confirmation {
    color: var(--atende-color-warning);
    background: var(--atende-color-warning-soft);
  }

  .appointment-mobile-status.appointment-status-cancelled {
    color: var(--atende-color-danger);
    background: var(--atende-color-danger-soft);
  }

  .appointment-mobile-status.appointment-status-completed,
  .appointment-mobile-status.appointment-status-unknown {
    color: var(--atende-color-muted);
    background: var(--atende-color-surface-soft);
  }

  .appointment-mobile-client-row {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    align-items: center;
    gap: var(--atende-space-3);
    padding: var(--atende-space-2);
  }

  .appointment-mobile-client-row > div > strong,
  .appointment-mobile-client-row > div > span {
    display: block;
  }

  .appointment-mobile-client-row strong {
    overflow: hidden;
    color: var(--atende-color-text);
    font-size: 1rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .appointment-mobile-client-row div > span {
    margin-top: var(--atende-space-1);
    color: var(--atende-color-muted);
    font-size: 0.9rem;
  }

  .appointment-mobile-soft-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    color: var(--atende-color-brand-strong);
    background: var(--atende-color-brand-soft);
  }

  .appointment-mobile-soft-icon {
    width: 2.75rem;
    height: 2.75rem;
  }

  .appointment-mobile-soft-icon svg,
  .appointment-mobile-calendar-icon svg,
  .appointment-mobile-detail-actions svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .appointment-mobile-soft-icon svg {
    width: 1.45rem;
    height: 1.45rem;
  }

  .appointment-mobile-period-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--atende-space-2);
  }

  .appointment-mobile-period-row > div {
    min-width: 0;
    display: grid;
    grid-template-columns: 2.35rem minmax(0, 1fr);
    align-items: center;
    gap: var(--atende-space-2);
    padding-right: var(--atende-space-2);
  }

  .appointment-mobile-period-row > div + div {
    padding-right: 0;
    padding-left: var(--atende-space-3);
    border-left: 1px solid var(--atende-color-border);
  }

  .appointment-mobile-period-row .appointment-mobile-soft-icon {
    width: 2.35rem;
    height: 2.35rem;
  }

  .appointment-mobile-period-row small,
  .appointment-mobile-period-row strong {
    display: block;
  }

  .appointment-mobile-period-row small,
  .appointment-mobile-meta-row small,
  .appointment-mobile-price-summary small {
    color: var(--atende-color-muted);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.025em;
  }

  .appointment-mobile-period-row strong {
    margin-top: var(--atende-space-1);
    overflow-wrap: anywhere;
    color: var(--atende-color-text);
    font-size: 0.72rem;
    line-height: 1.35;
  }

  .appointment-mobile-services {
    display: grid;
    gap: var(--atende-space-2);
  }

  .appointment-mobile-services .establishment-mobile-section-head {
    padding: 0 var(--atende-space-3);
  }

  .appointment-mobile-services .establishment-mobile-section-head small {
    color: var(--atende-color-brand);
  }

  .appointment-mobile-services .establishment-mobile-section-head h2 {
    margin: var(--atende-space-1) 0 0;
    color: var(--atende-color-brand-deep);
    font-size: 0.9rem;
    font-weight: 850;
    letter-spacing: 0.025em;
  }

  .appointment-mobile-services-card {
    padding: var(--atende-space-2);
  }

  .appointment-mobile-service-title {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    align-items: center;
    gap: var(--atende-space-3);
    padding: 0 var(--atende-space-1) var(--atende-space-2);
  }

  .appointment-mobile-service-title .appointment-mobile-soft-icon {
    width: 2.75rem;
    height: 2.75rem;
  }

  .appointment-mobile-service-title strong {
    display: block;
  }

  .appointment-mobile-service-title strong {
    font-size: 1rem;
  }

  .appointment-mobile-services-card ol {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--atende-color-border);
    list-style: none;
  }

  .appointment-mobile-services-card li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--atende-space-2);
    min-height: 3.25rem;
    padding: var(--atende-space-2) var(--atende-space-1);
    border-bottom: 1px solid var(--atende-color-border);
    color: var(--atende-color-text);
    font-size: 0.82rem;
  }

  .appointment-mobile-services-card li > span:nth-last-child(-n + 2) {
    color: var(--atende-color-text);
    white-space: nowrap;
  }

  .appointment-mobile-price-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: var(--atende-space-2);
    overflow: hidden;
    border-radius: var(--atende-radius-md);
    background: var(--atende-color-surface-soft);
  }

  .appointment-mobile-price-summary > span {
    display: grid;
    gap: var(--atende-space-1);
    padding: var(--atende-space-2);
    text-align: center;
  }

  .appointment-mobile-price-summary > span + span {
    border-left: 1px solid var(--atende-color-border);
  }

  .appointment-mobile-price-summary > span:only-child {
    grid-column: 1 / -1;
  }

  .appointment-mobile-price-summary strong {
    color: var(--atende-color-text);
    font-size: 1.05rem;
  }

  .appointment-mobile-price-summary .agreed small,
  .appointment-mobile-price-summary .agreed strong {
    color: var(--atende-color-success);
  }

  .appointment-mobile-meta-card {
    display: grid;
    gap: 0;
    padding: var(--atende-space-2) var(--atende-space-3);
  }

  .appointment-mobile-meta-row {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    align-items: center;
    gap: var(--atende-space-3);
    padding: var(--atende-space-2) 0;
  }

  .appointment-mobile-meta-row + .appointment-mobile-meta-row {
    border-top: 1px solid var(--atende-color-border);
  }

  .appointment-mobile-meta-row .appointment-mobile-soft-icon {
    width: 2.75rem;
    height: 2.75rem;
  }

  .appointment-mobile-meta-row strong {
    display: block;
    margin-top: var(--atende-space-1);
    overflow-wrap: anywhere;
    color: var(--atende-color-text);
    font-size: 0.82rem;
    font-weight: 550;
    line-height: 1.45;
  }

  .appointment-mobile-archived-note {
    margin: 0;
    padding: var(--atende-space-3);
    border: 1px solid var(--atende-color-border);
    border-radius: var(--atende-radius-md);
    color: var(--atende-color-muted);
    background: var(--atende-color-surface-soft);
    font-size: 0.78rem;
  }

  .appointment-mobile-detail-actions {
    display: block;
    margin: var(--atende-space-2) 0 0;
    padding: 0 0 var(--atende-space-1);
    border: 0;
    background: transparent;
  }

  .appointment-mobile-detail-actions .appointment-detail-primary-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--atende-space-2);
    width: 100%;
  }

  .appointment-mobile-detail-actions .appointment-detail-more-actions {
    width: 100%;
  }

  .appointment-mobile-detail-actions .appointment-detail-action-menu {
    right: 0;
    bottom: calc(100% + var(--atende-space-2));
    left: 0;
    max-width: none;
    border-color: var(--atende-color-border);
    background: var(--atende-color-surface);
    box-shadow: var(--atende-shadow-lg);
  }

  dialog.establishment-shell-dialog.appointment-create-mobile-dialog {
    width: 100%;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border-radius: 0;
    background: var(--atende-color-background);
  }

  .appointment-create-mobile-dialog .appointment-create-mobile-shell {
    width: 100%;
    height: 100dvh;
    max-height: none;
    grid-template-rows: auto minmax(0, 1fr);
    background: var(--atende-color-background);
  }

  .appointment-create-mobile-dialog .modal-shell > header {
    min-height: 7.75rem;
    align-items: center;
    padding: calc(env(safe-area-inset-top) + var(--atende-space-4)) var(--atende-space-4) var(--atende-space-5);
    border: 0;
    color: var(--atende-color-on-dark);
    background: linear-gradient(145deg, var(--atende-color-brand-deep), color-mix(in srgb, var(--atende-color-brand-deep) 58%, var(--atende-color-brand)));
  }

  .appointment-create-mobile-dialog #modal-brand {
    color: color-mix(in srgb, var(--atende-color-on-dark) 72%, transparent);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
  }

  .appointment-create-mobile-dialog #modal-title {
    color: var(--atende-color-on-dark);
    font-size: 1.25rem;
    font-weight: 850;
    letter-spacing: 0.01em;
  }

  .appointment-create-mobile-dialog #modal-close {
    border-color: color-mix(in srgb, var(--atende-color-on-dark) 30%, transparent);
    color: var(--atende-color-on-dark);
    background: color-mix(in srgb, var(--atende-color-on-dark) 9%, transparent);
  }

  .appointment-create-mobile-dialog #modal-body {
    padding: 0;
    background: var(--atende-color-background);
  }

  .appointment-create-mobile-dialog .appointment-create-mobile-empty-state {
    align-content: start;
    gap: var(--atende-space-3);
    margin: var(--atende-space-3);
    padding: var(--atende-space-4);
    border: 1px solid var(--atende-color-border);
    border-radius: var(--atende-radius-card);
    background: var(--atende-color-surface);
    box-shadow: var(--atende-shadow-md);
  }

  .appointment-create-mobile-dialog #modal-body .appointment-create-mobile-empty-state [data-modal-actions] {
    position: static;
    margin: var(--atende-space-2) 0 0;
    padding: var(--atende-space-4) 0 0;
    border-top: 1px solid var(--atende-color-border);
    background: transparent;
    box-shadow: none;
  }

  .appointment-create-mobile-dialog #create-client-from-appointment {
    border-color: var(--atende-color-brand);
    background: var(--atende-color-brand);
  }

  .appointment-create-mobile-dialog #create-client-from-appointment:hover,
  .appointment-create-mobile-dialog #create-client-from-appointment:active {
    border-color: var(--atende-color-brand-strong);
    background: var(--atende-color-brand-strong);
  }

  .appointment-create-mobile-form {
    min-height: 100%;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto;
    gap: 0;
  }

  .appointment-create-mobile-fields {
    min-width: 0;
    display: grid;
    align-content: start;
  }

  .appointment-create-stepper {
    position: sticky;
    z-index: 4;
    top: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--atende-space-1);
    padding: var(--atende-space-3) var(--atende-space-3) var(--atende-space-2);
    border-bottom: 1px solid var(--atende-color-border);
    background: color-mix(in srgb, var(--atende-color-surface) 96%, transparent);
    box-shadow: var(--atende-shadow-sm);
    backdrop-filter: blur(0.8rem);
  }

  .appointment-create-stepper button {
    position: relative;
    min-width: 0;
    min-height: 3.5rem;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: calc(var(--atende-space-1) / 2);
    padding: var(--atende-space-1);
    border: 0;
    border-radius: var(--atende-radius-sm);
    color: var(--atende-color-muted);
    background: transparent;
    font-size: 0.6875rem;
    line-height: 1.2;
    cursor: pointer;
  }

  .appointment-create-stepper button::after {
    content: "";
    position: absolute;
    top: 1.35rem;
    left: calc(50% + 1rem);
    width: calc(100% - 1.65rem);
    height: 0.1rem;
    background: var(--atende-color-border);
  }

  .appointment-create-stepper button:last-child::after {
    display: none;
  }

  .appointment-create-stepper button > span {
    position: relative;
    z-index: 1;
    width: 1.6rem;
    height: 1.6rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--atende-color-border-strong);
    border-radius: 50%;
    color: var(--atende-color-muted);
    background: var(--atende-color-surface);
    font-size: 0.68rem;
    font-weight: 800;
  }

  .appointment-create-stepper button.is-active,
  .appointment-create-stepper button.is-complete {
    color: var(--atende-color-brand-strong);
  }

  .appointment-create-stepper button.is-active > span,
  .appointment-create-stepper button.is-complete > span {
    border-color: var(--atende-color-brand);
    color: var(--atende-color-on-dark);
    background: var(--atende-color-brand);
  }

  .appointment-create-stepper button.is-complete::after {
    background: var(--atende-color-brand);
  }

  .appointment-create-stepper button:disabled {
    opacity: 0.68;
    cursor: default;
  }

  .appointment-create-progress {
    margin: 0;
    padding: var(--atende-space-3) var(--atende-space-4) 0;
    color: var(--atende-color-brand-strong);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .appointment-create-step {
    min-width: 0;
    display: grid;
    gap: var(--atende-space-3);
    padding: var(--atende-space-3) var(--atende-space-3) var(--atende-space-5);
  }

  .appointment-create-step[hidden] {
    display: none;
  }

  .appointment-create-step-heading {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    align-items: center;
    gap: var(--atende-space-3);
    padding: 0 var(--atende-space-2);
  }

  .appointment-create-step-heading small,
  .appointment-create-step-heading h3,
  .appointment-create-step-heading p {
    display: block;
  }

  .appointment-create-step-heading small {
    color: var(--atende-color-brand);
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: 0.08em;
  }

  .appointment-create-step-heading h3 {
    margin: var(--atende-space-1) 0 0;
    color: var(--atende-color-brand-deep);
    font-size: 1.05rem;
    line-height: 1.2;
  }

  .appointment-create-step-heading h3:focus-visible {
    border-radius: var(--atende-radius-sm);
    outline: 0.2rem solid var(--atende-focus-ring);
    outline-offset: 0.12rem;
  }

  .appointment-create-step-heading h3[tabindex="-1"]:focus {
    outline: none;
  }

  .appointment-create-step-heading p {
    margin: var(--atende-space-1) 0 0;
    color: var(--atende-color-muted);
    font-size: 0.72rem;
    line-height: 1.4;
  }

  .appointment-create-card {
    min-width: 0;
    display: grid;
    gap: var(--atende-space-4);
    padding: var(--atende-space-4);
    border: 1px solid var(--atende-color-border);
    border-radius: var(--atende-radius-card);
    background: var(--atende-color-surface);
    box-shadow: var(--atende-shadow-md);
  }

  .appointment-create-card .operation-helper {
    padding: var(--atende-space-3);
    border-radius: var(--atende-radius-sm);
    color: var(--atende-color-muted);
    background: var(--atende-color-surface-soft);
    font-size: 0.72rem;
  }

  .appointment-create-card .operation-field {
    gap: var(--atende-space-2);
  }

  .appointment-create-card .operation-field label,
  .appointment-create-card .form-label {
    color: var(--atende-color-text);
    font-size: 0.75rem;
    font-weight: 750;
  }

  .appointment-create-card .operation-field small {
    color: var(--atende-color-muted);
    font-size: 0.7rem;
  }

  .appointment-create-card .operation-grid {
    grid-template-columns: 1fr;
    gap: var(--atende-space-3);
  }

  .appointment-create-card :where(.form-control, input:not([type="checkbox"]), textarea) {
    min-height: 3.25rem;
    border-color: var(--atende-color-border-strong);
    border-radius: var(--atende-radius-md);
    background: var(--atende-color-surface);
    font-size: 1rem;
  }

  .appointment-create-card textarea.form-control {
    min-height: 7rem;
  }

  .appointment-create-services-card .appointment-service-selector {
    gap: var(--atende-space-3);
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .appointment-create-services-card .appointment-service-selector > p {
    margin: var(--atende-space-1) 0 0;
  }

  .appointment-create-services-card .appointment-service-options {
    max-height: none;
    grid-template-columns: 1fr;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .appointment-create-services-card .appointment-service-option,
  .appointment-create-services-card .appointment-service-selection {
    border-color: var(--atende-color-border);
    border-radius: var(--atende-radius-md);
    background: var(--atende-color-surface-soft);
  }

  .appointment-create-services-card .appointment-service-selection {
    padding: var(--atende-space-3);
  }

  .appointment-create-card .appointment-recurrence-card {
    margin: 0;
    border-color: var(--atende-color-border);
    background: var(--atende-color-surface-soft);
  }

  .appointment-create-review {
    gap: var(--atende-space-3);
  }

  .appointment-create-review #appointment-create-review-content {
    display: grid;
    gap: var(--atende-space-3);
  }

  .appointment-create-review .appointment-mobile-services .establishment-mobile-section-head {
    padding-inline: var(--atende-space-2);
  }

  .appointment-create-mobile-form > #operation-feedback:not(:empty) {
    padding: 0 var(--atende-space-3) var(--atende-space-3);
  }

  .appointment-create-mobile-dialog #modal-body .appointment-create-mobile-actions {
    position: sticky;
    z-index: 6;
    bottom: 0;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--atende-space-2);
    margin: 0;
    padding: var(--atende-space-3) var(--atende-space-3) calc(var(--atende-space-3) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--atende-color-border);
    background: color-mix(in srgb, var(--atende-color-surface) 97%, transparent);
    box-shadow: 0 -0.5rem 1.4rem color-mix(in srgb, var(--atende-color-brand-deep) 10%, transparent);
    backdrop-filter: blur(0.8rem);
  }

  .appointment-create-mobile-actions button {
    min-width: 0;
    min-height: 3.35rem;
    border-radius: var(--atende-radius-md);
  }

  .appointment-create-mobile-actions .primary {
    border-color: var(--atende-color-brand-deep);
    color: var(--atende-color-on-dark);
    background: linear-gradient(145deg, var(--atende-color-brand-deep), var(--atende-color-brand-strong));
  }

  .establishment-bootstrap .establishment-availability-card {
    overflow: visible;
  }

  .establishment-bootstrap.establishment-availability-page {
    padding-bottom: calc(5rem + env(safe-area-inset-bottom));
  }

  .establishment-bootstrap .establishment-availability-actions {
    position: fixed;
    z-index: 44;
    inset-inline: 0;
    bottom: calc(var(--establishment-mobile-nav-height) + env(safe-area-inset-bottom));
    padding-bottom: calc(var(--atende-space-3) + env(safe-area-inset-bottom));
    box-shadow: 0 -0.5rem 1rem color-mix(in srgb, var(--atende-color-brand-deep) 8%, transparent);
  }
}

@media (max-width: 23.75rem) {
  .content.container-fluid {
    padding-inline: var(--atende-space-2);
  }

  .topbar.establishment-shell-topbar {
    padding-inline: var(--atende-space-3);
  }

  .content :where(.stats, .stat-grid, .dashboard-stats, .client-summary-grid, .pending-summary) {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .mobile-navigation,
  dialog {
    scroll-behavior: auto;
    transition: none;
  }
}
.appointment-mobile-status.appointment-status-no_show {
  color: var(--atende-color-danger);
  background: var(--atende-color-danger-soft);
}