/* Routines view — list + editor screens (KDS card style) */

.routines-view {
    padding: var(--space-3);
    padding-bottom: 100px;
}

.routines-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
    padding: 0 var(--space-1);
}

.routines-title {
    font-size: var(--font-title);
    font-weight: var(--weight-title);
    color: var(--text-primary);
}

.routines-new-btn {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border: none;
    border-radius: var(--radius-full);
    background: var(--accent);
    color: var(--bg);
    font-size: var(--font-caption);
    font-weight: var(--weight-label);
    font-family: inherit;
    cursor: pointer;
    -webkit-appearance: none;
}

.routines-new-btn:active { opacity: 0.8; transform: scale(0.97); }

.routines-new-btn .material-symbols-rounded {
    font-size: 18px;
}

/* Routine card in list — matches workout exercise card style */
.routine-list-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-2);
    background: linear-gradient(165deg, #171a1d 0%, #111315 100%);
    border-radius: var(--radius-xl);
}

.routine-list-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    box-shadow: 0 0 6px currentColor;
}

.routine-list-info {
    flex: 1;
    min-width: 0;
}

.routine-list-name {
    font-size: var(--font-body);
    font-weight: var(--weight-title);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.routine-list-meta {
    font-size: var(--font-label);
    color: var(--text-tertiary);
    margin-top: 2px;
}

.routine-list-muscles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-1);
}

.routine-muscle-chip {
    font-size: var(--font-label);
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    background: var(--surface-3);
    color: var(--text-secondary);
}

.routine-list-actions {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}

.routine-list-actions button {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    -webkit-appearance: none;
}

.routine-list-actions button:not(:disabled):active {
    background: var(--surface-3);
    color: var(--text-primary);
}

.routine-list-actions button:disabled { opacity: 0.25; }

.routine-list-actions .material-symbols-rounded {
    font-size: 20px;
}

/* Editor screen */
.routine-editor {
    padding: var(--space-3);
    padding-bottom: 100px;
}

.routine-editor-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    padding: 0 var(--space-1);
}

.routine-editor-back {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--space-1);
    display: flex;
    align-items: center;
    -webkit-appearance: none;
}

.routine-editor-back:active { color: var(--text-primary); }

.routine-editor-name {
    font-size: var(--font-title);
    font-weight: var(--weight-title);
    color: var(--text-primary);
    cursor: pointer;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.routine-editor-name:active { opacity: 0.7; }

/* Exercise row in editor — same card gradient */
.routine-ex-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-2);
    background: linear-gradient(165deg, #171a1d 0%, #111315 100%);
    border-radius: var(--radius-xl);
}

.routine-ex-info {
    flex: 1;
    min-width: 0;
}

.routine-ex-row-name {
    font-size: var(--font-body);
    font-weight: var(--weight-label);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.routine-ex-row-sets {
    font-size: var(--font-label);
    color: var(--text-tertiary);
    margin-top: 2px;
}

.routine-ex-actions {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}

.routine-ex-actions button {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: var(--space-1);
    display: flex;
    align-items: center;
    -webkit-appearance: none;
}

.routine-ex-actions button:not(:disabled):active {
    background: var(--surface-3);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
}

.routine-ex-actions button:disabled { opacity: 0.25; }

.routine-ex-actions .material-symbols-rounded {
    font-size: 18px;
}

.routine-editor-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-3);
    margin-top: var(--space-2);
    border: 1px dashed var(--border);
    border-radius: var(--radius-xl);
    background: none;
    color: var(--text-tertiary);
    font-size: var(--font-caption);
    font-weight: var(--weight-label);
    font-family: inherit;
    cursor: pointer;
    -webkit-appearance: none;
}

.routine-editor-add-btn:active {
    background: var(--surface-1);
    color: var(--text-secondary);
}

.routine-editor-add-btn .material-symbols-rounded {
    font-size: 18px;
}

.routines-empty {
    text-align: center;
    padding: 60px var(--space-4);
    color: var(--text-tertiary);
    font-size: var(--font-caption);
}