/* ==========================================================
   GERABOI • RESPONSIVE UI V2
   Camada aditiva sobre o tema atual.
   Mobile-first para operação em campo, tablet e desktop.
========================================================== */
:root {
    --gb-shell-max: 1440px;
    --gb-content-pad: clamp(12px, 2vw, 28px);
    --gb-header-h: 76px;
    --gb-bottom-nav-h: 70px;
    --gb-touch: 44px;
    --gb-surface: #fff;
    --gb-bg: #f4f2ef;
    --gb-border: rgba(20, 50, 54, .10);
    --gb-shadow: 0 8px 28px rgba(20, 50, 54, .08);
}

html { scroll-padding-top: calc(var(--gb-header-h) + 12px); }
body { background: var(--gb-bg) !important; }
main { min-width: 0; }

/* Shell fluido */
main > .container,
main > .container-fluid,
.dashboard-content,
.container-header {
    max-width: var(--gb-shell-max);
}

main > .container,
main > .container-fluid {
    padding-left: var(--gb-content-pad) !important;
    padding-right: var(--gb-content-pad) !important;
}

.dashboard-content {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--gb-border);
    box-shadow: var(--gb-shadow);
}

/* Header */
.bg-header { padding: .65rem var(--gb-content-pad); }
.app-header-inner { min-height: 58px; flex-wrap: nowrap; }
.header-right { flex-wrap: nowrap; }
.menu-toggle { flex: 0 0 var(--gb-touch); min-width: var(--gb-touch); min-height: var(--gb-touch); }

/* Controles touch */
button,
.btn,
.button-primary,
.button-secondary,
.button-outline-primary,
.button-outline-secondary,
.button-outline-success,
.button-outline-info,
.button-outline-warning,
.button-outline-danger,
.form-control,
.form-select,
.input-group-text {
    min-height: var(--gb-touch);
}

.form-control,
.form-select,
select,
textarea,
input { max-width: 100%; }
textarea.form-control { min-height: 110px; }

/* Cabeçalhos de página e barras de ação antigas */
.page,
.caixas,
.page-actions,
.toolbar,
.action-bar {
    min-width: 0;
}

.page {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.caixas,
.page-actions,
.toolbar,
.action-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.page-title { line-height: 1.15; }
.breadcrumb { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.breadcrumb::-webkit-scrollbar { display: none; }
.breadcrumb-item { flex: 0 0 auto; max-width: none !important; }

/* Cards */
.dashboard-cards {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
    gap: clamp(12px, 1.6vw, 20px) !important;
}
.dashboard-card,
.card,
.rebanho-card,
.pastagem_card { min-width: 0; }

/* Tabelas e DataTables */
.table-responsive,
.gb-table-scroll,
.dashboard-content:has(> table),
.dashboard-content:has(.dataTables_wrapper),
.dashboard-content:has(.dt-container) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table { width: 100% !important; margin-bottom: 0; }
.table th,
.table td { white-space: nowrap; }
.table td { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }

.dt-container,
.dataTables_wrapper { width: 100%; min-width: 0; }
.dt-container .dt-layout-row,
.dataTables_wrapper .row { gap: 10px; }
.dt-container select,
.dt-container input,
.dataTables_wrapper select,
.dataTables_wrapper input { min-height: 40px; }

/* Ações dentro de tabelas */
.table .btn,
.table a.button-primary,
.table a.button-outline-primary { min-width: 40px; min-height: 40px; }

/* Modais */
.modal-dialog { max-width: min(92vw, 720px); margin-left: auto; margin-right: auto; }
.modal-content { border: 0; border-radius: 18px; box-shadow: 0 18px 50px rgba(0,0,0,.18); }
.modal-header,
.modal-body,
.modal-footer { padding-left: clamp(16px, 2.5vw, 28px); padding-right: clamp(16px, 2.5vw, 28px); }

/* Offcanvas */
.custom-offcanvas { width: min(92vw, 390px) !important; }
.offcanvas-body { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.offcanvas-body .d-flex.flex-wrap.gap-3 { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px !important; }
.menu-icon-item { width: auto !important; min-width: 0; }
.icon-circle { width: 52px; height: 52px; }
.menu-icon-item small { display: block; overflow-wrap: anywhere; line-height: 1.2; }

/* Navegação inferior: somente mobile/tablet portrait */
.gb-mobile-nav { display: none; }

/* Filtros laterais */
.filter-sidebar { max-width: min(92vw, 390px); }

/* Tablet */
@media (min-width: 768px) and (max-width: 1199.98px) {
    :root { --gb-content-pad: 20px; }
    .dashboard-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .rebanho-card-container { flex: 0 0 50% !important; max-width: 50% !important; }
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl { max-width: calc(100vw - 48px); }
    .custom-offcanvas { width: 420px !important; }
    .offcanvas-body .d-flex.flex-wrap.gap-3 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Até tablet: header fixo e navegação inferior */
@media (max-width: 991.98px) {
    :root { --gb-header-h: 68px; }
    body { padding-bottom: calc(var(--gb-bottom-nav-h) + env(safe-area-inset-bottom)); }
    main { margin-top: var(--gb-header-h) !important; }
    .app-header { position: static !important; }
    .bg-header { position: fixed; inset: 0 0 auto 0; z-index: 1050; padding-top: max(.55rem, env(safe-area-inset-top)); }
    .logo-mobile { width: 142px !important; max-height: 44px; object-fit: contain; object-position: left center; }

    .gb-mobile-nav {
        position: fixed;
        z-index: 1040;
        left: 0;
        right: 0;
        bottom: 0;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        min-height: var(--gb-bottom-nav-h);
        padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
        background: rgba(20, 50, 54, .97);
        border-top: 1px solid rgba(255,255,255,.10);
        box-shadow: 0 -8px 24px rgba(0,0,0,.12);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }
    .gb-mobile-nav__item {
        border: 0;
        background: transparent;
        color: rgba(255,255,255,.82);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-width: 0;
        min-height: 54px;
        padding: 4px;
        font-size: .72rem;
        font-weight: 600;
        border-radius: 12px;
    }
    .gb-mobile-nav__item i,
    .gb-mobile-nav__item svg { width: 21px; height: 21px; }
    .gb-mobile-nav__item:hover,
    .gb-mobile-nav__item:focus-visible { color: #fff; background: rgba(255,255,255,.08); }
    .gb-mobile-nav__item.is-active { color: #fff; background: rgba(189,105,66,.22); }

    #scrollTopBtn { bottom: calc(var(--gb-bottom-nav-h) + 18px + env(safe-area-inset-bottom)) !important; }
    footer { padding-bottom: calc(15px + env(safe-area-inset-bottom)); }
}

/* Smartphone */
@media (max-width: 575.98px) {
    :root { --gb-content-pad: 12px; --gb-bottom-nav-h: 66px; }
    body { font-size: 15px; }
    main { margin-top: 64px !important; }
    .bg-header { padding-left: 12px; padding-right: 12px; }
    .app-header-inner { min-height: 48px; padding: 0 !important; }
    .logo-mobile { width: 126px !important; max-height: 38px; }

    .dashboard-content { padding: 14px !important; border-radius: 14px; }
    .dashboard-card,
    .card { padding: 16px; border-radius: 14px; }
    .dashboard-cards { grid-template-columns: 1fr !important; }

    .page { align-items: stretch !important; }
    .page-title { width: 100%; text-align: left !important; font-size: clamp(1.35rem, 7vw, 1.75rem) !important; margin-bottom: 0 !important; }
    .caixas,
    .page-actions,
    .toolbar,
    .action-bar { width: 100%; }
    .caixas > .btn,
    .caixas > button,
    .caixas > a,
    .page-actions > .btn,
    .page-actions > button,
    .page-actions > a { flex: 1 1 calc(50% - 6px); justify-content: center; }

    .breadcrumb { justify-content: flex-start !important; padding: .45rem .65rem !important; margin-bottom: .75rem; }

    /* Evita zoom automático do Safari ao focar campos */
    .form-control,
    .form-select,
    input,
    select,
    textarea { font-size: 16px !important; }

    .row { --bs-gutter-x: 1rem; }
    .form-group { margin-bottom: 12px; }

    .modal { padding: 0 !important; }
    .modal-dialog,
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        width: 100%;
        max-width: none;
        margin: 0;
        min-height: 100%;
        display: flex;
        align-items: flex-end;
    }
    .modal-content { width: 100%; max-height: 92dvh; border-radius: 20px 20px 0 0; overflow: hidden; }
    .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .modal-footer { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
    .modal-footer .btn { flex: 1 1 auto; }

    .custom-offcanvas { width: min(94vw, 360px) !important; }
    .offcanvas-body { padding-left: 16px !important; padding-right: 16px !important; }
    .offcanvas-body .d-flex.flex-wrap.gap-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* DataTables: controles em pilha e tabela rolável */
    .dt-container .dt-layout-row,
    .dataTables_wrapper .row { display: flex !important; flex-direction: column; align-items: stretch !important; }
    .dt-container .dt-layout-cell,
    .dataTables_wrapper [class*="col-"] { width: 100% !important; max-width: 100% !important; }
    .dt-container .dt-search,
    .dt-container .dt-length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length { text-align: left !important; width: 100%; }
    .dt-container .dt-search input,
    .dataTables_wrapper .dataTables_filter input { width: 100% !important; margin: 6px 0 0 !important; }
    .dt-container .dt-paging,
    .dataTables_wrapper .dataTables_paginate { overflow-x: auto; white-space: nowrap; padding-bottom: 4px; }
    .table th,
    .table td { padding: 10px !important; font-size: .88rem; }

    .filter-sidebar { width: min(94vw, 360px); }
}

/* Telas muito estreitas */
@media (max-width: 380px) {
    .gb-mobile-nav__item { font-size: .66rem; }
    .offcanvas-body .d-flex.flex-wrap.gap-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .caixas > .btn,
    .caixas > button,
    .caixas > a { flex-basis: 100%; }
}

/* Landscape baixo: economiza altura */
@media (max-height: 560px) and (orientation: landscape) and (max-width: 991.98px) {
    :root { --gb-bottom-nav-h: 58px; }
    .gb-mobile-nav { padding-top: 3px; padding-bottom: calc(3px + env(safe-area-inset-bottom)); }
    .gb-mobile-nav__item { min-height: 48px; flex-direction: row; font-size: .72rem; }
}

/* ==========================================================
   GERABOI V2.1 - Dashboard e listagens mobile-first
   ========================================================== */
.gb-dashboard-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding: 18px 20px;
  border: 1px solid var(--gb-border);
  border-radius: 18px;
  background: linear-gradient(135deg, var(--cor-esmeralda-escuro), var(--cor-esmeralda-claro));
  color: #fff;
  box-shadow: var(--gb-shadow-sm);
}
.gb-dashboard-hero__eyebrow { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; opacity: .72; }
.gb-dashboard-hero__title { margin: 2px 0 0; font-size: clamp(1.25rem, 2vw, 1.8rem); font-weight: 700; }
.gb-dashboard-hero__filter { min-width: min(360px, 100%); }
.gb-dashboard-hero__filter label { display:block; margin-bottom: 6px; font-size: .78rem; opacity: .78; }
.gb-dashboard-hero__filter .form-select { border: 0; box-shadow: none; }

.gb-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.gb-kpi {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--gb-border);
  border-radius: 16px;
  background: var(--gb-surface);
  box-shadow: var(--gb-shadow-sm);
}
.gb-kpi__top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.gb-kpi__icon { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:rgba(20,50,54,.08); color:var(--cor-esmeralda-escuro); }
.gb-kpi__icon svg { width:20px; height:20px; }
.gb-kpi__label { color:#667085; font-size:.8rem; font-weight:600; }
.gb-kpi__value { display:block; color:#172b2e; font-size:clamp(1.3rem, 2vw, 1.8rem); line-height:1.05; font-weight:750; overflow-wrap:anywhere; }
.gb-kpi__meta { display:block; margin-top:6px; color:#7b8288; font-size:.75rem; }
.gb-section-heading { display:flex; align-items:end; justify-content:space-between; gap:12px; margin:26px 0 12px; }
.gb-section-heading h2 { margin:0; font-size:1.05rem; font-weight:700; color:#203336; }
.gb-section-heading p { margin:3px 0 0; color:#7b8288; font-size:.8rem; }

.gb-mobile-cards { display:none; }
.gb-animal-card {
  padding: 14px;
  border: 1px solid var(--gb-border);
  border-radius: 16px;
  background: var(--gb-surface);
  box-shadow: var(--gb-shadow-sm);
}
.gb-animal-card + .gb-animal-card { margin-top: 10px; }
.gb-animal-card__head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.gb-animal-card__title { margin:0; font-size:1rem; font-weight:750; color:#172b2e; }
.gb-animal-card__subtitle { margin-top:2px; font-size:.78rem; color:#7b8288; }
.gb-animal-card__status { flex:0 0 auto; font-size:.72rem; font-weight:700; padding:5px 8px; border-radius:999px; background:#eef4f2; color:var(--cor-esmeralda-escuro); }
.gb-animal-card__grid { display:grid; grid-template-columns:1fr 1fr; gap:9px 12px; }
.gb-animal-card__field small { display:block; color:#8b9297; font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; }
.gb-animal-card__field span { display:block; margin-top:2px; color:#334246; font-size:.84rem; overflow-wrap:anywhere; }
.gb-animal-card__actions { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; padding-top:10px; border-top:1px solid #edf0ee; }
.gb-mobile-empty { padding:24px 14px; text-align:center; color:#7b8288; border:1px dashed var(--gb-border); border-radius:16px; background:var(--gb-surface); }

@media (max-width: 1199.98px) {
  .gb-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  .gb-dashboard-hero { align-items:stretch; flex-direction:column; padding:16px; }
  .gb-dashboard-hero__filter { min-width:0; width:100%; }
  .gb-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px; }
  .gb-kpi { padding:13px; }
}

@media (max-width: 575.98px) {
  .gb-desktop-table { display:none !important; }
  .gb-mobile-cards { display:block; }
  .gb-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gb-kpi__value { font-size:1.2rem; }
  .gb-kpi__icon { width:36px; height:36px; }
  .gb-animal-card__actions .btn, .gb-animal-card__actions a { min-height:40px; }
}

/* =========================================================
   GeraBoi V2.2 - Drawer de filtros
   ========================================================= */
.gb-filter-drawer.filter-sidebar {
    width: min(420px, 92vw);
    right: min(-420px, -92vw);
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    box-shadow: -18px 0 48px rgba(20,50,54,.18);
}
.gb-filter-drawer.filter-sidebar.open { right: 0; }
.gb-filter-header {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding: max(18px, env(safe-area-inset-top)) 20px 14px;
    border-bottom:1px solid var(--gb-border);
}
.gb-filter-title { margin:0; font-size:1.25rem; font-weight:800; color:var(--cor-esmeralda-escuro); }
.gb-filter-subtitle { margin:3px 0 0; color:#687779; font-size:.85rem; }
.gb-filter-close { width:44px; height:44px; border:0; border-radius:50%; background:#f3f5f4; display:grid; place-items:center; color:var(--cor-esmeralda-escuro); }
.gb-filter-body { flex:1; overflow:auto; padding:16px 20px 24px; overscroll-behavior:contain; }
.gb-filter-search { position:relative; margin-bottom:14px; }
.gb-filter-search svg { position:absolute; left:14px; top:50%; transform:translateY(-50%); width:19px; height:19px; color:#6d7c7d; pointer-events:none; }
.gb-filter-search input { width:100%; min-height:48px; padding:10px 42px; border:1px solid #d8dfdd; border-radius:14px; background:#f8faf9; outline:0; }
.gb-filter-search input:focus { border-color:var(--cor-esmeralda-claro); box-shadow:0 0 0 3px rgba(38,74,80,.10); background:#fff; }
.gb-filter-tools { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:4px 0 12px; }
.gb-filter-count { font-size:.82rem; font-weight:700; color:#687779; }
.gb-filter-link { border:0; background:transparent; color:var(--cor-esmeralda-claro); font-weight:750; padding:8px 0; }
.gb-filter-list { display:grid; gap:8px; }
.gb-filter-drawer .multi-option { min-height:48px; margin:0; padding:10px 12px; border:1px solid transparent; border-radius:12px; cursor:pointer; transition:.18s ease; }
.gb-filter-drawer .multi-option:hover { background:#f6f8f7; }
.gb-filter-drawer .multi-option:has(input:checked) { background:rgba(38,74,80,.07); border-color:rgba(38,74,80,.16); }
.gb-filter-drawer .multi-option input { width:21px; height:21px; flex:0 0 auto; margin:0; }
.gb-filter-drawer .multi-option span { font-size:.98rem; line-height:1.25; color:#263738; }
.gb-filter-drawer .multi-option--all { margin-bottom:4px; font-weight:750; }
.gb-filter-empty { display:none; padding:24px 8px; text-align:center; color:#758183; font-size:.9rem; }
.gb-filter-footer { display:grid; grid-template-columns: .8fr 1.4fr; gap:10px; padding:14px 20px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--gb-border); background:rgba(255,255,255,.96); }
.gb-filter-footer .apply-btn { margin:0; min-height:48px; border-radius:12px; }
.gb-filter-clear { min-height:48px; border:1px solid #cdd7d5; border-radius:12px; background:#fff; color:var(--cor-esmeralda-escuro); font-weight:750; }
body.gb-filter-open { overflow:hidden; }
@media (max-width:575.98px) {
    .gb-filter-drawer.filter-sidebar { width:min(360px, 88vw); right:min(-360px, -88vw); }
    .gb-filter-header { padding-left:16px; padding-right:16px; }
    .gb-filter-body, .gb-filter-footer { padding-left:16px; padding-right:16px; }
}