/* ===== Kuriimu Web ===== */

/* Theme: light by default, dark via prefers-color-scheme until the user picks one (data-theme on <html>).
   Dark values follow the desktop ThemeManager. */
:root {
    --bg: #ffffff; --bg-alt: #f0f2f5; --bg-input: #ffffff; --fg: #1b1f23; --fg-muted: #666;
    --border: #ccd; --hover: #eef3fb; --selected: #cfe0fb; --accent: #0b57d0;
    --topbar-bg: #1b1f23; --topbar-fg: #cfe3ff; --menu-bg: #ffffff; --menu-hover: #e6eefc;
    --ok: #1b7f3b; --err: #b00020; --chip: #e8f0fe;
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #1e1e1e; --bg-alt: #252526; --bg-input: #3c3c3c; --fg: #d4d4d4; --fg-muted: #9a9a9a;
        --border: #555; --hover: #2a2d2e; --selected: #094771; --accent: #4da3ff;
        --topbar-bg: #333333; --topbar-fg: #cfe3ff; --menu-bg: #252526; --menu-hover: #094771;
        --ok: #6ccf8a; --err: #ff6b7d; --chip: #33415a;
        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --bg: #1e1e1e; --bg-alt: #252526; --bg-input: #3c3c3c; --fg: #d4d4d4; --fg-muted: #9a9a9a;
    --border: #555; --hover: #2a2d2e; --selected: #094771; --accent: #4da3ff;
    --topbar-bg: #333333; --topbar-fg: #cfe3ff; --menu-bg: #252526; --menu-hover: #094771;
    --ok: #6ccf8a; --err: #ff6b7d; --chip: #33415a;
    color-scheme: dark;
}

body { font-family: system-ui, "Segoe UI", sans-serif; margin: 0; background: var(--bg); color: var(--fg); }
input, select, textarea, button { background: var(--bg-input); color: var(--fg); border: 1px solid var(--border); border-radius: 3px; font: inherit; }
button { padding: .2rem .6rem; cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
button.primary { border-color: var(--accent); }
button.add-btn { background: #2ea04a; border-color: #2ea04a; color: #fff; font-weight: bold; line-height: 1; padding: .2rem .7rem; }
button.add-btn:hover { background: #278f41; }
a { color: var(--accent); }
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--ok); }

.topbar { display: flex; gap: 1rem; align-items: center; padding: .4rem 1rem; background: var(--topbar-bg); color: #fff; }
.topbar a { color: var(--topbar-fg); text-decoration: none; }
.topbar a.active { color: #fff; font-weight: 600; border-bottom: 2px solid #4da3ff; }
.topbar .repo { margin-left: auto; font-size: .85rem; opacity: .85; }
.content { padding: 1rem; }
.content.flush { padding: 0; }
.panel { border: 1px solid var(--border); border-radius: 6px; padding: .75rem 1rem; margin: 1rem 0; }
.err { color: var(--err); }
.ok { color: var(--ok); }
.muted { color: var(--fg-muted); font-size: .9rem; }
.form-grid { display: grid; grid-template-columns: 14rem 1fr; gap: .5rem 1rem; align-items: center; max-width: 42rem; }
.form-grid input[type=text], .form-grid input[type=password], .form-grid select { width: 100%; box-sizing: border-box; }
table.files { border-collapse: collapse; width: 100%; }
table.files td { padding: .2rem .5rem; border-bottom: 1px solid var(--border); }
table.files td.size { text-align: right; color: var(--fg-muted); white-space: nowrap; }
a.dir, button.link { cursor: pointer; background: none; border: 0; color: var(--accent); padding: 0; font: inherit; }
.chip { display: inline-block; font-size: .75rem; padding: 0 .4rem; border-radius: 3px; background: var(--chip); margin-right: .4rem; }
.chip.Added { background: #2e7d4a55; } .chip.Modified { background: #b7950b55; } .chip.Deleted { background: #b0002055; }

/* Menu bar + toolbars */
.menubar { display: flex; gap: 0; background: var(--bg-alt); border-bottom: 1px solid var(--border); padding: 0 .5rem; position: relative; }
.menu { position: relative; }
.menu > button { border: 0; background: none; padding: .35rem .7rem; border-radius: 0; }
.menu > button:hover, .menu.open > button { background: var(--menu-hover); }
.menu-items { position: absolute; top: 100%; left: 0; z-index: 50; min-width: 15rem; background: var(--menu-bg); border: 1px solid var(--border); box-shadow: 0 4px 12px rgba(0,0,0,.25); padding: .2rem 0; }
.menu-item { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; border: 0; border-radius: 0; background: none; padding: .3rem .8rem; }
.menu-item:hover:not(:disabled) { background: var(--menu-hover); }
.menu-item .key { margin-left: auto; color: var(--fg-muted); font-size: .8rem; padding-left: 1.5rem; }
.menu-item img, .tb img { width: 16px; height: 16px; }
.menu-sep { height: 1px; background: var(--border); margin: .2rem 0; }
.menu-scrim { position: fixed; inset: 0; z-index: 40; }
.toolbar { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; padding: .25rem .5rem; background: var(--bg-alt); border-bottom: 1px solid var(--border); }
.tb { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .45rem; }
.tb.on { background: var(--selected); }
.tb-sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 .3rem; }
.toolbar select, .toolbar input[type=text] { padding: .1rem .3rem; }

/* Editor */
.editor-shell { display: flex; flex-direction: column; height: calc(100vh - 2.6rem); }
.editor-main { --entry-width: 320px; display: grid; grid-template-columns: var(--entry-width) 6px minmax(0, 1fr); flex: 1; min-height: 0; }
.entry-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: .4rem; }
.entry-filter { width: 100%; box-sizing: border-box; margin-bottom: .25rem; }
.entry-list { flex: 1; overflow-y: auto; border: 1px solid var(--border); border-radius: 4px; outline: none; min-height: 0; }
.entry-list:focus { border-color: var(--accent); }
.entry { height: 26px; line-height: 26px; padding: 0 .5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.entry:hover { background: var(--hover); }
.entry.selected { background: var(--selected); }
.entry.notext { color: var(--fg-muted); }
.splitter { cursor: col-resize; background: var(--border); }
.splitter:hover { background: var(--accent); }
.text-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow-y: auto; padding: .4rem .6rem; }
.pane-title { font-weight: 600; margin: .4rem 0 .2rem; }
.pane-toolbar { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; margin-bottom: .2rem; }
.txt { width: 100%; box-sizing: border-box; font-family: ui-monospace, Consolas, monospace; font-size: 14px; resize: vertical; }
.edit-orig-group { display: flex; flex-direction: column; }
.edit-orig-group.side-by-side { flex-direction: row; gap: .6rem; align-items: stretch; }
.edit-orig-group.side-by-side .edit-orig-col { flex: 1 1 0; min-width: 0; }
.edit-orig-group.side-by-side .txt { height: 100%; }
.edit-orig-col { display: flex; flex-direction: column; }
.statusbar { padding: .25rem .6rem; background: var(--bg-alt); border-top: 1px solid var(--border); font-size: .85rem; color: var(--fg-muted); }

/* Find panel */
.findpanel { border-bottom: 1px solid var(--border); padding: .4rem .6rem; background: var(--bg-alt); }
.findpanel .row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: .15rem 0; }
.find-results { max-height: 9rem; overflow-y: auto; border: 1px solid var(--border); margin-top: .3rem; }
.find-result { padding: .1rem .5rem; cursor: pointer; }
.find-result:hover { background: var(--hover); }

/* Dialogs, property grid, toasts */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal { background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; min-width: 20rem; max-width: min(40rem, 92vw); max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 8px 30px rgba(0,0,0,.4); }
.modal-title { font-weight: 600; padding: .6rem 1rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.modal-close-btn { background: none; border: none; color: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 .2rem; }
.modal-close-btn:hover { opacity: .7; }
.modal-body { padding: .8rem 1rem; overflow-y: auto; }
.modal-message { white-space: pre-wrap; margin: 0 0 .5rem; }
.modal-details { max-height: 12rem; overflow: auto; font-size: .8rem; }
.modal-buttons { display: flex; justify-content: flex-end; gap: .5rem; padding: .6rem 1rem; border-top: 1px solid var(--border); }
.prompt-input { width: 100%; box-sizing: border-box; margin-top: .3rem; }
.propgrid { display: grid; grid-template-columns: 11rem 1fr; gap: .3rem .8rem; align-items: center; }
.prop-category { grid-column: 1 / -1; font-weight: 600; margin-top: .4rem; border-bottom: 1px solid var(--border); }
.prop-value input[type=text], .prop-value select { width: 100%; box-sizing: border-box; }
.prop-error { grid-column: 1 / -1; }
.toasts { position: fixed; right: 1rem; bottom: 2.5rem; display: flex; flex-direction: column; gap: .4rem; z-index: 120; }
.toast { background: var(--bg-alt); border: 1px solid var(--border); border-left: 4px solid var(--ok); padding: .5rem .8rem; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.3); cursor: pointer; max-width: 24rem; }
.toast.err { border-left-color: var(--err); }

@media (max-width: 900px) {
    .editor-main { grid-template-columns: 1fr; grid-template-rows: 35vh 0 1fr; }
    .splitter { display: none; }
}

/* Preview pane */
.preview-box { overflow: auto; max-width: 100%; background: repeating-conic-gradient(var(--bg-alt) 0% 25%, var(--bg) 0% 50%) 50% / 16px 16px; border: 1px solid var(--border); padding: 4px; }
.preview-img { display: block; max-width: none; image-rendering: auto; }

/* Labels */
.swatch { display: inline-block; width: 1.1rem; height: 1.1rem; border: 1px solid var(--border); border-radius: 3px; vertical-align: middle; }

/* Login landing page */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; box-sizing: border-box; }
.login-card { width: 100%; max-width: 22rem; border: 1px solid var(--border); border-radius: 8px; padding: 1.5rem 1.75rem; }
.login-card h1 { margin: 0 0 .25rem; font-size: 1.5rem; }
.login-field { display: flex; flex-direction: column; gap: .25rem; margin: .75rem 0; }
.login-field input { padding: .4rem .5rem; }
.login-card button { width: 100%; padding: .5rem; margin-top: .5rem; }
.topbar .user { margin-left: auto; display: flex; gap: .6rem; align-items: center; font-size: .85rem; }
.topbar .role { padding: 0 .4rem; border-radius: 3px; background: #4da3ff; color: #00203f; font-weight: 600; text-transform: uppercase; font-size: .7rem; }
.topbar .repo { margin-left: 0; }