/* Intervals - full-screen phase colors. Text color is inherited from body so
   the yellow recovery phase stays readable without per-element overrides. */

html, body {
    margin: 0;
    min-height: 100%;
}

body {
    padding-top: 56px;
    transition: background-color 0.4s ease;
}

.navbar {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(5px);
}

#timer-display {
    min-height: calc(100vh - 56px);
    padding: 1.5rem 1rem 3rem;
    text-align: center;
    color: inherit;
}

#block-name {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.75;
}

#phase-name {
    font-weight: bold;
}

#phase-time {
    font-size: 7rem;
    line-height: 1;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
}

#total-time,
#next-up,
.segment-hint {
    opacity: 0.7;
}

#phase-info {
    font-style: italic;
    opacity: 0.9;
}

/* Phase colors */
.phase-idle {
    background-color: #212529;
    color: #fff;
}

.phase-red {
    background-color: #dc3545;
    color: #fff;
}

.phase-yellow {
    background-color: #ffc107;
    color: #212529;
}

.phase-green {
    background-color: #198754;
    color: #fff;
}

/* Buttons and switches follow the phase text color */
.phase-yellow .btn-outline-light {
    color: #212529;
    border-color: #212529;
}

.phase-yellow .btn-outline-light:hover {
    background-color: #212529;
    color: #fff;
}

.phase-yellow .navbar .form-check-label {
    color: #fff;
}

/* Segment list */
#segment-list {
    max-width: 26rem;
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 0.5rem;
}

#segment-list table {
    color: inherit;
    --bs-table-color: inherit;
    --bs-table-bg: transparent;
}

#segment-list td {
    padding: 0.35rem 0.5rem;
    border: none;
    text-align: left;
    vertical-align: middle;
}

#segment-table tr {
    opacity: 0.6;
    cursor: pointer;
}

#segment-table tr:hover {
    opacity: 0.9;
    background: rgba(255, 255, 255, 0.08);
}

#segment-table tr.current-segment {
    opacity: 1;
    font-weight: bold;
    background: rgba(255, 255, 255, 0.14);
}

#segment-table tr.completed-segment {
    opacity: 0.3;
}

#segment-table tr.completed-segment.current-segment {
    opacity: 1;
}

.dot-cell {
    width: 1.5rem;
}

.block-cell {
    width: 7rem;
    font-size: 0.85rem;
    opacity: 0.85;
}

.segment-detail {
    display: block;
    font-size: 0.75rem;
    font-weight: normal;
    opacity: 0.75;
}

.segment-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.segment-dot-red {
    background-color: #dc3545;
}

.segment-dot-yellow {
    background-color: #ffc107;
}

.segment-dot-green {
    background-color: #198754;
}

/* Editor */
.editor-table th {
    font-weight: normal;
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}

/* Responsive */
@media (max-width: 576px) {
    #phase-time {
        font-size: 4.5rem;
    }

    #phase-name {
        font-size: 1.75rem;
    }

    .block-cell {
        width: 5.5rem;
        font-size: 0.75rem;
    }
}