/* [UI ATOMIC DENSITY] Column widths are managed in the DASHBOARD section below (line ~338) 
   Do NOT define --w-* variables here; the DASHBOARD block is the single source of truth. */

/* --- Row Selection Highlight (Cyan/Blue) --- */
/* Prevent Chrome from clipping the table outline by giving the container a tiny horizontal padding */
body:not(.view-grid-active) .table-container {
    padding-left: 10px !important; /* Increased to give breathing room */
    padding-right: 10px !important; /* Increased to prevent right edge clipping */
}

/* Force container to use full available width (respects body padding-right from sidebar) */
body:not(.view-grid-active) .container {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

/* Physical 1px Gap Simulation: Use border-collapse collapse with 1px border-right */
body:not(.view-grid-active) table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    /* Forces exactly 1px border to act as a divider */
}

body:not(.view-grid-active) th,
body:not(.view-grid-active) td {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
    /* Simulate the 1px gap with a faint line */
    text-align: center !important;
}

body:not(.view-grid-active) th:last-child,
body:not(.view-grid-active) td:last-child {
    border-right: none !important;
}

/* Text alignment per column (width는 하단 DASHBOARD APPLICATION에서 통합 관리) */
body:not(.view-grid-active) [data-col-id="index"] {
    text-align: center !important;
}

body:not(.view-grid-active) [data-col-id="type"] {
    text-align: center !important;
}

body:not(.view-grid-active) [data-col-id="res"] {
    text-align: center !important;
}

body:not(.view-grid-active) [data-col-id="size"] {
    text-align: right !important;
}

body:not(.view-grid-active) [data-col-id="date"] {
    text-align: center !important;
}

body:not(.view-grid-active) [data-col-id="status"] {
    text-align: center !important;
}

body:not(.view-grid-active) [data-col-id="hdr"] {
    text-align: center !important;
}

body:not(.view-grid-active) [data-col-id="magnet"] {
    text-align: center !important;
}

body:not(.view-grid-active) [data-col-id="actions"] {
    text-align: center !important;
}

/* Title is the ONLY one allowed to flex (Reclaiming ALL remaining space) */
body:not(.view-grid-active) [data-col-id="title"] {
    flex: 1 !important;
    width: auto !important;
    min-width: 200px !important;
    max-width: none !important;
    padding: 2px !important;
    /* Balanced 2px padding for Title ONLY */
    text-align: left !important;
}

/* Badge padding is controlled by style.css/index.html. We do NOT override to 0 here to keep them looking like pills */
body:not(.view-grid-active) .res-badge,
body:not(.view-grid-active) .type-badge,
body:not(.view-grid-active) .status-badge,
body:not(.view-grid-active) .hdr-table-badge {
    height: 16px !important;
    font-size: 0.65rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    border-radius: 2px !important;
    vertical-align: middle !important;
    gap: 1px !important;
    text-align: center !important;
}

/* Individual widths and internal padding - 1:1 COLUMN SYNC */
.type-badge {
    width: 46px !important;
    padding: 0 !important;
}

.res-badge {
    width: 36px !important;
    padding: 0 !important;
}

.hdr-table-badge {
    width: 44px !important;
    padding: 0 !important;
}

.status-badge {
    width: 60px !important;
    padding: 0 5px 0 0 !important; /* Increased to 5px as requested */
}

/* Zero cell padding for tight 1px column gaps */
.type-cell,
.res-cell,
.status-col-cell,
.hdr-col-cell,
.size-cell,
.date-cell,
.magnet-cell {
    padding: 0 !important;
    text-align: center !important;
    min-width: 0 !important;
    display: table-cell !important;
    vertical-align: middle !important;
}

/* Ensure centering of badges within cells */
.type-cell > span,
.res-cell > span,
.status-col-cell > span,
.hdr-col-cell > span {
    margin-left: auto !important;
    margin-right: auto !important;
    display: inline-flex !important;
}

/* Special Case: HDR 배지 추가 압축 제거 (위에서 통합 관리) */

/* INSET BOX SHADOW Approach (Perfectly seamless, no gaps) */
body:not(.view-grid-active) table tbody tr.selected-row {
    background-color: rgba(6, 182, 212, 0.2) !important;
    outline: 1.5px solid #06b6d4 !important;
    outline-offset: -1.5px !important;
    border-radius: 6px !important;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.2) !important;
    position: relative;
    z-index: 10;
}

body:not(.view-grid-active) .table-container table tbody tr.selected-row td {
    background-color: transparent !important;
    border-right: 1px solid rgba(6, 182, 212, 0.2) !important; /* Fill gap with matching color */
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    box-shadow: none !important;
    color: rgb(255, 255, 255) !important;
}

body:not(.view-grid-active) .table-container table tbody tr.selected-row td:first-child {
    border-top-left-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
}

body:not(.view-grid-active) .table-container table tbody tr.selected-row td:last-child {
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
    border-right: none !important;
}

/* Cleanup any residual pseudo-elements */
body:not(.view-grid-active) table tbody tr.selected-row td::after,
body:not(.view-grid-active) table tbody tr.selected-row td::before {
    display: none !important;
}

/* Fix Checkbox Clipping: Ensure the index/checkbox column allows overlay visibility */
body:not(.view-grid-active) th[data-col-id="index"],
body:not(.view-grid-active) td[data-col-id="index"] {
    overflow: visible !important;
}

/* Cleanup any residual pseudo-elements */
body:not(.view-grid-active) table tbody tr.selected-row td::after,
body:not(.view-grid-active) table tbody tr.selected-row td::before {
    display: none !important;
}

/* Badge visibility on selected rows */
body:not(.view-grid-active) table tbody tr.selected-row .badge {
    opacity: 1 !important;
    filter: brightness(1.3) contrast(1.1) !important;
}

/* --- Sidebar Layout Restoration (Variable Height) --- */
@media (min-width: 769px) {
    /* Sidebar uses var(--sidebar-width) - managed by sidebar_style.css */
    /* Container already takes full width via body padding-right */
}


/* --- Utility --- */
.hidden {
    display: none !important;
}

/* --- Sidebar Hidden Override (User Preference) --- */
/* [FIX] Only keep sidebar visible (for toggle button) on desktop viewports */
@media (min-width: 769px) {
    body.sidebar-hidden #desktopPreviewSidebar {
        /* transform: translateX(100%);  <-- Handled by sidebar_style.css */
        display: flex !important;
        /* Force display to keep toggle button visible */
    }
}

@media (min-width: 1400px) {
    body.sidebar-hidden .container {
        margin-right: auto !important;
        max-width: 1400px !important;
        /* Revert to standard container width */
    }
}

/* [FIX] Container base styles - respects body padding-right for sidebar space */
.container {
    margin-right: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 10px !important;
}

/* [FIX] Left-align content but allow body-padding to handle sidebar gap */
html body:not(.view-grid-active) .container,
html body:not(.view-grid-active) .controls,
html body:not(.view-grid-active) header,
html body:not(.view-grid-active) .nav-menu,
html body:not(.view-grid-active) .search-box,
html body:not(.view-grid-active) .search-tips,
html body:not(.view-grid-active) .results,
html body:not(.view-grid-active) .mode-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
}

/* Restoring front margins (padding-left) for controls and results in ListView */
html body:not(.view-grid-active) .controls {
    padding-left: 6px !important;
}
html body:not(.view-grid-active) .results-header {
    padding-left: 15px !important;
}

/* Explicit breathing room for the outermost container only */
html body:not(.view-grid-active) .container {
    padding-left: 10px !important;
}

@media (max-width: 768px) {}

/* --- Fine-tune Vertical Alignment (Desktop) --- */
@media (min-width: 769px) {

    /* Move checkbox down safely */
    body:not(.view-grid-active) td.checkbox-col input[type="checkbox"],
    body:not(.view-grid-active) [data-col-id="index"] input[type="checkbox"] {
        transform: translateY(1px) !important;
    }

    /* Move badges and title up slightly */
    body:not(.view-grid-active) .type-badge,
    body:not(.view-grid-active) .res-badge,
    body:not(.view-grid-active) .title-cell .grid-title-text {
        position: relative !important;
        top: -1px !important;
        /* Adjusted from original -1px if needed */
    }
}

/* --- Enhance Badge Readability (Text Shadow & Border) --- */
body:not(.view-grid-active) .type-badge,
body:not(.view-grid-active) .res-badge {
    /* 텍스트 가독성을 위한 검은색 그림자 효과 (Premium Text Shadow) */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.6) !important;
    /* 배지 자체의 입체감을 위한 미세한 그림자 및 테두리 효과 (Optional, removes flatness) */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 0 2px 4px rgba(0, 0, 0, 0.25) !important;
}

/* ==========================================================================
   [UI DASHBOARD] FONT SIZE & COLUMN WIDTH CENTRAL MANAGEMENT
   - 여기서 폰트 크기와 컬럼 너비를 한 눈에 조절하세요!
   ========================================================================== */

/* --- 1. [FONT SIZE DASHBOARD] --- */
:root {
    --fs-index: 0.75rem;
    --fs-type: 0.6rem;
    --fs-res: 0.6rem;
    --fs-title: 0.85rem;
    --fs-size: 0.75rem;
    --fs-date: 0.75rem;
    --fs-status: 0.65rem;
    --fs-hdr: 0.65rem;
}

/* --- 2. [COLUMN WIDTH DASHBOARD] --- */
:root {
    --w-index: 28px;
    /* 순번 (Increased to 28px to fit checkbox 18px + 8px padding + 2px margin) */
    --w-type: 47px;
    /* Type (Fixed 46px + 1px) */
    --w-res: 38px;
    /* Res (Fixed 38px + 1px) */
    --w-status: 59px;
    /* Status (Fixed 54px + 1px) */
    --w-hdr: 45px;
    /* HDR (Fixed 44px + 1px) */
    --w-magnet: 66px;
    /* Magnet */
    --w-size: 62px;
    /* Size */
    --w-date: 85px;
    /* Date */
}

/* --- [APPLICATION] Do not modify below unless layout is broken --- */

/* Font Size Apply */
html body:not(.view-grid-active) .index-number {
    font-size: var(--fs-index) !important;
    font-weight: 500 !important;
}

html body:not(.view-grid-active) .type-badge {
    font-size: var(--fs-type) !important;
    font-weight: 800 !important;
}

html body:not(.view-grid-active) .res-badge {
    font-size: var(--fs-res) !important;
    font-weight: 900 !important;
}

html body:not(.view-grid-active) .title-cell .grid-title-text {
    font-size: var(--fs-title) !important;
    font-weight: 550 !important;
}

html body:not(.view-grid-active) [data-col-id="size"] {
    font-size: var(--fs-size) !important;
}

html body:not(.view-grid-active) [data-col-id="date"] {
    font-size: var(--fs-date) !important;
}

html body:not(.view-grid-active) .status-badge {
    font-size: var(--fs-status) !important;
}

html body:not(.view-grid-active) .hdr-table-badge,
html body:not(.view-grid-active) .hdr-small-badge {
    height: 16px !important;
    width: 44px !important;
    padding: 0 !important;
    font-size: 0.68rem !important;
    justify-content: center !important;
}

html body:not(.view-grid-active) .hdr-table-badge {
    font-size: var(--fs-hdr) !important;
    font-weight: 800 !important;
}

html body:not(.view-grid-active) .magnet-cell .copy-btn {
    font-size: 0.72rem !important;
    font-weight: 560 !important;
    padding: 2px 5px !important;
}

/* Column Width Apply - DASHBOARD 변수 적용 (table-layout: fixed 전략) */
/* 원칙: 비-Title 컬럼 = 고정 픽셀 너비, Title = 남은 공간 전부 */
/* 1. Index (#) */
html body:not(.view-grid-active) [data-col-id="index"],
html body:not(.view-grid-active) th[data-col-id="index"] {
    width: var(--w-index) !important;
    min-width: var(--w-index) !important;
    max-width: var(--w-index) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

/* 2. Type */
html body:not(.view-grid-active) [data-col-id="type"],
html body:not(.view-grid-active) th[data-col-id="type"] {
    width: var(--w-type) !important;
    min-width: var(--w-type) !important;
    max-width: var(--w-type) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

/* 3. Resolution (Res) */
html body:not(.view-grid-active) [data-col-id="res"],
html body:not(.view-grid-active) th[data-col-id="res"] {
    width: var(--w-res) !important;
    min-width: var(--w-res) !important;
    max-width: var(--w-res) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

/* 4. Size */
html body:not(.view-grid-active) [data-col-id="size"],
html body:not(.view-grid-active) th[data-col-id="size"] {
    width: var(--w-size) !important;
    min-width: var(--w-size) !important;
    max-width: var(--w-size) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    padding-right: 5px !important;
}

/* 5. Date */
html body:not(.view-grid-active) [data-col-id="date"],
html body:not(.view-grid-active) th[data-col-id="date"] {
    width: var(--w-date) !important;
    min-width: var(--w-date) !important;
    max-width: var(--w-date) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

/* 6. Status */
html body:not(.view-grid-active) [data-col-id="status"],
html body:not(.view-grid-active) th[data-col-id="status"] {
    width: var(--w-status) !important;
    min-width: var(--w-status) !important;
    max-width: var(--w-status) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

/* 7. HDR */
html body:not(.view-grid-active) [data-col-id="hdr"],
html body:not(.view-grid-active) th[data-col-id="hdr"] {
    width: var(--w-hdr) !important;
    min-width: var(--w-hdr) !important;
    max-width: var(--w-hdr) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

/* 8. Magnet (Open Button) */
html body:not(.view-grid-active) [data-col-id="magnet"],
html body:not(.view-grid-active) th[data-col-id="magnet"] {
    width: var(--w-magnet) !important;
    min-width: var(--w-magnet) !important;
    max-width: var(--w-magnet) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

/* === [CRITICAL: TITLE COLUMN] === */
/* table-layout:fixed에서 width 미지정 컬럼은 나머지 공간을 자동 할당 받음 */
html body:not(.view-grid-active) [data-col-id="title"],
html body:not(.view-grid-active) th[data-col-id="title"] {
    width: 100% !important;
    /* Greedy space consumption in fixed layout */
    min-width: 200px !important;
    max-width: none !important;
    padding: 0 2px !important;
    /* EXCEPTION: Title has h-padding 2px */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* [TRUE CONTENT-FIT] Enable auto layout to shrink columns perfectly */
/* 제한된 자동 레이아웃: 검색 결과 테이블에만 적용 */
.search-results table {
    table-layout: auto !important;
    width: 100% !important;
}
    table-layout: auto !important;
    width: 100% !important;
}

/* ==========================================================================
   [MUSIC METADATA PREMIUM STYLING]
   - Optimized for 600px Restore Sidebar
   ========================================================================== */

/* 1. Artist/Album Meta Item Labels */
.sidebar-meta-item {
    font-size: 0.9rem !important;
    color: #e2e8f0 !important;
    margin-bottom: 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* 2. Tracklist Table Container */
.sidebar-tracklist-table {
    margin-top: 20px !important;
    background: rgba(16, 185, 129, 0.05) !important; /* Subtle emerald tint */
    border: 1px solid rgba(16, 185, 129, 0.15) !important;
    border-radius: 8px !important;
    padding: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}

.sidebar-tracklist-header {
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    color: #10b981 !important; /* Emerald accent */
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid rgba(16, 185, 129, 0.2) !important;
}

.sidebar-tracklist-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    max-height: 450px !important;
    overflow-y: auto !important;
}

/* 3. Track Rows */
.track-row {
    display: flex !important;
    align-items: center !important;
    padding: 6px 10px !important;
    border-radius: 4px !important;
    font-size: 0.88rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: default !important;
}

.track-row:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    transform: translateX(4px) !important;
    color: #fff !important;
}

/* Popular Track Highlight */
.track-row.popular-track {
    color: #6366f1 !important; /* Indigo for popular */
    background: rgba(99, 102, 241, 0.08) !important;
    font-weight: 600 !important;
}

.pop-star {
    color: #f59e0b !important; /* Amber star */
    font-size: 0.75rem !important;
    margin-left: 4px !important;
    text-shadow: 0 0 8px rgba(245, 158, 11, 0.4) !important;
}

.track-num {
    width: 24px !important;
    font-size: 0.75rem !important;
    color: rgba(255, 255, 255, 0.4) !important;
    font-weight: 600 !important;
}

.track-name {
    flex: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.track-time {
    font-size: 0.75rem !important;
    color: rgba(255, 255, 255, 0.4) !important;
    width: 40px !important;
    text-align: right !important;
}

/* 4. Bio Container */
.sidebar-meta-bio {
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    padding: 15px !important;
    background: rgba(30, 41, 59, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
    white-space: pre-line !important;
    margin-top: 15px !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
}

.sidebar-meta-bio strong {
    color: #6366f1 !important;
    font-weight: 700 !important;
}

/* Custom Scrollbar for Tracklist/Bio */
.sidebar-tracklist-content::-webkit-scrollbar,
.sidebar-meta-bio::-webkit-scrollbar {
    width: 4px !important;
}

.sidebar-tracklist-content::-webkit-scrollbar-thumb,
.sidebar-meta-bio::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 2px !important;
}