/*
 * Plugmind Calm for WHMCS: the look.
 *
 * Twenty-One's CSS is Bootstrap 4.5.3 compiled with fixed colours (#336699 and greys), and there's no source to rebuild
 * it from. So this file re-points the parts people see at the --calm-* variables below, and gives them Calm's shape:
 * Inter, soft cards, pill navigation, a welcome on a wash of the accent. The Plugmind Calm addon prints the chosen
 * colours as the same variables after this file, so the defaults here only show without the addon.
 * Your own changes go in css/custom.css, which loads after this.
 */

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-latin.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Set by the Plugmind Calm addon */
    --calm-accent: #2f6fed;
    --calm-accent-text: #ffffff;
    --calm-accent-hover: #2961d0;
    --calm-accent-ink: #2f6fed;      /* the accent, darkened if needed so it reads as text on white */
    --calm-dark: #1b2433;
    --calm-dark-text: #ffffff;

    /* The calm base (as Calm on SupportPal) */
    --calm-root: 15px;               /* the text size everything is measured from; the reading panel scales it */
    --calm-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --calm-bg: #f6f7fb;
    --calm-surface: #ffffff;
    --calm-surface-2: #f8f9fb;
    --calm-text: #161e28;
    --calm-muted: #5d6779;
    --calm-border: #e5e8ee;
    --calm-accent-soft: color-mix(in srgb, var(--calm-accent) 7%, var(--calm-surface));
    --calm-accent-tint: color-mix(in srgb, var(--calm-accent) 13%, var(--calm-surface));
    --calm-accent-line: color-mix(in srgb, var(--calm-accent) 40%, var(--calm-surface));
    --calm-focus: 0 0 0 3px color-mix(in srgb, var(--calm-accent) 35%, transparent);
    --calm-radius: 14px;
    --calm-radius-sm: 10px;
    --calm-shadow: 0 1px 2px rgb(16 24 40 / .04), 0 1px 3px rgb(16 24 40 / .06);
    --calm-shadow-lift: 0 4px 6px -2px rgb(16 24 40 / .05), 0 12px 24px -4px rgb(16 24 40 / .08);
}

/* WHMCS's Nexus cart reads these from the theme. html:root beats Twenty-One's own custom.css, which sets them on :root. */
html:root {
    font-size: var(--calm-root);
    --primary: var(--calm-accent);
    --primary-lifted: var(--calm-accent-hover);
    --primary-accented: var(--calm-accent-hover);
    --text: var(--calm-text);
    --text-muted: var(--calm-muted);
    --border: var(--calm-border);
    --bg: var(--calm-surface);
    --bg-muted: var(--calm-bg);
    --rounding-md: var(--calm-radius-sm);
    --rounding-lg: var(--calm-radius);
}

/* Page and type */
body, .primary-bg-color { background-color: var(--calm-bg); color: var(--calm-text); }
body, button, input, select, textarea, .tooltip, .popover { font-family: var(--calm-font); }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 { color: var(--calm-text); font-weight: 700; letter-spacing: -.015em; }
h1, .h1 { font-size: 1.85rem; }
h2, .h2 { font-size: 1.45rem; }
h3, .h3 { font-size: 1.2rem; }
a, .btn-link, .page-link { color: var(--calm-accent-ink); }
a:hover, .btn-link:hover, .page-link:hover { color: var(--calm-accent-hover); }
.text-primary { color: var(--calm-accent-ink) !important; }
.text-muted { color: var(--calm-muted) !important; }

/* Buttons: rounded, confident, never shouting */
.btn { border-radius: var(--calm-radius-sm); font-weight: 600; letter-spacing: -.005em; }
.btn-sm, .btn-group-sm > .btn { border-radius: 8px; }
.btn-primary,
.btn-primary.disabled, .btn-primary:disabled { background-color: var(--calm-accent); border-color: var(--calm-accent); color: var(--calm-accent-text); }
.btn-primary:hover, .btn-primary:focus, .btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle { background-color: var(--calm-accent-hover); border-color: var(--calm-accent-hover); color: var(--calm-accent-text); }
.btn-outline-primary,
.btn-outline-primary.disabled, .btn-outline-primary:disabled { color: var(--calm-accent-ink); border-color: var(--calm-accent-line); background: var(--calm-surface); }
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle { background-color: var(--calm-accent); border-color: var(--calm-accent); color: var(--calm-accent-text); }
.btn-default { background: var(--calm-surface); border: 1px solid var(--calm-border); color: var(--calm-text); }
.btn-default:hover { border-color: var(--calm-accent-line); color: var(--calm-accent-ink); background: var(--calm-surface); }

/* Things that show what's chosen */
.bg-primary, .badge-primary, .progress-bar { background-color: var(--calm-accent) !important; color: var(--calm-accent-text); }
.border-primary { border-color: var(--calm-accent) !important; }
.dropdown-item.active, .dropdown-item:active,
.nav-pills .nav-link.active, .nav-pills .show > .nav-link,
.list-group-item.active { background-color: var(--calm-accent); border-color: var(--calm-accent); color: var(--calm-accent-text); }
.page-item.active .page-link { background-color: var(--calm-accent); border-color: var(--calm-accent); color: var(--calm-accent-text); }
.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before { background-color: var(--calm-accent); border-color: var(--calm-accent); }
.custom-range::-webkit-slider-thumb { background-color: var(--calm-accent); }
.custom-range::-moz-range-thumb { background-color: var(--calm-accent); }
.dropdown-menu { border: 1px solid var(--calm-border); border-radius: var(--calm-radius-sm); box-shadow: var(--calm-shadow-lift); padding: .35rem; }
.dropdown-item { border-radius: 8px; padding: .5rem .75rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--calm-accent-soft); color: var(--calm-accent-ink); }

/* Status labels: soft pills rather than solid blocks */
.label, .badge { border-radius: 999px; font-weight: 600; letter-spacing: .01em; }
.label.status, .label.requestor-badge { padding: .25em .7em; }

/* Forms */
.form-control, .custom-select { border-color: var(--calm-border); border-radius: var(--calm-radius-sm); color: var(--calm-text); }
.form-control::placeholder { color: color-mix(in srgb, var(--calm-muted) 75%, transparent); }
.form-control:focus, .custom-select:focus { border-color: var(--calm-accent); box-shadow: var(--calm-focus); }
.input-group > .form-control:not(:last-child), .input-group > .custom-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* Keyboard focus: always visible (Twenty-One turns many outlines off) */
a:focus-visible, button:focus-visible, .btn:focus-visible, [tabindex]:focus-visible, summary:focus-visible,
.custom-control-input:focus-visible ~ .custom-control-label::before {
    outline: 2px solid var(--calm-accent-ink);
    outline-offset: 2px;
    box-shadow: none;
}

/* The sidebar menu (header.tpl, js/calm-nav.js): dark, as Calm on SupportPal. From 1200px it sits on the left, open
   (--calm-nav-open-w) or folded to icons (--calm-nav-folded-w); below that it slides in from the menu button. */
:root { --calm-nav-open-w: 15.5rem; --calm-nav-folded-w: 4.75rem; --calm-nav-w: var(--calm-nav-open-w); --calm-top-h: 4.25rem; }
html.calm-nav-folded { --calm-nav-w: var(--calm-nav-folded-w); }
.calm-nav {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    width: var(--calm-nav-open-w);
    background: var(--calm-dark);
    color: var(--calm-dark-text);
    --calm-nav-dim: color-mix(in srgb, var(--calm-dark-text) 72%, transparent);
    --calm-nav-hover: color-mix(in srgb, var(--calm-dark-text) 9%, transparent);
    --calm-nav-line: color-mix(in srgb, var(--calm-dark-text) 12%, transparent);
    transition: width .2s ease, transform .2s ease;
}
.calm-nav-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: var(--calm-top-h); padding: 0 1.1rem 0 1.25rem; }
.calm-nav-brand, .calm-nav-brand:hover { display: flex; align-items: center; min-width: 0; color: var(--calm-dark-text); text-decoration: none; }
.calm-nav .calm-wordmark { display: inline-flex; flex-wrap: wrap; max-width: 100%; color: var(--calm-dark-text); font-size: 1.05rem; line-height: 1.15; }
.calm-nav .calm-wordmark > span { white-space: nowrap; }
/* On the dark menu the accent is lightened, so a dark accent still reads */
.calm-nav .calm-wordmark-second { color: color-mix(in srgb, var(--calm-accent) 55%, #fff); }
.calm-nav .logo-img { max-height: 2.25rem; max-width: 100%; }
.calm-monogram { display: none; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; background: var(--calm-accent); color: var(--calm-accent-text); font-weight: 800; font-size: 1.15rem; text-transform: uppercase; }
.calm-nav-close { display: none; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 999px; background: transparent; color: var(--calm-nav-dim); font-size: 1.15rem; }
.calm-nav-close:hover { background: var(--calm-nav-hover); color: var(--calm-dark-text); }
.calm-nav-body { flex: 1; min-height: 0; overflow-y: auto; padding: .5rem .75rem; scrollbar-width: thin; }
.calm-nav-foot { padding: .6rem .75rem .9rem; border-top: 1px solid var(--calm-nav-line); }
.calm-nav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.calm-nav-link, .calm-nav-fold {
    display: flex;
    align-items: center;
    gap: .8rem;
    width: 100%;
    min-height: 2.75rem;
    padding: .55rem .8rem;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--calm-nav-dim);
    font: inherit;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.calm-nav-link:hover, .calm-nav-fold:hover, .calm-nav-item.is-open > .calm-nav-link { background: var(--calm-nav-hover); color: var(--calm-dark-text); text-decoration: none; }
.calm-nav-link.is-current, .calm-nav-link.is-current:hover { background: var(--calm-accent); color: var(--calm-accent-text); font-weight: 600; }
.calm-nav-icon { flex: none; width: 1.25rem; font-size: 1.05rem; text-align: center; }
.calm-nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calm-nav-badge { flex: none; min-width: 1.35rem; padding: .05rem .4rem; border-radius: 999px; background: var(--calm-accent); color: var(--calm-accent-text); font-size: .72rem; font-weight: 700; text-align: center; }
.calm-nav-link.is-current .calm-nav-badge { background: var(--calm-accent-text); color: var(--calm-accent-ink); }
.calm-nav-caret { flex: none; font-size: .75rem; opacity: .7; transition: transform .15s ease; }
.calm-nav-item.is-open > .calm-nav-link .calm-nav-caret { transform: rotate(180deg); }
.calm-nav-link:focus-visible, .calm-nav-fold:focus-visible, .calm-nav-sublink:focus-visible, .calm-nav-close:focus-visible, .calm-nav-brand:focus-visible {
    outline: 2px solid var(--calm-dark-text);
    outline-offset: 2px;
}
/* A group's items, inline under it */
.calm-nav-sub { display: none; list-style: none; margin: .15rem 0 .35rem; padding: 0 0 0 2.05rem; }
.calm-nav-item.is-open > .calm-nav-sub { display: grid; gap: .1rem; }
.calm-nav-sub-title { display: none; }
.calm-nav-sublink { display: block; padding: .45rem .75rem; border-radius: 10px; color: var(--calm-nav-dim); font-size: .925rem; text-decoration: none; }
.calm-nav-sublink:hover { background: var(--calm-nav-hover); color: var(--calm-dark-text); text-decoration: none; }
.calm-nav-sublink.is-current { color: var(--calm-dark-text); font-weight: 600; box-shadow: inset 2px 0 0 var(--calm-accent); border-radius: 0 10px 10px 0; }
.calm-nav-divider { height: 1px; margin: .3rem .75rem; background: var(--calm-nav-line); }
.calm-nav-fold .calm-nav-icon { transition: transform .2s ease; }
.calm-nav-backdrop { display: none; }

/* The top bar: white, beside the menu */
header.header.calm-top { position: sticky; top: 0; z-index: 1030; background: color-mix(in srgb, var(--calm-surface) 92%, transparent); backdrop-filter: saturate(1.4) blur(8px); box-shadow: 0 1px 0 var(--calm-border); }
.calm-top-inner { display: flex; align-items: center; gap: .75rem; min-height: var(--calm-top-h); padding: .6rem 1.5rem; }
.calm-top-brand { display: none; margin-right: auto; color: var(--calm-text); text-decoration: none; }
.calm-top-brand:hover { text-decoration: none; }
.calm-top-brand .logo-img { max-height: 2rem; }
.calm-top-search { position: relative; flex: 0 1 28rem; display: flex; align-items: center; }
.calm-top-search > i { position: absolute; left: .9rem; color: var(--calm-muted); pointer-events: none; }
.calm-top-search input { width: 100%; height: 2.6rem; padding: 0 1rem 0 2.4rem; border: 1px solid var(--calm-border); border-radius: 999px; background: var(--calm-surface-2); color: var(--calm-text); outline: 0; }
.calm-top-search input:focus { border-color: var(--calm-accent); box-shadow: var(--calm-focus); background: var(--calm-surface); }
.calm-top-tools { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.calm-tool {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.6rem; height: 2.6rem; padding: 0 .6rem;
    border: 1px solid var(--calm-border); border-radius: 999px;
    background: var(--calm-surface); color: var(--calm-text);
    font-size: 1rem; cursor: pointer; text-decoration: none;
}
.calm-tool:hover { border-color: var(--calm-accent-line); color: var(--calm-accent-ink); text-decoration: none; }
.calm-tool-sm { min-width: 2.2rem; height: 2.2rem; font-size: .85rem; }
.calm-tool-count { position: absolute; top: -.3rem; right: -.3rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; border-radius: 999px; background: var(--calm-accent); color: var(--calm-accent-text); font-size: .68rem; font-weight: 700; line-height: 1.15rem; text-align: center; }
#cartItemCount.calm-tool-count:empty, #cartItemCount.calm-tool-count[data-count="0"] { display: none; }
.calm-menu-button { display: none; }
.calm-account { display: flex; align-items: center; gap: .35rem; padding: .2rem .25rem .2rem .85rem; border: 1px solid var(--calm-border); border-radius: 999px; background: var(--calm-surface-2); }
.calm-account-name { display: inline-flex; align-items: center; gap: .45rem; max-width: 14rem; color: var(--calm-text); font-weight: 600; font-size: .9rem; text-decoration: none; }
.calm-account-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calm-account-name i { color: var(--calm-muted); }
.calm-account .calm-tool { border-color: transparent; background: transparent; }
.calm-account .calm-tool:hover { background: var(--calm-surface); border-color: var(--calm-border); }
/* Twenty-One's notifications pop-over */
.popover { border: 1px solid var(--calm-border); border-radius: var(--calm-radius-sm); box-shadow: var(--calm-shadow-lift); font-family: var(--calm-font); }

/* The wordmark: text in two parts, the second in the accent */
.calm-wordmark { font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; line-height: 1; color: var(--calm-text); }
.calm-wordmark-second { color: var(--calm-accent-ink); }

/* Wide screens: the menu on the left, open or folded; the page beside it */
@media (min-width: 1200px) {
    body { padding-left: var(--calm-nav-w); transition: padding-left .2s ease; }
    html.calm-nav-folded .calm-nav { width: var(--calm-nav-folded-w); }
    html.calm-nav-folded .calm-nav-head { justify-content: center; padding: 0; }
    html.calm-nav-folded .calm-nav .calm-wordmark, html.calm-nav-folded .calm-nav .logo-img { display: none; }
    html.calm-nav-folded .calm-monogram { display: inline-flex; }
    html.calm-nav-folded .calm-nav-body, html.calm-nav-folded .calm-nav-foot { padding-left: .6rem; padding-right: .6rem; }
    html.calm-nav-folded .calm-nav-link, html.calm-nav-folded .calm-nav-fold { justify-content: center; padding: .55rem 0; gap: 0; }
    html.calm-nav-folded .calm-nav-label, html.calm-nav-folded .calm-nav-caret { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    html.calm-nav-folded .calm-nav-link .calm-nav-badge { position: absolute; margin: -1.4rem -1.6rem 0 0; min-width: 1.1rem; padding: 0 .3rem; font-size: .65rem; }
    html.calm-nav-folded .calm-nav-link { position: relative; }
    html.calm-nav-folded .calm-nav-fold .calm-nav-icon { transform: rotate(180deg); }
    html.calm-nav-folded .calm-nav-item.is-open > .calm-nav-sub { display: none; }
    html.calm-nav-folded .calm-nav-item.is-open > .calm-nav-link:not(.is-current) { background: transparent; color: var(--calm-nav-dim); }
    /* A folded group's items, as a fly-out beside the menu (placed by js/calm-nav.js) */
    html.calm-nav-folded .calm-nav-item.is-flyout > .calm-nav-sub {
        position: fixed;
        z-index: 1060;
        display: grid;
        gap: .1rem;
        min-width: 14rem;
        margin: 0;
        padding: .5rem;
        border-radius: var(--calm-radius-sm);
        background: var(--calm-dark);
        box-shadow: 0 12px 32px rgb(10 14 20 / .35);
    }
    html.calm-nav-folded .calm-nav-item.is-flyout > .calm-nav-link { background: var(--calm-nav-hover); color: var(--calm-dark-text); }
    html.calm-nav-folded .calm-nav-sub-title { display: block; padding: .35rem .75rem .45rem; color: var(--calm-dark-text); font-weight: 700; font-size: .85rem; }
}

/* Phones and tablets: the menu slides in, the wordmark sits in the top bar */
@media (max-width: 1199.98px) {
    .calm-nav { transform: translateX(-100%); box-shadow: none; visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; width: min(18rem, 86vw); }
    html.calm-nav-open .calm-nav { transform: none; visibility: visible; box-shadow: 0 0 40px rgb(10 14 20 / .35); transition: transform .2s ease; }
    .calm-nav-close { display: inline-flex; align-items: center; justify-content: center; }
    .calm-nav-fold { display: none; }
    html.calm-nav-open .calm-nav-backdrop { display: block; position: fixed; inset: 0; z-index: 1035; border: 0; background: rgb(10 14 20 / .45); }
    .calm-menu-button { display: inline-flex; }
    .calm-top-brand { display: flex; }
    .calm-top-inner { padding: .5rem 1rem; }
}
@media (max-width: 767.98px) {
    .calm-top-search, .calm-account { display: none; }
    .calm-top-inner { gap: .5rem; padding: .5rem .75rem; }
    .calm-top-brand { flex: 1; min-width: 0; overflow: hidden; }
    .calm-top-brand .calm-wordmark { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.05rem; }
    .calm-top-tools { gap: .35rem; }
    .calm-tool { min-width: 2.35rem; height: 2.35rem; padding: 0 .45rem; }
}
@media (prefers-reduced-motion: reduce) {
    .calm-nav, body, .calm-nav-caret, .calm-nav-fold .calm-nav-icon { transition: none !important; }
}

/* Breadcrumb: quiet, and not on the homepage */
.master-breadcrumb, .master-breadcrumb .breadcrumb { background-color: transparent; }
.master-breadcrumb { border-bottom: 0; }
.master-breadcrumb .breadcrumb { padding: 1rem 0 0; margin: 0; font-size: .875rem; }
.master-breadcrumb .breadcrumb-item.active { color: var(--calm-muted); }
.calm-page-homepage .master-breadcrumb { display: none; }

/* Cards: soft corners and shadow */
.card, .primary-content .card, .mc-promo-manage, .mc-promo-login {
    border: 1px solid var(--calm-border);
    border-radius: var(--calm-radius);
    box-shadow: var(--calm-shadow);
}
.card-header:first-child { border-radius: calc(var(--calm-radius) - 1px) calc(var(--calm-radius) - 1px) 0 0; }
.card-footer:last-child { border-radius: 0 0 calc(var(--calm-radius) - 1px) calc(var(--calm-radius) - 1px); }
.card-header { background-color: var(--calm-surface); border-color: var(--calm-border); padding: .9rem 1.15rem; }
.card-header .card-title, .card-header h3 { font-size: 1rem; font-weight: 700; }
.card-header .card-title > i:first-child, .card-header h3 > i:first-child { color: var(--calm-accent-ink); margin-right: .35rem; }
.card-footer { background-color: var(--calm-surface-2); border-color: var(--calm-border); }
.list-group-item { border-color: var(--calm-border); }
.list-group-item-action:hover { background: var(--calm-accent-soft); }

/* Sidebar: the page you're on in the accent, not Twenty-One's grey */
.sidebar .card-header { border-bottom: 1px solid var(--calm-border); }
.sidebar .list-group-item { font-size: .925rem; overflow-wrap: anywhere; min-width: 0; }
/* Long items (recent tickets' subjects) shorten with "…" inside the card: the flex boxes around them must be allowed to shrink */
.sidebar .list-group, .sidebar .sidebar-menu-item-wrapper, .sidebar .sidebar-menu-item-label, .sidebar .recent-ticket { min-width: 0; max-width: 100%; }
.sidebar .sidebar-menu-item-label { flex: 1 1 auto; }
.sidebar .truncate { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; white-space: normal; overflow-wrap: anywhere; }
.sidebar .list-group-item.active, .sidebar .list-group-item.active:hover, .sidebar .list-group-item.active:focus {
    background-color: var(--calm-accent-soft);
    border-color: var(--calm-border);
    color: var(--calm-accent-ink);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--calm-accent);
}
.sidebar .list-group-item.active .badge { background-color: var(--calm-accent); color: var(--calm-accent-text); }

/* Skip link (header.tpl): hidden until it has keyboard focus */
.calm-skip { position: absolute; left: 1rem; top: -4rem; z-index: 1100; padding: .6rem 1rem; border-radius: var(--calm-radius-sm); background: var(--calm-accent); color: var(--calm-accent-text); font-weight: 600; }
.calm-skip:focus { top: 1rem; color: var(--calm-accent-text); }
section#main-body:focus { outline: none; }
section#main-body { padding-top: 1.75rem; padding-bottom: 3rem; }

/* Homepage welcome (includes/calm-hero.tpl): left aligned, on a soft wash of the accent */
.calm-hero {
    padding: 3.25rem 0 2.5rem;
    background:
        radial-gradient(60rem 26rem at 92% -20%, color-mix(in srgb, var(--calm-accent) 17%, transparent), transparent 70%),
        radial-gradient(40rem 20rem at 0% 120%, color-mix(in srgb, var(--calm-accent) 6%, transparent), transparent 70%),
        var(--calm-surface);
    border-bottom: 1px solid var(--calm-border);
}
.calm-eyebrow { margin: 0 0 .6rem; color: var(--calm-accent-ink); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.calm-greeting { margin: 0 0 .3rem; color: var(--calm-muted); font-size: 1.1rem; font-weight: 500; }
.calm-hero h1 { margin: 0; max-width: 40rem; font-size: clamp(1.9rem, 1.3rem + 2vw, 2.6rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; text-wrap: balance; }
.calm-lead { margin: .7rem 0 0; max-width: 40rem; color: var(--calm-muted); font-size: 1.12rem; line-height: 1.55; text-wrap: pretty; }
.calm-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    max-width: 52rem;
    margin-top: 1.75rem;
    padding: .4rem .4rem .4rem 1.1rem;
    border: 1px solid var(--calm-border);
    border-radius: var(--calm-radius);
    background: var(--calm-surface);
    box-shadow: var(--calm-shadow-lift);
}
.calm-search:focus-within { border-color: var(--calm-accent); box-shadow: var(--calm-focus), var(--calm-shadow-lift); }
.calm-search-icon { color: var(--calm-muted); }
.calm-search input { flex: 1; min-width: 0; height: 2.75rem; border: 0; outline: 0; background: transparent; color: var(--calm-text); font-size: 1.05rem; }
.calm-search input::placeholder { color: color-mix(in srgb, var(--calm-muted) 80%, transparent); }
.calm-search-button { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.9rem; height: 2.9rem; border: 0; border-radius: var(--calm-radius-sm); background: var(--calm-accent); color: var(--calm-accent-text); font-size: 1.05rem; cursor: pointer; }
.calm-search-button:hover { background: var(--calm-accent-hover); }

/* Domain search below the welcome: one card, not a heavy band */
.home-domain-search.bg-white { background: transparent !important; }
.home-domain-search .container > .p-5 {
    margin-top: 1.75rem;
    padding: 1.5rem 1.75rem !important;
    border: 1px solid var(--calm-border);
    border-radius: var(--calm-radius);
    background: var(--calm-surface);
    box-shadow: var(--calm-shadow);
}
.home-domain-search h2 { text-align: left !important; font-size: 1.2rem; margin-bottom: 1rem; }
.home-domain-search .input-group-wrapper .input-group { border-radius: var(--calm-radius-sm); }
.home-domain-search textarea, .home-domain-search .form-control { border-radius: var(--calm-radius-sm); }

/* Help cards (homepage.tpl): an icon tile on top, the first card the main action */
.calm-cards { margin: 0 0 1.5rem; }
.calm-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
@media (min-width: 992px) { .calm-cards .calm-card-grid { grid-template-columns: repeat(3, 1fr); } }
.calm-help-card {
    display: grid;
    gap: .9rem;
    align-content: start;
    padding: 1.25rem 1.35rem 1.35rem;
    border: 1px solid var(--calm-border);
    border-radius: var(--calm-radius);
    background: var(--calm-surface);
    box-shadow: var(--calm-shadow);
    color: var(--calm-text);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.calm-help-card:hover { border-color: var(--calm-accent-line); box-shadow: var(--calm-shadow-lift); transform: translateY(-2px); color: var(--calm-text); text-decoration: none; }
.calm-help-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 12px; background: var(--calm-accent-tint); color: var(--calm-accent-ink); font-size: 1.15rem; }
.calm-help-text { display: grid; gap: .25rem; }
.calm-help-text strong { font-size: 1.02rem; font-weight: 700; }
.calm-help-text small { color: var(--calm-muted); font-size: .9rem; line-height: 1.45; }
.calm-help-card.is-primary { background: var(--calm-accent-soft); border-color: var(--calm-accent-line); }
.calm-help-card.is-primary .calm-help-icon { border-radius: 999px; background: var(--calm-accent); color: var(--calm-accent-text); }

/* Popular help articles (homepage.tpl) */
.calm-articles { margin: 0 0 1.5rem; padding: 1.35rem 1.5rem .6rem; }
.calm-articles-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.calm-articles-head h2 { margin: 0; font-size: 1.15rem; }
.calm-articles-head a { font-weight: 600; font-size: .9rem; }
.calm-article-list { list-style: none; margin: 0; padding: 0; }
.calm-article-list li + li { border-top: 1px solid var(--calm-border); }
.calm-article-list a { display: flex; gap: .9rem; align-items: flex-start; padding: .85rem 0; color: var(--calm-text); text-decoration: none; }
.calm-article-list a:hover strong { color: var(--calm-accent-ink); }
.calm-article-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 10px; }
.calm-tone-1 { background: color-mix(in srgb, var(--calm-accent) 12%, #fff); color: var(--calm-accent-ink); }
.calm-tone-2 { background: #e8effd; color: #2f5bd3; }
.calm-tone-3 { background: #e3f5ea; color: #1f7a45; }
.calm-tone-4 { background: #efe9fd; color: #6b3fd6; }
.calm-tone-5 { background: #fdeee6; color: #b4531f; }
.calm-article-text { display: grid; gap: .15rem; }
.calm-article-text strong { font-weight: 600; }
.calm-article-text small { color: var(--calm-muted); font-size: .88rem; }

/* Product groups (homepage.tpl) */
.calm-products { margin: 2rem 0; }
.calm-section-title { margin: 0 0 1rem; font-size: 1.2rem; }
/* A product group: a whole-card link with an icon, its tagline, the lowest price and where it goes */
.calm-product { display: flex; flex-direction: column; gap: .35rem; padding: 1.35rem; border: 1px solid var(--calm-border); border-radius: var(--calm-radius); background: var(--calm-surface); box-shadow: var(--calm-shadow); color: var(--calm-text); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.calm-product:hover, .calm-product:focus-visible { border-color: var(--calm-accent-line); box-shadow: var(--calm-shadow-lift); color: var(--calm-text); text-decoration: none; transform: translateY(-2px); }
.calm-product-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; margin-bottom: .45rem; border-radius: 12px; background: var(--calm-accent-tint); color: var(--calm-accent-ink); font-size: 1.15rem; }
.calm-product-name { font-size: 1.1rem; font-weight: 700; }
.calm-product-text { color: var(--calm-muted); font-size: .92rem; line-height: 1.45; }
.calm-product-price { color: var(--calm-muted); font-size: .92rem; }
.calm-product-price strong { color: var(--calm-text); font-size: 1.05rem; }
.calm-product-go { margin-top: auto; padding-top: .6rem; color: var(--calm-accent-ink); font-weight: 600; font-size: .92rem; }
.calm-product:hover .calm-product-go i { transform: translateX(2px); }
.calm-product-go i { transition: transform .15s ease; }

/* Dashboard (clientareahome.tpl): white tiles with the number in front, no coloured underlines */
.tiles { display: block; }
.tiles .row { margin: 0 -.5rem; }
.tiles .row > [class*="col-"] { padding: .5rem; }
.tiles .tile {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    height: 100%;
    padding: 1.15rem 1.25rem;
    border: 1px solid var(--calm-border) !important;
    border-radius: var(--calm-radius);
    background: var(--calm-surface);
    box-shadow: var(--calm-shadow);
    color: var(--calm-text);
}
.tiles .tile:hover { border-color: var(--calm-accent-line) !important; box-shadow: var(--calm-shadow-lift); text-decoration: none; }
.tiles .tile i { position: static; grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 12px; background: var(--calm-accent-tint); color: var(--calm-accent-ink); font-size: 1.1rem; opacity: 1; }
.tiles .tile .stat { margin: 0; font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--calm-text); }
.tiles .tile .title { color: var(--calm-muted); font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.tiles .tile .highlight { display: none; }
.client-home-cards .card { margin-bottom: 1rem; }
.client-home-cards .card .card-header .btn { border-radius: 999px; }
.client-home-cards .card .list-group-item { padding: .8rem 1.15rem; }
div[class*="card-accent-"] { border-top-width: 1px !important; }

/* Ticket view (viewticket.tpl): calmer headers, staff replies marked in the accent */
.card-body:has(> .ticket-reply) { border: 0; padding-top: .4rem; padding-bottom: .4rem; }
.card-body:has(> .ticket-reply):last-child { padding-bottom: 1.35rem; }
.ticket-reply { border: 1px solid var(--calm-border); border-radius: var(--calm-radius-sm); overflow: hidden; background: var(--calm-surface); }
.ticket-reply.staff { border-color: var(--calm-accent-line); }
.ticket-reply .posted-by { margin: 0; padding: .7rem 1.1rem; background: var(--calm-surface-2); border-bottom: 1px solid var(--calm-border); color: var(--calm-muted); font-size: .875rem; }
.ticket-reply .posted-by-name { color: var(--calm-text); font-weight: 600; }
.ticket-reply.staff .posted-by { background: var(--calm-accent-soft); box-shadow: inset 3px 0 0 var(--calm-accent); }
.ticket-reply .message { line-height: 1.6; }
/* Rating a staff reply: five star links; hovering or focusing one lights it and the ones before it */
.calm-rating { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .35rem .75rem; margin: 1rem 0 0; color: var(--calm-muted); font-size: .9rem; }
.calm-stars { display: inline-flex; gap: .1rem; }
.calm-star { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 8px; color: var(--calm-muted); font-size: 1.15rem; text-decoration: none; }
.calm-stars:hover .calm-star, .calm-stars:focus-within .calm-star { color: #e3a008; }
.calm-stars .calm-star:hover ~ .calm-star, .calm-stars .calm-star:focus ~ .calm-star { color: var(--calm-muted); }
.calm-stars:hover .calm-star i, .calm-stars:focus-within .calm-star i { font-weight: 900; }
.calm-stars .calm-star:hover ~ .calm-star i, .calm-stars .calm-star:focus ~ .calm-star i { font-weight: 400; }
.calm-rating.is-done .calm-stars { color: #e3a008; gap: .2rem; }
.view-ticket .card-body { padding: 1.25rem 1.35rem; }

/* Sign-in (login.tpl): a welcome panel beside the form, as Calm's sign-in on SupportPal */
.calm-page-login .master-breadcrumb { display: none; }
.calm-auth-alert { max-width: 64rem; margin: 0 auto 1rem; }
.calm-auth {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    max-width: 64rem;
    margin: .5rem auto 1rem;
    border: 1px solid var(--calm-border);
    border-radius: 20px;
    overflow: hidden;
    background: var(--calm-surface);
    box-shadow: var(--calm-shadow-lift);
}
@media (min-width: 992px) { .calm-auth { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 34rem; } }
.calm-auth-welcome {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    padding: 2.5rem 2.5rem 2.25rem;
    background:
        radial-gradient(40rem 22rem at 100% 0%, color-mix(in srgb, var(--calm-accent) 34%, transparent), transparent 65%),
        var(--calm-dark);
    color: var(--calm-dark-text);
}
.calm-auth-eyebrow { margin: 0 0 1rem; color: color-mix(in srgb, var(--calm-dark-text) 75%, transparent); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.calm-auth-welcome h2 { margin: 0; max-width: 18ch; color: var(--calm-dark-text); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
.calm-auth-text { margin: .85rem 0 0; max-width: 34rem; color: color-mix(in srgb, var(--calm-dark-text) 85%, transparent); font-size: 1.02rem; line-height: 1.55; }
.calm-auth-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
/* On narrower screens the form comes first, so nobody scrolls past the welcome to sign in */
@media (max-width: 991.98px) { .calm-auth-side { order: -1; } .calm-auth-welcome { gap: 1.25rem; } }
.calm-auth-features li { display: grid; gap: .3rem; align-content: start; }
.calm-auth-feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin-bottom: .35rem; border: 1px solid color-mix(in srgb, var(--calm-dark-text) 16%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--calm-dark-text) 8%, transparent); font-size: 1.05rem; }
.calm-auth-features strong { font-size: .95rem; }
.calm-auth-features small { color: color-mix(in srgb, var(--calm-dark-text) 72%, transparent); font-size: .85rem; line-height: 1.4; }
.calm-auth-side { display: grid; gap: 1.25rem; align-content: center; padding: 2.5rem; }
.calm-auth-form { display: grid; gap: 1rem; }
.calm-auth-form .form-group { margin: 0; }
.calm-auth-form label { margin-bottom: .35rem; font-weight: 600; }
.calm-auth-head h1 { margin: 0; font-size: 1.65rem; font-weight: 800; letter-spacing: -.02em; }
.calm-auth-head p { margin: .4rem 0 0; color: var(--calm-muted); }
.calm-field { position: relative; display: flex; align-items: center; flex-wrap: nowrap; }
.calm-field > i { position: absolute; left: .95rem; z-index: 4; color: var(--calm-muted); pointer-events: none; }
.calm-field .form-control { height: 3rem; padding-left: 2.6rem; border-radius: var(--calm-radius-sm) !important; }
.calm-field.input-group .form-control { padding-right: 3rem; }
.calm-field-button { position: absolute; right: .35rem; z-index: 4; display: inline-flex; align-items: center; justify-content: center; width: 2.35rem; height: 2.35rem; border: 0; border-radius: 8px; background: transparent; color: var(--calm-muted); cursor: pointer; }
.calm-field-button:hover { background: var(--calm-surface-2); color: var(--calm-text); }
.calm-auth-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.calm-auth-remember { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-weight: 500 !important; cursor: pointer; }
.calm-auth-remember input { width: 1.05rem; height: 1.05rem; accent-color: var(--calm-accent); }
.calm-auth-row a { font-weight: 600; }
.calm-auth-submit { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; height: 3.1rem; font-size: 1.02rem; box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--calm-accent) 60%, transparent); }
.calm-auth-register { margin: 0; text-align: center; color: var(--calm-muted); }
.calm-auth-register a { font-weight: 600; }
.calm-auth-help { display: flex; gap: .85rem; align-items: flex-start; padding: 1rem 1.15rem; border: 1px solid var(--calm-border); border-radius: var(--calm-radius-sm); background: var(--calm-surface-2); }
.calm-auth-help > i { margin-top: .15rem; color: var(--calm-accent-ink); font-size: 1.1rem; }
.calm-auth-help strong { display: block; }
.calm-auth-help p { margin: .2rem 0 0; color: var(--calm-muted); font-size: .92rem; line-height: 1.5; }
@media (max-width: 575.98px) { .calm-auth-welcome, .calm-auth-side { padding: 1.75rem 1.35rem; } }

/* A page's own heading, above its content (ticket submission) */
.calm-page-head { margin: 0 0 1.25rem; }
.calm-page-head h1 { margin: 0; font-size: 1.65rem; font-weight: 800; letter-spacing: -.02em; }
.calm-page-head p { margin: .35rem 0 0; max-width: 46rem; color: var(--calm-muted); }

/* Opening a ticket, step one (supportticketsubmit-stepone.tpl): a card per department */
.calm-departments { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: .9rem; margin: 0; padding: 0; list-style: none; }
.calm-department {
    display: flex; gap: 1rem; align-items: center; height: 100%;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--calm-border); border-radius: var(--calm-radius);
    background: var(--calm-surface); box-shadow: var(--calm-shadow);
    color: var(--calm-text); text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.calm-department:hover { border-color: var(--calm-accent-line); box-shadow: var(--calm-shadow-lift); color: var(--calm-text); text-decoration: none; }
.calm-department:hover strong, .calm-department:hover .calm-department-go { color: var(--calm-accent-ink); }
.calm-department .calm-help-icon { flex: none; }
.calm-department-text { flex: 1; display: grid; gap: .2rem; min-width: 0; }
.calm-department-text strong { font-size: 1.02rem; }
.calm-department-text small { color: var(--calm-muted); font-size: .9rem; line-height: 1.45; }
.calm-department-go { flex: none; color: var(--calm-muted); }

/* Opening a ticket, step two (supportticketsubmit-steptwo.tpl): fields use the card's width; the helpful note sits above the message */
.calm-ticket-card .row > .form-group[class*="col-"], #ticketReplyContainer .row > .form-group[class*="col-"] { flex: 1 1 15rem; max-width: none; }
.calm-helpful { margin: 0 0 1rem; padding: .9rem 1.1rem; border: 1px solid var(--calm-accent-line); border-radius: var(--calm-radius-sm); background: var(--calm-accent-soft); }
.calm-helpful strong { display: block; margin-bottom: .4rem; }
.calm-helpful strong i { color: var(--calm-accent-ink); margin-right: .25rem; }
.calm-helpful ul { display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; margin: 0; padding-left: 1.1rem; color: var(--calm-text); line-height: 1.45; }
.calm-helpful li { flex: 0 1 auto; }/* Priority as three described choices */
.calm-priorities { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .65rem; margin: 0 0 1rem; padding: 0; border: 0; }
.calm-priorities legend { grid-column: 1 / -1; margin: 0 0 .1rem; font-size: 1rem; font-weight: 600; }
.calm-priorities legend small { margin-left: .35rem; color: var(--calm-muted); font-size: .875rem; font-weight: 400; }
.calm-priority { position: relative; display: flex; gap: .65rem; align-items: flex-start; margin: 0; padding: .85rem 1rem; border: 1px solid var(--calm-border); border-radius: var(--calm-radius-sm); background: var(--calm-surface); cursor: pointer; }
.calm-priority:hover { border-color: var(--calm-accent-line); }
.calm-priority input { flex: none; width: 1.05rem; height: 1.05rem; margin-top: .15rem; accent-color: var(--calm-accent); }
.calm-priority span { display: grid; gap: .2rem; }
.calm-priority small { color: var(--calm-muted); font-size: .85rem; line-height: 1.4; }
.calm-priority:has(input:checked) { border-color: var(--calm-accent); background: var(--calm-accent-soft); box-shadow: inset 0 0 0 1px var(--calm-accent); }
.calm-priority:has(input:focus-visible) { outline: 2px solid var(--calm-accent-ink); outline-offset: 2px; }
.calm-priority strong::before { content: ""; display: inline-block; width: .55rem; height: .55rem; margin-right: .45rem; border-radius: 50%; vertical-align: .08em; }
.calm-priority-high strong::before { background: #d64545; }
.calm-priority-medium strong::before { background: #e3a008; }
.calm-priority-low strong::before { background: #3f9b62; }

/* Footer */
footer.footer { background-color: var(--calm-dark); color: var(--calm-dark-text); padding: 2rem 0 2.25rem; }
footer.footer .nav-link, footer.footer .copyright { color: color-mix(in srgb, var(--calm-dark-text) 80%, transparent); }
footer.footer .nav-link:hover { color: var(--calm-dark-text); }
footer.footer .btn { background-color: color-mix(in srgb, var(--calm-dark-text) 10%, transparent); color: var(--calm-dark-text); border-radius: 999px; }
footer.footer .copyright { margin-top: 1rem; font-size: .85rem; }

/* Less movement for those who ask for it */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .calm-help-card:hover { transform: none; }
}

/* The knowledgebase's pinned articles (knowledgebase.tpl) and each article's reading time */
.calm-kb-pinned .calm-article-text .calm-kb-minutes { color: var(--calm-accent-ink); font-weight: 600; }

/* The wordmark as a name and label ("plugmind WEB"), and its picture */
.calm-wordmark { display: inline-flex; align-items: center; }
.calm-wordmark-icon { width: 2rem; height: 2rem; margin-right: .6rem; border-radius: 9px; flex: none; }
.calm-wordmark--label .calm-wordmark-first { letter-spacing: -.03em; }
.calm-wordmark--label .calm-wordmark-second { margin-left: .5rem; color: var(--calm-muted); font-size: .5em; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; }
.calm-nav .calm-wordmark--label .calm-wordmark-second { color: color-mix(in srgb, var(--calm-dark-text) 72%, transparent); }

/* The website header layout (includes/calm-site-header.tpl): your site's bar on top, the client area's menu under it, no sidebar */
html[data-calm-layout="top"] body { padding-left: 0; }
.calm-site { position: sticky; top: 0; z-index: 1030; background: var(--calm-surface); box-shadow: 0 1px 0 var(--calm-border); }
.calm-site-inner { display: flex; align-items: center; gap: 1.5rem; min-height: var(--calm-top-h); }
.calm-site-brand { display: flex; align-items: center; color: var(--calm-text); text-decoration: none; }
.calm-site-brand:hover { color: var(--calm-text); text-decoration: none; }
.calm-site-brand .logo-img { max-height: 2.5rem; }
.calm-site-links { margin-left: auto; }
.calm-site-links ul, .calm-site-links-small { display: flex; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.calm-site-links a, .calm-site-links-small a { display: block; padding: .5rem .75rem; border-radius: var(--calm-radius-sm); color: var(--calm-text); font-weight: 500; text-decoration: none; }
.calm-site-links a:hover, .calm-site-links-small a:hover { background: var(--calm-accent-soft); color: var(--calm-text); }
.calm-site .calm-top-tools { margin-left: 0; }
.calm-site-links + .calm-top-tools { margin-left: .5rem; }
.calm-site-brand + .calm-top-tools { margin-left: auto; }
.calm-site-toggle { display: none; }
/* Twenty-One's script moves items into "More" when the menu is taller than 30px (autoCollapse), so the links stay short and the bar has the padding */
.calm-site-sub { padding: .55rem 0; background: var(--calm-dark); }
.calm-site-sub .navbar-nav > li > a { display: block; padding: .15rem .85rem; border-radius: 8px; line-height: 1.5; color: color-mix(in srgb, var(--calm-dark-text) 82%, transparent); font-weight: 500; text-decoration: none; }
.calm-site-sub .navbar-nav > li > a:hover, .calm-site-sub .navbar-nav > li.show > a { color: var(--calm-dark-text); background: color-mix(in srgb, var(--calm-dark-text) 9%, transparent); }
.calm-site-sub .navbar-nav > li.active > a, .calm-site-sub .navbar-nav > li > a[aria-current] { color: var(--calm-dark-text); background: color-mix(in srgb, var(--calm-accent) 45%, transparent); }
.calm-site-sub .dropdown-menu { border: 1px solid var(--calm-border); border-radius: var(--calm-radius-sm); box-shadow: var(--calm-shadow-lift); }
.calm-site-sub .dropdown-menu .dropdown-item a { display: block; padding: .3rem .5rem !important; color: var(--calm-text); }
.calm-site-links-small { display: none; }
@media (max-width: 991.98px) {
    .calm-site-links { display: none; }
    .calm-site-toggle { display: inline-flex; }
    .calm-site-brand + .calm-top-tools, .calm-site .calm-top-tools { margin-left: auto; }
    .calm-site-sub .navbar-collapse { padding: .5rem 0 1rem; }
    .calm-site-links-small { display: block; padding-bottom: .5rem; margin-bottom: .5rem; border-bottom: 1px solid color-mix(in srgb, var(--calm-dark-text) 14%, transparent); }
    .calm-site-links-small a { color: var(--calm-dark-text); }
    .calm-site-links-small a:hover { background: color-mix(in srgb, var(--calm-dark-text) 9%, transparent); color: var(--calm-dark-text); }
    .calm-site-sub .navbar-nav .dropdown-menu { background: transparent; border: 0; box-shadow: none; }
    .calm-site-sub .navbar-nav .dropdown-menu .dropdown-item a { color: color-mix(in srgb, var(--calm-dark-text) 82%, transparent); }
}
@media (max-width: 767.98px) {
    .calm-site-inner { gap: .5rem; }
    .calm-site .calm-account { display: none; }
    .calm-site-brand { min-width: 0; overflow: hidden; }
    .calm-site-brand .calm-wordmark { font-size: 1.15rem; white-space: nowrap; }
}

/* The website footer's columns (footer.tpl), on the same dark as WHMCS's footer */
.calm-site-footer { padding: 3.5rem 0 1rem; background: var(--calm-dark); color: var(--calm-dark-text); }
.calm-site-footer-grid { display: grid; grid-template-columns: minmax(12rem, 1.3fr) repeat(auto-fit, minmax(9rem, 1fr)); gap: 2rem; }
.calm-site-footer-brand a { color: var(--calm-dark-text); text-decoration: none; }
.calm-site-footer .calm-wordmark { color: var(--calm-dark-text); }
.calm-site-footer .calm-wordmark--label .calm-wordmark-second { color: color-mix(in srgb, var(--calm-dark-text) 72%, transparent); }
.calm-site-footer .calm-wordmark:not(.calm-wordmark--label) .calm-wordmark-second { color: color-mix(in srgb, var(--calm-accent) 55%, #fff); }
.calm-site-footer-head { margin: 0 0 .9rem; color: color-mix(in srgb, var(--calm-dark-text) 62%, transparent); font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.calm-site-footer ul { margin: 0; padding: 0; list-style: none; }
.calm-site-footer li { margin: 0 0 .6rem; }
.calm-site-footer li a { color: var(--calm-dark-text); text-decoration: none; }
.calm-site-footer li a:hover { text-decoration: underline; }
html[data-calm-layout="top"] footer.footer { border-top: 1px solid color-mix(in srgb, var(--calm-dark-text) 12%, transparent); }
.calm-site-note { margin: 1rem 0 0; color: color-mix(in srgb, var(--calm-dark-text) 72%, transparent); font-size: .85rem; }
.calm-site-note + .copyright { margin-top: .35rem; }
@media (max-width: 575.98px) {
    .calm-site-footer-grid { grid-template-columns: 1fr 1fr; }
    .calm-site-footer-brand { grid-column: 1 / -1; }
}

/* ---------- The SupportPal WHMCS integration's pages (templates/plugmind-calm/supportpal/) ---------- */
.calm-page-head-actions { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1.5rem; }
.calm-page-head-actions .btn i { margin-right: .35rem; }
.calm-sp-tickets .card-body { padding: .5rem 1rem 1rem; }
.calm-sp-tickets table.dataTable tbody tr { cursor: pointer; }
.calm-sp-department { margin: -.25rem 0 1.25rem; color: var(--calm-muted); }
.calm-sp-department a { margin-left: .5rem; font-weight: 600; }
.calm-sp-submit { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 1.5rem 0 0; }
.calm-sp-done { text-align: center; }
.calm-sp-done .card-body { padding: 2.5rem 1.5rem; }
.calm-sp-done .calm-help-icon { margin-bottom: 1rem; border-radius: 999px; background: var(--calm-accent); color: var(--calm-accent-text); }
.calm-sp-done h1 { font-size: 1.5rem; font-weight: 800; }
.calm-sp-done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 1.5rem 0 0; }

.calm-sp-ticket .card-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; }
.calm-sp-ticket .ticket-actions { margin-left: auto; display: inline-flex; gap: .4rem; }
.calm-sp-ticket-number { color: var(--calm-muted); font-weight: 600; }
.calm-sp-ticket-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin: .5rem 0 0; padding: 0; list-style: none; font-size: .9rem; }
.calm-sp-ticket-meta .text-muted { margin-right: .35rem; }
.calm-sp-status { --calm-sp-status: var(--calm-accent); display: inline-block; padding: .15rem .65rem; border-radius: 999px; background: color-mix(in srgb, var(--calm-sp-status) 14%, var(--calm-surface)); color: color-mix(in srgb, var(--calm-sp-status) 70%, var(--calm-text)); font-weight: 700; font-size: .82rem; }
.calm-sp-dot::before { content: ""; display: inline-block; width: .55rem; height: .55rem; margin-right: .35rem; border-radius: 999px; background: var(--calm-sp-status); }
.calm-sp-fields > summary { cursor: pointer; list-style: none; }
.calm-sp-fields > summary::-webkit-details-marker { display: none; }
.calm-sp-fields > summary::after { content: "+"; float: right; color: var(--calm-muted); font-weight: 700; }
.calm-sp-fields[open] > summary::after { content: "\2212"; }

.calm-sp-categories .kb-category { overflow: hidden; }
.calm-sp-category-articles { margin: 0; padding: 0 1.25rem .9rem; list-style: none; font-size: .92rem; }
.calm-sp-category-articles li { padding: .3rem 0; }
.calm-sp-category-articles i { color: var(--calm-muted); margin-right: .25rem; }
.calm-sp-more a { font-weight: 600; }
.calm-sp-none { padding: .85rem 0; color: var(--calm-muted); }
.calm-sp-article h1 { margin: 0 0 .5rem; font-size: 1.65rem; font-weight: 800; letter-spacing: -.02em; }
.calm-sp-article-meta { margin: 0 0 .5rem; }
.calm-sp-attachments { margin: 1.5rem 0 0; }
.calm-sp-share { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; }
.calm-sp-share > a:not(.btn) { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: var(--calm-accent-soft); color: var(--calm-accent-ink); }
.calm-sp-share .btn { margin-left: auto; }
.calm-sp-pages { margin: 1rem 0 1.5rem; }
.calm-sp-announcement h2 { margin: 0 0 .35rem; font-weight: 700; }
.calm-sp-announcement h2 a { color: var(--calm-text); }
.calm-sp-read { font-weight: 600; }
.calm-sp-comments { margin: 2rem 0 1rem; }
.calm-sp-comment-reply { padding-left: 3rem; }
.calm-sp-comments .posted-by { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; }
.calm-sp-comments .posted-by .commentreply { margin-left: auto; }
.calm-sp-comment-login { margin: 0 0 1.5rem; }
.calm-sp-captcha legend { margin-bottom: .25rem; }
.calm-sp-login { max-width: 28rem; margin: 1rem auto; }
@media (max-width: 575.98px) {
    .calm-sp-comment-reply { padding-left: 1.25rem; }
    .calm-sp-ticket .ticket-actions { margin-left: 0; }
}