:root { --pico-font-size: 93%; --ps-blue: #00a3e0; --pico-primary: #0086b8; --pico-primary-background: #0086b8;
  --pico-primary-hover-background: #006f99; --pico-spacing: .9rem; }
body { background: #f4f7f9; }
main.container-fluid { padding-top: .8rem; max-width: 1500px; }
.topbar { background: #fff; border-bottom: 3px solid var(--ps-blue); position: sticky; top: 0; z-index: 20; }
.topbar nav { padding: 0 1rem; }
.topbar .brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; color: #0b4f6c; text-decoration: none; }
.nav-logo { height: 34px; }
.topbar .menu li { padding-top: .3rem; padding-bottom: .3rem; }
.topbar a[aria-current] { font-weight: 700; color: var(--pico-primary); }
.inline-form { display: inline; margin: 0; }
button.linklike { background: none; border: 0; color: var(--pico-primary); padding: 0; margin: 0; width: auto; font-size: inherit; }
.footer { text-align: center; color: #889; padding: 1rem 0 2rem; }
.muted { color: #6b7a86; } .small { font-size: .82em; } .center { text-align: center; }
.narrow { max-width: 560px; margin: 2rem auto; }
.login-card { max-width: 420px; margin: 3rem auto; }
.login-logo { max-width: 160px; margin-bottom: .6rem; }
.flash { padding: .6rem .9rem; border-radius: 6px; margin-bottom: .8rem; border-left: 5px solid; background: #fff; white-space: pre-line; }
.flash-success { border-color: #27ae60; background: #eefaf2; } .flash-error { border-color: #c0392b; background: #fdf0ee; }
.flash-warning { border-color: #e67e22; background: #fff6ea; } .flash-info { border-color: var(--ps-blue); background: #eef8fc; }
h2, h3, h4 { margin-bottom: .6rem; color: #0b4f6c; }
article { padding: 1rem 1.2rem; margin-bottom: 1rem; }
table { font-size: .9em; } th { white-space: nowrap; }
td, th { padding: .35rem .5rem; }
.table-wrap { overflow-x: auto; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.tile { background: #fff; border-radius: 8px; padding: .8rem 1rem; text-decoration: none; border-top: 4px solid var(--ps-blue); box-shadow: 0 1px 3px rgba(0,0,0,.06); color: inherit; }
.tile .n { font-size: 1.9rem; font-weight: 700; color: #0b4f6c; display: block; }
.tile.warn { border-color: #e67e22; } .tile.bad { border-color: #c0392b; } .tile.good { border-color: #27ae60; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 1rem; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .6rem 1rem; }
.chart-box { position: relative; height: 260px; }
.badge { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: .78em; background: #e3eef4; color: #234; white-space: nowrap; }
.badge.Critical, .badge.bad, .badge.Rejected, .badge.Blocked, .badge.D { background: #fadbd8; color: #922; }
.badge.Major, .badge.warn, .badge.C, .badge.Conditional, .badge.On.hold { background: #fdebd0; color: #8a4b08; }
.badge.Minor, .badge.good, .badge.Accepted, .badge.Approved, .badge.A, .badge.Effective { background: #d5f5e3; color: #196f3d; }
.badge.B { background: #d6eaf8; color: #1b4f72; }
.badge.chronic { background: #922; color: #fff; }
.badge.Closed { background: #d5f5e3; color: #196f3d; } .badge.Archived { background: #ddd; color: #555; }
.overdue { color: #c0392b; font-weight: 600; }
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .4rem .6rem; align-items: end; }
.filters select, .filters input, .filters button { margin-bottom: 0; padding: .35rem .5rem; font-size: .88em; height: auto; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .6rem; }
.actions a[role=button], .actions button { width: auto; padding: .35rem .8rem; font-size: .88em; margin-bottom: 0; }
.subnav { position: sticky; top: 58px; z-index: 10; background: #f4f7f9; padding: .3rem 0; display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .88em; border-bottom: 1px solid #dde5ea; margin-bottom: .8rem; }
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: .15rem 1rem; margin: 0; }
dl.kv dt { color: #6b7a86; font-weight: 500; } dl.kv dd { margin: 0; }
.md p:last-child { margin-bottom: 0; }
.mention { background: #e3f2fd; color: #0d47a1; padding: 0 .2rem; border-radius: 3px; }
form.compact label, form.compact input, form.compact select, form.compact textarea { margin-bottom: .45rem; }
form.compact input, form.compact select, form.compact textarea { padding: .35rem .55rem; font-size: .92em; }
form.compact button { width: auto; padding: .4rem 1rem; }
.row { display: flex; flex-wrap: wrap; gap: .6rem; } .row > * { flex: 1 1 160px; }
.pager { display: flex; gap: .6rem; align-items: center; justify-content: flex-end; }
.step { border-left: 4px solid #cfd8dc; padding: .4rem .8rem; margin-bottom: .8rem; background: #fff; }
.step.Accepted { border-color: #27ae60; } .step.Rejected { border-color: #c0392b; }
.thumbs { display: flex; flex-wrap: wrap; gap: .5rem; } .thumbs img { height: 90px; border: 1px solid #ddd; border-radius: 4px; }
.deleted { opacity: .5; text-decoration: line-through; }
details.section > summary { font-weight: 600; color: #0b4f6c; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
textarea { min-height: 4.5rem; }
@media (max-width: 700px) { .grid2 { grid-template-columns: 1fr; } .subnav { top: 0; } }