/*
|--------------------------------------------------------------------------
| Trulli visual theme
|--------------------------------------------------------------------------
| Palette source: TRULLI_LOGO_COLOR_AUDIT_RESCAN.csv
| Blue  #1C9AD1 · Gold #E5BB69 · Red #ED252F · Green #1BA64B
| Design intent: keep the app professional with black/gray readability,
| while using logo colors as soft accents, dividers, highlights, and focus states.
*/
:root {
    --fcc-sidebar-width: 280px;
    --fcc-topbar-height: 58px;

    --fcc-brand-blue: #1C9AD1;
    --fcc-brand-blue-rgb: 28, 154, 209;
    --fcc-brand-gold: #E5BB69;
    --fcc-brand-gold-rgb: 229, 187, 105;
    --fcc-brand-red: #ED252F;
    --fcc-brand-red-rgb: 237, 37, 47;
    --fcc-brand-green: #1BA64B;
    --fcc-brand-green-rgb: 27, 166, 75;

    --fcc-ink: #162331;
    --fcc-ink-soft: #314457;
    --fcc-muted: #657486;
    --fcc-line: rgba(22, 35, 49, .10);
    --fcc-soft-blue: rgba(var(--fcc-brand-blue-rgb), .075);
    --fcc-soft-gold: rgba(var(--fcc-brand-gold-rgb), .18);
    --fcc-soft-green: rgba(var(--fcc-brand-green-rgb), .08);
    --fcc-soft-red: rgba(var(--fcc-brand-red-rgb), .075);

    --tblr-primary: var(--fcc-brand-blue);
    --tblr-primary-rgb: var(--fcc-brand-blue-rgb);
    --tblr-link-color: var(--fcc-brand-blue);
    --tblr-link-hover-color: #147cad;
}

body {
    color: var(--fcc-ink);
    background:
        radial-gradient(circle at top left, rgba(var(--fcc-brand-blue-rgb), .055), transparent 30rem),
        linear-gradient(180deg, rgba(var(--fcc-brand-gold-rgb), .055), transparent 18rem),
        #f7f9fb;
}

p, .form-hint, .text-secondary, .nav-link-description, .small {
    color: var(--fcc-muted) !important;
}

a {
    color: var(--fcc-brand-blue);
}

a:hover {
    color: #147cad;
}

.page-title, .card-title, h1, h2, h3, h4, h5, h6 {
    color: var(--fcc-ink);
    letter-spacing: -.01em;
}

.page-pretitle {
    color: var(--fcc-brand-blue);
    font-weight: 800;
    letter-spacing: .08em;
}

.page-title {
    position: relative;
    font-weight: 800;
}

.page-title::after {
    content: '';
    display: block;
    width: 54px;
    height: 3px;
    border-radius: 999px;
    margin-top: .45rem;
    background: linear-gradient(90deg, var(--fcc-brand-blue), var(--fcc-brand-gold), var(--fcc-brand-green));
}

.card {
    border-color: var(--fcc-line);
    box-shadow: 0 .35rem 1.1rem rgba(22, 35, 49, .045);
}

.card-header {
    background: linear-gradient(90deg, rgba(var(--fcc-brand-blue-rgb), .045), rgba(var(--fcc-brand-gold-rgb), .055));
    border-bottom-color: var(--fcc-line);
}

.card-title {
    font-weight: 750;
}

.btn-primary,
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--fcc-brand-blue);
    border-color: var(--fcc-brand-blue);
}

.btn-outline-primary {
    color: var(--fcc-brand-blue);
    border-color: rgba(var(--fcc-brand-blue-rgb), .45);
}

.btn:focus, .form-control:focus, .form-select:focus {
    border-color: rgba(var(--fcc-brand-blue-rgb), .72);
    box-shadow: 0 0 0 .2rem rgba(var(--fcc-brand-blue-rgb), .13);
}

.table thead th {
    color: var(--fcc-ink-soft);
    background: linear-gradient(180deg, rgba(var(--fcc-brand-blue-rgb), .045), rgba(var(--fcc-brand-gold-rgb), .045));
    border-bottom-color: rgba(var(--fcc-brand-blue-rgb), .18);
}

.badge.bg-primary, .badge.text-bg-primary {
    background-color: var(--fcc-brand-blue) !important;
}

.alert-info {
    color: #0d5f85;
    background: rgba(var(--fcc-brand-blue-rgb), .095);
    border-color: rgba(var(--fcc-brand-blue-rgb), .22);
}

.alert-success {
    background: rgba(var(--fcc-brand-green-rgb), .10);
    border-color: rgba(var(--fcc-brand-green-rgb), .22);
}

.alert-warning {
    background: rgba(var(--fcc-brand-gold-rgb), .18);
    border-color: rgba(var(--fcc-brand-gold-rgb), .34);
}

.alert-danger {
    background: rgba(var(--fcc-brand-red-rgb), .08);
    border-color: rgba(var(--fcc-brand-red-rgb), .22);
}

.fcc-app-shell {
    min-height: 100vh;
}

.fcc-topbar {
    min-height: var(--fcc-topbar-height);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.fcc-topbar-inner {
    min-height: var(--fcc-topbar-height);
}

.fcc-brand {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
    text-decoration: none;
}

.fcc-brand-logo {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.fcc-brand-mark {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .75rem;
    background: var(--tblr-primary);
    color: #fff;
    font-weight: 800;
    letter-spacing: .03em;
}

.fcc-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.fcc-brand-title {
    font-weight: 800;
    color: var(--tblr-body-color);
}

.fcc-brand-subtitle {
    font-size: .72rem;
    color: var(--tblr-secondary);
    font-weight: 500;
}

.fcc-company-form {
    min-width: min(360px, 44vw);
}

.fcc-sidebar {
    position: fixed;
    top: var(--fcc-topbar-height);
    left: 0;
    bottom: 0;
    width: var(--fcc-sidebar-width);
    border-right: 1px solid var(--tblr-border-color);
    background: var(--tblr-bg-surface);
    z-index: 1020;
    flex-direction: column;
}

.fcc-sidebar-scroll {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: .85rem .75rem 1.25rem;
}

.fcc-sidebar-nav {
    gap: .08rem;
}

.fcc-sidebar-nav .nav-link {
    border-radius: var(--tblr-border-radius);
    padding: .55rem .65rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.fcc-sidebar-nav .nav-link.active,
.fcc-sidebar-nav .nav-link:hover,
.fcc-sidebar-nav .nav-link:focus {
    background: var(--tblr-bg-surface-secondary);
}

.fcc-sidebar-nav .nav-link.active .nav-link-title {
    color: var(--tblr-primary);
    font-weight: 700;
}

.fcc-sidebar-nav .nav-link-description {
    font-size: .72rem;
    color: var(--tblr-secondary);
    line-height: 1.15;
    margin-top: .08rem;
}

.fcc-sidebar-section {
    margin: 1rem .65rem .35rem;
    color: var(--tblr-secondary);
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.fcc-sidebar-company {
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius-lg);
    padding: .75rem;
    margin-bottom: .75rem;
    background: var(--tblr-bg-surface-secondary);
}

.fcc-menu-canvas {
    --tblr-offcanvas-width: min(340px, 92vw);
}

.fcc-menu-canvas .offcanvas-body .fcc-sidebar-scroll {
    height: auto;
    max-height: calc(100vh - 76px);
}

.fcc-page-wrapper {
    min-width: 0;
}

.fcc-body-container {
    max-width: none;
}

@media (min-width: 992px) {
    .fcc-page-wrapper {
        margin-left: var(--fcc-sidebar-width);
    }
    .fcc-page-wrapper .page-header,
    .fcc-page-wrapper .page-body,
    .fcc-page-wrapper .footer {
        padding-left: .25rem;
        padding-right: .25rem;
    }

    .fcc-sidebar,
    .fcc-page-wrapper {
        transition: margin-left .18s ease, transform .18s ease;
        will-change: margin-left, transform;
    }

    body.fcc-sidebar-collapsed .fcc-sidebar,
    .fcc-sidebar.fcc-sidebar-is-collapsed {
        transform: translateX(calc(-1 * var(--fcc-sidebar-width)));
        pointer-events: none;
    }

    body.fcc-sidebar-collapsed .fcc-page-wrapper,
    .fcc-page-wrapper.fcc-page-wrapper-sidebar-collapsed {
        margin-left: 0;
    }
}

.fcc-sidebar-toggle {
    white-space: nowrap;
}

.fcc-sidebar-toggle-icon {
    font-size: 1rem;
    line-height: 1;
}

@media (max-width: 991.98px) {
    .fcc-company-form {
        min-width: min(250px, 48vw);
    }
    .fcc-brand-subtitle {
        display: none;
    }
    .fcc-page-wrapper .page-header .btn-list .btn:first-child {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .fcc-brand-title {
        font-size: .95rem;
    }
    .fcc-brand-mark,
    .fcc-brand-logo {
        width: 34px;
        height: 34px;
    }
    .fcc-company-form {
        min-width: 44vw;
    }
    .fcc-topbar-actions {
        gap: .35rem !important;
    }
}

.table-responsive { min-height: .01%; }
.form-hint { margin-top: .35rem; }
.recipe-line-grid {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) 100px 90px minmax(160px, 1.2fr);
    gap: .5rem;
    align-items: start;
    margin-bottom: .5rem;
}
.recipe-tab-card .nav-tabs .nav-link {
    cursor: pointer;
}
.recipe-line-card {
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius-lg);
    padding: .875rem;
    margin-bottom: .75rem;
    background: var(--tblr-bg-surface-secondary);
}
.recipe-line-card:last-child {
    margin-bottom: 0;
}
.cost-small { font-size: .78rem; color: var(--tblr-secondary); }
.text-nowrap-table th { white-space: nowrap; }
@media (max-width: 992px) {
    .recipe-line-grid { grid-template-columns: 1fr; }
    .recipe-line-card {
        padding: .75rem;
    }
}

.card-link { text-decoration: none; color: inherit; transition: transform .08s ease, box-shadow .08s ease; }
.card-link:hover { text-decoration: none; color: inherit; transform: translateY(-1px); box-shadow: var(--tblr-box-shadow-card); }

.print-sheet {
    background: #fff;
    color: #111;
}
.print-sheet h1 {
    font-size: 1.35rem;
    margin-bottom: .35rem;
}
.print-sheet h3 {
    font-size: 1rem;
}
.printable-field .form-label {
    font-weight: 400;
}
.printable-input,
.printable-cell-input {
    background: #fff;
}
.printable-table th,
.printable-table td {
    vertical-align: middle;
}
.print-signature-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.25rem;
    font-weight: 600;
}
.print-signature-row span {
    border-top: 1px solid #333;
    padding-top: .35rem;
}

@media print {
    @page {
        size: letter;
        margin: .45in;
    }
    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 10.5pt;
    }
    .page-body,
    .container-xl,
    .card,
    .card-body {
        margin: 0 !important;
        padding: 0 !important;
        max-width: none !important;
        width: 100% !important;
        box-shadow: none !important;
        border: 0 !important;
    }
    .alert,
    .btn,
    .nav-tabs,
    .card-header.d-print-none,
    .d-print-none {
        display: none !important;
    }
    .tab-pane {
        display: none !important;
    }
    .tab-pane.active {
        display: block !important;
    }
    .print-sheet {
        page-break-after: auto;
    }
    .print-sheet h1 {
        font-size: 18pt;
        border-bottom: 2px solid #000;
        padding-bottom: 6px;
        margin-bottom: 10px;
    }
    .print-sheet p,
    .form-hint,
    .text-secondary {
        color: #333 !important;
    }
    .printable-input,
    .printable-cell-input,
    .form-control,
    .form-select,
    textarea {
        border: 1px solid #555 !important;
        min-height: 28px;
        color: #000 !important;
        background: #fff !important;
        box-shadow: none !important;
    }
    textarea.printable-input,
    textarea.form-control {
        min-height: 80px;
    }
    .printable-table {
        width: 100% !important;
        border-collapse: collapse !important;
        page-break-inside: auto;
    }
    .printable-table th,
    .printable-table td {
        border: 1px solid #333 !important;
        padding: 4px !important;
    }
    .printable-table tr {
        page-break-inside: avoid;
    }
    .print-signature-row {
        page-break-inside: avoid;
    }
}

.fcc-autocomplete-wrap {
    position: relative;
}
.fcc-autocomplete-menu {
    position: absolute;
    z-index: 1040;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    background: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    box-shadow: var(--tblr-box-shadow-dropdown);
}
.fcc-autocomplete-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .1rem;
    padding: .55rem .75rem;
    border: 0;
    background: transparent;
    text-align: left;
    color: inherit;
}
.fcc-autocomplete-item:hover,
.fcc-autocomplete-item:focus,
.fcc-autocomplete-item.active {
    background: var(--tblr-bg-surface-secondary);
    outline: none;
}
.fcc-autocomplete-item small,
.fcc-autocomplete-empty {
    color: var(--tblr-secondary);
    font-size: .78rem;
}
.fcc-autocomplete-empty {
    padding: .65rem .75rem;
}
.purchase-line-card {
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius-lg);
    padding: .875rem;
    margin-bottom: .75rem;
    background: var(--tblr-bg-surface-secondary);
}
.chart-wrap {
    min-height: 320px;
}
.price-stat {
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius-lg);
    padding: .875rem;
    background: var(--tblr-bg-surface-secondary);
}
@media print {
    .fcc-autocomplete-menu { display: none !important; }
}

.invoice-print-sheet {
    background: #fff;
    color: #111;
}
.invoice-top-row {
    display: grid;
    grid-template-columns: 1.5fr .9fr;
    gap: 2rem;
    align-items: start;
    margin-bottom: 1.5rem;
}
.invoice-brand-name {
    font-size: 1.45rem;
    font-weight: 700;
    margin-bottom: .35rem;
}
.invoice-title-box {
    text-align: right;
}
.invoice-title {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: .08em;
    margin-bottom: .5rem;
}
.invoice-meta-table {
    margin-left: auto;
    min-width: 280px;
    border-collapse: collapse;
}
.invoice-meta-table th,
.invoice-meta-table td {
    border: 1px solid var(--tblr-border-color);
    padding: .35rem .5rem;
}
.invoice-meta-table th {
    text-align: left;
    background: var(--tblr-bg-surface-secondary);
    width: 42%;
}
.invoice-party-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.invoice-party-box,
.invoice-notes-box {
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius-lg);
    padding: .85rem;
    min-height: 105px;
}
.invoice-party-title {
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .72rem;
    color: var(--tblr-secondary);
    font-weight: 700;
    margin-bottom: .45rem;
}
.invoice-lines-table th {
    background: var(--tblr-bg-surface-secondary);
}
.invoice-summary-row {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 1rem;
    align-items: start;
    margin-top: 1rem;
}
.invoice-total-table {
    width: 100%;
    border-collapse: collapse;
}
.invoice-total-table th,
.invoice-total-table td {
    border: 1px solid var(--tblr-border-color);
    padding: .5rem .65rem;
}
.invoice-total-table th {
    background: var(--tblr-bg-surface-secondary);
    text-align: left;
}
.invoice-total-table td {
    text-align: right;
}
.invoice-grand-total th,
.invoice-grand-total td {
    font-size: 1.1rem;
    font-weight: 800;
}
.invoice-footer-note {
    border-top: 1px solid var(--tblr-border-color);
    margin-top: 2rem;
    padding-top: .75rem;
    text-align: center;
    color: var(--tblr-secondary);
}
@media (max-width: 768px) {
    .invoice-top-row,
    .invoice-party-grid,
    .invoice-summary-row {
        grid-template-columns: 1fr;
    }
    .invoice-title-box {
        text-align: left;
    }
    .invoice-meta-table {
        margin-left: 0;
        width: 100%;
    }
}
@media print {
    .invoice-print-card,
    .invoice-print-sheet {
        box-shadow: none !important;
        border: 0 !important;
    }
    .invoice-top-row {
        grid-template-columns: 1.5fr .9fr !important;
    }
    .invoice-party-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    .invoice-summary-row {
        grid-template-columns: 1fr 330px !important;
    }
    .invoice-meta-table th,
    .invoice-meta-table td,
    .invoice-party-box,
    .invoice-notes-box,
    .invoice-lines-table th,
    .invoice-lines-table td,
    .invoice-total-table th,
    .invoice-total-table td {
        border-color: #333 !important;
    }
    .invoice-title {
        color: #000 !important;
    }
    .invoice-footer-note {
        color: #333 !important;
    }
}

/* Compact helper text: long field hints are converted to clickable info icons on load. */
.fcc-info-button {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
}
.fcc-info-icon {
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
}
.fcc-inline-info-button {
    margin-left: .4rem;
    width: 1.45rem;
    height: 1.45rem;
    padding: 0;
    vertical-align: middle;
}
.fcc-field-label-row {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    margin-bottom: .35rem;
}
.fcc-label-with-info {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}
.fcc-help-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: .75rem;
}
@media (max-width: 575.98px) {
    .fcc-help-row { justify-content: stretch; }
    .fcc-help-row .fcc-info-button { width: 100%; justify-content: center; }
}

/* Custom info modal: intentionally independent from Bootstrap/Tabler modal JavaScript. */
.fcc-info-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.fcc-info-modal.d-none {
    display: none !important;
}
.fcc-info-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
}
.fcc-info-modal-dialog {
    position: relative;
    width: min(94vw, 560px);
    max-height: 88vh;
    z-index: 1;
}
.fcc-info-modal-card {
    background: var(--tblr-bg-surface, #fff);
    color: var(--tblr-body-color, #1f2937);
    border-radius: var(--tblr-border-radius-lg, .5rem);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .2);
    overflow: hidden;
    border: 1px solid var(--tblr-border-color, rgba(98, 105, 118, .16));
}
.fcc-info-modal-header,
.fcc-info-modal-footer {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem;
}
.fcc-info-modal-header {
    justify-content: space-between;
    border-bottom: 1px solid var(--tblr-border-color, rgba(98, 105, 118, .16));
}
.fcc-info-modal-footer {
    justify-content: flex-end;
    border-top: 1px solid var(--tblr-border-color, rgba(98, 105, 118, .16));
}
.fcc-info-modal-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}
.fcc-info-modal-body {
    padding: 1rem;
    max-height: 60vh;
    overflow: auto;
}
#fccInfoModalBody {
    white-space: pre-line;
}
body.fcc-info-modal-open {
    overflow: hidden;
}
@media (max-width: 575.98px) {
    .fcc-info-modal { align-items: flex-end; padding: .75rem; }
    .fcc-info-modal-dialog { width: 100%; max-height: 92vh; }
    .fcc-info-modal-card { border-radius: .75rem .75rem .35rem .35rem; }
    .fcc-info-modal-footer .btn { width: 100%; }
}

/* Trulli brand accents for shell, navigation, and operational cards. */
.fcc-topbar {
    background: rgba(255, 255, 255, .96) !important;
    backdrop-filter: saturate(145%) blur(10px);
    border-bottom: 1px solid rgba(var(--fcc-brand-blue-rgb), .14) !important;
    box-shadow: 0 .15rem .75rem rgba(22, 35, 49, .045);
}

.fcc-topbar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg,
        var(--fcc-brand-blue) 0%,
        var(--fcc-brand-gold) 38%,
        var(--fcc-brand-green) 70%,
        var(--fcc-brand-red) 100%);
    opacity: .55;
}

.fcc-brand-title {
    color: var(--fcc-ink);
    font-weight: 850;
}

.fcc-brand-subtitle {
    color: var(--fcc-brand-blue) !important;
    letter-spacing: .03em;
}

.fcc-brand-logo {
    filter: drop-shadow(0 .18rem .32rem rgba(22, 35, 49, .10));
}

.fcc-brand-mark {
    background: linear-gradient(135deg, var(--fcc-brand-blue), #147cad);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 .35rem .8rem rgba(var(--fcc-brand-blue-rgb), .22);
}

.fcc-sidebar {
    background:
        linear-gradient(180deg, rgba(var(--fcc-brand-blue-rgb), .035), transparent 20rem),
        var(--tblr-bg-surface);
    border-right-color: rgba(var(--fcc-brand-blue-rgb), .14);
}

.fcc-sidebar-section {
    color: var(--fcc-ink-soft);
    border-top: 1px solid rgba(var(--fcc-brand-gold-rgb), .30);
    padding-top: .65rem;
}

.fcc-sidebar-nav .nav-link {
    border-left: 3px solid transparent;
    transition: background-color .12s ease, border-color .12s ease, transform .12s ease;
}

.fcc-sidebar-nav .nav-link:hover,
.fcc-sidebar-nav .nav-link:focus {
    background: var(--fcc-soft-blue);
    border-left-color: rgba(var(--fcc-brand-blue-rgb), .45);
}

.fcc-sidebar-nav .nav-link.active {
    background: linear-gradient(90deg, rgba(var(--fcc-brand-blue-rgb), .12), rgba(var(--fcc-brand-gold-rgb), .08));
    border-left-color: var(--fcc-brand-blue);
}

.fcc-sidebar-nav .nav-link.active .nav-link-title {
    color: #126f9c;
}

.fcc-sidebar-company {
    background: linear-gradient(135deg, var(--fcc-soft-blue), rgba(var(--fcc-brand-gold-rgb), .11));
    border-color: rgba(var(--fcc-brand-blue-rgb), .16);
}

.card-link:hover {
    border-color: rgba(var(--fcc-brand-blue-rgb), .22);
    box-shadow: 0 .55rem 1.35rem rgba(var(--fcc-brand-blue-rgb), .10);
}

.price-stat,
.recipe-line-card,
.purchase-line-card {
    background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(var(--fcc-brand-blue-rgb), .035));
    border-color: rgba(var(--fcc-brand-blue-rgb), .12);
}

.fcc-autocomplete-menu {
    border-color: rgba(var(--fcc-brand-blue-rgb), .22);
    box-shadow: 0 .75rem 1.75rem rgba(22, 35, 49, .11);
}

.fcc-autocomplete-item:hover,
.fcc-autocomplete-item:focus,
.fcc-autocomplete-item.active {
    background: linear-gradient(90deg, var(--fcc-soft-blue), rgba(var(--fcc-brand-gold-rgb), .08));
}

.fcc-info-icon {
    background: rgba(var(--fcc-brand-blue-rgb), .10);
    color: var(--fcc-brand-blue);
    border: 1px solid rgba(var(--fcc-brand-blue-rgb), .24);
}

.fcc-info-button:hover .fcc-info-icon,
.fcc-inline-info-button:hover .fcc-info-icon {
    background: var(--fcc-brand-blue);
    color: #fff;
}

.fcc-info-modal-card {
    border-color: rgba(var(--fcc-brand-blue-rgb), .18);
    box-shadow: 0 1.2rem 3.2rem rgba(22, 35, 49, .22);
}

.fcc-info-modal-header {
    background: linear-gradient(90deg, rgba(var(--fcc-brand-blue-rgb), .10), rgba(var(--fcc-brand-gold-rgb), .13));
}

.fcc-info-modal-title {
    color: var(--fcc-ink);
    font-weight: 800;
}

.invoice-title,
.invoice-brand-name,
.print-sheet h1 {
    color: var(--fcc-ink);
}

.invoice-title::after,
.print-sheet h1::after {
    content: '';
    display: block;
    width: 62px;
    height: 3px;
    margin-top: .35rem;
    margin-left: auto;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--fcc-brand-blue), var(--fcc-brand-gold));
}

@media (max-width: 768px) {
    .invoice-title::after { margin-left: 0; }
}

@media print {
    body,
    .card,
    .card-header,
    .print-sheet,
    .invoice-print-sheet {
        background: #fff !important;
    }
    .page-title::after,
    .fcc-topbar::after,
    .invoice-title::after,
    .print-sheet h1::after {
        display: none !important;
    }
}

/*
|--------------------------------------------------------------------------
| Blue-led Trulli refinement
|--------------------------------------------------------------------------
| User preference: make the interface feel primarily based on the logo blue.
| Black and gray stay as the main reading colors; blue carries titles,
| labels, active states, table headers, and subtle card highlights.
| Gold/green/red are now reserved for delicate accents and status context.
*/
@media screen {
    :root {
        --fcc-brand-blue-deep: #126f9c;
        --fcc-brand-blue-dark: #0e587d;
        --fcc-brand-blue-soft: rgba(var(--fcc-brand-blue-rgb), .075);
        --fcc-brand-blue-softer: rgba(var(--fcc-brand-blue-rgb), .045);
    }

    .page-title,
    .card-title,
    .card-header .card-title,
    .card-title a,
    .modal-title,
    .invoice-brand-name,
    .invoice-title,
    .print-sheet h1,
    .print-sheet h3 {
        color: var(--fcc-brand-blue-deep) !important;
    }

    h1, h2, h3 {
        color: var(--fcc-brand-blue-deep);
    }

    h4, h5, h6 {
        color: var(--fcc-ink-soft);
    }

    .page-pretitle,
    .text-primary,
    .link-primary,
    .nav-tabs .nav-link.active,
    .nav-pills .nav-link.active,
    .dropdown-item.active,
    .dropdown-item:active {
        color: var(--fcc-brand-blue-deep) !important;
    }

    .page-title::after {
        background: linear-gradient(90deg,
            var(--fcc-brand-blue) 0%,
            var(--fcc-brand-blue-deep) 72%,
            rgba(var(--fcc-brand-gold-rgb), .85) 100%);
        opacity: .95;
    }

    .card {
        border-color: rgba(var(--fcc-brand-blue-rgb), .12);
        box-shadow: 0 .4rem 1.15rem rgba(18, 111, 156, .055);
    }

    .card-header {
        background: linear-gradient(90deg,
            rgba(var(--fcc-brand-blue-rgb), .095),
            rgba(var(--fcc-brand-blue-rgb), .032));
        border-bottom-color: rgba(var(--fcc-brand-blue-rgb), .16);
        position: relative;
    }

    .card-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg,
            var(--fcc-brand-blue),
            rgba(var(--fcc-brand-blue-rgb), .38),
            transparent);
        border-radius: var(--tblr-border-radius-lg) var(--tblr-border-radius-lg) 0 0;
    }

    .form-label,
    label.form-label,
    .printable-field .form-label,
    .fcc-field-label-row .form-label,
    .fcc-label-with-info .form-label {
        color: var(--fcc-brand-blue-deep) !important;
        font-weight: 400;
        letter-spacing: .002em;
    }

    .form-check-label strong,
    .invoice-party-title {
        color: var(--fcc-brand-blue-deep) !important;
        font-weight: 600;
        letter-spacing: .003em;
    }

    .form-control,
    .form-select,
    textarea.form-control {
        border-color: rgba(18, 111, 156, .18);
    }

    .form-control:hover,
    .form-select:hover,
    textarea.form-control:hover {
        border-color: rgba(var(--fcc-brand-blue-rgb), .34);
    }

    .form-hint,
    .text-secondary,
    .small,
    p {
        color: var(--fcc-muted) !important;
    }

    .table thead th,
    .invoice-lines-table th,
    .invoice-total-table th,
    .invoice-meta-table th {
        color: var(--fcc-brand-blue-deep) !important;
        background: linear-gradient(180deg,
            rgba(var(--fcc-brand-blue-rgb), .085),
            rgba(var(--fcc-brand-blue-rgb), .035)) !important;
        border-bottom-color: rgba(var(--fcc-brand-blue-rgb), .22) !important;
    }

    .table tbody tr:hover td {
        background-color: rgba(var(--fcc-brand-blue-rgb), .025);
    }

    .btn-outline-primary {
        color: var(--fcc-brand-blue-deep);
        border-color: rgba(var(--fcc-brand-blue-rgb), .48);
    }

    .btn-primary,
    .btn-outline-primary:hover,
    .btn-outline-primary:focus {
        background: linear-gradient(135deg, var(--fcc-brand-blue), var(--fcc-brand-blue-deep));
        border-color: var(--fcc-brand-blue-deep);
        box-shadow: 0 .35rem .8rem rgba(var(--fcc-brand-blue-rgb), .18);
    }

    .badge.bg-primary,
    .badge.text-bg-primary,
    .badge.bg-blue,
    .badge.text-bg-blue {
        background-color: var(--fcc-brand-blue) !important;
    }

    .nav-tabs .nav-link.active {
        border-color: rgba(var(--fcc-brand-blue-rgb), .24) rgba(var(--fcc-brand-blue-rgb), .24) var(--tblr-bg-surface);
        background: linear-gradient(180deg,
            rgba(var(--fcc-brand-blue-rgb), .085),
            rgba(var(--fcc-brand-blue-rgb), .02));
        font-weight: 750;
    }

    .fcc-sidebar-section {
        color: var(--fcc-brand-blue-deep) !important;
        border-top-color: rgba(var(--fcc-brand-blue-rgb), .16);
    }

    .fcc-sidebar-nav .nav-link.active {
        background: linear-gradient(90deg,
            rgba(var(--fcc-brand-blue-rgb), .14),
            rgba(var(--fcc-brand-blue-rgb), .045));
        border-left-color: var(--fcc-brand-blue);
    }

    .fcc-sidebar-nav .nav-link.active .nav-link-title,
    .fcc-sidebar-nav .nav-link:hover .nav-link-title {
        color: var(--fcc-brand-blue-deep) !important;
    }

    .fcc-topbar::after {
        background: linear-gradient(90deg,
            var(--fcc-brand-blue) 0%,
            var(--fcc-brand-blue-deep) 70%,
            rgba(var(--fcc-brand-gold-rgb), .8) 100%);
        opacity: .75;
    }

    .fcc-brand-subtitle {
        color: var(--fcc-brand-blue-deep) !important;
    }

    .fcc-info-icon {
        background: rgba(var(--fcc-brand-blue-rgb), .12);
        color: var(--fcc-brand-blue-deep);
        border-color: rgba(var(--fcc-brand-blue-rgb), .28);
    }

    .fcc-info-modal-header {
        background: linear-gradient(90deg,
            rgba(var(--fcc-brand-blue-rgb), .13),
            rgba(var(--fcc-brand-blue-rgb), .045));
    }

    .fcc-info-modal-title {
        color: var(--fcc-brand-blue-deep) !important;
    }

    .price-stat,
    .recipe-line-card,
    .purchase-line-card,
    .fcc-sidebar-company {
        background: linear-gradient(180deg,
            rgba(255, 255, 255, .96),
            rgba(var(--fcc-brand-blue-rgb), .04));
        border-color: rgba(var(--fcc-brand-blue-rgb), .14);
    }

    .alert-info {
        color: var(--fcc-brand-blue-dark);
        background: rgba(var(--fcc-brand-blue-rgb), .10);
        border-color: rgba(var(--fcc-brand-blue-rgb), .24);
    }

    .invoice-title::after,
    .print-sheet h1::after {
        background: linear-gradient(90deg,
            var(--fcc-brand-blue),
            var(--fcc-brand-blue-deep),
            rgba(var(--fcc-brand-gold-rgb), .75));
    }
}

/* Context help system: small question-mark icons beside labels and section titles. */
.fcc-auto-help-row .fcc-info-button,
.fcc-title-with-info .fcc-info-button,
.form-check .fcc-info-button {
    flex: 0 0 auto;
}
.form-check .fcc-info-button {
    margin-left: .35rem;
    transform: translateY(-1px);
}
.fcc-title-with-info {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}
.fcc-title-with-info .fcc-inline-info-button,
.card-title .fcc-inline-info-button,
.page-title .fcc-inline-info-button {
    width: 1.35rem;
    height: 1.35rem;
    margin-left: .25rem;
}
.fcc-auto-help-row .fcc-inline-info-button {
    opacity: .72;
    border-color: rgba(28, 154, 209, .35);
    color: var(--trulli-blue, #1C9AD1);
    background: rgba(28, 154, 209, .04);
}
.fcc-auto-help-row .fcc-inline-info-button:hover,
.fcc-auto-help-row .fcc-inline-info-button:focus,
.fcc-title-with-info .fcc-inline-info-button:hover,
.fcc-title-with-info .fcc-inline-info-button:focus {
    opacity: 1;
    background: rgba(28, 154, 209, .10);
    border-color: rgba(28, 154, 209, .55);
}
.fcc-info-modal-body #fccInfoModalBody {
    white-space: pre-line;
    line-height: 1.55;
    font-size: .95rem;
}
@media (max-width: 575.98px) {
    .fcc-field-label-row {
        align-items: flex-start;
    }
    .fcc-inline-info-button {
        min-width: 1.45rem;
    }
    .fcc-title-with-info {
        display: flex;
    }
}

/* Import / Scan Review wide mode: lets the invoice-line table use the full page width. */
.fcc-import-toolbar {
    position: sticky;
    top: .75rem;
    z-index: 20;
    padding: .5rem;
    border: 1px solid rgba(28, 154, 209, .14);
    border-radius: var(--tblr-border-radius, .375rem);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(6px);
}
.fcc-import-review-layout.fcc-import-left-hidden .fcc-import-left-panel {
    display: none !important;
}
.fcc-import-review-layout.fcc-import-left-hidden .fcc-import-detail-panel {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
}
.fcc-import-lines-table {
    min-width: 1820px;
}
.fcc-import-lines-table textarea,
.fcc-import-lines-table input,
.fcc-import-lines-table select {
    font-size: .78rem;
}
@media (min-width: 1200px) {
    .fcc-import-review-layout.fcc-import-left-hidden .fcc-import-lines-table {
        min-width: 1680px;
    }
}
@media (max-width: 991.98px) {
    .fcc-import-toolbar {
        position: static;
    }
    .fcc-import-review-layout.fcc-import-left-hidden .fcc-import-left-panel {
        display: none !important;
    }
}