/* =====================================================================
   Colman Design System — Components
   Header, Footer summary bar, Dashboard widgets, shared primitives.
   Bootstrap 5 compatible. Dark-only navy palette.
   ===================================================================== */

/* =====================================================================
   BRAND LOCKUP
   ===================================================================== */
.col-brand {
    display: inline-flex;
    align-items: flex-end;  /* baseline de COLMAN aligne avec le bas du mark */
    gap: var(--space-sm);
    text-decoration: none;
    color: inherit;
    user-select: none;
}
.col-brand-mark {
    height: 36px;
    width: auto;
    flex-shrink: 0;
    display: block;
    filter:
        drop-shadow(0 0 4px  rgba(61, 187, 255, .95))
        drop-shadow(0 0 10px rgba(61, 187, 255, .65))
        drop-shadow(0 0 22px rgba(61, 187, 255, .35));
}
.col-brand-wordmark {
    font-weight: var(--fw-bold);
    font-size: 1.55rem;
    letter-spacing: var(--tracking-wide);
    line-height: 1;
    color: var(--col-fg-1);
    white-space: nowrap;
}
.col-brand-wordmark .wm-accent { color: var(--col-accent); }
.col-brand-sub {
    display: block;
    font-size: .55rem;
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-widest);
    color: var(--col-fg-3);
    text-transform: uppercase;
    margin-top: 2px;
}

/* =====================================================================
   HEADER / TOP BAR
   ===================================================================== */
.col-header {
    height: var(--header-height);
    background: var(--col-bg-1);
    border-bottom: 1px solid var(--col-border);
    display: flex;
    align-items: stretch;
    padding: 0 var(--space-lg);
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: var(--shadow-inset-hair), 0 1px 0 rgba(0, 0, 0, .3);
}
.col-header-inner {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;
}
.col-header-brand {
    display: flex;
    align-items: center;
    padding-right: var(--space-lg);
    border-right: 1px solid var(--col-divider);
    height: 100%;
}

/* Primary nav */
.col-nav {
    display: flex;
    align-items: stretch;
    gap: 2px;
    height: 100%;
    flex: 1;
    min-width: 0;
    overflow-x: clip;   /* clip x without forcing overflow-y:auto — lets dropdowns show below */
    overflow-y: visible;
    scrollbar-width: none;
}
.col-nav::-webkit-scrollbar { display: none; }

.col-nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0 var(--space-md);
    color: var(--col-fg-2);
    font-size: var(--font-base);
    font-weight: var(--fw-medium);
    text-decoration: none;
    border-radius: var(--radius-sm);
    margin: 8px 0;
    position: relative;
    white-space: nowrap;
    transition: color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
}
.col-nav-link:hover {
    color: var(--col-fg-1);
    background: var(--col-bg-2);
    text-decoration: none;
}
.col-nav-link.active {
    color: var(--brand-blue);
    background: linear-gradient(180deg,
        rgba(61, 187, 255, .14) 0%,
        rgba(61, 187, 255, .04) 100%);
    text-shadow:
        0 0 6px rgba(61, 187, 255, .75),
        0 0 14px rgba(61, 187, 255, .35);
}
.col-nav-link.active::after {
    content: "";
    position: absolute;
    left: var(--space-md);
    right: var(--space-md);
    bottom: -9px;
    height: 2px;
    background: var(--brand-blue);
    border-radius: 2px 2px 0 0;
    box-shadow:
        0 0 4px  rgba(61, 187, 255, 1),
        0 0 10px rgba(61, 187, 255, .8),
        0 0 22px rgba(61, 187, 255, .5),
        0 0 40px rgba(61, 187, 255, .28);
}
.col-nav-icon {
    width: 16px;
    height: 16px;
    opacity: .8;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}
.col-nav-link.active .col-nav-icon {
    opacity: 1;
    color: var(--brand-blue);
    filter: drop-shadow(0 0 4px rgba(61, 187, 255, .8));
}
.col-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: .65rem;
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    color: var(--col-fg-inverse);
    background: var(--col-accent);
    border-radius: var(--radius-pill);
    line-height: 1;
}
.col-nav-badge.is-warning { background: var(--col-warning); }
.col-nav-badge.is-danger  { background: var(--col-danger); }

/* Disabled nav link */
.col-nav-link.is-disabled {
    opacity: .35;
    cursor: not-allowed;
    pointer-events: none;
}

/* Nav dropdown */
.col-nav-dropdown {
    display: flex;
    align-items: stretch;
    margin: 8px 0;          /* same vertical rhythm as col-nav-link */
    position: relative;
}
.col-nav-dropdown > button.col-nav-link {
    margin: 0;              /* parent handles vertical margin */
    height: 100%;
    background: none;
    border: none;
    cursor: pointer;
}
.col-nav-dropdown .dropdown-toggle::after { display: none; } /* suppress Bootstrap caret */
.col-nav-caret {
    width: 14px;
    height: 14px;
    opacity: .6;
    margin-left: 2px;
}
.col-nav-dropdown .dropdown-menu {
    margin-top: 0;
}

/* Right cluster */
.col-header-tools {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
}

/* Icon button */
.col-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--col-fg-2);
    border: 1px solid transparent;
    cursor: pointer;
    position: relative;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}
.col-icon-btn:hover {
    background: var(--col-bg-2);
    color: var(--col-fg-1);
}
.col-icon-btn.is-active {
    background: var(--col-bg-3);
    color: var(--col-accent);
}
.col-icon-btn svg { width: 16px; height: 16px; }
.col-icon-btn-dot {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--col-danger);
    border: 2px solid var(--col-bg-1);
}

/* Role pill */
.col-role-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    font-size: var(--font-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--col-accent);
    background: var(--col-accent-soft);
    border-radius: var(--radius-sm);
    line-height: 1;
}
.col-role-pill.is-reader {
    color: var(--col-fg-2);
    background: var(--col-bg-3);
}
.col-role-pill::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

/* User menu trigger */
.col-user-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 4px var(--space-sm) 4px 4px;
    background: var(--col-bg-2);
    border: 1px solid var(--col-border);
    border-radius: var(--radius-pill);
    color: var(--col-fg-1);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out);
    text-decoration: none;
}
.col-user-chip:hover {
    border-color: var(--col-border-strong);
    color: var(--col-fg-1);
    text-decoration: none;
}
.col-user-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--col-accent), #2d6fb8);
    color: var(--col-fg-inverse);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-sm);
    font-weight: var(--fw-bold);
    flex-shrink: 0;
}
.col-user-name {
    font-size: var(--font-base);
    font-weight: var(--fw-medium);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =====================================================================
   FOOTER SUMMARY BAR
   ===================================================================== */
.col-footer-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--footer-height);
    background: linear-gradient(180deg, #242441 0%, #1f1f38 100%);
    border-top: 1px solid rgba(61, 187, 255, .22);
    display: flex;
    align-items: center;
    padding: 0 var(--space-lg);
    font-size: var(--font-base);
    z-index: 1020;
    box-shadow:
        0 -1px 0 rgba(61, 187, 255, .08),
        0 -6px 18px rgba(0, 0, 0, .35);
}
.col-footer-inner {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;
    flex-wrap: wrap;
}
.col-footer-group {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding-right: var(--space-lg);
    border-right: 1px solid var(--col-divider);
}
.col-footer-group:last-of-type,
.col-footer-group.is-spacer { border-right: none; }
.col-footer-group.is-spacer { margin-left: auto; }

.col-footer-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}
.col-footer-stat-label {
    font-size: var(--font-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--col-fg-2);
}
.col-footer-stat-value {
    font-size: var(--font-md);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    color: #ffffff;
}
.col-footer-stat-value.is-accent   { color: var(--brand-blue);   text-shadow: 0 0 8px rgba(61, 187, 255, .35); }
.col-footer-stat-value.is-success  { color: var(--brand-green);  text-shadow: 0 0 8px rgba(54, 226, 124, .35); }
.col-footer-stat-value.is-warning  { color: var(--brand-orange); text-shadow: 0 0 8px rgba(255, 138, 61, .35); }
.col-footer-stat-value.is-danger   { color: var(--brand-red);    text-shadow: 0 0 8px rgba(255, 77, 109, .4); }
.col-footer-stat-hint {
    font-size: var(--font-sm);
    color: var(--col-fg-2);
    font-variant-numeric: tabular-nums;
}

/* Hidden on dashboard */
body[data-screen="dashboard"] .col-footer-bar { display: none; }

/* =====================================================================
   BUTTONS
   ===================================================================== */
.col-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 var(--space-md);
    font-size: var(--font-base);
    font-weight: var(--fw-medium);
    line-height: 1;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    background: transparent;
    color: var(--col-fg-1);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition:
        background var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out),
        transform var(--dur-fast) var(--ease-out);
}
.col-btn:active { transform: translateY(1px); }
.col-btn:hover { text-decoration: none; }

.col-btn-primary {
    background: var(--brand-blue-deep);
    color: #eaf7ff;
    border-color: var(--brand-blue);
    text-shadow: 0 0 8px rgba(61, 187, 255, .55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .22),
        inset 0 0 0 1px rgba(124, 210, 255, .35),
        0 0 0 1px rgba(61, 187, 255, .25),
        0 0 10px rgba(61, 187, 255, .45),
        0 0 22px rgba(61, 187, 255, .25);
    transition:
        background var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-fast) var(--ease-out),
        transform var(--dur-fast) var(--ease-out);
}
.col-btn-primary:hover {
    background: var(--brand-blue);
    border-color: var(--brand-blue-strong);
    color: #f3fbff;
    text-shadow: 0 0 10px rgba(124, 210, 255, .9);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .32),
        inset 0 0 0 1px rgba(124, 210, 255, .55),
        0 0 0 1px rgba(61, 187, 255, .4),
        0 0 14px rgba(61, 187, 255, .7),
        0 0 32px rgba(61, 187, 255, .38);
}
.col-btn-primary:active {
    background: var(--brand-blue-deep);
    border-color: var(--brand-blue-deep);
    text-shadow: 0 0 6px rgba(61, 187, 255, .4);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, .35),
        0 0 0 1px rgba(61, 187, 255, .3),
        0 0 8px rgba(61, 187, 255, .3);
}
.col-btn-primary:disabled,
.col-btn-primary[aria-disabled="true"] {
    background: var(--col-bg-3);
    border-color: var(--col-border);
    color: var(--col-fg-4);
    text-shadow: none;
    box-shadow: none;
    cursor: not-allowed;
}

.col-btn-secondary {
    background: var(--col-bg-2);
    border-color: var(--col-border);
    color: var(--col-fg-1);
}
.col-btn-secondary:hover { background: var(--col-bg-3); border-color: var(--col-border-strong); color: var(--col-fg-1); }

.col-btn-ghost { color: var(--col-fg-2); }
.col-btn-ghost:hover { background: var(--col-bg-2); color: var(--col-fg-1); }

.col-btn-danger { background: var(--col-danger-soft); color: var(--col-danger); border-color: transparent; }
.col-btn-danger:hover { background: var(--col-danger); color: #fff; }

.col-btn-sm { height: 26px; padding: 0 var(--space-sm); font-size: var(--font-sm); }
.col-btn-lg { height: 38px; padding: 0 var(--space-lg); font-size: var(--font-md); }

.col-btn svg, .col-btn .col-ico { width: 14px; height: 14px; }

/* =====================================================================
   BADGES
   ===================================================================== */
.col-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-wide);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    line-height: 1.4;
    white-space: nowrap;
    text-transform: uppercase;
}
.col-badge-col  { background: var(--status-col-bg);  color: var(--status-col-text); }
.col-badge-stk  { background: var(--status-stk-bg);  color: var(--status-stk-text); }
.col-badge-tri  { background: var(--status-tri-bg);  color: var(--status-tri-text); }
.col-badge-list { background: var(--status-list-bg); color: var(--status-list-text); }
.col-badge-vte  { background: var(--status-vte-bg);  color: var(--status-vte-text); }
.col-badge-sold { background: var(--status-sold-bg); color: var(--status-sold-text); }

.col-badge-accent  { background: var(--col-accent-soft);  color: var(--col-accent); }
.col-badge-success { background: var(--col-success-soft); color: var(--col-success); }
.col-badge-warning { background: var(--col-warning-soft); color: var(--col-warning); }
.col-badge-danger  { background: var(--col-danger-soft);  color: var(--col-danger); }
.col-badge-neutral { background: var(--col-bg-3);         color: var(--col-fg-2); }

/* Rarity dot */
.col-rarity-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    vertical-align: middle;
}
.col-rarity-c { background: var(--rarity-common); }
.col-rarity-u { background: var(--rarity-uncommon); }
.col-rarity-r { background: var(--rarity-rare); }
.col-rarity-m { background: var(--rarity-mythic); }

/* =====================================================================
   WIDGET — base card
   ===================================================================== */
.col-widget {
    background: var(--col-bg-2);
    border: 1px solid rgba(61, 187, 255, .35);
    border-radius: var(--radius-lg);
    box-shadow:
        0 0 0 1px rgba(61, 187, 255, .10),
        0 0 12px rgba(61, 187, 255, .14),
        0 0 28px rgba(61, 187, 255, .07),
        var(--shadow-xs),
        var(--shadow-inset-hair);
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}
.col-widget:hover {
    border-color: rgba(61, 187, 255, .55);
    box-shadow:
        0 0 0 1px rgba(61, 187, 255, .18),
        0 0 16px rgba(61, 187, 255, .22),
        0 0 36px rgba(61, 187, 255, .12),
        var(--shadow-xs),
        var(--shadow-inset-hair);
}
.col-widget.is-loading { opacity: .7; }

.col-widget-head {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--col-divider);
    min-height: 44px;
}
.col-widget-head-icon {
    width: 20px;
    height: 20px;
    color: var(--col-fg-3);
    flex-shrink: 0;
}
.col-widget-title {
    font-size: var(--font-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-wide);
    color: var(--col-fg-2);
    text-transform: uppercase;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.col-widget-head-meta {
    font-size: var(--font-xs);
    color: var(--col-fg-3);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.col-widget-head-action {
    color: var(--col-fg-3);
    font-size: var(--font-sm);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    transition: background var(--dur-fast), color var(--dur-fast);
}
.col-widget-head-action:hover { background: var(--col-bg-3); color: var(--col-accent); }
.col-widget-head-action svg { width: 12px; height: 12px; }

.col-widget-body {
    padding: var(--space-lg);
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}
.col-widget-body.is-compact { padding: var(--space-md); }
.col-widget-body.is-flush   { padding: 0; }

.col-widget-foot {
    padding: var(--space-sm) var(--space-lg);
    border-top: 1px solid var(--col-divider);
    font-size: var(--font-sm);
    color: var(--col-fg-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.col-widget-foot a { color: var(--col-accent); text-decoration: none; }
.col-widget-foot a:hover { color: var(--col-accent-hover); }

.col-widget.is-urgent { border-color: rgba(239, 90, 111, .35); }
.col-widget.is-urgent .col-widget-head { background: linear-gradient(180deg, var(--col-danger-soft), transparent); }
.col-widget.is-warning { border-color: rgba(245, 176, 65, .28); }

/* =====================================================================
   WIDGET GRID
   ===================================================================== */
.col-widget-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 220px;
    gap: var(--dashboard-gutter);
    align-items: stretch;
    position: relative;
}
.col-widget-grid > .col-widget { min-height: 0; }

.wg-s               { grid-column: span 3; }
.wg-m               { grid-column: span 4; }
.wg-l               { grid-column: span 6; }
.wg-xl              { grid-column: span 8; }
.wg-full            { grid-column: span 12; }
.wg-tall            { grid-row: span 2; }

@media (max-width: 1440px) {
    .col-widget-grid { grid-auto-rows: 200px; }
    .wg-s           { grid-column: span 4; }
    .wg-m, .wg-l    { grid-column: span 6; }
    .wg-xl          { grid-column: span 12; }
}
@media (max-width: 1024px) {
    .col-widget-grid { grid-auto-rows: auto; }
    .wg-s, .wg-m, .wg-l, .wg-xl { grid-column: span 12; }
}

/* Section label between widget rows */
.col-widget-section {
    grid-column: span 12;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin: var(--space-sm) 0 calc(-1 * var(--space-sm));
    padding-top: var(--space-md);
}
.col-widget-section-label {
    font-size: var(--font-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--col-fg-3);
}
.col-widget-section-rule { flex: 1; height: 1px; background: var(--col-divider); }
.col-widget-section-count { font-size: var(--font-xs); color: var(--col-fg-4); font-variant-numeric: tabular-nums; }

/* =====================================================================
   WIDGET CONTENT — KPI
   ===================================================================== */
.col-kpi-block { display: flex; flex-direction: column; gap: var(--space-sm); }
.col-kpi-main { display: flex; align-items: baseline; gap: var(--space-sm); }
.col-kpi-main .unit { font-size: var(--font-lg); font-weight: var(--fw-medium); color: var(--col-fg-2); }

.col-kpi-delta {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: var(--font-sm);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}
.col-kpi-delta.is-up   { color: var(--col-success); background: var(--col-success-soft); }
.col-kpi-delta.is-down { color: var(--col-danger);  background: var(--col-danger-soft); }
.col-kpi-delta.is-flat { color: var(--col-fg-3);    background: var(--col-bg-3); }
.col-kpi-delta svg { width: 10px; height: 10px; }

.col-kpi-breakdown {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding-top: var(--space-sm);
    border-top: 1px dashed var(--col-divider);
    font-size: var(--font-sm);
    color: var(--col-fg-2);
    flex-wrap: wrap;
}
.col-kpi-breakdown-item { display: inline-flex; align-items: baseline; gap: 6px; }
.col-kpi-breakdown-item strong { color: var(--col-fg-1); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.col-kpi-breakdown-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--col-fg-3); }

/* =====================================================================
   WIDGET CONTENT — Progress bars
   ===================================================================== */
.col-progress {
    height: 6px;
    background: var(--col-bg-3);
    border-radius: var(--radius-pill);
    overflow: hidden;
    position: relative;
}
.col-progress-fill {
    height: 100%;
    background: var(--col-accent);
    border-radius: inherit;
    transition: width var(--dur-slow) var(--ease-out);
}
.col-progress-fill.is-success { background: var(--col-success); }
.col-progress-fill.is-warning { background: var(--col-warning); }
.col-progress-fill.is-danger  { background: var(--col-danger); }

.col-progress-row {
    display: grid;
    grid-template-columns: 18px 1fr auto auto;
    align-items: center;
    gap: var(--space-sm);
    padding: 6px 0;
    font-size: var(--font-base);
}
.col-progress-row + .col-progress-row { border-top: 1px dashed var(--col-divider); }
.col-progress-row-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.col-progress-row-label .code { font-size: var(--font-xs); color: var(--col-fg-3); margin-left: 6px; text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.col-progress-row-count { font-variant-numeric: tabular-nums; color: var(--col-fg-2); font-size: var(--font-sm); }
.col-progress-row-pct  { font-variant-numeric: tabular-nums; color: var(--col-fg-1); font-weight: var(--fw-semibold); min-width: 40px; text-align: right; }
.col-progress-row-bar  { grid-column: 2 / -1; margin-top: -4px; }

/* =====================================================================
   WIDGET CONTENT — List rows
   ===================================================================== */
.col-list { display: flex; flex-direction: column; }
.col-list-row {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: var(--space-md);
    align-items: center;
    padding: var(--space-sm) var(--space-sm);
    min-width: 0;
    text-decoration: none;
    color: inherit;
    transition: background var(--dur-fast) var(--ease-out);
    border-radius: var(--radius-sm);
}
.col-list-row + .col-list-row { border-top: 1px solid var(--col-divider); }
.col-list-row:hover { background: var(--col-bg-3); text-decoration: none; color: inherit; }

.col-list-thumb {
    width: 36px;
    height: 50px;
    border-radius: var(--radius-xs);
    object-fit: cover;
    background: var(--col-bg-3);
    box-shadow: var(--shadow-xs);
}
.col-list-main { min-width: 0; }
.col-list-title { font-size: var(--font-base); font-weight: var(--fw-medium); color: var(--col-fg-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; }
.col-list-sub { font-size: var(--font-sm); color: var(--col-fg-3); display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.col-list-end { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; flex-shrink: 0; }
.col-list-end-main { font-size: var(--font-base); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; color: var(--col-fg-1); }
.col-list-end-sub  { font-size: var(--font-xs); color: var(--col-fg-3); font-variant-numeric: tabular-nums; }

/* =====================================================================
   WIDGET CONTENT — Alert stack (spikes)
   ===================================================================== */
.col-alert-stack { display: flex; flex-direction: column; gap: var(--space-sm); }
.col-alert-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--col-bg-1);
    border: 1px solid var(--col-divider);
    border-radius: var(--radius-md);
}
.col-alert-row.is-l1 { border-left: 3px solid var(--col-danger); }
.col-alert-row.is-l2 { border-left: 3px solid var(--col-warning); }
.col-alert-row-count { font-size: var(--font-xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; color: var(--col-fg-1); min-width: 36px; }
.col-alert-row-label { font-size: var(--font-sm); color: var(--col-fg-2); flex: 1; }
.col-alert-row-label strong { display: block; font-size: var(--font-base); font-weight: var(--fw-semibold); color: var(--col-fg-1); }

/* =====================================================================
   WIDGET CONTENT — Status indicator (sync)
   ===================================================================== */
.col-status-row { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) 0; }
.col-status-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.col-status-dot.is-ok      { background: var(--col-success); box-shadow: 0 0 0 4px var(--col-success-soft); }
.col-status-dot.is-stale   { background: var(--col-warning); box-shadow: 0 0 0 4px var(--col-warning-soft); }
.col-status-dot.is-error   { background: var(--col-danger);  box-shadow: 0 0 0 4px var(--col-danger-soft); }
.col-status-dot.is-running { background: var(--col-accent);  box-shadow: 0 0 0 4px var(--col-accent-soft); animation: pulse 1.4s ease-in-out infinite; }
.col-status-main { flex: 1; min-width: 0; }
.col-status-label { font-size: var(--font-base); color: var(--col-fg-1); font-weight: var(--fw-medium); }
.col-status-ago   { font-size: var(--font-sm); color: var(--col-fg-3); font-variant-numeric: tabular-nums; margin-top: 2px; }

@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* =====================================================================
   WIDGET CONTENT — Chart area
   ===================================================================== */
.col-chart-frame { position: relative; height: 100%; min-height: 200px; padding: var(--space-sm) 0; }
.col-chart-controls {
    display: inline-flex;
    background: var(--col-bg-1);
    border: 1px solid var(--col-border);
    border-radius: var(--radius-md);
    padding: 2px;
    gap: 2px;
}
.col-chart-controls button {
    background: transparent;
    border: none;
    color: var(--col-fg-3);
    font-size: var(--font-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--dur-fast), color var(--dur-fast);
}
.col-chart-controls button:hover { color: var(--col-fg-1); }
.col-chart-controls button.is-active { background: var(--col-accent-soft); color: var(--col-accent); }

/* =====================================================================
   WIDGET — Empty state
   ===================================================================== */
.col-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-lg);
    color: var(--col-fg-3);
    text-align: center;
}
.col-empty-icon { width: 32px; height: 32px; opacity: .5; }
.col-empty-title { font-size: var(--font-base); color: var(--col-fg-2); font-weight: var(--fw-medium); }
.col-empty-hint  { font-size: var(--font-sm); color: var(--col-fg-3); }

/* =====================================================================
   MTG mana symbol chips
   ===================================================================== */
.col-mana-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    font-size: 9px;
    font-weight: var(--fw-bold);
    color: #0d0d18;
    flex-shrink: 0;
}
.col-mana-w { background: var(--mtg-w); }
.col-mana-u { background: var(--mtg-u); color: #fff; }
.col-mana-b { background: #3a3a5c; color: #fff; }
.col-mana-r { background: var(--mtg-r); color: #fff; }
.col-mana-g { background: var(--mtg-g); }
.col-mana-c { background: var(--mtg-c); color: #0d0d18; }

/* =====================================================================
   DIVIDERS
   ===================================================================== */
.col-divider-rule         { height: 1px; background: var(--col-divider); margin: var(--space-md) 0; }
.col-divider-rule-dashed  { height: 0; border-top: 1px dashed var(--col-divider); margin: var(--space-md) 0; }

/* =====================================================================
   INLINE ICON (feather-like stroke system)
   ===================================================================== */
.col-ico {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}
.col-ico.is-lg { width: 20px; height: 20px; }
.col-ico.is-sm { width: 14px; height: 14px; }