/*
    claude.css - Techemet intranet shared component styles
    All classes prefixed cl- to avoid conflicts with site-wide styles in style.css / style.cfm.
    Site accent: #3957DB  |  Hover/dark: #2d46b3  |  Light tint bg: #eef1fc
*/

/* ---------- Box-sizing reset scoped to cl- containers ---------- */
.cl-page *, .cl-page *::before, .cl-page *::after,
.cl-main *, .cl-main *::before, .cl-main *::after {
    box-sizing: border-box;
}

/* ---------- Page header bar ---------- */
.cl-page-header {
    background: #1e2d45;
    color: #fff;
    padding: 14px 28px;
    border-bottom: 3px solid #3957DB;
}
.cl-page-header h1 {
    font-size: 1.15rem;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    letter-spacing: 0.01em;
    margin: 0;
    color: #fff;
}
.cl-page-sub {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.5);
    margin-top: 3px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ---------- Main content wrapper ---------- */
.cl-main {
    max-width: 98%;
    margin: 22px auto;
    padding: 0 20px 60px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 0.875rem;
    color: #1e293b;
}

/* ---------- Cards ---------- */
.cl-card {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #dde3ec;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    padding: 22px 26px;
    margin-bottom: 22px;
}
.cl-card-heading {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #8fa0b8;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f3f7;
}

/* ---------- Alerts ---------- */
.cl-alert-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-left: 4px solid #ef4444;
    color: #b91c1c;
    padding: 11px 15px;
    border-radius: 6px;
    margin-bottom: 18px;
    font-size: 0.875rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

.cl-alert-warn {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
    color: #b45309;
    padding: 11px 15px;
    border-radius: 6px;
    margin-bottom: 18px;
    font-size: 0.875rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
.cl-alert-info {
    background: #e7f3ff;
    border: 1px solid #b6dcfe;
    border-left: 4px solid #2196F3;
    color: #1565C0;
    padding: 11px 15px;
    border-radius: 6px;
    margin-bottom: 18px;
    font-size: 0.875rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ---------- Form layout ---------- */
.cl-form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cl-form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.cl-form-group { display: flex; flex-direction: column; }
.cl-form-group label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #4a5568;
    margin-bottom: 5px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
.cl-input, .cl-select {
    width: 100%;
    border: 1px solid #c8d0db;
    border-radius: 6px;
    padding: 8px 11px;
    font-size: 0.875rem;
    color: #1e293b;
    background: #fff;
    outline: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.cl-input:focus, .cl-select:focus {
    border-color: #3957DB;
    box-shadow: 0 0 0 3px rgba(57,87,219,0.13);
}
.cl-form-actions {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #f0f3f7;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

/* ---------- Buttons ---------- */
.cl-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-radius: 6px;
    padding: 9px 20px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    transition: background 0.15s;
    text-decoration: none;
    line-height: 1.3;
}
.cl-btn-primary              { background: #3957DB; color: #fff; }
.cl-btn-primary:hover        { background: #2d46b3; color: #fff; }
.cl-btn-primary:visited      { color: #fff; }
.cl-btn-success              { background: #16a34a; color: #fff; }
.cl-btn-success:hover        { background: #15803d; color: #fff; }
.cl-btn-neutral              { background: #64748b; color: #fff; }
.cl-btn-neutral:hover        { background: #475569; color: #fff; }
.cl-btn-sm { padding: 6px 14px; font-size: 0.8rem; }

/* ---------- Pills ---------- */
.cl-pills { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.cl-pill {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #475569;
    padding: 3px 11px;
    border-radius: 20px;
    font-size: 0.74rem;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
.cl-pill strong { color: #1e293b; }
.cl-pill--flagged   { background: #dcfce7; border-color: #86efac; color: #15803d; }
.cl-pill--flagged strong { color: #15803d; }
.cl-pill--unflagged { background: #f1f5f9; border-color: #e2e8f0; color: #64748b; }
.cl-pill--unflagged strong { color: #64748b; }

/* ---------- Tabs (client-side section switcher) ---------- */
.cl-tabs { display:flex; gap:4px; border-bottom:2px solid #dde3ec; margin-bottom:22px; flex-wrap:wrap; }
.cl-tab { border:none; background:none; padding:10px 18px; font-size:0.85rem; font-weight:600; color:#64748b;
          cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px; }
.cl-tab:hover { color:#3957DB; }
.cl-tab.cl-active { color:#1e2d45; border-bottom-color:#3957DB; }
.cl-tab-count { display:inline-block; margin-left:7px; background:#eef1fc; color:#2d46b3; border-radius:10px;
                padding:1px 8px; font-size:0.72rem; font-weight:700; }
.cl-tab-panel { display:none; }
.cl-tab-panel.cl-active { display:block; }

/* ---------- Main report table ---------- */
.cl-table-wrap {
    border: 1px solid #dde3ec;
    border-radius: 6px;
    overflow: auto;
}
table.cl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
table.cl-table thead th {
    background: #1e2d45;
    color: #fff;
    padding: 9px 12px;
    text-align: left;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
    border-right: 1px solid rgba(255,255,255,0.07);
}
table.cl-table thead th.cl-th-right  { text-align: right; }
table.cl-table thead th.cl-th-center { text-align: center; }
table.cl-table tbody tr { border-bottom: 1px solid #eaeef3; }
table.cl-table tbody tr:hover td { background: #f0f4ff; }
table.cl-table td {
    padding: 8px 12px;
    color: #334155;
    vertical-align: middle;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 0.8rem;
}
table.cl-table td.cl-td-right  { text-align: right; font-variant-numeric: tabular-nums; }
table.cl-table td.cl-td-center { text-align: center; }
table.cl-table td.cl-td-num    { text-align: right; font-variant-numeric: tabular-nums; }

/* Lot header row - blue accent stripe */
table.cl-table tr.cl-tr-lot-header td {
    background: #eef1fc;
    border-top: 2px solid #3957DB;
    border-bottom: 1px solid #c5cef0;
    font-weight: 700;
    color: #1e2d45;
    padding: 9px 12px;
    font-size: 0.82rem;
}
/* Category detail rows - indented */
table.cl-table tr.cl-tr-cat td {
    background: #fff;
    padding: 6px 12px;
    color: #475569;
}
table.cl-table tr.cl-tr-cat:nth-child(even) td { background: #f8fafc; }
/* Lot subtotal row */
table.cl-table tr.cl-tr-lot-total td {
    background: #f1f5f9;
    border-top: 1px solid #dde3ec;
    border-bottom: 3px solid #dde3ec;
    font-weight: 700;
    color: #1e293b;
    padding: 7px 12px;
}
/* Grand total footer */
table.cl-table tfoot tr.cl-tr-grand-total td {
    background: #1e2d45;
    color: #fff;
    padding: 10px 12px;
    font-weight: 700;
    font-size: 0.82rem;
    border-top: 2px solid #3957DB;
}

/* ---------- Distribution input table ---------- */
table.cl-dist-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
table.cl-dist-table th {
    background: #eef1fc;
    color: #2d46b3;
    padding: 8px 12px;
    text-align: left;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    border-bottom: 2px solid #3957DB;
}
table.cl-dist-table th.cl-th-right { text-align: right; }
table.cl-dist-table td.cl-td-num { text-align: right; font-variant-numeric: tabular-nums; }
table.cl-dist-table td {
    padding: 7px 12px;
    color: #334155;
    border-bottom: 1px solid #eaeef3;
    vertical-align: middle;
}
table.cl-dist-table tbody tr:hover td { background: #f0f4ff; }
table.cl-dist-table tfoot tr td {
    background: #1e2d45;
    color: #fff;
    font-weight: 700;
    padding: 9px 12px;
    border-top: 2px solid #3957DB;
    border-bottom: none;
}
.cl-dist-input {
    width: 110px;
    border: 1px solid #c8d0db;
    border-radius: 5px;
    padding: 5px 8px;
    font-size: 0.82rem;
    text-align: right;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.cl-dist-input:focus {
    border-color: #3957DB;
    box-shadow: 0 0 0 3px rgba(57,87,219,0.13);
}

/* ---------- Floating action buttons ---------- */
.cl-fab-wrap {
    position: fixed;
    bottom: 28px;
    right: 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 999;
}
.cl-fab {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #3957DB;
    background: #1e2d45;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    transition: background 0.15s;
    text-decoration: none;
}
.cl-fab:hover        { background: #3957DB; color: #fff; text-decoration: none; }
.cl-fab:visited      { color: #fff; }
.cl-fab-hidden       { display: none !important; }

/* ---------- Misc ---------- */
.cl-no-results {
    text-align: center;
    padding: 40px 20px;
    color: #94a3b8;
    font-size: 0.9rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
.cl-muted { color: #94a3b8; }
.cl-section-anchor { display: block; }

/* Filter-notice bar: shows an active drill-through/filter scope (e.g. "Showing lot N only")
   with a "Show all" escape link back to the unfiltered page. */
.cl-filterbar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #eef1fc;
    border: 1px solid #c5cef0;
    border-radius: 8px;
    padding: 8px 14px;
    margin-bottom: 14px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #2d46b3;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
.cl-filterbar a { color: #3957DB; }

/* ---------- Navigation news alert ---------- */
#nav li a.cl-news-alert {
    font-weight: 700 !important;
}
@keyframes cl-news-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.2; }
}
#nav li a.cl-news-pulse {
    animation: cl-news-pulse 1.4s ease-in-out 3;
}

/* ---------- Header logo alignment fix ---------- */
/* Bootstrap's Reboot sets `img, svg { vertical-align: middle }`, which on pages
   that load bootstrap.min.css pushes the inline header logo ~8px below the top.
   Pages without Bootstrap keep the browser default (baseline) and sit flush.
   Restore baseline so the logo aligns the same with or without Bootstrap. */
#logo img { vertical-align: baseline; }

/* ---------- KPI / stat tiles (used by reporting pages) ---------- */
.cl-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}
.cl-kpi {
    background: #fff;
    border: 1px solid #dde3ec;
    border-left: 4px solid #3957DB;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    padding: 14px 18px;
}
.cl-kpi-label {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #8fa0b8;
    margin-bottom: 6px;
}
.cl-kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e2d45;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.cl-kpi-sub { font-size: 0.72rem; color: #94a3b8; margin-top: 4px; }
.cl-kpi--warn   { border-left-color: #f59e0b; }
.cl-kpi--danger { border-left-color: #ef4444; }

/* ---------- Severity badges ---------- */
.cl-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 12px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
.cl-badge--ok     { background: #dcfce7; color: #15803d; }
.cl-badge--info   { background: #e0e7ff; color: #3730a3; }
.cl-badge--warn   { background: #fef3c7; color: #b45309; }
.cl-badge--danger { background: #fee2e2; color: #b91c1c; }

/* ---------- Inline distribution bar (for hourly/daily volume) ---------- */
.cl-bar-track { background: #eef1fc; border-radius: 4px; height: 16px; width: 100%; min-width: 60px; }
.cl-bar-fill  { background: #3957DB; border-radius: 4px; height: 16px; }
.cl-bar-fill--off { background: #f59e0b; }

/* ---------- Section anchor nav (jump links on long report pages) ---------- */
.cl-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
    position: sticky;
    top: 0;
    background: rgba(255,255,255,0.96);
    padding: 10px 0;
    z-index: 50;
}
.cl-subnav a {
    background: #1e2d45;
    color: #fff;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.74rem;
    font-weight: 600;
    text-decoration: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
.cl-subnav a:hover { background: #3957DB; color: #fff; }
/* Offset anchored jumps so the sticky nav does not cover the heading */
.cl-anchor { display: block; position: relative; top: -70px; visibility: hidden; }

/* ---------- Map drawing toolbar (GeoFence custom-draw controls) ---------- */
/* Replaces Google's removed DrawingManager toolbar. These buttons are pushed
   into a Google Maps custom control, so they sit over the map canvas. */
.cl-mapdraw {
    display: flex;
    gap: 6px;
    margin: 10px;
    background: #fff;
    padding: 6px;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.cl-mapdraw-btn {
    border: 1px solid #c8d0db;
    background: #fff;
    color: #1e293b;
    border-radius: 5px;
    padding: 7px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    transition: background 0.15s, border-color 0.15s;
}
.cl-mapdraw-btn:hover   { background: #eef1fc; border-color: #3957DB; }
/* Active = the draw mode the user is currently in */
.cl-mapdraw-btn.cl-active { background: #3957DB; color: #fff; border-color: #3957DB; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) { .cl-form-grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
    .cl-form-grid-2, .cl-form-grid-3 { grid-template-columns: 1fr; }
    .cl-main  { padding: 0 12px 40px; }
    .cl-card  { padding: 16px 14px; }
    .cl-page-header { padding: 12px 16px; }
}

/* ---------- Logo / image gallery tiles (filterable grid, used by reporting pages) ---------- */
.cl-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px;
}
.cl-tile {
    background: #fff;
    border: 1px solid #dde3ec;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
}
/* Grey backing so white logo variants stay visible */
.cl-tile-imgs {
    background: #888;
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    min-height: 110px;
}
/* Let the two logo variants share the tile width instead of a fixed pixel size */
.cl-tile-imgs img {
    max-width: 47%;
    max-height: 110px;
}
.cl-tile-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #1e293b;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
.cl-tile-sub { font-size: 0.68rem; color: #94a3b8; }

/* ---------- Ghost button (low-emphasis action repeated on many rows) ---------- */
.cl-btn-ghost        { background: #fff; color: #3957DB; border: 1px solid #c8d0db; }
.cl-btn-ghost:hover  { background: #eef1fc; color: #2d46b3; border-color: #3957DB; }

/* ---------- Directory tree (collapsible folder groups, e.g. Build_Single_Dir) ---------- */
.cl-dirtree {
    border: 1px solid #dde3ec;
    border-radius: 6px;
    overflow: hidden;
}
.cl-dir-group + .cl-dir-group { border-top: 1px solid #dde3ec; }
.cl-dir-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: #f8fafc;
    border: none;
    cursor: pointer;
    padding: 10px 14px;
    text-align: left;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e293b;
    transition: background 0.15s;
}
.cl-dir-group-header:hover { background: #eef1fc; }
.cl-dir-group-header i.fa-folder { color: #3957DB; }
.cl-dir-chevron { color: #8fa0b8; transition: transform 0.15s; }
/* Action buttons sit inside the clickable header / row; the wrapper pushes them (and the chevron) right */
.cl-dir-actions { display: flex; gap: 6px; margin-left: auto; flex-shrink: 0; }
.cl-dir-group.cl-open .cl-dir-chevron { transform: rotate(90deg); }
.cl-dir-count {
    background: #e2e8f0;
    color: #475569;
    border-radius: 20px;
    padding: 1px 9px;
    font-size: 0.7rem;
    font-weight: 700;
}
/* Bodies start collapsed; JS toggles them */
.cl-dir-group-body { display: none; }
.cl-dir-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 14px;
    border-top: 1px solid #f0f3f7;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 0.82rem;
}
.cl-dir-row:hover { background: #f8fafc; }
.cl-dir-name { color: #334155; word-break: break-all; }
.cl-dir-name i { color: #94a3b8; margin-right: 7px; }

/* ---------- Valuation hero (pages that exist to show one money figure) ---------- */
/* The single number a valuation page is built around - gross value, lot total, etc.
   Reusable on pricing/recon pages (ConverterValue, CompareMetalPrices, count sheets).
   Deliberately the only loud element on the page; everything else stays in cl-card. */
.cl-val-hero {
    background: #1e2d45;
    border-radius: 8px;
    border-left: 4px solid #3957DB;
    padding: 26px 30px;
    color: #fff;
    margin-bottom: 22px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}
.cl-val-hero-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.55);
    margin-bottom: 10px;
}
.cl-val-figure {
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.cl-val-figure .cl-val-ccy { font-size: 1.1rem; font-weight: 600; color: rgba(255,255,255,0.6); margin-right: 6px; }
.cl-val-hero-aside { text-align: right; font-size: 0.78rem; color: rgba(255,255,255,0.7); line-height: 1.6; }
.cl-val-hero-aside b { color: #fff; font-variant-numeric: tabular-nums; }

/* Element token - Pt / Pd / Rh as a small periodic-table cell (atomic number + symbol).
   Grounds the metal rows in their own vernacular instead of a plain text label. */
.cl-metal-sym {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    width: 40px; height: 40px;
    border: 1px solid #c5cef0;
    border-radius: 6px;
    background: #eef1fc;
    padding: 3px 7px;
    line-height: 1.1;
}
.cl-metal-sym b   { font-size: 0.95rem; font-weight: 700; color: #1e2d45; }
.cl-metal-sym span { font-size: 0.55rem; color: #8fa0b8; font-variant-numeric: tabular-nums; }

/* Collapsible raw-data dump (keeps a debug cfdump available without leading with it) */
.cl-raw { margin-top: 22px; }
.cl-raw > summary {
    cursor: pointer;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #8fa0b8;
    padding: 8px 0;
    list-style: none;
}
.cl-raw > summary::-webkit-details-marker { display: none; }
.cl-raw > summary::before { content: "\25B8\00a0"; color: #3957DB; }
.cl-raw[open] > summary::before { content: "\25BE\00a0"; }

/* ---------- Replicate Manager / Unit Search replicate column ---------- */

/* Group-size badge shown in the Unit Search "Replicate" column (e.g. "4x"). */
.cl-rep-badge {
    display: inline-block;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 10px;
    background: #3957DB;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
}

/* Primary star, when a member is the canonical converter. */
.btn-icon.cl-rep-star.is-primary { opacity: 0.55; cursor: default; border-color: transparent; }
.btn-icon.cl-rep-star.is-primary:hover { background: none; }
.btn-icon.cl-rep-star i { color: #E0A800; }
.btn-icon.cl-rep-remove i { color: #CC2222; }
.btn-icon.cl-rep-delete i { color: #CC2222; }
.btn-icon.cl-rep-expand i { color: #2266CC; }
/* "Open in Replicate Manager" is a real link (middle/ctrl-click to a new tab) styled like the icon buttons. */
a.btn-icon.cl-rep-open-us { color: inherit; text-decoration: none; display: inline-block; }
a.btn-icon.cl-rep-open-us i { color: #2266CC; }

/* "Open in Replicate Manager" link inside the Edit Replicate Group modal (real anchor, middle-clickable). */
.cl-rep-modal-tools { margin-bottom: 10px; text-align: right; }
.cl-rep-modal-tools a { text-decoration: none; color: #2266CC; font-size: 0.85rem; }
.cl-rep-modal-tools a:hover { text-decoration: underline; }

/* Inline member-management block injected into an expanded group row or the Unit Search modal. */
.cl-rep-members { padding: 8px 4px; }
.cl-rep-child { padding: 6px 10px; }

/* Group-number label shown next to the badge in the Unit Search replicate column. */
.cl-rep-grp { display: block; font-size: 0.7rem; font-weight: 600; color: #3957DB; white-space: nowrap; }

/* Unit Search replicate cell: stack Group # / count / buttons-row vertically. */
.cl-rep-cell { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; }
.cl-rep-actions { display: flex; flex-direction: row; gap: 4px; justify-content: center; }
/* Quick "create / add to" actions shown for a converter that is not in a group yet. */
.cl-rep-ungrouped .btn-icon { border-color: #cfcfcf; }
.cl-rep-ungrouped .btn-icon i { color: #6c8; }
.cl-rep-ungrouped .cl-rep-addto-us i { color: #3957DB; }

/* Coverage stats bar on the Replicate Manager. */
.cl-rep-stats { margin: 8px 0 12px; font-size: 0.85rem; color: #555; }
.cl-rep-stat { display: inline-block; margin: 0 12px; }
.cl-rep-stat b { color: #1e2d45; font-variant-numeric: tabular-nums; }

/* Member panel: members on the left, image-comparison grid on the right. */
.cl-rep-body { display: flex; gap: 12px; align-items: flex-start; }
.cl-rep-left { flex: 1; min-width: 0; }

/* Side image-comparison grid (shown to the right of the members table). */
.cl-rep-imggrid { width: 240px; max-height: 460px; overflow-y: auto; flex: 0 0 auto; border-left: 1px solid #e3e3e3; padding-left: 10px; }
.cl-rep-imgcell { display: inline-block; vertical-align: top; width: 210px; text-align: center; border: 1px solid #ddd; border-radius: 4px; padding: 4px; margin: 0 0 8px 0; background: #fafafa; }
.cl-rep-imgcell img { max-width: 200px; max-height: 200px; }
.cl-rep-imgcap { font-size: 0.72rem; margin-top: 4px; color: #333; }

/* Primary-converter thumbnail shown in the Replicate Manager list's Image column. */
.cl-rep-imgcol { width: 64px; }
.cl-rep-listthumb { max-width: 58px; max-height: 46px; border: 1px solid #ccc; border-radius: 3px; cursor: pointer; }
/* "Set as primary" star button on a compare-grid image. */
.cl-rep-img-setprimary { background: none; border: none; cursor: pointer; padding: 0 2px; }
.cl-rep-img-setprimary i { color: #E0A800; }
/* "Undo" button inside a Noty toast. */
.noty-undo-btn { margin-left: 10px; padding: 2px 10px; background: #fff; color: #222; border: 1px solid #aaa; border-radius: 3px; cursor: pointer; font-weight: 600; }
.noty-undo-btn:hover { background: #f0f0f0; }
/* Small text button for the replicate control in the old Show Converter toolbar (blends with the gif icon row). */
.cl-rep-sc-btn { display: inline-block; margin-left: 10px; padding: 0 8px; font-size: 11px; font-weight: normal; line-height: 14px; vertical-align: middle; background: #f3f3ef; border: 1px solid #d3d3c9; border-radius: 9px; color: #5a5a4d !important; cursor: pointer; text-decoration: none !important; white-space: nowrap; }
.cl-rep-sc-btn:hover { background: #e9e9e1; border-color: #bdbdb0; color: #3d3d32 !important; text-decoration: none !important; }

/* ---------- CSS tooltip (native title tooltips proved unreliable on portal pages) ---------- */
/* Usage: <span class="cl-tip" data-tip="line one&#10;line two">...</span>
   Newlines in data-tip render as line breaks (white-space: pre-line). */
.cl-tip { position: relative; cursor: help; }
.cl-tip:hover::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 7px);
    left: 0;
    background: #1e2d45;
    color: #fff;
    padding: 7px 11px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 400;
    line-height: 1.5;
    white-space: pre-line;
    text-align: left;
    width: max-content;
    max-width: 260px;
    z-index: 200;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    pointer-events: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
/* Anchor right for cells near the table's right edge so the tip stays on-screen. */
.cl-tip--right:hover::after { left: auto; right: 0; }

/* ---------- Lot card (per-lot financial views: hedges, advances) ---------- */
/* A cl-card variant: the header strip carries the lot link, a count pill and the
   per-metal position; the rows table runs edge to edge inside the card.
   Faded blue-grey body tint so cards read as blocks against the white page. */
.cl-lotcard { padding: 0; overflow: hidden; background: #f6f8fd; border-color: #d3dbeb; }
/* Row hover needs to stay visible on the tinted body. */
.cl-lotcard table.cl-dist-table tbody tr:hover td { background: #e8edfb; }
.cl-lotcard-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: #eef1fc;
    border-bottom: 1px solid #c5cef0;
    border-top: 3px solid #3957DB;
}
a.cl-lotcard-lot, span.cl-lotcard-lot {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e2d45;
    text-decoration: none;
}
a.cl-lotcard-lot:hover { color: #3957DB; text-decoration: underline; }
.cl-lotcard-count {
    background: #fff;
    border: 1px solid #c5cef0;
    color: #475569;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}
.cl-lotcard-stats { margin-left: auto; display: flex; flex-wrap: wrap; gap: 20px; }
.cl-lotcard-stat { text-align: right; }
.cl-lotcard-oz  { display: block; font-weight: 700; font-size: 0.88rem; font-variant-numeric: tabular-nums; line-height: 1.2; }
.cl-lotcard-sub { display: block; font-size: 0.68rem; color: #64748b; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .cl-lotcard-stats { margin-left: 0; } }