/**
 * RB Studio - Otimização Mobile
 * CSS para tornar o site responsivo e com aparência de app nativo
 */

/* ==================== CONFIGURAÇÕES GLOBAIS ==================== */

/* Remover zoom em inputs no iOS */
@media screen and (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
}

/* Prevenir seleção de texto em elementos interativos */
button, .btn, a.btn {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* ==================== CONTAINER E LAYOUT ==================== */

@media (max-width: 768px) {
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    .row {
        margin-left: -8px !important;
        margin-right: -8px !important;
    }
    
    .col, [class*="col-"] {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* ==================== CARDS E PAINÉIS ==================== */

@media (max-width: 768px) {
    .card {
        border-radius: 16px !important;
        margin-bottom: 16px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    }
    
    .card-header {
        padding: 16px !important;
        font-size: 18px !important;
        font-weight: 600 !important;
    }
    
    .card-body {
        padding: 16px !important;
    }
    
    .card-footer {
        padding: 12px 16px !important;
    }
}

/* ==================== BOTÕES ==================== */

@media (max-width: 768px) {
    .btn {
        min-height: 48px !important;
        padding: 12px 20px !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        border-radius: 12px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        touch-action: manipulation;
    }
    
    .btn-sm {
        min-height: 40px !important;
        padding: 8px 16px !important;
        font-size: 14px !important;
    }
    
    .btn-lg {
        min-height: 56px !important;
        padding: 16px 24px !important;
        font-size: 18px !important;
    }
    
    /* Botões full-width em mobile */
    .btn-block,
    .btn-primary:not(.btn-sm),
    .btn-success:not(.btn-sm),
    .btn-danger:not(.btn-sm) {
        width: 100% !important;
        margin-bottom: 12px;
    }
    
    /* Grupo de botões */
    .btn-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }
    
    .btn-group .btn {
        width: 100%;
        border-radius: 12px !important;
    }
}

/* ==================== FORMULÁRIOS ==================== */

@media (max-width: 768px) {
    .form-label {
        font-size: 15px !important;
        font-weight: 600 !important;
        margin-bottom: 8px !important;
        color: var(--bs-body-color);
    }
    
    .form-control,
    .form-select {
        min-height: 48px !important;
        padding: 12px 16px !important;
        font-size: 16px !important;
        border-radius: 12px !important;
        border: 2px solid rgba(0,0,0,0.1) !important;
    }
    
    .form-control:focus,
    .form-select:focus {
        border-color: #667eea !important;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
    }
    
    textarea.form-control {
        min-height: 120px !important;
        resize: vertical;
    }
    
    .form-check {
        padding: 12px;
        margin-bottom: 8px;
    }
    
    .form-check-input {
        width: 24px !important;
        height: 24px !important;
        margin-top: 0 !important;
    }
    
    .form-check-label {
        font-size: 15px !important;
        padding-left: 8px;
    }
    
    .input-group {
        flex-wrap: nowrap !important;
    }
    
    .input-group .btn {
        min-width: auto !important;
        width: auto !important;
    }
}

/* ==================== TABELAS ==================== */

@media (max-width: 768px) {
    .table-responsive {
        border-radius: 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .table {
        font-size: 14px !important;
    }
    
    .table th,
    .table td {
        padding: 12px 8px !important;
        white-space: nowrap;
    }
    
    /* Esconder colunas menos importantes em mobile */
    .table .d-none-mobile {
        display: none !important;
    }
}

/* ==================== NAVEGAÇÃO ==================== */

@media (max-width: 768px) {
    .navbar {
        padding: 12px 16px !important;
    }
    
    .navbar-brand {
        font-size: 20px !important;
    }
    
    .nav-link {
        padding: 12px 16px !important;
        font-size: 16px !important;
        border-radius: 8px;
        margin: 4px 0;
    }
    
    .dropdown-menu {
        border-radius: 12px !important;
        padding: 8px !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
    }
    
    .dropdown-item {
        padding: 12px 16px !important;
        font-size: 15px !important;
        border-radius: 8px !important;
        margin-bottom: 4px;
    }
}

/* ==================== MODAIS ==================== */

@media (max-width: 768px) {
    .modal-dialog {
        margin: 8px !important;
        max-width: calc(100% - 16px) !important;
    }
    
    .modal-content {
        border-radius: 16px !important;
    }
    
    .modal-header {
        padding: 20px !important;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }
    
    .modal-title {
        font-size: 20px !important;
        font-weight: 600 !important;
    }
    
    .modal-body {
        padding: 20px !important;
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }
    
    .modal-footer {
        padding: 16px 20px !important;
        border-top: 1px solid rgba(0,0,0,0.1);
    }
    
    .modal-footer .btn {
        flex: 1;
    }
}

/* ==================== ALERTAS E MENSAGENS ==================== */

@media (max-width: 768px) {
    .alert {
        padding: 16px !important;
        font-size: 15px !important;
        border-radius: 12px !important;
        margin-bottom: 16px !important;
    }
    
    .alert-heading {
        font-size: 17px !important;
        margin-bottom: 8px !important;
    }
}

/* ==================== BADGES E TAGS ==================== */

@media (max-width: 768px) {
    .badge {
        padding: 6px 12px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
        font-weight: 500 !important;
    }
}

/* ==================== PAGINAÇÃO ==================== */

@media (max-width: 768px) {
    .pagination {
        justify-content: center;
        flex-wrap: wrap;
        gap: 4px;
    }
    
    .page-link {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 10px !important;
        font-size: 15px !important;
        border-radius: 10px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ==================== TÍTULOS E TEXTOS ==================== */

@media (max-width: 768px) {
    h1 {
        font-size: 28px !important;
        margin-bottom: 16px !important;
    }
    
    h2 {
        font-size: 24px !important;
        margin-bottom: 14px !important;
    }
    
    h3 {
        font-size: 20px !important;
        margin-bottom: 12px !important;
    }
    
    h4 {
        font-size: 18px !important;
        margin-bottom: 10px !important;
    }
    
    h5 {
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }
    
    p, li {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }
    
    small, .small {
        font-size: 13px !important;
    }
}

/* ==================== ESPAÇAMENTOS ==================== */

@media (max-width: 768px) {
    .my-4 {
        margin-top: 16px !important;
        margin-bottom: 16px !important;
    }
    
    .my-5 {
        margin-top: 24px !important;
        margin-bottom: 24px !important;
    }
    
    .mb-3 {
        margin-bottom: 12px !important;
    }
    
    .mb-4 {
        margin-bottom: 16px !important;
    }
    
    .p-4 {
        padding: 16px !important;
    }
    
    .p-5 {
        padding: 24px !important;
    }
}

/* ==================== PLAYER DE ÁUDIO ==================== */

@media (max-width: 768px) {
    audio {
        width: 100% !important;
        max-width: 100% !important;
        height: 48px !important;
    }
}

/* ==================== ÍCONES ==================== */

@media (max-width: 768px) {
    .bi {
        font-size: 20px !important;
    }
    
    .btn .bi {
        font-size: 18px !important;
    }
}

/* ==================== SCROLLBAR CUSTOMIZADA ==================== */

@media (max-width: 768px) {
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    
    ::-webkit-scrollbar-track {
        background: rgba(0,0,0,0.05);
        border-radius: 10px;
    }
    
    ::-webkit-scrollbar-thumb {
        background: rgba(102, 126, 234, 0.5);
        border-radius: 10px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background: rgba(102, 126, 234, 0.7);
    }
}

/* ==================== ANIMAÇÕES MOBILE ==================== */

@media (max-width: 768px) {
    .btn,
    .card,
    .form-control,
    .nav-link {
        transition: all 0.2s ease !important;
    }
    
    .btn:active {
        transform: scale(0.97);
    }
    
    .card:active {
        transform: scale(0.99);
    }
}

/* ==================== SAFE AREA (NOTCH) ==================== */

@media (max-width: 768px) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    
    .navbar {
        padding-top: calc(12px + env(safe-area-inset-top)) !important;
    }
}

/* ==================== OTIMIZAÇÕES ESPECÍFICAS ==================== */

/* Histórico de músicas/áudios em cards mobile */
@media (max-width: 768px) {
    .history-card,
    .music-card {
        padding: 16px !important;
        margin-bottom: 12px !important;
        border-radius: 16px !important;
    }
    
    .history-card .btn-group,
    .music-card .btn-group {
        display: flex;
        gap: 8px;
        margin-top: 12px;
    }
    
    .history-card .btn-group .btn,
    .music-card .btn-group .btn {
        flex: 1;
        font-size: 14px !important;
        padding: 10px 12px !important;
        min-height: 40px !important;
    }
}

/* Player de demo mobile */
@media (max-width: 768px) {
    .demo-player-card {
        border-radius: 16px !important;
    }
    
    .demo-player-header {
        padding: 14px 16px !important;
        font-size: 16px !important;
    }
    
    .demo-player-body {
        padding: 16px !important;
    }
}

/* Seletor de locutores */
@media (max-width: 768px) {
    select[name="speaker_id"],
    select#speaker {
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23333' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 16px center;
        background-size: 16px;
        padding-right: 48px !important;
    }
}

/* Contador de caracteres */
@media (max-width: 768px) {
    .char-counter {
        font-size: 14px !important;
        padding: 8px 12px !important;
        border-radius: 8px !important;
    }
}

/* Formatador de letra */
@media (max-width: 768px) {
    .letra-formatter {
        padding: 16px !important;
        border-radius: 12px !important;
    }
    
    .letra-formatter .btn {
        width: 100% !important;
    }
}

/* ==================== FIM DAS OTIMIZAÇÕES ==================== */