/* static/css/responsive.css — FrameFlow prototype responsive adjustments */

/* 大屏 → 中屏（1300px 以下）：收窄侧边栏，卡片由 3 列变 2 列 */
@media (max-width: 1300px) {
  .app-shell { grid-template-columns: 220px 1fr var(--right-w); }
  .app-shell.no-right { grid-template-columns: 220px 1fr 0px; }
  .app-shell.collapsed { grid-template-columns: 76px 1fr var(--right-w); }
  .app-shell.collapsed.no-right { grid-template-columns: 76px 1fr 0px; }

  .project-grid,
  .featured-project-track { grid-template-columns: repeat(2, 1fr); }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
}

/* 平板 / 移动（1024px 以下）：左右侧栏改为 fixed 抽屉，默认隐藏，点按钮互斥滑出；抽屉内显示完整文字 */
@media (max-width: 1024px) {
  .app-shell,
  .app-shell.no-right,
  .app-shell.collapsed,
  .app-shell.collapsed.no-right {
    grid-template-columns: 1fr;
    grid-template-rows: 64px 1fr;
    grid-template-areas:
      "topbar"
      "canvas";
  }

  .main-canvas {
    margin: 12px;
    min-width: 0;
  }

  /* Topbar stays above drawer backdrop so toggle/bell buttons remain tappable */
  .topbar { position: relative; z-index: 110; }

  /* Drawer backdrop */
  .drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .app-shell.sidebar-open .drawer-backdrop,
  .app-shell.right-open .drawer-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* Sidebar drawer — force expanded text look even if .collapsed is present */
  .app-shell .sidebar,
  .app-shell.collapsed .sidebar {
    position: fixed;
    /* Start below the topbar so the drawer brand area does not overlap the
       topbar toggle/breadcrumbs (topbar is z-index 110, drawer is 100). */
    top: 78px;
    bottom: 12px;
    left: 12px;
    width: 260px;
    margin: 0;
    z-index: 100;
    transform: translateX(calc(-100% - 24px));
    opacity: 0;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    animation: none;
    align-items: stretch;
  }
  .app-shell.sidebar-open .sidebar {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }
  /* Force expanded text layout inside drawer regardless of .collapsed */
  .app-shell.collapsed .brand {
    justify-content: flex-start;
    width: auto;
    padding: 0 8px;
    gap: 12px;
    align-self: stretch;
  }
  .app-shell.collapsed .brand-text {
    max-width: 220px;
    opacity: 1;
    transform: none;
    margin: 0;
    pointer-events: auto;
  }
  .app-shell.collapsed .nav-label {
    display: block;
    align-self: stretch;
    padding: 0 10px;
  }
  .app-shell.collapsed .nav-list { align-items: stretch; }
  .app-shell.collapsed .nav-item {
    justify-content: flex-start;
    width: auto;
    padding: 11px 12px;
    gap: 12px;
  }
  .app-shell.collapsed .nav-item > span:not(.badge) {
    max-width: 220px;
    opacity: 1;
    transform: none;
    margin: 0;
    pointer-events: auto;
  }
  .app-shell.collapsed .badge { display: inline-flex; }
  .app-shell.collapsed .sidebar-footer {
    width: auto;
    align-items: stretch;
    align-self: stretch;
  }
  .app-shell.collapsed .profile-mini {
    justify-content: flex-start;
    padding: 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius-sm);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .app-shell.collapsed .profile-trigger {
    justify-content: flex-start;
    padding: 6px;
    border-radius: 10px;
    background: transparent;
  }
  .app-shell.collapsed .profile-mini .profile-info { display: block; }
  .app-shell.collapsed .nav-item::after { display: none; } /* text already visible, hide collapsed tooltip */

  /* Right panel drawer */
  .right-panel,
  .app-shell.no-right .right-panel {
    position: fixed;
    /* Keep the right drawer below the topbar as well for visual symmetry. */
    top: 78px;
    bottom: 12px;
    right: 12px;
    width: min(380px, calc(100vw - 24px));
    margin: 0;
    z-index: 100;
    transform: translateX(calc(100% + 24px));
    opacity: 0;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  }
  .app-shell.right-open .right-panel {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }
  .right-panel .right-close { display: block; }

  .page-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .page-head h1 { font-size: 24px; }

  .stat-row,
  .project-grid,
  .featured-project-track,
  .client-kpi-row { grid-template-columns: repeat(2, 1fr); }

  .analytics-row { flex-direction: row; }
  .analytics-card { min-width: 280px; width: auto; flex: 1; }
  .engagement-grid { grid-template-columns: repeat(2, 1fr); }

  .client-grid { grid-template-columns: 1fr; }
}

/* 768px 以下沿用上面的 ≤1024px 抽屉规则；更激进的压缩见下方 640/480 段 */


/* 小手机 / 窄屏（640px 以下）：顶部栏简化 */
@media (max-width: 640px) {
  .topbar { padding: 0 12px; }
  .crumbs { display: none; }
  .top-actions { flex: 1; gap: 8px; justify-content: flex-end; }
  .search-glass { flex: 1; max-width: 260px; }
  .search-glass input { width: 100%; min-width: 0; }
}

/* 手机（480px 以下）：进一步压缩字号与间距 */
@media (max-width: 480px) {
  .page-head h1 { font-size: 20px; }
  .page-head p { font-size: 13px; }

  .stat-card { padding: 14px; }
  .stat-card .value { font-size: 26px; }
  .stat-card .sub { font-size: 11px; }

  .featured-project-track .project-card .project-cover { height: 140px; }
  .project-card .project-body { padding: 14px; }
  .project-card .project-body h3 { font-size: 14px; }

  .engagement-grid { grid-template-columns: 1fr; }
  .client-kpi-row { grid-template-columns: 1fr; }

  .search-glass input { padding: 9px 12px 9px 32px; }
  .top-actions-left { gap: 8px; }
}