/* Comprehensive Responsive Design System */

/* ============================================
   GLOBAL RESPONSIVE SETTINGS
   ============================================ */

:root {
    --mobile-breakpoint: 320px;
    --small-mobile: 480px;
    --tablet-breakpoint: 768px;
    --desktop-breakpoint: 1024px;
    --large-desktop: 1280px;
    --extra-large: 1536px;
}

/* ============================================
   MOBILE FIRST APPROACH (320px - 480px)
   ============================================ */

@media (max-width: 480px) {
    /* Typography */
    html {
        font-size: 14px;
    }

    body {
        overflow-x: hidden;
    }

    h1 {
        font-size: 1.75rem !important;
    }

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

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

    h4, h5, h6 {
        font-size: 1rem !important;
    }

    /* Tables - Responsive Scroll */
    table {
        font-size: 0.8rem !important;
    }

    table thead {
        display: none;
    }

    table tbody tr {
        display: block;
        margin-bottom: 1.5rem;
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 1rem;
        background: var(--bg-card);
    }

    table td {
        display: block;
        padding: 0.5rem 0 !important;
        border: none !important;
        text-align: right !important;
        position: relative;
        padding-left: 50% !important;
    }

    table td:before {
        content: attr(data-label);
        position: absolute;
        left: 0.5rem;
        font-weight: 600;
        color: var(--text-muted);
        width: 45%;
    }

    /* Buttons */
    button, a.btn, .btn-link {
        width: 100%;
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
        margin-bottom: 0.5rem;
    }

    .btn-group, .button-group {
        display: flex !important;
        flex-direction: column;
        gap: 0.5rem;
    }

    /* Forms */
    .form-group, form div {
        margin-bottom: 1rem;
    }

    input, select, textarea {
        width: 100% !important;
        padding: 0.75rem !important;
        font-size: 1rem !important;
    }

    label {
        display: block;
        margin-bottom: 0.5rem;
        font-size: 0.9rem;
        font-weight: 500;
    }

    /* Cards */
    .card, .glass-card {
        padding: 1rem !important;
        margin-bottom: 1rem;
    }

    /* Sidebar */
    nav.sidebar-modern {
        width: 100% !important;
        max-width: 100% !important;
    }

    main, .main-content {
        margin-left: 0 !important;
        padding: 0.5rem !important;
    }

    /* Modals */
    .modal-dialog {
        width: 95% !important;
        margin: 1rem auto !important;
    }

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

    [class*="col-span"] {
        grid-column: unset !important;
    }

    /* Padding & Margins */
    .px-4, .px-6, .px-8 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .py-4, .py-6, .py-8 {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    /* Floating buttons */
    .fixed.bottom-6.right-6 {
        bottom: 1rem !important;
        right: 0.5rem !important;
        flex-direction: column;
        gap: 0.5rem;
    }

    .fixed.bottom-6.right-6 button,
    .fixed.bottom-6.right-6 a {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.8rem !important;
        border-radius: 50% !important;
        width: 45px !important;
        height: 45px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .fixed.bottom-6.right-6 span {
        display: none !important;
    }

    /* Control buttons */
    .control-buttons-group {
        top: 0.5rem !important;
        right: 0.5rem !important;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .control-buttons-group button,
    .control-buttons-group a {
        padding: 0.5rem !important;
        min-width: auto !important;
    }

    /* Flex containers */
    .flex {
        flex-direction: column;
    }

    .flex-row {
        flex-direction: column !important;
    }

    /* Images */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Text sizes */
    .text-xs {
        font-size: 0.7rem !important;
    }

    .text-sm {
        font-size: 0.8rem !important;
    }

    .text-base {
        font-size: 0.9rem !important;
    }

    .text-lg {
        font-size: 1rem !important;
    }

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

    /* Page padding */
    .py-6, [class*="py-8"] {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    /* Scrollbar */
    ::-webkit-scrollbar {
        width: 6px;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 3px;
    }
}

/* ============================================
   SMALL TABLET (481px - 768px)
   ============================================ */

@media (min-width: 481px) and (max-width: 768px) {
    html {
        font-size: 15px;
    }

    h1 {
        font-size: 2rem !important;
    }

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

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

    /* Tables */
    table {
        font-size: 0.9rem !important;
    }

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

    /* Buttons */
    button, a.btn {
        padding: 0.75rem 1.5rem !important;
        font-size: 0.95rem !important;
    }

    .btn-group {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.75rem;
    }

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

    /* Floating buttons */
    .fixed.bottom-6.right-6 {
        gap: 0.75rem;
    }

    .fixed.bottom-6.right-6 button,
    .fixed.bottom-6.right-6 a {
        padding: 0.6rem 0.8rem !important;
        width: auto !important;
        height: auto !important;
    }

    .fixed.bottom-6.right-6 span {
        display: inline !important;
        font-size: 0.75rem !important;
    }

    /* POS specific */
    .pos-container {
        grid-template-columns: 1fr !important;
    }

    .pos-left, .pos-right {
        grid-column: 1 / -1 !important;
    }

    /* Main margin */
    main {
        margin-left: 0 !important;
    }

    /* Padding */
    .px-6, .px-8 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    .py-8 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
}

/* ============================================
   TABLET & SMALL DESKTOP (769px - 1024px)
   ============================================ */

@media (min-width: 769px) and (max-width: 1024px) {
    html {
        font-size: 15px;
    }

    h1 {
        font-size: 2.25rem !important;
    }

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

    /* Grid */
    .grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Buttons */
    button, a.btn {
        padding: 0.8rem 1.5rem !important;
        font-size: 1rem !important;
    }

    .btn-group {
        flex-direction: row;
        gap: 1rem;
    }

    /* Tables */
    table {
        font-size: 0.95rem !important;
    }

    table tbody tr {
        display: table-row;
    }

    table td {
        display: table-cell !important;
        border: none !important;
    }

    table td:before {
        display: none !important;
    }

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

    /* POS */
    .pos-products-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    /* Main margin - keep sidebar margin */
    main {
        margin-left: 16rem !important;
    }

    /* Padding */
    .px-4, .px-6 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

/* ============================================
   DESKTOP (1025px - 1280px)
   ============================================ */

@media (min-width: 1025px) and (max-width: 1280px) {
    html {
        font-size: 16px;
    }

    h1 {
        font-size: 2.5rem !important;
    }

    /* Grid */
    .grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    /* Tables */
    table {
        font-size: 1rem !important;
    }

    /* Forms */
    .form-row {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* POS */
    .pos-products-grid {
        grid-template-columns: repeat(5, 1fr) !important;
    }

    /* Main margin */
    main {
        margin-left: 16rem !important;
    }
}

/* ============================================
   LARGE DESKTOP (1281px+)
   ============================================ */

@media (min-width: 1281px) {
    html {
        font-size: 16px;
    }

    h1 {
        font-size: 3rem !important;
    }

    /* Grid */
    .grid {
        grid-template-columns: repeat(6, 1fr) !important;
    }

    /* Forms */
    .form-row {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    /* POS */
    .pos-products-grid {
        grid-template-columns: repeat(6, 1fr) !important;
    }

    /* Main */
    main {
        margin-left: 16rem !important;
    }

    .max-w-7xl {
        max-width: 90rem;
    }
}

/* ============================================
   UTILITY CLASSES FOR RESPONSIVE
   ============================================ */

/* Hide on mobile */
.hide-mobile {
    display: none;
}

@media (min-width: 769px) {
    .hide-mobile {
        display: block;
    }
}

/* Hide on desktop */
.hide-desktop {
    display: block;
}

@media (min-width: 1025px) {
    .hide-desktop {
        display: none;
    }
}

/* Show only on tablet */
.tablet-only {
    display: none;
}

@media (min-width: 481px) and (max-width: 1024px) {
    .tablet-only {
        display: block;
    }
}

/* Responsive spacing */
.responsive-px {
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 769px) {
    .responsive-px {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (min-width: 1281px) {
    .responsive-px {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

/* Responsive text */
.responsive-text {
    font-size: 0.9rem;
}

@media (min-width: 769px) {
    .responsive-text {
        font-size: 1rem;
    }
}

@media (min-width: 1281px) {
    .responsive-text {
        font-size: 1.1rem;
    }
}

/* ============================================
   TABLE RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table.responsive tbody {
        display: block;
    }

    table.responsive tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 1rem;
    }

    table.responsive td {
        display: block !important;
        text-align: right;
        padding-left: 50% !important;
        position: relative;
    }

    table.responsive td:before {
        content: attr(data-label);
        position: absolute;
        left: 6px;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.7rem;
        color: var(--text-muted);
        width: 45%;
    }
}

/* ============================================
   FLEXBOX RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .flex-md-column {
        flex-direction: column;
    }

    .gap-md-2 {
        gap: 0.5rem;
    }
}

@media (min-width: 769px) {
    .flex-md-row {
        flex-direction: row;
    }

    .gap-md-4 {
        gap: 1rem;
    }
}

/* ============================================
   POS SPECIFIC RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
    .pos-container {
        flex-direction: column;
    }

    .pos-left, .pos-right {
        width: 100%;
        max-width: 100%;
    }

    .pos-products-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        max-height: 300px;
    }

    .pos-cart {
        margin-top: 1rem;
    }
}

@media (max-width: 768px) {
    .pos-products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        max-height: 250px;
    }

    .pos-header {
        flex-direction: column;
        gap: 1rem;
    }

    .pos-actions {
        flex-direction: column;
        width: 100%;
    }

    .pos-actions button, .pos-actions a {
        width: 100%;
    }
}

/* ============================================
   FORM RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .form-group {
        margin-bottom: 1rem;
    }

    .form-row {
        grid-template-columns: 1fr !important;
    }

    input, select, textarea, [type="text"], [type="email"], [type="number"] {
        font-size: 16px !important; /* Prevent iOS zoom */
    }
}

@media (min-width: 769px) {
    .form-row {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (min-width: 1281px) {
    .form-row {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* ============================================
   GRID RESPONSIVE
   ============================================ */

@media (max-width: 480px) {
    .grid-cols-2, .grid-cols-3, .grid-cols-4 {
        grid-template-columns: 1fr !important;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .grid-cols-3, .grid-cols-4, .grid-cols-6 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .grid-cols-4, .grid-cols-6 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ============================================
   PRINT RESPONSIVE
   ============================================ */

@media print {
    .hide-print {
        display: none !important;
    }

    .page-break {
        page-break-after: always;
    }

    table, .card {
        page-break-inside: avoid;
    }
}