/* ===== CSS VARIABLES ===== */
:root {
  --bg: #ffffff;
  --bg-secondary: #f7f7f5;
  --bg-hover: #f1f1ef;
  --bg-active: #e9e9e7;
  --border: #e9e9e7;
  --text: #37352f;
  --text-secondary: #787774;
  --text-tertiary: #aaa8a4;
  --accent: #2383e2;
  --accent-hover: #1a6abf;
  --sidebar-width: 260px;
  --header-height: 48px;
  --radius: 6px;
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.06);
  --shadow-lg: 0 4px 24px rgba(0,0,0,.12);
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
[data-theme="dark"] {
  --bg: #191919; --bg-secondary: #252525; --bg-hover: #2f2f2f; --bg-active: #373737;
  --border: #383838; --text: #e6e6e4; --text-secondary: #9b9a97; --text-tertiary: #5a5a58;
  --accent: #4a9eff; --accent-hover: #2f8de8;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; display: flex; overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; font-size: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }
.hidden { display: none !important; }

/* LAYOUT */
.app-layout { display: flex; width: 100%; height: 100vh; overflow: hidden; }

/* SIDEBAR */
.sidebar { width: var(--sidebar-width); min-width: var(--sidebar-width); height: 100vh; background: var(--bg-secondary); border-right: 1px solid var(--border); display: flex; flex-direction: column; transition: width .2s ease, min-width .2s ease; overflow: hidden; flex-shrink: 0; }
.sidebar.collapsed { width: 0; min-width: 0; }
.sidebar-inner { width: var(--sidebar-width); display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.sidebar-header { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-weight: 600; font-size: .875rem; border-bottom: 1px solid var(--border); min-height: var(--header-height); }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 8px 0; }
.nav-section-title { padding: 6px 14px 2px; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); }
.nav-item { display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--radius); margin: 0 6px; font-size: .875rem; color: var(--text-secondary); transition: background .12s, color .12s; cursor: pointer; white-space: nowrap; overflow: hidden; }
.nav-item:hover { background: var(--bg-hover); color: var(--text); }
.nav-item.active { background: var(--bg-active); color: var(--text); font-weight: 500; }
.nav-item .icon { font-size: .9rem; flex-shrink: 0; width: 20px; text-align: center; }
.nav-item .label { overflow: hidden; text-overflow: ellipsis; }
.sidebar-footer { border-top: 1px solid var(--border); padding: 8px 0; }

/* AVATAR */
.avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.avatar-initials { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: white; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; flex-shrink: 0; }
.avatar-sm { width: 22px; height: 22px; }
.avatar-initials.avatar-sm { font-size: .6rem; }

/* MAIN */
.main-content { flex: 1; display: flex; flex-direction: column; height: 100vh; overflow: hidden; min-width: 0; }
.topbar { height: var(--header-height); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 16px; gap: 12px; flex-shrink: 0; background: var(--bg); }
.topbar-toggle { width: 28px; height: 28px; border-radius: var(--radius); border: none; background: transparent; color: var(--text-secondary); display: flex; align-items: center; justify-content: center; transition: background .12s, color .12s; font-size: 1rem; }
.topbar-toggle:hover { background: var(--bg-hover); color: var(--text); }
.topbar-title { font-size: .9rem; font-weight: 500; flex: 1; }
.topbar-actions { display: flex; align-items: center; gap: 6px; }

/* BUTTONS */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius); border: none; font-size: .825rem; font-weight: 500; transition: background .12s, color .12s; cursor: pointer; white-space: nowrap; }
.btn-primary { background: var(--accent); color: white; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: var(--bg-hover); color: var(--text); }
.btn-secondary:hover { background: var(--bg-active); }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--bg-hover); color: var(--text); }
.btn-danger { background: #fee2e2; color: #dc2626; }
.btn-danger:hover { background: #fecaca; }
.btn-sm { padding: 4px 8px; font-size: .775rem; }
.btn-icon { padding: 6px; width: 30px; height: 30px; justify-content: center; }

/* PAGE */
.page-content { flex: 1; overflow: auto; padding: 32px 48px; }

/* DASHBOARD */
.dashboard-hero { margin-bottom: 32px; }
.dashboard-hero h1 { font-size: 1.75rem; font-weight: 700; margin-bottom: 4px; }
.dashboard-hero p { color: var(--text-secondary); font-size: .9rem; }
.projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.project-card { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 20px; cursor: pointer; transition: box-shadow .15s, border-color .15s; display: flex; flex-direction: column; gap: 10px; }
.project-card:hover { box-shadow: var(--shadow); border-color: #d0d0ce; }
.project-card-icon { font-size: 1.75rem; }
.project-card-name { font-size: 1rem; font-weight: 600; }
.project-card-desc { font-size: .825rem; color: var(--text-secondary); line-height: 1.4; }
.project-card-meta { font-size: .75rem; color: var(--text-tertiary); margin-top: auto; }
.project-card-new { border: 2px dashed var(--border); align-items: center; justify-content: center; color: var(--text-tertiary); font-size: .875rem; }
.project-card-new:hover { border-color: var(--accent); color: var(--accent); }

/* BOARD */
.board-wrapper { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.board-toolbar { padding: 10px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.board-search { display: flex; align-items: center; gap: 6px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: 5px 10px; font-size: .825rem; color: var(--text-secondary); }
.board-search input { background: none; border: none; outline: none; color: var(--text); width: 180px; }
.board-columns { flex: 1; display: flex; gap: 12px; padding: 16px; overflow-x: auto; align-items: flex-start; }
.kanban-column { width: 280px; min-width: 280px; background: var(--bg-secondary); border-radius: 10px; display: flex; flex-direction: column; max-height: calc(100vh - 120px); }
.column-header { display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px; }
.column-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.column-name { font-size: .825rem; font-weight: 600; flex: 1; }
.column-count { font-size: .72rem; color: var(--text-tertiary); background: var(--bg-active); padding: 1px 6px; border-radius: 10px; }
.column-actions { display: flex; gap: 2px; }
.column-actions button { width: 24px; height: 24px; border-radius: 4px; border: none; background: transparent; color: var(--text-tertiary); display: flex; align-items: center; justify-content: center; font-size: .8rem; transition: background .1s; }
.column-actions button:hover { background: var(--bg-active); color: var(--text); }
.column-tasks { flex: 1; overflow-y: auto; padding: 0 8px 8px; display: flex; flex-direction: column; gap: 6px; min-height: 40px; transition: background .12s; }
.column-tasks.drag-over { background: rgba(35,131,226,.06); border-radius: 6px; }
.column-add-task { padding: 6px 12px 10px; }
.add-task-btn { width: 100%; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: var(--radius); border: none; background: transparent; color: var(--text-tertiary); font-size: .825rem; transition: background .12s, color .12s; text-align: left; }
.add-task-btn:hover { background: var(--bg-hover); color: var(--text); }

/* TASK CARD */
.task-card { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; cursor: grab; transition: box-shadow .12s, border-color .12s; display: flex; flex-direction: column; gap: 6px; }
.task-card:hover { box-shadow: var(--shadow); border-color: #d0d0ce; }
.task-card.dragging { opacity: .45; cursor: grabbing; }
.kanban-column.dragging-col { opacity: .4; }
.kanban-column.col-drag-over { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 10px; }
.column-header[draggable]:active { cursor: grabbing; }
.task-card-labels { display: flex; gap: 4px; flex-wrap: wrap; }
.task-label { padding: 2px 7px; border-radius: 10px; font-size: .7rem; font-weight: 500; color: white; }
.task-card-title { font-size: .85rem; font-weight: 500; line-height: 1.4; color: var(--text); }
.task-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.task-meta-item { display: flex; align-items: center; gap: 3px; font-size: .72rem; color: var(--text-secondary); }
.task-meta-item.overdue { color: #dc2626; }
.task-members { display: flex; }
.task-members .avatar-initials { margin-left: -4px; border: 2px solid var(--bg); }
.task-members .avatar-initials:first-child { margin-left: 0; }

/* ADD TASK FORM */
.add-task-form { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.add-task-form input { border: none; outline: none; background: none; font-size: .875rem; color: var(--text); width: 100%; }
.add-task-form-actions { display: flex; gap: 6px; }

/* TASK DETAIL */
.page-content.task-detail-page { padding: 0; display: flex; flex-direction: column; }
.task-detail-container { display: flex; flex: 1; overflow: hidden; }
.task-detail-main { flex: 1; padding: 40px 48px; overflow-y: auto; }
.task-detail-side { width: 240px; border-left: 1px solid var(--border); padding: 20px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; background: var(--bg-secondary); }
.task-title-input { font-size: 1.5rem; font-weight: 700; border: none; outline: none; background: none; color: var(--text); width: 100%; line-height: 1.3; margin-bottom: 16px; resize: none; font-family: var(--font); }
.task-desc-input { width: 100%; border: none; outline: none; background: none; color: var(--text); font-size: .9rem; line-height: 1.6; resize: none; min-height: 200px; font-family: var(--font); }
.task-desc-input::placeholder { color: var(--text-tertiary); }
.detail-section { display: flex; flex-direction: column; gap: 6px; }
.detail-label { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); }
.detail-value { font-size: .825rem; color: var(--text); }

/* ACTIVITY */
.activity-list { display: flex; flex-direction: column; gap: 12px; }
.activity-item { display: flex; gap: 10px; align-items: flex-start; }
.activity-content { flex: 1; }
.activity-text { font-size: .825rem; line-height: 1.4; }
.activity-time { font-size: .72rem; color: var(--text-tertiary); margin-top: 2px; }

/* SECTION HEADING */
.section-heading { font-size:.825rem;font-weight:600;margin-bottom:12px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em; }

/* COMMENTS */
.comments-section { margin-top:32px;border-top:1px solid var(--border);padding-top:24px; }
.comments-list { display:flex;flex-direction:column;gap:12px;margin-bottom:20px; }
.comment-item { display:flex;gap:10px;align-items:flex-start; }
.comment-body { flex:1;background:var(--bg-secondary);border-radius:8px;padding:10px 12px; }
.comment-header { display:flex;align-items:center;gap:8px;margin-bottom:4px; }
.comment-author { font-size:.825rem; }
.comment-time { font-size:.72rem;color:var(--text-tertiary); }
.comment-delete-btn { margin-left:auto;background:none;border:none;color:var(--text-tertiary);font-size:.75rem;cursor:pointer;padding:2px 5px;border-radius:3px;line-height:1; }
.comment-delete-btn:hover { color:#dc2626;background:#fee2e2; }
.comment-content { font-size:.875rem;line-height:1.55;white-space:pre-wrap;word-break:break-word; }
.mention { color:var(--accent);font-weight:500; }
.comment-form { display:flex;flex-direction:column; }
.comment-input-wrapper { position:relative; }
.comment-input { width:100%;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text);padding:8px 12px;font-size:.875rem;font-family:var(--font);resize:vertical;min-height:68px;outline:none;transition:border-color .12s; }
.comment-input:focus { border-color:var(--accent); }

/* MENTION AUTOCOMPLETE */
.mention-dropdown { position:absolute;left:0;right:0;top:100%;margin-top:4px;background:var(--bg);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow-lg);z-index:200;overflow:hidden; }
.mention-item { display:flex;align-items:center;gap:8px;padding:7px 12px;width:100%;border:none;background:none;cursor:pointer;text-align:left;font-size:.825rem;color:var(--text); }
.mention-item:hover,.mention-item.active { background:var(--bg-hover); }
.mention-name { font-weight:500;flex-shrink:0; }
.mention-email { color:var(--text-tertiary);font-size:.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }

/* NOTIFICATIONS */
.notif-badge { background: #dc2626; color: white; border-radius: 10px; font-size: .65rem; font-weight: 700; padding: 1px 5px; min-width: 16px; text-align: center; }
.notif-item { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; gap: 10px; align-items: flex-start; }
.notif-item.unread { background: rgba(35,131,226,.05); }
.notif-item .notif-text { font-size: .85rem; flex: 1; }
.notif-item .notif-time { font-size: .72rem; color: var(--text-tertiary); white-space: nowrap; }

/* FORMS */
.form-page { max-width: 560px; margin: 0 auto; }
.form-page h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 24px; }
.form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }
.form-label { font-size: .825rem; font-weight: 500; }
.form-input { padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); font-size: .875rem; transition: border-color .12s; outline: none; }
.form-input:focus { border-color: var(--accent); }
.form-textarea { resize: vertical; min-height: 80px; }
.form-actions { display: flex; gap: 8px; margin-top: 20px; }
.form-select { padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); font-size: .875rem; outline: none; }
.form-select:focus { border-color: var(--accent); }

/* LOGIN */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); }
.login-box { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 48px; width: 400px; text-align: center; box-shadow: var(--shadow-lg); }
.login-logo { font-size: 2.5rem; margin-bottom: 16px; }
.login-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 6px; }
.login-subtitle { font-size: .875rem; color: var(--text-secondary); margin-bottom: 32px; }
.btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); font-size: .9rem; font-weight: 500; cursor: pointer; transition: background .12s, box-shadow .12s; }
.btn-google:hover { background: var(--bg-hover); box-shadow: var(--shadow); }
.google-icon { width: 18px; height: 18px; }
.login-error { background: #fee2e2; color: #dc2626; border-radius: var(--radius); padding: 10px 14px; font-size: .825rem; margin-bottom: 16px; text-align: left; }

/* MISC */
.separator { height: 1px; background: var(--border); margin: 4px 0; }
.empty-state { text-align: center; padding: 48px 24px; color: var(--text-secondary); }
.empty-state-icon { font-size: 2.5rem; margin-bottom: 12px; }
.empty-state h3 { font-size: 1rem; font-weight: 600; margin-bottom: 6px; }
.empty-state p { font-size: .825rem; }
.label-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 10px; font-size: .75rem; font-weight: 500; color: white; }
.checkbox-list { display: flex; flex-direction: column; gap: 4px; }
.checkbox-item { display: flex; align-items: center; gap: 8px; font-size: .825rem; padding: 4px 0; cursor: pointer; }
.color-picker-row { display: flex; gap: 6px; flex-wrap: wrap; }
.color-dot { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform .1s; }
.color-dot:hover, .color-dot.selected { transform: scale(1.2); border-color: var(--text); }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }
@media (max-width: 768px) {
  .sidebar { position: fixed; left: 0; top: 0; z-index: 100; }
  .sidebar.collapsed { width: 0; min-width: 0; }
  .page-content { padding: 20px 16px; }
  .board-columns { padding: 12px; }
  .kanban-column { width: 260px; min-width: 260px; }
  .task-detail-side { display: none; }
}