/* Native Excalidraw surfaces that should read as Quindi editor chrome.
   This file is loaded after the vendor bundle and must stay behavior-neutral. */

/* ── Dark islands on a white canvas ───────────────────────────────────────────
   The app chrome is dark; Excalidraw's light theme painted white islands, toolbar,
   sidebar and dialogs in the middle of it. Its dark theme has the right surfaces but
   also inverts the canvas (the static scene is filtered while drawing, so no CSS can
   undo that half). So: keep the light theme — the scene stays white, embeds and
   exports keep their light keying — and hand it the vendor dark-theme variable set,
   minus --theme-filter, with the surfaces retargeted to the Quindi greys. The accent
   stays Excalidraw's own; only type and corner radii come from the app tokens. The
   user-toggled dark theme keeps working: it re-declares the same names. */
.excalidraw {
    --ui-font: var(--font-sans, "Inter", system-ui, sans-serif);
    --border-radius-md: var(--radius-xs, 6px);
    --border-radius-lg: var(--radius-sm, 9px);
    --color-outline: var(--color-gray-80);
    --list-border-color: var(--color-gray-80);
    --ExcTextField--border: var(--color-border-outline-variant);
    --userlist-hint-bg-color: var(--color-gray-90);
    --userlist-hint-heading-color: var(--color-gray-30);
    --userlist-hint-text-color: var(--color-gray-40);
    --userlist-collaborators-border-color: var(--color-gray-80);
    --ImageExportModal-preview-border: #5c5c5c;
    --button-destructive-bg-color: #5a0000;
    --button-destructive-color: #ffa8a8;
    --button-gray-1: #363636;
    --button-gray-2: #272727;
    --button-gray-3: #222;
    --mobile-action-button-bg: var(--island-bg-color);
    --mobile-color-border: rgba(255, 255, 255, .85);
    --button-special-active-bg-color: #204624;
    --dialog-border-color: var(--quindi-border, rgba(255, 255, 255, 0.08));
    --dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path fill="%23ced4da" d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
    --focus-highlight-color: #228be6;
    --icon-green-fill-color: #69db7c;
    --default-bg-color: var(--quindi-surface, #141414);
    --input-bg-color: var(--quindi-surface-0, #0E0E0E);
    --input-border-color: rgba(255, 255, 255, 0.12);
    --input-hover-bg-color: var(--quindi-surface, #141414);
    --input-label-color: #e9ecef;
    --island-bg-color: var(--quindi-surface-2, #1C1C1C);
    --island-bg-color-alt: var(--quindi-surface, #141414);
    --keybinding-color: var(--color-gray-60);
    --link-color: #4dabf7;
    --overlay-bg-color: rgba(52, 58, 64, .12);
    --popup-secondary-bg-color: var(--quindi-surface-3, #242424);
    --popup-text-color: #ced4da;
    --popup-text-inverted-color: #2c2c2c;
    --select-highlight-color: #4dabf7;
    --modal-shadow: 0px 100px 80px rgba(0, 0, 0, .07), 0px 41.7776px 33.4221px rgba(0, 0, 0, .0503198), 0px 22.3363px 17.869px rgba(0, 0, 0, .0417275), 0px 12.5216px 10.0172px rgba(0, 0, 0, .035), 0px 6.6501px 5.32008px rgba(0, 0, 0, .0282725), 0px 2.76726px 2.21381px rgba(0, 0, 0, .0196802);
    --avatar-border-color: var(--color-gray-85);
    --scrollbar-thumb: #343a40;
    --scrollbar-thumb-hover: #495057;
    --color-slider-track: hsl(244, 23%, 39%);
    --color-selection: #3530c4;
    --color-icon-white: var(--color-gray-90);
    --color-primary: #a8a5ff;
    --color-primary-darker: #b2aeff;
    --color-primary-darkest: #beb9ff;
    --color-primary-light: #4f4d6f;
    --color-primary-light-darker: #43415e;
    --color-primary-hover: #bbb8ff;
    --color-disabled: var(--color-gray-70);
    --color-text-warning: var(--color-gray-80);
    --color-danger: #ffa8a5;
    --color-danger-dark: #672120;
    --color-danger-darker: #8f2625;
    --color-danger-darkest: #ac2b29;
    --color-danger-text: #fbcbcc;
    --color-danger-background: #fbcbcc;
    --color-danger-icon-background: #672120;
    --color-danger-color: #261919;
    --color-danger-icon-color: #fbcbcc;
    --color-warning-background: var(--color-warning);
    --color-warning-icon-background: var(--color-warning-dark);
    --color-warning-color: var(--color-gray-80);
    --color-warning-icon-color: var(--color-gray-80);
    --color-muted: var(--color-gray-80);
    --color-muted-darker: var(--color-gray-60);
    --color-muted-darkest: var(--color-gray-20);
    --color-muted-background: var(--color-gray-40);
    --color-muted-background-darker: var(--color-gray-20);
    --color-logo-text: #e2dfff;
    --color-surface-high: var(--quindi-surface-3, #242424);
    --color-surface-low: var(--quindi-surface, #141414);
    --color-surface-mid: var(--quindi-surface-2, #1C1C1C);
    --color-surface-lowest: var(--quindi-surface-0, #0E0E0E);
    --color-on-surface: var(--quindi-text, #F4F6F9);
    --color-brand-hover: #bbb8ff;
    --color-on-primary-container: #e0dfff;
    --color-brand-active: #d0ccff;
    --color-border-outline: #8e8d9c;
    --color-border-outline-variant: rgba(255, 255, 255, 0.14);
    --color-surface-primary-container: #403e6a;
}
/* Soften the floating drawing controls, independently of the canvas theme.
   Surface tokens come from the editor shell; shared/read-only views retain
   their existing appearance. Foreground opacity and tool states stay intact. */
.editor-shell .excalidraw {
    --input-label-color: var(--quindi-text);
    --popup-text-color: var(--quindi-text);
    --color-on-surface: var(--quindi-text);
    --shadow-island: var(--editor-surface-shadow);
    --shadow-island-stronger: var(--editor-surface-shadow);
    --keybinding-color: var(--quindi-text-soft);
    --color-disabled: var(--quindi-text-soft);
    --mobile-action-button-bg: var(--editor-surface);
}
@media (min-width: 600px) and (min-height: 500px), (min-width: 1000px) {
    .editor-shell .excalidraw .excalidraw-ui-top-left { min-height: 2.75rem; }
    .editor-shell .excalidraw .App-menu_top .sidebar-trigger { margin-top: .25rem; }
}
.editor-shell .excalidraw :is(.Island:not(.mobile-shape-actions), .zoom-actions, .undo-redo-buttons, .mobile-misc-tools-container) {
    background-color: var(--editor-surface);
    -webkit-backdrop-filter: var(--editor-surface-filter);
    backdrop-filter: var(--editor-surface-filter);
}
/* The mobile action row is a transparent layout container; blur individual
   controls so its empty space cannot smear the canvas or nearby popovers. */
.editor-shell .excalidraw .mobile-shape-actions :is(.compact-action-button, .ToolIcon__icon) {
    -webkit-backdrop-filter: var(--editor-surface-filter);
    backdrop-filter: var(--editor-surface-filter);
}
.editor-shell .excalidraw :is(.dropdown-menu-container, .context-menu, .sidebar) {
    background-color: var(--editor-panel-surface);
    box-shadow: var(--editor-surface-shadow);
    -webkit-backdrop-filter: var(--editor-surface-filter);
    backdrop-filter: var(--editor-surface-filter);
}
.editor-shell .excalidraw :is(.main-menu-trigger, .help-icon, .sidebar-trigger) {
    --color-surface-low: var(--editor-surface);
    --color-surface-mid: var(--editor-surface);
    --color-surface-lowest: var(--quindi-border);
    -webkit-backdrop-filter: var(--editor-surface-filter);
    backdrop-filter: var(--editor-surface-filter);
}
/* These groups already paint a surface. Clear the vendor's opaque button
   underlays so zoom and undo/redo share the same translucent treatment. */
.editor-shell .excalidraw :is(.zoom-actions, .undo-redo-buttons) {
    --color-surface-low: transparent;
    box-shadow: var(--editor-surface-shadow);
}
@media (min-width: 600px) and (min-height: 500px), (min-width: 1000px) {
    .editor-shell .excalidraw .App-menu_bottom {
        bottom: var(--editor-footer-bottom);
        align-items: center;
    }
}

/* Library previews are drawn with dark strokes; the vendor dark theme inverts them
   through --theme-filter, which is exactly the variable left out above. */
.excalidraw .library-unit__dragger > svg { filter: invert(93%) hue-rotate(180deg); }
.editor-shell .excalidraw .library-unit__dragger > svg {
    filter: var(--editor-library-filter, invert(93%) hue-rotate(180deg));
}
/* The component-level dark rules the vendor keys on .theme--dark, replayed for the
   always-dark islands. */
.excalidraw .Dialog__action-button--primary { color: var(--color-gray-100); }
.excalidraw .library-unit--skeleton {
    background-image: linear-gradient(-45deg, var(--color-gray-100), var(--color-gray-80), var(--color-gray-100));
}
.excalidraw .library-menu-items__no-items { color: var(--color-gray-40); }
.excalidraw .library-menu-browse-button { color: var(--color-gray-100); }
.excalidraw .HintViewer { color: var(--color-gray-60); }
.excalidraw .HintViewer kbd { border-color: var(--color-gray-60); }
.excalidraw .welcome-screen-decor,
.excalidraw .welcome-screen-menu-item__shortcut { color: var(--color-gray-60); }
.excalidraw .welcome-screen-menu-item:hover { background-color: var(--color-surface-low); }
.excalidraw .picker-swatch[aria-label=transparent] .picker-keybinding { color: #000; }

.excalidraw .context-menu {
    min-width: 204px;
    padding: 5px;
    background: var(--quindi-surface-3, #242424);
    border: 1px solid var(--quindi-border, rgba(255, 255, 255, 0.08));
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--elev-3, 0 10px 32px rgba(0, 0, 0, 0.55));
    color: var(--quindi-text, #F4F6F9);
    font-family: var(--font-sans, Inter, system-ui, sans-serif);
    font-size: 13px;
}

.excalidraw .context-menu button {
    color: var(--quindi-text, #F4F6F9);
}

.excalidraw .context-menu-item {
    min-width: 192px;
    min-height: 31px;
    padding: 5px 8px 5px 25px;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    border-radius: var(--radius-sm, 9px);
    color: var(--quindi-text, #F4F6F9);
    font-family: var(--font-sans, Inter, system-ui, sans-serif);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
    transition: background-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

.excalidraw .context-menu-item .context-menu-item__label {
    margin-inline-end: 0;
}

.excalidraw .context-menu-item .context-menu-item__shortcut {
    padding: 1px 4px;
    border: 1px solid var(--quindi-border, rgba(255, 255, 255, 0.08));
    border-radius: var(--radius-xs, 6px);
    background: var(--quindi-surface-0, #0E0E0E);
    color: var(--quindi-text-soft, #8B95A5);
    font-family: var(--font-sans, Inter, system-ui, sans-serif);
    font-size: var(--text-xs, 11px);
    font-weight: 500;
    line-height: 1.2;
    opacity: 1;
}

.excalidraw .context-menu-item .context-menu-item__shortcut:empty {
    display: none;
}

.excalidraw .context-menu-item:hover {
    background: var(--quindi-surface-2, #1C1C1C);
    color: var(--quindi-text, #F4F6F9);
}

.excalidraw .context-menu-item:hover .context-menu-item__shortcut {
    color: var(--quindi-text, #F4F6F9);
}

.excalidraw .context-menu-item:focus-visible {
    z-index: 1;
    outline: none;
    background: var(--quindi-surface-2, #1C1C1C);
    box-shadow: inset 0 0 0 2px var(--accent, #00D68F);
}

.excalidraw .context-menu-item.checkmark {
    background: var(--accent-soft, rgba(0, 214, 143, 0.14));
    color: var(--accent, #00D68F);
}

.excalidraw .context-menu-item.checkmark::before {
    left: 8px;
    color: var(--accent, #00D68F);
    font-weight: 600;
}

.excalidraw .context-menu-item.dangerous .context-menu-item__label {
    color: var(--quindi-red-text, #F08080);
}

.excalidraw .context-menu-item.dangerous:hover,
.excalidraw .context-menu-item.dangerous:focus-visible {
    background: rgba(229, 72, 77, 0.14);
}

.excalidraw .context-menu-item.dangerous:hover .context-menu-item__label,
.excalidraw .context-menu-item.dangerous:focus-visible .context-menu-item__label {
    color: var(--quindi-red-text, #F08080);
}

.excalidraw .context-menu-item-separator {
    margin: 3px 4px;
    border-top-color: var(--quindi-border-soft, rgba(255, 255, 255, 0.04));
}

@media (max-width: 730px), (pointer: coarse) {
    .excalidraw .context-menu {
        min-width: 192px;
    }

    .excalidraw .context-menu-item {
        min-width: 180px;
        min-height: 40px;
        padding-block: 8px;
    }

    .excalidraw .context-menu-item .context-menu-item__shortcut {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .excalidraw .context-menu-item {
        transition: none;
    }
}

/* ── Toolbar vs. the Quindi top-left pills ────────────────────────────────────
   The document chip and the Recents pill (~350px) live in the top-left corner, in
   Quindi chrome above the vendor layer. Excalidraw centres its toolbar in the middle
   grid column and lets it overflow symmetrically, so as soon as the width shrinks
   (library sidebar open, narrow window) the toolbar's head slides under the pills and
   the lock / hand tools become unreachable. Reserve the pills' width in the left column
   and let the toolbar fall back to start-alignment when it no longer fits — "safe
   center" keeps it centred whenever there is room. */
.excalidraw .App-menu_top {
    grid-template-columns: minmax(372px, 1fr) minmax(0, 2fr) minmax(0, 1fr);
}
.excalidraw .App-menu_top > .shapes-section {
    justify-self: safe center;
}
@media (max-width: 1100px) {
    .editor-shell .excalidraw .App-menu_top {
        grid-template-columns: minmax(250px, 1fr) minmax(0, 2fr) minmax(88px, 1fr);
    }
}
@media (max-width: 850px) {
    .editor-shell .excalidraw .App-menu_top {
        grid-template-columns: minmax(160px, 1fr) minmax(0, 2fr) minmax(88px, 1fr);
    }
}