/* Kerangka "Floating Workspace": sidebar dan area kerja melayang di atas latar aurora,
   header halaman besar, tab segmented, spotlight kartu, dan kilau tombol.
   Efek gerak yang dikendalikan JS ada di js/shell.js. Ukuran diatur lewat variabel di bawah. */

:root {
  --side-w: 236px;
  --shell-gap: 12px;
  --shell-radius: 22px;
  --canvas: #e6ebe1;
  --aurora-1: #c4d98266;
  --aurora-2: #8fbf9a40;
}

:root[data-theme='dark'] {
  --canvas: #060c09;
  --aurora-1: #c4d9821f;
  --aurora-2: #3f8f6a26;
}

:root.ws-collapsed {
  --side-w: 76px;
}

/* ---- Latar aurora ---- */
body {
  background: var(--canvas);
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 85% -10%, var(--aurora-1), transparent 70%),
    radial-gradient(45% 40% at 20% 0%, var(--aurora-2), transparent 70%);
}

/* ---- Tata letak mengambang (layar ≥ 761px) ---- */
@media (min-width: 761px) {
  .sidebar {
    inset: var(--shell-gap) auto var(--shell-gap) var(--shell-gap);
    width: var(--side-w);
    border-radius: var(--shell-radius);
    padding: 22px 14px 16px;
    box-shadow: var(--shadow-md);
    transition: width 360ms var(--ease-out);
  }

  .app {
    position: fixed;
    inset: var(--shell-gap) var(--shell-gap) var(--shell-gap) calc(var(--side-w) + var(--shell-gap) * 2);
    margin: 0;
    overflow: auto;
    overscroll-behavior: contain;
    background: var(--bg);
    border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
    border-radius: var(--shell-radius);
    box-shadow: var(--shadow-sm);
    transition: left 360ms var(--ease-out);
  }

  .topbar {
    border-radius: var(--shell-radius) var(--shell-radius) 0 0;
  }
}

@media (min-width: 761px) and (max-width: 1150px) {
  :root:not(.ws-collapsed) {
    --side-w: 214px;
  }
}

@media print {
  .app {
    position: static;
    overflow: visible;
    border: 0;
    box-shadow: none;
  }

  body::before {
    display: none;
  }
}

/* ---- Topbar mengecil saat di-scroll ---- */
.topbar {
  transition:
    height 260ms var(--ease-out),
    box-shadow 260ms,
    background-color 260ms;
}

.topbar.is-scrolled {
  height: 62px;
  box-shadow: 0 8px 24px -16px #1b382140;
}

/* ---- Sidebar ---- */
.sidebar nav {
  position: relative;
}

.sidebar nav button {
  position: relative;
  z-index: 1;
  gap: 12px;
  min-height: 42px;
}

.nav-indicator {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 0;
  border-radius: 12px;
  background: var(--lime);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--lime) 35%, transparent);
  pointer-events: none;
}

.nav-indicator.is-moving {
  transition:
    transform 420ms var(--ease-out),
    height 420ms var(--ease-out);
}

.sidebar nav.has-indicator button.active {
  background: transparent;
  box-shadow: none;
}

.side-collapse {
  width: 100%;
  justify-content: flex-start;
  gap: 12px;
  color: #8da58f;
  font-size: 11px;
  margin-top: 8px;
  padding: 9px 13px;
  min-height: 38px;
}

.side-collapse:hover {
  color: white;
  background: #ffffff0d;
}

.side-collapse .icon {
  transition: transform 360ms var(--ease-out);
}

:root.ws-collapsed .side-collapse .icon {
  transform: rotate(180deg);
}

/* Sidebar ciut: hanya ikon. */
:root.ws-collapsed .sidebar .brand-stack,
:root.ws-collapsed .sidebar .workspace > div,
:root.ws-collapsed .sidebar .nav-label,
:root.ws-collapsed .sidebar .nav-text,
:root.ws-collapsed .sidebar .side-collapse span,
:root.ws-collapsed .sidebar footer .grow,
:root.ws-collapsed .sidebar footer button {
  display: none;
}

:root.ws-collapsed .sidebar > .flex,
:root.ws-collapsed .sidebar .workspace,
:root.ws-collapsed .sidebar footer .flex {
  justify-content: center;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

:root.ws-collapsed .sidebar .workspace {
  border-color: transparent;
}

:root.ws-collapsed .sidebar nav button,
:root.ws-collapsed .side-collapse {
  justify-content: center;
  padding: 11px 0;
}

@media (max-width: 760px) {
  .side-collapse {
    display: none;
  }

  .bottom-nav button {
    background: transparent;
    box-shadow: none;
  }
}

/* ---- Header halaman ---- */
#main .page-head {
  margin-bottom: 22px;
}

#main .page-head h1 {
  font-size: clamp(30px, 2.6vw, 42px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 6px 0 8px;
}

#main .page-head .eyebrow {
  letter-spacing: 0.16em;
}

/* ---- Tab segmented ---- */
#main .tabs {
  position: relative;
  display: flex;
  width: fit-content;
  max-width: 100%;
  gap: 2px;
  padding: 4px;
  margin-bottom: 18px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  scrollbar-width: none;
}

#main .tabs::-webkit-scrollbar {
  display: none;
}

#main .tabs button {
  position: relative;
  z-index: 1;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 999px;
  min-height: 34px;
  padding: 6px 16px;
  color: var(--muted);
  font-weight: 600;
}

#main .tabs button:hover {
  color: var(--ink);
}

#main .tabs button.active {
  color: var(--ink);
  background: transparent;
}

#main .tabs:not(.has-indicator) button.active {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.tab-indicator {
  position: absolute;
  top: 4px;
  left: 0;
  bottom: 4px;
  z-index: 0;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--line);
  pointer-events: none;
}

:root[data-theme='dark'] .tab-indicator {
  background: color-mix(in srgb, var(--lime) 22%, var(--surface));
}

.tab-indicator.is-moving {
  transition:
    transform 380ms var(--ease-out),
    width 380ms var(--ease-out);
}

/* ---- Spotlight: cahaya lembut mengikuti kursor di kartu ---- */
.panel,
.metric,
.project-card {
  position: relative;
}

.panel::after,
.metric::after,
.project-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--lime) 16%, transparent),
    transparent 45%
  );
}

.panel.is-spot::after,
.metric.is-spot::after,
.project-card.is-spot::after {
  opacity: 1;
}

.panel.is-spot {
  border-color: color-mix(in srgb, var(--lime) 45%, var(--line));
}

.panel {
  transition: border-color 300ms;
}

/* ---- Kilau di tombol utama ---- */
button.primary {
  overflow: hidden;
  isolation: isolate;
}

/* Tombol melayang (Tambah Project dll.) sudah position: fixed; jangan ditimpa. */
button.primary:not(.project-add-fab):not(.workspace-add-fab) {
  position: relative;
}

button.primary::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, #ffffff70 50%, transparent 70%);
  transform: translateX(-130%);
}

button.primary:hover::after {
  transform: translateX(130%);
  transition: transform 850ms var(--ease-out);
}

/* ---- Notifikasi dengan garis waktu ---- */
#toast {
  overflow: hidden;
}

#toast.ws-toast::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--lime);
  transform-origin: left;
  animation: wsx-shrink 7s linear forwards;
}

@keyframes wsx-shrink {
  to {
    transform: scaleX(0);
  }
}

/* ---- Ganti tema: lingkaran menyebar dari tombol (View Transitions) ---- */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

/* ---- Muncul saat di-scroll ---- */
.ws-pending {
  opacity: 0;
  transform: translateY(14px);
}