/* General Reset */
* {
  margin: 0; padding: 0; box-sizing: border-box;
}
body {
  font-family: 'Roboto', sans-serif;
  background: url('background.jpg') no-repeat center center/cover;
  color: #222;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container {
  width: 100%;
  max-width: 1200px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
  border-radius: 20px;
  overflow: hidden;
  padding: 20px;
}

/* Header */
.top-section {
  text-align: center;
  padding: 10px;
}
.logo {
  width: 80px;
}
.top-section h1 {
  font-size: 1.8rem;
  color: #0056b3;
}

/* Loading gif */
.loading {
  text-align: center;
  margin: 15px 0;
}
.loading img {
  width: 100px;
}

/* Main Content Grid */
.main-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
@media(max-width: 768px) {
  .main-content {
    grid-template-columns: 1fr;
  }
}

/* Login Section */
.login-section {
  padding: 20px;
}
.login-toggle {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}
.login-toggle button {
  padding: 10px 20px;
  border: none;
  border-radius: 25px;
  background: #e0e0e0;
  cursor: pointer;
  transition: 0.3s;
  max-width: 200px;
}
.login-toggle button.active {
  background: #0056b3;
  color: white;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.input-group {
  position: relative;
  margin: 15px 0;
}
.input-group .icon {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
}
.input-group input {
  width: 100%;
  padding: 12px 12px 12px 40px;
  border-radius: 8px;
  border: 1px solid #ccc;
  outline: none;
  transition: 0.3s;
}
.input-group input:focus {
  border-color: #0056b3;
  box-shadow: 0 0 8px rgba(0,86,179,0.4);
}
.login-btn {
  width: 100%;
  padding: 12px;
  background: #0056b3;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  transition: 0.3s;
}
.login-btn:hover {
  background: #003f7f;
}
.links {
  text-align: center;
  margin-top: 10px;
}
.links a {
  color: #0056b3;
  text-decoration: none;
}
.links p {
  font-size: 0.9rem;
  margin-top: 5px;
  color: #333;
}

/* Info Section */
.info-section {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 15px;
  text-align: center;
}
.info-section h3 {
  margin-bottom: 15px;
  color: #0056b3;
}
.payment-logos {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin: 15px 0;
}
.payment-logos img {
  width: 120px;
}
.note {
  color: red;
  font-weight: bold;
}
.downloads {
  margin-top: 15px;
  font-size: 0.95rem;
}
.downloads a {
  color: #0056b3;
  text-decoration: none;
}
.downloads a:hover {
  text-decoration: underline;
}

/* Footer */
footer {
  margin-top: 20px;
  text-align: center;
  padding: 10px;
  background: #0056b3;
  color: white;
  border-radius: 10px;
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .container {
    width: 95%;        /* take almost full width */
    padding: 10px;     /* reduce padding */
    border-radius: 0;  /* optional: remove roundness to fill screen */
  }

  .login-section {
    width: 100%;       /* fill available width */
    margin: 0 auto;    /* stay centered */
    padding: 15px;
  }
}
.login-section form,
.login-section input,
.login-section button {
  width: 100%;
}
body.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
/* Success / Error messages */
.success-msg, .error-msg {
  text-align: center;
  padding: 10px;
  border-radius: 8px;
  margin: 10px auto;
  width: 90%;
  max-width: 500px;
}
.success-msg {
  background: #d4edda;
  color: #155724;
}
.error-msg {
  background: #f8d7da;
  color: #721c24;
}
/* PayNow Section */
.paynow-section {
  margin: 20px 0;
  padding: 15px;
  background: #eef6ff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.paynow-section h3 {
  margin-bottom: 10px;
  color: #0056b3;
}
.paynow-link {
  display: inline-block;
  padding: 10px 20px;
  background: #0056b3;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  transition: 0.3s;
}
.paynow-link:hover {
  background: #003f7f;
}
/* Student Card */
.student-card {
  margin-top: 20px;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  text-align: left;
}
.student-card h3 {
  margin-bottom: 10px;
  color: #0056b3;
}
.student-card p {
  margin: 6px 0;
  font-size: 1rem;
}

.next-step {
  margin-top: 15px;
  text-align: center;
}
.next-step a {
  color: #0056b3;
  font-weight: bold;
  text-decoration: none;
}
.next-step a:hover {
  text-decoration: underline;
}
/* Rules / Info Panel */
.rules-list {
  list-style: none;
  padding: 0;
  margin: 15px 0;
  text-align: left;
}
.rules-list li {
  margin: 10px 0;
  padding-left: 25px;
  position: relative;
  font-size: 0.95rem;
  line-height: 1.4;
}
.rules-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: #0056b3;
  font-weight: bold;
}
.info-section {
  background: #eef6ff;
  padding: 20px;
  border-radius: 15px;
  text-align: left;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.info-section h3 {
  margin-bottom: 10px;
  color: #003f7f;
}

/* =========================
   MZTC DASHBOARD THEME
   ========================= */
:root{
  --blue:#0056b3;
  --blue-600:#004a9a;
  --purple:#6c2bd9;
  --bg:#f4f6fb;
  --card:#ffffff;
  --text:#1e293b;
  --muted:#64748b;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,'Helvetica Neue',Arial;
  color:var(--text);
  background:var(--bg);
}

/* -------------------------
   TOP BAR
   ------------------------- */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1rem;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(150%) blur(6px);
  border-bottom:1px solid #e5e7eb;
}

.logo-title{display:flex; align-items:center; gap:.6rem}
.small-logo{width:42px; height:42px; object-fit:contain}
.portal-title{
  font-weight:800; letter-spacing:.04em;
  font-size:1.05rem; color:var(--blue);
}

.user-info{display:flex; align-items:center; gap:.75rem}
.user-info span{color:var(--muted); font-weight:600}
.logout-btn{
  border:0; padding:.55rem .9rem; border-radius:999px; cursor:pointer;
  background:var(--blue); color:#fff; font-weight:700; box-shadow:var(--shadow);
}
.logout-btn:hover{background:var(--blue-600)}

.mobile-menu-trigger{
  display:none; font-size:1.25rem; color:var(--muted); cursor:pointer;
}

/* -------------------------
   LAYOUT
   ------------------------- */
.sidebar{
  position:fixed; inset:64px auto 0 0; /* sits under topbar */
  width:280px; background:linear-gradient(180deg,#fff 0%, #eaf2ff 120px, #dfeaff 121px);
  box-shadow:var(--shadow); border-right:1px solid #e5e7eb;
  transform:translateX(0); transition:transform .35s cubic-bezier(.2,.8,.2,1);
  z-index:45; border-top-right-radius:22px;
}
.sidebar-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.1rem .9rem 1.1rem;
}
.sidebar-header h2{
  margin:0; font-size:1.4rem; font-weight:900; letter-spacing:.06em; color:var(--blue);
}
.sidebar-close{
  display:none; border:0; background:transparent; font-size:1.6rem; cursor:pointer; color:var(--muted);
}

.nav-links{
  list-style:none; margin:0; padding:1rem .6rem 1.2rem .6rem;
}
.nav-links li{
  display:flex; align-items:center; gap:.75rem;
  padding:.75rem .9rem; margin:.25rem 0; border-radius:12px;
  color:#0f172a; font-weight:600; cursor:pointer;
  position:relative; transition:background .2s, transform .06s;
}
.nav-links li i{width:20px; text-align:center; color:var(--blue)}
.nav-links li:hover{background:#eef6ff}
.nav-links li:active{transform:translateY(1px)}
.nav-links li.active{
  background:var(--blue); color:#fff;
}
.nav-links li.active i{color:#fff}
.nav-links li.active::after{
  content:"•"; position:absolute; right:12px; color:#fff; font-size:1.2rem; line-height:1;
}

/* DASHBOARD CONTENT RIGHT AREA */
.dashboard-content{
  margin-left:280px; padding:1.2rem; transition:transform .35s cubic-bezier(.2,.8,.2,1), margin-left .35s;
  display:grid; gap:1.2rem;
  grid-template-columns:repeat(3, minmax(0,1fr));
}
.footer{
  margin-left:280px; padding:1rem 1.2rem 2rem; color:var(--muted); font-size:.9rem;
}

/* TILES */
.tile{
  background:var(--card);
  border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden; min-height:260px; display:flex; flex-direction:column;
}
.tile-header{
  padding:.85rem 1rem; color:#fff; font-weight:800; letter-spacing:.03em;
  display:flex; align-items:center; justify-content:space-between;
}
.tile-header.blue{background:linear-gradient(135deg, var(--blue), #3b82f6)}
.tile-header.alt{background:linear-gradient(135deg, var(--purple), #a855f7)}
.tile-body{padding:1rem; flex:1; display:flex; flex-direction:column; gap:.6rem}
.tile-img{width:100%; height:120px; object-fit:cover; border-radius:12px}

.btn-primary,.btn-secondary{
  border:0; padding:.6rem .9rem; border-radius:12px; cursor:pointer; font-weight:800;
  width:max-content; box-shadow:var(--shadow);
}
.btn-primary{background:var(--blue); color:#fff}
.btn-primary:hover{background:var(--blue-600)}
.btn-secondary{background:#eef2ff; color:#1e3a8a}
.btn-secondary:hover{background:#e0e7ff}

.badge{
  display:inline-block; padding:.2rem .55rem; border-radius:999px; font-size:.75rem; font-weight:800;
  background:#e5f4ff; color:var(--blue);
}
.badge.active{background:#dcfce7; color:#166534}
.badge.inactive{background:#fee2e2; color:#991b1b}

.text-green{color:#16a34a}

/* ANNOUNCEMENTS */
.announcement{
  padding:.7rem .8rem; border:1px dashed #e5e7eb; border-radius:12px; margin-bottom:.6rem;
  background:#fafafa;
}
.announcement .date{font-size:.82rem; color:var(--muted); margin-right:.5rem}

/* FEEDBACK */
.tile textarea{
  width:100%; min-height:110px; resize:vertical; padding:.8rem; border-radius:12px; border:1px solid #e5e7eb;
  font-family:inherit;
}
.tile textarea:focus{outline:none; border-color:#b8d3ff; box-shadow:0 0 0 4px rgba(59,130,246,.15)}

/* USER DROPDOWN (3 dots on small screens) */
.user-dropdown{
  position:absolute; right:12px; top:60px; background:#fff; border:1px solid #e5e7eb; border-radius:14px;
  box-shadow:var(--shadow); padding:.6rem; display:none; min-width:220px;
}
.user-dropdown.open{display:block}
.user-dropdown .row{padding:.4rem .5rem; color:var(--muted)}
.user-dropdown .row strong{color:var(--text)}
.user-dropdown .logout{margin-top:.4rem}

/* -------------------------
   SIDEBAR OVERLAY (GLASS)
   ------------------------- */
.sidebar-overlay{
  position:fixed; inset:64px 0 0 0; z-index:40; pointer-events:none;
  opacity:0; transition:opacity .25s ease .08s;
}
.sidebar-overlay.visible{
  pointer-events:auto; opacity:1;
  backdrop-filter: blur(8px) saturate(140%);
  background:radial-gradient(1200px 700px at 85% 35%, rgba(99,102,241,.18), transparent 60%),
             radial-gradient(900px 600px at 70% 70%, rgba(59,130,246,.14), transparent 65%);
}
.overlay-content{
  position:absolute; right:6vw; top:20vh; text-align:center; color:#0f172a; opacity:.9;
}
.overlay-content .fa-graduation-cap{display:block; margin:0 auto .6rem}
.overlay-logo{width:120px; opacity:.9; filter:drop-shadow(0 10px 20px rgba(0,0,0,.2))}

/* -------------------------
   RESPONSIVE
   ------------------------- */
@media (max-width: 1200px){
  .dashboard-content{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width: 900px){
  .dashboard-content{grid-template-columns:1fr}
}

/* Mobile behavior: sidebar hidden by default, hamburger appears */
@media (max-width: 1024px){
  .mobile-menu-trigger{display:inline-block}
  .user-info span{display:none} /* hide long name/reg on small screens */
  .sidebar{
    transform:translateX(-100%); /* hidden */
    border-top-right-radius:22px;
  }
  body.sidebar-open .sidebar{transform:translateX(0)}
  body.sidebar-open .topbar,
  body.sidebar-open .dashboard-content,
  body.sidebar-open .footer{
    transform:translateX(280px);
  }
  .topbar, .dashboard-content, .footer{
    transition:transform .35s cubic-bezier(.2,.8,.2,1);
  }
  .sidebar-close{display:inline-block}
}

/* Utility */
hr{border:0; border-top:1px solid #e5e7eb}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}
.error-banner {
  background: #ff4d4d;
  color: #fff;
  padding: 12px 15px;
  margin-bottom: 15px;
  border-radius: 6px;
  text-align: center;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}