/* ========================================================================== 
   KOKO Backoffice v146 — production hardening
   Purpose: containment, responsive consistency and interaction safety.
   This file intentionally does not redesign existing page components.
   ========================================================================== */
:root{
  --koko-v146-gutter:clamp(10px,1.4vw,24px);
  --koko-v146-touch:42px;
  --koko-v146-focus:0 0 0 3px rgba(13,131,112,.16);
}
html{width:100%;max-width:100%;overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body,#consoleApp{width:100%;min-width:0;max-width:100%}
body.is-panel-authenticated{overflow-x:clip}
body.is-panel-authenticated .main-wrapper,
body.is-panel-authenticated .content,
body.is-panel-authenticated .content>*{min-width:0;max-width:100%}
body.is-panel-authenticated .content :where(section,article,form,fieldset,header,footer,nav,aside,div,label){min-width:0}
body.is-panel-authenticated :where(img,video,canvas,picture){max-width:100%;height:auto}
body.is-panel-authenticated :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea){max-width:100%;min-width:0}
body.is-panel-authenticated :where(p,small,dd,.sub,.field-help,.field-note,.page-subtitle,.detail-block,.notification-copy){overflow-wrap:anywhere}
body.is-panel-authenticated :where(code,pre,.mono){overflow-wrap:anywhere;word-break:break-word}

/* Keyboard / touch quality without changing the visual language. */
body.is-panel-authenticated :where(button,a,input,select,textarea,summary):focus-visible{outline:2px solid #0d8370!important;outline-offset:2px!important;box-shadow:var(--koko-v146-focus)}
body.is-panel-authenticated :where(button,.btn,.icon-btn,summary){touch-action:manipulation}
body.is-panel-authenticated :where(button,.btn,.icon-btn)[disabled]{cursor:not-allowed}

/* Shell: JS and CSS both switch to mobile navigation at 992px. */
body.is-panel-authenticated .simple-topbar,
body.is-panel-authenticated .topbar-left,
body.is-panel-authenticated .topbar-right,
body.is-panel-authenticated .topbar-search{min-width:0}
body.is-panel-authenticated .topbar-route{min-width:0;max-width:100%}
body.is-panel-authenticated .topbar-route :where(span,strong){display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.is-panel-authenticated .topbar-search input{min-width:0}
body.is-panel-authenticated .dropdown-menu{max-width:min(430px,calc(100vw - 16px))}
body.is-panel-authenticated .notification-menu{max-height:min(620px,calc(100dvh - 92px));overflow:auto;overscroll-behavior:contain}
body.is-panel-authenticated .overlay.show{position:fixed;inset:0;z-index:299}

/* Generic content containment. Horizontal scrolling belongs to data regions,
   never to the whole application viewport. */
body.is-panel-authenticated :where(.table-wrap,.finance-desktop-table,.casino-history-table,.notification-history-table,.presence-table,.site-list-table,.sports-table-card){width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable}
body.is-panel-authenticated :where(.table-wrap,.finance-desktop-table,.casino-history-table,.notification-history-table,.presence-table,.site-list-table,.sports-table-card) table{max-width:none}
body.is-panel-authenticated td,body.is-panel-authenticated th{min-width:0}
body.is-panel-authenticated :where(.page-header,.card-head,.sports-command-head,.tournament-editor-head,.notification-console-head,.contact-admin-detail-head,.finance-manager-head,.casino-catalog-head,.casino-workbench-head){max-width:100%}
body.is-panel-authenticated :where(.page-actions,.form-actions,.row-actions,.sports-command-actions,.sports-row-actions,.tournament-editor-actions,.notification-compose-actions,.contact-admin-detail-actions,.finance-primary-actions,.finance-table-actions,.casino-catalog-head-actions,.casino-management-actions,.m360-member-actions,.support-page-actions){min-width:0;max-width:100%;flex-wrap:wrap}

/* Drawers/modals: keep header/footer fixed and body as the only vertical
   scroller. Safe-area padding matters on modern phones. */
body.is-panel-authenticated .drawer-backdrop{padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
body.is-panel-authenticated :where(.drawer,.professional-drawer){width:min(920px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}
body.is-panel-authenticated :where(.drawer.drawer-wide,.professional-drawer.drawer-wide){width:min(1120px,calc(100vw - 24px))}
body.is-panel-authenticated :where(.drawer-head,.drawer-foot){min-width:0;max-width:100%}
body.is-panel-authenticated .drawer-head-main{min-width:0}
body.is-panel-authenticated .drawer-head-main>div{min-width:0}
body.is-panel-authenticated .drawer-body{min-width:0;min-height:0;max-width:100%;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
body.is-panel-authenticated .drawer-foot{flex-wrap:wrap}
body.is-panel-authenticated .drawer-foot>.btn{max-width:100%}

/* Forms and upload controls. */
body.is-panel-authenticated :where(.form-grid,.detail-form-grid,.sports-form-grid,.spm-editor-grid,.spm-image-editor-grid,.notification-form-grid,.support-profile-form-grid,.casino-game-base-grid,.casino-category-basic-grid,.auto-risk-threshold-form-grid,.pm-field-row-grid,.wa-settings-grid){min-width:0;max-width:100%}
body.is-panel-authenticated :where(.field,.form-grid>label,.detail-form-grid>label){min-width:0;max-width:100%}
body.is-panel-authenticated .panel-file-upload-primary{max-width:100%}
body.is-panel-authenticated input[type=file]{max-width:100%}

/* Workspaces with side panes. The specific breakpoints below collapse them
   only when the remaining content width becomes genuinely cramped. */
body.is-panel-authenticated :where(.site-studio-layout,.site-pages-layout,.site-public-menu-layout,.site-sports-layout,.tournament-admin-layout,.spm-workspace,.casino-manager-layout,.casino-page-builder-layout,.casino-site-editor-layout,.casino-workbench-layout,.casino-game-edit-layout,.casino-category-edit-layout,.notification-layout,.ticket-detail-layout,.support-profile-layout,.m360-workspace,.contact-admin-workspace,.auto-risk-workspace,.balance-workspace,.bonus-claim-workspace,.finance-detail-workspace){min-width:0;max-width:100%}
body.is-panel-authenticated :where(.site-studio-main,.site-studio-inspector,.site-studio-nav,.tournament-workspace,.spm-position-rail,.casino-manager-layout>*,.casino-workbench-layout>*,.notification-workspace,.m360-detail,.m360-directory){min-width:0;max-width:100%}

/* Site editor and banner manager. */
body[data-panel-page="site-editor"] :where(.site-studio-toolbar,.site-workspace-heading,.site-section-head,.site-page-banner-manager>header){min-width:0;max-width:100%;flex-wrap:wrap}
body[data-panel-page="site-editor"] :where(.site-editor-frame,.site-editor-canvas,.site-preview-workspace,.site-preview-browser,.site-preview-stage,.site-public-page-content){min-width:0;max-width:100%;overflow-x:hidden}
body[data-panel-page="site-editor"] .site-editor-tabs{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
body[data-panel-page="site-editor"] :where(.site-page-banner-copy,.site-page-banner-heading,.site-upload-card,.site-upload-card-meta){min-width:0}
body[data-panel-page="site-editor"] .site-page-banner-thumb img{width:100%;height:100%;object-fit:contain!important;background:#eef2f5}
body[data-panel-page="site-editor"] .site-drawer-media-grid{max-width:100%}

/* Sports banner management. */
body[data-panel-page="sports-promotions"] :where(.spm-workspace,.spm-position-rail,.spm-card-grid,.spm-banner-card,.spm-card-media,.spm-editor,.spm-image-editor){min-width:0;max-width:100%}
body[data-panel-page="sports-promotions"] .spm-card-grid{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))!important}
body[data-panel-page="sports-promotions"] .spm-card-actions{max-width:100%}
body[data-panel-page="sports-promotions"] .spm-image-preview{overflow:hidden}
body[data-panel-page="sports-promotions"] .spm-image-preview img{width:100%;height:100%;object-fit:contain!important}

/* Tournament editor. */
body[data-panel-page="tournaments"] :where(.tournament-admin-layout,.tournament-workspace,.tournament-toolbar,.tournament-overview-grid,.tournament-editor,.tournament-image-editor,.tournament-prizes-editor,.tournament-search-results,.tournament-selected-games){min-width:0;max-width:100%}
body[data-panel-page="tournaments"] .tournament-overview-image img{width:100%;height:100%;object-fit:contain!important}

/* Casino workspaces. */
body[data-panel-page="casino"] :where(.casino-manager-layout,.casino-page-builder-layout,.casino-site-editor-layout,.casino-workbench-layout,.casino-game-edit-layout,.casino-category-edit-layout,.casino-category-workspace,.casino-game-workspace,.casino-history-workspace,.casino-catalog-grid,.casino-choice-grid,.casino-preset-grid,.casino-rule-grid,.casino-type-grid){min-width:0;max-width:100%}
body[data-panel-page="casino"] :where(.casino-public-preview,.casino-site-preview){max-width:100%;overflow:auto;overscroll-behavior:contain}
body[data-panel-page="casino"] :where(.casino-game-edit-image,.casino-layout-game-cover,.casino-preview-game-image) img{max-width:100%;object-fit:cover}

/* Finance / operations / member 360 / contact / notifications. */
body[data-panel-page="online-finance"] :where(.online-finance-card-list,.online-finance-iban-list,.finance-mobile-list){min-width:0;max-width:100%}
body[data-panel-page="member-360"] :where(.m360-workspace,.m360-member-head,.m360-member-title,.m360-member-actions,.m360-tabs,.m360-overview-grid){min-width:0;max-width:100%}
body[data-panel-page="contact-messages"] :where(.contact-admin-workspace,.contact-admin-detail,.contact-admin-summary,.contact-admin-meta){min-width:0;max-width:100%}
body[data-panel-page="notifications"] :where(.notification-layout,.notification-workspace,.notification-composer-panel,.notification-history-panel){min-width:0;max-width:100%}

/* Responsive progression. */
@media(max-width:1180px){
  body.is-panel-authenticated :where(.site-studio-layout,.casino-manager-layout,.casino-page-builder-layout,.casino-site-editor-layout,.casino-workbench-layout,.support-profile-layout){grid-template-columns:minmax(0,1fr)!important}
  body.is-panel-authenticated :where(.site-studio-nav,.site-studio-inspector){position:static!important;max-height:none!important}
  body.is-panel-authenticated :where(.dashboard-kpi-grid,.metric-grid,.operations-kpi-grid,.tournament-overview-grid,.bank-account-grid,.crypto-address-grid){grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-width:992px){
  body.is-panel-authenticated .main-wrapper,body.is-panel-authenticated .main-wrapper.sidebar-collapsed{margin-left:0!important;width:100%!important;max-width:100%!important}
  body.is-panel-authenticated .sidebar,body.is-panel-authenticated .sidebar.is-collapsed{width:min(310px,88vw)!important;max-width:88vw!important}
  body.is-panel-authenticated .content{width:100%!important;padding:14px!important}
  body.is-panel-authenticated :where(.tournament-admin-layout,.spm-workspace,.notification-layout,.ticket-detail-layout,.m360-workspace,.contact-admin-workspace,.auto-risk-workspace,.balance-workspace,.bonus-claim-workspace,.finance-detail-workspace,.casino-game-edit-layout,.casino-category-edit-layout){grid-template-columns:minmax(0,1fr)!important}
  body.is-panel-authenticated :where(.page-header,.card-head,.sports-command-head,.tournament-editor-head,.notification-console-head,.contact-admin-detail-head,.finance-manager-head,.casino-catalog-head,.casino-workbench-head){align-items:stretch!important}
  body.is-panel-authenticated .drawer-backdrop{padding:8px}
  body.is-panel-authenticated :where(.drawer,.professional-drawer,.drawer.drawer-wide,.professional-drawer.drawer-wide){width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;max-height:calc(100dvh - 16px)!important}
  body[data-panel-page="sports-promotions"] .spm-position-rail{position:static!important}
}

@media(max-width:760px){
  body.is-panel-authenticated .content{padding:10px!important}
  body.is-panel-authenticated :where(.form-grid,.detail-form-grid,.sports-form-grid,.spm-editor-grid,.spm-image-editor-grid,.notification-form-grid,.support-profile-form-grid,.casino-game-base-grid,.casino-category-basic-grid,.auto-risk-threshold-form-grid,.pm-field-row-grid,.wa-settings-grid){grid-template-columns:minmax(0,1fr)!important}
  body.is-panel-authenticated :where(.site-media-grid,.site-game-pages,.spm-card-grid,.casino-catalog-grid,.casino-type-grid,.member-favorite-grid,.bank-account-card-grid){grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.is-panel-authenticated :where(.page-actions,.form-actions,.tournament-editor-actions,.notification-compose-actions,.contact-admin-detail-actions,.finance-primary-actions,.casino-catalog-head-actions,.m360-member-actions){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;width:100%}
  body.is-panel-authenticated :where(.page-actions,.form-actions,.tournament-editor-actions,.notification-compose-actions,.contact-admin-detail-actions,.finance-primary-actions,.casino-catalog-head-actions,.m360-member-actions)>.btn{width:100%;min-width:0;justify-content:center}
  body.is-panel-authenticated .drawer-backdrop{padding:0!important}
  body.is-panel-authenticated :where(.drawer,.professional-drawer,.drawer.drawer-wide,.professional-drawer.drawer-wide){top:0!important;left:0!important;transform:none!important;width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important}
  body.is-panel-authenticated .drawer-head{padding:max(13px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 13px max(14px,env(safe-area-inset-left))!important}
  body.is-panel-authenticated .drawer-body{padding:14px max(14px,env(safe-area-inset-right)) 14px max(14px,env(safe-area-inset-left))!important}
  body.is-panel-authenticated .drawer-foot{padding:12px max(14px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))!important}
  body.is-panel-authenticated .drawer-foot>.btn{flex:1 1 140px;justify-content:center}
  body[data-panel-page="site-editor"] .site-page-banner-row{max-width:100%}
}

@media(max-width:560px){
  body.is-panel-authenticated .content{padding:8px!important}
  body.is-panel-authenticated :where(.dashboard-kpi-grid,.metric-grid,.operations-kpi-grid,.tournament-overview-grid,.bank-account-grid,.crypto-address-grid,.site-media-grid,.site-game-pages,.spm-card-grid,.casino-catalog-grid,.casino-type-grid,.member-favorite-grid,.bank-account-card-grid){grid-template-columns:minmax(0,1fr)!important}
  body.is-panel-authenticated :where(.page-actions,.form-actions,.tournament-editor-actions,.notification-compose-actions,.contact-admin-detail-actions,.finance-primary-actions,.casino-catalog-head-actions,.m360-member-actions){grid-template-columns:minmax(0,1fr)!important}
  body.is-panel-authenticated :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea){font-size:16px!important}
  body.is-panel-authenticated :where(.btn,button,summary){min-height:var(--koko-v146-touch)}
  body.is-panel-authenticated .simple-topbar{gap:6px!important;padding:7px 8px!important}
  body.is-panel-authenticated .topbar-route span{display:none}
  body.is-panel-authenticated .account-copy{display:none!important}
  body.is-panel-authenticated .topbar-right{gap:4px!important}
  body[data-panel-page="site-editor"] .site-page-banner-header-actions{grid-template-columns:1fr!important}
}

@media(max-width:380px){
  body.is-panel-authenticated .content{padding:6px!important}
  body.is-panel-authenticated .sidebar,body.is-panel-authenticated .sidebar.is-collapsed{width:92vw!important;max-width:92vw!important}
  body.is-panel-authenticated .topbar-data-status{display:none!important}
  body.is-panel-authenticated .simple-topbar .icon-btn{width:36px!important;min-width:36px!important;padding:0!important}
}

@media(hover:none),(pointer:coarse){
  body.is-panel-authenticated :where(.btn,.icon-btn,button,summary){min-height:var(--koko-v146-touch)}
}
@media(prefers-reduced-motion:reduce){
  body.is-panel-authenticated *,body.is-panel-authenticated *::before,body.is-panel-authenticated *::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}