/* css/library.css */

/* --- Floating Library Panel --- */
.sticky-library-panel {
    position: sticky; top: 0px; z-index: 100;
    background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(10px);
    margin: 0 -40px 30px -40px; padding: 15px 40px; 
    border-top: 1px solid #eaeded; border-bottom: 1px solid #dcdde1;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04); transition: all 0.3s ease;
}
.sticky-library-panel.collapsed {
    border-bottom: 1px solid #dcdde1; box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    padding: 10px 40px;
}
.sticky-library-panel.collapsed .library-grid { display: none; }

/* --- Dashboard Status Bar --- */
.library-status-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%; margin-bottom: 0; }
.status-bar-group { display: flex; gap: 10px; min-width: 0; }

.status-badge {
    display: flex; align-items: center; padding: 0 15px; 
    border-radius: 8px; transition: all 0.2s ease;
    height: 42px; position: relative; box-sizing: border-box;
    font-weight: 600;
}

/* 1. IMPORT BUTTON */
.status-badge.import-action {
    flex: 0 0 100px; justify-content: center; 
    background: #fff; color: var(--color-blue); 
    border: 2px dashed var(--color-blue);
    font-size: 0.85em; cursor: pointer; text-transform: uppercase;
}
.status-badge.import-action:hover { background: var(--color-blue); color: white; border-style: solid; }

/* 2. STATS BUTTON */
.status-badge.stats-action {
    flex: 0 0 100px; justify-content: center; 
    background: #fff; color: var(--color-green-excel); 
    border: 1px solid var(--color-green-excel);
    font-size: 0.85em; cursor: pointer; text-transform: uppercase;
}
.status-badge.stats-action:hover { background: var(--color-green-excel); color: white; }

/* 3. SHOT / PROFILE BADGES */
.status-badge.shot, .status-badge.profile { 
    flex-grow: 1; justify-content: space-between; min-width: 0; cursor: pointer; 
    background-color: var(--color-dark); color: #fff; 
    border: 1px solid var(--color-dark);
    box-shadow: 0 2px 5px rgba(44, 62, 80, 0.2);
}
.status-badge.shot:hover, .status-badge.profile:hover { 
    background-color: #34495e; transform: translateY(-1px);
}

.badge-left, .badge-right { width: 24px; display: flex; align-items: center; }
.badge-left { justify-content: flex-start; } .badge-right { justify-content: flex-end; }

.badge-chevron {
    width: 16px; height: 16px; stroke-width: 2.5; 
    color: rgba(255,255,255,0.8); 
    transition: transform 0.3s ease;
}
.sticky-library-panel:not(.collapsed) .badge-chevron { transform: rotate(180deg); color: #fff; }

.status-value {
    flex-grow: 1; text-align: center; font-size: 0.95em; 
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 10px;
}

.unload-btn {
    color: rgba(255,255,255,0.6); font-size: 1.2em; line-height: 1; transition: color 0.2s;
}
.unload-btn:hover { color: #fff; }

/* Loaded State Overrides */
.status-badge.loaded { 
    background-color: var(--color-blue); border-color: var(--color-blue); 
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
}
.status-badge.mismatch { 
    background-color: #f39c12; border-color: #e67e22; 
    box-shadow: 0 2px 8px rgba(243, 156, 18, 0.3);
}

/* --- Library Grid & Tables --- */
.library-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); gap: 20px; margin-top: 20px; }

/* Toolbar */
.lib-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 15px; }
.lib-toolbar-left { display: flex; align-items: center; gap: 10px; flex-grow: 1; position: relative; }
.lib-toolbar-right { display: flex; align-items: center; gap: 8px; }

/* Search & Sort - HIGH CONTRAST BORDERS */
.lib-search-wrapper { position: relative; display: flex; align-items: center; }
.lib-search-icon {
    position: absolute; left: 10px; width: 14px; height: 14px; 
    color: var(--color-dark); opacity: 1; pointer-events: none; 
}
.lib-search { 
    height: 36px; padding: 0 10px 0 32px; 
    border: 1px solid var(--color-dark); /* Dark Border */
    border-radius: 6px; 
    font-size: 0.9em; width: 200px; color: var(--color-dark);
    transition: border-color 0.2s;
}
.lib-search:focus { outline: none; border-color: var(--color-blue); }

.lib-sort-select { 
    height: 36px; padding: 0 30px 0 10px; 
    border: 1px solid var(--color-dark); /* Dark Border */
    border-radius: 6px; 
    font-size: 0.85em; color: var(--color-dark); font-weight: 500; cursor: pointer;
    background-color: #fff;
}

/* Toolbar Buttons */
.toolbar-icon-btn {
    height: 36px; width: 36px; background: #fff; 
    border: 1px solid var(--color-dark); 
    color: var(--color-dark); 
    border-radius: 6px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s;
}
.toolbar-icon-btn:hover { background: var(--color-dark); color: #fff; }

/* Table Container */
.lib-list-container { 
    max-height: 250px; overflow-y: auto; 
    border: 1px solid #eaeded; border-radius: 8px; 
    background: #fff; width: 100%; 
    border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.lib-list-container.expanded { max-height: none; }

.lib-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.lib-table th { 
    background: #f8f9fa; color: var(--color-dark); 
    font-weight: 700; text-transform: uppercase; font-size: 0.75em; letter-spacing: 0.5px;
    padding: 10px 10px; border-bottom: 2px solid #eaeded; 
    text-align: left; cursor: pointer; position: sticky; top: 0; z-index: 2;
}

.lib-table tr { cursor: pointer; transition: background 0.1s; border-bottom: 1px solid #f1f1f1; }
.lib-table tr:hover { background-color: #f8f9fa; }
.lib-table tr:last-child { border-bottom: none; }

/* Match Highlight */
.lib-table tr.row-match { 
    background-color: rgba(52, 152, 219, 0.18) !important; 
}

.lib-table tr.row-match td { 
    color: var(--color-dark); 
    font-weight: 600; 
}

.lib-table td { padding: 10px 10px; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Typography */
.cell-main { font-size: 0.95em; color: var(--color-dark); font-weight: 500; }
.cell-meta { font-size: 0.85em; color: var(--color-dark); opacity: 0.85; }

/* Action Cell */
.lib-action-cell { 
    display: flex; gap: 4px; justify-content: flex-end; 
    opacity: 1; 
}

.icon-btn {
    background: none; border: none; cursor: pointer; padding: 4px;
    color: var(--color-dark); 
    transition: all 0.2s; display: flex;
}
.icon-btn:hover { color: var(--color-blue); transform: scale(1.1); }
.icon-btn.del:hover { color: #e74c3c; }

/* Show More Button (Thicker Icons) */
.btn-show-more { 
    width: 100%; background: #fdfdfd; 
    border: 1px solid #eaeded; border-top: none;
    color: var(--color-dark); 
    padding: 6px; cursor: pointer; 
    border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; 
    display: flex; justify-content: center; transition: all 0.2s;
}
.btn-show-more:hover { background: #f1f4f6; font-weight: 600; }
/* UPDATE: Thicker stroke */
.btn-show-more svg { width: 16px; height: 16px; stroke: var(--color-dark); stroke-width: 3px; }

/* Footer (Thicker Icons) */
.library-footer { 
    display: flex; justify-content: center; margin-top: 20px; padding-top: 10px; 
    border-top: 1px dashed #dcdde1; cursor: pointer;
}
.btn-close-panel { 
    background: #fff; 
    border: 1px solid var(--color-dark); 
    color: var(--color-dark); 
    width: 40px; height: 24px; border-radius: 12px; 
    display: flex; align-items: center; justify-content: center; transition: all 0.2s;
}
.library-footer:hover .btn-close-panel { background: var(--color-dark); color: #fff; }
/* UPDATE: Thicker stroke */
.btn-close-panel svg { width: 16px; height: 16px; stroke-width: 3px; }