/* /public/assets/css/oikos-responsive.css
   Ajustes globales de responsividad para Oikosbook.
   No cambia lógica; solo mejora comportamiento en pantallas pequeñas. */

:root {
  --oikos-mobile-radius: 16px;
}

html {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  max-width: 100%;
  overflow-x: hidden;
}

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

.oikos-scroll-x,
.table-responsive,
.dataTables_wrapper,
.dt-container {
  max-width: 100%;
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-responsive > .table,
.table-responsive table,
.dt-container table,
.dataTables_wrapper table {
  margin-bottom: 0;
}

.dt-container,
.dataTables_wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.dt-container .dt-layout-row,
.dataTables_wrapper .row {
  min-width: 0;
}

.dt-buttons,
.dataTables_wrapper .dt-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.dt-buttons .btn,
.dataTables_wrapper .dt-buttons .btn {
  white-space: nowrap;
}

.modal-dialog {
  max-width: min(100% - 1rem, var(--bs-modal-width, 500px));
}

.modal-content {
  max-height: calc(100vh - 1rem);
}

.modal-body {
  overflow-y: auto;
}

.swal2-popup {
  width: min(100% - 1.5rem, 42rem) !important;
}

.offcanvas {
  max-width: min(88vw, 360px);
}

.oikos-impersonation-banner,
.oikos-broadcast-banner,
.alert,
.card,
.top-card,
.treasury-panel,
.panel {
  min-width: 0;
}

.card-header,
.modal-header,
.treasury-toolbar,
.billing-actions,
.hero-actions,
.actions-row,
.form-actions {
  min-width: 0;
}

.form-control,
.form-select,
.input-group,
.btn,
.dropdown-menu,
textarea {
  max-width: 100%;
}

.dropdown-menu {
  word-break: break-word;
}

@media (max-width: 991.98px) {
  .app-shell {
    display: block !important;
  }

  .content-wrapper {
    width: 100%;
  }

  .topbar .container-fluid {
    gap: .6rem;
  }

  .app-content {
    padding-left: .9rem !important;
    padding-right: .9rem !important;
  }

  .oikos-impersonation-banner {
    align-items: flex-start;
    flex-direction: column;
  }

  .oikos-impersonation-banner .btn {
    width: 100%;
  }

  .card-header,
  .treasury-toolbar,
  .panel > .d-flex,
  .hero .d-flex,
  .billing-title-row,
  .payment-title-row {
    flex-wrap: wrap;
  }

  .treasury-actions,
  .btn-toolbar,
  .dt-buttons {
    width: 100%;
  }
}

@media (max-width: 767.98px) {
  body {
    font-size: .95rem;
  }

  .brand-oikos {
    max-width: 138px !important;
  }

  .sidebar-toggle-btn {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px;
  }

  .account-trigger {
    padding: .3rem .4rem !important;
    gap: .45rem !important;
  }

  .account-trigger > span:first-child {
    display: none;
  }

  .account-avatar,
  .account-avatar img {
    height: 32px !important;
  }

  .app-content {
    padding: .75rem !important;
  }

  .section-title,
  .treasury-title,
  .auth-title,
  .section-title h1,
  h1 {
    overflow-wrap: anywhere;
  }

  .section-title,
  .treasury-title {
    font-size: clamp(1.35rem, 6vw, 1.8rem) !important;
  }

  .section-subtitle,
  .treasury-subtitle,
  .section-sub,
  .text-muted {
    overflow-wrap: anywhere;
  }

  .card,
  .top-card,
  .treasury-hero,
  .treasury-panel,
  .modal-content,
  .panel {
    border-radius: var(--oikos-mobile-radius) !important;
  }

  .modal-dialog {
    margin: .5rem auto;
  }

  .modal-header,
  .modal-footer {
    padding: .8rem .9rem;
  }

  .modal-body {
    padding: .9rem;
    max-height: calc(100vh - 150px);
  }

  .modal-footer {
    display: grid;
    grid-template-columns: 1fr;
    gap: .55rem;
  }

  .modal-footer > * {
    margin: 0 !important;
    width: 100%;
  }

  .btn,
  .form-control,
  .form-select {
    min-height: 42px;
  }

  .btn-sm {
    min-height: 38px;
  }

  .treasury-actions .btn,
  .card-header .btn,
  .panel .btn,
  .dt-buttons .btn,
  .billing-actions .btn,
  .hero-actions .btn {
    width: 100%;
  }

  .table-responsive table.table,
  .dt-container table,
  .dataTables_wrapper table {
    min-width: 680px;
  }

  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dt-container .dt-length,
  .dt-container .dt-search {
    width: 100%;
    text-align: left !important;
    margin-bottom: .45rem;
  }

  .dataTables_wrapper .dataTables_filter input,
  .dt-container .dt-search input {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .dataTables_wrapper .dataTables_paginate,
  .dt-container .dt-paging {
    overflow-x: auto;
    white-space: nowrap;
    width: 100%;
    padding-top: .4rem;
  }

  .dataTables_wrapper .dataTables_info,
  .dt-container .dt-info {
    white-space: normal !important;
  }

  .nav-tabs,
  .treasury-tabs {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }

  .nav-tabs .nav-link,
  .treasury-tabs .nav-link {
    white-space: nowrap;
  }
}

@media (max-width: 575.98px) {
  .topbar {
    padding-left: .75rem !important;
    padding-right: .75rem !important;
  }

  .brand-oikos {
    max-width: 122px !important;
  }

  .app-content {
    padding: .65rem !important;
  }

  .container,
  .container-fluid {
    padding-left: .75rem;
    padding-right: .75rem;
  }

  .row {
    --bs-gutter-x: .85rem;
  }

  .card-body,
  .card-header,
  .card-footer,
  .top-card,
  .treasury-panel,
  .panel {
    padding: .85rem !important;
  }

  .table-responsive table.table,
  .dt-container table,
  .dataTables_wrapper table {
    min-width: 620px;
  }

  .swal2-popup {
    padding: 1rem !important;
  }
}

@media print {
  html,
  body {
    overflow: visible !important;
  }

  .sidebar,
  .topbar,
  .offcanvas,
  .global-nav-spinner {
    display: none !important;
  }

  .app-content,
  .content-wrapper {
    padding: 0 !important;
    width: 100% !important;
  }
}