/* ─────────────────────────────────────────────────────────────────────────────
   equidi.css — consolidated stylesheet
   Replaces: site.css, topmenu.css, home.css, scorecard.css, dashboards.css,
             action.css, my-actions.css, reports.css, resources.css,
             styleguide.css, globals.css
   Dropped (zero usage): scorecard.css, my-actions.css, resources.css
   Trimmed heavily: topmenu.css (notifications), home.css (home page widgets)
───────────────────────────────────────────────────────────────────────────── */

/* ── 1. CSS Variables ────────────────────────────────────────────────────── */

:root {
    --white:            #FFFFFF;
    --gray-background:  #E5E5E5;
    --off-white:        #FEFFFF;
    --light-teal:       #D2F2F9;
    --light-purple:     #F2FCFE;
    --teal:             #0A7A8E;
    --chart-purple:     #4DCDE6;
    --purple-box:       #7ADDE8;
    --black:            #2D2C2C;
    --pink:             #EC617A;
    --dark-purple:      #7C549E;
    --red:              #E01D59;
    --amber:            #FFCC66;
    --green:            #B6D772;
    --aqua:             #ACDFEC;
    --light-red:        #FFDDEE;
    --light-amber:      #FFF0CB;
    --light-green:      #CDF9E4;
    --light-black:      #60697E;

    --filson-medium:         "FilsonProMedium", Helvetica;
    --filson-regular:        "FilsonProRegular", Helvetica;
    --filson-medium-italic:  "FilsonProMediumItalic", Helvetica;
    --filson-light-italic:   "FilsonProLightItalic", Helvetica;
    --filson-heavy-italic:   "FilsonProHeavyItalic", Helvetica;
    --filson-book:           "FilsonProBook", Helvetica;
    --filson-heavy:          "FilsonProHeavy", Helvetica;
    --filson-black:          "FilsonProBlack", Helvetica;
    --filson-book-italic:    "FilsonProBookItalic", Helvetica;
    --filson-bold:           "FilsonProBold", Helvetica;
    --filson-thin:           "FilsonProThin", Helvetica;
    --filson-light:          "FilsonProLight", Helvetica;
    --filson-bold-italic:    "FilsonProBoldItalic", Helvetica;
    --filson-black-italic:   "FilsonProBlackItalic", Helvetica;
    --filson-thin-italic:    "FilsonProThinItalic", Helvetica;
    --filson-regular-italic: "FilsonProRegularItalic", Helvetica;
}

/* ── 2. Font Faces ───────────────────────────────────────────────────────── */

@font-face { font-family: "FilsonProMedium";       src: url('../fonts/FilsonProMedium/font.woff2') format('woff2'), url('../fonts/FilsonProMedium/font.woff') format('woff'); }
@font-face { font-family: "FilsonProRegular";       src: url('../fonts/FilsonProRegular/font.woff2') format('woff2'), url('../fonts/FilsonProRegular/font.woff') format('woff'); }
@font-face { font-family: "FilsonProMediumItalic";  src: url('../fonts/FilsonProMediumItalic/font.woff2') format('woff2'), url('../fonts/FilsonProMediumItalic/font.woff') format('woff'); }
@font-face { font-family: "FilsonProLightItalic";   src: url('../fonts/FilsonProLightItalic/font.woff2') format('woff2'), url('../fonts/FilsonProLightItalic/font.woff') format('woff'); }
@font-face { font-family: "FilsonProHeavyItalic";   src: url('../fonts/FilsonProHeavyItalic/font.woff2') format('woff2'), url('../fonts/FilsonProHeavyItalic/font.woff') format('woff'); }
@font-face { font-family: "FilsonProBook";          src: url('../fonts/FilsonProBook/font.woff2') format('woff2'), url('../fonts/FilsonProBook/font.woff') format('woff'); }
@font-face { font-family: "FilsonProHeavy";         src: url('../fonts/FilsonProHeavy/font.woff2') format('woff2'), url('../fonts/FilsonProHeavy/font.woff') format('woff'); }
@font-face { font-family: "FilsonProBlack";         src: url('../fonts/FilsonProBlack/font.woff2') format('woff2'), url('../fonts/FilsonProBlack/font.woff') format('woff'); }
@font-face { font-family: "FilsonProBookItalic";    src: url('../fonts/FilsonProBookItalic/font.woff2') format('woff2'), url('../fonts/FilsonProBookItalic/font.woff') format('woff'); }
@font-face { font-family: "FilsonProBold";          src: url('../fonts/FilsonProBold/font.woff2') format('woff2'), url('../fonts/FilsonProBold/font.woff') format('woff'); }
@font-face { font-family: "FilsonProThin";          src: url('../fonts/FilsonProThin/font.woff2') format('woff2'), url('../fonts/FilsonProThin/font.woff') format('woff'); }
@font-face { font-family: "FilsonProLight";         src: url('../fonts/FilsonProLight/font.woff2') format('woff2'), url('../fonts/FilsonProLight/font.woff') format('woff'); }
@font-face { font-family: "FilsonProBoldItalic";    src: url('../fonts/FilsonProBoldItalic/font.woff2') format('woff2'), url('../fonts/FilsonProBoldItalic/font.woff') format('woff'); }
@font-face { font-family: "FilsonProBlackItalic";   src: url('../fonts/FilsonProBlackItalic/font.woff2') format('woff2'), url('../fonts/FilsonProBlackItalic/font.woff') format('woff'); }
@font-face { font-family: "FilsonProThinItalic";    src: url('../fonts/FilsonProThinItalic/font.woff2') format('woff2'), url('../fonts/FilsonProThinItalic/font.woff') format('woff'); }
@font-face { font-family: "FilsonProRegularItalic"; src: url('../fonts/FilsonProRegularItalic/font.woff2') format('woff2'), url('../fonts/FilsonProRegularItalic/font.woff') format('woff'); }

/* ── 3. Reset + Base ─────────────────────────────────────────────────────── */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s,
samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header,
hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body  { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
* { box-sizing: border-box; }

/* ── 4. Base Element Styles ──────────────────────────────────────────────── */

html {
    height: -webkit-fill-available;
}

body {
    min-height: 100vh;
    min-height: -webkit-fill-available;
    background-color: var(--gray-background);
}

p {
    font-family: var(--filson-light) !important;
    color: var(--black);
    line-height: 1.25 !important;
}

hr {
    color: var(--black);
    opacity: 1;
}

h1 { font-family: var(--filson-bold) !important; font-size: 2.25em !important; font-weight: 500 !important; }
h2 { font-family: var(--filson-bold) !important; font-size: 1.75em !important; }
h3 { font-family: var(--filson-bold) !important; font-size: 1.75em !important; }
h4 { font-family: var(--filson-bold) !important; font-size: 1.75em !important; }
h5 { font-family: var(--filson-medium) !important; font-size: 1.5em !important; }

th { font-family: var(--filson-bold) !important; font-size: .8em !important; padding-top: .25rem !important; padding-bottom: .25rem !important; }
td { font-family: var(--filson-book) !important; font-size: .8em !important; padding-top: .25rem !important; padding-bottom: .25rem !important; }

/* ── 5. Layout ───────────────────────────────────────────────────────────── */

app {
    position: relative;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
    background-color: white;
}

.container-fluid {
    max-width: 160rem;
}

.screen a {
    text-decoration: none;
}

.container-center-horizontal {
    display: flex;
    flex-direction: row;
    justify-content: center;
    pointer-events: none;
    width: 100%;
}
.container-center-horizontal > * {
    flex-shrink: 0;
    pointer-events: auto;
}

.align-self-flex-end {
    align-self: flex-end;
}

/* ── 6. Bootstrap Overrides ──────────────────────────────────────────────── */

.btn-primary {
    background-color: var(--teal) !important;
    border-color: var(--black) !important;
}

.text-danger   { font-family: var(--filson-regular) !important; }
.alert         { font-family: var(--filson-book) !important; }
.form-group    { font-family: var(--filson-book) !important; }
.form-check-label { line-height: 1.5; }

.nav-link { font-family: var(--filson-book); color: var(--teal) !important; }
.nav-link:hover { color: var(--black) !important; }
.nav-link-active { font-family: var(--filson-medium); color: var(--black) !important; }
.navbar-text { font-family: var(--filson-book); }

.modal-content {
    border: 2px solid var(--black) !important;
    box-shadow: .5em .5em 0 var(--black);
}

.border-top { border-color: var(--black) !important; }

/* ── 7. Colour Utilities ─────────────────────────────────────────────────── */

.green-bg      { background-color: var(--green); }
.gray-bg       { background-color: var(--gray-background); }
.white-bg      { background-color: var(--white) !important; }
.amber-bg      { background-color: var(--amber) !important; }
.lilac-bg      { background-color: var(--light-purple); }
.light-teal-bg { background-color: var(--light-teal); }
.dark-purple-bg { background-color: var(--teal); }
.bg-purple     { background-color: #7C549E !important; }

.purple    { color: var(--teal); }
.redpink   { color: var(--red); }
.lightblack { color: var(--light-black); }
.white     { color: var(--white); }
.gray-cross { color: #e9ecef; }

/* ── 8. Typography Utilities ─────────────────────────────────────────────── */

.filsonMedium      { font-family: var(--filson-medium) !important; }
.filsonRegular     { font-family: var(--filson-regular); }
.filsonLight       { font-family: var(--filson-light); }
.filsonBold        { font-family: var(--filson-bold); }

.filsonRegularSmall { font-family: var(--filson-regular); font-size: .8em; }
.filsonLightSmall   { font-family: var(--filson-light); font-size: .8em; }
.filsonBookSmall    { font-family: var(--filson-book); font-size: .8em; }
.filsonBoldSmall    { font-family: var(--filson-bold); font-size: .8em; }

.regulartext  { font-family: var(--filson-book); font-size: 1.25em; line-height: 1.5em; }
.regularsmall { font-family: var(--filson-regular); }
.book-text    { font-family: var(--filson-book); line-height: 1.5em; }
.bold-text    { font-family: var(--filson-bold); line-height: 1.5em; }

.bigger    { font-size: 3em; }
.big       { font-size: 1.5em; }
.titlesize { font-size: 1.1em; }

.smallheading    { font-family: var(--filson-medium); font-size: 1.5em; }
.myfocustext     { line-height: 1.5; color: var(--black); font-family: var(--filson-book); }
.myactiontext    { line-height: 1.25em; color: var(--black); font-family: var(--filson-book); font-size: .9em; }

/* ── 9. Border + Shadow Utilities ────────────────────────────────────────── */

.thinborder       { border: 1px solid var(--black); }
.thinBorderPurple { border: 1px solid var(--teal); border-radius: .25em; }
.thickborder      { border: 2px solid var(--black); border-radius: .25em; }
.roundborders     { border-radius: .25em; }
.bigshadow        { box-shadow: .5em .5em 0 var(--black); }
.smallshadow      { box-shadow: .25em .25em 0 var(--black); }

.medpurpleborder  { border: 2px solid var(--teal); }

/* Spreadsheet-style grid cell */
.grid-cell {
    background: white;
}

.input-group-sm > .form-control {
    padding: .3rem .5rem !important;
}

.purplebox {
    border: 4px solid var(--teal);
    background-color: white;
}
.greenborder      { border: 4px solid var(--green); }
.amberborder      { border: 4px solid var(--amber); }

.topBorder        { border-top: 1px solid var(--black); }
.bottomBorder     { border-bottom: 1px solid var(--black); }
.thickBottomBorder { border-bottom: 2px solid var(--black); }
.thickLeftBorder  { border-left: 2px solid var(--black); }

.hr-web    { color: var(--teal) !important; height: 4px !important; }
.hr-dashed { border-top: 4px dashed var(--teal); background-color: transparent; }

/* ── 10. Inputs + Forms ──────────────────────────────────────────────────── */

input[type=checkbox] {
    height: 1rem;
    width: 1rem;
    accent-color: currentcolor;
}

.bigcheckbox {
    height: 1.5rem !important;
    width: 1.5rem !important;
}

.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid red; }
.validation-message { color: red; }

/* ── 11. Buttons ─────────────────────────────────────────────────────────── */

.widebutton {
    font-family: var(--filson-medium);
    border: 2px solid var(--black);
    border-radius: .25em;
    color: white;
    font-size: .9em;
    background-color: var(--teal);
}
a.widebutton:hover { color: white; }

.cancelbutton {
    font-family: var(--filson-medium);
    border: 2px solid var(--black);
    border-radius: .25em;
    color: var(--black);
    font-size: .9em;
    background-color: white;
}

/* ── 12. Cards + Boxes ───────────────────────────────────────────────────── */

.mainbackgroundbox {
    background-color: var(--light-teal);
    border: 2px solid var(--black);
    border-radius: .25em;
    position: relative;
}
.lightbackgroundbox {
    background-color: var(--light-purple);
    border: 2px solid var(--black);
    border-radius: .25em;
}
.whitebackgroundbox {
    border: 2px solid var(--black);
    border-radius: .25em;
    background: white;
}
.custommodalbody { background-color: #F2FCFE; }

@media (min-width: 576px) {
    .mainbackgroundbox  { box-shadow: .5em .5em 0 var(--black); }
    .lightbackgroundbox { box-shadow: .5em .5em 0 var(--black); }
}

/* ── 13. Navigation (top menu) ───────────────────────────────────────────── */

.topmenubackground { box-shadow: 0px 4px 12px rgba(9, 181, 212, 0.2); }
.divider { color: rgba(0,0,0,.15); }
.dropdown-item-link { font-family: var(--filson-book); color: var(--black); }

/* ── 14. Page tab navigation ─────────────────────────────────────────────── */

.page-tabs {
    display: flex;
    border-bottom: 2px solid var(--light-teal);
    margin-bottom: 1rem;
}

.page-tab {
    font-family: var(--filson-regular);
    font-size: 0.85rem;
    padding: 0.4rem 1.1rem;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    color: var(--teal);
    opacity: 0.6;
    transition: opacity 0.15s;
}

.page-tab:hover {
    opacity: 1;
}

.page-tab.active {
    font-family: var(--filson-bold);
    border-bottom-color: var(--teal);
    opacity: 1;
}

/* ── 15. App Shell — sidebar + nav ──────────────────────────────────────── */

.app-sidebar {
    background-color: var(--teal);
    display: flex;
    flex-direction: column;
    padding: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    max-width: 260px;
}

.app-sidebar-brand {
    padding: 1.25rem 1.25rem 1rem;
    font-family: var(--filson-bold);
    font-size: 0.95em;
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    line-height: 1.3;
}

.left-nav {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
    flex: 1;
}

.left-nav-link {
    font-family: var(--filson-regular);
    font-size: 0.82em;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    padding: 0.45rem 0.75rem;
    margin: 0.1rem 0.5rem;
    border-radius: 0.25em;
    transition: background-color 0.15s, color 0.15s;
    display: block;
}

.left-nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.left-nav-link.active {
    background-color: rgba(255, 255, 255, 0.18);
    color: white;
    font-family: var(--filson-bold);
}

.left-nav-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin: 0.4rem 1rem;
    opacity: 1;
}

/* ── Content area ────────────────────────────────────────────────────────── */

.content-col {
    padding: 1.5rem 2rem;
    min-width: 0;
}

.page-header {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

.page-title {
    font-family: var(--filson-bold);
    font-size: 1.2em;
    color: var(--black);
}

.filter-bar {
    background: var(--gray-background);
    border-radius: 0.4em;
    padding: 0.75rem 1rem;
    display: flex;
    gap: 1.25rem;
    align-items: flex-end;
    margin-bottom: 1.5rem;
}

/* ── List cards (roles, benchmarks etc.) ─────────────────────────────────── */

.list-card {
    background: white;
    border-radius: 0.4em;
    box-shadow: 0 1px 3px rgba(9, 181, 212, 0.12), 0 0 0 1px rgba(9, 181, 212, 0.08);
    overflow: hidden;
    margin-bottom: 1rem;
}

.list-card-header {
    padding: 0.55rem 1rem;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #edf8fc 0%, #ffffff 100%);
    border-bottom: 1px solid rgba(26, 138, 122, 0.1);
}

.list-card-col-headers {
    display: flex;
    padding: 0.25rem 1rem;
    border-bottom: 1px solid rgba(9, 181, 212, 0.08);
}

.list-card-row {
    cursor: pointer;
    transition: background-color 0.1s;
    padding: 0.45rem 1rem;
}

.list-card-row:hover {
    background-color: #edf8fc;
}

.list-card-count {
    font-family: var(--filson-light);
    font-size: 0.75em;
    color: var(--light-black);
    margin-left: 0.5rem;
}

/* ── 16. Salary Review navigation (legacy pages) ─────────────────────────── */

.actionnav {
    background-color: var(--light-teal);
    border-bottom: 2px solid var(--black);
}

.overlap-group-5 {
    font-family: var(--filson-book);
    color: var(--black);
    background-color: white;
    border-radius: .25em;
    cursor: pointer;
    width: 100%;
    border: none;
}

.overlap-group1-3 {
    font-family: var(--filson-regular);
    background-color: var(--teal);
    border-radius: .25em;
    cursor: pointer;
    color: white;
    border: 2px solid var(--black);
}

/* ── 16. Modal action styles ─────────────────────────────────────────────── */

.overlap-group-12 {
    background-color: var(--teal);
    height: 1.5em;
    width: 1.5em;
    line-height: 1.5;
    text-align: center;
    color: white;
    font-family: var(--filson-medium);
    border-radius: 50%;
    margin: auto;
}

.actionmodalbackground { background-color: #EDF8FC; }
.actiontitletext { font-family: var(--filson-medium); font-size: 1.25em; color: var(--black); }
.actionlabel     { font-family: var(--filson-medium); font-size: .9em; color: var(--black); }

.actiontitleinput,
.actioninfoinput,
.duedateinput,
.targetinput { font-size: 1em; font-family: var(--filson-book) !important; }
.targetinput { width: 6em !important; }

/* ── 16. Benchmark / salary band display ─────────────────────────────────── */

.remband {
    background: linear-gradient(to right, var(--gray-background) 0%, var(--green) 50%, var(--gray-background) 100%);
}
.remborderright { border-right: 2px solid var(--black); }
.remsalary      { font-family: var(--filson-regular); }
.remsalary-sm   { font-family: var(--filson-book); font-size: .75em; }
.remsalary-dot {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1.25em;
    height: 1.25em;
    border-radius: 50%;
    border: 2px solid var(--black);
}

.targetlabel   { color: var(--black); font-family: var(--filson-regular); line-height: 1.25; }
.benchmarklabel { color: var(--black); font-family: var(--filson-book); font-size: 1.25em; }
.targetvalue   { font-family: var(--filson-bold); font-size: 1.25em; }
.benchmarkvalue { font-family: var(--filson-bold); font-size: 1.25em; }

.gei-highlight { position: relative; }
.gei-highlight::before {
    content: "recommended";
    position: absolute;
    top: -.25rem;
    left: -.25rem;
    background: var(--pink);
    padding: 0.25rem 0.75rem;
    color: #fff;
    font-size: 0.75rem;
    font-family: var(--filson-regular);
    border-radius: 9999px;
    line-height: 1;
    white-space: nowrap;
}

@media (min-width: 992px) {
    .remsalary-lg { font-family: var(--filson-regular) !important; font-size: .85em !important; }
}

/* ── 17. Autocomplete ────────────────────────────────────────────────────── */

.autocomplete { position: relative; }
.autocomplete:before {
    content: "";
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 20px;
    background: url("../img/search.svg") center / contain no-repeat;
}
.autocomplete input { font-family: var(--filson-light); padding-left: 35px; }
.autocomplete .options {
    position: absolute;
    left: 0;
    background: white;
    width: 100%;
    z-index: 10;
    border: 1px solid var(--black);
    border-radius: 0.25rem;
}
.autocomplete .option .option-text { font-family: var(--filson-light); }
.autocomplete .option:hover { background: var(--teal); color: var(--white); cursor: pointer; }

/* ── 18. Toast ───────────────────────────────────────────────────────────── */

.toast {
    display: none;
    color: #fff;
    z-index: 5000;
    position: absolute;
    width: 50%;
    max-width: 50% !important;
    top: 2rem;
    border-radius: .25rem;
}
.toast-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 1rem;
    font-size: 2.5rem;
}
.toast-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-left: 1rem;
}
.toast-body p { margin-bottom: 0; font-family: var(--filson-medium) !important; color: white !important; }
.toast-close { position: absolute; top: 25%; right: 2%; cursor: pointer; }
.toast-visible {
    display: flex;
    flex-direction: row;
    animation: fadein 1.5s;
    opacity: 1;
}
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── 19. Blazor error UI ─────────────────────────────────────────────────── */

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

/* ── 20. Misc utilities ──────────────────────────────────────────────────── */

.redCircleBackground {
    background-color: var(--light-red);
    color: darkred;
    border-radius: 1em;
}

.close { background-color: transparent; border: 0; }

.remToolDetails input { font-family: var(--filson-book); }

/* ── 21. Stat cards (Dashboard) ─────────────────────────────────────────── */

.stat-card {
    background: white;
    border-radius: 0.4em;
    box-shadow: 0 1px 4px rgba(9, 181, 212, 0.10), 0 0 0 1px rgba(9, 181, 212, 0.06);
    padding: 1rem 1.25rem 0.9rem;
    min-width: 130px;
}
a.stat-card-link {
    display: block;
    text-decoration: none;
    transition: box-shadow 0.15s, transform 0.15s;
}
a.stat-card-link:hover {
    box-shadow: 0 3px 10px rgba(9, 181, 212, 0.22), 0 0 0 1px rgba(9, 181, 212, 0.15);
    transform: translateY(-1px);
}
.stat-card-number {
    font-family: var(--filson-bold);
    font-size: 1.75rem;
    line-height: 1.15;
    color: var(--teal);
}
.stat-card-label {
    font-family: var(--filson-light);
    font-size: 0.72em;
    color: #999;
    margin-top: 0.2rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── 22. Review list panel (Salary Reviews sidebar) ─────────────────────── */

.review-list-panel {
    background: white;
    border-radius: 0.4em;
    box-shadow: 0 1px 4px rgba(9, 181, 212, 0.10), 0 0 0 1px rgba(9, 181, 212, 0.06);
    padding: 1rem 0.75rem;
    margin-right: 1rem;
    align-self: flex-start;
}
.review-list-panel-header {
    display: flex;
    align-items: center;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(9, 181, 212, 0.12);
    margin-bottom: 0.5rem;
}
.review-list-item {
    padding: 0.5rem 0.6rem;
    border-radius: 0.3em;
    cursor: pointer;
    margin-bottom: 0.2rem;
    transition: background 0.1s;
}
.review-list-item:hover { background: #edf8fc; }
.review-list-item.selected { background: var(--light-teal); }

/* ── 23. Detail pages ────────────────────────────────────────────────────── */

.detail-card {
    background: white;
    border-radius: 0.4em;
    box-shadow: 0 1px 4px rgba(9, 181, 212, 0.10), 0 0 0 1px rgba(9, 181, 212, 0.06);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}

/* Cost Centres two-column responsive grid */
.cc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 1.5rem;
    align-items: start;
}
@media (max-width: 960px) {
    .cc-grid {
        grid-template-columns: 1fr;
    }
}

/* Compact row padding for dense CC lists */
.cc-compact-row {
    padding-top: 0.1rem !important;
    padding-bottom: 0.1rem !important;
}
.detail-card-title {
    display: block;
    font-family: var(--filson-bold);
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--teal);
    padding-bottom: 0.65rem;
    border-bottom: 1px solid rgba(9, 181, 212, 0.12);
    margin-bottom: 1rem;
}
.detail-card-header {
    display: flex;
    align-items: center;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid rgba(9, 181, 212, 0.12);
    margin-bottom: 1rem;
}
.detail-card-header .detail-card-title {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}
.remToolDetails label { font-family: var(--filson-regular); }

/* ── Chat (Ask page) ─────────────────────────────────────────────────────── */

.chat-messages {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0 12px 0;
}

.chat-bubble {
    max-width: 72%;
    padding: 10px 14px;
    border-radius: 12px;
    line-height: 1.5;
}

.chat-bubble-user {
    align-self: flex-end;
    background: var(--teal);
    color: white;
}

.chat-bubble-assistant {
    align-self: flex-start;
    background: var(--light-teal);
    color: var(--black);
}

.chat-input-row {
    display: flex;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid #eee;
}

.chat-suggestions {
    padding: 8px 0 16px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 480px;
}

.chat-suggestion {
    text-align: left;
    background: none;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    color: var(--black);
    transition: background 0.15s, border-color 0.15s;
}

.chat-suggestion:hover {
    background: var(--light-teal);
    border-color: var(--teal);
}

.badge-in-use {
    display: inline-block;
    background-color: var(--light-teal);
    color: var(--teal);
    border: 1px solid var(--teal);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 0.68rem;
    font-family: var(--filson-book);
    vertical-align: middle;
    line-height: 1.4;
}