.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;
}

/* The page body sits inside the layout's own 12px gutter (_PortalLayout.cshtml container-fluid) and then
   its shell's padding (10px on a standard page), so the header gets both: 12 + 10 = 22px, in a box 24px
   wider than the 1450px content cap. That puts the logo and the account area on the same left and right
   edges as the content below, on a laptop and on a wide monitor alike. */
.portal-header-inner {
    max-width: 1474px;
    padding-left: 22px;
    padding-right: 22px;
}

.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;
}

/* The deadline types the product tracks, under the hero line. Plain list items, not links: the same
   pill shape as .phase1-pill-link, a little larger because this is the first thing a visitor reads. */
/* The pills and the button row under them share one width (--hero-actions-width, set on
   .banner_section below), so their left and right edges line up. */
.banner_section {
    --hero-actions-width: 510px;
}

.homepage-deadline-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: var(--hero-actions-width);
    max-width: 100%;
    margin: 14px 0 10px;
    padding: 0;
    list-style: none;
}

.homepage-deadline-pills li {
    border: 1px solid #bfd5fa;
    border-radius: 999px;
    background: #e6efff;
    color: #19498f;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    padding: 4px 10px;
    flex: 1 1 auto;
    text-align: center;
}

.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: flex-start;
    gap: 10px;
    width: var(--hero-actions-width);
    max-width: 100%;
    margin-top: 12px;
    margin-bottom: 8px;
}

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

/* Two equal halves of the row. The download button sits inside its dropdown wrapper, so the wrapper is
   the flex item and the button fills it. */
.homepage-openportal-btn {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    height: 46px;
    justify-content: center;
    white-space: nowrap;
}

.homepage-download-wrap {
    flex: 1 1 0;
    min-width: 0;
}

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

.homepage-legal-note {
    margin: 10px 0 0;
    max-width: 520px;
    text-align: left;
    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: #0f3d80;
    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: #0f3d80;
    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-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-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;
}

/* Sep 2026 tracker layout: no box of its own any more - the toolbar sits straight on the panel,
   the same as the Self Assessment and Identity Verification toolbars. */
.fav-toolbar {
    color: #1f3551;
    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;
}

/* Tracked-date filter dropdown (funnel equivalent) - JS-driven, not Bootstrap's own
   data-toggle="dropdown", so ".show" is toggled by favspage.js rather than closing on the first
   inner click. Reuses Bootstrap's own .dropdown-menu/.show display rule. */
.fav-date-filter-dropdown.fav-date-filter-active #favDateFilterToggle {
    background: #0f3d80;
    color: #ffffff;
    border-color: #0f3d80;
}

.fav-date-filter-menu {
    min-width: 190px;
    padding: 4px 0;
}

.fav-date-filter-menu-header {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #6b7f9c;
    padding: 6px 14px 4px;
}

.fav-date-filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.fav-date-filter-item input {
    margin: 0;
    width: 15px;
    height: 15px;
    accent-color: #0f3d80;
}

/* A type the user isn't tracking yet: greyed name, blue "Set up tracking" on the right where a
   checkbox would otherwise be, opening the tracked-dates dialog. Mirrors the iOS panel's rows. */
.fav-date-filter-untracked {
    justify-content: space-between;
    gap: 16px;
}

.fav-date-filter-untracked-label {
    color: #9aa7ba;
}

.fav-date-filter-setup-link {
    color: #0f3d80;
    font-size: 13px;
    font-weight: 600;
}

/* The subtle "Filtering by: Accounts, VAT" line - quieter than .fav-total on purpose, since it
   sits directly under the filter box the user is already looking at. Mirrors iOS/Android's
   equivalent banner under their own search field. */
.fav-date-filter-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #5b6b82;
    margin-top: 6px;
}

.fav-date-filter-banner button {
    background: none;
    border: none;
    color: #5b6b82;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}

.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;
}

/* Shared header look for all three Favourites-page tabs' tables (#favs, #idvTable, #saTable) - same
   background, text colour and border everywhere so the tables read as one family as the user
   switches tabs. #idvTable/#saTable have no sort-arrow classes of their own (idverification.js and
   selfassessment.js build static headers, unlike #favs's DataTables), so padding-right is scoped to
   #favs only - it exists purely to keep #favs's sort arrow off the header text. */
#favs thead th,
#idvTable thead th,
#saTable thead th {
    background: #edf4ff;
    color: #0d315f;
    border-bottom: 1px solid #c8dcfb !important;
    position: sticky;
    top: 0;
    z-index: 2;
    background-image: none !important;
}

/* 16px, not 26px (Sep 2026): enough for the small sort arrow, and 10px back in every column. */
#favs thead th {
    padding-right: 16px !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: 4px;
    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;
}

/* Was nth-child(4)/(5)/(6), shifted each time a column was inserted before the date columns
   (Filing Note, then the six tracked-date columns below) - migrated to this class selector so a
   column count change never needs an index recalculation again. Every date-shaped column (the
   original three plus the six from §6) carries .fav-col-date, .fav-col-date-tracked besides. */
#favs td.fav-col-date 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. */
#favs td.fav-col-date {
    white-space: nowrap;
}

#favs td.fav-col-date a:hover {
    color: #22354f;
}

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

/* Column widths for an auto-layout table (#favs has no table-layout:fixed), expressed as "who
   absorbs the spare width" rather than as a set of percentages.

   This used to be .fav-col-name 20% + nine date columns at 8.9% each, summing to ~100% so that the
   "#" counter column, which declares no width, was left with the sliver. It did not hold up: the
   sliver is whatever is left AFTER the percentages resolve, so any rounding or any column whose
   content exceeded its percentage handed the surplus straight back to "#" - the one column that
   should never grow.

   Now: Name takes all the slack (width:100%, which an auto-layout table reads as "give this column
   everything the others do not need"), the nine date columns hold a floor instead of a share, and
   "#" is left at its own min-content. Name is the right column to flex - it is the only one whose
   content is genuinely variable-length.

   The floor matters as much as the flex: without it, Name's width:100% squeezes every date column
   to min-content, and since .fav-deadline-line is flex-wrap:wrap the tick box and the date then
   break onto separate lines. 108px fits "[tick] 31/08/27" on one line, and the widest header
   ("CT600 Pay", plus the 26px this table reserves for a sort arrow) without wrapping. */
.fav-col-name {
    width: 100%;
}

.fav-col-date,
.fav-col-date-tracked {
    min-width: 108px;
}

/* Headers must not wrap either: a two-line "CT600 Pay" is the visible symptom of a column that has
   been squeezed below its floor, and it throws the whole header row out of alignment. */
#favs thead th.fav-col-date {
    white-space: nowrap;
}

/* A dash rather than an empty cell - written by trackeddates.js when a tracked type isn't
   available at all, or a non-CT type somehow has no due date. Reads clearly as "nothing here"
   rather than looking like missing data - same treatment as the Self Assessment table's
   .sa-col-date-empty. */
.fav-col-date-tracked.fav-col-date-empty {
    text-align: center;
    color: #b9c4d6;
    white-space: normal;
}

/* 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;
}

/* A row's "Track for this company" menu (trackeddates.js renderRowTrackMenus). Its menu reuses the
   date filter's .fav-date-filter-* item styles, so the two dropdowns read as one family. */
.tdl-row-track {
    position: relative;
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
}

.tdl-row-track-btn {
    border: 1px solid rgba(15, 61, 128, 0.28);
    border-radius: 6px;
    background: #ffffff;
    color: #0f3d80;
    font-size: 14px;
    line-height: 1;
    padding: 2px 6px;
    cursor: pointer;
}

.tdl-row-track-menu {
    min-width: 190px;
    padding: 4px 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;
}

/* Company Notes and Filing Note are two DIFFERENT fields sitting side by side, and as two plain
   grey pills they were easy to read as one thing said twice. They now share a shape and differ in
   colour, and each names itself ("Company Notes:" / "Filing Note:") - similar, deliberately not
   identical. Both are links into their own edit dialog.

   Structure (see _favouritesCompactViewPartial.cshtml): label + text + pencil, laid out by this
   rule. Truncation moved off the badge itself onto .fav-note-text below, so the label and the
   pencil always stay readable however long the note is. */
.fav-note-badge {
    gap: 5px;
    padding: 0 6px 0 8px;
    text-decoration: none !important;
    /* Close to what the two badges took between them before they carried labels (220px + 150px),
       so the Name column - which is 20% of the table, not the whole of it - still fits the reg
       number and both notes without the row growing a line for each. The note text ellipsises;
       the label and the pencil never do. */
    max-width: 210px;
}

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

/* Which field this is. Always shown, including on an empty note - naming the field is the whole
   point of it. */
.fav-note-label {
    flex: none;
    font-weight: 700;
    opacity: 0.72;
    white-space: nowrap;
}

/* The note itself - the only part allowed to shrink and ellipsis, so a long note eats its own
   space rather than the label's or the pencil's. min-width:0 is what lets a flex item shrink
   below its content width at all. */
.fav-note-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Edit affordance. The whole badge is clickable - this just says so. */
.fav-note-pencil {
    flex: none;
    opacity: 0.55;
    font-size: 11px;
}

.fav-note-badge:hover .fav-note-pencil,
.fav-note-badge:focus .fav-note-pencil {
    opacity: 1;
}

/* Nothing written yet: the badge still renders (it is where you go to add one) but reads as a
   prompt rather than as content - the placeholder "Add" is muted and the pill loses its fill. */
/* Two classes deep so it beats .favnotes' own !important fill below (same specificity would lose
   on source order). */
.fav-note-badge.fav-note-empty {
    background: transparent !important;
    border-style: dashed;
}

.fav-note-empty .fav-note-text {
    opacity: 0.6;
    font-style: italic;
}

.favnotes {
    /* Company Notes colour only - shape/sizing/type come from the shared .favregno, .favnotes rule
       above and the .fav-note-badge layout rule. Neutral grey, against the Filing Note's warmer
       tint below. */
    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,
.fav-filing-note-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;
}

/* The "#" counter column: its 22px badge plus a little padding, and never a pixel more. width:1px
   is how you say that to an auto-layout table - the browser cannot honour a width below the
   content, so it falls back to the column's min-content.

   That only holds while some OTHER column is willing to take the spare width, which is why this
   rule and .fav-col-name's width:100% above are a pair - neither works alone. Without the flexible
   name column the leftover lands back here; without this the name column's slack would be shared
   out proportionally instead.

   Also needs autoWidth:false on the DataTable (favspage.js): otherwise DataTables measures the
   rendered table and writes its own pixel width onto every <th>, which beats all of this and is
   what used to leave this column ~200px wide for a two-digit number. */
#favs .fav-col-index,
#favs .fav-index-cell {
    width: 1px;
    white-space: nowrap;
    text-align: center;
    padding-left: 8px !important;
    /* Overrides the 26px that #favs thead th reserves for the sort arrow - this column is
       orderable:false, so it never draws one. */
    padding-right: 8px !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-openportal-btn,
    .homepage-download-wrap {
        flex: none;
    }

    .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.
   --------------------------------------------------------------------------------------------- */

/* Tick box + date on the first line, badge below it on its own line - a wrapping flex row rather
   than the badge being absolutely positioned against the cell (which centred it against the FULL
   height of the cell, so it floated visibly below the date whenever the name column carried notes
   or a registration number) or sharing the date's line (which made every date column wider than
   just the date needed to be - see #favs .favourites-due-date-badge's flex-basis:100% below,
   which is what forces the wrap). */
.fav-deadline-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 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. flex-basis:100% forces it onto its own line under the tick+date (its parent,
   .fav-deadline-line above, is flex-wrap:wrap) rather than sharing the line - with nine date
   columns all the same narrow width (see .fav-col-date/.fav-col-date-tracked), there isn't room
   for a badge beside the date as well. */
#favs .favourites-due-date-badge {
    position: static;
    transform: none;
    right: auto;
    top: auto;
    margin-left: 0;
    flex: 1 0 100%;
    font-size: 10px;
    padding: 2px 6px;
    min-width: 0;
    text-align: center;
}

/* 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;
}

/* No date to show for this deadline (Accounts/CS01/VAT NextXDueByString comes back "Not Available"
   for a company with nothing due). Wraps onto two lines ("Not" / "Available") rather than forcing
   the column wide enough for one - the nine date columns are all the same narrow width now (see
   .fav-col-date/.fav-col-date-tracked), sized to just fit a date, not this longer phrase. */
/* Sep 2026: a small grey badge rather than two lines of full-size text, so it sits on one line
   beside the tick like a date does. */
.fav-date-unavailable {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 999px;
    background: #edf1f6;
    color: #5b6b7f;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
}

/* An untracked favourite has no VAT date to show, so this link has to read as an action rather
   than as a missing value. Wraps onto two lines for the same reason as .fav-date-unavailable above
   - "+ Add VAT tracking" is longer than any of the narrow date columns are sized for. */
.fav-vat-add {
    display: inline-block;
    white-space: normal;
    max-width: 72px;
    line-height: 1.15;
    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 Company Notes/.favnotes above, edited via
   #filingNoteContainer (reuses .fav-vat-overlay/.fav-vat-card/etc. - same dialog shape as VAT).
   Sits in .fav-name-meta-row next to Company Notes (Sep 2026 - used to be its own table column,
   .fav-col-filing-note/.fav-filing-note-cell, both now gone) so the table has one fewer column.

   Same badge shape as Company Notes (.fav-note-badge above) in a warmer tint, so the two read as
   the same KIND of thing without reading as the same thing. The old bare-pencil "add" state and
   the 'U+1F4DD' ::before icon are both gone: every note badge now carries its own name in text,
   which says more than an emoji did and works the same whether or not a note exists yet. */
.fav-filing-note-edit {
    display: inline-flex;
    align-items: center;
    height: 24px;
    border-radius: 999px;
    font-weight: 500;
    font-size: 0.7em;
    line-height: 1;
    vertical-align: middle;
    background: #fff6e9;
    color: #6a4a15;
    border: 1px solid #f0dcb6;
}

#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 - .fav-filing-note-wrap, the
   <span> the note link sits in inside .fav-name-meta-row (favlistsanddeadlines.js sets that
   parent's position:relative before appending this, so it isn't hardcoded here). */
.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;
}

/* Sep 2026 tracker layout: the options sit straight on the panel, like the favourites table's
   .fav-toolbar and the Self Assessment toolbar. The shaded box they used to share is gone. */
.idv-options-panel {
    color: #1f3551;
    margin-top: 18px;
    margin-bottom: 10px;
}

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

.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;
}

/* Table (Sep 2026) - was a card grid (.idv-grid/.idv-card etc, now removed); one row per
   officer/PSC, like the favourites table. idverification.js still owns filtering/sorting/paging -
   only the row shape changed. Reuses .phase1-table-shell/.fav-col-index/.fav-item-number from the
   favourites table so the two read as one family. */
.idv-table-scroll {
    overflow-x: auto;
}

#idvTable {
    width: 100%;
    margin-top: 20px;
}

.idv-row {
    cursor: pointer;
}

.idv-row:hover {
    background: #f6f9ff;
}

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

.idv-col-name {
    font-weight: 600;
    color: #0d315f;
}

.idv-col-company {
    color: #587095;
    white-space: nowrap;
}

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

.idv-due-date {
    white-space: nowrap;
    font-size: 13.5px;
    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;
}

/* 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;
}

@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-segment {
        transition: 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: 46px;
    padding: 5px 12px;
    border: 0;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 500;
    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;
    font-weight: 600;
    box-shadow: 0 6px 14px rgba(18, 63, 128, 0.22);
}

/* Sep 2026: every tab used to have its own colour (navy/teal/violet) "so it reads as its own
   thing even when not selected" - now unified to the Favourites tab's navy so the bar reads as
   one row of equal tabs instead of a rainbow. Identity Verification, Dates to Track and Self
   Assessment all just inherit .fav-tab-favourites' colours; nothing below overrides background
   or color any more, only the shield-check stroke (which has to track whatever the background is). */
.fav-tab-idv,
.fav-tab-tdl,
.fav-tab-sa {
    background: #eef4fd;
    color: #123f80;
}

.fav-tab-idv:hover,
.fav-tab-tdl:hover,
.fav-tab-sa:hover {
    background: #e2ecfb;
}

.fav-tab-idv.is-active,
.fav-tab-tdl.is-active,
.fav-tab-sa.is-active {
    background: #123f80;
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 6px 14px rgba(18, 63, 128, 0.22);
}

/* The shield's tick is drawn in the tab's background colour, so it inverts with the tab. */
.fav-tab-shield-check {
    stroke: #eef4fd;
}

.fav-tab-idv.is-active .fav-tab-shield-check {
    stroke: #123f80;
}

/* The Favourites count - a light grey pill (Sep 2026 tracker layout), the same on the selected
   (navy) tab and the others. */
.fav-tab-count {
    padding: 1px 9px;
    border-radius: 999px;
    background: #edf1f6;
    color: #33465f;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
}

.fav-tab.is-active .fav-tab-count {
    background: #edf1f6;
    color: #33465f;
}

/* Due-soon + overdue count on the IDV tab - a red pill with white text (Sep 2026 tracker layout;
   it used to be amber until something was overdue). The tooltip still says how many of each. */
.fav-tab-alert {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: #c62828;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
}

.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;
}

/* ==========================================================================
   Tracked Dates ("Dates to track" - CT600/PAYE/CIS/P11D/Class 1A) - UI/mock
   pass, see CursorPlans/Favourites_Tracked_Dates.md. Values are generated
   client-side in wwwroot/js/trackeddates.js; wiring to api/TrackedDeadlines
   is a later pass. Class prefix "tdl-" throughout. Reuses .fav-vat-overlay/
   .fav-vat-card/.modern-btn* for the two dialogs rather than inventing a new
   dialog shape - same BS5-CSS/BS4-JS constraints as the VAT and Filing Note
   editors apply here too.
   ========================================================================== */

/* The "Dates to Track" rows in the Favourites page's unified summary panel used to be a tile
   grid of their own (.tdl-summary-tile etc) in a separate strip card. Sep 2026 folded all four
   summary sources (Filing Deadlines, Dates to Track, Self Assessment, Identity Verification)
   into one flat "one row per date type" panel, so trackeddates.js now writes plain
   .fav-stat-row elements into #tdlSummaryGrid - see the shared row/pill vocabulary below - and
   the tile classes were deleted along with their only caller. #tdlSummaryGrid itself just needs
   to pass its rows' spacing through to the panel's flex column. */
/* display: contents so its .fav-stat-row children become direct items of the parent
   .fav-strip-card-body grid (each its own cell, sharing the 2-column layout) instead of being
   trapped inside one tall box that would only ever occupy a single column. The [hidden] override
   is needed because an ID selector otherwise beats the UA stylesheet's [hidden] { display: none }
   rule - without it, trackeddates.js setting summaryGridEl.hidden = true would have no visible
   effect (harmless today only because that code path also empties innerHTML in the same breath). */
#tdlSummaryGrid {
    display: contents;
}

#tdlSummaryGrid[hidden] {
    display: none;
}

/* Main "Dates to Track" tab panel - a grid of favourite cards rather than a
   single scrolling column, using the extra width a laptop screen gives the
   page's main column (the full width of .fav-main-layout since the sidebar
   went) that the phone/tablet apps never have. Padding matches .idv-panel so
   the three tab panels feel like one family. */
.tdl-tab-panel {
    padding: 24px 26px 26px;
    scroll-margin-top: 90px;
}

.tdl-panel-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.tdl-panel-hint {
    font-size: 12.5px;
    color: #5f7593;
    max-width: 620px;
}

.tdl-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

.tdl-card {
    background: #ffffff;
    border: 1px solid #dce7f8;
    border-radius: 12px;
    padding: 12px 14px;
}

.tdl-card-name {
    font-weight: 700;
    color: #113764;
    font-size: 14px;
    margin-bottom: 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The service caption over each pair of pills (Sep 2026) - CT600 / PAYE / CIS / Annual, the
   server's own Group. Each pill then carries only the word the caption does not already say
   ("Return", "Payment", "FPS"), so "CT600 Return" never reads twice. */
.tdl-card-group {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #5f7593;
    border-top: 1px solid #e6ecf6;
    padding-top: 7px;
    margin: 9px 0 5px;
}

.tdl-card-name + .tdl-card-group {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}

.tdl-pill-row {
    display: flex;
    gap: 6px;
}

.tdl-pill-row + .tdl-pill-row {
    margin-top: 6px;
}

.tdl-pill {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-radius: 10px;
    padding: 6px 4px;
    text-align: center;
    border: 1px solid #c6dbfb;
    background: #eef5ff;
    color: #184a8d;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.tdl-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(17, 56, 114, 0.12);
}

.tdl-pill.is-busy {
    opacity: 0.55;
    pointer-events: none;
}

.tdl-pill-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.tdl-pill-date {
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.tdl-pill.tdl-due {
    background: #fff5dd;
    border-color: #f1d393;
    color: #7a4b03;
}

.tdl-pill.tdl-overdue {
    background: #ffefef;
    border-color: #f2c5c5;
    color: #8a1f1f;
}

/* Ticked done. It stays showing until its date has passed, then moves on to the next period. */
.tdl-pill.tdl-done {
    background: #e6f4ea;
    border-color: #b7dfc3;
    color: #0d5a26;
}

/* "+ Add YE" and "+ Add payday": a pill with no date behind it, which OPENS something rather than
   marking anything done. "+ Add payday" is the longer of the two, so the date line shrinks to fit
   a third of a card's width rather than wrapping. */
.tdl-pill.tdl-addye {
    background: #f3f4f7;
    border-color: #d8e0ed;
    color: #5f7593;
}

.tdl-pill.tdl-addye .tdl-pill-date {
    font-size: 11px;
    white-space: nowrap;
}

/* The DATE half of a Corporation Tax pill opens the date editor while the rest of the pill still
   marks it done - the same split the VAT chip uses. Underlined on hover so it reads as its own
   target rather than part of the pill's one click. */
.tdl-pill-date-edit {
    cursor: pointer;
    border-bottom: 1px dashed currentColor;
}

.tdl-pill-date-edit:hover {
    border-bottom-style: solid;
}

/* "estimated" - this date is the CALCULATED one (year end + 9 months and 1 day, or + 12 months),
   not one the user has checked. Spelled out in full rather than abbreviated: with two pills to a
   row there is room, and "est." read as part of the date, or not at all. Quiet on purpose - it is
   a note beside the date, not a warning about it, and every CT600 date starts out wearing it. */
.tdl-pill-est {
    margin-left: 4px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: lowercase;
    opacity: 0.6;
    border-bottom: none;
}

/* The same date-opens-the-editor affordance in the favourites table, where it is a real link so
   keyboard users can reach it - the panel's pill is one composite control and cannot offer both. */
.tdl-fav-editdue {
    color: inherit;
    text-decoration: none;
}

/* Only an estimated date is underlined (Sep 2026 tracker layout). */
.tdl-fav-editdue.is-estimated {
    border-bottom: 1px dashed currentColor;
}

.tdl-fav-editdue:hover,
.tdl-fav-editdue:focus {
    color: inherit;
    border-bottom-style: solid;
}

/* A dated PAYE FPS: the date reopens the payday chooser. It is a real date, not an estimate, so no
   underline until hovered - and a weekly-style payroll says how often next to it. */
.tdl-fav-editpayday {
    color: inherit;
    text-decoration: none;
}

.tdl-fav-editpayday:hover,
.tdl-fav-editpayday:focus {
    color: inherit;
    border-bottom: 1px solid currentColor;
}

.tdl-fav-frequency {
    font-size: 11px;
    color: #5f7593;
    margin-left: 4px;
}

/* Getting year ends from Companies House: a determinate bar and a count, because the user is
   explicitly waiting on this and "how much longer" is the only question they have. */
.tdl-fetch-body {
    padding: 4px 0 8px;
}

.tdl-fetch-hint {
    font-size: 12px;
    color: #5f7593;
    margin-bottom: 12px;
}

.tdl-fetch-bar {
    height: 8px;
    border-radius: 4px;
    background: #eef1f6;
    overflow: hidden;
}

.tdl-fetch-bar-fill {
    height: 100%;
    width: 0;
    border-radius: 4px;
    background: #2f6fb5;
    transition: width 0.25s ease;
}

.tdl-fetch-count {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #33475b;
}

/* "Also update the ... date" - the tick box on the Corporation Tax date dialog. The whole label is
   the target, and the hint under it changes with the box so the consequence is always on screen. */
.tdl-pair-field {
    border-top: 1px solid #e3e8f0;
    padding-top: 10px;
}

.tdl-pair-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    cursor: pointer;
    font-weight: 400;
}

.tdl-pair-check input {
    margin-top: 2px;
    flex: 0 0 auto;
}

.tdl-pair-check .tdl-pair-title {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #33475b;
}

.tdl-pill-placeholder {
    flex: 1 1 0;
    visibility: hidden;
}

.tdl-empty-state {
    text-align: center;
    padding: 34px 16px;
    color: #5f7593;
    font-size: 13.5px;
}

.tdl-empty-state strong {
    color: #113764;
    font-size: 15px;
}

/* Selection popup ("Dates to track" sheet) - reuses .fav-vat-overlay/.fav-vat-card. */
.tdl-modal-card {
    max-width: 640px;
}

/* Save/Cancel swap the tiles for the sign-off below rather than closing the dialog, the way the
   two apps animate them out from under an unchanged "Dates to track" heading. */
.tdl-selection-fade {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.tdl-selection-fade.is-hiding {
    opacity: 0;
    transform: translateY(-8px);
}

.tdl-done {
    /* Delayed so the tiles are most of the way out before this arrives. */
    animation: tdlDoneIn 0.26s ease 0.06s both;
    text-align: center;
    padding: 4px 0 2px;
}

/* The [hidden] attribute alone would lose to any display rule this element picks up later. */
.tdl-done[hidden] {
    display: none;
}

.tdl-done-message {
    margin: 0 auto 14px;
    max-width: 420px;
    font-size: 14px;
    line-height: 1.5;
    color: #1f3551;
}

/* The toolbar button's own label, quoted inline so there is nothing to hunt for. */
.tdl-done-target {
    font-weight: 700;
    color: #103b77;
    white-space: nowrap;
}

@keyframes tdlDoneIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tdl-selection-fade,
    .tdl-done {
        transition: none;
        animation: none;
    }
}

.tdl-group-title {
    font-weight: 700;
    color: #103b77;
    font-size: 13px;
    margin: 14px 0 8px;
}

.tdl-group-title:first-of-type {
    margin-top: 0;
}

.tdl-tile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.tdl-tile {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border: 1px solid #c6dbfb;
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    background: #f8fafe;
    transition: border-color 0.14s ease, background-color 0.14s ease, box-shadow 0.14s ease;
}

.tdl-tile:hover {
    border-color: #9fc0ef;
}

.tdl-tile.is-selected {
    border-color: #1f6feb;
    background: #eef5ff;
    box-shadow: 0 0 0 2px rgba(31, 111, 235, 0.14);
}

.tdl-tile input[type="checkbox"] {
    margin-top: 2px;
    flex: 0 0 auto;
}

.tdl-tile-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tdl-tile-title {
    font-weight: 700;
    font-size: 13px;
    color: #1f3551;
}

.tdl-tile-rule {
    font-size: 11.5px;
    color: #5f7593;
    margin-top: 1px;
}

/* The Corporation Tax tiles' extra line, saying their calculated date can be changed per company.
   Server-driven (TrackedDeadlineCatalogue.NoteText); a tile without one is unchanged. */
.tdl-tile-note {
    font-size: 10.5px;
    color: #1f3551;
    opacity: 0.75;
    margin-top: 2px;
}

@media (max-width: 575.98px) {
    .tdl-tile-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- The three Setup buttons, the shared company picker and the payday chooser (Sep 2026) -----
   CT600 / PAYE / CIS are chosen PER COMPANY now, through one picker opened by one of three
   buttons, instead of being per-user tick tiles. The web equivalent of the apps' Setup screens -
   TrackedDeadlineCompanyPickerScreen.swift / .kt - as an overlay on top of the "Dates to track"
   panel, reusing .fav-vat-overlay/.fav-vat-card like every other dialog on this page. */
/* Wider than the other dialogs so the three setups sit side by side as cards. Below 768px the
   cards stack, one per row. */
.tdl-selection-card {
    max-width: 880px;
    padding: 22px 26px 20px;
}

.tdl-setup-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 16px 0 6px;
}

.tdl-setup-btn {
    width: 100%;
    justify-content: center;
    font-weight: 600;
    padding: 10px 14px;
    font-size: 14px;
}

@media (max-width: 767.98px) {
    .tdl-setup-buttons {
        grid-template-columns: 1fr;
    }
}

/* The Favourites page's own accent is navy (the active tab, the Filing deadlines title), not the
   generic bright blue of .modern-btn-primary, so the solid buttons in the Dates to track dialogs
   take the navy. Scoped to these five dialogs: the VAT, note and help dialogs are unchanged. */
#tdlSelectionOverlay .modern-btn-primary:not(.is-set-up),
#tdlYearEndOverlay .modern-btn-primary:not(.is-set-up),
#tdlDueDateOverlay .modern-btn-primary:not(.is-set-up),
#tdlPickerOverlay .modern-btn-primary:not(.is-set-up),
#tdlPaydayOverlay .modern-btn-primary:not(.is-set-up) {
    background: #123f80;
    border-color: #0d315f;
    box-shadow: 0 8px 16px rgba(18, 63, 128, 0.22);
}

#tdlSelectionOverlay .modern-btn-primary:not(.is-set-up):hover,
#tdlYearEndOverlay .modern-btn-primary:not(.is-set-up):hover,
#tdlDueDateOverlay .modern-btn-primary:not(.is-set-up):hover,
#tdlPickerOverlay .modern-btn-primary:not(.is-set-up):hover,
#tdlPaydayOverlay .modern-btn-primary:not(.is-set-up):hover {
    background: #0d315f;
    border-color: #0a2850;
}

/* A setup with at least one company tracked: outlined and reading "Manage ...", in the same colours
   as the page's .fav-fontsize-btn. The red "Stop tracking ..." link sits under it (trackeddates.js renderSetupButtons). */
.tdl-setup-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    border: 1px solid #dce7f8;
    border-radius: 14px;
    background: #f8fbff;
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.tdl-setup-item:hover {
    border-color: #9fc0ef;
}

.tdl-setup-item.is-set-up {
    border-color: #b6cff3;
    background: #ffffff;
    box-shadow: 0 6px 16px rgba(18, 63, 128, 0.08);
}

/* The status pill sits above the title, in every card, so a long title ("Corporation Tax (CT600)")
   never pushes the pill onto a second line and leaves that card taller than its neighbours. */
.tdl-setup-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.tdl-setup-head .tdl-setup-status {
    order: -1;
}

.tdl-setup-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    color: #123f80;
}

.tdl-setup-status {
    flex: 0 0 auto;
    padding: 2px 9px;
    border-radius: 999px;
    background: #edf1f6;
    color: #5f7593;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.tdl-setup-item.is-set-up .tdl-setup-status {
    background: rgba(25, 135, 84, 0.12);
    color: #14653b;
}

.tdl-setup-dates {
    font-size: 13px;
    color: #1f3551;
}

.tdl-setup-count {
    font-size: 12.5px;
    color: #5f7593;
}

/* Pushed to the bottom so the three buttons line up even when one card has the extra "Stop" link. */
.tdl-setup-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: auto;
    padding-top: 12px;
}

.tdl-setup-btn.is-set-up,
.tdl-setup-btn.is-set-up:hover,
.tdl-setup-btn.is-set-up:focus {
    background: #ffffff;
    border: 1px solid #c7dafb;
    color: #0f3d80;
    box-shadow: none;
}

.tdl-setup-btn.is-set-up:hover {
    background: #f2f7ff;
    border-color: #9fc0ef;
    color: #0d315f;
}

.tdl-stop-btn {
    align-self: center;
    border: 0;
    background: none;
    color: #9b1c1c;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 8px;
    cursor: pointer;
}

.tdl-stop-btn:hover,
.tdl-stop-btn:focus {
    text-decoration: underline;
}

.tdl-stop-btn[hidden] {
    display: none;
}

.tdl-stop-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Taller than the selection card: this one holds a scrolling list of every company favourite. */
.tdl-picker-card {
    max-width: 680px;
    display: flex;
    flex-direction: column;
    max-height: 88vh;
}

/* Amber until a company is ticked - the dialog is waiting on exactly that - and green after, with
   the count. It changes COLOUR rather than disappearing so the list never shifts under the pointer
   mid-click. */
.tdl-picker-banner {
    border: 1.5px solid rgba(214, 138, 10, 0.7);
    background: rgba(240, 173, 78, 0.15);
    border-radius: 14px;
    padding: 10px 14px;
    margin-bottom: 10px;
}

.tdl-picker-banner.is-ready {
    border-color: rgba(25, 135, 84, 0.7);
    background: rgba(25, 135, 84, 0.12);
}

.tdl-picker-banner-title {
    font-weight: 700;
    font-size: 14px;
    color: #a26a06;
}

.tdl-picker-banner.is-ready .tdl-picker-banner-title {
    color: #14653b;
}

.tdl-picker-banner-sub {
    font-size: 12px;
    color: #5f7593;
    margin-top: 2px;
}

.tdl-picker-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.tdl-picker-toolbar-label {
    font-weight: 700;
    font-size: 13px;
    color: #103b77;
}

.tdl-picker-selectall {
    padding: 4px 12px;
    font-size: 12.5px;
}

.tdl-picker-search {
    margin-bottom: 10px;
}

.tdl-picker-list {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 2px;
    /* The only scrolling part of the dialog, so the banner, the search box and Save/Cancel stay
       put however long the list is. */
    flex: 1 1 auto;
    min-height: 120px;
}

.tdl-picker-row {
    border: 1px solid #c6dbfb;
    border-radius: 12px;
    background: #f8fafe;
    padding: 10px 12px;
}

.tdl-picker-row.is-selected {
    border-color: #1f6feb;
    background: #eef5ff;
}

.tdl-picker-row-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    cursor: pointer;
}

.tdl-picker-row-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tdl-picker-row-name {
    font-weight: 600;
    font-size: 14px;
    color: #1f3551;
}

.tdl-picker-row-number {
    font-size: 11.5px;
    color: #5f7593;
}

/* The payday said in words on the row itself, so a list of companies can be read without opening
   anything. Amber while unset - a company tracked for PAYE with no payday is allowed, and its FPS
   pill then says "+ Add payday", so this is a note rather than an error. */
.tdl-picker-row-payday {
    font-size: 11.5px;
    font-weight: 600;
    color: #14653b;
    margin-top: 2px;
}

.tdl-picker-row-payday.is-unset {
    color: #a26a06;
}

.tdl-picker-empty {
    padding: 22px 12px;
    text-align: center;
    font-size: 13px;
    color: #5f7593;
}

/* The payday chooser - four chips and, for "Other date", a day-of-the-month grid. Drawn in two
   places identically: inline in each ticked row of the PAYE picker, and in the "+ Add payday"
   dialog. .tdl-payday-compact is the inline one. */
.tdl-payday-chooser {
    margin-top: 10px;
}

.tdl-payday-chips {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.tdl-payday-chip {
    border: 1px solid rgba(17, 55, 100, 0.25);
    border-radius: 10px;
    background: rgba(198, 219, 251, 0.35);
    color: #113764;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 4px;
    line-height: 1.1;
    cursor: pointer;
    transition: background-color 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

.tdl-payday-chip:hover {
    border-color: #1f6feb;
}

.tdl-payday-chip.is-selected {
    background: #113764;
    border-color: #113764;
    color: #fff;
    font-weight: 700;
}

.tdl-payday-caption {
    font-size: 11px;
    color: #5f7593;
    margin: 8px 0 4px;
}

/* Weekly / fortnightly / 4-weekly: one real payday, which also says which week of the fortnight. */
.tdl-payday-frequencies {
    margin-bottom: 6px;
}

.tdl-payday-next {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.tdl-payday-date {
    max-width: 220px;
}

/* 1-31, not a date input: what is being chosen is the day that REPEATS, and a calendar invites
   picking "25 October" and expecting only October. */
.tdl-payday-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 5px;
}

.tdl-payday-compact .tdl-payday-chip {
    font-size: 11px;
    padding: 6px 2px;
}

@media (max-width: 575.98px) {
    .tdl-payday-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* A third (or fourth) tab, alongside the existing Favourites/Identity Verification tabs - see
   Favourites.cshtml. Colours are unified above (.fav-tab-idv/-tdl/-sa); this just adds the grid
   column counts a 3- or 4-tab bar needs. */
.fav-tabs-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.fav-tabs-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* The "New" hint bubble targets whichever tab sits in the right-most third once a 3rd tab exists -
   Identity Verification moves from the right half to the middle third in that layout. */
.fav-tabs-wrap.tdl-3col .idv-tab-hint {
    width: 33.34%;
    margin-left: 33.33%;
}

@media (max-width: 767.98px) {
    .fav-tabs-wrap.tdl-3col .idv-tab-hint {
        width: 100%;
        margin-left: 0;
    }
}

/* ==========================================================================
   Self Assessment (/Home/SelfAssessment) - officers' personal Self Assessment
   and MTD-IT dates, the per-officer note, and the two-step picking wizard.
   The portal's twin of the iOS/Android Self Assessment screen; see
   CursorPlans/favourites_consolidated.md §6.7 and §6.12.

   Class prefix "sa-" throughout, and every class here is NEW. Nothing bare
   .fav* / .favourite* is touched (§7.5 - those may be shared with Classic),
   and the .idv-* look is COPIED rather than reused, so nothing on this page
   can disturb the Identity Verification panel on the Favourites page. The
   note dialog does reuse .fav-vat-overlay/.fav-vat-card/.modern-btn*, the
   same hand-rolled dialog shape as the VAT, Filing Note and "Dates to track"
   editors - BS5 CSS with BS4 JS means no component JS anywhere (§4).

   Desktop-first: the phone screens are single scrolling columns, these are
   auto-fill grids, and the wizard's button bar is sticky rather than pinned
   to the bottom of a handset.
   ========================================================================== */

.sa-page {
    max-width: 1320px;
    padding-bottom: 32px;
}

.sa-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 6px 0 16px;
}

.sa-title {
    font-size: 26px;
    font-weight: 700;
    color: #113764;
    margin: 0 0 4px;
}

.sa-subtitle {
    font-size: 13px;
    color: #5f7593;
    max-width: 680px;
    margin: 0;
}

.sa-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #1f6feb;
    text-decoration: none;
    white-space: nowrap;
}

.sa-back-link:hover {
    text-decoration: underline;
}

.sa-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.sa-icon svg {
    width: 100%;
    height: 100%;
}

/* One mode at a time. The picking list animates away and what replaces it
   fades in - the web equivalent of Android's AnimatedContent and iOS's
   crossfade. selfassessment.js adds .is-shown on the next frame so the
   browser paints the start state and the transition actually runs. */
.sa-mode {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.sa-mode.is-shown {
    opacity: 1;
    transform: none;
}

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

/* ---- the "no favourite companies yet" message --------------------------- */
.sa-centred-panel {
    background: #ffffff;
    border: 1px solid #dce7f8;
    border-radius: 16px;
    padding: 54px 28px 48px;
    text-align: center;
    max-width: 620px;
    margin: 24px auto;
}

.sa-centred-icon {
    display: inline-flex;
    width: 56px;
    height: 56px;
    color: #9fc0ef;
    margin-bottom: 14px;
}

.sa-centred-icon svg {
    width: 100%;
    height: 100%;
}

.sa-centred-title {
    font-size: 19px;
    font-weight: 700;
    color: #113764;
    margin: 0 0 8px;
}

.sa-centred-text {
    font-size: 14px;
    line-height: 21px;
    color: #5f7593;
    margin: 0 auto 22px;
    max-width: 440px;
}

.sa-centred-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---- the control row, in every mode ------------------------------------- */
.sa-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

/* Wraps only the .sa-toolbar that sits directly above the "dates" table (search, sort, officer
   count, Update officers list). Sep 2026 tracker layout: no shaded box any more - it sits straight
   on the panel, the same as the other two tabs' toolbars. */
.sa-options-panel {
    color: #1f3551;
    margin-bottom: 10px;
}

.sa-options-panel .sa-toolbar {
    margin-bottom: 0;
}

.sa-step-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5b3fa0;
    background: #f1ecfb;
    border-radius: 999px;
    padding: 6px 12px;
    white-space: nowrap;
}

.sa-selectall-btn {
    margin-left: auto;
}

.sa-search,
.sa-sort {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #dce7f8;
    border-radius: 10px;
    padding: 0 10px;
    height: 40px;
    color: #5f7593;
    margin: 0;
}

.sa-search {
    flex: 1 1 260px;
    min-width: 200px;
    max-width: 420px;
}

.sa-search input {
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 13px;
    color: #1f3551;
    width: 100%;
    height: 100%;
}

.sa-sort {
    position: relative;
    padding-right: 30px;
}

.sa-sort select {
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: #1f3551;
    height: 100%;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 4px;
    cursor: pointer;
}

.sa-sort-chevron {
    position: absolute;
    right: 10px;
    pointer-events: none;
}

/* ---- step one: the banner ---------------------------------------------- */
/* Amber until anybody is ticked, then green. It changes colour rather than
   disappearing, so the grid below never jumps under the user's cursor - both
   states are the same size for the same reason. */
.sa-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 14px;
    padding: 12px 16px;
    margin-bottom: 14px;
    background: #fff5dd;
    border: 1.5px solid #e9b949;
    color: #7a4b03;
}

.sa-banner.is-selected {
    background: #eaf7ee;
    border-color: #4aa568;
    color: #1f6b3c;
}

.sa-banner-icon {
    display: inline-flex;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
}

.sa-banner-icon svg {
    width: 100%;
    height: 100%;
}

.sa-banner-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sa-banner-text strong {
    font-size: 14.5px;
}

.sa-banner-text span {
    font-size: 12.5px;
    opacity: 0.92;
}

/* ---- step one: the company grid ---------------------------------------- */
/* Multi-column rather than the phone's single list: a laptop shows several
   companies at once, which is the difference between two screens of scrolling
   and twenty on an account with a few hundred favourites. */
.sa-company-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
    align-items: start;
}

.sa-company-card {
    background: #ffffff;
    border: 1px solid #dce7f8;
    border-radius: 14px;
    padding: 4px 0 6px;
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.sa-company-card.is-selected {
    border-color: #9fc0ef;
    box-shadow: 0 0 0 2px rgba(31, 111, 235, 0.1);
}

/* Both rows are <label>s around a real checkbox, so the whole row is the click
   target and the keyboard and screen readers get a checkbox for free. */
.sa-company-row,
.sa-officer-row {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin: 0;
}

.sa-company-row {
    padding: 10px 14px;
    border-bottom: 1px solid #eaf1fb;
}

.sa-officer-row {
    /* Indented under the company's box, so the parent/child relationship reads
       at a glance - the layout from the original sketch on the apps. */
    padding: 8px 14px 8px 42px;
}

.sa-officer-row:hover,
.sa-company-row:hover {
    background: #f6faff;
}

.sa-checkbox {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    accent-color: #1f6feb;
    cursor: pointer;
}

.sa-company-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.sa-company-name {
    font-size: 14px;
    font-weight: 700;
    color: #113764;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sa-company-number {
    font-size: 11.5px;
    color: #5f7593;
}

.sa-company-count {
    font-size: 11.5px;
    font-weight: 700;
    color: #5f7593;
    white-space: nowrap;
}

.sa-officer-name {
    font-size: 13.5px;
    font-weight: 500;
    color: #1f3551;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- the wizard's button bar ------------------------------------------- */
/* Sticky inside the page rather than pinned to a handset's bottom edge: the
   grid above can be many screens long, and Cancel/Next must stay reachable
   without scrolling back. */
.sa-step-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 0 10px;
    margin-top: 16px;
    background: linear-gradient(to bottom, rgba(247, 250, 255, 0), #f7faff 34%);
    z-index: 3;
}

.sa-step-bar .modern-btn {
    min-width: 132px;
    justify-content: center;
}

/* Step two's bar lines up with the card above it rather than running to the far edge
   of a 1300px page - the tiles are a single 680px column. */
#saSelectDates .sa-step-bar {
    max-width: 680px;
}

/* .modern-btn has no disabled state of its own anywhere this page can reach, so a
   greyed-out Save looked exactly like a live one - and Save IS disabled until a tile
   is ticked, which is the one moment the user has to be able to see why nothing
   happens. Scoped to this screen's two control rows so it can't leak. */
.sa-toolbar .modern-btn:disabled,
.sa-step-bar .modern-btn:disabled {
    opacity: 0.5;
    box-shadow: none;
    cursor: not-allowed;
}

/* ---- step two: the tiles ----------------------------------------------- */
.sa-dates-step {
    background: #ffffff;
    border: 1px solid #dce7f8;
    border-radius: 16px;
    padding: 24px 26px;
    max-width: 680px;
}

.sa-dates-step-title {
    font-size: 18px;
    font-weight: 700;
    color: #113764;
    margin: 0 0 6px;
}

.sa-dates-step-hint {
    font-size: 13px;
    color: #5f7593;
    margin: 0 0 16px;
}

.sa-tile-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Full-width rows, not the two-across grid the Favourites selection sheet
   uses - there are two tiles here, not six. */
.sa-tile {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid #c6dbfb;
    border-radius: 12px;
    padding: 14px 14px;
    cursor: pointer;
    background: #f8fafe;
    margin: 0;
    transition: border-color 0.14s ease, background-color 0.14s ease, box-shadow 0.14s ease;
}

.sa-tile:hover {
    border-color: #9fc0ef;
}

.sa-tile.is-selected {
    border-color: #1f6feb;
    background: #eef5ff;
    box-shadow: 0 0 0 2px rgba(31, 111, 235, 0.14);
}

.sa-tile .sa-checkbox {
    margin-top: 2px;
}

.sa-tile-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sa-tile-title {
    font-weight: 700;
    font-size: 14px;
    color: #1f3551;
}

.sa-tile-rule {
    font-size: 12px;
    color: #5f7593;
    margin-top: 2px;
}

.sa-tiles-warning {
    font-size: 12.5px;
    font-weight: 700;
    color: #9a5b00;
    margin: 14px 0 0;
}

/* The MTD tax-year explanation (evergreen) and the Sep 2026 launch notice (temporary, see
   selfassessment.js's MTD_LAUNCH_NOTICE_TEXT) - under the MTD-IT tile, and again above the dates
   table for someone who already has it on. */
.sa-mtd-caption {
    font-size: 12px;
    color: #5f7593;
    margin: -2px 0 12px;
}

/* The picking screen's two routes (Sep 2026 v2). They are peers producing one list, so they get
   matching section headings rather than one reading as a footnote to the other - and they stay
   STACKED at every width, so the reading order is the same here as on the phones. The primary one
   (add by name) is tinted; the officer grid below is plain. */
.sa-add-section {
    margin: 12px 0 18px;
}

.sa-add-section-primary {
    background: #f6f8fc;
    border: 1px solid #dce7f8;
    border-radius: 14px;
    padding: 14px 16px;
}

.sa-add-section-title {
    font-size: 15px;
    font-weight: 700;
    color: #1f3551;
    margin: 0 0 4px;
}

.sa-add-section-hint {
    font-size: 12.5px;
    color: #5f7593;
    margin: 0 0 10px;
    max-width: 68ch;
}

/* The officer section's own controls sit on its heading row - they belong to that list, not to the
   screen. Wraps on a narrow window rather than squeezing the search box to nothing. */
.sa-add-section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.sa-add-section-head .sa-add-section-title {
    margin: 0;
    flex: 1 1 auto;
}

.sa-add-section-head .sa-search {
    flex: 0 1 320px;
    min-width: 180px;
}

/* No favourite companies at all - the officers to pick from are their officers, so there is nothing
   to show. Matches the apps' own panel: the two ways to add companies, plus the by-name route,
   which needs no favourites at all. */
.sa-no-favourites {
    display: flex;
    justify-content: center;
    padding: 36px 20px;
}

.sa-no-favourites-inner {
    max-width: 560px;
    text-align: center;
}

.sa-no-favourites-title {
    font-size: 19px;
    font-weight: 700;
    color: #1f3551;
    margin: 0 0 8px;
}

.sa-no-favourites-detail {
    font-size: 13.5px;
    line-height: 1.5;
    color: #5f7593;
    margin: 0 0 16px;
}

.sa-no-favourites-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

/* Add a self-employed person with no company at all - sits below the picking banner. Sep 2026 v2. */
.sa-manual-add {
    margin: 0;
}

.sa-manual-add-label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #5f7593;
    margin-bottom: 8px;
}

.sa-manual-add-row {
    display: flex;
    gap: 8px;
}

.sa-manual-add-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    border: 1px solid #dce7f8;
    border-radius: 10px;
    padding: 0 12px;
    font-size: 13px;
    color: #1f3551;
    background: #ffffff;
}

.sa-manual-list {
    margin-top: 10px;
}

.sa-manual-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 4px;
    border-top: 1px solid #e4ecfa;
}

.sa-manual-row:first-child {
    border-top: 0;
}

.sa-manual-name {
    font-size: 13.5px;
    color: #1f3551;
}

.sa-manual-remove {
    border: 1px solid #f0c2c2;
    background: #fdf2f2;
    color: #a33636;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 10px;
    cursor: pointer;
}

.sa-manual-remove:hover {
    background: #fbe4e4;
}

.sa-manual-remove-inline {
    margin-left: 8px;
}

/* The Track SA / Track MTD buttons on the dates table's Tracking column - off (outline) or on
   (filled) per person, per service. */
.sa-col-tracking {
    white-space: nowrap;
}

.sa-tracking-toggle {
    display: inline-block;
    border: 1px solid #c8dcfb;
    background: #ffffff;
    color: #5f7593;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 4px 10px;
    margin-right: 6px;
    cursor: pointer;
}

.sa-tracking-toggle:hover {
    border-color: #a9c4ef;
}

.sa-tracking-toggle.is-on {
    background: #16794f;
    border-color: #16794f;
    color: #ffffff;
}

/* ---- the dates: one table row per tracked officer (Sep 2026) -----------
   Was one card per officer, each with its own pill row; replaced with a table so many tracked
   officers (potentially with all eight Self Assessment/MTD-IT columns) read at a glance the same
   way the favourites table does, rather than paging through cards. Reuses .phase1-table-shell and
   the favourites table's .fav-index-cell/.fav-item-number/.fav-deadline-line/
   .favourites-due-date-badge so the two tables read as one family. */
.sa-table-scroll {
    overflow-x: auto;
}

#saTable {
    width: 100%;
}

.sa-col-officer {
    font-weight: 700;
    color: #113764;
    white-space: nowrap;
}

.sa-col-company {
    color: #5f7593;
    white-space: nowrap;
}

.sa-col-note {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

/* One-line preview beside the pencil, like the favourites table's Filing Note column - the note
   itself is edited in the dialog, not inline, so this is display-only (not clickable). */
.sa-note-preview {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #5b3fa0;
    font-size: 12px;
}

/* A dash rather than an empty cell for a date type this officer doesn't track - reads clearly as
   "not tracked" instead of looking like missing data. */
.sa-col-date-empty {
    color: #b9c4d6;
    text-align: center;
}

/* accent-color tints the native checkbox the same blue as the favourites table's .fav-done-tick.
   A distinct class (not that one) because it posts to a different endpoint (MarkSelfAssessmentDone,
   which toggles both ways) - see wwwroot/js/selfassessment.js's buildDateCell. */
.sa-done-tick {
    accent-color: #1f6feb;
    width: 15px;
    height: 15px;
    margin: 0 6px 0 0;
    vertical-align: -2px;
    cursor: pointer;
    flex: 0 0 auto;
}

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

.sa-done-tick:disabled {
    cursor: default;
    opacity: 0.6;
}

/* An MTD quarter due before tracking started - see selfassessment.js's buildDateCell and
   TrackedDeadlineCalculator.IsBeforeTrackingStart on the server. Neutral grey rather than the
   overdue/due-soon colours: it is informational, not a live alert. */
.sa-deadline-line-muted .sa-pill-date {
    color: #8a94a6;
}

/* The card's ONLY control. The per-officer calendar button is gone from all
   three platforms now that the dates are chosen for everybody at once. */
.sa-note-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 9px;
    border: 1px solid #dce7f8;
    background: #f8fafe;
    color: #5f7593;
    cursor: pointer;
}

.sa-note-button:hover {
    border-color: #9fc0ef;
    color: #1f6feb;
}

.sa-note-button.has-note {
    color: #5b3fa0;
    border-color: #d7c9f2;
    background: #f5f0fd;
}

/* Deadline dates must never be clipped or ellipsised (§5). Reused inside .fav-deadline-line
   (buildDateCell) - the pill/card layout that used to size around this is gone. */
.sa-pill-date {
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

/* The quiet mark for a tax year the return/payment pair has finished - the portal's answer to the
   apps' tick beside their shared "SA 31/01/27" caption. It matters because completing the pair
   rolls both dates on to next year, which unticks them: without this the finished year leaves no
   trace at all. See TrackedDeadlineCalculator's pair region. */
.sa-year-done {
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    color: #1b7f4b;
}

/* ---- empty states ------------------------------------------------------ */
.sa-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    padding: 46px 16px;
    color: #5f7593;
    font-size: 13.5px;
}

.sa-empty-title {
    color: #113764;
    font-size: 16px;
}

.sa-empty-detail {
    max-width: 460px;
}

.sa-empty-action {
    margin-top: 12px;
}

@media (max-width: 767.98px) {
    .sa-toolbar {
        gap: 8px;
    }

    .sa-selectall-btn {
        margin-left: 0;
    }

    .sa-search {
        max-width: none;
        flex-basis: 100%;
    }

    .sa-step-bar .modern-btn {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* ==========================================================================
   Favourites summary strip - the horizontal band above the favourites table
   (Views/Home/Favourites.cshtml). It replaced the col-lg-3 left sidebar that
   used to hold these panels: with the sidebar gone the table gets the full
   width of .fav-main-layout instead of three quarters of it, which is what
   the whole change is for.

   The panels had to pay for that in height, so the sidebar's tall stacked
   cards are gone: every card in the strip is now a small title followed by
   rows of "label + due soon + overdue" pills (.fav-stat-row). The four cards
   therefore share one markup family instead of three - the old .idv-summary*
   / .tdl-summary-empty / .tdl-summary-manage-btn rules were removed when
   their only callers moved over. The card's own footer action links
   (.fav-strip-card-foot / .fav-strip-card-foot-links / .fav-stat-link, Sep
   2026) are gone too - "Choose dates to track" moved up into the favourites
   table's toolbar instead, and the Self Assessment / Identity Verification
   links were dropped as unneeded now that their tabs are reachable directly.

   Sep 2026 tracker layout (tracker-ui-changes.md): the quick links are their
   own row under the promo banner (.fav-nav-row), the tab row sits above the
   summary, and the summary itself is two small "Deadline / Due soon /
   Overdue" tables (.fds-*) with the collapse toggle in its header. Each count
   above zero is a filter button (.fds-count, js/favsummarystrip.js).
   (A stray comment close here used to swallow the .fav-stacked-layout rule.)
   ========================================================================== */

.fav-stacked-layout {
    min-width: 0;
}

/* The tabs + table, now the full width of the container rather than a
   col-lg-9. No .row/.col wrapper at all, so nothing has to be kept in step
   with Bootstrap's gutters. */
.fav-main-col-full {
    min-width: 0;
    margin-top: 12px;
}

/* --- the strip's own bar: quick links + collapse toggle ------------------ */

.fav-summary-strip {
    margin-top: 10px;
}

.fav-strip-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 10px;
}

.fav-strip-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fav-strip-link,
.fav-strip-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #d7e3f6;
    color: #103b77;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    line-height: 1.2;
}

/* The quick links row under the promo banner (Sep 2026 tracker layout): smaller buttons, 38px tall. */
.fav-strip-link {
    min-height: 38px;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 500;
}

.fav-strip-link:focus-visible,
.fav-strip-toggle:focus-visible {
    outline: 3px solid rgba(31, 111, 235, 0.45);
    outline-offset: 2px;
}

.fav-strip-link:hover,
.fav-strip-link:focus-visible,
.fav-strip-toggle:hover,
.fav-strip-toggle:focus-visible {
    background: #f2f7ff;
    border-color: #b9cfee;
    color: #0f3d80;
    text-decoration: none;
}

.fav-strip-toggle {
    cursor: pointer;
}

/* Its own size rather than the page's .fav-icon-16 / .fav-icon-text pair: those
   carry a negative top margin and a right margin meant for icons sitting inline
   in a line of text, both of which fight a flex chip's own alignment and gap. */
.fav-strip-link-icon {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
}

.fav-strip-toggle-icon {
    display: inline-flex;
    width: 12px;
    height: 12px;
    transition: transform 0.15s ease;
}

.fav-strip-toggle-icon svg {
    width: 12px;
    height: 12px;
}

/* The icon is drawn as an up arrow (summary open). Collapsed, it points down. */
.fav-summary-strip.is-collapsed .fav-strip-toggle-icon {
    transform: rotate(180deg);
}

.fav-summary-strip.is-collapsed .fav-strip-grid {
    display: none;
}

/* --- the card(s) ---------------------------------------------------------- */

/* Sep 2026 tracker layout: the two summary tables side by side (.fds-grid, further down, sets the
   columns). This used to be a Razor-style comment, which a browser reads as a broken at-rule, and it
   swallowed this whole rule. */
.fav-strip-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
}

.fav-strip-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #f8fbff;
    border: 1px solid #dce7f8;
    border-radius: 16px;
    padding: 12px 13px 11px;
    box-shadow: 0 8px 18px rgba(17, 56, 114, 0.06);
}

.fav-strip-card-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
    color: #0d315f;
    font-size: 13.5px;
    font-weight: 700;
}

.fav-strip-card-icon {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    color: #2a6fd0;
}

.fav-strip-card-icon svg {
    width: 15px;
    height: 15px;
    display: block;
}

/* Two columns rather than one long stack - with Dates to Track's six rows plus Accounts/CS01/VAT,
   Self Assessment and both Identity Verification rows, a single column made this card by far the
   tallest thing on the page. Row-major fill (the grid default): left/right pairs down the card,
   which - unlike a column-major fill - needs no fixed row count to balance correctly as rows
   appear/disappear (a tracked type not selected, Self Assessment/verification unavailable, etc).
   #tdlSummaryGrid uses display: contents (below) so its own rows are direct grid items here too,
   rather than one tall item holding all six stacked inside it. */
.fav-strip-card-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 10px;
}

/* --- shared row / pill / empty vocabulary --------------------------------- */

.fav-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 6px 9px;
    background: #ffffff;
    border: 1px solid #e3ecf9;
    border-radius: 10px;
}

.fav-stat-label {
    min-width: 0;
    font-size: 12.5px;
    font-weight: 700;
    color: #0d315f;
}

.fav-stat-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* Grey while zero, like the sidebar pills before them: a count only earns a
   colour once there is something to act on. */
.fav-stat-pill {
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: #edf1f6;
    color: #5b6b7f;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.fav-stat-pill-warn {
    background: #fff5dd;
    border-color: #f1d393;
    color: #7a4b03;
}

.fav-stat-pill-overdue {
    background: #ffefef;
    border-color: #f2c5c5;
    color: #8a1f1f;
}

.fav-stat-empty {
    font-size: 12.5px;
    line-height: 1.4;
    color: #5f7593;
}

/* --- PayrollPostie promo as a full-width band --------------------------- */

/* Same panel, laid on its side: in the sidebar it was a 3-line block at the
   top of a narrow rail, here it is one line across the top of the page, so
   it costs the table almost nothing. */
.pp-promo-row {
    align-items: center;
    padding: 9px 14px;
    border-radius: 14px;
}

.pp-promo-row .pp-promo-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
}

.pp-promo-row .pp-promo-text {
    flex: 1 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
}

.pp-promo-row .pp-promo-arrow {
    flex: 0 0 18px;
    margin-left: 0;
    vertical-align: 0;
}

/* --- narrower screens --------------------------------------------------- */

@media (max-width: 767.98px) {
    .fav-strip-bar {
        gap: 8px;
    }

    .pp-promo-row .pp-promo-copy {
        display: none;
    }
}


/* ------------------------------------------------------------------ favourites page: fixed page

   Only the favourites table scrolls: the toolbar, the summary strip and the column headers stay
   where they are, and a trackpad or scrollbar gesture moves the list rather than the whole page.

   The class is added by favspage.js, not hardcoded on the page, because it is only safe when the
   table's scroll box has actually been sized to the room left below it - see
   sizeFavTableToViewport(), which also takes the class back off on a short or narrow window, or
   while a different tab is open. With the class on and no sizing, page content past the bottom of
   the viewport would simply be unreachable. */
body.fav-fixed-page {
    overflow: hidden;
}

/* The scroll box's own max-height is written inline by that same function, so it wins over the
   static max-height rules further up this file. Nothing to do here but let it. */


/* ==========================================================================
   Due date tracker layout (Sep 2026, tracker-ui-changes.md)
   Layout and styling only for the Favourites page (Views/Home/Favourites.cshtml and its tab
   partials). The hex values are the portal's existing ones where it had a match, otherwise the
   mockup's. Bold (600) is kept for the officer name, the selected tab and the panel headings.
   ========================================================================== */

/* --- 1. PayrollPostie banner: one line, about 44px ----------------------- */
.pp-promo-row {
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 5px 8px 5px 12px;
    border-radius: 12px;
}

.pp-promo-row:hover {
    box-shadow: none;
}

.pp-promo-row .pp-promo-icon {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
}

.pp-promo-row .pp-promo-text {
    flex: 1 1 auto;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    white-space: nowrap;
}

.pp-promo-row .pp-promo-title {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 600;
}

.pp-promo-row .pp-promo-copy {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
}

.pp-promo-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    color: #4c3bb3;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.pp-promo-link:hover {
    color: #3b2f7a;
    text-decoration: underline;
}

.pp-promo-link-icon {
    display: inline-flex;
    width: 14px;
    height: 14px;
    transition: transform 0.15s ease;
}

.pp-promo-link-icon svg {
    width: 14px;
    height: 14px;
}

.pp-promo-link:hover .pp-promo-link-icon {
    transform: translateX(2px);
}




.pp-promo-link:focus-visible {
    outline: 3px solid rgba(91, 71, 199, 0.45);
    outline-offset: 2px;
}

/* --- 2. Quick links row -------------------------------------------------- */
.fav-nav-row {
    margin: 10px 0 0;
}

/* --- 3. Tabs sit above the summary now ----------------------------------- */
.fav-main-col-full > .fav-tabs-wrap {
    margin-bottom: 12px;
}

/* --- 4. Filing Deadlines summary ----------------------------------------- */
.fds-panel {
    margin: 0 0 12px;
    padding: 10px 14px 12px;
    background: #f8fbff;
    border: 1px solid #dce7f8;
    border-radius: 16px;
}

.fds-header {
    display: flex;
    align-items: center;
    gap: 6px;
}

.fds-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #0d315f;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

.fds-title-icon {
    width: 16px;
    height: 16px;
}

.fds-header .fav-strip-toggle {
    margin-left: auto;
    min-height: 32px;
    cursor: pointer;
}

.fav-summary-strip.is-collapsed .fds-header {
    margin-bottom: 0;
}

.fds-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 20px;
    margin-top: 8px;
}

.fds-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.fds-table th,
.fds-table td {
    height: 42px;
    padding: 0 10px;
    border-bottom: 1px solid #edf1f7;
    vertical-align: middle;
}

.fds-table thead th {
    height: 34px;
    color: #5f7593;
    font-size: 12.5px;
    font-weight: 500;
    border-bottom-color: #dce7f8;
}

.fds-table tbody:last-child tr:last-child th,
.fds-table tbody:last-child tr:last-child td {
    border-bottom: 0;
}

.fds-label {
    color: #0d315f;
    font-size: 13.5px;
    font-weight: 500;
    text-align: left;
}

.fds-num {
    width: 96px;
    text-align: right;
    white-space: nowrap;
}

.fds-zero {
    display: inline-block;
    min-width: 28px;
    padding-right: 10px;
    color: #6b7894;
    font-size: 13px;
    text-align: right;
}

.fds-unavailable {
    color: #6b7894;
    font-size: 12.5px;
    text-align: right;
}

/* A count above zero. It is a button that filters the matching tab's table, so it has to look
   pressable: on hover or keyboard focus it deepens, lifts a pixel, gains a shadow, and a funnel
   icon slides in beside the number (the user asked for a clear hover transition here). */
.fds-count {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    min-width: 34px;
    padding: 3px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease,
        box-shadow 0.15s ease, transform 0.15s ease, gap 0.15s ease;
}

.fds-count-static {
    cursor: default;
}

.fds-count-due {
    background: #fdf0cf;
    color: #7a4b00;
}

.fds-count-overdue {
    background: #fbe3e3;
    color: #9b1c1c;
}

.fds-count-icon {
    display: inline-flex;
    width: 0;
    height: 12px;
    overflow: hidden;
    opacity: 0;
    transition: width 0.15s ease, opacity 0.15s ease;
}

.fds-count-icon svg {
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
}

button.fds-count:hover,
button.fds-count:focus-visible,
button.fds-count.is-active {
    gap: 5px;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(17, 56, 114, 0.16);
}

button.fds-count:hover .fds-count-icon,
button.fds-count:focus-visible .fds-count-icon,
button.fds-count.is-active .fds-count-icon {
    width: 12px;
    opacity: 1;
}

button.fds-count-due:hover,
button.fds-count-due:focus-visible,
button.fds-count-due.is-active {
    background: #f9e2a6;
    border-color: #e9c46a;
}

button.fds-count-overdue:hover,
button.fds-count-overdue:focus-visible,
button.fds-count-overdue.is-active {
    background: #f7cccc;
    border-color: #e59a9a;
}

button.fds-count:focus-visible {
    outline: 3px solid rgba(31, 111, 235, 0.45);
    outline-offset: 2px;
}

button.fds-count:active {
    transform: translateY(0);
}

/* The count whose filter is on. */
button.fds-count.is-active {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #123f80;
    transform: none;
}

/* --- small info button with a tooltip (Filing Deadlines, the MTD Q1 heading) --- */
.fav-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #5f7593;
    cursor: help;
    vertical-align: middle;
}

.fav-info-btn svg {
    width: 16px;
    height: 16px;
}

.fav-info-btn:hover {
    color: #123f80;
    background: #eaf2ff;
}

.fav-info-btn:focus-visible {
    outline: 3px solid rgba(31, 111, 235, 0.45);
    outline-offset: 1px;
}

/* --- the shared tooltip (js/favtooltips.js) ------------------------------ */
.fav-tooltip {
    position: fixed;
    z-index: 1080;
    max-width: 280px;
    padding: 6px 9px;
    border-radius: 7px;
    background: #1d2f5e;
    color: #ffffff;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.fav-tooltip.is-shown {
    opacity: 1;
}

/* --- the "Filter by: ... x" row, shared by all three tabs ---------------- */
.fav-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 8px 0 10px;
    padding: 6px 10px;
    background: #eef4fd;
    border: 1px solid #d7e3f6;
    border-radius: 10px;
    color: #33465f;
    font-size: 13px;
}

.fav-filter-bar.fav-hidden,
.fav-filter-bar[hidden] {
    display: none;
}

.fav-filter-bar-label {
    color: #5f7593;
    font-weight: 500;
}

.fav-filter-bar-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px 2px 10px;
    border-radius: 999px;
    background: #123f80;
    color: #ffffff;
    font-weight: 500;
}

.fav-filter-bar-clear,
.fav-date-filter-banner .fav-filter-bar-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.fav-filter-bar-clear svg {
    width: 13px;
    height: 13px;
}

.fav-filter-bar-clear:hover,
.fav-date-filter-banner .fav-filter-bar-clear:hover {
    background: rgba(255, 255, 255, 0.34);
}

.fav-filter-bar-clear:focus-visible {
    outline: 3px solid rgba(31, 111, 235, 0.55);
    outline-offset: 2px;
}

.fav-filter-bar-count {
    color: #5f7593;
}

.fav-filter-bar-count:empty {
    display: none;
}

/* --- favourites toolbar search box with an icon inside ------------------- */
.fav-search-box {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 360px;
    max-width: 760px;
    margin: 0;
}

.fav-search-box .fav-filter-input {
    max-width: none;
    flex: 1 1 auto;
    padding-left: 34px;
}

.fav-search-icon {
    position: absolute;
    left: 11px;
    display: inline-flex;
    width: 16px;
    height: 16px;
    color: #5f7593;
    pointer-events: none;
}

.fav-search-icon svg {
    width: 16px;
    height: 16px;
}

/* --- 5. Self Assessment toolbar ------------------------------------------ */
.sa-search:focus-within,
.sa-sort:focus-within {
    border-color: #7aa7e8;
    box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.18);
}

.sa-sort-label {
    color: #5f7593;
    font-size: 13px;
    font-weight: 500;
}

.sa-sort select {
    font-weight: 500;
}

.sa-officer-count {
    margin-left: auto;
    color: #5f7593;
    font-size: 13px;
    white-space: nowrap;
}

.sa-secondary-btn {
    height: 40px;
    padding: 0 14px;
    background: #ffffff;
    border-color: #1f6feb;
    color: #1f5fbf;
    font-weight: 500;
}

.sa-secondary-btn .sa-icon {
    width: 16px;
    height: 16px;
}

.sa-secondary-btn:hover {
    background: #f2f7ff;
    color: #174e9f;
}

.sa-secondary-btn:focus-visible {
    outline: 3px solid rgba(31, 111, 235, 0.45);
    outline-offset: 2px;
}

/* --- 6-7. Self Assessment table ------------------------------------------ */
#saTable {
    margin-bottom: 0;
}

#saTable thead th {
    font-size: 12.5px;
    font-weight: 500;
    vertical-align: middle;
    white-space: nowrap;
    position: static;
}

#saTable thead .sa-group-head {
    text-align: left;
    color: #0d315f;
    font-weight: 500;
}

#saTable .sa-group-start {
    border-left: 1px solid #c8dcfb;
}

#saTable tbody td {
    height: 62px;
    padding-top: 6px;
    padding-bottom: 6px;
    vertical-align: middle;
    border-top: 1px solid #edf1f7;
}

#saTable tbody tr:hover {
    background: #fbfdff;
}

.sa-dates-table .sa-col-officer {
    font-weight: 400;
    white-space: normal;
    min-width: 150px;
}

.sa-officer-name {
    display: block;
    color: #113764;
    font-size: 13.5px;
    font-weight: 600;
}

.sa-officer-company {
    display: block;
    margin-top: 2px;
    color: #6b7894;
    font-size: 12px;
}

.sa-officer-company.is-empty {
    font-style: italic;
}

.sa-col-label {
    cursor: default;
}

.sa-col-info {
    width: 20px;
    height: 20px;
    margin-left: 2px;
}

.sa-col-info svg {
    width: 14px;
    height: 14px;
}

/* Tracking pills: green with a tick when on, outlined when off. */
.sa-tracking-pills {
    display: flex;
    gap: 6px;
}

.sa-tracking-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 0;
    padding: 4px 10px;
    border: 1px solid #b9c6dc;
    background: #ffffff;
    color: #1d2f5e;
    font-size: 12px;
    font-weight: 500;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.sa-tracking-toggle:hover {
    border-color: #8ea3c4;
    background: #f6f8fb;
}

.sa-tracking-toggle.is-on {
    background: #2e6b3f;
    border-color: #2e6b3f;
    color: #ffffff;
}

.sa-tracking-toggle.is-on:hover {
    background: #25582f;
    border-color: #25582f;
}

.sa-tracking-toggle:focus-visible {
    outline: 3px solid rgba(31, 111, 235, 0.45);
    outline-offset: 2px;
}

.sa-tracking-tick {
    display: inline-flex;
    width: 12px;
    height: 12px;
}

.sa-tracking-tick svg {
    width: 12px;
    height: 12px;
    stroke-width: 3;
}

/* One merged cell for a group this person is not tracked for. */
.sa-not-tracked {
    background: #f6f8fb;
    color: #6b7894;
    font-size: 12.5px;
    text-align: center;
}

/* Date cells: one button - a checkbox-look square and the date. */
.sa-dates-table .sa-col-date {
    white-space: nowrap;
    text-align: left;
}

.sa-date-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 9px 5px 7px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #ffffff;
    color: #1d2f5e;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.sa-date-btn.is-open {
    border-color: #e3ebf6;
}

.sa-date-btn:hover:not(:disabled) {
    border-color: #9fb6d8;
    box-shadow: 0 2px 6px rgba(17, 56, 114, 0.10);
}

.sa-date-btn:focus-visible {
    outline: 3px solid rgba(31, 111, 235, 0.45);
    outline-offset: 2px;
}

.sa-date-btn.is-due {
    background: #fdf0cf;
    color: #7a4b00;
}

.sa-date-btn.is-overdue {
    background: #fbe3e3;
    color: #9b1c1c;
}

.sa-date-btn.is-done {
    background: #e3f2e7;
    color: #1f5a30;
}

.sa-date-btn.is-premtd,
.sa-date-btn:disabled {
    background: transparent;
    color: #6f7c95;
    cursor: default;
}

.sa-date-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    border: 1.5px solid #9aa9c0;
    border-radius: 4px;
    background: #ffffff;
    color: #ffffff;
}

.sa-date-box svg {
    width: 11px;
    height: 11px;
}

.sa-date-btn.is-done .sa-date-box {
    background: #2e7d46;
    border-color: #2e7d46;
}

.sa-date-btn.is-premtd .sa-date-box,
.sa-date-btn:disabled .sa-date-box {
    background: #eef1f5;
    border-color: #d3dae4;
}

.sa-dates-table .sa-year-done {
    display: block;
    margin-top: 3px;
    padding-left: 8px;
    font-weight: 500;
}

/* Note: a narrow icon-only column. */
.sa-dates-table .sa-col-note {
    display: table-cell;
    width: 44px;
    text-align: center;
}

.sa-dates-table .sa-note-button {
    width: 30px;
    height: 30px;
    border-color: transparent;
    background: transparent;
    color: #6b7894;
}

.sa-dates-table .sa-note-button .sa-icon {
    width: 18px;
    height: 18px;
}

.sa-dates-table .sa-note-button.has-note {
    color: #123f80;
    background: transparent;
    border-color: transparent;
}

.sa-dates-table .sa-note-button:hover {
    background: #eef4fd;
    color: #123f80;
}

.sa-note-button:focus-visible,
.sa-row-menu-btn:focus-visible {
    outline: 3px solid rgba(31, 111, 235, 0.45);
    outline-offset: 1px;
}

/* Row actions: the "..." button and its menu. */
.sa-dates-table .sa-col-actions {
    width: 44px;
    text-align: center;
}

.sa-row-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #5f7593;
    cursor: pointer;
}

.sa-row-menu-btn .sa-icon {
    width: 18px;
    height: 18px;
}

.sa-row-menu-btn:hover,
.sa-row-menu-btn[aria-expanded="true"] {
    background: #eef4fd;
    color: #123f80;
}

.sa-row-menu {
    position: fixed;
    z-index: 1070;
    min-width: 170px;
    padding: 4px;
    background: #ffffff;
    border: 1px solid #d7e3f6;
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(17, 56, 114, 0.16);
}

.sa-row-menu[hidden] {
    display: none;
}

.sa-row-menu-item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #1d2f5e;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.sa-row-menu-item:hover,
.sa-row-menu-item:focus-visible {
    background: #eef4fd;
    outline: none;
}

.sa-row-menu-item.is-danger {
    color: #9b1c1c;
}

.sa-row-menu-item.is-danger:hover,
.sa-row-menu-item.is-danger:focus-visible {
    background: #fbe3e3;
}

/* --- 8. Legend ----------------------------------------------------------- */
.sa-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 10px;
    color: #5f7593;
    font-size: 12.5px;
}

.sa-legend[hidden] {
    display: none;
}

.sa-legend-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sa-legend-items li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sa-legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid transparent;
}

.sa-legend-swatch.is-due { background: #fdf0cf; border-color: #e9c46a; }
.sa-legend-swatch.is-overdue { background: #fbe3e3; border-color: #e59a9a; }
.sa-legend-swatch.is-done { background: #e3f2e7; border-color: #2e7d46; }
.sa-legend-swatch.is-premtd { background: #eef1f5; border-color: #d3dae4; }

.sa-legend-hint {
    margin-left: auto;
}

/* --- narrow screens ------------------------------------------------------ */
@media (max-width: 767.98px) {
    .fds-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .pp-promo-row .pp-promo-copy {
        display: none;
    }

    .sa-officer-count {
        margin-left: 0;
    }

    .sa-legend-hint {
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fds-count,
    .fds-count-icon,
    .sa-date-btn,
    .fav-tooltip {
        transition: none;
    }
}


/* Tick box + date always share one line in the favourites table (Sep 2026). Anything else in the
   cell - the due-soon/overdue badge, the "Estimated" badge - wraps onto its own line below. */
#favs .fav-deadline-line > a,
#favs .fav-deadline-line > span:not(.badge):not(.tdl-est-row) {
    white-space: nowrap;
}


/* ==========================================================================
   Favourites table - tracker layout (Sep 2026)
   Fixed column widths, a two-row header, the Company cell (name, number, note snippets, "..." menu)
   and date cells where the tick, the date and any badge share one fixed-width block. favspage.js
   sizeFavColumns() sets the group headings' widths and the table's min-width.
   Widths: # 32 / Company rest (at least 190) / Accounts, CS01, VAT 78 / CT600, PAYE, CIS pairs 108
   each / P11D, Class 1A 90. About 1,100px with everything showing.
   ========================================================================== */
#favs {
    table-layout: fixed;
    border-collapse: collapse;
    width: 100% !important;
}

#favs .fav-col-index { width: 32px; }
#favs .fav-col-name { width: auto; min-width: 0; }
#favs .fav-col-std { width: 112px; }
#favs .fav-col-group { width: 224px; }
#favs .fav-col-single { width: 104px; }
#favs .fav-col-date,
#favs .fav-col-date-tracked { min-width: 0; }

/* Header: two rows, left-aligned text, every label centred top to bottom. Both rows get a fixed
   height and padding, so the single-row headings (Company, Accounts, P11D...) and the stacked
   CT600 / PAYE / CIS headings add up to exactly the same total, and the sticky second row's
   top: 34px always matches the real height of the first row. */
#favs thead th {
    box-sizing: border-box;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.2;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #1c3763;
    font-weight: 600;
}

#favs thead .fav-head-top th {
    height: 34px;
    background: #e3e9f6;
}

#favs thead .fav-head-top th[rowspan="2"] {
    height: 64px;
}

#favs thead .fav-head-top th.fav-col-group {
    vertical-align: middle;
    border-bottom: 1px solid #d3dcef !important;
}

#favs thead .fav-head-sub th {
    height: 30px;
    top: 34px;
    background: #eef2fb;
    color: #5f7593;
    font-size: 0.95em;
    font-weight: 500;
}

/* Rows grow to their tallest cell. Everything is top-aligned, so every row's first line (the
   company name and each tick + date) starts at the same height. */
#favs tbody td {
    vertical-align: top;
    text-align: left;
    padding-top: 9px;
    padding-bottom: 9px;
}

#favs tbody td.fav-index-cell {
    color: #9aa3b2;
}

/* --- Company cell --- */
#favs tbody td:nth-child(2) {
    position: relative;
}

#favs .fav-name-row {
    padding-right: 24px;
}

#favs .fav-company-link {
    color: #1c3763;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* The "..." row menu, pinned top-right however many lines the name takes. */
#favs .fav-name-row .tdl-row-track {
    position: absolute;
    top: 6px;
    right: 4px;
}

/* Copy buttons after the name and the company number - quiet until the row is hovered or the
   button focused, always shown where there is no hover (touch screens). */
#favs .fav-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: 2px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #6b7c96;
    vertical-align: -4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s ease;
}

#favs .fav-copy-btn svg {
    width: 14px;
    height: 14px;
}

#favs tr:hover .fav-copy-btn,
#favs .fav-copy-btn:focus-visible {
    opacity: 1;
}

#favs .fav-copy-btn:hover {
    background: #edf1f6;
    color: #1c3763;
}

@media (hover: none) {
    #favs .fav-copy-btn {
        opacity: 1;
    }
}

/* Company number badge, on the name's line. */
#favs .fav-name-row .favregno-wrap {
    display: inline;
    margin-left: 4px;
    vertical-align: 1px;
}

#favs .fav-name-row .favregno-wrap.fav-item-hidden {
    display: none;
}

#favs .fav-name-row .favregno {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    padding: 0 8px;
    border: 0;
    border-radius: 999px;
    background: #edf1f6;
    color: #4a5b75;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap;
}

/* Notes with text: one row each, under the name row, with an icon. The row itself has no margin, so
   it takes no height while neither note is filled (its notes carry the 3px gap above themselves). */
#favs .fav-name-meta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-top: 0;
}

#favs .fav-name-meta-row > span {
    max-width: 100%;
    margin-top: 3px;
}

/* Empty notes ("+ Company Note" / "+ Filing Note"): chips on the name's own line, straight after the
   company number. Collapsed to zero width and transparent until the row is hovered (or a chip is
   focused from the keyboard), then they slide and fade in. Touch screens have no hover, so there they
   stay shown, like the copy buttons. They are inline, so they add no height unless the line is full. */
#favs .fav-name-row .fav-note-chips {
    display: inline;
}

#favs .fav-note-chips > span {
    display: inline-block;
    max-width: 0;
    margin-left: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: 1px;
    pointer-events: none;
    transition: max-width 0.25s ease, margin-left 0.25s ease, opacity 0.2s ease;
}

#favs tr:hover .fav-note-chips > span:not(.fav-item-hidden),
#favs .fav-note-chips:focus-within > span:not(.fav-item-hidden) {
    max-width: 180px;
    margin-left: 6px;
    opacity: 1;
    pointer-events: auto;
}

@media (hover: none) {
    #favs .fav-note-chips > span:not(.fav-item-hidden) {
        max-width: 180px;
        margin-left: 6px;
        opacity: 1;
        pointer-events: auto;
    }
}

/* "Show company notes" / "Show filing notes" switched off: gone entirely, whatever the hover state. */
#favs .fav-note-chips > .fav-item-hidden {
    max-width: 0 !important;
    margin-left: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
    #favs .fav-note-chips > span {
        transition: none;
    }
}

/* Note snippets: the start of the note, cut with "..." at about 88px. */
#favs .fav-note-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: #33465f;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.4;
}

#favs .fav-note-badge .fav-note-label,
#favs .fav-note-badge .fav-note-pencil {
    display: none;
}

#favs .fav-note-icon {
    display: inline-flex;
    flex: 0 0 13px;
    width: 13px;
    height: 13px;
}

#favs .fav-note-icon svg {
    width: 13px;
    height: 13px;
}

#favs .fav-note-badge .fav-note-text {
    display: inline-block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

#favs .fav-note-badge.fav-note-empty,
#favs .fav-note-badge.fav-note-empty .fav-note-text {
    color: #6b7894;
    font-style: normal;
}

#favs .fav-note-badge:hover .fav-note-text {
    color: #1c3763;
    text-decoration: underline;
}

/* --- Date cells --- */
#favs td.fav-col-date {
    padding-left: 8px;
    padding-right: 4px;
    white-space: normal;
}

/* Tick + date always on one line, with any badge on its own line underneath at exactly the width of
   that line. A two-column grid rather than a wrapping flex row: a flex row of fixed width broke the
   tick and the date apart as soon as the chosen text size made the date wider than the box. The
   grid is as wide as its tick + date, and never wider than the cell, so a longer link ("+ Add
   tracking") wraps inside the cell instead of running into the next column. Left-aligned, so a
   date sits in the same place whether or not its row has a badge. */
#favs .fav-deadline-line {
    display: inline-grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: start;
    gap: 3px 4px;
    width: auto;
    max-width: 100%;
}

#favs .fav-deadline-line > * {
    min-width: 0;
}

#favs .fav-deadline-line > .favourites-due-date-badge,
#favs .fav-deadline-line > .fav-date-unavailable {
    grid-column: 1 / -1;
}

/* Nothing in a date cell may spill into the next column. The Company cell is left alone: its "..."
   row menu opens a dropdown that has to be able to leave the cell. */
#favs tbody td.fav-col-date {
    overflow: hidden;
}

#favs .fav-done-tick,
#favs .tdl-fav-tick {
    width: 14px;
    height: 14px;
    margin: 0;
    flex: 0 0 14px;
}

#favs td.fav-col-date a,
#favs td.fav-col-date .fav-deadline-line > span:not(.badge) {
    color: #1c3763;
    font-size: 12.5px;
    white-space: nowrap;
}

/* A filed date (ticked) is muted. */
#favs .fav-done-tick:checked ~ a,
#favs .fav-done-tick:checked ~ a span,
#favs .tdl-fav-tick:checked ~ a,
#favs .tdl-fav-tick:checked ~ span:not(.badge) {
    color: #9aa3b2;
}

/* Soon / Overdue badge: a full-width pill under the tick + date. */
#favs .favourites-due-date-badge {
    display: block;
    width: 100%;
    margin: 0;
    padding: 2px 0;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

#favs .favourites-due-date-badge.badge-warning {
    background: #faf0d7;
    color: #8a6516;
}

#favs .favourites-due-date-badge.badge-danger {
    background: #fbe0df;
    color: #b23327;
}

/* Nothing to show: a grey dash, left-aligned, no tick. */
#favs td.fav-col-date-empty {
    color: #c3cad6;
    text-align: left;
}

/* "+ Track", "+ Add tracking", "+ Add YE", "+ Add payday": muted text with a dashed underline, no
   background or border. */
#favs .fav-track-link,
#favs .fav-vat-add {
    display: inline;
    max-width: none;
    padding: 0;
    border: 0;
    border-bottom: 1px dashed #b6bfcd;
    background: none;
    color: #9aa3b2;
    font-size: 12px;
    font-weight: 400;
    white-space: normal;
    overflow-wrap: anywhere;
    text-decoration: none;
}

#favs .fav-track-link:hover,
#favs .fav-vat-add:hover {
    color: #1c3763;
    border-bottom-color: #1c3763;
}

/* ---------------------------------------------------------------------------------------------
   Generic help dialog (_helpPopupPartial.cshtml, js/helpsheet.js) and the favourites toolbar's
   "? Help" button. The body scrolls inside the card so a long page never pushes the close button
   off screen.
   --------------------------------------------------------------------------------------------- */
.fav-help-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.fav-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.help-card {
    max-width: 560px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 48px);
}

.help-body {
    overflow-y: auto;
    margin: 6px -18px 0;
    padding: 0 18px 4px;
}

.help-loading,
.help-failed {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
}

.help-loading[hidden],
.help-failed[hidden],
.help-content[hidden] {
    display: none;
}

.help-spinner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid #c7dafb;
    border-top-color: #103b77;
    animation: help-spin 0.8s linear infinite;
}

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

.help-failed-message {
    font-weight: 600;
    color: #103b77;
}

.help-failed-hint {
    color: #5f7593;
    font-size: 13px;
}

.help-node {
    margin: 0;
}

.help-heading {
    font-size: 15px;
    font-weight: 700;
    color: #103b77;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #e3ecf8;
}

.help-heading.is-first {
    margin-top: 4px;
    padding-top: 0;
    border-top: 0;
}

.help-subheading {
    font-size: 13.5px;
    font-weight: 600;
    color: #1c2b3f;
    margin-top: 10px;
}

.help-text {
    font-size: 13px;
    color: #5f7593;
    margin-top: 2px;
    line-height: 1.45;
}

.help-text.is-first {
    margin-top: 4px;
}

@media (max-width: 575.98px) {
    .help-card {
        max-height: calc(100vh - 24px);
    }
}

/* Favourites page uses the whole window (Oct 2026): the 1450px cap left wide screens with a band of
   empty page on each side while the table's date columns were squeezed. Only this page opts in. */
.fav-main-layout.fav-main-layout-wide {
    max-width: none;
    padding-left: 16px;
    padding-right: 16px;
}


/* The Favourites page runs full width (.fav-main-layout-wide), so the header's logo and account area
   follow it to the same left and right edges instead of staying in a centred 1450px box. Scoped with
   :has() so every other page keeps the standard header. */
body:has(.fav-main-layout-wide) .portal-header-inner {
    max-width: none;
    padding-left: 28px;  /* 12px layout gutter + the wide shell's 16px */
    padding-right: 28px;
}

/* Company sub-pages (Officers, Charges, PSC, Documents) wrap their row in a second .container-fluid inside
   .company-modern-shell, which added another 12px on each side and made the sidebar jump 12px relative to
   the Overview page and the header. The shell already supplies the padding, so the inner left one goes. Pages whose
   inner container is .fav-main-layout (Officer, My Account, Pricing) are not touched. */
.company-modern-shell > .container-fluid:not(.fav-main-layout) {
    /* Left only: the sidebar column carries the 12px gutter itself, while the right-hand column has none, so
       the right padding is what keeps the cards on the header's right edge. */
    padding-left: 0;
}

/* Company overview: its row sits directly in the shell (no inner container), so the row's -12px margins push the
   main card 12px past the header on the right. The sub-pages get that 12px from their inner container. */
.container-fluid.company-modern-shell {
    padding-right: 22px;
}

/* ==========================================================================
   Company pages go full width (.page-wide on the shell: Overview, Officers, Charges, PSC, Documents,
   Officer, Disqualified officer), like Favourites. The 1450px cap goes; the sidebar stays a fixed 320px
   instead of a quarter of the window (which would be 600px on a big monitor) and the main card takes
   the rest. The header follows (22px = the layout's 12px gutter + the shell's 10px, the same as the
   capped pages). Below 992px Bootstrap's stacked layout is untouched.
   ========================================================================== */
.company-modern-shell.page-wide {
    max-width: none;
}

/* Officer / Disqualified officer wrap their row in a .fav-main-layout container with its own 1450px cap
   and 10px padding; same left-only treatment as the other sub-pages above. */
.page-wide > .container-fluid.fav-main-layout {
    max-width: none;
    padding-left: 0;
    padding-right: 12px;
}

@media (min-width: 992px) {
    .page-wide .company-modern-row > .modern-side-col {
        flex: 0 0 320px;
        width: 320px;
        max-width: 320px;
    }

    .page-wide .company-modern-row > .modern-main-col {
        flex: 1 1 0;
        width: auto;
        max-width: none;
        min-width: 0;
    }
}

body:has(.page-wide) .portal-header-inner {
    max-width: none;
}

/* Company overview rows are label | value | label | value in four equal quarters. On a wide panel that left
   the labels with far more room than they need and wrapped long values (the registered address) into a
   narrow column. A label now takes 18% of the row (never under 200px, so "Registration Number" does not wrap on a
   laptop) and its value the rest of that half, so the value columns grow with the panel. Only rows
   made purely of col-lg-3 cells; the col-lg-3 + col-lg-9 rows (Charges, Officers) already use the width. */
@media (min-width: 992px) {
    .page-wide .company-modern-main .row:not(:has(> .col-lg-9)) > .col-lg-3:nth-child(odd) {
        flex: 0 0 auto;
        width: clamp(200px, 18%, 280px);
        max-width: none;
    }

    .page-wide .company-modern-main .row:not(:has(> .col-lg-9)) > .col-lg-3:nth-child(even) {
        flex: 0 0 auto;
        width: calc(50% - clamp(200px, 18%, 280px));
        max-width: none;
    }
}

/* One scrollbar on every company page (Oct 2026). Overview used to be a fixed-height box with its own scrollbar
   inside the page's (company-page-root); it now flows like the other sections (company-flow-scroll), so the
   browser's scrollbar is the only one. The sidebar sticks near the top of the window (the header scrolls away) while the main panel scrolls past it. */
@media (min-width: 992px) {
    .page-wide .company-modern-row > .modern-side-col {
        position: sticky;
        top: 16px;
        align-self: flex-start;
    }
}

/* Search and Import Favourites go full width (.search-wide), like Favourites and the company pages: the 1450px
   cap goes, the two side rails keep a fixed width (320px quick links / history, 340px due-dates tracker) and
   the centre column takes everything else. Below 992px the stacked layout is untouched. The header follows:
   36px each side = the layout's 12px gutter + the shell's 12px + the columns' own 12px, which lines the logo up
   with the cards. */
.fav-main-layout.search-wide {
    max-width: none;
}

@media (min-width: 992px) {
    /* The row also holds a full-width banner cell (col-12) after the three columns; in the inherited nowrap row it
       took the whole line and squeezed the centre column to nothing. Letting the row wrap puts it underneath. */
    .search-wide .search-three-pane-row {
        flex-wrap: wrap;
    }

    .search-wide .search-left-col {
        flex: 0 0 320px;
        max-width: 320px;
    }

    .search-wide .search-center-col {
        flex: 1 1 0;
        max-width: none;
        min-width: 0;
    }

    .search-wide .search-right-col {
        flex: 0 0 340px;
        max-width: 340px;
    }
}

body:has(.search-wide) .portal-header-inner,
body:has(.search-wide) .marketing-header-inner {
    max-width: none;
    padding-left: 36px;
    padding-right: 36px;
}

/* ==========================================================================
   Favourites restructure (Oct 2026)
   Views/Home/Favourites.cshtml, _favouritesCompactViewPartial.cshtml, js/favsummarystrip.js.
   Layout and styling only: nav links in the site header, a one-line Filing deadlines chip strip,
   underlined tabs inside one white card, a one-row toolbar with a Display menu, a plainer table.
   Colours are the file's existing ones (navy #123f80 / #0d315f, border #dce7f8, muted #5f7593,
   amber and red from .fds-count-due / .fds-count-overdue). Scoped to this page: the header rules
   by body:has(.fav-main-layout-wide), the table rules by #favs, the rest by .fav-* classes that only
   this view uses. Classic view (FavouritesClassicView.cshtml) shares none of it.
   ========================================================================== */

/* --- 1. Header: white bar with the page's nav links ---------------------- */
body:has(.fav-main-layout-wide) .portal-header-inner {
    background: #ffffff;
    border-bottom: 1px solid #e4ecf8;
}

body:has(.fav-main-layout-wide) .portal-header-inner .navbar {
    padding-top: 8px;
    padding-bottom: 8px;
}

body:has(.fav-main-layout-wide) .fav-main-col-full {
    margin-top: 14px;
}

.portal-header-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 6px 12px !important;
    border-radius: 9px;
    color: #33465f !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

.portal-header-link:hover,
.portal-header-link:focus-visible {
    background: #eef4fd;
    color: #123f80 !important;
    text-decoration: none;
}

.portal-header-link:focus-visible {
    outline: 3px solid rgba(31, 111, 235, 0.45);
    outline-offset: 2px;
}

.portal-header-link-icon {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
}

/* --- 2. Filing deadlines strip ------------------------------------------- */
.fds-panel {
    padding: 10px 16px;
    background: #ffffff;
}

.fds-header {
    flex-wrap: wrap;
    gap: 8px 10px;
}

.fds-chips {
    display: flex;
    flex: 1 1 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-left: 6px;
}

.fds-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 3px 5px 3px 12px;
    border-radius: 999px;
    background: #f1f5fb;
    color: #33465f;
    font-size: 13px;
    line-height: 1.3;
    white-space: nowrap;
}

.fds-chip-label {
    margin-right: 2px;
}

.fds-chip-count {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

.fds-chip-due {
    background: #fdf0cf;
    color: #7a4b00;
}

.fds-chip-overdue {
    background: #fbe3e3;
    color: #9b1c1c;
}

button.fds-chip-count {
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

button.fds-chip-due:hover,
button.fds-chip-due.is-active {
    border-color: #c98a12;
}

button.fds-chip-overdue:hover,
button.fds-chip-overdue.is-active {
    border-color: #c0392b;
}

button.fds-chip-count.is-active {
    box-shadow: 0 0 0 2px rgba(18, 63, 128, 0.18);
    font-weight: 600;
}

button.fds-chip-count:focus-visible {
    outline: 3px solid rgba(31, 111, 235, 0.45);
    outline-offset: 2px;
}

.fds-chip-clear {
    padding-right: 8px;
    color: #6b7c96;
    font-size: 12px;
}

/* "Details" reads as a text button, not a pill. The arrow points down while closed. */
.fds-header .fav-strip-toggle {
    min-height: 30px;
    padding: 4px 10px;
    border-color: transparent;
    border-radius: 9px;
    background: transparent;
    color: #33465f;
}

.fav-summary-strip.is-collapsed .fav-strip-toggle-icon {
    transform: rotate(180deg);
}

.fav-summary-strip:not(.is-collapsed) .fds-header {
    margin-bottom: 10px;
}

/* --- 3. Main card with underlined tabs ----------------------------------- */
.fav-tabbed-panel.has-tabs {
    background: #ffffff;
    border: 1px solid #dce7f8;
    border-radius: 18px;
    box-shadow: 0 12px 26px rgba(17, 56, 114, 0.08);
}

.fav-tabbed-panel.has-tabs > .fav-tabs-wrap {
    margin: 0;
    padding: 0 24px;
    border-bottom: 1px solid #dce7f8;
}

.fav-tabbed-panel.has-tabs .fav-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 34px;
    padding: 0;
    overflow-x: auto;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* The 3px line sits on the tab row's own bottom border. */
.fav-tabbed-panel.has-tabs .fav-tab {
    flex: 0 0 auto;
    min-height: 0;
    margin-bottom: -1px;
    padding: 18px 4px 15px;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #5f7593;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
}

.fav-tabbed-panel.has-tabs .fav-tab:hover {
    background: transparent;
    color: #123f80;
}

.fav-tabbed-panel.has-tabs .fav-tab.is-active {
    border-bottom-color: #123f80;
    background: transparent;
    box-shadow: none;
    color: #123f80;
    font-weight: 600;
}

.fav-tabbed-panel.has-tabs .fav-tab:focus-visible {
    outline-offset: -3px;
}

/* The shield's tick is drawn in the background colour, which is white for every tab now. */
.fav-tabbed-panel.has-tabs .fav-tab-shield-check,
.fav-tabbed-panel.has-tabs .fav-tab-idv.is-active .fav-tab-shield-check {
    stroke: #ffffff;
}

.fav-tabbed-panel.has-tabs .fav-tab.is-active .fav-tab-alert {
    box-shadow: none;
}

/* The panels keep their own padding but lose their card chrome: the card is the wrapper. */
.fav-tabbed-panel.has-tabs > .phase1-surface {
    background: transparent;
    border: 0;
    border-radius: 0 0 17px 17px;
    box-shadow: none;
}

.fav-tabbed-panel.has-tabs > .fav-right-pane {
    padding: 20px 24px 22px;
}

/* "New" hint: left-aligned over the tab row, its arrow roughly over the second tab. */
.fav-tabbed-panel.has-tabs .idv-tab-hint,
.fav-tabbed-panel.has-tabs .fav-tabs-wrap.tdl-3col .idv-tab-hint {
    align-items: flex-start;
    width: auto;
    margin: 0;
    padding: 12px 0 0;
}

.fav-tabbed-panel.has-tabs .idv-tab-hint-arrow {
    margin: 4px 0 -8px 240px;
}

/* --- 4. Favourites toolbar: one row -------------------------------------- */
.fav-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
}

.fav-toolbar-search {
    display: flex;
    flex: 1 1 320px;
    min-width: 0;
    margin: 0;
}

.fav-toolbar-search .fav-search-box {
    flex: 1 1 auto;
    max-width: none;
}

.fav-toolbar-search .fav-filter-input {
    height: 42px;
    border-color: #d7e3f6;
    border-radius: 10px;
    background: #ffffff;
    padding-left: 38px;
}

.fav-toolbar-search .fav-search-icon {
    left: 14px;
}

/* Its buttons are items of .fav-toolbar-row. */
.fav-toolbar-row .fav-toolbar-controls {
    display: contents;
}

.fav-toolbar-row .dropdown {
    position: relative;
    display: flex;
}

.fav-toolbar-row .fav-fontsize-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 14px;
    border-color: #d7e3f6;
    border-radius: 10px;
    color: #1c3763;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

.fav-toolbar-row .fav-fontsize-btn:hover,
.fav-toolbar-row .fav-fontsize-btn[aria-expanded="true"] {
    background: #f2f7ff;
    border-color: #b9cfee;
    color: #0f3d80;
}

.fav-toolbar-row .fav-fontsize-btn:focus-visible {
    outline: 3px solid rgba(31, 111, 235, 0.45);
    outline-offset: 2px;
}

.fav-btn-icon,
.fav-btn-caret {
    display: inline-flex;
    flex: 0 0 auto;
}

.fav-btn-icon svg {
    width: 16px;
    height: 16px;
}

.fav-btn-caret svg {
    width: 12px;
    height: 12px;
}

.fav-toolbar-row .fav-help-btn {
    justify-content: center;
    width: 42px;
    padding: 0;
}

.fav-toolbar-row .fav-help-btn .fav-btn-icon svg {
    width: 18px;
    height: 18px;
}

.fav-toolbar-row .dropdown-menu {
    top: 100%;
    left: 0;
    margin-top: 4px;
}

.fav-display-menu {
    min-width: 220px;
    padding: 4px 0 8px;
}

.fav-display-sizes {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 2px 14px 0;
}

.fav-display-size {
    min-width: 30px;
    height: 28px;
    padding: 0 6px;
    border: 1px solid #d7e3f6;
    border-radius: 8px;
    background: #ffffff;
    color: #1c3763;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.fav-display-size:hover {
    background: #f2f7ff;
    border-color: #b9cfee;
}

.fav-display-size.is-current {
    background: #123f80;
    border-color: #123f80;
    color: #ffffff;
}

.fav-display-size:focus-visible {
    outline: 3px solid rgba(31, 111, 235, 0.45);
    outline-offset: 2px;
}

.fav-toolbar .fav-filter-bar {
    margin-top: 10px;
}

/* Notice: one quiet line, not a banner. */
.fav-important-note {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 12px 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: #5f7593;
    font-size: 12.5px;
    line-height: 1.4;
    text-align: left;
}

.fav-note-info {
    display: inline-flex;
    flex: 0 0 14px;
}

.fav-note-info svg {
    width: 14px;
    height: 14px;
}

/* --- 5. Table -------------------------------------------------------------- */
/* No box of its own: it sits directly in the card. */
#favsTableShell {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

#favs thead th {
    background: #eef2f9;
    color: #33465f;
    border-bottom: 0 !important;
    font-size: 12.5px;
    font-weight: 600;
}

#favs thead .fav-head-top th {
    background: #eef2f9;
}

#favs thead .fav-head-top th:first-child {
    border-radius: 10px 0 0 10px;
}

#favs thead .fav-head-top th:last-child {
    border-radius: 0 10px 10px 0;
}

/* One slim header row while no CT600 / PAYE / CIS column is showing: DataTables detaches hidden
   columns' cells, so the second header row is then empty. */
#favs thead:not(:has(.fav-head-sub th)) .fav-head-top th[rowspan="2"] {
    height: 40px;
}

/* The sorted column keeps the header's colours; its arrow says which way. Arrows sit after the label. */
#favs .sorting_desc,
#favs .sorting_asc {
    background: #eef2f9 !important;
    color: #0d315f;
    font-weight: 600;
}

#favs thead th.sorting::after,
#favs thead th.sorting_asc::after,
#favs thead th.sorting_desc::after {
    position: static;
    display: inline-block;
    margin-left: 6px;
    transform: none;
    font-size: 10px;
    vertical-align: 1px;
}

#favs thead th.sorting::after {
    color: #8696ae;
}

#favs thead th.sorting_asc::after,
#favs thead th.sorting_desc::after {
    color: #123f80;
}

#favs thead th.fav-col-index::after,
#favs thead th.fav-col-actions::after {
    content: none;
}

#favs .fav-col-actions {
    width: 56px;
}

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

#favs tbody td {
    padding-top: 13px;
    padding-bottom: 13px;
}

/* Row number: small round grey badge. */
#favs .fav-item-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border: 0;
    border-radius: 999px;
    background: #eef2f7;
    color: #5f7593;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
}

#favs .fav-name-row {
    padding-right: 0;
}

#favs .fav-company-link {
    color: #123f80;
    font-weight: 600;
}

#favs .fav-note-icon {
    display: none;
}

#favs .fav-note-badge {
    font-size: 12.5px;
}

/* Company Note and Filing Note share one shape: a padded, rounded box. Grey for the Company Note,
   a warm tint for the Filing Note. */
#favs .fav-note-badge.favnotes,
#favs .fav-note-badge.fav-filing-note-edit {
    padding: 2px 10px;
    border-radius: 6px;
    height: auto;
    font-size: 12.5px;
    line-height: 1.4;
}

#favs .fav-note-badge.fav-filing-note-edit:not(.fav-note-empty) {
    background: #fff6e9;
    color: #6a4a15;
}

/* A filed date: the tick box and the date turn green (no strike-through). */
#favs .fav-done-tick:checked,
#favs .tdl-fav-tick:checked {
    accent-color: #1a7f37;
}

#favs .fav-done-tick:checked ~ a,
#favs .fav-done-tick:checked ~ a span,
#favs .tdl-fav-tick:checked ~ a,
#favs .tdl-fav-tick:checked ~ span:not(.badge) {
    color: #1a7f37;
    text-decoration: none;
}

/* "Not available": plain grey text, no pill. The markup says "Not Available". */
#favs .fav-date-unavailable {
    padding: 0;
    border-radius: 0;
    background: none;
    color: #7b8aa3;
    font-size: 12.5px;
    font-weight: 400;
    text-transform: lowercase;
}

#favs .fav-date-unavailable::first-letter {
    text-transform: uppercase;
}

/* "+ Track": a plain link. */
#favs .fav-vat-add {
    max-width: none;
    border-bottom: 0;
    font-weight: 500;
    white-space: nowrap;
}

/* "..." row menu in its own last column. */
#favs td.fav-col-actions {
    padding-left: 4px;
    padding-right: 12px;
    text-align: right;
    overflow: visible;
}

#favs td.fav-col-actions .tdl-row-track {
    position: relative;
    margin-left: 0;
}

#favs td.fav-col-actions .tdl-row-track-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-color: #d7e3f6;
    border-radius: 8px;
}

#favs td.fav-col-actions .tdl-row-track-btn:hover {
    background: #f2f7ff;
    border-color: #b9cfee;
}

/* Row menu: a rounded card - actions with line icons, a divider, then the Track switches. */
#favs .tdl-row-track-menu {
    min-width: 230px;
    padding: 6px;
    border: 1px solid #d7e3f6;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(15, 61, 128, 0.16), 0 2px 6px rgba(15, 61, 128, 0.08);
}

#favs .tdl-row-track-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    color: #1c3763;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

#favs .tdl-row-track-menu .dropdown-item:hover,
#favs .tdl-row-track-menu .dropdown-item:focus {
    background: #f2f7ff;
    color: #0f3d80;
}

#favs .tdl-row-menu-icon {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    color: #5f7593;
}

#favs .tdl-row-track-menu .dropdown-item:hover .tdl-row-menu-icon {
    color: #1f6feb;
}

#favs .tdl-row-track-menu .dropdown-divider {
    height: 0;
    margin: 6px 4px;
    overflow: hidden;
    border-top: 1px solid #e3e9f3;
}

#favs .tdl-row-menu-section {
    padding: 4px 10px 2px;
    color: #6b7f9c;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* The CT600 / PAYE / CIS checkboxes drawn as switches (still the real checkbox underneath). */
#favs .tdl-row-track-item {
    justify-content: space-between;
}

#favs .tdl-row-track-toggle {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex: 0 0 34px;
    width: 34px;
    height: 20px;
    margin: 0;
    border-radius: 999px;
    background: #cfd8e6;
    cursor: pointer;
    transition: background 0.15s ease;
}

#favs .tdl-row-track-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 30, 60, 0.3);
    transition: transform 0.15s ease;
}

#favs .tdl-row-track-toggle:checked {
    background: #1f6feb;
}

#favs .tdl-row-track-toggle:checked::after {
    transform: translateX(14px);
}

#favs .tdl-row-track-toggle:focus-visible {
    outline: 2px solid #1f6feb;
    outline-offset: 2px;
}

#favs .tdl-row-track-toggle:disabled {
    opacity: 0.5;
    cursor: progress;
}

#favs td.fav-col-actions .tdl-row-track-menu {
    right: 0;
    left: auto;
    text-align: left;
}

/* --- 6. Narrow screens ----------------------------------------------------- */
@media (max-width: 767.98px) {
    .fds-chips {
        flex: 1 1 100%;
        order: 3;
        margin-left: 0;
    }

    .fav-tabbed-panel.has-tabs > .fav-tabs-wrap {
        padding: 0 14px;
    }

    .fav-tabbed-panel.has-tabs .fav-tabs {
        gap: 20px;
    }

    .fav-tabbed-panel.has-tabs > .fav-right-pane {
        padding: 14px 14px 16px;
    }

    .fav-toolbar-search {
        flex: 1 1 100%;
    }
}

/* DataTables wraps #favs in Bootstrap .row/.col cells whose -12px gutters made the scroll box 12px wider
   than its content, so a sideways scrollbar showed under a table that fitted. */
.fav-table-scroll .dataTables_wrapper .row {
    margin-left: 0;
    margin-right: 0;
}

.fav-table-scroll .dataTables_wrapper .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

/* Due soon / Overdue tags: the same amber and red as the deadlines strip, as small rounded tags
   under the date rather than solid full-width pills. */
#favs .favourites-due-date-badge {
    display: inline-block;
    width: auto;
    justify-self: start;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 600;
}

#favs .favourites-due-date-badge.badge-warning {
    /* !important: the shared .favourites-due-date-badge colours (Classic view too) are !important. */
    background: #fdf0cf !important;
    color: #7a4b00 !important;
}

#favs .favourites-due-date-badge.badge-danger {
    background: #fbe3e3 !important;
    color: #9b1c1c !important;
}

#favs .favourites-due-date-badge {
    border: 0 !important;
}

/* The tab row scrolls sideways on a narrow screen; no scrollbar drawn under it. */
.fav-tabbed-panel.has-tabs .fav-tabs {
    scrollbar-width: none;
}

.fav-tabbed-panel.has-tabs .fav-tabs::-webkit-scrollbar {
    display: none;
}

@media (max-width: 767.98px) {
    /* A long chip ("Confirmation statement 4 due 12 overdue") wraps inside itself rather than
       running past the card. */
    .fds-chip {
        flex-wrap: wrap;
        max-width: 100%;
        border-radius: 14px;
        white-space: normal;
    }
}

/* ==========================================================================
   Favourites restructure, part 2 (Oct 2026): the Identity Verification and Self Assessment tabs
   inside the same card. _verificationListPartial.cshtml, _selfAssessmentPanelPartial.cshtml.
   Restyle and move only; idverification.js / selfassessment.js still own every behaviour.
   Same spacing as the Favourites tab: content starts 20px under the tab row, 24px from the edges.
   ========================================================================== */
.fav-tabbed-panel.has-tabs > .idv-panel,
.fav-tabbed-panel.has-tabs > .sa-tab-panel {
    padding: 20px 24px 22px;
}

/* --- Identity Verification: one toolbar row ------------------------------ */
.idv-options-panel {
    margin-top: 0;
    margin-bottom: 14px;
}

.idv-toolbar {
    align-items: center;
    gap: 10px;
}

/* Officers / PSC: a segmented control. The selected option is the white one. */
.idv-segmented {
    flex: 0 0 auto;
    gap: 2px;
    height: 42px;
    padding: 4px;
    border: 0;
    border-radius: 10px;
    background: #eef2f9;
}

.idv-segment {
    flex: 0 0 auto;
    height: 34px;
    padding: 0 12px;
    border-radius: 8px;
    color: #5f7593;
    font-size: 13.5px;
    font-weight: 500;
}

.idv-segment .idv-icon {
    width: 15px;
    height: 15px;
}

.idv-segment:hover {
    background: rgba(255, 255, 255, 0.6);
    color: #123f80;
}

.idv-segment.is-selected {
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(17, 56, 114, 0.16);
    color: #123f80;
    font-weight: 600;
}

.idv-segment-count,
.idv-segment.is-selected .idv-segment-count {
    background: #e6ecf5;
    color: #33465f;
    font-size: 11.5px;
    font-weight: 500;
}

.idv-search,
.idv-sort {
    height: 42px;
    border-color: #d7e3f6;
    border-radius: 10px;
}

.idv-search {
    background: #ffffff;
}

.idv-search .idv-icon,
.idv-sort .idv-icon {
    width: 16px;
    height: 16px;
}

.idv-search input {
    font-size: 14px;
}

.idv-sort {
    color: #1c3763;
    font-size: 13.5px;
    font-weight: 500;
}

.idv-sort select {
    color: #1c3763;
    font-size: 13.5px;
    font-weight: 500;
}

.idv-sort-chevron {
    width: 12px;
    height: 12px;
}

/* Show unknown + its help icon, on the toolbar row after the search box. */
.idv-toolbar .idv-unknown-row {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0 4px;
}

.idv-toolbar .idv-unknown-toggle {
    margin: 0;
}

.idv-toolbar .idv-unknown-toggle-label {
    color: #1c3763;
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
}

/* --- Identity Verification: table directly in the card ------------------- */
.idv-table-shell {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

#idvTable {
    table-layout: fixed;
    margin-top: 0;
    border-collapse: collapse;
}

#idvTable thead th {
    padding: 11px 8px;
    border-bottom: 0 !important;
    background: #eef2f9;
    color: #33465f;
    font-size: 12.5px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

#idvTable thead th:first-child {
    border-radius: 10px 0 0 10px;
}

#idvTable thead th:last-child {
    border-radius: 0 10px 10px 0;
}

/* Name and Company share the width, Company a little wider; Due and Status are fixed. */
#idvTable th.fav-col-index {
    width: 56px;
    text-align: center;
}

#idvTable th.idv-col-name {
    width: 32%;
}

#idvTable th.idv-col-due {
    width: 160px;
}

#idvTable th.idv-col-status {
    width: 170px;
}

.idv-th-sort {
    cursor: pointer;
}

.idv-th-sort::after {
    content: "\2195";
    display: inline-block;
    margin-left: 6px;
    color: #8696ae;
    font-size: 10px;
    vertical-align: 1px;
}

.idv-th-sort.is-sorted::after {
    content: "\25B2";
    color: #123f80;
}

.idv-th-sort:focus-visible {
    outline: 3px solid rgba(31, 111, 235, 0.45);
    outline-offset: -3px;
}

#idvTable tbody td {
    padding: 13px 8px;
    border-bottom: 1px solid #e6edf7;
    vertical-align: middle;
}

#idvTable td.idv-col-name {
    color: #123f80;
    font-size: 14px;
    font-weight: 600;
}

#idvTable td.idv-col-company {
    overflow: hidden;
    color: #5f7593;
    font-size: 13px;
    font-weight: 400;
    text-overflow: ellipsis;
}

#idvTable .idv-due-date {
    color: #1c3763;
    font-size: 13.5px;
    font-weight: 500;
}

#idvTable .fav-item-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border: 0;
    border-radius: 999px;
    background: #eef2f7;
    color: #5f7593;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
}

/* Status tags: the same amber and red as the deadlines strip. */
.idv-pill {
    gap: 5px;
    padding: 3px 10px 3px 7px;
    font-size: 12px;
}

.idv-pill .idv-icon {
    width: 14px;
    height: 14px;
}

.idv-pill-due {
    background: #fdf0cf;
    color: #7a4b00;
}

.idv-pill-overdue {
    background: #fbe3e3;
    color: #9b1c1c;
}

/* --- Self Assessment: choosing who to track ------------------------------ */
.sa-intro {
    margin-bottom: 16px;
}

.sa-intro-title {
    margin: 0 0 4px;
    color: #123f80;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}

.sa-intro-text {
    margin: 0;
    color: #5f7593;
    font-size: 13.5px;
    line-height: 1.5;
}

.sa-add-section-primary {
    margin-top: 0;
    padding: 18px 18px 16px;
    background: #f8fafd;
}

.sa-add-section-title {
    font-weight: 600;
}

.sa-add-section-hint {
    max-width: none;
    margin-bottom: 12px;
    font-size: 13px;
}

.sa-manual-add-label {
    margin-bottom: 6px;
    color: #33465f;
    font-size: 12.5px;
    font-weight: 500;
}

.sa-manual-add-row {
    gap: 10px;
}

.sa-manual-add-input {
    height: 42px;
    border-color: #d7e3f6;
    font-size: 14px;
}

.sa-manual-add-input:focus {
    border-color: #7aa7e8;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.18);
}

/* Secondary: navy outline. The filled style is Save's. */
.sa-manual-add-btn {
    flex: 0 0 auto;
    justify-content: center;
    height: 42px;
    padding: 0 16px;
    border-color: #123f80;
    color: #123f80;
    font-size: 13.5px;
}

.sa-manual-add-btn:hover {
    background: #eef4fd;
    border-color: #123f80;
    color: #123f80;
}

.sa-manual-add-btn .sa-icon {
    display: inline-flex;
    width: 14px;
    height: 14px;
}

.sa-manual-add-btn .sa-icon svg {
    width: 14px;
    height: 14px;
}

/* Heading row of the officer picker: heading + company count left, search + Select all right. */
.sa-add-section-head {
    align-items: flex-start;
    margin-bottom: 14px;
}

.sa-add-section-heading {
    display: flex;
    flex: 1 1 260px;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sa-add-section-count {
    color: #5f7593;
    font-size: 12.5px;
}

.sa-add-section-head .sa-search {
    height: 42px;
    border-color: #d7e3f6;
}

.sa-add-section-head .sa-selectall-btn {
    height: 42px;
    margin-left: 0;
    padding: 0 14px;
    border-color: #d7e3f6;
    background: #ffffff;
    color: #1c3763;
    font-size: 13.5px;
    font-weight: 500;
}

.sa-add-section-head .sa-selectall-btn:hover {
    background: #f2f7ff;
    border-color: #b9cfee;
    color: #0f3d80;
    transform: none;
}

/* Three cards a row, top-aligned. */
.sa-company-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.sa-company-card,
.sa-company-card.is-selected {
    padding: 0;
    overflow: hidden;
    border-color: #dce7f8;
    border-radius: 12px;
    box-shadow: none;
}

/* Header strip. */
.sa-company-row {
    align-items: flex-start;
    padding: 12px 14px;
    border-bottom: 1px solid #e6edf7;
    background: #f8fafd;
}

.sa-company-row:hover {
    background: #f2f6fc;
}

.sa-company-row .sa-checkbox {
    margin-top: 2px;
}

.sa-company-name {
    color: #123f80;
    font-size: 13.5px;
    font-weight: 600;
}

/* Grey while nothing is ticked, navy once somebody is. */
.sa-company-count {
    font-weight: 500;
}

.sa-company-card.is-selected .sa-company-count {
    color: #123f80;
    font-weight: 600;
}

.sa-officer-list {
    padding: 4px 0;
}

.sa-officer-row {
    padding: 9px 14px;
}

.sa-officer-row:has(.sa-officer-checkbox:checked) {
    background: #eef4fd;
}

/* Footer bar along the bottom of the card: count on the left, Cancel and Save on the right. */
.sa-step-bar {
    align-items: center;
    margin: 20px -24px -22px;
    padding: 14px 24px;
    border-top: 1px solid #dce7f8;
    border-radius: 0 0 17px 17px;
    background: #f8fafd;
}

.sa-step-bar .sa-banner {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: #33465f;
}

.sa-step-bar .sa-banner:not(.is-selected) {
    visibility: hidden;
}

.sa-step-bar .sa-banner-icon,
.sa-step-bar #saBannerDetail {
    display: none;
}

.sa-step-bar .sa-banner-text strong {
    color: #1c3763;
    font-size: 13.5px;
    font-weight: 500;
}

@media (max-width: 1199.98px) {
    .sa-company-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .fav-tabbed-panel.has-tabs > .idv-panel,
    .fav-tabbed-panel.has-tabs > .sa-tab-panel {
        padding: 14px 14px 16px;
    }

    .idv-toolbar .idv-search {
        flex: 1 1 100%;
        order: 2;
    }

    .idv-toolbar .idv-unknown-row,
    .idv-toolbar .idv-sort {
        order: 3;
    }

    /* Keep #, Name and Status. */
    #idvTable .idv-col-company,
    #idvTable .idv-col-due {
        display: none;
    }

    #idvTable th.idv-col-name {
        width: auto;
    }

    #idvTable th.idv-col-status {
        width: 130px;
    }

    .sa-company-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sa-step-bar {
        flex-wrap: wrap;
        margin: 16px -14px -16px;
        padding: 12px 14px;
    }
}

/* The site-wide .page_wrapper { overflow-x: hidden } (style.css) makes the wrapper a scroll container,
   which silently defeats position: sticky inside it - the Self Assessment footer bar (Cancel / Save)
   was meant to stay in view over a grid that can be thousands of pixels tall, and did not. "clip"
   cuts sideways overflow the same way without creating a scroll container. This page only. */
body:has(.fav-main-layout-wide) .page_wrapper {
    overflow-x: clip;
    overflow-y: visible;
}

@media (max-width: 767.98px) {
    /* The portal centres text in content sections on a phone; these two tabs are forms and tables. */
    .fav-tabbed-panel.has-tabs > .idv-panel,
    .fav-tabbed-panel.has-tabs > .sa-tab-panel,
    .fav-tabbed-panel.has-tabs > .idv-panel td,
    .fav-tabbed-panel.has-tabs > .idv-panel th {
        text-align: left;
    }

    /* With nobody selected the count is empty; do not leave it a blank row above the buttons. */
    .sa-step-bar .sa-banner {
        flex: 1 1 100%;
    }

    .sa-step-bar .sa-banner:not(.is-selected) {
        display: none;
    }

    .sa-step-bar .modern-btn {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* Text size slider in the Display menu (replaces the six size buttons). */
.fav-display-slider {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 14px 4px;
}

.fav-display-slider input[type="range"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 24px;
    margin: 0;
    accent-color: #123f80;
    cursor: pointer;
}

.fav-display-slider-a {
    flex: 0 0 auto;
    color: #5f7593;
    font-weight: 600;
    line-height: 1;
}

.fav-display-slider-a.is-small {
    font-size: 11px;
}

.fav-display-slider-a.is-large {
    font-size: 18px;
}

.fav-date-filter-menu-header #currentFontSize {
    text-transform: none;
}

/* Text size (the Display menu's slider) on the other two tabs. favspage.js sets --fav-text-size on the
   card; the fallbacks are these elements' own sizes, used until it has run. Names, dates and companies
   scale; tags, badges, headings and buttons keep their fixed sizes, as in the favourites table. */
.fav-tabbed-panel #idvTable td.idv-col-name,
.fav-tabbed-panel #idvTable .idv-due-date {
    font-size: var(--fav-text-size, 14px);
}

.fav-tabbed-panel #idvTable td.idv-col-company {
    font-size: calc(var(--fav-text-size, 14px) - 1pt);
}

.fav-tabbed-panel .sa-company-name,
.fav-tabbed-panel .sa-officer-name,
.fav-tabbed-panel .sa-manual-name,
.fav-tabbed-panel #saTable .sa-date-text,
.fav-tabbed-panel #saTable .sa-not-tracked {
    font-size: var(--fav-text-size, 13.5px);
}

.fav-tabbed-panel .sa-company-number,
.fav-tabbed-panel .sa-officer-company {
    font-size: calc(var(--fav-text-size, 13.5px) - 2pt);
}

/* Display > text size: --fav-text-size is the main text size (default 12pt). Column headings, tracked-date text,
   due badges and note chips scale with it too, by a smaller step (the delta from 12pt times a factor), so they stay
   relative to the main text and look unchanged at the default size. */
#favs thead th,
#favs thead th span {
    font-size: calc(12.5px + (var(--fav-text-size, 12pt) - 12pt) * 0.5);
}

#favs td.fav-col-date-tracked a,
#favs td.fav-col-date-tracked .fav-deadline-line > span:not(.badge),
#favs td.fav-col-date-tracked > span {
    font-size: calc(12.5px + (var(--fav-text-size, 12pt) - 12pt) * 0.8) !important;
}

#favs .favourites-due-date-badge {
    font-size: calc(10px + (var(--fav-text-size, 12pt) - 12pt) * 0.5);
}

#favs .fav-note-badge,
#favs .fav-note-badge .fav-note-text {
    font-size: calc(12.5px + (var(--fav-text-size, 12pt) - 12pt) * 0.7);
}

/* Empty notes read "+ Company Note" / "+ Filing Note": a tighter chip so both fit on one line. */
#favs .fav-note-badge.fav-note-empty {
    padding: 1px 8px;
    white-space: nowrap;
}

#favs .favourites-due-date-badge {
    white-space: nowrap;
}

/* Tab header with the Favourites toolbar beside the tabs (favouritestabs.js moves .fav-toolbar-row in). */
.fav-tabbed-panel.has-tabs > .fav-tabs-wrap.has-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 20px;
}

.fav-tabbed-panel.has-tabs .fav-tabs-wrap.has-toolbar .fav-tabs {
    flex: 0 0 auto;
    margin: 4px 0 -8px 0;
}

.fav-tabs-wrap.has-toolbar > .fav-header-controls {
    flex: 1 1 520px;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    /* 16px above / 4px below puts the controls level with the middle of the tab labels, which sit lower because
       .fav-tabs pulls its bottom edge down onto the header border. */
    margin: 16px 0 4px;
}

/* Identity Verification and Self Assessment controls, moved into the tab header. Their old boxes are empty now. */
.idv-options-panel:not(:has(*)),
.sa-options-panel:not(:has(*)) {
    display: none;
}

.fav-tabs-wrap.has-toolbar .idv-search {
    flex: 1 1 240px;
    min-width: 170px;
    max-width: 300px;
}

.fav-tabs-wrap.has-toolbar .idv-search input,
.fav-tabs-wrap.has-toolbar .sa-search input {
    min-width: 0;
}

.fav-tabs-wrap.has-toolbar .sa-search {
    flex: 1 1 280px;
    min-width: 180px;
    max-width: 360px;
}

.fav-tabs-wrap.has-toolbar .sa-officer-count {
    margin-left: 0;
}

.fav-tabs-wrap.has-toolbar .idv-segmented,
.fav-tabs-wrap.has-toolbar .idv-sort,
.fav-tabs-wrap.has-toolbar .idv-unknown-row,
.fav-tabs-wrap.has-toolbar .sa-sort,
.fav-tabs-wrap.has-toolbar .sa-secondary-btn {
    flex: 0 0 auto;
}

.fav-tabs-wrap.has-toolbar .fav-toolbar-search {
    flex: 1 1 380px;
    min-width: 200px;
    max-width: 420px;
}

.fav-tabs-wrap.has-toolbar .fav-search-box {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

.fav-tabs-wrap.has-toolbar .fav-filter-input {
    min-width: 0;
    width: 100%;
}

.fav-tabs-wrap.has-toolbar .fav-toolbar-row .dropdown,
.fav-tabs-wrap.has-toolbar .fav-toolbar-row .fav-fontsize-btn {
    flex: 0 0 auto;
}

/* ---- Identity Verification and Self Assessment: rows, dates and menus match the Favourites table ---- */
#idvTable tbody td,
#saTable tbody td {
    border-top: 0;
    border-bottom: 1px solid #edf3fb;
}

#idvTable tbody tr:hover td,
#saTable tbody tr:hover td {
    background: #f8fbff;
}

#saTable tbody tr:hover {
    background: transparent;
}

#idvTable tbody tr {
    cursor: pointer;
}

/* Officer name links out (new tab) like the company name on Favourites. */
a.sa-officer-link {
    color: #123f80;
    text-decoration: none;
}

a.sa-officer-link:hover {
    color: #0d3a76;
    text-decoration: underline;
}

/* Dates: flat tick + date, green once filed, with the same Due soon / Overdue badge as Favourites. */
.sa-date-btn.is-due,
.sa-date-btn.is-overdue,
.sa-date-btn.is-open {
    background: transparent;
    color: #1c3763;
}

.sa-date-btn.is-done {
    background: transparent;
    color: #1a7f37;
}

.sa-date-btn.is-done .sa-date-box {
    background: #1a7f37;
    border-color: #1a7f37;
}

.sa-due-badge {
    display: block;
    width: max-content;
    margin: 3px 0 0 7px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
}

.sa-due-badge.is-due {
    background: #f7c948;
    color: #5f3a00;
    border: 1px solid #e3b536;
}

.sa-due-badge.is-overdue {
    background: #cf3a3a;
    color: #ffffff;
    border: 1px solid #b83232;
}

/* The "..." button and its menu: same bordered square button and rounded card as the Favourites row menu. */
.sa-row-menu-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #d7e3f6;
    background: #ffffff;
}

.sa-row-menu-btn:hover,
.sa-row-menu-btn[aria-expanded="true"] {
    background: #f2f7ff;
    border-color: #b9cfee;
}

.sa-row-menu {
    min-width: 200px;
    padding: 6px;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(15, 61, 128, 0.16), 0 2px 6px rgba(15, 61, 128, 0.08);
}

.sa-row-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    color: #1c3763;
}

.sa-row-menu-item[hidden],
.sa-row-menu-divider[hidden] {
    display: none;
}

.sa-row-menu-item:hover,
.sa-row-menu-item:focus-visible {
    background: #f2f7ff;
    color: #0f3d80;
}

.sa-row-menu-icon {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    color: #5f7593;
}

.sa-row-menu-item:hover .sa-row-menu-icon {
    color: #1f6feb;
}

.sa-row-menu-item.is-danger,
.sa-row-menu-item.is-danger .sa-row-menu-icon {
    color: #9b1c1c;
}

.sa-row-menu-divider {
    height: 0;
    margin: 6px 4px;
    border-top: 1px solid #e3e9f3;
}

/* Verification status badges on the People / PSC / Officer pages. The helpers return Bootstrap 4 colour
   classes (badge-success etc.) but the portal loads Bootstrap 5, which has none - so the text was white on
   nothing. Bigger, bolder and explicitly coloured here. */
.badge.verification-badge {
    display: inline-block;
    padding: 3px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.verification-badge.badge-success {
    background: #1a7f37;
    border-color: #166a2e;
    color: #ffffff;
}

.verification-badge.badge-warning {
    background: #f7c948;
    border-color: #e3b536;
    color: #5f3a00;
}

.verification-badge.badge-danger {
    background: #cf3a3a;
    border-color: #b83232;
    color: #ffffff;
}

.verification-badge.badge-secondary {
    background: #e6ecf5;
    border-color: #cbd6e6;
    color: #33465f;
}

/* ---- People / PSC cards: modern, flat (no hover change), with an Open button on People ---- */
.person-card {
    padding: 16px 18px;
    border: 1px solid #dce7f8;
    border-radius: 14px;
    background: #ffffff;
}

.person-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.person-card-number {
    flex: 0 0 auto;
    min-width: 26px;
    height: 26px;
    padding: 0 7px;
    border-radius: 999px;
    background: #eef2f7;
    color: #5f7593;
    font-size: 12px;
    font-weight: 600;
    line-height: 26px;
    text-align: center;
}

.person-card-title {
    display: flex;
    align-items: center;
    flex: 1 1 280px;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.person-card-name {
    color: #123f80;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
}

.person-chip {
    padding: 3px 10px;
    border-radius: 999px;
    background: #edf1f6;
    color: #4a5b75;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
}

.person-status {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.person-status.is-active {
    background: #e3f2e7;
    color: #1a6b32;
}

.person-status.is-resigned {
    background: #fbe3e3;
    color: #9b1c1c;
}

.person-card-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.person-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid #d7e3f6;
    border-radius: 8px;
    background: #ffffff;
    color: #0f3d80;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

.person-open-btn svg {
    width: 15px;
    height: 15px;
}

.person-open-btn:hover,
.person-open-btn:focus-visible {
    background: #f2f7ff;
    border-color: #b9cfee;
    color: #0f3d80;
    text-decoration: none;
}

.person-card-evidence {
    margin: 8px 0 0 38px;
    color: #6b7f9c;
    font-size: 12.5px;
}

.person-card-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px 24px;
    margin: 14px 0 0 38px;
    padding-top: 14px;
    border-top: 1px solid #edf3fb;
}

.person-card-fields > div {
    min-width: 0;
}

.person-card-fields .is-wide {
    grid-column: 1 / -1;
}

.person-card-fields dt {
    margin: 0 0 3px;
    color: #6b7f9c;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.person-card-fields dd {
    margin: 0;
    color: #1c3763;
    font-size: 14px;
    line-height: 1.45;
}

@media (max-width: 575.98px) {
    .person-card-evidence,
    .person-card-fields {
        margin-left: 0;
    }
}

/* ID verification group on the People / PSC cards: caption + badges, with the explanation under them. */
.person-card-verify {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

.person-card-verify-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.person-card-caption {
    color: #6b7f9c;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.person-card-verify-note {
    color: #6b7f9c;
    font-size: 12px;
    text-align: right;
}

@media (max-width: 575.98px) {
    .person-card-verify,
    .person-card-verify-note {
        align-items: flex-start;
        text-align: left;
    }
}

/* ---- PSC page: ownership / voting-rights charts and per-person band meters ---- */
.psc-chart-card {
    margin: 4px 0 18px;
    padding: 16px 18px;
    border: 1px solid #dce7f8;
    border-radius: 14px;
    background: #ffffff;
}

.psc-chart-title {
    margin: 0 0 12px;
    color: #123f80;
    font-size: 16px;
    font-weight: 600;
}

.psc-chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 20px 32px;
}

.psc-chart-heading {
    margin: 0 0 8px;
    color: #6b7f9c;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.psc-chart-row,
.psc-chart-axis {
    display: grid;
    grid-template-columns: minmax(90px, 170px) 1fr 84px;
    align-items: center;
    gap: 10px;
}

.psc-chart-row + .psc-chart-row {
    margin-top: 8px;
}

.psc-chart-name {
    overflow: hidden;
    color: #1c3763;
    font-size: 13px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.psc-chart-track {
    position: relative;
    height: 14px;
    border-radius: 7px;
    background:
        linear-gradient(to right, transparent calc(25% - 1px), #ffffff calc(25% - 1px), #ffffff 25%, transparent 25%,
            transparent calc(50% - 1px), #ffffff calc(50% - 1px), #ffffff 50%, transparent 50%,
            transparent calc(75% - 1px), #ffffff calc(75% - 1px), #ffffff 75%, transparent 75%),
        #eaf0f9;
}

.psc-chart-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 7px;
    background: #1f6feb;
}

.psc-chart-value {
    color: #123f80;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.psc-chart-axis {
    margin-top: 4px;
}

.psc-chart-ticks {
    display: flex;
    justify-content: space-between;
    color: #8a96aa;
    font-size: 10.5px;
}

.psc-chart-note {
    margin: 12px 0 0;
    color: #6b7f9c;
    font-size: 12px;
}

.nature-meters {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.nature-meter {
    display: grid;
    grid-template-columns: minmax(150px, 230px) 96px auto;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.nature-meter-label {
    color: #1c3763;
}

.nature-meter-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
}

.nature-meter-bar > span {
    height: 10px;
    border-radius: 3px;
    background: #e3eaf5;
}

.nature-meter-bar > span.is-on {
    background: #1f6feb;
}

.nature-meter-value {
    color: #123f80;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.nature-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.nature-chips:empty {
    display: none;
}

.nature-chip {
    padding: 3px 10px;
    border-radius: 999px;
    background: #edf1f6;
    color: #33465f;
    font-size: 12.5px;
    font-weight: 500;
}

@media (max-width: 575.98px) {
    .psc-chart-row,
    .psc-chart-axis {
        grid-template-columns: 1fr 1fr 70px;
    }

    .nature-meter {
        grid-template-columns: 1fr 80px auto;
    }
}

/* ---- Company page: header, key facts tiles and icon detail cards ---- */
.co-header {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 4px 0 16px;
    padding: 16px 18px;
    border: 1px solid #dce7f8;
    border-radius: 14px;
    background: #ffffff;
}

.co-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #e8f0fe;
    color: #1f6feb;
}

.co-header-icon .co-icon {
    width: 26px;
    height: 26px;
}

.co-header-main {
    flex: 1 1 260px;
    min-width: 0;
}

.co-title {
    margin: 0;
    color: #0f3d80;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
}

.co-subline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
    color: #5f7593;
    font-size: 13.5px;
}

.co-number {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.co-number .co-icon {
    width: 14px;
    height: 14px;
}

.co-status {
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
}

.co-status.is-active {
    background: #e3f2e7;
    color: #1a6b32;
}

.co-status.is-closed {
    background: #edf1f6;
    color: #4a5b75;
}

.co-status.is-other {
    background: #fdf0cf;
    color: #7a4b00;
}

.co-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

.co-copy {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid #d7e3f6;
    border-radius: 8px;
    background: #ffffff;
    color: #0f3d80;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.co-copy .co-icon {
    width: 15px;
    height: 15px;
}

.co-copy:hover {
    background: #f2f7ff;
    border-color: #b9cfee;
}

.co-copy.is-copied {
    border-color: #1a7f37;
    color: #1a7f37;
}

.co-copy-inline {
    width: 28px;
    height: 28px;
    margin-left: 6px;
    padding: 0;
    justify-content: center;
    vertical-align: middle;
}

.co-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin: 16px 0;
}

.co-tile {
    padding: 14px 16px;
    border: 1px solid #dce7f8;
    border-radius: 14px;
    background: #ffffff;
}

.co-tile-label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #6b7f9c;
    font-size: 12.5px;
    font-weight: 500;
}

.co-tile-label .co-icon {
    width: 16px;
    height: 16px;
}

.co-tile-value {
    margin-top: 6px;
    color: #123f80;
    font-size: 17px;
    font-weight: 600;
}

.co-tile-sub {
    min-height: 18px;
    margin-top: 2px;
    color: #6b7f9c;
    font-size: 12.5px;
}

.co-tile.is-due {
    border-color: #f0dcb6;
    background: #fff8e8;
}

.co-tile.is-due .co-tile-label,
.co-tile.is-due .co-tile-value,
.co-tile.is-due .co-tile-sub {
    color: #7a4b00;
}

.co-tile.is-overdue {
    border-color: #f1c3c3;
    background: #fdf0f0;
}

.co-tile.is-overdue .co-tile-label,
.co-tile.is-overdue .co-tile-value,
.co-tile.is-overdue .co-tile-sub {
    color: #9b1c1c;
}

.co-card {
    margin: 0 0 16px;
    padding: 6px 18px 8px;
    border: 1px solid #dce7f8;
    border-radius: 14px;
    background: #ffffff;
}

.co-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px 0 10px;
    border-bottom: 1px solid #edf3fb;
    color: #123f80;
    font-size: 16px;
    font-weight: 600;
    text-align: left;
}

.co-pill {
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.co-pill.is-due {
    background: #f7c948;
    color: #5f3a00;
}

.co-pill.is-overdue {
    background: #cf3a3a;
    color: #ffffff;
}

.co-row {
    display: grid;
    grid-template-columns: 22px minmax(140px, 220px) 1fr;
    align-items: start;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid #edf3fb;
    font-size: 14.5px;
}

.co-row:last-child {
    border-bottom: 0;
}

.co-row > .co-icon {
    margin-top: 1px;
    color: #6b7f9c;
}

.co-label {
    color: #6b7f9c;
}

.co-value {
    min-width: 0;
    color: #1c3763;
    overflow-wrap: anywhere;
}

.co-muted {
    color: #6b7f9c;
    font-size: 13px;
}

.co-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.co-chip {
    padding: 2px 10px;
    border-radius: 999px;
    background: #edf1f6;
    color: #33465f;
    font-size: 13px;
}

@media (max-width: 575.98px) {
    .co-row {
        grid-template-columns: 22px 1fr;
    }

    .co-row > .co-value {
        grid-column: 2;
    }
}

/* Row alignment (Oct 2026). Cells are top-aligned, and the row number badge is 24px, so the name's first
   line is made exactly 24px too and everything else on that line (company number badge, copy buttons,
   the hover-only note chips) is centred in it. Row number, name, badge, chips and dates then share one
   centre line; the due/overdue badges hang below the date and don't count. The tallest inline item is
   the 22px badge, so the line never grows past 24px. A wrapped name keeps these on its last line. */
#favs .fav-name-row {
    line-height: 24px;
}

#favs .fav-company-link {
    line-height: 24px;
}

#favs .fav-name-row .favregno,
#favs .fav-copy-btn,
#favs .fav-note-chips > span {
    vertical-align: middle;
}

/* The Favourites filter's placeholder ("Filter by company name, notes or a date") was cut off in the
   narrow search box beside the tabs. A smaller size lets all of it show; typed text keeps its size. */
.fav-toolbar-search .fav-filter-input::placeholder {
    font-size: 11px;
    text-overflow: ellipsis;
}

/* The "?" help button now ends the "Due dates can take up to 24 hours" line, pushed to the far right,
   and is a compact icon button there rather than the toolbar's 42px one. */
.fav-important-note .fav-help-btn {
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border-color: #d7e3f6;
    border-radius: 8px;
    color: #1c3763;
}

.fav-important-note .fav-help-btn:hover {
    background: #f2f7ff;
    border-color: #b9cfee;
    color: #0f3d80;
}

.fav-important-note .fav-help-btn .fav-btn-icon svg {
    width: 17px;
    height: 17px;
}

/* Even space above and below the notice row. The Favourites panel already pads 20px above it, so the
   notice adds none on top (it used to add 12px, leaving 32px above against 12px below) and takes
   20px below to match. */
.fav-tabbed-panel .fav-important-note {
    margin: 0 0 20px;
}

/* The toolbar's row now lives in the tab header, so what is left of .fav-toolbar here is an empty box
   (plus the filter chip bar when one is showing, which has its own margins). Its 10px bottom margin
   only added to the gap above the notice row. */
.fav-tabbed-panel.has-tabs .fav-toolbar {
    margin-bottom: 0;
}

/* ---- Filing deadlines strip: grouped cards (Oct 2026) -------------------------------------------
   favsummarystrip.js builds one card per deadline: Accounts, Confirmation Statement, VAT, then
   Identity, CT600, PAYE, CIS and Self Assessment when the user has them. A card with two sub-dates
   (CT600 Return / Payment, PAYE FPS / Payment, Identity Officers / PSCs) puts a small label over each
   count, after a divider. */
.fds-chips {
    gap: 8px;
}

.fds-group {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 4px 12px;
    border: 1px solid #dce7f8;
    border-radius: 12px;
    background: #f8fbff;
    color: #1c3763;
    font-size: 13px;
    line-height: 1.3;
    white-space: nowrap;
}

.fds-group-title {
    font-weight: 600;
    color: #123f80;
}

.fds-group-counts {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.fds-group-multi .fds-group-title {
    padding-right: 10px;
    border-right: 1px solid #dce7f8;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
}

.fds-group-parts {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.fds-part {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.fds-part-label {
    color: #6b7c96;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
}

.fds-part-counts {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.fds-chip-zero,
.fds-chip-slash {
    color: #9aa8bd;
    font-size: 12px;
}

/* Smaller badges and tighter cards than the original strip, so more fit on a row. */
.fds-group {
    gap: 8px;
    min-height: 34px;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 12px;
}

.fds-group .fds-chip-count {
    padding: 1px 7px;
    font-size: 11px;
}

.fds-group .fds-chip-clear {
    padding-right: 0;
    font-size: 11px;
}

.fds-group-multi .fds-group-title {
    padding-right: 8px;
}

.fds-group-parts {
    gap: 10px;
}

.fds-group-counts,
.fds-part-counts {
    gap: 4px;
}

.fds-part-label {
    font-size: 9px;
}

@media (max-width: 767.98px) {
    .fds-group {
        flex-wrap: wrap;
        max-width: 100%;
        white-space: normal;
    }
}

/* Every card the same height. The cards with two labelled counts (Identity, CT600, PAYE) stack a tiny
   label over the badges, which made them taller than the single-date cards; a fixed height with the
   label's spacing squeezed lets them all match. On narrow screens the cards wrap, so the height is free. */
.fds-group {
    box-sizing: border-box;
    height: 36px;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.fds-part {
    gap: 1px;
}

.fds-part-counts {
    line-height: 1;
}

@media (max-width: 767.98px) {
    .fds-group {
        height: auto;
        min-height: 36px;
    }
}

/* Expanding the Filing deadlines strip (Details) fades the pills away and folds their height up: the
   tables below carry the same counts, so they're redundant while it's open. Collapsing brings them back.
   The chips keep their horizontal space so the Details button doesn't jump; visibility switches after the
   fade so hidden pills can't be tabbed to or clicked. */
.fds-chips {
    max-height: 320px;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.22s ease, transform 0.22s ease, max-height 0.3s ease, visibility 0s linear 0s;
}

.fav-summary-strip:not(.is-collapsed) .fds-chips {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-6px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, max-height 0.3s ease, visibility 0s linear 0.3s;
}

.fds-header .fav-strip-toggle {
    margin-left: auto;
}

.fav-summary-strip:not(.is-collapsed) .fav-strip-grid {
    animation: fds-grid-in 0.28s ease both;
}

@keyframes fds-grid-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fds-chips,
    .fav-summary-strip:not(.is-collapsed) .fds-chips {
        transition: none;
    }

    .fav-summary-strip:not(.is-collapsed) .fav-strip-grid {
        animation: none;
    }
}

/* Shown in a CT600 cell while its year end is being fetched from Companies House, in place of the
   "+ Add YE" link it would otherwise flash. */
#favs .tdl-fav-checking {
    color: #8696ae;
    font-size: 12px;
    font-style: italic;
}

/* ---- Getting year ends: inline bar above the table (mirrors the apps' YearEndFetchBar) ---------- */
.tdl-fetch-inline {
    display: none;
    margin: 0 0 12px;
    padding: 8px 6px 8px 12px;
    border: 1px solid rgba(15, 61, 128, 0.18);
    border-radius: 10px;
    background: rgba(15, 61, 128, 0.06);
    color: #1c3763;
}

.tdl-fetch-inline.is-open {
    display: block;
    animation: tdl-fetch-in 0.22s ease both;
}

.tdl-fetch-inline-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 6px;
    font-size: 12px;
    color: #5f7593;
}

.tdl-fetch-inline-info strong:first-child {
    font-size: 14px;
    color: #0f3d80;
}

.tdl-fetch-inline.is-collapsed .tdl-fetch-inline-info {
    display: none;
}

.tdl-fetch-inline-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tdl-fetch-inline-row .tdl-fetch-count {
    margin: 0;
    min-width: 44px;
    font-variant-numeric: tabular-nums;
    color: #0f3d80;
}

.tdl-fetch-inline-row .tdl-fetch-bar {
    flex: 1 1 auto;
}

.tdl-fetch-inline.is-collapsed .tdl-fetch-stop {
    display: none;
}

.tdl-fetch-stop,
.tdl-fetch-toggle {
    border: 0;
    background: transparent;
    color: #0f3d80;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.tdl-fetch-stop:disabled {
    color: #8696ae;
    cursor: default;
}

.tdl-fetch-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 6px;
}

.tdl-fetch-toggle svg {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
}

.tdl-fetch-inline.is-collapsed .tdl-fetch-toggle svg {
    transform: rotate(180deg);
}

@keyframes tdl-fetch-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* A "+ Track" the user has just tapped: a small spinner and "Tracking..." until the save returns. */
#favs .fav-track-link.is-busy {
    color: #8696ae;
    pointer-events: none;
}

#favs .fav-track-link.is-busy::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 5px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -1px;
    animation: tdl-spin 0.7s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .tdl-fetch-inline.is-open,
    #favs .fav-track-link.is-busy::before {
        animation: none;
    }
}

/* "estimated" under a CT600 date that is still the calculated one (trackeddates.js). Same shape as the
   Due soon / Overdue pill and in the same row slot, but grey: a note about the date, not a warning.
   It goes when the user saves a date or a year end (the server then reports it as their own). */
#favs .fav-deadline-line > .tdl-fav-est-badge {
    grid-column: 1 / -1;
    display: block;
    width: 100%;
    padding: 1px 0;
    border-radius: 999px;
    background: #eef1f6;
    color: #6b7c96;
    font-size: calc(9px + (var(--fav-text-size, 12pt) - 12pt) * 0.5);
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
}

/* "4-weekly" under a PAYE FPS date (trackeddates.js, a weekly-style payroll). Without its own row it
   became a third item in the two-column tick + date grid, wrapped under the tick, widened that column
   and pushed the date to the right until the cell clipped it. Same row slot as the badge, left-aligned,
   small and grey: a note about the date. */
#favs td.fav-col-date-tracked .fav-deadline-line > span.tdl-fav-frequency {
    grid-column: 1 / -1;
    margin-left: 0;
    color: #5f7593;
    font-size: calc(10.5px + (var(--fav-text-size, 12pt) - 12pt) * 0.5) !important;
    line-height: 1.2;
}

/* ---- "+ Add note" chip (both notes empty) ------------------------------------------------------------
   With neither note written, the two hover chips ("+ Company Note", "+ Filing Note") are replaced by one
   "+ Add note" chip whose menu offers both. Two chips side by side wrapped on narrow screens and made the
   row grow and jump. With one note already written, the other empty chip still shows alone (one chip fits).
   The menu clicks the real, hidden chip's link (favlistsanddeadlines.js), so the editors are unchanged. */
#favs .fav-note-chips .fav-note-add-wrap {
    display: none;
    position: relative;
    overflow: visible;
}

#favs .fav-note-chips:has(.fav-company-note-edit.fav-note-empty):has(.fav-filing-note-edit.fav-note-empty) > .fav-note-add-wrap {
    display: inline-block;
}

#favs .fav-note-chips:has(.fav-company-note-edit.fav-note-empty):has(.fav-filing-note-edit.fav-note-empty) > .favnotes-wrap,
#favs .fav-note-chips:has(.fav-company-note-edit.fav-note-empty):has(.fav-filing-note-edit.fav-note-empty) > .fav-filing-note-wrap {
    display: none;
}

/* "Show company notes" / "Show filing notes" off: that choice leaves the menu, and with both off the chip goes. */
#favs .fav-note-chips:has(.favnotes-wrap.fav-item-hidden) .fav-note-add-menu [data-note="company"],
#favs .fav-note-chips:has(.fav-filing-note-wrap.fav-item-hidden) .fav-note-add-menu [data-note="filing"] {
    display: none;
}

#favs .fav-note-chips:has(.favnotes-wrap.fav-item-hidden):has(.fav-filing-note-wrap.fav-item-hidden) > .fav-note-add-wrap {
    display: none !important;
}

#favs .fav-note-add-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    min-width: 150px;
    padding: 4px 0;
    border: 1px solid #d7e3f6;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(16, 34, 59, 0.16);
    line-height: 1.3;
}

#favs .fav-note-add-wrap:hover .fav-note-add-menu,
#favs .fav-note-add-wrap:focus-within .fav-note-add-menu,
#favs .fav-note-add-wrap.is-open .fav-note-add-menu {
    display: block;
}

#favs .fav-note-add-menu button {
    display: block;
    width: 100%;
    padding: 6px 12px;
    border: 0;
    background: transparent;
    color: #1c3763;
    font-size: 12.5px;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

#favs .fav-note-add-menu button:hover,
#favs .fav-note-add-menu button:focus-visible {
    background: #f2f7ff;
    color: #0f3d80;
}

/* The unified "+ Add note" chip hangs just under the company name, left-aligned with it (Oct 2026): yellow
   with black text so it is easy to see. It is taken out of flow and anchored to the name row, so it takes
   no room anywhere: no cell can wrap, grow or shift when it fades in on hover, and the row never changes
   height. It sits in the empty padding under the name (a short row lets it overlap the divider by a pixel
   or two, which is harmless). It only exists when neither note is written, so nothing is below the name. */
#favs .fav-name-row {
    position: relative;
}

#favs .fav-note-chips > .fav-note-add-wrap {
    position: absolute;
    left: 0;
    top: calc(100% - 3px);
    bottom: auto;
    z-index: 3;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    transform: none;
    overflow: visible;
}

#favs tr:hover .fav-note-chips > .fav-note-add-wrap:not(.fav-item-hidden),
#favs .fav-note-chips:focus-within > .fav-note-add-wrap:not(.fav-item-hidden) {
    max-width: none;
    margin-left: 0;
}

#favs .fav-note-add-wrap .fav-note-add {
    display: inline-block;
    padding: 0 10px;
    border: 1px solid #e3b800;
    border-radius: 999px;
    background: #ffe35c;
    color: #111111;
    box-shadow: 0 2px 6px rgba(16, 34, 59, 0.18);
    font-size: calc(12px + (var(--fav-text-size, 12pt) - 12pt) * 0.5);
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
}

#favs .fav-note-add-wrap .fav-note-add:hover {
    background: #ffd633;
}

#favs .fav-note-add-wrap .fav-note-add .fav-note-text,
#favs .fav-note-add-wrap .fav-note-add:hover .fav-note-text {
    color: #111111;
    font-size: inherit;
    font-weight: 600;
    text-decoration: none;
}

#favs .fav-note-add-wrap .fav-note-add-menu {
    left: 0;
    top: 100%;
    transform: none;
}

@media (hover: none) {
    #favs .fav-note-chips > .fav-note-add-wrap:not(.fav-item-hidden) {
        max-width: none;
        margin-left: 0;
    }
}

/* A cell being re-read from the server after a save (VAT). Dimmed and not clickable until it lands. */
#favs td.fav-cell-refreshing {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

/* The button that was just clicked in a dialog shows a spinner while its server call runs (favspage.js adds
   .is-busy when the page disables it and removes it when it comes back), so a few seconds of waiting reads
   as working, not as a frozen screen. */
.fav-vat-overlay .modern-btn.is-busy {
    position: relative;
    cursor: progress;
}

.fav-vat-overlay .modern-btn.is-busy::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -2px;
    animation: tdl-spin 0.7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .fav-vat-overlay .modern-btn.is-busy::before {
        animation-duration: 1.6s;
    }
}