/* BME Systems Motion System — v1
   Premium, restrained interaction layer for the authenticated Vanilla HTML UI.
   Motion is state communication: short, transform/opacity first, and reduced-motion aware. */
:root{
  --motion-fast:120ms;
  --motion-normal:180ms;
  --motion-slow:240ms;
  --motion-modal:280ms;
  --motion-exit:140ms;
  --ease-standard:cubic-bezier(.2,0,0,1);
  --ease-out:cubic-bezier(0,0,.2,1);
  --ease-in:cubic-bezier(.4,0,1,1);
  --ease-smooth:cubic-bezier(.16,1,.3,1);

  /* Backward-compatible aliases for older shared selectors. */
  --bme-motion-fast:var(--motion-fast);
  --bme-motion-base:var(--motion-normal);
  --bme-motion-slow:var(--motion-slow);
  --bme-motion-ease:var(--ease-standard);
  --bme-motion-pop:var(--ease-smooth);
}

/* Keep scrolling native. Smooth scrolling is requested only by explicit actions in JS. */
html{scroll-behavior:auto;}

/* ---------- Buttons / compact actions ---------- */
.asset-app-page :is(button,.btn,.company-option,.user-dropdown-item,.search-result-item,.row-icon-button,.icon-text-button),
.login-page :is(button,.login100-form-btn),
.login-header :is(button,.back-site){
  -webkit-tap-highlight-color:transparent;
  transition:
    background-color var(--motion-normal) var(--ease-standard),
    border-color var(--motion-normal) var(--ease-standard),
    color var(--motion-normal) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-normal) var(--ease-standard),
    opacity var(--motion-fast) var(--ease-standard);
}
.asset-app-page :is(button,.btn,.company-option,.user-dropdown-item,.search-result-item,.row-icon-button,.icon-text-button):not(:disabled):active,
.login-page :is(button,.login100-form-btn):not(:disabled):active,
.login-header :is(button,.back-site):not(:disabled):active{
  transform:scale(.985);
}
.asset-app-page :is(button,.btn):disabled{transform:none!important;}

/* ---------- Inputs / form state ---------- */
.asset-app-page :is(input,select,textarea),
.login-page :is(input,select,textarea),
.login-page .input-shell{
  transition:
    border-color var(--motion-normal) var(--ease-standard),
    background-color var(--motion-normal) var(--ease-standard),
    box-shadow var(--motion-normal) var(--ease-standard),
    color var(--motion-normal) var(--ease-standard),
    opacity var(--motion-fast) var(--ease-standard);
}
.asset-app-page :is(button,a,input:not(.qr-search-input):not(.asset-register-search-input):not(.depreciation-inline-control),select:not(.depreciation-inline-control),textarea,[tabindex]):focus-visible,
.login-page :is(button,a,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid rgba(35,109,194,.16);
  outline-offset:2px;
}
.asset-app-page :is(.field-error,.form-error,.validation-error):not(:empty),
.login-page .field-error:not(:empty){animation:bme-validation-enter var(--motion-normal) var(--ease-out) both;}

/* ---------- Icons ---------- */
.asset-app-page :is(button,a,.btn) :is(i,.bme-svg-icon),
.app-navbar :is(.company-chevron,.user-chevron,.language-icon,.notification-icon),
.asset-app-nav :is(i,.bme-svg-icon){
  transition:
    color var(--motion-normal) var(--ease-standard),
    opacity var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}

/* ---------- Navbar / popovers ---------- */
.company-switcher,.global-search,.language-button,.notification-button,.user-menu,.navbar-mobile-toggle,.search-shortcut{
  transition:
    background-color var(--motion-normal) var(--ease-standard),
    border-color var(--motion-normal) var(--ease-standard),
    color var(--motion-normal) var(--ease-standard),
    box-shadow var(--motion-normal) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}
.company-option,.notification-item,.user-dropdown-item,.search-result-item,.search-result-footer button,.mark-all-read{
  transition:
    background-color var(--motion-normal) var(--ease-standard),
    border-color var(--motion-normal) var(--ease-standard),
    color var(--motion-normal) var(--ease-standard),
    opacity var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}
.option-check{transition:opacity var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-out);transform:scale(.92);}
.company-option.is-selected .option-check{transform:scale(1);}

.navbar-dropdown,.global-search-results,.detail-more-menu{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-4px) scale(.985);
  transition:
    opacity var(--motion-normal) var(--ease-out),
    transform var(--motion-normal) var(--ease-smooth),
    visibility 0s linear var(--motion-normal);
  will-change:transform,opacity;
}
.company-dropdown{transform-origin:top left;}
.notification-dropdown,.user-dropdown{transform-origin:top right;}
.global-search-results{transform-origin:top center;}
.detail-more-menu{transform-origin:top right;}
.navbar-dropdown:not([hidden]):not([data-motion-state]),
.global-search-results:not([hidden]):not([data-motion-state]),
.detail-more-menu:not([hidden]):not([data-motion-state]),
.navbar-dropdown[data-motion-state="open"],
.global-search-results[data-motion-state="open"],
.detail-more-menu[data-motion-state="open"]{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none;
  transition-delay:0s;
}
.navbar-dropdown[data-motion-state="closing"],.global-search-results[data-motion-state="closing"],.detail-more-menu[data-motion-state="closing"]{
  opacity:0;
  visibility:visible;
  pointer-events:none;
  transform:translateY(-3px) scale(.99);
  transition-duration:var(--motion-exit),var(--motion-exit),0s;
  transition-timing-function:var(--ease-in),var(--ease-in),linear;
  transition-delay:0s,0s,var(--motion-exit);
}

/* ---------- Sidebar / drawer navigation ---------- */
.asset-app-nav>a,.asset-report-nav-toggle,.asset-sidebar-action,.asset-report-subnav>a,.asset-sidebar-toggle{
  transition:
    background-color var(--motion-normal) var(--ease-standard),
    border-color var(--motion-normal) var(--ease-standard),
    color var(--motion-normal) var(--ease-standard),
    box-shadow var(--motion-normal) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard),
    opacity var(--motion-fast) var(--ease-standard);
}
.asset-app-sidebar{transition:transform var(--motion-slow) var(--ease-smooth);}
.asset-sidebar-backdrop{animation:bme-backdrop-in var(--motion-normal) var(--ease-out) both;}
.asset-report-subnav>a{transition:background-color var(--motion-normal) var(--ease-standard),color var(--motion-normal) var(--ease-standard);}
.asset-app-sidebar.report-menu-open .asset-report-nav-group>.asset-report-subnav,
.asset-app-sidebar.admin-menu-open .asset-admin-nav-group>.asset-report-subnav{
  animation:bme-subnav-enter var(--motion-normal) var(--ease-out) both;
}

/* Desktop collapse is a structural layout change. The browser View Transition API snapshots
   the old/new shell and composites it, so width/margin do not animate on every frame. */
@supports (view-transition-name:none){
  .app-navbar{view-transition-name:bme-navbar;}
  .asset-app-sidebar{view-transition-name:bme-sidebar;}
  .asset-screen-shell>main,.asset-screen-main,.report-dashboard-main{view-transition-name:bme-main;}
  ::view-transition-group(bme-sidebar),::view-transition-group(bme-main){
    animation-duration:var(--motion-slow);
    animation-timing-function:var(--ease-smooth);
  }
  ::view-transition-old(bme-navbar),::view-transition-new(bme-navbar){animation:none;}
}

/* Same-origin route transition: navbar/sidebar remain visually anchored, only main content is subtle. */
@view-transition{navigation:auto;}
::view-transition-old(bme-main){animation:bme-route-out var(--motion-fast) var(--ease-in) both;}
::view-transition-new(bme-main){animation:bme-route-in var(--motion-normal) var(--ease-out) both;}
::view-transition-old(bme-navbar),::view-transition-new(bme-navbar),
::view-transition-old(bme-sidebar),::view-transition-new(bme-sidebar){mix-blend-mode:normal;}

/* Fallback page entry for browsers without cross-document View Transitions. */
body.asset-app-page.bme-ux-ready main>:is(.content:not(.room-page),.dashboard-page,.branch-page,.company-page,.master-content,.report-dashboard-content,.depreciation-content,.import-center-main,.system-center-main,.operations-main,.users-access-content,.qr-hero,.asset-page-head){
  animation:bme-page-enter var(--motion-normal) var(--ease-out) both;
}

/* ---------- Cards ---------- */
.asset-app-page :is(.card,.panel,.summary-card,.kpi-card,.metric-card,.content-card,.form-card,.dash-kpi,.role-card,.company-meta-grid a){
  transition:
    background-color var(--motion-normal) var(--ease-standard),
    border-color var(--motion-normal) var(--ease-standard),
    box-shadow var(--motion-normal) var(--ease-standard),
    transform var(--motion-normal) var(--ease-standard);
}

/* ---------- Tabs ---------- */
.asset-app-page :is(.tab-button,.users-tab,.detail-tab-pill,.report-preset-tabs button,.master-type-nav button,.company-section-nav a){
  transition:
    background-color var(--motion-normal) var(--ease-standard),
    border-color var(--motion-normal) var(--ease-standard),
    color var(--motion-normal) var(--ease-standard),
    box-shadow var(--motion-normal) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}
.asset-app-page :is(.tab-panel.active,.tab-panel.is-active,.users-tab-panel.is-active,.detail-tab-panel.is-active,.report-panel.active){
  animation:bme-tab-content-in var(--motion-normal) var(--ease-out) both;
}

/* ---------- Tables / pagination ---------- */
.asset-app-page tbody tr,.asset-app-page tbody td{
  transition:background-color var(--motion-fast) var(--ease-standard),border-color var(--motion-fast) var(--ease-standard),color var(--motion-fast) var(--ease-standard);
}
@media (hover:hover) and (pointer:fine){
  .asset-app-page tbody tr:hover td{background-color:rgba(239,245,252,.72);}
}
.asset-app-page :is(.pagination,.asset-pagination,.page-controls) button{
  transition:background-color var(--motion-fast) var(--ease-standard),border-color var(--motion-fast) var(--ease-standard),color var(--motion-fast) var(--ease-standard),transform var(--motion-fast) var(--ease-standard);
}

/* Preserve old data while refreshing: page JS toggles this class instead of clearing populated content. */
.bme-refreshable{position:relative;}
.bme-refreshable.is-refreshing::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  background:linear-gradient(100deg,transparent 15%,rgba(238,244,251,.48) 48%,transparent 82%);
  transform:translateX(-110%);
  animation:bme-refresh-sweep 1.05s var(--ease-standard) infinite;
}
.bme-refreshable.is-refreshing{cursor:progress;}

/* Initial skeletons reserve the same approximate table/card area and prevent a white flash. */
.bme-skeleton-stack{display:grid;gap:9px;width:100%;}
.bme-skeleton-line,.bme-skeleton-block,.bme-skeleton-row{
  position:relative;
  overflow:hidden;
  border-radius:9px;
  background:#edf2f7;
}
.bme-skeleton-line{height:12px;}
.bme-skeleton-block{min-height:76px;}
.bme-skeleton-row{height:46px;}
.bme-skeleton-line::after,.bme-skeleton-block::after,.bme-skeleton-row::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-110%);
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.78) 48%,transparent 76%);
  animation:bme-skeleton-shimmer 1.2s var(--ease-standard) infinite;
}
.bme-table-skeleton{padding:10px 14px;}

/* Thin network feedback never blocks content or clears existing data. */
.bme-network-activity{
  position:fixed;
  inset:0 0 auto 0;
  z-index:5200;
  height:3px;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  transition:opacity var(--motion-fast) var(--ease-standard);
}
.bme-network-activity>i{
  display:block;
  width:36%;
  height:100%;
  border-radius:0 999px 999px 0;
  background:linear-gradient(90deg,#d4a642,#236dc2,#0a2c5d);
  box-shadow:0 0 12px rgba(35,109,194,.34);
  transform:translateX(-125%);
  will-change:transform;
}
.bme-network-activity.is-active{opacity:1;}
.bme-network-activity.is-active>i{animation:bme-network-sweep 1.05s var(--ease-standard) infinite;}
.bme-network-activity.is-finishing>i{transform:translateX(180%);transition:transform var(--motion-fast) var(--ease-out);}
.asset-app-page .bme-request-busy{cursor:progress;opacity:.86;}
.asset-app-page .bme-data-refreshed{animation:bme-data-refresh var(--motion-normal) var(--ease-out) both;}

/* Existing generic loading states shimmer in place without changing their dimensions. */
.asset-app-page :is(.detail-loading,.loading:not(.error)){position:relative;overflow:hidden;}
.asset-app-page :is(.detail-loading,.loading:not(.error))::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  transform:translateX(-110%);
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.72) 48%,transparent 76%);
  animation:bme-skeleton-shimmer 1.2s var(--ease-standard) infinite;
}
.asset-app-page .qr-table-wrap.table-loading{position:relative;}
.asset-app-page .qr-table-wrap.table-loading::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  background:linear-gradient(100deg,rgba(247,249,252,.18),rgba(232,239,248,.58),rgba(247,249,252,.18));
  background-size:220% 100%;
  animation:bme-table-loading 1.05s linear infinite;
}

/* ---------- Modal / dialog ---------- */
.asset-app-page .modal.show:not([data-motion-state="closing"]),
.asset-app-page .import-modal:not([hidden]):not([data-motion-state="closing"]),
.asset-app-page .depreciation-modal:not([hidden]):not([data-motion-state="closing"]){
  animation:bme-backdrop-in var(--motion-normal) var(--ease-out) both;
}
.asset-app-page .modal.show:not([data-motion-state="closing"])>.modal-card,
.asset-app-page .import-modal:not([hidden]):not([data-motion-state="closing"]) .import-modal-dialog,
.asset-app-page .depreciation-modal:not([hidden]):not([data-motion-state="closing"]) .depreciation-modal-dialog{
  animation:bme-dialog-in var(--motion-modal) var(--ease-smooth) both;
  transform-origin:center center;
}
.asset-app-page .modal.show[data-motion-state="closing"],
.asset-app-page .import-modal:not([hidden])[data-motion-state="closing"],
.asset-app-page .depreciation-modal:not([hidden])[data-motion-state="closing"]{
  animation:bme-backdrop-out var(--motion-exit) var(--ease-in) both;
  pointer-events:none;
}
.asset-app-page .modal.show[data-motion-state="closing"]>.modal-card,
.asset-app-page .import-modal:not([hidden])[data-motion-state="closing"] .import-modal-dialog,
.asset-app-page .depreciation-modal:not([hidden])[data-motion-state="closing"] .depreciation-modal-dialog{
  animation:bme-dialog-out var(--motion-exit) var(--ease-in) both;
}

/* PDF options modal has an independent backdrop element. */
.report-pdf-modal:not([hidden]) .report-pdf-backdrop{animation:bme-backdrop-in var(--motion-normal) var(--ease-out) both;}
.report-pdf-modal:not([hidden]) .report-pdf-dialog{animation:bme-dialog-in var(--motion-modal) var(--ease-smooth) both;}
.report-pdf-modal:not([hidden])[data-motion-state="closing"] .report-pdf-backdrop{animation:bme-backdrop-out var(--motion-exit) var(--ease-in) both;}
.report-pdf-modal:not([hidden])[data-motion-state="closing"] .report-pdf-dialog{animation:bme-dialog-out var(--motion-exit) var(--ease-in) both;}

/* ---------- Drawer ---------- */
.room-detail-drawer{
  opacity:.985;
  transform:translateX(18px) translateX(100%);
  transition:transform var(--motion-slow) var(--ease-smooth),opacity var(--motion-normal) var(--ease-out);
  will-change:transform;
}
.room-detail-drawer.open{opacity:1;transform:none;}
.room-detail-backdrop:not([hidden]):not([data-motion-state="closing"]){animation:bme-backdrop-in var(--motion-normal) var(--ease-out) both;}
.room-detail-backdrop[data-motion-state="closing"]{animation:bme-backdrop-out var(--motion-exit) var(--ease-in) both;pointer-events:none;}

/* ---------- Messages / toast-like confirmations ---------- */
.asset-app-page :is(.message.show,.company-message.show,.form-message.show){animation:bme-message-in var(--motion-normal) var(--ease-out) both;}
.asset-app-page :is(.message.show,.company-message.show,.form-message.show).bme-message-closing{animation:bme-message-out var(--motion-exit) var(--ease-in) both;pointer-events:none;}

/* ---------- Tooltips ---------- */
.bme-motion-tooltip{
  position:fixed;
  z-index:6000;
  max-width:min(280px,calc(100vw - 24px));
  padding:7px 9px;
  border-radius:8px;
  background:#10233f;
  color:#fff;
  box-shadow:0 10px 28px rgba(8,31,69,.2);
  font:500 11.5px/1.35 "Inter","Noto Sans Thai",sans-serif;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transform:translateY(3px);
  transition:opacity var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-out),visibility 0s linear var(--motion-fast);
}
.bme-motion-tooltip.is-visible{opacity:1;visibility:visible;transform:none;transition-delay:0s;}

/* ---------- Back to top ---------- */
.bme-scroll-top{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:1180;
  width:44px;
  height:44px;
  border:1px solid rgba(29,54,92,.14);
  border-radius:14px;
  background:rgba(255,255,255,.94);
  color:#17365f;
  box-shadow:0 18px 42px -18px rgba(20,42,76,.45);
  display:grid;
  place-items:center;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px) scale(.97);
  transition:opacity var(--motion-normal) var(--ease-out),transform var(--motion-normal) var(--ease-smooth),visibility 0s linear var(--motion-normal),box-shadow var(--motion-normal) var(--ease-standard);
  backdrop-filter:blur(12px);
}
.bme-scroll-top i{font-size:24px;}
.bme-scroll-top.is-visible{opacity:1;visibility:visible;transform:none;transition-delay:0s;}
.bme-scroll-top:hover{transform:translateY(-1px);box-shadow:0 22px 48px -18px rgba(20,42,76,.58);}
.bme-scroll-top:active{transform:scale(.985);}

/* ---------- Keyframes: restrained distances only ---------- */
@keyframes bme-page-enter{from{opacity:.88;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes bme-route-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes bme-route-out{from{opacity:1;transform:none}to{opacity:.72;transform:translateY(-2px)}}
@keyframes bme-tab-content-in{from{opacity:.72;transform:translateY(3px)}to{opacity:1;transform:none}}
@keyframes bme-validation-enter{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}}
@keyframes bme-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes bme-backdrop-out{from{opacity:1}to{opacity:0}}
@keyframes bme-dialog-in{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@keyframes bme-dialog-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(4px) scale(.992)}}
@keyframes bme-subnav-enter{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@keyframes bme-message-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@keyframes bme-message-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-2px)}}
@keyframes bme-data-refresh{from{opacity:.76}to{opacity:1}}
@keyframes bme-refresh-sweep{from{transform:translateX(-110%)}to{transform:translateX(110%)}}
@keyframes bme-skeleton-shimmer{from{transform:translateX(-110%)}to{transform:translateX(110%)}}
@keyframes bme-table-loading{from{background-position:100% 0}to{background-position:-120% 0}}
@keyframes bme-network-sweep{0%{transform:translateX(-125%)}58%{transform:translateX(135%)}100%{transform:translateX(285%)}}

@media(max-width:640px){.bme-scroll-top{right:16px;bottom:16px;width:42px;height:42px;}}

/* Users who reduce motion in the OS still get immediate state feedback, without travel/shimmer. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;}
  .asset-app-page :is(button,.btn,a,input,select,textarea,.modal,.modal-card,.import-modal,.import-modal-dialog,.depreciation-modal,.depreciation-modal-dialog,.report-pdf-modal,.report-pdf-dialog,.room-detail-drawer,.navbar-dropdown,.global-search-results,.message,.company-message),
  .app-navbar *,
  .bme-scroll-top,.bme-motion-tooltip{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    transition-delay:0s!important;
  }
  .login-page .button-loader,
  .asset-app-page .bx-spin,
  .bme-network-activity>i,
  .bme-skeleton-line::after,.bme-skeleton-block::after,.bme-skeleton-row::after,
  .bme-refreshable.is-refreshing::after,
  .asset-app-page :is(.detail-loading,.loading:not(.error))::after,
  .asset-app-page .qr-table-wrap.table-loading::after{animation:none!important;}
}