/* Smarzi UX guidance foundation: progressive disclosure, contextual help and onboarding. */
.ui-info-tip { position: relative; display: inline-flex; vertical-align: middle; margin-left: .35rem; z-index: 5; }
.ui-info-tip summary { list-style: none; }
.ui-info-tip summary::-webkit-details-marker { display: none; }
.ui-info-tip__trigger { width: 1.35rem; height: 1.35rem; border: 1px solid rgba(100,116,139,.35); border-radius: 50%; display: inline-grid; place-items: center; background: #fff; color: #475569; font-size: .76rem; font-weight: 800; cursor: help; user-select: none; transition: .18s ease; }
.ui-info-tip__trigger:hover, .ui-info-tip__trigger:focus-visible, .ui-info-tip[open] .ui-info-tip__trigger { border-color: #2563eb; color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); outline: none; }
.ui-info-tip__popover { position: absolute; top: calc(100% + .55rem); left: 50%; transform: translateX(-50%); width: min(19rem, calc(100vw - 2rem)); padding: .8rem .9rem; border: 1px solid rgba(148,163,184,.3); border-radius: .75rem; background: #fff; color: #334155; box-shadow: 0 14px 35px rgba(15,23,42,.15); font-size: .8rem; line-height: 1.45; z-index: 1000; }
.ui-info-tip__title, .ui-info-tip__text { display: block; }
.ui-info-tip__title { color: #0f172a; margin-bottom: .2rem; }
.ui-info-tip--right .ui-info-tip__popover { left: auto; right: 0; transform: none; }
.ui-info-tip--left .ui-info-tip__popover { left: 0; transform: none; }

.ui-getting-started { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 1.25rem; padding: 1.35rem; margin: 0 0 1.5rem; border: 1px solid rgba(148,163,184,.25); border-radius: 1rem; background: linear-gradient(135deg, rgba(37,99,235,.06), rgba(255,255,255,.96) 48%, rgba(16,185,129,.04)); box-shadow: 0 10px 28px rgba(15,23,42,.05); }
.ui-getting-started__intro { min-width: 0; }
.ui-getting-started__heading-row { display: flex; align-items: center; gap: .2rem; }
.ui-getting-started__eyebrow { display: inline-block; color: #2563eb; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ui-getting-started h2 { margin: .35rem 0 .45rem; color: #0f172a; font-size: clamp(1.2rem, 2vw, 1.55rem); }
.ui-getting-started__intro > p { margin: 0; color: #64748b; line-height: 1.55; }
.ui-getting-started__progress { margin-top: 1rem; color: #475569; font-size: .78rem; }
.ui-getting-started__progress-track { height: .38rem; margin-top: .4rem; overflow: hidden; border-radius: 99px; background: rgba(148,163,184,.22); }
.ui-getting-started__progress-track span { display: block; height: 100%; border-radius: inherit; background: #2563eb; transition: width .25s ease; }
.ui-getting-started__actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1rem; }
.ui-guidance-btn { min-height: 2.4rem; display: inline-flex; align-items: center; justify-content: center; padding: .55rem .9rem; border-radius: .65rem; font-size: .82rem; font-weight: 700; text-decoration: none !important; transition: .18s ease; }
.ui-guidance-btn--primary { background: #2563eb; color: #fff !important; border: 1px solid #2563eb; box-shadow: 0 7px 16px rgba(37,99,235,.16); }
.ui-guidance-btn--primary:hover { transform: translateY(-1px); background: #1d4ed8; }
.ui-guidance-btn--secondary { color: #334155 !important; background: #fff; border: 1px solid rgba(148,163,184,.4); }
.ui-guidance-btn--secondary:hover { border-color: #94a3b8; background: #f8fafc; }
.ui-getting-started__steps { list-style: none; display: grid; gap: .55rem; margin: 0; padding: 0; }
.ui-getting-started__step { min-width: 0; display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: .65rem; align-items: center; padding: .72rem .8rem; border: 1px solid rgba(148,163,184,.22); border-radius: .75rem; background: rgba(255,255,255,.88); }
.ui-getting-started__step-number { width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 50%; background: #eff6ff; color: #2563eb; font-weight: 800; font-size: .78rem; }
.ui-getting-started__step.is-complete .ui-getting-started__step-number { background: #ecfdf5; color: #059669; }
.ui-getting-started__step-copy { min-width: 0; }
.ui-getting-started__step-copy strong, .ui-getting-started__step-copy small { display: block; }
.ui-getting-started__step-copy strong { color: #0f172a; font-size: .84rem; }
.ui-getting-started__step-copy small { margin-top: .12rem; color: #64748b; line-height: 1.35; }
.ui-getting-started__step-link { color: #2563eb !important; font-size: .76rem; font-weight: 800; text-decoration: none !important; white-space: nowrap; }

.ui-section-heading-with-help { display: flex; align-items: center; gap: .15rem; }
.ui-primary-action-note { display: flex; gap: .7rem; align-items: flex-start; padding: .8rem .9rem; border-radius: .75rem; background: #f8fafc; border: 1px solid rgba(148,163,184,.2); color: #475569; font-size: .8rem; line-height: 1.45; }
.ui-primary-action-note strong { color: #0f172a; }

@media (max-width: 991.98px) { .ui-getting-started { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) {
  .ui-getting-started { padding: 1rem; border-radius: .85rem; }
  .ui-getting-started__step { grid-template-columns: 1.8rem minmax(0,1fr); }
  .ui-getting-started__step-link { grid-column: 2; justify-self: start; }
  .ui-info-tip__popover { position: fixed; top: auto; left: 1rem; right: 1rem; bottom: 1rem; width: auto; transform: none; }
}

/* Phase 2 customer-journey guidance */
.ui-empty-state__help{margin:.2rem 0 0;color:#64748b;font-size:.78rem;line-height:1.45}.ui-empty-state__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem;margin-top:1rem}.ui-journey-help-row{display:flex;align-items:center;gap:.25rem}.ui-journey-next{display:flex;gap:.75rem;align-items:flex-start;padding:.9rem 1rem;margin:0 0 1.25rem;border:1px solid rgba(37,99,235,.18);border-radius:.8rem;background:#f8fbff;color:#475569;line-height:1.5}.ui-journey-next>i{margin-top:.18rem;color:#2563eb}.ui-journey-next strong{display:block;color:#0f172a;margin-bottom:.1rem}.ui-metric-label{display:flex;align-items:center;gap:.2rem}.ui-page-section-title{display:flex;align-items:center;gap:.2rem}.ui-form-help{display:block;margin-top:.35rem;color:#64748b;font-size:.76rem;line-height:1.4}


/* Phase 3 professional operations guidance */
.ui-operations-callout{display:flex;align-items:flex-start;gap:.75rem;padding:.9rem 1rem;border:1px solid rgba(14,116,144,.18);border-radius:.8rem;background:#f5fbfd;color:#475569;line-height:1.5}.ui-operations-callout>i{color:#0891b2;margin-top:.15rem}.ui-operations-callout strong{display:block;color:#0f172a;margin-bottom:.1rem}.ui-operational-heading{display:flex;align-items:center;gap:.25rem}.ui-guidance-btn:focus-visible,.ui-getting-started__step-link:focus-visible{outline:3px solid rgba(37,99,235,.24);outline-offset:2px}.ui-getting-started__step-link:hover{text-decoration:underline!important}


/* Phase 4 owner and organisation operations guidance */
.ui-getting-started + .card,
.ui-getting-started + .row { margin-top: 1rem; }
.ui-info-tip { vertical-align: middle; }
@media (max-width: 767.98px) {
  .page-title-box .d-flex.gap-2 { flex-wrap: wrap; }
  .ui-getting-started__actions .ui-guidance-btn { width: 100%; justify-content: center; }
}


/* Phase 5 platform/admin specialist guidance */
.ui-specialist-callout{display:flex;align-items:flex-start;gap:.75rem;padding:.9rem 1rem;border:1px solid rgba(99,102,241,.18);border-radius:.8rem;background:#f8faff;color:#475569;line-height:1.5}
.ui-specialist-callout>i{color:#4f46e5;margin-top:.15rem;font-size:1.05rem}
.ui-specialist-callout strong{display:block;color:#0f172a;margin-bottom:.1rem}
@media (max-width:575.98px){.ui-specialist-callout{padding:.8rem .85rem}.ui-specialist-callout>i{margin-top:.1rem}}

/* Phase 6 platform-wide consistency and accessibility */
.ui-skip-link{position:fixed;top:.75rem;left:.75rem;z-index:100000;transform:translateY(-180%);padding:.65rem .9rem;border-radius:.6rem;background:#0f172a;color:#fff!important;font-weight:800;text-decoration:none!important;box-shadow:0 10px 28px rgba(15,23,42,.24);transition:transform .16s ease}
.ui-skip-link:focus{transform:translateY(0);outline:3px solid #93c5fd;outline-offset:2px}
[data-ui-main-content]:focus{outline:none}
.ui-info-tip__trigger{min-width:1.35rem;min-height:1.35rem}
.ui-info-tip__popover{max-height:min(22rem,calc(100vh - 2rem));overflow:auto}
.ui-guidance-btn:focus-visible,.ui-info-tip__trigger:focus-visible,.ui-empty-state__actions a:focus-visible{outline:3px solid rgba(37,99,235,.28);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.ui-skip-link,.ui-guidance-btn,.ui-info-tip__trigger,.ui-getting-started__progress-track span{transition:none!important;scroll-behavior:auto!important}.ui-guidance-btn--primary:hover{transform:none}}
@media (max-width:575.98px){.ui-skip-link{top:.5rem;left:.5rem}.ui-info-tip__trigger{width:1.6rem;height:1.6rem}.ui-guidance-btn{min-height:2.75rem}}