:root {
    --ring: #0f172a;          /* slate-900 focus */
    --line: #e2e8f0;          /* slate-200 */
    --muted: #64748b;         /* slate-500 */
}

html { font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* hide native control that a custom widget now drives */
.ui-native {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* trigger button shared by select/date/time */
.ui-trigger {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    width: 100%; min-height: 2.5rem;
    background: #fff; border: 1px solid #cbd5e1; border-radius: .5rem;
    padding: .5rem .75rem; font-size: .875rem; color: #1e293b;
    text-align: left; cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.ui-trigger:hover { border-color: #94a3b8; }
.ui-trigger.is-open, .ui-trigger:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 1px var(--ring); outline: none; }
.ui-trigger:disabled { background: #f8fafc; color: #94a3b8; cursor: not-allowed; }
.ui-trigger-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-trigger-lbl.is-placeholder { color: #94a3b8; }
.ui-ic { width: 1.05rem; height: 1.05rem; flex: none; color: #94a3b8; }
.ui-trigger.is-open .ui-ic { transform: rotate(180deg); }
.ui-cal .ui-ic, .ui-time .ui-ic { transform: none; }

.ui-select { position: relative; }

.ui-date-wrap { position: relative; }
.ui-trigger-input { padding-right: 2.25rem; }
.ui-trigger-ic { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: #94a3b8; display: flex; }
.ui-trigger-ic .ui-ic { transform: none; }

/* popovers */
.ui-pop {
    position: absolute; z-index: 60; background: #fff;
    border: 1px solid var(--line); border-radius: .625rem;
    box-shadow: 0 10px 30px -8px rgba(15, 23, 42, .22), 0 2px 6px -2px rgba(15, 23, 42, .12);
    padding: .375rem; animation: ui-in .12s ease;
}
@keyframes ui-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.ui-menu { max-height: 16rem; overflow-y: auto; min-width: 9rem; }
.ui-opt { padding: .5rem .625rem; border-radius: .375rem; font-size: .875rem; color: #334155; cursor: pointer; white-space: nowrap; }
.ui-opt:hover { background: #f1f5f9; }
.ui-opt.is-sel { background: #0f172a; color: #fff; }

/* calendar */
.ui-cal { width: 17rem; }
.ui-cal-head { display: flex; align-items: center; justify-content: space-between; padding: .25rem .25rem .5rem; font-weight: 600; font-size: .875rem; color: #1e293b; }
.ui-cal-nav { width: 1.75rem; height: 1.75rem; border-radius: .375rem; color: #475569; font-size: 1.1rem; line-height: 1; }
.ui-cal-nav:hover { background: #f1f5f9; }
.ui-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ui-cal-w { text-align: center; font-size: .7rem; color: #94a3b8; padding: .25rem 0; }
.ui-cal-d { height: 2rem; border-radius: .375rem; font-size: .8rem; color: #334155; }
.ui-cal-d:hover { background: #f1f5f9; }
.ui-cal-d.is-today { color: #0f172a; font-weight: 700; box-shadow: inset 0 0 0 1px #cbd5e1; }
.ui-cal-d.is-sel { background: #0f172a; color: #fff; font-weight: 600; box-shadow: none; }
.ui-cal-foot { display: flex; justify-content: space-between; padding: .5rem .25rem .125rem; }
.ui-cal-link { font-size: .75rem; color: #475569; padding: .25rem .5rem; border-radius: .375rem; }
.ui-cal-link:hover { background: #f1f5f9; color: #0f172a; }

/* time */
.ui-time-cols { display: flex; gap: .25rem; }
.ui-time-col { height: 12rem; overflow-y: auto; width: 3rem; scrollbar-width: thin; }
.ui-time-c { display: block; width: 100%; text-align: center; padding: .375rem 0; border-radius: .375rem; font-size: .8rem; color: #334155; }
.ui-time-c:hover { background: #f1f5f9; }
.ui-time-c.is-sel { background: #0f172a; color: #fff; }
.ui-time-col::-webkit-scrollbar { width: 6px; }
.ui-time-col::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

/* keep number inputs clean */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* ---------------- dark mode (custom pickers) ---------------- */
.dark .ui-trigger { background: #0f172a; border-color: #475569; color: #e2e8f0; }
.dark .ui-trigger:hover { border-color: #64748b; }
.dark .ui-trigger.is-open, .dark .ui-trigger:focus-visible { border-color: #cbd5e1; box-shadow: 0 0 0 1px #cbd5e1; }
.dark .ui-trigger:disabled { background: #1e293b; color: #64748b; }
.dark .ui-trigger-lbl.is-placeholder { color: #64748b; }
.dark .ui-ic, .dark .ui-trigger-ic { color: #64748b; }

.dark .ui-pop { background: #1e293b; border-color: #334155; box-shadow: 0 12px 32px -8px rgba(0,0,0,.6); }
.dark .ui-opt { color: #cbd5e1; }
.dark .ui-opt:hover { background: #334155; }
.dark .ui-opt.is-sel { background: #e2e8f0; color: #0f172a; }

.dark .ui-cal-head { color: #e2e8f0; }
.dark .ui-cal-nav { color: #94a3b8; }
.dark .ui-cal-nav:hover { background: #334155; }
.dark .ui-cal-w { color: #64748b; }
.dark .ui-cal-d { color: #cbd5e1; }
.dark .ui-cal-d:hover { background: #334155; }
.dark .ui-cal-d.is-today { color: #fff; box-shadow: inset 0 0 0 1px #475569; }
.dark .ui-cal-d.is-sel { background: #e2e8f0; color: #0f172a; box-shadow: none; }
.dark .ui-cal-link { color: #94a3b8; }
.dark .ui-cal-link:hover { background: #334155; color: #fff; }

.dark .ui-time-c { color: #cbd5e1; }
.dark .ui-time-c:hover { background: #334155; }
.dark .ui-time-c.is-sel { background: #e2e8f0; color: #0f172a; }
.dark .ui-time-col::-webkit-scrollbar-thumb { background: #475569; }