/* ==========================================================
   CareerLens AI — dashboard.css
   Loads AFTER style.css, components.css and responsive.css.
   Dashboard-specific layout and components. It reuses existing
   classes (.card, .card-static, .badge, .progress, .data-table,
   .table-wrap, .bar-list, .admin-layout, .admin-sidebar) and only
   extends them. Uses the tokens defined in style.css.
   1. Specificity fixes  2. Sidebar  3. Stats  4. Widgets
   5. Charts and progress  6. Tables  7. Profile and settings
   8. Badges  9. Responsive and motion
   ========================================================== */

/* 1. Specificity fixes
   ".card p" in style.css (specificity 0,1,1) overrides single-class
   paragraph styles such as .metric-value and .field-error when they
   sit inside a .card. These rules restore the intended look. */
.card .metric-value {
  font-size: 2.2rem;
  color: transparent;
}
.card .metric-value.is-large {
  font-size: 3rem;
}
.card .metric-label {
  font-size: 0.82rem;
}
.card .metric-note {
  font-size: 0.85rem;
}
.card .field-hint {
  font-size: 0.8rem;
}
.card .field-error {
  font-size: 0.82rem;
  color: #fca5a5;
}
.card .duration {
  font-size: 0.85rem;
}
.card .chat-msg p {
  font-size: 0.95rem;
  color: var(--text);
}

/* 2. Sidebar and dashboard shell */
.dashboard-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.dashboard-sidebar {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  display: grid;
  gap: 16px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.dashboard-content {
  display: grid;
  gap: 28px;
  min-width: 0;
}
.sidebar-title {
  padding: 0 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.sidebar-nav {
  display: grid;
  gap: 4px;
}
.sidebar-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--muted);
  transition:
    background 0.2s,
    color 0.2s;
}
.sidebar-link:hover {
  background: var(--surface-2);
  color: var(--text);
}
.sidebar-link.is-active,
.sidebar-link[aria-current="page"] {
  background: rgba(139, 92, 246, 0.18);
  color: var(--text);
}
.sidebar-divider {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 8px 0;
}
.admin-sidebar .sidebar-title {
  margin-bottom: 8px;
}

/* 3. Statistics */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px;
}
.kpi-card {
  gap: 6px;
}
.kpi-card .kpi-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.kpi-card .kpi-value {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--text);
}
.kpi-card .kpi-delta {
  font-size: 0.82rem;
  color: var(--muted);
}
.kpi-card .kpi-delta::before {
  content: "\25CF\00a0";
}
.kpi-card .kpi-delta.is-up {
  color: var(--mint-soft);
}
.kpi-card .kpi-delta.is-up::before {
  content: "\25B2\00a0";
}
.kpi-card .kpi-delta.is-down {
  color: #fca5a5;
}
.kpi-card .kpi-delta.is-down::before {
  content: "\25BC\00a0";
}

/* 4. Widgets (titled panels inside a card) */
.widget {
  gap: 16px;
}
.widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.widget-head h2 {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0;
}
.widget-body {
  display: grid;
  gap: 14px;
}
.card .widget-foot {
  font-size: 0.8rem;
  color: var(--muted);
}

/* 5. Charts and progress */
.bar-chart {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}
.bar-chart > li {
  display: grid;
  gap: 6px;
  justify-items: center;
  font-size: 0.8rem;
  color: var(--muted);
}
.bar-value {
  color: var(--text);
  font-weight: 600;
}
.bar-track {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 150px;
}
.bar-fill {
  width: 100%;
  max-width: 36px;
  border-radius: 8px 8px 0 0;
  background: var(--grad);
  transition: height 0.4s;
}
/* Bar heights in steps of 10% (round values to the nearest 10) */
.bar-h-10 {
  height: 10%;
}
.bar-h-20 {
  height: 20%;
}
.bar-h-30 {
  height: 30%;
}
.bar-h-40 {
  height: 40%;
}
.bar-h-50 {
  height: 50%;
}
.bar-h-60 {
  height: 60%;
}
.bar-h-70 {
  height: 70%;
}
.bar-h-80 {
  height: 80%;
}
.bar-h-90 {
  height: 90%;
}
.bar-h-100 {
  height: 100%;
}

/* Solid-colour progress variants (the default .progress uses the gradient) */
.progress--mint::-webkit-progress-value {
  background: var(--mint);
}
.progress--mint::-moz-progress-bar {
  background: var(--mint);
}
.progress--violet::-webkit-progress-value {
  background: var(--violet);
}
.progress--violet::-moz-progress-bar {
  background: var(--violet);
}

/* 6. Tables (extend .data-table and .table-wrap) */
.table-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.data-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}
.data-table--zebra tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}
.data-table--compact th,
.data-table--compact td {
  padding: 8px 10px;
  font-size: 0.85rem;
}
.data-table .col-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* 7. Profile and settings layouts */
.profile-header {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.avatar {
  flex: none;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--grad);
  color: #0b0b10;
  font-size: 1.2rem;
  font-weight: 800;
}
.settings-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.settings-section {
  display: grid;
  gap: 4px;
}
.settings-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.settings-row:last-child {
  border-bottom: 0;
}
.settings-row-label {
  font-weight: 600;
}
.card .settings-row-hint {
  font-size: 0.85rem;
  color: var(--muted);
}

/* 8. Extra badge states (base .badge is in components.css) */
.badge-warn {
  background: rgba(251, 191, 36, 0.15);
  color: #fcd34d;
  border-color: rgba(251, 191, 36, 0.35);
}
.badge-danger {
  background: rgba(248, 113, 113, 0.15);
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.35);
}

/* 9. Responsive and motion (breakpoints match the rest of the project) */
@media (max-width: 820px) {
  .dashboard-layout,
  .settings-layout {
    grid-template-columns: 1fr;
  }
  .dashboard-sidebar {
    position: static;
    padding: 12px;
  }
  .dashboard-sidebar .sidebar-nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
  }
  .sidebar-link {
    white-space: nowrap;
    border: 1px solid var(--border);
  }
  .sidebar-divider {
    display: none;
  }
  .admin-sidebar .sidebar-title {
    display: none;
  }
}
@media (max-width: 680px) {
  .bar-chart {
    gap: 6px;
  }
  .bar-track {
    height: 120px;
  }
  .kpi-card .kpi-value {
    font-size: 1.7rem;
  }
  .settings-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bar-fill,
  .sidebar-link {
    transition: none;
  }
}