/* Requests page — migrated from Requests.razor.css; scoped under .page-requests. */
.page-requests { display: flex; flex-direction: column; gap: 34px; }

/* ─── Load animations (skeleton + no slide-in) ────────────────── */

/* Two shimmer states:
   .loading   — first load; everything including the toolbar.
   .reloading — a period change refetching. Only the surfaces that depend on the window
                shimmer (tiles + queue): the toolbar stays live so the period you just
                picked is still readable and changeable, and the static "Raise a request"
                rail keeps its content. */

.page-requests .loading .head-actions > *,
.page-requests .loading .stat-card > *,
.page-requests .loading .section-head > *,
.page-requests .loading .panel > *,
.page-requests .reloading .stat-card > *,
.page-requests .reloading .section-head > *,
.page-requests .reloading .section .panel > * { visibility: hidden; }

.page-requests .loading .head-actions,
.page-requests .loading .stat-card,
.page-requests .loading .section-head,
.page-requests .loading .panel,
.page-requests .reloading .stat-card,
.page-requests .reloading .section-head,
.page-requests .reloading .section .panel { position: relative; }

.page-requests .loading .head-actions::after { border: 1px solid var(--line); }

/* while loading, keep the (possibly selected) card neutral until the skeleton clears */
.page-requests .loading .stat-card.is-active,
.page-requests .reloading .stat-card.is-active {
    border-color: var(--line);
    background: var(--surface);
}

.page-requests .loading .head-actions::after,
.page-requests .loading .stat-card::after,
.page-requests .loading .section-head::after,
.page-requests .loading .panel::after,
.page-requests .reloading .stat-card::after,
.page-requests .reloading .section-head::after,
.page-requests .reloading .section .panel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 10;
    background-color: var(--surface-2);
    background-image: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.06) 50%, transparent 70%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: skel-shimmer 1.4s linear infinite;
}

/* ─── Queue toolbar + filter bar ──────────────────────────────── */

/* The same two rows the Incidents and Environment queues carry, laid out the same way: the search and the
   count on one line, then the filter-set bar under it. The controls themselves are shared
   (components.css); only this layout is per page, matching those two. */
.page-requests .inc-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-soft);
}

.page-requests .inc-filterbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 0;
}

/* Both rows belong to the queue, so they shimmer and dim with it on a period change rather than staying
   live over a queue that is being refetched under them. */
.page-requests .loading .inc-toolbar > *,
.page-requests .loading .inc-filterbar > *,
.page-requests .reloading .inc-toolbar > *,
.page-requests .reloading .inc-filterbar > * { visibility: hidden; }

.page-requests .loading .inc-toolbar,
.page-requests .loading .inc-filterbar,
.page-requests .reloading .inc-toolbar,
.page-requests .reloading .inc-filterbar { position: relative; }

.page-requests .loading .inc-toolbar::after,
.page-requests .loading .inc-filterbar::after,
.page-requests .reloading .inc-toolbar::after,
.page-requests .reloading .inc-filterbar::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 10;
    background-color: var(--surface-2);
    background-image: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.06) 50%, transparent 70%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: skel-shimmer 1.4s linear infinite;
}

/* ─── Metric cards ────────────────────────────────────────────── */

.page-requests .stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* clickable — cards double as status filters for the queue below */
.page-requests .stat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 18px 0;
    min-height: 150px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: var(--text);
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.page-requests .stat-card:hover { border-color: rgba(255, 255, 255, 0.20); box-shadow: 0 18px 36px -22px rgba(0, 0, 0, 0.75); }

.page-requests .stat-card.is-active {
    border-color: color-mix(in srgb, var(--c) 55%, transparent);
    background: color-mix(in srgb, var(--c) 10%, var(--surface));
}

.page-requests .stat-label {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.page-requests .stat-row { display: flex; align-items: baseline; gap: 10px; }

.page-requests .stat-value {
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.page-requests .stat-delta {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 12.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--faint);
}
.page-requests .stat-delta svg { width: 11px; height: 11px; flex: none; }
.page-requests .stat-delta.tone-good    { color: var(--good); background: rgba(45, 212, 191, 0.14); }
.page-requests .stat-delta.tone-bad     { color: var(--bad);  background: rgba(255, 107, 107, 0.14); }
.page-requests .stat-delta.tone-neutral { color: var(--faint); background: rgba(255, 255, 255, 0.06); }

.page-requests .stat-spark {
    margin-top: auto;
    margin-bottom: 18px;
    width: 100%;
    height: 48px;
    display: block;
    animation: wipe-right 1s cubic-bezier(.4, 0, .2, 1) both;
    animation-delay: .1s;
}
.page-requests .loading .stat-spark,
.page-requests .reloading .stat-spark { animation: none !important; }

.page-requests .stat-area { fill: url(#statFill); }
.page-requests .stat-line {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

/* ─── Your requests (queue table) ─────────────────────────────── */

.page-requests .rq-head,
.page-requests .rq-row {
    display: grid;
    grid-template-columns:
        minmax(170px, 1.7fr)  /* summary (+type sub-line) */
        86px                  /* request id */
        minmax(150px, 1fr)    /* status */
        minmax(120px, 1fr)    /* raised by */
        minmax(88px, 0.7fr);  /* updated */
    gap: 14px;
    align-items: center;
}

.page-requests .rq-head {
    padding: 12px 22px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line-soft);
}

.page-requests .rq-head span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--faint);
}

.page-requests .rq-row {
    padding: 15px 22px;
    border-bottom: 1px solid var(--line-soft);
    cursor: pointer;
    transition: background .18s ease;
}
.page-requests .rq-row:hover { background: rgba(255, 255, 255, 0.035); }
.page-requests .rq-row:last-of-type { border-bottom: 0; }

.page-requests .rq-summary { min-width: 0; display: grid; gap: 2px; }
.page-requests .rq-summary strong {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.page-requests .rq-sub {
    font-size: 12px;
    color: var(--faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-requests .rq-tag {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--accent-2);
    background: var(--accent-soft);
}

.page-requests .rq-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
    min-width: 0;
}
.page-requests .rq-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; }

.page-requests .rq-by { display: flex; align-items: center; gap: 9px; min-width: 0; }
.page-requests .rq-avatar {
    width: 26px;
    height: 26px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    /* The puck holds either initials or the raiser's photo, so it clips the image to the circle. */
    overflow: hidden;
    font-size: 10px;
    font-weight: 700;
    color: #04201D;
    background: linear-gradient(140deg, #5EEAD9, #14B8A6);
}
/* Fills the puck and keeps the aspect: a portrait crops rather than squashing (§23's both-axes rule). */
.page-requests .rq-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-requests .rq-name {
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-requests .rq-time { display: grid; gap: 2px; min-width: 0; }
.page-requests .rq-time > span:first-child { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.page-requests .rq-time-abs { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }

.page-requests .rq-empty {
    display: grid;
    gap: 6px;
    justify-items: center;
    padding: 44px 22px;
    text-align: center;
}
.page-requests .rq-empty strong { font-size: 14px; color: var(--muted); }
.page-requests .rq-empty span { font-size: 13px; color: var(--faint); }

.page-requests .rq-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* The footer carries the shared <Pager> alongside the counts, so it wraps rather than squeezing
       the two apart on a narrow window. */
    flex-wrap: wrap;
    gap: 18px;
    padding: 13px 22px;
    border-top: 1px solid var(--line-soft);
    color: var(--faint);
    font-size: 12.5px;
}
.page-requests .rq-foot strong { color: var(--muted); }

/* ─── Raise-a-request rail ────────────────────────────────────── */

.page-requests .req-rail { display: flex; flex-direction: column; }

.page-requests .rail-title {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line-soft);
    position: relative;
}
.page-requests .rail-title::after {
    content: "";
    position: absolute;
    left: 0; bottom: -1px;
    width: 36px; height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.page-requests .rail-group {
    margin: 14px 0 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--faint);
}

.page-requests .rail-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}

.page-requests .rail-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    font: inherit;
    color: var(--text);
    text-align: left;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.page-requests .rail-item:hover {
    border-color: var(--accent-line);
    background: var(--surface-2);
    transform: translateX(2px);
}

.page-requests .req-icon {
    width: 36px;
    height: 36px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
}
.page-requests .req-icon svg { width: 18px; height: 18px; }

.page-requests .rail-meta { display: grid; gap: 2px; min-width: 0; }
.page-requests .rail-meta strong { font-size: 13.5px; font-weight: 600; }
.page-requests .rail-meta span {
    font-size: 12px;
    line-height: 1.45;
    color: var(--faint);
}

/* ─── Request form modal ──────────────────────────────────────── */

.page-requests .modal-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, 0.55); }

.page-requests .modal {
    position: fixed;
    z-index: 210;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, calc(100vw - 32px));
    /* height:auto and overflow:hidden reset Bootstrap's own `.modal` rules
       (height:100%, overflow-y:auto), which would stretch the card to the
       full viewport and leave the body as dead space. */
    height: auto;
    max-height: calc(100vh - 48px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.8);
    animation: modal-in .2s ease both;
}

.page-requests .modal-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line-soft);
}
.page-requests .modal-head h2 { margin: 0; font-size: 16px; font-weight: 600; flex: 1; }
.page-requests .req-icon.sm { width: 30px; height: 30px; margin: 0; }
.page-requests .req-icon.sm svg { width: 16px; height: 16px; }

.page-requests .modal-x {
    width: 28px; height: 28px;
    border: none;
    background: transparent;
    color: var(--faint);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--radius-sm);
}
.page-requests .modal-x:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }

.page-requests .modal-body { padding: 18px; overflow-y: auto; }

/* .dropzone / .attach-* now live in components.css — shared with the Incidents raise modal. */

.page-requests .modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--line-soft);
}

.page-requests .btn-primary {
    padding: 9px 18px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: #04201D;
    font: 600 13px var(--font-body);
    cursor: pointer;
    transition: filter .18s ease;
}
.page-requests .btn-primary:hover { filter: brightness(1.08); }
.page-requests .btn-primary:disabled { opacity: 0.5; cursor: default; filter: none; }

/* ─── Responsive ──────────────────────────────────────────────── */

@media (max-width: 1280px) {
    .page-requests .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1080px) {
    .page-requests .rq-head { display: none; }
    .page-requests .rq-row {
        grid-template-columns: 1fr auto;
        row-gap: 10px;
        column-gap: 14px;
    }
    .page-requests .rq-summary { grid-column: 1 / -1; }
    .page-requests .rq-time { text-align: right; }
}

@media (max-width: 640px) {
    .page-requests .stat-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .page-requests .stat-spark, .page-requests .stat-line, .page-requests .stat-area { animation: none; clip-path: none; }
    .page-requests .loading .head-actions::after,
    .page-requests .loading .stat-card::after,
    .page-requests .loading .section-head::after,
    .page-requests .loading .panel::after,
    .page-requests .reloading .stat-card::after,
    .page-requests .reloading .section-head::after,
    .page-requests .reloading .section .panel::after { animation: none; }
    .page-requests .modal { animation: none; }
}

/* The period menu in the page header has nothing above it to escape, so it only needs lifting off the
   cards below (there is no .section around it to carry .menus-open). */
.page-requests .pop { z-index: 50; min-width: 210px; }

/* The queue's Add-filter menu does: it opens inside the queue section, above the panel that would clip
   it, so that section is lifted while it is open exactly as the Incidents and Environment queues do
   (§26). Nothing else on this page carries the class. */
.page-requests .section.menus-open { position: relative; z-index: 50; }