/* =====================================================
   UOG STATISTICS PORTAL — MODERN THEME OVERHAUL
   Inspired by Linear, Notion, Vercel design systems
   ===================================================== */

/* ── FONT ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── GLOBAL RESETS & BASE ── */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --tm-bg:        #f8f9fb;
  --tm-surface:   #ffffff;
  --tm-border:    #e8eaed;
  --tm-border-soft: rgba(0,0,0,.06);
  --tm-text:      #0f172a;
  --tm-muted:     #64748b;
  --tm-subtle:    #94a3b8;
  --tm-blue:      #2563eb;
  --tm-blue-light:#eff6ff;
  --tm-indigo:    #4f46e5;
  --tm-violet:    #7c3aed;
  --tm-amber:     #f59e0b;
  --tm-green:     #10b981;
  --tm-red:       #ef4444;
  --tm-radius:    12px;
  --tm-radius-lg: 16px;
  --tm-shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --tm-shadow-sm: 0 2px 8px rgba(0,0,0,.06);
  --tm-shadow-md: 0 4px 16px rgba(0,0,0,.08);
  --tm-shadow-lg: 0 8px 32px rgba(0,0,0,.10);
}

:root[data-theme="dark"] {
  --tm-bg:        #0c1220;
  --tm-surface:   #111827;
  --tm-border:    rgba(255,255,255,.08);
  --tm-border-soft: rgba(255,255,255,.05);
  --tm-text:      #f1f5f9;
  --tm-muted:     #94a3b8;
  --tm-subtle:    #64748b;
  --tm-blue-light:#1e3a5f;
  --tm-shadow-xs: 0 1px 2px rgba(0,0,0,.3);
  --tm-shadow-sm: 0 2px 8px rgba(0,0,0,.35);
  --tm-shadow-md: 0 4px 16px rgba(0,0,0,.4);
  --tm-shadow-lg: 0 8px 32px rgba(0,0,0,.5);
}

html { font-size: 14px; }
body { font-family: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif; background: var(--tm-bg) !important; }

/* ─── TOPBAR / NAVBAR ─── */
.edu-navbar {
  height: 54px !important;
  background: var(--tm-surface) !important;
  border-bottom: 1px solid var(--tm-border) !important;
  backdrop-filter: none !important;
  box-shadow: var(--tm-shadow-xs) !important;
  padding: 0 20px !important;
}

:root[data-theme="dark"] .edu-navbar {
  background: #0f1729 !important;
  border-bottom-color: rgba(255,255,255,.07) !important;
}

.nav-title {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
  background: linear-gradient(135deg, #1d4ed8, #4f46e5) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.nav-tab {
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 16px !important;
  width: auto !important;
  min-width: 64px !important;
  border-bottom: 2px solid transparent !important;
  transition: all .15s !important;
  color: var(--tm-muted) !important;
  border-radius: 0 !important;
}
.nav-tab:hover { color: var(--tm-text) !important; background: rgba(0,0,0,.03) !important; }
.nav-tab.active-tab {
  color: var(--tm-indigo) !important;
  border-bottom-color: var(--tm-indigo) !important;
  font-weight: 600 !important;
}

.nav-util-btn {
  width: 32px !important; height: 32px !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: 1px solid var(--tm-border) !important;
  color: var(--tm-muted) !important;
  font-size: 0.82rem !important;
  transition: all .15s !important;
}
.nav-util-btn:hover {
  background: var(--tm-blue-light) !important;
  color: var(--tm-blue) !important;
  border-color: rgba(37,99,235,.2) !important;
  transform: none !important;
  box-shadow: none !important;
}
.nav-util-btn:hover i { color: var(--tm-blue) !important; }

.profile-chip {
  padding: 4px 10px 4px 4px !important;
  border-radius: 24px !important;
  background: transparent !important;
  border: 1px solid var(--tm-border) !important;
  transition: all .15s !important;
}
.profile-chip:hover {
  background: var(--tm-bg) !important;
  border-color: rgba(79,70,229,.2) !important;
}

/* ─── MAIN BODY BACKGROUND ─── */
.edu-body { background: var(--tm-bg) !important; }
.edu-main { background: transparent !important; max-width: 680px !important; padding: 0.8rem !important; }

/* ─── LEFT SIDEBAR ─── */
.edu-sidebar-left {
  background: var(--tm-surface) !important;
  border-right: 1px solid var(--tm-border) !important;
  width: 210px !important;
}
:root[data-theme="dark"] .edu-sidebar-left { background: #0d1526 !important; }

.sidebar-section-header {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  color: var(--tm-subtle) !important;
  text-transform: uppercase !important;
  padding: 14px 12px 5px !important;
  opacity: 1 !important;
}

.sidebar-list li {
  padding: 8px 12px !important;
  border-radius: 8px !important;
  font-size: 0.83rem !important;
  font-weight: 500 !important;
  color: var(--tm-muted) !important;
  margin-bottom: 1px !important;
  transition: all .12s !important;
  gap: 9px !important;
}
.sidebar-list li:hover {
  background: rgba(0,0,0,.04) !important;
  color: var(--tm-text) !important;
}
:root[data-theme="dark"] .sidebar-list li:hover { background: rgba(255,255,255,.05) !important; }

.sidebar-list li.active-item {
  background: var(--tm-blue-light) !important;
  color: var(--tm-blue) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
:root[data-theme="dark"] .sidebar-list li.active-item {
  background: rgba(37,99,235,.12) !important;
  color: #60a5fa !important;
}

.sidebar-list li i {
  width: 26px !important; height: 26px !important;
  border-radius: 6px !important;
  font-size: 0.78rem !important;
  background: transparent !important;
  color: var(--tm-muted) !important;
}
.sidebar-list li:hover i { background: transparent !important; color: var(--tm-text) !important; }
.sidebar-list li.active-item i {
  background: rgba(37,99,235,.12) !important;
  color: var(--tm-blue) !important;
}
:root[data-theme="dark"] .sidebar-list li.active-item i {
  background: rgba(37,99,235,.15) !important;
  color: #60a5fa !important;
}

/* ─── RIGHT SIDEBAR ─── */
.edu-sidebar-right {
  background: var(--tm-surface) !important;
  border-left: 1px solid var(--tm-border) !important;
  width: 240px !important;
}
:root[data-theme="dark"] .edu-sidebar-right { background: #0d1526 !important; }

/* ─── CARDS ─── */
.edu-card {
  background: var(--tm-surface) !important;
  border: 1px solid var(--tm-border) !important;
  border-radius: var(--tm-radius) !important;
  box-shadow: var(--tm-shadow-xs) !important;
  transition: box-shadow .15s !important;
  margin-bottom: 8px !important;
}
.edu-card:hover { box-shadow: var(--tm-shadow-sm) !important; }

/* ─── POSTS ─── */
.post {
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--tm-border) !important;
}
.post:hover { background: rgba(0,0,0,.01) !important; }
:root[data-theme="dark"] .post:hover { background: rgba(255,255,255,.01) !important; }

.post-name {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: var(--tm-text) !important;
}
.post-meta { font-size: 0.72rem !important; color: var(--tm-muted) !important; }
.post-text { font-size: 0.88rem !important; line-height: 1.65 !important; color: var(--tm-text) !important; }

.post-badge {
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  border-radius: 20px !important;
  background: var(--tm-blue-light) !important;
  color: var(--tm-blue) !important;
  border: 1px solid rgba(37,99,235,.15) !important;
}

.interaction-btn {
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  color: var(--tm-muted) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  transition: all .12s !important;
}
.interaction-btn:hover {
  background: var(--tm-bg) !important;
  color: var(--tm-text) !important;
}
.interaction-btn.liked { color: var(--tm-amber) !important; }

/* ─── COMMENTS ─── */
.comments-section {
  background: var(--tm-bg) !important;
  padding: 12px 16px !important;
  border-top: 1px solid var(--tm-border) !important;
}
.comment-bubble {
  background: var(--tm-surface) !important;
  border: 1px solid var(--tm-border) !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
}
.comment-input-box {
  border: 1px solid var(--tm-border) !important;
  border-radius: 20px !important;
  background: var(--tm-surface) !important;
  font-size: 0.83rem !important;
  padding: 8px 14px !important;
  transition: border .15s !important;
}
.comment-input-box:focus { border-color: var(--tm-indigo) !important; box-shadow: 0 0 0 3px rgba(79,70,229,.1) !important; }
.comment-submit-btn {
  background: linear-gradient(135deg, var(--tm-indigo), var(--tm-violet)) !important;
  color: #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(79,70,229,.3) !important;
}

/* ─── NOTICE BOARD (Right Sidebar) ─── */
.notice-board {
  background: var(--tm-surface) !important;
  border: 1px solid var(--tm-border) !important;
  border-radius: var(--tm-radius) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
.notice-header {
  background: linear-gradient(135deg, rgba(37,99,235,.05), rgba(79,70,229,.04)) !important;
  border-bottom: 1px solid var(--tm-border) !important;
  padding: 10px 14px !important;
}
.notice-header h4 { color: var(--tm-blue) !important; font-size: 0.82rem !important; }
.notice-date {
  background: rgba(245,158,11,.1) !important;
  color: #b45309 !important;
  border-color: rgba(245,158,11,.2) !important;
}
:root[data-theme="dark"] .notice-date { color: var(--tm-amber) !important; }
.notice-list li p { font-size: 0.78rem !important; line-height: 1.5 !important; }

/* ─── DIRECTORY CARDS ─── */
.student-card {
  background: var(--tm-surface) !important;
  border: 1px solid var(--tm-border) !important;
  border-radius: var(--tm-radius) !important;
  box-shadow: none !important;
  transition: all .15s !important;
}
.student-card:hover {
  border-color: rgba(79,70,229,.2) !important;
  box-shadow: var(--tm-shadow-sm) !important;
  transform: translateY(-2px) !important;
}

/* ─── AVATAR ─── */
.avatar-small {
  background: linear-gradient(135deg, var(--tm-indigo), var(--tm-violet)) !important;
  box-shadow: 0 2px 6px rgba(79,70,229,.25) !important;
}
.avatar-large {
  background: linear-gradient(135deg, var(--tm-indigo), var(--tm-violet)) !important;
  box-shadow: 0 4px 14px rgba(79,70,229,.3) !important;
  border: 3px solid var(--tm-surface) !important;
}

/* ─── BUTTONS (general) ─── */
.btn-primary, button.btn-primary {
  background: linear-gradient(135deg, var(--tm-blue) 0%, var(--tm-indigo) 100%) !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0 !important;
  box-shadow: 0 2px 10px rgba(37,99,235,.3) !important;
  transition: all .15s !important;
}
.btn-primary:hover, button.btn-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(37,99,235,.4) !important;
}

/* ─── FORM CONTROLS ─── */
.form-control, .form-select, .premium-input, input[type="text"], input[type="email"], input[type="password"], textarea {
  border: 1.5px solid var(--tm-border) !important;
  border-radius: 10px !important;
  font-size: 0.88rem !important;
  background: var(--tm-surface) !important;
  color: var(--tm-text) !important;
  transition: border .15s, box-shadow .15s !important;
}
.form-control:focus, .form-select:focus, .premium-input:focus,
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus {
  border-color: var(--tm-indigo) !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,.1) !important;
  outline: none !important;
  background: var(--tm-surface) !important;
}

/* ─── AUTH PAGE ─── */
.auth-bg {
  background: linear-gradient(145deg, #f0f4ff 0%, #eef2ff 50%, #f5f3ff 100%) !important;
}
:root[data-theme="dark"] .auth-bg {
  background: linear-gradient(145deg, #06091a 0%, #0a0e1f 50%, #0d0a1c 100%) !important;
}

.auth-form-card {
  background: var(--tm-surface) !important;
  border: 1px solid var(--tm-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--tm-shadow-lg) !important;
  backdrop-filter: none !important;
}
:root[data-theme="dark"] .auth-form-card {
  background: #111827 !important;
  border-color: rgba(255,255,255,.08) !important;
}

.auth-brand-name {
  background: linear-gradient(135deg, #1d4ed8, #4f46e5) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ─── PROFILE SUMMARY (Left sidebar) ─── */
.profile-summary h3 { font-size: 0.84rem !important; font-weight: 700 !important; }
.profile-summary p { font-size: 0.71rem !important; color: var(--tm-muted) !important; }

/* ─── STATS CARD ─── */
.stats-card {
  background: var(--tm-surface) !important;
  border: 1px solid var(--tm-border) !important;
  border-radius: var(--tm-radius) !important;
  box-shadow: none !important;
}

/* ─── TOASTS ─── */
#toast-container .toast {
  background: #1e293b !important;
  color: #f1f5f9 !important;
  border: none !important;
  border-radius: 12px !important;
  font-size: 0.84rem !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.25) !important;
}

/* ─── MOBILE BOTTOM NAV ─── */
.fb-bottom-nav {
  background: var(--tm-surface) !important;
  border-top: 1px solid var(--tm-border) !important;
  box-shadow: 0 -2px 12px rgba(0,0,0,.06) !important;
}

/* ─── DROPDOWN MENUS ─── */
.notif-dropdown, .dropdown-menu {
  background: var(--tm-surface) !important;
  border: 1px solid var(--tm-border) !important;
  border-radius: var(--tm-radius-lg) !important;
  box-shadow: var(--tm-shadow-lg) !important;
  backdrop-filter: none !important;
}

/* ─── MODALS ─── */
.edu-modal-overlay .edu-modal,
.modal-content {
  background: var(--tm-surface) !important;
  border: 1px solid var(--tm-border) !important;
  border-radius: var(--tm-radius-lg) !important;
  box-shadow: var(--tm-shadow-lg) !important;
}

/* ─── EVENTS/JOBS/NOTICES ─── */
.event-card, .job-card {
  background: var(--tm-surface) !important;
  border: 1px solid var(--tm-border) !important;
  border-radius: var(--tm-radius) !important;
  box-shadow: none !important;
  transition: all .15s !important;
}
.event-card:hover, .job-card:hover {
  border-color: rgba(79,70,229,.2) !important;
  box-shadow: var(--tm-shadow-sm) !important;
  transform: translateY(-1px) !important;
}

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--tm-border); border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { background: var(--tm-muted); }

/* ─── MOBILE NAV ─── */
.mobile-drawer {
  background: var(--tm-surface) !important;
  border-top-left-radius: 20px !important;
  border-top-right-radius: 20px !important;
  border-top: 1px solid var(--tm-border) !important;
}

/* ─── SMOOTH TRANSITIONS ─── */
.edu-card, .sidebar-list li, .nav-tab, .interaction-btn, .post,
.student-card, .event-card, .job-card {
  transition-timing-function: cubic-bezier(.4,0,.2,1) !important;
}

/* ─── GLOBAL TEXT IMPROVEMENTS ─── */
h1, h2, h3, h4, h5, h6 { letter-spacing: -0.3px; }
p { line-height: 1.65; }

/* ─── VIEW HEADER ─── */
.view-header h2 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--tm-text) !important;
  letter-spacing: -0.3px !important;
}
.view-header p { font-size: 0.76rem !important; color: var(--tm-muted) !important; }

/* ─── POST INTERACTION BAR ─── */
.post-interaction-bar {
  padding: 6px 0 0 !important;
  border-top: 1px solid var(--tm-border) !important;
  margin-top: 8px !important;
}

/* ─── DIRECTORY FILTER BAR ─── */
.dir-tab {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 5px 12px !important;
  transition: all .12s !important;
}
.dir-tab.active {
  background: var(--tm-blue-light) !important;
  color: var(--tm-blue) !important;
}

/* ─── MOBILE APP VIEW ─── */
@media (max-width: 640px) {
  .edu-navbar { height: 50px !important; padding: 0 12px !important; }
  .edu-main { padding: 0.5rem !important; }
}