/* Shared interaction/layout rules take precedence over the legacy theme. */
@layer interface-fixes {
  /* One close-button effect across public, admin, logo and calendar dialogs. */
  :is(.detail-close, .dialog-close, .logo-dialog-close, .calendar-close, .developer-dialog-close) {
    rotate: 0deg !important;
    transform: none !important;
    transform-origin: center !important;
    transition: rotate 180ms ease, color 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease !important;
  }
  :is(.detail-close, .dialog-close, .logo-dialog-close, .calendar-close, .developer-dialog-close):is(:hover, :focus-visible) {
    rotate: 90deg !important;
    transform: none !important;
    border-color: rgba(255,104,104,.72) !important;
    color: #fff !important;
    background: rgba(151,30,38,.86) !important;
    box-shadow: 0 0 0 4px rgba(255,104,104,.1), 0 12px 30px rgba(0,0,0,.3) !important;
  }
  @media (prefers-reduced-motion: reduce) {
    :is(.detail-close, .dialog-close, .logo-dialog-close, .calendar-close, .developer-dialog-close) {
      rotate: 0deg !important;
      transition: none !important;
    }
    :is(.detail-close, .dialog-close, .logo-dialog-close, .calendar-close, .developer-dialog-close):is(:hover, :focus-visible) { rotate: 0deg !important; }
  }
  * { scrollbar-width: auto !important; scrollbar-color: #697b8e #0b1421 !important; }
  *::-webkit-scrollbar { display: block !important; width: 8px !important; height: 8px !important; }
  *::-webkit-scrollbar-track { background: #0b1421 !important; border-radius: 8px !important; }
  *::-webkit-scrollbar-thumb { background: #697b8e !important; border: 2px solid #0b1421 !important; border-radius: 8px !important; }
  *::-webkit-scrollbar-thumb:hover { background: #c2a460 !important; }
  *::-webkit-scrollbar-button { display: none !important; width: 0 !important; height: 0 !important; }
  *::-webkit-scrollbar-corner { background: #0b1421 !important; }
  /* Chromium's native scrollbar-color can override the button-free webkit styling. */
  @supports selector(::-webkit-scrollbar) {
    * { scrollbar-color: auto !important; scrollbar-width: auto !important; }
  }
  /* Hover changes colors, not compositing layers or the pointer target. */
  :is(.primary-button, .ghost-button, .outline-button, .danger-button, .icon-button,
      .table-button, .move-button, .position-picker-button, .custom-select-button,
      .custom-select-option, .status-menu-button, .status-menu-option, .date-trigger,
      .users-list-toggle, .refresh-button, .copy-button) {
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition: color 160ms ease, background-color 160ms ease,
      border-color 160ms ease, box-shadow 160ms ease !important;
  }
  .admin-table-wrap { box-sizing: border-box !important; width: 100% !important; padding: 8px 16px 16px !important; overflow-x: auto !important; scrollbar-gutter: auto !important; }
  .admin-table-wrap table { width: 100% !important; min-width: 1180px !important; margin: 0 !important; }
  .admin-person-row { cursor: default !important; touch-action: auto !important; user-select: text !important; }
  .detail-dialog { padding: 8px !important; box-sizing: border-box !important; }
  .detail-modal { box-sizing: border-box !important; max-height: calc(100svh - 50px) !important; padding: clamp(20px, 2.6vw, 28px) !important; border-radius: 16px !important; }
  .detail-heading { padding-right: 60px !important; }
  .detail-close { top: 16px !important; right: 12px !important; width: 36px !important; height: 36px !important; }
  .detail-heading::before { inset: -8px -12px 10px !important; }
  :is(dialog, dialog *)::-webkit-scrollbar-track { margin-block: 14px !important; }
  :is(dialog, dialog *)::-webkit-scrollbar-track:horizontal { margin-inline: 14px !important; }
  :is(.audit-log-list, .users-list, .move-preview, .custom-select-menu) { clip-path: inset(0 round 12px); }
  .app-dialog .dialog-heading { display: grid !important; grid-template-columns: minmax(0, 1fr) 42px !important; align-items: start !important; gap: 16px !important; padding-right: 0 !important; }
  .app-dialog .dialog-heading > div { min-width: 0 !important; padding-right: 88px !important; }
  .app-dialog .dialog-heading .dialog-close { position: relative !important; top: auto !important; right: auto !important; left: auto !important; margin: 0 !important; transform: none !important; grid-column: 2 !important; grid-row: 1 !important; align-self: start !important; }
  .app-dialog .dialog-heading h2 { overflow-wrap: anywhere !important; }
  .small-dialog .dialog-heading > div, .move-dialog .dialog-heading > div { padding-right: 0 !important; }
  .small-dialog .dialog-heading::after, .move-dialog .dialog-heading::after { content: none !important; }
  .account-dialog form, .account-dialog .dialog-heading { position: static !important; transform: none !important; animation: none !important; }
  .account-dialog .dialog-heading .dialog-close { position: absolute !important; top: 16px !important; right: 16px !important; }
  #audit-log-list, #audit-user-list, #audit-category-list, .audit-category-rows { grid-auto-rows: max-content !important; align-content: start !important; }
  .audit-row { display: grid !important; grid-template-columns: 40px minmax(0, 1fr) !important; grid-template-rows: auto auto !important; height: auto !important; min-height: 0 !important; align-items: start !important; gap: 8px 16px !important; }
  .audit-marker { grid-column: 1 !important; grid-row: 1 / 3 !important; }
  .audit-copy { display: grid !important; grid-column: 2 !important; grid-row: 1 !important; min-width: 0 !important; white-space: normal !important; }
  .audit-copy strong, .audit-copy small, .audit-copy em { display: block !important; white-space: normal !important; overflow-wrap: anywhere !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.55 !important; }
  .audit-copy em { font-style: normal !important; }
  .audit-row time { grid-column: 2 !important; grid-row: 2 !important; justify-self: start !important; white-space: normal !important; }
  .custom-select { min-width: 0 !important; width: 100% !important; }
  .custom-select-button { width: 100% !important; min-height: 44px !important; white-space: normal !important; text-align: left !important; padding: 10px 34px 10px 14px !important; }
  .custom-select-menu { max-height: min(236px, 35dvh) !important; overscroll-behavior: contain !important; }
  .custom-select-menu[popover] { margin: 0 !important; box-sizing: border-box !important; position: fixed !important; }
  .custom-select-option { min-height: 40px !important; padding: 9px 12px !important; white-space: normal !important; }
  .position-picker-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 58px !important; min-height: 36px !important; gap: 8px !important; border: 1px solid #716443 !important; border-radius: 9px !important; color: #f2d48c !important; background: #202b32 !important; font: inherit !important; cursor: pointer !important; }
  .position-picker-button:hover { background: #34404a !important; }
  .position-picker-button:disabled { opacity: .45 !important; cursor: default !important; }
  .position-picker-button:focus-visible { outline: 2px solid #e0b95f !important; outline-offset: 3px !important; }
  .move-dialog { width: min(560px, calc(100vw - 28px)) !important; max-height: calc(100dvh - 28px) !important; padding: 28px !important; overflow-y: auto !important; box-sizing: border-box !important; }
  /* Keep the save button painted while hovering: no gradient swap or moving hit area. */
  .primary-button {
    background: #d5af5b !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease !important;
  }
  .primary-button:hover,
  .primary-button:focus-visible {
    background: #f6d783 !important;
    border-color: #ffe39a !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 2px rgba(224,185,95,.16) !important;
  }
  .move-dialog form { padding: 0 !important; }
  .move-description { color: #b7c5d6 !important; line-height: 1.6 !important; margin: 12px 0 20px !important; }
  .move-preview { padding: 8px 8px 8px 42px !important; margin: 20px 0 !important; max-height: 260px !important; overflow-y: auto !important; border: 1px solid #304256 !important; border-radius: 12px !important; background: #0b1421 !important; }
  .move-preview li { padding: 9px 12px !important; color: #acbbce !important; border-radius: 7px !important; overflow-wrap: anywhere !important; }
  .move-preview li.is-selected { color: #f6d783 !important; background: #29343b !important; font-weight: 700 !important; }
  .move-dialog .dialog-close { font-size: 26px !important; color: #f4f7fb !important; }
  @media (max-width: 760px) {
    .app-dialog .dialog-heading > div { padding-right: 0 !important; }
    .app-dialog .dialog-heading::after { content: none !important; }
    /* Hover changes colors, not compositing layers or the pointer target. */
  :is(.primary-button, .ghost-button, .outline-button, .danger-button, .icon-button,
      .table-button, .move-button, .position-picker-button, .custom-select-button,
      .custom-select-option, .status-menu-button, .status-menu-option, .date-trigger,
      .users-list-toggle, .refresh-button, .copy-button) {
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition: color 160ms ease, background-color 160ms ease,
      border-color 160ms ease, box-shadow 160ms ease !important;
  }
  .admin-table-wrap { padding-inline: 12px !important; }
    .move-dialog { padding: 20px !important; }
  }
}