/* =========================
   GLOBAL THEME TOGGLE
   file: assets/css/theme-toggle.css
========================= */

.theme-toggle{
  position: relative;
  width: 64px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;

  transition: background .3s ease, border .3s ease, transform .2s ease;
}

.theme-toggle:hover{
  transform: translateY(-1px);
}

.theme-toggle .icon{
  font-size: 14px;
  z-index: 2;
  transition: opacity .25s ease, transform .25s ease;
}

.theme-toggle .knob{
  position: absolute;
  top: 3px;
  left: 3px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffffff, #dfe9f3);
  box-shadow: 0 8px 18px rgba(0,0,0,0.22);
  transition: transform .35s ease, background .35s ease;
  z-index: 1;
}

/* ===== Light icons behavior ===== */
html:not([data-theme="dark"]) .theme-toggle .sun{
  opacity: 1;
}
html:not([data-theme="dark"]) .theme-toggle .moon{
  opacity: 0.35;
  transform: scale(0.9);
}

/* ===== Dark Theme (match TEAM dark glass) ===== */
html[data-theme="dark"] .theme-toggle{
  background: rgba(255,255,255,0.10);
  border-color: rgba(0,153,204,0.45);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

html[data-theme="dark"] .theme-toggle .knob{
  transform: translateX(30px);
  background: linear-gradient(135deg, #0099cc, #00629b);
  box-shadow: 0 10px 22px rgba(0,153,204,0.18);
}

html[data-theme="dark"] .theme-toggle .sun{
  opacity: 0.35;
  transform: scale(0.9);
}
html[data-theme="dark"] .theme-toggle .moon{
  opacity: 1;
}

/* ===== Optional: sizes ===== */
.theme-toggle.sm{
  width: 56px;
  height: 30px;
}
.theme-toggle.sm .knob{
  width: 24px;
  height: 24px;
}
html[data-theme="dark"] .theme-toggle.sm .knob{
  transform: translateX(26px);
}



.theme-toggle.neumorphic {
  background: linear-gradient(145deg, #f0f0f0, #cacaca);
  box-shadow: 
    8px 8px 16px rgba(0,0,0,0.15),
    -8px -8px 16px rgba(255,255,255,0.7);
  border: none;
}

.theme-toggle.neumorphic:active {
  box-shadow: 
    inset 4px 4px 8px rgba(0,0,0,0.15),
    inset -4px -4px 8px rgba(255,255,255,0.5);
}

html[data-theme="dark"] .theme-toggle.neumorphic {
  background: linear-gradient(145deg, #1a1a2e, #0f0f1e);
  box-shadow: 
    8px 8px 16px rgba(0,0,0,0.4),
    -8px -8px 16px rgba(40,40,60,0.3);
}