/* UI-TG: shared approved time-filter family; consumes existing KONAN tokens. */
.filter-bar--with-time { align-items: flex-end; }
.ui-tg { flex: 1; min-width: 0; font-family: var(--font-family); color: var(--text); }
.ui-tg__range { display: block; font-size: var(--hint-size); color: var(--text); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-tg__trigger { width: 100%; justify-content: flex-start; }
.ui-tg__trigger > .ui-icon { color: #8995a3; }
.ui-tg__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; white-space: nowrap; }
.ui-tg__popover { position: fixed; inset: auto; margin: 0; box-sizing: border-box; padding: 12px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow: auto; border: var(--filter-border); border-radius: var(--filter-radius); background: var(--surface); color: var(--text); font: 13px var(--font-family); box-shadow: var(--account-menu-shadow); }
.ui-tg__layout { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; }
.ui-tg__nav { display: flex; flex-direction: column; gap: 8px; border-right: var(--table-border); padding-right: 12px; }
.ui-tg__heading { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; white-space: nowrap; }
.ui-tg__nav-button { justify-content: flex-start; font-size: 13px; font-weight: 400; border-color: transparent; color: var(--text); }
.ui-tg__nav-button::before { content: ''; width: 14px; height: 14px; border: 1px solid var(--hint); border-radius: 50%; flex: 0 0 14px; box-sizing: border-box; }
.ui-tg__nav-button[aria-checked=true] { border-color: var(--primary-background); color: var(--text); }
.ui-tg__nav-button[aria-checked=true]::before { border: 4px solid var(--primary-background); }
.ui-tg__groups { display: grid; grid-template-columns: repeat(var(--time-filter-columns, 5), minmax(0, 1fr)); gap: 8px; }
.ui-tg__group { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; }
.ui-tg__group .ui-tg__heading { margin-bottom: 0; }
.ui-tg__preset { padding: 0 6px; border-radius: 18px; font-size: 13px; font-weight: 400; white-space: nowrap; color: var(--text); }
.ui-tg__preset[aria-pressed=true] { background: var(--primary-background); color: var(--text); border-color: var(--primary-background); }
.ui-tg__custom { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 8px; padding-top: 12px; margin-top: 12px; border-top: var(--table-border); }
.ui-tg__custom[hidden] { display: none; }
.ui-tg__custom-field { display: grid; gap: 4px; min-width: 0; }
.ui-tg__custom-field input { width: 100%; box-sizing: border-box; }
.ui-tg__custom > button { color: var(--text); }
.ui-tg__error { grid-column: 1 / -1; margin: 0; color: var(--destructive-text); }
@media (max-width: 600px) {
 .ui-tg__layout { grid-template-columns: 1fr; }
 .ui-tg__nav { border-right: 0; border-bottom: var(--table-border); padding: 0 0 8px; flex-direction: row; flex-wrap: wrap; }
 .ui-tg__nav > .ui-tg__heading { width: 100%; margin-bottom: 0; }
 .ui-tg__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .ui-tg__custom { grid-template-columns: 1fr 1fr; }
 .ui-tg__custom > button { grid-column: 1 / -1; }
}

/* Optional single-line time field: caption lives inside the trigger. Default UI-TG is unchanged. */
.ui-tg--inline .ui-tg__value { display:none; }
.ui-tg--inline .ui-tg__range { flex:1; min-width:0; margin:0; color:inherit; font-size:inherit; font-weight:400; line-height:18px; text-align:left; }

/* Fallback cho hàng lọc cũ. Khung equal-filters dùng duy nhất quy tắc grid trong app.css. */
.filter-bar.filter-bar--with-time:where(:not([data-ui-layout="equal-filters"])) { display:flex; flex-wrap:nowrap; width:100%; min-width:0; box-sizing:border-box; }
.filter-bar.filter-bar--with-time:where(:not([data-ui-layout="equal-filters"])) > :is(.filter-bar__control,.ui-tg,.searchable-select,.checkbox-select) { flex:1 1 0; width:0; min-width:0; max-width:none; box-sizing:border-box; }
.filter-bar.filter-bar--with-time:where(:not([data-ui-layout="equal-filters"])) > :is(button,.ui-button) { flex:0 0 auto; }