/* ═══════════════════════════════════════
   Christman Brand Tokens — Color System v16
   Old token names kept so existing rules follow the brand; values come from
   the --tcc-* tokens in christman.css. "gold" is the dark-mode copper accent.
   ═══════════════════════════════════════ */
:root {
    --christman-copper: var(--tcc-copper);
    --christman-dark-copper: var(--tcc-black);
    --christman-gold: var(--tcc-copper-50);
    --christman-navy: var(--tcc-steel-blue);
    --christman-teal: var(--tcc-teal-patina);
    --christman-dark-green: var(--tcc-timber);
    --christman-rust: var(--tcc-oxide);
    --christman-cream: var(--tcc-sand-20);
    --christman-off-white: var(--tcc-black-6);
}

/* ═══════════════════════════════════════
   Header Banner — flat Timber field with a copper rule (no gradients)
   ═══════════════════════════════════════ */
.header-banner {
    position: relative;
    background: var(--tcc-timber);
    border-bottom: 4px solid var(--tcc-copper);
    color: white;
    padding: 18px 24px;
    border-radius: 4px;
    overflow: hidden;
}
.header-banner .mud-typography-h4 { color: #fff !important; }

/* ═══════════════════════════════════════
   Section Header Bars — flat brand fields with white labels
   ═══════════════════════════════════════ */
.copper-bar {
    background: var(--tcc-copper);
    color: white; padding: 6px 14px; border-radius: 4px 4px 0 0;
}
.section-bar { color: white; padding: 6px 14px; border-radius: 4px 4px 0 0; }
.section-bar-navy { background: var(--tcc-steel-blue); }
.section-bar-dark-copper { background: var(--tcc-black); }
.section-bar-teal { background: var(--tcc-timber); }
.section-bar-green { background: var(--tcc-timber); }
.section-bar-ai { background: var(--tcc-black); }
.copper-bar .mud-typography, .section-bar .mud-typography { color: #fff !important; }

/* ═══════════════════════════════════════
   Text size — every font size in this file is multiplied by --ti-text-scale, which the
   dashboard sets from the viewer's A− / A+ choice (default 1). MudBlazor's own text inside
   the dashboard follows it too. Print always uses the tuned 11×17 sizes.
   ═══════════════════════════════════════ */
.ti-dashboard .mud-typography-h4 { font-size: calc(1.5rem * var(--ti-text-scale, 1)); }
.ti-dashboard .mud-typography-h6 { font-size: calc(1rem * var(--ti-text-scale, 1)); }
.ti-dashboard .mud-typography-subtitle1 { font-size: calc(1rem * var(--ti-text-scale, 1)); }
.ti-dashboard .mud-typography-subtitle2 { font-size: calc(.8125rem * var(--ti-text-scale, 1)); }
.ti-dashboard .mud-typography-body1 { font-size: calc(.9375rem * var(--ti-text-scale, 1)); }
.ti-dashboard .mud-typography-body2 { font-size: calc(.875rem * var(--ti-text-scale, 1)); }
.ti-dashboard .mud-typography-caption { font-size: calc(.8125rem * var(--ti-text-scale, 1)); }
.ti-dashboard .mud-chip { font-size: calc(.8125rem * var(--ti-text-scale, 1)); }
@media print {
    .ti-dashboard { --ti-text-scale: 1 !important; }
}

/* Banner top row: title on the left, actions on the right; wraps instead of overlapping */
.ti-banner-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.ti-banner-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.ti-banner-actions .mud-icon-button { opacity: 0.6; }
.ti-banner-actions .mud-icon-button:hover { opacity: 1; }

/* A− / 100% / A+ text-size control in the banner */
.ti-text-size {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255,255,255,0.45);
    border-radius: 4px;
    margin-right: 6px;
    overflow: hidden;
}
.ti-text-size button {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    font-family: var(--tcc-font-display);
    font-size: .8rem; /* fixed: the control itself doesn't grow */
    line-height: 1;
    padding: 5px 8px;
}
.ti-text-size button:hover:not(:disabled) { background: rgba(255,255,255,0.15); }
.ti-text-size button:disabled { opacity: 0.35; cursor: default; }
.ti-text-size .ti-text-size-value {
    min-width: 44px;
    border-left: 1px solid rgba(255,255,255,0.3);
    border-right: 1px solid rgba(255,255,255,0.3);
}

/* ═══════════════════════════════════════
   KPI Cards
   ═══════════════════════════════════════ */
.kpi-card {
    padding: 11px 12px 10px;
    text-align: center;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    min-height: 108px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.kpi-card::before { content:''; position:absolute; top:0;left:0;right:0; height:3px; }
.kpi-clickable { cursor: pointer; }
.kpi-clickable:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.1); }
.kpi-clickable::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 8px;
    width: 12px;
    height: 12px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5'><polyline points='9 18 15 12 9 6'></polyline></svg>") no-repeat center;
    opacity: 0.25;
}
.kpi-clickable:hover::after { opacity: 0.6; }

.kpi-card .mud-icon-root { font-size: calc(1.15rem * var(--ti-text-scale, 1)) !important; opacity: 0.85; }

.kpi-copper { background: rgba(159,102,45,0.08); }
.kpi-copper::before { background: var(--christman-copper); }
.kpi-copper .kpi-value, .kpi-copper .mud-icon-root { color: var(--christman-copper); }
.kpi-green { background: rgba(26,74,64,0.08); }
.kpi-green::before { background: var(--christman-dark-green); }
.kpi-green .kpi-value, .kpi-green .mud-icon-root { color: var(--christman-dark-green); }
.kpi-rust { background: rgba(212,101,10,0.1); }
.kpi-rust::before { background: var(--christman-rust); }
.kpi-rust .kpi-value, .kpi-rust .mud-icon-root { color: var(--christman-rust); }
.kpi-teal { background: rgba(0,163,180,0.08); }
.kpi-teal::before { background: var(--christman-teal); }
.kpi-teal .kpi-value, .kpi-teal .mud-icon-root { color: var(--christman-teal); }
.kpi-navy { background: rgba(41,128,196,0.08); }
.kpi-navy::before { background: var(--christman-navy); }
.kpi-navy .kpi-value, .kpi-navy .mud-icon-root { color: var(--christman-navy); }

/* Alert state — pulses subtly when there are items needing attention */
.kpi-alert::before { height: 5px; }
.kpi-alert .kpi-value { animation: kpi-alert-pulse 2.8s ease-in-out infinite; }
@keyframes kpi-alert-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

.kpi-value {
    font-family:'Oswald',sans-serif;
    font-size: calc(2.1rem * var(--ti-text-scale, 1));
    font-weight: 600;
    line-height: 1;
    margin: 3px 0 3px;
    letter-spacing: -0.01em;
}
.kpi-label {
    font-size: calc(0.72rem * var(--ti-text-scale, 1));
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.85;
    font-weight: 700;
    margin-top: 1px;
}
.kpi-sublabel {
    font-size: calc(0.66rem * var(--ti-text-scale, 1));
    opacity: 0.55;
    font-weight: 500;
    margin-top: 3px;
    line-height: 1.25;
    max-width: 95%;
}

/* Dark mode */
:root[data-theme="dark"] .kpi-copper { background: rgba(207,164,122,0.12); }
:root[data-theme="dark"] .kpi-copper .kpi-value, :root[data-theme="dark"] .kpi-copper .mud-icon-root { color: var(--christman-gold); }
:root[data-theme="dark"] .kpi-green .kpi-value, :root[data-theme="dark"] .kpi-green .mud-icon-root { color: #8AB0A6; }
:root[data-theme="dark"] .kpi-rust .kpi-value, :root[data-theme="dark"] .kpi-rust .mud-icon-root { color: #E9A87E; }
:root[data-theme="dark"] .kpi-teal .kpi-value, :root[data-theme="dark"] .kpi-teal .mud-icon-root { color: #5FA0D3; }
:root[data-theme="dark"] .kpi-navy .kpi-value, :root[data-theme="dark"] .kpi-navy .mud-icon-root { color: #5FA0D3; }

/* ═══════════════════════════════════════
   Impact/Effort Chart Grid
   ═══════════════════════════════════════ */
.chart-y-axis {
    display: flex;
    align-items: stretch;
    min-width: 28px;
}
.chart-y-title {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: calc(0.62rem * var(--ti-text-scale, 1));
    font-weight: 600;
    opacity: 0.4;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
}
.chart-y-labels {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: right;
    padding: 0 5px;
    font-size: calc(0.68rem * var(--ti-text-scale, 1));
    font-weight: 600;
    opacity: 0.45;
}
.chart-x-labels {
    display: flex;
    justify-content: space-around;
    font-size: calc(0.68rem * var(--ti-text-scale, 1));
    font-weight: 600;
    opacity: 0.45;
    padding: 0 0 4px;
}

.chart-grid {
    position: relative;
    border-left: 2px solid rgba(0,0,0,0.15);
    border-bottom: 2px solid rgba(0,0,0,0.15);
    border-radius: 0 4px 0 0;
    overflow: visible;
}

/* Quadrant background zones */
.chart-quad {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: calc(0.72rem * var(--ti-text-scale, 1));
    letter-spacing: 0.03em;
    pointer-events: none;
}
.chart-quad-qw { top:0; left:0; width:50%; height:50%; background:rgba(26,74,64,0.1); color:rgba(26,74,64,0.35); border-radius: 0 0 0 0; }
.chart-quad-si { top:0; left:50%; right:0; height:50%; background:rgba(41,128,196,0.07); color:rgba(41,128,196,0.3); border-radius: 0 4px 0 0; }
.chart-quad-fi { top:50%; left:0; width:50%; bottom:0; background:rgba(250,235,210,0.15); color:rgba(159,102,45,0.3); }
.chart-quad-ra { top:50%; left:50%; right:0; bottom:0; background:rgba(212,101,10,0.07); color:rgba(212,101,10,0.3); }

/* Grid lines */
.chart-gridline-v { position:absolute; top:0; bottom:0; width:1px; background:rgba(0,0,0,0.07); pointer-events:none; }
.chart-gridline-h { position:absolute; left:0; right:0; height:1px; background:rgba(0,0,0,0.07); pointer-events:none; }

/* Project dots */
.chart-dot {
    position: absolute;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    z-index: 2;
}
.chart-dot:hover {
    transform: translate(-50%, -50%) scale(1.3);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    z-index: 20;
}
.chart-dot span:not(.chart-dot-tooltip) {
    color: inherit; /* set per status on the dot (black on the lighter brand colors) */
    font-size: 0.7rem; /* fixed: the dot itself is a fixed size */
    font-weight: 700;
    pointer-events: none;
    line-height: 1;
}

/* Hover tooltip for chart dots */
.chart-dot-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(30, 30, 30, 0.95);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: calc(0.72rem * var(--ti-text-scale, 1));
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 100;
}
.chart-dot-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(30, 30, 30, 0.95);
}
.chart-dot:hover .chart-dot-tooltip {
    display: block;
}
.chart-dot-tooltip strong {
    font-size: calc(0.78rem * var(--ti-text-scale, 1));
}

/* Chart legend grid (numbered) */
.chart-legend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 2px 8px;
}
.chart-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    padding: 1px 2px;
    border-radius: 3px;
}
.chart-legend-item:hover { background: rgba(159,102,45,0.1); }
.chart-legend-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    color: white;
    font-size: 0.55rem; /* fixed: sits in a 16px circle */
    font-weight: 700;
    flex-shrink: 0;
}
.chart-legend-name {
    font-size: calc(0.68rem * var(--ti-text-scale, 1));
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
:root[data-theme="dark"] .chart-legend-item:hover { background: rgba(255,255,255,0.08); }

/* Chart footer */
.chart-footer {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.legend-dot { width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:3px; vertical-align:middle; }

/* Dark mode chart */
:root[data-theme="dark"] .chart-grid { border-color: rgba(255,255,255,0.2); }
:root[data-theme="dark"] .chart-gridline-v, :root[data-theme="dark"] .chart-gridline-h { background: rgba(255,255,255,0.07); }
:root[data-theme="dark"] .chart-quad-qw { background:rgba(26,74,64,0.15); color:rgba(26,74,64,0.5); }
:root[data-theme="dark"] .chart-quad-si { background:rgba(41,128,196,0.1); color:rgba(41,128,196,0.4); }
:root[data-theme="dark"] .chart-quad-fi { background:rgba(250,235,210,0.06); color:rgba(207,164,122,0.4); }
:root[data-theme="dark"] .chart-quad-ra { background:rgba(212,101,10,0.08); color:rgba(212,101,10,0.4); }
:root[data-theme="dark"] .chart-footer { border-top-color: rgba(255,255,255,0.08); }

/* ═══════════════════════════════════════
   Attention Panel + Timeline
   ═══════════════════════════════════════ */
.attention-panel { border-left: 4px solid var(--christman-rust); border-radius: 6px; }
.attention-header {
    display:flex; align-items:center; gap:8px;
    background: rgba(212,101,10,0.1);
    color: var(--tcc-black);
    padding: 6px 14px; font-weight:700; font-size: calc(0.85rem * var(--ti-text-scale, 1));
    border-radius: 6px 6px 0 0;
}

/* ═══════════════════════════════════════
   Highlight Cards (numbered)
   ═══════════════════════════════════════ */
/* Highlights grid — each card can be Small/Medium/Full width */
.highlights-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-content: flex-start;
    /* Cards take their natural / pinned height instead of stretching to match
       the tallest sibling — required for per-card height drag-resize to work */
    align-items: flex-start;
}
/* Cards use an inline flex-basis based on WidthColumns (1-12) set by drag-resize.
   On narrow viewports collapse to full width and drop any pinned desktop height. */
@media (max-width: 900px) {
    .highlight-card-resizable {
        flex: 0 0 100% !important;
        min-height: 0 !important;
    }
}

/* Empty state when there are no highlights yet */
.highlights-empty {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 24px 12px;
    font-size: calc(0.85rem * var(--ti-text-scale, 1));
    opacity: 0.75;
    border: 1px dashed rgba(159,102,45, 0.35);
    border-radius: 4px;
}

/* ── Window-style resize for highlight cards ─────────────────────────
   Corner grip is the primary affordance (resizes both dimensions).
   Edge strips are secondary (one axis only). All hidden in print mode. */
.highlight-card-resizable {
    position: relative;
}

/* Bottom-right corner grip — diagonal stripes icon, always faintly visible */
.highlight-resize-grip {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 18px;
    height: 18px;
    cursor: nwse-resize;
    color: var(--christman-copper);
    opacity: 0.35;
    transition: opacity 0.15s ease, transform 0.1s ease;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    touch-action: none; /* let touch drags resize instead of scrolling the page */
}
.highlight-resize-grip svg { display: block; pointer-events: none; }
.highlight-card-resizable:hover .highlight-resize-grip { opacity: 0.7; }
.highlight-resize-grip:hover {
    opacity: 1 !important;
    transform: scale(1.15);
    background: rgba(159,102,45, 0.12);
}
:root[data-theme="dark"] .highlight-resize-grip { color: var(--christman-gold); }
:root[data-theme="dark"] .highlight-resize-grip:hover { background: rgba(207,164,122, 0.15); }

/* Edge strips for one-axis resize. Hidden until you hover the card,
   then a subtle accent line shows the grabbable area. */
.highlight-resize-edge {
    position: absolute;
    background: transparent;
    transition: background 0.15s ease;
    pointer-events: auto;
    touch-action: none;
}
.highlight-resize-edge-right {
    top: 8px;
    bottom: 22px; /* leave room for the corner grip */
    right: 0;
    width: 6px;
    cursor: ew-resize;
}
.highlight-resize-edge-bottom {
    left: 8px;
    right: 22px; /* leave room for the corner grip */
    bottom: 0;
    height: 6px;
    cursor: ns-resize;
}
.highlight-card-resizable:hover .highlight-resize-edge-right {
    background: rgba(159,102,45, 0.25);
}
.highlight-card-resizable:hover .highlight-resize-edge-bottom {
    background: rgba(159,102,45, 0.25);
}
.highlight-resize-edge-right:hover {
    background: var(--christman-copper) !important;
}
.highlight-resize-edge-bottom:hover {
    background: var(--christman-copper) !important;
}
:root[data-theme="dark"] .highlight-card-resizable:hover .highlight-resize-edge-right {
    background: rgba(207,164,122, 0.25);
}
:root[data-theme="dark"] .highlight-card-resizable:hover .highlight-resize-edge-bottom {
    background: rgba(207,164,122, 0.25);
}
:root[data-theme="dark"] .highlight-resize-edge-right:hover {
    background: var(--christman-gold) !important;
}
:root[data-theme="dark"] .highlight-resize-edge-bottom:hover {
    background: var(--christman-gold) !important;
}

/* While actively resizing — disable transitions for crisp tracking,
   pop a subtle outline so the user sees what's being resized */
.highlight-card.is-resizing {
    transition: none !important;
    outline: 2px solid var(--christman-copper);
    outline-offset: -1px;
    box-shadow: 0 4px 16px rgba(159,102,45, 0.18);
}
:root[data-theme="dark"] .highlight-card.is-resizing { outline-color: var(--christman-gold); }

/* Print: never show resize affordances on paper */
@media print {
    .highlight-resize-grip,
    .highlight-resize-edge { display: none !important; }
    .highlight-card { min-height: 0 !important; }
}

/* Width label shown in the edit controls ("4/12", "6/12", etc.) */
.highlight-width-label {
    font-size: calc(0.65rem * var(--ti-text-scale, 1));
    font-weight: 700;
    color: var(--christman-copper);
    background: rgba(159,102,45, 0.1);
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 0.03em;
    user-select: none;
}
.highlight-width-reset {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: calc(0.85rem * var(--ti-text-scale, 1));
    padding: 1px 4px;
    line-height: 1;
    color: var(--christman-copper);
    opacity: 0.55;
    border-radius: 3px;
}
.highlight-width-reset:hover { opacity: 1; background: rgba(159,102,45, 0.1); }
:root[data-theme="dark"] .highlight-width-label {
    color: var(--christman-gold);
    background: rgba(207,164,122, 0.15);
}
:root[data-theme="dark"] .highlight-width-reset { color: var(--christman-gold); }

.highlight-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 0;
    position: relative;
    border-radius: 4px;
    border-left: 3px solid var(--christman-copper);
    background: var(--christman-off-white);
    transition: background 0.12s ease;
}
.highlight-card:hover { background: rgba(159,102,45,0.08); }
.highlight-number {
    font-family: 'Oswald', sans-serif;
    font-size: calc(1.1rem * var(--ti-text-scale, 1));
    font-weight: 600;
    color: var(--christman-copper);
    min-width: 20px;
    text-align: center;
    line-height: 1.2;
    flex-shrink: 0;
}
.highlight-text {
    font-size: calc(0.88rem * var(--ti-text-scale, 1));
    font-weight: 450;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
    color: rgba(26,26,26, 0.92);
}
:root[data-theme="dark"] .highlight-text { color: rgba(245,241,236,0.92); }
.highlight-comment {
    white-space: pre-line;
    margin-top: 4px;
    line-height: 1.55;
    color: rgba(26,26,26, 0.85);
}
:root[data-theme="dark"] .highlight-comment { color: rgba(245,241,236,0.82); }

/* ═══════════════════════════════════════
   Presentation Mode — screenshot-friendly styling
   Hides edit controls and bumps font sizes for cleaner exports
   ═══════════════════════════════════════ */
.ti-presentation-mode .highlight-controls,
.ti-presentation-mode .mud-icon-button[aria-label*="edit"],
.ti-presentation-mode .mud-button[href*="/highlights"],
.ti-presentation-mode .kpi-clickable::after,
.ti-presentation-mode button.mud-icon-button[icon*="Edit"] {
    display: none !important;
}
.ti-presentation-mode .copper-bar .mud-icon-button,
.ti-presentation-mode .section-bar .mud-icon-button {
    display: none !important;
}
.ti-presentation-mode .highlight-text { font-size: calc(0.95rem * var(--ti-text-scale, 1)) !important; line-height: 1.55 !important; }
.ti-presentation-mode .highlight-comment { font-size: calc(0.88rem * var(--ti-text-scale, 1)) !important; line-height: 1.6 !important; }
.ti-presentation-mode .highlight-card { padding: 10px 14px !important; }
.ti-presentation-mode .kpi-value { font-size: calc(2.4rem * var(--ti-text-scale, 1)) !important; }
.ti-presentation-mode .kpi-label { font-size: calc(0.8rem * var(--ti-text-scale, 1)) !important; }
.ti-presentation-mode .kpi-sublabel { font-size: calc(0.72rem * var(--ti-text-scale, 1)) !important; }
.ti-presentation-mode .chart-legend-name { font-size: calc(0.74rem * var(--ti-text-scale, 1)) !important; }
.ti-presentation-mode .copper-bar .mud-typography-subtitle1,
.ti-presentation-mode .section-bar .mud-typography-subtitle1 {
    font-size: calc(1.05rem * var(--ti-text-scale, 1)) !important;
}

/* AI rephrase panel inside HighlightDialog */
.ai-rephrase-panel {
    margin-top: 4px;
    margin-bottom: 8px;
}
.ai-rephrase-result {
    border-left: 3px solid var(--christman-teal);
    background: rgba(0,163,180, 0.05);
    padding: 10px 12px;
    border-radius: 4px;
}
.ai-rephrase-suggestion {
    white-space: pre-line;
    font-size: calc(0.92rem * var(--ti-text-scale, 1));
    line-height: 1.5;
    margin-top: 4px;
    color: rgba(26,26,26, 0.92);
}
:root[data-theme="dark"] .ai-rephrase-result {
    background: rgba(95,160,211, 0.08);
    border-left-color: #5FA0D3;
}
:root[data-theme="dark"] .ai-rephrase-suggestion { color: rgba(245,241,236, 0.92); }

/* Sub-item count badge — shows next to a project/app name when it has children */
.sub-item-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 6px 1px 4px;
    border-radius: 10px;
    background: rgba(159,102,45, 0.12);
    color: var(--christman-copper);
    font-size: calc(0.68rem * var(--ti-text-scale, 1));
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
.sub-item-badge .mud-icon-root { color: var(--christman-copper); }
:root[data-theme="dark"] .sub-item-badge {
    background: rgba(207,164,122, 0.15);
    color: var(--christman-gold);
}
:root[data-theme="dark"] .sub-item-badge .mud-icon-root { color: var(--christman-gold); }

/* Dark mode highlights */
:root[data-theme="dark"] .highlight-card { background: rgba(255,255,255,0.04); border-left-color: var(--christman-gold); }
:root[data-theme="dark"] .highlight-card:hover { background: rgba(255,255,255,0.08); }
:root[data-theme="dark"] .highlight-number { color: var(--christman-gold); }

/* Markdown-rendered content inside highlight cards */
.highlight-markdown p {
    margin: 0 0 0.35em 0;
    line-height: inherit;
}
.highlight-markdown p:last-child { margin-bottom: 0; }
/* NUCLEAR: reset every element inside a markdown list so nothing can
   stealth-inject vertical space. We only allow vertical space via the
   explicit gap between <li> siblings (margin-top: 2px). */
.highlight-markdown ul,
.highlight-markdown ol {
    margin-block: 0.25em !important;
    margin-inline: 0 !important;
    padding-inline-start: 1.25em !important;
    line-height: 1.35 !important;
}
.highlight-markdown ul *,
.highlight-markdown ol * {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.35 !important;
    min-height: 0 !important;
}
.highlight-markdown ul li,
.highlight-markdown ol li {
    display: list-item !important;
}
.highlight-markdown ul li + li,
.highlight-markdown ol li + li {
    margin-top: 2px !important;
}
/* Force any <p>, <div>, <span> inside <li> to be inline so they cannot
   start a new block line */
.highlight-markdown li p,
.highlight-markdown li div {
    display: inline !important;
}
/* <br> tags inside list items — turn them off entirely; Markdig sometimes
   emits them from soft-line-break behavior */
.highlight-markdown li br {
    display: none !important;
}
/* Paragraph immediately before a list shouldn't add extra gap */
.highlight-markdown p + ul,
.highlight-markdown p + ol { margin-top: -0.15em !important; }
/* Tighten the gap between a bold headline paragraph and anything following */
.highlight-markdown p {
    margin-bottom: 0.1em !important;
}
/* And when a list follows the headline paragraph, pull it up further so
   the two blocks read as a single unit */
.highlight-markdown p + div,
.highlight-markdown p + ul,
.highlight-markdown p + ol {
    margin-top: 0 !important;
}

/* Collapse-to-headline — show only the first child of .highlight-markdown */
.highlight-card.is-collapsed .highlight-markdown > *:not(:first-child) {
    display: none !important;
}
.highlight-card.is-collapsed .highlight-markdown > p:first-child {
    margin-bottom: 0 !important;
}
/* Hide the 'Read more' toggle when collapsed — it's irrelevant */

/* The collapse button — small, subtle, top-right of the card */
.highlight-collapse-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    background: transparent;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: var(--christman-copper);
    opacity: 0;
    transition: opacity 0.15s ease;
    line-height: 0;
    border-radius: 3px;
}
.highlight-card:hover .highlight-collapse-btn,
.highlight-card.is-collapsed .highlight-collapse-btn {
    opacity: 0.55;
}
.highlight-collapse-btn:hover { opacity: 1 !important; background: rgba(159,102,45, 0.1); }
.highlight-collapse-btn .mud-icon-root { font-size: calc(1rem * var(--ti-text-scale, 1)) !important; color: inherit !important; }
:root[data-theme="dark"] .highlight-collapse-btn { color: var(--christman-gold); }
:root[data-theme="dark"] .highlight-collapse-btn:hover { background: rgba(207,164,122, 0.15); }

/* When the card is collapsed AND there are edit controls, the controls
   should move left to make room for the collapse button staying in the corner */
.highlight-card.is-collapsed .highlight-controls,
.highlight-collapse-btn ~ .highlight-controls {
    right: 28px;
}

.highlight-markdown strong {
    font-weight: 700;
    color: var(--christman-dark-copper);
}
:root[data-theme="dark"] .highlight-markdown strong { color: var(--christman-gold); }
.highlight-markdown em { font-style: italic; }
.highlight-markdown a {
    color: var(--christman-navy);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.highlight-markdown a:hover { color: var(--christman-dark-copper); }
/* First strong at the start of a card acts as a visual headline */
.highlight-markdown > p:first-child strong:first-child {
    display: inline-block;
    font-size: 1.02em;
}

/* Highlight card controls (edit mode) — drag handle + size toggle */
.highlight-controls {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s;
}
.highlight-card:hover .highlight-controls { opacity: 1; }
/* Only the handle is draggable, so card text stays selectable */
.highlight-drag-handle {
    display: inline-flex;
    opacity: 0.45;
    cursor: grab;
}
.highlight-drag-handle:hover { opacity: 0.9; }
.highlight-drag-handle:active { cursor: grabbing; }

/* "New" pill for recently added highlights */
.highlight-new-pill {
    display: inline-block;
    font-size: calc(0.6rem * var(--ti-text-scale, 1));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1px 6px;
    border-radius: 10px;
    vertical-align: middle;
    margin-right: 4px;
    background: var(--christman-copper);
    color: #fff;
}
:root[data-theme="dark"] .highlight-new-pill { background: var(--christman-gold); color: #1A1A1A; }

/* Shown to editors when a Project/App highlight lost its link */
.highlight-unlinked {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: calc(0.68rem * var(--ti-text-scale, 1));
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    margin-right: 4px;
    background: rgba(212,101,10,0.15);
    color: var(--tcc-black);
    cursor: help;
}
:root[data-theme="dark"] .highlight-unlinked { background: rgba(212,101,10,0.25); color: #E9A87E; }

/* "Updated Mmm d" line under the card body */
.highlight-meta {
    font-size: calc(0.65rem * var(--ti-text-scale, 1));
    opacity: 0.5;
    margin-top: 2px;
    line-height: 1.2;
}
.highlight-card.is-collapsed .highlight-meta { display: none; }

/* ═══════════════════════════════════════
   Production Apps Status (Dashboard)
   ═══════════════════════════════════════ */
.app-status-group {
    border-radius: 6px;
    padding: 10px 12px;
    background: rgba(159,102,45, 0.04);
    border-left: 4px solid rgba(159,102,45, 0.5);
    height: 100%;
}
.app-status-group-maintenance { border-left-color: var(--christman-teal); background: rgba(0,163,180, 0.05); }
.app-status-group-atrisk { border-left-color: var(--christman-rust); background: rgba(212,101,10, 0.06); }
.app-status-group-sunset { border-left-color: #E8A84A; background: rgba(232,168,74, 0.06); }
.app-status-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}
.app-status-chip {
    font-size: calc(0.62rem * var(--ti-text-scale, 1));
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.app-status-count {
    font-family: 'Oswald', sans-serif;
    font-size: calc(1.35rem * var(--ti-text-scale, 1));
    font-weight: 600;
    opacity: 0.8;
    line-height: 1;
}
.app-status-hint {
    font-size: calc(0.68rem * var(--ti-text-scale, 1));
    opacity: 0.55;
    margin-bottom: 8px;
}
.app-status-item {
    padding: 6px 8px;
    margin-top: 4px;
    background: rgba(255,255,255,0.6);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
}
.app-status-item:hover { background: rgba(255,255,255,1); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.app-status-item-name {
    font-size: calc(0.84rem * var(--ti-text-scale, 1));
    font-weight: 600;
    line-height: 1.2;
}
.app-status-item-meta {
    font-size: calc(0.68rem * var(--ti-text-scale, 1));
    opacity: 0.6;
    margin-top: 2px;
}
.app-status-item-note {
    font-size: calc(0.72rem * var(--ti-text-scale, 1));
    opacity: 0.8;
    margin-top: 4px;
    line-height: 1.35;
}

/* Dark mode */
:root[data-theme="dark"] .app-status-group { background: rgba(255,255,255,0.03); }
:root[data-theme="dark"] .app-status-group-maintenance { background: rgba(95,160,211, 0.06); }
:root[data-theme="dark"] .app-status-group-atrisk { background: rgba(233,168,126, 0.07); }
:root[data-theme="dark"] .app-status-group-sunset { background: rgba(232,168,74, 0.06); }
:root[data-theme="dark"] .app-status-item { background: rgba(255,255,255,0.05); }
:root[data-theme="dark"] .app-status-item:hover { background: rgba(255,255,255,0.1); }

/* ── Linked highlight badges (project / app) ── */
.highlight-link-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: 700;
    font-size: calc(0.78rem * var(--ti-text-scale, 1));
    padding: 1px 6px;
    border-radius: 4px;
    margin-right: 4px;
    /* Rendered as a <button> that opens the project/app details */
    border: none;
    font-family: inherit;
    line-height: inherit;
    cursor: pointer;
}
.highlight-link-badge:hover { text-decoration: underline; text-underline-offset: 2px; }
.highlight-link-badge:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.highlight-link-project {
    background: rgba(159,102,45,0.12);
    color: var(--christman-copper);
}
.highlight-link-app {
    background: rgba(0,163,180,0.10);
    color: var(--tcc-black);
}
.highlight-status-inline {
    display: inline-block;
    font-size: calc(0.62rem * var(--ti-text-scale, 1));
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
    letter-spacing: 0.02em;
    vertical-align: middle;
    margin-right: 2px;
}
.highlight-status-on-track { background: rgba(26,74,64,0.15); color: #1A4A40; }
.highlight-status-in-production { background: rgba(0,163,180,0.15); color: var(--tcc-black); }
.highlight-status-at-risk { background: rgba(212,101,10,0.15); color: var(--tcc-black); }
.highlight-status-paused { background: rgba(232,168,74,0.15); color: #4D4D4D; }
.highlight-status-closed { background: rgba(153,153,153,0.15); color: #4D4D4D; }
:root[data-theme="dark"] .highlight-link-project { background: rgba(232,168,74,0.15); color: var(--christman-gold); }
:root[data-theme="dark"] .highlight-link-app { background: rgba(0,163,180,0.18); color: #00A3B4; }
:root[data-theme="dark"] .highlight-status-on-track { background: rgba(26,74,64,0.25); color: #8AB0A6; }
:root[data-theme="dark"] .highlight-status-in-production { background: rgba(0,163,180,0.25); color: #00A3B4; }
:root[data-theme="dark"] .highlight-status-at-risk { background: rgba(212,101,10,0.25); color: #E9A87E; }
:root[data-theme="dark"] .highlight-status-paused { background: rgba(232,168,74,0.25); color: #E8A84A; }
:root[data-theme="dark"] .highlight-status-closed { background: rgba(153,153,153,0.25); color: #aaa; }

/* ═══════════════════════════════════════
   Priority Pills (for data grid)
   ═══════════════════════════════════════ */
.priority-pill {
    display: inline-block;
    padding: 1px 10px;
    border-radius: 10px;
    font-size: calc(0.68rem * var(--ti-text-scale, 1));
    font-weight: 600;
    letter-spacing: 0.02em;
}
.priority-pill-high { background: var(--christman-copper); color: white; }
.priority-pill-medium { background: var(--christman-gold); color: white; }
.priority-pill-low { background: var(--christman-teal); color: white; }

/* Badges */
.badge {
    display:inline-flex; align-items:center;
    padding:1px 8px; border-radius:10px;
    font-size: calc(0.65rem * var(--ti-text-scale, 1)); font-weight:600; letter-spacing:0.02em;
}
.badge-outline { border:1px solid rgba(0,0,0,0.12); color:rgba(0,0,0,0.5); }
.badge-score { background:rgba(0,0,0,0.04); color:rgba(0,0,0,0.4); }

/* ═══════════════════════════════════════
   Team Chips
   ═══════════════════════════════════════ */
.team-chip {
    display:inline-flex; align-items:center; gap:6px;
    padding:4px 10px 4px 4px;
    border-radius:20px;
    background: var(--christman-off-white);
    font-size: calc(0.78rem * var(--ti-text-scale, 1)); font-weight:500;
    color: var(--christman-dark-copper);
    transition: box-shadow 0.12s ease;
}
.team-chip:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }

/* Team member cards (dashboard) */
.team-card-full {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.team-card-full:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* ═══════════════════════════════════════
   Status Chip Colors
   ═══════════════════════════════════════ */
/* v16: Timber on track, Teal Patina in production, Oxide at risk, Sandstone paused, Black 70% closed.
   Teal Patina, Oxide and Sandstone are light, so they carry black text for contrast. */
.status-chip-on-track { background-color: var(--tcc-timber) !important; color: #fff !important; }
.status-chip-in-production { background-color: var(--tcc-teal-patina) !important; color: var(--tcc-black) !important; }
.status-chip-at-risk { background-color: var(--tcc-oxide) !important; color: var(--tcc-black) !important; }
.status-chip-paused { background-color: var(--tcc-sandstone) !important; color: var(--tcc-black) !important; }
.status-chip-closed { background-color: var(--tcc-black-70) !important; color: #fff !important; }

/* ═══════════════════════════════════════
   Dark Mode Overrides
   ═══════════════════════════════════════ */
:root[data-theme="dark"] .attention-header { background: rgba(212,101,10,0.2); }
:root[data-theme="dark"] .kpi-copper { background: rgba(159,102,45,0.12); }
:root[data-theme="dark"] .kpi-green { background: rgba(26,74,64,0.12); }
:root[data-theme="dark"] .kpi-rust { background: rgba(212,101,10,0.12); }
:root[data-theme="dark"] .kpi-teal { background: rgba(0,163,180,0.12); }
:root[data-theme="dark"] .priority-bg-high { background: rgba(159,102,45,0.1) !important; }
:root[data-theme="dark"] .priority-bg-medium { background: rgba(207,164,122,0.1) !important; }
:root[data-theme="dark"] .priority-bg-low { background: rgba(0,163,180,0.1) !important; }
:root[data-theme="dark"] .badge-outline { border-color:rgba(255,255,255,0.15); color:rgba(255,255,255,0.45); }
:root[data-theme="dark"] .badge-score { background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.35); }
:root[data-theme="dark"] .team-chip { background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.8); }

/* ═══════════════════════════════════════
   Print Styles — 11×17 Landscape
   ═══════════════════════════════════════ */
@page {
    size: 17in 11in;
    margin: 0.4in 0.45in;
    /* Suppress browser-default header (date + title) and footer (URL + page num)
       in browsers that honor CSS paged-media margin boxes. Some browsers
       only respect the user's print-dialog toggle — advise users to uncheck
       "Headers and footers" in the print dialog's "More settings". */
    @top-left { content: ""; }
    @top-center { content: ""; }
    @top-right { content: ""; }
    @bottom-left { content: ""; }
    @bottom-center { content: ""; }
    @bottom-right { content: ""; }
}

/* Utility classes — visible only on screen or only in print */
.no-print { }
.print-only { display: none; }

@media print {
    /* Force backgrounds and colors to print */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    /* Hide navigation chrome (drawer, app bar, footer) */
    .mud-appbar,
    .mud-drawer,
    .mud-drawer-overlay,
    .mud-overlay,
    .mud-snackbar-provider,
    .mud-dialog-container,
    .mud-popover,
    footer,
    .no-print {
        display: none !important;
    }

    /* Show print-only elements */
    .print-only { display: block !important; }

    /* Force light mode for print — dark mode produces unreadable PDFs */
    body,
    html,
    :root[data-theme="dark"] * {
        background: white !important;
        color: #222 !important;
    }
    /* ...but preserve branded color backgrounds on explicit elements */
    .header-banner,
    .copper-bar,
    .section-bar,
    .section-bar-dark-copper,
    .section-bar-teal,
    .section-bar-green,
    .section-bar-ai,
    .kpi-card,
    .chart-dot,
    .app-status-chip,
    .mud-chip,
    .priority-pill,
    .chart-legend-num,
    .highlight-link-badge,
    .highlight-status-inline {
        /* keep original inline / class backgrounds + white text */
    }
    .header-banner *,
    .copper-bar *,
    .section-bar *,
    .section-bar-dark-copper *,
    .section-bar-teal *,
    .section-bar-green *,
    .section-bar-ai * {
        color: white !important;
    }

    /* Remove layout offset from drawer */
    .mud-main-content {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
    .mud-layout { display: block !important; }
    .mud-drawer-open-responsive-lg-left + .mud-main-content,
    .mud-drawer-open-mini-left + .mud-main-content {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* Container fills the page */
    .mud-container {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Remove shadows and transitions */
    .mud-paper {
        box-shadow: none !important;
        transition: none !important;
        border: 1px solid #ddd !important;
    }

    /* Header banner — compact */
    .header-banner {
        padding: 8px 14px !important;
        border-radius: 3px !important;
        margin-bottom: 6px !important;
        page-break-after: avoid;
        page-break-inside: avoid;
    }
    .header-banner .mud-typography-h4 {
        font-size: calc(1.1rem * var(--ti-text-scale, 1)) !important;
    }
    .header-banner .mud-typography-body2 {
        font-size: calc(0.68rem * var(--ti-text-scale, 1)) !important;
        margin-top: 3px !important;
    }

    /* KPI row — keep together, compact */
    .mud-grid:has(.kpi-card) { page-break-inside: avoid; }
    .kpi-card {
        padding: 6px 4px 4px !important;
        border-radius: 3px !important;
        min-height: 0 !important;
    }
    .kpi-card:hover { transform: none !important; box-shadow: none !important; }
    .kpi-clickable::after { display: none !important; }
    .kpi-alert .kpi-value { animation: none !important; }
    .kpi-value { font-size: calc(1.7rem * var(--ti-text-scale, 1)) !important; line-height: 1 !important; }
    .kpi-label { font-size: calc(0.62rem * var(--ti-text-scale, 1)) !important; }
    .kpi-sublabel { font-size: calc(0.55rem * var(--ti-text-scale, 1)) !important; }

    /* Section bars — compact */
    .copper-bar, .section-bar {
        padding: 3px 10px !important;
        border-radius: 3px 3px 0 0 !important;
    }
    .copper-bar .mud-typography-subtitle1,
    .section-bar .mud-typography-subtitle1 {
        font-size: calc(0.76rem * var(--ti-text-scale, 1)) !important;
    }

    /* Highlight cards */
    .highlight-card {
        padding: 3px 6px !important;
        margin-bottom: 2px !important;
        page-break-inside: avoid;
    }
    .highlight-number { font-size: calc(0.8rem * var(--ti-text-scale, 1)) !important; }
    .highlight-text { font-size: calc(0.66rem * var(--ti-text-scale, 1)) !important; line-height: 1.28 !important; }
    .highlight-comment { font-size: calc(0.64rem * var(--ti-text-scale, 1)) !important; line-height: 1.3 !important; }

    /* Impact/Effort Matrix — keep together */
    .chart-dot-tooltip { display: none !important; }
    .chart-dot { cursor: default !important; }
    .chart-dot:hover { transform: translate(-50%, -50%) !important; }
    .chart-footer { font-size: calc(0.55rem * var(--ti-text-scale, 1)) !important; }
    .chart-legend-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 1px 6px !important; }
    .chart-legend-name { font-size: calc(0.62rem * var(--ti-text-scale, 1)) !important; }
    .chart-legend-num { width: 14px !important; height: 14px !important; font-size: calc(0.5rem * var(--ti-text-scale, 1)) !important; }

    /* ── Production Apps Status section (print) ── */
    .app-status-group {
        padding: 6px 8px !important;
        page-break-inside: avoid;
    }
    .app-status-count { font-size: calc(1.1rem * var(--ti-text-scale, 1)) !important; }
    .app-status-hint { font-size: calc(0.62rem * var(--ti-text-scale, 1)) !important; }
    .app-status-chip { font-size: calc(0.55rem * var(--ti-text-scale, 1)) !important; padding: 1px 6px !important; }
    .app-status-item {
        padding: 3px 6px !important;
        margin-top: 3px !important;
        background: rgba(0,0,0,0.02) !important;
        box-shadow: none !important;
    }
    .app-status-item-name { font-size: calc(0.74rem * var(--ti-text-scale, 1)) !important; }
    .app-status-item-meta { font-size: calc(0.6rem * var(--ti-text-scale, 1)) !important; }
    .app-status-item-note { font-size: calc(0.62rem * var(--ti-text-scale, 1)) !important; line-height: 1.28 !important; }

    /* Data grids — compact print */
    .mud-table-root { font-size: calc(0.68rem * var(--ti-text-scale, 1)) !important; }
    .mud-table-cell { padding: 2px 6px !important; }
    .mud-table-head .mud-table-cell { padding: 3px 6px !important; font-size: calc(0.62rem * var(--ti-text-scale, 1)) !important; }
    .mud-table-row:hover { background: transparent !important; }
    .mud-table-sort-label .mud-icon-root { display: none !important; }
    /* Tabs — show all panels, hide tab header (prints both Projects + Apps) */
    .mud-tabs-header { display: none !important; }
    .mud-tabs-panels > * { display: block !important; }
    .mud-tab-panel { display: block !important; padding: 0 !important; }
    div[style*="display: none"].mud-tabpanel,
    div[style*="display:none"].mud-tabpanel {
        display: block !important;
    }

    /* AI Strategy section */
    .section-bar-ai { padding: 3px 10px !important; }

    /* Team cards — smaller, keep section intact */
    .team-card-full {
        padding: 4px 8px !important;
        gap: 6px !important;
        page-break-inside: avoid;
    }
    .team-card-full:hover { transform: none !important; box-shadow: none !important; }
    .team-card-full .mud-avatar { width: 30px !important; height: 30px !important; }

    /* MudGrid spacing — tighter */
    .mud-grid { margin: -3px !important; }
    .mud-grid > .mud-grid-item { padding: 3px !important; }

    /* General spacing overrides */
    .mb-3, .mb-4 { margin-bottom: 5px !important; }
    .pa-3, .pa-4 { padding: 5px !important; }
    .py-8 { padding-top: 0 !important; padding-bottom: 0 !important; }
    .mt-8, .mt-12 { margin-top: 0 !important; }

    /* Status chips — print-friendly */
    .mud-chip { border-radius: 8px !important; font-weight: 600 !important; }

    /* Keep MudPapers together when possible, but allow breaking between sections */
    .mud-paper { page-break-inside: avoid; }

    /* Priority pills keep color */
    .priority-pill { font-size: calc(0.6rem * var(--ti-text-scale, 1)) !important; }

    /* Progress bars */
    .mud-progress-linear { height: 4px !important; }

    /* MudBlazor body padding removal */
    body {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Don't force page breaks — let the content flow naturally
       and only break where necessary. Add hints to avoid orphaned
       headers by keeping the next 2-3 elements together. */
    .copper-bar, .section-bar { page-break-after: avoid; }

    /* Hide dialog / modal artifacts that shouldn't print */
    .mud-popover-provider,
    .mud-snackbar,
    .mud-tooltip { display: none !important; }

    /* Reset any opacity on icons that might be too faint for print */
    .mud-icon-root { opacity: 1 !important; }
}