/* CTR Suite V30 — native MPA, zero-white-flash shell. */
:root{
  --ctr-nav-sidebar-w:252px;
  --ctr-nav-bg:var(--bg,#F3F5FB);
  --ctr-nav-side-1:var(--sidebar-1,#0A1230);
  --ctr-nav-side-2:var(--sidebar-2,#132352);
}
html{
  scroll-behavior:auto;
  overflow-x:hidden;
  background:linear-gradient(90deg,var(--ctr-nav-side-1) 0,var(--ctr-nav-side-2) var(--ctr-nav-sidebar-w),var(--ctr-nav-bg) var(--ctr-nav-sidebar-w),var(--ctr-nav-bg) 100%);
}
body{min-height:100dvh;background:transparent;overflow-x:hidden}
html.ctr-sidebar-precollapsed{--ctr-nav-sidebar-w:76px}
@media (min-width:993px) and (max-width:1180px){:root{--ctr-nav-sidebar-w:76px}}
@media (max-width:992px){:root{--ctr-nav-sidebar-w:0px}html{background:var(--ctr-nav-bg)}}

/* One transition owner only. Sidebar is captured separately and never faded;
   only the main workspace changes. This keeps the navigation rail visually
   continuous while still using normal browser/PHP navigation. */
@view-transition{navigation:auto}
.sidebar{view-transition-name:ctr-sidebar}
.main{view-transition-name:ctr-main}

::view-transition-group(root),
::view-transition-old(root),
::view-transition-new(root){animation:none!important}
::view-transition-group(ctr-sidebar),
::view-transition-image-pair(ctr-sidebar),
::view-transition-old(ctr-sidebar),
::view-transition-new(ctr-sidebar){animation:none!important;opacity:1!important;mix-blend-mode:normal}
::view-transition-group(ctr-main){animation-duration:.14s;animation-timing-function:cubic-bezier(.22,.61,.36,1)}
::view-transition-old(ctr-main){animation:ctrMainOut .08s ease both;mix-blend-mode:normal}
::view-transition-new(ctr-main){animation:ctrMainIn .14s cubic-bezier(.22,.61,.36,1) both;mix-blend-mode:normal}
@keyframes ctrMainOut{to{opacity:.985}}
@keyframes ctrMainIn{from{opacity:.94}to{opacity:1}}

/* Non-blocking cue for slower PHP requests. The old page remains painted. */
html::after{
  content:"";position:fixed;z-index:2147483647;inset:0 auto auto 0;width:32%;height:2px;
  pointer-events:none;opacity:0;transform:translateX(-120%);
  background:linear-gradient(90deg,var(--blue,#2F6FEA),var(--teal,#14C7B4));
}
html.ctr-native-leaving::after{opacity:1;animation:ctrNativeProgress .72s ease-in-out infinite}
@keyframes ctrNativeProgress{0%{transform:translateX(-120%)}100%{transform:translateX(410%)}}

/* Global width guards. Module-specific responsive CSS remains authoritative,
   while these rules stop one oversized child from widening the whole app. */
.app,.main,.content,.module-page,.page,.page-wrap,.page-content,.main-content{
  min-width:0;
  max-width:100%;
}
.main{flex:1 1 auto}
img,svg,canvas,video{max-width:100%}

@media(max-width:1024px){
  .content,.module-page,.page-content,.main-content{width:100%;overflow-x:clip}
  .toolbar,.m-toolbar,.module-actions,.page-actions,.filter-bar,.filters,.action-bar{
    max-width:100%;
    flex-wrap:wrap;
  }
  .modal,.modal-content,.drawer,.sheet,.panel-modal,.pmx-modal,.pb-modal,.cs-modal,.cr-modal{
    max-width:calc(100vw - 20px)!important;
    max-height:calc(100dvh - 20px)!important;
  }
  .table-wrap,.m-table-wrap,.sales-table-wrap,.pmx-table-scroll,.pb-table-wrap{
    max-width:100%;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
  }
}

/* Pause decorative animation when the browser tab is not visible. */
html.ctr-tab-hidden *,html.ctr-tab-hidden *::before,html.ctr-tab-hidden *::after{
  animation-play-state:paused !important;
}

/* Avoid costly hover transforms on touch devices and smaller screens. */
@media (hover:none), (max-width:992px){
  .nav-item:hover,.product-card:hover,.table-card:hover,.m-card:hover,.stat-card:hover{
    transform:none !important;
  }
  .chat-overlay,.logout-confirm-overlay,.sidebar-overlay{
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
}

@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  html.ctr-native-leaving::after{animation:none;opacity:0}
}

/* Large data tables/lists render independently without changing layout. */
@supports (content-visibility:auto){
  .notification-item,.notif-row,.purchase-row,.history-row{
    content-visibility:auto;
    contain-intrinsic-size:48px;
  }
}