/* ==========================================================
   Ikatan Alumni MA Bahrul Ulum Kepohbaru — Global Styles
   ========================================================== */

:root {
  --color-primary: #0F4C81;
  --color-secondary: #1976D2;
  --color-accent: #FFC107;
  --color-success: #4CAF50;
  --color-danger: #F44336;
  --color-bg: #F5F7FA;
  --color-dark: #263238;
  --radius: 20px;
  --shadow-soft: 0 8px 30px rgba(15, 76, 129, 0.08);
  --shadow-neu: 8px 8px 16px #e1e5ea, -8px -8px 16px #ffffff;
}

* { box-sizing: border-box; }

body {
  font-family: 'Poppins', sans-serif;
  background: var(--color-bg);
  color: var(--color-dark);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; }

/* ---------- Glassmorphism ---------- */
.glass {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

/* ---------- Neumorphism ---------- */
.neu-card {
  background: var(--color-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-neu);
  border: none;
}

/* ---------- Buttons ---------- */
.btn {
  border-radius: 14px;
  font-weight: 500;
  padding: 0.6rem 1.4rem;
  transition: all 0.25s ease;
  min-height: 44px; /* touch friendly */
}
.btn-primary { background: var(--color-primary); border-color: var(--color-primary); }
.btn-primary:hover { background: #0c3d68; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15,76,129,.25); }
.btn-accent { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-dark); }

/* ---------- Navbar ---------- */
.navbar-alumni {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.navbar-alumni .nav-link { font-weight: 500; color: var(--color-dark); }
.navbar-alumni .nav-link.active,
.navbar-alumni .nav-link:hover { color: var(--color-primary); }

/* ---------- Hero ---------- */
.hero-section {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: #fff;
  border-radius: 0 0 40px 40px;
  padding: 6rem 1rem 8rem;
  position: relative;
  overflow: hidden;
}
.hero-section h1 {
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.5rem);
}
.hero-section p.lead { font-size: clamp(1rem, 2vw, 1.25rem); opacity: .95; }

/* ---------- Cards ---------- */
.stat-card { border-radius: var(--radius); padding: 1.5rem; transition: transform .2s; }
.stat-card:hover { transform: translateY(-4px); }
.stat-card .icon-wrap {
  width: 56px; height: 56px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: #fff;
}

/* ---------- Sidebar (admin) ---------- */
.sidebar {
  width: 260px;
  min-height: 100vh;
  background: #fff;
  box-shadow: var(--shadow-soft);
  position: fixed;
  top: 0; left: 0;
  transition: transform .3s ease;
  z-index: 1030;
}
.sidebar .nav-link { color: var(--color-dark); border-radius: 12px; margin: 2px 10px; padding: .7rem 1rem; }
.sidebar .nav-link.active, .sidebar .nav-link:hover { background: var(--color-primary); color: #fff; }
.main-content { margin-left: 260px; min-height: 100vh; transition: margin .3s ease; }

@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.show { transform: translateX(0); }
  .main-content { margin-left: 0; }
}

/* ---------- Tables ---------- */
.table-responsive { border-radius: var(--radius); overflow: hidden; }
table.dataTable { width: 100% !important; }

/* ---------- Forms ---------- */
.form-control, .form-select {
  border-radius: 12px;
  padding: .65rem .9rem;
  min-height: 44px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 .2rem rgba(25,118,210,.15);
}

/* ---------- Utilities ---------- */
.rounded-20 { border-radius: var(--radius) !important; }
.text-primary-custom { color: var(--color-primary); }
.bg-primary-custom { background: var(--color-primary); }
.section-title { font-weight: 700; color: var(--color-primary); }

/* No horizontal scroll anywhere */
html, body { max-width: 100%; overflow-x: hidden; }