html, body { height: 100%; background: #f5f5f5; }
body { min-width: 320px; }
[hidden] { display: none !important; }
.navbar { margin-bottom: 15px; border-radius: 0; }
.navbar-brand { cursor: default; }
.navbar-right { display: flex; align-items: center; }
.status-line { margin-right: 15px; }
.status-line.connected { color: #8fd18f; }
.status-line.loading { color: #f0d98c; }
.status-line .glyphicon { margin-right: 4px; }
.status-line.loading .glyphicon { animation: status-spin .8s linear infinite; }
.auth-menu { position: relative; margin-right: 15px; }
.auth-menu > summary { list-style: none; }
.auth-menu > summary::-webkit-details-marker { display: none; }
.auth-menu > summary .caret { margin-left: 4px; }
.auth-menu[open] > summary { color: #333; background: #e6e6e6; border-color: #adadad; }
.auth-menu[open] > .dropdown-menu { right: 0; left: auto; display: block; min-width: 210px; }
.auth-menu .dropdown-menu > li > button { display: block; width: 100%; padding: 7px 20px; clear: both; border: 0; color: #333; background: transparent; font-weight: normal; line-height: 1.42857143; text-align: left; white-space: nowrap; }
.auth-menu .dropdown-menu > li > button:hover, .auth-menu .dropdown-menu > li > button:focus { color: #262626; background: #f5f5f5; outline: 0; }
.auth-menu .dropdown-menu > li > button .glyphicon { width: 18px; margin-right: 6px; color: #777; }
.auth-menu .dropdown-menu > li > .credential-action.danger, .auth-menu .dropdown-menu > li > .credential-action.danger .glyphicon { color: #a94442; }
.auth-menu .dropdown-menu > li > .logout-action { color: #a94442; }
.auth-menu .dropdown-menu > li > .logout-action .glyphicon { color: #a94442; }

@keyframes status-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .status-line.loading .glyphicon { animation-duration: 1.8s; }
}

.app-container { height: calc(100% - 66px); }
.app-row, .sidebar-column, .editor-column { height: 100%; }
.notes-panel, .editor-panel { height: calc(100% - 5px); margin-bottom: 0; overflow: hidden; }
.notes-panel { display: flex; flex-direction: column; }
.panel-title { line-height: 22px; }
.search-panel { padding: 10px; border-bottom: 1px solid #ddd; }
.folder-tree { max-height: 190px; margin-bottom: 0; overflow-y: auto; border-bottom: 1px solid #bbb; }
.folder-tree .folder-item { margin: 0; padding-top: 7px; padding-bottom: 7px; border-width: 0 0 1px; border-radius: 0; text-align: left; }
.folder-tree .folder-item:last-child { border-bottom: 0; }
.folder-tree .folder-item.disabled { color: #999; cursor: not-allowed; background: #f5f5f5; }
.folder-tree .glyphicon { margin-right: 6px; }
.notes-heading { border-top: 0; }
.note-list { flex: 1; margin-bottom: 0; overflow-y: auto; }
.note-list .list-group-item { margin: 0; border-width: 0 0 1px; border-radius: 0; cursor: pointer; }
.note-list .list-group-item.active { color: #fff; background-color: #337ab7; border-color: #2e6da4; }
.note-title, .note-excerpt { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.note-excerpt { margin-top: 5px; color: #777; font-size: 12px; font-weight: normal; }
.list-group-item.active .note-excerpt { color: #d9edf7; }
.empty-list { padding: 30px 15px; color: #777; text-align: center; }

.welcome { margin-bottom: 0; padding: 15px; border: 1px solid #ddd; background: #fff; }
.welcome .btn { margin-left: 5px; }
.editor-panel { display: flex; flex-direction: column; }
.editor-panel > .panel-heading { min-height: 52px; line-height: 30px; }
.editor-panel > .panel-body { flex: 1; min-height: 0; }
.editor-body { display: flex; flex-direction: column; }
.editor-tabs { flex: 0 0 auto; }
.tab-button { padding: 10px 15px; border: 0; color: #337ab7; background: transparent; }
.nav-tabs > li.active > .tab-button { margin-bottom: -1px; color: #555; background: #fff; border: 1px solid #ddd; border-bottom-color: transparent; border-radius: 4px 4px 0 0; }
.tab-pane-wrap { flex: 1; min-height: 0; padding-top: 15px; }
#edit-pane { display: flex; flex-direction: column; }
.code-editor { position: relative; display: flex; flex: 1; min-height: 260px; overflow: hidden; }
#line-numbers, #content, #wrap-measurer { margin: 0; font: 14px/1.6 Menlo, Monaco, Consolas, monospace; tab-size: 4; }
#line-numbers { flex: 0 0 auto; min-width: 3.5em; padding: 6px 8px; overflow: hidden; border: 1px solid #ccc; border-right: 0; border-radius: 4px 0 0 4px; color: #999; background: #f5f5f5; text-align: right; user-select: none; }
#line-numbers > span { display: block; }
#content { flex: 1; min-width: 0; min-height: 260px; resize: none; border-radius: 0 4px 4px 0; white-space: pre-wrap; overflow-x: hidden; overflow-y: auto; overflow-wrap: anywhere; word-break: break-word; }
#wrap-measurer { position: absolute; top: 0; left: 0; z-index: -1; visibility: hidden; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
#wrap-measurer > span { display: block; }
.markdown-body { overflow-y: auto; line-height: 1.65; word-wrap: break-word; }
.markdown-body h1, .markdown-body h2, .markdown-body h3 { margin-top: 20px; padding-bottom: 8px; border-bottom: 1px solid #eee; }
.markdown-body pre { overflow: auto; }
.markdown-body img { max-width: 100%; height: auto; }
.markdown-body table { width: 100%; margin-bottom: 20px; border-collapse: collapse; }
.markdown-body th, .markdown-body td { padding: 8px; border: 1px solid #ddd; }
.markdown-empty { color: #999; }

.login-dialog { width: min(430px, calc(100% - 30px)); padding: 0; border: 0; background: transparent; }
.login-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.login-dialog .panel { margin: 0; }
.toast { position: fixed; z-index: 1100; right: 20px; bottom: 10px; display: none; min-width: 220px; box-shadow: 0 3px 12px rgba(0,0,0,.2); }
.toast.show { display: block; }

@media (max-width: 767px) {
  .navbar { min-height: 50px; margin-bottom: 8px; }
  .navbar > .container-fluid { display: flex; align-items: center; min-height: 50px; padding-right: 10px; padding-left: 10px; }
  .navbar-header { flex: 1 1 0; min-width: 0; margin: 0 !important; }
  .navbar-header::before, .navbar-header::after, .navbar > .container-fluid::before, .navbar > .container-fluid::after { display: none; }
  .navbar-brand { float: none; display: block; height: auto; padding: 12px 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .navbar-right { flex: 0 0 auto; margin: 0; }
  .navbar-text.status-line { float: none; flex: 0 0 auto; margin: 0; white-space: nowrap; }
  .auth-menu { flex: 0 0 auto; margin: 0 0 0 10px; }
  .auth-menu > summary { min-width: 42px; min-height: 34px; padding: 6px 9px; }
  .auth-menu[open] > .dropdown-menu { position: fixed; top: 48px; right: 8px; left: auto; }
  .app-container { height: auto; padding-right: 8px; padding-left: 8px; }
  .app-row { margin-right: -4px; margin-left: -4px; }
  .sidebar-column, .editor-column { padding-right: 4px; padding-left: 4px; }
  .app-row, .sidebar-column, .editor-column { height: auto; }
  .notes-panel { height: clamp(380px, 58dvh, 500px); min-height: 380px; margin-bottom: 8px; }
  .folder-tree { flex: 0 1 34%; min-height: 84px; max-height: 180px; }
  .note-list { min-height: 150px; -webkit-overflow-scrolling: touch; }
  .folder-tree { -webkit-overflow-scrolling: touch; }
  .editor-panel { height: calc(100vh - 66px); min-height: 520px; }
  .editor-panel { height: calc(100dvh - 66px); }
  .editor-panel > .panel-body { padding: 10px; }
  .toast { right: 8px; bottom: 8px; left: 8px; min-width: 0; }
}

@media (max-width: 374px) {
  .brand-text { display: none; }
}