/*
  Partner portal theme: the www.finsyte.com design system (Inter, primary blue, neutral grays,
  gray-900 footer) applied over Bootstrap 5. Tokens mirror src/styles/design-tokens.css and
  src/app/globals.css in the FinsyteWebsite repo; keep them in step when the site changes.
*/

:root {
    --fs-primary-50: #E8F2FE;
    --fs-primary-100: #D1E6FD;
    --fs-primary-200: #A3CDFB;
    --fs-primary-500: #328FF8;
    --fs-primary-600: #0A6FE6;
    --fs-primary-700: #0855B0;
    --fs-primary-800: #053B7A;
    --fs-primary-900: #032144;
    --fs-primary: var(--fs-primary-700);

    --fs-accent-50: #E8F7F2;
    --fs-accent-100: #D1EFE5;
    --fs-accent-600: #2D8264;
    --fs-accent-700: #215E49;

    --fs-plum-100: #EDE1F2;
    --fs-plum-700: #5C3666;

    --fs-neutral-50: #F8F9FA;
    --fs-neutral-100: #F1F3F5;
    --fs-neutral-200: #E9ECEF;
    --fs-neutral-300: #DEE2E6;
    --fs-neutral-500: #ADB5BD;
    --fs-neutral-600: #6C757D;
    --fs-neutral-700: #495057;
    --fs-neutral-800: #343A40;
    --fs-neutral-900: #212529;

    /* Tailwind's gray scale, which the site's header and footer use. */
    --fs-gray-100: #F3F4F6;
    --fs-gray-200: #E5E7EB;
    --fs-gray-300: #D1D5DC;
    --fs-gray-500: #6A7282;
    --fs-gray-700: #364153;
    --fs-gray-800: #1E2939;
    --fs-gray-900: #101828;

    --fs-warning: #D97706;
    --fs-danger: #DC2626;

    --fs-radius-sm: 0.375rem;
    --fs-radius: 0.5rem;
    --fs-radius-lg: 0.75rem;
    --fs-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --fs-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --fs-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    --fs-header-height: 4rem;

    /* Bootstrap takes its theme from these. */
    --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.6;
    --bs-body-color: var(--fs-neutral-700);
    --bs-body-bg: #ffffff;
    --bs-heading-color: var(--fs-neutral-800);
    --bs-secondary-color: var(--fs-neutral-600);
    --bs-border-color: var(--fs-neutral-200);
    --bs-border-radius: var(--fs-radius);
    --bs-border-radius-sm: var(--fs-radius-sm);
    --bs-border-radius-lg: var(--fs-radius-lg);
    --bs-link-color: var(--fs-primary);
    --bs-link-color-rgb: 8, 85, 176;
    --bs-link-hover-color: var(--fs-primary-800);
    --bs-link-hover-color-rgb: 5, 59, 122;
    --bs-primary: var(--fs-primary);
    --bs-primary-rgb: 8, 85, 176;
    --bs-success: var(--fs-accent-600);
    --bs-success-rgb: 45, 130, 100;
    --bs-danger: var(--fs-danger);
    --bs-danger-rgb: 220, 38, 38;
    --bs-warning: var(--fs-warning);
    --bs-warning-rgb: 217, 119, 6;
    --bs-focus-ring-color: rgba(8, 85, 176, 0.25);
}

html {
    scroll-padding-top: 5rem;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--fs-neutral-700);
    background: #ffffff;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

:focus-visible {
    outline: 2px solid var(--fs-primary);
    outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--fs-neutral-800);
    font-weight: 700;
    letter-spacing: -0.01em;
}

h1, .h1 { font-size: 2rem; }
h2, .h2 { font-size: 1.5rem; }
h3, .h3 { font-size: 1.5rem; }
h4, .h4 { font-size: 1.25rem; }
h5, .h5 { font-size: 1.125rem; font-weight: 600; }
h6, .h6 { font-size: 1rem; font-weight: 600; }

@media (min-width: 768px) {
    h1, .h1 { font-size: 2.25rem; }
    h3, .h3 { font-size: 1.75rem; }
}

.text-muted {
    color: var(--fs-neutral-600) !important;
}

/* ---- Page frame: the site's `container mx-auto px-4 sm:px-6 lg:px-8` ---- */

.site-container {
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1rem;
}

@media (min-width: 640px) { .site-container { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .site-container { padding-inline: 2rem; } }

.site-main {
    flex: 1 0 auto;
    padding-block: 2rem 4rem;
}

/* ---- Header: sticky, white, 4rem tall, hairline bottom border ---- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #ffffff;
    border-bottom: 1px solid var(--fs-gray-100);
}

.site-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: var(--fs-header-height);
}

.site-brand {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex-shrink: 0;
    color: var(--fs-neutral-800);
}

.site-brand:hover {
    text-decoration: none;
}

.site-brand img {
    display: block;
    width: 140px;
    height: 40px;
}

.site-brand__portal {
    padding-left: 0.875rem;
    border-left: 1px solid var(--fs-gray-200);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fs-neutral-600);
    white-space: nowrap;
    line-height: 1.2;
}

.site-nav {
    display: none;
    align-items: center;
    gap: 0.25rem 1.5rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.site-nav__link {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--fs-gray-700);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.site-nav__link:hover {
    color: var(--fs-primary);
    text-decoration: none;
}

.site-nav__link[aria-current="page"] {
    color: var(--fs-primary-700);
    background: var(--fs-primary-100);
}

.site-actions {
    display: none;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.site-user {
    font-size: 0.875rem;
    color: var(--fs-gray-500);
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border: 0;
    border-radius: var(--fs-radius-sm);
    background: transparent;
    color: var(--fs-gray-700);
}

.site-menu-toggle:hover {
    color: var(--fs-primary);
    background: var(--fs-gray-100);
}

.site-menu-toggle svg {
    width: 1.5rem;
    height: 1.5rem;
}

.site-menu-toggle[aria-expanded="true"] .site-menu-toggle__open,
.site-menu-toggle[aria-expanded="false"] .site-menu-toggle__close {
    display: none;
}

.site-mobile-menu {
    border-top: 1px solid var(--fs-gray-100);
    padding-block: 1rem;
}

.site-mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.25rem;
}

.site-mobile-menu__link {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: var(--fs-radius-sm);
    font-size: 1rem;
    font-weight: 500;
    color: var(--fs-gray-700);
}

.site-mobile-menu__link:hover {
    color: var(--fs-primary);
    background: var(--fs-neutral-50);
    text-decoration: none;
}

.site-mobile-menu__link[aria-current="page"] {
    color: var(--fs-primary);
    background: rgba(8, 85, 176, 0.05);
}

.site-mobile-menu__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 0.75rem 0;
    margin-top: 0.75rem;
    border-top: 1px solid var(--fs-gray-100);
}

@media (min-width: 1024px) {
    .site-nav,
    .site-actions {
        display: flex;
    }

    .site-menu-toggle,
    .site-mobile-menu {
        display: none !important;
    }
}

/* ---- Footer: the site's, with absolute links ---- */

.site-footer {
    background: var(--fs-gray-900);
    color: #ffffff;
    margin-top: auto;
}

.site-footer__inner {
    padding-block: 3rem;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.site-footer__nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 640px) {
    .site-footer__nav { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
    .site-footer__grid { grid-template-columns: 1fr 3fr; }
}

.site-footer__logo {
    display: inline-block;
}

.site-footer__logo img {
    width: 120px;
    height: 35px;
    filter: brightness(0) invert(1);
}

.site-footer p {
    margin: 0;
}

.site-footer__tagline {
    margin-top: 1rem !important;
    color: var(--fs-gray-300);
    font-size: 0.875rem;
}

.site-footer__contact {
    margin-top: 1rem;
    font-size: 0.875rem;
    display: grid;
    gap: 0.25rem;
}

.site-footer h3 {
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.site-footer ul {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.site-footer a {
    color: var(--fs-gray-300);
    font-size: 0.875rem;
    transition: color 0.15s ease;
}

.site-footer a:hover {
    color: #ffffff;
    text-decoration: none;
}

.site-footer__bottom {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--fs-gray-800);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

.site-footer__bottom p {
    color: var(--fs-gray-300);
    font-size: 0.875rem;
}

.site-footer__legal {
    display: flex;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .site-footer__bottom {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

/* ---- Bootstrap components in the site's clothes ---- */

.btn {
    --bs-btn-font-weight: 500;
    --bs-btn-border-radius: var(--fs-radius);
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: 0.625rem;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-focus-box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--fs-primary);
}

.btn:hover {
    text-decoration: none;
}

.btn-sm {
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-border-radius: var(--fs-radius);
}

.btn-lg {
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-padding-y: 0.75rem;
    --bs-btn-font-size: 1rem;
    --bs-btn-border-radius: var(--fs-radius);
}

.btn-primary {
    --bs-btn-bg: var(--fs-primary);
    --bs-btn-border-color: var(--fs-primary);
    --bs-btn-hover-bg: var(--fs-primary-800);
    --bs-btn-hover-border-color: var(--fs-primary-800);
    --bs-btn-active-bg: var(--fs-primary-900);
    --bs-btn-active-border-color: var(--fs-primary-900);
    --bs-btn-disabled-bg: var(--fs-primary);
    --bs-btn-disabled-border-color: var(--fs-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--fs-primary);
    --bs-btn-border-color: var(--fs-primary);
    --bs-btn-hover-bg: var(--fs-primary);
    --bs-btn-hover-border-color: var(--fs-primary);
    --bs-btn-active-bg: var(--fs-primary-800);
    --bs-btn-active-border-color: var(--fs-primary-800);
    --bs-btn-border-width: 2px;
}

.btn-success {
    --bs-btn-bg: var(--fs-accent-600);
    --bs-btn-border-color: var(--fs-accent-600);
    --bs-btn-hover-bg: var(--fs-accent-700);
    --bs-btn-hover-border-color: var(--fs-accent-700);
    --bs-btn-active-bg: var(--fs-accent-700);
    --bs-btn-active-border-color: var(--fs-accent-700);
}

.btn-outline-secondary,
.btn-secondary,
.btn-light {
    --bs-btn-color: var(--fs-gray-700);
    --bs-btn-bg: var(--fs-gray-100);
    --bs-btn-border-color: var(--fs-gray-100);
    --bs-btn-hover-color: var(--fs-neutral-900);
    --bs-btn-hover-bg: var(--fs-gray-200);
    --bs-btn-hover-border-color: var(--fs-gray-200);
    --bs-btn-active-color: var(--fs-neutral-900);
    --bs-btn-active-bg: var(--fs-gray-200);
    --bs-btn-active-border-color: var(--fs-gray-200);
}

.btn-outline-danger {
    --bs-btn-border-width: 2px;
}

.btn-link {
    --bs-btn-color: var(--fs-primary);
    --bs-btn-hover-color: var(--fs-primary-800);
    --bs-btn-font-weight: 500;
}

.card {
    --bs-card-border-color: var(--fs-neutral-200);
    --bs-card-border-radius: var(--fs-radius-lg);
    --bs-card-inner-border-radius: calc(var(--fs-radius-lg) - 1px);
    --bs-card-spacer-y: 1.5rem;
    --bs-card-spacer-x: 1.5rem;
    --bs-card-cap-bg: transparent;
    --bs-card-cap-padding-y: 1rem;
    box-shadow: var(--fs-shadow-sm);
}

.card-header {
    font-weight: 600;
    color: var(--fs-neutral-800);
}

.card .h3 {
    color: var(--fs-neutral-900);
}

.table {
    --bs-table-color: var(--fs-neutral-700);
    --bs-table-border-color: var(--fs-neutral-200);
    --bs-table-striped-bg: var(--fs-neutral-50);
    --bs-table-hover-bg: var(--fs-primary-50);
    font-size: 0.9375rem;
}

.table > thead th {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--fs-neutral-600);
    border-bottom-width: 1px;
    white-space: nowrap;
}

.table > :not(caption) > * > * {
    padding: 0.75rem 0.75rem;
}

.table-sm > :not(caption) > * > * {
    padding: 0.5rem 0.625rem;
}

.form-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--fs-neutral-800);
    margin-bottom: 0.375rem;
}

.form-control,
.form-select {
    border-color: var(--fs-neutral-300);
    border-radius: var(--fs-radius);
    padding: 0.5rem 0.75rem;
    color: var(--fs-neutral-900);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--fs-primary-500);
    box-shadow: 0 0 0 3px rgba(50, 143, 248, 0.25);
}

.form-control::placeholder {
    color: var(--fs-neutral-500);
}

.form-text {
    color: var(--fs-neutral-600);
}

.form-check-input:checked {
    background-color: var(--fs-primary);
    border-color: var(--fs-primary);
}

.alert {
    --bs-alert-border-radius: var(--fs-radius-lg);
    border-width: 1px;
}

.alert-success {
    --bs-alert-color: var(--fs-accent-700);
    --bs-alert-bg: var(--fs-accent-50);
    --bs-alert-border-color: var(--fs-accent-100);
}

.alert-info,
.alert-primary {
    --bs-alert-color: var(--fs-primary-800);
    --bs-alert-bg: var(--fs-primary-50);
    --bs-alert-border-color: var(--fs-primary-100);
}

.alert-warning {
    --bs-alert-color: #92400E;
    --bs-alert-bg: #FFFBEB;
    --bs-alert-border-color: #FDE68A;
}

.alert-danger {
    --bs-alert-color: #991B1B;
    --bs-alert-bg: #FEF2F2;
    --bs-alert-border-color: #FECACA;
}

.badge {
    --bs-badge-font-weight: 600;
    --bs-badge-border-radius: 9999px;
    --bs-badge-padding-x: 0.625rem;
    --bs-badge-padding-y: 0.25rem;
    letter-spacing: 0.01em;
}

.text-bg-primary {
    background-color: var(--fs-primary-100) !important;
    color: var(--fs-primary-700) !important;
}

.text-bg-success {
    background-color: var(--fs-accent-100) !important;
    color: var(--fs-accent-700) !important;
}

.text-bg-secondary {
    background-color: var(--fs-neutral-100) !important;
    color: var(--fs-neutral-700) !important;
}

.text-bg-warning {
    background-color: #FEF3C7 !important;
    color: #92400E !important;
}

.text-bg-danger {
    background-color: #FEE2E2 !important;
    color: #991B1B !important;
}

.text-bg-info {
    background-color: var(--fs-plum-100) !important;
    color: var(--fs-plum-700) !important;
}

.text-bg-dark {
    background-color: var(--fs-neutral-800) !important;
    color: #ffffff !important;
}

.text-bg-light {
    background-color: var(--fs-neutral-100) !important;
    color: var(--fs-neutral-700) !important;
}

.progress {
    --bs-progress-height: 0.5rem;
    --bs-progress-bg: var(--fs-neutral-200);
    --bs-progress-bar-bg: var(--fs-primary);
    --bs-progress-border-radius: 9999px;
}

.list-group {
    --bs-list-group-border-color: transparent;
    --bs-list-group-border-radius: var(--fs-radius);
    --bs-list-group-item-padding-x: 0.75rem;
    --bs-list-group-item-padding-y: 0.5rem;
    --bs-list-group-action-hover-bg: var(--fs-neutral-50);
    --bs-list-group-action-hover-color: var(--fs-primary);
    --bs-list-group-active-bg: var(--fs-primary-100);
    --bs-list-group-active-color: var(--fs-primary-700);
    --bs-list-group-active-border-color: transparent;
    gap: 0.125rem;
}

.list-group-item {
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--fs-radius) !important;
    color: var(--fs-gray-700);
}

.list-group-item:hover {
    text-decoration: none;
}

.nav-tabs {
    --bs-nav-tabs-border-color: var(--fs-neutral-200);
    --bs-nav-tabs-link-active-color: var(--fs-primary-700);
    --bs-nav-tabs-link-active-border-color: var(--fs-neutral-200) var(--fs-neutral-200) #ffffff;
    --bs-nav-link-color: var(--fs-gray-700);
    --bs-nav-link-hover-color: var(--fs-primary);
    --bs-nav-link-font-size: 0.875rem;
    --bs-nav-link-font-weight: 500;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--fs-primary-100);
    --bs-nav-pills-link-active-color: var(--fs-primary-700);
    --bs-nav-pills-border-radius: 9999px;
    --bs-nav-link-color: var(--fs-gray-700);
    --bs-nav-link-hover-color: var(--fs-primary);
    --bs-nav-link-font-size: 0.875rem;
    --bs-nav-link-font-weight: 500;
}

.breadcrumb {
    --bs-breadcrumb-font-size: 0.875rem;
    --bs-breadcrumb-divider-color: var(--fs-neutral-500);
    --bs-breadcrumb-item-active-color: var(--fs-neutral-600);
}

.pagination {
    --bs-pagination-color: var(--fs-primary);
    --bs-pagination-active-bg: var(--fs-primary);
    --bs-pagination-active-border-color: var(--fs-primary);
    --bs-pagination-border-radius: var(--fs-radius);
}

hr {
    color: var(--fs-neutral-200);
    opacity: 1;
}

/* ---- Portal-specific ---- */

.signin-panel {
    background: #ffffff;
    border: 1px solid var(--fs-gray-200);
    border-radius: var(--fs-radius-lg);
    box-shadow: var(--fs-shadow-sm);
    padding: 1.5rem;
}

@media (min-width: 768px) {
    .signin-panel {
        padding: 2rem;
    }
}

.signin-lead {
    font-size: 1.125rem;
    color: var(--fs-neutral-600);
    line-height: 1.65;
    max-width: 36rem;
}

.deal-timeline-date {
    min-width: 8.5rem;
}

.text-prewrap {
    white-space: pre-line;
}