:root {
    --primary: #E63946;
    --primary-dark: #B02A37;
    --accent: #FF6B6B;
    --bg-dark: #121212;
    --bg-card: #1E1E1E;
    --bg-table-header: #2A2A2A;
    --text-main: #F2F2F2;
    --text-muted: #B5B5B5;
}



html {
  font-size: 14px;
}

@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 var(--accent), 0 0 0 0.25rem var(--primary);
}

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

body {
  margin-bottom: 60px;
  background-color: var(--bg-dark);
  color: var(--text-main);
}

.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;
}

.navbar {
    background-color: var(--bg-card);
    border-bottom: 2px solid var(--primary);
}

.navbar .nav-link,
.navbar .navbar-brand {
    color: var(--text-main);
}

.navbar .nav-link:hover {
    color: var(--accent);
}

h1, h2, h3 {
    color: var(--primary);
}

.btn-primary {
    background-color: var(--accent);
    border-color: var(--accent);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    color: var(--text-main);
}

a {
    color: var(--accent);
}

a:hover {
    color: var(--primary);
    text-decoration: underline; 
}


.table thead th {
    background-color: var(--bg-table-header);
    color: var(--accent);
    border-bottom: 2px solid var(--primary);
}

.table tbody tr {
    background-color: var(--bg-card);
}

.table tbody tr:nth-child(even) {
    background-color: #181818;
}



.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #181818;
}

.table-hover > tbody > tr:hover {
    background-color: #2A2A2A;
    color: var(--text-main);
}

label {
    color: var(--accent);
}

input, select, textarea {
    background-color: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--bg-table-header);
}

input:focus, select:focus, textarea:focus {
    border-color: var(--primary);
    box-shadow: none;
}

footer {
    border-top: 2px solid var(--primary);
    background-color: var(--bg-card);
    color: var(--text-muted);
}