:root {
    --blood-red: #7C0A02;
    --black: #000;
    --ash-gray: #B2B2B2;
    --charcoal: #1A1A1A;
    --bone-white: #F2F2F0;
    --midnight-blue: #0B1D3A;
    --rust-red: #992A1C;
    --mold-green: #4E5B31;
    --aged-gold: #C29F13;
    --crimson-shadow: #4A0000;

    /* Company brand tokens. These defaults are Mad Angel Films' colours; the
       header prints the active company profile's palette over them
       (config/company_profiles/*.php, CompanyProfile::paletteCss()). Rules that
       carry company colour use these, never the named colours above. */
    --brand-navbar-bg: #212529;
    --brand-navbar-text: #F8F9FA;
    --brand-navbar-text-rgb: 248, 249, 250;
    --brand-dev-navbar-bg: #4E5B31;
    --brand-sidebar-bg: #000000;
    --brand-sidebar-text: #F8F9FA;
    --brand-sidebar-text-rgb: 248, 249, 250;
    --brand-footer-bg: #212529;
    --brand-footer-text: #F8F9FA;
    --brand-footer-text-rgb: 248, 249, 250;
    --brand-accent: #7C0A02;
    --brand-accent-hover: #4A0000;
    --brand-accent-text: #F2F2F0;
    --brand-accent-tint: rgba(124, 10, 2, 0.08);
    --brand-accent-ring: rgba(124, 10, 2, 0.25);
    --brand-brand-icon: #DC3545;
    --brand-login-gradient-start: #1A1A1A;
    --brand-login-gradient-end: #7C0A02;
    --brand-surface: #F2F2F0;
    --brand-surface-text: #1A1A1A;
}

body.login-bg {
    background: linear-gradient(135deg, var(--brand-login-gradient-start), var(--brand-login-gradient-end));
    color: var(--brand-surface);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.login-card {
    max-width: 700px;
    background-color: var(--brand-surface);
    border: none;
    border-radius: 12px;
}

.login-card .card-body {
    color: var(--brand-surface-text);
}

.login-art-container {
    margin-bottom: 1rem;
}

.login-art-frame {
    display: inline-block;
    padding: 0.5rem;
    border: 4px solid var(--ash-gray);
    background-color: var(--bone-white);
}

.login-art {
    max-height: 360px;
    width: auto;
}

.btn-danger {
    background-color: var(--brand-accent);
    border-color: var(--brand-accent);
}

.btn-danger:hover {
    background-color: var(--brand-accent-hover);
    border-color: var(--brand-accent-hover);
}

/* Application shell. text-light inside each region takes the region's text
   colour by rebinding Bootstrap's --bs-light-rgb there. */
.app-navbar {
    background-color: var(--brand-navbar-bg);
    --bs-light-rgb: var(--brand-navbar-text-rgb);
}

/* Development navbar color */
.app-navbar.navbar-dev {
    background-color: var(--brand-dev-navbar-bg);
}

.app-footer {
    background-color: var(--brand-footer-bg);
    --bs-light-rgb: var(--brand-footer-text-rgb);
}

.brand-icon {
    color: var(--brand-brand-icon);
}


/* Highlight active sidebar links */
.nav-link.active {
    background-color: var(--brand-accent);
    color: var(--brand-accent-text) !important;
}

/* Sidebar sizing and colour */
.sidebar {
    width: max-content;
    min-width: 260px;
    background-color: var(--brand-sidebar-bg);
    --bs-light-rgb: var(--brand-sidebar-text-rgb);
}

/* Elements with this class are hidden when printing */
.no-print { }

@media print {
    nav.navbar,
    aside.sidebar,
    form,
    .btn,
    footer {
        display: none !important;
    }
    body {
        background: #fff !important;
    }
    .main-content {
        padding: 0;
    }
    #stock-report > h1,
    #unfulfilled-orders > h1,
    #balance-sheet > h1,
    #balance-sheet > .mb-3.text-center,
    #profit-loss > h1,
    #profit-loss > .mb-3.text-center {
        display: none !important;
    }
.no-print { display: none !important; }
}

/* Profit & Loss column widths */
.pl-account-col { width: 45%; }
.pl-amount-col { width: 15%; }
.pl-details-col { width: 15%; }


/* Stock Report column widths */
.sr-sku-col { width: 15%; }
.sr-name-col { width: 35%; }
.sr-type-col { width: 10%; }
.sr-demand-col { width: 10%; }
.sr-details-col { width: 10%; }

/* Highlight depreciated assets */
.table-striped tbody tr.depreciated-row > * {
    background-color: #d2f4d2;
}
.table-striped tbody tr.depreciated-row:nth-of-type(even) > * {
    background-color: #c8ebc8;
}

/* Highlight financial columns */
.table-striped tbody td.financial-col {
    background-color: #fff9c4;
}
.table-striped tbody tr:nth-of-type(even) td.financial-col {
    background-color: #fff6a0;
}

/* Highlight MAF columns */
.table-dark th.maf-col {
    background-color: var(--blood-red);
    color: var(--bone-white);
}
.table-striped tbody td.maf-col {
    background-color: #f8d7da;
}
.table-striped tbody tr:nth-of-type(even) td.maf-col {
    background-color: #f5c2c7;
}

.detail-row td {
    background-color: #f8f9fa;
}
.receipt-dropzone {
    position: relative;
    border: 2px dashed #6c757d;
    border-radius: 0.25rem;
    padding: 0.5rem;
    text-align: center;
    cursor: pointer;
}
.receipt-dropzone.drag-over {
    background-color: #e9ecef;
}
.receipt-dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    pointer-events: auto;
}

#ytd-pl-card th,
#ytd-pl-card td {
    padding: 0.25rem 0.5rem;
}

.dashboard-card {
    background-color: #fff;
    color: var(--charcoal);
    border: 1px solid #dee2e6;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
}

.dashboard-card .list-group-item {
    background-color: #fff;
    color: var(--charcoal);
    padding: 0.25rem 0.5rem;
    border-color: #dee2e6;
}

.modal-xxl {
    --bs-modal-width: 90vw;
}

/* Account charting styles */
.account-picker {
    border: 1px solid var(--ash-gray);
    border-radius: 0.75rem;
    background-color: var(--bone-white);
    padding: 1rem;
    color: var(--charcoal);
}

.account-picker-selected {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.account-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--brand-accent);
    color: var(--brand-accent-text);
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.85rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.account-chip .account-chip-meta {
    font-size: 0.75rem;
    opacity: 0.8;
}

.account-chip .btn-close {
    filter: invert(1);
    opacity: 0.75;
}

.account-chip .btn-close:hover {
    opacity: 1;
}

.account-results {
    max-height: 320px;
    overflow-y: auto;
}

.account-result {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border: 1px solid var(--ash-gray);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    background-color: #fff;
    color: var(--charcoal);
    text-align: left;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
    margin-bottom: 0.5rem;
}

.account-result:last-child {
    margin-bottom: 0;
}

.account-result:hover,
.account-result:focus {
    border-color: var(--brand-accent);
    background-color: var(--brand-accent-tint);
    transform: translateY(-1px);
    outline: none;
}

.account-result:focus-visible {
    box-shadow: 0 0 0 0.2rem var(--brand-accent-ring);
}

.account-result-name {
    font-weight: 600;
}

.account-result-meta {
    font-size: 0.85rem;
}

.account-result-action {
    font-weight: 600;
    color: var(--brand-accent);
    display: inline-flex;
    align-items: center;
}

/* The x that removes an alias is a submit button, not a link: a GET must not
   delete. It is drawn as the link it replaced so the badge looks unchanged. */
.badge .alias-remove {
    background: none;
    border: 0;
    padding: 0;
    margin-left: 0.25rem;
    color: inherit;
    font: inherit;
    line-height: 1;
    vertical-align: baseline;
    cursor: pointer;
}