/* =====================================================================
   PARENT PORTAL — VISUAL IDENTITY
   Direction: traditional / prestigious international school. A deep-navy
   masthead, antique gold and oxblood as heraldic accents, a serif display
   face for headings, and a circular crest as the portal's signature mark
   — carried from the login screen through to every card and button.
   Scoped to .parent-portal-body so none of this touches the admin/teacher
   side, which keeps its own existing look.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;1,600&family=Source+Sans+3:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');

.parent-portal-body {
    --pp-ink: #0A1F3D;          /* primary navy — mastheads, headings */
    --pp-ink-2: #142A4F;        /* secondary navy — depth, hovers */
    --pp-navy-tint: #E8ECF2;    /* pale navy tint for subtle fills */
    --pp-gold: #A9812F;         /* antique gold — the working accent */
    --pp-gold-bright: #C9A227;  /* brighter gold — hover/highlight only */
    --pp-gold-pale: #F3EAD2;    /* pale gold fill, badges */
    --pp-oxblood: #6E2A34;      /* heraldic secondary accent, used sparingly */
    --pp-parchment: #F8F6F0;    /* warm paper background */
    --pp-paper: #FFFFFF;        /* card surfaces */
    --pp-ink-text: #1C2430;     /* body copy */
    --pp-text-muted: #6B7280;
    --pp-line: #E4E0D4;         /* warm hairline border */
    --pp-radius: 10px;
    --pp-font-display: 'Playfair Display', Georgia, serif;
    --pp-font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --pp-font-mono: 'IBM Plex Mono', monospace;

    background: var(--pp-parchment);
    background-image:
        radial-gradient(circle at 0% 0%, rgba(10,31,61,.035) 0%, transparent 40%),
        radial-gradient(circle at 100% 0%, rgba(169,129,47,.05) 0%, transparent 40%);
    min-height: 100vh;
    font-family: var(--pp-font-body);
    color: var(--pp-ink-text);
}

.parent-portal-body h1, .parent-portal-body h2, .parent-portal-body h3,
.parent-portal-body h4 {
    font-family: var(--pp-font-display);
    font-weight: 700;
    color: var(--pp-ink);
    letter-spacing: -.01em;
}
.parent-portal-body h5, .parent-portal-body h6 {
    font-family: var(--pp-font-body);
    font-weight: 700;
    color: var(--pp-ink);
}

/* ---------------------------------------------------------------------
   Crest — the signature mark. A navy roundel with a gold ring and the
   school's initials in serif, small-caps style. Pure CSS, no image asset.
   --------------------------------------------------------------------- */
.pp-crest {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, var(--pp-ink-2), var(--pp-ink) 70%);
    border: 2px solid var(--pp-gold);
    box-shadow: 0 0 0 1px rgba(169,129,47,.35), 0 4px 10px rgba(10,31,61,.35);
    color: var(--pp-gold-bright);
    font-family: var(--pp-font-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .02em;
    flex-shrink: 0;
}
.pp-crest.pp-crest-lg { width: 68px; height: 68px; font-size: 24px; border-width: 3px; }

.pp-logo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    background: radial-gradient(circle at 32% 28%, var(--pp-ink-2), var(--pp-ink) 70%);
    border: 3px solid var(--pp-gold);
    box-shadow: 0 0 0 1px rgba(169,129,47,.35), 0 8px 20px rgba(10,31,61,.3);
    color: var(--pp-gold-bright);
    font-size: 24px;
}

/* ---------------------------------------------------------------------
   Masthead
   --------------------------------------------------------------------- */
.parent-navbar {
    background: var(--pp-ink);
    box-shadow: 0 1px 0 var(--pp-gold);
    padding-top: .65rem;
    padding-bottom: .65rem;
}
.parent-navbar .navbar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--pp-font-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: #fff !important;
    letter-spacing: .01em;
}
.parent-navbar .navbar-brand small {
    display: block;
    font-family: var(--pp-font-body);
    font-weight: 600;
    font-size: .62rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pp-gold-bright);
    margin-top: 1px;
}
.parent-navbar .nav-link {
    font-family: var(--pp-font-body);
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: rgba(255,255,255,.78) !important;
    padding: .55rem .9rem !important;
    position: relative;
    transition: color .15s ease;
}
.parent-navbar .nav-link:hover, .parent-navbar .nav-link.active { color: #fff !important; }
.parent-navbar .nav-link::after {
    content: '';
    position: absolute;
    left: 50%; right: 50%; bottom: 4px;
    height: 2px;
    background: var(--pp-gold-bright);
    transition: left .18s ease, right .18s ease;
}
.parent-navbar .nav-link:hover::after, .parent-navbar .nav-link.active::after { left: .9rem; right: .9rem; }
.parent-navbar .dropdown-menu {
    border: 1px solid var(--pp-line);
    border-radius: var(--pp-radius);
    box-shadow: 0 12px 28px rgba(10,31,61,.18);
    padding: 6px;
}
.parent-navbar .dropdown-item { border-radius: 6px; font-weight: 600; font-size: .88rem; }
.parent-navbar .dropdown-item:hover { background: var(--pp-navy-tint); color: var(--pp-ink); }
.parent-navbar .navbar-toggler { border-color: rgba(255,255,255,.3); }
.parent-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.parent-portal-main { animation: pp-fade-in .35s ease both; }
@keyframes pp-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------------------
   Auth pages (login / register / verify / link child)
   --------------------------------------------------------------------- */
.pp-auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background:
        radial-gradient(circle at 15% 10%, rgba(169,129,47,.14), transparent 45%),
        radial-gradient(circle at 85% 90%, rgba(169,129,47,.10), transparent 45%),
        var(--pp-ink);
}

.pp-auth-card {
    width: 100%;
    max-width: 460px;
    background: var(--pp-paper);
    border-radius: var(--pp-radius);
    border-top: 3px solid var(--pp-gold);
    box-shadow: 0 24px 60px rgba(0,0,0,.35);
    padding: 40px 32px;
    animation: pp-pop-in .4s cubic-bezier(.22,1,.36,1) both;
}
@keyframes pp-pop-in {
    from { opacity: 0; transform: scale(.97) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.pp-auth-card .pp-logo { margin: 0 auto 18px; }
.pp-auth-card h1, .pp-auth-card h2, .pp-auth-card h3 { text-align: center; }
.pp-auth-card .pp-eyebrow {
    display: block;
    text-align: center;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--pp-gold);
    margin-bottom: 6px;
}

.pp-otp-input {
    letter-spacing: 10px;
    font-size: 26px;
    text-align: center;
    font-weight: 700;
    font-family: var(--pp-font-mono);
    border-color: var(--pp-line);
}
.pp-otp-input:focus { border-color: var(--pp-gold); box-shadow: 0 0 0 .2rem rgba(169,129,47,.18); }

.pp-method-tabs .nav-link {
    border-radius: 8px;
    font-weight: 700;
    font-size: .85rem;
    color: var(--pp-ink);
    border: 1px solid var(--pp-line);
}
.pp-method-tabs .nav-link.active {
    background: var(--pp-ink);
    color: #fff;
    border-color: var(--pp-ink);
}

/* ---------------------------------------------------------------------
   Cards — restrained, bordered, a gold rule instead of a heavy shadow
   --------------------------------------------------------------------- */
.parent-portal-main .card {
    border: 1px solid var(--pp-line);
    border-radius: var(--pp-radius);
    box-shadow: 0 1px 3px rgba(10,31,61,.05);
}
.parent-portal-main .card.shadow-sm { box-shadow: 0 1px 3px rgba(10,31,61,.05) !important; }
.parent-portal-main .card-header {
    background: var(--pp-paper);
    border-bottom: 1px solid var(--pp-line);
    font-weight: 700;
    color: var(--pp-ink);
}

.pp-child-card {
    border: 1px solid var(--pp-line);
    border-radius: var(--pp-radius);
    overflow: hidden;
    background: var(--pp-paper);
    box-shadow: 0 1px 3px rgba(10,31,61,.05);
    transition: box-shadow .25s ease, transform .25s ease;
    animation: pp-fade-in .4s ease both;
}
.pp-child-card:hover { box-shadow: 0 10px 26px rgba(10,31,61,.12); transform: translateY(-2px); }
.pp-child-card .pp-child-banner {
    height: 64px;
    background: var(--pp-ink);
    border-bottom: 2px solid var(--pp-gold);
}
.pp-child-card .pp-child-photo {
    width: 80px; height: 80px; border-radius: 50%;
    object-fit: cover; border: 3px solid var(--pp-paper);
    margin-top: -46px; box-shadow: 0 4px 12px rgba(0,0,0,.2);
}

.pp-stat-pill {
    border-radius: 8px;
    padding: 10px 12px;
    background: var(--pp-navy-tint);
    border-left: 3px solid var(--pp-gold);
}
.pp-stat-pill .pp-stat-value { font-weight: 700; font-size: 1.05rem; color: var(--pp-ink); font-family: var(--pp-font-mono); }
.pp-stat-pill .pp-stat-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: var(--pp-text-muted); }

.pp-empty-state { text-align: center; padding: 60px 20px; }
.pp-empty-state i { font-size: 48px; color: var(--pp-gold); opacity: .55; }

.pp-quick-action {
    display: flex; flex-direction: column; gap: 3px; height: 100%; padding: 18px;
    background: var(--pp-paper); border: 1px solid var(--pp-line); border-radius: var(--pp-radius);
    color: var(--pp-ink); text-decoration: none;
    box-shadow: 0 1px 3px rgba(10,31,61,.05);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pp-quick-action:hover { color: var(--pp-ink); transform: translateY(-3px); box-shadow: 0 12px 24px rgba(10,31,61,.1); border-color: var(--pp-gold); }
.pp-quick-action i { font-size: 1.3rem; color: var(--pp-gold); margin-bottom: 6px; }
.pp-quick-action span { font-weight: 700; font-family: var(--pp-font-body); }
.pp-quick-action small { color: var(--pp-text-muted); }
.pp-service-hero { font-size: 2.75rem; color: var(--pp-gold); opacity: .6; }

.pp-badge-method { font-size: .7rem; padding: .3em .6em; border-radius: 4px; font-weight: 700; letter-spacing: .02em; }

/* ---------------------------------------------------------------------
   Buttons, badges, alerts, tables, forms — recolored within scope
   --------------------------------------------------------------------- */
.parent-portal-body .btn-primary {
    background: var(--pp-ink);
    border-color: var(--pp-ink);
    font-weight: 700;
    letter-spacing: .01em;
}
.parent-portal-body .btn-primary:hover, .parent-portal-body .btn-primary:focus {
    background: var(--pp-ink-2);
    border-color: var(--pp-ink-2);
    box-shadow: 0 4px 12px rgba(10,31,61,.25);
}
.parent-portal-body .btn-outline-primary {
    color: var(--pp-ink);
    border-color: var(--pp-ink);
    font-weight: 700;
}
.parent-portal-body .btn-outline-primary:hover { background: var(--pp-ink); border-color: var(--pp-ink); }
.parent-portal-body .btn-outline-secondary { color: var(--pp-ink); border-color: var(--pp-line); font-weight: 600; }
.parent-portal-body .btn-outline-secondary:hover { background: var(--pp-navy-tint); border-color: var(--pp-line); color: var(--pp-ink); }
.parent-portal-body a { color: var(--pp-ink); }
.parent-portal-body a:hover { color: var(--pp-gold); }

.parent-portal-body .text-primary { color: var(--pp-ink) !important; }
.parent-portal-body .bg-primary { background: var(--pp-ink) !important; }
.parent-portal-body .badge.text-bg-success { background: #2F6F4E !important; }
.parent-portal-body .badge.text-bg-danger { background: var(--pp-oxblood) !important; }
.parent-portal-body .badge.text-bg-secondary { background: #565F6E !important; }
.parent-portal-body .badge.text-bg-warning { background: var(--pp-gold) !important; color: #fff !important; }

.parent-portal-body .alert { border-radius: 8px; border: 1px solid transparent; font-size: .92rem; }
.parent-portal-body .alert-success { background: #EDF5EF; border-color: #BFDDC9; color: #235438; }
.parent-portal-body .alert-danger  { background: #F5EAEB; border-color: #E0C1C5; color: var(--pp-oxblood); }
.parent-portal-body .alert-warning { background: var(--pp-gold-pale); border-color: #E6D3A0; color: #6B5417; }
.parent-portal-body .alert-info    { background: var(--pp-navy-tint); border-color: #C9D2E0; color: var(--pp-ink); }

.parent-portal-body .table thead th {
    font-family: var(--pp-font-body);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    color: var(--pp-text-muted);
    border-bottom: 2px solid var(--pp-ink);
    background: transparent;
}
.parent-portal-body .table td { border-color: var(--pp-line); vertical-align: middle; }
.parent-portal-body .table-hover tbody tr:hover { background: var(--pp-navy-tint); }

.parent-portal-body .form-control, .parent-portal-body .form-select {
    border-color: var(--pp-line);
    border-radius: 8px;
}
.parent-portal-body .form-control:focus, .parent-portal-body .form-select:focus {
    border-color: var(--pp-gold);
    box-shadow: 0 0 0 .2rem rgba(169,129,47,.16);
}
.parent-portal-body .form-label { font-weight: 600; font-size: .85rem; color: var(--pp-ink); }

.parent-portal-body .nav-tabs .nav-link { font-weight: 700; color: var(--pp-text-muted); border: none; border-bottom: 2px solid transparent; }
.parent-portal-body .nav-tabs .nav-link.active { color: var(--pp-ink); border-bottom-color: var(--pp-gold); background: transparent; }

/* Receipt / official-document styling — leans into the "certificate" feel */
.pp-receipt {
    background: var(--pp-paper);
    border: 1px solid var(--pp-line);
    border-radius: var(--pp-radius);
    position: relative;
}
.pp-receipt::before {
    content: '';
    position: absolute; inset: 10px;
    border: 1px solid var(--pp-gold);
    border-radius: 6px;
    pointer-events: none;
    opacity: .45;
}
.pp-receipt-no { font-family: var(--pp-font-mono); letter-spacing: .04em; }

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.parent-footer {
    background: var(--pp-ink);
    color: rgba(255,255,255,.6);
    border-top: 1px solid var(--pp-gold);
    font-size: .8rem;
    letter-spacing: .02em;
}

@media (max-width: 576px) {
    .pp-auth-card { padding: 30px 22px; }
    .pp-otp-input { font-size: 20px; letter-spacing: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .parent-portal-main, .pp-auth-card, .pp-child-card { animation: none !important; }
    .pp-quick-action, .pp-child-card { transition: none !important; }
}