/* reMarkable Notes — modern theme (dark default, light via body.light) */

:root, body.dark {
  --bg: #101114;
  --bg-grad: radial-gradient(1200px 700px at 15% -10%, #1a2436 0%, #12141a 55%, #101114 100%);
  --panel: #17181d;
  --panel-2: #1f2127;
  --panel-3: #262932;
  --border: #2a2d36;
  --border-soft: #23252d;
  --text: #eceef2;
  --text-dim: #9aa0ad;
  --text-faint: #6b7280;
  --accent: #5b8cff;
  --accent-strong: #6f9cff;
  --accent-soft: rgba(91, 140, 255, .14);
  --accent-glow: rgba(91, 140, 255, .25);
  --logo-a: #5b8cff;
  --logo-b: #7c5bff;
  --green: #47c98b;
  --icon-folder: #f2b04d;
  --shadow: 0 8px 30px rgba(0, 0, 0, .35);
  --on-accent: #0b0c10;
}

body.light {
  --bg: #eef0f4;
  --bg-grad: radial-gradient(1200px 700px at 15% -10%, #e9edf6 0%, #eef0f4 55%, #eef0f4 100%);
  --panel: #ffffff;
  --panel-2: #f1f2f6;
  --panel-3: #e7e9ef;
  --border: #d5d9e1;
  --border-soft: #e4e7ee;
  --text: #1c2029;
  --text-dim: #5b6270;
  --text-faint: #959aa6;
  --accent: #3b72f6;
  --accent-strong: #3568e8;
  --accent-soft: rgba(59, 114, 246, .12);
  --accent-glow: rgba(59, 114, 246, .18);
  --logo-a: #3b72f6;
  --logo-b: #6a5bff;
  --green: #1f9d6a;
  --icon-folder: #d9901c;
  --shadow: 0 8px 24px rgba(30, 40, 70, .12);
  --on-accent: #ffffff;
}

* { box-sizing: border-box; }

body {
  margin: 0; color: var(--text); background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  height: 100vh; display: flex; flex-direction: column; font-size: 14px; line-height: 1.5;
  transition: background .25s, color .25s;
}

header {
  display: flex; align-items: center; gap: 1rem; padding: .8rem 1.2rem;
  background: var(--panel); border-bottom: 1px solid var(--border-soft); flex: 0 0 auto;
}
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 650; letter-spacing: .2px; font-size: 1.02rem; }
.brand .logo {
  width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--logo-a), var(--logo-b)); color: var(--on-accent); font-size: 1rem;
}
.search { position: relative; width: min(340px, 40vw); margin-left: auto; }
.search .icon { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--text-faint); font-size: 1rem; pointer-events: none; }
.search input {
  width: 100%; padding: .5rem 2.1rem .5rem 2.2rem; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--border-soft); color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
#search-clear {
  position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--text-faint); cursor: pointer;
}
.stats { color: var(--text-faint); font-size: .8rem; white-space: nowrap; }
.theme-toggle {
  background: var(--panel-2); border: 1px solid var(--border-soft); color: var(--text-dim);
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer; font-size: 1.05rem;
  display: grid; place-items: center; transition: color .15s, border-color .15s;
}
.theme-toggle:hover { color: var(--text); border-color: var(--accent); }

main { flex: 1 1 auto; display: flex; min-height: 0; background: var(--bg-grad); }

.sidebar {
  width: 300px; flex: 0 0 auto; display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid var(--border-soft);
}
.tree-mode { display: flex; gap: .2rem; padding: .8rem; border-bottom: 1px solid var(--border-soft); }
.seg { position: relative; display: flex; flex: 1; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 10px; padding: .2rem; }
.seg .thumb {
  position: absolute; top: .2rem; bottom: .2rem; width: calc(50% - .2rem);
  background: linear-gradient(135deg, var(--logo-a), var(--logo-b));
  border-radius: 8px; transition: transform .25s cubic-bezier(.2, .7, .3, 1); box-shadow: 0 2px 10px var(--accent-glow);
}
.seg.recent .thumb { transform: translateX(100%); }
.seg button {
  flex: 1; position: relative; z-index: 1; background: none; border: none; color: var(--text-dim);
  padding: .4rem 0; border-radius: 8px; cursor: pointer; font-size: .86rem; font-weight: 550; transition: color .2s;
}
.seg button.active { color: var(--on-accent); }

.tree { flex: 1 1 auto; overflow: auto; padding: .6rem .5rem; }
.tree ul { list-style: none; margin: 0; padding-left: .9rem; }
.tree ul.root { padding-left: 0; }
.tree li { margin: 0; }
.row {
  display: flex; align-items: center; gap: .5rem; padding: .42rem .6rem; border-radius: 9px;
  cursor: pointer; white-space: nowrap; overflow: hidden; color: var(--text-dim); margin: 1px 0;
  transition: background .12s, color .12s;
}
.row:hover { background: var(--panel-2); color: var(--text); }
.row.folder .icon { color: var(--icon-folder); }
.row.notebook .icon { color: var(--accent); }
.row.active { background: var(--accent-soft); color: var(--text); }
.row.active .icon { color: var(--accent-strong); }
.row .icon { font-size: 1.05rem; flex: 0 0 auto; }
.row .label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.row .toggle { width: 14px; text-align: center; color: var(--text-faint); font-size: .8rem; flex: 0 0 auto; }
.row .when { color: var(--text-faint); font-size: .72rem; flex: 0 0 auto; padding-left: .4rem; }
.row.active .when { color: var(--text-dim); }

.content {
  flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 1.2rem 1.6rem;
  display: flex; flex-direction: column;
}
#placeholder { margin: auto; }
.placeholder { color: var(--text-faint); text-align: center; }

.placeholder { color: var(--text-faint); text-align: center; padding-top: 8rem; }
.placeholder .mdi { font-size: 3rem; opacity: .35; display: block; margin: 0 auto .6rem; }
.placeholder p { margin: 0; }

.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.section-head h3 { margin: 0; font-size: 1rem; font-weight: 650; }
.section-head .count { color: var(--text-faint); font-size: .8rem; }

.results { display: flex; flex-direction: column; gap: .55rem; max-width: 760px; }
.result {
  display: flex; gap: .9rem; align-items: flex-start; padding: .8rem .9rem;
  background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius, 12px);
  cursor: pointer; transition: transform .12s, border-color .12s, background .12s;
}
.result:hover { transform: translateY(-1px); border-color: var(--accent); background: var(--panel-2); }
.result > .mdi { font-size: 1.3rem; color: var(--accent); margin-top: .1rem; }
.result .body { min-width: 0; }
.result .title { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.result .title .path { color: var(--text-faint); font-size: .75rem; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge {
  background: var(--accent-soft); color: var(--accent-strong); border: 1px solid var(--accent);
  border-radius: 999px; padding: .05rem .5rem; font-size: .68rem; font-weight: 600; letter-spacing: .3px; flex: 0 0 auto;
}
.result .snippet { margin-top: .35rem; color: var(--text-dim); font-size: .85rem; word-break: break-word; }
.result .snippet b { color: var(--accent-strong); font-weight: 700; }

.detail { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.detail-head {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding-bottom: .9rem;
  border-bottom: 1px solid var(--border-soft); margin-bottom: 1.1rem; flex: 0 0 auto;
}
.detail-head h2 { margin: 0; font-size: 1.35rem; font-weight: 700; }
.detail-meta { color: var(--text-dim); font-size: .85rem; }
.detail-actions { margin-left: auto; display: flex; align-items: center; gap: .4rem; }
.btn, .detail-actions button {
  background: var(--panel-2); color: var(--text-dim); border: 1px solid var(--border-soft);
  padding: .45rem .8rem; border-radius: 9px; cursor: pointer; font-size: .85rem; text-decoration: none;
  transition: background .12s, color .12s, border-color .12s;
  display: inline-flex; align-items: center; gap: .35rem;
}
.btn:hover, .detail-actions button:hover { color: var(--text); border-color: var(--accent); }
.detail-actions button.active { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); }
.detail-actions button.has-note { background: var(--accent-strong); color: var(--on-accent); border-color: var(--accent-strong); }

/* Inline notes panel beside the notebook (no overlay; page stays visible) */
.detail-main { display: flex; gap: 1.2rem; flex: 1 1 auto; min-height: 0; }
.detail-body { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: auto; }

.notes-panel {
  flex: 0 0 0; width: 0; min-width: 0; opacity: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: .6rem; height: 100%;
  border-left: 1px solid var(--border-soft); padding-left: 0; transition: all .25s ease;
}
#detail.notes-open .notes-panel {
  flex: 0 0 360px; width: 360px; opacity: 1; padding-left: 1.2rem;
}
.notes-panel-head { display: flex; align-items: baseline; gap: .6rem; }
.notes-panel-head h3 { margin: 0; font-size: 1rem; font-weight: 650; }
.notes-panel-head .dim { color: var(--text-faint); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notes-panel textarea {
  flex: 1 1 auto; min-height: 40vh; padding: .7rem; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--border-soft); color: var(--text);
  font-family: inherit; line-height: 1.6; resize: none;
}
.notes-panel textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.notes-panel-foot { display: flex; gap: .5rem; }
.notes-panel-foot button {
  flex: 1; background: var(--panel-2); color: var(--text); border: 1px solid var(--border-soft);
  padding: .55rem; border-radius: 9px; cursor: pointer;
}
.notes-panel-foot #notes-save { background: var(--accent-strong); color: var(--on-accent); border-color: var(--accent-strong); font-weight: 600; }

.view.pdf {
  height: 100%; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .6rem; overflow: hidden;
}
.view.pdf canvas { background: #fff; border-radius: 6px; box-shadow: var(--shadow); }
.view.pdf .page-nav { color: var(--text-dim); display: flex; gap: .3rem; align-items: center; flex: 0 0 auto; }
.view.pdf .page-nav button { background: var(--panel-2); border: 1px solid var(--border-soft); color: var(--text); border-radius: 7px; padding: .2rem .5rem; cursor: pointer; }

#md-body { line-height: 1.7; max-width: 800px; }
#md-body h1, #md-body h2 { color: var(--text); }
#md-body code { background: var(--panel-2); padding: .1rem .3rem; border-radius: 5px; }
#md-body pre { background: var(--panel-2); padding: .8rem; border-radius: 10px; overflow: auto; }
#md-body a { color: var(--accent-strong); }
#txt-view {
  white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .85rem; line-height: 1.6; max-width: 800px; color: var(--text-dim);
}

.hidden { display: none !important; }

/* Login page */
.login-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 1rem;
  background: var(--bg-grad);
}
.login-card {
  width: min(360px, 100%); background: var(--panel); border: 1px solid var(--border-soft);
  border-radius: 16px; padding: 2rem 1.8rem; box-shadow: var(--shadow);
}
.login-logo { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.15rem; margin-bottom: 1.6rem; }
.login-logo .logo {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--logo-a), var(--logo-b)); color: var(--on-accent); font-size: 1.15rem;
}
.login-card form { display: flex; flex-direction: column; gap: .9rem; }
.login-field { display: flex; flex-direction: column; gap: .35rem; }
.login-field label { font-size: .8rem; color: var(--text-dim); }
.login-field input {
  background: var(--panel-2); border: 1px solid var(--border-soft); color: var(--text);
  border-radius: 10px; padding: .6rem .8rem; font-size: .95rem; transition: border-color .15s, box-shadow .15s;
}
.login-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.login-submit {
  background: linear-gradient(135deg, var(--logo-a), var(--logo-b)); color: var(--on-accent);
  border: none; border-radius: 10px; padding: .6rem; font-size: .95rem; font-weight: 600; cursor: pointer;
  margin-top: .3rem; transition: filter .15s;
}
.login-submit:hover { filter: brightness(1.08); }
.login-error { color: #ff6b6b; font-size: .82rem; min-height: 1.1rem; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--panel-3); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--border); }