/* Researcher UI styles -- extracted from base.html's inline <style>.
   Loaded AFTER Bootstrap so the design-token layer overrides it. */

        /* ====================================================================
         * Design tokens (semantic, theme-aware)
         * --------------------------------------------------------------------
         * The whole app speaks ONE small vocabulary (surface, border, text,
         * accent, status, element-type tokens). Each theme swaps the values
         * underneath; component CSS never touches a hex code directly.
         *
         * Themes live on the <html data-theme="..."> attribute (set on the
         * server from the user's profile, refined on the client for "system"
         * mode). Component CSS therefore needs no per-theme branches.
         *
         * Legacy --app-* and --classic-* names are kept as aliases at the
         * bottom so existing component CSS keeps working unchanged.
         * ==================================================================*/

        /* ---- Light theme (default) ----------------------------------------*/
        :root,
        [data-theme="light"] {
            /* Surface */
            --surface-0:        #f6f7f9;   /* page background */
            --surface-1:        #ffffff;   /* card / dialog surface */
            --surface-2:        #f1f5f9;   /* inset / raised within card */
            --surface-hover:    #f8fafc;

            /* Border */
            --border-subtle:    #e2e8f0;
            --border-default:   #cbd5e1;
            --border-strong:    #94a3b8;

            /* Text */
            --text-primary:     #0f172a;
            --text-secondary:   #475569;
            --text-tertiary:    #94a3b8;
            --text-on-accent:   #ffffff;

            /* Accent */
            --accent:           #2563eb;
            --accent-hover:     #1d4ed8;
            --accent-soft:      #dbeafe;
            --accent-ring:      rgba(37, 99, 235, 0.22);

            /* Status */
            --success:          #16a34a;
            --success-soft:     #dcfce7;
            --warning:          #d97706;
            --warning-soft:     #fef3c7;
            --danger:           #dc2626;
            --danger-soft:      #fee2e2;

            /* Element types (vivid + readable in light) */
            --type-block:       #2563eb;  --type-block-soft:       #dbeafe;
            --type-branch:      #7c3aed;  --type-branch-soft:      #ede9fe;
            --type-randomizer:  #ea580c;  --type-randomizer-soft:  #ffedd5;
            --type-embedded:    #0d9488;  --type-embedded-soft:    #ccfbf1;
            --type-rating:      #db2777;  --type-rating-soft:      #fce7f3;
            --type-end:         #475569;  --type-end-soft:         #e2e8f0;

            /* Shadows */
            --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
            --shadow-md: 0 4px 8px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
            --shadow-lg: 0 12px 24px -6px rgba(15, 23, 42, 0.12), 0 4px 8px -4px rgba(15, 23, 42, 0.06);

            color-scheme: light;
        }

        /* ---- Dark theme ---------------------------------------------------*/
        [data-theme="dark"] {
            /* Surface (slate scale, easier on the eyes than pure black) */
            --surface-0:        #0b1220;
            --surface-1:        #131b2c;
            --surface-2:        #1c2538;
            --surface-hover:    #1a2236;

            /* Border */
            --border-subtle:    #1f2940;
            --border-default:   #2c3753;
            --border-strong:    #475569;

            /* Text */
            --text-primary:     #e6edf6;
            --text-secondary:   #9aa6b8;
            --text-tertiary:    #64748b;
            --text-on-accent:   #ffffff;

            /* Accent (slightly brighter so it remains primary in dark) */
            --accent:           #60a5fa;
            --accent-hover:     #93c5fd;
            --accent-soft:      #1e3a8a;
            --accent-ring:      rgba(96, 165, 250, 0.3);

            /* Status. Lighter for dark backgrounds */
            --success:          #4ade80;
            --success-soft:     #14532d;
            --warning:          #fbbf24;
            --warning-soft:     #78350f;
            --danger:           #f87171;
            --danger-soft:      #7f1d1d;

            /* Element types. Raise lightness so they read against dark surfaces */
            --type-block:       #60a5fa;  --type-block-soft:       #1e3a8a;
            --type-branch:      #c4b5fd;  --type-branch-soft:      #4c1d95;
            --type-randomizer:  #fb923c;  --type-randomizer-soft:  #7c2d12;
            --type-embedded:    #5eead4;  --type-embedded-soft:    #134e4a;
            --type-rating:      #f472b6;  --type-rating-soft:      #831843;
            --type-end:         #cbd5e1;  --type-end-soft:         #334155;

            --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
            --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.55), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
            --shadow-lg: 0 12px 24px -6px rgba(0, 0, 0, 0.6), 0 4px 8px -4px rgba(0, 0, 0, 0.5);

            color-scheme: dark;
        }

        /* ---- Legacy aliases ----------------------------------------------*/
        /* Old component CSS uses --app-* and --classic-* names; alias them to
           the new tokens so we don't have to rewrite everything in one pass. */
        :root {
            --app-bg:            var(--surface-0);
            --app-surface:       var(--surface-1);
            --app-soft:          var(--surface-2);
            --app-border:        var(--border-subtle);
            --app-border-strong: var(--border-default);
            --app-text:          var(--text-primary);
            --app-muted:         var(--text-secondary);
            --app-accent:        var(--accent);
            --app-accent-hover:  var(--accent-hover);
            --app-accent-soft:   var(--accent-soft);
            --app-success:       var(--success);
            --app-success-soft:  var(--success-soft);
            --app-warning:       var(--warning);
            --app-warning-soft:  var(--warning-soft);
            --app-danger:        var(--danger);
            --app-danger-soft:   var(--danger-soft);
            --app-shadow-sm:     var(--shadow-sm);
            --app-shadow-md:     var(--shadow-md);

            --classic-blue:      var(--accent);
            --classic-green:     var(--success);
            --sidebar-width:     250px;

            /* --logic-* aliases consumed by flow.html / builder.html */
            --logic-block-accent:      var(--type-block);
            --logic-block-soft:        var(--type-block-soft);
            --logic-branch-accent:     var(--type-branch);
            --logic-branch-soft:       var(--type-branch-soft);
            --logic-randomizer-accent: var(--type-randomizer);
            --logic-randomizer-soft:   var(--type-randomizer-soft);
            --logic-embedded-accent:   var(--type-embedded);
            --logic-embedded-soft:     var(--type-embedded-soft);
            --logic-rating-accent:     var(--type-rating);
            --logic-rating-soft:       var(--type-rating-soft);
            --logic-end-accent:        var(--type-end);
            --logic-end-soft:          var(--type-end-soft);
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: var(--app-bg);
            color: var(--app-text);
        }

        .navbar-brand {
            font-weight: 600;
            color: var(--app-accent) !important;
        }

        .btn-primary {
            background-color: var(--app-accent);
            border-color: var(--app-accent);
        }

        .btn-primary:hover,
        .btn-primary:focus {
            background-color: var(--app-accent-hover);
            border-color: var(--app-accent-hover);
        }

        .btn-success {
            background-color: var(--app-success);
            border-color: var(--app-success);
        }

        .btn-outline-primary {
            color: var(--app-accent);
            border-color: var(--app-accent);
        }

        .btn-outline-primary:hover,
        .btn-outline-primary:focus {
            background-color: var(--app-accent);
            border-color: var(--app-accent);
            color: #fff;
        }

        a { color: var(--app-accent); }
        a:hover { color: var(--app-accent-hover); }

        .card {
            background-color: var(--surface-1);
            color: var(--text-primary);
            border: 1px solid var(--border-subtle);
            box-shadow: var(--shadow-sm);
            margin-bottom: 1rem;
        }

        .card-header { background-color: var(--surface-2); border-bottom: 1px solid var(--border-subtle); color: var(--text-primary); }
        .card-footer { background-color: var(--surface-2); border-top: 1px solid var(--border-subtle); color: var(--text-primary); }

        /* Bootstrap form controls, pulled into the theme */
        .form-control, .form-select {
            background-color: var(--surface-1);
            color: var(--text-primary);
            border: 1px solid var(--border-default);
        }
        .form-control::placeholder { color: var(--text-tertiary); }
        .form-control:focus, .form-select:focus {
            background-color: var(--surface-1);
            color: var(--text-primary);
            border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-ring);
        }
        .form-control:disabled, .form-select:disabled {
            background-color: var(--surface-2);
            color: var(--text-tertiary);
        }
        .form-label { color: var(--text-primary); }
        .form-text { color: var(--text-secondary); }
        .text-muted { color: var(--text-secondary) !important; }
        /* Inline code / preformatted blocks. Bootstrap defaults to a hot pink
           (`#d63384`) on transparent which renders unreadable on the dark or
           tinted element-type headers (e.g. the embedded-data row's teal
           background). Use a neutral monospace tone with its own surface so
           the code is readable on every backdrop. */
        code, kbd, samp {
            color: var(--text-primary);
            background-color: var(--surface-2);
            padding: 0.1em 0.35em;
            border-radius: 4px;
            border: 1px solid var(--border-subtle);
            font-size: 0.875em;
        }
        pre {
            color: var(--text-primary);
            background-color: var(--surface-2);
            border: 1px solid var(--border-subtle);
            border-radius: 6px;
            padding: 0.6rem 0.8rem;
        }
        pre > code {
            background: transparent;
            border: none;
            padding: 0;
        }
        /* Inside tinted element headers (embedded data, randomizer, branch),
           the chip sits on a pale type-tint in light mode and a deep type-tint
           in dark mode. A surface-colored chip would blend into the light tint;
           use a translucent dark-on-tint in light and translucent light-on-tint
           in dark so the chip reads against ANY tint backdrop. The text adopts
           the type-accent for cohesion with the surrounding element. */
        .element-header code {
            background-color: rgba(15, 23, 42, 0.07);
            border: 1px solid rgba(15, 23, 42, 0.12);
            color: var(--type-accent, var(--text-primary));
            font-weight: 500;
        }
        [data-theme="dark"] .element-header code {
            background-color: rgba(230, 237, 246, 0.1);
            border-color: rgba(230, 237, 246, 0.18);
            color: var(--type-accent, var(--text-primary));
        }

        /* Bootstrap utility colors, re-routed to theme tokens so .bg-light etc.
           don't strand light surfaces on dark mode. */
        .bg-light  { background-color: var(--surface-2) !important; color: var(--text-primary); }
        .bg-white  { background-color: var(--surface-1) !important; color: var(--text-primary); }
        .bg-body   { background-color: var(--surface-0) !important; color: var(--text-primary); }
        .border    { border-color: var(--border-subtle) !important; }
        .text-dark { color: var(--text-primary) !important; }
        /* Bootstrap badges that combine bg-light with text-muted need higher
           text contrast so they remain legible on the now-darker surface. */
        .badge.bg-light { color: var(--text-secondary); border: 1px solid var(--border-subtle); }

        /* Bootstrap list-group (collaborators, settings lists). The default
           CSS variables resolve to #fff/#212529 and don't pick up our theme. */
        .list-group {
            --bs-list-group-bg: var(--surface-1);
            --bs-list-group-color: var(--text-primary);
            --bs-list-group-border-color: var(--border-subtle);
            --bs-list-group-action-color: var(--text-primary);
            --bs-list-group-action-hover-color: var(--text-primary);
            --bs-list-group-action-hover-bg: var(--surface-hover);
            --bs-list-group-action-active-color: var(--text-on-accent);
            --bs-list-group-action-active-bg: var(--accent);
        }
        .list-group-item {
            background-color: var(--surface-1);
            color: var(--text-primary);
            border-color: var(--border-subtle);
        }
        /* list-group-flush sits inside a card; let the card surface show
           through so the rows don't paint a brighter rectangle on top. */
        .list-group-flush > .list-group-item {
            background-color: transparent;
            border-color: var(--border-subtle);
        }

        /* Dropdowns, modals, and alerts get themed surfaces */
        .dropdown-menu {
            background-color: var(--surface-1);
            border: 1px solid var(--border-subtle);
            box-shadow: var(--shadow-md);
            color: var(--text-primary);
        }
        .dropdown-item { color: var(--text-primary); }
        .dropdown-item:hover, .dropdown-item:focus {
            background-color: var(--surface-hover);
            color: var(--text-primary);
        }
        /* Disabled state. Works for <a>, <button>, and <span>.dropdown-item.
           Hover/focus is suppressed so the item reads as truly inert; the
           inline badge inside still pops because it doesn't inherit opacity. */
        .dropdown-item.disabled,
        .dropdown-item:disabled {
            color: var(--text-tertiary);
            pointer-events: none;
            background-color: transparent;
            opacity: 0.7;
            cursor: not-allowed;
        }
        .dropdown-divider { border-top: 1px solid var(--border-subtle); }
        .modal-content {
            background-color: var(--surface-1);
            color: var(--text-primary);
            border: 1px solid var(--border-subtle);
        }
        .modal-header, .modal-footer { border-color: var(--border-subtle); }

        /* Tables */
        .table {
            color: var(--text-primary);
            --bs-table-bg: var(--surface-1);
            --bs-table-border-color: var(--border-subtle);
            --bs-table-striped-bg: var(--surface-2);
            --bs-table-hover-bg: var(--surface-hover);
        }

        .alert-info {
            background-color: var(--accent-soft);
            color: var(--accent-hover);
            border-color: var(--accent);
        }

        .sortable-ghost {
            opacity: 0.4;
        }

        .drag-handle {
            cursor: move;
            color: var(--text-tertiary);
        }

        .drag-handle:hover {
            color: var(--text-secondary);
        }

        /* Top app navbar */
        .navbar {
            background-color: var(--surface-1) !important;
            border-bottom: 1px solid var(--border-subtle);
        }
        .navbar .nav-link { color: var(--text-secondary) !important; }
        .navbar .nav-link:hover { color: var(--text-primary) !important; }

        /* Thin vertical divider used in the sticky survey-action toolbar to
           visually cluster authoring, lifecycle, and viewing actions without
           introducing extra labels. Tracks the border token so it follows
           both light/dark themes. */
        .survey-header-divider {
            display: inline-block;
            width: 1px;
            height: 22px;
            background: var(--border-default);
            margin: 0 0.15rem;
            flex: 0 0 auto;
            align-self: center;
        }

        /* ====================================================================
         * Unified notification dialog (appConfirm / appAlert / showToast)
         * --------------------------------------------------------------------
         * Every confirmation, warning, and one-off notification in the app
         * routes through these classes so users see the same visual language
         * everywhere, replacing browser-native confirm(), assorted Bootstrap
         * modals, and the un-themed colored toasts.
         *
         * Four kinds are supported. Info (accent), success, warning, and
         * danger. Each kind has a
         * tinted header band keyed on the corresponding semantic token so
         * light + dark themes adapt automatically.
         * ==================================================================*/
        .app-dialog .modal-content {
            border: 1px solid var(--border-default);
            border-radius: 12px;
            box-shadow: var(--shadow-lg);
            background: var(--surface-1);
            color: var(--text-primary);
            overflow: hidden;
        }
        .app-dialog .modal-header {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 1rem 1.25rem;
            background: var(--dialog-tint, var(--surface-2));
            border-bottom: 1px solid var(--border-subtle);
        }
        .app-dialog .app-dialog-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--surface-1);
            color: var(--dialog-accent, var(--accent));
            font-size: 1.15rem;
            flex: 0 0 auto;
            border: 1px solid var(--dialog-accent, var(--border-default));
        }
        .app-dialog .modal-title {
            margin: 0;
            font-size: 1.05rem;
            font-weight: 600;
            color: var(--text-primary);
            flex: 1 1 auto;
            min-width: 0;
        }
        .app-dialog .btn-close {
            margin: 0;
            opacity: 0.7;
        }
        .app-dialog .btn-close:hover { opacity: 1; }
        .app-dialog .modal-body {
            padding: 1.1rem 1.25rem;
            color: var(--text-primary);
            font-size: 0.95rem;
            line-height: 1.5;
            white-space: pre-line;
        }
        .app-dialog .modal-footer {
            padding: 0.75rem 1.25rem;
            background: var(--surface-1);
            border-top: 1px solid var(--border-subtle);
            gap: 0.5rem;
            display: flex;
            justify-content: flex-end;
        }
        .app-dialog .app-dialog-btn {
            font-weight: 500;
            min-width: 96px;
            padding: 0.4rem 0.95rem;
            border-radius: 6px;
        }
        /* Kind-specific accents */
        .app-dialog[data-kind="info"]    { --dialog-tint: var(--accent-soft);  --dialog-accent: var(--accent); }
        .app-dialog[data-kind="success"] { --dialog-tint: var(--success-soft); --dialog-accent: var(--success); }
        .app-dialog[data-kind="warning"] { --dialog-tint: var(--warning-soft); --dialog-accent: var(--warning); }
        .app-dialog[data-kind="danger"]  { --dialog-tint: var(--danger-soft);  --dialog-accent: var(--danger); }
        /* Confirm button color tracks kind so destructive confirms are red,
           warnings are amber, etc. Bootstrap btn-primary stays as the
           default for "info" so neutral confirms remain the brand color. */
        .app-dialog[data-kind="success"] .app-dialog-confirm,
        .app-dialog[data-kind="warning"] .app-dialog-confirm,
        .app-dialog[data-kind="danger"]  .app-dialog-confirm {
            background: var(--dialog-accent);
            border-color: var(--dialog-accent);
            color: var(--text-on-accent);
        }
        .app-dialog[data-kind="success"] .app-dialog-confirm:hover,
        .app-dialog[data-kind="warning"] .app-dialog-confirm:hover,
        .app-dialog[data-kind="danger"]  .app-dialog-confirm:hover {
            filter: brightness(0.92);
            color: var(--text-on-accent);
        }

        /* Themed toasts. These replace the un-themed bootstrap bg-success
           and bg-danger styling. Same kind taxonomy as the dialog so a
           confirm and its follow-up toast share a visual family. */
        .app-toast {
            background: var(--surface-1);
            color: var(--text-primary);
            border: 1px solid var(--border-default);
            border-left: 4px solid var(--dialog-accent, var(--accent));
            box-shadow: var(--shadow-md);
            border-radius: 8px;
            min-width: 280px;
            max-width: 380px;
        }
        .app-toast[data-kind="info"]    { --dialog-accent: var(--accent); }
        .app-toast[data-kind="success"] { --dialog-accent: var(--success); }
        .app-toast[data-kind="warning"] { --dialog-accent: var(--warning); }
        .app-toast[data-kind="danger"]  { --dialog-accent: var(--danger); }
        .app-toast .app-toast-body {
            display: flex;
            /* flex-start (not center) so the icon sits at the top of
               the message on a multi-line toast -- vertical-centering
               looks wrong when the body is several lines tall. */
            align-items: flex-start;
            gap: 0.6rem;
            padding: 0.7rem 0.85rem;
            flex: 1 1 auto;
        }
        .app-toast .app-toast-icon {
            color: var(--dialog-accent);
            font-size: 1.1rem;
            flex: 0 0 auto;
            /* Nudge down a hair so the icon visually aligns with the
               first line of the message text rather than the very
               top of the bounding box. */
            margin-top: 0.1rem;
        }
        .app-toast .app-toast-message {
            font-size: 0.92rem;
            color: var(--text-primary);
            flex: 1 1 auto;
        }
        .app-toast .btn-close {
            /* Pin to top-right inside the flex row -- without this
               the m-auto class (still set in the markup for backward
               compat) centers the button vertically, which on a
               tall multi-line toast leaves the X floating in the
               middle. align-self overrides the auto margins. */
            align-self: flex-start;
            margin: 0.55rem 0.6rem 0 0;
            opacity: 0.6;
        }
        .app-toast .btn-close:hover { opacity: 1; }

        /* Smooth eviction. When a toast is FIFO-evicted (because a newer one
           is pushing it out), it gets the `app-toast-leaving` marker, which
           slides it out to the right and collapses its own footprint. The
           remaining toasts reflow upward over the same 200ms so the stack
           glides rather than snapping. The toast's own opacity fade is
           preserved by Bootstrap's hide() call after the transition. */
        .app-toast {
            transition:
                opacity 0.18s ease,
                transform 0.22s ease,
                margin 0.22s ease,
                max-height 0.22s ease,
                padding 0.22s ease;
            transform-origin: top right;
            max-height: 320px; /* generous ceiling; collapsed to 0 on leaving */
            overflow: hidden;
        }
        .app-toast.app-toast-leaving {
            opacity: 0;
            transform: translateX(110%) scale(0.96);
            max-height: 0;
            margin-top: 0;
            margin-bottom: 0 !important;
            padding-top: 0;
            padding-bottom: 0;
            pointer-events: none;
        }

        /* Sticky survey-level header (title bar + tab nav) shared across Builder, Flow, Settings, Data */
        .survey-page-header {
            position: sticky;
            top: 0;
            z-index: 100;
            background: var(--surface-1);
            margin-bottom: 2rem;
        }

        .survey-header {
            background: var(--surface-1);
            border-bottom: 1px solid var(--border-subtle);
            padding: 1rem 0;
            color: var(--text-primary);
        }

        .page-tab-nav {
            background: var(--surface-1);
            border-bottom: 1px solid var(--border-subtle);
            padding: 0;
        }

        .page-tab-nav .nav-link {
            border: none;
            border-bottom: 2px solid transparent;
            color: var(--text-secondary);
            padding: 0.75rem 1.25rem;
        }

        .page-tab-nav .nav-link:hover {
            color: var(--accent);
        }

        .page-tab-nav .nav-link.active {
            color: var(--accent);
            border-bottom-color: var(--accent);
            background: none;
        }

