/* ==========================================================================
   tt-ui.css - site-wide UI pieces shared by the public site AND the CRM.

   Linked by inc/header.php and index.php (after tokens.css) and by the CRM's
   admin-interface/inc/head.php, so the homepage's scrollbar and dropdown look
   the same everywhere. Every var() carries a fallback because the CRM does not
   load tokens.css; on the public site the tokens win, so nothing there changes.
   ========================================================================== */

/* Page scrollbar - the homepage design (css/home.css), now on every page.
   WebKit/Blink only: setting the standard scrollbar-color/-width here would
   override these rules in Chrome 121+, so Firefox gets them on its own. */
::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ box-shadow:inset 0 0 5px grey; border-radius:10px; }
::-webkit-scrollbar-thumb{ background:rgb(83, 99, 129); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:#b30000; }
@supports (-moz-appearance:none){
  html{ scrollbar-width:thin; scrollbar-color:rgb(83, 99, 129) transparent; }
}

/* ==========================================================================
   tt-select — styled dropdown (see js/tt-select.js)

   The native <select> stays in the DOM and stays the thing that submits. It is
   hidden visually but NOT with display:none, because a hidden-but-present
   control keeps form behaviour and validation intact. On touch devices the
   script does not run at all, so the rules below simply never apply and the
   native picker shows through.
   ========================================================================== */
.tt-sel{ position:relative; }

.tt-sel__native{
  position:absolute; opacity:0; pointer-events:none;
  width:100%; height:100%; left:0; top:0; margin:0; border:0;
}

.tt-sel__btn{
  display:flex; align-items:center; gap:var(--sp-2, 8px);
  width:100%; min-height:48px;
  padding:0 34px 0 40px;              /* room for the lead icon and the chevron */
  background:var(--white, #FFFFFF);
  border:1px solid var(--line-control, #78818E);
  border-radius:var(--r, 12px);
  font-family:var(--font-body, 'Inter','Noto Sans Devanagari','Segoe UI',Arial,sans-serif); font-size:16px; line-height:1.2;
  color:var(--ink-900, #0F172A);
  text-align:left;
  cursor:pointer;
  transition:border-color var(--t, 200ms) var(--ease, cubic-bezier(.4,0,.2,1)), box-shadow var(--t, 200ms) var(--ease, cubic-bezier(.4,0,.2,1));
}
.tt-sel.is-empty .tt-sel__btn{ color:var(--ink-500, #5B6B84); }
.tt-sel__btn:hover{ border-color:var(--blue-600, #1565D8); }
.tt-sel.is-open .tt-sel__btn{ border-color:var(--blue-600, #1565D8); box-shadow:0 0 0 3px rgba(21,101,216,.15); }

.tt-sel__value{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* chevron, drawn on the button so it can rotate when open */
.tt-sel__btn:after{
  content:""; position:absolute; right:12px; top:50%;
  width:18px; height:18px; margin-top:-9px;
  background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%235B6B84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/18px 18px;
  transition:transform var(--t, 200ms) var(--ease, cubic-bezier(.4,0,.2,1));
}
.tt-sel.is-open .tt-sel__btn:after{ transform:rotate(180deg); }

/* tt-select.js sets max-height inline from the room actually available, and
   adds .tt-sel--up when the list has to open upwards; the 296 here is the
   design cap it clamps to, and the value it falls back to if the script never
   runs. */
.tt-sel--up .tt-sel__list{ top:auto; bottom:calc(100% + 6px); }
.tt-sel__list{
  position:absolute; z-index:40; left:0; right:0; top:calc(100% + 6px);
  margin:0; padding:6px;
  list-style:none;
  max-height:296px; overflow-y:auto;
  background:var(--white, #FFFFFF);
  border:1px solid var(--line, #E3EAF3);
  border-radius:var(--r-lg, 16px);          /* inner radius stays under the panel's --r-xl */
  box-shadow:var(--shadow-float, 0 12px 34px rgba(11,37,69,.12));
}

.tt-sel__opt{
  padding:10px var(--sp-3, 12px);
  border-radius:var(--r-sm, 8px);
  font-family:var(--font-body, 'Inter','Noto Sans Devanagari','Segoe UI',Arial,sans-serif); font-size:15px; line-height:1.4;
  color:var(--ink-900, #0F172A);
  cursor:pointer;
  /* colour only — a transform here would nudge neighbours as the pointer moves */
  transition:background-color var(--t-fast, 150ms) var(--ease, cubic-bezier(.4,0,.2,1)), color var(--t-fast, 150ms) var(--ease, cubic-bezier(.4,0,.2,1));
}
.tt-sel__opt.is-placeholder{ color:var(--ink-500, #5B6B84); }
.tt-sel__opt.is-active{ background:var(--blue-50, #EEF4FC); color:var(--blue-700, #0F53B3); }
.tt-sel__opt[aria-selected="true"]{
  background:var(--blue-600, #1565D8); color:var(--white, #FFFFFF); font-weight:600;
}
.tt-sel__opt[aria-selected="true"].is-active{ background:var(--blue-700, #0F53B3); }

/* The prompt row ("Select Subject") is selected by default but is not a
   choice, so it must not be painted like one - otherwise the list opens
   looking as though a subject is already picked. */
.tt-sel__opt.is-placeholder[aria-selected="true"]{
  background:transparent; color:var(--ink-500, #5B6B84); font-weight:400;
}
.tt-sel__opt.is-placeholder.is-active{ background:var(--blue-50, #EEF4FC); color:var(--ink-700, #334155); }

/* scrollbar, so a long subject list does not show an OS-grey bar inside a
   rounded white card */
.tt-sel__list::-webkit-scrollbar{ width:10px; }
.tt-sel__list::-webkit-scrollbar-track{ background:transparent; box-shadow:none; border-radius:0; }
.tt-sel__list::-webkit-scrollbar-thumb{ background:#C6D2E4; border-radius:999px; border:3px solid var(--white, #FFFFFF); }
.tt-sel__list::-webkit-scrollbar-thumb:hover{ background:#A9BBD4; }