/* =============================================================================
 * shared/components.css — composite UI shared across multiple pages.
 *
 * PURPOSE   The reusable, multi-element components that more than one page
 *           assembles: the app shell, the top header (brand + section nav +
 *           account menu + New file), the searchable folder combobox, the
 *           generic card, and the section page header.
 * PROVIDES  .app/.main · .app-header/.brand/.app-header__actions · .seg-nav ·
 *           .menu (popover) · .fsel (combobox + listbox) · .card/.pop-icon ·
 *           .page-head.
 * REQUIRES  tokens.css + base.css. Load AFTER them.
 * PAIRS     .menu  ↔ shared/menu.js   ·   .fsel ↔ shared/folder-select.js
 * USED BY   dashboard, categories, recent (full header); editor (folder combobox).
 * ============================================================================= */

/* ── App shell ────────────────────────────────────────────────────────────── */
/* When a page uses the .app shell, the shell owns the viewport and .main scrolls,
   so the document body must not scroll. :has keeps this page-agnostic. */
body:has(.app) { overflow: hidden; }
.app { display: flex; flex-direction: column; height: 100dvh; }
.main { flex: 1; overflow-y: auto; }

/* ── Header ───────────────────────────────────────────────────────────────── */
.app-header { position: relative; z-index: var(--z-header); flex: none; display: flex; align-items: center; gap: 1.25rem; height: var(--header-h); padding-inline: var(--pad-x); background: var(--surface); border-bottom: 1px solid var(--border); }
.app-header__spacer { flex: 1; }
.app-header__actions { display: flex; align-items: center; gap: .5rem; }

/* Header entrance — direct children marked .reveal cascade left→right, 100ms
   apart (the empty spacer is skipped because it isn't .reveal). Same fade-in-up
   + blur as the body; only the sequencing direction differs. */
.app-header > .reveal { animation-delay: 0s; }
.app-header > .reveal ~ .reveal { animation-delay: .1s; }
.app-header > .reveal ~ .reveal ~ .reveal { animation-delay: .2s; }
.app-header > .reveal ~ .reveal ~ .reveal ~ .reveal { animation-delay: .3s; }

.brand { display: flex; align-items: center; gap: .625rem; flex: none; }
.brand__badge { width: 2rem; height: 2rem; }
.brand__badge svg { width: 1.25rem; height: 1.25rem; }
.brand__name { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.01em; }

/* Segmented section nav — active = white chip + accent icon. Hidden on phones
   (the account menu carries the same destinations), shown from tablet up. */
.seg-nav { display: none; align-items: center; gap: 2px; padding: 3px; border-radius: var(--r-md); background: var(--surface-2); }
.seg-nav__item { display: inline-flex; align-items: center; gap: .4rem; height: 1.95rem; padding-inline: .8rem; border: 0; background: transparent; border-radius: var(--r-sm); color: var(--muted); font-family: inherit; font-size: var(--fs-md); font-weight: 500; cursor: pointer; transition: background var(--t-fast) ease-out, color var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out; }
.seg-nav__item .ti { font-size: 15px; transition: color var(--t-fast) ease-out; }
.seg-nav__item:hover { color: var(--ink); }
.seg-nav__item[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.seg-nav__item[aria-current="page"] .ti { color: var(--accent); }
@media (min-width: 768px) { .seg-nav { display: flex; } }

.account__chevron { font-size: 14px; color: var(--faint); }

/* New file: full button on tablet/desktop, icon-only on phones */
@media (max-width: 480px) {
  .app-header { gap: .75rem; }
  .new-file__label { display: none; }
  .new-file { padding-inline: 0; width: 2rem; }
  .account__chevron { display: none; }
}

/* ── Popover menu (account / overflow) — pairs with menu.js ───────────────── */
.menu { position: relative; }
.menu__trigger { display: flex; align-items: center; gap: .5rem; padding: .25rem .375rem .25rem .25rem; border: 0; background: transparent; border-radius: var(--r-sm); cursor: pointer; transition: background var(--t-fast) ease-out; }
.menu__trigger:hover { background: var(--surface-1); }
.menu-pop { position: absolute; top: calc(100% + 6px); right: 0; min-width: 11.5rem; padding: 5px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); z-index: var(--z-menu); transform-origin: top right; transition: opacity var(--t-fast) ease-out, transform var(--t-fast) ease-out; }
.menu[data-open="false"] .menu-pop { opacity: 0; transform: scale(.97) translateY(-4px); pointer-events: none; }
.menu[data-open="true"]  .menu-pop { opacity: 1; transform: none; }
.menu-item { display: flex; align-items: center; gap: .5625rem; width: 100%; padding: 7px 9px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-2); font-family: inherit; font-size: var(--fs-base); text-align: left; cursor: pointer; transition: background var(--t-fast) ease-out, color var(--t-fast) ease-out; }
.menu-item .ti { font-size: 16px; color: var(--faint); }
.menu-item:hover, .menu-item[data-active="true"] { background: var(--surface-2); color: var(--ink); }
.menu-sep { height: 1px; margin: 5px 3px; background: var(--border); }

/* ── Compact color picker primitives ─────────────────────────────────────── */
.color-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .45rem; }
.color-head__label { margin-bottom: 0 !important; }
.color-tabs { display: inline-flex; align-items: center; gap: 2px; height: 1.5rem; padding: 2px; border-radius: var(--r-sm); background: var(--surface-2); }
.color-tabs > button { display: inline-flex; align-items: center; gap: .25rem; height: 1.25rem; padding: 0 .5rem; border: 0; border-radius: 3px; background: transparent; color: var(--faint); font-family: inherit; font-size: var(--fs-xs); font-weight: 700; cursor: pointer; transition: background var(--t-fast) ease-out, color var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out; }
.color-tabs > button .ti { font-size: 11px; }
.color-tabs > button:hover { color: var(--ink); }
.color-tabs > button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / .06); }
.swatch-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; padding: 4px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.swatch { position: relative; aspect-ratio: 1; border: 1px solid rgb(0 0 0 / .08); border-radius: var(--r-sm); background: var(--c, var(--surface-2)); cursor: pointer; transition: transform 120ms var(--ease), box-shadow 120ms var(--ease); }
.swatch:hover { transform: scale(1.15); z-index: 1; }
.swatch.is-active { box-shadow: 0 0 0 1.5px var(--surface), 0 0 0 3px var(--ink); z-index: 2; }
.swatch[data-color="#ffffff"] { border-color: var(--border); }
.swatch--custom { display: grid; place-items: center; overflow: hidden; background: conic-gradient(from 135deg, #f87171, #fbbf24, #34d399, #60a5fa, #a78bfa, #f472b6, #f87171); border-color: rgb(0 0 0 / .15); }
.swatch--custom .ti { color: #fff; font-size: 11px; text-shadow: 0 0 2px rgb(0 0 0 / .45); pointer-events: none; }
.swatch--custom input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; background: transparent; cursor: pointer; }

/* ── Modal (native <dialog>) ─────────────────────────────────────────────── */
.modal { width: min(28rem, calc(100vw - 2rem)); padding: 0; border: 0; border-radius: var(--r-lg); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-pop); overflow: visible; }
.modal::backdrop { background: rgb(23 23 23 / .4); }
.modal[open] { animation: modal-in .2s var(--ease); }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.modal[data-closing] { animation: modal-out .17s var(--ease) forwards; }
@keyframes modal-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(6px) scale(.98); } }
.modal[data-closing]::backdrop { animation: backdrop-out .17s ease forwards; }
@keyframes backdrop-out { from { opacity: 1; } to { opacity: 0; } }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.25rem; border-bottom: 1px solid #eeeeee; }
.modal__title { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.01em; }
.modal__body { padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.modal__foot { display: flex; justify-content: flex-end; gap: .5rem; padding: 1rem 1.25rem; border-top: 0; }
.modal__body + .modal__foot { border-top: 1px solid #eeeeee; }
.confirm-modal__text { margin: 0; color: var(--muted); line-height: 1.45; text-wrap: pretty; }
.modal--confirm { width: min(30rem, calc(100vw - 2rem)); }
.modal__heading { display: flex; align-items: flex-start; gap: .875rem; min-width: 0; }
.modal__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: var(--r-md); background: var(--surface-2); color: var(--ink-2); }
.modal__icon .ti { font-size: 18px; }
.modal__copy { min-width: 0; }
.modal__desc { margin-top: .25rem; color: var(--muted); font-size: var(--fs-base); line-height: 1.45; text-wrap: pretty; }
.modal--confirm .modal__head { align-items: flex-start; }
.modal--confirm .modal__foot .btn { min-width: 5.75rem; }
.modal--danger .modal__icon { color: #b91c1c; background: #fef2f2; }
@media (max-width: 480px) {
  .modal__head { padding: 1rem; }
  .modal__body { padding: 1rem; }
  .modal__foot { padding: .875rem 1rem; }
  .modal--confirm .modal__foot { display: grid; grid-template-columns: 1fr; }
  .modal--confirm .modal__foot .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .modal[open], .modal[data-closing] { animation: none; } }

/* ── Revision history primitives ─────────────────────────────────────────── */
.action-mark { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.5rem; height: 2.5rem; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); color: var(--ink-2); }
.action-mark .ti { font-size: 18px; }
.action-mark--updated,
.action-mark--created,
.action-mark--imported,
.action-mark--category,
.action-mark--changed-category,
.action-mark--url,
.action-mark--changed-url,
.action-mark--synced,
.action-mark--restored,
.action-mark--removed { background: var(--surface-2); border-color: var(--border); color: var(--ink-2); }

.diff-pill { display: inline-flex; align-items: center; gap: .15rem; height: 1.45rem; padding: 0 .45rem; border-radius: var(--r-pill); border: 1px solid var(--border); font-size: var(--fs-sm); font-weight: 600; line-height: 1; background: var(--surface); font-variant-numeric: tabular-nums; }
.diff-pill--add { color: #15803d; background: #f0fdf4; border-color: #bbf7d0; }
.diff-pill--del { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
.diff-pill .ti { font-size: 12px; }

/* ── Searchable folder combobox — pairs with folder-select.js ─────────────── */
.fsel { position: relative; }
.fsel-trigger { gap: .5rem; padding-left: .625rem; padding-right: .5rem; }
.fsel-trigger .fsel-count { color: var(--faint); font-size: var(--fs-sm); }
.fsel-trigger .ti-chevron-down { font-size: 14px; color: var(--faint); }
.fsel-label { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
.fsel-label .ti { font-size: 15px; color: var(--faint); }
.fsel-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fsel-pop { position: absolute; top: calc(100% + 6px); left: 0; width: 16rem; max-width: calc(100vw - 2 * var(--pad-x)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); z-index: var(--z-pop); transform-origin: top left; transition: opacity var(--t-fast) ease-out, transform var(--t-fast) ease-out; }
.fsel-pop--right { left: auto; right: 0; transform-origin: top right; }
.fsel[data-open="false"] .fsel-pop { opacity: 0; transform: scale(.97) translateY(-4px); pointer-events: none; }
.fsel[data-open="true"]  .fsel-pop { opacity: 1; transform: none; }

.fsel-search { position: relative; padding: 8px; border-bottom: 1px solid var(--border); }
.fsel-search .ti { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 15px; color: var(--faint); pointer-events: none; }
.fsel-input { height: 2rem; padding-left: 1.9rem; }

.fsel-list { max-height: 15.25rem; overflow-y: auto; padding: 6px; }
.fsel-opt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-sm); color: var(--ink-2); cursor: pointer; }
.fsel-opt-main { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.fsel-opt-main .ti { font-size: 15px; color: var(--faint); flex: none; }
.fsel-opt-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsel-opt .fsel-num { font-size: var(--fs-sm); color: var(--faint); }
.fsel-opt[data-active="true"] { background: var(--surface-2); }
.fsel-opt[aria-selected="true"] { color: var(--ink); }
.fsel-check { color: var(--accent); opacity: 0; }
.fsel-opt[aria-selected="true"] .fsel-check { opacity: 1; }
.fsel-empty { display: none; padding: 18px 12px; text-align: center; font-size: var(--fs-sm); color: var(--faint); }

/* ── Card + icon-pop hover (the approved row/card hover #05) ───────────────── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); transition: border-color var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out, transform var(--t-fast) ease-out; }
.card--interactive { position: relative; cursor: pointer; }
.pop-icon { transition: transform var(--t-fast) ease-out, background var(--t-fast) ease-out, color var(--t-fast) ease-out; }
@media (hover: hover) {
  .card--interactive:hover { border-color: var(--border-strong); box-shadow: var(--shadow-lift); }
  .pop-row:hover .pop-icon,
  .card--interactive:hover .pop-icon { transform: scale(1.09) rotate(-3deg); background: var(--ink); color: #fff; }
}

/* ── Document list row (shared: Files dashboard + Categories detail) ──────── */
/* A file row: icon · title + description · (optional tag) · date/kebab.
   The whole row opens the file via a stretched link on .doc__title. Hover #05
   pops the icon and swaps the date for the actions; touch keeps both visible. */
.doc-list { margin-inline: -.75rem; }
.doc { position: relative; display: flex; align-items: center; gap: .875rem; padding: .75rem; border-radius: var(--r-lg); cursor: pointer; transition: background var(--t-fast) ease-out; }
.doc__icon { width: 2.25rem; height: 2.25rem; transition: transform var(--t-fast) ease-out, background var(--t-fast) ease-out, color var(--t-fast) ease-out; }
.doc__icon .ti { font-size: 17px; }
.doc__body { flex: 1; min-width: 0; }
.doc__title { display: block; font-size: var(--fs-lg); font-weight: 500; letter-spacing: -.01em; }
.doc__title::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); } /* stretched link */
.doc__title:focus-visible { outline: none; }
.doc__title:focus-visible::after { outline: 2px solid var(--accent); outline-offset: -2px; }
.doc__desc { display: block; margin-top: .125rem; font-size: var(--fs-sm); color: var(--faint); } /* block → .truncate ellipsis works */
.doc__meta { position: relative; z-index: 1; flex: none; display: flex; align-items: center; justify-content: flex-end; width: 4.75rem; min-height: 2.25rem; }
.doc__date { font-size: var(--fs-sm); color: var(--faint); font-variant-numeric: tabular-nums; transition: opacity var(--t-fast) ease-out; }
.doc__kebab { position: absolute; top: 50%; right: 0; transform: translateY(-50%); opacity: 0; pointer-events: none; transition: opacity var(--t-fast) ease-out; }
.doc-menu .doc__kebab { position: static; transform: none; }
.doc__kebab.menu__trigger { width: 1.75rem; height: 1.75rem; padding: 0; justify-content: center; gap: 0; }
.doc-menu { position: absolute; top: 50%; right: 0; z-index: var(--z-menu); width: 1.75rem; height: 1.75rem; transform: translateY(-50%); }
.doc-menu__pop { top: calc(100% + 6px); right: 0; min-width: 8.75rem; }
.doc-menu .menu-item { text-decoration: none; }
.doc[data-actions-open="true"] { background: var(--surface-1); z-index: var(--z-pop); }
.doc[data-actions-open="true"] .doc__date { opacity: 0; }
.doc[data-actions-open="true"] .doc__kebab { opacity: 1; pointer-events: auto; }
@media (hover: hover) {
  .doc:hover { background: var(--surface-1); }
  .doc:hover .doc__icon { transform: scale(1.09) rotate(-3deg); background: var(--ink); color: #fff; }
  .doc:hover .doc__date { opacity: 0; }
  .doc:hover .doc__kebab { opacity: 1; pointer-events: auto; }
  .doc:hover .doc-menu[data-open="true"] .doc__kebab { opacity: 1; pointer-events: auto; }
}
@media (hover: none) {
  .doc__meta { width: auto; gap: .25rem; }
  .doc__kebab { opacity: 1; pointer-events: auto; }
  .doc-menu { position: relative; top: auto; right: auto; transform: none; }
}

/* ── Section page header (title + optional action) ────────────────────────── */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding-top: 3rem; margin-bottom: 1.75rem; }
.page-head__title { font-size: var(--fs-title); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
.page-head__subtitle { margin-top: .375rem; font-size: var(--fs-lg); color: var(--muted); text-wrap: pretty; }
.page-head__actions { display: flex; align-items: center; gap: .5rem; flex: none; }
@media (max-width: 480px) { .page-head { padding-top: 2rem; flex-wrap: wrap; } }