/* GLOBAL STYLES */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
      --navy:   #0f1c3f;
      --navy2:  #1a2a5e;
      --red:    #c0392b;
      --bg:     #f0f2f5;
      --white:  #ffffff;
      --text:   #1e1e2e;
      --muted:  #6b7280;
      --border: #e2e6ea;
      --radius: 10px;
    }

body {
      font-family: 'Segoe UI', system-ui, sans-serif;
      background: var(--bg);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

.page {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem;
    }

.card {
      background: var(--white);
      border-radius: var(--radius);
      box-shadow: 0 4px 24px rgba(15,28,63,.12);
      width: 100%;
      max-width: 420px;
      overflow: hidden;
    }

.card-header {
      background: var(--navy);
      padding: 2rem 2rem 1.6rem;
      text-align: center;
    }

.logo-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .75rem;
      margin-bottom: 1.2rem;
    }

.logo-wrap img {
      width: 56px;
      height: 56px;
      border-radius: 8px;
      object-fit: contain;
      background: #fff;
      padding: 4px;
    }

.brand-text h1 {
      color: #fff;
      font-size: 1.15rem;
      font-weight: 700;
      letter-spacing: .5px;
      line-height: 1.2;
    }

.brand-text span {
      color: rgba(255,255,255,.6);
      font-size: .75rem;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

.card-header p {
      color: rgba(255,255,255,.75);
      font-size: .9rem;
      margin-top: .5rem;
    }

.card-body { padding: 2rem; }

.form-group { margin-bottom: 1.25rem; }

label {
      display: block;
      font-size: .82rem;
      font-weight: 600;
      color: var(--navy2);
      margin-bottom: .4rem;
      letter-spacing: .3px;
    }

input {
      width: 100%;
      padding: .7rem 1rem;
      border: 1.5px solid var(--border);
      border-radius: 7px;
      font-size: .95rem;
      color: var(--text);
      background: var(--bg);
      transition: border-color .2s, box-shadow .2s;
      outline: none;
    }

input:focus {
      border-color: var(--navy2);
      box-shadow: 0 0 0 3px rgba(26,42,94,.1);
      background: #fff;
    }

.btn {
      width: 100%;
      padding: .8rem;
      background: var(--navy);
      color: #fff;
      border: none;
      border-radius: 7px;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      letter-spacing: .3px;
      transition: background .2s, transform .1s;
      margin-top: .5rem;
    }

.btn:hover  { background: var(--navy2); }

.btn:active { transform: scale(.98); }

.switch-link {
      text-align: center;
      margin-top: 1.25rem;
      font-size: .85rem;
      color: var(--muted);
    }

.switch-link a {
      color: var(--red);
      font-weight: 600;
      text-decoration: none;
    }

.switch-link a:hover { text-decoration: underline; }

.error-msg {
      display: none;
      background: #fff0f0;
      border: 1px solid #f5c6c6;
      color: var(--red);
      border-radius: 6px;
      padding: .65rem 1rem;
      font-size: .85rem;
      margin-bottom: 1rem;
    }

.footer-note {
      text-align: center;
      padding: 1rem;
      font-size: .78rem;
      color: var(--muted);
      border-top: 1px solid var(--border);
    }

.sidebar-brand {
      padding: 1.5rem 1.25rem 1rem;
      border-bottom: 1px solid rgba(255,255,255,.08);
      text-align: center;
    }

.sidebar-brand img {
      width: 52px; height: 52px;
      border-radius: 8px;
      background: #fff;
      padding: 3px;
      object-fit: contain;
      margin-bottom: .6rem;
    }

.sidebar-brand h2 {
      color: #fff;
      font-size: .88rem;
      font-weight: 700;
      line-height: 1.3;
    }

.sidebar-brand small {
      display: block;
      color: rgba(255,255,255,.45);
      font-size: .68rem;
      letter-spacing: .8px;
      text-transform: uppercase;
      margin-top: .2rem;
    }

.sidebar-user {
      padding: .85rem 1.25rem;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }

.sidebar-user p { color: rgba(255,255,255,.5); font-size: .68rem; text-transform: uppercase; letter-spacing: .8px; }

.sidebar-user strong { color: #fff; font-size: .9rem; display: block; margin-top: .2rem; }

nav { flex: 1; padding: 1rem 0; }

nav a {
      display: flex;
      align-items: center;
      gap: .65rem;
      padding: .7rem 1.4rem;
      color: rgba(255,255,255,.65);
      text-decoration: none;
      font-size: .88rem;
      transition: background .15s, color .15s;
      border-left: 3px solid transparent;
    }

nav a:hover { background: rgba(255,255,255,.06); color: #fff; }

nav a.active {
      background: rgba(255,255,255,.1);
      color: #fff;
      border-left-color: var(--red);
      font-weight: 600;
    }

nav a .icon { font-size: 1rem; width: 1.1rem; text-align: center; }

.sidebar-footer {
      padding: 1rem 1.25rem;
      border-top: 1px solid rgba(255,255,255,.08);
    }

.btn-logout {
      display: flex;
      align-items: center;
      gap: .5rem;
      color: rgba(255,255,255,.55);
      font-size: .82rem;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      transition: color .15s;
    }

.btn-logout:hover { color: var(--red); }

.topnav {
      background: var(--white);
      border-bottom: 1px solid var(--border);
      padding: .9rem 2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

.topnav h1 { font-size: 1rem; font-weight: 700; color: var(--navy2); }

.topnav span { font-size: .85rem; color: var(--muted); }

/* ── MODAL ── */
    .modal-overlay {
      display: none;
      position: fixed; inset: 0;
      background: rgba(10,20,50,.5);
      z-index: 500;
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }

.modal-overlay.open { display: flex; }

@keyframes slideUp {
      from { transform: translateY(20px); opacity: 0; }
      to   { transform: translateY(0);    opacity: 1; }
    }

.modal-header {
      background: var(--navy);
      padding: 1.4rem 1.6rem;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
    }

.modal-header-info h2 { color: #fff; font-size: 1.05rem; }

.modal-header-info p  { color: rgba(255,255,255,.6); font-size: .82rem; margin-top: .2rem; }

.modal-close {
      background: rgba(255,255,255,.15);
      border: none;
      color: #fff;
      width: 30px; height: 30px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 1rem;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: background .15s;
    }

.modal-close:hover { background: rgba(255,255,255,.3); }

.modal-body { padding: 1.6rem; }

.modal-footer {
      padding: 1.25rem 1.6rem;
      border-top: 1px solid var(--border);
      display: flex;
      gap: .75rem;
      justify-content: flex-end;
    }

.eval-instructions {
      background: #f0f4ff;
      border-left: 4px solid var(--navy2);
      border-radius: 0 6px 6px 0;
      padding: .75rem 1rem;
      font-size: .83rem;
      color: var(--navy2);
      margin-bottom: 1.5rem;
      line-height: 1.5;
    }

.question-block {
      margin-bottom: 1.5rem;
      padding-bottom: 1.5rem;
      border-bottom: 1px solid var(--border);
    }

.question-block:last-of-type { border-bottom: none; }

.question-block p {
      font-size: .9rem;
      font-weight: 600;
      color: var(--navy);
      margin-bottom: .75rem;
      line-height: 1.4;
    }

.question-num {
      display: inline-block;
      background: var(--navy);
      color: #fff;
      font-size: .7rem;
      font-weight: 700;
      padding: .15rem .45rem;
      border-radius: 4px;
      margin-right: .4rem;
    }

.likert input[type="radio"] { display: none; }

.likert label {
      flex: 1;
      min-width: 52px;
      text-align: center;
      padding: .55rem .4rem;
      border: 2px solid var(--border);
      border-radius: 7px;
      cursor: pointer;
      font-size: .82rem;
      font-weight: 600;
      color: var(--muted);
      transition: border-color .15s, background .15s, color .15s;
      line-height: 1.3;
    }

.likert label span { display: block; font-size: .65rem; font-weight: 400; margin-top: .2rem; }

.likert input[type="radio"]:checked + label {
      border-color: var(--navy2);
      background: var(--navy2);
      color: #fff;
    }

.btn-cancel {
      padding: .65rem 1.4rem;
      border: 1.5px solid var(--border);
      background: transparent;
      color: var(--muted);
      border-radius: 7px;
      font-size: .9rem;
      cursor: pointer;
      transition: border-color .15s;
    }

.btn-cancel:hover { border-color: var(--muted); }

.btn-submit {
      padding: .65rem 1.6rem;
      background: var(--navy);
      color: #fff;
      border: none;
      border-radius: 7px;
      font-size: .9rem;
      font-weight: 600;
      cursor: pointer;
      transition: background .15s;
    }

.btn-submit:hover { background: var(--navy2); }

/* Password visibility toggle */
.input-wrap { position: relative; }

.toggle-pass {
  position: absolute;
  right: .85rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.toggle-pass:hover {
  color: var(--navy2);
}

/* Remove default Edge/IE password eye */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none;
}

/* ── RESPONSIVE GLOBAL ── */
.menu-toggle {
  display: none; /* Hidden on desktop */
  background: transparent;
  border: none;
  color: var(--navy2);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 4px;
}

.menu-toggle:hover {
  background: rgba(0,0,0,.05);
}

@media (max-width: 768px) {
  .page {
    padding: 1rem;
  }
  
  .card-header {
    padding: 1.5rem 1.5rem 1rem;
  }

  .card-body {
    padding: 1.5rem;
  }
  
  .topnav {
    padding: 0.75rem 1rem;
  }
  
  .topnav h1 {
    font-size: 0.95rem;
  }
  
  .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .modal-body {
    padding: 1rem;
  }
  
  .modal-footer {
    padding: 1rem;
  }
  
  .likert label {
    padding: 0.4rem 0.2rem;
    font-size: 0.75rem;
  }
}