/* -------------------- GLOBAL RESET -------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* -------------------- COLOR PALETTE (GitHub Theme) -------------------- */
:root {
  /* Light Mode */
  --bg: #ffffff;
  --text: #24292f;
  --link: #0969da;
  --primary: #0969da;
  /* For compatibility with existing HTML classes if any */
  --border: #d0d7de;
  --card-bg: #ffffff;
  --sidebar-bg: #f6f8fa;
  --header-bg: #24292f;
  --header-text: #ffffff;
  --btn-bg: #2da44e;
  --btn-hover: #2c974b;
  --btn-text: #ffffff;
  --code-bg: #f6f8fa;

  /* Dark Mode */
  --dark-bg: #0d1117;
  --dark-text: #c9d1d9;
  --dark-link: #58a6ff;
  --dark-border: #30363d;
  --dark-card-bg: #0d1117;
  /* Often transparent or same as bg in GitHub */
  --dark-sidebar-bg: #161b22;
  /* Slightly lighter for contrast */
  --dark-header-bg: #161b22;
  --dark-btn-bg: #238636;
  --dark-btn-hover: #2ea043;
  --dark-code-bg: #161b22;
}

/* -------------------- BASE STYLES -------------------- */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.5;
  font-size: 14px;
  transition: background 0.3s, color 0.3s;
}

body.dark {
  background-color: var(--dark-bg);
  color: var(--dark-text);
}

/* -------------------- HEADER -------------------- */
header {
  background-color: var(--header-bg);
  color: var(--header-text);
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* To separate content and toggle */
  border-bottom: 1px solid var(--border);
}

body.dark header {
  background-color: var(--dark-header-bg);
  border-bottom-color: var(--dark-border);
}

.header-content {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  text-align: left;
  /* Align left like GitHub profile */
}

header h1 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 4px;
  color: inherit;
}

header .highlight {
  color: inherit;
  font-weight: 600;
}

header h3 {
  font-size: 16px;
  font-weight: 400;
  color: #8b949e;
  /* Muted text */
  margin-top: 0;
}

.views {
  position: absolute;
  top: 10px;
  right: 60px;
  /* Space for theme toggle */
}

/* -------------------- THEME TOGGLE -------------------- */
#theme-toggle {
  position: absolute;
  top: 0;
  right: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 16px;
  cursor: pointer;
  color: white;
  transition: 0.2s;
}

#theme-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* -------------------- LAYOUT -------------------- */
.main-container {
  display: flex;
  flex-direction: row-reverse;
  /* Put main content on left, sidebar on right? Github is Sidebar Left. Let's stick to HTML logical order or Flex to swap.
                                  Actually, usually Sidebar is info (left), Main is content (right).
                                  The HTML has: Sidebar then Main. So flex-direction: row is correct. */
  flex-direction: row;
  gap: 24px;
  max-width: 1280px;
  margin: 24px auto;
  padding: 0 24px;
  align-items: flex-start;
}

/* Sidebar (Left in HTML) */
.side-container {
  flex: 0 0 296px;
  /* GitHub sidebar width approx */
  font-size: 14px;
}

/* Main Content (Right in HTML) */
.container {
  flex: 1;
  min-width: 0;
  /* Prevent flex overflow */
}

@media (max-width: 768px) {
  .main-container {
    flex-direction: column;
  }

  .side-container,
  .container {
    width: 100%;
    flex: none;
  }
}

/* -------------------- SECTIONS & CARDS -------------------- */
.section {
  margin-bottom: 16px;
  /* Not making everything a card, but maybe some parts.
     GitHub profiles are mostly clean with dividers. */
  border-bottom: 1px solid var(--border);
  padding-bottom: 16px;
}

body.dark .section {
  border-bottom-color: var(--dark-border);
}

.section:last-child {
  border-bottom: none;
}

/* Remove default heavy borders/shadows from previous theme */
.side-container,
.container {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* -------------------- TYPOGRAPHY -------------------- */
h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text);
}

body.dark h3 {
  color: var(--dark-text);
}

/* Center tags in HTML were common, but we should align left for GitHub style */
center h3 {
  text-align: left;
}

center {
  text-align: left;
  display: block;
  /* Override center tag behavior */
}

p {
  margin-bottom: 10px;
}

a {
  color: var(--link);
  text-decoration: none;
  font-weight: 400;
}

a:hover {
  text-decoration: underline;
}

body.dark a {
  color: var(--dark-link);
}

/* -------------------- ELEMENTS -------------------- */
/* Buttons */
.btn {
  display: inline-block;
  padding: 5px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid rgba(27, 31, 35, 0.15);
  border-radius: 6px;
  background-color: var(--btn-bg);
  color: var(--btn-text);
  transition: .2s cubic-bezier(.3, 0, .5, 1);
  text-decoration: none !important;
  /* Override hover underline */
}

.btn:hover {
  background-color: var(--btn-hover);
  border-color: rgba(27, 31, 35, 0.15);
}

body.dark .btn {
  background-color: var(--dark-btn-bg);
  border-color: rgba(240, 246, 252, 0.1);
}

body.dark .btn:hover {
  background-color: var(--dark-btn-hover);
}

/* Exams List */
.exams {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: none;
  text-align: left;
}

.exams li {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

body.dark .exams li {
  border-bottom-color: var(--dark-border);
}

/* Skills Table (Markdown style) */
.skills-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 14px;
}

.skills-table th,
.skills-table td {
  padding: 6px 13px;
  border: 1px solid var(--border);
}

body.dark .skills-table th,
body.dark .skills-table td {
  border-color: var(--dark-border);
}

.skills-table th {
  font-weight: 600;
  background-color: var(--sidebar-bg);
  /* Use subtle gray */
}

body.dark .skills-table th {
  background-color: var(--dark-sidebar-bg);
}

.skills-table tr:nth-child(2n) {
  background-color: var(--sidebar-bg);
}

body.dark .skills-table tr:nth-child(2n) {
  background-color: var(--dark-sidebar-bg);
}

/* Icons Grid */
.icons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  /* Left align */
}

.icons img {
  height: 32px;
  /* Standard badge height */
  width: auto;
  transition: transform 0.2s;
  border-radius: 4px;
}

.icons img:hover {
  transform: scale(1.05);
}

/* Skill Sections */
.skill-section {
  margin-bottom: 24px;
}

.skill-section h3 {
  border-bottom: none;
  margin-bottom: 8px;
}

/* -------------------- FOOTER -------------------- */
footer {
  margin-top: 40px;
  padding: 40px 0;
  text-align: center;
  border-top: 1px solid var(--border);
  color: #57606a;
  background: transparent;
  font-size: 12px;
}

body.dark footer {
  border-top-color: var(--dark-border);
  color: #8b949e;
}

/* -------------------- REPO CARDS (Grid) -------------------- */
.repo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.repo-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  background-color: var(--card-bg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

body.dark .repo-card {
  border-color: var(--dark-border);
  background-color: var(--dark-card-bg);
}

.repo-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 14px;
}

.repo-icon {
  margin-right: 8px;
  fill: #57606a;
}

body.dark .repo-icon {
  fill: #8b949e;
}

.repo-desc {
  font-size: 12px;
  color: #57606a;
  margin-bottom: 16px;
  flex-grow: 1;
}

body.dark .repo-desc {
  color: #8b949e;
}

.repo-meta {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #57606a;
}

body.dark .repo-meta {
  color: #8b949e;
}

.lang-circle {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(27, 31, 35, 0.1);
  display: inline-block;
  margin-right: 4px;
}

.lang-java {
  background-color: #b07219;
}

.lang-cpp {
  background-color: #f34b7d;
}

.lang-python {
  background-color: #3572A5;
}

.lang-other {
  background-color: #ededed;
}