/* ==========================================================================
   ImmoFlow — assets/css/fluent.css
   Mica/acrylic surfaces, scrollbars, focus rings, motion keyframes.
   ========================================================================== */

html, body {
  height: 100%;
  font-family: "Segoe UI Variable Display", "Segoe UI", Inter, system-ui, sans-serif;
  color: #1A1A1A;
}

/* ---- Mica page background — never scrolls ---------------------------- */
body {
  background: linear-gradient(135deg, #EEF3F9 0%, #F4F1F6 45%, #F3F3F3 100%);
  background-attachment: fixed;
}
html.dark body {
  background: #202020;
  background-attachment: fixed;
}

/* ---- Acrylic surfaces (nav pane, flyouts, dialogs, command bar) ------ */
.acrylic {
  background: rgba(252, 252, 252, .72);
  backdrop-filter: blur(30px) saturate(125%);
  -webkit-backdrop-filter: blur(30px) saturate(125%);
  border: 1px solid rgba(0, 0, 0, .0578);
}
html.dark .acrylic {
  background: rgba(44, 44, 44, .72);
  border-color: rgba(255, 255, 255, .0698);
}

/* ---- Layer (solid content cards) -------------------------------------- */
.layer-surface {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, .0578);
}
html.dark .layer-surface {
  background: #2C2C2C;
  border-color: rgba(255, 255, 255, .0698);
}

/* ---- Scrollbars --------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.25) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(0,0,0,.22); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.36); }
html.dark *::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); }
html.dark *::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.36); }

/* ---- Focus ring: Windows 11 double ring -------------------------------- */
.fluent-focus:focus-visible {
  outline: 2px solid #000;
  outline-offset: 1px;
  box-shadow: 0 0 0 4px #fff, 0 0 0 4px #fff;
}
html.dark .fluent-focus:focus-visible {
  outline-color: #fff;
}

/* ---- Motion tokens ------------------------------------------------------ */
:root {
  --ease-enter: cubic-bezier(0,0,0,1);
  --ease-exit: cubic-bezier(1,0,1,1);
  --ease-p2p: cubic-bezier(.55,.55,0,1);
}

@keyframes fluent-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fluent-scale-in { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: scale(1); } }
@keyframes fluent-slide-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fluent-toast-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fluent-spin { to { transform: rotate(360deg); } }

.anim-fade-in { animation: fluent-fade-in 250ms var(--ease-enter) both; }
.anim-scale-in { animation: fluent-scale-in 200ms var(--ease-enter) both; }
.anim-slide-up { animation: fluent-slide-up 250ms var(--ease-enter) both; }
.anim-toast-in { animation: fluent-toast-in 250ms var(--ease-enter) both; }

/* ---- Reveal hover (rows, nav items) ------------------------------------- */
.reveal-hover { transition: background-color 100ms linear; }

/* ---- NavigationView selection pill --------------------------------------- */
.nav-pill {
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 0;
  border-radius: 999px;
  background: var(--accent, #0067C0);
  transform: translateY(-50%);
  transition: height 150ms var(--ease-p2p);
}
.nav-item[aria-current="page"] .nav-pill { height: 16px; }

/* ---- Compact nav pane: hide labels, keep tooltips via [title] ------------ */
#navpane[data-nav-state="compact"] .nav-label { display: none; }
#navpane[data-nav-state="compact"] .nav-item,
#navpane[data-nav-state="compact"] [data-flyout-trigger="account-flyout"] { justify-content: center; }

/* ---- TextBox: signature focus bottom-border ------------------------------ */
.fluent-textbox { position: relative; }
.fluent-textbox::after {
  content: '';
  position: absolute;
  left: 1px; right: 1px; bottom: 0;
  height: 2px;
  background: var(--accent, #0067C0);
  border-radius: 0 0 4px 4px;
  transform: scaleX(0);
  transition: transform 150ms var(--ease-p2p);
}
.fluent-textbox:focus-within::after { transform: scaleX(1); }

/* ---- Pivot sliding underline --------------------------------------------- */
.pivot-underline {
  position: absolute;
  bottom: 0;
  height: 2px;
  background: var(--accent, #0067C0);
  transition: transform 300ms var(--ease-p2p), width 300ms var(--ease-p2p);
}

/* ---- Toggle switch --------------------------------------------------------- */
.toggle-track { width: 40px; height: 20px; border-radius: 999px; background: #8A8A8A; transition: background-color 150ms var(--ease-p2p); position: relative; }
.toggle-track[data-on="true"] { background: var(--accent, #0067C0); }
.toggle-knob { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 999px; background: #fff; transition: transform 150ms var(--ease-p2p); }
.toggle-track[data-on="true"] .toggle-knob { transform: translateX(20px); }

/* ---- Expander chevron ------------------------------------------------------ */
.expander-chevron { transition: transform 200ms var(--ease-p2p); }
.expander[data-open="true"] .expander-chevron { transform: rotate(180deg); }

/* ---- Window controls -------------------------------------------------------- */
.winbtn { transition: background-color 100ms linear; }

/* ---- Kanban drag & drop ------------------------------------------------------ */
.kanban-col.drop-over { background: rgba(0,103,192,.06); }
.kanban-card { cursor: grab; }
.kanban-card.dragging { opacity: .4; }
.kanban-dropline { height: 2px; border-radius: 999px; background: transparent; border: 1px dashed transparent; }
.kanban-dropline.active { border-color: #0067C0; background: rgba(0,103,192,.08); height: 44px; }

/* ---- Reduced motion ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---- Utility: line clamp ------------------------------------------------------ */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }