body {
    font-family: system-ui, sans-serif;
}

.page.dashboard {
    background: #eeecea;
    color: #1a1a1a;
    font-size: 14px;
    padding: 1.5rem;
    height: calc(100vh - 50px);

    .top-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 1.5rem;
        flex-wrap: wrap;
    }

    .date-btn {
        font-size: 13px;
        padding: 5px 12px;
        border-radius: 6px;
        border: 0.5px solid #c8c8c0;
        background: #ffffff;
        color: #666;
        cursor: pointer;
        white-space: nowrap;
    }

    .date-btn:hover {
        background: #f0f0ee;
    }

    .date-btn.active {
        background: #e6f1fb;
        color: #185fa5;
        border-color: #b5d4f4;
        font-weight: 500;
    }

    .date-sep {
        color: #aaa;
        font-size: 13px;
    }

    .date-input {
        font-size: 13px;
        padding: 5px 10px;
        border-radius: 6px;
        border: 0.5px solid #c8c8c0;
        background: #ffffff;
        color: #1a1a1a;
    }

    #refresh {
        width: 20px;
        margin-left: 20px;
        cursor: pointer;
    }

    .sections {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        overflow-y: auto;
        height: calc(100vh - 150px);
    }

    .section {
        background: #ffffff;
        border-radius: 10px;
        border: 0.5px solid #d4d4ce;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
    }

    .section-header {
        padding: 0.75rem 1.25rem;
        border-bottom: 0.5px solid #ddddd8;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .section-title {
        font-size: 14px;
        font-weight: 500;
        color: #1a1a1a;
    }

    .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .dot-blue   { background: #378add; }
    .dot-teal   { background: #1d9e75; }
    .dot-amber  { background: #ba7517; }
    .dot-purple { background: #7c3aed; }

    .badge {
        font-size: 11px;
        padding: 2px 8px;
        border-radius: 99px;
        font-weight: 500;
    }

    .badge-blue   { background: #e6f1fb; color: #185fa5; }
    .badge-teal   { background: #e1f5ee; color: #0f6e56; }
    .badge-amber  { background: #faeeda; color: #854f0b; }
    .badge-purple { background: #ede9fe; color: #5b21b6; }

    .btn-toggle-done {
        margin-left: auto;
        font-size: 12px;
        padding: 3px 10px;
        border-radius: 6px;
        border: 0.5px solid #c8c8c0;
        background: transparent;
        color: #888;
        cursor: pointer;
        white-space: nowrap;
    }

    .btn-toggle-done:hover {
        background: #f0f0ee;
        color: #444;
    }

    .btn-toggle-done.active {
        background: #e1f5ee;
        color: #0f6e56;
        border-color: #9fe1cb;
    }

    v-icon.connect    { color: darkgreen; width: 16px; }
    v-icon.disconnect { color: crimson;   width: 12px; }

    table {
        table-layout: fixed;
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
    }

    th {
        text-align: left;
        padding: 8px 1.25rem;
        color: #888;
        font-weight: 500;
        font-size: 12px;
        border-bottom: 0.5px solid #ddddd8;
        background: #f8f8f6;
        overflow: hidden;
    }

    td {
        padding: 10px 1.25rem;
        color: #1a1a1a;
        border-bottom: 0.5px solid #ddddd8;
        vertical-align: middle;
        overflow: hidden;
    }

    tr:last-child td {
        border-bottom: none;
    }

    th.col-done,
    td.col-done {
        text-align: right;
        padding-right: 10px;
        padding-left: 0;
    }

    th.col-icon,
    td.col-icon {
        text-align: center;
        padding: 0;
    }

    .name {
        font-weight: 500;
    }

    .muted {
        color: #888;
        font-size: 12px;
    }

    .tag {
        display: inline-block;
        font-size: 11px;
        padding: 2px 8px;
        border-radius: 99px;
    }

    .tag-m { background: #e6f1fb; color: #185fa5; }
    .tag-f  { background: #fbeaf0; color: #993556; }

    .truncate {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .workout-tag {
        font-size: 11px;
        padding: 2px 8px;
        border-radius: 99px;
        background: #f0f0ee;
        color: #666;
        border: 0.5px solid #ddddd8;
    }

    tr.done td {
        opacity: 0.4;
    }

}