@import url("desktop-navigation.css");

/* FEATURE-0024 Cross-client visual themes - Shared semantic tokens keep the
   Server, WebAssembly, and MAUI Blazor hosts on the same visual contract. */
:root,
html[data-bp-theme="dog"] {
    --bp-canvas: #ffffff;
    --bp-surface: #ffffff;
    --bp-surface-muted: #eeeeee;
    --bp-text: #111714;
    --bp-text-muted: #626b66;
    --bp-border: #888f8b;
    --bp-accent: #48956c;
    --bp-accent-hover: #377654;
    --bp-on-accent: #ffffff;
    --bp-shadow: rgba(20, 42, 31, 0.18);
    --bp-overlay-surface: #5cbb88;
    --bp-overlay-text: #ffffff;
}

html[data-bp-theme="clean"] {
    --bp-canvas: #f3f7f6;
    --bp-surface: #ffffff;
    --bp-surface-muted: #e7efed;
    --bp-text: #182320;
    --bp-text-muted: #526b65;
    --bp-border: #b7c9c3;
    --bp-accent: #176b64;
    --bp-accent-hover: #11564f;
    --bp-on-accent: #ffffff;
    --bp-shadow: rgba(23, 50, 45, 0.12);
    --bp-overlay-surface: #dce9e5;
    --bp-overlay-text: #18342f;
}

/* FEATURE-0024 Cross-client visual themes - The Dog variant inherits the original
   accent and overlay, but restricts card priority colors to solid header bands. */
html[data-bp-theme="clean-green-dog"] {
    --bp-canvas: #f5f5f5;
    --bp-on-accent: #111714;
    --bp-card-header: var(--bp-accent);
    --bp-card-header-text: #111714;
}

html[data-bp-theme="clean-green-dog"] .action-card-content {
    /* Override isolated legacy whole-card fills without changing other themes. */
    color: var(--bp-text) !important;
    background-color: #ffffff !important;
}

html[data-bp-theme="clean-green-dog"] .action-card-header {
    color: var(--bp-card-header-text) !important;
    background-color: var(--bp-card-header) !important;
    border-radius: 14px 14px 0 0;
}

html[data-bp-theme="clean-green-dog"] .action-card-header :is(p, a, strong) {
    color: inherit !important;
}

html[data-bp-theme="clean-green-dog"] :is(.action-card-potentialemail, .action-card-matchedattachmentbyrule, .action-card-potentialdocument).action-card-secondary-0 {
    --bp-card-header: #5eb185;
}

html[data-bp-theme="clean-green-dog"] :is(.action-card-potentialemail, .action-card-matchedattachmentbyrule, .action-card-potentialdocument).action-card-secondary-1 {
    --bp-card-header: #48956c;
}

html[data-bp-theme="clean-green-dog"] :is(.action-card-potentialemail, .action-card-matchedattachmentbyrule, .action-card-potentialdocument).action-card-secondary-2 {
    --bp-card-header: #3f845f;
}

html[data-bp-theme="clean-green-dog"] :is(.action-card-potentialemail, .action-card-matchedattachmentbyrule, .action-card-potentialdocument).action-card-secondary-3 {
    --bp-card-header: #367550;
    --bp-card-header-text: #ffffff;
}

html[data-bp-theme="clean-green-dog"] :is(.action-card-potentialemail, .action-card-matchedattachmentbyrule, .action-card-potentialdocument).action-card-secondary-4 {
    --bp-card-header: #2e6645;
    --bp-card-header-text: #ffffff;
}

html[data-bp-theme="clean-green-dog"] :is(.action-card-potentialemail, .action-card-matchedattachmentbyrule, .action-card-potentialdocument).action-card-secondary-5 {
    --bp-card-header: #25573b;
    --bp-card-header-text: #ffffff;
}

html[data-bp-theme="clean-green-dog"] :is(.action-card-potentialemail, .action-card-matchedattachmentbyrule, .action-card-potentialdocument).action-card-secondary-6 {
    --bp-card-header: #1d4830;
    --bp-card-header-text: #ffffff;
}

html[data-bp-theme="clean-green-dog"] :is(.navbar-header, .topmenu.main-nav, .topmenu.main-nav .navbar) {
    color: var(--bp-on-accent);
    background: var(--bp-accent);
}

/* FEATURE-0024 Cross-client visual themes - The collapsed mobile menu has no nav
   element, so its decorative band is opt-in and cannot occupy space in other themes. */
.theme-top-bar {
    display: none;
}

html[data-bp-theme="clean-green-dog"] .theme-top-bar {
    display: block;
    position: fixed;
    inset: 0 0 auto;
    height: 64px;
    background: var(--bp-accent);
    z-index: 1;
    pointer-events: none;
}

html[data-bp-theme="clean-green-dog"] .simulation-preview-banner {
    background: var(--bp-accent);
    color: var(--bp-on-accent);
}

html[data-bp-theme="clean-green-dog"] .simulation-preview-banner :is(strong, time) {
    color: inherit;
}

/* FEATURE-0024 Cross-client visual themes - Isolated Bootstrap controls otherwise
   retain blue accents inside the new green-and-white card. Other palettes are untouched. */
html[data-bp-theme="clean-green-dog"] .btn-primary {
    background-color: var(--bp-accent) !important;
    border-color: var(--bp-accent-hover) !important;
    color: var(--bp-on-accent) !important;
}

html[data-bp-theme="clean-green-dog"] .btn-primary:is(:hover, :focus, :active) {
    background-color: var(--bp-accent-hover) !important;
    color: #ffffff !important;
}

html[data-bp-theme="clean-green-dog"] .potential-bill-attachment-carousel-thumbnail-button.is-selected {
    border-color: var(--bp-accent);
    box-shadow: 0 0 0 3px rgba(72, 149, 108, 0.24);
}

html[data-bp-theme="clean-green-dog"] .potential-bill-attachment-carousel-link-thumbnail {
    color: var(--bp-on-accent);
    background: var(--bp-accent);
}

html[data-bp-theme="clean-white"] {
    --bp-canvas: #f5f5f5;
    --bp-surface: #ffffff;
    --bp-surface-muted: #ebebeb;
    --bp-text: #202020;
    --bp-text-muted: #626262;
    --bp-border: #c5c5c5;
    --bp-accent: #5a5a5a;
    --bp-accent-hover: #444444;
    --bp-on-accent: #ffffff;
    --bp-shadow: rgba(0, 0, 0, 0.12);
    --bp-overlay-surface: #ececec;
    --bp-overlay-text: #303030;
    --bp-attachment-priority-0: #f2f2f2;
    --bp-attachment-priority-1: #e7e7e7;
    --bp-attachment-priority-2: #dcdcdc;
    --bp-attachment-priority-3: #d1d1d1;
    --bp-attachment-priority-4: #c6c6c6;
    --bp-attachment-priority-5: #bbbbbb;
    --bp-attachment-priority-6: #b0b0b0;
}

html[data-bp-theme="clean-orange"] {
    --bp-canvas: #f5f5f5;
    --bp-surface: #ffffff;
    --bp-surface-muted: #ebebeb;
    --bp-text: #202020;
    --bp-text-muted: #626262;
    --bp-border: #c5c5c5;
    --bp-accent: #d6774d;
    --bp-accent-hover: #bd5f38;
    --bp-on-accent: #251713;
    --bp-shadow: rgba(0, 0, 0, 0.12);
    --bp-overlay-surface: #ececec;
    --bp-overlay-text: #303030;
    --bp-attachment-priority-0: #fff1eb;
    --bp-attachment-priority-1: #fce5dc;
    --bp-attachment-priority-2: #f8d8cd;
    --bp-attachment-priority-3: #f3cabe;
    --bp-attachment-priority-4: #ecbbaf;
    --bp-attachment-priority-5: #e5ac9e;
    --bp-attachment-priority-6: #dc9d8d;
}

/* FEATURE-0024 Cross-client visual themes - Potential bill cards receive legacy
   action-state greens. CSS isolation makes those declarations unusually specific, so clean
   variants explicitly map each document priority to a theme-aligned shade without changing card behavior. */
html[data-bp-theme="clean-white"] .action-card-potentialemail[class*="action-card-secondary-"] .action-card-content,
html[data-bp-theme="clean-white"] .action-card-matchedattachmentbyrule[class*="action-card-secondary-"] .action-card-content,
html[data-bp-theme="clean-orange"] .action-card-potentialemail[class*="action-card-secondary-"] .action-card-content,
html[data-bp-theme="clean-orange"] .action-card-matchedattachmentbyrule[class*="action-card-secondary-"] .action-card-content {
    color: var(--bp-text) !important;
    background-color: var(--bp-attachment-priority-0) !important;
}

html[data-bp-theme="clean-white"] :is(.action-card-potentialemail, .action-card-matchedattachmentbyrule).action-card-secondary-1 .action-card-content,
html[data-bp-theme="clean-orange"] :is(.action-card-potentialemail, .action-card-matchedattachmentbyrule).action-card-secondary-1 .action-card-content {
    background-color: var(--bp-attachment-priority-1) !important;
}

html[data-bp-theme="clean-white"] :is(.action-card-potentialemail, .action-card-matchedattachmentbyrule).action-card-secondary-2 .action-card-content,
html[data-bp-theme="clean-orange"] :is(.action-card-potentialemail, .action-card-matchedattachmentbyrule).action-card-secondary-2 .action-card-content {
    background-color: var(--bp-attachment-priority-2) !important;
}

html[data-bp-theme="clean-white"] :is(.action-card-potentialemail, .action-card-matchedattachmentbyrule).action-card-secondary-3 .action-card-content,
html[data-bp-theme="clean-orange"] :is(.action-card-potentialemail, .action-card-matchedattachmentbyrule).action-card-secondary-3 .action-card-content {
    background-color: var(--bp-attachment-priority-3) !important;
}

html[data-bp-theme="clean-white"] :is(.action-card-potentialemail, .action-card-matchedattachmentbyrule).action-card-secondary-4 .action-card-content,
html[data-bp-theme="clean-orange"] :is(.action-card-potentialemail, .action-card-matchedattachmentbyrule).action-card-secondary-4 .action-card-content {
    background-color: var(--bp-attachment-priority-4) !important;
}

html[data-bp-theme="clean-white"] :is(.action-card-potentialemail, .action-card-matchedattachmentbyrule).action-card-secondary-5 .action-card-content,
html[data-bp-theme="clean-orange"] :is(.action-card-potentialemail, .action-card-matchedattachmentbyrule).action-card-secondary-5 .action-card-content {
    background-color: var(--bp-attachment-priority-5) !important;
}

html[data-bp-theme="clean-white"] :is(.action-card-potentialemail, .action-card-matchedattachmentbyrule).action-card-secondary-6 .action-card-content,
html[data-bp-theme="clean-orange"] :is(.action-card-potentialemail, .action-card-matchedattachmentbyrule).action-card-secondary-6 .action-card-content {
    background-color: var(--bp-attachment-priority-6) !important;
}

html[data-bp-theme="clean-white"] .action-card-potentialemail .action-card-header p,
html[data-bp-theme="clean-white"] .action-card-potentialemail .action-card-header a,
html[data-bp-theme="clean-white"] .action-card-matchedattachmentbyrule .action-card-header p,
html[data-bp-theme="clean-white"] .action-card-matchedattachmentbyrule .action-card-header a,
html[data-bp-theme="clean-orange"] .action-card-potentialemail .action-card-header p,
html[data-bp-theme="clean-orange"] .action-card-potentialemail .action-card-header a,
html[data-bp-theme="clean-orange"] .action-card-matchedattachmentbyrule .action-card-header p,
html[data-bp-theme="clean-orange"] .action-card-matchedattachmentbyrule .action-card-header a {
    color: var(--bp-text) !important;
}

html,
body,
#app,
.app-root-mobile,
.app-root-desktop,
.app-content {
    color: var(--bp-text);
    background-color: var(--bp-canvas);
}

a {
    color: var(--bp-accent);
}

.btn-primary,
.button.btn-primary {
    color: var(--bp-on-accent);
    background-color: var(--bp-accent);
    border-color: var(--bp-accent-hover);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.button.btn-primary:hover,
.button.btn-primary:focus {
    color: var(--bp-on-accent);
    background-color: var(--bp-accent-hover);
    border-color: var(--bp-accent-hover);
}

.btn-secondary,
.button.btn-secondary {
    color: var(--bp-accent);
    background-color: var(--bp-surface);
    border-color: var(--bp-accent);
}

.btn-secondary:hover,
.btn-secondary:focus,
.button.btn-secondary:hover,
.button.btn-secondary:focus {
    color: var(--bp-on-accent);
    background-color: var(--bp-accent);
    border-color: var(--bp-accent);
}

.navbar-header,
.topmenu.main-nav li a.router-link-active,
.topmenu.main-nav li a.router-link-active:hover,
.topmenu.main-nav li a.router-link-active:focus {
    color: var(--bp-on-accent);
    background-color: var(--bp-accent);
}

.bottom-menu,
.my-reconnect-modal > div {
    color: var(--bp-text);
    background-color: var(--bp-surface);
}

.action-card-content {
    color: var(--bp-text);
    background-color: var(--bp-surface);
    border-color: var(--bp-border);
    filter: drop-shadow(4px 4px 3px var(--bp-shadow));
}

.section-header {
    color: var(--bp-text);
    background-color: var(--bp-surface-muted);
}

.section-header.selected {
    color: var(--bp-on-accent);
    background-color: var(--bp-accent);
}

.section-body {
    color: var(--bp-text);
    background-color: var(--bp-surface);
}

.sliding-overlay {
    color: var(--bp-overlay-text);
    background-color: var(--bp-overlay-surface);
}

/* FEATURE-0024 Cross-client visual themes - Clip only the decoration at its owning
   card's edges. The portal follows that card without changing card content layout,
   menu overflow or hit testing. JavaScript owns the explicit up/down animation. */
.action-card-dog-layer {
    position: fixed;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    z-index: 60;
}

.sliding-dog-overlay {
    position: absolute;
    right: 14px;
    bottom: 0;
    /* FEATURE-0038 Action card dog speech bubble - One stack moves both elements;
       the bubble can wrap without stretching or shifting the right-aligned dog. */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    width: min(320px, calc(100% - 28px));
    pointer-events: none;
    user-select: none;
    transform: translateY(calc(100% + 28px));
}

.sliding-dog-artwork {
    position: relative;
    flex: none;
    width: var(--bp-dog-artwork-width);
    height: calc(var(--bp-dog-artwork-width) * var(--bp-dog-visible-ratio));
    overflow: hidden;
}

.sliding-dog-artwork img {
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: bottom;
    pointer-events: none;
}

/* FEATURE-0038 Action card dog speech bubble - Native's white/black speech treatment
   stays readable across themes; the original card title remains the accessible copy. */
.sliding-dog-speech {
    position: relative;
    box-sizing: border-box;
    min-width: var(--bp-dog-artwork-width);
    max-width: 100%;
    padding: 12px 16px;
    border-radius: 16px;
    background: #fff;
    color: #000;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    overflow-wrap: anywhere;
    box-shadow: 0 3px 8px rgb(0 0 0 / 15%);
}

.sliding-dog-speech::after {
    content: "";
    position: absolute;
    right: calc(var(--bp-dog-artwork-width) / 2 - 10px);
    bottom: -11px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 12px solid #fff;
}

/* Only the decorative dog follows the theme switch; functional sliding sheets remain active. */
html[data-bp-dog-overlay="disabled"] .sliding-dog-overlay {
    display: none !important;
}

input,
select,
textarea {
    color: var(--bp-text);
    background-color: var(--bp-surface);
    border-color: var(--bp-border);
}

@media (prefers-reduced-motion: no-preference) {
    body,
    .app-root-mobile,
    .app-root-desktop,
    .app-content,
    .action-card-content {
        transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
    }
}

/* FEATURE-0057 Blazor typography and CSS ownership - Shared host-scaled title spacing.
   Already padded containers can override the inset to avoid applying it twice. */
.bp-page-title {
    margin-block: calc(2 * var(--bp-layout-unit, 1rem)) calc(1 * var(--bp-layout-unit, 1rem));
    margin-inline: var(--bp-page-title-inset, calc(1 * var(--bp-layout-unit, 1rem)));
}