/* Arkkids Jaarplanner – Frontend v2.1.0 */

/* ── Calendar wrapper ───────────────────────────────────────────────── */
.ajp-cal { max-width:900px; margin:1.5rem auto; padding:1rem; border:1px solid rgba(0,0,0,.08); border-radius:12px; font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; font-size:16px; line-height:1.55; color:#111827; }
.ajp-cal-title { margin:0 0 1rem; font-size:1.55rem; font-weight:800; display:flex; align-items:center; gap:.4rem; }

/* ── Auth / password wall ───────────────────────────────────────────── */
.ajp-auth-wall,.ajp-pw-wall { text-align:center; padding:2.5rem 1rem; }
.ajp-auth-msg { font-size:1.1rem; display:flex; align-items:center; justify-content:center; gap:.4rem; }
.ajp-auth-msg a { color:#1e6bd6; font-weight:700; }
.ajp-pw-form { max-width:340px; margin:1.25rem auto 0; text-align:left; }
.ajp-pw-form label { font-weight:700; display:block; margin-bottom:.35rem; }
.ajp-pw-form input[type="password"] { width:100%; box-sizing:border-box; padding:.55rem .7rem; border-radius:8px; border:1px solid rgba(0,0,0,.2); font:inherit; }

/* ── Notices ────────────────────────────────────────────────────────── */
.ajp-notice { margin:0 0 .75rem; padding:.6rem .8rem; border-radius:8px; background:#e6f7e9; border:1px solid #bfe7c6; font-size:.95rem; }
.ajp-notice-err { background:#ffecec; border-color:#ffc9c9; }

/* ── Month accordion ────────────────────────────────────────────────── */
.ajp-months { display:flex; flex-direction:column; gap:.75rem; }
.ajp-month  { border:1px solid rgba(0,0,0,.1); border-radius:12px; padding:.5rem; background:#fff; }
.ajp-month > summary { cursor:pointer; list-style:none; font-weight:700; font-size:1.05rem; display:flex; align-items:center; gap:.45rem; padding:.3rem .2rem; }
.ajp-month > summary::-webkit-details-marker { display:none; }
.ajp-mname { flex:1; }
.ajp-mbadges { display:inline-flex; align-items:center; gap:.4rem; }
.ajp-mbadge { display:inline-flex; align-items:center; gap:.3rem; padding:.18rem .45rem; border-radius:999px; font-size:.88rem; font-weight:700; border:1px solid rgba(0,0,0,.12); }
.ajp-mb-pin  { background:rgba(30,107,214,.07); border-color:rgba(30,107,214,.2); color:#1e6bd6; }
.ajp-mb-meet { background:rgba(245,158,11,.1);  border-color:rgba(245,158,11,.3); color:#b45309; }

/* ── Items ──────────────────────────────────────────────────────────── */
.ajp-items { margin:.75rem 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.75rem; }
.ajp-item  { border:1px solid rgba(0,0,0,.08); border-radius:10px; padding:.85rem; background:rgba(0,0,0,.015); }
.ajp-item-title { margin:0 0 .35rem; font-size:1.05rem; font-weight:700; }
.ajp-content { font-size:.97rem; }
.ajp-content p { margin:.35rem 0; }

/* Item badges */
.ajp-badges { display:flex; flex-wrap:wrap; gap:.45rem; margin:.1rem 0 .55rem; }
.ajp-badge  { display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .5rem; border-radius:8px; font-size:.88rem; font-weight:700; border:1px solid rgba(0,0,0,.1); }
.ajp-b-pin  { background:rgba(30,107,214,.07); border-color:rgba(30,107,214,.2); color:#1e6bd6; }
.ajp-b-meet { background:rgba(245,158,11,.1);  border-color:rgba(245,158,11,.3); color:#b45309; }

/* Subitems */
.ajp-subs > summary { cursor:pointer; font-weight:700; font-size:.95rem; margin-top:.45rem; }
.ajp-subs ul  { margin:.4rem 0 0 1.1rem; }
.ajp-subs li  { margin-bottom:.2rem; }

/* Item action buttons */
.ajp-item-actions { margin-top:.7rem; display:flex; gap:.5rem; flex-wrap:wrap; }
.ajp-item-btn { display:inline-flex; align-items:center; gap:.3rem; padding:.38rem .65rem; border-radius:8px; font:inherit; font-size:.88rem; font-weight:700; cursor:pointer; text-decoration:none; border:1px solid rgba(0,0,0,.18); background:#f7f7f7; color:#111; transition:background .15s; }
.ajp-item-btn:hover { background:#eee; }
.ajp-item-btn-edit { border-color:#1e6bd6; color:#1e6bd6; background:rgba(30,107,214,.06); }
.ajp-item-btn-edit:hover { background:rgba(30,107,214,.12); }
.ajp-item-btn-del  { border-color:#b32d2e; color:#b32d2e; background:rgba(179,45,46,.06); }
.ajp-item-btn-del:hover { background:rgba(179,45,46,.12); }

/* ── Add form ───────────────────────────────────────────────────────── */
.ajp-form { margin-bottom:1rem; padding:.9rem; border:1px solid rgba(0,0,0,.1); border-radius:12px; background:rgba(30,107,214,.04); }
.ajp-form h3 { margin:.2rem 0 .8rem; font-weight:800; }
.ajp-form label { font-weight:700; }
.ajp-form input,.ajp-form select,.ajp-form textarea { max-width:100%; padding:.5rem .6rem; border-radius:8px; border:1px solid rgba(0,0,0,.18); font:inherit; }

/* Buttons */
.ajp-btn { display:inline-block; padding:.6rem .9rem; border-radius:8px; border:0; background:#1e6bd6; color:#fff; cursor:pointer; font-weight:800; font-size:1rem; text-decoration:none; }
.ajp-btn:hover { filter:brightness(.92); color:#fff; }
.ajp-btn-grey { background:#e0e0e0; color:#333; }
.ajp-btn-grey:hover { background:#ccc; color:#333; }
.ajp-btn-taken { background:#1e6bd6; display:inline-flex; align-items:center; gap:.4rem; }
.ajp-btn-wrap { margin-top:.6rem; }

/* Empty */
.ajp-empty { color:#888; font-style:italic; margin:.5rem 0; }

/* ── Edit overlay (modal) ───────────────────────────────────────────── */
.ajp-edit-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:99999; display:flex; align-items:center; justify-content:center; }
.ajp-edit-modal   { background:#fff; border-radius:14px; padding:1.5rem; max-width:540px; width:90%; max-height:90vh; overflow-y:auto; position:relative; }
.ajp-edit-modal h3 { margin:0 0 1rem; font-size:1.2rem; font-weight:800; }
.ajp-edit-modal label { font-weight:700; }
.ajp-edit-modal input,.ajp-edit-modal select,.ajp-edit-modal textarea { max-width:100%; padding:.5rem .6rem; border-radius:8px; border:1px solid rgba(0,0,0,.18); font:inherit; }
.ajp-edit-close { position:absolute; top:.75rem; right:.75rem; border:0; background:transparent; font-size:1.3rem; cursor:pointer; line-height:1; color:#555; }
.ajp-edit-close:hover { color:#000; }

/* Personen table */
.ajp-personen { margin-top:1.25rem; }
.ajp-personen h3 { font-size:1rem; font-weight:700; margin:0 0 .4rem; }
.ajp-personen table { width:100%; border-collapse:collapse; font-size:.9rem; }
.ajp-personen th,.ajp-personen td { border:1px solid rgba(0,0,0,.1); padding:5px 8px; text-align:left; }
.ajp-personen th { background:#f5f5f5; font-weight:700; }

/* ── Koppeling badge ────────────────────────────────────────────────── */
.ajp-b-koppeling { background:rgba(79,70,229,.08); border-color:rgba(79,70,229,.22); color:#3730a3; }
.ajp-b-koppeling .dashicons { color:#4f46e5; }
.ajp-badge-sub { font-size:.8em; font-weight:400; opacity:.85; }

.ajp-mb-link { background:rgba(79,70,229,.08); border-color:rgba(79,70,229,.2); color:#3730a3; }
.ajp-mb-link .dashicons { color:#4f46e5; }

/* ── Item header (title + badges inline) ───────────────────────────── */
.ajp-item-header { display:flex; flex-direction:column; gap:.3rem; margin-bottom:.4rem; }

/* ── Form section (koppeling veld in formulier) ─────────────────────── */
.ajp-form-section { background:rgba(79,70,229,.04); border:1px solid rgba(79,70,229,.15); border-radius:8px; padding:.7rem .85rem; margin:.6rem 0; }
.ajp-form-section label strong { color:#3730a3; }
.ajp-form-section select { border-color:rgba(79,70,229,.25); }

/* ── Timeout info on password form ─────────────────────────────────── */
.ajp-pw-timeout-info {
    font-size: .9rem;
    color: #555;
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: .5rem 0 1rem;
    padding: .5rem .75rem;
    background: rgba(245,158,11,.08);
    border: 1px solid rgba(245,158,11,.25);
    border-radius: 6px;
}
.ajp-pw-timeout-info .dashicons {
    color: #b45309;
    flex-shrink: 0;
}

/* ── Koppeling badge ────────────────────────────────────────────────── */
.ajp-b-koppeling { background:rgba(79,70,229,.08); border-color:rgba(79,70,229,.22); color:#3730a3; }
.ajp-badge-sub { font-size:.8em; font-weight:400; opacity:.85; }
.ajp-mb-link { background:rgba(79,70,229,.08); border-color:rgba(79,70,229,.2); color:#3730a3; }

/* ── Form section (koppeling veld) ──────────────────────────────────── */
.ajp-form-section { background:rgba(79,70,229,.04); border:1px solid rgba(79,70,229,.15); border-radius:8px; padding:.7rem .85rem; margin:.6rem 0; }

/* ── Vergaderitem badge ─────────────────────────────────────────────── */
.ajp-b-vergaderitem { background:rgba(126,34,206,.08); border-color:rgba(126,34,206,.22); color:#6d28d9; }
.ajp-mb-vergaderitem { background:rgba(126,34,206,.08); border-color:rgba(126,34,206,.2); color:#6d28d9; }

/* ── Label badge (dynamic colors via inline style) ───────────────────── */
.ajp-b-label { font-weight:700; border-width:1px; border-style:solid; }

/* ── Badge date inline ──────────────────────────────────────────────── */
.ajp-badge-date { font-size:.8em; font-weight:400; margin-left:3px; opacity:.85; }
.ajp-mbadge-date { font-size:.8em; font-weight:400; margin-left:3px; opacity:.9; }