/**
 * Loyal Club Ambassador - Responsive Design System
 * Mobile-first approach with modern breakpoints
 *
 * Breakpoints:
 * - xs: 0-575px (mobile)
 * - sm: 576px+ (large mobile / small tablet)
 * - md: 768px+ (tablet)
 * - lg: 992px+ (desktop)
 * - xl: 1200px+ (large desktop)
 */

/* ==========================================================================
   MOBILE-FIRST BASE STYLES
   ========================================================================== */

/* Touch-friendly form controls */
.form-control,
.form-select,
.btn {
    min-height: 44px; /* iOS recommended minimum */
}

/* Center text vertically in buttons with min-height */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

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

/* Better spacing on mobile */
.container {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Responsive typography - mobile base */
h1, .h1 { font-size: 1.75rem; } /* 28px */
h2, .h2 { font-size: 1.5rem; }  /* 24px */
h3, .h3 { font-size: 1.25rem; } /* 20px */
h4, .h4 { font-size: 1.125rem; } /* 18px */
h5, .h5 { font-size: 1rem; }    /* 16px */
h6, .h6 { font-size: 0.875rem; } /* 14px */

/* Card padding optimization for mobile */
.card .card-body {
    padding: 1rem;
}

/* Table responsive optimization */
.table-responsive {
    font-size: 0.875rem;
}

.table {
    font-size: 0.875rem;
}

/* Navbar mobile optimization */
.navbar-brand {
    gap: 0.5rem !important;
}

.lc-navbar-logo {
    height: 28px;
}

/* Admin navbar mobile fixes */
.lc-admin-nav .navbar-collapse {
    margin-top: 0.75rem;
}

.lc-admin-nav .navbar-nav {
    width: 100%;
}

.lc-admin-nav .navbar-nav .nav-link {
    padding: 0.625rem 1rem;
    font-size: 0.9375rem;
}

.lc-auth-logo {
    max-height: 48px;
}

/* Button groups wrap gracefully */
.btn-group-responsive {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Alert flex layout mobile */
.alert .d-flex {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.75rem;
}

/* ==========================================================================
   SMALL DEVICES (576px and up)
   ========================================================================== */
@media (min-width: 576px) {
    .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    h1, .h1 { font-size: 2rem; }
    h2, .h2 { font-size: 1.625rem; }
    h3, .h3 { font-size: 1.375rem; }

    .card .card-body {
        padding: 1.25rem;
    }

    .lc-navbar-logo {
        height: 32px;
    }

    .lc-auth-logo {
        max-height: 56px;
    }

    /* Table improvements */
    .table {
        font-size: 0.9375rem;
    }

    /* Alerts can go horizontal */
    .alert .d-flex {
        flex-direction: row;
        align-items: center !important;
    }
}

/* ==========================================================================
   MEDIUM DEVICES (768px and up) - Tablets
   ========================================================================== */
@media (min-width: 768px) {
    h1, .h1 { font-size: 2.25rem; }
    h2, .h2 { font-size: 1.875rem; }
    h3, .h3 { font-size: 1.5rem; }

    .card .card-body {
        padding: 1.5rem;
    }

    .lc-navbar-logo {
        height: 36px;
    }

    .lc-auth-logo {
        max-height: 64px;
    }

    /* Table full size */
    .table {
        font-size: 1rem;
    }

    .table-responsive {
        font-size: 1rem;
    }

    /* Better card metrics padding */
    .lc-card-metrics .card-body {
        padding: 1.5rem;
    }
}

/* ==========================================================================
   LARGE DEVICES (992px and up) - Desktop
   ========================================================================== */
@media (min-width: 992px) {
    h1, .h1 { font-size: 2.5rem; }

    .card .card-body.p-4 {
        padding: 1.5rem !important;
    }

    /* Navbar full size */
    .navbar-brand {
        gap: 0.75rem !important;
    }

    /* Sidebar shows, reduce spacing */
    .cabinet-sidebar {
        position: sticky;
        top: 1rem;
    }
}

/* ==========================================================================
   EXTRA LARGE DEVICES (1200px and up)
   ========================================================================== */
@media (min-width: 1200px) {
    .card .card-body.p-4 {
        padding: 2rem !important;
    }

    .lc-card-metrics .card-body {
        padding: 1.5rem 2rem;
    }
}

/* ==========================================================================
   RESPONSIVE UTILITIES
   ========================================================================== */

/* Hide on mobile */
@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }

    /* Stack buttons vertically on very small screens */
    .btn-group-mobile-stack {
        flex-direction: column;
        align-items: stretch !important;
    }

    .btn-group-mobile-stack .btn {
        width: 100%;
    }

    /* Table column hiding */
    .table-hide-mobile {
        display: none !important;
    }

    /* Responsive table - card view alternative */
    .table-card-mobile {
        display: block;
    }

    .table-card-mobile thead {
        display: none;
    }

    .table-card-mobile tbody {
        display: block;
    }

    .table-card-mobile tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
        padding: 0.75rem;
        background: #fff;
    }

    .table-card-mobile td {
        display: block;
        text-align: left !important;
        padding: 0.5rem 0;
        border: none;
    }

    .table-card-mobile td:before {
        content: attr(data-label);
        font-weight: 600;
        display: block;
        margin-bottom: 0.25rem;
        color: var(--lc-text-secondary, #666);
        font-size: 0.75rem;
        text-transform: uppercase;
    }
}

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

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

/* Responsive gaps */
.gap-responsive {
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .gap-responsive {
        gap: 1rem;
    }
}

/* Touch-friendly navigation */
@media (max-width: 991px) {
    .navbar-nav .nav-link {
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }

    .navbar-collapse {
        margin-top: 0.5rem;
    }

    /* Make dropdown touch-friendly */
    .dropdown-menu {
        font-size: 1rem;
    }

    .dropdown-item {
        padding: 0.75rem 1rem;
    }
}

/* Responsive form layout helpers */
@media (max-width: 575px) {
    .form-row-mobile-stack .col-md-6,
    .form-row-mobile-stack .col-md-4,
    .form-row-mobile-stack .col-md-3 {
        margin-bottom: 1rem;
    }
}

/* Badge responsive sizing */
.badge {
    font-size: 0.75rem;
    padding: 0.35em 0.65em;
}

@media (min-width: 768px) {
    .badge {
        font-size: 0.8125rem;
    }
}

/* Modal responsive */
@media (max-width: 575px) {
    .modal-dialog {
        margin: 0.5rem;
    }

    .modal-content {
        border-radius: 0.5rem;
    }

    .lc-export-form .d-flex.justify-content-end {
        flex-direction: column;
    }
    .lc-export-form .d-flex .btn {
        width: 100%;
    }
}

/* Выгрузки: на узких экранах кнопки во всю ширину */
@media (max-width: 767px) {
    .lc-export-btns .lc-export-btn {
        min-width: 100%;
        flex: 1 1 100%;
    }
}

/* Responsive max-widths for forms */
.form-narrow {
    max-width: 100%;
}

@media (min-width: 576px) {
    .form-narrow {
        max-width: 32rem;
    }
}

@media (min-width: 768px) {
    .form-narrow {
        max-width: 40rem;
    }
}

.form-medium {
    max-width: 100%;
}

@media (min-width: 768px) {
    .form-medium {
        max-width: 56rem;
    }
}

/* Responsive action buttons in tables */
.table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

@media (max-width: 575px) {
    .table-actions {
        flex-direction: column;
    }

    .table-actions .btn {
        width: 100%;
        text-align: center;
    }
}

/* Prevent text overflow */
.text-break-mobile {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Responsive logo sizing */
@media (max-width: 575px) {
    .lc-brand-text {
        font-size: 0.875rem;
    }

    .lc-badge-ambassador,
    .lc-admin-badge {
        font-size: 0.625rem;
    }
}

/* Video wrapper touch improvements */
@media (max-width: 575px) {
    .video-wrap {
        margin: 0.25rem 0 0.75rem;
    }
}

/* Improve code/pre blocks on mobile */
code, pre {
    word-break: break-word;
    overflow-wrap: break-word;
}

@media (max-width: 575px) {
    code {
        font-size: 0.8125rem;
    }

    pre {
        font-size: 0.75rem;
        padding: 0.5rem;
    }
}

/* Responsive progress bars */
.progress {
    height: 0.5rem;
}

@media (min-width: 768px) {
    .progress {
        height: 0.625rem;
    }
}

/* Breadcrumb responsive */
@media (max-width: 575px) {
    .breadcrumb {
        font-size: 0.75rem;
        padding: 0.5rem 0;
    }

    .breadcrumb-item + .breadcrumb-item {
        padding-left: 0.25rem;
    }
}

/* Details/Summary mobile optimization */
details {
    cursor: pointer;
}

details summary {
    user-select: none;
    padding: 0.5rem 0;
}

@media (max-width: 575px) {
    details summary {
        font-size: 0.875rem;
    }
}