/* The shared time zone picker (static/js/timezone-picker.js): the control, and its dropdown, which renders into <body>. */
.timezone-control {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: -4px 0 18px;
    color: #6b7280; font-size: 0.85rem;
}
.timezone-control i, .timezone-control .ui-icon { color: #9ca3af; }
.timezone-control .ts-wrapper { flex: 1 1 220px; min-width: 0; }
.timezone-control .ts-control {
    min-height: 36px; padding: 7px 30px 7px 9px !important;
    border: 1px solid #e5e7eb !important; border-radius: 4px !important;
    background: #fff !important; box-shadow: none !important;
    color: #374151; font: inherit;
}
.timezone-control .ts-wrapper.focus .ts-control { border-color: var(--brand-color, #000) !important; }
.timezone-control .ts-wrapper.disabled .ts-control { background: #f9fafb !important; color: #6b7280; }
.timezone-control .ts-control .item {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* On a phone the "Times in" prefix costs ~85px of a ~300px row, which
   truncates the zone mid-word ("New York — Eastern Ti..."), hiding the
   offset that makes the label useful. The globe plus the zone name carry
   the meaning on their own; keep the words for screen readers. */
@media (max-width: 480px) {
    .timezone-control > span {
        position: absolute; width: 1px; height: 1px;
        overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
}

.ts-dropdown.timezone-dropdown {
    border: 1px solid #d1d5db; border-radius: 4px; box-shadow: none;
    color: #374151; font-size: 0.85rem; overflow: hidden;
}
.timezone-dropdown .dropdown-input-wrap { padding: 8px; border-bottom: 1px solid #f3f4f6; }
.timezone-dropdown .dropdown-input {
    width: 100%; padding: 8px 10px; border: 1px solid #e5e7eb; border-radius: 4px;
    outline: none; box-shadow: none;
}
.timezone-dropdown .option { padding: 8px 10px; }
.timezone-dropdown .tz-option { display: flex; flex-direction: column; gap: 1px; }
.timezone-dropdown .tz-primary { color: #111; }
.timezone-dropdown .tz-secondary { color: #6b7280; font-size: 0.8em; }
.timezone-dropdown .tz-attribution {
    padding: 4px 10px 6px; border-top: 1px solid #f3f4f6;
    color: #9ca3af; font-size: 0.7rem;
}

/* A picker replacing a page's own input (.form-input, .form-select,
   .be-input, ...) inherits that class on its wrapper, so the wrapper is
   already the right box: border, radius, padding, font, colour. Flatten
   the control inside it rather than drawing a second box within the
   first. */
.ts-wrapper.tz-inherit { display: flex; align-items: center; }
.ts-wrapper.tz-inherit > .ts-control {
    border: 0 !important; background: transparent !important;
    box-shadow: none !important; padding: 0 !important;
    min-height: 0 !important; width: 100%;
    font-family: inherit; font-size: inherit; font-weight: inherit;
    color: inherit;
    /* `font: inherit` would drag the page's line-height in with it and
       make the field taller than the native inputs beside it; a real
       <input> lays its text out at `normal`. */
    line-height: normal;
}
.ts-wrapper.tz-inherit > .ts-control > .item {
    color: inherit; line-height: normal;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ts-wrapper.tz-inherit > .ts-control > input {
    font-family: inherit; font-size: inherit; line-height: normal;
}
.timezone-dropdown .active { background: #f3f4f6; color: #111; }