@charset "utf-8";

/* ==========================================================
   EMERGENCY LISTVIEW FIX (Standard Table Layout Forced)
   ========================================================== */

/* --- Desktop List View (min-width: 769px) --- */
@media (min-width: 769px) {

    /* 1. Container & Table Reset - FAR LEFT ALIGNMENT */
    body:not(.view-grid-active) .container {
        width: 100% !important;
        max-width: none !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body:not(.view-grid-active) table {
        width: 100% !important;
        border-collapse: collapse !important;
        border-spacing: 0 !important;
        table-layout: auto !important;
        /* THE HOLY GRAIL AUTO LAYOUT */
        display: table !important;
    }

    body:not(.view-grid-active) thead {
        display: table-header-group !important;
    }

    body:not(.view-grid-active) tbody {
        display: table-row-group !important;
    }

    /* 2. Row & Cell Reset (Force Horizontal) */
    body:not(.view-grid-active) tr {
        display: table-row !important;
        /* CRITICAL: Force horizontal row */
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        background: transparent !important;
    }

    body:not(.view-grid-active) th {
        padding: 0 !important;
        text-align: left !important;
        /* Align left to eliminate air */
        font-weight: 600 !important;
        border-bottom: 2px solid rgba(255, 255, 255, 0.1) !important;
        white-space: nowrap !important;
        font-size: 0.75rem !important;
        color: var(--accent-color) !important;
    }

    body:not(.view-grid-active) td {
        padding: 0 4px !important;
        /* Balanced horizontal padding */
        color: var(--text-main) !important;
        white-space: nowrap !important;
        font-size: 0.95rem !important;
        /* Slightly more compact for alignment */
        border: none !important;
        text-align: left !important;
        height: 38px !important;
        display: table-cell !important; /* Force direct table-cell display */
        vertical-align: middle !important;
        /* THE CRITICAL FIX */
        line-height: normal !important;
    }

    /* 3. Column Widths (Compact) - Using data-col-id for reorder-safe styling */

    /* # (Index) - Width managed by DASHBOARD in sidebar_restore.css */
    body:not(.view-grid-active) [data-col-id="index"] {
        color: rgba(255, 255, 255, 0.4) !important;
        font-size: 0.8rem !important;
        text-align: center !important;
        width: 45px !important;
        vertical-align: middle !important;
    }

    /* Thumbnail (Always Hidden in List View) */
    body:not(.view-grid-active) [data-col-id="thumbnail"] {
        display: none !important;
        width: 0 !important;
    }

    /* Type - Width managed by DASHBOARD */
    body:not(.view-grid-active) [data-col-id="type"] {
        white-space: nowrap !important;
    }

    /* Resolution - Width managed by DASHBOARD */
    body:not(.view-grid-active) [data-col-id="res"] {
        white-space: nowrap !important;
        color: rgba(255, 255, 255, 0.7) !important;
    }

    /* Title (Expand - Takes remaining space) */
    body:not(.view-grid-active) [data-col-id="title"] {
        width: auto !important;
        text-align: left !important;
        padding: 2px !important;
        /* Forces 2px on all sides */
        vertical-align: middle !important;
    }

    body:not(.view-grid-active) .title-cell {
        vertical-align: middle !important;
    }

    body:not(.view-grid-active) .grid-title-text {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        line-height: normal !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Size - Width managed by DASHBOARD */
    body:not(.view-grid-active) [data-col-id="size"] {
        font-family: monospace !important;
        color: #34d399 !important;
        text-align: right !important;
        letter-spacing: -0.5px !important;
    }

    /* Date - Width managed by DASHBOARD */
    body:not(.view-grid-active) [data-col-id="date"] {
        font-family: monospace !important;
        color: rgba(255, 255, 255, 0.6) !important;
    }

    /* Status, HDR, Magnet - Widths managed by DASHBOARD in sidebar_restore.css */

    /* 4. Column Visibility (Dynamic support for hide- classes) */
    body:not(.view-grid-active) table.hide-type [data-col-id="type"],
    body:not(.view-grid-active) table.hide-res [data-col-id="res"],
    body:not(.view-grid-active) table.hide-size [data-col-id="size"],
    body:not(.view-grid-active) table.hide-date [data-col-id="date"],
    body:not(.view-grid-active) table.hide-status [data-col-id="status"],
    body:not(.view-grid-active) table.hide-hdr [data-col-id="hdr"],
    body:not(.view-grid-active) table.hide-magnet [data-col-id="magnet"],
    body:not(.view-grid-active) table.hide-thumbnail [data-col-id="thumbnail"] {
        display: none !important;
        width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        overflow: hidden !important;
    }
}

/* --- Mobile Card View Protection (max-width: 768px) --- */
@media (max-width: 768px) {
    body:not(.view-grid-active) thead {
        display: none !important;
    }

    body:not(.view-grid-active) table tbody tr { 
        grid-template-areas: 
            "check title title title title magnet" 
            "check type res hdr size magnet"; 
        display: grid !important; 
        grid-template-columns: 24px max-content max-content max-content 1fr auto !important; 
        grid-template-rows: auto auto !important; 
        row-gap: 2px !important;
        column-gap: 1px !important;
        padding: 3px 3px !important; /* 패딩을 기존 6px에서 절반인 3px로 축소 */
        height: auto !important; 
        min-height: 0px !important;
        align-items: center !important; 
        border-bottom: 1px solid rgba(255,255,255,0.05) !important;
        background: transparent !important;
    }
    
    body:not(.view-grid-active) table tbody tr td {
        display: flex !important;
        align-items: center !important;
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
        border: none !important;
        background: transparent !important;
    }

    /* Checkbox */
    body:not(.view-grid-active) table tbody tr td.checkbox-col,
    body:not(.view-grid-active) table tbody tr td[data-col-id="index"] { 
        grid-area: check !important; 
        justify-content: center !important;
        position: static !important;
        width: 100% !important;
    }
    
    body:not(.view-grid-active) td.checkbox-col input {
        width: 16px !important;
        height: 16px !important;
        margin: 0 !important;
    }

    /* Checkbox/Index visibility logic */
    body:not(.view-grid-active) td.checkbox-col { display: flex !important; }
    
    /* Default: Show Index, Hide Checkbox */
    body:not(.view-grid-active) td.checkbox-col .index-number { display: block !important; font-size: 0.8rem !important; color: rgba(255, 255, 255, 0.4) !important; font-weight: bold !important; text-align: center !important; width: 100% !important;}
    body:not(.view-grid-active) td.checkbox-col .item-checkbox { display: none !important; }

    /* Bulk Edit Active: Hide Index, Show Checkbox */
    body:not(.view-grid-active) tbody.bulk-edit-active td.checkbox-col .index-number { display: none !important; }
    body:not(.view-grid-active) tbody.bulk-edit-active td.checkbox-col .item-checkbox { display: block !important; }
    
    /* Title */
    body:not(.view-grid-active) table tbody tr td[data-col-id="title"] { 
        grid-area: title !important; 
        width: 100% !important; 
        display: block !important; 
        font-size: 0.95rem !important; 
        font-weight: 600 !important; 
        color: #e2e8f0 !important; 
        white-space: nowrap !important; 
        overflow: hidden !important; 
        text-overflow: ellipsis !important; 
        line-height: 1.2 !important; 
    }
    body:not(.view-grid-active) table tbody tr td[data-col-id="title"] .grid-title-text {
        font-size: inherit !important;
        font-weight: inherit !important;
        display: inline !important;
    }

    /* Badges */
    body:not(.view-grid-active) table tbody tr td[data-col-id="type"] { grid-area: type !important; justify-content: flex-start !important; }
    body:not(.view-grid-active) table tbody tr td[data-col-id="res"] { grid-area: res !important; justify-content: flex-start !important; }
    body:not(.view-grid-active) table tbody tr td[data-col-id="hdr"] { grid-area: hdr !important; justify-content: flex-start !important; }
    
    body:not(.view-grid-active) table tbody tr td[data-col-id="size"] { 
        grid-area: size !important; 
        justify-content: flex-start !important; 
        font-size: 0.8rem !important; 
        color: #34d399 !important;
        padding-left: 4px !important; 
        font-family: monospace !important;
        letter-spacing: -0.5px !important;
    }

    /* Magnet */
    body:not(.view-grid-active) table tbody tr td[data-col-id="magnet"] { 
        grid-area: magnet !important; 
        justify-content: flex-end !important;
        position: static !important;
        transform: none !important;  
    }

    /* Hide unused mobile cols */
    body:not(.view-grid-active) table tbody tr td[data-col-id="date"],
    body:not(.view-grid-active) table tbody tr td[data-col-id="status"],
    body:not(.view-grid-active) table tbody tr td[data-col-id="thumbnail"],
    body:not(.view-grid-active) table tbody tr td[data-col-id="index"]:not(.checkbox-col) { 
        display: none !important; 
    }

    /* Badge alignment fixes (Force Fixed Width & 1px Gap) */
    body:not(.view-grid-active) .type-badge,
    body:not(.view-grid-active) .res-badge,
    body:not(.view-grid-active) .hdr-table-badge,
    body:not(.view-grid-active) .status-badge {
        height: 18px !important;
        line-height: 1 !important;
        font-size: 0.65rem !important;
        border-radius: 4px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        transform: none !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }

    /* Specific Width Restorations in Mobile (to override auto) */
    body:not(.view-grid-active) .type-badge { width: 48px !important; min-width: 48px !important; }
    body:not(.view-grid-active) .res-badge { width: 38px !important; min-width: 38px !important; }
    body:not(.view-grid-active) .hdr-table-badge { width: 44px !important; min-width: 44px !important; }

    body:not(.view-grid-active) .copy-btn { 
        padding: 0px 8px !important; 
        font-size: 0.75rem !important; 
        height: 24px !important; 
        display: flex !important; 
        align-items: center !important; 
        justify-content: center !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    /* [NEW] Premium Selected Row Style for Mobile Card */
    body:not(.view-grid-active) table tbody tr.selected-row {
        background: rgba(6, 182, 212, 0.12) !important; /* Slightly stronger cyan tint */
        outline: 1px solid #06b6d4 !important; /* Card-wide outline (no reflow) */
        outline-offset: -1px !important;
        border-radius: 8px !important;
        box-shadow: 0 0 12px rgba(6, 182, 212, 0.2) !important;
        margin-top: 2px !important;
        margin-bottom: 2px !important;
        transform: scale(1.01); /* Subtle pop-out effect */
        transition: all 0.2s ease;
        position: relative;
        z-index: 5;
    }

    /* Reset individual TD styles that cause breakage on mobile grid */
    body:not(.view-grid-active) table tbody tr.selected-row td {
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: white !important;
    }

    /* Ensure first/last child rounding doesn't interfere */
    body:not(.view-grid-active) table tbody tr.selected-row td:first-child,
    body:not(.view-grid-active) table tbody tr.selected-row td:last-child {
        border-radius: 0 !important;
        border: none !important;
    }
}