/* assets/css/lj-customizer.css  (FULL FILE REPLACEMENT - WITH THEME-TINTED OPTIONS)
   Fixes:
   - remove recursive --lj-radius definition (so radius can actually change)
   - make customizer itself follow theme surface/border/text tokens
   - radius tiles still preview, but also respects global --lj-radius changes
   - OPTION TILES NOW HAVE THEME-TINTED BACKGROUNDS TO MATCH FOLDER CARDS
*/

:root{
  --lj-accent: var(--bs-primary, #0d6efd);
  --lj-accent-rgb: var(--bs-primary-rgb, 13,110,253);

  /* default only (JS / theme can override with a later declaration or inline style) */
  --lj-radius: 16px;

  /* optional theme tokens (if your theme defines them) */
  --lj-surface: var(--surface, var(--card-bg, #ffffff));
  --lj-surface2: var(--surface2, rgba(255,255,255,.65));
  --lj-border: var(--border, rgba(0,0,0,.12));
  --lj-text: var(--text, #0f172a);
  --lj-muted: var(--muted, rgba(15,23,42,.55));
}

/* panel */
.lj-customizer{
  width: 420px !important;
  max-width: 92vw;
  border: 1px solid var(--lj-border) !important;
  box-shadow: 0 24px 90px rgba(2,6,23,.22);
  border-top-left-radius: calc(var(--lj-radius) + 2px);
  border-bottom-left-radius: calc(var(--lj-radius) + 2px);
  overflow: hidden;
  z-index: 2500 !important;
}
.lj-customizer .offcanvas-header{
  background: var(--bs-primary) !important;
  color: #fff !important;
  padding: 14px 16px;
}
.lj-customizer .offcanvas-title{ font-weight: 700; letter-spacing: .2px; }
.lj-customizer .btn-close{ filter: invert(1); opacity: .9; }
.lj-customizer .offcanvas-body{
  padding: 16px;
  background: var(--lj-surface);
  color: var(--lj-text);
}

/* sections */
.lj-section{ margin-bottom: 14px; }
.lj-section-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.lj-section-title,
.lj-field-label{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--lj-muted);
  margin-bottom: 6px;
}
.lj-help{ font-size: 12px; color: var(--lj-muted); line-height: 1.35; }
.lj-divider{ height: 1px; background: color-mix(in srgb, var(--lj-border) 70%, transparent); margin: 12px 0; }
.lj-pill{
  font-size: 12px;
  color: color-mix(in srgb, var(--lj-text) 75%, transparent);
  background: color-mix(in srgb, var(--lj-text) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--lj-border) 70%, transparent);
  padding: 4px 10px;
  border-radius: 999px;
}

/* switch */
.lj-switch{ position:relative; width:52px; height:30px; display:inline-block; }
.lj-switch input{ opacity:0; width:0; height:0; }
.lj-slider{
  position:absolute; inset:0;
  cursor:pointer;
  background: color-mix(in srgb, var(--lj-text) 14%, transparent);
  border-radius: 999px;
  transition:.18s ease;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lj-border) 70%, transparent);
}
.lj-slider::before{
  content:"";
  position:absolute;
  height:22px; width:22px;
  left:4px; top:4px;
  background:#fff;
  border-radius:999px;
  box-shadow: 0 10px 22px rgba(2,6,23,.18);
  transition:.18s ease;
}
.lj-switch input:checked + .lj-slider{ background: rgba(var(--lj-accent-rgb), .70); }
.lj-switch input:checked + .lj-slider::before{ transform: translateX(22px); }

/* swatches */
.lj-swatch-grid{
  display:grid;
  grid-template-columns: repeat(8, 1fr);
  gap:10px;
  margin-top:10px;
}
.lj-swatch{
  width:40px; height:40px;
  border-radius: max(0px, calc(var(--lj-radius) - 2px));
  border: 1px solid color-mix(in srgb, var(--lj-border) 70%, transparent);
  background: var(--lj-surface);
  position:relative;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: 0 10px 26px rgba(2,6,23,.08);
}
.lj-swatch::after{
  content:"";
  position:absolute;
  inset:8px;
  border-radius: max(0px, calc(var(--lj-radius) - 6px));
  background: var(--swatch, #6366f1);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}
.lj-swatch:hover{ transform: translateY(-1px); box-shadow: 0 14px 32px rgba(2,6,23,.12); }
.lj-swatch.is-active{
  border-color: rgba(var(--lj-accent-rgb), .70);
  box-shadow: 0 0 0 3px rgba(var(--lj-accent-rgb), .18), 0 14px 34px rgba(2,6,23,.14);
}

/* grids */
.lj-grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.lj-grid-3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:12px; }

/* OPTION TILES (NOW THEME-TINTED TO MATCH FOLDER CARDS) */
.lj-opt{
  appearance: none;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--lj-border) 70%, transparent);
  /* THEME-TINTED: Accent color at 10% opacity (matches folder cards) */
  background: color-mix(in srgb, var(--lj-accent) 10%, transparent);
  border-radius: max(0px, calc(var(--lj-radius) - 2px));
  padding: 10px 10px;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  box-shadow: 0 10px 26px rgba(2,6,23,.06);
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
  text-align:left;
  user-select: none;
  color: var(--lj-text);
}
.lj-opt:focus{ outline:none; }
.lj-opt:focus-visible{
  box-shadow: 0 0 0 3px rgba(var(--lj-accent-rgb), .22), 0 10px 26px rgba(2,6,23,.08);
  border-color: rgba(var(--lj-accent-rgb), .55);
}
.lj-opt:hover{
  transform: translateY(-1px);
  /* THEME-TINTED: Hover - accent color at 15% opacity (matches folder hover) */
  background: color-mix(in srgb, var(--lj-accent) 15%, transparent);
  box-shadow: 0 14px 34px rgba(2,6,23,.10);
}
.lj-opt.is-active{
  /* THEME-TINTED: Active - accent color at 20% opacity */
  background: color-mix(in srgb, var(--lj-accent) 20%, transparent);
  border-color: rgba(var(--lj-accent-rgb), .60);
  box-shadow:
    0 0 0 3px rgba(var(--lj-accent-rgb), .16),
    0 14px 34px rgba(2,6,23,.12);
}

/* thumb base */
.lj-opt-thumb{
  width: 34px;
  height: 24px;
  border-radius: max(0px, calc(var(--lj-radius) - 6px));
  /* THEME-TINTED: Accent color at 15% opacity */
  background: color-mix(in srgb, var(--lj-accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--lj-border) 70%, transparent);
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
}
.lj-opt.is-active .lj-opt-thumb{
  /* THEME-TINTED: Active thumb - accent color at 25% opacity */
  background: color-mix(in srgb, var(--lj-accent) 25%, transparent);
  border-color: rgba(var(--lj-accent-rgb), .45);
}

/* label */
.lj-opt-label{
  font-size: 13px;
  font-weight: 700;
  color: color-mix(in srgb, var(--lj-text) 88%, transparent);
}
.lj-opt.is-active .lj-opt-label{
  color: var(--lj-text);
}

/* common "inner canvas" */
.lj-opt-thumb::before{
  content:"";
  position:absolute;
  inset: 5px;
  border-radius: max(0px, calc(var(--lj-radius) - 9px));
  /* THEME-TINTED: Inner canvas - accent color at 20% opacity */
  background: color-mix(in srgb, var(--lj-accent) 20%, transparent);
}

/* LAYOUT: fluid vs boxed */
.lj-opt[data-group="layout_mode"][data-value="fluid"] .lj-opt-thumb::after{
  content:"";
  position:absolute;
  left:6px; right:6px; top:10px; height:4px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--lj-text) 25%, transparent);
}
.lj-opt[data-group="layout_mode"][data-value="boxed"] .lj-opt-thumb::after{
  content:"";
  position:absolute;
  left:10px; right:10px; top:10px; height:4px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--lj-text) 25%, transparent);
}

/* RADIUS: rounded / standard / flat (thumb corners change) */
.lj-opt[data-group="radius"][data-value="rounded"] .lj-opt-thumb::before{ border-radius: 10px; }
.lj-opt[data-group="radius"][data-value="standard"] .lj-opt-thumb::before{ border-radius: 5px; }
.lj-opt[data-group="radius"][data-value="flat"] .lj-opt-thumb::before{ border-radius: 0px; }

/* MENU PLACEMENT: horizontal vs vertical */
.lj-opt[data-group="menu_placement"][data-value="horizontal"] .lj-opt-thumb::after{
  content:"";
  position:absolute;
  left:6px; right:6px; top:6px; height:4px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--lj-text) 25%, transparent);
}
.lj-opt[data-group="menu_placement"][data-value="vertical"] .lj-opt-thumb::after{
  content:"";
  position:absolute;
  top:6px; bottom:6px; left:6px; width:4px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--lj-text) 25%, transparent);
}

/* MENU BEHAVIOUR: unpinned vs pinned */
.lj-opt[data-group="menu_behaviour"][data-value="unpinned"] .lj-opt-thumb::after{
  content:"";
  position:absolute;
  width:6px; height:6px;
  right:6px; top:6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--lj-text) 22%, transparent);
}
.lj-opt[data-group="menu_behaviour"][data-value="pinned"] .lj-opt-thumb::after{
  content:"";
  position:absolute;
  width:6px; height:6px;
  left:50%; top:50%;
  transform: translate(-50%,-50%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--lj-text) 22%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--lj-text) 10%, transparent);
}

/* make preview accents use theme color when active */
.lj-opt.is-active .lj-opt-thumb::after{
  background: rgba(var(--lj-accent-rgb), .95) !important;
}
.lj-opt.is-active[data-group="menu_behaviour"][data-value="pinned"] .lj-opt-thumb::after{
  box-shadow: 0 0 0 2px rgba(var(--lj-accent-rgb), .25) !important;
}

/* save button */
.lj-customizer .btn.btn-primary,
#lj-save-settings{
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  border-radius: var(--lj-radius) !important;
  font-weight: 700;
}
#lj-save-settings:focus-visible{
  box-shadow: 0 0 0 3px rgba(var(--lj-accent-rgb), .22) !important;
}