/* ============================================================
   Recents — the per-module stack of records the user has opened.

   Renders as a strip of icon pills in the topbar's empty span between the
   breadcrumb and the search box. Loaded globally from _Head.cshtml.

   Prototype: wwwroot/prototype/recents.html
   ============================================================ */

/* flex:1 + min-width:0 lets the strip absorb whatever room is left over
   WITHOUT ever pushing the search box off the row; justify-content:flex-end
   keeps it hugging the search so the breadcrumb never has a floating island
   next to it. The whole block starts hidden and is revealed by recents.js
   only once it has rows — an empty "RECENT" label is worse than nothing. */
.recents-strip {
    /* The overflow panel is absolutely positioned against this. */
    position: relative;
    flex: 1;
    min-width: 0;
    display: none;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    overflow: hidden;

    /* Vertical alignment with the search box and icon buttons.
       .topbar-bottom-row is align-items:flex-start, so every child hangs from the
       top of the row rather than being centred in it. .topbar-right stands about
       41-43px tall (.search-box: 14px text at DM Sans' normal line-height, 11px
       padding twice, 1px borders), while this strip is only as tall as a 34px
       pill — so top-aligning the two lifted the pills' centres above everything
       else on the row.

       min-height matches that box and centres the pills inside it; the 3px
       padding-top is the remaining nudge, because the input's exact height
       depends on how the browser resolves DM Sans' normal line-height and is not
       something the stylesheet can compute.

       THIS IS THE KNOB. If the pills still read high, raise the 3px; if they go
       low, drop it. Nothing else here depends on the value. */
    min-height: 41px;
    padding: 3px 16px 0;
}

.recents-strip.has-items {
    display: flex;
}

.recents-strip-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    color: #cbd5e1;
    margin-right: 2px;
    white-space: nowrap;
    flex-shrink: 0;
}

.recents-strip-list {
    display: flex;
    align-items: center;
    gap: 6px;
}

.recents-pill {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border: 1px solid #e1e8ef;
    background: #ffffff;
    color: #64748b;
    flex-shrink: 0;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}

.recents-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(15, 23, 42, 0.13);
    border-color: currentColor;
    z-index: 5;
}

/* No ring on the newest pill. It was meant to flag "most likely to be wanted
   back", but Track promotes the record you just opened to the front — so in
   practice the ring only ever landed on the page you were already looking at,
   reading as a selection state for somewhere you cannot navigate to. */

/* Monogram variant — initials of the record's own name instead of the type
   glyph. Switch with Recents.UseMonogram = true in recents.js when several
   records of one type on the stack become hard to tell apart. */
.recents-pill.mono {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.3px;
}

/* Type colour carries as much identity as the glyph does — more, once two
   records share an icon. Keyed by RecentItemTypes.Key. */
.recents-pill.t-NationalAccount { color: #7c3aed; background: #f5f3ff; }
.recents-pill.t-Customer        { color: #7c3aed; background: #f5f3ff; }
.recents-pill.t-Building        { color: #2563eb; background: #eff6ff; }
.recents-pill.t-Contact         { color: #059669; background: #ecfdf5; }
.recents-pill.t-Contract        { color: #0891b2; background: #ecfeff; }
.recents-pill.t-Job             { color: #ea580c; background: #fff7ed; }
.recents-pill.t-Inspection      { color: #ea580c; background: #fff7ed; }
.recents-pill.t-Service         { color: #ca8a04; background: #fefce8; }
.recents-pill.t-ServiceQuote    { color: #a16207; background: #fefce8; }
.recents-pill.t-Project         { color: #4f46e5; background: #eef2ff; }
.recents-pill.t-Quote           { color: #b45309; background: #fffbeb; }
.recents-pill.t-Invoice         { color: #e11d48; background: #fff1f2; }
.recents-pill.t-BillingReview   { color: #db2777; background: #fdf2f8; }

/* Overflow. The strip shows what fits; the rest live behind this. */
.recents-more {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    font-weight: 700;
    border: 1px dashed #cbd5e1;
    background: #f8fafc;
    color: #64748b;
    flex-shrink: 0;
    cursor: pointer;
}

.recents-more:hover {
    background: #f1f5f9;
    color: #0f172a;
}

/* Custom tooltip. The native title attribute waits about a second and cannot
   show two lines, which defeats the point of an icon-only strip. */
.recents-tip {
    position: fixed;
    z-index: 1200;
    background: #0f172a;
    color: #ffffff;
    padding: 7px 11px;
    border-radius: 7px;
    font-size: 12.5px;
    line-height: 1.45;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
    max-width: 280px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.28);
}

.recents-tip.show {
    opacity: 1;
    transform: translateY(0);
}

.recents-tip b {
    display: block;
    font-weight: 600;
}

.recents-tip span {
    color: #94a3b8;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-weight: 700;
}

/* Overflow panel — the full list with names, for when hovering pills one at a
   time is the wrong tool. */
/* FIXED, not absolute, and positioned by recents.js against the "+N" chip.
   .recents-strip carries overflow:hidden — it has to, or pills spill across the
   search box during the 120ms resize debounce before the strip re-measures — and
   an absolutely positioned child sitting below the strip's box was clipped away
   entirely. It opened; there was just nothing to see. Taking it out of the flow
   makes it immune to any ancestor's overflow, the same way .recents-tip already
   is. */
.recents-panel {
    position: fixed;
    width: 320px;
    background: #ffffff;
    border: 1px solid #e1e8ef;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.13);
    z-index: 300;
    overflow: hidden;
    display: none;
}

.recents-panel.open {
    display: block;
}

.recents-panel-head {
    padding: 11px 16px;
    border-bottom: 1px solid #e1e8ef;
    background: #f8fafc;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 700;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.recents-panel-clear {
    border: none;
    background: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    font-family: inherit;
    padding: 0;
}

.recents-panel-clear:hover {
    color: #dc2626;
}

/* Ten rows plus a header can outrun a short viewport, so the list scrolls
   inside the panel rather than the panel running off the bottom of the screen. */
#recents-panel-body {
    max-height: 60vh;
    overflow-y: auto;
}

.recents-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    color: #475569;
    border-bottom: 1px solid #f1f5f9;
    text-decoration: none;
    transition: background 0.15s;
}

.recents-row:last-child {
    border-bottom: none;
}

.recents-row:hover {
    background: #f8fafc;
}

.recents-row-icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: #f1f5f9;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.recents-row-text {
    min-width: 0;
    flex: 1;
}

.recents-row-title {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recents-row-sub {
    display: block;
    font-size: 11.5px;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The strip competes with the page title for room. Below this the title wins:
   a breadcrumb that wraps is worse than no Recents. */
@media (max-width: 1200px) {
    .recents-strip.has-items {
        display: none;
    }
}