/* NSCRM mobile + native WebView — professional app shell */

:root {
  --nscrm-safe-top: env(safe-area-inset-top, 0px);
  --nscrm-safe-right: env(safe-area-inset-right, 0px);
  --nscrm-safe-bottom: env(safe-area-inset-bottom, 0px);
  --nscrm-safe-left: env(safe-area-inset-left, 0px);
  --nscrm-app-pad: 12px;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

html,
body {
  margin: 0;
  padding: 0;
}

body.nscrm-webview,
body.nscrm-mobile {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: clip !important;
  overscroll-behavior-y: contain;
  overscroll-behavior-x: none;
  padding-top: var(--nscrm-safe-top);
  padding-left: var(--nscrm-safe-left);
  padding-right: var(--nscrm-safe-right);
  padding-bottom: var(--nscrm-safe-bottom);
  box-sizing: border-box;
  position: relative;
}

body.nscrm-webview *,
body.nscrm-mobile * {
  box-sizing: border-box;
}

/* Hide desktop-only chrome in WebView */
body.nscrm-webview [data-lte-toggle="fullscreen"],
body.nscrm-webview .nav-link[data-lte-toggle="fullscreen"] {
  display: none !important;
}

/*
 * AdminLTE reserves a sidebar grid column on phones. Collapse to one column
 * so main content is full-bleed like a native app.
 */
@media (max-width: 991.98px) {
  .app-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: clip !important;
    margin: 0 !important;
  }

  .app-header,
  .app-main,
  .app-footer {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .app-sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1040;
    width: min(var(--lte-sidebar-width, 250px), 86vw) !important;
    min-width: 0 !important;
    max-width: min(var(--lte-sidebar-width, 250px), 86vw) !important;
    margin-left: calc(-1 * min(var(--lte-sidebar-width, 250px), 86vw)) !important;
    transition: margin-left 0.25s ease !important;
  }

  body.sidebar-open .app-sidebar {
    margin-left: 0 !important;
  }

  .app-main,
  .app-content,
  .app-content > .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: clip;
  }

  .app-content,
  .app-main .app-content-header,
  .content-wrapper > .content {
    padding-left: var(--nscrm-app-pad) !important;
    padding-right: var(--nscrm-app-pad) !important;
  }

  /* Compact brand bar */
  body > nav.navbar {
    position: sticky;
    top: 0;
    z-index: 1050;
    padding: 0.45rem var(--nscrm-app-pad) !important;
  }

  body > nav.navbar .container-fluid {
    flex-wrap: nowrap;
    gap: 0.35rem;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body > nav.navbar .navbar-brand {
    min-width: 0;
    max-width: 55%;
    overflow: hidden;
  }

  body > nav.navbar .navbar-brand span {
    font-size: 15px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 100%;
    vertical-align: middle;
  }

  body > nav.navbar .navbar-nav.ms-auto {
    flex-shrink: 0;
    gap: 0.15rem;
  }

  body > nav.navbar .nav-link {
    padding-left: 0.4rem !important;
    padding-right: 0.4rem !important;
    margin: 0 !important;
  }

  /* Slim AdminLTE header — keep menu toggle, drop noisy demo widgets */
  .app-header .navbar-nav .nav-item.d-none.d-md-block,
  .app-header .nav-item.dropdown,
  .app-header [data-widget="navbar-search"],
  body.nscrm-webview .app-header .nav-item.dropdown {
    display: none !important;
  }

  .app-header .navbar-nav .nav-link {
    padding-left: 0.55rem;
    padding-right: 0.55rem;
  }

  .card {
    margin-bottom: 0.85rem;
    border-radius: 12px;
  }

  .card-header {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .card-tools {
    margin-left: 0 !important;
  }

  /* Toolbars wrap cleanly */
  .app-content .d-flex.justify-content-between,
  .app-content .d-flex.align-items-center.gap-2,
  .app-content .d-flex.align-items-center.gap-3 {
    flex-wrap: wrap !important;
    max-width: 100%;
    gap: 0.5rem !important;
  }

  .app-content .input-group {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Chip-style horizontal filters — scroll inside, never shift the page */
  .nscrm-hscroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-bottom: 2px;
  }

  .app-content .btn-group,
  .nscrm-hscroll > .btn-group {
    display: inline-flex;
    flex-wrap: nowrap;
    width: max-content;
    max-width: none;
    margin: 0;
  }

  .app-content .btn-group > .btn,
  .app-content .btn-group > a.btn,
  .nscrm-hscroll .btn-group > .btn,
  .nscrm-hscroll .btn-group > a.btn {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 0.875rem;
  }

  .btn-toolbar {
    flex-wrap: wrap;
    gap: 0.35rem;
    max-width: 100%;
  }

  .table-responsive,
  .card-body > .table-responsive,
  .content .table-responsive,
  .app-content .table-responsive {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    max-width: 100%;
    overscroll-behavior-x: contain;
  }

  .table-responsive > .table {
    min-width: 640px;
  }

  .app-content .card-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .small-box h3 {
    font-size: 1.55rem !important;
  }

  .small-box .small-box-icon {
    font-size: 48px !important;
  }

  .rbac-toast {
    left: 12px;
    right: 12px;
    top: calc(12px + var(--nscrm-safe-top));
    min-width: 0;
  }

  .login-box,
  .register-box {
    width: 100% !important;
    margin: 0.75rem auto !important;
  }
}

@media (max-width: 575.98px) {
  .btn:not(.btn-sm):not(.btn-xs) {
    min-height: 40px;
  }

  input.form-control,
  select.form-control,
  textarea.form-control,
  .form-select {
    font-size: 16px !important;
  }

  .modal-dialog {
    margin: 0.5rem;
  }

  .dropdown-menu {
    max-width: min(100vw - 1rem, 320px);
  }

  /* Primary actions feel app-like */
  .app-content .btn-primary {
    border-radius: 10px;
  }
}

body.nscrm-webview .app-header.fixed-top,
body.nscrm-webview .app-header.sticky-top,
body.nscrm-webview nav.app-header {
  padding-top: 0;
}