/* Loopin Japanese minimal BookStack visual system. */
:root {
    --font-body: "Noto Sans TC", "Hiragino Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Roboto", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    --color-primary: #6E89B5;
    --color-primary-dark: #3D5A8A;
    --color-primary-light: rgba(110, 137, 181, 0.14);
    --color-link: #3D5A8A;
    --color-tech-accent: #4FB6B0;
    --color-warm-accent: #D98E6B;
    --color-soft-success: #7A9B7E;
    --color-bg: #FAFAF8;
    --color-bg-muted: #F2F1ED;
    --color-surface: rgba(255, 255, 255, 0.78);
    --color-surface-solid: #FFFFFF;
    --color-border: #E4E1DA;
    --color-text: #2B2B2E;
    --color-text-muted: #8B8983;
    --color-page: #6E89B5;
    --color-page-draft: #9B9AC9;
    --color-chapter: #D98E6B;
    --color-book: #4FB6B0;
    --color-bookshelf: #7A9B7E;
    --color-positive: #7A9B7E;
    --color-negative: #A85F5F;
    --color-info: #6E89B5;
    --color-warning: #D98E6B;
    --radius-card: 16px;
    --radius-control: 999px;
    --shadow-minimal: 0 18px 40px -34px rgba(43, 43, 46, 0.28);
    --lp-bg: var(--color-bg);
    --lp-bg2: var(--color-surface-solid);
    --lp-bg3: var(--color-bg-muted);
    --lp-bg4: var(--color-border);
    --lp-border: var(--color-border);
    --lp-border-hover: rgba(110, 137, 181, 0.28);
    --lp-text: var(--color-text);
    --lp-text2: var(--color-text-muted);
    --lp-text3: rgba(139, 137, 131, 0.82);
    --lp-accent: var(--color-primary);
    --lp-radius-l: var(--radius-card);
    --lp-radius: 14px;
    --lp-radius-s: 12px;
    --lp-radius-xs: 10px;
    --lp-trans: 300ms ease;
}

:root.dark-mode {
    --color-primary: #8EA6CC;
    --color-primary-dark: #AABCDD;
    --color-primary-light: rgba(142, 166, 204, 0.16);
    --color-link: #AABCDD;
    --color-tech-accent: #7FCAC5;
    --color-warm-accent: #E0A878;
    --color-soft-success: #8FAE93;
    --color-bg: #0E1116;
    --color-bg-muted: #151920;
    --color-surface: rgba(21, 25, 32, 0.78);
    --color-surface-solid: #151920;
    --color-border: #262A30;
    --color-text: #EDEAE4;
    --color-text-muted: #A8A49C;
    --color-positive: #8FAE93;
    --color-negative: #D48A8A;
    --color-warning: #E0A878;
    --shadow-minimal: 0 18px 40px -30px rgba(0, 0, 0, 0.65);
    --lp-bg: var(--color-bg);
    --lp-bg2: var(--color-surface-solid);
    --lp-bg3: var(--color-bg-muted);
    --lp-bg4: var(--color-border);
    --lp-border: var(--color-border);
    --lp-border-hover: rgba(142, 166, 204, 0.30);
    --lp-text: var(--color-text);
    --lp-text2: var(--color-text-muted);
    --lp-text3: rgba(168, 164, 156, 0.82);
    --lp-accent: var(--color-primary);
}

html,
html.dark-mode {
    background-color: var(--color-bg);
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.8;
    letter-spacing: 0.01em;
}

body:not(.flexbox)::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image:
        linear-gradient(rgba(43, 43, 46, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(43, 43, 46, 0.035) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.75), transparent 70%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.75), transparent 70%);
}

html.dark-mode body:not(.flexbox)::before {
    background-image:
        linear-gradient(rgba(237, 234, 228, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(237, 234, 228, 0.035) 1px, transparent 1px);
}

h1,
h2,
h3,
h4,
h5,
h6,
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6 {
    color: var(--color-text);
    font-weight: 500;
    letter-spacing: 0.04em;
}

h1 { font-size: 2.75em; }
h2 { font-size: 2.15em; }
h3 { font-size: 1.65em; }

a {
    transition: color 300ms ease, background-color 300ms ease, border-color 300ms ease, opacity 300ms ease;
}

a:hover {
    color: var(--color-primary);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

hr,
html.dark-mode hr {
    background: var(--color-border);
}

pre,
code,
span.code,
.code-base {
    background-color: var(--color-bg-muted);
    border-color: var(--color-border);
    border-radius: 12px;
}

html.dark-mode pre,
html.dark-mode code,
html.dark-mode span.code,
html.dark-mode .code-base {
    background-color: #171B22;
    border-color: var(--color-border);
}

blockquote {
    background-color: rgba(110, 137, 181, 0.08);
    border-inline-start-color: var(--color-primary);
    border-radius: var(--radius-card);
}

html.dark-mode blockquote {
    background-color: rgba(142, 166, 204, 0.10);
}

header {
    background-color: rgba(250, 250, 248, 0.82);
    border-bottom-color: var(--color-border);
    color: var(--color-text);
    box-shadow: none;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

html.dark-mode header {
    background-color: rgba(14, 17, 22, 0.86);
    border-bottom-color: var(--color-border);
}

header .links a,
header .user-name,
header .logo,
header .logo-text,
header .mobile-menu-toggle {
    color: var(--color-text);
    fill: currentColor;
}

header .links a,
header .user-name,
header .logo {
    border-radius: var(--radius-control);
}

header .links a:hover,
header .user-name:hover,
header .logo:hover {
    background-color: rgba(110, 137, 181, 0.12);
    color: var(--color-primary-dark);
}

html.dark-mode header .links a:hover,
html.dark-mode header .user-name:hover,
html.dark-mode header .logo:hover {
    background-color: rgba(142, 166, 204, 0.14);
}

/* 外部連結（新分頁開啟）的箭頭提示圖示 */
header .links a .ext-link-icon {
    font-size: 11px;
    margin-left: 3px;
    opacity: 0.55;
}

/* 訪客導覽列的「登入系統」按鈕，樣式對齊首頁 nav-cta 圓角按鈕 */
header .links a.loopin-nav-cta {
    font-size: 13px;
    padding: 9px 22px;
    border: 1px solid var(--color-text);
    border-radius: var(--radius-control);
    letter-spacing: 0.08em;
    white-space: nowrap;
}

header .links a.loopin-nav-cta:hover {
    background-color: var(--color-text);
    color: var(--color-bg);
}

header .search-box input {
    background-color: rgba(255, 255, 255, 0.68);
    border-color: var(--color-border);
    color: var(--color-text);
    border-radius: var(--radius-control);
}

html.dark-mode header .search-box input {
    background-color: rgba(21, 25, 32, 0.82);
    border-color: var(--color-border);
    color: var(--color-text);
}

header .search-box input::placeholder,
#header-search-box-button {
    color: var(--color-text-muted);
}

.global-search-suggestions,
.dropdown-menu,
.popup-body,
.card,
.grid-card,
.content-wrap.card,
.page-editor-page-area,
.floating-toolbox,
.content-comment-window,
.pointer,
.notification,
.sub-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-minimal);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.content-wrap.card {
    padding: 32px 48px;
}

.card,
.grid-card {
    overflow: hidden;
}

.card-title,
.entity-list-item-name,
.list-heading {
    color: var(--color-text);
    font-weight: 500;
}

.card-footer-link,
button.card-footer-link {
    border-color: var(--color-border);
    border-radius: 0 0 var(--radius-card) var(--radius-card);
}

.card-footer-link:hover,
button.card-footer-link:hover,
.entity-list-item:hover,
.book-tree .sidebar-page-list .entity-list-item.selected,
.book-tree .sidebar-page-list .entity-list-item:hover,
.chapter-contents-toggle:hover {
    background-color: rgba(110, 137, 181, 0.10);
}

html.dark-mode .card-footer-link:hover,
html.dark-mode button.card-footer-link:hover,
html.dark-mode .entity-list-item:hover,
html.dark-mode .book-tree .sidebar-page-list .entity-list-item.selected,
html.dark-mode .book-tree .sidebar-page-list .entity-list-item:hover,
html.dark-mode .chapter-contents-toggle:hover {
    background-color: rgba(142, 166, 204, 0.12);
}

.button {
    border-radius: var(--radius-control);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #FFF;
    padding: 0.52rem 1.2rem;
    letter-spacing: 0.04em;
    transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease, opacity 300ms ease;
}

.button:hover,
.button:focus,
.button:active {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #FFF;
    box-shadow: none;
    filter: none;
}

.button.outline {
    background-color: transparent;
    color: var(--color-primary-dark);
    border-color: var(--color-border);
}

html.dark-mode .button.outline {
    color: var(--color-primary);
    border-color: var(--color-border);
}

.button.outline:hover,
.button.outline:focus,
.button.outline:active {
    background-color: rgba(110, 137, 181, 0.10);
    color: var(--color-primary-dark);
    border-color: currentColor;
    box-shadow: none;
}

html.dark-mode .button.outline:hover,
html.dark-mode .button.outline:focus,
html.dark-mode .button.outline:active {
    background-color: rgba(142, 166, 204, 0.12);
    color: var(--color-primary);
}

.text-button {
    color: var(--color-link);
    text-underline-offset: 0.25em;
}

.text-button:hover,
.text-button:focus,
.text-link:hover,
.text-link-hover:hover {
    color: var(--color-primary-dark) !important;
    text-decoration: underline;
}

.icon-button:hover {
    background-color: rgba(110, 137, 181, 0.10);
    border-color: var(--color-border);
    border-radius: var(--radius-control);
}

html.dark-mode .icon-button:hover {
    background-color: rgba(142, 166, 204, 0.12);
}

.input-base,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="date"],
input[type="search"],
input[type="url"],
input[type="color"],
input[type="password"],
select,
textarea {
    background-color: rgba(255, 255, 255, 0.86);
    border-color: var(--color-border);
    color: var(--color-text);
    border-radius: 12px;
    min-height: 42px;
}

html.dark-mode .input-base,
html.dark-mode input[type="text"],
html.dark-mode input[type="number"],
html.dark-mode input[type="email"],
html.dark-mode input[type="date"],
html.dark-mode input[type="search"],
html.dark-mode input[type="url"],
html.dark-mode input[type="color"],
html.dark-mode input[type="password"],
html.dark-mode select,
html.dark-mode textarea {
    background-color: rgba(21, 25, 32, 0.92);
    border-color: var(--color-border);
    color: var(--color-text);
}

.input-base:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--color-primary);
    outline: 1px solid var(--color-primary);
    outline-offset: 1px;
}

label,
.text-muted,
p.small,
span.small,
.text-small {
    color: var(--color-text-muted) !important;
}

.tag-item,
.api-method,
.chapter-contents-toggle,
.dropzone-landing-area,
.dropzone-file-item,
.entity-selector,
.sort-box::before,
.page-save-mobile-button {
    border-radius: var(--radius-card);
}

.tag-item {
    border-color: var(--color-border);
    background: var(--color-surface);
}

.page-content {
    max-width: 820px;
    color: var(--color-text);
    font-size: 15.5px;
    line-height: 1.85;
}

.page-content p,
.page-content ul,
.page-content ol,
.page-content table,
.page-content blockquote,
.page-content pre {
    margin-bottom: 1.55em;
}

.page-content h1,
.page-content h2,
.page-content h3 {
    margin-top: 1.35em;
    margin-bottom: 0.55em;
}

.page-content table {
    border-color: var(--color-border);
    border-radius: 12px;
    overflow: hidden;
}

.page-content td,
.page-content th {
    border-color: var(--color-border);
    padding: 10px 12px;
}

.page-content thead {
    background-color: var(--color-bg-muted);
}

html.dark-mode .page-content thead {
    background-color: #171B22;
}

.page-content details {
    border-color: var(--color-border);
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
}

.page-content details > summary {
    background-color: var(--color-bg-muted);
    border-radius: calc(var(--radius-card) - 1px);
    font-weight: 500;
}

html.dark-mode .page-content details > summary {
    background-color: #171B22;
}

.callout {
    border-inline-start-width: 2px;
    border-radius: var(--radius-card);
}

.callout.info {
    border-color: var(--color-primary);
    background-color: rgba(110, 137, 181, 0.10);
    color: var(--color-text);
}

html.dark-mode .callout.info {
    background-color: rgba(142, 166, 204, 0.12);
    color: var(--color-text);
}

.callout.success {
    border-color: var(--color-soft-success);
    background-color: rgba(122, 155, 126, 0.11);
    color: var(--color-text);
}

html.dark-mode .callout.success {
    background-color: rgba(143, 174, 147, 0.12);
    color: var(--color-text);
}

.callout.warning {
    border-color: var(--color-warm-accent);
    background-color: rgba(217, 142, 107, 0.12);
    color: var(--color-text);
}

html.dark-mode .callout.warning {
    background-color: rgba(224, 168, 120, 0.12);
    color: var(--color-text);
}

.callout.danger {
    border-color: var(--color-negative);
    background-color: rgba(168, 95, 95, 0.11);
    color: var(--color-text);
}

html.dark-mode .callout.danger {
    background-color: rgba(212, 138, 138, 0.12);
    color: var(--color-text);
}

table.table tr:hover {
    background-color: rgba(110, 137, 181, 0.08);
}

html.dark-mode table.table tr:hover {
    background-color: rgba(142, 166, 204, 0.10);
}

.sidebar-page-nav::after {
    background-color: var(--color-border);
    width: 1px;
}

.sidebar-page-nav .sidebar-page-nav-bullet {
    box-shadow: 0 0 0 6px var(--color-bg);
}

.page-editor .edit-area,
.page-editor-page-area {
    border-radius: var(--radius-card);
}

.editor-toolbar {
    background-color: var(--color-surface-solid);
    border-color: var(--color-border);
}

html.dark-mode .editor-toolbar {
    background-color: #151920;
    border-color: var(--color-border);
}

.editor-toolbar .buttons button:hover,
.floating-toolbox .tabs-inner > button:hover,
.floating-toolbox.open .tabs-inner > button.active {
    background-color: rgba(110, 137, 181, 0.10);
}

html.dark-mode .editor-toolbar .buttons button:hover,
html.dark-mode .floating-toolbox .tabs-inner > button:hover,
html.dark-mode .floating-toolbox.open .tabs-inner > button.active {
    background-color: rgba(142, 166, 204, 0.12);
}

.popup-header,
.popup-footer,
.content-comment-window-actions {
    background-color: var(--color-primary);
}

html.dark-mode .popup-header,
html.dark-mode .popup-footer,
html.dark-mode .content-comment-window-actions {
    background-color: #26364E;
}

.notification:not(.showing),
.notification:has(> span:empty) {
    display: none !important;
}

/*
 * Compatibility layer for the legacy Loopin theme.
 * public/css/loopin-theme.css uses many !important rules, so these targeted
 * overrides make native BookStack screens follow this visual system too.
 */
html,
body {
    background-color: var(--color-bg) !important;
    color: var(--color-text) !important;
    font-family: var(--font-body) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.card-title,
.entity-list-item h4.entity-list-item-name,
.entity-list-item h5.entity-list-item-name {
    color: var(--color-text) !important;
    fill: currentColor !important;
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
}

h5,
.tri-layout-left h5,
.tri-layout-right h5 {
    color: var(--color-text-muted) !important;
    font-size: 12px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

.text-muted,
.text-muted *,
.entity-item-snippet,
.entity-item-snippet *,
.book-content .text-muted,
.description-content,
small,
.text-small {
    color: var(--color-text-muted) !important;
    fill: currentColor !important;
}

body.tri-layout,
body.tri-layout #content,
body.tri-layout .tri-layout-container,
.tri-layout-left,
.tri-layout-right,
.tri-layout-middle {
    background: var(--color-bg) !important;
}

.tri-layout-left-contents,
.tri-layout-right-contents,
.tri-layout-middle-contents {
    background: transparent !important;
}

header#header,
header#header.primary-background {
    background: rgba(250, 250, 248, 0.86) !important;
    border-bottom: 1px solid var(--color-border) !important;
    box-shadow: none !important;
    color: var(--color-text) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

html.dark-mode header#header,
html.dark-mode header#header.primary-background {
    background: rgba(14, 17, 22, 0.88) !important;
}

header#header a,
header#header button,
header#header .logo,
header#header .logo-text,
header#header .user-name {
    color: var(--color-text) !important;
    fill: currentColor !important;
}

header#header .search-box input {
    background-color: rgba(255, 255, 255, 0.72) !important;
    border-color: var(--color-border) !important;
    border-radius: var(--radius-control) !important;
    color: var(--color-text) !important;
}

html.dark-mode header#header .search-box input {
    background-color: rgba(21, 25, 32, 0.84) !important;
}

.content-wrap {
    background: transparent !important;
}

.card,
.content-wrap.card,
.grid-card,
.global-search-suggestions.card,
.dropdown-container ul,
.dropdown-menu,
.sub-card,
.pointer,
.notification {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: var(--shadow-minimal) !important;
    color: var(--color-text) !important;
    transform: none !important;
}

.card:hover,
.grid-card:hover {
    border-color: rgba(110, 137, 181, 0.30) !important;
    transform: none !important;
}

.content-wrap.card {
    padding: 32px 48px !important;
}

.breadcrumbs,
.breadcrumbs .breadcrumb-inner {
    background: transparent !important;
}

.breadcrumbs .icon-list-item,
.breadcrumbs a,
.breadcrumbs span,
.breadcrumbs svg {
    color: var(--color-text-muted) !important;
    fill: currentColor !important;
}

.breadcrumbs .icon-list-item {
    border: 1px solid transparent !important;
    border-radius: var(--radius-control) !important;
    padding: 6px 12px !important;
}

.breadcrumbs .icon-list-item:hover {
    background: var(--color-primary-light) !important;
    border-color: rgba(110, 137, 181, 0.22) !important;
    color: var(--color-primary-dark) !important;
}

body.tri-layout .tri-layout-left-contents > *,
body.tri-layout .tri-layout-right-contents > * {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: var(--shadow-minimal) !important;
    padding: 16px !important;
}

body.tri-layout .tri-layout-left-contents > script,
body.tri-layout .tri-layout-right-contents > script {
    display: none !important;
}

.icon-list .icon-list-item,
.blended-links .entity-meta-item,
.book-tree .sidebar-page-list .entity-list-item {
    color: var(--color-text-muted) !important;
    fill: currentColor !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    padding: 8px 10px !important;
    transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease !important;
}

.icon-list .icon-list-item:hover,
.blended-links a.entity-meta-item:hover,
.book-tree .sidebar-page-list .entity-list-item:hover,
.book-tree .sidebar-page-list .entity-list-item.selected {
    background: var(--color-primary-light) !important;
    border-color: rgba(110, 137, 181, 0.22) !important;
    color: var(--color-primary-dark) !important;
    fill: currentColor !important;
}

.icon-list .icon-list-item span,
.icon-list .icon-list-item svg,
.entity-list-item .icon,
.entity-list-item .icon svg {
    color: inherit !important;
    fill: currentColor !important;
}

.entity-list-item {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 14px !important;
    color: var(--color-text) !important;
    text-decoration: none !important;
}

.entity-list-item:hover {
    background: var(--color-primary-light) !important;
    border-color: rgba(110, 137, 181, 0.22) !important;
}

.entity-list-item-image {
    border-radius: 12px !important;
}

.book-content .entity-list.book-contents {
    display: grid !important;
    gap: 14px !important;
    margin-top: 28px !important;
}

.book-content .entity-list.book-contents > .entity-list-item,
.book-content .entity-list.book-contents > .chapter-expansion {
    background: rgba(255, 255, 255, 0.64) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 16px 18px !important;
}

html.dark-mode .book-content .entity-list.book-contents > .entity-list-item,
html.dark-mode .book-content .entity-list.book-contents > .chapter-expansion {
    background: rgba(21, 25, 32, 0.74) !important;
}

.book-content .entity-list.book-contents > .entity-list-item:hover {
    background: var(--color-primary-light) !important;
    border-color: rgba(110, 137, 181, 0.28) !important;
}

.book-content .entity-list-item-name {
    font-size: 1rem !important;
    margin: 0 0 4px !important;
}

.book-content .entity-item-snippet p {
    margin-bottom: 0 !important;
}

.book-content > .text-muted {
    border-inline-start: 2px solid var(--color-border) !important;
    margin-top: 4px !important;
    padding-inline-start: 14px !important;
}

.chapter-contents-toggle {
    background: transparent !important;
    border-radius: var(--radius-control) !important;
    color: var(--color-text-muted) !important;
    padding: 4px 10px !important;
}

.chapter-contents-toggle:hover {
    background: var(--color-primary-light) !important;
    color: var(--color-primary-dark) !important;
}

hr,
hr.primary-background {
    background: var(--color-border) !important;
    border: none !important;
    height: 1px !important;
}

@media screen and (max-width: 600px) {
    body {
        font-size: 14px;
    }

    .content-wrap.card {
        padding: 16px !important;
        border-radius: 12px !important;
    }

    h1 { font-size: 2.2em; }
    h2 { font-size: 1.75em; }
}