/**
 * Spire Hosting client area — shared mobile / tablet improvements.
 * Loaded after style.css + responsive.css. Desktop (≥992px) stays largely untouched.
 */

:root {
  --cm-space-1: 0.25rem;
  --cm-space-2: 0.5rem;
  --cm-space-3: 0.75rem;
  --cm-space-4: 1rem;
  --cm-space-5: 1.25rem;
  --cm-space-6: 1.5rem;
  --cm-touch: 44px;
  --cm-header-h: 64px;
  --cm-drawer-w: min(20rem, 88vw);
  --cm-radius: var(--radius-card, 16px);
  --cm-safe-x: max(1rem, env(safe-area-inset-left, 0px));
  --cm-safe-r: max(1rem, env(safe-area-inset-right, 0px));
}

/* —— Mobile nav drawer backdrop —— */
.mobile-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1025;
  background: rgba(19, 17, 38, 0.48);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.2s ease;
  border: 0;
  padding: 0;
  cursor: pointer;
}

body.menu-open-mobile .mobile-nav-backdrop {
  display: block;
  opacity: 1;
}

@media screen and (max-width: 767.98px) {
  .app-wrapper > nav {
    z-index: 1030;
    max-width: var(--cm-drawer-w);
    box-shadow: 0 0 0 transparent;
    transition: width 0.25s ease, box-shadow 0.25s ease;
  }

  .app-wrapper > nav.semi-nav {
    box-shadow: 8px 0 32px rgba(19, 17, 38, 0.22);
  }

  .app-wrapper > nav.semi-nav .toggle-semi-nav {
    min-width: var(--cm-touch);
    min-height: var(--cm-touch);
  }

  header.header-main {
    z-index: 1020;
    padding-left: 0 !important;
  }

  header.header-main .container-fluid {
    padding: 0.65rem var(--cm-safe-x) !important;
  }

  header.header-main .header-toggle {
    min-width: var(--cm-touch);
    min-height: var(--cm-touch);
    border-radius: 12px;
  }

  header.header-main .header-toggle:focus-visible {
    outline: 2px solid var(--brand-primary, #2948fa);
    outline-offset: 2px;
  }

  header.header-main .header-mobile-logo-img {
    max-height: 32px;
  }

  header.header-main .head-icon {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Prevent theme rule that shrinks main oddly on small phones */
  .app-content main,
  main {
    width: 100% !important;
    max-width: 100%;
  }

  .app-wrapper .app-content {
    padding-left: 0 !important;
    padding-top: calc(var(--cm-header-h) + 0.25rem);
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    overflow-x: clip;
  }

  .app-content .container-fluid,
  .app-content .container-xxl {
    padding-left: var(--cm-safe-x);
    padding-right: var(--cm-safe-r);
    max-width: 100%;
  }

  /* Page titles / breadcrumbs — compact hierarchy */
  .app-line-breadcrumbs {
    flex-wrap: wrap;
    row-gap: 0.25rem;
    margin-bottom: 0.75rem !important;
  }

  .app-line-breadcrumbs li {
    font-size: 0.8125rem;
  }

  .main-title,
  .page-title h4,
  h4.main-title {
    font-size: 1.25rem !important;
    line-height: 1.3;
    margin-bottom: 0.5rem;
    word-break: break-word;
  }

  h1 { font-size: 1.75rem !important; }
  h2 { font-size: 1.5rem !important; }
  h3 { font-size: 1.25rem !important; }
  h4 { font-size: 1.125rem !important; }

  /* Cards */
  .app-content .card {
    border-radius: var(--cm-radius);
    margin-bottom: 1rem;
  }

  .app-content .card-header {
    padding: 0.85rem 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .app-content .card-body {
    padding: 1rem;
  }

  .app-content .card-header .btn,
  .app-content .card-header .btn-group {
    width: 100%;
  }

  .app-content .card-header .btn-group > .btn {
    flex: 1 1 auto;
  }

  /* Dashboard stats: keep 2-col grid, tighter cards */
  .client-dashboard-modern .eshop-cards-container {
    padding-left: 0;
    padding-right: 0;
  }

  .client-dashboard-modern .client-dashboard-stats {
    flex-wrap: wrap !important;
  }

  .client-dashboard-modern .client-dashboard-stats > [class*="col-"] {
    margin-bottom: 0.5rem;
  }

  .client-dashboard-modern .eshop-cards-container .card {
    height: 100%;
    margin-bottom: 0;
  }

  .client-dashboard-modern .eshop-cards-container .eshop-icon-box {
    width: 40px !important;
    height: 40px !important;
    margin-top: 0.75rem !important;
  }

  .client-dashboard-modern .eshop-cards-container .eshop-cards {
    padding: 0.75rem 0.85rem 1rem !important;
  }

  .client-dashboard-modern .eshop-cards-container .eshop-cards h3 {
    font-size: 1.5rem !important;
    margin-bottom: 0.15rem !important;
  }

  .client-dashboard-modern .eshop-cards-container .eshop-cards p {
    font-size: 0.75rem !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.25;
    min-height: 2.2em;
  }

  .client-dashboard-modern .list-group-item {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .client-dashboard-modern .list-group-item .btn {
    margin-left: 0 !important;
  }

  .client-dashboard-modern .open-renew-modal {
    width: 100%;
    margin-top: 0.35rem;
  }

  /* Prevent overflow from long domains / invoices */
  .app-content,
  .app-content .card,
  .app-content .table,
  .app-content td,
  .app-content th {
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }

  .app-content a,
  .app-content .badge {
    overflow-wrap: anywhere;
  }

  /* —— Tables: usable horizontal scroll + card-style for enhanced tables —— */
  .app-content .table-responsive,
  .app-content .dataTables_wrapper {
    max-width: 100%;
  }

  .app-content .table-responsive {
    margin-left: calc(-1 * var(--cm-safe-x) + 0.25rem);
    margin-right: calc(-1 * var(--cm-safe-r) + 0.25rem);
    padding-left: calc(var(--cm-safe-x) - 0.25rem);
    padding-right: calc(var(--cm-safe-r) - 0.25rem);
    -webkit-overflow-scrolling: touch;
  }

  .app-content table.display,
  .app-content table.row-border-table,
  .app-content table.dataTable {
    min-width: 640px;
  }

  /* Card-stack pattern (opt-in via .mobile-card-table or auto-enhanced) */
  table.mobile-card-table {
    min-width: 0 !important;
    width: 100% !important;
  }

  table.mobile-card-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }

  table.mobile-card-table tbody,
  table.mobile-card-table tbody tr {
    display: block;
    width: 100%;
  }

  table.mobile-card-table tbody tr {
    background: var(--surface-1, #fff);
    border: 1px solid var(--border-soft, rgba(19, 17, 38, 0.08));
    border-radius: 14px;
    margin-bottom: 0.75rem;
    padding: 0.65rem 0.85rem;
    box-shadow: var(--shadow-sm, 0 10px 30px rgba(19, 17, 38, 0.05));
  }

  table.mobile-card-table tbody td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100% !important;
    border: 0 !important;
    padding: 0.4rem 0 !important;
    text-align: right;
    white-space: normal !important;
  }

  table.mobile-card-table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-muted, rgba(19, 17, 38, 0.6));
    text-align: left;
    flex: 0 0 38%;
    max-width: 42%;
  }

  table.mobile-card-table tbody td:first-child {
    font-weight: 600;
    font-size: 1rem;
    padding-bottom: 0.55rem !important;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--border-soft, rgba(19, 17, 38, 0.08)) !important;
  }

  table.mobile-card-table tbody td:first-child::before {
    display: none;
  }

  table.mobile-card-table tbody td .btn,
  table.mobile-card-table tbody td .btn-group {
    margin-top: 0.15rem;
  }

  /* DataTables chrome */
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    float: none !important;
    text-align: left !important;
    width: 100%;
    margin-bottom: 0.75rem;
  }

  .dataTables_wrapper .dataTables_filter input,
  .dataTables_wrapper .dataTables_length select {
    min-height: var(--cm-touch);
    width: 100% !important;
    max-width: 100%;
  }

  .dataTables_wrapper .dataTables_paginate .paginate_button {
    min-height: 40px;
    min-width: 40px;
    padding: 0.4rem 0.65rem !important;
  }

  .domains-dt-toolbar .row,
  .domains-dt-toolbar [class*="col-"] {
    width: 100%;
    max-width: 100%;
  }

  .domains-dt-toolbar {
    padding: 0.85rem !important;
  }

  .domains-dt-toolbar .btn,
  .domains-dt-toolbar .btn-group {
    width: 100%;
  }

  .domains-dt-search-wrap input {
    width: 100% !important;
    min-height: var(--cm-touch);
  }

  /* Invoice / ticket action columns */
  .app-content table .btn-group {
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .app-content table td .btn {
    white-space: nowrap;
  }

  /* —— Forms & buttons —— */
  .app-content .form-control,
  .app-content .form-select,
  .app-content .btn:not(.btn-sm):not(.btn-xs):not(.btn-close):not(.page-link) {
    min-height: var(--cm-touch);
  }

  .app-content .btn-sm {
    min-height: 40px;
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }

  .app-content form .row > [class*="col-"] {
    margin-bottom: 0.75rem;
  }

  .app-content .btn-group-actions,
  .app-content .d-flex.gap-2.flex-wrap {
    width: 100%;
  }

  .app-content .action-bar-mobile-stack .btn,
  .app-content .card-footer .btn:not(.btn-link) {
    width: 100%;
  }

  /* Stack primary action pairs */
  .app-content .d-flex.justify-content-between.align-items-center.gap-2 {
    flex-wrap: wrap;
  }

  /* —— Modals / offcanvas —— */
  .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100vw - 1rem);
  }

  .modal-dialog.modal-lg,
  .modal-dialog.modal-xl,
  .modal-dialog.modal-fullscreen-sm-down {
    max-width: calc(100vw - 1rem);
  }

  .modal-content {
    border-radius: 16px;
    max-height: calc(100dvh - 1rem);
    display: flex;
    flex-direction: column;
  }

  .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1rem;
  }

  .modal-header,
  .modal-footer {
    padding: 0.85rem 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .modal-footer > * {
    margin: 0 !important;
  }

  .modal-footer .btn {
    flex: 1 1 auto;
    min-width: calc(50% - 0.35rem);
  }

  .offcanvas {
    max-width: min(100vw, 22rem);
  }

  .offcanvas-header {
    padding: 1rem;
  }

  .dropdown-menu {
    max-width: min(100vw - 1.5rem, 22rem);
  }

  /* Impersonation banner */
  .impersonation-banner {
    font-size: 0.8125rem;
    padding: 0.65rem 0.75rem !important;
    line-height: 1.4;
  }

  .impersonation-banner .btn {
    display: inline-flex;
    margin: 0.35rem 0 0 !important;
    margin-left: 0 !important;
  }

  /* AI chat / floating widgets — keep clear of content */
  .go-top {
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    right: 0.75rem;
  }
}

/* Extra-narrow phones */
@media screen and (max-width: 374.98px) {
  :root {
    --cm-safe-x: max(0.75rem, env(safe-area-inset-left, 0px));
    --cm-safe-r: max(0.75rem, env(safe-area-inset-right, 0px));
  }

  header.header-main .header-mobile-logo-img {
    max-height: 28px;
  }

  .app-content .card-body {
    padding: 0.85rem;
  }
}

/* Large phones: comfortable 2-column dashboard stats when Bootstrap cols allow */
@media screen and (min-width: 430px) and (max-width: 767.98px) {
  .client-dashboard-stats > [class*="col-"],
  .dashboard-stat-grid > [class*="col-"] {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* Tablet */
@media screen and (min-width: 768px) and (max-width: 991.98px) {
  .app-wrapper .app-content {
    padding-left: 0 !important;
  }

  .app-content .container-fluid {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .modal-dialog.modal-lg {
    max-width: min(720px, calc(100vw - 2rem));
  }
}

/* Auth pages (login / register / forgot) — no sidebar */
@media screen and (max-width: 767.98px) {
  body.login-page .login-page-inner {
    padding: 1rem 0.85rem 2rem;
    align-items: flex-start;
  }

  body.login-page .login-form-container .form_container.login-auth-card {
    padding: 1.35rem 1.15rem 1.25rem;
  }

  body.login-page .login-auth-brand-block {
    padding: 1.15rem 1rem 1.25rem;
  }

  body.login-page .btn-primary,
  body.login-page button[type="submit"] {
    min-height: var(--cm-touch);
    width: 100%;
  }

  body.login-page .form-control {
    min-height: var(--cm-touch);
  }

  /* Invoice views — stack totals / pay CTA */
  .hostus-invoice-pdf__totals,
  .gowebit-invoice-pdf__totals,
  .spire-invoice-pdf__totals {
    width: 100% !important;
    max-width: 100%;
    margin-left: 0 !important;
  }

  .hostus-invoice-pdf__footer,
  .spire-invoice-pdf__footer,
  .gowebit-invoice-pdf__footer {
    display: flex !important;
    flex-direction: column;
    gap: 1rem;
  }

  .hostus-invoice-pdf__thanks,
  .hostus-invoice-pdf__pay-btn,
  .spire-invoice-pdf__thanks,
  .spire-invoice-pdf__pay-btn {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
  }

  .hostus-invoice-pdf__pay-btn,
  .spire-invoice-pdf__pay-btn {
    text-align: center !important;
  }

  .hostus-invoice-pdf__table,
  .spire-invoice-pdf__table,
  .gowebit-invoice-pdf__table,
  .invoice-container table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .invoice-container,
  .hostus-invoice-pdf,
  .spire-invoice-pdf {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  .mobile-nav-backdrop,
  .app-wrapper > nav {
    transition: none !important;
  }
}