/* BidSmart UI consistency layer, 2026-09-24.
   Included last in page heads. It standardizes presentation only. */
:root {
  --bs-red: #bd1824;
  --bs-red-hover: #9f121d;
  --bs-ink: #202832;
  --bs-muted: #657181;
  --bs-canvas: #f5f7f9;
  --bs-surface: #fff;
  --bs-border: #dde4eb;
  --bs-radius: 16px;
  --bs-radius-control: 11px;
  --bs-shadow: 0 6px 24px rgba(22, 34, 49, .055);
  --bs-focus: 0 0 0 3px rgba(189, 24, 36, .15);
  --bdu-red: var(--bs-red);
  --bdu-red-dark: var(--bs-red-hover);
  --bdu-ink: var(--bs-ink);
  --bdu-muted: var(--bs-muted);
  --bdu-bg: var(--bs-canvas);
  --bdu-border: var(--bs-border);
  --bdu-border-strong: #cbd5df;
  --app-red: var(--bs-red);
  --app-red-hover: var(--bs-red-hover);
  --app-bg: var(--bs-canvas);
  --app-border: var(--bs-border);
  --ba-red: var(--bs-red);
}

html { -webkit-text-size-adjust: 100%; }
body { line-height: 1.5; }
:is(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--bs-red) !important;
  outline-offset: 3px !important;
}
button, input, select, textarea { font: inherit; }
:is(.admin-main, .portal-main, .client-portal-main, .public-page-shell) {
  min-width: 0;
}

/* Shared text hierarchy and surface rhythm. */
:is(.portal-page-heading, .page-heading, .roof-page-heading, .admin-header) h1 {
  font-size: clamp(1.7rem, 2.45vw, 2.2rem) !important;
  line-height: 1.16 !important;
  letter-spacing: -.035em !important;
}
:is(.portal-page-heading, .page-heading, .roof-page-heading, .admin-header) p {
  color: var(--bs-muted) !important;
  line-height: 1.55 !important;
}
:is(.admin-main, .portal-main, .client-portal-main) :is(
  .admin-section-card, .admin-panel, .admin-filter-bar, .admin-stat-card,
  .dashboard-card, .dashboard-section-card, .dashboard-module-card,
  .roof-design-card, .request-card, .quotation-card, .notification-card,
  .announcement-card, .profile-summary-card, .profile-section-card,
  .client-status-card, .client-inquiry-list-card, .archive-panel
) {
  border: 1px solid var(--bs-border) !important;
  border-radius: var(--bs-radius) !important;
  box-shadow: var(--bs-shadow) !important;
}
:is(.admin-main, .portal-main, .client-portal-main) :is(
  .admin-section-card, .dashboard-section-card, .client-inquiry-list-card
) { margin-bottom: 20px !important; }
:is(.admin-main, .portal-main, .client-portal-main) :is(
  .dashboard-cards, .admin-mini-stats, .roof-card-grid, .overview-stats-grid
) { gap: 16px !important; }

/* Action hierarchy. Explicit selectors avoid changing badges and icon-only tools. */
:is(.admin-main, .portal-main, .client-portal-main, .auth-panel, .inquiry-shell, .inquiry-container, .public-page-shell) :is(
  .roof-post-btn, .main-btn, .profile-primary-btn, .roof-select-btn,
  .client-primary-btn, .client-primary-link, .admin-btn-red,
  .client-approve-btn, .modal-save-btn, .hero-primary-btn,
  .header-btn-red, .signup-otp-button-primary
) {
  min-height: 42px !important;
  max-width: 100%;
  border-radius: var(--bs-radius-control) !important;
  border-color: var(--bs-red) !important;
  background: var(--bs-red) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(189, 24, 36, .15) !important;
  font-size: .88rem !important;
  font-weight: 750 !important;
  text-decoration: none !important;
  line-height: 1.25 !important;
}
:is(.admin-main, .portal-main, .client-portal-main, .auth-panel, .inquiry-shell, .inquiry-container, .public-page-shell) :is(
  .roof-post-btn, .main-btn, .profile-primary-btn, .roof-select-btn,
  .client-primary-btn, .client-primary-link, .admin-btn-red,
  .client-approve-btn, .modal-save-btn, .hero-primary-btn,
  .header-btn-red, .signup-otp-button-primary
):hover:not(:disabled) {
  background: var(--bs-red-hover) !important;
  border-color: var(--bs-red-hover) !important;
  box-shadow: 0 6px 16px rgba(159, 18, 29, .18) !important;
}
:is(.admin-main, .portal-main, .client-portal-main, .auth-panel, .inquiry-shell, .inquiry-container, .public-page-shell) :is(
  .admin-btn-neutral, .profile-secondary-btn, .client-secondary-btn,
  .view-post-link, .hero-secondary-btn, .header-btn-light,
  .manufacturer-bid-back-btn, .client-bids-back-btn
) {
  min-height: 42px !important;
  border: 1px solid var(--bs-border) !important;
  border-radius: var(--bs-radius-control) !important;
  background: #fff !important;
  color: var(--bs-ink) !important;
  box-shadow: none !important;
  font-weight: 720 !important;
  text-decoration: none !important;
}
:is(.admin-main, .portal-main, .client-portal-main, .auth-panel) :is(
  .admin-btn-neutral, .profile-secondary-btn, .client-secondary-btn, .view-post-link
):hover { background: #f4f6f8 !important; border-color: #bac6d2 !important; }

/* Form rhythm, without touching checkboxes, radio buttons, or hidden inputs. */
:is(.admin-main, .portal-main, .client-portal-main, .auth-panel, .client-auth-card,
    .client-register-card, .inquiry-shell, .inquiry-container, .track-inquiry-shell) :is(
  input[type="text"], input[type="email"], input[type="password"],
  input[type="tel"], input[type="number"], input[type="date"],
  input[type="search"], select, textarea
) {
  min-height: 42px !important;
  max-width: 100%;
  border: 1px solid #cbd5df !important;
  border-radius: var(--bs-radius-control) !important;
  background: #fff !important;
  color: var(--bs-ink) !important;
  box-shadow: none !important;
}
:is(.admin-main, .portal-main, .client-portal-main, .auth-panel, .client-auth-card,
    .client-register-card, .inquiry-shell, .inquiry-container, .track-inquiry-shell) :is(
  input[type="text"], input[type="email"], input[type="password"],
  input[type="tel"], input[type="number"], input[type="date"],
  input[type="search"], select, textarea
):focus { border-color: var(--bs-red) !important; box-shadow: var(--bs-focus) !important; }
:is(.admin-main, .portal-main, .client-portal-main) textarea { min-height: 90px !important; }
:is(.admin-main, .portal-main, .client-portal-main) label { font-weight: 650; }

/* Keep the two authenticated navigation systems visually related. */
.admin-sidebar, .portal-topbar { background: #192028 !important; }
.admin-sidebar :is(.sidebar-menu a, .admin-logout-form .logout-link),
.portal-topbar .portal-top-menu-link { border-radius: 10px !important; }
.admin-sidebar .sidebar-menu a.active,
.portal-topbar .portal-top-menu-link.active { background: var(--bs-red) !important; color: #fff !important; }
.client-portal-topbar { border-radius: var(--bs-radius) !important; }

/* Lists, tables, status labels, and dialog surfaces. */
.admin-main :is(.admin-table-wrap, .table-wrap, .admin-clean-table-wrap),
.portal-main :is(.table-wrap, .quotation-table-wrap) { overflow-x: auto; border-radius: var(--bs-radius); }
.admin-main table thead th { letter-spacing: .035em !important; }
.admin-main table tbody tr:hover { background: #f7f9fb !important; }
:is(.admin-main, .portal-main, .client-portal-main) :is(
  .client-bid-status, .admin-status-badge, .client-inquiry-status, .status-pill
) { border-radius: 999px !important; font-weight: 750 !important; }
:is(.admin-main, .portal-main, .client-portal-main) :is(
  .empty-design-box, .empty-state, .client-empty-state
) { border-radius: var(--bs-radius) !important; padding: clamp(20px, 3vw, 36px) !important; }
:is(.design-modal-box, .supplier-quote-modal-dialog, .modal-content, .modal-card) {
  border-radius: 20px !important;
  box-shadow: 0 24px 68px rgba(12, 21, 31, .22) !important;
}

/* Compact screens retain useful tap targets without horizontal clipping. */
@media (max-width: 900px) {
  .admin-main { padding: 18px 14px 38px !important; }
  .admin-header { padding: 18px !important; }
  .client-portal-topbar { margin-inline: 12px !important; }
}
@media (max-width: 640px) {
  .portal-main .roof-dashboard-content { width: calc(100% - 28px) !important; }
  .portal-page-heading, .admin-header { gap: 12px !important; }
  .client-portal-main { padding-inline: 14px !important; }
  :is(.admin-main, .portal-main, .client-portal-main) :is(
    .dashboard-cards, .admin-mini-stats, .roof-card-grid, .overview-stats-grid
  ) { gap: 12px !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}