body { font-family: 'Inter', sans-serif; background-color: #f3f4f6; }
html.dark body { background-color: #111827; }

/* ===== Командна палітра (⌘K) ===== */
html.cmdk-lock { overflow: hidden; }
#cmdk { position: fixed; inset: 0; z-index: 100; display: flex; justify-content: center; align-items: flex-start; }
#cmdk.hidden { display: none; }
.cmdk-backdrop { position: absolute; inset: 0; background: rgba(17,24,39,.55); backdrop-filter: blur(4px); animation: cmdkFade .15s ease-out; }
.cmdk-panel {
  position: relative; margin-top: 12vh; width: 100%; max-width: 620px;
  background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.28); overflow: hidden;
  animation: cmdkPop .18s cubic-bezier(.22,1,.36,1);
}
html.dark .cmdk-panel { background: #1f2937; border-color: rgba(255,255,255,.08); }
@keyframes cmdkFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes cmdkPop { from { opacity: 0; transform: translateY(-10px) scale(.98) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .cmdk-backdrop, .cmdk-panel { animation: none } }

.cmdk-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid rgba(0,0,0,.06); }
html.dark .cmdk-head { border-color: rgba(255,255,255,.06); }
.cmdk-ico { width: 20px; height: 20px; color: #9ca3af; flex-shrink: 0; }
#cmdk-input { flex: 1; border: none; outline: none; background: transparent; font-size: 16px; color: #111827; }
html.dark #cmdk-input { color: #f9fafb; }
#cmdk-input::placeholder { color: #9ca3af; }
.cmdk-esc { font-size: 11px; color: #9ca3af; border: 1px solid rgba(0,0,0,.12); border-radius: 6px; padding: 2px 6px; }
html.dark .cmdk-esc { border-color: rgba(255,255,255,.15); }

.cmdk-results { max-height: 56vh; overflow-y: auto; padding: 6px; }
.cmdk-hint, .cmdk-more { padding: 22px 14px; text-align: center; color: #9ca3af; font-size: 13px; }
.cmdk-more { padding: 6px 14px 10px; text-align: left; }
.cmdk-grp { display: flex; align-items: center; gap: 6px; padding: 10px 12px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #9ca3af; }
.cmdk-cnt { font-weight: 600; color: #c4b5fd; background: rgba(139,92,246,.12); border-radius: 999px; padding: 0 7px; font-size: 10px; }
.cmdk-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; cursor: pointer; }
.cmdk-row.is-sel { background: rgba(139,92,246,.12); }
html.dark .cmdk-row.is-sel { background: rgba(139,92,246,.20); }
.cmdk-full.is-sel { background: rgba(59,130,246,.12); }
.cmdk-emo { font-size: 18px; width: 22px; text-align: center; flex-shrink: 0; }
.cmdk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cmdk-main b { font-size: 14px; font-weight: 600; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.dark .cmdk-main b { color: #f3f4f6; }
.cmdk-sub { font-size: 12px; color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: #8b5cf6; flex-shrink: 0; }
.cmdk-tag { font-size: 10px; color: #9ca3af; border: 1px solid rgba(0,0,0,.1); border-radius: 6px; padding: 1px 6px; flex-shrink: 0; }
html.dark .cmdk-tag { border-color: rgba(255,255,255,.12); }
.cmdk-foot { display: flex; gap: 16px; padding: 9px 14px; border-top: 1px solid rgba(0,0,0,.06); font-size: 11px; color: #9ca3af; }
html.dark .cmdk-foot { border-color: rgba(255,255,255,.06); }
.cmdk-foot kbd { border: 1px solid rgba(0,0,0,.14); border-radius: 5px; padding: 0 4px; margin: 0 1px; font-size: 10px; }
html.dark .cmdk-foot kbd { border-color: rgba(255,255,255,.15); }
@media (max-width: 640px) {
  .cmdk-panel { margin-top: 0; max-width: 100%; height: 100%; border-radius: 0; display: flex; flex-direction: column; }
  .cmdk-results { max-height: none; flex: 1; }
  .cmdk-foot { display: none; }
}

/* Login */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.login-form-container { animation: fadeInUp 0.7s cubic-bezier(0.2,0.8,0.2,1) forwards; }

/* Sidebar glass */
.glass-sidebar {
  background: rgba(255,255,255,0.78) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-right: 1px solid rgba(209,213,219,0.35);
}
html.dark .glass-sidebar {
  background: rgba(17,24,39,0.78) !important;
  border-right: 1px solid rgba(75,85,99,0.3);
}

/* Sidebar nav item entrance */
@keyframes navSlideIn {
  from { opacity:0; transform:translateX(-18px); }
  to   { opacity:1; transform:translateX(0); }
}
.nav-item-animate {
  opacity: 0;
  animation: navSlideIn 0.35s ease-out forwards;
}

/* Page transition */
@keyframes pageEnter {
  from { opacity:0; transform:scale(0.985) translateY(10px); filter:blur(6px); }
  to   { opacity:1; transform:scale(1) translateY(0);        filter:blur(0); }
}
.animate-page-enter { animation: pageEnter 0.4s cubic-bezier(0.2,0.8,0.2,1) forwards; }

/* Sidebar */
.sidebar { transition: transform 0.3s ease-in-out; }

/* Status badges */
.badge-synced    { @apply bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300; }
.badge-draft     { @apply bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-300; }
.badge-pending   { @apply bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300; }
.badge-confirmed { @apply bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300; }
.badge-conflict  { @apply bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300; }
.badge-gone      { @apply bg-gray-200 text-gray-400 dark:bg-gray-800 dark:text-gray-500; }

/* Tree view */
.tree-street { transition: background 0.15s; }
.tree-street:hover { @apply bg-purple-50 dark:bg-purple-900/10; }
.tree-house  { transition: background 0.15s; }
.tree-house:hover  { @apply bg-gray-50 dark:bg-gray-800/60; }

/* Skeleton loader */
@keyframes shimmer {
  0%   { background-position: -800px 0; }
  100% { background-position: 800px 0; }
}
@keyframes skeletonFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.skeleton {
  background: linear-gradient(90deg,
    #ebebeb 0%, #ebebeb 30%,
    #f7f7f7 50%,
    #ebebeb 70%, #ebebeb 100%
  );
  background-size: 1600px 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: 6px;
}
html.dark .skeleton {
  background: linear-gradient(90deg,
    #2d3748 0%, #2d3748 30%,
    #3d4a5c 50%,
    #2d3748 70%, #2d3748 100%
  );
  background-size: 1600px 100%;
}
.skeleton-card {
  animation: skeletonFadeIn 0.3s ease-out forwards;
  opacity: 0;
}

/* Staggered поява віджетів Головної: всплиття + масштаб + розмиття */
@keyframes hwPop {
  0%   { opacity: 0; transform: translateY(22px) scale(.93); filter: blur(7px); }
  55%  { filter: blur(0); }
  100% { opacity: 1; transform: translateY(0)   scale(1);   filter: blur(0); }
}
.hw-in {
  animation: hwPop .55s cubic-bezier(.22,1,.36,1) both;
  will-change: transform, opacity, filter;
}
@media (prefers-reduced-motion: reduce) { .hw-in { animation: none; } }

/* Modal backdrop */
.modal-backdrop {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
html.dark ::-webkit-scrollbar-thumb { background: #4b5563; }

/* Sidebar section accordion */
.nav-section-body {
  overflow: hidden;
  transition: max-height 0.28s cubic-bezier(0.4,0,0.2,1);
}
.nav-section-chevron {
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
}
.nav-section-chevron.expanded { transform: rotate(90deg); }

/* Sidebar collapse */
#sidebar { transition: width 0.3s cubic-bezier(0.2,0.8,0.2,1); }
#sidebar.sidebar-collapsed { width: 68px; }
#sidebar.sidebar-collapsed .sb-hide { display: none !important; }
.sb-show { display: none; }
#sidebar.sidebar-collapsed .sb-show { display: flex; }
/* Nav items in collapsed mode: remove horizontal padding so icon background isn't clipped */
#sidebar.sidebar-collapsed #sidebar-nav { padding-left: 4px; padding-right: 4px; }
#sidebar.sidebar-collapsed .nav-item { justify-content: center; padding-left: 0 !important; padding-right: 0 !important; }
#sidebar.sidebar-collapsed .nav-inner { width: auto; }
#sidebar.sidebar-collapsed .nav-icon { margin-right: 0 !important; }
/* Toggle button centered when collapsed */
#sidebar.sidebar-collapsed #btn-sidebar-toggle { justify-content: center; padding-left: 0; padding-right: 0; }
#sidebar.sidebar-collapsed .sb-footer-row { flex-direction: column; align-items: center; gap: 6px; margin-bottom: 6px; }

/* ── Вид меню «Рейка» (іконки модулів + flyout) ── */
#sidebar.sidebar-rail { width: 68px; }
#sidebar.sidebar-rail .sb-hide { display: none !important; }
#sidebar.sidebar-rail .sb-show { display: flex; }
#sidebar.sidebar-rail .sb-footer-row { flex-direction: column; align-items: center; gap: 6px; margin-bottom: 6px; }
#sidebar.sidebar-rail #sidebar-nav.nav-rail {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px;
}
.rail-btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 13px; cursor: pointer; border: none; background: transparent;
  transition: background .15s, transform .12s; text-decoration: none;
}
.rail-btn:hover { background: rgba(124,58,237,.08); transform: translateY(-1px); }
html.dark .rail-btn:hover { background: rgba(139,92,246,.14); }
.rail-btn.rail-active { background: rgba(124,58,237,.12); }
html.dark .rail-btn.rail-active { background: rgba(139,92,246,.18); }
.rail-btn.rail-flyopen { background: rgba(124,58,237,.16); }
.rail-ico { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; }
.rail-btn.rail-active::before {
  content: ''; position: absolute; left: -6px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 3px; background: #7c3aed;
}
.rail-dot { position: absolute; right: 6px; bottom: 6px; width: 4px; height: 4px; border-radius: 50%; background: rgba(148,163,184,.7); }

.rail-flyout {
  position: fixed; z-index: 60; min-width: 210px; max-width: 260px; padding: 6px;
  background: rgba(255,255,255,.98); border: 1px solid rgba(0,0,0,.08); border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  animation: railFly .14s ease;
}
html.dark .rail-flyout { background: rgba(17,24,39,.98); border-color: rgba(255,255,255,.1); box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.rail-flyout.hidden { display: none; }
@keyframes railFly { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.rail-fly-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; padding: 5px 10px 6px; }
.rail-fly-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; text-decoration: none; color: inherit; transition: background .12s; }
.rail-fly-item:hover { background: rgba(124,58,237,.08); }
html.dark .rail-fly-item:hover { background: rgba(139,92,246,.14); }
.rail-fly-item.rail-fly-active { background: rgba(124,58,237,.12); }
html.dark .rail-fly-item.rail-fly-active { background: rgba(139,92,246,.2); }
.rail-fly-ico { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: rgba(124,58,237,.1); color: #7c3aed; }
html.dark .rail-fly-ico { background: rgba(139,92,246,.18); color: #a78bfa; }
.rail-fly-txt { display: flex; flex-direction: column; min-width: 0; }
.rail-fly-lbl { font-size: 13px; font-weight: 600; color: #1e293b; line-height: 1.2; }
html.dark .rail-fly-lbl { color: #f1f5f9; }
.rail-fly-sub { font-size: 10px; color: #94a3b8; line-height: 1.2; }

/* ── Мобільний drawer: плавний оверлей (fade) ── */
#sidebar-overlay { opacity: 0; pointer-events: none; transition: opacity .3s ease; }
#sidebar-overlay.sb-ov-show { opacity: 1; pointer-events: auto; }
@media (max-width: 767px) {
  #sidebar { will-change: transform; }
}

/* ── Reveal-анімація входу: трикутники-«штори» роз'їжджаються, відкриваючи Атлас ── */
#login-reveal { position: fixed; inset: 0; z-index: 100; pointer-events: none; overflow: hidden; }
#login-reveal.rv-hidden { display: none; }
#login-reveal .rv {
  position: absolute; inset: -2px;
  background: linear-gradient(135deg, #1e1b4b 0%, #4c1d95 50%, #1e1b4b 100%);
  will-change: transform, opacity;
  transition: transform .9s cubic-bezier(.65,0,.2,1), opacity .55s ease .4s;
}
#login-reveal .rv svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#login-reveal .rv-left  { clip-path: polygon(0 0, 60% 0, 40% 100%, 0 100%); }
#login-reveal .rv-right { clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%); }
#login-reveal.rv-go .rv-left  { transform: translateX(-115%) rotate(-2deg); opacity: 0; }
#login-reveal.rv-go .rv-right { transform: translateX(115%)  rotate(2deg);  opacity: 0; }
#login-reveal.rv-instant .rv { transition: none !important; }