/* ════════════════════════════════════════════════════════════════════
   THE SEARCHABLE TIMEZONE COMBOBOX, styles

   EXTRACTED FROM css/hr-ops-monitor.css ON 2026-07-29, NOT REWRITTEN.
   Moved verbatim so the VMEM board can use the SAME picker as HR rather than a
   copy of it, matching js/tz-combo.js which moved for the same reason.

   The colours are the page's own tokens (--border, --text, --t2, --t3, --gold),
   declared per page. Any page linking this file already declares them, so the
   picker takes on that page's theme instead of pinning HR's.
   ════════════════════════════════════════════════════════════════════ */

.tz-combo{position:relative;}
.tz-combo-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:9px 12px;font-size:12px;cursor:pointer;width:100%;transition:border-color .2s;}
.tz-combo-btn:hover{border-color:rgba(240,200,50,.4);}
.tz-combo-btn .tz-combo-chevron{color:var(--t3);font-size:10px;}
.tz-combo-pop{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#0d150c;border:1px solid rgba(240,200,50,.32);border-radius:10px;box-shadow:0 18px 40px rgba(0,0,0,.55);z-index:1100;max-height:280px;display:none;flex-direction:column;overflow:hidden;}
.tz-combo.open .tz-combo-pop{display:flex;}
.tz-combo-search{background:rgba(0,0,0,.45);border:none;border-bottom:1px solid var(--border);color:var(--text);font-size:12px;padding:10px 12px;outline:none;}
.tz-combo-search::placeholder{color:var(--t3);}
.tz-combo-list{overflow-y:auto;padding:4px 0;}
.tz-combo-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;font-size:12px;cursor:pointer;color:var(--t2);transition:background .15s, color .15s;}
.tz-combo-opt:hover,.tz-combo-opt.active{background:rgba(240,200,50,.12);color:var(--gold);}
.tz-combo-opt.pinned{border-bottom:1px solid var(--border);background:rgba(240,200,50,.06);}
.tz-combo-opt .tz-utc{font-size:10px;color:var(--t3);letter-spacing:.6px;font-variant-numeric:tabular-nums;}
.tz-combo-empty{padding:14px 12px;font-size:12px;color:var(--t3);font-style:italic;text-align:center;}