:root {
    --color-primary: #3B82F6;
    --color-background: #0F172A;
    --color-card: #1E293B;
    --color-border: #334155;
    --color-text: #F1F5F9;
    --color-muted: #94A3B8;
    --color-accent: #22C55E;
    --color-danger: #EF4444;
}

html {
  font-size: 14px;
  font-family:Arial;
  color:white;
}

h1, h2, h3, h4, h5, h6 {
    color: white;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}


body{
margin:0;
font-family:Arial;
background:#111;
color:white;
}

.app{
display:flex;
}

/* SIDEBAR */

.sidebar{

width:230px;
height:100vh;

background:#0b0b0b;

position:fixed;
left:0;
top:0;

transition:0.3s;

overflow:hidden;

border-right:1px solid #222;

}

/* collapsed */

.sidebar.collapsed{
width:70px;
}

.sidebar-header{

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

padding:18px;

font-size:20px;

}

.sidebar.collapsed .logo{
display:none;
}

.menu{
list-style:none;
padding:0;
margin-top:20px;
}

.menu li a{

display:flex;
align-items:center;

gap:15px;

padding:14px 20px;

color:#bbb;
text-decoration:none;

transition:0.2s;

}

.menu li a:hover{

background:#1a1a1a;
color:white;

}

.sidebar.collapsed .menu span{
display:none;
}

.menu i{
width:25px;
text-align:center;
font-size:18px;
}

/* MAIN CONTENT */

.main-content{

margin-left:230px;
padding:25px;
width:100%;

transition:0.3s;

}

.sidebar.collapsed ~ .main-content{
margin-left:70px;
}

/* MOBILE NAV */

.mobile-nav{

display:none;

position:fixed;
bottom:0;

width:100%;

height:60px;

background:#0b0b0b;

border-top:1px solid #222;

justify-content:space-around;
align-items:center;

}

.mobile-nav a{

color:white;
font-size:22px;

}

/* RESPONSIVE */

@media(max-width:768px){

.sidebar{
display:none;
}

.main-content{
margin-left:0;
padding-bottom:70px;
}

.mobile-nav{
display:flex;
}

}

.menu li a:hover i{
transform:scale(1.2);
transition:0.2s;
}

.menu li.active a{

background:#1a1a1a;
color:white;
border-left:3px solid #ff3b3b;

}

.menu li.active i{
color:#ff3b3b;
}