/* CSS Mobile extraído de show-modern.blade.php */
@media (max-width: 1200px) {
  .quadra-show-page .main { flex-direction: column; }
  .quadra-show-page .painel-lateral { width: 100%; min-width: 0; position: static; margin-top: 32px; }
}
@media (max-width: 900px) {
  .quadra-show-page main { flex-direction: column !important; gap:18px !important; align-items:stretch !important; }
  .quadra-show-page section, .quadra-show-page aside { width:100% !important; min-width:0 !important; max-width:100vw !important; margin:0 auto 14px auto !important; }
  .quadra-show-page .painel-lateral { padding:18px 6px !important; }
  .quadra-show-page .horarios-table { padding:18px 0 18px 0 !important; }
  .quadra-show-page .horario-btn-disp { width:46vw !important; margin-bottom:10px !important; font-size:1.12rem !important; }
  .quadra-show-page .quadra-label, .quadra-show-page .quadra-1, .quadra-show-page .quadra-2, .quadra-show-page .quadra-3, .quadra-show-page .quadra-4 { font-size:1rem !important; }
}
.quadra-show-page aside.sidebar-desktop { display: none !important; }
.quadra-show-page main { width: 100vw !important; max-width: 100vw !important; margin: 0 !important; }
.quadra-show-page body > div[style*="display: flex"] { display: block !important; }

@media (max-width: 700px) {
  .quadra-show-page :root {
    --mobile-top-offset: calc(72px + env(safe-area-inset-top));
  }

  .quadra-show-page nav {
    position: sticky;
    top: 0;
    z-index: 3001;
  }

  .quadra-show-page .sidebar-desktop { display: none !important; }
  .quadra-show-page #sidebar-toggle {
    display: block !important;
    position: fixed;
    top: calc(var(--mobile-top-offset) + 6px);
    left: 14px;
    z-index: 3002;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 13px;
    font-size: 1.25rem;
    box-shadow: 0 2px 8px rgba(30,41,59,0.08);
  }
  .quadra-show-page #sidebar-admin-mobile {
    position: fixed;
    top: var(--mobile-top-offset);
    left: 0;
    width: 100vw;
    max-width: 100vw;
    height: calc(100vh - var(--mobile-top-offset));
    z-index: 2000;
    background: #f8fafc;
    box-shadow: 0 2px 24px rgba(30,41,59,0.13);
    padding: 22px 14px 18px 14px;
    overflow-y: auto;
    border-radius: 0 18px 18px 0;
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(.4,0,.2,1);
  }
  .quadra-show-page #sidebar-admin-mobile.open {
    transform: translateX(0);
  }
  .quadra-show-page #sidebar-admin-mobile #sidebar-admin {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  .quadra-show-page #sidebar-overlay-mobile {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: transparent;
    z-index: 1999;
  }
  .quadra-show-page #sidebar-overlay-mobile.active {
    display: block;
  }
  .quadra-show-page main { width: 100vw !important; max-width: 100vw !important; margin: 0 !important; }

  .quadra-show-page .form-uxui {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 18px 14px 18px 14px !important;
    border-radius: 14px;
    box-sizing: border-box;
  }

  .quadra-show-page .form-uxui .form-row {
    display: block !important;
    gap: 0 !important;
    margin-bottom: 12px !important;
  }

  .quadra-show-page .form-uxui label {
    display: block;
    margin-bottom: 6px;
  }

  .quadra-show-page .form-uxui input,
  .quadra-show-page .form-uxui select,
  .quadra-show-page .form-uxui textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .quadra-show-page .form-uxui .dias-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .quadra-show-page .form-uxui .dias-grid label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 10px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
  }

  .quadra-show-page .form-uxui .dias-grid input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 auto;
  }

  .quadra-show-page .form-uxui .actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 16px !important;
  }

  .quadra-show-page .form-uxui button[type="submit"],
  .quadra-show-page .form-uxui .cancel {
    width: 100% !important;
    text-align: center;
  }

  .quadra-show-page .form-uxui-recorrente {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 18px 14px 18px 14px !important;
    border-radius: 14px;
    box-sizing: border-box;
  }

  .quadra-show-page .form-uxui-recorrente .form-row {
    display: block !important;
    gap: 0 !important;
    margin-bottom: 12px !important;
  }

  .quadra-show-page .form-uxui-recorrente label {
    display: block;
    margin-bottom: 6px;
  }

  .quadra-show-page .form-uxui-recorrente input,
  .quadra-show-page .form-uxui-recorrente select,
  .quadra-show-page .form-uxui-recorrente textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .quadra-show-page .form-uxui-recorrente .dias-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .quadra-show-page .form-uxui-recorrente .dias-grid label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 10px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
  }

  .quadra-show-page .form-uxui-recorrente .dias-grid input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 auto;
  }

  .quadra-show-page .form-uxui-recorrente .actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 16px !important;
  }

  .quadra-show-page .form-uxui-recorrente button[type="submit"],
  .quadra-show-page .form-uxui-recorrente .cancel {
    width: 100% !important;
    text-align: center;
  }

  .quadra-show-page .reservas-toolbar {
    gap: 12px !important;
    margin-bottom: 18px !important;
  }

  .quadra-show-page .reservas-toolbar-actions {
    width: 100% !important;
    align-items: stretch !important;
  }

  .quadra-show-page .reservas-filter-form {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  .quadra-show-page .reservas-filter-form label {
    margin: 0 !important;
  }

  .quadra-show-page .reservas-filter-form select,
  .quadra-show-page .reservas-filter-form button {
    width: 100% !important;
  }

  .quadra-show-page .reservas-new-btn {
    width: 100% !important;
    min-width: 0 !important;
  }

  .quadra-show-page .quadras-toolbar {
    width: 100% !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .quadra-show-page .quadras-new-btn {
    width: 100% !important;
    text-align: center;
  }

  .quadra-show-page .quadras-table,
  .quadra-show-page .quadras-table thead,
  .quadra-show-page .quadras-table tbody,
  .quadra-show-page .quadras-table tr,
  .quadra-show-page .quadras-table th,
  .quadra-show-page .quadras-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .quadra-show-page .quadras-table thead {
    display: none !important;
  }

  .quadra-show-page .quadras-table tr {
    margin-bottom: 14px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 8px rgba(30,41,59,0.07);
    padding: 10px 10px;
  }

  .quadra-show-page .quadras-table td {
    padding: 8px 6px !important;
    border: none !important;
    font-size: 1.02rem !important;
    text-align: left !important;
  }

  .quadra-show-page .quadras-table td[data-label]:before {
    content: attr(data-label) ': ';
    font-weight: 700;
    color: #2563eb;
    display: inline-block;
    min-width: 96px;
  }

  .quadra-show-page .quadras-table td:last-child {
    padding-bottom: 12px !important;
  }

  .quadra-show-page .config-aparencia-page {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    padding-top: 10px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .quadra-show-page .config-aparencia-page,
  .quadra-show-page .config-aparencia-page * {
    box-sizing: border-box;
    max-width: 100%;
  }

  .quadra-show-page .config-aparencia-page form {
    width: 100% !important;
  }

  .quadra-show-page .config-aparencia-page input,
  .quadra-show-page .config-aparencia-page select,
  .quadra-show-page .config-aparencia-page textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .quadra-show-page .config-aparencia-page input[type="file"] {
    display: block;
    width: 100% !important;
  }

  .quadra-show-page .config-aparencia-page img {
    max-width: 100% !important;
    height: auto !important;
    max-height: 260px;
    object-fit: contain;
  }

  .quadra-show-page .config-aparencia-page button[type="submit"] {
    width: 100% !important;
    padding: 14px 0 !important;
    border-radius: 10px;
  }

  .quadra-show-page .quadra-edit-page {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .quadra-show-page .quadra-edit-page,
  .quadra-show-page .quadra-edit-page * {
    box-sizing: border-box;
    max-width: 100%;
  }
}

.quadra-show-page .sidebar-admin-wrapper {
  display: none !important;
}

.quadra-show-page .header-title { font-size: 2rem; }
.quadra-show-page .main { gap: 12px; }
.quadra-show-page .painel-lateral { padding: 18px 8px; }

.quadra-show-page footer,
.quadra-show-page .site-footer,
.quadra-show-page .footer,
.quadra-show-page .rodape,
.quadra-show-page .footer-bottom,
.quadra-show-page .footer-main {
  background: #070707 !important;
  color: #fff;
}

.quadra-show-page footer *,
.quadra-show-page .site-footer *,
.quadra-show-page .footer *,
.quadra-show-page .rodape *,
.quadra-show-page .footer-bottom *,
.quadra-show-page .footer-main * {
  background: transparent;
}