:root {
  /* NG Chess Theme Colors */
  --ng-bg: #0B1220;
  --ng-surface: #121C2F;
  --ng-surface-hover: #1A253D;
  --ng-primary: #1ED3C6;
  --ng-primary-hover: #17B8AD;
  --ng-secondary: #667EEA;
  --ng-secondary-hover: #5568D3;
  --ng-success: #28A745;
  --ng-success-hover: #218838;
  --ng-danger: #DC3545;
  --ng-danger-hover: #C82333;
  --ng-warning: #FFC107;
  --ng-warning-hover: #E0A800;
  --ng-info: #17A2B8;
  --ng-info-hover: #138496;
  --ng-light: #F8F9FA;
  --ng-dark: #343A40;
  --ng-muted: #9AA4BF;
  --ng-text: #E8ECF3;
  --ng-border: #24304A;
  --ng-border-light: #2D3A5C;
  --ng-shadow: rgba(0, 0, 0, 0.2);
  --ng-shadow-light: rgba(0, 0, 0, 0.1);
}

/* Global Styles */
body {
  background-color: var(--ng-bg);
  color: var(--ng-text);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  background-color: transparent;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--ng-text);
  font-weight: 600;
}

.text-primary {
  color: var(--ng-primary) !important;
}

.text-secondary {
  color: var(--ng-secondary) !important;
}

.text-success {
  color: var(--ng-success) !important;
}

.text-danger {
  color: var(--ng-danger) !important;
}

.text-warning {
  color: var(--ng-warning) !important;
}

.text-info {
  color: var(--ng-info) !important;
}

.text-light {
  color: var(--ng-light) !important;
}

.text-dark {
  color: var(--ng-dark) !important;
}

.text-muted {
  color: var(--ng-muted) !important;
}

/* Links */
.homepage-link {
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 22px;
    font-weight: 600;
    padding: 10px 20px;
    text-decoration: none;
}

.tld {
    color: #ccc;
    font-size: 16px;
    font-weight: 300;
}

a {
  color: var(--ng-secondary);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--ng-secondary-hover);
  text-decoration: underline;
}

/* Buttons */
.btn {
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
  border: none;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #5568d3 0%, #653a8b 100%);
}

.btn-secondary {
  background-color: var(--ng-secondary);
  color: white;
}

.btn-secondary:hover {
  background-color: var(--ng-secondary-hover);
  color: white;
}

.btn-success {
  background-color: var(--ng-success);
  color: white;
}

.btn-success:hover {
  background-color: var(--ng-success-hover);
  color: white;
}

.btn-danger {
  background-color: var(--ng-danger);
  color: white;
}

.btn-danger:hover {
  background-color: var(--ng-danger-hover);
  color: white;
}

.btn-warning {
  background-color: var(--ng-warning);
  color: #000;
}

.btn-warning:hover {
  background-color: var(--ng-warning-hover);
  color: #000;
}

.btn-info {
  background-color: var(--ng-info);
  color: white;
}

.btn-info:hover {
  background-color: var(--ng-info-hover);
  color: white;
}

.btn-light {
  background-color: var(--ng-light);
  color: #000;
}

.btn-light:hover {
  background-color: #e2e6ea;
  color: #000;
}

.btn-dark {
  background-color: var(--ng-dark);
  color: white;
}

.btn-dark:hover {
  background-color: #23272b;
  color: white;
}

.btn-outline-primary {
  border-color: var(--ng-primary);
  color: var(--ng-primary);
}

.btn-outline-primary:hover {
  background-color: var(--ng-primary);
  border-color: var(--ng-primary);
  color: #000;
}

/* Cards */
.card {
  background-color: var(--ng-surface);
  border: 1px solid var(--ng-border);
  border-radius: 12px;
  box-shadow: 0 4px 12px var(--ng-shadow);
  transition: all 0.3s ease;
}

.card:hover {
  box-shadow: 0 8px 24px var(--ng-shadow);
  transform: translateY(-2px);
}

.card-header {
  background: linear-gradient(135deg, var(--ng-secondary) 0%, var(--ng-primary) 100%);
  color: white;
  border-bottom: 1px solid var(--ng-border);
  border-radius: 12px 12px 0 0 !important;
  padding: 1.5rem;
}

.card-body {
  color: var(--ng-text);
}

.card-footer {
  background-color: var(--ng-surface-hover);
  border-top: 1px solid var(--ng-border);
  border-radius: 0 0 12px 12px;
}

/* Specific card classes for login/register */
.login-card,
.register-card,
.forgot-password-card,
.reset-password-card {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  border: none;
  border-radius: 10px;
}

.login-header,
.register-header,
.forgot-password-header,
.reset-password-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 10px 10px 0 0 !important;
  padding: 30px;
}

/* Forms */
.form-control {
  background-color: var(--ng-surface-hover);
  border: 1px solid var(--ng-border);
  border-radius: 8px;
  color: var(--ng-text);
  transition: all 0.3s ease;
}

.form-control:focus {
  background-color: var(--ng-surface-hover);
  border-color: var(--ng-primary);
  color: var(--ng-text);
  box-shadow: 0 0 0 0.2rem rgba(30, 211, 198, 0.25);
}

.form-control::placeholder {
  color: var(--ng-muted);
}

.form-label {
  color: var(--ng-text);
  font-weight: 500;
}

.form-check-label {
  color: var(--ng-text);
}

.form-check-input:checked {
  background-color: var(--ng-primary);
  border-color: var(--ng-primary);
}

.form-check-input:focus {
  border-color: var(--ng-primary);
  box-shadow: 0 0 0 0.2rem rgba(30, 211, 198, 0.25);
}

/* Alerts */
.alert {
  border-radius: 8px;
  border: none;
  color: white;
}

.alert-success {
  background-color: var(--ng-success);
}

.alert-danger {
  background-color: var(--ng-danger);
}

.alert-warning {
  background-color: var(--ng-warning);
  color: #000;
}

.alert-info {
  background-color: var(--ng-info);
}

.alert-primary {
  background-color: var(--ng-primary);
  color: #000;
}

.alert-secondary {
  background-color: var(--ng-secondary);
}

/* Badges */
.badge {
  font-weight: 500;
  border-radius: 6px;
}

.badge-primary {
  background-color: var(--ng-primary);
  color: #000;
}

.badge-secondary {
  background-color: var(--ng-secondary);
}

.badge-success {
  background-color: var(--ng-success);
}

.badge-danger {
  background-color: var(--ng-danger);
}

.badge-warning {
  background-color: var(--ng-warning);
  color: #000;
}

.badge-info {
  background-color: var(--ng-info);
}

.badge-light {
  background-color: var(--ng-light);
  color: #000;
}

.badge-dark {
  background-color: var(--ng-dark);
}

/* Navigation */
.navbar {
  background-color: var(--ng-surface) !important;
  border-bottom: 1px solid var(--ng-border);
  box-shadow: 0 2px 8px var(--ng-shadow);
}

.navbar-brand {
  color: var(--ng-light) !important;
  font-weight: 600;
}

.navbar-nav .nav-link {
  color: var(--ng-text) !important;
  transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover {
  color: var(--ng-primary) !important;
}

.navbar-toggler {
  border-color: var(--ng-border);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(232, 236, 243, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Dropdowns */
.dropdown-menu {
  background-color: var(--ng-surface);
  border: 1px solid var(--ng-border);
  border-radius: 8px;
  box-shadow: 0 4px 12px var(--ng-shadow);
}

.dropdown-item {
  color: var(--ng-text);
  transition: all 0.3s ease;
}

.dropdown-item:hover {
  background-color: var(--ng-surface-hover);
  color: var(--ng-primary);
}

/* Modals */
.modal-content {
  background-color: var(--ng-surface);
  border: 1px solid var(--ng-border);
  border-radius: 12px;
  color: var(--ng-text);
}

.modal-header {
  border-bottom: 1px solid var(--ng-border);
  background-color: var(--ng-surface-hover);
  border-radius: 12px 12px 0 0;
}

.modal-title {
  color: var(--ng-text);
}

.modal-footer {
  border-top: 1px solid var(--ng-border);
  background-color: var(--ng-surface-hover);
  border-radius: 0 0 12px 12px;
}

.modal-backdrop {
  background-color: rgba(11, 18, 32, 0.8);
}

/* Tables */
.table,
.table.table-hover,
.card-body .table,
.card-body .table.table-hover {
  color: var(--ng-text) !important;
  background-color: var(--ng-surface) !important;
}

.table thead th,
.table.table-hover thead th,
.card-body .table thead th,
.card-body .table.table-hover thead th {
  border-bottom: 2px solid var(--ng-border);
  color: var(--ng-text) !important;
  font-weight: 600;
  background-color: var(--ng-surface) !important;
}

.table tbody tr,
.table.table-hover tbody tr,
.card-body .table tbody tr,
.card-body .table.table-hover tbody tr {
  border-bottom: 1px solid var(--ng-border-light);
  background-color: var(--ng-surface) !important;
}

.table tbody tr:hover,
.table.table-hover tbody tr:hover,
.card-body .table tbody tr:hover,
.card-body .table.table-hover tbody tr:hover {
  background-color: var(--ng-surface-hover) !important;
}

/* Game Info Table - Force dark theme */
.game-info-table,
.game-info-table thead,
.game-info-table tbody,
.game-info-table tr,
.game-info-table th,
.game-info-table td {
  color: #E8ECF3 !important;
  background-color: #121C2F !important;
  border-color: #2D3A5C !important;
}

.game-info-table tbody tr:hover {
  background-color: #1A253D !important;
}

/* Game Info Table Column Widths */
.game-info-table th:nth-child(1),
.game-info-table td:nth-child(1) {
  width: 10% !important;
  text-align: center !important;
}

.game-info-table th:nth-child(2),
.game-info-table td:nth-child(2) {
  width: 45% !important;
}

.game-info-table th:nth-child(3),
.game-info-table td:nth-child(3) {
  width: 45% !important;
}

/* Ensure Move History table scrolls properly within its container */
#move-list {
  max-height: 400px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 2px !important; /* Add padding to prevent scrollbar from covering content */
}

#move-list .game-info-table {
  margin-bottom: 0 !important;
  height: auto !important;
}

/* Ensure PGN textarea scrolls properly and copy button is visible */
#current-pgn {
  max-height: 120px !important;
  overflow-y: auto !important;
  padding-right: 2px !important; /* Add padding to prevent scrollbar from covering content */
}

#current-pgn + .btn {
  z-index: 10 !important;
}

/* Pagination */
.page-link {
  background-color: var(--ng-surface);
  border-color: var(--ng-border);
  color: var(--ng-text);
  transition: all 0.3s ease;
}

.page-link:hover {
  background-color: var(--ng-surface-hover);
  border-color: var(--ng-primary);
  color: var(--ng-primary);
}

.page-item.active .page-link {
  background-color: var(--ng-primary);
  border-color: var(--ng-primary);
  color: #000;
}

/* Progress Bars */
.progress {
  background-color: var(--ng-surface-hover);
  border-radius: 10px;
}

.progress-bar {
  background: linear-gradient(135deg, var(--ng-primary) 0%, var(--ng-secondary) 100%);
}

/* List Group */
.list-group-item {
  background-color: var(--ng-surface);
  border: 1px solid var(--ng-border);
  color: var(--ng-text);
  transition: all 0.3s ease;
}

.list-group-item:hover {
  background-color: var(--ng-surface-hover);
}

.list-group-item.active {
  background-color: var(--ng-primary);
  border-color: var(--ng-primary);
  color: #000;
}

/* Breadcrumbs */
.breadcrumb {
  background-color: transparent;
}

.breadcrumb-item a {
  color: var(--ng-primary);
}

.breadcrumb-item.active {
  color: var(--ng-text);
}

/* Tooltips */
.tooltip-inner {
  background-color: var(--ng-surface);
  color: var(--ng-text);
  border: 1px solid var(--ng-border);
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: var(--ng-surface);
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--ng-surface);
}

.tooltip.bs-tooltip-left .tooltip-arrow::before {
  border-left-color: var(--ng-surface);
}

.tooltip.bs-tooltip-right .tooltip-arrow::before {
  border-right-color: var(--ng-surface);
}

/* Popovers */
.popover {
  background-color: var(--ng-surface);
  border: 1px solid var(--ng-border);
  color: var(--ng-text);
}

.popover-header {
  background-color: var(--ng-surface-hover);
  border-bottom: 1px solid var(--ng-border);
  color: var(--ng-text);
}

/* Spinners */
.spinner-border {
  border-color: var(--ng-primary);
  border-right-color: transparent;
}

/* Custom Utilities */
.back-link {
  color: var(--ng-text);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 20px;
  transition: color 0.3s ease;
}

.back-link:hover {
  color: var(--ng-primary);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .card {
    margin: 10px;
  }

  .card-header,
  .login-header,
  .register-header {
    padding: 1rem;
  }

  body {
    padding: 10px 0;
  }
}

/* Chess-specific styles */
.chess-board {
  background-color: var(--ng-surface);
  border: 2px solid var(--ng-border);
}

.chess-square {
  transition: background-color 0.3s ease;
}

.chess-square:hover {
  background-color: var(--ng-surface-hover) !important;
}

.content-wrapper {
  flex: 1;
}

.hero-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 60px 0;
  text-align: center;
}

@media (min-width: 768px) {
  .hero-section {
    padding: 100px 0;
  }
}

.feature-card {
  transition: transform 0.2s, box-shadow 0.2s;
  height: 100%;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

footer {
  margin-top: auto;
}

/* Pattern Notification Animation */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

#pattern-notification {
  animation: slideInRight 0.5s ease-out;
  border-left: 4px solid var(--ng-success);
}