/*
  Futuristic ProBot‑style stylesheet for KM Coin

  This file provides a sleek dark theme with neon accents inspired by
  the ProBot dashboard.  The layout comprises a fixed top navigation
  bar, a vertical sidebar for navigation and a flexible content area.
  Reusable utility classes are defined for spacing and card styling.
*/

/* Root variables for easy theming */
:root {
  /* Base colours for the dark futuristic theme.  Updated to a cooler
     cyan/blue palette inspired by modern 2025 UIs. */
  --color-bg: #071019;
  --color-card: rgba(255, 255, 255, 0.04);
  --color-text: #dfeaff;
  --color-muted: #7a8fa8;
  --color-accent-start: #007aff; /* blue gradient start */
  --color-accent-end: #00d4ff;  /* cyan gradient end */
  --color-accent: #00bfff;      /* primary accent color */
  --radius: 14px;
  /* Deeper 3D shadow for cards and panels */
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 0 12px rgba(0, 191, 255, 0.15);
  --header-height: 64px;
  --sidebar-width: 250px;
  --serverlist-width: 70px;
}

/* Base styles */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: 'Segoe UI', Tahoma, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  color: #ffffff;
}

/* Utility classes */
.no-underline {
  text-decoration: none;
}
.mt-half {
  margin-top: 0.5rem;
}
.mb-2 {
  margin-bottom: 2rem;
}
.mt-1 {
  margin-top: 1rem;
}
.max-w-600 {
  max-width: 600px;
}

/* Top navigation bar */
.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Semi‑transparent gradient with subtle blur and neon highlight */
  background: linear-gradient(180deg, rgba(7,16,25,0.9) 0%, rgba(7,16,25,0.7) 100%);
  backdrop-filter: blur(14px);
  box-shadow: 0 2px 8px rgba(0, 191, 255, 0.25), 0 0 6px rgba(0, 191, 255, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 100;
}
.top-nav .nav-content {
  width: 100%;
  max-width: 1200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
}
.top-nav .logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.top-nav .logo img {
  width: 32px;
  height: 32px;
}
.top-nav .logo span {
  font-size: 1.2rem;
  font-weight: 700;
  background: linear-gradient(45deg, var(--color-accent-start), var(--color-accent-end));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.top-nav .top-links {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-size: 0.85rem;
}
.top-nav .top-links a {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--color-text);
}
.top-nav .top-links span.flag {
  font-size: 1.1rem;
}

/* Main layout */
.main-layout {
  display: flex;
  margin-top: var(--header-height);
  min-height: calc(100vh - var(--header-height));
  /* Leave space on the left for the server list */
  margin-left: var(--serverlist-width);
}

/* Sidebar */
.sidebar {
  width: var(--sidebar-width);
  background: linear-gradient(to bottom, #0b1230, #0d1540);
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.05);
}
.sidebar .profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.5rem;
}
.sidebar .profile img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin-bottom: 0.5rem;
}
.sidebar .profile span {
  font-weight: 600;
  margin-bottom: 0.2rem;
}
.sidebar .profile p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-muted);
}
.sidebar .nav-section {
  width: 100%;
  margin-bottom: 1.2rem;
}
.sidebar .nav-section-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
  color: var(--color-muted);
  letter-spacing: 0.5px;
}

/* Optional icon next to nav-section titles (e.g., Personal) */
.nav-section-title .nav-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.9rem;
  height: 0.9rem;
  margin-right: 0.4rem;
}
.nav-section-title .nav-section-icon svg {
  width: 100%;
  height: 100%;
  fill: var(--color-muted);
}
.sidebar .nav-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.8rem;
  border-radius: var(--radius);
  margin-bottom: 0.3rem;
  color: var(--color-text);
  transition: background 0.2s ease, color 0.2s ease;
}
.sidebar .nav-item:hover {
  background: rgba(255, 255, 255, 0.08);
}
.sidebar .nav-item.active {
  background: linear-gradient(45deg, var(--color-accent-start), var(--color-accent-end));
  color: #fff;
}

/* Content area */
.content {
  flex: 1;
  padding: 2rem;
  overflow-x: hidden;
}

/* Stats cards */
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}
.stat-card {
  flex: 1 1 calc(25% - 1rem);
  min-width: 160px;
  background: var(--color-card);
  border-radius: var(--radius);
  padding: 1.2rem 1rem;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.stat-card .stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.6rem;
  font-size: 1.2rem;
  font-weight: bold;
  color: #0b1230;
}
.stat-card .stat-label {
  font-size: 0.75rem;
  color: var(--color-muted);
  margin-bottom: 0.2rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.stat-card .stat-value {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--color-text);
}
.credit-icon {
  background: linear-gradient(45deg, #00baff, #0095ff);
}
.level-icon {
  background: linear-gradient(45deg, #ffa000, #ff6f00);
}
.rank-icon {
  background: linear-gradient(45deg, #46d362, #00aa64);
}
.reputation-icon {
  background: linear-gradient(45deg, #9c27b0, #6a0080);
}

/* Cards */
.card {
  background: var(--color-card);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  margin-bottom: 1.5rem;
}
.card h2 {
  margin-top: 0;
  margin-bottom: 0.8rem;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-accent);
}

/* Profile overview card adjustments */
.profile-overview {
  max-width: 600px;
}
.avatar-large {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1rem;
  border: 2px solid var(--color-accent);
}
.wallpaper-preview {
  width: 100%;
  height: 150px;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius);
  margin-top: 0.5rem;
}

/* Shop and item cards */
.shop-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.shop-card {
  background: var(--color-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
  width: 220px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.shop-card img.logo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-bottom: 0.5rem;
  object-fit: cover;
}
.shop-card .shop-name {
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.shop-card .owner {
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-bottom: 0.4rem;
}
.shop-card .stats {
  display: flex;
  gap: 0.5rem;
  font-size: 0.8rem;
  margin-top: 0.4rem;
}

/* ---------------------------------------------------------------------------
   Server modules page

   The server dashboard lists available bot modules with toggle switches and
   quick links for configuration.  These utility classes define the grid
   layout, card styling and toggle appearance.
*/

/* Grid for modules (plugins) */
.plugin-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Card representing a single module */
.plugin-card {
  background: var(--color-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
  width: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Header area of a plugin card with name and toggle */
.plugin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.plugin-name {
  font-weight: 600;
  color: var(--color-text);
}

.plugin-desc {
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-bottom: 0.8rem;
}

/* Simple toggle switch used for module enable/disable */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.15);
  transition: 0.2s;
  border-radius: 20px;
}

.switch .slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: var(--color-accent);
  transition: 0.2s;
  border-radius: 50%;
}

.switch input:checked + .slider {
  background-color: var(--color-accent);
}

.switch input:checked + .slider:before {
  transform: translateX(20px);
}

/* Search bar styling */
.search-bar {
  margin-bottom: 1rem;
}
.input-search {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  border: none;
  background: rgba(255, 255, 255, 0.07);
  color: var(--color-text);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
}
.input-search::placeholder {
  color: var(--color-muted);
}

/* ---------------------------------------------------------------------------
   Server nav (used on the server features page)
*/
.server-nav {
  width: var(--sidebar-width);
  background: var(--color-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
  margin-right: 1rem;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--header-height) - 2rem);
  overflow-y: auto;
}

.server-nav .nav-section-title {
  font-size: 0.75rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 0.5rem;
}

.module-nav-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--color-text);
  border-radius: var(--radius);
  transition: background 0.2s ease;
}

.module-nav-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.module-nav-name {
  flex: 1;
}
.create-shop-card {
  background: var(--color-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 220px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: var(--color-accent);
  cursor: pointer;
  transition: background 0.2s ease;
}
.create-shop-card:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Label for equipped wallpapers */
.equipped-label {
  color: var(--color-accent);
  font-weight: bold;
  margin-top: 0.5rem;
}

/* Item grid */
.item-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.item-card {
  background: var(--color-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 220px;
  padding: 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: background 0.2s ease, transform 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.item-card:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}
.item-card img {
  width: 70px;
  height: 70px;
  border-radius: var(--radius);
  object-fit: cover;
  margin-bottom: 0.4rem;
}
.item-card h4 {
  margin: 0.5rem 0 0.3rem;
  font-weight: 600;
}
.item-card p {
  margin: 0.2rem 0;
  font-size: 0.85rem;
  color: var(--color-muted);
}
.item-card .actions {
  display: flex;
  gap: 0.3rem;
  margin-top: 0.5rem;
  width: 100%;
  justify-content: center;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  border: none;
}
.btn.primary {
  background: linear-gradient(45deg, var(--color-accent-start), var(--color-accent-end));
  color: #0b1230;
}
.btn.secondary {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text);
}
.btn.small {
  font-size: 0.8rem;
  padding: 0.4rem 0.8rem;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(92, 104, 255, 0.4);
}

/* Tables (Leaderboards) */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  background: var(--color-card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
th, td {
  padding: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  text-align: left;
  font-size: 0.9rem;
}
th {
  background: rgba(255, 255, 255, 0.08);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.8rem;
}
tr:last-child td {
  border-bottom: none;
}

/* Forms */
form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  width: 100%;
  max-width: 400px;
}
input[type="text"],
input[type="number"],
input[type="password"],
select {
  padding: 0.6rem;
  border-radius: var(--radius);
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text);
  font-size: 1rem;
  outline: none;
  width: 100%;
}
input:focus, select:focus {
  background: rgba(92, 104, 255, 0.2);
}

/* Messages */
.message {
  padding: 0.8rem 1rem;
  border-radius: var(--radius);
  text-align: center;
  margin-top: 1rem;
  font-size: 0.9rem;
}
.message.error {
  background: rgba(255, 0, 86, 0.3);
  color: #ff5570;
}
.message.success {
  background: rgba(46, 211, 97, 0.3);
  color: #2ed361;
}

/* Footer */
.footer {
  padding: 1rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-muted);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Orders page */
.orders-container {
  max-width: 900px;
  margin: 2rem auto;
}
.order-card {
  background: var(--color-card);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow);
}
.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.order-status {
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}
.status-pending {
  background: rgba(255, 193, 7, 0.2);
  color: #ffc107;
}
.status-completed {
  background: rgba(76, 175, 80, 0.2);
  color: #4caf50;
}
.status-cancelled {
  background: rgba(244, 67, 54, 0.2);
  color: #f44336;
}
.order-footer {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--color-muted);
}

/* Centering container */
.center-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Login page container and card */
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--header-height));
  padding: 2rem;
}
.login-card {
  background: var(--color-card);
  border-radius: var(--radius);
  padding: 2rem 2.5rem;
  box-shadow: var(--shadow);
  text-align: center;
  max-width: 400px;
  width: 100%;
}
.login-card h1 {
  margin-top: 0;
}
.login-card p {
  color: var(--color-muted);
  margin-bottom: 1.5rem;
}

/* Profile card */
.profile-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 300px;
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow);
  margin-bottom: 2rem;
}
.profile-card .profile-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(8, 13, 26, 0.6);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 1.5rem;
}
.profile-card .profile-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.profile-card .profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 0.8rem;
  border: 2px solid var(--color-accent);
}
.profile-card .profile-username {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--color-text);
}
.profile-card .profile-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
}
.profile-card .profile-stats .stat {
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
  color: var(--color-muted);
}
.profile-card .profile-stats .stat span:last-child {
  font-weight: 600;
  color: var(--color-text);
}

/* XP bar (profile) */
.xp-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.xp-bar-top {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.15);
}
.xp-bar-fill-top {
  height: 4px;
  background: linear-gradient(45deg, var(--color-accent-start), var(--color-accent-end));
}
.xp-text-top {
  position: absolute;
  top: 8px;
  right: 1rem;
  font-size: 0.7rem;
  color: var(--color-muted);
}

/* Leaderboard avatars and ranks */
.leaderboard-container {
  width: 100%;
  overflow-x: auto;
}
.leaderboard-table {
  width: 100%;
}
.lb-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 0.4rem;
  vertical-align: middle;
}
.rank-gold td {
  color: #ffd700;
}
.rank-silver td {
  color: #c0c0c0;
}
.rank-bronze td {
  color: #cd7f32;
}

/* Wallpaper grid */
.wallpaper-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.wallpaper-card {
  background: var(--color-card);
  padding: 1rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 200px;
  text-align: center;
}
.wallpaper-card img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
}
.wallpaper-card.owned {
  border: 2px solid var(--color-accent);
}

/* Shop page large logo */
.logo-large {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0.5rem;
}

/* Inline stats row */
.stats-inline {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 0.5rem;
  font-size: 0.9rem;
}

/* Action buttons container */
.action-buttons {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* --------------------------------------------------------------------
   Server list styling

   A vertical list of server icons (similar to Discord) displayed on the
   far left of the screen.  Icons are circular and have 3D shadows to
   enhance the futuristic look.  The main layout is shifted to the right
   by the width of this list using --serverlist-width.  Server list
   scrolls independently if there are many servers.
*/
.server-list {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--serverlist-width);
  padding-top: var(--header-height);
  background: linear-gradient(to bottom, #060c1a, #0a1328);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.05);
  z-index: 99;
}

.server-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-card);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.6rem 0;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), 0 0 8px rgba(0, 191, 255, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.server-icon:hover {
  transform: translateY(-3px) scale(1.07);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), 0 0 12px rgba(0, 191, 255, 0.4);
}
.server-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Support SVG icons in the server list (e.g., personal tab).  The
   icons fill the available space and adopt the accent colour. */
.server-icon svg {
  width: 100%;
  height: 100%;
  fill: var(--color-accent);
}