/* Desktop layout (min-width: 1201px) - match sample. Loaded on all viewports; media query limits scope. */

@media (min-width: 1201px) {
    /* Remove horizontal scrollbar permanently when desktop job tracker is visible */
    body:has(.job-tracker-desktop-layout),
    html:has(.job-tracker-desktop-layout) {
        overflow-x: hidden !important;
    }

    /* Prevent horizontal scrollbar on desktop job tracker - permanent */
    .job-tracker-card {
        display: flex;
        flex-direction: column;
        min-height: calc(100vh - 80px);
        padding-top: 90px;
        overflow-x: hidden !important;
        max-width: 100%;
    }

    .job-tracker-desktop-layout {
        display: flex;
        flex: 1;
        min-height: 0;
        overflow: hidden;
        overflow-x: hidden !important;
    }

    .job-tracker-desktop-layout .job-tracker-desktop-sidebar {
        width: 320px;
        min-width: 320px;
        max-width: 320px;
        background: #fff;
        border-right: 1px solid #f1f5f9;
        padding: 1.5rem;
        overflow-x: hidden !important;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    /* Desktop sidebar: clean horizontal tabs (no scroll/slider) - match reference design */
    .job-tracker-desktop-layout .job-tracker-desktop-sidebar .job-nav-tabs,
    .job-tracker-desktop-layout .job-nav-tabs {
        display: flex !important;
        align-items: stretch;
        gap: 0;
        margin: 0 0 0.5rem 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border-bottom: 1px solid #e2e8f0;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        flex-wrap: nowrap !important;
        min-width: 0;
        width: 100% !important;
        max-width: 100% !important;
        -webkit-overflow-scrolling: auto;
        box-sizing: border-box;
        scrollbar-width: none;
    }
    .job-tracker-desktop-layout .job-tracker-desktop-sidebar .job-nav-tabs::-webkit-scrollbar,
    .job-tracker-desktop-layout .job-nav-tabs::-webkit-scrollbar {
        display: none;
    }

    /* Text-only tabs on desktop: hide icons so layout matches clean reference (no scroll) */
    .job-tracker-desktop-layout .job-tracker-desktop-sidebar .job-nav-tabs .job-nav-btn i,
    .job-tracker-desktop-layout .job-nav-tabs .job-nav-btn i {
        display: none !important;
    }

    .job-tracker-desktop-layout .job-nav-btn {
        flex: 1 1 0;
        min-width: 0;
        padding: 0.625rem 0.75rem;
        font-size: 0.9375rem;
        font-weight: 500;
        border: none;
        border-radius: 0.5rem 0.5rem 0 0;
        margin: 0;
        margin-bottom: -1px;
        background: transparent;
        color: #64748b;
        cursor: pointer;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 0;
        position: relative;
        border-bottom: 2px solid transparent;
        transition: color 0.2s, border-color 0.2s, background 0.2s;
    }

    .job-tracker-desktop-layout .job-nav-btn.active {
        background: #fff;
        color: #2563eb;
        border-bottom-color: #2563eb;
        box-shadow: none;
    }

    .job-tracker-desktop-layout .job-nav-btn:not(.active) {
        color: #64748b;
    }

    .job-tracker-desktop-layout .job-nav-btn:hover:not(.active) {
        color: #2563eb;
    }

    .desktop-application-status {
        background: #f8fafc;
        border-radius: 1rem;
        padding: 1rem;
    }

    .desktop-status-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
    }

    .desktop-status-title {
        font-weight: 700;
        color: #1e293b;
        font-size: 1rem;
        margin: 0;
    }

    .desktop-status-badge {
        font-size: 0.75rem;
        color: #2563eb;
        font-weight: 600;
        background: #eff6ff;
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
    }

    .desktop-status-blocks {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .desktop-status-block {
        width: 100%;
        text-align: left;
        padding: 0.75rem;
        border-radius: 12px;
        border: 2px solid #e2e8f0;
        background: #fff;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .desktop-status-block:hover {
        border-color: #cbd5e1;
    }

    .desktop-status-block.selected,
    .desktop-status-block:active {
        transform: scale(0.98);
    }

    .desktop-status-block-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
    }

    .desktop-status-icon {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.875rem;
        flex-shrink: 0;
    }

    .desktop-status-icon-bookmarked {
        background: #f1f5f9;
        color: #64748b;
    }

    .desktop-status-block-applied {
        background: #eff6ff;
        border-color: #2563eb;
    }

    .desktop-status-block-applied .desktop-status-icon-applied {
        background: #2563eb;
        color: #fff;
    }

    .desktop-status-block-applied .desktop-status-label,
    .desktop-status-block-applied .desktop-status-count {
        color: #2563eb;
        font-weight: 600;
    }

    .desktop-status-block-interview {
        background: #ecfdf5;
        border-color: #10b981;
    }

    .desktop-status-block-interview .desktop-status-icon-interview {
        background: #10b981;
        color: #fff;
    }

    .desktop-status-block-interview .desktop-status-label,
    .desktop-status-block-interview .desktop-status-count {
        color: #10b981;
        font-weight: 600;
    }

    .desktop-status-block-offer {
        background: #f5f3ff;
        border-color: #8b5cf6;
    }

    .desktop-status-block-offer .desktop-status-icon-offer {
        background: #8b5cf6;
        color: #fff;
    }

    .desktop-status-block-offer .desktop-status-label,
    .desktop-status-block-offer .desktop-status-count {
        color: #8b5cf6;
        font-weight: 600;
    }

    .desktop-status-text {
        flex: 1;
        min-width: 0;
    }

    .desktop-status-label {
        display: block;
        font-weight: 600;
        color: #1e293b;
        font-size: 0.875rem;
    }

    .desktop-status-sublabel {
        display: block;
        font-size: 0.75rem;
        color: #64748b;
    }

    .desktop-status-count {
        font-size: 1.25rem;
        font-weight: 700;
        color: #1e293b;
    }

    .desktop-add-job-btn {
        width: 100%;
        padding: 0.75rem 1rem;
        background: #2563eb;
        color: #fff;
        border: none;
        border-radius: 12px;
        font-weight: 600;
        font-size: 0.9375rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        transition: background 0.2s ease;
    }

    .desktop-add-job-btn:hover {
        background: #1d4ed8;
    }

    .job-tracker-desktop-main {
        flex: 1;
        min-width: 0;
        overflow-x: hidden !important;
        overflow-y: auto;
        padding: 1.5rem;
    }

    #jobs-tab .status-progress-bar,
    #jobs-tab .top-control-bar,
    #jobs-tab .modern-search-bar {
        display: none !important;
    }

    .desktop-search-section {
        margin-bottom: 1.5rem;
    }

    .desktop-search-row {
        display: flex;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .desktop-search-input-wrapper {
        flex: 1;
        position: relative;
    }

    .desktop-search-icon {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: #94a3b8;
        font-size: 0.875rem;
    }

    .desktop-search-input {
        width: 100%;
        padding: 0.75rem 1rem 0.75rem 2.75rem;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        font-size: 0.9375rem;
        background: #fff;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    .desktop-search-input:focus {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
    }

    .desktop-filters-btn {
        padding: 0.75rem 1rem;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        font-weight: 500;
        color: #475569;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        transition: border-color 0.2s, color 0.2s;
    }

    .desktop-filters-btn:hover {
        border-color: #cbd5e1;
        color: #1e293b;
    }

    .desktop-status-filter-wrapper {
        position: relative;
    }

    .desktop-status-filter-btn {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        font-weight: 500;
        color: #334155;
        cursor: pointer;
        transition: border-color 0.2s;
    }

    .desktop-status-filter-btn:hover {
        border-color: #cbd5e1;
    }

    .desktop-status-filter-label {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .desktop-status-filter-icon {
        color: #2563eb;
    }

    .desktop-status-filter-chevron {
        color: #94a3b8;
        transition: transform 0.2s;
    }

    .desktop-status-filter-chevron.open {
        transform: rotate(180deg);
    }

    .desktop-status-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin-top: 0.5rem;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.1);
        overflow: hidden;
        z-index: 50;
    }

    .desktop-status-dropdown[hidden] {
        display: none !important;
    }

    .desktop-status-option {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        text-align: left;
        border: none;
        background: none;
        cursor: pointer;
        font-size: 0.9375rem;
        border-bottom: 1px solid #f1f5f9;
        transition: background 0.2s;
    }

    .desktop-status-option:last-child {
        border-bottom: none;
    }

    .desktop-status-option:hover {
        background: #f8fafc;
    }

    .desktop-status-option .desktop-option-label {
        font-weight: 600;
        color: #1e293b;
    }

    .desktop-status-option .desktop-option-count {
        font-size: 0.75rem;
        color: #64748b;
    }

    #jobs-tab #jobs-table-view {
        display: none !important;
    }

    #jobs-tab #jobs-cards-view {
        display: block !important;
    }

    #jobs-tab #jobs-cards-view .jobs-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    /* Compact card + grid layout: title left, status+delete right, prep/details, dropdown above */
    #jobs-tab #jobsGrid .teal-job-card {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto auto auto;
        gap: 0.5rem 0.75rem;
        background: #fff;
        border-radius: 0.75rem;
        border: 1px solid #f1f5f9;
        box-shadow: 0 2px 12px -2px rgba(0,0,0,0.08);
        padding: 0.75rem 0.875rem;
        position: relative;
        overflow: hidden;
    }

    /* Remove view/edit/delete icon buttons permanently in desktop card view */
    #jobs-tab #jobsGrid .teal-job-card .job-card-actions {
        display: none !important;
    }

    /* Row 1 left: title, company, location */
    #jobs-tab #jobsGrid .teal-job-card .job-card-header {
        grid-column: 1;
        grid-row: 1;
        display: block;
        margin: 0;
        min-width: 0;
    }

    #jobs-tab #jobsGrid .teal-job-card .job-card-title-section {
        min-width: 0;
        padding-right: 0;
    }

    #jobs-tab #jobsGrid .teal-job-card .job-card-title {
        font-size: 0.9375rem;
        font-weight: 700;
        color: #1e293b;
        line-height: 1.3;
        margin-bottom: 0.2rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    #jobs-tab #jobsGrid .teal-job-card .job-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.2rem;
        font-size: 0.75rem;
        color: #64748b;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    #jobs-tab #jobsGrid .teal-job-card .job-card-meta .job-card-company {
        display: inline;
    }
    #jobs-tab #jobsGrid .teal-job-card .job-card-meta .job-card-company::after {
        content: ' • ';
        margin-left: 0.2rem;
    }
    #jobs-tab #jobsGrid .teal-job-card .job-card-meta .job-card-location {
        margin-left: 0;
    }

    /* Body participates in grid */
    #jobs-tab #jobsGrid .teal-job-card .job-card-body {
        display: contents;
    }

    /* Row 1 right: status badge on top, delete icon below (both up in card) */
    #jobs-tab #jobsGrid .teal-job-card .job-card-status {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        justify-self: end;
    }

    #jobs-tab #jobsGrid .teal-job-card .job-card-status .status-badge {
        padding: 4px 10px;
        border-radius: 9999px;
        font-size: 0.6875rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        display: inline-block;
    }

    /* Row 2: saved date and job details
       Moved to the left side so "Saved" appears under the location/title (user request). */
    #jobs-tab #jobsGrid .teal-job-card .job-card-details {
        grid-column: 1;
        grid-row: 2;
        align-self: start;
        justify-self: start;
        text-align: left;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
        margin: 0;
    }

    #jobs-tab #jobsGrid .teal-job-card .job-card-detail-item {
        font-size: 0.75rem;
        color: #64748b;
    }

    #jobs-tab #jobsGrid .teal-job-card .job-card-detail-item.follow-up {
        display: none;
    }

    /* Row 3: Prep and Details buttons - right side (desktop) */
    #jobs-tab #jobsGrid .teal-job-card .job-card-prep-details {
        grid-column: 2;
        grid-row: 3;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.6rem;
        min-width: 0;
    }
    #jobs-tab #jobsGrid .teal-job-card .job-card-prep-btn,
    #jobs-tab #jobsGrid .teal-job-card .job-card-details-btn {
        padding: 0.5rem 1.25rem;
        font-size: 0.9375rem;
        font-weight: 600;
        border-radius: 8px;
        border: none;
        cursor: pointer;
        transition: background 0.2s, color 0.2s;
    }
    #jobs-tab #jobsGrid .teal-job-card .job-card-prep-btn {
        background: #2563eb;
        color: #fff;
    }
    #jobs-tab #jobsGrid .teal-job-card .job-card-prep-btn:hover {
        background: #1d4ed8;
    }
    #jobs-tab #jobsGrid .teal-job-card .job-card-details-btn {
        background: #eff6ff;
        color: #2563eb;
    }
    #jobs-tab #jobsGrid .teal-job-card .job-card-details-btn:hover {
        background: #dbeafe;
    }

    /* Footer participates in grid so dropdown and delete can be placed */
    #jobs-tab #jobsGrid .teal-job-card .job-card-footer {
        display: contents;
    }

    /* Row 4: Bookmarked dropdown above (inside card, not below) */
    #jobs-tab #jobsGrid .teal-job-card .job-card-quick-actions {
        grid-column: 1 / -1;
        grid-row: 4;
        margin: 0;
    }
    #jobs-tab #jobsGrid .teal-job-card .job-card-quick-actions .job-status-select {
        font-size: 0.75rem;
        padding: 0.35rem 0.6rem;
        min-width: 0;
    }

    /* Place extra action (delete) below the Prep/Details row so it doesn't overlap.
       Move actions into the next grid row and align to the top-right of that row. */
    #jobs-tab #jobsGrid .teal-job-card .job-card-extra-actions {
        grid-column: 2;
        grid-row: 4; /* place below the prep/details row */
        align-self: start;      /* start so it sits at the top of the row (right under details) */
        justify-self: end;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 0.35rem;
        margin-top: 6px;       /* small gap to avoid overlap */
        order: 0;
        z-index: 1;
    }

    #jobs-tab #jobsGrid .teal-job-card .job-card-insight-btn {
        display: none !important;
    }
    #jobs-tab #jobsGrid .teal-job-card .job-card-email-btn {
        display: none !important;
    }
    #jobs-tab #jobsGrid .teal-job-card .job-card-delete-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 1.75rem;
        height: 1.75rem;
        min-width: 1.75rem;
        padding: 0;
        border: none;
        border-radius: 4px;
        background: #fef2f2;
        color: #dc2626;
        cursor: pointer;
        transition: background 0.2s, color 0.2s;
    }
    #jobs-tab #jobsGrid .teal-job-card .job-card-delete-btn:hover {
        background: #dc2626;
        color: #fff;
    }
    #jobs-tab #jobsGrid .teal-job-card .job-card-delete-btn i {
        font-size: 0.75rem;
    }

    /* Excitement row if present */
    #jobs-tab #jobsGrid .teal-job-card .job-card-excitement {
        grid-column: 1 / -1;
        grid-row: 5;
        font-size: 0.75rem;
    }
}

/* Below 1201px: hide desktop sidebar and desktop-only UI but keep main content (mobile wrap) visible */
@media (max-width: 1200px) {
    .job-tracker-desktop-layout {
        display: flex !important;
        flex-direction: column;
        min-height: 0;
        width: 100%;
    }
    .job-tracker-desktop-layout .job-tracker-desktop-sidebar {
        display: none !important;
    }
    .job-tracker-desktop-layout .job-tracker-desktop-main {
        display: block !important;
        width: 100%;
        flex: 1;
        min-height: 0;
    }
    .job-tracker-desktop-layout .tab-content-container,
    .job-tracker-desktop-layout .tab-content {
        width: 100%;
        max-width: 100%;
    }
    .desktop-search-section {
        display: none !important;
    }
}