/**
 * LinkedFit - Desktop/iPad Responsive Styles
 *
 * Diese Datei kann in config.php deaktiviert werden:
 * define('ENABLE_DESKTOP_CSS', false);
 *
 * Breakpoints:
 * - 768px+  : Tablet (iPad Portrait)
 * - 1024px+ : Tablet Landscape / Small Desktop
 * - 1280px+ : Desktop mit Sidebars
 * - 1536px+ : Large Desktop
 */

/* ==========================================
   TABLET (768px+) - iPad Portrait
   ========================================== */
@media (min-width: 768px) {

    /* Body Background */
    body {
        background: linear-gradient(135deg, #1A1A2E 0%, #16213E 50%, #0F3460 100%);
        background-attachment: fixed;
    }

    /* Main App Container - Centered Card */
    .app-container {
        max-width: 540px;
        margin: 0 auto;
        min-height: 100vh;
        background: #F9FAFB;
        box-shadow: 0 0 80px rgba(0, 0, 0, 0.4);
        position: relative;
        border-left: 1px solid rgba(255,255,255,0.1);
        border-right: 1px solid rgba(255,255,255,0.1);
    }

    /* Bottom Navigation - Centered */
    .app-nav-bottom,
    nav[class*="fixed"][class*="bottom-0"] {
        max-width: 540px;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
        border-radius: 16px 16px 0 0;
        margin-bottom: 0;
    }

    /* Toast Container - Centered */
    #toast-container {
        max-width: 540px;
        left: 50% !important;
        transform: translateX(-50%);
    }

    /* XP/Achievement Toasts - Centered */
    #xp-toast,
    #achievement-toast {
        max-width: 540px;
    }

    /* Global Loading - Centered */
    #global-loading {
        max-width: 540px;
    }

    /* Header - Enhanced for Desktop */
    header.sticky {
        border-radius: 0;
    }

    /* Cards - More padding, better shadows */
    .bg-white.rounded-xl,
    .bg-white.rounded-2xl {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05),
                    0 2px 4px -1px rgba(0, 0, 0, 0.03);
    }

    /* Hover Effects for Interactive Elements */
    a:hover,
    button:hover {
        transition: all 0.2s ease;
    }

    .touch-feedback:hover {
        opacity: 0.85;
        transform: translateY(-1px);
    }

    /* Better Input Focus States */
    input:focus,
    textarea:focus,
    select:focus {
        box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.15);
    }

    /* Post Cards - Wider */
    .post-card {
        padding: 1.25rem;
    }

    /* Profile Header - More space */
    .profile-header {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    /* Modals - Better positioning */
    [x-show][class*="fixed"][class*="inset-0"] > div[class*="bg-white"][class*="rounded"] {
        max-width: 480px;
        margin: 2rem auto;
        max-height: calc(100vh - 4rem);
    }
}


/* ==========================================
   TABLET LANDSCAPE / SMALL DESKTOP (1024px+)
   ========================================== */
@media (min-width: 1024px) {

    /* Wider Container */
    .app-container {
        max-width: 600px;
    }

    .app-nav-bottom,
    nav[class*="fixed"][class*="bottom-0"] {
        max-width: 600px;
    }

    #toast-container,
    #xp-toast,
    #achievement-toast,
    #global-loading {
        max-width: 600px;
    }

    /* Show Desktop Branding on Left */
    .desktop-branding-left {
        display: flex !important;
    }

    /* Grid Layouts - More columns */
    .grid.grid-cols-2 {
        /* Keep 2 cols for most grids */
    }

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

    /* Better spacing for lists */
    .space-y-3 > * + * {
        margin-top: 1rem;
    }

    /* Larger touch targets */
    .p-2 {
        padding: 0.625rem;
    }

    /* Better button sizing */
    button.py-3,
    a.py-3 {
        padding-top: 0.875rem;
        padding-bottom: 0.875rem;
    }
}


/* ==========================================
   DESKTOP WITH SIDEBARS (1280px+)
   ========================================== */
@media (min-width: 1280px) {

    /* App Container stays centered */
    .app-container {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Show Left Sidebar - Branding */
    .md\\:fixed.md\\:inset-y-0.md\\:left-8 {
        display: flex !important;
        left: calc(50% - 420px) !important;
    }

    /* Navigation stays within container */
    .app-nav-bottom,
    nav[class*="fixed"][class*="bottom-0"] {
        max-width: 600px;
    }

    /* Desktop Navigation Enhancement */
    .app-nav-bottom a,
    nav[class*="fixed"][class*="bottom-0"] a {
        padding: 0.75rem 1rem;
    }

    .app-nav-bottom a:hover,
    nav[class*="fixed"][class*="bottom-0"] a:hover {
        background-color: rgba(255, 107, 53, 0.1);
        border-radius: 12px;
    }
}


/* ==========================================
   LARGE DESKTOP (1536px+)
   ========================================== */
@media (min-width: 1536px) {

    /* Branding further left */
    .md\\:fixed.md\\:inset-y-0.md\\:left-8 {
        left: calc(50% - 500px) !important;
    }

    /* Could add right sidebar here if needed */
    .desktop-sidebar-right {
        display: block;
        position: fixed;
        top: 50%;
        right: calc(50% - 480px);
        transform: translateY(-50%);
        width: 280px;
        /* Content would go here */
    }
}


/* ==========================================
   DESKTOP-SPECIFIC COMPONENTS
   ========================================== */
@media (min-width: 768px) {

    /* Feed Posts - Better Card Layout */
    .feed-post {
        border-radius: 16px;
        margin-bottom: 1rem;
        overflow: hidden;
    }

    /* Image Galleries - Larger */
    .post-images img {
        border-radius: 12px;
    }

    /* Comments Section - More Space */
    .comments-section {
        padding: 1.5rem;
    }

    /* Profile Stats - Horizontal on Desktop */
    .profile-stats {
        flex-direction: row;
        justify-content: center;
        gap: 3rem;
    }

    /* Quick Actions Grid */
    .quick-actions-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    /* Training Cards - Side by Side */
    .training-card-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    /* Challenge Cards */
    .challenge-card {
        padding: 1.5rem;
    }

    /* Leaderboard - Better Table Layout */
    .leaderboard-item {
        padding: 1rem 1.5rem;
    }

    /* Form Inputs - Larger */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    textarea,
    select {
        padding: 0.875rem 1rem;
        font-size: 1rem;
    }

    /* Buttons - Larger */
    .btn-primary,
    .btn-secondary,
    button[type="submit"] {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }

    /* Navigation Items - Larger Touch Targets */
    .nav-item {
        padding: 0.875rem;
    }

    /* Modal Dialogs - Centered & Sized */
    .modal-content {
        max-width: 500px;
        margin: 10vh auto;
        border-radius: 20px;
    }

    /* Dropdown Menus */
    .dropdown-menu {
        min-width: 200px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    }

    /* Workout Timer - Larger */
    .workout-timer {
        font-size: 4rem;
    }

    /* Progress Bars - Thicker */
    .progress-bar {
        height: 10px;
        border-radius: 5px;
    }

    /* Avatar Sizes - Larger on Desktop */
    .avatar-sm {
        width: 40px;
        height: 40px;
    }

    .avatar-md {
        width: 56px;
        height: 56px;
    }

    .avatar-lg {
        width: 96px;
        height: 96px;
    }

    /* Story Circles - Larger */
    .story-circle {
        width: 72px;
        height: 72px;
    }

    /* Better Scrolling */
    .overflow-x-auto {
        scrollbar-width: thin;
    }

    .overflow-x-auto::-webkit-scrollbar {
        height: 6px;
    }

    .overflow-x-auto::-webkit-scrollbar-thumb {
        background: #CBD5E1;
        border-radius: 3px;
    }
}


/* ==========================================
   TABLET-SPECIFIC FIXES
   ========================================== */
@media (min-width: 768px) and (max-width: 1023px) {

    /* iPad specific adjustments */
    .app-container {
        max-width: 540px;
    }

    /* Ensure modals don't overflow */
    .modal-content {
        max-height: 80vh;
        overflow-y: auto;
    }

    /* Touch-friendly spacing */
    .touch-target {
        min-height: 44px;
        min-width: 44px;
    }
}


/* ==========================================
   HOVER STATES (Desktop only)
   ========================================== */
@media (hover: hover) and (pointer: fine) {

    /* Card Hover Effects */
    .card-hover:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    }

    /* Button Hover */
    .btn-hover:hover {
        transform: scale(1.02);
    }

    /* Link Hover */
    .link-hover:hover {
        color: #FF6B35;
    }

    /* Icon Button Hover */
    .icon-btn:hover {
        background-color: rgba(0,0,0,0.05);
        border-radius: 50%;
    }

    /* Post Actions Hover */
    .post-action:hover {
        color: #FF6B35;
        background-color: rgba(255, 107, 53, 0.1);
        border-radius: 8px;
    }

    /* Nav Item Hover */
    .nav-item:hover {
        color: #FF6B35;
    }

    /* Avatar Hover */
    .avatar:hover {
        opacity: 0.9;
        transform: scale(1.05);
    }
}


/* ==========================================
   KEYBOARD FOCUS STATES (Accessibility)
   ========================================== */
@media (min-width: 768px) {

    /* Visible Focus Ring */
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    textarea:focus-visible,
    select:focus-visible {
        outline: 2px solid #FF6B35;
        outline-offset: 2px;
    }

    /* Skip Link for Keyboard Navigation */
    .skip-link {
        position: absolute;
        top: -100%;
        left: 0;
        background: #FF6B35;
        color: white;
        padding: 1rem;
        z-index: 9999;
    }

    .skip-link:focus {
        top: 0;
    }
}


/* ==========================================
   PRINT STYLES (Optional)
   ========================================== */
@media print {

    /* Hide navigation */
    .app-nav-bottom,
    nav[class*="fixed"],
    header.sticky {
        display: none !important;
    }

    /* Full width for print */
    .app-container {
        max-width: 100%;
        box-shadow: none;
        background: white;
    }

    /* Remove background */
    body {
        background: white;
    }
}


/* ==========================================
   UTILITY CLASSES FOR RESPONSIVE
   ========================================== */

/* Hide on mobile, show on desktop */
.desktop-only {
    display: none !important;
}

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

    .desktop-only-flex {
        display: flex !important;
    }

    .desktop-only-grid {
        display: grid !important;
    }

    .desktop-only-inline {
        display: inline !important;
    }
}

/* Hide on desktop, show on mobile */
@media (min-width: 768px) {
    .mobile-only {
        display: none !important;
    }
}

/* Responsive text sizes */
@media (min-width: 768px) {
    .text-responsive-lg {
        font-size: 1.125rem;
    }

    .text-responsive-xl {
        font-size: 1.25rem;
    }

    .text-responsive-2xl {
        font-size: 1.5rem;
    }
}

/* Responsive spacing */
@media (min-width: 768px) {
    .p-responsive {
        padding: 1.5rem;
    }

    .px-responsive {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .py-responsive {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .m-responsive {
        margin: 1.5rem;
    }

    .gap-responsive {
        gap: 1.5rem;
    }
}