@font-face {
  font-family: 'SF Pro Display';
  src: url('resources/SFProDisplay.woff2');
}

* {
  font-family: 'SF Pro Display';
}

/* body {
  overflow-x: hidden;
  font-family: 'SF Pro Display';
  font-size: 16px;
} */

/* Toggle Styles */

#viewport {
  padding-left: 300px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#content {
  width: 100%;
  position: relative;
  margin-right: 0;
  font-family: 'SF Pro Display';
}

/* Sidebar Styles */

#sidebar {
  z-index: 1000;
  position: fixed;
  left: 300px;
  width: 300px;
  height: 100%;
  margin-left: -300px;
  overflow-y: auto;
  background-color: #31343B;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  font-family: 'SF Pro Display';
}

#sidebar header {
  background-color: #31343B;
  font-size: 20px;
  line-height: 52px;
  text-align: center;
  border-bottom: 5px solid #51555f;
  margin-bottom: 20px;
  padding: 40px 0px 20px;
}

#sidebar header a {
  color: #fefdfc;
  display: block;
  text-decoration: none;
}

#sidebar header a:hover {
  color: #fefdfc;
}

#sidebar .nav a{
  background: none;
  border-bottom: 1px solid #455A64;
  color: #fefdfc;
  font-size: 18px;
  padding: 16px 24px;
}

#sidebar .nav a:hover{
  background: none;
  color: #fefdfc;
}

#sidebar .nav a i{
  margin-right: 16px;
}

#sidebar .nav li{
  background-color: #383A42;
  margin-bottom: 5px;
}

#sidebar .nav li:hover{
  background-color: #474A54;
}

#sidebar header {
  background-color: #31343B;
  font-size: 20px;
  line-height: 52px;
  text-align: center;
  border-bottom: 5px solid #51555f;
  margin-bottom: 20px;
  padding: 40px 0px 20px;
}

.icon {
  width: auto;
  height: 18px;
  margin-right: 10px;
}

#topbar {
  background-color: #F2F2F2;
  border-bottom: 5px solid #D9D9D9;
}

#left-head {
  border-bottom: 10px solid #51555f;
  /* margin-bottom: 20px; */
  padding: 40px 0px 40px;
}

.ovrd-bg-normal {
  background-color: #383A42;
}

.ovrd-bg-secondary {
  background-color: #D9D9D9;
}

.ovrd-active {
  background-color: #474A54;
}

#ovrd-active strong{
  color: #EBA43A;
}

#nav a:hover {
  background-color: #474A54;
  color: #EBA43A;
}

#nav a {
  color: #FFFFFF;
}

.ovrd-border-left{
  border-left: 7px solid #EBA43A;
}

.form-control:focus {
  outline: 0;
  color: red;
  box-shadow: none!important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-background-clip: text;
    -webkit-text-fill-color: #ffffff;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px #23232329;
}

#buttonSort {
  background-color: transparent;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;

  li {
    color: #000000;
    display: flex;

    a {
      /* background-color: #444B6E; */
      padding: 5px 10px;
      /* border: 2px solid $border-color; */
      border-right: 0;
    }
  }

  li.active a {
    background-color: rgb(226, 216, 255);
  }
}

#pagination {
  display: flex;
  /* height: 100vh; */
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#activation-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.access-eyebrow {
  display: block;
  color: #eba43a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.access-status {
  width: fit-content;
  border-radius: 999px;
  background: #fff1d8;
  color: #8a5a00;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  text-transform: uppercase;
}

.access-status--expired {
  background: #ffe0e0;
  color: #9f1d1d;
}

.access-status--active {
  background: #def7e7;
  color: #117a35;
}

.access-status--disabled {
  background: #eceff3;
  color: #4e5664;
}

.access-status--basic {
  background: #e8f0ff;
  color: #2452a0;
}

.access-status--pro {
  background: #f7e6ff;
  color: #7b1fa2;
}

.access-status--moderator {
  background: #e0e7ff;
  color: #3730a3;
}

/* Verification checklist in the member table: one chip per ladder step, green +
   ticked when done, muted + hollow when still pending. Wraps on narrow widths. */
.verify-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.verify-step {
  width: fit-content;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  white-space: nowrap;
}

.verify-step--done {
  background: #def7e7;
  color: #117a35;
}

.verify-step--todo {
  background: #f3f4f6;
  color: #9096a1;
}

.access-status--none {
  background: #f1f1f1;
  color: #51555f;
}

.access-empty {
  border: 1px dashed #c8c8c8;
  border-radius: 8px;
  color: #51555f;
  font-weight: 700;
  padding: 18px;
  text-align: center;
}

.access-empty--danger {
  border-color: #dc3545;
  color: #dc3545;
}

.access-coin-note {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border: 1px solid #d8e4ff;
  border-radius: 6px;
  background: #f4f8ff;
  color: #2452a0;
  font-size: 12px;
  font-weight: 800;
  padding: 7px 10px;
}

.activation-table-panel {
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  background: #ffffff;
  padding: 18px;
  box-shadow: 0 12px 28px rgba(49, 52, 59, 0.06);
}

.activation-table-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.activation-table-head h5,
.activation-table-head p {
  margin: 0;
}

.activation-table-head h5 {
  color: #31343b;
  font-weight: 800;
}

.activation-table-head p {
  color: #51555f;
  font-size: 13px;
}

.activation-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr)) 110px;
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
}

.activation-filters label {
  display: grid;
  gap: 5px;
  margin: 0;
}

.activation-filters span {
  color: #31343b;
  font-size: 12px;
  font-weight: 800;
}

.activation-filters input,
.activation-filters select {
  width: 100%;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  padding: 7px 9px;
}

.activation-filters button {
  border: 0;
  border-radius: 6px;
  background: #dc3545;
  color: #ffffff;
  font-weight: 800;
  padding: 8px 12px;
  text-transform: lowercase;
}

.activation-user-table {
  min-width: 760px;
}

.activation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.activation-action-button,
.activation-edit-contact a {
  border: 1px solid #51555f;
  border-radius: 4px;
  background: #383A42;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 7px;
  text-decoration: none;
}

.activation-action-button--wa {
  border-color: #168a45;
  background: #168a45;
}

.activation-action-button--email {
  border-color: #0d6efd;
  background: #0d6efd;
}

.activation-action-button--detail {
  border-color: #eba43a;
  background: #eba43a;
  color: #31343b;
}

.activation-action-button--danger {
  border-color: #dc3545;
  background: #dc3545;
}

.activation-action-button--disabled,
.activation-edit-contact a.disabled {
  cursor: not-allowed;
  border-color: #b8b8b8;
  background: #d7d7d7;
  color: #777777;
  pointer-events: none;
}

.activation-edit-note {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  color: #51555f;
  font-size: 12px;
  font-weight: 700;
  padding: 9px;
}

.activation-edit-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.activation-edit-contact--detail {
  margin-top: 8px;
}

.activation-contact-panel {
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  background: #fafafa;
  padding: 10px;
}

.activation-contact-panel p {
  margin: 4px 0 0;
  color: #51555f;
  font-size: 12px;
  font-weight: 700;
}

.activation-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.activation-detail-grid div {
  min-width: 0;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  background: #fafafa;
  padding: 9px;
}

.activation-detail-grid span {
  display: block;
  color: #777777;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.activation-detail-grid strong {
  display: block;
  margin-top: 4px;
  color: #31343b;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.coin-admin-panel,
.coin-admin-block {
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  background: #ffffff;
  padding: 18px;
  box-shadow: 0 12px 28px rgba(49, 52, 59, 0.06);
}

.coin-admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
  gap: 14px;
}

.coin-admin-block {
  min-width: 0;
  box-shadow: none;
}

.coin-admin-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.coin-admin-block-head h6 {
  margin: 0;
  color: #31343b;
  font-weight: 800;
}

.coin-admin-block-head span {
  color: #51555f;
  font-size: 12px;
  font-weight: 800;
}

.coin-admin-table {
  min-width: 680px;
  font-size: 12px;
}

.coin-inline-input {
  width: 112px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  padding: 5px 7px;
}

.coin-trial-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  margin: 0;
  border: 1px solid #d8e4ff;
  border-radius: 6px;
  background: #f4f8ff;
  color: #2452a0;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 8px;
  white-space: nowrap;
}

.coin-trial-toggle input {
  width: auto;
  margin: 0;
}

.coin-trial-toggle--panel {
  align-self: end;
  min-height: 36px;
}

.coin-user-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  margin-bottom: 10px;
}

.coin-user-tools--stacked {
  grid-template-columns: repeat(1, minmax(0, 1fr)) auto;
}

.coin-user-tools label {
  display: grid;
  gap: 5px;
  margin: 0;
}

.coin-user-tools span {
  color: #31343b;
  font-size: 12px;
  font-weight: 800;
}

.coin-user-tools input,
.coin-user-tools select {
  width: 100%;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  padding: 7px 9px;
}

.coin-user-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  color: #51555f;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 10px;
  padding: 10px;
}

.coin-user-summary strong {
  color: #31343b;
}

.coin-fraud-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.coin-fraud-grid h6 {
  margin: 0 0 6px;
  color: #31343b;
  font-size: 13px;
  font-weight: 800;
}

@media (max-width: 780px) {
  .activation-filters {
    grid-template-columns: 1fr;
  }

  .coin-admin-grid,
  .coin-fraud-grid,
  .coin-user-tools--stacked {
    grid-template-columns: 1fr;
  }

  .activation-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* Collapsible SOP box in the admin panel. Admins should be able to read the
   rules where they do the work instead of asking, so every screen that needs
   judgement (approvals, flags, unlink) carries its own. Collapsed by default so
   it never gets in the way of someone who already knows. */
.sop-box {
  border: 1px solid #d7d2ea;
  border-radius: 10px;
  background: #f7f6fc;
  padding: 10px 14px;
}

.sop-box > summary {
  cursor: pointer;
  color: #3c3489;
  font-size: 14px;
}

.sop-box .sop-body {
  margin-top: 10px;
  border-top: 1px solid #e2ddf2;
  padding-top: 10px;
  color: #3a3a46;
  font-size: 13px;
  line-height: 1.65;
}

.sop-box .sop-body ul {
  display: block;
  list-style: disc;
  margin: 4px 0 10px;
  padding-left: 18px;
}

.sop-box .sop-body ul li {
  display: list-item;
  color: inherit;
  margin-bottom: 4px;
}

/* SOP cards: the same rules as before, laid out so they can be scanned. A step strip for the order of things,
   then cards of short rules, each marked Cek / Setujui / Tolak / Jangan / Info. Plain divs: the global ul/li menu rule never touches them. */
.sop-box .sop-eyebrow { margin: 0 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #6a64a8; }
.sop-box .sop-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin-bottom: 12px; }
.sop-box .sop-step { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; min-width: 120px; max-width: 220px; background: #fff; border: 1px solid #d7d2ea; border-radius: 8px; }
.sop-box .sop-step b { font-size: 13px; color: #2b2750; }
.sop-box .sop-step small { font-size: 11px; line-height: 1.35; color: #5b5870; }
.sop-box .sop-step.gate { background: #3c3489; border-color: #3c3489; }
.sop-box .sop-step.gate b, .sop-box .sop-step.gate small, .sop-box .sop-step.gate a { color: #fff; }
.sop-box .sop-n { align-self: flex-start; width: 20px; height: 20px; border-radius: 50%; background: #ece8fa; color: #3c3489; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; }
.sop-box .sop-step.gate .sop-n { background: rgba(255, 255, 255, 0.2); color: #fff; }
.sop-box .sop-arrow { align-self: center; color: #8d86c4; font-size: 18px; }
.sop-box .sop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-bottom: 8px; }
.sop-box .sop-card { padding: 12px 14px; background: #fff; border: 1px solid #e2ddf2; border-radius: 10px; display: flex; flex-direction: column; gap: 8px; }
.sop-box .sop-card h4 { margin: 0; font-size: 14px; font-weight: 700; color: #2b2750; }
.sop-box .sop-card h4 small { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; color: #6a64a8; }
.sop-box .sop-rule { display: grid; grid-template-columns: 64px 1fr; gap: 8px; align-items: start; }
.sop-box .sop-rule p { margin: 0; font-size: 13px; line-height: 1.5; }
.sop-box .sop-tag { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: 0.04em; }
.sop-box .t-cek { background: #ece8fa; color: #3c3489; }
.sop-box .t-lakukan { background: #ece8fa; color: #3c3489; }
.sop-box .t-wajib { background: #3c3489; color: #fff; }
.sop-box .t-setujui { background: #e1f4e6; color: #1a6b34; }
.sop-box .t-tolak { background: #fde6e6; color: #a12a2a; }
.sop-box .t-jangan { background: #fff0cf; color: #8a5a00; }
.sop-box .t-info { background: #eceef1; color: #4a4f58; }
.sop-box .sop-foot { margin: 4px 0 8px; font-size: 12px; color: #6a64a8; }

.sop-box .sop-body code {
  background: #ece8fa;
  border-radius: 4px;
  padding: 1px 5px;
  color: #3c3489;
}

/* Who-Is consolidated layout: identity, coin summary, bindings, risk and the
   ledger on one scrollable page instead of two tabs, so an admin sees the whole
   member at a glance. */
.whois-card {
  border: 1px solid #d7d2ea;
  border-radius: 10px;
  background: #fff;
  padding: 14px 16px;
}

.whois-card-title {
  margin: -14px -16px 12px;
  padding: 8px 16px;
  border-bottom: 1px solid #e2ddf2;
  border-radius: 10px 10px 0 0;
  background: #f7f6fc;
  color: #3c3489;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
}

.whois-kv {
  width: 100%;
  font-size: 13.5px;
}

.whois-kv td {
  padding: 5px 0;
  vertical-align: top;
}

.whois-kv td:first-child {
  width: 40%;
  color: #6b6980;
  white-space: nowrap;
}

.whois-kv td:last-child {
  font-weight: 600;
  color: #2c2c34;
}

/* Who-Is: site-binding list, add-account form, revert button and SOP box. */
.whois-binding-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dashed #e6e2f2;
  font-size: 13px;
}
.whois-binding-row:last-child { border-bottom: 0; }
.whois-binding-row em { color: #6b6980; font-style: normal; font-size: 12px; }

.whois-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  background: #ece8fb;
  color: #4b3fae;
  font-size: 10px;
  font-weight: 700;
  vertical-align: middle;
}

.whois-mini-btn {
  border: 1px solid #c9a3a3;
  background: #fff;
  color: #a13b3b;
  border-radius: 6px;
  padding: 2px 10px;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}
.whois-mini-btn:hover { background: #fbeaea; }

.whois-card-subtitle {
  font-size: 12px;
  font-weight: 700;
  color: #3c3489;
  margin-bottom: 6px;
}

.whois-bind-form {
  border-top: 1px solid #eceaf5;
  padding-top: 12px;
}

.whois-bind-msg { font-size: 12px; min-height: 16px; }
.whois-bind-msg.ok { color: #1c7c46; }
.whois-bind-msg.err { color: #b3261e; }


/* Who-Is verification-status legend + chip */
.whois-vs-legend {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #e6e2f2;
  font-size: 11.5px;
  line-height: 1.5;
  color: #6b6980;
}
.whois-vs { font-weight: 700; }