/* ============================================================
   polish.css — Professional restrained dark theme
   Unified shell + inner content. One calm accent.
   Loaded last — safe to delete to revert to original.
============================================================ */

/* ===========================================
   Palette
============================================= */
:root {
  --bg: #0d0f14;
  --surface: #14171e;
  --surface-2: #191c24;
  --surface-3: #1e212a;
  --border: #282d38;
  --border-strong: #363b48;
  --text: #dce2ec;
  --text-muted: #959ead;
  --text-faint: #646d7e;
  --accent: #7c9cf5;
  --accent-hover: #94aef8;
  --accent-soft: rgba(124, 156, 245, 0.10);
  --accent-btn: #4e6ed8;
  --accent-btn-hover: #5f7de2;
  --accent-btn-text: #fff;

  /* Resume CSS variables wholesale */
  --resume-text: #dce2ec;
  --resume-heading: #f0f3f8;
  --resume-muted: #959ead;
  --resume-company: #7f8898;
  --resume-date: #646d7e;
  --resume-border: #282d38;
  --resume-accent: #7c9cf5;
  --resume-tag-bg: rgba(255, 255, 255, 0.04);
  --resume-tag-border: rgba(255, 255, 255, 0.08);
  --resume-tag-text: #dce2ec;
  --resume-tag-hover-bg: rgba(124, 156, 245, 0.10);
}

/* ===========================================
   Background — calm, static, subtle
============================================= */
html, body {
  min-height: 100%;
}

body {
  position: relative;
  z-index: 0;
  background: var(--bg);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1100px 700px at 15% 20%, rgba(124, 156, 245, 0.06), transparent 60%),
    radial-gradient(800px 600px at 85% 80%, rgba(124, 156, 245, 0.04), transparent 60%),
    var(--bg);
}

/* ===========================================
   Sidebar — solid neutral surface
============================================= */
.sidebar {
  background: linear-gradient(180deg, #11141b, #0e1117);
  border-right: 1px solid var(--border);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
}

/* ===========================================
   Profile picture — rounded, subtle border
============================================= */
.profile-pic {
  border-radius: 34px;
}

/* ===========================================
   Sidebar text — clean, neutral hierarchy
============================================= */
.sidebar h1 {
  color: #ecf0f7;
  background: none;
  -webkit-text-fill-color: initial;
  background-clip: unset;
}

/* ===========================================
   Card — solid neutral surface
============================================= */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  animation: card-in 0.5s ease-out;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===========================================
   Sidebar details (project info)
============================================= */
.sidebar-details h2 {
  color: var(--accent);
}

/* ===========================================
   Tabs — clean + accent underline
============================================= */
.tabs label {
  position: relative;
  margin: 0 0.25rem;
  transition: color 0.3s ease, background 0.3s ease;
  border-radius: 0;
}

.tabs label:hover {
  color: var(--accent);
  background: rgba(255, 255, 255, 0.04);
}

.tabs label::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: translateX(-50%);
  transition: width 0.3s ease;
}

.tabs label:hover::after {
  width: 40%;
}

#tab-about:checked ~ .tabs label[for="tab-about"]::after,
#tab-projects:checked ~ .tabs label[for="tab-projects"]::after,
#tab-resume:checked ~ .tabs label[for="tab-resume"]::after,
#tab-contact:checked ~ .tabs label[for="tab-contact"]::after {
  width: 60%;
}

#tab-about:checked ~ .tabs label[for="tab-about"],
#tab-projects:checked ~ .tabs label[for="tab-projects"],
#tab-resume:checked ~ .tabs label[for="tab-resume"],
#tab-contact:checked ~ .tabs label[for="tab-contact"] {
  color: var(--accent);
  background: rgba(124, 156, 245, 0.07);
  border-bottom: 2px solid transparent;
}

.tabs label{
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

/* ===========================================
   All sidebar / card links
============================================= */
.sidebar a,
.card a,
a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.25s ease;
}

.sidebar a:hover,
.card a:hover,
a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

/* ===========================================
   Section headings (projects, etc.)
============================================= */
.projecth3,
#folder-title,
#python-title,
#highlights-title,
#archive-highlights-title,
#archive-cancelled-title,
.filter-popup-header h3 {
  color: var(--accent);
}

/* ===========================================
   Folder cards — neutral surface
============================================= */
.folder-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.folder-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(124, 156, 245, 0.12);
  background: var(--surface-2);
}

.folder-card .folder-icon {
  color: var(--accent);
  background: rgba(124, 156, 245, 0.08);
}

.folder-card:hover .folder-icon {
  background: rgba(124, 156, 245, 0.15);
}

/* ===========================================
   Folder back button
============================================= */
.folder-back-btn {
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text);
  transition: all 0.25s ease;
}

.folder-back-btn:hover {
  background: var(--accent-btn);
  border-color: var(--accent-btn);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(78, 110, 216, 0.35);
}

/* ===========================================
   Project cards (grid items)
============================================= */
.project {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.project:not(.featured-project):hover {
  transform: translateY(-6px);
  filter: drop-shadow(0 8px 20px rgba(4, 122, 231, 0.4));
}

/* ===========================================
   Featured project
============================================= */
.featured-project .watch-info h3 {
  color: var(--accent);
}

.featured-project .watch-info span {
  color: var(--accent);
}

.featured-close-btn {
  color: var(--accent);
}

.featured-close-btn:hover {
  color: var(--accent-hover);
  text-shadow: none;
}

/* ===========================================
   Source (video source) nav
============================================= */
.Source label {
  border-bottom: 2px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.Source label:hover {
  color: var(--accent);
}

#scrext:checked ~ .Source label[for="scrext"],
#srcgdrive:checked ~ .Source label[for="srcgdrive"],
#srclocal:checked ~ .Source label[for="srclocal"] {
  border-bottom-color: var(--accent);
  color: var(--accent);
}

/* ===========================================
   Filter inputs & selects
============================================= */
.filter-select,
.filter-input {
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text);
  transition: border-color 0.25s ease, background 0.25s ease;
}

.filter-select:hover,
.filter-input:hover,
.filter-select:focus,
.filter-input:focus {
  border-color: var(--accent);
  background: var(--surface-2);
  outline: none;
}

/* ===========================================
   Filter buttons
============================================= */
.filter-reset,
.filter-btn {
  background: var(--accent-btn);
  border: none;
  color: var(--accent-btn-text);
  transition: all 0.25s ease;
}

.filter-reset:hover,
.filter-btn:hover {
  background: var(--accent-btn-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(78, 110, 216, 0.3);
}

/* ===========================================
   Archive toggle switch
============================================= */
.switch input:checked + span {
  background: var(--accent-btn);
  border-color: var(--accent);
  box-shadow: 0 0 6px rgba(124, 156, 245, 0.4);
}

.switch input:hover + span {
  box-shadow: 0 0 6px rgba(124, 156, 245, 0.3);
}

/* ===========================================
   Python project cards
============================================= */
.python-project-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.python-project-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(124, 156, 245, 0.12);
  background: var(--surface-2);
}

.python-project-title {
  color: var(--text);
}

.python-project-link {
  color: var(--accent);
}

.python-project-link:hover {
  color: var(--accent-hover);
  transform: scale(1.1);
}

.python-project-desc {
  color: var(--text-muted);
}

.python-tag {
  background: rgba(124, 156, 245, 0.10);
  color: var(--accent);
  border: 1px solid rgba(124, 156, 245, 0.20);
}

.python-read-more-btn {
  background: var(--accent-btn);
  border: none;
  color: var(--accent-btn-text);
  transition: all 0.25s ease;
}

.python-read-more-btn:hover {
  background: var(--accent-btn-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(78, 110, 216, 0.3);
}

/* ===========================================
   Python README content
============================================= */
.python-readme-content h2,
.python-readme-content h3,
.python-readme-content h4 {
  color: var(--accent);
}

.python-readme-content code {
  background: #10131a;
  color: var(--accent);
}

.python-readme-content pre {
  background: #0e1117;
  border: 1px solid var(--border);
}

.python-readme-content a {
  color: var(--accent);
}

/* ===========================================
   README modal
============================================= */
.readme-modal-content {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.readme-modal-close {
  color: var(--accent);
}

.readme-modal-close:hover {
  color: var(--accent-hover);
  background: rgba(255, 255, 255, 0.05);
}

.readme-modal-content h2 {
  color: var(--accent);
}

.readme-modal-body h2,
.readme-modal-body h3,
.readme-modal-body h4 {
  color: var(--accent);
}

.readme-modal-body a {
  color: var(--accent);
}

.readme-modal-body a:hover {
  color: var(--accent-hover);
}

.readme-modal-body code {
  background: #10131a;
  color: var(--accent);
}

.readme-modal-body pre {
  background: #0e1117;
  border: 1px solid var(--border);
}

/* ===========================================
   Filter popup
============================================= */
.filter-popup {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.filter-popup-header {
  border-bottom: 1px solid var(--border);
}

.filter-popup-footer {
  border-top: 1px solid var(--border);
  background-color: var(--surface-2);
}

/* ===========================================
   About section
============================================= */
.about-svg:hover {
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(124, 156, 245, 0.20);
}

.svg-preview-title {
  color: var(--accent);
}

.svg-preview-btn:hover {
  background: var(--accent);
  color: #fff;
}

.svg-preview-minimap-viewport {
  border: 2px solid var(--accent);
  background: rgba(124, 156, 245, 0.12);
}

/* ===========================================
   Contact section
============================================= */
.input-field:focus {
  border-bottom-color: var(--accent);
}

.input-field:focus + label,
.input-field:not(:placeholder-shown) + label {
  color: var(--accent);
}

.underline {
  background: var(--accent);
}

.btn {
  background: var(--accent-btn);
  box-shadow: 0 4px 12px rgba(78, 110, 216, 0.25);
}

.btn:hover {
  background: var(--accent-btn-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(78, 110, 216, 0.35);
}

/* ===========================================
   Modals (mode switch, download resume)
============================================= */
.modal-content {
  background-color: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}

.mode-btn {
  background-color: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  transition: all 0.25s ease;
}

.mode-btn:hover {
  background: var(--accent-btn);
  transform: translateY(-3px);
  border-color: var(--accent-btn);
  color: #fff;
}

.download-resume-btn {
  background-color: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  transition: all 0.25s ease;
}

.download-resume-btn:hover {
  background: var(--accent-btn);
  transform: translateY(-3px);
  border-color: var(--accent-btn);
  color: #fff;
}

.resume-layout-card {
  background-color: var(--surface-2);
  border: 2px solid var(--border);
  transition: all 0.25s ease;
}

.resume-layout-option input[type="radio"]:checked + .resume-layout-card {
  background-color: rgba(124, 156, 245, 0.12);
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(124, 156, 245, 0.20);
}

.resume-layout-option:hover .resume-layout-card {
  border-color: var(--accent);
}

/* ===========================================
   Video player accent
============================================= */
.progress-area .progress-bar {
  background: var(--accent);
}

.progress-bar::before {
  background: var(--accent);
}

.options input {
  accent-color: var(--accent);
}

/* ===========================================
   Selection color
============================================= */
::selection {
  background: rgba(124, 156, 245, 0.30);
  color: #fff;
}

/* ===========================================
   Misc — scrollbar thumbs
============================================= */
.tab-content::-webkit-scrollbar-thumb {
  background: var(--border-strong);
}

.tab-content::-webkit-scrollbar-thumb:hover {
  background: #4a5160;
}