.page_wrapper {
    width: 100%;
}

header {
    position: sticky;
    top: 0;
    z-index: 2000;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid #e4ecf8;
}

header.fixed {
    box-shadow: 0 8px 20px rgba(17, 56, 114, 0.1);
}

.marketing-header {
    background: transparent;
    border-bottom: 0;
}

.marketing-header-inner {
    max-width: 1450px;
    padding-left: 10px;
    padding-right: 10px;
}

.portal-header-inner {
    max-width: 1450px;
    padding-left: 10px;
    padding-right: 10px;
}

.marketing-brand-row {
    padding-bottom: 4px;
    align-items: center;
}

.marketing-menu-collapse {
    justify-content: flex-end;
    margin-left: auto;
    flex-grow: 1;
}

.marketing-menu-panel {
    background: transparent;
    border: 0;
    border-radius: 16px;
    box-shadow: none;
    padding: 6px 8px;
}

.navbar {
    padding: 12px 0;
}

.navbar-brand {
    margin-right: 10px;
    display: inline-flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
    min-height: 36px;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: #0f3d80;
    font-size: 0.75em;
    line-height: 1;
}

.brand-mark img {
    width: 30px;
    height: auto;
}

.navbar-brand,
.navbar-brand:hover,
.navbar-brand:focus,
.navbar-brand:active {
    text-decoration: none !important;
}

.marketing-header .navbar-brand,
.marketing-header .navbar-brand:hover,
.marketing-header .navbar-brand:focus {
    color: #0f3d80;
    text-decoration: none;
}

.navbar-expand-lg .navbar-nav {
    align-items: center;
}

.navbar-expand-lg .navbar-nav .nav-link {
    padding: 5px 10px;
}

.navbar-toggler {
    border: 1px solid #b8cff0;
    border-radius: 10px;
}

.navbar-toggler:focus {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(42, 119, 216, 0.18);
}

.toggle-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 4px;
}

.toggle-bar {
    width: 18px;
    height: 2px;
    border-top: 2px solid #2a77d8;
    position: relative;
    display: block;
}

.toggle-bar::before,
.toggle-bar::after {
    content: "";
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: #2a77d8;
}

.toggle-bar::before {
    top: -6px;
}

.toggle-bar::after {
    top: 4px;
}

.banner_section {
    margin-top: 18px;
}

.banner_section .container {
    max-width: 1200px;
}

.homepage_app_image {
    width: 100%;
    max-width: 560px;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 20px;
    box-shadow: 0 18px 38px rgba(17, 56, 114, 0.18);
}

.homepage-public {
    background: #f4f8ff;
}

body.homepage-public {
    background: #f4f8ff !important;
}

.homepage-public .container-fluid,
.homepage-public main,
.homepage-public .page_wrapper {
    background: #f4f8ff !important;
}

.homepage-public .marketing-header {
    background: rgba(244, 248, 255, 0.93);
    backdrop-filter: blur(8px);
}

.homepage-public header {
    background: rgba(244, 248, 255, 0.93);
    border-bottom: 1px solid #d9e7fb;
}

.homepage-public .banner_section {
    margin-top: 56px;
}

.homepage-public .banner_section .banner_text {
    margin-top: -40px;
}

.homepage-public .homepage-hero-copy .phase1-title {
    font-size: 52px;
    line-height: 1.05;
    letter-spacing: -0.6px;
}

.homepage-public .homepage-hero-copy .phase1-subtitle {
    font-size: 32px;
    line-height: 1.12;
}

.homepage-public .homepage_app_image {
    width: 700px;
    max-width: 100%;
    border-radius: 16px;
    box-shadow: none;
}

.homepage-cta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
    margin-bottom: 8px;
}

.homepage-cta-row .dropdown {
    margin: 0;
}

.homepage-openportal-btn {
    width: 220px;
    min-width: 220px;
    height: 46px;
    justify-content: center;
}

.homepage-download-btn {
    width: 220px;
    min-width: 220px;
    height: 46px;
    justify-content: center;
    font-weight: 600;
}

.homepage-legal-note {
    margin: 10px auto 0;
    max-width: 520px;
    text-align: center;
    color: #677b9a;
    font-size: 12px;
    line-height: 1.45;
}

.homepage-legal-note a {
    color: #566f96;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.homepage-legal-note a:hover,
.homepage-legal-note a:focus {
    color: #294f86;
}

.homepage-download-menu {
    min-width: 220px;
    border: 1px solid #d7e3f6;
    border-radius: 12px;
    box-shadow: 0 14px 30px rgba(17, 56, 114, 0.12);
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.98);
    transform-origin: top center;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
}

.homepage-download-wrap .dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.homepage-download-menu .dropdown-item {
    border-radius: 8px;
    color: #2f3a4a;
}

.homepage-download-menu .dropdown-item:hover {
    background: #edf4ff;
    color: #114c9e;
}

.homepage-cta-icon {
    width: 16px;
    height: 16px;
}

.homepage-cta-icon-light {
    filter: brightness(0) invert(1);
}

.homepage-public footer .top_footer {
    background: #429bf5;
    border-top: 0;
    padding: 30px 0 60px;
}

.homepage-public footer .top_footer h3,
.homepage-public footer .top_footer h6,
.homepage-public footer .top_footer p,
.homepage-public footer .top_footer li,
.homepage-public footer .top_footer a {
    color: #ffffff;
}

.homepage-public footer .top_footer a:hover {
    color: #eaf3ff;
}

.homepage-public .bottom_footer {
    border-top: 0;
    background: #429bf5;
    padding-top: 0;
}

.homepage-public .bottom_footer_copyrighttext {
    color: #e8f2ff;
}

footer .top_footer {
    margin-top: 30px;
    border-top: 1px solid #dbe5f6;
    padding: 28px 0 16px;
}

footer .top_footer h3 {
    color: #153f79;
    font-size: 18px;
    margin-bottom: 8px;
}

footer .top_footer h6,
footer .top_footer p,
footer .top_footer li,
footer .top_footer a {
    color: #2f3a4a;
}

footer .top_footer ul {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

footer .top_footer li + li {
    margin-top: 6px;
}

footer .top_footer a:hover {
    color: #114c9e;
    text-decoration: none;
}

.bottom_footer {
    border-top: 1px solid #e3ebf8;
    padding: 12px 0 4px;
}

.bottom_footer_copyrighttext {
    margin: 0;
    color: #5f6f86;
    font-size: 13px;
}

#testimonial-container {
    height: 148px;
    overflow: hidden;
    position: relative;
    max-width: none;
    margin: 0;
}

.testimonial {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 2px 6px 0;
    box-sizing: border-box;
    text-align: left;
}

.homepage-testimonials-wrap {
    margin: 22px auto 8px;
    max-width: 1200px;
    padding: 10px 12px 8px;
    background: #ffffff;
}

.homepage-testimonials-layout {
    display: grid;
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.homepage-testimonials-head {
    margin: 4px 0 0;
    padding-right: 8px;
}

.homepage-testimonials-head h3 {
    margin: 0;
    color: #0f315f;
    font-size: 22px;
    font-weight: 700;
}

.homepage-testimonials-head p {
    margin: 6px 0 0;
    color: #496282;
    font-size: 14px;
}

.testimonial-card {
    background: #f8fbff;
    border: 1px solid #d8e5fa;
    border-radius: 16px;
    box-shadow: none;
    width: 100%;
    height: auto;
    min-height: 0;
    box-sizing: border-box;
    padding: 8px 10px 5px;
    display: flex;
    flex-direction: column;
}

.testimonial .content {
    margin: 0;
    padding: 0;
}

.testimonial-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.testimonial .logo {
    max-width: 76px;
    max-height: 16px;
    margin-bottom: 0;
}

.testimonial .heading {
    font-weight: 600;
    margin: 0;
    font-size: 15px;
    color: #113764;
}

.testimonial .text {
    margin-bottom: 4px;
    font-size: 13px;
    color: #2b3748;
    line-height: 1.35;
    overflow: hidden;
}

.testimonial-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* Force compact bottom spacing for the home reviews shell and inner pane */
.homepage-testimonials-wrap.phase1-surface {
    padding-bottom: 5px !important;
}

.homepage-testimonials-wrap #testimonial-container,
.homepage-testimonials-wrap .testimonial-card {
    margin-bottom: 0 !important;
}

.testimonial .customer-info {
    font-style: normal;
    font-size: 11px;
    color: #425b7d;
    font-weight: 500;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.testimonial-website {
    margin-top: 0;
    color: #1a4f95;
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.testimonial-website:hover {
    color: #0f3d80;
    text-decoration: none;
}

/* Customer logos - "Some of our customers" (inside reviews section, gentle scrolling marquee) */
.homepage-customer-logos-section {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 0;
    padding: 10px 14px 12px;
    background: #ffffff;
    border-radius: 12px;
}

.homepage-customer-logos-in-reviews {
    margin-top: 0;
}

.homepage-customer-logos-layout {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
}

.homepage-customer-logos-head {
    margin: 0;
    flex-shrink: 0;
}

.homepage-customer-logos-head h3 {
    margin: 0;
    color: #0f315f;
    font-size: 15px;
    font-weight: 700;
}

.homepage-customer-logos-strip {
    overflow: hidden;
    flex: 1;
    min-width: 0;
    min-height: 58px;
    background: #ffffff;
    border-radius: 10px;
}

.homepage-customer-logos-marquee-track {
    display: flex;
    width: max-content;
    animation: homepage-customer-logos-scroll 50s linear infinite;
}

.homepage-customer-logos-marquee-track:hover {
    animation-play-state: paused;
}

@keyframes homepage-customer-logos-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.homepage-customer-logos-marquee-part {
    display: flex;
    align-items: center;
    gap: 16px 20px;
    flex-shrink: 0;
    padding: 0 10px;
}

.homepage-customer-logo-cell {
    width: 112px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    background: #ffffff !important;
    border-radius: 10px;
    padding: 6px;
    box-sizing: border-box;
}

.homepage-customer-logo-cell a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #ffffff !important;
    border-radius: 8px;
}

.homepage-customer-logo-cell img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.server-error-container {
    margin: 40px;
    border-radius: 10px;
}

.badge-outline {
    color: #6a7687;
    border: 1px dashed #9da9ba;
    background-color: transparent;
}

.spinning-ring {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.spinning-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    margin: 8px;
    border: 8px solid #429bf5;
    border-radius: 50%;
    animation: spinning-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #429bf5 transparent transparent transparent;
}

.spinning-ring div:nth-child(1) {
    animation-delay: -0.45s;
}

.spinning-ring div:nth-child(2) {
    animation-delay: -0.3s;
}

.spinning-ring div:nth-child(3) {
    animation-delay: -0.15s;
}

@keyframes spinning-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.site_optimised_for_desktop_message {
    margin-top: 4px;
    border-radius: 12px;
    border: 1px solid #dae4f5;
    background: #f4f8ff;
    color: #2a3b55;
    font-size: 13px;
}

.portal-top-nav {
    width: 100%;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.portal-top-nav .nav-item::before,
.portal-top-nav .nav-item:before,
.portal-top-nav .nav-item::after,
.portal-top-nav .nav-item:after {
    content: none !important;
    display: none !important;
}

.portal-top-nav .nav-item {
    background: transparent !important;
}

.portal-package-item {
    display: flex;
    align-items: center;
}

.portal-user-menu {
    margin-left: 0;
}

.portal-user-menu-toggle {
    border-radius: 12px;
    border: 1px solid #d4e1f5;
    background: #f8fbff;
    color: #1f3551 !important;
    padding: 7px 10px !important;
    text-decoration: none !important;
}

.portal-user-menu-toggle:hover,
.portal-user-menu-toggle:focus {
    color: #114c9e !important;
    background: #edf4ff;
    text-decoration: none !important;
    box-shadow: none !important;
}

.portal-user-menu-dropdown {
    border: 1px solid #d7e3f6;
    border-radius: 14px;
    box-shadow: 0 14px 30px rgba(17, 56, 114, 0.12);
    padding: 8px;
    min-width: 220px;
}

.portal-user-menu-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    border-radius: 10px;
    color: #2f3a4a;
    font-weight: 500;
    padding: 9px 11px;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
    text-decoration: none !important;
}

.portal-user-menu-dropdown .dropdown-item:hover {
    background: #edf4ff;
    color: #114c9e;
    transform: translateX(2px);
    text-decoration: none !important;
}

.portal-user-menu-dropdown .dropdown-item:focus,
.portal-user-menu-dropdown .dropdown-item:active,
.portal-user-menu-dropdown .dropdown-item:visited {
    text-decoration: none !important;
}

.portal-package-badge {
    margin-left: 10px;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #0f3d80;
    background: #e6f0ff;
    border: 1px solid #c5daf7;
}

.phase1-surface {
    background: #f8fbff;
    border: 1px solid #dce7f8;
    border-radius: 18px;
    box-shadow: 0 12px 26px rgba(17, 56, 114, 0.08);
    padding: 18px;
}

.phase1-title {
    color: #0d315f;
    font-weight: 700;
}

.phase1-subtitle {
    color: #587095;
}

.phase1-pill-link {
    display: inline-block;
    border-radius: 999px;
    background: #e6efff;
    color: #19498f;
    border: 1px solid #bfd5fa;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 11px;
    text-decoration: none;
    margin-right: 8px;
    margin-bottom: 8px;
}

.phase1-pill-link:hover {
    text-decoration: none;
    color: #19498f;
    background: #dce9ff;
}

.phase1-hero-links {
    margin-top: 14px;
}

.fav-hidden {
    display: none;
}

.fav-fixed {
    position: fixed;
}

.fav-mt-10 {
    margin-top: 10px;
}

.fav-icon-16 {
    width: 16px;
}

.fav-icon-18 {
    width: 18px;
}

.fav-icon-30 {
    width: 30px;
}

.fav-icon-text {
    margin-top: -2px;
    margin-right: 5px;
}

.fav-icon-text-low {
    margin-top: -4px;
    margin-right: 5px;
}

.phase1-table-shell {
    background: #fff;
    border: 1px solid #d7e3f6;
    border-radius: 14px;
    padding: 12px;
    transition: opacity 0.26s ease, transform 0.26s ease;
}

.phase1-table-shell.fav-filter-anim {
    opacity: 0.32;
    transform: translateY(4px);
}

.phase1-table-shell.fav-sort-anim {
    opacity: 0.88;
    transform: translateY(2px);
}

#favs tbody tr.fav-sort-row-anim {
    opacity: 0.2;
    transform: translateY(8px);
}

#favs tbody tr.fav-sort-row-anim.fav-sort-row-anim-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.34s ease, transform 0.34s ease;
}

.phase1-search-sidebar .blog_inner_pannel {
    border-radius: 14px;
    border: 1px solid #d7e3f6;
    box-shadow: none;
}

/* Kept local to phase 1 usage in favourites partials */
.portal-ios-card {
    background: #f8fbff;
    border: 1px solid #dce7f8;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 14px 30px rgba(17, 56, 114, 0.08);
}

.portal-ios-list-card {
    display: block;
    text-decoration: none;
    background: #ffffff;
    border: 1px solid #d7e3f6;
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 10px;
}

.portal-ios-list-card:hover {
    text-decoration: none;
    border-color: #c6daf6;
    background: #fbfdff;
}

.fav-page-grid {
    row-gap: 10px;
    align-items: flex-start;
}

.fav-main-layout {
    max-width: 1450px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;
    padding-right: 10px;
}

.fav-right-pane {
    margin-right: 0;
}

.fav-table-scroll {
    max-height: calc(100vh - 360px);
    overflow-y: auto;
    /* auto, not hidden: with three date columns the table can be wider than a narrow viewport, and
       the date cells are white-space:nowrap so they cannot squeeze below their content. hidden
       would silently clip the VAT column off the right-hand edge instead of letting it scroll.
       On a wide screen the table still fits, so no horizontal scrollbar appears. */
    overflow-x: auto;
    border-radius: 12px;
}

/* Always-visible scrollbar for the favourites table. macOS (and trackpad users generally) get
   overlay scrollbars that stay hidden until you start scrolling, so nothing told users this box
   scrolls. Giving it an explicit ::-webkit-scrollbar style makes Chrome, Edge and Safari draw a
   permanent classic scrollbar instead of the overlay one.
   Don't add the standard scrollbar-width / scrollbar-color to this element for those browsers:
   Chrome 121+ ignores every ::-webkit-scrollbar rule on an element that sets either. */
.fav-table-scroll::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.fav-table-scroll::-webkit-scrollbar-track {
    background: #eef3fa;
    border-radius: 10px;
}

.fav-table-scroll::-webkit-scrollbar-thumb {
    background: #b7c8e0;
    border-radius: 10px;
    border: 2px solid #eef3fa;
}

.fav-table-scroll::-webkit-scrollbar-thumb:hover {
    background: #8fa8cc;
}

.fav-table-scroll::-webkit-scrollbar-corner {
    background: transparent;
}

/* Firefox has no ::-webkit-scrollbar; give it the standard properties instead. On macOS with
   "show scroll bars: automatically" Firefox still follows the system and may keep them overlaid. */
@supports not selector(::-webkit-scrollbar) {
    .fav-table-scroll {
        scrollbar-width: thin;
        scrollbar-color: #b7c8e0 #eef3fa;
    }
}

.fav-left-pane {
    padding: 18px 16px;
}

.fav-summary-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
    font-size: 14px;
}

.fav-summary-table td {
    background: #ffffff;
    border: 1px solid #dce7f8;
    border-radius: 10px;
    padding: 9px 11px;
    color: #1f3551;
}

.fav-summary-table .fav-summary-heading td {
    font-weight: 700;
    color: #0d315f;
    background: #edf4ff;
    border-color: #c8dcfb;
}

.fav-side-title,
.modern-side-title {
    color: #0d315f;
    font-weight: 700;
    margin-bottom: 8px;
}

.fav-side-link-wrap + .fav-side-link-wrap,
.modern-side-link-wrap + .modern-side-link-wrap {
    margin-top: 8px;
}

.fav-side-link,
.modern-side-link {
    display: block;
    text-decoration: none;
    color: #103b77;
    background: #ffffff;
    border: 1px solid #d7e3f6;
    border-radius: 12px;
    padding: 8px 10px;
    font-weight: 700;
}

.fav-side-link:hover,
.modern-side-link:hover {
    text-decoration: none;
    color: #0f3d80;
    background: #f7faff;
}

.modern-side-link-featured {
    background: linear-gradient(135deg, #1d63c8 0%, #123f80 100%);
    border-color: #123f80;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 7px;
}

.modern-side-link-featured:hover {
    color: #ffffff;
    background: linear-gradient(135deg, #245faf 0%, #11386e 100%);
}

.modern-side-link-badge {
    margin-left: auto;
    background: #ffd75d;
    color: #5b3a00;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.lead-gen-shell {
    padding: 14px;
}

.lead-gen-top-alert {
    margin-bottom: 10px;
}

.lead-gen-header {
    margin-bottom: 12px;
}

.lead-gen-title {
    color: #0d315f;
    margin-bottom: 4px;
    font-size: 20px;
}

.lead-gen-subtitle {
    color: #637fa5;
    margin-bottom: 0;
    font-size: 13px;
}

.lead-gen-card {
    border: 1px solid #d8e5f8;
    border-radius: 12px;
    padding: 11px;
    background: #ffffff;
    margin-bottom: 10px;
    position: relative;
}

.lead-gen-card:last-child {
    margin-bottom: 0;
}

.lead-gen-card-unified {
    border-color: #c8dcfb;
}

.lead-gen-card-head {
    display: flex;
    gap: 9px;
    margin-bottom: 8px;
}

.lead-gen-card-index {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 999px;
    background: #174f9f;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.lead-gen-card-title {
    margin: 0;
    color: #0d315f;
    font-size: 15px;
}

.lead-gen-card-copy {
    margin: 1px 0 0;
    color: #607b9d;
    font-size: 12px;
}

.lead-gen-form-label {
    color: #29548d;
    font-size: 12px;
    font-weight: 700;
    margin: 8px 0 4px;
}

.lead-gen-input-wrap {
    position: relative;
}

.lead-gen-input,
.lead-gen-select {
    font-size: 13px;
    border-color: #cadbf3;
}

.lead-gen-clear-btn {
    position: absolute;
    right: 8px;
    top: 6px;
    border: 0;
    background: transparent;
    color: #6d7f97;
    font-weight: 700;
}

.lead-gen-dropdown {
    margin-top: 6px;
    border: 1px solid #d7e5f8;
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
}

.lead-gen-dropdown-row {
    width: 100%;
    border: 0;
    background: #ffffff;
    text-align: left;
    padding: 8px 9px;
    display: flex;
    gap: 8px;
}

.lead-gen-dropdown-row:hover {
    background: #f4f8ff;
}

.lead-gen-dropdown-empty {
    padding: 0;
}

.lead-gen-dropdown-row-static {
    padding: 10px 12px;
    color: #5a6e8d;
    font-size: 13px;
}

.lead-gen-code {
    color: #788da9;
    font-family: monospace;
    font-size: 12px;
    min-width: 52px;
}

.lead-gen-label {
    color: #1d3654;
    font-size: 13px;
}

.lead-gen-ok {
    margin-top: 7px;
    color: #17653f;
    font-size: 12px;
}

.lead-gen-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lead-gen-tile {
    border: 1px solid #c9daf3;
    background: #ffffff;
    color: #184c93;
    border-radius: 10px;
    padding: 5px 9px;
    font-size: 12px;
    font-weight: 700;
}

.lead-gen-tile.is-active {
    background: #174f9f;
    color: #ffffff;
    border-color: #174f9f;
}

.lead-gen-chip-wrap {
    margin-top: 7px;
}

.lead-gen-chip {
    display: inline-block;
    background: #edf5ff;
    border: 1px solid #d4e4fb;
    border-radius: 10px;
    color: #1a4b8f;
    font-size: 11px;
    padding: 4px 7px;
    margin: 0 5px 5px 0;
}

.lead-gen-two-level {
    display: grid;
    gap: 8px;
}

.lead-gen-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}

.lead-gen-multi-wrap {
    border: 1px solid #cadbf3;
    border-radius: 10px;
    padding: 7px;
    background: #ffffff;
}

.lead-gen-tag-list {
    margin-bottom: 6px;
}

.lead-gen-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0 5px 5px 0;
    background: #e9f3ff;
    color: #174f9f;
    border: 1px solid #cfe1fa;
    border-radius: 999px;
    font-size: 11px;
    padding: 4px 7px;
}

.lead-gen-tag button {
    border: 0;
    background: transparent;
    color: #174f9f;
    font-size: 11px;
    font-weight: 700;
    padding: 0;
}

.lead-gen-search-actions {
    margin-top: 10px;
}

.lead-gen-search-actions .modern-btn {
    width: 100%;
    justify-content: center;
}

.lead-gen-search-actions .modern-btn:disabled {
    opacity: 0.75;
    cursor: not-allowed;
}

.lead-gen-error {
    margin-top: 8px;
    font-size: 12px;
    color: #a73333;
}

.lead-gen-empty {
    margin-top: 10px;
    color: #607b9d;
    font-size: 13px;
}

.lead-gen-results-wrap {
    margin-top: 11px;
}

.lead-gen-results-head {
    color: #0d315f;
    font-weight: 700;
    margin-bottom: 5px;
}

.lead-gen-results-meta {
    color: #4f6f97;
    font-size: 12px;
    margin-bottom: 8px;
}

.lead-gen-limited-note {
    margin-bottom: 8px;
    color: #7a5a12;
    background: #fff7db;
    border: 1px solid #f0dfab;
    border-radius: 8px;
    padding: 7px 9px;
    font-size: 12px;
    font-weight: 600;
}

.lead-gen-results-table-wrap {
    overflow-x: auto;
}

.lead-gen-results-table {
    margin-bottom: 0;
    font-size: 12px;
}

.lead-gen-results-table th {
    border-top: 0;
    color: #29548d;
    font-size: 11px;
    text-transform: uppercase;
}

.lead-gen-company-name {
    color: #0d315f;
    font-weight: 700;
}

.lead-gen-company-meta {
    color: #607b9d;
}

.lead-gen-upgrade-cta {
    margin-top: 12px;
    border: 1px solid #d3e3fa;
    border-radius: 12px;
    padding: 12px;
    background: #f6faff;
}

.lead-gen-upgrade-title {
    color: #0d315f;
    font-weight: 700;
    font-size: 16px;
}

.lead-gen-upgrade-copy {
    color: #4f6f97;
    font-size: 13px;
    margin-top: 3px;
}

.lead-gen-upgrade-actions {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lead-gen-upgrade-btn {
    min-width: 220px;
    justify-content: center;
    font-weight: 700;
}

.lead-gen-paging {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lead-gen-page-label {
    color: #29548d;
    font-size: 12px;
    font-weight: 700;
}

.lead-gen-download-wrap {
    margin-top: 10px;
}

.lead-gen-download-note {
    margin-top: 5px;
    font-size: 11px;
    color: #5b6f89;
}

.lead-gen-sic-toggle-wrap {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.lead-gen-sic-toggle-btn {
    justify-content: center;
}

.lead-gen-sic-toggle-meta {
    color: #4f6f97;
    font-size: 12px;
    font-weight: 700;
}

.lead-gen-advanced-callout {
    margin-top: 12px;
    border: 1px solid #d7e5f8;
    border-radius: 10px;
    background: #f8fbff;
    padding: 10px 11px;
}

.lead-gen-advanced-title {
    color: #0f447f;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 2px;
}

.lead-gen-advanced-copy {
    color: #56779d;
    font-size: 12px;
    line-height: 1.45;
}

.lead-gen-advanced-copy a {
    color: #124f9f;
    font-weight: 700;
    text-decoration: underline;
}

.lead-gen-sic-browser {
    margin-top: 10px;
    border: 1px solid #d6e4f8;
    border-radius: 12px;
    padding: 10px;
    background: #f9fbff;
}

.lead-gen-sic-browser-head {
    margin-bottom: 8px;
}

.lead-gen-sic-browser-title {
    color: #0d315f;
    font-weight: 700;
    font-size: 13px;
}

.lead-gen-sic-browser-subtitle {
    color: #5f7ca1;
    font-size: 12px;
}

.lead-gen-sic-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.lead-gen-sic-tab {
    border: 1px solid #c9daf3;
    background: #ffffff;
    color: #174f9f;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
}

.lead-gen-sic-tab.is-active {
    background: #174f9f;
    color: #ffffff;
    border-color: #174f9f;
}

.lead-gen-sic-search-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin-bottom: 8px;
}

.lead-gen-sic-clear-btn {
    min-width: 105px;
    justify-content: center;
}

.lead-gen-sic-loading,
.lead-gen-sic-error {
    font-size: 12px;
    padding: 7px 8px;
    border-radius: 8px;
}

.lead-gen-sic-loading {
    color: #48698f;
    background: #eef4ff;
}

.lead-gen-sic-error {
    color: #8c2f2f;
    background: #fdeeee;
}

.lead-gen-sic-topics-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.lead-gen-sic-topic-tile {
    text-align: left;
    border: 1px solid #d1e1f8;
    background: #ffffff;
    border-radius: 10px;
    padding: 8px;
    display: grid;
    gap: 3px;
}

.lead-gen-sic-topic-tile.is-active {
    border-color: #1e58ad;
    background: #edf4ff;
}

.lead-gen-sic-topic-icon {
    font-size: 16px;
    line-height: 1;
}

.lead-gen-sic-topic-label {
    color: #123e78;
    font-weight: 700;
    font-size: 12px;
}

.lead-gen-sic-topic-count {
    color: #5b76a0;
    font-size: 11px;
}

.lead-gen-sic-code-list {
    margin-top: 8px;
    border: 1px solid #d8e5f8;
    border-radius: 10px;
    background: #ffffff;
    max-height: 230px;
    overflow: auto;
}

.lead-gen-sic-code-row {
    width: 100%;
    border: 0;
    border-bottom: 1px solid #eef3fb;
    background: #ffffff;
    text-align: left;
    padding: 7px 8px;
    display: flex;
    gap: 8px;
}

.lead-gen-sic-code-row:last-child {
    border-bottom: 0;
}

.lead-gen-sic-code-row:hover {
    background: #f3f8ff;
}

.lead-gen-sic-code-row.is-selected {
    background: #e9f3ff;
}

.lead-gen-sic-full-grid {
    display: grid;
    grid-template-columns: 1.1fr 1.2fr 2fr;
    gap: 8px;
}

.lead-gen-sic-full-col {
    border: 1px solid #d8e5f8;
    border-radius: 10px;
    background: #ffffff;
    max-height: 290px;
    overflow: auto;
}

.lead-gen-sic-list-row {
    width: 100%;
    border: 0;
    border-bottom: 1px solid #edf3fb;
    background: #ffffff;
    text-align: left;
    padding: 7px 8px;
    color: #1f3f67;
    font-size: 12px;
}

.lead-gen-sic-list-row:last-child {
    border-bottom: 0;
}

.lead-gen-sic-list-row:hover {
    background: #f4f8ff;
}

.lead-gen-sic-list-row.is-active {
    background: #e9f3ff;
    color: #0f447f;
    font-weight: 700;
}

@media (max-width: 992px) {
    .lead-gen-sic-topics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lead-gen-sic-full-grid {
        grid-template-columns: 1fr 1fr;
    }

    .lead-gen-sic-codes-col {
        grid-column: 1 / span 2;
    }
}

@media (max-width: 640px) {
    .lead-gen-grid {
        grid-template-columns: 1fr;
    }

    .lead-gen-sic-search-row {
        grid-template-columns: 1fr;
    }

    .lead-gen-sic-topics-grid {
        grid-template-columns: 1fr;
    }

    .lead-gen-sic-full-grid {
        grid-template-columns: 1fr;
    }

    .lead-gen-sic-codes-col {
        grid-column: auto;
    }
}

[v-cloak] {
    display: none;
}

.fav-summary-cards {
    display: grid;
    gap: 8px;
}

.fav-summary-card {
    background: #ffffff;
    border: 1px solid #dce7f8;
    border-radius: 12px;
    padding: 9px 8px;
}

.fav-summary-card-title {
    color: #114c9e;
    font-weight: 700;
    margin-bottom: 8px;
}

.fav-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #edf3fb;
    padding: 6px 0;
    color: #1f3551;
}

.fav-summary-row:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.fav-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 999px;
    background: #edf4ff;
    border: 1px solid #c8dcfb;
    color: #1f4f93;
    font-weight: 700;
    padding: 0;
}

.fav-count-warn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 999px;
    background: #fff5dd;
    border: 1px solid #f1d393;
    color: #7a4b03;
    font-weight: 700;
    padding: 0;
}

.fav-count-overdue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 999px;
    background: #ffefef;
    border: 1px solid #f2c5c5;
    color: #8a1f1f;
    font-weight: 700;
    padding: 0;
}

.fav-summary-warn {
    color: #7a4b03;
    font-weight: 600;
}

.fav-summary-overdue {
    color: #9f1d1d;
    font-weight: 700;
}

.fav-toolbar {
    background: #eaf3ff;
    color: #1f3551;
    border: 1px solid #c8dcfb;
    border-radius: 16px;
    padding: 10px 12px;
    margin-bottom: 10px;
}

.fav-sort-indicator {
    font-weight: 700;
}

.fav-toolbar-top {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
}

.fav-total {
    font-size: 17px;
    font-weight: 700;
    color: #0f3d80;
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    background: #dfeeff;
    border: 1px solid #c6daf8;
    border-radius: 12px;
    padding: 6px 10px;
}

.fav-total strong {
    color: #0b2f63;
}

.fav-filter-input {
    max-width: 760px;
    width: 100%;
    flex: 1 1 360px;
    border-radius: 9px;
    border: 1px solid #c1d9ff;
    background: #fdfefe;
    padding: 7px 10px;
    font-size: 14px;
}

.fav-toolbar-controls {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.fav-toggle-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f8fbff;
    border: 1px solid #c7dafb;
    border-radius: 999px;
    padding: 6px 10px;
    margin: 0;
    color: #1f3551;
    font-weight: 500;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.fav-toggle-chip input {
    margin: 0;
    width: 15px;
    height: 15px;
    accent-color: #0f3d80;
}

.fav-toggle-chip span {
    position: relative;
    top: 1px;
}

.fav-fontsize-btn {
    background: #ffffff;
    color: #0f3d80;
    border: 1px solid #c7dafb;
    border-radius: 9px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
}

.fav-toolbar-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-left: auto;
}

.fav-meta-note {
    color: #29476a;
    font-weight: 500;
    font-size: 12px;
}

.fav-switch-btn {
    border-radius: 999px;
    border: 1px solid #bed4f8;
    background: #edf4ff;
    color: #1f4f93;
    padding: 5px 10px;
    font-weight: 600;
    font-size: 12px;
    text-decoration: none;
}

.fav-switch-btn:hover {
    text-decoration: none;
    color: #19498f;
    background: #dce9ff;
}

.fav-import-warning {
    margin: 10px 0;
    border-radius: 12px;
    border: 1px solid #f1d393;
    background: #fff5dd;
}

.fav-important-note {
    margin: 8px 0 10px;
    border-radius: 12px;
    border: 1px solid #c8dcfb;
    background: #edf4ff;
    color: #1f3551;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
}

.fav-important-note strong {
    color: #0f3d80;
}

.fav-empty-banner {
    background: #ffffff;
    border: 1px solid #d6e4f8;
    border-radius: 16px;
    box-shadow: 0 12px 24px rgba(17, 56, 114, 0.12);
    padding: 12px 14px;
}

.fav-empty-banner-panel {
    margin: 0;
    justify-content: center;
}

.fav-empty-banner-title {
    width: 100%;
    text-align: center;
    color: #0f3d80;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
}

.fav-empty-banner-copy {
    width: 100%;
    text-align: center;
    color: #395474;
    font-size: 14px;
    margin-top: 6px;
    line-height: 1.4;
}

#favs thead th {
    background: #edf4ff;
    color: #0d315f;
    border-bottom: 1px solid #c8dcfb !important;
    position: sticky;
    top: 0;
    z-index: 2;
    padding-right: 26px !important;
    background-image: none !important;
}

#favs thead th.sorting,
#favs thead th.sorting_asc,
#favs thead th.sorting_desc {
    position: sticky;
}

#favs thead th.sorting::after,
#favs thead th.sorting_asc::after,
#favs thead th.sorting_desc::after {
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

#favs thead th.sorting::after {
    content: "↕";
    color: #6a7f9f;
}

#favs thead th.sorting_asc::after {
    content: "▲";
    color: #ffffff;
}

#favs thead th.sorting_desc::after {
    content: "▼";
    color: #ffffff;
}

#favs td {
    border-bottom: 1px solid #edf3fb;
}

#favs tr:hover td {
    background: #f8fbff;
}

#favs tbody tr,
#favs tbody td {
    cursor: pointer;
}

#favs td a {
    color: #174a8c;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.18s ease;
}

#favs td a:hover {
    color: #0b2f63;
    text-decoration: none;
}

#favs tr:hover .fav-company-link {
    color: #0d3a76;
}

/* Shifted from nth-child(3,4,5) to (4,5,6) when the Filing Note column was inserted at position 3
   (between Name and Accounts). Any future new column needs the same shift applied here. */
#favs td:nth-child(4) a,
#favs td:nth-child(5) a,
#favs td:nth-child(6) a {
    color: #2e3440;
    font-weight: 400;
}

/* In the compact table the badge is NOT absolutely positioned (see the #favs override below), so
   these cells no longer need position:relative or a reserved padding-right - the badge is a normal
   flex item on the same line as the date. nowrap keeps the tick box, the date and the badge from
   breaking onto separate lines. nth-child(6) is the VAT column. */
#favs td:nth-child(4),
#favs td:nth-child(5),
#favs td:nth-child(6) {
    white-space: nowrap;
}

#favs td:nth-child(4) a:hover,
#favs td:nth-child(5) a:hover,
#favs td:nth-child(6) a:hover {
    color: #22354f;
}

#favs .sorting_desc,
#favs .sorting_asc {
    color: #ffffff;
    font-weight: 700;
    background: #2a77d8 !important;
    border-bottom-color: #2269bf !important;
}

/* Rebalanced again when the Filing Note column was added (previously 34% name + 3x20% dates =
   94%, following the VAT-column rebalance below). 28% + 12% + (3 x 18%) = 94%, same total, still
   leaving room for the narrow "#" counter column, which has no width of its own. These are hints,
   not hard caps - #favs has no table-layout:fixed, so .fav-filing-note-edit's own max-width (see
   below) is what actually guarantees the one-line truncation, not this percentage. */
.fav-col-name {
    width: 28%;
}

.fav-col-filing-note {
    width: 12%;
}

.fav-col-date {
    width: 18%;
}

/* Name alone now - Reg. No. moved into .fav-name-meta-row below it, alongside Company Notes. Kept
   as a block-level wrapper (rather than folding the <a> straight into the <td>) so this row and
   the meta row line up the same way other favourites-page cells stack their content. */
.fav-name-row {
    display: block;
}

.fav-name-row .fav-company-link {
    min-width: 0;
}

/* Reg. No. and Company Notes, side by side - both optional per-favourite metadata, wrapping onto
   a second line together if the row gets too narrow for both (e.g. a long note). */
.fav-name-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin-top: 4px;
}

/* Same "collapse to nothing, not just invisible" fix the grid layout needed before this moved to
   a flex row: .fav-item-hidden alone zeroes height (max-height:0) but an inline-block badge's own
   padding/border can still show a sliver, so whichever of the two badges is toggled off also needs
   its width zeroed. Applies to both - either can be hidden independently. */
.fav-name-meta-row .fav-item-hidden {
    width: 0 !important;
    min-width: 0 !important;
    overflow: hidden;
}

/* Shared shape/sizing for both badges in .fav-name-meta-row (Reg. No. and Company Notes) - same
   pill, same height, same type scale, so the two line up on one row instead of looking like two
   different kinds of thing. Colour is the only thing each sets for itself, below. */
.favregno,
.favnotes {
    display: inline-flex;
    align-items: center;
    height: 24px;
    border-radius: 999px;
    padding: 0 8px;
    font-weight: 500;
    font-size: 0.7em;
    line-height: 1;
    transition: opacity 0.22s ease, transform 0.22s ease, max-height 0.22s ease, margin 0.22s ease, padding 0.22s ease, border-width 0.22s ease;
    transform-origin: top;
}

.favregno {
    justify-content: center;
    width: 96px;
    min-width: 96px;
    text-align: center;
    background: #e6efff !important;
    color: #2b3138 !important;
    border: 1px solid #bfd5fa;
}

.favourites-companynumber {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    min-width: 96px;
    height: 24px;
    border-radius: 999px;
    padding: 0 8px;
    font-weight: 500;
    font-size: 0.7em;
    line-height: 1;
    text-align: center;
    background: #e6efff !important;
    color: #2b3138 !important;
    border: 1px solid #bfd5fa !important;
}

.favnotes {
    /* Only colour + note-specific truncation here - shape/sizing/type all come from the shared
       .favregno, .favnotes rule above. Notes are free text (unlike the fixed-length reg number),
       so rather than a fixed width like .favregno's 96px, this caps at a max-width and truncates
       to one line - still the same pill height as the reg number badge either way. */
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #f3f4f7 !important;
    color: #2b3a50 !important;
    border: 1px solid #d8e0ed;
}

/* Both sit inline in .fav-name-meta-row now (see above) - .favnotes-wrap no longer needs its own
   display:block/taller max-height override to stack on a separate full-width line below the name;
   .margin-top on .favnotes above and the old width-zeroing scoped to .fav-name-row are both gone
   for the same reason (the row's own flex `gap` handles spacing, and
   .fav-name-meta-row .fav-item-hidden above handles the collapse-to-nothing case for both badges). */
.favregno-wrap,
.favnotes-wrap {
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
    opacity: 1;
    transform: translateY(0);
    max-height: 40px;
    transition: opacity 0.34s ease, transform 0.34s ease, max-height 0.34s ease, margin 0.34s ease;
}

.fav-banner-root {
    margin-bottom: 0;
}

.fav-banner-action-row {
    height: 60px;
}

.fav-company-link {
    color: #113764;
    font-weight: 700;
}

.fav-company-link:hover {
    text-decoration: none;
    color: #0f3d80;
}

/* SHARED with the Classic favourites view (_favouritesClassicViewPartial.cshtml and
   FavouritesClassicView.cshtml use this class 15 times each), which is deliberately frozen — see
   CursorPlans/favourites.md. Leave this rule exactly as it is. The compact table's smaller,
   in-flow variant is the #favs-scoped override further down, which cannot reach Classic because
   Classic renders cards, not a table, and has no #favs anywhere. */
.favourites-due-date-badge {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 999px;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    min-width: 112px;
    text-align: center;
    font-weight: 700;
    white-space: nowrap;
}

.favourites-due-date-badge.badge-danger {
    background: #cf3a3a !important;
    color: #ffffff !important;
    border: 1px solid #b83232 !important;
}

.favourites-due-date-badge.badge-warning {
    background: #f7c948 !important;
    color: #5f3a00 !important;
    border: 1px solid #e3b536 !important;
}

.fav-item-hidden {
    opacity: 0;
    transform: translateY(-6px);
    max-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    pointer-events: none;
}

@media (min-width: 1200px) {
    .fav-toolbar-top {
        flex-wrap: nowrap;
    }

    .fav-filter-input {
        min-width: 360px;
    }
}

@media (min-width: 992px) {
    .fav-table-scroll {
        max-height: calc(100vh - 340px);
    }
}

/* Reusable modern two-pane shell */
.modern-two-pane-shell {
    margin-top: 8px;
}

.modern-two-pane-row {
    align-items: flex-start;
}

.modern-side-col {
    padding-right: 10px;
}

.modern-main-col {
    padding-left: 10px;
    min-width: 0;
}

.modern-side-panel {
    background: #f8fbff;
    border: 1px solid #dce7f8;
    border-radius: 20px;
    padding: 16px 10px;
    box-shadow: 0 12px 26px rgba(17, 56, 114, 0.08);
    margin-right: 0 !important;
    margin-bottom: 0;
}

.modern-side-nav {
    width: 100%;
}

.modern-side-panel-spaced {
    margin-top: 10px;
}

.modern-main-pane {
    margin-right: 0 !important;
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #dce7f8;
    box-shadow: 0 12px 26px rgba(17, 56, 114, 0.08);
    padding: 24px 28px;
}

.modern-form-stack .form-group {
    margin-bottom: 0;
}

.modern-notes-input {
    font-size: 13px;
    line-height: 1.45;
    border-radius: 10px;
    border: 1px solid #c7dafb;
    background: #ffffff;
    min-height: 58px;
    resize: vertical;
}

.modern-notes-input:focus {
    border-color: #8db7f1;
    box-shadow: 0 0 0 3px rgba(42, 119, 216, 0.14);
}

.modern-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
}

.modern-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
    padding: 7px 12px;
    line-height: 1.1;
    text-decoration: none;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}

.modern-btn img {
    width: 14px;
    height: 14px;
    margin-top: 0 !important;
    margin-right: 2px !important;
}

.modern-btn:hover {
    text-decoration: none;
    transform: translateY(-1px);
}

.modern-btn-primary {
    background: #1f6feb;
    border-color: #1b62d2;
    color: #ffffff;
    box-shadow: 0 8px 16px rgba(31, 111, 235, 0.22);
}

.modern-btn-primary:hover {
    background: #195fc8;
    border-color: #1657b8;
    color: #ffffff;
}

.modern-btn-danger {
    background: #d94747;
    border-color: #c53f3f;
    color: #ffffff;
    box-shadow: 0 8px 16px rgba(217, 71, 71, 0.2);
}

.modern-btn-danger:hover {
    background: #bf3a3a;
    border-color: #af3434;
    color: #ffffff;
}

.modern-btn-soft {
    background: #eef5ff;
    border-color: #c6dbfb;
    color: #184a8d;
    box-shadow: none;
}

.modern-btn-soft:hover {
    background: #e4efff;
    border-color: #b7d0f7;
    color: #123f7b;
}

.modern-btn-outline {
    background: #ffffff;
    border-color: #b6cff3;
    color: #1d4f93;
    box-shadow: none;
}

.modern-btn-outline:hover {
    background: #f6faff;
    border-color: #9fc0ef;
    color: #153f79;
}

.modern-btn-soft img,
.modern-btn-outline img {
    filter: brightness(0) saturate(100%) invert(20%) sepia(38%) saturate(1229%) hue-rotate(186deg) brightness(88%) contrast(92%);
}

.company-modern-form-note {
    margin-top: 8px;
    color: #51627a;
    font-size: 12px;
}

.modern-side-nav-item {
    margin: 6px 10px;
    padding: 0;
}

.modern-side-nav-item a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #103b77;
    text-decoration: none;
    font-weight: 400;
    background: #ffffff;
    border: 1px solid #d7e3f6;
    border-radius: 12px;
    padding: 8px 10px;
    transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

.modern-side-nav-item a img {
    width: 18px;
    margin: 0 !important;
    flex: 0 0 auto;
    filter: brightness(0) saturate(100%) invert(20%) sepia(34%) saturate(1217%) hue-rotate(186deg) brightness(92%) contrast(92%);
    transition: filter 0.22s ease;
}

.modern-side-nav-item a:hover {
    color: #0f3d80;
    text-decoration: none;
    background: #eef6ff;
    border-color: #b9d3f7;
}

.modern-side-nav-item.is-active a {
    background: #2a77d8;
    color: #ffffff !important;
    border-color: transparent;
    box-shadow: 0 6px 14px rgba(42, 119, 216, 0.22);
    font-weight: 700;
}

.modern-side-nav-item.is-active a img {
    filter: brightness(0) invert(1);
}

.modern-side-nav-item.is-active a:hover {
    background: #2167c0;
    color: #ffffff !important;
    border-color: transparent;
}

/* Company page modern layer */
.company-modern-shell {
    max-width: 1450px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;
    padding-right: 10px;
}

.company-modern-row {
    align-items: flex-start;
}

.company-modern-main {
    padding: 24px 28px;
}

.company-modern-title {
    color: #0d315f;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.company-section-title {
    margin: 0 0 8px 0;
    color: #103b77;
    font-weight: 700;
}

.company-content-meta {
    color: #4b607f;
    font-weight: 600;
    margin-bottom: 12px;
}

.company-content-meta .badge.badge-secondary {
    background: #e6efff !important;
    color: #1f3551 !important;
    border: 1px solid #bfd5fa;
    font-weight: 600;
}

.company-content-block {
    row-gap: 12px;
}

.company-summary-table {
    margin-bottom: 12px;
}

.company-data-table {
    margin-bottom: 0;
}

.company-data-table td,
.company-data-table th {
    border-top-color: #e5edf9;
    color: #1f3551;
    vertical-align: top;
}

.company-detail-table td {
    padding: 8px 8px;
}

.company-status-cell {
    width: 160px;
}

.company-status-icon {
    width: 18px;
    margin-top: -2px;
    margin-right: 4px;
}

.company-entity-card {
    background: #ffffff;
    border: 1px solid #dce7f8;
    border-radius: 12px;
    padding: 10px 12px;
}

.company-entity-link-card {
    display: block;
    text-decoration: none;
}

.company-entity-link-card:hover {
    text-decoration: none;
}

.company-card-title {
    margin: 0;
    color: #103b77;
    font-size: 22px;
    font-weight: 700;
}

.company-record-row + .company-record-row {
    margin-top: 10px;
}

.people-page-root .people-officer-row-link {
    border-radius: 12px;
    cursor: pointer;
    transition: box-shadow 0.2s ease;
}

.people-page-root .people-officer-row-link:hover {
    box-shadow: 0 8px 18px rgba(17, 56, 114, 0.08);
}

.people-page-root .people-officer-row-link:hover .company-entity-card {
    background: #eaf3ff;
    border-color: #c6daf8;
}

.people-page-root .people-officer-table {
    width: 100%;
    table-layout: fixed;
    margin-bottom: 0;
}

.people-page-root .people-officer-table td {
    padding-top: 8px;
    padding-bottom: 8px;
    vertical-align: top;
    word-break: break-word;
}

.people-page-root .people-officer-table td:nth-child(1) {
    width: 44px;
}

.people-page-root .people-officer-table td:nth-child(2) {
    width: 160px;
}

.people-page-root .people-officer-table td:nth-child(4) {
    width: 180px;
}

.psc-page-root .psc-record-table {
    width: 100%;
    table-layout: fixed;
    margin-bottom: 0;
}

.psc-page-root .psc-record-table td {
    padding-top: 8px;
    padding-bottom: 8px;
    vertical-align: top;
    word-break: break-word;
}

.psc-page-root .psc-record-table td:nth-child(1) {
    width: 44px;
}

.psc-page-root .psc-record-table td:nth-child(2) {
    width: 240px;
}

.company-record-spaced {
    margin-top: 10px;
}

.company-inline-link {
    color: #174a8c;
    text-decoration: none;
    font-weight: 600;
}

.company-inline-link:hover {
    color: #0d3a76;
    text-decoration: none;
}

.company-inline-item + .company-inline-item::before {
    content: ", ";
}

.company-inline-alert {
    border-radius: 10px;
    padding: 10px 12px;
}

.company-empty-state {
    color: #2f4768;
}

.company-empty-page-card {
    margin: 16px;
}

.company-badge-index {
    margin-right: 6px;
}

.disq-summary-card {
    background: #2a77d8;
    border-color: #2a77d8;
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 10px;
}

.company-modern-fav-row {
    margin-bottom: 8px;
}

.company-modern-fav-box {
    background: #f8fbff;
    border: 1px solid #dce7f8;
    border-radius: 14px;
    padding: 12px;
}

/* Officer page modern polish */
.officer-page-root .officer-header-block {
    margin-bottom: 8px;
}

.officer-page-root .officer-meta {
    margin-top: 4px;
}

.officer-page-root .officer-details-card {
    margin-bottom: 14px;
    padding: 12px 14px;
}

.officer-page-root .officer-details-table td {
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1px solid #edf2fb;
}

.officer-page-root .officer-details-table tr:first-child td {
    border-top: 0;
}

.officer-page-root .officer-appointments-list {
    row-gap: 12px;
}

.officer-page-root .company-entity-link-card {
    border-radius: 12px;
    transition: box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

.officer-page-root .company-entity-link-card:hover {
    box-shadow: 0 8px 18px rgba(17, 56, 114, 0.08);
}

.officer-page-root .company-entity-link-card:hover .officer-appointment-card {
    background: #eaf3ff;
    border-color: #c6daf8;
}

.officer-page-root .officer-appointment-card {
    padding: 12px 14px;
}

.officer-page-root .officer-kv-row {
    display: grid;
    grid-template-columns: minmax(170px, 220px) 1fr;
    gap: 12px;
    align-items: start;
    padding: 8px 2px;
}

.officer-page-root .officer-kv-row + .officer-kv-row {
    margin-top: 2px;
    padding-top: 10px;
    border-top: 1px solid #edf2fb;
}

.officer-page-root .officer-kv-label {
    color: #3e5679;
    font-weight: 600;
}

.officer-page-root .officer-kv-value {
    color: #233449;
    min-width: 0;
}

.officer-page-root .officer-kv-value .company-card-title {
    margin: 0;
    font-size: 20px;
}

.officer-page-root .officer-company-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    height: 24px;
    border-radius: 999px;
    padding: 0 8px;
    background: #e6efff !important;
    border: 1px solid #bfd5fa !important;
    color: #2b3138 !important;
    font-size: 10px;
    font-weight: 500;
}

/* Disqualified officer page polish */
.disq-page-root .disq-header-block {
    margin-bottom: 8px;
}

.disq-page-root .company-content-meta {
    margin-top: 4px;
    margin-bottom: 10px;
}

.disq-page-root .disq-details-card {
    margin-bottom: 14px;
    padding: 12px 14px;
}

.disq-page-root .disq-details-table td {
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1px solid #edf2fb;
    font-size: 14px;
}

.disq-page-root .disq-details-table tr:first-child td {
    border-top: 0;
}

.disq-page-root .company-section-title {
    margin-bottom: 10px;
}

.disq-page-root .company-entity-card {
    padding: 12px 14px;
}

.disq-page-root .disq-record-card {
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.disq-page-root .disq-record-card:hover {
    background: #eaf3ff;
    border-color: #c6daf8;
    box-shadow: 0 8px 18px rgba(17, 56, 114, 0.08);
}

.disq-page-root .disq-kv-row {
    display: grid;
    grid-template-columns: minmax(180px, 240px) 1fr;
    gap: 12px;
    align-items: start;
    padding: 8px 2px;
}

.disq-page-root .disq-kv-row + .disq-kv-row {
    margin-top: 2px;
    padding-top: 10px;
    border-top: 1px solid #edf2fb;
}

.disq-page-root .disq-kv-label {
    color: #3e5679;
    font-weight: 600;
}

.disq-page-root .disq-kv-value {
    color: #233449;
    font-size: 14px;
    line-height: 1.45;
    min-width: 0;
}

.disq-page-root .company-card-title {
    font-size: 19px;
    line-height: 1.25;
    margin-bottom: 0;
}

.disq-page-root .badge.badge-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    height: 24px;
    border-radius: 999px;
    padding: 0 8px;
    background: #e6efff !important;
    border: 1px solid #bfd5fa !important;
    color: #2b3138 !important;
    font-size: 10px;
    font-weight: 500;
}

.company-modern-alert {
    border-radius: 12px;
    border-width: 1px;
    margin-bottom: 10px;
}

.company-fav-status {
    margin-bottom: 12px;
    padding: 10px 12px;
}

.company-fav-status h5 {
    margin: 0;
    font-weight: 700;
    font-size: 16px;
}

.company-fav-status-saved {
    background: #e8f3ff;
    border-color: #b8d5f8;
    color: #123f7b;
}

.company-fav-status-not-saved {
    background: #f3f6fa;
    border-color: #d5deea;
    color: #44556d;
}

.company-modern-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 12px;
    border-radius: 12px;
    background: #edf4ff;
    border: 1px solid #c8dcfb;
    padding: 8px 10px;
}

.company-modern-section-heading h4 {
    margin: 0;
    color: #103b77;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.company-section-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-left: 12px;
    margin-left: 4px;
    border-left: 1px solid #d3dde9;
}

/* Search page modern layer */
.search-page-shell {
    margin-top: 8px;
}

.search-page-shell .fav-main-layout {
    padding-left: 12px;
    padding-right: 12px;
}

.search-three-pane-row {
    align-items: flex-start;
}

.search-side-card {
    margin-bottom: 10px;
}

.search-quick-links-panel {
    margin-bottom: 10px;
}

.search-hero-card {
    border-radius: 20px;
    margin-bottom: 10px;
    background: #ffffff;
}

.search-hero-head h1 {
    margin: 0;
    color: #0d315f;
    font-size: 28px;
    font-weight: 700;
}

.search-hero-head p {
    margin: 6px 0 14px;
    color: #4e678b;
}

.search-modern-form {
    display: grid;
    gap: 12px;
}

.search-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.search-input-modern {
    border-radius: 12px;
    border: 1px solid #c7dafb;
    background: #ffffff;
    font-size: 15px;
    height: 42px;
}

.search-input-modern:focus {
    border-color: #8db7f1;
    box-shadow: 0 0 0 3px rgba(42, 119, 216, 0.14);
}

.search-submit-btn {
    height: 42px;
    white-space: nowrap;
}

.search-toggle-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.search-toggle-item {
    position: relative;
}

.search-toggle-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.search-toggle-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid #c8dcfb;
    background: #ffffff;
    color: #184a8d;
    padding: 7px 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.search-toggle-input:checked + .search-toggle-label {
    background: #2a77d8;
    border-color: #2a77d8;
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(42, 119, 216, 0.22);
}

.search-results-card {
    margin-bottom: 10px;
}

.search-empty-placeholder {
    min-height: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.search-empty-icon-wrap {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: #2a77d8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 16px rgba(42, 119, 216, 0.22);
}

.search-empty-icon {
    width: 18px;
    height: 18px;
}

.search-empty-text {
    color: #4f6482;
    font-weight: 600;
}

.search-results-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.search-results-head .company-section-title,
.search-results-head .company-content-meta {
    margin: 0;
}

.search-results-table-wrap {
    overflow-x: auto;
}

.search-results-table th {
    color: #103b77;
    background: #edf4ff;
    border-top: 1px solid #c8dcfb !important;
    border-bottom: 1px solid #c8dcfb !important;
    white-space: nowrap;
}

.search-results-table td {
    border-bottom: 1px solid #e6eefb;
    cursor: pointer;
}

.search-results-table tbody tr {
    cursor: pointer;
}

.search-results-table .company-inline-link,
.search-results-table .search-subtle-link {
    color: #2f3742;
    font-weight: 400;
}

.search-results-table tbody tr:hover td {
    background: #eaf3ff;
}

.search-results-table tbody tr:hover .company-inline-link {
    color: #1d2f47;
}

.search-results-pager-wrap {
    margin-top: 12px;
    margin-bottom: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.search-results-page-meta {
    color: #4d6483;
    font-size: 13px;
}

.search-results-pager {
    margin: 0;
    gap: 4px;
}

.search-results-pager .page-item .page-link {
    border-radius: 10px;
    border: 1px solid #c9dbf8;
    color: #1a4a88;
    background: #ffffff;
    min-width: 36px;
    text-align: center;
    padding: 5px 9px;
    font-size: 13px;
    line-height: 1.2;
}

.search-results-pager .page-item.active .page-link {
    background: #2a77d8;
    border-color: #2a77d8;
    color: #ffffff;
}

.search-results-pager .page-item.disabled .page-link {
    color: #8ea2c0;
    background: #f2f6fc;
    border-color: #d9e4f6;
}

.company-filings-pager-wrap {
    margin-top: 10px;
}

.search-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 74px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
}

.search-status-badge-active {
    background: #e7f7ee;
    color: #1f7a4d;
    border: 1px solid #b6e5ca;
}

.search-status-badge-inactive {
    background: #fdecef;
    color: #a1334a;
    border: 1px solid #f5c2cc;
}

.search-subtle-link {
    font-weight: 500;
    color: #2f4a6c;
}

.search-history-card .company-data-table td {
    padding: 8px 4px;
}

.search-history-remove-cell {
    width: 30px;
}

.search-side-actions {
    margin-bottom: 12px;
}

.search-due-card .modern-btn {
    display: flex;
    width: 100%;
    justify-content: center;
    text-align: center;
    white-space: normal;
}

.search-summary-reused {
    border-top: 1px solid #e2ebf9;
    padding-top: 10px;
}

.search-summary-reused .fav-summary-card {
    padding: 10px;
}

.search-anon-alert {
    margin: 10px 0;
    border-radius: 12px;
}

.search-news-table td {
    padding: 8px 4px;
    border-bottom: 1px solid #e9effa;
}

.search-icon-btn {
    padding: 2px 6px;
}

.search-history-news-card {
    margin-bottom: 10px;
}

.search-tabs-head {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.search-tab-btn {
    border: 1px solid #c8dcfb;
    background: #ffffff;
    color: #2f3a4a;
    border-radius: 999px;
    padding: 6px 12px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
}

.search-tab-btn.is-active {
    background: #edf4ff;
    border-color: #b9d3f7;
    color: #1f3551;
}

.search-tab-pane {
    display: none;
}

.search-tab-pane.is-active {
    display: block;
}

.search-history-table-modern td,
.search-news-table-modern td {
    padding: 8px 4px;
    border-bottom: 1px solid #e8eef8;
}

.search-history-table-modern tbody tr {
    cursor: pointer;
}

.search-history-table-modern tbody tr td {
    transition: background-color 0.2s ease;
}

.search-history-table-modern tbody tr:hover td {
    background: #eaf3ff;
}

.search-history-table-modern tbody tr:hover .search-plain-link {
    color: #1d2f47;
}

.search-news-table-modern tbody tr {
    cursor: pointer;
}

.search-news-table-modern tbody tr td {
    transition: background-color 0.2s ease;
}

.search-news-table-modern tbody tr:hover td {
    background: #eaf3ff;
}

.search-news-table-modern tbody tr:hover .search-news-link {
    color: #1d2f47;
}

.search-plain-link {
    color: #2f3a4a;
    font-weight: 400;
    text-decoration: none;
}

.search-plain-link:hover {
    color: #1f2b3a;
    text-decoration: none;
}

.search-news-link {
    display: block;
    color: #2f3a4a;
    font-weight: 400;
    text-decoration: none;
    padding: 4px 8px;
    border-left: 3px solid transparent;
}

.search-news-link:hover {
    color: #1f2b3a;
    text-decoration: none;
}

.search-history-news-card .favourite-news-duesoon {
    border-left-color: #d7a046;
}

.search-history-news-card .favourite-news-overdue {
    border-left-color: #d25a5a;
}

.search-inline-form {
    margin: 0;
}

.search-inline-delete {
    background: none;
    border: 0;
    padding: 0 2px;
    color: #2f3a4a;
    text-decoration: none;
}

.search-inline-delete:hover {
    color: #1f2b3a;
    text-decoration: none;
}

.search-muted-icon {
    width: 14px;
    height: 14px;
    margin-top: -1px;
    filter: brightness(0) saturate(100%) invert(19%) sepia(8%) saturate(1187%) hue-rotate(177deg) brightness(92%) contrast(88%);
}

.import-page-root .search-three-pane-row {
    align-items: flex-start;
}

.import-main-card {
    border-radius: 20px;
    margin-bottom: 10px;
    position: relative;
    min-height: 420px;
    overflow: hidden;
}

.import-instructions-card {
    background: #ffffff;
    border: 1px solid #dce7f8;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
}

.import-example-table {
    margin: 10px 0;
    max-width: 320px;
}

.import-upload-form {
    border-top: 1px solid #e3ecfa;
    padding-top: 12px;
}

.import-file-label {
    display: block;
    margin-bottom: 6px;
}

.import-file-input {
    max-width: 420px;
    border-radius: 10px;
    border: 1px solid #c7dafb;
}

.import-upload-actions {
    margin-top: 10px;
}

.import-spinner {
    margin-top: 12px;
}

.import-error-card,
.import-results-card {
    margin-bottom: 10px;
}

.import-results-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: #ffffff;
    border: 1px solid #dce7f8;
    border-radius: 20px;
    padding: 16px;
}

.import-results-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.import-results-title-wrap {
    min-width: 0;
}

.import-results-title {
    font-size: 20px;
    margin-bottom: 0;
}

.import-dismiss-btn {
    white-space: nowrap;
}

.import-alert-box {
    margin-bottom: 0;
    border-radius: 12px;
}

.import-summary-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 8px;
}

.import-summary-actions {
    margin-top: 10px;
    margin-bottom: 10px;
}

.import-results-scroll {
    max-height: calc(100% - 124px);
    min-height: 240px;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid #dee9f9;
    border-radius: 12px;
}

.import-company-name-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #243242;
    font-weight: 500;
}

.import-favourite-number {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e7f0ff;
    border: 1px solid #b6cff6;
    color: #153d78;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.import-results-scroll td.import-company-name-cell {
    white-space: nowrap;
}

.fav-item-number {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e7f0ff;
    border: 1px solid #b6cff6;
    color: #153d78;
    font-size: 8px;
    font-weight: 500;
    line-height: 1;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    margin-right: 8px;
    vertical-align: middle;
}

.fav-col-index,
.fav-index-cell {
    width: 44px;
    max-width: 44px;
    text-align: center;
    padding-left: 6px !important;
    padding-right: 6px !important;
}

.fav-index-cell .fav-item-number {
    margin-right: 0;
}

.filings-table tbody tr + tr td {
    border-top: 1px solid #e7eefb;
}

.filings-annotation {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed #e2e9f6;
    color: #556b8a;
    font-size: 13px;
}

/* Marketing/public pages */
.content-page-root {
    padding-top: 4px;
}

.marketing-top-nav .nav-item::before,
.marketing-top-nav .nav-item:before,
.marketing-top-nav .nav-item::after,
.marketing-top-nav .nav-item:after {
    content: none !important;
    display: none !important;
}

.marketing-top-nav .nav-item {
    background: transparent !important;
}

.marketing-nav-link {
    font-weight: 600;
    font-size: 13px;
    color: #1f3551 !important;
    border-radius: 12px;
    padding: 7px 12px !important;
    border: 1px solid transparent;
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.marketing-nav-link:hover {
    color: #114c9e !important;
    background: #f5f9ff;
    border-color: #d7e4f8;
    transform: translateY(-1px);
}

.marketing-nav-link.is-active {
    color: #0f3d80 !important;
    background: #eaf3ff;
    border-color: #bfd6f7;
    box-shadow: 0 6px 14px rgba(17, 76, 158, 0.12);
}

.layout-portal-btn-item {
    margin-left: 12px;
}

.layout-portal-btn-item .modern-btn {
    min-height: 36px;
}

.layout-portal-btn-item .modern-btn-primary,
.layout-portal-btn-item .modern-btn-primary:hover,
.layout-portal-btn-item .modern-btn-primary:focus {
    color: #ffffff !important;
}

header .navbar-expand-lg .navbar-nav {
    gap: 2px;
}

.marketing-top-nav .layout-portal-btn-item {
    margin-left: 14px;
}

.homepage-openportal-wrap {
    display: flex;
    justify-content: center;
}

.homepage-openportal-btn {
    min-width: 190px;
    justify-content: center;
    font-size: 18px;
    padding: 11px 18px;
}

.homepage-hero-copy {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.content-page-shell {
    margin-top: 8px;
}

.content-page-shell .fav-main-layout {
    max-width: 1450px;
}

.content-page-card {
    border-radius: 20px;
    padding: 24px;
}

.content-page-card p,
.content-page-card li {
    color: #2f3a4a;
}

.legal-content-card {
    line-height: 1.6;
}

.legal-content-card h1,
.legal-content-card h2,
.legal-content-card h3 {
    color: #123b70;
}

.faq-item-modern + .faq-item-modern {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e6eefb;
}

.faq-question-modern {
    margin: 0 0 6px;
    font-size: 18px;
    color: #123b70;
}

.faq-answer-modern {
    margin: 0;
    color: #2f3a4a;
}

.auth-page-root .content-page-shell .fav-main-layout {
    max-width: 1450px;
}

.auth-card-stack {
    border-radius: 20px;
    background: #ffffff !important;
    padding: 22px 24px;
}

.auth-step-hidden {
    display: none;
}

.auth-title-wrap {
    margin-bottom: 14px;
}

.auth-title-icon {
    width: 16px;
    margin-top: -3px;
    margin-right: 4px;
}

.auth-title-icon-lg {
    width: 28px;
}

.auth-action-stack {
    display: grid;
    gap: 14px;
    margin-top: 6px;
}

.auth-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.auth-inline-btn {
    min-width: 220px;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 14px;
    justify-content: center;
}

.auth-full-btn {
    width: min(100%, 460px);
    min-height: 46px;
    padding: 10px 16px;
    font-size: 14px;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
}

.auth-form-stack {
    display: grid;
    gap: 14px;
    margin-top: 8px;
}

.auth-page-root .auth-form-stack label {
    display: block;
    margin-bottom: 6px;
    color: #0f3d80;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
}

.auth-page-root .auth-form-stack .modern-notes-input {
    font-size: 17px;
    color: #0f3d80;
    line-height: 1.3;
    min-height: 54px;
    padding: 12px 14px;
}

.auth-page-root .auth-form-stack .modern-notes-input::placeholder {
    color: #6b84a6;
    opacity: 1;
}

.verify-code-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 4px 0 6px;
}

.verify-code-digit {
    width: 58px;
    height: 66px;
    border-radius: 12px;
    border: 1px solid #9dc1f3;
    background: #7fb0ef;
    color: #ffffff;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    outline: none;
    caret-color: #ffffff;
}

.verify-code-digit:focus {
    border-color: #2a77d8;
    box-shadow: 0 0 0 3px rgba(42, 119, 216, 0.2);
    background: #6ea4e9;
}

.auth-spaced-row {
    margin-top: 14px;
}

.auth-muted-note {
    color: #5e718f;
    line-height: 1.5;
}

.auth-spinner-wrap {
    display: none;
}

.auth-inline-spinner {
    margin: 0 auto;
    display: block;
}

.auth-code-email {
    color: #0f3d80;
    font-weight: 700;
}

.auth-footer-link {
    margin-top: 16px;
}

.content-form-grid .form-group + .form-group {
    margin-top: 10px;
}

.contact-reveal-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #c8dcfb;
    background: #edf4ff;
    color: #103b77;
    border-radius: 12px;
    padding: 9px 12px;
    font-weight: 600;
    text-align: left;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.contact-reveal-trigger:hover {
    background: #e2eeff;
    border-color: #b3cff4;
}

.contact-reveal-trigger[aria-expanded="true"] {
    background: #2a77d8;
    border-color: #2368bc;
    color: #ffffff;
}

.contact-reveal-chevron {
    transition: transform 0.2s ease;
}

.contact-reveal-trigger[aria-expanded="true"] .contact-reveal-chevron {
    transform: rotate(180deg);
}

.contact-reveal-panel {
    margin-top: 8px;
}

.contact-reveal-alert {
    margin-bottom: 0;
}

.myaccount-title-card {
    margin-bottom: 10px;
}

.myaccount-col {
    width: 50%;
    color: #2f3a4a;
    vertical-align: middle;
}

.myaccount-email {
    color: #2f3a4a;
    font-weight: 500;
}

.myaccount-status-expired {
    color: #b22a2a;
    font-weight: 700;
}

.myaccount-status-active {
    color: #1f7a41;
    font-weight: 700;
}

.myaccount-delete-note {
    margin-top: 12px;
}

.myaccount-delete-note small {
    display: block;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
}

.myaccount-preferences-card {
    margin-top: 10px;
}

.fav-reminder-card {
    border-radius: 16px;
    border: 1px solid #cfe4d8;
}

.fav-reminder-head {
    border-radius: 12px;
    background: linear-gradient(130deg, #1d8f73 0%, #158167 100%);
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    padding: 10px 12px;
}

.fav-reminder-body {
    margin-top: 10px;
}

.fav-reminder-grid .myaccount-toggle-row {
    border-color: #d4e6da;
    background: #f7fcf8;
}

.fav-reminder-footer-note {
    color: #30495d;
    font-size: 13px;
}

.myaccount-reminder-note {
    border-radius: 12px;
    border: 1px solid #cae8d1;
    background: #f3fbf4;
    color: #245238;
    font-weight: 600;
    text-align: center;
    padding: 10px 12px;
}

.myaccount-spinner {
    margin: 10px auto 0;
}

.myaccount-toggle-grid {
    margin-top: 10px;
    display: grid;
    gap: 10px;
}

.myaccount-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid #dce7f8;
    background: #fbfdff;
    border-radius: 12px;
    padding: 10px 12px;
}

.myaccount-toggle-copy {
    min-width: 0;
}

.myaccount-toggle-title {
    color: #253448;
    font-size: 14px;
    font-weight: 600;
}

.myaccount-toggle-state {
    color: #587095;
    font-size: 12px;
    margin-top: 2px;
}

.myaccount-toggle-switch {
    position: relative;
    display: inline-flex;
    width: 44px;
    height: 26px;
    margin-bottom: 0;
    cursor: pointer;
}

.myaccount-toggle-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.myaccount-toggle-slider {
    position: relative;
    width: 100%;
    height: 100%;
    background: #d4deec;
    border: 1px solid #bccde5;
    border-radius: 999px;
    transition: background-color 0.22s ease, border-color 0.22s ease;
}

.myaccount-toggle-slider::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(18, 43, 79, 0.24);
    transition: transform 0.22s ease;
}

.myaccount-toggle-switch input:checked + .myaccount-toggle-slider {
    background: #2a77d8;
    border-color: #2368bc;
}

.myaccount-toggle-switch input:checked + .myaccount-toggle-slider::before {
    transform: translateX(18px);
}

.myaccount-toggle-switch input:focus + .myaccount-toggle-slider {
    box-shadow: 0 0 0 3px rgba(42, 119, 216, 0.18);
}

.myaccount-page-root .company-detail-table tr + tr td {
    border-top: 1px solid #e8eef8;
}

.pricing-page-title {
    margin-bottom: 12px;
}

.pricing-banner {
    border-radius: 14px;
    border: 1px solid #d7e3f6;
}

.pricing-shell {
    padding: 14px;
}

.pricing-table > thead > tr > th {
    border-top: 0;
    color: #123b70;
    font-weight: 700;
}

.pricing-table > tbody > tr > td {
    border-top: 1px solid #e5edf9;
    color: #26364d;
    vertical-align: middle;
}

.pricing-col-plan {
    width: 20%;
}

.pricing-row-alert {
    font-weight: 700;
    font-size: 1.2rem;
}

.pricing-note {
    font-size: 12pt;
    font-weight: 400;
}

.pricing-small-note {
    font-size: 10pt;
    font-weight: 400;
}

.pricing-status-active {
    color: #1f7a41;
    font-weight: 700;
}

.pricing-status-expired {
    color: #b22a2a;
    font-weight: 700;
}

.pricing-status-cancelled {
    color: #b26d13;
    font-weight: 700;
}

.pricing-stripe-logo {
    width: 60px;
}

.pricing-action-btn {
    margin-top: 4px;
}

.page_wrapper .phase1-table-shell .btn.btn-primary {
    border-radius: 10px;
    border: 1px solid #1b62d2;
    background: #1f6feb;
    color: #ffffff;
    font-weight: 600;
    padding: 7px 12px;
}

.page_wrapper .phase1-table-shell .btn.btn-primary:hover {
    background: #195fc8;
    border-color: #1657b8;
    color: #ffffff;
}

@media (min-width: 992px) {
    .modern-two-pane-row {
        display: flex;
        flex-wrap: nowrap;
        gap: 18px;
    }

    .modern-side-col {
        flex: 0 0 24%;
        max-width: 24%;
    }

    .modern-main-col {
        flex: 1 1 auto;
        max-width: none;
        min-width: 0;
    }

    .modern-main-pane {
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        overflow-x: hidden;
    }

    .company-page-root {
        height: calc(100vh - 72px);
        overflow: hidden;
    }

    .company-page-root .modern-two-pane-shell {
        height: calc(100vh - 92px);
        overflow: hidden;
    }

    .company-page-root .modern-two-pane-row {
        height: 100%;
    }

    .company-page-root .modern-main-col {
        height: 100%;
    }

    .company-page-root .modern-main-pane {
        height: 100%;
        max-height: none;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .company-flow-scroll {
        height: auto;
        overflow: visible;
    }

    .company-flow-scroll .modern-two-pane-shell {
        height: auto;
        overflow: visible;
    }

    .company-flow-scroll .modern-two-pane-row {
        height: auto;
        align-items: flex-start;
    }

    .company-flow-scroll .modern-main-col {
        height: auto;
    }

    .company-flow-scroll .modern-main-pane {
        height: auto;
        max-height: none;
        overflow: visible;
        padding-bottom: 26px;
    }

    .search-three-pane-row {
        gap: 16px;
        margin-left: 0;
        margin-right: 0;
    }

    .search-left-col {
        flex: 0 0 calc((100% - 32px) * 0.24);
        max-width: calc((100% - 32px) * 0.24);
    }

    .search-center-col {
        flex: 0 0 calc((100% - 32px) * 0.52);
        max-width: calc((100% - 32px) * 0.52);
    }

    .search-right-col {
        flex: 0 0 calc((100% - 32px) * 0.24);
        max-width: calc((100% - 32px) * 0.24);
        min-width: 0;
    }

    .homepage-openportal-wrap {
        justify-content: center;
    }

}

@media (max-width: 991.98px) {
    .navbar {
        padding: 10px 0;
    }

    .navbar-collapse {
        margin-top: 8px;
        border: 1px solid #d8e4f7;
        border-radius: 14px;
        background: #ffffff;
        padding: 8px;
    }

    .marketing-menu-collapse {
        margin-left: 0;
        flex-grow: 1;
    }

    .marketing-menu-panel {
        border: 0;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        width: 100%;
    }

    .marketing-top-nav .layout-portal-btn-item {
        margin-left: 0;
        margin-top: 6px;
    }

    .marketing-nav-link {
        width: 100%;
    }

    .banner_section {
        margin-top: 8px;
    }

    .homepage_app_image {
        margin-top: 14px;
    }

    .homepage-cta-row {
        flex-direction: column;
        align-items: stretch;
    }

    .homepage-legal-note {
        max-width: 100%;
        margin-top: 8px;
    }

    .homepage-openportal-btn,
    .homepage-download-btn {
        width: 100%;
        min-width: 0;
    }

    .homepage-public .homepage-hero-copy .phase1-title {
        font-size: 40px;
        line-height: 1.08;
    }

    .homepage-public .homepage-hero-copy .phase1-subtitle {
        font-size: 26px;
    }

    .homepage-testimonials-wrap {
        padding: 12px 10px;
    }

    .homepage-testimonials-layout {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }

    .homepage-testimonials-head {
        order: 1;
        padding: 0;
    }

    .homepage-testimonials-head h3 {
        margin: 0 0 4px 0;
        font-size: 18px;
    }

    .homepage-testimonials-head p {
        margin: 0;
        font-size: 13px;
    }

    #testimonial-container {
        order: 2;
        min-height: 190px;
        height: 190px;
        box-sizing: border-box;
    }

    .homepage-customer-logos-section {
        order: 3;
        margin-top: 0;
        padding: 10px;
        background: #ffffff;
    }

    .homepage-customer-logos-layout {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .homepage-customer-logos-head h3 {
        font-size: 14px;
    }

    .homepage-customer-logos-strip {
        width: 100%;
        min-height: 58px;
    }

    footer .top_footer {
        padding-top: 22px;
    }

    footer .top_footer .links {
        margin-top: 14px;
    }

    .officer-page-root .officer-kv-row,
    .disq-page-root .disq-kv-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

@media (max-width: 768px) {
    .homepage-public .homepage_app_image {
        width: 380px;
    }

    #testimonial-container {
        min-height: 190px;
        height: 190px;
    }

    .testimonial-card {
        min-height: 0;
    }

    .testimonial-bottom {
        flex-wrap: wrap;
        gap: 6px;
    }

    .testimonial .customer-info {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }
}

/* Cookie consent banner */
.cookie-consent-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 18px;
    z-index: 5000;
    display: none;
    padding: 0 14px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.22s ease, transform 0.22s ease;
    pointer-events: none;
}

.cookie-consent-banner.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.cookie-consent-banner__inner {
    max-width: 1060px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #d7e4f7;
    border-radius: 16px;
    box-shadow: 0 14px 34px rgba(16, 58, 116, 0.14);
    padding: 16px 18px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
}

.cookie-consent-banner__copy {
    min-width: 0;
    flex: 1 1 auto;
}

.cookie-consent-banner__header {
    margin-bottom: 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0f3d80;
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.cookie-consent-banner__icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.cookie-consent-banner__description {
    margin: 0;
    color: #1e3557;
    font-size: 14px;
    line-height: 1.5;
}

.cookie-consent-banner__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex: 0 0 auto;
}

.cookie-consent-banner__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #0f3d80;
    border-radius: 999px;
    background: #0f3d80;
    color: #ffffff;
    height: 36px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
    cursor: pointer;
}

.cookie-consent-banner__cta:hover,
.cookie-consent-banner__cta:focus {
    background: #0b2f61;
    border-color: #0b2f61;
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-1px);
}

.cookie-consent-banner__cta--secondary {
    background: #eaf2ff;
    border-color: #c4d8f8;
    color: #0f3d80;
}

.cookie-consent-banner__cta--secondary:hover,
.cookie-consent-banner__cta--secondary:focus {
    background: #dbe9ff;
    border-color: #b7d0f6;
    color: #0f3d80;
}

.cookie-consent-banner__learnmore {
    color: #0f3d80;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.cookie-consent-banner__learnmore:hover,
.cookie-consent-banner__learnmore:focus,
.cookie-consent-banner__link:hover,
.cookie-consent-banner__link:focus {
    color: #0b2f61;
    text-decoration: underline;
}

.cookie-consent-banner__link {
    color: #0f3d80;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

@media (max-width: 991.98px) {
    .cookie-consent-banner {
        bottom: 10px;
        padding: 0 10px;
        top: auto;
        height: auto;
        max-height: none;
    }

    .cookie-consent-banner__inner {
        border-radius: 14px;
        max-height: min(85vh, 420px);
        overflow-y: auto;
        flex-direction: column;
        gap: 12px;
        padding: 14px 16px;
    }

    .cookie-consent-banner__actions {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 575.98px) {
    .cookie-consent-banner {
        left: 0;
        right: 0;
        bottom: 8px;
        padding: 0 8px;
    }

    .cookie-consent-banner__inner {
        max-height: min(80vh, 380px);
        padding: 12px 14px;
    }

    .cookie-consent-banner__description {
        font-size: 13px;
    }

    .cookie-consent-banner__header {
        font-size: 14px;
    }
}
.search-results-cap-note {
    color: #5f7593;
    font-size: 12px;
    margin-top: 2px;
}

/* ---------------------------------------------------------------------------------------------
   Favourites: deadline done tick boxes + VAT tracking editor.

   Plain checkboxes, styled here, carrying no Bootstrap classes at all. That is deliberate on two
   counts: they were asked for as tick boxes rather than switches, and it keeps them clear of this
   layout's split Bootstrap versions - _PortalLayout.cshtml loads Bootstrap 5.1 CSS
   (lib/bootstrap/dist/css/bootstrap.min.css) but Bootstrap 4.6 JS, and the BS4 stylesheet with
   .custom-control/.custom-switch in it is only ever loaded by _PollLayout.cshtml.
   --------------------------------------------------------------------------------------------- */

/* One line per date cell: tick box, date, badge. A flex row rather than the badge being absolutely
   positioned against the cell — absolute positioning centred the badge against the FULL height of
   the cell, and rows are taller than one line whenever the name column carries notes or a
   registration number, so the badge floated visibly below the date it belonged to. As a flex item
   it shares the date's line by construction, at any text size.

   margin-left:auto on the badge still pushes it to the right-hand edge, so the badges stay in a
   tidy column exactly as they did when they were absolutely positioned. */
.fav-deadline-line {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.fav-deadline-line > a {
    min-width: 0;
}

/* Compact-table-only badge: smaller than the shared .favourites-due-date-badge above, and in the
   normal flow rather than absolutely positioned. Scoped to #favs so the frozen Classic view keeps
   the original. With three date columns the badge repeats up to three times per row, so at the
   shared 12px/112px it competed with the dates it annotates. */
#favs .favourites-due-date-badge {
    position: static;
    transform: none;
    right: auto;
    top: auto;
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 10px;
    padding: 2px 6px;
    min-width: 84px;
}

/* Applied to a due-soon/overdue badge whose deadline is marked done. The badge stays in the DOM
   so that un-ticking can bring the original server-rendered badge straight back - see the comment
   on DeadlineBadgeCssClass in _favouritesCompactViewPartial.cshtml. !important because the badge's
   own rules above and Bootstrap's .badge both set display. */
.favourites-due-date-badge.fav-badge-hidden {
    display: none !important;
}

.fav-done-tick {
    /* accent-color tints the browser's native checkbox, so the tick keeps native focus, keyboard
       and hit-target behaviour instead of being rebuilt out of pseudo-elements. */
    accent-color: #1f6feb;
    width: 15px;
    height: 15px;
    margin: 0 6px 0 0;
    vertical-align: -2px;
    cursor: pointer;
    flex: 0 0 auto;
}

.fav-done-tick:focus-visible {
    outline: 2px solid #1f6feb;
    outline-offset: 1px;
}

.fav-done-tick:disabled {
    /* Disabled for the duration of its AJAX call. */
    opacity: 0.5;
    cursor: progress;
}

/* An untracked favourite has no VAT date to show, so this link has to read as an action rather
   than as a missing value. */
.fav-vat-add {
    white-space: nowrap;
    font-weight: 600;
    color: #1d4f93;
    border-bottom: 1px dashed #a8c6f0;
    text-decoration: none;
}

.fav-vat-add:hover,
.fav-vat-add:focus {
    color: #12386c;
    border-bottom-style: solid;
    text-decoration: none;
}

/* VAT tracking editor - one dialog shared by every row. A centred overlay rather than an inline
   card, so opening it does not push the table down or scroll the page away from the row that was
   just clicked. Hand-rolled rather than a Bootstrap modal: see the note above about the
   mismatched Bootstrap versions on this layout.

   Visibility is this class, not jQuery show/hide - display:flex does the centring and an inline
   display:block from show() would break it. */
.fav-vat-overlay {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    background: rgba(16, 34, 59, 0.45);
    padding: 20px;
    overflow-y: auto;
}

.fav-vat-overlay.is-open {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Set on <body> while the dialog is open so the page behind it cannot scroll away under it. */
.fav-modal-open {
    overflow: hidden;
}

.fav-vat-card {
    width: 100%;
    max-width: 460px;
    margin: auto;
    padding: 16px 18px;
    box-shadow: 0 18px 44px rgba(16, 34, 59, 0.28);
}

.fav-vat-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    font-weight: 700;
    font-size: 15px;
    color: #103b77;
    margin-bottom: 2px;
}

.fav-vat-close {
    flex: 0 0 auto;
    border: 0;
    background: none;
    color: #5f7593;
    font-size: 22px;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
}

.fav-vat-close:hover,
.fav-vat-close:focus {
    color: #103b77;
}

.fav-vat-subtitle {
    color: #5f7593;
    font-size: 12.5px;
    margin-bottom: 12px;
}

.fav-vat-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.fav-vat-label {
    flex: 1 1 240px;
    margin: 0;
    font-weight: 600;
    font-size: 13px;
    color: #1f3551;
}

.fav-vat-hint {
    display: block;
    font-weight: 400;
    font-size: 11.5px;
    color: #5f7593;
    margin-top: 2px;
}

.fav-vat-input {
    flex: 1 1 200px;
    max-width: 260px;
    border-radius: 10px;
    border: 1px solid #c6dbfb;
    font-size: 13px;
}

.fav-vat-buttons {
    margin-top: 14px;
}

@media (max-width: 575.98px) {
    .fav-vat-input {
        max-width: none;
    }
}

/* Filing note - a separate field from the existing Notes/.favnotes above, edited via
   #filingNoteContainer (reuses .fav-vat-overlay/.fav-vat-card/etc. - same dialog shape as VAT).
   Its own column (.fav-col-filing-note / .fav-filing-note-cell) rather than living under the name,
   so it's visible at a glance. One line max - #favs has no table-layout:fixed, so the percentage
   width on .fav-col-filing-note is only a hint; .fav-filing-note-edit's own max-width below is
   what actually guarantees the truncation regardless of what the table decides to render at. */
.fav-filing-note-cell {
    white-space: nowrap;
}

.fav-filing-note-edit {
    display: inline-block;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    font-size: 11.5px;
    text-decoration: none;
}

/* No note yet - a bare pencil icon, nothing else. Larger tap target via padding since there's no
   text to give the link its own width. */
.fav-filing-note-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    color: #5f7593;
    font-size: 14px;
}

.fav-filing-note-add:hover,
.fav-filing-note-add:focus {
    color: #1d4f93;
    background: #eef3fb;
}

/* A note exists - shows the content itself (ellipsis-truncated to one line, see .fav-filing-note-edit
   above), styled as a subtle preview like .favnotes rather than the bare-icon "add" state, since
   this is content, not a prompt. Still a link (click to edit). */
.fav-filing-note-preview {
    padding: 3px 8px;
    border-radius: 8px;
    background: #f3f4f7;
    color: #2b3a50;
    border: 1px solid #d8e0ed;
}

/* Icon before the note text, CSS-only so JS patching the link's text (applyFilingNoteToLink)
   never has to touch it. Same "note" theme as the apps' filingNoteBadge/FilingNoteBadge icon. */
.fav-filing-note-preview::before {
    content: "\1F4DD";
    margin-right: 4px;
}

.fav-filing-note-preview:hover,
.fav-filing-note-preview:focus {
    border-color: #a8c6f0;
}

#filingNoteText.fav-vat-input {
    max-width: none;
    width: 100%;
    resize: vertical;
}

/* One-time callout pointing at a row's Filing Note link, shown above it the first time a user
   ticks any deadline done. Positioned relative to the link's parent - now .fav-filing-note-cell,
   the <td> itself, since the note moved out from under the name into its own column
   (favlistsanddeadlines.js sets that parent's position:relative before appending this). */
.fav-filing-note-hint {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    background: #103b77;
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(16, 34, 59, 0.25);
    z-index: 1040;
}

.fav-filing-note-hint-arrow {
    display: inline-block;
    animation: fav-filing-note-hint-bounce 0.6s ease-in-out infinite alternate;
}

/* At the end of the tip - lets the user dismiss it early rather than waiting out the 4.5s
   auto-dismiss (favlistsanddeadlines.js's dismissHint() cancels that timer either way). */
.fav-filing-note-hint-close {
    border: 0;
    background: none;
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

.fav-filing-note-hint-close:hover,
.fav-filing-note-hint-close:focus {
    color: #fff;
}

@keyframes fav-filing-note-hint-bounce {
    from { transform: translateY(-3px); }
    to { transform: translateY(3px); }
}

@media (prefers-reduced-motion: reduce) {
    .fav-filing-note-hint-arrow {
        animation: none;
    }
}

/* ---------------------------------------------------------------------------------------------
   Toasts — transient confirmations for the deadline tick boxes.

   Hand-rolled rather than Bootstrap's .toast: this layout loads Bootstrap 5.1 CSS but Bootstrap
   4.6 JS, so $().toast() would be the BS4 plugin driving BS5-styled markup. The portal had no
   toast pattern at all before this.

   Top-right, not bottom-right, and z-index 2100 deliberately:
     - the cookie consent banner is fixed across the bottom at z-index 5000, so a bottom toast
       would either sit under it or cover a consent control. 2100 keeps the toast above the page
       and the sticky header (2000) but always below that banner.
     - the host is pointer-events:none so an empty or expiring toast never swallows a click on the
       page behind it; each toast turns pointer events back on for itself so it stays
       click-to-dismiss.
   --------------------------------------------------------------------------------------------- */

.fav-toast-host {
    position: fixed;
    top: 90px; /* clears the sticky header */
    right: 20px;
    z-index: 2100;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    pointer-events: none;
}

.fav-toast {
    pointer-events: auto;
    max-width: 340px;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.35;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(16, 34, 59, 0.22);
    /* Start state: nudged right and transparent. showFavActionMessage adds .is-visible on the
       next animation frame so the browser paints this first and the transition actually runs. */
    opacity: 0;
    transform: translateX(12px);
    transition: opacity 0.24s ease, transform 0.24s ease;
}

.fav-toast.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* First line: what happened. Second line: what it means. The detail line is deliberately lighter
   and smaller so the toast still reads at a glance for anyone who already knows. */
.fav-toast-title {
    font-weight: 600;
}

.fav-toast-detail {
    margin-top: 3px;
    font-size: 12px;
    font-weight: 400;
    opacity: 0.85;
}

.fav-toast-success {
    background: #eaf6ee;
    border: 1px solid #b6dcc3;
    color: #1c5232;
}

.fav-toast-error {
    background: #fdecec;
    border: 1px solid #f0bcbc;
    color: #8c2020;
}

@media (max-width: 575.98px) {
    .fav-toast-host {
        top: auto;
        bottom: 84px; /* above the cookie banner rather than under it */
        left: 12px;
        right: 12px;
        align-items: stretch;
    }

    .fav-toast {
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fav-toast {
        transition: none;
        transform: none;
    }
}

/* ---------------------------------------------------------------------------------------------
   Identity Verification panel (Favourites page) - Views/Home/_verificationListPartial.cshtml +
   js/idverification.js, plus the matching sidebar summary card in Favourites.cshtml. A due-date
   dashboard of officer/PSC cards mirroring the iOS/Android card screen. Desktop-first: the toolbar
   sits on one row and the cards form a two-column grid on laptop/desktop; below ~1000px the switch
   takes its own row and the grid drops to one column.
   --------------------------------------------------------------------------------------------- */
.idv-panel {
    padding: 24px 26px 26px;
    scroll-margin-top: 90px;
}

.idv-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #0d315f;
}

.idv-subtitle {
    margin: 4px 0 0;
    font-size: 14.5px;
    color: #587095;
}

.idv-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}

.idv-icon {
    display: inline-flex;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

.idv-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Officers / PSC switch */
.idv-segmented {
    display: flex;
    flex: 0 0 340px;
    gap: 4px;
    padding: 4px;
    background: #e8f1fe;
    border: 1px solid #d3e3fa;
    border-radius: 16px;
}

.idv-segment {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #123f80;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.idv-segment:hover {
    background: rgba(18, 63, 128, 0.07);
}

.idv-segment.is-selected {
    background: #123f80;
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(18, 63, 128, 0.22);
}

.idv-segment-count {
    min-width: 24px;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(18, 63, 128, 0.1);
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
}

.idv-segment.is-selected .idv-segment-count {
    background: rgba(255, 255, 255, 0.2);
}

/* Search + sort */
.idv-search,
.idv-sort {
    display: flex;
    align-items: center;
    height: 48px;
    margin: 0;
    border: 1px solid #cfe0f7;
    border-radius: 16px;
}

.idv-search {
    flex: 1 1 260px;
    gap: 10px;
    padding: 0 14px;
    background: #f3f8ff;
    color: #587095;
    cursor: text;
}

.idv-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 15px;
    color: #1f3551;
}

.idv-search input::placeholder {
    color: #7d92b1;
}

.idv-sort {
    position: relative;
    flex: 0 0 auto;
    gap: 8px;
    padding: 0 12px 0 14px;
    background: #ffffff;
    color: #123f80;
    cursor: pointer;
}

.idv-sort select {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    outline: 0;
    background: transparent;
    padding-right: 24px;
    font-size: 15px;
    font-weight: 600;
    color: #123f80;
    cursor: pointer;
}

.idv-sort-chevron {
    position: absolute;
    right: 12px;
    width: 16px;
    height: 16px;
    pointer-events: none;
}

.idv-search:focus-within,
.idv-sort:focus-within {
    border-color: #7fa9e6;
    box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.14);
}

/* "Show Unknown" toggle + help popover - reuses .myaccount-toggle-switch for the switch itself */
.idv-unknown-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.idv-unknown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    cursor: pointer;
}

.idv-unknown-toggle-label {
    font-size: 14px;
    font-weight: 600;
    color: #123f80;
}

.idv-unknown-help {
    position: relative;
    display: inline-flex;
}

.idv-unknown-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #7d92b1;
    cursor: pointer;
}

.idv-unknown-help-btn:hover,
.idv-unknown-help-btn:focus-visible {
    color: #123f80;
    background: rgba(18, 63, 128, 0.08);
}

.idv-unknown-help-btn .idv-icon {
    width: 20px;
    height: 20px;
}

.idv-unknown-help-popover {
    position: absolute;
    z-index: 5;
    top: calc(100% + 8px);
    left: 0;
    width: 260px;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid #cfe0f7;
    border-radius: 12px;
    box-shadow: 0 10px 26px rgba(18, 63, 128, 0.18);
    color: #1f3551;
    font-size: 13.5px;
    line-height: 1.45;
}

/* Cards */
.idv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr));
    gap: 14px;
    margin-top: 20px;
}

.idv-card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 16px 14px 16px 16px;
    background: #ffffff;
    border: 1px solid #dce7f8;
    border-radius: 18px;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.idv-card:hover {
    color: inherit;
    text-decoration: none;
    border-color: #b9d2f3;
    box-shadow: 0 10px 22px rgba(17, 56, 114, 0.09);
    transform: translateY(-1px);
}

.idv-segment:focus-visible,
.idv-card:focus-visible,
.idv-more:focus-visible {
    outline: 3px solid rgba(31, 111, 235, 0.45);
    outline-offset: 2px;
}

.idv-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #e3eefc;
    color: #123f80;
}

.idv-avatar .idv-icon {
    width: 22px;
    height: 22px;
}

.idv-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.idv-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.3;
    color: #0d315f;
}

.idv-company {
    margin-top: 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14.5px;
    color: #587095;
}

/* Wraps the pill under the date rather than squeezing either on a narrow card. */
.idv-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 10px;
    margin-top: 12px;
}

.idv-due {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: #123f80;
}

.idv-due-icon {
    width: 21px;
    height: 21px;
}

.idv-due-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.idv-due-label {
    font-size: 12px;
    color: #587095;
}

.idv-due-date {
    white-space: nowrap;
    font-size: 15px;
    font-weight: 600;
    color: #0d315f;
}

.idv-pill {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 6px;
    padding: 5px 12px 5px 7px;
    border-radius: 999px;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
}

.idv-pill .idv-icon {
    width: 17px;
    height: 17px;
}

.idv-pill-due {
    background: #fff1dc;
    color: #b86e00;
}

.idv-pill-notdue {
    background: #e2f4ef;
    color: #1f7a6b;
}

.idv-pill-overdue {
    background: #fde8ea;
    color: #c62828;
}

.idv-pill-unknown,
.idv-pill-notrequired {
    background: #edf1f6;
    color: #5b6b7f;
}

.idv-pill-verified {
    background: #e6eef8;
    color: #23507e;
}

.idv-chevron {
    width: 16px;
    height: 16px;
    color: #9bb0cc;
}

.idv-card:hover .idv-chevron {
    color: #123f80;
}

/* Empty / message / paging */
.idv-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 36px 16px 16px;
    text-align: center;
    color: #587095;
}

.idv-empty-title {
    font-size: 17px;
    color: #0d315f;
}

.idv-message {
    margin-top: 16px;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid #dce7f8;
    border-radius: 14px;
    color: #587095;
}

.idv-more-wrap {
    margin-top: 18px;
    text-align: center;
}

.idv-more {
    padding: 9px 18px;
    background: #ffffff;
    border: 1px solid #cfe0f7;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #123f80;
}

.idv-more:hover {
    background: #f3f8ff;
}

/* Sidebar summary card */
.idv-summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.idv-summary-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 8px;
    padding: 9px 11px;
    background: #ffffff;
    border: 1px solid #dce7f8;
    border-radius: 12px;
}

.idv-summary-label {
    font-size: 14px;
    font-weight: 700;
    color: #0d315f;
}

.idv-summary-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.idv-count {
    padding: 3px 9px;
    border-radius: 999px;
    background: #edf1f6;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    color: #5b6b7f;
}

.idv-count-due {
    background: #fff1dc;
    color: #b86e00;
}

.idv-count-overdue {
    background: #fde8ea;
    color: #c62828;
}

.idv-summary-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #123f80;
    text-decoration: none;
}

.idv-summary-link:hover {
    color: #0f3d80;
    text-decoration: underline;
}

.idv-summary-link .idv-icon {
    width: 14px;
    height: 14px;
}

@media (max-width: 991.98px) {
    .idv-segmented {
        flex: 1 1 100%;
    }
}

@media (max-width: 575.98px) {
    .idv-panel {
        padding: 18px 14px;
    }

    .idv-title {
        font-size: 20px;
    }

    /* Too narrow for search and sort side by side - give each its own full-width row rather than
       leaving sort stranded half-width under the search box. */
    .idv-search,
    .idv-sort {
        flex: 1 1 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .idv-card,
    .idv-segment {
        transition: none;
    }

    .idv-card:hover {
        transform: none;
    }
}

/* ---------------------------------------------------------------------------------------------
   Favourites page tabs: Favourites / Identity Verification (Favourites.cshtml + js/favouritestabs.js).
   The two headers are deliberately different colours - navy for Favourites, teal for Identity
   Verification - so the second tab reads as its own thing even when not selected. The hint above the
   IDV tab (bouncing arrow, dismissible) is shown until dismissed or the tab is opened.
   --------------------------------------------------------------------------------------------- */
.fav-tabs-wrap {
    margin-bottom: 10px;
    scroll-margin-top: 90px;
}

.fav-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 5px;
    background: #ffffff;
    border: 1px solid #dce7f8;
    border-radius: 18px;
    box-shadow: 0 8px 18px rgba(17, 56, 114, 0.06);
}

.fav-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 50px;
    padding: 6px 12px;
    border: 0;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.fav-tab .idv-icon {
    width: 19px;
    height: 19px;
}

.fav-tab:focus-visible {
    outline: 3px solid rgba(31, 111, 235, 0.45);
    outline-offset: 2px;
}

.fav-tab-favourites {
    background: #eef4fd;
    color: #123f80;
}

.fav-tab-favourites:hover {
    background: #e2ecfb;
}

.fav-tab-favourites.is-active {
    background: #123f80;
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(18, 63, 128, 0.22);
}

.fav-tab-idv {
    background: #e4f4f1;
    color: #0f6b62;
}

.fav-tab-idv:hover {
    background: #d6eee9;
}

.fav-tab-idv.is-active {
    background: #0f6b62;
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(15, 107, 98, 0.26);
}

/* The shield's tick is drawn in the tab's background colour, so it inverts with the tab. */
.fav-tab-shield-check {
    stroke: #e4f4f1;
}

.fav-tab-idv.is-active .fav-tab-shield-check {
    stroke: #0f6b62;
}

.fav-tab-count {
    padding: 1px 9px;
    border-radius: 999px;
    background: rgba(18, 63, 128, 0.12);
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
}

.fav-tab.is-active .fav-tab-count {
    background: rgba(255, 255, 255, 0.22);
}

/* Due-soon + overdue count on the IDV tab - amber, or red once anything is overdue. */
.fav-tab-alert {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: #c77700;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
}

.fav-tab-alert.is-overdue {
    background: #c62828;
}

.fav-tab.is-active .fav-tab-alert {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}

/* "New" hint over the IDV tab (the right-hand half of the tab bar). */
.idv-tab-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    margin-left: 50%;
    padding: 0 4px 6px;
}

.idv-tab-hint-bubble {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 440px;
    padding: 10px 10px 10px 14px;
    background: #0f6b62;
    border-radius: 14px;
    box-shadow: 0 10px 22px rgba(15, 107, 98, 0.25);
    color: #ffffff;
    font-size: 13.5px;
    line-height: 1.4;
}

.idv-tab-hint-close {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-size: 17px;
    line-height: 24px;
    cursor: pointer;
}

.idv-tab-hint-close:hover,
.idv-tab-hint-close:focus-visible {
    background: rgba(255, 255, 255, 0.32);
}

.idv-tab-hint-arrow {
    display: inline-flex;
    width: 24px;
    height: 24px;
    margin-top: 4px;
    color: #0f6b62;
    animation: idvHintBounce 1.1s ease-in-out infinite;
}

.idv-tab-hint-arrow svg {
    width: 100%;
    height: 100%;
}

@keyframes idvHintBounce {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(6px);
    }
}

@media (max-width: 767.98px) {
    .idv-tab-hint {
        width: 100%;
        margin-left: 0;
        align-items: flex-end;
    }

    /* Keep the arrow over the right-hand (IDV) tab once the bubble spans the full width. */
    .idv-tab-hint-arrow {
        margin-right: 22%;
    }
}

@media (max-width: 575.98px) {
    .fav-tab {
        gap: 6px;
        padding: 6px 8px;
        font-size: 14px;
    }

    .fav-tab .idv-icon {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .idv-tab-hint-arrow {
        animation: none;
    }

    .fav-tab {
        transition: none;
    }
}

/* "Still checking" banner in the Identity Verification panel - VerificationResponse.RefreshStatus,
   shown while the API's VerificationRefreshWorker is still checking recently added/imported favourites. */
.idv-refresh-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 16px;
    padding: 12px 14px;
    background: #eef5ff;
    border: 1px solid #cfe0f7;
    border-radius: 14px;
    color: #1f3551;
    font-size: 14px;
    line-height: 1.45;
}

.idv-refresh-banner-warning {
    background: #fff6e8;
    border-color: #f5d9a8;
}

.idv-refresh-banner-icon {
    width: 20px;
    height: 20px;
    margin-top: 1px;
    color: #123f80;
}

.idv-refresh-banner-warning .idv-refresh-banner-icon {
    color: #b86e00;
}

.idv-refresh-banner-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.idv-refresh-banner-text strong {
    font-size: 14.5px;
    color: #0d315f;
}

.idv-refresh-banner-action {
    flex: 0 0 auto;
    align-self: center;
    padding: 6px 12px;
    background: #ffffff;
    border: 1px solid #cfe0f7;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #123f80;
    cursor: pointer;
}

.idv-refresh-banner-action:hover {
    background: #f3f8ff;
}

/* ---------------------------------------------------------------------------------------------
   PayrollPostie promo - first panel in the Favourites (compact view) sidebar. See Favourites.cshtml.
   Violet so it stands apart from the page's navy/teal tabs and amber/red due-date pills;
   pale enough not to compete with the favourites table.
   --------------------------------------------------------------------------------------------- */
.pp-promo {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    border-radius: 16px;
    color: #3b2f7a;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.pp-promo:hover,
.pp-promo:focus-visible {
    background: #ede9fe;
    border-color: #c4b5fd;
    color: #3b2f7a;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(76, 29, 149, 0.10);
}

.pp-promo-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
}

.pp-promo-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.pp-promo-title {
    font-size: 14px;
    line-height: 1.35;
}

.pp-promo-title strong {
    font-weight: 700;
}

/* Visual cue only - the whole banner is the link. */
.pp-promo-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 4px;
    vertical-align: -3px;
    border-radius: 50%;
    background: #5b47c7;
    color: #ffffff;
    transition: transform 0.15s ease;
}

.pp-promo-arrow svg {
    width: 11px;
    height: 11px;
}

.pp-promo:hover .pp-promo-arrow {
    transform: translateX(2px);
}

.pp-promo-copy {
    font-size: 12.5px;
    line-height: 1.4;
    color: #5a5185;
}