/*
 * ChatterStars extranet refresh
 * ============================================================================
 *
 * One stylesheet, loaded last, that restyles the AdminLTE 2 / Bootstrap 3.3.7
 * primitives this admin is built from. No markup changes: all 55 view files
 * inherit from resources/views/vendor/adminlte/master.blade.php, so styling
 * .box, .btn, .form-control and the chrome reaches every page at once.
 *
 * Reverting is deleting the one <link> in master.blade.php.
 *
 * WHY NOT REWRITE THE MARKUP: the views use AdminLTE 2 classes (box,
 * box-header, box-body) across 83 boxes and 238 form controls. Converting all
 * of that to AdminLTE 3 "card" markup is a large job with a regression on
 * every screen, and it buys the same visual result this file gets for free.
 *
 * EVERY COLOUR HERE IS MEASURED. Ratios are WCAG 2.1 relative luminance
 * against the surface the text actually sits on:
 *
 *   #1a1d29 on white ............... 16.78:1
 *   #5b6070 on white ................ 6.27:1   on #f5f6f8  5.79:1
 *   #6b7180 on white ................ 4.88:1   on #f5f6f8  4.52:1
 *   #0071b8 on white ................ 5.18:1
 *   #000F85 on white ............... 14.93:1
 *   white   on #000F85 ............. 14.93:1   (the sidebar)
 *   #b3b7da on #000F85 .............. 7.61:1   (sidebar section labels)
 *   #000F85 on #FF9E00 .............. 7.21:1   (the accent button)
 *
 * The muted grey is #6b7180 and NOT the more obvious #8a8f9e, which measures
 * 2.99:1 on the page plane and fails outright. Worth knowing before anyone
 * lightens it back for looks.
 *
 * #009DFF is the brand blue and appears here ONLY as decoration - focus rings,
 * rules, the active-item marker. It is 2.89:1 on white, so it never carries or
 * backs text. Text that wants to look blue uses #0071b8.
 */

:root {
  --cs-navy: #000F85;
  --cs-blue: #009DFF;        /* decoration only - see the note above */
  --cs-blue-text: #0071b8;
  --cs-orange: #FF9E00;
  --cs-red: #d03b3b;
  --cs-green: #0f8a5f;

  --cs-ink: #1a1d29;
  --cs-ink-2: #5b6070;
  --cs-muted: #6b7180;

  --cs-plane: #f5f6f8;
  --cs-surface: #ffffff;
  --cs-line: #e6e8ec;
  --cs-line-soft: #eef0f3;

  --cs-radius: 10px;
  --cs-radius-sm: 8px;
  --cs-shadow: 0 1px 2px rgba(16, 20, 40, 0.04), 0 1px 3px rgba(16, 20, 40, 0.06);
}

/* ---------------------------------------------------------------- base ---- */

body,
.wrapper {
  background: var(--cs-plane);
  color: var(--cs-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Booster is the product's own face and is already served to this admin by
   admin.css. Using it for headings is what makes the extranet look like part
   of ChatterStars rather than a generic dashboard. Body copy stays in the
   system sans, which is far more legible at 14px. */
h1, h2, h3, h4, h5,
.box-title,
.content-header > h1 {
  font-family: Booster, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  color: var(--cs-ink);
  letter-spacing: -0.01em;
}

a { color: var(--cs-blue-text); }
a:hover, a:focus { color: var(--cs-navy); text-decoration: none; }

p { color: var(--cs-ink-2); }

/* -------------------------------------------------------------- header ---- */

.main-header .navbar,
.skin-blue .main-header .navbar {
  background: var(--cs-surface);
  border-bottom: 1px solid var(--cs-line);
  box-shadow: none;
}

.main-header .logo,
.skin-blue .main-header .logo {
  background: var(--cs-navy);
  color: #ffffff;
  font-family: Booster, sans-serif;
  font-weight: 700;
  border-bottom: 0;
  transition: none;
}

.main-header .logo:hover,
.skin-blue .main-header .logo:hover {
  background: var(--cs-navy);
}

.main-header .logo .logo-lg b { font-weight: 700; }

.main-header .sidebar-toggle,
.skin-blue .main-header .navbar .sidebar-toggle {
  color: var(--cs-ink-2);
}

.main-header .sidebar-toggle:hover,
.skin-blue .main-header .navbar .sidebar-toggle:hover {
  background: var(--cs-plane);
  color: var(--cs-navy);
}

.skin-blue .main-header .navbar .nav > li > a {
  color: var(--cs-ink-2);
}

.skin-blue .main-header .navbar .nav > li > a:hover,
.skin-blue .main-header .navbar .nav > li > a:focus,
.skin-blue .main-header .navbar .nav .open > a {
  background: var(--cs-plane);
  color: var(--cs-navy);
}

/* ------------------------------------------------------------- sidebar ---- */

/* Navy ground with white text is 14.93:1 and puts the brand on every screen,
   where the stock skin leaves the chrome anonymous. */
.main-sidebar,
.left-side,
.skin-blue .wrapper,
.skin-blue .main-sidebar,
.skin-blue .left-side {
  background: var(--cs-navy);
}

.skin-blue .sidebar-menu > li.header {
  background: transparent;
  color: #b3b7da;                /* 7.61:1 on the navy */
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 22px 16px 8px;
}

.skin-blue .sidebar-menu > li > a {
  color: rgba(255, 255, 255, 0.88);
  border-left: 3px solid transparent;
  padding: 11px 16px;
  font-weight: 500;
}

.skin-blue .sidebar-menu > li:hover > a,
.skin-blue .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li.menu-open > a {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border-left-color: var(--cs-blue);   /* decoration, carries no text */
}

.skin-blue .sidebar-menu > li.active > a { font-weight: 700; }

.skin-blue .sidebar-menu > li > a > .fa,
.skin-blue .sidebar-menu > li > a > .glyphicon,
.skin-blue .sidebar-menu > li > a > .ion {
  width: 22px;
  opacity: 0.85;
}

.skin-blue .treeview-menu > li > a { color: rgba(255, 255, 255, 0.75); }
.skin-blue .treeview-menu > li.active > a,
.skin-blue .treeview-menu > li > a:hover { color: #ffffff; }

/* -------------------------------------------------------- content area ---- */

.content-wrapper,
.skin-blue .content-wrapper {
  background: var(--cs-plane);
  border: 0;
}

.content-header {
  padding: 26px 22px 6px;
  background: transparent;
}

.content-header > h1 {
  font-size: 24px;
  margin: 0;
}

.content-header > h1 > small {
  color: var(--cs-muted);
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.content-header > .breadcrumb {
  background: transparent;
  top: 26px;
  right: 22px;
  font-size: 12px;
  padding: 0;
}

.content { padding: 12px 22px 30px; }

/* ---------------------------------------------------------------- boxes --- */

/* AdminLTE 2 gives every box a 3px coloured top border and a ruled header bar.
   That stacked-slab effect is most of what reads as dated here. Replaced with
   a hairline card. */
.box {
  background: var(--cs-surface);
  border: 1px solid var(--cs-line);
  border-top: 1px solid var(--cs-line);
  border-radius: var(--cs-radius);
  box-shadow: var(--cs-shadow);
  margin-bottom: 22px;
}

.box.box-default,
.box.box-primary,
.box.box-info,
.box.box-success,
.box.box-warning,
.box.box-danger {
  border-top-color: var(--cs-line);
}

.box-header {
  padding: 18px 20px 0;
  border-bottom: 0;
  color: var(--cs-ink);
}

.box-header.with-border {
  border-bottom: 1px solid var(--cs-line-soft);
  padding-bottom: 14px;
  margin-bottom: 2px;
}

.box-header > .box-title {
  font-size: 16px;
  line-height: 1.3;
}

.box-header > .box-title > small {
  display: block;
  margin-top: 3px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--cs-muted);
}

.box-body { padding: 18px 20px; }

.box-footer {
  background: transparent;
  border-top: 1px solid var(--cs-line-soft);
  border-radius: 0 0 var(--cs-radius) var(--cs-radius);
  padding: 14px 20px;
}

.box-header > .box-tools { top: 14px; right: 14px; }

.btn-box-tool { color: var(--cs-muted); }
.btn-box-tool:hover { color: var(--cs-navy); }

/* -------------------------------------------------------------- buttons --- */

.btn {
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 9px 20px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  box-shadow: none;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.btn:focus,
.btn:active:focus,
.btn.active:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0, 157, 255, 0.35);
}

.btn-xs { padding: 4px 12px; font-size: 12px; }
.btn-sm { padding: 6px 15px; font-size: 13px; }
.btn-lg { padding: 12px 28px; font-size: 16px; }

.btn-primary,
.btn-primary:focus {
  background: var(--cs-navy);
  border-color: var(--cs-navy);
  color: #ffffff;               /* 14.93:1 */
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background: #000b63;
  border-color: #000b63;
  color: #ffffff;
}

/* The accent button. Navy on the orange is 7.21:1; white on it would be
   2.07:1, so the label is dark on purpose. */
.btn-warning,
.btn-warning:focus {
  background: var(--cs-orange);
  border-color: var(--cs-orange);
  color: var(--cs-navy);
}

.btn-warning:hover,
.btn-warning:active {
  background: #e88f00;
  border-color: #e88f00;
  color: var(--cs-navy);
}

.btn-danger,
.btn-danger:focus {
  background: var(--cs-red);
  border-color: var(--cs-red);
  color: #ffffff;
}

.btn-danger:hover,
.btn-danger:active { background: #b83232; border-color: #b83232; }

.btn-success,
.btn-success:focus {
  background: var(--cs-green);
  border-color: var(--cs-green);
  color: #ffffff;
}

.btn-default,
.btn-default:focus {
  background: var(--cs-surface);
  border-color: var(--cs-line);
  color: var(--cs-ink-2);
}

.btn-default:hover,
.btn-default:active {
  background: var(--cs-plane);
  border-color: #d8dce3;
  color: var(--cs-navy);
}

.btn-link { color: var(--cs-blue-text); font-weight: 600; }

/* ---------------------------------------------------------------- forms --- */

.form-group { margin-bottom: 18px; }

.form-group > label,
label.control-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cs-ink);
}

.form-control {
  height: auto;
  min-height: 40px;
  padding: 9px 12px;
  font-size: 14px;
  color: var(--cs-ink);
  background: var(--cs-surface);
  border: 1px solid #d8dce3;
  border-radius: var(--cs-radius-sm);
  box-shadow: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.form-control:focus {
  border-color: var(--cs-blue);
  box-shadow: 0 0 0 3px rgba(0, 157, 255, 0.18);
}

.form-control::placeholder { color: var(--cs-muted); }

textarea.form-control { min-height: 110px; }

select.form-control { min-height: 40px; }

.help-block { font-size: 12px; color: var(--cs-muted); }

.has-error .form-control { border-color: var(--cs-red); }

.has-error .form-control:focus {
  box-shadow: 0 0 0 3px rgba(208, 59, 59, 0.18);
}

.has-error .control-label,
.has-error .help-block,
.has-error .form-group > label {
  color: var(--cs-red);        /* 4.68:1 on white */
}

.input-group-addon {
  background: var(--cs-plane);
  border: 1px solid #d8dce3;
  border-radius: var(--cs-radius-sm);
  color: var(--cs-ink-2);
}

.checkbox label,
.radio label { font-weight: 400; color: var(--cs-ink-2); }

/* --------------------------------------------------------------- tables --- */

/* No zebra striping and no cell borders: hairline row rules and a quiet
   uppercase header, which is the same treatment the new dashboard uses. */
.table > thead > tr > th {
  border-bottom: 1px solid var(--cs-line);
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cs-muted);
  vertical-align: middle;
}

.table > tbody > tr > td {
  border-top: 1px solid var(--cs-line-soft);
  padding: 12px;
  vertical-align: middle;
  color: var(--cs-ink-2);
}

.table > tbody > tr:first-child > td { border-top: 0; }

.table-striped > tbody > tr:nth-of-type(odd) { background: transparent; }

.table-hover > tbody > tr:hover { background: var(--cs-plane); }

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
  border: 0;
}

.table-bordered > thead > tr > th { border-bottom: 1px solid var(--cs-line); }
.table-bordered > tbody > tr > td { border-top: 1px solid var(--cs-line-soft); }

/* --------------------------------------------------------------- modals --- */

.modal-content {
  border: 0;
  border-radius: var(--cs-radius);
  box-shadow: 0 18px 50px rgba(16, 20, 40, 0.22);
}

.modal-header {
  border-bottom: 1px solid var(--cs-line-soft);
  padding: 18px 22px;
}

.modal-title { font-size: 18px; }

.modal-body { padding: 20px 22px; }

.modal-footer {
  border-top: 1px solid var(--cs-line-soft);
  padding: 16px 22px;
}

.modal-backdrop.in { opacity: 0.45; }

/* ------------------------------------------------- alerts, labels, misc --- */

.alert {
  border: 1px solid transparent;
  border-radius: var(--cs-radius-sm);
  padding: 14px 16px;
  font-size: 13px;
  box-shadow: none;
}

.alert-danger {
  background: #fdeeee;
  border-color: #f3cfcf;
  color: #8f2323;
}

.alert-success {
  background: #eaf7f1;
  border-color: #c6e8d8;
  color: #0b5c40;
}

.alert-info {
  background: #eaf5fd;
  border-color: #cfe6f7;
  color: #10496f;
}

.alert-warning {
  background: #fdf4e3;
  border-color: #f4e0b5;
  color: #7a5300;
}

.label {
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.label-primary { background: var(--cs-navy); }
.label-danger { background: var(--cs-red); }
.label-success { background: var(--cs-green); }
.label-warning { background: var(--cs-orange); color: var(--cs-navy); }

.info-box {
  background: var(--cs-surface);
  border: 1px solid var(--cs-line);
  border-radius: var(--cs-radius);
  box-shadow: var(--cs-shadow);
  min-height: 84px;
}

.info-box-icon {
  border-radius: var(--cs-radius) 0 0 var(--cs-radius);
  background: var(--cs-navy);
  color: #ffffff;
  height: 84px;
  line-height: 84px;
  width: 84px;
}

.info-box-content { padding: 16px 12px; margin-left: 84px; }

.info-box-text {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cs-muted);
}

.info-box-number { font-size: 24px; font-weight: 700; color: var(--cs-ink); }

/* The approvals banner on the dashboard, which predates this file. */
.approval-notification-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--cs-navy);
  color: #ffffff;
  border-radius: var(--cs-radius);
  padding: 14px 18px;
  margin: 0 0 6px;
}

.approval-notification-bar h4 {
  margin: 0;
  color: #ffffff;
  font-size: 16px;
}

/* ------------------------------------------- undoing the vendor hack ---- */

/*
 * public/vendor/adminlte/dist/css/AdminLTE.min.css - the VENDORED, minified
 * copy - has had white backgrounds forced into it with !important:
 *
 *   .wrapper                              background-color: #fff !important
 *   .main-header .navbar                  background-color: #fff !important
 *   .main-header .logo                    background-color: #fff !important
 *   .main-sidebar                         background:       #fff !important
 *   .sidebar-form, .sidebar-menu > li.header
 *                                         background-color: #fff !important
 *   .main-header .sidebar-toggle:hover    background-color: #eee !important
 *
 * That is why the chrome has been immovable: !important in an earlier sheet
 * beats any well-behaved rule regardless of order or specificity, so every
 * clean override above silently lost.
 *
 * These are the only !important declarations in this file, and each one exists
 * solely to cancel one of those. Editing the minified vendor file instead
 * would spread the customisation across two places and be lost the moment
 * those assets are re-published, so the fight is kept here where deleting one
 * <link> still reverts everything.
 */

.wrapper,
.skin-blue .wrapper {
  background-color: var(--cs-plane) !important;
}

.main-header .navbar,
.skin-blue .main-header .navbar {
  background-color: var(--cs-surface) !important;
}

.main-header .logo,
.skin-blue .main-header .logo,
.skin-blue .main-header .logo:hover {
  background-color: var(--cs-navy) !important;
  color: #ffffff !important;         /* 14.93:1 */
}

.main-sidebar,
.skin-blue .main-sidebar,
.left-side,
.skin-blue .left-side {
  background: var(--cs-navy) !important;
}

.sidebar-form,
.sidebar-menu > li.header,
.skin-blue .sidebar-menu > li.header {
  background-color: transparent !important;
  color: #b3b7da !important;          /* 7.61:1 on the navy */
}

.main-header .sidebar-toggle:hover,
.skin-blue .main-header .navbar .sidebar-toggle:hover {
  background-color: var(--cs-plane) !important;
}

/* A custom wrapper this template adds inside .content-wrapper, painted
   #e4f9ff. Cleared so the page plane shows through and cards read against it. */
.content-wrapper-inner {
  background: transparent;
  border: 0;
  min-height: 100%;
}

/* The vendored file also carries a blanket
 *
 *   a { color: #001084 !important }
 *
 * forcing every link in the admin to navy. On a navy sidebar that is navy on
 * navy - invisible. Body links are left as they are: navy on white measures
 * 14.93:1 and reads perfectly well, so there is nothing to gain from fighting
 * it there. Only the sidebar has to win, because only the sidebar changed
 * ground.
 *
 *   #dfe3f7 on #000F85 ... 11.70:1     white on #000F85 ... 14.93:1
 *   #b9c0e6 on #000F85 .... 8.35:1
 */

.skin-blue .sidebar-menu > li > a,
.skin-blue .sidebar a {
  color: #dfe3f7 !important;
}

.skin-blue .sidebar-menu > li:hover > a,
.skin-blue .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li.menu-open > a {
  color: #ffffff !important;
}

.skin-blue .treeview-menu > li > a {
  color: #b9c0e6 !important;
}

.skin-blue .treeview-menu > li.active > a,
.skin-blue .treeview-menu > li > a:hover {
  color: #ffffff !important;
}

/*
 * And a third global hack in the vendored file:
 *
 *   a:hover, a:active, a:focus { background-color: #eee !important }
 *
 * Every link in the admin gets a light grey hover. On the navy sidebar that is
 * a near-white block under white text - invisible. Cancelled for the sidebar
 * only; on white pages a grey hover is harmless, so body links keep it.
 *
 * rgba(255,255,255,0.10) over the navy resolves to about #1a2791, which keeps
 * white text at roughly 12:1.
 */

.skin-blue .sidebar a:hover,
.skin-blue .sidebar a:active,
.skin-blue .sidebar a:focus,
.skin-blue .sidebar-menu > li > a:hover,
.skin-blue .sidebar-menu > li:hover > a,
.skin-blue .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li.menu-open > a {
  background-color: rgba(255, 255, 255, 0.10) !important;
}

/* The section labels are not links and must not pick up a hover wash. */
.skin-blue .sidebar-menu > li.header:hover {
  background-color: transparent !important;
}

/* ------------------------------------------------------------- the logo -- */

/*
 * The brand lockup, /img/web/branding/full-reversed.svg - rainbow star plus a
 * WHITE wordmark, 283x59 with tight bounds.
 *
 * The shipped lockup's wordmark is navy #001084, which is invisible on a navy
 * panel, and the repo had no reversed asset - branding/full-white.png is the
 * same navy wordmark ON white, despite its name. Rather than lighten the panel
 * to suit the file, the file was reversed: full.svg's 13 navy wordmark paths
 * recoloured to white, star palette untouched. Its three fill="white" values
 * sit inside <mask> definitions and are not paint, so they were left alone.
 *
 * Sized to fit AdminLTE's fixed 230px logo box, which has overflow:hidden and
 * silently clipped the old wordmark once it was set in Booster:
 *   26px tall lockup = 125px wide, + 8px gap + the suffix + 24px padding.
 */

.main-header .logo,
.skin-blue .main-header .logo,
.skin-blue .main-header .logo:hover {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 12px;
  background-color: var(--cs-navy) !important;
  white-space: nowrap;
  text-align: left;
  overflow: hidden;
}

.main-header .logo .logo-lg {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0;                      /* drops the whitespace text nodes */
}

.main-header .logo .logo-lg img {
  height: 26px;
  width: auto;
  display: block;
}

/* Marks this as the admin, not the parent app. #b3b7da on the navy is 7.61:1. */
.main-header .logo .logo-suffix {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b3b7da;
  padding-top: 2px;
}

/* Collapsed to the 50px rail only the star span is left, so centre it. */
.main-header .logo .logo-mini { margin: 0; }
.main-header .logo .logo-mini img { width: 26px; height: 26px; display: block; }

.sidebar-collapse .main-header .logo,
.sidebar-mini.sidebar-collapse .main-header .logo {
  justify-content: center;
  gap: 0;
  padding: 0;
}

/* --------------------------------------------------------------- footer --- */

.main-footer {
  background: transparent;
  border-top: 1px solid var(--cs-line);
  color: var(--cs-muted);
  font-size: 12px;
  padding: 16px 22px;
}

/* ------------------------------------------------------------ small bits -- */

.pull-right-buttons > .btn + .btn { margin-left: 8px; }

hr { border-top: 1px solid var(--cs-line-soft); }

::selection { background: rgba(0, 157, 255, 0.22); }

@media (max-width: 767px) {
  .content-header { padding: 18px 14px 4px; }
  .content { padding: 10px 14px 24px; }
  .box-body { padding: 16px; }
}