/* ============================================================
   FAMIRISMA — Gedeelde stijl, gebaseerd op het prototype-ontwerp
   ============================================================ */
:root{
  --bg: #EDE6D3;
  --surface: #F8F3E6;
  --surface-2: #FBF8EF;
  --ink: #26211A;
  --ink-soft: #5B5344;
  --forest: #2C4A3E;
  --forest-dark: #1C332A;
  --gold: #C9A227;
  --gold-soft: #E4C766;
  --rust: #B5563B;
  --bark: #6B4E32;
  --bark-dark: #47331F;
  --line: #D9CEB0;
  --shadow: 0 6px 20px rgba(38,33,26,0.10);
  --radius: 14px;
  --font-display: 'Fraunces', serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}
body.dark-mode{
  --bg: #1B1712;
  --surface: #262019;
  --surface-2: #2E2720;
  --ink: #EDE6D6;
  --ink-soft: #B3A891;
  --forest: #4A7A64;
  --forest-dark: #365C4C;
  --gold: #D9B34E;
  --gold-soft: #E9CD82;
  --rust: #D3775A;
  --bark: #5C4530;
  --bark-dark: #40301F;
  --line: #3C332A;
  --shadow: 0 6px 20px rgba(0,0,0,0.35);
}
body{transition:background-color .2s ease, color .2s ease;}
*{box-sizing:border-box;}
body{margin:0; font-family:var(--font-body); background:var(--bg); color:var(--ink);}

.auth-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
}
.auth-card{
  background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:36px 32px; max-width:400px; width:100%;
}
.auth-logo{
  font-family:var(--font-display); font-size:26px; font-weight:600; color:var(--forest);
  display:flex; align-items:center; gap:8px; margin-bottom:4px;
}
.auth-sub{font-size:13px; color:var(--ink-soft); margin-bottom:26px; font-family:var(--font-mono);}
.field{margin-bottom:16px;}
label{font-size:12px; font-weight:600; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.4px; margin-bottom:5px; display:block;}
input{
  font-family:var(--font-body); font-size:14px; border:1.5px solid var(--line); border-radius:8px;
  padding:10px 12px; background:var(--surface-2); color:var(--ink); width:100%;
}
input:focus{outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold);}
.btn{
  font-family:var(--font-body); font-weight:600; font-size:14px; border:none; cursor:pointer;
  padding:11px 18px; border-radius:8px; width:100%; transition:background .15s, opacity .15s;
}
.btn-primary{background:var(--forest); color:#F3EEDD;}
.btn-primary:hover{background:var(--forest-dark);}
.btn:disabled{opacity:0.6; cursor:not-allowed;}
.auth-message{font-size:13px; padding:10px 12px; border-radius:8px; margin-bottom:16px; display:none;}
.auth-message.error{display:block; background:#F7E3DC; color:var(--rust);}
.auth-message.success{display:block; background:#E4EEE8; color:var(--forest);}
.auth-footer{margin-top:18px; font-size:12.5px; color:var(--ink-soft); text-align:center;}
.auth-footer a{color:var(--forest); font-weight:600; text-decoration:none;}
.readonly-note{font-size:12px; color:var(--ink-soft); margin-top:4px;}

/* ---------- App shell ---------- */
.app-header{
  display:flex; justify-content:space-between; align-items:center; padding:16px 24px;
  background:var(--forest); color:#F3EEDD; flex-wrap:wrap; gap:10px;
}
.app-header .logo{font-family:var(--font-display); font-size:20px; font-weight:600;}
.app-header .nav-links a{color:#DCE6DF; text-decoration:none; font-size:13.5px; font-weight:600; margin-left:18px;}
.app-header .nav-links a:hover{color:var(--gold);}
.header-search-wrap{position:relative; flex:1; max-width:260px; margin:0 20px;}
#global-search{
  width:100%; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.25); color:#F3EEDD;
  font-size:13px; padding:7px 12px; border-radius:8px;
}
#global-search::placeholder{color:rgba(243,238,221,0.65);}
#global-search:focus{outline:none; border-color:var(--gold); background:rgba(255,255,255,0.18);}
#search-results{
  position:absolute; top:100%; left:0; right:0; margin-top:6px; background:var(--surface); border-radius:10px;
  box-shadow:var(--shadow); max-height:320px; overflow-y:auto; z-index:200;
}
.nav-toggle{display:none; background:none; border:1px solid rgba(255,255,255,0.3); color:#F3EEDD; border-radius:6px; padding:5px 10px; cursor:pointer; font-size:16px;}
.app-main{max-width:920px; margin:0 auto; padding:28px 20px 60px;}
.card{background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px 22px; margin-bottom:16px;}
.page-title{font-family:var(--font-display); font-size:28px; font-weight:600; margin-bottom:4px;}
.page-sub{font-size:13.5px; color:var(--ink-soft); margin-bottom:20px;}
.row{display:flex; gap:12px;}
.row > *{flex:1;}
select{
  font-family:var(--font-body); font-size:14px; border:1.5px solid var(--line); border-radius:8px;
  padding:9px 12px; background:var(--surface-2); color:var(--ink); width:100%;
}
.btn-ghost{background:transparent; color:var(--forest); border:1.5px solid var(--line); width:auto;}
.btn-gold{background:var(--gold); color:var(--forest-dark); width:auto;}
.btn-rust{background:var(--rust); color:#FCEFE9; width:auto;}
.hidden{display:none !important;}
.empty-hint{font-size:13px; color:var(--ink-soft); font-style:italic;}

/* ---------- Tree canvas ---------- */
.tree-scroll-wrap{overflow:auto; margin:0 auto; -webkit-overflow-scrolling:touch; max-height:75vh; border-radius:10px;}
.tree-canvas{position:relative; margin:0 auto;}
.tree-svg{position:absolute; inset:0; width:100%; height:100%; z-index:0;}
.tree-node-abs{position:absolute; transform:translate(-50%,-50%); width:90px; text-align:center; cursor:pointer; z-index:1;}
.leaf-wrap{position:relative; width:54px; height:54px; margin:0 auto; transition:transform .15s;}
.tree-node-abs:hover .leaf-wrap{transform:scale(1.12) rotate(-4deg);}
.leaf-wrap svg{filter:drop-shadow(0 3px 6px rgba(38,33,26,0.3));}
.leaf-initial{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:15px; color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,0.4); padding-top:2px;
}
.nname{font-size:10.5px; font-weight:700; margin-top:4px; color:var(--ink); background:var(--surface-2); border-radius:5px; padding:2px 5px; display:block; width:80px; margin-left:auto; margin-right:auto; word-wrap:break-word; overflow-wrap:break-word; hyphens:auto; line-height:1.25; box-sizing:border-box; box-shadow:0 1px 4px rgba(0,0,0,0.15);}
.nrole{font-size:9px; color:var(--ink-soft); margin-top:1px; width:80px; margin-left:auto; margin-right:auto; word-wrap:break-word; overflow-wrap:break-word; line-height:1.2;}
.profile-panel{margin-top:20px; display:flex; gap:16px; align-items:center; flex-wrap:wrap;}
.profile-panel .frame{width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600; font-size:19px; color:#fff; flex-shrink:0;}

/* ---------- Modal (QR invite) ---------- */
.modal-overlay{position:fixed; inset:0; background:rgba(38,33,26,0.5); display:flex; align-items:center; justify-content:center; z-index:1000;}
.modal-card{background:var(--surface); border-radius:var(--radius); padding:28px; max-width:340px; width:90%; text-align:center; box-shadow:0 20px 50px rgba(38,33,26,0.35);}

/* ---------- Events ---------- */
.event-card{display:flex; gap:16px; align-items:flex-start;}
.event-date{width:58px; flex-shrink:0; text-align:center; background:var(--forest); color:#F3EEDD; border-radius:10px; padding:8px 4px;}
.event-date .mon{font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.5px; text-transform:uppercase;}
.event-date .day{font-family:var(--font-display); font-size:22px; font-weight:700; line-height:1.1;}
.event-title{font-weight:600; font-size:16px; margin-bottom:3px;}
.event-meta{font-size:12.5px; color:var(--ink-soft); margin-bottom:8px;}
.event-host{font-size:12px; color:var(--ink-soft);}
.rsvp-count{font-family:var(--font-mono); font-size:11.5px; color:var(--forest); font-weight:600;}

/* ---------- Chat ---------- */
.chat-layout{display:flex; gap:16px; height:520px;}
.chat-list{width:220px; flex-shrink:0; background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); overflow-y:auto; padding:8px;}
.chat-item{display:flex; align-items:center; gap:10px; padding:10px; border-radius:10px; cursor:pointer;}
.chat-item:hover{background:var(--surface-2);}
.chat-item.active{background:var(--forest); color:#F3EEDD;}
.chat-item .name{font-size:13.5px; font-weight:600;}
.chat-avatar{width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600; color:#fff; flex-shrink:0;}
.chat-window{flex:1; background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); display:flex; flex-direction:column; overflow:hidden;}
.chat-header{padding:14px 18px; border-bottom:1px solid var(--line); font-weight:600; font-family:var(--font-display); font-size:18px;}
.chat-messages{flex:1; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:10px;}
.msg{max-width:70%; padding:9px 13px; border-radius:14px; font-size:13.5px; line-height:1.4;}
.msg.them{background:var(--surface-2); border:1px solid var(--line); align-self:flex-start; border-bottom-left-radius:4px;}
.msg.me{background:var(--forest); color:#F3EEDD; align-self:flex-end; border-bottom-right-radius:4px;}
.msg .meta{font-size:10px; opacity:0.65; margin-top:3px; font-family:var(--font-mono);}
.chat-input-row{display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--line);}
.chat-input-row input{flex:1;}
@media (max-width: 700px){
  .chat-layout{flex-direction:column; height:auto;}
  .chat-list{width:100%; max-height:160px;}
}

/* ---------- Mobielvriendelijk (site-breed) ---------- */
@media (max-width: 680px){
  .app-header{padding:12px 16px; justify-content:space-between; text-align:left;}
  .app-header .logo{width:auto; text-align:left; margin-bottom:0;}
  .nav-toggle{display:inline-block;}
  .header-search-wrap{order:3; max-width:100%; width:100%; margin:8px 0 0;}
  .app-header .nav-links{
    display:none; width:100%; order:4; flex-direction:column; gap:2px;
    background:var(--forest-dark); border-radius:10px; padding:10px; margin-top:10px;
  }
  .app-header .nav-links.nav-open{display:flex;}
  .app-header .nav-links a, .app-header .nav-links button{
    margin-left:0; padding:9px 10px; border-radius:8px; width:100%; text-align:left; box-sizing:border-box;
  }
  .app-header .nav-links a:hover, .app-header .nav-links button:hover{background:rgba(255,255,255,0.08);}
  .app-main{padding:18px 14px 50px;}
  .card{padding:16px 16px;}
  .page-title{font-size:23px;}
  .row{flex-direction:column; gap:0;}
  .auth-card{padding:26px 22px;}
  .profile-head{flex-direction:column; text-align:center;}
  .event-card{flex-wrap:wrap;}
}