/* =============================================================================
   Harpaston Brand Palette — matches logo.png — do not hardcode colors elsewhere
   Light theme: white/light-gray content area, Harpaston navy-blue sidebar
   ============================================================================= */

:root {
  /* ── Blue scale ── */
  --hp-blue-50:   #EBF5FF;
  --hp-blue-100:  #D6EBFF;
  --hp-blue-200:  #ADD6FF;
  --hp-blue-300:  #70B8FF;
  --hp-blue-400:  #3D9EFF;
  --hp-blue-500:  #2D7CF6;   /* PRIMARY brand blue */
  --hp-blue-600:  #1E5FCC;
  --hp-blue-700:  #164AAD;
  --hp-blue-800:  #0F3380;
  --hp-blue-900:  #0A1F54;
  --hp-blue-950:  #06122E;

  /* ── Neutrals ── */
  --hp-white:      #FFFFFF;
  --hp-gray-50:    #F8FAFC;   /* page background */
  --hp-gray-100:   #F1F5F9;
  --hp-gray-200:   #E2E8F0;
  --hp-gray-300:   #CBD5E1;
  --hp-gray-400:   #94A3B8;
  --hp-gray-500:   #64748B;
  --hp-gray-600:   #475569;
  --hp-gray-700:   #334155;
  --hp-gray-800:   #1E293B;
  --hp-gray-900:   #0F172A;

  /* ── Status ── */
  --hp-success:  #10B981;
  --hp-warning:  #F59E0B;
  --hp-danger:   #EF4444;
  --hp-info:     #3D9EFF;

  /* ── Sidebar gradient ── */
  --hp-sidebar-gradient: linear-gradient(180deg, #06122E 0%, #0F3380 100%);

  /* ── Light theme semantic aliases ──
     These are what the rest of the app uses via var().
     Replacing the old dark --bg/--text tokens with light equivalents
     so all existing views inherit the new palette automatically. */
  --bg:       var(--hp-gray-50);    /* page background  → light gray */
  --bg2:      var(--hp-white);      /* card/panel bg    → white      */
  --bg3:      var(--hp-gray-100);   /* hover/alt row    → light      */
  --border:   var(--hp-gray-200);   /* main borders                  */
  --border2:  var(--hp-gray-300);   /* stronger borders              */

  --text:     var(--hp-gray-800);   /* primary body text             */
  --text2:    var(--hp-gray-600);   /* secondary text                */
  --text3:    var(--hp-gray-400);   /* muted/placeholder             */

  /* Functional accents — remapped to Harpaston blues */
  --blue:     var(--hp-blue-500);
  --red:      var(--hp-danger);
  --green:    var(--hp-success);
  --orange:   var(--hp-warning);
  --teal:     var(--hp-blue-400);
  --purple:   #7C3AED;  /* kept for HarpaInsight module colour */

  /* Gold/brand accent → Harpaston blue (direct values, no alias chain) */
  --gold:     #2D7CF6;
  --gold2:    #3D9EFF;
  --gold-dim: #164AAD;

  /* Layout dimensions (unchanged) */
  --sidebar-w: 220px;
  --topbar-h:  52px;

  /* Bootstrap 5 variable overrides → light theme */
  --bs-body-bg:           var(--hp-gray-50);
  --bs-body-color:        var(--hp-gray-800);
  --bs-body-font-family:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --bs-body-font-size:    13px;
  --bs-body-line-height:  1.5;
  --bs-link-color:        var(--hp-blue-500);
  --bs-link-hover-color:  var(--hp-blue-600);
  --bs-border-color:      var(--hp-gray-200);
  --bs-emphasis-color:    var(--hp-gray-900);
  --bs-secondary-color:   var(--hp-gray-600);
  --bs-tertiary-color:    var(--hp-gray-400);
  --bs-primary:           var(--hp-blue-500);
  --bs-primary-rgb:       45,124,246;
  --bs-success:           var(--hp-success);
  --bs-success-rgb:       16,185,129;
  --bs-danger:            var(--hp-danger);
  --bs-warning:           var(--hp-warning);
  --bs-info:              var(--hp-info);
  --bs-light:             var(--hp-gray-100);
  --bs-dark:              var(--hp-gray-900);
}

/* =============================================================================
   Skeleton Loading States — Sprint 2 Fix 14
   Usage: add class="skeleton" to any element, or "skeleton-text" / "skeleton-title"
   ============================================================================= */

@keyframes skeleton-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.skeleton,
.skeleton-text,
.skeleton-title,
.skeleton-card {
  background: linear-gradient(
    90deg,
    var(--hp-gray-200, #E2E8F0) 25%,
    var(--hp-gray-100, #F1F5F9) 50%,
    var(--hp-gray-200, #E2E8F0) 75%
  );
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}

.skeleton-text  { height: 12px; width: 80%; margin-bottom: 6px; display: block; }
.skeleton-title { height: 20px; width: 50%; margin-bottom: 10px; display: block; }
.skeleton-card  {
  min-height: 80px;
  border-radius: 8px;
  display: block;
  width: 100%;
}

/* KPI card skeleton (applied to .harp-kpi-card to show loading state) */
.harp-kpi-card.skeleton-loading {
  pointer-events: none;
}
.harp-kpi-card.skeleton-loading .harp-kpi-value,
.harp-kpi-card.skeleton-loading .harp-kpi-sub,
.harp-kpi-card.skeleton-loading .harp-kpi-label {
  background: linear-gradient(
    90deg,
    #E2E8F0 25%,
    #F1F5F9 50%,
    #E2E8F0 75%
  );
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 3px;
  color: transparent !important;
  display: inline-block;
  min-width: 60px;
}

/* ── WCAG 2.1 AA — Skip link & focus styles ──────────────────────────── */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: 8px;
  background: var(--hp-blue-500);
  color: #fff;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  z-index: 9999;
  transition: top .15s;
}
.skip-to-content:focus {
  top: 8px;
}

/* Visible focus ring for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--hp-blue-500);
  outline-offset: 2px;
}
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--hp-blue-500);
  outline-offset: 2px;
  border-radius: 3px;
}
/* Harpaston — Global Styles */
/*



*/

/* Ensure all form controls use Inter, not the monospace fallback */
input, select, textarea, button {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── FORM COMPONENTS (extracted from _form.html.erb partial) ────────── */
.form-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text2, #475569);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.form-input {
  display: block;
  width: 100%;
  background: var(--bg2, var(--hp-white));
  border: 1px solid var(--border, var(--hp-gray-200));
  color: var(--text1, var(--hp-gray-800));
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
}
textarea.form-input { resize: vertical; }

.tier-segment { display: flex; gap: 6px; flex-wrap: wrap; }
.tier-segment__btn {
  border-radius: 9999px;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.15s, box-shadow 0.15s;
  font-family: inherit;
}
.tier-segment__btn:hover { opacity: 0.75; }
.tier-segment__btn--active { opacity: 1 !important; box-shadow: 0 0 0 2px currentColor; }

/* ── AUDIT ROUND 2 — TIER 1 FIXES ─────────────────────────────────────── */

/* FIX 2: tabular-nums on ALL numeric data */
td, .kpi-val, .mc-stat-val, .detail-value,
[class*="-count"], [class*="-metric"], [class*="-value"] {
  font-variant-numeric: tabular-nums;
}

/* FIX 3: Table alternating rows */
table tbody tr:nth-child(even) {
  background-color: var(--hp-gray-50) !important;
}
table tbody tr:hover {
  background-color: var(--hp-blue-50) !important;
  transition: background-color 0.1s ease;
}

/* FIX 4: Table column header differentiation */
table thead th {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--hp-gray-500) !important;
  border-bottom: 2px solid var(--hp-gray-200) !important;
  padding-bottom: 10px !important;
}

/* FIX 5: Form focus ring — blue only, never gold/amber */
.form-input:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--hp-blue-500) !important;
  box-shadow: 0 0 0 3px rgba(45, 124, 246, 0.15) !important;
}

/* FIX 6: Tier segment pill padding — fix Ultra VIP line wrap */
.tier-segment__btn {
  padding: 5px 10px !important;
  white-space: nowrap !important;
}

/* FIX 7: Secondary metric hierarchy */
.mc-secondary-metric {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--hp-gray-500) !important;
}

/* FIX 8: Empty/zero module card visual distinction */
.mc-kpi-val[data-value="0"],
.mc-kpi-val[data-value="0%"],
.mc-kpi-val[data-value="—"],
.mc-kpi-val[data-value="€0"],
.mc-kpi-val[data-value="$0"],
.mc-kpi-val[data-value="£0"] {
  color: var(--hp-gray-300) !important;
  font-weight: 400 !important;
}

/* FIX 9: KPI card icon — constrained to ghost position, never dominant */
.kpi-card {
  position: relative !important;
}
.kpi-card .kpi-icon {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  font-size: 20px !important;
  opacity: 0.12 !important;
  color: var(--text, var(--hp-gray-800)) !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
}

/* FIX 10: Breadcrumb top margin */
.page-bc {
  margin-top: 8px !important;
}

/* ── GUEST DETAIL — Operational Details section ──────────────────────── */
.detail-section {
  margin-top: 24px;
}
.detail-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hp-gray-400);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hp-gray-200);
}
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  background: var(--hp-white);
  border: 1px solid var(--hp-gray-200);
  border-radius: 8px;
  padding: 20px 24px;
}
.detail-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.detail-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hp-gray-400);
}
.detail-value {
  font-size: 14px;
  color: var(--hp-gray-800);
  font-weight: 500;
}
.text-muted {
  color: var(--hp-gray-300);
  font-weight: 400;
}
.empty-module-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border: 1px dashed var(--hp-gray-300);
  border-radius: 6px;
  color: var(--hp-gray-400);
  font-size: 13px;
}

/* ── EVENT STATUS BAR (T3-1) ─────────────────────────────────────────── */
.event-status-bar {
  display: flex;
  align-items: center;
  background: var(--hp-white);
  border: 1px solid var(--hp-gray-200);
  border-radius: 8px;
  padding: 14px 24px;
  margin-bottom: 20px;
  gap: 0;
}
.esb-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  gap: 3px;
}
.esb-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--hp-gray-800);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  font-family: 'Syne', sans-serif;
}
.esb-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hp-gray-400);
}
.esb-divider {
  width: 1px;
  height: 36px;
  background: var(--hp-gray-200);
  flex-shrink: 0;
}
.esb-time {
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: 'Inter', sans-serif !important;
}
.text-warning { color: var(--hp-warning) !important; }
.text-success { color: var(--hp-success) !important; }

/* ── MODULE CARD EMPTY STATE (T3-3) ─────────────────────────────────── */
.mc-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  gap: 8px;
}
.mc-empty-state-icon {
  font-size: 24px;
  opacity: 0.2;
}
.mc-empty-state-text {
  font-size: 12px;
  color: var(--hp-gray-300);
  text-align: center;
  font-style: italic;
}

/* ── Turbolinks progress bar — brand blue ── */
.turbolinks-progress-bar {
  background-color: var(--hp-blue-500) !important;
  height: 3px !important;
}

/* ── PRINT STYLES ─────────────────────────────────────────────────────────── */
@media print {
  /* Hide all chrome */
  .sidebar,
  .topbar,
  .mobile-menu-btn,
  .sidebar-overlay,
  .mc-actions,
  .btn,
  .dropdown,
  .flash-wrap,
  .bulk-toolbar,
  .breadcrumbs,
  .page-nav,
  .print-hide,
  nav { display: none !important; }

  /* Reset layout — no sidebar margin, no topbar padding */
  .page-wrap  { margin-left: 0 !important; padding-top: 0 !important; }
  .page-content { padding: 16px !important; }

  /* Typography — all black, no colored backgrounds */
  body, * { color: #000 !important; background: #fff !important; }

  /* Flatten shadows and borders for laser printers */
  * { box-shadow: none !important; text-shadow: none !important; }
  .harp-panel, .harp-kpi-card, .detail-grid {
    border: 1px solid #ccc !important;
    border-radius: 0 !important;
  }

  /* Badges — border-only in print (no colored backgrounds) */
  .status-badge, .mc-pill, .sidebar-nav-badge {
    background: transparent !important;
    border: 1px solid #000 !important;
    color: #000 !important;
    padding: 1px 4px !important;
  }

  /* Page break control */
  .detail-section, .harp-panel, .mc.harp-panel { page-break-inside: avoid; }
  .harp-mod-grid { display: block !important; }
  .harp-mod-grid .mc.harp-panel { margin-bottom: 12px !important; }

  /* Show print-only elements */
  .print-header { display: block !important; }
}
/* =============================================================================
   Harpaston Print Styles — guest manifests, rooming lists, itineraries
   Complements the @media print block in application.css
   ============================================================================= */

@media print {
  /* ── Page setup ── */
  @page {
    size: A4 portrait;
    margin: 18mm 20mm;
  }

  /* ── Print header (hidden on screen, shown on print) ── */
  .print-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid #000;
    padding-bottom: 10px;
    margin-bottom: 20px;
  }
  .print-header-logo {
    font-family: Arial, sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .print-header-meta {
    font-size: 10px;
    text-align: right;
    line-height: 1.5;
  }

  /* ── Guest detail ── */
  .detail-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px 24px !important;
    page-break-inside: avoid;
  }
  .detail-field { page-break-inside: avoid; }
  .detail-label { font-size: 9px !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #666 !important; }
  .detail-value { font-size: 13px !important; }

  /* ── Guest table ── */
  table { page-break-inside: auto; }
  table thead { display: table-header-group; }
  table tr { page-break-inside: avoid; }
  table thead th { border-bottom: 2px solid #000 !important; font-size: 9px !important; }
  table tbody td { font-size: 11px !important; padding: 4px 8px !important; }
  table tbody tr { border-bottom: 1px solid #ccc !important; }

  /* ── KPI cards on dashboard ── */
  .harp-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    page-break-inside: avoid;
  }
  .harp-kpi-card { border: 1px solid #ccc !important; padding: 12px !important; }
  .harp-kpi-value { font-size: 24px !important; }
  .harp-kpi-label { font-size: 8px !important; }

  /* ── Module card KPI row ── */
  .mc-kpis { background: transparent !important; border: 1px solid #ddd !important; }
  .mc-kpi { background: #fff !important; }
  .mc-kpi-val { font-size: 18px !important; }
  .mc-kpi ~ .mc-kpi .mc-kpi-val { font-size: 13px !important; }
  .mc-util-track { display: none !important; }

  /* ── Module card header ── */
  .mc-head { border-bottom: 1px solid #ccc !important; padding: 8px 12px !important; }
  .mc-name { font-size: 11px !important; font-weight: 700; }
  .mc-icon { display: none !important; }
}
/* Harpaston — Responsive / Mobile-Tablet Breakpoints
   Auto-loaded via application.css require_tree .
   Breakpoints: 1024px (tablet), 768px (mobile) */

/* ── Utility: hide on mobile ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}
@media (max-width: 1024px) {
  .hide-tablet { display: none !important; }
}

/* ── Scrollable table wrapper ─────────────────────────────────────────── */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-responsive table {
  min-width: 600px;
}

/* ── Layout: sidebar ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --sidebar-w: 0px; }

  .sidebar {
    position: fixed;
    left: -240px;
    top: 0;
    bottom: 0;
    width: 240px;
    z-index: 200;
    transition: left .2s ease;
    box-shadow: 2px 0 16px rgba(0,0,0,.3);
  }

  .sidebar.is-open { left: 0; }

  .main-content {
    margin-left: 0 !important;
    padding: 12px;
  }

  .mobile-menu-btn { display: flex !important; }
}

@media (min-width: 1025px) {
  .mobile-menu-btn { display: none !important; }
}

/* ── Layout: topbar ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .topbar-clock { display: none !important; }
  .topbar-breadcrumb { display: none !important; }

  .topbar-right {
    gap: 4px !important;
  }
}

/* ── KPI grid ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .kpi-row.cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .kpi-row.cols-3 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr) !important; }
  .kpi-row.cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Page header ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
}

/* ── Grid-2 (two-column panels) ───────────────────────────────────────── */
@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr !important; }
}

/* ── Guest Command Centre 3-col ───────────────────────────────────────── */
@media (max-width: 1100px) {
  /* Collapse to 2 cols: left panel + main */
  .guest-command-centre {
    grid-template-columns: 260px 1fr !important;
  }
  .guest-command-centre .right-col { display: none !important; }
}
@media (max-width: 768px) {
  .guest-command-centre {
    grid-template-columns: 1fr !important;
  }
}

/* ── Forms ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .form-row-2 { grid-template-columns: 1fr !important; }
  .form-row-3 { grid-template-columns: 1fr !important; }
}

/* ── Toolbar ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .toolbar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .toolbar-l,
  .toolbar-r {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
}

/* ── Panel tables ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .panel table { font-size: 11px; }
  .panel .panel-head { padding: 10px 14px; }
  .panel > div { padding-left: 14px; padding-right: 14px; }
}

/* ── Mobile sidebar overlay backdrop ─────────────────────────────────── */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 199;
}
.sidebar-backdrop.active { display: block; }