/**
 * 📱 MOBILE RESPONSIVE CSS - BigAI Web Panel
 * Regole CSS minime e conservative per mobile
 */

/* ============================================
   📱 MOBILE ONLY (< 768px)
   ============================================ */
@media (max-width: 768px) {
    /* Fix input zoom iOS */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="url"],
    textarea,
    select {
        font-size: 16px !important;
    }

    /* Grid server dashboard: da 3-4 colonne a 1 colonna */
    #guilds-container {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Grid colori embeds: da 2 a 1 colonna */
    .color-grid {
        grid-template-columns: 1fr !important;
    }

    /* Grid navigazione server (Config, Embeds, Ticket, ecc): da 4 a 2 colonne */
    .grid.md\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    /* Grid stats: da 4 a 1 colonna */
    #stats-container {
        grid-template-columns: 1fr !important;
    }

    /* Titoli più piccoli */
    h1 {
        font-size: 1.75rem !important;
    }

    h2 {
        font-size: 1.5rem !important;
    }

    h3 {
        font-size: 1.25rem !important;
    }

    /* Padding container ridotto */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Card padding ridotto */
    .bg-gray-800.rounded-xl {
        padding: 1rem !important;
    }

    /* Bottoni header pagine interne (Indietro, Configurazione) */
    .flex.gap-3 a,
    .flex.gap-3 button {
        font-size: 0.875rem !important;
        padding: 0.5rem 1rem !important;
    }

    /* Dropdown/Select più grandi e touch-friendly */
    select {
        min-height: 2.75rem !important;
        padding: 0.75rem !important;
    }

    /* Navbar responsive */
    nav .flex.items-center.space-x-4 {
        gap: 0.5rem !important;
    }

    nav .flex.items-center.space-x-3 {
        gap: 0.5rem !important;
        padding: 0.5rem 0.75rem !important;
    }

    nav span.font-semibold {
        font-size: 0.875rem !important;
    }

    nav .w-8.h-8 {
        width: 1.75rem !important;
        height: 1.75rem !important;
    }

    nav a.px-4 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        font-size: 0.875rem !important;
    }

    nav .text-xl {
        font-size: 1.125rem !important;
    }

    /* Header pagine interne */
    .bg-gray-800.rounded-xl.p-6.mb-8 {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }

    /* Icon pagine più piccole */
    .text-4xl {
        font-size: 2rem !important;
    }

    /* Preview non sticky */
    .sticky {
        position: static !important;
    }

    /* Modal responsive */
    .modal-content,
    .max-w-md {
        max-width: calc(100% - 2rem) !important;
    }

    /* Tabelle responsive */
    table {
        font-size: 0.875rem !important;
    }

    /* Badge e tag più piccoli */
    .text-xs {
        font-size: 0.625rem !important;
    }
}

/* ============================================
   📱 TABLET (768px - 1024px)
   ============================================ */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Grid 2 colonne su tablet */
    .color-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ============================================
   🎨 UTILITY CLASSES
   ============================================ */

/* Text truncate */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* No overflow */
body {
    overflow-x: hidden;
}