/*
  LiveSchools365 brand enforcement — Red / Orange / Blue / White only.
  Loaded last so scoped page CSS cannot reintroduce teal/green/purple.
*/

:root {
    --ls-blue: #1e5eff;
    --ls-blue-deep: #0b3fd9;
    --ls-blue-soft: #e8f0ff;
    --ls-orange: #ff6a00;
    --ls-orange-deep: #e85d00;
    --ls-orange-soft: #fff1e6;
    --ls-red: #e63946;
    --ls-red-deep: #c62828;
    --ls-red-soft: #ffe8ea;
    --ls-white: #ffffff;
    --ls-ink: #0f172a;
    --ls-muted: #475569;
    --ls-line: #dbe4f5;
    --ls-page: #f4f7ff;
}

/* Bootstrap remaps — orange caption on white; red fill on hover */
.btn,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-warning,
.btn-danger,
.btn-info,
.btn-light,
.btn-dark,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-danger,
.btn-outline-info {
    color: var(--ls-orange) !important;
    background-color: var(--ls-white) !important;
    border-color: var(--ls-orange) !important;
    box-shadow: none !important;
}

.btn:hover,
.btn:focus,
.btn-primary:hover,
.btn-secondary:hover,
.btn-success:hover,
.btn-warning:hover,
.btn-danger:hover,
.btn-info:hover,
.btn-light:hover,
.btn-dark:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-success:hover,
.btn-outline-warning:hover,
.btn-outline-danger:hover,
.btn-outline-info:hover,
.btn:hover:not(:disabled),
.btn:focus-visible {
    color: #fff !important;
    background-color: var(--ls-red) !important;
    border-color: var(--ls-red) !important;
}

.bg-success,
.text-bg-success,
.bg-primary,
.text-bg-primary,
.bg-warning,
.bg-danger,
.text-bg-danger {
    background-color: var(--ls-orange) !important;
    border-color: var(--ls-orange) !important;
    color: #fff !important;
}

.text-success,
.text-primary {
    color: var(--ls-blue) !important;
}

.text-danger {
    color: var(--ls-red) !important;
}

.text-warning {
    color: var(--ls-orange) !important;
}

/* Authenticated workspace tokens */
.app-shell.authenticated {
    --ui-ink: var(--ls-ink);
    --ui-muted: var(--ls-muted);
    --ui-border: var(--ls-line);
    --ui-border-strong: #c5d4f0;
    --ui-surface: var(--ls-white);
    --ui-surface-soft: var(--ls-blue-soft);
    --ui-surface-hover: var(--ls-orange-soft);
    --ui-primary: var(--ls-blue);
    --ui-primary-hover: var(--ls-blue-deep);
    --ui-primary-soft: var(--ls-blue-soft);
    --ui-accent: var(--ls-orange);
    --ui-danger: var(--ls-red);
}

.app-shell,
.app-shell .app-content,
.app-shell .app-sidebar,
.app-shell .app-chrome,
.app-shell .app-topbar,
.public-shell,
.landing-page {
    color: var(--ls-ink);
}

.app-shell .app-content {
    background: var(--ls-page) !important;
}

/* Common teal/green → brand blue/orange/red */
.app-shell .app-content :is(
    .eyebrow,
    .section-head span,
    .section-intro > span,
    [class*="-head"] > span:first-child,
    .finance-head span,
    .catalog-head span,
    .report-group > header span,
    .metric-grid span,
    .filter-heading span,
    .report-heading span
) {
    color: var(--ls-orange) !important;
}

.app-shell .app-content :is(h1, h2, h3, h4) {
    color: var(--ls-ink) !important;
}

/* Compact authenticated page shells — padding + no unused header blurbs */
.app-shell .app-content :is(.finance-page, .operations-page, .approval-shell, .reports-page, .oad-page, .permissions-shell, .communication-portal, .communication-dashboard) {
    padding: 1rem 1.15rem 1.35rem !important;
    box-sizing: border-box !important;
}

.app-shell .app-content :is(.finance-head, .approval-head, .oad-head, .portal-head, .dashboard-head, .records-head, .page-head) {
    align-items: center !important;
}

.app-shell .app-content :is(.finance-head, .approval-head, .oad-head, .portal-head, .dashboard-head, .page-head) > div > p,
.app-shell .app-content :is(.finance-head, .approval-head, .oad-head) p {
    display: none !important;
}

.app-shell .app-content :is(p, small, label, .muted) {
    color: var(--ls-muted) !important;
}

.app-shell .app-content :is(.panel, .page-head, .finance-form, .finance-filters, .finance-decision, .finance-state, .workspace-shell .panel) {
    border-color: var(--ls-line) !important;
    background: var(--ls-white) !important;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--ls-blue) 8%, transparent);
}

.app-shell .app-content :is(.page-head, .panel.page-head) {
    border-top: 3px solid var(--ls-blue) !important;
    align-items: center !important;
}

.app-shell .app-content .page-head .head-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    align-self: center !important;
    gap: 0.55rem !important;
}

/* Proper geometry for every header / toolbar action control */
.app-shell .app-content :is(
    .page-head,
    .records-head,
    .dashboard-head,
    .head-context,
    .module-head,
    .head-actions,
    .allocation-head-actions,
    .oar-head,
    .catalog-head,
    .filter-heading,
    .toolbar
) :is(
    a.ghost,
    .ghost,
    a.primary,
    .primary,
    a.secondary,
    .secondary,
    a.hub-link,
    .hub-link,
    a.page-action,
    .page-action,
    a.dashboard-link,
    .dashboard-link,
    a.records-link,
    .records-link,
    a.back-link,
    .back-link,
    a.return-link,
    .return-link,
    .voice-command-btn,
    .apply-button,
    button.refresh,
    .refresh,
    a.btn,
    button.btn
),
.app-shell .app-content :is(
    a.dashboard-link,
    .dashboard-link,
    a.records-link,
    .records-link,
    a.back-link,
    .back-link,
    a.return-link,
    .return-link,
    a.hub-link,
    .hub-link,
    a.page-action,
    .page-action
),
.app-shell .app-content .page-head > a,
.app-shell .app-content .records-head > a,
.app-shell .app-content .oar-head > a,
.app-shell .app-content .catalog-head > a {
    align-self: center !important;
    height: auto !important;
    min-height: 2.45rem !important;
    padding: 0.55rem 0.95rem !important;
    gap: 0.45rem !important;
    border-radius: 8px !important;
    font-weight: 750 !important;
    font-size: 0.84rem !important;
    line-height: 1.1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

/* Compact square icon-only toolbar buttons keep equal padding */
.app-shell .app-content :is(button.refresh, .refresh, .decision-actions button, .grid-icon-button, .icon-button):not(.sort-button) {
    min-width: 2.45rem !important;
    min-height: 2.45rem !important;
    padding: 0.45rem !important;
    gap: 0 !important;
}

.app-shell .app-content :is(
    a.ghost,
    .ghost,
    a.hub-link,
    .hub-link,
    a.page-action,
    .page-action,
    a.dashboard-link,
    .dashboard-link,
    a.records-link,
    .records-link,
    a.back-link,
    .back-link,
    a.return-link,
    .return-link,
    .page-head > a,
    .records-head > a,
    .oar-head > a
) i {
    font-size: 1rem !important;
    line-height: 1 !important;
}

/* Ensure brand color rules also cover return-link / bare header navs */
.app-shell .app-content :is(a.return-link, .return-link, .page-head > a, .records-head > a, .oar-head > a, .catalog-head > a):not(.menu-item):not([role="tab"]) {
    color: var(--ls-orange) !important;
    background: var(--ls-white) !important;
    border: 1px solid var(--ls-orange) !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.app-shell .app-content :is(a.return-link, .return-link, .page-head > a, .records-head > a, .oar-head > a, .catalog-head > a):not(.menu-item):not([role="tab"]):hover:not(:disabled) {
    color: #fff !important;
    background: var(--ls-red) !important;
    border-color: var(--ls-red) !important;
}

/*
  Application-wide action buttons:
  base = white + orange caption/border
  hover = red fill + white caption
*/
.app-shell .app-content :is(
    button,
    .btn,
    .primary,
    .secondary,
    .ghost,
    .page-action,
    .hub-link,
    .apply-button,
    .payroll-primary-action,
    .icon-button,
    .grid-icon-button,
    .grid-actions button,
    .grid-pager button,
    .records-link,
    .back-link,
    .dashboard-link,
    .voice-command-btn,
    .finance-actions button,
    .finance-actions a,
    .finance-filters button,
    .finance-table button,
    .form-actions button,
    .preview-actions button,
    .paper-actions .icon-btn,
    a.primary,
    a.secondary,
    a.btn,
    button.primary,
    button.secondary,
    button.danger,
    .danger,
    .btn-danger,
    .delete-action,
    .reject-action,
    .add-grade,
    .add-button,
    .toolbar button,
    .toolbar a,
    .bulk-actions button,
    .bulk-actions a,
    .import-actions button,
    .import-actions a,
    .excel-actions button,
    .excel-actions a,
    .oad-create,
    .oai-head button,
    .oar-tools button,
    .oar-actions button
):not(.workflow-tab):not(.mode-toggle .tab):not(.oai-views button):not(.answer-filters button):not(.menu-item):not(.sidebar-help):not([role="tab"]):not(.sort-button) {
    color: var(--ls-orange) !important;
    background: var(--ls-white) !important;
    border: 1px solid var(--ls-orange) !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.app-shell .app-content :is(
    button,
    .btn,
    .primary,
    .secondary,
    .ghost,
    .page-action,
    .hub-link,
    .apply-button,
    .payroll-primary-action,
    .icon-button,
    .grid-icon-button,
    .grid-actions button,
    .grid-pager button,
    .records-link,
    .back-link,
    .dashboard-link,
    .voice-command-btn,
    .finance-actions button,
    .finance-actions a,
    .finance-filters button,
    .finance-table button,
    .form-actions button,
    .preview-actions button,
    .paper-actions .icon-btn,
    a.primary,
    a.secondary,
    a.btn,
    button.primary,
    button.secondary,
    button.danger,
    .danger,
    .btn-danger,
    .delete-action,
    .reject-action,
    .add-grade,
    .add-button,
    .toolbar button,
    .toolbar a,
    .bulk-actions button,
    .bulk-actions a,
    .import-actions button,
    .import-actions a,
    .excel-actions button,
    .excel-actions a,
    .oad-create,
    .oai-head button,
    .oar-tools button,
    .oar-actions button
):not(.workflow-tab):not(.mode-toggle .tab):not(.oai-views button):not(.answer-filters button):not(.menu-item):not(.sidebar-help):not([role="tab"]):not(.sort-button):hover:not(:disabled):not([disabled]),
.app-shell .app-content :is(
    button,
    .btn,
    .primary,
    .secondary,
    .ghost,
    .page-action,
    .hub-link,
    .apply-button,
    .icon-button,
    .voice-command-btn,
    a.primary,
    a.secondary,
    a.btn
):not(.workflow-tab):not(.mode-toggle .tab):not([role="tab"]):not(.sort-button):focus-visible {
    color: #fff !important;
    background: var(--ls-red) !important;
    border-color: var(--ls-red) !important;
}

.app-shell .app-content :is(button, .btn, .primary, .icon-button, .voice-command-btn):disabled,
.app-shell .app-content :is(button, .btn, .primary, .icon-button, .voice-command-btn)[disabled] {
    color: color-mix(in srgb, var(--ls-orange) 55%, #ffffff) !important;
    border-color: color-mix(in srgb, var(--ls-orange) 40%, #ffffff) !important;
    background: var(--ls-white) !important;
    opacity: 0.7;
    cursor: not-allowed;
}

/* Keep pager current page readable inside brand rules */
.app-shell .app-content .grid-page-number,
.app-shell .app-content .grid-pager .grid-page-number,
.app-shell .app-content .grid-pager button.active,
.app-shell .app-content .grid-pager button[aria-current="page"] {
    color: #fff !important;
    background: var(--ls-blue) !important;
    border-color: var(--ls-blue) !important;
}

.app-shell .app-content table thead th {
    color: var(--ls-blue-deep) !important;
    background: var(--ls-blue-soft) !important;
    border-bottom-color: var(--ls-line) !important;
}

.app-shell .app-content table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--ls-blue) 4%, #ffffff) !important;
}

.app-shell .app-content table tbody tr:hover {
    background: var(--ls-orange-soft) !important;
}

.app-shell .app-content :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .input, .profile-input):focus {
    border-color: var(--ls-blue) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ls-blue) 18%, transparent) !important;
}

.app-shell .app-content input[type="checkbox"],
.app-shell .app-content input[type="radio"] {
    accent-color: var(--ls-blue) !important;
}

/* Dashboard hub cards — soft brand wells, not solid color blocks */
.app-shell .app-content .dashboard-hub-card {
    color: var(--ls-orange) !important;
    background: #ffffff !important;
    border-color: #ffe0c2 !important;
}

.app-shell .app-content .dashboard-hub-card:hover {
    color: var(--ls-red) !important;
    border-color: var(--ls-red) !important;
}

.app-shell .app-content .dashboard-hub-card .card-icon,
.app-shell .app-content .dashboard-hub-card .card-icon > i {
    color: var(--ls-red) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.app-shell .app-content .dashboard-hub-card:hover .card-icon,
.app-shell .app-content .dashboard-hub-card:hover .card-icon > i {
    color: var(--ls-red-deep) !important;
    background: transparent !important;
}

.app-shell .app-content .dashboard-hub-card .card-icon-ring {
    display: none !important;
}

.app-shell .app-content .dashboard-hub-card strong {
    color: inherit !important;
}

.app-shell .app-content .dashboard-hub-hero {
    border-color: #ffe0c2 !important;
    background:
        linear-gradient(135deg, rgba(255, 106, 0, 0.1) 0%, transparent 42%),
        linear-gradient(225deg, rgba(30, 94, 255, 0.1) 0%, transparent 40%),
        #ffffff !important;
}

.app-shell .app-content .dashboard-hub-featured-card {
    color: var(--ls-orange) !important;
    background: #ffffff !important;
    border-color: #ffe0c2 !important;
}

.app-shell .app-content .dashboard-hub-featured-card:hover {
    color: var(--ls-red) !important;
    border-color: var(--ls-red) !important;
}

.app-shell .app-content .dashboard-hub-featured-card .featured-icon {
    color: var(--ls-red) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.app-shell .app-content .dashboard-hub-featured-card.guide .featured-icon,
.app-shell .app-content .dashboard-hub-featured-card.implementer .featured-icon {
    color: var(--ls-blue) !important;
}

.app-shell .app-content .dashboard-hub-featured-card:hover .featured-icon {
    color: var(--ls-red) !important;
}

/* Other module tiles — soft blue/orange/red wells */
.app-shell .app-content :is(.workspace-link, .hub-tile, .module-card, .finance-workspaces > a, .operations-panel) > i:first-child,
.app-shell .app-content :is(.workspace-link, .hub-tile, .module-card) i.bi:first-child {
    color: var(--ls-blue) !important;
    background: var(--ls-blue-soft) !important;
}

.app-shell .app-content :is(.workspace-link, .hub-tile, .module-card, .finance-workspaces > a):nth-child(3n + 2) > i:first-child,
.app-shell .app-content :is(.workspace-link, .hub-tile, .module-card):nth-child(3n + 2) i.bi:first-child {
    color: var(--ls-orange) !important;
    background: var(--ls-orange-soft) !important;
}

.app-shell .app-content :is(.workspace-link, .hub-tile, .module-card, .finance-workspaces > a):nth-child(3n) > i:first-child,
.app-shell .app-content :is(.workspace-link, .hub-tile, .module-card):nth-child(3n) i.bi:first-child {
    color: var(--ls-red) !important;
    background: var(--ls-red-soft) !important;
}

.app-shell .app-content :is(.workspace-link, .hub-tile, .module-card, .finance-workspaces > a, a.card-link) {
    border-color: var(--ls-line) !important;
    background: var(--ls-white) !important;
    color: var(--ls-ink) !important;
}

.app-shell .app-content :is(.workspace-link, .hub-tile, .module-card, .finance-workspaces > a):hover {
    border-color: var(--ls-orange) !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--ls-orange) 14%, transparent);
}

/* Status / badges */
.app-shell .app-content :is(.status-pill, .access-badge, .badge-soft, .status-badge) {
    color: var(--ls-blue-deep) !important;
    background: var(--ls-blue-soft) !important;
}

.app-shell .app-content :is(.status-badge.active, .status-pill.success, .badge-success, .operations-stock-status.available) {
    color: var(--ls-blue-deep) !important;
    background: var(--ls-blue-soft) !important;
}

.app-shell .app-content :is(.status-badge.warning, .status-pill.warning, .operations-stock-status.low, b.unread) {
    color: var(--ls-orange-deep) !important;
    background: var(--ls-orange-soft) !important;
}

.app-shell .app-content :is(.status-badge.danger, .status-pill.danger, .status-badge.error) {
    color: var(--ls-red-deep) !important;
    background: var(--ls-red-soft) !important;
}

/* Progress / accents that were green */
.app-shell .app-content progress,
.app-shell .app-content [accent-color] {
    accent-color: var(--ls-blue) !important;
}

.app-shell .app-content :is(.workflow-tab.active, .mode-toggle .tab.active, .finance-module-tab.active, .grid-page-number) {
    color: #fff !important;
    background: var(--ls-blue) !important;
}

.app-shell .app-content .mode-toggle {
    border-color: var(--ls-line) !important;
    background: var(--ls-blue-soft) !important;
}

.app-shell .app-content .mode-toggle .tab.active {
    color: var(--ls-blue-deep) !important;
    background: var(--ls-white) !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--ls-blue) 14%, transparent);
}

/* Left borders / section markers formerly teal */
.app-shell .app-content :is(
    .finance-link-group > header,
    .finance-metrics article,
    .payroll-period-bar,
    .operations-daily-brief,
    .operations-replenish,
    .preview-message
) {
    border-left-color: var(--ls-blue) !important;
    border-top-color: var(--ls-blue);
}

.app-shell .app-content .finance-metrics article:nth-child(3n + 2) {
    border-top-color: var(--ls-orange) !important;
}

.app-shell .app-content .finance-metrics article:nth-child(3n) {
    border-top-color: var(--ls-red) !important;
}

/* Public + login surfaces */
.public-shell .public-topbar {
    background: linear-gradient(90deg, #0a2540 0%, #123a6b 55%, var(--ls-blue) 100%) !important;
}

.public-shell .brand-symbol {
    background: var(--ls-orange) !important;
    color: #fff !important;
}

.public-shell .public-header nav a.active:not(.trial-link),
.public-shell .public-header nav a:hover:not(.trial-link) {
    color: var(--ls-orange-deep) !important;
    background: var(--ls-orange-soft) !important;
    border-color: #ffd2a8 !important;
}

.login-page .primary,
.login-page button[type="submit"],
.login-shell .primary,
.login-shell button[type="submit"],
.customer-access button[type="submit"],
.sign-in-panel button[type="submit"],
.public-shell .trial-link,
.public-not-found-actions a {
    color: var(--ls-orange) !important;
    background: var(--ls-white) !important;
    border: 1px solid var(--ls-orange) !important;
    box-shadow: none !important;
}

.login-page .primary:hover,
.login-page button[type="submit"]:hover,
.login-shell .primary:hover,
.login-shell button[type="submit"]:hover,
.customer-access button[type="submit"]:hover,
.sign-in-panel button[type="submit"]:hover,
.public-shell .trial-link:hover,
.public-not-found-actions a:hover {
    color: #fff !important;
    background: var(--ls-red) !important;
    border-color: var(--ls-red) !important;
}

/* Native file picker button */
.app-shell .app-content input[type="file"]::file-selector-button {
    color: var(--ls-orange) !important;
    background: var(--ls-white) !important;
    border: 1px solid var(--ls-orange) !important;
    border-radius: 6px;
    padding: 0.4rem 0.75rem;
    margin-right: 0.65rem;
    font-weight: 700;
    cursor: pointer;
}

.app-shell .app-content input[type="file"]::file-selector-button:hover {
    color: #fff !important;
    background: var(--ls-red) !important;
    border-color: var(--ls-red) !important;
}

.login-page .trial-card:hover,
.login-page .persona-card:hover,
.login-page .account-card:hover {
    border-color: var(--ls-blue) !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--ls-blue) 16%, transparent);
}

.login-page .trial-card.active,
.login-page .persona-card.active,
.login-page .account-card.active {
    border-color: var(--ls-orange) !important;
    background: var(--ls-orange-soft) !important;
}

/* Notice / alert banners */
.app-shell .app-content :is(.alert-success, .save-status.success, .feedback.success) {
    color: var(--ls-blue-deep) !important;
    background: var(--ls-blue-soft) !important;
    border-color: var(--ls-blue) !important;
}

.app-shell .app-content :is(.alert-danger, .save-status.error, .feedback.error, .error-banner) {
    color: var(--ls-red-deep) !important;
    background: var(--ls-red-soft) !important;
    border-color: var(--ls-red) !important;
}

.app-shell .app-content :is(.alert-warning, .info-banner, .guide-banner, .trial-banner) {
    color: var(--ls-orange-deep) !important;
    background: var(--ls-orange-soft) !important;
    border-color: var(--ls-orange) !important;
}

/* Links inside app */
.app-shell .app-content a:not(.primary):not(.secondary):not(.btn):not(.workspace-link):not(.hub-tile):not(.module-card):not(.topbar-journey) {
    color: var(--ls-blue-deep);
}

.app-shell .app-content a:not(.primary):not(.secondary):not(.btn):hover {
    color: var(--ls-orange-deep);
}

/* Loading spinner */
.app-shell .global-loading-spinner {
    border-color: var(--ls-blue-soft) !important;
    border-top-color: var(--ls-orange) !important;
}

/* Force help / drawer accents */
.app-shell .help-symbol,
.help-drawer .help-symbol {
    background: linear-gradient(135deg, var(--ls-orange), var(--ls-red)) !important;
    color: #fff !important;
}

/* Sidebar / topbar chrome — white + orange captions, red on hover */
.app-shell .app-sidebar,
.app-shell .app-topbar,
.app-shell .app-chrome,
.app-shell .topbar-menu {
    background: #ffffff !important;
}

.app-shell .menu-item,
.app-shell .submenu-item,
.app-shell .sidebar-help,
.app-shell .topbar-menu-item,
.app-shell .topbar-drop-item,
.app-shell .topbar-journey,
.app-shell .menu-group h4,
.app-shell .menu-group h4 i,
.app-shell .menu-icon,
.app-shell .menu-chevron,
.app-shell .menu-group-chevron,
.app-shell .topbar-drop-caret,
.app-shell .topbar-sub-caret {
    color: var(--ls-orange) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

.app-shell .menu-item,
.app-shell .sidebar-help,
.app-shell .topbar-menu-item,
.app-shell .topbar-journey {
    border-color: #ffe0c2 !important;
}

.app-shell .menu-item:hover,
.app-shell .menu-item.active,
.app-shell .submenu-item:hover,
.app-shell .submenu-item.active,
.app-shell .sidebar-help:hover,
.app-shell .sidebar-help[aria-expanded="true"],
.app-shell .topbar-menu-item:hover,
.app-shell .topbar-menu-item.active,
.app-shell .topbar-drop.open > .topbar-menu-item,
.app-shell .topbar-drop.active > .topbar-menu-item,
.app-shell .topbar-drop-item:hover,
.app-shell .topbar-drop-item.active,
.app-shell .topbar-journey:hover,
.app-shell .menu-group-toggle:hover h4,
.app-shell .menu-group-toggle:hover h4 i,
.app-shell .menu-item:hover .menu-icon,
.app-shell .menu-item.active .menu-icon,
.app-shell .menu-item:hover .menu-chevron,
.app-shell .menu-item.active .menu-chevron {
    color: var(--ls-red) !important;
    background: #ffffff !important;
    border-color: var(--ls-red) !important;
}

.app-shell .menu-item.active::before {
    background: var(--ls-orange) !important;
}

.app-shell .workspace-tabs,
.app-shell .workspace-tab {
    background: #ffffff !important;
    color: var(--ls-orange) !important;
    border-color: #ffe0c2 !important;
}

.app-shell .workspace-tab.active,
.app-shell .workspace-tab:hover,
.app-shell .workspace-tab-open:hover,
.app-shell .workspace-tab-close:hover {
    color: var(--ls-red) !important;
    background: #ffffff !important;
}

.app-shell .workspace-tab.active::before {
    background: var(--ls-orange) !important;
}

.app-shell .notice-bell:hover,
.app-shell .notice-popover-footer {
    color: var(--ls-red) !important;
    border-color: #ffe0c2 !important;
    background: #ffffff !important;
}

.app-shell .global-loading-spinner {
    border-color: var(--ls-line) !important;
    border-top-color: var(--ls-orange) !important;
}

/* Online assessment / metric accents (not action buttons) */
.app-shell .app-content :is(
    .oad-metrics i,
    .oa-metrics i,
    .oa-count,
    .oai-views button.active
) {
    color: var(--ls-blue) !important;
    background: var(--ls-blue-soft) !important;
}

/* Chrome action buttons (Trial Journey etc.) */
.app-shell .topbar-journey,
.app-shell .topbar-actions > a.topbar-journey {
    color: var(--ls-orange) !important;
    background: var(--ls-white) !important;
    border: 1px solid var(--ls-orange) !important;
    box-shadow: none !important;
}

.app-shell .topbar-journey:hover,
.app-shell .topbar-actions > a.topbar-journey:hover {
    color: var(--ls-red) !important;
    background: var(--ls-white) !important;
    border-color: var(--ls-red) !important;
}

/* Trend Developers sidebar logo — ~64% of brand strip (two 20% reductions) */
body .app-shell .brand-block .vendor-logo {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
}

body .app-shell .brand-block .vendor-logo img {
    width: 64% !important;
    max-width: 64% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 497 / 258 !important;
    object-fit: contain !important;
}

/* Landing / public CTAs — same button language */
.landing-page :is(a.primary-action, a.secondary-action, .hero-actions a, .cta-row a, button),
.public-shell :is(.trial-link, .public-not-found-actions a) {
    color: var(--ls-orange) !important;
    background: var(--ls-white) !important;
    border: 1px solid var(--ls-orange) !important;
    box-shadow: none !important;
}

.landing-page :is(a.primary-action, a.secondary-action, .hero-actions a, .cta-row a, button):hover,
.public-shell :is(.trial-link, .public-not-found-actions a):hover {
    color: #fff !important;
    background: var(--ls-red) !important;
    border-color: var(--ls-red) !important;
}