:root {
    --c-brand:              #8ec63f;
    --c-brand-hover:        #7ab330;
    --c-brand-text:         #1f2d0c; /* dark text: white is unreadable on the lime brand green */
    --c-brand-subtle:       #eef7e0;
    --c-brand-text-on-subtle: #3d6e1e;
    --c-focus:              #8ec63f;
    --c-focus-ring:         rgba(142,198,63,0.18);
    --c-nav-active-bg:      #eef7e0;
    --c-nav-active-text:    #3d6e1e;
}

@media (prefers-color-scheme: dark) {
    :root {
        --c-brand:              #a1d358;
        --c-brand-hover:        #b5df6e;
        --c-brand-subtle:       rgba(142,198,63,0.15);
        --c-brand-text:         #16220a; /* dark text: the brand green is too light for white */
        --c-brand-text-on-subtle: #b5df6e;
        --c-focus:              #a1d358;
        --c-focus-ring:         rgba(161,211,88,0.22);
        --c-nav-active-bg:      rgba(142,198,63,0.15);
        --c-nav-active-text:    #b5df6e;
    }
}

.webmason-app { background: var(--c-brand); }
/* App-icon glyph: white washes out on the lime brand green (esp. dark mode); use the dark brand text color. */
.webmason-app .icon { color: var(--c-brand-text); }

/* Hamburger is a mobile-only control; hide it on desktop (the @media rule re-shows it under 768px). */
.shell-hamburger { display: none; }

/* App-switcher entries are now links, not buttons. */
a.app-switcher-item { text-decoration: none; color: inherit; }

/* Collapse-sidebar chevron: the stock rule targets a non-existent #collapseIcon. Flip the real icon. */
.sidebar-collapse-btn .icon { transition: transform 0.22s ease; }
.shell-sidebar.collapsed .sidebar-collapse-btn .icon { transform: rotate(180deg); }
.code-editor-wrap { height: calc(100dvh - 350px); min-height: 400px; overflow: hidden; border: 1px solid var(--c-border); border-radius: var(--radius-md); }
.code-editor-wrap .cm-editor { height: 100%; }
.code-editor-wrap .cm-scroller { overflow: auto; }
.login-card { margin: 2.5rem auto; width: calc(100% - 2rem); max-width: 420px; }
.form-actions { display: flex; gap: 0.5rem; margin-top: 1.5rem; }
/* Row action buttons stay visible instead of only appearing on row hover. */
.cell-actions { opacity: 1; }
.drag-list { list-style: none; padding: 0; margin: 0; border: 1px solid var(--c-border); border-radius: var(--radius-md); }
.drag-list li { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--c-border); }
.drag-list li:last-child { border-bottom: 0; }
.drag-list li.dragging { opacity: 0.5; }
.drag-placeholder { height: 2.5rem; border: 2px dashed var(--c-border); border-radius: var(--radius-sm); margin: 0.25rem 0; }
.drag-handle { cursor: grab; display: inline-flex; align-items: center; padding: 0.25rem; opacity: 0.4; }
.drag-handle:hover { opacity: 1; }
.drag-handle:active { cursor: grabbing; }
.drag-item-label { flex: 1; color: var(--c-text); text-decoration: none; }
.drag-item-label:visited { color: var(--c-text); }
.drag-item-label:hover { text-decoration: underline; }