/* ===========================================================================
   IHL CRM — application styling
   One place for the whole look: tokens, shell, cards, tables, forms.
   =========================================================================== */

:root {
    /* surfaces */
    --ihl-bg:            #f5f6f8;
    --ihl-surface:       #ffffff;
    --ihl-surface-alt:   #fafbfc;
    --ihl-border:        #e4e7ec;
    --ihl-border-strong: #d0d5dd;

    /* text */
    --ihl-text:          #101828;
    --ihl-text-soft:     #475467;
    --ihl-muted:         #98a2b3;

    /* sidebar */
    --ihl-nav-bg:        #0f1a33;
    --ihl-nav-bg-soft:   #16233f;
    --ihl-nav-text:      #b8c2d4;
    --ihl-nav-text-on:   #ffffff;
    --ihl-nav-active:    #1e63d0;

    /* accents */
    --ihl-primary:       #1e63d0;
    --ihl-primary-dark:  #1750ac;
    --ihl-amber-bg:      #fffbeb;
    --ihl-amber-line:    #fde3a7;
    --ihl-blue-bg:       #eef4ff;
    --ihl-blue-line:     #cddcff;
    --ihl-red-bg:        #fef3f2;
    --ihl-red-line:      #fecdca;
    --ihl-green:         #067647;
    --ihl-red:           #b42318;

    --ihl-radius:        10px;
    --ihl-shadow:        0 1px 2px rgba(16,24,40,.05);
    --ihl-shadow-lg:     0 4px 16px rgba(16,24,40,.08);
}

/* NOTE: colour-scheme and the dark palette are owned by theme.css, which loads
   after this file. Do not force a scheme here — it breaks Midnight Glass. */

html, body {
    background: var(--ihl-bg);
    color: var(--ihl-text);
    font-family: "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, -apple-system, Roboto, Arial, sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 { color: var(--ihl-text); font-weight: 600; letter-spacing: -.01em; }
h1.h3 { font-size: 1.6rem; }

a { color: var(--ihl-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* numbers line up in tables and tiles */
.fs-2, .fs-3, .fs-4, .fs-5, td.text-end, th.text-end { font-variant-numeric: tabular-nums; }

/* --- shell ---------------------------------------------------------------- */

.page { display: flex; min-height: 100vh; }

.sidebar {
    width: 250px;
    flex: 0 0 250px;
    background: var(--ihl-nav-bg);
    background-image: none;
    min-height: 100vh;
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    overflow-y: auto;
}

main { flex: 1; min-width: 0; background: var(--ihl-bg); }

.top-row {
    height: 56px;
    background: var(--ihl-surface);
    border-bottom: 1px solid var(--ihl-border);
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 30;
}

.content { padding: 1.5rem 1.75rem 3rem; max-width: 1500px; }

/* --- sidebar brand and links --------------------------------------------- */

.sidebar .navbar { height: auto; padding: 1.1rem 1rem .9rem; display: block; background: transparent; }
.sidebar .navbar-brand {
    color: #fff; font-size: 1.15rem; font-weight: 650; letter-spacing: -.01em; padding: 0;
}
.sidebar .navbar .small {
    color: #7d8ba6; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; margin-top: .15rem;
}

.nav-scrollable { display: block; }

.sidebar .nav-item { padding: 0 .6rem; margin-bottom: 1px; }

.sidebar .nav-link {
    color: var(--ihl-nav-text);
    border-radius: 7px;
    padding: .5rem .7rem;
    font-size: .875rem;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: .55rem;
    white-space: nowrap;
}
.sidebar .nav-link:hover { background: var(--ihl-nav-bg-soft); color: #fff; text-decoration: none; }
.sidebar .nav-link.active { background: var(--ihl-nav-active); color: #fff; font-weight: 550; }

.sidebar .nav-section {
    color: #6b7a99;
    font-size: .63rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    padding: 1rem 1.3rem .35rem;
}

/* the menu's groups (batch 89) - a heading that opens and closes; the sidebar is dark in both themes */
.sidebar details.nav-group { margin-top: .15rem; }
.sidebar details.nav-group > summary { list-style: none; cursor: pointer; user-select: none; color: #9aa7c0; font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: .8rem 1.3rem .4rem; display: flex; align-items: center; justify-content: space-between; }
.sidebar details.nav-group > summary::after { content: "\25B8"; font-size: .8rem; transition: transform .15s ease; }
.sidebar details.nav-group[open] > summary::after { transform: rotate(90deg); }
.sidebar details.nav-group > summary:hover { color: #fff; }

.sidebar .nav-ico { width: 16px; height: 16px; flex: 0 0 16px; opacity: .85; }
.sidebar .nav-link.active .nav-ico { opacity: 1; }

/* --- cards ---------------------------------------------------------------- */

.card {
    background: var(--ihl-surface);
    border: 1px solid var(--ihl-border);
    border-radius: var(--ihl-radius);
    box-shadow: var(--ihl-shadow);
}
.card-body { padding: 1.1rem 1.25rem; }

/* the four dashboard alert tiles */
.stat-tile { border-radius: var(--ihl-radius); border: 1px solid var(--ihl-border); padding: 1rem 1.15rem; height: 100%; }
.stat-tile .stat-label {
    font-size: .7rem; letter-spacing: .07em; text-transform: uppercase;
    color: var(--ihl-text-soft); font-weight: 600; display: flex; align-items: center; gap: .4rem;
}
.stat-tile .stat-value { font-size: 2rem; font-weight: 600; line-height: 1.15; margin-top: .35rem; }

.stat-amber { background: var(--ihl-amber-bg); border-color: var(--ihl-amber-line); }
.stat-blue  { background: var(--ihl-blue-bg);  border-color: var(--ihl-blue-line); }
.stat-red   { background: var(--ihl-red-bg);   border-color: var(--ihl-red-line); }
.stat-red .stat-value { color: var(--ihl-red); }
.stat-plain { background: var(--ihl-surface); }

/* stage tiles */
.stage-tile {
    background: var(--ihl-surface); border: 1px solid var(--ihl-border);
    border-radius: var(--ihl-radius); padding: .85rem 1rem; height: 100%;
    transition: border-color .12s ease, box-shadow .12s ease;
}
a:hover > .stage-tile { border-color: var(--ihl-primary); box-shadow: var(--ihl-shadow-lg); text-decoration: none; }
.stage-tile .stage-name { color: var(--ihl-text-soft); font-size: .82rem; }
.stage-tile .stage-count { font-size: 1.5rem; font-weight: 600; }

/* section label above a group of tiles */
.section-label {
    font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ihl-muted); font-weight: 600; margin-bottom: .6rem;
}

/* --- tables --------------------------------------------------------------- */

.table { --bs-table-bg: transparent; color: var(--ihl-text); margin-bottom: 0; }
.table > thead > tr > th {
    font-size: .68rem; letter-spacing: .07em; text-transform: uppercase;
    color: var(--ihl-muted); font-weight: 600; border-bottom: 1px solid var(--ihl-border);
    padding: .55rem .6rem; background: transparent;
}
.table > tbody > tr > td { padding: .55rem .6rem; border-bottom: 1px solid #f1f3f5; vertical-align: middle; }
.table-hover > tbody > tr:hover > * { background: #f7f9fc; }

/* --- forms ---------------------------------------------------------------- */

.form-label { color: var(--ihl-text-soft); font-weight: 500; margin-bottom: .25rem; }
.form-label.small.text-uppercase { font-size: .68rem; letter-spacing: .06em; color: var(--ihl-muted); font-weight: 600; }

.form-control, .form-select {
    border: 1px solid var(--ihl-border-strong);
    border-radius: 8px;
    padding: .45rem .65rem;
    font-size: .9rem;
    color: var(--ihl-text);
    background-color: #fff;
}
.form-control:focus, .form-select:focus {
    border-color: var(--ihl-primary);
    box-shadow: 0 0 0 3px rgba(30,99,208,.12);
}
.form-control::placeholder { color: #b3bac5; }
.form-text { color: var(--ihl-muted); font-size: .76rem; }

.form-check-input:checked { background-color: var(--ihl-primary); border-color: var(--ihl-primary); }

/* No up/down spinners on number fields — they get nudged by accident. */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* Calculated fields the user cannot type into. */
.field-readonly {
    background: #eef1f5;
    color: var(--ihl-text);
    border-color: var(--ihl-border);
    font-weight: 600;
}
.field-readonly:focus { background: #eef1f5; box-shadow: none; border-color: var(--ihl-border); }

/* Modal shown over the page — used by "Add new party" on Enter PO so the
   half-typed order is not lost. */
.ihl-modal-backdrop {
    position: fixed; inset: 0; background: rgba(16,24,40,.45);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 3rem 1rem; overflow: auto; z-index: 1050;
}
.ihl-modal {
    background: #fff; border-radius: 12px; width: 100%; max-width: 760px;
    box-shadow: 0 20px 50px rgba(16,24,40,.25);
}
.ihl-modal-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--ihl-border);
}
.ihl-modal-body { padding: 1.25rem; }
.ihl-modal-foot {
    padding: 1rem 1.25rem; border-top: 1px solid var(--ihl-border);
    display: flex; gap: .5rem; justify-content: flex-end;
}

/* A row of "pick exactly one" options in a form header. */
.pick-one { display: flex; gap: .35rem; flex-wrap: wrap; }
.pick-one .pick {
    border: 1px solid var(--ihl-border-strong);
    background: #fff;
    border-radius: 999px;
    padding: .3rem .8rem;
    font-size: .82rem;
    color: var(--ihl-text-soft);
    cursor: pointer;
    user-select: none;
    line-height: 1.3;
}
.pick-one .pick:hover { border-color: var(--ihl-primary); color: var(--ihl-primary); }
.pick-one .pick.on {
    background: var(--ihl-primary);
    border-color: var(--ihl-primary);
    color: #fff;
    font-weight: 550;
}

/* --- buttons -------------------------------------------------------------- */

.btn { border-radius: 8px; font-weight: 500; padding: .45rem .9rem; font-size: .9rem; }
.btn-lg { padding: .7rem 1rem; font-size: 1rem; }
.btn-sm { padding: .28rem .6rem; font-size: .8rem; }

.btn-primary { background: var(--ihl-primary); border-color: var(--ihl-primary); }
.btn-primary:hover, .btn-primary:focus { background: var(--ihl-primary-dark); border-color: var(--ihl-primary-dark); }

.btn-outline-secondary { border-color: var(--ihl-border-strong); color: var(--ihl-text-soft); }
.btn-outline-secondary:hover { background: #f2f4f7; color: var(--ihl-text); border-color: var(--ihl-border-strong); }

/* --- badges --------------------------------------------------------------- */

.badge { font-weight: 550; border-radius: 6px; padding: .3em .55em; font-size: .72rem; }
.badge.bg-light { background: #f2f4f7 !important; color: var(--ihl-text-soft) !important; border: 1px solid var(--ihl-border); }

/* An amber badge carries near-white text by default, and on the dark theme the
   words simply vanish. Bootstrap's .text-dark is one class and loses to the
   theme, so the colour is forced here - and this file loads before theme.css,
   so nothing weaker would win. */
.badge.bg-warning,
.badge.bg-warning.text-dark,
.badge.bg-info,
.badge.bg-info.text-dark {
    color: #1b1f27 !important;
    font-weight: 650;
}

.badge.bg-warning { background: #f0b429 !important; }
.badge.bg-info    { background: #66d3e8 !important; }

/* --- alerts --------------------------------------------------------------- */

.alert { border-radius: var(--ihl-radius); border-width: 1px; font-size: .88rem; }

/* --- login ---------------------------------------------------------------- */

/* Used by Forgotten password, Reset password and Change password. The sign-in
   page has its own look below (.lp-*) and no longer uses these two. Kept
   exactly as they were so those three screens are untouched. */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--ihl-bg); }
.login-card {
    width: 100%; max-width: 370px; background: #fff; padding: 2.25rem;
    border: 1px solid var(--ihl-border); border-radius: 14px; box-shadow: var(--ihl-shadow-lg);
}

/* --- the sign-in page (.lp-*) ---------------------------------------------

   Its own namespace, and its own colours, on purpose.

   This is the only screen an outsider ever sees, and it is the only screen in
   the CRM that is dark. Everything here is prefixed lp- so it cannot reach the
   rest of the application, and it does not read the theme variables - a person
   who has not signed in has no theme yet.

   The one behaviour worth knowing before changing anything: the password field
   starts parked ON TOP of the username field and slides out from underneath it.
   That only works while .lp-field-user is opaque and above it in the stacking
   order. Make the username box transparent and the trick shows its workings.
   --------------------------------------------------------------------------- */

.lp-page {
    --lp-ink:      #eef2f8;
    --lp-muted:    #a5b1c6;
    --lp-faint:    #6f7d95;
    --lp-gold:     #d4a853;
    --lp-gold-2:   #f1c672;
    --lp-on-gold:  #14192b;
    --lp-card:     rgba(17, 26, 46, .82);
    --lp-edge:     rgba(255, 255, 255, .10);
    --lp-input:    #1a2438;
    --lp-input-edge: rgba(255, 255, 255, .14);
    --lp-ok:       #4ade80;
    --lp-ok-edge:  #3e9c66;
    --lp-ok-bg:    #1b2c3a;
    --lp-bad:      #ff7b7b;
    --lp-ease:     cubic-bezier(.2, .8, .2, 1);
    --lp-morph:    cubic-bezier(.55, 0, .15, 1);
    --lp-morph-t:  .9s;

    position: relative;
    min-height: 100vh; min-height: 100dvh;
    overflow-x: hidden;
    color: var(--lp-ink);
    background: linear-gradient(135deg, #0b1220, #111a2e 55%, #0d1626);
    font-size: 1rem;
}

/* --- the drifting light behind everything --- */
.lp-orbs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.lp-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .35; animation: lp-drift 22s ease-in-out infinite alternate; }
.lp-orb-a { width: 46vmax; height: 46vmax; left: -12vmax; top: -14vmax; background: #1e3a8a; }
.lp-orb-b { width: 40vmax; height: 40vmax; right: -10vmax; top: 10vmax; background: #7c3aed; animation-delay: -7s; }
.lp-orb-c { width: 36vmax; height: 36vmax; left: 25vmax; bottom: -18vmax; background: #0f766e; animation-delay: -14s; }
@keyframes lp-drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(4vmax,3vmax,0) scale(1.08); } }

/* --- the wash: amber once the name is in, red on a refusal --- */
.lp-wash { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; background: transparent; transition: opacity .9s var(--lp-ease), background .6s var(--lp-ease); }
.lp-page[data-wash="ok"]  .lp-wash { opacity: 1; background: rgba(234, 179, 8, .20); }
.lp-page[data-wash="bad"] .lp-wash { opacity: 1; background: rgba(239, 68, 68, .26); transition: opacity .35s var(--lp-ease), background .35s var(--lp-ease); }

.lp-top { position: relative; z-index: 2; padding: max(14px, env(safe-area-inset-top)) clamp(16px, 4vw, 40px) 0; }
.lp-mini { display: inline-flex; align-items: center; gap: 10px; font-size: .875rem; font-weight: 600; color: var(--lp-muted); }
.lp-mini .lp-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--lp-gold); box-shadow: 0 0 0 4px rgba(212, 168, 83, .18); }

/* This is a <main>, and the application already gives every <main> the light
   page background. Without this line that light grey paints straight over the
   gradient and the orbs, and only the strip above and below the stage shows
   through - which is exactly what it did the first time.

   Named by class, not by tag: `.lp-page aside` would have beaten `.lp-glass`
   and taken the side panel's own background away with it. */
.lp-page .lp-top, .lp-page .lp-stage { background: transparent; }

.lp-stage {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 330px);
    gap: clamp(18px, 3vw, 36px); justify-content: center; align-content: center; align-items: stretch;
    padding: clamp(20px, 5vh, 56px) clamp(16px, 4vw, 40px) max(32px, env(safe-area-inset-bottom));
    min-height: calc(100vh - 60px); min-height: calc(100dvh - 60px);
}

.lp-glass {
    background: var(--lp-card); border: 1px solid var(--lp-edge); border-radius: 22px;
    box-shadow: 0 30px 80px -30px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.08) inset;
    -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
}
.lp-card { padding: clamp(26px, 4vw, 44px); position: relative; overflow: hidden; display: flex; flex-direction: column; }

.lp-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.lp-logo { width: 48px; height: 48px; border-radius: 14px; flex: none; background: linear-gradient(135deg, var(--lp-gold), var(--lp-gold-2)); display: grid; place-items: center; color: var(--lp-on-gold); box-shadow: 0 10px 24px -10px rgba(212, 168, 83, .7); }
.lp-brand h1 { margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; color: var(--lp-ink); }
.lp-brand p { margin: 2px 0 0; font-size: .8125rem; color: var(--lp-muted); }

/* The colour is spelt out, not inherited. The application sets a dark colour on
   every h2, and a rule on the element beats a colour inherited from .lp-page -
   so "Sign in" came out near-black on a near-black card and simply was not
   there. Anything added to this page from here on needs its own colour for the
   same reason. */
.lp-card h2 { margin: 0 0 6px; font-size: 1.625rem; font-weight: 700; letter-spacing: -.02em; color: var(--lp-ink); }
.lp-sub { margin: 0 0 22px; color: var(--lp-muted); font-size: .9375rem; line-height: 1.45; }
.lp-sub span { display: inline-block; transition: opacity .25s var(--lp-ease), transform .3s var(--lp-ease); }
.lp-sub.lp-swap span { opacity: 0; transform: translateY(6px); }

.lp-banner { border-radius: 12px; padding: .7rem .85rem; font-size: .875rem; line-height: 1.45; margin-bottom: 18px; }
.lp-banner-bad { color: var(--lp-bad); background: rgba(255, 123, 123, .10); border: 1px solid rgba(255, 123, 123, .28); }
.lp-banner-ok  { color: var(--lp-ok);  background: rgba(74, 222, 128, .10); border: 1px solid rgba(74, 222, 128, .28); }

.lp-page label { display: block; font-size: .8125rem; font-weight: 600; color: var(--lp-muted); margin: 0 0 8px; }
.lp-field { position: relative; margin-bottom: 14px; }
.lp-page .lp-input {
    width: 100%; height: 52px; padding: 0 16px; font: inherit; font-size: 1rem; color: var(--lp-ink);
    background: var(--lp-input); border: 1px solid var(--lp-input-edge); border-radius: 14px; outline: 0;
    transition: border-color .25s var(--lp-ease), box-shadow .25s var(--lp-ease), background .3s var(--lp-ease), padding .45s var(--lp-ease);
}
.lp-page .lp-input::placeholder { color: var(--lp-faint); }
.lp-page .lp-input:focus { border-color: var(--lp-gold); box-shadow: 0 0 0 4px rgba(212, 168, 83, .28); }
.lp-field.lp-invalid .lp-input { border-color: var(--lp-bad); box-shadow: 0 0 0 4px rgba(255, 123, 123, .14); animation: lp-shake .4s var(--lp-ease); }
@keyframes lp-shake { 20%{transform:translateX(-5px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)} }

.lp-msg { min-height: 20px; margin: 0 0 12px; font-size: .875rem; line-height: 1.45; color: var(--lp-bad); opacity: 0; transform: translateY(-4px); transition: opacity .3s var(--lp-ease), transform .3s var(--lp-ease); }
.lp-msg.lp-show { opacity: 1; transform: none; }

/* the username box, once it has been accepted */
.lp-ubox { position: relative; }
.lp-avatar { position: absolute; left: 9px; top: 50%; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--lp-gold), var(--lp-gold-2)); color: var(--lp-on-gold); display: grid; place-items: center; font-size: .875rem; font-weight: 800; transform: translateY(-50%) scale(.4); opacity: 0; pointer-events: none; transition: transform .45s var(--lp-ease), opacity .3s var(--lp-ease); }
.lp-tick { position: absolute; right: 14px; top: 50%; width: 24px; height: 24px; border-radius: 50%; background: var(--lp-ok); color: #0b1220; display: grid; place-items: center; transform: translateY(-50%) scale(0); opacity: 0; pointer-events: none; transition: transform .45s cubic-bezier(.34,1.56,.64,1) .1s, opacity .2s .1s; }
.lp-field-user.lp-locked .lp-input { padding-left: 54px; padding-right: 48px; font-weight: 700; cursor: pointer; background: var(--lp-ok-bg); border-color: var(--lp-ok-edge); }
.lp-field-user.lp-locked .lp-avatar { transform: translateY(-50%) scale(1); opacity: 1; }
.lp-field-user.lp-locked .lp-tick { transform: translateY(-50%) scale(1); opacity: 1; }

/* The trick. The password row has no height until it opens, and the field
   inside starts translated up onto the username box wearing its colours. */
.lp-field-user { position: relative; z-index: 2; }

/* Open by default, closed only once login.js has said it is there (.lp-js).
   The order matters. If the script is blocked, cached broken or too old, the
   password box has to be on screen and usable - a sign-in page that cannot be
   signed in to is the worst failure this file could have. So the plain page is
   the working one, and the animation is added on top of it. */
.lp-pw-wrap { display: grid; grid-template-rows: 1fr; position: relative; z-index: 1; transition: grid-template-rows var(--lp-morph-t) var(--lp-morph); }
.lp-pw-wrap > .lp-pw-inner { min-height: 0; }
.lp-js .lp-pw-wrap { grid-template-rows: 0fr; }
.lp-js .lp-pw-wrap > .lp-pw-inner { visibility: hidden; transition: visibility 0s linear var(--lp-morph-t); }
.lp-js .lp-pw-wrap.lp-open { grid-template-rows: 1fr; }
.lp-js .lp-pw-wrap.lp-open > .lp-pw-inner { visibility: visible; transition: visibility 0s; }
.lp-pw-inner .lp-field { margin-top: 4px; transform-origin: 50% 0; transition: transform var(--lp-morph-t) var(--lp-morph); }
.lp-js .lp-pw-inner label { transition: opacity .3s var(--lp-ease) .7s; }
.lp-js .lp-pw-wrap:not(.lp-open) .lp-pw-inner label { opacity: 0; transition-delay: 0s; }
.lp-pw-inner .lp-field.lp-morph .lp-input { transition: border-color var(--lp-morph-t) var(--lp-morph), background var(--lp-morph-t) var(--lp-morph), box-shadow .25s var(--lp-ease), padding .45s var(--lp-ease); }
.lp-pw-inner .lp-field.lp-from-user .lp-input { border-color: var(--lp-ok-edge); background: var(--lp-ok-bg); }
.lp-pw-inner .lp-field.lp-morph .pwd-eye { opacity: 0; transition: opacity .3s var(--lp-ease) .7s; }
.lp-page .pwd-eye { color: var(--lp-muted); }
.lp-page .pwd-eye:hover { color: var(--lp-ink); }

.lp-actions { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.lp-page .lp-btn { appearance: none; border: 0; font: inherit; font-size: .9375rem; font-weight: 700; cursor: pointer; height: 50px; padding: 0 22px; border-radius: 14px; transition: transform .25s var(--lp-ease), box-shadow .25s var(--lp-ease), opacity .3s; }
.lp-btn-main { flex: 1; color: var(--lp-on-gold); background: linear-gradient(135deg, var(--lp-gold), var(--lp-gold-2)); box-shadow: 0 14px 28px -14px rgba(212, 168, 83, .8); }
.lp-btn-main:hover { transform: translateY(-2px); }
.lp-btn-main:active { transform: translateY(0); }
.lp-btn-main[disabled] { opacity: .7; cursor: progress; transform: none; }
.lp-btn-ghost { background: rgba(212, 168, 83, .14); color: var(--lp-ink); max-width: 0; padding: 0; opacity: 0; overflow: hidden; white-space: nowrap; transition: max-width .45s var(--lp-ease), padding .45s var(--lp-ease), opacity .3s var(--lp-ease); }
.lp-btn-ghost.lp-show { max-width: 120px; padding: 0 18px; opacity: 1; }
.lp-btn .lp-lbl { display: inline-block; transition: opacity .18s, transform .25s var(--lp-ease); }
.lp-btn.lp-relabel .lp-lbl { opacity: 0; transform: translateY(6px); }
.lp-spin { display: inline-block; width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -4px; margin-right: 8px; animation: lp-spin .7s linear infinite; }
@keyframes lp-spin { to { transform: rotate(360deg); } }

.lp-foot { margin-top: 22px; font-size: .75rem; color: var(--lp-faint); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lp-foot a { color: var(--lp-muted); text-decoration: none; }
.lp-foot a:hover { text-decoration: underline; color: var(--lp-ink); }

.lp-side { padding: clamp(22px, 3vw, 30px); display: flex; flex-direction: column; gap: 16px; }
.lp-kicker { font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--lp-muted); margin: 0; }
.lp-date { font-size: 1.375rem; font-weight: 700; margin: 6px 0 0; letter-spacing: -.01em; }
.lp-dow { color: var(--lp-muted); font-size: .875rem; margin: 2px 0 0; }
.lp-rule { height: 1px; background: var(--lp-edge); margin: 2px 0; }
.lp-side .lp-spacer { flex: 1; }
.lp-tiny { font-size: .75rem; color: var(--lp-faint); margin: 0; }

/* --- the other three credential screens ------------------------------------

   Forgotten password, Reset password and Change password. Same shell, one card
   and no side panel: none of them has anything to put beside the form, and a
   half-empty panel reads as something that failed to load.

   They are here rather than in their own block because the whole point is that
   they are the same page. "Forgotten your password?" used to walk a person from
   a dark screen onto a white one, which looks like leaving the application.
   --------------------------------------------------------------------------- */
.lp-stage.lp-solo { grid-template-columns: minmax(0, 440px); }
.lp-page .lp-btn-wide { display: grid; place-items: center; width: 100%; flex: none; text-decoration: none; }
.lp-lead { margin: 0 0 22px; color: var(--lp-muted); font-size: .9375rem; line-height: 1.55; }
.lp-lead strong { color: var(--lp-ink); font-weight: 700; }
.lp-help { margin: 8px 0 0; font-size: .75rem; color: var(--lp-faint); line-height: 1.5; }
.lp-note { margin: 22px 0 0; font-size: .75rem; color: var(--lp-faint); line-height: 1.55; }
.lp-center { text-align: center; margin-top: 18px; }
.lp-center a { color: var(--lp-muted); font-size: .8125rem; text-decoration: none; }
.lp-center a:hover { color: var(--lp-ink); text-decoration: underline; }
/* A stack owns the spacing between its rows, so the fields inside it drop their
   own bottom margin - otherwise the gap and the margin add up and the form
   sprawls down the card. */
.lp-stack { display: flex; flex-direction: column; gap: 18px; }
.lp-stack .lp-field { margin-bottom: 0; }

@media (max-width: 900px) {
    .lp-stage { grid-template-columns: minmax(0, 520px); min-height: auto; }
    .lp-side { order: 2; }
}
@media (max-width: 480px) {
    .lp-card { padding: 22px 18px; }
    .lp-card h2 { font-size: 1.4375rem; }
}
@media (prefers-reduced-motion: reduce) {
    .lp-page *, .lp-page *::before, .lp-page *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important;
    }
}

/* --- misc ----------------------------------------------------------------- */

.list-group-item { border-color: #f1f3f5; }

#blazor-error-ui {
    background: #fff3cd; bottom: 0; display: none; left: 0; padding: .7rem 1.25rem;
    position: fixed; width: 100%; z-index: 1000; box-shadow: 0 -1px 2px rgba(0,0,0,.1);
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

.blazor-error-boundary { background: var(--ihl-red-bg); padding: 1rem; color: var(--ihl-red); border-radius: var(--ihl-radius); }

@media (max-width: 991.98px) {
    .page { flex-direction: column; }
    .sidebar { width: 100%; flex: none; height: auto; min-height: 0; position: static; }
    .content { padding: 1rem; }
}

/* ---------------------------------------------------------------------------
   Text-size control in the top bar: A · A+ · A++ plus a slider.
   Sized in px on purpose - it must not grow along with the text it controls.
   --------------------------------------------------------------------------- */
.font-scale {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 6px;
    border: 1px solid rgba(120, 130, 150, .28);
    border-radius: 999px;
    background: rgba(255, 255, 255, .35);
}

.font-scale .fs-btn {
    border: 0;
    background: transparent;
    color: inherit;
    opacity: .65;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 11px;
    cursor: pointer;
}

.font-scale .fs-btn.fs-mid { font-size: 13px; }
.font-scale .fs-btn.fs-big { font-size: 15px; }

.font-scale .fs-btn:hover { opacity: 1; background: rgba(120, 130, 150, .16); }

.font-scale .fs-btn.on {
    opacity: 1;
    background: rgba(99, 102, 241, .18);
    box-shadow: inset 0 0 0 1px rgba(99, 102, 241, .45);
}

.font-scale .fs-range {
    width: 82px;
    height: 14px;
    margin: 0 4px;
    accent-color: #6366f1;
    cursor: pointer;
}

.font-scale .fs-pct {
    font-size: 10px;
    opacity: .6;
    min-width: 30px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

html[data-theme="dark"] .font-scale {
    border-color: rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .06);
}

@media (max-width: 900px) {
    .font-scale .fs-range,
    .font-scale .fs-pct { display: none; }
}


/* ---------------------------------------------------------------------------
   Calculated boxes the user cannot type into — Sale amount, Billing party.

   Bootstrap styles .form-control[readonly] itself, and that selector outranks
   a single class, so the box came out light grey with near-white text on the
   dark theme. !important is the honest fix here: app.css is loaded BEFORE
   theme.css, so nothing weaker can win.

   The colours are the theme's own variables, with a neutral fallback, so this
   follows whatever the theme does next without needing to be touched again.
   --------------------------------------------------------------------------- */
.form-control[readonly].field-readonly,
.form-select[readonly].field-readonly,
input.field-readonly,
.field-readonly {
    background: var(--lg-fill, var(--ihl-glass-hover, rgba(127, 127, 127, .14))) !important;
    color: var(--ink, var(--ihl-text, inherit)) !important;
    -webkit-text-fill-color: var(--ink, var(--ihl-text, inherit));
    border-color: transparent !important;
    opacity: 1 !important;
    font-weight: 600;
}

.form-control[readonly].field-readonly:focus,
input.field-readonly:focus {
    box-shadow: none !important;
}

/* ---------------------------------------------------------------------------
   HIDE THE BACKGROUND COLOUR PICKER

   theme.js still builds the rainbow button next to the theme toggle. Ashu asked
   for it to go, and it is not ours to delete from their script, so it is hidden
   here instead. One rule, and dropping it brings the button straight back.
   --------------------------------------------------------------------------- */
.wall-pick { display: none !important; }

/* ---------------------------------------------------------------------------
   TICK BOXES MUST BE VISIBLE

   theme.css gives .form-check-input a white border on a white card, so the box
   simply was not there - only its words. Ashu could not see "No GSTIN (NA)" at
   all. A grey that reads on both the light and the dark theme fixes it.

   !important is needed because theme.css loads after this file. Same reason as
   the readonly fields above; see CLAUDE.md.
   --------------------------------------------------------------------------- */

.form-check-input {
    width: 1.05em;
    height: 1.05em;
    border: 1px solid rgba(110, 120, 140, .70) !important;
    background-color: rgba(255, 255, 255, .92) !important;
}

html[data-theme="dark"] .form-check-input {
    border-color: rgba(190, 200, 220, .55) !important;
    background-color: rgba(255, 255, 255, .10) !important;
}

/* Bootstrap draws the tick itself as a background image on :checked, so only
   the two colours underneath it need setting. */
.form-check-input:checked {
    background-color: var(--ihl-primary) !important;
    border-color: var(--ihl-primary) !important;
}

.form-check-input:focus {
    border-color: var(--ihl-primary) !important;
    box-shadow: 0 0 0 .2rem rgba(30, 99, 208, .18) !important;
}

/* ---------------------------------------------------------------------------
   COUNTRY CODE + MOBILE NUMBER

   The two sit in one input-group and read as a single field. The select was
   sized to its content, which left the arrow sitting on top of the code. It now
   has a fixed width: wide enough for "+91 India" plus the arrow, and long
   country names simply trim - the dial code comes first, which is the part
   anyone is looking for.
   --------------------------------------------------------------------------- */

.cc-select {
    flex: 0 0 8.5rem;
    width: 8.5rem;
    text-overflow: ellipsis;
}

/* The number itself takes whatever is left, and never shrinks below something
   a ten-digit number fits into. */
.input-group > .form-control[type="tel"] {
    flex: 1 1 auto;
    min-width: 9rem;
}

/* ---------------------------------------------------------------------------
   THE ADD-PARTY DIALOG: ONE SCREEN, READABLE LABELS

   It had grown past the bottom of the screen, so saving meant scrolling. Two
   things fix that without shrinking the text: less air between the rows, and a
   wider box so the same fields need fewer rows.

   The labels go the other way - darker and two pixels larger, because they were
   the hardest thing on the form to read. The size is written as
   calc(.875rem + 2px) rather than a flat number so the A / A+ / A++ control
   still scales them.
   --------------------------------------------------------------------------- */

/* Wider, and standing closer to the top, so more fits above the fold. */
.ihl-modal-backdrop { padding: 1.25rem 1rem; align-items: flex-start; }
.ihl-modal { max-width: 880px; }

.ihl-modal-head { padding: .7rem 1.1rem; }
.ihl-modal-body { padding: .9rem 1.1rem; }
.ihl-modal-foot { padding: .7rem 1.1rem; }

/* Bootstrap's g-3 is 1rem each way; this is the same grid, tightened. */
.ihl-modal .row.g-3 {
    --bs-gutter-x: .75rem;
    --bs-gutter-y: .6rem;
}

.ihl-modal .form-label {
    margin-bottom: .15rem;
    font-size: calc(.875rem + 2px);
    font-weight: 600;
    color: var(--ihl-text, #101828);
    letter-spacing: .01em;
}

/* .small on the label would undo the size above, so it is overridden here. */
.ihl-modal .form-label.small { font-size: calc(.875rem + 2px); }

.ihl-modal .form-control,
.ihl-modal .form-select {
    padding-top: .32rem;
    padding-bottom: .32rem;
}

.ihl-modal textarea.form-control { min-height: 3.2rem; }

/* The hint and error lines under a field: close to it, and not taking a
   full line's worth of space when they are empty. */
.ihl-modal .form-text { margin-top: .1rem; line-height: 1.25; }
.ihl-modal .form-check { margin-top: .25rem !important; }

/* The section headings ("PERSON", "BILLING PARTY") need less room than a
   full grid row gives them. */
.ihl-modal .row.g-3 > .col-12.pt-2 { padding-top: .35rem !important; }

/* ---------------------------------------------------------------------------
   THE MARKETED BY PANEL

   It stays folded away until a marketing name is typed. A party often will not
   say who markets for them at the start, and an empty form should not be
   carrying five boxes nobody is going to fill.

   Inset rather than outlined, so it reads as "part of the billing block" and
   not as a second form.
   --------------------------------------------------------------------------- */

.ihl-modal .mb-panel {
    border-radius: 10px;
    padding: .7rem .8rem .8rem;
    background: rgba(127, 127, 127, .07);
    border: 1px solid rgba(127, 127, 127, .18);
}

html[data-theme="dark"] .ihl-modal .mb-panel {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .10);
}

/* The file box is taller than a text box by default and would break the row. */
.ihl-modal .mb-panel input[type="file"],
.mb-drawer input[type="file"] {
    padding-top: .28rem;
    padding-bottom: .28rem;
}

/* ---------------------------------------------------------------------------
   THE MARKETED-BY SIDE PANEL

   The marketing firm's details used to unfold between the billing fields, which
   pushed everything below them down the page and made the form scroll. They are
   also a DIFFERENT company's details, and a separate surface says that more
   plainly than an indent does.

   It is fixed to the right edge rather than inside the dialog so it never has to
   fit within the dialog's width. Below 700px there is no room beside the form,
   so it covers the screen instead - a 300px panel squeezed against a 400px form
   would be neither.

   It lives INSIDE the .ihl-modal element in the markup even though it paints
   outside it. That is what makes it look like the rest of the dialog: every
   label, input and select rule in theme.css is written as
   "html .ihl-modal .form-control", so a panel that is a SIBLING of the dialog
   gets none of them and comes out as invisible boxes on a white slab. Being a
   descendant costs nothing - position:fixed still measures from the viewport -
   and it inherits the whole theme for free.
   --------------------------------------------------------------------------- */

.mb-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 100vw);
    display: flex;
    flex-direction: column;
    z-index: 1060;                 /* above .ihl-modal, which is 1050 */
    /* Same token the dialog itself uses, so the two always match. */
    background: var(--ihl-surface, #fff);
    color: var(--ihl-text);
    border-left: 1px solid var(--ihl-border, rgba(127, 127, 127, .25));
    box-shadow: -18px 0 40px rgba(0, 0, 0, .35);
}

.mb-drawer-head,
.mb-drawer-foot {
    flex: 0 0 auto;
    padding: .85rem 1rem;
}

.mb-drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
    border-bottom: 1px solid var(--ihl-border, rgba(127, 127, 127, .22));
}

.mb-drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem;
}

.mb-drawer-foot {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    border-top: 1px solid var(--ihl-border, rgba(127, 127, 127, .22));
}

/* ---------------------------------------------------------------------------
   THE GREEN SWITCH

   Bootstrap's .form-switch already draws a sliding pill; all this does is make
   it read at a glance - bigger, and green when on, because every one of these
   answers a yes/no question where "on" is the settled state.
   --------------------------------------------------------------------------- */

.ihl-modal .form-switch .form-check-input,
.mb-drawer .form-switch .form-check-input {
    width: 2.1rem;
    height: 1.15rem;
    margin-top: .08rem;
    cursor: pointer;
    background-color: rgba(127, 127, 127, .35);
    border-color: rgba(127, 127, 127, .35);
    transition: background-color .15s ease, border-color .15s ease;
}

.ihl-modal .form-switch .form-check-input:checked,
.mb-drawer .form-switch .form-check-input:checked {
    background-color: #2aa952 !important;
    border-color: #2aa952 !important;
}

.ihl-modal .form-switch .form-check-input:focus,
.mb-drawer .form-switch .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(42, 169, 82, .22);
}

/* The label has to clear the wider pill, or the two overlap. */
.ihl-modal .form-switch .form-check-label,
.mb-drawer .form-switch .form-check-label { cursor: pointer; padding-left: .15rem; }

/* ---------------------------------------------------------------------------
   MARKETING NAME CHIPS, under each billing firm

   A badge that is really a button. It sits under the bill name so the question
   "which name goes on this firm's pack" is answered where it is asked, and
   clicking it opens that name rather than a list to find it in.

   Green is not decoration: it means the same name is billed by another of this
   person's firms too. Sharing is the rare case and the whole reason the link
   table exists, so it is the one worth marking - the ordinary one-firm-one-name
   case stays plain.
   --------------------------------------------------------------------------- */

.mb-chip {
    border: 0;
    cursor: pointer;
    font-weight: 600;
    line-height: 1.1;
}

.mb-chip:hover  { filter: brightness(1.15); }

/* The + that adds a name to a firm. Bigger than a link, because it is the only
   way in on a firm that has no name yet and it was being missed. */
.mb-plus {
    font-size: 1.15rem;
    line-height: 1;
    font-weight: 700;
    text-decoration: none;
}
.mb-plus:hover { text-decoration: none; }
.mb-chip:focus  { outline: 2px solid rgba(127, 127, 127, .45); outline-offset: 1px; }

/* ---------------------------------------------------------------------------
   ON / OFF, where OFF is an answer

   The switches above answer "is this true yet" - grey off is right for those,
   because off there means nobody has said otherwise. This one is different:
   somebody deliberately switched a marketing name off, and grey would read as
   "not set up yet" rather than "turned off". So off is red and on is green, and
   the state is visible across a whole table without reading a single label.

   !important on both, and the knob image spelled out for the off state too:
   Bootstrap only supplies the white knob for :checked, so on a red pill the
   default dark knob disappears.
   --------------------------------------------------------------------------- */

.ihl-modal .form-switch.ihl-onoff .form-check-input {
    background-color: #c8383f !important;
    border-color:     #c8383f !important;
    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");
}

.ihl-modal .form-switch.ihl-onoff .form-check-input:checked {
    background-color: #2aa952 !important;
    border-color:     #2aa952 !important;
}

.ihl-modal .form-switch.ihl-onoff .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(127, 127, 127, .25);
}

/* The pill and its word sit on one line inside a table cell, so no bottom
   margin and no Bootstrap indent for a check that has no floated input. */
.ihl-modal .form-check.form-switch.ihl-onoff { padding-left: 0; min-height: 0; }
.ihl-modal .form-switch.ihl-onoff .form-check-input { float: none; margin-left: 0; }

/* ---------------------------------------------------------------------------
   DOMESTIC / EXPORT / BOTH

   Three states, one answer - so three buttons that look like one control,
   rather than a dropdown that hides two of the three.
   --------------------------------------------------------------------------- */

.trade-pick { display: inline-flex; gap: 0; }

.trade-pick .btn {
    border-radius: 0;
    padding: .3rem .95rem;
    font-size: .85rem;
}
.trade-pick .btn:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.trade-pick .btn:last-child  { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.trade-pick .btn + .btn      { margin-left: -1px; }
.trade-pick .btn.active      { z-index: 1; }

/* ---------------------------------------------------------------------------
   TABS ARE BUTTONS, NOT LINKS

   They used to be <a href="#">. Blazor's router sees the click before the
   component's preventDefault runs, so every tab click navigated away — the
   Duplicates page landed you on the Dashboard. A button cannot navigate at all,
   which is the honest fix; these rules just make it look the way the link did.
   --------------------------------------------------------------------------- */

.nav-tabs .nav-link {
    background: none;
    border: 1px solid transparent;
    font: inherit;
    cursor: pointer;
}
.nav-tabs .nav-link:focus { outline: none; box-shadow: none; }

/* ---------------------------------------------------------------------------
   THE PARTY PREVIEW

   A label-and-value list rather than a form: the whole point of the preview is
   that it cannot be typed into, so it should not look like something that can.
   --------------------------------------------------------------------------- */

.pv-sect {
    font-size: .66rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ihl-muted);
    margin: 1rem 0 .4rem;
    padding-bottom: .25rem;
    border-bottom: 1px solid var(--ihl-border, rgba(127, 127, 127, .22));
}
.pv-sect:first-child { margin-top: 0; }

dl.pv {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: .2rem .75rem;
    margin: 0 0 .9rem;
    font-size: .87rem;
}
dl.pv dt { color: var(--ihl-muted); font-weight: 600; font-size: .8rem; }
dl.pv dd { margin: 0; }

@media (max-width: 560px) {
    dl.pv { grid-template-columns: 1fr; gap: 0 0; }
    dl.pv dt { margin-top: .5rem; }
}

/* The two spelled-out lines under a contact's name on the Parties page. */
.party-lines > div { margin-bottom: .1rem; }
.party-lines .text-uppercase { margin-right: .4rem; letter-spacing: .03em; }

/* ---------------------------------------------------------------------------
   FILE PICKERS MUST STAY INSIDE THEIR COLUMN

   Chrome sizes "Choose File" from the chosen file's name, so a long name pushes
   the control past the edge of its grid column and out of the card. Nothing in
   Bootstrap stops that, because the overflow comes from the native button, not
   the box around it.
   --------------------------------------------------------------------------- */

.ihl-modal input[type="file"],
.mb-drawer input[type="file"] {
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The chosen file is shown as its own line underneath, so the control itself
   does not need to be wide enough to spell it out. */
.ihl-modal input[type="file"]::file-selector-button,
.mb-drawer input[type="file"]::file-selector-button {
    margin-right: .5rem;
    padding: .1rem .5rem;
    border: 0;
    border-radius: 6px;
    background: rgba(127, 127, 127, .22);
    color: inherit;
    font-size: .82em;
    cursor: pointer;
    transition: background .12s ease;
}

/* Chrome paints its own light grey on hover and a lighter one while held down,
   which reads as a white flash on the dark theme. Both states have to be named
   or the browser default wins. */
.ihl-modal input[type="file"]::file-selector-button:hover,
.mb-drawer input[type="file"]::file-selector-button:hover {
    background: rgba(127, 127, 127, .34);
    color: inherit;
}

.ihl-modal input[type="file"]::file-selector-button:active,
.mb-drawer input[type="file"]::file-selector-button:active {
    background: rgba(127, 127, 127, .44);
    color: inherit;
}

.ihl-modal .form-text {
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
   THE PAGER

   One bar under every long list. It lays out as three parts — count, buttons,
   page size — and wraps to two lines on a narrow screen rather than squeezing
   the buttons to unclickable.
   --------------------------------------------------------------------------- */

.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: .75rem;
    padding-top: .6rem;
    border-top: 1px solid var(--ihl-border, rgba(127, 127, 127, .22));
}

.pager-count { font-size: .82rem; color: var(--ihl-muted); }
.pager-count strong { color: var(--ihl-text); font-weight: 650; }

.pager-buttons { display: flex; gap: .2rem; flex-wrap: wrap; }
.pager-buttons .btn { min-width: 2.1rem; padding: .2rem .5rem; font-size: .8rem; }

.pager-size { display: flex; align-items: center; }
.pager-size .form-select { width: auto; padding: .15rem 1.6rem .15rem .5rem; font-size: .8rem; }

@media (max-width: 640px) {
    .pager { justify-content: center; }
    .pager-count { width: 100%; text-align: center; }
}

/* A page shown inside a pop-up frame (App.razor marks it "in-frame"): only
   the page's own content - no sidebar, no top bar, no wasted margin. The
   rules are !important because theme.css loads after this file. */
html.in-frame .sidebar,
html.in-frame .top-row { display: none !important; }
html.in-frame .content { padding: .75rem 1rem 1.5rem !important; max-width: none !important; }

/* The record pop-up: a wide modal holding one page in a frame, with a way
   out to the full page. Used by the Audit Trail's PO links. */
.ihl-modal.ihl-modal-wide { max-width: 1240px; }
.ihl-frame-body { padding: 0; }
.ihl-frame-body iframe {
    display: block; width: 100%; height: 75vh; border: 0;
    border-radius: 0 0 12px 12px; background: transparent;
}
/* A link that opens a pop-up has no href (see RecordPopup.razor), so it
   needs the hand cursor back. */
a[role="button"] { cursor: pointer; }

/* A plain dialog for the master screens - a form on top of the page, not a
   framed record like RecordPopup. No JavaScript: Blazor decides whether it is
   in the markup at all, so it cannot be left open by a stale class. */
.ihl-back {
    position: fixed; inset: 0; z-index: 1050; padding: 16px;
    background: rgba(10, 14, 24, .55);
    display: flex; align-items: center; justify-content: center;
}
/* Every colour is a theme token, so the dialog follows Frosted Light and
   Midnight Glass without a second set of rules. The first version used
   --bs-body-bg and came out white on the dark theme. */
html .ihl-dlg {
    width: min(760px, 100%); max-height: 88vh;
    display: flex; flex-direction: column;
    background: var(--ihl-glass-strong, #fff);
    color: var(--ihl-text, #101828);
    border: 1px solid var(--ihl-glass-border, rgba(128,128,128,.25));
    border-radius: var(--ihl-radius, 16px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .40);
    -webkit-backdrop-filter: var(--ihl-blur); backdrop-filter: var(--ihl-blur);
}
html .ihl-dlg-head {
    display: flex; align-items: center; gap: .5rem;
    padding: .75rem 1rem; border-bottom: 1px solid var(--ihl-line, rgba(128,128,128,.2));
}
html .ihl-dlg-head h5 { color: var(--ihl-text); }
html .ihl-dlg-body { overflow: auto; padding: .9rem 1rem 1rem; }
html .ihl-dlg-foot {
    display: flex; gap: .5rem; padding: .75rem 1rem 1rem; flex-wrap: wrap;
    border-top: 1px solid var(--ihl-line, rgba(128,128,128,.2));
}

/* The dosage-form list.
   Not .list-group: theme.css styles .list-group-item:hover more strongly than
   Bootstrap styles .list-group-item.active, so the chosen row lost its
   background under the mouse while keeping its white text and went blank. */
html .ihl-picklist { display: flex; flex-direction: column; gap: 2px; }
html .ihl-pick {
    display: block; width: 100%; text-align: left; font: inherit; cursor: pointer;
    background: transparent; color: var(--ihl-text);
    border: 1px solid transparent; border-radius: var(--ihl-radius-sm, 11px);
    padding: .35rem .55rem;
    transition: background-color .15s ease, color .15s ease;
}
html .ihl-pick:hover { background: var(--ihl-hover-tint, rgba(16,24,40,.075)); }
html .ihl-pick:focus-visible { outline: 2px solid var(--ihl-primary); outline-offset: 1px; }
html .ihl-pick-name { font-size: .95rem; }
html .ihl-pick-sub  { font-size: .76rem; color: var(--ihl-muted); }

/* The chosen one keeps its colours whether or not the mouse is on it. The
   extra class beats theme.css's hover rule on specificity, not on order. */
html .ihl-pick.on,
html .ihl-pick.on:hover {
    background: var(--ihl-primary);
    border-color: var(--ihl-primary);
    color: var(--ihl-on-primary);
}
html .ihl-pick.on .ihl-pick-sub,
html .ihl-pick.on:hover .ihl-pick-sub { color: var(--ihl-on-primary); opacity: .85; }

/* A figure the person cannot change, shown at the height of a form control so
   the row still lines up. A readonly <input> looked disabled and, on the dark
   theme, unreadable. */
html .ihl-fixed {
    padding: .375rem .75rem; border-radius: var(--ihl-radius-sm, 11px);
    border: 1px dashed var(--ihl-glass-border, rgba(128,128,128,.35));
    background: var(--ihl-hover-tint, rgba(16,24,40,.05));
    color: var(--ihl-text); font-size: 1rem; line-height: 1.5;
}

/* ===========================================================================
   Theme readability, 27 Sep. Every colour below changes with the theme.

   Ashu's rule: every placeholder and every coloured text has to be readable
   in the light theme AND the dark theme. Bootstrap's own colours
   (text-warning, a disabled field's grey) are fixed, so they fail on one of
   the two. These rules swap them for colours that change with the theme.

   Each selector starts with `html` and is one step more specific than the
   theme.css or Bootstrap rule it replaces. It wins on specificity, not on
   load order, so theme.css (which loads later and is not ours) is not edited.
   =========================================================================== */

:root {
    --ihl-warn-text: #9a5b00;   /* amber that reads on a white box       */
    --ihl-ok-text:   #067647;
    --ihl-pop-bg:    #ffffff;   /* a drop-down list must be solid        */
}
html[data-theme="dark"] {
    --ihl-warn-text: #fbbf24;
    --ihl-ok-text:   #4ade80;
    --ihl-pop-bg:    #121a2c;
}

/* 1. Coloured notes. Bootstrap's warning yellow (#ffc107) vanished on the
      light theme; its success green was dim on the dark one. */
html .text-warning { color: var(--ihl-warn-text) !important; }
html .text-success { color: var(--ihl-ok-text) !important; }

/* 2. A disabled field. Bootstrap paints it light grey on BOTH themes, so on
      the dark theme its white text disappeared (Section / dosage under
      DRUG). It now uses the theme's field colour, with muted text. */
html .form-control:disabled,
html .form-select:disabled {
    background-color: var(--ihl-field-bg, rgba(128,128,128,.08));
    color: var(--ihl-muted);
    -webkit-text-fill-color: var(--ihl-muted);
    border-color: var(--ihl-field-border, rgba(128,128,128,.3));
    opacity: 1;
    cursor: not-allowed;
}

/* 3. A drop-down still showing its "choose one" line (value "" or "0") is
      drawn like an input's placeholder, so an empty choice never looks like a
      real one. The options in the open list keep their normal colour. */
html select.form-select:has(option[value=""]:checked),
html select.form-select:has(option[value="0"]:checked) {
    color: var(--ihl-muted);
}
html select.form-select option { color: var(--ihl-text); }

/* 4. Search suggestions that open over the form (Enter PO's party search).
      theme.css gives list items a see-through glass background, so the
      fields underneath showed through the list. A list that floats over
      other content is solid. */
html .list-group.position-absolute {
    background: var(--ihl-pop-bg);
    border: 1px solid var(--ihl-field-border, rgba(128,128,128,.3));
    box-shadow: var(--ihl-shadow-lg, 0 16px 44px rgba(0,0,0,.25));
}
html .list-group.position-absolute .list-group-item {
    background: var(--ihl-pop-bg);
    color: var(--ihl-text);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
html .list-group.position-absolute .list-group-item:hover,
html .list-group.position-absolute .list-group-item:focus-visible {
    background: linear-gradient(var(--ihl-primary-soft), var(--ihl-primary-soft)), var(--ihl-pop-bg);
}
html .list-group.position-absolute .list-group-item .text-muted { color: var(--ihl-muted) !important; }

/* ===========================================================================
   PERFORMANCE AND PHONES, 27 Sep.

   Measured before anything was changed (a copy of these stylesheets, the real
   page markup, Chromium):

     - The drifting background (theme.css, ihl-mesh) animated
       background-position. A background position cannot be moved by the GPU,
       so the whole screen - and every blurred glass surface over it - was
       repainted on every frame, even with nobody touching anything:
       about 140 paints and 1.9 s of raster work in 5 idle seconds on the
       dashboard. With that one animation stopped: none.
     - Below 992px the menu turned into a full list (about 965px tall), so a
       phone showed more than one screen of menu before any content.
     - The top bar could not wrap: on a phone its items were pushed off the
       LEFT edge, where nothing can scroll to them.
     - Tables without a .table-responsive wrapper, and theme.css's one-line
       tick-box labels, pushed whole pages sideways on phones.

   Everything here is app.css only. theme.css is not touched: each rule is one
   step more specific than the theme rule it adjusts, so it wins on
   specificity, not on load order. The look is kept; the colours are still the
   theme's own tokens.
   =========================================================================== */

/* --- 1. The same drifting background, moved by the GPU ------------------------

   theme.css paints three soft colour clouds (--ihl-mesh-1..3) over a base
   gradient on <body>, 160% of the screen in size, fixed to the screen, and
   drifts them over 30 seconds. Here each cloud is its own fixed layer of
   exactly that size and starting position, and the drift is a transform,
   which the GPU moves without repainting anything.

   The numbers are the theme's own, converted: a 160% fixed background at
   position p sits at p x (100% - 160%) = -0.6 x p of the screen, so moving
   from 0% to 12% across is a shift of 7.2vw, and so on for each cloud.

   Layer order matches the theme's background list: base at the bottom, the
   third cloud next, the first cloud on top. Negative z-index layers paint in
   document order, which is why each sits on the element it sits on. <body>
   itself becomes transparent so it does not paint over them. */

html:root { background: var(--ihl-bg); }
html:root body { background: transparent; animation: none; }

html::before,
html::after,
body::before,
body::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    background-repeat: no-repeat;
}

/* The base gradient: the whole screen, never moves. */
html::before { inset: 0; background-image: var(--ihl-mesh-base); }

/* Cloud 3 (theme: "900px 700px at 66% 104%", from 60% 100% to 48% 88%). */
body::before {
    left: -36vw; top: -60vh; width: 160vw; height: 160vh;
    background-image: radial-gradient(900px 700px at 66% 104%, var(--ihl-mesh-3), transparent 60%);
    animation: ihl-mesh-c 30s ease-in-out infinite alternate;
    will-change: transform;
}
/* Cloud 2 (theme: "820px 600px at 96% 2%", from 100% 0% to 88% 10%). */
body::after {
    left: -60vw; top: 0; width: 160vw; height: 160vh;
    background-image: radial-gradient(820px 600px at 96% 2%, var(--ihl-mesh-2), transparent 58%);
    animation: ihl-mesh-b 30s ease-in-out infinite alternate;
    will-change: transform;
}
/* Cloud 1 (theme: "900px 620px at 8% -6%", from 0% 0% to 12% 8%). */
html::after {
    left: 0; top: 0; width: 160vw; height: 160vh;
    background-image: radial-gradient(900px 620px at 8% -6%, var(--ihl-mesh-1), transparent 60%);
    animation: ihl-mesh-a 30s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes ihl-mesh-a { to { transform: translate3d(-7.2vw, -4.8vh, 0); } }
@keyframes ihl-mesh-b { to { transform: translate3d( 7.2vw, -6vh,   0); } }
@keyframes ihl-mesh-c { to { transform: translate3d( 7.2vw,  7.2vh, 0); } }

/* The sign-in screens paint their own background over the whole page, so the
   clouds would drift unseen behind them. */
html:has(.lp-page)::after,
body:has(.lp-page)::before,
body:has(.lp-page)::after { display: none; }

@media (prefers-reduced-motion: reduce) {
    html::after, body::before, body::after { animation: none; }
}

/* --- 2. The menu on a phone or tablet (below 992px) ---------------------------

   The IHL CRM heading stays at the top with the ☰ button (section 9). The
   links open under it as the same list a computer shows, full width, and fold
   away again with ☰ or when a page is chosen. Every link is still there; the
   list only starts folded, so the page itself is what a phone shows first.
   (Until 27 Sep afternoon this was one sideways-scrolling row of links.) */

@media (max-width: 991.98px) {
    html body .sidebar { position: relative; overflow: visible; padding-bottom: 0; }
    /* Room on the right of the heading for the ☰ button. */
    html body .sidebar .navbar { padding: .7rem 3.75rem .6rem 1rem; }
    html body .nav-scrollable { padding-bottom: .6rem; }
    /* The desktop hover nudge is no help under a finger. */
    html body .sidebar .nav-link:hover,
    html body .sidebar .nav-link.active:hover { transform: none; }
}

/* --- 3. The top bar wraps instead of losing items off the left ---------------

   It is right-aligned, so on a narrow screen its items overflowed to the LEFT,
   where no scroll bar can reach. It now wraps onto a second line. On a phone it
   also stops sticking to the top: two lines of controls held in place would
   take a big part of the screen for good. */

@media (max-width: 991.98px) {
    html body .top-row {
        height: auto;
        min-height: 52px;
        flex-wrap: wrap;
        padding-top: .45rem;
        padding-bottom: .45rem;
    }
    html body .top-row.px-4 { padding-left: .75rem !important; padding-right: .75rem !important; }
    html body .top-row.gap-3 { gap: .45rem .6rem !important; }
    html body .top-row .btn { white-space: nowrap; }
}
@media (max-width: 575.98px) {
    html body .top-row { position: relative; }
}

/* --- 4. Wide tables scroll inside their card, not the whole page -------------

   Most tables already sit in .table-responsive. The ones that do not (Parties,
   Users, the dashboard search, the PO page, several dialogs) made the whole
   page slide sideways on a phone. On a narrow screen such a table becomes its
   own sideways-scrolling box. Every column stays; nothing is hidden. */

@media (max-width: 767.98px) {
    html body .table:not(.table-responsive > .table) {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* --- 5. Tick-box labels may wrap on a narrow screen ---------------------------

   theme.css keeps a tick box and its words on one line, which is right on a
   desktop; on a phone a long label ran off the screen. The box stays beside
   the words, and the words wrap. */

@media (max-width: 767.98px) {
    html body .form-check .form-check-label { white-space: normal; }
}

/* --- 6. Read-only text follows the theme --------------------------------------

   The PO date on Enter PO is Bootstrap's form-control-plaintext, whose colour
   is fixed near-black, so it was dim grey on the dark theme. */

html .form-control-plaintext { color: var(--ihl-text); }

/* --- 7. Dialogs fit the screen that is actually visible ------------------------

   On a phone, vh counts the part of the screen the browser's address bar
   covers, so an 88vh dialog put its buttons under the bar. dvh is the visible
   height; browsers that do not know it keep the vh line. Scrolling inside a
   dialog no longer scrolls the page behind it once the dialog reaches its end. */

html .ihl-dlg { max-height: 88vh; max-height: 88dvh; }
html .ihl-frame-body iframe { height: 75vh; height: 75dvh; }
html .ihl-modal-backdrop,
html .ihl-dlg-body,
html .mb-drawer-body { overscroll-behavior: contain; }

/* --- 8. A drop-down's words never run under its arrow ---------------------------

   theme.css gives every field the same padding on both sides, which took away
   the room Bootstrap keeps on the right of a drop-down for its arrow. A short
   choice looked fine; a longer one ("Me (default)" on Enter PO, "+91 India" on
   a phone) ran underneath the arrow. The room is given back - Bootstrap's own
   2.25rem. A list box (multiple / size) has no arrow and is left alone, and the
   pager's small size picker keeps its own tighter setting (:where adds no
   weight, so .pager-size still wins). */

html body .form-select:where(:not([multiple]):not([size])) { padding-right: 2.25rem; }

/* The country code beside a mobile number. Its fixed width further up lost to
   Bootstrap's input-group rule (flex: 1 1 auto), so on a phone it shrank until
   "+91 India" sat under the arrow. The width now holds. On a phone it is a
   little narrower and the number box may give up some of its minimum, so the
   pair still fits side by side on a 320px screen. */

html body .input-group > .cc-select { flex: 0 0 8.5rem; width: 8.5rem; }

@media (max-width: 575.98px) {
    html body .input-group > .cc-select { flex-basis: 7.25rem; width: 7.25rem; }
    html body .input-group > .form-control[type="tel"] { min-width: 6rem; }
}

/* --- 9. The ☰ menu button ------------------------------------------------------

   menu.js marks <html> with data-menu="closed"; only then is anything hidden.
   With no script the menu is simply open, as it always was. Two buttons, one
   job: the one in the top bar is for a computer, the one in the IHL CRM
   heading for a phone (the heading is the one thing a phone always shows at
   the top). Only one of the two is ever on screen. */

html .menu-toggle {
    width: 34px; height: 34px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
    border-radius: var(--ihl-radius-sm, 8px);
    border: 1px solid var(--ihl-glass-border, rgba(127, 127, 127, .3));
    background: var(--ihl-glass, transparent);
    color: var(--ihl-text-soft, currentColor);
    cursor: pointer;
}
html .menu-toggle:hover { background: var(--ihl-glass-hover, rgba(127, 127, 127, .12)); color: var(--ihl-text); }
html .menu-toggle:focus-visible { outline: 2px solid var(--ihl-primary); outline-offset: 2px; }
html .menu-toggle-phone { display: none; }

/* A computer: the sidebar goes, and the page takes the whole width. */
@media (min-width: 992px) {
    html[data-menu="closed"] body .sidebar { display: none; }
    html[data-menu="closed"] body .content { max-width: none; }
}

/* A phone: the button sits in the heading; closed folds the links away. */
@media (max-width: 991.98px) {
    html body .menu-toggle-top { display: none; }
    html body .menu-toggle-phone {
        display: inline-flex;
        position: absolute; top: .65rem; right: .85rem; z-index: 2;
        color: var(--ihl-nav-text, currentColor);
    }
    html[data-menu="closed"] body .nav-scrollable { display: none; }
}

/* --- 10. A suggestion list opens over the card below it ------------------------

   Every card is glass (a blur behind it), and that makes each card its own
   layer: a list floating out of one card, however high its z-index, was drawn
   UNDER the next card down - Enter PO's party list disappeared behind the
   Composition panel. While a card has a list or menu open, that card is lifted
   above its neighbours. Still below the top bar (30), so scrolling works as
   before; nothing changes while no list is open. */

html body .card:has(.list-group.position-absolute),
html body .card:has(.dropdown-menu.show) { z-index: 25; }

/* --- one remarks box per order (2 Oct) --------------------------------------
   Folded: one line like the old sheet. Open: a line per person, the newest
   tinted. Colours come from the theme's own text, so both themes read it. */
.remark-folded { line-height: 1.5; overflow-wrap: anywhere; }
.remark-box {
    border: 1px solid var(--bs-border-color, #d0d5dd); border-radius: .5rem;
    padding: .35rem .5rem; max-height: 260px; overflow-y: auto;
    display: flex; flex-direction: column; gap: .15rem;
}
.remark-line { display: flex; gap: .45rem; align-items: baseline; flex-wrap: wrap; padding: .1rem .25rem; border-radius: .25rem; }
.remark-line .remark-text { flex: 1 1 12rem; overflow-wrap: anywhere; }
.remark-line .remark-at { font-size: .72rem; opacity: .7; white-space: nowrap; }
.remark-line.fresh { background: rgba(245, 158, 11, .14); }

/* --- Enter PO compact composition line and party terms (2 Oct) ------------- */
.comp-line { font-size: .9rem; overflow-wrap: anywhere; }
.terms-chip { font-size: .72rem; font-weight: 600; padding: .1rem .45rem; border-radius: 999px;
              border: 1px solid currentColor; white-space: nowrap; }
.terms-credit { color: #b45309; }
.terms-cash   { color: #047857; }
.terms-unset  { opacity: .7; }
.exposure { font-size: .8rem; }
.exposure .ex-over { color: #dc2626; font-weight: 700; }
.exposure .ex-near { color: #d97706; font-weight: 600; }

/* Enter PO first line (2 Oct): Repeat to category on one line on a desktop. */
html .pick-one.compact { gap: .25rem; }
html .pick-one.compact .pick { padding: .22rem .6rem; font-size: .8rem; }
.order-line .vr { align-self: stretch; }
/* The last three orders on a label (2 Oct, v2): one chip, click for the history. */
.last-chip {
    font: 600 .68rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: none; letter-spacing: normal;
    background: #ffe680; color: #3d2f00; border: 1px solid #e8c93f; border-radius: 4px;
    padding: .05rem .35rem; margin-left: .3rem; cursor: pointer; vertical-align: 1px;
}
.last-chip:hover { border-color: #3d2f00; }
.last-chip:focus-visible { outline: 2px solid var(--ihl-primary, #1e63d0); outline-offset: 1px; }
/* No earlier order: a NEW chip instead (2 Oct). Same shape, green, both themes. */
.last-chip.last-new { background: #d1fae5; color: #065f46; border-color: #34d399; cursor: default; }
/* A refusal beside Place PO (2 Oct) - it wraps, and long words break. */
.save-error { overflow-wrap: anywhere; }
/* Enter PO's two warnings that ask a reason: a repeat while in process, a brand of another party. */
.warn-box { border: 1px solid #f59e0b; background: rgba(245, 158, 11, .12); border-radius: .5rem; padding: .5rem .75rem; }

/* Google search (2 Oct, Ashu): just a "G", everywhere. */
.g-mark { font-family: Arial, Helvetica, sans-serif; font-weight: 700; font-size: .95rem; line-height: 1;
          display: inline-block; min-width: .9em; text-align: center; }

/* GST folded away (2 Oct, Ashu): amounts are without GST; GST is for the proforma invoice. */
.gst-fold > summary { cursor: pointer; list-style-position: inside; }
.gst-fold[open] > summary { margin-bottom: .5rem; }

/* Cylinder "Not taken" and its reason, beside the box (2 Oct). */
.cyl-why { margin-top: .35rem; }

/* --- the PO page (2 Oct, Ashu: "minimum view me max info") --------------------
   The head: number, stage and badges on one line, the party large, owner /
   Marketed by / brand under it, the value and the advance on the right, and
   every button in one row. Under it the order's fields in a dense grid; a
   pencil beside a field means this person may change it here, inside the
   field, with a reason. */
.po-head .card-body { padding: .85rem 1rem; }
.po-head-party { font-size: 1.15rem; font-weight: 600; margin-top: .15rem; }
.po-head-who { display: flex; flex-wrap: wrap; gap: .2rem 1rem; }
.po-head-who .text-muted { margin-right: .25rem; }
.po-head-total { font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
.po-head-badges { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }
.po-head-badges .badge { font-weight: 600; }
.po-head-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
                   margin-top: .65rem; padding-top: .6rem; border-top: 1px solid var(--ihl-border); }
.po-head-box { margin-top: .6rem; padding: .6rem .75rem; border-radius: 8px;
               background: var(--ihl-surface-alt); border: 1px solid var(--ihl-border); }
.po-head-box.approve { background: var(--ihl-amber-bg); border-color: var(--ihl-amber-line); }

.po-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .55rem 1rem; }
.po-cell { min-width: 0; }
.po-cell-wide { grid-column: 1 / -1; }
.po-cell-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--ihl-muted);
                 display: flex; align-items: center; gap: .3rem; }
.po-cell-value { font-size: .88rem; overflow-wrap: anywhere; }
.po-pen { border: 0; background: none; padding: 0 .15rem; line-height: 1; color: var(--ihl-primary);
          cursor: pointer; opacity: .75; }
.po-pen:hover, .po-pen:focus { opacity: 1; }
.po-inline-edit { margin-top: .15rem; }
.po-inline-edit .form-control, .po-inline-edit .form-select { font-size: .85rem; }
html[data-theme="dark"] body .po-head-box { background: rgba(255,255,255,.04); }
html[data-theme="dark"] body .po-head-box.approve { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.35); }
.min-w-0 { min-width: 0; }

/* --- the PO page, round 2 (2 Oct, Ashu: "emergent type same clean view") ----
   The order as a form: label over a box, two columns. A box this person may
   change carries a pencil and a white box; the rest are grey. The head's
   right side keeps Owner and Billing always in view; the small buttons open
   what used to be big cards. The moves sit in a bar at the foot. */
.po-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1rem; }
@media (max-width: 767.98px) { .po-form { grid-template-columns: 1fr; } }
.po-form .po-cell-label { margin-bottom: .2rem; }
.po-box { border: 1px solid var(--ihl-border-strong); border-radius: 8px; padding: .38rem .65rem;
          min-height: 2.15rem; font-size: .9rem; background: var(--ihl-surface); overflow-wrap: anywhere; }
.po-box-ro { background: var(--ihl-surface-alt); border-color: var(--ihl-border); color: var(--ihl-text-soft); }
html[data-theme="dark"] body .po-box { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }
html[data-theme="dark"] body .po-box-ro { background: rgba(255,255,255,.025); border-color: rgba(255,255,255,.08); }

.po-head-right { text-align: right; min-width: 260px; }
.po-head-line { display: flex; justify-content: flex-end; align-items: center; gap: .35rem; font-size: .88rem; }
.po-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .3rem; margin-top: .5rem; }
.po-tool { border: 1px solid var(--ihl-border-strong); background: var(--ihl-surface); color: var(--ihl-text);
           border-radius: 999px; padding: .12rem .6rem; font-size: .76rem; line-height: 1.5; }
.po-tool:hover { border-color: var(--ihl-primary); color: var(--ihl-primary); }
.po-tool-red { border-color: #dc2626; color: #dc2626; font-weight: 600; }
.po-tool-amber { border-color: #d97706; color: #d97706; font-weight: 600; }
html[data-theme="dark"] body .po-tool { background: rgba(255,255,255,.05); color: #e6e9f0; border-color: rgba(255,255,255,.2); }

.po-pop .card { border: 0; box-shadow: none; background: transparent; margin-top: 0 !important; }
.po-pop .card-body { padding: 0; }

.po-bar { position: sticky; bottom: 0; z-index: 30; margin-top: 1rem; padding: .55rem .9rem;
          background: var(--ihl-surface); border: 1px solid var(--ihl-border); border-radius: 10px 10px 0 0;
          box-shadow: 0 -4px 16px rgba(16,24,40,.08); }
html[data-theme="dark"] body .po-bar { background: #161c2c; border-color: rgba(255,255,255,.1); }
.po-bar-row { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.po-bar-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ihl-muted); margin-right: .3rem; }
.po-bar-remark { width: auto; min-width: 220px; flex: 1 1 220px; max-width: 420px; }
.po-bar-box { margin-bottom: .55rem; padding-bottom: .55rem; border-bottom: 1px solid var(--ihl-border); }

/* Name check's two buttons right after the name (head of the PO page). */
.name-tools { position: relative; display: inline-flex; align-items: center; gap: .2rem; margin-left: .3rem; vertical-align: middle; }
.name-tool { display: inline-flex; align-items: center; justify-content: center; min-width: 1.45rem; height: 1.45rem;
             padding: 0 .3rem; border: 1px solid var(--ihl-border-strong); border-radius: 6px; background: var(--ihl-surface);
             color: var(--ihl-text-soft); font-size: .72rem; text-decoration: none; line-height: 1; }
.name-tool:hover { color: var(--ihl-primary); border-color: var(--ihl-primary); }
.name-tool .g-mark { font-size: .78rem; }
.name-tool-done { color: var(--ihl-green); font-size: .8rem; }
.name-panel { position: absolute; top: calc(100% + 4px); left: 0; z-index: 40; display: block; width: min(520px, 86vw);
              padding: .6rem .7rem; background: var(--ihl-surface); border: 1px solid var(--ihl-border-strong);
              border-radius: 8px; box-shadow: var(--ihl-shadow-lg); text-align: left; font-size: .82rem; }
html[data-theme="dark"] body .name-tool { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.2); color: #dfe4ee; }
html[data-theme="dark"] body .name-panel { background: #1b2234; border-color: rgba(255,255,255,.15); }

/* PO page round 3 (2 Oct): payment in the head's centre, a long composition
   folded to two lines, and the Correction box. */
.po-head-pay { align-self: center; text-align: center; padding: .3rem .9rem; border-radius: 10px;
               border: 1px solid var(--ihl-border); background: var(--ihl-surface-alt); }
.po-pay-word { font-weight: 700; font-size: 1rem; }
.po-pay-ok { display: inline-block; margin-top: .2rem; padding: .1rem .55rem; border-radius: 999px; font-size: .74rem;
             font-weight: 600; background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.po-pay-no { display: inline-block; margin-top: .2rem; padding: .1rem .55rem; border-radius: 999px; font-size: .74rem;
             font-weight: 600; background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.po-box-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.po-correction { border-color: #f59e0b; }
.po-corr-line { padding: .35rem .6rem; border-radius: 8px; margin-bottom: .35rem; font-size: .88rem; }
.po-corr-line.asked { background: rgba(245, 158, 11, .12); border-left: 3px solid #f59e0b; }
.po-corr-line.answered { background: rgba(22, 163, 74, .10); border-left: 3px solid #16a34a; }
html[data-theme="dark"] body .po-head-pay { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }

/* PO page round 4 (2 Oct): the last-3 chips red when this order is lower
   than the last one, green when higher; one Edit button - the boxes that
   may change light up, the rest stay grey; one reason, one Save. */
.last-chip.chip-down { background: #fee2e2; color: #991b1b; border-color: #f87171; }
.last-chip.chip-up   { background: #dcfce7; color: #166534; border-color: #4ade80; }
.last-chip.chip-down:hover { border-color: #991b1b; }
.last-chip.chip-up:hover   { border-color: #166534; }
.po-form-editing .po-cell-edit .form-control,
.po-form-editing .po-cell-edit .form-select { background: #fffbea; border-color: #f2c94c; box-shadow: 0 0 0 2px rgba(242, 201, 76, .25); }
.po-form-editing .po-edit-changed .form-control,
.po-form-editing .po-edit-changed .form-select { border-color: #1e63d0; box-shadow: 0 0 0 2px rgba(30, 99, 208, .25); }
.po-box-click { display: block; width: 100%; text-align: left; cursor: pointer;
                background: #fffbea; border-color: #f2c94c; box-shadow: 0 0 0 2px rgba(242, 201, 76, .25); }
.po-box-click:hover { border-color: #1e63d0; }
.po-head-click { border: 1px solid #f2c94c; background: #fffbea; border-radius: 6px; padding: .05rem .45rem; color: inherit; }
.po-head-click:hover { border-color: #1e63d0; }
.po-edit-hint { color: #8a6d00; }
.po-edit-bar { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin-top: .9rem;
               padding: .55rem .65rem; border: 1px solid #f2c94c; border-radius: 8px; background: rgba(242, 201, 76, .10); }
.po-edit-bar .form-control { flex: 1 1 260px; }
html[data-theme="dark"] body .po-form-editing .po-cell-edit .form-control,
html[data-theme="dark"] body .po-form-editing .po-cell-edit .form-select,
html[data-theme="dark"] body .po-box-click,
html[data-theme="dark"] body .po-head-click { background: rgba(242, 201, 76, .10); color: #f3f4f6; }
html[data-theme="dark"] body .po-edit-hint { color: #f2c94c; }
/* Proforma (2 Oct): a tick per row on a stage list, and the draft page. */
.proforma-sheet { max-width: 920px; }
.proforma-sheet table td, .proforma-sheet table th { vertical-align: middle; }

/* PO Edit page round 5 (3 Oct): the party's money under the head, the
   party pop-up, FSSAI, the 15-day warning and the short advance. Small and
   tight - "minimum view me max info". */
.po-party-link { border: 0; background: none; padding: 0; color: inherit; font: inherit; text-align: left;
                 text-decoration: underline dotted; text-underline-offset: 4px; cursor: pointer; }
.po-party-link:hover { color: var(--ihl-primary); }
.po-other-firms { display: flex; flex-wrap: wrap; gap: .25rem .6rem; margin: -.1rem 0 .25rem; }
.po-other-firms .po-firm { white-space: nowrap; }
/* The party's money (3 Oct, second look): a box of tiles - name, amount, what it holds. */
.po-money { margin-top: .7rem; padding: .55rem .65rem .65rem; border: 1px solid var(--ihl-border); border-radius: 10px;
            background: var(--ihl-surface-alt); }
.po-money-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; margin-bottom: .45rem; }
.po-money-title { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.po-money-note { font-size: .74rem; color: var(--ihl-muted); }
.po-money-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .45rem; }
.po-money-tile { display: flex; flex-direction: column; gap: .05rem; min-width: 0; padding: .4rem .6rem; text-align: left;
                 border: 1px solid var(--ihl-border); border-radius: 8px; background: var(--ihl-surface); color: var(--ihl-text); font: inherit; }
.po-money-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: var(--ihl-muted); }
.po-money-amt { font-size: 1.02rem; font-weight: 700; white-space: nowrap; }
.po-money-sub { font-size: .72rem; color: var(--ihl-muted); }
button.po-money-tile { cursor: pointer; }
button.po-money-tile:hover { border-color: var(--ihl-primary); }
.po-money-total { border-color: var(--ihl-border-strong); }
.po-money-key { border: 2px solid var(--ihl-primary); }
.po-money-warn { border-color: #d97706; background: rgba(217, 119, 6, .10); }
.po-money-over { border-color: #dc2626; background: rgba(220, 38, 38, .10); color: #b91c1c; }
.po-money-ok { color: var(--ihl-green, #16a34a); font-weight: 700; }
.po-money-unver { color: #b45309; font-weight: 600; }
.po-ledger-box { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-top: .45rem; }
.po-ledger-box .form-control { width: auto; flex: 0 1 150px; }
.po-pay-wait { display: inline-block; margin-top: .2rem; padding: .1rem .55rem; border-radius: 999px; font-size: .74rem;
               font-weight: 600; background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.po-short { padding: .35rem .5rem; border-radius: 8px; }
.po-short.wait { background: rgba(245, 158, 11, .12); border-left: 3px solid #f59e0b; }
.po-short.ok { background: rgba(22, 163, 74, .10); border-left: 3px solid #16a34a; }
.po-party-figs { display: flex; flex-wrap: wrap; gap: 1.2rem; font-size: .88rem; }
html[data-theme="dark"] body .po-money { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.14); }
html[data-theme="dark"] body .po-money-tile { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.16); color: #e6e9f0; }
html[data-theme="dark"] body .po-money-key { border-color: #8b9cff; }
html[data-theme="dark"] body .po-money-warn { border-color: #f59e0b; background: rgba(245, 158, 11, .14); }
html[data-theme="dark"] body .po-money-unver { color: #fcd34d; }
html[data-theme="dark"] body .po-money-over { color: #fca5a5; }
html[data-theme="dark"] body .po-pay-wait { background: rgba(245, 158, 11, .18); color: #fcd34d; }

/* The PO Edit page head, third look (3 Oct, Ashu: "compact, attractive, minimalist").
   A top line (number, stage, date; category in the corner) and three columns
   that never wrap into each other: party | payment | value. */
.po-head-top { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem;
               padding-bottom: .55rem; margin-bottom: .65rem; border-bottom: 1px solid var(--ihl-border); }
.po-head-no { font-size: 1.3rem; font-weight: 700; margin: 0 .15rem 0 0; line-height: 1.1; }
.po-head-meta { font-size: .8rem; color: var(--ihl-muted); }
.po-head-cat { margin-left: auto; font-size: .74rem; padding: .08rem .6rem; border-radius: 999px;
               border: 1px solid var(--ihl-border); color: var(--ihl-text-soft); white-space: nowrap; }
.po-head-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(200px, auto);
                gap: .8rem 1.5rem; align-items: start; }
.po-head-main { min-width: 0; }
.po-head-party { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; font-size: 1.2rem; font-weight: 600; margin: 0; }
.po-mobile { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .5rem; border-radius: 999px;
             border: 1px solid var(--ihl-border); background: transparent; color: var(--ihl-muted);
             font-size: .8rem; font-weight: 500; line-height: 1.3; cursor: pointer; }
.po-mobile:hover, .po-mobile.open { color: var(--ihl-primary); border-color: var(--ihl-primary); }
.po-head-facts { display: flex; flex-wrap: wrap; gap: .1rem 1rem; font-size: .82rem; margin-top: .2rem; }
.po-head-facts .k { color: var(--ihl-muted); margin-right: .3rem; }
.po-head-grid .po-head-badges { margin-top: .45rem; }
.po-badge-soft-red { background: rgba(220, 38, 38, .12); color: #b91c1c; border: 1px solid rgba(220, 38, 38, .35); }
.po-head-grid .po-head-pay { align-self: start; min-width: 190px; max-width: 280px; padding: .45rem .9rem; }
.po-pay-due { margin-top: .15rem; font-size: .78rem; font-weight: 600; color: #b91c1c; }
.po-head-grid .po-head-right { min-width: 0; text-align: right; }
.po-head-label { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ihl-muted); }
.po-head-grid .po-head-total { font-size: 1.45rem; }
.po-head-grid .po-tools { margin-top: .45rem; }
@media (max-width: 991.98px) {
    .po-head-grid { grid-template-columns: minmax(0, 1fr) auto; }
    .po-head-grid .po-head-right { grid-column: 1 / -1; text-align: left; }
    .po-head-grid .po-head-right .po-head-line, .po-head-grid .po-tools { justify-content: flex-start; }
}
@media (max-width: 575.98px) {
    .po-head-grid { grid-template-columns: 1fr; }
    .po-head-grid .po-head-pay { max-width: none; }
    .po-head-cat { margin-left: 0; }
}
/* the party's money, a little tighter */
.po-money { margin-top: .75rem; padding: .45rem .55rem .55rem; }
.po-money-head { margin-bottom: .35rem; }
.po-money-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .4rem; }
.po-money-tile { padding: .3rem .55rem; }
.po-money-label { font-size: .64rem; }
.po-money-amt { font-size: .95rem; }
.po-money-sub { font-size: .68rem; }
html[data-theme="dark"] body .po-head-top { border-color: rgba(255,255,255,.1); }
html[data-theme="dark"] body .po-head-cat { border-color: rgba(255,255,255,.18); color: #dfe4ee; }
html[data-theme="dark"] body .po-mobile { border-color: rgba(255,255,255,.2); color: #c9d1e0; }
html[data-theme="dark"] body .po-mobile:hover, html[data-theme="dark"] body .po-mobile.open { color: #9db4ff; border-color: #9db4ff; }
html[data-theme="dark"] body .po-badge-soft-red { background: rgba(248, 113, 113, .15); color: #fca5a5; border-color: rgba(248, 113, 113, .4); }
html[data-theme="dark"] body .po-pay-due { color: #fca5a5; }

/* 3 Oct, fourth look: the order type changed in the head while Edit is on; the
   advance tile's unconfirmed part in red on its top line. */
.po-head-edit { display: inline-block; min-width: 210px; vertical-align: middle; }
.po-head-edit .po-inline-edit { margin-top: 0; }
.po-head-edit .form-select { background-color: #fffbea; border-color: #f2c94c; box-shadow: 0 0 0 2px rgba(242, 201, 76, .25); }
.po-money-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: .4rem; }
.po-money-unconf { color: #b91c1c; font-weight: 700; text-transform: none; letter-spacing: 0; white-space: nowrap; }
html[data-theme="dark"] body .po-head-edit .form-select { background-color: rgba(242, 201, 76, .12); color: #f3f4f6; }
html[data-theme="dark"] body .po-money-unconf { color: #fca5a5; }

/* PO List pages (3 Oct, batch 60): the filter ticks above the list, a group
   heading row, and remarks / composition folded to two lines (a click opens all). */
.po-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; margin: -.4rem 0 .7rem;
              padding: .4rem .6rem; border: 1px solid var(--ihl-border); border-radius: 10px; background: var(--ihl-surface-alt); }
.po-filter-group { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .25rem; }
.po-filter-label { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ihl-muted); margin-right: .15rem; }
.po-chip { border: 1px solid var(--ihl-border-strong); background: var(--ihl-surface); color: var(--ihl-text);
           border-radius: 999px; padding: .08rem .55rem; font-size: .76rem; line-height: 1.5; cursor: pointer; }
.po-chip:hover { border-color: var(--ihl-primary); }
.po-chip.on { background: var(--ihl-primary); border-color: var(--ihl-primary); color: #fff; }
.po-filter-date { width: 9.2rem; padding-top: .1rem; padding-bottom: .1rem; }
.po-filter-group-by { width: auto; padding-top: .1rem; padding-bottom: .1rem; }
.po-filter-check { display: inline-flex; align-items: center; font-size: .8rem; margin: 0; cursor: pointer; }
tr.po-group-row > td { background: var(--ihl-surface-alt); border-top: 2px solid var(--ihl-border-strong); font-size: .85rem; }
.cell-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
              white-space: pre-line; cursor: pointer; min-width: 12rem; max-width: 26rem; }
.cell-clamp.open { display: block; -webkit-line-clamp: unset; }
html[data-theme="dark"] body .po-filters { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.12); }
html[data-theme="dark"] body .po-chip { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.2); color: #e6e9f0; }
html[data-theme="dark"] body .po-chip.on { background: #4f6bed; border-color: #4f6bed; color: #fff; }
html[data-theme="dark"] body tr.po-group-row > td { background: rgba(255,255,255,.05); }

/* 3 Oct, fifth look (batch 61): the head stays at the top while the page
   scrolls and the party's money slides under it; Mkt by under the party; the
   payment box wider and lower; the advance's red line on a row of its own;
   labels of one height so the boxes line up; the list scrolls in its own box
   with its headings held. */
@media (min-width: 992px) {
    .po-head { position: sticky; top: 56px; z-index: 20; }
}
.po-head { background: var(--ihl-surface); }
html[data-theme="dark"] body .po-head { background: #151b2b; }
.po-money-card .card-body { padding: .55rem .75rem .65rem; }
.po-money-card .po-money { margin-top: 0; border: 0; padding: 0; background: transparent; }
html[data-theme="dark"] body .po-money-card .po-money { background: transparent; }
.po-head-mkt { display: flex; align-items: center; flex-wrap: wrap; gap: .1rem .3rem; font-size: .84rem; color: var(--ihl-text-soft); margin-top: .05rem; }
.po-head-grid .po-head-pay { min-width: 260px; max-width: 420px; padding: .35rem .9rem; }
/* Audit 6 Oct: on a phone (or with A+ / A++) the payment box fits the card - it
   comes after the rule above, so it is the one that counts. */
@media (max-width: 576px) {
    .po-head-grid .po-head-pay { min-width: 0; max-width: 100%; width: 100%; }
    .po-head-grid .po-pay-word { white-space: normal; }
}
.po-head-grid .po-pay-word { white-space: nowrap; font-size: .98rem; }
.po-head-grid .po-pay-due { margin-top: .05rem; }
.po-money-unconf { display: block; font-size: .68rem; line-height: 1.2; margin-bottom: .05rem; }
button.po-money-tile:hover .po-money-sub { color: var(--ihl-primary); }
.po-form .po-cell-label { min-height: 1.6rem; }
.po-corr-line { line-height: 1.45; }
.po-list-scroll { max-height: calc(100vh - 210px); overflow: auto; }
.po-list-scroll > table > thead > tr > th { position: sticky; top: 0; z-index: 2; background: var(--ihl-surface); }
html[data-theme="dark"] body .po-list-scroll > table > thead > tr > th { background: #151b2b; }
/* 4 Oct (Ashu: "scroll par list heading ke upar jaati hui dikh rahi hai"): with
   the grid's collapsed borders the stuck heading left a thin strip at its top
   where the rows showed through. A shadow of the heading's own colour closes it,
   and a line under the heading keeps it apart from the rows. */
.po-list-scroll > table > thead > tr > th { top: -1px; box-shadow: 0 -6px 0 0 var(--ihl-surface), inset 0 -1px 0 var(--ihl-border-strong); }
html[data-theme="dark"] body .po-list-scroll > table > thead > tr > th { box-shadow: 0 -6px 0 0 #151b2b, inset 0 -1px 0 rgba(255,255,255,.18); }

/* The plain sign-in card (3 Oct: the animated page was slow). */
.lg-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem 1rem;
           background: var(--ihl-bg); }
.lg-card { width: 100%; max-width: 380px; padding: 1.6rem 1.5rem 1.2rem; border-radius: 14px;
           background: var(--ihl-surface); border: 1px solid var(--ihl-border); box-shadow: 0 10px 30px rgba(16, 24, 40, .12); }
.lg-brand { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.2rem; }
.lg-brand h1 { font-size: 1.25rem; font-weight: 700; margin: 0; }
.lg-brand p { font-size: .8rem; color: var(--ihl-muted); margin: 0; }
.lg-logo { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px;
           background: var(--ihl-primary); color: #fff; }
.lg-foot { display: flex; justify-content: space-between; margin-top: .9rem; font-size: .78rem; color: var(--ihl-muted); }
html[data-theme="dark"] body .lg-card { background: #151b2b; border-color: rgba(255,255,255,.12); box-shadow: 0 10px 30px rgba(0,0,0,.4); }

/* --- batch 62 (3 Oct): PO page and PO lists ---------------------------------
   Correction box only as wide as its text; the Terms chip is a button that
   opens a small editor; the ledger tile's label opens its history; the reason
   of a discounted cylinder under the summary line; the extra cost form.
   Lists: grid lines, fixed widths, cells folded after two lines, the clip for
   files, the pager, and the row colours - red wash for a payment problem,
   light yellow for token orders. */
.po-correction { width: fit-content; max-width: 100%; min-width: min(100%, 22rem); }
.po-correction .po-corr-line { width: fit-content; max-width: 100%; }
.terms-btn { border: 0; cursor: pointer; }
.terms-btn:hover { filter: brightness(1.1); text-decoration: underline; }
.po-terms-edit { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-top: .4rem; max-width: 40rem; }
.po-terms-edit .form-select, .po-terms-edit .form-control { width: auto; max-width: 11rem; }
.po-terms-edit .po-terms-why { max-width: 16rem; }
.po-money-link { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.po-money-link:hover { color: var(--ihl-primary); text-decoration: underline; }
tr.po-sum-why > td { font-size: .78rem; color: var(--ihl-muted); padding-top: 0; border-top: 0; }
.later-ask { border: 1px solid var(--ihl-border-strong); border-radius: 10px; padding: .6rem .75rem; }
.po-list-grid { table-layout: fixed; width: 100%; }
.po-list-grid > :not(caption) > * > * { border: 1px solid var(--ihl-border-strong); }
.po-list-grid .cell-clamp { min-width: 0; max-width: none; word-break: break-word; }
.po-clip { font-size: .8rem; margin-right: .25rem; }
.po-pager { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .85rem; margin: .5rem 0; }
.po-pager .po-pager-size { width: auto; }
/* The same colours as the "Not confirmed" and "admin OK pending" pills, on
   both themes (3 Oct, Ashu: "red wash jaise not confirm par hai") - set with
   !important and Bootstrap's own cell colour, which otherwise paints over it. */
html body tr.po-row-payissue > td { --bs-table-bg: #fee2e2; --bs-table-color: #991b1b; background-color: #fee2e2 !important; color: #991b1b !important; }
html body tr.po-row-token > td { --bs-table-bg: #fef3c7; --bs-table-color: #92400e; background-color: #fef3c7 !important; color: #92400e !important; }
html body tr.po-row-payissue > td { border-color: #fca5a5 !important; }
html body tr.po-row-token > td { border-color: #fcd34d !important; }
/* The PO number on a red or yellow row stays dark blue on both themes - the
   dark theme's light link colour was hard to read on the pale wash (audit 6 Oct). */
html body tr.po-row-payissue > td a.po-link,
html body tr.po-row-token > td a.po-link { color: #1d3a8a !important; text-decoration: underline; text-underline-offset: 2px; }
html body tr.po-row-payissue > td a.po-link:focus-visible,
html body tr.po-row-token > td a.po-link:focus-visible { outline: 2px solid #1d3a8a; outline-offset: 1px; }
/* The tick on a red or yellow row (batch 123, Ashu: "yellow wash me tick not showing") - the dark
   theme's see-through box vanished on the pale wash; a white box with a grey edge on both themes. */
html body tr.po-row-payissue > td .form-check-input,
html body tr.po-row-token > td .form-check-input { background-color: #fff !important; border-color: #6b7280 !important; opacity: 1; }
html body tr.po-row-payissue > td .form-check-input:checked,
html body tr.po-row-token > td .form-check-input:checked { background-color: var(--ihl-primary) !important; border-color: var(--ihl-primary) !important; }
/* A folded cell opens from the keyboard too (Tab, then Enter or Space). */
.cell-clamp:focus-visible { outline: 2px solid var(--ihl-primary); outline-offset: 1px; border-radius: 3px; }
html[data-theme="dark"] body .po-list-grid > :not(caption) > * > * { border-color: rgba(255,255,255,.12); }
html[data-theme="dark"] body .later-ask { border-color: rgba(255,255,255,.15); }
/* The Terms button on the PO page is a filled pill, readable on both themes
   (4 Oct, batch 65, Ashu: "terms are not visible") - a button otherwise takes
   the browser's grey and the orange words vanish on it. Enter PO's chip is a
   span and is left as it is. */
html body button.terms-btn { opacity: 1; }
html body button.terms-btn.terms-credit { background-color: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
html body button.terms-btn.terms-cash   { background-color: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
html body button.terms-btn.terms-unset  { background-color: #e5e7eb; color: #374151; border: 1px solid #9ca3af; }
html body button.terms-btn:focus-visible { outline: 2px solid var(--ihl-primary); outline-offset: 1px; }

/* Batch 68 (4 Oct, Ashu): one compact head for every PO list - the heading
   and the dates on the left, small buttons over the search box on the right;
   grid lines on the PO pages too. */
.list-head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .9rem; margin: -.85rem 0 .5rem; }
.list-head-date { display: inline-flex; align-items: center; gap: .3rem; }
/* The date boxes as small as the filter ticks (round 2, Ashu). */
.list-head-date .form-control { width: auto; font-size: .75rem; padding: .12rem .35rem; min-height: 0; line-height: 1.3; border-radius: 999px; }
/* The search in the right corner of the top line (round 3, Ashu). */
.list-search-wrap { position: relative; display: inline-flex; align-items: center; margin-left: auto; }
.list-search { width: min(340px, 80vw); padding-right: 1.8rem; }
.list-search-clear { position: absolute; right: .35rem; border: 0; background: transparent; color: var(--ihl-muted);
                     font-size: 1.1rem; line-height: 1; padding: 0 .2rem; cursor: pointer; }
.list-search-clear:hover { color: var(--ihl-primary); }
/* The small buttons at the right end of the filter line. */
.po-filters .list-head-tools { margin-left: auto; }
.list-head-tools { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.list-head-tools .btn, .list-head-tools .form-select { padding: .1rem .5rem; font-size: .78rem; line-height: 1.4; }
.list-head-tools .form-select { padding-right: 1.6rem; width: auto; }
.list-grid > :not(caption) > * > * { border: 1px solid var(--ihl-border-strong); }
.list-group-line { font-size: .85rem; padding: .35rem .5rem; margin: .5rem 0 .25rem; border-top: 2px solid var(--ihl-border-strong); background: var(--ihl-surface-alt); }
.cols-actions { display: flex; gap: .5rem; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: .5rem; }
html[data-theme="dark"] body .list-grid > :not(caption) > * > * { border-color: rgba(255,255,255,.12); }
html[data-theme="dark"] body .list-group-line { background: rgba(255,255,255,.05); }

/* Components (batch 70): the amber "factor not checked" note and a narrow status box. */
.comp-warn {
    color: #92400e;
    background: #fef3c7;
    border-radius: 4px;
    display: inline-block;
    padding: 0 .35rem;
    font-size: .75rem;
    margin-top: .15rem;
}
.comp-status { width: auto; min-width: 7.5rem; }
.comp-edit .form-label { color: var(--ihl-muted, #6b7280); }

/* Columns arranged on the list itself (batch 71, wwwroot/listcols.js):
   a heading drags to a new place, its edge drags to size it. */
th[data-move] { cursor: grab; }
th.col-edge { cursor: col-resize; }
body.col-resizing, body.col-resizing * { cursor: col-resize !important; user-select: none; }
th.col-dragging { opacity: .5; }
th.col-drop-before { background-image: linear-gradient(to right, var(--ihl-primary) 3px, transparent 3px) !important; }
th.col-drop-after  { background-image: linear-gradient(to left,  var(--ihl-primary) 3px, transparent 3px) !important; }

/* The Columns chooser as tiles with a search box (batch 71). */
.cols-search { max-width: 320px; }
.cols-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.cols-tile {
    display: flex; align-items: center; gap: 6px; min-width: 0;
    text-align: left; font-size: .8rem; line-height: 1.2; padding: 5px 8px;
    border: 1px solid var(--ihl-border-strong); border-radius: 6px;
    background: var(--ihl-surface); color: var(--ihl-text-soft); cursor: pointer;
}
.cols-tile:hover { border-color: var(--ihl-primary); }
.cols-tile.on { background: var(--ihl-blue-bg); border-color: var(--ihl-blue-line); color: var(--ihl-text); font-weight: 600; cursor: grab; }
.cols-tile.dragging { opacity: .5; }
.cols-tile-no {
    flex: none; min-width: 1.35rem; height: 1.35rem; border-radius: 999px;
    background: var(--ihl-primary); color: #fff; font-size: .7rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.cols-tile-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme="dark"] body .cols-tile { background: #151b2b; border-color: rgba(255,255,255,.14); color: #cfd6e4; }
html[data-theme="dark"] body .cols-tile.on { background: #1d2b4a; border-color: #3b5ba8; color: #fff; }

/* Components: editing on the line, the upload preview (batch 72). */
.comp-inline > td { background: var(--ihl-blue-bg); }
.comp-inline .form-control, .comp-inline .form-select { min-width: 0; }
.comp-inline input[type=number] { min-width: 4.8rem; }
.comp-inline .comp-unit { min-width: 3.6rem; max-width: 4.4rem; }
.comp-inline .form-select { min-width: 7rem; }
.comp-inline .comp-status { width: 100%; }
.comp-inline > td.comp-inline-actions { min-width: 8.5rem; }
.comp-plan { max-height: 240px; overflow: auto; }
.comp-upload { cursor: pointer; }
html[data-theme="dark"] body .comp-inline > td { background: #1d2b4a; }

/* Veg in green, non-veg in red (Components, 5 Oct). */
.veg-yes { color: var(--ihl-green); font-weight: 600; }
.veg-no  { color: var(--ihl-red); font-weight: 600; }
html[data-theme="dark"] body .veg-yes { color: #4ade80; }
html[data-theme="dark"] body .veg-no  { color: #f87171; }

/* The composition picker (batch 74): results with their RDA, the picked ones
   green with a tick, a banned one red; a line above 100% RDA red. */
.comp-search { max-width: 340px; }
.comp-type { width: auto; max-width: 200px; }
.comp-hits {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px;
    max-height: 220px; overflow: auto; margin-top: 6px; padding: 2px;
}
.comp-hit {
    display: block; text-align: left; font-size: .82rem; line-height: 1.25; padding: 5px 8px;
    border: 1px solid var(--ihl-border-strong); border-radius: 6px;
    background: var(--ihl-surface); color: var(--ihl-text); cursor: pointer;
}
.comp-hit:hover:not(:disabled) { border-color: var(--ihl-primary); background: var(--ihl-blue-bg); }
.comp-hit-name { font-weight: 600; }
.comp-hit-rda { color: var(--ihl-primary); font-weight: 600; margin-left: .25rem; white-space: nowrap; }
.comp-hit-sub { display: block; color: var(--ihl-text-soft); font-size: .74rem; margin-top: 1px; }
.comp-hit-tag { margin-left: .35rem; font-size: .72rem; font-weight: 600; white-space: nowrap; }
.comp-hit.picked { background: #ecfdf3; border-color: #75e0a7; cursor: default; opacity: 1; }
.comp-hit.picked .comp-hit-tag, .comp-picked-name { color: var(--ihl-green); }
.comp-picked-name { font-weight: 600; }
.comp-hit.banned { background: var(--ihl-red-bg); border-color: var(--ihl-red-line); color: var(--ihl-red); cursor: not-allowed; opacity: 1; }
.comp-hit.banned .comp-hit-rda, .comp-hit.banned .comp-hit-sub { color: var(--ihl-red); }
.comp-lines .comp-line-row > td { background: #f6fef9; }
.comp-lines .comp-line-row.over > td { background: var(--ihl-red-bg); }
.comp-weight-warn { color: #92400e; }
html[data-theme="dark"] body .comp-hit { background: #151b2b; border-color: rgba(255,255,255,.14); color: #e6eaf2; }
html[data-theme="dark"] body .comp-hit.picked { background: #12301f; border-color: #2f7a4f; }
html[data-theme="dark"] body .comp-hit.banned { background: #3a1616; border-color: #7a2c2c; color: #fca5a5; }
html[data-theme="dark"] body .comp-hit.picked .comp-hit-tag, html[data-theme="dark"] body .comp-picked-name { color: #4ade80; }
html[data-theme="dark"] body .comp-lines .comp-line-row > td { background: #12261b; }
html[data-theme="dark"] body .comp-lines .comp-line-row.over > td { background: #3a1616; }

/* Size bands on Dosage & Packing (batch 74). */
.size-bands td { vertical-align: middle; }
.size-bands input[type=number] { max-width: 7rem; }

/* Saved compositions (batch 75): in the picker, the alike panel, the page. */
.comp-saved-list { max-height: 220px; overflow: auto; }
.comp-saved {
    display: flex; align-items: center; gap: 8px; padding: 5px 8px; margin-bottom: 4px;
    border: 1px solid var(--ihl-blue-line); border-radius: 6px; background: var(--ihl-blue-bg); font-size: .82rem;
}
.comp-saved-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 640px; display: block; }
.comp-like { border: 1px dashed var(--ihl-amber-line); background: var(--ihl-amber-bg); border-radius: 6px; padding: 6px 8px; }
.comp-like-pct { min-width: 2.8rem; font-weight: 700; color: #92400e; }
.comp-front-why summary { cursor: pointer; display: inline; }
.comp-front-why[open] { display: block !important; margin-top: 2px; }
.comp-lib-ban > td { background: var(--ihl-red-bg); color: var(--ihl-red); }
.comp-lib-text { max-width: 360px; }
.rda-grid input { max-width: 9rem; margin-left: auto; }
.rda-set > td { background: var(--ihl-blue-bg); }
.adv-pct { color: var(--ihl-text-soft); font-size: .85em; margin-left: .25rem; white-space: nowrap; }
html[data-theme="dark"] body .comp-saved { background: #1d2b4a; border-color: #3b5ba8; }
html[data-theme="dark"] body .comp-like { background: #2e2512; border-color: #7a5c1e; }
html[data-theme="dark"] body .comp-like-pct { color: #fbbf24; }
html[data-theme="dark"] body .comp-lib-ban > td { background: #3a1616; color: #fca5a5; }
html[data-theme="dark"] body .rda-set > td { background: #1d2b4a; }

/* the order's money in the OG pop-up (batch 91) */
.og-money { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .4rem; }
.og-money > div { border: 1px solid var(--ihl-border); border-radius: 8px; padding: .4rem .55rem; background: var(--ihl-surface); }
.og-money-k { display: block; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ihl-text-soft); }
.og-money-v { display: block; font-size: .95rem; }
.og-money-s { display: block; font-size: .7rem; color: var(--ihl-text-soft); }

/* --- 11. Words on the dark theme are near-white, not grey ---------------------

   Ashu, 27 Sep: "font color white karo - gray ya background matching nahi,
   less visible hai". On the dark theme the small field labels, hint lines and
   muted text were a mid grey (#7c879b / #9aa6bd) on a dark glass card.

   Only the DARK theme changes; the light theme keeps exactly what it had.
   The selectors carry html[data-theme="dark"] body so they win over theme.css,
   which loads after this file. Placeholders stay one step dimmer than typed
   text, so an empty box still looks empty. */

html[data-theme="dark"]:root {
    --ihl-text-soft: #dfe4ee;
    --ihl-muted:     #c3cad8;
}
html[data-theme="dark"] body .form-label,
html[data-theme="dark"] body .form-label.small.text-uppercase { color: #eef2f8; }
html[data-theme="dark"] body .form-text { color: #cfd5e1; }
html[data-theme="dark"] body .text-muted { color: #cfd5e1 !important; }
html[data-theme="dark"] body .form-control::placeholder,
html[data-theme="dark"] body textarea.form-control::placeholder { color: #aab3c5; opacity: 1; }
html[data-theme="dark"] body .input-group-text {
    background-color: var(--ihl-field-bg, rgba(255,255,255,.06));
    color: #dfe4ee;
}

/* --- a PO changed since you last opened it (29 Sep) -------------------------
   Every list that carries the order uses the same class: an amber band on the
   left and a light tint, on both themes. Opening the order clears it. */
html tr.po-changed > td { background-color: rgba(245, 158, 11, .12) !important; }
html tr.po-changed > td:first-child { box-shadow: inset 4px 0 0 #f59e0b; }

/* Batch 77 (6 Oct): Nutrients master, verified components, own RDA. */
.comp-unverified { display: inline-block; font-size: .72rem; font-weight: 600; white-space: nowrap; padding: 0 .35rem; border-radius: 4px;
                   background: #fef3c7; border: 1px solid #fcd34d; color: #92400e; }
.comp-verified { font-size: .75rem; color: var(--ihl-ok-text); white-space: nowrap; }
.comp-own-rda { font-weight: 600; color: var(--ihl-warn-text); }
.nut-group { display: inline-flex; align-items: center; font-size: .8rem; padding: .1rem .5rem; border-radius: 999px;
             border: 1px solid var(--ihl-primary, #2563eb); color: var(--ihl-primary, #2563eb); }
.nut-group.off { opacity: .55; border-style: dashed; }
.nut-grid .nut-gcol { min-width: 6.5rem; }
.nut-grid .nut-gcell input { min-width: 5.5rem; }
.nut-grid .nut-gcell.set input { font-weight: 600; border-color: #75e0a7; }
.nut-grid .nut-edit > td { background: var(--ihl-amber-bg); }
.nut-diffs { border-color: var(--ihl-amber-line); }
html[data-theme="dark"] body .comp-unverified { background: #3a2a05; border-color: #a16207; color: #fde68a; }
html[data-theme="dark"] body .nut-group { border-color: #7aa2ff; color: #a9c2ff; }
html[data-theme="dark"] body .nut-grid .nut-edit > td { background: #2a2410; }
html[data-theme="dark"] body .nut-grid .nut-gcell.set input { border-color: #4ade80; }
html[data-theme="dark"] body .nut-diffs { border-color: #a16207; }
/* 6 Oct (Ashu, screenshot): in day mode the held list heading let the rows
   show through - theme.css (loaded last) sets every table heading transparent
   at the same weight. One step heavier here, a solid white; dark keeps its own. */
html body .po-list-scroll > table > thead > tr > th { background: var(--ihl-pop-bg, #ffffff); }
/* Batch 76 (6 Oct): a component's own GST, and the Push GST preview. */
.comp-own-gst { font-size: .75rem; color: var(--ihl-warn-text); }
.gst-plan { border-color: var(--ihl-amber-line); }
html[data-theme="dark"] body .gst-plan { border-color: #a16207; }
/* 6 Oct (Ashu): "simple % advance likh do, bold and little large". */
.adv-big { font-weight: 700; font-size: 1.05rem; line-height: 1.3; color: var(--ihl-text); }
/* Push GST preview counts - plain chips (theme.css empties Bootstrap's badge colours). */
.gst-chip { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-weight: 600; border: 1px solid var(--ihl-border-strong); background: var(--ihl-pop-bg, #ffffff); }
.gst-chip.warn { border-color: #fcd34d; background: #fef3c7; color: #92400e; }
html[data-theme="dark"] body .gst-chip.warn { background: #3a2a05; border-color: #a16207; color: #fde68a; }
/* Batch 78 (6 Oct): a tab per order category on the Components screen. */
.comp-tabs { display: flex; flex-wrap: wrap; gap: .35rem; border-bottom: 1px solid var(--ihl-border-strong); padding-bottom: .35rem; }
.comp-tab { border: 1px solid var(--ihl-border-strong); background: var(--ihl-pop-bg, #ffffff); border-radius: 8px 8px 0 0; padding: .3rem .8rem; font-size: .85rem; font-weight: 600; color: inherit; }
.comp-tab.on { border-color: var(--ihl-primary, #2563eb); background: var(--ihl-primary, #2563eb); color: #ffffff; }
.comp-tab.off { opacity: .6; border-style: dashed; }
.comp-tab-n { font-weight: 500; opacity: .8; margin-left: .25rem; }
html[data-theme="dark"] body .comp-tab.on { background: #3b5bdb; border-color: #3b5bdb; color: #ffffff; }
/* Batch 79 (6 Oct): Company Information and Company Details. */
.co-card .card-body { padding: 1rem 1.1rem; }
.co-grid { border: 0; padding: 0; margin: 0; min-width: 0; }
.co-images { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.co-image { display: flex; flex-direction: column; align-items: flex-start; }
.co-image-box { width: 9rem; height: 9rem; border: 1px dashed var(--ihl-border-strong); border-radius: 8px; display: grid; place-items: center; background: var(--ihl-pop-bg, #ffffff); overflow: hidden; }
.co-image-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.co-inline { background: var(--ihl-amber-bg); border: 1px solid var(--ihl-amber-line); border-radius: 8px; padding: .5rem; margin-inline: 0; }
.co-chip { display: inline-block; font-size: .7rem; font-weight: 600; padding: 0 .4rem; border-radius: 999px; border: 1px solid var(--ihl-border-strong); margin-left: .25rem; }
.co-state { display: inline-block; font-size: .78rem; font-weight: 600; padding: .05rem .5rem; border-radius: 999px; border: 1px solid var(--ihl-border-strong); }
.co-state.expired { background: #fde8e8; border-color: #f5b5b5; color: #b42318; }
.co-state.soon { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.co-state.valid { background: #e7f6ec; border-color: #9fdcb4; color: #067647; }
.co-logo { height: 3rem; width: auto; max-width: 9rem; object-fit: contain; }
.co-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: .9rem; }
.co-detail { border: 1px solid var(--ihl-border-strong); border-radius: 10px; padding: .8rem .9rem; background: var(--ihl-pop-bg, #ffffff); display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.co-detail.all { border-color: var(--ihl-primary, #2563eb); }
.co-detail-head { display: flex; align-items: center; gap: .5rem; }
.co-lines { display: grid; grid-template-columns: max-content 1fr; gap: .15rem .7rem; margin: 0; font-size: .88rem; }
.co-lines dt { font-weight: 500; opacity: .75; }
.co-lines dd { margin: 0; font-weight: 600; word-break: break-word; }
.co-lines dd.full { grid-column: 1 / -1; font-weight: 500; }
.co-qr { width: 9rem; height: 9rem; object-fit: contain; border: 1px solid var(--ihl-border-strong); border-radius: 6px; background: #ffffff; }
html[data-theme="dark"] body .co-state.expired { background: #3b1414; border-color: #7f1d1d; color: #fca5a5; }
html[data-theme="dark"] body .co-state.soon { background: #3a2a05; border-color: #a16207; color: #fde68a; }
html[data-theme="dark"] body .co-state.valid { background: #0f2e1d; border-color: #166534; color: #86efac; }
html[data-theme="dark"] body .co-inline { background: #2a2410; border-color: #a16207; }
/* Order groups - the OG chip and its pop-up (6 Oct, batch 80). */
.og-chip { display: inline-block; margin-left: .3rem; padding: 0 .45rem; font-size: .72rem; font-weight: 600; line-height: 1.45; white-space: nowrap; border-radius: 999px; border: 1px solid #b9cdf5; background: #eef4ff; cursor: pointer; vertical-align: middle; color: #1750ac; }
.og-chip:hover { border-color: #1e63d0; text-decoration: underline; }
.og-chip-head { font-size: .82rem; padding: .05rem .6rem; margin-left: 0; }
.og-modal { max-width: 720px; }
.og-table th { font-size: .78rem; font-weight: 600; }
.og-table tr.og-current > td { background: var(--ihl-amber-bg); font-weight: 600; }
html[data-theme="dark"] body .og-chip { background: #16233f; border-color: #2f4f8f; color: #9dbcff; }
html[data-theme="dark"] body .og-chip:hover { border-color: #9dbcff; }
html[data-theme="dark"] body .og-table tr.og-current > td { background: #2a2410; }
/* Proforma mode on a list (6 Oct, batch 80): the strip that says which party is picked. */
.pf-strip { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .5rem; padding: .4rem .75rem; font-size: .88rem; border-radius: 8px; border: 1px solid #b9cdf5; background: #eef4ff; }
html[data-theme="dark"] body .pf-strip { background: #16233f; border-color: #2f4f8f; color: #e6ecf7; }
/* The composition label card (6 Oct, batch 81): the preview is paper - white on both themes. */
.label-tools { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .75rem 1.25rem; margin-bottom: .6rem; }
.label-tools .label-width { max-width: 6.5rem; }
.label-buttons { display: flex; gap: .4rem; align-self: center; margin-left: auto; }
.label-preview-wrap { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.label-preview { width: 100%; max-width: 380px; padding: .6rem; border: 1px solid var(--ihl-border-strong); border-radius: 8px; background: #ffffff; max-height: 70vh; overflow: auto; }
.label-preview svg { display: block; width: 100%; height: auto; }
/* The PI chip on a PO list row and the PO page (7 Oct, batch 87): green, amber when the PO changed after it, red for a Final PI. */
.pi-chip { display: inline-block; margin-left: .3rem; padding: 0 .45rem; font-size: .72rem; font-weight: 600; line-height: 1.45; white-space: nowrap; border-radius: 999px; border: 1px solid #9fdcb4; background: #e7f6ec; text-decoration: none; vertical-align: middle; color: #067647; }
.pi-chip:hover { text-decoration: underline; }
.pi-chip.chg { border-color: #fcd34d; background: #fef3c7; color: #8a5200; }
.pi-chip.fin { border-color: #f5b5b0; background: #fdecea; color: #b42318; }
html[data-theme="dark"] body .pi-chip { background: #0f2e1d; border-color: #166534; color: #86efac; }
html[data-theme="dark"] body .pi-chip.chg { background: #3a2a05; border-color: #a16207; color: #fde68a; }
html[data-theme="dark"] body .pi-chip.fin { background: #3b1414; border-color: #7f1d1d; color: #fca5a5; }
html[data-theme="dark"] body .sidebar details.nav-group > summary { color: #a9b6cf; }
/* --- Messages (batch 97): the Outbox status chips, both themes ----------------- */
.msg-chip { display: inline-block; padding: .1rem .5rem; font-size: .75rem; font-weight: 600; line-height: 1.45; white-space: nowrap; border-radius: 999px; border: 1px solid #b9c3d3; background: #eef2f7; color: #344054; }
.msg-chip.big { font-size: .9rem; padding: .2rem .7rem; }
.msg-chip.ok { border-color: #9fdcb4; background: #e7f6ec; color: #067647; }
.msg-chip.wait { border-color: #a5c8f0; background: #e8f1fc; color: #1d4f91; }
.msg-chip.warn { border-color: #fcd34d; background: #fef3c7; color: #8a5200; }
.msg-chip.bad { border-color: #f5b5b0; background: #fdecea; color: #b42318; }
.msg-chip.off { border-color: #d0d5dd; background: #f2f4f7; color: #475467; }
html[data-theme="dark"] body .msg-chip { background: #1d2433; border-color: #3a4558; color: #dfe4ee; }
html[data-theme="dark"] body .msg-chip.ok { background: #0f2e1d; border-color: #166534; color: #86efac; }
html[data-theme="dark"] body .msg-chip.wait { background: #0f2340; border-color: #1e4f8a; color: #93c5fd; }
html[data-theme="dark"] body .msg-chip.warn { background: #3a2a05; border-color: #a16207; color: #fde68a; }
html[data-theme="dark"] body .msg-chip.bad { background: #3b1414; border-color: #7f1d1d; color: #fca5a5; }
html[data-theme="dark"] body .msg-chip.off { background: #252b36; border-color: #3f4756; color: #c3cad6; }
/* --- Menu on the light theme (8 Oct, Ashu: "light mode me menu text dark kar do", and
   the group name under the mouse went white on the light menu) ------------------- */
html:not([data-theme="dark"]) body .sidebar .nav-link:not(.active) { font-weight: 500; color: #111827; }
html:not([data-theme="dark"]) body .sidebar .nav-link:not(.active):hover { background: rgba(16,24,40,.08); color: #000; }
html:not([data-theme="dark"]) body .sidebar .nav-link:not(.active) .nav-ico { opacity: 1; }
html:not([data-theme="dark"]) body .sidebar details.nav-group > summary { font-weight: 700; color: #344054; border-radius: 7px; margin: 0 .6rem; padding-left: .7rem; padding-right: .7rem; }
html:not([data-theme="dark"]) body .sidebar details.nav-group > summary:hover { background: rgba(16,24,40,.08); color: #101828; }
html:not([data-theme="dark"]) body .sidebar details.nav-group > summary:focus-visible { outline: 2px solid #4f46e5; outline-offset: 1px; color: #101828; }
html[data-theme="dark"] body .sidebar details.nav-group > summary:hover { color: #fff; background: rgba(255,255,255,.06); }