/* ============================================================
   CSS Custom Properties (Design Tokens)
   ============================================================ */

:root, .light {
  /* Existing color tokens */
  --bg: #f0f2f5;
  --card-bg: #ffffff;
  --sidebar-bg: #001529;
  --sidebar-text: #ffffffcc;
  --sidebar-active: #1890ff;
  --text: #333333;
  --label: #666666;
  --border: #d9d9d9;
  --input-bg: #ffffff;
  --primary: #1890ff;
  --table-header: #fafafa;
  --table-border: #f0f0f0;
  --muted: #999999;

  /* Sidebar layout */
  --sidebar-width: 220px;
  --sidebar-collapsed-width: 56px;

  /* KPI trend indicators */
  --kpi-trend-up: #52c41a;
  --kpi-trend-down: #f5222d;

  /* Card styles */
  --card-radius: 8px;
  --card-shadow: 0 1px 4px rgba(0, 0, 0, .08);

  /* Toast backgrounds */
  --toast-success-bg: #f6ffed;
  --toast-error-bg: #fff2f0;
}

.dark {
  /* Existing color tokens */
  --bg: #141414;
  --card-bg: #1f1f1f;
  --sidebar-bg: #0d0d0d;
  --sidebar-text: #ffffffaa;
  --sidebar-active: #177ddc;
  --text: #e0e0e0;
  --label: #aaaaaa;
  --border: #434343;
  --input-bg: #2a2a2a;
  --primary: #177ddc;
  --table-header: #2a2a2a;
  --table-border: #303030;
  --muted: #666666;

  /* KPI trend indicators (dark-adjusted) */
  --kpi-trend-up: #49aa19;
  --kpi-trend-down: #d32029;

  /* Card / shadow (dark-adjusted) */
  --card-shadow: 0 1px 4px rgba(0, 0, 0, .4);

  /* Toast backgrounds (dark-adjusted) */
  --toast-success-bg: #162312;
  --toast-error-bg: #2a1215;
}

/* ============================================================
   Base Reset
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

/* ============================================================
   Layout: Sidebar + Main Content
   ============================================================ */

#app-layout {
  display: flex;
  min-height: 100vh;
}

/* Sidebar */
#sidebar {
  width: var(--sidebar-width);
  min-height: 100vh;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: width 0.2s ease;
  overflow: hidden;
}

#sidebar[data-collapsed="true"] {
  width: var(--sidebar-collapsed-width);
}

/* Main content area */
#main-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* ============================================================
   Card Styles
   ============================================================ */

.card {
  background: var(--card-bg);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: 16px 20px;
}

/* ============================================================
   Keyboard Focus Indicators (Accessibility)
   ============================================================ */

/* Visible focus ring for all interactive elements */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="tab"]:focus-visible,
[role="option"]:focus-visible,
.nav-item:focus-visible,
.sidebar-nav-item:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Remove default outline only when :focus-visible is supported */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
.btn-primary:focus:not(:focus-visible),
.btn-cancel:focus:not(:focus-visible),
.btn-danger:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* ============================================================
   Responsive Breakpoints
   ============================================================ */

/* At >=1024px: no horizontal scroll, layout stays side-by-side */
@media (min-width: 1024px) {
  #main-content {
    overflow-x: hidden;
  }
}

/* At <1280px: KPI cards wrap */
@media (max-width: 1279px) {
  #kpi-row {
    flex-wrap: wrap;
  }

  #kpi-row .kpi-card {
    flex: 1 1 calc(50% - 8px);
    min-width: 160px;
  }

  /* Donut charts stack vertically */
  #donut-row {
    flex-direction: column;
  }

  #donut-row > * {
    min-width: unset;
    width: 100%;
  }
}

/* ============================================================
   Sidebar Internal Styles
   ============================================================ */

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
  overflow: hidden;
}

.logo-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.logo-text {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.2s;
}

.collapse-btn {
  background: none;
  border: none;
  color: var(--sidebar-text);
  cursor: pointer;
  font-size: 18px;
  padding: 2px 4px;
  line-height: 1;
  flex-shrink: 0;
  border-radius: 4px;
  transition: background 0.15s;
}

.collapse-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.sidebar-section {
  padding: 12px 0 4px;
  overflow: hidden;
}

.section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
  padding: 0 14px 6px;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 0.2s;
}

#sidebar[data-collapsed="true"] .section-label,
#sidebar[data-collapsed="true"] .logo-text,
#sidebar[data-collapsed="true"] .nav-text {
  opacity: 0;
  pointer-events: none;
}

#sidebar[data-collapsed="true"] .sidebar-header {
  justify-content: center;
}

#sidebar[data-collapsed="true"] .collapse-btn {
  margin-left: 0;
}

.sidebar-bottom {
  margin-top: auto;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}

.sidebar-bottom button {
  background: none;
  border: none;
  color: var(--sidebar-text);
  cursor: pointer;
  padding: 8px 14px;
  text-align: left;
  font-size: 13px;
  border-radius: 4px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s;
}

.sidebar-bottom button:hover {
  background: rgba(255, 255, 255, 0.08);
}

#nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

#nav-links li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  color: var(--sidebar-text);
  font-size: 13px;
  border-radius: 4px;
  margin: 1px 6px;
  white-space: nowrap;
  overflow: hidden;
  transition: background 0.15s, color 0.15s;
}

#nav-links li:hover {
  background: rgba(255, 255, 255, 0.08);
}

#nav-links li.active {
  background: var(--sidebar-active);
  color: #fff;
}

.nav-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.nav-text {
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.2s;
}

#game-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

#game-list li {
  padding: 7px 14px;
  cursor: pointer;
  color: var(--sidebar-text);
  font-size: 13px;
  border-radius: 4px;
  margin: 1px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.15s, color 0.15s;
}

#game-list li:hover {
  background: rgba(255, 255, 255, 0.08);
}

#game-list li.active {
  background: var(--sidebar-active);
  color: #fff;
}

/* ============================================================
   KPI Cards
   ============================================================ */

.kpi-card {
  background: var(--card-bg);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: 16px 20px;
  flex: 1;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kpi-label {
  font-size: 12px;
  color: var(--label);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.kpi-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  margin-top: 2px;
}

.kpi-trend[data-trend="up"] {
  color: var(--kpi-trend-up);
}

.kpi-trend[data-trend="down"] {
  color: var(--kpi-trend-down);
}

.kpi-trend[data-trend="neutral"] {
  color: var(--muted);
}

.trend-icon {
  font-size: 10px;
}

.trend-pct {
  font-size: 12px;
}

/* ============================================================
   Mini KPI Cards (Player view)
   ============================================================ */

.mini-kpi-card {
  background: var(--card-bg);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: 10px 14px;
  flex: 1;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mini-kpi-label {
  font-size: 11px;
  color: var(--label);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-kpi-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

/* ============================================================
   Modal Overlay & Modal
   ============================================================ */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.modal-overlay.open {
  display: flex;
}

.modal {
  background: var(--card-bg);
  border-radius: var(--card-radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  padding: 24px 28px;
  min-width: 320px;
  max-width: 480px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.modal h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.modal .actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-row label {
  font-size: 13px;
  color: var(--label);
}

.form-row input {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--input-bg);
  color: var(--text);
  font-size: 13px;
}

.game-check-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
}

.game-check-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

/* ============================================================
   Buttons
   ============================================================ */

.btn-primary {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 7px 16px;
  font-size: 13px;
  cursor: pointer;
  transition: opacity 0.15s;
}

.btn-primary:hover {
  opacity: 0.85;
  background: var(--primary) !important;
}

.btn-sm {
  padding: 3px 10px !important;
  font-size: 12px;
  margin-right: 4px;
}

.btn-cancel {
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 7px 16px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-cancel:hover {
  background: var(--bg);
}

.btn-danger {
  background: var(--kpi-trend-down);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 7px 16px;
  font-size: 13px;
  cursor: pointer;
  transition: opacity 0.15s;
}

.btn-danger:hover {
  opacity: 0.85;
  background: var(--kpi-trend-down) !important;
}

/* ============================================================
   Nested Table (Player game data)
   ============================================================ */

.nested-table {
  border-collapse: collapse;
  font-size: 12px;
  width: 100%;
}

.nested-table td {
  padding: 3px 8px;
  border: 1px solid var(--table-border);
  vertical-align: top;
  word-break: break-all;
}

.nested-table td:first-child {
  color: var(--label);
  white-space: nowrap;
  font-weight: 500;
  width: 40%;
}

/* ============================================================
   General Table Styles
   ============================================================ */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

table th,
table td {
  padding: 8px 12px;
  border: 1px solid var(--table-border);
  text-align: left;
}

table th {
  background: var(--table-header);
  font-weight: 600;
  color: var(--label);
}

table tr:hover td {
  background: rgba(24, 144, 255, 0.04);
}

table tr:hover td button {
  background: revert;
}

table tr:hover td .btn-primary {
  background: var(--primary) !important;
  color: #fff;
}

table tr:hover td .btn-danger {
  background: var(--kpi-trend-down) !important;
  color: #fff;
}

/* ============================================================
   Misc Utility
   ============================================================ */

.card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
}

.msg {
  text-align: center;
  color: var(--muted);
  padding: 32px 0;
  font-size: 13px;
}

input[type="text"],
input[type="password"],
input[type="date"],
select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--input-bg);
  color: var(--text);
  font-size: 13px;
}

button {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--card-bg);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  outline: none;
}

button:hover {
  background: var(--bg);
}

button:active {
  opacity: 0.75;
}

.btn-primary:active,
.btn-danger:active {
  opacity: 0.7;
}

.btn-cancel:active {
  background: var(--border);
}