/*
 * Meridian SAR: the website in the app's colours.
 *
 * Loaded after the admin template's own stylesheet (build/css/custom.min.css)
 * and only overrides colours, so the layout stays the template's.
 * The app's palette (sr/src/theme/variables.scss):
 */
:root {
  --m-navy: #213555;       /* primary: toolbars, the sidebar */
  --m-navy-deep: #1a2b45;
  --m-slate: #3e5879;      /* secondary: active items, links */
  --m-slate-light: #4f6a8e;
  --m-sand: #d8c4b6;       /* tertiary: accents */
  --m-cream: #f4f4f4;      /* background */
  --m-cream-edge: #e6dccf;
  --m-text: #213555;
  /* Neutrals for the working screens. The sand and cream are the app's
     accents and sit well against the navy sidebar, but over a large area -
     a tab strip, a panel edge - they read muddy rather than warm, so the
     dense admin pages use these and keep the sand for small accents. */
  --m-line: #d8dde3;       /* borders on panels and tabs */
  --m-line-soft: #eef1f4;  /* the strip behind tabs, quiet fills */
  --m-muted: #73879c;      /* secondary text */
}

/* The sidebar (the template paints the page behind it the same colour). */
body,
.left_col,
.nav_title,
.nav-md .container.body .col-md-3.left_col,
.sidebar-footer {
  background: var(--m-navy) !important;
}
.site_title, .site_title:hover, .site_title:focus { color: var(--m-cream) !important; }
.profile_info h2, .profile_info span { color: var(--m-cream) !important; }
.nav.side-menu > li > a,
.nav.child_menu > li > a,
.nav.side-menu > li > a > .fa { color: rgba(245, 239, 231, 0.85) !important; }
.nav.side-menu > li > a:hover,
.nav.child_menu > li > a:hover { color: #ffffff !important; }
.nav.side-menu > li.active > a,
.nav.side-menu > li.current-page > a {
  background: var(--m-slate) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.nav.side-menu > li.active,
.nav.side-menu > li.current-page { border-right-color: var(--m-sand) !important; }
.nav.child_menu > li.current-page > a,
.nav.child_menu > li > a.current-page { color: var(--m-sand) !important; }
.nav.child_menu li::before { background: var(--m-slate-light) !important; }
/*
 * One stalk for the whole submenu, drawn on the list.
 *
 * The template gives every item its own segment of the line, from the top of
 * its row to the bottom, and relies on them stacking into something that
 * looks continuous. That leaves a stub at each end - above the first bullet,
 * below the last - and the end it does try to trim uses "bottom: 50%", which
 * is only the bullet's position when a row happens to be 38px tall. Trimming
 * those stubs means fighting a rule per item, on a pseudo-element, in a
 * cascade where the template keeps winning.
 *
 * So the per-item segments are switched off. The line is drawn once on the
 * list, from the first bullet downwards, and the last item covers whatever
 * hangs below its own bullet with a block of the sidebar's colour. A bullet
 * is 19px below the top of its row, so both measurements are from a row's
 * top and neither moves when a label wraps and the row grows.
 */
ul.nav.child_menu { position: relative; }
ul.nav.child_menu::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 19px;
  bottom: 0;
  border-left: 1px solid var(--m-slate-light);
}
/* The per-item segments, which the one line above replaces. */
.nav-md ul.nav.child_menu li::after,
.nav-sm ul.nav.child_menu li::after,
ul.nav.child_menu li::after {
  display: none !important;
}
/* Below the last bullet there is no line.
   The bullet's own shadow only reaches about eight pixels past it, which
   leaves a tail on any row taller than that - so the last item takes its
   ::after back and paints over the line from its bullet to the bottom of
   the row, however tall the row is. Measured 19px from the row's top, the
   bullet's own offset, so a wrapped label cannot drag the join out of
   place. */
/* The row must be the frame for the cover below, or it is positioned
   against the list instead and covers the line from the first bullet down -
   which is the whole line. The template leaves li unpositioned. */
ul.nav.child_menu li { position: relative; }
.nav-md ul.nav.child_menu li:last-child::after,
.nav-sm ul.nav.child_menu li:last-child::after,
ul.nav.child_menu li:last-child::after {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  left: 26px !important;
  right: auto !important;
  top: 19px !important;
  bottom: 0 !important;
  height: auto !important;
  width: 3px !important;
  border: 0 !important;
  background: var(--m-navy) !important;
  z-index: 0;
}
.menu_section h3 { color: var(--m-sand) !important; }
.sidebar-footer a { background: var(--m-navy-deep) !important; color: var(--m-cream) !important; }

/* The top bar and the page. */
.nav_menu { background: #ffffff !important; border-bottom: 1px solid var(--m-cream-edge) !important; }
.right_col, .container.body .right_col { background: var(--m-cream) !important; }
footer { background: var(--m-cream) !important; border-top: 1px solid var(--m-cream-edge); color: #6b7280; }
.page-title h3, .x_title h2 { color: var(--m-text) !important; }
.x_panel { border-color: var(--m-cream-edge) !important; }
a { color: var(--m-slate); }
a:hover, a:focus { color: var(--m-navy); }

/* Buttons: primary actions in navy, as in the app. */
.btn-primary {
  background-color: var(--m-navy) !important;
  border-color: var(--m-navy) !important;
  color: var(--m-cream) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--m-slate) !important;
  border-color: var(--m-slate) !important;
}
.btn-outline-primary { color: var(--m-navy) !important; border-color: var(--m-navy) !important; }
.btn-outline-primary:hover { background: var(--m-navy) !important; color: var(--m-cream) !important; }

/*
 * Tabs, everywhere: folder tabs rather than an underlined row.
 *
 * Each tab is its own card so the separations between them show, and the
 * chosen one is the same white sheet as the panel beneath it - it sits a
 * pixel lower so its bottom edge covers the panel's top border and the two
 * read as one piece of paper.
 *
 * Used by the Site admin tabs (.sa-tabs), the organisation page (.og-tabs)
 * and Bootstrap's own .nav-tabs on the mission page. A panel that should join
 * on gets .tab-sheet, or is #saApp.
 */
.sa-tabs, .og-tabs, .nav-tabs {
  display: flex; flex-wrap: wrap; gap: 3px;
  padding: 6px 6px 0; margin-bottom: 0;
  background: var(--m-line-soft);
  border: 1px solid var(--m-line); border-bottom: 0;
  border-radius: 10px 10px 0 0;
}
.sa-tabs > a, .og-tabs > a, .nav-tabs > li > a, .nav-tabs .nav-link {
  position: relative; bottom: -1px;
  padding: 9px 16px; font-size: 14px; font-weight: 600;
  color: var(--m-muted); text-decoration: none;
  background: rgba(255, 255, 255, .4);
  border: 1px solid var(--m-line); border-bottom: 0;
  border-radius: 8px 8px 0 0;
}
.sa-tabs > a:hover, .og-tabs > a:hover, .nav-tabs > li > a:hover, .nav-tabs .nav-link:hover {
  color: var(--m-navy); background: rgba(255, 255, 255, .75);
}
.sa-tabs > a.on, .og-tabs > a.on,
.nav-tabs > li.active > a, .nav-tabs .nav-link.active {
  color: var(--m-navy) !important; background: #fff !important;
  border-color: var(--m-line) !important; border-bottom: 0 !important;
  /* A navy edge marks the chosen one. It is a pixel thicker than the other
     borders, so a pixel comes off the top padding to keep every tab the same
     height and their bottoms on one line. */
  border-top: 2px solid var(--m-navy) !important;
  padding-top: 8px; padding-bottom: 10px; z-index: 2;
}
/* The sheet the chosen tab joins on to. */
.tab-sheet, #saApp, .og-panel {
  background: #fff; border: 1px solid var(--m-line);
  border-radius: 0 10px 10px 10px; padding: 18px 20px; margin-bottom: 18px;
}
/* Cards inside a sheet lose their own frame - the sheet is the frame. */
.tab-sheet > .sa-card, #saApp > .sa-card, .og-panel > .og-card {
  border: 0; border-radius: 0; padding: 0 0 18px; margin-bottom: 18px;
  border-bottom: 1px solid var(--m-line-soft);
}
.tab-sheet > .sa-card:last-child, #saApp > .sa-card:last-child, .og-panel > .og-card:last-child {
  border-bottom: 0; padding-bottom: 0; margin-bottom: 0;
}
/* Bootstrap's nav-justified stretches its items; with flex that needs saying
   again, or the mission page's tabs bunch to the left. */
.nav-tabs.nav-justified > li { flex: 1; display: flex; }
.nav-tabs.nav-justified > li > a { flex: 1; text-align: center; }

.topnavlinks.active { color: var(--m-navy) !important; border-bottom-color: var(--m-navy) !important; }

@media (max-width: 640px) {
  .sa-tabs, .og-tabs, .nav-tabs { border-radius: 8px 8px 0 0; padding: 5px 5px 0; }
  .sa-tabs > a, .og-tabs > a, .nav-tabs > li > a, .nav-tabs .nav-link { padding: 8px 12px; font-size: 13px; }
  .tab-sheet, #saApp, .og-panel { border-radius: 0 0 8px 8px; padding: 14px; }
}

/* Form focus. */
.form-control:focus { border-color: var(--m-slate) !important; box-shadow: 0 0 0 0.15rem rgba(62, 88, 121, 0.2) !important; }

/* The quiet footer line (see includes/footer.php). */
.site-footer { font-size: 12px; color: #6b7280; }
.site-footer a { color: #6b7280; }
.site-footer a:hover { color: var(--m-navy); }


/*
 * Narrow screens: the hamburger opens the sidebar as a drawer.
 *
 * The admin template hides .left_col outright below 991px, and its toggle
 * only swaps .nav-md for .nav-sm - so under that width the button changed a
 * class that nothing was looking at and the menu stayed hidden either way.
 * It looked broken because, from the outside, it was.
 *
 * Here the menu slides in over the page instead. body.m-drawer is added by
 * the toggle (see includes/nav.php), so this needs nothing from the
 * template's own JavaScript.
 */
@media (max-width: 991px) {
  /* Shown, but off to the left until asked for. The template's own rule is
     display:none, so this has to say display as well as position. */
  .nav-md .container.body .col-md-3.left_col,
  .nav-sm .container.body .col-md-3.left_col,
  .container.body .col-md-3.left_col {
    display: block !important;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 260px;
    max-width: 86vw;
    z-index: 10002;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-100%);
    transition: transform .2s ease-out;
    box-shadow: 2px 0 24px rgba(0, 0, 0, .35);
  }
  body.m-drawer .container.body .col-md-3.left_col { transform: none; }

  /* The page behind it dims and stops scrolling, so a tap outside is
     obviously "close" rather than a half-press on whatever is under it. */
  .m-drawer-back {
    position: fixed;
    /* Longhand as well as the shorthand: this is the mobile path, and a
       backdrop that failed to cover anything would sit over the page
       invisibly with nothing to tap. */
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0;
    background: rgba(15, 23, 42, .5);
    z-index: 10001;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
  }
  body.m-drawer .m-drawer-back { opacity: 1; pointer-events: auto; }
  body.m-drawer { overflow: hidden; }

  /* The toggle itself: a proper touch target, and above the top bar so
     nothing in it can land on top of the button. */
  .nav.toggle { position: relative; z-index: 10003; padding: 0 !important; }
  .nav.toggle > a#menu_toggle {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; margin: 0;
    color: var(--m-navy); cursor: pointer;
  }
  .nav.toggle > a#menu_toggle:active { background: var(--m-line-soft); }

  /* The sidebar is where these live on a phone, so the top bar does not
     repeat them. The organisation switcher and the user menu are in
     ul.navbar-right, which is absolutely positioned with a z-index of its
     own - so left alone it sits on top of the toggle and the two read as one
     overlapping mess. The mission tabs go too: they are in the sidebar. */
  .nav_menu ul.navbar-right,
  .nav_menu nav.navbar-nav > ul.nav-tabs { display: none !important; }

  /* What is left is the toggle and the page, so the bar can be the height of
     the button rather than the height of a menu that is no longer in it.

     position:relative because the template sets .nav_menu to static above
     480px, and the title below is positioned against this bar - without it
     the title would anchor to the page and scroll away with it. Most phones
     are 360-414px, which is inside that range. */
  .nav_menu { min-height: 48px; position: relative; }
  .nav_menu nav.navbar-nav { margin: 0; }

  /* The drawer's title sits where the hamburger is.
     The toggle is fixed in the page above the drawer, so with the drawer
     open the button lands on "Meridian SAR". The title is indented past it
     and set smaller, which also leaves room for a long name on a narrow
     phone. The compass stays - it is the mark, and the first thing that says
     which app this is. */
  .nav_title { width: auto; height: 48px; }
  .site_title {
    font-size: 17px;
    line-height: 48px;
    height: 48px;
    /* The 48px button plus a gap, so the two never touch. */
    padding-left: 56px;
    padding-right: 12px;
    white-space: nowrap;
  }
  .site_title i { font-size: 14px; padding: 4px 5px; }

  /* While the drawer is open the button belongs to it, so it is tinted to
     match rather than looking like a piece of the page showing through. */
  body.m-drawer .nav.toggle > a#menu_toggle { color: var(--m-cream); }
  body.m-drawer .nav.toggle > a#menu_toggle:active { background: rgba(255, 255, 255, .12); }

  /* The title in the bar, beside the hamburger.
     With the drawer closed the sidebar and its title are off-screen, which
     left the bar as a lone hamburger saying nothing about what this is. This
     one sits in the bar and stays put; it hides while the drawer is open,
     because the drawer's own title is then in the same place. */
  .m-bar-title {
    position: absolute;
    left: 56px;                 /* clear of the 48px button */
    top: 0;
    height: 48px;
    line-height: 48px;
    font-size: 17px;
    font-weight: 600;
    color: var(--m-navy) !important;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100vw - 72px);
    z-index: 2;
  }
  .m-bar-title i { font-size: 15px; margin-right: 4px; }
  body.m-drawer .m-bar-title { display: none; }

  /* Who you are and which organisation, at the top of the drawer. */
  .m-who {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(245, 239, 231, .15);
  }
  .m-who .m-name { color: #fff; font-weight: 600; font-size: 15px; }
  .m-who .m-org { color: var(--m-sand); font-size: 13px; margin-top: 2px; }
  .m-who .m-links { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
  .m-who .m-links a {
    font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 14px;
    color: var(--m-cream); background: rgba(255, 255, 255, .12); text-decoration: none;
  }
  .m-who .m-links a:active { background: rgba(255, 255, 255, .22); }
  /* The organisations to switch between, when there are several. */
  .m-who select {
    width: 100%; margin-top: 10px; font-size: 13px; padding: 6px 8px;
    border-radius: 6px; border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(0, 0, 0, .2); color: var(--m-cream);
  }
}

/* Wide screens keep the template's layout untouched, and the drawer parts
   are not shown at all. */
@media (min-width: 992px) {
  .m-drawer-back, .m-who, .m-bar-title { display: none !important; }
}