/* Location Pro — tool apps theme (load after each tool’s inline styles) */
@import url('location-pro-tokens.css');

/* ── Nav ── */
.app-nav {
  background: var(--navy) !important;
  border-bottom: 1px solid var(--navy-table) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0 2rem !important;
  height: 58px;
  min-height: 58px;
}

.nav-logo-name {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  color: var(--text-on-navy) !important;
  font-family: var(--font-display) !important;
}

.nav-logo-name .lp-pro,
.nav-logo-name span.lp-pro {
  color: var(--gold) !important;
}

.nav-logo-icon.lp-mark,
.nav-logo-icon:has(.ti) {
  width: 30px !important;
  height: 30px !important;
  background: var(--gold) !important;
  color: var(--navy-deep) !important;
  border-radius: var(--lp-radius-sm) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
}

.nav-logo-icon.lp-mark img {
  display: none !important;
}

.nav-badge {
  color: var(--text-on-navy-muted) !important;
  border: 1px solid rgba(237, 234, 226, 0.16) !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  background: rgba(12, 17, 24, 0.35) !important;
}

@media (max-width: 640px) {
  .app-nav {
    padding: 0 1.25rem !important;
  }
}

/* ── Page shell ── */
body {
  background: var(--navy-deep) !important;
  color: var(--text-on-navy) !important;
  font-family: var(--font-body) !important;
  -webkit-font-smoothing: antialiased;
}

/* App shell main: navy everywhere except .lp-text-surface blocks */
.lp-app-main {
  background: var(--navy-deep) !important;
  color: var(--text-on-navy) !important;
}

#view-dashboard {
  background: var(--navy-deep) !important;
  color: var(--text-on-navy) !important;
  position: relative;
  min-height: 100vh;
  width: 100%;
}

#view-dashboard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(920px, 100vw);
  height: min(520px, 55vh);
  background: radial-gradient(ellipse at center top, rgba(34, 48, 63, 0.95) 0%, transparent 68%);
  pointer-events: none;
}

.page-header {
  background: var(--navy-deep) !important;
  padding: 3rem 2rem 2rem !important;
  position: relative;
}

.page-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(920px, 100vw);
  height: min(480px, 50vh);
  background: radial-gradient(ellipse at center top, rgba(34, 48, 63, 0.95) 0%, transparent 68%);
  pointer-events: none;
}

.page-header > * {
  position: relative;
  z-index: 1;
}

.page-header .brand,
.dash-hdr .brand {
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  color: var(--gold) !important;
  font-weight: 600 !important;
}

.page-header h1,
.dash-hdr h1 {
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  color: var(--text-on-navy) !important;
  font-family: var(--font-display) !important;
}

.page-header p,
.dash-hdr p {
  color: var(--text-on-navy-muted) !important;
}

.page-header {
  color: var(--text-on-navy) !important;
}

.dash-hdr {
  position: relative;
  z-index: 1;
  color: var(--text-on-navy) !important;
}

.dash-body {
  position: relative;
  z-index: 1;
}

.dash-row h2 {
  color: var(--text-on-navy) !important;
  font-weight: 600 !important;
  font-family: var(--font-display) !important;
  letter-spacing: -0.02em !important;
}

/* ── Sidebars & editor chrome (navy) ── */
#view-editor {
  background: var(--navy-deep) !important;
  color: var(--text-on-navy) !important;
}

.sidebar,
.prev-tb {
  background: var(--navy) !important;
  border-color: var(--navy-table) !important;
}

.sidebar {
  border-right: 1px solid var(--navy-table) !important;
}

.prev-tb {
  border-bottom: 1px solid var(--navy-table) !important;
}

.prev-tb h2,
.sb-title {
  color: var(--text-on-navy) !important;
  font-weight: 600 !important;
  font-family: var(--font-display) !important;
}

.sb-subtitle {
  color: var(--text-on-navy-muted) !important;
}

.sb-back {
  color: var(--text-on-navy-muted) !important;
}

.sb-back:hover {
  color: var(--text-on-navy) !important;
}

.sb-lbl {
  color: var(--text-on-navy-muted) !important;
  letter-spacing: 0.12em !important;
}

.day-pill {
  color: var(--text-on-navy-muted) !important;
  border-radius: var(--lp-radius-sm) !important;
}

.day-pill:hover {
  background: var(--navy-table) !important;
  color: var(--text-on-navy) !important;
}

.day-pill.active {
  background: rgba(227, 178, 60, 0.12) !important;
  color: var(--gold) !important;
}

.day-pill.active .num {
  background: var(--gold) !important;
  color: var(--navy-deep) !important;
}

.nav-item {
  color: var(--text-on-navy-muted) !important;
  border-radius: var(--lp-radius-sm) !important;
}

.nav-item:hover {
  background: var(--navy-table) !important;
  color: var(--text-on-navy) !important;
}

.nav-item.active {
  background: rgba(227, 178, 60, 0.12) !important;
  color: var(--gold) !important;
}

/* Contracts sidebar */
.layout .sidebar {
  background: var(--lp-bg-surface) !important;
}

.sidebar h2 {
  color: var(--text-on-navy-muted) !important;
  letter-spacing: 0.12em !important;
}

/* ── Dashboard cards ── */
#view-dashboard .scard,
.scard {
  background: rgba(27, 37, 50, 0.85) !important;
  border: 1px solid rgba(245, 244, 241, 0.12) !important;
  border-radius: var(--lp-radius-xl) !important;
  color: var(--text-on-navy) !important;
}

#view-dashboard .scard:hover,
.scard:hover {
  background: rgba(34, 48, 63, 0.95) !important;
  border-color: rgba(227, 178, 60, 0.4) !important;
  box-shadow: none !important;
}

#view-dashboard .scard .sdates,
#view-dashboard .scard .smeta,
.scard .sdates,
.scard .smeta {
  color: var(--text-on-navy-muted) !important;
}

#view-dashboard .empty,
.empty {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px dashed rgba(245, 244, 241, 0.2) !important;
  border-radius: var(--lp-radius-lg) !important;
  color: var(--text-on-navy-muted) !important;
}

#view-dashboard .scard .badge,
.scard .badge {
  color: var(--gold) !important;
  letter-spacing: 0.12em !important;
  font-weight: 600 !important;
}

#view-dashboard .scard h3,
.scard h3 {
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  color: var(--text-on-navy) !important;
}

/* Ghost buttons — dark dashboards only */
#view-dashboard .btn-ghost,
.page-header .btn-ghost,
.dash-row .btn-ghost {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--text-on-navy) !important;
  border: 1px solid rgba(245, 244, 241, 0.18) !important;
}

#view-dashboard .btn-ghost:hover,
.dash-row .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--text-on-navy) !important;
}

/* Ghost buttons — on white text surfaces */
.card .btn-ghost,
.sheet .btn-ghost,
.modal .btn-ghost,
.loc-editor .btn-ghost {
  background: var(--neutral-surface) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--neutral-border) !important;
}

.card .btn-ghost:hover,
.sheet .btn-ghost:hover,
.modal .btn-ghost:hover,
.loc-editor .btn-ghost:hover {
  color: var(--text-primary) !important;
  border-color: var(--gold) !important;
  background: var(--gold-tint) !important;
}

/* Ghost buttons — navy chrome */
.main-content .btn-ghost,
.main .btn-ghost,
.visor-wrap .btn-ghost,
.lp-app-main .btn-ghost:not(#view-dashboard .btn-ghost) {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--text-on-navy) !important;
  border: 1px solid rgba(245, 244, 241, 0.18) !important;
}

.main-content .btn-ghost:hover,
.main .btn-ghost:hover,
.visor-wrap .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--text-on-navy) !important;
  border-color: rgba(227, 178, 60, 0.45) !important;
}

/* ── Buttons ── */
.btn,
button {
  border-radius: var(--lp-radius-md) !important;
  font-weight: 500 !important;
}

.btn-primary,
button.primary,
.nav-btn.active {
  background: var(--gold) !important;
  color: var(--navy-deep) !important;
  border-color: var(--gold) !important;
  font-weight: 600 !important;
}

.btn-primary:hover,
button.primary:hover {
  background: var(--gold-hover) !important;
  border-color: var(--gold-hover) !important;
}

.btn-outline {
  border: 1px solid var(--neutral-border) !important;
  color: var(--text-secondary) !important;
  background: var(--neutral-surface) !important;
}

.btn-outline:hover {
  border-color: var(--gold) !important;
  color: var(--text-primary) !important;
  background: var(--gold-tint) !important;
}

.nav-btn {
  border: 1px solid rgba(237, 234, 226, 0.14) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--text-on-navy-muted) !important;
  border-radius: var(--lp-radius-sm) !important;
}

.nav-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--text-on-navy) !important;
}

.nav-btn.active {
  color: var(--navy-deep) !important;
}

.btn-home {
  border: 1px solid var(--neutral-border) !important;
  background: var(--neutral-surface) !important;
  color: var(--text-secondary) !important;
  border-radius: var(--lp-radius-sm) !important;
}

.btn-home:hover {
  background: var(--gold-tint) !important;
  color: var(--text-primary) !important;
}

/* ── Editor: navy shell; cards/sheets/inputs stay on white text surfaces ── */
.main-content,
.main,
.layout .main {
  background: var(--navy-deep) !important;
  color: var(--text-on-navy) !important;
}

.visor-wrap {
  background: var(--navy-deep) !important;
  color: var(--text-on-navy) !important;
}

.card,
.loc-editor,
.sheet,
.modal {
  background: var(--surface-text) !important;
  border: 1px solid var(--neutral-border) !important;
  color: var(--text-primary) !important;
  border-radius: var(--lp-radius-lg) !important;
}

.map-shell,
.panel {
  background: rgba(27, 37, 50, 0.85) !important;
  border: 1px solid rgba(245, 244, 241, 0.1) !important;
  color: var(--text-on-navy) !important;
  border-radius: var(--lp-radius-lg) !important;
}

.ch {
  border-bottom-color: var(--gold) !important;
}

.ch h3,
.card .ph h2,
.card .form-header h2,
.sheet h1,
.modal h3 {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  font-family: var(--font-display) !important;
}

.ph h2,
.form-header h2 {
  color: var(--text-on-navy) !important;
  font-weight: 600 !important;
  font-family: var(--font-display) !important;
}

.ph p,
.help,
.info-pill,
.info-box {
  color: var(--text-secondary) !important;
}

label,
.kv dt,
.hint,
.status {
  color: var(--text-secondary) !important;
}

.kv dd {
  color: var(--text-primary) !important;
}

.main-content input[type="text"],
.main-content input[type="email"],
.main-content input[type="tel"],
.main-content input[type="url"],
.main-content input[type="number"],
.main-content input[type="time"],
.main-content textarea,
.main-content select,
.card input,
.card textarea,
.card select,
.loc-editor input,
.loc-editor textarea,
.sheet .field input,
.sheet .field textarea,
.sheet .field select,
.sheet td input,
.sheet td select {
  background: var(--surface-text) !important;
  border: 1px solid var(--neutral-border) !important;
  color: var(--text-primary) !important;
  border-radius: var(--lp-radius-sm) !important;
}

.sheet tbody tr:nth-child(even) {
  background: var(--surface-text-muted) !important;
}

.info-pill,
.info-box,
.help {
  background: var(--gold-tint) !important;
  border: 1px solid rgba(227, 178, 60, 0.28) !important;
}

.layer-block {
  background: rgba(12, 17, 24, 0.4) !important;
  border: 1px solid rgba(245, 244, 241, 0.1) !important;
  color: var(--text-on-navy) !important;
}

.layer-block h3 {
  color: var(--text-on-navy) !important;
}

.panel h2 {
  color: var(--gold) !important;
  border-bottom-color: rgba(245, 244, 241, 0.1) !important;
}

.panel h3,
.panel .kv dd {
  color: var(--text-on-navy) !important;
}

.panel .kv dt {
  color: var(--text-on-navy-muted) !important;
}

.visor-hdr h1 {
  font-weight: 700 !important;
  color: var(--text-on-navy) !important;
}

.visor-hdr p {
  color: var(--text-on-navy-muted) !important;
}

.main-content input:focus,
.main-content textarea:focus,
.main-content select:focus,
.card input:focus,
.card textarea:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 2px rgba(227, 178, 60, 0.22) !important;
}

.att-hdr {
  border-bottom-color: var(--lp-border-md) !important;
}

.att-row input {
  background: var(--lp-bg-card) !important;
  border-color: var(--lp-border-md) !important;
}

.loc-fields {
  background: var(--lp-bg-card) !important;
  border-color: var(--lp-border) !important;
}

/* ── Contracts-specific ── */
.plantilla-btn.activa {
  background: var(--gold-tint) !important;
  border-color: rgba(227, 178, 60, 0.4) !important;
}

.plantilla-btn.activa .plantilla-icon {
  background: var(--gold-tint) !important;
  border-color: rgba(227, 178, 60, 0.35) !important;
}

.plantilla-icon {
  background: var(--neutral-surface) !important;
  border: 1px solid var(--neutral-border) !important;
  border-radius: var(--lp-radius-sm) !important;
}

.tpl-upload-zone:hover,
.refresh-btn:hover {
  border-color: var(--gold) !important;
  background: var(--gold-tint) !important;
}

.sheet th {
  background: var(--navy-table) !important;
  color: var(--text-on-navy) !important;
}

.sheet td {
  color: var(--text-primary) !important;
}

.proto-warn {
  border: 1px solid rgba(227, 178, 60, 0.35) !important;
  background: var(--gold-tint) !important;
  border-radius: var(--lp-radius-md) !important;
}

.proto-warn strong {
  color: var(--gold-dark) !important;
}

/* ── Preview / document areas ── */
#view-preview,
.edit-canvas,
.prev-pages {
  background: #C8CDD4 !important;
}

.edit-sheet {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
}

/* ── Modals & toasts ── */
.modal {
  background: var(--neutral-surface) !important;
  border: 1px solid var(--neutral-border) !important;
  border-radius: var(--lp-radius-lg) !important;
  color: var(--text-primary) !important;
}

.modal h3 {
  color: var(--text-primary) !important;
  font-family: var(--font-display) !important;
}

.modal p {
  color: var(--text-secondary) !important;
}

.notif {
  background: var(--neutral-surface) !important;
  border: 1px solid var(--neutral-border) !important;
  color: var(--text-primary) !important;
  border-left: 3px solid var(--gold) !important;
}

/* ── Tables in UI ── */
table.et th {
  background: var(--navy-table) !important;
  color: var(--text-on-navy) !important;
}

table.et td {
  border-color: var(--neutral-border) !important;
  color: var(--text-primary) !important;
}

.tbl-wrap {
  border: 1px solid var(--neutral-border) !important;
  border-radius: var(--lp-radius-sm) !important;
}

/* ── Misc legacy accent cleanup ── */
.plantilla-btn.activa,
[class*="activa"] {
  --legacy-gold: rgba(227, 178, 60, 0.35);
}

/* ── Contracts upload & batch ── */
.tpl-upload-zone.drag-over {
  border-color: var(--gold) !important;
  background: var(--gold-tint) !important;
}

.batch-zone {
  border: 1px dashed var(--neutral-border) !important;
  border-radius: var(--lp-radius-md) !important;
}

.batch-zone:hover,
.batch-zone.drag-over {
  border-color: var(--gold) !important;
  background: var(--gold-tint) !important;
}

/* ── Location list preview toolbar buttons ── */
.prev-tb .btn-ghost {
  background: transparent !important;
  border: 1px solid rgba(237, 234, 226, 0.16) !important;
  color: var(--text-on-navy-muted) !important;
}

.prev-tb .btn-primary {
  background: var(--gold) !important;
  color: var(--navy-deep) !important;
}

/* ── Timesheets table header ── */
thead th {
  background: var(--navy-table) !important;
  color: var(--text-on-navy) !important;
}

/* ── Visor layer chips ── */
.layer-chip {
  border: 1px solid var(--neutral-border) !important;
  background: var(--neutral-surface) !important;
  color: var(--text-secondary) !important;
}

.layer-chip.active {
  border-color: var(--gold) !important;
  background: var(--gold-tint) !important;
  color: var(--gold-dark) !important;
}