/* ============================================================
   08-parent-system.css
   DESIGN SYSTEM cho toàn bộ khu vực phụ huynh
   (cửa khóa, cài đặt, báo cáo) — dùng CHUNG, nhất quán.

   Nguyên tắc: tách khỏi giao diện trẻ em. Phần trẻ = sáng,
   tròn, vui. Phần phụ huynh = trầm, sạch, đáng tin.
   ============================================================ */
:root{
  /* màu nền & bề mặt */
  --p-bg:        #EEF1F8;     /* nền trang */
  --p-surface:   #FFFFFF;     /* card, modal */
  --p-surface-2: #F4F6FB;     /* vùng phụ, input nền */
  --p-line:      #E6E9F2;     /* đường kẻ, viền */

  /* màu chữ */
  --p-ink:       #1E2235;     /* chữ chính */
  --p-ink-2:     #5A6075;     /* chữ phụ */
  --p-ink-3:     #9AA0B4;     /* chữ mờ */

  /* màu thương hiệu (1 màu chủ đạo cho toàn khu phụ huynh) */
  --p-brand:     #4F46E5;     /* indigo — nghiêm túc, tin cậy */
  --p-brand-d:   #4338CA;
  --p-brand-soft:#EEF0FE;     /* nền nhạt của brand */

  /* màu trạng thái (dùng thống nhất trong báo cáo) */
  --p-good:      #16A34A;
  --p-good-soft: #E7F6EC;
  --p-warn:      #D97706;
  --p-warn-soft: #FDF2E2;
  --p-bad:       #DC2626;
  --p-bad-soft:  #FCEBEB;

  /* hình khối */
  --p-radius:    18px;        /* bo góc card chuẩn */
  --p-radius-sm: 12px;        /* bo góc nhỏ (nút, input) */
  --p-shadow:    0 4px 16px rgba(30,34,53,.06);
  --p-shadow-lg: 0 18px 50px rgba(30,34,53,.18);

  /* spacing thang (4px base) */
  --p-pad:       22px;
}

/* ---------- LỚP PHỦ (overlay) dùng chung ---------- */
.p-overlay{position:fixed;inset:0;z-index:48;
  background:rgba(20,22,38,.45);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;padding:20px}
.p-overlay.open{display:flex}

/* ---------- MODAL chung ---------- */
.p-modal{background:var(--p-surface);border-radius:var(--p-radius);
  width:100%;max-width:460px;box-shadow:var(--p-shadow-lg);
  overflow:hidden;animation:pIn .22s cubic-bezier(.2,.9,.3,1)}
@keyframes pIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.p-modal-head{display:flex;align-items:center;justify-content:space-between;
  padding:20px var(--p-pad);border-bottom:1px solid var(--p-line)}
.p-modal-title{font-weight:700;font-size:19px;color:var(--p-ink);letter-spacing:-.01em}
.p-modal-body{padding:var(--p-pad)}

/* ---------- NÚT chung (1 hệ thống nút duy nhất) ---------- */
.p-btn{border:0;cursor:pointer;font-family:inherit;font-weight:600;font-size:15px;
  padding:13px 20px;border-radius:var(--p-radius-sm);min-height:48px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:background .15s, transform .08s, box-shadow .15s;letter-spacing:-.01em}
.p-btn:active{transform:translateY(1px)}
.p-btn-primary{background:var(--p-brand);color:#fff}
.p-btn-primary:hover{background:var(--p-brand-d)}
.p-btn-ghost{background:var(--p-surface-2);color:var(--p-ink)}
.p-btn-ghost:hover{background:var(--p-line)}
.p-btn-block{width:100%}
.p-btn-icon{background:var(--p-surface-2);width:44px;height:44px;padding:0;
  border-radius:var(--p-radius-sm)}
.p-btn-icon svg{width:22px;height:22px}

/* ---------- INPUT chung ---------- */
.p-input{width:100%;font-family:inherit;font-weight:600;font-size:18px;color:var(--p-ink);
  padding:14px 16px;border:2px solid var(--p-line);border-radius:var(--p-radius-sm);
  outline:none;background:var(--p-surface);transition:border-color .15s;text-align:center}
.p-input:focus{border-color:var(--p-brand)}

/* ---------- CARD chung ---------- */
.p-card{background:var(--p-surface);border-radius:var(--p-radius);
  padding:var(--p-pad);box-shadow:var(--p-shadow);border:1px solid var(--p-line)}

/* ---------- nhãn mục / tiêu đề nhỏ ---------- */
.p-label{font-weight:700;font-size:15px;color:var(--p-ink)}
.p-hint{font-size:13.5px;color:var(--p-ink-2);font-weight:500;line-height:1.5}
.p-note{font-size:12.5px;color:var(--p-ink-3);font-weight:500}

/* ---------- hàng mục có phân cách ---------- */
.p-row{padding:18px 0;border-bottom:1px solid var(--p-line)}
.p-row:last-child{border-bottom:0}
.p-row:first-child{padding-top:0}

/* hàng dạng "link bấm được" */
.p-action{display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;border:0;cursor:pointer;font-family:inherit;background:var(--p-surface-2);
  color:var(--p-ink);font-weight:600;font-size:15px;padding:15px 16px;
  border-radius:var(--p-radius-sm);margin-top:10px;transition:background .15s}
.p-action:hover{background:var(--p-line)}
.p-action .p-arrow{color:var(--p-ink-3)}