* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* ===== Responsive: điện thoại / màn hình nhỏ ===== */
.sidebar-overlay { display: none; }

@media (max-width: 860px) {
  /* Sidebar -> ngăn kéo trượt từ trái */
  .app-sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; z-index: 60;
    transform: translateX(-100%); transition: transform .25s ease;
    box-shadow: 0 0 40px rgba(0,0,0,.18);
  }
  .app-sidebar.open { transform: translateX(0); }
  .sidebar-overlay.show { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 55; }
  .menu-btn { display: flex !important; }
  .hide-mobile { display: none !important; }
  .app-header { padding: 0 14px !important; }

  /* Mọi lưới gập về 1 cột */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Trang chia đôi (Hộp thư / Tin nhắn) xếp dọc */
  .split { flex-direction: column !important; height: auto !important; }
  .split-list { width: 100% !important; flex: none !important; border-right: none !important;
                border-bottom: 1px solid #ece8df; }

  /* Giảm padding nội dung cho đỡ chật (trừ trang chia đôi) */
  .app-main main > div:not(.split) { padding-left: 14px !important; padding-right: 14px !important; }
}
body {
  font-family: 'Geist', system-ui, sans-serif;
  background: #faf9f6;
  color: #1c1b18;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { text-decoration: none; color: inherit; }
input { font-family: inherit; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #ded9cf; border-radius: 8px; border: 3px solid #faf9f6; }
::-webkit-scrollbar-thumb:hover { background: #cfc9bc; }

@keyframes orbPulse {
  0%   { box-shadow: 0 0 0 0 rgba(239,108,46,.45); }
  70%  { box-shadow: 0 0 0 6px rgba(239,108,46,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,108,46,0); }
}

/* Hover helpers (thay cho style-hover của Claude Design) */
.nav-btn { transition: background .12s; }
.hov-nav:hover { background: #e9e4d8 !important; }
.hov-btn-orange:hover { background: #e25e22 !important; }
.hov-btn-soft:hover { background: #f2efe7 !important; }
.hov-row:hover { background: #faf8f3 !important; }
.hov-card:hover { border-color: #dcd6c9 !important; }
.hov-card-soft:hover { border-color: #e2ddd1 !important; background: #faf8f3 !important; }
.hov-note:hover { border-color: #ef6c2e !important; color: #ef6c2e !important; }
.hov-light:hover { background: #f7f4ee !important; }

/* Layout switcher trên Dashboard: 3 chế độ điều khiển grid-column của widget */
.bento-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; margin-top: 16px; align-items: start; }
.bento-grid .w-agenda   { grid-column: span 5; }
.bento-grid .w-tasks    { grid-column: span 4; }
.bento-grid .w-inbox    { grid-column: span 3; }
.bento-grid .w-messages { grid-column: span 5; }
.bento-grid .w-docs     { grid-column: span 4; }
.bento-grid .w-activity { grid-column: span 3; }

.bento-grid.mode-columns .w-agenda,
.bento-grid.mode-columns .w-tasks,
.bento-grid.mode-columns .w-inbox,
.bento-grid.mode-columns .w-messages,
.bento-grid.mode-columns .w-docs,
.bento-grid.mode-columns .w-activity { grid-column: span 4; }

.bento-grid.mode-focus .w-agenda { grid-column: span 8; }
.bento-grid.mode-focus .w-tasks  { grid-column: span 4; }
.bento-grid.mode-focus .w-docs   { grid-column: span 12; }
.bento-grid.mode-focus .w-docs .docs-inner { grid-template-columns: repeat(2, 1fr) !important; }
.bento-grid.mode-focus .w-inbox,
.bento-grid.mode-focus .w-messages,
.bento-grid.mode-focus .w-activity { display: none; }

/* Segmented control (layout switcher) */
.seg-btn { border: none; background: transparent; color: #6b6862; font-family: 'Geist', sans-serif; font-size: 12px; font-weight: 600; padding: 6px 13px; border-radius: 7px; cursor: pointer; }
.seg-btn.active { background: #1c1b18; color: #fff; }

@media (max-width: 1000px) {
  .bento-grid .w-agenda, .bento-grid .w-tasks, .bento-grid .w-inbox,
  .bento-grid .w-messages, .bento-grid .w-docs, .bento-grid .w-activity { grid-column: span 12 !important; }
}