/* ============================================================
   RESPONSIVE.CSS — LegacyC7
   Breakpoints:
     xs:  < 320px  (Nokia, telas muito pequenas)
     sm:  320–575px (celular pequeno)
     md:  576–767px (celular grande)
     lg:  768–991px (tablet retrato)
     xl:  992–1199px (tablet paisagem / notebook pequeno)
     2xl: 1200–1399px (notebook)
     3xl: ≥ 1400px  (desktop / ultrawide)
   ============================================================ */

/* ============================================================
   BASE — vale pra todos os tamanhos
   ============================================================ */
html, body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

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

/* Evita tabelas quebrarem layout */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* Modais sempre ocupam largura segura */
.modal-dialog {
    margin: 0.5rem auto;
}

/* ============================================================
   3XL — Desktop / Ultrawide ≥ 1400px
   ============================================================ */
@media (min-width: 1400px) {
    .container-fluid {
        max-width: 1600px;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .sidebar {
        min-width: 220px;
        max-width: 240px;
    }

    .stat-card {
        padding: 1.75rem;
    }
}

/* ============================================================
   2XL — Notebook 1200–1399px
   ============================================================ */
@media (max-width: 1399px) {
    .container-fluid {
        max-width: 100%;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* ============================================================
   XL — Tablet landscape / Notebook pequeno 992–1199px
   ============================================================ */
@media (max-width: 1199px) {
    .sidebar {
        min-width: 180px;
        max-width: 200px;
    }

    .stat-card {
        padding: 1.25rem;
        min-height: 100px;
    }

    .dashboard-header {
        padding: 0.75rem 0;
    }
}

/* ============================================================
   LG — Tablet retrato 768–991px
   ============================================================ */
@media (max-width: 991.98px) {
    /* Esconde sidebar lateral, exibe bottom nav */
    .sidebar {
        display: none !important;
    }

    .bottom-nav {
        display: flex !important;
    }

    /* Dá espaço pro bottom nav fixo */
    .dashboard-container,
    .dashboard-body main,
    body.dashboard-body {
        padding-bottom: 0 !important;
    }

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

    /* Conteúdo ocupa tudo sem sidebar */
    .col-lg-9,
    .col-md-8 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    .col-lg-3,
    .col-md-4 {
        display: none !important;
    }

    /* Header */
    .dashboard-header .container-fluid {
        flex-wrap: nowrap;
    }

    /* Cards em grid 2 colunas */
    .row.g-3 > [class*="col-md-6"],
    .row.g-3 > [class*="col-sm-6"] {
        width: 50%;
    }

    /* Modais */
    .modal-dialog {
        max-width: 90vw;
    }

    /* Tabelas — esconde colunas menos importantes */
    .table th:nth-child(4),
    .table td:nth-child(4) {
        display: none;
    }
}

/* ============================================================
   MD — Celular grande 576–767px
   ============================================================ */
@media (max-width: 767.98px) {
    :root {
        font-size: 14px;
    }

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

    /* Bottom nav mais compacto */
    .bottom-nav {
        height: 65px;
        padding: 0 8px;
    }

    .bottom-nav-item {
        font-size: 0.7rem;
        padding: 0.4rem 0.25rem;
    }

    .bottom-nav-item i {
        font-size: 1.1rem;
        margin-bottom: 0.2rem;
    }

    /* Header */
    .dashboard-header {
        padding: 0.6rem 0;
    }

    .user-greeting {
        display: none !important;
    }

    .logo h1 {
        font-size: 1.3rem !important;
    }

    /* Cards stat em 2 colunas */
    .stat-card {
        padding: 1rem;
        min-height: auto;
        margin-bottom: 0.75rem;
    }

    .stat-value-modern,
    .stat-card h3 {
        font-size: 1.4rem !important;
    }

    .stat-icon-modern {
        width: 42px !important;
        height: 42px !important;
        font-size: 1.1rem !important;
        border-radius: 10px !important;
    }

    /* Títulos */
    h1, .h1 { font-size: 1.6rem !important; }
    h2, .h2 { font-size: 1.4rem !important; }
    h3, .h3 { font-size: 1.2rem !important; }
    h4, .h4 { font-size: 1.1rem !important; }
    h5, .h5 { font-size: 1rem !important; }
    h6, .h6 { font-size: 0.9rem !important; }

    /* Botões */
    .btn {
        padding: 0.55rem 0.9rem !important;
        font-size: 0.85rem !important;
    }

    .btn-lg {
        padding: 0.7rem 1.2rem !important;
        font-size: 0.95rem !important;
    }

    /* Cards genéricos */
    .dashboard-card,
    .card {
        border-radius: 12px !important;
        margin-bottom: 0.75rem !important;
    }

    .card-body {
        padding: 1rem !important;
    }

    .card-header,
    .card-footer {
        padding: 0.75rem 1rem !important;
    }

    /* Ferramentas (tool cards) */
    .tool-card-ultra {
        padding: 1.25rem !important;
        border-radius: 16px !important;
    }

    .ultra-title {
        font-size: 1.1rem !important;
    }

    /* Inputs */
    .form-control,
    .form-select {
        font-size: 0.9rem !important;
        padding: 0.6rem 0.85rem !important;
    }

    /* Tabelas */
    .table th,
    .table td {
        padding: 0.6rem 0.5rem !important;
        font-size: 0.8rem !important;
    }

    .table th:nth-child(3),
    .table td:nth-child(3) {
        display: none;
    }

    /* Modais */
    .modal-dialog {
        max-width: 95vw;
        margin: 0.5rem auto;
    }

    .modal-body-modern,
    .modal-body {
        padding: 1.25rem 1rem !important;
    }

    /* Grid 2 colunas para stats */
    .row.g-3 > [class*="col-"],
    .row.g-4 > [class*="col-"] {
        padding: 0.35rem !important;
    }

    /* Badges */
    .badge {
        font-size: 0.75rem !important;
        padding: 0.35rem 0.5rem !important;
    }

    /* Nav tabs */
    .nav-tabs .nav-link {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.82rem !important;
    }

    /* Modal resultado de likes */
    .modal-result-modern {
        --bs-modal-width: 95vw;
    }

    .result-stat-value {
        font-size: 1.4rem !important;
    }

    .result-stat-value-highlight {
        font-size: 1.6rem !important;
    }

    .result-player-name {
        font-size: 1.1rem !important;
    }

    /* Vencimento VIP */
    .days-remaining {
        font-size: 1.75rem !important;
    }

    .expiration-date {
        font-size: 1rem !important;
    }
}

/* ============================================================
   SM — Celular pequeno 320–575px
   ============================================================ */
@media (max-width: 575.98px) {
    :root {
        font-size: 13px;
    }

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

    /* Cards stat — 1 coluna em celular pequeno */
    .row.g-3 > [class*="col-md-6"],
    .row.g-3 > [class*="col-sm-6"],
    .row.g-4 > [class*="col-md-6"],
    .row.g-4 > [class*="col-sm-6"] {
        width: 100% !important;
        flex: 0 0 100% !important;
    }

    .stat-card {
        flex-direction: row;
        padding: 0.85rem 1rem;
        min-height: 75px;
    }

    .stat-value-modern {
        font-size: 1.3rem !important;
    }

    .stat-label-modern,
    .stat-card p {
        font-size: 0.75rem !important;
    }

    /* Bottom nav */
    .bottom-nav {
        height: 60px;
    }

    .bottom-nav-item span {
        display: block; /* Garante que o texto apareça se houver espaço */
        font-size: 0.65rem;
    }

    .bottom-nav-item i {
        font-size: 1.3rem;
        margin-bottom: 0;
    }

    /* Botão principal de like */
    #sendLikeBtn,
    .btn-send-like {
        width: 100% !important;
        font-size: 1rem !important;
        padding: 0.8rem !important;
    }

    /* Input de UID */
    #uidInput,
    input[name="uid"] {
        font-size: 1rem !important;
        padding: 0.75rem !important;
    }

    /* Tabela — só 2 colunas visíveis */
    .table th:nth-child(2),
    .table td:nth-child(2) {
        display: none;
    }

    /* Card ferramenta */
    .tool-card-ultra {
        padding: 1rem !important;
    }

    .ultra-icon-box {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.1rem !important;
    }

    /* Tabs — scroll horizontal se não couber */
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .nav-tabs .nav-item {
        flex-shrink: 0;
    }

    .nav-tabs .nav-link {
        white-space: nowrap;
        font-size: 0.78rem !important;
        padding: 0.45rem 0.65rem !important;
    }

    /* Modal */
    .modal-content {
        border-radius: 16px !important;
    }

    .modal-header {
        padding: 0.85rem 1rem !important;
    }

    h1, .h1 { font-size: 1.4rem !important; }
    h2, .h2 { font-size: 1.25rem !important; }
    h3, .h3 { font-size: 1.1rem !important; }
}

/* ============================================================
   XS — Nokia / telas muito pequenas < 320px
   ============================================================ */
@media (max-width: 319px) {
    :root {
        font-size: 12px;
    }

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

    /* Stats em coluna única, mais compactos */
    .stat-card {
        padding: 0.7rem 0.75rem;
        min-height: 60px;
    }

    .stat-icon-modern {
        width: 34px !important;
        height: 34px !important;
        font-size: 0.9rem !important;
    }

    .stat-value-modern {
        font-size: 1.1rem !important;
    }

    /* Bottom nav apenas ícones */
    .bottom-nav {
        height: 55px;
        padding: 0 4px;
    }

    .bottom-nav-item i {
        font-size: 1.2rem;
    }

    /* Cards */
    .card-body {
        padding: 0.75rem !important;
    }

    .dashboard-card {
        border-radius: 10px !important;
        margin-bottom: 0.5rem !important;
    }

    /* Botões */
    .btn {
        font-size: 0.8rem !important;
        padding: 0.5rem 0.75rem !important;
    }

    /* Título do site */
    .logo h1 {
        font-size: 1.1rem !important;
    }

    /* Modal full width */
    .modal-dialog {
        max-width: 100vw;
        margin: 0;
    }

    .modal-content {
        border-radius: 12px 12px 0 0 !important;
    }

    h1, .h1 { font-size: 1.2rem !important; }
    h2, .h2 { font-size: 1.1rem !important; }
    h3, .h3 { font-size: 1rem !important; }
    h5, .h5 { font-size: 0.9rem !important; }
}

/* ============================================================
   TABLET RETRATO especial — 768–1024px
   (iPad, Galaxy Tab, etc)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {
    .sidebar {
        display: none !important;
    }

    .bottom-nav {
        display: flex !important;
        height: 68px;
    }

    .bottom-nav-item {
        font-size: 0.75rem;
    }

    .bottom-nav-item i {
        font-size: 1.3rem;
    }

    .dashboard-container {
        padding-bottom: 85px !important;
    }

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

    /* Stats em 3 colunas */
    .row.g-3 > [class*="col-md-6"] {
        width: 50%;
    }

    .stat-card {
        padding: 1.25rem;
    }

    .modal-dialog {
        max-width: 80vw;
    }

    /* Ajuste da ferramenta de likes */
    .tool-card-ultra {
        padding: 1.5rem !important;
    }
}

/* ============================================================
   LANDSCAPE — celular deitado
   ============================================================ */
@media (max-width: 767.98px) and (orientation: landscape) {
    .dashboard-container,
    body.dashboard-body {
        padding-bottom: 60px !important;
    }

    .bottom-nav {
        height: 52px;
    }

    .bottom-nav-item span {
        display: none;
    }

    .bottom-nav-item i {
        margin-bottom: 0;
        font-size: 1.2rem;
    }

    /* Stat cards em linha */
    .stat-card {
        min-height: 70px;
        padding: 0.75rem 1rem;
    }
}

/* ============================================================
   SAFE AREA — iPhone com notch / Dynamic Island
   ============================================================ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .bottom-nav {
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
        height: calc(65px + env(safe-area-inset-bottom));
    }

    .dashboard-container,
    body.dashboard-body {
        padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    }
}