/*
static/css/style.css
────────────────────
Clean, high-density, minimalist styling overrides.
Inspired by Linear, GitHub, and Codeforces.
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}

body {
  font-family: var(--font-sans);
  background-color: #ffffff;
  color: #0f172a; /* slate-900 */
  -webkit-font-smoothing: antialiased;
}

.hidden {
  display: none;
}

.kotchy-modal.hidden {
  display: none !important;
}

/* ── Responsive Navigation Helpers ────────────────────────────── */
@media (max-width: 767px) {
  .nav-desktop-only {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .nav-desktop-only {
    display: flex !important;
  }
  .nav-mobile-toggle {
    display: none !important;
  }
  #mobile-nav-menu {
    display: none !important;
  }
}

code, pre, .font-mono {
  font-family: var(--font-mono);
}

::selection {
  background-color: #bae6fd; /* sky-200 */
  color: #0369a1; /* sky-700 */
}

/* ── Minimal Scrollbar ────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1; /* slate-300 */
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8; /* slate-400 */
}

/* ── Spinner for Async Buttons ────────────────────────────────── */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spinner {
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* ── Toast animation ──────────────────────────────────────────── */
@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.toast-enter {
  animation: toastIn 0.15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ── Modal overlay ────────────────────────────────────────────── */
.modal-overlay {
  background-color: rgba(24, 24, 27, 0.4);
}

/* ── Codeforces Rating Styles ─────────────────────────────────── */
.cf-user-unrated { color: #64748b !important; font-weight: 700 !important; }
.cf-user-newbie { color: #808080 !important; font-weight: 700 !important; }
.cf-user-pupil { color: #008000 !important; font-weight: 700 !important; }
.cf-user-specialist { color: #03a89e !important; font-weight: 700 !important; }
.cf-user-expert { color: #0000ff !important; font-weight: 700 !important; }
.cf-user-candidate-master { color: #aa00aa !important; font-weight: 700 !important; }
.cf-user-master { color: #ff8c00 !important; font-weight: 700 !important; }
.cf-user-grandmaster { color: #ff0000 !important; font-weight: 700 !important; }
.cf-user-legendary {
  color: #ff0000 !important;
  font-weight: 700 !important;
  display: inline-block;
}
.cf-user-legendary::first-letter,
.cf-user-legendary .legendary-first-letter {
  color: #000000 !important;
}

/* Hover styling: keep distinct rating color and add underline */
a.cf-user-unrated:hover,
a.cf-user-newbie:hover,
a.cf-user-pupil:hover,
a.cf-user-specialist:hover,
a.cf-user-expert:hover,
a.cf-user-candidate-master:hover,
a.cf-user-master:hover,
a.cf-user-grandmaster:hover,
a.cf-user-legendary:hover,
a:hover .cf-user-unrated,
a:hover .cf-user-newbie,
a:hover .cf-user-pupil,
a:hover .cf-user-specialist,
a:hover .cf-user-expert,
a:hover .cf-user-candidate-master,
a:hover .cf-user-master,
a:hover .cf-user-grandmaster,
a:hover .cf-user-legendary {
  text-decoration: underline !important;
}

a.cf-user-legendary:hover::first-letter,
a:hover .cf-user-legendary::first-letter {
  color: #000000 !important;
}

/* ── Codeforces Avatar Border & Text by Rating ────────────────── */
.cf-avatar.cf-user-unrated { border-color: #cbd5e1; color: #64748b; }
.cf-avatar.cf-user-newbie { border-color: #808080; color: #808080; }
.cf-avatar.cf-user-pupil { border-color: #008000; color: #008000; }
.cf-avatar.cf-user-specialist { border-color: #03a89e; color: #03a89e; }
.cf-avatar.cf-user-expert { border-color: #0000ff; color: #0000ff; }
.cf-avatar.cf-user-candidate-master { border-color: #aa00aa; color: #aa00aa; }
.cf-avatar.cf-user-master { border-color: #ff8c00; color: #ff8c00; }
.cf-avatar.cf-user-grandmaster { border-color: #ff0000; color: #ff0000; }
.cf-avatar.cf-user-legendary { border-color: #ff0000; color: #ff0000; }

.cf-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  border: 1px solid #e2e8f0;
  background-color: #f8fafc;
}

/* ── Task Status Light Hover Effects ─────────────────────────── */
/* Completed: light green hover, subtle green border & glow */
.task-row-completed,
.task-status-completed {
  transition: all 160ms cubic-bezier(0.16, 1, 0.3, 1);
  border-left: 4px solid #10b981 !important;
}
tr.task-row-completed > td:first-child {
  border-left: 4px solid #10b981 !important;
}
.task-row-completed:hover,
.task-status-completed:hover {
  background-color: #f0fdf4 !important; /* emerald-50 light green */
  border-left-color: #059669 !important;
  box-shadow: 0 1px 4px 0 rgba(16, 185, 129, 0.15);
}
tr.task-row-completed:hover > td {
  background-color: #f0fdf4 !important;
}

/* In Progress: light yellow/amber hover, subtle amber border & glow */
.task-row-progress,
.task-status-progress,
.task-status-in_progress {
  transition: all 160ms cubic-bezier(0.16, 1, 0.3, 1);
  border-left: 4px solid #f59e0b !important;
}
tr.task-row-progress > td:first-child {
  border-left: 4px solid #f59e0b !important;
}
.task-row-progress:hover,
.task-status-progress:hover,
.task-status-in_progress:hover {
  background-color: #fffbeb !important; /* amber-50 light yellow */
  border-left-color: #d97706 !important;
  box-shadow: 0 1px 4px 0 rgba(245, 158, 11, 0.15);
}
tr.task-row-progress:hover > td {
  background-color: #fffbeb !important;
}

/* Pending: light gray hover, subtle gray border & glow */
.task-row-pending,
.task-status-pending {
  transition: all 160ms cubic-bezier(0.16, 1, 0.3, 1);
  border-left: 4px solid #94a3b8 !important;
}
tr.task-row-pending > td:first-child {
  border-left: 4px solid #94a3b8 !important;
}
.task-row-pending:hover,
.task-status-pending:hover {
  background-color: #f8fafc !important; /* slate-50 light gray */
  border-left-color: #64748b !important;
  box-shadow: 0 1px 4px 0 rgba(148, 163, 184, 0.15);
}
tr.task-row-pending:hover > td {
  background-color: #f8fafc !important;
}

/* Status Badges with light hover */
.status-badge-completed {
  transition: all 150ms ease;
}
.status-badge-completed:hover {
  background-color: #dcfce7 !important; /* emerald-100 */
  border-color: #86efac !important;
  color: #15803d !important;
  box-shadow: 0 1px 2px 0 rgba(16, 185, 129, 0.2);
}

.status-badge-progress,
.status-badge-in_progress {
  transition: all 150ms ease;
}
.status-badge-progress:hover,
.status-badge-in_progress:hover {
  background-color: #fef3c7 !important; /* amber-100 */
  border-color: #fde68a !important;
  color: #b45309 !important;
  box-shadow: 0 1px 2px 0 rgba(245, 158, 11, 0.2);
}

.status-badge-pending {
  transition: all 150ms ease;
}
.status-badge-pending:hover {
  background-color: #f1f5f9 !important; /* slate-100 */
  border-color: #cbd5e1 !important;
  color: #334155 !important;
  box-shadow: 0 1px 2px 0 rgba(100, 116, 139, 0.2);
}