/* General Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: Arial, sans-serif;
    background: #1b1b1b;
    color: #f0f0f0;
}
.center-container {
    width: 500px;
    margin: 60px auto;
    background: #2a2a2a;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(0,0,0,0.7);
}
.center-container h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #ffa500;
}
form label {
    display: block;
    margin-bottom: 8px;
}
form input[type="text"],
form input[type="password"] {
    width: 100%;
    padding: 8px;
    margin-top: 4px;
    background: #333;
    border: 1px solid #444;
    color: #f0f0f0;
    border-radius: 4px;
}
form button {
    margin-top: 15px;
    padding: 10px;
    background: #444;
    color: #ffa500;
    border: 1px solid #666;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}
form button:hover {
    background: #ffa500;
    color: #1b1b1b;
}
.log-box, .error-box {
    margin-top: 20px;
    background: #333;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #444;
}
.log-box h3, .error-box h3 {
    margin-bottom: 10px;
    color: #ffa500;
}
.log-box ul, .error-box ul {
    list-style: none;
    max-height: 200px;
    overflow-y: auto;
}
.progress-bar {
    margin-top: 20px;
    background: #333;
    height: 25px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #444;
}
.progress {
    background: #ffa500;
    height: 25px;
    line-height: 25px;
    color: #1b1b1b;
    text-align: center;
    width: 0;
    transition: width 0.4s ease;
}
.main-menu {
    background: #222;
    padding: 10px;
}
.main-menu a {
    margin-right: 15px;
    color: #ffa500;
    text-decoration: none;
}
.main-menu a.admin-link {
    color: #ff6700;
}
.centered {
    text-align: center;
    margin-top: 50px;
}
.admin-interface {
    max-width: 900px;
    margin: 20px auto;
    background: #2a2a2a;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.admin-interface h3 {
    color: #ffa500;
    margin-bottom: 10px;
}
.section-box {
    background: #333;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #444;
    margin-bottom: 20px;
}
.section-box h4 {
    margin-bottom: 10px;
    color: #ffa500;
}
.user-row {
    background: #2a2a2a;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    border: 1px solid #444;
    display: inline-block;
    width: 100%;
}
.user-row button {
    background: #444;
    color: #ffa500;
    border: 1px solid #666;
    margin-right: 5px;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
}
.user-row button:hover {
    background: #ffa500;
    color: #1b1b1b;
}
.user-row label {
    display: block;
    margin-top: 8px;
}
.user-row input[type="text"] {
    width: 300px;
    background: #333;
    border: 1px solid #444;
    color: #f0f0f0;
    border-radius: 4px;
    margin-top: 4px;
    padding: 5px;
}
.user-row select {
    background: #333;
    border: 1px solid #444;
    color: #f0f0f0;
    padding: 5px;
    border-radius: 4px;
}
.pagination {
    margin-top: 10px;
}
.pagination button {
    background: #444;
    color: #ffa500;
    border: 1px solid #666;
    border-radius: 4px;
    cursor: pointer;
    padding: 6px 10px;
}
.pagination button:hover {
    background: #ffa500;
    color: #1b1b1b;
}
.login-box {
    width: 300px;
    margin: 50px auto;
    background: #2a2a2a;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(0,0,0,0.7);
}
.login-box h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #ffa500;
}
.login-box label {
    margin-bottom: 10px;
}
.login-box input[type="text"],
.login-box input[type="password"] {
    width: 100%;
    padding: 8px;
    margin-top: 4px;
    background: #333;
    border: 1px solid #444;
    color: #f0f0f0;
    border-radius: 4px;
}
textarea {
    width: 100%;
    background: #333;
    color: #f0f0f0;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 10px;
}
pre.file-tree {
    background: #2a2a2a;
    color: #ffa500;
    padding: 10px;
    border: 1px solid #444;
    border-radius: 4px;
    overflow-x: auto;
    line-height: 1.4em;
}
.file-actions button {
    background: #444;
    color: #ffa500;
    border: 1px solid #666;
    margin-right: 5px;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
}
.file-actions button:hover {
    background: #ffa500;
    color: #1b1b1b;
}
.debug-section-box {
    background: #333;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #444;
}
.debug-section-box h4 {
    margin-bottom: 10px;
    color: #ffa500;
}
#debugConsole {
    min-height: 100px;
    max-height: 200px;
    overflow-y: auto;
    background: #2a2a2a;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #444;
    border-radius: 4px;
}
footer .debug_logics {
    background: #222;
    padding: 0;
    border: 2px solid #ff6700;
    border-radius: 4px;
    max-width: 800px;
    margin: 20px auto;
}
footer .debug_logics h4 {
    margin: 0;
    padding: 10px;
    color: #ff6700;
}
#debugConsoleFooter {
    width: 100%;
    background: #2a2a2a;
    color: #ff6700;
    border-top: 1px solid #444;
    border-radius: 0;
    padding: 6px 10px;
    overflow-y: auto;
}


/* Session Block */
.session-block {
    background: #2a2a2a;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #333;
}
/* We'll store an attribute for partial updates: data-sid */
.session-block[data-sid] { }

/* left and right columns */
.session-left {
    display: flex;
    flex-direction: column;
}
.session-right {
    display: flex;
    align-items: center;
}
.session-title {
    color: #ffa500;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 5px;
}
.session-players {
    font-size: 14px;
    color: #fff;
}

/* Buttons container */
.session-actions {
    display: flex;
    gap: 5px;
}
.session-actions a {
    background: #444;
    color: #ffa500;
    border-radius: 4px;
    padding: 6px 12px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.session-actions a:hover {
    background: #ffa500;
    color: #1b1b1b;
}
/* Disabled vs Enabled */
.session-actions a.disabled-btn {
    background: #555 !important;
    color: #aaa !important;
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}
.session-actions a.enabled-btn.start {
    background: green !important;
    color: #fff !important;
}

/* Countdown circle */
.session-countdown-circle {
    width: 32px;
    height: 32px;
    background: #32CD32;
    border-radius: 50%;
    color: #000;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

/* Debug console toggle, etc. */
.debug_logics.collapsed #debugConsoleFooter {
    display: none !important;
}





.deckBox {
  margin: 10px;
  padding: 15px 20px;
  background: #444;
  color: #ffa500;
  border: 1px solid #666;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
}
.deckBox:hover {
  background: #666;
}




/* Keep any other existing CSS for body, menus, etc. */
