/*
 * Croplod Responsive Design
 * Mobile-first, supports 320px through 1024px+
 * Tested: 320px, 360px, 375px, 390px, 393px, 412px, 430px, 480px, 768px, 820px, 1024px
 */

/* === Global overflow protection === */
html, body, .account-shell, .account-main, .account-content,
.auth-page, .container {
    max-width: 100vw;
    overflow-x: hidden;
}

/* === Global responsive resets === */
img, video, canvas, svg {
    max-width: 100%;
    height: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

/* === Very Small Mobile (< 360px) === */
@media (max-width: 359px) {
    :root {
        --header-height: 52px;
    }

    .container {
        padding: 0 10px;
    }

    .auth-card {
        padding: 20px 16px;
        border-radius: 14px;
    }

    .auth-logo img {
        width: 40px;
        height: 40px;
    }

    .auth-logo h1 {
        font-size: var(--font-size-lg);
    }

    .auth-slide-title {
        font-size: 16px;
    }

    .auth-slide-subtitle {
        font-size: 12px;
    }

    .auth-form .form-input {
        height: 42px;
        font-size: 13px;
    }

    .auth-btn-primary,
    .auth-google-btn {
        height: 42px;
        font-size: 13px;
    }

    .account-content {
        padding: 16px 12px;
    }

    .account-header {
        padding: 0 12px;
    }

    .account-card {
        padding: 14px;
        border-radius: 12px;
    }

    .account-chip {
        padding: 5px 10px;
        font-size: 11px;
    }

    .stat-card {
        padding: 12px;
    }

    .stat-card-icon {
        width: 36px;
        height: 36px;
    }

    .stat-card-value {
        font-size: 16px;
    }

    .grid-2 {
        grid-template-columns: 1fr;
    }
}

/* === Small Mobile (< 480px) === */
@media (max-width: 479px) {
    :root {
        --header-height: 54px;
    }

    .container {
        padding: 0 12px;
    }

    .auth-card {
        padding: 24px 18px;
        border-radius: 16px;
    }

    .auth-logo img {
        width: 44px;
        height: 44px;
    }

    .auth-logo h1 {
        font-size: var(--font-size-xl);
    }

    .auth-slide-title {
        font-size: 17px;
    }

    .auth-slide-subtitle {
        font-size: 13px;
    }

    .auth-form .form-input {
        height: 44px;
        font-size: 14px;
    }

    .auth-btn-primary,
    .auth-google-btn {
        height: 44px;
        font-size: 14px;
    }

    .card {
        padding: var(--space-md);
        border-radius: var(--radius-md);
    }

    .btn {
        padding: 0.5rem 1rem;
    }

    .btn-lg {
        padding: 0.625rem 1.25rem;
        font-size: var(--font-size-sm);
    }

    .grid-2 {
        grid-template-columns: 1fr;
    }

    .grid-3 {
        grid-template-columns: 1fr;
    }

    .grid-4 {
        grid-template-columns: 1fr;
    }

    /* Profile modal bottom sheet */
    .profile-modal {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
    }

    .profile-modal.active {
        transform: translateY(0);
    }

    .pm-greeting {
        font-size: 18px;
    }

    .pm-avatar-wrap {
        width: 72px;
        height: 72px;
    }

    .pm-avatar {
        width: 72px;
        height: 72px;
        font-size: 28px;
    }

    .pm-bottom-actions {
        margin: 0 12px 16px;
    }

    /* Confirm modal */
    .croplod-confirm-modal {
        padding: 20px;
        border-radius: 16px;
        max-width: calc(100% - 24px);
    }

    .croplod-confirm-title {
        font-size: 16px;
    }

    .croplod-confirm-message {
        font-size: 13px;
    }

    .croplod-confirm-actions {
        flex-direction: column;
    }

    .croplod-confirm-btn {
        padding: 12px;
    }

    /* Notifications */
    .croplod-notifications {
        top: 12px;
        max-width: calc(100% - 16px);
    }

    .croplod-notification {
        padding: 10px 12px;
        border-radius: 10px;
        gap: 10px;
    }

    .croplod-notification-text {
        font-size: 13px;
    }

    /* Hero section on home */
    .hero-section {
        padding: 3rem 0;
    }

    .hero-section h1 {
        font-size: var(--font-size-2xl) !important;
    }
}

/* === Mobile (< 640px) === */
@media (max-width: 639px) {
    :root {
        --header-height: 56px;
    }

    .container {
        padding: 0 16px;
    }

    .auth-card {
        padding: 28px 24px;
        border-radius: 16px;
    }

    .auth-logo img {
        width: 48px;
        height: 48px;
    }

    .auth-slide-title {
        font-size: 18px;
    }

    .card {
        padding: var(--space-lg);
        border-radius: var(--radius-lg);
    }

    .btn {
        padding: 0.5rem 1rem;
    }

    .btn-lg {
        padding: 0.75rem 1.5rem;
    }

    .grid-2 {
        grid-template-columns: 1fr;
    }

    .grid-3 {
        grid-template-columns: 1fr;
    }

    /* Header actions spacing */
    .account-header-actions {
        gap: 4px;
    }

    .account-header-action-btn {
        width: 36px;
        height: 36px;
    }

    .account-header-avatar {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }

    /* Content padding */
    .account-content {
        padding: 20px 16px;
    }

    .account-header {
        padding: 0 16px;
    }

    .account-header-brand-sub {
        display: none;
    }

    .account-page-title {
        font-size: 20px;
    }

    .account-page-subtitle {
        font-size: 13px;
    }

    /* Profile hero */
    .account-profile-hero {
        padding: 28px 16px 24px;
    }

    .account-profile-avatar {
        width: 88px;
        height: 88px;
        font-size: 34px;
    }

    .account-profile-avatar-edit {
        width: 28px;
        height: 28px;
    }

    .account-profile-name {
        font-size: 20px;
    }

    .account-profile-email {
        font-size: 14px;
    }

    /* Search */
    .account-search {
        margin-bottom: 16px;
    }

    .account-search-input {
        height: 44px;
        font-size: 14px;
        padding: 0 40px 0 16px;
    }

    /* Chips */
    .account-chips {
        gap: 8px;
        margin-bottom: 24px;
    }

    .account-chip {
        padding: 6px 14px;
        font-size: 12px;
    }

    /* Cards */
    .account-card {
        padding: 16px;
        margin-bottom: 12px;
        border-radius: 14px;
    }

    .account-card-header {
        margin-bottom: 14px;
    }

    .account-card-title {
        font-size: 15px;
    }

    /* Stat cards */
    .stat-card {
        padding: 14px;
        gap: 12px;
    }

    .stat-card-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .stat-card-icon svg {
        width: 18px;
        height: 18px;
    }

    .stat-card-label {
        font-size: 12px;
    }

    .stat-card-value {
        font-size: 18px;
    }

    /* List items */
    .list-item {
        padding: var(--space-sm) var(--space-md);
    }

    .list-item-icon {
        width: 36px;
        height: 36px;
    }

    /* Info rows */
    .info-row {
        padding: 12px 0;
        flex-wrap: wrap;
        gap: 4px;
    }

    .info-row-label {
        font-size: 13px;
    }

    .info-row-value {
        font-size: 13px;
        word-break: break-all;
    }

    /* Forms on mobile */
    .form-group {
        margin-bottom: var(--space-md);
    }

    .form-input {
        height: 46px;
        font-size: 14px;
    }

    .form-textarea {
        min-height: 80px;
    }

    /* Auth */
    .auth-page {
        padding: 16px;
        align-items: flex-start;
        padding-top: 32px;
    }

    .auth-email-display {
        font-size: 12px;
        padding: 5px 12px;
    }

    .auth-back-link {
        font-size: 12px;
    }

    /* Empty state */
    .empty-state {
        padding: 32px 16px;
    }

    .empty-state-icon {
        width: 48px;
        height: 48px;
    }

    .empty-state-title {
        font-size: 15px;
    }

    .empty-state-desc {
        font-size: 13px;
    }

    /* Page header */
    .account-page-header {
        margin-bottom: 20px;
    }

    /* Table responsive wrapper */
    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 calc(-1 * var(--space-md));
        padding: 0 var(--space-md);
    }

    .table-responsive table {
        min-width: 480px;
    }

    /* Session items */
    .session-item {
        padding: 12px 0;
    }

    /* Notification items */
    .notification-item {
        padding: 12px 0;
    }

    /* Security sections */
    .security-section {
        margin-bottom: var(--space-lg);
    }

    /* Button groups */
    .btn-group {
        flex-direction: column;
    }

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

    /* Checkbox groups */
    .checkbox-group {
        gap: 12px;
    }

    /* Footer */
    .footer {
        padding: var(--space-md) 0;
        text-align: center;
    }

    /* Profile hero on profile page */
    .profile-hero-section {
        padding: 24px 16px;
    }

    /* Form layout on mobile */
    .grid-2 .form-group {
        grid-column: 1 / -1;
    }

    /* 2FA code input mobile */
    .code-input {
        font-size: 20px;
        letter-spacing: 6px;
    }

    /* Auth page theme toggle */
    .auth-page .theme-toggle {
        margin: 16px auto;
    }

    /* Recovery codes grid */
    .recovery-codes-grid {
        grid-template-columns: 1fr;
    }

    /* Settings cards */
    .settings-card {
        padding: 16px;
    }
}

/* === Tablet (640px - 1023px) === */
@media (min-width: 640px) and (max-width: 1023px) {
    .container {
        padding: 0 var(--space-xl);
    }

    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .account-content {
        padding: 24px 20px;
    }

    .account-profile-hero {
        padding: 36px 20px 32px;
    }

    .account-profile-avatar {
        width: 104px;
        height: 104px;
        font-size: 40px;
    }
}

/* === Desktop (>= 1024px) === */
@media (min-width: 1024px) {
    .container {
        padding: 0 var(--space-2xl);
    }
}

/* === Grid System === */
.grid {
    display: grid;
    gap: var(--space-lg);
}

.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* === Flex Utilities === */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.flex-wrap {
    flex-wrap: wrap;
}

.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

/* === Spacing Utilities === */
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }

/* === Text Utilities === */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }
.text-lg { font-size: var(--font-size-lg); }
.text-muted { color: var(--text-secondary); }
.text-error { color: var(--color-error-500); }
.text-success { color: var(--color-success-500); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* === Display Utilities === */
.hidden { display: none !important; }
.block { display: block; }
.inline-block { display: inline-block; }
.w-full { width: 100%; }

/* === Overflow protection for specific containers === */
.account-shell {
    overflow-x: hidden;
}

.auth-page {
    overflow-x: hidden;
}

.card {
    overflow-wrap: break-word;
    word-wrap: break-word;
    min-width: 0;
}

/* Image responsive */
img {
    height: auto;
}

/* Scrollable tables on mobile */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* === Touch-friendly targets === */
@media (max-width: 1023px) {
    /* Ensure minimum touch target size */
    .account-sidebar-link {
        min-height: 44px;
    }

    .account-chip {
        min-height: 40px;
    }

    .list-item {
        min-height: 44px;
    }

    .btn {
        min-height: 44px;
    }

    .form-checkbox {
        min-width: 20px;
        min-height: 20px;
    }

    .pm-action-btn {
        min-height: 48px;
    }
}

/* === Safe area support for modern phones === */
@supports (padding: max(0px)) {
    .account-header {
        padding-left: max(24px, env(safe-area-inset-left));
        padding-right: max(24px, env(safe-area-inset-right));
    }

    .account-sidebar {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .auth-page {
        padding-left: max(24px, env(safe-area-inset-left));
        padding-right: max(24px, env(safe-area-inset-right));
    }
}

/* === Print styles === */
@media print {
    .account-header,
    .account-sidebar,
    .account-sidebar-overlay,
    .account-header-menu-btn,
    .toast-container,
    .croplod-notifications {
        display: none !important;
    }

    .account-main {
        margin: 0;
        padding: 0;
    }
}