/*
    Module B (inventory) styles, from InventorySystem.Client's app.css.
    Everything is scoped under .app-b (the root of ModuloBLayout), so none of it
    reaches Hive's own pages. Styles used by a single component live in that
    component's .razor.css instead.
*/

/*
    SWARM Transport's palette, taken from the reference design: black rail, warm
    off-white canvas, gold as the single accent. Every colour below appears in
    that design — nothing is invented here.
*/
.app-b {
    --ink: #1A1A1A;
    --ink-2: #26241F;
    --ink-3: #2E2C27;
    --ground: #FAFAF7;
    --panel: #FFFFFF;
    --panel-2: #F4F1E9;
    --line: #E5E2DA;
    --line-soft: #F0EDE5;
    --text: #1A1A1A;
    --text-2: #4A473F;
    --muted: #8D897F;
    --muted-2: #B8B4AA;
    --accent: #D39E00;
    --accent-hi: #E5AE0A;
    --accent-lit: #EFC544;
    --accent-deep: #8A6600;
    --accent-link: #B8860B;
    --accent-soft: #FBF3DC;
    --accent-line: #EFDFA8;
    --good: #15803D;
    --good-2: #1E7A46;
    --good-soft: #E8F3EC;
    --warn: #8A6600;
    --warn-soft: #FBF3DC;
    --crit: #DC2626;
    --crit-2: #B91C1C;
    --crit-soft: #FDEEEE;
    --crit-line: #F6D4D4;
    --radius: 8px;
    --radius-lg: 12px;
    --shadow-menu: 0 8px 24px rgba(26, 26, 26, 0.12);
    --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05);
    /* The dashboard's series colours, taken from that design. Gold is shared with
       the rest of the app; the other four exist only inside charts. */
    --series-1: #2A6FD4;
    --series-2: #1E8A5F;
    --series-3: #D39E00;
    --series-4: #C0504A;
    --series-5: #5C6B87;
}
.app-b, .app-b * { box-sizing: border-box; }
.app-b {
    margin: 0;
    background: var(--ground);
    color: var(--text);
    font-family: "Instrument Sans", "Helvetica Neue", system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
.app-b h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 4px; }
.app-b h2 { font-size: 16px; font-weight: 700; margin: 28px 0 10px; }
.app-b .subtitle { color: var(--muted); font-size: 12.5px; margin: 0 0 20px; }
.app-b .hint { color: var(--muted); font-size: 12px; margin: 0 0 10px; }
.app-b .muted { color: var(--muted); }
.app-b .mono, .app-b .num { font-variant-numeric: tabular-nums; }
.app-b .num { text-align: right; white-space: nowrap; }
.app-b a { color: var(--accent-link); text-decoration: none; }
.app-b a:hover { color: var(--accent); text-decoration: underline; }
.app-b ::placeholder { color: #A8A49A; }
/* ---------- search box (Quotes) ---------- */
.app-b .topbar-search {
    flex: 1; max-width: 440px; display: flex; align-items: center; gap: 10px;
    background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 8px 14px;
}
.app-b .topbar-search input {
    border: none; outline: none; background: transparent; font-size: 13.5px;
    width: 100%; color: var(--text); padding: 0;
}
.app-b .content { flex: 1; overflow-y: auto; padding: 16px 24px 40px; }
.app-b .page-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; margin-bottom: 16px;
}
.app-b .page-note { font-size: 12.5px; color: var(--muted); }
/* ---------- tiles ---------- */
.app-b .tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.app-b .tiles-5 { grid-template-columns: repeat(5, 1fr); }
.app-b .tile-delta.up { color: var(--good); }
.app-b .tile-delta.down { color: var(--crit); }
.app-b .tile-warn { border-color: var(--accent-line); background: var(--accent-soft); }
.app-b .tile-warn .tile-value { color: var(--accent-deep); }
/* ---------- toolbar ---------- */
.app-b .toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.app-b .toolbar-divider { width: 1px; height: 22px; background: var(--line); }
.app-b .toolbar-spacer { flex: 1; }
.app-b .search { flex: 1 1 300px; }
.app-b .pill {
    background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
    padding: 7px 14px; font-size: 12.5px; font-weight: 600; color: var(--text-2);
    cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
}
.app-b .pill:hover:not(:disabled) { border-color: var(--accent); }
.app-b .pill.on { background: var(--accent-soft); color: var(--text); }
.app-b .dropdown { position: relative; }
.app-b .menu {
    position: absolute; top: 40px; left: 0; z-index: 40; background: var(--panel);
    border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-menu);
    padding: 6px; min-width: 200px; display: flex; flex-direction: column; text-align: left;
}
.app-b .menu.right { left: auto; right: 0; }
.app-b .menu-item {
    padding: 8px 12px; border-radius: 7px; font-size: 13px; cursor: pointer;
    background: none; border: none; text-align: left; font-family: inherit;
    display: flex; align-items: center; gap: 9px; color: var(--text);
}
.app-b .menu-item:hover { background: var(--accent-soft); }
.app-b .menu-item.danger { color: var(--crit); }
.app-b .menu-item.danger:hover { background: var(--crit-soft); }
.app-b .menu-item.selected { font-weight: 700; }
.app-b .menu-sep { height: 1px; background: var(--line-soft); margin: 4px 6px; }
.app-b .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
/* ---------- bulk bar ---------- */
.app-b .bulkbar button.danger { color: #F87171; }
.app-b .bulkbar button.danger:hover { border-color: var(--crit); }
/* ---------- tables ---------- */
.app-b .data-card {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
/* Standalone the wrapper is the card; inside a .data-card or .panel the card is
   already drawn around it, so it only scrolls. */
.app-b .table-wrap {
    overflow-x: auto; border-radius: var(--radius-lg); background: var(--panel);
    border: 1px solid var(--line); margin: 12px 0;
}
.app-b .data-card > .table-wrap, .app-b .panel .table-wrap { border: 0; margin: 0; background: transparent; }
.app-b table:where(:not([class*="dxbl-"], [class*="dxbl-"] *)) { border-collapse: collapse; width: 100%; font-size: 14px; }
.app-b th:where(:not([class*="dxbl-"], [class*="dxbl-"] *)), .app-b td:where(:not([class*="dxbl-"], [class*="dxbl-"] *)) { text-align: left; padding: 11px 12px; }
.app-b thead th:where(:not([class*="dxbl-"], [class*="dxbl-"] *)) {
    background: var(--ground); border-bottom: 1px solid var(--line);
    font-size: 12px; font-weight: 600; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
}
.app-b thead th.sortable { cursor: pointer; }
.app-b tbody td:where(:not([class*="dxbl-"], [class*="dxbl-"] *)) { border-bottom: 1px solid var(--line-soft); }
.app-b tbody tr:last-child td:where(:not([class*="dxbl-"], [class*="dxbl-"] *)) { border-bottom: 0; }
.app-b tfoot td:where(:not([class*="dxbl-"], [class*="dxbl-"] *)) { background: var(--ground); font-weight: 700; }
.app-b tr.clickable { cursor: pointer; }
.app-b tbody tr:where(:not([class*="dxbl-"], [class*="dxbl-"] *)):hover { background: var(--accent-soft); }
.app-b tr.row-warn { background: var(--crit-soft); }
.app-b tr.row-held { background: var(--accent-soft); }
.app-b td.cell-actions { position: relative; text-align: right; }
.app-b .row-title { font-weight: 600; font-size: 13.5px; }
.app-b .row-sub { font-size: 12px; color: var(--muted); }
.app-b .row-link { font-weight: 600; color: var(--accent-link); font-variant-numeric: tabular-nums; white-space: nowrap; }
.app-b .flag-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--crit); display: inline-block;
}
.app-b .icon-btn {
    border: none; background: transparent; font-size: 16px; color: var(--muted);
    cursor: pointer; padding: 4px 8px; border-radius: 6px; line-height: 1;
}
.app-b .icon-btn:hover { background: var(--panel-2); color: var(--text); }
.app-b input[type=checkbox]:where(:not([class*="dxbl-"], [class*="dxbl-"] *)) { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.app-b .pagination {
    display: flex; align-items: center; gap: 14px; padding: 12px 16px;
    border-top: 1px solid var(--line); background: var(--ground);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg); font-size: 13px; color: var(--muted);
}
.app-b .pagination select { padding: 5px 8px; font-size: 12.5px; }
.app-b .page-btn {
    border: 1px solid var(--line); background: var(--panel); border-radius: 7px;
    padding: 5px 11px; font-size: 12.5px; cursor: pointer; color: var(--text-2);
}
.app-b .page-btn:hover:not(:disabled) { border-color: var(--accent); }
.app-b .page-btn.current { border-color: var(--accent); background: var(--accent-soft); font-weight: 700; color: var(--text); }
.app-b .page-btn:disabled { opacity: 0.45; cursor: not-allowed; }
/* ---------- chips, banners ---------- */
.app-b .chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
    border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.app-b .chip .dot { width: 6px; height: 6px; }
.app-b .chip-good { background: var(--good-soft); color: var(--good-2); }
.app-b .chip-warn { background: var(--crit-soft); color: var(--crit-2); }
.app-b .chip-active { background: var(--accent-soft); color: var(--accent-deep); }
/* A line that is fully made up: still readable, visibly finished. */
.app-b .panel-foot { border-top: 1px solid var(--line); }
.app-b .chip-neutral { background: var(--panel-2); color: var(--text-2); }
.app-b .chip-muted { background: var(--panel-2); color: var(--muted); }
/* A receipt line a cargo release is taking out, and the quantities beside its chip. */
.app-b .chip-releasing { background: #EFF4FF; color: #3538CD; }
.app-b .line-stock { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.app-b .line-stock-qty { font-size: 11.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.app-b tr.row-releasing > td:first-child { box-shadow: inset 3px 0 #3538CD; }
.app-b .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.app-b .type-tag {
    display: inline-block; padding: 3px 9px; border-radius: 6px; font-size: 12px;
    font-weight: 600; background: var(--panel-2); color: var(--text-2); border: 1px solid var(--line);
}
.app-b .banner { padding: 12px 16px; border-radius: 10px; border: 1px solid; margin: 14px 0; font-size: 13px; }
.app-b .banner-warn { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-deep); }
.app-b .banner-good { background: var(--good-soft); border-color: #CFE3D8; color: var(--good-2); }
.app-b .banner-crit { background: var(--crit-soft); border-color: var(--crit-line); color: var(--crit-2); }
.app-b .error {
    color: var(--crit-2); background: var(--crit-soft); border: 1px solid var(--crit-line);
    padding: 12px 16px; border-radius: 10px;
}
/* ---------- panels & cards ---------- */
.app-b .panel {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 20px 22px; display: flex; flex-direction: column; gap: 14px;
}
.app-b .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.app-b .panel-title { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 9px; }
.app-b .panel-note { font-size: 12px; color: var(--muted); }
.app-b .panel-badge {
    width: 22px; height: 22px; border-radius: 6px; background: var(--panel-2);
    color: var(--accent-deep); font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.app-b .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.app-b .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.app-b .fields-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.app-b .span-2 { grid-column: 1 / -1; }
.app-b .stack { display: flex; flex-direction: column; gap: 16px; }
.app-b .cards { display: flex; flex-wrap: wrap; gap: 12px; }
.app-b .card {
    background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
    padding: 14px 16px; display: flex; flex-direction: column; gap: 3px;
    min-width: 220px; font-size: 13.5px; text-align: left;
}
.app-b .card-role { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.app-b .card-highlight { background: var(--accent-soft); border-color: var(--accent-line); }
/* ---------- detail ---------- */
.app-b .trail { margin: 0; padding-left: 18px; }
.app-b .trail li { margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.app-b .events { list-style: none; margin: 14px 0 0; padding: 0; font-size: 13px; }
.app-b .events li { display: flex; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--line-soft); }
/* ---------- summary rail ---------- */
.app-b .rail { display: flex; flex-direction: column; gap: 8px; }
.app-b .rail-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.app-b .rail-row dt, .app-b .rail-key { color: var(--muted); }
.app-b .rail-row dd, .app-b .rail-val { margin: 0; font-weight: 600; text-align: right; }
.app-b .rail-sep { height: 1px; background: var(--line-soft); margin: 6px 0; }
/* ---------- forms ---------- */
.app-b label.field {
    display: flex; flex-direction: column; gap: 5px;
    font-size: 12.5px; font-weight: 600; color: var(--text-2);
}
.app-b input[type=text]:where(:not([class*="dxbl-"], [class*="dxbl-"] *)), .app-b input[type=password]:where(:not([class*="dxbl-"], [class*="dxbl-"] *)), .app-b input[type=date]:where(:not([class*="dxbl-"], [class*="dxbl-"] *)), .app-b input[type=datetime-local]:where(:not([class*="dxbl-"], [class*="dxbl-"] *)), .app-b input[type=number]:where(:not([class*="dxbl-"], [class*="dxbl-"] *)), .app-b input:not([type]):where(:not([class*="dxbl-"], [class*="dxbl-"] *)), .app-b select:where(:not([class*="dxbl-"], [class*="dxbl-"] *)), .app-b textarea:where(:not([class*="dxbl-"], [class*="dxbl-"] *)) {
    border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 12px;
    font: inherit; font-size: 13.5px; background: var(--panel); color: var(--text);
}
.app-b textarea { resize: vertical; }
.app-b input:where(:not([class*="dxbl-"], [class*="dxbl-"] *)):focus-visible, .app-b select:where(:not([class*="dxbl-"], [class*="dxbl-"] *)):focus-visible, .app-b textarea:where(:not([class*="dxbl-"], [class*="dxbl-"] *)):focus-visible, .app-b button:where(:not([class*="dxbl-"], [class*="dxbl-"] *)):focus-visible {
    outline: 2px solid var(--accent); outline-offset: 1px;
}
.app-b .cell-input {
    width: 100%; border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px;
    font-size: 13px;
}
.app-b .cell-input.invalid { border-color: var(--crit); }
.app-b .cell-error { font-size: 11px; color: var(--crit); text-align: right; padding-top: 3px; }
.app-b .check { display: flex; align-items: center; gap: 7px; font-size: 13.5px; }
.app-b button:where(:not([class*="dxbl-"], [class*="dxbl-"] *)) { font: inherit; border-radius: var(--radius); padding: 9px 16px; cursor: pointer; border: 1px solid transparent; }
.app-b button:where(:not([class*="dxbl-"], [class*="dxbl-"] *)):disabled { opacity: 0.5; cursor: not-allowed; }
.app-b .btn-primary {
    background: var(--accent); color: var(--ink); border: none;
    font-size: 13.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px;
}
.app-b .btn-primary:hover:not(:disabled) { background: var(--accent-hi); }
.app-b .btn-secondary {
    background: var(--panel); border-color: var(--line); color: var(--text);
    font-size: 13px; font-weight: 600;
}
.app-b .btn-secondary:hover:not(:disabled) { border-color: var(--accent); }
.app-b .btn-link { background: none; border: none; color: var(--muted); font-size: 13px; font-weight: 600; }
.app-b .btn-link:hover { color: var(--text); }
.app-b .btn-underline {
    background: none; border: none; color: var(--accent-deep); font-size: 13px;
    font-weight: 600; text-decoration: underline;
}
.app-b .btn-dashed {
    background: var(--panel); border: 1px dashed #D0CCC0; border-radius: var(--radius);
    padding: 8px 16px; font-size: 13px; font-weight: 600; color: var(--text-2);
}
.app-b .btn-dashed:hover { border-color: var(--accent); color: var(--accent-deep); }
.app-b .btn-danger { background: var(--crit); color: #fff; border: none; font-weight: 700; font-size: 13.5px; }
.app-b .btn-danger:hover:not(:disabled) { background: var(--crit-2); }
.app-b .actions { display: flex; gap: 10px; align-items: center; margin: 24px 0 8px; }
.app-b .pager { display: flex; align-items: center; gap: 14px; margin: 12px 0; font-size: 13px; color: var(--muted); }
/* ---------- wizard ---------- */
.app-b .wizard { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.app-b .wizard-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.app-b .wizard-head h1 span { color: var(--muted); font-weight: 500; font-size: 16px; }
.app-b .stepper {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 18px 24px; display: flex; align-items: center; gap: 18px;
}
.app-b .step { display: flex; align-items: center; gap: 12px; background: none; border: none; padding: 0; cursor: pointer; }
.app-b .step-circle {
    width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-size: 14px; font-weight: 700;
    background: var(--line-soft); color: var(--muted);
}
.app-b .step.current .step-circle { background: var(--accent); color: var(--ink); }
.app-b .step.done .step-circle { background: var(--good-soft); color: var(--good-2); }
.app-b .step-kicker {
    font-size: 11px; font-weight: 600; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.05em;
}
.app-b .step-name { font-size: 14px; font-weight: 700; color: var(--muted); text-align: left; }
.app-b .step.current .step-name, .app-b .step.done .step-name { color: var(--text); }
.app-b .step-bar { flex: 1; height: 4px; border-radius: 2px; background: var(--line-soft); overflow: hidden; }
.app-b .step-bar span { display: block; height: 100%; background: var(--accent); transition: width 0.25s; }
.app-b .wizard-foot { display: flex; align-items: center; gap: 12px; padding-top: 4px; }
.app-b th.chw-head { background: var(--accent-soft); color: var(--accent-deep); font-weight: 700; }
.app-b td.chw-cell {
    background: var(--accent-soft); color: var(--accent-deep); font-weight: 700;
    text-align: right; font-variant-numeric: tabular-nums;
}
.app-b .compact-table th { background: transparent; padding: 8px 10px; font-size: 11.5px; }
.app-b .compact-table td { padding: 6px 5px; font-size: 13px; }
.app-b .compact-table tbody tr:hover { background: transparent; }
/* ---------- stock rollup ---------- */
/* ---------- modal ---------- */
.app-b .modal-backdrop {
    position: fixed; inset: 0; background: rgba(26, 26, 26, 0.45); z-index: 100;
    display: flex; align-items: center; justify-content: center; padding: 24px;
}
.app-b .modal {
    background: var(--panel); border-radius: var(--radius-lg); padding: 26px 28px;
    width: 460px; max-width: 100%; max-height: 90vh; overflow-y: auto;
    box-shadow: 0 24px 60px rgba(26, 26, 26, 0.3); display: flex; flex-direction: column; gap: 14px;
}
.app-b .modal.wide { width: 860px; }
.app-b .modal-title { font-size: 17px; font-weight: 700; }
.app-b .modal-foot { display: flex; justify-content: flex-end; gap: 10px; }
.app-b .login-card .btn-primary { width: 100%; margin-top: 22px; justify-content: center; padding: 11px 16px; }
.app-b .hv-field.invalid { border-color: rgba(239, 68, 68, .65); }
.app-b .hv-message.info { background: rgba(245, 165, 36, .1); border-color: rgba(245, 165, 36, .32); color: #FCD58A; }
.app-b .hv-cta.busy .hv-spin { display: block; }
.app-b .validation-message { color: var(--crit); font-size: 13px; }
/* ---------- print ---------- */
.app-b .print-sheet-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.app-b .print-brand { font-weight: 700; }
@media print {
    /* Printing a module B sheet hides everything else on the page, Hive's layout included. */
    body * { visibility: hidden; }
    .app-b .modal-backdrop, .app-b .modal-backdrop * { visibility: visible; }
    .app-b .modal-backdrop { position: absolute; inset: 0; background: #fff; padding: 0; display: block; }
    .app-b .modal { width: 100%; max-width: none; box-shadow: none; padding: 0; max-height: none; }
    .app-b .modal-foot, .app-b .no-print { display: none !important; }
}
/* ---------- dashboard ---------- */
.app-b .dash-kpi-change.up { color: var(--good); }
.app-b .dash-kpi-change.down { color: var(--crit); }
/* stacked bars */
/* donut */
.app-b .donut-legend .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-b .donut-legend .count { font-variant-numeric: tabular-nums; color: var(--muted); }
/* ranked list */
.app-b .rank-row { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.app-b .rank-row:last-child { margin-bottom: 0; }
.app-b .rank-no {
    font-size: 10px; font-weight: 700; color: var(--accent-deep); width: 18px;
    text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums;
}
.app-b .rank-body { flex: 1; min-width: 0; }
.app-b .rank-name {
    font-size: 12px; font-weight: 500; margin-bottom: 4px;
    display: flex; align-items: center; gap: 5px;
}
.app-b .rank-name small { font-size: 10px; color: var(--muted); }
.app-b .rank-track { height: 3px; background: var(--line-soft); border-radius: 2px; overflow: hidden; }
.app-b .rank-track > span { display: block; height: 100%; background: var(--accent); opacity: 0.6; border-radius: 2px; }
.app-b .rank-count { font-size: 11px; color: var(--muted); flex-shrink: 0; font-variant-numeric: tabular-nums; }
/* compact grid tables */
.app-b .mini-row .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-b .mini-pill.on { background: var(--good-soft); color: var(--good-2); }
.app-b .mini-pill.off { background: var(--panel-2); color: var(--muted); }
.app-b .dash-empty { font-size: 12px; color: var(--muted); padding: 8px 0; }
.app-b .mini-row.clickable { cursor: pointer; }/* ---------- living inside Hive ----------
   Hive loads Bootstrap 4, Bootstrap 5 and AdminLTE on every page. Where module B
   uses one of their class names for its own purpose, undo what they add. */
.app-b .modal-backdrop { z-index: 1050; width: auto; height: auto; opacity: 1; }
.app-b .modal { position: static; top: auto; left: auto; height: auto; z-index: auto; overflow-x: visible; }
.app-b .card { margin-bottom: 0; box-shadow: none; word-wrap: normal; }
.app-b .btn-link, .app-b .btn-link:hover { text-decoration: none; }

/* ---------- DevExpress list pages (warehouse receipts, cargo releases) ----------
   What the DevExpress list screens share: totals that filter, the filter bar, the
   grid, its pager, toolbar and row menu. The DevExpress theme stays the app-wide
   bootstrap one module A is built on; these rules restyle the components only under
   .dxl-page, through their own CSS variables. The .app-b prefix keeps them ahead of
   the theme, which loads after this file. Each page keeps what is its own in its
   .razor.css. */

.app-b .dxl-page { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* header */
.app-b .dxl-head { display: flex; flex-direction: column; gap: 6px; }
.app-b .dxl-head h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.01em; }
.app-b .dxl-head p { margin: 0; font-size: 14px; color: #6B7280; }

/* totals that filter: as many equal columns as there are cards */
.app-b .dxl-kpis { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; }
.app-b .dxl-kpi {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px;
    border: 1.5px solid #E6E8EB;
    border-radius: 12px;
    background: #fff;
    font: inherit;
    text-align: left;
    color: #1F2328;
    cursor: pointer;
}
.app-b .dxl-kpi.warn { border-color: #F4D3CF; }
.app-b .dxl-kpi.on { border-color: #D9A21B; background: #FFFBF0; }
.app-b .dxl-kpi-top { display: flex; align-items: center; gap: 8px; width: 100%; }
.app-b .dxl-dot { width: 8px; height: 8px; border-radius: 50%; }
.app-b .dxl-kpi-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6B7280; }
.app-b .dxl-kpi-hint { margin-left: auto; font-size: 11px; font-weight: 700; color: #9A6F00; }
.app-b .dxl-kpi-n { font-size: 28px; font-weight: 700; color: #1F2328; }
.app-b .dxl-kpi-n.warn { color: #B42318; }
.app-b .dxl-kpi-sub { font-size: 12px; color: #8A9099; }

/* filter bar */
.app-b .dxl-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border: 1px solid #E6E8EB;
    border-radius: 12px;
    background: #fff;
}
.app-b .dxl-shown { margin-left: auto; font-size: 12px; color: #8A9099; }

/* an outlined editor with its label sitting on the border */
.app-b .dxl-field { position: relative; padding-top: 4px; }
.app-b .dxl-field-label {
    position: absolute;
    top: -3px;
    left: 10px;
    z-index: 1;
    padding: 0 4px;
    background: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 14px;
    color: #8A9099;
    pointer-events: none;
}

.app-b .dxl-page .dxbl-text-edit {
    --dxbl-text-edit-border-color: #D8DCE1;
    --dxbl-text-edit-border-radius: 10px;
    --dxbl-text-edit-focus-border-color: #D9A21B;
    --dxbl-text-edit-focus-shadow-spread: 0;
    --dxbl-text-edit-focus-shadow-blur: 0;
    --dxbl-text-edit-font-size: 13px;
    --dxbl-text-edit-padding-y: .5rem;
    --dxbl-text-edit-color: #1F2328;
    width: 100%;
    font-weight: 500;
}
.app-b .dxl-field .dxbl-text-edit { box-sizing: border-box; padding-left: 5px; padding-right: 5px; }
.app-b .dxl-field .dxbl-tag-box input { padding-left: 5px; }

/* status list: a box that ticks (drawn in the drop-down, outside the page) */
.dxl-check-item { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.dxl-box {
    width: 16px;
    height: 16px;
    border: 1.5px solid #C4C9D0;
    border-radius: 4px;
    background: #fff;
    color: transparent;
    font-size: 11px;
    line-height: 13px;
    text-align: center;
}
.dxl-box.on { border-color: #D9A21B; background: #D9A21B; color: #1F2328; }

/* at most two tags in the status box */
.app-b .dxl-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 2px 4px 2px 0;
    padding: 2px 10px;
    border-radius: 999px;
    background: #FBF3DC;
    color: #7A5800;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.app-b .dxl-tag-x { font-size: 10px; cursor: pointer; opacity: .7; }
.app-b .dxl-tag-x:hover { opacity: 1; }

/* a pill that switches a quick filter on, gold like a filtering total card */
.app-b .dxl-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    margin-top: 4px;
    padding: 0 8px 0 14px;
    border: 1px solid #D8DCE1;
    border-radius: 999px;
    background: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #1F2328;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}
.app-b .dxl-toggle:hover { border-color: #D9A21B; }
.app-b .dxl-toggle.on { border-color: #D9A21B; background: #FFFBF0; color: #6E4F00; }
.app-b .dxl-toggle-dot { width: 8px; height: 8px; border-radius: 50%; background: #D92D20; }
.app-b .dxl-toggle-n {
    min-width: 22px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #F1F2F4;
    color: #4B5159;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}
.app-b .dxl-toggle.on .dxl-toggle-n { background: #FBF3DC; color: #7A5800; }

/* the grid */
.app-b .dxl-grid-card {
    min-width: 0;
    min-height: 560px;
    padding: 8px 12px 12px;
    border: 1px solid #E6E8EB;
    border-radius: 12px;
    background: #fff;
}

.app-b .dxl-page .dxbl-grid {
    --dxbl-grid-border-width: 0;
    --dxbl-grid-font-size: 14px;
    --dxbl-grid-color: #1F2328;
    --dxbl-grid-h-line-color: #F0F1F3;
    --dxbl-grid-v-line-color: transparent;
    --dxbl-grid-text-cell-padding-y: 11px;
    --dxbl-grid-text-cell-padding-x: 12px;
    --dxbl-grid-hover-bg: #FFFBF0;
    --dxbl-grid-selection-bg: #FBF3DC;
    --dxbl-grid-selection-color: #1F2328;
    --dxbl-grid-selection-focus-bg: #FBF3DC;
    --dxbl-grid-focus-bg: #FBF3DC;
    --dxbl-grid-footer-bg: #FAFAFB;
    --dxbl-grid-footer-font-weight: 700;
    --dxbl-grid-footer-color: #1F2328;
    --dxbl-grid-toolbar-container-padding-x: 4px;
    max-width: 100%;
    font-family: inherit;
}

.app-b .dxl-page .dxbl-grid .dxbl-grid-table > thead .dxbl-grid-header-row > th:not(.dxbl-grid-empty-cell) {
    background-color: #FAFAFB;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8A9099;
}
.app-b .dxl-page .dxbl-grid .dxbl-grid-table > tbody > tr > td { vertical-align: middle; }
.app-b .dxl-page .dxbl-grid .dxbl-grid-table > tbody > tr.dxl-row-warn > td { background: #FFFBFA; }
.app-b .dxl-page .dxbl-grid .dxbl-grid-table > tbody > tr.dxl-row-releasing > td { background: #F7F9FF; }
.app-b .dxl-page .dxbl-grid .dxbl-grid-table > tbody > tr.dxl-row-releasing > td:first-child { box-shadow: inset 3px 0 #3538CD; }
.app-b .dxl-page .dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-grid-selected-row > td { background: #FBF3DC; }
.app-b .dxl-page .dxbl-grid .dxbl-grid-footer-row > td { font-weight: 700; color: #1F2328; }

/* pager: separate rounded buttons, the current page in the module's gold */
.app-b .dxl-page .dxbl-pager {
    --dxbl-pager-font-size: 13px;
    --dxbl-pager-color: #6B7280;
    --dxbl-pager-btn-bg: #fff;
    --dxbl-pager-btn-color: #1F2328;
    --dxbl-pager-btn-border-color: #E6E8EB;
    --dxbl-pager-btn-hover-bg: #FFFBF0;
    --dxbl-pager-btn-hover-color: #1F2328;
    --dxbl-pager-btn-disabled-bg: #fff;
    --dxbl-pager-btn-disabled-color: #C4C9D0;
    --dxbl-pager-page-btn-bg: #fff;
    --dxbl-pager-page-btn-color: #1F2328;
    --dxbl-pager-page-btn-hover-bg: #FFFBF0;
    --dxbl-pager-page-btn-hover-color: #1F2328;
    --dxbl-pager-active-page-btn-bg: #D9A21B;
    --dxbl-pager-active-page-btn-color: #1F2328;
    gap: 6px;
}
.app-b .dxl-page .dxbl-pager > .dxbl-btn.dxbl-btn-outline-secondary {
    min-width: 32px;
    height: 32px;
    margin: 0 !important;
    padding: 0 10px;
    border: 1px solid #E6E8EB;
    border-radius: 8px !important;
    font-weight: 700;
    justify-content: center;
    transition: background-color .15s, border-color .15s;
}
.app-b .dxl-page .dxbl-pager > .dxbl-btn.dxbl-btn-outline-secondary:not(:disabled):not(.dxbl-disabled):hover { border-color: #D9A21B; }
.app-b .dxl-page .dxbl-pager > .dxbl-btn.dxbl-btn-outline-secondary.dxbl-pager-active-page-btn {
    border-color: #D9A21B;
    box-shadow: 0 0 0 3px #F6E7BD;
}
.app-b .dxl-page .dxbl-pager-summary { font-size: 13px; color: #6B7280; }

/* toolbar: print, new, columns and the search box, pushed right */
.app-b .dxl-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; width: 100%; padding: 6px 0; }
.app-b .dxl-search { width: 260px; }

.app-b .dxl-page .dxl-btn {
    --dxbl-btn-border-radius: 8px;
    --dxbl-btn-font-size: 14px;
    --dxbl-btn-padding-y: 9px;
    --dxbl-btn-padding-x: 16px;
    --dxbl-btn-border-color: #D8DCE1;
    --dxbl-btn-color: #1F2328;
    --dxbl-btn-bg: #fff;
    --dxbl-btn-hover-bg: #F6F7F9;
    --dxbl-btn-hover-color: #1F2328;
    --dxbl-btn-hover-border-color: #D8DCE1;
    font-weight: 600;
}
.app-b .dxl-page .dxl-btn-primary {
    --dxbl-btn-bg: #D9A21B;
    --dxbl-btn-border-color: #D9A21B;
    --dxbl-btn-hover-bg: #C8940F;
    --dxbl-btn-hover-border-color: #C8940F;
    --dxbl-btn-image-color: #1F2328;
    --dxbl-btn-hover-image-color: #1F2328;
    font-weight: 700;
}
.app-b .dxl-page .dxl-btn-icon { --dxbl-btn-padding-x: 10px; }

/* icons drawn in CSS, so the pages need no icon font */
.app-b .dxl-icon-print,
.app-b .dxl-icon-add,
.app-b .dxl-icon-columns { position: relative; display: inline-block; width: 14px; height: 14px; }
.app-b .dxl-icon-add::before,
.app-b .dxl-icon-add::after { content: ""; position: absolute; top: 6px; left: 1px; width: 12px; height: 2px; border-radius: 1px; background: currentColor; }
.app-b .dxl-icon-add::after { transform: rotate(90deg); }
.app-b .dxl-icon-print::before { content: ""; position: absolute; inset: 4px 1px 2px; border: 1.5px solid currentColor; border-radius: 2px; }
.app-b .dxl-icon-print::after { content: ""; position: absolute; top: 1px; left: 4px; width: 6px; height: 4px; border: 1.5px solid currentColor; border-bottom: 0; }
.app-b .dxl-icon-columns::before { content: ""; position: absolute; inset: 1px; border: 1.5px solid currentColor; border-radius: 2px; }
.app-b .dxl-icon-columns::after { content: ""; position: absolute; top: 1px; bottom: 1px; left: 6px; width: 1.5px; background: currentColor; }

/* cells */
.app-b .dxl-page .dxbl-grid .dxbl-grid-table > tbody > tr > td.dxbl-grid-command-cell:has(.dxl-chev) { padding-left: 4px; padding-right: 4px; }
.app-b .dxl-chev {
    padding: 2px 4px;
    border: none;
    border-radius: 6px;
    background: none;
    font: inherit;
    font-size: 11px;
    color: #8A9099;
    cursor: pointer;
}
.app-b .dxl-chev:hover { background: #F1F2F4; color: #1F2328; }
.app-b .dxl-stack { display: flex; flex-direction: column; gap: 2px; }
.app-b .dxl-clip { min-width: 0; }
.app-b .dxl-id { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; font-weight: 700; color: #9A6F00; }
.app-b .dxl-id:hover { color: #6E4F00; }
.app-b .dxl-client { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; color: #1F2328; }
.app-b .dxl-sub { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; color: #8A9099; }
.app-b .dxl-chip { padding: 3px 8px; border-radius: 6px; background: #F1F2F4; color: #4B5159; font-size: 12px; font-weight: 700; }
.app-b .dxl-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

/* row menu: a quiet round trigger that turns gold while its menu is open */
.app-b .dxl-page .dxl-more {
    --dxbl-btn-padding-x: 0;
    --dxbl-btn-padding-y: 0;
    --dxbl-btn-color: #8A9099;
    --dxbl-btn-hover-bg: #F1F2F4;
    --dxbl-btn-hover-color: #1F2328;
    width: 30px;
    height: 30px;
    justify-content: center;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    transition: background-color .15s, color .15s;
}
.app-b .dxl-page .dxl-more.open { --dxbl-btn-bg: #FFFBF0; --dxbl-btn-color: #9A6F00; background: #FFFBF0; color: #9A6F00; }

/* the row menu's window and items: DevExpress draws them at the end of <body> */
.dxbl-dropdown.dxl-more-menu {
    --dxbl-dropdown-bg: #fff;
    --dxbl-dropdown-border-color: #E6E8EB;
    --dxbl-dropdown-border-radius: 12px;
    --dxbl-dropdown-box-shadow: 0 12px 32px rgba(16, 24, 40, .12), 0 2px 6px rgba(16, 24, 40, .06);
    --dxbl-dropdown-body-padding-x: 0;
    --dxbl-dropdown-body-padding-y: 0;
    overflow: hidden;
    border-radius: 12px;
}
.dxl-menu { display: flex; flex-direction: column; gap: 2px; min-width: 220px; padding: 6px; }
.dxl-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: none;
    border-radius: 8px;
    background: none;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    text-align: left;
    color: #1F2328;
    cursor: pointer;
    transition: background-color .12s, color .12s;
}
.dxl-menu-item svg {
    flex: none;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #8A9099;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.dxl-menu-item:hover { background: #FFFBF0; color: #6E4F00; }
.dxl-menu-item:hover svg { stroke: #9A6F00; }
.dxl-menu-item.danger { color: #B42318; }
.dxl-menu-item.danger svg { stroke: #D92D20; }
.dxl-menu-item.danger:hover { background: #FEF3F2; color: #912018; }
.dxl-menu-sep { height: 1px; margin: 4px 6px; background: #F0F1F3; }

/* detail row: the document's lines */
.app-b .dxl-detail { padding: 4px 8px 12px; }
.app-b .dxl-page .dxl-lines {
    --dxbl-grid-border-width: 1px;
    --dxbl-grid-border-color: #E6E8EB;
    --dxbl-grid-border-radius: 10px;
    --dxbl-grid-font-size: 13px;
    --dxbl-grid-text-cell-padding-y: 10px;
    --dxbl-grid-text-cell-padding-x: 16px;
}
.app-b .dxl-sku { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; font-weight: 700; }
.app-b .dxl-uom { padding: 3px 8px; border-radius: 6px; background: #F1F2F4; color: #4B5159; font-size: 11px; font-weight: 700; }

@media (max-width: 1100px) {
    .app-b .dxl-kpis { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .app-b .dxl-shown { margin-left: 0; }
}

/* ---------- Settings pages (category, package types) ---------- */
.app-b .cs-crumb { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.app-b .cs-tag { margin-left: 6px; padding: 1px 6px; font-size: 11px; }
.app-b .cs-code-input { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-weight: 700; text-transform: uppercase; }
.app-b .cs-pair { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; }

/* ---------- Settings tables (package types, category) ----------
   Claude Design proposals 2a and 3a: a table on the left, the one being written
   always open on the right; package types adds 2b's share of products on top.
   Colours, sizes and radii are the proposals'; JetBrains Mono for codes and counts. */


.app-b .pt-mono { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; }
.app-b .pt-gold { color: #8a6508; }

/* ---------- products by package type ---------- */

.app-b .pt-share {
    display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; padding: 14px 16px;
    background: #fff; border: 1px solid #e6e6e2; border-radius: 12px;
}
.app-b .pt-share-head { display: flex; justify-content: space-between; font-size: 12px; color: #7a7a7a; }
.app-b .pt-share-title { font-weight: 700; letter-spacing: .08em; }
.app-b .pt-share-bar { display: flex; gap: 2px; height: 12px; overflow: hidden; border-radius: 6px; }
.app-b .pt-share-bar > span { height: 100%; }
.app-b .pt-share-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; }
.app-b .pt-share-legend > span { display: flex; align-items: center; gap: 6px; }
.app-b .pt-share-legend i { width: 9px; height: 9px; border-radius: 2px; }

/* ---------- table + panel ---------- */

.app-b .pt-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .app-b .pt-body { grid-template-columns: minmax(0, 1fr); } }

.app-b .pt-list {
    display: flex; flex-direction: column; min-width: 0; overflow: hidden;
    background: #fff; border: 1px solid #e6e6e2; border-radius: 12px;
}
.app-b .pt-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #ececea; }
.app-b .pt-tools .pt-search {
    flex: 1 1 220px; min-width: 0; padding: 9px 12px; border: 1px solid #e6e6e2; border-radius: 8px;
    background: #fafaf8; font: inherit; font-size: 13px;
}
.app-b .pt-chip {
    display: flex; align-items: center; gap: 8px; padding: 7px 12px !important; border-radius: 999px !important;
    border: 1px solid #e6e6e2 !important; background: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
}
.app-b .pt-chip.on { background: #fffaeb; border-color: #f0d78f !important; }
.app-b .pt-chip .pt-mono { font-size: 12px; color: #8a6508; }

.app-b .pt-row {
    display: grid; gap: 12px;
    align-items: center; padding: 0 16px; height: 42px; font-size: 13px; border-bottom: 1px solid #f1f1ee;
}
.app-b .pt-row.pt-head {
    height: auto; padding: 10px 16px; background: #fafaf8; border-bottom-color: #ececea;
    font-size: 11px; font-weight: 700; letter-spacing: .08em; color: #7a7a7a;
}
.app-b .pt-row.link { cursor: pointer; }
.app-b .pt-row.link:hover { background: #fffaeb; }
.app-b .pt-row.on { background: #fff6dc; box-shadow: inset 3px 0 0 #d9a21b; }
/* Narrow, the table scrolls inside its card rather than pushing the page sideways. */
.app-b .pt-scroll { overflow-x: auto; }
.app-b .pt-scroll > .pt-row, .app-b .pt-rows { min-width: 680px; }

/* Each table's columns, in proportion to what they hold. */
.app-b .pt-units .pt-row { grid-template-columns: minmax(70px, 1fr) minmax(150px, 2.5fr) minmax(80px, 1fr) minmax(160px, 2.5fr) minmax(80px, 1fr); }
.app-b .pt-cats .pt-row { grid-template-columns: minmax(180px, 3fr) minmax(80px, 1fr) minmax(90px, 1fr) minmax(160px, 2.5fr) minmax(80px, 1fr); }
.app-b .pt-code {
    padding: 3px 7px; border: 1px solid #e6e6e2; border-radius: 6px; background: #fafaf8;
    font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: 12px; font-weight: 700;
}
.app-b .pt-name { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; white-space: nowrap; }
.app-b .pt-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.app-b .pt-name .cs-tag { flex: none; margin-left: 0; }
.app-b .pt-name.off { opacity: .5; }
.app-b .pt-frac { color: #7a5a00; font-weight: 700; }
.app-b .pt-use { display: flex; align-items: center; gap: 10px; }
.app-b .pt-use-track { flex: 1; height: 6px; overflow: hidden; border-radius: 3px; background: #f1f1ee; }
.app-b .pt-use-track > span { display: block; height: 100%; border-radius: 3px; background: #d9a21b; }
.app-b .pt-use .pt-mono { width: 44px; text-align: right; font-size: 12px; }
.app-b .pt-empty { padding: 16px; font-size: 13px; }
.app-b .pt-foot { display: flex; justify-content: space-between; padding: 10px 16px; border-top: 1px solid #ececea; font-size: 12px; color: #7a7a7a; }

/* ---------- the panel ---------- */

.app-b .pt-panel { display: flex; flex-direction: column; background: #fff; border: 1px solid #e6e6e2; border-radius: 12px; }
.app-b .pt-panel-head { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border-bottom: 1px solid #ececea; }
.app-b .pt-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: #8a6508; }
.app-b .pt-panel-title { font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
.app-b .pt-panel-body { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; font-size: 13px; }
.app-b .pt-panel-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid #ececea; }

.app-b .pt-switch-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 12px; border: 1px solid #ececea; border-radius: 10px;
}
.app-b .pt-switch-label { font-weight: 600; }
.app-b .pt-switch-hint { font-size: 12px; color: #7a7a7a; }
.app-b .pt-switch {
    position: relative; flex-shrink: 0; width: 38px; height: 22px; padding: 0 !important;
    border: none !important; border-radius: 999px !important; background: #d8d8d3; cursor: pointer;
}
.app-b .pt-switch.on { background: #d9a21b; }
.app-b .pt-switch i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.app-b .pt-switch.on i { left: 19px; }

.app-b .pt-preview { display: flex; flex-direction: column; gap: 6px; }
.app-b .pt-preview-title { font-weight: 600; }
.app-b .pt-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.app-b .pt-preview-cell { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid #ececea; border-radius: 10px; }
.app-b .pt-preview-k { font-size: 11px; font-weight: 600; letter-spacing: .06em; color: #7a7a7a; }
.app-b .pt-preview-v { font-size: 15px; font-weight: 700; }
.app-b .pt-label {
    display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1.5px dashed #1b1b1b; border-radius: 6px;
    font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: 10px; letter-spacing: .08em;
}
.app-b .pt-label b { font-size: 20px; line-height: 1.1; letter-spacing: 0; overflow-wrap: anywhere; }

/* Category: the folding tree, sub-levels lighter than their top level. */
.app-b .pt-actions { display: flex; gap: 8px; }
.app-b .pt-fold {
    display: grid; place-items: center; flex: none; width: 20px; height: 20px; padding: 0 !important;
    border: none !important; border-radius: 5px !important; background: none; font-size: 11px; color: #7a7a7a; cursor: pointer;
}
.app-b button.pt-fold:hover { background: #f1f1ee; }
.app-b .pt-cats .pt-name-text { font-weight: 700; }
.app-b .pt-cats .pt-name-text.pt-sub { font-weight: 500; }
.app-b .pt-use-track > span.pt-sub { background: #e8c25a; }
.app-b .pt-path { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; border: 1px solid #ececea; border-radius: 10px; font-size: 13px; }
.app-b .pt-path-sep { color: #b0b0b0; }
.app-b .pt-path-here { font-weight: 700; }