/* Maplegrove Hosting brand for the Huraga client theme (FOSSBilling 0.8.8, Bootstrap 5.3); brand option 2 "Leaf",
   rules in docs/brand.md. Served from public/assets/maplegrove/ and linked after Huraga's own CSS by the generated
   layout overrides (frontendRelease/Themes/merge_themes.py), so a rule here wins over an equal one there.

   Colour: Night is the ink and the dark ground, Leaf / Deep Leaf belong to the logo, Cobalt is for the UI only (links,
   buttons, focus). The brand's Cobalt #4F7BFF is 3.7:1 on white, so text and buttons use the deeper #3B63E6 (5.1:1)
   and #4F7BFF draws the focus rings. Type: Sora for the interface, JetBrains Mono for labels, domains and code. */

/* ---- Fonts, served from this site (no third-party requests) -------------------------------------------------------
   Google Fonts' own files, variable weight, latin and latin-ext; SIL Open Font License 1.1 (fonts/OFL-*.txt). */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/sora-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/sora-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --mg-night: #0B1626;
  --mg-pine: #07201A;
  --mg-leaf: #4ACF44;
  --mg-deep-leaf: #1E8F2B;
  --mg-cobalt: #4F7BFF;
  --mg-cobalt-ui: #3B63E6;
  --mg-cobalt-ui-hover: #2F52C8;
  --mg-cobalt-ui-active: #2846AD;
  --mg-fog: #F3F5F8;
  --mg-line: #D9DFE7;
  --mg-slate: #7E90A8;
  --mg-slate-ink: #5B6B80;
  --mg-ink-2: #4A5A6E;
  --mg-font-sans: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mg-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* ---- Bootstrap variables, light ----------------------------------------------------------------------------- */
:root,
[data-bs-theme=light] {
  --mg-page-bg: #F3F5F8;
  --mg-nav-ink: #4A5A6E;
  --mg-link-strong: #3B63E6;
  --mg-shadow: 0 1px 2px rgba(11, 22, 38, .05);
  --mg-shadow-raised: 0 10px 28px rgba(11, 22, 38, .12);

  --bs-font-sans-serif: var(--mg-font-sans);
  --bs-font-monospace: var(--mg-font-mono);
  --bs-body-color: #0B1626;
  --bs-body-color-rgb: 11, 22, 38;
  --bs-emphasis-color: #0B1626;
  --bs-emphasis-color-rgb: 11, 22, 38;
  --bs-heading-color: #0B1626;
  --bs-secondary-color: #5B6B80;
  --bs-secondary-color-rgb: 91, 107, 128;
  --bs-tertiary-color: rgba(11, 22, 38, .5);
  --bs-tertiary-color-rgb: 11, 22, 38;
  --bs-secondary-bg: #E9EDF2;
  --bs-secondary-bg-rgb: 233, 237, 242;
  --bs-tertiary-bg: #F3F5F8;
  --bs-tertiary-bg-rgb: 243, 245, 248;

  --bs-primary: #3B63E6;
  --bs-primary-rgb: 59, 99, 230;
  --bs-primary-text-emphasis: #1F3A8F;
  --bs-primary-bg-subtle: #E6ECFF;
  --bs-primary-border-subtle: #B9C9FF;
  --bs-secondary: #4A5A6E;
  --bs-secondary-rgb: 74, 90, 110;
  --bs-secondary-text-emphasis: #2B3747;
  --bs-secondary-bg-subtle: #E9EDF2;
  --bs-secondary-border-subtle: #D9DFE7;
  --bs-success: #1A7F26;
  --bs-success-rgb: 26, 127, 38;
  --bs-success-text-emphasis: #0F4D17;
  --bs-success-bg-subtle: #E3F6E1;
  --bs-success-border-subtle: #A9DFA6;

  --bs-link-color: #3B63E6;
  --bs-link-color-rgb: 59, 99, 230;
  --bs-link-hover-color: #2F52C8;
  --bs-link-hover-color-rgb: 47, 82, 200;
  --bs-code-color: #1A7F26;
  --bs-border-color: #D9DFE7;
  --bs-border-color-translucent: rgba(11, 22, 38, .12);
  --bs-focus-ring-color: rgba(79, 123, 255, .35);

  --bs-border-radius: .5rem;
  --bs-border-radius-sm: .375rem;
  --bs-border-radius-lg: .75rem;
  --bs-border-radius-xl: 1rem;
}

/* ---- Bootstrap variables, dark: Night page, slightly lighter surfaces ------------------------------------------ */
[data-bs-theme=dark] {
  --mg-page-bg: #0B1626;
  --mg-nav-ink: #9FB0C4;
  --mg-link-strong: #7D9DFF;
  --mg-shadow: none;
  --mg-shadow-raised: 0 10px 28px rgba(0, 0, 0, .45);

  --bs-body-bg: #0F1D31;
  --bs-body-bg-rgb: 15, 29, 49;
  --bs-body-color: #E6EBF2;
  --bs-body-color-rgb: 230, 235, 242;
  --bs-emphasis-color: #FFFFFF;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-heading-color: #F4F7FB;
  --bs-secondary-color: #9FB0C4;
  --bs-secondary-color-rgb: 159, 176, 196;
  --bs-tertiary-color: rgba(230, 235, 242, .5);
  --bs-tertiary-color-rgb: 230, 235, 242;
  --bs-secondary-bg: #182A44;
  --bs-secondary-bg-rgb: 24, 42, 68;
  --bs-tertiary-bg: #13233A;
  --bs-tertiary-bg-rgb: 19, 35, 58;

  --bs-primary-text-emphasis: #A9BEFF;
  --bs-primary-bg-subtle: #14244A;
  --bs-primary-border-subtle: #2A4290;
  /* secondary as text (Huraga's captions, .text-secondary) needs a light slate here; badges keep a dark one, below */
  --bs-secondary: #8193AA;
  --bs-secondary-rgb: 129, 147, 170;
  --bs-secondary-text-emphasis: #C9D3E0;
  --bs-secondary-bg-subtle: #13233A;
  --bs-secondary-border-subtle: #22344D;
  --bs-success-text-emphasis: #7BE077;
  --bs-success-bg-subtle: #0E2A14;
  --bs-success-border-subtle: #1D5A26;

  --bs-link-color: #7D9DFF;
  --bs-link-color-rgb: 125, 157, 255;
  --bs-link-hover-color: #A9BEFF;
  --bs-link-hover-color-rgb: 169, 190, 255;
  --bs-code-color: #7BE077;
  --bs-border-color: #22344D;
  --bs-border-color-translucent: rgba(255, 255, 255, .1);
  --bs-focus-ring-color: rgba(79, 123, 255, .5);
}

/* ---- Type ------------------------------------------------------------------------------------------------------ */
body {
  background-color: var(--mg-page-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 600;
  letter-spacing: -0.015em;
}

a {
  text-underline-offset: .18em;
}

::selection {
  background-color: rgba(74, 207, 68, .32);
}

code, kbd, pre, samp {
  font-family: var(--mg-font-mono);
}

/* labels in JetBrains Mono */
table > thead > tr > th {
  font-family: var(--mg-font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--bs-secondary-color);
}

.breadcrumb {
  --bs-breadcrumb-divider-color: var(--mg-slate);
  --bs-breadcrumb-item-active-color: var(--bs-secondary-color);
  font-family: var(--mg-font-mono);
  font-size: .8125rem;
  letter-spacing: .02em;
}

.breadcrumb a {
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

/* ---- Header ---------------------------------------------------------------------------------------------------- */
/* The header sits on the page itself: the logo's knocked-out traces then show the same ground as around it. */
.navbar {
  background-color: transparent;
}

.navbar-brand {
  min-height: 56px;
}

.navbar-brand img {
  height: 56px;
}

/* The logo stays on phones too (Huraga swaps it for the company name below 576 px); 40 px tall is about 160 px wide. */
@media (max-width: 575.98px) {
  [data-bs-theme=light] .navbar-brand img.hide-theme-dark.d-none,
  [data-bs-theme=dark] .navbar-brand img.hide-theme-light.d-none {
    display: block !important;
    height: 40px;
  }

  .navbar-brand > span.d-sm-none {
    display: none !important;
  }

  .navbar-brand {
    min-height: 40px;
  }
}

.navbar-nav .nav-link {
  font-weight: 500;
}

[data-bs-theme=dark] .nav-link:hover,
[data-bs-theme=dark] .nav-link.active,
[data-bs-theme=dark] .offcanvas-item.active > .nav-link {
  color: var(--mg-link-strong) !important;
}

[data-bs-theme=dark] .nav-pills .nav-link.active {
  color: var(--bs-nav-pills-link-active-color) !important;
}

.nav-link:focus-visible,
.navbar-toggler:focus {
  box-shadow: 0 0 0 .25rem rgba(79, 123, 255, .35);
}

/* ---- Sidebar: rounded items, the current page as a raised pill ------------------------------------------------- */
#sidebarMenu .nav {
  gap: 2px;
}

#sidebarMenu .offcanvas-item,
#sidebarMenu .offcanvas-item:first-child {
  border: 0;
  border-radius: .5rem;
}

#sidebarMenu .offcanvas-item > .nav-link {
  padding: .55rem .75rem;
  border-radius: .5rem;
  color: var(--mg-nav-ink);
  font-weight: 500;
}

#sidebarMenu .offcanvas-item:hover {
  background: rgba(var(--bs-emphasis-color-rgb), .05);
}

#sidebarMenu .offcanvas-item.active {
  background: var(--bs-body-bg);
  box-shadow: inset 0 0 0 1px var(--bs-border-color), var(--mg-shadow);
}

#sidebarMenu .offcanvas-item.active > .nav-link {
  color: var(--mg-link-strong) !important;
  font-weight: 600;
}

/* ---- Surfaces -------------------------------------------------------------------------------------------------- */
.card {
  --bs-card-border-color: var(--bs-border-color);
  --bs-card-border-radius: var(--bs-border-radius-lg);
  --bs-card-inner-border-radius: calc(var(--bs-border-radius-lg) - 1px);
  box-shadow: var(--mg-shadow);
}

.card-header {
  background-color: transparent;
}

.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6 {
  font-weight: 600;
}

.dropdown-menu {
  --bs-dropdown-border-color: var(--bs-border-color);
  --bs-dropdown-border-radius: var(--bs-border-radius-lg);
  --bs-dropdown-box-shadow: var(--mg-shadow-raised);
  --bs-dropdown-link-active-bg: #3B63E6;
  box-shadow: var(--bs-dropdown-box-shadow);
}

.modal {
  --bs-modal-border-radius: var(--bs-border-radius-xl);
  --bs-modal-inner-border-radius: calc(var(--bs-border-radius-xl) - 1px);
}

.list-group {
  --bs-list-group-active-bg: #3B63E6;
  --bs-list-group-active-border-color: #3B63E6;
}

.table {
  --bs-table-hover-bg: rgba(var(--bs-primary-rgb), .04);
}

/* Sora is wider than the system font: a step smaller in tables on phones, so they need less sideways scrolling */
@media (max-width: 575.98px) {
  .table {
    font-size: .875rem;
  }
}

/* ---- Buttons --------------------------------------------------------------------------------------------------- */
.btn {
  --bs-btn-font-weight: 500;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #3B63E6;
  --bs-btn-border-color: #3B63E6;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #2F52C8;
  --bs-btn-hover-border-color: #2F52C8;
  --bs-btn-focus-shadow-rgb: 79, 123, 255;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #2846AD;
  --bs-btn-active-border-color: #2846AD;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #3B63E6;
  --bs-btn-disabled-border-color: #3B63E6;
}

.btn-outline-primary {
  --bs-btn-color: var(--mg-link-strong);
  --bs-btn-border-color: var(--mg-link-strong);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #3B63E6;
  --bs-btn-hover-border-color: #3B63E6;
  --bs-btn-focus-shadow-rgb: 79, 123, 255;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #2F52C8;
  --bs-btn-active-border-color: #2F52C8;
  --bs-btn-disabled-color: var(--mg-link-strong);
  --bs-btn-disabled-border-color: var(--mg-link-strong);
}

.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: #1A7F26;
  --bs-btn-border-color: #1A7F26;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #166C20;
  --bs-btn-hover-border-color: #166C20;
  --bs-btn-focus-shadow-rgb: 74, 207, 68;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #135C1B;
  --bs-btn-active-border-color: #135C1B;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #1A7F26;
  --bs-btn-disabled-border-color: #1A7F26;
}

.btn-outline-success {
  --bs-btn-color: #1A7F26;
  --bs-btn-border-color: #1A7F26;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #1A7F26;
  --bs-btn-hover-border-color: #1A7F26;
  --bs-btn-focus-shadow-rgb: 74, 207, 68;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #166C20;
  --bs-btn-active-border-color: #166C20;
  --bs-btn-disabled-color: #1A7F26;
  --bs-btn-disabled-border-color: #1A7F26;
}

[data-bs-theme=dark] .btn-outline-success {
  --bs-btn-color: #4ACF44;
  --bs-btn-border-color: #4ACF44;
  --bs-btn-disabled-color: #4ACF44;
  --bs-btn-disabled-border-color: #4ACF44;
}

.btn-secondary {
  --bs-btn-bg: #4A5A6E;
  --bs-btn-border-color: #4A5A6E;
  --bs-btn-hover-bg: #3D4B5C;
  --bs-btn-hover-border-color: #3D4B5C;
  --bs-btn-active-bg: #33404F;
  --bs-btn-active-border-color: #33404F;
  --bs-btn-disabled-bg: #4A5A6E;
  --bs-btn-disabled-border-color: #4A5A6E;
}

.btn-dark {
  --bs-btn-bg: #0B1626;
  --bs-btn-border-color: #0B1626;
  --bs-btn-hover-bg: #1A2A40;
  --bs-btn-hover-border-color: #1A2A40;
  --bs-btn-active-bg: #22344D;
  --bs-btn-active-border-color: #22344D;
  --bs-btn-disabled-bg: #0B1626;
  --bs-btn-disabled-border-color: #0B1626;
}

/* on a dark page a Night button would vanish: a raised navy one instead */
[data-bs-theme=dark] .btn-dark {
  --bs-btn-bg: #22344D;
  --bs-btn-border-color: #2C4262;
  --bs-btn-hover-bg: #2C4262;
  --bs-btn-hover-border-color: #3A5379;
  --bs-btn-active-bg: #3A5379;
  --bs-btn-active-border-color: #3A5379;
  --bs-btn-disabled-bg: #22344D;
  --bs-btn-disabled-border-color: #2C4262;
}

.btn-outline-secondary {
  --bs-btn-color: var(--mg-nav-ink);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-color: var(--bs-emphasis-color);
  --bs-btn-hover-bg: rgba(var(--bs-emphasis-color-rgb), .05);
  --bs-btn-hover-border-color: var(--mg-slate);
  --bs-btn-active-color: var(--bs-emphasis-color);
  --bs-btn-active-bg: rgba(var(--bs-emphasis-color-rgb), .08);
  --bs-btn-active-border-color: var(--mg-slate);
  --bs-btn-disabled-color: var(--mg-nav-ink);
  --bs-btn-disabled-border-color: var(--bs-border-color);
}

.btn-close {
  --bs-btn-close-focus-shadow: 0 0 0 .25rem rgba(79, 123, 255, .35);
}

/* ---- Forms ----------------------------------------------------------------------------------------------------- */
.form-label {
  font-weight: 500;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.focus .ts-control {
  border-color: #4F7BFF;
  box-shadow: 0 0 0 .25rem rgba(79, 123, 255, .25);
}

.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
  background-color: #3B63E6;
  border-color: #3B63E6;
}

.form-switch .form-check-input:focus {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23a7bdff'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.form-range::-webkit-slider-thumb {
  background-color: #3B63E6;
}

.form-range::-moz-range-thumb {
  background-color: #3B63E6;
}

.ts-wrapper.multi .ts-control > div.active {
  background: #3B63E6;
}

/* ---- Navigation components ------------------------------------------------------------------------------------- */
.nav-pills {
  --bs-nav-pills-link-active-bg: #3B63E6;
  --bs-nav-pills-border-radius: var(--bs-border-radius);
}

.pagination {
  --bs-pagination-active-bg: #3B63E6;
  --bs-pagination-active-border-color: #3B63E6;
  --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(79, 123, 255, .25);
}

.progress,
.progress-stacked {
  --bs-progress-bar-bg: #3B63E6;
}

.accordion {
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(79, 123, 255, .25);
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231F3A8F' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

[data-bs-theme=dark] .accordion-button::after {
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23A9BEFF' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* ---- Text, alerts and badges ----------------------------------------------------------------------------------- */
/* Huraga colours alert text with the plain theme colour (the showcase is an info alert); the emphasis shades read
   better on the tinted background, in both modes. */
.alert-info {
  --bs-alert-color: var(--bs-primary-text-emphasis);
}

.alert-danger {
  --bs-alert-color: var(--bs-danger-text-emphasis);
}

.alert-warning {
  --bs-alert-color: var(--bs-warning-text-emphasis);
}

/* Huraga prints every coloured badge in white; yellow and cyan need dark text to stay readable. */
.badge.bg-warning, .badge.text-bg-warning,
.badge.bg-info, .badge.text-bg-info,
.badge.bg-light, .badge.text-bg-light {
  color: #0B1626 !important;
}

[data-bs-theme=dark] .badge.bg-secondary,
[data-bs-theme=dark] .badge.text-bg-secondary {
  background-color: #4A5A6E !important;
}

[data-bs-theme=dark] .text-primary {
  color: #7D9DFF !important;
}

[data-bs-theme=dark] .text-success {
  color: #4ACF44 !important;
}

/* ---- Hosting Control Panel (module Hostingpanel): domains and labels in JetBrains Mono -------------------------- */
.hp-domain {
  font-family: var(--mg-font-mono);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.hp-group-title,
.hp-stat-label {
  font-family: var(--mg-font-mono);
  font-weight: 500;
  letter-spacing: .08em;
}