/* =============================================
   LumiOS — main.css (core, theme vars, base)
   ============================================= */

/* ── CSS Custom Properties (theme engine) ── */
:root {
  /* ── Color System ── */
  --accent-color:  #6366f1;
  --accent-rgb:    99, 102, 241;
  --accent-glow:   rgba(99, 102, 241, 0.4);
  
  /* ── Window System ── */
  --win-blur:      blur(30px) saturate(180%);
  --win-bg:        rgba(14, 14, 32, 0.48);
  --win-border:    rgba(255, 255, 255, 0.16);

  /* ── Taskbar System ── */
  --tbar-bg-rgb:   8, 8, 22;
  --tbar-opacity:  0.85;

  /* ── Glass Morphism System ── */
  --glass-blur-heavy:  blur(32px) saturate(160%);
  --glass-blur-medium: blur(24px) saturate(150%);
  --glass-blur-light:  blur(18px) saturate(140%);
  --glass-bg:          rgba(14, 14, 32, 0.92);
  --glass-bg-trans:    rgba(14, 14, 32, 0.56);
  --glass-border:      rgba(255, 255, 255, 0.12);
  --glass-border-light: rgba(255, 255, 255, 0.08);

  /* ── Spacing Scale (4px base) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ── Border Radius System ── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 999px;

  /* ── Typography System ── */
  --font-xs: 11px;
  --font-sm: 12px;
  --font-base: 13px;
  --font-md: 15px;
  --font-lg: 18px;
  --font-xl: 24px;
  --font-2xl: 32px;
  --font-hero: 72px;
  
  /* ── Font Weights ── */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  
  /* ── Letter Spacing ── */
  --tracking-tight: -0.5px;
  --tracking-normal: 0px;
  --tracking-wide: 0.3px;
  --tracking-wider: 0.5px;
  --tracking-widest: 0.7px;

  /* ── Transitions ── */
  --transition-fast: 0.15s;
  --transition-base: 0.2s;
  --transition-slow: 0.3s;
  --transition-dur: var(--transition-fast);
  
  /* ── Shadow System ── */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 72px rgba(0, 0, 0, 0.6);
  
  /* ── Opacity Scale ── */
  --opacity-disabled: 0.4;
  --opacity-secondary: 0.6;
  --opacity-tertiary: 0.75;
  --opacity-subtle: 0.35;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #000;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
}

#os {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-size: var(--font-base);
  font-weight: var(--weight-normal);
  line-height: 1.5;
  color: #fff;
  user-select: none;
}

/* ── Desktop Background ── */
#osbg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 55% at 18% 22%, rgba(90, 18, 200, 0.45), transparent),
    radial-gradient(ellipse 45% 45% at 82% 78%, rgba(18, 60, 200, 0.35), transparent),
    radial-gradient(ellipse 38% 38% at 62% 16%, rgba(200, 18, 85, 0.2),  transparent),
    linear-gradient(148deg, #050510, #0a0520 45%, #040919);
  transition: background var(--transition-dur);
}

/* ── Brightness overlay ── */
#brightness-overlay {
  position: absolute;
  inset: 0;
  background: black;
  opacity: 0;
  pointer-events: none;
  z-index: 99997;
  transition: opacity 0.4s;
}

/* ── Desktop Clock ── */
#desktop-clock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -63%);
  text-align: center;
  pointer-events: none;
}

#big-time {
  font-size: var(--font-hero);
  font-weight: 100;
  letter-spacing: var(--tracking-tight);
  opacity: 0.5;
  text-shadow: 0 0 80px rgba(140, 80, 255, 0.4);
  color: #fff;
  line-height: 1;
}

#big-date {
  font-size: var(--font-md);
  font-weight: var(--weight-normal);
  opacity: 0.3;
  letter-spacing: var(--tracking-wide);
  margin-top: var(--space-2);
  color: #fff;
}

/* ── Desktop Icons ── */
#dkicons {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 48px);
  pointer-events: none;
}

.dki {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-1);
  border-radius: var(--radius-md);
  cursor: grab;
  width: 72px;
  text-align: center;
  transition: background var(--transition-base), transform var(--transition-base);
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
}

.dki:hover { 
  background: rgba(255, 255, 255, 0.15); 
  transform: translateY(-2px);
}
.dki:active { 
  transform: scale(0.92); 
  transition: transform 0.1s ease-out;
}

.dki-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
  box-shadow: var(--shadow-md);
  transition: transform 0.32s cubic-bezier(0.34, 2.56, 0.64, 1),
              box-shadow 0.32s cubic-bezier(0.34, 2.56, 0.64, 1);
}

.dki:hover .dki-icon {
  transform: scale(1.1) translateY(-2px);
  box-shadow: var(--shadow-lg), 0 0 20px rgba(99, 102, 241, 0.3);
}

.dki:active .dki-icon {
  transition: transform 0.1s ease-out;
  transform: scale(0.92);
}

.dki-label {
  font-size: var(--font-xs);
  font-weight: var(--weight-normal);
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
  line-height: 1.2;
  transition: color var(--transition-base);
}

.dki:hover .dki-label {
  color: #fff;
}

/* ── Windows Layer ── */
#wlayer {
  position: absolute;
  inset: 0 0 48px 0;
  overflow: hidden;
  pointer-events: none;
}

/* ── Window ── */
.win {
  position: absolute;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)),
    var(--win-bg);
  border: 1px solid var(--win-border);
  box-shadow: var(--shadow-xl),
              inset 0 0 0 0.5px rgba(255, 255, 255, 0.08);
  min-width: 200px;
  min-height: 130px;
  backdrop-filter: var(--win-blur);
  -webkit-backdrop-filter: var(--win-blur);
  transition: box-shadow var(--transition-base),
              border-color var(--transition-base),
              opacity var(--transition-base);
  opacity: 0.92;
  transform-origin: center center;
  pointer-events: auto;
}


.win.foc {
  border-color: rgba(var(--accent-rgb), 0.5);
  opacity: 1;
  box-shadow:
    var(--shadow-xl),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.12),
    0 0 0 1px rgba(var(--accent-rgb), 0.15),
    0 0 40px rgba(var(--accent-rgb), 0.35);
}

/* ── Title Bar ── */
.wtb {
  height: 38px;
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  gap: var(--space-2);
  cursor: grab;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}

.wtb::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--app-gr, transparent);
  opacity: 0.15;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.wtb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 40%, var(--win-bg) 100%);
  pointer-events: none;
}

.wtb:active { cursor: grabbing; }

.wtb-meta {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding-left: var(--space-1);
  pointer-events: none;
  flex: 1;
  min-width: 0;
}

.wtb-app-icon {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wtb-title {
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: var(--tracking-normal);
}

/* ── Window Controls ── */
.wbtns { display: flex; gap: var(--space-2); flex-shrink: 0; }
.wb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: filter 0.15s, transform 0.15s;
}
.wb:hover  { filter: brightness(1.3); transform: scale(1.15); }
.wb.wbc    { background: #FF5F57; }
.wb.wbm    { background: #FFBD2E; }
.wb.wbx    { background: #28C840; }

.wc { height: calc(100% - 38px); overflow: auto; }

/* ── Resize Handles ── */
.rh { position: absolute; z-index: 5; }
.rh.e  { right: 0;  top: 6px;   bottom: 6px;  width: 5px;   cursor: ew-resize; }
.rh.w  { left: 0;   top: 6px;   bottom: 6px;  width: 5px;   cursor: ew-resize; }
.rh.s  { bottom: 0; left: 6px;  right: 6px;   height: 5px;  cursor: ns-resize; }
.rh.n  { top: 0;    left: 6px;  right: 6px;   height: 5px;  cursor: ns-resize; }
.rh.se { right: 0;  bottom: 0;  width: 12px;  height: 12px; cursor: se-resize; }
.rh.sw { left: 0;   bottom: 0;  width: 12px;  height: 12px; cursor: sw-resize; }
.rh.ne { right: 0;  top: 0;     width: 12px;  height: 12px; cursor: ne-resize; }
.rh.nw { left: 0;   top: 0;     width: 12px;  height: 12px; cursor: nw-resize; }

/* ── Taskbar ── */
#tbar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 48px;
  background: rgba(var(--tbar-bg-rgb), var(--tbar-opacity));
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  padding: 0 var(--space-2);
  gap: var(--space-1);
  z-index: 9999;
  transition: background var(--transition-base);
}

.tbar-sep {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

/* ── Pinned Dock ── */
#tb-dock {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}

.tb-dock-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all var(--transition-base);
  position: relative;
}

.tb-dock-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px) scale(1.05);
}

.tb-dock-btn:active { 
  transform: translateY(0) scale(0.9); 
  transition: transform 0.1s ease-out;
}

.tb-dock-icon {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: white;
  transition: transform var(--transition-base);
}

.tb-dock-btn:hover .tb-dock-icon {
  transform: scale(1.1);
}

/* ── Running Apps ── */
#tbapps {
  display: flex;
  gap: 4px;
  flex: 1;
  overflow: hidden;
  min-width: 0;
}

/* Taskbar search (beside Start button) */
#tbsearch {
  width: 220px;
  height: 34px;
  border-radius: var(--radius-md);
  padding: 0 var(--space-3);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255,255,255,0.9);
  outline: none;
  font-size: var(--font-sm);
  font-family: inherit;
  flex-shrink: 0;
  transition: border-color var(--transition-base), background var(--transition-base);
}
#tbsearch::placeholder { color: rgba(255,255,255,0.35); }
#tbsearch:focus {
  border-color: rgba(var(--accent-rgb), 0.5);
  background: rgba(255, 255, 255, 0.12);
}
#tbsearch::-webkit-search-cancel-button { display: none; }

.tbb {
  height: 34px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  font-size: var(--font-sm);
  font-family: inherit;
  white-space: nowrap;
  overflow: hidden;
  max-width: 130px;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: background var(--transition-base);
  position: relative;
}

.tbb:hover { background: rgba(255, 255, 255, 0.14); }

.tbb.act {
  background: rgba(var(--accent-rgb), 0.25);
  border-color: rgba(var(--accent-rgb), 0.45);
}

.tbb-icon {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tbb span { overflow: hidden; text-overflow: ellipsis; }

/* ── System Tray ── */
.tbar-tray {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: rgba(255, 255, 255, 0.75);
  flex-shrink: 0;
}

.tray-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: background var(--transition-base), color var(--transition-base);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}

.tray-btn i { font-size: 15px; }
.tray-btn:hover  { background: rgba(255, 255, 255, 0.12); }
.tray-btn.tray-active { background: rgba(var(--accent-rgb), 0.25); color: #fff; }

.tray-clock-btn {
  flex-direction: column;
  gap: 1px;
  padding: var(--space-1) var(--space-2);
  min-width: 60px;
  text-align: right;
  align-items: flex-end;
}

#tclk {
  font-size: var(--font-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-medium);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
}

.tray-date {
  font-size: var(--font-xs);
  font-weight: var(--weight-normal);
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.2;
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
}

/* ── Shared App Toolbar ── */
.app-toolbar {
  padding: var(--space-2) var(--space-3);
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
  flex-shrink: 0;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.app-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  color: white;
  cursor: pointer;
  font-size: var(--font-sm);
  font-family: inherit;
  font-weight: var(--weight-normal);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.app-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.app-btn:hover { 
  background: rgba(var(--accent-rgb), 0.3);
  border-color: rgba(var(--accent-rgb), 0.5);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.app-btn:hover::before {
  opacity: 1;
}

.app-btn:active { 
  transform: translateY(0) scale(0.95);
  transition: transform 0.1s ease-out;
}

.app-toolbar-sep { 
  width: 1px; 
  height: 16px; 
  background: rgba(255,255,255,0.12);
  margin: 0 var(--space-1);
}

/* ── Particle canvas ── */
#particle-canvas { image-rendering: pixelated; }

/* ── Wallpaper Picker ── */
.wp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
}

.wp-swatch {
  position: relative;
  height: 54px;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.15s, transform 0.12s;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.wp-swatch:hover { transform: scale(1.04); border-color: rgba(255,255,255,0.3); }
.wp-active       { border-color: white !important; }

.wp-label {
  font-size: 9px;
  color: rgba(255,255,255,0.8);
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  padding-bottom: 4px;
  letter-spacing: 0.3px;
  pointer-events: none;
}

.wp-upload {
  background: rgba(255,255,255,0.05);
  border: 2px dashed rgba(255,255,255,0.15);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: white;
}

.wp-upload:hover { border-color: rgba(255,255,255,0.35); background: rgba(255,255,255,0.08); }

/* ── Open-app dot indicator ── */
.tb-dock-btn::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  transition: transform 0.2s cubic-bezier(0.34, 1.3, 0.64, 1),
              background 0.2s,
              width 0.2s cubic-bezier(0.34, 1.3, 0.64, 1);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
}

.tb-dock-btn.open::after { transform: translateX(-50%) scaleX(1); }
.tb-dock-btn.open.focused::after { 
  width: 6px; 
  background: var(--accent-color);
  box-shadow: 0 0 8px var(--accent-glow);
}

.tbb.tba::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 4px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.6);
  transition: transform 0.2s cubic-bezier(0.34, 1.3, 0.64, 1),
              background 0.2s,
              width 0.2s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.tbb.tba::after { transform: translateX(-50%) scaleX(1); }
.tbb.tba.act::after { 
  width: 6px; 
  background: var(--accent-color);
  box-shadow: 0 0 8px var(--accent-glow);
}

/* ── Window animations ── */
@keyframes win-open {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes win-close {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.92); }
}
@keyframes win-minimize {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to   { opacity: 0; transform: scale(0.88) translateY(20px); }
}
@keyframes win-unminimize {
  from { opacity: 0; transform: scale(0.88) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes popupIn {
  from { opacity: 0; transform: translateY(6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)  scale(1);     }
}

.win-entering  { animation: win-open      180ms cubic-bezier(0.34, 1.2, 0.64, 1) forwards; }
.win-closing   { animation: win-close     140ms cubic-bezier(0.4, 0, 1, 1)        forwards; }
.win-minimizing { animation: win-minimize 160ms cubic-bezier(0.4, 0, 1, 1)        forwards; }
.win-restoring  { animation: win-unminimize 180ms cubic-bezier(0.34, 1.2, 0.64, 1) forwards; }

/* ── Maximize / Unmaximize animations (transform-based) ──
   Uses CSS vars set by JS:
   --mx: translateX (px)
   --my: translateY (px)
   --ms: scale (unitless)
*/
@keyframes win-maximizing {
  from { opacity: 1; transform: translate(var(--mx), var(--my)) scale(var(--ms)); }
  to   { opacity: 1; transform: translate(0px, 0px) scale(1); }
}
@keyframes win-unmaximizing {
  from { opacity: 1; transform: translate(0px, 0px) scale(1); }
  to   { opacity: 0.92; transform: translate(var(--mx), var(--my)) scale(var(--ms)); }
}

.win-maximizing  { animation: win-maximizing 190ms cubic-bezier(0.18, 0.9, 0.2, 1) forwards; }
.win-unmaximizing{ animation: win-unmaximizing 170ms cubic-bezier(0.2, 0, 0.2, 1) forwards; }

@media (prefers-reduced-motion: reduce) {
  .win-maximizing, .win-unmaximizing,
  .win-entering, .win-closing, .win-minimizing, .win-restoring {
    animation: none;
  }
}

/* ── No Transparency ── */
#os.no-transparency .win {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(18, 18, 38, 0.97) !important;
}
#os.no-transparency #tbar {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(6, 6, 18, 0.98) !important;
}
#os.no-transparency #smenu,
#os.no-transparency #volume-popup,
#os.no-transparency #battery-popup,
#os.no-transparency #calendar-popup,
#os.no-transparency #notif {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(12, 12, 30, 0.99) !important;
}