/* =========================
   TBM PRO — FINAL PERFECT
   Root: #tbm-root
   ========================= */

#tbm-root{ color-scheme: dark; }
#tbm-root, #tbm-root *{ box-sizing:border-box; }
#tbm-root{ position:relative; z-index:9999999; font-family:inherit; -webkit-font-smoothing:antialiased; }

#tbm-root{
  --tbm-bg:#053a33;
  --tbm-bg2:#032a25;
  --tbm-border:rgba(255,255,255,.16);
  --tbm-text:#ffffff;
  --tbm-muted:rgba(255,255,255,.78);
  --tbm-radius:22px;
  --tbm-shadow:0 25px 70px rgba(0,0,0,.45);
}

/* Backdrop + modal */
#tbm-root .tbm-backdrop{
  position:fixed !important; inset:0 !important;
  background:rgba(0,0,0,.55) !important;
  opacity:0; pointer-events:none;
  transition:opacity .18s ease;
}
#tbm-root .tbm-modal{
  position:fixed !important; inset:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:18px !important;
  opacity:0; pointer-events:none;
  transition:opacity .18s ease;
}
#tbm-root.tbm-open .tbm-backdrop{ opacity:1; pointer-events:auto; }
#tbm-root.tbm-open .tbm-modal.tbm-open{ opacity:1; pointer-events:auto; }

/* Panel: FIX scroll */
#tbm-root .tbm-panel{
  position:relative !important;
  width:100% !important;
  max-width:920px !important;
  border-radius:var(--tbm-radius) !important;
  border:1px solid var(--tbm-border) !important;
  box-shadow:var(--tbm-shadow) !important;
  background:linear-gradient(180deg, var(--tbm-bg), var(--tbm-bg2)) !important;
  color:var(--tbm-text) !important;
  overflow:hidden !important;

  /* IMPORTANT: constrain height so inner body can scroll */
  max-height: calc(100vh - 36px) !important;
  height: calc(100vh - 36px) !important;
  display:flex !important;
  flex-direction:column !important;
}

/* Offer split layout */
#tbm-root .tbm-panel--split{
  max-width:1100px !important;
  display:grid !important;
  grid-template-columns: 0.95fr 1.05fr !important;
  max-height: calc(100vh - 36px) !important;
  height: calc(100vh - 36px) !important;
}

#tbm-root .tbm-side{
  padding:26px !important;
  background:
    radial-gradient(1200px 700px at 20% 0%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, #062f2a, #032521) !important;
  border-right:1px solid rgba(255,255,255,.10) !important;
  overflow:auto !important;
}
#tbm-root .tbm-side__inner{ max-width:520px; }
#tbm-root .tbm-kicker{ color:rgba(255,255,255,.88) !important; letter-spacing:.18em; font-weight:900; font-size:12px; }
#tbm-root .tbm-side__title{ color:#fff !important; margin:10px 0 12px !important; font-size:34px; line-height:1.08; font-weight:900; }
#tbm-root .tbm-side__p{ color:var(--tbm-muted) !important; margin:0 0 18px !important; font-size:14px; line-height:1.55; }
#tbm-root .tbm-bullets{ display:grid; gap:12px; margin-top:14px; }
#tbm-root .tbm-bullet{ padding:12px !important; border-radius:16px !important; border:1px solid rgba(255,255,255,.10) !important; background:rgba(255,255,255,.03) !important; }
#tbm-root .tbm-bullet strong{ color:#fff !important; display:block; font-size:14px; font-weight:900; }
#tbm-root .tbm-bullet span{ color:var(--tbm-muted) !important; display:block; margin-top:4px; font-size:13px; }
#tbm-root .tbm-side__hint{ margin-top:16px !important; padding-top:14px !important; border-top:1px solid rgba(255,255,255,.10) !important; font-weight:900; color:rgba(255,255,255,.92) !important; }

#tbm-root .tbm-main{
  display:flex !important;
  flex-direction:column !important;
  min-width:0 !important;
  min-height:0 !important;
  overflow:hidden !important;
}

/* Header sticky + X perfect */
#tbm-root .tbm-header{
  position:sticky !important;
  top:0 !important;
  z-index:20 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  padding:16px 18px !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
  background:rgba(5,58,51,.92) !important; /* solid-ish */
  backdrop-filter: blur(10px);
}

#tbm-root .tbm-title{
  margin:0 !important;
  font-size:18px !important;
  line-height:1.2 !important;
  font-weight:900 !important;
  color:#fff !important;
}

#tbm-root .tbm-iconbtn{
  position:absolute !important;
  top:10px !important;
  right:14px !important;
  z-index:30 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#fff !important;
  cursor:pointer !important;
  font-size:30px !important;
  line-height:1 !important;
}
#tbm-root .tbm-iconbtn:hover{ opacity:.85 !important; }

/* Body SCROLL */
#tbm-root .tbm-body{
  padding:14px !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow:auto !important;         /* IMPORTANT: scroll works */
  -webkit-overflow-scrolling:touch;
}

/* Form */
#tbm-root .tbm-form{ margin:0 !important; }
#tbm-root .tbm-grid{ display:grid !important; gap:10px !important; }
#tbm-root .tbm-grid--2{ grid-template-columns:1fr 1fr !important; }
#tbm-root .tbm-label{ display:block !important; font-size:12px !important; font-weight:900 !important; opacity:.92 !important; margin:0 0 6px !important; color:#fff !important; }
#tbm-root .tbm-help{ font-size:12px !important; opacity:.78 !important; margin-top:6px !important; color:rgba(255,255,255,.78) !important; }

#tbm-root .tbm-input,
#tbm-root .tbm-select,
#tbm-root .tbm-textarea,
#tbm-root .tbm-file{
  width:100% !important;
  padding:12px 12px !important;
  border-radius:16px !important;
  border:1px solid rgba(255,255,255,.16) !important;
  background:rgba(0,0,0,.14) !important;
  color:#fff !important;
  caret-color:#fff !important;
  outline:none !important;
  box-shadow:none !important;
}

/* Hide native selects when enhanced to custom dropdown */
#tbm-root .tbm-select.tbm-select--hidden{
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* selected text (blue highlight) should be readable */
#tbm-root .tbm-input::selection,
#tbm-root .tbm-textarea::selection{
  background: rgba(255,255,255,.22) !important;
  color:#fff !important;
}

#tbm-root .tbm-input::placeholder,
#tbm-root .tbm-textarea::placeholder{
  color:rgba(255,255,255,.55) !important;
  opacity:1 !important;
}

#tbm-root .tbm-textarea{ resize:vertical !important; min-height:110px !important; }

/* Chrome autofill fix */
#tbm-root .tbm-input:-webkit-autofill,
#tbm-root .tbm-input:-webkit-autofill:hover,
#tbm-root .tbm-input:-webkit-autofill:focus,
#tbm-root .tbm-textarea:-webkit-autofill{
  -webkit-text-fill-color:#fff !important;
  transition: background-color 9999s ease-in-out 0s;
  box-shadow: 0 0 0px 1000px rgba(0,0,0,.14) inset !important;
  border:1px solid rgba(255,255,255,.16) !important;
}

#tbm-root input[type="date"].tbm-input{
  color:#fff !important;
  background:rgba(0,0,0,.14) !important;
  color-scheme: dark;
}
#tbm-root input[type="date"].tbm-input::-webkit-calendar-picker-indicator{
  filter: invert(1) brightness(1.15) opacity(1) !important;
  cursor:pointer;
}

/* Custom file control (matches dropdown height) */
#tbm-root .tbm-filex{ position:relative !important; }
#tbm-root .tbm-filex__btn{
  width:100% !important;
  padding:12px 12px !important;
  border-radius:16px !important;
  border:1px solid rgba(255,255,255,.16) !important;
  background:rgba(0,0,0,.14) !important;
  color:#fff !important;
  cursor:pointer !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  font-weight:900 !important;
}
#tbm-root .tbm-filex__meta{ opacity:.75 !important; font-weight:700 !important; margin-left:10px !important; }
#tbm-root .tbm-file.tbm-file--hidden{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
}

/* separators tighter */
#tbm-root .tbm-sep{ border:0; border-top:1px solid rgba(255,255,255,.10); margin:12px 0 !important; }

/* responsive: stack + keep scroll */
@media (max-width: 980px){
  #tbm-root .tbm-panel--split{ grid-template-columns:1fr !important; }
  #tbm-root .tbm-side{ display:none !important; }
}

@media (max-width: 640px){
  #tbm-root .tbm-modal{ padding:10px !important; align-items:flex-start !important; }
  #tbm-root .tbm-panel{ height: calc(100vh - 20px) !important; max-height: calc(100vh - 20px) !important; border-radius:18px !important; }
  #tbm-root .tbm-grid--2{ grid-template-columns:1fr !important; }
  #tbm-root .tbm-body{ padding:12px !important; }
}

/* buttons */
#tbm-root .tbm-actions{
  display:flex !important;
  gap:10px !important;
  flex-wrap:wrap !important;
  margin-top:14px !important;
}

#tbm-root .tbm-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:12px 16px !important;
  border-radius:16px !important;
  border:1px solid rgba(255,255,255,.16) !important;
  background:rgba(255,255,255,.06) !important;
  color:#fff !important;
  text-decoration:none !important;
  cursor:pointer !important;
  font-weight:900 !important;
  line-height:1 !important;
}

#tbm-root .tbm-btn--primary{
  background:#fff !important;
  color:#053a33 !important;
  border-color:rgba(255,255,255,.90) !important;
}

#tbm-root .tbm-btn[disabled],
#tbm-root .tbm-btn:disabled{
  opacity:.55 !important;
  cursor:not-allowed !important;
}

/* separator / status */
#tbm-root .tbm-sep{ border:0 !important; border-top:1px solid rgba(255,255,255,.10) !important; margin:16px 0 !important; }
#tbm-root .tbm-check{ display:flex !important; gap:10px !important; align-items:flex-start !important; margin:12px 0 0 !important; cursor:pointer !important; color:#fff !important; }
#tbm-root .tbm-check input{ margin-top:3px !important; }

#tbm-root .tbm-status{
  margin-top:12px !important;
  padding:10px 12px !important;
  border-radius:16px !important;
  border:1px solid rgba(255,255,255,.14) !important;
  background:rgba(255,255,255,.06) !important;
  color:#fff !important;
  font-weight:900 !important;
}

/* toast */
#tbm-root .tbm-toast{
  position:fixed !important;
  left:16px !important; bottom:16px !important;
  max-width:420px !important;
  padding:12px 14px !important;
  border-radius:18px !important;
  border:1px solid rgba(255,255,255,.16) !important;
  background:rgba(0,0,0,.68) !important;
  color:#fff !important;
  z-index:10000001 !important;
}

/* ===== Custom dropdown (time) ===== */
#tbm-root .tbm-dd{ position:relative !important; }
#tbm-root .tbm-dd__btn{
  width:100% !important;
  padding:12px 12px !important;
  border-radius:16px !important;
  border:1px solid rgba(255,255,255,.16) !important;
  background:rgba(0,0,0,.14) !important;
  color:#fff !important;
  cursor:pointer !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  font-weight:900 !important;
}
#tbm-root .tbm-dd__list{
  position:absolute !important;
  left:0 !important; right:0 !important;
  top:calc(100% + 8px) !important;
  background:linear-gradient(180deg, #062f2a, #032521) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:16px !important;
  box-shadow: 0 16px 45px rgba(0,0,0,.45) !important;
  max-height: 260px !important;
  overflow:auto !important;
  padding:6px !important;
  display:none !important;
  z-index:10000010 !important;
}
#tbm-root .tbm-dd.tbm-dd--open .tbm-dd__list{ display:block !important; }
#tbm-root .tbm-dd__opt{
  padding:10px 10px !important;
  border-radius:12px !important;
  cursor:pointer !important;
  border:1px solid transparent !important;
  font-weight:900 !important;
  color:#fff !important;
}
#tbm-root .tbm-dd__opt:hover{ background:rgba(255,255,255,.08) !important; border-color:rgba(255,255,255,.12) !important; }
#tbm-root .tbm-dd__opt--active{ background:rgba(255,255,255,.12) !important; border-color:rgba(255,255,255,.16) !important; }

/* responsive */
@media (max-width: 980px){
  #tbm-root .tbm-panel--split{ grid-template-columns:1fr !important; }
  #tbm-root .tbm-side{ display:none !important; }
}
@media (max-width: 640px){
  #tbm-root .tbm-grid--2{ grid-template-columns:1fr !important; }
  #tbm-root .tbm-modal{ padding:12px !important; }
  #tbm-root .tbm-panel,
  #tbm-root .tbm-panel--split{
    max-height: calc(100vh - 24px) !important;
  }
}