/* DevJournal — dj_app.css
   Aesthetic: editorial-utilitarian · warm dark default · monospaced accents
   Font: 'IBM Plex Sans' body · 'IBM Plex Mono' code/capture
   ─────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

/* ═══════════════════════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES — dark mode (default)
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* Surfaces */
  --c-bg:          #16141a;
  --c-surface:     #1e1c23;
  --c-surface-alt: #26232e;
  --c-overlay:     #2e2b38;

  /* Borders */
  --c-border:      #332f3f;
  --c-border-soft: #262230;

  /* Text */
  --c-text:        #e8e4f0;
  --c-text-muted:  #857f97;
  --c-text-faint:  #4d4860;

  /* Brand / accent */
  --c-primary:     #a78bfa;     /* violet-400 */
  --c-primary-dim: #5b4fcf;
  --c-primary-bg:  #1e1a35;

  /* Semantic */
  --c-danger:      #f87171;
  --c-danger-bg:   #2e1b1b;
  --c-success:     #6ee7b7;
  --c-warning:     #fbbf24;

  /* Tag pill */
  --c-tag-bg:      #26232e;
  --c-tag-text:    #a78bfa;
  --c-tag-border:  #3d3650;

  /* Misc */
  --radius:        6px;
  --radius-sm:     3px;
  --radius-lg:     10px;
  --sidebar-w:     240px;
  --topbar-h:      52px;
  --font-body:     'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:     'IBM Plex Mono', 'Courier New', monospace;
  --shadow-sm:     0 1px 3px rgba(0,0,0,.4);
  --shadow-md:     0 4px 16px rgba(0,0,0,.5);
  --transition:    150ms ease;
}

/* ── Light mode ─────────────────────────────────────────────────────── */
html.light {
  --c-bg:          #f4f2f9;
  --c-surface:     #ffffff;
  --c-surface-alt: #f0eef8;
  --c-overlay:     #e8e5f4;
  --c-border:      #d8d4ea;
  --c-border-soft: #ede9f8;
  --c-text:        #1a1624;
  --c-text-muted:  #6b6480;
  --c-text-faint:  #b0a8c8;
  --c-primary:     #6d4ef0;
  --c-primary-dim: #9b7ef8;
  --c-primary-bg:  #ede9ff;
  --c-danger:      #dc2626;
  --c-danger-bg:   #fff1f1;
  --c-success:     #059669;
  --c-warning:     #d97706;
  --c-tag-bg:      #ede9ff;
  --c-tag-text:    #6d4ef0;
  --c-tag-border:  #c4b5fd;
  --shadow-sm:     0 1px 3px rgba(0,0,0,.08);
  --shadow-md:     0 4px 16px rgba(0,0,0,.12);
}

/* ═══════════════════════════════════════════════════════════════════════
   RESET + BASE
   ═══════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

#app {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

button {
  font-family: var(--font-body);
  cursor: pointer;
  border: none;
  background: none;
}

input, textarea, select {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
input:focus, textarea:focus, select:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-bg);
}

::placeholder { color: var(--c-text-faint); }

mark {
  background: rgba(167, 139, 250, .25);
  color: var(--c-primary);
  border-radius: var(--radius-sm);
  padding: 0 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT — Sidebar + Main
   ═══════════════════════════════════════════════════════════════════════ */
.dj-sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  height: 100vh;
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width var(--transition);
  z-index: 10;
}

.dj-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Top bar ─────────────────────────────────────────────────────────── */
.dj-topbar {
  height: var(--topbar-h);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  flex-shrink: 0;
}

.dj-topbar__logo {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
  color: var(--c-primary);
  letter-spacing: .04em;
  user-select: none;
  white-space: nowrap;
}

.dj-topbar__spacer { flex: 1; }

.dj-topbar__action {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--c-text-muted);
  transition: background var(--transition), color var(--transition);
}
.dj-topbar__action:hover {
  background: var(--c-surface-alt);
  color: var(--c-text);
}
.dj-topbar__action--danger:hover {
  background: var(--c-danger-bg);
  color: var(--c-danger);
}

/* ── Content area ────────────────────────────────────────────────────── */
.dj-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}
.dj-content::-webkit-scrollbar { width: 6px; }
.dj-content::-webkit-scrollbar-track { background: transparent; }
.dj-content::-webkit-scrollbar-thumb {
  background: var(--c-overlay);
  border-radius: 99px;
}

/* ═══════════════════════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════════════════════ */
.dj-sidebar__logo {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
}
.dj-sidebar__logo span {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--c-primary);
  letter-spacing: .06em;
}

.dj-sidebar__section {
  padding: 14px 0 4px;
}

.dj-sidebar__label {
  padding: 0 16px 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}

.dj-sidebar__scroll {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 12px;
}
.dj-sidebar__scroll::-webkit-scrollbar { width: 4px; }
.dj-sidebar__scroll::-webkit-scrollbar-thumb {
  background: var(--c-overlay);
  border-radius: 99px;
}

/* Sidebar nav items */
.dj-nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 16px;
  font-size: 13.5px;
  color: var(--c-text-muted);
  cursor: pointer;
  border-radius: 0;
  transition: background var(--transition), color var(--transition);
  user-select: none;
  border: none;
  width: 100%;
  text-align: left;
  background: none;
}
.dj-nav-item:hover {
  background: var(--c-surface-alt);
  color: var(--c-text);
}
.dj-nav-item.active {
  background: var(--c-primary-bg);
  color: var(--c-primary);
}

/* Project bullet */
.dj-project-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dj-nav-item__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-text-faint);
}

/* Sidebar bottom actions */
.dj-sidebar__footer {
  padding: 10px 12px;
  border-top: 1px solid var(--c-border);
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.dj-sidebar__footer-btn {
  flex: 1;
  padding: 6px;
  font-size: 12px;
  color: var(--c-text-muted);
  border-radius: var(--radius);
  transition: background var(--transition), color var(--transition);
  text-align: center;
}
.dj-sidebar__footer-btn:hover {
  background: var(--c-surface-alt);
  color: var(--c-text);
}

/* ── Add project inline form ─────────────────────────────────────────── */
.dj-project-form {
  padding: 6px 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dj-project-form input {
  padding: 5px 8px;
  font-size: 13px;
  width: 100%;
}
.dj-project-form__row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.dj-project-form__color {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   QUICK CAPTURE
   ═══════════════════════════════════════════════════════════════════════ */
.dj-capture {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 14px 16px 12px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.dj-capture:focus-within {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-bg), var(--shadow-sm);
}

.dj-capture__textarea {
  width: 100%;
  border: none;
  background: transparent;
  resize: none;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-text);
  min-height: 54px;
  max-height: 220px;
  outline: none;
  box-shadow: none;
}
.dj-capture__textarea:focus { box-shadow: none; border-color: transparent; }

.dj-capture__footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--c-border-soft);
}

.dj-capture__hint {
  font-size: 11px;
  color: var(--c-text-faint);
  font-family: var(--font-mono);
}

.dj-capture__project-select {
  font-size: 12px;
  padding: 3px 7px;
  border-radius: var(--radius-sm);
  background: var(--c-surface-alt);
  border-color: var(--c-border);
  color: var(--c-text-muted);
  max-width: 150px;
}

.dj-capture__tags-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
}

.dj-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  transition: background var(--transition), color var(--transition), opacity var(--transition);
  cursor: pointer;
  border: none;
}
.dj-btn--primary {
  background: var(--c-primary);
  color: #fff;
}
.dj-btn--primary:hover { opacity: .88; }
.dj-btn--primary:disabled { opacity: .45; cursor: not-allowed; }
.dj-btn--ghost {
  background: transparent;
  border: 1px solid var(--c-border);
  color: var(--c-text-muted);
}
.dj-btn--ghost:hover { background: var(--c-surface-alt); color: var(--c-text); }
.dj-btn--danger {
  background: var(--c-danger-bg);
  color: var(--c-danger);
  border: 1px solid var(--c-danger);
}
.dj-btn--danger:hover { opacity: .85; }
.dj-btn--sm { padding: 4px 10px; font-size: 12px; }

/* ═══════════════════════════════════════════════════════════════════════
   SEARCH BAR
   ═══════════════════════════════════════════════════════════════════════ */
.dj-searchbar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.dj-searchbar__input-wrap {
  position: relative;
  flex: 1;
  min-width: 180px;
}
.dj-searchbar__icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-text-faint);
  pointer-events: none;
  font-size: 14px;
}
.dj-searchbar__input {
  width: 100%;
  padding: 7px 10px 7px 32px;
  border-radius: var(--radius);
  font-size: 13.5px;
}

.dj-searchbar__select {
  padding: 7px 10px;
  border-radius: var(--radius);
  font-size: 13px;
  background: var(--c-surface);
  color: var(--c-text-muted);
  min-width: 120px;
}

.dj-searchbar__date {
  padding: 6px 10px;
  border-radius: var(--radius);
  font-size: 13px;
}

.dj-searchbar__clear {
  font-size: 12px;
  color: var(--c-text-muted);
  padding: 6px 8px;
  border-radius: var(--radius);
  transition: background var(--transition);
}
.dj-searchbar__clear:hover { background: var(--c-surface-alt); color: var(--c-danger); }

/* ═══════════════════════════════════════════════════════════════════════
   NOTE LIST + NOTE CARD
   ═══════════════════════════════════════════════════════════════════════ */
.dj-day-group { margin-bottom: 28px; }

.dj-day-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--c-text-faint);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dj-day-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--c-border-soft);
}

.dj-note {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 14px 16px 12px;
  margin-bottom: 10px;
  transition: border-color var(--transition), box-shadow var(--transition);
  cursor: pointer;
  position: relative;
}
.dj-note:hover {
  border-color: var(--c-primary-dim);
  box-shadow: var(--shadow-sm);
}
.dj-note.editing {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-bg), var(--shadow-sm);
  cursor: default;
}

.dj-note__body {
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--c-text);
  white-space: pre-wrap;
  word-break: break-word;
}

.dj-note__edit-textarea {
  width: 100%;
  border: none;
  background: transparent;
  resize: none;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--c-text);
  outline: none;
  min-height: 60px;
}
.dj-note__edit-textarea:focus { box-shadow: none; border-color: transparent; }

.dj-note__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.dj-note__time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-text-faint);
}

.dj-note__project-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--c-text-muted);
  background: var(--c-surface-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: 1px 7px;
}

.dj-note__actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity var(--transition);
}
.dj-note:hover .dj-note__actions,
.dj-note.editing .dj-note__actions {
  opacity: 1;
}

.dj-note__action-btn {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  color: var(--c-text-muted);
  transition: background var(--transition), color var(--transition);
}
.dj-note__action-btn:hover { background: var(--c-surface-alt); color: var(--c-text); }
.dj-note__action-btn--danger:hover { background: var(--c-danger-bg); color: var(--c-danger); }

/* ── Tag pill ────────────────────────────────────────────────────────── */
.dj-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--c-tag-bg);
  color: var(--c-tag-text);
  border: 1px solid var(--c-tag-border);
  border-radius: 99px;
  padding: 1px 9px;
  font-size: 11px;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: opacity var(--transition);
  user-select: none;
}
.dj-tag:hover { opacity: .75; }
.dj-tag--active {
  background: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary);
}

/* ═══════════════════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════════════════ */
.dj-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: var(--c-text-faint);
}
.dj-empty__icon {
  font-size: 42px;
  margin-bottom: 14px;
  opacity: .5;
}
.dj-empty__title {
  font-size: 15px;
  font-weight: 500;
  color: var(--c-text-muted);
  margin-bottom: 6px;
}
.dj-empty__sub { font-size: 13px; }

/* ═══════════════════════════════════════════════════════════════════════
   LOGIN VIEW
   ═══════════════════════════════════════════════════════════════════════ */
.dj-login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-bg);
  padding: 20px;
}

.dj-login-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  width: 100%;
  max-width: 380px;
  box-shadow: var(--shadow-md);
}

.dj-login-card__logo {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 500;
  color: var(--c-primary);
  letter-spacing: .06em;
  margin-bottom: 6px;
}

.dj-login-card__sub {
  font-size: 13px;
  color: var(--c-text-muted);
  margin-bottom: 30px;
}

.dj-form-field {
  margin-bottom: 16px;
}
.dj-form-field label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--c-text-muted);
  margin-bottom: 5px;
}
.dj-form-field input {
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius);
  font-size: 14px;
}

.dj-login-card__error {
  background: var(--c-danger-bg);
  color: var(--c-danger);
  border: 1px solid var(--c-danger);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 13px;
  margin-bottom: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════
   MODAL (Change Password / Confirm Delete)
   ═══════════════════════════════════════════════════════════════════════ */
.dj-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
  backdrop-filter: blur(2px);
}

.dj-modal {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 28px 28px 22px;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow-md);
}
.dj-modal__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 18px;
}
.dj-modal__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 18px;
}

/* ═══════════════════════════════════════════════════════════════════════
   LOADER / SPINNER
   ═══════════════════════════════════════════════════════════════════════ */
.dj-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--c-border);
  border-top-color: var(--c-primary);
  border-radius: 50%;
  animation: dj-spin .7s linear infinite;
}
@keyframes dj-spin { to { transform: rotate(360deg); } }

.dj-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  gap: 12px;
  color: var(--c-text-muted);
  font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ═══════════════════════════════════════════════════════════════════════ */
.dj-toasts {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 200;
  pointer-events: none;
}

.dj-toast {
  background: var(--c-overlay);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 10px 16px;
  font-size: 13px;
  box-shadow: var(--shadow-md);
  pointer-events: auto;
  animation: dj-toast-in .2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 300px;
}
.dj-toast--success { border-left: 3px solid var(--c-success); }
.dj-toast--error   { border-left: 3px solid var(--c-danger); }
.dj-toast--info    { border-left: 3px solid var(--c-primary); }

@keyframes dj-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════════
   THEME TOGGLE
   ═══════════════════════════════════════════════════════════════════════ */
.dj-theme-toggle {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  color: var(--c-text-muted);
  font-size: 15px;
  transition: background var(--transition), color var(--transition);
}
.dj-theme-toggle:hover { background: var(--c-surface-alt); color: var(--c-text); }

/* ═══════════════════════════════════════════════════════════════════════
   SCROLLBAR — global
   ═══════════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--c-overlay);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: var(--c-border); }

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  :root { --sidebar-w: 200px; }
  .dj-sidebar { display: none; }
  .dj-sidebar.open { display: flex; position: fixed; height: 100vh; }
  .dj-content { padding: 14px 16px; }
  .dj-topbar { padding: 0 12px; }
}