/* =============================================================
   PERFECT ACADEMY — SINGLE SITE STYLESHEET
   Public site + Student Portal + Teacher/Staff Portal + Parent Portal
   =============================================================

   HOW TO USE THIS FILE
   ---------------------------------------------------------------
   1. Drop this file at, e.g., static/css/styles.css in your Django
      project (or /css/styles.css if you're still working outside
      Django).
   2. In every page's <head>, DELETE the old inline <style>...</style>
      block and replace it with:

        <link rel="stylesheet" href="{% static 'css/styles.css' %}">

      (or a plain <link rel="stylesheet" href="/css/styles.css"> if
      you're not templating yet).
   3. Keep everything else in <head> exactly as it is on every page:
        - Google Fonts <link> tags (Fraunces / Inter / IBM Plex Mono)
        - Bootstrap 5.3.3 CSS/JS CDN tags
        - Bootstrap Icons CDN tag
        - the <html data-bs-theme="light"> attribute (dark mode relies
          on this exact attribute name — don't rename it)
   4. Keep the per-page <script>...</script> blocks where they are —
      this file is CSS only. All the JS (dark mode toggle, reveal-on-
      scroll, sidebar toggle, form validation, per-page demo data) stays
      inline on each page for now; wiring it into Django templates/
      static JS files is a separate step.
   5. This one file is safe to load on EVERY page — public and all
      three portals. Pages only use the selectors relevant to them;
      everything else sits unused and harmless.

   ORGANIZATION
   ---------------------------------------------------------------
   PART 1 — Design tokens (colors, light/dark theme variables)
   PART 2 — Base typography & shared primitives (used everywhere)
   PART 3 — Public site components (navbar, hero, cards, footer, etc.)
   PART 4 — Portal shell (sidebar + topbar — Student/Teacher/Parent)
   PART 5 — Portal widgets (stat cards, reviews, daily log, leave,
             files, printable certificate, password strength)

   A few near-duplicate rules that existed across different pages
   (e.g. slightly different .notice-row spacing, two versions of
   .btn-pa-outline) have been unified into one canonical version each
   — this is a deliberate, harmless consolidation, not a redesign.
   ============================================================= */


/* =============================================================
   PART 1 — DESIGN TOKENS
   ============================================================= */
:root{
  --pa-navy:        #16213e;
  --pa-navy-2:      #223261;
  --pa-navy-soft:   #2c3d6e;
  --pa-red:         #ED2024;
  --pa-red-deep:    #8e1a21;
  --pa-gold:        #ad925d; /* used sparingly — dividers / seal ring / small icons only */
  --pa-off:         #f7f4ee;
  --pa-off-2:       #ffffff;
  --pa-ink:         #16213e;
  --pa-muted:       #5c6472;
  --pa-line:        rgba(22,33,62,0.10);

  --bg:            var(--pa-off);
  --surface:       var(--pa-off-2);
  --surface-2:     #efe9db;
  --text:          var(--pa-ink);
  --text-muted:    var(--pa-muted);
  --line:          var(--pa-line);
  --shadow:        0 10px 30px rgba(22,33,62,0.08);

  --sidebar-w:      260px; /* portal pages only — harmless on public pages */
}

[data-bs-theme="dark"]{
  --pa-red:        #ad925d;
  --bg:            #273e7b;
  --surface:       #263869;
  --surface-2:     #2b4482;
  --text:          #f2efe6;
  --text-muted:    #a7afc4;
  --line:          rgba(242,239,230,0.10);
  --shadow:        0 10px 30px rgba(0,0,0,0.45);
  --bs-danger-bg-subtle: #F8D7DA;
  --bs-success-bg-subtle: #D1E7DD;
  --bs-primary-bg-subtle: #CFE2FF;
  --bs-secondary-bg-subtle: #CFE2FF;
  --bs-warning-bg-subtle: #FFF3CD;

}


/* =============================================================
   PART 2 — BASE TYPOGRAPHY & SHARED PRIMITIVES
   (used on every page, public and portal alike)
   ============================================================= */
*{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', sans-serif;
  transition:background .25s ease, color .25s ease;
}

h1,h2,h3,.font-display{
  font-family:'Fraunces', serif;
  letter-spacing:-0.02em;
}
.font-mono{ font-family:'IBM Plex Mono', monospace; }
.text-muted-pa{ color:var(--text-muted) !important; }

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--pa-red);
  font-weight:600;
}

/* Marquee style ribbon */
.marquee-wrap {
    background-color: #10122b; /* dark navy like your screenshot */
    overflow: hidden;
    white-space: nowrap;
    padding: 16px 0;
  }
 
  .marquee-track {
    display: inline-flex;
    animation: marquee-scroll 25s linear infinite;
  }
 
  .marquee-wrap:hover .marquee-track {
    /* animation-play-state: paused; optional: pause on hover */
  }
 
  .marquee-item {
    display: inline-flex;
    align-items: center;
    color: #e8e8f0;
    font-weight: 600;
    letter-spacing: 0.5px;
    font-size: 0.95rem;
    text-transform: uppercase;
    padding: 0 2rem;
    white-space: nowrap;
  }
  .marquee-item :active{
    color: var(--pa-red);
  }
 
  .marquee-item .divider {
    color: var(--pa-red);
    margin-left: 2rem;
    font-size: 1rem;
  }
 
  @keyframes marquee-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* -50% because content is duplicated once */
  }

/* Buttons */
.btn-pa-red{
  background:var(--pa-red); border-color:var(--pa-red); color:#fff;
  font-weight:600; letter-spacing:.02em;
}
.btn-pa-red:hover{ background:var(--pa-red-deep); border-color:var(--pa-red-deep); color:#fff; }

.btn-pa-outline{
  border:1.5px solid var(--pa-navy); color:var(--text); font-weight:600;
  background:transparent;
}
[data-bs-theme="dark"] .btn-pa-outline{ border-color:var(--surface-2); }
.btn-pa-outline:hover{ background:var(--pa-navy); color:#fff; border-color:var(--pa-navy); }

/* Text link accent — used everywhere ("View details", "Learn more", etc.) */
.course-link{ color:var(--pa-red); font-weight:600; font-size:.88rem; text-decoration:none; }
.course-link:hover{ text-decoration:underline; }

/* Dark mode toggle switch — identical markup/behavior on every page */
.theme-toggle{
  width:44px; height:26px; border-radius:20px;
  background:var(--surface-2); border:1px solid var(--line);
  position:relative; cursor:pointer; flex-shrink:0;
}
.theme-toggle .knob{
  position:absolute; top:2px; left:2px;
  width:20px; height:20px; border-radius:50%;
  background:var(--pa-navy); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.65rem;
  transition:left .2s ease, background .2s ease;
}
[data-bs-theme="dark"] .theme-toggle .knob{ left:20px; background:var(--pa-gold); color:var(--pa-navy); }

/* Generic surface card — base rule used on both public and portal pages.
   Public marketing cards additionally hover-lift (see PART 3); portal
   utility cards (stat cards, list cards) intentionally do not. */
.pa-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
}

/* Form inputs — Contact, Login, Verify Certificate, Change Password,
   Student Review, Daily Log, Leave Request all use this */
.pa-input{
  background:var(--bg) !important;
  border:1px solid var(--line) !important;
  color:var(--text) !important;
  border-radius:10px;
  padding:.65rem .9rem;
}
.pa-input:focus{
  border-color:var(--pa-red) !important;
  box-shadow:0 0 0 .2rem rgba(224,48,59,0.15) !important;
}
.pa-input::placeholder{ color:var(--text-muted); }
select.pa-input{ color:var(--text) !important; }

/* Notice row — Home preview, public Notices list, Student/Parent portal Notices */
.notice-row{
  display:flex; gap:1rem; align-items:flex-start;
  padding:1.1rem 0; border-bottom:1px dashed var(--line);
}
.notice-row:last-child{ border-bottom:none; }
.notice-date{
  flex-shrink:0; width:58px; text-align:center;
  background:var(--surface-2); border-radius:10px; padding:.5rem .3rem;
  font-family:'IBM Plex Mono', monospace;
}
.notice-date .d{ font-size:1.1rem; font-weight:700; line-height:1; color:var(--pa-red); }
.notice-date .m{ font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }
.notice-row h4{ font-size:1rem; font-weight:600; margin-bottom:.2rem; }
.notice-row p{ font-size:.87rem; color:var(--text-muted); margin:0; }
.badge-audience{
  font-family:'IBM Plex Mono', monospace; font-size:.6rem; letter-spacing:.06em;
  padding:.28rem .5rem; border-radius:6px; text-transform:uppercase;
}
.unread-dot{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--pa-red); margin-left:.4rem; vertical-align:middle;
}

/* Generic filter-chip pattern — Courses, Gallery, Notices (audience),
   Daily Log (category), Shared Files (folder) all reuse this shape */
.filter-chip.active,
.audience-chip.active,
.log-filter-chip.active,
.folder-chip.active{
  background:var(--pa-red); border-color:var(--pa-red); color:#fff;
}

/* Reveal-on-scroll — applied via .reveal class + IntersectionObserver JS on every page */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }


/* =============================================================
   PART 3 — PUBLIC SITE COMPONENTS
   (Home, About, Courses, Course Detail, Notices, Notice Detail,
    Gallery, Contact, Verify Certificate, Login)
   ============================================================= */
.section-pad{ padding:5.5rem 0; }
@media (max-width:767px){ .section-pad{ padding:3.5rem 0; } }

/* ---- Navbar ---- */
.pa-navbar{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  transition:background .25s ease, border-color .25s ease;
}
.pa-navbar .navbar-brand{ display:flex; align-items:center; gap:.6rem; }
.pa-navbar .navbar-brand img{ width:42px; height:42px; object-fit:contain; }
.pa-navbar .brand-text{
  font-family: "Graduate", serif;
  font-weight: 700;
  font-style: bold;
  font-size:1.15rem; text-transform:uppercase;
  color:var(--text); line-height:1.1;
}
.pa-navbar .brand-text small{
  display:block; font-family:'IBM Plex Mono', monospace;
  font-size:.6rem; letter-spacing:.14em; color:var(--pa-red); font-weight:600;
}
.pa-navbar .nav-link{
  color:var(--text); font-weight:500; font-size:.93rem;
  padding:.5rem 1rem !important;
}

.pa-navbar .nav-link:hover{ color:var(--pa-red);
    text-decoration:underline;
    text-underline-offset:10px; }

  .pa-navbar .nav-link.active {
    color:var(--pa-gold);
    text-decoration:underline;
    text-underline-offset:10px;
  }

/* ---- Hero (Home + inner-page compact hero header) ---- */
.hero{
  position:relative;
  background:linear-gradient(165deg, var(--pa-navy) 0%, var(--pa-navy-2) 100%);
  color:#f2efe6;
  overflow:hidden;
  padding:5rem 0 6.5rem;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(247,244,238,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247,244,238,0.05) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(circle at 30% 30%, black, transparent 70%);
          mask-image:radial-gradient(circle at 30% 30%, black, transparent 70%);
}
.hero-shape{
  position:absolute; right:-120px; top:-120px;
  width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(224,48,59,0.28), transparent 70%);
}
.hero .eyebrow{ color:var(--pa-gold); }
.hero h1{ font-size:2.9rem; font-weight:600; line-height:1.08; margin:.6rem 0 1.1rem; }
.hero h1 em{ font-style:italic; color:var(--pa-red); font-weight:500; }
@media (max-width:767px){ .hero h1{ font-size:2.1rem; } }
.hero p.lead{ color:rgba(242,239,230,0.78); font-size:1.08rem; max-width:520px; }

.hero-badge{
  width:100%; height:100%; border-radius:10px;
  background:radial-gradient(circle at 35% 30%, #fffdf8, #efe6cf 80%);
  border:2px solid var(--pa-gold);
  box-shadow:0 0 0 7px rgba(198,154,68,0.14), 0 18px 40px rgba(0,0,0,0.35);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto;
}
.hero-badge img{ width:100%; height:100%; object-fit:contain; border-radius:10px; }

 #tiltWrap {
    perspective: 1000px; /* gives the rotation somewhere to "go" in 3D space */
  }

  #tiltImg {
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
    transform-style: preserve-3d;
    will-change: transform;
  }

.hero-stats{
  position:relative; z-index:1;
  background:rgba(247,244,238,0.06);
  border:1px solid rgba(247,244,238,0.14);
  border-radius:16px;
  backdrop-filter:blur(6px);
}
.hero-stats .stat{ padding:1.1rem .5rem; text-align:center; }
.hero-stats .stat .num{
  font-family:'Fraunces', serif; font-weight:600; font-size:1.9rem; color:#fff; line-height:1;
}
.hero-stats .stat .label{
  font-family:'IBM Plex Mono', monospace; font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(242,239,230,0.65); margin-top:.4rem;
}

/* ---- Public marketing card hover (Home/About/Courses feature & course cards) ---- */
.pa-card:hover{ transform:translateY(-4px); border-color:var(--pa-gold); }
.pa-card{ transition:transform .2s ease, border-color .2s ease; }

.section-head{ margin-bottom:2.6rem; }
.section-head h2{ font-size:2rem; font-weight:600; margin:.4rem 0 0; }
.section-head .divider{
  width:38px; height:3px; background:var(--pa-red); margin-top:14px; border-radius:2px;
}

/* ---- Highlights / feature icon tile ---- */
.feature-icon{
  width:52px; height:52px; border-radius:14px;
  background:var(--pa-navy); color:var(--pa-off);
  display:flex; align-items:center; justify-content:center;
  font-size:1.35rem; margin-bottom:1rem;
}
[data-bs-theme="dark"] .feature-icon{ background:var(--surface-2); }

/* ---- Courses (list preview cards + Course Detail large cards) ---- */
.course-card{ overflow:hidden; }
.course-card-lg{ overflow:hidden; }
.course-card-lg ul li i{ font-size:.85rem; }
.course-tag{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:96px;
  background:linear-gradient(135deg, var(--pa-navy), var(--pa-navy-2));
  color:var(--pa-off); font-size:2rem;
}
.course-card .body{ padding:1.5rem; }
.course-card .eyebrow{ font-size:.66rem; }
.course-card h3{ font-size:1.25rem; font-weight:600; margin:.4rem 0 .5rem; }
.course-card p{ color:var(--text-muted); font-size:.92rem; margin-bottom:1rem; }

/* ---- Gallery ---- */
.gallery-tile{
  aspect-ratio:1/1; border-radius:14px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.85); font-size:1.6rem;
  position:relative; cursor:pointer;
  transition:transform .2s ease;
}
.gallery-tile:hover{ transform:scale(1.03); }
.gallery-tile span.cap{
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(to top, rgba(0,0,0,0.55), transparent);
  color:#fff; font-size:.7rem; padding:.6rem .6rem .4rem;
  font-family:'IBM Plex Mono', monospace; letter-spacing:.04em;
}

/* ---- Testimonials ---- */
.quote-card{ padding:1.8rem; }
.quote-card i.bi-quote{ font-size:1.6rem; color:var(--pa-gold); }
.quote-card p.quote-text{ font-size:.96rem; color:var(--text); margin:.8rem 0 1.2rem; line-height:1.6; }
.quote-avatar{
  width:42px; height:42px; border-radius:50%;
  background:var(--pa-navy); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', serif; font-weight:600;
}
.quote-name{ font-weight:600; font-size:.9rem; }
.quote-role{ font-size:.76rem; color:var(--text-muted); }

/* ---- Contact strip (Home) + Contact page cards ---- */
.contact-strip{
  background:var(--pa-navy); color:#f2efe6; border-radius:20px;
  padding:2.6rem;
}
.contact-strip .item{ display:flex; gap:.9rem; align-items:flex-start; }
.contact-strip .icon{
  width:44px; height:44px; border-radius:12px; flex-shrink:0;
  background:rgba(247,244,238,0.08); display:flex; align-items:center; justify-content:center;
  color:var(--pa-off);
}
.contact-strip h5{ font-size:.9rem; margin-bottom:.15rem; font-weight:600; }
.contact-strip p, .contact-strip a{ color:rgba(242,239,230,0.75); font-size:.87rem; margin:0; text-decoration:none; }
.contact-strip a:hover{ color:#fff; }

/* ---- Login page role tabs ---- */
.role-tab{
  background:var(--surface-2) !important; color:var(--text) !important;
  border:1px solid var(--line) !important; border-radius:20px !important;
  font-weight:600; font-size:.85rem; padding:.4rem 1.1rem !important;
}
.role-tab.active{
  background:var(--pa-red) !important; border-color:var(--pa-red) !important; color:#fff !important;
}
/* Password show/hide toggle button — Login + Change Password (all roles) */
.pw-toggle{ border-color:var(--line) !important; }

/* ---- Public site footer ---- */
footer.pa-footer{
  background:var(--pa-navy); color:rgba(242,239,230,0.75);
  padding:3.5rem 0 1.5rem;
}
footer.pa-footer h6{
  font-family:'IBM Plex Mono', monospace; font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--pa-gold); margin-bottom:1rem;
}
footer.pa-footer a{ color:rgba(242,239,230,0.75); text-decoration:none; font-size:.88rem; }
footer.pa-footer a:hover{ color:#fff; }
footer.pa-footer .social-icons a{
  width:38px; height:38px; border-radius:50%;
  background:rgba(247,244,238,0.08);
  display:inline-flex; align-items:center; justify-content:center;
  margin-right:.5rem;
}
footer.pa-footer .social-icons a:hover{ background:var(--pa-red); }
footer.pa-footer hr{ border-color:rgba(247,244,238,0.12); margin:2.2rem 0 1.2rem; }
footer.pa-footer .fine{ font-size:.78rem; color:rgba(242,239,230,0.55); }


/* =============================================================
   PART 4 — PORTAL SHELL
   (shared fixed-sidebar + topbar layout used by ALL THREE portals:
    Student, Teacher/Staff, Parent — only the nav links, role label,
    and user-chip text differ between them, in the HTML)
   ============================================================= */
.portal-wrapper{ display:flex; min-height:100vh; }

.portal-sidebar{
  width:var(--sidebar-w); flex-shrink:0;
  background:var(--pa-navy); color:#f2efe6;
  position:fixed; top:0; left:0; bottom:0; z-index:1040;
  display:flex; flex-direction:column;
  transition:transform .25s ease;
}
.sidebar-brand{
  display:flex; align-items:center; gap:.7rem;
  padding:1.4rem 1.3rem; border-bottom:1px solid rgba(247,244,238,0.1);
}
.sidebar-brand img{ width:38px; height:38px; object-fit:contain; }
.sidebar-brand .name{ font-family:'graduate', serif; font-weight:700; font-size:1.02rem; line-height:1.1; }
.sidebar-brand .role{
  font-family:'IBM Plex Mono', monospace; font-size:.6rem; letter-spacing:.12em;
  color:var(--pa-gold); text-transform:uppercase;
}
.sidebar-nav{ flex:1; padding:1.2rem .9rem; overflow-y:auto; }
.sidebar-nav .nav-section-label{
  font-family:'IBM Plex Mono', monospace; font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(247,244,238,0.4); padding:0 .6rem; margin:1.1rem 0 .5rem;
}
.sidebar-nav .nav-section-label:first-child{ margin-top:0; }
.sidebar-link{
  display:flex; align-items:center; gap:.75rem;
  padding:.65rem .8rem; border-radius:10px; margin-bottom:.2rem;
  color:rgba(247,244,238,0.75); text-decoration:none; font-size:.9rem; font-weight:500;
  transition:background .15s ease, color .15s ease;
}
.sidebar-link i{ font-size:1.05rem; width:20px; text-align:center; }
.sidebar-link:hover{ background:rgba(247,244,238,0.08); color:#fff; }
.sidebar-link.active{ background:var(--pa-red); color:#fff; }
.sidebar-foot{ padding:1rem 1.3rem; border-top:1px solid rgba(247,244,238,0.1); }
.sidebar-foot a{ color:rgba(247,244,238,0.65); text-decoration:none; font-size:.85rem; }
.sidebar-foot a:hover{ color:#fff; }
.sidebar-foot .sidebar-logout{ background:none; border:0; padding:0; color:rgba(247,244,238,0.65); font-size:.85rem; cursor:pointer; }
.sidebar-foot .sidebar-logout:hover{ color:#fff; }

.portal-main{ flex:1; margin-left:var(--sidebar-w); display:flex; flex-direction:column; min-width:0; }

.portal-topbar{
  background:var(--surface); border-bottom:1px solid var(--line);
  padding:.9rem 1.6rem; display:flex; align-items:center; gap:1rem;
  position:sticky; top:0; z-index:1020;
}
.sidebar-toggle-btn{
  display:none; background:none; border:1px solid var(--line); border-radius:8px;
  width:38px; height:38px; align-items:center; justify-content:center; color:var(--text);
}
.topbar-title{ font-family:'Fraunces', serif; font-weight:600; font-size:1.15rem; margin:0; }

.user-chip{
  display:flex; align-items:center; gap:.6rem; cursor:pointer;
  padding:.35rem .6rem; border-radius:10px;
}
.user-chip:hover{ background:var(--surface-2); }
.user-avatar{
  width:36px; height:36px; border-radius:50%; background:var(--pa-navy); color:var(--pa-gold);
  display:flex; align-items:center; justify-content:center; font-family:'Fraunces', serif; font-weight:600;
}
.user-chip .uname{ font-size:.85rem; font-weight:600; line-height:1.1; }
.user-chip .urole{ font-size:.7rem; color:var(--text-muted); }

.portal-content{ padding:2rem 1.6rem; flex:1; }
.portal-footer{
  padding:1rem 1.6rem; border-top:1px solid var(--line); text-align:center;
  font-size:.78rem; color:var(--text-muted);
}

.sidebar-backdrop{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:1030;
}

@media (max-width: 991px){
  .portal-sidebar{ transform:translateX(-100%); }
  .portal-sidebar.show{ transform:translateX(0); }
  .portal-main{ margin-left:0; }
  .sidebar-toggle-btn{ display:inline-flex; }
  .sidebar-backdrop.show{ display:block; }
}


/* =============================================================
   PART 5 — PORTAL WIDGETS
   (dashboard stat cards + quick actions used by all 3 portals;
    role-specific widgets — Student Review/Daily Log/Leave Request/
    Shared Files are Teacher-only; Certificate is Student-only —
    all safe to load everywhere)
   ============================================================= */

/* ---- Dashboard stat cards (Student, Teacher, Parent dashboards) ---- */
.stat-card{ padding:1.4rem; }
.stat-card .icon{
  width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); color:var(--pa-red); font-size:1.2rem; margin-bottom:.9rem;
}
.stat-card .num{ font-family:'Fraunces', serif; font-weight:600; font-size:1.6rem; line-height:1; }
.stat-card .label{ font-size:.8rem; color:var(--text-muted); margin-top:.3rem; }

/* ---- Quick action row (all portal dashboards) ---- */
.quick-action{
  display:flex; align-items:center; gap:.9rem; padding:1rem 1.1rem;
  border-radius:14px; text-decoration:none; color:var(--text);
  background:var(--surface); border:1px solid var(--line); transition:transform .15s ease, border-color .15s ease;
}
.quick-action:hover{ transform:translateY(-2px); border-color:var(--pa-gold); color:var(--text); }
.quick-action .qa-icon{
  width:42px; height:42px; border-radius:11px; background:var(--pa-navy); color:var(--pa-gold);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.quick-action .qa-title{ font-weight:600; font-size:.88rem; }
.quick-action .qa-sub{ font-size:.76rem; color:var(--text-muted); }

/* ---- Star rating input + review history (Teacher Student Review, Parent Child Detail) ---- */
.star-rating{ font-size:1.5rem; display:flex; gap:.3rem; }
.star-rating .star{ color:var(--surface-2); cursor:pointer; transition:color .1s ease; }
.star-rating .star.filled{ color:var(--pa-gold); }
.review-item{ border:1px solid var(--line); border-radius:12px; padding:1rem; }
.review-item .stars{ color:var(--pa-gold); font-size:.85rem; }
.review-item .meta{ font-size:.76rem; color:var(--text-muted); }
.review-item p{ font-size:.88rem; margin:.4rem 0 0; }

/* ---- Daily Log (Teacher portal only) ---- */
.log-item{
  border:1px solid var(--line); border-radius:12px; padding:1rem;
  display:flex; gap:1rem; align-items:flex-start;
}
.log-item .log-date{
  flex-shrink:0; width:56px; text-align:center; background:var(--surface-2);
  border-radius:10px; padding:.4rem .3rem; font-family:'IBM Plex Mono', monospace;
}
.log-item .log-date .d{ font-size:.95rem; font-weight:700; line-height:1; color:var(--pa-red); }
.log-item .log-date .m{ font-size:.56rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }
.log-item .cat-badge{
  font-family:'IBM Plex Mono', monospace; font-size:.62rem; letter-spacing:.05em;
  padding:.2rem .5rem; border-radius:6px; background:var(--surface-2); color:var(--text-muted);
  text-transform:uppercase; display:inline-block; margin-bottom:.3rem;
}
.log-item p{ font-size:.88rem; margin:.2rem 0 0; color:var(--text-muted); }
.log-item .log-course{ font-size:.78rem; color:var(--pa-gold); font-weight:600; }

/* ---- Leave Requests (Teacher portal only) ---- */
.leave-item{ border:1px solid var(--line); border-radius:12px; padding:1rem; }
.leave-item .dates{ font-family:'IBM Plex Mono', monospace; font-size:.8rem; color:var(--text-muted); }
.leave-item p{ font-size:.85rem; margin:.4rem 0 0; color:var(--text-muted); }

/* Status badges (Leave Requests) — light/dark aware pairs */
.status-badge{
  font-family:'IBM Plex Mono', monospace; font-size:.62rem; letter-spacing:.05em;
  padding:.25rem .55rem; border-radius:6px; text-transform:uppercase; font-weight:600;
}
.status-pending{ background:#4a3a1a; color:#e8bd6a; }
[data-bs-theme="light"] .status-pending{ background:#fbe9c9; color:#8a5a10; }
.status-approved{ background:#1e5c3a; color:#7ee2a8; }
[data-bs-theme="light"] .status-approved{ background:#dff3e6; color:#1e7a45; }
.status-rejected{ background:#5c1e22; color:#f2a6ab; }
[data-bs-theme="light"] .status-rejected{ background:#fbe0e2; color:#a3242c; }

/* ---- Shared Files (Teacher portal only) ---- */
.file-row{
  display:flex; align-items:center; gap:1rem;
  padding:.9rem 1rem; border-bottom:1px solid var(--line);
}
.file-row:last-child{ border-bottom:none; }
.file-icon{
  width:42px; height:42px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:1.2rem;
  background:var(--surface-2); color:var(--pa-red);
}
.file-name{ font-weight:600; font-size:.9rem; }
.file-meta{ font-size:.76rem; color:var(--text-muted); }

/* Permission badges (Shared Files) — light/dark aware pairs */
.perm-badge{
  font-family:'IBM Plex Mono', monospace; font-size:.6rem; letter-spacing:.05em;
  padding:.2rem .5rem; border-radius:6px; text-transform:uppercase; font-weight:600; white-space:nowrap;
}
.perm-all{ background:#1e5c3a; color:#7ee2a8; }
[data-bs-theme="light"] .perm-all{ background:#dff3e6; color:#1e7a45; }
.perm-admin{ background:#4a3a1a; color:#e8bd6a; }
[data-bs-theme="light"] .perm-admin{ background:#fbe9c9; color:#8a5a10; }

/* ---- Printable Certificate (Student portal only) ---- */
.certificate-sheet{
  position:relative;
  max-width:820px;
  background:var(--pa-off-2);
  border:10px solid var(--pa-navy);
  outline:2px solid var(--pa-gold);
  outline-offset:-18px;
  border-radius:6px;
  padding:3rem 2rem;
  overflow:hidden;
  box-shadow:var(--shadow);
}
[data-bs-theme="dark"] .certificate-sheet{ background:#12192e; }
.cert-watermark{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0.2; pointer-events:none;
}
.cert-watermark img{ width:340px; height:340px; object-fit:contain; }
.cert-inner{ position:relative; z-index:1; text-align:center; }
.cert-seal{
  width:78px; height:78px; margin:0 auto 1rem;
  border-radius:50%; border:2px solid var(--pa-gold);
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 35% 30%, #fffdf8, #efe6cf 80%);
}
.cert-seal img{ width:88%; height:88%; object-fit:contain; }
.cert-eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--pa-red); margin-bottom:.6rem;
}
.cert-title{
  font-family:'Fraunces', serif; font-weight:700; font-size:2rem;
  color:var(--pa-navy); margin-bottom:1.2rem;
}
[data-bs-theme="dark"] .cert-title{ color:#f2efe6; }
.cert-line{ font-size:.95rem; color:var(--text-muted); margin:.3rem 0; }
.cert-line.small{ font-size:.82rem; }
.cert-name{
  font-family:'Fraunces', serif; font-style:italic; font-weight:600; font-size:2.1rem;
  color:var(--pa-red); margin:.4rem 0 .6rem;
}
.cert-course{
  font-family:'Fraunces', serif; font-weight:600; font-size:1.4rem;
  color:var(--pa-navy); margin:.4rem 0 .8rem;
}
[data-bs-theme="dark"] .cert-course{ color:#f2efe6; }
.cert-signatures{
  display:flex; justify-content:center; gap:4rem; margin:2.4rem 0 1.6rem; flex-wrap:wrap;
}
.cert-sig{ text-align:center; }
.cert-sig-line{ width:150px; border-bottom:1.5px solid var(--text-muted); margin-bottom:.5rem; }
.cert-sig-name{ font-family:'Fraunces', serif; font-weight:600; font-size:.95rem; }
.cert-sig-role{ font-size:.75rem; color:var(--text-muted); font-family:'IBM Plex Mono', monospace; letter-spacing:.05em; }
.cert-id{
  font-family:'IBM Plex Mono', monospace; font-size:.75rem; color:var(--text-muted);
  letter-spacing:.05em; margin:0;
}

@media print{
  .no-print, .portal-sidebar, .portal-topbar, .portal-footer, .sidebar-backdrop{ display:none !important; }
  .portal-main{ margin-left:0 !important; }
  .portal-content{ padding:0 !important; }
  body{ background:#fff !important; }
  .certificate-sheet{ box-shadow:none !important; max-width:100% !important; }
}

/* ---- Password strength meter (all 3 role Change Password pages) ---- */
.pw-strength-track{
  height:6px; border-radius:4px; background:var(--surface-2); overflow:hidden;
}
.pw-strength-fill{
  height:100%; width:0%; border-radius:4px;
  background:var(--pa-red); transition:width .2s ease, background .2s ease;
}