/* =========================================================================
   GoPay Digital — design tokens and shell
   =========================================================================

   Blue and white. One stylesheet for both the signed-out screens and the
   signed-in shell, so the two cannot drift apart. Everything is driven by the
   tokens below: change a token here and the whole product follows.

   Loaded after Bootstrap, so it overrides where it needs to.
   ========================================================================= */

:root {
    /* ---- canvas and surfaces ---- */
    --canvas:        #f3f6fc;   /* white with the faintest blue in it */
    --surface:       #ffffff;
    --surface-sunk:  #f8fafd;
    --line:          #e3eaf5;
    --line-strong:   #cfdaeb;

    /* ---- text ---- */
    --ink:           #10243f;   /* headings: near-black with a blue cast */
    --ink-body:      #44586f;
    --ink-muted:     #8698ae;

    /* ---- brand: blue ---- */
    --blue:          #1d6ef5;
    --blue-strong:   #1558cc;
    --blue-deep:     #0d3f99;
    --blue-soft:     #e8f1ff;
    --blue-softer:   #f4f8ff;
    --blue-ring:     rgba(29, 110, 245, .20);

    /* ---- money and status.
       Colour here carries meaning, so it stays even in a blue-and-white
       scheme: an amount leaving the account must not look like one arriving.
       Kept muted so the palette still reads as blue and white. ---- */
    --credit:        #0b7a52;
    --credit-soft:   #e6f6ef;
    --debit:         #c0294a;
    --debit-soft:    #fdebef;
    --warn:          #a45b06;
    --warn-soft:     #fdf2e4;

    /* ---- depth. Two steps only; more becomes noise ---- */
    --shadow-sm: 0 1px 2px rgba(16, 36, 63, .04), 0 1px 3px rgba(16, 36, 63, .06);
    --shadow-md: 0 6px 14px -6px rgba(16, 36, 63, .12), 0 2px 6px -3px rgba(16, 36, 63, .07);
    --shadow-rail: 4px 0 22px -16px rgba(9, 36, 85, .6);

    /* ---- sidebar: solid blue, so the white content reads as the lit surface ---- */
    --rail-top:      #1557c8;
    --rail-bottom:   #0a337f;
    --rail-ink:      #ffffff;
    --rail-ink-soft: #c3d8f7;
    --rail-ink-dim:  #8cadde;
    --rail-line:     rgba(255, 255, 255, .13);
    --rail-hover:    rgba(255, 255, 255, .10);
    --rail-active:   rgba(255, 255, 255, .18);

    --radius:     12px;
    --radius-sm:  9px;
    --rail-width: 248px;
}

/* =========================================================================
   Base
   ========================================================================= */

body {
    background: var(--canvas);
    color: var(--ink-body);
    font-family: Inter, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-feature-settings: "cv02", "cv03", "cv04", "tnum";
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .gp-heading { color: var(--ink); letter-spacing: -.015em; }

.gp-num { font-variant-numeric: tabular-nums; }

/* =========================================================================
   Sidebar — white, with blue carrying the state
   ========================================================================= */

.gp-rail {
    width: var(--rail-width);
    background: linear-gradient(170deg, var(--rail-top) 0%, var(--rail-bottom) 100%);
    box-shadow: var(--shadow-rail);
    position: fixed;
    inset: 0 auto 0 0;
    display: flex;
    flex-direction: column;
    z-index: 1040;
}

.gp-rail-brand {
    display: flex; align-items: center; gap: .65rem;
    padding: 1.05rem 1.15rem;
    border-bottom: 1px solid var(--rail-line);
    text-decoration: none;
}

/* White mark on the blue rail; inverted to blue-on-white on the sign-in page,
   where the background is light. */
.gp-logo {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: #ffffff;
    display: grid; place-items: center;
    color: var(--blue-deep); font-weight: 800; font-size: .92rem; letter-spacing: -.03em;
    flex: none;
}

.gp-rail-name { color: var(--rail-ink); font-weight: 680; font-size: .98rem; letter-spacing: -.025em; line-height: 1.15; }
.gp-rail-sub  { color: var(--rail-ink-dim); font-size: .67rem; letter-spacing: .08em; text-transform: uppercase; margin-top: .1rem; }

.gp-rail-nav { padding: .6rem .65rem 2rem; overflow-y: auto; flex: 1; }

/* Group headers double as collapse toggles. A button, not a div, so it is
   reachable by keyboard and announced correctly. */
.gp-rail-group {
    display: flex; align-items: center; gap: .4rem; width: 100%;
    font-size: .66rem; font-weight: 650; letter-spacing: .09em; text-transform: uppercase;
    color: var(--rail-ink-dim);
    padding: .95rem .8rem .35rem;
    background: none; border: 0; text-align: left;
    cursor: pointer;
}

.gp-rail-group:hover { color: var(--rail-ink-soft); }

.gp-rail-group .bi {
    margin-left: auto; font-size: .7rem;
    transition: transform .18s ease;
}

/* Chevron points down when open, right when closed. Bootstrap adds
   .collapsed to the toggle while the target is hidden. */
.gp-rail-group.collapsed .bi { transform: rotate(-90deg); }

.gp-rail-group:focus-visible {
    outline: 2px solid #ffffff; outline-offset: -2px; border-radius: 6px;
}

.gp-rail-link {
    position: relative;
    display: flex; align-items: center; gap: .68rem;
    padding: .55rem .8rem;
    border-radius: var(--radius-sm);
    color: var(--rail-ink-soft);
    text-decoration: none;
    font-size: .9rem; font-weight: 500;
    margin-bottom: .08rem;
    transition: background .14s ease, color .14s ease;
}

.gp-rail-link i { font-size: 1.02rem; width: 1.15rem; color: var(--rail-ink-dim); transition: color .14s ease; }

.gp-rail-link:hover { background: var(--rail-hover); color: #fff; }
.gp-rail-link:hover i { color: #fff; }

.gp-rail-link.active {
    background: var(--rail-active);
    color: #fff;
    font-weight: 650;
}

.gp-rail-link.active i { color: #fff; }

/* Left marker on the active item, which reads faster than colour alone. */
.gp-rail-link.active::before {
    content: ""; position: absolute; left: -.65rem; top: 50%;
    width: 3px; height: 20px; transform: translateY(-50%);
    background: #ffffff; border-radius: 0 3px 3px 0;
}


/* =========================================================================
   Shell
   ========================================================================= */

.gp-shell { margin-left: var(--rail-width); min-height: 100vh; display: flex; flex-direction: column; }

.gp-topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: .9rem 1.6rem;
    display: flex; align-items: center; gap: 1rem;
    position: sticky; top: 0; z-index: 1030;
}

.gp-page-title { font-size: 1.02rem; font-weight: 680; color: var(--ink); line-height: 1.2; }
.gp-page-sub   { font-size: .8rem; color: var(--ink-muted); margin-top: .08rem; }

.gp-main { padding: 1.6rem; flex: 1; }

.gp-avatar {
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--blue-soft); color: var(--blue-strong);
    display: grid; place-items: center;
    font-weight: 700; font-size: .78rem; letter-spacing: -.02em;
    flex: none;
}

.gp-who-name { font-size: .86rem; font-weight: 640; color: var(--ink); line-height: 1.15; }
.gp-who-role { font-size: .72rem; color: var(--ink-muted); }

/* =========================================================================
   Cards
   ========================================================================= */

.gp-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.gp-card-head {
    padding: .95rem 1.1rem;
    border-bottom: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}

.gp-card-title { font-size: .92rem; font-weight: 660; color: var(--ink); }

/* ---- stat tile ---- */

.gp-stat {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.05rem 1.1rem;
    height: 100%;
    display: flex; align-items: flex-start; gap: .9rem;
    overflow: hidden;
    transition: box-shadow .16s ease, transform .16s ease;
}

/* A thin blue edge, so a white card on a white-ish page still has an anchor. */
.gp-stat::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
    background: var(--blue); opacity: .85;
}

.gp-stat.is-credit::before { background: var(--credit); }
.gp-stat.is-warn::before   { background: var(--warn); }

.gp-stat:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.gp-stat-icon {
    width: 38px; height: 38px; border-radius: 10px;
    display: grid; place-items: center; font-size: 1.02rem; flex: none;
    background: var(--blue-soft); color: var(--blue);
}

.gp-stat-icon.is-credit { background: var(--credit-soft); color: var(--credit); }
.gp-stat-icon.is-debit  { background: var(--debit-soft);  color: var(--debit); }
.gp-stat-icon.is-warn   { background: var(--warn-soft);   color: var(--warn); }

/* Sentence case, not shouting. The number is the thing to read. */
.gp-stat-label { font-size: .78rem; font-weight: 500; color: var(--ink-muted); line-height: 1.2; }

.gp-stat-value {
    font-size: 1.5rem; font-weight: 720; color: var(--ink);
    letter-spacing: -.03em; line-height: 1.2; margin-top: .22rem;
    font-variant-numeric: tabular-nums;
}

.gp-stat-value .gp-unit { font-size: .92rem; font-weight: 600; color: var(--ink-muted); margin-right: .12rem; }

/* =========================================================================
   Tables
   ========================================================================= */

.gp-table { margin: 0; border-collapse: separate; border-spacing: 0; }

/* Blue header with some dimension to it.
   Three things do the work, and all three are needed:
     - a vertical gradient, so the band is not one flat slab of colour
     - a light inner edge along the top, which reads as a lit surface
     - a soft shadow below, so the rows look like they pass underneath it */
.gp-table thead th {
    background: linear-gradient(180deg, #3d86f8 0%, var(--blue) 48%, #1659c9 100%);
    border-bottom: 0;
    color: #ffffff;
    font-size: .72rem; font-weight: 650;
    letter-spacing: .055em; text-transform: uppercase;
    padding: .78rem 1.1rem;
    white-space: nowrap;
    position: relative;
    text-shadow: 0 1px 1px rgba(8, 40, 96, .28);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .22),
        0 3px 8px -3px rgba(13, 63, 153, .45);
}

/* Hairline dividers between column names, so wide tables stay structured. */
.gp-table thead th + th::before {
    content: ""; position: absolute; left: 0; top: 24%; bottom: 24%;
    width: 1px; background: rgba(255, 255, 255, .16);
}

/* The header sits inside the card as its own raised band rather than filling
   the card edge to edge. The padding on the scroll wrapper insets it, and
   rounding both ends plus a drop shadow lifts it off the surface. */
.gp-card > .table-responsive { padding: .65rem; }

.gp-table thead th:first-child { border-radius: 10px 0 0 10px; }
.gp-table thead th:last-child  { border-radius: 0 10px 10px 0; }

/* Breathing room under the band, so it reads as a separate element and not as
   the first row of the list. */
.gp-table tbody tr:first-child td { padding-top: .7rem; }

/* Row separators stop short of the edge, keeping the inset alignment. */
.gp-table tbody td:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.gp-table tbody td:last-child  { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }

.gp-table tbody td {
    padding: .45rem .85rem;
    border-bottom: 1px solid var(--line);
    font-size: .88rem; color: var(--ink-body);
    vertical-align: middle;
}

.gp-table tbody tr:last-child td { border-bottom: 0; }

/* The row lifts on hover with a blue edge, which makes a long list scannable
   without striping every other row. */
.gp-table tbody tr { transition: background .12s ease; }
.gp-table tbody tr:hover td { background: var(--blue-softer); }

.gp-table tbody tr td:first-child { box-shadow: inset 3px 0 0 transparent; transition: box-shadow .12s ease; }
.gp-table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--blue); }

/* Compact table variant — tighter padding for wide tables (11+ columns). */
.gp-table-compact thead th,
.gp-table-compact tbody td { padding: .35rem .5rem; font-size: .82rem; }

/* Truncate cell text with ellipsis. Apply to td that has a max-width set. */
.gp-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The first column is the subject of the row, so it carries more weight. */
.gp-table tbody td.gp-subject { font-weight: 620; color: var(--ink); }

/* =========================================================================
   Proportion bar
   ========================================================================= */

.gp-meter {
    display: flex; align-items: center; gap: .55rem;
}

.gp-meter-track {
    display: block;
    width: 78px; height: 6px; border-radius: 999px;
    background: var(--line); overflow: hidden; flex: none;
}

.gp-meter-fill {
    /* display:block matters. These are spans, and height on an inline element
       is ignored -- without this the bar renders empty. */
    display: block;
    height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #4d93ff 0%, var(--blue) 100%);

    /* A role holding one permission out of forty-six is about 2% of the track,
       which rounds away to nothing. Keep a sliver visible so "a little" and
       "none at all" do not look identical. */
    min-width: 3px;
}

.gp-meter-text { font-size: .83rem; color: var(--ink-body); font-variant-numeric: tabular-nums; }
.gp-meter-text .gp-meter-of { color: var(--ink-muted); font-size: .76rem; }

/* =========================================================================
   Count chip
   ========================================================================= */

.gp-count {
    display: inline-grid; place-items: center;
    min-width: 26px; height: 24px; padding: 0 .4rem;
    border-radius: 7px;
    background: var(--surface-sunk);
    border: 1px solid var(--line);
    font-size: .8rem; font-weight: 650; color: var(--ink-body);
    font-variant-numeric: tabular-nums;
}

.gp-count.is-zero { color: var(--ink-muted); font-weight: 500; }

/* =========================================================================
   Pagination
   ========================================================================= */

.gp-table-foot {
    margin: 0 .65rem .65rem;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    padding: .7rem 1.1rem;
    border-top: 1px solid var(--line);
    background: var(--surface-sunk);
    border-radius: 0 0 var(--radius) var(--radius);
}

.gp-table-count { font-size: .8rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* Laravel renders Bootstrap pagination markup; this brings it into the theme. */
.gp-table-foot .pagination { margin: 0; gap: .25rem; }

.gp-table-foot .page-link {
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    color: var(--ink-body);
    font-size: .82rem; font-weight: 550;
    padding: .28rem .6rem;
    min-width: 32px; text-align: center;
}

.gp-table-foot .page-link:hover { background: var(--blue-soft); border-color: var(--blue); color: var(--blue-strong); }
.gp-table-foot .page-link:focus { box-shadow: 0 0 0 3px var(--blue-ring); }

.gp-table-foot .page-item.active .page-link {
    background: var(--blue); border-color: var(--blue); color: #fff;
}

.gp-table-foot .page-item.disabled .page-link {
    background: var(--surface); border-color: var(--line); color: #c3ccd9;
}

.gp-ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; color: var(--ink); }

.gp-amount { font-variant-numeric: tabular-nums; font-weight: 650; }
.gp-amount.is-credit { color: var(--credit); }
.gp-amount.is-debit  { color: var(--debit); }

/* ---- empty state ---- */

.gp-empty { padding: 2.6rem 1rem; text-align: center; }
.gp-empty i { font-size: 1.7rem; color: var(--line-strong); display: block; margin-bottom: .5rem; }
.gp-empty-title { font-size: .88rem; font-weight: 640; color: var(--ink-body); }
/* =========================================================================
   Pills
   ========================================================================= */

.gp-pill {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .72rem; font-weight: 650;
    padding: .2rem .5rem; border-radius: 999px;
}

.gp-pill.is-ok     { background: var(--credit-soft); color: var(--credit); }
.gp-pill.is-bad    { background: var(--debit-soft);  color: var(--debit); }
.gp-pill.is-warn   { background: var(--warn-soft);   color: var(--warn); }
.gp-pill.is-quiet  { background: #eef2f8; color: var(--ink-muted); }
.gp-pill.is-brand  { background: var(--blue-soft); color: var(--blue-strong); }

/* =========================================================================
   Signed-out screens
   ========================================================================= */

.gp-auth {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 2rem 1rem;
    /* A soft blue wash, so the sign-in page is not a blank sheet. */
    background:
        radial-gradient(900px 440px at 50% -12%, var(--blue-soft) 0%, rgba(232, 241, 255, 0) 68%),
        var(--canvas);
}

.gp-auth-inner { width: 100%; max-width: 416px; }

.gp-auth-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    padding: 1.6rem;
}

.gp-auth-brand { display: flex; flex-direction: column; align-items: center; gap: .55rem; margin-bottom: 1.25rem; }
/* Inverted on the sign-in page: the rail's white mark would disappear against
   a light background, so here it is blue-filled with white letters. */
.gp-auth-brand .gp-logo {
    width: 46px; height: 46px; border-radius: 14px; font-size: 1.18rem;
    background: linear-gradient(140deg, var(--blue) 0%, var(--blue-deep) 100%);
    color: #fff;
    box-shadow: 0 4px 10px -2px rgba(21, 88, 204, .45);
}
.gp-auth-name { font-weight: 720; font-size: 1.14rem; color: var(--ink); letter-spacing: -.025em; }
.gp-auth-sub  { font-size: .78rem; color: var(--ink-muted); }

.gp-code-input {
    font-size: 1.4rem; letter-spacing: .42rem; text-align: center; font-weight: 650;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    padding-left: .42rem; /* offsets the trailing letter-space so text sits centred */
}

/* =========================================================================
   Forms and buttons
   ========================================================================= */

/* One type scale for forms.
   Label, input and select all sit at the same size, and the small variants
   shrink together -- previously the label was .82 while the input rendered at
   Bootstrap's .875, which read as two different fonts on the same row. */

.form-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--ink-body);
    margin-bottom: .25rem;
    letter-spacing: 0;
}

.form-control,
.form-select {
    border-color: var(--line-strong);
    border-radius: var(--radius-sm);
    padding: .45rem .7rem;
    font-size: .85rem;
    color: var(--ink);
}

.form-control-sm,
.form-select-sm {
    font-size: .82rem;
    padding: .34rem .6rem;
    border-radius: 7px;
}

/* Matches the inputs it sits beside. */
.form-control-sm + .form-text,
.col-md-4 .form-label { font-size: .78rem; }

.form-control:focus,
.form-select:focus { border-color: var(--blue); box-shadow: 0 0 0 3.5px var(--blue-ring); }

.form-text { font-size: .75rem; color: var(--ink-muted); }

.form-check-label { font-size: .85rem; }

.btn { border-radius: var(--radius-sm); font-weight: 620; font-size: .85rem; padding: .45rem .85rem; }
.btn-sm { font-size: .8rem; padding: .34rem .7rem; border-radius: 7px; }

.btn-primary {
    background: var(--blue); border-color: var(--blue);
    box-shadow: 0 1px 2px rgba(29, 110, 245, .3);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active { background: var(--blue-strong) !important; border-color: var(--blue-strong) !important; }
.btn-primary:disabled { background: #a9c6f7; border-color: #a9c6f7; box-shadow: none; }

a { color: var(--blue-strong); }
a:hover { color: var(--blue-deep); }

.alert { border-radius: var(--radius-sm); border-width: 1px; font-size: .85rem; }
.alert-info { background: var(--blue-soft); border-color: #cfe1ff; color: var(--blue-deep); }

.dropdown-menu { border-color: var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); font-size: .88rem; }
.dropdown-item:active { background: var(--blue); }

/* =========================================================================
   Phone
   ========================================================================= */

.gp-rail-toggle { display: none; }

@media (max-width: 991.98px) {
    .gp-rail { transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 2.5rem rgba(16, 36, 63, .2); }
    .gp-rail.is-open { transform: translateX(0); }
    .gp-shell { margin-left: 0; }
    .gp-rail-toggle { display: inline-flex; }
    .gp-topbar { padding: .75rem 1rem; }
    .gp-main { padding: 1rem; }
    .gp-backdrop { position: fixed; inset: 0; background: rgba(16, 36, 63, .35); z-index: 1035; }
}

/* A single-form page inside the shell. Without a cap, a three-field form
   stretches the full width of a desktop screen and becomes hard to scan. */
.gp-narrow { max-width: 540px; }

/* =========================================================================
   Row actions
   ========================================================================= */

.gp-icon-btn {
    display: inline-grid; place-items: center;
    width: 32px; height: 32px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink-body);
    font-size: .92rem;
    padding: 0;
    transition: background .14s ease, color .14s ease, border-color .14s ease;
}

.gp-icon-btn:hover { background: var(--blue-soft); border-color: var(--blue); color: var(--blue-strong); }
.gp-icon-btn.is-danger:hover { background: var(--debit-soft); border-color: var(--debit); color: var(--debit); }

/* Shown rather than hidden when an action is not available, so the row does not
   look broken. The title says why. */
.gp-icon-btn:disabled,
.gp-icon-btn.is-disabled {
    color: #c3ccd9;
    border-color: var(--line);
    background: var(--surface-sunk);
    cursor: not-allowed;
    pointer-events: auto;
}

.gp-icon-btn:disabled:hover,
.gp-icon-btn.is-disabled:hover {
    background: var(--surface-sunk);
    border-color: var(--line);
    color: #c3ccd9;
}

.gp-row-actions { display: inline-flex; gap: .35rem; justify-content: flex-end; align-items: center; }

.gp-action-menu {
    min-width: 11rem;
    padding: .35rem 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    font-size: .84rem;
}

.gp-action-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem 1rem;
    color: var(--ink-body);
}

.gp-action-menu .dropdown-item:hover { background: var(--blue-soft); color: var(--blue-strong); }
.gp-action-menu .dropdown-item.text-danger:hover { background: var(--debit-soft); color: var(--debit); }

.gp-action-menu .dropdown-divider { margin: .25rem 0; border-color: var(--line); }

/* =========================================================================
   Confirmation dialog
   =========================================================================
   SweetAlert2 brings its own look, which does not match anything else here.
   These bring it into the theme so a destructive confirmation reads as part of
   the product rather than a library someone dropped in. */

.gp-swal {
    border-radius: 14px !important;
    border: 1px solid var(--line);
    box-shadow: 0 20px 50px -20px rgba(16, 36, 63, .45) !important;
    font-family: Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
    padding-bottom: 1.1rem;
}

.gp-swal .swal2-title {
    font-size: 1.08rem; font-weight: 700; color: var(--ink);
    letter-spacing: -.02em; padding-top: .4rem;
}

.gp-swal .swal2-html-container { font-size: .9rem; color: var(--ink-body); margin-top: .4rem; }

.gp-swal .swal2-icon { width: 54px; height: 54px; margin: 1.1rem auto .4rem; }
.gp-swal .swal2-icon .swal2-icon-content { font-size: 2.1rem; }

.gp-swal .swal2-actions { gap: .5rem; margin-top: 1.1rem; }

/* Destructive confirmation uses the debit red, the same colour an outgoing
   amount uses, so the meaning is consistent across the product. */
.gp-swal .btn-danger {
    background: var(--debit); border-color: var(--debit);
    box-shadow: 0 1px 2px rgba(192, 41, 74, .3);
}

.gp-swal .btn-danger:hover { background: #a31f3e; border-color: #a31f3e; }

.gp-swal .btn-primary {
    background: var(--blue); border-color: var(--blue);
    box-shadow: 0 1px 2px rgba(29, 110, 245, .3);
}

.gp-swal .btn-primary:hover { background: var(--blue-strong); border-color: var(--blue-strong); }

.gp-swal .form-control {
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: .45rem .75rem;
    font-size: .95rem;
}
.gp-swal .form-control:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 .2rem rgba(29, 110, 245, .15);
}

/* =========================================================================
   Step indicator
   ========================================================================= */

.gp-steps { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }

.gp-step { display: flex; align-items: center; gap: .4rem; }

.gp-step + .gp-step::before {
    content: ""; width: 20px; height: 1px; background: var(--line-strong); margin-right: .4rem;
}

.gp-step-dot {
    width: 24px; height: 24px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--surface); border: 1px solid var(--line-strong);
    color: var(--ink-muted); font-size: .76rem; font-weight: 650;
    flex: none;
}

.gp-step-label { font-size: .8rem; color: var(--ink-muted); }

.gp-step.is-current .gp-step-dot { background: var(--blue); border-color: var(--blue); color: #fff; }
.gp-step.is-current .gp-step-label { color: var(--ink); font-weight: 600; }

.gp-step.is-done .gp-step-dot { background: var(--credit-soft); border-color: var(--credit); color: var(--credit); }
.gp-step.is-done .gp-step-label { color: var(--ink-body); }

/* =========================================================================
   Filter panel
   ========================================================================= */

.gp-filter-head {
    display: flex; align-items: center; gap: .5rem; width: 100%;
    padding: .8rem 1.1rem;
    background: none; border: 0; text-align: left;
    font-size: .9rem; font-weight: 640; color: var(--ink);
    cursor: pointer;
}

.gp-filter-head:hover { color: var(--blue-strong); }
.gp-filter-head > .bi:first-child { color: var(--blue); }
.gp-filter-head .bi-chevron-down { font-size: .75rem; color: var(--ink-muted); transition: transform .18s ease; }
.gp-filter-head.collapsed .bi-chevron-down { transform: rotate(-90deg); }
.gp-filter-head:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: var(--radius); }

/* ---------------------------------------------------------------------------
   Account suggestions

   The dropdown under the account search box on the credit/debit form.

   Bootstrap's .list-group-item is sized for page content, which next to a
   .form-control at .85rem reads as a different, larger font sitting inside the
   same field. These rules put the rows on the form's own scale.
   --------------------------------------------------------------------------- */

.gp-suggest {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: #fff;
    overflow: hidden auto;
    max-height: 13.5rem;
    box-shadow: 0 8px 24px rgba(16, 38, 76, .12);
}

.gp-suggest-item {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    padding: .4rem .7rem;
    font-size: .82rem;
    line-height: 1.35;
    color: var(--ink);
}

.gp-suggest-item:last-child { border-bottom: 0; }

.gp-suggest-item:hover,
.gp-suggest-item:focus { background: var(--blue-softer); }

/* The number leads, so it stays readable; the name is the thing being checked. */
.gp-suggest-item .gp-num { font-size: .82rem; color: var(--ink-muted); }
.gp-suggest-item strong { font-weight: 620; }
.gp-suggest-item .gp-suggest-role { font-size: .75rem; color: var(--ink-muted); }

.gp-suggest-empty {
    padding: .45rem .7rem;
    font-size: .78rem;
    color: var(--ink-muted);
}

/* ---------------------------------------------------------------------------
   Topbar balance

   The signed-in user's own wallet, next to their name. Business users check it
   constantly -- they cannot pay out past it -- so it is on every screen rather
   than only the wallet page.
   --------------------------------------------------------------------------- */

.gp-balance {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .65rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--blue-softer);
    color: var(--ink);
    text-decoration: none;
    line-height: 1.15;
}

.gp-balance:hover { border-color: var(--line-strong); background: var(--blue-soft); color: var(--ink); }

.gp-balance .bi { color: var(--blue); font-size: .95rem; }

.gp-balance-label {
    display: block;
    font-size: .68rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.gp-balance-value {
    display: block;
    font-size: .82rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.gp-income {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .65rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--credit-soft);
    color: var(--ink);
    text-decoration: none;
    line-height: 1.15;
}

.gp-income .bi { color: var(--credit); font-size: .95rem; }

/* On a phone the name and role already give way; the balance keeps its place
   but drops the caption. */
@media (max-width: 575.98px) {
    .gp-balance-label { display: none; }
    .gp-balance { padding: .3rem .5rem; }
    .gp-income { padding: .3rem .5rem; }
}

/* =========================================================================
   Impersonation banner
   ========================================================================= */

.gp-impersonation-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .5rem 1rem;
    background: var(--warn-soft);
    border-bottom: 2px solid var(--warn);
    color: var(--warn);
    font-size: .85rem;
    font-weight: 600;
    height: var(--impersonation-bar-h);
}

.gp-impersonation-bar strong { color: var(--ink); }

.gp-impersonation-bar .btn {
    font-size: .78rem;
    font-weight: 600;
    padding: .2rem .65rem;
}

body.is-impersonating { --impersonation-bar-h: 38px; }
body.is-impersonating .gp-rail   { top: var(--impersonation-bar-h); }
body.is-impersonating .gp-topbar { top: var(--impersonation-bar-h); }
body.is-impersonating .gp-shell  { padding-top: var(--impersonation-bar-h); }