/* ═══════════════════════════════════════════════
   Login Page — DOM Staff Transfer Management
   ═══════════════════════════════════════════════ */

/* ── Page ──────────────────────────────────────── */
body {
  background: linear-gradient(135deg,#03035c 0%,#0a0a6e 40%,#6b0000 100%) !important;
  min-height: 100vh;
}

/* ── Instructions Nav Menu ──────────────────────── */
.instr-menu {
  display: flex;
  gap: 0;
  background: #1a2f7a;
  border-bottom: 3px solid #b8860b;
  border-top: 2px solid #b8860b;
  flex-wrap: wrap;
  padding: 0 12px;
}
.instr-menu-item {
  padding: 14px 20px;
  font-size: .83rem;
  font-weight: 600;
  color: rgba(255,255,255,.75);
  text-decoration: none;
  letter-spacing: .03em;
  transition: background .15s, color .15s;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 3px solid transparent;
  margin-bottom: -3px;
}
.instr-menu-item i { font-size: .9rem; }
.instr-menu-item:hover { color: #fff; text-decoration: none; background: rgba(255,255,255,.1); }
.instr-menu-item.active {
  color: #fff;
  border-bottom: 3px solid #60a5fa;
  background: rgba(255,255,255,.12);
}
.instr-menu-item:last-child {
  margin-left: auto;
  padding: 10px 22px;
  margin-top: 6px;
  margin-bottom: 6px;
  border-radius: 7px;
  background: #2855c8;
  color: #fff;
  border-bottom: 3px solid transparent;
  font-weight: 700;
  letter-spacing: .05em;
}
.instr-menu-item:last-child:hover { background: #1a3fa0; color: #fff; }
.instr-menu-item:last-child.active { background: #1a3fa0; color: #fff; }

.instr-menu-item--green {
  background: linear-gradient(135deg, #059669 0%, #10b981 50%, #34d399 100%) !important;
  border: 1px solid #059669;
  box-shadow: 0 2px 12px rgba(16,185,129,.55), inset 0 1px 0 rgba(255,255,255,.25);
  color: #fff !important;
  border-radius: 7px;
  margin-top: 6px;
  margin-bottom: 6px;
  border-bottom: 3px solid transparent !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.2);
  letter-spacing: .04em;
}
.instr-menu-item--green:hover {
  background: linear-gradient(135deg, #047857 0%, #059669 50%, #10b981 100%) !important;
  box-shadow: 0 4px 18px rgba(16,185,129,.7), inset 0 1px 0 rgba(255,255,255,.3) !important;
  color: #fff !important;
  transform: translateY(-1px);
}
.instr-menu-item--green.active {
  background: linear-gradient(135deg, #047857 0%, #059669 100%) !important;
  color: #fff !important;
}

/* ── Instruction Pages ──────────────────────────── */
.instr-page-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: calc(100vh - 120px);
  padding: 50px 24px 60px;
}
.instr-page-card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px;
  overflow: hidden;
  max-width: 760px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
}
.instr-page-header {
  padding: 18px 28px;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .05em;
  display: flex;
  align-items: center;
  gap: 12px;
}
.instr-page-header i { font-size: 1.15rem; opacity: .9; }
.instr-page-list {
  margin: 0;
  padding: 28px 32px 28px 52px;
  color: rgba(255,255,255,.88);
  font-size: .9rem;
  line-height: 2.1;
  list-style: decimal;
}
.instr-page-list li {
  margin-bottom: 8px;
  padding-left: 6px;
}
.instr-page-list li:last-child { margin-bottom: 0; }
.instr-page-footer {
  padding: 16px 28px;
  border-top: 1px solid rgba(255,255,255,.1);
  text-align: right;
  background: rgba(0,0,0,.15);
}
.instr-login-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 24px;
  background: #2855c8;
  color: #fff;
  border-radius: 7px;
  font-size: .86rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, transform .12s;
  letter-spacing: .03em;
}
.instr-login-btn:hover { background: #1a3fa0; color: #fff; text-decoration: none; transform: translateY(-1px); }

.login-wrap {
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: flex-start;
  padding: 32px 28px 60px;
  gap: 28px;
  flex-wrap: wrap;
}

/* ── Col 1 – Flowchart ─────────────────────────── */
.flow-col { flex: 2 1 0; min-width: 280px; padding-top: 4px; }

/* Header badge */
.fc-badge-wrap { text-align:center; margin-bottom:12px; }
.fc-badge {
  display: inline-block;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 20px;
  padding: 4px 14px;
  color: #e0e7ff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* Step pair row (steps 1 & 2) */
.fc-steps-pair { display:flex; align-items:stretch; gap:0; }

/* Each step box */
.fc-step { flex:1; border-radius:10px 10px 0 0; overflow:hidden; }
.fc-step-full { border-radius:10px; overflow:hidden; }

/* Step header bar */
.fc-step-head {
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.fc-step-num {
  background: rgba(255,255,255,.2);
  border-radius: 50%;
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
  font-size: .78rem;
  flex-shrink: 0;
}
.fc-step-title { color:#000; font-weight:800; font-size:.78rem; }
.fc-step-icon { color:rgba(0,0,0,.35); font-size:.85rem; margin-left:auto; }

/* Step body */
.fc-step-body { padding:9px 12px; min-height:80px; }
.fc-step-desc { font-size:.75rem; margin:0 0 5px; line-height:1.4; }
.fc-step-sub  { font-size:.7rem; }

/* Date pill */
.fc-date-pill {
  display: inline-block;
  border-radius: 20px;
  padding: 1px 8px;
  font-size: .68rem;
  font-weight: 700;
}

/* Step 3 tag (right-aligned pill in header) */
.fc-step-tag {
  margin-left: auto;
  border-radius: 20px;
  padding: 1px 8px;
  font-size: .67rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Step colors */
.fc-step--blue  .fc-step-head { background:#90bce8; }
.fc-step--blue  .fc-step-body { background:#d0e8f8; }
.fc-step--blue  .fc-step-desc { color:#000; font-weight:700; }
.fc-step--blue  .fc-step-sub  { color:#000; font-weight:700; }
.fc-step--blue  .fc-date-pill { background:rgba(0,0,0,.1); color:#000; font-weight:700; }

.fc-step--gold  .fc-step-head { background:#f5c842; }
.fc-step--gold  .fc-step-body { background:#fde99a; }
.fc-step--gold  .fc-step-desc { color:#000; font-weight:700; }
.fc-step--gold  .fc-step-sub  { color:#000; font-weight:700; }
.fc-step--gold  .fc-date-pill { background:rgba(0,0,0,.1); color:#000; font-weight:700; }

.fc-step--green .fc-step-head { background:#5ecb8a; }
.fc-step--green .fc-step-body { background:#b6f0cf; padding:9px 12px; }
.fc-step--green .fc-step-tag  { background:rgba(0,0,0,.1); color:#000; font-weight:700; }

.fc-step--red   .fc-step-head { background:#e8809a; }
.fc-step--red   .fc-step-body { background:#fac8d4; padding:9px 12px; text-align:center; }
.fc-step--red   .fc-step-desc { color:#000; font-weight:700; margin:0; }

/* Horizontal arrow (between step 1 & 2) */
.fc-arrow-h-wrap {
  display: flex;
  align-items: center;
  padding: 0 4px;
  padding-top: 22px;
  flex-shrink: 0;
}
.fc-arrow-h {
  position: relative;
  width: 28px; height: 0;
  border-top: 2px solid rgba(255,255,255,.4);
}
.fc-arrow-h-tip {
  position: absolute;
  right: -7px; top: -5px;
  width: 0; height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid rgba(255,255,255,.4);
}

/* Vertical arrows row */
.fc-arrow-v-row  { display:flex; gap:0; height:32px; align-items:flex-start; }
.fc-arrow-v-wrap { flex:1; display:flex; justify-content:center; }
.fc-arrow-v-spacer { width:36px; }
.fc-arrow-v {
  position: relative;
  width: 0; height: 32px;
  border-left: 2px solid;
}
.fc-arrow-v::after {
  content: '';
  position: absolute;
  bottom: -7px; left: -5px;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid;
}
.fc-arrow-v--green              { border-left-color:#10b981; }
.fc-arrow-v--green::after       { border-top-color:#10b981; }
.fc-arrow-v--gold               { border-left-color:#f59e0b; }
.fc-arrow-v--gold::after        { border-top-color:#f59e0b; }
.fc-arrow-v--red                { border-left-color:#e11d48; }
.fc-arrow-v--red::after         { border-top-color:#e11d48; }

/* Single down-arrow row (step 3→4) */
.fc-arrow-single { display:flex; justify-content:center; height:30px; align-items:flex-start; }
.fc-arrow-single .fc-arrow-v   { height:30px; }

/* Step 3 substeps */
.fc-substeps     { display:flex; flex-direction:column; gap:3px; }
.fc-substep      { background:rgba(255,255,255,.45); border-radius:5px; padding:4px 9px; display:flex; align-items:center; gap:5px; }
.fc-substep-num  {
  background: rgba(0,0,0,.2);
  border-radius: 50%;
  width:16px; height:16px;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: .6rem; font-weight:800; color:#fff;
  flex-shrink: 0;
}
.fc-substep-label  { color:#000; font-weight:800; font-size:.7rem; }
.fc-substep-detail { color:#000; font-weight:700; font-size:.66rem; margin-left:auto; }

/* ── Col 2 – Notice Panel ──────────────────────── */
.notice-panel {
  flex: 1.5 1 0;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.notice-header {
  text-align: center;
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(255,255,255,.2);
  margin-bottom: 2px;
}
.notice-header span {
  display: inline-block;
  background: rgba(255,220,50,.18);
  border: 1px solid rgba(255,220,50,.4);
  border-radius: 20px;
  padding: 4px 18px;
  font-size: .8rem;
  letter-spacing: .1em;
}
.notice-block {
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  overflow: hidden;
  backdrop-filter: blur(4px);
}
.notice-block-title {
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  color: #fff;
}
.notice-block-body { padding:14px 18px; }
.notice-block.staff-block .notice-block-title { background:#1a5276; }
.notice-block.inst-block  .notice-block-title { background:#1e8449; }
.notice-block ol {
  margin: 0; padding-left: 18px;
  color: rgba(255,255,255,.88);
  font-size: .82rem;
  line-height: 1.65;
}
.notice-block ol li          { margin-bottom:5px; }
.notice-block ol li strong   { color:#fde68a; }
.notice-block ol li em       { color:#fca5a5; font-style:normal; font-weight:600; }
.li-new                      { color:#fca5a5; font-weight:600; }
.li-new-tag                  { color:#fbbf24; font-style:normal; font-weight:800; }
.li-chevron                  { opacity:.4; font-size:.65rem; margin-left:auto; }

/* ── Col 3 – Login Card ────────────────────────── */
.login-col {
  flex: 1 1 0;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 4px;
}
.login-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  overflow: hidden;
}
.login-card-top {
  background: linear-gradient(135deg,#03035c,#1a1aa0);
  padding: 28px 32px 22px;
  text-align: center;
  color: #fff;
}
.login-card-top .system-name {
  font-size: 15px; font-weight:700;
  letter-spacing:.04em; color:#e0e7ff; margin-top:6px;
}
.login-card-top .dept-name {
  font-size:11.5px; color:#9ab2e8;
  letter-spacing:.08em; text-transform:uppercase; margin-top:3px;
}
.login-card-body { padding:30px 32px 28px; }
.login-card-body .form-label {
  font-size:12.5px; font-weight:600;
  color:#374151; margin-bottom:5px; display:block;
}
.login-card-body .form-control {
  border-radius:7px;
  border: 1.5px solid #d1d9e6;
  font-size:13.5px; padding:9px 12px;
  color:#1e2a4a;
  transition: border-color .2s, box-shadow .2s;
}
.login-card-body .form-control:focus {
  border-color:#2855c8;
  box-shadow: 0 0 0 3px rgba(40,85,200,.12);
  outline: none;
}
.login-card-body .form-control.is-invalid { border-color:#dc3545; }
.btn-login {
  background: linear-gradient(135deg,#2855c8,#1a3a9c);
  border: none; border-radius:8px;
  color:#fff; font-size:14px; font-weight:600;
  padding:10px 0; width:100%;
  letter-spacing:.03em;
  transition: opacity .2s, transform .15s;
  margin-top:4px; cursor:pointer;
}
.btn-login:hover { opacity:.92; transform:translateY(-1px); color:#fff; }
.login-footer-text {
  text-align:center; margin-top:18px;
  font-size:12.5px; color:#6c757d;
}
.login-footer-text a { color:#2855c8; font-weight:500; }
.login-feedback-btn {
  display: inline-flex; align-items:center; gap:6px;
  background:#f0f4ff; border:1px solid #c7d4f5;
  color:#2855c8; border-radius:20px;
  padding:6px 18px; font-size:12.5px; font-weight:600;
  text-decoration:none; transition:background .2s;
}
.login-feedback-btn:hover { background:#dce8ff; color:#2855c8; text-decoration:none; }