/* ============================================================================
   Nexolly Digital Solutions Hub - shared components (public, dashboard, admin)
   ----------------------------------------------------------------------------
   Nexolly is a DARK-navy site (both data-theme values resolve to the same dark
   tokens in design-system.css). Every colour below is therefore chosen for a dark
   surface and checked against WCAG AA (4.5:1 body text, 3:1 large text / UI):
     text   #F5F7FA on #101A2A card ........ 15.6:1     muted #A7B0C0 on #101A2A .. 7.4:1
     button #FFFFFF on #047857 ............. 5.5:1      accent text #6EE7B7 on #101A2A .. 10:1
   Components are scoped to .hub-* classes so they never leak into other pages.
   ========================================================================== */
:root {
  --hub-green: #047857;          /* brand green for filled buttons (white text = 5.5:1) */
  --hub-green-hover: #065F46;
  --hub-green-bright: #34D399;   /* brand accent for borders/icons on dark */
  --hub-green-text: #6EE7B7;     /* brand accent for TEXT on dark surfaces */
  --hub-tint: rgba(52,211,153,.12);
  --hub-ink: #F5F7FA;
  --hub-muted: #A7B0C0;
  --hub-faint: #8C97AA;
  --hub-line: rgba(255,255,255,.14);
  --hub-card: #101A2A;
  --hub-card-2: #142137;
  --hub-input: #0B1424;
  --hub-input-line: #64748B;     /* >= 3:1 against both card and input backgrounds */
  --hub-radius: 14px;
  --hub-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --hub-font-display: 'Poppins', var(--hub-font);
}

.hub-wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
.hub-narrow { max-width: 780px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.hub-wrap *, .hub-narrow * { box-sizing: border-box; }

/* ---------- typography (same hierarchy as the rest of Nexolly) ---------- */
.hub-h1 { font-family: var(--hub-font-display); font-weight: 800; font-size: clamp(26px, 4.6vw, 38px); line-height: 1.2; margin: 0 0 12px; color: var(--hub-ink); overflow-wrap: anywhere; text-wrap: balance; }
.hub-h2 { font-family: var(--hub-font-display); font-weight: 800; font-size: clamp(18px, 2.6vw, 22px); line-height: 1.3; margin: 0 0 10px; color: var(--hub-ink); }
.hub-lead { color: var(--hub-muted); font-size: clamp(15px, 2.2vw, 17px); line-height: 1.65; margin: 0 0 18px; font-weight: 500; }
.hub-help { font-size: 13px; color: var(--hub-muted); line-height: 1.5; margin-top: 4px; font-weight: 500; }
.hub-wrap a:not(.hub-btn):not(.hub-cat):not(.hub-pager a), .hub-narrow a:not(.hub-btn) { color: var(--hub-green-text); }
.hub-wrap a:not(.hub-btn):hover, .hub-narrow a:not(.hub-btn):hover { color: #A7F3D0; }
.hub-card p, .hub-card li, .hub-card dd { color: var(--hub-ink); }

/* ---------- surfaces ---------- */
.hub-card { background: var(--hub-card); border: 1px solid var(--hub-line); border-radius: var(--hub-radius); padding: 20px; color: var(--hub-ink); box-shadow: 0 6px 24px rgba(0,0,0,.25); min-width: 0; }
.hub-card + .hub-card { margin-top: 16px; }
.hub-grid { display: grid; gap: 16px; }
.hub-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.hub-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 760px) { .hub-grid-2, .hub-grid-3 { grid-template-columns: 1fr; } .hub-card { padding: 16px; } }

/* ---------- buttons ---------- */
.hub-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px solid transparent; cursor: pointer; font-family: var(--hub-font); font-weight: 700; font-size: 15px; line-height: 1.2; padding: 11px 20px; border-radius: 10px; background: var(--hub-green); color: #FFFFFF !important; text-decoration: none; min-height: 44px; transition: background .15s, border-color .15s; text-align: center; }
.hub-btn:hover { background: var(--hub-green-hover); color: #FFFFFF !important; }
.hub-btn:focus-visible, .hub-input:focus-visible, .hub-select:focus-visible, .hub-textarea:focus-visible { outline: 3px solid var(--hub-green-bright); outline-offset: 2px; }
.hub-btn-outline { background: transparent; color: var(--hub-green-text) !important; border-color: var(--hub-green-bright); }
.hub-btn-outline:hover { background: var(--hub-tint); color: #FFFFFF !important; }
.hub-btn-danger { background: #B91C1C; }
.hub-btn-danger:hover { background: #991B1B; }
.hub-btn-sm { padding: 7px 14px; min-height: 36px; font-size: 13px; }
.hub-btn[disabled] { opacity: .55; cursor: not-allowed; }

.hub-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }

/* ---------- alerts ---------- */
.hub-alert { padding: 12px 14px; border-radius: 10px; margin: 0 0 14px; font-size: 14px; line-height: 1.5; font-weight: 600; }
.hub-alert-info { background: rgba(52,211,153,.12); color: #A7F3D0; border: 1px solid rgba(52,211,153,.4); }
.hub-alert-warn { background: rgba(251,191,36,.12); color: #FDE68A; border: 1px solid rgba(251,191,36,.4); }
.hub-alert-error { background: rgba(248,113,113,.12); color: #FECACA; border: 1px solid rgba(248,113,113,.45); }
.hub-alert a { color: inherit !important; text-decoration: underline; }

/* ---------- forms ---------- */
.hub-field { margin-bottom: 16px; min-width: 0; }
.hub-label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; color: var(--hub-ink); line-height: 1.4; }
.hub-label .req { color: #FCA5A5; }
.hub-input, .hub-select, .hub-textarea { width: 100%; padding: 11px 12px; border: 1.5px solid var(--hub-input-line); border-radius: 10px; font-family: var(--hub-font); font-size: 15px; font-weight: 500; background: var(--hub-input); color: var(--hub-ink); box-sizing: border-box; color-scheme: dark; min-height: 44px; }
.hub-textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.hub-input::placeholder, .hub-textarea::placeholder { color: var(--hub-faint); opacity: 1; }
.hub-select option { background: #0B1424; color: #F5F7FA; }
.hub-input:focus, .hub-select:focus, .hub-textarea:focus { border-color: var(--hub-green-bright); }
.hub-input[type=file] { padding: 8px 10px; font-size: 14px; }
.hub-input[type=file]::file-selector-button { background: var(--hub-green); color: #fff; border: 0; border-radius: 8px; padding: 7px 12px; margin-right: 10px; font-weight: 700; cursor: pointer; }
.hub-invalid { border-color: #F87171 !important; }
.hub-error { color: #FCA5A5; font-size: 13px; margin-top: 4px; font-weight: 600; }
.hub-checks { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.hub-checks label { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; color: var(--hub-ink); }
.hub-checks input, .hub-radio input { accent-color: var(--hub-green-bright); width: 18px; height: 18px; flex: 0 0 auto; }
.hub-fieldset { border: 1.5px dashed rgba(52,211,153,.45); background: rgba(52,211,153,.05); border-radius: 12px; padding: 16px; margin: 6px 0 18px; min-width: 0; }
.hub-fieldset > legend { font-weight: 800; color: var(--hub-green-text); padding: 0 8px; font-size: 15px; width: auto; float: none; margin-bottom: 0; }
.hub-budget { display: grid; gap: 10px; }
.hub-radio { display: flex; gap: 10px; align-items: center; padding: 11px 12px; border: 1.5px solid var(--hub-input-line); border-radius: 10px; cursor: pointer; background: var(--hub-card-2); color: var(--hub-ink); font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.hub-radio:has(input:checked) { border-color: var(--hub-green-bright); background: var(--hub-tint); }
.hub-inline { display: flex; gap: 10px; flex-wrap: wrap; }
.hub-inline > * { flex: 1 1 140px; min-width: 0; }
.hub-hidden { display: none !important; }

/* ---------- choice cards ---------- */
.hub-choice { text-align: center; padding: 28px 20px; }
.hub-choice .ico { width: 56px; height: 56px; border-radius: 16px; background: var(--hub-tint); color: var(--hub-green-bright); display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; margin-bottom: 12px; }

/* ---------- tables ---------- */
.hub-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.hub-table { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--hub-ink); }
.hub-table th, .hub-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--hub-line); vertical-align: top; }
.hub-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--hub-muted); white-space: nowrap; }
.hub-table small { color: var(--hub-muted); }
.hub-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.hub-filters .hub-input, .hub-filters .hub-select { width: auto; min-width: 150px; flex: 1 1 150px; }
.hub-pager { display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.hub-pager a, .hub-pager span { padding: 6px 12px; border: 1px solid var(--hub-line); border-radius: 8px; text-decoration: none; color: var(--hub-ink) !important; font-size: 13px; }
.hub-pager a.active { background: var(--hub-green); color: #fff !important; border-color: var(--hub-green); }
.hub-dl { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 8px 16px; font-size: 14.5px; margin: 0; }
.hub-dl dt { color: var(--hub-muted); font-weight: 700; }
.hub-dl dd { margin: 0; word-break: break-word; white-space: pre-line; color: var(--hub-ink); }
@media (max-width: 600px) { .hub-dl { grid-template-columns: 1fr; gap: 2px; } .hub-dl dt { margin-top: 10px; } }

/* ---------- category tiles (also used on Request-a-Project entry points) ---------- */
.hub-cat { display: flex; flex-direction: column; text-decoration: none; color: var(--hub-ink); padding: 18px; border: 1px solid var(--hub-line); border-radius: var(--hub-radius); background: var(--hub-card); transition: border-color .15s, transform .15s; height: 100%; }
.hub-cat:hover { border-color: var(--hub-green-bright); transform: translateY(-2px); color: var(--hub-ink); }
.hub-cat .ico { width: 44px; height: 44px; border-radius: 12px; background: var(--hub-tint); color: var(--hub-green-bright); display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 12px; flex: 0 0 auto; }
.hub-cat h3 { font-size: 16px; font-weight: 800; margin: 0 0 6px; color: var(--hub-ink); line-height: 1.3; min-height: 2.6em; }
.hub-cat p { font-size: 13.5px; color: var(--hub-muted); margin: 0; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- experts: carousel + cards ---------- */
.hub-carousel-wrap { position: relative; }
.hub-carousel { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 6px 2px 14px; scrollbar-width: thin; overscroll-behavior-x: contain; }
.hub-carousel > * { scroll-snap-align: start; flex: 0 0 min(300px, 82%); }
.hub-carousel-nav { position: absolute; top: 40%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--hub-line); background: rgba(8,17,29,.92); color: #fff; cursor: pointer; display: none; align-items: center; justify-content: center; z-index: 2; }
.hub-carousel-nav:hover { background: var(--hub-green); }
.hub-carousel-nav.prev { left: -14px; } .hub-carousel-nav.next { right: -14px; }
@media (min-width: 900px) { .hub-carousel-nav { display: inline-flex; } }
.hub-expert { background: var(--hub-card); border: 1px solid var(--hub-line); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 10px; height: 100%; box-sizing: border-box; color: var(--hub-ink); min-width: 0; }
.hub-expert .top { display: flex; gap: 12px; align-items: center; min-width: 0; }
.hub-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--hub-tint); color: var(--hub-green-text); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.3rem; flex: 0 0 64px; }
.hub-expert h3 { font-size: 16.5px; margin: 0; font-weight: 800; color: var(--hub-ink); overflow-wrap: anywhere; }
.hub-expert .headline { font-size: 13.5px; color: var(--hub-muted); margin: 2px 0 0; }
.hub-expert .desc { font-size: 14px; color: var(--hub-ink); line-height: 1.55; flex: 1; margin: 0; opacity: .92; }
.hub-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hub-chip { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--hub-tint); color: var(--hub-green-text); font-weight: 700; }
.hub-chip-cat { background: rgba(96,165,250,.14); color: #BFDBFE; }
.hub-expert .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.hub-expert .actions .hub-btn { flex: 1 1 auto; }
.hub-avail { font-size: 12px; font-weight: 700; }
.hub-avail.available { color: #6EE7B7; } .hub-avail.limited { color: #FCD34D; } .hub-avail.unavailable { color: #FCA5A5; }

/* ---------- conversation ---------- */
.hub-thread { display: flex; flex-direction: column; gap: 12px; max-height: 520px; overflow-y: auto; padding: 8px 4px; }
.hub-msg-body { white-space: pre-wrap; text-align: left; }
.hub-msg { text-align: left; }
.hub-msg > strong { display: block; margin-bottom: 2px; text-align: left; }
.hub-msg { white-space: normal; max-width: 88%; padding: 10px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.55; overflow-wrap: anywhere; }
.hub-msg.them { background: #1C2B47; color: var(--hub-ink); align-self: flex-start; border-bottom-left-radius: 4px; }
.hub-msg.me { background: var(--hub-green); color: #FFFFFF; align-self: flex-end; border-bottom-right-radius: 4px; }
.hub-msg .meta { display: block; font-size: 12px; margin-top: 6px; }
.hub-msg.me .meta { color: rgba(255,255,255,.9); } .hub-msg.them .meta { color: var(--hub-muted); }
.hub-msg a { color: inherit !important; text-decoration: underline; }
.hub-notice-box { background: rgba(52,211,153,.12); border: 1px solid rgba(52,211,153,.4); color: #D1FAE5; border-radius: 12px; padding: 16px; line-height: 1.55; }
.hub-notice-box strong { color: #FFFFFF; }

/* ---------- quotation: a printable "paper" document (explicit light colours, on purpose) ---------- */
.hub-quote { background: #FFFFFF; color: #0F172A; border: 1px solid #CBD5E1; border-radius: 12px; padding: 24px; }
.hub-quote h2 { color: #065F46; font-family: var(--hub-font-display); }
.hub-quote .hub-dl dt { color: #475569; } .hub-quote .hub-dl dd { color: #0F172A; }
.hub-quote table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; }
.hub-quote th, .hub-quote td { padding: 8px 10px; border-bottom: 1px solid #E2E8F0; text-align: left; color: #0F172A; }
.hub-quote th { color: #475569; font-size: 12px; text-transform: uppercase; }
.hub-quote td.num, .hub-quote th.num { text-align: right; white-space: nowrap; }
.hub-quote .total { font-size: 1.25rem; font-weight: 800; text-align: right; color: #065F46; }
.hub-quote .total small { color: #475569 !important; }
.hub-frame { width: 100%; height: 640px; border: 1px solid var(--hub-line); border-radius: 10px; background: #fff; }
/* buttons inside the white quotation paper need dark-on-light colours */
.hub-quote .hub-btn-outline { color: #065F46 !important; border-color: #047857; background: #fff; }
.hub-quote .hub-btn-outline:hover { background: #ECFDF5; color: #064E3B !important; }
@media (max-width: 600px) { .hub-frame { height: 480px; } .hub-quote { padding: 16px; }
  /* line items stack as small cards instead of a clipped 4-column table */
  .hub-quote table thead { display: none; }
  .hub-quote table, .hub-quote tbody, .hub-quote tr { display: block; width: 100%; }
  .hub-quote tr { border-bottom: 1px solid #E2E8F0; padding: 8px 0; }
  .hub-quote td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 2px 0; text-align: right !important; }
  .hub-quote td.desc { font-weight: 700; text-align: left !important; padding-bottom: 4px; }
  .hub-quote td[data-label]::before { content: attr(data-label); color: #475569; font-weight: 600; text-align: left; } }
@media print { .nx-sidebar, .nx-topbar, .hub-noprint { display: none !important; } }

/* ---------- steps / empty states / timeline / checklist ---------- */
.hub-steps { counter-reset: s; display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px) { .hub-steps { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .hub-steps { grid-template-columns: 1fr; } }
.hub-empty { text-align: center; padding: 32px 16px; color: var(--hub-muted); border: 1.5px dashed var(--hub-line); border-radius: 14px; background: var(--hub-card); line-height: 1.6; }
.hub-empty i { font-size: 2rem; color: var(--hub-green-bright); display: block; margin-bottom: 8px; }
.hub-empty a:not(.hub-btn) { color: var(--hub-green-text) !important; text-decoration: underline; }
.hub-timeline { list-style: none; padding: 0; margin: 0; border-left: 2px solid rgba(52,211,153,.4); }
.hub-timeline li { padding: 0 0 12px 16px; position: relative; font-size: 14px; color: var(--hub-ink); }
.hub-timeline li::before { content: ""; position: absolute; left: -6px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--hub-green-bright); }
.hub-timeline small { color: var(--hub-muted); display: block; }
.hub-checklist { list-style: none; padding: 0; margin: 0; }
.hub-checklist li { padding: 6px 0; display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; color: var(--hub-ink); }
.hub-checklist .ok { color: #6EE7B7; } .hub-checklist .no { color: #FCD34D; }
.hub-sr { position: absolute; left: -9999px; }
.hub-legal h2 { font-size: 18px; margin: 24px 0 8px; color: var(--hub-green-text); }
.hub-legal p, .hub-legal li { line-height: 1.7; color: var(--hub-ink); }

/* admin (dark panel) - same tokens; only native select popups need help */
.hub-admin select option { background: #0B1424; color: #F5F7FA; }
@media (prefers-reduced-motion: reduce) { .hub-cat, .hub-btn { transition: none; } .hub-carousel { scroll-behavior: auto; } }