/* Focus */
.focus-cockpit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 0 auto;
    max-width: 1000px;
    padding-bottom: 3rem;
}

.focus-cockpit-card {
    background: #00000030;
    border: 1px solid #ffffff15;
    border-radius: 14px;
    padding: 1rem;
}

.focus-main-card { grid-column: span 2; }

.focus-cockpit-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.focus-cockpit-card h2 {
    font-size: 1rem;
    margin-bottom: 0.85rem;
    color: #e2e8f0;
}

.focus-session-badge {
    font-size: 0.75rem;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    border: 1px solid transparent;
}
.focus-session-badge.idle { background: #64748b22; color: #94a3b8; border-color: #64748b55; }
.focus-session-badge.running { background: #22c55e22; color: #4ade80; border-color: #22c55e66; }
.focus-session-badge.paused { background: #f59e0b22; color: #fbbf24; border-color: #f59e0b66; }

.focus-timer {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 0.8rem;
}

.focus-controls {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.8rem;
}

.focus-btn {
    border: 1px solid #ffffff24;
    background: #ffffff0d;
    color: #e2e8f0;
    border-radius: 8px;
    min-height: 40px;
    padding: 0.45rem 0.8rem;
    cursor: pointer;
}
.focus-btn.primary { background: #38bdf822; border-color: #38bdf855; color: #7dd3fc; }
.focus-btn.full { width: 100%; margin-top: 0.75rem; }
.focus-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.focus-duration-presets {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.6rem;
    flex-wrap: wrap;
}

.focus-preset-btn.active {
    border-color: #38bdf855;
    background: #38bdf822;
    color: #7dd3fc;
}

.focus-save-hint {
    margin-top: 0.45rem;
    font-size: 0.82rem;
    color: #94a3b8;
}

.focus-save-hint.saved {
    color: #34d399;
}

.focus-settings-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.focus-settings-row input {
    width: 90px;
    background: #00000030;
    border: 1px solid #ffffff20;
    color: #e2e8f0;
    border-radius: 8px;
    padding: 0.4rem 0.6rem;
}

.focus-priority-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.focus-priority-input {
    width: 100%;
    background: #00000030;
    border: 1px solid #ffffff20;
    color: #e2e8f0;
    border-radius: 8px;
    padding: 0.55rem 0.65rem;
}

.focus-checklist {
    display: grid;
    gap: 0.55rem;
}
.focus-check-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: #cbd5e1;
}

.focus-metrics { display: grid; gap: 0.55rem; }
.focus-metric {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #ffffff12;
    border-radius: 8px;
    padding: 0.55rem 0.65rem;
}

body[data-theme="light"] .focus-cockpit-card {
    background: #ffffff;
    border-color: #e2e8f0;
}
body[data-theme="light"] .focus-cockpit-card h2,
body[data-theme="light"] .focus-btn,
body[data-theme="light"] .focus-priority-input,
body[data-theme="light"] .focus-settings-row input,
body[data-theme="light"] .focus-check-item {
    color: #1e293b;
}
body[data-theme="light"] .focus-btn,
body[data-theme="light"] .focus-priority-input,
body[data-theme="light"] .focus-settings-row input {
    background: #f8fafc;
    border-color: #cbd5e1;
}

@media (max-width: 768px) {
    .focus-cockpit-grid { grid-template-columns: 1fr; }
    .focus-main-card { grid-column: span 1; }
}