/* TimePimp Custom Styles */

/* ========================================
   Skip link voor screenreaders
   ======================================== */

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--tblr-primary);
    color: #fff;
    padding: 8px 16px;
    z-index: 9999;
    text-decoration: none;
    border-radius: 0 0 4px 0;
}

.skip-link:focus {
    top: 0;
    color: #fff;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Hours column alignment */
td.text-end strong {
    font-variant-numeric: tabular-nums;
}

/* Table improvements */
.table td {
    vertical-align: middle;
}

/* Truncated text for descriptions */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ========================================
   Choices.js Searchable Dropdowns
   Uses Tabler CSS variables — works in both light and dark mode
   ======================================== */

.choices {
    margin-bottom: 0;
}

.choices__inner {
    background-color: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    padding: 0.375rem 0.75rem;
    min-height: calc(1.5em + 0.75rem + 2px);
    color: var(--tblr-body-color);
}

.choices__list--single .choices__item {
    color: var(--tblr-body-color);
}

.choices__list--dropdown .choices__item--selectable {
    padding: 0.375rem 0.75rem;
    color: var(--tblr-body-color);
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: var(--tblr-primary);
    color: #fff;
}

.choices[data-type*=select-one] .choices__input {
    background-color: var(--tblr-bg-surface);
    border-bottom: 1px solid var(--tblr-border-color);
    padding: 0.375rem 0.75rem;
    color: var(--tblr-body-color);
}

.choices__list--dropdown {
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    background-color: var(--tblr-bg-surface);
}

.choices__input {
    background-color: var(--tblr-bg-surface);
    color: var(--tblr-body-color);
}

.choices__input::placeholder {
    color: var(--tblr-secondary-color);
}

/* Remove item button */
.choices__button {
    background-image: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%236c757d' fill-rule='evenodd'%3E%3Cpath d='M2.592.044l18.364 18.364-2.548 2.548L.044 2.592z'/%3E%3Cpath d='M0 18.364L18.364 0l2.548 2.548L2.548 20.912z'/%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.7;
}

.choices__button:hover,
.choices__button:focus {
    opacity: 1;
}