/*!
 * Chamilo – Modern Dark Theme (Fira Sans)
 * 2025 – adaptiert von Lumo (Aranides)
 * Original‑Autor: Alex Aragón (aragonc@beeznest.com)
 * Lizenz: GPL
 * Basierend auf Bootstrap
 */

/* ==============================================================
   1️⃣  Schriftarten – Fira Sans (lokal im Ordner fonts/)
   ============================================================== */
@font-face {
    font-family: 'Fira Sans';
    font-weight: 200;               /* ExtraLight */
    font-style: normal;
    src: url('fonts/FiraSans-ExtraLight.otf') format('opentype');
}
@font-face {
    font-family: 'Fira Sans';
    font-weight: 400;               /* Regular */
    font-style: normal;
    src: url('fonts/FiraSans-Regular.otf') format('opentype');
}
@font-face {
    font-family: 'Fira Sans';
    font-weight: 500;               /* Medium */
    font-style: normal;
    src: url('fonts/FiraSans-Medium.otf') format('opentype');
}
@font-face {
    font-family: 'Fira Sans';
    font-weight: 700;               /* Bold */
    font-style: normal;
    src: url('fonts/FiraSans-Bold.otf') format('opentype');
}

/* --------------------------------------------------------------
   2️⃣  Farbvariablen – dunkles Blau‑Schema
   -------------------------------------------------------------- */
:root {
    /* Grund‑Hintergründe */
    --bg-page:          #0d1b2a;   /* sehr dunkles Blau */
    --bg-surface:       #11293d;   /* Karten, Panels, Modale */
    --bg-surface-light: #17304e;   /* leichte Aufhellung (Hover, Header) */
    --bg-navbar:        #0b2745;   /* Navbar‑Hintergrund */
    --bg-footer:        #091726;   /* Footer‑Hintergrund */
    --bg-breadcrumb:    #0b2745;   /* Breadcrumb‑Hintergrund */

    /* Text‑Farben */
    --txt-primary:      #e0e0e0;   /* Standard‑Text */
    --txt-muted:        #a0a0a0;   /* Sekundär‑/Muted‑Text */
    --txt-link:         #66aaff;   /* Links */
    --txt-link-hover:   #99caff;   /* Links beim Hover */
    --txt-inverse:      #ffffff;   /* Weißer Text auf dunklem Hintergrund */

    /* Border‑Farben & Schatten */
    --border:           #2c3e50;   /* dunkles Blau‑Grau */
    --border-light:     #3a506b;   /* helleres Blau für Hover */
    --shadow-sm:        0 1px 3px rgba(0,0,0,0.25);
    --shadow-md:        0 4px 12px rgba(0,0,0,0.35);

    /* Akzent‑Farben (Status) */
    --accent-success:   #2e7d32;   /* Grün */
    --accent-warning:   #f57c00;   /* Orange */
    --accent-danger:    #c62828;   /* Rot */
    --accent-info:      #1565c0;   /* Blau */
    --icon-bg: transparent;
}

/* --------------------------------------------------------------
   3️⃣  Grundlayout & globale Typografie
   -------------------------------------------------------------- */
html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    position: relative;
}
body {
    margin: 0 0 60px;
    font-family: 'Fira Sans', Arial, Helvetica, sans-serif;
    font-weight: 400;
    line-height: 1.8;
    background-color: var(--bg-page);
    color: var(--txt-primary);
}

/* Sticky Footer */
body > main footer.footer {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
}

/* --------------------------------------------------------------
   4️⃣  Links
   -------------------------------------------------------------- */
a {
    color: var(--txt-link);
    text-decoration: none;
    transition: color 0.15s ease;
}
a:hover,
a:focus {
    color: var(--txt-link-hover);
    text-decoration: underline;
}

p {font-size:16px;}
li {font-size:16px;}
/* --------------------------------------------------------------
   5️⃣  Header (Bild‑Hintergrund bleibt unverändert)
   -------------------------------------------------------------- */
header{
    background: url("images/background.png") repeat-x center -25px;
}

/* --------------------------------------------------------------
   6️⃣  Navbar – modernes, flaches Dark‑Blue
   -------------------------------------------------------------- */
.navbar-default {
    background: var(--bg-navbar);
    background: -moz-linear-gradient(top, var(--bg-navbar) 1%, #091726 100%);
    background: -webkit-gradient(linear, left top, left bottom,
                color-stop(1%,var(--bg-navbar)), color-stop(100%,#091726));
    background: -webkit-linear-gradient(top, var(--bg-navbar) 1%,#091726 100%);
    background: -o-linear-gradient(top, var(--bg-navbar) 1%,#091726 100%);
    background: -ms-linear-gradient(top, var(--bg-navbar) 1%,#091726 100%);
    background: linear-gradient(to bottom, var(--bg-navbar) 1%,#091726 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(
            startColorstr='#{var(--bg-navbar)}', endColorstr='#091726',GradientType=0);
    border: none;
    box-shadow: var(--shadow-md);
}
.navbar-default .navbar-brand,
.navbar-default .navbar-text,
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-link {
    color: var(--txt-inverse);
    font-weight: 500;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-link:hover {
    color: var(--txt-link-hover);
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: var(--txt-inverse);
    background: #132b47;
    background: -moz-linear-gradient(top, #132b47 0%, #132b47 100%);
    background: -webkit-gradient(linear, left top, left bottom,
                color-stop(0%,#132b47), color-stop(100%,#132b47));
    background: -webkit-linear-gradient(top, #132b47 0%,#132b47 100%);
    background: -o-linear-gradient(top, #132b47 0%,#132b47 100%);
    background: -ms-linear-gradient(top, #132b47 0%,#132b47 100%);
    background: linear-gradient(to bottom, #132b47 0%,#132b47 100%);
}
.navbar-default .navbar-toggle {
    border-color: #0099c0;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #0099c0;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: var(--txt-inverse);
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    border-color: var(--txt-inverse);
}

/* --------------------------------------------------------------
   7️⃣  Logo (nur Abstand)
   -------------------------------------------------------------- */
.logo {
    margin: 50px 0;
}




/* --------------------------------------------------------------
   8️⃣  Breadcrumb
   -------------------------------------------------------------- */
.breadcrumb {
    background: transparent;
    color: var(--txt-link);
    border-radius: 6px;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
}
.breadcrumb a {
    color: var(--txt-link);
}
.breadcrumb a:hover {
    color: var(--txt-link-hover);
}




/* --------------------------------------------------------------
   1️⃣  Toolbar‑Agenda – größere Icons + blauer Hintergrund
   -------------------------------------------------------------- */
.description {background-color:var(--bg-page);}
#help {display:none;}
#navigation_sidebar {display:none;}
.share-social-media {display:none;}
#toolbar-document {background-color:transparent;;border:0px;}
.table-well {background-color:transparent;border:0px;}
.items-icon {background-color:transparent; border:0px; border-color:transparent; margin: 6px; width: 30px; height: 30px;}
/*.col-sm-5 {display:none;}
.course-image {display:none;}*/

.category .cribbon {background-color:var(--bg-page);}
.thumbnail { background-color:transparent;border-color: var(--bg-page);}

.row #toolbar-agenda #toolbar-user-information {
  background-color: transparent);
}

#toolbar {background-color:transparent;border:0px;}
.actions {background-color:transparent;border:0px;}


.row #toolbar {
  background-color: transparent;
}

.row #toolbar-agenda {
  background-color: transparent;
}

.row {
  background-color: transparent;
}

#toolbar-agenda .col-sm-6 {
    background-color: transparent;
    border-radius: 0px;
    padding: 6px;
    display: inline-flex;
    align-items: center;

}
#toolbar-agenda .col-sm-6 a {
    margin-right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#toolbar-agenda .col-sm-6 a img {
    width: 40px;
    height: 40px;
    max-width: none;
    background-color:transparent;
    border:0px solid;

.col-sm-12 a img {
  background-color: transparent;
}

}
#toolbar-agenda .col-sm-6 a:hover {
    background-color: var(--bg-navbar);
    border-radius: 0px;
}

#toolbar .col-sm-6 {
    background-color: transparent;
    border-radius: 0px;
    padding: 6px;
    display: inline-flex;
    align-items: center;
}

#toolbar .col-sm-6 a {
    margin-right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#toolbar .col-sm-6 a img {
    width: 40px;
    height: 40px;
    max-width: none;
    background-color:transparent;
    border:0px solid;
}
#toolbar .col-sm-6 a:hover {
    background-color: transparent;
    border-radius: 0px;
}

.col-sm-6 text-right {display:none}

/* --------------------------------------------------------------
   2️⃣  Aktiver Kalendertag (jQuery‑UI‑Datepicker)
   -------------------------------------------------------------- */
.ui-datepicker .ui-state-active,
.ui-datepicker .ui-state-active:hover,
.ui-datepicker .ui-state-active a,
.ui-datepicker .ui-state-active a:hover {
    background: var(--bg-navbar) !important;
    color: var(--txt-inverse) !important;
    border-radius: 4px;
}
.ui-datepicker .ui-state-active:hover {
    background: #1a2e4d !important;
}
.ui-datepicker .ui-state-active:focus {
    outline: none;
}

/* --------------------------------------------------------------
   3️⃣  Kalender‑Wrapper – Card‑Design
   -------------------------------------------------------------- */
#calendar {
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    padding: 1rem;
    margin-top: 1rem;
}
.calendar-block {
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    padding: 1rem;
    margin-top: 1rem;
}

/* --------------------------------------------------------------
   9️⃣  Panels / Cards – moderner Look
   -------------------------------------------------------------- */
.panel,
.card,
.modal-content,
.dropdown-menu,
.popover,
.tooltip-inner {
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    color: var(--txt-primary);
}
.panel:hover,
.card:hover,
.modal-content:hover,
.dropdown-menu:hover,
.popover:hover {
    background-color: var(--bg-surface-light);
}
.panel-default > .panel-heading,
.card .content .card-title,
.modal-header,
.modal-footer,
.dropdown-header {
    background-color: var(--bg-surface-light);
    color: var(--txt-primary);
    border-bottom: 1px solid var(--border);
}

/* --------------------------------------------------------------
   🔟  Buttons – flach, abgerundet, klare Zustände
   -------------------------------------------------------------- */
button,
input[type="button"],
input[type="submit"],
.btn {
    background-color: var(--bg-surface-light);
    color: var(--txt-inverse);
    border: none;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-weight: 500;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: var(--shadow-sm);
}
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.btn:hover {
    background-color: var(--border-light);
    box-shadow: var(--shadow-md);
}

/* --------------------------------------------------------------
   1️⃣1️⃣  Formularelemente – größere Felder, klare Ränder
   -------------------------------------------------------------- */
input,
textarea,
select,
.form-control {
    background-color: var(--bg-surface);
    color: var(--txt-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.5rem;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
input:focus,
textarea:focus,
select:focus,
.form-control:focus {
    border-color: var(--txt-link);
    background-color: var(--bg-surface-light);
}
input::placeholder,
textarea::placeholder {
    color: var(--txt-muted);
}

/* Checkbox / Radio – nutzt Link‑Farbe als Accent */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--txt-link);
}
/* --------------------------------------------------------------
   1️⃣2️⃣  Tabellen & Listen
   -------------------------------------------------------------- */
.table,
.data_table {
    background-color: var(--bg-surface);
    color: var(--txt-primary);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 8px;
    overflow: hidden;
}
.table > thead > tr > th,
.data_table > thead > tr > th {
    background-color: var(--bg-surface-light);
    color: var(--txt-primary);
    border-bottom: 1px solid var(--border);
}
.table > tbody > tr:hover,
.data_table > tbody > tr:hover {
    background-color: var(--bg-surface-light);
}

/* --------------------------------------------------------------
   1️⃣3️⃣  Alerts & Badges
   -------------------------------------------------------------- */
.alert {
    background-color: var(--bg-surface-light);
    color: var(--txt-primary);
    border: none;
    border-radius: 6px;
    padding: 0.75rem 1rem;
}
.alert-success { background-color: var(--accent-success); }
.alert-warning { background-color: var(--accent-warning); }
.alert-danger  { background-color: var(--accent-danger); }
.alert-info    { background-color: var(--accent-info); }

.badge {
    background-color: var(--border);
    color: var(--txt-inverse);
    border-radius: 12px;
    padding: 0.25em 0.5em;
}

/* --------------------------------------------------------------
   1️⃣4️⃣  Dropdowns & Popovers
   -------------------------------------------------------------- */
.dropdown-menu {
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.dropdown-menu > li > a {
    color: var(--txt-primary);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: var(--bg-surface-light);
    color: var(--txt-inverse);
}

/* --------------------------------------------------------------
   1️⃣5️⃣  Modals
   -------------------------------------------------------------- */
.modal-content {
    background-color: var(--bg-surface);
    color: var(--txt-primary);
    border: 1px solid var(--border);
}
.modal-header,
.modal-footer {
    border-color: var(--border);
}

/* --------------------------------------------------------------
   1️⃣6️⃣  Pagination
   -------------------------------------------------------------- */
.pagination > li > a,
.pagination > li > span {
    background-color: var(--bg-surface);
    color: var(--txt-primary);
    border: none;
    border-radius: 6px;
    margin: 0 0.15rem;
    transition: background-color 0.2s ease;
}
.pagination > li > a:hover,
.pagination > li > span:hover {
    background-color: var(--bg-surface-light);
    color: var(--txt-inverse);
}

/* --------------------------------------------------------------
   1️⃣7️⃣  Progress Bars
   -------------------------------------------------------------- */
.progress {
    background-color: var(--border);
    border-radius: 6px;
    overflow: hidden;
}
.progress-bar {
    background-color: var(--txt-link);
}

/* --------------------------------------------------------------
   1️⃣8️⃣  Tooltips
   -------------------------------------------------------------- */
.tooltip-inner {
    background-color: var(--bg-surface-light);
    color: var(--txt-primary);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
}

/* --------------------------------------------------------------
   1️⃣9️⃣  Footer
   -------------------------------------------------------------- */
footer.bgfooter{
    background: var(--bg-footer);
    background: -moz-linear-gradient(top, var(--bg-footer) 0%, #272727 100%);
    background: -webkit-gradient(linear, left top, left bottom,
                color-stop(0%,var(--bg-footer)), color-stop(100%,#272727));
    background: -webkit-linear-gradient(top, var(--bg-footer) 0%,#272727 100%);
    background: -o-linear-gradient(top, var(--bg-footer) 0%,#272727 100%);
    background: -ms-linear-gradient(top, var(--bg-footer) 0%,#272727 100%);
    background: linear-gradient(to bottom, var(--bg-footer) 0%,#272727 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(
            startColorstr='#{var(--bg-footer)}', endColorstr='#272727',GradientType=0);
    color: var(--txt-link-hover);
    border-top: 2px solid #1a252f;
    padding: 1.5rem 0;
}
footer.bgfooter a{
    color: var(--txt-inverse);
}
footer.bgfooter a:hover{
    color: #cccccc;
}


/* ==============================================================
   DARK‑MODE – Korrekturen für Toolbar‑Agenda, Kalender & Footer
   ============================================================== */

/* --------------------------------------------------------------
   1️⃣  Toolbar‑Agenda (oben) – dunkler Hintergrund & größere Icons
   -------------------------------------------------------------- */
#toolbar-agenda.actions {
    background-color: var(--bg-navbar);   /* gleiche Farbe wie die Navbar */
    border-radius: 6px;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
}

/* Abstand zwischen den einzelnen Icon‑Links */
#toolbar-agenda.actions .col-sm-6 a {
    margin-right: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Icons größer (32 → 40 px) */
#toolbar-agenda.actions .col-sm-6 a img {
    width: 48px;
    height: 48px;
    max-width: none;
}

/* Hover‑Effekt für jedes Icon */
#toolbar-agenda.actions .col-sm-6 a:hover {
    background-color: #1a2e4d;   /* leicht helleres Blau */
    border-radius: 4px;
}

/* --------------------------------------------------------------
   2️⃣  Kalender‑Wrapper – Card‑Design (wie andere Panels)
   -------------------------------------------------------------- */
#calendar {
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    padding: 1rem;
    margin-top: 1rem;               /* Abstand zur Toolbar‑Agenda */
}

/* Aktiver Tag im jQuery‑UI‑Datepicker – kein Weiß mehr */
.ui-datepicker .ui-state-active,
.ui-datepicker .ui-state-active a,
.ui-datepicker .ui-state-active:hover,
.ui-datepicker .ui-state-active a:hover {
    background: var(--bg-navbar) !important;   /* dunkles Blau */
    color: var(--txt-inverse) !important;      /* weißer Text */
    border-radius: 4px;
}

/* Optional: leicht hellerer Ton beim Hover über den aktiven Tag */
.ui-datepicker .ui-state-active:hover {
    background: #1a2e4d !important;
}

/* --------------------------------------------------------------
   3️⃣  Footer – dunkles Blau, weißer Text, keine weißen Flächen
   -------------------------------------------------------------- */
footer.footer {
    background: var(--bg-footer);
    background: -moz-linear-gradient(top, var(--bg-footer) 0%, #272727 100%);
    background: -webkit-gradient(linear, left top, left bottom,
                color-stop(0%,var(--bg-footer)), color-stop(100%,#272727));
    background: -webkit-linear-gradient(top, var(--bg-footer) 0%,#272727 100%);
    background: -o-linear-gradient(top, var(--bg-footer) 0%,#272727 100%);
    background: -ms-linear-gradient(top, var(--bg-footer) 0%,#272727 100%);
    background: linear-gradient(to bottom, var(--bg-footer) 0%,#272727 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(
            startColorstr='#{var(--bg-footer)}', endColorstr='#272727',GradientType=0);
    color: var(--txt-link-hover);
    border-top: 2px solid #1a252f;
    padding: 1.5rem 0;
}

/* Links im Footer – helles Blau, beim Hover noch heller */
footer.footer a {
    color: var(--txt-inverse);
}
footer.footer a:hover {
    color: #cccccc;
}

/* Sub‑Footer (rechte Spalte im Footer) – gleiche Textfarbe */
footer.footer .sub-footer,
footer.footer .sub-footer * {
    color: var(--txt-link-hover);
}


/* ==============================================================
   Icons – Hintergrund transparent
   ============================================================== */

/* 1️⃣  Alle Icon‑Container (z. B. .item‑icon, .icon‑big, .icon‑student …) */
.item-icon,
.icon-big,
.icon-student,
.icon-studentboss,
.icon-teachers,
.icon-humanresources,
.icon-learnpath,
.icon‑calendar,
.icon‑week,
.icon‑new_event,
.icon‑import_calendar,
.icon‑1day,
.icon‑calendar‑user,
#toolbar-agenda .col-sm-6 a,
#toolbarUser .list-group-item .item-icon,
#profile .list-group-item .item-icon,
#courses .list-group-item .item-icon,
#skills .list-group-item .item-icon {
    background-color: transparent !important;   /* kein Hintergrund mehr */
    border: none !important;                  /* falls ein Rahmen gesetzt wurde */
}

/* 2️⃣  Falls du ein Hintergrund‑Bild (z. B. ein PNG mit weißem Hintergrund) hast,
      das du nicht ändern kannst, kannst du das Bild selbst invertieren,
      damit es auf dunklem Hintergrund sichtbar bleibt. */
.item-icon img,
.icon-big img,
.icon-student img,
.icon-studentboss img,
.icon-teachers img,
.icon-humanresources img,
.icon-learnpath img,
.icon‑calendar img,
.icon‑week img,
.icon‑new_event img,
.icon‑import_calendar img,
.icon‑1day img,
.icon‑calendar‑user img {
    background: transparent !important;   /* Bild‑Hintergrund entfernen */
    filter: none !important;             /* falls vorher ein invert‑Filter gesetzt war */
}


/* --------------------------------------------------------------
   ENDE – Icons transparent
   -------------------------------------------------------------- */

/* --------------------------------------------------------------
   4️⃣  Allgemeine Hilfsklassen (falls noch benötigt)
   -------------------------------------------------------------- */
.bg-dark   { background-color: var(--bg-page) !important; }
.bg-surface{ background-color: var(--bg-surface) !important; }
.bg-surface-light{ background-color: var(--bg-surface-light) !important; }
.text-primary{ color: var(--txt-primary) !important; }
.text-muted  { color: var(--txt-muted) !important; }
.text-link   { color: var(--txt-link) !important; }
.border      { border-color: var(--border) !important; }
.shadow-sm   { box-shadow: var(--shadow-sm) !important; }
.shadow-md   { box-shadow: var(--shadow-md) !important; }

/* --------------------------------------------------------------
   ENDE – Dark‑Mode‑Korrekturen für Toolbar, Kalender & Footer
   -------------------------------------------------------------- */

/* ==============================================================
   2️⃣  Tabellen – 100 % Dark‑Mode (alle Varianten)
   ============================================================== */

/* Grundcontainer – abgerundete Ecken, Schatten, dunkler Hintergrund */
.table,
.data_table,
.table-responsive,
.data_table-responsive {
    width: 100%;
    border-collapse: separate;          /* ermöglicht abgerundete Ecken */
    border-spacing: 0;                  /* kein Abstand zwischen Zellen */
    border-radius: 2px;
    overflow: hidden;                   /* abschneiden, falls Inhalte rausragen */
    background-color: var(--bg-surface);
    color: var(--txt-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

/* ------------------- Header (thead) ------------------- */
.table > thead > tr > th,
.data_table > thead > tr > th {
    background-color: var(--bg-surface-light);
    color: var(--txt-primary);
    font-weight: 600;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid var(--border);
    text-align: left;
}

/* ------------------- Body – Zellen ------------------- */
.table > tbody > tr > td,
.data_table > tbody > tr > td {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--border);
    background-color: var(--bg-surface);   /* sicherstellen, dass keine weiße Zelle übrig bleibt */
}

/* Letzte Zeile – keinen unteren Rand mehr */
.table > tbody > tr:last-child > td,
.data_table > tbody > tr:last-child > td {
    border-bottom: none;
}

/* ------------------- Alternierende Zeilen ------------------- */
/* (Bootstrap definiert .table-striped – wir überschreiben das komplett) */
.table > tbody > tr:nth-child(odd) > td,
.table > tbody > tr:nth-child(odd) > th,
.data_table > tbody > tr:nth-child(odd) > td,
.data_table > tbody > tr:nth-child(odd) > th {
    background-color: var(--bg-surface);           /* dunkles Grund‑Background */
}
.table > tbody > tr:nth-child(even) > td,
.table > tbody > tr:nth-child(even) > th,
.data_table > tbody > tr:nth-child(even) > td,
.data_table > tbody > tr:nth-child(even) > th {
    background-color: var(--bg-surface-light);     /* leicht hellere Zeile für besseren Kontrast */
}

/* ------------------- Hover‑Effekt ------------------- */
.table > tbody > tr:hover > td,
.table > tbody > tr:hover > th,
.data_table > tbody > tr:hover > td,
.data_table > tbody > tr:hover > th {
    background-color: var(--bg-surface-light);
}

/* ------------------- Links in Tabellen ------------------- */
.table a,
.data_table a {
    color: var(--txt-link);
    text-decoration: none;
}
.table a:hover,
.data_table a:hover {
    color: var(--txt-link-hover);
    text-decoration: underline;
}

/* ------------------- Bootstrap‑Klassen, die Weiß setzen ------------------- */
/* .table-bordered, .table-striped, .table-hover, .table-condensed … */
.table,
.table-bordered,
.table-striped,
.table-hover,
.table-condensed,
.data_table,
.data_table-bordered,
.data_table-striped,
.data_table-hover,
.data_table-condensed {
    background-color: transparent;   /* verhindert das Überschreiben mit Weiß */
}

/* ------------------- Responsive Wrapper (kleine Bildschirme) ------------------- */
@media (max-width: 767px) {
    .table-responsive,
    .data_table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* --------------------------------------------------------------
   ENDE Tabellen‑Override – alles ist jetzt dunkel!
   -------------------------------------------------------------- */

/* --------------------------------------------------------------
   2️⃣0️⃣  Spezifische Komponenten (Profile / Courses / Skills)
   -------------------------------------------------------------- */

/* Grundstruktur (Panel, Header, Body, List‑Items) */
#profile .panel,
#courses .panel,
#skills .panel,
#profile .panel-heading,
#courses .panel-heading,
#skills .panel-heading,
#profile .panel-body,
#courses .panel-body,
#skills .panel-body,
#profile .list-group-item,
#courses .list-group-item,
#skills .list-group-item {
    background-color: var(--bg-surface);
    border: 0px solid var(--border);
    color: var(--txt-primary);
}

/* Header (anklickbarer Titel) */
#profile .panel-heading,
#courses .panel-heading,
#skills .panel-heading {
    background-color: var(--bg-surface-light);
    border-bottom: 1px solid var(--border);
}
#profile .panel-heading a,
#courses .panel-heading a,
#skills .panel-heading a {
    color: var(--txt-link);
    font-weight: 500;
    display: block;
    text-decoration: none;
}
#profile .panel-heading a:hover,
#profile .panel-heading a:focus,
#courses .panel-heading a:hover,
#courses .panel-heading a:focus,
#skills .panel-heading a:hover,
#skills .panel-heading a:focus {
    color: var(--txt-link-hover);
}

/* List‑Group‑Items (einzelne Menüpunkte) */
#profile .list-group-item,
#courses .list-group-item,
#skills .list-group-item {
    background-color: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
}
#profile .list-group-item:last-child,
#courses .list-group-item:last-child,
#skills .list-group-item:last-child {
    border-bottom: none;
}
#profile .list-group-item:hover,
#courses .list-group-item:hover,
#skills .list-group-item:hover {
    background-color: var(--bg-surface-light);
}

/* Icons – invertiert, damit sie auf dunklem Hintergrund sichtbar sind */
#profile .list-group-item .item-icon img,
#courses .list-group-item .item-icon img,
#skills .list-group-item .item-icon img {
   /* filter: brightness(0) invert(1); >*/
}

/* Links innerhalb der List‑Group‑Items */
#profile .list-group-item a,
#courses .list-group-item a,
#skills .list-group-item a {
    color: var(--txt-link);
    text-decoration: none;
    flex: 1;
    margin-left: 0.5rem;
}
#profile .list-group-item a:hover,
#profile .list-group-item a:focus,
#courses .list-group-item a:hover,
#courses .list-group-item a:focus,
#skills .list-group-item a:hover,
#skills .list-group-item a:focus {
    color: var(--txt-link-hover);
    text-decoration: underline;
}

/* Zahlen‑Akzent (falls vorhanden) */
#profile .numbers h2,
#courses .numbers h2,
#skills .numbers h2,
.item-report .item-report-number,
.view-global-followed .numbers h2 {
    color: #ffcc00;                 /* leuchtendes Gelb für Zahlen */
}

/* --------------------------------------------------------------
   2️⃣1️⃣  Responsives Feintuning (kleinere Bildschirme)
   -------------------------------------------------------------- */
@media (max-width: 991px) {
    .navbar-default .navbar-brand { font-size: 1.2rem; }
    .logo { margin: 30px 0; }
}
@media (max-width: 767px) {
    .navbar-default .navbar-toggle { margin-right: 15px; }
    .breadcrumb { font-size: 0.9rem; }
    .panel, .card { margin-bottom: 1rem; }
}
@media (max-width: 480px) {
    .logo { margin: 15px 0; }
    .navbar-default .navbar-brand { font-size: 1rem; }
}

/* --------------------------------------------------------------
   2️⃣2️⃣  Hilfsklassen (optional)
   -------------------------------------------------------------- */
.bg-dark          { background-color: var(--bg-page) !important; }
.bg-surface       { background-color: var(--bg-surface) !important; }
.bg-surface-light { background-color: var(--bg-surface-light) !important; }
.text-primary     { color: var(--txt-primary) !important; }
.text-muted       { color: var(--txt-muted) !important; }
.text-link        { color: var(--txt-link) !important; }
.border           { border-color: var(--border) !important; }
.shadow-sm        { box-shadow: var(--shadow-sm) !important; }
.shadow-md        { box-shadow: var(--shadow-md) !important; }