/*
  App-level CSS on top of Bootstrap.
  Keep styles scoped to avoid fighting Bootstrap primitives.
*/

/* Property360-inspired theme layer (Bootstrap overrides)
   - typography from site: Yantramanav, 18px, weight 300, line-height ~26px
   - primary accent: gold, dark: charcoal, body text: grey-blue
*/
:root{
  --p360-charcoal:#231F20;
  --p360-gold:#FAB800;
  --p360-blue:#014782;
  --p360-text:#565969;
  --p360-bg:#ffffff;
  --p360-surface:#f7f7f8;
  --p360-border:#e9ecef;

  /* Bootstrap theme overrides */
  --bs-body-font-family:'Yantramanav', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --bs-body-font-size:1.125rem; /* 18px */
  --bs-body-font-weight:400;
  --bs-body-line-height:1.4444; /* 26px / 18px */
  --bs-body-color:var(--p360-text);
  --bs-body-bg:var(--p360-bg);

  --bs-primary:var(--p360-gold);
  --bs-link-color:var(--p360-blue);
  --bs-link-hover-color:#013a69;
  --bs-dark:var(--p360-charcoal);
}

body {
  background: var(--p360-surface);
  color: var(--bs-body-color);
}

h1,
h2,
h3,
.h1,
.h2,
.h3 {
  color: var(--p360-charcoal);
  letter-spacing: -0.01em;
}

h1,
h2,
h3 {
  font-weight: 700;
}

.lead {
  color: var(--p360-text);
}

/* Consistent app surface (replaces ad-hoc border/rounded/bg-light blocks) */
.p360-surface {
  background: #fff;
  border: 1px solid var(--p360-border);
  border-radius: 14px;
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .06);
}


.hint {
  opacity: 0.75;
  margin-top: 8px;
}

.footer {
  border-top: 1px solid #e9ecef;
}

code {
  background: #f2f3f5;
  padding: 2px 6px;
  border-radius: 8px;
}

/* Consistent preformatted blocks (snippets, diffs, extracted text) */
.p360-codeblock {
  background: #f7f7f8;
  border: 1px solid var(--p360-border);
  border-radius: 12px;
  padding: 10px 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.p360-codeblock code {
  background: transparent;
  padding: 0;
  border-radius: 0;
}

/* Light-weight prose rendering for AI answers (plain text -> paragraphs/lists). */
.p360-prose p:last-child {
  margin-bottom: 0;
}

.p360-prose ul {
  padding-left: 1.25rem;
}

/* Status chips (styled to match Bootstrap, but kept as app-specific classes) */
.status {
  display: inline-block;
  padding: 0.35em 0.65em;
  font-size: 0.75em;
  font-weight: 600;
  line-height: 1;
  border-radius: var(--bs-border-radius-pill);
  background: #f2f3f5;
  color: var(--bs-secondary-text-emphasis);
}

.status-ok {
  background: var(--bs-success-bg-subtle);
  color: var(--bs-success-text-emphasis);
}

.status-no_hits {
  background: var(--bs-info-bg-subtle);
  color: var(--bs-info-text-emphasis);
}

.status-needs_ocr,
.status-warn {
  background: var(--bs-warning-bg-subtle);
  color: var(--bs-warning-text-emphasis);
}

.status-error {
  background: var(--bs-danger-bg-subtle);
  color: var(--bs-danger-text-emphasis);
}

/* Workflow status chips (lifecycle / approvals) */
.status-draft {
  background: var(--bs-warning-bg-subtle);
  color: var(--bs-warning-text-emphasis);
}

.status-uploaded {
  background: var(--bs-success-bg-subtle);
  color: var(--bs-success-text-emphasis);
}

.status-processing {
  background: var(--bs-info-bg-subtle);
  color: var(--bs-info-text-emphasis);
}

.status-ai_approved {
  background: var(--bs-success-bg-subtle);
  color: var(--bs-success-text-emphasis);
}

.status-ai_blocked {
  background: var(--bs-danger-bg-subtle);
  color: var(--bs-danger-text-emphasis);
}

.status-archived {
  background: var(--bs-secondary-bg-subtle);
  color: var(--bs-secondary-text-emphasis);
}


/* Shared page scaffolding */
.p360-page-header {
  background: linear-gradient(135deg, rgba(1, 71, 130, 0.05) 0%, rgba(250, 184, 0, 0.12) 100%);
}

.p360-page-header-copy {
  max-width: min(100%, 48rem);
}

.p360-page-kicker {
  margin-bottom: 0.35rem;
  color: var(--p360-blue);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.p360-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.p360-page-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.p360-page-meta-item {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.25rem 0.7rem;
  border: 1px solid rgba(1, 71, 130, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--p360-text);
  font-size: 0.92rem;
}

.p360-section-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

.p360-section-title {
  margin: 0;
  color: var(--p360-charcoal);
  font-size: 1.1rem;
  font-weight: 700;
}

.p360-section-copy {
  margin: 0;
  color: var(--p360-text);
  font-size: 0.95rem;
}

.p360-empty-state {
  border: 1px dashed rgba(1, 71, 130, 0.22);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(242, 243, 245, 0.92) 100%);
  padding: 1rem 1.125rem;
}

.p360-empty-title {
  color: var(--p360-charcoal);
  font-weight: 700;
}

.p360-empty-copy {
  color: var(--p360-text);
  font-size: 0.95rem;
}

.p360-checklist {
  padding-left: 1.25rem;
}

.p360-checklist li + li {
  margin-top: 0.35rem;
}

.p360-sticky-rail {
  position: relative;
}

@media (min-width: 1200px) {
  .p360-sticky-rail {
    position: sticky;
    top: 1rem;
  }
}

.p360-link-grid {
  display: grid;
  gap: 12px;
}

@media (min-width: 768px) {
  .p360-link-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.p360-link-card {
  display: block;
  padding: 16px;
  border: 1px solid var(--p360-border);
  border-radius: 14px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.p360-link-card:hover {
  border-color: rgba(1, 71, 130, 0.24);
  box-shadow: 0 0.5rem 1rem rgba(1, 71, 130, 0.08);
  color: inherit;
  transform: translateY(-1px);
}

.p360-link-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: rgba(1, 71, 130, 0.08);
  color: var(--p360-blue);
  flex: 0 0 auto;
}

.p360-link-card-copy {
  margin-top: 0.35rem;
  color: var(--p360-text);
  font-size: 0.92rem;
}

.p360-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 575.98px) {
  .p360-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.p360-stat-card {
  background: linear-gradient(180deg, #fffdf4 0%, #fff 100%);
  border: 1px solid rgba(250, 184, 0, 0.32);
  border-radius: 14px;
  padding: 14px 16px;
}

.p360-stat-value {
  color: var(--p360-charcoal);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.p360-stat-label {
  color: var(--p360-text);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  margin-top: 0.35rem;
  text-transform: uppercase;
}

.p360-detail-list {
  display: grid;
  gap: 0.85rem;
  margin: 0;
}

.p360-detail-list dt {
  margin: 0;
  color: var(--p360-text);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.p360-detail-list dd {
  margin: 0.25rem 0 0;
  color: var(--p360-charcoal);
}

.p360-code-block {
  margin: 0;
  padding: 1rem 1.125rem;
  border: 1px solid var(--p360-border);
  border-radius: 14px;
  background: #fbfbfc;
  color: var(--p360-charcoal);
  font-family: var(--bs-font-monospace);
  font-size: 0.9rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
/* Run page layout */


/* PDF viewer */
.pdf-viewer {
  position: relative;
  width: 100%;
  overflow: auto;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e7e7e7;
  padding: 10px;
}

.pdf-wrap {
  position: relative;
  display: inline-block;
}

.pdf-canvas {
  display: block;
}

.pdf-overlay {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.pdf-overlay.interactive {
  pointer-events: auto;
  cursor: crosshair;
}


.pdf-ui-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  pointer-events: none;
  z-index: 5;
}

.pdf-ui-overlay--hint {
  align-items: flex-end;
  justify-content: flex-start;
}

.run-review-grid .pdf-viewer {
  max-height: 80vh;
}

.run-boxes-scroll {
  max-height: 38vh;
  overflow: auto;
}

@media (min-width: 992px) {
  .run-sidebar {
    position: sticky;
    top: 1rem;
  }
}


.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", monospace;
}

.compact {
  margin: 8px 0 0 0;
  padding-left: 18px;
}

.compact li {
  margin: 4px 0;
}

/* Utility helpers used in a few templates */
.stack {
  display: grid;
  gap: 10px;
}

.stack label {
  display: grid;
  gap: 6px;
}

.minw-220 {
  min-width: 220px;
}



/* Run page tweaks */
.run-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.run-name-inline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: min(100%, 42rem);
}

.run-name-input {
  padding: 0.1rem 0.25rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--p360-charcoal);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 700;
  line-height: 1.05;
  box-shadow: none;
}

.run-name-input:hover,
.run-name-input:focus {
  background: #fff;
  border-color: var(--p360-border);
}

.run-name-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(250, 184, 0, 0.14);
}

.run-name-input::placeholder {
  color: rgba(35, 31, 32, 0.45);
}

.run-review-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}

.run-review-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.95rem;
  color: var(--p360-text);
}

.run-review-legend-swatch {
  width: 1rem;
  height: 1rem;
  border-radius: 0.35rem;
  border: 1px solid transparent;
}

.run-review-legend-swatch.is-auto {
  background: rgba(250, 184, 0, 0.24);
  border-color: rgba(250, 184, 0, 0.9);
}

.run-review-legend-swatch.is-manual {
  background: rgba(255, 0, 0, 0.15);
  border-color: rgba(255, 0, 0, 0.85);
}

.run-review-legend-swatch.is-selected {
  background: rgba(0, 120, 255, 0.12);
  border-color: rgba(0, 120, 255, 0.95);
}

.run-page-shortcuts {
  align-items: center;
}

.run-viewer-toolbar {
  row-gap: 0.75rem;
}

.run-viewer-toolbar .btn.active {
  background: var(--p360-charcoal);
  border-color: var(--p360-charcoal);
  color: #fff;
}

/* --- AI Docs Chat --- */
.chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-messages {
  height: 420px;
  overflow: auto;
}

.chat-user {
  background: #fff5d6;
}

.chat-assistant {
  background: #f2f3f5;
}

.chat-who {
  font-size: 12px;
  opacity: 0.75;
  margin-bottom: 6px;
}

.chat-text {
  white-space: pre-wrap;
}

.chat-warn {
  margin-top: 8px;
  color: var(--bs-warning-text-emphasis);
}

.chat-input textarea {
  resize: vertical;
}




/* Header chrome */
.p360-topbar{
  background: #f2f3f5;
  border-bottom: 1px solid var(--p360-border);
  color: var(--p360-text);
  padding: 6px 0;
}
.p360-topbar .text-muted{ opacity: 0.8; }

.p360-navbar{
  background: var(--p360-charcoal) !important;
  border-bottom: 3px solid var(--p360-gold);
}
.p360-navbar .navbar-brand{ gap: 0.75rem; }
.p360-navbar .navbar-brand small{ max-width: 48rem; }
.p360-brand-mark{
  height: 28px;
  width: auto;
  display: block;
}
.p360-brand-wordmark{
  height: 30px;
  width: auto;
  display: block;
}
@media (min-width: 576px){
  .p360-brand-wordmark{ height: 34px; }
}
.p360-footer-wordmark{
  height: 22px;
  width: auto;
  display: block;
}
.p360-login-wordmark{
  height: 44px;
  width: auto;
  display: inline-block;
}
.p360-navbar .nav-link{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}
.p360-navbar .nav-link i{ margin-right: 0 !important; }

.p360-navbar .navbar-toggler{
  padding: 0.35rem 0.6rem;
  border-radius: 12px;
  border-color: rgba(255,255,255,0.18);
}
.p360-navbar .nav-link.active::after{
  content:'';
  position:absolute;
  left: .5rem;
  right: .5rem;
  bottom: .25rem;
  height: 2px;
  background: var(--p360-gold);
  border-radius: 2px;
}

/* Footer */
.p360-footer{
  background: #fff;
}

/* Run list (dashboard + /runs) */
.p360-runitem{
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  cursor: pointer;
}
.p360-runitem:focus-visible{
  outline: 3px solid rgba(1,71,130,0.25);
  outline-offset: 2px;
}

.p360-runmeta{
  line-height: 1.2;
}

/* Slightly slimmer inputs/buttons for dense filter/search toolbars */
.p360-compact-controls .form-control,
.p360-compact-controls .form-control-sm{
  padding-top: 0.22rem;
  padding-bottom: 0.22rem;
}
.p360-compact-controls .form-select,
.p360-compact-controls .form-select-sm{
  padding-top: 0.22rem;
  padding-bottom: 0.22rem;
}
.p360-compact-controls .btn,
.p360-compact-controls .btn-sm{
  padding-top: 0.22rem;
  padding-bottom: 0.22rem;
}
.p360-metatag{
  display: inline-block;
  padding: 0.08rem 0.45rem;
  border-radius: 999px;
  background: rgba(0,0,0,0.03);
}

.p360-runbadges{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem;
}

.p360-runitem-right{
  min-width: 250px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
}

.p360-runitem-top{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: nowrap;
}
@media (max-width: 575.98px){
  .p360-runitem-right{ min-width: 0; }
  .p360-runitem-top{ flex-wrap: wrap; }
}

/* Primary buttons: gold background, charcoal text for contrast */
.btn-primary{
  --bs-btn-color: var(--p360-charcoal);
  --bs-btn-bg: var(--p360-gold);
  --bs-btn-border-color: var(--p360-gold);
  --bs-btn-hover-color: var(--p360-charcoal);
  --bs-btn-hover-bg: #e6aa00;
  --bs-btn-hover-border-color: #e6aa00;
  --bs-btn-active-color: var(--p360-charcoal);
  --bs-btn-active-bg: #d59f00;
  --bs-btn-active-border-color: #d59f00;
}

/* Cards: slightly more premium than stock Bootstrap */
.card{
  border-color: var(--p360-border);
  border-radius: 14px;
}
.card.shadow-sm{
  box-shadow: 0 .25rem .75rem rgba(0,0,0,.06) !important;
}

/* Toast container should sit above modals/backdrops in this app. */
.toast-container{
  z-index: 1100;
}


/* Onboarding tracker */
.p360-onboarding-chip{
  white-space: nowrap;
}

.p360-onboarding-drawer{
  width: min(92vw, 420px);
}

.p360-onboarding-progress{
  height: 0.45rem;
}

.p360-onboarding-step-title{
  line-height: 1.2;
}

.p360-onboarding-mobile-cta{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border-top: 1px solid var(--p360-border);
  background: #fff;
  box-shadow: 0 -0.35rem 1rem rgba(0, 0, 0, 0.08);
}

.p360-onboarding-mobile-cta .btn{
  white-space: nowrap;
}

@media (max-width: 991.98px){
  .p360-has-mobile-cta main{
    padding-bottom: 5.25rem !important;
  }
}

/* WorkDrive journey */
.p360-flow-steps {
  display: grid;
  gap: 12px;
}

.p360-flow-steps--compact {
  margin-top: 1rem;
}

@media (min-width: 992px) {
  .p360-flow-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .p360-flow-steps--compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.p360-flow-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--p360-border);
  border-radius: 14px;
}

.p360-flow-step-index {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-weight: 700;
  background: #f2f3f5;
  color: var(--p360-charcoal);
}

.p360-flow-step-title {
  font-weight: 700;
  color: var(--p360-charcoal);
  line-height: 1.1;
}

.p360-flow-step-copy {
  color: var(--p360-text);
  font-size: 0.95rem;
}

.p360-flow-step.is-active {
  border-color: rgba(250, 184, 0, 0.7);
  box-shadow: 0 0.5rem 1rem rgba(250, 184, 0, 0.15);
}

.p360-flow-step.is-active .p360-flow-step-index {
  background: var(--p360-gold);
  color: var(--p360-charcoal);
}

.p360-flow-step.is-complete {
  background: #fffdf4;
  border-color: rgba(250, 184, 0, 0.45);
}

.p360-flow-step.is-complete .p360-flow-step-index {
  background: var(--p360-charcoal);
  color: #fff;
}

.p360-flow-step.is-pending .p360-flow-step-copy {
  opacity: 0.85;
}

.p360-mode-toggle {
  gap: 0.5rem;
}

.p360-mode-toggle .nav-link {
  border-radius: 999px;
  border: 1px solid var(--p360-border);
  background: #fff;
  color: var(--p360-charcoal);
  font-weight: 600;
  padding: 0.55rem 1rem;
}

.p360-mode-toggle .nav-link.active {
  background: var(--p360-charcoal);
  border-color: var(--p360-charcoal);
  color: #fff;
}

.p360-workdrive-pane {
  background: #fff;
  border: 1px solid var(--p360-border);
  border-radius: 16px;
  padding: 18px;
}

.p360-workdrive-start {
  background: linear-gradient(135deg, rgba(1, 71, 130, 0.04) 0%, rgba(250, 184, 0, 0.12) 100%);
  border: 1px dashed rgba(1, 71, 130, 0.25);
  border-radius: 14px;
  padding: 16px;
}

.p360-workdrive-folder-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.p360-workdrive-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.p360-workdrive-toolbar .form-control {
  min-width: 220px;
}

.p360-workdrive-sidebar {
  position: relative;
}

@media (min-width: 1200px) {
  .p360-workdrive-sidebar {
    position: sticky;
    top: 1rem;
  }
}

.p360-workdrive-destination {
  background: linear-gradient(180deg, #fffdf4 0%, #fff 100%);
  border: 1px solid rgba(250, 184, 0, 0.45);
  border-radius: 14px;
  padding: 14px 16px;
}

.p360-selection-row {
  background: #fff;
  border: 1px solid var(--p360-border);
  border-radius: 12px;
  padding: 10px 12px;
}

.p360-selection-row + .p360-selection-row {
  margin-top: 8px;
}

.p360-selection-row code {
  font-size: 0.85em;
}

.p360-dict-sidebar {
  position: relative;
}

@media (min-width: 1200px) {
  .p360-dict-sidebar {
    position: sticky;
    top: 1rem;
  }
}

.p360-dict-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 575.98px) {
  .p360-dict-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.p360-dict-stat {
  background: linear-gradient(180deg, #fffdf4 0%, #fff 100%);
  border: 1px solid rgba(250, 184, 0, 0.32);
  border-radius: 14px;
  padding: 14px 16px;
}

.p360-dict-stat-value {
  color: var(--p360-charcoal);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
}

.p360-dict-stat-label {
  color: var(--p360-text);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  margin-top: 0.35rem;
  text-transform: uppercase;
}

.p360-dict-card {
  scroll-margin-top: 1rem;
}

.p360-dict-editor {
  background: linear-gradient(180deg, rgba(255, 253, 244, 0.72) 0%, #fff 100%);
  border: 1px solid rgba(250, 184, 0, 0.28);
  border-radius: 16px;
  padding: 18px;
}

.p360-dict-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.p360-dict-chip {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid rgba(1, 71, 130, 0.16);
  border-radius: 999px;
  color: var(--p360-charcoal);
  font-size: 0.96rem;
  line-height: 1.15;
  padding: 0.32rem 0.78rem;
}

.p360-dict-chip-muted {
  background: #f7f7f8;
  border-style: dashed;
  color: var(--p360-text);
}

.p360-dict-empty {
  background: linear-gradient(135deg, rgba(1, 71, 130, 0.04) 0%, rgba(250, 184, 0, 0.12) 100%);
  border: 1px dashed rgba(1, 71, 130, 0.24);
}