/* =====================  Body styles  ======================== */

@font-face {
    font-family: 'Biome W01';
    src: url('/fonts/biome/Biome-W01-Regular.woff2') format('woff2'), url('/fonts/biome/Biome-W01-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Biome W01';
    src: url('/fonts/biome/Biome-W01-Bold.woff2') format('woff2'), url('/fonts/biome/Biome-W01-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Ensure the body takes the full height */
html, body {
    height: 100%;
    margin: 0;
    font-family: 'Biome W01', Verdana, sans-serif;
    font-size: 0.9rem;
    overflow: auto; /* Allow scrolling if content exceeds the viewport */
    background-color: #f8f9fa; /* Set background color for the body */
}

/* Restricted actions look disabled, but remain clickable so the app can explain why. */
.restricted-action {
    opacity: 0.65;
    cursor: pointer !important;
}

.restricted-action:hover,
.restricted-action:focus,
.restricted-action:active {
    opacity: 0.65;
}

.restricted-card {
    cursor: pointer !important;
}

.restricted-card:hover,
.restricted-card:focus,
.restricted-card:active {
    opacity: 0.5 !important;
}

.container-fluid, .row {
    height: 100%; /* Ensure these elements take the full height */
}

/* Fix the top header when scrolling */
header {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 0;
    z-index: 1030; /* Make sure it's above other elements */
    background-color: white; /* Ensure the background color covers content behind the header */
}


/* =====================  Main content styles  ======================== */

/* Main content styling */
.main-content {
    overflow: auto; /* Allow content to scroll if needed */
    height: calc(100vh - 80px); /* Adjust based on reduced header height */
    position: relative;
    margin-left: 200px; /* Adjust this value based on the new sidebar width */
    padding: 10px;
    background-color: #f8f9fa; /* Optional: background color */
    text-align: left; /* Ensure the main content text is left aligned */
}

body.planning-view,
body.planning-view .main-content,
body.planning-view main.container-fluid,
body.planning-view .planning-table-wrapper,
body.planning-view .planning-table-inner,
body.planning-view .sticky-table-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body.planning-view::-webkit-scrollbar,
body.planning-view .main-content::-webkit-scrollbar,
body.planning-view main.container-fluid::-webkit-scrollbar,
body.planning-view .planning-table-wrapper::-webkit-scrollbar,
body.planning-view .planning-table-inner::-webkit-scrollbar,
body.planning-view .sticky-table-scroll::-webkit-scrollbar {
    display: none;
}

main.container-fluid {
    padding-top: 20px; /* Add padding to create a gap between the navbar and the content */
    padding-left: 30px; /* Adjust this value to align the content with the titles */
    height: calc(100vh - 80px); /* Ensure it takes full height minus the navbar */
    background-color: #f8f9fa; /* Ensure the background color matches the main content */
}


/* =====================  Navbar styles  ======================== */

/* Navbar */
.navbar {
    margin-bottom: 0; /* Remove bottom margin if there's any */
    height: 80px; /* Adjusted height */
    border-bottom: 1px solid #dee2e6; /* Border bottom */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background-color: #f8f9fa; /* Set background color */
}


/* Align all navbar icons and text consistently */
.navbar-icons {
    display: flex;
    align-items: center; /* Align all icons vertically */
    gap: 20px; /* Space between each icon container */
}

    .navbar-icons .icon-container {
        color: #0056b3 !important; /* Set consistent blue color for icons and text */
    }

    .navbar-icons .navbar-icon-link {
        text-decoration: none; /* Remove underline */
        color: inherit !important; /* Inherit color from the parent container */
        display: flex;
        flex-direction: column; /* Arrange icon and text vertically */
        align-items: center; /* Center-align the icon and text */
        gap: 0.2rem; /* Add space between icon and text */
    }

        .navbar-icons .navbar-icon-link i {
            font-size: 1.5rem; /* Adjust icon size */
            line-height: 1; /* Remove excess spacing around the icon */
            color: #0056b3 !important; /* Ensure the icon color is always blue */
        }

        .navbar-icons .navbar-icon-link span {
            font-size: 0.75rem; /* Smaller font size for text */
            color: #0056b3 !important; /* Consistent color for text */
            text-decoration: none; /* Ensure text is not underlined */
            margin-top: 0; /* Reset any extra margin */
        }

/* Remove arrow from the Account dropdown */
.no-arrow::after {
    display: none !important;
}

/* Adjust dropdown menu alignment */
.dropdown-menu-end {
    right: 0;
    left: auto; /* Ensure alignment to the right side of the dropdown toggle */
}

/* Navbar dropdown menu styling */
.dropdown-header {
    font-size: 0.85rem; /* Adjust font size if needed */
    font-weight: normal; /* Make the username more prominent */
    color: #343a40; /* Use the same blue color as the rest of the navbar */
    padding: 10px 20px; /* Add some padding for better spacing */
}

/* Navbar dropdown items styling */
.dropdown-menu .dropdown-item {
    color: #343a40; /* Ensure dropdown links match the color of other navbar items */
    text-decoration: none; /* Remove underline from dropdown links */
    padding: 10px 20px; /* Add padding for better spacing */
    font-size: 0.85rem; /* Match the font size with the dropdown header */
}

    .dropdown-menu .dropdown-item:hover {
        background-color: #f0f0f0; /* Light grey on hover for better visibility */
        color: #343a40; /* Maintain the same color when hovered */
    }

/* Small dropdown menu styling */
.dropdown-menu-sm {
    font-size: 0.85rem;
}

    .dropdown-menu-sm .dropdown-item {
        padding: 0.2rem 0.75rem;
    }

.no-caret::after {
    display: none !important;
}


/* =====================  Language dropdown styles  ======================== */

.btn-lang-selector {
    border: none;
    background: transparent;
    padding: 0;
}

    .btn-lang-selector::after {
        display: none;
    }

/* Reduced container styling for flag dropdown */
.flag-dropdown {
    display: flex;
    flex-direction: row;
    gap: 0.2rem; /* Reduced gap */
    min-width: auto;
    padding: 0.1rem 0.2rem; /* Reduced container padding */
}

    .flag-dropdown .dropdown-item {
        display: inline-block;
        padding: 0; /* Remove default padding */
    }

        .flag-dropdown .dropdown-item a {
            display: inline-flex;
        }

/* Further reduce dropdown menu padding */
.flag-dropdown-menu {
    padding: 0.1rem !important;
    font-size: 0.8rem !important;
    line-height: 1 !important;
}

    .flag-dropdown-menu .dropdown-item {
        padding: 0.1rem 0.2rem !important;
        font-size: 0.8rem !important;
        line-height: 1 !important;
    }


/* =====================  Sidebar styles  ======================== */

.sidebar {
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    background-color: #003366;
    width: 200px;
    overflow-y: auto;
}

#sidebarHeader {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #002244;
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: normal;
    flex-shrink: 0;
    text-align: center;
}

    #sidebarHeader a {
        display: inline-block;
        width: 100%;
        text-align: center;
    }

    #sidebarHeader img {
        display: block;
        max-height: calc(70px * var(--logo-scale, 1));
        max-width: calc(180px * var(--logo-scale, 1));
        width: auto;
        height: auto;
        object-fit: contain;
        margin: 0 auto;
    }

    #sidebarHeader .sidebar-logo-fallback {
        display: none;
    }

.sidebar-body {
    flex-grow: 1;
    overflow-y: auto;
}

    .sidebar-body::-webkit-scrollbar {
        display: none;
    }

.sidebar-section {
    padding: 10px 15px;
    background-color: #003366;
    color: white;
    text-align: left;
    border-bottom: 1px solid #002244;
}

.sidebar .nav-link {
    color: white;
    text-decoration: none;
    width: 100%;
    padding: 10px 15px;
    display: block;
    text-align: left;
    font-size: 14px;
    border-radius: var(--bs-border-radius);
    transition: background-color .15s ease;
}

    .sidebar .nav-link:hover {
        background-color: #0056b3;
    }

    .sidebar .nav-link.active {
        background-color: #0056b3;
    }

/* Submenu styling */
.sidebar-submenu {
    padding-left: 20px;
    display: flex;
    flex-direction: column;
}

/* =====================  Settings and support styles  ======================== */

.settings-breadcrumb {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.5rem;
    color: #212529;
    font-size: .875rem;
}

.settings-breadcrumb a {
    color: #212529;
    text-decoration: none;
    font-weight: 600;
}

.settings-breadcrumb a:hover {
    text-decoration: underline;
}

.report-shortcuts {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin: 0.25rem 0 0.75rem;
    border-bottom: 1px solid #dee2e6;
}

.report-shortcuts__link {
    display: inline-flex;
    align-items: center;
    padding: 0 0 0.5rem;
    color: #212529;
    text-decoration: none;
    font-size: 0.8em;
    border-bottom: 2px solid transparent;
}

.report-shortcuts__link:hover {
    color: #212529;
    text-decoration: none;
}

.report-shortcuts__link.active {
    color: #212529;
    font-weight: 700;
    border-bottom-color: #212529;
}

.settings-hero {
    margin-bottom: 2rem;
}

.settings-hero h2 {
    margin-bottom: .35rem;
    font-weight: 700;
}

.settings-topic-group {
    margin-bottom: 2.75rem;
}

.settings-topic-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem 2rem;
    margin-top: 1rem;
}

.settings-topic-card {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: .75rem;
    padding: .75rem;
    color: inherit;
    text-decoration: none;
    border-radius: .5rem;
    transition: background-color .15s ease, box-shadow .15s ease;
}

.settings-topic-card:hover,
.settings-topic-card:focus {
    background: #f7f8ff;
    box-shadow: 0 0 0 1px #e1e4ff inset;
    text-decoration: none;
}

.settings-topic-card.disabled,
.settings-topic-card[aria-disabled="true"] {
    opacity: .55;
}

.settings-topic-card.disabled:hover,
.settings-topic-card.disabled:focus,
.settings-topic-card[aria-disabled="true"]:hover,
.settings-topic-card[aria-disabled="true"]:focus {
    background: transparent;
    box-shadow: none;
}

.settings-topic-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: .45rem;
    background: #f3f4ff;
    color: #4f46ff;
    font-size: 1.05rem;
    line-height: 1;
}

.settings-topic-icon i {
    font-size: .95rem;
}

.settings-topic-icon-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    color: #4f46ff;
}

.settings-topic-icon-stack .settings-topic-icon {
    margin: 0;
}

.settings-topic-download-icon {
    font-size: .9rem;
    line-height: 1;
}

.settings-topic-title {
    color: #212529;
    font-weight: 700;
    font-size: .95rem;
    margin-bottom: .2rem;
}

.settings-topic-description {
    color: #212529;
    font-size: .9rem;
    line-height: 1.35;
    margin: 0;
}

.settings-panel {
    border-top: 1px solid #e9ecef;
    padding-top: 2rem;
    margin-top: 2rem;
}

.settings-panel-heading {
    margin-bottom: 1.25rem;
}

.settings-card {
    border: 1px solid #e9ecef;
    border-radius: .75rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
    background: #fff;
}

.settings-card h5 {
    margin-bottom: .5rem;
    font-weight: 700;
}

.settings-card .text-muted {
    margin-bottom: 1rem;
}

.support-doc-list {
    display: grid;
    gap: 1rem;
}

.support-doc-item {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: .85rem;
    padding: 1rem;
    border: 1px solid #eef0f5;
    border-radius: .65rem;
    background: #fff;
}

.support-doc-item.no-icon {
    display: block;
}

.support-doc-item h5 {
    margin-bottom: .35rem;
    font-weight: 700;
    font-size: .95rem;
}

.support-doc-item p:last-child,
.support-doc-item ul:last-child {
    margin-bottom: 0;
}

.support-doc-item p {
    color: #495057;
    line-height: 1.45;
}

.support-note {
    background-color: #f8f9fa;
    border: 1px solid #eef0f5;
    border-radius: .5rem;
    padding: .75rem;
    color: #495057;
}

.support-technical-accordion .support-note {
    padding: 0;
    overflow: hidden;
}

.support-technical-accordion .accordion-button {
    background-color: #f8f9fa;
    color: #495057;
    font-size: .9rem;
    font-weight: 700;
    padding: .75rem;
    box-shadow: none;
}

.support-technical-accordion .accordion-button:not(.collapsed) {
    background-color: #f8f9fa;
    color: #4f46ff;
}

.support-technical-accordion .accordion-body {
    background-color: #f8f9fa;
    padding: 0 .75rem .75rem;
}

.support-technical-accordion .accordion-body ul {
    margin-bottom: 0;
}

.support-accordion {
    display: grid;
    gap: 1rem;
}

.support-accordion .accordion-item {
    border: 1px solid #eef0f5;
    border-radius: .65rem;
    overflow: hidden;
    background: #fff;
}

.support-accordion .accordion-button {
    border-radius: .65rem;
    font-weight: 700;
}

.support-accordion .accordion-button:not(.collapsed) {
    background: #f7f8ff;
    color: #4f46ff;
    box-shadow: none;
}

@media (max-width: 991.98px) {
    .settings-topic-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

    .sidebar-submenu .nav-link {
        padding-left: 10px;
        text-align: left;
        background-color: #003366;
        color: white;
        font-size: 12px;
    }

/* Remove Bootstrap default caret/icons inside the sidebar */
.sidebar .nav-link.dropdown-toggle::after,
.sidebar .nav-link[data-bs-toggle="collapse"]::before {
    display: none !important;
    content: none !important;
    border: none !important;
}

/* Collapse menu links */
.sidebar .nav-link[data-bs-toggle="collapse"] {
    position: relative;
    padding-right: 30px;
}

    /* Bootstrap accordion-style chevron */
    .sidebar .nav-link[data-bs-toggle="collapse"]::after {
        content: '';
        position: absolute;
        right: 12px;
        top: 50%;
        width: .5rem;
        height: .5rem;
        border-right: .12rem solid currentColor !important;
        border-bottom: .12rem solid currentColor !important;
        border-top: 0 !important;
        border-left: 0 !important;
        color: white;
        background: none !important;
        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: inline-block;
        transform: translateY(-60%) rotate(45deg);
        transform-origin: 50% 50%;
        transition: transform .2s ease-in-out;
    }

    .sidebar .sidebar-submenu .nav-link[data-bs-toggle="collapse"]::after {
        width: .45rem;
        height: .45rem;
        right: 10px;
    }

    .sidebar .nav-link[data-bs-toggle="collapse"][aria-expanded="true"]::after {
        transform: translateY(-35%) rotate(-135deg);
    }

    /* Remove focus/active box from collapse links */
    .sidebar .nav-link[data-bs-toggle="collapse"]:focus,
    .sidebar .nav-link[data-bs-toggle="collapse"]:active {
        background-color: #003366;
        box-shadow: none !important;
        outline: none !important;
    }

    /* Keep normal hover */
    .sidebar .nav-link[data-bs-toggle="collapse"]:hover {
        background-color: #0056b3;
    }

.sidebar .collapse {
    background-color: #003366;
}

/* Sidebar footer styling */
.sidebar-footer {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #002244;
    color: #cccccc;
    font-family: inherit;
    font-size: 0.9rem;
    flex-shrink: 0;
}


/* =====================  Footer styles  ======================== */

/* Footer styling */
.footer {
    background-color: #f8f9fa; /* Set background color for the footer */
    color: #333; /* Darker text color for contrast */
    padding: 1rem 0; /* Padding for spacing */
    position: relative;
    height: 50px; /* Adjust this as needed */
    bottom: 0;
    width: 100%;
    z-index: 1000; /* Ensure footer is above other content */
    text-align: center; /* Center align text */
}


/* =====================  Input form styles  ======================== */

/* Input form font and label */
.small-font {
    font-size: 0.9em; /* Adjust this value as needed */
}

.label-sm {
    font-size: 0.9em; /* or your desired size */
}


/* =====================  POV styles  ======================== */

/* Global POV styles */
.pov-select, .pov-button {
    height: 30px;
    margin-right: 10px;
    font-size: 0.8em;
    display: flex;
    align-items: center;
}

.pov-button.btn-sm {
    font-size: var(--bs-btn-font-size);
}

.pov-container {
    display: flex;
    align-items: center;
}

    .pov-container > div {
        margin-right: 15px;
    }


/* =====================  Table styles  ======================== */

table {
    width: auto;
    border-collapse: collapse; /* Make table borders solid without gaps */
}

.table {
    --bs-table-bg: transparent;
}

th, td {
    font-size: 0.85rem;
    padding: 0.25rem;
    text-align: left;
    border: none;
}

table th {
    border-bottom: 1px solid #ddd !important; /* Adds a line below the header */
}

table td, table th {
    vertical-align: middle;
}


/* Disabled link styling */
.disabled-link {
    pointer-events: none;
    opacity: 0.5;
}

/* Ensure disabled input styling */
input[disabled] {
    background-color: #e9ecef;
    cursor: not-allowed;
}


.table-view-1000 {
    max-width: 1000px;
    margin-left: 0; /* Ensure left alignment */
    margin-right: auto; /* Prevent centering */
}

.table-view-1200 {
    max-width: 1200px;
    margin-left: 0; /* Ensure left alignment */
    margin-right: auto; /* Prevent centering */
}

.table-view-1400 {
    max-width: 1400px;
    margin-left: 0; /* Ensure left alignment */
    margin-right: auto; /* Prevent centering */
}

/* Left-aligned, responsive up to 1600px */
.table-view-1600 {
    max-width: 1600px;
    width: 100%;
    margin-left: 0; /* keep left aligned */
    margin-right: auto;
}

.no-scrollbar {
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }


.delta-col {
    font-size: 0.7rem !important;
}

td.delta-col .amount,
td.delta-col .amount.child-coa-indent {
    font-size: 0.7rem !important;
    font-style: italic; /* keep the italic if you want */
}

.report-variance-table .delta-pct-good,
.report-variance-table .delta-pct-bad {
    display: inline-block;
    min-width: 6ch;
    padding: 0 0.2rem;
    border-radius: 0.2rem;
    text-align: right;
}

.report-variance-table .delta-pct-good {
    background-color: #d1e7dd;
}

.report-variance-table .delta-pct-bad {
    background-color: #f8d7da;
}

/* Table container */
.table-container {
    width: 75%; /* Adjusted table size to give space for buttons */
    margin-left: 0px;
    margin-right: auto;
}

/* Table container with fixed header for Upload Details table only */
.table-container {
    max-height: 500px; /* Adjust the height as needed */
    overflow-y: auto;
}

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

    .upload-details-table th {
        position: sticky;
        top: 0;
        background: white; /* Set the background color to white to hide content behind the header */
        z-index: 1; /* Ensure the header stays on top */
    }

    .upload-details-table th, .upload-details-table td {
        padding: 10px;
        border: 1px solid #ddd;
        text-align: left;
    }

    .upload-details-table tbody tr:nth-child(even) {
        background-color: #f2f2f2; /* Optional: zebra striping for rows */
    }

.disabled-link {
    opacity: 0.6;
    cursor: not-allowed;
}


/* =====================  Button styles  ======================== */

.cons-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* Adjust width to fill its container if necessary */
    padding: 0.375rem 0.75rem; /* Adjust padding if needed */
    text-align: center; /* Ensure text is centered */
}

.btn-spinner {
    margin-left: 0.5rem; /* Adjust as needed */
    vertical-align: middle;
}

#consFromSubmitButton .btn-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-left: 0;
}

#consFromStatusText {
    flex: 0 1 230px;
    max-width: 230px;
    min-width: 0;
    padding-left: 1px;
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.25;
}

#consFromModal .modal-footer {
    align-items: flex-start;
    flex-wrap: nowrap;
}

#consFromModal .modal-footer button {
    flex: 0 0 auto;
}

.btn-spinner-sm {
    margin-left: -0.2rem; /* Push the spinner to the left of the dropdown arrow */
    margin-right: auto; /* Center the spinner horizontally */
    vertical-align: middle; /* Align vertically in the middle */
    width: 0.9rem; /* Match the size of btn-sm */
    height: 0.9rem; /* Match the size of btn-sm */
    border-width: 0.1rem; /* Adjust the border thickness for a smaller spinner */
    position: relative; /* Allow fine-tuning with top */
    top: -0.2rem; /* Slightly raise the spinner */
    display: inline-block; /* Ensure proper alignment */
}


/* =====================  Tree view styles  ======================== */

/* TreeView Container Styling */
.table-container {
    width: 100%;
    margin: 0;
}

/* TreeView Box Styling */
#tree {
    background-color: inherit; /* Transparent background */
    padding: 0; /* No padding */
    border: none; /* No border */
    width: 100%; /* Full width within the container */
}

/* TreeView Node Hover Styling */
.gj-tree-bootstrap ul li a:hover {
    background-color: #f8f9fa; /* Bootstrap default table-hover color */
    color: #495057; /* Bootstrap default text color */
}

/* Tree Node Icon Spacing */
.gj-tree-bootstrap i {
    margin-right: 8px; /* Consistent spacing for icons */
}

/* Tree Node Styling */
.gj-tree-bootstrap ul li a {
    padding: 5px 10px; /* Improved padding for nodes */
    font-size: 1rem; /* Standard font size */
    border: none; /* No border on nodes */
}

/* Leaf Node Styling */
.gj-tree-bootstrap .gj-tree-leaf {
    color: #6c757d; /* Bootstrap secondary text color */
}

/* Expanded and Collapsed Node Icon Styling */
.gj-tree-bootstrap .gj-tree-expand i,
.gj-tree-bootstrap .gj-tree-collapse i {
    color: #007bff; /* Bootstrap primary color for icons */
}

/* Root Node Styling */
.gj-tree-bootstrap ul > li > a {
    font-weight: bold; /* Bold font for root nodes */
}


/* =====================  Report styles  ======================== */

:root {
    --table-hover-color: #dbeafe;
    --report-table-hover-color: var(--table-hover-color);
}

.table-hover {
    --bs-table-hover-bg: var(--table-hover-color);
}

table tbody tr:hover,
table tbody tr:hover > th,
table tbody tr:hover > td,
.table-hover > tbody > tr:hover > * {
    background-color: var(--table-hover-color);
}

/* Report 01 */

.custom-table {
    width: auto;
    margin-left: 0px;
    margin-right: auto;
    border-collapse: collapse;
    font-size: 0.9em;
}

    .custom-table th, .custom-table td {
        padding: 8px;
    }

    .custom-table tbody tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    .custom-table tbody tr:hover {
        background-color: var(--report-table-hover-color);
    }

    .custom-table th {
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: left;
        color: black;
    }

    .custom-table .amount-header, .custom-table .amount-column {
        text-align: right;
    }

.table-container {
    margin-top: 20px;
    overflow-x: auto;
}

/* Report 02 and 03 */

.text-right {
    text-align: right;
}

/* Dashboard getting started tutorial */
.getting-started-modal .modal-dialog {
    max-width: 500px;
    font-size: 0.98rem;
    transition: margin 0.2s ease-in-out;
}

.getting-started-modal .modal-content {
    border: 1px solid rgba(0, 51, 102, 0.2);
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.18);
}

.getting-started-modal .modal-body {
    min-height: 215px;
}

.getting-started-modal .carousel-item h6 {
    color: #003366;
    font-weight: 700;
    font-size: 1.08rem;
    margin-bottom: 0.75rem;
}

.getting-started-modal .carousel-item p {
    font-size: 0.98rem;
    line-height: 1.45;
}

.getting-started-pos-center {
    margin: 16vh auto auto auto;
}

.getting-started-pos-sidebar {
    margin: 135px auto auto 220px;
}

.getting-started-pos-topbar {
    margin: 140px 32px auto auto;
}

.getting-started-pos-pov {
    margin: 215px auto auto 245px;
}

.getting-started-highlight {
    z-index: 1052 !important;
}

.navbar-icons.getting-started-highlight,
#dashboardPovTutorialTarget.getting-started-highlight,
#dashboardDisplayToggles.getting-started-highlight {
    border-radius: 0.75rem;
}

.navbar-icons.getting-started-highlight::before,
#dashboardPovTutorialTarget.getting-started-highlight::before,
#dashboardDisplayToggles.getting-started-highlight::before {
    content: "";
    position: absolute;
    inset: -12px;
    background-color: #f8f9fa;
    border-radius: 0.75rem;
    z-index: -1;
    box-shadow: 0 0.6rem 1.2rem rgba(0, 0, 0, 0.12);
}

.dashboard-tutorial-inline-target {
    width: fit-content;
}

#sidebarMenu.getting-started-highlight {
    z-index: 1052 !important;
}

@media (max-width: 991.98px) {
    .getting-started-modal .modal-dialog {
        max-width: calc(100% - 2rem);
    }

    .getting-started-pos-center,
    .getting-started-pos-sidebar,
    .getting-started-pos-topbar,
    .getting-started-pos-pov {
        margin: 1.5rem auto;
    }
}

.group-coa-number-width {
    width: 80px;
}

.group-coa-name-width {
    width: 300px;
}

/* =====================  Period styles  ======================== */

.period-index-table tbody tr:hover {
    background-color: var(--table-hover-color);
    cursor: pointer;
}

.period-header-cell,
.period-code-cell {
    position: relative;
}

.period-header-cell {
    padding-left: 20px !important;
}

.period-fiscal-year-row .period-code-cell {
    padding-left: 20px !important;
}

.period-header-cell .report-header-arrow {
    left: 0;
}

.period-arrow {
    margin-right: 0.35rem;
}

.period-child-cell {
    padding-left: 1.5rem;
}

.form-switch .period-closed-switch,
.form-switch .period-fiscal-year-switch {
    background-color: var(--bs-success);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    border-color: var(--bs-success);
}

.form-switch .period-closed-switch:checked,
.form-switch .period-fiscal-year-switch:checked {
    background-color: var(--bs-danger);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    border-color: var(--bs-danger);
}

.form-switch .period-closed-switch:focus,
.form-switch .period-fiscal-year-switch:focus {
    border-color: var(--bs-success);
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

.form-switch .period-closed-switch:checked:focus,
.form-switch .period-fiscal-year-switch:checked:focus {
    border-color: var(--bs-danger);
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

.period-column {
    width: 80px;
    text-align: right;
}

.zebra-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8em;
}

    .zebra-table th, .zebra-table td {
        padding: 8px;
    }

    .zebra-table tbody tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    .zebra-table tbody tr:hover {
        background-color: var(--report-table-hover-color);
    }

    .zebra-table th {
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: left;
        color: black;
    }

.no-border th {
    border: none !important;
}

.bottom-border-only th {
    border: none;
    border-bottom: 1px solid #ddd;
}

.bold-line {
    font-weight: bold;
    border-top: 1px solid #ddd;
}

.brand-color-menu {
    min-width: 268px;
}

.brand-color-grid {
    display: grid;
    grid-template-columns: repeat(10, 22px);
    grid-template-rows: repeat(6, 22px);
    grid-auto-flow: column;
    gap: 4px;
}

.brand-color-swatch,
.brand-color-current {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 1px solid #adb5bd;
    border-radius: 2px;
}

.brand-color-swatch {
    width: 22px;
    height: 22px;
    padding: 0;
}

.brand-color-swatch.is-selected {
    outline: 2px solid #0d6efd;
    outline-offset: 1px;
}


/* hits any conversion-rates row in any table */
.conversion-rates-row td {
    font-size: 0.7rem !important;
}

.export-button-container {
    margin-top: 20px;
}

/* Lines that may or may not have an arrow */
.report-line-indent {
    position: relative; /* Required for absolute positioning of the arrow */
    padding-left: 30px !important; /* Ensure consistent left spacing for text in all lines */
}

.child-group-coa-indent {
    position: relative;
    padding-left: 58px !important;
    font-size: 0.8rem;
}

.child-group-coa-indent .arrow-button {
    left: 30px;
}

.entity-drilldown-indent {
    position: relative;
    padding-left: 76px !important;
    font-size: 0.8rem;
}

.entity-drilldown-indent .arrow-button {
    left: 48px;
}

/* The arrow itself: absolutely positioned so it doesn't shift the text */
.arrow-button {
    position: absolute;
    left: 5px; /* Tweak this to match your desired arrow position */
    top: 50%; /* Vertically center the arrow */
    transform: translateY(-50%);
    color: black;
    background: none; /* If you want a flat button style */
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0;
    line-height: 1;
}

.report-header-arrow-down {
    left: 5px;
    top: calc(50% + 5px);
}

.report-header-arrow-up {
    left: 5px;
    top: calc(50% - 5px);
}

.report-header-arrow:disabled {
    cursor: default;
    opacity: 0.35;
}

/* Make parent rows with expandable children show a pointer cursor */
.planning-table tbody tr:has(.arrow-button) {
    cursor: pointer;
}

.report-mth-table tbody tr:has(.arrow-button) {
    cursor: pointer;
}

.table tbody tr:has(.cons-status-arrow) {
    cursor: pointer;
}

.cons-status-entity-cell {
    position: relative;
}

.cons-status-entity-cell .cons-status-arrow {
    top: 50%;
}

.cons-status-header-cell {
    position: relative;
    padding-left: 20px !important;
}

.cons-status-header-cell .report-header-arrow {
    left: 0;
}

.local-ytd-index-table th,
.local-ytd-index-table td {
    font-size: inherit;
}

.local-ytd-data-period-cell {
    padding-left: 40px !important;
}

.currency-index-table th,
.currency-index-table td {
    font-size: inherit;
}

.currency-period-cell {
    padding-left: 20px !important;
}

/* Extra indent for child rows */
.child-coa-indent {
    padding-left: 40px !important;
    font-size: 0.8rem;
}

.local-account-indent {
    position: relative;
    padding-left: 94px !important;
    font-size: 0.8rem;
    font-style: italic;
}

.local-account-indent .arrow-button {
    left: 66px;
}

tr[class^="child-row-"] .amount {
    font-size: 0.8rem;
}

tr.local-account-row .amount {
    font-style: italic;
}

/* For lines that do NOT have an arrow at all,
   we keep them at 30px left so the text lines up with arrow lines. */
.report-line-indent-no-arrow {
    padding-left: 30px !important;
}

.header-account {
    padding-left: 0;
}



/* Report 03 */
.report-mth-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.8em;
}

    .report-mth-table th,
    .report-mth-table td {
        padding: 8px;
    }
    /* No nth-child(even) rule here */
    .report-mth-table tbody tr:hover {
        background-color: var(--report-table-hover-color);
    }

    .report-mth-table th {
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: left;
        color: black;
    }

.planning-table tbody tr:hover {
    background-color: var(--table-hover-color) !important;
}

#planningTableWrapperPLDetails .planning-table tbody tr:hover,
#planningTableWrapperBSDetails .planning-table tbody tr:hover,
#planningTableWrapperFXDetails .planning-table tbody tr:hover {
    background-color: var(--table-hover-color) !important;
}

#planningTableWrapperPLDetails .planning-table tbody tr:hover > td,
#planningTableWrapperBSDetails .planning-table tbody tr:hover > td,
#planningTableWrapperFXDetails .planning-table tbody tr:hover > td {
    background-color: inherit !important;
}

.planning-table-wrapper {
    max-width: 1600px;
    overflow-x: visible;
    overflow-y: visible;
}

.planning-table-inner {
    --planning-scale: 1;
    --planning-width: 1400px;
    width: var(--planning-width);
}

.planning-table-toolbar {
    display: flex;
    justify-content: flex-start;
    margin: 0 0 .4rem 0;
    width: 100%;
}

.planning-table-toolbar .btn {
    min-width: 2rem;
    line-height: 1;
}

.planning-scalable-table {
    width: 100% !important;
    max-width: none !important;
}

.planning-scalable-table th,
.planning-scalable-table td,
.planning-scalable-table .line-text,
.planning-scalable-table .planning-amount,
.planning-scalable-table .form-control,
.planning-scalable-table .form-control-sm,
.planning-scalable-table input {
    font-size: calc(0.8rem * var(--planning-scale)) !important;
}

.planning-table th,
.planning-table td {
    padding: 1px;
    border: none;
}

.planning-pl-report03-height th,
.planning-pl-report03-height td {
    padding: 8px;
}

.planning-pl-report03-height th {
    padding-top: 12px;
    padding-bottom: 12px;
}

.planning-pl-report03-height input[type="text"] {
    min-height: auto;
    line-height: normal;
}

#planningTableWrapperPLEdit .planning-pl-report03-height th,
#planningTableWrapperPLEdit .planning-pl-report03-height td,
#planningTableWrapperBSEdit .planning-pl-report03-height th,
#planningTableWrapperBSEdit .planning-pl-report03-height td {
    padding-left: 2px;
    padding-right: 2px;
}

#planningTableWrapperPLEdit .planning-pl-report03-height input[type="text"],
#planningTableWrapperBSEdit .planning-pl-report03-height input[type="text"] {
    margin-left: 0;
    width: 100% !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    border-radius: 4px !important;
}

#planningTableWrapperPLEdit .planning-pl-report03-height .current-benchmark-col,
#planningTableWrapperPLDetails .planning-pl-report03-height .current-benchmark-col,
#planningTableWrapperBSEdit .planning-pl-report03-height .current-benchmark-col,
#planningTableWrapperBSDetails .planning-pl-report03-height .current-benchmark-col {
    border-radius: 0 !important;
}

#planningTableWrapperPLEdit .planning-pl-report03-height tbody tr:hover > td,
#planningTableWrapperPLDetails .planning-pl-report03-height tbody tr:hover > td,
#planningTableWrapperBSEdit .planning-pl-report03-height tbody tr:hover > td,
#planningTableWrapperBSDetails .planning-pl-report03-height tbody tr:hover > td {
    background-color: var(--table-hover-color) !important;
}

#planningTableWrapperPLEdit .planning-pl-report03-height tbody tr:hover > td.current-benchmark-col,
#planningTableWrapperPLDetails .planning-pl-report03-height tbody tr:hover > td.current-benchmark-col,
#planningTableWrapperBSEdit .planning-pl-report03-height tbody tr:hover > td.current-benchmark-col,
#planningTableWrapperBSDetails .planning-pl-report03-height tbody tr:hover > td.current-benchmark-col {
    background-color: var(--table-hover-color) !important;
    border-radius: 0 !important;
}

.planning-table .group-coa-name-width,
.planning-table .period-column {
    width: auto !important;
}

.planning-table .child-coa-indent {
    padding-left: 40px !important;
}

.planning-scalable-table .form-control,
.planning-scalable-table .form-control-sm {
    line-height: 1.2;
}



.report-table-scroll {
    max-width: 1600px;
    width: 100%;
    margin: 0;
    overflow-x: visible;
    overflow-y: visible;
}

.report-table-scroll thead.sticky-top {
    position: sticky;
    top: 0;
    z-index: 1031;
}

.report-table-scroll thead.sticky-top th {
    background-color: #fff;
}

.report-table-scroll thead.sticky-top tr:only-child th {
    position: sticky;
    top: 0;
    z-index: 31;
}

.sticky-table-scroll {
    max-width: 1600px;
    width: 100%;
    margin-left: 0;
    margin-right: auto;
    overflow-x: visible;
    overflow-y: visible;
}

.sticky-table-scroll thead.sticky-top {
    position: sticky;
    top: 0;
    z-index: 1031;
}

.sticky-table-scroll thead.sticky-top th {
    background-color: #fff;
}

/* Report 11 horizontal scroll helpers */
.horizontal-scroll {
    overflow-x: auto;
    width: 100%;
}

.report11-table th,
.report11-table td {
    white-space: nowrap; /* prevent wrapping in many entity columns */
}

.report-mth-table.report-matched-column-widths {
    width: calc(100% * (330 + 80 * var(--report-number-column-count)) / 890);
}

.report12-table th,
.report12-table td {
    white-space: nowrap; /* prevent wrapping in many entity columns */
}


/* =====================  Dashboard styles  ======================== */

/* Utility widths for left-aligned rows; pick one in the view */
.dashboard-width-1000 {
    max-width: 1000px;
    width: 100%;
    margin-left: 0;
    margin-right: auto;
}

.dashboard-width-1200 {
    max-width: 1200px;
    width: 100%;
    margin-left: 0;
    margin-right: auto;
}

.dashboard-width-1400 {
    max-width: 1400px;
    width: 100%;
    margin-left: 0;
    margin-right: auto;
}

.dashboard-width-1600 {
    max-width: 1600px;
    width: 100%;
    margin-left: 0;
    margin-right: auto;
}

/* Keep four columns; container width is governed by the utility class above */
.dashboard-section {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

/* Fix card width so grid does not stretch them */
.dashboard-card {
    width: 260px; /* pick a consistent width */
    min-width: 240px;
    max-width: 260px;
    margin-bottom: 0;
}

.dashboard-card-link {
    cursor: pointer;
}

@media (max-width: 1200px) {
    .dashboard-section {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}

.card-header .header-actions {
    float: right;
    display: inline-flex;
    gap: 8px;
}

/* Header gear: make it look like just a white gear on the blue header */
.kpi-gear {
    background: transparent !important;
    border: none !important;
    padding: 4px !important;
    color: #fff !important; /* white gear on .bg-standard */
    line-height: 1;
    cursor: pointer;
}

    .kpi-gear:focus,
    .kpi-gear:hover {
        color: #fff !important; /* keep white on hover/focus */
        opacity: .9; /* subtle feedback */
    }

.kpi-value {
    color: black;
}

.dot {
    vertical-align: middle;
}

/* Custom card adjustments */
.custom-card {
    height: 350px; /* Adjust the height to your preference */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow effect */
    transition: transform 0.2s, box-shadow 0.2s; /* Smooth transition for hover effect */
}

    .custom-card:hover {
        transform: translateY(-5px); /* Slightly lift the card on hover */
        box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Increase shadow intensity on hover */
    }

.container-fluid .row {
    justify-content: flex-start; /* Align cards to the left */
    margin-left: 0;
}


/* =====================  Cons Dashboard styles  ======================== */

.cons-dashboard-width-800 {
    max-width: 800px;
    width: 100%;
    margin-left: 0;
    margin-right: auto;
}

.cons-dashboard-width-1000 {
    max-width: 1000px;
    width: 100%;
    margin-left: 0;
    margin-right: auto;
}

.cons-dashboard-width-1200 {
    max-width: 1200px;
    width: 100%;
    margin-left: 0;
    margin-right: auto;
}

.cons-dashboard-width-1400 {
    max-width: 1400px;
    width: 100%;
    margin-left: 0;
    margin-right: auto;
}

.cons-dashboard-section {
    display: grid;
    grid-template-columns: repeat(3, 260px);
    gap: 16px;
    align-items: stretch;
}

@media (max-width: 1000px) {
    .cons-dashboard-section {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}

.cons-dashboard-card {
    width: 260px; /* pick a consistent width */
    min-width: 240px;
    max-width: 260px;
    margin-bottom: 0;
}

.cons-dashboard-row {
    gap: 1rem;
    margin-bottom: 0;
    flex-wrap: wrap;
}

.cons-dashboard-dot {
    vertical-align: middle;
}



/* =====================  Planning section styles  ======================== */

/* Planning section – shared “Excel‐style” table for all Planning Edit views */
.excel-table {
    border-collapse: collapse;
    width: 100%;
    background-color: inherit; /* inherit whatever the <body> is using */
    font-size: 0.7rem; /* slightly smaller overall text */
}

    .excel-table th,
    .excel-table td {
        border: none;
        padding: 4px;
        vertical-align: middle;
    }

    /* Inputs: no arrows, tight height */
    .excel-table input {
        border: none;
        width: 100%;
        box-sizing: border-box;
        font-size: inherit;
        padding: 0;
        height: 1.4rem;
        -moz-appearance: textfield;
    }

        .excel-table input::-webkit-inner-spin-button,
        .excel-table input::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        .excel-table input:focus {
            outline: 2px solid #4a90e2;
        }

.planning-table input[type="text"] {
    overflow: hidden;
    white-space: nowrap;
    direction: ltr;
    margin-left: 1px;
    width: calc(100% - 1px) !important;
    padding: 0 4px 0 0 !important;
    border: 1px dotted #bdbdbd !important;
    border-radius: 0 !important;
    min-height: 1.35rem;
    box-shadow: none !important;
}

.planning-table input[type="text"].planning-locked-cell,
.planning-table input[type="text"].planning-locked-cell:focus,
.planning-table input[type="text"][readonly].planning-locked-cell,
.planning-table input[type="text"][readonly].planning-locked-cell:focus {
    background-color: #e9ecef !important;
    cursor: default !important;
}


    /* make COA # and Account columns even smaller */
    .excel-table th:nth-child(1),
    .excel-table td:nth-child(1),
    .excel-table th:nth-child(2),
    .excel-table td:nth-child(2) {
        font-size: 0.8rem;
    }

    /* force all month columns to 0.7rem */
    #planningTable th:nth-child(n+2),
    #planningTable td:nth-child(n+2) {
        font-size: 0.8rem;
    }

    /* make all of the “month” and “total” columns a bit smaller */
    .excel-table th:nth-child(n+3),
    .excel-table td:nth-child(n+3) {
        font-size: 0.8rem;
    }


/* highlight for multi-selected cells */
.selected-cell {
    background-color: #cce5ff !important;
}

#planningTable input[type="text"].selected-cell:focus {
    caret-color: auto !important;
}

/* default (DB‐loaded) values in black */
#planningTable input[type="text"] {
    color: black;
}
/* anything the user has changed (draft) shows in blue */
#planningTable input[type="text"].draft {
    color: blue;
}

/* Keep read-only table rows same height as Edit inputs */
.excel-table .ro-val {
    display: inline-block;
    height: 1.4rem;
    line-height: 1.4rem;
    width: 100%;
}


/* =====================  Journal styles  ======================== */

/* Hide the datalist dropdown indicator on CO    background-color: var(--table-hover-color);

.js-coa-typeahead::-webkit-calendar-picker-indicator {
    display: none !important;
}

.js-coa-typeahead {
    -webkit-appearance: textfield;
    appearance: textfield;
    background-image: none !important;
}


/* Hover highlight for clickable rows */
tbody tr[data-id]:hover {
    background-color: var(--table-hover-color);
}


/* =====================  Support styles  ======================== */

/* Fixed-size Support cards */
.support-card {
    width: 300px; /* adjust as needed */
    min-width: 300px;
    max-width: 300px !important;
    height: 180px; /* adjust as needed */
    display: flex;
    flex-direction: column;

    transition: transform .08s ease, box-shadow .2s ease;
    cursor: pointer;
}

    .support-card .card-body {
        overflow: hidden; /* prevent content from growing the card */
    }

    .support-card .card-text {
        display: -webkit-box; /* clamp lines to avoid overflow */
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .support-card .card-footer {
        margin-top: auto; /* keep footer aligned to bottom */
        padding: 0.8rem 0.8rem; /* smaller vertical and horizontal padding */
        font-size: 0.85rem; /* optional: smaller font */
        line-height: 1.2; /* optional: tighter line spacing */
    }

    .support-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    }



/* =====================  Other styles  ======================== */

/* Section HR styling */
.section-hr {
    width: 100%;
    max-width: 800px; /* Adjust as needed */
    margin-left: 0;
    margin-right: auto;
    border: none;
    border-top: 1px solid #6c757d; /* Darker gray for better visibility */
    background-color: transparent;
    height: 1px;
}


/* Standard dark blue color */
.bg-standard {
    background-color: #003366 !important;
}

.border-standard {
    border: 1px solid #003366 !important;
}


/* Ensure all dropdowns appear above any sticky-top elements */
.dropdown-menu {
    z-index: 2000 !important;
}



/* Adjust small, muted text for better readability */
.text-muted small {
    line-height: 1.4;
}

/* Make the Excel Add-in buttons the same width and neatly sized */
.uniform-btn {
    width: 150px; /* both buttons same width */
    min-width: 150px;
    text-align: center;
    font-size: 0.85rem; /* slightly smaller font for compact look */
    padding: 4px 10px; /* tighter vertical padding */
    line-height: 1.2;
}

/* File upload overlay to make the entire area clickable */
.file-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

/* Settings (logo upload): keep arrow cursor over the whole readonly input, not a hand on the overlay */
#logoUploadForm .file-overlay,
#logoUploadForm #logoFileDisplay {
    cursor: default !important;
}

/* Currency Details style */
.text-right {
    text-align: right;
}