/* style.css */

/* ===== CSS Variables ===== */
:root {
    /* Colors */
    --color-primary: #4CAF50;
    --color-primary-light: rgba(76, 175, 80, 0.3);
    --color-primary-dark: #388E3C;
    --color-text: #222;
    --color-text-light: #666;
    --color-background: #f9f9f9;
    --color-white: #fff;
    --color-black: #000;
    --color-border: #ddd;
    --color-success: #4CAF50;
    --color-info: #2196F3;
    --color-warning: #FFC107;
    --color-error: #f44336;
    
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    
    /* Typography */
    --font-family-mono: 'Consolas', 'Menlo', 'Monaco', 'Liberation Mono', 'Lucida Console', 'DejaVu Sans Mono', 'Courier New', 'Courier', monospace;
    --font-size-xs: 0.8rem;
    --font-size-sm: 0.9rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.1rem;
    --font-size-xl: 1.2rem;
    --font-size-xxl: 2.2rem;
    
    /* Layout */
    --border-radius: 4px;
    --box-shadow: 1px 1px 2px rgba(0,0,0,0.08);
    --transition-speed: 0.2s;
    
    /* Components */
    --header-bg: #f2f2f2;
    --row-hover: #f5f5f5;
    --highlight: #d1ffd1;
    --loopback-bg: #ffe6e6;
}

/* ===== Base Styles ===== */
body {
    background: var(--color-background);
    font-family: var(--font-family-mono) !important;
    color: var(--color-text);
    margin: 0;
    padding: var(--spacing-xl);
    line-height: 1.4;
}

h1.page-title {
    font-family: var(--font-family-mono);
    font-weight: bold;
    font-size: var(--font-size-xxl);
    margin-bottom: var(--spacing-xs);
}

p.tagline {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-lg);
    margin-top: 0;
    margin-bottom: var(--spacing-md);
}

/* ===== Layout Components ===== */
.top-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-sm) var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
}

.piano-section {
    margin: var(--spacing-xl) 0;
    padding: var(--spacing-lg);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

/* ===== Pad Chords Section ===== */
.pad-chords-section {
    margin: var(--spacing-xl) 0;
    padding: var(--spacing-lg);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.pad-chords-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.pad-chord {
    position: relative;
    padding: var(--spacing-sm);
    margin: var(--spacing-xs);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--color-white);
    min-height: 80px;
}

.pad-chord.active {
    background: var(--highlight);
    box-shadow: 0 0 4px var(--color-primary-light);
}

.pad-name {
    font-weight: bold;
    margin-bottom: var(--spacing-xs);
}

.chord-name {
    color: var(--color-text);
    margin-bottom: var(--spacing-xs);
}

.chord-notes {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    margin-top: var(--spacing-xs);
    word-break: break-all;
}

.add-to-sequence {
    position: absolute;
    top: var(--spacing-xs);
    right: var(--spacing-xs);
    width: 24px;
    height: 24px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-text-light);
    font-size: var(--font-size-base);
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-speed) ease;
}

.add-to-sequence:hover {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

/* ===== Piano Styles ===== */
.piano-container {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: var(--spacing-sm) 0;
    background: var(--header-bg);
    border-radius: var(--border-radius);
    margin: var(--spacing-xl) 0;
    overflow-x: auto;
    white-space: nowrap;
}

.piano-key {
    transition: all var(--transition-speed) ease;
}

.piano-key.white {
    fill: var(--color-white);
    stroke: var(--color-border);
    stroke-width: 1;
}

.piano-key.black {
    fill: var(--color-text);
    stroke: var(--color-black);
    stroke-width: 1;
}

.piano-key.active {
    fill: var(--color-primary);
    filter: drop-shadow(0 0 4px var(--color-primary-light));
}

.piano-key:hover {
    filter: brightness(0.95);
    cursor: pointer;
}

.key-text {
    font-size: var(--font-size-xs);
    font-family: var(--font-family-mono);
    user-select: none;
    pointer-events: none;
}

/* ===== Notification System ===== */
#notification-area {
    position: fixed;
    bottom: var(--spacing-xl);
    right: var(--spacing-xl);
    z-index: 1000;
}

.notification {
    background: rgba(0, 0, 0, 0.8);
    color: var(--color-white);
    padding: var(--spacing-md) var(--spacing-xl);
    margin: var(--spacing-sm);
    border-radius: var(--border-radius);
    opacity: 1;
    transition: opacity var(--transition-speed);
}

.notification.success { border-left: 4px solid var(--color-success); }
.notification.info { border-left: 4px solid var(--color-info); }
.notification.warning { border-left: 4px solid var(--color-warning); }
.notification.error { border-left: 4px solid var(--color-error); }

/* ===== Controls and Forms ===== */
.controls {
    margin-bottom: var(--spacing-base);
}

.controls label {
    margin-right: var(--spacing-xs);
}

.controls select {
    margin-right: var(--spacing-lg);
}

select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

textarea {
    width: 99%;
    padding: var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-family: var(--font-family-mono);
    resize: vertical;
}

/* ===== MIDI Port Controls ===== */
.port-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-weight: bold;
    margin-bottom: var(--spacing-xs);
}

.port-label select {
    flex: 1;
    padding: var(--spacing-xs);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--color-white);
}

.port-status {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: var(--spacing-sm);
}

.port-status.connected { background-color: var(--color-success); }
.port-status.disconnected { background-color: var(--color-error); }

.midi-activity {
    width: 8px;
    height: 8px;
    background: var(--color-text-light);
    border-radius: 50%;
    opacity: 0;
    transition: background-color 0.1s;
    margin-left: var(--spacing-sm);
}

.midi-activity.active {
    background: var(--color-success);
    opacity: 1;
    box-shadow: 0 0 4px var(--color-primary-light);
}

/* ===== Sequence Editor ===== */
.sequence-steps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin: var(--spacing-sm) 0;
}

.sequence-step {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--header-bg);
    border-radius: var(--border-radius);
    font-family: var(--font-family-mono);
}

.sequence-step.active {
    background: var(--highlight);
    font-weight: bold;
}

/* ===== Save Indicator ===== */
.save-indicator {
    position: fixed;
    bottom: var(--spacing-xl);
    left: var(--spacing-xl);
    background: rgba(76, 175, 80, 0.1);
    color: var(--color-success);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius);
    font-size: var(--font-size-xs);
    opacity: 0;
    transition: opacity var(--transition-speed);
    z-index: 1001;
}

/* ===== Responsive Design ===== */
@media (max-width: 768px) {
    .pad-chords-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .piano-section {
        padding: var(--spacing-sm);
    }
    
    .sequence-steps {
        flex-direction: column;
    }
}

/* ===== Utility Classes ===== */
.pad button, .pad-chord button {
    all: unset;
    box-sizing: border-box;
}