/* ========================================
   RESPONSIVE - Mobile First Overrides
   ======================================== */

/* ---- STATS GRID VARIANTS ---- */
.stats-grid--3 { grid-template-columns: repeat(3, 1fr); }
.stats-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ---- TABLETS (max 1024px) ---- */
@media (max-width: 1024px) {

    /* Search bars & filter toolbars - all types */
    .search-bar,
    .sales-filters,
    .clients-filters,
    [class*="-filters"],
    [class*="-toolbar"] form {
        flex-direction: column;
        align-items: stretch;
    }

    .search-bar .form-control,
    .search-bar .form-select,
    .sales-filters .form-control,
    .sales-filters .form-select,
    .clients-filters .form-control,
    .clients-filters .form-select,
    [class*="-filters"] .form-control,
    [class*="-filters"] .form-select,
    [class*="-toolbar"] .form-control,
    [class*="-toolbar"] .form-select {
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .search-bar input[type="date"],
    .search-bar input[type="number"],
    [class*="-filters"] input[type="date"],
    [class*="-filters"] input[type="number"],
    [class*="-toolbar"] input[type="date"],
    [class*="-toolbar"] input[type="number"] {
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .search-bar .btn,
    .sales-filters .btn,
    .clients-filters .btn,
    [class*="-filters"] .btn,
    [class*="-toolbar"] .btn {
        width: 100%;
        text-align: center;
    }

    /* Card headers with filters + button */
    .card__header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .card__header .btn--primary {
        width: 100%;
        text-align: center;
    }

    /* All toolbars */
    .sales-toolbar,
    .users-toolbar,
    .clients-toolbar,
    [class*="-toolbar"] {
        flex-direction: column;
        align-items: stretch;
    }

    .sales-toolbar .btn--primary,
    .users-toolbar .btn--primary,
    .clients-toolbar .btn--primary,
    [class*="-toolbar"] > .btn--primary {
        width: 100%;
        text-align: center;
    }

    /* Table actions stack */
    .table__actions {
        flex-direction: column;
        gap: 0.25rem;
    }

    /* Stats grid forced to 2 cols */
    .stats-grid,
    .stats-grid--3,
    .stats-grid--4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

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

    /* Touch-friendly targets (min 44px per WCAG) */
    .btn {
        min-height: 44px;
        padding: 0.625rem 1rem;
    }

    .btn--sm {
        min-height: 40px;
        padding: 0.5rem 0.875rem;
    }

    /* Module summary sidebar buttons stay compact */
    .mod-summary .btn,
    .mod-summary .btn.btn--sm {
        min-height: auto !important;
        padding: 0.5rem 0.75rem;
        font-size: var(--font-size-xs);
    }

    .form-control,
    .form-select {
        min-height: 44px;
        padding: 0.75rem 0.875rem;
    }

    /* Smaller page padding */
    .page-content {
        padding: 1rem 0.75rem;
    }

    /* Card body less padding */
    .card__body {
        padding: 1rem;
    }

    .card__header {
        padding: 0.75rem 1rem;
    }

    /* Tables: horizontal scroll with visual hint */
    .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -1rem;
        padding: 0 1rem;
    }

    .table {
        min-width: 500px;
    }

    .table th,
    .table td {
        padding: 0.5rem 0.625rem;
        font-size: var(--font-size-xs);
    }

    /* Stat cards smaller */
    .stat-card {
        padding: 0.875rem;
    }

    .stat-card__value {
        font-size: var(--font-size-lg);
        word-break: break-word;
    }

    .stat-card__label {
        font-size: var(--font-size-xs);
    }

    .stat-card__icon {
        width: 32px;
        height: 32px;
        margin-bottom: 0.375rem;
    }

    .stat-card__icon svg {
        width: 16px;
        height: 16px;
    }

    /* Pagination wrap */
    .pagination {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .pagination__btns {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Form rows single column */
    .form-row {
        grid-template-columns: 1fr;
    }

    /* Dashboard grid single column */
    .dashboard__grid {
        grid-template-columns: 1fr;
    }

    /* Sale detail: dates stack */
    .sale-dates {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .sale-dates__sep {
        display: none;
    }

    /* Header adjustments */
    .header {
        padding: 0 0.75rem;
    }

    .header__title {
        font-size: var(--font-size-base);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 150px;
    }

    .header__right {
        gap: 0.5rem;
    }

    .header__user-info {
        display: none;
    }

    .user-menu__chevron {
        display: none;
    }

    /* Notif dropdown full width on small screens */
    .notif-dropdown {
        width: calc(100vw - 2rem);
        right: -60px;
    }
}

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

    /* Tables: reduce min-width for small phones */
    .table {
        min-width: 400px;
    }

    /* Stats single column */
    .stats-grid,
    .stats-grid--3,
    .stats-grid--4 {
        grid-template-columns: 1fr !important;
    }

    /* Auth card smaller padding */
    .auth-card {
        padding: 1.5rem;
    }

    .auth-card__logo-img {
        max-height: 70px;
    }

    /* Buttons full width */
    .card__header .btn,
    .sales-toolbar .btn {
        width: 100%;
        justify-content: center;
    }

    /* Badge smaller */
    .badge {
        font-size: 10px;
        padding: 0.0625rem 0.5rem;
    }

    /* Code inputs smaller */
    .code-inputs input {
        width: 40px;
        height: 48px;
        font-size: 20px;
    }

    /* Table: hide less important columns */
    .table .hide-mobile {
        display: none;
    }

    /* Header title even smaller */
    .header__title {
        max-width: 120px;
        font-size: var(--font-size-sm);
    }

    /* Chat modal full screen */
    .chat-modal__container {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    /* Pagination compact */
    .pagination__btn {
        padding: 0.25rem 0.5rem;
        font-size: 11px;
    }
}

/* ---- FORMS: create/edit pages responsive ---- */
@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* ---- TABLES: ensure scroll works ---- */
@media (max-width: 768px) {
    .table-wrapper {
        position: relative;
    }

    .table-wrapper::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 20px;
        background: linear-gradient(to left, var(--bg-card), transparent);
        pointer-events: none;
        opacity: 0.8;
    }
}

/* ---- UTILITY: hide on mobile ---- */
@media (max-width: 768px) {
    .hide-sm { display: none !important; }
}
@media (max-width: 480px) {
    .hide-xs { display: none !important; }
}

/* ---- GENERIC TOOLBAR / FILTERS ---- */
.products-toolbar,
.view-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.products-filters,
.sales-filters {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex: 1;
}

.products-filters .form-control,
.sales-filters .form-control { max-width: 200px; }
.products-filters .form-select,
.sales-filters .form-select { max-width: 160px; }

/* ========================================
   BOTTOM NAV (PWA / mobile)
   ======================================== */
.bottom-nav {
    display: none;
}

/* Ocultar la barra inferior cuando hay un modal abierto, para que no
   tape los botones (Cancelar/Guardar) del pie del modal en móvil. */
body:has(.modal-overlay--open) .bottom-nav,
body:has(.confirm-modal-overlay--open) .bottom-nav {
    display: none !important;
}

@media (max-width: 768px) {
    .bottom-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 900;
        background: var(--bg-header, var(--bg-card));
        backdrop-filter: blur(18px) saturate(1.2);
        -webkit-backdrop-filter: blur(18px) saturate(1.2);
        border-top: 1px solid var(--border-color);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
        /* Safe-area para notch / barra gestual en PWA standalone */
        padding-bottom: env(safe-area-inset-bottom, 0px);
        height: calc(60px + env(safe-area-inset-bottom, 0px));
    }

    .bottom-nav__item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        height: 60px;
        text-decoration: none;
        color: var(--text-muted);
        font-size: 10px;
        font-weight: 600;
        transition: color 0.15s ease;
        -webkit-tap-highlight-color: transparent;
        position: relative;
        min-width: 0;
    }

    .bottom-nav__item:hover,
    .bottom-nav__item:active {
        color: var(--text-primary);
        text-decoration: none;
    }

    .bottom-nav__item.active {
        color: var(--primary);
    }

    .bottom-nav__icon {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }

    .bottom-nav__label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        line-height: 1;
    }

    /* Item central (Ventas) elevado */
    .bottom-nav__item--center {
        color: var(--text-primary);
    }

    .bottom-nav__center-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
        margin-top: -26px;
        border-radius: 50%;
        background: var(--gradient-primary);
        color: #fff;
        box-shadow: 0 6px 18px rgba(206, 50, 255, 0.45);
        border: 3px solid var(--bg-header, var(--bg-card));
        flex-shrink: 0;
    }

    .bottom-nav__item--center .bottom-nav__icon {
        width: 24px;
        height: 24px;
    }

    .bottom-nav__item--center.active {
        color: var(--primary);
    }

    /* Espacio para que la barra inferior no tape el final del contenido.
       Se mantiene el esquema original de scroll de la app (page-content con
       overflow-x oculto) para evitar desbordes horizontales en móvil. */
    .page-content {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }

    /* Subir el FAB de chat para que no choque con la barra inferior */
    .chat-fab {
        bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ---- SEARCH BAR btn--outline responsive ---- */
.btn--outline {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}
.btn--outline:hover {
    background: var(--gray-100);
    color: var(--text-primary);
}