/* === Keep: utility + layout you already had ================================= */

.toast {

    position: fixed;

    left: 50%;

    top: 12px;

    transform: translateX(-50%);

    background: #111827;

    color: #fff;

    padding: .5rem .75rem;

    border-radius: .5rem;

    opacity: 0;

    transition: opacity .2s, transform .2s;

    z-index: 10000;

    font-size: .875rem
}

.toast.show {

    opacity: 1;

    transform: translate(-50%, 0)
}

.tabs {

    --tab-pad: .6rem 1rem
}

.tabs .tabs-title>a {

    padding: var(--tab-pad);

    border-radius: .4rem .4rem 0 0
}

.tabs .tabs-title.is-active>a {

    background: #fff;

    border: 1px solid #e5e7eb;

    border-bottom-color: #fff
}

.tabs-content {

    border: 1px solid #e5e7eb;

    border-top: 0;

    background: #fff;

    border-radius: 0 .4rem .4rem .4rem
}

.table-scroll {

    overflow: auto
}

.table-scroll table {

    border-collapse: separate;

    border-spacing: 0
}

.table-scroll table th:first-child,
.table-scroll table td:first-child {

    position: sticky;

    left: 0;

    z-index: 2;

    box-shadow: 1px 0 0 rgba(0, 0, 0, .05)
}

thead th {

    white-space: nowrap
}

.table-scroll thead th {

    position: sticky;

    top: 0;

    z-index: 5;

    background: #fff
}

.table-scroll thead th:first-child {

    left: 0;

    z-index: 6
}

.table-scroll tbody td:first-child {

    z-index: 1;

    background: #fff
}

.chip {

    display: inline-block;

    padding: .15rem .45rem;

    border-radius: 999px;

    font-size: .75rem;

    line-height: 1;

    background: #e5e7eb;

    color: #111827;

    border: 1px solid #cbd5e1
}

.chip--ok {

    background: #e7f6ec;

    color: #065f46;

    border-color: #b7ebcd
}

.chip--mid {

    background: #fff7ed;

    color: #9a3412;

    border-color: #fed7aa
}

.chip--warn {

    background: #fee2e2;

    color: #991b1b;

    border-color: #fecaca
}

.callout.success {

    background: #e8faf1ff;

    border-left: 4px solid #047857
}

.callout.alert {

    background: #fee2e2;

    border-left: 4px solid #b91c1c
}

.callout.info {

    background: #e0f2fe;

    border-left: 4px solid #0369a1
}

.assess-header,
.docs-header {

    display: flex;

    flex-wrap: nowrap;

    align-items: center;

    gap: .35rem;

    padding: .4rem;

    background: transparent;

    border: 0;

    border-radius: .4rem;

    cursor: pointer
}

.assess-header:focus,
.docs-header:focus {

    outline: 2px solid #111827;

    outline-offset: 2px;

    border-radius: .4rem
}

.assess-details,
.docs-details {

    margin: .4rem 0 0 .1rem;

    color: #374151
}

.assess-header .toggle-arrow,
.docs-header .toggle-arrow {

    transition: transform .15s ease
}

.assess-header[aria-expanded="true"] .toggle-arrow,
.docs-header[aria-expanded="true"] .toggle-arrow {

    transform: rotate(180deg)
}

a.tiny-link {

    font-size: .8rem;

    text-decoration: underline
}

.tiny-muted {

    color: #6b7280;

    font-size: .75rem;

    margin-left: .35rem
}

.segmented {

    display: flex;

    flex-wrap: wrap;

    gap: .5rem;

    /*margin-top: .5rem*/

}

.segmented .seg {

    border: 1px solid #cbd5e1;

    background: #fff;

    color: #111827;

    padding: .35rem .6rem;

    border-radius: 999px;

    font-size: .875rem;

    line-height: 1;

    cursor: pointer;

    user-select: none
}

.segmented .seg.is-active {

    background: #6f42c1;

    color: #fff;

    border-color: #6f42c1
}

.segmented .seg:focus {

    outline: 2px solid #6f42c1;

    outline-offset: 2px
}

.attn-toggle {

    appearance: none;

    border: 0;

    background: transparent;

    padding: .15rem 0;

    margin: 0;

    font: inherit;

    color: inherit;

    display: block;

    width: 100%;

    text-align: left;

    cursor: pointer
}

.attn-toggle:focus {

    outline: 2px solid #111827;

    outline-offset: 2px;

    border-radius: .25rem
}

.attn-panel[hidden] {

    display: none !important
}

.attn-toggle .fa-caret-down {

    transition: transform .15s ease
}

.attn-toggle[aria-expanded="true"] .fa-caret-down {

    transform: rotate(180deg)
}

.attn-panel .attn-ol>li::marker {

    font-weight: 600
}

.attn-panel .attn-ol {

    list-style: none;

    margin: .25rem 0 0;

    padding-left: .875rem;

    counter-reset: attn
}

.attn-panel .attn-ol>li {

    counter-increment: attn;

    position: relative;

    margin: .35rem 0
}

.attn-panel .attn-ol>li::before {

    content: counter(attn) ".";

    position: absolute;

    left: -.750rem;

    min-width: 1.25rem;

    text-align: right;

    font-weight: 600;

    line-height: 1.2;

    color: #111827
}

.attn-panel .attn-ol>li>i.fa-solid {

    margin-left: .875rem;

    margin-right: .175rem;

    line-height: 1.2;

    width: 1.1em;

    text-align: center
}

.attn-ol--docs>li>i.fa-solid {

    color: #b91c1c
}

.attn-ol--forms>li>i.fa-solid {

    color: #374151
}

.attn-showall-btn {

    margin-top: .35rem;

    font-size: .875rem;

    background: transparent;

    border: 1px solid #cbd5e1;

    border-radius: .35rem;

    padding: .25rem .5rem;

    cursor: pointer
}

.attn-showall-btn:focus {

    outline: 2px solid #111827;

    outline-offset: 2px
}

@keyframes rowPulse {

    0% {

        background: #fffbeb
    }

    100% {

        background: transparent
    }

}

.row-pulse {

    animation: rowPulse 1.1s ease-out 1
}

.is-disabled {

    opacity: .5;

    pointer-events: none
}

.icon_gap {

    margin-left: .4rem
}

.kpi-chip {

    display: inline-block;

    min-width: 1.4em;

    padding: .1rem .5rem;

    border-radius: 999px;

    text-align: center;

    background: #e5e7eb
}

.kpi-chip--warn {

    background: #fee2e2;

    color: #991b1b
}

.field-error {

    color: #b91c1c
}

.sub-fav-bar {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    align-content: flex-start;

    gap: .5rem;

    overflow: visible;

    padding: .5rem;

    border: 1px solid #e5e7eb;

    background: #fff;

    border-radius: .5rem;

    min-height: 1.75rem;

    max-width: 100%
}

.cell:has(#sub-fav-bar) {

    min-width: 0
}

.fav-chip {

    display: flex;

    align-items: center;

    gap: .4rem;

    padding: .3rem .55rem;

    border: 1px solid #cbd5e1;

    border-radius: 999px;

    white-space: nowrap;

    cursor: pointer
}

.fav-chip .dot {

    display: inline-block;

    width: .5rem;

    height: .5rem;

    border-radius: 999px;

    background: #9ca3af
}

.fav-chip .dot.warn {

    background: #ef4444
}

.fav-chip .dot.ok {

    background: #10b981
}

.fav-toggle {

    background: transparent;

    border: 0;

    padding: 0 .25rem;

    cursor: pointer
}

.fav-toggle .fa-star {

    opacity: .5
}

.fav-toggle.is-fav .fa-star {

    opacity: 1;

    color: #f59e0b
}

.alpha-bar {

    display: flex;

    gap: .35rem;

    flex-wrap: wrap;

    margin: .5rem 0 .75rem
}

.alpha-bar .seg {

    padding: .25rem .5rem;

    border-radius: 999px;

    border: 1px solid #cbd5e1;

    background: #fff;

    cursor: pointer
}

.alpha-bar .seg.is-active {

    background: #6f42c1;

    color: #fff;

    border-color: #6f42c1
}

@keyframes starPulse {

    0% {

        transform: scale(1)
    }

    50% {

        transform: scale(1.25)
    }

    100% {

        transform: scale(1)
    }

}

.pulse-star .fav-toggle .fa-star {

    animation: starPulse .9s ease-in-out infinite
}

#subcontractor-table td.fav-col,
#subcontractor-table th[title="Bookmark"] {

    width: 2.25rem;

    text-align: center
}

ul.no-bullet,
.no-bullet ul,
.docs-details .no-bullet,
.missing-documents .no-bullet,
#attn-docs-panel .no-bullet,
#attn-forms-panel .no-bullet {

    list-style: none !important;

    padding-left: 0 !important;

    margin-left: 0
}

.badge {

    display: inline-block;

    padding: .15rem .5rem;

    border-radius: 999px;

    background: #eef2ff;

    color: #3730a3;

    font-size: .75rem
}

.header-bar {

    display: flex;

    align-items: center;

    gap: .75rem;

    margin-bottom: .75rem
}

/* Request modal chips (kept) */

#req-docs-list {

    display: flex;

    flex-wrap: wrap;

    gap: .5rem
}

#req-docs-list .seg {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: .5rem .75rem;

    border: 1px solid #dcdcdc;

    border-radius: 9999px;

    cursor: pointer;

    user-select: none;

    min-width: 11rem
}

#req-docs-list .seg input.req-doc-cb {

    position: absolute;

    opacity: 0;

    width: 1px;

    height: 1px;

    overflow: hidden;

    pointer-events: none
}

#req-docs-list .seg span {

    display: block;

    line-height: 1.2;

    white-space: normal;

    max-width: 100%;

    pointer-events: none
}

#req-docs-list .seg.is-selected {

    border-color: #2f6fed;

    background: #f3f7ff;

    font-weight: 600
}

#req-docs-list .seg:focus-within {

    outline: 2px solid #2f6fed;

    outline-offset: 2px
}

/* Keep: in-row “More” trigger button cell */

.table-actions-trigger {

    white-space: nowrap
}

.table-actions-trigger .btn-more {

    display: block;

    width: 100%;

    box-sizing: border-box;

    text-align: center;

    padding: 6px 10px;

    font-size: 13px;

    line-height: 1;

    border: 1px solid #ccc;

    border-radius: 4px;

    background: #fff;

    cursor: pointer
}

/* === New unified design tokens (single source of truth) =================== */

:root {

    --brand: #0f766e;

    --brand-700: #0b5b55;

    --brand-50: #ecfdf5;

    --ink: #0f172a;

    --muted-ink: #475569;

    --ok: #15803d;

    --ok-50: #ecfdf5;

    --warn: #b45309;

    --warn-50: #fff7ed;

    --danger: #b91c1c;

    --danger-50: #fef2f2;

    --ring: #60a5fa;

    --chip-bg: #f1f5f9;

    --card: #f8fafc;

    --line: #e2e8f0;

}

/* === Inline full-width panel (single definition) ========================= */

.table-inline-row td {

    padding: 0 !important;

    background: #fff
}

.table-inline-panel {

    background: #fff;

    border: 1px solid var(--line);

    border-radius: .75rem;

    box-shadow: 0 1px 2px rgba(2, 6, 23, .04)
}

.table-inline-panel .inline-shell {

    padding: .85rem
}

.table-inline-panel .inline-head {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: .75rem;

    padding: .25rem .25rem .5rem;

    border-bottom: 1px solid var(--line);

    margin-bottom: .6rem
}

.table-inline-panel .inline-title {

    font-weight: 800;

    color: var(--ink)
}

.table-inline-panel .inline-sub {

    color: var(--muted-ink);

    font-size: .92rem
}

.table-inline-panel .inline-actions {

    display: flex;

    flex-wrap: wrap;

    gap: .5rem
}

.table-inline-panel .inline-shell .inline-actions .button {

    border-radius: .65rem;

    font-weight: 800;

    font-size: .98rem;

    min-height: 44px;

    padding: .65rem 1rem;

    display: inline-flex;

    align-items: center;

    gap: .5rem;

    border: 1px solid #1473e6;

}

.table-inline-panel .inline-shell .inline-actions .button.primary,
.table-inline-panel .inline-shell .inline-actions .button.is-primary {

    background: var(--brand);

    border-color: var(--brand);

    color: #fff
}



@media (hover:hover) {

    .table-inline-panel .inline-shell .inline-actions .button.primary:hover {

        background: var(--brand-700);

        border-color: var(--brand-700)
    }

}

.table-inline-panel .inline-shell .inline-actions .button.secondary {

    background: #fff;

    border-color: var(--line);

    color: var(--ink)
}



@media (hover:hover) {

    .table-inline-panel .inline-shell .inline-actions .button.secondary:hover {

        background: var(--chip-bg);

        border-color: #cbd5e1
    }

}

.table-inline-panel .inline-shell .inline-actions .button.ghost {

    background: transparent;

    border-color: var(--line);

    color: var(--muted-ink)
}

.table-inline-panel .inline-shell .inline-actions .button:focus {

    outline: 0;

    box-shadow: 0 0 0 3px var(--ring)
}

.table-inline-panel .inline-shell .inline-actions .button i {

    font-size: 1rem
}

/* Document list “cards” inside inline panel */

.table-inline-panel .js-docs-list {

    margin: .5rem 0 0;

    padding: 0;

    list-style: none;

    display: grid;

    grid-template-columns: 1fr;

    gap: .5rem
}

.table-inline-panel .js-docs-list li {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: .75rem;

    background: var(--card);

    border: 1px solid var(--line);

    border-radius: .6rem;

    padding: .6rem .75rem;

}

.table-inline-panel .js-docs-list .doc-name {

    font-weight: 600;

    color: var(--ink);

    padding-right: .875em;

}

.table-inline-panel .js-docs-list .tiny-muted {

    color: var(--muted-ink);

    margin-left: .35rem
}

.table-inline-panel .js-docs-list .tiny-link {

    font-weight: 600;

    text-decoration: none;

    padding: .4rem .6rem;

    border-radius: .5rem;

    border: 1px solid var(--line);

    background: #fff;

    color: var(--brand);

    display: inline-flex;

    align-items: center;

    gap: .4rem
}



@media (hover:hover) {

    .table-inline-panel .js-docs-list .tiny-link:hover {

        border-color: #cbd5e1;

        background: var(--brand-50)
    }

}

.table-inline-panel .js-docs-list .tiny-link:focus {

    outline: 0;

    box-shadow: 0 0 0 3px var(--ring)
}

.table-inline-panel .js-docs-list .req-tag,
.table-inline-panel .js-docs-list .tiny-muted.req-tag {

    background: var(--warn-50);

    color: var(--warn);

    border: 1px solid #fed7aa;

    border-radius: 999px;

    padding: .15rem .5rem;

    font-weight: 700;

    margin-left: .4rem;

    display: inline-flex;

    align-items: center;

    gap: .35rem
}

.table-inline-panel .js-docs-list .pending-tag {

    background: var(--ok-50);

    color: var(--ok);

    border-color: #86efac
}

/* === The “More ▾” panel — unified style (single definition) ============== */

.table-actions-row {

    background: #fff;

    box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line)
}

.table-actions-row td {

    padding: 0 !important
}

.table-actions-row .table-actions-list {

    display: flex;

    flex-wrap: wrap;

    gap: .5rem .5rem;

    padding: .5rem 0;

    margin: 0;

    list-style: none
}

.table-actions-row .table-actions-list a,
.table-actions-row .table-actions-list button {

    appearance: none;

    -webkit-appearance: none;

    border: 1px solid var(--line);

    background: var(--chip-bg);

    color: var(--ink);

    font-weight: 600;

    font-size: .95rem;

    line-height: 1.2;

    border-radius: 999px;

    padding: .6rem .9rem;

    min-height: 40px;

    display: inline-flex;

    align-items: center;

    gap: .5rem;

    text-decoration: none;

    cursor: pointer;

    transition: transform .03s ease, background-color .15s, border-color .15s, color .15s
}



@media (hover:hover) {

    .table-actions-row .table-actions-list a:hover,
    .table-actions-row .table-actions-list button:hover {

        background: #fff;

        border-color: #cbd5e1
    }

}

.table-actions-row .table-actions-list a:focus,
.table-actions-row .table-actions-list button:focus {

    outline: 0;

    box-shadow: 0 0 0 3px var(--ring);

    background: #fff
}

.table-actions-row .table-actions-list a:active,
.table-actions-row .table-actions-list button:active {

    transform: translateY(1px)
}

/* variants */

.table-actions-row .table-actions-list [data-variant="primary"],
.table-actions-row .table-actions-list .is-primary {

    background: var(--brand);

    border-color: var(--brand);

    color: #fff
}

.table-actions-row .table-actions-list [data-variant="primary"]:hover {

    background: var(--brand-700);

    border-color: var(--brand-700)
}

.table-actions-row .table-actions-list [data-variant="ok"],
.table-actions-row .table-actions-list .is-ok {

    background: var(--ok-50);

    border-color: #86efac;

    color: var(--ok)
}

.table-actions-row .table-actions-list [data-variant="warn"],
.table-actions-row .table-actions-list .is-warn {

    background: var(--warn-50);

    border-color: #fed7aa;

    color: var(--warn)
}

.table-actions-row .table-actions-list [data-variant="danger"],
.table-actions-row .table-actions-list .is-danger {

    background: var(--danger-50);

    border-color: #fecaca;

    color: var(--danger)
}

.table-actions-row .table-actions-list i {

    font-size: 1rem;

    opacity: .9
}



/* === Mobile & motion ===================================================== */

@media (max-width:640px) {

    .table-actions-row .table-actions-list {

        gap: .4rem
    }

    .table-actions-row .table-actions-list a,
    .table-actions-row .table-actions-list button {

        width: 100%;

        justify-content: center
    }

    .table-inline-panel .inline-head {

        flex-direction: column;

        align-items: stretch
    }

    .table-inline-panel .inline-shell .inline-actions .button {

        width: 100%;

        justify-content: center
    }

}



@media (prefers-reduced-motion:reduce) {

    .table-actions-row .table-actions-list a,
    .table-actions-row .table-actions-list button {

        transition: none
    }

}

/* ===== Questionnaire cards inside expanded row ========================= */

.table-inline-panel .q-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: .75rem;

    margin-top: .25rem;

}

.table-inline-panel .q-card {

    background: #fff;

    border: 1px solid var(--line);

    border-radius: .9rem;

    padding: .9rem;

    box-shadow: 0 1px 2px rgba(2, 6, 23, .05);

    display: flex;

    flex-direction: column;

    gap: .6rem;

    position: relative;

}

/* Left accent strip (clear affordance) */

.table-inline-panel .q-card::before {

    content: "";

    position: absolute;

    inset: 0 auto 0 0;

    width: .3rem;

    border-radius: .9rem 0 0 .9rem;

    background: linear-gradient(180deg, var(--brand), #059669);

    opacity: .12;

}

/* OHS / HRW accent colors */

.table-inline-panel .q-card.q-kind--ohs::before {

    background: linear-gradient(180deg, #0f766e, #059669);

    opacity: .18;

}

.table-inline-panel .q-card.q-kind--hrw::before {

    background: linear-gradient(180deg, #b45309, #d97706);

    opacity: .20;

}

.inline-section .q-title {

    display: flex;

    align-items: center;

    gap: .6rem;

    font-weight: 800;

    color: var(--ink);

    font-size: 1.02rem;

    line-height: 1.2;

}

.inline-section .q-kind--ohs .q-icon {

    width: 2.1rem;

    height: 2.1rem;

    border-radius: 50%;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: var(--chip-bg);

    border: 1px solid var(--line);

}

.inline-section .q-kind--ohs .q-icon {

    background: #dde0e3;

    border-color: #cbd5e1;

}

.inline-section .q-kind--hrw .q-icon {

    background: #dde0e3;

    border-color: #cbd5e1;

}

.table-inline-panel .q-desc {

    color: var(--muted-ink);

    font-size: .925rem;

    line-height: 1.35;

}

.table-inline-panel .q-ctas {

    display: flex;

    flex-wrap: wrap;

    gap: .5rem;

}

/* Big, glove-friendly buttons (re-use your tokens) */

.table-inline-panel .q-btn {

    display: inline-flex;

    align-items: center;

    gap: .5rem;

    min-height: 44px;

    padding: .65rem 1rem;

    border-radius: .7rem;

    font-weight: 800;

    text-decoration: none;

    cursor: pointer;

    border: 1px solid var(--line);

    background: #fff;

    color: var(--ink);

    transition: background-color .15s, border-color .15s, transform .03s;

}



@media (hover:hover) {

    .table-inline-panel .q-btn:hover {

        background: var(--chip-bg);

        border-color: #cbd5e1;

    }

}

.table-inline-panel .q-btn:focus {

    outline: 0;

    box-shadow: 0 0 0 3px var(--ring);

}

/* Primary emphasis */

.table-inline-panel .q-btn.primary {

    background: var(--brand);

    border-color: var(--brand);

    color: #fff;

}



@media (hover:hover) {

    .table-inline-panel .q-btn.primary:hover {

        background: #0b5b55;

        border-color: #0b5b55;

    }

}

/* Semantic hinting per kind */

.table-inline-panel .q-kind--hrw .q-btn.primary {

    background: #b45309;

    border-color: #b45309;

}

.table-inline-panel .q-kind--hrw .q-btn.primary:hover {

    background: #9a3f07;

    border-color: #9a3f07;

}

/* Tuck away any tiny legacy text links so we don’t double the CTAs */

.table-inline-panel a.js-request:not(.q-btn),
.table-inline-panel a.js-complete:not(.q-btn) {

    position: absolute !important;

    width: 1px;

    height: 1px;

    overflow: hidden;

    clip: rect(0 0 0 0);

    white-space: nowrap;

}

/* ===== Neutral Questionnaire cards (OHS/HRW) ============================ */

.table-inline-panel .q-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: .8rem;

    margin-top: .25rem;

}

.table-inline-panel .q-card {

    background: #fff;

    border: 1px solid var(--line);

    border-radius: .9rem;

    padding: .95rem;

    box-shadow: 0 1px 2px rgba(2, 6, 23, .05);

    display: flex;

    flex-direction: column;

    gap: .65rem;

    position: relative;

}

/* Neutral left accent strip (steel/grey) */

.table-inline-panel .q-card::before {

    content: "";

    position: absolute;

    inset: 0 auto 0 0;

    width: .3rem;

    border-radius: .9rem 0 0 .9rem;

    background: linear-gradient(180deg, #475569, #334155);
    /* slate steel */

    opacity: .16;

}

/* Slight tint difference so OHS vs HRW are distinguishable but both neutral */

.table-inline-panel .q-card.q-kind--ohs::before {

    background: linear-gradient(180deg, #475569, #334155);

    opacity: .18;

}

.table-inline-panel .q-card.q-kind--hrw::before {

    background: linear-gradient(180deg, #64748b, #475569);

    opacity: .18;

}

.table-inline-panel .q-title {

    display: flex;

    align-items: center;

    gap: .6rem;

    font-weight: 800;

    color: var(--ink);

    font-size: 1.02rem;

    line-height: 1.2;

}

.table-inline-panel .q-icon {

    width: 2.1rem;

    height: 2.1rem;

    border-radius: 50%;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: #f1f5f9;

    border: 1px solid #e2e8f0;
    /* neutral icon chip */

    color: #334155;

}

.table-inline-panel .q-desc {

    color: var(--muted-ink);

    font-size: .925rem;

    line-height: 1.35;

}

.table-inline-panel .q-ctas {

    display: flex;

    flex-wrap: wrap;

    gap: .5rem;

}

/* Neutral/steel buttons */

.table-inline-panel .q-btn {

    display: inline-flex;

    align-items: center;

    gap: .5rem;

    min-height: 44px;

    padding: .65rem 1rem;

    border-radius: .7rem;

    font-weight: 800;

    text-decoration: none;

    cursor: pointer;

    border: 1px solid var(--line);

    background: #fff;

    color: #111827;

    transition: background-color .15s, border-color .15s, transform .03s;

}



@media (hover:hover) {

    .table-inline-panel .q-btn:hover {

        background: #f1f5f9;

        border-color: #cbd5e1;

    }

}

.table-inline-panel .q-btn:focus {

    outline: 0;

    box-shadow: 0 0 0 3px var(--ring);

}

/* Primary still neutral (steel) */

.table-inline-panel .q-btn.primary {

    background: #475569;

    border-color: #475569;

    color: #fff;

}



@media (hover:hover) {

    .table-inline-panel .q-btn.primary:hover {

        background: #334155;

        border-color: #334155;

    }

}

/* Small due-chip */

.table-inline-panel .q-meta {

    display: inline-flex;

    align-items: center;

    gap: .4rem;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    color: #334155;

    padding: .2rem .5rem;

    border-radius: 999px;

    font-size: .8rem;

    font-weight: 700;

}

.table-inline-panel .q-meta i {

    font-size: .9em
}

/* ==== Unified "Details" inline workbench polish ====================== */

.table-inline-panel .inline-head {

    align-items: center
}

.table-inline-panel .btn-inline-close {

    appearance: none;

    border: 1px solid var(--line);

    background: #fff;

    color: var(--ink);

    border-radius: .55rem;

    padding: .4rem .6rem;

    line-height: 1;

    cursor: pointer;

}



@media(hover:hover) {

    .table-inline-panel .btn-inline-close:hover {

        background: var(--card)
    }

}

.table-inline-panel .inline-sections {

    display: grid;

    gap: .75rem;

    grid-template-columns: 1.1fr 1fr;

    align-items: start;

}



@media (max-width: 980px) {

    .table-inline-panel .inline-sections {

        grid-template-columns: 1fr
    }

}

/* Sub-section wrappers for breathing room */

.table-inline-panel .inline-section {

    background: transparent;

}

/* Row hover—very light, doesn’t fight your sticky columns */

.dashboard tbody tr:not(.table-inline-row):hover>td {

    background: #f8fafc
}

/* Center chip text vertically + horizontally */

.chip {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    vertical-align: middle;

    line-height: 1.1;

    min-height: 1.65rem;

}

/* Kill caret clutter but keep cells clickable */

.toggle-arrow {

    display: none !important;

}

/* Details panel WOW polish (neutral/steel, high contrast, glove-friendly) */

.table-inline-panel {

    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);

    border: 1px solid var(--line);

    border-radius: 1rem;

    box-shadow: 0 8px 24px rgba(2, 6, 23, .08), 0 2px 6px rgba(2, 6, 23, .04);

}

.table-inline-panel .inline-shell {

    padding: 1rem 1rem 1.1rem;

}

.table-inline-panel .inline-head {

    padding: .6rem .4rem .8rem;

    border-bottom: 1px solid var(--line);

    align-items: flex-start;

    gap: 1rem;

}

.table-inline-panel .inline-title {

    font-size: 1.1rem;

    font-weight: 900;

    letter-spacing: .2px;

}

.table-inline-panel .inline-sub {

    color: #475569;

    font-size: .93rem;

    margin-top: .15rem;

}

.table-inline-panel .inline-chipbar {

    margin-top: .45rem;

    display: flex;

    gap: .35rem;

    flex-wrap: wrap;

}

.table-inline-panel .inline-right {

    display: flex;

    gap: .6rem;

    align-items: flex-start;

    flex-wrap: wrap;

    padding-right: 1rem;

}

.table-inline-panel .mini-h {

    font-weight: 800;

    color: #0f172a;

    margin: 0 0 .35rem;

}

.table-inline-panel .mini-h--inline {

    font-size: .8rem;

    color: #475569;

    margin: .35rem 0 0;

}

/* Stack sections as rows (Docs row, then Questionnaires row) */

.table-inline-panel .inline-sections {

    display: grid;

    grid-template-columns: 1fr;

    gap: .9rem;

}

/* Neutral action pills (no green) */

.table-inline-panel .inline-actions .button,
.table-inline-panel .q-btn.q-equal {

    background: #fff;

    color: #0f172a;

    border: 1px solid #1473e6;

    border-radius: .7rem;

    font-weight: 800;

    min-height: 44px;

    padding: .65rem 1rem;

}



@media (hover:hover) {

    .table-inline-panel .inline-actions .button:hover,
    .table-inline-panel .q-btn.q-equal:hover {

        background: #f1f5f9;

        border-color: #cbd5e1;

    }

}

.table-inline-panel .inline-actions .button i,
.table-inline-panel .q-btn.q-equal i {

    font-size: 1rem;

    opacity: .95
}

/* Subtle header chips reuse .fav-chip */

.table-inline-panel .fav-chip {

    text-decoration: none;

    border: 0;

}

/* Close button match */

.table-inline-panel .btn-inline-close {

    border: 1px solid var(--line);

    background: #fff;

    color: #0f172a;

    border-radius: .6rem;

    padding: .4rem .6rem;

}

/* “Docs list” in details – tidy */

.table-inline-panel .docs-details .js-docs-list li {

    background: #fff;

    border: 1px dashed #e2e8f0;

    border-radius: .6rem;

    padding: .5rem .6rem;

}

/* Optional: make status badges feel aligned with chips */

.status-badge {

    vertical-align: middle;

}

.table-inline-panel .q-btn.primary,
.table-inline-panel .q-btn.secondary {

    background: #fff;

    color: #0f172a;

    border: 1px solid var(--line);

}

.table-inline-panel .q-btn.primary:hover,
.table-inline-panel .q-btn.secondary:hover {

    background: #f1f5f9;

    border-color: #cbd5e1;

}

.missing-toggle .toggle-arrow {

    display: none !important;

}