/* ==========================================================================
   CLIENT DASHBOARD — sidebar shell + cards
   ========================================================================== */

.dash-body { overflow-x: hidden; }

/* Breathing room above each section when the sidebar scrolls it into view,
   so a clicked section's heading lands just below the top of the viewport
   instead of flush against the very top edge. Respected by both native
   anchor jumps and scrollIntoView(). */
#dash-top, #dash-projects, #dash-updates, #dash-revisions, #dash-support,
#dash-files, #dash-billing, #dash-messages, #dash-profile {
  scroll-margin-top: 24px;
}

.dash-loading {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  color: var(--text-dim);
  font-size: 14px;
}

.dash-app {
  --sidebar-w: 240px;
  display: flex;
  min-height: 100vh;
}
/* The homepage's generic `section { padding: 104px 0; }` rule (css/sections.css)
   applies site-wide, including to the <section> elements used for dashboard
   cards — neutralize it here rather than touching that shared homepage file. */
.dash-app section { padding: 0; }

/* ---------- SIDEBAR ---------- */
.dash-sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--bg-elev-solid);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
  gap: 8px;
  overflow-y: auto;
  z-index: 50;
  transition: width .2s ease, transform .25s ease;
  /* Thin, theme-colored scrollbar instead of the OS default (which renders
     as a thick pale bar right at the sidebar/content boundary on Windows). */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.dash-sidebar::-webkit-scrollbar { width: 6px; }
.dash-sidebar::-webkit-scrollbar-track { background: transparent; }
.dash-sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 3px; }
.dash-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); }

.dash-sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 20px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}
.dash-sidebar-logo .logo-text small { font-family: var(--font-mono); color: var(--text-dim); font-weight: 400; }

.dash-nav { display: flex; flex-direction: column; gap: 3px; }
.dash-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  transition: background .15s ease, color .15s ease;
  white-space: nowrap;
}
.dash-nav-icon { flex: none; opacity: .85; }
.dash-nav-link:hover { background: rgba(255, 255, 255, 0.04); color: var(--text); }
.dash-nav-link.active {
  background: rgba(57, 216, 190, 0.1);
  color: var(--teal);
  border: 1px solid rgba(57, 216, 190, 0.2);
}

.dash-sidebar-cta {
  margin-top: auto;
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px;
  text-align: center;
}
.dash-cta-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 122, 61, 0.14);
  color: var(--accent);
}
.dash-sidebar-cta h4 { font-size: 14.5px; margin-bottom: 6px; line-height: 1.3; }
.dash-sidebar-cta p { font-size: 12.5px; color: var(--text-dim); margin-bottom: 14px; line-height: 1.5; }

/* Compact real-client identity row, sidebar footer */
.dash-sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-top: 10px;
  border-top: 1px solid var(--line-soft);
}
.dash-sidebar-user-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(57, 216, 190, 0.14);
  color: var(--teal);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.dash-sidebar-user-info { min-width: 0; }
.dash-sidebar-user-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-sidebar-user-role { font-size: 11.5px; color: var(--text-dim); }

.dash-sidebar-collapse {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 13px;
  padding: 10px 12px;
  margin-top: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.dash-sidebar-collapse:hover { color: var(--text); }
.dash-sidebar-collapse svg { transition: transform .2s ease; flex: none; }

.dash-sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 40;
}

/* Collapsed (desktop icon rail) */
.dash-app--collapsed { --sidebar-w: 78px; }
.dash-app--collapsed .dash-nav-label,
.dash-app--collapsed .dash-sidebar-logo .logo-text,
.dash-app--collapsed .dash-sidebar-cta,
.dash-app--collapsed .dash-sidebar-user-info,
.dash-app--collapsed .dash-sidebar-collapse span { display: none; }
.dash-app--collapsed .dash-sidebar-user { justify-content: center; }
.dash-app--collapsed .dash-sidebar-collapse svg { transform: rotate(180deg); }
.dash-app--collapsed .dash-nav-link { justify-content: center; }
.dash-app--collapsed .dash-sidebar-logo { justify-content: center; }

/* ---------- MAIN ---------- */
.dash-main {
  flex: 1;
  min-width: 0;
  margin-left: var(--sidebar-w);
  padding: 28px 36px 60px 40px;
  transition: margin-left .2s ease;
}

.dash-topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 26px;
}
.dash-menu-toggle {
  display: none;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
  align-items: center; justify-content: center;
  flex: none;
}
.dash-welcome { flex: 1; min-width: 0; }
.dash-welcome h1 { font-size: 24px; margin-bottom: 4px; }
.dash-welcome p { color: var(--text-muted); font-size: 14px; }
.dash-topbar-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.dash-icon-btn {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.dash-icon-btn:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.25); }
.dash-icon-badge {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: #1a0d06;
  font-size: 10px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- TOPBAR DROPDOWNS (notifications, profile menu) ---------- */
.dash-dropdown { position: relative; }
.dash-dropdown-panel {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 280px;
  background: var(--bg-elev-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.7);
  padding: 8px;
  z-index: 60;
}
.dash-dropdown-panel--right { left: auto; right: 0; width: 200px; }
.dash-dropdown.dash-dropdown--open .dash-dropdown-panel { display: block; }
.dash-dropdown-title {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-dim);
  padding: 8px 10px 6px;
}
.dash-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
}
.dash-dropdown-item:hover { background: rgba(255, 255, 255, 0.05); }
.dash-notify-item { display: block; padding: 9px 10px; border-radius: 8px; }
.dash-notify-item:hover { background: rgba(255, 255, 255, 0.04); }
.dash-notify-item strong { display: block; font-size: 13px; margin-bottom: 2px; }
.dash-notify-item span { font-size: 11.5px; color: var(--text-dim); }
.dash-notify-empty { padding: 14px 10px; font-size: 13px; color: var(--text-dim); text-align: center; }

.dash-profile-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px 5px 5px;
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s ease;
}
.dash-profile-btn:hover { border-color: rgba(255, 255, 255, 0.25); }
.dash-profile-btn-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(57, 216, 190, 0.14);
  color: var(--teal);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11.5px;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.dash-profile-btn-name { font-size: 13.5px; font-weight: 500; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- CARD PRIMITIVE ---------- */
.dash-card {
  background: var(--bg-elev-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 32px;
  display: flex;
  flex-direction: column;
}
/* When a card is stretched taller than its natural content (row-mate is
   taller), let the body area absorb the extra space instead of leaving it
   pinned to the top — keeps a stretched card looking intentional. */
#dash-timeline .dash-timeline { margin-top: auto; margin-bottom: auto; }
.dash-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.dash-card-head h3 { font-size: 16px; }

.dash-form-card { margin-bottom: 24px; display: flex; flex-direction: column; gap: 16px; }
.dash-form-card h3 { font-size: 16px; }
.dash-form-inline { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line-soft); }

.field-error { display: none; color: #ff8a80; font-size: 12px; margin-top: 6px; }
.field-error.show { display: block; }

.dash-empty {
  color: var(--text-dim);
  font-size: 13.5px;
  padding: 18px 0;
  text-align: center;
}

.dash-placeholder-note {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}

/* ---------- PROJECT SUMMARY ---------- */
/* The card itself (.dash-summary, which is a bare <section>) keeps only
   vertical padding — horizontal inset lives directly on the two inner rows
   below (.dash-summary-top and .dash-summary-meta) so the avatar row and the
   Status/Progress/Milestone/Last Update row are each explicitly, individually
   guaranteed the same 32px left/right padding, with nothing else able to
   contest it. The card's own border/width/position are untouched. */
.dash-summary {
  margin-bottom: 24px;
  padding: 40px 0;
}
.dash-summary-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
  padding: 0 32px;
}
.dash-summary-id { display: flex; align-items: center; gap: 16px; }
.dash-summary-title-row h2 { font-size: 19px; }
.dash-summary-id p { color: var(--text-muted); font-size: 13.5px; margin-top: 3px; }
.dash-project-switcher {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  padding: 8px 12px;
}

.dash-summary-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 20px 32px 8px;
  border-top: 1px solid var(--line-soft);
}
.dash-summary-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.dash-summary-meta > div > span:not(.dash-summary-label):not(.badge) { font-size: 14.5px; font-weight: 600; }
.dash-summary-progress { display: flex; align-items: center; gap: 10px; }
.dash-summary-bar { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.dash-summary-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--accent-3)); border-radius: 3px; transition: width .4s ease; }

/* ---------- STAT CARDS ---------- */
.dash-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 24px;
}
.dash-stat { padding: 20px; }
.dash-stat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; color: var(--text-muted); font-size: 13px; font-weight: 500; }
.dash-stat-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.dash-stat-icon--teal { background: rgba(57, 216, 190, 0.14); color: var(--teal); }
.dash-stat-icon--orange { background: rgba(255, 122, 61, 0.14); color: var(--accent); }
.dash-stat-icon--amber { background: rgba(255, 200, 87, 0.14); color: var(--accent-3); }
.dash-stat-value { font-family: var(--font-display); font-size: 26px; font-weight: 700; margin-bottom: 4px; }
.dash-stat-caption { font-size: 12.5px; color: var(--text-dim); }

/* ---------- ROW LAYOUTS ----------
   align-items: stretch (the grid default) so paired cards in a row always
   match height — this is what stops a short card leaving a dead gap of bare
   page background below it while its taller row-mate continues. */
.dash-row { display: grid; gap: 24px; margin-bottom: 24px; align-items: stretch; }
.dash-row--timeline { grid-template-columns: 2fr 1fr; }
.dash-row--two { grid-template-columns: 1fr 1fr; }

/* Standalone full-width cards (Files, Billing) outside any row grid */
.dash-section-full { margin-bottom: 24px; }

/* ---------- TIMELINE ---------- */
.dash-timeline {
  display: flex;
  justify-content: space-between;
  position: relative;
  padding-top: 6px;
}
.dash-timeline::before {
  content: '';
  position: absolute;
  top: 24px; left: 22px; right: 22px;
  height: 2px;
  background: var(--line);
  z-index: 0;
}
.dash-tl-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 500;
  text-align: center;
  flex: 1;
}
.dash-tl-dot {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim);
}
.dash-tl-date { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim); }
.dash-tl-step.done .dash-tl-dot { background: var(--teal); border-color: var(--teal); color: #06201b; }
.dash-tl-step.done { color: var(--text-muted); }
.dash-tl-step.active .dash-tl-dot { border-color: var(--accent-3); background: rgba(255, 200, 87, 0.12); color: var(--accent-3); box-shadow: 0 0 0 4px rgba(255, 200, 87, 0.12); }
.dash-tl-step.active { color: var(--text); }

/* ---------- RECENT UPDATES ---------- */
.dash-updates { display: flex; flex-direction: column; gap: 16px; }
.dash-update { display: flex; gap: 12px; }
.dash-update-icon {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex: none;
  margin-top: 1px;
}
.dash-update-icon--done { background: rgba(57, 216, 190, 0.14); color: var(--teal); }
.dash-update-icon--progress { background: rgba(255, 200, 87, 0.14); color: var(--accent-3); }
.dash-update-icon--waiting { background: rgba(255, 122, 61, 0.14); color: var(--accent); }
.dash-update strong { display: block; font-size: 13.5px; margin-bottom: 3px; }
.dash-update p { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin-bottom: 4px; }
.dash-update-time { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }

/* ---------- GENERIC LISTS (revisions / tickets / files) ---------- */
.dash-list { display: flex; flex-direction: column; gap: 4px; }
.dash-list-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px;
}
.dash-list-row:last-child { border-bottom: none; }
.dash-list-row strong { display: block; font-size: 13.5px; margin-bottom: 3px; }
.dash-list-row p { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin-bottom: 4px; }
.dash-list-meta { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }
.dash-file-icon { font-size: 22px; flex: none; }

/* ---------- MESSAGES (scrollable history, form stays outside/below) ---------- */
#messagesWrap {
  max-height: 420px;
  overflow-y: auto;
  padding-right: 6px;
  margin-bottom: 16px;
}
@media (max-width: 640px) {
  #messagesWrap {
    max-height: 350px;
  }
}

/* ---------- BILLING SUMMARY ---------- */
.dash-billing-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
.dash-billing-stat {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dash-billing-stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}
.dash-billing-stat-value {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}
@media (max-width: 720px) {
  .dash-billing-summary {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- FILES & DELIVERABLES (wide chip grid) ---------- */
.dash-files-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.dash-file-chip {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px;
}
.dash-file-chip > div { display: flex; flex-direction: column; gap: 2px; }
.dash-file-chip strong { font-size: 13.5px; }

/* ---------- PLACEHOLDER / PREVIEW TAG ---------- */
.dash-panel-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 9px;
  margin-left: 8px;
  vertical-align: middle;
}

/* ---------- BILLING TABLE ---------- */
.dash-table-wrap { overflow-x: auto; }
.dash-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dash-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 0 0 10px;
  border-bottom: 1px solid var(--line);
}
.dash-table td { padding: 12px 0; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.dash-table tr:last-child td { border-bottom: none; }
.dash-table td.cell-mono { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted); }

/* ---------- QUICK CONTACT ---------- */
.dash-contact-list { display: flex; flex-direction: column; gap: 4px; }
.dash-contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 8px;
  margin: 0 -8px;
  border-radius: 10px;
  transition: background .15s ease;
  width: calc(100% + 16px);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.dash-contact-row:hover { background: rgba(255, 255, 255, 0.03); }
.dash-contact-row--btn { font-family: var(--font-body); }
.dash-contact-row--disabled { cursor: default; opacity: .55; }
.dash-contact-row--disabled:hover { background: none; }
.dash-contact-row--disabled .dash-contact-icon { background: rgba(255, 255, 255, 0.05); color: var(--text-dim); }
.dash-contact-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: rgba(255, 122, 61, 0.12);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.dash-contact-row strong { display: block; font-size: 13.5px; }
.dash-contact-row span span { font-size: 12px; color: var(--text-dim); }

/* ---------- CLIENT PROFILE ---------- */
.dash-profile-top { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.dash-profile-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(57, 216, 190, 0.14);
  color: var(--teal);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.dash-profile-top strong { display: block; font-size: 15px; margin-bottom: 4px; }
.dash-primary-badge { background: rgba(57, 216, 190, 0.12); color: var(--teal); border: 1px solid rgba(57, 216, 190, 0.3); }
.dash-profile-list { display: flex; flex-direction: column; gap: 12px; }
.dash-profile-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.dash-profile-list dt { color: var(--text-dim); }
.dash-profile-list dd { margin: 0; font-weight: 500; text-align: right; }

/* ---------- STATUS BADGES (dashboard-specific) ---------- */
.badge--new { background: rgba(255, 200, 87, 0.12); color: var(--accent-3); border: 1px solid rgba(255, 200, 87, 0.3); }
.badge--progress { background: rgba(255, 122, 61, 0.12); color: var(--accent); border: 1px solid rgba(255, 122, 61, 0.3); }
.badge--review { background: rgba(57, 216, 190, 0.12); color: var(--teal); border: 1px solid rgba(57, 216, 190, 0.3); }
.badge--done { background: rgba(46, 213, 115, 0.12); color: #2ed573; border: 1px solid rgba(46, 213, 115, 0.3); }
.badge--open { background: rgba(255, 122, 61, 0.12); color: var(--accent); border: 1px solid rgba(255, 122, 61, 0.3); }

/* Support Priority Badges (existing) */
.badge.priority-high { background: rgba(255, 71, 87, 0.1); color: #ff4757; border: 1px solid rgba(255, 71, 87, 0.2); }
.badge.priority-medium { background: rgba(255, 165, 2, 0.1); color: #ffa502; border: 1px solid rgba(255, 165, 2, 0.2); }
.badge.priority-low { background: rgba(46, 213, 115, 0.1); color: #2ed573; border: 1px solid rgba(46, 213, 115, 0.2); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 980px) {
  .dash-stats { grid-template-columns: repeat(2, 1fr); }
  .dash-row--timeline { grid-template-columns: 1fr; }
  .dash-row--two { grid-template-columns: 1fr; }
  .dash-summary-meta { grid-template-columns: repeat(2, 1fr); row-gap: 16px; }
}

@media (max-width: 900px) {
  .dash-sidebar {
    transform: translateX(-100%);
    width: 260px !important;
    box-shadow: 30px 0 60px -20px rgba(0, 0, 0, 0.6);
  }
  .dash-app--sidebar-open .dash-sidebar { transform: translateX(0); }
  .dash-app--sidebar-open .dash-sidebar-overlay { display: block; }
  .dash-app--sidebar-open .dash-nav-label,
  .dash-app--sidebar-open .dash-sidebar-logo .logo-text,
  .dash-app--sidebar-open .dash-sidebar-cta,
  .dash-app--sidebar-open .dash-sidebar-user-info { display: initial; }
  .dash-sidebar-collapse { display: none; }
  .dash-main { margin-left: 0 !important; padding: 20px 18px 50px  ; }
  .dash-menu-toggle { display: flex; }
}

@media (max-width: 480px) {
  .dash-dropdown-panel { width: 240px; }
  .dash-profile-btn-name { display: none; }
}

@media (max-width: 640px) {
  .dash-stats { grid-template-columns: 1fr; }
  .dash-summary-meta { grid-template-columns: 1fr 1fr; }
  .dash-topbar { flex-wrap: wrap; }
  .dash-welcome { flex-basis: 100%; order: 1; }
  .dash-topbar-actions { order: 2; margin-left: 52px; }
  .dash-welcome h1 { font-size: 20px; }
}