/* ===== Dark Mode (default) ===== */
:root {
    color-scheme: dark;
    --color-bg:           #0e0e0e;
    --color-surface:      #1a1a1a;
    --color-surface-2:    #222222;
    --color-border:       #2e2e2e;
    --color-text:         #e0e0e0;
    --color-text-muted:   #606060;

    --color-today-ring:   #4a8fdd;
    --color-today-col-bg: rgba(74, 143, 221, 0.07);
    --color-today-col-border: rgba(74, 143, 221, 0.2);

    /* FH — orange */
    --color-fh:           #e07b2a;
    --color-fh-bg:        #1e1208;
    --color-fh-chip-bg:   rgba(224,123,42,0.14);
    --color-fh-chip-text: #f0c090;

    /* Private — blue */
    --color-private:          #4a8fdd;
    --color-private-bg:       #0b1624;
    --color-private-chip-bg:  rgba(74,143,221,0.14);
    --color-private-chip-text:#a8ccf5;

    /* Todos — grey */
    --color-todos-label:  #888888;
    --color-todos-bg:     #1a1a1a;

    /* Gym — red */
    --color-gym:          #e74c3c;
    --color-gym-bg:       #111111;
    --color-gym-label:    #888888;
    --color-gym-attended: #e74c3c;
    --color-gym-missed:   #444444;

    /* States */
    --color-success:      #27ae60;
    --color-success-bg:   #0d1f14;
    --color-danger:       #e74c3c;
    --color-danger-bg:    #1f0d0d;

    --label-col-width:    76px;
    --header-height:      52px;
    --toolbar-height:     48px;
}

/* ===== Light Mode ===== */
[data-theme="light"] {
    color-scheme: light;
    --color-bg:           #e2e5f0;
    --color-surface:      #edf0f8;
    --color-surface-2:    #d8dced;
    --color-border:       #c4c8dc;
    --color-text:         #0f1117;
    --color-text-muted:   #575c74;

    --color-today-ring:   #1d4ed8;
    --color-today-col-bg: rgba(29, 78, 216, 0.10);
    --color-today-col-border: rgba(29, 78, 216, 0.35);

    /* FH — orange */
    --color-fh:           #c05000;
    --color-fh-bg:        #fef0e4;
    --color-fh-chip-bg:   #fad8b4;
    --color-fh-chip-text: #6b2c00;

    /* Private — blue */
    --color-private:          #1e4d8c;
    --color-private-bg:       #e4eef8;
    --color-private-chip-bg:  #bcd4f0;
    --color-private-chip-text:#0f2d55;

    /* Todos — grey */
    --color-todos-label:  #383c50;
    --color-todos-bg:     #eef0f8;

    /* Gym — red */
    --color-gym:          #991b1b;
    --color-gym-bg:       #f0f0f8;
    --color-gym-label:    #484c60;
    --color-gym-attended: #991b1b;
    --color-gym-missed:   #9a9db0;

    /* States */
    --color-success:      #15803d;
    --color-success-bg:   #d1fae5;
    --color-danger:       #b91c1c;
    --color-danger-bg:    #fee2e2;
}

/* ===== Light Mode Overrides ===== */
[data-theme="light"] .appointment-chip:hover { filter: brightness(0.93); }
[data-theme="light"] .todo-title:hover { color: var(--color-fh); }
[data-theme="light"] .day-column::-webkit-scrollbar-thumb { background: var(--color-border); }
[data-theme="light"] .day-column::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }
[data-theme="light"] .appointment-timeline .day-column:hover:not(:has(.appointment-chip:hover)) { background: rgba(0,0,0,0.04); }

/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    overflow: hidden;
}

/* ===== Planner Container ===== */
.planner-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* ===== Toolbar ===== */
.planner-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    height: var(--toolbar-height);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.btn-nav {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    border-radius: 6px;
    width: 30px;
    height: 30px;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.btn-nav:hover { background: var(--color-border); }

.btn-today {
    background: rgba(224, 123, 42, 0.15);
    border: 1px solid var(--color-fh);
    color: var(--color-fh);
    border-radius: 6px;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s;
}
.btn-today:hover { background: rgba(224, 123, 42, 0.25); }

.toolbar-range {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-left: 4px;
}

.btn-theme {
    margin-left: auto;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.15s;
    line-height: 1;
}
.btn-theme:hover { background: var(--color-border); }

/* ===== Planner Board ===== */
/* Two-column layout: labels | content */
.planner-board {
    display: grid;
    grid-template-columns: var(--label-col-width) 1fr;
    flex: 1;
    overflow: hidden;
    position: relative;
}

/*
  9-row grid shared by both columns:
  header | FH(15) | gap(5) | Private(15) | gap(8) | Todos(33) | gap(3) | Gym(12) | bottom(9)
*/
.planner-labels-col,
.planner-content-col {
    display: grid;
    grid-template-rows: var(--header-height) 15fr 5fr 15fr 5fr 35fr 5fr 12fr 5fr;
    overflow: hidden;
}

/* ===== Sidebar ===== */
.planner-labels-col { border-right: 1px solid var(--color-border); }

.label-header-spacer {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.label-gap,
.label-bottom {
    background: var(--color-bg);
}

.label-row {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.3;
    padding: 0 6px;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.label-fh      { background: var(--color-fh-bg);      color: var(--color-fh); }
.label-private { background: var(--color-private-bg);  color: var(--color-private); }
.label-todos   { background: var(--color-todos-bg);    color: var(--color-todos-label); }
.label-gym     { background: var(--color-gym-bg);      color: var(--color-gym-label); }

/* ===== Content Column ===== */
.planner-content-col {
    overflow-x: auto;
    overflow-y: hidden;
}

.today-col-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    background: transparent;
    box-shadow: inset 1px 0 0 var(--color-today-col-border), inset -1px 0 0 var(--color-today-col-border);
    pointer-events: none;
    z-index: 1;
}

.timeline-gap,
.timeline-bottom {
    display: grid;
    height: 100%;
    background: var(--color-bg);
}

.today-gap-col {
    background: var(--color-today-col-bg);
}

/* ===== Day Columns Header ===== */
.day-columns-header {
    display: grid;
    height: var(--header-height);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    position: sticky;
    top: 0;
    z-index: 10;
}

.day-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-right: 1px solid var(--color-border);
    gap: 1px;
}

.day-header.today { background: var(--color-today-col-bg); }
.day-header.today .day-number { color: var(--color-today-ring); }

.day-name  { font-size: 10px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.day-number { font-size: 16px; font-weight: 700; line-height: 1; }
.month-name { font-size: 9px; color: var(--color-text-muted); }

/* ===== Timeline Rows ===== */
.timeline-row {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.timeline-row .timeline-label { display: none; }

.appointment-timeline.fh-row      { background: var(--color-fh-bg); }
.appointment-timeline.private-row  { background: var(--color-private-bg); }
.appointment-timeline .day-column { cursor: pointer; }
.appointment-timeline .day-column:hover:not(:has(.appointment-chip:hover)) { background: rgba(255,255,255,0.01); }
.todo-timeline                     { background: var(--color-todos-bg); }
.gym-timeline                      { background: var(--color-gym-bg); }

/* ===== Day Column Grid ===== */
.timeline-columns {
    display: grid;
    height: 100%;
    overflow: hidden;
}

.day-column {
    border-right: 1px solid var(--color-border);
    padding: 4px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: background 0.1s;
}

.day-column.drag-over {
    background: rgba(74, 143, 221, 0.10);
    outline: 1px dashed var(--color-accent, #4a8fdd);
    outline-offset: -2px;
}

/* ===== Appointment Chips ===== */
.appointment-chip {
    padding: 5px 8px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    transition: filter 0.15s;
    overflow: hidden;
    flex-shrink: 0;
}
.appointment-chip:hover { filter: brightness(1.25); }

.chip-fh {
    background: var(--color-fh-chip-bg);
    border-left: 3px solid var(--color-fh);
    color: var(--color-fh-chip-text);
}
.chip-private {
    background: var(--color-private-chip-bg);
    border-left: 3px solid var(--color-private);
    color: var(--color-private-chip-text);
}

.chip-title {
    display: block;
    font-weight: 600;
    word-break: break-word;
}
.chip-time {
    display: block;
    font-size: 10px;
    color: var(--color-text-muted);
    margin-top: 1px;
}

/* ===== Add Buttons ===== */
.btn-add {
    background: none;
    border: 1px dashed var(--color-border);
    color: var(--color-text-muted);
    border-radius: 4px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.btn-add:hover { color: var(--color-fh); border-color: var(--color-fh); }

.btn-add-inline {
    background: none;
    border: 1px dashed var(--color-border);
    color: var(--color-text-muted);
    font-size: 13px;
    cursor: pointer;
    padding: 5px 0;
    text-align: center;
    border-radius: 4px;
    transition: color 0.15s, border-color 0.15s;
    margin-top: auto;
    flex-shrink: 0;
    width: 100%;
}
.btn-add-inline:hover { color: var(--color-todos-label); border-color: var(--color-todos-label); }

/* ===== Todo Items ===== */
.todo-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 7px;
    border-radius: 5px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    flex-shrink: 0;
    cursor: default;
}
.todo-item:active { cursor: default; }

.todo-item.completed {
    background: var(--color-success-bg);
    border-color: rgba(39,174,96,0.3);
}
.todo-item.completed .todo-title {
    text-decoration: line-through;
    color: var(--color-success);
}

.todo-item.skipped {
    background: var(--color-danger-bg);
    border-color: rgba(231,76,60,0.3);
}
.todo-item.skipped .todo-title {
    text-decoration: line-through;
    color: var(--color-danger);
}

.todo-check {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    color: var(--color-text-muted);
    transition: color 0.15s;
}

.todo-skip {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    color: var(--color-text-muted);
    transition: color 0.15s;
}
.todo-check.checked { color: var(--color-success); }
.todo-check:hover   { color: var(--color-success); }
.todo-skip.active   { color: var(--color-danger); }
.todo-skip:hover    { color: var(--color-danger); }

.todo-title {
    flex: 1;
    font-size: 12px;
    cursor: pointer;
    word-break: break-word;
    transition: color 0.15s;
}
.todo-title:hover { color: var(--color-todos-label); }

/* ===== Gym Timeline ===== */

.gym-day-col {
    display: flex;
    height: 100%;
    padding: 5px;
    border-right: 1px solid var(--color-border);
}

/* Empty day: two big buttons touching each other, gap from day edges */
.gym-btn {
    flex: 1;
    border: none;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: filter 0.15s;
    line-height: 1;
}
.gym-btn-attend {
    background: rgba(39, 174, 96, 0.10);
    color: var(--color-success);
    border-radius: 4px 0 0 4px;
}
.gym-btn-skip {
    background: rgba(231, 76, 60, 0.10);
    color: var(--color-danger);
    border-radius: 0 4px 4px 0;
}
.gym-btn:hover { filter: brightness(1.2); }

/* Attended / skipped result states — no background, just the icon */
.gym-result {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    height: 100%;
    gap: 3px;
}
.gym-result:hover { opacity: 0.75; }

.gym-result-check     { font-size: 18px; color: var(--color-success); line-height: 1; }
.gym-result-intensity { font-size: 11px; font-weight: 700; color: var(--color-success); }

.gym-result-max .gym-result-check,
.gym-result-max .gym-result-intensity {
    background: linear-gradient(90deg, #b8860b 0%, #ffd700 35%, #fffacd 50%, #ffd700 65%, #b8860b 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gold-shine 2s linear infinite;
}

@keyframes gold-shine {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.gym-skip-watermark {
    font-size: 40px;
    color: rgba(231, 76, 60, 0.25);
    user-select: none;
    line-height: 1;
}

/* ===== Gym Modal ===== */
.gym-modal-body {
    align-items: center;
    padding-top: 24px;
    padding-bottom: 24px;
}

.gym-intensity-display-large {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 20px;
}

.gym-intensity-number {
    font-size: 72px;
    font-weight: 800;
    color: var(--color-gym);
    line-height: 1;
}

.gym-intensity-outof {
    font-size: 24px;
    color: var(--color-text-muted);
}

.gym-slider-modal {
    width: 100%;
    accent-color: var(--color-gym);
    cursor: pointer;
    height: 6px;
}

.gym-intensity-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 6px;
    width: 100%;
}

/* ===== Scrollbar ===== */
.day-column::-webkit-scrollbar {
    width: 3px;
}
.day-column::-webkit-scrollbar-track {
    background: transparent;
}
.day-column::-webkit-scrollbar-thumb {
    background: var(--color-text);
    border-radius: 999px;
}
.day-column::-webkit-scrollbar-thumb:hover {
    background: #fff;
}

/* ===== Modal ===== */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    outline: none;
}

.modal-dialog {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    width: min(460px, 95vw);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow: hidden;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border);
}
.modal-header h3 { font-size: 15px; font-weight: 700; }

.btn-close {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: color 0.15s;
}
.btn-close:hover { color: var(--color-text); }

.modal-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
}

.form-group { display: flex; flex-direction: column; gap: 4px; }
.required { color: inherit; font-weight: 700; }
.required.required-empty { color: var(--color-fh); }

.form-group label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.form-input {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text);
    padding: 7px 10px;
    font-size: 13px;
    width: 100%;
    outline: none;
    transition: border-color 0.15s;
}
.form-input:hover { border-color: var(--color-text-muted); }
.form-input:focus { border-color: var(--color-fh); }
.form-input:disabled {
    opacity: 0.4;
}
.form-input:disabled:hover { border-color: var(--color-border); }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}
textarea.form-input { resize: vertical; }
select.form-input { cursor: pointer; }

.modal-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--color-border);
}

.btn-primary {
    background: var(--color-fh);
    border: none;
    color: #fff;
    border-radius: 6px;
    padding: 7px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin-left: auto;
    transition: filter 0.15s;
}
.btn-primary:hover { filter: brightness(1.15); }

.btn-secondary {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-secondary:hover { background: var(--color-border); }

.btn-danger {
    background: transparent;
    border: 1px solid var(--color-danger);
    color: var(--color-danger);
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-danger:hover { background: var(--color-danger-bg); }

/* ===== Blazor boilerplate ===== */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid red; }
.validation-message { color: red; }

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: #333;
    box-sizing: border-box;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto;
}
.loading-progress circle {
    fill: none;
    stroke: #333;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}
.loading-progress circle:last-child {
    stroke: var(--color-fh);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}
.loading-progress-text::after { content: var(--blazor-load-percentage-text, "Loading"); }

/* ===== Mobile ===== */
@media (max-width: 768px) {
    :root { --label-col-width: 46px; }
    .day-number { font-size: 13px; }
    .month-name { display: none; }
    .toolbar-range { display: none; }
    .modal-dialog { border-radius: 0; width: 100%; height: 100%; max-height: 100%; }
}