/* ==================================================
   MEMBER TRANSACTION SECURITY V7D-B
   ================================================== */

.transaction-security-panel {
  margin: 18px 0;
  overflow: hidden;
  border: 1px solid #d8dee6;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(20,30,45,.05);
}

.transaction-security-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 17px 19px;
  border-bottom: 1px solid #e2e6eb;
  background: linear-gradient(180deg,#242b32,#1c2228);
  color: #fff;
}

.transaction-security-head span,
.member-security-kicker {
  display: block;
  color: #7f8b96;
  font-family: Consolas,monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
}

.transaction-security-head h3 {
  margin: 4px 0;
  color: #f1f3f5;
  font-size: 16px;
}

.transaction-security-head p {
  margin: 0;
  color: #9da7b1;
  font-size: 11px;
}

.transaction-security-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
}

.transaction-security-grid article {
  padding: 15px 17px;
  border-right: 1px solid #e1e5e9;
  background: #f8f9fa;
}

.transaction-security-grid article:last-child {
  border-right: 0;
}

.transaction-security-grid span {
  display: block;
  color: #7b858f;
  font-family: Consolas,monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .08em;
}

.transaction-security-grid strong {
  display: block;
  margin: 6px 0 3px;
  color: #242b32;
  font-family: Consolas,monospace;
  font-size: 15px;
}

.transaction-security-grid small {
  color: #979fa7;
  font-size: 9px;
}

.engine-enabled,
.irs-off {
  color: #158652 !important;
}

.engine-stopped,
.irs-on {
  color: #c83d48 !important;
}

.transaction-security-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 18px;
  border-top: 1px solid #e1e5e9;
  background: #fff;
}

.transaction-security-control strong {
  display: block;
  color: #252c33;
  font-size: 12px;
}

.transaction-security-control p {
  margin: 4px 0 0;
  color: #818b95;
  font-size: 10px;
}

.engine-stop-btn,
.engine-start-btn {
  min-width: 190px;
  padding: 10px 14px;
  border-radius: 6px;
  font-family: Consolas,monospace;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.engine-stop-btn {
  border: 1px solid #e2a0a6;
  background: #fff4f5;
  color: #b52e3a;
}

.engine-start-btn {
  border: 1px solid #8ed2ae;
  background: #effaf4;
  color: #137448;
}

.engine-stop-btn.armed,
.engine-start-btn.armed {
  border-color: #d79820;
  background: #fff5d9;
  color: #946300;
}


/* MEMBER TABLE BUTTON */

.member-security-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.member-security-btn {
  padding: 7px 9px;
  border: 1px solid #cfd5dc;
  border-radius: 6px;
  background: #fff;
  color: #4d5863;
  font-family: Consolas,monospace;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.member-security-btn.active {
  border-color: #a6d8bd;
  background: #edf9f2;
  color: #14764a;
}

.member-security-btn.unset {
  border-color: #dfc886;
  background: #fff9e9;
  color: #8c6909;
}

.member-security-btn.locked {
  border-color: #e1a1a6;
  background: #fff0f1;
  color: #bd3440;
}


/* MODAL */

.member-security-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.member-security-modal.hidden {
  display: none;
}

.member-security-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12,17,22,.72);
  backdrop-filter: blur(3px);
}

.member-security-dialog {
  position: relative;
  width: min(660px,100%);
  overflow: hidden;
  border: 1px solid #3a424a;
  border-radius: 10px;
  background: #f4f5f6;
  box-shadow: 0 30px 80px rgba(0,0,0,.32);
}

.member-security-dialog > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  background: linear-gradient(180deg,#252c33,#1c2228);
}

.member-security-dialog h3 {
  margin: 5px 0 3px;
  color: #f1f3f5;
  font-size: 17px;
}

.member-security-dialog header p {
  margin: 0;
  color: #9ba5ae;
  font-size: 10px;
}

.member-security-close {
  width: 32px;
  height: 32px;
  border: 1px solid #454e57;
  border-radius: 5px;
  background: #303840;
  color: #dce1e5;
  font-size: 19px;
  cursor: pointer;
}

.member-security-status-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  border-bottom: 1px solid #d9dee3;
}

.member-security-status-grid article {
  padding: 14px 17px;
  border-right: 1px solid #d9dee3;
  background: #fff;
}

.member-security-status-grid article:last-child {
  border-right: 0;
}

.member-security-status-grid span {
  display: block;
  color: #7e8790;
  font-family: Consolas,monospace;
  font-size: 8px;
}

.member-security-status-grid strong {
  display: block;
  margin-top: 6px;
  color: #252c33;
  font-family: Consolas,monospace;
  font-size: 13px;
}

.security-status.active {
  color: #168153;
}

.security-status.unset {
  color: #9b7000;
}

.security-status.locked {
  color: #c13642;
}

.member-security-note {
  margin: 15px 18px 0;
  padding: 10px 12px;
  border-left: 3px solid #4e5963;
  background: #e9ecef;
  color: #5f6871;
  font-size: 10px;
  line-height: 1.5;
}

.member-security-message {
  margin: 12px 18px 0;
  padding: 10px 12px;
  border-radius: 5px;
  font-size: 10px;
}

.member-security-message.hidden {
  display: none;
}

.member-security-message.success {
  border: 1px solid #a8d9bf;
  background: #edf9f2;
  color: #14764a;
}

.member-security-message.error {
  border: 1px solid #e1a6ab;
  background: #fff1f2;
  color: #b7303c;
}

#memberSecurityPinForm {
  padding: 16px 18px 18px;
}

.member-security-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.member-security-form-grid label {
  color: #535d67;
  font-size: 10px;
  font-weight: 600;
}

.member-security-form-grid input {
  width: 100%;
  margin-top: 7px;
  padding: 11px 12px;
  border: 1px solid #ccd3da;
  border-radius: 6px;
  outline: none;
  background: #fff;
  color: #20272e;
  font-family: Consolas,monospace;
  letter-spacing: .15em;
}

.member-security-form-grid input:focus {
  border-color: #6f7a84;
  box-shadow: 0 0 0 3px rgba(80,92,104,.08);
}

.member-security-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 16px;
}

.member-security-primary,
.member-security-secondary {
  padding: 9px 13px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.member-security-primary {
  border: 1px solid #303941;
  background: #252c33;
  color: #fff;
}

.member-security-secondary {
  border: 1px solid #cdd3d9;
  background: #fff;
  color: #505a64;
}

.member-security-secondary.hidden {
  display: none;
}

@media(max-width:900px) {

  .transaction-security-grid {
    grid-template-columns: repeat(2,1fr);
  }

}

@media(max-width:620px) {

  .transaction-security-grid,
  .member-security-status-grid,
  .member-security-form-grid {
    grid-template-columns: 1fr;
  }

  .transaction-security-control {
    align-items: stretch;
    flex-direction: column;
  }

  .engine-stop-btn,
  .engine-start-btn {
    width: 100%;
  }

}