/* ============================================================
   CVN OS — Desktop: ikon aplikasi, widget, jendela, taskbar, start menu
   Semua warna lewat token (tokens.css). Logika di js/desktop.js.
   ============================================================ */

/* ---------- Desktop ---------- */
.desktop {
  position: fixed;
  inset: 0 0 var(--taskbar-h) 0;
  z-index: var(--z-desktop);
  display: flex;
  gap: var(--sp-6);
  padding: var(--sp-6);
}
.desktop > .ribbon {
  position: absolute;
  top: var(--sp-4); left: 50%;
  transform: translateX(-50%);
  width: min(720px, calc(100% - var(--sp-8)));
  margin: 0;
  z-index: 2;
}

/* Ikon mengalir dari kiri atas ke bawah, lalu ke kolom berikutnya —
   seperti desktop Windows. */
.desktop__icons {
  flex: 1;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(auto-fill, 128px);
  grid-auto-columns: 104px;
  gap: var(--sp-2);
  align-content: start;
  padding-top: var(--sp-12);
}

.dicon {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-1);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  color: var(--ink-bright);
  text-align: center;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.dicon:hover, .dicon:focus-visible {
  background: var(--glass-ctrl);
  border-color: var(--glass-ctrl-line);
}
.dicon:active .appicon { transform: scale(0.95); }
.dicon__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.25;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
:root[data-theme='light'] .dicon__label { text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8); }
.dicon__soon, .sapp__soon {
  position: absolute;
  top: 6px; right: 10px;
  padding: 0 6px;
  border-radius: var(--r-full);
  font-size: 9px; font-weight: var(--fw-bold);
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-bright);
  background: var(--bg-surface);
  border: 1px solid var(--line-soft);
}
.dicon.is-soon .appicon, .sapp.is-soon .appicon { filter: saturate(0.35); opacity: 0.6; }
.dicon.is-soon .dicon__label { opacity: 0.75; }

/* Ikon aplikasi — kotak bergradien dengan kilau atas. */
.appicon {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--tone);
  color: #fff;
  box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.6), var(--hi-on-color);
  transition: transform var(--dur-fast) var(--ease-out);
}
.appicon svg { width: 26px; height: 26px; stroke-width: 1.8; }
.appicon--sm { width: 32px; height: 32px; border-radius: 10px; }
.appicon--sm svg { width: 18px; height: 18px; }

/* ---------- Widget desktop ---------- */
.dwidget {
  align-self: flex-start;
  width: 300px;
  margin-top: var(--sp-12);
  padding: var(--sp-5);
  border-radius: var(--r-xl);
  background: var(--glass-card);
  border: 1px solid var(--glass-card-line);
  box-shadow: var(--shadow-card), var(--edge-hi);
  backdrop-filter: var(--glass-card-blur);
  -webkit-backdrop-filter: var(--glass-card-blur);
}
.dwidget__time {
  font-family: var(--font-display);
  font-size: 3rem; font-weight: var(--fw-heavy);
  letter-spacing: var(--track-tighter);
  line-height: 1;
  color: var(--ink-bright);
  font-variant-numeric: tabular-nums;
}
.dwidget__date { margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--ink-muted); text-transform: capitalize; }
.dwidget__hello { margin: var(--sp-4) 0 var(--sp-3); font-size: var(--fs-base); color: var(--ink-body); }
.dwidget__hello strong { color: var(--ink-bright); }
.dwidget__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.dstat {
  display: grid; gap: 2px;
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--glass-inset);
  border: 1px solid var(--line-hair);
}
.dstat b { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-heavy); color: var(--ink-bright); line-height: 1; }
.dstat span { font-size: var(--fs-2xs); color: var(--ink-muted); }

/*
   Kaca jendela TANPA backdrop-filter.
   backdrop-filter di jendela sebesar layar membuat browser memburamkan ulang
   latarnya setiap frame selama isi jendela digulir — terukur turun ke ±36 fps
   di CPU lambat. Gantinya: salinan wallpaper (--wp-layer dari
   js/appearance.js) diburamkan SEKALI lewat filter di lapisan sendiri, lalu
   ditutup warna kaca. Hasilnya terlihat sama, gulirnya kembali 60 fps.
*/
.win::before {
  content: '';
  position: absolute;
  inset: -60px;
  z-index: -2;
  background: var(--wp-layer, var(--wp-aurora));
  background-attachment: fixed;
  filter: blur(32px) saturate(140%);
  pointer-events: none;
}
.win::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--glass-win);
  pointer-events: none;
}

/* Jendela maximize menutupi desktop sepenuhnya — isi desktop tidak perlu
   ikut digambar (dan diburamkan) di belakangnya. */
body.win-max .desktop { visibility: hidden; }

/* ---------- Jendela ---------- */
.win {
  position: fixed;
  z-index: var(--z-window);
  left: 4vw; top: 3vh;
  width: 92vw;
  height: calc(100dvh - var(--taskbar-h) - 6vh);
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl);
  border: 1px solid var(--glass-win-line);
  box-shadow: var(--shadow-lg), var(--edge-hi);
  overflow: hidden;
  isolation: isolate;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out),
              border-radius var(--dur-base);
}
.win[data-state='max'] {
  left: 0 !important; top: 0 !important;
  width: 100vw;
  height: calc(100dvh - var(--taskbar-h));
  border-radius: 0;
  border-width: 0 0 1px 0;
}
.win[data-state='closed'] { display: none; }
/* Diminimize: mengecil ke arah taskbar lalu hilang. Jendela tetap ada di
   DOM supaya isinya (halaman yang sedang dibuka, isian form) tidak hilang. */
.win.is-min {
  opacity: 0;
  transform: translateY(40vh) scale(0.6);
  pointer-events: none;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out),
              visibility 0s linear var(--dur-base);
}
.win.is-dragging { transition: none; user-select: none; }

.win__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: var(--win-bar-h);
  padding: 0 0 0 var(--sp-3);
  flex-shrink: 0;
  border-bottom: 1px solid var(--line-hair);
  cursor: default;
  user-select: none;
}
.win[data-state='normal'] .win__bar { cursor: grab; }
.win.is-dragging .win__bar { cursor: grabbing; }
.win__icon {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 7px;
  background: var(--tone);
  color: #fff;
}
.win__icon svg { width: 13px; height: 13px; }
.win__title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-bright); white-space: nowrap; }
.win__sub { font-size: var(--fs-xs); color: var(--ink-faint); white-space: nowrap; }
.win__ctrls { margin-left: auto; display: flex; height: 100%; }
.win__ctrls button {
  display: grid; place-items: center;
  width: 46px; height: 100%;
  color: var(--ink-muted);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.win__ctrls button:hover { background: var(--bg-overlay); color: var(--ink-bright); }
.win__ctrls button.is-close:hover { background: var(--danger); color: #fff; }
.win__ctrls svg { width: 16px; height: 16px; }

.win__body { position: relative; flex: 1; min-height: 0; }

/* Jendela aplikasi yang belum dilebur: isinya halaman utuh di iframe.
   Latarnya padat karena halaman di dalamnya punya warna sendiri. */
.win__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--bg-surface);
}
/* Selama jendela digeser, iframe tidak boleh menelan gerakan pointer. */
body.is-dragging-win .win__frame { pointer-events: none; }

.taskbar__running { display: contents; }

/* ---------- Taskbar ---------- */
.taskbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-taskbar);
  height: var(--taskbar-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--sp-3);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--glass-card-line);
  box-shadow: var(--edge-hi);
}
.taskbar__left { display: flex; align-items: center; }
.taskbar__brand { font-family: var(--font-display); font-weight: var(--fw-heavy); color: var(--ink-bright); letter-spacing: 0.02em; }
.taskbar__brand small { margin-left: 3px; font-size: 10px; font-weight: var(--fw-semibold); color: var(--ink-muted); }
.taskbar__center { display: flex; align-items: center; gap: var(--sp-1); }
.taskbar__right { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-1); }

.tbbtn {
  position: relative;
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--r-md);
  color: var(--ink-body);
  transition: background var(--dur-fast);
}
.tbbtn:hover, .tbbtn.is-active { background: var(--glass-ctrl); }
.tbbtn svg { width: 19px; height: 19px; }
.tbbtn--start svg { width: 21px; height: 21px; color: var(--accent); }
.tbbtn--app { width: 46px; }
/* Penanda aplikasi berjalan (titik) dan yang sedang tampil (garis). */
.tbbtn__dot {
  position: absolute;
  bottom: 3px; left: 50%;
  width: 5px; height: 3px;
  border-radius: var(--r-full);
  background: var(--ink-faint);
  transform: translateX(-50%);
  opacity: 0;
  transition: width var(--dur-base) var(--ease-out), background var(--dur-fast), opacity var(--dur-fast);
}
.tbbtn--app.is-running .tbbtn__dot { opacity: 1; }
.tbbtn--app.is-active .tbbtn__dot { width: 16px; background: var(--accent); }

.taskbar__clock {
  display: grid;
  justify-items: end;
  padding: 0 var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--ink-bright);
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.taskbar__clock small { font-size: var(--fs-2xs); font-weight: var(--fw-normal); color: var(--ink-muted); }

/* ---------- Start menu ---------- */
.startmenu {
  position: fixed;
  left: 50%; bottom: calc(var(--taskbar-h) + var(--sp-3));
  z-index: var(--z-startmenu);
  width: min(560px, calc(100vw - var(--sp-6)));
  transform: translateX(-50%);
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--r-xl);
  background: var(--bg-surface);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-lg), var(--edge-hi);
  animation: startIn var(--dur-base) var(--ease-out);
}
@keyframes startIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.startmenu__search { max-width: none; }
.startmenu__label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--ink-muted); letter-spacing: var(--track-wide); text-transform: uppercase; }
.startmenu__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2); }
.sapp {
  position: relative;
  display: grid; justify-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-1);
  border-radius: var(--r-md);
  text-align: center;
  transition: background var(--dur-fast);
}
.sapp:hover { background: var(--bg-overlay); }
.sapp .appicon { width: 44px; height: 44px; border-radius: 13px; }
.sapp .appicon svg { width: 21px; height: 21px; }
.sapp__label { font-size: var(--fs-xs); color: var(--ink-body); line-height: 1.2; }
.sapp__soon { top: 4px; right: 4px; }
.startmenu__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-hair);
}
.startmenu__me { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.startmenu__me .avatar { width: 38px; height: 38px; }
.startmenu__me b { display: block; font-size: var(--fs-sm); color: var(--ink-bright); }
.startmenu__me small { display: block; font-size: var(--fs-2xs); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.startmenu__acts { display: flex; gap: var(--sp-1); flex-shrink: 0; }

/* ============================================================
   Responsif
   ============================================================ */

@media (max-width: 1100px) {
  .dwidget { width: 260px; }
}

/* Tablet & HP: desktop jadi "layar utama" — ikon berbaris rapi, widget di atas. */
@media (max-width: 900px) {
  .desktop { flex-direction: column; overflow-y: auto; padding: var(--sp-5) var(--sp-4); }
  .desktop > .ribbon { position: static; transform: none; width: 100%; }
  .dwidget { width: 100%; margin-top: 0; }
  .desktop__icons {
    flex: none;
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    grid-auto-columns: auto;
    padding-top: 0;
  }
}

@media (max-width: 720px) {
  .taskbar { grid-template-columns: auto 1fr auto; }
  .taskbar__left { display: none; }
  .taskbar__center { justify-content: flex-start; }
  .taskbar__clock small { display: none; }
  .startmenu__grid { grid-template-columns: repeat(4, 1fr); }

  /* Di HP jendela selalu penuh layar; minimize = kembali ke layar utama.
     Taskbar disembunyikan selama aplikasi terbuka — aplikasinya punya
     bottom bar sendiri. */
  .win, .win[data-state='normal'], .win[data-state='max'] {
    left: 0 !important; top: 0 !important;
    width: 100vw; height: 100dvh;
    border-radius: 0; border: none;
  }
  .win [data-win='max'] { display: none; }
  .win__sub { display: none; }
  .win__bar { height: 40px; }
  body.win-open .taskbar { display: none; }
  .dicon__label { font-size: var(--fs-2xs); }
  .appicon { width: 52px; height: 52px; }
}