/*
 * Makai theme glue for phpVMS 7.
 *
 * The original makai skin wrapped the whole page in `.container.box_shadow`.
 * Its Bootstrap 2 styles are now scoped to `.mk` (see css/scoped/), so the
 * boxed frame is recreated here without touching the Bootstrap 5 markup that
 * the phpVMS 7 pages render inside `.mk-content`.
 */

/* ---- Boxed frame: same widths as makai's Bootstrap 2 .container ---- */
.mk-frame {
  width: 940px;
  margin: 0 auto;
  padding: 0 20px;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

@media (min-width: 768px) and (max-width: 979px) {
  .mk-frame {
    width: 724px;
  }
}

@media (max-width: 767px) {
  .mk-frame {
    width: auto;
  }
}

/* The scoped Bootstrap 2 sheet maps `body` to `.mk`, which gives each makai
   block a white background and default margins; keep them transparent and flush */
.mk {
  background: transparent;
  margin: 0;
}

/* Bootstrap 5 sets `box-sizing: border-box` on everything; Bootstrap 2's grid
   widths (span4 = 300px + 20px margin) assume content-box. The frame too: 940px + padding */
.mk-frame,
.mk,
.mk *,
.mk *::before,
.mk *::after {
  box-sizing: content-box;
}

/* Bootstrap 5's global .row/.container rules also match makai's Bootstrap 2
   markup (flex rows, 12px gutters on every child, container padding/max-width).
   Undo them inside makai blocks; the spanN widths still come from scoped/bootstrap.css */
.mk .row {
  display: block;
  flex-wrap: nowrap;
  margin-top: 0;
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}

.mk .row > * {
  flex-shrink: 1;
  max-width: none;
  margin-top: 0;
  padding-left: 0;
  padding-right: 0;
}

.mk .container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* ---- Content area for phpVMS 7 pages ---- */
.mk-content.mk-inner {
  padding: 25px 0 35px;
  min-height: 400px;
}

.mk-content.mk-home {
  padding: 0;
}

/* Bootstrap 5 `.container` inside the 940px frame should just fill it */
.mk-content > .container,
.mk-content .container-fluid {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* ---- Bootstrap 5 recoloured to the makai palette ---- */
:root,
[data-bs-theme=light] {
  --bs-primary: #ca07c2;
  --bs-primary-rgb: 202, 7, 194;
  --bs-link-color: #ca07c2;
  --bs-link-color-rgb: 202, 7, 194;
  --bs-link-hover-color: #a1059b;
  --bs-link-hover-color-rgb: 161, 5, 155;
  --bs-body-color: #303030;
  --bs-body-font-family: 'Open Sans', sans-serif;
}

.mk-content .bg-primary {
  background-color: #ca07c2 !important;
}

.mk-content .btn-primary {
  --bs-btn-bg: #ca07c2;
  --bs-btn-border-color: #ca07c2;
  --bs-btn-hover-bg: #a1059b;
  --bs-btn-hover-border-color: #a1059b;
  --bs-btn-active-bg: #a1059b;
  --bs-btn-active-border-color: #a1059b;
  --bs-btn-disabled-bg: #ca07c2;
  --bs-btn-disabled-border-color: #ca07c2;
}

.mk-content .btn-outline-primary {
  --bs-btn-color: #ca07c2;
  --bs-btn-border-color: #ca07c2;
  --bs-btn-hover-bg: #ca07c2;
  --bs-btn-hover-border-color: #ca07c2;
  --bs-btn-active-bg: #ca07c2;
  --bs-btn-active-border-color: #ca07c2;
}

.mk-content .nav-pills {
  --bs-nav-pills-link-active-bg: #ca07c2;
}

.mk-content .pagination {
  --bs-pagination-active-bg: #ca07c2;
  --bs-pagination-active-border-color: #ca07c2;
}

/* Section headings in the makai style (dark text, magenta first word comes from makai-init.js) */
.mk-content h1,
.mk-content h2,
.mk-content h3 {
  color: #242424;
}