/* ============================================================
   FIKR UI KIT — modern scrollbars, arrow-scrolled tabs, custom dropdowns,
   checkbox / radio / range / date / file controls.
   Shared by the admin panel and the public site. Token-agnostic: reads the
   admin (--a-*) or public (--ink, --line …) variables, with fallbacks.
   ============================================================ */
:root{
  --ui-ink:var(--a-ink,var(--ink,#1a1730));
  --ui-soft:var(--a-ink-soft,var(--ink-soft,#6b6480));
  --ui-line:var(--a-line,var(--line,#e6e2ee));
  --ui-surface:var(--a-surface,var(--surface,#ffffff));
  --ui-field:var(--a-bg,var(--surface-soft,#f7f5fb));
  --ui-accent:var(--a-teal,var(--btn-bg,#282460));
  --ui-accent-ink:#ffffff;
  --ui-focus:color-mix(in srgb,var(--ui-accent) 24%,transparent);
  --ui-tint:color-mix(in srgb,var(--ui-accent) 9%,transparent);
  --ui-tint-2:color-mix(in srgb,var(--ui-accent) 16%,transparent);
  --ui-thumb:rgba(40,36,96,.26);
  --ui-thumb-h:rgba(40,36,96,.48);
  --ui-r:10px;
  --ui-pop-shadow:0 18px 40px -12px rgba(21,18,60,.34),0 4px 10px rgba(21,18,60,.08);
}
[data-theme="dark"]{
  --ui-accent:var(--a-teal,var(--btn-bg,#282460));
  --ui-thumb:rgba(196,189,240,.26);
  --ui-thumb-h:rgba(196,189,240,.5);
  --ui-pop-shadow:0 18px 44px -10px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.04);
  color-scheme:dark;
}
/* In dark mode the accent is too dark to read on dark surfaces — use a lighter lilac for highlights. */
[data-theme="dark"] .sw-sel-pop,[data-theme="dark"] .sw-sel-btn,[data-theme="dark"] .sw-tabscroll{--ui-hi:#c4bdf0;}
.sw-sel-pop,.sw-sel-btn,.sw-tabscroll{--ui-hi:var(--ui-accent);}

/* ---------- 1. Modern scrollbars ---------- */
*{scrollbar-width:thin;scrollbar-color:var(--ui-thumb) transparent;}
*::-webkit-scrollbar{width:10px;height:10px;}
*::-webkit-scrollbar-track{background:transparent;}
*::-webkit-scrollbar-thumb{background:var(--ui-thumb);border-radius:999px;border:3px solid transparent;background-clip:content-box;min-height:36px;min-width:36px;}
*::-webkit-scrollbar-thumb:hover{background:var(--ui-thumb-h);background-clip:content-box;}
*::-webkit-scrollbar-thumb:active{background:var(--ui-thumb-h);background-clip:content-box;}
*::-webkit-scrollbar-corner{background:transparent;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
/* scrollbars that auto-hide until you hover the scroller (sidebar, popovers, tables) */
.sw-sel-list,.sidebar nav,.sidebar{scrollbar-width:thin;}

/* ---------- 2. Tabs with arrow buttons (no scrollbar, no vertical scroll) ---------- */
.sw-tabscroll{position:relative;min-width:0;max-width:100%;}
.sw-tabscroll>.sw-tabs,.sw-tabscroll>.ap-tabs,.sw-tabscroll>.pb-tabs,.sw-tabscroll>.aib-side-tabs,.sw-tabscroll>[data-tabscroll]{
  overflow:hidden;position:relative;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth;touch-action:pan-y;
  flex-wrap:nowrap;
}
.sw-tabscroll>*::-webkit-scrollbar{display:none;width:0;height:0;}
.sw-tabscroll>.sw-tabs{overflow:hidden!important;}
.sw-tabscroll.has-line{border-bottom:1px solid var(--ui-line);}
.sw-tabscroll .sw-tab{margin-bottom:0;}
.toolbar .sw-sel{flex:0 1 auto;}
@media (max-width:700px){.toolbar .sw-sel{flex:1 1 40%;min-width:0;}}
.sw-tabscroll .sw-tab:focus-visible{outline-offset:-3px;border-radius:8px;}
.sw-tabscroll .sw-tab,.sw-tabscroll [role=tab]{flex:none;}
.sw-tabarrow{
  position:absolute;top:0;bottom:1px;z-index:3;width:42px;display:flex;align-items:center;border:0;padding:0;margin:0;cursor:pointer;
  color:var(--ui-soft);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility .18s,color .15s;
}
.sw-tabarrow.show{opacity:1;visibility:visible;pointer-events:auto;}
.sw-tabarrow.prev{left:0;justify-content:flex-start;background:linear-gradient(90deg,var(--ui-tabbg,var(--a-bg,var(--surface,#fff))) 55%,transparent);}
.sw-tabarrow.next{right:0;justify-content:flex-end;background:linear-gradient(270deg,var(--ui-tabbg,var(--a-bg,var(--surface,#fff))) 55%,transparent);}
.sw-tabarrow span{
  display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ui-surface);color:var(--ui-ink);
  border:1px solid var(--ui-line);box-shadow:0 4px 12px -4px rgba(21,18,60,.28);transition:transform .15s,background .15s,color .15s,border-color .15s;
}
.sw-tabarrow.prev span{margin-left:2px;}.sw-tabarrow.next span{margin-right:2px;}
.sw-tabarrow:hover span{background:var(--ui-accent);color:#fff;border-color:var(--ui-accent);transform:scale(1.08);}
.sw-tabarrow:active span{transform:scale(.94);}
.sw-tabarrow:focus-visible{outline:none;}
.sw-tabarrow:focus-visible span{box-shadow:0 0 0 3px var(--ui-focus);border-color:var(--ui-accent);}
.sw-tabarrow svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
[dir="rtl"] .sw-tabarrow.prev{left:auto;right:0;justify-content:flex-end;background:linear-gradient(270deg,var(--ui-tabbg,var(--a-bg,var(--surface,#fff))) 55%,transparent);}
[dir="rtl"] .sw-tabarrow.next{right:auto;left:0;justify-content:flex-start;background:linear-gradient(90deg,var(--ui-tabbg,var(--a-bg,var(--surface,#fff))) 55%,transparent);}
[dir="rtl"] .sw-tabarrow svg{transform:scaleX(-1);}
@media (prefers-reduced-motion:reduce){.sw-tabscroll>*{scroll-behavior:auto;}.sw-tabarrow,.sw-tabarrow span{transition:none;}}

/* ---------- 3. Custom dropdown (replaces the native <select>) ---------- */
.sw-sel{position:relative;display:inline-block;min-width:0;max-width:100%;vertical-align:middle;}
.sw-sel.block{display:block;width:100%;}
.sw-sel>select,.sw-sel>input[type=date]{position:absolute!important;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;margin:0!important;}
.sw-sel-btn{
  display:flex;align-items:center;gap:8px;width:100%;height:var(--ctl-h,40px);min-height:var(--ctl-h,40px);box-sizing:border-box;padding:0 12px;text-align:start;cursor:pointer;
  font:inherit;font-size:.88rem;font-weight:500;line-height:1.3;color:var(--ui-ink);
  background:var(--ui-field);border:1px solid var(--ui-line);border-radius:var(--ui-r);
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.sw-sel-btn:hover:not(:disabled){border-color:color-mix(in srgb,var(--ui-hi) 45%,var(--ui-line));}
.sw-sel-btn:focus-visible,.sw-sel.open .sw-sel-btn{outline:none;border-color:var(--ui-hi);box-shadow:0 0 0 3px var(--ui-focus);}
.sw-sel-btn:disabled{opacity:.55;cursor:not-allowed;}
.sw-sel-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sw-sel-val.ph{color:var(--ui-soft);}
.sw-sel-chev{flex:none;width:16px;height:16px;stroke:var(--ui-soft);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease;}
.sw-sel.open .sw-sel-chev{transform:rotate(180deg);stroke:var(--ui-hi);}
.sw-sel.sm .sw-sel-btn{height:var(--ctl-h-sm,32px);min-height:var(--ctl-h-sm,32px);padding:0 10px;font-size:.82rem;border-radius:8px;}
.sw-sel.pill .sw-sel-btn{height:auto;min-height:0;padding:4px 10px 4px 12px;border-radius:999px;font-size:.76rem;font-weight:700;background:var(--ui-surface);gap:6px;}
.sw-sel.pill .sw-sel-chev{width:13px;height:13px;}
.sw-sel.invalid .sw-sel-btn{border-color:#d14343;}
.f-field .sw-sel,.field .sw-sel{display:block;width:100%;}

.sw-sel-pop{
  position:fixed;z-index:100000;min-width:160px;max-width:min(92vw,420px);display:flex;flex-direction:column;
  background:var(--ui-surface);color:var(--ui-ink);border:1px solid var(--ui-line);border-radius:12px;box-shadow:var(--ui-pop-shadow);
  padding:6px;opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top center;pointer-events:none;
  transition:opacity .14s ease,transform .16s cubic-bezier(.2,.8,.3,1);font-family:inherit;
}
.sw-sel-pop.up{transform-origin:bottom center;transform:translateY(6px) scale(.98);}
.sw-sel-pop.in{opacity:1;transform:none;pointer-events:auto;}
.sw-sel-search{position:relative;padding:2px 2px 6px;}
.sw-sel-search input{
  width:100%;box-sizing:border-box;padding:8px 10px 8px 32px;font:inherit;font-size:.84rem;color:var(--ui-ink);
  background:var(--ui-field);border:1px solid var(--ui-line);border-radius:8px;outline:none;
}
.sw-sel-search input:focus{border-color:var(--ui-hi);box-shadow:0 0 0 3px var(--ui-focus);}
.sw-sel-search svg{position:absolute;left:12px;top:50%;margin-top:-4px;width:14px;height:14px;stroke:var(--ui-soft);fill:none;stroke-width:2.2;stroke-linecap:round;pointer-events:none;}
.sw-sel-list{overflow-y:auto;overscroll-behavior:contain;max-height:min(280px,50vh);margin:0;padding:0;list-style:none;outline:none;}
.sw-sel-opt{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer;font-size:.86rem;line-height:1.3;
  color:var(--ui-ink);user-select:none;transition:background .1s;
}
.sw-sel-opt .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sw-sel-opt.act{background:var(--ui-tint);}
.sw-sel-opt:hover{background:var(--ui-tint-2);}
.sw-sel-opt[aria-selected=true]{color:var(--ui-hi);font-weight:700;}
.sw-sel-opt[aria-disabled=true]{opacity:.42;cursor:not-allowed;}
.sw-sel-opt .ck{flex:none;width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.6);transition:opacity .12s,transform .15s;}
.sw-sel-opt[aria-selected=true] .ck{opacity:1;transform:none;}
.sw-sel-grp{padding:10px 10px 4px;font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ui-soft);}
.sw-sel-empty{padding:14px 10px;text-align:center;font-size:.82rem;color:var(--ui-soft);}
/* phones: dropdown becomes a bottom sheet */
.sw-sel-scrim{position:fixed;inset:0;z-index:99999;background:rgba(10,8,30,.45);opacity:0;transition:opacity .18s;}
.sw-sel-scrim.in{opacity:1;}
@media (max-width:560px){
  .sw-sel-pop.sheet{left:8px!important;right:8px!important;top:auto!important;bottom:8px!important;width:auto!important;max-width:none;border-radius:16px;padding:10px;transform:translateY(24px);transform-origin:bottom center;}
  .sw-sel-pop.sheet.in{transform:none;}
  .sw-sel-pop.sheet .sw-sel-list{max-height:55vh;}
  .sw-sel-pop.sheet .sw-sel-opt{padding:13px 12px;font-size:.95rem;}
}
@media (prefers-reduced-motion:reduce){.sw-sel-pop,.sw-sel-chev,.sw-sel-opt .ck{transition:none;}}

/* ---------- 4. Checkbox & radio ---------- */
input[type=checkbox]:not(.sw-native),input[type=radio]:not(.sw-native){
  -webkit-appearance:none;appearance:none;flex:none;width:18px!important;height:18px!important;min-height:0!important;padding:0!important;margin:0;vertical-align:middle;cursor:pointer;position:relative;
  background:var(--ui-surface);border:1.5px solid color-mix(in srgb,var(--ui-soft) 55%,var(--ui-line));
  transition:background .15s,border-color .15s,box-shadow .15s,transform .12s;
}
input[type=checkbox]:not(.sw-native){border-radius:6px;}
input[type=radio]:not(.sw-native){border-radius:50%;}
input[type=checkbox]:not(.sw-native):hover:not(:disabled),input[type=radio]:not(.sw-native):hover:not(:disabled){border-color:var(--ui-hi,var(--ui-accent));}
input[type=checkbox]:not(.sw-native):checked,input[type=checkbox]:not(.sw-native):indeterminate,input[type=radio]:not(.sw-native):checked{
  background:var(--ui-accent);border-color:var(--ui-accent);
}
[data-theme="dark"] input[type=checkbox]:not(.sw-native):checked,[data-theme="dark"] input[type=checkbox]:not(.sw-native):indeterminate,[data-theme="dark"] input[type=radio]:not(.sw-native):checked{background:#6d63c9;border-color:#6d63c9;}
input[type=checkbox]:not(.sw-native)::after{
  content:"";position:absolute;left:5px;top:1.5px;width:5px;height:10px;border:solid #fff;border-width:0 2.4px 2.4px 0;
  transform:rotate(45deg) scale(0);transition:transform .16s cubic-bezier(.2,.9,.3,1.4);
}
input[type=checkbox]:not(.sw-native):checked::after{transform:rotate(45deg) scale(1);}
input[type=checkbox]:not(.sw-native):indeterminate::after{left:3.5px;top:7px;width:8px;height:0;border-width:0 0 2.4px 0;transform:none;}
input[type=radio]:not(.sw-native)::after{content:"";position:absolute;inset:3.5px;border-radius:50%;background:#fff;transform:scale(0);transition:transform .16s cubic-bezier(.2,.9,.3,1.4);}
input[type=radio]:not(.sw-native):checked::after{transform:scale(1);}
input[type=checkbox]:not(.sw-native):active:not(:disabled),input[type=radio]:not(.sw-native):active:not(:disabled){transform:scale(.9);}
input[type=checkbox]:not(.sw-native):focus-visible,input[type=radio]:not(.sw-native):focus-visible{outline:none;box-shadow:0 0 0 3px var(--ui-focus);}
input[type=checkbox]:not(.sw-native):disabled,input[type=radio]:not(.sw-native):disabled{opacity:.45;cursor:not-allowed;}
/* the AI chatbot switch keeps its own look (invisible overlay input) */
.ai-switch input[type=checkbox]:not(.sw-native){width:44px!important;height:24px!important;background:transparent;border:0;box-shadow:none;border-radius:99px;}
.ai-switch input[type=checkbox]:not(.sw-native)::after{display:none;}

/* ---------- 5. Range, date/time, number, file, colour, search ---------- */
input[type=range]{-webkit-appearance:none;appearance:none;height:6px;border-radius:999px;background:var(--ui-line);outline:none;cursor:pointer;accent-color:var(--ui-accent);}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--ui-accent);border:3px solid var(--ui-surface);box-shadow:0 0 0 1px var(--ui-accent),0 3px 8px rgba(21,18,60,.3);transition:transform .12s,box-shadow .15s;}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--ui-accent);border:3px solid var(--ui-surface);box-shadow:0 0 0 1px var(--ui-accent);}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.12);}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 1px var(--ui-accent),0 0 0 5px var(--ui-focus);}
[data-theme="dark"] input[type=range]::-webkit-slider-thumb{background:#8f84e8;box-shadow:0 0 0 1px #8f84e8,0 3px 8px rgba(0,0,0,.5);}
input[type=date],input[type=time],input[type=datetime-local],input[type=month],input[type=week]{min-height:var(--ctl-h,40px);font-family:inherit;}
[data-theme="dark"] input[type=date],[data-theme="dark"] input[type=time],[data-theme="dark"] input[type=datetime-local]{color-scheme:dark;}
input[type=date]::-webkit-calendar-picker-indicator,input[type=time]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator{
  cursor:pointer;border-radius:6px;padding:3px;opacity:.65;transition:opacity .15s,background .15s;
}
input[type=date]::-webkit-calendar-picker-indicator:hover,input[type=time]::-webkit-calendar-picker-indicator:hover,input[type=datetime-local]::-webkit-calendar-picker-indicator:hover{opacity:1;background:var(--ui-tint-2);}
input[type=number]{-moz-appearance:textfield;appearance:textfield;}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:14px;height:14px;cursor:pointer;opacity:.55;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6480' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");}
input[type=search]::-webkit-search-cancel-button:hover{opacity:1;}
input[type=file]{font:inherit;font-size:.84rem;color:var(--ui-soft);max-width:100%;}
input[type=file]::file-selector-button{
  margin-inline-end:12px;padding:8px 14px;border:1px solid var(--ui-line);border-radius:8px;background:var(--ui-surface);color:var(--ui-ink);
  font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s;
}
input[type=file]::file-selector-button:hover{background:var(--ui-tint-2);border-color:var(--ui-accent);}
input[type=color]{-webkit-appearance:none;appearance:none;width:42px;height:34px;padding:3px;border:1px solid var(--ui-line);border-radius:9px;background:var(--ui-surface);cursor:pointer;}
input[type=color]::-webkit-color-swatch-wrapper{padding:0;}
input[type=color]::-webkit-color-swatch{border:0;border-radius:6px;}
input[type=color]::-moz-color-swatch{border:0;border-radius:6px;}
/* text fields: soft focus ring instead of the browser outline */
.f-field input:focus,.f-field textarea:focus,.toolbar input[type=search]:focus,.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--ui-hi,var(--ui-accent));box-shadow:0 0 0 3px var(--ui-focus);
}
textarea{scrollbar-width:thin;}
::selection{background:color-mix(in srgb,var(--ui-accent) 28%,transparent);}

/* ---------- 6. Calendar popover ---------- */
.sw-cal-ico{flex:none;width:16px;height:16px;stroke:var(--ui-soft);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.sw-sel.open .sw-cal-ico{stroke:var(--ui-hi);}
.sw-cal-pop{padding:12px;width:292px;min-width:292px;}
.sw-cal-head{display:flex;align-items:center;gap:2px;margin-bottom:8px;}
.sw-cal-title{flex:1;text-align:center;font-weight:700;font-size:.9rem;font-family:var(--ff-head,inherit);}
.sw-cal-nav{display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:var(--ui-soft);cursor:pointer;font:700 1rem/1 inherit;transition:background .12s,color .12s;}
.sw-cal-nav:hover{background:var(--ui-tint-2);color:var(--ui-ink);}
.sw-cal-nav svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.sw-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.sw-cal-dow{text-align:center;font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ui-soft);padding:6px 0;}
.sw-cal-day{aspect-ratio:1;border:0;border-radius:9px;background:transparent;color:var(--ui-ink);font:500 .84rem/1 inherit;cursor:pointer;transition:background .1s,color .1s;position:relative;}
.sw-cal-day:hover:not(:disabled){background:var(--ui-tint-2);}
.sw-cal-day.out{color:var(--ui-soft);opacity:.5;}
.sw-cal-day.act:not(.sel){box-shadow:inset 0 0 0 2px var(--ui-focus);}
.sw-cal-day.today:not(.sel){color:var(--ui-hi);font-weight:800;}
.sw-cal-day.today:not(.sel)::after{content:"";position:absolute;left:50%;bottom:5px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--ui-hi);}
.sw-cal-day.sel{background:var(--ui-accent);color:#fff;font-weight:800;}
[data-theme="dark"] .sw-cal-day.sel{background:#6d63c9;}
.sw-cal-day:disabled{opacity:.28;cursor:not-allowed;}
.sw-cal-foot{display:flex;justify-content:space-between;margin-top:10px;padding-top:10px;border-top:1px solid var(--ui-line);}
.sw-cal-foot button{border:0;background:transparent;color:var(--ui-hi);font:700 .82rem inherit;padding:6px 10px;border-radius:8px;cursor:pointer;}
.sw-cal-foot button:hover:not(:disabled){background:var(--ui-tint-2);}
.sw-cal-foot button:disabled{color:var(--ui-soft);opacity:.5;cursor:not-allowed;}
@media (max-width:560px){.sw-cal-pop.sheet{width:auto;min-width:0;}.sw-cal-pop.sheet .sw-cal-day{font-size:.95rem;}}

/* dark: the brand accent is near-black indigo, lift hover fills so they stay visible */
[data-theme="dark"] .sw-tabarrow:hover span{background:#4a43b8;border-color:#8f84e8;color:#fff;}