/* Shared primitives. Structural borders and input boundaries have separate roles. */
.wb-ui {
    --ui-surface: #fff;
    --ui-background: #f7f9f4;
    --ui-text: #163b32;
    --ui-muted: #4e655c;
    --ui-border: #ccd9d1;
    --ui-control-border: #7e9489;
    --ui-hover: #edf5ef;
    --ui-focus: #087849;
    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-space-6: 24px;
    --ui-space-8: 32px;
    --wb-muted: var(--ui-muted);
    --wb-line: var(--ui-border);
    color: var(--ui-text);
}

/* One component in public, workspace, admin and recovery headers. */
.wb-ui .wb-language { position: relative; flex: 0 0 auto; color: var(--ui-text); }
.wb-ui .wb-language summary {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 9px 12px; margin: 0; cursor: pointer;
    border: 1px solid var(--ui-control-border); border-radius: var(--wb-radius-sm);
    background: var(--ui-surface); color: var(--ui-text); list-style: none;
    font: 600 14px/1.5 var(--wb-font); white-space: nowrap;
}
.wb-ui .wb-language summary::-webkit-details-marker { display: none; }
.wb-ui .wb-language summary:hover, .wb-ui .wb-language[open] summary { background: var(--ui-hover); border-color: var(--wb-emerald-ink); }
.wb-ui .wb-language__code { display: none; }
.wb-ui .wb-language summary svg { flex: none; transform: none; }
.wb-ui .wb-language[open] summary .wb-language__chevron { transform: rotate(180deg); }
.wb-ui .wb-language__menu {
    position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 1200;
    display: grid; min-width: 176px; max-width: calc(100vw - 32px); max-height: 280px;
    overflow: auto; margin: 0; padding: 6px; list-style: none;
    background: var(--ui-surface); border: 1px solid var(--ui-border);
    border-radius: var(--wb-radius-md); box-shadow: var(--wb-shadow-md);
}
.wb-ui .wb-language__menu li { margin: 0; padding: 0; }
.wb-ui .wb-language__menu a {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    min-height: 44px; padding: 10px 12px; border-radius: 6px;
    color: var(--ui-text); text-decoration: none; font: 600 14px/1.5 var(--wb-font);
}
.wb-ui .wb-language__menu a:hover, .wb-ui .wb-language__menu a[aria-current] { color: var(--ui-text); background: var(--ui-hover); }
.wb-ui .wb-language__check { min-width: 16px; color: var(--wb-emerald-ink); }
.wb-ui .wb-auth-tools { position: absolute; inset-block-start: 20px; inset-inline-end: 24px; z-index: 50; }
.wb-ui .header .wb-language { order: 2; margin-inline-start: 12px; }
.wb-ui .header .navbar-brand { order: 0; }
.wb-ui .header .navbar-collapse { order: 1; }
.wb-ui .header .navbar-toggler { order: 3; margin-inline-start: 8px; }
.wb-ui .dashboard-header__inner { gap: 16px; align-items: center; }
.wb-ui .dashboard-header__left { min-width: 0; flex: 1 1 auto; }
.wb-ui .dashboard-header__left .title { overflow-wrap: anywhere; line-height: 1.5; }
.wb-ui .dashboard-header .user-info__right { display: flex; align-items: center; gap: 12px; }
.wb-ui .dashboard-header .user-info__button { margin: 0; }
.wb-ui .user-info-dropdown { transform: none !important; }
.wb-ui .user-info__button { min-width: 44px; min-height: 44px; }
.wb-ui .dashboard-body__bar-icon { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0; border: 1px solid var(--ui-control-border); border-radius: 8px; color: var(--ui-text); }

/* Form rhythm, including dynamic inputs and Select2. Checkbox sizes stay native. */
.wb-ui .form-group { margin-block-end: var(--ui-space-6); }
.wb-ui :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: var(--ui-focus) !important; }
.wb-ui .wb-onboarding p, .wb-ui .wb-activity p { color: var(--ui-muted) !important; }
.wb-ui .wb-pricing .wb-section-lead h2, .wb-ui .wb-last h2 { color: #fff !important; }
.wb-ui .pricing-card :is(.pricing-card__title, .pricing-card__desc, .pricing-card__number, .pricing-card__number span) { color: var(--ui-text) !important; }
.wb-ui .wb-preview__chrome span { color: var(--ui-muted); }
.wb-ui.wb-error .error-content { background: var(--ui-background); }
.wb-ui.wb-error .error-content__message :is(.title, .text) { color: var(--ui-text); }
.wb-ui .sidebar-menu a .text { color: #fff !important; }
.wb-ui .contact-item__desc { color: var(--ui-muted) !important; }
.wb-ui .support-item__top { color: #795300 !important; }
.wb-ui :is(.form--label, .form-label) { display: inline-block; margin-block-end: var(--ui-space-2); color: var(--ui-text); line-height: 1.6; }
.wb-ui :is(.form--control, .form-control, .form-select):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
.wb-ui .select2-container .select2-selection {
    color: var(--ui-text); background-color: var(--ui-surface);
    border: 1px solid var(--ui-control-border); border-radius: var(--wb-radius-sm);
    min-height: 44px; line-height: 1.5;
}
.wb-ui :is(input.form--control, input.form-control, select.form--control, select.form-select):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]) { padding-block: 10px; padding-inline: 12px; }
.wb-ui :is(textarea.form--control, textarea.form-control) { padding: 12px; min-height: 112px; }
.wb-ui :is(.form--control, .form-control)::placeholder { color: var(--ui-muted); opacity: 1; }
.wb-ui :is(.form--control, .form-control, .form-select):focus { border-color: var(--wb-emerald-ink); box-shadow: 0 0 0 3px rgb(8 120 73 / 14%); }
.wb-ui :is(.form--control, .form-control).is-invalid { border-color: #b02d26; }
.wb-ui :is(.form--control, .form-control):disabled { color: var(--ui-muted); background: var(--ui-background); opacity: 1; }
.wb-ui :is(.form-text, .text-muted, .input-group-text) { color: var(--ui-muted) !important; }
.wb-ui .input-group-text { background: var(--ui-background); border-color: var(--ui-control-border); }
.wb-ui .select2-container .select2-selection__rendered { color: var(--ui-text); }
.wb-ui .select2-container .select2-selection--single .select2-selection__rendered { line-height: 42px; padding-inline: 12px 30px; }
.wb-ui .select2-container .select2-selection--single .select2-selection__arrow { height: 42px; }
.wb-ui .select2-dropdown { color: var(--ui-text); background: var(--ui-surface); border-color: var(--ui-control-border); }
.wb-ui .select2-results__option--highlighted[aria-selected] { color: #fff; background: var(--wb-emerald-ink); }
.wb-ui .btn { min-height: 44px; border-radius: var(--wb-radius-sm); line-height: 1.5; }
.wb-ui .btn.disabled, .wb-ui .btn:disabled { cursor: not-allowed; }
.wb-ui .btn-group { gap: 4px; }
.wb-ui :is(.card, .custom--card, .modal-content) { border-radius: var(--wb-radius-md); border-color: var(--ui-border); }
.wb-ui :is(.card, .custom--card) > :is(.card-header, .card-footer) { padding: 16px 24px; border-color: var(--ui-border); }
.wb-ui :is(.card, .custom--card) > .card-body { padding: 24px; }
.wb-ui .card-header :is(h3, h4, h5, .card-title) { margin-block-end: 0; line-height: 1.5; }
.wb-ui .modal-header, .wb-ui .modal-footer { gap: 12px; padding: 16px 24px; border-color: var(--ui-border); }
.wb-ui .modal-body { padding: 24px; }
.wb-ui .table :is(th, td) { border-color: var(--ui-border); vertical-align: middle; }
.wb-ui .table th { line-height: 1.5; }
.wb-ui .table td :is(.button--group, .action-buttons) { gap: 8px; }
.wb-ui .pagination { gap: 4px; }
.wb-ui :is(.nav-tabs, .nav-pills) .nav-link:not(.active) { color: var(--ui-muted) !important; }
.wb-admin .header-dropdown__icon { --size: 44px; color: var(--ui-text) !important; }
.wb-admin .dashboard__header .dashboard-info { gap: 8px; }
.wb-admin .dashboard__header-left .breadcrumb-icon { width: 44px; height: 44px; padding: 0; border: 1px solid var(--ui-control-border); border-radius: 8px; background: var(--ui-surface); color: var(--ui-text); }
.wb-admin .dashboard__header .header-search__icon { min-width: 44px; min-height: 44px; padding: 10px; border: 0; background: transparent; }
.wb-admin .dashboard__header .header-search__icon svg { stroke: var(--ui-text); }
.wb-ui .pagination .page-link { display: grid; place-items: center; min-height: 44px; min-width: 44px; border-radius: 8px !important; }
.wb-ui .dashboard-body { padding-block: 24px; }
.wb-ui .dashboard-header { overflow: visible; }
.wb-ui .cookies-card { padding: 16px !important; }
.wb-ui .wb-cookie-details { margin-block-end: 12px; }
.wb-ui .wb-cookie-details summary { display: flex; align-items: center; min-height: 44px; color: var(--ui-text); font-size: 14px; font-weight: 600; cursor: pointer; }
.wb-ui .wb-cookie-details .cookies-card__content { max-height: 180px; overflow: auto; padding-block-start: 8px; margin: 0; color: var(--ui-muted); font-size: 14px; line-height: 1.7; }
.wb-ui .cookies-card .cookies-card__footer .btn { min-height: 44px !important; font-size: 14px !important; }

/* Admin supports dark surfaces without reversing button text or the brand mark. */
html[data-theme=dark] .wb-ui {
    --ui-surface: #122f27; --ui-background: #0b201a; --ui-text: #e6f2ed;
    --ui-muted: #b4cbc0; --ui-border: #385849; --ui-control-border: #72998a; --ui-hover: #20483a; --ui-focus: #87dfb1;
    color: var(--ui-text); background: var(--ui-background);
}
html[data-theme=dark] .wb-admin :is(.dashboard__area, .account) { background: var(--ui-background); }
html[data-theme=dark] .wb-admin :is(.card, .custom--card, .modal-content, .dashboard__header, .dashboard__area-header, .account__card, .widget, .table-layout, .dropdown-menu) { color: var(--ui-text); background: var(--ui-surface); border-color: var(--ui-border); }
html[data-theme=dark] .wb-admin :is(.card-header, .card-footer, .table-header, .table-footer, .table th) { color: var(--ui-text); background: var(--ui-background); }
html[data-theme=dark] .wb-admin :is(.page-title, .card-title, .card .title, .widget-title, .widget-amount, .widget-amount .currency, .currency, .account__title, .table td, .table td a:not(.btn), .form--label) { color: var(--ui-text) !important; }
html[data-theme=dark] .wb-admin .table tbody tr:hover td { background: var(--ui-hover); }
html[data-theme=dark] .wb-admin :is(.account__desc, .account__form .forgot-password) { color: var(--ui-muted); }
html[data-theme=dark] .wb-admin .wb-language__check { color: #87dfb1; }

@media (max-width: 991px) {
    .wb-ui .header .navbar-collapse { order: 4; flex-basis: 100%; }
    .wb-ui .header .navbar-brand { margin-inline-end: auto; }
    .wb-ui .dashboard-header__inner { flex-wrap: wrap; }
    .wb-ui .dashboard-header__left { flex: 1 1 45%; }
    .wb-ui .dashboard-header .user-info { flex: 0 0 auto; }
    .wb-ui .dashboard-header .user-info__right { gap: 8px; }
}
@media (max-width: 575px) {
    .wb-admin .dashboard__header { flex-wrap: wrap; gap: 12px; }
    .wb-admin .dashboard__header .dashboard-info { width: 100%; flex-wrap: wrap; justify-content: flex-end; }
    .wb-admin .dashboard__header .dashboard-info > .wb-language { margin-inline-end: auto; }
    .wb-admin .dashboard__header .wb-language__menu { inset-inline-start: 0; inset-inline-end: auto; }
    .wb-ui .wb-language summary { padding-inline: 10px; gap: 6px; }
    .wb-ui .wb-language__name { display: none; }
    .wb-ui .wb-language__code { display: inline; }
    .wb-ui .wb-auth-tools { inset-inline-end: 16px; inset-block-start: 16px; }
    .wb-ui .wb-site-header__logo img { width: 140px; height: auto; }
    .wb-ui .wb-site-header__inner { gap: 8px; }
    .wb-ui .header .navbar-brand img { max-width: 140px; }
    .wb-ui .header .wb-language { margin-inline-start: 0; }
    .wb-ui .dashboard-header__left { flex-basis: 100%; }
    .wb-ui .dashboard-header .user-info { width: 100%; }
    .wb-ui .dashboard-header .user-info__right { justify-content: flex-end; flex-wrap: wrap; }
    .wb-ui .dashboard-header .user-info__right > .wb-language { margin-inline-end: auto; }
    .wb-ui .dashboard-header .wb-language__menu { inset-inline-start: 0; inset-inline-end: auto; }
    .wb-ui :is(.card, .custom--card) > :is(.card-header, .card-footer) { padding: 16px; }
    .wb-ui :is(.card, .custom--card) > .card-body, .wb-ui .modal-body { padding: 16px; }
    .wb-ui .modal-header, .wb-ui .modal-footer { padding: 16px; }
    .wb-ui .form-group { margin-block-end: 20px; }
    .wb-ui .dashboard-body { padding-block: 20px; }
}