/* Local Living V4.3 — Simple Parent-like UI
   Palette lock: #071C24 / #CAFA4B / #FFFFFF / #F4F6F2
   No decorative semantic color noise. Parent source UI remains untouched. */
:root {
  --v43-primary: #071c24;
  --v43-secondary: #cafa4b;
  --v43-white: #ffffff;
  --v43-soft: #f4f6f2;
  --v43-border: rgba(7, 28, 36, 0.11);
  --v43-muted: rgba(7, 28, 36, 0.58);
  --v43-faint: rgba(7, 28, 36, 0.06);
}
html,
body,
body.fe-workspace,
body.admin-workspace,
body.fe-workspace .main-area,
body.admin-workspace .main-area,
body.fe-workspace .content,
body.admin-workspace .content {
  background: var(--v43-white) !important;
  color: var(--v43-primary) !important;
}
body {
  font-family: Inter, Arial, sans-serif !important;
}

/* Kill browser-default button/link/select appearance. */
button,
a,
input,
select,
textarea {
  font: inherit;
}
button {
  color: inherit;
}
button.link,
a.link,
.link {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 6px 2px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  color: var(--v43-primary) !important;
  font-size: 10.5px !important;
  font-weight: 720 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  cursor: pointer !important;
}
button.link:hover,
a.link:hover,
.link:hover {
  opacity: 0.62 !important;
  text-decoration: none !important;
}

/* Native inputs/selects — consistent and quiet. */
input,
textarea,
select,
.field input,
.field textarea,
.field select,
.ll-list-tools input,
.ll-list-tools select {
  border: 1px solid var(--v43-border) !important;
  background-color: var(--v43-white) !important;
  color: var(--v43-primary) !important;
  box-shadow: none !important;
  outline: none !important;
}
select,
.field select,
.ll-list-tools select {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M2 2l4 4 4-4' fill='none' stroke='%23071C24' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 10px 7px !important;
  padding-right: 34px !important;
}
input:focus,
textarea:focus,
select:focus {
  border-color: rgba(7, 28, 36, 0.34) !important;
  box-shadow: 0 0 0 3px rgba(202, 250, 75, 0.28) !important;
}

/* Simple app chrome. */
body.fe-workspace .sidebar,
body.admin-workspace .sidebar {
  background: var(--v43-white) !important;
  border-right: 1px solid var(--v43-border) !important;
}
body.fe-workspace .topbar,
body.admin-workspace .topbar {
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom: 1px solid var(--v43-border) !important;
  backdrop-filter: blur(14px) !important;
}
body.fe-workspace .workspace-button,
body.admin-workspace .workspace-button {
  background: var(--v43-white) !important;
  border: 1px solid var(--v43-border) !important;
  color: var(--v43-primary) !important;
  box-shadow: none !important;
}
body.fe-workspace .workspace-button > i:last-child,
body.admin-workspace .workspace-button > i:last-child {
  opacity: 0.42 !important;
  font-size: 10px !important;
}
body.fe-workspace .nav-item,
body.admin-workspace .nav-item {
  color: var(--v43-muted) !important;
  background: transparent !important;
  border-radius: 12px !important;
}
body.fe-workspace .nav-item:hover,
body.admin-workspace .nav-item:hover {
  background: var(--v43-soft) !important;
  color: var(--v43-primary) !important;
}
body.fe-workspace .nav-item.active,
body.admin-workspace .nav-item.active {
  background: var(--v43-soft) !important;
  color: var(--v43-primary) !important;
  font-weight: 700 !important;
}
body.fe-workspace .nav-item.active i,
body.admin-workspace .nav-item.active i,
body.fe-workspace .nav-item.active .ll-fa-inline,
body.admin-workspace .nav-item.active .ll-fa-inline {
  color: var(--v43-primary) !important;
}
body.fe-workspace .mini-logo,
body.admin-workspace .mini-logo {
  background: var(--v43-secondary) !important;
  color: var(--v43-primary) !important;
}
.notif-dot {
  background: var(--v43-secondary) !important;
  border: 1px solid var(--v43-white) !important;
}
.avatar {
  background: var(--v43-primary) !important;
  color: var(--v43-white) !important;
}

/* Replace dark "AI hero" with calm information header + real sport image. */
body.fe-workspace .hero-card,
body.admin-workspace .hero-card {
  min-height: 132px !important;
  padding: 22px 24px !important;
  grid-template-columns: minmax(0, 1fr) 172px !important;
  gap: 24px !important;
  align-items: center !important;
  background: var(--v43-white) !important;
  color: var(--v43-primary) !important;
  border: 1px solid var(--v43-border) !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  overflow: hidden !important;
  position: relative !important;
}
body.fe-workspace .hero-card:before,
body.admin-workspace .hero-card:before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 20px !important;
  bottom: 20px !important;
  width: 4px !important;
  background: var(--v43-secondary) !important;
  border-radius: 0 4px 4px 0 !important;
}
body.fe-workspace .hero-card:after,
body.admin-workspace .hero-card:after {
  content: none !important;
}
body.fe-workspace .hero-card .eyebrow,
body.admin-workspace .hero-card .eyebrow {
  color: var(--v43-muted) !important;
  font-size: 9px !important;
  letter-spacing: 0.13em !important;
}
body.fe-workspace .hero-card h1,
body.admin-workspace .hero-card h1 {
  color: var(--v43-primary) !important;
  font-size: 25px !important;
  line-height: 1.08 !important;
  letter-spacing: -0.045em !important;
  margin: 5px 0 8px !important;
  max-width: 680px !important;
}
body.fe-workspace .hero-card p,
body.admin-workspace .hero-card p {
  color: var(--v43-muted) !important;
  font-size: 11.5px !important;
  line-height: 1.6 !important;
  max-width: 680px !important;
}
body.fe-workspace .hero-icon,
body.admin-workspace .hero-icon {
  width: 172px !important;
  height: 96px !important;
  border-radius: 15px !important;
  background-image: url("../images/basketball.webp") !important;
  background-size: cover !important;
  background-position: center !important;
  border: 1px solid var(--v43-border) !important;
  color: transparent !important;
  box-shadow: none !important;
}
body.fe-workspace .hero-icon i,
body.admin-workspace .hero-icon i,
body.fe-workspace .hero-icon svg,
body.admin-workspace .hero-icon svg {
  display: none !important;
}

/* Cards / hierarchy — one neutral visual vocabulary. */
.card,
.stat-card,
.quick-card,
.offer-card,
.program-card,
.facility-card,
.slot-card,
.request-card,
.life-card,
.notification-card,
.official-card,
.catalog-card,
.journey-card,
.modal-card,
.builder-main,
.builder-steps,
.editor-content,
.editor-nav {
  background: var(--v43-white) !important;
  border-color: var(--v43-border) !important;
  box-shadow: none !important;
}
.card,
.quick-card,
.offer-card,
.program-card,
.facility-card,
.slot-card,
.request-card,
.life-card,
.notification-card,
.official-card,
.catalog-card,
.journey-card {
  border-radius: 16px !important;
}
.card-head h3,
.section-title h3 {
  color: var(--v43-primary) !important;
}
.muted,
.card p,
.section-title p {
  color: var(--v43-muted) !important;
}

/* KPI remains compact 4-up, now even quieter. */
.stat-grid {
  gap: 9px !important;
  margin: 15px 0 20px !important;
}
.stat-card {
  min-height: 78px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
}
.stat-head {
  font-size: 9.5px !important;
  color: var(--v43-muted) !important;
}
.stat-head > span {
  color: var(--v43-muted) !important;
  font-weight: 600 !important;
}
.stat-icon {
  width: 27px !important;
  height: 27px !important;
  min-width: 27px !important;
  border-radius: 9px !important;
  background: var(--v43-soft) !important;
  color: var(--v43-primary) !important;
}
.stat-card h3 {
  font-size: 19px !important;
  margin: 8px 0 2px !important;
  color: var(--v43-primary) !important;
}
.delta {
  font-size: 8px !important;
  color: var(--v43-muted) !important;
}

/* Buttons — only primary, secondary and neutral. */
.btn {
  min-height: 38px !important;
  border-radius: 999px !important;
  padding: 0 14px !important;
  font-size: 10px !important;
  font-weight: 720 !important;
  box-shadow: none !important;
}
.btn-primary {
  background: var(--v43-primary) !important;
  color: var(--v43-white) !important;
  border: 1px solid var(--v43-primary) !important;
}
.btn-primary:hover {
  background: rgba(7, 28, 36, 0.88) !important;
}
.btn-soft,
.btn-secondary {
  background: var(--v43-white) !important;
  color: var(--v43-primary) !important;
  border: 1px solid var(--v43-border) !important;
}
.btn-soft:hover,
.btn-secondary:hover {
  background: var(--v43-soft) !important;
}
.btn-danger {
  background: var(--v43-white) !important;
  color: var(--v43-primary) !important;
  border: 1px dashed rgba(7, 28, 36, 0.22) !important;
}

/* Status colors: lime for positive, neutral for all other states. */
.badge,
.count-pill,
.official-meta span,
.program-meta span {
  border-radius: 999px !important;
}
.badge.green {
  background: var(--v43-secondary) !important;
  color: var(--v43-primary) !important;
}
.badge.blue,
.badge.purple,
.badge.orange,
.badge.red,
.count-pill {
  background: var(--v43-soft) !important;
  color: var(--v43-primary) !important;
  border: 0 !important;
}

/* Tabs & filters use only neutral + lime active. */
.v41-tabs {
  background: var(--v43-soft) !important;
  border-radius: 13px !important;
  padding: 3px !important;
}
.v41-tab {
  color: var(--v43-muted) !important;
}
.v41-tab.active {
  background: var(--v43-white) !important;
  color: var(--v43-primary) !important;
  box-shadow: none !important;
}
.v41-tab .v41-count {
  background: rgba(7, 28, 36, 0.07) !important;
  color: var(--v43-primary) !important;
}
.v41-tab.active .v41-count,
.filter-chip.active {
  background: var(--v43-secondary) !important;
  color: var(--v43-primary) !important;
  border-color: var(--v43-secondary) !important;
}
.filter-chip {
  background: var(--v43-white) !important;
  border: 1px solid var(--v43-border) !important;
  color: var(--v43-primary) !important;
}

/* Search/filter toolbar and tables. */
.ll-list-tools {
  background: var(--v43-white) !important;
  border-color: var(--v43-border) !important;
  border-radius: 14px !important;
  padding: 9px 10px !important;
}
.ll-search {
  background: var(--v43-soft) !important;
  border: 0 !important;
}
.table th {
  background: var(--v43-white) !important;
  color: var(--v43-muted) !important;
  border-color: var(--v43-border) !important;
}
.table td {
  border-color: var(--v43-border) !important;
}
.table tbody tr:hover {
  background: var(--v43-soft) !important;
}

/* Quick actions — simple utility cards, no colored decoration. */
.quick-grid {
  gap: 10px !important;
}
.quick-card {
  min-height: 96px !important;
  padding: 14px !important;
  color: var(--v43-primary) !important;
  transition:
    border-color 0.16s ease,
    background 0.16s ease !important;
}
.quick-card:hover {
  background: var(--v43-soft) !important;
  border-color: rgba(7, 28, 36, 0.18) !important;
  transform: none !important;
}
.quick-card > i,
.quick-card > .ll-fa-inline,
.quick-card > svg {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  background: var(--v43-soft) !important;
  color: var(--v43-primary) !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 0 12px !important;
  padding: 8px !important;
}
.quick-card b {
  font-size: 10.5px !important;
}
.quick-card small {
  font-size: 8.5px !important;
  color: var(--v43-muted) !important;
}
.timeline-icon {
  background: var(--v43-soft) !important;
  color: var(--v43-primary) !important;
  border-radius: 10px !important;
}

/* Listing / builder / request internals. */
.request-facts > div,
.life-card .life-meta span,
.builder-toolbar,
.choice-card .iconbox,
.offer-card-top,
.life-col,
.decision-note,
.achievement-grid article,
.badge-display article,
.year-numbers article {
  background: var(--v43-soft) !important;
  color: var(--v43-primary) !important;
}
.request-facts i,
.choice-card span {
  color: var(--v43-primary) !important;
}
.choice-card:hover,
.choice-card.selected {
  background: var(--v43-soft) !important;
  border-color: rgba(7, 28, 36, 0.24) !important;
  box-shadow: 0 0 0 2px rgba(202, 250, 75, 0.38) !important;
}
.builder-step:hover {
  background: var(--v43-soft) !important;
}
.builder-step.active {
  background: var(--v43-soft) !important;
  color: var(--v43-primary) !important;
}
.builder-step.active .step-num {
  background: var(--v43-secondary) !important;
  color: var(--v43-primary) !important;
}
.editor-tab.active {
  background: var(--v43-soft) !important;
  color: var(--v43-primary) !important;
}

/* Remove decorative gradients/colors on secondary feature surfaces. */
.official-hero,
.growth-hero,
.market-hero,
.year-top {
  background: var(--v43-white) !important;
  color: var(--v43-primary) !important;
  border: 1px solid var(--v43-border) !important;
  box-shadow: inset 4px 0 0 var(--v43-secondary) !important;
}
.official-hero:after {
  content: none !important;
}
.official-hero p,
.growth-hero p,
.market-hero p,
.year-top p {
  color: var(--v43-muted) !important;
}
.official-hero .hero-mark,
.achievement-mark,
.badge-display i,
.analytics-rank > span,
.request-type i {
  background: var(--v43-secondary) !important;
  color: var(--v43-primary) !important;
}
.official-cover {
  background: var(--v43-primary) !important;
}
.year-highlight,
.achievement-message {
  background: var(--v43-secondary) !important;
  color: var(--v43-primary) !important;
}
.notification-card.unread {
  border-color: rgba(7, 28, 36, 0.17) !important;
  box-shadow: inset 3px 0 0 var(--v43-secondary) !important;
}
.notif-icon,
.notification-card.unread .notif-icon {
  background: var(--v43-soft) !important;
  color: var(--v43-primary) !important;
}

/* Modal / empty / state panels. */
.u-state-panel,
.u-inline-notice,
.v41-empty {
  background: var(--v43-white) !important;
  border-color: var(--v43-border) !important;
  color: var(--v43-primary) !important;
}
.u-state-panel.error,
.u-state-panel.warning {
  background: var(--v43-soft) !important;
  border-color: var(--v43-border) !important;
}
.u-state-panel.error .u-state-icon,
.u-state-icon {
  background: var(--v43-secondary) !important;
  color: var(--v43-primary) !important;
}

/* User-friendly spacing — remove "template" density. */
#mainContent > .page-actions {
  margin-bottom: 24px !important;
}
.section-title {
  margin: 28px 0 13px !important;
}
.grid-2 {
  gap: 20px !important;
}
.card {
  padding: 19px !important;
}
.card-head {
  margin-bottom: 15px !important;
}
.list-stack .list-row {
  border: 0 !important;
  border-bottom: 1px solid var(--v43-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 13px 2px !important;
}
.list-stack .list-row:last-child {
  border-bottom: 0 !important;
}

/* Mobile: preserve simple parent-like bottom navigation. */
@media (max-width: 760px) {
  body.fe-workspace .content {
    padding: 18px 16px 98px !important;
  }
  body.fe-workspace .hero-card {
    grid-template-columns: 1fr !important;
    padding: 19px 19px 19px 22px !important;
    min-height: auto !important;
    border-radius: 18px !important;
  }
  body.fe-workspace .hero-card h1 {
    font-size: 22px !important;
  }
  body.fe-workspace .hero-icon {
    display: none !important;
  }
  .role-bottom-nav {
    background: rgba(255, 255, 255, 0.98) !important;
    border-top: 1px solid var(--v43-border) !important;
    box-shadow: none !important;
  }
  .role-bottom-nav button {
    color: var(--v43-muted) !important;
  }
  .role-bottom-nav button.active {
    color: var(--v43-primary) !important;
  }
  .role-bottom-nav button.active .nav-icon-wrap {
    background: var(--v43-secondary) !important;
    color: var(--v43-primary) !important;
  }
  .stat-grid {
    gap: 8px !important;
  }
  .stat-card {
    flex-basis: 140px !important;
    min-width: 140px !important;
  }
  .grid-2 {
    gap: 14px !important;
  }
  .card {
    padding: 16px !important;
  }
}

/* Final palette cleanup for remaining legacy surfaces. */
.program-cover,
.offer-card-top,
.summary-program .icon,
.participant-avatar,
.transaction-status i,
.choice-card .iconbox,
.request-facts > div,
.schedule-card .icon,
.roster-avatar {
  background: var(--v43-soft) !important;
  color: var(--v43-primary) !important;
  background-image: none !important;
}
.program-cover {
  min-height: 86px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  padding: 14px !important;
}
.program-cover > i,
.program-cover > .ll-fa-inline {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  background: var(--v43-secondary) !important;
  color: var(--v43-primary) !important;
  display: grid !important;
  place-items: center !important;
  padding: 8px !important;
}
.program-open {
  appearance: none !important;
  border: 0 !important;
  border-top: 1px solid var(--v43-border) !important;
  background: var(--v43-white) !important;
  color: var(--v43-primary) !important;
  width: 100% !important;
  padding: 11px 14px !important;
  text-align: left !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}
.program-open:hover {
  background: var(--v43-soft) !important;
}
.offer-card-top {
  min-height: 100px !important;
}
.consent-required {
  background: var(--v43-soft) !important;
  color: var(--v43-primary) !important;
}
.checkout-progress div.active,
.participant-card.selected,
.payment-method.active {
  background: var(--v43-soft) !important;
  color: var(--v43-primary) !important;
  border-color: rgba(7, 28, 36, 0.22) !important;
}
.checkout-progress .active span {
  background: var(--v43-secondary) !important;
  color: var(--v43-primary) !important;
}
.checkout-progress .done span {
  background: var(--v43-primary) !important;
  color: var(--v43-white) !important;
}
.progress-track span,
.capacity-bar .track span {
  background: var(--v43-secondary) !important;
}
.success-icon {
  background: var(--v43-secondary) !important;
  color: var(--v43-primary) !important;
}
.gateway-brand {
  background: var(--v43-primary) !important;
  color: var(--v43-white) !important;
}
.gateway-brand small {
  color: rgba(255, 255, 255, 0.65) !important;
}

/* Login pages — no decorative gradient. */
.login-body {
  background: var(--v43-white) !important;
}
.login-shell {
  background: var(--v43-white) !important;
}
.login-brand-panel {
  background: var(--v43-primary) !important;
  color: var(--v43-white) !important;
}
.login-brand-panel:after {
  content: none !important;
}
.brand-mark {
  background: var(--v43-secondary) !important;
  color: var(--v43-primary) !important;
}
.flow-mini span {
  background: rgba(255, 255, 255, 0.09) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
}
.login-card {
  border-color: var(--v43-border) !important;
  box-shadow: none !important;
  border-radius: 22px !important;
}
.demo-box {
  background: var(--v43-soft) !important;
  color: var(--v43-primary) !important;
}
.input-with-icon {
  border-color: var(--v43-border) !important;
  box-shadow: none !important;
}

/* Collapse legacy theme variables into the four-color system. */
:root {
  --ll-ink: #071c24 !important;
  --ll-lime: #cafa4b !important;
  --ll-canvas: #ffffff !important;
  --ll-card: #ffffff !important;
  --ll-line: rgba(7, 28, 36, 0.11) !important;
  --ll-muted: rgba(7, 28, 36, 0.58) !important;
  --ll-soft: #f4f6f2 !important;
  --navy: #071c24 !important;
  --text: #071c24 !important;
  --lime: #cafa4b !important;
  --canvas: #ffffff !important;
  --bg: #ffffff !important;
  --card: #ffffff !important;
  --line: rgba(7, 28, 36, 0.11) !important;
  --muted: rgba(7, 28, 36, 0.58) !important;
  --green: #071c24 !important;
  --green-soft: #f4f6f2 !important;
  --blue: #071c24 !important;
  --blue-soft: #f4f6f2 !important;
  --orange: #071c24 !important;
  --orange-soft: #f4f6f2 !important;
  --purple: #071c24 !important;
  --purple-soft: #f4f6f2 !important;
  --red: #071c24 !important;
  --red-soft: #f4f6f2 !important;
}

/* V4.5 final audit — CMS mobile containment */
@media (max-width: 700px) {
  body.admin-workspace .content {
    padding-left: 14px !important;
    padding-right: 14px !important;
    overflow-x: hidden !important;
  }
  body.admin-workspace .grid-2,
  body.admin-workspace .grid-3 {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  body.admin-workspace .card,
  body.admin-workspace .card-head,
  body.admin-workspace .list-stack,
  body.admin-workspace .list-row,
  body.admin-workspace .ll-list-tools,
  body.admin-workspace .table-wrap {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  body.admin-workspace .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  body.admin-workspace .table {
    min-width: 620px !important;
    width: 620px !important;
  }
  body.admin-workspace .ll-list-tools {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.admin-workspace .ll-list-tools > * {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  body.admin-workspace .ll-search {
    min-width: 0 !important;
    width: 100% !important;
  }
  body.admin-workspace .ll-result-count {
    width: auto !important;
  }
}

/* Account actions are available on desktop and mobile. */
.profile-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  margin-top: 24px;
  padding: 12px 20px;
  border: 1px solid #dce3de;
  border-radius: 12px;
  background: #071c24;
  color: white;
  font:
    600 12px Inter,
    Arial,
    sans-serif;
  cursor: pointer;
}
.profile-logout:focus-visible {
  outline: 3px solid #cafa4b;
  outline-offset: 3px;
}
.achievement-grid article b {
  overflow-wrap: anywhere;
}
.achievement-message p {
  line-height: 1.65;
}