/* Source: app/assets/stylesheets/application.css */
@media (min-width: 769px) {
  html.sidebar-collapsed .sidebar { width: var(--sidebar-rail); padding: var(--toddyi-size-0-75rem) var(--toddyi-size-0-6rem); }
  html.sidebar-collapsed .sidebar__label,
  html.sidebar-collapsed .sidebar .nav-link > span:not(.nav-emoji) { display: none; }
  html.sidebar-collapsed .brand,
  html.sidebar-collapsed .sidebar__head,
  html.sidebar-collapsed .nav-link,
  html.sidebar-collapsed .sidebar__action { justify-content: center; }
  html.sidebar-collapsed .sidebar__head { flex-direction: column; gap: var(--toddyi-size-0-4rem); }
  html.sidebar-collapsed .sidebar__collapse svg { transform: rotate(180deg); }
  html.sidebar-collapsed .nav-link,
  html.sidebar-collapsed .sidebar__action { gap: 0; }
}

/* Source: app/assets/stylesheets/application.css */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 0; left: 0;
    height: var(--toddyi-size-100vh);
    width: var(--sidebar-w);
    transform: translateX(-100%);
    box-shadow: 0 0 30px var(--toddyi-app-shadow);
  }
  html.sidebar-open .sidebar { transform: translateX(0); }
  html.sidebar-open .sidebar-overlay { display: block; }
  .topbar__burger { display: inline-flex; }
  .sidebar__collapse { display: none; }
}

/* Source: app/assets/stylesheets/components/datetime_picker.css */
@media (max-width: 720px) {
  .nav-links .nav-link span { display: none; }
  .hide-on-mobile { display: none; }
}

/* Source: app/assets/stylesheets/components/datetime_picker.css */
@media (max-width: 600px) {
  .new-task-btn .btn-text { display: none; }
  .new-task-btn { padding: var(--toddyi-size-0-7rem); border-radius: var(--toddyi-size-50pct); aspect-ratio: 1 / 1; justify-content: center; }
}

/* Source: app/assets/stylesheets/features/productivity.css */
@media (max-width: 600px) {
  .fc .fc-toolbar { flex-direction: column; gap: var(--toddyi-size-0-5rem); }
  .fc .fc-toolbar-title { font-size: var(--toddyi-size-1-05rem); }
}

/* Source: app/assets/stylesheets/features/productivity.css */
@media (max-width: 600px) {
  .matrix-grid { grid-template-columns: 1fr; }
  .matrix-axis-x, .matrix-axis-y { display: none; }
  .matrix { grid-column: 1; grid-template-columns: 1fr; grid-template-rows: none; }
}