/*public_html/app.naoru.cloud/assets/css/app.css*/
:root { color-scheme: light; }
html { background: #fbfaf8; scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 8% -8%, rgba(206, 181, 169, .20), transparent 30rem),
    radial-gradient(circle at 95% 2%, rgba(243, 238, 231, .85), transparent 26rem),
    #fbfaf8;
  color: #1d1c1a;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "SF Pro Display", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
button, a, input { -webkit-tap-highlight-color: transparent; }
button { touch-action: manipulation; }

.ios-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.ios-scroll::-webkit-scrollbar { display: none; }

.card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(30,25,20,.09); }

.nav-item { transition: background .16s ease, color .16s ease, transform .16s ease; }
.nav-item:hover { background: #f3eee7; }
.nav-item.active { background: #1d1c1a; color: #fff; }
.nav-item.active .nav-dot { background: #b98f83; }

.chart-bar { transition: height .5s cubic-bezier(.2,.7,.2,1); }

.grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.ring-progress { transform: rotate(-90deg); transform-origin: 50% 50%; }

.sidebar {
  position: sticky;
  top: 1rem;
  height: calc(100dvh - 2rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@supports not (height: 100dvh) {
  .sidebar { height: calc(100vh - 2rem); }
}
@media (max-width: 1023px) {
  .sidebar { position: relative; top: auto; height: auto; }
}

.org-switcher { transition: background .16s ease, border-color .16s ease; }
.org-switcher:hover { background: #f3eee7; border-color: #d8cec3; }

.skeleton {
  background: linear-gradient(90deg, #f3eee7 25%, #e8e3dc 37%, #f3eee7 63%);
  background-size: 400% 100%;
  animation: skeleton 1.4s ease infinite;
  border-radius: 8px;
}
@keyframes skeleton {
  0% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}