/* Buttons */
.btn {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--color-primary);
  color: #fff;
  font-size: var(--font-size-sm);
  font-family: inherit;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--color-primary-hover); }
.btn-secondary { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.btn-secondary:hover { background: var(--color-bg); }
.btn-danger { background: var(--color-danger); }
.btn-danger:hover { background: var(--color-danger); opacity: 0.9; }
.btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--font-size-sm); }
.btn-block { display: block; width: 100%; text-align: center; }
.btn-group { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

/* Cards */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.card-flush { padding: 0; overflow: hidden; }

/* Scroll-shadow affordance: when a table is wider than its container, a soft
   shadow appears at whichever edge still has hidden content, and fades away
   once you've scrolled all the way to that edge. Pure-CSS technique (no JS):
   two "local" background layers matching the surface color mask the two
   "scroll" shadow layers except right at the edges that still have more
   content to reveal. Without this, actions like Edit/Delete can scroll
   off-screen on narrow viewports with no visual hint the row keeps going. */
.table-scroll {
  overflow-x: auto;
  background-color: var(--color-surface);
  background-image:
    linear-gradient(to right, var(--color-surface), var(--color-surface)),
    linear-gradient(to right, var(--color-surface), var(--color-surface)),
    linear-gradient(to right, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0)),
    linear-gradient(to left, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0));
  background-repeat: no-repeat;
  background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
  background-position: left center, right center, left center, right center;
  background-attachment: local, local, scroll, scroll;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
}

.project-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.project-card:hover {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
}
.project-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.project-card-header strong { font-size: var(--font-size-base); }
.project-card-desc {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin: 0 0 var(--space-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.project-card-meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin: 0;
}

/* Navigation */
.nav-sidebar {
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  padding: var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.nav-brand {
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin-bottom: var(--space-5);
  color: var(--color-text);
}
.nav-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
}
.nav-sidebar a {
  display: block;
  padding: var(--space-2) var(--space-3);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}
.nav-sidebar a:hover, .nav-sidebar a.active { background: var(--color-bg); }
.nav-sidebar a.active { color: var(--color-primary); font-weight: 600; }
.nav-footer {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
  margin-top: var(--space-4);
}
.nav-user {
  margin-bottom: var(--space-3);
}
.nav-user-name {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 600;
}
.nav-user-role {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-transform: capitalize;
}
.nav-footer form { margin: 0; }
.nav-footer .btn { width: 100%; text-align: center; }

@media (max-width: 720px) {
  .nav-sidebar { min-height: auto; padding: var(--space-3) var(--space-4); }
  .nav-links { flex-direction: row; flex-wrap: wrap; }
  .nav-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); border-top: none; margin-top: var(--space-2); padding-top: 0; }
  .nav-footer .btn { width: auto; }
}

/* Badges */
.badge {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: 999px;
  font-size: var(--font-size-sm);
  white-space: nowrap;
}
.badge-not-started { background: #eceff3; color: var(--color-text-muted); }
.badge-in-progress { background: #e6ecfb; color: var(--color-primary); }
.badge-blocked { background: #fbeaea; color: var(--color-danger); }
.badge-done { background: #e6f4ec; color: var(--color-success); }
.badge-archived { background: #f1f1f1; color: var(--color-text-muted); }
.badge-overdue { background: #fff2e0; color: var(--color-warning); }

/* Priority badges reuse the same tinted-pill idiom as the status badges above,
   built from tokens.css colors via color-mix() rather than new hardcoded hex. */
/* --color-bg is the page background, so a Low pill filled with it was
   effectively invisible; tint from --color-text-muted at the same 15% the other
   priority badges use so all four read as one set. */
.badge-priority-low { background: color-mix(in srgb, var(--color-text-muted) 15%, var(--color-surface)); color: var(--color-text-muted); }
.badge-priority-medium { background: color-mix(in srgb, var(--color-info) 15%, var(--color-surface)); color: var(--color-info); }
.badge-priority-high { background: color-mix(in srgb, var(--color-warning) 15%, var(--color-surface)); color: var(--color-warning); }
.badge-priority-urgent { background: color-mix(in srgb, var(--color-danger) 15%, var(--color-surface)); color: var(--color-danger); }

/* Forms */
.form-field { margin-bottom: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); }
.form-field label { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); }
.form-field input, .form-field select, .form-field textarea {
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text);
}
.form-field textarea { resize: vertical; min-height: 6em; }
.form-field .field-hint { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.form-row {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.form-row .form-field { flex: 1 1 200px; }

/* Generic control styling so nothing on the page (e.g. an inline status
   <select> outside a form-field wrapper) is left as an unstyled browser
   default. */
select {
  font-family: inherit;
  font-size: var(--font-size-sm);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
}

.inline-form { display: inline-block; }

/* Data tables (task lists etc.) */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td {
  text-align: left;
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
}
.data-table th {
  color: var(--color-text-muted);
  font-weight: 600;
  text-transform: uppercase;
}
.data-table tbody tr:hover { background: var(--color-bg); }
.data-table .actions { display: flex; gap: var(--space-2); align-items: center; justify-content: flex-end; white-space: nowrap; }

/* Auth screen */
.auth-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--space-7));
}
.auth-card { width: 100%; max-width: 360px; }
.auth-card h1 { text-align: center; }
.auth-subtitle {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-5);
}

/* Empty / flash / loading states */
.empty-state { text-align: center; padding: var(--space-7) var(--space-4); color: var(--color-text-muted); }
.empty-state .btn { margin-top: var(--space-2); }
.flash { padding: var(--space-3); border-radius: var(--radius-sm); margin-bottom: var(--space-4); }
.flash-error { background: var(--flash-error-bg); color: var(--color-danger); }
.flash-success { background: var(--flash-success-bg); color: var(--color-success); }
.flash-info { background: color-mix(in srgb, var(--color-info) 12%, var(--color-surface)); color: var(--color-info); font-size: 0.9em; }
.flash-info code { background: color-mix(in srgb, var(--color-info) 15%, var(--color-surface)); padding: 0 0.3em; border-radius: 3px; }
/* Flask-Login's default login_required flash has no category (renders as
   flash-message) - a fallback so it looks intentional instead of bare text. */
.flash-message { background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); }

.skeleton { background: linear-gradient(90deg, #eceff3 25%, #f7f8fa 50%, #eceff3 75%); background-size: 200% 100%; animation: skeleton-loading 1.2s infinite; border-radius: var(--radius-sm); height: 1em; }
@keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Dashboard rollup tiles: reuses .card / .card-grid / .project-card-header,
   just adds a larger number style for the count next to each status badge. */
.stat-number { font-size: var(--font-size-xl); }

/* Timeline (Gantt-style) report */
.timeline-row { display: grid; grid-template-columns: 200px 1fr; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; }
.timeline-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeline-track {
  position: relative;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  height: 20px;
  /* Clip the bar to the track. timeline.js clamps each bar to a 2% minimum
     width so very short projects stay visible; for a project ending exactly
     at the chart's latest end date that minimum can push the bar a hair past
     100% width. overflow:hidden guarantees it never visibly bleeds past the
     track edge instead of relying on the JS math alone. */
  overflow: hidden;
}
.timeline-bar {
  position: absolute;
  height: 100%;
  border-radius: var(--radius-sm);
  min-width: 2%;
  /* Every status badge tint is a light pastel (e.g. badge-archived's #f1f1f1
     is nearly indistinguishable from .timeline-track's --color-bg), so the
     fill color alone can't be relied on for contrast against the track. A
     border built from an existing token via color-mix() — same technique
     Task 4 used for the priority badges above — gives every bar a visible
     edge regardless of which status tint it's filled with. box-sizing:
     border-box (set globally in base.css) keeps the border from pushing the
     bar taller than the track. */
  border: 1px solid color-mix(in srgb, var(--color-text-muted) 60%, var(--color-surface));
}

@media (max-width: 600px) {
  /* Below ~600px there isn't room for a fixed 200px label column next to a
     usable bar track (see manual check at 375px in the task brief), so stack
     the project name above its track instead of squeezing both into one row. */
  .timeline-row { grid-template-columns: 1fr; gap: var(--space-1); }
}

/* Theme toggle - fixed position so it's reachable on the pre-login/auth
   page too, where the sidebar nav (which would otherwise host it) isn't rendered. */
.theme-toggle-btn {
  position: fixed;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 10;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-card);
}
.theme-toggle-btn:hover { background: var(--color-bg); }
.auth-icon { font-size: 2.2rem; text-align: center; margin-bottom: var(--space-2); }