/* Best's own styles, on top of the core's (_content/Best.Core/css/core.css - the shell, the entry
   screens, the sign-in page, the themes) and the controls' (_content/Best.Controls/css/controls.css).
   Everything that used to be here moved into core.css when the core was extracted; only VeeKay-specific
   overrides belong here now. */

/* ===================================================================== Accounting header (AccountingHeaderBand) */
/* Under the page header's brand band: the company address band, then "<cost centre> - FY <year>". Lined up with the header's own side padding. */
.acct-header {
    margin: -0.9rem 0 1rem;
}

.acct-address-band {
    padding: 0.3rem 3.5rem;
    font-size: 0.8rem;
    background-color: rgba(var(--bs-primary-rgb), 0.08);
    border-top: 1px solid rgba(var(--bs-primary-rgb), 0.18);
    border-bottom: 1px solid rgba(var(--bs-primary-rgb), 0.18);
    color: var(--bs-body-color);
}

.acct-context-line {
    padding: 0.3rem 3.5rem 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--vk-brand, var(--bs-primary));
}

/* The Cost Centre column of a voucher's lines: a little air after the (right-aligned) amounts and room for the picker. */
.doc-lines .doc-lines-centre {
    padding-left: 1rem;
    min-width: 11rem;
}

/* ===================================================================== Human Resource */
/* The employee's picture beside the first fields of the Employees form, and the small one in the grid. */
.hr-employee-header {
    margin-bottom: 0;
}

.hr-photo {
    flex: 0 0 auto;
    width: 100px;
    height: 124px;
    margin-top: 0.15rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.4rem;
    background-color: var(--vk-surface, rgba(0, 0, 0, 0.04));
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hr-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hr-photo img.hr-photo-empty {
    width: 64px;
    height: 64px;
    object-fit: contain;
    opacity: 0.55;
}

.hr-grid-photo {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
}

.hr-grid-photo.hr-photo-empty {
    object-fit: contain;
    opacity: 0.5;
    border-radius: 0;
}

/* The status badges (.hr-badge and its tones) are StatusBadge's, in Best.Controls' controls.css. */

/* A replaced document stays in the list as history, in quieter type. */
.hr-row-superseded td {
    color: var(--bs-secondary-color);
}

.hr-doc-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.hr-doc-thumb {
    width: 26px;
    height: 26px;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid var(--bs-border-color);
}

/* The inline forms of the ID cards and payroll panels. */
.hr-card-form {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.4rem;
    padding: 0.6rem 0.75rem 0.75rem;
    background-color: rgba(var(--bs-primary-rgb), 0.03);
}

.hr-card-summary {
    font-size: 0.9rem;
}

.hr-full-number {
    font-family: var(--bs-font-monospace, monospace);
    letter-spacing: 0.02em;
}

/* The panels' grids show more rows than the generic related-records grid's 14rem before they scroll inside themselves. */
.hr-documents-grid,
.hr-idcards-grid {
    max-height: 26rem;
}

.hr-payroll-lines {
    max-height: 28rem;
}

.hr-user-line {
    display: block;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

/* ===================================================================== Contracting: project stages, profit and loss, dashboard, receivables */
/* The allocation block of the Stages panel and of Stage Status: figures, a bar, one message. Over = red, exactly allocated = green, under = amber. */
.stages-allocation {
    padding: 0.6rem 0.8rem 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-left-width: 4px;
    border-radius: 0.4rem;
    background-color: var(--vk-surface, rgba(0, 0, 0, 0.03));
}

.stages-allocation.stages-over { border-left-color: #dc3545; }
.stages-allocation.stages-exact { border-left-color: #198754; }
.stages-allocation.stages-under { border-left-color: #e0a800; }

.stages-bar {
    height: 0.55rem;
    border-radius: 999px;
    background-color: rgba(108, 117, 125, 0.22);
    overflow: hidden;
}

.stages-bar-fill {
    height: 100%;
    border-radius: 999px;
    background-color: #e0a800;
}

.stages-exact .stages-bar-fill { background-color: #198754; }
.stages-over .stages-bar-fill { background-color: #dc3545; }
.stage-overall-fill,
.ongoing-bar-fill { background-color: var(--vk-brand, var(--bs-primary)); }

.stages-message {
    margin-top: 0.3rem;
    color: var(--bs-secondary-color);
}

.stages-over .stages-message { color: #b02a37; font-weight: 600; }
[data-vk-dark] .stages-over .stages-message { color: #f1919b; }

.stages-table th {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.stages-table .stages-no { width: 2rem; text-align: center; color: var(--bs-secondary-color); }
.stages-table-wrap { overflow-x: auto; }
/* The money boxes of the stage tables fit their columns (the core's .amount-field is 10.5rem wide at least). */
.stages-table .amount-field { min-width: 0; }
.stages-table { table-layout: fixed; width: 100%; min-width: 60rem; }
.stages-table .stages-name { min-width: 13rem; }
.stages-table .stages-money { width: 7.5rem; }
.stages-table .stages-spent { width: 7.5rem; }
.stages-table .stages-remarks { min-width: 8rem; }
.stages-table .stages-pct { width: 4.4rem; white-space: nowrap; }
.stages-table .stages-date { width: 10.5rem; }
.stages-table .stages-status { width: 9rem; }
.stages-table .stages-status-col { width: 9rem; }
.stages-table .stages-pctin { width: 5.5rem; }
.stages-table .stages-actions { width: 6rem; text-align: right; }
.stages-table .stages-description { margin-top: 0.25rem; }
.stages-table .stages-description input { font-size: 0.8rem; }

.stage-status-table tr.stage-row-dirty > td { background-color: rgba(255, 193, 7, 0.10); }
.stage-status-table tr.stage-row-selected > td { box-shadow: inset 0 -2px 0 var(--vk-brand, var(--bs-primary)); }

/* A project's Profit and Loss panel: the figures as tiles, then the stage table. */
.pnl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
    gap: 0.6rem;
}

.pnl-tile {
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.4rem;
    background-color: var(--vk-surface, rgba(0, 0, 0, 0.03));
}

.pnl-stages th { font-size: 0.78rem; font-weight: 600; color: var(--bs-secondary-color); white-space: nowrap; }
.pnl-stages tr.pnl-stage-over > td { background-color: rgba(220, 53, 69, 0.07); }

/* Stage chips: one per stage, colour = status, the stage work is at now is outlined. */
.stage-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    font-size: 0.74rem;
    line-height: 1.4;
    border: 1px solid transparent;
    white-space: nowrap;
}

.stage-chip-pct { font-weight: 700; }
.stage-chip-done { background-color: rgba(25, 135, 84, 0.16); border-color: rgba(25, 135, 84, 0.45); color: #146c43; }
/* The text is the brand colour pulled towards the theme's text colour: a pale brand (orange, light purple) on its own tint was too faint. */
.stage-chip-active { background-color: rgba(var(--bs-primary-rgb), 0.14); border-color: rgba(var(--bs-primary-rgb), 0.5); color: color-mix(in srgb, var(--vk-brand, var(--bs-primary)) 60%, var(--bs-body-color)); }
.stage-chip-hold { background-color: rgba(255, 193, 7, 0.22); border-color: rgba(204, 154, 0, 0.6); color: #7a5b00; }
.stage-chip-todo { background-color: rgba(108, 117, 125, 0.12); border-color: rgba(108, 117, 125, 0.35); color: #565e64; }
.stage-chip-current { box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 3.5px var(--vk-brand, var(--bs-primary)); font-weight: 600; }
[data-vk-dark] .stage-chip-done { color: #75d6a4; }
[data-vk-dark] .stage-chip-hold { color: #ffd966; }
[data-vk-dark] .stage-chip-todo { color: #adb5bd; }

/* Home: the management summary above "Ongoing projects" - a strip of figure cards (what is owed to us and by us, money in and out) and two small tables. */
.mgmt-section {
    padding: 1rem 1.2rem 1.1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.6rem;
    background-color: var(--bs-body-bg);
}

.mgmt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.7rem;
}

.mgmt-card {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background-color: var(--vk-surface, rgba(0, 0, 0, 0.02));
    color: var(--bs-body-color);
    text-decoration: none;
    min-width: 0;
}

a.mgmt-card:hover { border-color: var(--vk-brand, var(--bs-primary)); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }

/* The icon beside the card's title, as on the module cards (user, 2026-10-14: "apply this to other cards"). */
.mgmt-head { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.mgmt-head .nav-icon-md { width: 1.7rem; height: 1.7rem; border-radius: 0.4rem; flex: 0 0 auto; }
.mgmt-head .nav-icon-md img { width: 1.2rem; height: 1.2rem; }
.mgmt-head .mgmt-label { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mgmt-label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; color: var(--bs-secondary-color); }
.mgmt-value { font-size: 1.45rem; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.mgmt-sub { font-size: 0.78rem; color: var(--bs-secondary-color); }
.mgmt-bad { color: var(--bs-danger); }
.mgmt-warn { color: var(--bs-warning-text-emphasis, #997404); }
.mgmt-good { color: var(--bs-success); }
.mgmt-expense-line { margin-top: 0.6rem; }

.mgmt-lists {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    gap: 1rem;
    margin-top: 0.9rem;
}

.mgmt-list-title { margin: 0 0 0.35rem; font-size: 0.95rem; font-weight: 700; color: var(--vk-brand, var(--bs-primary)); }
.mgmt-grid-table { max-height: 16rem; }

/* Home: the Super Admin's "Ongoing projects" strip under the module cards. */
.ongoing-section {
    padding: 1rem 1.2rem 1.1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.6rem;
    background-color: var(--bs-body-bg);
}

.ongoing-head {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    flex-wrap: wrap;
    margin-bottom: 0.8rem;
}

.ongoing-title { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--vk-brand, var(--bs-primary)); }
.ongoing-spacer { flex: 1 1 auto; }
.ongoing-outstanding { display: flex; flex-direction: column; text-decoration: none; text-align: right; color: inherit; line-height: 1.2; }
.ongoing-viewall { font-size: 0.9rem; font-weight: 600; }

.ongoing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
    gap: 0.8rem;
}

.ongoing-card {
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background-color: var(--vk-surface, rgba(0, 0, 0, 0.02));
}

.ongoing-card-head { display: flex; align-items: center; }
.ongoing-name { font-weight: 600; text-decoration: none; color: color-mix(in srgb, var(--vk-brand, var(--bs-primary)) 65%, var(--bs-body-color)); }
.ongoing-overall { display: flex; align-items: center; gap: 0.6rem; margin: 0.5rem 0 0.45rem; }
.ongoing-bar { flex: 1 1 auto; height: 0.6rem; }
.ongoing-percent { flex: 0 0 auto; min-width: 3rem; text-align: right; font-weight: 700; }
.ongoing-chips { display: flex; flex-wrap: wrap; gap: 0.3rem 0.4rem; margin-bottom: 0.5rem; }
.ongoing-money { display: flex; gap: 1.2rem; flex-wrap: wrap; color: var(--bs-secondary-color); }

/* Receivables. */
.receivables .receivables-combo { min-width: 12rem; }
.receivables .receivables-customer { min-width: 15rem; }
.receivables .receivables-hide-settled { align-self: center; margin-top: 1.4rem; }
.receivables-grid .receivables-row-old > td { color: #b02a37; }
[data-vk-dark] .receivables-grid .receivables-row-old > td { color: #f1919b; }

/* The Convert express proposal popup's list of waiting proposals. */
.convert-express-grid { max-height: 14rem; }

/* Invoices > "Advances from this customer": the customer's receipts to adjust against the invoice - tick, receipt no, date, amount,
   remarks - on the theme's surface tint (readable in every theme). */
.invoice-advances {
    display: grid;
    grid-template-columns: auto minmax(4.5rem, max-content) minmax(5.5rem, max-content) minmax(6.5rem, max-content) minmax(0, 1fr);
    gap: 0.2rem 0.9rem;
    align-items: center;
    padding: 0.45rem 0.7rem;
    border-radius: 0.4rem;
    background-color: var(--vk-surface, rgba(0, 0, 0, 0.03));
}

.invoice-advance-row {
    display: contents;
}

.invoice-advance-head > span {
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0.75;
}

.invoice-advance-remarks {
    overflow-wrap: anywhere;
}