/* ================================================================
   WBS Responsive — Mobile & Tablet Optimizations
   Weiss Business Systems
   ================================================================ */

/* ----------------------------------------------------------------
   Breakpoints (reference only, CSS custom properties cannot be
   used in media queries — values documented here):
     --wbs-bp-sm:  640px   (mobile)
     --wbs-bp-md:  768px   (tablet)
     --wbs-bp-lg:  1024px  (desktop)
     --wbs-bp-xl:  1280px  (wide)
   ---------------------------------------------------------------- */

/* ----------------------------------------------------------------
   1. Base Mobile Rules (< 640px)
   ---------------------------------------------------------------- */
@media (max-width: 639px) {
    /* Prevent iOS auto-zoom on inputs */
    .wbs-input,
    .wbs-select,
    .wbs-textarea {
        font-size: 16px;
    }

    /* Touch targets — enforce minimum 44x44 */
    .wbs-btn {
        min-height: 44px;
        padding: 0.625rem 1rem;
    }

    .wbs-btn--sm {
        min-height: 36px;
    }

    .wbs-tab {
        min-height: 44px;
        padding: 0.625rem 0.875rem;
    }

    .wbs-pagination a,
    .wbs-pagination span {
        min-width: 44px;
        height: 44px;
    }

    /* Full-width buttons */
    .wbs-btn--block-mobile {
        display: flex;
        width: 100%;
    }

    /* Stack grids to single column */
    .wbs-grid--2,
    .wbs-grid--3,
    .wbs-grid--4 {
        grid-template-columns: 1fr;
    }

    /* Cards — reduce padding */
    .wbs-card__header {
        padding: var(--wbs-space-md) var(--wbs-space-lg);
        flex-wrap: wrap;
    }

    .wbs-card__body {
        padding: var(--wbs-space-lg);
    }

    .wbs-card__footer {
        padding: var(--wbs-space-md) var(--wbs-space-lg);
        flex-wrap: wrap;
    }

    /* Tables — collapse to stacked cards */
    .wbs-table--responsive {
        border: 0;
    }

    .wbs-table--responsive thead {
        display: none;
    }

    .wbs-table--responsive tbody tr {
        display: block;
        margin-bottom: var(--wbs-space-md);
        border: 1px solid var(--wbs-gray-200);
        border-radius: var(--wbs-radius-lg);
        background: #fff;
        box-shadow: var(--wbs-shadow-sm);
    }

    .wbs-table--responsive td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.625rem 1rem;
        border-bottom: 1px solid var(--wbs-gray-100);
        text-align: right;
    }

    .wbs-table--responsive td:last-child {
        border-bottom: 0;
    }

    .wbs-table--responsive td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--wbs-gray-600);
        text-align: left;
        margin-right: var(--wbs-space-md);
    }

    /* Modal — full width on mobile */
    .wbs-modal__content {
        max-width: none;
        margin: var(--wbs-space-sm);
        max-height: calc(100vh - 1rem);
        border-radius: var(--wbs-radius-lg);
    }

    /* Tabs — scrollable */
    .wbs-tabs {
        gap: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

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

    /* Breadcrumb — allow wrapping */
    .wbs-breadcrumb {
        font-size: var(--wbs-text-xs);
    }

    /* Alerts — tighter */
    .wbs-alert {
        padding: var(--wbs-space-sm) var(--wbs-space-md);
    }
}

/* ----------------------------------------------------------------
   2. Tablet Rules (< 768px)
   ---------------------------------------------------------------- */
@media (max-width: 767px) {
    /* 3 and 4-col grids fall to 2 columns */
    .wbs-grid--3,
    .wbs-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Hide non-essential table columns */
    .wbs-table .wbs-hide-tablet {
        display: none;
    }

    /* Card footer — stack buttons */
    .wbs-card__footer {
        flex-direction: column;
        align-items: stretch;
    }

    .wbs-card__footer .wbs-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ----------------------------------------------------------------
   3. Desktop+ (>= 1024px)
   ---------------------------------------------------------------- */
@media (min-width: 1024px) {
    /* Restore 4-col grid at desktop */
    .wbs-grid--4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ----------------------------------------------------------------
   4. Wide (>= 1280px)
   ---------------------------------------------------------------- */
@media (min-width: 1280px) {
    /* Optional: wider modals */
    .wbs-modal__content--wide {
        max-width: 720px;
    }
}

/* ----------------------------------------------------------------
   5. Print
   ---------------------------------------------------------------- */
@media print {
    .wbs-btn,
    .wbs-tabs,
    .wbs-pagination,
    .wbs-modal,
    .wbs-spinner {
        display: none !important;
    }

    .wbs-card {
        box-shadow: none;
        border: 1px solid #ccc;
        break-inside: avoid;
    }

    .wbs-table th,
    .wbs-table td {
        border: 1px solid #ccc;
    }

    .wbs-badge {
        border: 1px solid currentColor;
    }
}

/* ----------------------------------------------------------------
   6. Reduced Motion
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .wbs-spinner {
        animation-duration: 1.5s;
    }

    .wbs-btn,
    .wbs-input,
    .wbs-select,
    .wbs-textarea,
    .wbs-tab {
        transition-duration: 0ms;
    }
}