<style>

.container {
	text-align: center;
}

.center {
    margin: 0 auto;
	width: 33.33%;
}

.hiddendiv {
    display: none;
}
.showndiv {
    display: block;
	height: 400px; 
	width: 500px;
}
.dataselect select{	
	border: 1px solid #aaa;
    border-radius: 3px;
    background-color: transparent;
    padding: 4px;
}

.lobby-checkbox {
	padding: 10px;
}

table {
	border: solid 2px black;
	border-collapse: collapse;
	width: auto;
	
	font-family: Helvetica;
	position: relative;
}
table.bdrless1 {
	border: solid 2px #bbb;
	position: relative;
}

table.bdrless2, table.bdrless3{
	border: solid 2px #bbb;
	border-right: 1px solid #bbb;
	border-top: 1px solid #bbb;
	position: relative;
}

table.lobby {
	display: none;
}

tr.hoverable:hover {background-color: lightgrey;}

th, td {
	padding: 15px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid #ddd;
	white-space: nowrap;
	position: relative;
}

th {
	background-color: purple;
	color: white;
	position: relative;
}

.dataTables_wrapper {
	width: 100%;
}

.dataTables_processing {
  position: relative !important;
  transform: translateY(80%);
}

input {
	text-align: center;
	border: 1px solid #aaa;
    border-radius: 3px;
    background-color: transparent;
    padding: 4px;
}

h4{
	text-align: right;
}

.colored{
	color: #333b7c;
}

.fixed-table {
  position: fixed;
  top: 50px;
  right: 10;
  width: auto;
  overflow-x: scroll;
}

body {
	background-color: #F7FCFB !important;
}

input.fixedInputWidth {
  width: 100px; 
}

.container-custom {
    max-width: 100%;
    margin-top: 50px;
    margin-bottom: 50px;
}
.card-custom {
    max-width: 100%;
    margin: auto;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}
.text-center-custom {
    text-align: center;
}
.btn-custom {
    width: 100%;
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
}
.rating {
    display: flex;
    gap: 5px;
}
.star {
    font-size: 24px;
    cursor: pointer;
    color: gray;
}
.star.selected, .star:hover, .star:hover .star {
    color: gold;
}
#addQuestionModal {
    z-index: 1060;
}
#editQuestionModal {
    z-index: 1060;
}
.wrapped-cell {
    overflow: hidden;
    word-wrap: break-word; 
    white-space: normal;
}

/* --- Téma gomb pozicionálása --- */
#theme {
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 9999;
}

#theme-toggle {
    background: transparent;
    border: 1px solid #aaa;
    border-radius: 50%;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 18px;
}

/* --- Sötét mód: body.dark akkor aktiválódik --- */
body.dark {
    background-color: #121212 !important;
    color: #e5e5e5 !important;
}

/* Táblázatok sötét témához */
body.dark table,
body.dark table.bdrless1,
body.dark table.bdrless2,
body.dark table.bdrless3 {
    border-color: #555;
    background-color: #1e1e1e;
}

body.dark th {
    background-color: #4b0082; /* lila, de sötét módhoz igazítva */
}

body.dark td, 
body.dark th {
    border-bottom: 1px solid #444;
}

/* Hover szín sötét módban */
body.dark tr.hoverable:hover {
    background-color: #333;
}

/* Inputok sötét módban */
body.dark input,
body.dark select {
    background-color: #1e1e1e;
    color: #eee;
    border-color: #555;
}

/* Kártyák */
body.dark .card-custom {
    background-color: #1c1c1c;
    box-shadow: 0px 4px 8px rgba(255, 255, 255, 0.1);
}

/* Csillag rating */
body.dark .star {
    color: #888;
}

/* --- NAVBAR világos mód (alapértelmezett) --- */
.navbar-custom {
    background-color: #f2f2f2 !important; /* világos neutrális szürke */
    border-bottom: 1px solid #ccc;
}

/* Navbar linkek - világos mód */
.navbar-custom .nav-link,
.navbar-custom .navbar-brand {
    color: #333 !important;
}

/* --- NAVBAR sötét mód --- */
body.dark .navbar-custom {
    background-color: #2a2a2a !important; /* sötét neutrális szürke */
    border-bottom: 1px solid #444;
}

body.dark .navbar-custom .nav-link,
body.dark .navbar-custom .navbar-brand {
    color: #eee !important;
}

body.dark .navbar-custom .nav-link:hover {
    color: #aaa !important; /* harmonizáló hover */
}

/* ========================= */
/*       VILÁGOS MÓD         */
/* ========================= */

.modal-content {
    background-color: #ffffff;
    color: #333;
    border: 1px solid #ddd;
}

.modal-header,
.modal-body,
.modal-footer {
    background-color: #ffffff;
    color: #333;
}

.form-control {
    background-color: #ffffff;
    color: #333;
    border: 1px solid #ccc;
}

.btn-primary {
    background-color: #6f42c1; /* lila */
    border-color: #5a36a3;
}

.btn-primary:hover {
    background-color: #5936a5;
}

.btn-secondary,
.cancel-btn {
    background-color: #e0e0e0;
    border: 1px solid #bbb;
    color: #333;
}

.btn-secondary:hover,
.cancel-btn:hover {
    background-color: #d0d0d0;
}


/* ========================= */
/*        SÖTÉT MÓD          */
/* ========================= */

body.dark .modal-content {
    background-color: #1e1e1e;
    color: #eee;
    border: 1px solid #444;
}

body.dark .modal-header,
body.dark .modal-body,
body.dark .modal-footer {
    background-color: #1e1e1e;
    color: #eee;
}

body.dark .form-control {
    background-color: #2c2c2c;
    color: #eee;
    border: 1px solid #555;
}

body.dark .form-control:focus {
    background-color: #2c2c2c;
    color: #fff;
    border-color: #a472ff;
    box-shadow: 0 0 0 0.2rem rgba(164,114,255,0.25);
}

/* Gombok sötét módhoz */
body.dark .btn-primary {
    background-color: #a472ff;
    border-color: #915ae3;
    color: #000;
}

body.dark .btn-primary:hover {
    background-color: #b78cff;
}

body.dark .btn-secondary,
body.dark .cancel-btn {
    background-color: #444;
    border: 1px solid #666;
    color: #eee;
}

body.dark .btn-secondary:hover,
body.dark .cancel-btn:hover {
    background-color: #555;
}

/* === ROW HIGHLIGHTS – világos mód === */
.row-online td {
    background-color: #C1FFD5 !important; /* enyhe zöld */
}

.row-access-denied td {
    background-color: #FFF4F3 !important; /* halvány piros */
}
/* === ROW HIGHLIGHTS – sötét mód === */
body.dark .row-online td {
    background-color: #1d3a29 !important; /* sötétített zöldes */
    color: #e6ffe9;
}

body.dark .row-access-denied td {
    background-color: #3a1e1e !important; /* sötétített pirosas */
    color: #ffe7e7;
}
/* DARK MODE – minden táblázat szín */
body.dark table.table {
    background-color: #1e1e1e; /* táblázat háttere */
    color: #e0e0e0;            /* alap szöveg */
    border-color: #444;         /* border */
}

/* th elemek */
body.dark table.table th {
    background-color: #2a2a2a; /* fejlécek */
    color: #ddd;
    border-color: #555;
}

/* td elemek */
body.dark table.table td {
    background-color: #1e1e1e; /* cellák alapja */
    color: #e0e0e0;
    border-color: #444;
}

/* hover effekt */
body.dark table.table tbody tr:hover td {
    background-color: #2a2a2a;
}

/* táblázaton belüli buttonok */
body.dark table.table button {
    color: #eee;
}

/* külön színek row-online / row-access-denied esetén */
body.dark .row-online td {
    background-color: #1d3a29 !important;
    color: #e6ffe9 !important;
}
body.dark .row-access-denied td {
    background-color: #3a1e1e !important;
    color: #ffe7e7 !important;
}
body.dark .btn.btn-light {
    background-color: #2e2e2e !important;
    border-color: #444 !important;
    color: #e8e8e8 !important;
}

body.dark .btn.btn-light:hover {
    background-color: #3a3a3a !important;
}
</style>