/* ==========================================================================
   layout.css - the application shell
   Deep green sidebar, white topbar, canvas content area, thin brand green rule
   under the page title. Mobile first: the sidebar is an off-canvas drawer below
   960px and a fixed rail above it. Usable down to 360px.
   ========================================================================== */

.mk-app {
  display: grid;
  min-height: 100dvh;
  grid-template-columns: 1fr;
  grid-template-rows: var(--mk-topbar-h) 1fr;
  grid-template-areas:
    "topbar"
    "main";
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */

.mk-sidebar {
  grid-area: sidebar;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  width: min(84vw, var(--mk-sidebar-w));
  background: var(--mk-sidebar-bg);
  color: var(--mk-sidebar-text);
  transform: translateX(-100%);
  transition: transform var(--mk-dur) var(--mk-ease);
  overflow: hidden;
}

.mk-sidebar[data-open="true"] { transform: translateX(0); }

.mk-sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--mk-space-3);
  height: var(--mk-topbar-h);
  padding: 0 var(--mk-space-4);
  border-bottom: 1px solid var(--mk-sidebar-line);
  flex: 0 0 auto;
}

/* Both supplied logos are transparent PNGs and are placed directly on whatever
   surface they sit on, with no plate behind them.

   Worth knowing what that costs on the dark green surfaces. The ISFAP artwork
   is 38 percent pure black, which measures 1.68:1 against the deep green, so
   the wordmark and strapline are not legible there; the coloured mark itself
   reads at about 4.5:1 and carries the recognition. The MakwaIT lockup is dark
   blue type, which is in the same position. Reversed artwork from either party
   would resolve it properly. Restoring the plate is a background and a padding
   on this one rule. */
.mk-logo-plate {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

/* In the sidebar the full lockup is useless: at the height available the
   wordmark cap height works out at under 6px and the strapline is smaller
   still. The sidebar already names the product in text beside it, so what is
   wanted here is the mark, not the words.

   The crop numbers are the measured bounding box of the coloured mark within
   the supplied artwork: 629x609 at (104,106) of 1920x1039, found by scanning
   for non-grey opaque pixels. Expressing them as ratios of --mark keeps the
   crop correct at any size. A cropped asset from ISFAP would replace all of
   this with a plain img. */
.mk-logo-mark {
  --mark: 28px;
  position: relative;
  flex: 0 0 auto;
  width: calc(var(--mark) * 629 / 609);
  height: var(--mark);
  overflow: hidden;
}

.mk-logo-mark img {
  position: absolute;
  height: calc(var(--mark) * 1039 / 609);
  width: auto;
  max-width: none;                        /* base.css caps images at 100% */
  left: calc(var(--mark) * -104 / 609);
  top: calc(var(--mark) * -106 / 609);
}

.mk-sidebar__brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.mk-sidebar__brand-title {
  font-family: var(--mk-font-display);
  font-size: var(--mk-text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--mk-sidebar-text-on);
}

.mk-sidebar__brand-sub {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mk-sidebar-text);
}

.mk-sidebar__nav {
  flex: 1 1 auto;
  padding: var(--mk-space-4) var(--mk-space-3) var(--mk-space-5);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mk-navgroup + .mk-navgroup { margin-top: var(--mk-space-5); }

.mk-navgroup__title {
  padding: 0 var(--mk-space-3) var(--mk-space-2);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 45%);
}

.mk-navlink {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--mk-space-3);
  padding: 10px var(--mk-space-3);
  margin-bottom: 2px;
  font-size: var(--mk-text-base);
  font-weight: 500;
  color: var(--mk-sidebar-text);
  border: 0;
  border-radius: var(--mk-radius);
  transition: background var(--mk-dur) var(--mk-ease),
              color var(--mk-dur) var(--mk-ease);
}

.mk-navlink:hover {
  color: var(--mk-sidebar-text-on);
  background: rgb(255 255 255 / 8%);
  border-bottom-color: transparent;
}

.mk-navlink[aria-current="page"] {
  color: var(--mk-sidebar-text-on);
  background: var(--mk-sidebar-raised);
  font-weight: 600;
}

/* The brand accent marks the active destination and nothing else. */
.mk-navlink[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: calc(var(--mk-space-3) * -1 + 3px);
  top: 50%;
  width: 3px;
  height: 22px;
  background: var(--mk-brand);
  border-radius: var(--mk-radius-pill);
  transform: translateY(-50%);
}

.mk-navlink__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  opacity: 0.9;
}

.mk-navlink__badge {
  margin-left: auto;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--mk-brand-deep);
  background: var(--mk-brand);
  border-radius: var(--mk-radius-pill);
}

.mk-sidebar__footer {
  flex: 0 0 auto;
  padding: var(--mk-space-4);
  border-top: 1px solid var(--mk-sidebar-line);
}

/* Sized by width, not height. The lockup is 2.18:1 with a strapline under the
   wordmark, so a height that suits a single line of type leaves the words at a
   3.5px cap height. The sidebar is 256px wide, which leaves room for this. */
.mk-sidebar__footer img { width: 132px; height: auto; display: block; }

.mk-sidebar__footer p {
  margin: var(--mk-space-2) 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: rgb(255 255 255 / 55%);
}

.mk-sidebar__scrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--mk-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--mk-dur) var(--mk-ease), visibility var(--mk-dur);
}

.mk-sidebar__scrim[data-open="true"] { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------------------
   Topbar
   -------------------------------------------------------------------------- */

.mk-topbar {
  grid-area: topbar;
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--mk-space-3);
  height: var(--mk-topbar-h);
  padding: 0 var(--mk-space-4);
  background: var(--mk-surface);
  border-bottom: 1px solid var(--mk-line);
}

.mk-topbar__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--mk-heading);
  background: transparent;
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius);
  cursor: pointer;
}

.mk-topbar__toggle:hover { background: var(--mk-highlight); }

.mk-topbar__logo {
  display: flex;
  align-items: center;
  gap: var(--mk-space-3);
  min-width: 0;
}

.mk-topbar__logo img { height: 30px; width: auto; }

.mk-topbar__context {
  display: none;
  min-width: 0;
  padding-left: var(--mk-space-3);
  border-left: 1px solid var(--mk-line);
}

.mk-topbar__context-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mk-slate);
}

.mk-topbar__context-value {
  display: block;
  font-size: var(--mk-text-sm);
  font-weight: 600;
  color: var(--mk-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mk-topbar__search {
  display: none;
  position: relative;
  flex: 1 1 320px;
  max-width: 420px;
}

.mk-topbar__search input { padding-left: 36px; min-height: 38px; }

.mk-topbar__search svg {
  position: absolute;
  left: 11px;
  top: 50%;
  width: 16px;
  height: 16px;
  color: var(--mk-slate);
  transform: translateY(-50%);
  pointer-events: none;
}

.mk-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--mk-space-2);
  margin-left: auto;
}

.mk-iconbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--mk-heading);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--mk-radius);
  cursor: pointer;
}

.mk-iconbtn:hover { background: var(--mk-highlight); border-color: var(--mk-line); }

.mk-iconbtn__dot {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 8px;
  height: 8px;
  background: var(--mk-danger);
  border: 2px solid var(--mk-surface);
  border-radius: 50%;
}

.mk-usermenu {
  display: flex;
  align-items: center;
  gap: var(--mk-space-2);
  padding: 4px 6px 4px 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--mk-radius-pill);
  cursor: pointer;
  text-align: left;
}

.mk-usermenu:hover { background: var(--mk-highlight); border-color: var(--mk-line); }

.mk-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  font-family: var(--mk-font-display);
  font-size: var(--mk-text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--mk-surface);
  background: var(--mk-brand-mid);
  border-radius: 50%;
}

.mk-usermenu__meta { display: none; line-height: 1.2; }
.mk-usermenu__name { font-size: var(--mk-text-sm); font-weight: 600; color: var(--mk-heading); }
.mk-usermenu__role { font-size: 11px; color: var(--mk-slate); }

/* --------------------------------------------------------------------------
   Main region
   -------------------------------------------------------------------------- */

.mk-main {
  grid-area: main;
  min-width: 0;
  padding: var(--mk-space-4) var(--mk-space-4) var(--mk-space-7);
}

.mk-main__inner { max-width: var(--mk-content-max); margin: 0 auto; }

.mk-pagehead { margin-bottom: var(--mk-space-5); }

.mk-pagehead__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mk-space-4);
  flex-wrap: wrap;
}

.mk-pagehead h1 { font-size: var(--mk-text-lg); }

.mk-pagehead__sub {
  margin: var(--mk-space-1) 0 0;
  font-size: var(--mk-text-sm);
  color: var(--mk-slate);
}

.mk-pagehead__actions {
  display: flex;
  align-items: center;
  gap: var(--mk-space-2);
  flex-wrap: wrap;
}

/* The thin red rule under every page title. */
.mk-pagehead__rule {
  width: 48px;
  height: 3px;
  margin-top: var(--mk-space-3);
  background: var(--mk-brand);
  border-radius: var(--mk-radius-pill);
}

.mk-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--mk-space-2);
  margin-bottom: var(--mk-space-2);
  font-size: var(--mk-text-xs);
  color: var(--mk-slate);
  list-style: none;
  padding: 0;
  flex-wrap: wrap;
}

.mk-breadcrumb li { display: flex; align-items: center; gap: var(--mk-space-2); }
.mk-breadcrumb li + li::before { content: "/"; color: var(--mk-line); }
.mk-breadcrumb a { color: var(--mk-slate); }
.mk-breadcrumb a:hover { color: var(--mk-link); }

/* --------------------------------------------------------------------------
   Grids
   -------------------------------------------------------------------------- */

.mk-grid {
  display: grid;
  gap: var(--mk-space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.mk-grid--2 { grid-template-columns: 1fr; }
.mk-grid--sidebar { display: grid; gap: var(--mk-space-4); grid-template-columns: 1fr; }

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */

@media (min-width: 600px) {
  .mk-main { padding: var(--mk-space-5) var(--mk-space-5) var(--mk-space-7); }
  .mk-topbar { padding: 0 var(--mk-space-5); }
  .mk-usermenu__meta { display: block; }
  .mk-grid--2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 860px) {
  .mk-topbar__search { display: block; }
  .mk-topbar__context { display: block; }
}

@media (min-width: 960px) {
  .mk-app {
    grid-template-columns: var(--mk-sidebar-w) 1fr;
    grid-template-areas:
      "sidebar topbar"
      "sidebar main";
  }

  .mk-sidebar {
    position: sticky;
    top: 0;
    height: 100dvh;
    width: var(--mk-sidebar-w);
    transform: none;
  }

  .mk-topbar__toggle { display: none; }
  .mk-sidebar__scrim { display: none; }
  .mk-main { padding: var(--mk-space-5) var(--mk-space-6) var(--mk-space-7); }
  .mk-grid--sidebar { grid-template-columns: minmax(0, 1fr) 320px; }
}

/* --------------------------------------------------------------------------
   Authentication layout
   Single column on mobile. Navy brand panel beside the form from 900px.
   -------------------------------------------------------------------------- */

/* Exactly the viewport, never taller, with the page itself unable to scroll.
   min-height here instead would let the grid row grow to whichever column is
   taller, which is the sign-in form once the demonstration account list is in
   it. The brand column would then be pushed past the fold along with it, and
   its message, which sits at the bottom of the column by design, would only be
   reachable by scrolling the whole page. The form scrolls inside its own
   column instead. */
.mk-auth {
  display: grid;
  height: 100dvh;
  grid-template-columns: 1fr;
  overflow: hidden;
}

.mk-auth__brand {
  display: none;
  flex-direction: column;
  padding: var(--mk-space-6);
  color: var(--mk-sidebar-text-on);
  background:
    radial-gradient(1100px 520px at 8% -10%, rgb(var(--mk-brand-rgb) / 45%), transparent 60%),
    var(--mk-brand-deep);
  /* min-height:0 lets a grid item shrink below its content size, which is what
     makes the overflow land here rather than on the page. The brand content
     fits comfortably, so this scrollbar should never appear; it is here so a
     very short window hides nothing rather than clipping it. */
  min-height: 0;
  overflow-y: auto;
}

.mk-auth__brand-top { display: flex; align-items: center; gap: var(--mk-space-3); }

/* The ISFAP logo keeps its white plate here and only here. This is the first
   thing anyone sees, it is the full lockup rather than the cropped mark, and
   the black wordmark and strapline measure 1.68:1 straight on the deep green.
   Everywhere else the logos sit on the surface with nothing behind them. */
.mk-auth__brand-top .mk-logo-plate {
  padding: var(--mk-space-3) var(--mk-space-4);
  background: var(--mk-surface);
  border-radius: var(--mk-radius);
}

/* Larger here than in the sidebar because there is room for it, and because
   this is the first thing anyone sees. */
.mk-auth__brand-top img { height: 56px; width: auto; display: block; }

.mk-auth__brand-body { margin-top: auto; max-width: 46ch; }

.mk-auth__brand-body h2 {
  font-size: var(--mk-text-2xl);
  color: var(--mk-sidebar-text-on);
  line-height: 1.15;
}

.mk-auth__brand-body p {
  margin-top: var(--mk-space-3);
  color: rgb(255 255 255 / 76%);
}

.mk-auth__tagline {
  display: inline-flex;
  align-items: center;
  gap: var(--mk-space-2);
  margin-top: var(--mk-space-5);
  padding-top: var(--mk-space-4);
  border-top: 1px solid var(--mk-sidebar-line);
  font-family: var(--mk-font-display);
  font-size: var(--mk-text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgb(255 255 255 / 70%);
}

.mk-auth__tagline span:nth-child(2) { color: var(--mk-gold); }

.mk-auth__panel {
  display: flex;
  flex-direction: column;
  padding: var(--mk-space-5) var(--mk-space-4) var(--mk-space-6);
  background: var(--mk-surface);
  min-height: 0;
  overflow-y: auto;
}

/* Centred by auto margins rather than by justify-content. They do the same job
   while the form is shorter than the column, but when it is taller the auto
   margins resolve to zero and it scrolls from the top. justify-content:center
   would instead overflow equally in both directions and put the heading above
   the scrollable area, where it cannot be reached. */
.mk-auth__inner { width: 100%; max-width: 400px; margin: auto; }

.mk-auth__mobile-logo {
  display: flex;
  justify-content: center;
  margin-bottom: var(--mk-space-5);
}

.mk-auth__mobile-logo img { height: 46px; width: auto; }

.mk-auth__divider {
  display: flex;
  align-items: center;
  gap: var(--mk-space-3);
  margin: var(--mk-space-5) 0;
  font-size: var(--mk-text-xs);
  color: var(--mk-slate);
}

.mk-auth__divider::before,
.mk-auth__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--mk-line);
}

.mk-auth__foot {
  margin-top: var(--mk-space-6);
  padding-top: var(--mk-space-4);
  border-top: 1px solid var(--mk-line);
  font-size: var(--mk-text-xs);
  color: var(--mk-slate);
}

.mk-demo-keys { display: grid; gap: 6px; margin-top: var(--mk-space-2); }

.mk-demo-key {
  display: flex;
  align-items: center;
  gap: var(--mk-space-2);
  width: 100%;
  padding: 7px 10px;
  font-size: var(--mk-text-xs);
  text-align: left;
  color: var(--mk-heading);
  background: var(--mk-canvas);
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius-sm);
  cursor: pointer;
}

.mk-demo-key:hover { border-color: var(--mk-brand-strong); }
.mk-demo-key strong { flex: 0 0 auto; min-width: 92px; }
.mk-demo-key span { color: var(--mk-slate); font-family: var(--mk-font-mono); }

@media (min-width: 900px) {
  .mk-auth { grid-template-columns: 1.05fr 1fr; }
  .mk-auth__brand { display: flex; }
  .mk-auth__mobile-logo { display: none; }
  .mk-auth__panel { padding: var(--mk-space-6); }
}

@media print {
  .mk-sidebar, .mk-topbar, .mk-pagehead__actions { display: none !important; }
  .mk-app { grid-template-columns: 1fr; grid-template-areas: "main"; }
  body { background: var(--mk-surface); }
}