/* ---------- GLOBAL ---------- */

body{
font-family:Arial, sans-serif;
background:#0f1115;
color:white;
margin:0;
padding:30px;
}

/* container zodat site niet super breed wordt */

.container{
max-width:950px;
margin:auto;
}

/* ---------- HEADER ---------- */

.topbar{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:25px;
}

h1{
margin:0;
font-size:22px;
}

/* ---------- LINKS ---------- */

a{
color:#4fc3f7;
text-decoration:none;
}

a:hover{
color:#7fd9ff;
}

/* ---------- BUTTONS ---------- */

.btn{
background:#2a2f3a;
padding:10px 16px;
border-radius:8px;
color:white;
font-size:14px;
border:none;
cursor:pointer;
display:inline-block;
}

.btn:hover{
background:#343b4a;
}

.logout{
background:#ff5252;
}

.logout:hover{
background:#ff6b6b;
}

.btn-small{
background:#2a2f3a;
padding:6px 10px;
border-radius:6px;
font-size:13px;
display:inline-block;
}

.btn-small:hover{
background:#394150;
}

.danger{
background:#ff5252;
}

.actions{
display:flex;
gap:8px;
}

/* ---------- TABLE ---------- */

table{
width:100%;
border-collapse:collapse;
background:#1b1f27;
border-radius:10px;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,0.35);
}

th{
background:#222733;
padding:12px;
text-align:left;
color:#9fb3c8;
font-weight:600;
}

td{
padding:12px;
border-top:1px solid #2a2f3a;
}

tr:hover{
background:#242a36;
}

/* ---------- LOGIN PAGE ---------- */

.login-body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
background:#0f1115;
}

.login-card{
background:#1b1f27;
padding:40px;
border-radius:14px;
width:320px;
box-shadow:0 10px 25px rgba(0,0,0,0.4);
text-align:center;
}

.login-card h1{
margin-bottom:25px;
}

.login-card input{
width:100%;
padding:12px;
border-radius:8px;
border:none;
margin-bottom:15px;
background:#2a2f3a;
color:white;
}

.login-card input::placeholder{
color:#9aa4b2;
}

.login-card button{
width:100%;
padding:12px;
border-radius:8px;
border:none;
background:#4fc3f7;
color:black;
font-weight:bold;
cursor:pointer;
}

.login-card button:hover{
background:#3bb0e3;
}

.error{
background:#ff5252;
padding:8px;
border-radius:6px;
margin-bottom:15px;
}

/* ---------- PLAYLIST EDITOR ---------- */

.editor{
display:flex;
gap:20px;
margin-top:20px;
}

/* channel list */

.channel-list{
width:60%;
background:#1b1f27;
border-radius:10px;
overflow:hidden;
max-height:600px;
overflow-y:auto;
box-shadow:0 10px 25px rgba(0,0,0,0.35);
}

.channel-row{
padding:12px;
border-bottom:1px solid #2a2f3a;
cursor:pointer;
}

.channel-row:hover{
background:#242a36;
}

/* right editor */

.channel-editor{
width:40%;
background:#1b1f27;
padding:20px;
border-radius:10px;
display:flex;
flex-direction:column;
gap:10px;
box-shadow:0 10px 25px rgba(0,0,0,0.35);
}

.channel-editor label{
font-size:13px;
color:#9fb3c8;
}

.channel-editor input{
padding:10px;
border-radius:6px;
border:none;
background:#2a2f3a;
color:white;
}

/* editor buttons */

.editor-buttons{
display:flex;
gap:10px;
margin-top:10px;
}

.editor-buttons button{
background:#2a2f3a;
border:none;
padding:8px 12px;
border-radius:6px;
color:white;
cursor:pointer;
}

.editor-buttons button:hover{
background:#394150;
}