/* ========================================================================== */
/* CoinFlip Portal Brand Layer                                                */
/* Based on supplied CoinFlip Brand Guidelines                                */
/* ========================================================================== */

:root {
  --cf-navy: #182740;
  --cf-gold: #FFAB09;
  --cf-blue: #2365A5;
  --cf-light-blue: #82DCF9;
  --cf-orange: #FF7909;
  --cf-off-white: #FAF4EE;

  --cf-white: #FFFFFF;
  --cf-text: #182740;
  --cf-muted: #667085;
  --cf-border: #D8DEE8;
}

/* -------------------------------------------------------------------------- */
/* Typography                                                                 */
/* -------------------------------------------------------------------------- */

body,
button,
input,
select,
textarea {
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;
}

#customer small,
#admin small {
  color: var(--cf-gold);
  font-weight: 800;
  letter-spacing: .08em;
}

/* -------------------------------------------------------------------------- */
/* Customer sidebar                                                           */
/* -------------------------------------------------------------------------- */

.customer-portal-sidebar {
  background: var(--cf-navy) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: 0 16px 40px rgba(24,39,64,.18);
}

.customer-nav-title {
  color: var(--cf-white);
  border-bottom-color: rgba(255,255,255,.12) !important;
}

/*
 * Approved CoinFlip Preferred logo.
 * Blue logo is presented on an off-white brand surface for contrast.
 */
.customer-nav-title::before {
  content: "";
  display: block;
  width: 100%;
  height: 62px;
  margin-bottom: 12px;

  background:
    var(--cf-off-white)
    url("/brand/coinflip-preferred-blue.png")
    center / 88% auto
    no-repeat;

  border-radius: 10px;
}

.customer-nav-title small {
  color: var(--cf-gold) !important;
}

.customer-nav-title strong {
  color: var(--cf-white);
}

.customer-nav-button {
  color: rgba(255,255,255,.78) !important;
  transition:
    background .15s ease,
    color .15s ease,
    transform .15s ease;
}

.customer-nav-button:hover {
  background: rgba(35,101,165,.45) !important;
  color: var(--cf-white) !important;
}

.customer-nav-button.active {
  background: var(--cf-gold) !important;
  color: var(--cf-navy) !important;
  box-shadow: 0 5px 14px rgba(255,171,9,.18);
}

.customer-nav-button.active .customer-nav-icon {
  color: var(--cf-navy);
}

/* -------------------------------------------------------------------------- */
/* Admin sidebar                                                              */
/* -------------------------------------------------------------------------- */

.admin-portal-sidebar {
  background: var(--cf-navy) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: 0 16px 40px rgba(24,39,64,.18);
}

.admin-nav-title {
  color: var(--cf-white);
  border-bottom-color: rgba(255,255,255,.12) !important;
}

/* Approved reversed CoinFlip logo on CoinFlip Navy */
.admin-nav-title::before {
  content: "";
  display: block;
  width: 150px;
  height: 40px;
  margin-bottom: 14px;

  background:
    url("/brand/coinflip-logo-white.svg")
    left center / contain
    no-repeat;
}

.admin-nav-title small {
  color: var(--cf-gold) !important;
}

.admin-nav-title strong {
  color: var(--cf-white);
}

.admin-nav-button {
  color: rgba(255,255,255,.78) !important;
  transition:
    background .15s ease,
    color .15s ease,
    transform .15s ease;
}

.admin-nav-button:hover {
  background: rgba(35,101,165,.45) !important;
  color: var(--cf-white) !important;
}

.admin-nav-button.active {
  background: var(--cf-gold) !important;
  color: var(--cf-navy) !important;
  box-shadow: 0 5px 14px rgba(255,171,9,.18);
}

/* -------------------------------------------------------------------------- */
/* Customer + Admin content                                                   */
/* -------------------------------------------------------------------------- */

#customer h1,
#customer h2,
#customer h3,
#admin h1,
#admin h2,
#admin h3 {
  letter-spacing: -.025em;
}

/* Give interactive fields a consistent CoinFlip focus treatment */
#customer input:focus,
#customer select:focus,
#customer textarea:focus,
#admin input:focus,
#admin select:focus,
#admin textarea:focus {
  outline: none;
  border-color: var(--cf-blue) !important;
  box-shadow: 0 0 0 3px rgba(35,101,165,.14);
}

/* -------------------------------------------------------------------------- */
/* Primary actions                                                            */
/* -------------------------------------------------------------------------- */

#customer form button:not(.secondary):not(.small-button):not(.trade-tab),
#admin form button:not(.secondary):not(.small-button),
#customer a.button,
#admin a.button {
  background: var(--cf-gold);
  color: var(--cf-navy);
  border-color: var(--cf-gold);
  font-weight: 800;
}

#customer form button:not(.secondary):not(.small-button):not(.trade-tab):hover,
#admin form button:not(.secondary):not(.small-button):hover,
#customer a.button:hover,
#admin a.button:hover {
  background: #E99A00;
  border-color: #E99A00;
}

/* Secondary actions */
#customer .secondary,
#admin .secondary {
  border-color: var(--cf-blue);
}

/* -------------------------------------------------------------------------- */
/* Trading                                                                    */
/* -------------------------------------------------------------------------- */

#tradeBuyTab.active,
#tradeSellTab.active {
  background: var(--cf-gold) !important;
  border-color: var(--cf-gold) !important;
  color: var(--cf-navy) !important;
}

.trade-quote {
  border-color: rgba(35,101,165,.25);
}

/* -------------------------------------------------------------------------- */
/* Pills / status                                                             */
/* -------------------------------------------------------------------------- */

#customer .pill,
#admin .pill {
  border-color: rgba(35,101,165,.30);
}

/* -------------------------------------------------------------------------- */
/* Research / broker cards                                                    */
/* -------------------------------------------------------------------------- */

.broker-card,
.research-reader {
  border-color: rgba(35,101,165,.20);
}

/* -------------------------------------------------------------------------- */
/* Accessibility                                                              */
/* -------------------------------------------------------------------------- */

.customer-nav-button:focus-visible,
.admin-nav-button:focus-visible {
  outline: 3px solid var(--cf-light-blue);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------- */
/* Responsive                                                                 */
/* -------------------------------------------------------------------------- */

@media (max-width: 920px) {
  .customer-nav-title::before,
  .admin-nav-title::before {
    display: none;
  }

  .customer-portal-sidebar,
  .admin-portal-sidebar {
    box-shadow: 0 8px 24px rgba(24,39,64,.16);
  }
}