/**
 * Gallery27 Arial Typography Standardization
 *
 * This stylesheet standardizes all typography to Arial for optimal
 * legibility in auction environments (mobile use, warehouse lighting,
 * live bidding stress, fast scanning).
 *
 * Priority: Legibility over branding
 * Colors: Light Gray #E2E3E3, Black #000000, Light Blue #78B4D1, Red #FF0308
 */

/* ========================================
   1. BASE FONT STACK & ROOT VARIABLES
   ======================================== */

:root {
  --font-ui: Arial, Helvetica, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Brand Colors */
  --color-light-gray: #E2E3E3;
  --color-black: #000000;
  --color-light-blue: #78B4D1;
  --color-red: #FF0308;
}

/* Base body styles */
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
}

/* Override all existing font families */
body,
html,
button,
input,
textarea,
select,
.form-control,
.btn,
h1, h2, h3, h4, h5, h6,
p, span, div, a, li, td, th,
.card,
.modal,
.dropdown-menu,
.navbar,
.nav-link {
  font-family: var(--font-ui) !important;
}

/* ========================================
   2. AUCTION-FACING TYPOGRAPHY RULES
   These are operational requirements
   ======================================== */

/* Lot Titles */
.lot-title,
.auction-lot-title,
.item-title,
.product-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  font-family: var(--font-ui) !important;
}

@media (min-width: 768px) {
  .lot-title,
  .auction-lot-title,
  .item-title,
  .product-title {
    font-size: 22px;
  }
}

/* Current Bid / Price Display */
.current-bid,
.bid-amount,
.price,
.auction-price,
.bid-price,
.winning-bid,
.starting-bid {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-ui) !important;
}

@media (min-width: 768px) {
  .current-bid,
  .bid-amount,
  .price,
  .auction-price,
  .bid-price,
  .winning-bid,
  .starting-bid {
    font-size: 26px;
  }
}

/* Buttons (Place Bid, Register, Primary Actions) */
.btn,
.button,
button,
.btn-primary,
.btn-bid,
.place-bid,
.register-btn,
input[type="submit"],
input[type="button"] {
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-ui) !important;
  min-height: 44px; /* Touch target size */
  padding: 0.75rem 1.5rem;
}

@media (min-width: 768px) {
  .btn,
  .button,
  button {
    font-size: 18px;
  }
}

/* Secondary Info - NEVER below 14px */
.buyer-premium,
.pickup-notes,
.timestamp,
.auction-date,
.auction-time,
.item-details,
.lot-number,
.auction-info,
.terms,
.conditions,
.shipping-info,
small,
.small-text {
  font-size: 14px !important;
  line-height: 1.5;
  font-family: var(--font-ui) !important;
}

/* Money, Legal, and Logistics Info - Minimum 14px */
.legal-text,
.terms-conditions,
.payment-info,
.shipping-details,
.tax-info,
.fee-info,
.premium-info {
  font-size: 14px !important;
  font-family: var(--font-ui) !important;
}

/* Headings */
h1 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  font-family: var(--font-ui) !important;
}

h2 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
  font-family: var(--font-ui) !important;
}

h3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  font-family: var(--font-ui) !important;
}

h4 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  font-family: var(--font-ui) !important;
}

h5 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  font-family: var(--font-ui) !important;
}

h6 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  font-family: var(--font-ui) !important;
}

/* Tables */
table,
.table {
  font-family: var(--font-ui) !important;
}

table th,
.table th {
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-ui) !important;
}

table td,
.table td {
  font-size: 14px;
  font-family: var(--font-ui) !important;
}

/* Prices and Bids in Tables */
table .price,
table .bid,
table .amount,
.table .price,
.table .bid,
.table .amount {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Forms */
.form-control,
.form-select,
input,
textarea,
select {
  font-size: 16px !important;
  font-family: var(--font-ui) !important;
}

label,
.form-label {
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-ui) !important;
}

/* ========================================
   3. LIVE AUCTION HIGH-VISIBILITY MODE
   Readable from several feet away on large displays
   ======================================== */

.live-auction,
.webcast,
.simulcast,
.clerking-view,
.display-mode {
  font-size: 18px;
  font-family: var(--font-ui) !important;
}

.live-auction .lot-title,
.webcast .lot-title,
.simulcast .lot-title,
.clerking-view .lot-title,
.display-mode .lot-title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.live-auction .current-bid,
.webcast .current-bid,
.simulcast .current-bid,
.clerking-view .current-bid,
.display-mode .current-bid,
.live-auction .bid-amount,
.webcast .bid-amount,
.simulcast .bid-amount,
.clerking-view .bid-amount,
.display-mode .bid-amount {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.live-auction button,
.live-auction .btn,
.webcast button,
.webcast .btn,
.simulcast button,
.simulcast .btn,
.clerking-view button,
.clerking-view .btn,
.display-mode button,
.display-mode .btn {
  font-size: 18px;
  padding: 0.9rem 1.2rem;
  font-weight: 700;
  min-height: 52px;
}

/* Extra large bid displays for clerking screens */
.live-auction .bid-display-large,
.webcast .bid-display-large,
.simulcast .bid-display-large {
  font-size: 48px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* ========================================
   4. TABULAR NUMERICS FOR ALL MONEY
   ======================================== */

.price,
.bid,
.amount,
.cost,
.fee,
.total,
.subtotal,
.tax,
.premium,
.currency,
.money,
.financial {
  font-variant-numeric: tabular-nums;
}

/* ========================================
   5. MOBILE OPTIMIZATIONS
   ======================================== */

@media (max-width: 767px) {
  body {
    font-size: 16px; /* Maintain minimum for readability */
  }

  .lot-title {
    font-size: 18px;
  }

  .current-bid,
  .bid-amount {
    font-size: 22px;
  }

  .btn {
    font-size: 16px;
    min-height: 44px; /* Minimum touch target */
    padding: 0.75rem 1rem;
  }

  /* Ensure no text goes below 14px on mobile */
  small,
  .small-text,
  .secondary-info {
    font-size: 14px !important;
  }
}

/* ========================================
   6. PRINT STYLES
   ======================================== */

@media print {
  body,
  html,
  * {
    font-family: Arial, Helvetica, sans-serif !important;
  }

  .price,
  .bid,
  .amount {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
}

/* ========================================
   7. ACCESSIBILITY OVERRIDES
   ======================================== */

/* Ensure high contrast for critical information */
.current-bid,
.price,
.bid-amount {
  color: var(--color-black);
}

/* Warning/Alert states */
.bid-ending,
.auction-ending,
.alert-bid {
  color: var(--color-red);
  font-weight: 700;
}

/* Focus states for accessibility */
button:focus,
.btn:focus,
input:focus,
textarea:focus,
select:focus {
  outline: 3px solid var(--color-light-blue);
  outline-offset: 2px;
}

/* ========================================
   8. SPECIFIC COMPONENT OVERRIDES
   ======================================== */

/* Navigation */
.navbar,
.nav {
  font-family: var(--font-ui) !important;
}

.navbar-brand {
  font-size: 20px;
  font-weight: 700;
}

.nav-link {
  font-size: 16px;
  font-weight: 400;
}

/* Cards */
.card-title {
  font-size: 20px;
  font-weight: 700;
  font-family: var(--font-ui) !important;
}

.card-text,
.card-body {
  font-size: 16px;
  font-family: var(--font-ui) !important;
}

/* Modals */
.modal-title {
  font-size: 24px;
  font-weight: 700;
  font-family: var(--font-ui) !important;
}

.modal-body {
  font-size: 16px;
  font-family: var(--font-ui) !important;
}

/* Alerts */
.alert {
  font-size: 16px;
  font-family: var(--font-ui) !important;
}

/* Badges */
.badge {
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-ui) !important;
}

/* Breadcrumbs */
.breadcrumb {
  font-size: 14px;
  font-family: var(--font-ui) !important;
}

/* Tooltips and Popovers */
.tooltip,
.popover {
  font-size: 14px;
  font-family: var(--font-ui) !important;
}

/* ========================================
   9. BACKEND/ADMIN OVERRIDES
   ======================================== */

.dashboard,
.admin-panel,
.backend {
  font-family: var(--font-ui) !important;
}

.sidebar {
  font-family: var(--font-ui) !important;
}

.sidebar-link {
  font-size: 16px;
}

/* ========================================
   10. UTILITY CLASSES
   ======================================== */

.font-arial {
  font-family: var(--font-ui) !important;
}

.font-bold {
  font-weight: 700 !important;
}

.font-bolder {
  font-weight: 800 !important;
}

.tabular-nums {
  font-variant-numeric: tabular-nums !important;
}

/* Minimum size enforcement */
.text-min-14 {
  font-size: 14px !important;
}

.text-min-16 {
  font-size: 16px !important;
}