/* =========================================================
   THEME VARIABLES
   ========================================================= */

/*
 * DARK е default theme.
 *
 * Цветовете са нарочно близки до стандартен
 * DarkReader-style интерфейс:
 *
 * - почти черен background
 * - леко по-светли cards
 * - меки borders
 * - off-white текст
 * - green accent
 */

:root,
html[data-theme="dark"] {

    color-scheme: dark;


    /* Main backgrounds */

    --theme-bg:
        #181a1b;

    --theme-surface:
        #202324;

    --theme-surface-2:
        #25292a;

    --theme-surface-3:
        #2b2f31;

    --theme-input:
        #181a1b;


    /* Text */

    --theme-text:
        #e8e6e3;

    --theme-text-soft:
        #c8c3bc;

    --theme-muted:
        #9e978e;

    --theme-disabled:
        #706b65;


    /* Borders */

    --theme-border:
        #3c4143;

    --theme-border-soft:
        #323638;


    /* Accent */

    --theme-accent:
        #04b875;

    --theme-accent-hover:
        #08c980;

    --theme-accent-soft:
        #173d30;

    --theme-accent-text:
        #67dbae;


    /* Danger */

    --theme-danger:
        #d9534f;

    --theme-danger-hover:
        #ef6b67;

    --theme-danger-soft:
        #452526;


    /* Success */

    --theme-success-bg:
        #173d30;

    --theme-success-text:
        #67dbae;


    /* Shadows */

    --theme-shadow:
        rgba(0, 0, 0, 0.35);

    --theme-shadow-heavy:
        rgba(0, 0, 0, 0.55);
}


/* =========================================================
   LIGHT THEME
   ========================================================= */

/*
 * Все още не я използваме през UI,
 * но я изграждаме отсега.
 */

html[data-theme="light"] {

    color-scheme: light;


    --theme-bg:
        #f5f5f5;

    --theme-surface:
        #ffffff;

    --theme-surface-2:
        #f9f9f9;

    --theme-surface-3:
        #eeeeee;

    --theme-input:
        #ffffff;


    --theme-text:
        #222222;

    --theme-text-soft:
        #444444;

    --theme-muted:
        #777777;

    --theme-disabled:
        #aaaaaa;


    --theme-border:
        #d5d5d5;

    --theme-border-soft:
        #e4e4e4;


    --theme-accent:
        #04aa6d;

    --theme-accent-hover:
        #028a58;

    --theme-accent-soft:
        #e7f8f1;

    --theme-accent-text:
        #038554;


    --theme-danger:
        #d9534f;

    --theme-danger-hover:
        #c84440;

    --theme-danger-soft:
        #ffecec;


    --theme-success-bg:
        #e7f8f1;

    --theme-success-text:
        #036b45;


    --theme-shadow:
        rgba(0, 0, 0, 0.08);

    --theme-shadow-heavy:
        rgba(0, 0, 0, 0.14);
}


/* =========================================================
   DOCUMENT
   ========================================================= */

html {
    background-color:
        var(--theme-bg);
}


body {
    background-color:
        var(--theme-bg);

    color:
        var(--theme-text);
}


/* =========================================================
   TEXT
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
label,
strong {
    border-color:
        var(--theme-border);
}


.component-label,
.set-number,
.field-group label,
.field-label,
.builder-label {
    color:
        var(--theme-text);
}


.component-description {
    color:
        var(--theme-muted);
}


.back-link {
    color:
        var(--theme-accent);
}


.back-link:hover {
    color:
        var(--theme-accent-hover);
}


/* =========================================================
   NAVBAR
   ========================================================= */

.navbar {
    background-color:
        var(--theme-surface);

    border-bottom-color:
        var(--theme-border);
}


.navbar a {
    color:
        var(--theme-text);
}


.navbar a:hover {
    color:
        var(--theme-accent);
}


/* =========================================================
   GENERIC CARDS
   ========================================================= */

.auth-card,
.builder-card,
.hierarchy-block,
.calendar-card,
.calendar-workout-detail,
.template-card,
.record-instance-card,
.no-active-workout,
.stopwatch-section,
.home-feature-placeholder,
.history-placeholder {
    background-color:
        var(--theme-surface);

    color:
        var(--theme-text);

    border-color:
        var(--theme-border);
}


/* =========================================================
   NESTED WORKOUT CARDS
   ========================================================= */

.hierarchy-block {
    background-color:
        var(--theme-surface);

    border-color:
        var(--theme-accent);
}


.hierarchy-exercise {
    background-color:
        var(--theme-surface-2);

    border-color:
        var(--theme-border);
}


.hierarchy-set-block {
    background-color:
        var(--theme-surface);

    border-color:
        var(--theme-border);
}


.hierarchy-set {
    background-color:
        var(--theme-surface-3);

    border-color:
        var(--theme-border);
}


/* =========================================================
   HISTORY / READ-ONLY WORKOUT
   ========================================================= */

.history-workout-block {
    background-color:
        var(--theme-surface-2);

    color:
        var(--theme-text);
}


.history-exercise {
    background-color:
        var(--theme-surface);

    border-color:
        var(--theme-border);
}


.history-set-block {
    background-color:
        var(--theme-surface-3);

    color:
        var(--theme-text);
}


.history-set-row {
    border-bottom-color:
        var(--theme-border);
}


.history-exercise-name,
.history-component-heading,
.history-standard-set-row,
.history-standard-set-value,
.history-drop-set-heading {
    color:
        var(--theme-text);
}


/* =========================================================
   INPUTS
   ========================================================= */

.form-group input,
.builder-input,
.exercise-search-input,
.detail-set-input,
.in-progress-set-input,
.in-progress-read-input {
    background-color:
        var(--theme-input);

    color:
        var(--theme-text);

    border-color:
        var(--theme-accent);
}


.form-group input::placeholder,
.builder-input::placeholder,
.exercise-search-input::placeholder,
.detail-set-input::placeholder,
.in-progress-set-input::placeholder,
.in-progress-read-input::placeholder {
    color:
        var(--theme-muted);

    opacity: 1;
}


.form-group input:focus,
.builder-input:focus,
.exercise-search-input:focus,
.detail-set-input:focus,
.in-progress-set-input:focus,
.in-progress-read-input:focus {
    border-color:
        var(--theme-accent-hover);

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--theme-accent) 20%,
            transparent
        );
}


.builder-input[readonly] {
    background-color:
        var(--theme-surface-3);

    color:
        var(--theme-muted);

    border-color:
        var(--theme-border);
}


/*
 * Chrome autofill иначе често остава
 * светло жълт/бял в dark theme.
 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {

    -webkit-text-fill-color:
        var(--theme-text);

    -webkit-box-shadow:
        0 0 0 1000px
        var(--theme-input)
        inset;

    transition:
        background-color
        9999s ease-in-out
        0s;
}


/* =========================================================
   PRIMARY / SECONDARY BUTTONS
   ========================================================= */

.primary-button,
.secondary-button,
.primary-link-button,
.add-child-button,
.logout-button {
    background-color:
        var(--theme-accent);

    border-color:
        var(--theme-accent);

    color:
        #ffffff;
}


.primary-button:hover,
.secondary-button:hover,
.primary-link-button:hover,
.add-child-button:hover,
.logout-button:hover {
    background-color:
        transparent;

    border-color:
        var(--theme-accent-hover);

    color:
        var(--theme-accent-hover);
}


/* =========================================================
   REMOVE / DANGER
   ========================================================= */

.remove-x-button {
    color:
        var(--theme-muted);
}


.remove-x-button:hover {
    background-color:
        var(--theme-danger-soft);

    color:
        var(--theme-danger-hover);
}


.end-workout-button {
    background-color:
        var(--theme-danger);

    border-color:
        var(--theme-danger);

    color:
        white;
}


.end-workout-button:hover {
    background-color:
        transparent;

    color:
        var(--theme-danger-hover);

    border-color:
        var(--theme-danger-hover);
}


/* =========================================================
   COMPONENT NUMBERS
   ========================================================= */

.component-number {
    background-color:
        var(--theme-accent);

    color:
        white;
}


.component-number-small {
    background-color:
        var(--theme-surface-3);

    color:
        var(--theme-text);

    border:
        1px solid
        var(--theme-border);
}


/* =========================================================
   TOGGLE
   ========================================================= */

.toggle-control {
    background-color:
        var(--theme-input);

    border-color:
        var(--theme-accent);
}


.toggle-control::after {
    background-color:
        var(--theme-accent);
}


.toggle-field input:checked
+ .toggle-control {
    background-color:
        var(--theme-accent);
}


.toggle-field input:checked
+ .toggle-control::after {
    background-color:
        #ffffff;
}


.toggle-text {
    color:
        var(--theme-text);
}


/* =========================================================
   SUPERSET LINES
   ========================================================= */

.superset-exercises::before,
.superset-exercises
.hierarchy-exercise::before {
    background-color:
        var(--theme-accent);
}


/* =========================================================
   EXERCISE DROPDOWN
   ========================================================= */

.exercise-dropdown {
    background-color:
        var(--theme-surface);

    border-color:
        var(--theme-accent);

    box-shadow:
        0 8px 18px
        var(--theme-shadow-heavy);
}


.exercise-dropdown-item {
    background-color:
        var(--theme-surface);

    color:
        var(--theme-text);

    border-bottom-color:
        var(--theme-border);
}


.exercise-dropdown-item:hover,
.exercise-dropdown-item:focus {
    background-color:
        var(--theme-accent-soft);

    color:
        var(--theme-text);
}


.exercise-dropdown-muscle {
    background-color:
        var(--theme-accent);

    color:
        white;
}


.exercise-no-results {
    color:
        var(--theme-muted);
}


/* =========================================================
   WORKOUT TABS
   ========================================================= */

.workout-tabs {
    border-bottom-color:
        var(--theme-border);
}


.workout-tab {
    color:
        var(--theme-muted);
}


.workout-tab.active {
    color:
        var(--theme-accent);
}


.workout-tab.active::after {
    background-color:
        var(--theme-accent);
}


/* =========================================================
   HISTORY INNER TABS
   ========================================================= */

.history-tabs {
    background-color:
        var(--theme-surface-3);
}


.history-tab {
    color:
        var(--theme-muted);
}


.history-tab.active {
    background-color:
        var(--theme-accent);

    color:
        white;
}


/* =========================================================
   TEMPLATE CARDS
   ========================================================= */

.template-card {
    background-color:
        var(--theme-surface);

    border-color:
        var(--theme-border);

    color:
        var(--theme-text);
}


.template-card:hover {
    background-color:
        var(--theme-surface-2);

    border-color:
        var(--theme-accent);

    box-shadow:
        0 7px 18px
        var(--theme-shadow);
}


.template-card h3 {
    color:
        var(--theme-text);
}


.template-card-label,
.template-card-arrow {
    color:
        var(--theme-accent-text);
}


/* =========================================================
   RECORD CARDS
   ========================================================= */

.record-instance-card {
    background-color:
        var(--theme-surface);

    border-color:
        var(--theme-border);

    color:
        var(--theme-text);
}


.record-instance-card:hover {
    background-color:
        var(--theme-surface-2);

    border-color:
        var(--theme-accent);
}


.record-instance-label,
.record-instance-arrow {
    color:
        var(--theme-accent-text);
}


.record-instance-date,
.record-instance-duration span {
    color:
        var(--theme-muted);
}


/* =========================================================
   CALENDAR
   ========================================================= */

.calendar-card {
    background-color:
        var(--theme-surface);

    border-color:
        var(--theme-border);
}


.calendar-header h2 {
    color:
        var(--theme-text);
}


.calendar-navigation-button {
    background-color:
        var(--theme-surface);

    border-color:
        var(--theme-accent);

    color:
        var(--theme-accent);
}


.calendar-navigation-button:hover {
    background-color:
        var(--theme-accent);

    color:
        white;
}


.calendar-weekdays span {
    color:
        var(--theme-muted);
}


.calendar-day {
    background-color:
        var(--theme-surface-3);

    color:
        var(--theme-text);

    border-color:
        transparent;
}


.calendar-day:hover {
    border-color:
        var(--theme-accent);
}


.calendar-day-empty {
    background:
        transparent;
}


.calendar-day.today {
    border-color:
        var(--theme-accent);
}


.calendar-day.has-workout {
    background-color:
        var(--theme-accent-soft);

    color:
        var(--theme-accent-text);
}


.calendar-day.selected,
.calendar-day.has-workout.selected {
    background-color:
        var(--theme-accent);

    border-color:
        var(--theme-accent);

    color:
        #ffffff;
}


.calendar-workout-dot {
    background-color:
        var(--theme-accent);
}


.calendar-day.selected
.calendar-workout-dot {
    background-color:
        white;
}


/* =========================================================
   CALENDAR WORKOUT DETAILS
   ========================================================= */

.calendar-empty-day,
.calendar-loading {
    background-color:
        var(--theme-surface);

    border-color:
        var(--theme-border);

    color:
        var(--theme-muted);
}


.calendar-workout-duration {
    background-color:
        var(--theme-accent-soft);

    color:
        var(--theme-accent-text);
}


.calendar-workout-time {
    color:
        var(--theme-muted);
}


/* =========================================================
   STATUS BADGES
   ========================================================= */

.detail-badge,
.in-progress-status {
    background-color:
        var(--theme-accent-soft);

    color:
        var(--theme-accent-text);
}


/* =========================================================
   DETAIL EXERCISE DISPLAY
   ========================================================= */

.detail-exercise-display {
    background-color:
        var(--theme-input);

    border-color:
        var(--theme-accent);

    color:
        var(--theme-text);
}


.detail-exercise-display span {
    background-color:
        var(--theme-accent);

    color:
        white;
}


/* =========================================================
   REORDER BUTTONS
   ========================================================= */

.reorder-button {
    background-color:
        var(--theme-surface);

    border-color:
        var(--theme-border);

    color:
        var(--theme-text);
}


.reorder-button:hover:not(:disabled) {
    background-color:
        var(--theme-accent-soft);

    border-color:
        var(--theme-accent);

    color:
        var(--theme-accent-text);
}


/* =========================================================
   ADD EXERCISE
   ========================================================= */

.add-exercise-panel {
    background-color:
        var(--theme-accent-soft);

    border-color:
        var(--theme-accent);
}


/* =========================================================
   STOPWATCH
   ========================================================= */

.stopwatch-section {
    background-color:
        var(--theme-surface);

    border-color:
        var(--theme-accent);
}


.stopwatch-label {
    color:
        var(--theme-muted);
}


.workout-stopwatch {
    color:
        var(--theme-text);
}


/* =========================================================
   IN PROGRESS SET HISTORY
   ========================================================= */

.in-progress-previous-hint {
    color:
        var(--theme-muted);
}


.in-progress-set-times {
    color:
        var(--theme-muted);
}


/* =========================================================
   WORKOUTS PAGE - IN PROGRESS CARD
   ========================================================= */

.workouts-in-progress-card {
    background-color:
        var(--theme-surface);

    border-color:
        var(--theme-accent);

    color:
        var(--theme-text);
}


.workouts-in-progress-card:hover {
    background-color:
        var(--theme-surface-2);

    box-shadow:
        0 6px 16px
        var(--theme-shadow);
}


.workouts-in-progress-label,
.workouts-in-progress-time strong,
.workouts-in-progress-arrow {
    color:
        var(--theme-accent-text);
}


.workouts-in-progress-main h2 {
    color:
        var(--theme-text);
}


.workouts-in-progress-time span {
    color:
        var(--theme-muted);
}


/* =========================================================
   COMPLETION BANNER
   ========================================================= */

.workout-completion-banner {
    background-color:
        var(--theme-success-bg);

    border-color:
        var(--theme-accent);

    color:
        var(--theme-success-text);
}


.workout-completion-banner strong {
    color:
        var(--theme-success-text);
}


.completion-close-button {
    color:
        var(--theme-success-text);
}


/* =========================================================
   COMPLETED WORKOUT
   ========================================================= */

.detail-template-label {
    color:
        var(--theme-accent-text);
}


.completed-workout-ended {
    color:
        var(--theme-muted);
}


.completed-workout-ended strong {
    color:
        var(--theme-text);
}


.completed-workout-meta {
    color:
        var(--theme-muted);
}


.completed-workout-meta strong {
    color:
        var(--theme-accent-text);
}


/* =========================================================
   HOME
   ========================================================= */

.home-feature-placeholder {
    background-color:
        var(--theme-surface);

    border-color:
        var(--theme-border);
}


.home-feature-placeholder p {
    color:
        var(--theme-muted);
}


/* =========================================================
   PLACEHOLDERS
   ========================================================= */

.history-placeholder {
    background-color:
        var(--theme-surface);

    border-color:
        var(--theme-border);
}


.history-placeholder p,
.template-section-header p,
.records-section-header p,
.workouts-message,
.no-active-workout p {
    color:
        var(--theme-muted);
}


/* =========================================================
   DIVIDERS / SET ROWS
   ========================================================= */

.set-row-compact {
    border-bottom-color:
        var(--theme-border-soft);
}


.set-number {
    color:
        var(--theme-text-soft);
}


.set-times,
.detail-set-value strong {
    color:
        var(--theme-muted);
}


.readonly-set-value {
    color:
        var(--theme-text);
}


.readonly-set-value > span {
    color:
        var(--theme-muted);
}


.readonly-empty-value {
    color:
        var(--theme-muted);
}


/* =========================================================
   ERROR
   ========================================================= */

.error-message,
.detail-message.error {
    color:
        var(--theme-danger-hover);
}


.detail-message.success {
    color:
        var(--theme-accent-text);
}


/* =========================================================
   SELECTION
   ========================================================= */

::selection {
    background-color:
        var(--theme-accent);

    color:
        white;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

html[data-theme="dark"] {
    scrollbar-color:
        #555b5d
        var(--theme-bg);
}


html[data-theme="dark"]
::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}


html[data-theme="dark"]
::-webkit-scrollbar-track {
    background-color:
        var(--theme-bg);
}


html[data-theme="dark"]
::-webkit-scrollbar-thumb {
    background-color:
        #555b5d;

    border:
        3px solid
        var(--theme-bg);

    border-radius:
        999px;
}


html[data-theme="dark"]
::-webkit-scrollbar-thumb:hover {
    background-color:
        #6a7174;
}
/* =========================================================
   IN PROGRESS INPUTS - DARK THEME FIX
   ========================================================= */

html[data-theme="dark"]
.in-progress-set-input,
html[data-theme="dark"]
.in-progress-read-input {
    background-color: var(--theme-input) !important;
    color: var(--theme-text) !important;

    border-color: var(--theme-accent) !important;

    caret-color: var(--theme-text);
}


html[data-theme="dark"]
.in-progress-set-input:focus,
html[data-theme="dark"]
.in-progress-read-input:focus {
    background-color: var(--theme-input) !important;
    color: var(--theme-text) !important;

    border-color: var(--theme-accent-hover) !important;

    outline: none;

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--theme-accent) 20%,
            transparent
        );
}


html[data-theme="dark"]
.in-progress-set-input:active,
html[data-theme="dark"]
.in-progress-read-input:active {
    background-color: var(--theme-input) !important;
    color: var(--theme-text) !important;
}


/* Chrome / Edge autofill */
html[data-theme="dark"]
.in-progress-set-input:-webkit-autofill,
html[data-theme="dark"]
.in-progress-set-input:-webkit-autofill:hover,
html[data-theme="dark"]
.in-progress-set-input:-webkit-autofill:focus,
html[data-theme="dark"]
.in-progress-read-input:-webkit-autofill,
html[data-theme="dark"]
.in-progress-read-input:-webkit-autofill:hover,
html[data-theme="dark"]
.in-progress-read-input:-webkit-autofill:focus {
    -webkit-text-fill-color:
        var(--theme-text) !important;

    caret-color:
        var(--theme-text);

    -webkit-box-shadow:
        0 0 0 1000px
        var(--theme-input)
        inset !important;

    box-shadow:
        0 0 0 1000px
        var(--theme-input)
        inset !important;

    border-color:
        var(--theme-accent) !important;
}