/* ==========================================================================
   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; }

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

    /* Hide old header (replaced by sidebar) */
    .user-header { display: none !important; }
    #sticky-header-wrapper { display: none !important; }

    /* --- Sidebar Container --- */
    .desktop-sidebar {
        display: flex;
        position: fixed;
        top: 0;
        right: 0;                              /* RTL: sidebar on right */
        width: 64px;                           /* Collapsed width */
        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;
        transition: width 300ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
        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));
    }

    .desktop-sidebar:hover {
        width: 240px;
    }

    /* --- 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: 0;
        transition: opacity 200ms;
    }
    .desktop-sidebar:hover .sidebar-logo-full {
        opacity: 1;
    }

    /* --- 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: all 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: 0;
        transition: opacity 200ms;
        font-size: 0.9rem;
        font-weight: 600;
    }
    .desktop-sidebar:hover .sidebar-label {
        opacity: 1;
    }

    /* --- 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 --- */
    #main-app-content {
        margin-right: 64px;          /* RTL: sidebar on right */
        transition: margin 300ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
    }
    [dir="ltr"] #main-app-content {
        margin-right: 0;
        margin-left: 64px;
    }
}


/* ==========================================================================
   Phase 3: Dark Cards — Gallery, Results, Fixes
   ========================================================================== */

@media (min-width: 768px) {

    /* --- Gallery Cards --- */
    .image-container {
        background: var(--bg-tertiary, #1e2433) !important;
        border: 1px solid var(--border-subtle, rgba(255,255,255,0.06)) !important;
        border-radius: var(--radius-lg, 20px) !important;
        color: var(--text-primary, #f0f2f5) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        transition: all 200ms ease;
    }
    .image-container:hover {
        border-color: var(--border-medium, rgba(255,255,255,0.12)) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
        transform: translateY(-4px);
    }

    /* Keep light background for product images */
    .image-container .image-wrapper img {
        background: rgba(255, 255, 255, 0.95);
        border-radius: var(--radius-md, 14px);
    }

    /* Category label overlay */
    .image-category-label {
        background: rgba(0, 0, 0, 0.6) !important;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        color: white !important;
        border-radius: 20px;
        padding: 4px 12px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    /* Action buttons on cards */
    .image-container .image-actions button {
        background: rgba(255, 255, 255, 0.06) !important;
        color: var(--text-secondary, #8b95a8) !important;
        border: 1px solid var(--border-subtle, rgba(255,255,255,0.06)) !important;
        border-radius: var(--radius-sm, 8px) !important;
    }
    .image-container .image-actions button:hover {
        background: rgba(255, 255, 255, 0.12) !important;
        color: var(--text-primary, #f0f2f5) !important;
        transform: translateY(-1px);
    }
    /* Delete button hover */
    .image-container .image-actions button.delete-btn:hover,
    .image-container .image-actions button[title*="מחק"]:hover,
    .image-container .image-actions button:last-child:hover {
        background: rgba(239, 68, 68, 0.15) !important;
        color: #ef4444 !important;
        border-color: rgba(239, 68, 68, 0.3) !important;
    }

    /* Gallery grid */
    #gallery.image-gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 20px;
        padding: 24px;
    }

    /* --- Results Cards --- */
    .tryon-result-card {
        background: var(--bg-tertiary, #1e2433) !important;
        border: 1px solid var(--border-subtle, rgba(255,255,255,0.06)) !important;
        border-radius: var(--radius-lg, 20px) !important;
        color: var(--text-primary, #f0f2f5) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
    .tryon-result-card:hover {
        border-color: var(--border-medium, rgba(255,255,255,0.12)) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
        transform: translateY(-4px);
    }

    .tryon-result-card img {
        background: rgba(255, 255, 255, 0.95);
        border-radius: var(--radius-md, 14px);
    }

    .tryon-result-card .tryon-result-card-actions button {
        background: rgba(255, 255, 255, 0.06) !important;
        color: var(--text-secondary, #8b95a8) !important;
        border: 1px solid var(--border-subtle) !important;
        border-radius: var(--radius-sm, 8px) !important;
    }
    .tryon-result-card .tryon-result-card-actions button:hover {
        background: rgba(255, 255, 255, 0.12) !important;
        color: var(--text-primary) !important;
    }

    /* Results grid */
    #my-results-gallery {
        gap: 20px;
        padding: 24px;
    }

    /* Result metadata */
    .tryon-result-card .result-info,
    .tryon-result-card .result-meta {
        color: var(--text-secondary, #8b95a8);
    }

    /* --- Fixes Tab --- */
    #my-fixes-tab-content table {
        color: var(--text-primary, #f0f2f5);
    }
    #my-fixes-tab-content td {
        background: var(--bg-tertiary, #1e2433);
        border-color: var(--border-subtle);
    }
    #my-fixes-tab-content .comparison-thumb {
        background: var(--bg-tertiary, #1e2433) !important;
        border-radius: var(--radius-md, 14px);
    }
    #my-fixes-tab-content .placeholder {
        background: var(--bg-tertiary, #1e2433) !important;
        color: var(--text-tertiary, #5a6478) !important;
    }
    #my-fixes-tab-content .status-tag.pending {
        background: rgba(245, 158, 11, 0.15) !important;
        color: #f59e0b !important;
        border: 1px solid rgba(245, 158, 11, 0.3) !important;
    }
    #my-fixes-tab-content .status-tag.completed {
        background: rgba(34, 197, 94, 0.15) !important;
        color: #22c55e !important;
        border: 1px solid rgba(34, 197, 94, 0.3) !important;
    }

    /* Gallery / results empty messages */
    .gallery-message {
        background: var(--bg-secondary, #161b26) !important;
        border-color: var(--border-subtle) !important;
        color: var(--text-secondary, #8b95a8) !important;
    }
}


/* ==========================================================================
   Phase 4: Try-On Stepper Cards — Dark Theme
   ========================================================================== */

@media (min-width: 768px) {

    .stepper-step .tryon-step-card {
        background: var(--bg-tertiary, #1e2433) !important;
        border: 1px solid var(--border-subtle) !important;
        border-radius: var(--radius-lg, 20px) !important;
        color: var(--text-primary) !important;
    }

    .stepper-step .tryon-step-card h3,
    .stepper-step .tryon-step-card .step-title,
    .stepper-step .tryon-step-card .card-header {
        background: var(--bg-secondary, #161b26) !important;
        color: var(--text-primary) !important;
        border-bottom: 1px solid var(--border-subtle);
    }

    .stepper-step .tryon-step-card label {
        color: var(--text-secondary) !important;
    }

    .stepper-step .tryon-step-card .step-actions,
    .stepper-step .step-actions {
        background: var(--bg-secondary, #161b26) !important;
        border-top: 1px solid var(--border-subtle);
    }

    /* Upload areas */
    .stepper-step .image-upload-box,
    .stepper-step .image-preview-box,
    .stepper-step .model-image-upload-area,
    .stepper-step .garment-image-upload-area {
        background: rgba(255, 255, 255, 0.03) !important;
        border: 2px dashed var(--border-medium) !important;
        border-radius: var(--radius-md) !important;
    }

    /* Input fields */
    .stepper-step .tryon-step-card input[type="text"],
    .stepper-step .tryon-step-card input[type="file"],
    .stepper-step .tryon-step-card textarea {
        background: var(--bg-tertiary) !important;
        color: var(--text-primary) !important;
        border: 1px solid var(--border-medium) !important;
        border-radius: var(--radius-sm) !important;
    }

    /* Select dropdowns */
    .stepper-step .tryon-step-card select {
        background: var(--bg-tertiary) !important;
        color: var(--text-primary) !important;
        border: 1px solid var(--border-medium) !important;
    }
}


/* ==========================================================================
   Phase 5: Modals — Consistent Dark Theme
   ========================================================================== */

@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;
    }

    /* Share modal */
    #shareTryonModal .modal-dialog {
        background: var(--bg-secondary) !important;
        color: var(--text-primary) !important;
    }
    #shareTryonModal input[type="text"] {
        background: var(--bg-tertiary) !important;
        color: var(--text-primary) !important;
        border: 1px solid var(--border-medium) !important;
    }
    #shareTryonModal label {
        color: var(--text-secondary) !important;
    }

    /* Upload category modal */
    #uploadCategoryModal .modal-dialog {
        background: var(--bg-secondary) !important;
        color: var(--text-primary) !important;
    }
    #uploadCategoryModal .category-option,
    #uploadCategoryModal .category-btn {
        background: var(--bg-tertiary) !important;
        border: 1px solid var(--border-subtle) !important;
        color: var(--text-primary) !important;
        border-radius: var(--radius-md) !important;
    }
    #uploadCategoryModal .category-option:hover,
    #uploadCategoryModal .category-btn:hover {
        border-color: var(--accent-primary) !important;
        background: rgba(139, 92, 246, 0.1) !important;
    }

    /* Request fix modal */
    #requestFixModal .modal-dialog {
        background: var(--bg-secondary) !important;
        color: var(--text-primary) !important;
    }
    #requestFixModal label {
        color: var(--text-secondary) !important;
    }
    #requestFixModal input[type="checkbox"] + label {
        color: var(--text-primary) !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;
    }
}