body{
    line-height: 1.6;
    background-color: var(--bg);
    color: var(--fg);
}

:root {
    --bg: #f8f9fa;
    --fg: #212529;
    --card: #ffffff;
}

:root.dark{
    --bg: #121212;
    --fg: #e9ecef;
    --card: #1e1e1e;
}

.jumbotron{
    background: var(--card);
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .05);
}

#themeToggle{
    cursor: pointer;
}

.card .card-title{
    letter-spacing: .3px;
}

a[href^="http"]{
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
}

footer{
    opacity: .9;
}

.bg-white{
    background-color: var(--card) !important;
}

.bg-light{
    background-color: var(--card) !important;
}

.navbar, header{
    background-color: var(--card);

}

.dark .navbar{
    background-color: var(--card) !important;

    --bs-navbar-color: var(--fg);
    --bs-navbar-hover-color: #bcdfff;
    --bs-navbar-brand-color: var(--fg);
    --bs-navbar-brand-hover-color: #bcdfff;
    --bs-navbar-toggler-border-color: var(--fg);
}

.dark .navbar .navbar-toggler-icon{
    filter: invert(1) grayscale(100%);
}


.dark .table {
  --bs-table-color: var(--fg);
  --bs-table-bg: var(--card);
  --bs-table-border-color: rgba(255,255,255,0.15);
  --bs-table-striped-bg: rgba(255,255,255,0.04);
  --bs-table-striped-color: var(--fg);
  --bs-table-hover-bg: rgba(255,255,255,0.06);
  --bs-table-hover-color: var(--fg);
}


.dark .table thead th {
  border-bottom-color: rgba(255,255,255,0.2);
}
.dark .table-bordered {
  border-color: rgba(255,255,255,0.2);
}

.dark .table-light,
.dark .bg-white {
  --bs-table-bg: var(--card) !important;
  background-color: var(--card) !important;
  color: var(--fg) !important;
}

.card {
  background-color: var(--card);
  color: var(--fg);
  border: 1px solid rgba(0, 0, 0, 0.125); /* λίγο διακριτικό border */
}

/* Σε dark mode τα borders να είναι πιο διακριτικά */
:root.dark .card {
  border-color: rgba(255, 255, 255, 0.15);
}

.form-group{
    margin-bottom: 2rem;
}

.navbar-brand{
    margin-left: 1rem;
}

.navbar-toggler{
    margin-right: 1rem;
}


#nav{
    margin-left: 1rem;
}