/* ===========================
   完全レスポンシブデザイン
   =========================== */

/* Base Typography Scale */
:root {
    --base-font-size: 16px;
    --h1-size: 2.5rem;
    --h2-size: 2rem;
    --h3-size: 1.75rem;
    --h4-size: 1.5rem;
    --h5-size: 1.25rem;
    --h6-size: 1rem;
    --small-text: 0.875rem;
    --tiny-text: 0.75rem;
}

/* Extra Large Screens (1920px+) */
@media (min-width: 1920px) {
    :root {
        --base-font-size: 18px;
    }
    
    .container {
        max-width: 1600px;
    }
}

/* Large Desktop (1440px - 1919px) */
@media (min-width: 1440px) and (max-width: 1919px) {
    .container {
        max-width: 1320px;
    }
}

/* Desktop (1200px - 1439px) */
@media (min-width: 1200px) and (max-width: 1439px) {
    .container {
        max-width: 1140px;
    }
}

/* Small Desktop (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .container {
        max-width: 960px;
    }
    
    .sidebar {
        width: 240px;
    }
}

/* Tablet Landscape (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    :root {
        --h1-size: 2.25rem;
        --h2-size: 1.875rem;
        --h3-size: 1.5rem;
        --h4-size: 1.375rem;
    }
    
    .container {
        max-width: 720px;
        padding: 0 20px;
    }
    
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .card {
        padding: 1.5rem;
    }
}

/* Tablet Portrait (600px - 767px) */
@media (min-width: 600px) and (max-width: 767px) {
    :root {
        --h1-size: 2rem;
        --h2-size: 1.75rem;
        --h3-size: 1.5rem;
        --h4-size: 1.25rem;
    }
    
    .container {
        max-width: 100%;
        padding: 0 20px;
    }
    
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Large Mobile (480px - 599px) */
@media (min-width: 480px) and (max-width: 599px) {
    :root {
        --base-font-size: 15px;
        --h1-size: 1.875rem;
        --h2-size: 1.625rem;
        --h3-size: 1.375rem;
        --h4-size: 1.25rem;
    }
    
    .container {
        padding: 0 16px;
    }
    
    .card {
        padding: 1.25rem;
        margin-bottom: 1rem;
    }
    
    .btn,
    .button {
        padding: 0.75rem 1.5rem;
        font-size: 0.9375rem;
    }
}

/* Mobile (320px - 479px) */
@media (max-width: 479px) {
    :root {
        --base-font-size: 14px;
        --h1-size: 1.75rem;
        --h2-size: 1.5rem;
        --h3-size: 1.25rem;
        --h4-size: 1.125rem;
    }
    
    .container {
        padding: 0 12px;
    }
    
    .card {
        padding: 1rem;
        margin-bottom: 0.75rem;
        border-radius: 8px;
    }
    
    .btn,
    .button {
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    /* Stack form elements */
    .form-group {
        margin-bottom: 1rem;
    }
    
    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px; /* Prevent zoom on iOS */
    }
}

/* Small Mobile (below 320px) */
@media (max-width: 319px) {
    :root {
        --base-font-size: 13px;
        --h1-size: 1.5rem;
        --h2-size: 1.375rem;
        --h3-size: 1.25rem;
        --h4-size: 1.125rem;
    }
    
    .container {
        padding: 0 10px;
    }
}

/* === Common Responsive Patterns === */

/* Navigation */
@media (max-width: 991px) {
    .main-nav {
        display: none;
    }
    
    .mobile-nav {
        display: block;
    }
    
    .mobile-menu-toggle {
        display: block;
    }
    
    .site-header {
        position: sticky;
        top: 0;
        z-index: 9999;
    }
}

@media (min-width: 992px) {
    .mobile-nav,
    .mobile-menu-toggle,
    .mobile-header {
        display: none !important;
    }
}

/* Sidebar */
@media (max-width: 991px) {
    .sidebar {
        position: fixed;
        left: -300px;
        width: 280px;
        height: 100vh;
        transition: left 0.3s ease;
        z-index: 9998;
    }
    
    .sidebar.active {
        left: 0;
    }
    
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9997;
    }
    
    .sidebar-overlay.active {
        display: block;
    }
}

/* Grid Systems */
@media (max-width: 767px) {
    [class*="col-"] {
        width: 100%;
        margin-bottom: 1rem;
    }
    
    .row {
        flex-direction: column;
    }
}

/* Tables */
@media (max-width: 767px) {
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    table {
        min-width: 600px;
    }
}

/* Cards and Components */
@media (max-width: 599px) {
    .card-horizontal {
        flex-direction: column;
    }
    
    .card-image {
        width: 100%;
        height: 200px;
    }
    
    .modal-content {
        margin: 10px;
        max-height: calc(100vh - 20px);
        overflow-y: auto;
    }
}

/* Forms */
@media (max-width: 479px) {
    .form-inline {
        flex-direction: column;
    }
    
    .form-inline > * {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .input-group {
        flex-direction: column;
    }
    
    .input-group > * {
        width: 100%;
        border-radius: var(--radius) !important;
    }
}

/* Text and Typography */
@media (max-width: 599px) {
    .text-truncate-mobile {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .hide-mobile {
        display: none !important;
    }
    
    .show-mobile {
        display: block !important;
    }
}

/* Images */
@media (max-width: 767px) {
    img {
        max-width: 100%;
        height: auto;
    }
    
    .avatar-large {
        width: 80px;
        height: 80px;
    }
    
    .avatar-medium {
        width: 48px;
        height: 48px;
    }
    
    .avatar-small {
        width: 32px;
        height: 32px;
    }
}

/* Spacing Utilities */
@media (max-width: 599px) {
    .p-lg { padding: 1.5rem !important; }
    .p-md { padding: 1rem !important; }
    .p-sm { padding: 0.5rem !important; }
    
    .m-lg { margin: 1.5rem !important; }
    .m-md { margin: 1rem !important; }
    .m-sm { margin: 0.5rem !important; }
    
    .mt-lg { margin-top: 1.5rem !important; }
    .mb-lg { margin-bottom: 1.5rem !important; }
}

/* Referral Page Specific */
@media (max-width: 767px) {
    .points-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .point-item {
        display: flex;
        align-items: center;
        padding: 1rem;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .point-icon {
        font-size: 2rem;
        margin-right: 1rem;
    }
    
    .invite-link-container {
        flex-direction: column;
    }
    
    .invite-link-input {
        margin-bottom: 0.5rem;
    }
    
    .copy-button {
        width: 100%;
    }
}

/* Auth Pages */
@media (max-width: 599px) {
    .auth-container {
        padding: 1rem;
    }
    
    .auth-card {
        width: 100%;
        max-width: 400px;
        padding: 1.5rem;
    }
    
    .auth-header h1 {
        font-size: 1.75rem;
    }
}

/* Dashboard */
@media (max-width: 991px) {
    .dashboard-main {
        margin-left: 0;
        padding: 1rem;
    }
    
    .dashboard-container {
        padding: 0;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
}

@media (max-width: 599px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .chart-container {
        height: 300px;
    }
}

/* Utility Classes */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }

@media (min-width: 576px) {
    .d-sm-none { display: none !important; }
    .d-sm-block { display: block !important; }
    .d-sm-flex { display: flex !important; }
    .d-sm-grid { display: grid !important; }
}

@media (min-width: 768px) {
    .d-md-none { display: none !important; }
    .d-md-block { display: block !important; }
    .d-md-flex { display: flex !important; }
    .d-md-grid { display: grid !important; }
}

@media (min-width: 992px) {
    .d-lg-none { display: none !important; }
    .d-lg-block { display: block !important; }
    .d-lg-flex { display: flex !important; }
    .d-lg-grid { display: grid !important; }
}

@media (min-width: 1200px) {
    .d-xl-none { display: none !important; }
    .d-xl-block { display: block !important; }
    .d-xl-flex { display: flex !important; }
    .d-xl-grid { display: grid !important; }
}

/* Print Styles */
@media print {
    .no-print,
    .sidebar,
    .mobile-nav,
    .site-header,
    .user-menu,
    .notification-popup {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.5;
    }
    
    .container {
        max-width: 100%;
    }
}