/* mobile.css — Responsive completo para AZ Inventory */

/* ===================== TABLETS (max 1024px) ===================== */
@media (max-width: 1024px) {
    .container {
        padding: 0 12px;
    }

    .user-cards-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .general-articles-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    #requests-list-container,
    #support-requests-list-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ===================== MOBILE (max 768px) ===================== */
@media (max-width: 768px) {

    /* --- Header --- */
    .header {
        flex-direction: column;
        gap: 10px;
        padding: 10px 15px;
    }

    .logo-container {
        justify-content: center;
    }

    .logo-container img {
        width: 50px;
        height: 50px;
    }

    .logo-container h1 {
        font-size: 18px;
    }

    .header-buttons {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
    }

    .header-buttons .lang-btn {
        padding: 4px 10px;
        font-size: 12px;
    }

    /* --- Tabs principales --- */
    .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        display: inline-flex;
        flex-wrap: nowrap;
        gap: 0;
        padding: 3px;
    }

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

    .tab {
        white-space: nowrap;
        flex-shrink: 0;
        padding: 7px 10px;
        font-size: 11px;
    }
    
    .tab-icon { font-size: 13px; }

    /* --- Sub-tabs admin --- */
    .sub-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px;
        justify-content: center;
    }

    .sub-tab {
        font-size: 11px;
        padding: 6px 10px;
        white-space: nowrap;
    }

    /* --- Contenido general --- */
    .tab-content {
        padding: 10px;
    }

    /* --- Formularios inventario --- */
    .action-section {
        flex-direction: column;
        gap: 15px;
    }

    .use-section,
    .modify-section {
        width: 100% !important;
        max-width: 100% !important;
    }

    .type-buttons,
    .color-buttons,
    .size-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    .type-buttons button,
    .color-buttons button,
    .size-buttons button {
        padding: 6px 10px;
        font-size: 12px;
        flex-shrink: 0;
    }

    .size-buttons {
        max-height: 200px;
        overflow-y: auto;
    }

    .quantity-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    /* --- Cable inventory grid --- */
    .cable-section {
        overflow-x: auto;
    }

    .cable-grid {
        min-width: 300px;
    }

    .cable-grid table {
        font-size: 12px;
    }

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

    /* --- Request forms --- */
    .request-forms-wrapper {
        flex-direction: column;
        align-items: stretch;
    }

    #request-support-container,
    #request-item-container {
        max-width: 100%;
        width: 100%;
    }

    /* --- WIP Status --- */
    .wip-header {
        flex-direction: column;
        gap: 10px;
    }

    .wip-controls {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .wip-controls input[type="text"] {
        width: 100%;
    }

    .wip-controls button {
        width: 100%;
    }

    #wip-cards-container {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    .wip-card {
        min-width: 0;
    }

    .wip-card-header {
        grid-template-columns: 1fr !important;
        gap: 6px;
    }

    .wip-card-field {
        font-size: 12px;
    }

    /* --- WIP Pods bar --- */
    .pods-bar,
    .wip-pods-container,
    #wip-pods-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap !important;
        display: flex;
        padding-bottom: 5px;
    }

    .pods-bar::-webkit-scrollbar,
    .wip-pods-container::-webkit-scrollbar,
    #wip-pods-container::-webkit-scrollbar {
        display: none;
    }

    .pod-btn,
    .wip-pod-btn {
        white-space: nowrap;
        flex-shrink: 0;
        font-size: 12px;
        padding: 6px 12px;
    }

    /* --- Comments --- */
    .wip-comments-section {
        max-height: 200px;
    }

    .comment-form textarea {
        width: 100%;
        min-height: 60px;
    }

    /* --- User Management --- */
    .user-cards-container {
        grid-template-columns: 1fr !important;
    }

    .user-card-expanded {
        padding: 10px;
    }

    .user-permissions-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px;
    }

    .user-card-actions button {
        font-size: 12px;
        padding: 6px 12px;
    }

    /* --- Articles --- */
    .general-articles-grid {
        grid-template-columns: 1fr !important;
    }

    .article-card {
        min-width: 0;
    }

    .article-card img {
        max-height: 150px;
    }

    .article-form {
        width: 100% !important;
    }

    .article-filter-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    .article-filter-buttons button {
        font-size: 11px;
        padding: 4px 8px;
    }

    /* --- Solicitudes pendientes --- */
    #requests-list-container,
    #support-requests-list-container {
        grid-template-columns: 1fr !important;
    }

    .request-card {
        padding: 12px;
    }

    .request-card-header {
        flex-direction: column;
        gap: 6px;
    }

    .request-card-actions {
        flex-wrap: wrap;
        gap: 6px;
    }

    .request-card-actions button {
        flex: 1;
        min-width: 100px;
        font-size: 12px;
    }

    .request-filters,
    .request-context-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        justify-content: center;
    }

    .request-filters button,
    .request-context-filters button {
        font-size: 11px;
        padding: 4px 10px;
    }

    /* --- Dynamic Options --- */
    .dynamic-options-tree {
        font-size: 13px;
        padding: 8px;
    }

    .dynamic-option-node {
        padding-left: 12px;
    }

    /* --- Templates --- */
    .template-form {
        width: 100% !important;
    }

    .template-form label,
    .template-form input {
        font-size: 13px;
    }

    /* --- Maintenance Calendar --- */
    .maintenance-container {
        flex-direction: column;
    }

    .task-sidebar {
        width: 100% !important;
        max-width: 100%;
    }

    #calendar-grid {
        font-size: 11px;
    }

    .calendar-day {
        min-height: 50px;
        padding: 2px;
    }

    .cal-event {
        font-size: 9px;
        padding: 1px 3px;
    }

    .btn-add-event-day {
        font-size: 10px;
        width: 18px;
        height: 18px;
    }

    /* --- Global Message --- */
    .global-message-container {
        flex-direction: column;
        margin: 0 10px 15px;
        padding: 10px 14px;
    }

    .global-message-content {
        margin-right: 0;
    }

    .edit-global-message-btn {
        align-self: flex-end;
    }

    /* --- Global Message Modal --- */
    .global-message-modal-content {
        width: 95% !important;
        max-width: 95%;
        padding: 15px;
    }

    .type-selector {
        flex-wrap: wrap;
        gap: 4px;
    }

    .type-btn {
        font-size: 12px;
        padding: 6px 10px;
    }

    /* --- Modals generales --- */
    .modal-content,
    .wip-options-modal-content {
        width: 95% !important;
        max-width: 95% !important;
        margin: 10px auto;
        padding: 15px;
    }

    /* --- Notifications --- */
    .notification-panel,
    .user-notification-panel {
        right: 5px;
        left: 5px;
        width: auto;
        max-width: calc(100vw - 10px);
    }

    /* --- Online Users --- */
    .online-users-container {
        font-size: 12px;
        flex-wrap: wrap;
    }

    /* --- Locaciones --- */
    .locations-grid {
        grid-template-columns: 1fr !important;
    }

    .location-card {
        min-width: 0;
    }

    /* --- Stats / Dashboard --- */
    .stats-container,
    .usage-stats-container {
        flex-direction: column;
    }

    .damaged-items-container {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: center;
    }

    .damaged-item {
        min-width: 60px;
        font-size: 12px;
    }

    /* --- Log / Change History --- */
    .log-container {
        max-height: 300px;
        font-size: 12px;
    }

    .date-filter-row {
        flex-direction: column;
        gap: 8px;
        align-items: center;
    }

    .date-filter-row input[type="date"] {
        width: 100%;
        max-width: 200px;
    }

    /* --- Login / Register forms --- */
    .login-container,
    .register-container {
        width: 95% !important;
        max-width: 95%;
        padding: 15px;
    }

    /* --- Danger Zone --- */
    .danger-zone {
        padding: 15px;
    }

    .danger-zone button {
        width: 100%;
        margin-bottom: 8px;
    }

    /* --- Passed History --- */
    .wip-passed-card {
        padding: 10px;
    }

    .wip-passed-header {
        font-size: 12px;
    }

    .wip-passed-details {
        flex-direction: column;
        gap: 6px !important;
    }

    /* --- Footer --- */
    footer {
        padding: 10px;
        font-size: 12px;
    }

    /* --- Textos generales --- */
    h2 {
        font-size: 18px;
    }

    h3 {
        font-size: 16px;
    }

    /* --- Apply template modal --- */
    #apply-template-modal .modal-content {
        width: 95%;
    }

    /* --- WIP Options Modal --- */
    .wip-option-row {
        flex-direction: column;
        gap: 6px;
    }

    /* --- Create User form --- */
    .create-user-form {
        width: 100% !important;
        padding: 10px;
    }

    .create-user-form input {
        width: 100%;
    }
}

/* ===================== MOBILE SMALL (max 480px) ===================== */
@media (max-width: 480px) {

    .logo-container h1 {
        font-size: 16px;
    }

    .tab {
        padding: 8px 10px;
        font-size: 12px;
    }

    .sub-tab {
        font-size: 10px;
        padding: 5px 8px;
    }

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

    .request-card-actions {
        flex-direction: column;
    }

    .request-card-actions button {
        width: 100%;
    }

    .calendar-day .day-number {
        font-size: 10px;
    }

    .header-buttons {
        gap: 4px;
    }

    .header-buttons button {
        font-size: 11px;
        padding: 4px 8px;
    }

    #calendar-grid {
        font-size: 10px;
    }

    .maintenance-container .calendar-header h2 {
        font-size: 16px;
    }
}

/* Damaged items compact + new categories */
.damaged-item {
    min-width: 55px !important;
    padding: 8px 6px !important;
    font-size: 12px !important;
}

.damaged-item .count {
    font-size: 18px !important;
}

.damaged-item .label {
    font-size: 10px !important;
}

.damaged-item-BANDAR {
    border: 2px solid #8b5cf6;
    background: #f5f3ff;
}
.damaged-item-BANDAR .count { color: #7c3aed; }

.damaged-item-MiniSAS {
    border: 2px solid #06b6d4;
    background: #ecfeff;
}
.damaged-item-MiniSAS .count { color: #0891b2; }