/* designStudio.css — Photopea-PRO Editor adapted for 8/12 Dashboard zone */

/* ============================================
   CSS VARIABLES (scoped to design-studio)
   ============================================ */
.design-studio {
    /* površine */
    --ds-bg-dark:#0B0F1A; --ds-bg-medium:#111827; --ds-bg-light:#1E293B; --ds-panel-bg:#0F172A;
    --ds-pasteboard:#2B3038;
    /* akcent — jedan (ljubičasta klijentska aura) */
    --ds-accent:#8B5CF6; --ds-accent-hover:#A78BFA; --ds-accent-soft:rgba(139,92,246,0.12);
    /* tekst i ivice */
    --ds-text-primary:#F8FAFC; --ds-text-secondary:#94A3B8; --ds-text-muted:#64748B;
    --ds-border:#1E293B; --ds-border-strong:#334155;
    /* semantika štampe */
    --ds-bleed:#FF4444; --ds-trim:#38BDF8; --ds-safe:#4ADE80;
    /* radijusi i senke */
    --ds-r-sm:4px; --ds-r-md:6px; --ds-r-lg:10px;
    --ds-shadow-panel:0 8px 32px rgba(0,0,0,.6);
    /* layout dimenzije */
    --ds-bar-height:40px; --ds-toolbar-width:40px;
    --ds-sidebar-width:400px; --ds-pagebar-height:36px;
}

/* ============================================
   DESIGN STUDIO CONTAINER
   Fills 100% of parent tab (92vh zone)
   ============================================ */
.design-studio {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--ds-bg-dark);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    color: var(--ds-text-primary);
    overflow: hidden;
    box-sizing: border-box;
}

.design-studio *,
.design-studio *::before,
.design-studio *::after {
    box-sizing: border-box;
}

/* ============================================
   TOP MENU BAR
   ============================================ */
.design-studio .menu-bar {
    display: flex;
    align-items: center;
    background: var(--ds-bg-medium);
    border-bottom: 1px solid var(--ds-border);
    padding: 0;
    height: 36px;
    min-height: 36px;
    user-select: none;
    flex-shrink: 0;
    /* BUG#1 — backdrop-filter (B5 terrain skin, dole) pravi stacking context na .menu-bar,
       pa je z-index:1000 sa .dropdown-menu zatvoren unutar njega i ne moze da izadje.
       Bez eksplicitnog z-index-a menu-bar se slika na nivou 0 u DOM redu, a .canvas-wrapper
       (position:relative) je kasnije u DOM-u => canvas preko menija.
       400 => iznad .canvas-wrapper (0), .tool-flyout-panel (200) i .right-sidebar (200 @<960px),
       ispod .ds-overlay (9000). */
    position: relative;
    z-index: 400;
}

.design-studio .menu-bar-left {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    border-right: 1px solid var(--ds-border);
    height: 100%;
}

.design-studio .menu-bar-center {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 4px;
    padding: 0 8px;
}

/* F18.4 — Hamburger meni */
.design-studio .hamburger-menu {
    display: flex;
    align-items: center;
    padding: 0 4px;
}

/* BUG#3 — Meni je bio jedan ravan spisak od 41 itema (~1500px) sa samo scrollbarom.
   Sada je podeljen na submenije (File/Edit/Slika/Sloj/Filter/Prikaz) u markupu,
   pa je root lista kratka; ovo su samo gusci redovi + safety max-height. */
.hamburger-popover .mud-list,
.ds-submenu-popover .mud-list {
    max-height: 70vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.hamburger-popover .mud-menu-item,
.ds-submenu-popover .mud-menu-item {
    min-height: 30px;
    font-size: 12.5px;
}

/* F18.3 — Quick actions */
.design-studio .bar-quick {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 4px;
}

.design-studio .bar-divider {
    width: 1px;
    height: 20px;
    background: var(--ds-border);
    margin: 0 4px;
}

.design-studio .menu-bar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
    margin-left: auto;
    height: 100%;
}

.design-studio .menu-bar-btn {
    width: 30px;
    height: 30px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ds-text-primary);
    transition: all 0.15s;
    padding: 0;
}

.design-studio .menu-bar-btn:hover {
    background: var(--ds-bg-light);
    border-color: var(--ds-border);
}

.design-studio .menu-item {
    position: relative;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.2s;
}

.design-studio .menu-item:hover {
    background: var(--ds-bg-light);
}

.design-studio .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--ds-panel-bg);
    border: 1px solid var(--ds-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    min-width: 220px;
    z-index: 1000;
    animation: ds-fadeIn 0.2s ease;
    /* BUG#1b — Format meni je ~700px (17 formata + 4 headera + 4 dividera + Custom),
       a .design-studio ima overflow:hidden => bio je odsecan na laptop visinama. */
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* BUG#2 — Format je premesten u .menu-bar-right; sa left:0 bi dropdown izlazio izvan ekrana. */
.design-studio .menu-bar-right .dropdown-menu {
    right: 0;
    left: auto;
}

/* BUG#4 — stari fix je bio mrtav kod: MudBlazor renderuje popover u <MudPopoverProvider />
   na nivou layout-a (MainLayout.razor), IZVAN #ds-editor-root, pa descendant selektor
   `.design-studio.ds-fullscreen .mud-popover` nikada nije matchovao.
   Uz to je native requestFullscreen() slikao samo subtree #ds-editor-root, tako da se popover
   nije renderovao uopste. Fullscreen sada ide isklucivo preko .ds-fullscreen klase, a z-index
   je spusten ispod MudBlazor popover-a (vidi .design-studio.ds-fullscreen nize). */

.design-studio:fullscreen {
    background: var(--ds-bg-dark);
}

.design-studio .menu-option {
    padding: 8px 16px;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.design-studio .menu-option:hover {
    background: var(--ds-accent);
}

.design-studio .menu-divider {
    height: 1px;
    background: var(--ds-border);
    margin: 4px 0;
}

.design-studio .shortcut {
    color: var(--ds-text-secondary);
    font-size: 11px;
    margin-left: 20px;
}

/* ============================================
   WORKSPACE
   ============================================ */
.design-studio .workspace {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* ============================================
   LEFT TOOLBAR (icon-only, Photopea style)
   ============================================ */
.design-studio .ds-toolbar {
    width: var(--ds-toolbar-width);
    min-width: var(--ds-toolbar-width);
    background: var(--ds-bg-medium);
    border-right: 1px solid var(--ds-border);
    padding: 4px 2px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
    align-items: center;
    /* BUG#9 — sadrzaj toolbara (~540px, sada i vise sa otvorenim grupama) je na niskim
       visinama stezao sve iteme; input[type=color] ima min-height:auto pa se dva swatch-a
       skupljala u "dve crtice". Sada toolbar skroluje umesto da stisne decu.
       overflow-x mora ostati u istom formatting kontekstu — flyout je zato in-column
       (position:static), ne vise absolute left:42px. */
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    min-height: 0;
}

.design-studio .ds-toolbar::-webkit-scrollbar { width: 6px; }
.design-studio .ds-toolbar::-webkit-scrollbar-thumb {
    background: var(--ds-border-strong);
    border-radius: 3px;
}

.design-studio .tool-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 4px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--ds-border);
    width: 100%;
    /* BUG#9 — bez ovoga column flex steze grupe kad nema visine */
    flex-shrink: 0;
}
/* Tekst — zaseban alat (jedan taster, bez flyout strelice), van Shapes grupe */
.design-studio .tool-group--single {
    align-items: center;
}

/* F18.3 — flyout wrapper groups */
.design-studio .tool-flyout-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 4px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--ds-border);
    width: 100%;
    gap: 1px;
    flex-shrink: 0; /* BUG#9 */
}
.design-studio .tool-flyout-trigger {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 1px;
}
.design-studio .tool-flyout-arrow {
    width: 100%;
    height: 14px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 7px;
    color: var(--ds-text-secondary);
    padding: 0;
    line-height: 1;
    transition: color 0.15s, transform 0.15s;
    position: relative;
}
/* BUG#5 — ::before overlay (top:-3px; height:20px) je prelazio 3px preko donje ivice
   glavnog tastera grupe i krao mu klikove. Sad kada glavni taster otvara podgrupu,
   taj hit-area hack nije potreban — strelica je samo sekundarni toggle. */
.design-studio .tool-flyout-arrow:hover { color: var(--ds-accent); }
.design-studio .tool-flyout-arrow.open {
    color: var(--ds-accent);
    transform: rotate(180deg);
}
/* BUG#5 — podgrupe su se otvarale DESNO (position:absolute; left:42px; top:0) i mogle su
   biti odsecene na .workspace{overflow:hidden}. Sada se sireju IN-COLUMN, ispod glavnog
   tastera grupe, i guraju alate nize — ne mogu da budu clip-ovane ni od koga. */
.design-studio .tool-flyout-panel {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
    margin-top: 2px;
    background: rgba(139, 92, 246, 0.07);
    border: 1px solid rgba(139, 92, 246, 0.22);
    border-radius: 6px;
    padding: 3px 0;
    box-shadow: none;
    animation: ds-fadeIn 0.15s ease;
}

.design-studio .tool-flyout-panel .tool-btn {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.design-studio .tool-group:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.design-studio .tool-btn {
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    color: var(--ds-text-primary);
    font-size: 20px;
    padding: 0;
    margin: 0;
}

.design-studio .tool-btn:hover {
    background: var(--ds-bg-light);
    border-color: var(--ds-border);
}

.design-studio .tool-btn.active {
    background: rgba(74, 158, 255, 0.15);
    border-color: var(--ds-accent);
}

/* Color Section */
.design-studio .color-section {
    margin-top: auto;
    padding-top: 6px;
    border-top: 1px solid var(--ds-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0; /* BUG#9 */
}

/* BUG#10 — .color-swatches/.swatch-container nemaju sopstvenu širinu, pa se oslanjaju na
   shrink-to-fit (jer .color-section koristi align-items:center, ne stretch). Chrome
   pogrešno računa intrinsic/shrink-to-fit širinu za input[type=color] kao skoro 0, pa se
   ceo lanac (swatches → container → input) skupi u "dve crtice" iako input ima
   width:34px. Fix: eksplicitna širina na oba kontejnera izbacuje shrink-to-fit iz igre. */
.design-studio .color-swatches {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 34px;
    flex-shrink: 0; /* BUG#9 */
}

.design-studio .swatch-container {
    position: relative;
    width: 34px;
    flex-shrink: 0; /* BUG#9 */
}

/* BUG#9 — bilo je width:38px u 36px content boxu (toolbar 40px, padding 4px 2px), bez
   padding:0, pa je Chrome ::-webkit-color-swatch-wrapper (4px) pojeo ostatak.
   Plus flex:0 0 auto + min-height da column flex ne moze da ih spljesti u crtice. */
.design-studio .color-input {
    width: 34px;
    height: 26px;
    flex: 0 0 auto;
    min-height: 26px;
    padding: 0;
    background: transparent;
    border: 2px solid var(--ds-border);
    border-radius: 4px;
    cursor: pointer;
}

.design-studio .color-input::-webkit-color-swatch-wrapper { padding: 0; }
.design-studio .color-input::-webkit-color-swatch {
    border: none;
    border-radius: 2px;
}
.design-studio .color-input::-moz-color-swatch {
    border: none;
    border-radius: 2px;
}

.design-studio .swatch-label {
    position: absolute;
    bottom: 2px;
    right: 2px;
    font-size: 8px;
    background: rgba(0, 0, 0, 0.7);
    padding: 1px 3px;
    border-radius: 2px;
}

.design-studio .swap-colors-btn {
    width: 34px;
    height: 22px;
    flex: 0 0 auto; /* BUG#9 */
    margin-top: 3px;
    background: var(--ds-bg-light);
    border: 1px solid var(--ds-border);
    border-radius: 4px;
    cursor: pointer;
    color: var(--ds-text-primary);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.design-studio .swap-colors-btn:hover {
    background: var(--ds-accent);
}

/* File Input */
.design-studio .file-input {
    display: none;
}

/* ============================================
   CANVAS AREA
   ============================================ */
.design-studio .canvas-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--ds-bg-dark);
    overflow: hidden;
    min-width: 0;
}

.design-studio .canvas-wrapper {
    flex: 1;
    overflow: auto;
    position: relative;
    background-color: var(--ds-pasteboard);
    background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px);
    background-size: 20px 20px;
    transition: background-image 0.3s ease;
}

.design-studio .canvas-wrapper:hover {
    background-image: radial-gradient(rgba(139, 92, 246, 0.5) 1px, transparent 1px);
}

/* Fabric.js canvas layers
   Platno je RADNA POVRSINA (papir + margina), ne papir — zato mora ostati providno da
   se kroz njega vidi tackasta podloga .canvas-wrapper-a. Belo je iskljucivo papir, koji
   fabric crta kao pozadinski sloj (designStudio._drawPaper). Ranije su i belina i senka
   stajale na samom <canvas> elementu, pa je cela radna povrsina izgledala kao papir. */
.design-studio .canvas-container .lower-canvas {
    background-color: transparent !important;
}

.design-studio .canvas-container .upper-canvas {
    background-color: transparent !important;
}

/* ============================================
   Lenjiri (gore + levo + ugao) i vodiči
   Lenjiri stoje UNUTAR .canvas-wrapper-a (koji je overflow:hidden), pa idu na
   pozitivne offsete preko paddinga — na negativnom offsetu su bili odsečeni.
   ============================================ */
.design-studio .ds-ruler {
    position: absolute;
    background: #1c1c1c;
    z-index: 5;
    pointer-events: auto;
    user-select: none;
    touch-action: none;
}

.design-studio .ds-ruler-top {
    top: 0;
    left: 0;
    cursor: row-resize;
}

.design-studio .ds-ruler-left {
    top: 0;
    left: 0;
    cursor: col-resize;
}

.design-studio .ds-ruler-corner {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    background: #1c1c1c;
    color: #aaa;
    font-size: 10px;
    font-family: ui-monospace, monospace;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #3a3a3a;
    border-bottom: 1px solid #3a3a3a;
    z-index: 6;
    cursor: pointer;
    user-select: none;
}

.design-studio .ds-ruler-corner:hover {
    background: #2a2a2a;
    color: #fff;
}

/* Kad su lenjiri uključeni, oslobodi prostor da platno ne stoji ispod njih */
.design-studio.rulers-on .canvas-wrapper {
    padding: 24px 0 0 24px;
}

/* Vodiči — DOM sloj iznad platna, ispod lenjira */
.design-studio .ds-guides-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 4;
}

.design-studio .ds-guides-layer.ds-guides-hidden {
    display: none;
}

.design-studio .ds-guide {
    position: absolute;
    pointer-events: auto;
    touch-action: none;
    --ds-guide-color: #3B82F6;
}

.design-studio .ds-guides-layer.ds-guides-locked .ds-guide {
    pointer-events: none;
    --ds-guide-color: #7a8fa3;
}

.design-studio .ds-guide::before {
    content: '';
    position: absolute;
    background: var(--ds-guide-color);
}

/* Horizontalni vodič: pun po širini, 9px hvatište oko 1px linije */
.design-studio .ds-guide-h {
    left: 0;
    width: 100%;
    height: 9px;
    margin-top: -4px;
    cursor: ns-resize;
}

.design-studio .ds-guide-h::before {
    left: 0;
    right: 0;
    top: 4px;
    height: 1px;
}

/* Vertikalni vodič */
.design-studio .ds-guide-v {
    top: 0;
    height: 100%;
    width: 9px;
    margin-left: -4px;
    cursor: ew-resize;
}

.design-studio .ds-guide-v::before {
    top: 0;
    bottom: 0;
    left: 4px;
    width: 1px;
}

.design-studio .ds-guide:hover {
    --ds-guide-color: #60A5FA;
}

.design-studio .ds-guide-dragging,
.design-studio .ds-guide-active {
    --ds-guide-color: #00E5FF;
}

/* Ispuštanje na lenjir / van radne površine briše vodič */
.design-studio .ds-guide-discard {
    --ds-guide-color: #EF5350;
}

.design-studio .ds-guide-discard::before {
    opacity: 0.55;
}

.design-studio .ds-guide-badge {
    position: absolute;
    z-index: 7;
    pointer-events: none;
    background: rgba(20, 20, 20, 0.92);
    color: #E3F2FD;
    border: 1px solid rgba(59, 130, 246, 0.5);
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 10px;
    font-family: ui-monospace, monospace;
    white-space: nowrap;
}

/* ============================================
   RIGHT SIDEBAR
   ============================================ */
.design-studio .right-sidebar {
    width: var(--ds-sidebar-width);
    min-width: var(--ds-sidebar-width);
    background: var(--ds-bg-medium);
    border-left: 1px solid var(--ds-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

.ds-sidebar-resizer {
    position: absolute;
    top: 0;
    left: -2px;
    width: 4px;
    height: 100%;
    cursor: col-resize;
    z-index: 10;
    background: transparent;
}
.ds-sidebar-resizer:hover,
.ds-sidebar-resizer:active {
    background: var(--ds-accent);
}

.ds-sidebar-enter {
    animation: ds-slideIn 0.2s ease;
}
@keyframes ds-slideIn {
    from { transform: translateX(100%); will-change: transform; }
    to { transform: translateX(0); }
}

/* BUG#4 — Fullscreen ide samo preko ove klase (bez native requestFullscreen), da bi
   MudBlazor popover-i (Meni) i dalje bili renderovani.
   z-index 1150: iznad mud appbar/drawer (1100), ISPOD mud popover-a
   (calc(var(--mud-zindex-popover)+1) = 1201), dialog-a (1300) i snackbar-a (1400). */
.design-studio.ds-fullscreen {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 1150;
}

/* MudExpansionPanel dark theme overrides.
   PAZI: MudBlazor 8.x klasa je `.mud-expand-panel` (bez "-sion"). `.mud-expansion-panels`
   je SAMO spoljni kontejner. Ovaj blok je ranije bio pisan sa "-sion" i bio je mrtav. */
.design-studio .mud-expand-panel {
    background: var(--ds-panel-bg) !important;
    color: var(--ds-text-primary) !important;
    border-bottom: 1px solid var(--ds-border) !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.design-studio .mud-expand-panel::before {
    display: none !important;
}

.design-studio .mud-expand-panel-header {
    padding: 8px 12px !important;
    min-height: 36px !important;
    color: var(--ds-text-primary) !important;
}

.design-studio .mud-expand-panel-content {
    padding: 0 !important;
    color: var(--ds-text-primary) !important;
}

.design-studio .mud-expand-panel .mud-expand-panel-icon {
    color: var(--ds-text-secondary) !important;
}

.design-studio .panel {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--ds-border);
}

.design-studio .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--ds-panel-bg);
    border-bottom: 1px solid var(--ds-border);
    flex-shrink: 0;
}

.design-studio .panel-header h3 {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    padding: 0;
}

.design-studio .panel-actions {
    display: flex;
    gap: 4px;
}

.design-studio .panel-actions button {
    width: 24px;
    height: 24px;
    background: var(--ds-bg-light);
    border: 1px solid var(--ds-border);
    border-radius: 4px;
    color: var(--ds-text-primary);
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.design-studio .panel-actions button:hover {
    background: var(--ds-accent);
}

.design-studio .panel-content {
    padding: 12px;
    overflow-y: auto;
    flex: 1;
}

/* ============================================
   LAYERS PANEL
   ============================================ */
.design-studio .layers-panel {
    min-height: 200px;
    max-height: 400px;
}

.design-studio .layer-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
}

.design-studio .layer-controls button {
    flex: 1;
    padding: 6px;
    background: var(--ds-bg-light);
    border: 1px solid var(--ds-border);
    border-radius: 4px;
    color: var(--ds-text-primary);
    cursor: pointer;
    font-size: 11px;
}

.design-studio .layer-controls input[type="range"] {
    flex: 2;
}

.design-studio .layers-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.design-studio .layer-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: var(--ds-bg-light);
    border: 1px solid var(--ds-border);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.design-studio .layer-item:hover {
    background: var(--ds-bg-medium);
}

.design-studio .layer-item.selected {
    background: var(--ds-accent);
    border-color: var(--ds-accent-hover);
}

.design-studio .layer-visibility,
.design-studio .layer-lock {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
}

.design-studio .layer-thumbnail {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background: var(--ds-bg-dark);
    border: 1px solid var(--ds-border);
    border-radius: 2px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.design-studio .layer-thumbnail img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
}

.design-studio .layer-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.design-studio .layer-name {
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.design-studio .layer-blend {
    width: 100%;
    background: var(--ds-bg-dark);
    border: 1px solid var(--ds-border);
    border-radius: 3px;
    color: var(--ds-text-primary);
    font-size: 10px;
    padding: 2px 4px;
    outline: none;
    cursor: pointer;
}

.design-studio .layer-item[draggable="true"] {
    user-select: none;
}

.design-studio .layer-item.drag-over {
    border-color: var(--ds-accent);
    box-shadow: 0 0 0 1px var(--ds-accent) inset;
}

/* ============================================
   PROPERTIES PANEL
   ============================================ */
.design-studio .properties-panel {
    min-height: 250px;
}

.design-studio .property-group {
    margin-bottom: 16px;
}

.design-studio .property-group label {
    display: block;
    font-size: 11px;
    color: var(--ds-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.design-studio .property-row {
    display: flex;
    gap: 8px;
}

/* F18.1 — compact 96px-label / value grid for Properties panel */
.design-studio .props-grid {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 4px 8px;
    padding: 8px;
}

.design-studio .props-grid label {
    font-size: 12px;
    color: var(--ds-text-secondary);
    align-self: center;
}

.design-studio .property-input {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
}

.design-studio .property-input span {
    font-size: 11px;
    color: var(--ds-text-secondary);
    min-width: 12px;
}

.design-studio .property-input input[type="number"] {
    flex: 1;
    padding: 6px 8px;
    background: var(--ds-bg-light);
    border: 1px solid var(--ds-border);
    border-radius: 4px;
    color: var(--ds-text-primary);
    font-size: 12px;
}

.design-studio input[type="range"] {
    width: 100%;
    height: 4px;
    background: var(--ds-bg-light);
    border: none;
    border-radius: 2px;
    outline: none;
    -webkit-appearance: none;
}

.design-studio input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--ds-accent);
    border-radius: 50%;
    cursor: pointer;
}

.design-studio input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--ds-accent);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.design-studio input[type="color"] {
    width: 100%;
    height: 32px;
    border: 1px solid var(--ds-border);
    border-radius: 4px;
    cursor: pointer;
    background: transparent;
}

.design-studio select {
    width: 100%;
    padding: 6px 8px;
    background: var(--ds-bg-light);
    border: 1px solid var(--ds-border);
    border-radius: 4px;
    color: var(--ds-text-primary);
    font-size: 12px;
    cursor: pointer;
}

.design-studio .button-group {
    display: flex;
    gap: 4px;
}

.design-studio .button-group button {
    flex: 1;
    padding: 6px;
    background: var(--ds-bg-light);
    border: 1px solid var(--ds-border);
    border-radius: 4px;
    color: var(--ds-text-primary);
    cursor: pointer;
    font-weight: bold;
}

.design-studio .button-group button:hover,
.design-studio .button-group button.active {
    background: var(--ds-accent);
    border-color: var(--ds-accent-hover);
    color: white;
}

.design-studio .button-group.align-group button {
    padding: 2px 4px;
}

.design-studio .button-group.style-group button {
    font-size: 14px;
    font-weight: 700;
}

.design-studio .button-group.case-group button {
    font-size: 11px;
    font-weight: 500;
}

.design-studio .no-selection {
    text-align: center;
    color: var(--ds-text-secondary);
    font-size: 12px;
    padding: 20px;
}

/* ============================================
   HISTORY PANEL
   ============================================ */
.design-studio .history-panel {
    min-height: 150px;
}

.design-studio .history-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.design-studio .history-item {
    display: flex;
    justify-content: space-between;
    padding: 6px 8px;
    background: var(--ds-bg-light);
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    transition: background 0.2s;
}

.design-studio .history-item:hover {
    background: var(--ds-bg-medium);
}

.design-studio .history-item.current {
    background: var(--ds-accent);
}

.design-studio .history-time {
    color: var(--ds-text-secondary);
    font-size: 10px;
}

/* cloud-save-section removed — button moved to top bar */

/* ============================================
   SCROLLBARS
   ============================================ */
.design-studio ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.design-studio ::-webkit-scrollbar-track {
    background: var(--ds-bg-dark);
}

.design-studio ::-webkit-scrollbar-thumb {
    background: var(--ds-border);
    border-radius: 4px;
}

.design-studio ::-webkit-scrollbar-thumb:hover {
    background: var(--ds-accent);
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* ============================================
   MULTI-PAGE NAVIGATOR
   ============================================ */
.design-studio .page-navigator {
    height: var(--ds-pagebar-height);
    min-height: var(--ds-pagebar-height);
    background: var(--ds-bg-medium);
    border-top: 1px solid var(--ds-border);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    overflow-x: auto;
    flex-shrink: 0;
    scrollbar-width: none;
}
.design-studio .page-navigator::-webkit-scrollbar { display: none; }
/* compact page tabs */
.design-studio .page-tab {
    position: relative;
    width: 28px;
    height: 26px;
    background: var(--ds-bg-light);
    border: 1px solid var(--ds-border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
    transition: all 0.15s;
    color: var(--ds-text-secondary);
    user-select: none;
}
.design-studio .page-tab:hover {
    border-color: var(--ds-accent-hover);
    color: var(--ds-text-primary);
}
.design-studio .page-tab.active {
    background: rgba(74,158,255,0.15);
    border-color: var(--ds-accent);
    color: var(--ds-accent);
}
.design-studio .page-tab-preview {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 60px;
    background: white;
    border: 2px solid var(--ds-accent);
    border-radius: 4px;
    overflow: hidden;
    display: none;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.design-studio .page-tab:hover .page-tab-preview { display: block; }
.design-studio .page-tab-preview img { width:100%; height:100%; object-fit:contain; }
.design-studio .page-tab-actions {
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    display: none;
    gap: 2px;
    background: var(--ds-panel-bg);
    border: 1px solid var(--ds-border);
    border-radius: 4px;
    padding: 2px;
    z-index: 101;
    white-space: nowrap;
}
.design-studio .page-tab:hover .page-tab-actions { display: flex; }
.design-studio .page-tab-actions span {
    width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; border-radius: 2px;
    color: var(--ds-text-secondary); transition: background 0.15s;
}
.design-studio .page-tab-actions span:hover { background: var(--ds-accent); color: white; }
.design-studio .page-add-tab {
    width: 28px; height: 26px;
    border: 1px dashed var(--ds-border);
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--ds-text-secondary);
    transition: all 0.15s; flex-shrink: 0;
}
.design-studio .page-add-tab:hover {
    border-color: var(--ds-accent);
    color: var(--ds-accent);
    background: rgba(74,158,255,0.05);
}

.design-studio .page-thumb {
    width: 80px;
    height: 100px;
    background: white;
    border: 2px solid var(--ds-border);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.2s;
    position: relative;
    flex-shrink: 0;
}

.design-studio .page-thumb:hover {
    border-color: var(--ds-accent-hover);
    transform: translateY(-2px);
}

.design-studio .page-thumb.active {
    border-color: var(--ds-accent);
    box-shadow: 0 0 10px rgba(74, 158, 255, 0.4);
}

.design-studio .page-thumb img {
    width: 100%;
    height: 70px;
    object-fit: contain;
    background: #f0f0f0;
}

.design-studio .page-thumb .page-label {
    flex: 1;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ds-bg-light);
    color: var(--ds-text-primary);
}

.design-studio .add-page-btn {
    width: 60px;
    height: 80px;
    border: 2px dashed var(--ds-border);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ds-text-secondary);
    transition: all 0.2s;
    flex-shrink: 0;
}

.design-studio .add-page-btn:hover {
    border-color: var(--ds-accent);
    color: var(--ds-accent);
    background: rgba(74, 158, 255, 0.05);
}

.design-studio .add-page-btn i {
    font-size: 24px;
    margin-bottom: 4px;
}

.design-studio .add-page-btn span {
    font-size: 9px;
    text-transform: uppercase;
    font-weight: 600;
}

/* Page context menu/actions */
.design-studio .page-actions-overlay {
    position: absolute;
    top: 2px;
    right: 2px;
    display: none;
}

.design-studio .page-thumb:hover .page-actions-overlay {
    display: flex;
    gap: 2px;
}

.design-studio .page-action-btn {
    width: 18px;
    height: 18px;
    background: rgba(0,0,0,0.6);
    border-radius: 2px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    cursor: pointer;
}

.design-studio .page-action-btn:hover {
    background: var(--ds-accent);
}
@media (max-width: 768px) {
    .design-studio .workspace {
        flex-direction: column;
    }

    .design-studio .ds-toolbar {
        width: 100%;
        min-width: unset;
        height: auto;
        flex-direction: row;
        overflow: visible;
        border-right: none;
        border-bottom: 1px solid var(--ds-border);
    }

    .design-studio .tool-group {
        display: flex;
        flex-direction: row;
        grid-template-columns: unset;
        border-bottom: none;
        border-right: 1px solid var(--ds-border);
        padding-right: 6px;
        padding-bottom: 0;
        margin-bottom: 0;
        width: auto;
    }

    .design-studio .right-sidebar {
        width: 100%;
        min-width: unset;
        max-height: 300px;
    }
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes ds-fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Preflight ── */
.tool-btn--error {
    border-color: var(--mud-palette-error) !important;
    color: var(--mud-palette-error) !important;
    animation: pulse-error 2s infinite;
}

@keyframes pulse-error {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    50%       { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

.pf-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 16px;
    border-radius: 8px;
    flex: 1;
}

.pf-stat--error   { background: rgba(239, 68, 68, 0.12); }
.pf-stat--warning { background: rgba(255, 152,  0, 0.12); }
.pf-stat--pass    { background: rgba( 16, 185, 129, 0.12); }
.pf-stat--info    { background: rgba( 33, 150,243, 0.12); }

.pf-stat-num {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}

.pf-stat--error   .pf-stat-num { color: var(--mud-palette-error); }
.pf-stat--warning .pf-stat-num { color: #FF9800; }
.pf-stat--pass    .pf-stat-num { color: var(--mud-palette-success); }
.pf-stat--info    .pf-stat-num { color: var(--blue); }

.pf-stat-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.pf-check-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    margin-bottom: 3px;
    transition: background 0.15s;
}

.pf-check-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.pf-check--error   { border-left: 3px solid var(--mud-palette-error); }
.pf-check--warning { border-left: 3px solid #FF9800; }
.pf-check--pass    { border-left: 3px solid var(--mud-palette-success); }
.pf-check--info    { border-left: 3px solid var(--blue); }

.pf-check-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.pf-check-msg {
    font-size: 12px;
    color: var(--text-primary);
    line-height: 1.4;
}

.pf-check-fix {
    font-size: 11px;
    color: #80CBC4;
    line-height: 1.3;
}

/* ── Collaboration Banner ── */
.collab-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 500;
    z-index: 100;
}

.collab-banner--locked {
    background: rgba(255, 152, 0, 0.15);
    border-bottom: 1px solid rgba(255, 152, 0, 0.3);
    color: #FF9800;
}

.collab-banner--owned {
    background: rgba(16, 185, 129, 0.08);
    border-bottom: 1px solid rgba(16, 185, 129, 0.2);
    color: var(--mud-palette-success);
}

.collab-banner__time {
    margin-left: auto;
    font-size: 11px;
    opacity: 0.7;
}

/* ============================================
   F18 — NEW COMPONENTS
   ============================================ */

/* F18.2 — Inline zoom controls in menu-bar */
.design-studio .zoom-controls-inline {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 4px;
}
.design-studio .zoom-level-inline {
    font-size: 11px;
    min-width: 36px;
    text-align: center;
    color: var(--ds-text-secondary);
}
/* History dropdown current marker */
.design-studio .history-option-current {
    background: rgba(74, 158, 255, 0.12) !important;
    color: var(--ds-accent) !important;
}

/* BUG#8 — desni sidebar je bio MudTabs (horizontalni tab bar, radio ponasanje).
   Sada je MudExpansionPanels MultiExpansion: sekcije su stakovane jedna ispod druge i
   pale/gase se nezavisno na klik.
   Napomena: stari selektor `> .mud-tabs-header` je bio MRTAV — u MudBlazor 8.x
   .mud-tabs-header postoji samo uz Header RenderFragment; tab bar je .mud-tabs-tabbar.
   Zato tab bar nikada nije dobio ni dark pozadinu ni min-height:32px.

   FIX — isti tip greske se ponovio i na akordeonu: selektori su bili pisani kao
   `.mud-expansion-panel*`, a MudBlazor 8.x renderuje `.mud-expand-panel*` (bez "-sion";
   samo je spoljni kontejner `.mud-expansion-panels`). Svi override-i su bili MRTVI, pa
   je ostajao MudBlazor default `.mud-expand-panel { flex: 1 0 100% }` — svaki panel je
   uzimao 100% visine sidebara i nije smeo da se skupi (flex-shrink:0), pa su naslovi
   "Osobine", "Alati" i "Brend" ispadali ispod `overflow:hidden` ivice. Vidio se samo
   prvi panel ("Slojevi"). */
.design-studio .ds-sidebar-acc {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: var(--ds-panel-bg);
    box-shadow: none !important;
}

/* Zatvorena sekcija = samo naslov. Nikad ne raste i nikad se ne skuplja ispod
   visine header-a, pa su sva 4 naslova uvek vidljiva. */
.design-studio .ds-sidebar-acc .mud-expand-panel {
    flex: 0 0 auto !important;
    max-width: 100%;
    background: var(--ds-panel-bg) !important;
    color: var(--ds-text-primary) !important;
    border-bottom: 1px solid var(--ds-border) !important;
    box-shadow: none !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Otvorena sekcija deli preostalu visinu; sadrzaj skroluje unutar nje. */
.design-studio .ds-sidebar-acc .mud-expand-panel.mud-panel-expanded {
    flex: 1 1 auto !important;
    /* NE `min-height:auto` (flex default = min-content) — to je ono sto bi opet
       nateralo panel da gura ostale naslove van ekrana. 34px = visina header-a. */
    min-height: 34px;
}

/* MudCollapse lanac: .mud-collapse-container (grid) > .mud-collapse-wrapper (flex)
   > .mud-collapse-wrapper-inner > .mud-expand-panel-content > .panel-content.
   Container ostaje grid — na njemu radi MudBlazor open/close animacija. */
.design-studio .ds-sidebar-acc .mud-expand-panel.mud-panel-expanded > .mud-collapse-container {
    flex: 1 1 auto;
    min-height: 0;
}

.design-studio .ds-sidebar-acc .mud-collapse-wrapper {
    min-height: 0;
    overflow: hidden !important;
}

.design-studio .ds-sidebar-acc .mud-collapse-wrapper-inner {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.design-studio .ds-sidebar-acc .mud-expand-panel-content {
    padding: 0 !important;
    background: var(--ds-panel-bg);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.design-studio .ds-sidebar-acc .mud-expand-panel-content .panel-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.design-studio .ds-sidebar-acc .mud-expand-panel-header {
    flex: 0 0 auto;
    padding: 6px 10px !important;
    min-height: 34px !important;
    background: var(--ds-panel-bg) !important;
}

.design-studio .ds-sidebar-acc .mud-expand-panel-header:hover {
    background: rgba(139, 92, 246, 0.06) !important;
}

.design-studio .ds-sidebar-acc .mud-expand-panel-text {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ds-text-secondary);
}

.design-studio .ds-sidebar-acc .mud-expand-panel-icon {
    flex: 0 0 auto;
    color: var(--ds-text-secondary) !important;
}

/* naslov sekcije: ikona + tekst + badge */
.design-studio .ds-acc-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--ds-text-secondary);
}

.design-studio .ds-sidebar-acc .mud-panel-expanded .ds-acc-title,
.design-studio .ds-acc-title.ds-acc-open {
    color: var(--ds-accent);
}

.design-studio .ds-acc-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ds-accent);
    margin-left: auto;
    flex-shrink: 0;
}

/* F18.6 — Template overlay dialog */
.design-studio .ds-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.72);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}
.design-studio:fullscreen .ds-overlay,
.design-studio.ds-fullscreen .ds-overlay { z-index: 99990; }
.design-studio .ds-overlay-panel {
    background: rgba(8,12,24,0.98);
    border: 1px solid rgba(139,92,246,0.22);
    border-radius: 12px;
    padding: 24px;
    width: 560px;
    max-width: 90vw;
    max-height: 82vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
}
.design-studio .ds-overlay-panel h3 {
    color: #F8FAFC;
}

/* F18.3 — responsive override for 40px toolbar */
@media (max-width: 1024px) {
    .design-studio .ds-toolbar {
        width: var(--ds-toolbar-width);
        min-width: var(--ds-toolbar-width);
    }

    .design-studio .right-sidebar {
        width: 360px;
        min-width: 360px;
    }
}

/* ============================================
   AI GENERATOR PANEL (B5)
   ============================================ */
.design-studio .ds-ai-panel-scroll {
    overflow-y: auto;
    max-height: 100%;
    padding-bottom: 16px;
}

/* Tier level cards — flex-wrap so they wrap on narrow sidebar */
.design-studio .ds-ai-tier-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 4px;
}

.design-studio .ds-ai-tier-card {
    flex: 1 1 80px;
    min-width: 72px;
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid var(--ds-border);
    border-radius: 6px;
    padding: 6px 6px 5px;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s, background 0.15s;
}

.design-studio .ds-ai-tier-card:hover {
    border-color: rgba(139, 92, 246, 0.5);
    background: rgba(139, 92, 246, 0.08);
}

.design-studio .ds-ai-tier-card.active {
    border-color: #8B5CF6;
    background: rgba(139, 92, 246, 0.18);
}

.design-studio .ds-ai-tier-label {
    font-size: 10px;
    font-weight: 700;
    color: #F8FAFC;
    line-height: 1.2;
    margin-bottom: 2px;
    white-space: normal;
    word-break: break-word;
}

.design-studio .ds-ai-tier-desc {
    font-size: 9px;
    color: #94A3B8;
    line-height: 1.2;
    margin-bottom: 3px;
    display: none; /* hidden on compact view */
}

.design-studio .ds-ai-tier-card:hover .ds-ai-tier-desc,
.design-studio .ds-ai-tier-card.active .ds-ai-tier-desc {
    display: block;
}

.design-studio .ds-ai-tier-cost {
    font-size: 10px;
    font-weight: 600;
    color: #A78BFA;
}

/* On very narrow sidebars (< 360px) AI panel floats over canvas */
@media (max-width: 959px) {
    .design-studio .right-sidebar {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 200;
        box-shadow: -4px 0 24px rgba(0,0,0,0.5);
    }
}

/* ============================================
   B5 — TERRAIN SKIN (premešteno iz Razor <style>)
   ============================================ */
.design-studio .menu-bar {
    background: rgba(8, 12, 24, 0.92);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-bottom: 1px solid rgba(139, 92, 246, 0.18);
}

.design-studio .menu-bar-left {
    border-right-color: rgba(139,92,246,0.14);
}

.design-studio .menu-bar-btn {
    color: #94A3B8;
    transition: color 0.15s, background 0.15s;
}
.design-studio .menu-bar-btn:hover {
    color: #F8FAFC;
    background: rgba(139,92,246,0.08);
}

.design-studio .menu-item > span,
.design-studio .menu-item > .mud-icon-root {
    color: #94A3B8;
    transition: color 0.15s;
}
.design-studio .menu-item:hover > span {
    color: #F8FAFC;
}

.design-studio .menu-bar-right .mud-button-filled {
    background: #8B5CF6;
    border-color: transparent;
    box-shadow: 0 0 12px rgba(139,92,246,0.30);
    transition: box-shadow 0.2s, transform 0.15s;
}
.design-studio .menu-bar-right .mud-button-filled:hover:not(:disabled) {
    background: #7C3AED;
    box-shadow: 0 0 22px rgba(139,92,246,0.50);
    transform: translateY(-1px);
}
.design-studio .menu-bar-right .mud-button-filled:disabled {
    background: rgba(139,92,246,0.30);
    box-shadow: none;
}

.design-studio .dropdown-menu {
    background: rgba(8, 12, 24, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-color: rgba(139,92,246,0.18);
    box-shadow: 0 8px 32px rgba(0,0,0,0.60), 0 0 0 1px rgba(139,92,246,0.08);
}

.design-studio .menu-option {
    color: #94A3B8;
    transition: background 0.12s, color 0.12s;
}
.design-studio .menu-option:hover {
    background: rgba(139,92,246,0.10);
    color: #F8FAFC;
}

.design-studio .menu-divider {
    border-color: rgba(139,92,246,0.10);
}

.design-studio .canvas-toolbar {
    background: rgba(8,12,24,0.85);
    border-bottom-color: rgba(139,92,246,0.10);
}

.design-studio .right-sidebar {
    background: rgba(8,12,24,0.90);
    border-left-color: rgba(139,92,246,0.12);
}

.align-buttons {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
}
.align-buttons .mud-icon-button {
    width: 28px;
    height: 28px;
    color: #94A3B8;
    background: rgba(30,41,59,0.8);
    border: 1px solid #334155;
    border-radius: 4px;
}
.align-buttons .mud-icon-button:hover {
    color: #F8FAFC;
    background: rgba(139,92,246,0.2);
    border-color: #8B5CF6;
}

.color-swatch-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.color-swatch-btn {
    width: 32px;
    height: 32px;
    border: 2px solid #334155;
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
}
.color-swatch-btn:hover {
    border-color: #8B5CF6;
}
.recent-colors {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.recent-swatch {
    width: 20px;
    height: 20px;
    border: 1px solid #334155;
    border-radius: 3px;
    cursor: pointer;
    padding: 0;
}
.recent-swatch:hover {
    border-color: #8B5CF6;
    transform: scale(1.1);
}
/* BUG#7 — Gradient panel color inputi (isti tretman kao FG/BG swatch-evi iz BUG#9) */
.ds-grad-color {
    width: 100%;
    height: 26px;
    min-height: 26px;
    padding: 0;
    background: transparent;
    border: 1px solid #334155;
    border-radius: 4px;
    cursor: pointer;
}
.ds-grad-color::-webkit-color-swatch-wrapper { padding: 0; }
.ds-grad-color::-webkit-color-swatch { border: none; border-radius: 3px; }
.ds-grad-color::-moz-color-swatch { border: none; border-radius: 3px; }

.cmyk-inputs {
    margin-top: 8px;
}
.cmyk-row {
    display: flex;
    gap: 4px;
    align-items: center;
}
.cmyk-row input {
    width: 36px;
    background: #1E293B;
    color: #F8FAFC;
    border: 1px solid #334155;
    border-radius: 4px;
    padding: 4px;
    font-size: 11px;
    text-align: center;
}
.cmyk-row input:focus {
    border-color: #8B5CF6;
    outline: none;
}

/* ============================================
   B5.3 — Inline style replacements
   ============================================ */
.ds-tool-panel {
    padding: 8px;
}
.ds-tool-panel-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--ds-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.ds-field {
    margin-bottom: 6px;
}
.ds-field-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ds-field-label {
    font-size: 11px;
    color: var(--ds-text-secondary);
    min-width: 40px;
}
.ds-empty-state {
    padding: 16px 12px;
    text-align: center;
    font-size: 12px;
    color: var(--ds-text-muted);
}

/* ============================================
   STUDIO FULLSCREEN OVERRIDES (CEO SCREEN)
   ============================================ */
.dashboard-page:has(.ds-fullscreen) .dashboard-topbar,
.dashboard-page:has(.ds-fullscreen) .topbar,
.dashboard-page:has(.ds-fullscreen) .bottom-bar,
.dashboard-page:has(.ds-fullscreen) .dashboard-bottom-menu {
    display: none !important;
}

.dashboard-page:has(.ds-fullscreen) .dashboard-shell {
    height: 100vh !important;
    width: 100vw !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 1150 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.dashboard-page:has(.ds-fullscreen) .dashboard-content-layer {
    z-index: 1150 !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.dashboard-page:has(.ds-fullscreen) .dashboard-tool {
    width: 100vw !important;
    height: 100vh !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 1150 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.dashboard-page:has(.ds-fullscreen) .dashboard-tool > div {
    padding: 0 !important;
    margin: 0 !important;
    height: 100vh !important;
    width: 100vw !important;
    overflow: hidden !important;
}

/* ============================================
   KONTEKSTNI MENI (desni klik na objekat)
   ============================================ */
.ds-ctx-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;
}

.ds-ctx-menu {
    position: fixed;
    z-index: 2001;
    background: #1E293B;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 4px 0;
    min-width: 180px;
    box-shadow: 0 12px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(139,92,246,.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.ds-ctx-item {
    padding: 7px 16px;
    font-size: 13px;
    color: #E2E8F0;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.1s;
    user-select: none;
}

.ds-ctx-item:hover {
    background: rgba(139,92,246,0.18);
    color: #A78BFA;
}

.ds-ctx-divider {
    height: 1px;
    margin: 4px 8px;
    background: #334155;
}


/* ══════════════════════════════════════════════════════════════
   STUDIO PRO — UI sloj (B2–B6)
   ══════════════════════════════════════════════════════════════ */

/* ── B2: statusna traka ─────────────────────────────────────── */
.ds-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 32px;
    padding: 0 12px;
    background: #0F172A;
    border-top: 1px solid #1E293B;
    font-size: 11.5px;
    color: #94A3B8;
    flex: 0 0 auto;
    /* A3 — traka NE sme da seče: spisak upozorenja je `position:absolute` iznad nje.
       Prelivanje čipova na uskom ekranu se rešava tamo gde i nastaje — u levoj grupi. */
    overflow: visible;
}

.ds-status-left,
.ds-status-center,
.ds-status-right {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.ds-status-left { overflow-x: auto; min-width: 0; scrollbar-width: none; }
.ds-status-left::-webkit-scrollbar { display: none; }

.ds-status-right { margin-left: auto; }

.ds-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    background: #1E293B;
    color: #CBD5E1;
}

.ds-status-warn { background: #78350F; color: #FDE68A; }

/* B5 — „neizmerljivo" nije upozorenje: nije nađena greška, nego nije bilo šta da se
   izmeri. Crvena bi tu bila laž isto koliko i zelena. */
.ds-status-muted { background: #1E293B; color: #64748B; }

.ds-status-warning {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 0;
    border-radius: 4px;
    background: rgba(239, 68, 68, 0.15);
    color: #FCA5A5;
    font: inherit;
    cursor: pointer;
}

.ds-status-warning:hover { background: rgba(239, 68, 68, 0.26); }

.ds-status-save { background: #14532D; color: #BBF7D0; }

/* ── A1: sigurna zona uz napust, u istom čipu ────────────────── */
.ds-status-safe { color: #7DD3FC; }
.ds-status-unit { opacity: 0.65; }

/* ── A3: upozorenja provere — čip sa brojem, spisak NAD trakom ─
   Spisak je `position:absolute` sa `bottom:100%` baš zato da ne uđe u tok: blok koji je
   do A3 stajao u platnu pomerao je crtež za onoliko redova koliko je bilo nalaza. */
.ds-status-warnings-wrap { position: relative; display: inline-flex; }

.ds-status-warnings-list {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 6px;
    min-width: 280px;
    max-width: 460px;
    max-height: 260px;
    overflow-y: auto;
    background: #0F172A;
    border: 1px solid #334155;
    border-radius: 6px;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
    z-index: 500;
    text-align: left;
}

.ds-status-warnings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    border-bottom: 1px solid #1E293B;
    font-weight: 600;
    color: #FCA5A5;
    position: sticky;
    top: 0;
    background: #0F172A;
}

.ds-status-warnings-close {
    background: none;
    border: 0;
    color: #94A3B8;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 2px 4px;
}

.ds-status-warnings-close:hover { color: #F8FAFC; }

.ds-status-warnings-list ul {
    margin: 0;
    padding: 6px 10px 8px 24px;
    line-height: 1.6;
    color: #FFE0B2;
}
.ds-status-zoom { width: 110px; }
.ds-status-zoom-value { min-width: 44px; justify-content: center; }

/* ── B2: panel istorije ─────────────────────────────────────── */
.ds-history-panel { max-height: 260px; overflow-y: auto; }

.ds-history-empty { padding: 12px; text-align: center; }

.ds-history-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ds-history-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
}

.ds-history-current { background: rgba(139, 92, 246, 0.14); }

/* Koraci posle trenutnog su i dalje dostupni — prigušeni, ne sakriveni. */
.ds-history-undone { opacity: 0.45; }

.ds-history-footer {
    padding: 6px 12px;
    border-top: 1px solid #1E293B;
}

/* ── B3: pregled prečica ────────────────────────────────────── */
.ds-shortcut-title { display: flex; align-items: center; }

.ds-shortcut-group {
    margin: 14px 0 6px;
    color: #A78BFA;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px;
}

.ds-shortcut-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 4px 16px;
}

.ds-shortcut-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    font-size: 12.5px;
}

.ds-shortcut-keys {
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid #334155;
    border-bottom-width: 2px;
    background: #1E293B;
    color: #E2E8F0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    white-space: nowrap;
}

/* Slovne oznake preko ikonica dok se drži modifikator (B3). */
.tool-btn { position: relative; }

.tool-btn::after {
    content: attr(data-shortcut);
    position: absolute;
    right: 2px;
    bottom: 1px;
    font-size: 9px;
    font-weight: 700;
    color: #A78BFA;
    opacity: 0;
    transition: opacity 0.12s;
    pointer-events: none;
}

body.ds-show-shortcut-hints .tool-btn::after { opacity: 1; }

/* ── B4: panel pomoći ───────────────────────────────────────── */
.ds-help-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ds-help-title { display: flex; align-items: center; min-width: 0; }

.ds-help-body {
    padding: 12px 16px;
    overflow-y: auto;
    flex: 1 1 auto;
}

.ds-help-shortcut {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 12px;
    border-radius: 6px;
    background: rgba(139, 92, 246, 0.1);
    font-size: 12.5px;
}

.ds-help-list { margin: 0 0 10px 18px; padding: 0; }
.ds-help-list li { margin-bottom: 4px; font-size: 13px; line-height: 1.5; }

.ds-help-footer {
    padding: 8px 12px;
    border-top: 1px solid #1E293B;
}

/* ── B5: prikaz mera tokom transformacije ───────────────────── */
.ds-live-readout {
    position: fixed;
    z-index: 20000;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(15, 23, 42, 0.94);
    border: 1px solid #8B5CF6;
    color: #F1F5F9;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.08s;
}

.ds-live-readout.visible { opacity: 1; }

/* ── B6: responsivnost i dodir ──────────────────────────────── */

/* Tablet: desni stub se sužava, paneli se sklapaju. */
@media (max-width: 1439px) {
    .right-sidebar { width: 280px; }
}

/* Ispod 900 px stubovi idu u drawer — platno dobija punu širinu. */
@media (max-width: 899px) {
    .right-sidebar {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        width: min(320px, 88vw);
        box-shadow: -8px 0 24px rgba(0, 0, 0, 0.45);
    }

    .ds-toolbar {
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        height: auto;
        max-height: 96px;
        overflow-y: auto;
    }

    .ds-status-bar { font-size: 11px; gap: 6px; }
    .ds-status-center { display: none; }
    .ds-status-zoom { width: 72px; }
}

@media (max-width: 599px) {
    .ds-status-left .ds-status-chip:nth-child(n+3) { display: none; }
    .ds-status-zoom { display: none; }
}

/* Dodirni uređaji: ciljevi ≥ 44 px (design.md §2.6). */
@media (pointer: coarse) {
    .tool-btn,
    .menu-bar-btn,
    .ds-ctx-item {
        min-width: 44px;
        min-height: 44px;
    }

    .ds-status-bar { height: 44px; }

    /* Kursorske sitnice nemaju smisla bez miša. */
    .ds-live-readout { display: none; }
}

/* Stranica se nikad ne skroluje horizontalno — samo sadržaj u svom okviru. */
.design-studio { max-width: 100%; overflow-x: hidden; }

/* ── B11: pregled separacija ────────────────────────────────── */
.ds-sep-panel { padding: 8px; }

.ds-sep-empty { padding: 16px 8px; text-align: center; }

.ds-sep-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px 6px;
}

.ds-sep-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}

.ds-sep-plate {
    border: 1px solid #1E293B;
    border-radius: 6px;
    background: #0F172A;
    overflow: hidden;
}

/* Prazna ploča je skoro uvek greška u pripremi — mora da bode oči. */
.ds-sep-plate-empty { border-color: #B45309; }

/* E3 — zbirni nalaz o praznim pločama; stoji dok se provera ne pokrene ponovo. */
.ds-sep-alert { margin: 6px 0; font-size: 12px; }

.ds-sep-plate-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 7px;
    font-size: 11.5px;
    color: #E2E8F0;
}

.ds-sep-swatch {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    flex: 0 0 auto;
}

.ds-sep-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ds-sep-chip { margin-left: auto; }

/* Ploča je već "kako izgleda na papiru" — belo je bez boje, pa ide bela podloga. */
.ds-sep-preview {
    display: block;
    width: 100%;
    height: auto;
    background: #FFFFFF;
    border-top: 1px solid #1E293B;
    border-bottom: 1px solid #1E293B;
}

.ds-sep-plate-foot {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 7px;
    font-size: 11px;
    color: #94A3B8;
}

.ds-sep-warn { color: #FDE68A; }
.ds-sep-coverage { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

@media (pointer: coarse) {
    .ds-sep-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

.dashboard-page.studio-mode {
    --topbar-h: 48px;
    padding: 0;
}

.ds-ctx-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 12px;
}
.ds-ctx-color {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid var(--ds-border);
}
.ds-ctx-color:hover {
    border-color: var(--ds-primary);
}


/* SPEC-09 I6 — zaključana sekcija bočne trake nosi razlog, ne samo sivilo. */
.design-studio .ds-acc-lock {
    margin-left: auto;
    padding: 1px 7px;
    border-radius: 4px;
    background: rgba(139, 92, 246, 0.16);
    color: #C4B5FD;
    font-size: 10px;
    white-space: nowrap;
}