/* admin-licenses.css — the licenses admin (AD-LIC, WF-45 / WF-46): the license
   list and issuing, one license's page, and the activity flags queue.
   Token-bound only (F-R01). The page's tabs and its vertical rhythm (.adm-tabs,
   .lic) are in admin-insights.css beside the insights tabs they share rules
   with; the panels, confirms, toast and pager come from admin-editors.css and
   chrome.css, and the machine rows from activate.css's MachineRow. Each surface
   below adds only what it needs beyond those. As in the sibling admin sheets,
   a bare pixel value is a layout minimum (SC §2.6). */

/* ============================================================================
   One license's page (ALC-R02, ALC-R04…R06, WF-45 ② ⑤ ⑥): the title line
   (struck once the license has ended), the facts grid, the machine-limit field
   beside its button, the ended-license note, the machine list, and the two
   history lists.
   ========================================================================== */

/* --- Title and facts ------------------------------------------------------- */
.licd-title {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-sm);
    overflow-wrap: anywhere;
}

.licd-title__sep {
    color: var(--text-secondary);
}

/* ALC-R05: an ended license reads as ended. The Status fact and the note below
   say so in words, so the strike is never the only signal (F-R05). */
.licd-title--ended,
.licd-title--ended a {
    color: var(--text-secondary);
    text-decoration: line-through;
}

.licd-facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-md) var(--space-xl);
    margin: 0;
}

.licd-facts__item {
    min-width: 0;
}

.licd-facts__item--wide {
    grid-column: 1 / -1;
    max-width: var(--measure-prose);
}

.licd-facts dt {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

.licd-facts dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* --- Machine limit (WF-45 ②): the field and its button on one line, the hint
       or error under both, at the field rhythm (SC §2.3) ----------------------- */
.licd-limit {
    display: flex;
    flex-direction: column;
    gap: var(--hint-gap);
}

.licd-limit > .field-hint,
.licd-limit > .field-error {
    margin: 0;
    font-size: var(--font-size--1);
}

.licd-limit__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-sm) var(--space-md);
}

.licd-limit__field {
    display: flex;
    flex-direction: column;
    gap: var(--label-gap);
}

.licd-limit__field label {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

/* F-R27: a two-digit number is content-sized. */
.licd-limit__input {
    width: 8ch;
}

/* --- An ended license (ALC-R05) --------------------------------------------- */
.licd-ended {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    max-width: var(--measure-prose);
    padding: var(--space-sm) var(--space-md);
    border-left: 2px solid var(--border-emphasis);
    background-color: var(--surface-deep);
}

.licd-ended p {
    margin: 0;
}

.licd-ended__what {
    font-weight: 600;
}

/* F-R08, F-R15: a statement id takes the numeric face and wraps rather than widening its line. */
.licd-id {
    font-family: var(--font-numeric);
    font-size: var(--font-size--1);
    overflow-wrap: anywhere;
}

/* --- Machines (ALC-R02, WF-45 ⑤): MachineRows, one to a ruled row ------------- */
.licd-machines {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.licd-machines > li {
    padding: var(--space-md) 0;
    border-top: 1px solid var(--border-hairline);
}

.licd-machines > li:first-child {
    padding-top: 0;
    border-top: none;
}

/* A deactivated machine stays listed, toned; its mark says so in words. */
.licd-machines__off .mrow__name,
.licd-off {
    color: var(--text-secondary);
}

.licd-off {
    font-size: var(--font-size--1);
}

/* --- Use and history ---------------------------------------------------------- */
.licd-usage,
.licd-none,
.licd-audit {
    margin: 0;
}

.licd-none {
    color: var(--text-secondary);
}

.licd-subhead {
    margin: var(--space-sm) 0 0;
    color: var(--text-primary-on-raised);
    font-size: var(--font-size-0);
}

.licd-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.licd-list__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
}

.licd-list__head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-sm);
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

/* A middle dot between facts, never before the first — MachineRow's rule. */
.licd-list__head > * + *::before {
    content: "\00B7";
    margin-inline-end: var(--space-sm);
}

.licd-list__what {
    color: var(--text-primary-on-raised);
    font-weight: 500;
}

.licd-list__detail {
    max-width: var(--measure-prose);
}

/* --- Ending the license (ALC-R04, ALC-R06) ------------------------------------ */
.licd-acts__note {
    margin: 0;
    max-width: var(--measure-prose);
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

.licd-acts__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

/* F-R27: a select sized to its longest reason, not the dialog's width. */
.licd-reason .input {
    width: 28ch;
    max-width: 100%;
}

/* ============================================================================
   The Licenses tab (ALC-R01, ALC-R03, ALC-R07, WF-45 ① ④ ⑦): the filter bar, the table, the issue inset with its line-by-line report, and the signing keys.
   ========================================================================== */

/* --- Composition ------------------------------------------------------------ */
.lic-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    min-width: 0;
}

/* The filters lead; the one action sits at the far end of the same line (WF-45),
   and drops beneath them when the pane is too narrow for both. */
.lic-list__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-md);
}

/* ADN-R08: quiet, because nothing is wrong — the table is simply as it was. */
.lic-list__fresh {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

/* --- The license table (ALC-R01) ---------------------------------------------
   Fixed columns, with the user cell taking what the seven others leave; below the
   table's floor the wrap scrolls (F-R17) rather than squeezing the email to nothing. */
/* F-R15: one line, an ellipsis, and the whole value in the title. The email is the
   row's way into its license, so it reads as the link it is. */
.lic-list__open,
.lic-list__product bdi {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lic-list__open {
    color: var(--accent);
    text-decoration: none;
}

.lic-list__open:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* --- The issue inset (ALC-R03) ------------------------------------------------ */
.lic-issue {
    max-width: 900px;
}

.lic-issue__mode {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin: 0;
    padding: 0;
    border: 0;
}

/* The legend reads like the form's field labels around it. */
.lic-issue__mode legend {
    padding: 0;
    margin-block-end: var(--space-xs);
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

/* F-R27: short values are content-sized — a two-digit count, a date. */
.lic-issue__machines .input {
    width: 8ch;
}

.lic-issue__expires .input {
    width: 18ch;
}

.lic-issue__done {
    margin: 0;
}

.lic-issue__report {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.lic-issue__summary {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

/* F-R17: two hundred lines stay in their own box — about a dozen rows show, the box
   scrolls on its own, keeps its scrollbar, is in the tab order so a keyboard can
   scroll it, and fades at whichever edge has more. The fades are backgrounds attached
   to the content, so they show only where it actually overflows. */
.lic-issue__lines {
    max-height: 28rem;
    overflow-y: auto;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-container);
    background-color: var(--surface-raised);
    background-image:
        linear-gradient(to bottom, var(--surface-raised), transparent 24px),
        linear-gradient(to top, var(--surface-raised), transparent 24px),
        linear-gradient(to bottom, var(--scrim), transparent 24px),
        linear-gradient(to top, var(--scrim), transparent 24px);
    background-position: center top, center bottom, center top, center bottom;
    background-repeat: no-repeat;
    background-size: 100% 24px, 100% 24px, 100% 12px, 100% 12px;
    background-attachment: local, local, scroll, scroll;
}

.lic-issue__lines:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

/* The report is narrower than the record tables, and its header scrolls away with
   the lines so the box's top fade is never hidden behind a pinned header. */
.adm-table.lic-issue__table {
    min-width: 0;
}

.lic-issue__table th {
    position: static;
    background-color: transparent;
}


.lic-issue__entry bdi {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Signing keys (ALC-R07) ------------------------------------------------------ */
.adm-table.lic-keys__table {
    min-width: 560px;
}


.lic-keys__id {
    font-family: var(--font-numeric);
    font-size: var(--font-size--1);
}

/* ============================================================================
   The Activity flags tab (FLG-R03, WF-46) and the license notices panel in settings (FLG-R04): the queue's rows, an open flag with its fourteen-day strip and machines, and the notice field.
   ========================================================================== */

/* --- The tab --------------------------------------------------------------- */
.lflags {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-width: 0;
}

/* Current and dismissed: two links, the current one read by weight and an underline. */
.lflags__views {
    display: inline-flex;
    align-self: flex-start;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-control);
    overflow: hidden;
}

.lflags__view {
    padding: 6px var(--space-md);
    color: var(--text-secondary);
    font-size: var(--font-size--1);
    text-decoration: none;
}

.lflags__view + .lflags__view {
    border-inline-start: 1px solid var(--border-hairline);
}

a.lflags__view:hover {
    background-color: var(--surface-hover);
    color: var(--text-primary);
}

.lflags__view--current {
    background-color: var(--surface-raised);
    color: var(--text-primary);
    font-weight: 700;
    box-shadow: inset 0 -2px 0 var(--border-emphasis);
}

.lflags__list {
    display: grid;
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* --- One flag -------------------------------------------------------------- */
.lflag {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
    padding: var(--space-sm) var(--space-md);
    background-color: var(--surface-raised);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-control);
}

.lflag--open {
    border-color: var(--border-emphasis);
}

/* ADN-R08: a row that no longer belongs to the list stays in place, toned, until Refresh. */
.lflag--settled .lflag__head,
.lflag--settled .lflag__details,
.lflag--settled .lflag__meta {
    opacity: 0.6;
}

.lflag__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-xs) var(--space-md);
}

.lflag__license {
    min-width: 0;
    color: var(--text-primary-on-raised);
    font-weight: 500;
    overflow-wrap: anywhere;
    text-decoration: underline;
    text-decoration-color: var(--border-hairline);
    text-underline-offset: 3px;
}

.lflag__license:hover {
    color: var(--accent-hover);
    text-decoration-color: currentColor;
}

.lflag__chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.lflag__details {
    margin: 0;
    color: var(--text-primary-on-raised);
    max-width: var(--measure-prose);
}

.lflag__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-sm);
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

/* A middle dot between facts, never before the first. */
.lflag__meta > span + span::before {
    content: "\00B7";
    margin-inline-end: var(--space-sm);
}

/* --- The open flag ------------------------------------------------------------ */
.lflag-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-top: var(--space-sm);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-hairline);
}

.lflag-panel__license,
.lflag-panel__more,
.lflag-panel__notice,
.lflag-panel__dismissed {
    margin: 0;
    font-size: var(--font-size--1);
    max-width: var(--measure-prose);
    overflow-wrap: anywhere;
}

.lflag-panel__license {
    color: var(--text-secondary);
}

.lflag-panel__more {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-md);
    color: var(--text-secondary);
}

.lflag-panel__h {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size--1);
    font-weight: 500;
}

/* The machines, one to a ruled row, as on the at-cap panel. */
.lflag-panel__machines {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.lflag-panel__machines > li + li {
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border-hairline);
}

/* --- The fourteen-day strip (WF-46 callout 3): two labeled runs of numbers ------ */
.lflag-strip {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
}

.lflag-strip__range,
.lflag-strip__key {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

/* Each label above its run, and both runs the same width, so day lines up under day. */
.lflag-strip__run {
    display: grid;
    grid-template-columns: minmax(0, 28rem);
    gap: var(--space-xs);
}

.lflag-strip__label {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

/* One equal column per day, however many days and however narrow the screen: the two
   runs line up day under day and a run never wraps its last day onto a line of its own. */
.lflag-strip__days {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
}

.lflag-strip__day {
    text-align: center;
}

/* Over the license's count: weight and an underline, so it never rests on color (F-R05). */
.lflag-strip__day--over {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.lflag-strip__run--context .lflag-strip__days {
    color: var(--text-secondary);
}

/* --- The two acts ----------------------------------------------------------- */
.lflag-acts {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.lflag-form {
    display: flex;
    flex-direction: column;
    gap: var(--field-gap);
    max-width: var(--measure-prose);
}

.lflag-form__kinds {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin: 0;
    padding: 0;
    border: none;
}

.lflag-form__kinds legend {
    margin-bottom: var(--label-gap);
    padding: 0;
}

.lflag-form__kind {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-xs) var(--space-sm);
}

.lflag-form__kindname {
    font-weight: 500;
}

.lflag-form__meaning {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

.lflag-form__reset {
    align-self: flex-start;
    font-size: var(--font-size--1);
}

/* --- The notice field (shared with the settings panel) -------------------------- */
.lflag-notice__count {
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size--1);
}

.lflag-notice__chars {
    font-family: var(--font-numeric);
    letter-spacing: 0.1em;
    color: var(--text-primary-on-raised);
}

/* --- The license notices settings panel -------------------------------------------- */
.lflag-wording__saved {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

/* F-R12: on a phone the act buttons go full width at the touch size. */
@media (max-width: 767px) {
    .lflag-acts .btn {
        width: 100%;
        min-height: 44px;
    }

    .lflag-acts .adm-rowactions {
        flex-direction: column;
        align-items: stretch;
    }
}