/* Final responsive layer. Loaded after the accumulated desktop theme. */

/* Keep the sidebar as one vertically scrollable list even in wide, short
   windows. Bootstrap's wrapping nav otherwise creates clipped columns. */
.app-sidebar .nav.flex-column{
  flex:1 1 auto;
  min-height:0;
  flex-wrap:nowrap !important;
  align-content:stretch !important;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  touch-action:pan-y;
  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
}

.app-sidebar .nav-link{
  flex:0 0 auto;
  width:100% !important;
}

.app-sidebar .nav.flex-column::-webkit-scrollbar{
  display:none;
  width:0;
  height:0;
}

@media (max-width: 1199.98px){
  html,
  body{
    max-width:100%;
    overflow-x:hidden;
  }

  body.mobile-nav-open{
    overflow:hidden !important;
  }

  .app,
  .app > .flex-grow-1,
  .app-content,
  .app-content > .container-xxl{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }

  .app > .flex-grow-1,
  html.sidebar-collapsed .app > .flex-grow-1{
    margin-left:0 !important;
  }

  .app-sidebar,
  html.sidebar-collapsed .app-sidebar{
    position:fixed !important;
    inset:0 auto 0 0 !important;
    z-index:1040 !important;
    display:flex !important;
    flex-direction:column !important;
    width:min(320px,92vw) !important;
    max-width:min(320px,92vw) !important;
    height:100dvh !important;
    min-height:100dvh !important;
    padding-top:max(12px,env(safe-area-inset-top)) !important;
    padding-bottom:max(18px,env(safe-area-inset-bottom)) !important;
    overflow:hidden !important;
    transform:translateX(-105%) !important;
    transition:transform .22s ease-out !important;
  }

  .app-sidebar.show,
  html.sidebar-collapsed .app-sidebar.show{
    transform:translateX(0) !important;
  }

  .app-sidebar .brand{
    flex:0 0 auto;
  }

  .sidebar-mobile-close{
    display:inline-grid !important;
  }

  .sidebar-mobile-meta{
    display:grid !important;
  }

  .sidebar-collapse-btn{
    display:none !important;
  }

  .app-sidebar .nav.flex-column{
    flex:1 1 auto;
  }

  .app-sidebar .nav-link{
    min-height:44px;
  }

  .app-sidebar-backdrop{
    display:block !important;
    position:fixed;
    inset:0;
    z-index:1035;
    border:0;
    background:rgba(2,6,23,.72);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
    backdrop-filter:blur(3px);
  }

  body.mobile-nav-open .app-sidebar-backdrop{
    opacity:1;
    pointer-events:auto;
  }

  .app-topbar{
    position:sticky !important;
    top:0;
    z-index:1020 !important;
    width:100%;
    min-width:0;
    min-height:60px;
    height:auto !important;
    padding-top:max(.45rem,env(safe-area-inset-top));
    padding-right:max(.75rem,env(safe-area-inset-right)) !important;
    padding-bottom:.45rem;
    padding-left:max(.75rem,env(safe-area-inset-left)) !important;
  }

  .app-topbar-leading{
    flex:1 1 auto;
    min-width:0;
  }

  .app-topbar-trailing{
    flex:0 0 auto;
    min-width:0;
  }

  .app-topbar :is(#sidebarToggle,#themeToggle,#incidentNotificationTrigger,.app-logout-button){
    width:42px;
    min-width:42px;
    min-height:42px;
    padding:0 !important;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
  }

  .app-logout-button span{
    display:none !important;
  }

  .spk-page-title{
    max-width:min(58vw,28rem) !important;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.88rem;
    letter-spacing:.11em;
  }

  .app-content{
    padding-top:1rem !important;
    padding-right:max(.75rem,env(safe-area-inset-right)) !important;
    padding-bottom:max(1.5rem,env(safe-area-inset-bottom)) !important;
    padding-left:max(.75rem,env(safe-area-inset-left)) !important;
    overflow-x:hidden !important;
  }

  .app-content :is(.row,[class^="col-"],[class*=" col-"],.card,.card-body,.card-header,.tab-content,.tab-pane,form){
    min-width:0;
    max-width:100%;
  }

  .app-content :is(h1,h2,h3,.h1,.h2,.h3){
    overflow-wrap:anywhere;
  }

  .app-content :is(.nav-tabs,.nav-pills,.client-primary-nav,.reports-tabs){
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    flex-wrap:nowrap !important;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }

  .app-content :is(.nav-tabs,.nav-pills,.client-primary-nav,.reports-tabs) > *{
    flex:0 0 auto;
  }

  .table-responsive,
  .spk-table-wrapper{
    width:100%;
    max-width:100%;
    overflow-x:auto !important;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
  }

  body :is(.table,.spk-table,.spk-dash-table,.spk-employee-table){
    min-width:640px !important;
  }

  body :is(#clientsTable,.incident-list-table,.client-incident-table,.client-event-table,.spk-logs-event-table){
    min-width:0 !important;
    max-width:100% !important;
  }

  body :is(.clients-table-responsive,.incident-list-responsive,.client-incident-responsive),
  body .client-events-list > .table-responsive,
  body .card-body > .table-responsive:has(.spk-logs-event-table){
    max-height:none !important;
  }

  pre,
  code,
  .font-monospace{
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
}

@media (max-width: 991.98px){
  body[data-theme] .app-content .mobile-flat-list-shell{
    overflow:visible !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  body[data-theme] .app-content .mobile-flat-list-shell > .card-body{
    padding:0 !important;
    background:transparent !important;
  }

  body[data-theme] .app-content .mobile-flat-list tbody tr:is([data-event-id],[data-incident-url]){
    overflow:hidden;
    isolation:isolate;
  }

  body[data-theme] .app-content .mobile-flat-list tbody tr:is([data-event-id],[data-incident-url]) > td{
    min-width:0 !important;
    max-width:100% !important;
    border:0 !important;
    background:transparent !important;
    background-color:transparent !important;
    box-shadow:none !important;
  }

  body[data-theme] .app-content .mobile-flat-list :is(
    .incident-card-main,
    .incident-card-title,
    .incident-card-meta,
    .incident-card-summary,
    .event-row-title,
    .event-row-summary,
    .event-policy-hit,
    .spk-logs-client-name,
    .spk-logs-time
  ){
    min-width:0 !important;
    max-width:100% !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  .app-content :is(
    .entity-card-title,
    .entity-card-subtitle,
    .entity-card-description,
    .client-fact-value,
    .client-card-meta-grid dd,
    .command-row-title,
    .command-row-meta,
    .event-field-value
  ){
    min-width:0;
    max-width:100%;
    white-space:normal !important;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  .app-content > .container-xxl{
    padding-inline:0 !important;
  }

  .card{
    border-radius:12px !important;
  }

  .card-header{
    min-height:48px;
    padding:.72rem .8rem !important;
    flex-wrap:wrap;
    gap:.55rem;
  }

  .card-body{
    padding:.82rem !important;
  }

  .app-content > .container-xxl > .d-flex,
  .app-content .page-actions,
  .app-content .toolbar-actions{
    flex-wrap:wrap;
    gap:.6rem;
  }

  .app-content :is(.form-control,.form-select,textarea.form-control){
    min-height:44px;
    font-size:16px !important;
  }

  .app-content :is(.btn,.spk-btn):not(.btn-sm){
    min-height:44px;
  }

  .spk-login-landing{
    min-height:calc(100dvh - 92px);
    align-items:center;
  }

  .spk-login-card{
    width:100%;
    align-self:center !important;
  }

  body:has(.spk-login-landing) .app-topbar-trailing{
    display:none !important;
  }

  body:has(.spk-login-landing) .spk-page-title{
    max-width:calc(100vw - 86px) !important;
  }

  .input-group{
    flex-wrap:wrap;
    gap:.5rem;
  }

  .input-group > :is(.form-control,.form-select){
    width:100%;
    flex:1 0 100%;
    border-radius:10px !important;
  }

  .input-group > .btn{
    flex:1 1 auto;
    border-radius:999px !important;
  }

  .modal-dialog,
  .modal-dialog.modal-lg,
  .modal-dialog.modal-xl{
    width:auto;
    max-width:none;
    margin:.5rem;
  }

  .modal-content{
    max-height:calc(100dvh - 1rem);
    border-radius:14px !important;
  }

  .modal-header,
  .modal-body,
  .modal-footer{
    padding:.85rem !important;
  }

  .modal-body{
    overflow-y:auto;
  }

  .modal-footer{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.55rem;
  }

  .modal-footer > :is(.btn,form),
  .modal-footer > form > .btn{
    width:100%;
    margin:0 !important;
  }

  .spk-search-actions{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .spk-search-actions > :last-child{
    grid-column:1 / -1;
  }

  .spk-search-actions .btn{
    width:100%;
  }

  .client-profile-title{
    font-size:clamp(1.35rem,7vw,2rem) !important;
  }

  .screenshot-grid img,
  .screen-frame,
  .live-screen-shell,
  canvas,
  svg{
    max-width:100%;
  }

  /* Compact administrative lists become readable cards on phones. */
  .table-responsive:has(.mobile-card-table){
    max-height:none !important;
    overflow:visible !important;
    border:0 !important;
    background:transparent !important;
  }

  body .mobile-card-table{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    background:transparent !important;
  }

  .mobile-card-table thead{
    display:none !important;
  }

  .mobile-card-table tbody{
    display:grid !important;
    gap:.75rem;
    width:100%;
  }

  .mobile-card-table tbody tr:not(.mobile-table-empty){
    display:block !important;
    width:100%;
    padding:.35rem .8rem;
    border:1px solid var(--border-subtle) !important;
    border-radius:12px;
    background:var(--bg-elevated) !important;
    box-shadow:0 10px 26px rgba(2,6,23,.16);
  }

  body[data-theme] .mobile-card-table tbody tr:not(.mobile-table-empty) > td{
    display:grid !important;
    grid-template-columns:minmax(6.8rem,38%) minmax(0,1fr);
    gap:.65rem;
    align-items:start;
    width:100% !important;
    max-width:100% !important;
    padding:.55rem 0 !important;
    border:0 !important;
    border-bottom:1px solid rgba(118,134,178,.14) !important;
    background:transparent !important;
    white-space:normal !important;
    overflow-wrap:anywhere;
    text-align:left !important;
  }

  body[data-theme] .mobile-card-table tbody tr:not(.mobile-table-empty) > td:last-child{
    border-bottom:0 !important;
  }

  .mobile-card-table td[data-label]::before{
    content:attr(data-label);
    color:var(--text-muted);
    font-family:"IBM Plex Mono",Consolas,monospace;
    font-size:.65rem;
    font-weight:700;
    letter-spacing:.1em;
    line-height:1.4;
    text-transform:uppercase;
  }

  body[data-theme] .mobile-card-table td.mobile-card-primary{
    display:block !important;
    padding-top:.72rem !important;
    font-size:1rem;
  }

  .mobile-card-table td.mobile-card-primary::before{
    display:block;
    margin-bottom:.3rem;
  }

  body[data-theme] .mobile-card-table td.mobile-card-actions{
    display:flex !important;
    flex-wrap:wrap;
    align-items:stretch;
    gap:.5rem;
    padding-bottom:.72rem !important;
  }

  .mobile-card-table td.mobile-card-actions::before{
    flex:1 0 100%;
  }

  .mobile-card-table td.mobile-card-actions :is(form,.btn){
    flex:1 1 auto;
    margin:0 !important;
  }

  .mobile-card-table td.mobile-card-actions form .btn{
    width:100%;
  }

  .mobile-card-table .mobile-table-empty{
    display:block !important;
    border:1px solid var(--border-subtle) !important;
    border-radius:12px;
  }

  body[data-theme] .mobile-card-table .mobile-table-empty > td{
    display:block !important;
    width:100% !important;
    background:transparent !important;
    white-space:normal !important;
  }

  .policy-workbench .pw-policy-card,
  .policy-workbench .pw-editor-body{
    padding:.9rem !important;
  }

  .policy-workbench .pw-policy-top,
  .policy-workbench .pw-panel-head,
  .policy-workbench .pw-section-heading,
  .policy-workbench .pw-rules-footer,
  .policy-workbench .pw-savebar{
    align-items:stretch;
    flex-direction:column;
  }

  .policy-workbench .pw-savebar{
    position:static;
  }

  .policy-workbench .pw-save-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .policy-workbench .pw-save-actions .btn,
  .policy-workbench .pw-section-heading > .btn{
    width:100%;
  }
}

@media (max-width: 479.98px){
  .spk-page-title{
    max-width:52vw !important;
    font-size:.78rem;
    letter-spacing:.08em;
  }

  .modal-footer{
    grid-template-columns:1fr;
  }

  .app-content :is(.btn-group,.client-pager){
    max-width:100%;
    overflow-x:auto;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
  }

  .corner-notifications{
    right:.65rem !important;
    bottom:max(.65rem,env(safe-area-inset-bottom)) !important;
    width:calc(100vw - 1.3rem) !important;
  }
}

.sidebar-mobile-theme{background:none;border:0;padding:0;text-align:left;min-height:44px;width:100%;cursor:pointer}
.sidebar-mobile-theme:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:1199.98px){#appTopbar .desktop-theme-toggle{display:none!important}}