/* ==========================================================================
   TryLa Desktop Redesign — Premium Dashboard Experience
   All styles scoped to @media (min-width: 768px) for desktop only
   ========================================================================== */


/* ==========================================================================
   Phase 1: Desktop Sidebar Navigation
   ========================================================================== */

/* Sidebar hidden by default (mobile + not logged in) */
.desktop-sidebar {
    display: none;
}

@media (min-width: 768px) {
    /* Hide mobile-only elements on desktop */
    .mobile-bottom-nav { display: none !important; }
    .bottom-sheet-overlay, .bottom-sheet { display: none !important; }
    .tryon-mobile-sticky-cta { display: none !important; }

    /* Hide old horizontal tab navigation */
    .tab-navigation { display: none !important; }

    /* Show header with only TryLa logo centered, hide controls (they're in sidebar) */
    #sticky-header-wrapper { display: block !important; }
    .user-header {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 12px 20px !important;
        background: var(--bg-secondary, #161b26) !important;
        border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.06)) !important;
    }
    .user-header .user-details-group { display: none !important; }
    .user-header .header-actions { display: none !important; }
    .user-header h1 {
        font-size: 1.8rem !important;
        margin: 0 !important;
        background: var(--accent-gradient, linear-gradient(135deg, #8b5cf6, #d946ef));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* --- Sidebar Container --- */
    .desktop-sidebar {
        display: flex;
        position: fixed;
        top: 0;
        right: 0;                              /* RTL: sidebar on right */
        width: 150px;                          /* Always-expanded width with labels */
        height: 100vh;
        background: var(--bg-secondary, #161b26);
        border-left: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
        flex-direction: column;
        z-index: 1000;
        overflow: hidden;
    }

    [dir="ltr"] .desktop-sidebar {
        right: auto;
        left: 0;
        border-left: none;
        border-right: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
    }

    /* --- Logo --- */
    .sidebar-logo {
        height: 64px;
        display: flex;
        align-items: center;
        padding: 0 18px;
        gap: 12px;
        border-bottom: 1px solid var(--border-subtle);
        flex-shrink: 0;
    }
    .sidebar-logo h1 {
        font-size: 1.5rem;
        font-weight: 900;
        color: var(--accent-primary, #8b5cf6);
        min-width: 28px;
        text-align: center;
        margin: 0;
        padding: 0;
        background: none;
    }
    .sidebar-logo-full {
        font-size: 1.3rem;
        font-weight: 800;
        color: var(--text-primary, #f0f2f5);
        white-space: nowrap;
        opacity: 1;
        transition: opacity 200ms;
    }

    /* --- Nav Items --- */
    .sidebar-nav {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 12px 8px;
        gap: 4px;
        overflow-y: auto;
    }

    .sidebar-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 12px 18px;
        border-radius: var(--radius-sm, 8px);
        color: var(--text-secondary, #8b95a8);
        text-decoration: none;
        transition: background-color 150ms, color 150ms, opacity 150ms;
        white-space: nowrap;
        cursor: pointer;
        position: relative;
        border: none;
        background: none;
        font-family: inherit;
        font-size: inherit;
        width: 100%;
        text-align: start;
    }
    .sidebar-item:hover {
        background: rgba(255, 255, 255, 0.06);
        color: var(--text-primary, #f0f2f5);
    }

    .sidebar-item.active {
        color: var(--accent-primary, #8b5cf6);
        background: rgba(139, 92, 246, 0.1);
    }

    /* Active indicator bar on sidebar edge */
    .sidebar-item.active::before {
        content: '';
        position: absolute;
        right: -8px;              /* RTL: right edge of sidebar */
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 24px;
        background: var(--accent-primary, #8b5cf6);
        border-radius: 3px 0 0 3px;
    }
    [dir="ltr"] .sidebar-item.active::before {
        right: auto;
        left: -8px;
        border-radius: 0 3px 3px 0;
    }

    .sidebar-item i {
        font-size: 1.15rem;
        min-width: 28px;
        text-align: center;
        flex-shrink: 0;
    }

    .sidebar-label {
        opacity: 1;
        transition: opacity 200ms;
        font-size: 0.9rem;
        font-weight: 600;
    }

    /* --- Divider --- */
    .sidebar-divider {
        height: 1px;
        background: var(--border-subtle, rgba(255,255,255,0.06));
        margin: 8px 12px;
    }

    /* --- Sidebar Footer --- */
    .sidebar-footer {
        padding: 8px;
        border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
        flex-shrink: 0;
    }

    .sidebar-credits {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 10px 18px;
        white-space: nowrap;
        color: var(--accent-primary, #8b5cf6);
        font-weight: 700;
    }
    .sidebar-credits i {
        min-width: 28px;
        text-align: center;
        font-size: 1.1rem;
    }

    .sidebar-user {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 10px 18px;
    }
    .sidebar-avatar {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--accent-primary, #8b5cf6);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.7rem;
        font-weight: 700;
        min-width: 28px;
        flex-shrink: 0;
    }
    .sidebar-email {
        font-size: 0.8rem;
        color: var(--text-tertiary, #5a6478);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sidebar-logout {
        color: var(--text-tertiary, #5a6478) !important;
    }
    .sidebar-logout:hover {
        color: #ef4444 !important;
        background: rgba(239, 68, 68, 0.08) !important;
    }

    /* --- Main Content Shift --- */
    #tab-content-wrapper {
        margin-right: 150px;         /* RTL: sidebar on right */
    }
    [dir="ltr"] #tab-content-wrapper {
        margin-right: 0;
        margin-left: 150px;
    }
}


/* ==========================================================================
   Phase 5: Modals — Consistent Dark Theme (Generic)
   ========================================================================== */

@media (min-width: 768px) {

    /* Force all modal dialogs to dark theme */
    .modal-dialog {
        background: var(--bg-secondary, #161b26) !important;
        color: var(--text-primary, #f0f2f5) !important;
        border: 1px solid var(--border-subtle) !important;
        border-radius: var(--radius-lg, 20px) !important;
    }

    .modal-dialog h3,
    .modal-dialog h2 {
        color: var(--text-primary) !important;
    }

    .modal-dialog p {
        color: var(--text-secondary) !important;
    }

    /* General modal inputs */
    .modal-dialog input[type="text"],
    .modal-dialog input[type="email"],
    .modal-dialog input[type="password"],
    .modal-dialog textarea,
    .modal-dialog select {
        background: var(--bg-tertiary) !important;
        color: var(--text-primary) !important;
        border: 1px solid var(--border-medium) !important;
        border-radius: var(--radius-sm) !important;
    }

    /* Modal close button */
    .modal-dialog .modal-close,
    .modal-dialog .close-btn,
    .modal-dialog .modal-close-btn {
        color: var(--text-secondary) !important;
    }
    .modal-dialog .modal-close:hover,
    .modal-dialog .close-btn:hover,
    .modal-dialog .modal-close-btn:hover {
        color: var(--text-primary) !important;
    }
}


/* ==========================================================================
   Phase 6: Buttons & General Polish
   ========================================================================== */

@media (min-width: 768px) {

    /* Tab content wrappers */
    .upload-gallery-redesign-wrapper,
    .tryon-redesign-wrapper,
    .my-results-redesign-wrapper {
        background: var(--bg-primary, #0f1219);
    }

    /* Content areas top padding (no header anymore) */
    #tab-content-wrapper {
        padding-top: 16px;
    }

    /* Scrollbar */
    ::-webkit-scrollbar {
        width: 6px;
    }
    ::-webkit-scrollbar-thumb {
        background: var(--accent-primary, #8b5cf6);
        border-radius: 3px;
    }
    ::-webkit-scrollbar-track {
        background: transparent;
    }
}


/* ==========================================================================
   Phase 7: FABs Repositioning (avoid sidebar overlap)
   ========================================================================== */

@media (min-width: 768px) {

    /* Upload FAB - centered in content area (offset from sidebar) */
    .upload-fab-button {
        /* RTL: sidebar is on right, so content is shifted left. Center in content area */
        right: calc(50% + 32px);
        left: auto;
        transform: translateX(50%);
    }
    [dir="ltr"] .upload-fab-button {
        left: calc(50% + 32px);
        right: auto;
        transform: translateX(-50%);
    }

    /* WhatsApp FAB */
    [dir="rtl"] .whatsapp-fab {
        left: 20px;
        right: auto;
    }

    /* Advanced share FAB - next to upload FAB on desktop */
    .advanced-share-fab-button {
        width: 56px !important;
        height: 56px !important;
        font-size: 1.4rem !important;
        border-radius: 50% !important;
        bottom: 30px !important;
        /* RTL default: upload FAB right edge is at left:50%, place share FAB 12px to its right */
        left: calc(50% + 12px) !important;
        right: auto !important;
        transform: none !important;
    }
    [dir="ltr"] .advanced-share-fab-button {
        /* LTR: upload FAB center at left:50%+32px, right edge at left:50%+64px */
        left: calc(50% + 76px) !important;
        right: auto !important;
    }
}


/* ==========================================================================
   Mobile Landscape Override
   Phones in landscape orientation have width >= 768px but height <= 500px.
   Revert to mobile layout (bottom nav) instead of desktop sidebar.
   ========================================================================== */

@media (min-width: 768px) and (max-height: 500px) {
    /* Hide desktop sidebar */
    .desktop-sidebar { display: none !important; }

    /* Remove sidebar content offset */
    #tab-content-wrapper {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    /* Show mobile bottom nav */
    .mobile-bottom-nav { display: flex !important; }

    /* Allow bottom sheet to be shown by JS */
    .bottom-sheet-overlay { display: block !important; }
    .bottom-sheet { display: block !important; }

    /* Show sticky CTA on try-on tab */
    .tryon-mobile-sticky-cta { display: block !important; }

    /* Restore mobile header layout */
    .user-header {
        justify-content: space-between !important;
    }
    .user-header .user-details-group { display: flex !important; }
    .user-header .header-actions { display: flex !important; }
    .user-header h1 { font-size: 1.4rem !important; }

    /* Reset FAB positions */
    .upload-fab-button {
        right: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    [dir="rtl"] .upload-fab-button {
        left: auto !important;
        right: 50% !important;
        transform: translateX(50%) !important;
    }
}