:root {
  --motion-duration-instant: 1ms;
  --motion-duration-fast: 150ms;
  --motion-duration-normal: 240ms;
  --motion-duration-slow: 360ms;
  --motion-duration-emphasis: 480ms;
  --motion-ease-standard: cubic-bezier(.2, .7, .2, 1);
  --motion-ease-enter: cubic-bezier(.16, 1, .3, 1);
  --motion-ease-exit: cubic-bezier(.4, 0, 1, 1);
  --motion-distance-small: 6px;
  --motion-distance-medium: 14px;
  --motion-scale-enter: .985;
}

@keyframes motionBackdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes motionDialogIn { from { opacity: 0; transform: translateY(var(--motion-distance-medium)) scale(var(--motion-scale-enter)); } to { opacity: 1; transform: none; } }
@keyframes motionSurfaceIn { from { opacity: 0; transform: translateY(var(--motion-distance-small)); } to { opacity: 1; transform: none; } }
@keyframes motionDropdownIn { from { opacity: 0; scale: 0; } to { opacity: 1; scale: 1; } }
@keyframes motionDropdownOut { from { opacity: 1; scale: 1; } to { opacity: 0; scale: 0; } }
@keyframes motionDropdownItemIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
@keyframes motionDropdownPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 24%, transparent); } 50% { box-shadow: 0 0 0 12px color-mix(in srgb, currentColor 8%, transparent); } 100% { box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 14%, transparent); } }
@keyframes motionFeedbackIn { 0% { opacity: 0; transform: translateY(4px); } 100% { opacity: 1; transform: none; } }

/* Zajednicki ritam za modalne povrsine, bez mijenjanja njihove geometrije. */
:is(.admin-modal-backdrop, .modal-backdrop:not([hidden]), .manual-viewer-backdrop:not([hidden]), .command-backdrop:not([hidden]), .topbar-profile-backdrop:not([hidden])) {
  animation: motionBackdropIn var(--motion-duration-normal) var(--motion-ease-standard) both;
}

:is(.admin-modal, .modal-card, .manual-viewer-dialog, .command-dialog) {
  animation: motionDialogIn var(--motion-duration-slow) var(--motion-ease-enter) both;
}

/* Sve navigacijske i akcijske padajuce povrsine koriste isti ulaz i izlaz. */
:is(
  .ui-animated-dropdown[open]:not(.is-closing) > .ui-dropdown-panel,
  .desktop-nav-group:is(.is-open, :not(.is-dismissed):hover) > .desktop-nav-submenu,
  .admin-nav-dropdown.is-portal,
  .management-overlay-dropdown-panel.is-portal,
  .admin-mobile-nav[open] > div,
  .management-overlay-nav details[open] > div,
  .students-view-menu[open] > div,
  .students-view-menu.is-open > .ui-dropdown-panel,
  .school-teaching-nav-dropdown[open] > div,
  .portal-inbox[open]:not(.is-closing) > .portal-inbox-panel,
  .topbar-profile-menu:not([hidden]),
  .accounting-reports-menu:not([hidden]),
  .admin-person-picker.is-open > .admin-person-picker-menu,
  .admin-picker.is-open > .admin-picker-menu,
  .workrecords-popover[open] > .workrecords-popover-panel,
  .worklog-code-options:not([hidden]),
  .students-transition-finished-menu:not([hidden]),
  .lesson-preparation-notes-control[open] > .lesson-preparation-notes-popover
) {
  animation: motionDropdownIn 300ms ease 100ms both !important;
}

.desktop-nav-group:is(.is-open, :not(.is-dismissed):hover) > .desktop-nav-submenu {
  transform-origin: top center;
}

:is(
  .desktop-utility-nav .desktop-management-group:is(.is-open, :not(.is-dismissed):hover) > .desktop-nav-submenu,
  .admin-nav-dropdown.is-portal,
  .management-overlay-dropdown-panel.is-portal,
  .portal-inbox[open] > .portal-inbox-panel,
  .topbar-profile-menu:not([hidden]),
  .accounting-reports-menu:not([hidden]),
  .admin-person-picker.is-open > .admin-person-picker-menu,
  .admin-picker.is-open > .admin-picker-menu,
  .workrecords-popover[open] > .workrecords-popover-panel,
  .worklog-code-options:not([hidden]),
  .students-transition-finished-menu:not([hidden]),
  .lesson-preparation-notes-control[open] > .lesson-preparation-notes-popover
) {
  transform-origin: top right;
}

.school-teaching-nav-dropdown[open] > div {
  transform-origin: top center;
}

:is(
  .ui-animated-dropdown[open] > summary,
  .desktop-nav-dropdown-trigger[aria-expanded="true"],
  .admin-nav-group > .event-header-tab[aria-expanded="true"],
  .management-overlay-dropdown > summary[aria-expanded="true"],
  .school-teaching-nav-dropdown[open] > summary,
  .portal-inbox[open] > summary,
  .topbar-profile[aria-expanded="true"]
) {
  animation: motionDropdownPulse 600ms linear both;
}

/* Referentni morphing meni: povrsina se otvara iz okidača, a stavke ulaze
   slijeva jedna za drugom. Pravilo je zajednicko svim aplikacijskim dropovima. */
:is(
  .ui-animated-dropdown[open]:not(.is-closing) > .ui-dropdown-panel,
  .desktop-nav-group:is(.is-open, :not(.is-dismissed):hover) > .desktop-nav-submenu,
  .admin-nav-dropdown.is-portal,
  .management-overlay-dropdown-panel.is-portal,
  .admin-mobile-nav[open] > div,
  .management-overlay-nav details[open] > div,
  .students-view-menu[open] > div,
  .students-view-menu.is-open > .ui-dropdown-panel,
  .school-teaching-nav-dropdown[open] > div,
  .topbar-profile-menu:not([hidden]),
  .accounting-reports-menu:not([hidden]),
  .admin-person-picker.is-open > .admin-person-picker-menu,
  .admin-picker.is-open > .admin-picker-menu,
  .workrecords-popover[open] > .workrecords-popover-panel,
  .worklog-code-options:not([hidden]),
  .students-transition-finished-menu:not([hidden])
) > :is(button, a, li, [role="menuitem"]) {
  opacity: 0;
  animation: motionDropdownItemIn 600ms ease var(--motion-dropdown-item-delay, 200ms) forwards;
}

:is(
  .ui-dropdown-panel,
  .desktop-nav-submenu,
  .admin-nav-dropdown.is-portal,
  .management-overlay-dropdown-panel.is-portal,
  .admin-mobile-nav[open] > div,
  .management-overlay-nav details[open] > div,
  .students-view-menu[open] > div,
  .school-teaching-nav-dropdown[open] > div,
  .topbar-profile-menu:not([hidden])
) > :is(button, a, li, [role="menuitem"]):nth-child(2) { --motion-dropdown-item-delay: 400ms; }
:is(.ui-dropdown-panel,.desktop-nav-submenu,.admin-nav-dropdown.is-portal,.management-overlay-dropdown-panel.is-portal,.admin-mobile-nav[open]>div,.management-overlay-nav details[open]>div,.students-view-menu[open]>div,.school-teaching-nav-dropdown[open]>div,.topbar-profile-menu:not([hidden]))>:is(button,a,li,[role="menuitem"]):nth-child(3) { --motion-dropdown-item-delay: 600ms; }
:is(.ui-dropdown-panel,.desktop-nav-submenu,.admin-nav-dropdown.is-portal,.management-overlay-dropdown-panel.is-portal,.admin-mobile-nav[open]>div,.management-overlay-nav details[open]>div,.students-view-menu[open]>div,.school-teaching-nav-dropdown[open]>div,.topbar-profile-menu:not([hidden]))>:is(button,a,li,[role="menuitem"]):nth-child(4) { --motion-dropdown-item-delay: 800ms; }
:is(.ui-dropdown-panel,.desktop-nav-submenu,.admin-nav-dropdown.is-portal,.management-overlay-dropdown-panel.is-portal,.admin-mobile-nav[open]>div,.management-overlay-nav details[open]>div,.students-view-menu[open]>div,.school-teaching-nav-dropdown[open]>div,.topbar-profile-menu:not([hidden]))>:is(button,a,li,[role="menuitem"]):nth-child(5) { --motion-dropdown-item-delay: 1000ms; }
:is(.ui-dropdown-panel,.desktop-nav-submenu,.admin-nav-dropdown.is-portal,.management-overlay-dropdown-panel.is-portal,.admin-mobile-nav[open]>div,.management-overlay-nav details[open]>div,.students-view-menu[open]>div,.school-teaching-nav-dropdown[open]>div,.topbar-profile-menu:not([hidden]))>:is(button,a,li,[role="menuitem"]):nth-child(6) { --motion-dropdown-item-delay: 1200ms; }
:is(.ui-dropdown-panel,.desktop-nav-submenu,.admin-nav-dropdown.is-portal,.management-overlay-dropdown-panel.is-portal,.admin-mobile-nav[open]>div,.management-overlay-nav details[open]>div,.students-view-menu[open]>div,.school-teaching-nav-dropdown[open]>div,.topbar-profile-menu:not([hidden]))>:is(button,a,li,[role="menuitem"]):nth-child(7) { --motion-dropdown-item-delay: 1400ms; }
:is(.ui-dropdown-panel,.desktop-nav-submenu,.admin-nav-dropdown.is-portal,.management-overlay-dropdown-panel.is-portal,.admin-mobile-nav[open]>div,.management-overlay-nav details[open]>div,.students-view-menu[open]>div,.school-teaching-nav-dropdown[open]>div,.topbar-profile-menu:not([hidden]))>:is(button,a,li,[role="menuitem"]):nth-child(n+8) { --motion-dropdown-item-delay: 1600ms; }

/* Profil ima zaglavlje prije stavki, zato redoslijed računamo među menuitem gumbima. */
.topbar-profile-menu:not([hidden]) > [role="menuitem"]:nth-of-type(1) { --motion-dropdown-item-delay: 200ms !important; }
.topbar-profile-menu:not([hidden]) > [role="menuitem"]:nth-of-type(2) { --motion-dropdown-item-delay: 400ms !important; }
.topbar-profile-menu:not([hidden]) > [role="menuitem"]:nth-of-type(3) { --motion-dropdown-item-delay: 600ms !important; }
.topbar-profile-menu:not([hidden]) > [role="menuitem"]:nth-of-type(4) { --motion-dropdown-item-delay: 800ms !important; }
.topbar-profile-menu:not([hidden]) > [role="menuitem"].is-danger { --motion-dropdown-item-delay: 1000ms !important; }

/* Inbox koristi isti morphing ritam kao padajuci izbornici; obavijesti ulaze
   slijeva redom, neovisno o zaglavlju panela. */
.portal-inbox[open]:not(.is-closing) .portal-inbox-item {
  opacity: 0;
  animation: motionDropdownItemIn 600ms ease var(--motion-dropdown-item-delay, 200ms) forwards;
}
.portal-inbox[open]:not(.is-closing) .portal-inbox-item:nth-child(2) { --motion-dropdown-item-delay: 400ms; }
.portal-inbox[open]:not(.is-closing) .portal-inbox-item:nth-child(3) { --motion-dropdown-item-delay: 600ms; }
.portal-inbox[open]:not(.is-closing) .portal-inbox-item:nth-child(4) { --motion-dropdown-item-delay: 800ms; }
.portal-inbox[open]:not(.is-closing) .portal-inbox-item:nth-child(5) { --motion-dropdown-item-delay: 1000ms; }
.portal-inbox[open]:not(.is-closing) .portal-inbox-item:nth-child(6) { --motion-dropdown-item-delay: 1200ms; }
.portal-inbox[open]:not(.is-closing) .portal-inbox-item:nth-child(7) { --motion-dropdown-item-delay: 1400ms; }
.portal-inbox[open]:not(.is-closing) .portal-inbox-item:nth-child(n+8) { --motion-dropdown-item-delay: 1600ms; }
.portal-inbox[open].is-silent-refresh .portal-inbox-item {
  opacity: 1;
  animation: none;
}

/* I stariji domenski meniji dobivaju isti kaskadni ritam stavki iz reference. */
:is(.accounting-reports-menu:not([hidden]),.admin-person-picker.is-open>.admin-person-picker-menu,.admin-picker.is-open>.admin-picker-menu,.workrecords-popover[open]>.workrecords-popover-panel,.worklog-code-options:not([hidden]),.students-transition-finished-menu:not([hidden]))>:is(button,a,li,[role="menuitem"]):nth-child(2) { --motion-dropdown-item-delay: 400ms; }
:is(.accounting-reports-menu:not([hidden]),.admin-person-picker.is-open>.admin-person-picker-menu,.admin-picker.is-open>.admin-picker-menu,.workrecords-popover[open]>.workrecords-popover-panel,.worklog-code-options:not([hidden]),.students-transition-finished-menu:not([hidden]))>:is(button,a,li,[role="menuitem"]):nth-child(3) { --motion-dropdown-item-delay: 600ms; }
:is(.accounting-reports-menu:not([hidden]),.admin-person-picker.is-open>.admin-person-picker-menu,.admin-picker.is-open>.admin-picker-menu,.workrecords-popover[open]>.workrecords-popover-panel,.worklog-code-options:not([hidden]),.students-transition-finished-menu:not([hidden]))>:is(button,a,li,[role="menuitem"]):nth-child(4) { --motion-dropdown-item-delay: 800ms; }
:is(.accounting-reports-menu:not([hidden]),.admin-person-picker.is-open>.admin-person-picker-menu,.admin-picker.is-open>.admin-picker-menu,.workrecords-popover[open]>.workrecords-popover-panel,.worklog-code-options:not([hidden]),.students-transition-finished-menu:not([hidden]))>:is(button,a,li,[role="menuitem"]):nth-child(5) { --motion-dropdown-item-delay: 1000ms; }
:is(.accounting-reports-menu:not([hidden]),.admin-person-picker.is-open>.admin-person-picker-menu,.admin-picker.is-open>.admin-picker-menu,.workrecords-popover[open]>.workrecords-popover-panel,.worklog-code-options:not([hidden]),.students-transition-finished-menu:not([hidden]))>:is(button,a,li,[role="menuitem"]):nth-child(6) { --motion-dropdown-item-delay: 1200ms; }
:is(.accounting-reports-menu:not([hidden]),.admin-person-picker.is-open>.admin-person-picker-menu,.admin-picker.is-open>.admin-picker-menu,.workrecords-popover[open]>.workrecords-popover-panel,.worklog-code-options:not([hidden]),.students-transition-finished-menu:not([hidden]))>:is(button,a,li,[role="menuitem"]):nth-child(7) { --motion-dropdown-item-delay: 1400ms; }
:is(.accounting-reports-menu:not([hidden]),.admin-person-picker.is-open>.admin-person-picker-menu,.admin-picker.is-open>.admin-picker-menu,.workrecords-popover[open]>.workrecords-popover-panel,.worklog-code-options:not([hidden]),.students-transition-finished-menu:not([hidden]))>:is(button,a,li,[role="menuitem"]):nth-child(n+8) { --motion-dropdown-item-delay: 1600ms; }

.ui-animated-dropdown.opens-up[open]:not(.is-closing) > .ui-dropdown-panel {
  transform-origin: bottom;
}

.ui-animated-dropdown.is-closing > .ui-dropdown-panel,
.portal-inbox.is-closing > .portal-inbox-panel {
  pointer-events: none;
  animation: motionDropdownOut var(--motion-duration-fast) var(--motion-ease-exit) both;
}

/* Ujednacen, tih ulaz glavnih sadrzajnih povrsina i poruka obrazaca. */
:is(.admin-subpage, .profile-page, .work-center-page, .organization-page, .competitions-page).is-motion-entering,
[data-motion-enter="surface"] {
  animation: motionSurfaceIn var(--motion-duration-slow) var(--motion-ease-enter) both;
}

:is(.my-teaching-form-error, .form-message, .field-error, [role="alert"]):not([hidden]) {
  animation: motionFeedbackIn var(--motion-duration-normal) var(--motion-ease-enter) both;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-fast: 1ms;
    --motion-duration-normal: 1ms;
    --motion-duration-slow: 1ms;
    --motion-duration-emphasis: 1ms;
    --motion-distance-small: 0px;
    --motion-distance-medium: 0px;
    --motion-scale-enter: 1;
  }

  :is(
    .admin-modal-backdrop,
    .modal-backdrop,
    .manual-viewer-backdrop,
    .command-backdrop,
    .topbar-profile-backdrop,
    .admin-modal,
    .modal-card,
    .manual-viewer-dialog,
    .command-dialog,
    .ui-dropdown-panel,
    .desktop-nav-submenu,
    .admin-nav-dropdown,
    .management-overlay-dropdown-panel,
    .school-teaching-nav-dropdown > div,
    .portal-inbox-panel,
    .portal-inbox-item,
    .topbar-profile-menu,
    .accounting-reports-menu,
    .admin-person-picker-menu,
    .admin-picker-menu,
    .workrecords-popover-panel,
    .worklog-code-options,
    .students-transition-finished-menu,
    .lesson-preparation-notes-popover,
    [data-motion-enter]
  ) {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }

  body[data-interface-theme] :is(button,.ui-button,[role="button"]){
    scroll-behavior:auto!important;
    transition-duration:1ms!important;
    transition-delay:0ms!important;
  }
}