/* Kinetic Nextcloud UI – v1.6.0 (Micro‑Animation Package)
   Additions to v1.5.2:
   - Navigation Glider (horizontal + vertical) gleitet aktiv / hover
   - Button Focus Glow & subtle active press scale
   - Checkbox / Radio "Pop" (bounce) beim Aktivieren
   - Avatar Hover Lift (leichtes Scale + Parallax Tilt)
   - Badge Pulse beim ersten Erscheinen (Benachrichtigungszähler)
   - Tooltip Smooth Pop (Fade + Slide + Scale)
   - Card / Panel / App-Drawer Entry Micro-Hover (subtiler Lift + Shadow)
   - Tab / Navigation Underline refinement
   - Smooth selection highlight for file rows
   - Notification Exit Fade (falls entfernt)
   - Kinetic Page-Enter + Loader + Dim-Scrim bleiben erhalten
   - Respektiert prefers-reduced-motion (alle Animations-intensive Effekte deaktiviert)
*/

/* ============================== Variablen ============================== */
:root {
  /* Easing */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.36, 0, 1, 0.22);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-soft: cubic-bezier(.25,.46,.45,.94);

  /* Zeiten */
  --dur-xxs: 120ms;
  --dur-xs: 160ms;
  --dur-sm: 220ms;
  --dur-md: 300ms;
  --dur-lg: 480ms;
  --dur-xl: 700ms;

  /* Schatten */
  --shadow-1: 0 2px 6px rgba(0,0,0,.08);
  --shadow-2: 0 6px 18px rgba(0,0,0,.12);
  --shadow-3: 0 12px 28px rgba(0,0,0,.18);

  /* Bestehende Variablen */
  --app-drawer-icon-size: 20px 20px;
  --checkbox-size: 20px;
  --box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.2);
  --drop-shadow: 0px 4px 2px -1px rgba(0,0,0,0.1);

  /* Loader / Scrim */
  --loader-bar-height: 3px;
  --loader-bar-color: var(--color-primary);
  --loader-bar-highlight: color-mix(in oklab, var(--color-primary), white 35%);
  --scrim-bg: rgba(0,0,0,.35);

  /* Micro Animations */
  --nav-glider-color: color-mix(in oklab, var(--color-primary), transparent 70%);
  --nav-glider-border: 2px solid var(--color-primary);
  --nav-glider-radius: 6px;
  --nav-glide-duration: 420ms;
  --focus-glow-color: color-mix(in oklab, var(--color-primary) 55%, white 10%);
  --badge-pulse-color: var(--color-primary);
  --tooltip-bg: rgba(30,30,30,.92);
  --tooltip-color: #fff;
  --tooltip-radius: 6px;
  --card-hover-scale: 1.012;
  --card-hover-shadow: 0 4px 14px -4px rgba(0,0,0,.22);
}

/* ============================ Reduced Motion =========================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .nav-glider,
  .tooltip-enter,
  .badge-pulse {
    animation: none !important;
  }
}

/* ========================== Global/Body/Header ========================= */
body.loading { cursor: progress; }
#header {
  position: relative;
  transition: box-shadow var(--dur-md) var(--ease-out), background-color var(--dur-md) var(--ease-out);
  box-shadow: var(--drop-shadow);
  backdrop-filter: none !important;
}
#body-login #header { box-shadow: none; }
body.scrolled #header { box-shadow: var(--shadow-2); }

/* ============================ Topbar Loader ============================ */
.nc-topbar-loader {
  position: absolute;
  bottom: 0;
  left: 0;
  height: var(--loader-bar-height);
  width: 0%;
  z-index: 9;
  background: linear-gradient(90deg, var(--loader-bar-color), var(--loader-bar-highlight));
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  opacity: 0;
  pointer-events: none;
  transition: width 150ms var(--ease-out), opacity var(--dur-sm) var(--ease-out);
  will-change: width, opacity;
}
.nc-topbar-loader.is-visible { opacity: 1; }
.nc-topbar-loader.is-fixed { position: fixed; top: 0; left: 0; z-index: 2147483000; }
.nc-topbar-loader.is-trickling { animation: nc-trickle 2.2s var(--ease-in-out) infinite; }
@keyframes nc-trickle {
  0%{width:0%}18%{width:28%}45%{width:58%}72%{width:78%}100%{width:85%}
}

/* ========================== Content Scrim (Dim) ======================== */
.nc-content-scrim {
  position: fixed;
  inset: var(--scrim-top, 48px) 0 0 0;
  background: var(--scrim-bg);
  z-index: 2147482000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-sm) var(--ease-out), visibility 0s linear var(--dur-sm);
}
.nc-content-scrim.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--dur-sm) var(--ease-out);
}

/* ========================= Kinetic Page-Enter ========================== */
.kinetic-page.page-enter-prepare {
  opacity: 0;
  transform: translateX(16px) scale(0.995);
  will-change: transform, opacity, filter;
}
.kinetic-page.page-enter-prepare.page-enter-active {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-lg) var(--ease-out),
  transform var(--dur-lg) var(--ease-bounce);
}
body.page-entering .reveal-seed,
body.page-entering .reveal-in { transition: none !important; }

/* ===================== Navigation / App Drawer Glider ================== */
#app-navigation {
  position: relative;
  overflow: visible;
}
.nav-glider.nav-glider--vertical {
  position: absolute;
  left: 4px;
  width: calc(100% - 8px);
  background: var(--nav-glider-color);
  border: 1px solid color-mix(in oklab, var(--color-primary), transparent 60%);
  backdrop-filter: none;
  border-radius: var(--nav-glider-radius);
  height: 40px;
  transform-origin: top left;
  pointer-events: none;
  opacity: 0;
  transform: translateY(var(--glider-y, 0)) scale(.94);
  transition:
    opacity 280ms var(--ease-out),
    transform var(--nav-glide-duration) var(--ease-out);
}
.nav-glider.nav-glider--vertical.is-active {
  opacity: .55;
  transform: translateY(var(--glider-y,0)) scale(1);
}

#appmenu {
  position: relative;
}
.nav-glider.nav-glider--horizontal {
  position: absolute;
  height: 4px;
  bottom: 2px;
  left: 0;
  width: var(--glider-w, 0);
  transform: translateX(var(--glider-x,0));
  background: var(--color-primary);
  border-radius: 2px;
  opacity: 0;
  transition:
    width 420ms var(--ease-out),
    transform 420ms var(--ease-out),
    opacity 320ms var(--ease-out);
}
.nav-glider.nav-glider--horizontal.is-active { opacity: 1; }

/* Existing Nav colors & animations */
.app-navigation-entry > .app-navigation-entry-link,
#app-navigation:not(.vue) > ul > li a,
#app-navigation:not(.vue) > ul > li > ul > li a {
  color: var(--color-text-light);
  transition: color var(--dur-xs) var(--ease-out), background-color var(--dur-xs) var(--ease-out), transform var(--dur-xs) var(--ease-out), box-shadow var(--dur-sm) var(--ease-out);
}
.app-navigation-entry.active > .app-navigation-entry-link,
#app-navigation:not(.vue) > ul > li a.active,
#app-navigation:not(.vue) > ul > li.active a {
  color: var(--color-primary);
  font-weight: bold;
}
#app-navigation:not(.vue) > ul > li > ul > li:hover,
.settings-button:hover { background: none !important; }
.app-navigation-entry:focus-within,
.app-navigation-entry:hover,
#app-navigation:not(.vue) > ul a:hover,
.settings-button:hover { background-color: rgba(255,255,255,.25) !important; }
#app-navigation { padding-top: 43px }
#app-navigation li > a { position: relative; overflow: hidden; }
#app-navigation li > a::before {
  content:""; position:absolute; left:8px; bottom:6px; width:0; height:2px; background:currentColor;
  opacity:.0; transform:translateX(-8px);
  transition: width var(--dur-sm) var(--ease-out), opacity var(--dur-xs) var(--ease-out), transform var(--dur-sm) var(--ease-out);
}
#app-navigation li > a:hover::before,
#app-navigation li > a.active::before {
  width:calc(100% - 16px); opacity:.5; transform:translateX(0);
}
#app-navigation li > a:hover { transform: translateX(2px); }

/* App menu */
.app-menu-entry--label { display:none !important; }
.app-menu-main img { margin:auto !important; }
.app-menu-entry.app-menu-entry__active::before { opacity:1 !important; }

#appmenu li a,
.header-right .icon,
.header-left .icon {
  transition: transform var(--dur-xxs) var(--ease-out), filter var(--dur-xs) var(--ease-out), opacity var(--dur-xs) var(--ease-out);
  will-change: transform;
}
#appmenu li a:hover,
.header-right .icon:hover,
.header-left .icon:hover {
  transform: none;
}

/* Remove triangles */
#appmenu li:hover a::before,
#appmenu li a.active::before,
#appmenu li a.focus::before,
#expand::before,
#expanddiv::after,
#contactsmenu-menu::after,
#header .header-right > div::after,
#header .header-left > nav > #navigation::after,
.newFileMenu::after,
.notification-container::after,
.ui-datepicker::after,
.ui-timepicker.ui-widget::after,
.header-menu__carret { display:none !important; }
#contactsmenu { display:none; }

/* ===================== Settings menu overrides ===================== */
/* Auf Einstellungsseiten: vertikalen Glider ausblenden und Hover-Hinterlegung neutral */
body[id^="body-settings"] #app-navigation .nav-glider--vertical { display: none !important; }
body[id^="body-settings"] #app-navigation .app-navigation-entry:hover { background-color: transparent !important; }

/* =============================== Buttons =============================== */
button,
.button,
.primary,
.settings-button,
.action-item,
.input-button {
  position: relative;
  transition:
    background-color var(--dur-xs) var(--ease-out),
    color var(--dur-xs) var(--ease-out),
    box-shadow var(--dur-sm) var(--ease-out),
    transform var(--dur-xxs) var(--ease-out),
    opacity var(--dur-xs) var(--ease-out),
    filter var(--dur-sm) var(--ease-out);
  will-change: transform, box-shadow;
}
button:hover,
.button:hover,
.primary:hover,
.settings-button:hover,
.action-item:hover,
.input-button:hover {
  transform: none;
  box-shadow: none;
}
button:active,
.button:active,
.primary:active,
.settings-button:active,
.action-item:active,
.input-button:active {
  transform: scale(0.985);
  box-shadow: none;
}
button:focus-visible,
.button:focus-visible,
.primary:focus-visible,
.settings-button:focus-visible,
.action-item:focus-visible,
.input-button:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--focus-glow-color) 70%, transparent),
              0 0 0 5px color-mix(in oklab, var(--focus-glow-color) 35%, transparent);
  outline: none;
}

button, .button, .primary, .settings-button, .app-menu-entry, .action-item { overflow:hidden; }
.input-button { overflow:hidden; }
.kinetic-ripple {
  position:absolute; border-radius:999px; transform:scale(0);
  opacity:.22; background:currentColor; pointer-events:none;
  animation:ripple-in var(--dur-md) var(--ease-out) forwards;
}
@keyframes ripple-in { to { transform:scale(12); opacity:0; } }

/* Clean button hover underline glide (non-intrusive) */
button::after,
.button::after,
.primary::after,
.settings-button::after,
.action-item::after,
.input-button::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  pointer-events: none;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--color-primary), transparent 50%),
    color-mix(in oklab, var(--color-primary), transparent 0%),
    color-mix(in oklab, var(--color-primary), transparent 50%)
  );
  opacity: 0;
  transform: scaleX(.5);
  transform-origin: center;
  transition: opacity var(--dur-xs) var(--ease-out), transform var(--dur-sm) var(--ease-out);
}
button:hover::after,
.button:hover::after,
.primary:hover::after,
.settings-button:hover::after,
.action-item:hover::after,
.input-button:hover::after {
  opacity: .55;
  transform: scaleX(1);
}

/* ============================== Avatare ================================ */
.avatar, .avatardiv, .user-avatar, .user-menu .avatar {
  position: relative;
  transition: transform 420ms var(--ease-out), box-shadow 420ms var(--ease-out), filter 420ms var(--ease-out);
  will-change: transform;
}
.avatar:hover, .avatardiv:hover, .user-avatar:hover, .user-menu .avatar:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 18px -4px rgba(0,0,0,.24);
  filter: saturate(1.05);
}
.avatar::after, .user-menu .avatar::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--focus-glow-color) 60%, transparent);
  transform: scale(.92);
}
.avatar:hover::after, .user-menu .avatar:hover::after {
  animation: avatar-halo var(--dur-sm) var(--ease-out) forwards;
}
@keyframes avatar-halo {
  0% { opacity: 0; transform: scale(.88); box-shadow: 0 0 0 0 color-mix(in oklab, var(--focus-glow-color) 60%, transparent); }
  55% { opacity: .55; transform: scale(1.06); box-shadow: 0 0 0 3px color-mix(in oklab, var(--focus-glow-color) 50%, transparent); }
  100% { opacity: 0; transform: scale(1.10); box-shadow: 0 0 0 6px rgba(0,0,0,0); }
}

/* ======================== Checkbox / Radio Pop ========================= */
input[type="checkbox"], input[type="radio"] {
  transition: transform var(--dur-xxs) var(--ease-out), filter var(--dur-xs) var(--ease-out);
  transform-origin: center;
}
input[type="checkbox"]:active, input[type="radio"]:active { transform: scale(.9); }
@keyframes check-pop {
  0% { transform: scale(.6); filter: brightness(.85); }
  55% { transform: scale(1.08); filter: brightness(1.05); }
  100% { transform: scale(1); filter: none; }
}
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  animation: check-pop 360ms var(--ease-bounce);
  filter: drop-shadow(0 2px 4px color-mix(in oklab, var(--color-primary) 35%, transparent));
}

/* ================================ Inputs =============================== */
input, select, textarea {
  transition: border-color var(--dur-xs) var(--ease-out), box-shadow var(--dur-sm) var(--ease-out), background-color var(--dur-xs) var(--ease-out), transform var(--dur-xs) var(--ease-out);
}
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 30%, transparent),
              0 0 0 5px color-mix(in oklab, var(--color-primary) 18%, transparent);
}

/* ======================= Cards / Panels / Rows Hover =================== */
.files-filestable tbody tr,
table#filestable tbody tr,
.app-navigation-entry,
.oc-dialog,
.menu,
.popovermenu,
.action-menu {
  transition: background-color var(--dur-xs) var(--ease-out),
              transform var(--dur-sm) var(--ease-out),
              box-shadow var(--dur-sm) var(--ease-out);
  will-change: transform;
}
.files-filestable tbody tr:hover,
table#filestable tbody tr:hover {
  transform: translateY(-1px) scale(1.002);
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.app-navigation-entry:hover {
  transform: translateX(2px);
}

/* Selected row subtle highlight smoothing */
.files-filestable tbody tr.selected,
table#filestable tbody tr.selected {
  box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--color-primary) 40%, transparent);
  animation: row-select-fade 600ms var(--ease-out);
}
@keyframes row-select-fade {
  0% { background-color: color-mix(in oklab, var(--color-primary) 25%, transparent); }
  100% { background-color: transparent; }
}

/* =============================== Dateien =============================== */
.files-filestable thead {
  background-color: var(--color-main-background);
  box-shadow: var(--drop-shadow);
  transition: box-shadow var(--dur-md) var(--ease-out), background-color var(--dur-sm) var(--ease-out);
}
table .thumbnail {
  border:none !important;
  transition: transform var(--dur-sm) var(--ease-out);
}
tr:hover .thumbnail { transform: scale(1.03); }

/* ============================== Breadcrumbs ============================ */
li.crumb { background:none; }
li.crumb::after {
  content:""; width:15px; background-color:var(--color-text-light);
  mask-image: var(--arrow-icon);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--arrow-icon) !important;
  -webkit-mask-size:contain; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center;
  opacity:.5;
  transition: opacity var(--dur-xs) var(--ease-out), transform var(--dur-xs) var(--ease-out);
}
li.crumb:hover::after { opacity:.8; transform: translateX(2px); }

/* ============================ Tooltips ================================ */
.tooltip-enter,
[role="tooltip"].tooltip-enter {
  animation: tooltip-pop 360ms var(--ease-out);
  transform-origin: top center;
}
@keyframes tooltip-pop {
  0% { opacity:0; transform: translateY(-4px) scale(.96); }
  55% { opacity:1; transform: translateY(0) scale(1.015); }
  100% { opacity:1; transform: translateY(0) scale(1); }
}

/* Improve tooltip base if we can style them */
[role="tooltip"], .tooltip {
  background: var(--tooltip-bg);
  color: var(--tooltip-color);
  border-radius: var(--tooltip-radius);
  padding: 6px 8px;
  font-size: 11.5px;
  line-height: 1.25;
  transition: opacity var(--dur-sm) var(--ease-out), transform var(--dur-sm) var(--ease-out);
}

/* ========================== Badges / Counters ========================== */
.badge-pulse {
  animation: badge-pulse 900ms var(--ease-out);
}
@keyframes badge-pulse {
  0% { transform: scale(.4); opacity: 0; box-shadow: 0 0 0 0 var(--badge-pulse-color); }
  42% { transform: scale(1.1); opacity: 1; }
  65% { transform: scale(.96); }
  100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 6px rgba(0,0,0,0); }
}

/* Likely badge selectors */
.app-menu-entry__counter,
.notification-counter,
.counter,
.badge {
  transition: transform var(--dur-sm) var(--ease-out), background-color var(--dur-sm) var(--ease-out);
}

/* ============================ Menüs & Dialoge ========================== */
.menu:not([hidden]),
.popovermenu:not([hidden]),
.header-menu:not([hidden]),
.action-menu:not([hidden]),
[role="menu"]:not([hidden]),
.oc-dialog:not(.hidden) {
  opacity:1;
  transform: translateY(0) scale(1);
  transition: opacity var(--dur-sm) var(--ease-out), transform var(--dur-sm) var(--ease-out), filter var(--dur-sm) var(--ease-out);
}
.menu[hidden],
.popovermenu[hidden],
.header-menu[hidden],
.action-menu[hidden],
[role="menu"][hidden],
.oc-dialog.hidden {
  opacity:0;
  transform: translateY(-6px) scale(.98);
}
.is-animating-in {
  opacity:0;
  transform: translateY(-6px) scale(.98);
  animation: pop-in var(--dur-sm) var(--ease-out) forwards;
}
@keyframes pop-in { to { opacity:1; transform: translateY(0) scale(1); } }

/* =============================== Notifications ========================= */
.notification-container .notification {
  transform: translateY(-8px);
  opacity: 0;
  animation: toast-in var(--dur-sm) var(--ease-out) forwards;
  box-shadow: var(--shadow-2);
}
@keyframes toast-in { to { transform: translateY(0); opacity:1; } }
.notification-leave {
  animation: toast-out 340ms var(--ease-soft) forwards;
}
@keyframes toast-out {
  0% { opacity:1; transform: translateY(0) scale(1); }
  100% { opacity:0; transform: translateY(-6px) scale(.95); }
}

/* ============================ Smooth Reveal ============================ */
.reveal-seed { opacity:0; transform: translateY(8px); }
.reveal-in {
  opacity:1; transform:none;
  transition: opacity var(--dur-lg) var(--ease-out),
              transform var(--dur-lg) var(--ease-out);
}

/* ============================= Accessibility =========================== */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  transition: outline-color var(--dur-xs) var(--ease-out), outline-offset var(--dur-xs) var(--ease-out);
}

/* ============================= Login safeguards ============================= */
#body-login .nc-content-scrim { display: none !important; }
#body-login .nc-topbar-loader { display: none !important; }