/**
 * Keyboard Visualization Styles
 * CSS for rendering split keyboard layouts
 */

/* Key styling */
.key-rect {
    fill: var(--bg-secondary, #f7fafc);
    stroke: var(--text-secondary, #a0aec0);
    stroke-width: 2;
    rx: 6;
    transition: fill 0.2s, stroke 0.2s;
}

body.dark-mode .key-rect {
    fill: var(--bg-secondary, #2d3748);
    stroke: var(--text-secondary, #718096);
}

/* Home position keys (where fingers rest) */
.home-position-key .key-rect {
    fill: var(--accent-color, #4f46e5);
    fill-opacity: 0.1;
    stroke: var(--accent-color, #4f46e5);
}

body.dark-mode .home-position-key .key-rect {
    fill: var(--accent-color, #9f7aea);
    fill-opacity: 0.15;
    stroke: var(--accent-color, #9f7aea);
}

/* Key legends (text) */
.key-legend {
    fill: var(--text-primary, #1a202c);
    font-size: 18px;
    font-weight: 600;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
    user-select: none;
}

body.dark-mode .key-legend {
    fill: var(--text-primary, #e2e8f0);
}

/* Thumb keys */
.thumb-key .key-rect {
    fill: var(--bg-primary, #ffffff);
    stroke-width: 2.5;
}

body.dark-mode .thumb-key .key-rect {
    fill: var(--bg-primary, #1a202c);
}

/* Unassigned keys (no character) */
.unassigned-key .key-rect {
    fill: var(--bg-tertiary, #edf2f7);
    stroke: var(--text-tertiary, #cbd5e0);
    stroke-dasharray: 4 4;
    opacity: 0.5;
}

body.dark-mode .unassigned-key .key-rect {
    fill: var(--bg-tertiary, #1a1f2e);
    stroke: var(--text-tertiary, #4a5568);
}

/* SVG container */
svg {
    max-width: 100%;
    height: auto;
}

/* Keyboard View Switcher */
.keyboard-view-switcher {
    cursor: default;
}

.view-switch-btn {
    cursor: pointer;
    transition: opacity 0.15s;
}

.view-switch-btn:hover {
    opacity: 0.85;
}

.view-switch-rect {
    stroke: var(--border-color, #d1d5db);
    stroke-width: 1;
    transition: stroke 0.15s, stroke-width 0.15s;
}

body.dark-mode .view-switch-rect {
    stroke: var(--border-color, #4a5568);
}

.view-switch-btn.active .view-switch-rect {
    stroke: var(--accent-color, #4f46e5);
    stroke-width: 2;
}

body.dark-mode .view-switch-btn.active .view-switch-rect {
    stroke: var(--accent-color, #9f7aea);
    stroke-width: 2;
}

.view-switch-text {
    fill: var(--text-secondary, #4a5568);
    font-size: 10px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
    user-select: none;
}

body.dark-mode .view-switch-text {
    fill: var(--text-secondary, #a0aec0);
}

.view-switch-btn.active .view-switch-text {
    fill: var(--accent-color, #4f46e5);
}

body.dark-mode .view-switch-btn.active .view-switch-text {
    fill: var(--accent-color, #9f7aea);
}