/* File: Skanweb/wwwroot/css/skan-requests.css */

:root {
    --rq-blue: #0f548c;
    --rq-blue-dark: #003d59;
    --rq-green: #006e64;
    --rq-green-dark: #005164;
    --rq-text: #152238;
    --rq-muted: #66758a;
    --rq-border: rgba(15, 84, 140, .10);
    --rq-soft: #f7fafc;
    --rq-shadow: 0 14px 42px rgba(15, 84, 140, .07);
}

.rq-list-shell,
.wrq-shell,
.rd-shell,
.rq-create-shell {
    display: grid;
    gap: 18px;
    font-size: .95rem;
}

    .rq-list-shell h2,
    .wrq-shell h2,
    .rd-shell h2,
    .rq-create-shell h2 {
        font-size: clamp(1.45rem, 2.35vw, 2.15rem) !important;
        line-height: 1.12 !important;
        font-weight: 820 !important;
        letter-spacing: -.035em !important;
    }

    .rq-list-shell h3,
    .wrq-shell h3,
    .rd-shell h3,
    .rq-create-shell h3,
    .rq-list-shell h4,
    .wrq-shell h4,
    .rd-shell h4,
    .rq-create-shell h4 {
        font-weight: 760 !important;
        letter-spacing: -.02em !important;
    }

    .rq-list-shell strong,
    .wrq-shell strong,
    .rd-shell strong,
    .rq-create-shell strong,
    .rq-list-shell label,
    .wrq-shell label,
    .rd-shell label,
    .rq-create-shell label,
    .rq-tabs button,
    .wrq-tabs button,
    .rq-action-btn,
    .wrq-action-btn,
    .rd-main-btn,
    .rd-light-btn,
    .rq-status,
    .wrq-status,
    .rq-urgent,
    .wrq-urgent,
    .rq-applied,
    .wrq-applied {
        font-weight: 700 !important;
    }

/* =====================================================
   REQUEST CREATE
   ===================================================== */

.rq-hero-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 22px;
    align-items: stretch;
    padding: 24px;
    border-radius: 24px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--rq-blue-dark), var(--rq-blue) 56%, var(--rq-green));
    box-shadow: 0 16px 48px rgba(15, 84, 140, .12);
}

.rq-eyebrow {
    display: inline-flex;
    margin-bottom: 10px;
    color: rgba(255,255,255,.82);
    font-size: .78rem;
    font-weight: 760;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.rq-hero-card p {
    max-width: 620px;
    margin: 12px 0 0;
    color: rgba(255,255,255,.82);
    font-size: .92rem;
    line-height: 1.58;
    font-weight: 450;
}

.rq-progress-card {
    display: grid;
    align-content: center;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(14px);
}

.rq-progress-head,
.rq-progress-labels {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

    .rq-progress-head strong {
        color: #ffffff;
        font-size: .86rem;
    }

    .rq-progress-head span,
    .rq-progress-labels span {
        color: rgba(255,255,255,.72);
        font-size: .74rem;
        font-weight: 650;
    }

        .rq-progress-labels span.active {
            color: #ffffff;
        }

.rq-progress-track {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.20);
}

    .rq-progress-track span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: #ffffff;
        transition: width .2s ease;
    }

.rq-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
    align-items: start;
}

.rq-main-panel {
    min-width: 0;
}

.rq-section-head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 22px;
}

    .rq-section-head > span,
    .rd-section-head > span,
    .rq-side-icon {
        width: 38px !important;
        height: 38px !important;
        display: grid;
        place-items: center;
        flex: 0 0 38px !important;
        border-radius: 14px !important;
        color: #ffffff;
        background: linear-gradient(135deg, var(--rq-blue), var(--rq-green));
    }

    .rq-section-head h3,
    .rd-section-head h3 {
        margin: 0;
        color: #111827;
        font-size: 1.12rem !important;
        font-weight: 740 !important;
    }

    .rq-section-head p,
    .rd-section-head p,
    .rq-field-help {
        margin: 5px 0 0;
        color: var(--rq-muted);
        font-size: .86rem !important;
        line-height: 1.5;
        font-weight: 450;
    }

.sk-form-field label b {
    color: #b42318;
}

.rq-description {
    min-height: 150px;
}

.rq-priority-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.rq-priority {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(15,84,140,.12);
    border-radius: 16px;
    color: #40566d;
    background: #ffffff;
    font-weight: 680;
    cursor: pointer;
}

    .rq-priority.active {
        color: var(--rq-blue-dark);
        background: #e9f5fb;
        border-color: rgba(15,84,140,.26);
    }

        .rq-priority.active.urgent {
            color: #b42318;
            background: #fff1f2;
            border-color: #fecdd3;
        }

.rq-upload-box {
    min-height: 88px !important;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px !important;
    border: 1px dashed rgba(15,84,140,.26);
    border-radius: 22px;
    background: var(--rq-soft);
}

    .rq-upload-box input {
        max-width: 230px;
    }

    .rq-upload-box strong,
    .rq-upload-box span {
        display: block;
    }

    .rq-upload-box strong {
        font-size: .95rem !important;
        font-weight: 700 !important;
    }

    .rq-upload-box span,
    .rq-uploading {
        margin-top: 4px;
        color: var(--rq-muted);
        font-size: .86rem !important;
    }

.rq-files {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.rq-file-chip {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px 0 12px;
    border-radius: 999px;
    background: #e9f5fb;
    color: var(--rq-blue-dark);
    font-size: .82rem;
    font-weight: 650;
}

    .rq-file-chip button {
        width: 24px;
        height: 24px;
        display: grid;
        place-items: center;
        border: 0;
        border-radius: 999px;
        background: rgba(15,84,140,.10);
        color: var(--rq-blue-dark);
        cursor: pointer;
    }

.rq-review-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

    .rq-review-card > div {
        padding: 15px;
        border-radius: 18px;
        background: var(--rq-soft);
        border: 1px solid rgba(15,84,140,.08);
    }

    .rq-review-card small,
    .rq-review-card strong {
        display: block;
    }

    .rq-review-card small {
        color: var(--rq-muted);
        font-size: .76rem;
        font-weight: 650;
    }

    .rq-review-card strong {
        margin-top: 6px;
        color: #111827;
        font-weight: 700;
    }

    .rq-review-card p {
        margin: 6px 0 0;
        color: #40566d;
        line-height: 1.58;
        font-size: .9rem;
    }

.rq-review-wide {
    grid-column: 1 / -1;
}

.rq-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(15,84,140,.10);
}

    .rq-actions .sk-app-action,
    .rq-actions .sk-app-action-light {
        gap: 8px;
        border: 0;
        cursor: pointer;
    }

    .rq-actions button:disabled {
        opacity: .65;
        cursor: not-allowed;
    }

.rq-side-panel {
    display: grid;
    gap: 14px;
    position: sticky;
    top: 126px;
}

.rq-side-card {
    padding: 20px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid var(--rq-border);
    box-shadow: var(--rq-shadow);
}

    .rq-side-card.soft {
        background: var(--rq-soft);
    }

    .rq-side-card h4 {
        margin: 0;
        color: #111827;
        font-weight: 740;
    }

    .rq-side-card p {
        margin: 10px 0 0;
        color: var(--rq-muted);
        font-size: .92rem !important;
        line-height: 1.58 !important;
        font-weight: 450 !important;
    }

    .rq-side-card ul {
        display: grid;
        gap: 10px;
        list-style: none;
        margin: 14px 0 0;
        padding: 0;
    }

    .rq-side-card li {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        color: #40566d;
        font-size: .84rem !important;
        font-weight: 550 !important;
    }

        .rq-side-card li i {
            color: var(--rq-blue);
            margin-top: 2px;
        }

.rq-loading-card {
    display: grid;
    gap: 12px;
}

.rq-skeleton {
    height: 20px;
    border-radius: 999px;
    background: linear-gradient(90deg, #eef4f8, #f8fbfd, #eef4f8);
    background-size: 220% 100%;
    animation: rqPulse 1.1s linear infinite;
}

    .rq-skeleton.w60 {
        width: 60%;
    }

    .rq-skeleton.w80 {
        width: 80%;
    }

@keyframes rqPulse {
    to {
        background-position: -220% 0;
    }
}

/* =====================================================
   CLIENT REQUEST LIST
   ===================================================== */

.rq-list-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px !important;
    border-radius: 24px !important;
    color: #ffffff;
    background: linear-gradient(135deg, var(--rq-blue-dark), var(--rq-blue) 58%, var(--rq-green));
    box-shadow: 0 16px 48px rgba(15, 84, 140, .12) !important;
}

    .rq-list-hero > div > span {
        display: inline-flex;
        margin-bottom: 10px;
        color: rgba(255,255,255,.78);
        font-size: .78rem;
        font-weight: 760;
        text-transform: uppercase;
        letter-spacing: .08em;
    }

    .rq-list-hero p {
        max-width: 620px;
        margin: 12px 0 0;
        color: rgba(255,255,255,.82);
        font-size: .92rem !important;
        line-height: 1.58 !important;
        font-weight: 450 !important;
    }

    .rq-list-hero .sk-app-action {
        flex: 0 0 auto;
        background: #ffffff;
        color: var(--rq-blue-dark);
        box-shadow: 0 14px 34px rgba(0,0,0,.12);
        gap: 8px;
    }

.rq-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px !important;
}

.rq-stat-card {
    padding: 18px !important;
    border-radius: 22px !important;
    background: #ffffff;
    border: 1px solid var(--rq-border);
    box-shadow: var(--rq-shadow) !important;
}

    .rq-stat-card span,
    .rq-mini-info span {
        display: block;
        color: var(--rq-muted);
        font-size: .78rem !important;
        font-weight: 650 !important;
    }

    .rq-stat-card strong {
        display: block;
        margin-top: 8px;
        color: var(--rq-blue-dark);
        font-size: 1.55rem !important;
        line-height: 1;
        font-weight: 780 !important;
    }

.rq-list-panel {
    padding: 20px;
    border-radius: 22px !important;
    background: #ffffff;
    border: 1px solid var(--rq-border);
    box-shadow: var(--rq-shadow) !important;
}

.rq-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.rq-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

    .rq-tabs button {
        min-height: 30px !important;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 0 10px !important;
        border: 1px solid var(--rq-border);
        border-radius: 999px;
        color: #506176;
        background: var(--rq-soft);
        font-size: .74rem !important;
        cursor: pointer;
    }

        .rq-tabs button.active {
            color: #ffffff;
            background: linear-gradient(135deg, var(--rq-blue-dark), var(--rq-blue));
            border-color: transparent;
            box-shadow: 0 10px 22px rgba(15,84,140,.14);
        }

.rq-search-wrap {
    width: min(340px, 100%);
    min-height: 44px !important;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--rq-soft);
    border: 1px solid var(--rq-border);
    color: var(--rq-muted);
}

    .rq-search-wrap input {
        width: 100%;
        border: 0;
        outline: none;
        background: transparent;
        color: #111827;
        font-size: .92rem;
        font-weight: 500;
    }

.rq-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.rq-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 18px !important;
    border-radius: 22px !important;
    background: #ffffff;
    border: 1px solid var(--rq-border);
    box-shadow: var(--rq-shadow) !important;
}

    .rq-card.skeleton {
        min-height: 230px;
        gap: 14px;
    }

        .rq-card.skeleton div {
            height: 18px;
            border-radius: 999px;
            background: linear-gradient(90deg, #eef4f8, #f8fbfd, #eef4f8);
            background-size: 220% 100%;
            animation: rqListPulse 1.1s linear infinite;
        }

            .rq-card.skeleton div:nth-child(1) {
                width: 50%;
            }

            .rq-card.skeleton div:nth-child(2) {
                width: 90%;
            }

            .rq-card.skeleton div:nth-child(3) {
                width: 72%;
            }

@keyframes rqListPulse {
    to {
        background-position: -220% 0;
    }
}

.rq-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 16px;
}

.rq-status,
.rq-urgent {
    min-height: 26px !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: .72rem !important;
}

    .rq-status.open {
        color: #075985;
        background: #e0f2fe;
    }

    .rq-status.progress {
        color: #92400e;
        background: #fef3c7;
    }

    .rq-status.done {
        color: #166534;
        background: #dcfce7;
    }

    .rq-status.cancel {
        color: #991b1b;
        background: #fee2e2;
    }

    .rq-status.other {
        color: #334155;
        background: #e2e8f0;
    }

.rq-urgent {
    color: #b42318;
    background: #fff1f2;
}

.rq-card h3 {
    margin: 0;
    color: #111827;
    font-size: 1rem !important;
    line-height: 1.25;
    font-weight: 760 !important;
}

.rq-card p {
    margin: 10px 0 0;
    color: var(--rq-muted);
    font-size: .84rem !important;
    line-height: 1.58 !important;
    font-weight: 450 !important;
}

.rq-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 16px;
}

    .rq-meta-grid span {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 8px;
        color: #40566d;
        font-size: .84rem !important;
        font-weight: 550 !important;
    }

    .rq-meta-grid i {
        color: var(--rq-blue);
    }

.rq-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--rq-border);
}

.rq-mini-info strong {
    display: block;
    margin-top: 3px;
    color: #111827;
    font-size: .86rem;
    font-weight: 720 !important;
}

.rq-action-btn {
    min-height: 40px !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 15px !important;
    border: 0;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--rq-blue), var(--rq-green));
    font-size: .86rem !important;
    cursor: pointer;
    white-space: nowrap;
}

    .rq-action-btn.rate {
        background: linear-gradient(135deg, #7c3aed, #4f46e5);
    }

    .rq-action-btn.view {
        background: #0f172a;
    }

.rq-empty {
    display: grid;
    place-items: center;
    text-align: center;
    padding: 52px 18px;
}

    .rq-empty > div {
        width: 58px;
        height: 58px;
        display: grid;
        place-items: center;
        border-radius: 20px;
        color: var(--rq-blue);
        background: #e9f5fb;
        font-size: 1.35rem;
        margin-bottom: 16px;
    }

    .rq-empty h3 {
        margin: 0;
        color: #111827;
        font-weight: 760 !important;
    }

    .rq-empty p {
        max-width: 420px;
        margin: 10px 0 18px;
        color: var(--rq-muted);
        font-size: .92rem !important;
        line-height: 1.58 !important;
    }

.rq-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}

    .rq-pagination span {
        color: var(--rq-muted);
        font-size: .86rem;
        font-weight: 680;
    }

    .rq-pagination button {
        border: 0;
        cursor: pointer;
        gap: 8px;
    }

        .rq-pagination button:disabled {
            opacity: .55;
            cursor: not-allowed;
        }

/* =====================================================
   PROVIDER REQUEST LIST
   ===================================================== */

.wrq-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px !important;
    border-radius: 24px !important;
    color: #ffffff;
    background: linear-gradient(135deg, var(--rq-green), var(--rq-green-dark));
    box-shadow: 0 16px 48px rgba(0, 110, 100, .12) !important;
}

    .wrq-hero > div > span {
        display: inline-flex;
        margin-bottom: 10px;
        color: rgba(255,255,255,.78);
        font-size: .78rem;
        font-weight: 760;
        text-transform: uppercase;
        letter-spacing: .08em;
    }

    .wrq-hero p {
        max-width: 640px;
        margin: 12px 0 0;
        color: rgba(255,255,255,.82);
        font-size: .92rem !important;
        line-height: 1.58 !important;
        font-weight: 450 !important;
    }

.wrq-refresh {
    min-height: 40px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 15px !important;
    border: 0;
    border-radius: 999px;
    color: var(--rq-green-dark);
    background: #ffffff;
    font-size: .86rem !important;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 14px 34px rgba(0,0,0,.12);
    white-space: nowrap;
}

    .wrq-refresh.dark {
        color: #ffffff;
        background: linear-gradient(135deg, var(--rq-green), var(--rq-green-dark));
    }

    .wrq-refresh:disabled {
        opacity: .7;
        cursor: not-allowed;
    }

.wrq-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px !important;
}

.wrq-stat-card {
    padding: 18px !important;
    border-radius: 22px !important;
    background: #ffffff;
    border: 1px solid rgba(0,110,100,.12);
    box-shadow: 0 14px 42px rgba(0,110,100,.07) !important;
}

    .wrq-stat-card span,
    .wrq-mini-info span {
        display: block;
        color: var(--rq-muted);
        font-size: .78rem !important;
        font-weight: 650 !important;
    }

    .wrq-stat-card strong {
        display: block;
        margin-top: 8px;
        color: var(--rq-green-dark);
        font-size: 1.55rem !important;
        line-height: 1;
        font-weight: 780 !important;
    }

.wrq-panel {
    padding: 20px;
    border-radius: 22px !important;
    background: #ffffff;
    border: 1px solid rgba(0,110,100,.10);
    box-shadow: 0 14px 42px rgba(0,110,100,.07) !important;
}

.wrq-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.wrq-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

    .wrq-tabs button {
        min-height: 38px !important;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 0 13px !important;
        border: 1px solid rgba(0,110,100,.12);
        border-radius: 999px;
        color: #506176;
        background: var(--rq-soft);
        font-size: .84rem !important;
        cursor: pointer;
    }

        .wrq-tabs button.active {
            color: #ffffff;
            background: linear-gradient(135deg, var(--rq-green), var(--rq-green-dark));
            border-color: transparent;
            box-shadow: 0 10px 22px rgba(0,110,100,.14);
        }

.wrq-filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wrq-search,
.wrq-city {
    min-height: 44px !important;
    border-radius: 999px;
    background: var(--rq-soft);
    border: 1px solid rgba(0,110,100,.12);
}

.wrq-search {
    width: min(300px, 100%);
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 14px;
    color: var(--rq-muted);
}

    .wrq-search input {
        width: 100%;
        border: 0;
        outline: none;
        background: transparent;
        color: #111827;
        font-size: .92rem;
        font-weight: 500;
    }

.wrq-city {
    min-width: 170px;
    padding: 0 14px;
    color: #40566d;
    outline: none;
    font-size: .92rem;
    font-weight: 500;
}

.wrq-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.wrq-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 18px !important;
    border-radius: 22px !important;
    background: #ffffff;
    border: 1px solid rgba(0,110,100,.10);
    box-shadow: 0 14px 42px rgba(0,110,100,.07) !important;
}

    .wrq-card.skeleton {
        min-height: 230px;
        gap: 14px;
    }

        .wrq-card.skeleton div {
            height: 18px;
            border-radius: 999px;
            background: linear-gradient(90deg, #eef7f6, #f8fbfd, #eef7f6);
            background-size: 220% 100%;
            animation: wrqPulse 1.1s linear infinite;
        }

            .wrq-card.skeleton div:nth-child(1) {
                width: 50%;
            }

            .wrq-card.skeleton div:nth-child(2) {
                width: 90%;
            }

            .wrq-card.skeleton div:nth-child(3) {
                width: 72%;
            }

@keyframes wrqPulse {
    to {
        background-position: -220% 0;
    }
}

.wrq-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 16px;
}

.wrq-top-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.wrq-status,
.wrq-urgent,
.wrq-applied {
    min-height: 26px !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: .72rem !important;
}

    .wrq-status.open {
        color: #075985;
        background: #e0f2fe;
    }

    .wrq-status.progress {
        color: #92400e;
        background: #fef3c7;
    }

    .wrq-status.done {
        color: #166534;
        background: #dcfce7;
    }

    .wrq-status.cancel {
        color: #991b1b;
        background: #fee2e2;
    }

    .wrq-status.other {
        color: #334155;
        background: #e2e8f0;
    }

.wrq-urgent {
    color: #b42318;
    background: #fff1f2;
}

.wrq-applied {
    color: var(--rq-green-dark);
    background: #e7f6f2;
}

.wrq-card h3 {
    margin: 0;
    color: #111827;
    font-size: 1rem !important;
    line-height: 1.25;
    font-weight: 760 !important;
}

.wrq-card p {
    margin: 10px 0 0;
    color: var(--rq-muted);
    font-size: .84rem !important;
    line-height: 1.58 !important;
    font-weight: 450 !important;
}

.wrq-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 16px;
}

    .wrq-meta-grid span {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 8px;
        color: #40566d;
        font-size: .84rem !important;
        font-weight: 550 !important;
    }

    .wrq-meta-grid i {
        color: var(--rq-green);
    }

.wrq-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid rgba(0,110,100,.10);
}

.wrq-mini-info strong {
    display: block;
    margin-top: 3px;
    color: #111827;
    font-size: .86rem;
    font-weight: 720 !important;
}

.wrq-action-btn {
    min-height: 40px !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 15px !important;
    border: 0;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--rq-green), var(--rq-green-dark));
    font-size: .86rem !important;
    cursor: pointer;
    white-space: nowrap;
}

    .wrq-action-btn.view {
        background: #0f172a;
    }

    .wrq-action-btn.apply {
        background: linear-gradient(135deg, var(--rq-green), var(--rq-green-dark));
    }

    .wrq-action-btn.accept {
        background: linear-gradient(135deg, #15803d, #166534);
    }

    .wrq-action-btn.rate {
        background: linear-gradient(135deg, #7c3aed, #4f46e5);
    }

.wrq-empty {
    display: grid;
    place-items: center;
    text-align: center;
    padding: 52px 18px;
}

    .wrq-empty > div {
        width: 58px;
        height: 58px;
        display: grid;
        place-items: center;
        border-radius: 20px;
        color: var(--rq-green);
        background: #e7f6f2;
        font-size: 1.35rem;
        margin-bottom: 16px;
    }

    .wrq-empty h3 {
        margin: 0;
        color: #111827;
        font-weight: 760 !important;
    }

    .wrq-empty p {
        max-width: 440px;
        margin: 10px 0 18px;
        color: var(--rq-muted);
        font-size: .92rem !important;
        line-height: 1.58 !important;
    }

.wrq-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}

    .wrq-pagination span {
        color: var(--rq-muted);
        font-size: .86rem;
        font-weight: 680;
    }

    .wrq-pagination button {
        border: 0;
        cursor: pointer;
        gap: 8px;
    }

        .wrq-pagination button:disabled {
            opacity: .55;
            cursor: not-allowed;
        }

/* =====================================================
   REQUEST DETAILS
   ===================================================== */

.rd-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px !important;
    border-radius: 24px !important;
    color: #ffffff;
    background: linear-gradient(135deg, var(--rq-blue-dark), var(--rq-blue) 58%, var(--rq-green));
    box-shadow: 0 16px 48px rgba(15, 84, 140, .12) !important;
}

    .rd-hero.progress {
        background: linear-gradient(135deg, #92400e, #b45309);
    }

    .rd-hero.done {
        background: linear-gradient(135deg, #166534, #15803d);
    }

    .rd-hero.cancel {
        background: linear-gradient(135deg, #7f1d1d, #b42318);
    }

.rd-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

    .rd-hero-tags span {
        min-height: 26px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 0 10px;
        border-radius: 999px;
        background: rgba(255,255,255,.16);
        font-size: .72rem;
        font-weight: 700;
    }

    .rd-hero-tags .urgent {
        background: #ffffff;
        color: #b42318;
    }

.rd-hero h2 {
    max-width: 780px;
    margin: 0;
    color: #ffffff;
}

.rd-hero p {
    margin: 10px 0 0;
    color: rgba(255,255,255,.82);
    font-size: .92rem !important;
    font-weight: 500 !important;
}

.rd-hero-actions {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
}

.rd-main-btn,
.rd-light-btn {
    min-height: 40px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 15px !important;
    border: 0;
    border-radius: 999px;
    font-size: .86rem !important;
    font-weight: 700 !important;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.rd-main-btn {
    color: #ffffff;
    background: linear-gradient(135deg, var(--rq-blue), var(--rq-green));
    box-shadow: 0 12px 28px rgba(0,61,89,.15);
}

    .rd-main-btn.apply {
        background: linear-gradient(135deg, var(--rq-green), var(--rq-green-dark));
    }

    .rd-main-btn.accept {
        background: linear-gradient(135deg, #15803d, #166534);
    }

    .rd-main-btn.rate {
        background: linear-gradient(135deg, #7c3aed, #4f46e5);
    }

    .rd-main-btn.full {
        width: 100%;
    }

.rd-light-btn {
    color: var(--rq-blue-dark);
    background: #ffffff;
}

    .rd-light-btn.small,
    .rd-main-btn.small {
        min-height: 34px !important;
        padding: 0 12px !important;
        font-size: .8rem !important;
    }

    .rd-main-btn:disabled,
    .rd-light-btn:disabled {
        opacity: .65;
        cursor: not-allowed;
    }

.rd-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px;
    align-items: start;
}

.rd-main,
.rd-side {
    display: grid;
    gap: 18px;
}

.rd-side {
    position: sticky;
    top: 120px;
}

.rd-card {
    padding: 20px;
    border-radius: 22px !important;
    background: #ffffff;
    border: 1px solid var(--rq-border);
    box-shadow: var(--rq-shadow) !important;
}

.rd-section-head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 18px;
}

    .rd-section-head.compact {
        margin-bottom: 14px;
    }

    .rd-section-head h3 {
        margin: 0;
        color: #111827;
        font-size: 1.12rem !important;
        font-weight: 740 !important;
    }

    .rd-section-head p {
        margin: 5px 0 0;
        color: var(--rq-muted);
        font-size: .86rem !important;
        line-height: 1.5;
    }

.rd-description {
    margin: 0;
    color: #40566d;
    font-size: .92rem !important;
    line-height: 1.62 !important;
    font-weight: 450 !important;
}

.rd-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 20px;
}

    .rd-info-grid div,
    .rd-person-list div {
        padding: 14px;
        border-radius: 18px;
        background: var(--rq-soft);
        border: 1px solid rgba(15,84,140,.08);
    }

    .rd-info-grid small,
    .rd-person-list small {
        display: block;
        color: var(--rq-muted);
        font-size: .78rem !important;
        font-weight: 650 !important;
    }

    .rd-info-grid strong,
    .rd-person-list strong {
        display: block;
        margin-top: 5px;
        color: #111827;
        font-size: .9rem;
        font-weight: 720 !important;
    }

.rd-files {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.rd-file {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border-radius: 999px;
    background: #e9f5fb;
    color: var(--rq-blue-dark);
    text-decoration: none;
    font-size: .86rem;
    font-weight: 700;
}

.rd-soft-empty {
    padding: 20px;
    border-radius: 18px;
    background: var(--rq-soft);
    color: var(--rq-muted);
    font-size: .9rem;
    font-weight: 650;
    text-align: center;
}

.rd-applicants {
    display: grid;
    gap: 12px;
}

.rd-applicant {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border-radius: 20px;
    background: var(--rq-soft);
    border: 1px solid rgba(15,84,140,.08);
}

.rd-avatar {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--rq-blue), var(--rq-green));
    color: #ffffff;
    font-weight: 760;
}

.rd-applicant h4 {
    margin: 0;
    color: #111827;
    font-size: .98rem;
    font-weight: 740 !important;
}

.rd-applicant p {
    margin: 4px 0;
    color: var(--rq-muted);
    font-size: .86rem;
    line-height: 1.45;
}

.rd-applicant small {
    color: #40566d;
    font-size: .8rem;
    font-weight: 650;
}

    .rd-applicant small i {
        color: #f59e0b;
    }

.rd-applicant-actions {
    display: flex;
    gap: 8px;
}

.rd-timeline {
    display: grid;
    gap: 10px;
}

    .rd-timeline div {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px;
        border-radius: 16px;
        background: var(--rq-soft);
        color: var(--rq-muted);
        font-size: .88rem;
        font-weight: 650;
    }

        .rd-timeline div.active {
            background: #e7f6f2;
            color: var(--rq-green-dark);
        }

    .rd-timeline i {
        width: 24px;
        text-align: center;
    }

.rd-person-list,
.rd-recos,
.rd-rating {
    display: grid;
    gap: 10px;
}

    .rd-recos button {
        display: grid;
        gap: 4px;
        text-align: left;
        padding: 12px;
        border: 0;
        border-radius: 16px;
        background: var(--rq-soft);
        color: #111827;
        cursor: pointer;
    }

    .rd-recos strong {
        font-size: .9rem;
        font-weight: 720 !important;
    }

    .rd-recos span {
        color: var(--rq-muted);
        font-size: .82rem;
        font-weight: 550;
    }

    .rd-rating textarea {
        min-height: 90px;
        resize: vertical;
    }

.rd-empty {
    display: grid;
    place-items: center;
    text-align: center;
    padding: 56px 20px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid var(--rq-border);
    box-shadow: var(--rq-shadow);
}

    .rd-empty > div {
        width: 58px;
        height: 58px;
        display: grid;
        place-items: center;
        border-radius: 20px;
        color: var(--rq-blue);
        background: #e9f5fb;
        font-size: 1.35rem;
        margin-bottom: 16px;
    }

    .rd-empty h3 {
        margin: 0;
        color: #111827;
        font-weight: 760 !important;
    }

    .rd-empty p {
        max-width: 420px;
        margin: 10px 0 18px;
        color: var(--rq-muted);
        font-size: .92rem !important;
        line-height: 1.58 !important;
    }

.rd-loading {
    display: grid;
    gap: 14px;
}

    .rd-loading div {
        height: 20px;
        border-radius: 999px;
        background: linear-gradient(90deg, #eef4f8, #f8fbfd, #eef4f8);
        background-size: 220% 100%;
        animation: rdPulse 1.1s linear infinite;
    }

        .rd-loading div:nth-child(1) {
            width: 45%;
        }

        .rd-loading div:nth-child(2) {
            width: 85%;
        }

        .rd-loading div:nth-child(3) {
            width: 65%;
        }

@keyframes rdPulse {
    to {
        background-position: -220% 0;
    }
}

/* =====================================================
   SHARED SOFTENING
   ===================================================== */

.rq-list-hero,
.wrq-hero,
.rd-hero {
    padding: 24px !important;
    border-radius: 24px !important;
    box-shadow: 0 16px 48px rgba(15, 84, 140, .12) !important;
}

    .wrq-hero p,
    .rd-hero p,
    .wrq-card p,
    .rd-description,
    .wrq-empty p,
    .rd-empty p {
        font-size: .92rem !important;
        line-height: 1.58 !important;
        font-weight: 450 !important;
    }

.wrq-stats-grid {
    gap: 12px !important;
}

.wrq-stat-card,
.wrq-card,
.rd-card,
.wrq-panel {
    border-radius: 22px !important;
    box-shadow: var(--rq-shadow) !important;
}

.wrq-stat-card {
    padding: 18px !important;
}

    .wrq-stat-card strong {
        font-size: 1.55rem !important;
        font-weight: 780 !important;
    }

    .wrq-stat-card span,
    .wrq-mini-info span,
    .rd-info-grid small,
    .rd-person-list small {
        font-size: .78rem !important;
        font-weight: 650 !important;
    }

.wrq-card h3 {
    font-size: 1rem !important;
    font-weight: 760 !important;
}

.wrq-card {
    padding: 18px !important;
}

    .wrq-meta-grid span,
    .wrq-card p {
        font-size: .84rem !important;
        font-weight: 550 !important;
    }

.wrq-tabs button {
    min-height: 38px !important;
    padding: 0 13px !important;
    font-size: .84rem !important;
}

.wrq-search,
.wrq-city,
.sk-input {
    min-height: 44px !important;
    font-size: .92rem !important;
    font-weight: 500 !important;
}

.wrq-action-btn,
.rd-main-btn,
.rd-light-btn,
.sk-app-action,
.sk-app-action-light {
    min-height: 40px !important;
    padding-inline: 15px !important;
    font-size: .86rem !important;
}

.wrq-status,
.wrq-urgent,
.wrq-applied {
    min-height: 26px !important;
    font-size: .72rem !important;
}

.sk-app-content {
    padding-top: 22px !important;
}

/* =====================================================
   CLIENT REQUEST LIST - CLICKABLE STATS AS TABS
   ===================================================== */

.rq-stats-clickable {
    align-items: stretch;
}

.rq-stat-action {
    width: 100%;
    min-height: 112px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    border: 1px solid rgba(0, 61, 89, .08);
    background: #fff;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

    .rq-stat-action:hover {
        transform: translateY(-2px);
        border-color: rgba(15, 84, 140, .18);
        box-shadow: 0 18px 42px rgba(0, 61, 89, .10) !important;
    }

    .rq-stat-action.active {
        border-color: rgba(0, 110, 100, .32);
        background: linear-gradient(180deg, rgba(0, 110, 100, .055), #fff 72%);
    }

        .rq-stat-action.active::before {
            content: "";
            position: absolute;
            left: 18px;
            right: 18px;
            top: 0;
            height: 3px;
            border-radius: 0 0 999px 999px;
            background: linear-gradient(90deg, var(--rq-blue), var(--rq-green));
        }

    .rq-stat-action small {
        margin-top: auto;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: var(--rq-blue);
        font-size: .76rem;
        font-weight: 760;
        line-height: 1;
        text-decoration: none;
    }

        .rq-stat-action small i {
            font-size: .68rem;
            transition: transform .16s ease;
        }

    .rq-stat-action:hover small i {
        transform: translateX(3px);
    }

.rq-stat-canceled {
    grid-column: auto;
}

/* =====================================================
   REQUEST NEW - REMOVE BIG HERO + COMPACT RIGHT PROGRESS
   ===================================================== */

.rq-create-shell > .rq-hero-card,
.rq-create-shell .rq-hero-card,
.rq-request-hero,
.rq-new-hero,
.rq-form-hero,
.rq-page-hero {
    display: none !important;
}

.rq-create-shell .rq-grid {
    margin-top: 0 !important;
}

.rq-create-shell .rq-side-panel,
.rq-form-side {
    display: grid;
    gap: 14px;
    align-content: start;
    position: sticky;
    top: 126px;
}

.rq-compact-progress-card {
    padding: 18px;
    border-radius: 22px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--rq-blue-dark), var(--rq-blue) 58%, var(--rq-green));
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 14px 34px rgba(15, 84, 140, .12);
}

.rq-compact-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

    .rq-compact-progress-head strong {
        color: #ffffff;
        font-size: .9rem;
        font-weight: 780 !important;
    }

    .rq-compact-progress-head span {
        color: rgba(255, 255, 255, .78);
        font-size: .78rem;
        font-weight: 720;
    }

.rq-compact-progress-track {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
}

    .rq-compact-progress-track span,
    .rq-compact-progress-track div {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: #ffffff;
        transition: width .2s ease;
    }

.rq-compact-progress-labels,
.rq-compact-progress-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 13px;
}

    .rq-compact-progress-labels span,
    .rq-compact-progress-steps span {
        min-height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: rgba(255, 255, 255, .14);
        color: rgba(255, 255, 255, .78);
        font-size: .72rem;
        font-weight: 700;
        text-align: center;
        white-space: nowrap;
    }

        .rq-compact-progress-labels span.active,
        .rq-compact-progress-labels span.done,
        .rq-compact-progress-steps span.active,
        .rq-compact-progress-steps span.done {
            background: #ffffff;
            color: var(--rq-blue-dark);
        }

.rq-create-shell .rq-side-card:first-child .rq-side-icon,
.rq-helper-card .rq-helper-icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: 16px !important;
}

.rq-create-shell .rq-side-card,
.rq-helper-card {
    border-radius: 22px !important;
    box-shadow: 0 14px 34px rgba(15, 84, 140, .07) !important;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (min-width: 1100px) {
    .rq-stats-clickable {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (max-width: 1200px) {
    .rq-card-grid,
    .rq-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .rq-grid {
        grid-template-columns: 1fr;
    }

    .rq-side-panel,
    .rq-create-shell .rq-side-panel,
    .rq-form-side {
        position: static;
        order: -1;
    }
}

@media (max-width: 760px) {
    .rq-list-hero,
    .wrq-hero,
    .rd-hero,
    .rq-list-panel,
    .wrq-panel,
    .rd-card,
    .sk-form-panel,
    .rq-compact-progress-card,
    .rq-side-card,
    .rq-helper-card {
        border-radius: 20px !important;
        padding: 18px !important;
    }

    .rq-list-shell h2,
    .wrq-shell h2,
    .rd-shell h2,
    .rq-create-shell h2 {
        font-size: clamp(1.35rem, 7vw, 1.85rem) !important;
    }

    .rq-review-card,
    .sk-form-grid,
    .rq-card-grid,
    .rq-stats-grid,
    .rq-meta-grid {
        grid-template-columns: 1fr;
    }

    .rq-list-hero,
    .rq-toolbar,
    .rq-card-footer,
    .rq-pagination,
    .rq-actions {
        align-items: stretch;
        flex-direction: column;
    }

        .rq-list-hero .sk-app-action,
        .rq-search-wrap,
        .rq-action-btn,
        .rq-pagination button,
        .rq-actions .sk-app-action,
        .rq-actions .sk-app-action-light {
            width: 100%;
        }

    .rq-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

        .rq-tabs::-webkit-scrollbar {
            display: none;
        }

        .rq-tabs button {
            flex: 0 0 auto;
        }

    .rq-upload-box {
        align-items: flex-start;
        flex-direction: column;
    }

    .rq-stat-action {
        min-height: 96px;
    }

    .rq-compact-progress-labels,
    .rq-compact-progress-steps {
        gap: 6px;
    }

        .rq-compact-progress-labels span,
        .rq-compact-progress-steps span {
            font-size: .68rem;
        }
}
/* Add at the END of Skanweb/wwwroot/css/skan-requests.css */

.rq-create-shell .rq-side-panel {
    gap: 12px;
}

.rq-create-shell .rq-compact-progress-card {
    padding: 16px 18px;
    border-radius: 20px;
    box-shadow: 0 12px 28px rgba(0, 61, 89, .10);
}

.rq-create-shell .rq-compact-progress-head {
    margin-bottom: 9px;
}

    .rq-create-shell .rq-compact-progress-head strong {
        font-size: .88rem;
        letter-spacing: -.01em;
    }

    .rq-create-shell .rq-compact-progress-head span {
        font-size: .78rem;
    }

.rq-create-shell .rq-compact-progress-track {
    height: 7px;
}

.rq-create-shell .rq-compact-progress-labels,
.rq-create-shell .rq-compact-progress-steps {
    gap: 7px;
    margin-top: 14px;
}

    .rq-create-shell .rq-compact-progress-labels span,
    .rq-create-shell .rq-compact-progress-steps span {
        min-height: 34px;
        font-size: .76rem;
        font-weight: 780;
    }

.rq-create-shell .rq-side-card.soft {
    position: relative;
    padding: 18px 18px 18px 78px !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 84, 140, .10);
    box-shadow: 0 10px 26px rgba(0, 61, 89, .055) !important;
}

    .rq-create-shell .rq-side-card.soft .rq-side-icon {
        position: absolute;
        top: 18px;
        left: 18px;
        width: 42px !important;
        height: 42px !important;
        flex: 0 0 42px !important;
        border-radius: 14px !important;
        color: var(--rq-green-dark);
        background: #e7f6f2;
        box-shadow: none;
        font-size: 1rem;
    }

    .rq-create-shell .rq-side-card.soft h4 {
        margin: 0 0 7px;
        color: #101827;
        font-size: .98rem;
        line-height: 1.25;
        font-weight: 820 !important;
        letter-spacing: -.018em;
    }

    .rq-create-shell .rq-side-card.soft p {
        margin: 0;
        color: #64748b;
        font-size: .86rem !important;
        line-height: 1.55 !important;
        font-weight: 480 !important;
    }

.rq-create-shell .rq-side-card:not(.soft) {
    padding: 18px !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 26px rgba(0, 61, 89, .05) !important;
}

    .rq-create-shell .rq-side-card:not(.soft) h4 {
        font-size: .98rem;
        font-weight: 820 !important;
    }

    .rq-create-shell .rq-side-card:not(.soft) li {
        font-size: .82rem !important;
        line-height: 1.45;
    }

@media (max-width: 1100px) {
    .rq-create-shell .rq-side-card.soft {
        padding-left: 72px !important;
    }
}

@media (max-width: 560px) {
    .rq-create-shell .rq-side-card.soft {
        padding: 16px !important;
    }

        .rq-create-shell .rq-side-card.soft .rq-side-icon {
            position: static;
            margin-bottom: 12px;
        }
}
/* Add at the END of Skanweb/wwwroot/css/skan-requests.css */

.rq-create-shell .rq-form-side {
    gap: 12px;
}

.rq-create-shell .rq-helper-card {
    position: relative;
    min-height: 0;
    padding: 18px 20px 18px 78px !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 84, 140, .10) !important;
    box-shadow: 0 10px 26px rgba(0, 61, 89, .055) !important;
}

    .rq-create-shell .rq-helper-card .rq-helper-icon {
        position: absolute;
        top: 18px;
        left: 20px;
        width: 42px !important;
        height: 42px !important;
        display: grid;
        place-items: center;
        border-radius: 14px !important;
        color: var(--rq-green-dark) !important;
        background: #e7f6f2 !important;
        box-shadow: none !important;
        font-size: 1rem !important;
    }

    .rq-create-shell .rq-helper-card h3 {
        margin: 0 0 7px !important;
        color: #101827 !important;
        font-size: .98rem !important;
        line-height: 1.25 !important;
        font-weight: 820 !important;
        letter-spacing: -.018em !important;
    }

    .rq-create-shell .rq-helper-card p {
        margin: 0 !important;
        color: #64748b !important;
        font-size: .86rem !important;
        line-height: 1.55 !important;
        font-weight: 480 !important;
    }

    .rq-create-shell .rq-helper-card + .rq-side-card,
    .rq-create-shell .rq-form-side .rq-side-card {
        padding: 18px !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        border: 1px solid rgba(15, 84, 140, .10) !important;
        box-shadow: 0 10px 26px rgba(0, 61, 89, .05) !important;
    }

.rq-create-shell .rq-compact-progress-card {
    border-radius: 18px !important;
    box-shadow: 0 12px 28px rgba(0, 61, 89, .10) !important;
}

@media (max-width: 560px) {
    .rq-create-shell .rq-helper-card {
        padding: 16px !important;
    }

        .rq-create-shell .rq-helper-card .rq-helper-icon {
            position: static;
            margin-bottom: 12px;
        }
}
/* =====================================================
   ITEM SEARCH PAGES
   Purpose: shared styles for Find Item create/list/detail pages.
   Placement: add this block at the END of Skanweb/wwwroot/css/skan-requests.css
   Notes: uses existing request variables from skan-requests.css:
   --rq-blue, --rq-blue-dark, --rq-green, --rq-green-dark,
   --rq-muted, --rq-border, --rq-soft, --rq-shadow
   ===================================================== */

/* =====================================================
   ITEM PAGE SHELL
   Applies to:
   - ItemRequests.razor
   - MyItemRequests.razor
   - ItemDetails.razor
   ===================================================== */

.item-list-shell,
.item-detail-shell,
.rq-item-create-shell {
    display: grid;
    gap: 18px;
}

    .item-list-shell .sk-auth-alert,
    .item-list-shell .sk-auth-success,
    .item-detail-shell .sk-auth-alert,
    .item-detail-shell .sk-auth-success,
    .rq-item-create-shell .sk-auth-alert,
    .rq-item-create-shell .sk-auth-success {
        margin: 0 0 16px;
    }

/* =====================================================
   ITEM LIST HERO
   Applies to:
   - ItemRequests.razor
   - MyItemRequests.razor
   Keeps same commercial style as request list hero.
   ===================================================== */

.item-list-hero {
    background: linear-gradient(135deg, var(--rq-blue-dark), var(--rq-blue) 56%, var(--rq-green)) !important;
}

    .item-list-hero .sk-app-action {
        gap: 8px;
        border: 0;
        white-space: nowrap;
    }

/* =====================================================
   ITEM STATS CARDS
   Applies to:
   - ItemRequests.razor
   - MyItemRequests.razor
   Extends existing .rq-stat-card / .rq-stat-action.
   ===================================================== */

.item-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

    .item-stats-grid .rq-stat-action {
        min-height: 108px;
        text-decoration: none;
    }

        .item-stats-grid .rq-stat-action strong i {
            font-size: 1.42rem;
            color: var(--rq-blue);
        }

.item-new-link {
    color: inherit;
}

    .item-new-link:hover {
        text-decoration: none;
    }

/* =====================================================
   ITEM LIST TOOLBAR + SEARCH
   Applies to:
   - ItemRequests.razor
   - MyItemRequests.razor
   ===================================================== */

.item-toolbar {
    align-items: center;
}

.item-search-wrap {
    width: min(440px, 100%);
    position: relative;
}

    .item-search-wrap input {
        padding-right: 32px;
    }

.item-clear-search {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    color: var(--rq-muted);
    background: rgba(15, 84, 140, .08);
    cursor: pointer;
}

    .item-clear-search:hover {
        color: var(--rq-blue-dark);
        background: rgba(15, 84, 140, .14);
    }

.item-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.item-filter-pill {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border: 1px solid var(--rq-border);
    border-radius: 999px;
    color: #506176;
    background: var(--rq-soft);
    font-size: .84rem;
    font-weight: 760;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}

    .item-filter-pill:hover {
        color: var(--rq-blue-dark);
        border-color: rgba(15, 84, 140, .22);
        transform: translateY(-1px);
    }

    .item-filter-pill.active {
        color: #ffffff;
        background: linear-gradient(135deg, var(--rq-blue), var(--rq-green));
        border-color: transparent;
        box-shadow: 0 10px 22px rgba(15, 84, 140, .14);
    }

.item-result-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: -4px 0 14px;
    color: var(--rq-muted);
    font-size: .84rem;
    font-weight: 680;
}

/* =====================================================
   ITEM REQUEST GRID
   Applies to:
   - ItemRequests.razor
   - MyItemRequests.razor
   ===================================================== */

.item-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.item-request-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 18px;
    border-radius: 22px;
    background: #ffffff;
    border: 1px solid var(--rq-border);
    box-shadow: var(--rq-shadow);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

    .item-request-card:hover {
        transform: translateY(-2px);
        border-color: rgba(15, 84, 140, .18);
        box-shadow: 0 18px 42px rgba(0, 61, 89, .10);
    }

.item-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.item-request-card h3 {
    margin: 0;
    color: #111827;
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 780;
    letter-spacing: -.018em;
}

.item-request-card p {
    margin: 10px 0 0;
    color: var(--rq-muted);
    font-size: .84rem;
    line-height: 1.58;
    font-weight: 460;
}

/* =====================================================
   ITEM BADGES + STATUS PILLS
   Applies to:
   - ItemRequests.razor
   - MyItemRequests.razor
   - ItemDetails.razor
   ===================================================== */

.item-kind-badge,
.item-urgent,
.item-confirmed {
    min-height: 27px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 760;
    white-space: nowrap;
}

    .item-kind-badge.item {
        color: #075985;
        background: #e0f2fe;
    }

    .item-kind-badge.food {
        color: #166534;
        background: #dcfce7;
    }

    .item-kind-badge.medicine {
        color: #7c2d12;
        background: #ffedd5;
    }

    .item-kind-badge.other {
        color: #334155;
        background: #e2e8f0;
    }

.item-status-stack {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.item-urgent {
    color: #b42318;
    background: #fff1f2;
}

.item-confirmed {
    color: var(--rq-green-dark);
    background: #e7f6f2;
}

/* =====================================================
   ITEM CARD META + TARGETS
   Applies to:
   - ItemRequests.razor
   - MyItemRequests.razor
   - ItemDetails.razor targets
   ===================================================== */

.item-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 16px;
}

    .item-meta-grid span {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 8px;
        color: #40566d;
        font-size: .82rem;
        font-weight: 560;
    }

    .item-meta-grid i {
        width: 14px;
        color: var(--rq-blue);
        text-align: center;
    }

.item-targets {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
}

    .item-targets span {
        min-height: 28px;
        display: inline-flex;
        align-items: center;
        padding: 0 10px;
        border-radius: 999px;
        color: var(--rq-blue-dark);
        background: #e9f5fb;
        font-size: .76rem;
        font-weight: 740;
    }

.detail-targets {
    margin-top: 18px;
}

.item-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--rq-border);
}

/* =====================================================
   ITEM LIST SKELETON + EMPTY STATE
   Applies to:
   - ItemRequests.razor
   - MyItemRequests.razor
   ===================================================== */

.item-request-card.skeleton {
    min-height: 230px;
    gap: 14px;
    pointer-events: none;
}

    .item-request-card.skeleton div {
        height: 18px;
        border-radius: 999px;
        background: linear-gradient(90deg, #eef4f8, #f8fbfd, #eef4f8);
        background-size: 220% 100%;
        animation: itemPulse 1.1s linear infinite;
    }

        .item-request-card.skeleton div:nth-child(1) {
            width: 48%;
        }

        .item-request-card.skeleton div:nth-child(2) {
            width: 86%;
        }

        .item-request-card.skeleton div:nth-child(3) {
            width: 70%;
        }

        .item-request-card.skeleton div:nth-child(4) {
            width: 58%;
            margin-top: auto;
        }

@keyframes itemPulse {
    to {
        background-position: -220% 0;
    }
}

.item-empty .sk-app-action {
    text-decoration: none;
}

/* =====================================================
   ITEM DETAILS RESPONSE FORM
   Applies to:
   - ItemDetails.razor seller/provider response area
   ===================================================== */

.item-response-card .sk-form-field {
    margin-top: 16px;
}

.item-response-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.item-availability {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(15, 84, 140, .12);
    border-radius: 16px;
    color: #40566d;
    background: #ffffff;
    font-weight: 760;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}

    .item-availability.active {
        color: var(--rq-green-dark);
        background: #e7f6f2;
        border-color: rgba(0, 110, 100, .22);
    }

        .item-availability.active.no {
            color: #b42318;
            background: #fff1f2;
            border-color: #fecdd3;
        }

.rq-upload-box.compact {
    min-height: 74px !important;
    border-radius: 18px;
}

/* =====================================================
   ITEM DETAILS RESPONSE LIST
   Applies to:
   - ItemDetails.razor response cards
   ===================================================== */

.item-response-list {
    display: grid;
    gap: 12px;
}

.item-response-row {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border-radius: 20px;
    background: var(--rq-soft);
    border: 1px solid rgba(15, 84, 140, .08);
}

    .item-response-row.confirmed {
        border-color: rgba(0, 110, 100, .20);
        background: linear-gradient(180deg, rgba(0, 110, 100, .055), #ffffff 82%);
    }

.item-response-main {
    min-width: 0;
}

.item-response-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

    .item-response-head h4 {
        margin: 0;
        color: #111827;
        font-size: .98rem;
        font-weight: 780;
    }

    .item-response-head span,
    .item-response-actions > span {
        min-height: 27px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 0 10px;
        border-radius: 999px;
        font-size: .72rem;
        font-weight: 760;
        white-space: nowrap;
    }

        .item-response-head span.available {
            color: var(--rq-green-dark);
            background: #e7f6f2;
        }

        .item-response-head span.unavailable {
            color: #b42318;
            background: #fff1f2;
        }

.item-response-main p {
    margin: 7px 0 0;
    color: #40566d;
    font-size: .86rem;
    line-height: 1.52;
}

.item-response-main small {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
    color: var(--rq-muted);
    font-size: .78rem;
    font-weight: 650;
}

.item-response-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* =====================================================
   ITEM DETAILS SIDE ACTIONS
   Applies to:
   - ItemDetails.razor right side cards
   ===================================================== */

.item-quick-actions {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.item-info-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* =====================================================
   ITEM CREATE PAGE SMALL ADDITIONS
   Applies to:
   - RequestFindNew.razor
   Uses base .rq-create-shell styles from request form.
   ===================================================== */

.rq-item-create-shell .rq-location-chip {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 18px;
    background: #e7f6f2;
    border: 1px solid rgba(0, 110, 100, .13);
    color: var(--rq-green-dark);
    font-weight: 720;
}

    .rq-item-create-shell .rq-location-chip.muted {
        color: #40566d;
        background: var(--rq-soft);
        border-color: var(--rq-border);
    }

    .rq-item-create-shell .rq-location-chip span {
        flex: 1;
        font-size: .86rem;
        line-height: 1.35;
    }

    .rq-item-create-shell .rq-location-chip button {
        min-height: 34px;
        border: 0;
        border-radius: 999px;
        padding: 0 12px;
        color: #ffffff;
        background: linear-gradient(135deg, var(--rq-blue), var(--rq-green));
        font-size: .78rem;
        font-weight: 780;
        cursor: pointer;
        white-space: nowrap;
    }

.rq-item-create-shell .rq-submit {
    min-width: 170px;
}

/* =====================================================
   ITEM RESPONSIVE RULES
   Applies to all item search pages.
   ===================================================== */

@media (max-width: 1200px) {
    .item-grid,
    .item-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .item-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .item-search-wrap,
    .item-toolbar-actions,
    .item-toolbar-actions .wrq-refresh,
    .item-filter-pill {
        width: 100%;
    }

    .item-toolbar-actions {
        justify-content: stretch;
    }

    .item-filter-pill {
        flex: 1 1 calc(50% - 8px);
    }

    .item-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .item-grid,
    .item-stats-grid,
    .item-meta-grid,
    .item-response-options,
    .item-info-grid {
        grid-template-columns: 1fr;
    }

    .item-request-card,
    .item-response-row {
        border-radius: 20px;
    }

    .item-card-footer,
    .item-card-top,
    .item-response-head,
    .item-response-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .item-response-row {
        grid-template-columns: 46px minmax(0, 1fr);
    }

    .item-response-actions {
        grid-column: 1 / -1;
        width: 100%;
    }

        .item-response-actions .rd-main-btn,
        .item-card-footer .rq-action-btn {
            width: 100%;
        }

    .rq-item-create-shell .rq-location-chip {
        align-items: flex-start;
        flex-direction: column;
    }

        .rq-item-create-shell .rq-location-chip button {
            width: 100%;
        }
}