/* Full clock widget: prevent action buttons from stretching or growing */
#clock-action-container {
    align-items: center;
}
#clock-action-buttons {
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    align-items: center;
    align-self: center;
    width: fit-content !important;
    max-width: 100%;
}
#clock-action-buttons .btn {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    align-self: center;
}

/* Compact clock widget in topbar */
.clock-widget-compact {
    font-size: 1rem;
    align-items: center;
}

/* Folder/project selector: same box dimensions as action buttons for visual parity */
.clock-compact-target-btn {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/* Folder icon: same size box as .btn-icon-compact (26x26), icon centered and sized to fill */
.clock-compact-target-btn .compact-folder-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    font-size: 1rem !important;
    line-height: 1;
    flex-shrink: 0;
}

.clock-compact-target-btn .compact-target-label {
    line-height: 1.2;
}

/* Action buttons: 26x26 container, smaller icons inside */
.btn-icon-compact {
    width: 26px;
    height: 26px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
}

.btn-icon-compact i {
    font-size: 0.8rem !important;
    line-height: 1;
}

.clock-compact-folder-btn:hover {
    opacity: 0.8;
}

.clock-compact-timer {
    min-width: 4.5rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.clock-compact-timer:hover {
    opacity: 0.85;
}

/* Paused state: warning color + blink each second */
.clock-compact-timer.clock-paused {
    color: var(--pato-accent-color) !important;
}

@keyframes clock-compact-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0.4; }
}

.clock-compact-target {
    white-space: nowrap;
}

.clock-compact-actions {
    display: flex;
    align-items: center;
}

/* Mobile: always show folder icon; label hidden; selected = text-primary; same 24x24 box as action buttons */
@media (max-width: 991.98px) {
    .clock-compact-target-btn .compact-target-label {
        display: none !important;
    }
    .clock-compact-target-btn .compact-folder-icon {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.9rem !important;
    }
    .clock-compact-target-btn.has-selection .compact-folder-icon {
        color: var(--pato-accent-color) !important;
    }
}

/* Dropdown: desktop default size */
.clock-compact-dropdown {
    min-width: 280px;
    max-height: min(80vh, 400px);
}

.clock-compact-dropdown-header {
    padding: 0.5rem;
}

.clock-compact-dropdown-list {
    max-height: 300px;
}

/* Dropdown items: text truncation */
.clock-compact-dropdown .compact-select-item {
    min-width: 0;
}

.clock-compact-dropdown .compact-dropdown-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mobile: smaller dropdown, fit viewport */
@media (max-width: 991.98px) {
    .clock-compact-dropdown {
        min-width: 0;
        width: min(260px, calc(100vw - 2rem));
        max-width: calc(100vw - 2rem);
        max-height: min(70vh, 320px);
        font-size: 0.875rem;
    }
    .clock-compact-dropdown-header {
        padding: 0.375rem 0.5rem;
    }
    .clock-compact-dropdown-list {
        max-height: 220px;
    }
    .clock-compact-dropdown .dropdown-item {
        padding-top: 0.375rem;
        padding-bottom: 0.375rem;
    }
    .clock-compact-dropdown .dropdown-header {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
        font-size: 0.75rem;
    }
}

/* Desktop: when selected, show label and hide icon; when not selected, show icon */
@media (min-width: 992px) {
    .clock-compact-target-btn.has-selection .compact-folder-icon {
        display: none !important;
    }
    .clock-compact-target-btn.has-selection .compact-target-label {
        display: inline !important;
    }
    /* Remove max-width on desktop - enough space for full label */
    .clock-compact-target-btn {
        max-width: none !important;
    }
}

/* Responsive: tighter on small screens, buttons match language flag size */
@media (max-width: 991.98px) {
    /* Match language flag button (~24px on mobile) */
    .btn-icon-compact {
        width: 24px;
        height: 24px;
        font-size: 0.875rem;
    }

    .btn-icon-compact i {
        font-size: 0.875rem;
    }
}

@media (max-width: 576px) {
    

    .clock-compact-timer {
        min-width: 3.5rem;
    }

    .clock-compact-target {
        max-width: 60px !important;
    }
}

/* Topbar icon size harmonization: language button matches clock action buttons */
.app-topbar .topbar-lang .topbar-link {
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
}

.app-topbar .topbar-lang .topbar-link img,
.app-topbar .topbar-lang #selected-language-image {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    min-height: 18px;
    object-fit: contain;
    margin: 0 !important;
}

.app-topbar .topbar-lang #selected-language-code {
    display: none;
}

@media (max-width: 991.98px) {
    .app-topbar .topbar-lang .topbar-link {
        width: 24px;
        height: 24px;
        min-width: 24px;
    }
    .app-topbar .topbar-lang .topbar-link img,
    .app-topbar .topbar-lang #selected-language-image {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px;
        min-height: 16px;
    }
}