/* ============================================
   RESPONSIVE STYLES — PASTEL PALETTE THEME
   ============================================ */

/* Ensure 100% viewport usage */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    background-color: var(--mc-bg-deep);
}

/* Responsive container adjustments */
.container-fluid {
    padding-left: 15px;
    padding-right: 15px;
}

/* Card spacing for mobile */
.card {
    margin-bottom: 1rem;
    border-radius: var(--mc-radius-md);
}

.card-body {
    padding: 1rem;
}

/* Responsive text sizes */
h1 {
    font-size: 1.75rem;
    color: var(--mc-text-primary);
}

h2 {
    font-size: 1.5rem;
    color: var(--mc-text-primary);
}

h3 {
    font-size: 1.25rem;
    color: var(--mc-text-primary);
}

/* Button responsive sizing */
.btn {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    border-radius: var(--mc-radius-sm);
}

/* Form responsive sizing */
.form-control {
    font-size: 1rem;
    padding: 0.5rem;
}

/* Table responsive */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--mc-radius-sm);
}

/* Mobile breakpoint (up to 767px) */
@media (max-width: 767px) {
    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.25rem;
    }

    .card-body {
        padding: 0.75rem;
    }

    .btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
    }

    /* Stack cards vertically on mobile */
    .col-12 {
        margin-bottom: 0.5rem;
    }
}

/* Tablet breakpoint (768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .container-fluid {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Desktop breakpoint (992px and up) */
@media (min-width: 992px) {
    .container-fluid {
        padding-left: 30px;
        padding-right: 30px;
    }
}

/* Touch-friendly spacing */
.btn, .form-control, .nav-link {
    min-height: 44px;
    min-width: 44px;
}

/* Prevent text selection on double-tap */
.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Smooth scrolling for WebView */
* {
    -webkit-overflow-scrolling: touch;
}

/* High contrast for readability */
.text-muted {
    opacity: 0.7;
    color: var(--mc-text-muted) !important;
}

/* Loading spinner center */
.spinner-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

/* Responsive grid improvements */
.row {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}

.row > * {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* User info in header */
.user-info {
    margin-right: 1rem;
    color: var(--mc-text-secondary);
    font-weight: 500;
    font-size: 0.85rem;
}

@media (max-width: 767px) {
    .user-info {
        display: none;
    }
}

/* Dashboard card improvements */
.dashboard-card-icon {
    font-size: 2.5rem;
    color: var(--mc-accent-cyan);
}

@media (max-width: 767px) {
    .dashboard-card-icon {
        font-size: 2rem;
    }
}