/* ==========================================================================
   PartLedger - custom CSS foundation
   Mobile-first: the primary context is a phone in a U-Pull-It yard (section 40),
   so touch targets are large, information is dense but scannable, and critical
   actions stay reachable with one thumb.
   ========================================================================== */

:root {
    --pl-bg: #f4f6f8;
    --pl-surface: #ffffff;
    --pl-ink: #1c2530;
    --pl-muted: #5b6b7c;
    --pl-line: #dde3e9;
    --pl-navy: #14293f;
    --pl-navy-dark: #0d1b2a;
    --pl-accent: #ff5400;
    --pl-accent-dark: #d34000;
    --pl-teal: #1a7f8c;
    --pl-green: #1e7a45;
    --pl-red: #b02a2a;
    --pl-amber: #9a6b06;
    --pl-radius: 0.65rem;
    --pl-shadow: 0 1px 2px rgba(20, 41, 63, .06), 0 6px 18px rgba(20, 41, 63, .06);
    --pl-touch: 2.9rem;
}

html, body {
    background-color: var(--pl-bg);
    color: var(--pl-ink);
    font-size: 16px;
}

body {
    -webkit-text-size-adjust: 100%;
}

/* ---------- Brand mark ---------- */

/* The logo is a landscape mark, so it is sized by height and allowed to keep its aspect ratio.
   The width/height attributes in the markup stop the navbar reflowing before the image loads.

   The size is carried by a custom property rather than by writing `height` in each rule. The
   large variant and the responsive breakpoints target the same element at equal specificity, so
   plain `height` declarations made the result depend on source order and the large mark
   silently rendered at navbar size. */
.pl-brand-mark {
    --pl-mark-height: 1.75rem;

    height: var(--pl-mark-height);
    width: auto;
    object-fit: contain;
    flex: 0 0 auto;
    display: block;
}

.pl-brand-mark-lg { --pl-mark-height: 3.8rem; }

/* The theme switch sat at 28px tall next to 42px controls, so it never lined up with the rest
   of the header. It now matches the nav-link height. */
.pl-navbar .btn-pl-theme-toggle,
.pl-offcanvas .btn-pl-theme-toggle {
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* The breakpoints must not match the large variant. Custom properties cascade exactly like
   normal declarations, so a plain `.pl-brand-mark` rule in a later media query overrode the
   large mark's size. :not() raises specificity and excludes the element outright, which makes
   the result independent of source order. */
@media (min-width: 576px) {
    .pl-brand-mark:not(.pl-brand-mark-lg) { --pl-mark-height: 2rem; }
}

@media (min-width: 992px) {
    .pl-brand-mark:not(.pl-brand-mark-lg) { --pl-mark-height: 2.15rem; }
}

/* ---------- Header / navigation ---------- */

/* The header was inheriting Bootstrap's .navbar padding and container gutters, which left it
   58px tall with the brand hard against a 12px edge and the controls on a different centre
   line. Height, padding and alignment are all stated here instead, and the header content is
   stretched to full height so every control shares one centre line. */
.pl-navbar {
    background: linear-gradient(180deg, var(--pl-navy) 0%, var(--pl-navy-dark) 100%);
    padding-top: .4rem;
    padding-bottom: .4rem;
    min-height: 3.5rem;
}

/* The content area is a flex row that fills the bar, so the brand, the links and the controls
   are centred against the same axis regardless of their individual heights. */
.pl-navbar > .container-fluid {
    display: flex;
    align-items: center;
    /* Never wrap. With ten navigation items the bar used to break onto two rows, which doubled
       its height and stretched the sign-out button. When the links cannot fit they scroll
       sideways instead, which keeps one row at any width. */
    flex-wrap: nowrap;
    min-height: 2.7rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* The cluster holding the links plus the two controls. min-width:0 lets the link list shrink
   rather than pushing the controls off the edge. */
.pl-navbar > .container-fluid > .d-lg-flex {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
}

/* Once the link list is allowed to shrink, that pressure propagates to its siblings: the
   sign-out button was being squeezed to about 57px, which wrapped "Sign out" onto two lines and
   made it 73px tall. Controls must never compress, so they opt out of shrinking and keep their
   text on one line. */
.pl-navbar .pl-user-menu,
.pl-navbar .pl-navbar-toggler,
.pl-navbar .navbar-toggler,
.pl-navbar .btn-pl-theme-toggle,
.pl-navbar .pl-user-menu .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* The links shrink and scroll; the brand and the controls do not. */
.pl-navbar .navbar-brand { flex: 0 0 auto; }

.pl-navbar .pl-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    /* Without this the list's intrinsic width refuses to shrink and forces the wrap above. */
    min-width: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

/* The bar is short; a visible scrollbar would double its height. */
.pl-navbar .pl-nav::-webkit-scrollbar { height: 0; display: none; }

/* When the links do not fit they scroll sideways. A silent overflow looks like a missing item,
   so the trailing edge is faded to signal there is more, and the fade is dropped once the user
   reaches the end. The mask sits on the scroll container, so it stays put while content moves. */
.pl-navbar .pl-nav--overflowing {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2.5rem), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2.5rem), transparent 100%);
}

.pl-navbar .pl-nav--overflowing.pl-nav--at-end {
    -webkit-mask-image: none;
    mask-image: none;
}

@media (min-width: 576px) {
    .pl-navbar > .container-fluid { padding-left: 1.5rem; padding-right: 1.5rem; }
}

@media (min-width: 992px) {
    .pl-navbar > .container-fluid { padding-left: 2rem; padding-right: 2rem; }
}

.pl-navbar .navbar-brand {
    font-weight: 700;
    letter-spacing: .2px;
    color: #fff;
    font-size: 1.15rem;
    gap: .6rem;
    /* The whole lockup is the tap target, not just the wordmark. */
    padding: .35rem 0;
    margin-right: 1rem;
}

.pl-navbar .nav-link {
    color: #cfdbe6;
    border-radius: var(--pl-radius);
    padding: .5rem .75rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 500;
    white-space: nowrap;
    /* Matches the height of the theme toggle and the sign-in control so the row is even. */
    min-height: 2.5rem;
}

.pl-navbar .nav-link:hover,
.pl-navbar .nav-link:focus { color: #fff; background: rgba(255, 255, 255, .09); }

/* Active state: a bottom rule reads correctly in a horizontal bar. The previous left inset bar
   was a sidebar treatment and fought with the pill fill. */
.pl-navbar .nav-link.active {
    color: #fff;
    background: rgba(255, 84, 0, .16);
    box-shadow: inset 0 -3px 0 var(--pl-accent);
}

.pl-navbar .nav-item { display: flex; align-items: center; }

/* Hamburger: sized like the other header controls rather than Bootstrap's default. */
.pl-navbar .navbar-toggler {
    color: #fff;
    padding: .35rem .5rem;
    line-height: 1;
    margin-left: auto;
}

.pl-navbar .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .25); }

.pl-offcanvas { background: var(--pl-navy); color: #dbe4ec; }
.pl-offcanvas .offcanvas-header { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.pl-offcanvas .offcanvas-title { color: #fff; font-weight: 600; }
.pl-offcanvas-body { padding-top: .5rem; }
.pl-offcanvas .nav-link { color: #cfdbe6; padding: .85rem .9rem; font-size: 1.05rem; }
.pl-offcanvas .nav-link i { width: 1.4rem; color: var(--pl-accent); }
.pl-offcanvas .nav-link.active { background: rgba(255, 84, 0, .18); color: #fff; }
.pl-offcanvas .border-secondary { border-color: rgba(255, 255, 255, .18) !important; }
.pl-user-name { color: #cfdbe6; font-size: .9rem; }
.pl-offcanvas .pl-user-name { color: #cfdbe6; }

/* Row holding the theme switch and the account controls in the mobile menu. */
.pl-offcanvas-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.pl-offcanvas-actions .btn-pl-theme-toggle { flex: 0 0 auto; }
.pl-offcanvas-actions > .d-flex { flex: 1 1 auto; justify-content: flex-end; }

/* ---------- Signed-out hero ---------- */

/* The brand lockup on the landing page. Centred, with breathing room above and below so it
   reads as the focal point rather than as another left-aligned heading. */
.pl-hero {
    text-align: center;
    padding: 1.25rem .5rem 1.5rem;
    margin-bottom: .5rem;
}

.pl-hero-lockup {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    margin: 0 auto;
    color: var(--pl-ink);
}

.pl-hero-lockup .pl-brand-mark-lg {
    --pl-mark-height: 3.4rem;
}

.pl-hero-title {
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0;
    line-height: 1.15;
}

.pl-hero-tagline {
    color: var(--pl-muted);
    max-width: 34rem;
    margin: .9rem auto 0;
}

/* The landing card is a fixed column; as a class rather than an inline style so the constraint
   is discoverable and testable. */
.pl-welcome-card {
    max-width: 44rem;
    margin-left: auto;
    margin-right: auto;
}

.pl-welcome-card > .pl-card-body { padding: 1.5rem 1.25rem; }

@media (min-width: 768px) {
    .pl-welcome-card > .pl-card-body { padding: 2.5rem 2.75rem; }
    .pl-hero-title { font-size: 2.15rem; }
}

.app-footer {
    background: #fff;
    border-top: 1px solid var(--pl-line);
    color: var(--pl-muted);
}

/* ---------- Surfaces ---------- */

.pl-card {
    background: var(--pl-surface);
    border: 1px solid var(--pl-line);
    border-radius: var(--pl-radius);
    box-shadow: var(--pl-shadow);
}

.pl-card > .pl-card-header {
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--pl-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

/* Footer build badge. Shown only outside Production; see the layout for why. */
.pl-env-badge {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .1rem .4rem;
    border-radius: .3rem;
    /* Darker than --pl-amber: the pale amber wash behind it needs the extra contrast to clear
       4.5:1 at this small size. */
    color: #7a5405;
    background: rgba(154, 107, 6, .12);
    border: 1px solid rgba(154, 107, 6, .3);
}

[data-pl-theme="dark"] .pl-env-badge {
    color: #f0c674;
    background: #3a2a0c;
    border-color: #553f14;
}

.pl-card > .pl-card-body { padding: 1rem; }

.pl-card-title {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--pl-navy);
    margin: 0;
}

.pl-stat {
    background: var(--pl-surface);
    border: 1px solid var(--pl-line);
    border-radius: var(--pl-radius);
    padding: .9rem 1rem;
    height: 100%;
    box-shadow: var(--pl-shadow);
}

.pl-stat-label {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--pl-muted);
    font-weight: 600;
}

.pl-stat-value {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--pl-navy);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.pl-stat-value.sm { font-size: 1.3rem; }
.pl-stat-hint { font-size: .8rem; color: var(--pl-muted); }

.pl-section-title {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--pl-muted);
    margin: 1.25rem 0 .5rem;
}

/* ---------- Buttons: large targets for gloved, one-handed use ---------- */

.btn { border-radius: var(--pl-radius); font-weight: 600; }

.btn-pl-primary {
    background: var(--pl-accent);
    border-color: var(--pl-accent);
    /* Dark ink, not white. The accent is a saturated orange: white text on it measures 3.2:1,
       which is below the 4.5:1 needed for body text. Dark ink measures 5.1:1 on the same
       orange and keeps the brand colour. */
    color: #14212c;
}
.btn-pl-primary:hover, .btn-pl-primary:focus { background: var(--pl-accent-dark); border-color: var(--pl-accent-dark); color: #14212c; }
.btn-pl-primary:disabled,
.btn-pl-primary.disabled { color: #14212c; }

.btn-pl-secondary {
    background: var(--pl-navy);
    border-color: var(--pl-navy);
    color: #fff;
}
.btn-pl-secondary:hover, .btn-pl-secondary:focus { background: var(--pl-navy-dark); border-color: var(--pl-navy-dark); color: #fff; }

.btn-pl-outline {
    border-color: var(--pl-navy);
    color: var(--pl-navy);
    background: #fff;
}
.btn-pl-outline:hover { background: var(--pl-navy); color: #fff; }

.btn-lg, .btn-pl-touch { min-height: var(--pl-touch); display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.btn-pl-touch { width: 100%; font-size: 1.05rem; }

.btn i { line-height: 1; }

/* ---------- Data display ---------- */

.pl-table { --bs-table-bg: transparent; font-size: .93rem; }
.pl-table > thead th {
    background: #eef2f6;
    border-bottom: 2px solid var(--pl-line);
    color: var(--pl-navy);
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    white-space: nowrap;
}
.pl-table > tbody td { vertical-align: middle; }
.pl-table > tbody tr:hover { background: #f7fafc; }

.pl-num { font-variant-numeric: tabular-nums; }
.pl-mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; }

.pl-item-number {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--pl-navy);
}

.pl-vin {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .06em;
    font-weight: 600;
}

.pl-money-pos { color: var(--pl-green); font-weight: 600; }
.pl-money-neg { color: var(--pl-red); font-weight: 600; }
.pl-money-muted { color: var(--pl-muted); font-style: italic; }

.pl-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--pl-muted);
}
.pl-empty i { font-size: 2.5rem; opacity: .35; display: block; margin-bottom: .5rem; }

/* ---------- Badges: lifecycle, confidence, condition ---------- */

.pl-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .22rem .5rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
    border: 1px solid transparent;
}

.pl-badge-status-Selected   { background: #e8eef5; color: #35506e; border-color: #cfdcea; }
.pl-badge-status-Pulled      { background: #e6f0f7; color: #1f5b7d; border-color: #c4dcec; }
.pl-badge-status-Processing  { background: #fdf0dc; color: #8a5a06; border-color: #f3ddb4; }
.pl-badge-status-ReadyForSale{ background: #e2f3ea; color: #12603a; border-color: #bfe3d0; }
.pl-badge-status-Listed      { background: #e0eefb; color: #14507f; border-color: #c3dcf5; }
.pl-badge-status-Sold        { background: #dff1e6; color: #0f5c33; border-color: #b8e0c8; }
.pl-badge-status-Shipped     { background: #e6e4f7; color: #3f3a86; border-color: #cfcaef; }
.pl-badge-status-Completed   { background: #eceff1; color: #455a64; border-color: #d3dade; }
.pl-badge-status-Failed      { background: #fbe4e4; color: #8f1f1f; border-color: #f2c4c4; }
.pl-badge-status-Damaged     { background: #fbe4e4; color: #8f1f1f; border-color: #f2c4c4; }
.pl-badge-status-Scrapped    { background: #e9e6e4; color: #5d4b42; border-color: #d8cfca; }
.pl-badge-status-Returned    { background: #fdeede; color: #8a4b06; border-color: #f3d6b0; }
.pl-badge-status-Lost        { background: #f3e0e0; color: #6d2020; border-color: #e0c2c2; }
.pl-badge-status-Cancelled   { background: #eceff1; color: #54606a; border-color: #d5dade; }

.pl-badge-conf-High   { background: #e2f3ea; color: #12603a; border-color: #bfe3d0; }
.pl-badge-conf-Medium { background: #fdf0dc; color: #8a5a06; border-color: #f3ddb4; }
.pl-badge-conf-Low    { background: #fbe4e4; color: #8f1f1f; border-color: #f2c4c4; }

.pl-badge-neutral { background: #eef2f6; color: #455a64; border-color: #dde3e9; }
.pl-badge-info { background: #e0eefb; color: #14507f; border-color: #c3dcf5; }

/* ---------- Reference and user photos ---------- */

.pl-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: .6rem;
}

.pl-photo {
    border: 1px solid var(--pl-line);
    border-radius: var(--pl-radius);
    overflow: hidden;
    background: #fff;
    position: relative;
}

.pl-photo img { width: 100%; height: 110px; object-fit: cover; display: block; background: #eef2f6; }
.pl-photo figcaption { padding: .35rem .5rem; font-size: .74rem; color: var(--pl-muted); }

.pl-reference-image img {
    width: 100%;
    max-height: 190px;
    object-fit: cover;
    border-radius: var(--pl-radius);
    background: #eef2f6;
}

.pl-photo-badge {
    position: absolute;
    top: .3rem;
    left: .3rem;
    background: rgba(20, 41, 63, .82);
    color: #fff;
    font-size: .66rem;
    padding: .1rem .4rem;
    border-radius: .3rem;
}

/* ---------- Workflow stepper (VIN -> parts -> pull -> inventory -> sale) ---------- */

.pl-steps { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; padding: 0; margin: 0; }
.pl-steps li {
    font-size: .76rem;
    font-weight: 600;
    padding: .3rem .6rem;
    border-radius: .4rem;
    background: #eef2f6;
    color: var(--pl-muted);
    border: 1px solid var(--pl-line);
}
.pl-steps li.done { background: #e2f3ea; color: #12603a; border-color: #bfe3d0; }
.pl-steps li.current { background: var(--pl-navy); color: #fff; border-color: var(--pl-navy); }

/* ---------- Forms ---------- */

.form-label { font-weight: 600; font-size: .86rem; color: var(--pl-navy); margin-bottom: .25rem; }
.form-control, .form-select { min-height: 2.6rem; }
.form-text { font-size: .8rem; }
.pl-required::after { content: " *"; color: var(--pl-red); }

.pl-form-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    padding-top: .5rem;
}
.pl-form-actions .btn { flex: 1 1 auto; min-width: 130px; min-height: var(--pl-touch); }

.pl-vin-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 1.15rem;
    text-align: center;
}

/* ---------- Research ---------- */

.pl-relevance-bar {
    position: relative;
    height: 6px;
    background: #eef2f6;
    border-radius: 999px;
    overflow: hidden;
    min-width: 60px;
}
.pl-relevance-bar span { position: absolute; inset: 0 auto 0 0; background: var(--pl-teal); }
.pl-relevance-bar.low span { background: var(--pl-amber); }
.pl-relevance-bar.high span { background: var(--pl-green); }

.pl-reason-list { display: flex; flex-wrap: wrap; gap: .2rem; }
.pl-reason {
    font-size: .68rem;
    padding: .1rem .35rem;
    border-radius: .25rem;
    background: #eef2f6;
    color: #455a64;
    border: 1px solid var(--pl-line);
}
.pl-reason.negative { background: #fbe4e4; color: #8f1f1f; border-color: #f2c4c4; }
.pl-reason.positive { background: #e2f3ea; color: #12603a; border-color: #bfe3d0; }

.pl-hist-chart { position: relative; height: 260px; }

/* ---------- Item labels (section 32) ---------- */

.pl-label-sheet {
    display: grid;
    grid-template-columns: 1fr;
    gap: .4rem;
    padding: 0;
    margin: 0;
}

.pl-label {
    border: 1px dashed #9aa7b4;
    border-radius: .35rem;
    padding: .45rem .55rem;
    background: #fff;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .5rem;
    align-items: center;
    page-break-inside: avoid;
    break-inside: avoid;
}

.pl-label-brand { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--pl-muted); font-weight: 700; }
.pl-label-item { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.15rem; font-weight: 700; line-height: 1.1; }
.pl-label-vehicle { font-size: .72rem; color: var(--pl-navy); font-weight: 600; }
.pl-label-part { font-size: .8rem; font-weight: 600; }
.pl-label-oem { font-size: .68rem; color: var(--pl-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.pl-label-codes { display: flex; align-items: flex-end; gap: .4rem; }
.pl-label-codes svg { display: block; height: 52px; width: auto; }
.pl-label-codes .pl-qr svg { height: 68px; }

@media (min-width: 576px) { .pl-label-sheet { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .pl-label-sheet { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Theme switch ---------- */

.btn-pl-theme-toggle {
    color: #cfdbe6;
    border: 1px solid rgba(255, 255, 255, .25);
    background: transparent;
    line-height: 1;
    padding: .3rem .5rem;
}
.btn-pl-theme-toggle:hover,
.btn-pl-theme-toggle:focus { background: rgba(255, 255, 255, .12); color: #fff; }
.btn-pl-theme-toggle i { line-height: 1; font-size: 1rem; }

/* Show the icon for the theme you would switch TO, so the control reads as "make it darker"
   rather than "you are currently in the dark". */
.pl-theme-icon-dark { display: none; }
[data-pl-theme="dark"] .pl-theme-icon-light { display: none; }
[data-pl-theme="dark"] .pl-theme-icon-dark { display: inline-block; }

/* ---------- Dark theme: Bootstrap's own greys ----------
   Bootstrap 5.1 compiles its palette to literal declarations rather than custom properties
   (.table { color:#212529 }, .text-muted { color:#6c757d!important }, ::placeholder, and so
   on). Re-pointing --pl-* therefore does not touch them, and because they are baked into
   component rules they beat inheritance from body. These have to be overridden by name. */

[data-pl-theme="dark"] .table,
[data-pl-theme="dark"] .pl-table {
    color: var(--pl-ink);
    --bs-table-color: var(--pl-ink);
    --bs-table-striped-color: var(--pl-ink);
    --bs-table-active-color: #fff;
    --bs-table-hover-color: #fff;
    --bs-table-striped-bg: rgba(255, 255, 255, .035);
    --bs-table-hover-bg: #1b2836;
    --bs-table-active-bg: #22303f;
}

[data-pl-theme="dark"] ::placeholder { color: #8296aa; opacity: 1; }

/* Light mode has the same Bootstrap grey problem: .text-muted is compiled to #6c757d, which is
   4.33:1 on the page background. Pointing it at --pl-muted gives 5.05:1 and keeps the muted text
   consistent with every other muted element in the design. */
.text-muted { color: var(--pl-muted) !important; }

/* Bootstrap's link blue (#0d6efd) is compiled straight into the `a` rule and measures 4.15:1 on
   the page background, just under the 4.5:1 needed for body text. It has to be overridden by
   selector because 5.1 exposes no variable for it. The dark-theme value below is the lighter
   counterpart; both are required, because the light value is far too dark to read on the dark
   surface. */
a { color: #0b5ed7; }
a:hover, a:focus { color: #0a58ca; }

[data-pl-theme="dark"] a { color: #74adf8; }
[data-pl-theme="dark"] a:hover,
[data-pl-theme="dark"] a:focus { color: #a3caff; }
/* No reset for <a class="btn">: the .btn-pl-* rules below already outrank this selector on
   specificity, so an explicit `color: inherit` here would only override the button's own ink
   with the page's. That mistake made accent button labels unreadable. */
[data-pl-theme="dark"] .form-control::placeholder,
[data-pl-theme="dark"] .form-select::placeholder { color: #8296aa; }
[data-pl-theme="dark"] .form-text,
[data-pl-theme="dark"] .text-muted,
[data-pl-theme="dark"] .text-muted-emphasis { color: var(--pl-muted) !important; }

/* Components that restyle Bootstrap's greys internally. */
[data-pl-theme="dark"] .form-check-label { color: var(--pl-ink); }
[data-pl-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--pl-muted); }
[data-pl-theme="dark"] .breadcrumb-item.active { color: var(--pl-muted); }
[data-pl-theme="dark"] .dropdown-menu {
    background-color: #17222e;
    border-color: var(--pl-line);
    color: var(--pl-ink);
}
[data-pl-theme="dark"] .dropdown-item { color: var(--pl-ink); }
[data-pl-theme="dark"] .dropdown-item:hover,
[data-pl-theme="dark"] .dropdown-item:focus { background-color: #22303f; color: #fff; }
[data-pl-theme="dark"] .dropdown-divider { border-color: var(--pl-line); }
[data-pl-theme="dark"] .modal-content { background-color: var(--pl-surface); border-color: var(--pl-line); color: var(--pl-ink); }
[data-pl-theme="dark"] .page-link { background-color: var(--pl-surface); border-color: var(--pl-line); color: var(--pl-ink); }
[data-pl-theme="dark"] .page-link:hover { background-color: #22303f; color: #fff; }
[data-pl-theme="dark"] .alert a,
[data-pl-theme="dark"] .alert-link { color: #9fd0f2; }

/* Accent buttons. Dark ink is set on .btn-pl-primary itself rather than only here, so light
   mode gets it too; this block just makes the hover state explicit for dark mode. */
[data-pl-theme="dark"] .btn-pl-primary,
[data-pl-theme="dark"] .btn-pl-primary:hover,
[data-pl-theme="dark"] .btn-pl-primary:focus {
    background: var(--pl-accent);
    border-color: var(--pl-accent);
    color: #14212c;
}
[data-pl-theme="dark"] .btn-pl-primary:hover,
[data-pl-theme="dark"] .btn-pl-primary:focus { background: #ffa14d; border-color: #ffa14d; }

/* ---------- Dark theme ----------
   Bootstrap 5.1 predates data-bs-theme (5.3), so the theme is implemented by re-pointing the
   --pl-* custom properties plus a set of overrides for the rules above that hardcoded a light
   colour. Nothing in the light theme is modified, so the default appearance is unchanged. */

[data-pl-theme="dark"] {
    --pl-bg: #0e1620;
    --pl-surface: #17222e;
    --pl-ink: #e6edf4;
    --pl-muted: #9fb0c2;
    --pl-line: #2c3b4b;
    --pl-navy: #0b1520;
    --pl-navy-dark: #060d14;
    --pl-accent: #ff6a1f;
    --pl-accent-dark: #e05000;
    --pl-teal: #35a3b3;
    --pl-green: #46b878;
    --pl-red: #e06565;
    --pl-amber: #d9a838;
    --pl-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .35);
}

/* Surfaces and text that relied on a hardcoded white or near-white. */
[data-pl-theme="dark"] .app-footer { background: var(--pl-surface); }
[data-pl-theme="dark"] .pl-navbar { background: linear-gradient(180deg, #0b1520 0%, #060d14 100%); }
[data-pl-theme="dark"] .pl-offcanvas { background: #0b1520; }

/* The navy is nearly black in dark mode, so anything that used it as an ink colour on a light
   surface has to become a light tone or it disappears. */
[data-pl-theme="dark"] .pl-card-title,
[data-pl-theme="dark"] .pl-stat-value,
[data-pl-theme="dark"] .pl-item-number,
[data-pl-theme="dark"] .pl-label-vehicle,
[data-pl-theme="dark"] .pl-table > thead th,
[data-pl-theme="dark"] .form-label { color: #e6edf4; }

/* Buttons whose label sat on --pl-navy: swap to the accent, which keeps a dark label legible. */
[data-pl-theme="dark"] .btn-pl-secondary { background: #24354a; border-color: #24354a; color: #e6edf4; }
[data-pl-theme="dark"] .btn-pl-secondary:hover,
[data-pl-theme="dark"] .btn-pl-secondary:focus { background: #2d4257; border-color: #2d4257; color: #fff; }
[data-pl-theme="dark"] .btn-pl-outline { border-color: #46596e; color: #e6edf4; background: transparent; }
[data-pl-theme="dark"] .btn-pl-outline:hover { background: #46596e; color: #fff; }

/* Bootstrap's own light-only surfaces. */
[data-pl-theme="dark"] .pl-table > thead th { background: #1d2b3a; }
[data-pl-theme="dark"] .pl-table > tbody tr:hover { background: #1b2836; }
[data-pl-theme="dark"] .pl-table { --bs-table-striped-bg: rgba(255, 255, 255, .03); --bs-table-hover-bg: #1b2836; }
[data-pl-theme="dark"] .card,
[data-pl-theme="dark"] .list-group-item { background-color: var(--pl-surface); border-color: var(--pl-line); color: var(--pl-ink); }

[data-pl-theme="dark"] .form-control,
[data-pl-theme="dark"] .form-select,
[data-pl-theme="dark"] .input-group-text {
    background-color: #101a25;
    border-color: var(--pl-line);
    color: var(--pl-ink);
}
[data-pl-theme="dark"] .form-control:focus,
[data-pl-theme="dark"] .form-select:focus {
    background-color: #101a25;
    border-color: #46607a;
    color: #fff;
    box-shadow: 0 0 0 .2rem rgba(245, 147, 49, .18);
}
[data-pl-theme="dark"] .form-control::placeholder { color: #7d8fa1; }
[data-pl-theme="dark"] .form-text { color: var(--pl-muted); }

/* Code and pre blocks, used for VINs, OEM numbers and SQL. */
[data-pl-theme="dark"] code,
[data-pl-theme="dark"] pre { background-color: #101a25; color: #d6e2ef; }

/* Neutral chips, steps and reason chips. */
[data-pl-theme="dark"] .pl-badge-neutral { background: #22303f; color: #b9c8d8; border-color: #33465a; }
[data-pl-theme="dark"] .pl-badge-info { background: #16324a; color: #9fd0f2; border-color: #234d6e; }
[data-pl-theme="dark"] .pl-reason { background: #22303f; color: #b9c8d8; border-color: #33465a; }
[data-pl-theme="dark"] .pl-steps li { background: #22303f; color: #b9c8d8; }
[data-pl-theme="dark"] .pl-relevance-bar,
[data-pl-theme="dark"] .pl-photo img,
[data-pl-theme="dark"] .pl-reference-image img { background: #22303f; }
[data-pl-theme="dark"] .pl-photo { background: #101a25; }
[data-pl-theme="dark"] .pl-sticky-actions { background: rgba(23, 34, 46, .96); }

/* Status badges: the same hue as the light theme, on a dark and desaturated fill. Contrast was
   checked against the surface colour rather than picked to match the originals. */
[data-pl-theme="dark"] .pl-badge-status-Selected    { background: #22303f; color: #b9c8d8; border-color: #33465a; }
[data-pl-theme="dark"] .pl-badge-status-Pulled      { background: #143042; color: #8ec9ea; border-color: #1f4d67; }
[data-pl-theme="dark"] .pl-badge-status-Processing  { background: #3a2a0c; color: #f0be6a; border-color: #553f14; }
[data-pl-theme="dark"] .pl-badge-status-ReadyForSale{ background: #123728; color: #7fd8ab; border-color: #1d5239; }
[data-pl-theme="dark"] .pl-badge-status-Listed      { background: #142f47; color: #8ec6f2; border-color: #1f4a6d; }
[data-pl-theme="dark"] .pl-badge-status-Sold        { background: #14361f; color: #85d6a4; border-color: #1d5231; }
[data-pl-theme="dark"] .pl-badge-status-Shipped     { background: #262449; color: #b3adf0; border-color: #3a3770; }
[data-pl-theme="dark"] .pl-badge-status-Completed   { background: #232f37; color: #a9bcc9; border-color: #36464f; }
[data-pl-theme="dark"] .pl-badge-status-Failed,
[data-pl-theme="dark"] .pl-badge-status-Damaged     { background: #3d1a1a; color: #f0a0a0; border-color: #5c2727; }
[data-pl-theme="dark"] .pl-badge-status-Scrapped    { background: #2f2724; color: #c8b3a6; border-color: #473c37; }
[data-pl-theme="dark"] .pl-badge-status-Returned    { background: #3a2510; color: #eeb582; border-color: #55381a; }
[data-pl-theme="dark"] .pl-badge-status-Lost        { background: #35191a; color: #eba3a3; border-color: #4f2526; }
[data-pl-theme="dark"] .pl-badge-status-Cancelled   { background: #262f36; color: #aebac4; border-color: #3a4650; }

[data-pl-theme="dark"] .pl-badge-conf-High   { background: #123728; color: #7fd8ab; border-color: #1d5239; }
[data-pl-theme="dark"] .pl-badge-conf-Medium { background: #3a2a0c; color: #f0be6a; border-color: #553f14; }
[data-pl-theme="dark"] .pl-badge-conf-Low    { background: #3d1a1a; color: #f0a0a0; border-color: #5c2727; }
[data-pl-theme="dark"] .pl-reason.negative { background: #3d1a1a; color: #f0a0a0; border-color: #5c2727; }
[data-pl-theme="dark"] .pl-reason.positive { background: #123728; color: #7fd8ab; border-color: #1d5239; }

/* Alerts keep their meaning but lose the harsh light fills. */
[data-pl-theme="dark"] .alert-success { background: #123728; border-color: #1d5239; color: #9fe3bf; }
[data-pl-theme="dark"] .alert-danger  { background: #3d1a1a; border-color: #5c2727; color: #f0b0b0; }
[data-pl-theme="dark"] .alert-warning { background: #3a2a0c; border-color: #553f14; color: #f3ca85; }
[data-pl-theme="dark"] .alert-info    { background: #142f47; border-color: #1f4a6d; color: #a8d0f5; }
[data-pl-theme="dark"] .alert-light   { background: #1d2b3a; border-color: var(--pl-line); color: var(--pl-ink); }
[data-pl-theme="dark"] .text-muted { color: var(--pl-muted) !important; }

/* Labels are printed on white paper, so the screen preview keeps the light palette even in dark
   mode. Without this, a preview would not match what comes out of the printer. */
[data-pl-theme="dark"] .pl-label { background: #fff; color: #1c2530; border-color: #9aa7b4; }
[data-pl-theme="dark"] .pl-label .pl-label-brand,
[data-pl-theme="dark"] .pl-label .pl-label-oem { color: #5b6b7c; }
[data-pl-theme="dark"] .pl-label .pl-label-vehicle { color: #14293f; }
[data-pl-theme="dark"] .pl-label .pl-label-part { color: #1c2530; }

/* ---------- Utilities ---------- */

.pl-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; }
.pl-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pl-truncate { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-sticky-actions { position: sticky; bottom: 0; background: rgba(255, 255, 255, .96); border-top: 1px solid var(--pl-line); padding: .6rem 0; z-index: 5; }

/* ---------- Print (labels, item detail) ---------- */

@media print {
    /* Printing always uses the light palette, whatever the screen is showing. A dark-theme
       print would waste toner and the barcode/QR would lose contrast against a dark fill. */
    html, body { background: #fff; color: #1c2530; }
    [data-pl-theme="dark"] { --pl-bg: #fff; --pl-surface: #fff; --pl-ink: #1c2530; --pl-muted: #5b6b7c; --pl-line: #dde3e9; }
    .app-header, .app-footer, .pl-no-print, .btn, .btn-pl-theme-toggle, .offcanvas { display: none !important; }
    main { padding: 0 !important; }
    .container-fluid { padding: 0 !important; max-width: none; }
    .pl-label { border: 1px solid #000; }
    .pl-label-sheet { grid-template-columns: repeat(3, 1fr); gap: .2cm; }
    a[href]::after { content: ""; }
}