/* modules/sztp_equipment/sztp_equipment.css */
/* SASPOL OPERARIUS - Equipment Module Styles V5.0 */

/* ... (Style Kafelków i Tabeli bez zmian) ... */
.eq-grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; padding-bottom: 50px; }
.eq-card { background: rgba(30, 41, 59, 0.6); border: 1px solid var(--panel-border); border-radius: 12px; overflow: hidden; position: relative; transition: all 0.2s ease; display: flex; flex-direction: column; }
.eq-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.2); border-color: var(--eq-color); }
.eq-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--eq-color); opacity: 0.8; }
.eq-card-visual { height: 140px; background: rgba(255,255,255,0.03); display: flex; align-items: center; justify-content: center; position: relative; border-bottom: 1px solid rgba(255,255,255,0.05); }
.eq-icon { max-width: 70%; max-height: 70%; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)); transition: transform 0.3s; }
.eq-card:hover .eq-icon { transform: scale(1.1); }
.eq-icon-placeholder { font-size: 3rem; color: var(--text-secondary); opacity: 0.3; }
.eq-badges-overlay { position: absolute; top: 10px; right: 10px; display: flex; gap: 5px; }
.eq-card-body { padding: 15px; flex-grow: 1; }
.eq-name { font-weight: 700; font-size: 1rem; color: var(--text-main); margin-bottom: 2px; }
.eq-meta { text-transform: uppercase; color: var(--text-secondary); font-size: 0.7rem; letter-spacing: 0.5px; }
.eq-card-footer { padding: 10px 15px; background: rgba(0,0,0,0.2); border-top: 1px solid var(--panel-border); }
#eq-view-inventory table td { vertical-align: middle; border-bottom: 1px solid rgba(255,255,255,0.05); padding: 12px; }
#eq-view-inventory table th { color: var(--text-secondary); text-transform: uppercase; font-size: 0.75rem; font-weight: 600; border-bottom: 1px solid var(--panel-border); padding: 12px; background: rgba(0,0,0,0.1); }
.timeline { position: relative; padding-left: 20px; border-left: 2px solid rgba(255, 255, 255, 0.1); margin: 10px 0; }
.timeline-item { position: relative; margin-bottom: 20px; }
.timeline-item::before { content: ''; position: absolute; left: -25px; top: 5px; width: 8px; height: 8px; background: var(--accent-color); border-radius: 50%; box-shadow: 0 0 5px var(--accent-color); }
.timeline-item:last-child { margin-bottom: 0; }

/* CATEGORY MANAGER (SPLIT VIEW) */
.cat-manager-item {
    display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; 
    background: rgba(255,255,255,0.03); border: 1px solid var(--panel-border); border-radius: 8px; 
    margin-bottom: 8px; cursor: pointer; transition: all 0.2s;
}
.cat-manager-item:hover { background: rgba(255,255,255,0.08); border-color: var(--text-secondary); transform: translateX(2px); }
.cat-manager-item.active { border-color: var(--accent-color); background: rgba(59, 130, 246, 0.1); }

/* ICON PICKER (INLINE) */
.icon-picker-inline {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 8px;
    background: rgba(0,0,0,0.2); 
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--panel-border);
    max-height: 150px;
    overflow-y: auto;
}

/* POPUP VARIANT (Dla starego modalu, jeśli używany) */
.icon-picker-popup {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 8px;
    background: #1e293b; padding: 15px; border-radius: 8px; border: 1px solid var(--panel-border);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); max-height: 200px; overflow-y: auto; z-index: 1050; 
}

.icon-picker-item {
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.05); border: 1px solid var(--panel-border); border-radius: 6px;
    cursor: pointer; font-size: 1.1rem; color: var(--text-secondary); transition: all 0.2s;
}
.icon-picker-item:hover { background: var(--accent-color); color: #fff; border-color: var(--accent-color); transform: scale(1.1); }
.icon-picker-item.active { background: var(--accent-color); color: #fff; border-color: #fff; }

/* Light Mode Overrides */
[data-bs-theme="light"] .eq-card { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
[data-bs-theme="light"] .eq-card:hover { box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
[data-bs-theme="light"] .eq-card-visual { background: #f8fafc; border-bottom-color: #e2e8f0; }
[data-bs-theme="light"] .eq-name { color: #0f172a; }
[data-bs-theme="light"] .eq-card-footer { background: #f8fafc; border-top-color: #e2e8f0; }
[data-bs-theme="light"] #eq-view-inventory table td { border-bottom-color: #e2e8f0; color: #0f172a; }
[data-bs-theme="light"] #eq-view-inventory table th { border-bottom-color: #e2e8f0; color: #64748b; background: #f8fafc; }
[data-bs-theme="light"] .timeline { border-left-color: #e2e8f0; }
[data-bs-theme="light"] .nav-pills .nav-link { color: #64748b; background: #f1f5f9; }
[data-bs-theme="light"] .nav-pills .nav-link.active { color: #fff; background: var(--accent-color); }
[data-bs-theme="light"] .nav-pills .nav-link:hover:not(.active) { background: #e2e8f0; color: #0f172a; }
[data-bs-theme="light"] .cat-manager-item { background: #ffffff !important; border-color: #e2e8f0 !important; }
[data-bs-theme="light"] .cat-manager-item:hover { background: #f8fafc !important; }
[data-bs-theme="light"] .cat-manager-item.active { background: #eff6ff !important; border-color: var(--accent-color) !important; }
[data-bs-theme="light"] .icon-picker-inline { background: #f8fafc; border-color: #cbd5e1; }
[data-bs-theme="light"] .icon-picker-popup { background: #ffffff; border-color: #cbd5e1; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
[data-bs-theme="light"] .icon-picker-item { background: #ffffff; border-color: #cbd5e1; color: #64748b; }
[data-bs-theme="light"] .icon-picker-item:hover { background: var(--accent-color); color: #fff; }