/* ============================================================
   NoteFlow — Note-Taking App
   Styles mirror the portfolio's dark design system.
============================================================ */

/* ── 1. CSS Custom Properties ─────────────────────────────── */
:root {
    --bg-primary:    #0d1117;
    --bg-secondary:  #161b22;
    --bg-card:       #21262d;
    --text-primary:  #e6edf3;
    --text-muted:    #8b949e;
    --accent-cyan:   #06b6d4;
    --accent-blue:   #2563eb;
    --accent-blue-h: #1d4ed8;
    --border:        #30363d;
    --font:          'Inter', sans-serif;
    --radius:        12px;
    --transition:    0.25s ease;
}

/* ── 2. Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    font-family: var(--font);
    background: var(--bg-primary);
    color: var(--text-primary);
    overflow: hidden;
}

/* ── 3. Auth Pages (login / register) ─────────────────────── */
body.auth-page {
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
}

.auth-card {
    background:    var(--bg-card);
    border:        1px solid var(--border);
    border-radius: 16px;
    padding:       2.5rem 2rem;
    width:         100%;
    max-width:     400px;
    text-align:    center;
    box-shadow:    0 20px 60px rgba(0,0,0,0.5);
    margin: 2rem 1rem;
}

.auth-logo {
    font-size:   1.8rem;
    font-weight: 800;
    color:       var(--text-primary);
    margin-bottom: 0.25rem;
}

.auth-logo span { color: var(--accent-cyan); }

.auth-subtitle {
    color:          var(--accent-cyan);
    font-size:      0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom:  1.75rem;
}

.auth-form label {
    display:       block;
    text-align:    left;
    font-size:     0.85rem;
    color:         var(--text-muted);
    margin-bottom: 0.35rem;
    margin-top:    1rem;
}

.auth-form input {
    width:         100%;
    padding:       0.65rem 1rem;
    border:        1px solid var(--border);
    border-radius: var(--radius);
    background:    var(--bg-secondary);
    color:         var(--text-primary);
    font-family:   var(--font);
    font-size:     0.95rem;
    transition:    border-color var(--transition);
}

.auth-form input:focus {
    outline:      none;
    border-color: var(--accent-cyan);
}

.auth-form button[type="submit"] {
    width:         100%;
    margin-top:    1.5rem;
    padding:       0.75rem;
    background:    var(--accent-blue);
    color:         white;
    border:        none;
    border-radius: var(--radius);
    font-family:   var(--font);
    font-size:     1rem;
    font-weight:   600;
    cursor:        pointer;
    transition:    background var(--transition);
}

.auth-form button[type="submit"]:hover { background: var(--accent-blue-h); }
.auth-form button[type="submit"]:disabled { opacity: 0.6; cursor: default; }

.auth-msg {
    display:       none;
    font-size:     0.85rem;
    margin-top:    0.75rem;
    padding:       0.6rem 0.85rem;
    border-radius: 8px;
    text-align:    left;
}

.auth-msg.error   { color: #f87171; background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); }
.auth-msg.success { color: #4ade80; background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.3); }

.auth-footer {
    margin-top:  1.5rem;
    font-size:   0.85rem;
    color:       var(--text-muted);
}

.auth-footer a {
    color:           var(--accent-cyan);
    text-decoration: none;
}

.auth-footer a:hover { text-decoration: underline; }

/* ── 4. App Navbar ─────────────────────────────────────────── */
.app-navbar {
    height:        52px;
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    padding:       0 1.25rem;
    background:    rgba(13,17,23,0.95);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(12px);
    flex-shrink:   0;
    z-index:       10;
}

.nav-brand {
    font-size:   1.1rem;
    font-weight: 800;
    color:       var(--text-primary);
    letter-spacing: -0.5px;
}

.nav-brand span { color: var(--accent-cyan); }

.nav-right {
    display:     flex;
    align-items: center;
    gap:         1rem;
    font-size:   0.85rem;
    color:       var(--text-muted);
}

.btn-logout {
    background:    transparent;
    border:        1px solid var(--border);
    color:         var(--text-muted);
    padding:       0.35rem 0.8rem;
    border-radius: 6px;
    font-family:   var(--font);
    font-size:     0.8rem;
    cursor:        pointer;
    transition:    all var(--transition);
}

.btn-logout:hover {
    border-color: var(--accent-cyan);
    color:        var(--accent-cyan);
}

/* ── 5. Three-Panel App Shell ──────────────────────────────── */
.app-shell {
    display:    flex;
    height:     calc(100vh - 52px);
    overflow:   hidden;
}

/* ── 6. Notebooks Panel (left) ─────────────────────────────── */
.panel-notebooks {
    width:         220px;
    min-width:     220px;
    background:    var(--bg-secondary);
    border-right:  1px solid var(--border);
    display:       flex;
    flex-direction: column;
    position:      relative;
}

/* Search */
.search-wrap {
    padding:       0.75rem;
    border-bottom: 1px solid var(--border);
    position:      relative;
}

#search-input {
    width:         100%;
    padding:       0.5rem 0.75rem;
    background:    var(--bg-primary);
    border:        1px solid var(--border);
    border-radius: 8px;
    color:         var(--text-primary);
    font-family:   var(--font);
    font-size:     0.85rem;
    transition:    border-color var(--transition);
}

#search-input:focus {
    outline:      none;
    border-color: var(--accent-cyan);
}

#search-input::placeholder { color: var(--text-muted); }

/* Search results overlay */
.search-overlay {
    position:    absolute;
    top:         calc(100% + 4px);
    left:        0.75rem;
    right:       0.75rem;
    background:  var(--bg-card);
    border:      1px solid var(--border);
    border-radius: var(--radius);
    z-index:     200;
    max-height:  320px;
    overflow-y:  auto;
    box-shadow:  0 8px 32px rgba(0,0,0,0.5);
}

.search-result {
    padding:       0.65rem 1rem;
    cursor:        pointer;
    border-bottom: 1px solid var(--border);
    transition:    background var(--transition);
}

.search-result:last-child { border-bottom: none; }
.search-result:hover { background: var(--bg-secondary); }

.search-result-title {
    font-size:   0.85rem;
    font-weight: 600;
    color:       var(--text-primary);
}

.search-result-nb {
    font-size:  0.75rem;
    color:      var(--accent-cyan);
    margin-top: 0.15rem;
}

.search-empty {
    padding:    1rem;
    text-align: center;
    font-size:  0.85rem;
    color:      var(--text-muted);
}

/* Notebooks list */
.notebooks-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         0.75rem 0.75rem 0.5rem;
    font-size:       0.75rem;
    font-weight:     700;
    color:           var(--text-muted);
    text-transform:  uppercase;
    letter-spacing:  1.5px;
}

.btn-icon-round {
    width:         24px;
    height:        24px;
    border-radius: 6px;
    border:        1px solid var(--border);
    background:    transparent;
    color:         var(--text-muted);
    font-size:     1rem;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    all var(--transition);
    line-height:   1;
}

.btn-icon-round:hover {
    background:   var(--bg-card);
    color:        var(--accent-cyan);
    border-color: var(--accent-cyan);
}

.notebooks-list {
    list-style:  none;
    padding:     0.25rem 0;
    overflow-y:  auto;
    flex:        1;
}

.notebook-item {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    padding:     0.55rem 0.75rem;
    cursor:      pointer;
    transition:  background var(--transition);
    position:    relative;
}

.notebook-item:hover { background: var(--bg-card); }

.notebook-item.active {
    background:   rgba(6,182,212,0.1);
    border-right: 2px solid var(--accent-cyan);
}

.notebook-item.active .notebook-name { color: var(--accent-cyan); }

.notebook-icon { font-size: 0.85rem; flex-shrink: 0; }

.notebook-name {
    font-size:     0.875rem;
    flex:          1;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    color:         var(--text-primary);
}

.notebook-actions { display: none; gap: 0.25rem; }
.notebook-item:hover .notebook-actions { display: flex; }

.icon-btn {
    background:    none;
    border:        none;
    cursor:        pointer;
    font-size:     0.75rem;
    padding:       2px 4px;
    border-radius: 4px;
    transition:    background var(--transition);
    line-height:   1;
}

.icon-btn:hover { background: var(--border); }

.empty-hint {
    padding:     1rem 0.75rem;
    font-size:   0.8rem;
    color:       var(--text-muted);
    font-style:  italic;
    list-style:  none;
}

/* ── 7. Notes Panel (middle) ───────────────────────────────── */
.panel-notes {
    width:         260px;
    min-width:     260px;
    background:    var(--bg-primary);
    border-right:  1px solid var(--border);
    display:       flex;
    flex-direction: column;
}

.notes-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         0 1rem;
    border-bottom:   1px solid var(--border);
    min-height:      52px;
    gap:             0.5rem;
}

#active-notebook-name {
    font-size:     0.9rem;
    font-weight:   700;
    color:         var(--text-primary);
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.btn-new-note {
    width:         28px;
    height:        28px;
    flex-shrink:   0;
    border-radius: 6px;
    border:        1px solid var(--border);
    background:    transparent;
    color:         var(--text-muted);
    font-size:     1.2rem;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    all var(--transition);
    line-height:   1;
}

.btn-new-note:hover:not(:disabled) {
    border-color: var(--accent-cyan);
    color:        var(--accent-cyan);
}

.btn-new-note:disabled { opacity: 0.3; cursor: default; }

.notes-list {
    list-style:  none;
    overflow-y:  auto;
    flex:        1;
}

.note-item {
    padding:       0.85rem 1rem;
    border-bottom: 1px solid var(--border);
    cursor:        pointer;
    transition:    background var(--transition);
}

.note-item:hover { background: var(--bg-secondary); }

.note-item.active {
    background:   rgba(6,182,212,0.08);
    border-left:  3px solid var(--accent-cyan);
    padding-left: calc(1rem - 3px);
}

.note-title {
    font-size:     0.875rem;
    font-weight:   600;
    color:         var(--text-primary);
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.note-meta {
    font-size:  0.73rem;
    color:      var(--text-muted);
    margin:     0.2rem 0;
}

.note-snippet {
    font-size:     0.78rem;
    color:         var(--text-muted);
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

/* ── 8. Editor Panel (right) ───────────────────────────────── */
.panel-editor {
    flex:           1;
    display:        flex;
    flex-direction: column;
    background:     var(--bg-primary);
    overflow:       hidden;
    min-width:      0;
}

.editor-placeholder {
    flex:            1;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             0.75rem;
    color:           var(--text-muted);
}

.editor-placeholder p { font-size: 0.95rem; }
.editor-placeholder small { font-size: 0.8rem; opacity: 0.6; }

#editor-content {
    display:        flex;
    flex-direction: column;
    height:         100%;
}

.editor-header {
    display:       flex;
    align-items:   center;
    gap:           1rem;
    padding:       0 1.5rem;
    border-bottom: 1px solid var(--border);
    min-height:    52px;
    flex-wrap:     wrap;
}

#note-title {
    flex:        1;
    font-size:   1.25rem;
    font-weight: 700;
    background:  transparent;
    border:      none;
    color:       var(--text-primary);
    font-family: var(--font);
    padding:     0.5rem 0;
    min-width:   0;
}

#note-title:focus { outline: none; }
#note-title::placeholder { color: var(--text-muted); }

.editor-meta {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
    flex-shrink: 0;
}

.save-status {
    font-size:  0.78rem;
    min-width:  70px;
    text-align: right;
}

.save-status.saved   { color: #4ade80; }
.save-status.saving  { color: var(--accent-cyan); }
.save-status.unsaved { color: var(--text-muted); }
.save-status.error   { color: #f87171; }

.editor-toolbar {
    display:       flex;
    align-items:   center;
    gap:           0.4rem;
    padding:       0.5rem 1.5rem;
    border-bottom: 1px solid var(--border);
    flex-wrap:     wrap;
}

.toolbar-btn {
    padding:       0.3rem 0.65rem;
    background:    transparent;
    border:        1px solid var(--border);
    border-radius: 6px;
    color:         var(--text-muted);
    font-family:   var(--font);
    font-size:     0.8rem;
    font-weight:   600;
    cursor:        pointer;
    transition:    all var(--transition);
}

.toolbar-btn:hover {
    background: var(--bg-card);
    color:      var(--text-primary);
}

.toolbar-btn.preview-btn {
    border-color: var(--accent-blue);
    color:        var(--accent-blue);
}

.toolbar-btn.preview-btn:hover,
.toolbar-btn.preview-btn.active {
    background: var(--accent-blue);
    color:      white;
}

.toolbar-btn.danger-btn {
    border-color: #ef4444;
    color:        #ef4444;
}

.toolbar-btn.danger-btn:hover {
    background: #ef4444;
    color:      white;
}

.toolbar-sep {
    width:      1px;
    height:     20px;
    background: var(--border);
    margin:     0 0.2rem;
    flex-shrink: 0;
}

.editor-body {
    flex:           1;
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
}

/* ── Quill dark theme overrides ────────────────────────────── */
#note-editor {
    display:        flex;
    flex-direction: column;
    flex:           1;
    overflow:       hidden;
}

#note-editor .ql-toolbar {
    background:    var(--bg-secondary);
    border-color:  var(--border);
    flex-shrink:   0;
    flex-wrap:     wrap;
}

#note-editor .ql-container {
    border-color: var(--border);
    font-family:  var(--font);
    font-size:    0.95rem;
    flex:         1;
    overflow-y:   auto;
    background:   var(--bg-primary);
}

#note-editor .ql-editor {
    color:       var(--text-primary);
    line-height: 1.9;
    min-height:  100%;
}

#note-editor .ql-editor.ql-blank::before {
    color:      var(--text-muted);
    font-style: normal;
}

#note-editor .ql-stroke { stroke: var(--text-primary) !important; }
#note-editor .ql-fill   { fill:   var(--text-primary) !important; }

#note-editor .ql-picker       { color: var(--text-primary); }
#note-editor .ql-picker-label { color: var(--text-primary); }

#note-editor .ql-picker-options {
    background:   var(--bg-card);
    border-color: var(--border);
}

#note-editor .ql-picker-item { color: var(--text-primary); }

#note-editor .ql-toolbar button:hover .ql-stroke,
#note-editor .ql-toolbar button.ql-active .ql-stroke { stroke: var(--accent-cyan) !important; }

#note-editor .ql-toolbar button:hover .ql-fill,
#note-editor .ql-toolbar button.ql-active .ql-fill   { fill: var(--accent-cyan) !important; }

#note-editor .ql-toolbar button:hover,
#note-editor .ql-toolbar button.ql-active            { color: var(--accent-cyan); }

#note-editor .ql-toolbar .ql-picker-label:hover,
#note-editor .ql-toolbar .ql-picker-label.ql-active  { color: var(--accent-cyan); }

/* ── 9. Notebook Modal ─────────────────────────────────────── */
.modal-overlay {
    position:        fixed;
    inset:           0;
    background:      rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    z-index:         500;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.modal-card {
    background:    var(--bg-card);
    border:        1px solid var(--border);
    border-radius: 16px;
    padding:       2rem;
    width:         100%;
    max-width:     420px;
    box-shadow:    0 24px 60px rgba(0,0,0,0.5);
    margin:        1rem;
}

.modal-card h3 { margin-bottom: 1.25rem; font-size: 1.15rem; }

.modal-input {
    width:         100%;
    padding:       0.65rem 1rem;
    background:    var(--bg-secondary);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    color:         var(--text-primary);
    font-family:   var(--font);
    font-size:     0.9rem;
    margin-bottom: 0.75rem;
    transition:    border-color var(--transition);
}

.modal-input:focus { outline: none; border-color: var(--accent-cyan); }
.modal-input::placeholder { color: var(--text-muted); }

.modal-actions {
    display:         flex;
    gap:             0.75rem;
    justify-content: flex-end;
    margin-top:      0.5rem;
}

/* ── 10. Buttons ───────────────────────────────────────────── */
.btn {
    padding:       0.6rem 1.25rem;
    border-radius: var(--radius);
    font-family:   var(--font);
    font-size:     0.9rem;
    font-weight:   600;
    cursor:        pointer;
    transition:    all var(--transition);
    border:        none;
}

.btn-secondary {
    background: var(--bg-secondary);
    color:      var(--text-muted);
    border:     1px solid var(--border);
}

.btn-secondary:hover { background: var(--bg-card); color: var(--text-primary); }

.btn-primary {
    background: var(--accent-blue);
    color:      white;
}

.btn-primary:hover { background: var(--accent-blue-h); }

/* ── 11. Toast Notifications ───────────────────────────────── */
.toast {
    position:   fixed;
    bottom:     1.5rem;
    right:      1.5rem;
    padding:    0.75rem 1.25rem;
    border-radius: var(--radius);
    font-size:  0.875rem;
    font-weight: 500;
    z-index:    1000;
    opacity:    0;
    transform:  translateY(8px);
    transition: all 0.25s ease;
    max-width:  320px;
}

.toast.show { opacity: 1; transform: translateY(0); }
.toast-success { background: #166534; color: #bbf7d0; border: 1px solid #15803d; }
.toast-error   { background: #7f1d1d; color: #fecaca; border: 1px solid #b91c1c; }
.toast-info    { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border); }

/* ── 12. Scrollbars ────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── 13. Utility ───────────────────────────────────────────── */
.hidden { display: none !important; }