/* ============================================================
   Motiva — assignment surfaces, shared vocabulary
   Prefix: asgn-

   WHY THIS IS GLOBAL
   ──────────────────
   Two components describe the same cohort and must not describe it in two
   dialects: TeamAssignmentWorkspace (בדיקת שיבוץ — the system's analysis and
   the assignment act) and AssignmentFormModal (טופס שיבוץ — what the students
   submitted, and nothing else). Blazor's CSS isolation means a `taw-` rule is
   invisible to the form viewer, so "reuse the workspace's look" can only mean
   one of two things: copy the values into a second scoped stylesheet and let
   them drift apart on the next change, or lift the shared atoms somewhere both
   can read. This is the second.

   Same reasoning and same shape as motiva-request-workspace.css, which already
   backs the lecturer and mentor request queues.

   WHAT BELONGS HERE
   ─────────────────
   Only atoms BOTH surfaces genuinely draw: the header stamp, the panel, a
   submitted preference, a member, a strength tag, the notes block. Anything
   that exists on one surface only stays in that component's scoped stylesheet —
   the recommendation card, the alternatives list and the contest note are the
   workspace's alone, because the form viewer must never grow a recommendation.

   THE CONCEPTUAL LINE IS NOT A VISUAL ONE
   ───────────────────────────────────────
   Sharing the vocabulary is what lets the two surfaces stay obviously different
   in CONTENT: a lecturer who recognises the preference card instantly sees that
   one screen shows it with a match score and an action and the other does not,
   which is the actual distinction between reading a form and deciding on it.

   Tokens: motiva-tokens.css.
   ============================================================ */

/* ── Header ──────────────────────────────────────────────────
   State above identity; names and timestamp on one line. */
.asgn-head {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.asgn-head-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── The inspection marking ──────────────────────────────────────────────────
   Rendered beside the status badge on BOTH assignment surfaces — the form
   viewer and the decision workspace — so a reader who followed a marked row
   never loses the marking by clicking through.

   Deliberately the quietest thing in the header. It is not a status: the row
   beside it already says ממתין לשיבוץ, and the sample's whole value is that it
   behaves exactly like a real submission. So no brand colour, no rose, no
   badge weight — an opaque ink wash (the --motiva-surface-* tokens are
   translucent and would pull the canvas's violet through) and muted text. */
.asgn-sample {
    flex: none;
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 9px;
    border-radius: var(--motiva-radius-full, 999px);
    background: color-mix(in srgb, var(--motiva-text-primary, #1A1820) 8%, #fff);
    font-family: var(--motiva-font-family, Heebo, system-ui, sans-serif);
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1;
    color: var(--motiva-text-muted, #8B8698);
    white-space: nowrap;
    cursor: help;
}

.asgn-titlerow {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 10px;
    min-width: 0;
}

.asgn-title {
    margin: 0;
    font-size: var(--motiva-font-size-h2, 22px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--motiva-text-primary, #1A1820);
}

/* A white pill with a neutral outline — deliberately NOT the brand tag. The
   gradient edge marks things belonging to the team or the project; this is a
   timestamp, and giving it that edge would make it compete with the skill tags
   for the same meaning. */
.asgn-submitted {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--motiva-radius-pill, 999px);
    background: var(--motiva-surface-primary, #fff);
    box-shadow: inset 0 0 0 1px var(--motiva-border, rgba(26, 24, 32, 0.14));
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.35;
    white-space: nowrap;
    color: var(--motiva-text-secondary, #5B5568);
    font-variant-numeric: tabular-nums;
}

/* ── Panels ──────────────────────────────────────────────────  */
.asgn-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 14px;
    border-radius: var(--motiva-radius-md, 14px);
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--motiva-border-subtle, rgba(26, 24, 32, 0.08));
}

.asgn-panel-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.asgn-panel-title {
    margin: 0;
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.2;
    color: var(--motiva-text-primary, #1A1820);
}

/* ── A submitted preference ──────────────────────────────────
   The same card on both surfaces. What differs is what the caller puts
   INSIDE it: the workspace adds a score and an action, the form viewer
   does not — and that difference is the point. */
.asgn-prefs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.asgn-pref {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 11px;
    border-radius: var(--motiva-radius-sm, 10px);
    background: color-mix(in srgb, var(--motiva-text-primary, #1A1820) 2.5%, #fff);
}

/* Taken is the ONE state on these surfaces that earns rose, because it is the
   one state where acting costs another team its project. Demand never gets it —
   a wanted project is not an error. */
.asgn-pref--taken   { background: color-mix(in srgb, var(--motiva-color-rose, #E11D62) 4%, #fff); }
.asgn-pref--current { background: color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 5%, #fff); }

/* LTR-isolated: "#1" must not have its digit and hash reordered in an RTL run. */
.asgn-rank {
    flex: 0 0 auto;
    unicode-bidi: isolate;
    direction: ltr;
    padding: 3px 8px;
    border-radius: var(--motiva-radius-pill, 999px);
    background: var(--motiva-color-violet, #4F46E5);
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1.2;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.asgn-pref-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.asgn-pref-name {
    font-size: var(--motiva-font-size-sm, 13.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.3;
    color: var(--motiva-text-primary, #1A1820);
}

.asgn-pref-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
}

.asgn-pref-act { flex: 0 0 auto; }

/* The project's own type, stated quietly — it qualifies the name above it. */
.asgn-type {
    padding: 1px 7px;
    border-radius: var(--motiva-radius-pill, 999px);
    background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.05));
    font-size: var(--motiva-font-size-caption, 10.5px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.35;
    white-space: nowrap;
    color: var(--motiva-text-secondary, #5B5568);
}

/* Availability, spelled out. "פנוי" is a fact worth stating, not the absence of
   a warning — without it the taken rows are the only ones that say anything. */
.asgn-avail {
    display: inline-flex;
    align-items: center;
    font-size: var(--motiva-font-size-caption, 11.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.25;
}

.asgn-avail--free    { color: color-mix(in srgb, var(--motiva-color-teal, #0D9C9A) 88%, #000); }
.asgn-avail--taken   { color: var(--motiva-color-rose-ink, #B23256); }
.asgn-avail--current { color: var(--motiva-color-violet, #4F46E5); }

/* ── Members ─────────────────────────────────────────────────
   auto-fit rather than a column: this panel is one narrow column in the
   workspace's decision grid and full width in the form viewer, and a stack of
   two members under a wide header is mostly empty card. */
.asgn-members {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 9px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.asgn-member {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    min-width: 0;
}

.asgn-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--motiva-surface-hover, rgba(26, 24, 32, 0.05));
    font-size: 10.5px;
    font-weight: var(--motiva-font-weight-bold, 700);
    line-height: 1;
    color: var(--motiva-text-secondary, #5B5568);
}

.asgn-member-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.asgn-member-name {
    font-size: var(--motiva-font-size-sm, 13px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.3;
    color: var(--motiva-text-primary, #1A1820);
}

.asgn-member-mail {
    unicode-bidi: isolate;
    overflow: hidden;
    font-size: var(--motiva-font-size-caption, 11px);
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--motiva-text-muted, #8B8698);
}

.asgn-strengths {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-block-start: 2px;
}

/* The product's one tag recipe. Per the note on .motiva-tag in motiva-base.css,
   a tag with its own metrics reads the TOKEN rather than taking the class:
   a transparent border for the gradient to paint into, primary ink, and one
   less px of padding per axis to pay for the edge. */
.asgn-strength {
    padding: 1px 6px;
    border: 1px solid transparent;
    border-radius: var(--motiva-radius-pill, 999px);
    background: var(--motiva-tag-brand-surface);
    font-size: var(--motiva-font-size-caption, 10.5px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    line-height: 1.3;
    white-space: nowrap;
    color: var(--motiva-text-primary, #1A1820);
}

/* ── Own-project declaration and free-text notes ──────────────  */
.asgn-own {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 9px 11px;
    border-radius: var(--motiva-radius-sm, 10px);
    background: var(--motiva-tag-brand-surface, rgba(79, 70, 229, 0.08));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--motiva-color-violet, #4F46E5) 18%, transparent);
}

.asgn-own-tag {
    align-self: flex-start;
    font-size: var(--motiva-font-size-caption, 11px);
    font-weight: var(--motiva-font-weight-semibold, 600);
    color: var(--motiva-color-violet, #4F46E5);
}

/* A bordered, barely-tinted block — not a heavy grey strip. What a team wrote
   in its own words is content, and content on this system sits on a surface,
   not inside a fill. */
.asgn-note {
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--motiva-radius-sm, 10px);
    background: color-mix(in srgb, var(--motiva-text-primary, #1A1820) 2%, #fff);
    box-shadow: inset 0 0 0 1px var(--motiva-border-subtle, rgba(26, 24, 32, 0.08));
    font-size: var(--motiva-font-size-meta, 12.5px);
    line-height: 1.6;
    white-space: pre-wrap;
    color: var(--motiva-text-secondary, #5B5568);
}

.asgn-own-text {
    margin: 0;
    font-size: var(--motiva-font-size-meta, 12.5px);
    line-height: 1.55;
    white-space: pre-wrap;
    color: var(--motiva-text-secondary, #5B5568);
}

.asgn-quiet {
    font-size: var(--motiva-font-size-caption, 12px);
    font-weight: var(--motiva-font-weight-medium, 500);
    line-height: 1.5;
    color: var(--motiva-text-faint, #B4AFC0);
}

p.asgn-quiet { margin: 0; }

/* ── Narrow widths ───────────────────────────────────────────
   The atoms carry their own responsive behaviour so both surfaces get it
   without either restating it. */
@media (max-width: 640px) {
    .asgn-pref     { flex-wrap: wrap; }
    .asgn-pref-act { width: 100%; }
    .asgn-title    { font-size: 19px; }
}

/* ── A project name is a way in ──────────────────────────────
   Undone to look exactly like the text it replaces, because it IS that
   text — the affordance is the hover, not a permanent blue link colour
   down a list where every row would carry one. It stays a <button>
   rather than an <a>: it opens a panel over this surface, it does not
   navigate, and a screen reader should not be told otherwise. */
.asgn-projlink {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
    transition: color 130ms ease;
}

.asgn-projlink:hover {
    color: var(--motiva-color-violet, #4F46E5);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
}

.asgn-projlink:focus-visible {
    outline: 2px solid var(--motiva-color-violet, #4F46E5);
    outline-offset: 2px;
    border-radius: 4px;
}