/* ROGGA mobile responsive layer */
@media (max-width: 820px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  body {
    min-width: 0 !important;
    background: #070b12 !important;
  }

  .layout {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  aside {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(84vw, 330px) !important;
    max-width: min(84vw, 330px) !important;
    height: 100dvh !important;
    z-index: 10020 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: translateX(-105%) !important;
    transition: transform .22s ease !important;
    box-shadow: 24px 0 70px rgba(0,0,0,.45) !important;
  }

  body.rogga-mobile-menu-open aside {
    transform: translateX(0) !important;
  }

  main {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 76px 10px 18px !important;
    overflow-x: hidden !important;
  }

  body.rogga-mobile-menu-open {
    overflow: hidden !important;
  }

  .rogga-mobile-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10010;
    display: none;
    background: rgba(0,0,0,.58);
    backdrop-filter: blur(2px);
  }

  body.rogga-mobile-menu-open .rogga-mobile-backdrop {
    display: block;
  }

  .rogga-mobile-topbar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 10000;
    height: 62px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    background: #070b12;
    border-bottom: 1px solid rgba(148, 163, 184, .18);
    box-shadow: 0 10px 34px rgba(0,0,0,.25);
  }

  .rogga-mobile-menu-btn {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 12px;
    background: #0b111c;
    color: #fff;
    font-size: 24px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
  }

  .rogga-mobile-title-wrap {
    min-width: 0;
    flex: 1;
  }

  .rogga-mobile-title {
    color: #fff;
    font-weight: 950;
    font-size: 17px;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .rogga-mobile-subtitle {
    display: block;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  aside .rogga-mobile-close {
    position: absolute;
    top: 18px;
    right: 16px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 10px;
    background: rgba(255,255,255,.08);
    color: #fff;
    font-size: 22px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  aside nav,
  aside ul,
  aside a {
    max-width: 100% !important;
  }

  .top,
  header,
  section.card,
  .card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  section.card,
  .card {
    padding: 16px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  h1 {
    font-size: 27px !important;
    line-height: 1.08 !important;
    letter-spacing: -.03em !important;
    word-break: break-word;
  }

  h2 {
    font-size: 22px !important;
    line-height: 1.15 !important;
    word-break: break-word;
  }

  p,
  small,
  label {
    max-width: 100%;
  }

  .grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  input,
  select,
  textarea,
  button {
    max-width: 100% !important;
  }

  input,
  select,
  textarea {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Tabela em cards no mobile */
  table.rogga-responsive-table {
    display: block !important;
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  table.rogga-responsive-table thead,
  table.rogga-responsive-table tbody,
  table.rogga-responsive-table tr,
  table.rogga-responsive-table th,
  table.rogga-responsive-table td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  table.rogga-responsive-table tr:first-child {
    display: none !important;
  }

  table.rogga-responsive-table tr {
    margin: 0 0 12px !important;
    padding: 10px !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
    border-radius: 14px !important;
    background: rgba(15, 23, 42, .28) !important;
  }

  table.rogga-responsive-table td {
    display: grid !important;
    grid-template-columns: 112px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
    padding: 8px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(148, 163, 184, .10) !important;
    overflow-wrap: anywhere !important;
  }

  table.rogga-responsive-table td:last-child {
    border-bottom: 0 !important;
  }

  table.rogga-responsive-table td::before {
    content: attr(data-label);
    color: #94a3b8;
    font-weight: 850;
    font-size: 12px;
    line-height: 1.25;
  }

  .orders-actions {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }

  .orders-icon-btn,
  table a.orders-icon-btn,
  table button.orders-icon-btn {
    width: 34px !important;
    min-width: 34px !important;
  }

  .orders-topbar {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .orders-new-btn,
  .vendors-new-btn {
    width: 100% !important;
  }

  .orders-modal-backdrop,
  .vendors-modal-backdrop {
    padding: 10px !important;
    align-items: flex-start !important;
  }

  .orders-modal,
  .vendors-modal {
    width: 100% !important;
    max-height: calc(100dvh - 20px) !important;
    border-radius: 16px !important;
  }

  .orders-modal-body,
  .vendors-modal-body {
    padding: 12px !important;
  }

  #mockupFrame {
    width: 100% !important;
    height: calc(100dvh - 82px) !important;
  }

  iframe {
    max-width: 100% !important;
  }

  .rogga-wa-layout {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 821px) {
  .rogga-mobile-topbar,
  .rogga-mobile-backdrop,
  .rogga-mobile-close {
    display: none !important;
  }
}


/* ROGGA FINAL SCOPED MOBILE FIX - 20260601 */
@media (max-width: 820px) {
  *,
  *::before,
  *::after {
    box-sizing: border-box !important;
  }

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .layout,
  main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  main {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  main > .card,
  main > section.card,
  .card {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .top {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
  }

  .top > div:first-child {
    min-width: 0 !important;
  }

  .logout-top {
    flex: 0 0 auto !important;
  }

  .sellers-head-compact,
  .orders-topbar-compact,
  .users-top-compact {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin-bottom: 12px !important;
  }

  .seller-create-btn,
  .orders-new-btn,
  .users-top-compact button {
    width: 100% !important;
  }

  .seller-list,
  .seller-card,
  .seller-card-form,
  .seller-card-form > div,
  .orders-actions {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .seller-card {
    overflow: hidden !important;
  }

  input,
  select,
  textarea,
  button,
  a.button {
    max-width: 100% !important;
  }

  table.rogga-responsive-table tr {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  table.rogga-responsive-table td {
    grid-template-columns: minmax(84px, 34%) minmax(0, 1fr) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  table.rogga-responsive-table td::before {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  /* Tema claro no mobile: o CSS mobile antigo forçava fundo escuro. */
  html:not(.rogga-dark):not(.dark-mode) body:not(.rogga-dark):not(.dark-mode) {
    background: #f3f6f8 !important;
    color: #0f172a !important;
  }

  html:not(.rogga-dark):not(.dark-mode) body:not(.rogga-dark):not(.dark-mode) .rogga-mobile-topbar {
    background: #ffffff !important;
    border-bottom-color: rgba(15, 23, 42, .10) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .10) !important;
  }

  html:not(.rogga-dark):not(.dark-mode) body:not(.rogga-dark):not(.dark-mode) .rogga-mobile-title {
    color: #0f172a !important;
  }

  html:not(.rogga-dark):not(.dark-mode) body:not(.rogga-dark):not(.dark-mode) .rogga-mobile-subtitle {
    color: #64748b !important;
  }

  html:not(.rogga-dark):not(.dark-mode) body:not(.rogga-dark):not(.dark-mode) .rogga-mobile-menu-btn {
    background: #eef3f7 !important;
    color: #0f172a !important;
  }

  html:not(.rogga-dark):not(.dark-mode) body:not(.rogga-dark):not(.dark-mode) section.card,
  html:not(.rogga-dark):not(.dark-mode) body:not(.rogga-dark):not(.dark-mode) .card,
  html:not(.rogga-dark):not(.dark-mode) body:not(.rogga-dark):not(.dark-mode) .seller-card,
  html:not(.rogga-dark):not(.dark-mode) body:not(.rogga-dark):not(.dark-mode) table.rogga-responsive-table tr {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, .10) !important;
  }

  html:not(.rogga-dark):not(.dark-mode) body:not(.rogga-dark):not(.dark-mode) input,
  html:not(.rogga-dark):not(.dark-mode) body:not(.rogga-dark):not(.dark-mode) select,
  html:not(.rogga-dark):not(.dark-mode) body:not(.rogga-dark):not(.dark-mode) textarea {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, .18) !important;
  }

  html:not(.rogga-dark):not(.dark-mode) body:not(.rogga-dark):not(.dark-mode) table.rogga-responsive-table td::before,
  html:not(.rogga-dark):not(.dark-mode) body:not(.rogga-dark):not(.dark-mode) .seller-meta,
  html:not(.rogga-dark):not(.dark-mode) body:not(.rogga-dark):not(.dark-mode) .muted {
    color: #64748b !important;
  }

  body.mockup-page main,
  body[data-page="mockup"] main {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  body.mockup-page #mockupFrame,
  body[data-page="mockup"] #mockupFrame {
    width: 100% !important;
    max-width: 100% !important;
    min-height: calc(100dvh - 72px) !important;
    border-radius: 12px !important;
  }
}