/* ══════════════════════════════════════════════════════════════════
   main.css  |  PES University Research Portal — Global Design System
   Shared by every page. Individual page CSS files extend this.
   ══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&family=Roboto:wght@300;400;500;700;900&display=swap');

/* ── Design Tokens ── */
:root {
  --brand-navy:       #00377B;
  --brand-orange:     #FF6C00;
  --brand-blue-light: #61B9F0;
  --brand-pale-blue:  #F2F8FD;
  --brand-soft-blue:  #E4F3FD;
  --primary-gradient: linear-gradient(135deg,#00377B 0%,#0055B3 100%);
  --accent-gradient:  linear-gradient(135deg,#FF6C00 0%,#FF9240 100%);
  --subhead-gradient: linear-gradient(135deg,#61B9F0 0%,#00377B 100%);
  --bg-primary:    #ffffff;
  --bg-secondary:  #F0F0ED;
  --bg-tertiary:   #F2F8FD;
  --text-primary:  #0D1B2A;
  --text-secondary:#2E4A6B;
  --text-tertiary: #7B9BBF;
  --border-color:  #D3E4F2;
  --shadow-sm: 0 2px 8px  rgba(0,55,123,.06);
  --shadow-md: 0 8px 24px rgba(0,55,123,.10);
  --shadow-lg: 0 16px 48px rgba(0,55,123,.14);
  --shadow-xl: 0 24px 64px rgba(0,55,123,.18);
  --blur-amount: 20px;
  --font-title: "Merriweather", serif;
  --font-body:  "Roboto", sans-serif;
  --header-h:   72px;
  --radius-sm:  10px;
  --radius-md:  16px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --transition: all .3s ease;
}
[data-theme="dark"] {
  --bg-primary:    #0D1B2A;
  --bg-secondary:  #112236;
  --bg-tertiary:   #1A3554;
  --text-primary:  #F2F8FD;
  --text-secondary:#A8C8E8;
  --text-tertiary: #61B9F0;
  --border-color:  rgba(97,185,240,.15);
  --shadow-sm: 0 2px 8px  rgba(0,0,0,.35);
  --shadow-md: 0 8px 24px rgba(0,0,0,.45);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.55);
  --shadow-xl: 0 24px 64px rgba(0,0,0,.65);
}

/* ── Reset ── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body { background:var(--bg-secondary); font-family:var(--font-body); color:var(--text-primary); line-height:1.7; overflow-x:hidden; }
h1,h2,h3,h4,h5,h6 { font-family:var(--font-title); }
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }
ul { list-style:none; padding:0; margin:0; }

/* ══════════════════════════════════════
   ANIMATED BACKGROUND
══════════════════════════════════════ */
.bg-elements { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.blob { position:absolute; border-radius:50%; filter:blur(80px); opacity:.10; animation:blobFloat 20s ease-in-out infinite; }
.blob-1 { width:600px; height:600px; background:linear-gradient(135deg,#00377B,#0055B3); top:-200px; left:-200px; }
.blob-2 { width:500px; height:500px; background:linear-gradient(135deg,#FF6C00,#FF9240); bottom:-150px; right:-150px; animation-delay:7s; }
.blob-3 { width:400px; height:400px; background:linear-gradient(135deg,#61B9F0,#00377B); top:50%; left:50%; transform:translate(-50%,-50%); animation-delay:14s; }
@keyframes blobFloat { 0%,100%{transform:translate(0,0) scale(1);} 33%{transform:translate(30px,-50px) scale(1.1);} 66%{transform:translate(-20px,20px) scale(.9);} }
.grid-overlay { position:absolute; inset:0; background-image:linear-gradient(var(--border-color) 1px,transparent 1px),linear-gradient(90deg,var(--border-color) 1px,transparent 1px); background-size:50px 50px; opacity:.04; }

/* ══════════════════════════════════════
   HEADER
══════════════════════════════════════ */
.light-header { position:sticky; top:0; z-index:1000; background:rgba(255,255,255,.88); backdrop-filter:blur(var(--blur-amount)); -webkit-backdrop-filter:blur(var(--blur-amount)); border-bottom:1px solid var(--border-color); box-shadow:var(--shadow-sm); transition:box-shadow .3s; }
.light-header.scrolled { box-shadow:var(--shadow-md); }
[data-theme="dark"] .light-header { background:rgba(13,27,42,.88); }

.header-inner { max-width:1400px; margin:0 auto; padding:1rem 2rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; }

.logo-theme-wrapper { display:flex; align-items:center; gap:.75rem; flex-shrink:0; }
.portal-logo img { height:44px; transition:transform .3s; }
.portal-logo img:hover { transform:scale(1.05) rotate(-2deg); }

.theme-toggle-btn { background:var(--bg-primary); border:2px solid var(--border-color); border-radius:12px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:var(--transition); flex-shrink:0; }
.theme-toggle-btn:hover { background:var(--primary-gradient); border-color:transparent; }
.theme-toggle-btn:hover .theme-icon { color:#fff; transform:rotate(30deg); }
.theme-icon { font-size:1.1rem; color:var(--text-primary); transition:var(--transition); }

/* Nav links */
.top-menu { display:flex; gap:.4rem; flex:1; justify-content:center; }
.menu-link { position:relative; padding:.7rem 1rem; color:var(--text-secondary)!important; font-family:var(--font-body); font-weight:500; font-size:.85rem; border-radius:10px; transition:var(--transition); letter-spacing:.02em; }
.menu-link span { position:relative; z-index:2; }
.menu-link::before { content:''; position:absolute; inset:0; background:var(--primary-gradient); border-radius:10px; opacity:0; transition:opacity .3s; }
.menu-link:hover,.menu-link.active { color:#fff!important; }
.menu-link:hover::before,.menu-link.active::before { opacity:1; }

/* Auth */
.auth-buttons { display:flex; gap:1rem; align-items:center; flex-shrink:0; }
.profile-dropdown-container { position:relative; }
.profile-dropdown-trigger { display:flex; align-items:center; gap:.6rem; background:var(--bg-primary); border:2px solid var(--border-color); border-radius:50px; padding:.45rem .9rem .45rem .45rem; cursor:pointer; transition:var(--transition); }
.profile-dropdown-trigger:hover { background:var(--brand-soft-blue); }
.user-avatar { width:38px; height:38px; border-radius:50%; background:var(--primary-gradient); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; color:#fff; flex-shrink:0; }
.dropdown-arrow { color:var(--text-secondary); font-size:.85rem; transition:transform .3s; }
.profile-dropdown-trigger:hover .dropdown-arrow { transform:rotate(180deg); }
.profile-dropdown-menu { position:absolute; top:calc(100% + 10px); right:0; width:300px; background:var(--bg-primary); border:2px solid var(--border-color); border-radius:20px; box-shadow:var(--shadow-xl); opacity:0; visibility:hidden; transform:translateY(-10px); transition:var(--transition); z-index:1001; overflow:hidden; }
.profile-dropdown-menu.show { opacity:1; visibility:visible; transform:translateY(0); }
.dropdown-header { display:flex; align-items:center; gap:1rem; padding:1.25rem; background:var(--brand-soft-blue); border-bottom:1px solid var(--border-color); }
[data-theme="dark"] .dropdown-header { background:#112236; }
.user-avatar-large { width:50px; height:50px; border-radius:50%; background:var(--primary-gradient); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.25rem; color:#fff; flex-shrink:0; }
.user-info { flex:1; min-width:0; }
.user-name { font-family:var(--font-title); font-size:1rem; font-weight:700; color:var(--brand-navy); margin:0 0 .2rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-theme="dark"] .user-name { color:#F2F8FD; }
.user-email { font-size:.82rem; color:var(--text-secondary); margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dropdown-divider { height:1px; background:var(--border-color); }
.dropdown-items { padding:.6rem; }
.dropdown-item { display:flex; align-items:center; gap:.75rem; padding:.75rem .9rem; color:var(--text-primary)!important; border-radius:10px; transition:var(--transition); font-size:.9rem; }
.dropdown-item i { font-size:1.1rem; color:var(--brand-blue-light); width:22px; text-align:center; }
.dropdown-item:hover { background:var(--brand-pale-blue); color:var(--brand-navy)!important; }
.logout-item i { color:#ef4444!important; }
.logout-item:hover { background:rgba(239,68,68,.08)!important; }
.btn-auth { padding:.65rem 1.3rem; border-radius:12px; font-family:var(--font-body); font-size:.85rem; font-weight:700; transition:var(--transition); display:inline-flex; align-items:center; gap:.5rem; border:none; }
.btn-signin-header { background:var(--primary-gradient); color:#fff!important; }
.btn-signin-header:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,55,123,.3); }
.mobile-menu-toggle { display:none; background:var(--bg-primary); border:2px solid var(--border-color); border-radius:12px; color:var(--text-primary); font-size:1.4rem; padding:.4rem .65rem; cursor:pointer; }
.mobile-dropdown { display:none; background:var(--bg-primary); border-top:1px solid var(--border-color); padding:1.25rem; }
.mobile-dropdown.open { display:block; }
.mobile-menu-section { display:flex; flex-direction:column; gap:.75rem; }
.mobile-user-info { display:flex; align-items:center; gap:.75rem; padding:1rem 1.1rem; background:var(--brand-pale-blue); border-radius:12px; border:2px solid var(--border-color); }
.mobile-username { font-family:var(--font-title); font-weight:700; color:var(--brand-navy); font-size:.95rem; }
.user-email1 { font-size:.8rem; color:var(--brand-orange); margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mobile-menu-link { color:var(--text-primary)!important; font-weight:500; padding:1rem 1.1rem; border-radius:12px; background:var(--bg-secondary); border:2px solid var(--border-color); display:block; font-size:.9rem; }
.mobile-menu-link:hover { background:var(--primary-gradient); border-color:transparent; color:#fff!important; }
.mobile-signout,.mobile-signin { padding:1rem 1.1rem!important; border-radius:12px; font-weight:700; display:flex; align-items:center; gap:.6rem; transition:var(--transition); font-size:.9rem; }
.mobile-signout { color:#ef4444!important; background:rgba(239,68,68,.08)!important; border:2px solid rgba(239,68,68,.25)!important; }
.mobile-signin { background:var(--primary-gradient)!important; color:#fff!important; border:none!important; }

/* ══════════════════════════════════════
   REUSABLE HERO SHAPE ANIMATIONS
══════════════════════════════════════ */
.hero-shape { position:absolute; border-radius:50%; filter:blur(100px); opacity:.15; }
.shape-1 { width:500px; height:500px; background:linear-gradient(135deg,#0055B3,#61B9F0); top:-150px; right:-100px; animation:shapeFloat 15s ease-in-out infinite; }
.shape-2 { width:350px; height:350px; background:linear-gradient(135deg,#FF6C00,#FF9240); bottom:-100px; left:5%; animation:shapeFloat 20s ease-in-out infinite reverse; }
@keyframes shapeFloat { 0%,100%{transform:translate(0,0);} 50%{transform:translate(40px,-40px);} }

/* ══════════════════════════════════════
   REUSABLE SECTION / CARD COMPONENTS
══════════════════════════════════════ */
.page-card { background:var(--bg-primary); border:2px solid var(--border-color); border-radius:var(--radius-lg); padding:2rem; box-shadow:var(--shadow-sm); }
.stat-card { background:rgba(255,255,255,.10); border:2px solid rgba(255,255,255,.18); border-radius:18px; padding:1.5rem; display:flex; align-items:center; gap:1rem; backdrop-filter:blur(10px); transition:var(--transition); }
.stat-card:hover { background:rgba(255,255,255,.18); transform:translateY(-4px); }
.stat-icon { width:52px; height:52px; border-radius:14px; background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:#fff; flex-shrink:0; }
.stat-number { font-family:var(--font-title); font-size:1.75rem; font-weight:900; color:#fff; line-height:1; margin-bottom:.15rem; }
.stat-label { font-size:.72rem; color:rgba(255,255,255,.75); font-weight:500; text-transform:uppercase; letter-spacing:.06em; }
.pill { display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .85rem; border-radius:50px; font-size:.75rem; font-weight:700; border:1.5px solid; }
.pill-blue   { background:rgba(97,185,240,.15); border-color:rgba(97,185,240,.35); color:var(--brand-navy); }
.pill-orange { background:rgba(255,108,0,.15);  border-color:rgba(255,108,0,.35);  color:#c0440a; }
.pill-green  { background:rgba(46,204,113,.15); border-color:rgba(46,204,113,.35); color:#0d6e3f; }
.pill-gray   { background:rgba(107,114,128,.12);border-color:rgba(107,114,128,.3); color:#4b5563; }
[data-theme="dark"] .pill-blue   { color:var(--brand-blue-light); }
[data-theme="dark"] .pill-orange { color:#fbb880; }
[data-theme="dark"] .pill-green  { color:#6ee7b7; }
[data-theme="dark"] .pill-gray   { color:#d1d5db; }

.btn-primary-solid { display:inline-flex; align-items:center; gap:.5rem; padding:.75rem 1.5rem; background:var(--primary-gradient); color:#fff!important; border:none; border-radius:var(--radius-sm); font-family:var(--font-body); font-weight:700; font-size:.9rem; cursor:pointer; transition:var(--transition); }
.btn-primary-solid:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,55,123,.3); }
.btn-outline { display:inline-flex; align-items:center; gap:.5rem; padding:.75rem 1.5rem; background:transparent; color:var(--brand-navy)!important; border:2px solid var(--brand-navy); border-radius:var(--radius-sm); font-family:var(--font-body); font-weight:700; font-size:.9rem; cursor:pointer; transition:var(--transition); }
.btn-outline:hover { background:var(--primary-gradient); border-color:transparent; color:#fff!important; }

/* Section head helper */
.sd-section-head { display:flex; align-items:center; gap:.875rem; margin-bottom:1.5rem; }
.sd-section-icon { width:44px; height:44px; border-radius:13px; background:var(--primary-gradient); display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:#fff; flex-shrink:0; }
.sd-section-head h2 { font-family:var(--font-title); font-size:1.3rem; font-weight:700; color:var(--brand-navy); margin:0; }
[data-theme="dark"] .sd-section-head h2 { color:#F2F8FD; }

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
.site-footer { background:linear-gradient(135deg,#001f4d 0%,#00377B 100%); color:#e5eef8; padding:4.5rem 0 2rem; position:relative; z-index:1; }
.footer-content { max-width:1400px; margin:0 auto; padding:0 2rem; }
.footer-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2.5rem; margin-bottom:2.5rem; }
.footer-heading { font-family:var(--font-title); font-size:1.05rem; font-weight:700; margin-bottom:1.25rem; color:#fff; position:relative; padding-bottom:.65rem; }
.footer-heading::after { content:''; position:absolute; bottom:0; left:0; width:44px; height:4px; background:var(--accent-gradient); border-radius:2px; }
.footer-text { color:#c8ddef; line-height:1.85; margin-bottom:1.25rem; font-size:.9rem; }
.footer-links { list-style:none; padding:0; }
.footer-links li { margin-bottom:.75rem; }
.footer-links a { color:var(--brand-blue-light); transition:var(--transition); display:inline-flex; align-items:center; font-size:.9rem; }
.footer-links a:hover { color:#fff; padding-left:.5rem; }
.footer-contact { list-style:none; padding:0; }
.footer-contact li { display:flex; align-items:center; gap:.75rem; color:#c8ddef; font-size:.9rem; margin-bottom:.75rem; }
.footer-contact i { color:var(--brand-orange); font-size:1.05rem; flex-shrink:0; }
.footer-social { display:flex; gap:.75rem; margin-top:1.25rem; }
.social-link { width:44px; height:44px; background:rgba(97,185,240,.15); display:flex; align-items:center; justify-content:center; border-radius:11px; color:#fff; font-size:1.1rem; transition:var(--transition); }
.social-link:hover { background:var(--brand-orange); transform:translateY(-4px); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.10); padding-top:1.75rem; }
.footer-bottom-content { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.25rem; }
.copyright { color:#8aaecb; margin:0; font-size:.88rem; }
.footer-bottom-links { display:flex; align-items:center; gap:.875rem; }
.footer-bottom-links a { color:var(--brand-blue-light); transition:color .3s; font-size:.88rem; }
.footer-bottom-links a:hover { color:#fff; }
.separator { color:rgba(255,255,255,.25); }

/* ══════════════════════════════════════
   SCROLL-ANIMATE HELPER
══════════════════════════════════════ */
[data-animate] { opacity:0; transform:translateY(24px); }
[data-animate].visible { animation:fadeInUp .7s ease-out forwards; }
@keyframes fadeInUp { to { opacity:1; transform:translateY(0); } }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width:1100px) { .footer-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:768px) {
  .top-menu,.auth-buttons { display:none; }
  .mobile-menu-toggle { display:flex; }
  .header-inner { padding:.8rem 1.25rem; }
  .footer-content { padding:0 1.25rem; }
  .portal-logo img { height:40px; }
  .footer-grid { grid-template-columns:1fr; gap:2rem; }
  .footer-bottom-content { flex-direction:column; text-align:center; }
  .footer-bottom-links { justify-content:center; }
}
@media (max-width:480px) {
  .header-inner { padding:.75rem 1rem; }
  .footer-content { padding:0 1rem; }
}