/*
 * Conecta Frontend Shell v2.58.8 — Mobile Composition Foundation.
 *
 * The rules are opt-in through cc-mobile-* classes and data attributes. They
 * deliberately avoid generic selectors, module roots and !important so that
 * domain modules can adopt the contract incrementally without reviving the
 * legacy cascade conflict that this release is intended to contain.
 */

@media (max-width: 767px) {
  body.cc-shell--portal .cc-mobile-stack {
    display: grid;
    gap: var(--cc-shell-mobile-surface-gap, 12px);
    min-width: 0;
  }

  body.cc-shell--portal .cc-mobile-stack > * {
    min-width: 0;
  }

  body.cc-shell--portal .cc-mobile-action-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
  }

  body.cc-shell--portal .cc-mobile-action-row--end {
    justify-content: flex-end;
  }

  body.cc-shell--portal .cc-mobile-button {
    min-height: var(--cc-shell-mobile-control-height, 44px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
    padding: 0 14px;
    border: 1px solid var(--cc-shell-border, rgba(78,110,50,.16));
    border-radius: 999px;
    background: var(--cc-shell-surface, #fff);
    color: var(--cc-shell-primary, #4E6E32);
    font: inherit;
    font-size: var(--cc-shell-mobile-body-size, 15px);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    cursor: pointer;
    box-sizing: border-box;
  }

  body.cc-shell--portal .cc-mobile-button--primary {
    border-color: var(--cc-shell-primary, #4E6E32);
    background: var(--cc-shell-primary, #4E6E32);
    color: #fff;
  }

  body.cc-shell--portal .cc-mobile-button--compact {
    min-height: var(--cc-shell-mobile-control-height-compact, 40px);
    padding-inline: 12px;
    font-size: 14px;
  }

  body.cc-shell--portal .cc-mobile-button--block {
    width: 100%;
  }

  /* Shared mobile filter/disclosure. The panel stays fully visible until JS
   * has initialized, which preserves a safe no-JS fallback. */
  body.cc-shell--portal [data-cc-mobile-disclosure] {
    min-width: 0;
  }

  body.cc-shell--portal [data-cc-mobile-disclosure-toggle] {
    min-height: var(--cc-shell-mobile-control-height, 44px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
    padding: 0 14px;
    border: 1px solid var(--cc-shell-border, rgba(78,110,50,.16));
    border-radius: 999px;
    background: var(--cc-shell-surface, #fff);
    color: var(--cc-shell-primary, #4E6E32);
    font: inherit;
    font-size: var(--cc-shell-mobile-body-size, 15px);
    line-height: 1.2;
    cursor: pointer;
    box-sizing: border-box;
  }

  body.cc-shell--portal [data-cc-mobile-disclosure-toggle]::after {
    content: "⌄";
    display: inline-block;
    font-size: 18px;
    line-height: 1;
    transform: translateY(-1px);
    transition: transform .18s ease;
  }

  body.cc-shell--portal [data-cc-mobile-disclosure].is-open [data-cc-mobile-disclosure-toggle]::after {
    transform: rotate(180deg) translateY(1px);
  }

  body.cc-shell--portal [data-cc-mobile-disclosure].cc-mobile-disclosure--ready:not(.is-open) [data-cc-mobile-disclosure-panel] {
    display: none;
  }

  body.cc-shell--portal [data-cc-mobile-disclosure].is-open [data-cc-mobile-disclosure-panel] {
    display: grid;
    gap: var(--cc-shell-mobile-surface-gap, 12px);
    margin-top: 12px;
  }

  /* For intentionally wide content (calendars, spreadsheets and canvases),
   * modules may opt in to a visible, touch-friendly horizontal region instead
   * of forcing desktop layouts to shrink into unreadable columns. */
  body.cc-shell--portal .cc-mobile-scroll-x {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  body.cc-shell--portal .cc-mobile-scroll-x > * {
    min-width: max-content;
  }

  body.cc-shell--portal .cc-mobile-scroll-x[data-cc-mobile-scroll-fit] > * {
    min-width: 100%;
  }

  body.cc-shell--portal .cc-mobile-sheet {
    max-width: 100%;
    max-height: var(--cc-shell-mobile-sheet-max-height, 76dvh);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: var(--cc-shell-mobile-sheet-radius, 20px) var(--cc-shell-mobile-sheet-radius, 20px) 0 0;
  }

  body.cc-shell--portal .cc-mobile-text {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  body.cc-shell--portal .cc-mobile-input {
    min-height: var(--cc-shell-mobile-control-height, 44px);
    font-size: 16px;
  }
}