/* ECHILIBRU — mobile.css */
html, body { max-width: 100%; overflow-x: hidden; }

@media (max-width: 900px) and (min-width: 769px) {
    .sidebar { width: 200px !important; }
    .main    { margin-left: 200px !important; }
    .grid-3  { grid-template-columns: 1fr 1fr !important; }
    .stats-row, .stats-grid { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 768px) {
    .main {
        margin-left: 0 !important;
        padding: 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    #mobBar {
        display: flex !important;
        align-items: center !important;
        padding: 10px 14px !important;
        background: #fff !important;
        border-bottom: 1px solid #e0e4ed !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        box-shadow: 0 2px 6px rgba(0,0,0,.05) !important;
    }
    .grid-3, .grid-2, .content-grid, .grid-layout {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .stats-row, .stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    .page-header { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
    .page-header .btn-primary { width: 100% !important; justify-content: center !important; }
    .profil-header { flex-wrap: wrap !important; padding: 14px !important; }
    .profil-actions { margin-left: 0 !important; width: 100% !important; }
    .profil-actions .btn-act { flex: 1 !important; justify-content: center !important; font-size: 12px !important; }
    .modal-overlay { padding: 0 !important; align-items: flex-end !important; }
    .modal { max-width: 100% !important; border-radius: 20px 20px 0 0 !important; max-height: 90vh !important; }
    input, select, textarea { font-size: 16px !important; }
    .tema-card { flex-direction: column !important; }
    .tc-actions { flex-direction: row !important; flex-wrap: wrap !important; }
    .toolbar { flex-wrap: wrap !important; }
    .toolbar .search-input { width: 100% !important; }
}

@media (min-width: 769px) {
    #mobBar, #mobOverlay { display: none !important; }
}