/* server/src/public/app.css */

/* ---------- Theme ---------- */
:root{
    --bg: #0b0c0f;
    --bg2: #0f1116;

    --panel: rgba(255,255,255,0.04);
    --panel2: rgba(255,255,255,0.06);
    --panel3: rgba(255,255,255,0.08);

    --line: rgba(255,255,255,0.10);
    --text: rgba(255,255,255,0.92);
    --muted: rgba(255,255,255,0.62);

    --shadow: 0 16px 60px rgba(0,0,0,0.55);
}

/* ---------- Base / Reset ---------- */
*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    background: var(--bg);
    color: var(--text);
    overflow: auto;
}

a{ color: inherit; }
.muted{ color: var(--muted); }

/* ---------- App Shell Layout ---------- */
.app{
    display: grid;
    grid-template-columns: 260px 1fr;
    height: 100vh;
}

.sidebar{
    display: flex;
    flex-direction: column;
    padding: 14px;
    border-right: 1px solid var(--line);
    background: rgba(0,0,0,0.10);
    backdrop-filter: blur(10px);
    min-width: 0;
}

.sidebar-scroll{
    flex: 1;
    overflow: auto;
    padding-right: 2px;
    margin-top: 10px;

    /* Needed for sticky project nav + consistent footer spacing */
    display: flex;
    flex-direction: column;
}

.sidebar-footer{
    padding-top: 10px;
    border-top: 1px solid var(--line);
    margin-top: auto;
}

.main{
    display: grid;
    grid-template-rows: auto 1fr;
    min-width: 0;
}

.topbar{
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    border-bottom: 1px solid var(--line);
    background: rgba(0,0,0,0.08);
    backdrop-filter: blur(10px);
}

.page-title{
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: rgba(255,255,255,0.92);
}

/* Background moved to .content to eliminate long-page gradient seams */
.content{
    overflow: auto;
    background:
            radial-gradient(1200px 700px at 60% -10%, rgba(255,255,255,0.06), transparent 55%),
            radial-gradient(1000px 600px at 20% 0%, rgba(255,255,255,0.04), transparent 55%),
            linear-gradient(180deg, var(--bg2), var(--bg));
    background-repeat: no-repeat;
    background-size: cover;
}

/* Center column */
.content-inner{
    padding: 18px;
    max-width: 980px;
    margin: 0 auto;
}

/* ---------- Brand ---------- */
.brand{
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 6px 4px 2px;
}

.brand-mark{
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: grid;
    place-items: center;
}

.brand-mark img{
    width: 30px;
    height: 30px;
    display: block;
}

.brand-name{
    font-weight: 800;
    font-size: 13px;
    line-height: 1.1;
}

.brand-sub{
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}

/* ---------- Nav ---------- */
.nav{
    display: grid;
    gap: 4px;
}

.nav-item{
    display: flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    padding: 0 10px;
    border-radius: 10px;
    text-decoration: none;
    color: rgba(255,255,255,0.86);
    border: 1px solid transparent;
}

.nav-item:hover{
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.06);
}

.nav-item.active{
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.95);
}

.nav-item.disabled{
    opacity: 0.5;
    pointer-events: none;
}

.sidebar-divider{
    height: 1px;
    background: var(--line);
    margin: 10px 0;
}

/* ---------- User pill ---------- */
.user-pill{
    font-size: 12px;
    color: rgba(255,255,255,0.80);
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.04);
    padding: 8px 10px;
    border-radius: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Cards / UI ---------- */
.card{
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px;
}

.card + .card{ margin-top: 12px; }

.card-title{
    font-weight: 800;
    font-size: 13px;
    margin-bottom: 8px;
}

.row{
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

/* ---------- Forms ---------- */
.input{
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: rgba(0,0,0,0.18);
    color: var(--text);
    outline: none;
}

.input:focus{
    border-color: rgba(255,255,255,0.18);
    box-shadow: 0 0 0 3px rgba(255,255,255,0.06);
}

button, input[type="submit"], input[type="button"]{ font: inherit; }

.btn{
    -webkit-appearance: none;
    appearance: none;
    height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.92);
    cursor: pointer;
}

button.btn, input.btn{
    -webkit-appearance: none;
    appearance: none;
}

.btn:hover{
    background: rgba(255,255,255,0.09);
    border-color: rgba(255,255,255,0.18);
}

.btn:active{ transform: translateY(1px); }

.btn-small{
    height: 32px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 12px;
}

.btn-danger{
    border-color: rgba(255,120,120,0.25);
    background: rgba(255,120,120,0.08);
}
.btn-danger:hover{
    background: rgba(255,120,120,0.12);
    border-color: rgba(255,120,120,0.32);
}

/* ---------- Auth (Login) ---------- */
.login-wrap{
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 28px 16px;
    background:
            radial-gradient(900px 500px at 55% -10%, rgba(255,255,255,0.08), transparent 55%),
            radial-gradient(900px 500px at 15% 0%, rgba(255,255,255,0.05), transparent 60%),
            linear-gradient(180deg, var(--bg2), var(--bg));
}

.login-card{
    width: min(460px, 100%);
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 20px;
    box-shadow: var(--shadow);
}

.login-brand{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.login-logo{
    width: 34px;
    height: 34px;
    display: block;
    object-fit: cover;
}

.login-app{
    font-weight: 800;
    font-size: 14px;
    line-height: 1.1;
}

.login-app-sub{
    font-size: 12px;
    line-height: 1.2;
}

.login-title{
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0.2px;
    margin-top: 2px;
}

.login-sub{
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.4;
}

.login-msg{
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    color: var(--muted);
    font-size: 13px;
}

.login-form{
    margin-top: 14px;
    display: flex;
    gap: 10px;
}

.login-form .input{ flex: 1; }
.login-form .btn{ flex: 0 0 auto; }

.login-foot{
    margin-top: 12px;
    font-size: 12px;
}

@media (max-width: 420px){
    .login-form{ flex-direction: column; }
    .login-form .btn{ width: 100%; }
}

/* ---------- Save pill ---------- */
.save-pill{
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.03);
    height: 28px;
    display: inline-flex;
    align-items: center;
}
.save-pill.saving{
    border-color: rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.06);
}
.save-pill.error{
    border-color: rgba(255,120,120,0.30);
    background: rgba(255,120,120,0.10);
}

/* ---------- Projects tables (keeps your current look) ---------- */
.content-inner table{
    width: 100%;
    border-collapse: collapse;
    background: rgba(255,255,255,0.03);
    border-radius: 14px;
    overflow: hidden;

    /* Final state: no outer box/border */
    border: 0 !important;
    outline: 0 !important;
}

.content-inner th,
.content-inner td{
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    font-size: 13px;
}

.content-inner th{
    text-align: left;
    color: var(--muted);
    font-weight: 800;
    background: rgba(255,255,255,0.02);
}

.content-inner tr:hover td{ background: rgba(255,255,255,0.03); }

.content-inner td a{
    text-decoration: none;
    font-weight: 700;
}
.content-inner td a:hover{ text-decoration: underline; }

.projects-card table,
.card table{
    border: 0 !important;
}

.card table tr:last-child td{ border-bottom: 0 !important; }
.card table{ border-bottom: 0 !important; }

/* ---------- Scroll fixes ---------- */
.main,
.content,
.main-content{
    min-height: 0;
}

.content,
.main-content{
    overflow: auto;
}

.app,
.app-shell{
    height: 100vh;
}

/* ---------- Docs sidebar (Notion-ish) ---------- */
.sidebar-section{
    display: grid;
    gap: 8px;
}

.sidebar-section-title{
    font-weight: 800;
    font-size: 13px;
    padding: 0 2px;
}

.sidebar-sub{
    padding: 0 2px;
    margin-top: -6px;
}

.sidebar-project-links{
    display: grid;
    gap: 4px;
    margin-top: 4px;
}

.sidebar-doc-actions{
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.docs-sidebar-head{ padding: 10px 10px 8px; }
.docs-sidebar-title{
    font-size: 13px;
    font-weight: 700;
    opacity: 0.9;
    margin-bottom: 8px;
}

.docs-sidebar-actions{
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.docs-sidebar-actions .btn{
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
}
.docs-sidebar-actions .btn:hover{ background: rgba(255,255,255,0.10); }

.docs-tree{
    margin-top: 6px;
    max-height: 55vh;
    overflow: auto;
    padding: 0 6px 10px;
}

.docs-tree ul,
.docs-tree li{
    list-style: none !important;
    margin: 0;
    padding: 0;
}

.doc-children{
    list-style: none;
    padding-left: 0;
    margin: 0;
    padding-bottom: 6px;
}

.doc-node{ margin: 0; padding: 0; }

.doc-row{
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 6px;
    border-radius: 10px;
}

.doc-row:hover{ background: rgba(255,255,255,0.05); }

.docs-tree .doc-row{
    gap: 8px;
    height: 30px;
    border-radius: 8px;
    padding-right: 6px;
}

.docs-tree .doc-row:hover{ background: rgba(255,255,255,0.06); }
.docs-tree .doc-row.selected{ background: rgba(255,255,255,0.10); }


.doc-link,
.docs-tree .doc-link{
    text-decoration: none;
    font-size: 13px;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-caret{
    width: 18px;
    height: 18px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(255,255,255,0.65);
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 0;
}
.doc-caret:hover{ background: rgba(255,255,255,0.06); }

.doc-caret-spacer{
    width: 18px;
    height: 18px;
    display: inline-block;
}

/* Drag handle */
.doc-grip{
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: rgba(255,255,255,0.45);
    cursor: grab;
    user-select: none;

    /* Final behavior: hidden unless hover */
    opacity: 0;
    transition: opacity 120ms ease;
}

.doc-grip:hover{
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.70);
}

.doc-grip:active{ cursor: grabbing; }

.doc-row:hover .doc-grip{ opacity: 1; }
.docs-tree .doc-row:hover .doc-grip{ opacity: 0.55; }

.docs-tree .doc-node.collapsed > ul{ display: none; }

/* Category list rows in main content */
.cat-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}
.cat-row:last-child{ border-bottom: none; }

.cat-link{ text-decoration: none; }
.cat-link:hover{ text-decoration: underline; }

/* ---------- Notion-ish doc page ---------- */
.doc-page{
    max-width: 860px;
    margin: 0 auto;
}

.doc-page-header{
    padding-top: 6px;
    padding-bottom: 12px;
    padding-left: 2px;
    padding-right: 2px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

.doc-page-header + .doc-section{
    border-top: none;
}

.doc-eyebrow{
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    margin: 0 0 6px 2px;
}

.doc-title-big{
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -0.2px;
    margin-bottom: 6px;
}

.doc-meta{ font-size: 13px; }

.doc-title-form{
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.doc-title-input{
    flex: 1;
    min-width: 0;

    height: auto;
    padding: 0;
    border: 0;
    background: transparent;

    font-size: 34px;
    font-weight: 900;
    letter-spacing: -0.4px;
    line-height: 1.12;

    color: rgba(255,255,255,0.95);
    box-shadow: none;
    border-radius: 0;
    outline: none;
}

.doc-title-input:focus{
    outline: none;
    box-shadow: none;
    border: 0;
    background: transparent;
}

.doc-title-input::placeholder{ color: rgba(255,255,255,0.35); }

.doc-toolbar{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding-left: 2px;
}

.doc-toolbar .btn,
.doc-title-form .btn{
    height: 30px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 12px;
}

.doc-page-header .btn{ align-self: flex-start; }

.doc-page-header .card,
.doc-page-header .panel{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.doc-section{
    margin-top: 12px;
    border-top: 1px solid var(--line);
    padding-top: 12px;
}

.doc-section-title{
    font-weight: 800;
    font-size: 13px;
    margin-bottom: 10px;
}

.page-list{
    display: grid;
    gap: 6px;
}

.page-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    text-decoration: none;
}
.page-row:hover{
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.10);
}
.page-row-title{
    font-weight: 700;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-row-meta{ font-size: 12px; white-space: nowrap; flex: 0 0 auto; }

/* Editor.js: remove panel/box feel */
.doc-editor-shell{
    margin-top: 14px;
    min-height: 360px;
    border: none;
    background: transparent;
    padding: 0;
}

.editor-host{
    min-height: 360px;
    padding: 8px 2px 220px;
}

/* Editor.js content width */
.ce-block__content,
.ce-toolbar__content{
    max-width: 760px;
}

/* Better drag feel */
.drag-chosen{ background: rgba(255,255,255,0.08) !important; }
.drag-ghost{
    opacity: 0.65;
    filter: saturate(0.9);
}
.drag-dragging{ cursor: grabbing !important; }

/* Editor.js dark-ish tweaks (toolbars/popovers default to light) */
.ce-popover,
.ce-popover-item,
.ce-popover__items,
.ce-inline-toolbar,
.ce-conversion-toolbar,
.ce-settings{
    background: rgba(20,22,28,0.98) !important;
    color: rgba(255,255,255,0.92) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
}

.ce-popover-item:hover,
.ce-popover-item__icon:hover,
.ce-toolbar__settings-btn:hover,
.ce-settings__button:hover{
    background: rgba(255,255,255,0.08) !important;
}

.ce-popover-item__title,
.ce-popover-item__subtitle,
.ce-settings__button{
    color: rgba(255,255,255,0.90) !important;
}

.ce-popover-item__icon,
.ce-toolbar__settings-btn,
.ce-settings__button{
    filter: invert(1) saturate(0) brightness(1.2);
}

/* ---------- Project Nav (site-wide) ---------- */
.project-nav{
    position: sticky;
    top: 0;
    z-index: 5;

    padding: 10px 6px 8px;
    border-radius: 14px;
    background: rgba(0,0,0,0.14);
    backdrop-filter: blur(10px);
}

.project-nav-title{
    font-size: 13px;
    font-weight: 800;
    margin: 0 0 8px;
    opacity: 0.92;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-switch{
    width: 100%;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.92);
    padding: 0 10px;
    outline: none;
}

.project-switch:focus{
    border-color: rgba(255,255,255,0.18);
    box-shadow: 0 0 0 3px rgba(255,255,255,0.06);
}

.project-subnav{
    display: grid;
    gap: 4px;
    margin-top: 8px;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
    body{ overflow: auto; }
    .app{ grid-template-columns: 1fr; height: auto; min-height: 100vh; }
    .sidebar{
        position: sticky;
        top: 0;
        z-index: 10;
        border-right: none;
        border-bottom: 1px solid var(--line);
    }
    .sidebar-footer{ display:none; }
    .content-inner{ padding: 14px; }
}

/* ---------- FIX: black titles / editor text ---------- */

/* 1) Doc title input (especially when disabled / read-only) */
.doc-title-input,
.doc-title-inline {
    color: rgba(255,255,255,0.95) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.95) !important;
}

.doc-title-input:disabled,
.doc-title-inline:disabled {
    opacity: 1 !important;
    color: rgba(255,255,255,0.95) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.95) !important;
}

/* 2) Editor.js content text (headers/paragraphs/lists/etc) */
.codex-editor,
.codex-editor__redactor,
.ce-block__content,
.ce-paragraph,
.ce-header,
.ce-quote__text,
.cdx-list__item,
.cdx-input {
    color: rgba(255,255,255,0.92) !important;
}

/* Optional: placeholders */
.ce-paragraph[data-placeholder]:empty:before,
.cdx-input::placeholder {
    color: rgba(255,255,255,0.35) !important;
}

/* Projects page: make the two cards align perfectly */
.projects-card{
    padding: 0 !important;           /* we control padding via header/body */
    overflow: hidden;
}

.projects-card .card-head{
    padding: 14px 14px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    min-height: 44px;               /* same header height on both */
    display:flex;
    align-items:center;
}

.projects-card .card-head h2{
    margin: 0;
    font-size: 13px;
    font-weight: 800;
}

.projects-card .card-body{
    padding: 12px 14px 14px;
}

/* --- Editor.js polish (dark theme) --- */
/* Code tool (textarea) */
.ce-code__textarea,
.ce-code textarea,
.cdx-input.ce-code__textarea,
.cdx-input.ce-code__textarea:focus {
  background: rgba(0,0,0,0.35) !important;
  color: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 12px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  padding: 10px !important;
  min-height: 96px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15) !important;
}

.cdx-inline-code {
  background: rgba(0,0,0,0.28) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 8px !important;
  padding: 1px 6px !important;
  color: rgba(255,255,255,0.90) !important;
}

/* Ensure Editor.js tool icons are visible on dark backgrounds */
.ce-toolbar__plus,
.ce-toolbar__settings-btn,
.ce-inline-toolbar__buttons button,
.ce-conversion-toolbar__buttons button {
  color: rgba(255,255,255,0.92) !important;
}

.ce-toolbar__plus svg,
.ce-toolbar__settings-btn svg,
.ce-inline-toolbar__buttons svg,
.ce-conversion-toolbar__buttons svg,
.ce-popover__item-icon svg,
.ce-popover-item__icon svg,
.ce-conversion-tool__icon svg {
  fill: rgba(255,255,255,0.92) !important;
  stroke: rgba(255,255,255,0.92) !important;
}

.ce-popover__item-icon,
.ce-popover-item__icon,
.ce-conversion-tool__icon {
  filter: invert(1) brightness(1.2);
}

/* Generic code blocks outside Editor.js */
pre {
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 12px 14px;
  overflow: auto;
}
pre code {
  background: transparent;
  border: 0;
  padding: 0;
  color: rgba(255,255,255,0.92);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}