/* MedicsPro Training Platform — brand theme
   Palette & fonts extracted from medicspro.com */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&family=Open+Sans:wght@300;400;600;700;800&display=swap');

:root {
  --mp-blue:      #0187bd;
  --mp-blue-dark: #016a94;
  --mp-slate:     #333d48;
  --mp-navy:      #232d41;
  --mp-gold:      #f4d346;
  --mp-cream:     #f2f1e9;
  --mp-red:       #bb0000;
  --mp-gray:      #f4f4f4;
  --mp-border:    #e2e2e2;
  --mp-white:     #ffffff;
  --font-head: 'Roboto', system-ui, sans-serif;
  --font-body: 'Open Sans', system-ui, sans-serif;
  --radius: 6px;
  --shadow: 0 2px 10px rgba(35,45,65,.08);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--mp-slate);
  background: var(--mp-gray);
  line-height: 1.6;
}
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--mp-navy); font-weight: 700; }
a { color: var(--mp-blue); text-decoration: none; }
a:hover { color: var(--mp-blue-dark); }

/* Header */
.site-header {
  background: var(--mp-white);
  border-bottom: 3px solid var(--mp-blue);
  box-shadow: var(--shadow);
  position: sticky; top: 0; z-index: 50;
}
.site-header .inner {
  max-width: 1140px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; justify-content: space-between;
}
.site-header img.logo { height: 46px; }
.nav a { color: var(--mp-slate); font-weight: 600; margin-left: 22px; font-size: .95rem; }
.nav a:hover, .nav a.active { color: var(--mp-blue); }

/* Layout */
.container { max-width: 1140px; margin: 0 auto; padding: 28px 20px; }
.card {
  background: var(--mp-white); border: 1px solid var(--mp-border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; margin-bottom: 20px;
}

/* Buttons */
.btn {
  display: inline-block; font-family: var(--font-head); font-weight: 500;
  background: var(--mp-blue); color: #fff; border: none; cursor: pointer;
  padding: 11px 22px; border-radius: var(--radius); font-size: .95rem; transition: background .15s;
}
.btn:hover { background: var(--mp-blue-dark); color: #fff; }
.btn-gold { background: var(--mp-gold); color: var(--mp-navy); }
.btn-gold:hover { background: #e6c534; color: var(--mp-navy); }
.btn-outline { background: transparent; color: var(--mp-blue); border: 2px solid var(--mp-blue); }

/* Forms */
label { display: block; font-weight: 600; margin: 14px 0 6px; color: var(--mp-navy); }
input[type=text], input[type=email], input[type=password], select {
  width: 100%; padding: 11px 13px; border: 1px solid var(--mp-border);
  border-radius: var(--radius); font-family: var(--font-body); font-size: 1rem;
}
input:focus, select:focus { outline: none; border-color: var(--mp-blue); box-shadow: 0 0 0 3px rgba(1,135,189,.15); }

/* Course grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 20px; }
.course-card { border-top: 4px solid var(--mp-blue); }
.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: .78rem; font-weight: 700; }
.badge-pass { background: #e3f5ea; color: #1c8a4e; }
.badge-todo { background: var(--mp-cream); color: var(--mp-slate); }

/* PDF viewer */
.viewer-bar {
  background: var(--mp-navy); color: #fff; padding: 10px 16px;
  display: flex; align-items: center; gap: 16px;
}
.viewer-bar button { background: var(--mp-blue); color:#fff; border:none; padding:8px 14px; border-radius:var(--radius); cursor:pointer; }
.viewer-bar button:disabled { opacity:.4; cursor:default; }
.viewer-stage { background:#525659; display:flex; justify-content:center; padding:24px; min-height:70vh; }
#pdf-canvas { box-shadow: 0 4px 24px rgba(0,0,0,.4); background:#fff; max-width:100%; }

/* Footer */
.site-footer { background: var(--mp-navy); color: #c9d1dc; margin-top: 40px; padding: 30px 20px; text-align:center; }
.site-footer img { height: 40px; opacity:.9; margin-bottom:10px; }

.alert { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 16px; }
.alert-error { background: #fdeaea; color: var(--mp-red); border: 1px solid #f3c5c5; }
.alert-ok { background: #e3f5ea; color: #1c8a4e; border: 1px solid #b6e2c6; }