/* Additions for MVC server-side rendering; the template's style.css is untouched. */
.validation-summary-valid{display:none}
.validation-summary-errors ul{margin:0;padding-left:1.1rem}
.field-validation-error{display:block;margin-top:.25rem;color:var(--color-danger);font-size:.8rem}
.input-validation-error{border-color:var(--color-danger)!important}
.table thead th{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;border-bottom-color:var(--line)}
.table>:not(caption)>*>*{padding:.85rem .75rem}
/* Left menu: fixed beside the page from 992px, a slide-in panel below that */
.app-shell{display:flex;min-height:100vh}
.app-content {
    background: var(--glass);
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column
}
.login-page{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.powered-by{margin-top:auto;padding:24px 0 8px;text-align:center;font-size:.75rem;color:var(--muted)}
.login-page .powered-by{margin-top:0;padding:0 16px 16px}
.app-sidebar{--bs-offcanvas-width:270px;display:flex;flex-direction:column}
.app-sidebar .brand-mark,.app-topbar .brand-mark{line-height:1.2}
.app-sidebar-brand{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:16px;border-bottom:1px solid var(--line)}
.app-sidebar-nav{flex:1 1 auto;min-height:0;overflow-y:auto;padding:12px}
.app-sidebar-nav .nav-link{padding:.6rem .85rem;border-radius:8px;font-weight:500}
.app-sidebar-nav .nav-link.active{font-weight:600}
.app-sidebar-account{padding:12px;border-top:1px solid var(--line)}
.app-sidebar-account .dropdown-menu{width:calc(100% - 24px);min-width:0;border-color:var(--line);border-radius:12px;box-shadow:0 8px 24px #18264b14}
.app-sidebar-account .dropdown-item-text{overflow-wrap:anywhere}
.app-topbar{position:sticky;top:0;z-index:1020;display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line)}
.app-menu-button{min-width:44px;min-height:44px;font-size:1.1rem;line-height:1}
@media(min-width:992px){
  .app-sidebar{position:sticky;top:0;flex:0 0 250px;width:250px;height:100vh;border-right:1px solid var(--line)}
}
.dropdown-menu form{margin:0}
/* LEO26 risk status: High uses Bootstrap's danger badge */
.risk-not-high{background:var(--color-surface-alt);color:var(--color-text-muted)}
/* List filters and sortable column headings */
.list-filters{padding:16px}
.sort-link{display:inline-flex;align-items:center;gap:4px;padding:0;background:none;border:0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;text-decoration:none;white-space:nowrap;cursor:pointer}
.sort-link:hover,.sort-link.is-active{color:var(--brand)}
.sort-arrow{font-size:.65rem;opacity:.45}
.sort-link.is-active .sort-arrow{opacity:1}
.change-password-card{max-width:480px}
.company-logo{height:36px;width:auto;max-width:120px;object-fit:contain;border-radius:6px}
.company-image-preview{display:grid;place-items:center;width:128px;height:96px;background:var(--color-surface-alt);border:1px dashed var(--color-border);border-radius:10px;overflow:hidden}
.company-image-preview img{max-width:100%;max-height:100%;object-fit:contain}
.company-image-editor{padding:16px;background:var(--color-surface-alt);border:1px solid var(--line);border-radius:12px}
.company-image-stage{height:320px;max-height:60vh;background:#fff}
.company-image-stage img{display:block;max-width:100%}
.company-image-details{max-width:240px;max-height:120px;object-fit:contain;border-radius:8px}
.company-image-panel .company-image-preview{width:240px;height:120px}
.company-background-text{white-space:pre-line}
.current-project+.current-project{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.current-project-name{min-width:0;overflow-wrap:anywhere}
.invitation-email-preview{padding:12px 16px;background:var(--color-surface-alt);border:1px solid var(--line);border-radius:10px;overflow-wrap:anywhere}
.action-items li{padding:.75rem 0}
.action-items li:first-child{padding-top:0}
.action-items li:last-child{padding-bottom:0}
.action-items li+li{border-top:1px solid var(--line)}
/* Stays in view and fits the screen while the wider table scrolls sideways on phones */
.audit-details{position:sticky;left:12px;max-width:calc(100vw - 96px);margin:0;white-space:normal}
.audit-details dt{font-size:.75rem;color:var(--muted);font-weight:600}
.audit-details dd{margin-bottom:.5rem;overflow-wrap:anywhere}
.audit-details dd:last-child{margin-bottom:0}
.audit-changes{white-space:pre-wrap}
/* Stays in view and fits the screen while the wider table scrolls sideways on phones */
.response-answers{position:sticky;left:12px;max-width:calc(100vw - 96px);margin:0;padding-left:1.75rem}
.response-answers li{padding:.3rem 0;white-space:normal}
.response-answers li+li{border-top:1px solid var(--line)}
.epc-statement{min-width:260px}
.epc-user-check{width:1.35rem;height:1.35rem;margin:0;cursor:pointer}
.response-score{display:block;font-weight:600}
@media(min-width:768px){.response-answers li>span:first-child{display:inline-block;width:calc(100% - 130px)}.response-score{display:inline-block;width:125px;text-align:right}}
/* From 992px: left menu 250px, page and card padding 96px, cell padding 24px, and room for a scrollbar */
@media(min-width:992px){.audit-details,.response-answers{max-width:calc(100vw - 390px)}}

/* Project form: who to notify */
.notify-users { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .25rem 1rem; max-height: 16rem; overflow-y: auto; }
.notify-users .form-check[hidden] { display: none; }
.notify-users .form-check-label { overflow-wrap: anywhere; }

/* Notification bell */
.notification-bell { display: flex; align-items: center; justify-content: center; gap: .25rem; padding: .25rem .5rem; min-width: 44px; min-height: 44px; flex-shrink: 0; border-radius: 8px; font-size: 1.1rem; }
.notification-bell .badge { font-size: .7rem; }
.notification-bell-label { display: none; }
.notification-row { position: relative; cursor: pointer; }
.notification-open { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; }
.notification-open::after { content: ""; position: absolute; inset: 0; }
.notification-open:focus-visible { outline: none; }
.notification-row:has(.notification-open:focus-visible) { outline: 2px solid var(--magenta-500); outline-offset: -2px; }
.app-topbar .notification-bell { margin-left: auto; }
/* Wide screens: at the top right of the page */
.app-page-top { justify-content: flex-end; margin: -.75rem 0 .25rem; }

/* Left menu groups */
.nav-group { margin-top: .75rem; }
.nav-group-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 36px; padding: .25rem .85rem; margin-bottom: .25rem; background: none; border: 0; border-radius: 8px; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); cursor: pointer; transition: color .15s, background-color .15s; }
.nav-group-toggle:hover { background: var(--color-primary-tint); color: var(--app-accent-text); }
.nav-group-toggle::after { content: ""; width: .45rem; height: .45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.nav-group-toggle[aria-expanded="false"]::after { transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .nav-group-toggle::after { transition: none; } }

/* Dashboard: to-dos first on a phone, and beside the projects on a wide screen. A Normal User has one column. */
.dash-period dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: .35rem 0; border-top: 1px solid var(--color-border); }
.dash-period dt { font-weight: 400; }
.dash-period dd { margin: 0; font-size: 1.25rem; font-weight: 700; }
/* Statistics: a fixed colour and shape for each measure, so neither alone tells them apart. Colours checked for colour blindness and contrast in light and dark. */
.stat-mark { display: inline-block; width: 13px; height: 13px; vertical-align: middle; }
[data-mark="leo26"] { background: #DB2777; border-radius: 50%; }
[data-mark="jc"] { background: #2563EB; border-radius: 2px; }
[data-mark="wd"] { background: #0D9488; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
[data-mark="js"] { background: #B45309; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.stat-legend { display: flex; flex-wrap: wrap; gap: 8px; }
.stat-legend [aria-pressed="false"] { opacity: .55; text-decoration: line-through; }
.stat-chart th, .stat-chart td { padding-inline: 6px; }
.stat-date { min-width: 130px; }
.stat-lane { min-width: 44px; text-align: center; font-size: .7rem; }
.stat-chart thead .stat-lane { text-transform: none; letter-spacing: 0; white-space: normal; line-height: 1.15; }
.stat-band { border-left: 1px solid var(--color-border); }
.stat-chart.hide-leo26 [data-series="leo26"] > *, .stat-chart.hide-jc [data-series="jc"] > *, .stat-chart.hide-wd [data-series="wd"] > *, .stat-chart.hide-js [data-series="js"] > * { visibility: hidden; }
.stat-chart.hide-leo26 thead [data-series="leo26"], .stat-chart.hide-jc thead [data-series="jc"], .stat-chart.hide-wd thead [data-series="wd"], .stat-chart.hide-js thead [data-series="js"] { opacity: .35; }
/* On a phone, High Risk and Not High must both be in view to be compared */
@media (max-width: 575.98px) {
  .stat-chart th, .stat-chart td { padding-inline: 2px; }
  .stat-date { min-width: 78px; font-size: .75rem; overflow-wrap: anywhere; }
  .stat-lane { min-width: 25px; font-size: .58rem; }
  .stat-chart .stat-mark { width: 11px; height: 11px; }
}
@media (forced-colors: active) { .stat-mark { forced-color-adjust: none; } }
.dash-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); grid-template-areas: "todo" "main" "quick"; }
.dash-todo { grid-area: todo; }
.dash-main { grid-area: main; }
.dash-quick { grid-area: quick; }
.dash-todo { display: flex; flex-direction: column; gap: 1rem; }
.dash-todo:empty { display: none; }
@media (min-width: 1200px) {
  .dash-grid { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); grid-template-areas: "main todo"; align-items: start; }
  .dash-grid-full { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main"; }
  .dash-grid-single { grid-template-columns: minmax(0, 720px); grid-template-areas: "todo" "quick"; }
}
.dash-empty { padding: 1.5rem 1rem; text-align: center; border: 1px dashed var(--color-border); border-radius: 10px; }