/* ===============================
   RESPONSIVE DESIGN
   =============================== */

/* ===============================
   Mobile First Approach
   =============================== */

/* Base Mobile Styles (320px+) */
@media (max-width: 767px) {
    /* Layout für Mobile */
    .layout {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "header"
            "content";
        height: auto;
        min-height: 100vh;
    }
    
    .sidebar {
        display: none; /* Sidebar auf Mobile ausblenden */
    }
    
    .content {
        padding: 1rem;
        grid-area: content;
    }
    
    /* Navigation für Mobile */
    .navbar {
        padding: 0.5rem 1rem;
        flex-wrap: wrap;
    }
    
    .navbar h1 {
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
    }
    
    .navbar ul {
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
    }
    
    .navbar li a {
        padding: 0.6rem;
        text-align: center;
    }
    
    /* Subnav für Mobile */
    .subnav {
        padding: 0.5rem;
        margin-bottom: 1rem;
    }
    
    .subnav ul {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .subnav a {
        padding: 0.6rem;
        text-align: center;
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        background: var(--color-surface);
    }
    
    /* Formulare für Mobile */
    .form-inline .row {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .form-inline .col,
    .form-inline .col-1,
    .form-inline .col-2,
    .form-inline .col-3,
    .form-inline .col-4,
    .form-inline .col-6,
    .form-inline .col-12 {
        width: 100%;
        flex: none;
    }
    
    /* Tabellen für Mobile — Card-Layout wird in table.css gesteuert */
    .data-table {
        font-size: 0.85rem;
    }

    /* Admin Header stacked on mobile */
    .admin-header {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

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

    /* Cards: single column on mobile */
    .card-grid {
        grid-template-columns: 1fr;
    }

    .card {
        padding: 1rem;
    }

    /* Badge wrapping */
    .dm-list {
        justify-content: center;
    }

    /* Session Cards für Mobile */
    .session-cards {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    .session-card {
        padding: 0.8rem;
    }
    
    /* Charakter Profile für Mobile */
    .char-profile {
        padding: 1rem;
    }
    
    .profile-header {
        flex-direction: column;
        text-align: center;
    }
    
    .profile-avatar {
        margin-right: 0;
        margin-bottom: 1rem;
    }
    
    .profile-stats {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    /* Inventar für Mobile */
    .inventory-container {
        padding: 1rem;
    }
    
    .add-items-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    /* Buttons für Mobile */
    .btn {
        padding: 0.8rem 1rem;
        font-size: 0.9rem;
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    /* Table-Actions werden in table.css mobile gesteuert */
    
    /* Modal für Mobile */
    .modal-content {
        width: 95%;
        max-width: 95%;
        margin: 1rem auto;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .modal-header {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .modal-actions {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .modal-actions .btn {
        width: 100%;
    }
}

/* ===============================
   Tablet Styles (768px - 1023px)
   =============================== */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Layout für Tablet */
    .layout {
        grid-template-columns: 200px auto;
        grid-template-areas: "header header" "sidebar content";
    }
    
    .sidebar {
        width: 200px;
    }
    
    .content {
        padding: 1.5rem;
    }
    
    /* Navigation für Tablet */
    .navbar {
        padding: 0.8rem 1.5rem;
    }
    
    .navbar h1 {
        font-size: 1.3rem;
    }
    
    /* Subnav für Tablet */
    .subnav ul {
        flex-wrap: wrap;
        gap: 0.8rem;
    }
    
    /* Formulare für Tablet */
    .form-inline .row {
        gap: 1rem;
    }
    
    .form-inline .col-6 {
        flex: 0 0 calc(50% - 0.5rem);
    }
    
    .form-inline .col-4 {
        flex: 0 0 calc(33.33% - 0.7rem);
    }
    
    /* Tabellen für Tablet */
    .data-table {
        font-size: 0.9rem;
    }
    
    .data-table th,
    .data-table td {
        padding: 0.6rem 0.8rem;
    }
    
    /* Cards für Tablet */
    .card-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }

    .session-cards {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1rem;
    }
    
    /* Charakter Profile für Tablet */
    .profile-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    /* Inventar für Tablet */
    .add-items-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .form-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.8rem;
    }
    
    /* Buttons für Tablet */
    .btn {
        padding: 0.7rem 1.2rem;
        font-size: 0.9rem;
    }
    
    .table-actions {
        gap: 0.5rem;
    }
    
    /* Modal für Tablet */
    .modal-content {
        width: 80%;
        max-width: 600px;
    }
}

/* ===============================
   Desktop Styles (1024px+)
   =============================== */
@media (min-width: 1024px) {
    /* Layout für Desktop */
    .layout {
        grid-template-columns: 220px auto;
        grid-template-areas: "header header" "sidebar content";
    }
    
    .sidebar {
        width: 220px;
    }
    
    .content {
        padding: 2rem;
    }
    
    /* Navigation für Desktop */
    .navbar {
        padding: 1rem 2rem;
    }
    
    .navbar h1 {
        font-size: 1.4rem;
    }
    
    /* Subnav für Desktop */
    .subnav {
        padding: 0.8rem 1.5rem;
    }
    
    .subnav ul {
        gap: 1.5rem;
    }
    
    /* Formulare für Desktop */
    .form-inline .row {
        gap: 1.5rem;
    }
    
    /* Tabellen für Desktop */
    .data-table {
        font-size: 1rem;
    }
    
    .data-table th,
    .data-table td {
        padding: 0.8rem 1rem;
    }
    
    /* Session Cards für Desktop */
    .session-cards {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 1.5rem;
    }
    
    /* Charakter Profile für Desktop */
    .profile-stats {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }
    
    /* Inventar für Desktop */
    .add-items-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
    
    .form-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
    
    /* Buttons für Desktop */
    .btn {
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
    }
    
    .table-actions {
        gap: 0.8rem;
    }
    
    /* Modal für Desktop */
    .modal-content {
        width: 60%;
        max-width: 800px;
    }
}

/* ===============================
   Large Desktop Styles (1440px+)
   =============================== */
@media (min-width: 1440px) {
    .content {
        padding: 2.5rem;
    }
    
    .session-cards {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        gap: 2rem;
    }
    
    .add-items-grid {
        gap: 3rem;
    }
    
    .form-grid {
        gap: 1.5rem;
    }
}

/* ===============================
   Utility Classes für Responsive
   =============================== */

/* Mobile-only */
.mobile-only {
    display: block;
}

@media (min-width: 768px) {
    .mobile-only {
        display: none;
    }
}

/* Desktop-only */
.desktop-only {
    display: none;
}

@media (min-width: 768px) {
    .desktop-only {
        display: block;
    }
}

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

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

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

/* Hide on tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .hide-tablet {
        display: none !important;
    }
}

/* Hide on desktop */
@media (min-width: 1024px) {
    .hide-desktop {
        display: none !important;
    }
}

/* ===============================
   Touch-friendly Elements
   =============================== */
@media (max-width: 1023px) {
    /* Größere Touch-Targets */
    .btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    .sidebar a,
    .subnav a {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Größere Checkboxen und Radio-Buttons */
    input[type="checkbox"],
    input[type="radio"] {
        width: 20px;
        height: 20px;
    }
    
    /* Größere Form-Elemente */
    input,
    select,
    textarea {
        min-height: 44px;
        font-size: 16px; /* Verhindert Zoom auf iOS */
    }
}

/* ===============================
   Print Styles
   =============================== */
@media print {
    .sidebar,
    .navbar,
    .subnav,
    .btn,
    .modal {
        display: none !important;
    }
    
    .layout {
        grid-template-columns: 1fr;
        grid-template-areas: "content";
    }
    
    .content {
        padding: 0;
    }
    
    .data-table {
        font-size: 12px;
    }
    
    .session-card {
        break-inside: avoid;
        margin-bottom: 1rem;
    }
}