/* ===========================================================================
   MKB Services v2 theme for Bootstrap 5.3.x
   Palette lifted from the deployed marsh.css / main.css:
     olive   #3F4727  (primary, links, buttons)
     tan     #CCC4A7  (navbar, secondary surfaces)
     slate   #263238  (dark accents, footers)
     ink     #373A36  (body text accents)
   =========================================================================== */
:root, [data-bs-theme="light"] {
  --mkb-olive: #3F4727;
  --mkb-olive-dark: #333B20;
  --mkb-olive-darker: #2A3119;
  --mkb-tan: #CCC4A7;
  --mkb-tan-light: #E4DFCC;
  --mkb-slate: #263238;
  --mkb-ink: #373A36;

  --bs-primary: var(--mkb-olive);
  --bs-primary-rgb: 63, 71, 39;
  --bs-secondary: var(--mkb-tan);
  --bs-secondary-rgb: 204, 196, 167;
  --bs-dark: var(--mkb-slate);
  --bs-dark-rgb: 38, 50, 56;
  --bs-link-color: var(--mkb-olive);
  --bs-link-color-rgb: 63, 71, 39;
  --bs-link-hover-color: var(--mkb-olive-dark);
  --bs-link-hover-color-rgb: 51, 59, 32;
  --bs-body-color: #212529;
  --bs-emphasis-color: var(--mkb-ink);
}

.btn-primary {
  --bs-btn-bg: var(--mkb-olive);
  --bs-btn-border-color: var(--mkb-olive);
  --bs-btn-hover-bg: var(--mkb-olive-dark);
  --bs-btn-hover-border-color: var(--mkb-olive-dark);
  --bs-btn-active-bg: var(--mkb-olive-darker);
  --bs-btn-active-border-color: var(--mkb-olive-darker);
  --bs-btn-disabled-bg: var(--mkb-olive);
  --bs-btn-disabled-border-color: var(--mkb-olive);
}
.btn-outline-primary {
  --bs-btn-color: var(--mkb-olive);
  --bs-btn-border-color: var(--mkb-olive);
  --bs-btn-hover-bg: var(--mkb-olive);
  --bs-btn-hover-border-color: var(--mkb-olive);
  --bs-btn-active-bg: var(--mkb-olive-dark);
  --bs-btn-active-border-color: var(--mkb-olive-dark);
}
.btn-secondary {
  --bs-btn-bg: var(--mkb-tan);
  --bs-btn-border-color: var(--mkb-tan);
  --bs-btn-color: var(--mkb-ink);
  --bs-btn-hover-bg: #BDB392;
  --bs-btn-hover-border-color: #BDB392;
  --bs-btn-hover-color: var(--mkb-ink);
  --bs-btn-active-bg: #AEA37F;
  --bs-btn-active-border-color: #AEA37F;
}

/* Tan bar. Safe with the mkb-services mark, which is a single #535860 and
   reads at 4.1:1 against this. It was NOT safe with the old mkb-header mark,
   whose stripe carried a #BCB7A9 segment that sat at 1.15:1 and disappeared.
   If the logo is ever swapped again, check the new one's lightest opaque
   colour against #CCC4A7 before assuming this still works. */
.navbar-mkb {
  background-color: var(--mkb-tan);
  min-height: 72px;
  border-bottom: 3px solid var(--mkb-olive);
}
.navbar-mkb .navbar-brand,
.navbar-mkb .nav-link { color: var(--mkb-olive); font-weight: 500; }
.navbar-mkb .nav-link:hover { color: var(--mkb-olive-dark); text-decoration: underline; }
.navbar-mkb .navbar-toggler { border-color: var(--mkb-olive); }

.bg-mkb-olive { background-color: var(--mkb-olive) !important; color: #fff; }
.bg-mkb-tan   { background-color: var(--mkb-tan) !important; }
.bg-mkb-slate { background-color: var(--mkb-slate) !important; color: #fff; }
.text-mkb-olive { color: var(--mkb-olive) !important; }

.badge.text-bg-primary { background-color: var(--mkb-olive) !important; }
.badge.text-bg-secondary { background-color: var(--mkb-tan) !important; color: var(--mkb-ink) !important; }

.form-control:focus, .form-select:focus {
  border-color: var(--mkb-olive);
  box-shadow: 0 0 0 .25rem rgba(63, 71, 39, .25);
}
.form-check-input:checked { background-color: var(--mkb-olive); border-color: var(--mkb-olive); }

.card { border-color: #DED8C4; }
.card-header { background-color: var(--mkb-tan-light); color: var(--mkb-ink); }

.progress-bar { background-color: var(--mkb-olive); }
.nav-pills .nav-link.active { background-color: var(--mkb-olive); }
.list-group-item.active { background-color: var(--mkb-olive); border-color: var(--mkb-olive); }

/* task state accents (tech app) */
.task-pending      { border-left: 5px solid #9AA0A6; }
.task-inprogress   { border-left: 5px solid #1D90FB; }
.task-done         { border-left: 5px solid var(--mkb-olive); }
.task-notcomplete  { border-left: 5px solid #DC3545; }
.task-cancelled    { border-left: 5px solid #6C757D; opacity: .75; }

/* Footer pinned to the viewport: visible while scrolling, not parked at the
   end of the document. Body padding reserves its height so the last line of
   content is never hidden behind it. */
.site-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
body { padding-bottom: 2.75rem; }

/* On short screens in landscape a pinned footer eats too much of the viewport,
   so let it scroll away there. */
@media (max-height: 480px) {
  .site-footer { position: static; height: auto; }
  body { padding-bottom: 0; }
}

/* attachments */
.attach-item {
  display: inline-flex; align-items: center; gap: .35rem;
  border: 1px solid var(--mkb-tan); border-radius: 8px;
  padding: .25rem .5rem; margin: .15rem; font-size: .85rem;
  text-decoration: none; color: var(--mkb-ink); background: #fff;
}
.attach-item:hover { background: var(--mkb-tan-light); color: var(--mkb-ink); }
.attach-pdf::before { content: "PDF"; font-weight: 700; font-size: .7rem; color: #B22222; }
.attach-doc::before { content: "FILE"; font-weight: 700; font-size: .7rem; color: var(--mkb-olive); }

.attach-wrap { display: inline-flex; align-items: stretch; margin: .15rem; }
.attach-wrap .attach-item { margin: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.attach-btn {
  border-top-left-radius: 0; border-bottom-left-radius: 0;
  border-left: 0; padding: .1rem .45rem; line-height: 1;
}
.attach-saved { color: var(--mkb-olive); font-weight: 700; margin-left: .25rem; }
.attach-unavailable { opacity: .55; text-decoration: line-through; }

/* storage summary on the work order list */
.storage-note { font-size: .78rem; color: #6C757D; }

/* offline / queue UI */
.offline-banner {
  background: #B22222; color: #fff; text-align: center;
  padding: .3rem .5rem; font-size: .85rem; display: none;
}
body.is-offline .offline-banner { display: block; }
.queue-pill { position: fixed; right: 12px; bottom: 12px; z-index: 1080; }

.photo-thumb {
  width: 84px; height: 84px; object-fit: cover; border-radius: 8px;
  border: 2px solid var(--mkb-tan); margin: 2px; cursor: pointer;
}
.photo-thumb.pending-upload { border-color: #FFC107; opacity: .8; }

/* contacts */
.contact-row {
  border-left: 3px solid var(--mkb-tan);
  padding: .35rem .5rem; margin: .25rem 0;
  background: #fff; border-radius: 6px; font-size: .88rem;
}

/* account page + nav avatar */
.avatar-lg {
  width: 116px; height: 116px; border-radius: 50%;
  object-fit: cover; border: 3px solid var(--mkb-tan);
}
.avatar-initials {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mkb-olive); color: #fff;
  font-size: 2.4rem; font-weight: 700; letter-spacing: 1px;
}
.avatar-sm {
  width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--mkb-olive); vertical-align: middle;
}
.avatar-sm-initials {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--mkb-olive); color: #fff; font-size: .72rem; font-weight: 700;
  vertical-align: middle;
}

/* notes */
.note-entry {
  border-left: 3px solid var(--mkb-tan);
  padding: .3rem .6rem; margin-bottom: .5rem;
  background: #fff; border-radius: 6px; font-size: .9rem;
  white-space: pre-wrap;
}
.note-entry.note-internal { border-left-color: #B22222; background: #FFF7F7; }

/* brand */
.navbar-mkb { max-height: 80px; }
.navbar-mkb img { max-height: 46px; width: auto; }
.brand-logo {
  height: 44px !important;
  width: auto !important;
  display: block;
}
@media (max-width: 991.98px) {
  .brand-logo { height: 34px !important; }
  .navbar-mkb { max-height: 64px; min-height: 60px; }
}

/* Printed documents carry the logo too - a sheet handed to a customer or the
   factory should not be anonymous. */
.print-logo { height: 16mm; width: auto; }