/*
 * Mobile specific stylesheet for FireDoor Inspection Suite
 *
 * This file contains mobile-only overrides for smaller screens. Base/shared
 * styles live in style.css and are loaded separately by the layout.
 *
 * The design emphasises a
 * simplified, app‑like experience with a bottom navigation bar,
 * compact spacing and consistent branding. The palette matches the
 * desktop version for a cohesive feel across devices.
 */

/* brand palette aligned with desktop */
/* 
 * Inherit the same palette values used on desktop so the inspection UI 
 * retains a consistent look regardless of viewport size. By aligning 
 * these values with desktop.css we ensure colours, backgrounds and shadows 
 * match on mobile and desktop, reducing visual drift between the two. 
 */
:root {
  --brand: #0052cc;
  --brand-dark: #003d99;
  --text: #2a2a2a;
  /* match desktop background and surface colours */
  --background: var(--card-bg, #f7faff);
  --card: var(--card-bg, #ffffff);
  --success: #0a8754;
  --danger: #c0392b;
  --border: #dfe5f4;
  --surface-muted: #f4f7ff;
  --panel-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

/* === Mobile base overrides (<= 768px) === */
@media (max-width: 768px) {
  html {
    -webkit-text-size-adjust: 100%;
  }

  :where(html, body) {
    overflow-x: hidden;
  }

  body {
    /* Mobile Safari struggles with fixed background attachments (jank/paint). */
    background-attachment: scroll;
  }

  :where(img, svg, video, canvas) {
    max-inline-size: 100%;
    block-size: auto;
  }

  /* Prevent iOS Safari form-field zoom (must be >= 16px). */
  :where(input, select, textarea) {
    font-size: 16px;
  }

  :where(.u-minw-220, .u-minw-180, .u-maxw-180) {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  :where(.content, .admin-shell) {
    overflow-wrap: anywhere;
  }

  :where(.content, .admin-shell, .modal__dialog) :where(input, select, textarea) {
    max-inline-size: 100%;
  }

  :where(.top-bar-search, .component-search) {
    width: 100%;
  }

  :where(.top-bar-search input, .component-search input) {
    min-width: 0;
    width: 100%;
    font-size: 16px;
  }

  /*
   * Quotes / Invoices / RAMs: avoid sideways scrolling on mobile by
   * stacking table rows into cards up to 768px (not just 640px).
   */
  :where(.quote-page, .invoice-page, .rams-workspace) .table-stack-mobile thead {
    display: none;
  }

  :where(.quote-page, .invoice-page, .rams-workspace) .table-stack-mobile tbody,
  :where(.quote-page, .invoice-page, .rams-workspace) .table-stack-mobile tr,
  :where(.quote-page, .invoice-page, .rams-workspace) .table-stack-mobile td {
    display: block;
    width: 100%;
  }

  :where(.quote-page, .invoice-page, .rams-workspace) .table-stack-mobile tr {
    margin-bottom: 12px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    overflow: hidden;
  }

  :where(.quote-page, .invoice-page, .rams-workspace) .table-stack-mobile td {
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
    padding: 8px 14px;
    position: relative;
    font-size: 0.9rem;
  }

  :where(.quote-page, .invoice-page, .rams-workspace) .table-stack-mobile td:last-child {
    border-bottom: none;
  }

  :where(.quote-page, .invoice-page, .rams-workspace) .table-stack-mobile td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9ca3af;
    margin-bottom: 2px;
  }

  .mobile-nav-trigger {
    top: calc(16px + env(safe-area-inset-top, 0px));
    right: calc(16px + env(safe-area-inset-right, 0px));
  }

  .mobile-nav-trigger {
    display: flex;
  }

  .sidebar {
    --sidebar-link-padding: 9px 18px 9px 24px;
    --sidebar-padding-x: 24px;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100dvh;
    width: min(76vw, 240px);
    padding: 32px 24px;
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-110%);
    transition: transform 0.3s ease;
    z-index: 1150;
    overflow-y: auto;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    background: var(--nav-bg, #111c2b);
    color: var(--nav-text, #ffffff);
  }

  body.mobile-nav-open .sidebar {
    transform: translateX(0);
  }

  .sidebar-brand {
    margin-bottom: 24px;
  }

  .sidebar-nav {
    gap: 18px;
  }

  .sidebar-nav__list {
    gap: 8px;
  }

  .sidebar-nav__link {
    font-size: 1rem;
    border-radius: 14px;
    min-block-size: 44px;
  }

  .sidebar-nav__link::before {
    left: 0;
    top: 10px;
    bottom: 10px;
  }

  .app-shell {
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .content {
    padding: 16px;
  }

  .dashboard-hero {
    flex-direction: column;
  }

  .dashboard-hero__actions,
  .dashboard-launch {
    width: 100%;
  }

  .dashboard-hero__actions .btn,
  .dashboard-launch .btn {
    width: 100%;
  }

  /* stack top bar items and reduce spacing */
  .top-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px;
    border-bottom: 1px solid #e6e8ed;
    margin-bottom: 0;
  }

  .top-bar-left {
    width: 100%;
    justify-content: space-between;
    align-items: center;
  }

  .top-bar-logo img {
    max-height: 36px;
  }
  .top-bar-right {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }
  .top-bar-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .top-bar-actions .btn,
  .top-bar-actions .btn-primary-modern,
  .top-bar-actions .btn-secondary-outline {
    min-height: 44px;
  }
  /* Cards on mobile should mirror the desktop appearance. Use the same 
     spacing and shadows as the base styles, and avoid alternating 
     backgrounds so lists of cards appear consistent. */
  .card {
    border-radius: 12px;
    margin: 0;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    box-shadow: var(--panel-shadow);
    background: var(--card);
  }

  :where(.content, .admin-shell) .card:last-child {
    margin-bottom: 0;
  }

  /* Ensure hero cards keep their themed gradient instead of the generic card background. */
  .insp-hero,
  .fd-hero,
  .analytics-hero,
  .schedule-hero {
    background: linear-gradient(
      135deg,
      var(--hero-bg-start, #0f172a),
      var(--hero-bg-end, #2563eb)
    );
    background: linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--hero-bg-start, #0f172a) calc(100% - var(--hero-softness, 0%)),
        #ffffff var(--hero-softness, 0%)
      ),
      color-mix(
        in srgb,
        var(--hero-bg-end, #2563eb) calc(100% - var(--hero-softness, 0%)),
        #ffffff var(--hero-softness, 0%)
      )
    );
    color: var(--hero-text, #ffffff);
  }

  /* prevent alternating card backgrounds on mobile */
  .card:nth-of-type(even) {
    background: var(--card);
  }

  /* keep wizard sections consistent with base style background */
  .card--wizard .form-section {
    background: #f5f7ff;
  }

  .form-progress {
    gap: 12px;
  }

  .form-progress__step span {
    background: #fff;
    color: var(--brand);
  }

  .card h3 {
    font-size: 1rem;
  }

  /* restore the top border and spacing for door sections on mobile. Matching 
     the desktop styling ensures the component checklist header stands out 
     consistently across devices. */
  .door-card__section {
    margin-top: 16px;
    border-top: 1px solid var(--border);
    padding-top: 16px;
    background: var(--card);
    border-radius: 12px;
    padding: 20px;
  }

  /* component rows should not alternate background colours on mobile; 
     align with base styling for clarity */
  .component-row {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
    padding: 12px;
    margin-bottom: 10px;
  }

  .component-row:nth-of-type(even) {
    background: var(--card);
  }

  .add-door-app {
    border-radius: 0;
    padding: 20px 16px 24px;
    width: calc(100% + 32px);
    margin-left: -16px;
    margin-right: -16px;
  }

  .add-door-app--fullscreen {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    margin: 0;
    border-radius: 0;
    z-index: 1500;
    overflow-y: auto;
    padding: 24px 16px calc(32px + env(safe-area-inset-bottom, 0px));
    background: var(--card);
    box-shadow: none;
  }

  [data-door-step][hidden] {
    display: none !important;
  }

  .door-stepper__intro-points {
    margin: 12px 0 0;
    padding-left: 20px;
    color: #475569;
  }

  .door-stepper__progress {
    display: none;
  }

  .door-stepper--active .door-stepper__progress {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 82, 204, 0.15);
  }

  .door-stepper__progress-actions {
    align-items: flex-start;
  }

  .door-stepper__progress-count {
    font-weight: 600;
    margin: 0;
    color: #1f2937;
  }

  .door-stepper__progress-label {
    margin: 4px 0 0;
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
  }

  .door-stepper__hint {
    font-size: 0.75rem;
  }

  .door-stepper__controls {
    display: none;
  }

  .door-stepper--active .door-stepper__controls {
    display: flex;
    gap: 12px;
    margin-top: 16px;
  }

  /* Mobile step controls should sit in-flow at the end of each step (not sticky/floating). */
  .add-door-app--fullscreen .door-stepper__controls {
    position: static;
    bottom: auto;
    background: transparent;
    padding-bottom: 0;
    box-shadow: none;
    z-index: auto;
  }

  .door-stepper__control {
    flex: 1;
  }

  .door-stepper__controls [hidden] {
    display: none !important;
  }

  .door-submit--desktop {
    display: none;
  }

  body.stepper-overlay-open {
    overflow: hidden;
  }

  .door-stepper__resume {
    text-align: left;
  }

  .door-spec-grid,
  .door-spec-grid--update,
  .form-grid.three-col.door-spec-grid {
    grid-template-columns: 1fr !important;
  }

  .door-type-options,
  .door-type-options--update {
    flex-direction: column;
    align-items: stretch;
  }

  .door-type-option span {
    width: 100%;
  }

  .add-door-app__hero {
    flex-direction: column;
    gap: 12px;
  }

  .add-door-app__chips {
    justify-content: flex-start;
  }

  .app-field-grid {
    grid-template-columns: 1fr;
  }

  .app-field-card {
    padding: 14px;
  }

  .component-row--app {
    padding: 16px;
  }

  .component-row__fields--app {
    grid-template-columns: 1fr;
  }

  .component-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
  }

  .component-icon svg {
    width: 26px;
    height: 26px;
  }

  .timeline {
    padding-left: 48px;
    gap: 14px;
  }

  .timeline::before {
    left: 20px;
  }

  .timeline-item {
    padding: 16px;
  }

  .timeline-item__icon {
    left: -18px;
    top: 14px;
    width: 32px;
    height: 32px;
  }

  .timeline-item__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .timeline-item__summary,
  .timeline-item__delta {
    flex-direction: column;
    gap: 6px;
  }

  /* style the door summary using a dashed border similar to the desktop 
     design but tinted with the current brand colour. The dashed line 
     conveys a summary rather than an actionable item. */
  .door-summary {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px dashed rgba(0, 82, 204, 0.35);
    background: rgba(0, 82, 204, 0.06);
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
  }

  /*
   * Responsive tables
   *
   * On narrow screens data tables can exceed the viewport width. Making
   * tables scrollable prevents layout breakage while preserving readability.
   */
  :where(
    .table-wrapper,
    .table-responsive,
    .asset-door-table-wrapper,
    .asset-component-table-wrapper,
    .rem-board-table-wrapper,
    .client-portal-users-table-wrapper
  ) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    max-inline-size: 100%;
  }

  :where(
    .table-wrapper table,
    .table-responsive table,
    .asset-door-table-wrapper table,
    .asset-component-table-wrapper table,
    .rem-board-table-wrapper table,
    .client-portal-users-table-wrapper table
  ) {
    inline-size: 100%;
    max-inline-size: 100%;
  }

  /* Denser table rhythm reads better on phones. */
  :where(table th, table td) {
    padding: 10px 12px;
  }
}

/* === Mobile component/layout overrides (<= 768px) === */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-header__actions {
    width: 100%;
    justify-content: flex-start;
  }

  .page-header__actions > * {
    width: 100%;
  }

  .page-header__actions .u-inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }

  .page-header__actions .u-inline-form input,
  .page-header__actions .u-inline-form select,
  .page-header__actions .u-inline-form textarea {
    flex: 1 1 180px;
    min-width: 0;
  }

  .page-header__actions .u-inline-form button,
  .page-header__actions .u-inline-form .btn-primary-modern,
  .page-header__actions .u-inline-form .btn-secondary-outline,
  .page-header__actions .u-inline-form .btn-ghost {
    flex: 0 0 auto;
  }

body.modal-open {
	    overflow: hidden;
	}

.modal {
	    position: fixed;
	    inset: 0;
	    z-index: 1200;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    padding: 16px;
	    padding-top: calc(16px + env(safe-area-inset-top, 0px));
	    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	}

.modal[hidden] {
    display: none;
}

.modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.modal__dialog {
		    position: relative;
		    z-index: 1;
		    background: #fff;
		    border-radius: 16px;
		    width: 92%;
		    max-height: 90vh;
		    max-block-size: 90dvh;
		    overflow: auto;
		    padding: 20px;
		    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
		    box-shadow: 0 25px 65px rgba(9, 41, 57, 0.18);
		}

:where(
  [data-property-create-modal],
  [data-property-edit-modal],
  [data-fire-door-jobs-modal],
  [data-fire-door-job-modal]
) .modal__dialog {
  overflow-x: hidden;
}

/*
 * New modal-only flows: always stack table rows on mobile (<=768px)
 * to avoid sideways scrolling inside the modal.
 */
:where(
  [data-property-create-modal],
  [data-property-edit-modal],
  [data-fire-door-jobs-modal],
  [data-fire-door-job-modal]
) .table-stack-mobile thead {
  display: none;
}

:where(
  [data-property-create-modal],
  [data-property-edit-modal],
  [data-fire-door-jobs-modal],
  [data-fire-door-job-modal]
) .table-stack-mobile tbody,
:where(
  [data-property-create-modal],
  [data-property-edit-modal],
  [data-fire-door-jobs-modal],
  [data-fire-door-job-modal]
) .table-stack-mobile tr,
:where(
  [data-property-create-modal],
  [data-property-edit-modal],
  [data-fire-door-jobs-modal],
  [data-fire-door-job-modal]
) .table-stack-mobile td {
  display: block;
  width: 100%;
}

:where(
  [data-property-create-modal],
  [data-property-edit-modal],
  [data-fire-door-jobs-modal],
  [data-fire-door-job-modal]
) .table-stack-mobile tr {
  margin-bottom: 12px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

:where(
  [data-property-create-modal],
  [data-property-edit-modal],
  [data-fire-door-jobs-modal],
  [data-fire-door-job-modal]
) .table-stack-mobile td {
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  padding: 8px 14px;
  position: relative;
  font-size: 0.9rem;
}

:where(
  [data-property-create-modal],
  [data-property-edit-modal],
  [data-fire-door-jobs-modal],
  [data-fire-door-job-modal]
) .table-stack-mobile td:last-child {
  border-bottom: none;
}

:where(
  [data-property-create-modal],
  [data-property-edit-modal],
  [data-fire-door-jobs-modal],
  [data-fire-door-job-modal]
) .table-stack-mobile td::before {
  content: attr(data-label);
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9ca3af;
  margin-bottom: 2px;
}

.modal__dialog--narrow {
    width: 92%;
}

.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.modal__close {
	    border: none;
	    background: transparent;
	    font-size: 1.5rem;
	    inline-size: 44px;
	    block-size: 44px;
	    display: inline-flex;
	    align-items: center;
	    justify-content: center;
	}

.modal__body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

  /* Inspection "Door details" modal: full-screen sheet on mobile. */
  [data-door-modal].modal {
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0;
  }

  [data-door-modal] .modal__dialog {
    width: 100%;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  [data-door-modal] .modal__header {
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 2;
    padding: 14px 16px;
    margin: 0;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  }

  [data-door-modal] .modal__close {
    inline-size: 44px;
    block-size: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  [data-door-modal] .modal__body {
    padding: 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  [data-door-modal] .door-detail-card {
    padding: 0;
    border: none;
    box-shadow: none;
    background: transparent;
  }

  [data-door-modal] .door-detail-header {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 10px;
  }

  [data-door-modal] .door-detail-header h3 {
    flex: 1 1 100%;
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.25;
  }

  [data-door-modal] .door-edit summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    background: rgba(248, 250, 252, 0.95);
    font-weight: 700;
  }

  [data-door-modal] .door-edit summary::-webkit-details-marker {
    display: none;
  }

  [data-door-modal] .door-edit[open] summary {
    background: #ffffff;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
  }

  [data-door-modal] .door-update-form {
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: #ffffff;
    overflow-wrap: break-word;
  }

  [data-door-modal] .door-update-form .door-spec-grid {
    grid-template-columns: 1fr !important;
  }

  [data-door-modal] .door-update-form .door-spec-grid--update {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  [data-door-modal] .door-update-form .door-spec-grid--update > label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: normal;
  }

  [data-door-modal] .door-update-form .door-spec-grid--update > label > :where(input, select, textarea) {
    min-width: 0;
    width: 100%;
  }

  [data-door-modal] .door-update-form .door-spec-grid--update > .door-type-options {
    grid-column: 1 / -1;
  }

  [data-door-modal] .door-update-form .component-row__fields {
    grid-template-columns: 1fr;
  }

  [data-door-modal] .door-update-form .file-field,
  [data-door-modal] .door-update-form .file-upload-card,
  [data-door-modal] .door-update-form .file-upload-card__action {
    width: 100%;
  }

  [data-door-modal] .door-update-form .btn {
    width: 100%;
  }

  /* Components table becomes a stacked list in the modal on mobile. */
  [data-door-modal] .component-table thead {
    display: none;
  }

  [data-door-modal] .component-table tbody,
  [data-door-modal] .component-table tr,
  [data-door-modal] .component-table td {
    display: block;
    width: 100%;
  }

  [data-door-modal] .component-table tr {
    margin-bottom: 12px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    overflow: hidden;
  }

  [data-door-modal] .component-table td {
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
    padding: 8px 14px;
    position: relative;
    font-size: 0.9rem;
  }

  [data-door-modal] .component-table td:last-child {
    border-bottom: none;
  }

  [data-door-modal] .component-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9ca3af;
    margin-bottom: 2px;
  }

  .inspection-builder__actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .invoice-modal__secondary-grid {
    grid-template-columns: 1fr;
  }

  .invoice-modal__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .invoice-modal__actions .btn,
  .invoice-modal__actions .btn-primary-modern,
  .invoice-modal__actions .btn-secondary-outline,
  .invoice-modal__actions .btn-ghost {
    width: 100%;
  }

.inspection-quote-meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.inspection-quote-editor {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.inspection-quote-editor__footer {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

  .inspection-quote-editor__actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.inspection-quote-table {
    width: 100%;
    border-collapse: collapse;
}

.inspection-quote-table th,
.inspection-quote-table td {
    padding: 0.5rem;
    border-bottom: 1px solid #eee;
}

.inspection-quote-row--missing {
    background: #fff7f2;
}

.input-with-prefix {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    align-items: center;
}

.input-with-prefix span {
    background: #f5f5f5;
    padding: 0 0.5rem;
    border-right: 1px solid #ddd;
}

.input-with-prefix input {
	    border: none;
	    flex: 1;
	    padding: 0.35rem 0.5rem;
	    min-inline-size: 0;
	}

.inspection-builder__table {
    margin-bottom: 1rem;
}

.inspection-builder__actions-cell {
    text-align: left;
}

.inspection-builder__alert {
    margin-top: 1rem;
    padding: 0.75rem;
    border-radius: 8px;
    background: #fff3cd;
    color: #856404;
}

.pricing-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.pricing-toolbar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pricing-table__actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.btn-small {
    font-size: 0.85rem;
    padding: 0.25rem 0.75rem;
}

.text-danger {
    color: #b42318;
}

.pricing-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pricing-form__footer {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pricing-import-label {
    position: relative;
    overflow: hidden;
}

.pricing-import-label input {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.modal__actions {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
    margin-top: 1rem;
}

.schedule-status-alert {
    margin-top: 0.75rem;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    background: #fff3cd;
    color: #856404;
    font-size: 0.9rem;
}
.status-pill--success {
    background: rgba(10, 135, 84, 0.15);
    color: var(--success);
}

.status-pill--muted {
    background: #f3f4f6;
    color: #475467;
}
.theme-settings legend {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.theme-settings label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.color-input {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.color-input--pill {
    align-items: center;
    gap: 0.5rem;
}

.color-input--pill input[type="text"] {
    width: 170px;
    max-width: 100%;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    font-size: 0.9rem;
}

.color-input--pill input[type="text"]:disabled {
    opacity: 0.6;
    background: #f8fafc;
}

.color-chip {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: var(--chip-color, #cbd5f5);
}

.btn-reset {
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
    align-self: flex-start;
}

.quote-page__intro {
    flex-direction: column;
}

.quote-page__stats {
    width: 100%;
}

.quote-layout {
    flex-direction: column;
}

.quote-layout__secondary {
    width: 100%;
}

  .dashboard-activity {
    flex-direction: column;
  }

  .dashboard-activity__list li {
    flex-direction: column;
    align-items: flex-start;
  }

  .dashboard-activity__actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

.schedule-card-header {
    flex-direction: column;
}

.schedule-card-header__stats {
    width: 100%;
}

.schedule-controls {
    flex-direction: column;
}

.schedule-controls .schedule-range-form,
.schedule-controls .schedule-filters {
    flex: 1 1 auto;
}

  .schedule-range-form {
    flex-direction: column;
  }

  .schedule-legend {
    flex-wrap: wrap;
  }

  .billing {
    gap: 1rem;
  }

  .billing-header__actions {
    width: 100%;
    flex-direction: column;
  }

  .billing-header__actions .btn {
    width: 100%;
  }
	  .quote-actions {
	    position: sticky;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    padding-top: 12px;
	    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	    margin-bottom: 0;
	    background: linear-gradient(to top, #ffffff, rgba(255, 255, 255, 0.7), transparent);
	    display: flex;
	    flex-direction: column;
	  }
  .quote-actions .btn {
    min-height: 44px;
    width: 100%;
  }

  .billing-pulse {
    grid-template-columns: 1fr;
  }

  .billing-plan-grid {
    grid-template-columns: 1fr;
  }

  .billing-plan-toggle {
    flex-direction: column;
    align-items: flex-start;
  }

  .billing-plan-toggle__options {
    width: 100%;
  }

  .billing-plan-toggle__option {
    flex: 1 1 auto;
    width: 100%;
    text-align: center;
  }

  .plan-card {
    padding: 20px;
  }

  .plan-card__price strong {
    font-size: 2rem;
  }

  .billing-overview,
  .billing-secondary-grid {
    grid-template-columns: 1fr;
  }

  .billing-stat-pills {
    grid-template-columns: 1fr;
  }

  .billing-steps ol {
    grid-template-columns: 1fr;
  }

  .billing-invoices li {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }

  .billing-seat-card__form button {
    width: 100%;
  }

  .settings-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .settings-hero__meta {
    grid-template-columns: 1fr;
  }

  .settings-hero__cta {
    flex-direction: column;
    width: 100%;
  }

  .settings-hero__cta .btn {
    width: 100%;
  }

  .support-fab {
    position: fixed;
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 1300;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    border: none;
    background: #111827;
    color: #f9fafb;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
  }

  .support-fab__icon {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: rgba(249, 250, 251, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .support-fab__icon svg {
    width: 16px;
    height: 16px;
  }

  .support-fab__label {
    white-space: nowrap;
  }
}

/* Responsive rules migrated from style.css (mobile-only). */
@media (max-width: 1024px) {
  .layout-columns-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .layout-columns-2,
  .layout-columns-3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .hide-on-mobile {
    display: none !important;
  }

  .show-on-mobile {
    display: block !important;
  }

  .order-mobile-first {
    order: -1;
  }

  .sidebar-brand img {
    max-width: 80px;
    max-height: 48px;
    width: auto;
    height: auto;
  }

  .sidebar-brand {
    display: none;
  }

  .top-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .top-bar-left {
    width: 100%;
    justify-content: space-between;
  }

  .notifications-modal {
    align-items: flex-end;
  }

  .notifications-modal__panel {
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 16px 16px 0 0;
  }

  .component-checklist-header,
  .component-checklist-meta,
  .component-controls {
    flex-direction: column;
    align-items: flex-start;
  }

  .component-checklist-actions {
    justify-content: flex-start;
  }

  .component-controls {
    width: 100%;
  }

  .component-search {
    width: 100%;
  }

  .component-search input {
    width: 100%;
  }

  .component-settings-item__header {
    flex-direction: column;
  }

  .component-settings-item__actions {
    width: 100%;
    justify-content: space-between;
  }

  .component-settings-item__insights {
    flex-direction: column;
    align-items: flex-start;
  }

  .analytics-hero {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .analytics-panel {
    padding: 16px;
  }

  /* Tabs: allow scroll instead of forcing page overflow. */
  .analytics-tabs {
    display: flex;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    scrollbar-width: none;
  }

  .analytics-tabs::-webkit-scrollbar {
    display: none;
  }

  .analytics-tab {
    flex: 0 0 auto;
  }

  /* Inspection show tabs: match analytics mobile behaviour (scrollable pill row). */
  .inspection-tabs.inspection-tabs {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }

  .inspection-tabs.inspection-tabs::-webkit-scrollbar {
    display: none;
  }

  .inspection-tabs .inspection-tab-button {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Properties tabs live in a page-local <style>, so use higher specificity. */
  .property-tabs-container .property-tabs {
    display: flex;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    scrollbar-width: none;
  }

  .property-tabs-container .property-tabs::-webkit-scrollbar {
    display: none;
  }

  .property-tabs-container .property-tab {
    flex: 0 0 auto;
  }

  /* Help hero: stack into a single column with full-width actions. */
  .help-workspace .help-hero {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 20px;
  }

  .help-workspace .help-hero__actions {
    flex-direction: column;
    width: 100%;
  }

  .help-workspace .help-hero__actions .btn {
    width: 100%;
  }

  .help-workspace .help-hero__stats {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .analytics-filters {
    justify-content: flex-start;
  }

  .analytics-filters label {
    flex: 1 1 200px;
    min-width: 0;
  }

  .analytics-filters select,
  .analytics-filters input[type='text'] {
    min-width: 0;
    width: 100%;
    font-size: 16px;
  }

  .analytics-card--wide {
    grid-column: span 1;
  }

  .fd-hero {
    flex-direction: column;
    text-align: left;
    padding: 20px;
  }

  .fd-layout {
    grid-template-columns: 1fr;
  }

  .fd-option-grid {
    grid-template-columns: 1fr;
  }

  .fd-preview-layout {
    flex-direction: column;
  }

  .floating-door-preview {
    left: 16px;
    right: 16px;
    width: auto;
    bottom: 16px;
  }
}

@media (max-width: 720px) {
  .theme-preview-card--floating {
    right: 16px;
    left: 16px;
    width: auto;
  }
}

@media (max-width: 640px) {
  .table-stack-mobile thead {
    display: none;
  }

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

  .table-stack-mobile tr {
    margin-bottom: 12px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    overflow: hidden;
  }

  .table-stack-mobile td {
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
    padding: 8px 14px;
    position: relative;
    font-size: 0.9rem;
  }

  .table-stack-mobile td:last-child {
    border-bottom: none;
  }

  .table-stack-mobile td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9ca3af;
    margin-bottom: 2px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .theme-preview {
    grid-template-columns: 1fr;
  }
}