/* =========================================================
   Over The Rockies — UI Theme
   ========================================================= */

/* ---------- CSS Vars ---------- */
:root{
  --sidebar-w: 240px;
  --gutter: 0px;
  --container-x: 1rem;

  /* Brand */
  --otr-green: #789B48;
  --otr-green-600: #5f7e36;        /* active/pressed */
  --otr-green-100: rgba(120,155,72,0.15); /* subtle bg */
  --otr-green-focus: 0 0 0 .2rem rgba(120,155,72,.25);

  --accent-orange: #FBB349;
  --accent-warning: #E64583;

  /* Neutrals */
  --bg-page: #f8f9fa;
  --bg-card: #fff;
  --border: #ddd;
  --text: #333;
  --text-muted: #555;
}

/* ---------- Base ---------- */
html, body { height: 100%; }
body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  color: var(--text);
  background: var(--bg-page);
}
a { text-decoration: none; }

/* ---------- Sidebar ---------- */
.sidebar{
  position: fixed; inset: 0 auto 0 0;
  width: var(--sidebar-w);
  background: #fff;
  border-right: 1px solid var(--border);
  padding: 1rem;
  display: flex; flex-direction: column;
  z-index: 1020;
}
.sidebar .scroll{ overflow-y:auto; min-height:0; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
.sidebar .nav-link{
  display:flex; align-items:center; gap:.5rem;
  color:#333; font-weight:500;
  padding:.4rem .75rem; border-radius:.5rem;
}
.sidebar .nav-link:hover{ background:#e9ecef; }
.sidebar .nav-link.active,
.sidebar .nav-link.active:hover{
  background: var(--otr-green-100);
  color: var(--otr-green) !important;
}
.sidebar .nav-count{ font-size:.75rem; }

/* ---------- Main Layout ---------- */
main.main-wrapper { min-height: 100vh; }
/* keep content with gutter */
main.main-wrapper .main-content { 
  margin-left: calc(var(--sidebar-w) + var(--gutter)); 
}

/* make footer flush */
footer { 
  margin-left: var(--sidebar-w); 
}
main.main-wrapper .main-content{
  padding-left: var(--container-x);
  padding-right: var(--container-x);
}

/* Flush section backgrounds to sidebar edge (hero/footers etc.) */
.flush-to-sidebar{
  margin-left: calc(-1 * (var(--container-x) + var(--gutter)));
  padding-left: 0;
}
.fsidebarlush-to- > .container,
.flush-to-sidebar > .container-*,
.flush-to-sidebar > .container-fluid{
  padding-left: calc(var(--container-x) + var(--gutter));
}

/* ---------- Hero / Carousel ---------- */
.hero{ position:relative; color:#fff; text-shadow:1px 1px 3px rgba(0,0,0,.8); padding:0; }
.hero h1{ color: var(--accent-orange); }
.hero p{ font-size:1.25rem; }

.carousel-item{
  position:relative; height:80vh;
  background-size:cover; background-position:center;
}
.carousel-item .overlay{ position:absolute; inset:0; background:rgba(0,0,0,.4); z-index:1; }
.carousel-item .carousel-caption{
  position:absolute; top:40%; left:50%; transform:translate(-40%,-50%);
  text-align:center; max-width:80%; z-index:2;
}

/* ---------- Brand Buttons ---------- */
.btn-success,
.btn-outline-success{
  border-color: var(--otr-green) !important;
  color: var(--otr-green) !important;
}
.btn-success{
  background: var(--otr-green) !important; color:#fff !important;
}
.btn-success:hover,
.btn-outline-success:hover{
  background: var(--otr-green) !important; color:#fff !important;
}
.btn-outline-success:focus,
.btn-outline-success:active,
.btn-outline-success:focus-visible,
.btn-outline-success:active:focus{
  background: var(--otr-green-600) !important;
  border-color: var(--otr-green-600) !important;
  color:#fff !important;
  box-shadow: var(--otr-green-focus) !important;
}

/* ---------- Sections, Cards, Tiles ---------- */
section{ margin-bottom:2rem; }
section:last-of-type{ margin-bottom:0; }
section.bg-light{ background: var(--bg-page) !important; }

.card{
  border:none; border-radius:8px;
  background: var(--bg-card);
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
}
.card-title{ font-size:1.25rem; font-weight:600; margin-bottom:.5rem; }
.card-text{ font-size:.9rem; line-height:1.4; color: var(--text-muted); }

/* blog tiles uniform; opt-out via .tile-btn */
.tile-grid .card:not(.tile-btn){ min-height:420px; }

.tile-btn{
  display:block; color:inherit;
  border:1px solid rgba(0,0,0,.08); border-radius:12px;
  transition: transform .08s ease, box-shadow .2s ease, border-color .06s ease;
}
.tile-btn:hover{ transform:translateY(-1px); box-shadow:0 4px 10px rgba(0,0,0,.08); border-color:rgba(0,0,0,.12); }
.card.tile-btn{ min-height:unset; }
.tile-btn .card-body{ padding:14px 16px; }
.tile-btn .card-title{ margin-bottom:.25rem; font-size:1.05rem; }
.tile-btn p{ margin:0; font-size:.9rem; }

/* “Assign” compact card (billing/business top forms) */
.card.assign-card,.card.assign-card .card-body{ padding:8px 12px !important; min-height:0 !important; }
.card.assign-card .form-label{ margin:0 0 2px; font-size:.85rem; line-height:1.1; color:#666; }
.card.assign-card .form-select,.card.assign-card .form-control{ height:32px; padding:2px 8px; font-size:.9rem; }
.card.assign-card .btn{ height:32px; padding:0 12px; font-size:.9rem; }
.card.assign-card form.row{ row-gap:6px; column-gap:8px; }

/* Billing overview row tighter */
.billing-cards .card{ min-height:auto; }
.billing-cards .card-body{ padding:.75rem 1rem; }
.billing-cards .h4{ margin:0; font-size:1.2rem; }

/* tiny icon button */
.btn-icon {
  padding: .25rem .45rem;
  line-height: 1;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: .5rem;
}
.btn-icon:hover { background: var(--otr-green-100); border-color: var(--otr-green); }

/* brand-matched icon colors */
.text-otr-green { color: var(--otr-green); }  /* locked */
.text-unlocked  { color: #E64583; }          /* your red */

  #previewWrap .form-control,
  #previewWrap .form-select { width: 100%; max-width: 100%; }

  #previewWrap .form-check {
    display: flex; align-items: flex-start; gap: .5rem; white-space: normal;
  }
  #previewWrap .form-check-input { margin-top: .35rem; }
  #previewWrap .form-check-label { white-space: normal; }

  /* If your renderer uses grid inside preview, force single column */
  #previewWrap .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
  .sig-box { border:1px dashed var(--border); border-radius:6px; background:#fff; }
  .sig-canvas { width:100%; height:140px; display:block; }
  .sig-canvas.initials { height:80px; max-width:240px; }

/* ---------- Utilities ---------- */
.service-icon{ margin:20px; width:64px; height:auto; filter:grayscale(100%) brightness(150%); }
.about-photo{ width:100%; max-width:300px; height:auto; }

/* Hero */
.post-hero {
  position: relative; color:#fff; min-height: 240px;
  background-size: cover; background-position: center;
  display:flex; align-items:flex-end;
}
.post-hero__overlay {
  position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0,.55));
}
.post-hero__inner { position:relative; padding: 3rem 1rem; }

/* Readable article typography */
.prose { font-size:1.08rem; line-height:1.8; color:#222; }
.prose h2 { margin-top:2rem; margin-bottom:.75rem; font-weight:700; }
.prose h3 { margin-top:1.5rem; margin-bottom:.5rem; font-weight:600; }
.prose p { margin:1rem 0; }
.prose img { max-width:100%; height:auto; border-radius:.5rem; margin:1rem 0; }
.prose blockquote {
  padding:.75rem 1rem; margin:1.25rem 0; border-left:4px solid #789B48; background:#f8fbf6;
}
.prose ul, .prose ol { padding-left:1.25rem; margin: .75rem 0 1rem; }

@media print {
  body { background:#fff !important; }
  .no-print { display:none !important; }
  .card, .container { box-shadow:none !important; border:none !important; }
  .print-header { display:flex; align-items:center; gap:12px; border-bottom:2px solid #789B48; padding-bottom:8px; margin-bottom:16px; }
  .print-header h1 { font-size:20px; color:#789B48; margin:0; }
  .sig img { border:1px dashed #bbb; padding:6px; border-radius:6px; background:#fff; }
  /* Optional: fit to page width */
  @page { margin: 16mm; size: auto; }
}


@media (min-width:992px){ .about-photo{ max-width:350px; } }

    #previewWrap { max-height: calc(100vh - 240px); overflow: auto; }

/* Accordion (clean) */
.accordion-button{
  background:#f8f9fa; color:var(--text);
  border:1px solid var(--border); border-radius:4px;
  transition: background-color .3s; position:relative; padding-right:2.5rem !important;
}
.accordion-button:focus{ box-shadow:none; }
.accordion-button:not(.collapsed){ background:#fff2dc; color:var(--text); }
.accordion-button::before{
  content:"\25BC"; position:absolute; top:50%; right:1rem; transform:translateY(-50%);
  font-size:.75rem; color:#333; transition:transform .3s;
}
.accordion-button:not(.collapsed)::before{ transform:translateY(-50%) rotate(180deg); }
.accordion-button::after{ content:none !important; }
.accordion-body{ background:#fff; font-size:.9rem; line-height:1.5; color:var(--text); }

/* Footer */
footer{ background:#efefef; padding-left:var(--container-x); padding-right:var(--container-x); }

/* ---------- Offcanvas (mobile) ---------- */
.offcanvas{ background:#fff; }
.offcanvas-start{ box-shadow:2px 0 5px rgba(0,0,0,.15); }
.offcanvas-title{ font-size:1.25rem; color:var(--text); }
.offcanvas-body .nav-link{
  font-size:1.1rem; font-weight:500; color:var(--text);
  padding:.5rem 1rem; border-radius:4px; transition:background-color .3s;
}
.offcanvas-body .nav-link:hover,
.offcanvas-body .nav-link:focus{ background:#e9ecef; color:var(--text); }

/* ---------- Chat Widget ---------- */
.chat-btn{
  position:fixed; bottom:80px; right:20px; z-index:9999;
  width:50px; height:50px; border-radius:50%; border:0;
  display:flex; place-content:center; place-items:center;
  background: var(--otr-green); box-shadow:0 2px 4px rgba(0,0,0,.3);
}
.chat-form-container{
  position:fixed; bottom:140px; right:20px; z-index:9998;
  width:320px; background:#fff; border:1px solid var(--border); border-radius:8px;
  padding:1rem; box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.close-chat-btn{ position:absolute; top:8px; right:8px; background:transparent; border:0; font-size:1.25rem; line-height:1; }

/* ---------- Booking chips ---------- */
.date-pill.btn,
.time-btn.btn{
  border-color: var(--otr-green); color: var(--otr-green); background:#fff;
}
.date-pill.btn:hover,
.time-btn.btn:hover{ background: var(--otr-green); color:#fff; }
.time-btn.btn.active{ background: var(--otr-green-600); border-color: var(--otr-green-600); color:#fff; }

/* Dates row: selected = orange */
#slotsDates .date-pill.btn-outline-success{ border-color:var(--otr-green); color:var(--otr-green); background:#fff; }
#slotsDates .date-pill.btn-outline-success:hover{ background:var(--otr-green); color:#fff; }
#slotsDates .date-pill.btn-outline-success.active,
#slotsDates .date-pill.btn-outline-success:active,
#slotsDates .date-pill.btn-outline-success:focus,
#slotsDates .date-pill.btn-outline-success:focus-visible{
  background: var(--accent-orange) !important; border-color: var(--accent-orange) !important; color:#1a1a1a !important;
  box-shadow: 0 0 0 .2rem rgba(251,179,73,.35) !important;
}
#slotsDates .date-pill.btn-outline-success:focus:not(.active){ box-shadow: var(--otr-green-focus); }

.date-chip{ border-color:var(--otr-green); color:var(--otr-green); }
.date-chip:hover{ background:var(--otr-green); color:#fff; }
.date-chip.active,[aria-pressed="true"].date-chip{
  background: var(--accent-orange); border-color: var(--accent-orange); color:#1a1a1a;
}
.date-chip:focus-visible{ box-shadow:0 0 0 .2rem rgba(251,179,73,.25); }

/* Modal accent */
.modal-header{ border-bottom:3px solid var(--otr-green); }

/* ---------- Tables & badges (Business → Compliance) ---------- */
.tbl-compact .small-muted{ color:#666; font-size:.85rem; }
.tbl-compact .nowrap{ white-space:nowrap; }
.tbl-compact .truncate{
  max-width:240px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:inline-block; vertical-align:bottom;
}
.table > :not(caption) > * > *{ vertical-align:middle; }

.badge-soft{ background:#eef6ea; color:#2e5b1d; border:1px solid #d8ead1; }
.badge-snooze{ background:#fff7e6; color:#a96b00; border:1px solid #ffe2a6; }

.icon-btn{ padding:.25rem .45rem; border:1px solid var(--otr-green); color:var(--otr-green); background:#fff; }
.icon-btn i{ color: var(--otr-green); }
.icon-btn:hover{ background: var(--otr-green); color:#fff; }
.icon-btn:hover i{ color:#fff; }

/* ---------- Misc cleanups ---------- */
#services{ margin-bottom:0; }
.search-icon path{ fill: var(--otr-green); }
#mobileSearchBar{ position:fixed; top:60px; left:0; width:100%; z-index:1100; background: var(--bg-page); }
.about-photo { width:100%; max-width:320px; height:auto; }
#about .row{ align-items:flex-start; }

/* Force Bootstrap success palette to OTR green */
.btn-success, .btn-outline-success {
  --bs-btn-bg: var(--otr-green);
  --bs-btn-border-color: var(--otr-green);
  --bs-btn-hover-bg: var(--otr-green-600);
  --bs-btn-hover-border-color: var(--otr-green-600);
  --bs-btn-active-bg: var(--otr-green-600);
  --bs-btn-active-border-color: var(--otr-green-600);
  --bs-btn-disabled-bg: var(--otr-green);
  --bs-btn-disabled-border-color: var(--otr-green);
  --bs-btn-color: #fff;                 /* for .btn-success */
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}

/* Outline variant keeps brand color until hover */
.btn-outline-success{
  --bs-btn-color: var(--otr-green);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-bg: transparent;
}

/* ---------- Responsive ---------- */
@media (min-width:768px){
  /* align bottom in compact assign card */
  .card.assign-card .col-md-4,
  .card.assign-card .col-md-2{ display:flex; flex-direction:column; justify-content:flex-end; }
}
@media (max-width:991.98px){
  .sidebar{ display:none; }
  main.main-wrapper .main-content, footer{ margin-left:0; }
  main.main-wrapper .main-content{ padding-left:1rem; padding-right:1rem; }
  .flush-to-sidebar{ margin-left:0; padding-left:1rem; }
}
@media (min-width: 992px){
  .about-photo--hero{
    max-width: 440px; /* tasteful bump */
    filter: drop-shadow(0 8px 22px rgba(0,0,0,.12));
  }
  /* Make the photo column act like a figure that sits on the "floor" of the section */
  .about-photo-wrap{
    display:flex;
    align-items:flex-end;   /* bottom-aligns the image */
    height:100%;
    min-height: 520px;      /* gently increases section height so the image can sit low */
  }
}
@media (min-width:1200px){
  .row.g-3 > [class*="col-"]{ flex:0 0 25%; max-width:25%; } /* 4 per row */
  .about-photo--hero{
    max-width: 480px;
    margin-left: -6px; /* subtle ‘step into’ the content area */
  }
  .client-summary-grid > [class*="col-"]{
    flex: 0 0 auto !important;
    max-width: none !important;
  }
}
@media (min-width:1400px){
  :root{ --gutter:20px; }
}

/* Make Bootstrap's "success" = OTR green everywhere */
:root{
  --bs-success: var(--otr-green);
  --bs-success-rgb: 120,155,72;           /* 789B48 in RGB */
  --bs-btn-focus-shadow-rgb: 120,155,72;  /* focus ring tint */
}

/* Buttons that Bootstrap builds from its own vars */
.btn-success,
.btn-outline-success{
  --bs-btn-border-color: var(--otr-green) !important;
  --bs-btn-hover-border-color: var(--otr-green-600) !important;
  --bs-btn-active-border-color: var(--otr-green-600) !important;
}

/* Solid */
.btn-success{
  --bs-btn-bg: var(--otr-green) !important;
  --bs-btn-hover-bg: var(--otr-green-600) !important;
  --bs-btn-active-bg: var(--otr-green-600) !important;
  --bs-btn-color: #fff !important;
  --bs-btn-hover-color: #fff !important;
  --bs-btn-active-color: #fff !important;
}

/* Outline */
.btn-outline-success{
  --bs-btn-color: var(--otr-green) !important;
  --bs-btn-hover-color: #fff !important;
  --bs-btn-active-color: #fff !important;
  --bs-btn-bg: transparent !important;
}

/* Utility classes that use success (badges, text/border-success, etc.) */
.text-success   { color: var(--otr-green) !important; }
.border-success { border-color: var(--otr-green) !important; }
.bg-success     { background-color: var(--otr-green) !important; }

.chat-btn{
  background: var(--otr-green) !important;
}