/* ═══════════════════════════════════════════════════════════════
   TaskCentro UI · Pickers, Selects, Location
   ═══════════════════════════════════════════════════════════════ */

/* ── hidden source ──────────────────────────────────────────── */
.tc-ui-hidden-source {
  position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip:rect(0,0,0,0)!important;white-space:nowrap!important;
  border:0!important;opacity:0!important;pointer-events:none!important;
}

/* ── floating shell ─────────────────────────────────────────── */
.tc-floating-shell { position:relative; width:100%; overflow:visible; isolation:isolate; }
.tc-floating-shell.is-open { z-index:2147483000; }

.tc-floating-panel {
  position:absolute; top:calc(100% + 8px); left:0;
  z-index:2147483001;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  box-shadow:0 2px 8px rgba(0,0,0,.06),0 16px 40px rgba(0,0,0,.12);
  overflow:hidden;
  animation:tc-drop .14s ease both;
}

@keyframes tc-drop {
  from { opacity:0; transform:translateY(-6px) scale(.98); }
  to   { opacity:1; transform:translateY(0)   scale(1); }
}

/* ── select trigger (dropdown) ──────────────────────────────── */
.tc-select-trigger {
  width:100%; min-height:50px;
  padding:.75rem 1rem;
  border:1.5px solid #e5e7eb;
  border-radius:12px;
  background:#fff; color:#111827;
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  cursor:pointer; font:inherit; text-align:left;
  transition:border-color .15s, box-shadow .15s;
}
.tc-select-trigger:hover { border-color:#00c9de; }
.tc-select-trigger:focus,
.tc-floating-shell.is-open .tc-select-trigger {
  outline:none; border-color:#00c9de;
  box-shadow:0 0 0 3px rgba(0,201,222,.15);
}
.tc-select-trigger[disabled] { opacity:.55; cursor:not-allowed; }

.tc-select-label {
  flex:1;
  min-width:0;
  display:block;
}
.tc-select-label strong {
  display:block; font-size:.92rem; font-weight:600; color:#111827;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tc-trigger-placeholder strong { color:#9ca3af; font-weight:400; }

.tc-trigger-icon {
  width:30px; height:30px; border-radius:8px;
  background:rgba(0,201,222,.1); color:#008ea0;
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:.85rem;
}

.tc-invalid .tc-select-trigger { border-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.12); }

/* ── picker display input ────────────────────────────────────── */
.tc-picker-display {
  cursor:pointer !important;
  caret-color:transparent;
  user-select:none;
  -webkit-user-select:none;
}
.tc-picker-display:focus { outline:none; }
.tc-picker-display--empty { color:#9ca3af !important; }
.tc-floating-shell.is-open .tc-picker-display {
  border-color:#00c9de !important;
  box-shadow:0 0 0 3px rgba(0,201,222,.15) !important;
}
.tc-invalid .tc-picker-display { border-color:#ef4444 !important; box-shadow:0 0 0 3px rgba(239,68,68,.12) !important; }

/* ── field wrap + inline clear button ───────────────────────── */
.tc-picker-field-wrap { position:relative; width:100%; }
.tc-picker-field-wrap .tc-picker-display { padding-right:2.4rem !important; }

.tc-picker-clear-btn {
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; border:0; border-radius:50%;
  background:rgba(0,0,0,.08); color:#6b7280;
  font-size:1rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .12s, color .12s;
  padding:0;
}
.tc-picker-clear-btn:hover { background:rgba(239,68,68,.15); color:#dc2626; }

/* ═══════════════════════════════════════════════════════════════
   PICKER PANEL  (date / time / datetime-local)
   280 px wide — set by positionFloatingPanel()
   ═══════════════════════════════════════════════════════════════ */
.tc-picker-panel { /* width set via JS */ }

.tc-picker-wrap { padding:14px; display:flex; flex-direction:column; gap:0; }

/* ── calendar header ────────────────────────────────────────── */
.tc-picker-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}
.tc-picker-month-title {
  font-size:.9rem; font-weight:700; color:#111827;
  flex:1; text-align:center; pointer-events:none;
}
.tc-picker-nav {
  width:28px; height:28px; border:0; border-radius:8px;
  background:transparent; color:#6b7280;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .12s, color .12s; flex-shrink:0;
}
.tc-picker-nav:hover { background:rgba(0,201,222,.12); color:#007d8c; }

/* ── weekday row ────────────────────────────────────────────── */
.tc-picker-weekdays {
  display:grid; grid-template-columns:repeat(7,1fr);
  margin-bottom:4px;
}
.tc-picker-weekdays span {
  display:flex; justify-content:center;
  font-size:.65rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:#9ca3af; padding:2px 0;
}

/* ── day grid ───────────────────────────────────────────────── */
.tc-picker-grid {
  display:grid; grid-template-columns:repeat(7,1fr); gap:2px;
}
.tc-picker-day {
  border:0; background:transparent; color:#374151;
  aspect-ratio:1; border-radius:8px;
  cursor:pointer; font:inherit; font-size:.82rem; font-weight:500;
  display:flex; align-items:center; justify-content:center;
  transition:background .12s, color .12s;
  position:relative;
}
.tc-picker-day:hover:not(.is-disabled):not(.is-selected) {
  background:rgba(0,201,222,.1); color:#007d8c;
}
.tc-picker-day.is-muted { color:#d1d5db; }
.tc-picker-day.is-today:not(.is-selected) { font-weight:700; color:#00b4c8; }
.tc-picker-day.is-today:not(.is-selected)::after {
  content:''; position:absolute; bottom:2px; left:50%;
  transform:translateX(-50%); width:3px; height:3px;
  border-radius:50%; background:#00c9de;
}
.tc-picker-day.is-selected {
  background:linear-gradient(135deg,#00c9de,#0099aa);
  color:#fff; font-weight:700;
  box-shadow:0 2px 8px rgba(0,201,222,.35);
}
.tc-picker-day.is-disabled { opacity:.25; cursor:not-allowed; }

/* ── separator between calendar and time ───────────────────── */
.tc-picker-sep {
  height:1px; background:#f3f4f6; margin:12px 0;
}

/* ═══════════════════════════════════════════════════════════════
   TIME EDITOR  — scroll drum
   ═══════════════════════════════════════════════════════════════ */
.tc-time-editor { display:flex; justify-content:center; padding:4px 0; }

.tc-time-bar { display:flex; align-items:center; gap:4px; }

.tc-drum-wrap {
  display:flex; flex-direction:column; align-items:center; gap:4px;
}

.tc-time-seg-label {
  font-size:.6rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:#9ca3af;
}

.tc-drum {
  position:relative; width:62px;
  overflow:hidden; border-radius:12px;
  cursor:grab;
  touch-action:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 20%,#000 80%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 20%,#000 80%,transparent 100%);
}
.tc-drum:active { cursor:grabbing; }

.tc-drum-track {
  display:flex; flex-direction:column;
  will-change:transform;
}

.tc-drum-item {
  display:flex; align-items:center; justify-content:center;
  font-size:.95rem; font-weight:600; color:#9ca3af;
  transition:color .1s, font-weight .1s;
  user-select:none; -webkit-user-select:none;
  flex-shrink:0;
}
.tc-drum-item.is-selected {
  font-size:1.2rem; font-weight:800; color:#111827;
}

.tc-drum-band {
  position:absolute; left:0; right:0; pointer-events:none;
  background:rgba(0,201,222,.08);
  border-top:1.5px solid rgba(0,201,222,.25);
  border-bottom:1.5px solid rgba(0,201,222,.25);
  border-radius:8px;
}

.tc-time-colon {
  font-size:1.2rem; font-weight:800; color:#d1d5db;
  margin-top:20px;
  flex-shrink:0;
}

/* ── footer chips ───────────────────────────────────────────── */
.tc-picker-footer {
  display:flex; flex-wrap:wrap; gap:5px;
  margin-top:12px; padding-top:10px;
  border-top:1px solid #f3f4f6;
}

.tc-foot-chip {
  border:0; border-radius:8px; padding:6px 11px;
  background:#f3f4f6; color:#374151;
  font:inherit; font-size:.78rem; font-weight:600;
  cursor:pointer; white-space:nowrap;
  transition:background .12s, color .12s;
}
.tc-foot-chip:hover { background:rgba(0,201,222,.12); color:#007d8c; }

.tc-foot-done {
  background:linear-gradient(135deg,#00c9de,#0099aa);
  color:#fff;
}
.tc-foot-done:hover { background:linear-gradient(135deg,#00b4c8,#008a99); color:#fff; }

.tc-foot-clear { background:#fff0f0; color:#b91c1c; margin-left:auto; }
.tc-foot-clear:hover { background:#fee2e2; }

/* ═══════════════════════════════════════════════════════════════
   SELECT / LOCATION PANELS
   ═══════════════════════════════════════════════════════════════ */
.tc-select-panel,.tc-location-panel { padding:8px; }

.tc-select-search {
  width:100%; border:1.5px solid #e5e7eb; border-radius:10px;
  padding:.6rem .8rem; font:inherit; font-size:.88rem;
  color:#111827; background:#f9fafb;
  transition:border-color .15s, box-shadow .15s; margin-bottom:5px;
}
.tc-select-search:focus { outline:none; border-color:#00c9de; box-shadow:0 0 0 3px rgba(0,201,222,.12); }

.tc-select-list,.tc-location-list {
  display:flex; flex-direction:column; gap:2px;
  max-height:15rem; overflow-y:auto;
}
.tc-select-option,.tc-location-option {
  width:100%; border:0; background:transparent; color:#111827;
  text-align:left; padding:.6rem .75rem; border-radius:9px;
  cursor:pointer; font:inherit; font-size:.88rem;
  transition:background .12s;
}
.tc-select-option:hover,.tc-location-option:hover { background:rgba(0,201,222,.09); }
.tc-select-option.is-selected,.tc-location-option.is-selected {
  background:linear-gradient(135deg,#00c9de,#0099aa); color:#fff;
}
.tc-select-option.is-disabled { opacity:.4; cursor:not-allowed; }
.tc-select-option small,.tc-location-option small {
  display:block; font-size:.74rem; color:#6b7280; margin-top:1px;
}
.tc-select-option.is-selected small { color:rgba(255,255,255,.78); }

/* ── location ───────────────────────────────────────────────── */
.tc-location-shell { position:relative; width:100%; }
.tc-location-panel { margin-top:4px; }
.tc-location-note { display:block; font-size:.72rem; color:#9ca3af; margin-top:3px; }
.tc-empty-state { padding:14px; text-align:center; color:#9ca3af; font-size:.84rem; }

/* ═══════════════════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════════════════ */
html.dark .tc-floating-panel {
  background:#0f172a; border-color:rgba(255,255,255,.08);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
html.dark .tc-select-trigger {
  background:#1e293b; border-color:rgba(255,255,255,.1); color:#e2e8f0;
}
html.dark .tc-select-trigger:hover { border-color:#00c9de; }
html.dark .tc-select-label strong { color:#e2e8f0; }
html.dark .tc-trigger-placeholder strong { color:#4b5563; }
html.dark .tc-picker-display--empty { color:#4b5563 !important; }
html.dark .tc-trigger-icon { background:rgba(0,201,222,.12); color:#67e8f9; }
html.dark .tc-picker-month-title { color:#f1f5f9; }
html.dark .tc-picker-nav { color:#94a3b8; }
html.dark .tc-picker-nav:hover { background:rgba(0,201,222,.14); color:#67e8f9; }
html.dark .tc-picker-weekdays span { color:#475569; }
html.dark .tc-picker-day { color:#cbd5e1; }
html.dark .tc-picker-day.is-muted { color:#1e293b; }
html.dark .tc-picker-day.is-today:not(.is-selected) { color:#38bdf8; }
html.dark .tc-picker-day.is-today:not(.is-selected)::after { background:#38bdf8; }
html.dark .tc-picker-sep { background:#1e293b; }
html.dark .tc-drum-item { color:#475569; }
html.dark .tc-drum-item.is-selected { color:#f1f5f9; }
html.dark .tc-drum-band { background:rgba(0,201,222,.1); border-color:rgba(0,201,222,.22); }
html.dark .tc-time-colon { color:#334155; }
html.dark .tc-time-seg-label { color:#475569; }
html.dark .tc-picker-footer { border-top-color:#1e293b; }
html.dark .tc-foot-chip { background:#1e293b; color:#cbd5e1; }
html.dark .tc-foot-chip:hover { background:rgba(0,201,222,.13); color:#67e8f9; }
html.dark .tc-foot-clear { background:rgba(185,28,28,.18); color:#fca5a5; }
html.dark .tc-foot-clear:hover { background:rgba(185,28,28,.28); }
html.dark .tc-select-search { background:#1e293b; border-color:rgba(255,255,255,.1); color:#e2e8f0; }
html.dark .tc-select-option,html.dark .tc-location-option { color:#e2e8f0; }
html.dark .tc-select-option:hover,html.dark .tc-location-option:hover { background:rgba(0,201,222,.1); }