/* MMP Training Portal — Frontend & Admin Styles */

:root {
  --mmp-blue:   #1a2d5a;
  --mmp-red:    #c0392b;
  --mmp-light:  #f4f6fb;
  --mmp-border: #dde3ef;
  --mmp-green:  #27ae60;
  --mmp-orange: #e67e22;
}

/* ── WRAP ── */
.mmp-wrap {
  max-width: 960px;
  margin: 32px auto;
  padding: 0 16px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  color: #333;
}

/* ── HEADER ── */
.mmp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--mmp-blue);
  border-radius: 10px;
  padding: 18px 24px;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 12px;
}
.mmp-header-left { display:flex; align-items:center; gap:16px; }
.mmp-header-left h1 { color:#fff; font-size:22px; margin:0; }
.mmp-header-left p  { color:#aac; font-size:14px; margin:2px 0 0; }
.mmp-header-right   { display:flex; gap:10px; flex-wrap:wrap; }
.mmp-header-logo    { height: 52px; }
.mmp-header-slim    { padding:12px 20px; margin-bottom:20px; justify-content:space-between; align-items:center; }
.mmp-header-logo-sm { height:36px; }

/* ── STATS ── */
.mmp-stats-row { display:flex; gap:16px; margin-bottom:28px; flex-wrap:wrap; }
.mmp-stat-card {
  flex:1; min-width:120px;
  background:#fff;
  border:1px solid var(--mmp-border);
  border-radius:10px;
  padding:20px;
  text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.mmp-stat-num   { display:block; font-size:36px; font-weight:700; color:var(--mmp-blue); }
.mmp-stat-label { display:block; font-size:13px; color:#888; margin-top:4px; }
.mmp-stat-green .mmp-stat-num { color:var(--mmp-green); }
.mmp-stat-red   .mmp-stat-num { color:var(--mmp-red); }

/* ── SECTION TITLE ── */
.mmp-section-title { font-size:18px; color:var(--mmp-blue); margin:0 0 16px; font-weight:600; }

/* ── COURSE CARDS ── */
.mmp-course-list { display:flex; flex-direction:column; gap:14px; }
.mmp-course-card {
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#fff;
  border:1px solid var(--mmp-border);
  border-radius:10px;
  padding:18px 22px;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  flex-wrap:wrap;
  gap:14px;
  transition:box-shadow .2s;
}
.mmp-course-card:hover { box-shadow:0 4px 16px rgba(0,0,0,.1); }
.mmp-past-due { border-left:4px solid var(--mmp-red) !important; }
.mmp-course-info h3 { margin:0 0 4px; font-size:16px; color:var(--mmp-blue); }
.mmp-course-info p  { margin:0 0 6px; font-size:13px; color:#666; }
.mmp-course-action  { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* ── BADGES ── */
.mmp-badge {
  display:inline-block;
  font-size:12px;
  font-weight:600;
  padding:4px 12px;
  border-radius:20px;
  white-space:nowrap;
}
.mmp-badge-green  { background:#e6f9ef; color:#1a7a46; }
.mmp-badge-red    { background:#fdecea; color:#c0392b; }
.mmp-badge-orange { background:#fef3e2; color:#b7650a; }

/* ── BUTTONS ── */
.mmp-btn {
  display:inline-block;
  padding:9px 20px;
  border-radius:6px;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  border:none;
  background:var(--mmp-blue);
  color:#fff;
  transition:background .2s, opacity .2s;
  font-family:inherit;
}
.mmp-btn:hover       { background:#142248; color:#fff; text-decoration:none; }
.mmp-btn-primary     { background:var(--mmp-red); }
.mmp-btn-primary:hover { background:#a93226; }
.mmp-btn-outline     { background:transparent; border:2px solid #fff; color:#fff; padding:7px 18px; }
.mmp-btn-outline:hover { background:rgba(255,255,255,.15); color:#fff; }
.mmp-btn-danger      { background:#c0392b; }
.mmp-btn-danger:hover { background:#96281b; }
.mmp-btn-full        { display:block; width:100%; text-align:center; padding:12px; font-size:16px; }
.mmp-btn-sm          { padding:6px 14px; font-size:13px; }
.mmp-btn-lg          { padding:14px 32px; font-size:16px; }

/* ── LOGIN ── */
.mmp-login-wrap {
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:60vh;
}
.mmp-login-box {
  background:#fff;
  border:1px solid var(--mmp-border);
  border-radius:14px;
  padding:40px 44px;
  width:100%;
  max-width:420px;
  box-shadow:0 8px 32px rgba(0,0,0,.1);
  text-align:center;
}
.mmp-login-logo img { height:80px; margin-bottom:16px; }
.mmp-login-box h2 { font-size:20px; color:var(--mmp-blue); margin:0 0 24px; }

/* ── FORMS ── */
.mmp-form { text-align:left; }
.mmp-field { margin-bottom:16px; }
.mmp-field label { display:block; font-size:13px; font-weight:600; color:#555; margin-bottom:6px; }
.mmp-field input {
  width:100%; padding:10px 14px;
  border:1px solid var(--mmp-border);
  border-radius:6px;
  font-size:15px;
  font-family:inherit;
  outline:none;
  transition:border .2s;
}
.mmp-field input:focus { border-color:var(--mmp-blue); }

/* ── ALERTS ── */
.mmp-alert {
  padding:14px 20px;
  border-radius:8px;
  margin:20px 0;
  font-size:14px;
  line-height:1.6;
}
.mmp-alert-success { background:#e6f9ef; border:1px solid #a3d9b8; color:#1a5e35; }
.mmp-alert-error   { background:#fdecea; border:1px solid #f5b8b4; color:#7b1a18; }
.mmp-alert-info    { background:#e8f0fd; border:1px solid #b3caf7; color:#1a3c7a; }

/* ── COURSE CONTENT ── */
.mmp-course-content {
  background:#fff;
  border:1px solid var(--mmp-border);
  border-radius:10px;
  padding:28px 32px;
  margin-bottom:24px;
}
.mmp-course-content h1 { color:var(--mmp-blue); font-size:26px; margin:0 0 8px; }
.mmp-course-desc { color:#666; font-size:15px; margin-bottom:20px; }
.mmp-course-body { font-size:15px; line-height:1.8; color:#333; }
.mmp-course-body p { margin-bottom:12px; }

/* ── QUIZ ── */
.mmp-quiz-section {
  background:#fff;
  border:1px solid var(--mmp-border);
  border-radius:10px;
  padding:28px 32px;
}
.mmp-quiz-section h2 { color:var(--mmp-blue); margin:0 0 8px; }
.mmp-quiz-section > p { color:#555; margin-bottom:24px; }
.mmp-question {
  background:var(--mmp-light);
  border-radius:8px;
  padding:18px 20px;
  margin-bottom:18px;
}
.mmp-q-text { margin:0 0 12px; font-size:15px; color:#222; }
.mmp-option {
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:6px;
  margin-bottom:8px;
  cursor:pointer;
  background:#fff;
  border:1px solid var(--mmp-border);
  transition:background .15s;
  font-size:14px;
}
.mmp-option:hover { background:#eef2fc; }
.mmp-option input { margin:0; cursor:pointer; }

/* ── TABLE ── */
.mmp-table {
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.mmp-table th {
  background:var(--mmp-blue);
  color:#fff;
  padding:12px 16px;
  text-align:left;
  font-size:13px;
  font-weight:600;
}
.mmp-table td { padding:12px 16px; border-bottom:1px solid var(--mmp-border); font-size:14px; }
.mmp-table tr:last-child td { border-bottom:none; }
.mmp-table tr:hover td { background:var(--mmp-light); }

/* ── EMPTY ── */
.mmp-empty { text-align:center; padding:40px; color:#888; font-size:15px; background:#fff; border-radius:10px; border:1px dashed var(--mmp-border); }

/* ── TEXT COLORS ── */
.mmp-text-red   { color:var(--mmp-red) !important; }
.mmp-text-green { color:var(--mmp-green) !important; }

/* ── ADMIN ── */
.mmp-admin-wrap { max-width:1200px; }
.mmp-admin-wrap h1 { color:var(--mmp-blue); margin-bottom:20px; }
.mmp-admin-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.mmp-admin-card {
  background:#fff;
  border:1px solid var(--mmp-border);
  border-radius:10px;
  padding:24px;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.mmp-admin-card h2 { color:var(--mmp-blue); font-size:18px; margin-bottom:18px; border-bottom:2px solid var(--mmp-light); padding-bottom:10px; }
.mmp-q-block { background:var(--mmp-light); border-radius:8px; padding:16px; margin-bottom:16px; }
.mmp-opts-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:10px 0; }
.mmp-opts-grid label { display:flex; align-items:center; gap:6px; font-size:13px; }
.mmp-opts-grid input { flex:1; padding:6px 10px; border:1px solid var(--mmp-border); border-radius:4px; }

@media (max-width: 700px) {
  .mmp-course-card  { flex-direction:column; align-items:flex-start; }
  .mmp-stats-row    { flex-direction:column; }
  .mmp-admin-grid   { grid-template-columns:1fr; }
  .mmp-opts-grid    { grid-template-columns:1fr; }
  .mmp-header       { flex-direction:column; align-items:flex-start; }
  .mmp-login-box    { padding:28px 20px; }
}