/*
 LGFT v4.51.27.4 — Previous Mobile UI Integration Rebase
 Baseline: LGFT v4.51.27.3 TrustBridge mobile header/burger/screen-fit lock.
 Purpose: re-applies the previous mobile header/buttons/overflow integration on top of the attached baseline.
 Scope: SCREEN ONLY. Does not alter print CSS, login, pricing/sync, QR, permissions, DB, .env, uploads, or docs.
*/

@media screen {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { max-width: 100%; overflow-x: hidden; }
  img, svg, video, canvas { max-width: 100%; height: auto; }
}

@media screen and (max-width: 980px) {
  :root {
    --lgft-mobile-burger-size: 46px;
    --lgft-mobile-header-gap: 10px;
  }

  /* Keep the button in the header flow. Earlier locks forced it fixed over the logo. */
  .app-shell-header,
  header.topbar.app-shell-header,
  .topbar.app-shell-header {
    position: sticky !important;
    top: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: var(--lgft-mobile-header-gap) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 64px !important;
    padding: 8px 10px !important;
    overflow: visible !important;
    z-index: 2147483638 !important;
  }

  .app-shell-header .brand-wrap,
  header.topbar.app-shell-header .brand-wrap,
  .topbar.app-shell-header .brand-wrap {
    order: 1 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - var(--lgft-mobile-burger-size) - 12px) !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .app-shell-header .brand-home,
  .topbar.app-shell-header .brand-home {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .app-shell-header .brand-logo,
  .topbar.app-shell-header .brand-logo,
  header img[src*="logo"],
  header img[alt*="logo" i],
  header img[alt*="lionsgate" i] {
    display: block !important;
    flex: 0 0 auto !important;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    max-width: 54px !important;
    max-height: 54px !important;
    object-fit: contain !important;
  }

  .app-shell-header .brand-text,
  .topbar.app-shell-header .brand-text {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .app-shell-header .brand-text strong,
  .topbar.app-shell-header .brand-text strong {
    display: block !important;
    max-width: 100% !important;
    font-size: 12.5px !important;
    line-height: 1.12 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .app-shell-header .brand-text small,
  .topbar.app-shell-header .brand-text small { display: none !important; }

  .mobile-menu-toggle,
  button.mobile-menu-toggle,
  [data-mobile-menu-toggle] {
    order: 2 !important;
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    flex: 0 0 var(--lgft-mobile-burger-size) !important;
    width: var(--lgft-mobile-burger-size) !important;
    min-width: var(--lgft-mobile-burger-size) !important;
    max-width: var(--lgft-mobile-burger-size) !important;
    height: var(--lgft-mobile-burger-size) !important;
    min-height: var(--lgft-mobile-burger-size) !important;
    max-height: var(--lgft-mobile-burger-size) !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    z-index: 2147483647 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  body.mobile-nav-open .mobile-menu-toggle,
  body.mobile-nav-open [data-mobile-menu-toggle],
  html.mobile-nav-open .mobile-menu-toggle,
  html.mobile-nav-open [data-mobile-menu-toggle] {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    margin-left: auto !important;
    z-index: 2147483647 !important;
    pointer-events: auto !important;
  }

  .app-shell-header::before,
  .app-shell-header::after,
  .topbar.app-shell-header::before,
  .topbar.app-shell-header::after {
    pointer-events: none !important;
  }

  .topnav {
    z-index: 2147483635 !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    padding-top: 78px !important;
  }

  body.mobile-nav-open .topnav,
  html.mobile-nav-open .topnav,
  .mobile-nav-open .topnav {
    pointer-events: auto !important;
  }

  body.mobile-nav-open .topnav a,
  body.mobile-nav-open .topnav button,
  body.mobile-nav-open .topnav summary,
  body.mobile-nav-open .topnav .nav-link,
  html.mobile-nav-open .topnav a,
  html.mobile-nav-open .topnav button,
  html.mobile-nav-open .topnav summary,
  html.mobile-nav-open .topnav .nav-link {
    position: relative !important;
    z-index: 2147483640 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
  }
}

@media screen and (max-width: 768px) {
  body,
  .app-shell,
  .page-shell,
  main,
  .container,
  .content,
  .main-content,
  .page,
  .page-content,
  .app-content,
  .admin-content,
  .dashboard,
  .panel,
  .card,
  .box,
  .widget,
  .module,
  .section,
  .field,
  .field-box,
  .form-group,
  .form-row,
  .input-group,
  .filter-box,
  .filters,
  .toolbar-card,
  .portal-card,
  .customer-card,
  .admin-card,
  form,
  fieldset {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
  }

  .card,
  .toolbar-card,
  .panel,
  .section,
  .box,
  .portal-card,
  .customer-card,
  .admin-card,
  fieldset { overflow-x: hidden !important; }

  .grid,
  .grid.two,
  .grid.three,
  .grid.four,
  .form-grid,
  .form-row,
  .row,
  .columns,
  .split,
  .two-col,
  .three-col,
  .four-col,
  .filter-row,
  .toolbar-row,
  .summary-grid,
  .stats-grid,
  .kpi-grid,
  .action-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .input,
  .select,
  .textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .btn,
  button,
  a.btn,
  .button,
  a.button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  [role="button"],
  .action-btn,
  .pill-action {
    min-width: 0 !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    min-height: 38px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    hyphens: auto !important;
    line-height: 1.14 !important;
    text-align: center !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }

  .toolbar-actions,
  .document-actions,
  .form-actions,
  .portal-actions,
  .workflow-actions,
  .button-row,
  .action-row,
  .quick-actions,
  .customer-quick-actions,
  .btn-row,
  .actions,
  .page-actions,
  .card-actions,
  .modal-actions,
  .table-actions,
  .filters-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .toolbar-actions > *,
  .document-actions > *,
  .form-actions > *,
  .portal-actions > *,
  .workflow-actions > *,
  .button-row > *,
  .action-row > *,
  .quick-actions > *,
  .customer-quick-actions > *,
  .btn-row > *,
  .actions > *,
  .page-actions > *,
  .card-actions > *,
  .modal-actions > *,
  .table-actions > *,
  .filters-actions > * {
    flex: 1 1 140px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .table-wrap,
  .table-scroll,
  .table-responsive,
  .datatable-wrap,
  .datatable-container,
  .lgft-mobile-table-scroll,
  .bank-reconciliation-document,
  .document-table-wrap,
  .report-table-wrap,
  .data-table-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .table-wrap > table,
  .table-scroll > table,
  .table-responsive > table,
  .datatable-wrap > table,
  .datatable-container > table,
  .lgft-mobile-table-scroll > table,
  .report-table-wrap > table,
  .data-table-wrap > table {
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
  }

  .badge,
  .pill,
  .status,
  .tag,
  .ref,
  .code,
  .mono,
  .smalltext,
  pre,
  code,
  .alert,
  .notice,
  .help-text,
  .description {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

@media screen and (max-width: 420px) {
  .app-shell-header .brand-logo,
  .topbar.app-shell-header .brand-logo {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
  }
  .app-shell-header .brand-text strong,
  .topbar.app-shell-header .brand-text strong { font-size: 11.5px !important; }
  .mobile-menu-toggle,
  button.mobile-menu-toggle,
  [data-mobile-menu-toggle] {
    --lgft-mobile-burger-size: 42px;
  }
  .toolbar-actions > *,
  .document-actions > *,
  .form-actions > *,
  .button-row > *,
  .quick-actions > * { flex-basis: 100% !important; }
}

@media print {
  /* Deliberately empty. This integration is screen-only and must not alter portrait printing. */
}