/* Licenses */
#nxctl-portal .nc-license-key { font-family:var(--nc-font-mono);font-size:var(--nc-fs-xs);letter-spacing:.05em;background:var(--nc-surface2);padding:2px 6px;border-radius:var(--nc-radius-sm);color:var(--nc-text-2);cursor:pointer; }
#nxctl-portal .nc-license-key:hover { background:var(--nc-accent-dim);color:var(--nc-accent); }

/* ── Redesigned license list: a fixed grid of columns so a long key, a long
   customer name, or a longer plugin name is truncated in place instead of
   changing that row's height or shape relative to the rows around it. ── */
#nxctl-portal .nc-lic-grid-cols {
    grid-template-columns: 26px minmax(0,1.6fr) minmax(0,1fr) minmax(0,1.3fr) 96px 64px minmax(150px,auto);
}
#nxctl-portal .nc-lic-head {
    display: grid;
    align-items: center;
    gap: var(--nc-space-3);
    padding: 0 var(--nc-space-5) var(--nc-space-2);
    font-size: var(--nc-fs-xs);
    color: var(--nc-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
#nxctl-portal .nc-lic-row {
    display: grid;
    align-items: center;
    gap: var(--nc-space-3);
    background: var(--nc-surface);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-lg);
    padding: var(--nc-space-3) var(--nc-space-5);
    transition: background var(--nc-dur), box-shadow var(--nc-dur);
}
#nxctl-portal .nc-lic-row:hover { box-shadow: var(--nc-shadow-sm); background: var(--nc-hover); }
#nxctl-portal .nc-lic-row--selected { border-color: var(--nc-accent); }

#nxctl-portal .nc-lic-row__checkbox { flex-shrink: 0; display: flex; align-items: center; }
#nxctl-portal .nc-lic-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--nc-accent);
    appearance: auto;
    -webkit-appearance: checkbox;
    opacity: 1;
    visibility: visible;
    display: inline-block;
    background: initial;
    border: initial;
}
#nxctl-portal .nc-lic-row__key-col { min-width: 0; }
#nxctl-portal .nc-lic-row__key { min-width: 0; display: flex; align-items: center; gap: 6px; }
#nxctl-portal .nc-lic-row__key .nc-license-key { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: inline-block; }
#nxctl-portal .nc-lic-row__badges { margin-top: 4px; display: flex; gap: 4px; flex-wrap: wrap; }
#nxctl-portal .nc-lic-row__cell { min-width: 0; font-size: var(--nc-fs-base); color: var(--nc-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#nxctl-portal .nc-lic-row__customer-sub { font-size: var(--nc-fs-sm); color: var(--nc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#nxctl-portal .nc-lic-row__actions { display: flex; gap: 5px; align-items: center; justify-content: flex-end; flex-wrap: nowrap; }
#nxctl-portal .nc-lic-row .nc-cred-panel { grid-column: 1 / -1; margin-top: var(--nc-space-2); }

/* Duplicate, labeled meta block shown only on narrow viewports, kept out of
   the way on desktop where the grid columns above already show this. */
#nxctl-portal .nc-lic-row__meta-mobile { display: none; }
#nxctl-portal .nc-lic-row__meta-label { font-size: 10px; color: var(--nc-muted); text-transform: uppercase; letter-spacing: .03em; }

/* Below ~760px a six column grid has no room left to truncate gracefully,
   so licenses switch to a stacked card with a fixed two column meta grid
   instead, keeping the same "structure never changes shape" principle. */
@media (max-width: 760px) {
    #nxctl-portal .nc-lic-head { display: none; }
    #nxctl-portal .nc-lic-row { display: flex; flex-wrap: wrap; }
    #nxctl-portal .nc-lic-row__desktop-cell { display: none; }
    #nxctl-portal .nc-lic-row__key-col { flex: 1 1 100%; }
    #nxctl-portal .nc-lic-row__meta-mobile {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--nc-space-2) var(--nc-space-3);
        flex: 1 1 100%;
        margin-top: var(--nc-space-2);
    }
    #nxctl-portal .nc-lic-row__meta-mobile .nc-lic-row__cell,
    #nxctl-portal .nc-lic-row__meta-mobile .nc-lic-row__customer-sub { font-size: var(--nc-fs-sm); white-space: normal; }
    #nxctl-portal .nc-lic-row__actions { flex: 1 1 100%; justify-content: flex-start; flex-wrap: wrap; margin-top: var(--nc-space-2); }
    #nxctl-portal .nc-lic-row__actions .nc-btn { flex: 1; justify-content: center; }
    #nxctl-portal .nc-lic-row .nc-cred-panel { flex: 1 1 100%; }
}