/* Global host fallback for picker time editor styling. */
.picker-attendance-time-editor {
    display: grid;
    gap: 1.25rem;
}

.picker-attendance-time-editor__header,
.picker-attendance-time-editor__panel,
.picker-attendance-time-editor__selected-picker,
.picker-attendance-time-editor__save-panel,
.picker-attendance-time-editor__message {
    border: 1px solid rgba(36, 50, 74, 0.12);
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 248, 255, 0.98));
    box-shadow: 0 18px 45px rgba(31, 49, 89, 0.08);
    padding: 1rem 1.15rem;
}

.picker-attendance-time-editor__header h2,
.picker-attendance-time-editor__selected-picker h3,
.picker-attendance-time-editor__panel h3 {
    margin: 0;
}

.picker-attendance-time-editor__header p,
.picker-attendance-time-editor__selected-picker p,
.picker-attendance-time-editor__panel p,
.picker-attendance-time-editor__picker-button span,
.picker-attendance-time-editor__message {
    color: #5f6f89;
}

.picker-attendance-time-editor__toolbar,
.picker-attendance-time-editor__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: end;
}

.picker-attendance-time-editor__toolbar label,
.picker-attendance-time-editor__save-panel label {
    display: grid;
    gap: 0.4rem;
    min-width: 220px;
    color: #22314b;
    font-weight: 600;
}

.picker-attendance-time-editor__toolbar input,
.picker-attendance-time-editor__toolbar select,
.picker-attendance-time-editor__save-panel input,
.picker-attendance-time-editor__save-panel select,
.picker-attendance-time-editor__panel input {
    border: 1px solid rgba(73, 98, 144, 0.22);
    border-radius: 0.85rem;
    padding: 0.7rem 0.85rem;
    background: #fff;
    color: #22314b;
}

.picker-attendance-time-editor__toolbar button,
.picker-attendance-time-editor__save-panel button,
.picker-attendance-time-editor__picker-button {
    border: none;
    border-radius: 0.95rem;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.picker-attendance-time-editor__toolbar button,
.picker-attendance-time-editor__save-panel button {
    background: linear-gradient(135deg, #315a9e, #4d74c6);
    color: #fff;
    font-weight: 700;
    padding: 0.8rem 1.1rem;
    box-shadow: 0 14px 24px rgba(49, 90, 158, 0.2);
}

.picker-attendance-time-editor__toolbar button:hover,
.picker-attendance-time-editor__save-panel button:hover,
.picker-attendance-time-editor__picker-button:hover {
    transform: translateY(-1px);
}

.picker-attendance-time-editor__picker-results {
    display: grid;
    gap: 0.75rem;
}

.picker-attendance-time-editor__picker-list {
    display: grid;
    gap: 0.7rem;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.picker-attendance-time-editor__picker-button {
    display: grid;
    gap: 0.35rem;
    text-align: left;
    padding: 0.95rem 1rem;
    background: linear-gradient(135deg, rgba(244, 247, 255, 0.96), rgba(255, 250, 243, 0.96));
    border: 1px solid rgba(73, 98, 144, 0.12);
}

.picker-attendance-time-editor__picker-button strong {
    color: #22314b;
}

.picker-attendance-time-editor__picker-button.is-selected {
    box-shadow: 0 0 0 2px rgba(99, 75, 219, 0.35);
    background: linear-gradient(135deg, rgba(235, 241, 255, 0.98), rgba(245, 238, 255, 0.98));
}

.picker-attendance-time-editor__workspace {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.picker-attendance-time-editor__panel table {
    width: 100%;
    border-collapse: collapse;
}

.picker-attendance-time-editor__panel th,
.picker-attendance-time-editor__panel td {
    border-bottom: 1px solid rgba(73, 98, 144, 0.12);
    padding: 0.7rem 0.55rem;
    text-align: left;
    vertical-align: top;
}

.picker-attendance-time-editor__panel th {
    color: #586885;
    font-size: 0.92rem;
}

.picker-attendance-time-editor__save-panel {
    display: grid;
    gap: 0.9rem;
}

.picker-attendance-time-editor__message--error {
    border-color: rgba(176, 53, 87, 0.25);
    background: linear-gradient(180deg, rgba(255, 246, 248, 0.98), rgba(255, 252, 252, 0.98));
    color: #8f2747;
}

@media (max-width: 900px) {
    .picker-attendance-time-editor__workspace {
        grid-template-columns: 1fr;
    }
}

.picker-attendance-time-editor__panel--full {
    grid-column: 1 / -1;
}

.picker-attendance-time-editor__panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.picker-attendance-time-editor__panel-header > div {
    flex: 1 1 auto;
}

.picker-attendance-time-editor__info-button {
    width: 2.2rem;
    min-width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    padding: 0;
    font-weight: 700;
    line-height: 1;
}

.picker-attendance-time-editor__help-flyout {
    margin-bottom: 1rem;
    padding: 0.95rem 1rem;
    border: 1px solid rgba(73, 98, 144, 0.14);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(245, 248, 255, 0.98), rgba(255, 252, 248, 0.98));
    color: #42506d;
}

.picker-attendance-time-editor__help-flyout strong {
    display: block;
    margin-bottom: 0.35rem;
    color: #1f2f4f;
}

.picker-attendance-time-editor__help-flyout p {
    margin: 0;
}

.picker-attendance-time-editor__stamp-row.is-dirty {
    background: rgba(255, 252, 246, 0.72);
}
.picker-attendance-time-editor__stamp-input-cell {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.picker-attendance-time-editor__stamp-input.is-dirty {
    border-color: rgba(209, 124, 36, 0.55);
    box-shadow: 0 0 0 3px rgba(238, 186, 84, 0.16);
    background: rgba(255, 252, 246, 0.98);
}
.picker-attendance-time-editor__dirty-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    width: fit-content;
    border: 1px solid rgba(209, 124, 36, 0.18);
    border-radius: 999px;
    padding: 0.28rem 0.62rem;
    background: linear-gradient(135deg, rgba(255, 243, 220, 0.98), rgba(255, 248, 235, 0.98));
    color: #9b5f16;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.picker-attendance-time-editor__dirty-badge::before {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    background: #d17c24;
    box-shadow: 0 0 0 4px rgba(209, 124, 36, 0.12);
    flex: 0 0 auto;
}