/* ========================================================
   NoteFlow — app.css
   Design tokens + layout + mobile UX
   ======================================================== */

:root {
  --color-primary:        #01696f;
  --color-primary-hover:  #0c4e54;
  --color-bg:             #f7f6f2;
  --color-surface:        #f9f8f5;
  --color-border:         #d4d1ca;
  --color-text:           #28251d;
  --color-text-muted:     #7a7974;
  --color-sidebar-w:      260px;
  --color-mobile-hdr:     52px;
  --color-mobile-ftr:     56px;
  --radius-md:            0.5rem;
  --radius-lg:            0.75rem;
  --transition:           180ms cubic-bezier(0.16,1,0.3,1);
  --font-body:            'Inter', system-ui, sans-serif;
}

[data-bs-theme="dark"] {
  --color-bg:       #171614;
  --color-surface:  #1c1b19;
  --color-border:   #393836;
  --color-text:     #cdccca;
  --color-text-muted: #797876;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  overflow: hidden; /* Prevent body scroll — app handles its own scroll */
}

/* ---------- Auth page ---------- */
.auth-page { background: var(--color-bg); }
.auth-card  { border-radius: var(--radius-lg); border: 1px solid var(--color-border); }

/* ---------- App layout ---------- */
.app-layout {
  display: flex;
  height: 100dvh;
  overflow: hidden;
}

/* ---------- Desktop sidebar ---------- */
.desktop-sidebar {
  width: var(--color-sidebar-w);
  min-width: var(--color-sidebar-w);
  background: var(--color-surface);
  border-color: var(--color-border) !important;
  height: 100dvh;
  overflow: hidden;
}

.desktop-note-item {
  color: var(--color-text);
  border-radius: var(--radius-md);
  margin: 2px 8px;
  transition: background var(--transition);
  text-decoration: none;
}
.desktop-note-item:hover { background: oklch(from var(--color-primary) l c h / 0.08); }
.desktop-note-item.active { background: oklch(from var(--color-primary) l c h / 0.14); color: var(--color-primary); }

/* ---------- Main content ---------- */
.app-main {
  flex: 1;
  min-width: 0;
  height: 100dvh;
  overflow: hidden;
  background: var(--color-bg);
}

/* ---------- Mobile header ---------- */
.mobile-header {
  height: var(--color-mobile-hdr);
  background: var(--color-surface);
  border-color: var(--color-border) !important;
  flex-shrink: 0;
}

.mobile-tabs {
  display: flex;
  gap: 4px;
  overflow: hidden;
}
.mobile-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-md);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
  max-width: 120px;
  transition: background var(--transition), color var(--transition);
}
.mobile-tab.active {
  background: oklch(from var(--color-primary) l c h / 0.12);
  color: var(--color-primary);
  font-weight: 600;
}

/* ---------- Mobile footer ---------- */
.mobile-footer {
  height: var(--color-mobile-ftr);
  background: var(--color-surface);
  border-color: var(--color-border) !important;
  flex-shrink: 0;
  /* Safe area for iOS home indicator */
  padding-bottom: max(env(safe-area-inset-bottom), 8px);
}

/* ---------- Note area ---------- */
.note-area {
  overflow: hidden;
  flex: 1;
}

.note-toolbar {
  flex-shrink: 0;
  background: var(--color-surface);
  border-color: var(--color-border) !important;
}

.note-title-input {
  font-weight: 600;
  border: none;
  background: transparent;
  box-shadow: none;
  max-width: 280px;
}
.note-title-input:focus { background: var(--color-bg); }

.note-editor {
  width: 100%;
  border: none;
  resize: none;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  outline: none;
}

.todo-area {
  background: var(--color-bg);
}

.todo-item .todo-text {
  padding: 2px 6px;
  font-size: 0.95rem;
}
.todo-item input[type=checkbox]:checked + .todo-text {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

.note-statusbar {
  flex-shrink: 0;
  border-top: 1px solid var(--color-border);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  background: var(--color-surface);
}

/* ---------- Empty state ---------- */
.empty-state { color: var(--color-text-muted); }

/* ---------- Mobile slide-in sidebar ---------- */
.sidebar-overlay {
  position: fixed; inset: 0; z-index: 1040;
  background: rgba(0,0,0,.4);
  opacity: 0; pointer-events: none;
  transition: opacity var(--transition);
}
.sidebar-overlay.visible { opacity: 1; pointer-events: auto; }

.sidebar {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 85vw; max-width: 340px;
  z-index: 1050;
  background: var(--color-surface);
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.16,1,0.3,1);
  display: flex; flex-direction: column;
  box-shadow: -4px 0 24px rgba(0,0,0,.15);
}
.sidebar.open { transform: translateX(0); }

.sidebar-item {
  color: var(--color-text);
  text-decoration: none;
  transition: background var(--transition);
  border-radius: var(--radius-md);
  margin: 2px 8px;
}
.sidebar-item:hover { background: oklch(from var(--color-primary) l c h / 0.08); }
.sidebar-item.active { background: oklch(from var(--color-primary) l c h / 0.14); color: var(--color-primary); }

.sidebar-list { flex: 1; overflow-y: auto; }

/* ---------- Badges ---------- */
.badge-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ---------- Avatar ---------- */
.avatar-circle {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 700;
  flex-shrink: 0;
  text-transform: uppercase;
}

/* ---------- Bootstrap overrides ---------- */
.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-primary:hover { background-color: var(--color-primary-hover); border-color: var(--color-primary-hover); }

/* ---------- Swipe hint arrow (mobile) ---------- */
.swipe-hint {
  position: fixed; right: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  opacity: .4;
  pointer-events: none;
  font-size: 24px;
  animation: swipe-pulse 2s ease-in-out infinite;
}
@keyframes swipe-pulse { 0%,100%{opacity:.4;transform:translateY(-50%)} 50%{opacity:.7;transform:translateY(-50%) translateX(-4px)} }

@media (min-width: 992px) {
  .swipe-hint { display: none; }
  body { overflow: auto; }
}

/* ---------- Responsive: Note area height ---------- */
.note-area {
  height: calc(100dvh - var(--color-mobile-hdr) - var(--color-mobile-ftr));
}
@media (min-width: 992px) {
  .note-area { height: 100dvh; }
}