/* --- Light Mode Specific Fixes --- */
[data-theme="light"] .skills-dashboard {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--border-color);
}

[data-theme="light"] .skill-name {
    color: var(--text-main);
}

[data-theme="light"] .component-chip {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
}

/* Darken brand colors for white background legibility */
[data-theme="light"] .color-node { color: #215732; border-color: #339933; }
[data-theme="light"] .color-python { color: #2b5b84; border-color: #3776AB; }
[data-theme="light"] .color-flutter { color: #02569B; border-color: #02569B; }
[data-theme="light"] .color-react { color: #00758f; border-color: #61DAFB; }
[data-theme="light"] .color-mongo { color: #13aa52; border-color: #47A048; }
[data-theme="light"] .color-firebase { color: #a37500; border-color: #FFCA28; }
[data-theme="light"] .color-ubuntu { color: #E95420; border-color: #E95420; }
[data-theme="light"] .color-docker { color: #007bff; border-color: #2496ED; }
[data-theme="light"] .color-ansible { color: #CC0000; border-color: #EE0000; }
[data-theme="light"] .color-vscode { color: #0066b3; border-color: #007ACC; }
[data-theme="light"] .color-github { color: #24292f; border-color: #24292f; }
[data-theme="light"] .color-figma { color: #b93a15; border-color: #F24E1E; }
[data-theme="light"] .color-ai { color: #c26400; border-color: #FF8300; }
[data-theme="light"] .color-ganache { color: #8a5a2a; border-color: #E4A663; }

/* Adjust status pills for light mode */
[data-theme="light"] .status-pill.green { background: #e6ffed; border-color: #2da44e; color: #1a7f37; }
[data-theme="light"] .status-pill.blue { background: #ddf4ff; border-color: #0969da; color: #0969da; }
[data-theme="light"] .status-pill.red { background: #ffebe9; border-color: #cf222e; color: #a40e26; }

/* Ensure icons don't wash out */
[data-theme="light"] .component-chip img {
    filter: saturate(1.5) contrast(1.2);
}

/* Adjust hover for light mode */
[data-theme="light"] .component-chip:hover {
    background: rgba(0, 0, 0, 0.08);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
}

.skills-dashboard {
    width: 100%;
    font-family: var(--font-stack);
    border: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.2);
    padding: 20px;
    border-radius: 6px;
    box-sizing: border-box;
}

.dashboard-header {
    display: flex;
    padding-bottom: 15px;
    border-bottom: 1px dashed var(--border-color);
    color: var(--accent-primary);
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 1.5px;
}

.dashboard-row {
    display: flex;
    align-items: flex-start; /* Align to top for multi-line components */
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Column Width Adjustments */
.col-main { width: 22%; display: flex; align-items: center; gap: 12px; }
.col-status { width: 13%; }
.col-components { width: 65%; display: flex; flex-wrap: wrap; gap: 8px; }

.skill-name { color: var(--text-main); font-weight: bold; font-size: 0.95rem; }

/* Prettier Component Chips */
.component-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold; /* Make text bolder to pop with color */
    transition: all 0.2s ease;
}

.component-chip img {
    width: 14px;
    height: 14px;
    opacity: 1; /* Full brightness for colored icons */
}

.color-node { color: #339933; border-color: rgba(51, 153, 51, 0.3); }
.color-python { color: #3776AB; border-color: rgba(55, 118, 171, 0.3); }
.color-flutter { color: #47d1ff; border-color: rgba(71, 209, 255, 0.3); } /* Lighter blue for dark theme */
.color-react { color: #61DAFB; border-color: rgba(97, 218, 251, 0.3); }
.color-mongo { color: #47A048; border-color: rgba(71, 160, 72, 0.3); }
.color-firebase { color: #FFCA28; border-color: rgba(255, 202, 40, 0.3); }
.color-ubuntu { color: #E95420; border-color: rgba(233, 84, 32, 0.3); }
.color-docker { color: #2496ED; border-color: rgba(36, 150, 237, 0.3); }
.color-ansible { color: #EE0000; border-color: rgba(238, 0, 0, 0.3); }
.color-dart { color: #0175C2; border-color: rgba(1, 117, 194, 0.3); }
.color-vscode { color: #007ACC; border-color: rgba(0, 122, 204, 0.3); }
.color-figma { color: #F24E1E; border-color: rgba(242, 78, 30, 0.3); }
.color-git { color: #F05032; border-color: rgba(240, 80, 50, 0.3); }
.color-github { color: #eeeeee; border-color: rgba(238, 238, 238, 0.3); }
.color-postman { color: #FF6C37; border-color: rgba(255, 108, 55, 0.3); }

/* Blockchain & AI Icons */
.color-ganache { color: #E4A663; border-color: rgba(228, 166, 99, 0.3); }
.color-ai { color: #FF8300; border-color: rgba(255, 131, 0, 0.3); }

/* Status Pill for Tools */
.status-pill.blue { 
    background: rgba(88, 166, 255, 0.1); 
    color: var(--accent-primary); 
    border: 1px solid var(--accent-primary); 
}

/* Generic icons text color */
.color-rest, .color-ai, .color-arch, .color-cloud { color: var(--text-main); }

/* Hover effects */
.component-chip:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: scale(1.05);
    box-shadow: 0 0 10px currentColor; /* Glow effect matching the text color */
}

.component-chip:hover img {
    opacity: 1;
    filter: brightness(1.2);
}

/* Status Pills */
.status-pill {
    font-size: 0.7rem;
    padding: 3px 10px;
    border-radius: 4px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.status-pill.green { background: rgba(63, 185, 80, 0.1); color: var(--accent-secondary); border: 1px solid var(--accent-secondary); }
.status-pill.blue { background: rgba(88, 166, 255, 0.1); color: var(--accent-primary); border: 1px solid var(--accent-primary); }
.status-pill.red { background: rgba(248, 81, 73, 0.1); color: var(--text-error); border: 1px solid var(--text-error); }

/* Mobile optimization */
@media (max-width: 800px) {
    .dashboard-row { flex-direction: column; gap: 12px; }
    .col-main, .col-status, .col-components { width: 100%; }
    .col-status { order: -1; margin-bottom: 5px; } /* Put status on top in mobile */
}