@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 {
  margin: 4px 0 10px;
  padding-left: 18px;
}

.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; }

.whois-sop {
  background: #fbfaff;
  border: 1px solid #e2ddf2;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 12.5px;
  color: #45435a;
}
.whois-sop ol { margin: 6px 0 0; padding-left: 18px; }
.whois-sop li { margin-bottom: 4px; }

/* 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; }