/* ============================================================
   DepartingNotes — Dashboard / App shell (Member + Admin)
   Builds on styles.css tokens. Warm forest sidebar + ivory app.
   ============================================================ */

.app{display:grid; grid-template-columns:264px 1fr; min-height:100dvh; background:var(--paper)}

/* ---------- Sidebar ---------- */
.sidebar{background:var(--ink-deep); color:#C9C2B4; display:flex; flex-direction:column; position:sticky; top:0; height:100dvh; padding:1.4rem 1rem; gap:.3rem}
.sidebar .brand{color:#fff; font-size:1.15rem; padding:.2rem .6rem 1.2rem; gap:.55rem}
.sidebar .brand .mark{width:32px; height:32px}
.side-section{font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:#6F6A5E; padding:1rem .8rem .4rem}
.side-link{display:flex; align-items:center; gap:.8rem; padding:.7rem .8rem; border-radius:12px; color:#B7B0A2; font-weight:500; font-size:.93rem; cursor:pointer; transition:background .2s,color .2s; position:relative; width:100%; text-align:left}
.side-link svg{width:20px; height:20px; flex:none}
.side-link:hover{background:rgba(255,255,255,.06); color:#fff}
.side-link.active{background:var(--forest); color:#fff}
.side-link.active::before{content:""; position:absolute; left:-1rem; top:50%; transform:translateY(-50%); width:4px; height:22px; background:var(--gold); border-radius:0 4px 4px 0}
.side-link .badge{margin-left:auto; background:var(--gold); color:#fff; font-size:.7rem; font-weight:700; padding:.1rem .45rem; border-radius:999px; min-width:20px; text-align:center}
.side-foot{margin-top:auto; padding-top:1rem; border-top:1px solid rgba(255,255,255,.08)}
.side-user{display:flex; align-items:center; gap:.7rem; padding:.6rem .5rem; border-radius:12px}
.side-user .avatar{width:38px; height:38px; border-radius:50%; background:var(--gold); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; flex:none}
.side-user b{color:#fff; font-size:.9rem; display:block; line-height:1.2}
.side-user span{color:#8C8576; font-size:.78rem}

/* ---------- Main ---------- */
.main{display:flex; flex-direction:column; min-width:0}
.topbar{position:sticky; top:0; z-index:40; background:rgba(251,248,243,.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:1rem; padding:1rem clamp(1.2rem,3vw,2.2rem)}
.topbar h1{font-size:1.5rem; margin:0}
.topbar .sub{color:var(--text-mute); font-size:.85rem}
.topbar-spacer{flex:1}
.icon-btn{width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--text-soft); border:1px solid var(--border); background:var(--surface); position:relative; transition:.2s}
.icon-btn:hover{border-color:var(--forest); color:var(--forest)}
.icon-btn svg{width:20px; height:20px}
.icon-btn .dot{position:absolute; top:8px; right:9px; width:9px; height:9px; background:var(--rose); border-radius:50%; border:2px solid var(--surface)}
.points-pill{display:flex; align-items:center; gap:.45rem; background:var(--gold-soft); color:#6B4A18; font-weight:700; padding:.55rem .9rem; border-radius:999px; font-size:.9rem}
.points-pill svg{width:16px; height:16px; color:var(--gold)}
.menu-btn{display:none}
.app-search{display:flex; align-items:center; gap:.5rem; background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:.5rem .9rem; color:var(--text-mute); min-width:220px}
.app-search input{border:none; background:none; outline:none; font:inherit; font-size:.9rem; width:100%; color:var(--text)}
.app-search svg{width:18px; height:18px}

.view-wrap{padding:clamp(1.2rem,3vw,2.2rem); max-width:1240px; width:100%}
.view{display:none; animation:fade .4s var(--ease)}
.view.active{display:block}
@keyframes fade{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.view{animation:none}}

/* ---------- Dashboard cards & grid ---------- */
.d-grid{display:grid; gap:1.2rem}
.cols-2{grid-template-columns:repeat(2,1fr)} .cols-3{grid-template-columns:repeat(3,1fr)} .cols-4{grid-template-columns:repeat(4,1fr)}
.span-2{grid-column:span 2}
.dcard{background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:1.5rem; box-shadow:var(--shadow-sm)}
.dcard h3{font-size:1.15rem; margin-bottom:.2rem}
.dcard .card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; gap:1rem}
.dcard .card-head h3{margin:0}

/* KPI stat */
.kpi{display:flex; flex-direction:column; gap:.3rem}
.kpi .kpi-ico{width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--sage-soft); color:var(--forest); margin-bottom:.6rem}
.kpi .kpi-ico.gold{background:var(--gold-soft); color:var(--gold)} .kpi .kpi-ico.rose{background:#F3DED8; color:var(--rose)} .kpi .kpi-ico.forest{background:var(--forest); color:#fff}
.kpi .kpi-ico svg{width:22px; height:22px}
.kpi .v{font-family:var(--font-display); font-size:2rem; font-weight:700; color:var(--text); line-height:1}
.kpi .l{color:var(--text-mute); font-size:.85rem}
.kpi .delta{font-size:.8rem; font-weight:600; display:inline-flex; align-items:center; gap:.2rem}
.kpi .delta.up{color:#3F7D52} .kpi .delta.down{color:#B4453A}

/* Progress ring */
.ring-wrap{display:flex; align-items:center; gap:1.5rem}
.ring{--p:0; width:120px; height:120px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:conic-gradient(var(--gold) calc(var(--p)*1%), var(--sage-soft) 0)}
.ring::before{content:""; position:absolute; width:92px; height:92px; border-radius:50%; background:var(--surface)}
.ring b{position:relative; font-family:var(--font-display); font-size:1.8rem; color:var(--forest)}
.ring-wrap-inner{position:relative; display:grid; place-items:center}

/* progress bar */
.pbar{height:10px; background:var(--paper-2); border-radius:999px; overflow:hidden}
.pbar i{display:block; height:100%; background:var(--gold); border-radius:999px; transition:width 1s var(--ease)}
.pbar.sage i{background:var(--sage)}

/* Quick actions */
.qa-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem}
.qa{display:flex; flex-direction:column; gap:.5rem; padding:1.1rem; border:1px solid var(--border); border-radius:14px; background:var(--paper); transition:.25s; cursor:pointer; text-align:left}
.qa:hover{border-color:var(--forest); transform:translateY(-3px); box-shadow:var(--shadow-sm); background:var(--surface)}
.qa svg{width:24px; height:24px; color:var(--gold)}
.qa b{color:var(--forest); font-size:.95rem} .qa span{color:var(--text-mute); font-size:.8rem}

/* Activity feed / timeline */
.feed{display:flex; flex-direction:column}
.feed-item{display:flex; gap:.9rem; padding:.8rem 0; border-bottom:1px solid var(--border)}
.feed-item:last-child{border-bottom:none}
.feed-dot{width:36px; height:36px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; background:var(--sage-soft); color:var(--forest)}
.feed-dot.gold{background:var(--gold-soft); color:var(--gold)} .feed-dot.rose{background:#F3DED8; color:var(--rose)}
.feed-dot svg{width:18px; height:18px}
.feed-item .t{font-size:.92rem; color:var(--text)} .feed-item .m{font-size:.8rem; color:var(--text-mute)}
.feed-item .when{margin-left:auto; font-size:.78rem; color:var(--text-mute); white-space:nowrap}

/* Tables */
.dtable{width:100%; border-collapse:separate; border-spacing:0; font-size:.9rem}
.dtable th{text-align:left; font-weight:600; color:var(--text-mute); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; padding:.7rem 1rem; border-bottom:1px solid var(--border)}
.dtable td{padding:.85rem 1rem; border-bottom:1px solid var(--border); color:var(--text-soft)}
.dtable tbody tr{transition:background .15s} .dtable tbody tr:hover{background:var(--paper)}
.dtable .strong{color:var(--text); font-weight:600}
.table-scroll{overflow-x:auto}

/* Badges */
.badge-pill{display:inline-flex; align-items:center; gap:.35rem; font-size:.76rem; font-weight:700; padding:.25rem .6rem; border-radius:999px; letter-spacing:.02em}
.b-free{background:#EDEBE4; color:#6B6457} .b-essential{background:var(--sage-soft); color:#2F5340}
.b-premium{background:var(--gold-soft); color:#6B4A18} .b-family{background:#E5DBF1; color:#5B3E84}
.b-active{background:#DCEBDD; color:#2F7D43} .b-pending{background:#FBE9C8; color:#8A5A12} .b-hold{background:#FBE0DA; color:#A84A3A}
.b-paid{background:#DCEBDD; color:#2F7D43} .b-memorial{background:#E7E2D6; color:#6B6457}
.dot-status{width:8px; height:8px; border-radius:50%; display:inline-block} .dot-status.g{background:#3F9C5A} .dot-status.a{background:var(--gold)} .dot-status.r{background:var(--rose)}

/* Toggle switch */
.switch{position:relative; width:46px; height:26px; flex:none; cursor:pointer}
.switch input{opacity:0; width:0; height:0}
.switch .track{position:absolute; inset:0; background:var(--border); border-radius:999px; transition:.25s}
.switch .track::before{content:""; position:absolute; left:3px; top:3px; width:20px; height:20px; background:#fff; border-radius:50%; transition:.25s; box-shadow:var(--shadow-sm)}
.switch input:checked + .track{background:var(--forest)} .switch input:checked + .track::before{transform:translateX(20px)}

/* Segmented (EN/ES etc) */
.seg{display:inline-flex; background:var(--paper-2); border-radius:999px; padding:.25rem}
.seg button{padding:.4rem .9rem; border-radius:999px; font-size:.85rem; font-weight:600; color:var(--text-mute)}
.seg button.active{background:var(--surface); color:var(--forest); box-shadow:var(--shadow-sm)}

/* Mini bar chart */
.bars{display:flex; align-items:flex-end; gap:.6rem; height:160px; padding-top:1rem}
.bars .bar-col{flex:1; display:flex; flex-direction:column; align-items:center; gap:.5rem; height:100%; justify-content:flex-end}
.bars .bar{width:100%; max-width:46px; background:linear-gradient(var(--forest),var(--forest-600)); border-radius:8px 8px 0 0; transition:height 1s var(--ease); min-height:4px}
.bars .bar.gold{background:linear-gradient(var(--gold),#D6A65A)}
.bars .bar-l{font-size:.76rem; color:var(--text-mute)}
.legend{display:flex; gap:1.2rem; flex-wrap:wrap; font-size:.82rem; color:var(--text-soft)}
.legend i{width:12px; height:12px; border-radius:3px; display:inline-block; margin-right:.4rem; vertical-align:-1px}

/* Category chips (vault) */
.cat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem}
.cat{display:flex; flex-direction:column; gap:.3rem; padding:1rem; border:1px solid var(--border); border-radius:14px; background:var(--paper); cursor:pointer; transition:.2s}
.cat:hover{border-color:var(--sage); background:var(--surface)}
.cat svg{width:22px; height:22px; color:var(--forest)}
.cat b{font-size:.88rem; color:var(--text)} .cat span{font-size:.76rem; color:var(--text-mute)}

/* Letter editor */
.editor-toolbar{display:flex; gap:.3rem; flex-wrap:wrap; padding:.6rem; border:1px solid var(--border); border-bottom:none; border-radius:12px 12px 0 0; background:var(--paper)}
.editor-toolbar button{width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--text-soft)}
.editor-toolbar button:hover{background:var(--surface); color:var(--forest)}
.editor-toolbar svg{width:18px; height:18px}
.editor-area{border:1px solid var(--border); border-radius:0 0 12px 12px; padding:1.4rem; min-height:240px; background:var(--surface); font-family:var(--font-display); font-size:1.05rem; line-height:1.8; color:var(--text); outline:none}
.editor-area:focus{border-color:var(--forest)}

/* Card preview (member) */
.dn-card{background:var(--forest); border-radius:16px; padding:1.4rem; color:#fff; box-shadow:var(--shadow); aspect-ratio:1.6/1; display:flex; flex-direction:column; justify-content:space-between}
.dn-card.back{background:var(--ink-deep)} .dn-card .muted{color:#9FB6A6; font-size:.72rem}

/* Timeline (shipping / release) */
.timeline{display:flex; flex-direction:column; gap:0}
.tl-item{display:flex; gap:1rem; position:relative; padding-bottom:1.3rem}
.tl-item::before{content:""; position:absolute; left:13px; top:28px; bottom:0; width:2px; background:var(--border)}
.tl-item:last-child::before{display:none}
.tl-dot{width:28px; height:28px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; background:var(--paper-2); color:var(--text-mute); border:2px solid var(--border); z-index:1}
.tl-item.done .tl-dot{background:var(--sage); color:#fff; border-color:var(--sage)}
.tl-item.current .tl-dot{background:var(--gold); color:#fff; border-color:var(--gold)}
.tl-item .tl-t{font-weight:600; color:var(--text); font-size:.93rem} .tl-item .tl-m{font-size:.82rem; color:var(--text-mute)}
.tl-dot svg{width:15px; height:15px}

/* Verify queue card */
.verify-card{border:1px solid var(--border); border-radius:var(--r); padding:1.4rem; background:var(--surface); box-shadow:var(--shadow-sm)}
.verify-card.urgent{border-left:4px solid var(--gold)}
.verify-actions{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem}
.btn-sm{padding:.55rem 1rem; min-height:42px; font-size:.88rem; border-radius:10px}
.btn-approve{background:#2F7D43; color:#fff} .btn-approve:hover{background:#286b39}
.btn-hold{background:var(--gold-soft); color:#6B4A18} .btn-hold:hover{background:#e3c79a}
.btn-reject{background:#FBE0DA; color:#A84A3A} .btn-reject:hover{background:#f3cabf}
.cert-thumb{width:74px; height:90px; border-radius:8px; background:var(--paper-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-mute); flex:none}
.cert-thumb svg{width:30px; height:30px}

/* Notice in app */
.app-note{display:flex; gap:.7rem; align-items:flex-start; background:var(--sage-soft); border-radius:12px; padding:.9rem 1.1rem; color:#2F5340; font-size:.88rem}
.app-note svg{width:20px; height:20px; flex:none; color:var(--forest)}
.app-note.warn{background:var(--gold-soft); color:#6B4A18} .app-note.warn svg{color:var(--gold)}

/* Invite link row */
.copy-row{display:flex; gap:.5rem; align-items:center; background:var(--paper); border:1px solid var(--border); border-radius:10px; padding:.5rem .5rem .5rem .9rem; font-size:.85rem; color:var(--text-soft)}
.copy-row code{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:monospace}

.pagehint{color:var(--text-mute); font-size:.85rem; margin-top:.4rem}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .cols-4{grid-template-columns:repeat(2,1fr)} .cols-3{grid-template-columns:1fr} .qa-grid{grid-template-columns:1fr} .cat-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed; left:0; top:0; z-index:200; width:264px; transform:translateX(-100%); transition:transform .3s var(--ease); box-shadow:var(--shadow-lg)}
  .app.nav-open .sidebar{transform:none}
  .app.nav-open::after{content:""; position:fixed; inset:0; background:rgba(21,35,30,.5); z-index:150}
  .menu-btn{display:flex} .app-search{display:none}
  .cols-2,.span-2{grid-template-columns:1fr; grid-column:auto}
}
@media (max-width:520px){
  .cols-4{grid-template-columns:1fr} .cat-grid{grid-template-columns:1fr}
  .topbar h1{font-size:1.2rem} .points-pill{display:none}
}

/* ============================================================
   Free-plan member view — matches the live Base44 app
   ============================================================ */
.topbar.minimal{display:none}
@media (max-width:860px){
  .topbar.minimal{display:flex; align-items:center; gap:1rem; padding:1rem 1.2rem; position:sticky; top:0; z-index:40;
    background:rgba(251,248,243,.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--border)}
}
.view-head{margin-bottom:1.4rem}
.view-head .vh-eyebrow{font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:700}
.view-head h1{font-family:var(--font-display); font-size:clamp(1.8rem,4vw,2.6rem); color:var(--forest); margin:.2rem 0 .1rem}
.view-head .sub{color:var(--text-mute); font-size:.95rem}
.view-head.row{display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap}

.statcard{background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:1.3rem; box-shadow:var(--shadow-sm)}
.statcard .si{width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:var(--sage-soft); color:var(--forest); margin-bottom:1rem}
.statcard .si svg{width:20px; height:20px}
.statcard .v{font-family:var(--font-display); font-size:2rem; font-weight:700; color:var(--text); line-height:1}
.statcard .l{color:var(--text-mute); font-size:.85rem; margin-top:.25rem}

.unlock-grid{display:grid; grid-template-columns:1fr 1fr; gap:.7rem}
@media (max-width:680px){.unlock-grid{grid-template-columns:1fr}}
.unlock-item{display:flex; align-items:center; gap:.7rem; background:var(--paper); border:1px solid var(--border); border-radius:12px; padding:.85rem 1rem; color:var(--text-soft); font-size:.92rem}
.unlock-item .lk{width:30px; height:30px; border-radius:8px; background:var(--gold-soft); color:var(--gold); display:flex; align-items:center; justify-content:center; flex:none}
.unlock-item .lk svg{width:15px; height:15px}

.checklist{display:flex; flex-direction:column; gap:.75rem; margin-top:1.1rem}
.checklist .ci{display:flex; align-items:center; gap:.6rem; font-size:.95rem; color:var(--text)}
.checklist .ci.done{color:var(--text-mute); text-decoration:line-through}
.checklist .ci .mark{width:22px; height:22px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; border:2px solid var(--border); color:transparent}
.checklist .ci.done .mark{background:var(--forest); border-color:var(--forest); color:#fff}
.checklist .ci .mark svg{width:13px; height:13px}

.cat.locked{background:var(--gold-soft); border-color:#E6CF9F; position:relative}
.cat.locked .lockico{position:absolute; top:.7rem; right:.7rem; color:var(--gold)}
.cat.locked .lockico svg{width:15px; height:15px}
.cat .up{color:var(--gold); font-weight:700; font-size:.76rem}

.access-list .ar{display:flex; justify-content:space-between; align-items:center; padding:.6rem 0; border-bottom:1px solid var(--border); font-size:.9rem; color:var(--text-soft)}
.access-list .ar:last-child{border-bottom:none}
.access-list .ar .yes{color:var(--sage); font-weight:700} .access-list .ar .no{color:var(--text-mute)}

.gate-pill{display:inline-flex; align-items:center; gap:.45rem; background:var(--gold-soft); color:#6B4A18; font-weight:600; font-size:.82rem; padding:.5rem .9rem; border-radius:var(--r-pill)}
.gate-pill svg{width:15px; height:15px}
.gate-pill a,.gate-pill strong{color:#6B4A18; font-weight:700; text-decoration:underline}

.av{width:46px; height:46px; border-radius:50%; background:var(--sage-soft); color:var(--forest); display:flex; align-items:center; justify-content:center; font-weight:700; font-family:var(--font-display); flex:none}