/* =========================
   BASE LAYOUT
========================= */

body{
margin:0;
background:#1e1e1e;
color:white;
font-family:Arial;
display:flex;
height:100vh;
}

/* =========================
   SIDEBARS
========================= */

#leftSidebar{
width:220px;
background:#2b2b2b;
display:flex;
flex-direction:column;
padding:10px;
}

#rightSidebar{
width:220px;
background:#2b2b2b;
display:flex;
flex-direction:column;
padding:10px;
}

/* =========================
   CANVAS
========================= */

#canvas{
flex:1;
background:#111;
position:relative;

background-image:
repeating-linear-gradient(
0deg,
#1a1a1a,
#1a1a1a 1px,
transparent 1px,
transparent 40px
),
repeating-linear-gradient(
90deg,
#1a1a1a,
#1a1a1a 1px,
transparent 1px,
transparent 40px
);
}

/* =========================
   BUTTONS
========================= */

.button{
background:#444;
border:1px solid #777;
padding:6px;
margin-bottom:6px;
text-align:center;
cursor:pointer;
}

/* =========================
   HEADERS
========================= */

.sectionHeader{
display:flex;
justify-content:center;
align-items:center;
gap:8px;
margin-bottom:5px;
}

.pageArrow{
width:24px;
height:24px;
background:#444;
border:1px solid #666;
color:white;
cursor:pointer;
}

.pageLabel{
font-size:14px;
}

/* =========================
   TITLES
========================= */

.sectionTitle{
font-size:13px;
opacity:0.8;
margin:6px 0 4px 0;
}

/* =========================
   LIBRARY GRID (LIST STYLE)
========================= */

.grid{
border:1px solid #555;
padding:6px;
display:flex;
flex-direction:column;
gap:6px;
flex:1;
overflow-y:auto;
}

/* =========================
   LIBRARY BRICKS
========================= */

.library-brick{
background:#777;
border:1px solid #aaa;

width:100%;
height:32px;

display:flex;
align-items:center;
justify-content:flex-start;

padding:0 8px;

cursor:pointer;
font-size:12px;

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

box-sizing:border-box;
}

/* =========================
   CANVAS BRICKS
========================= */

.canvas-brick{
background:#777;
border:1px solid #aaa;

width:120px;
height:40px;

display:flex;
align-items:center;
justify-content:center;

cursor:pointer;
font-size:12px;

position:absolute;

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.canvas-brick.selected{
outline:3px solid yellow;
outline-offset:-2px;
}

/* =========================
   SEARCH
========================= */

.searchBar{
margin-top:6px;
padding:6px;
border:1px solid #555;
background:#1e1e1e;
color:white;
}

/* =========================
   CANVAS UI
========================= */

.canvasButton{
width:40px;
height:40px;
background:#444;
border:1px solid #777;
color:white;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
}

.helpButton{
width:40px;
height:40px;
border-radius:50%;
background:#444;
border:1px solid #777;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
}

.canvasTopLeft{
position:absolute;
top:10px;
left:10px;
}

.canvasTopRight{
position:absolute;
top:10px;
right:10px;
display:flex;
gap:6px;
}