/* Banker Portal Styles */
/* Color and type tokens live in brand-tokens.css, enqueued as a dependency. */

/*
 * Scoped. A bare `*` in a plugin stylesheet resets box-sizing on the entire
 * document, theme markup included — a plugin has no business doing that to a
 * page it does not own.
 */
.banker-login-wrapper *,
.banker-portal-wrapper * {
    box-sizing: border-box;
}

/* ============ LOGIN PAGE ============ */

/*
 * An embed, not a page.
 *
 * This was a standalone sign-in screen: full viewport height, filled with a
 * black gradient. Rendered inside a themed WordPress page that became a
 * floor-to-ceiling black slab occupying two thirds of the window, pinned to the
 * left, under a page title in the theme's default styling. The card was centred
 * inside the slab, so it did not line up with anything else on the site.
 *
 * The theme owns the page ground now. The card carries its own weight through
 * its border and shadow, and the wrapper centres itself rather than inheriting
 * whatever alignment the theme's content column happens to have.
 */
.banker-login-wrapper {
    display: flex;
    justify-content: center;
    padding: 32px 20px 64px;
}

.banker-login-card {
    background: var(--eg-surface);
    border: 1px solid var(--eg-border);
    border-radius: 12px;
    /* Softened from a 60px 0.3-alpha drop. That depth was doing the work of
       separating the card from a black ground; on white it read as a smudge. */
    box-shadow: 0 4px 16px rgba(16, 32, 48, 0.07);
    width: 100%;
    max-width: 420px;
    padding: 36px;
}

.banker-login-header {
    text-align: center;
    margin-bottom: 32px;
}

.banker-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.banker-logo img {
    max-width: 240px;
    width: 100%;
    height: auto;
}

/* Logo lockup in the portal header (dark background) */
.banker-header-logo {
    height: 34px;
    width: auto;
    display: block;
}

.banker-login-header h1 {
    font-family: var(--eg-font-heading);
    font-size: 24px;
    font-weight: 700;
    color: var(--banker-gray-900);
    margin: 0 0 8px;
}

.banker-login-header p {
    color: var(--banker-gray-500);
    margin: 0;
    font-size: 14px;
}

.banker-field {
    margin-bottom: 20px;
}

.banker-field label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--banker-gray-700);
    margin-bottom: 6px;
}

.banker-field input[type="text"],
.banker-field input[type="email"],
.banker-field input[type="password"],
.banker-field input[type="tel"],
.banker-field input[type="date"] {
    width: 100%;
    /* These three are not cosmetic defaults — they neutralise Foundation
     * 6.4.1, which the 720 theme loads site-wide and which sets
     * `height: 2.4375rem; margin: 0 0 1rem; box-shadow: inset …` on every text
     * input. The selectors above already outrank it, but only on properties
     * they actually declare. */
    height: auto;
    margin: 0;
    box-shadow: none;
    /* Declared, not inherited. Foundation sets line-height on these inputs, and
     * leaving it out makes the field height depend on whichever font happens to
     * be resolving — which is not a thing to leave to chance on a host theme
     * that ships its own. 1.5 matches .evergreen-input on the enrollment form,
     * so both surfaces size consistently. */
    line-height: 1.5;
    padding: 12px 16px;
    font-size: 16px;
    border: 1px solid var(--banker-gray-300);
    border-radius: 8px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.banker-field input:focus {
    outline: none;
    border-color: var(--banker-accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* One-click whole-month range shortcuts, above the search buttons. */
.banker-month-shortcuts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 16px 0 4px;
}

.banker-month-shortcuts-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--banker-gray-700);
    margin-right: 4px;
}

.banker-month-btn {
    padding: 7px 14px;
    margin: 0;          /* Foundation gives buttons a bottom margin. */
    line-height: 1.2;   /* Foundation sets button { line-height: 1 }. */
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    color: var(--banker-primary);
    background: #fff;
    border: 1px solid var(--banker-gray-300);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.banker-month-btn:hover {
    background: var(--eg-brand-50);
    border-color: var(--banker-accent);
}

.banker-month-btn.is-active {
    background: var(--banker-accent);
    border-color: var(--banker-accent);
    color: #fff;
}

/* Set when the result set was capped, so a partial count does not read as a
 * total. See ajax_search(). */
.banker-results-count.is-truncated {
    color: var(--eg-warning);
    font-weight: 600;
}

.banker-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--banker-gray-700);
}

.banker-checkbox input {
    width: 18px;
    height: 18px;
    margin: 0; /* Foundation sets [type=checkbox] to `margin: 0 0 1rem`. */
    cursor: pointer;
}

.banker-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: var(--banker-danger);
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 20px;
}

.banker-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2; /* Foundation sets button { line-height: 1 }. */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.banker-btn-primary {
    width: 100%;
    background: var(--banker-accent);
    color: white;
}

.banker-btn-primary:hover {
    background: var(--banker-accent-hover);
}

.banker-btn-primary:disabled {
    background: var(--banker-gray-300);
    cursor: not-allowed;
}

.banker-btn-secondary {
    background: var(--banker-gray-100);
    color: var(--banker-gray-700);
    border: 1px solid var(--banker-gray-300);
}

.banker-btn-secondary:hover {
    background: var(--banker-gray-200);
}

.banker-btn-danger {
    background: var(--banker-danger);
    color: white;
}

.banker-btn-danger:hover {
    background: #b91c1c;
}

.banker-login-footer {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--banker-gray-200);
    text-align: center;
}

.banker-login-footer p {
    font-size: 12px;
    color: var(--banker-gray-500);
    margin: 0;
}

/* ============ PORTAL PAGE ============ */

.banker-portal-wrapper {
    /* No 100vh and no page fill, for the same reason as the login wrapper: a
       full-height tinted panel inside a themed page is a band, not a
       background. Individual panels below still carry their own surfaces. */
    background: transparent;
    font-family: var(--eg-font-body);
    padding-bottom: 48px;
}

/* Header */
.banker-header {
    background: var(--banker-primary);
    color: white;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.banker-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.banker-header h1 {
    font-family: var(--eg-font-heading);
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.banker-badge {
    background: rgba(255, 255, 255, 0.15);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.banker-header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.banker-user {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    opacity: 0.9;
}

.banker-header .banker-btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 8px 16px;
    font-size: 14px;
}

.banker-header .banker-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Search Section */
.banker-search-section {
    padding: 24px;
}

.banker-search-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.banker-search-card h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--banker-gray-900);
    margin: 0 0 20px;
}

.banker-search-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.banker-search-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.banker-search-actions .banker-btn-primary {
    width: auto;
}

/* Results Section */
.banker-results-section {
    padding: 0 24px 24px;
}

.banker-results-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.banker-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--banker-gray-200);
    flex-wrap: wrap;
    gap: 12px;
}

.banker-results-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.banker-results-header h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--banker-gray-900);
    margin: 0;
}

.banker-results-count {
    font-size: 14px;
    color: var(--banker-gray-500);
}

.banker-export-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.banker-export-actions .banker-btn {
    padding: 8px 16px;
    font-size: 13px;
    width: auto;
}

.banker-results-table-wrapper {
    overflow-x: auto;
}

.banker-table {
    width: 100%;
    border-collapse: collapse;
}

.banker-table th,
.banker-table td {
    padding: 12px 16px;
    text-align: left;
    font-size: 14px;
}

.banker-table th {
    background: var(--banker-gray-50);
    font-weight: 600;
    color: var(--banker-gray-700);
    border-bottom: 1px solid var(--banker-gray-200);
    white-space: nowrap;
}

.banker-table td {
    border-bottom: 1px solid var(--banker-gray-100);
    color: var(--banker-gray-900);
}

.banker-table tr:hover td {
    background: var(--banker-gray-50);
}

.banker-table .status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    text-transform: capitalize;
}

.banker-table .status-active {
    background: #d1fae5;
    color: #065f46;
}

.banker-table .status-pending {
    background: #fef3c7;
    color: #92400e;
}

.banker-table .status-cancelled {
    background: #fee2e2;
    color: #991b1b;
}

.banker-table .btn-view {
    padding: 6px 12px;
    font-size: 13px;
}

/* Modal */
.banker-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.banker-modal-content {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.banker-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--banker-gray-200);
}

.banker-modal-header h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.banker-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--banker-gray-500);
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.banker-modal-close:hover {
    color: var(--banker-gray-900);
}

.banker-modal-body {
    padding: 24px;
}

/* Client Detail */
.client-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.client-detail-section {
    background: var(--banker-gray-50);
    border-radius: 8px;
    padding: 16px;
}

.client-detail-section.full-width {
    grid-column: 1 / -1;
}

.client-detail-section h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--banker-gray-700);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--banker-gray-200);
}

.client-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
    border-bottom: 1px solid var(--banker-gray-200);
}

.client-detail-row:last-child {
    border-bottom: none;
}

.client-detail-label {
    color: var(--banker-gray-500);
}

.client-detail-value {
    font-weight: 500;
    color: var(--banker-gray-900);
    text-align: right;
}

.ssn-reveal-section {
    margin-top: 16px;
    padding: 16px;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 8px;
}

.ssn-reveal-section p {
    font-size: 13px;
    color: #92400e;
    margin: 0 0 12px;
}

.ssn-value {
    font-family: monospace;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 2px;
}

/* Footer */
.banker-footer {
    text-align: center;
    padding: 24px;
    color: var(--banker-gray-500);
    font-size: 12px;
}

.banker-footer p {
    margin: 4px 0;
}

/* Loading spinner */
.banker-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Empty state */
.banker-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--banker-gray-500);
}

.banker-empty svg {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

/* Responsive */
@media (max-width: 768px) {
    .banker-header {
        flex-direction: column;
        text-align: center;
    }

    .banker-header-left,
    .banker-header-right {
        width: 100%;
        justify-content: center;
    }

    .banker-search-grid {
        grid-template-columns: 1fr;
    }

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

    .banker-modal-content {
        margin: 10px;
        max-height: calc(100vh - 20px);
    }

    .banker-table {
        font-size: 13px;
    }

    .banker-table th,
    .banker-table td {
        padding: 10px 12px;
    }
}

@media (max-width: 480px) {
    .banker-login-card {
        padding: 24px;
    }

    .banker-search-section,
    .banker-results-section {
        padding: 16px;
    }

    .banker-search-card,
    .banker-results-card {
        padding: 16px;
    }
}


/* ---------------------------------------------------------------------------
   Host theme layout fix, scoped by the body class the plugin adds only on the
   banker pages.

   The 720CS21 theme wraps its site header in Foundation's .grid-container but
   the content area below has none, so the row spans the full viewport with no
   gutter — which is why the page title sits flush against the left edge. And
   <main> is large-8, two thirds of that width. The theme's sidebar is large-12
   and already stacks below, so widening main takes space from nothing.

   The page title is hidden because the card states what the screen is, in the
   brand's own typeface, immediately below it.
   --------------------------------------------------------------------------- */
.evergreen-banker-page .article-header { display: none; }

.evergreen-banker-page main.main {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}

.evergreen-banker-page .inner-content {
    max-width: 1400px;
    margin-inline: auto;
}