/* ══════════════════════════════════════════════════════════════
   Notespark — single-sidebar shell + warm-paper light theme
   + floating rounded content panel
   (Steps 1 & 2 of the Craft-style redesign)
   Isolated file. Load AFTER app.css / nota-layout.css.
   ══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   Warm "paper" light palette — three tones that create the
   layered look:
     sidebar (--n-nav)  = LIGHTEST  → reads as the hero surface
     content (--n-main) = MID       → the floating card
     canvas  (--n-bg)   = DARKEST   → sits behind, so the card lifts
   ───────────────────────────────────────────────────────────── */
.nota.theme-light {
    --n-bg: #c9d8ea; /* canvas — dusty blue */
    --n-nav: #f8f4ec; /* sidebar cream (lightest) */
    --n-main: #f1ebde; /* content card (mid) */
    --n-main-grad: none;
    --n-glass: #ffffff;
    --n-glass-border: rgba(70,55,30,0.08);
    --n-glass-hover: rgba(70,55,30,0.04);
    --n-surface: rgba(70,55,30,0.04);
    --n-surface-hover: rgba(70,55,30,0.07);
    --n-surface-active: rgba(108,92,231,0.12);
    --n-border: rgba(70,55,30,0.10);
    --n-border-light: rgba(70,55,30,0.06);
    --n-nav-border: rgba(70,55,30,0.09);
    --n-text: #33302a;
    --n-text-2: #4c473f;
    --n-text-3: #857e70;
    --n-text-4: #a8a08e;
    --n-text-muted: #d7d0be;
    --n-accent: #6C5CE7;
    --n-accent-hover: #5A4BD6;
    --n-accent-dim: rgba(108,92,231,0.10);
    --n-accent-text: #6C5CE7;
    --n-card-border: rgba(70,55,30,0.08);
    --n-card-border-hover: rgba(108,92,231,0.25);
    --n-shadow: 0 14px 40px rgba(70,55,30,0.10);
    --n-shadow-sm: 0 4px 18px rgba(70,55,30,0.09);
    --n-topbar: #f5f1e8;
    --n-tabbar: #f5f1e8;
    --n-notif-bg: #fffdf9;
    --n-notif-border: rgba(70,55,30,0.10);
    --n-shared-bg: #f5f1e8;
    --n-overlay: rgba(40,32,20,0.28);
    --n-glow: none;
}

    /* ─────────────────────────────────────────────────────────────
   Sidebar: lightest cream + the subtle blue-green wash low down.
   No right border now — the canvas gap provides the separation.
   ───────────────────────────────────────────────────────────── */
    .nota.theme-light .nota-sidebar {
        background: radial-gradient(135% 55% at 50% 112%, rgba(88,170,200,0.20) 0%, rgba(120,195,175,0.12) 34%, transparent 68%), var(--n-nav) !important;
        border-right: none !important;
    }

/* ─────────────────────────────────────────────────────────────
   Floating rounded content panel (desktop only).
   Sits on the darker canvas with a margin, rounded corners and a
   soft shadow — so it reads as a separate card the sidebar sits
   beside. overflow:hidden is already set upstream, so children
   clip to the radius.
   ───────────────────────────────────────────────────────────── */
.nota.desktop .nota-main {
    /* no top margin — matches the sidebar so both cards share a top edge
       directly under the full-width top bar */
    margin: 0 8px 18px 0; /* bottom matches the sidebar */
    border-radius: 16px;
    background: var(--n-main);
    box-shadow: var(--n-shadow-sm);
}

/* Header strip becomes part of the card (no white glass bar) */
.nota .nota-content-bar {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--n-border-light);
}

/* ── Top zone ─────────────────────────────────────────────── */
.sb-top {
    flex-shrink: 0;
    padding: 14px 12px 6px;
}

.sb-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 4px 6px 8px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.sb-brand-logo {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .sb-brand-logo img {
        width: 30px;
        height: 30px;
        border-radius: 8px;
    }

.sb-brand-name {
    font-size: 16px;
    font-weight: 800;
    color: var(--n-text);
    letter-spacing: -0.01em;
}

/* New Note — QUIET text+icon row (Craft "New Doc" style) */
.sb-new-note {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 11px;
    padding: 9px 10px;
    margin: 2px 0 8px;
    background: none;
    color: var(--n-accent);
    font-size: 14px;
    font-weight: 650;
    font-family: inherit;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: none;
    transition: background var(--n-transition);
}

    .sb-new-note:hover {
        background: var(--n-surface-hover);
        filter: none;
        transform: none;
    }

/* Search — clean white field on the warm paper */
.nota .sb-search {
    background: #fff;
    border: 1px solid var(--n-border-light);
    border-radius: 10px;
    margin: 2px 0 4px;
}

/* ── Primary nav rows (Home / Chat / Contacts / Shared) ───── */
.sb-scroll {
    padding: 6px 10px 14px;
}

.sb-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
}

.sb-navrow {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    background: none;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 550;
    color: var(--n-text-2);
    text-align: left;
    transition: background var(--n-transition), color var(--n-transition);
}

    .sb-navrow > span {
        flex: 1;
        min-width: 0;
    }

    .sb-navrow:hover {
        background: var(--n-surface-hover);
        color: var(--n-text);
    }

    .sb-navrow.active {
        background: var(--n-surface-active);
        color: var(--n-accent-text);
        font-weight: 650;
    }

.sb-navrow-badge {
    flex: 0 0 auto !important;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--n-badge-bg);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 9px;
}

/* ── Group headers: bold, title-case, generous separation ──── */
.sb-group {
    margin-top: 26px;
}
    /* real whitespace between groups */
    .sb-group:first-child {
        margin-top: 8px;
    }

.nota.theme-light .sb-group-label {
    font-size: 12.5px;
    font-weight: 800 !important; /* Craft-style bold section labels */
    letter-spacing: 0.005em;
    text-transform: none !important;
    color: #4a453d !important; /* darker than body text = reads as a heading */
}

/* Collapsible group headers (Quick Notes / Tags / Pinned) */
.sb-group-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    padding: 3px 8px 6px;
    border-radius: 8px;
    user-select: none;
}

    .sb-group-toggle:hover {
        background: var(--n-surface-hover);
    }

    .sb-group-toggle .sb-chev {
        font-size: 9px;
        color: var(--n-text-4);
        flex-shrink: 0;
    }

    .sb-group-toggle .sb-group-label {
        flex: 1;
        min-width: 0;
    }

.sb-group-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--n-text-4);
    flex-shrink: 0;
}

/* ── Bottom utility bar ───────────────────────────────────── */
.sb-foot {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 14px;
    border-top: 1px solid var(--n-border-light);
}

.sb-foot-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: var(--n-text-3);
    transition: background var(--n-transition), color var(--n-transition);
}

    .sb-foot-btn:hover {
        background: var(--n-surface-hover);
        color: var(--n-text);
    }

.sb-foot-avatar {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
}

    .sb-foot-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .sb-foot-avatar span {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 12px;
        font-weight: 700;
    }
/* Push the settings group to the far right, opposite the avatar.
   Note: `:first-of-type` matched the AVATAR button (first <button> in the
   container), not settings — so the auto margin never applied. Use the
   flex container instead: avatar left, the rest pushed right. */
.sb-foot > .sb-foot-avatar {
    margin-right: auto;
}

/* The avatar image itself has a white circular background baked into the
   uploaded PNG — CSS can't remove pixels. Scaling it up very slightly and
   clipping to the circle hides most of the white rim. For a truly clean
   result, re-upload an avatar with a transparent background. */
.sb-foot-avatar img {
    transform: scale(1.12);
}

/* ─────────────────────────────────────────────────────────────
   Sidebar floats as a rounded card too (desktop).
   Margin on every side; the divider gap sits to its right.
   overflow:hidden is already set upstream, so the wash + contents
   clip to the radius.
   ───────────────────────────────────────────────────────────── */
.nota.theme-light.desktop .nota-sidebar {
    margin: 8px 0 8px 8px !important;
    border-radius: 16px !important;
    box-shadow: var(--n-shadow-sm) !important;
    /* height:100% upstream = 100vh; subtract the 8px top+bottom margins
       so the rounded bottom corners aren't pushed below the viewport. */
    height: calc(100% - 16px) !important;
}

/* ─────────────────────────────────────────────────────────────
   Softened quick-capture button — the loud amber halo is replaced
   with the app accent + a soft purple glow, so it sits calmly in
   the new palette.
   ───────────────────────────────────────────────────────────── */
.nota .quicknote-fab {
    background: var(--n-accent);
    color: #fff;
    box-shadow: var(--n-shadow), 0 0 0 5px rgba(108,92,231,0.08);
}

    .nota .quicknote-fab:hover {
        box-shadow: var(--n-shadow), 0 0 0 7px rgba(108,92,231,0.12);
    }

/* ─────────────────────────────────────────────────────────────
   Search relocated from the sidebar into the content bar
   (Craft puts search in the main window, not the sidebar).
   ───────────────────────────────────────────────────────────── */
.cb-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 280px;
    max-width: 34vw;
    margin-left: auto;
    padding: 7px 11px;
    background: #fff;
    border: 1px solid var(--n-border-light);
    border-radius: 10px;
    transition: border-color var(--n-transition), box-shadow var(--n-transition);
}

.cb-search {
    box-shadow: 0 2px 12px rgba(70,55,30,0.07);
}

    .cb-search:focus-within {
        border-color: rgba(108,92,231,0.45);
        box-shadow: 0 0 0 4px rgba(108,92,231,0.12), 0 4px 18px rgba(108,92,231,0.22);
    }

.cb-search-ic {
    color: var(--n-text-4);
    flex-shrink: 0;
}

.cb-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: none;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--n-text);
}

    .cb-search-input::placeholder {
        color: var(--n-text-4);
    }

.cb-search-clear {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 12px;
    color: var(--n-text-4);
    padding: 0 2px;
    flex-shrink: 0;
}

    .cb-search-clear:hover {
        color: var(--n-text);
    }

/* content bar needs room for the field */
.nota.desktop .nota-content-bar {
    height: 58px;
    gap: 16px;
}

/* ─────────────────────────────────────────────────────────────
   Content-bar breadcrumb — shown on section routes where the
   user-info strip doesn't apply, so the bar isn't a big empty
   band with a lone search field. SectionView publishes it via
   HomeContextService.SetBreadcrumb().
   ───────────────────────────────────────────────────────────── */
.cb-crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 14px;
}

.cb-crumb-nb {
    color: var(--n-text-3);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cb-crumb-sep {
    color: var(--n-text-4);
    flex-shrink: 0;
}

.cb-crumb-sec {
    color: var(--n-text);
    font-weight: 750;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════════════════
   FULL-WIDTH TOP BAR
   Brand left, search icon right. Sits above the sidebar/content
   cards so all three share the same top edge (Craft-style chrome).
   .nota becomes a column; .nota-shell is the flex row beneath.
   ══════════════════════════════════════════════════════════════ */
.nota.desktop {
    flex-direction: column;
}

.nota-shell {
    flex: 1;
    display: flex;
    min-height: 0;
    width: 100%;
}

.nota-topbar-full {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 16px 2px;
    background: transparent;
}

.tb-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 6px;
    background: none;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    font-family: inherit;
}

    .tb-brand:hover {
        background: var(--n-surface-hover);
    }

.tb-brand-logo {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .tb-brand-logo img {
        width: 28px;
        height: 28px;
        border-radius: 8px;
    }

.tb-brand-name {
    font-size: 15.5px;
    font-weight: 800;
    color: var(--n-text);
    letter-spacing: -0.01em;
}

.tb-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tb-icon-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    color: var(--n-text-3);
    transition: background var(--n-transition), color var(--n-transition);
}

    .tb-icon-btn:hover {
        background: var(--n-surface-hover);
        color: var(--n-text);
    }

/* Expanded search field */
.tb-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 300px;
    max-width: 40vw;
    padding: 7px 11px;
    background: #fff;
    border: 1px solid var(--n-border-light);
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(70,55,30,0.07);
}

    .tb-search:focus-within {
        border-color: rgba(108,92,231,0.45);
        box-shadow: 0 0 0 4px rgba(108,92,231,0.12), 0 4px 18px rgba(108,92,231,0.22);
    }

.tb-search-ic {
    color: var(--n-text-4);
    flex-shrink: 0;
}

.tb-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: none;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--n-text);
}

    .tb-search-input::placeholder {
        color: var(--n-text-4);
    }

.tb-search-clear {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 12px;
    color: var(--n-text-4);
    padding: 0 2px;
    flex-shrink: 0;
}

    .tb-search-clear:hover {
        color: var(--n-text);
    }

/* Sidebar top no longer holds the brand — tighten it up */
.sb-top {
    padding: 10px 12px 4px;
}

/* Sidebar height now measured inside .nota-shell, not the whole viewport */
.nota.theme-light.desktop .nota-sidebar {
    height: auto !important;
    align-self: stretch;
    margin: 0 0 18px 8px !important; /* bottom gutter lets the canvas show */
}

/* ══════════════════════════════════════════════════════════════
   Routes that painted var(--n-bg) directly.
   That used to be a near-white grey; now it's the dusty blue canvas,
   so these surfaces showed blue instead of paper. Repoint them at
   the content colour so every route reads as a proper card.
   ══════════════════════════════════════════════════════════════ */
.nota.theme-light .tag-page {
    /* light paper, not the warm mid tone — --n-main reads yellow
       against the blue canvas */
    background: #fffdf9 !important;
}

.nota.theme-light .tag-page-header {
    background: transparent !important;
    border-bottom: 1px solid var(--n-border-light) !important;
}

/* Sticky save bar on the contacts page */
.nota.theme-light .contact-save-row {
    background: var(--n-main) !important;
    border-top: 1px solid var(--n-border-light) !important;
}

/* ── "New notebook" (+) button on the Notebooks group header ──
   nota-layout.css sets `color: rgba(255,255,255,0.5)` — a dark-theme leftover
   that's effectively invisible on the cream sidebar, so the only way to create
   a notebook looked like empty space. Give it a real colour and a hover state. */
.nota.theme-light .sb-group-add {
    color: var(--n-text-3) !important;
    width: 22px;
    height: 22px;
    justify-content: center;
    border-radius: 6px;
    transition: background var(--n-transition), color var(--n-transition);
}

    .nota.theme-light .sb-group-add:hover {
        color: var(--n-accent-text) !important;
        background: var(--n-surface-hover) !important;
    }

/* ── "+ Add section" ──
   Same dark-theme leftover as .sb-group-add: nota-layout.css colours it
   rgba(255,255,255,0.45), which is invisible on cream until hover repaints it.
   These two were the only .sb-* classes without a theme-light override. */
.nota.theme-light .sb-add-sec {
    color: var(--n-text-3) !important;
}

    .nota.theme-light .sb-add-sec:hover {
        color: var(--n-accent-text) !important;
        background: var(--n-surface-hover) !important;
    }