/**
 * Estilos de Responsividade Global
 * Sistema CÉOS
 */

/* ==========================================================================
   Breakpoints:
   - Mobile: < 576px
   - Tablet: 576px - 992px
   - Desktop: > 992px
   ========================================================================== */

/* Reset e Base */
* {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

/* Prevent horizontal overflow on mobile */
@media (max-width: 768px) {
    body {
        overflow-x: hidden;
        width: 100%;
    }
}

/* ==========================================================================
   Mobile First - Base (< 576px)
   ========================================================================== */

/* Sidebar Responsive - handled by admin.css and aluno.css per panel */
/* This section intentionally left minimal to avoid conflicts */

/* Tabelas Responsivas */
@media (max-width: 768px) {
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 600px;
    }

    /* Alternativa: Cards em mobile */
    .table-to-cards tbody tr {
        display: block;
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 15px;
        background: white;
    }

    .table-to-cards thead {
        display: none;
    }

    .table-to-cards td {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border: none;
        border-bottom: 1px solid #eee;
    }

    .table-to-cards td::before {
        content: attr(data-label);
        font-weight: bold;
        margin-right: 10px;
    }

    .table-to-cards td:last-child {
        border-bottom: none;
    }
}

/* Formulários Responsivos */
@media (max-width: 576px) {
    .form-row,
    .row {
        flex-direction: column;
    }

    .form-row > .form-group,
    .row > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 15px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px; /* Previne zoom em iOS */
    }

    /* Botões em mobile (exceto header) */
    .btn:not(.header-btn):not(.header-lang-btn),
    button:not(.header-lang-btn):not(.carousel-prev):not(.carousel-next) {
        width: 100%;
        margin-bottom: 10px;
    }

    .btn-group {
        flex-direction: column;
    }

    .btn-group .btn {
        border-radius: 6px !important;
        margin: 5px 0;
    }
}

/* Cards Responsivos */
@media (max-width: 768px) {
    .card {
        margin-bottom: 15px;
    }

    .card-body {
        padding: 15px;
    }

    .card-header,
    .card-footer {
        padding: 12px 15px;
    }

    /* Grid de Cards */
    .cards-grid,
    .stat-cards {
        grid-template-columns: 1fr !important;
    }
}

/* Header Responsivo */
@media (max-width: 768px) {
    header h1 {
        font-size: 1.5rem;
    }

    header p {
        font-size: 0.875rem;
    }

    .page-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .page-title .actions {
        width: 100%;
    }

    .page-title .actions .btn {
        width: 100%;
    }
}

/* Navegação Mobile */
@media (max-width: 992px) {
    .navbar-nav {
        flex-direction: column;
    }

    .nav-tabs,
    .nav-pills {
        flex-wrap: wrap;
    }

    .nav-tabs .nav-link,
    .nav-pills .nav-link {
        flex: 1 1 auto;
        text-align: center;
    }
}

/* Modal Responsivo */
@media (max-width: 576px) {
    .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }

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

    .modal-body {
        padding: 15px;
    }

    .modal-footer {
        flex-direction: column;
    }

    .modal-footer .btn {
        width: 100%;
        margin: 5px 0;
    }
}

/* Estatísticas Responsivas */
@media (max-width: 576px) {
    .stat-box,
    .stat-card {
        padding: 15px;
    }

    .stat-box h2,
    .stat-card h3 {
        font-size: 1.75rem;
    }

    .stat-box p,
    .stat-card p {
        font-size: 0.875rem;
    }
}

/* Alertas Responsivos */
@media (max-width: 576px) {
    .alert {
        padding: 12px 15px;
        font-size: 0.875rem;
    }

    .alert h4 {
        font-size: 1rem;
    }
}

/* Paginação Responsiva */
@media (max-width: 576px) {
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }

    .pagination .page-link {
        padding: 8px 12px;
        font-size: 0.875rem;
    }
}

/* Gráficos Responsivos */
@media (max-width: 768px) {
    .chart-container {
        height: 250px !important;
    }
}

/* ==========================================================================
   Utilitários de Visibilidade
   ========================================================================== */

/* Esconder em mobile */
@media (max-width: 576px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Esconder em tablet */
@media (min-width: 577px) and (max-width: 992px) {
    .hide-tablet {
        display: none !important;
    }
}

/* Esconder em desktop */
@media (min-width: 993px) {
    .hide-desktop {
        display: none !important;
    }
}

/* Mostrar apenas em mobile */
@media (min-width: 577px) {
    .show-mobile-only {
        display: none !important;
    }
}

/* ==========================================================================
   Ajustes específicos do Sistema CÉOS
   ========================================================================== */

/* Home - Cards de eventos */
@media (max-width: 768px) {
    .eventos-grid {
        grid-template-columns: 1fr !important;
    }

    .evento-card {
        margin-bottom: 20px;
    }

    .evento-card .card-img-top {
        height: 180px;
        object-fit: cover;
    }
}

/* Formulário de Inscrição */
@media (max-width: 768px) {
    .inscription-form .form-row {
        flex-direction: column;
    }

    .price-display {
        font-size: 1.25rem;
    }
}

/* Programação */
@media (max-width: 768px) {
    .programacao-dias {
        flex-wrap: wrap;
    }

    .dia-tab {
        flex: 1 1 auto;
        text-align: center;
        margin-bottom: 5px;
    }

    .atividade-item {
        flex-direction: column;
    }

    .atividade-item > div:last-child {
        margin-top: 10px;
        width: 100%;
    }

    .atividade-item .btn {
        width: 100%;
    }
}

/* Área do Avaliador */
@media (max-width: 768px) {
    .trabalho-card {
        padding: 15px;
    }

    .trabalho-card .d-flex {
        flex-direction: column;
    }

    .trabalho-card .btn {
        width: 100%;
        margin-top: 10px;
    }
}

/* Círculos animados na Home */
@media (max-width: 768px) {
    .circles .circle {
        width: 120px !important;
        height: 120px !important;
        font-size: 12px !important;
        padding: 15px !important;
    }

    .circles .circle i {
        font-size: 22px !important;
    }
}

@media (max-width: 480px) {
    .circles .circle {
        width: 100px !important;
        height: 100px !important;
        font-size: 11px !important;
        padding: 10px !important;
    }

    .circles .circle i {
        font-size: 18px !important;
    }
}

/* Tabela de planos */
@media (max-width: 768px) {
    .plans-table {
        font-size: 0.75rem;
    }

    .plans-table th,
    .plans-table td {
        padding: 8px 5px;
    }
}

/* ==========================================================================
   Public Header - Mobile Responsive
   ========================================================================== */

/* Tablet: reduce padding and hide center title */
@media (max-width: 768px) {
    .site-header,
    header {
        padding: 10px 15px !important;
        box-sizing: border-box !important;
    }

    /* Hide the absolute-positioned center title on mobile - it overlaps everything */
    .header-center {
        display: none !important;
    }

    /* Reduce gap between header-right items and allow wrapping */
    .header-right {
        gap: 8px !important;
        flex-wrap: wrap !important;
    }

    /* Smaller buttons */
    .header-btn {
        padding: 6px 12px !important;
        font-size: 13px !important;
        white-space: nowrap;
    }

    /* Hide greeting text on smaller screens */
    .header-user-greeting {
        display: none !important;
    }

    /* Smaller logo on mobile */
    .header-logo img {
        height: 36px !important;
    }

    /* Language button smaller */
    .header-lang-btn {
        padding: 4px 8px !important;
        font-size: 12px !important;
    }

    /* Reduce spacer height since header is shorter */
    .site-header + div[style*="height: 90px"],
    header + div[style*="height: 90px"] {
        height: 60px !important;
    }
}

/* Small mobile: icon-only buttons */
@media (max-width: 480px) {
    .site-header,
    header {
        padding: 8px 10px !important;
    }

    /* Hide button text, show only icons */
    .header-btn-text {
        display: none !important;
    }

    .header-btn {
        padding: 8px !important;
        border-radius: 50% !important;
        width: 36px !important;
        height: 36px !important;
        justify-content: center !important;
    }

    .header-logo img {
        height: 30px !important;
    }

    .header-right {
        gap: 5px !important;
    }
}

/* ==========================================================================
   Home Page - Mobile Responsive
   ========================================================================== */

@media (max-width: 768px) {
    /* Circles section - stay horizontal but smaller */
    .circles {
        gap: 10px !important;
        margin: 20px 10px !important;
        flex-wrap: wrap;
        justify-content: center !important;
    }

    /* Events grid: 2 columns on tablet, not 4 */
    .eventos {
        grid-template-columns: repeat(2, 1fr) !important;
        padding: 15px !important;
        margin-left: 10px !important;
        margin-right: 10px !important;
        gap: 15px !important;
    }

    /* Search bar: more compact */
    .search-bar {
        padding: 0 15px !important;
    }

    .search-input {
        width: 70% !important;
    }

    /* Carousel smaller width */
    .carrossel-banner {
        width: 95% !important;
    }

    .carousel img {
        width: 100% !important;
    }

    /* Feature table */
    .tabela-comparacao table {
        table-layout: fixed !important;
        width: 100% !important;
    }

    .tabela-comparacao th:first-child,
    .tabela-comparacao td:first-child {
        width: 70% !important;
        text-align: left !important;
    }

    .tabela-comparacao th:last-child,
    .tabela-comparacao td:last-child {
        width: 30% !important;
        text-align: center !important;
    }

    .tabela-comparacao th,
    .tabela-comparacao td {
        padding: 10px 8px !important;
        font-size: 13px !important;
    }

    .tabela-comparacao td i.fa-check-circle {
        font-size: 18px !important;
        color: #22c55e !important;
    }

    .comparacao-eventos {
        padding: 20px 10px !important;
        margin: 15px auto !important;
    }

    .carrossel-banner {
        margin: 15px auto !important;
    }

    /* Platform fee card */
    .quadrante .valor {
        font-size: 36px !important;
    }
}

@media (max-width: 480px) {
    /* Events grid: single column on small mobile */
    .eventos {
        grid-template-columns: 1fr !important;
        padding: 10px !important;
        margin-left: 5px !important;
        margin-right: 5px !important;
    }

    /* Search bar: stack vertically */
    .search-bar {
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .search-input {
        width: 90% !important;
    }

    .search-button {
        width: 90% !important;
        margin-left: 0 !important;
    }

    /* Comparison section */
    .comparacao-eventos {
        padding: 15px 10px !important;
        margin: 10px auto !important;
    }

    .quadrante .valor {
        font-size: 28px !important;
    }

    /* Reduce empty space from carousel when empty */
    .carrossel-banner:empty,
    .carrossel-banner:not(:has(img)) {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .carrossel-banner {
        margin: 10px 0 !important;
    }
}

/* ==========================================================================
   Events Listing Page (eventos/) - Mobile Responsive
   ========================================================================== */

@media (max-width: 768px) {
    /* Page header padding */
    .page-header {
        padding: 25px 0 !important;
    }

    .page-header h1 {
        font-size: 1.5rem !important;
    }

    /* Search box adjustments */
    .search-box {
        padding: 15px !important;
    }

    .search-box .row {
        flex-direction: column !important;
    }

    .search-box .col-md-6,
    .search-box .col-md-3 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Event cards - 1 column on tablet */
    .col-md-6.col-lg-4.evento-item {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Event card button area */
    .event-body .d-flex.gap-2 {
        flex-direction: column;
    }

    .event-body .d-flex.gap-2 .btn,
    .event-body .d-flex.gap-2 .btn-inscrito,
    .event-body .d-flex.gap-2 a {
        width: 100% !important;
        text-align: center;
    }
}

/* ==========================================================================
   Event Details Page (detalhes_evento/) - Mobile Responsive
   ========================================================================== */

@media (max-width: 768px) {
    /* Hero section mobile */
    .evento-hero {
        min-height: 260px !important;
        border-radius: 0 !important;
    }

    .hero-title {
        font-size: 24px !important;
    }

    .hero-content {
        padding: 24px 16px !important;
    }

    /* Event details container */
    .evento-detalhes {
        margin: 10px auto 30px auto !important;
    }

    /* Stats grid */
    .stats {
        grid-template-columns: 1fr !important;
    }

    /* Speakers grid */
    .grid-speakers {
        grid-template-columns: 1fr !important;
    }

    /* Speaker card stack */
    .speaker-card {
        flex-direction: column !important;
        text-align: center !important;
    }

    /* Logos grid */
    .logos-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Section padding */
    .section {
        padding: 16px 12px !important;
    }

    .section-title {
        font-size: 18px !important;
    }

    /* Banner and social wrapper */
    .banner-social-wrapper {
        flex-direction: column !important;
    }

    .social-icons {
        flex-direction: row !important;
        justify-content: center !important;
        gap: 15px !important;
    }

    /* Programacao items */
    .programacao-item {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }

    .programacao-header {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .programacao-actions {
        width: 100% !important;
    }

    .programacao-actions .btn-programacao {
        flex: 1;
        justify-content: center;
    }

    /* Event info */
    .evento-info {
        flex-direction: column !important;
    }

    /* Carousel messages */
    .carrossel-container {
        max-width: 100% !important;
    }

    .carrossel-item p {
        font-size: 15px !important;
        max-width: 95% !important;
        padding: 15px !important;
    }

    /* Page title */
    .page-title-text {
        font-size: 22px !important;
    }

    /* Inscription button full width */
    .cta-section .btn-inscricao,
    .hero-cta .btn-inscricao {
        width: 100% !important;
        max-width: 320px;
    }
}

@media (max-width: 480px) {
    .evento-hero {
        min-height: 220px !important;
    }

    .hero-title {
        font-size: 20px !important;
    }

    .logos-grid {
        grid-template-columns: 1fr !important;
    }

    .stats {
        gap: 10px !important;
    }

    .stat-card {
        padding: 12px !important;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .sidebar,
    .no-print,
    .btn,
    button {
        display: none !important;
    }

    .content {
        margin-left: 0 !important;
        padding: 0 !important;
    }

    body {
        background: white !important;
        color: black !important;
    }

    a[href]::after {
        content: " (" attr(href) ")";
    }
}