/*
 * This is a manifest file that'll be compiled into application.css.
 */

/* === Color scheme variables === */
:root {
  --bg: #ffffff;
  --bg-sub: #f5f5f5;
  --bg-sub2: #fafafa;
  --bg-overlay: rgba(255,255,255,0.85);
  --bg-overlay-opaque: rgba(255,255,255,0.95);
  --fg: #333333;
  --fg-2: #555555;
  --fg-3: #666666;
  --fg-4: #888888;
  --fg-5: #999999;
  --bd: #cccccc;
  --bd-2: #dddddd;
  --bd-3: #eeeeee;
  --bd-kbd: #bbbbbb;
  --btn-bg: #333333;
  --btn-fg: #ffffff;
  --btn-hover: #555555;
}

html { scroll-behavior: smooth; }

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

a,
a:visited { color: inherit; }

article a,
article a:visited { color: revert; }

body {
  font-family: monospace;
  max-width: var(--content-max-width, 1000px);
  margin: 0 auto;
  padding: 0 1rem;
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
}
body[data-content-width="narrow"] { --content-max-width: 800px; }
body[data-content-width="medium"] { --content-max-width: 1000px; }
body[data-content-width="wide"]   { --content-max-width: 1200px; }

/* Headings */
h1, h2, h3 {
  font-weight: normal;
  margin-top: 0;
}
article h1, article h2, article h3 {
  font-weight: bold;
  margin-top: 1.5rem;
}

/* Page header: title + action links */
.page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.page-header h1 { margin-bottom: 0; }
.page-header-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
  font-size: 0.9em;
  white-space: nowrap;
}

/* Navigation */
header nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--bd);
  margin-bottom: 1rem;
}

.nav-right { display: flex; align-items: center; gap: 0.75rem; }

/* ログアウト button_to をリンクと同じ見た目に */
header nav form { display: inline; }
header nav form button {
  background: none;
  border: none;
  padding: 0;
  margin-right: 0.5rem;
  color: var(--fg);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}

main { padding-bottom: 2rem; }

/* Flash messages */
.notice, .alert {
  padding: 0.4rem 0.8rem;
  margin-bottom: 1rem;
  border-left: 3px solid;
}
.notice { border-color: green; color: #2a6e2a; }
.alert  { border-color: red;   color: #8b0000; }

/* Forms */
input[type=text],
input[type=email],
input[type=password],
textarea,
select {
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--bd);
  font: inherit;
  background: var(--bg);
  color: var(--fg);
}

input[type=submit],
button[type=submit] {
  padding: 0.4rem 1rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: none;
  font: inherit;
  cursor: pointer;
}

input[type=submit]:hover,
button[type=submit]:hover { background: var(--btn-hover); }

/* Search form: 入力欄とボタンを横並びに */
.search-form {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  align-items: center;
}

.search-form > input[type=text] { width: auto; flex: 1; }

/* Note metadata (tags + encryption badge) */
.note-meta { margin-bottom: 0.5rem; color: var(--fg-3); font-size: 0.9em; }

/* Encrypt option details */
details { margin: 0.5rem 0 0.75rem; }
details summary { cursor: pointer; color: var(--fg-4); font-size: 0.9em; }
details summary:hover { color: var(--fg); }
details > div { margin-top: 0.5rem; }

/* Notes 2-column layout */
.notes-layout {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 1.5rem;
  align-items: start;
}

.notes-sidebar h2 {
  font-size: 0.9em;
  margin-top: 0;
  border-bottom: 1px solid var(--bd-2);
  padding-bottom: 0.3rem;
}

@media (max-width: 600px) {
  .notes-layout { grid-template-columns: 1fr; }
}

/* Sort links */
.sort-links { font-size: 0.85em; color: var(--fg-4); margin-bottom: 0.5rem; }
.sort-links a { color: var(--fg-4); }
.sort-links a.sort-current { color: var(--fg); font-weight: bold; text-decoration: none; pointer-events: none; }

/* Note list */
ul { padding-left: 1.2rem; }
ol { padding-left: 1.5rem; }
li { margin-bottom: 0.3rem; }
li small { color: var(--fg-3); }

/* Note content */
article { line-height: 1.8; }
article h1, article h2, article h3 { margin-top: 1.5rem; }
article pre { background: var(--bg-sub); padding: 0.8rem; overflow-x: auto; }
article code { background: var(--bg-sub); padding: 0.1rem 0.3rem; }
article pre code { background: none; padding: 0; }
article blockquote { border-left: 3px solid var(--bd); margin-left: 0; padding-left: 1rem; color: var(--fg-2); }
article img { max-width: 100%; height: auto; }
article hr { border: none; border-top: 1px solid var(--bd-2); margin: 1.5rem 0; }

/* Markdown tables */
article table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
  font-size: 0.9em;
}
article th,
article td {
  border: 1px solid var(--bd-2);
  padding: 0.45rem 0.75rem;
  text-align: left;
  vertical-align: top;
}
article th {
  background: var(--bg-sub);
  font-weight: bold;
  white-space: nowrap;
}
article tr:nth-child(even) td { background: var(--bg-sub2); }
@media (max-width: 600px) {
  article table { display: block; overflow-x: auto; }
}

/* GFM task list checkboxes */
article li:has(> input.task-list-item-checkbox) { list-style: none; }
article input.task-list-item-checkbox {
  margin: 0 0.3em 0.15em -1.4em;
  vertical-align: middle;
  cursor: pointer;
}

/* Footer */
footer { margin-top: 2rem; padding-top: 0.5rem; border-top: 1px solid var(--bd-3); }
footer small { color: var(--fg-5); }

/* CodeMirror editor */
.cm-editor { border: 1px solid var(--bd); }
.cm-editor.cm-focused { outline: none; border-color: var(--fg-2); }
.cm-selectionBackground { background: #b3d4ff !important; }
.cm-focused .cm-selectionBackground { background: #3d6db5 !important; }

/* 集中モード */
div[data-controller="editor"] { position: relative; }

.focus-mode-btn {
  position: absolute;
  top: 0.4rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  padding: 0.15rem 0.5rem;
  background: var(--bg-overlay);
  border: 1px solid var(--bd);
  color: var(--fg-5);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  line-height: 1;
}
.focus-mode-btn:hover { color: var(--fg); border-color: var(--fg-2); }

.wrap-toggle-btn {
  position: absolute;
  top: 0.4rem;
  right: 3.2rem;
  z-index: 10;
  padding: 0.1rem 0.4rem;
  background: var(--bg-overlay);
  border: 1px solid var(--bd);
  color: var(--fg-5);
  font: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  line-height: 1;
}
.wrap-toggle-btn:hover { color: var(--fg); border-color: var(--fg-2); }

.vim-toggle-btn {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  z-index: 10;
  padding: 0.1rem 0.4rem;
  background: var(--bg-overlay);
  border: 1px solid var(--bd);
  color: var(--fg-5);
  font: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  line-height: 1;
}
.vim-toggle-btn:hover { color: var(--fg); border-color: var(--fg-2); }

div[data-controller="editor"].focus-mode {
  position: fixed !important;
  inset: 0;
  z-index: 1000;
  background: var(--bg);
  padding: 0.5rem;
}

div[data-controller="editor"].focus-mode .cm-editor { border: none; }

/* 集中モード中は保存・キャンセルボタンをビューポート下部に固定 */
div[data-controller="editor"].focus-mode ~ .form-actions {
  position: fixed;
  bottom: 0.75rem;
  left: 0.5rem;
  z-index: 1001;
  background: var(--bg);
}


/* iOS フォーカス時の自動ズーム抑止（16px 未満だとズームされるため） */
@media (hover: none) and (pointer: coarse) {
  input[type=text],
  input[type=email],
  input[type=password],
  textarea,
  select {
    font-size: 16px;
  }

  .cm-content { font-size: 16px !important; }

  .notes-main ol li {
    margin-bottom: 0;
    border-bottom: 1px solid var(--bd-3);
  }
  .notes-main ol li a:first-of-type {
    display: block;
    padding: 0.6rem 0;
  }

  .tag-list > li {
    margin-bottom: 0;
    border-bottom: 1px solid var(--bd-3);
  }
  .tag-list > li > a:first-of-type {
    display: block;
    padding: 0.5rem 0;
  }

  .share-links-sidebar-list li {
    margin-bottom: 0;
    border-bottom: 1px solid var(--bd-3);
  }
  .share-links-sidebar-list li a:first-of-type {
    display: block;
    padding: 0.5rem 0 0.25rem;
  }
  .share-links-sidebar-list li a.share-link-expiry {
    padding: 0 0 0.5rem;
  }

  .settings-nav li {
    margin-bottom: 0;
    border-bottom: 1px solid var(--bd-3);
  }
  .settings-nav li a,
  .settings-nav li form button {
    display: block;
    padding: 0.6rem 0;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-decoration: underline;
  }

  .data-table td:last-child a,
  .data-table td:last-child button {
    display: inline-block;
    padding: 0.4rem 0.6rem;
    margin: 0.1rem 0;
  }
}

/* Vim keybinding hints */
kbd {
  display: inline-block;
  padding: 0.05rem 0.3rem;
  border: 1px solid var(--bd-kbd);
  border-radius: 3px;
  background: var(--bg-sub);
  font: inherit;
  font-size: 0.75em;
  color: var(--fg-4);
  line-height: 1.4;
  vertical-align: middle;
}

kbd.vim-hint { display: none; margin-left: 0.3rem; }
body.vim-hints-active kbd.vim-hint { display: inline-block; }

/* Search input with hint overlay */
.hint-group { position: relative; flex: 1; }
.hint-group input { width: 100%; }
.hint-group kbd {
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0;
}

/* Log list */
.log-list { list-style: none; padding: 0; margin: 0; }
.log-list > li { border-bottom: 1px solid var(--bd-3); }
.log-list > li:last-child { border-bottom: none; }
.log-list summary {
  cursor: pointer;
  padding: 0.5rem 0;
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
}
.log-list summary::-webkit-details-marker { display: none; }
.log-list summary::marker { content: ""; }
.log-date { white-space: nowrap; color: var(--fg-3); font-size: 0.9em; flex-shrink: 0; }
.log-sha { color: var(--fg-4); font-size: 0.85em; flex-shrink: 0; }
.log-message { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-current { font-size: 0.85em; color: var(--fg-5); flex-shrink: 0; }
.log-detail { padding: 0.3rem 0 0.75rem 1.2rem; }
.log-actions { margin-bottom: 0.5rem; }

/* Data tables (logs, api tokens, etc.) */
.data-table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
  font-size: 0.9em;
}
.data-table th,
.data-table td {
  border: 1px solid var(--bd-2);
  padding: 0.45rem 0.75rem;
  text-align: left;
  vertical-align: top;
}
.data-table th {
  background: var(--bg-sub);
  font-weight: bold;
  white-space: nowrap;
}
.data-table tr:nth-child(even) td { background: var(--bg-sub2); }
@media (max-width: 600px) {
  .data-table { display: block; overflow-x: auto; }
}

/* Issued API token display */
.token-issued {
  background: var(--bg-sub);
  border-left: 3px solid var(--fg-2);
  padding: 0.6rem 0.8rem;
  margin-bottom: 1rem;
}
.token-issued code {
  display: block;
  margin-top: 0.3rem;
  word-break: break-all;
  font-size: 0.9em;
}

/* Diff */
.diff-wrap-control { margin-top: 0.5rem; }
.diff-wrap-cb { display: none; }
.diff-wrap-toggle { font-size: 0.8em; color: var(--fg-3); cursor: pointer; display: inline-block; margin-bottom: 0.3rem; border: 1px solid var(--bd); padding: 0.1rem 0.5rem; }
.diff-wrap-cb:checked + .diff-wrap-toggle { background: var(--bg-sub2); border-color: var(--fg-4); color: var(--fg); }
pre.diff { background: var(--bg-sub); padding: 0.8rem; overflow-x: auto; line-height: 1.4; }
pre.diff span { display: block; white-space: pre; }
.diff-wrap-cb:checked ~ pre.diff span { white-space: pre-wrap; word-break: break-any; }
pre.diff .diff-add  { background: #e6ffec; color: #1a7f37; border-left: 3px solid #2ea043; padding-left: 0.5rem; }
pre.diff .diff-del  { background: #ffebe9; color: #cf222e; border-left: 3px solid #f85149; padding-left: 0.5rem; }
pre.diff .diff-hunk { color: var(--fg-4); }
pre.diff .diff-file { font-weight: bold; }

/* Share links */
.share-links-section { margin-top: 1.5rem; }
.share-links-section > summary { color: var(--fg-4); font-size: 0.9em; cursor: pointer; }
.share-links-section > summary:hover { color: var(--fg); }
.share-links-body { margin-top: 0.75rem; }
.share-link-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.share-link-item { padding: 0.5rem 0; border-bottom: 1px solid var(--bd-3); }
.share-link-item:last-child { border-bottom: none; }
.share-link-expired { opacity: 0.5; }
.share-link-url { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.share-link-url code { font-size: 0.85em; word-break: break-all; flex: 1; }
.share-link-copy-btn {
  background: none; border: 1px solid var(--bd); padding: 0.1rem 0.5rem;
  font: inherit; font-size: 0.8em; color: var(--fg-4); cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.share-link-copy-btn:hover { border-color: var(--fg-4); color: var(--fg); }
.share-link-meta { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.25rem; font-size: 0.85em; color: var(--fg-3); }
.share-link-delete-btn {
  background: none; border: 1px solid var(--bd); padding: 0.1rem 0.5rem;
  font: inherit; font-size: 0.8em; color: var(--fg-4); cursor: pointer;
}
.share-link-delete-btn:hover { border-color: var(--fg-4); color: var(--fg); }
.share-link-empty { color: var(--fg-5); font-size: 0.9em; margin: 0 0 0.75rem; }
.share-link-form-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.share-link-form-row select,
.share-link-form-row input[type="text"] { width: auto; }
@media (max-width: 640px) {
  .share-link-form-row { flex-direction: column; align-items: flex-start; }
  .share-link-form-row select,
  .share-link-form-row input[type="text"],
  .share-link-form-row input[type="submit"] { width: 100%; box-sizing: border-box; }
}
.shared-note-expires { font-size: 0.85em; color: var(--fg-4); }

/* Share links sidebar */
.share-links-sidebar-list { padding-left: 0; list-style: none; }
.share-links-sidebar-list li { margin-bottom: 0.4rem; font-size: 0.9em; }
.share-link-expiry { display: block; color: var(--fg-4); font-size: 0.85em; }
.sidebar-empty { color: var(--fg-5); font-size: 0.9em; }

/* UI mode: symbol */
body.symbol-ui [data-symbol] { font-size: 0; letter-spacing: 0; text-decoration: none; color: var(--fg-4); }
body.symbol-ui [data-symbol]:hover { color: var(--fg); }
body.symbol-ui [data-symbol]::after {
  content: attr(data-symbol);
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border: 1px solid currentColor;
  vertical-align: middle;
}

/* UI mode: minimal */
body.minimal-ui .page-header-actions,
body.minimal-ui .nav-back,
body.minimal-ui .form-actions { display: none; }
body.minimal-ui [data-minimal-keep-actions] .form-actions { display: block; }
body.minimal-ui .search-form input[type=submit] { display: none; }

/* Note preview dialog */
dialog[data-note-preview-target="dialog"] {
  position: fixed;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--bd);
  padding: 1rem 1.5rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
  margin: 0;
  z-index: 1000;
}
.note-lock { opacity: 0.7; }
.preview-title {
  font-weight: bold;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--bd-2);
}

@media (pointer: coarse) {
  dialog[data-note-preview-target="dialog"] { display: none !important; }
}

/* Pagination (pagy) */
nav.pagy {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

nav.pagy a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--bd);
  text-decoration: none;
  color: var(--fg);
  line-height: 1;
}

nav.pagy a:hover:not([aria-disabled="true"]):not([aria-current="page"]) {
  border-color: var(--fg-2);
  background: var(--bg-sub);
}

nav.pagy a[aria-current="page"] {
  border-color: var(--fg);
  background: var(--fg);
  color: var(--bg);
  pointer-events: none;
}

nav.pagy a[aria-disabled="true"] {
  color: var(--fg-5);
  pointer-events: none;
}

nav.pagy a[role="separator"] {
  border-color: transparent;
  color: var(--fg-4);
  min-width: auto;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}

@media (hover: none) and (pointer: coarse) {
  nav.pagy a {
    min-width: 2.6rem;
    padding: 0.55rem 0.6rem;
  }
}

/* Vim key buffer indicator */
.vim-key-buffer {
  position: fixed;
  bottom: 0.75rem;
  right: max(1rem, calc((100vw - var(--content-max-width, 1000px)) / 2));
  font-family: monospace;
  font-size: 0.9em;
  color: var(--fg);
  background: var(--bg-overlay-opaque);
  border: 1px solid var(--bd);
  padding: 0.15rem 0.5rem;
  display: none;
  z-index: 9999;
}
.vim-key-buffer.active { display: block; }

/* ===== Dark mode ===== */
html.dark-mode {
  --bg: #1e1e1e;
  --bg-sub: #2a2a2a;
  --bg-sub2: #252525;
  --bg-overlay: rgba(30,30,30,0.9);
  --bg-overlay-opaque: rgba(30,30,30,0.95);
  --fg: #d4d4d4;
  --fg-2: #aaaaaa;
  --fg-3: #999999;
  --fg-4: #777777;
  --fg-5: #555555;
  --bd: #444444;
  --bd-2: #383838;
  --bd-3: #2e2e2e;
  --bd-kbd: #555555;
  --btn-bg: #505050;
  --btn-fg: #ffffff;
  --btn-hover: #707070;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  html:not(.light-mode) {
    --bg: #1e1e1e;
    --bg-sub: #2a2a2a;
    --bg-sub2: #252525;
    --bg-overlay: rgba(30,30,30,0.9);
    --bg-overlay-opaque: rgba(30,30,30,0.95);
    --fg: #d4d4d4;
    --fg-2: #aaaaaa;
    --fg-3: #999999;
    --fg-4: #777777;
    --fg-5: #555555;
    --bd: #444444;
    --bd-2: #383838;
    --bd-3: #2e2e2e;
    --bd-kbd: #555555;
    --btn-bg: #505050;
    --btn-fg: #ffffff;
    --btn-hover: #707070;
    color-scheme: dark;
  }
}