/* ============================================================================
   tish-ui.css — E-style component classes (UI redesign phase 1, plan 01)
   Consumes tokens from tokens.css. Loaded after tokens.css, before app.css.
   Button language (spec): primary/ghost ~34px r9 with press-shrink; Close and
   Open morph word->shape in a FIXED footprint; Send/Edit are permanent shapes.
   ============================================================================ */

/* -- Grouped surface -- */
.tish-surface {
    background: var(--tish-surface);
    border-radius: var(--tish-surface-radius);
    box-shadow: var(--tish-surface-shadow);
    overflow: hidden;
}

/* -- Status capsules -- */
.tish-cap {
    display: inline-flex;
    align-items: center;
    font-family: var(--tish-font-body);
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 999px;
    padding: 2px 10px;
    white-space: nowrap;
}
.tish-cap--ok      { background: var(--tish-cap-ok-bg);      color: var(--tish-cap-ok-fg); }
.tish-cap--warn    { background: var(--tish-cap-warn-bg);    color: var(--tish-cap-warn-fg); }
.tish-cap--info    { background: var(--tish-cap-info-bg);    color: var(--tish-cap-info-fg); }
.tish-cap--neutral { background: var(--tish-cap-neutral-bg); color: var(--tish-cap-neutral-fg); }

/* -- Segmented control -- */
.tish-seg {
    display: inline-flex;
    background: var(--tish-seg-track);
    border-radius: 9px;
    padding: 2px;
}
.tish-seg > button {
    appearance: none;
    border: none;
    background: transparent;
    font-family: var(--tish-font-body);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--tish-seg-text);
    padding: 5px 15px;
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
.tish-seg > button.on {
    background: var(--tish-seg-active-bg);
    color: var(--tish-seg-text-active);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.tish-seg > button:focus-visible { outline: 2px solid var(--tish-accent); outline-offset: 1px; }

/* -- Buttons: base -- */
.tish-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 34px;
    box-sizing: border-box;
    background: var(--tish-btn-primary-bg);
    color: #ffffff;
    font-family: var(--tish-font-body);
    font-size: 12.5px;
    font-weight: 600;
    border: none;
    border-radius: var(--tish-btn-radius);
    padding: 0 16px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease,
                transform var(--tish-motion-press) ease;
}
.tish-btn:hover { background: var(--tish-btn-primary-hover); }
.tish-btn:active { transform: scale(0.93); }
.tish-btn:disabled { opacity: 0.55; cursor: default; transform: none; }
.tish-btn:focus-visible { outline: 2px solid var(--tish-accent); outline-offset: 2px; }
.tish-btn--ghost { background: var(--tish-btn-ghost-bg); color: var(--tish-btn-ghost-fg); }
.tish-btn--ghost:hover { background: var(--tish-btn-ghost-hover); }

/* -- Morph buttons: label and glyph stack in one grid cell and cross-fade,
      so the footprint NEVER changes (a shrinking button escapes the cursor). -- */
.tish-swap { display: grid; place-items: center; }
.tish-swap > .tish-lbl,
.tish-swap > .tish-glyph {
    grid-area: 1 / 1;
    transition: opacity 0.14s ease, transform var(--tish-motion-morph) ease;
}
.tish-swap > .tish-glyph { opacity: 0; transform: scale(0.4); display: grid; place-items: center; }
/* IMPORTANT: these hover rules must out-rank .tish-btn--ghost:hover (three classes vs two) —
   a generic ghost-hover rule silently ate the red morph once during mockups. */
.tish-btn.tish-btn--morph-close:hover { background: var(--tish-btn-danger-bg); color: #ffffff; border-radius: 8px; }
.tish-btn.tish-btn--morph-close:hover .tish-lbl,
.tish-btn.tish-btn--morph-send:hover  .tish-lbl { opacity: 0; transform: scale(0.7); }
.tish-btn.tish-btn--morph-close:hover .tish-glyph,
.tish-btn.tish-btn--morph-send:hover  .tish-glyph { opacity: 1; transform: scale(1); }
.tish-btn.tish-btn--morph-send:active .tish-glyph { transform: scale(1) translateX(4px); }

/* -- Shape-only buttons (permanent shapes: Send, Edit) -- */
.tish-sbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    min-width: 34px;
    padding: 0 10px;
    box-sizing: border-box;
    border: none;
    border-radius: var(--tish-btn-radius);
    background: var(--tish-btn-primary-bg);
    color: #ffffff;
    cursor: pointer;
    transition: background 0.15s ease, transform var(--tish-motion-press) ease;
}
.tish-sbtn:hover { background: var(--tish-btn-primary-hover); }
.tish-sbtn:active { transform: scale(0.9); }
.tish-sbtn:focus-visible { outline: 2px solid var(--tish-accent); outline-offset: 2px; }
.tish-sbtn--soft { background: var(--tish-btn-ghost-bg); color: var(--tish-btn-ghost-fg); }
.tish-sbtn--soft:hover { background: var(--tish-btn-ghost-hover); }

/* -- Glyphs (all currentColor; every glyph's motion matches its meaning) -- */
.tish-g-send::before { content: '➤'; font-size: 13px; line-height: 1; display: block;
    transition: transform 0.18s ease; }
.tish-btn:hover .tish-g-send::before, .tish-sbtn:hover .tish-g-send::before { transform: translateX(2px); }

.tish-g-sq::before { content: ''; width: 11px; height: 11px; background: currentColor;
    border-radius: 2px; display: block; }

.tish-g-circle::before { content: ''; width: 10px; height: 10px; background: currentColor;
    border-radius: 50%; display: block; }

.tish-g-edit::before { content: '✎'; font-size: 14px; line-height: 1; display: block;
    transition: transform 0.18s ease; }
.tish-btn:hover .tish-g-edit::before, .tish-sbtn:hover .tish-g-edit::before {
    transform: rotate(-18deg) translateY(-1px); }

.tish-g-assign { display: flex; align-items: center; gap: 3px; }
.tish-g-assign .arr { font-size: 13.5px; font-weight: 800; line-height: 1; transition: transform 0.18s ease; }
.tish-btn:hover .tish-g-assign .arr, .tish-sbtn:hover .tish-g-assign .arr { transform: translateX(3px); }

.tish-g-take { display: flex; align-items: flex-start; gap: 1px; }
.tish-g-take .plusb { font-size: 10.5px; font-weight: 800; line-height: 1; margin-top: -2px;
    transition: transform 0.18s ease; }
.tish-btn:hover .tish-g-take .plusb, .tish-sbtn:hover .tish-g-take .plusb { transform: scale(1.35); }

/* person silhouette shared by assign/take glyphs */
.tish-g-assign .pers, .tish-g-take .pers { position: relative; width: 11px; height: 12px; display: block; }
.tish-g-assign .pers::before, .tish-g-take .pers::before { content: ''; position: absolute; top: 0;
    left: 3px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.tish-g-assign .pers::after, .tish-g-take .pers::after { content: ''; position: absolute; bottom: 0;
    left: 0.5px; width: 10px; height: 5px; border-radius: 5px 5px 0 0; background: currentColor; }

/* -- Heat edges (work lists only; supplementary to a visible age/date column) -- */
.tish-heat-0, .tish-heat-1, .tish-heat-2, .tish-heat-3 { position: relative; }
.tish-heat-0::before, .tish-heat-1::before, .tish-heat-2::before, .tish-heat-3::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
}
.tish-heat-0::before { background: var(--tish-heat-0); }
.tish-heat-1::before { background: var(--tish-heat-1); }
.tish-heat-2::before { background: var(--tish-heat-2); }
.tish-heat-3::before { background: var(--tish-heat-3); }

/* -- Reduced motion: state changes stay instant, nothing animates (XC·4) -- */
@media (prefers-reduced-motion: reduce) {
    .tish-btn, .tish-sbtn, .tish-seg > button,
    .tish-swap > .tish-lbl, .tish-swap > .tish-glyph,
    .tish-g-send::before, .tish-g-edit::before,
    .tish-g-assign .arr, .tish-g-take .plusb {
        transition: none !important;
    }
    .tish-btn:active, .tish-sbtn:active { transform: none; }
}

/* ============================================================================
   Work-list rows (UI redesign plan 02) — one shared row look for Case & Bug
   Management. Column layout (grid-template-columns) is set per-page; these are
   the shared primitives: grouped surface, 44px rows, hairline separators,
   hover, section heads, chevron, empty + load-more. Left heat edge comes from
   the Plan 01 .tish-heat-0..3 classes applied alongside .tish-wl-row.
   ============================================================================ */
.tish-wl-surface {
    background: var(--tish-surface);
    border-radius: var(--tish-surface-radius);
    box-shadow: var(--tish-surface-shadow);
    overflow: hidden;
}

/* Column headers — one grid row aligned to the data rows via the shared --wl-cols
   template set on the surface (mirrors the artifact's e-tbl <th> row). */
.tish-wl-head {
    display: grid;
    grid-template-columns: var(--wl-cols);
    align-items: center;
    column-gap: 0.75rem;
    padding: 12px 1rem 8px 0.875rem;
    border-bottom: 1px solid var(--tish-border);
}
.tish-wl-head > span {
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--tish-text-secondary);
    white-space: nowrap;
}
.tish-wl-head > span.tish-wl-h-right { text-align: right; }

/* Section label inside the table (Bug Mgmt: "Needs Assignment" / "In Progress").
   Quiet group divider so it reads as part of the table, not a heavy banner. */
.tish-wl-sec {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.6rem 1rem 0.35rem 0.875rem;
    background: transparent;
    border-top: 1px solid var(--tish-border);
}
.tish-wl-sec--bordered { border-top: 1px solid var(--tish-border); }
.tish-wl-sec--urgent { box-shadow: inset 3px 0 0 var(--tish-tangerine); }
.tish-wl-sec-title {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--tish-text-secondary); flex: 1;
}
.tish-wl-sec--urgent .tish-wl-sec-title { color: var(--tish-tangerine); }
.tish-wl-sec-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.15rem; height: 1.15rem; padding: 0 0.3rem; border-radius: 999px;
    background: var(--tish-cap-info-bg); color: var(--tish-cap-info-fg);
    font-size: 0.65rem; font-weight: 700; line-height: 1;
}
.tish-wl-sec-badge--urgent { background: var(--tish-tangerine-muted); color: var(--tish-tangerine); }

/* Rows: 44px, columns from the shared --wl-cols template, hairline separator, hover */
.tish-wl-row {
    display: grid;
    grid-template-columns: var(--wl-cols);
    align-items: center;
    column-gap: 0.75rem;
    min-height: 44px;
    padding: 0.5rem 1rem 0.5rem 0.875rem;
    cursor: pointer;
    transition: background 0.1s ease;
    border-bottom: 1px solid var(--tish-border);
}
.tish-wl-row:last-child { border-bottom: none; }
.tish-wl-row:hover { background: var(--tish-hover-bg); }
.tish-wl-row:focus-visible { outline: 2px solid var(--tish-accent); outline-offset: -2px; }
.tish-wl-row--closed { opacity: 0.6; }
.tish-wl-row--closed:hover { opacity: 0.82; }

.tish-wl-chevron { color: var(--tish-border); font-size: 18px !important; justify-self: end; }

.tish-wl-loadmore {
    display: flex; justify-content: center; padding: 0.75rem; border-top: 1px solid var(--tish-border);
}

.tish-wl-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.5rem; padding: 2.5rem 1.25rem; text-align: center;
    color: var(--tish-text-secondary); font-size: 0.8125rem;
}
.tish-wl-empty-icon { color: var(--tish-border); font-size: 2.5rem !important; }

/* -- Rounded search pill (artifact .e-search) — used in work-list toolbars -- */
.tish-wl-search {
    display: inline-flex; align-items: center; gap: 8px;
    height: 34px; box-sizing: border-box;
    border-radius: 999px;
    background: var(--tish-btn-ghost-bg);
    padding: 0 14px;
    min-width: 220px;
}
.tish-wl-search .tish-wl-search-ico { font-size: 16px !important; color: var(--tish-text-secondary); flex-shrink: 0; }
.tish-wl-search input {
    border: none; background: transparent; outline: none;
    font-family: var(--tish-font-body); font-size: 12.5px;
    color: var(--tish-text-primary); width: 100%; padding: 0;
}
.tish-wl-search input::placeholder { color: var(--tish-text-secondary); }
.tish-wl-search:focus-within { outline: 2px solid var(--tish-accent); outline-offset: 1px; }

/* -- Peek preview card (work lists; plan 02). pointer-events:none = never blocks the row. -- */
.tish-peek {
    position: fixed;
    z-index: 1300;                 /* above content, below MudBlazor dialogs/snackbars */
    width: max-content;
    max-width: 320px;
    pointer-events: none;
    background: var(--tish-surface);
    border-radius: 12px;
    box-shadow: var(--tish-surface-shadow), 0 8px 28px rgba(0,0,0,0.14);
    padding: 12px 14px;
    font-family: var(--tish-font-body);
    animation: tish-peek-in 0.12s ease;
}
.tish-peek--left { transform: translateX(-100%); }
.tish-peek-title {
    font-size: 0.85rem; font-weight: 600; color: var(--tish-text-primary);
    line-height: 1.3; margin-bottom: 4px;
}
.tish-peek-snippet {
    font-size: 0.78rem; color: var(--tish-text-secondary); line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    margin-bottom: 6px;
}
.tish-peek-meta { font-size: 0.72rem; color: var(--tish-text-secondary); opacity: 0.85; }
@keyframes tish-peek-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .tish-peek { animation: none; }
}