/* ==========================================================================
   Public site: dark theme.

   Loaded on public routes after the template's sheets (App.razor). Everything is scoped to
   <html data-theme="dark">, which ui.js sets before first paint from the visitor's saved choice
   (or the operating system's preference) — the same switch the admin panel uses — so with the
   light theme this file changes nothing.

   The template hard-codes its colours (white page, #333 text, #f4f4f4 panels), so the dark
   theme re-declares them here instead of through variables in the template. Its own dark areas
   (header, footer, hero captions) are left alone; they already work on a dark page.
   ========================================================================== */

html[data-theme="dark"] {
    color-scheme: dark;

    --sd-bg: #11151b;          /* page */
    --sd-surface: #181e26;     /* cards, panels */
    --sd-surface-2: #202833;   /* raised / hover / .bg-light */
    --sd-input: #1a2029;
    --sd-border: #2c3643;
    --sd-text: #d9dee6;
    --sd-text-strong: #f3f5f8;
    --sd-muted: #98a3b3;
    --sd-link: #f1b440;        /* the brand amber, lightened for dark backgrounds */
    --sd-link-hover: #ffd37a;
    --sd-accent: #f1a005;
}

/* ---- Page, text, links ------------------------------------------------- */

html[data-theme="dark"] body,
html[data-theme="dark"] .main_wrap {
    background-color: var(--sd-bg);
    color: var(--sd-text);
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .h1,
html[data-theme="dark"] .h2,
html[data-theme="dark"] .h3,
html[data-theme="dark"] .h4,
html[data-theme="dark"] .h5,
html[data-theme="dark"] .h6,
html[data-theme="dark"] .singletitle h1,
html[data-theme="dark"] .singletitle h2,
html[data-theme="dark"] strong,
html[data-theme="dark"] b {
    color: var(--sd-text-strong);
}

html[data-theme="dark"] main a:not(.btn):not(.nav-link):not(.grid):not(.badge):not(.blog-chip) {
    color: var(--sd-link);
}

html[data-theme="dark"] main a:not(.btn):not(.nav-link):not(.grid):not(.badge):not(.blog-chip):hover {
    color: var(--sd-link-hover);
}

/* Links on the template's amber labels / tags stay dark-on-amber (or white), never the lightened link colour. */
html[data-theme="dark"] .bg-warning a,
html[data-theme="dark"] .bg-warning a:hover,
html[data-theme="dark"] .singletitle span a,
html[data-theme="dark"] .singletitle span a:hover {
    color: #fff !important;
}

html[data-theme="dark"] .text-dark:not(.btn):not(.bg-warning),
html[data-theme="dark"] a.text-dark:not(.btn) {
    color: var(--sd-text) !important;
}

/* Text on amber keeps its dark colour (the amber is the same in both themes). */
html[data-theme="dark"] .btn-warning,
html[data-theme="dark"] .btn-warning:hover,
html[data-theme="dark"] .btn-warning:focus,
html[data-theme="dark"] .bg-warning.text-dark,
html[data-theme="dark"] .btn-warning .fal {
    color: #212529 !important;
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] .muted {
    color: var(--sd-muted) !important;
}

html[data-theme="dark"] .text-primary {
    color: var(--sd-link) !important;
}

html[data-theme="dark"] hr,
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom {
    border-color: var(--sd-border) !important;
}

/* ---- Panels, cards, tables ------------------------------------------------ */

html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-white {
    background-color: var(--sd-surface-2) !important;
    color: var(--sd-text);
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .list-group-item {
    background-color: var(--sd-surface);
    border-color: var(--sd-border);
    color: var(--sd-text);
}

html[data-theme="dark"] .shadow,
html[data-theme="dark"] .shadow-sm {
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="dark"] .table,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th {
    color: var(--sd-text);
    border-color: var(--sd-border);
}

html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.03);
}

/* ---- Forms ---------------------------------------------------------------- */

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .custom-select,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="number"] {
    background-color: var(--sd-input);
    border-color: var(--sd-border);
    color: var(--sd-text);
}

html[data-theme="dark"] .form-control:focus {
    background-color: var(--sd-input);
    border-color: var(--sd-accent);
    color: var(--sd-text-strong);
    box-shadow: 0 0 0 0.2rem rgba(241, 160, 5, 0.25);
}

html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly] {
    background-color: var(--sd-surface-2);
    color: var(--sd-muted);
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] .auth-card .form-control::placeholder {
    color: #7d8897;
}

/* ---- Buttons --------------------------------------------------------------- */

html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-outline-secondary {
    background-color: var(--sd-surface-2);
    border-color: var(--sd-border);
    color: var(--sd-text);
}

html[data-theme="dark"] .btn-dark {
    background-color: #2b3542;
    border-color: #2b3542;
    color: #fff;
}

html[data-theme="dark"] .btn-link {
    color: var(--sd-link);
}

/* ---- Alerts and badges ----------------------------------------------------------- */

html[data-theme="dark"] .alert-danger {
    background-color: rgba(220, 53, 69, 0.16);
    border-color: rgba(220, 53, 69, 0.4);
    color: #ff9aa5;
}

html[data-theme="dark"] .alert-success {
    background-color: rgba(40, 167, 69, 0.16);
    border-color: rgba(40, 167, 69, 0.4);
    color: #8fe0a3;
}

html[data-theme="dark"] .alert-warning {
    background-color: rgba(241, 160, 5, 0.14);
    border-color: rgba(241, 160, 5, 0.4);
    color: #f6c458;
}

html[data-theme="dark"] .alert-info {
    background-color: rgba(23, 162, 184, 0.16);
    border-color: rgba(23, 162, 184, 0.4);
    color: #7fd6e5;
}

/* ---- Theme toggle (header, drawer, sign-in pages) ------------------------------ */

.site-theme-toggle {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    font-size: 0.85rem;
    height: 1.9rem;
    line-height: 1;
    width: 1.9rem;
}

.site-theme-toggle:hover,
.site-theme-toggle:focus-visible {
    border-color: #f1a005;
    color: #f1a005;
}

.off-canvas-wrap .site-theme-toggle {
    border-color: rgba(0, 0, 0, 0.2);
    color: #555;
}

/* On the sign-in pages the toggle sits on the photo, next to the white language button. */
.site-theme-toggle-solid {
    background: #fff;
    border-color: transparent;
    color: #333;
    height: 1.9rem;
}

html[data-theme="dark"] .off-canvas-wrap .site-theme-toggle {
    border-color: rgba(255, 255, 255, 0.25);
    color: #d9dee6;
}

/* ---- Tables (pricing, variants) -------------------------------------------- */

html[data-theme="dark"] .table-light,
html[data-theme="dark"] .table-light th,
html[data-theme="dark"] .table-light td,
html[data-theme="dark"] .thead-light th {
    background-color: var(--sd-surface-2);
    border-color: var(--sd-border);
    color: var(--sd-text);
}

html[data-theme="dark"] .table-warning,
html[data-theme="dark"] .table-warning > td,
html[data-theme="dark"] .table-warning > th {
    background-color: rgba(241, 160, 5, 0.16);
    color: var(--sd-text-strong);
}

/* ---- Cards the template styles with .box (contact form card, etc.) ---------- */

html[data-theme="dark"] .box {
    background-color: var(--sd-surface);
    border-color: var(--sd-border);
    color: var(--sd-text);
}

html[data-theme="dark"] .form-label,
html[data-theme="dark"] label {
    color: var(--sd-text);
}

/* ---- FAQ accordion, blog chips, tags, doc badges (their scoped CSS is light) ---- */

html[data-theme="dark"] .site-faq {
    background: var(--sd-surface);
    border-color: var(--sd-border);
}

html[data-theme="dark"] .site-faq summary,
html[data-theme="dark"] .site-faq summary span {
    color: var(--sd-text-strong);
}

html[data-theme="dark"] .site-faq-answer {
    border-top-color: var(--sd-border);
    color: var(--sd-text);
}

html[data-theme="dark"] .blog-chip {
    background: var(--sd-surface);
    border-color: var(--sd-border);
    color: var(--sd-text);
}

html[data-theme="dark"] .blog-chip:hover {
    color: var(--sd-text-strong);
}

html[data-theme="dark"] .blog-chip-active,
html[data-theme="dark"] .blog-chip-active:hover {
    background: var(--sd-accent);
    border-color: var(--sd-accent);
    color: #212529;
}

html[data-theme="dark"] .blog-page-info {
    color: var(--sd-muted);
}

html[data-theme="dark"] .site-tag,
html[data-theme="dark"] .docs-kind-badge {
    background: var(--sd-surface-2);
    border-color: var(--sd-border);
    color: var(--sd-muted);
}

html[data-theme="dark"] .site-skeleton {
    background: var(--sd-surface-2);
}

/* ---- Article / document prose ----------------------------------------------- */

html[data-theme="dark"] .site-prose blockquote {
    color: var(--sd-muted);
}

html[data-theme="dark"] .site-prose pre {
    background: #0c1015;
    border: 1px solid var(--sd-border);
}

html[data-theme="dark"] .site-prose pre code {
    color: #d9dee6;
}

html[data-theme="dark"] .site-prose :not(pre) > code {
    background: var(--sd-surface-2);
    color: #f6c458;
}

html[data-theme="dark"] .site-prose img {
    border-radius: 0.5rem;
}

/* ---- Buttons that were dark-on-light ------------------------------------------------- */

html[data-theme="dark"] .btn-outline-dark {
    border-color: var(--sd-border);
    color: var(--sd-text);
}

html[data-theme="dark"] .btn-outline-dark:hover,
html[data-theme="dark"] .btn-outline-dark:focus {
    background-color: var(--sd-surface-2);
    border-color: var(--sd-accent);
    color: var(--sd-text-strong);
}

/* ---- Header drop-downs, mobile drawer ---------------------------------------------- */

html[data-theme="dark"] .of-drop-down .second,
html[data-theme="dark"] .of-drop-down .second .inner,
html[data-theme="dark"] .of-drop-down .second ul {
    background-color: #0d131a;
    border-color: var(--sd-border);
}

html[data-theme="dark"] .of-drop-down .second a {
    color: var(--sd-text);
}

html[data-theme="dark"] .of-drop-down .second a:hover {
    color: var(--sd-accent);
}

html[data-theme="dark"] .off-canvas-wrap,
html[data-theme="dark"] .off-canvas-wrap ul,
html[data-theme="dark"] .off-canvas-wrap li {
    background-color: #0d131a;
    border-color: var(--sd-border);
    color: var(--sd-text);
}

html[data-theme="dark"] .off-canvas-wrap a {
    color: var(--sd-text);
}

html[data-theme="dark"] form.search_wrap {
    background-color: #0d131a;
}

/* ---- Sign-in pages ------------------------------------------------------------------ */

html[data-theme="dark"] .auth-card .nav-pills .nav-link:not(.active) {
    color: var(--sd-text);
}

html[data-theme="dark"] .auth-card .nav-pills.shadow-sm {
    background-color: var(--sd-surface-2);
}

html[data-theme="dark"] .auth-card .auth-eye {
    color: var(--sd-muted);
}

html[data-theme="dark"] .auth-card .auth-eye:hover {
    color: var(--sd-text-strong);
}

html[data-theme="dark"] .auth-bg {
    background-blend-mode: normal;
}

/* ---- Blog cards, contact blocks, pricing cards, docs tree ---------------------------- */

html[data-theme="dark"] .blog_style {
    box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .blog_style:hover {
    box-shadow: 0 0 20px 4px rgba(0, 0, 0, 0.55);
}

html[data-theme="dark"] .blog_style:hover h2 a,
html[data-theme="dark"] .blog_style h2 a {
    color: var(--sd-text-strong);
}

html[data-theme="dark"] .blog_style .card-body span a {
    color: #212529 !important;
}

html[data-theme="dark"] .contact-block i {
    background-color: var(--sd-surface-2);
    color: var(--sd-accent);
}

html[data-theme="dark"] .contact-block h4,
html[data-theme="dark"] .social h4 {
    border-bottom-color: var(--sd-border);
}

html[data-theme="dark"] .Dottedstocol {
    background-image: radial-gradient(#4a5565 1px, transparent 1px);
}

html[data-theme="dark"] .service-price .card {
    background-color: var(--sd-surface);
}

html[data-theme="dark"] .docs-doc-list a,
html[data-theme="dark"] .docs-category-title {
    color: var(--sd-text);
}

html[data-theme="dark"] .docs-doc-list a:hover,
html[data-theme="dark"] .docs-doc-active > a {
    color: var(--sd-link-hover);
}

/* ---- Input groups, pagination, misc Bootstrap pieces ------------------------------------ */

html[data-theme="dark"] .input-group-text {
    background-color: var(--sd-surface-2);
    border-color: var(--sd-border);
    color: var(--sd-text);
}

html[data-theme="dark"] .page-link {
    background-color: var(--sd-surface);
    border-color: var(--sd-border);
    color: var(--sd-link);
}

html[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--sd-accent);
    border-color: var(--sd-accent);
    color: #212529;
}

html[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--sd-surface);
    color: var(--sd-muted);
}

html[data-theme="dark"] .dropdown-item {
    color: var(--sd-text);
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--sd-surface-2);
    color: var(--sd-text-strong);
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .list-group-item {
    border-color: var(--sd-border);
}

html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer {
    background-color: var(--sd-surface-2);
    color: var(--sd-text);
}

html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered td,
html[data-theme="dark"] .table-bordered th {
    border-color: var(--sd-border);
}

html[data-theme="dark"] .text-success {
    color: #6fd48a !important;
}

html[data-theme="dark"] .text-danger {
    color: #ff8793 !important;
}

html[data-theme="dark"] .btn-outline-danger {
    color: #ff8793;
}

html[data-theme="dark"] .btn-outline-danger:hover {
    color: #fff;
}

html[data-theme="dark"] .btn-outline-warning {
    color: var(--sd-link);
}

html[data-theme="dark"] .btn-outline-warning:hover {
    color: #212529;
}

html[data-theme="dark"] .breadcrumb-item.active,
html[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--sd-muted);
}

html[data-theme="dark"] ::selection {
    background: rgba(241, 160, 5, 0.35);
    color: #fff;
}

html[data-theme="dark"] img:not([src$=".svg"]) {
    filter: brightness(0.92);
}

/* ---- Account area (invoices, licences, subscriptions) -------------------------------- */

html[data-theme="dark"] .badge.bg-light,
html[data-theme="dark"] .badge-light {
    background-color: var(--sd-surface-2) !important;
    color: var(--sd-text);
}

html[data-theme="dark"] code {
    color: #f6c458;
}

html[data-theme="dark"] .user-select-all {
    color: var(--sd-text-strong);
}

/* ---- Blog article page ----------------------------------------------------------------- */

html[data-theme="dark"] .site-post-card,
html[data-theme="dark"] .site-post-side {
    background: var(--sd-surface);
    border-color: var(--sd-border);
    color: var(--sd-text);
}

html[data-theme="dark"] .site-post-side {
    border-top-color: #fdb900;
}

html[data-theme="dark"] .site-post-cta {
    background: #0d131a;
    border-color: var(--sd-border);
    border-top-color: #fdb900;
}

html[data-theme="dark"] .site-post-tags,
html[data-theme="dark"] .site-post-related + .site-post-related {
    border-color: var(--sd-border);
}

html[data-theme="dark"] .site-post-related a {
    color: var(--sd-text);
}

html[data-theme="dark"] .site-post-related a:hover {
    color: var(--sd-link-hover);
}

html[data-theme="dark"] .site-post-meta {
    color: var(--sd-muted);
}

html[data-theme="dark"] .site-post-category {
    color: #212529 !important;
}

/* ---- Blog list sidebar ------------------------------------------------------------------- */

html[data-theme="dark"] .blog-side {
    background: var(--sd-surface);
    border-color: var(--sd-border);
    border-top-color: #fdb900;
    color: var(--sd-text);
}

html[data-theme="dark"] .blog-cats a {
    color: var(--sd-text);
}

html[data-theme="dark"] .blog-cats a:hover {
    background: var(--sd-surface-2);
    color: var(--sd-text-strong);
}

html[data-theme="dark"] .blog-cats a.blog-cat-active {
    background: var(--sd-accent);
    color: #212529;
}

/* ---- Documentation index ------------------------------------------------------------------ */

html[data-theme="dark"] .docs-card {
    background: var(--sd-surface);
    border-color: var(--sd-border);
    border-top-color: #fdb900;
    color: var(--sd-text);
}

/* ---- Products catalog ---------------------------------------------------------------------- */

html[data-theme="dark"] .product-card {
    background: var(--sd-surface);
    border-color: var(--sd-border);
    color: var(--sd-text);
}

html[data-theme="dark"] .product-card:hover {
    box-shadow: 0 0 20px 4px rgba(0, 0, 0, 0.55) !important;
}

html[data-theme="dark"] .product-card-foot {
    border-top-color: var(--sd-border);
}

html[data-theme="dark"] .product-card-body h3 a {
    color: var(--sd-text-strong);
}

html[data-theme="dark"] .product-card-body h3 a:hover {
    color: var(--sd-link-hover);
}

/* ---- Product detail ---- */
html[data-theme="dark"] .product-panel,
html[data-theme="dark"] .product-offer {
    background: var(--sd-surface);
    border-color: var(--sd-border);
    color: var(--sd-text);
}

html[data-theme="dark"] .product-offer {
    border-top-color: #fdb900;
}

html[data-theme="dark"] .product-pill {
    background: var(--sd-surface-2);
    border-color: var(--sd-border);
    color: var(--sd-muted);
}

html[data-theme="dark"] .product-offer-meta {
    border-top-color: var(--sd-border);
}

/* ---- Documentation page ---------------------------------------------------------------- */

html[data-theme="dark"] .docs-side,
html[data-theme="dark"] .docs-article,
html[data-theme="dark"] .docs-pager-card {
    background: var(--sd-surface);
    border-color: var(--sd-border);
    color: var(--sd-text);
}

html[data-theme="dark"] .docs-side {
    border-top-color: #fdb900;
}

html[data-theme="dark"] .docs-meta,
html[data-theme="dark"] .docs-related {
    border-color: var(--sd-border);
}

html[data-theme="dark"] .docs-pager-card:hover {
    border-color: #fdb900;
}

html[data-theme="dark"] .docs-pager-card small {
    color: var(--sd-muted);
}

/* ---- Live-chat widget (site-chat.css) -------------------------------------------------------------------------
   The widget is driven by custom properties, so the dark theme mostly re-declares them. The amber launcher, header and
   own bubbles keep their brand colour (dark ink on amber stays readable); the panel, agent bubbles and fields go dark. */

html[data-theme="dark"] .site-chat {
    --sc-surface: var(--sd-surface);
    --sc-surface-2: var(--sd-bg);
    --sc-border: var(--sd-border);
    --sc-text: var(--sd-text);
    --sc-muted: var(--sd-muted);
    --sc-danger: #ff6b6b;
}

html[data-theme="dark"] .site-chat .site-chat-input,
html[data-theme="dark"] .site-chat .site-chat-input:focus {
    background-color: var(--sd-input);
    color: var(--sd-text-strong);
}

html[data-theme="dark"] .site-chat .site-chat-input {
    border-color: var(--sd-border);
}

html[data-theme="dark"] .site-chat .site-chat-input:focus {
    border-color: var(--sd-accent);
}

html[data-theme="dark"] .site-chat .site-chat-input[aria-invalid="true"] {
    border-color: var(--sc-danger);
}

html[data-theme="dark"] .site-chat-panel {
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] .site-chat-system {
    background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .site-chat-banner {
    background: #4a3b00;
    color: #ffe08a;
}

html[data-theme="dark"] .site-chat-bubble.is-failed {
    background: #3a1c1c;
    border-color: var(--sc-danger);
    color: #ffb4b4;
}

html[data-theme="dark"] .site-chat-link {
    color: var(--sd-link);
}

html[data-theme="dark"] .site-chat-pill {
    background: var(--sd-surface-2);
    border: 1px solid var(--sd-border);
    color: var(--sd-text-strong);
}

html[data-theme="dark"] .site-chat-avatar {
    background: var(--sd-surface-2);
    color: var(--sd-text-strong);
}