/* Global scrollbar styling for all overflow-y-auto elements */

/* 1. Chrome, Edge, Safari (WebKit) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px; /* For horizontal shelves */
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #666;
}

/* 2. Firefox Support */
* {
    scrollbar-width: thin;
    scrollbar-color: #444 transparent;
}

#active-step-tab-mount .active-tab {
    background-color: #1A1A1A !important; /* Matches editor background */
    color: white !important;
    border-color: #333 !important;
    border-bottom-color: #1A1A1A !important;
    z-index: 20;
    opacity: 1 !important;
}

#pipeline-visualizer-container {
    overflow-x: auto !important; /* Enable side scrolling */
    overflow-y: hidden;
    cursor: grab;
}

/* Make the scrollbar alcGreen to match the brand */
#pipeline-visualizer-container::-webkit-scrollbar-thumb {
    background: #5C967E;
}

:root {
    --alc-green: #95D6A4;
    --alc-green-dim: rgba(149, 214, 164, 0.2);
    --alc-green-glow: rgba(149, 214, 164, 0.4);
    --alc-base-gray: #777;
}

.text-alc-green { color: var(--alc-green); }
.bg-alc-green { background-color: var(--alc-green); }
.hover-alc-green:hover {
    color: var(--alc-green);
    filter: drop-shadow(0 0 5px var(--alc-green-glow));
    transition: all 0.3s ease;
}
#canvas-container {
    display: block;
    min-width: 1px;
    min-height: 1px;
    background-color: #111; /* Shows a dark box even if image fails */
    box-shadow: 0 0 50px rgba(0,0,0,1);
}
.tool-btn {
    /* 1. Reset default button behavior */
    display: flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    background: transparent;
    border: 1px solid transparent; /* Keeps layout stable when inactive */

    /* 2. ENFORCE FIXED SIZE */
    /* These values should match your design (e.g., 36px or 40px) */
    width: 38px;
    height: 38px;

    /* 3. Consistency */
    cursor: pointer;
    transition: all 0.2s ease;
    color: #777; /* Base gray icon color */
}

.tool-btn.active {
    /* Now the border will always be 38x38px */
    border: 1px solid var(--alc-green-dim);
    background-color: var(--alc-green-dim);
    box-shadow: 0 0 15px var(--alc-green-glow);
    border-radius: 6px;
    color: var(--alc-green);
}

/* Optional: Ensure the icon inside stays centered and standard */
.tool-btn i {
    font-size: 16px;
    display: block;
}
#crop-overlay {
    /* Use your alc-green for the selection border */
    border: 2px solid var(--alc-green);
    background-color: rgba(149, 214, 164, 0.1);
    position: absolute;
    z-index: 50; /* Ensure this is higher than the canvas */
    pointer-events: all; /* Ensure it can be clicked */
}

/* Base style for all resize handles */
.handle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: white;
    border: 1px solid var(--alc-green);
    z-index: 30;
}

/* Position handles in the corners */
.top-left  { top: -5px; left: -5px; cursor: nwse-resize; }
.top-right { top: -5px; right: -5px; cursor: nesw-resize; }
.bot-left  { bottom: -5px; left: -5px; cursor: nesw-resize; }
.bot-right { bottom: -5px; right: -5px; cursor: nwse-resize; }

.naming-input:not(:placeholder-shown):invalid {
border-color: #f87171; /* Tailwind red-400 */
box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.2);
}

/* Show the error message only when invalid */
.naming-input:not(:placeholder-shown):invalid + .validation-error {
    display: block;
}

/* Success state */
.naming-input:not(:placeholder-shown):valid {
    border-color: #a7ffd9; /* Your brand green */
}
:root {
/* Status Colors — keep in step with alc/config/statuses.py (the registry
   is the source of truth for the vocabulary + hex values). */
--status-wtg: #525252; /* Neutral Gray */
--status-rdy: #38bdf8; /* Sky Blue */
--status-ip:  #eab308; /* Amber/Gold */
--status-rev: #fb923c; /* Orange */
--status-apr: #2dd4bf; /* Teal */
--status-fin: #22c55e; /* Green */
--status-pub: #a855f7; /* Amethyst Purple */
--status-nte: #f87171; /* Coral Red */
--status-omt: #3f3f46; /* Zinc — omitted from the show */
--status-cmpt: #22c55e; /* Legacy SG 'complete' */
/* Unreal mode (version page) — RESERVED: no status, phase or accent may use this
   lime, so the frame/banner/toggle can only ever mean "you are in Unreal". */
--unreal-mode: #a3e635;
}

/* Utility classes for quick application */
.status-dot { width: 6px; height: 6px; border-radius: 9999px; }
.bg-wtg { background-color: var(--status-wtg); }
.bg-rdy { background-color: var(--status-rdy); }
.bg-ip  { background-color: var(--status-ip); }
.bg-rev { background-color: var(--status-rev); }
.bg-apr { background-color: var(--status-apr); }
.bg-fin { background-color: var(--status-fin); }
.bg-pub { background-color: var(--status-pub); }
.bg-nte { background-color: var(--status-nte); }

.text-wtg { color: var(--status-wtg); }
.text-rdy { color: var(--status-rdy); }

/* Base icon state */
.project-icon {
    width: 2.5rem; /* w-10 */
    height: 2.5rem; /* h-10 */
    flex: none;
    border-radius: 0.5rem; /* rounded-lg */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 700; /* font-bold */
    font-size: 10px;
}

/* Active / Selected State */
.project-icon-active {
    background-color: #5C967E; /* alcGreenDark */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); /* shadow-lg */
    transform: scale(1.1); /* scale-110 */
    color: white;
}

/* Inactive State */
.project-icon-inactive {
    background-color: #222;
    color: #6b7280; /* text-gray-500 */
}

.project-icon-inactive:hover {
    background-color: #333;
    color: #d1d5db; /* text-gray-300 */
}

/* Divider for sidebar */
.sidebar-divider {
    width: 2rem; /* w-8 */
    border-bottom: 1px solid #2a2a2a;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    flex: none;
}

/* Collapsible production sidebar */
#production-sidebar-list {
    transition: width 0.2s ease, padding 0.2s ease;
    overflow-x: hidden;
}

#production-sidebar-list.sidebar-collapsed {
    width: 4rem; /* w-16 */
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* Hide text labels & counts when collapsed -> icon-only rail */
#production-sidebar-list.sidebar-collapsed .sidebar-label,
#production-sidebar-list.sidebar-collapsed .sidebar-count {
    display: none;
}

/* Center the remaining icons when collapsed */
#production-sidebar-list.sidebar-collapsed .sidebar-row,
#production-sidebar-list.sidebar-collapsed .sidebar-toggle-row {
    justify-content: center;
}

/* Accordion concept groups. An open group shows its sub-pages inline; the
   chevron turns down. The active page's row is lit. */
.sidebar-group.is-open > .sidebar-group-items { display: flex; }
.sidebar-group.is-open > .sidebar-group-head .sidebar-chevron { transform: rotate(90deg); }
.sidebar-group.has-active > .sidebar-group-head,
.sidebar-single.is-active { background-color: #1a1a1a; }
.sidebar-group.has-active > .sidebar-group-head i:first-child,
.sidebar-single.is-active i:first-child { color: #fff; }
.sidebar-item.is-active { background-color: #1f2a24; color: #fff; }
.sidebar-item.is-active i, .sidebar-item.is-active .mask-icon { color: #fff; }

/* Collapsed rail: no inline sub-pages; hovering a group (JS sets top/left)
   pops them out as a flyout beside the rail instead. */
#production-sidebar-list.sidebar-collapsed .sidebar-group.is-open > .sidebar-group-items { display: none; }
#production-sidebar-list.sidebar-collapsed .sidebar-group:hover > .sidebar-group-items {
    display: flex;
    position: fixed;
    z-index: 60;
    min-width: 11rem;
    margin: 0;
    padding: 0.25rem;
    background: #141414;
    border: 1px solid #2a2a2a;
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
#production-sidebar-list.sidebar-collapsed .sidebar-group:hover > .sidebar-group-items .sidebar-flyout-title { display: block; }

/* Flip the collapse chevron to point right when collapsed */
#production-sidebar-list.sidebar-collapsed #sidebar-collapse-toggle i {
    transform: rotate(180deg);
}

.log-info    { color: #94a3b8; } /* Slate 400 */
.log-success { color: #4ade80; } /* Emerald 400 */
.log-warning { color: #fbbf24; } /* Amber 400 */
.log-error   { color: #f87171; font-weight: bold; } /* Red 400 */
.log-command { color: #22d3ee; } /* Cyan 400 */

/* Active task in the cookbook pipeline / recent lists. */
.cb-task-active {
    background-color: rgba(120, 194, 164, 0.12);
    color: #ffffff;
    border-color: rgba(120, 194, 164, 0.45) !important;
}

/* Detail-pane tabs (Recipe <-> code) above #step-details in the cookbook. */
.cb-dtab {
    color: #6b7280; /* gray-500 */
    border-color: transparent;
    background-color: transparent;
    transition: all 0.15s ease;
    cursor: pointer;
}
.cb-dtab:hover {
    color: #d1d5db; /* gray-300 */
}
.cb-dtab-active {
    color: #ffffff;
    background-color: #1A1A1A;
    border-color: #333 !important;
    border-bottom-color: #1A1A1A !important;
}

/* Selected step/button in the cookbook recipe step list. JS toggles this class
   on click so the active row stays obvious after the editor swaps in. */
.cb-step-active {
    background-color: #161616;
    border-color: rgba(120, 194, 164, 0.5) !important; /* alcGreen */
    box-shadow: inset 3px 0 0 #78C2A4;
}
.cb-step-active .cb-step-label {
    color: #ffffff;
}

/* Monochrome SVG icons driven by a mask, so they take the element's text
   color (currentColor) just like the Font Awesome glyphs. Point at the file
   with `style="--mask-url: url('/static/icons/whatever.svg')"` and size/color
   with utility classes (e.g. w-5 h-5 text-gray-400). The SVG's own fill is
   irrelevant — only its alpha is used — so re-exports never affect color. */
.mask-icon {
    display: inline-block;
    background-color: currentColor;
    -webkit-mask: var(--mask-url) center / contain no-repeat;
    mask: var(--mask-url) center / contain no-repeat;
}
.log-system  { color: #6366f1; opacity: 0.8; } /* Indigo 500 */