/**
 * Global responsive rules - landing, admin, auth.
 * Loaded after theme / admin-shared on all pages.
 */

/* Safe area (notched phones) */
@supports (padding: max(0px)) {
  body {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
}

/* Touch: avoid 300ms delay on taps */
button,
a.btn,
[role="button"] {
  touch-action: manipulation;
}

/* ── Landing (#app) - horizontal overflow ── */
@media (max-width: 639.98px) {
  #app {
    overflow-x: hidden;
  }

  #app .max-w-7xl {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  #app .max-w-5xl {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  #app .max-w-3xl {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* ── Admin top nav: hamburger + overlay links (≤991px) ── */
.admin-nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--tn-border-strong, rgba(255, 255, 255, 0.12));
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
}

.admin-nav-burger-bar {
  display: block;
  width: 1.1rem;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.85;
}

html[data-theme="light"] .admin-nav-burger {
  background: #fff;
  border-color: rgba(15, 23, 42, 0.12);
  color: #0f1419;
}

@media (min-width: 992px) {
  .admin-nav-links {
    display: flex !important;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
  }

  .admin-nav-burger {
    display: none !important;
  }
}

@media (max-width: 991.98px) {
  .admin-nav {
    height: auto !important;
    min-height: var(--admin-nav-height, 4.25rem);
  }

  .admin-nav-inner {
    flex-wrap: nowrap !important;
    align-items: center !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    min-height: var(--admin-nav-height, 4.25rem);
  }

  .admin-nav-burger {
    display: inline-flex;
    margin-left: auto;
  }

  .admin-nav-links {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: calc(var(--admin-nav-height, 4.25rem) + env(safe-area-inset-top, 0px)) 1rem 1.5rem;
    margin: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(5, 5, 5, 0.97);
    border: none;
  }

  html[data-theme="light"] .admin-nav-links {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06);
  }

  .admin-nav-links.is-open {
    display: flex;
  }

  .admin-nav-links .btn-tn-ghost,
  .admin-nav-links .btn-tn-primary {
    justify-content: center;
    width: 100%;
    text-align: center;
  }

  .admin-nav-links .btn-tn-theme {
    align-self: center;
  }

  body.admin-nav-open {
    overflow: hidden;
  }
}

/* ── Admin page content ── */
@media (max-width: 767.98px) {
  .admin-page {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 5rem !important;
  }

  .admin-title {
    font-size: 1.4rem !important;
  }

  .tn-toolbar {
    flex-direction: column;
    align-items: stretch !important;
  }

  .tn-search {
    max-width: none !important;
  }

  .tn-table-wrap {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0.5rem;
  }

  .tn-table thead th,
  .tn-table tbody td {
    padding-left: 0.65rem !important;
    padding-right: 0.65rem !important;
    font-size: 0.8125rem !important;
  }

  .tn-badges {
    justify-content: flex-start !important;
  }

  .modal-dialog {
    margin: 0.75rem !important;
  }

  .modal-fullscreen-sm-down {
    max-width: none !important;
  }
}

/* ── Knowledge base / lead edit wrap ── */
@media (max-width: 767.98px) {
  .wrap {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 4.5rem !important;
  }

  .kb-textarea {
    min-height: 280px !important;
  }

  .toolbar {
    flex-direction: column;
    align-items: stretch !important;
  }

  .btn-save,
  .btn-compact {
    width: 100%;
    justify-content: center;
  }
}

/* ── Login / auth cards ── */
@media (max-width: 479.98px) {
  .login-wrap {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 4.5rem !important;
  }

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

  .login-theme-float {
    top: 0.65rem;
    right: 0.65rem;
  }

  a.login-home-logo {
    top: calc((var(--vx-header-h, 3.5rem) - var(--vx-logo-h, 1.625rem)) / 2);
    left: max(var(--vx-page-pad, 1rem), env(safe-area-inset-left, 0px));
  }
}

/* ── Calendar: shorter grid on phones ── */
@media (max-width: 767.98px) {
  #calendar {
    min-height: 420px !important;
    padding: 0.65rem !important;
  }

  .fc-toolbar {
    flex-direction: column;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }

  .fc-toolbar .fc-left,
  .fc-toolbar .fc-right,
  .fc-toolbar .fc-center {
    width: 100%;
    text-align: center;
  }
}

/* ── Billing grid ── */
@media (max-width: 1023.98px) {
  .tn-grid .tn-card {
    grid-column: span 6 !important;
  }
}

@media (max-width: 639.98px) {
  .tn-grid .tn-card {
    grid-column: span 12 !important;
  }
}

/* ── index1.php Bootstrap landing ── */
@media (max-width: 575.98px) {
  .navbar .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .hero .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}