/*
    Content Manager colors -> Draisap tokens.

    The Content Manager's Theme Settings screen has always collected a color scheme and a
    set of overrides, and it emits them as CSS custom properties -- --primary, --secondary,
    --success and the rest. Draisap paints from its own --dr-* tokens and read none of
    them, so every control on that screen did nothing on the theme the product ships with:
    picking Green saved, and the site stayed indigo.

    This maps one onto the other. It is the only place the two vocabularies meet, so the
    theme keeps its own token names and the CMS keeps its own, and neither has to know
    about the other beyond this file. Each token falls back to the value draisap.css
    already set, so a site with no CMS settings looks exactly as it did.

    Loaded after draisap.css and before custom.css, so an operator's own custom.css still
    has the last word.
*/
:root {
    --dr-accent: var(--primary, #4f56d9);
    --dr-accent-hover: var(--primary-accented, #3a40b3);
    --dr-accent-tint: var(--primary-lifted, #ecebff);
    --dr-on-accent: var(--text-inverted, #ffffff);
    --dr-info: var(--info, #4f56d9);
    --dr-ok: var(--success, #1f7a4f);
    --dr-warn: var(--warning, #9a5a12);
    --dr-bad: var(--error, #b3323a);
    --dr-teal: var(--secondary, #0f766e);
    --dr-violet: var(--notice, #6d28d9);
    --dr-amber: var(--warning, #b45309);
}

/*
    The accent is also used as three RGB channels for the translucent tints, and a custom
    property holding a hex cannot be torn apart in CSS. color-mix does the same job from
    the hex directly, so the tints follow the scheme instead of staying indigo while the
    solid colors move.
*/
@supports (color: color-mix(in srgb, red 50%, white)) {
    :root {
        --dr-accent-tint: color-mix(in srgb, var(--primary, #4f56d9) 12%, var(--dr-surface, #ffffff));
    }

    :root[data-theme="dark"],
    :root[data-theme="dark"] body,
    body.dark-mode {
        --dr-accent-tint: color-mix(in srgb, var(--primary, #7c82ff) 22%, var(--dr-surface, #26252e));
    }
}

/*
    Dark mode.

    draisap.css redefines every token under :root[data-theme="dark"], which outranks the
    :root block above, so without this the mapping applied in light mode only and the
    theme kept its own colors after dark. The CMS publishes its dark palette under
    .dark-mode / .draisap-dark-mode rather than the data-theme attribute, so the theme's
    own script sets that class alongside the attribute and both vocabularies line up.
    This file loads after draisap.css, so at equal specificity it wins.

    The CMS writes its dark palette on body (body.dark-mode), not on html. A custom property
    is worked out on the element that declares it and inherited from there already resolved,
    so a mapping declared only on html read the light --primary and every child kept the
    light accent in dark mode: dark indigo captions and links on a dark page, while buttons
    that read --primary directly came out right. The mapping is repeated on body so it reads
    the palette where the CMS puts it.
*/
:root[data-theme="dark"],
:root[data-theme="dark"] body,
body.dark-mode {
    --dr-accent: var(--primary, #7c82ff);
    --dr-accent-hover: var(--primary-accented, #5a61e0);
    --dr-on-accent: var(--text-inverted, #1c1b22);
    --dr-info: var(--info, #7c82ff);
    --dr-ok: var(--success, #4fbf87);
    --dr-warn: var(--warning, #e0a33c);
    --dr-bad: var(--error, #e0656c);
    --dr-teal: var(--secondary, #2fb3a6);
    --dr-violet: var(--notice, #a78bfa);
    --dr-amber: var(--warning, #e0a33c);
}

/*
    Login page background.

    The Content Manager's login screen collects a background image, an overlay color, its
    opacity and blur, a position and a size, and the CMS turns all of that into CSS on the
    html element. Draisap painted an opaque canvas over it, so an operator could set a
    background and never see one -- the setting saved and the page did not change.

    When the background style is on, the page lets it through: the canvas goes
    transparent and the sign-in card keeps its own surface so the form stays readable on
    top of whatever image is behind it.
*/
body.wbams_cms-login-background,
body.wbams_cms-login-background .dr-auth {
    background: transparent;
}

body.wbams_cms-login-background .dr-auth__card {
    box-shadow: var(--dr-shadow-pop);
}

.dr-auth__feed {
    display: grid;
    gap: 12px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.dr-auth__feed li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--dr-ink-2);
    font-size: 13px;
}

.dr-auth__feed i {
    margin-top: 3px;
    color: var(--dr-accent);
}

.dr-auth__feed strong {
    display: block;
    color: var(--dr-ink);
    font-weight: 700;
}

.dr-auth__feed small {
    color: var(--dr-ink-3);
    font-size: 11.5px;
}

/* Each item is a link to its article. It is not painted as one -- an underlined blue headline
   would compete with the sign-in form beside it -- so the hover state is what says so. */
.dr-auth__feed a {
    color: inherit;
    text-decoration: none;
}

.dr-auth__feed a:hover strong,
.dr-auth__feed a:focus-visible strong {
    color: var(--dr-accent);
    text-decoration: underline;
}

.dr-auth__feed a:focus-visible {
    outline: 2px solid var(--dr-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Sticky navigation is a Content Manager switch; off means the header scrolls away. */
.dr-header--static {
    position: static;
}

/* ------------------------------------------------------------------
   Footer settings group (Content Manager -> Footer)
   Layout, tone and widget switches Draisap now reads from the CMS.
   ------------------------------------------------------------------ */
.dr-footer__grid--single { grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); }
.dr-footer__grid--menu-right { grid-template-columns: minmax(0, 1fr) minmax(160px, .7fr) minmax(0, 2.6fr); }
.dr-footer__grid--menu-right .dr-footer__menus { order: 3; }
.dr-footer__grid--menu-right .dr-footer__cta { order: 2; }
.dr-footer__menus { display: flex; flex-wrap: wrap; gap: 28px 32px; min-width: 0; }
.dr-footer__menus .dr-footer__col { flex: 1 1 120px; }

.dr-footer__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.dr-footer__cta > strong { color: var(--dr-ink); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.dr-footer__cta--boxed { padding: 18px; border: 1px solid var(--dr-line); border-radius: var(--dr-radius-card, 16px); background: var(--dr-surface); }
.dr-footer__contact { display: inline-flex; align-items: center; gap: 8px; color: var(--dr-ink-2); font-weight: 600; }
.dr-footer__contact:hover { color: var(--dr-accent); }
.dr-footer__widget-html { width: 100%; min-width: 0; overflow-wrap: anywhere; }
.dr-footer__cta .dr-btn { margin-top: 4px; }

.dr-footer__payments { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; color: var(--dr-ink-3, var(--dr-ink-2)); line-height: 1; }
.dr-footer__payments svg, .dr-footer__payments img { height: 20px; width: auto; }
.dr-footer__utils { display: inline-flex; align-items: center; flex-wrap: wrap; }

.dr-footer__legal { padding-top: 14px; }
.dr-footer__legal ul { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 0; list-style: none; }
.dr-footer__legal a { color: var(--dr-ink-2); font-size: 12.5px; font-weight: 600; }
.dr-footer__legal a:hover { color: var(--dr-accent); }

.dr-footer__custom { padding-top: 16px; }
.dr-footer__custom > * { max-width: 100%; }

.dr-footer--simple { padding: 20px 0 18px; }
.dr-footer--simple .dr-footer__bar { padding-top: 0; border-top: 0; }

/* Footer background tone */
.dr-footer--dark { background: #14131a; border-top-color: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .68); }
.dr-footer--dark .dr-footer__col strong, .dr-footer--dark .dr-footer__cta > strong { color: #fff; }
.dr-footer--dark .dr-footer__col a, .dr-footer--dark .dr-footer__col span,
.dr-footer--dark .dr-footer__bar, .dr-footer--dark .dr-footer__bar a,
.dr-footer--dark .dr-footer__legal a, .dr-footer--dark .dr-footer__contact { color: rgba(255, 255, 255, .72); }
.dr-footer--dark .dr-footer__col a:hover, .dr-footer--dark .dr-footer__bar a:hover,
.dr-footer--dark .dr-footer__legal a:hover, .dr-footer--dark .dr-footer__contact:hover { color: #fff; }
.dr-footer--dark .dr-footer__bar, .dr-footer--dark .dr-footer__social a, .dr-footer--dark .dr-footer__cta--boxed { border-color: rgba(255, 255, 255, .14); }
.dr-footer--dark .dr-footer__cta--boxed { background: rgba(255, 255, 255, .04); }
.dr-footer--dark .dr-brand img.dr-brand__logo--light { display: none; }
.dr-footer--dark .dr-brand img.dr-brand__logo--dark { display: block; }

.dr-footer--primary { background: var(--dr-accent); border-top-color: transparent; color: rgba(255, 255, 255, .82); }
.dr-footer--primary .dr-footer__col strong, .dr-footer--primary .dr-footer__cta > strong { color: #fff; }
.dr-footer--primary .dr-footer__col a, .dr-footer--primary .dr-footer__col span,
.dr-footer--primary .dr-footer__bar, .dr-footer--primary .dr-footer__bar a,
.dr-footer--primary .dr-footer__legal a, .dr-footer--primary .dr-footer__contact { color: rgba(255, 255, 255, .82); }
.dr-footer--primary .dr-footer__col a:hover, .dr-footer--primary .dr-footer__bar a:hover,
.dr-footer--primary .dr-footer__legal a:hover, .dr-footer--primary .dr-footer__contact:hover { color: #fff; }
.dr-footer--primary .dr-footer__bar, .dr-footer--primary .dr-footer__social a, .dr-footer--primary .dr-footer__cta--boxed { border-color: rgba(255, 255, 255, .26); }
.dr-footer--primary .dr-footer__cta--boxed { background: rgba(255, 255, 255, .08); }
.dr-footer--primary .dr-btn--primary { background: #fff; border-color: #fff; color: var(--dr-accent); }
.dr-footer--primary .dr-brand img.dr-brand__logo--light { display: none; }
.dr-footer--primary .dr-brand img.dr-brand__logo--dark { display: block; }

.dr-footer--theme { background: var(--dr-surface); }

/* Partner logo strip */
.dr-partners { border-top: 1px solid var(--dr-line); background: var(--dr-canvas); padding: 22px 0; }
.dr-partners--flat { border-top: 0; background: transparent; }
.dr-partners__track { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 38px; }
.dr-partners__item img { max-height: 34px; width: auto; opacity: .62; filter: grayscale(1); transition: opacity .18s ease, filter .18s ease; }
.dr-partners__item img:hover { opacity: 1; filter: none; }
html[data-theme="dark"] .dr-partners__item img { opacity: .72; filter: grayscale(1) invert(1) brightness(1.15); }
html[data-theme="dark"] .dr-partners__item img:hover { opacity: 1; filter: grayscale(1) invert(1) brightness(1.3); }

@media (max-width: 900px) {
    .dr-footer__grid, .dr-footer__grid--single, .dr-footer__grid--menu-right { grid-template-columns: minmax(0, 1fr); }
    .dr-footer__grid--menu-right .dr-footer__menus, .dr-footer__grid--menu-right .dr-footer__cta { order: 0; }
}

/* Footer custom HTML blocks (Content Manager -> Footer -> Custom HTML) */
.dr-footer { --mtd-soft-line: var(--dr-line); --mtd-muted: var(--dr-ink-2); }
.dr-footer--dark, .dr-footer--primary { --mtd-soft-line: rgba(255, 255, 255, .18); --mtd-muted: rgba(255, 255, 255, .78); }
.dr-footer .dr-footer__copy { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-width: 0; }
.dr-footer .dr-footer__copy > .mtd-footer-custom-block { width: auto; margin-top: 0; }
.dr-footer .mtd-footer-custom-stack { width: 100%; min-width: 0; }
.dr-footer .mtd-footer-brand-tagline { max-width: 360px; margin-top: 14px; }

/* ------------------------------------------------------------------
   Header settings group (Content Manager -> Header)
   ------------------------------------------------------------------ */

/* Pre-header strip */
.dr-preheader { border-bottom: 1px solid var(--dr-line); background: var(--dr-panel); font-size: 12.5px; }
.dr-preheader__inner { display: flex; align-items: center; justify-content: space-between; gap: 10px 24px; min-height: 38px; flex-wrap: wrap; }
.dr-preheader__list { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; list-style: none; }
.dr-preheader__list--end { margin-left: auto; }
.dr-preheader a { display: inline-flex; align-items: center; gap: 6px; color: var(--dr-ink-2); font-weight: 600; }
.dr-preheader a:hover { color: var(--dr-accent); }
.dr-preheader--1 { background: var(--dr-accent); border-bottom-color: transparent; }
.dr-preheader--1 a { color: rgba(255, 255, 255, .88); }
.dr-preheader--1 a:hover { color: #fff; }
.dr-preheader--2 { background: var(--dr-surface); }
@media (max-width: 640px) {
    .dr-preheader__list span { display: none; }
    .dr-preheader__list--end span { display: inline; }
}

/* Main menu tone: 0 default, 1 theme, 2 dark */
.dr-header--nav-1 { background: var(--dr-accent); border-bottom-color: transparent; }
.dr-header--nav-2 { background: #14131a; border-bottom-color: rgba(255, 255, 255, .1); }
.dr-header--nav-1, .dr-header--nav-2 { backdrop-filter: none; -webkit-backdrop-filter: none; }
.dr-header--nav-1 .dr-nav__link, .dr-header--nav-2 .dr-nav__link,
.dr-header--nav-1 .dr-iconbtn, .dr-header--nav-2 .dr-iconbtn,
.dr-header--nav-1 .dr-account-btn, .dr-header--nav-2 .dr-account-btn { color: rgba(255, 255, 255, .84); }
.dr-header--nav-1 .dr-nav__link:hover, .dr-header--nav-2 .dr-nav__link:hover,
.dr-header--nav-1 .dr-iconbtn:hover, .dr-header--nav-2 .dr-iconbtn:hover,
.dr-header--nav-1 .dr-nav li.is-active > .dr-nav__link, .dr-header--nav-2 .dr-nav li.is-active > .dr-nav__link { color: #fff; background: rgba(255, 255, 255, .12); }
.dr-header--nav-1 .dr-iconbtn, .dr-header--nav-2 .dr-iconbtn,
.dr-header--nav-1 .dr-account-btn, .dr-header--nav-2 .dr-account-btn { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); }
.dr-header--nav-1 .dr-iconbtn:hover, .dr-header--nav-2 .dr-iconbtn:hover,
.dr-header--nav-1 .dr-account-btn:hover, .dr-header--nav-2 .dr-account-btn:hover { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .16); color: #fff; }
.dr-header--nav-1 .dr-avatar, .dr-header--nav-2 .dr-avatar { background: rgba(255, 255, 255, .2); color: #fff; }
.dr-header--nav-1 .btn-default, .dr-header--nav-2 .btn-default { border-color: rgba(255, 255, 255, .3); background: transparent; color: #fff; }
.dr-header--nav-1 .btn-primary { background: #fff; border-color: #fff; color: var(--dr-accent); }
.dr-header--nav-1 .dr-brand img.dr-brand__logo--light,
.dr-header--nav-2 .dr-brand img.dr-brand__logo--light { display: none; }
.dr-header--nav-1 .dr-brand img.dr-brand__logo--dark,
.dr-header--nav-2 .dr-brand img.dr-brand__logo--dark { display: block; }

/* Sub menu tone */
.dr-header--sub-1 .dropdown-menu { border-color: transparent; background: var(--dr-accent); }
.dr-header--sub-1 .dropdown-menu::before { border-color: transparent; background: var(--dr-accent); }
.dr-header--sub-1 .dropdown-item { color: rgba(255, 255, 255, .86); }
.dr-header--sub-1 .dropdown-item:hover, .dr-header--sub-1 .dropdown-item.active { background: rgba(255, 255, 255, .14); color: #fff; }
.dr-header--sub-1 .dropdown-header, .dr-header--sub-1 .dr-menu-profile { color: rgba(255, 255, 255, .78); }
.dr-header--sub-1 .dropdown-divider { border-color: rgba(255, 255, 255, .2); }
.dr-header--sub-2 .dropdown-menu { border-color: rgba(255, 255, 255, .12); background: #1c1b22; }
.dr-header--sub-2 .dropdown-menu::before { border-color: rgba(255, 255, 255, .12); background: #1c1b22; }
.dr-header--sub-2 .dropdown-item { color: rgba(255, 255, 255, .8); }
.dr-header--sub-2 .dropdown-item:hover, .dr-header--sub-2 .dropdown-item.active { background: rgba(255, 255, 255, .1); color: #fff; }
.dr-header--sub-2 .dropdown-header, .dr-header--sub-2 .dr-menu-profile { color: rgba(255, 255, 255, .7); }
.dr-header--sub-2 .dropdown-divider { border-color: rgba(255, 255, 255, .14); }

/* Side (drawer) tone */
.dr-drawer--side-1 .dr-drawer__panel { background: var(--dr-accent); }
.dr-drawer--side-1 .dr-drawer__panel, .dr-drawer--side-1 .dr-drawer__nav a,
.dr-drawer--side-1 .dr-drawer__nav button, .dr-drawer--side-1 .dr-drawer__head strong,
.dr-drawer--side-1 .dr-drawer__section { color: rgba(255, 255, 255, .88); }
.dr-drawer--side-1 .dr-drawer__nav a:hover, .dr-drawer--side-1 .dr-drawer__nav button:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.dr-drawer--side-1 .dr-drawer__head, .dr-drawer--side-1 .dr-iconbtn { border-color: rgba(255, 255, 255, .24); color: #fff; }
.dr-drawer--side-2 .dr-drawer__panel { background: #1c1b22; }
.dr-drawer--side-2 .dr-drawer__panel, .dr-drawer--side-2 .dr-drawer__nav a,
.dr-drawer--side-2 .dr-drawer__nav button, .dr-drawer--side-2 .dr-drawer__head strong,
.dr-drawer--side-2 .dr-drawer__section { color: rgba(255, 255, 255, .82); }
.dr-drawer--side-2 .dr-drawer__nav a:hover, .dr-drawer--side-2 .dr-drawer__nav button:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.dr-drawer--side-2 .dr-drawer__head, .dr-drawer--side-2 .dr-iconbtn { border-color: rgba(255, 255, 255, .16); color: #fff; }

/* Layout switches */
.dr-header--nav-right .dr-nav { margin-left: auto; margin-right: 0; }
.dr-header--nav-right .dr-header__end { margin-left: 18px; }
.dr-header--flat { box-shadow: none; }
.dr-header--flat, .dr-header--flat.dr-header--static { border-bottom-width: 1px; }
.dr-header:not(.dr-header--flat) { box-shadow: 0 1px 0 rgba(17, 16, 24, .04), 0 8px 24px -18px rgba(17, 16, 24, .35); }
.dr-header--icons-only .dr-header__end .btn span,
.dr-header--icons-only .dr-header__end .dr-account-btn__name { display: none; }
.dr-header--icons-only .dr-header__end .btn { padding-left: 10px; padding-right: 10px; }
.dr-header--icons-only .dr-header__end a { text-decoration: none; }
/* "Menu hoverable" -- open primary dropdowns on pointer hover */
@media (hover: hover) and (pointer: fine) {
    .dr-header--hover .dr-nav > li.dropdown:hover > .dropdown-menu,
    .dr-header--hover .dr-nav > li.dropdown:focus-within > .dropdown-menu { display: block; }
}

/* Client Area -> Gravatar / staff avatar */
.dr-avatar__img, .dr-msg__avatar .dr-avatar__img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; display: block; }
.dr-avatar:has(.dr-avatar__img), .dr-msg__avatar:has(.dr-avatar__img) { padding: 0; overflow: hidden; background: transparent; }

/* Invoices -> layout / background switches */
.dr-doc--white { background: #fff; color: #1c1b22; }
.dr-doc--white .dr-doc__head, .dr-doc--white table { color: inherit; }
.dr-body--document { background: var(--dr-canvas); padding: 32px 0; }
.dr-doc-standalone { max-width: 940px; }
@media print { .dr-body--document { padding: 0; } }

/* Services -> "Show service ID" */
.dr-record-id { color: var(--dr-accent); font-weight: 700; }

/* Services -> "Hide inactive services" toggle above the services table */
.dr-inactive-toggle { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--dr-ink-2); cursor: pointer; user-select: none; }
.dr-inactive-toggle strong { color: var(--dr-ink); }

/* Sensitive Data (Content Manager -> Sensitive Data) */
.dr-field__note { margin: 0 0 8px; color: var(--dr-ink-2); font-size: 12.5px; line-height: 1.55; }
.dr-sensitive-box { max-height: 280px; overflow-y: auto; padding: 14px 16px; border: 1px solid var(--dr-line); border-radius: var(--dr-radius-card, 16px); background: var(--dr-surface); }
.dr-sensitive-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dr-sensitive-edit textarea { min-height: 160px; }
.dr-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--dr-ink-2); }
.dr-check input { margin-top: 3px; }

/* Support Tickets -> "Department style".
   The chooser sits inside a card, so the departments must not be cards themselves:
   both layouts drop the frame and shadow and separate items with a hairline instead. */
.dr-tiles--depts { gap: 0; }
.dr-tiles--depts .dr-tile--dept { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.dr-tiles--depts .dr-tile--dept:hover { background: var(--dr-accent-tint); transform: none; }
.dr-tiles--depts .dr-tile--dept + .dr-tile--dept { box-shadow: inset 1px 0 0 var(--dr-line); }
@media (max-width: 640px) {
    .dr-tiles--depts { grid-template-columns: minmax(0, 1fr); }
    .dr-tiles--depts .dr-tile--dept + .dr-tile--dept { box-shadow: inset 0 1px 0 var(--dr-line); }
}

/* "Cards" style stacks the icon above the name and gives each department more room. */
.dr-tiles--cards { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.dr-tiles--cards .dr-tile--dept { flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; text-align: left; }
.dr-tiles--cards .dr-tile__arrow { display: none; }

/* Admin viewing the client area: a way back to the admin area */
.dr-adminbar { background: #1c1b22; color: rgba(255, 255, 255, .82); font-size: 12.5px; }
.dr-adminbar .container { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-height: 36px; }
.dr-adminbar span { display: inline-flex; align-items: center; gap: 8px; }
.dr-adminbar__action { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; color: #fff; font-weight: 700; }
.dr-adminbar__action:hover { background: rgba(255, 255, 255, .14); color: #fff; }

/* 44x24 switch: input.dr-switch (dr-primitives.css) is the theme's one checkbox; rows only add the label */
.dr-switch-row .dr-switch__label { font-size: 13.5px; color: var(--dr-ink-2); line-height: 1.5; }
.dr-adminbar--preview { background: #4a3b8f; color: #fff; }
.dr-adminbar--preview strong { color: #fff; }