/*
 * wallet.css — the wallet's adjustments on top of Dashmix (loaded after dashmix.min.css).
 *
 * The same design tokens as the Foundation website, sbrit.org, so the wallet reads as a Foundation
 * product: one typeface set heavier for headings, one restrained action colour, tables and rules as
 * structure, no decorative chrome.
 *
 * Tokens
 *   ink         #14213D   headings, navigation, strong text
 *   paper       #FFFFFF   page background
 *   ledger      #F3F4F6   alternating bands
 *   rule        #D9DDE3   borders and dividers
 *   seal blue   #1F4E9A   the single action colour (links, primary buttons)
 *   seal dark   #173B75   hover state of seal blue
 */

/* ---------------------------------------------------------------------------
 * Colour: override the Dashmix defaults through the Bootstrap variables and
 * the few Dashmix rules that carry literal values.
 * ------------------------------------------------------------------------- */

:root,
[data-bs-theme=light] {
    --bs-primary: #1F4E9A;
    --bs-primary-rgb: 31, 78, 154;
    --bs-primary-text-emphasis: #14213D;
    --bs-primary-bg-subtle: #D5E0F2;
    --bs-primary-border-subtle: #B3C7E8;
    --bs-link-color: #1F4E9A;
    --bs-link-color-rgb: 31, 78, 154;
    --bs-link-hover-color: #173B75;
    --bs-link-hover-color-rgb: 23, 59, 117;
    --bs-heading-color: #14213D;
    --bs-border-color: #D9DDE3;
}

.btn-primary {
    --bs-btn-bg: #1F4E9A;
    --bs-btn-border-color: #1F4E9A;
    --bs-btn-hover-bg: #173B75;
    --bs-btn-hover-border-color: #173B75;
    --bs-btn-active-bg: #173B75;
    --bs-btn-active-border-color: #173B75;
    --bs-btn-focus-shadow-rgb: 31, 78, 154;
    --bs-btn-disabled-bg: #1F4E9A;
    --bs-btn-disabled-border-color: #1F4E9A;
}

.btn-alt-primary {
    --bs-btn-color: #14213D;
    --bs-btn-bg: #D5E0F2;
    --bs-btn-border-color: #D5E0F2;
    --bs-btn-hover-color: #14213D;
    --bs-btn-hover-bg: #B3C7E8;
    --bs-btn-hover-border-color: #B3C7E8;
    --bs-btn-focus-shadow-rgb: 179, 199, 232;
    --bs-btn-active-color: #14213D;
    --bs-btn-active-bg: #B3C7E8;
    --bs-btn-active-border-color: #B3C7E8;
    --bs-btn-disabled-color: #14213D;
    --bs-btn-disabled-bg: #D5E0F2;
    --bs-btn-disabled-border-color: #D5E0F2;
}

.bg-body-light {
    background-color: #F3F4F6 !important;
}

.block-bordered,
.border-top,
.border-bottom {
    border-color: #D9DDE3 !important;
}

.link-fx::before {
    background-color: #1F4E9A;
}

.nav-main-link {
    color: #14213D;
}
.nav-main-link.active,
.nav-main-link:hover {
    color: #14213D;
    background-color: #E6ECF6;
}

/* ---------------------------------------------------------------------------
 * Type: Inter (shipped with Dashmix) throughout. Headings are the same face as
 * the body, set heavier and in ink. No third-party font requests.
 * ------------------------------------------------------------------------- */

h1, h2, h3,
.h1, .h2, .h3 {
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #14213D;
}

h1, .h1 { line-height: 1.15; }
h2, .h2 { line-height: 1.2; }

/* Keep prose measure under 80 characters */
.measure {
    max-width: 38rem;
}

/* Label column of key-value tables */
.w-33 {
    width: 33%;
}

/* Hashes, addresses, CIDs and figures */
.font-monospace {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}

/* Footer: its own band under a rule */
.site-footer {
    border-top: 2px solid #D9DDE3;
}

/* ---------------------------------------------------------------------------
 * Wallet views (views/pages/wallet.hbs, driven by /app.js)
 * ------------------------------------------------------------------------- */

/* The four tabs stay on one row at every width and scroll sideways if they ever do not fit */
.wallet-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}
.wallet-tabs .nav-link {
    white-space: nowrap;
}

/* The status panel under the tabs: wallet state, network and node as three definitions */
.wallet-tabs {
    margin-bottom: 1rem;
}
.wallet-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.75rem 2rem;
    margin: 0;
}
.wallet-status-grid dt {
    font-size: 0.8125rem;
    font-weight: 400;
    color: #4B5563;
    margin-bottom: 0.125rem;
}
.wallet-status-grid dd {
    font-size: 1rem;
    font-weight: 600;
    color: #14213D;
    margin: 0;
}

/* Addresses, keys and transaction ids wrap inside their cell instead of widening it */
.wallet-address {
    word-break: break-all;
    overflow-wrap: anywhere;
}

/* Amounts, sequences and heights line up digit by digit */
.wallet-figure {
    font-variant-numeric: tabular-nums;
}

/* The recovery phrase: twelve numbered words in a grid the user copies by hand */
.wallet-words {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1.5rem;
    margin: 0;
    padding: 0 0 0 1.75rem;
    counter-reset: word;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 1.05rem;
}
.wallet-words li {
    padding: 0.375rem 0.5rem;
    border-bottom: 1px solid #D9DDE3;
}
@media (min-width: 576px) {
    .wallet-words {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Parameters of a contract call in the review table */
.wallet-pre {
    font-size: 0.85rem;
    white-space: pre-wrap;
    word-break: break-all;
}