/*SHOELACE OVERRIDES*/
:root,
:host,
.sl-theme-light {
    /* Brand colors from config — changing these in the Config table reskins the app */

    /* Primary: Nav bar, sidebar selected, headers, Shoelace primary variant, Tom Select tags, GrapesJS */
    --app-color-primary: #00296B;
    /* Secondary: Sub-nav dropdowns, skeleton loaders, GrapesJS toolbar, AI generate button */
    --app-color-secondary: #014386;
    /* Tertiary: Supplementary brand color for lighter accents and backgrounds */
    --app-color-tertiary: #65B4D7;
    /* Accent: CTA/action buttons (.sl-accent), process buttons, active filters, sidebar selection, hierarchy highlights */
    --app-color-accent: #F57600;
    /* Accent 2: Pricing essentials tier, secondary accent for multi-color UI elements */
    --app-color-accent-2: #0A89FF;
    /* Accent 3: Pricing plus tier, tertiary accent — rotates with accent when brand-swapping */
    --app-color-accent-3: #F57600;

    /* Status colors (hardcoded defaults — not configurable) */
    --app-color-danger: #DC2626;
    --app-color-success: #16A34A;
    --app-color-warning: #FFB133;
    --app-color-info: #0A89FF;

    /* Shoelace success shade ramp */
    --sl-color-success-50: #e9fcf0;
    --sl-color-success-100: #cbf8dc;
    --sl-color-success-200: #91f0b4;
    --sl-color-success-300: #56e88c;
    --sl-color-success-400: #1ede64;
    --sl-color-success-500: #16a34a;
    --sl-color-success-600: #12843c;
    --sl-color-success-700: #0e652d;
    --sl-color-success-800: #09451f;
    --sl-color-success-900: #052611;
    --sl-color-success-950: #03160a;

    /* Shoelace danger shade ramp */
    --sl-color-danger-50: #fbe9e9;
    --sl-color-danger-100: #f8d3d3;
    --sl-color-danger-200: #f1a8a8;
    --sl-color-danger-300: #ea7d7d;
    --sl-color-danger-400: #e35151;
    --sl-color-danger-500: #dc2626;
    --sl-color-danger-600: #b21d1d;
    --sl-color-danger-700: #851515;
    --sl-color-danger-800: #590e0e;
    --sl-color-danger-900: #2c0707;
    --sl-color-danger-950: #160404;

    /* Shoelace warning shade ramp */
    --sl-color-warning-50: #fff5e5;
    --sl-color-warning-100: #ffeed2;
    --sl-color-warning-200: #ffdeaa;
    --sl-color-warning-300: #ffcf82;
    --sl-color-warning-400: #ffc05b;
    --sl-color-warning-500: #ffb133;
    --sl-color-warning-600: #f49600;
    --sl-color-warning-700: #b57000;
    --sl-color-warning-800: #774900;
    --sl-color-warning-900: #392300;
    --sl-color-warning-950: #191000;

    /* Shoelace info/neutral-blue shade ramp */
    --sl-color-info-50: #e5f3ff;
    --sl-color-info-100: #cde8ff;
    --sl-color-info-200: #9cd1ff;
    --sl-color-info-300: #6cbaff;
    --sl-color-info-400: #3ba3ff;
    --sl-color-info-500: #0a8dff;
    --sl-color-info-600: #0071d4;
    --sl-color-info-700: #00559f;
    --sl-color-info-800: #003869;
    --sl-color-info-900: #001c34;
    --sl-color-info-950: #000e19;

    /* Computed derivatives */
    --app-color-primary-light: #0046b8;
    --app-color-accent-hover: #c25b00;
    --app-color-accent-glow: rgba(245,118,0,0.50);
    /* Auto-contrast: black or white text depending on accent lightness */
    --app-color-accent-contrast: #000000;
    --app-color-primary-contrast: #ffffff;

    /* Shoelace primary shade ramp — maps to BRAND PRIMARY (navy) */
    --sl-color-primary-50: #e5efff;
    --sl-color-primary-100: #bcd5ff;
    --sl-color-primary-200: #68a2ff;
    --sl-color-primary-300: #146eff;
    --sl-color-primary-400: #0049bf;
    --sl-color-primary-500: #00296b;
    --sl-color-primary-600: #002259;
    --sl-color-primary-700: #001b47;
    --sl-color-primary-800: #001435;
    --sl-color-primary-900: #000d23;
    --sl-color-primary-950: #000a19;

    /* Accent shade ramp — for action buttons and CTA elements */
    --app-color-accent-50: #fff1e5;
    --app-color-accent-100: #ffe3cb;
    --app-color-accent-200: #ffc796;
    --app-color-accent-300: #ffaa60;
    --app-color-accent-400: #ff8e2b;
    --app-color-accent-500: #f57200;
    --app-color-accent-600: #c45c00;
    --app-color-accent-700: #934500;
    --app-color-accent-800: #632e00;
    --app-color-accent-900: #321700;
    --app-color-accent-950: #190c00;

    --indicator-color: #014386;
    --sl-z-index-toast: 99999999999999;
    --sl-z-index-dialog: 9999999999999;
}

/*
 * .sl-accent — Apply to any Shoelace component that should use accent
 * instead of primary (navy). Locally overrides the --sl-color-primary-* tokens
 * so Shoelace internals (focus rings, active states, hover) all work correctly.
 *
 * Usage: <sl-button variant="primary" class="sl-accent">Action</sl-button>
 */
.sl-accent {
    --sl-color-primary-50: var(--app-color-accent-50);
    --sl-color-primary-100: var(--app-color-accent-100);
    --sl-color-primary-200: var(--app-color-accent-200);
    --sl-color-primary-300: var(--app-color-accent-300);
    --sl-color-primary-400: var(--app-color-accent-400);
    --sl-color-primary-500: var(--app-color-accent-500);
    --sl-color-primary-600: var(--app-color-accent-600);
    --sl-color-primary-700: var(--app-color-accent-700);
    --sl-color-primary-800: var(--app-color-accent-800);
    --sl-color-primary-900: var(--app-color-accent-900);
    --sl-color-primary-950: var(--app-color-accent-950);
}

/*LOGO*/
/* #logo is now an <img> tag (route-aware via the logo_url Twig global) — its
   image comes from the src attribute, NOT from background-image. Keeping a
   background-image here would bleed through transparent pixels of the src
   image. Only #mobileLogo (still a <div>) needs background-image. */
#mobileLogo{
    background-image: url("https://app.nueras.ai/media/default/logo-nuera.png");
}

/*DEFAULT*/
sl-button[variant="default"]:hover::part(label){
    color:#3f3f46;
}

sl-button[variant="default"]:hover::part(base){
    background:lightgrey;
    border:none;
}

/* Dark mode — True Dark neutral surfaces */

/* Config navy has no dark value — invisible on dark surfaces. Use nuera navy. */
[data-theme="dark"] {
    --app-color-primary: var(--nf-navy);
}

[data-theme="dark"] .primary-color-bg {
    background: #252525 !important;
}
[data-theme="dark"] .secondary-color-bg {
    background: var(--nf-bg-card, #252525) !important;
}
[data-theme="dark"] #sideBar sl-tree-item::part(item--selected) {
    background: rgba(0, 119, 182, 0.12) !important;
}
[data-theme="dark"] .subNavDropdown[expanded] {
    background: var(--nf-bg-card, #252525) !important;
    border-color: var(--nf-border, rgba(148,184,216,0.1)) !important;
}
[data-theme="dark"] sl-button[variant="default"]:hover::part(base) {
    background: #22405F !important;
    border: none;
}
[data-theme="dark"] sl-button[variant="default"]:hover::part(label) {
    color: #fff !important;
}

/*PRIMARY*/

.primary-color-bg{
    background: var(--app-color-primary) !important;
}

.primary-color-text{
    color: var(--app-color-primary) !important;
}

/*SECONDARY*/

.secondary-color-bg{
    background: var(--app-color-secondary) !important;
}

.secondary-color-text{
    color: var(--app-color-secondary) !important;
}

/*ACCENT*/

.accent-color-bg,
.accent-color-bg::part(item--selected){
    background: var(--app-color-accent) !important;
    color: var(--app-color-accent-contrast) !important;
}

.accent-color-text{
    color: var(--app-color-accent) !important;
}

/*DANGER*/
.danger-color-bg{
    background: var(--app-color-danger) !important;
}

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

.danger-color-text:hover{
    color: var(--app-color-danger) !important;
}

/*SUCCESS*/
.success-color-bg{
    background: var(--app-color-success) !important;
}

.success-color-text{
    color: var(--app-color-success) !important;
}

.success-color-text:hover{
    color: var(--app-color-success) !important;
}


/*NUETRAL*/
.neutral-color-bg{
    background: lightgray;
}

.neutral-color-border{
    border: 1px solid lightgray;
}

/* Dark-mode override — without this, the Title Opinion grid's nested
   Burden Groups / Owners detail panels (TitleOpinionCellRenderer.js) stayed
   light grey on a dark page. */
[data-theme="dark"] .neutral-color-bg{
    background: var(--nf-bg-surface, #1C1C1C);
    color: var(--nf-text-primary, #E5E5E5);
}
[data-theme="dark"] .neutral-color-border{
    border-color: var(--nf-border, #333333);
}

/*Special*/

/*Sidebar*/
#sideBar sl-tree-item::part(item--selected){
    background: var(--app-color-accent);
    color: var(--app-color-accent-contrast);
}

sl-skeleton#sideBar{
    --color: var(--app-color-secondary);
}

.subNavDropdown[expanded]{
    background: var(--app-color-secondary);
    border-top: var(--app-color-primary) 1px solid;
    border-bottom: var(--app-color-primary) 1px solid;
}

/*Custom Role Selector*/
.active-role{
    background: var(--app-color-primary);
    color:#ffffff;
}

/*Tom Select Overrides*/
.ts-wrapper.multi .ts-control > div {
    cursor: pointer;
    margin: 0 3px 3px 0;
    padding: 2px 6px;
    background: var(--app-color-primary) !important;
    color: #fff;
    border: 1px solid var(--app-color-secondary);
}
.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
    border-left: 1px solid var(--app-color-secondary) !important;
    margin-left: 6px;
}

/* Power BI Bookmarks */
.pbi-bookmarks sl-icon-button::part(base) {
    color: var(--app-color-accent);
}

/* Hierarchy Manager */

.hierarchy-manager sl-icon-button::part(base) {
    color: var(--app-color-primary);
}

.hierarchy-manager sl-radio sl-spinner{
    --indicator-color: var(--app-color-primary);
    --track-color: #ffffff;
}

.hierarchy-manager .selected, .hierarchy-manager .ag-row-selected{
    background: var(--app-color-accent);
    color: var(--app-color-accent-contrast);
}

.hierarchy-manager .deleting{
    -webkit-animation: deleteBlink 1s infinite;  /* Safari 4+ */
    -moz-animation: deleteBlink 1s infinite;  /* Fx 5+ */
    -o-animation: deleteBlink 1s infinite;  /* Opera 12+ */
    animation: deleteBlink 1s infinite;  /* IE 10+, Fx 29+ */
}

@-webkit-keyframes deleteBlink {
    0%, 49% {
        background-color: var(--app-color-accent);
    }
    50%, 100% {
        background-color: #e50000;
    }
}

/* Screen Editor */
#fdn-se {
    --fdn-se-selected-bg: rgba(0, 119, 182, 0.12);
}

#fdn-se sl-tree-item::part(item--selected){
    background-color: var(--fdn-se-selected-bg);
}

.gjs-block{
    background-color: var(--nf-bg-card);
}

.fdn-rightbar-middle .active-panel-button{
    background-color: var(--fdn-se-selected-bg);
}

#fdn-se sl-icon-button.active-panel-button::part(base){
    color: var(--app-color-accent);
}

#fdn-se .fdn-se-topbar-controls sl-icon-button.active-control::part(base){
    color: var(--app-color-accent);
    background-color: var(--fdn-se-selected-bg);
}

.gjs-rte-toolbar-ui{
    background-color: var(--nf-bg-card);
    border: 1px solid var(--nf-border);
}
.gjs-rte-active{
    color: var(--app-color-accent);
    background-color: var(--fdn-se-selected-bg);
}

.fdn-screen-selector .selected-screen{
    background-color: var(--fdn-se-selected-bg);
    border-left: 3px solid var(--app-color-accent);
}
.fdn-screen-selector .selected-screen,
.fdn-screen-selector .selected-screen sl-input::part(input){
    color: var(--nf-text-primary);
    font-weight: 600;
}

/* GrapesJS panels — on `body` not `:root` so var(--nf-*) resolves against the dark override. */
body{
    --gjs-primary-color: var(--nf-bg-card);
    --gjs-secondary-color: var(--nf-text-primary);
    --gjs-tertiary-color: var(--app-color-accent);
    --gjs-quaternary-color: var(--app-color-accent);
    --gjs-color-highlight: var(--app-color-secondary);
}