@media (max-width: 1100px) {
  .accounts-grid, .notes-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .profile-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  :root { --sidebar: 60px; }
  .shell { padding: 10px; gap: 10px; }
  .sidebar { top: 10px; height: calc(100vh - 20px); border-radius: 20px; padding: 10px 7px; }
  .brand-dot, .avatar-btn { width: 38px; height: 38px; border-radius: 12px; }
  .page { min-height: calc(100vh - 20px); border-radius: 22px; padding: 18px; }
  .page-head { flex-direction: column; align-items: stretch; }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: auto; }
  .accounts-grid, .notes-grid { grid-template-columns: 1fr; }
  .chart-card { min-height: 370px; padding: 16px; }
  .chart-toolbar { align-items: stretch; }
  .chart-filters { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .filter-btn { flex: 0 0 auto; }
  .forecast { width: 100%; justify-content: center; }
  .calendar-grid { gap: 4px; }
  .calendar-day { min-height: 62px; border-radius: 10px; padding: 7px; }
  .personal-calendar .calendar-day { min-height: 84px; }
  .summary-card { align-items: flex-start; flex-direction: column; }
  .account-detail-actions { grid-template-columns: 1fr; }
  .modal-backdrop { padding: 12px; }
  .modal { padding: 18px; border-radius: 20px; max-height: calc(100vh - 24px); }
  .nav-btn[data-label]::after { display: none; }
}

@media (max-width: 520px) {
  .shell { grid-template-columns: 1fr; padding-bottom: 76px; }
  .sidebar {
    position: fixed; z-index: 900; left: 10px; right: 10px; bottom: 10px; top: auto; height: 60px; width: auto;
    flex-direction: row; border-radius: 18px; padding: 8px; gap: 6px;
  }
  .brand-dot { display: none; }
  .nav { display: flex; flex: 1; gap: 5px; }
  .nav-btn { aspect-ratio: auto; height: 42px; }
  .sidebar-spacer { display: none; }
  .avatar-btn { margin: 0; border-radius: 12px; }
  .theme-wrap { width: auto; border: 0; padding: 0 0 0 4px; }
  .switch { width: 40px; height: 22px; }
  html[data-theme="light"] .switch::after { transform: translateX(16px); }
  .page { min-height: calc(100vh - 96px); }
  .calendar-day { min-height: 52px; padding: 5px; }
  .day-dots { left: 5px; right: 5px; bottom: 6px; }
  .event-dot { width: 6px; height: 6px; }
  .personal-calendar .calendar-day { min-height: 70px; }
  .personal-event-chip { display: none; }
}


/* SYNCORA_MOBILE_CHART_CONTAINMENT */
.dashboard-grid,
.dashboard-grid > *,
[data-dashboard-chart],
.chart-card,
.chart-wrap {
  min-width: 0;
  max-width: 100%;
}
.chart-card {
  width: 100%;
  box-sizing: border-box;
}
.chart-wrap {
  overflow: hidden;
}
.chart-wrap svg {
  display: block;
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 760px) {
  .dashboard-grid {
    width: 100%;
    overflow: hidden;
  }
  .chart-card {
    width: 100%;
    min-height: 0;
    overflow: hidden;
  }
  .chart-card .card-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .chart-card .card-header > div {
    min-width: 0;
    width: 100%;
  }
  .chart-card .forecast {
    width: 100%;
    box-sizing: border-box;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .chart-toolbar,
  .chart-filters {
    min-width: 0;
    max-width: 100%;
  }
  .chart-filters {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    overscroll-behavior-inline: contain;
  }
  .chart-wrap {
    width: 100%;
    min-height: 250px;
    overflow: hidden;
  }
  .chart-wrap svg {
    width: 100%;
    height: clamp(250px, 68vw, 290px);
    overflow: hidden;
  }
}

@media (max-width: 520px) {
  .page {
    padding-inline: 14px;
  }
  .chart-card,
  .finance-calendar {
    width: 100%;
    box-sizing: border-box;
  }
  .chart-card {
    padding: 14px;
  }
  .chart-wrap {
    min-height: 235px;
  }
  .chart-wrap svg {
    height: 235px;
  }
  .chart-label {
    font-size: 9px;
  }
  .chart-label-y {
    font-size: 8px;
  }
}

@media (max-width: 380px) {
  .page {
    padding-inline: 10px;
  }
  .chart-card {
    padding-inline: 10px;
  }
  .chart-wrap svg {
    height: 220px;
  }
}


/* SYNCORA_CHART_NATIVE_RATIO */
.chart-wrap {
  display: grid;
  place-items: center;
  min-height: 290px;
  overflow: hidden;
}
.chart-wrap svg {
  width: min(100%, 1000px);
  max-width: 1000px;
  height: auto;
  aspect-ratio: 1000 / 290;
  margin-inline: auto;
  overflow: visible;
}

/*
 * Sotto i 760 px il grafico mantiene le proporzioni originali invece
 * di comprimersi: resta contenuto nella card e diventa scorrevole
 * orizzontalmente quando lo spazio non basta.
 */
@media (max-width: 760px) {
  .chart-wrap {
    display: block;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    overscroll-behavior-inline: contain;
    padding-bottom: 4px;
  }
  .chart-wrap svg {
    width: 820px;
    min-width: 820px;
    max-width: none;
    height: auto;
    aspect-ratio: 1000 / 290;
    overflow: visible;
  }
}

@media (max-width: 520px) {
  .chart-wrap {
    min-height: 0;
  }
  .chart-wrap svg {
    width: 760px;
    min-width: 760px;
    height: auto;
  }
}

@media (max-width: 380px) {
  .chart-wrap svg {
    width: 720px;
    min-width: 720px;
    height: auto;
  }
}


/* SYNCORA_CHART_DESKTOP_LARGE_RATIO */
/*
 * Il contenitore/card resta ampio; il grafico usa quasi tutta la larghezza
 * disponibile mantenendo rigorosamente il rapporto 1000:290 del viewBox.
 */
@media (min-width: 761px) {
  .chart-card {
    min-height: 565px;
  }

  .chart-wrap {
    min-height: 420px;
    display: grid;
    place-items: center;
  }

  .chart-wrap svg {
    width: min(94%, 1450px);
    max-width: 1450px;
    height: auto;
    aspect-ratio: 1000 / 290;
    margin-inline: auto;
  }
}


/* SYNCORA_COMMUNICATIONS_RESPONSIVE */
@media (max-width: 1100px) {
  .communications-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .communications-card-head {
    flex-direction: column;
    align-items: stretch;
  }
  .communications-card-head .btn {
    width: 100%;
  }
  .communication-banner {
    grid-template-columns: 1fr auto;
  }
  .communication-banner-kicker {
    grid-column: 1 / -1;
  }
  .feedback-type-switch {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .sidebar-user-menu-wrap {
    margin: 0;
  }
  .sidebar-user-popover {
    left: auto;
    right: 0;
    bottom: calc(100% + 10px);
    width: min(250px, calc(100vw - 30px));
  }
  .communications-feed-card,
  .feedback-card,
  .feedback-history-card {
    padding: 16px;
  }
  .communication-item {
    padding: 12px 10px;
  }
  .communication-banner {
    padding: 11px 12px;
  }
}


/* SYNCORA_POLLS_RESPONSIVE */
@media (max-width: 980px) {
  .polls-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 520px) {
  .poll-card {
    padding: 16px;
  }
  .poll-card-head {
    display: grid;
  }
  .poll-voter-count {
    justify-self: start;
  }
  .poll-option-head {
    align-items: flex-start;
  }
}


/* SYNCORA_ADMIN_USER_INSIGHTS_RESPONSIVE */
@media (max-width: 620px) {
  .admin-user-summary,
  .admin-plan-history-row {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .admin-user-summary {
    display: grid;
  }
  .admin-user-facts {
    grid-template-columns: 1fr;
  }
}

/* SYNCORA_LAB_RESPONSIVE */
@media (max-width: 1180px) {
  .lab-articles-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .lab-hero {
    grid-template-columns: 1fr;
  }
  .lab-hero-visual {
    min-height: 155px;
  }
  .lab-toolbar {
    grid-template-columns: 1fr 1fr;
  }
  .lab-toolbar [data-lab-search] {
    grid-column: 1 / -1;
  }
  .lab-paper-head,
  .lab-notebook,
  .lab-paper-footer {
    padding-left: 32px;
    padding-right: 32px;
  }
}
@media (max-width: 680px) {
  .lab-coming-popover {
    left: auto;
    right: 0;
    top: auto;
    bottom: calc(100% + 12px);
    width: min(300px, calc(100vw - 32px));
  }
  .lab-head {
    align-items: flex-start;
  }
  .lab-head-actions {
    width: 100%;
    justify-content: space-between;
  }
  .lab-hero {
    padding: 20px;
  }
  .lab-hero-visual {
    min-height: 180px;
  }
  .lab-toolbar {
    grid-template-columns: 1fr;
  }
  .lab-toolbar [data-lab-search] {
    grid-column: auto;
  }
  .lab-articles-grid {
    grid-template-columns: 1fr;
  }
  .lab-editor-grid {
    grid-template-columns: 1fr;
  }
  .lab-editor-title,
  .lab-editor-abstract,
  .lab-editor-notebook {
    grid-column: auto;
  }
  .lab-reader-topbar {
    align-items: flex-start;
  }
  .lab-paper {
    border-radius: 17px;
  }
  .lab-paper-head {
    padding: 28px 20px 22px;
  }
  .lab-paper-head h1 {
    font-size: 2rem;
  }
  .lab-notebook {
    padding: 24px 16px 34px;
  }
  .lab-paper-footer {
    display: grid;
    padding: 15px 20px;
  }
}