/* =========================================================
   Three Stars Theme — AVATAR GLASS (Bright + Wow) v4.2
   CLICK-SAFE DROP-IN
   - NO decorative ::before/::after overlays anywhere
   - NO global pointer-events hacks
   - Dropdowns forced clickable + on top
   - Keeps Avatar glass look using shadows + borders only
   ========================================================= */

/* -----------------------------
   0) Core tokens
   ----------------------------- */
:root{
  --g1:#4f7cff;
  --g2:#29c4a9;
  --primary: var(--g1);
  --primary2: var(--g2);

  --bg0:#f8fbff;
  --bg1:#f3f7ff;

  --glass: rgba(255,255,255,.78);
  --glass2: rgba(255,255,255,.92);

  --text:#071020;
  --muted:#475569;

  --b1: rgba(15,23,42,.10);
  --b2: rgba(15,23,42,.14);

  --shadow: 0 18px 55px rgba(15,23,42,.14);
  --shadowHover: 0 22px 64px rgba(15,23,42,.16);

  --ring: color-mix(in srgb, var(--g1) 32%, transparent);
  --glow1: color-mix(in srgb, var(--g1) 22%, transparent);
  --glow2: color-mix(in srgb, var(--g2) 20%, transparent);

  --radius: 22px;
}

/* -----------------------------
   1) Desk background
   ----------------------------- */
body:not(.web){
  background:
    radial-gradient(1200px 680px at 16% -12%, color-mix(in srgb, var(--g1) 18%, transparent), transparent 62%),
    radial-gradient(1200px 680px at 84% -10%, color-mix(in srgb, var(--g2) 16%, transparent), transparent 62%),
    radial-gradient(820px 420px at 50% 10%,  color-mix(in srgb, var(--g1) 10%, transparent), transparent 66%),
    linear-gradient(180deg, var(--bg0), var(--bg1)) !important;

  color: var(--text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* -----------------------------
   2) Reduce motion
   ----------------------------- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}
html.ts-reduce-motion *{
  transition:none !important;
  animation:none !important;
  transform:none !important;
  scroll-behavior:auto !important;
}

/* -----------------------------
   3) Navbar (glass)
   ----------------------------- */
body:not(.web) .navbar{
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--g1) 12%, rgba(255,255,255,.72)),
      color-mix(in srgb, var(--g2) 10%, rgba(255,255,255,.72))
    ) !important;
  border-bottom: 1px solid var(--b1) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);

  /* IMPORTANT: keep navbar on top of page stacking */
  position: sticky !important;
  top: 0 !important;
  z-index: 2000 !important;
}

body:not(.web) .navbar,
body:not(.web) .navbar a,
body:not(.web) .navbar .nav-link,
body:not(.web) .navbar .navbar-brand{
  color: var(--text) !important;
}

/* Navbar search */
body:not(.web) .navbar .search-bar .form-control{
  background: rgba(255,255,255,.82) !important;
  border: 1px solid var(--b2) !important;
  color: var(--text) !important;
  border-radius: 999px !important;
}
body:not(.web) .navbar .search-bar .form-control:focus{
  box-shadow: 0 0 0 3px var(--ring) !important;
  border-color: color-mix(in srgb, var(--g2) 45%, rgba(15,23,42,.14)) !important;
}

/* -----------------------------
   4) Cards / widgets (glass + neon via borders/shadows ONLY)
   ----------------------------- */
body:not(.web) :is(
  .page-card,
  .layout-main-section,
  .layout-main-section-wrapper,
  .widget,
  .widget-box,
  .widget.widget-shadow,
  .workspace .widget-box,
  .workspace .widget,
  .desk-page .widget,
  .frappe-card,
  .dashboard-card,
  .number-card,
  .dashboard .chart-container
){
  position: relative !important;
  border-radius: var(--radius) !important;

  background: linear-gradient(180deg, var(--glass), var(--glass2)) !important;

  /* Neon-ish edge WITHOUT ::before */
  border: 1px solid rgba(125,211,252,.22) !important;
  outline: 1px solid rgba(79,124,255,.14) !important;
  outline-offset: 0px !important;

  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);

  box-shadow: var(--shadow), 0 1px 0 rgba(255,255,255,.65) inset !important;
}

body:not(.web) :is(
  .page-card,
  .widget,
  .widget-box,
  .workspace .widget-box,
  .workspace .widget,
  .desk-page .widget
):hover{
  box-shadow:
    var(--shadowHover),
    0 1px 0 rgba(255,255,255,.65) inset,
    0 0 28px var(--glow1),
    0 0 38px var(--glow2) !important;
}

/* Headings */
body:not(.web) :is(.workspace, .desk-page) :is(h3, .widget-title, .section-title){
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  color: #071020 !important;
}

/* Muted text */
body:not(.web) .text-muted,
body:not(.web) .text-secondary,
body:not(.web) .help,
body:not(.web) .form-text{
  color: var(--muted) !important;
}

/* -----------------------------
   5) Sidebar
   ----------------------------- */
body:not(.web) :is(.standard-sidebar, .desk-sidebar, .workspace-sidebar){
  background: rgba(255,255,255,.54) !important;
  border-right: 1px solid rgba(15,23,42,.08) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

/* Sidebar pills */
body:not(.web) :is(
  .standard-sidebar .standard-sidebar-item > a,
  .desk-sidebar .desk-sidebar-item > a,
  .workspace-sidebar .sidebar-item > a,
  .workspace-sidebar .sidebar-item .item-anchor
){
  display:flex !important;
  align-items:center !important;
  gap:.55rem !important;

  padding:.54rem .90rem !important;
  margin:.18rem .35rem !important;

  border-radius: 999px !important;
  background: color-mix(in srgb, var(--g1) 10%, rgba(255,255,255,.84)) !important;
  border: 1px solid color-mix(in srgb, var(--g1) 18%, rgba(15,23,42,.10)) !important;

  color: var(--text) !important;
  text-decoration:none !important;

  transform:none !important;
  transition: background .14s ease, color .14s ease, box-shadow .14s ease, border-color .14s ease !important;

  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

body:not(.web) :is(
  .standard-sidebar .standard-sidebar-item > a:hover,
  .desk-sidebar .desk-sidebar-item > a:hover,
  .workspace-sidebar .sidebar-item > a:hover,
  .workspace-sidebar .sidebar-item .item-anchor:hover
){
  background: color-mix(in srgb, var(--g2) 14%, rgba(255,255,255,.88)) !important;
  border-color: color-mix(in srgb, var(--g2) 22%, rgba(15,23,42,.10)) !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.10) !important;
}

body:not(.web) :is(
  .standard-sidebar .standard-sidebar-item.active > a,
  .desk-sidebar .desk-sidebar-item.active > a,
  .workspace-sidebar .sidebar-item.active > a
){
  background: linear-gradient(135deg, var(--g1), var(--g2)) !important;
  color:#fff !important;
  border-color: transparent !important;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--g1) 22%, transparent) !important;
}

/* -----------------------------
   6) Buttons
   ----------------------------- */
body:not(.web) .btn-primary,
body:not(.web) .btn.btn-primary{
  background: linear-gradient(135deg, var(--g1), var(--g2)) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--g1) 20%, transparent) !important;
  border-radius: 12px !important;
}

/* -----------------------------
   7) Dropdowns (CLICK FIX)
   This fixes: Logout / Switch to Desk not clickable
   ----------------------------- */

/* Ensure dropdown is always above everything */
.dropdown-menu{
  z-index: 999999 !important;
  pointer-events: auto !important;
}

/* Ensure all dropdown contents receive clicks */
.dropdown-menu *,
.navbar .dropdown-menu *,
.navbar .dropdown-menu a,
.navbar .dropdown-menu button{
  pointer-events: auto !important;
}

/* Prevent clipping by any navbar/container parent */
.navbar,
.navbar .container,
.navbar .container-fluid,
header,
header *{
  overflow: visible !important;
}

/* Popovers / awesomplete also above */
body:not(.web) :is(.popover, .awesomplete > ul, .select2-dropdown){
  z-index: 999999 !important;
}

/* -----------------------------
   8) Forms
   ----------------------------- */
body:not(.web) :is(.form-control, .input-with-feedback, .awesomplete input){
  border-radius: 12px !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  background: rgba(255,255,255,.88) !important;
  color: var(--text) !important;
}
body:not(.web) :is(.form-control:focus, .input-with-feedback:focus){
  box-shadow: 0 0 0 3px var(--ring) !important;
  border-color: color-mix(in srgb, var(--g2) 45%, rgba(15,23,42,.14)) !important;
}

/* -----------------------------
   9) Website (safe)
   ----------------------------- */
body.web{ background:#ffffff; color:#111827; }
body.web a{ color: var(--primary); }
body.web a:hover{ color: var(--primary2); text-decoration:none; }

/* -----------------------------
   10) Focus + selection
   ----------------------------- */
body:not(.web) :is(a, button, .btn, input, .form-control, .dropdown-item):focus-visible{
  outline: 2px solid color-mix(in srgb, var(--g1) 55%, #ffffff) !important;
  outline-offset: 2px !important;
}
::selection{ background: color-mix(in srgb, var(--g1) 25%, transparent); color: var(--text); }

/* =========================================================
   FIX: Radio/Checkbox checked state not visible (Desk)
   - Restores native appearance + sets accent color
   ========================================================= */

body:not(.web) input[type="radio"],
body:not(.web) input[type="checkbox"],
body:not(.web) .form-check-input {
  -webkit-appearance: auto !important;
  appearance: auto !important;
  accent-color: var(--g1) !important;

  opacity: 1 !important;
  filter: none !important;
  background: initial !important;
  box-shadow: none !important;
}

/* Bootstrap/Frappe sometimes uses .form-check-input visuals */
body:not(.web) .form-check-input:checked {
  background-color: initial !important;
  border-color: initial !important;
}

/* If any parent is killing clicks */
body:not(.web) .form-check,
body:not(.web) .form-check-label,
body:not(.web) .form-check-input {
  pointer-events: auto !important;
}