body, .table, .table th, .table td, .navbar, .card, .form-control, .btn {
    color: #f8f9fa !important;
}

body {
    background: linear-gradient(135deg, #23263a 0%, #1f2021 100%);
    min-height: 100vh;
    font-family: 'Segoe UI', Arial, sans-serif;
}

.card, .card:hover {
  background-color: #23272b !important;
  color: #f8f9fa !important;
  border: none !important;
  box-shadow: none !important;
  transition: none !important;
}

.card-header {
    background-color: #23272b !important;
    color: #f8f9fa !important;
    border-bottom: none !important;
}

.btn, .form-control {
    border-radius: 0.5rem;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.1s;
}

.btn-primary, .btn-success, .btn-danger, .btn-info, .btn-warning, .btn-secondary {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.btn:hover, .btn:focus {
    background: #0d6efd !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(13,110,253,0.15);
    transform: translateY(-2px) scale(1.03);
}

.btn:active {
    transform: scale(0.98);
}

.fade-in {
    animation: fadeIn 0.7s;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px);}
    to { opacity: 1; transform: translateY(0);}
}

.rounded-table {
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
}
.table thead th {
    border-top: none;
    background: #23263a;
}
.table tbody tr {
    transition: background 0.2s;
}
.table tbody tr:hover {
    background: #343a40;
}

.form-check-input:checked {
    background-color: #198754 !important; /* Bootstrap green */
    border-color: #198754 !important;
}

.table-dark {
    background-color: #23263a !important;
}
.table-dark th, .table-dark td {
    color: #f8f9fa !important;
}

.bi-question-circle {
    transition: transform 0.2s;
}
.bi-question-circle:hover {
    transform: scale(1.5);
}

body.light-mode {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #23263a !important;
}
body.light-mode .table, body.light-mode .table th, body.light-mode .table td, body.light-mode .form-control {
    color: #23263a !important;
}
body.light-mode .table-dark {
    background-color: #fff !important;
}
body.light-mode .table-dark th, body.light-mode .table-dark td {
    color: #f8f9fa !important;
}

.form-control,
input,
textarea {
    color: #23263a !important;         /* Black text */
    background-color: #fff !important; /* White background */
    border-color: #ced4da !important;
}

/* Responsive tweaks */
@media (max-width: 768px) {
    .container, .container.mt-5, .container.mt-4, .container.py-5 {
        padding: 1rem !important;
        margin-top: 1rem !important;
    }
    h1, h2, h3 { font-size: 1.5rem; }
    .navbar-brand { font-size: 1.2rem; }
    .btn, .form-control { font-size: 1rem; }
    table { font-size: 0.95rem; }
}

/* Force modal to always have white background and dark text */
#shareModal .modal-content {
    background-color: #fff !important;
    color: #212529 !important;
}
#shareModal .form-label,
#shareModal .form-control {
    color: #212529 !important;
    background-color: #fff !important;
}

.viewer-icon {
    position: relative;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #007bff;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    margin-right: 6px;
    font-size: 1rem;
    transition: box-shadow 0.2s;
}
.viewer-icon:hover,
.viewer-icon:focus {
    box-shadow: 0 0 0 4px #007bff33;
}
.viewer-popup {
    display: none;
    position: absolute;
    left: 110%;
    top: 50%;
    transform: translateY(-50%);
    background: #222;
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 10;
    font-size: 0.95rem;
    box-shadow: 0 2px 8px #0002;
    opacity: 0;
    transition: opacity 0.2s;
}
.viewer-icon:hover .viewer-popup,
.viewer-icon:focus .viewer-popup {
    display: block;
    opacity: 1;
}

.viewer-icons {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 3;
    display: flex;
    gap: 2px;
}

.secret-btn {
    position: fixed;
    right: 24px;
    bottom: 24px;
    background: #222;
    color: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    /* box-shadow: 0 2px 8px #0003; */
    z-index: 1000;
    text-decoration: none;
}
.secret-btn:hover {
    background: #007bff;
    color: #fff;
}

/* Light mode support */
body.light-mode .secret-btn {
    background: #fff;
    color: #222;
    /*box-shadow: 0 2px 8px #ccc; */
}

.emoji-btn {
    font-size: 2rem;
    background: none;
    border: none;
    cursor: pointer;
    margin: 0 8px;
    transition: transform 0.1s;
}
.emoji-btn:active {
    transform: scale(1.2);
}
.reaction-emoji {
    position: absolute;
    left: 50%;
    top: 40%;
    font-size: 4rem;
    pointer-events: none;
    animation: emoji-pop 1s ease-out forwards;
}
@keyframes emoji-pop {
    0% { opacity: 1; transform: translate(-50%, 0) scale(1.2);}
    80% { opacity: 1; transform: translate(-50%, -60px) scale(1);}
    100% { opacity: 0; transform: translate(-50%, -80px) scale(0.8);}
}

.btn-edit-movie {
    background: #222 !important;
    color: #fff !important;
    border: none !important;
}
.btn-edit-movie:hover {
    background: #007bff !important;
    color: #fff !important;
}

.sync-notice {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(40,40,40,0.85);
    color: #fff;
    padding: 4px 16px;
    border-radius: 16px;
    font-size: 0.95rem;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.85;
    animation: fadeSyncNotice 1.2s;
}
@keyframes fadeSyncNotice {
    0% { opacity: 0; transform: translateX(-50%) translateY(20px);}
    10% { opacity: 0.85; transform: translateX(-50%) translateY(0);}
    90% { opacity: 0.85; }
    100% { opacity: 0; }
}

#themeToggle.btn-outline-dark,
#themeToggle.btn-outline-light {
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
}

#chatBox div {
    color: #222;
}
body.dark-mode #chatBox div {
    color: #fff;
}
body.dark-mode #chatBox div[style*="background:#e3f2fd"] {
    background: #222 !important;
    color: #fff !important;
}
body.dark-mode #chatBox div[style*="background:#d1e7dd"] {
    background: #333 !important;
    color: #fff !important;
}

.list-group-item {
  background-color: #23272b !important;
  color: #f8f9fa !important;
  border: none !important;
}
.text-muted {
  color: #b0b3b8 !important;
}
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.form-check-input.position-absolute {
  background: #fff !important;
  border: 2px solid #888 !important;
  width: 1.5em !important;
  height: 1.5em !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 2;
  appearance: auto !important; /* ensures default browser tick is shown */
}

/* Show dropdown on hover for desktop */
@media (min-width: 992px) {
  .navbar-nav .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
  }
  .navbar-nav .dropdown .dropdown-toggle::after {
    display: none;
  }
}

@media (max-width: 991px) {
  #navbarContent .navbar-nav {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 0.5rem;
  }
  #navbarContent .nav-item {
    flex: 0 0 48%;
    max-width: 48%;
    margin-bottom: 0.5rem;
  }
  #navbarContent .dropdown-menu {
    position: static !important;
    width: 100%;
    box-shadow: none;
  }
}
/* Smooth dropdown animation for navbar */
.navbar-nav .dropdown-menu {
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity 0.25s, transform 0.25s;
    display: block;
    pointer-events: none;
}

.navbar-nav .dropdown.show .dropdown-menu,
.navbar-nav .dropdown:hover .dropdown-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.live-cursor {
    position: absolute;
    pointer-events: none;
    z-index: 10;
    opacity: 0.7; /* More transparent */
    transition: left 0.1s, top 0.1s;
}
.live-cursor .avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
    background: #eee;
    border: 2px solid #fff;
    opacity: 0.7; /* More transparent */
}
.live-cursor .name {
    font-size: 0.9em;
    background: rgba(0,0,0,0.5); /* More transparent */
    color: #fff;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 2px;
    opacity: 0.7;
}
#editor {
    position: relative;
}
#collaborators .collab-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin-right: 6px;
    border: 2px solid #2a7ae2;
    vertical-align: middle;
}
.live-caret {
    position: absolute;
    width: 2px;
    height: 22px;
    background: var(--caret-color, #2a7ae2);
    opacity: 0.8;
    z-index: 20;
    pointer-events: none;
    border-radius: 1px;
    transition: left 0.1s, top 0.1s;
}
.live-caret-label {
    position: absolute;
    left: 6px;
    top: -18px;
    font-size: 0.85em;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 2px 8px;
    border-radius: 12px;
    opacity: 0.8;
    white-space: nowrap;
    pointer-events: none;
}
.live-caret-highlight {
    position: absolute;
    background: var(--caret-color, #2a7ae2);
    opacity: 0.25;
    border-radius: 2px;
    z-index: 9;
    pointer-events: none;
}
.ql-editor table {
    border-collapse: separate !important;
    border-spacing: 0;
    background: #222 !important;
    border: 2px solid #2a7ae2 !important;
    box-shadow: 0 0 8px #2a7ae2;
}
.ql-editor th, .ql-editor td {
    border: 1px solid #444 !important;
    background: #282c34 !important;
    color: #e0e0e0 !important;
    padding: 8px;
}
.ql-editor th {
    background: #2a7ae2 !important;
    color: #fff !important;
}

.comment-highlight {
    background: #ffe066;
    cursor: pointer;
    border-radius: 3px;
    transition: background 0.2s;
    opacity: 0.6;
}
.comment-highlight:hover {
    background: #ffd43b;
}

.comment-sidebar-highlight {
    background: #ffe066;
    border-radius: 4px;
    box-shadow: 0 0 0 2px #ffd43b;
    transition: background 0.2s;
}

.modal {
  display: block; /* Hidden by default, shown via JS */
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  background: rgba(0,0,0,0.6);
}
.modal[style*="display: none"] {
  display: none !important;
}
.modal-dialog {
  margin: 5vh auto;
}
.btn-close-white {
  filter: invert(1);
}
.clip-type-btn.active {
  background: linear-gradient(90deg, #2a7ae2 60%, #e91e63 100%);
  color: #fff !important;
  border: none;
  box-shadow: 0 2px 8px rgba(42,122,226,0.15);
}
.clip-type-btn .type-plus { margin-left: 6px; font-weight: bold; color: #fff; }
.clip-type-btn.active .type-plus { display: none; }
.clip-type-btn.active .type-check { display: inline; margin-left: 6px; color: #fff; font-weight: bold; }
#progressBar {
  transition: width 0.7s cubic-bezier(.4,2,.3,1);
}
/* Dark mode: light text on dark background */
body.dark-mode .table, 
body.dark-mode .table th, 
body.dark-mode .table td {
    color: #23263a !important;
    background-color: #ffffff !important;
}

/* Light mode: dark text on light background */
body.light-mode .table, 
body.light-mode .table th, 
body.light-mode .table td {
    color: #23263a !important;
    background-color: #fff !important;
}
#admin-json-table, #admin-json-table th, #admin-json-table td {
    background: #fff !important;
    color: #222 !important;
}
.quill-editor img.selected-image {
    border: 2px solid #2a7ae2;
    box-shadow: 0 0 8px #2a7ae2;
}
img.selected-image {
    border: 2px solid #2a7ae2 !important;
    box-shadow: 0 0 8px #2a7ae2;
}
#gameChatBox, #gameChatBox div, #gameChatBox b {
  color: #000 !important;
}
#word-pool-table td {
  color: #000 !important;
}
body.dark-mode #word-pool-table th {
  color: #fff !important;
  background: #23263a !important;
}
body.light-mode #word-pool-table th {
  color: #23263a !important;
  background: #fff !important;
}
.table, .table td, #servers-list, #servers-list td, #servers-list th {
  color: #000 !important;
}

.table a:hover, #servers-list a:hover {
  color: #000 !important;
}