/* ============================================================
   Dozhen Web App — layout shell (Phase 1)
   Scoped under body.web-mode so extension styles are unaffected.
   ============================================================ */

/* Undo the extension side-panel's html/body overflow:hidden + height:100%
   lock. The webapp needs the browser's normal page scroll so long
   content (project grid, task lists, task body) can be reached. This
   file is only loaded by the webapp template, never by the extension
   popup, so targeting `html` unscoped is safe here. */
html {
  overflow: auto !important;
  height: auto !important;
}

body.web-mode {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  height: auto;
  overflow: visible;
  background: var(--bg-subtle, #f7f8fa);
  color: var(--text-primary, #1a1a1a);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC",
    "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

body.web-mode #app-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

/* ---------- Sidebar ---------- */

body.web-mode #sidebar {
  background: #ffffff;
  border-right: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

body.web-mode .sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  border-bottom: 1px solid #f0f1f3;
}

body.web-mode .sidebar-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #5865f2, #7983f5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
}

body.web-mode .sidebar-title {
  font-size: 16px;
  font-weight: 600;
}

body.web-mode .sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 12px 10px;
  gap: 2px;
}

body.web-mode .sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  color: #4b5563;
  text-decoration: none;
  font-size: 14px;
  transition: background 0.12s, color 0.12s;
}

body.web-mode .sidebar-item:hover {
  background: #f3f4f6;
  color: #111827;
}

body.web-mode .sidebar-item--active {
  background: #eef2ff;
  color: #4338ca;
  font-weight: 600;
}

body.web-mode .sidebar-icon {
  font-size: 17px;
  width: 22px;
  text-align: center;
}

body.web-mode .sidebar-label {
  flex: 1;
}

/* ---------- Main area ---------- */

body.web-mode #main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

body.web-mode #top-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 24px;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}

body.web-mode .sidebar-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #4b5563;
  padding: 6px 10px;
}

body.web-mode .top-bar-spacer {
  flex: 1;
}

body.web-mode .top-bar-user {
  display: flex;
  align-items: center;
  gap: 12px;
}

body.web-mode .top-bar-username {
  font-size: 13px;
  color: #4b5563;
}

/* ---------- Sub-header (rendered by extension renderHeader component) ---------- */

body.web-mode #header {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 32px;
}

body.web-mode #header:empty {
  display: none;
}

body.web-mode #header .header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0 14px;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 4px;
}

body.web-mode #header .header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

body.web-mode #header .header-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.web-mode #header .header-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

body.web-mode #header .btn-icon {
  width: 34px;
  height: 34px;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #4b5563;
}

body.web-mode #header .btn-icon:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

body.web-mode #header .btn-sm {
  padding: 7px 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: #374151;
}

body.web-mode #header .btn-sm:hover {
  background: #f9fafb;
}

body.web-mode #header .btn-sm.text-danger {
  color: #dc2626;
}

body.web-mode #content {
  padding: 24px 32px 48px;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Detail pages (todos, docs, project dashboard): narrower column for
   readable markdown content on wide screens. Scoped to pages that
   render .todo-meta / .doc-content / .project-dashboard so list pages
   stay at the full 1280px width. */

body.web-mode #content.content--detail {
  max-width: 820px;
}

body.web-mode .page-header {
  margin-bottom: 20px;
}

body.web-mode .page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: #111827;
}

body.web-mode .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 20px;
  text-align: center;
}

body.web-mode .empty-state-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

/* ---------- Login view (no sidebar) ---------- */

body.web-mode.login-view #app-shell {
  grid-template-columns: 1fr;
}

body.web-mode.login-view #sidebar {
  display: none;
}

body.web-mode.login-view #top-bar {
  display: none;
}

body.web-mode.login-view #content {
  padding: 60px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

body.web-mode.login-view .login-page {
  width: 100%;
  max-width: 360px;
}

/* ---------- Responsive: tablet / mobile ---------- */

@media (max-width: 1024px) {
  body.web-mode #content {
    padding: 20px 24px 40px;
  }
}

@media (max-width: 768px) {
  body.web-mode #app-shell {
    grid-template-columns: 1fr;
  }

  body.web-mode #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 240px;
    height: 100vh;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.1);
  }

  body.web-mode.sidebar-open #sidebar {
    transform: translateX(0);
  }

  body.web-mode .sidebar-toggle {
    display: inline-block;
  }

  body.web-mode #content {
    padding: 16px 16px 40px;
  }
}