/*
 * KOKO Backoffice — layout and responsive polish v140
 *
 * This file intentionally loads after the historical bundle.  It provides a
 * small, auditable final contract for the shared shell and the page families
 * that are most sensitive to long content and narrow viewports.
 */

:root:is([data-theme="pro"], [data-theme="light"], [data-theme="dark"]) {
  --koko-shell-gap: 14px;
  --koko-control-size: 38px;
  --koko-mobile-gutter: 10px;
}

html {
  max-width: 100%;
  overflow-x: clip;
}

body.is-panel-authenticated,
body.is-panel-authenticated #consoleApp,
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 :where(img, video, canvas) {
  max-width: 100%;
}

body.is-panel-authenticated :where(
  .page-header,
  .page-head,
  .card-head,
  .toolbar,
  .panel-card,
  .table-card,
  .form-grid,
  .detail-form-grid,
  .metric-grid,
  .operations-grid,
  .sports-page,
  .finance-page,
  .casino-page,
  .bonus-admin-page,
  .tournament-admin-layout,
  .site-studio-layout,
  .m360-workspace,
  .oq-workspace
) > * {
  min-width: 0;
}

body.is-panel-authenticated :where(
  .page-header h1,
  .page-head h1,
  .card-head h2,
  .card-head h3,
  .page-subtitle,
  .sub,
  .field-note,
  .field-help,
  .empty,
  .empty-state
) {
  overflow-wrap: anywhere;
}

body.is-panel-authenticated :where(input, select, textarea, button) {
  max-width: 100%;
}

body.is-panel-authenticated :where(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary, #2563eb) 26%, transparent);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Top bar: its right-side controls must consume real grid width.  Previously
   the flex children overflowed their cell, covered the search box and shrank
   the refresh button to a few pixels around 1280–1400px.
   ------------------------------------------------------------------------- */
@media (min-width: 993px) {
  :root:is([data-theme="pro"], [data-theme="light"], [data-theme="dark"]) .simple-topbar {
    grid-template-columns: minmax(160px, 220px) minmax(240px, 1fr) max-content;
    column-gap: 16px;
  }

  :root:is([data-theme="pro"], [data-theme="light"], [data-theme="dark"]) .simple-topbar .topbar-search {
    width: 100%;
    min-width: 0;
    max-width: 560px;
    justify-self: center;
  }

  :root:is([data-theme="pro"], [data-theme="light"], [data-theme="dark"]) .simple-topbar .topbar-right {
    min-width: max-content;
    max-width: none;
    justify-self: end;
  }

  :root:is([data-theme="pro"], [data-theme="light"], [data-theme="dark"]) .simple-topbar .topbar-right > * {
    flex: 0 0 auto;
  }

  :root:is([data-theme="pro"], [data-theme="light"], [data-theme="dark"]) .simple-topbar .topbar-right > .icon-btn,
  :root:is([data-theme="pro"], [data-theme="light"], [data-theme="dark"]) .simple-topbar .notification-dropdown {
    width: var(--koko-control-size);
    min-width: var(--koko-control-size);
    flex-basis: var(--koko-control-size);
  }
}

@media (min-width: 993px) and (max-width: 1450px) {
  :root:is([data-theme="pro"], [data-theme="light"], [data-theme="dark"]) .topbar-data-status time {
    display: none;
  }

  :root:is([data-theme="pro"], [data-theme="light"], [data-theme="dark"]) .topbar-data-status {
    min-width: 0;
    padding-inline: 8px;
  }

  :root:is([data-theme="pro"], [data-theme="light"], [data-theme="dark"]) .account-copy {
    max-width: 104px;
  }
}

@media (min-width: 993px) and (max-width: 1180px) {
  :root:is([data-theme="pro"], [data-theme="light"], [data-theme="dark"]) .simple-topbar {
    grid-template-columns: minmax(145px, 185px) minmax(190px, 1fr) max-content;
    column-gap: 10px;
  }

  :root:is([data-theme="pro"], [data-theme="light"], [data-theme="dark"]) .topbar-data-status .data-status-copy,
  :root:is([data-theme="pro"], [data-theme="light"], [data-theme="dark"]) .account-trigger > .account-copy,
  :root:is([data-theme="pro"], [data-theme="light"], [data-theme="dark"]) .account-trigger > .fa-chevron-down {
    display: none;
  }
}

/* -------------------------------------------------------------------------
   Tables, action rows and long values
   ------------------------------------------------------------------------- */
body.is-panel-authenticated :where(.table-wrap, .table-responsive, .data-table-wrap) {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

body.is-panel-authenticated :where(.table-wrap, .table-responsive, .data-table-wrap) > table {
  margin: 0;
}

body.is-panel-authenticated :where(td, dd, code, pre, .mono, .operations-error-request) {
  overflow-wrap: anywhere;
}

body.is-panel-authenticated :where(.row-actions, .table-actions, .sports-row-actions, .form-actions) {
  max-width: 100%;
}

body.is-panel-authenticated :where(.row-actions, .table-actions, .sports-row-actions) > * {
  flex: 0 0 auto;
}

/* -------------------------------------------------------------------------
   Sports: the provider toolbar contains search + five selects + reset.  The
   old six-column definition forced Status onto a mostly empty second row.
   ------------------------------------------------------------------------- */
@media (min-width: 1181px) {
  body[data-panel-page="sports"] .sports-filterbar:not(.sports-hierarchy-search) {
    grid-template-columns: minmax(210px, 1.35fr) repeat(5, minmax(108px, .66fr)) var(--koko-control-size);
    align-items: end;
  }
}

body[data-panel-page="sports"] .sports-filterbar > :where(label, button) {
  min-width: 0;
}

body[data-panel-page="sports"] .sports-filterbar > .btn-icon {
  width: var(--koko-control-size);
  min-width: var(--koko-control-size);
  height: var(--koko-control-size);
  align-self: end;
}

body[data-panel-page="sports"] .sports-filterbar :where(input, select) {
  width: 100%;
}

body[data-panel-page="sports"] .sports-command-actions {
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Operations section labels were rendered inline with their helper copy. */
body[data-panel-page="operations"] .operations-notification-builder {
  display: grid;
  gap: 10px;
  min-width: 0;
}

body[data-panel-page="operations"] .operations-notification-builder > div:not(.operations-choice-grid) {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body[data-panel-page="operations"] .operations-notification-builder > div:not(.operations-choice-grid) > strong,
body[data-panel-page="operations"] .operations-notification-builder > div:not(.operations-choice-grid) > small {
  display: block;
}

body[data-panel-page="operations"] .operations-notification-builder > div:not(.operations-choice-grid) > small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

/* Balanced empty states: useful on data-light installations without huge
   accidental white gaps. */
body.is-panel-authenticated :where(.empty, .empty-state, .no-data) {
  min-width: 0;
  max-width: 100%;
  padding-inline: 16px;
  text-align: center;
}

/* Drawers/modals never leave controls outside the viewport. */
body.is-panel-authenticated :where(.drawer, .modal, .dialog-panel) {
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
}

body.is-panel-authenticated :where(.drawer-body, .modal-body, .dialog-body) {
  min-width: 0;
  overscroll-behavior: contain;
}

/* -------------------------------------------------------------------------
   Tablet and mobile contract
   ------------------------------------------------------------------------- */
@media (max-width: 992px) {
  :root:is([data-theme="pro"], [data-theme="light"], [data-theme="dark"]) .sidebar {
    width: min(310px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
  }

  body.is-panel-authenticated :where(.page-header, .page-head, .sports-command-head) {
    align-items: stretch;
  }

  body.is-panel-authenticated :where(.page-actions, .sports-command-actions) {
    justify-content: flex-start;
  }

  body[data-panel-page="operations"] .operations-notification-grid,
  body[data-panel-page="operations"] .operations-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  :root:is([data-theme="pro"], [data-theme="light"], [data-theme="dark"]) .content {
    width: 100%;
    padding-inline: var(--koko-mobile-gutter);
  }

  body.is-panel-authenticated :where(.page-actions, .form-actions, .sports-command-actions) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 7px;
  }

  body.is-panel-authenticated :where(.page-actions, .form-actions, .sports-command-actions) > * {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

  body.is-panel-authenticated :where(.page-actions, .form-actions, .sports-command-actions) > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  body.is-panel-authenticated :where(.card-head, .table-card > .card-head) {
    align-items: stretch;
  }

  body.is-panel-authenticated :where(.card-head, .table-card > .card-head) > :where(.btn, button, a) {
    align-self: flex-start;
  }

  body[data-panel-page="sports"] .sports-filterbar:not(.sports-hierarchy-search) {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-panel-page="sports"] .sports-filterbar > .btn-icon {
    width: 100%;
  }

  body[data-panel-page="operations"] .operations-notification-grid,
  body[data-panel-page="operations"] .operations-choice-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.is-panel-authenticated :where(.drawer, .modal, .dialog-panel) {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
}

@media (max-width: 480px) {
  body.is-panel-authenticated :where(.page-actions, .form-actions, .sports-command-actions) {
    grid-template-columns: minmax(0, 1fr);
  }

  body.is-panel-authenticated :where(.page-actions, .form-actions, .sports-command-actions) > * {
    grid-column: 1;
  }

  body.is-panel-authenticated :where(.metric-grid, .stat-grid, .grid-stats, .compact-metrics) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.is-panel-authenticated :where(.card, .panel-card, .table-card) {
    border-radius: 8px;
  }
}

@media (hover: none), (pointer: coarse) {
  body.is-panel-authenticated :where(.btn, .icon-btn, .btn-icon, button, summary) {
    min-height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.is-panel-authenticated *,
  body.is-panel-authenticated *::before,
  body.is-panel-authenticated *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}