body{
margin:0;
font-family:"Segoe UI", sans-serif;
background:#f3f6fb;
}

/* TOPBAR */
.topbar{
display:flex;
align-items:center;
justify-content:space-between;
background:#0078d4;
color:white;
height:48px;
padding:0 16px;
font-size:14px;

position:sticky;
top:0;
z-index:9999;
}

/* LEFT */
.top-left{
display:flex;
align-items:center;
gap:10px;
}

.logo{
font-weight:500;
}

.divider{
opacity:0.6;
}

.breadcrumb{
opacity:0.9;
}

.arrow{
margin:0 6px;
opacity:0.6;
}

/* SEARCH */
.top-search input{
width:420px;
height:30px;
border:none;
border-radius:4px;
padding:0 10px;
}

/* RIGHT */
.top-right{
display:flex;
align-items:center;
gap:16px;
}

.top-icon{
width:18px;
height:18px;
opacity:0.85;
cursor:pointer;
}

.top-icon:hover{
opacity:1;
}

/* USER */
.user-box{
display:flex;
align-items:center;
gap:10px;
}

.avatar{
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #ccc;
    text-align: center;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
}

/* SIDEBAR */
/* SIDEBAR BASE */
.sidebar{
position:fixed;
top:48px;
left:0;
width:56px;
height:calc(100vh - 48px);
background:#ffffff;
border-right:1px solid #e1e1e1;
display:flex;
flex-direction:column;
align-items:center;
padding-top:10px;
overflow:hidden;
}

/* ITEM */
.nav-item{
width:100%;
height:48px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
position:relative;
transition:0.2s;
}

/* IKONA */
.nav-item img{
width:20px;
height:20px;
opacity:0.7;
transition:0.2s;
}

/* HOVER */
.nav-item:hover{
background:#f3f6fb;
}

.nav-item:hover img{
opacity:1;
}

/* ACTIVE (TEN NIEBIESKI PASEK!) */
.nav-item.active{
background:#e5f1fb;
}

.nav-item.active::before{
content:"";
position:absolute;
left:0;
top:0;
width:3px;
height:100%;
background:#0078d4;
}

/* TOOLTIP (AZURE STYLE) */
.nav-item::after{
content:attr(data-label);
position:absolute;
left:60px;
background:#323130;
color:white;
padding:6px 10px;
border-radius:4px;
font-size:12px;
white-space:nowrap;
opacity:0;
pointer-events:none;
transition:0.2s;
}

.nav-item:hover::after{
opacity:1;
}

/* MAIN */
.main{
margin-left:56px;
}

.hero{
background-color:#f3f6fb;
background-image:url("images/bg-azure.png");
background-repeat:no-repeat;
background-position:right center;
background-size: 100%;
padding:40px 30px 80px 30px;

min-height:300px;
display:flex;
flex-direction:column;
justify-content:center;
}


.hero > *{
position:relative;
z-index:1;
}

/* BUTTON */
.newBtn{
background:#0078d4;
color:white;
border:none;
padding:10px 16px;
border-radius:4px;
cursor:pointer;
}

/* CARDS */
/* CARDS GRID */
.cards{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-top:20px;
}


.cards-section{
padding:40px 0;
}

/* CARD */
.card{
display:flex;
align-items:center;
gap:16px;
transition:0.2s;
cursor:pointer;
background:white;
padding:20px;
border-radius:6px;
box-shadow:0 2px 6px rgba(0,0,0,0.1);

height:120px;
}

.card:hover{
box-shadow:0 6px 16px rgba(0,0,0,0.15);
transform:translateY(-2px);
}

/* IKONA */
.card-icon{
width:48px;
height:48px;
object-fit:contain;
}

/* TEKST */
.card-text h3{
margin:0;
font-size:16px;
font-weight:600;
}

.card-text p{
margin:5px 0 0 0;
font-size:14px;
color:#605e5c;
}

/* PIPELINE */
.canvas{
display:flex;
align-items:center;
gap:20px;
margin:40px 0;
}

.node{
background:white;
border:2px solid #0078d4;
padding:15px;
border-radius:6px;
cursor:pointer;
transition:.2s;
}

.node:hover{
transform:scale(1.08);
background:#e6f2ff;
}

.node.active{
border:3px solid #00aaff;
background:#dbeafe;
}

.arrow{
width:50px;
height:4px;
background:#0078d4;
position:relative;
}

.arrow::after{
content:"";
position:absolute;
width:10px;
height:10px;
border-right:3px solid #0078d4;
border-top:3px solid #0078d4;
transform:rotate(45deg);
right:0;
top:-3px;
}

/* STATUS */
.statusText{
color:#0078d4;
font-weight:500;
}

/* LOG */
.logBox{
background:#111827;
color:#00ff9c;
font-family:monospace;
padding:15px;
margin:20px auto;
max-width:500px;
border-radius:8px;
min-height:120px;
}

/* IMAGE */
#randomImage{
max-width:300px;
margin-top:20px;
border-radius:10px;
}

/* GALLERY */
.gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
gap:10px;
}

.gallery img{
width:100%;
cursor:pointer;
border-radius:6px;
}

/* MODAL */
.modal{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.85);
justify-content:center;
align-items:center;
z-index:999;
overflow:auto;
}

/* kontener obrazu */
.modal-content{
max-width:90vw;
max-height:90vh;
display:flex;
justify-content:center;
align-items:center;
}

/* obraz */
.modal img{
max-width:100%;
max-height:90vh;
object-fit:contain;
border-radius:8px;
}

/* BDAY */
.bdayBox{
display:flex;
gap:20px;
background:white;
padding:20px;
border-radius:10px;
margin:40px auto;
max-width:600px;
}

.bdayImg{
width:150px;
border-radius:10px;
}

/* LOADING */
#bootScreen{
position:fixed;
width:100%;
height:100%;
background:white;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
z-index:999;
}

.progress-bar{
width:300px;
height:6px;
background:#ddd;
margin-top:20px;
}

.progress{
height:100%;
width:0%;
background:#0078d4;
animation:load 2s forwards;
}

@keyframes load{
to{width:100%;}
}

.loadingState > *:not(#bootScreen){
display:none;
}

/* CONFETTI */
#confettiCanvas{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
z-index:1000;
}

.success{
color:#22c55e !important;
font-weight:bold;
}

.nav{
position:absolute;
top:50%;
transform:translateY(-50%);
background:rgba(0,0,0,0.5);
color:white;
border:none;
font-size:30px;
width:50px;
height:50px;
cursor:pointer;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
transition:0.2s;
}

.nav:hover{
background:rgba(0,0,0,0.8);
}

.nav.left{
left:20px;
}

.nav.right{
right:20px;
}

.nav{
z-index:1001;
pointer-events:auto;
}

.modal-content{
position:relative;
z-index:1000;
}

.modal{
pointer-events:auto;
}


.modal img{
pointer-events:auto;
}

.pipeline-run{
margin-top:40px;
display:flex;
flex-direction:column;
align-items:center;
gap:20px;
}

.pipeline-run .logBox{
width:500px;
}