/* Gestor IPTV 2.0.9 - camada visual responsiva e moderna */
:root {
  --gestor-radius-sm: 10px;
  --gestor-radius: 16px;
  --gestor-radius-lg: 22px;
  --gestor-shadow: 0 10px 30px rgba(31, 38, 135, .08);
}

.content-wrapper .container-fluid,
.content-wrapper .container-xxl {
  max-width: 1680px;
}

.card,
.accordion-item,
.modal-content {
  border-radius: var(--gestor-radius) !important;
}

.card {
  border: 1px solid rgba(110, 120, 150, .12);
  box-shadow: var(--gestor-shadow);
  overflow: visible;
}

.btn,
.form-control,
.form-select,
.input-group-text {
  border-radius: var(--gestor-radius-sm);
}

.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }

.btn {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
}

.btn-icon { width: 38px; min-width: 38px; padding: 0; }
.btn-sm.btn-icon { width: 34px; min-width: 34px; min-height: 34px; }

.modal-content { overflow: hidden; }
.modal-header,
.modal-footer { gap: .5rem; flex-wrap: wrap; }
.modal-footer > * { margin: 0 !important; }

.gestor-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.gestor-page-header h4 { font-weight: 700; margin-bottom: .25rem; }
.gestor-page-actions { display: flex; gap: .65rem; align-items: center; flex-wrap: wrap; }

.gestor-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.gestor-stat-card {
  background: var(--bs-card-bg, #fff);
  border: 1px solid rgba(110,120,150,.12);
  border-radius: var(--gestor-radius);
  padding: 1rem 1.1rem;
  min-height: 104px;
  box-shadow: var(--gestor-shadow);
  display: flex;
  align-items: center;
  gap: .9rem;
}
.gestor-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(105,108,255,.12);
  color: var(--bs-primary, #696cff);
  font-size: 1.45rem;
  flex: 0 0 auto;
}
.gestor-stat-value { font-size: 1.45rem; font-weight: 750; line-height: 1; }
.gestor-stat-label { font-size: .82rem; opacity: .72; margin-top: .35rem; }

.gestor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}
.gestor-toolbar-group { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }

.fixed-table-toolbar {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  flex-wrap: wrap;
  min-height: 46px;
}
.fixed-table-toolbar .search { float: none !important; margin: 0 0 0 auto !important; }
.fixed-table-toolbar .columns,
.fixed-table-toolbar .bs-bars { float: none !important; margin: 0 !important; }
.fixed-table-toolbar .columns { display: flex; gap: .4rem; flex-wrap: wrap; }
.fixed-table-toolbar .search .form-control { min-width: 220px; }

.bootstrap-table .fixed-table-container,
.bootstrap-table .fixed-table-body { border-radius: 0 0 var(--gestor-radius) var(--gestor-radius); }
.bootstrap-table .table { margin-bottom: 0; vertical-align: middle; }
.bootstrap-table .table > thead > tr > th { white-space: nowrap; font-weight: 650; }
.bootstrap-table .table > tbody > tr > td { vertical-align: middle; }
.bootstrap-table .fixed-table-pagination { padding: .75rem 1rem .25rem; }
.bootstrap-table .pagination-detail,
.bootstrap-table .pagination { margin-top: .5rem !important; margin-bottom: .5rem !important; }

.client-actions,
.server-actions { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }

/* Ações sempre acessíveis na listagem de clientes no desktop */
@media (min-width: 768px) {
  .client-table-shell .fixed-table-body { overflow-x: auto; }
  .client-table-shell table th[data-field="actions"],
  .client-table-shell table td:last-child {
    position: sticky;
    right: 0;
    z-index: 4;
    background: var(--bs-card-bg, #fff) !important;
    box-shadow: -10px 0 14px -14px rgba(0,0,0,.45);
  }
  .client-table-shell table th[data-field="actions"] { z-index: 6; }
}

.gestor-api-panel {
  border: 1px dashed rgba(105,108,255,.35);
  border-radius: 14px;
  padding: 1rem;
  background: rgba(105,108,255,.045);
}
.gestor-api-panel summary { cursor: pointer; font-weight: 650; }

.server-load-error,
.client-load-error { display: none; }

/* Bootstrap Table card view: visual limpo no celular */
.bootstrap-table .card-view {
  display: flex;
  gap: .6rem;
  padding: .32rem 0;
  align-items: flex-start;
}
.bootstrap-table .card-view .title {
  flex: 0 0 40%;
  max-width: 40%;
  font-weight: 650;
  opacity: .75;
}
.bootstrap-table .card-view .value {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}

@media (max-width: 991.98px) {
  .gestor-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  .content-wrapper .container-fluid,
  .content-wrapper .container-xxl { padding-left: .85rem !important; padding-right: .85rem !important; }
  .gestor-page-header { align-items: stretch; }
  .gestor-page-actions { width: 100%; }
  .gestor-page-actions .btn { flex: 1 1 140px; }
  .gestor-stat-grid { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .gestor-stat-card { min-height: 86px; padding: .8rem; }
  .gestor-stat-icon { width: 40px; height: 40px; border-radius: 12px; }
  .gestor-stat-value { font-size: 1.15rem; }
  .gestor-toolbar,
  .gestor-toolbar-group { width: 100%; align-items: stretch; }
  .gestor-toolbar-group > .btn,
  .gestor-toolbar-group > .form-select { flex: 1 1 140px; }
  .fixed-table-toolbar { align-items: stretch; }
  .fixed-table-toolbar .search,
  .fixed-table-toolbar .search .form-control { width: 100% !important; min-width: 0; }
  .fixed-table-toolbar .columns { width: 100%; justify-content: flex-end; }
  .bootstrap-table .fixed-table-pagination { display: flex; flex-direction: column; gap: .4rem; }
  .bootstrap-table .pagination-detail,
  .bootstrap-table .pagination { width: 100%; float: none !important; }
  .bootstrap-table .pagination { justify-content: center; }
  .bootstrap-table .fixed-table-container .table tbody tr { border-bottom: 1px solid rgba(110,120,150,.14); }
  .bootstrap-table .fixed-table-container .table tbody td { padding: .7rem .75rem !important; }
  .client-actions,
  .server-actions { flex-wrap: wrap; }
  .modal-dialog { margin: .55rem; }
  .modal-content.p-3,
  .modal-content.p-md-5 { padding: .4rem !important; }
  .modal-body { padding: 1rem; }
  .modal-footer .btn { flex: 1 1 120px; }
  .input-group { flex-wrap: nowrap; }
}

@media (max-width: 480px) {
  .gestor-stat-grid { grid-template-columns: 1fr; }
  .gestor-page-actions .btn { flex-basis: 100%; }
  .gestor-toolbar-group > .btn,
  .gestor-toolbar-group > .form-select { flex-basis: 100%; }
  .bootstrap-table .card-view .title { flex-basis: 36%; max-width: 36%; font-size: .78rem; }
}

/* ===== Gestor 2.0.9: modais sempre interativos e responsivos ===== */
/*
 * Tabelas AJAX podem renderizar o modal dentro de uma célula com stacking
 * context próprio. O JS global move o modal para o body durante a exibição;
 * estes z-index garantem que o conteúdo fique sempre acima do backdrop.
 */
.modal {
  z-index: 2050 !important;
}
.modal-backdrop {
  z-index: 2040 !important;
}

/* Modal grande nunca pode ultrapassar a viewport nem esconder o botão Salvar. */
.modal .modal-dialog {
  max-height: calc(100dvh - 1rem);
  margin-top: .5rem;
  margin-bottom: .5rem;
}
.modal .modal-content {
  max-height: calc(100dvh - 1rem);
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
}
.modal .modal-header {
  flex: 0 0 auto;
}
.modal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.modal .modal-footer {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
}
.modal .form-control,
.modal .form-select,
.modal textarea,
.modal button,
.modal a {
  pointer-events: auto !important;
}

/* Os modais "simple" do template têm os botões dentro do body. Mantemos
   espaço suficiente no final para Salvar/Cancelar ficarem fáceis de tocar. */
.modal-simple .modal-body > form,
.modal .modal-body > form {
  padding-bottom: .35rem;
}

@media (max-width: 767.98px) {
  .modal .modal-dialog {
    width: auto;
    max-width: none;
    max-height: calc(100dvh - .5rem);
    margin: .25rem;
  }
  .modal .modal-content {
    max-height: calc(100dvh - .5rem);
    border-radius: 14px !important;
  }
  .modal .modal-body {
    padding: .9rem !important;
  }
  .modal .text-center.mb-4 {
    margin-bottom: 1rem !important;
    padding-right: 1.75rem;
  }
  .modal .text-center.mb-4 h3 {
    font-size: 1.25rem;
  }
  .modal .col-12.text-center:last-child,
  .modal form > .col-12.text-center:last-child {
    position: sticky;
    bottom: -.9rem;
    z-index: 3;
    display: flex;
    gap: .55rem;
    padding: .8rem 0 .9rem;
    background: var(--bs-modal-bg, var(--bs-body-bg, #fff));
    border-top: 1px solid rgba(110,120,150,.14);
  }
  .modal .col-12.text-center:last-child .btn,
  .modal form > .col-12.text-center:last-child .btn {
    flex: 1 1 0;
    margin: 0 !important;
  }
}


/* ===== Gestor 2.0.9: modal de edição com scroll garantido ===== */
.gestor-edit-modal .modal-dialog {
  height: calc(100dvh - 1rem);
  max-height: calc(100dvh - 1rem);
}
.gestor-edit-modal .modal-content {
  height: 100%;
  max-height: 100%;
  min-height: 0;
}
.gestor-edit-modal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: scroll !important;
  scrollbar-gutter: stable;
  padding-bottom: 1.25rem;
}
.gestor-edit-modal .modal-header,
.gestor-edit-modal .modal-footer {
  flex: 0 0 auto;
  background: var(--bs-modal-bg, var(--bs-body-bg, #fff));
}
.gestor-edit-modal .gestor-sticky-modal-footer {
  box-shadow: 0 -8px 18px rgba(0,0,0,.08);
}
@media (max-width: 767.98px) {
  .gestor-edit-modal .modal-dialog {
    height: calc(100dvh - .5rem);
    max-height: calc(100dvh - .5rem);
  }
  .gestor-edit-modal .modal-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
}

/* ===== Hotfix 2.0.13: rolagem garantida no modal Editar Cliente ===== */
.gestor-edit-modal .modal-dialog {
  margin: .5rem auto;
  width: min(1100px, calc(100vw - 1rem));
  max-width: calc(100vw - 1rem);
  height: calc(100dvh - 1rem) !important;
  max-height: calc(100dvh - 1rem) !important;
}
.gestor-edit-modal .modal-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden !important;
}
.gestor-edit-modal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
  padding-bottom: 5.5rem !important;
}
.gestor-edit-modal .modal-footer,
.gestor-edit-modal .gestor-sticky-modal-footer {
  position: sticky;
  bottom: 0;
  z-index: 4;
  background: var(--bs-modal-bg, var(--bs-body-bg, #fff));
  border-top: 1px solid rgba(110,120,150,.14);
  box-shadow: 0 -10px 22px rgba(0,0,0,.12);
}
.gestor-edit-modal .modal-body::-webkit-scrollbar {
  width: 10px;
}
.gestor-edit-modal .modal-body::-webkit-scrollbar-thumb {
  background: rgba(116, 90, 255, .45);
  border-radius: 999px;
}
@media (max-width: 767.98px) {
  .gestor-edit-modal .modal-dialog {
    width: calc(100vw - .5rem);
    max-width: calc(100vw - .5rem);
    height: calc(100dvh - .5rem) !important;
    max-height: calc(100dvh - .5rem) !important;
    margin: .25rem auto;
  }
  .gestor-edit-modal .modal-body {
    padding: 1rem;
    padding-bottom: 6.5rem !important;
  }
  .gestor-edit-modal .modal-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
  }
}