/* ============================================================================ CARGO PLANNER · v3 (rework) Transport-planning pane on the dashboard: stat tiles, rolling business-day carousel, Calibri worklist with grouped header + severity rail, separator rows, dispatch modal (release-note trays) and the week calendar. THEMING — everything runs on a local palette layer (--cp-*) derived from the app tokens in css/themes.css. Dark is the default (:root), the Harbor marine light theme overrides under :root[data-theme="light"] .cp-root. SPECIFICITY NOTE — themes.css carries broad light-theme rules with !important on bare ELEMENT selectors ([data-theme="light"] button/span/b/i…). Every planner selector is therefore anchored on .cp-root (or one of the three body-level portals), which outranks them (0,2,0 > 0,1,1); paint properties on buttons and coloured spans additionally carry !important so the important comparison is won on specificity. That is why they are here — not decoration. ============================================================================ */ /* The palette layer. It is declared on EVERY planner host, not just the pane: the two modals, the tooltip, the separator popover and the row context menu are all rendered outside .cp-root (modal overlays live at the end of ), so without this list their var() lookups would resolve to nothing. */ .cp-root, .modal-panel.cp-modal, .cp-tip, .cp-seppop, .cp-ctx-menu { /* surfaces */ --cp-bg: var(--bg-primary); --cp-panel: var(--bg-secondary); --cp-inset: color-mix(in srgb, var(--bg-secondary) 78%, var(--bg-primary)); --cp-tert: var(--bg-tertiary); --cp-hover: var(--bg-hover); --cp-field: var(--input-bg); --cp-line: var(--border-color); --cp-line-soft: color-mix(in srgb, var(--border-color) 58%, var(--bg-secondary)); /* type */ --cp-txt-1: var(--text-primary); --cp-txt-2: var(--text-secondary); --cp-txt-3: var(--text-muted); /* accents */ --cp-acc: var(--accent-orange); /* selection / active affordance */ --cp-link: #38bdf8; /* refs + counts (light overrides) */ --cp-blue: var(--accent-blue); --cp-blue-strong: #2563eb; --cp-ok: var(--accent-green); --cp-warn: var(--accent-yellow); --cp-bad: var(--accent-red); /* rows */ --cp-row-alt: var(--bg-row-alt); --cp-row-hover: var(--bg-row-hover); --cp-row-sel: #1d3a52; /* table head */ --cp-th-bg: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); --cp-th-txt: #ffffff; --cp-th-line: var(--border-color); --cp-th-grp: linear-gradient(135deg, #141428 0%, #111a31 100%); /* signal dots — deliberately fixed hues in both themes: red / amber / green encode regulatory state, not brand */ --cp-dot-ok: #16a34a; --cp-dot-ok-l: #15803d; --cp-dot-warn: #d97706; --cp-dot-warn-l: #b45309; --cp-dot-bad: #dc2626; --cp-dot-bad-l: #b91c1c; --cp-dot-off: #475569; --cp-dot-off-l: #334155; --cp-today: #38bdf8; /* today's marker on the day carousel */ --cp-cal-meta: var(--text-muted); --cp-cal-strong: var(--text-secondary); --cp-tip-bg: linear-gradient(180deg, #1e293b, #0f172a); --cp-tip-line: var(--border-color); --cp-shadow: var(--shadow-lg); --cp-shadow-sm: var(--shadow-sm); --cp-focus: #38bdf8; --cp-gut: 28px; /* width of the separator rail beside the worklist */ /* the worklist (and only the worklist) is set in Calibri — a local Windows face, so nothing is fetched; the stack falls back to the humanist sans that ships with every other platform */ --cp-tblfont: Calibri, 'Segoe UI', Candara, 'Trebuchet MS', sans-serif; } .cp-root { display: block; padding: 0.5rem 2px 2.5rem; color: var(--cp-txt-1); font-size: 13px; line-height: 1.45; font-variant-numeric: tabular-nums; } :root[data-theme="light"] .cp-root, :root[data-theme="light"] .modal-panel.cp-modal, :root[data-theme="light"] .cp-tip, :root[data-theme="light"] .cp-seppop, :root[data-theme="light"] .cp-ctx-menu { --cp-inset: #f2f7fb; --cp-line-soft: #e6eef4; --cp-acc: var(--accent-blue); /* marine #0a5989 */ --cp-link: var(--accent-blue); --cp-blue-strong: var(--accent-blue); --cp-row-sel: #d4ecf5; --cp-th-bg: var(--accent-blue); --cp-th-line: #084a73; --cp-th-grp: #084a73; --cp-dot-off: #cbd5e1; --cp-dot-off-l: #94a3b8; --cp-today: #2c8c62; /* light theme: today is GREEN, selection stays marine */ --cp-cal-meta: var(--text-secondary); --cp-cal-strong: var(--text-primary); --cp-tip-bg: #ffffff; --cp-focus: var(--accent-blue); } .cp-root *, .cp-root *::before, .cp-root *::after { box-sizing: border-box; } .cp-root [hidden] { display: none !important; } .cp-root button { font-family: inherit; cursor: pointer; } .cp-root input, .cp-root select, .cp-root textarea { font-family: inherit; } .cp-root input:not([type=checkbox]), .cp-root select, .cp-root textarea { background: var(--cp-field); color: var(--cp-txt-1); border: 1px solid var(--cp-line); border-radius: 6px; font-size: 0.72rem; padding: 6px 8px; transition: border-color 0.14s; } .cp-root input:not([type=checkbox]):hover, .cp-root select:hover, .cp-root textarea:hover { border-color: var(--cp-txt-3); } .cp-root input[type=checkbox] { accent-color: var(--cp-blue-strong); width: 14px; height: 14px; cursor: pointer; margin: 0; } .cp-root :focus-visible { outline: 2px solid var(--cp-focus); outline-offset: 2px; border-radius: 4px; } .cp-root .cp-grow { flex: 1 1 auto; } @media (prefers-reduced-motion: reduce) { .cp-root *, .cp-root *::before, .cp-root *::after, .cp-tip, .cp-seppop, .cp-ctx-menu { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* ========================================================================== VIEW BAR + SUB TABS ========================================================================== */ .cp-root .cp-viewbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; } .cp-root .cp-ptitle { font-size: 1rem; font-weight: 800; letter-spacing: 0.01em; display: flex; align-items: center; gap: 8px; color: var(--cp-txt-1) !important; margin: 0; } .cp-root .cp-ptitle .cp-sub { font-size: 0.6rem; font-weight: 600; color: var(--cp-txt-3) !important; letter-spacing: 0.1em; text-transform: uppercase; } .cp-root .cp-vtabs { display: flex; gap: 3px; padding: 3px; background: var(--cp-panel); border: 1px solid var(--cp-line); border-radius: 9px; } .cp-root .cp-vtab { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border: 1px solid transparent !important; background: transparent !important; color: var(--cp-txt-3) !important; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; border-radius: 7px; transition: background 0.14s, color 0.14s; } .cp-root .cp-vtab:hover { color: var(--cp-txt-1) !important; } .cp-root .cp-vtab.active { background: var(--cp-acc) !important; color: #fff !important; border-color: var(--cp-acc) !important; } .cp-root .cp-vtab .cp-cnt { font-size: 0.6rem; font-weight: 800; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--cp-txt-3) 22%, transparent); color: inherit !important; } .cp-root .cp-vtab.active .cp-cnt { background: rgba(255, 255, 255, 0.24); } .cp-root .cp-live { display: inline-flex; align-items: center; gap: 7px; font-size: 0.62rem; color: var(--cp-txt-3) !important; white-space: nowrap; } .cp-root .cp-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cp-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-ok) 22%, transparent); } /* ========================================================================== BUTTONS / CHIPS (planner-local — the app chrome keeps its own .btn) ========================================================================== */ .cp-root .cp-btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; border: 1px solid var(--cp-line) !important; background: var(--cp-tert) !important; color: var(--cp-txt-1) !important; border-radius: 7px; padding: 7px 13px; font-size: 0.71rem; font-weight: 700; transition: background 0.14s, border-color 0.14s, color 0.14s, opacity 0.14s; } .cp-root .cp-btn:hover:not(:disabled) { background: var(--cp-hover) !important; border-color: var(--cp-txt-3) !important; } .cp-root .cp-btn:disabled { opacity: 0.4; cursor: not-allowed; } .cp-root .cp-btn.primary { background: var(--cp-blue-strong) !important; border-color: var(--cp-blue-strong) !important; color: #fff !important; } .cp-root .cp-btn.primary:hover:not(:disabled) { filter: brightness(1.1); } .cp-root .cp-btn.ghost { background: transparent !important; } .cp-root .cp-btn.ghost:hover:not(:disabled) { background: var(--cp-hover) !important; } .cp-root .cp-btn.sm { padding: 5px 9px; font-size: 0.64rem; } .cp-root .cp-selchip { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.03em; padding: 4px 11px; border-radius: 999px; color: var(--cp-link) !important; background: color-mix(in srgb, var(--cp-link) 14%, transparent); border: 1px solid color-mix(in srgb, var(--cp-link) 45%, transparent); } .cp-root .cp-filternote { font-size: 0.63rem; color: var(--cp-txt-3) !important; } .cp-root .cp-filternote b { color: var(--cp-txt-1) !important; } .cp-root .cp-cmd-div { width: 1px; align-self: stretch; background: var(--cp-line); margin: 0 2px; } /* ========================================================================== STAT TILES ========================================================================== */ .cp-root .cp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; } .cp-root .cp-tile { position: relative; overflow: hidden; text-align: left; display: flex; flex-direction: column; gap: 1px; padding: 11px 13px 11px 16px; border: 1px solid var(--cp-line-soft) !important; border-radius: 11px; background: var(--cp-panel) !important; color: var(--cp-txt-1) !important; transition: border-color 0.14s, background 0.14s, transform 0.12s; } .cp-root .cp-tile::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cp-tone, var(--cp-line)); } .cp-root .cp-tile:hover { border-color: var(--cp-tone, var(--cp-txt-3)) !important; transform: translateY(-1px); } .cp-root .cp-tile.on { border-color: var(--cp-tone) !important; background: color-mix(in srgb, var(--cp-tone) 11%, var(--cp-panel)) !important; } .cp-root .cp-tile .k { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; color: var(--cp-txt-3) !important; } .cp-root .cp-tile .v { font-size: 1.55rem; font-weight: 800; line-height: 1.15; color: var(--cp-txt-1) !important; } .cp-root .cp-tile .s { font-size: 0.6rem; color: var(--cp-txt-3) !important; } .cp-root .cp-tile.on .k { color: var(--cp-tone) !important; } .cp-root .cp-tile .pin { position: absolute; top: 9px; right: 10px; font-size: 0.52rem; font-weight: 800; letter-spacing: 0.08em; color: var(--cp-tone) !important; opacity: 0; } .cp-root .cp-tile.on .pin { opacity: 1; } /* ========================================================================== COMMAND BAR ========================================================================== */ .cp-root .cp-cmdbar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 12px; padding: 9px 11px; background: var(--cp-panel); border: 1px solid var(--cp-line); border-radius: 11px; } .cp-root .cp-srch { display: flex; align-items: center; gap: 7px; background: var(--cp-inset); border: 1px solid var(--cp-line); border-radius: 8px; padding: 0 9px; min-width: 236px; flex: 0 1 300px; color: var(--cp-txt-3) !important; } .cp-root .cp-srch span { color: var(--cp-txt-3) !important; font-size: 0.7rem; } .cp-root .cp-srch input { border: none !important; background: transparent !important; padding: 7px 0 !important; flex: 1; min-width: 0; } .cp-root .cp-srch input:focus { outline: none; } .cp-root .cp-srch:focus-within { border-color: var(--cp-focus); } /* ========================================================================== DAY CAROUSEL ========================================================================== */ .cp-root .cp-daystrip { display: flex; align-items: stretch; gap: 10px; padding: 10px; margin-top: 12px; background: var(--cp-panel); border: 1px solid var(--cp-line); border-radius: 11px; } .cp-root .cp-dfield { display: flex; flex-direction: column; gap: 4px; justify-content: center; min-width: 168px; flex: 0 0 auto; } .cp-root .cp-dfield label { font-size: 0.56rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; color: var(--cp-txt-3) !important; } .cp-root .cp-dfield select { font-weight: 700; padding: 7px 8px; } .cp-root .cp-dnav { align-self: center; width: 30px; min-height: 62px; border-radius: 8px; border: 1px solid var(--cp-line) !important; background: var(--cp-tert) !important; color: var(--cp-txt-2) !important; font-size: 1rem; font-weight: 800; flex: 0 0 auto; } .cp-root .cp-dnav:hover { background: var(--cp-hover) !important; color: var(--cp-txt-1) !important; } /* the top padding leaves room for today's on-border TODAY legend, which rides half a line above the card edge — the strip is a scroller and would clip it */ .cp-root .cp-daycards { display: flex; gap: 8px; flex: 1 1 auto; min-width: 0; overflow-x: auto; padding: 11px 1px 1px; } .cp-root .cp-daycard { flex: 1 1 0; min-width: 104px; text-align: left; position: relative; border: 1px solid var(--cp-line) !important; border-radius: 10px; --cp-card-bg: var(--cp-inset); background: var(--cp-card-bg) !important; padding: 8px 10px 9px; color: var(--cp-txt-2) !important; display: flex; flex-direction: column; gap: 2px; transition: border-color 0.14s, background 0.14s, box-shadow 0.14s; } .cp-root .cp-daycard:hover { border-color: var(--cp-txt-3) !important; } .cp-root .cp-daycard .dtop { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .cp-root .cp-daycard .dow { font-size: 1.02rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cp-txt-3) !important; line-height: 1.1; } .cp-root .cp-daycard .dm { font-size: 1.02rem; font-weight: 800; color: var(--cp-txt-1) !important; line-height: 1.1; } .cp-root .cp-daycard .n { font-size: 0.58rem; color: var(--cp-txt-3) !important; } .cp-root .cp-daycard .n b { color: var(--cp-link) !important; font-weight: 800; } .cp-root .cp-daycard .n .arr { color: var(--cp-ok) !important; font-weight: 800; } .cp-root .cp-daycard .n .opn { color: var(--cp-bad) !important; font-weight: 800; } .cp-root .cp-daycard .n .zero { color: var(--cp-txt-3) !important; } .cp-root .cp-daycard.past { --cp-card-bg: color-mix(in srgb, var(--cp-inset) 82%, var(--cp-bg)); } .cp-root .cp-daycard.past .dm { color: var(--cp-txt-2) !important; } /* today = a highlighted card with its label sitting ON the top border (the fieldset-legend trick: the label paints the card's own background behind itself, so it interrupts the border line instead of floating over it). The 2px border is paid for out of the padding, so the card keeps its size. */ .cp-root .cp-daycard.today { --cp-today-c: var(--cp-today); --cp-card-bg: color-mix(in srgb, var(--cp-today) 9%, var(--cp-inset)); border: 2px solid var(--cp-today-c) !important; padding: 7px 9px 8px; } .cp-root .cp-daycard.today::before { content: 'TODAY'; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); padding: 1px 7px; line-height: 1; border-radius: 5px; pointer-events: none; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.11em; background: var(--cp-card-bg); color: var(--cp-today-c); } .cp-root .cp-daycard.today:hover { border-color: var(--cp-today-c) !important; } .cp-root .cp-daycard.today .dm, .cp-root .cp-daycard.today .dow { color: var(--cp-today-c) !important; } .cp-root .cp-daycard.on { border-color: var(--cp-acc) !important; --cp-card-bg: color-mix(in srgb, var(--cp-acc) 12%, var(--cp-inset)); box-shadow: inset 0 0 0 1px var(--cp-acc); } .cp-root .cp-daycard.on .dow, .cp-root .cp-daycard.on .dm { color: var(--cp-acc) !important; } .cp-root .cp-daycard.on .n b { color: var(--cp-acc) !important; } /* today AND picked: selection owns the FILL and the inner ring, today keeps the border and turns its legend into a solid pill so the marker still carries */ .cp-root .cp-daycard.today.on { border-color: var(--cp-today-c) !important; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--cp-acc) 55%, transparent); } .cp-root .cp-daycard.today.on::before { background: var(--cp-today-c); color: #fff; } .cp-root .cp-sevbar { display: flex; height: 4px; gap: 2px; margin-top: 3px; } .cp-root .cp-sevbar i { display: block; height: 100%; border-radius: 2px; } .cp-root .cp-sevbar i.bad { background: var(--cp-dot-bad); } .cp-root .cp-sevbar i.warn { background: var(--cp-dot-warn); } .cp-root .cp-sevbar i.ok { background: var(--cp-dot-ok); } .cp-root .cp-sevbar.empty { background: var(--cp-line-soft); border-radius: 2px; } .cp-root .cp-daycard.add { flex: 0 0 54px; min-width: 54px; align-items: center; justify-content: center; gap: 1px; border-style: dashed !important; background: transparent !important; color: var(--cp-txt-3) !important; margin: 11px 0 1px; } .cp-root .cp-daycard.add:hover { color: var(--cp-txt-1) !important; border-color: var(--cp-txt-3) !important; } .cp-root .cp-daycard.add .wsym { font-size: 1rem; font-weight: 800; line-height: 1.05; color: inherit !important; } .cp-root .cp-daycard.add .wlbl { font-size: 0.5rem; font-weight: 800; letter-spacing: 0.09em; color: inherit !important; } .cp-root .cp-daycard.add.on { border-style: solid !important; border-color: var(--cp-acc) !important; color: var(--cp-acc) !important; background: color-mix(in srgb, var(--cp-acc) 12%, transparent) !important; } .cp-root .cp-todaybtn { align-self: center; flex: 0 0 auto; white-space: nowrap; padding: 8px 12px; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.05em; border-radius: 8px; } .cp-root .cp-todaybtn.centred { color: var(--cp-txt-3) !important; border-style: dashed !important; } .cp-root .cp-todaybtn:not(.centred) { border-color: var(--cp-acc) !important; color: var(--cp-acc) !important; background: color-mix(in srgb, var(--cp-acc) 12%, transparent) !important; } /* ========================================================================== WORKLIST TABLE outer shell: [separator gutter | scroller] — the gutter is NOT part of the horizontal scroller, so the "+" handles can never scroll away sideways ========================================================================== */ .cp-root .cp-tblshell { display: flex; align-items: stretch; min-width: 0; margin-top: 12px; } .cp-root .cp-tblshell > .cp-tblwrap { flex: 1 1 auto; min-width: 0; } .cp-root .cp-tblwrap { background: var(--cp-panel); border: 1px solid var(--cp-line); border-radius: 11px; overflow: auto; max-height: min(64vh, 660px); padding-bottom: 9px; } /* Calibri runs narrower and shorter than the app's mono face, so the size goes up a step to hold the same density; tabular figures align every date column */ .cp-root table.cp-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 1320px; font-family: var(--cp-tblfont); font-weight: 700; font-size: 0.84rem; line-height: 1.3; letter-spacing: 0.004em; font-variant-numeric: tabular-nums; background: transparent; } .cp-root .cp-table tbody td, .cp-root .cp-table tbody th { font-weight: 700; } .cp-root .cp-table input, .cp-root .cp-table select { font-family: var(--cp-tblfont); font-weight: 700; letter-spacing: 0; } /* !important throughout the sheet: themes.css paints EVERY light-theme `table th` / `table td` with !important (background, colour, border), which would otherwise wipe the header band, the zebra rows and the selection fill. */ .cp-root .cp-table thead th { position: sticky; z-index: 3; background: var(--cp-th-bg) !important; color: var(--cp-th-txt) !important; border-color: var(--cp-th-line) !important; text-align: left; font-weight: 800; white-space: nowrap; } .cp-root .cp-table thead tr.cp-grp th { top: 0; height: 24px; line-height: 16px; padding: 4px 10px; background: var(--cp-th-grp) !important; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; border-right: 1px solid rgba(255, 255, 255, 0.1); } .cp-root .cp-table thead tr.cp-grp th:last-child { border-right: none; } .cp-root .cp-table thead tr.cp-cols th { top: 24px; height: 30px; padding: 0 10px; font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; border-bottom: 2px solid var(--cp-th-line); } .cp-root .cp-table thead tr.cp-cols th.c { text-align: center; } .cp-root .cp-table th.grpstart, .cp-root .cp-table td.grpstart { border-left: 1px solid var(--cp-line); } .cp-root .cp-table thead tr.cp-cols th.grpstart { border-left: 1px solid rgba(255, 255, 255, 0.16); } .cp-root .cp-table tbody tr { --cp-row-bg: var(--cp-panel); background: var(--cp-row-bg); } .cp-root .cp-table tbody tr.alt { --cp-row-bg: var(--cp-row-alt); } .cp-root .cp-table tbody tr:hover { --cp-row-bg: var(--cp-row-hover); } .cp-root .cp-table tbody tr.sel { --cp-row-bg: var(--cp-row-sel); } .cp-root .cp-table tbody tr.saved { --cp-row-bg: color-mix(in srgb, var(--cp-ok) 22%, var(--cp-panel)); } .cp-root .cp-table tbody tr.flash { animation: cpFlash 1.1s ease; } @keyframes cpFlash { 0%, 100% { background: var(--cp-row-bg); } 30%, 70% { background: color-mix(in srgb, var(--cp-acc) 26%, var(--cp-panel)); } } /* the CELL is transparent so the ROW's --cp-row-bg (zebra / hover / selection) is what you see; only the two sticky columns paint it themselves */ .cp-root .cp-table tbody td { padding: 5px 10px; white-space: nowrap; vertical-align: middle; background: transparent !important; color: var(--cp-txt-1) !important; border-bottom: 1px solid var(--cp-line-soft) !important; } .cp-root .cp-table .stick1, .cp-root .cp-table .stick2 { position: sticky; z-index: 2; background: var(--cp-row-bg) !important; } .cp-root .cp-table thead .stick1, .cp-root .cp-table thead .stick2 { z-index: 5; background: var(--cp-th-bg) !important; } .cp-root .cp-table .stick1 { left: 0; width: 38px; } .cp-root .cp-table .stick2 { left: 38px; border-right: 1px solid var(--cp-line); } .cp-root .cp-table td.ck { box-shadow: inset 3px 0 0 var(--cp-rail, transparent); } .cp-root .cp-table .fileref { font-weight: 800; color: var(--cp-link) !important; cursor: pointer; user-select: none; -webkit-user-select: none; } .cp-root .cp-table .fileref:hover { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; } .cp-root .cp-table .muted { color: var(--cp-txt-3) !important; font-size: 0.74rem; font-weight: 700; } .cp-root .cp-table .cont b { display: block; font-weight: 800; color: var(--cp-txt-1) !important; } .cp-root .cp-table .cont .muted { display: block; margin-top: 1px; } .cp-root .cp-table .cust { max-width: 190px; overflow: hidden; text-overflow: ellipsis; } .cp-root .cp-table .prod { max-width: 170px; overflow: hidden; text-overflow: ellipsis; } .cp-root .cp-table .ves { color: var(--cp-txt-2) !important; font-size: 0.8rem; max-width: 170px; overflow: hidden; text-overflow: ellipsis; } /* customer / product / vessel always read in caps — presentation only */ .cp-root .cp-uc { text-transform: uppercase; } .cp-root .cp-term-chip { display: inline-block; font-size: 0.63rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cp-link) !important; background: color-mix(in srgb, var(--cp-link) 13%, transparent); border: 1px solid color-mix(in srgb, var(--cp-link) 42%, transparent); border-radius: 4px; padding: 0 5px; margin-bottom: 2px; } .cp-root .cp-term-date { display: block; font-size: 0.79rem; color: var(--cp-txt-1) !important; } .cp-root .cp-etaw { display: flex; gap: 4px; align-items: center; } .cp-root .cp-etaw input[type=date] { width: 116px; padding: 3px 5px; font-size: 0.76rem; } .cp-root .cp-etaw input[type=time] { width: 72px; padding: 3px 5px; font-size: 0.76rem; } .cp-root select.cp-carrier { width: 84px; padding: 3px 5px; font-size: 0.76rem; font-weight: 700; } .cp-root select.cp-carrier.saving { opacity: 0.5; } /* ---- NOTE dot — every note-ish store on the register line in one mark ---- COLOUR says who the line is written for: green = a planner note that rides out on the carrier email (cargo_plan_note), marine = internal only (notes / cell_comments). The NUMERAL says how many notes and comments the line carries. Hollow grey = nothing written. */ .cp-root .cp-note-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; cursor: help; color: #fff !important; background: transparent; border: 1.5px solid var(--cp-dot-off-l); font-family: var(--cp-tblfont); font-size: 0.6rem; font-weight: 800; line-height: 1; letter-spacing: 0; transition: transform 0.12s ease, box-shadow 0.12s ease; } .cp-root .cp-note-dot:hover, .cp-root .cp-note-dot:focus-visible { transform: scale(1.18); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-txt-3) 26%, transparent); } .cp-root .cp-note-dot.plan { background: var(--cp-dot-ok); border-color: var(--cp-dot-ok-l); } .cp-root .cp-note-dot.intl { background: var(--cp-blue-strong); border-color: color-mix(in srgb, var(--cp-blue-strong) 74%, #000); } .cp-root .cp-note-dot.multi { width: 17px; height: 17px; font-size: 0.64rem; } .cp-root .cp-legend .cp-note-dot { cursor: default; } .cp-root .cp-table td.dotc { text-align: center; } .cp-root .cp-sdot { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: 900; color: #fff !important; cursor: help; border: 2px solid transparent; transition: transform 0.12s ease, box-shadow 0.12s ease; } .cp-root .cp-sdot:hover, .cp-root .cp-sdot:focus-visible { transform: scale(1.2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-txt-3) 26%, transparent); } .cp-root .cp-sdot.ok { background: var(--cp-dot-ok); border-color: var(--cp-dot-ok-l); } .cp-root .cp-sdot.ok::after { content: '\2713'; } .cp-root .cp-sdot.warn { background: var(--cp-dot-warn); border-color: var(--cp-dot-warn-l); } .cp-root .cp-sdot.warn::after { content: '\2022'; } .cp-root .cp-sdot.bad { background: var(--cp-dot-bad); border-color: var(--cp-dot-bad-l); } .cp-root .cp-sdot.bad::after { content: '!'; } .cp-root .cp-sdot.off { background: transparent; border-color: var(--cp-dot-off-l); } .cp-root .cp-sdot.off::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--cp-dot-off); } .cp-root .cp-sdot.sm { width: 14px; height: 14px; font-size: 0.52rem; } .cp-root .cp-table tr.emptyrow td { text-align: center; padding: 34px 10px; color: var(--cp-txt-3); white-space: normal; } .cp-root .cp-table tr.emptyrow .big { font-size: 0.8rem; color: var(--cp-txt-2) !important; display: block; margin-bottom: 8px; } .cp-root .cp-legend { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; font-size: 0.63rem; color: var(--cp-txt-3) !important; padding: 0 3px; margin: 10px 0 0 var(--cp-gut); } .cp-root .cp-legend .li { display: inline-flex; align-items: center; gap: 6px; color: var(--cp-txt-3) !important; } .cp-root .cp-legend .rail-key { width: 3px; height: 13px; border-radius: 2px; display: inline-block; background: var(--cp-dot-bad); } /* ========================================================================== BODY-LEVEL PORTALS — tooltip, separator popover, row context menu. They live on , outside .cp-root, so they carry the palette themselves. ========================================================================== */ .cp-tip, .cp-seppop, .cp-ctx-menu { font-family: 'Inter', 'Space Grotesk', system-ui, sans-serif; } .cp-tip *, .cp-seppop *, .cp-ctx-menu * { box-sizing: border-box; } .cp-seppop[hidden], .cp-tip[hidden] { display: none !important; } /* ---------- tooltip (singleton portal: the worklist is an overflow box) ---------- */ div.cp-tip { position: fixed; z-index: 99999; background: var(--cp-tip-bg); color: var(--cp-txt-1); border: 1px solid var(--cp-tip-line); font-size: 0.66rem; padding: 9px 12px; border-radius: 9px; min-width: 196px; max-width: 290px; box-shadow: var(--cp-shadow); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.12s, transform 0.12s; pointer-events: none; line-height: 1.45; } div.cp-tip.show { opacity: 1; visibility: visible; transform: translateY(0); } div.cp-tip::before { content: ''; position: absolute; top: -6px; left: var(--cp-arrow-left, 50%); margin-left: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid var(--cp-tip-line); } div.cp-tip.flip { transform: translateY(-4px); } div.cp-tip.flip.show { transform: translateY(0); } div.cp-tip.flip::before { top: auto; bottom: -6px; border-bottom: none; border-top: 6px solid var(--cp-tip-line); } div.cp-tip.wide { min-width: 236px; max-width: 345px; padding: 10px 13px 11px; } .cp-tip .cp-tip-title { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 7px; padding-bottom: 6px; border-bottom: 1px solid var(--cp-tip-line); display: flex; align-items: center; gap: 7px; color: var(--cp-txt-1) !important; } .cp-tip .cp-tip-title .tdot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; } .cp-tip .cp-tip-title .tf { margin-left: auto; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.05em; text-transform: none; color: var(--cp-txt-3) !important; font-variant-numeric: tabular-nums; } .cp-tip .cp-tip-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 2.5px 0; } .cp-tip .cp-tip-row .k { flex: 0 0 auto; color: var(--cp-txt-3) !important; font-size: 0.6rem; letter-spacing: 0.03em; } .cp-tip .cp-tip-row .v { font-weight: 700; text-align: right; min-width: 0; color: var(--cp-txt-1) !important; } .cp-tip .cp-tip-note { margin-top: 8px; padding-top: 7px; border-top: 1px dashed var(--cp-tip-line); color: var(--cp-txt-3) !important; font-size: 0.62rem; line-height: 1.55; } /* a comment written on this very column, quoted inside its own signal */ .cp-tip .cp-tip-quote { margin-top: 9px; padding: 6px 9px 7px; border-left: 2px solid var(--cp-link); border-radius: 0 7px 7px 0; background: color-mix(in srgb, var(--cp-link) 10%, transparent); font-size: 0.65rem; line-height: 1.55; color: var(--cp-txt-1) !important; } .cp-tip .cp-tip-quote .cl { display: block; margin-bottom: 2px; font-size: 0.5rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cp-link) !important; } /* the note panel: up to three groups, carrier-facing first */ .cp-tip .cp-tip-g + .cp-tip-g { margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--cp-tip-line); } .cp-tip .cp-tip-g .gh { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; font-size: 0.55rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; color: var(--cp-txt-3) !important; } .cp-tip .cp-tip-g .gtag { flex: 0 0 auto; font-size: 0.5rem; font-weight: 800; letter-spacing: 0.07em; padding: 0 5px; border: 1px solid currentColor; border-radius: 4px; opacity: 0.9; } .cp-tip .cp-tip-g .gtag.out { color: var(--cp-ok) !important; } .cp-tip .cp-tip-g .gtag.in { color: var(--cp-link) !important; } .cp-tip .cp-tip-g .gt { font-size: 0.67rem; line-height: 1.6; color: var(--cp-txt-1) !important; } .cp-tip .cp-tip-cc { display: flex; flex-direction: column; gap: 5px; } .cp-tip .cp-tip-cc .cc { display: flex; align-items: baseline; gap: 7px; } .cp-tip .cp-tip-cc .cl { flex: 0 0 auto; font-size: 0.5rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cp-link) !important; background: color-mix(in srgb, var(--cp-link) 12%, transparent); border: 1px solid color-mix(in srgb, var(--cp-link) 42%, transparent); border-radius: 4px; padding: 1px 5px; } .cp-tip .cp-tip-cc .ct { flex: 1 1 auto; min-width: 0; font-size: 0.65rem; line-height: 1.55; color: var(--cp-txt-1) !important; } /* ========================================================================== SEPARATOR ROWS — gutter rail, the row itself, and its popover ========================================================================== */ .cp-root .cp-sepgut { position: relative; flex: 0 0 var(--cp-gut); width: var(--cp-gut); align-self: stretch; overflow: hidden; border-radius: 10px 0 0 10px; transition: background 0.14s; } .cp-root .cp-sepgut::before { content: ''; position: absolute; left: 50%; top: 6px; bottom: 6px; width: 1px; margin-left: -0.5px; background: var(--cp-line); opacity: 0; transition: opacity 0.14s; } .cp-root .cp-sepgut:hover { background: color-mix(in srgb, var(--cp-txt-3) 10%, transparent); } .cp-root .cp-sepgut:hover::before, .cp-root .cp-sepgut:focus-within::before { opacity: 0.85; } .cp-root .cp-sepgut-h { position: absolute; left: 50%; top: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; padding: 0; display: flex; align-items: center; justify-content: center; line-height: 1; font-size: 0.74rem; font-weight: 800; border: 1px solid var(--cp-txt-3) !important; background: var(--cp-panel) !important; color: var(--cp-txt-2) !important; border-radius: 50%; box-shadow: var(--cp-shadow-sm); opacity: 0; pointer-events: none; transition: opacity 0.12s, background 0.12s, color 0.12s, border-color 0.12s, transform 0.12s; } .cp-root .cp-sepgut-h.on, .cp-root .cp-sepgut-h.near, .cp-root .cp-sepgut-h.act, .cp-root .cp-sepgut-h:hover, .cp-root .cp-sepgut-h:focus-visible { opacity: 1; pointer-events: auto; } .cp-root .cp-sepgut-h:hover, .cp-root .cp-sepgut-h.act { background: var(--cp-acc) !important; border-color: var(--cp-acc) !important; color: #fff !important; transform: scale(1.1); } .cp-root .cp-sepgut-h:focus-visible { outline: 2px solid var(--cp-focus); outline-offset: 2px; border-radius: 50%; } /* the separator paints itself from two per-row custom properties set inline by the renderer — a plain inline `background` would lose to the sheet-wide `background: transparent !important` above */ .cp-root .cp-table tbody tr.seprow td { padding: 0; border-bottom: 1px solid var(--cp-line-soft) !important; background: var(--cp-sep-bg, #475569) !important; color: var(--cp-sep-fg, #ffffff) !important; } .cp-root .cp-sep-inner { display: flex; align-items: center; height: 23px; overflow: hidden; } /* the band is painted out of flow: a nowrap loop must never widen the table */ .cp-root .cp-sep-body { position: relative; align-self: stretch; flex: 1 1 auto; min-width: 0; width: 0; overflow: hidden; } .cp-root .cp-sep-line, .cp-root .cp-sep-loop { position: absolute; left: 0; right: 0; } .cp-root .cp-sep-line { top: calc(50% - 1px); display: block; height: 0; border-top: 2px solid currentColor; opacity: 0.7; } .cp-root .cp-sep-loop { top: 50%; transform: translateY(-50%); display: block; white-space: nowrap; overflow: hidden; font-family: var(--cp-tblfont); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; line-height: 1; color: inherit !important; } .cp-root .cp-sep-x { position: sticky; left: 5px; flex: 0 0 auto; margin-right: 6px; z-index: 3; width: 15px; height: 15px; padding: 0; line-height: 1; font-size: 0.6rem; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 1px solid currentColor !important; border-radius: 4px; background: transparent !important; color: inherit !important; opacity: 0; transition: opacity 0.12s, background 0.12s; } .cp-root .seprow:hover .cp-sep-x, .cp-root .cp-sep-x:focus-visible { opacity: 0.85; } .cp-root .cp-sep-x:hover { opacity: 1; background: rgba(0, 0, 0, 0.18) !important; } div.cp-seppop { position: fixed; z-index: 1500; width: 270px; background: var(--cp-panel); border: 1px solid var(--cp-line); border-radius: 11px; box-shadow: var(--cp-shadow); padding: 11px 12px 12px; color: var(--cp-txt-1); font-size: 13px; } .cp-seppop input, .cp-seppop select, .cp-seppop textarea { background: var(--cp-field); color: var(--cp-txt-1); border: 1px solid var(--cp-line); border-radius: 6px; font-size: 0.72rem; padding: 6px 8px; font-family: inherit; } /* single-row planner-note editor — same popover shell as the separator picker */ div.cp-notepop { width: 320px; } .cp-notepop textarea { width: 100%; resize: vertical; min-height: 74px; line-height: 1.5; } .cp-seppop button { font-family: inherit; cursor: pointer; } .cp-seppop :focus-visible { outline: 2px solid var(--cp-focus); outline-offset: 2px; } .cp-seppop .sp-h { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cp-txt-3) !important; margin-bottom: 8px; } .cp-root .cp-seg, .cp-seppop .cp-seg { display: flex; border: 1px solid var(--cp-line); border-radius: 7px; overflow: hidden; background: var(--cp-field); } .cp-root .cp-seg button, .cp-seppop .cp-seg button { flex: 1; background: transparent !important; border: none !important; color: var(--cp-txt-3) !important; font-size: 0.61rem; font-weight: 800; padding: 6px 4px; letter-spacing: 0.04em; } .cp-root .cp-seg button:hover, .cp-seppop .cp-seg button:hover { color: var(--cp-txt-1) !important; } .cp-root .cp-seg button.on, .cp-seppop .cp-seg button.on { background: var(--cp-blue-strong) !important; color: #fff !important; } .cp-seppop .cp-seg { margin-bottom: 9px; } .cp-seppop .cp-seg button { font-size: 0.58rem; padding: 5px 4px; } .cp-seppop .cp-sp-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 9px; } .cp-seppop .cp-sp-row > label { font-size: 0.56rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--cp-txt-3) !important; } .cp-seppop .cp-sp-row input[type=text] { width: 100%; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; } .cp-seppop .cp-sw { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; } .cp-seppop .cp-swb { width: 20px; height: 20px; border-radius: 5px; padding: 0; border: 1px solid var(--cp-line) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); transition: transform 0.1s, outline-color 0.1s; outline: 2px solid transparent; outline-offset: 1px; } .cp-seppop .cp-swb:hover { transform: translateY(-1px); } .cp-seppop .cp-swb.on { outline-color: var(--cp-focus); } .cp-seppop .cp-swc { width: 26px; height: 20px; padding: 0; border: 1px solid var(--cp-line); border-radius: 5px; background: var(--cp-field); cursor: pointer; } .cp-seppop .cp-sp-prev { position: relative; border: 1px solid var(--cp-line); border-radius: 6px; overflow: hidden; display: block; height: 23px; } .cp-seppop .cp-sp-prev .cp-sep-line { position: absolute; left: 0; right: 0; top: calc(50% - 1px); display: block; height: 0; border-top: 2px solid currentColor; opacity: 0.7; } .cp-seppop .cp-sp-prev .cp-sep-loop { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: block; white-space: nowrap; overflow: hidden; font-family: var(--cp-tblfont); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; line-height: 1; color: inherit !important; } .cp-seppop .cp-sp-f { display: flex; gap: 7px; justify-content: flex-end; margin-top: 11px; } .cp-seppop .cp-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 0.64rem; padding: 5px 11px; border-radius: 7px; font-weight: 700; border: 1px solid var(--cp-line) !important; background: var(--cp-tert) !important; color: var(--cp-txt-1) !important; } .cp-seppop .cp-btn:hover { background: var(--cp-hover) !important; } .cp-seppop .cp-btn.primary { background: var(--cp-blue-strong) !important; border-color: var(--cp-blue-strong) !important; color: #fff !important; } .cp-seppop .cp-btn.ghost { background: transparent !important; } /* ========================================================================== CONTEXT MENU (row actions) ========================================================================== */ div.cp-ctx-menu { position: fixed; z-index: 1600; min-width: 232px; display: none; background: var(--cp-panel); border: 1px solid var(--cp-line); border-radius: 9px; box-shadow: var(--cp-shadow); padding: 5px; color: var(--cp-txt-1); font-size: 0.72rem; } div.cp-ctx-menu.visible { display: block; } .cp-ctx-menu .cp-ctx-item { padding: 7px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap; color: var(--cp-txt-1) !important; } .cp-ctx-menu .cp-ctx-item:hover { background: var(--cp-hover); } .cp-ctx-menu .cp-ctx-danger { color: var(--cp-bad) !important; } .cp-ctx-menu .cp-ctx-sep { height: 1px; background: var(--cp-line); margin: 4px 2px; } /* ========================================================================== MODALS — planner sections inside the app's .modal-overlay / .modal-panel ========================================================================== */ .modal-panel.cp-modal { width: 1000px; } .modal-panel.cp-modal-dispatch { width: 1200px; font-size: 0.8rem; } /* the app's .modal-panel scrolls as one block (header + body + footer). These two modals are tall, so the panel becomes a flex column and only the BODY scrolls — the step header and the send footer stay put. */ .modal-panel.cp-modal { display: flex; flex-direction: column; overflow: hidden; } .cp-modal > .modal-header, .cp-modal > .modal-footer { flex: 0 0 auto; } .cp-modal > .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 18px; } /* [hidden] must beat the author display:flex/grid on .cp-mix-warn, .cp-mrow … */ .cp-modal [hidden], .cp-seppop [hidden], .cp-ctx-menu [hidden] { display: none !important; } .cp-modal *, .cp-modal *::before, .cp-modal *::after { box-sizing: border-box; } .cp-modal input:not([type=checkbox]), .cp-modal select, .cp-modal textarea { background: var(--cp-field); color: var(--cp-txt-1); border: 1px solid var(--cp-line); border-radius: 6px; font-size: 0.72rem; padding: 6px 8px; font-family: inherit; transition: border-color 0.14s; } .cp-modal input:not([type=checkbox]):hover, .cp-modal select:hover, .cp-modal textarea:hover { border-color: var(--cp-txt-3); } .cp-modal input[type=checkbox] { accent-color: var(--cp-blue-strong); cursor: pointer; margin: 0; } .cp-modal :focus-visible { outline: 2px solid var(--cp-focus); outline-offset: 2px; } .cp-modal .cp-grow { flex: 1 1 auto; } .cp-modal .cp-modal-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; } .cp-modal-dispatch .cp-modal-grid { grid-template-columns: minmax(0, 1fr) 350px; gap: 16px; } @media (max-width: 1040px) { .cp-modal-dispatch .cp-modal-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 880px) { .cp-modal .cp-modal-grid { grid-template-columns: minmax(0, 1fr); } } .cp-modal .cp-msec { border: 1px solid var(--cp-line-soft); border-radius: 10px; padding: 12px 13px 13px; background: var(--cp-inset); } .cp-modal .cp-msec + .cp-msec { margin-top: 12px; } .cp-modal .cp-msec .lg { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cp-txt-3) !important; display: flex; align-items: center; gap: 8px; margin-bottom: 9px; } .cp-modal .cp-msec .lg .stepn { width: 17px; height: 17px; border-radius: 50%; background: var(--cp-blue-strong); color: #fff !important; display: inline-flex; align-items: center; justify-content: center; font-size: 0.56rem; flex: 0 0 auto; } .cp-modal .cp-msec .lg .rt { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 600; } .cp-modal .cp-mrow { display: flex; flex-direction: column; gap: 5px; } .cp-modal .cp-mrow + .cp-mrow { margin-top: 10px; } .cp-modal .cp-mrow label { font-size: 0.62rem; font-weight: 700; color: var(--cp-txt-2) !important; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cp-modal .cp-mrow textarea { resize: vertical; min-height: 54px; line-height: 1.5; } .cp-modal .cp-hint { font-size: 0.61rem; color: var(--cp-txt-3) !important; line-height: 1.5; } .cp-modal .cp-hint.ok { color: var(--cp-ok) !important; } .cp-modal .cp-hint.warnc { color: var(--cp-warn) !important; } .cp-modal .cp-lead { font-size: 0.68rem; color: var(--cp-txt-2) !important; margin: 0 0 12px; } .cp-modal .cp-recognized { display: inline-flex; align-items: center; gap: 5px; font-size: 0.57rem; font-weight: 800; letter-spacing: 0.05em; color: var(--cp-ok) !important; border: 1px solid var(--cp-ok); border-radius: 999px; padding: 1px 8px; background: color-mix(in srgb, var(--cp-ok) 12%, transparent); } .cp-modal .cp-mix-warn { display: flex; gap: 9px; align-items: flex-start; font-size: 0.64rem; line-height: 1.55; color: var(--cp-txt-1) !important; border: 1px solid var(--cp-warn); border-left: 3px solid var(--cp-warn); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; background: color-mix(in srgb, var(--cp-warn) 11%, transparent); } .cp-modal .cp-mship { border: 1px solid var(--cp-line-soft); border-radius: 9px; overflow: hidden; background: var(--cp-panel); } .cp-modal .cp-mship .scroll { max-height: 236px; overflow: auto; } .cp-modal .cp-mship table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.66rem; } /* same themes.css table armour as the worklist */ .cp-modal .cp-mship th { position: sticky; top: 0; z-index: 1; background: var(--cp-tert) !important; color: var(--cp-txt-2) !important; font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.08em; text-align: left; padding: 6px 9px; font-weight: 800; border-color: var(--cp-line) !important; border-bottom: 1px solid var(--cp-line) !important; } .cp-modal .cp-mship td { padding: 5px 9px; background: transparent !important; color: var(--cp-txt-1) !important; border-bottom: 1px solid var(--cp-line-soft) !important; } .cp-modal .cp-mship tr:last-child td { border-bottom: none !important; } .cp-modal .cp-mship tr.dim td { opacity: 0.38; } .cp-modal .cp-mship tr:hover td { background: var(--cp-hover) !important; } .cp-modal .cp-mship input[type=time] { width: 72px; padding: 2px 4px; font-size: 0.64rem; } .cp-modal .cp-carrier-chip, .cp-root .cp-carrier-chip { display: inline-block; font-size: 0.57rem; font-weight: 800; letter-spacing: 0.05em; border-radius: 4px; padding: 1px 6px; background: color-mix(in srgb, var(--cp-link) 14%, transparent); color: var(--cp-link) !important; border: 1px solid color-mix(in srgb, var(--cp-link) 45%, transparent); } .cp-modal .cp-carrier-chip.none { background: transparent; color: var(--cp-txt-3) !important; border-color: var(--cp-dot-off-l); border-style: dashed; } .cp-modal .cp-maillist { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; } .cp-modal .cp-mailchip { font-size: 0.58rem; padding: 2px 7px; border-radius: 5px; background: var(--cp-tert); border: 1px solid var(--cp-line); color: var(--cp-txt-2) !important; } .cp-modal .cp-btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-weight: 700; border: 1px solid var(--cp-line) !important; background: var(--cp-tert) !important; color: var(--cp-txt-1) !important; border-radius: 7px; padding: 7px 13px; font-size: 0.71rem; } .cp-modal .cp-btn:hover:not(:disabled) { background: var(--cp-hover) !important; } .cp-modal .cp-btn.primary { background: var(--cp-blue-strong) !important; border-color: var(--cp-blue-strong) !important; color: #fff !important; } .cp-modal .cp-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* dispatch modal runs a step larger throughout */ .cp-modal-dispatch .cp-msec { padding: 14px 15px 15px; border-radius: 11px; } .cp-modal-dispatch .cp-msec + .cp-msec { margin-top: 14px; } .cp-modal-dispatch .cp-msec .lg { font-size: 0.68rem; letter-spacing: 0.11em; margin-bottom: 11px; gap: 9px; } .cp-modal-dispatch .cp-msec .lg .stepn { width: 21px; height: 21px; font-size: 0.66rem; } .cp-modal-dispatch .cp-mrow { gap: 7px; } .cp-modal-dispatch .cp-mrow + .cp-mrow { margin-top: 13px; } .cp-modal-dispatch .cp-mrow label { font-size: 0.74rem; } .cp-modal-dispatch input:not([type=checkbox]), .cp-modal-dispatch select, .cp-modal-dispatch textarea { font-size: 0.78rem; padding: 8px 10px; } .cp-modal-dispatch textarea { min-height: 64px; } .cp-modal-dispatch input[type=checkbox] { width: 16px; height: 16px; } .cp-modal-dispatch .cp-hint { font-size: 0.72rem; } .cp-modal-dispatch .cp-btn { font-size: 0.78rem; padding: 9px 16px; border-radius: 8px; } .cp-modal-dispatch .cp-recognized { font-size: 0.65rem; padding: 2px 9px; } .cp-modal-dispatch .cp-mix-warn { font-size: 0.74rem; padding: 10px 12px; margin-bottom: 12px; } .cp-modal-dispatch .cp-mailchip { font-size: 0.68rem; padding: 3px 9px; } .cp-modal-dispatch .cp-seg button { font-size: 0.7rem; padding: 8px 6px; } .cp-modal-dispatch .cp-mship .scroll { max-height: 270px; } .cp-modal-dispatch .cp-mship table { font-size: 0.76rem; } .cp-modal-dispatch .cp-mship th { font-size: 0.63rem; padding: 8px 10px; white-space: nowrap; } .cp-modal-dispatch .cp-mship td { padding: 7px 10px; white-space: nowrap; } .cp-modal-dispatch .cp-mship td.cp-uc { max-width: 170px; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; } .cp-modal-dispatch .cp-mship input[type=time] { width: 88px; padding: 4px 6px; font-size: 0.74rem; } .cp-modal-dispatch .cp-carrier-chip { font-size: 0.66rem; padding: 2px 8px; } /* ---------- release-note coverage tally ---------- Numerator = ticked lines carrying a matched note, denominator = every ticked line, so the tally always describes the email that will actually be sent. */ .cp-modal .cp-rn-cov { display: flex; flex-direction: column; gap: 7px; margin: -2px 0 11px; padding: 10px 12px; border: 1px solid var(--cp-line); border-left: 3px solid var(--cp-dot-off-l); border-radius: 9px; background: var(--cp-panel); transition: border-color 0.16s, background 0.16s; } .cp-modal .cp-rn-cov.part { border-left-color: var(--cp-warn); } .cp-modal .cp-rn-cov.full { border-left-color: var(--cp-ok); background: color-mix(in srgb, var(--cp-ok) 9%, var(--cp-panel)); border-color: color-mix(in srgb, var(--cp-ok) 40%, var(--cp-line)); } .cp-modal .cp-rn-cov .rc-h { display: flex; align-items: baseline; gap: 10px; } .cp-modal .cp-rn-cov .rc-t { font-size: 0.79rem; font-weight: 800; color: var(--cp-txt-1) !important; } .cp-modal .cp-rn-cov.full .rc-t { color: var(--cp-ok) !important; } .cp-modal .cp-rn-cov .rc-p { margin-left: auto; font-size: 0.7rem; font-weight: 800; color: var(--cp-txt-3) !important; white-space: nowrap; } .cp-modal .cp-rn-cov.part .rc-p { color: var(--cp-warn) !important; } .cp-modal .cp-rn-cov.full .rc-p { color: var(--cp-ok) !important; } .cp-modal .cp-rn-meter { height: 6px; border-radius: 4px; background: var(--cp-tert); overflow: hidden; display: block; } .cp-modal .cp-rn-meter i { display: block; height: 100%; border-radius: 4px; background: var(--cp-warn); transition: width 0.2s ease, background 0.2s; } .cp-modal .cp-rn-cov.full .cp-rn-meter i { background: var(--cp-ok); } .cp-modal .cp-rn-miss { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 0.7rem; color: var(--cp-txt-3) !important; } .cp-modal .cp-rn-miss b { color: var(--cp-txt-2) !important; font-weight: 700; margin-right: 2px; } .cp-modal .cp-miss-chip { font-size: 0.68rem; font-weight: 800; white-space: nowrap; color: var(--cp-warn) !important; background: color-mix(in srgb, var(--cp-warn) 13%, transparent); border: 1px solid color-mix(in srgb, var(--cp-warn) 45%, transparent); border-radius: 5px; padding: 1px 7px; } .cp-modal-dispatch .modal-footer.cov-warn { border-top-color: color-mix(in srgb, var(--cp-warn) 55%, var(--cp-line)); background: color-mix(in srgb, var(--cp-warn) 7%, transparent); } .cp-modal .cp-foot { font-size: 0.72rem; line-height: 1.55; color: var(--cp-txt-3) !important; flex: 1 1 auto; min-width: 240px; text-align: left; } .cp-modal .cp-foot b { color: var(--cp-txt-1) !important; } .cp-modal .cp-foot .foot-tag { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; } .cp-modal .cp-foot .foot-tag.warn { color: var(--cp-warn) !important; } .cp-modal .cp-foot .foot-tag.ok { color: var(--cp-ok) !important; } /* ---------- release-note PDF trays ---------- */ .cp-modal .cp-rn-lead { font-size: 0.72rem; color: var(--cp-txt-3) !important; line-height: 1.55; margin: -4px 0 11px; } .cp-modal .cp-rntrays { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } @media (max-width: 780px) { .cp-modal .cp-rntrays { grid-template-columns: minmax(0, 1fr); } } .cp-modal .cp-rntray { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 126px; padding: 11px 12px; text-align: left; border: 1.5px dashed var(--cp-line); border-radius: 10px; background: var(--cp-panel); color: var(--cp-txt-2); transition: border-color 0.14s, background 0.14s, box-shadow 0.14s; } .cp-modal .cp-rntray[role="button"] { cursor: pointer; align-items: center; justify-content: center; text-align: center; } .cp-modal .cp-rntray[role="button"]:hover { border-color: var(--cp-acc); background: color-mix(in srgb, var(--cp-acc) 8%, var(--cp-panel)); } .cp-modal .cp-rntray.over { border-color: var(--cp-acc); border-style: solid; background: color-mix(in srgb, var(--cp-acc) 16%, var(--cp-panel)); box-shadow: inset 0 0 0 1px var(--cp-acc); } .cp-modal .cp-rntray .rn-ico { font-size: 1.25rem; line-height: 1; } .cp-modal .cp-rntray .rn-t { font-size: 0.74rem; font-weight: 800; color: var(--cp-txt-1) !important; } .cp-modal .cp-rntray .rn-s { font-size: 0.65rem; color: var(--cp-txt-3) !important; line-height: 1.5; } .cp-modal .cp-rntray.reading { border-style: solid; border-color: var(--cp-blue); align-items: center; justify-content: center; text-align: center; } .cp-modal .cp-rntray.reading .rn-bar { width: 74%; height: 4px; border-radius: 3px; background: var(--cp-tert); overflow: hidden; margin-top: 6px; display: block; } .cp-modal .cp-rntray.reading .rn-bar i { display: block; height: 100%; width: 42%; border-radius: 3px; background: var(--cp-blue); animation: cpRnScan 1s ease-in-out infinite alternate; } @keyframes cpRnScan { from { transform: translateX(-12%); } to { transform: translateX(150%); } } .cp-modal .cp-rntray.ok { border-style: solid; border-color: var(--cp-ok); background: color-mix(in srgb, var(--cp-ok) 9%, var(--cp-panel)); } .cp-modal .cp-rntray.bad { border-style: solid; border-color: var(--cp-bad); background: color-mix(in srgb, var(--cp-bad) 9%, var(--cp-panel)); } .cp-modal .cp-rntray .rn-h { display: flex; align-items: center; gap: 7px; width: 100%; font-size: 0.72rem; } .cp-modal .cp-rntray .rn-h .rn-mark { font-size: 0.85rem; font-weight: 900; line-height: 1; flex: 0 0 auto; } .cp-modal .cp-rntray.ok .rn-h .rn-mark { color: var(--cp-ok) !important; } .cp-modal .cp-rntray.bad .rn-h .rn-mark { color: var(--cp-bad) !important; } .cp-modal .cp-rntray .rn-file { font-weight: 800; color: var(--cp-txt-1) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .cp-modal .cp-rntray .rn-kv { display: flex; justify-content: space-between; gap: 10px; width: 100%; font-size: 0.68rem; color: var(--cp-txt-3) !important; } .cp-modal .cp-rntray .rn-kv b { color: var(--cp-txt-1) !important; font-weight: 800; } .cp-modal .cp-rntray .rn-msg { font-size: 0.68rem; line-height: 1.55; color: var(--cp-txt-2) !important; } .cp-modal .cp-rntray .rn-msg b { color: var(--cp-bad) !important; } .cp-modal .cp-rntray .rn-x { margin-top: auto; align-self: flex-start; font-size: 0.63rem; font-weight: 800; letter-spacing: 0.04em; border: 1px solid var(--cp-line) !important; background: var(--cp-tert) !important; border-radius: 6px; padding: 4px 10px; color: var(--cp-txt-2) !important; } .cp-modal .cp-rntray .rn-x:hover { background: var(--cp-hover) !important; color: var(--cp-txt-1) !important; } /* The chip now carries the depot's FULL master name (what the carrier email prints, e.g. "APM1-Hutchison Ports Delta II"), so it must wrap inside its column/tray instead of stretching the layout. */ .cp-modal .cp-er-chip { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; max-width: 100%; white-space: normal; text-align: left; line-height: 1.3; font-size: 0.63rem; font-weight: 800; letter-spacing: 0.04em; color: var(--cp-ok) !important; background: color-mix(in srgb, var(--cp-ok) 13%, transparent); border: 1px solid color-mix(in srgb, var(--cp-ok) 48%, transparent); border-radius: 5px; padding: 2px 8px; } /* Amber + "?" ONLY when the reader flagged the depot as a guess — the title attribute carries the explanation, hence the help cursor. A high-confidence read (or an older result with no confidence flag) keeps the green chip above on both the tray and the shipment line. */ .cp-modal .cp-er-chip.low { color: var(--cp-warn) !important; background: color-mix(in srgb, var(--cp-warn) 13%, transparent); border-color: color-mix(in srgb, var(--cp-warn) 48%, transparent); cursor: help; } .cp-modal .cp-mship .cp-er-chip { margin-top: 0; font-size: 0.62rem; padding: 1px 7px; } .cp-modal .cp-er-none { color: var(--cp-txt-3) !important; } /* ---------- edit multiples ---------- */ .cp-modal .cp-bsec-t { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cp-txt-3) !important; margin: 14px 2px 7px; } .cp-modal .cp-bsec-t:first-child { margin-top: 0; } .cp-modal .cp-brow { display: grid; grid-template-columns: 16px minmax(0, 190px) minmax(0, 1fr); gap: 9px 11px; align-items: center; padding: 8px 11px; border: 1px solid var(--cp-line-soft); border-radius: 9px; background: var(--cp-inset); transition: border-color 0.14s, background 0.14s; } .cp-modal .cp-brow + .cp-brow { margin-top: 7px; } .cp-modal .cp-brow:hover { border-color: var(--cp-txt-3); } .cp-modal .cp-brow.on { border-color: var(--cp-acc); background: color-mix(in srgb, var(--cp-acc) 9%, var(--cp-inset)); } .cp-modal .cp-brow .bname { font-size: 0.66rem; font-weight: 700; color: var(--cp-txt-2) !important; } .cp-modal .cp-brow.on .bname { color: var(--cp-txt-1) !important; } .cp-modal .cp-brow .bname small { display: block; font-size: 0.55rem; font-weight: 600; color: var(--cp-txt-3) !important; letter-spacing: 0.04em; } .cp-modal .cp-brow .bctl { display: flex; align-items: center; gap: 8px; min-width: 0; } .cp-modal .cp-brow .bctl > input, .cp-modal .cp-brow .bctl > select { flex: 1 1 auto; min-width: 0; } .cp-modal .cp-brow:not(.on) .bctl { opacity: 0.35; pointer-events: none; } .cp-modal .cp-brow .unchanged { font-size: 0.58rem; color: var(--cp-txt-3) !important; font-style: italic; } .cp-modal .cp-brow.on .unchanged { display: none; } .cp-modal .cp-chiplist { display: flex; flex-wrap: wrap; gap: 6px; } .cp-modal .cp-rowchip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.6rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--cp-panel); border: 1px solid var(--cp-line); color: var(--cp-txt-2) !important; } .cp-modal .cp-rowchip b { color: var(--cp-link) !important; } /* ========================================================================== CALENDAR ========================================================================== */ .cp-root .cp-cal-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 14px; align-items: start; } @media (max-width: 1150px) { .cp-root .cp-cal-wrap { grid-template-columns: minmax(0, 1fr); } } .cp-root .cp-cal-head { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; padding: 9px 11px; background: var(--cp-panel); border: 1px solid var(--cp-line); border-radius: 11px; margin-bottom: 12px; } .cp-root .cp-cal-head h3 { font-size: 0.8rem; font-weight: 800; margin: 0; color: var(--cp-txt-1) !important; } .cp-root .cp-cal-head .wk { font-size: 0.66rem; color: var(--cp-txt-3) !important; } .cp-root .cp-cal-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; } @media (max-width: 900px) { .cp-root .cp-cal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* the column itself is the scroller — its header stays pinned while 30 cards run under it */ .cp-root .cp-cal-col { background: var(--cp-panel); border: 1px solid var(--cp-line); border-radius: 11px; padding: 0 9px 9px; min-height: 330px; max-height: min(66vh, 560px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 6px; } .cp-root .cp-cal-col.today { border-color: var(--cp-acc); box-shadow: inset 0 0 0 1px var(--cp-acc); } .cp-root .cp-cal-col-h { position: sticky; top: 0; z-index: 2; flex: 0 0 auto; display: flex; align-items: baseline; gap: 3px 8px; flex-wrap: wrap; margin: 0 -9px; padding: 10px 12px 7px; background: var(--cp-panel); border-bottom: 1px solid var(--cp-line-soft); } .cp-root .cp-cal-col-h .d { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; color: var(--cp-cal-meta) !important; white-space: nowrap; } .cp-root .cp-cal-col-h .dm { font-size: 1.02rem; font-weight: 800; color: var(--cp-txt-1) !important; white-space: nowrap; margin-right: auto; } .cp-root .cp-cal-col.today .d, .cp-root .cp-cal-col.today .dm { color: var(--cp-acc) !important; } .cp-root .cp-cal-col-h .cnt { margin-left: auto; font-size: 0.66rem; font-weight: 800; white-space: nowrap; color: var(--cp-cal-meta) !important; background: var(--cp-tert); border: 1px solid var(--cp-line-soft); border-radius: 999px; padding: 2px 9px; } /* a day that has deliveries registered reads green; an empty day stays muted */ .cp-root .cp-cal-col-h .cnt.has { color: var(--cp-ok) !important; background: color-mix(in srgb, var(--cp-ok) 14%, transparent); border-color: color-mix(in srgb, var(--cp-ok) 48%, transparent); } .cp-root .cp-cal-empty { flex: 0 0 auto; font-size: 0.62rem; color: var(--cp-cal-meta) !important; text-align: center; padding: 18px 4px; border: 1px dashed var(--cp-line-soft); border-radius: 8px; } /* the card = hairline severity rail + body; the four signal dots sit INSIDE the row, grouped into one housing pinned to the right end of the first line */ .cp-root .cp-cal-row { flex: 0 0 auto; text-align: left; width: 100%; background: var(--cp-inset) !important; border: 1px solid var(--cp-line-soft) !important; border-radius: 8px; padding: 0; overflow: hidden; color: var(--cp-txt-1) !important; display: flex; align-items: stretch; transition: border-color 0.12s, background 0.12s; } .cp-root .cp-cal-row:hover { background: var(--cp-hover) !important; border-color: var(--cp-txt-3) !important; } .cp-root .cp-cal-row.arrived { opacity: 0.55; } .cp-root .cp-rib { flex: 0 0 3px; width: 3px; align-self: stretch; background: var(--cp-rail, var(--cp-line)); } .cp-root .cp-dotpod { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; padding: 2px 5px; border-radius: 999px; background: var(--cp-panel); border: 1px solid var(--cp-line-soft); } .cp-root .cp-mini { width: 6px; height: 6px; border-radius: 50%; display: block; border: none; } .cp-root .cp-mini.ok { background: var(--cp-dot-ok); } .cp-root .cp-mini.warn { background: var(--cp-dot-warn); } .cp-root .cp-mini.bad { background: var(--cp-dot-bad); } .cp-root .cp-mini.off { background: var(--cp-dot-off); box-shadow: inset 0 0 0 1px var(--cp-dot-off-l); } .cp-root .cp-cal-row .bd { flex: 1 1 auto; min-width: 0; padding: 5px 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 1px 6px; } .cp-root .cp-cal-row .time { font-size: 0.66rem; font-weight: 800; letter-spacing: -0.02em; flex: 0 0 auto; order: 1; color: var(--cp-txt-1) !important; } .cp-root .cp-cal-row .fr { font-size: 0.63rem; font-weight: 800; color: var(--cp-link) !important; flex: 0 0 auto; order: 2; } .cp-root .cp-cal-row .cp-carrier-chip { order: 3; flex: 0 0 auto; margin-left: auto; } .cp-root .cp-cal-row .cp-dotpod { order: 4; } .cp-root .cp-cal-row .meta { order: 5; flex: 1 1 100%; min-width: 0; display: flex; align-items: center; gap: 3px; font-size: 0.58rem; color: var(--cp-cal-meta) !important; } .cp-root .cp-cal-row .meta > span { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit !important; } /* a clipped customer is still recognisable, a clipped container number is not */ .cp-root .cp-cal-row .meta .cu { flex-shrink: 0.6; color: var(--cp-cal-strong) !important; font-weight: 700; } .cp-root .cp-cal-row .meta .pr { flex-shrink: 1.1; color: var(--cp-cal-strong) !important; font-weight: 700; } .cp-root .cp-cal-row .meta .co { flex-shrink: 1.5; } .cp-root .cp-cal-row .meta i { flex: 0 0 auto; font-style: normal; opacity: 0.55; color: inherit !important; } .cp-root .cp-cal-det { order: 6; flex: 1 1 100%; display: none; margin-top: 5px; padding-top: 5px; border-top: 1px dashed var(--cp-line); font-size: 0.6rem; color: var(--cp-cal-meta) !important; line-height: 1.65; } .cp-root .cp-cal-row.open .cp-cal-det { display: block; } .cp-root .cp-cal-det .kv { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .cp-root .cp-cal-det .kv > span:first-child { flex: 0 0 auto; color: inherit !important; } .cp-root .cp-cal-det .kv b { color: var(--cp-cal-strong) !important; font-weight: 700; text-align: right; min-width: 0; } .cp-root .cp-cal-det .kv.cmt { display: block; margin-top: 4px; } .cp-root .cp-cal-det .kv.cmt > span:first-child { display: block; font-size: 0.55rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cp-link) !important; } .cp-root .cp-cal-det .kv.cmt b { display: block; text-align: left; font-weight: 600; } .cp-root .cp-cal-det .acts { display: flex; gap: 6px; margin-top: 6px; align-items: center; } /* dense day: > 8 cards collapse to one ellipsised line */ .cp-root .cp-cal-col.dense .cp-cal-row { border-radius: 7px; } .cp-root .cp-cal-col.dense .cp-cal-row:not(.open) .bd { flex-wrap: nowrap; padding: 3px 5px; gap: 4px; } .cp-root .cp-cal-col.dense .cp-cal-row:not(.open) .time { font-size: 0.6rem; } .cp-root .cp-cal-col.dense .cp-cal-row:not(.open) .fr { font-size: 0.6rem; } .cp-root .cp-cal-col.dense .cp-cal-row:not(.open) .meta { order: 3; flex: 1 1 auto; gap: 5px; font-size: 0.52rem; } .cp-root .cp-cal-col.dense .cp-cal-row:not(.open) .meta i { display: none; } .cp-root .cp-cal-col.dense .cp-cal-row:not(.open) .meta .cu { flex: 2.3 1 0; } .cp-root .cp-cal-col.dense .cp-cal-row:not(.open) .meta .pr { flex: 1.2 1 0; } .cp-root .cp-cal-col.dense .cp-cal-row:not(.open) .meta .co { flex: 1.5 1 0; } .cp-root .cp-cal-col.dense .cp-cal-row:not(.open) .cp-carrier-chip { order: 4; margin-left: 0; font-size: 0.5rem; padding: 0 3px; letter-spacing: 0.03em; } .cp-root .cp-cal-col.dense .cp-cal-row:not(.open) .cp-dotpod { order: 5; padding: 1px 4px; gap: 2px; } .cp-root .cp-cal-col.dense .cp-cal-row:not(.open) .cp-dotpod .cp-mini { width: 4px; height: 4px; } .cp-root .cp-cal-hr { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; font-size: 0.52rem; font-weight: 800; letter-spacing: 0.1em; color: var(--cp-cal-meta) !important; opacity: 0.85; margin: 1px 1px -1px; } .cp-root .cp-cal-hr i { flex: 1 1 auto; height: 1px; background: var(--cp-line-soft); } .cp-root .cp-unp { background: var(--cp-panel); border: 1px solid var(--cp-line); border-radius: 11px; padding: 11px; align-self: start; } .cp-root .cp-unp h4 { font-size: 0.72rem; font-weight: 800; display: flex; align-items: center; gap: 8px; margin: 0; color: var(--cp-txt-1) !important; } .cp-root .cp-unp h4 .cnt { background: color-mix(in srgb, var(--cp-bad) 15%, transparent); color: var(--cp-bad) !important; border: 1px solid var(--cp-bad); font-size: 0.58rem; border-radius: 999px; padding: 0 8px; font-weight: 800; } .cp-root .cp-unp .sub { font-size: 0.59rem; color: var(--cp-cal-meta) !important; margin: 3px 0 10px; line-height: 1.5; } .cp-root .cp-unp-list { display: flex; flex-direction: column; gap: 5px; max-height: 560px; overflow: auto; } /* same anatomy as the calendar card, squeezed to three hairline rows; the Plan affordance is a full-height ghost arrow on the right edge */ /* flex:0 0 auto — the list is a capped flex column scroller, so without it the cards shrink to a few pixels once there are more of them than fit */ .cp-root .cp-unp-card { flex: 0 0 auto; background: var(--cp-inset); border: 1px solid var(--cp-line-soft); border-radius: 8px; padding: 0; overflow: hidden; font-size: 0.62rem; display: flex; align-items: stretch; } .cp-root .cp-unp-card .bd { flex: 1 1 auto; min-width: 0; padding: 4px 7px 5px; display: flex; flex-direction: column; gap: 0; } .cp-root .cp-unp-card .r1 { display: flex; align-items: center; gap: 6px; min-width: 0; line-height: 1.35; } .cp-root .cp-unp-card .fr { font-weight: 800; color: var(--cp-link) !important; flex: 0 0 auto; font-size: 0.64rem; } .cp-root .cp-unp-card .cu { color: var(--cp-cal-strong) !important; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; } .cp-root .cp-unp-card .cp-dotpod { margin-left: auto; padding: 1px 4px; gap: 2px; } .cp-root .cp-unp-card .cp-dotpod .cp-mini { width: 5px; height: 5px; } .cp-root .cp-unp-card .r2, .cp-root .cp-unp-card .r3 { color: var(--cp-cal-meta) !important; font-size: 0.55rem; line-height: 1.4; display: flex; align-items: center; gap: 5px; min-width: 0; } .cp-root .cp-unp-card .r2 > span, .cp-root .cp-unp-card .r3 > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; color: inherit !important; } .cp-root .cp-unp-card .r2 i, .cp-root .cp-unp-card .r3 i { flex: 0 0 auto; font-style: normal; opacity: 0.5; color: inherit !important; } .cp-root .cp-unp-card .r2 .pr { color: var(--cp-cal-strong) !important; font-weight: 700; flex: 0 1 auto; } .cp-root .cp-unp-card .plan-btn { flex: 0 0 24px; width: 24px; align-self: stretch; padding: 0; font-size: 0.76rem; font-weight: 800; line-height: 1; border: none !important; border-left: 1px solid var(--cp-line-soft) !important; background: transparent !important; color: var(--cp-blue-strong) !important; border-radius: 0; } .cp-root .cp-unp-card .plan-btn:hover { background: var(--cp-blue-strong) !important; color: #fff !important; }