@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* main container */
#home-container {
    display: flex;
    align-items: center;
    width: 100%;
    flex-direction: column;
    align-content: center;
}

/* Styling for the button */
.q-button {
    background-color: #003d5c; /* Deep professional blue */
    font-size: 0.8rem;
    color: white;
    border: 2px solid #003d5c;
    border-radius: 4px; /* More corporate, less rounded */
    cursor: pointer;
    width: 200px;
    flex-shrink: 0;
    transition: all 0.2s ease;
    font-weight: 600;
    letter-spacing: 0.3px;
    height: 32px;
}

.wide-q-button {
    background-color: #003d5c; /* Deep professional blue */
    font-size: 0.6rem;
    color: white;
    border: 2px solid #003d5c;
    border-radius: 4px; /* More corporate, less rounded */
    cursor: pointer;
    padding: 8px 24px;
    flex-shrink: 0;
    transition: all 0.2s ease;
    font-weight: 600;
    letter-spacing: 0.5px;
    height: 32px;
    white-space: nowrap;
}

.large-q-button {
    height: 42px;
}

.q-button:hover {
    background-color: #005580;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 61, 92, 0.3);
}

.home-button {
    border: none;
    background: none;
    color: black;
    font-weight: bold;
    font-size: 1.3rem;
    width: 100%;
}

.one-line-title .notion-link {
    margin-top: 10px;
}

.two-line-title .notion-link {
    margin-top: 0;
}

.q-button-secondary {
    background-color: #f5f5f5; /* Deep professional blue */
    font-size: 0.6rem;
    color: #005580;
    border: 2px solid #f5f5f5;
    border-radius: 4px; /* More corporate, less rounded */
    cursor: pointer;
    padding: 8px 24px;
    width: 200px;
    flex-shrink: 0;
    transition: all 0.2s ease;
    font-weight: 600;
    letter-spacing: 0.5px;
    height: 32px;
}

.q-button-secondary:hover {
    /* background-color: #e8e8e8;
    border-color: #003d5c; */
    border: none;
    /* background-color: #005580; */
    background-color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 61, 92, 0.3);
}

@media (max-width: 600px) {
    #confirm-button {
        width:45% !important;
    }
}

/* control main element width */
#tabs-parent {
    width: 100%;
    padding: 15px !important;
    /* padding: 15px 15px 20px !important; */
    /* box-sizing: border-box; */
}

/* Styling for specific page to ensure custom configuration */
.report-portal .tab {
    background-color: white !important;
}

/* Styling for tab selection */
.tab {
    background-color: #f8f9fa !important;
    color: #2c3e50 !important;
    font-size: 0.75rem;
    border-radius: 4px;
    transition: all 0.2s ease !important;
    font-weight: 500;
    border: 1px solid #e0e0e0 !important;
}

.tab:hover {
   background-color: #e8ecef !important;
   border-color: #003d5c !important;
}

.tab--selected {
   border-top: none !important;
   background-color: #003d5c !important;
   color: white !important;
   border: 1px solid #003d5c !important;
}

/* Font Implementation */
@font-face {
    font-family: 'Baskerville Old Face';
    src: url('fonts/baskerville-old-face.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir Next LT Pro';
    src: url('fonts/AvenirLTProLight.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Global font for entire app - COMPREHENSIVE */
body, * {
    font-family: 'Inter', Arial, sans-serif !important;
}

/* Headers */
h1, h2, h3, h4, h5, h6, label, th {
    font-family: 'Inter', Arial, sans-serif !important;
    color: #2c3e50;
}

h6 {
    font-size: 0.8rem;
}

/* for label in checklist use Inter */
#checklist label {
    font-family: 'Inter', Arial, sans-serif !important;
}

/* Body Text */
body {
    font-family: 'Inter', Arial, sans-serif !important;
    background-color: #fafbfc;
}

label {
    font-weight: 600;
    color: #2c3e50;
    font-family: 'Inter', Arial, sans-serif !important;
}

/* Dropdown Menu */
.dropdown,
.dropdown-menu,
select {
    font-family: 'Inter', Arial, sans-serif !important;
}

/* Table and Chart Text - FORCE Inter everywhere */
table,
.chart-content,
td,
th,
.dash-table-container,
.dash-table-container *,
.financial-table,
.financial-table *,
.base-table,
.base-table * {
    font-family: 'Inter', Arial, sans-serif !important;
}

/* Plotly charts */
.js-plotly-plot .plotly text,
.js-plotly-plot .plotly .gtitle,
.js-plotly-plot .plotly .xtick text,
.js-plotly-plot .plotly .ytick text {
    font-family: 'Inter', Arial, sans-serif !important;
}

h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 25px;
    color: #2c3e50;
}

.compare-heading {
    text-align: left;
    margin-bottom: 10px;
    width: 100%;
}

#compare-asset-class-dropdown,
#dropdown-security3, 
#dropdown-security4 {
    margin-bottom: 5px;
}

#short-note-sec-dropdown,
#textarea-meeting-title,
#chg_to_team_note,
#chg_to_proces_note,
#factor_perf_note,
#other_details_note {
    margin-bottom: 15px;
}

/* for all h5 make it bold */
h2, h3, h5 {
    font-size: 1rem;
    /* font-weight: 600; */
    margin-top: 25px;
    margin-bottom: 15px;
    color: #2c3e50;
}

/* dcc.Dropdown */
.Select-control {
    border: 1px solid #c0c6cc !important;
    border-radius: 4px !important;
    margin-bottom: 10px !important;
    font-size: 0.85rem !important;
    height: 32px !important;
    transition: all 0.2s ease;
    background-color: white !important;
}

.Select-control:hover {
    border-color: #003d5c !important;
    box-shadow: 0 0 0 1px #003d5c !important;
}

.Select-input {
    height: 32px !important;
}

.Select-placeholder {
    line-height: 32px !important;
    color: #6c757d !important;
}

.Select-menu-outer {
    border-radius: 4px !important;
    font-size: 0.85rem !important;
    left: 0 !important;
    border: 1px solid #c0c6cc !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

#compare-asset-class-dropdown .Select-menu-outer,
#compare-sec-dropdown .Select-menu-outer, 
#compare-ben-dropdown .Select-menu-outer {
    width: 90% !important;
    left: 0 !important;
}

#fund-table-dropdown .Select-menu-outer,
#fund-compare-dropdown .Select-menu-outer {
    width: 94.7% !important;
}

#dropdown-security3 .Select-menu-outer,
#dropdown-security4 .Select-menu-outer {
    width: 70% !important;
}

#summary-client-dropdown .Select-menu-outer,
#summary-consultant-dropdown .Select-menu-outer {
    width: 50% !important;
}

#compare-mgr-classification-dropdown .Select-menu-outer,
#compare-sub-sector-dropdown .Select-menu-outer,
#compare-sec-dropdown .Select-menu-outer,
#compare-ben-dropdown .Select-menu-outer,
#fund-table-dropdown .Select-menu-outer,
#fund-compare-dropdown .Select-menu-outer,
#benchmark-dropdown-mgr .Select-menu-outer {
    width: 70% !important;
}

.Select-option {
    border-radius: 0 !important;
}

.Select-option:hover {
    background-color: #f0f4f7 !important;
}

/* basic table format, applies to all table*/
.base-table {
    font-family: 'Inter', 'Avenir Next LT Pro';
    color: #2c3e50;
    border-collapse: collapse;
    border-color: #d0d5dd;
    border: 1px solid #d0d5dd;
}

/* white background and black border */
.table-white-bg td,
.table-white-bg tr,
.table-white-bg th {
    background-color: white !important;
    border: 1px solid #e5e7eb !important;
}

/* Removing part of borders */
.table-merged-columns th {
    border-right: none !important;
    border-left: none !important;
}

.table-merged-columns tr td:nth-child(n+2) {
    border-right: none !important;
}

.table-merged-columns tr td:nth-child(n+3) {
    border-left: none !important;
}

#table1 td:first-child,
#table2 td:first-child,
#table3 td:first-child,
#table4 td:first-child {
    width: 220px !important;
    text-align: left;
}

#table1 td:not(:first-child) {
    text-align: left;
}

/* Style data columns of all tables */
#table2 td:not(:first-child),
#table3 td:not(:first-child),
#table4 td:not(:first-child) {
    width: 70px !important;
    text-align: center;
}

/* Style first column of all tables */
#table2 th:first-child,
#table3 th:first-child,
#table4 th:first-child {
    width: 220px !important;
    text-align: left;
}

#table1 th:first-child {
    text-align: left;
}

/* Style data columns of all tables */
#table2 th:not(:first-child),
#table3 th:not(:first-child),
#table4 th:not(:first-child) {
    width: 70px !important;
    text-align: center;
}

/* For Date Picker styling */
.date-picker-inception {
    display: block !important;
}
.date-picker-inception input {
    font-size: 16px;
}

/* styling for the DatePickerSingle */
.DateInput_input {
    border: 1px solid #c0c6cc !important;
    border-radius: 4px !important;
    text-align: center !important;
    font-size: 12px !important;
    color: #2c3e50 !important;
    height: 32px !important;
    padding: 0 !important;
    font-weight: 500 !important;
    transition: all 0.2s ease;
    background-color: white !important;
}

.DateInput_input:hover {
    border-color: #003d5c !important;
    box-shadow: 0 0 0 1px #003d5c !important;
}

.DateInput_input:focus {
    border-color: #003d5c !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(0, 61, 92, 0.1) !important;
}

.DateInput_input:hover {
    cursor: pointer;
}

/* extra small devices */
@media (max-width: 512px) {
    .DateInput_input {
        width: 150px !important;
    }
}

.date-single-input .SingleDatePickerInput {
    border: none !important;
}

.date-single-input .DateInput_input::placeholder {
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: #6c757d !important;
    text-align: center !important;
}

/* this is style for the footer */
.q-footer {
    margin: auto;
    width: 100%;
    background-color: white;
    color: #2c3e50;
    text-align: center;
    position: fixed;
    bottom: 0;
    border-top: 1px solid #e5e7eb;
}

.q-footer p, .q-footer div {
    font-size: 14px;
    color: #6c757d;
    text-align: center;
    padding: 10px;
}

/* for the Q wave image on bottom left */
.q-wave-img {
    position: relative;
    bottom: 5%;
    left: 8%;
    width: 40px;
    height: 40px;
}

/* Configure for different screen sizes */
@media (min-width: 768px) and (max-width: 1024px) {
    .q-wave-img {
        bottom: 5%;
        left: 8%;
    }
}

@media (min-width: 576px) and (max-width: 768px) {
    .q-wave-img {
        bottom: 4%;
        left: 2%;
    }
}

@media (min-width: 450px) and (max-width: 576px) {
    .q-wave-img {
        height: 30px!important;
        width: 30px!important;
        bottom: 4%;
        left: 0%;
    }
}

@media (max-width: 450px) {
    .q-wave-img {
        display: none;
    }
}

/* this is the style for header */
.q-header {
    text-align: center;
    background-color: black !important;
    z-index: 1040;
    border-bottom: 1px solid #2c3e50;
}

.q-sidebar {
    z-index: 100;
    background-color: #1a1d23 !important;
}

.q-header-title {
    color: white;
}

.q-header .q-header-logo {
    height: 80px;
    width:auto;
    margin: auto;
}

.q-header .q-header-wave {
    height: auto;
    width: 400px;
    margin-left: 0px;
    margin-bottom: -10px;
    margin-top: -70px;
    overflow-y: hidden;
    position: absolute;
    bottom: -25px;
    left: -40px;
}

.navbar.bg-primary {
    border: none !important;
}

.q-slider {
    position:fixed;
    top: -1px;
    right: 150px;
    width: 60%;
    padding: 15px 15px 20px !important;
    box-sizing: border-box;
    z-index: 1045;
}

.q-slider .rc-slider-handle {
    width: 15px;
    height: 15px;
    background-color: #003d5c;
    border: 2px solid #003d5c;
    border-radius: 50%;
}

.q-slider .rc-slider-handle:hover {
    background-color: #005580;
    border-color: #005580;
}

.q-slider .rc-slider-rail {
    background-color: #d0d5dd;
}

.q-slider .rc-slider-track {
    background-color: #003d5c;
}

.q-slider .rc-slider-dot {
    background-color: white;
    border: 1px solid #d0d5dd;
}

.q-slider .rc-slider-dot-active {
    background-color: #003d5c;
    border: 1px solid #003d5c;
}

.q-slider .rc-slider-mark-text {
    font-size: 16px;
    color: #6c757d;
    font-weight: 500;
}

.q-slider-inline {
    position: relative;
    width: 100%;
    padding: 4px 8px 20px 8px !important;
    box-sizing: border-box;
}

.q-slider-inline .rc-slider-handle {
    width: 15px;
    height: 15px;
    background-color: #003d5c;
    border: 2px solid #003d5c;
    border-radius: 50%;
}

.q-slider-inline .rc-slider-handle:hover {
    background-color: #005580;
    border-color: #005580;
}

.q-slider-inline .rc-slider-rail {
    background-color: #d0d5dd;
}

.q-slider-inline .rc-slider-track {
    background-color: #003d5c;
}

.q-slider-inline .rc-slider-dot {
    background-color: white;
    border: 1px solid #d0d5dd;
}

.q-slider-inline .rc-slider-dot-active {
    background-color: #003d5c;
    border: 1px solid #003d5c;
}

.q-slider-inline .rc-slider-mark-text {
    font-size: 13px;
    color: #6c757d;
    font-weight: 500;
}

@media (min-width: 674px) and (max-width: 900px) {
    .q-slider .rc-slider-mark-text {
        font-size: 10px;
    }
}

@media (max-width: 1300px) {
    .q-slider .rc-slider-mark-text {
        font-size: 12px;
    }
}

.q-page-wrapper {
    margin: 0;
    height: 90vh;
    overflow-y: auto;
    background-color: #fafbfc;
}

.q-dropdown-wrapper a {
    font-size: 16px;
}

/* Direct Equity Class */
.direct-equity-textbox {
    width: 100%;
    height: 100%;
    font-size: 20px !important;
    font-family: 'Inter';
}

.financial-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Inter';
    background-color: white;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.financial-table th {
    background-color: #003d5c;
    color: white;
    border: none;
    height: 30px !important;
    padding: 12px 16px !important;
    font-size: 0.75rem !important;
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Add alternating row colors */
.financial-table tr:nth-child(even) {
    background-color: #f8f9fa;
}

.financial-table tr:nth-child(odd) {
    background-color: white;
}

.financial-table td {
    color: #2c3e50;
    border: none;
    border-bottom: 1px solid #e5e7eb;
    height: 35px !important;
    padding: 12px 16px !important;
    font-size: 0.75rem !important;
    text-align: center;
}

.financial-table td:first-child {
    font-weight: 500;
    color: #1a1d23;
}

.financial-table tbody tr:last-child td {
    border-bottom: none;
}

/* Maste File */
.form-check-input:checked {
    background-color: #003d5c;
    border-color: #003d5c;
}

.ms-auto.navbar-nav {
    margin-left: unset !important;
}

.navbar-collapse.collapse {
    justify-content: center;
}

.table-horizontal-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    overflow-x: visible;
    width: max-content;
    min-width: 100%;
}

.table-vertical-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
    height: 100%;
}

#hide-first-header .cell-table tr:first-child {
    display: none !important;
}

.hide-two-first-header .cell-table tr:first-child,
.hide-two-first-header .cell-table tr:nth-child(2) {
    display: none !important;
}

.hide-first-two-table thead tr:first-child,
.hide-first-two-table thead tr:nth-child(2) {
    display: none !important;
}

.first-cell-table td, 
.first-cell-table th {
    min-width: 100px;
    max-width: 100px;
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.first-cell-table td:nth-child(2), 
.first-cell-table th:nth-child(2) {
    min-width: 400px;
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.first-cell-table th:nth-child(2), 
.first-cell-table td:nth-child(2) {
    position: sticky;
    left: 0;
    z-index: 2;
}

.first-cell-table th:nth-child(3), 
.first-cell-table td:nth-child(3) {
    position: sticky;
    left: 399px;
    z-index: 2;
}

.first-cell-table th:nth-child(4), 
.first-cell-table td:nth-child(4) {
    position: sticky;
    left: 498px;
    z-index: 2;
}

.first-cell-table th:nth-child(5), 
.first-cell-table td:nth-child(5) {
    position: sticky;
    left: 597px;
    z-index: 2;
    box-shadow: inset -3px 0 0 #d0d5dd;
}

.width-constraint-table td, 
.width-constraint-table th {
    min-width: 100px;
    max-width: 100px;
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

.width-constraint-table td:nth-child(2), 
.width-constraint-table th:nth-child(2) {
    min-width: 400px;
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.mantine-Accordion-control {
    padding-left: 0px;
}

/* Remove the rotating chevron from the PfC Manual accordion controls.
   The control's clickable surface already covers the full header, so the
   chevron is redundant and visually noisy on the dense frozen-panes layout. */
#pfc-manual-accordion .mantine-Accordion-chevron {
    display: none;
}

/* The accordion CONTROL hosts the asset-class sub-total (header) pane row;
   securities live in the PANEL. Mantine's default control padding (~16px each
   side — the chevron that occupied the right side is hidden above) makes the
   control's content area 16px narrower than the panel's. That left the header
   row's scrolling right pane 16px narrower than the security rows (same
   content width, smaller viewport → larger maxScroll), so the columns drifted
   ~16px out of alignment at the right end of a horizontal scroll. Zeroing the
   control padding makes the header pane span exactly the panel's width so all
   panes share one maxScroll and stay column-aligned. Scoped to #id so it
   overrides the global .mantine-Accordion-control rule above. */
#pfc-manual-accordion .mantine-Accordion-control {
    /* Horizontal only: zeroing the side padding (incl. the hidden chevron's
       right slot) is what aligns the header pane to the panel width. Vertical
       padding is left to Mantine's default so the sub-total row keeps its
       height. */
    padding-left: 0;
    padding-right: 0;
}

.m_4ba554d4{
    padding:unset;
}

.m_df3ffa0f {
    padding-top: unset;
    padding-bottom: unset;
}

.sidebar-link {
    color: #c0c6cc;
    padding-top: 10px;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 10px;
    text-align: center;
    border-radius: 6px;
    transition: all 0.2s ease;
    font-weight: 500;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

.sidebar-link:nth-child(1) {
    margin-top: 10px;
}

.sidebar-link:hover {
    background-color: #2c3e50;
    color: white;
}

.sidebar-link.active {
    background-color: #003d5c !important;
    color: white !important;
    font-weight: 600 !important;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #f8f9fa !important;
}

::-webkit-scrollbar-thumb {
  background: #c0c6cc;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: #003d5c;
}

::-webkit-scrollbar-button:single-button {
  display: none !important;
  height: 0px !important;
  width: 0px !important;
}

::-webkit-scrollbar-button {
  background: transparent !important;
  height: 0 !important;
  width: 0 !important;
}

textarea {
    resize: none !important;
    border: 1px solid #c0c6cc !important;
    padding: 12px !important;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    background-color: white;
    font-size: 0.85rem !important;  /* ADD THIS LINE */
    font-family: 'Inter', Arial, sans-serif !important;  /* ADD THIS LINE */
}

.adjust-size {
    resize: auto !important;
}

textarea:hover {
    border-color: #003d5c !important;
}

textarea:focus {
    border-color: #003d5c !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(0, 61, 92, 0.1) !important;
}

.fund-input-row {
    gap: 20px;
    margin-bottom: 20px;
}

.dash-table-container {
    border: 1px solid #d0d5dd !important; 
    border-radius: 6px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    background-color: white;
}

.dash-table-container table {
    font-size: 0.85rem !important;
    border: none !important; 
}

.dash-table-container .dash-cell,
.dash-table-container .dash-header {
    border-left: none !important;
    border-right: none !important;
    line-height: 1.4 !important;
    padding: 10px 12px !important;
}

#compare-trailing-rtn-table {
    width: 80% !important;
}

#compare-discrete-rtn-table {
    width: 80% !important;
}

#compare-risk-table {
    width: 80% !important;
}

.dash-table-container .dash-header {
    border-bottom: 2px solid #e5e7eb !important;
    border-top: none !important;
    background-color: #f8f9fa !important;
    color: #2c3e50 !important;
    font-weight: 600 !important;
}

.dash-table-container .dash-cell {
    border-top: 1px solid #f0f0f0 !important;
    border-bottom: none !important;
    color: #2c3e50 !important;
}

.dash-table-container thead tr:first-child th {
    border-top: none !important;
}

.dash-table-container tbody tr:last-child td {
    border-bottom: none !important;
}

#table1 {
    margin-top: 20px !important;
}

.performance1-table {
    margin-bottom: 20px !important;
}

.graph {
    /* Same border and corners as the stat cards, so the page reads as one set. */
    border: 1px solid #e6e9ee !important;
    border-radius: 6px !important;
    height: 400px !important;
    padding: 10px 12px 6px !important;
    background-color: white;
}

.tall-graph {
    height: 500px !important;
}

.heatmap, .large-graph {
    border: 1px solid #d0d5dd !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    padding: 8px !important;
    background-color: white;
}

.graph .js-plotly-plot,
.graph .plotly {
    margin: 0 !important;
    padding: 0 !important;
}

.graph .main-svg {
    margin: 0 !important;
}

.tab-container {
    background-color: #f8f9fa !important;
    padding-bottom: 5px !important;
    border-radius: 6px;
    /* Match the content column below, so the tab buttons don't run the full
       width of a wide monitor. Alpha Screen leaves its bar full-bleed; Macro
       Analysis caps it deliberately. */
    width: 100%;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box;
}

.tab {
    background-color: white !important;
    color: #6c757d !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    padding: 10px 0 !important;
    margin: 4px !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    white-space: nowrap  !important;
}

.tab--selected {
    background-color: #003d5c !important;
    color: white !important;
    font-weight: 600 !important;
    border-color: #003d5c !important;
}

.tab:hover {
    background-color: #f0f4f7 !important;
    border-color: #003d5c !important;
}

.tab--selected:hover {
    background-color: #005580 !important;
}

/* Two-level tabs: United States / Australia above, the app's own tabs below.
   The second level has to read as subordinate to the first or the eye cannot
   tell which bar it is looking at, so it is smaller, lighter, and selected in
   outline rather than in solid navy. */
.subtabs .tab {
    font-size: 0.8rem !important;
    padding: 7px 0 !important;
    background-color: #f8f9fa !important;
}

.subtabs .tab--selected {
    background-color: white !important;
    color: #003d5c !important;
    border-color: #003d5c !important;
    border-bottom-width: 3px !important;
}

.subtabs .tab--selected:hover {
    background-color: #f0f4f7 !important;
}

.subtabs {
    margin-left: 0 !important;
    margin-bottom: 4px !important;
}

.tabs {
    margin-left: 3vw !important;
    /* display: flex !important;
    flex-wrap: wrap !important;
    border-bottom: none !important; */
}

#home-icon {
    content: url('/images/home.svg') !important;
}

#sidebar-link-0:hover #home-icon {
    content: url('images/home-black.svg') !important;
}

#rolling-alpha-distribution-div { 
    border: none !important;
    width: 100% !important;
}

/* Hover effect for financial tables */
.financial-table tr:hover {
    background-color: #e8f4f8 !important;
    transition: background-color 0.2s ease;
}

.dash-table-container .dash-cell {
    transition: background-color 0.2s ease;
}

.dash-table-container tbody tr:hover td {
    background-color: #f8f9fa !important;
}

.dash-table-container thead tr:hover th {
    background-color: #f8f9fa !important;
}

html {
    overflow-y: scroll;
}

/* #dropdown {
    color: black !important;
    background-color: black !important;
} */

.dropdown-menu {
    background: rgba(20, 20, 20, 0.85) !important;  
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    left: 35%;
    transform: translateX(-35%);
    right: auto !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    padding: 15px !important;
    backdrop-filter: blur(2px) !important;
    min-width: 250px !important;
}

/* It's also often necessary to style the individual items inside the dropdown */
.dropdown-menu .dropdown-item {
    padding: 5px !important;
    color: white !important;
    font-size: 1rem !important;
    margin-bottom: 5px !important;
}

.dropdown-menu .dropdown-item:nth-last-child(1) {
    margin-bottom: 0px !important;    
}

/* Style the menu item when the mouse hovers over it */
.dropdown-menu .dropdown-item:hover {
    background-color: white !important; 
    border-radius: 10px !important; 
    color: black !important;
}

#dropdown-menu:hover .dropdown-menu {
    display: block !important;
}

.checklist {
    width: 100%; 
    font-size: 0.9rem; 
    margin-bottom: 10px; 
    margin-left: 8%;
}

.no-margin {
    margin: 0;
}

.checklist input[type="checkbox"] {
    margin-right: 10px;
    margin-top: 0.75%;
}

.smallGap {
    margin-left: 4%;
}

#gb-fold-legend-button {
    margin-top: 10px;
}

#tr-all-platform-checklist, #igs-all-platform-checklist {
    overflow-x: auto;
    white-space: nowrap;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    width: 150px;
}

#tr-all-platform-checklist label, #igs-all-platform-checklist label {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

/* For Report TTS Portal */
/* ---- Report TTS Portal: Upload zone ---- */
.upload-zone:hover {
    border-color: #003d5c !important;
    background-color: #f0f4f7 !important;
    box-shadow: 0 2px 8px rgba(0, 61, 92, 0.12);
}

/* ---- Report TTS Portal: TTS config panel ---- */
.tts-config-panel {
    background-color: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 15px 20px;
    margin-bottom: 15px;
}

/* ---- Report TTS Portal: Audio player ---- */
audio {
    border-radius: 6px;
    margin-top: 6px;
    outline: none;
}

audio:focus {
    outline: none;
}

/* For Risk Management Dashboard */
/* Dash DataTable dropdown editors also use react-select.
   The global dcc.Dropdown styling (notably margin-bottom) can prevent table
   dropdowns from appearing inside cells, and menu layers can be clipped by
   table overflow. Scope fixes to the coverage table to avoid unintended UI changes. */
#riskdash-stress-coverage-table .Select-control {
    margin-bottom: 0 !important;
}

#riskdash-stress-coverage-table .Select-menu-outer {
    z-index: 3000 !important;
}

#riskdash-stress-coverage-table .dash-spreadsheet-container,
#riskdash-stress-coverage-table .dash-spreadsheet-container .dash-spreadsheet-inner {
    overflow: visible !important;
}

/* MeetingNotes: override global heading/link colours inside rendered note content */
#MeetingNotes .dash-markdown h1,
#MeetingNotes .dash-markdown h2,
#MeetingNotes .dash-markdown h3,
#MeetingNotes .dash-markdown h4,
#MeetingNotes .dash-markdown h5,
#MeetingNotes .dash-markdown h6 {
    color: black !important;
}

#MeetingNotes .dash-markdown a {
    color: black !important;
}

.info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid #166534;
    color: #166534;
    font-size: 0.7rem;
    font-style: italic;
    font-weight: 700;
    font-family: Georgia, serif;
    margin-left: 8px;
    cursor: default;
    transition: border-color 0.15s ease, color 0.15s ease;
    user-select: none;
    vertical-align: middle;
    flex-shrink: 0;
    line-height: 1;
}

.info-icon:hover {
    border-color: #1a2332;
    color: #1a2332;
}

.info-tooltip .tooltip-inner {
    max-width: 360px;
    text-align: left;
}

/* Client Creation: consultant fields render as both a dropdown and a free-text
   input; the manual-entry switch flips which one shows. */
.cl-consultants .cf-txt {
    display: none;
}
.cl-consultants.manual .cf-dd {
    display: none;
}
.cl-consultants.manual .cf-txt {
    display: block;
}
/* Both controls occupy an identical box so flipping the switch doesn't reflow
   the rows around them. 42px = the global .Select-control 32px height plus its
   10px margin-bottom; the text input matches that 32px and inherits the gap. */
.cl-consultants .cf-dd,
.cl-consultants .cf-txt {
    height: 42px;
}
.cl-consultants .cf-txt input {
    height: 32px;
}

/* Portfolio Builder: contribution-share markers in the weight table. Narrow and
   quick — these are read at a glance while scanning rows, not studied. */
.share-tooltip .tooltip-inner {
    max-width: 165px;
    text-align: left;
    font-size: 0.7rem;
    line-height: 1.35;
    padding: 5px 8px;
}
.share-tooltip .tooltip-arrow {
    display: none;
}

/* Offset modals below the fixed 60px .q-header so the modal header is not clipped */
.modal-dialog {
    margin-top: 80px;
}
.modal-dialog.modal-dialog-centered {
    min-height: calc(100% - 80px);
    margin-top: 60px;
}

/* Master File: report options & file paths cards on the reporting tabs.
   The mf- prefix scopes these to the master_file module. */
.mf-section-card-row {
    margin: 0;
    width: 100%;
    display: flex;
    justify-content: center;
}

.mf-section-card {
    background-color: white;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 16px 20px;
    margin: 16px auto;
    width: 60%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

h6.mf-subsection-header {
    color: #003d5c;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e0e0e0;
}

label.mf-path-label {
    font-weight: 600;
    font-size: 14px;
    color: #2c3e50;
    display: block;
    margin-bottom: 4px;
}

.mf-path-rationale {
    font-size: 12px;
    color: #6c757d;
    line-height: 1.4;
    margin-bottom: 6px;
}

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

.mf-path-input {
    flex: 1;
    font-family: monospace;
    font-size: 12px;
    background-color: white;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 6px 10px;
}

.mf-copy-button {
    font-size: 16px;
    color: #003d5c;
    cursor: pointer;
    padding: 6px 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: #f8f9fa;
    display: inline-flex;
    align-items: center;
}

/* SAA comparison column toggle — must win over .first-cell-table / .width-constraint-table min-widths */
td.pfc-manual-saa-cell.pfc-manual-saa-hidden,
th.pfc-manual-saa-cell.pfc-manual-saa-hidden {
    min-width: 0 !important;
    max-width: 0 !important;
    width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-left-width: 0 !important;
    border-right-width: 0 !important;
    visibility: hidden;
    overflow: hidden;
    white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────────────────
   PfC Manual frozen-panes layout.

   Splits each row component (portfolio banner, accordion control, security
   table, grand total) into a fixed left pane carrying identifier columns and
   a horizontally-scrolling right pane carrying per-portfolio data. All right
   panes share scrollLeft via assets/mf_scroll_sync.js so columns stay aligned
   across the four components.
   ───────────────────────────────────────────────────────────────────────── */
#pfc-manual-table-container {
    /* Default left-pane width = Sub Asset Class (400) + 100 per togglable
       identifier column. Current set is 6 (Ticker, APL, Yield, Rack Rate,
       Effective, Rebate) → 1000px. The JS column-toggle callback recomputes
       and overrides this when columns are hidden; this value is the pre-JS
       fallback and MUST match the rendered column count, or the last left
       column (Rebate?) overflows the pane and overlaps portfolio 1's first
       data column. Bumped 900→1000 when the APL column was added. */
    --mf-left-pane-width: 1000px;
}

#pfc-manual-table-container .mf-pane-row {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    align-items: stretch;
    /* `overflow-x: clip` (not `hidden`) prevents the right pane's content
       from pushing the row wider, without creating a scroll context — which
       means `position: sticky` on the Grand Total still works. Vertical
       overflow stays visible. */
    overflow-x: clip;
    overflow-y: visible;
}

#pfc-manual-table-container .mf-pane-left {
    flex: 0 0 var(--mf-left-pane-width);
    width: var(--mf-left-pane-width);
    min-width: var(--mf-left-pane-width);
    max-width: var(--mf-left-pane-width);
    background-color: #ffffff;
    /* Pin the identifier columns to the left edge. `sticky; left: 0` keeps them
       fixed whether the horizontal scroll happens inside the right data pane
       (the intended design) OR at the page/container level — which occurs when
       the layout is wider than the viewport, or when a browser does not honour
       the container's `overflow-x: clip` (it falls back to `visible`, so the
       page scrolls and a `position: relative` pane would slide away). Opaque
       background + z-index keep scrolling data from showing through. */
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 2;
    /* Freeze-boundary shadow so the user can see where scrolling content
       slides under the fixed identifier columns. */
    box-shadow: 4px 0 6px -3px rgba(0, 0, 0, 0.18);
}

#pfc-manual-table-container .mf-pane-right {
    /* flex-basis: 0 + width: 0 makes the pane size from flex-grow only,
       ignoring the intrinsic width of its content. That's what forces the
       overflow-x: auto to engage instead of the content pushing the parent
       wider. */
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    /* Hint the browser that scroll position is the only thing changing —
       lets it promote the pane to its own compositor layer and avoid
       re-paints during horizontal drag. */
    will-change: scroll-position;
    position: relative;
}

/* Strengthen the left pane's right-edge shadow only when the user has
   scrolled away from column 0 — gives a visible "the data has scrolled
   under here" cue without adding a fragile pseudo-element inside the
   scrolling right pane. The class is toggled by mf_scroll_sync.js. */
#pfc-manual-table-container .mf-pane-row:has(.mf-pane-right.mf-scrolled) .mf-pane-left {
    box-shadow: 6px 0 10px -3px rgba(0, 0, 0, 0.28);
}

/* Hide the native horizontal scrollbar on every right pane AND the fee pane.
   The single visible scrollbar is the proxy bar (.mf-scroll-proxy) pinned to
   the viewport bottom; every pane just follows its scrollLeft. Hiding them all
   here (rather than exempting the Grand Total) is what lets the proxy be the
   sole control even when the Grand Total un-sticks past the fee table.
   Selector is CSS-only (not JS-tagged) so it survives the container being
   unmounted and re-rendered when the user switches Dash tabs and returns. */
#pfc-manual-table-container .mf-pane-right,
#pfc-manual-fee-table-container {
    scrollbar-width: none;
}
#pfc-manual-table-container .mf-pane-right::-webkit-scrollbar,
#pfc-manual-fee-table-container::-webkit-scrollbar {
    display: none;
}

/* Single shared horizontal scrollbar for the Manual table. Pinned to the
   viewport bottom and, as the LAST child of #pfc-manual-table-container, it
   stays there even when the fee table is on screen (a bottom-sticky element
   floats over earlier siblings but not later ones — the reason the Grand
   Total's own scrollbar could not). It spans the FULL table width (and is
   opaque) so it also covers the strip beneath the frozen identifier columns
   left by the Grand Total sticking one scrollbar-height up. The inner spacer's
   width is set in JS to the widest pane's scroll width PLUS the left-pane
   width, which makes the proxy's scroll range exactly equal the panes' so
   dragging maps 1:1 even though the proxy track is wider than the data pane.
   NOTE: relies on native scrollbars taking layout space (Windows/Linux). On
   macOS overlay scrollbars this proxy renders as a hard-to-grab hairline and
   would need a forced visible styled track. App is Windows-only today. */
#pfc-manual-table-container .mf-scroll-proxy {
    position: sticky;
    bottom: 0;
    z-index: 103;
    overflow-x: auto;
    overflow-y: hidden;
    background-color: #ffffff;
    border-top: 1px solid #d5dbde;
}
#pfc-manual-table-container .mf-scroll-proxy-spacer {
    height: 1px;
}

/* Extra trailing scroll room so the right-most data columns can be scrolled
   clear of the viewport edge instead of sitting flush against it. Applied to
   the scrolling CONTENT of every right pane (and the fee table) so all panes
   gain the same width and stay column-aligned. The proxy auto-extends to match
   because its spacer is sized in JS from the panes' scrollWidth. */
#pfc-manual-table-container .mf-pane-right > *,
#pfc-manual-fee-table-container > * {
    margin-right: 200px;
}

/* Identifier cells in the left pane must keep tight overflow rules so a long
   security name cannot wrap and break row-height alignment with the right
   pane. */
#pfc-manual-table-container .mf-pane-left td,
#pfc-manual-table-container .mf-pane-left th {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 40px;
}

/* Column show/hide toggle. Each data cell carries a mf-col-<COL> class; the
   clientside callback adds mf-col-hidden to hide that column across the
   sub-total header, portfolio banner column header, security rows, and
   grand total row in lockstep. */
#pfc-manual-table-container .mf-col-hidden {
    display: none !important;
}

/* Export-readiness banner above the PfC Manual table. Two clientside callbacks
   (see callbacks.py) swap the state modifier class:
     --idle      before an account is loaded
     --updating  while a settled edit's stores are refreshing
     --ready     once the export store is current
   The colour transition softens a fast Updating→Ready flip. */
.mf-export-status {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 16px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 14px;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.mf-export-status--ready    { background-color: #e3f3e8; color: #1e6b3a; }
.mf-export-status--updating { background-color: #fdf3e0; color: #8a5a00; }
.mf-export-status--idle     { background-color: #eef1f4; color: #2c3e50; }

/* Grand Total row is pinned to the bottom of the viewport so totals stay
   visible while the user scrolls through the security list. It sticks one
   proxy-scrollbar height above the bottom so the shared scroll proxy
   (.mf-scroll-proxy) sits just beneath it without overlapping the totals.
   --mf-scroll-proxy-height is measured and set in JS; 16px is a safe default
   before that runs. */
#pfc-manual-table-container .mf-grand-total-sticky {
    position: sticky;
    bottom: var(--mf-scroll-proxy-height, 16px);
    z-index: 100;
    background-color: #ffffff;
}

/* Order-column sign colouring. Driven by data-sign so the clientside
   auto-recalc callback can repaint cells without emitting a per-cell
   style payload through Dash (see AUTO_RECALC_PLAN Watch Point 6).
   data-sign is set on Td render and overwritten on each edit; the
   absent / "zero" case falls back to the row's default background. */
#pfc-manual-table-container td[data-sign="pos"] {
    background-color: lightgreen !important;
}
#pfc-manual-table-container td[data-sign="neg"] {
    background-color: lightcoral !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Beta Visualisation tab.

   All rules are scoped under .bv-container so they cannot bleed into the rest
   of alpha_screen. The `bv-` prefix mirrors the `mf-` master_file convention.
   ───────────────────────────────────────────────────────────────────────── */
.bv-container {
    padding: 20px 24px;
    background: #ffffff;
}

.bv-container .bv-intro {
    color: #6c757d;
    font-size: 13px;
    line-height: 1.5;
    margin: 8px 0 18px;
}

.bv-container .bv-fund-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
    max-width: 60%;
}

.bv-container .bv-label {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: #2c3e50;
    margin-bottom: 4px;
}

.bv-container .bv-dropdown {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
}

.bv-container .bv-status {
    color: #6c757d;
    font-size: 12px;
    min-height: 20px;
    margin: 6px 0 4px;
}

.bv-container .bv-chart {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    margin-bottom: 16px;
    background: #ffffff;
}

/* ── Style Correlation tab ─────────────────────────────────────────────── */

.sc-container {
    padding: 20px 24px;
    background: #ffffff;
}

.sc-container .sc-intro {
    color: #6c757d;
    font-size: 13px;
    line-height: 1.5;
    margin: 8px 0 18px;
    max-width: 1000px;
}

.sc-container .sc-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: #2c3e50;
    margin-bottom: 4px;
}

.sc-container .sc-dropdown {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
}

.sc-container .sc-controls {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.sc-container .sc-control {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 220px;
}

.sc-container .sc-control-wide {
    flex: 1 1 380px;
}

.sc-container .sc-radio-item {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #2c3e50;
    padding: 2px 0;
    cursor: pointer;
}

.sc-container .sc-radio-input,
.sc-container .sc-checklist-input {
    margin-right: 6px;
    cursor: pointer;
}

.sc-container .sc-bench-row {
    display: flex;
    flex-direction: row;
    gap: 40px;
    align-items: flex-start;
    margin-bottom: 18px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid #e6ebf2;
    border-radius: 6px;
    flex-wrap: wrap;
}

.sc-container .sc-bench-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sc-container .sc-checklist-item {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #2c3e50;
    padding: 2px 0;
    cursor: pointer;
    white-space: nowrap;
}

.sc-container .sc-status {
    color: #6c757d;
    font-size: 12px;
    min-height: 20px;
    margin: 6px 0 10px;
}

.sc-container .sc-chart {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    margin-bottom: 16px;
    background: #ffffff;
}

/* Constrain every tab's content to a centred column so wide tables and
   charts don't stretch full-bleed on large monitors. The tab bar itself
   stays full width; only the content below is capped. Mirrors the same rule
   in the Alpha Screen apps — keep the two in step.

   The side padding is needed because the RBA Watch content is a
   bare Div with no card or gutter of its own, so without it the dropdown and
   charts sit flush against the window edge below 1500px. */
.tab-content {
    width: 100%;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

/* Period slider sits in flow above the tabs. A position:fixed slider would
   land on the tabs, as the page has no navbar to sit beside. */
.macro-slider-bar {
    padding: 6px 24px 0 24px;
    background-color: #fafbfc;
    border-bottom: 1px solid #e6e9ee;
}

/* The RBA Watch comparison picker is a single dropdown — cap it so it does
   not stretch the width of the content column. */
.ibcr-compare-picker {
    max-width: 420px;
}

/* RBA Watch summary cards. */
.rba-card-row {
    margin: 4px 0 20px;
}

.rba-stat-card {
    background: #ffffff;
    border: 1px solid #e6e9ee;
    border-radius: 6px;
    padding: 14px 16px;
    height: 100%;
    box-sizing: border-box;
}

.rba-card-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6c757d;
    margin-bottom: 6px;
}

.rba-card-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: #003d5c;
    line-height: 1.2;
}

.rba-card-value.rba-up   { color: #b3261e; }   /* tightening priced */
.rba-card-value.rba-down { color: #2e7d32; }   /* easing priced */

.rba-card-sub {
    font-size: 0.72rem;
    color: #6c757d;
    margin-top: 6px;
    line-height: 1.35;
}

.rba-odds {
    margin-top: 2px;
}

.rba-odds-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.85rem;
    padding: 1px 0;
}

.rba-odds-label { color: #6c757d; }

.rba-odds-value {
    font-weight: 600;
    color: #003d5c;
    font-variant-numeric: tabular-nums;
}

/* Info marker on the RBA Watch cards. */
.rba-card-label {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rba-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: 1px solid #adb5bd;
    border-radius: 50%;
    color: #6c757d;
    font-size: 0.62rem;
    font-weight: 700;
    font-style: italic;
    font-family: Georgia, serif;
    text-transform: none;
    letter-spacing: 0;
    cursor: help;
    flex: 0 0 auto;
}

.rba-info:hover {
    border-color: #003d5c;
    color: #003d5c;
}

.rba-tooltip .tooltip-inner {
    max-width: 340px;
    text-align: left;
    font-size: 0.78rem;
    line-height: 1.45;
    padding: 10px 12px;
}

.rba-tip-head {
    font-weight: 600;
    margin-bottom: 5px;
}

.rba-tip-list {
    margin: 4px 0;
}

.rba-tip-row {
    font-variant-numeric: tabular-nums;
    padding: 1px 0;
}

.rba-tip-foot {
    margin-top: 6px;
    opacity: 0.8;
}

/* Dashboard: revisions strip. */
.rev-card {
    margin-bottom: 20px;
}

.rev-title {
    margin-bottom: 10px;
}

.rev-table {
    display: table;
    width: 100%;
    max-width: 520px;
    font-size: 0.85rem;
}

.rev-row {
    display: table-row;
}

.rev-cell {
    display: table-cell;
    padding: 4px 14px 4px 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rev-month {
    text-align: left;
    color: #6c757d;
}

.rev-head .rev-cell {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6c757d;
    border-bottom: 1px solid #e6e9ee;
    padding-bottom: 6px;
}

.rev-up   { color: #2e7d32; font-weight: 600; }
.rev-down { color: #b3261e; font-weight: 600; }

/* Household block: four columns rather than the revisions table's four narrow ones. */
.rev-table-wide {
    max-width: 100%;
}

.rev-table-wide .rev-month {
    min-width: 190px;
}

/* Dashboard: expandable industry tree. */
.tree-row .rev-cell {
    padding-top: 3px;
    padding-bottom: 3px;
}

.tree-label {
    white-space: nowrap;
}

.tree-caret {
    display: inline-block;
    width: 14px;
    color: #6c757d;
    cursor: pointer;
    user-select: none;
}

.tree-caret:hover {
    color: #003d5c;
}

.tree-leaf {
    cursor: default;
}

.tree-average {
    color: #6c757d;
}

/* A month running well clear of its own 12-month average is the one to look at. */
.tree-stretched {
    font-weight: 700;
}

/* Dashboard: employment-by-sector small multiples. */
/* Sub-headings that break the Dashboard into sections. */
.section-heading {
    margin: 22px 0 10px;
    padding-top: 14px;
    border-top: 1px solid #e6e9ee;
}

/* The first one sits directly under the tab bar, where a rule reads as a
   double border against the tab strip. */
.section-heading:first-child {
    margin-top: 4px;
    padding-top: 0;
    border-top: none;
}

/* Collapsible sections: the heading is the control, so it has to look like
   one without turning into a button. Cursor, a hover tint and a caret are
   enough; the caret character is swapped by the callback. */
.section-toggle {
    cursor: pointer;
    user-select: none;
    border-radius: 4px;
    transition: background-color 0.12s ease;
}

.section-toggle:hover {
    background-color: #eef2f6;
}

.section-caret {
    display: inline-block;
    width: 14px;
    color: #6c757d;
    font-size: 0.75rem;
}

/* The first section's heading loses its top rule, so give the hover tint a
   little room rather than letting it sit flush against the period bar. */
.section-toggle:first-child {
    padding-top: 4px;
}

.section-title {
    margin: 0 0 2px 4px;
    font-size: 0.8rem;
    color: #003d5c;
}

.section-note {
    margin: 0 0 2px 4px;
    max-width: 760px;
}

/* .graph fixes 400px, which is right for a single chart and far too tall for
   nine of them stacked three to a row. */
.sector-panel {
    margin-bottom: 14px;
}

.sector-panel .graph {
    height: 250px !important;
    padding: 6px !important;
}

/* Branch headings within the by-sector panels. Lighter than a section
   heading, which separates whole topics rather than groups inside one. */
.sector-group {
    margin: 10px 0 6px 4px;
    color: #6c757d;
}

/* Warsh Watch: quote marker above each chart. */
.chart-info-bar {
    display: flex;
    justify-content: flex-end;
    padding: 0 8px 2px 0;
}

.rba-tip-quote {
    font-style: italic;
    margin-bottom: 8px;
    padding-left: 8px;
    border-left: 2px solid rgba(255, 255, 255, 0.35);
}

/* Warsh Watch: period toggle. */
.period-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px 0 14px 4px;
}

.period-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6c757d;
}

.period-toggle .btn {
    font-size: 0.75rem;
    padding: 3px 12px;
}

.period-toggle .btn-check:checked + .btn,
.period-toggle .btn.active {
    background-color: #003d5c;
    border-color: #003d5c;
    color: #ffffff;
}

/* ── One-page layout (RBA Watch standalone) ─────────────────────────────── */
.page-header {
    margin: 0 0 8px;
}

.page-title {
    margin: 0;
    font-weight: 700;
    color: #1a2e4a;
}

.page-subtitle {
    color: #57606a;
    font-size: 0.95rem;
}

/* The two top-level bands: cash rate expectations, then the dual mandate. */
.band {
    margin: 28px 0 14px;
    padding: 10px 14px;
    background: #1a2e4a;
    border-radius: 6px;
}

.band-title {
    color: #ffffff;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.3px;
}

.band-note {
    color: #d6dde8;
    font-size: 0.85rem;
}

/* Inflation, Jobs and the broader economy: bigger than the old tab's section
   titles, with a gold rule so each reads as its own part of the page. */
.section-heading.section-toggle {
    margin: 26px 0 12px;
    padding: 8px 6px 6px;
    border-top: none;
    border-bottom: 2px solid #c8a951;
}

.section-toggle .section-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: #1a2e4a;
    text-transform: none;
    letter-spacing: 0;
}

/* Headings inside a section. */
.sub-heading {
    margin: 28px 0 10px 4px;
}

.sub-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #003d5c;
}

/* ── Phones and small tablets ───────────────────────────────────────────── */
/* Card columns wrap onto several lines, so they need their own gap. */
.rba-card-row > [class*="col"] {
    margin-bottom: 12px;
}

@media (max-width: 767px) {
    /* The chart toolbar (download, zoom) sits over the title on a narrow
       chart, and on a touch screen it shows constantly. Hover still works. */
    .graph .modebar-container {
        display: none !important;
    }

    .graph {
        height: 340px !important;
        padding: 8px 6px 4px !important;
        margin-bottom: 14px;
    }

    .graph .gtitle {
        font-size: 12.5px !important;
    }

    /* Sixteen value labels cannot sit side by side at phone width; tapping a
       bar still shows its rate. */
    #ibcr-current-bar-chart .bartext {
        display: none;
    }

    /* Tables: drop the secondary columns and let the first one shrink. */
    .hide-sm {
        display: none !important;
    }

    .rev-table-wide .rev-month {
        min-width: 0;
    }

    .rev-cell {
        padding: 4px 8px 4px 0;
        white-space: normal;
    }

    .rev-table {
        font-size: 0.8rem;
    }

    /* Cards two to a row: smaller numbers so "2–3 Nov 2026" fits. */
    .rba-stat-card {
        padding: 10px 12px;
    }

    .rba-card-value {
        font-size: 1.2rem;
    }

    .rba-card-label {
        font-size: 0.66rem;
    }

    .band {
        margin: 20px 0 10px;
    }

    .section-toggle .section-title {
        font-size: 1.05rem;
    }

    .section-note {
        font-size: 0.8rem;
    }

    .page-title {
        font-size: 1.5rem;
    }
}

@media (max-width: 767px) {
    /* Five period buttons plus the label don't fit one phone line. */
    .period-bar {
        flex-wrap: wrap;
        gap: 6px;
    }

    .period-toggle {
        flex-wrap: wrap;
    }

    .period-toggle .btn {
        padding: 3px 9px;
    }
}

@media (max-width: 767px) {
    /* Keep the period buttons in one tight group when they wrap. */
    .period-toggle .form-check-inline {
        margin-right: 4px;
    }
}

/* Scorecard table: it shares a half-width column with its chart, so the
   meeting column drops the wide tables' minimum and headers may wrap. */
.score-table .rev-month {
    min-width: 0;
}

.score-table .rev-head .rev-cell {
    white-space: normal;
    vertical-align: bottom;
}

@media (max-width: 767px) {
    /* Narrow tables with market names as headers ("POLYMARKET"): smaller
       capitals so the longest name fits its column. */
    .score-table .rev-head .rev-cell {
        font-size: 0.6rem;
        letter-spacing: 0.02em;
    }
}

/* The plain-text summary served in place of "Loading..." (see seo.py), for
   search engines and link previews. People see it only while the charts load. */
.seo-summary {
    max-width: 1400px;
    margin: 24px auto;
    padding: 0 16px;
    color: #57606a;
}

.seo-summary h1 {
    margin: 0 0 4px;
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a2e4a;
}

.seo-summary ul {
    margin: 12px 0;
    padding-left: 18px;
    color: #1a2e4a;
}

.seo-summary .seo-loading {
    font-size: 0.85rem;
}

/* Links from the dashboard header to the plain pages. */
.page-links {
    margin-top: 6px;
    font-size: 0.9rem;
}

.page-links a {
    margin-right: 16px;
    color: #1a2e4a;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid #c8a951;
}

/* ── Plain pages: /next-rba-meeting and /interest-rate-forecast (pages.py) ── */
.lp {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 16px 32px;
    color: #2b3440;
    line-height: 1.6;
}

.lp a {
    color: #1a2e4a;
    text-decoration-color: #c8a951;
    text-underline-offset: 3px;
}

.lp-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 18px;
    margin: 0 -16px 28px;
    padding: 12px 16px;
    background: #1a2e4a;
}

.lp-nav a {
    color: #d6dde8;
    text-decoration: none;
    font-size: 0.9rem;
}

.lp-nav a.active {
    color: #ffffff;
    border-bottom: 2px solid #c8a951;
}

.lp-nav .lp-brand {
    color: #ffffff;
    font-weight: 700;
    font-size: 1.1rem;
    margin-right: 6px;
}

.lp-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}

.lp h1 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1a2e4a;
    margin: 0 0 12px;
}

.lp h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a2e4a;
    margin: 32px 0 10px;
    padding-bottom: 4px;
    border-bottom: 2px solid #c8a951;
}

.lp h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #1a2e4a;
    margin: 18px 0 4px;
}

.lp-lead {
    font-size: 1.1rem;
}

.lp-muted {
    color: #5b6573;
    font-size: 0.88rem;
}

.lp-hot {
    color: #c8553d;
    font-weight: 600;
}

.lp-cool {
    color: #2a9d8f;
    font-weight: 600;
}

.lp-tag {
    display: inline-block;
    padding: 0 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #1a2e4a;
    background: #f3ecd6;
    border-radius: 3px;
    vertical-align: 1px;
}

.lp-odds-row {
    display: flex;
    gap: 12px;
    margin: 14px 0;
}

.lp-odds {
    flex: 1;
    max-width: 150px;
    padding: 10px 14px;
    border: 1px solid #e6e9ee;
    border-radius: 6px;
    background: #fafbfc;
    color: #1a2e4a;
}

.lp-odds-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
}

.lp-odds-label {
    font-size: 0.85rem;
    color: #5b6573;
}

.lp-table-wrap {
    overflow-x: auto;
}

.lp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.lp-table th {
    text-align: left;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #5b6573;
    border-bottom: 2px solid #e6e9ee;
    padding: 6px 8px;
}

.lp-table td {
    padding: 7px 8px;
    border-bottom: 1px solid #eef1f4;
}

.lp-chart {
    margin: 18px 0 8px;
}

.lp-chart svg {
    width: 100%;
    height: auto;
    display: block;
}

.lp-chart figcaption {
    font-size: 0.85rem;
    color: #5b6573;
}

.lp-grid {
    stroke: #eef1f4;
    stroke-width: 1;
}

.lp-now {
    stroke: #5b6573;
    stroke-width: 1;
    stroke-dasharray: 4 4;
}

.lp-line {
    fill: none;
    stroke: #1a2e4a;
    stroke-width: 2.5;
}

.lp-dot {
    fill: #c8a951;
}

.lp-axis text {
    font-size: 12px;
    fill: #5b6573;
}

.lp-axis .lp-year {
    font-size: 10px;
}

.lp-foot {
    margin-top: 36px;
    padding-top: 12px;
    border-top: 1px solid #e6e9ee;
    color: #5b6573;
    font-size: 0.8rem;
}

@media (max-width: 575px) {
    .lp h1 {
        font-size: 1.45rem;
    }

    .lp-hide-sm {
        display: none;
    }

    .lp-odds {
        padding: 8px 10px;
    }

    /* The chart scales to about half size on a phone; its text is in chart
       units, so it has to grow to stay readable. */
    .lp-axis text {
        font-size: 20px;
    }

    .lp-axis .lp-year {
        font-size: 16px;
    }
}