/* ==========================================
   1. GLOBÁLIS VÁLTOZÓK (FINOMÍTOTT SÖTÉTVÖRÖS ÉS LÁGYABB ANTRACIT)
   ========================================== */
:root, [data-theme="dark"], body, #app {
    --primary-color: #C82333 !important;     /* Sötétvörös */
    --v-primary-base: #C82333 !important;
    --aria-primary: #C82333 !important;
    --accent-color: #C82333 !important;
    --blue: #C82333 !important;
    
    /* Lágyabb antracit szürke háttér */
    --background-color: #262B2E !important;
    --surface-color: #2B3033 !important;
    --pve-main-bg: #262B2E !important;
}

/* ==========================================
   2. TÁRHELY CSÍK / PROGRESS BAR KÉK SZÍNÉNEK KIIRTÁSA
   ========================================== */
/* Bármilyen progress sáv vagy háttér doboz (pl. a sáv alapja) */
progress, .progress, .storage-bar, .meter, .bar, [class*="progress"], [class*="storage"] {
    background-color: #1F2326 !important; /* Nagyon sötét szürke alap */
    border: 1px solid #353B3F !important;
    accent-color: #C82333 !important;
}

/* A feltöltött / foglalt rész kényszerítése sötétvörösre az összes lehetséges motorban */
progress::-webkit-progress-value, 
.progress .value, 
.storage-bar .fill,
.meter > span,
.bar-fill,
[class*="progress"] [class*="fill"],
[class*="progress"] [class*="value"] {
    background-color: #C82333 !important;
    background: #C82333 !important;
}

progress::-webkit-progress-bar {
    background-color: #1F2326 !important;
}

progress::-moz-progress-bar {
    background-color: #C82333 !important;
}

/* HA A KÉK CSÍK EGY SVG GRAFIKA (Gyakori a Vue appoknál): színezze át a vonalat vörösre */
svg path[stroke="#2196F3"], svg path[fill="#2196F3"],
svg path[stroke*="blue"], svg path[fill*="blue"],
svg [class*="fill"] {
    stroke: #C82333 !important;
    fill: #C82333 !important;
}

/* ==========================================
   3. KIJELÖLT MAPPA / FÁJL - FEHÉR ÉS VASTAG (VÖRÖS CSÍKKAL)
   ========================================== */
.item[aria-selected="true"],
.item[data-selected="true"],
.item.selected,
.mosaic .item[aria-selected="true"],
.item-list .item[aria-selected="true"],
div[aria-selected="true"] {
    background-color: #353B3F !important; /* Világosabb kijelölési háttér */
    border-left: 4px solid #C82333 !important; /* Sötétvörös kiemelő csík */
    box-shadow: none !important;
}

/* Kijelölt elem szövege: Fehér és vastag */
.item[aria-selected="true"] .name,
.item[aria-selected="true"] p,
.item[aria-selected="true"] span,
.item[aria-selected="true"] a {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Kijelölt elem ikonja: Fehér */
.item[aria-selected="true"] i,
.item[aria-selected="true"] .material-icons,
.item[aria-selected="true"] .icon {
    color: #ffffff !important;
}

/* Egér lebegés (Hover) */
.item:hover, .mosaic .item:hover {
    background-color: #3B4246 !important;
}

/* ==========================================
   4. FRISSÍTÉS (UPDATE) SZÖVEGEK ÉS GOMBOK
   ========================================== */
button.button, 
.button--raised, 
input[type="submit"], 
button[type="submit"],
.button.primary,
.action[title*="Update"],
.action[title*="Frissítés"] {
    background-color: #C82333 !important;
    color: #ffffff !important;           
    font-weight: bold !important;
    border-color: #C82333 !important;
}

.update-text, 
.notification, 
.action-bar .update, 
a[href*="update"] {
    color: #C82333 !important;
}

/* ==========================================
   5. JELÖLŐNÉGYZETEK (CHECKBOX) ÉS PIPÁK
   ========================================== */
input[type="checkbox"] {
    accent-color: #C82333 !important;
}

input[type="checkbox"]:checked,
.checkbox input:checked + i,
[aria-checked="true"],
[aria-checked="true"] i,
.material-icons.checked,
.action.checkbox i {
    color: #C82333 !important;
    border-color: #C82333 !important;
}

input, select, textarea {
    background-color: #353B3F !important;
    color: #ffffff !important;
    border: 1px solid #4A5257 !important;
}

/* ==========================================
   6. ALAP SÖTÉTÍTÉSEK (VILÁGOSÍTOTT ANTRACIT ALAP)
   ========================================== */
body, #app, main, .page, .item-list, .mosaic, .shell, .card, .breadcrumbs, header, sidebar {
    background-color: #262B2E !important;
    color: #E2E8F0 !important;
}

header, sidebar {
    background-color: #1F2326 !important;
}

.material-icons, i, .icon, button i, .action i, .item i, a, .breadcrumbs a {
    color: #C82333 !important;
}

#login, .login, main.login {
    background-color: #1F2326 !important;
}
#login form, .login form {
    background-color: #262B2E !important;
    border: 1px solid #353B3F !important;
}
#login input[type="submit"], .login button[type="submit"] {
    background-color: #C82333 !important;
    color: #ffffff !important;
}
/* ==========================================
   7. VÉGLEGES VÖRÖSÍTÉS A MAKACS SZÜRKE TÁRHELYSÁVRA
   ========================================== */
/* Átírja a teljes progress sávot, a benne lévő skálát és a kitöltést vörösre */
.progress div,
.progress span,
[class*="progress"] div,
[class*="progress"] span,
.storage-bar div,
.storage-bar span {
    background-color: #C82333 !important;
    background: #C82333 !important;
}

/* Ha a sáv egy belső háttérelemmel van megoldva (Vue specifikus) */
.bar .fill, 
.bar .value,
[class*="bar-"] div,
[class*="usage-"] div {
    background-color: #C82333 !important;
}