/* ═══════════════════════════════════════════════════════════════════════
   Espace parent — web portal styles (2026-09-15)
   One stylesheet for every /parent/* page: hero + child switcher, week strip,
   module cards, shared panels. Logical properties throughout (RTL = Arabic),
   dark-mode rules at the bottom of THIS file (self-contained).
   ═══════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Kodchasan:wght@400;500;600;700&display=swap');

.pp-page { font-family: 'Kodchasan', 'Segoe UI', sans-serif; max-width: 1240px; margin: 0 auto; padding: 4px 8px 32px; }

/* ── Hero ───────────────────────────────────────────────────────────── */
.pp-hero {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, #1F3C88 0%, #6d3fa3 55%, #E5399E 100%);
    color: #fff; border-radius: 24px; padding: 20px 22px 16px;
    box-shadow: 0 10px 30px rgba(31, 60, 136, 0.25);
}
.pp-hero::before {
    content: ''; position: absolute; inset-inline-end: -60px; top: -70px; width: 260px; height: 260px;
    border-radius: 50%; background: rgba(255,255,255,0.08); pointer-events: none;
}
.pp-hero-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pp-hero-logo { width: 58px; height: 58px; border-radius: 16px; background: rgba(255,255,255,0.92); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; box-shadow: 0 4px 12px rgba(0,0,0,0.18); }
.pp-hero-logo img { width: 44px; height: 44px; object-fit: contain; }
.pp-hero-text { flex: 1 1 260px; min-width: 0; text-align: start; }
.pp-hero-greet { font-size: 0.86rem; opacity: 0.9; font-weight: 500; }
.pp-hero-title { font-size: 1.45rem; font-weight: 700; letter-spacing: 0.3px; line-height: 1.15; }
.pp-hero-sub { font-size: 0.86rem; opacity: 0.85; margin-top: 2px; }
.pp-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-inline-start: auto; }
.pp-hero-btn {
    display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 12px;
    background: rgba(255,255,255,0.16); border: 1.5px solid rgba(255,255,255,0.45); color: #fff !important;
    font-weight: 700; font-size: 0.8rem; text-decoration: none !important; transition: background .2s, transform .2s;
}
.pp-hero-btn:hover { background: rgba(255,255,255,0.28); transform: translateY(-1px); }
.pp-hero-btn-school { background: #fff; color: #1F3C88 !important; border-color: #fff; }
.pp-hero-btn-school:hover { background: #f1f4ff; }

/* child switcher */
.pp-children { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.pp-child {
    display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px;
    background: rgba(255,255,255,0.14); border: 1.5px solid rgba(255,255,255,0.35); color: #fff; cursor: pointer;
    font-family: inherit; text-align: start; transition: background .2s, transform .2s, box-shadow .2s;
    padding-inline-start: 6px; padding-inline-end: 14px;
}
.pp-child:hover { background: rgba(255,255,255,0.26); transform: translateY(-1px); }
.pp-child.is-active { background: #fff; color: #1F3C88; box-shadow: 0 6px 18px rgba(0,0,0,0.18); border-color: #fff; }
.pp-child.is-busy { opacity: 0.6; pointer-events: none; }
.pp-child.is-left { opacity: 0.75; }
.pp-child-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,0.35); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; border: 2px solid rgba(255,255,255,0.7); }
.pp-child.is-active .pp-child-avatar { background: #eef2ff; border-color: #E5399E; }
.pp-child-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pp-child-initials { font-weight: 700; font-size: 0.85rem; letter-spacing: 0.5px; }
.pp-child.is-active .pp-child-initials { color: #1F3C88; }
.pp-child-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.pp-child-name { font-weight: 700; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.pp-child-class { font-size: 0.72rem; opacity: 0.85; white-space: nowrap; }
.pp-child.is-active .pp-child-class { color: #E5399E; opacity: 1; font-weight: 600; }
.pp-child-check { color: #E5399E; font-size: 1rem; margin-inline-start: 2px; }
.pp-children-empty { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,0.14); font-size: 0.9rem; display: flex; align-items: center; gap: 10px; }

/* ── Week strip ─────────────────────────────────────────────────────── */
.pp-week { margin-top: 18px; background: #fff; border: 3px solid #e875ac; border-radius: 18px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.pp-week-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #e875ac; color: #fff; padding: 8px 10px; }
.pp-week-nav { width: 34px; height: 34px; border-radius: 10px; border: none; background: rgba(255,255,255,0.22); color: #fff; cursor: pointer; font-size: 0.9rem; transition: background .2s; }
.pp-week-nav:hover { background: rgba(255,255,255,0.4); }
[dir="rtl"] .pp-flip { transform: scaleX(-1); }
.pp-week-title { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 0.95rem; flex-wrap: wrap; justify-content: center; text-align: center; }
.pp-week-today { border: none; background: #fff; color: #e875ac; font-weight: 700; font-size: 0.72rem; padding: 4px 10px; border-radius: 999px; cursor: pointer; font-family: inherit; text-transform: uppercase; }
.pp-week-days { display: flex; gap: 6px; padding: 10px 10px 4px; overflow-x: auto; }
.pp-day { flex: 1 1 0; min-width: 62px; border: 1.5px solid #f1e3ec; background: #fff; border-radius: 14px; padding: 8px 4px 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; font-family: inherit; transition: all .18s; color: #333; }
.pp-day:hover { border-color: #e875ac; transform: translateY(-1px); }
.pp-day.is-today { border-color: #005DAA; }
.pp-day.is-today .pp-day-num { color: #005DAA; }
.pp-day.is-selected { background: #e875ac; border-color: #e875ac; color: #fff; }
.pp-day.is-selected .pp-day-num, .pp-day.is-selected .pp-day-name { color: #fff; }
.pp-day.is-empty { opacity: 0.7; }
.pp-day-name { font-size: 0.68rem; text-transform: uppercase; font-weight: 600; opacity: 0.8; }
.pp-day-num { font-size: 1.15rem; font-weight: 700; line-height: 1; }
.pp-day-num-text { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; }
.pp-day-count { min-width: 20px; height: 20px; border-radius: 10px; background: #1F3C88; color: #fff; font-size: 0.7rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; margin-top: 2px; }
.pp-day.is-selected .pp-day-count { background: #fff; color: #e875ac; }
.pp-day-count-zero { background: transparent; color: #bbb; }
.pp-day-all { flex: 0 0 auto; min-width: 74px; }
.pp-week-body { padding: 8px 10px 12px; min-height: 120px; }
.pp-week-loading, .pp-week-empty { text-align: center; color: #888; padding: 28px 10px; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; gap: 8px; }
.pp-week-empty i { font-size: 1.3rem; color: #e875ac; }
.pp-daygroup { margin-bottom: 8px; }
.pp-daygroup-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; color: #1F3C88; margin: 8px 4px 6px; text-align: start; letter-spacing: 0.3px; }
.pp-ev { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; background: #fafafa; border: 1px solid #f0f0f0; border-inline-start: 5px solid var(--ev, #41da91); margin-bottom: 6px; }
.pp-ev-icon { width: 32px; height: 32px; border-radius: 10px; background: var(--ev, #41da91); color: #fff; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 0.85rem; }
.pp-ev-main { min-width: 0; flex: 1; text-align: start; }
.pp-ev-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pp-ev-type { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; color: var(--ev, #41da91); letter-spacing: 0.4px; }
.pp-ev-time { font-size: 0.7rem; color: #777; }
.pp-ev-title { font-weight: 700; font-size: 0.92rem; color: #222; }
.pp-ev-desc { font-size: 0.8rem; color: #666; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Module cards ───────────────────────────────────────────────────── */
.pp-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
.pp-card {
    min-height: 130px; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #fff !important; text-decoration: none !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    font-size: 0.86rem; text-align: center; padding: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); transition: transform .25s, box-shadow .25s;
    position: relative; overflow: hidden;
}
.pp-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0)); pointer-events: none; }
.pp-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,0.16); }
.pp-card-icon { font-size: 30px; margin-bottom: 10px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); }
.pp-card-wide { grid-column: span 2; }
.pp-card-blue      { background: var(--wsc-blue, #005DAA); }
.pp-card-purple    { background: var(--wsc-purple, #ceafed); }
.pp-card-red       { background: var(--wsc-red, #ea7a77); }
.pp-card-orange    { background: var(--wsc-orange, #ffb951); }
.pp-card-turquoise { background: var(--wsc-turquoise, #34cccc); }
.pp-card-yellow    { background: var(--wsc-yellow, #c5df33); }
.pp-card-green     { background: var(--wsc-green, #41da91); }
.pp-card-slate     { background: var(--wsc-slate, #64748b); }
.pp-card-pink      { background: var(--wsc-pink, #e875ac); }
.pp-card-teal      { background: var(--wsc-teal, #34cccc); }
.pp-card-indigo    { background: var(--wsc-indigo, #4a148c); }
.pp-card-cyan      { background: var(--wsc-cyan, #26c6da); }
.pp-card-brown     { background: var(--wsc-brown, #8d6e63); }
.pp-card-badge { position: absolute; top: 10px; inset-inline-end: 10px; background: #fff; color: #E5399E; font-size: 0.68rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,0.15); }

/* ── Shared page panels (used by every portal page) ─────────────────── */
.pp-panel { background: #fff; border-radius: 18px; box-shadow: 0 4px 16px rgba(0,0,0,0.06); margin-top: 16px; overflow: hidden; }
.pp-panel-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #f0f0f0; background: #fafbff; }
.pp-panel-head-icon { width: 36px; height: 36px; border-radius: 10px; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; flex: 0 0 auto; }
.pp-panel-title { font-weight: 700; font-size: 1rem; color: #1F3C88; text-align: start; flex: 1; }
.pp-panel-body { padding: 14px 16px 18px; }
.pp-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.pp-tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: #fff; border: 1.5px solid #e6e6ef; color: #444; font-weight: 700; font-size: 0.82rem; text-decoration: none !important; font-family: inherit; cursor: pointer; transition: all .18s; }
.pp-tab:hover { border-color: #E5399E; color: #E5399E; }
.pp-tab.is-active { background: #1F3C88; border-color: #1F3C88; color: #fff; }
.pp-tab .pp-tab-count { background: rgba(0,0,0,0.08); border-radius: 999px; padding: 1px 7px; font-size: 0.7rem; }
.pp-tab.is-active .pp-tab-count { background: rgba(255,255,255,0.25); }
.pp-empty { text-align: center; color: #888; padding: 30px 12px; font-size: 0.92rem; }
.pp-empty i { display: block; font-size: 2rem; margin-bottom: 8px; color: #E5399E; }
.pp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; background: #eef2ff; color: #1F3C88; }
.pp-chip-green { background: #e6f9f0; color: #0f8a54; }
.pp-chip-red { background: #fdecec; color: #c62828; }
.pp-chip-amber { background: #fff4e0; color: #b26a00; }
.pp-chip-grey { background: #f1f1f4; color: #666; }
.pp-muted { color: #888; font-size: 0.82rem; }

@media (max-width: 900px) {
    .pp-cards { grid-template-columns: repeat(3, 1fr); }
    .pp-card-wide { grid-column: span 3; }
}
@media (max-width: 600px) {
    .pp-cards { grid-template-columns: repeat(2, 1fr); }
    .pp-card-wide { grid-column: span 2; }
    .pp-card { min-height: 110px; font-size: 0.74rem; }
    .pp-hero { border-radius: 18px; padding: 16px 14px 12px; }
    .pp-hero-title { font-size: 1.2rem; }
    .pp-child-name { max-width: 110px; }
}

/* ── Suivi hub ──────────────────────────────────────────────────────── */
.pp-subtabs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.pp-subtabs-label { font-size: 0.78rem; font-weight: 700; color: #1F3C88; margin-inline-end: 4px; }
.pp-subtab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; border: 1.5px solid #e6e6ef; background: #fff; color: #444; font-family: inherit; font-weight: 700; font-size: 0.78rem; cursor: pointer; transition: all .18s; }
.pp-subtab small { font-weight: 500; opacity: 0.7; }
.pp-subtab:hover { border-color: #E5399E; color: #E5399E; }
.pp-subtab.is-active { background: #E5399E; border-color: #E5399E; color: #fff; }
.pp-subtab.is-active .pp-tab-count { background: rgba(255,255,255,0.25); }
.pp-empty-title { font-weight: 700; color: #333; font-size: 1rem; margin-bottom: 4px; }

.pp-note-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.pp-note-card { background: #fff; border: 1.5px solid #eef0f5; border-inline-start: 6px solid var(--c, #005DAA); border-radius: 16px; padding: 14px 16px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.pp-note-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pp-note-title { font-weight: 700; font-size: 1rem; color: #222; text-align: start; }
.pp-note-score b { font-size: 1.5rem; color: var(--c, #005DAA); }
.pp-note-score small { color: #888; font-weight: 700; }
.pp-bar { height: 8px; background: #f0f1f5; border-radius: 999px; overflow: hidden; margin-top: 8px; }
.pp-bar span { display: block; height: 100%; border-radius: 999px; transition: width .4s; }
.pp-bar-lg { height: 10px; }
.pp-note-avg { margin-top: 10px; }
.pp-subs { margin-top: 12px; border-top: 1px dashed #eee; padding-top: 10px; }
.pp-sub { margin-bottom: 8px; }
.pp-sub-head { display: flex; justify-content: space-between; font-size: 0.8rem; color: #555; }
.pp-sub-head b { color: #222; }

.pp-indicator { display: flex; align-items: center; gap: 18px; padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--c, #41da91) 12%, #fff); border: 1.5px solid color-mix(in srgb, var(--c, #41da91) 40%, #fff); margin-bottom: 14px; }
.pp-indicator-ring { width: 74px; height: 74px; border-radius: 50%; border: 6px solid var(--c, #41da91); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.35rem; color: var(--c, #41da91); background: #fff; flex: 0 0 auto; }
.pp-indicator-ring small { font-size: 0.7rem; }
.pp-indicator-text { text-align: start; min-width: 0; }
.pp-indicator-emoji { font-size: 1.6rem; line-height: 1; }
.pp-indicator-msg { font-weight: 700; font-size: 1rem; color: #222; margin-top: 2px; }
.pp-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

.pp-chart-card { background: #fff; border: 1.5px solid #eef0f5; border-radius: 16px; padding: 14px 16px; }
.pp-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.pp-chart-title { font-weight: 700; font-size: 1rem; color: #222; text-align: start; }
.pp-chart-total { font-size: 2rem; font-weight: 700; color: var(--c, #ea7a77); }
.pp-chart { display: flex; gap: 6px; align-items: flex-end; height: 160px; }
.pp-chart-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; height: 100%; min-width: 0; }
.pp-chart-val { font-size: 0.72rem; font-weight: 700; color: #444; height: 16px; }
.pp-chart-bar { flex: 1; width: 100%; max-width: 34px; background: #f4f5f9; border-radius: 8px 8px 4px 4px; display: flex; align-items: flex-end; overflow: hidden; }
.pp-chart-bar span { display: block; width: 100%; border-radius: 8px 8px 0 0; transition: height .4s; }
.pp-chart-lbl { font-size: 0.66rem; font-weight: 700; color: #777; margin-top: 4px; text-transform: uppercase; }

.pp-records { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.pp-record { background: #fff; border: 1.5px solid #eef0f5; border-inline-start: 6px solid var(--c, #ceafed); border-radius: 16px; padding: 12px 14px; }
.pp-record-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pp-record-code { font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--c, #ceafed); color: #fff; }
.pp-record-title { font-weight: 700; color: #222; flex: 1; text-align: start; }
.pp-record-desc { color: #555; font-size: 0.85rem; margin-top: 6px; text-align: start; }
.pp-record-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.pp-record-meta small, .pp-record-obs small { display: block; font-size: 0.64rem; text-transform: uppercase; font-weight: 700; color: #999; letter-spacing: 0.4px; text-align: start; }
.pp-record-meta b { font-size: 0.82rem; color: #222; display: block; text-align: start; }
.pp-record-obs { margin-top: 10px; font-size: 0.85rem; color: #444; text-align: start; }
.pp-record-obs ul { margin: 4px 0 0; padding-inline-start: 18px; }

.pp-prog-head { display: flex; align-items: center; gap: 8px; font-size: 1rem; color: #1F3C88; margin-bottom: 10px; text-align: start; }
.pp-weeks { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; margin-bottom: 8px; }
.pp-weekchip { flex: 0 0 auto; min-width: 86px; border: 1.5px solid #e6e6ef; background: #fff; border-radius: 12px; padding: 6px 10px; cursor: pointer; font-family: inherit; display: flex; flex-direction: column; align-items: center; gap: 2px; color: #444; transition: all .18s; }
.pp-weekchip b { font-size: 0.9rem; }
.pp-weekchip small { font-size: 0.66rem; color: #888; white-space: nowrap; }
.pp-weekchip.has-lessons { border-color: #c5e6d4; }
.pp-weekchip.has-lessons b::after { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #41da91; margin-inline-start: 5px; vertical-align: middle; }
.pp-weekchip:hover { border-color: #E5399E; }
.pp-weekchip.is-active { background: #1F3C88; border-color: #1F3C88; color: #fff; }
.pp-weekchip.is-active small { color: rgba(255,255,255,0.8); }
.pp-prog { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.pp-prog-mat { background: #fff; border: 1.5px solid #eef0f5; border-radius: 16px; overflow: hidden; }
.pp-prog-mat-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--c, #005DAA); color: #fff; font-weight: 700; }
.pp-prog-mat-head .pp-tab-count { background: rgba(255,255,255,0.25); color: #fff; }
.pp-lesson { display: flex; gap: 10px; padding: 10px 14px; border-top: 1px solid #f0f0f0; align-items: flex-start; }
.pp-lesson-code { flex: 0 0 auto; font-size: 0.7rem; font-weight: 700; padding: 3px 8px; border-radius: 6px; background: color-mix(in srgb, var(--c, #005DAA) 15%, #fff); color: var(--c, #005DAA); }
.pp-lesson-main { min-width: 0; text-align: start; }
.pp-lesson-title { font-weight: 700; color: #222; font-size: 0.9rem; }

.pp-svp-intro { text-align: start; margin-bottom: 12px; }
.pp-svp-intro h4 { font-weight: 700; font-size: 1.05rem; color: #1F3C88; margin: 0; }
.pp-svp-intro p { color: #666; font-size: 0.86rem; margin: 2px 0 0; }
.pp-svp-cat { margin-top: 14px; border: 1.5px solid #eef0f5; border-radius: 16px; padding: 12px 14px; background: #fff; }
.pp-svp-cat-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.pp-svp-dot { width: 12px; height: 12px; border-radius: 50%; }
.pp-svp-cat-title { font-weight: 700; color: #222; }
.pp-svp-item { border-radius: 12px; padding: 10px 12px; margin-top: 8px; text-align: start; }
.pp-svp-strong { background: #eefaf3; border: 1px solid #c7ecd7; }
.pp-svp-attn { background: #fff7e8; border: 1px solid #f6dfb3; }
.pp-svp-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pp-svp-emoji { font-size: 1.1rem; }
.pp-svp-title { font-weight: 700; color: #222; flex: 1; }
.pp-svp-text { font-size: 0.86rem; color: #444; margin-top: 4px; }
.pp-svp-reassure { font-size: 0.82rem; color: #7c5a12; margin-top: 4px; font-style: italic; }
.pp-svp-actions { margin-top: 6px; }
.pp-svp-action { display: flex; gap: 6px; align-items: flex-start; font-size: 0.82rem; color: #333; margin-top: 3px; }
.pp-svp-action i { color: #41da91; margin-top: 2px; }
.pp-svp-normal { font-size: 0.85rem; color: #0f8a54; }

/* ── Devoirs ────────────────────────────────────────────────────────── */
.pp-dev-section { margin-bottom: 18px; }
.pp-dev-section-title { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #1F3C88; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.4px; margin-bottom: 10px; text-align: start; }
.pp-dev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.pp-dev { background: #fff; border: 1.5px solid #eef0f5; border-inline-start: 6px solid var(--c, #005DAA); border-radius: 16px; padding: 12px 14px; text-align: start; }
.pp-dev.is-past { opacity: 0.8; }
.pp-dev-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pp-dev-mat { font-weight: 700; color: var(--c, #005DAA); font-size: 0.95rem; }
.pp-dev-desc { color: #222; font-size: 0.92rem; margin-top: 8px; white-space: pre-line; }
.pp-dev-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; font-size: 0.76rem; color: #777; align-items: center; }
.pp-dev-file { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #eef2ff; color: #1F3C88 !important; font-weight: 700; text-decoration: none !important; }

/* ── Paiement ───────────────────────────────────────────────────────── */
.pp-banner { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px; margin-bottom: 12px; font-size: 0.86rem; text-align: start; }
.pp-banner span { flex-basis: 100%; font-size: 0.8rem; opacity: 0.85; }
.pp-banner-grey { background: #f1f1f4; color: #555; }
.pp-banner-amber { background: #fff4e0; color: #b26a00; }
.pp-banner-red { background: #fdecec; color: #c62828; }
.pp-pay-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.pp-pay-kpi { border-radius: 14px; padding: 12px 14px; color: #fff; text-align: start; }
.pp-pay-kpi small { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.4px; opacity: 0.9; font-weight: 700; }
.pp-pay-kpi b { font-size: 1.45rem; }
.pp-pay-kpi b span { font-size: 0.8rem; font-weight: 600; opacity: 0.9; }
.pp-kpi-blue { background: #1F3C88; }
.pp-kpi-green { background: #16a34a; }
.pp-kpi-red { background: #dc2626; }
.pp-kpi-grey { background: #64748b; }
.pp-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.pp-month { border: 1.5px solid #eef0f5; border-radius: 16px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.pp-month-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; font-weight: 700; color: #fff; background: #94a3b8; }
.pp-month-status { font-size: 0.68rem; text-transform: uppercase; background: rgba(255,255,255,0.25); padding: 2px 8px; border-radius: 999px; letter-spacing: 0.3px; }
.pp-month-paid .pp-month-head { background: #16a34a; }
.pp-month-partial .pp-month-head { background: #f59e0b; }
.pp-month-pending .pp-month-head { background: #dc2626; }
.pp-month-future .pp-month-head { background: #94a3b8; }
.pp-month-future { border-style: dashed; }
.pp-month-none { padding: 12px; font-size: 0.8rem; }
.pp-pay-line { padding: 8px 12px; border-top: 1px solid #f3f4f8; }
.pp-pay-line-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.pp-pay-label { font-size: 0.74rem; font-weight: 700; color: #333; letter-spacing: 0.2px; }
.pp-pay-line-nums { display: flex; justify-content: space-between; font-size: 0.72rem; color: #777; margin-top: 4px; gap: 6px; }
.pp-pay-line-nums b { color: #222; }
.pp-pay-line-nums .is-rest b { color: #dc2626; }
.pp-pay-line.pp-pay-paid .pp-pay-label::before { content: '✓ '; color: #16a34a; }
.pp-month-total { margin-top: auto; padding: 8px 12px; background: #fafbff; font-size: 0.78rem; font-weight: 700; color: #1F3C88; text-align: end; }
.pp-receipts { display: flex; flex-direction: column; gap: 10px; }
.pp-receipt { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border: 1.5px solid #eef0f5; border-radius: 14px; padding: 10px 14px; background: #fff; }
.pp-receipt-main { flex: 1 1 260px; min-width: 0; text-align: start; }
.pp-receipt-no { font-weight: 700; color: #222; }
.pp-receipt-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.76rem; color: #777; margin-top: 4px; }
.pp-receipt-amount { font-size: 1.25rem; font-weight: 700; color: #16a34a; }
.pp-receipt-actions { display: flex; gap: 8px; }
.pp-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: #1F3C88; color: #fff !important; font-weight: 700; font-size: 0.78rem; text-decoration: none !important; border: 1.5px solid #1F3C88; font-family: inherit; cursor: pointer; }
.pp-btn:hover { background: #E5399E; border-color: #E5399E; }
.pp-btn-ghost { background: #fff; color: #1F3C88 !important; }
.pp-btn-ghost:hover { background: #eef2ff; color: #1F3C88 !important; border-color: #1F3C88; }
@media (max-width: 700px) { .pp-pay-summary { grid-template-columns: 1fr; } }

/* ── Info ───────────────────────────────────────────────────────────── */
.pp-cards-info { grid-template-columns: repeat(4, 1fr); }
.pp-info-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pp-info-list { display: flex; flex-direction: column; gap: 8px; }
.pp-info-row { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 1.5px solid #eef0f5; border-radius: 14px; background: #fff; }
.pp-info-week { flex: 0 0 auto; min-width: 86px; text-align: center; padding: 6px 10px; border-radius: 10px; background: #1F3C88; color: #fff; font-weight: 700; font-size: 0.78rem; }
.pp-info-day { background: #E5399E; min-width: 42px; }
.pp-info-main { min-width: 0; text-align: start; }
.pp-info-title { font-weight: 700; color: #222; }
.pp-info-sub { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #1F3C88; text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.4px; margin: 14px 2px 8px; text-align: start; }
.pp-info-text { background: #fafbff; border: 1.5px solid #eef0f5; border-radius: 14px; padding: 14px 16px; color: #333; line-height: 1.6; text-align: start; margin-bottom: 12px; }
.pp-doc-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pp-doc-name { font-weight: 700; color: #222; display: inline-flex; align-items: center; gap: 8px; }
.pp-doc-name i { color: #dc2626; }
.pp-doc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pp-doc-pages { background: #eceef4; border-radius: 14px; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 200px; }
.pp-doc-page { max-width: 100%; box-shadow: 0 4px 16px rgba(0,0,0,0.15); background: #fff; }
.pp-doc-frame { width: 100%; height: 80vh; border: none; border-radius: 10px; background: #fff; }
@media (max-width: 900px) { .pp-cards-info { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .pp-cards-info { grid-template-columns: repeat(2, 1fr); } }

/* ── Alerts strip (home) ────────────────────────────────────────────── */
.pp-alerts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.pp-alert { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 999px; font-weight: 700; font-size: 0.86rem; text-decoration: none !important; border: 1.5px solid transparent; transition: transform .2s; }
.pp-alert:hover { transform: translateY(-1px); }
.pp-alert-emoji { font-size: 1.1rem; }
.pp-alert-amber { background: #fff4e0; color: #b26a00 !important; border-color: #f6dfb3; }
.pp-alert-green { background: #e6f9f0; color: #0f8a54 !important; border-color: #b9e7cf; }
.pp-alert-blue { background: #eef2ff; color: #1F3C88 !important; border-color: #d3dbf5; }

/* ── Profil enfant ──────────────────────────────────────────────────── */
.pp-enf-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pp-enf-avatar { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; background: #eef2ff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.4rem; color: #1F3C88; border: 3px solid #E5399E; flex: 0 0 auto; }
.pp-enf-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pp-enf-id { min-width: 0; text-align: start; }
.pp-enf-name { font-size: 1.35rem; font-weight: 700; color: #1F3C88; }
.pp-enf-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.pp-kv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.pp-kv { background: #fafbff; border: 1.5px solid #eef0f5; border-radius: 14px; padding: 10px 14px; text-align: start; }
.pp-kv small { display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 700; color: #999; margin-bottom: 3px; }
.pp-kv > div { font-weight: 600; color: #222; font-size: 0.92rem; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pp-tel { display: inline-flex; align-items: center; gap: 6px; color: #1F3C88 !important; text-decoration: none !important; font-weight: 700; font-size: 0.82rem; background: #eef2ff; padding: 3px 10px; border-radius: 999px; }
.pp-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.pp-person { display: flex; gap: 12px; border: 1.5px solid #eef0f5; border-radius: 16px; padding: 12px 14px; background: #fff; }
.pp-person-avatar { width: 52px; height: 52px; border-radius: 50%; background: #eef2ff; color: #1F3C88; display: flex; align-items: center; justify-content: center; overflow: hidden; flex: 0 0 auto; font-size: 1.2rem; }
.pp-person-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pp-person-main { min-width: 0; text-align: start; flex: 1; }
.pp-person-name { font-weight: 700; color: #222; }
.pp-person-role { font-size: 0.8rem; color: #E5399E; font-weight: 700; }
.pp-person-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.pp-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; margin-top: 12px; }
.pp-doc { display: flex; align-items: center; gap: 10px; border: 1.5px solid #eef0f5; border-radius: 14px; padding: 10px 12px; background: #fff; }
.pp-doc-ic { font-size: 1.2rem; }
.pp-doc.is-ok .pp-doc-ic { color: #16a34a; }
.pp-doc.is-missing .pp-doc-ic { color: #dc2626; }
.pp-doc.is-missing { border-color: #f6c8c8; background: #fff8f8; }
.pp-doc-main { flex: 1; min-width: 0; font-weight: 600; color: #222; text-align: start; }
.pp-banner-green { background: #e6f9f0; color: #0f8a54; }
.pp-accounts { display: flex; flex-direction: column; gap: 8px; }
.pp-account { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1.5px solid #eef0f5; border-radius: 12px; padding: 8px 12px; background: #fff; font-weight: 600; color: #222; }
.pp-account i { color: #1F3C88; }
.pp-account em { color: #E5399E; font-style: normal; }
.pp-account small { color: #888; font-weight: 500; }

/* ── Transport ──────────────────────────────────────────────────────── */
.pp-transport-card .pp-panel-head { flex-wrap: wrap; }
.pp-live { border-radius: 14px; padding: 12px 14px; background: #f1f1f4; color: #666; font-weight: 600; margin-bottom: 12px; text-align: start; }
.pp-live.is-on { background: #e6f9f0; color: #0f8a54; }
.pp-live-head { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.4px; flex-wrap: wrap; }
.pp-live-dot { width: 10px; height: 10px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 0 rgba(22,163,74,0.6); animation: pp-pulse 1.6s infinite; }
@keyframes pp-pulse { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,0.55); } 70% { box-shadow: 0 0 0 10px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }
.pp-live-status { font-size: 1.05rem; font-weight: 700; margin-top: 4px; }
.pp-live-next { margin-top: 6px; font-weight: 700; color: #b26a00; background: #fff4e0; display: inline-flex; gap: 8px; align-items: center; padding: 6px 12px; border-radius: 999px; }
.pp-live-before { margin-top: 4px; font-size: 0.9rem; }
.pp-crew-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.pp-crew { display: flex; align-items: center; gap: 12px; border: 1.5px solid #eef0f5; border-radius: 14px; padding: 10px 12px; background: #fff; }
.pp-crew-ic { width: 40px; height: 40px; border-radius: 12px; background: #eef2ff; color: #1F3C88; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.pp-crew-main { flex: 1; min-width: 0; text-align: start; }
.pp-crew-main small { display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.4px; color: #999; font-weight: 700; }
.pp-crew-main b { color: #222; }
.pp-family { margin-top: 14px; }
.pp-family-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.pp-family-day { border: 1.5px solid #eef0f5; border-radius: 14px; padding: 10px 12px; background: #fafbff; display: flex; flex-direction: column; gap: 8px; text-align: start; }
.pp-family-day > b { color: #1F3C88; }
.pp-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; color: #333; font-size: 0.9rem; }
.pp-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.pp-toggle-track { width: 42px; height: 24px; border-radius: 999px; background: #d9dce6; position: relative; transition: background .2s; flex: 0 0 auto; }
.pp-toggle-track::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.pp-toggle input:checked + .pp-toggle-track { background: #16a34a; }
.pp-toggle input:checked + .pp-toggle-track::after { transform: translateX(18px); }
[dir="rtl"] .pp-toggle input:checked + .pp-toggle-track::after { transform: translateX(-18px); }
.pp-toggle input:disabled + .pp-toggle-track { opacity: 0.5; }
.pp-refresh { display: flex; justify-content: center; margin-top: 8px; }

/* ── Dark mode ──────────────────────────────────────────────────────── */
[data-theme="dark"] .pp-alert-amber { background: #4a3717; color: #ffcf7a !important; border-color: #6b501f; }
[data-theme="dark"] .pp-alert-green { background: #163d2c; color: #7ee2b4 !important; border-color: #1f5a40; }
[data-theme="dark"] .pp-alert-blue { background: #2a3550; color: #a8b4d8 !important; border-color: #3a4a70; }
[data-theme="dark"] .pp-enf-avatar { background: #2a3550; color: #a8b4d8; }
[data-theme="dark"] .pp-enf-name, [data-theme="dark"] .pp-family-day > b { color: #a8b4d8; }
[data-theme="dark"] .pp-kv, [data-theme="dark"] .pp-person, [data-theme="dark"] .pp-doc, [data-theme="dark"] .pp-account, [data-theme="dark"] .pp-crew, [data-theme="dark"] .pp-family-day { background: var(--dm-surface-2, #252a3a); border-color: var(--dm-border, #333a50); }
[data-theme="dark"] .pp-kv > div, [data-theme="dark"] .pp-person-name, [data-theme="dark"] .pp-doc-main, [data-theme="dark"] .pp-account, [data-theme="dark"] .pp-crew-main b, [data-theme="dark"] .pp-toggle { color: var(--dm-text, #dde1ec); }
[data-theme="dark"] .pp-doc.is-missing { background: #3a1f1f; border-color: #5a2a2a; }
[data-theme="dark"] .pp-tel, [data-theme="dark"] .pp-crew-ic, [data-theme="dark"] .pp-person-avatar { background: #2a3550; color: #a8b4d8 !important; }
[data-theme="dark"] .pp-banner-green { background: #163d2c; color: #7ee2b4; }
[data-theme="dark"] .pp-live { background: var(--dm-surface-3, #2e3348); color: var(--dm-text-muted, #a8b4d8); }
[data-theme="dark"] .pp-live.is-on { background: #163d2c; color: #7ee2b4; }
[data-theme="dark"] .pp-live-next { background: #4a3717; color: #ffcf7a; }
[data-theme="dark"] .pp-toggle-track { background: #3a4058; }
[data-theme="dark"] .pp-info-row { background: var(--dm-surface-2, #252a3a); border-color: var(--dm-border, #333a50); }
[data-theme="dark"] .pp-info-title, [data-theme="dark"] .pp-doc-name { color: var(--dm-text, #dde1ec); }
[data-theme="dark"] .pp-info-sub { color: #a8b4d8; }
[data-theme="dark"] .pp-info-week { background: #6fa8ff; color: #13151a; }
[data-theme="dark"] .pp-info-day { background: #b33771; color: #fff; }
[data-theme="dark"] .pp-info-text { background: var(--dm-surface-2, #252a3a); border-color: var(--dm-border, #333a50); color: var(--dm-text, #dde1ec); }
[data-theme="dark"] .pp-doc-pages { background: var(--dm-surface-3, #2e3348); }
[data-theme="dark"] .pp-dev-section-title { color: #a8b4d8; }
[data-theme="dark"] .pp-dev, [data-theme="dark"] .pp-month, [data-theme="dark"] .pp-receipt { background: var(--dm-surface-2, #252a3a); border-color: var(--dm-border, #333a50); }
[data-theme="dark"] .pp-dev { border-inline-start-color: var(--c, #005DAA); }
[data-theme="dark"] .pp-dev-desc, [data-theme="dark"] .pp-pay-label, [data-theme="dark"] .pp-pay-line-nums b, [data-theme="dark"] .pp-receipt-no { color: var(--dm-text, #dde1ec); }
[data-theme="dark"] .pp-dev-meta, [data-theme="dark"] .pp-pay-line-nums, [data-theme="dark"] .pp-receipt-meta { color: var(--dm-text-muted, #7e8aaa); }
[data-theme="dark"] .pp-dev-file { background: #2a3550; color: #a8b4d8 !important; }
[data-theme="dark"] .pp-banner-grey { background: var(--dm-surface-3, #2e3348); color: var(--dm-text-muted, #a8b4d8); }
[data-theme="dark"] .pp-banner-amber { background: #4a3717; color: #ffcf7a; }
[data-theme="dark"] .pp-banner-red { background: #4a1f1f; color: #ff9a9a; }
[data-theme="dark"] .pp-pay-line { border-color: var(--dm-border, #333a50); }
[data-theme="dark"] .pp-month-total { background: var(--dm-surface-3, #2e3348); color: #a8b4d8; }
[data-theme="dark"] .pp-btn-ghost { background: var(--dm-surface-2, #252a3a); color: #a8b4d8 !important; border-color: var(--dm-border, #333a50); }
[data-theme="dark"] .pp-subtab { background: var(--dm-surface-2, #252a3a); border-color: var(--dm-border, #333a50); color: var(--dm-text, #dde1ec); }
[data-theme="dark"] .pp-subtab.is-active { background: #b33771; border-color: #b33771; color: #fff; }
[data-theme="dark"] .pp-subtabs-label, [data-theme="dark"] .pp-prog-head, [data-theme="dark"] .pp-svp-intro h4 { color: #a8b4d8; }
[data-theme="dark"] .pp-empty-title, [data-theme="dark"] .pp-note-title, [data-theme="dark"] .pp-sub-head b, [data-theme="dark"] .pp-indicator-msg, [data-theme="dark"] .pp-chart-title, [data-theme="dark"] .pp-chart-val, [data-theme="dark"] .pp-record-title, [data-theme="dark"] .pp-record-meta b, [data-theme="dark"] .pp-lesson-title, [data-theme="dark"] .pp-svp-cat-title, [data-theme="dark"] .pp-svp-title { color: var(--dm-text, #dde1ec); }
[data-theme="dark"] .pp-note-card, [data-theme="dark"] .pp-chart-card, [data-theme="dark"] .pp-record, [data-theme="dark"] .pp-prog-mat, [data-theme="dark"] .pp-svp-cat { background: var(--dm-surface-2, #252a3a); border-color: var(--dm-border, #333a50); }
[data-theme="dark"] .pp-note-card { border-inline-start-color: var(--c, #005DAA); }
[data-theme="dark"] .pp-record { border-inline-start-color: var(--c, #ceafed); }
[data-theme="dark"] .pp-bar, [data-theme="dark"] .pp-chart-bar { background: var(--dm-surface-3, #2e3348); }
[data-theme="dark"] .pp-indicator { background: color-mix(in srgb, var(--c, #41da91) 18%, var(--dm-surface-2, #252a3a)); border-color: color-mix(in srgb, var(--c, #41da91) 45%, var(--dm-surface-2, #252a3a)); }
[data-theme="dark"] .pp-indicator-ring { background: var(--dm-surface, #1e2130); }
[data-theme="dark"] .pp-sub-head, [data-theme="dark"] .pp-record-desc, [data-theme="dark"] .pp-record-obs, [data-theme="dark"] .pp-svp-text, [data-theme="dark"] .pp-svp-action, [data-theme="dark"] .pp-svp-intro p { color: var(--dm-text-muted, #a8b4d8); }
[data-theme="dark"] .pp-subs { border-color: var(--dm-border, #333a50); }
[data-theme="dark"] .pp-lesson { border-color: var(--dm-border, #333a50); }
[data-theme="dark"] .pp-lesson-code { background: color-mix(in srgb, var(--c, #005DAA) 30%, var(--dm-surface-2, #252a3a)); color: #fff; }
[data-theme="dark"] .pp-weekchip { background: var(--dm-surface-2, #252a3a); border-color: var(--dm-border, #333a50); color: var(--dm-text, #dde1ec); }
[data-theme="dark"] .pp-weekchip.is-active { background: #6fa8ff; border-color: #6fa8ff; color: #13151a; }
[data-theme="dark"] .pp-svp-strong { background: #163d2c; border-color: #1f5a40; }
[data-theme="dark"] .pp-svp-attn { background: #4a3717; border-color: #6b501f; }
[data-theme="dark"] .pp-svp-reassure { color: #ffcf7a; }
[data-theme="dark"] .pp-svp-normal { color: #7ee2b4; }
[data-theme="dark"] .pp-hero { box-shadow: 0 10px 30px rgba(0,0,0,0.45); }
[data-theme="dark"] .pp-week { background: var(--dm-surface, #1e2130); border-color: #b33771; }
[data-theme="dark"] .pp-week-head { background: #b33771; }
[data-theme="dark"] .pp-week-today { background: var(--dm-surface, #1e2130); color: #f3a5cd; }
[data-theme="dark"] .pp-day { background: var(--dm-surface-2, #252a3a); border-color: var(--dm-border, #333a50); color: var(--dm-text, #dde1ec); }
[data-theme="dark"] .pp-day.is-selected { background: #b33771; border-color: #b33771; }
[data-theme="dark"] .pp-day.is-today { border-color: #6fa8ff; }
[data-theme="dark"] .pp-day.is-today .pp-day-num { color: #6fa8ff; }
[data-theme="dark"] .pp-day-count { background: #6fa8ff; color: #13151a; }
[data-theme="dark"] .pp-week-loading, [data-theme="dark"] .pp-week-empty { color: var(--dm-text-muted, #7e8aaa); }
[data-theme="dark"] .pp-daygroup-title { color: #a8b4d8; }
[data-theme="dark"] .pp-ev { background: var(--dm-surface-2, #252a3a); border-color: var(--dm-border, #333a50); border-inline-start-color: var(--ev, #41da91); }
[data-theme="dark"] .pp-ev-title { color: var(--dm-text, #dde1ec); }
[data-theme="dark"] .pp-ev-desc, [data-theme="dark"] .pp-ev-time { color: var(--dm-text-muted, #7e8aaa); }
[data-theme="dark"] .pp-panel { background: var(--dm-surface, #1e2130); box-shadow: var(--dm-shadow, 0 2px 14px rgba(0,0,0,0.45)); }
[data-theme="dark"] .pp-panel-head { background: var(--dm-surface-2, #252a3a); border-color: var(--dm-border, #333a50); }
[data-theme="dark"] .pp-panel-title { color: #a8b4d8; }
[data-theme="dark"] .pp-tab { background: var(--dm-surface-2, #252a3a); border-color: var(--dm-border, #333a50); color: var(--dm-text, #dde1ec); }
[data-theme="dark"] .pp-tab.is-active { background: #6fa8ff; border-color: #6fa8ff; color: #13151a; }
[data-theme="dark"] .pp-empty { color: var(--dm-text-muted, #7e8aaa); }
[data-theme="dark"] .pp-chip { background: #2a3550; color: #a8b4d8; }
[data-theme="dark"] .pp-chip-green { background: #163d2c; color: #7ee2b4; }
[data-theme="dark"] .pp-chip-red { background: #4a1f1f; color: #ff9a9a; }
[data-theme="dark"] .pp-chip-amber { background: #4a3717; color: #ffcf7a; }
[data-theme="dark"] .pp-chip-grey { background: var(--dm-surface-3, #2e3348); color: var(--dm-text-muted, #7e8aaa); }
[data-theme="dark"] .pp-muted { color: var(--dm-text-muted, #7e8aaa); }

/* ══════════════════════════════════════════════════════════════════
   Communication hub (phase 6, 2026-09-15) — lists, detail views,
   chat thread, reactions, forms, survey questions.
   ══════════════════════════════════════════════════════════════════ */
.pp-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.pp-toolbar .pp-subtabs { margin: 0; }
.pp-list { display: grid; gap: 12px; }
.pp-item { position: relative; display: flex; gap: 12px; background: #fff; border: 1.5px solid #eef0f5; border-radius: 16px; padding: 14px 16px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; text-align: start; }
.pp-item:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(31,60,136,0.10); border-color: #c9d3f5; }
.pp-item.is-static { cursor: default; }
.pp-item.is-static:hover { transform: none; box-shadow: 0 2px 10px rgba(0,0,0,0.05); border-color: #eef0f5; }
.pp-item.is-unread { border-inline-start: 5px solid #E5399E; }
.pp-item-ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 1.1rem; background: #eef2ff; color: #1F3C88; }
.pp-item-ic.is-pink { background: #fde7f3; color: #E5399E; }
.pp-item-ic.is-green { background: #e6f9f0; color: #0f8a54; }
.pp-item-ic.is-amber { background: #fff4e0; color: #b26a00; }
.pp-item-ic.is-purple { background: #efe7fb; color: #6b3fc7; }
.pp-item-ic.is-teal { background: #e0f5f5; color: #00838F; }
.pp-item-ic.is-red { background: #fdecec; color: #c62828; }
.pp-avatar { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, #1F3C88, #E5399E); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 0.9rem; }
.pp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pp-item-main { flex: 1 1 auto; min-width: 0; }
.pp-item-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pp-item-title { font-weight: 800; color: #222; font-size: 0.98rem; text-align: start; }
.pp-item-date { color: #888; font-size: 0.74rem; white-space: nowrap; }
.pp-item-sub { color: #666; font-size: 0.82rem; margin-top: 2px; text-align: start; }
.pp-item-snippet { color: #555; font-size: 0.85rem; margin-top: 6px; text-align: start; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pp-item-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.pp-dot { width: 9px; height: 9px; border-radius: 50%; background: #E5399E; flex: 0 0 auto; }
.pp-chip-blue { background: #e3f2fd; color: #0b5394; }
.pp-chip-purple { background: #efe7fb; color: #6b3fc7; }
.pp-chip-pink { background: #fde7f3; color: #c2185b; }

/* detail views */
.pp-detail-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.pp-back { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1.5px solid #e6e6ef; background: #fff; color: #1F3C88; font-weight: 700; font-size: 0.78rem; cursor: pointer; font-family: inherit; }
.pp-back:hover { border-color: #1F3C88; }
[dir="rtl"] .pp-back i { transform: scaleX(-1); }
.pp-detail-bar .pp-item-title { font-size: 1.05rem; flex: 1 1 auto; }
.pp-article { background: #fff; border: 1.5px solid #eef0f5; border-radius: 16px; padding: 18px 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.pp-article-head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.pp-article-body { white-space: pre-wrap; color: #333; font-size: 0.92rem; line-height: 1.55; text-align: start; overflow-wrap: anywhere; }
.pp-attach { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 12px; border-radius: 12px; background: #f6f7fb; border: 1.5px dashed #d9dcea; color: #1F3C88; font-weight: 700; font-size: 0.8rem; text-decoration: none !important; }
.pp-attach:hover { border-color: #E5399E; color: #E5399E; }
.pp-attach-img { display: block; margin-top: 12px; max-width: min(100%, 420px); border-radius: 12px; border: 1.5px solid #eef0f5; }

/* chat thread */
.pp-chat { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.pp-bubble { max-width: 82%; align-self: flex-start; background: #fff; border: 1.5px solid #eef0f5; border-radius: 16px; border-end-start-radius: 4px; padding: 10px 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.pp-bubble.is-me { align-self: flex-end; background: #eef2ff; border-color: #d9e0f7; border-radius: 16px; border-end-end-radius: 4px; }
.pp-bubble-who { font-size: 0.72rem; font-weight: 800; color: #1F3C88; margin-bottom: 3px; display: flex; gap: 8px; align-items: center; text-align: start; }
.pp-bubble.is-me .pp-bubble-who { color: #E5399E; }
.pp-bubble-text { white-space: pre-wrap; color: #333; font-size: 0.9rem; line-height: 1.5; text-align: start; overflow-wrap: anywhere; }
.pp-bubble-time { font-size: 0.68rem; color: #999; margin-top: 4px; text-align: end; }
.pp-bubble .pp-attach { margin-top: 8px; }
.pp-chat-new { animation: ppPop .3s ease; }
@keyframes ppPop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* reactions */
.pp-reacts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.pp-react { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1.5px solid #e6e6ef; background: #fff; color: #444; font-family: inherit; font-weight: 700; font-size: 0.78rem; cursor: pointer; transition: all .18s; }
.pp-react:hover { border-color: #E5399E; color: #E5399E; }
.pp-react.is-on { background: #fde7f3; border-color: #E5399E; color: #c2185b; }
.pp-react:disabled { opacity: 0.55; cursor: not-allowed; }
.pp-react .pp-react-n { font-size: 0.7rem; opacity: 0.75; }
.pp-locked { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: #f6f7fb; color: #777; font-size: 0.8rem; text-align: start; }

/* forms */
.pp-form { background: #fff; border: 1.5px solid #eef0f5; border-radius: 16px; padding: 18px 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); display: grid; gap: 14px; }
.pp-form-title { font-weight: 800; color: #1F3C88; font-size: 1rem; display: flex; align-items: center; gap: 8px; text-align: start; }
.pp-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.pp-field { display: grid; gap: 6px; }
.pp-label { font-size: 0.76rem; font-weight: 800; color: #555; text-transform: uppercase; letter-spacing: .03em; text-align: start; }
.pp-label .req { color: #E5399E; }
.pp-input, .pp-textarea, .pp-select { width: 100%; border: 1.5px solid #e2e5ef; border-radius: 12px; padding: 10px 12px; font-family: inherit; font-size: 0.9rem; color: #222; background: #fafbff; outline: none; transition: border-color .15s, box-shadow .15s; }
.pp-input:focus, .pp-textarea:focus, .pp-select:focus { border-color: #1F3C88; box-shadow: 0 0 0 3px rgba(31,60,136,0.12); background: #fff; }
.pp-textarea { min-height: 110px; resize: vertical; }
.pp-hint { font-size: 0.74rem; color: #888; text-align: start; }
.pp-counter { font-size: 0.72rem; color: #999; text-align: end; }
.pp-counter.is-bad { color: #c62828; }
.pp-form-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.pp-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.pp-btn-pink { background: #E5399E; border-color: #E5399E; }
.pp-btn-pink:hover { background: #c2185b; border-color: #c2185b; }
.pp-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.86rem; color: #333; user-select: none; }
.pp-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.pp-choices { display: flex; gap: 8px; flex-wrap: wrap; }
.pp-choice { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid #e6e6ef; background: #fff; color: #444; font-weight: 700; font-size: 0.82rem; cursor: pointer; font-family: inherit; transition: all .15s; }
.pp-choice:hover { border-color: #1F3C88; color: #1F3C88; }
.pp-choice.is-on { background: #1F3C88; border-color: #1F3C88; color: #fff; }
.pp-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.pp-picker-list { display: grid; gap: 6px; margin-top: 8px; max-height: 240px; overflow: auto; }
.pp-picker-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1.5px solid #eef0f5; background: #fff; cursor: pointer; text-align: start; font-family: inherit; width: 100%; }
.pp-picker-row:hover { border-color: #1F3C88; }
.pp-picker-row.is-on { border-color: #E5399E; background: #fde7f3; }
.pp-picker-row .pp-avatar { width: 34px; height: 34px; font-size: 0.75rem; }
.pp-picker-name { font-weight: 700; color: #222; font-size: 0.86rem; }
.pp-picker-sub { color: #777; font-size: 0.74rem; }
.pp-file { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; border: 1.5px dashed #d9dcea; background: #fafbff; color: #1F3C88; font-weight: 700; font-size: 0.78rem; cursor: pointer; }
.pp-file input { display: none; }
.pp-file.has-file { border-style: solid; border-color: #1F3C88; }
.pp-file-name { font-weight: 500; color: #555; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* reply box */
.pp-reply { margin-top: 14px; display: grid; gap: 10px; background: #fff; border: 1.5px solid #eef0f5; border-radius: 16px; padding: 12px 14px; }
.pp-reply-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }

/* survey */
.pp-q { background: #fff; border: 1.5px solid #eef0f5; border-radius: 16px; padding: 16px 18px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.pp-q + .pp-q { margin-top: 12px; }
.pp-q-title { font-weight: 800; color: #222; font-size: 0.95rem; display: flex; gap: 10px; align-items: flex-start; text-align: start; }
.pp-q-num { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: #1F3C88; color: #fff; display: grid; place-items: center; font-size: 0.74rem; }
.pp-q-body { margin-top: 12px; }
.pp-stars { display: flex; gap: 6px; }
.pp-star { width: 40px; height: 40px; border-radius: 12px; border: 1.5px solid #e6e6ef; background: #fff; display: grid; place-items: center; font-size: 1.2rem; cursor: pointer; color: #ccc; font-family: inherit; transition: all .15s; }
.pp-star.is-on { color: #f5b301; border-color: #f5b301; background: #fff8e1; }
.pp-star:hover { border-color: #f5b301; }
.pp-answered { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; background: #e6f9f0; color: #0f8a54; font-weight: 700; font-size: 0.86rem; text-align: start; }

/* result / analysis blocks */
.pp-block { border-radius: 14px; padding: 12px 14px; margin-top: 12px; background: #f6f7fb; border: 1.5px solid #eef0f5; text-align: start; }
.pp-block-title { font-size: 0.74rem; font-weight: 800; color: #1F3C88; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
.pp-block-text { white-space: pre-wrap; color: #333; font-size: 0.88rem; overflow-wrap: anywhere; }
.pp-block-green { background: #e6f9f0; border-color: #c5efd9; }
.pp-block-amber { background: #fff4e0; border-color: #f3dfb3; }
.pp-satisf { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* meetings */
.pp-meet-when { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 12px; background: #eef2ff; color: #1F3C88; font-weight: 800; font-size: 0.8rem; }
.pp-slots { display: flex; gap: 8px; flex-wrap: wrap; }
.pp-slot { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; border: 1.5px solid #e6e6ef; background: #fff; font-weight: 700; font-size: 0.8rem; cursor: pointer; font-family: inherit; color: #333; }
.pp-slot.is-on { border-color: #E5399E; background: #fde7f3; color: #c2185b; }

@media (max-width: 640px) { .pp-bubble { max-width: 94%; } .pp-article, .pp-form, .pp-q { padding: 14px; } }

/* dark */
[data-theme="dark"] .pp-item, [data-theme="dark"] .pp-article, [data-theme="dark"] .pp-form, [data-theme="dark"] .pp-q, [data-theme="dark"] .pp-bubble, [data-theme="dark"] .pp-picker-row, [data-theme="dark"] .pp-back, [data-theme="dark"] .pp-react, [data-theme="dark"] .pp-choice, [data-theme="dark"] .pp-star, [data-theme="dark"] .pp-slot, [data-theme="dark"] .pp-reply { background: var(--dm-surface, #1e1e30); border-color: var(--dm-border, #2f3350); box-shadow: none; }
[data-theme="dark"] .pp-item:hover { border-color: #4a5a90; }
[data-theme="dark"] .pp-item-title, [data-theme="dark"] .pp-q-title, [data-theme="dark"] .pp-bubble-text, [data-theme="dark"] .pp-article-body, [data-theme="dark"] .pp-picker-name, [data-theme="dark"] .pp-block-text, [data-theme="dark"] .pp-check, [data-theme="dark"] .pp-choice, [data-theme="dark"] .pp-slot, [data-theme="dark"] .pp-react, [data-theme="dark"] .pp-label { color: var(--dm-text, #e2e8f0); }
[data-theme="dark"] .pp-item-sub, [data-theme="dark"] .pp-item-snippet, [data-theme="dark"] .pp-item-date, [data-theme="dark"] .pp-hint, [data-theme="dark"] .pp-counter, [data-theme="dark"] .pp-picker-sub, [data-theme="dark"] .pp-bubble-time, [data-theme="dark"] .pp-file-name { color: var(--dm-text-muted, #9aa3b8); }
[data-theme="dark"] .pp-bubble.is-me { background: #26304f; border-color: #3a4a70; }
[data-theme="dark"] .pp-bubble-who { color: #a8b4d8; }
[data-theme="dark"] .pp-item-ic { background: #26304f; color: #a8b4d8; }
[data-theme="dark"] .pp-item-ic.is-pink { background: #4a1e36; color: #ff9ad0; }
[data-theme="dark"] .pp-item-ic.is-green { background: #163d2c; color: #7ee2b4; }
[data-theme="dark"] .pp-item-ic.is-amber { background: #4a3717; color: #ffcf7a; }
[data-theme="dark"] .pp-item-ic.is-purple { background: #31224f; color: #c9aef5; }
[data-theme="dark"] .pp-item-ic.is-teal { background: #143a3e; color: #7fdde6; }
[data-theme="dark"] .pp-item-ic.is-red { background: #4a1f1f; color: #ff9b9b; }
[data-theme="dark"] .pp-input, [data-theme="dark"] .pp-textarea, [data-theme="dark"] .pp-select { background: var(--dm-surface-2, #262640); border-color: var(--dm-border, #2f3350); color: var(--dm-text, #e2e8f0); }
[data-theme="dark"] .pp-input:focus, [data-theme="dark"] .pp-textarea:focus, [data-theme="dark"] .pp-select:focus { background: var(--dm-surface-2, #262640); border-color: #a8b4d8; }
[data-theme="dark"] .pp-block, [data-theme="dark"] .pp-locked, [data-theme="dark"] .pp-attach, [data-theme="dark"] .pp-file { background: var(--dm-surface-2, #262640); border-color: var(--dm-border, #2f3350); color: var(--dm-text, #e2e8f0); }
[data-theme="dark"] .pp-block-title { color: #a8b4d8; }
[data-theme="dark"] .pp-block-green { background: #163d2c; border-color: #1f5a40; }
[data-theme="dark"] .pp-block-amber { background: #4a3717; border-color: #6b501f; }
[data-theme="dark"] .pp-answered { background: #163d2c; color: #7ee2b4; }
[data-theme="dark"] .pp-meet-when { background: #26304f; color: #a8b4d8; }
[data-theme="dark"] .pp-react.is-on, [data-theme="dark"] .pp-slot.is-on, [data-theme="dark"] .pp-picker-row.is-on { background: #4a1e36; border-color: #E5399E; color: #ff9ad0; }
[data-theme="dark"] .pp-choice.is-on { background: #1F3C88; border-color: #1F3C88; color: #fff; }
[data-theme="dark"] .pp-star { color: #555; }
[data-theme="dark"] .pp-star.is-on { background: #4a3717; color: #f5b301; }
[data-theme="dark"] .pp-chip-blue { background: #1e3350; color: #8fc1f5; }
[data-theme="dark"] .pp-chip-purple { background: #31224f; color: #c9aef5; }
[data-theme="dark"] .pp-chip-pink { background: #4a1e36; color: #ff9ad0; }
[data-theme="dark"] .pp-btn-ghost { background: var(--dm-surface, #1e1e30); color: #a8b4d8 !important; border-color: #4a5a90; }
[dir="rtl"] .pp-counter { direction: ltr; text-align: left; }


/* ══════════════════════════════════════════════════════════════════
   Parent dashboard workspace (owner redesign 2026-09-15, round 2 the
   same day — « too many free spaces »): a white LEFT rail holding the
   child card (click = the profile, or the switcher when the parent has
   several children), the 🎒/🚌 badges and the 8 module tiles in a
   2-column grid that STRETCHES to the rail height; the week on the
   RIGHT rendered as a planner grid (one column per day) that fills the
   panel. One fixed page when the viewport allows (home.js sets
   `is-fixed`); stacked normal flow below 992 px.
   ══════════════════════════════════════════════════════════════════ */
.pp-home { padding-top: 6px; padding-bottom: 8px; }
/* Round 3 (owner, same day — « take the full screen in left and right… keep the width size
   for btns and give everything to semaine »): the dashboard ALONE is full width — the 1240 px
   cap of the other parent pages does not apply, the rail keeps its 292 px and every remaining
   pixel goes to the week, so the planner columns widen and each card shows more text per line. */
.pp-page.pp-home { max-width: none; padding-inline: 14px; }
.pp-ws { display: grid; grid-template-columns: 292px minmax(0, 1fr); gap: 16px; align-items: stretch; }
.pp-ws.is-fixed { height: var(--pp-vh, calc(100vh - 150px)); min-height: 420px; }
.pp-ws.is-fixed .pp-rail, .pp-ws.is-fixed .pp-main { overflow-y: auto; min-height: 0; scrollbar-width: thin; }

/* Rail = a white panel, the same chrome as the student dashboard rail. */
.pp-rail { display: flex; flex-direction: column; gap: 10px; padding: 10px; background: #fff; border: 1px solid #e9ecef; border-radius: 20px; box-shadow: 0 4px 16px rgba(0,0,0,0.05); }

/* Child card — the active child. One child: the card opens the profile.
   Several: the card opens the switcher (profile link + the other children). */
.pp-me { position: relative; }
.pp-me-card { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 16px; background: linear-gradient(135deg, #fde9f4 0%, #eef2ff 100%); border: 1.5px solid #f3c5dd; cursor: pointer; text-decoration: none !important; color: #1F3C88 !important; font-family: inherit; text-align: start; transition: transform .2s, box-shadow .2s; }
.pp-me-card:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(229, 57, 158, 0.16); }
.pp-me-avatar { width: 54px; height: 54px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px #E5399E; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.pp-me-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pp-me-initials { font-weight: 800; font-size: 1rem; color: #1F3C88; letter-spacing: 0.5px; }
.pp-me-text { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.15; gap: 2px; }
.pp-me-name { font-weight: 800; font-size: 0.95rem; line-height: 1.1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.pp-me-class { font-size: 0.74rem; color: #E5399E; font-weight: 700; }
.pp-me-hint { font-size: 0.67rem; color: #6b7280; display: flex; align-items: center; gap: 4px; margin-top: 1px; }
.pp-me-caret { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: #E5399E; display: grid; place-items: center; font-size: 0.78rem; box-shadow: 0 2px 6px rgba(0,0,0,0.08); transition: transform .2s; }
.pp-me.is-open .pp-me-caret { transform: rotate(180deg); }
.pp-me-menu { margin-top: 8px; background: #fff; border: 1.5px solid #e6e6ef; border-radius: 14px; padding: 8px; box-shadow: 0 10px 28px rgba(0,0,0,0.10); display: flex; flex-direction: column; gap: 6px; }
.pp-me-menu[hidden] { display: none; }
.pp-me-menu-title { font-size: 0.64rem; text-transform: uppercase; font-weight: 700; color: #888; letter-spacing: 0.5px; padding: 4px 6px 0; text-align: start; }
.pp-me-profile { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #eef2ff; color: #1F3C88 !important; font-weight: 700; font-size: 0.78rem; text-decoration: none !important; }
.pp-me-profile:hover { background: #dfe6ff; }
.pp-rail-children { display: flex; flex-direction: column; gap: 6px; }
.pp-rail .pp-child { width: 100%; background: #fff; border-color: #e6e6ef; color: #333; box-shadow: none; border-radius: 12px; padding: 5px 10px 5px 5px; padding-inline-start: 5px; padding-inline-end: 10px; }
.pp-rail .pp-child-avatar { width: 34px; height: 34px; background: #eef2ff; border-color: #e6e6ef; }
.pp-rail .pp-child:hover { background: #fafbff; border-color: #c9d3f5; }
.pp-rail .pp-child.is-active { background: #fde9f4; border-color: #E5399E; color: #1F3C88; }
.pp-rail .pp-child.is-active .pp-child-avatar { border-color: #E5399E; }
.pp-rail .pp-child-initials { color: #1F3C88; }
.pp-rail .pp-child-name { max-width: 150px; }
.pp-rail .pp-child-class { color: #777; }
.pp-rail .pp-child-check { margin-inline-start: auto; }

.pp-rail .pp-alerts { margin-top: 0; }
.pp-rail .pp-alert { width: 100%; font-size: 0.76rem; padding: 8px 10px; }

/* Module tiles — two per row; in the fixed workspace the grid STRETCHES to the rail height. */
.pp-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pp-ws.is-fixed .pp-tiles { flex: 1 1 auto; min-height: 0; grid-auto-rows: minmax(78px, 1fr); }
.pp-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px 8px; border-radius: 16px; color: #fff !important; text-decoration: none !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; font-size: 0.7rem; line-height: 1.15; text-align: center; box-shadow: 0 3px 10px rgba(0,0,0,0.10); position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.pp-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0)); pointer-events: none; }
.pp-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,0.18); }
.pp-tile i { width: 42px; height: 42px; border-radius: 13px; background: rgba(255,255,255,0.24); display: grid; place-items: center; font-size: 1.15rem; flex: 0 0 auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15)); }
.pp-tile span { overflow-wrap: anywhere; }
.pp-tiles-row { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: 16px; }
.pp-tiles-row .pp-tile { flex-direction: row; justify-content: flex-start; text-align: start; padding: 10px 14px; }
.pp-rail-school { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 14px; border-radius: 14px; border: 1.5px dashed #c9d3f5; color: #1F3C88 !important; font-weight: 700; font-size: 0.78rem; text-decoration: none !important; }
.pp-rail-school:hover { background: #eef2ff; }

/* Week panel fills the right column; its body scrolls, the page never. */
.pp-main { min-width: 0; display: flex; flex-direction: column; }
.pp-main .pp-week { margin-top: 0; }
.pp-ws.is-fixed .pp-main .pp-week { height: 100%; display: flex; flex-direction: column; }
.pp-ws.is-fixed .pp-week-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.pp-ws.is-fixed .pp-week-days { flex: 0 0 auto; }

/* Planner grid — the whole-week view on a wide panel: one column per day. */
.pp-week-body.is-grid { display: flex; padding: 8px 10px 10px; }
/* In the planner grid the column heads ARE the day pills — the strip would repeat them. */
.pp-week.is-grid-view .pp-week-days { display: none; }
.pp-ws.is-fixed .pp-week-body.is-grid { overflow: hidden; }
.pp-grid { flex: 1 1 auto; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; min-height: 260px; min-width: 0; }
.pp-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #fbf7fa; border: 1.5px solid #f1e3ec; border-radius: 14px; overflow: hidden; }
.pp-col.is-today { border-color: #e875ac; background: #fff5fa; }
.pp-col-head { border: none; background: transparent; width: 100%; padding: 7px 6px 6px; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; font-family: inherit; color: #333; border-bottom: 1.5px solid #f1e3ec; transition: background .18s; }
.pp-col-head:hover { background: #fde9f4; }
.pp-col.is-today .pp-col-head { background: #e875ac; color: #fff; border-bottom-color: #e875ac; }
.pp-col-day { font-size: 0.66rem; text-transform: uppercase; font-weight: 700; opacity: 0.8; }
.pp-col-num { font-size: 1.05rem; font-weight: 800; line-height: 1; }
.pp-col-count { min-width: 18px; height: 18px; border-radius: 9px; background: #1F3C88; color: #fff; font-size: 0.64rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
.pp-col.is-today .pp-col-count { background: #fff; color: #e875ac; }
.pp-col-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 6px; scrollbar-width: thin; }
.pp-col-empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #b8b8c4; font-size: 0.74rem; text-align: center; padding: 14px 6px; }
.pp-col-empty i { font-size: 1.1rem; color: #e9c3d8; }
.pp-grid .pp-ev { margin: 0; padding: 7px 8px; gap: 8px; background: #fff; flex: 0 0 auto; }
.pp-grid .pp-ev-icon { width: 26px; height: 26px; font-size: 0.72rem; border-radius: 8px; }
.pp-grid .pp-ev-head { gap: 6px; }
.pp-grid .pp-ev-type { font-size: 0.6rem; }
.pp-grid .pp-ev-time { font-size: 0.66rem; }
.pp-grid .pp-ev-title { font-size: 0.8rem; line-height: 1.2; }
.pp-grid .pp-ev-desc { font-size: 0.72rem; }
/* Wide panel (the full-width dashboard on a desktop screen): the columns are roomy, so the
   cards breathe and read at the list size — bigger title, three description lines — instead
   of the compact form used when five columns share a narrow panel. */
.pp-week-body { container-type: inline-size; }
@container (min-width: 1100px) {
    .pp-grid { gap: 12px; }
    .pp-col-body { padding: 8px; gap: 8px; }
    .pp-grid .pp-ev { padding: 9px 10px; gap: 10px; }
    .pp-grid .pp-ev-icon { width: 30px; height: 30px; font-size: 0.8rem; border-radius: 9px; }
    .pp-grid .pp-ev-type { font-size: 0.64rem; }
    .pp-grid .pp-ev-time { font-size: 0.72rem; }
    .pp-grid .pp-ev-title { font-size: 0.9rem; }
    .pp-grid .pp-ev-desc { font-size: 0.79rem; -webkit-line-clamp: 3; }
}

@media (max-width: 991px) {
    .pp-ws { grid-template-columns: 1fr; }
    .pp-ws.is-fixed { height: auto; }
    .pp-rail-school { margin-top: 0; }
}
[data-theme="dark"] .pp-rail { background: var(--dm-surface, #1e1e30); border-color: var(--dm-border, #2f3350); }
[data-theme="dark"] .pp-me-card { background: linear-gradient(135deg, #4a1e36 0%, #26304f 100%); border-color: #7a2f5a; color: #ff9ad0 !important; }
[data-theme="dark"] .pp-me-avatar { background: #26304f; border-color: var(--dm-surface, #1e1e30); }
[data-theme="dark"] .pp-me-initials { color: #a8b4d8; }
[data-theme="dark"] .pp-me-hint { color: var(--dm-text-muted, #9aa3b8); }
[data-theme="dark"] .pp-me-caret { background: var(--dm-surface, #1e1e30); }
[data-theme="dark"] .pp-me-menu { background: var(--dm-surface-2, #262640); border-color: var(--dm-border, #2f3350); }
[data-theme="dark"] .pp-me-menu-title { color: var(--dm-text-muted, #9aa3b8); }
[data-theme="dark"] .pp-me-profile { background: #26304f; color: #a8b4d8 !important; }
[data-theme="dark"] .pp-rail .pp-child { background: var(--dm-surface, #1e1e30); border-color: var(--dm-border, #2f3350); color: var(--dm-text, #e2e8f0); }
[data-theme="dark"] .pp-rail .pp-child:hover { background: var(--dm-surface-2, #262640); border-color: #4a5a90; }
[data-theme="dark"] .pp-rail .pp-child.is-active { background: #4a1e36; border-color: #E5399E; color: #ff9ad0; }
[data-theme="dark"] .pp-rail .pp-child-avatar { background: #26304f; border-color: #2f3350; }
[data-theme="dark"] .pp-rail .pp-child-initials { color: #a8b4d8; }
[data-theme="dark"] .pp-rail .pp-child-class { color: var(--dm-text-muted, #9aa3b8); }
[data-theme="dark"] .pp-rail-school { border-color: #4a5a90; color: #a8b4d8 !important; }
[data-theme="dark"] .pp-rail-school:hover { background: var(--dm-surface-2, #262640); }
[data-theme="dark"] .pp-col { background: var(--dm-surface-2, #252a3a); border-color: var(--dm-border, #333a50); }
[data-theme="dark"] .pp-col.is-today { background: #3a1f31; border-color: #b33771; }
[data-theme="dark"] .pp-col-head { color: var(--dm-text, #dde1ec); border-bottom-color: var(--dm-border, #333a50); }
[data-theme="dark"] .pp-col-head:hover { background: #4a1e36; }
[data-theme="dark"] .pp-col.is-today .pp-col-head { background: #b33771; border-bottom-color: #b33771; }
[data-theme="dark"] .pp-col-count { background: #6fa8ff; color: #13151a; }
[data-theme="dark"] .pp-col.is-today .pp-col-count { background: var(--dm-surface, #1e2130); color: #f3a5cd; }
[data-theme="dark"] .pp-col-empty { color: var(--dm-text-muted, #7e8aaa); }
[data-theme="dark"] .pp-col-empty i { color: #7a2f5a; }
[data-theme="dark"] .pp-grid .pp-ev { background: var(--dm-surface, #1e2130); }

/* ══════════════════════════════════════════════════════════════════
   Round 3 (owner, 2026-09-15): the hero band is GONE from every parent
   page — the navbar carries the child pill (+ the switcher when the
   parent has several children) and, for staff linked to their own child,
   the « Espace école » icon whose password gate is the modal below
   (components/parent-school-access). The old .pp-hero / .pp-children
   rules above stay: the landing page renders that mockup with this file.
   ══════════════════════════════════════════════════════════════════ */
.pp-nav-child { position: relative; }
.pp-nav-child-btn { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0; padding-inline-start: 4px; padding-inline-end: 12px; border-radius: 999px; background: #fff; border: 1.5px solid #f3c5dd; color: #1F3C88 !important; text-decoration: none !important; font-family: 'Kodchasan', 'Segoe UI', sans-serif; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.07); transition: transform .2s, box-shadow .2s; }
.pp-nav-child-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(229,57,158,0.18); }
.pp-nav-child-avatar { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; background: #eef2ff; border: 2px solid #E5399E; display: flex; align-items: center; justify-content: center; font-size: 0.66rem; font-weight: 800; color: #1F3C88; flex: 0 0 auto; }
.pp-nav-child-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pp-nav-child-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; text-align: start; }
.pp-nav-child-name { font-weight: 800; font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.pp-nav-child-class { font-size: 0.64rem; color: #E5399E; font-weight: 700; white-space: nowrap; }
.pp-nav-child-caret { font-size: 0.66rem; color: #E5399E; transition: transform .2s; }
.pp-nav-child.is-open .pp-nav-child-caret { transform: rotate(180deg); }
.pp-nav-child-menu { position: absolute; top: calc(100% + 8px); inset-inline-start: 0; min-width: 250px; background: #fff; border: 1.5px solid #e6e6ef; border-radius: 14px; padding: 8px; box-shadow: 0 12px 32px rgba(0,0,0,0.14); display: flex; flex-direction: column; gap: 6px; z-index: 1200; font-family: 'Kodchasan', 'Segoe UI', sans-serif; }
.pp-nav-child-menu[hidden] { display: none; }
.pp-nav-child-menu-title { font-size: 0.64rem; text-transform: uppercase; font-weight: 700; color: #888; letter-spacing: 0.5px; padding: 4px 6px 0; text-align: start; }
.pp-nav-child-menu .pp-child { width: 100%; background: #fff; border-color: #e6e6ef; color: #333; box-shadow: none; border-radius: 12px; padding: 5px; padding-inline-end: 10px; }
.pp-nav-child-menu .pp-child-avatar { width: 34px; height: 34px; background: #eef2ff; border-color: #e6e6ef; }
.pp-nav-child-menu .pp-child:hover { background: #fafbff; border-color: #c9d3f5; }
.pp-nav-child-menu .pp-child.is-active { background: #fde9f4; border-color: #E5399E; color: #1F3C88; }
.pp-nav-child-menu .pp-child.is-active .pp-child-avatar { border-color: #E5399E; }
.pp-nav-child-menu .pp-child-initials { color: #1F3C88; }
.pp-nav-child-menu .pp-child-name { max-width: 170px; }
.pp-nav-child-menu .pp-child-class { color: #777; }
.pp-nav-child-menu .pp-child-check { margin-inline-start: auto; }
.pp-nav-school { border: none; cursor: pointer; }
button.pp-rail-school { width: 100%; background: transparent; cursor: pointer; font-family: inherit; }
@media (max-width: 575px) {
    .pp-nav-child-text, .pp-nav-child-caret { display: none; }
    .pp-nav-child-btn { padding-inline-end: 4px; }
}
[data-theme="dark"] .pp-nav-child-btn { background: var(--dm-surface, #1e1e30); border-color: #7a2f5a; color: #a8b4d8 !important; }
[data-theme="dark"] .pp-nav-child-avatar { background: #26304f; }
[data-theme="dark"] .pp-nav-child-menu { background: var(--dm-surface-2, #262640); border-color: var(--dm-border, #2f3350); }
[data-theme="dark"] .pp-nav-child-menu-title { color: var(--dm-text-muted, #9aa3b8); }
[data-theme="dark"] .pp-nav-child-menu .pp-child { background: var(--dm-surface, #1e1e30); border-color: var(--dm-border, #2f3350); color: var(--dm-text, #e2e8f0); }
[data-theme="dark"] .pp-nav-child-menu .pp-child:hover { background: var(--dm-surface-2, #262640); border-color: #4a5a90; }
[data-theme="dark"] .pp-nav-child-menu .pp-child.is-active { background: #4a1e36; border-color: #E5399E; color: #ff9ad0; }
[data-theme="dark"] .pp-nav-child-menu .pp-child-avatar { background: #26304f; border-color: #2f3350; }
[data-theme="dark"] .pp-nav-child-menu .pp-child-initials { color: #a8b4d8; }
[data-theme="dark"] .pp-nav-child-menu .pp-child-class { color: var(--dm-text-muted, #9aa3b8); }

/* « Espace école » password gate. */
.pp-school-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.55); z-index: 150000; display: flex; align-items: center; justify-content: center; padding: 16px; font-family: 'Kodchasan', 'Segoe UI', sans-serif; }
.pp-school-overlay[hidden] { display: none; }
.pp-school-card { width: 100%; max-width: 420px; background: #fff; border-radius: 20px; padding: 20px; box-shadow: 0 18px 50px rgba(0,0,0,0.3); }
.pp-school-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.pp-school-icon { width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, #1F3C88, #E5399E); color: #fff; display: grid; place-items: center; font-size: 1.2rem; flex: 0 0 auto; }
.pp-school-head-text { min-width: 0; flex: 1 1 auto; }
.pp-school-title { font-weight: 800; font-size: 1.05rem; color: #1F3C88; text-align: start; }
.pp-school-sub { font-size: 0.82rem; color: #546e7a; text-align: start; margin-top: 2px; }
.pp-school-close { border: none; background: #f1f3f9; color: #667; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; flex: 0 0 auto; }
.pp-school-close:hover { background: #e4e8f5; }
.pp-school-label { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; color: #888; letter-spacing: 0.4px; margin-bottom: 6px; text-align: start; }
.pp-school-field { position: relative; }
.pp-school-input { width: 100%; border: 2px solid #cfd8dc; border-radius: 12px; padding: 11px 13px; padding-inline-end: 44px; font-size: 0.98rem; font-family: inherit; outline: none; background: #fff; color: #1a2332; }
.pp-school-input:focus { border-color: #E5399E; box-shadow: 0 0 0 3px rgba(229,57,158,0.15); }
.pp-school-eye { position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%); border: none; background: transparent; color: #888; cursor: pointer; font-size: 0.95rem; width: 30px; height: 30px; }
.pp-school-error { margin-top: 8px; color: #c62828; font-size: 0.8rem; text-align: start; display: flex; align-items: center; gap: 6px; }
.pp-school-error[hidden] { display: none; }
.pp-school-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.pp-school-btn { border: none; border-radius: 12px; padding: 9px 16px; font-family: inherit; font-weight: 700; font-size: 0.84rem; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.pp-school-btn-ghost { background: #eceff1; color: #546e7a; }
.pp-school-btn-ghost:hover { background: #e1e5e8; }
.pp-school-btn-main { background: linear-gradient(120deg, #1F3C88, #E5399E); color: #fff; }
.pp-school-btn-main:disabled { opacity: 0.6; cursor: wait; }
[data-theme="dark"] .pp-school-card { background: var(--dm-surface, #1e1e30); }
[data-theme="dark"] .pp-school-title { color: #a8b4d8; }
[data-theme="dark"] .pp-school-sub, [data-theme="dark"] .pp-school-label { color: var(--dm-text-muted, #9aa3b8); }
[data-theme="dark"] .pp-school-close { background: var(--dm-surface-2, #262640); color: var(--dm-text-muted, #9aa3b8); }
[data-theme="dark"] .pp-school-input { background: var(--dm-surface-2, #262640); border-color: var(--dm-border, #2f3350); color: var(--dm-text, #e2e8f0); }
[data-theme="dark"] .pp-school-btn-ghost { background: var(--dm-surface-2, #262640); color: var(--dm-text, #e2e8f0); }

/* Devoirs page — the week planner in normal flow, full width like the dashboard. */
.pp-page.pp-devoirs { max-width: none; padding-inline: 14px; }
.pp-devoirs .pp-dev-filter { margin: 4px 0 0; }
.pp-devoirs .pp-dev-filter[hidden] { display: none; }
.pp-devoirs .pp-dev-week { margin-top: 12px; }
.pp-dev-week .pp-col-head { cursor: default; }
.pp-dev-week .pp-col-head:hover { background: transparent; }
.pp-dev-week .pp-col.is-today .pp-col-head:hover { background: #e875ac; }
.pp-dev-week .pp-grid { min-height: 480px; }
.pp-dev-week .pp-col-body { overflow: visible; }
.pp-dev-week .pp-ev-title.pp-dev-text { font-weight: 600; white-space: pre-line; }
.pp-ev-foot { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 0.7rem; color: #777; }
.pp-ev-foot a { color: #005DAA; font-weight: 700; text-decoration: none; }
.pp-ev-foot a:hover { text-decoration: underline; }
[data-theme="dark"] .pp-dev-week .pp-col.is-today .pp-col-head:hover { background: #b33771; }
[data-theme="dark"] .pp-ev-foot { color: var(--dm-text-muted, #7e8aaa); }
[data-theme="dark"] .pp-ev-foot a { color: #6fa8ff; }