:root { --pico-font-size: 15px; --pico-spacing: .75rem; --pico-form-element-spacing-vertical: .4rem; --pico-form-element-spacing-horizontal: .6rem; }
body { background: #f4f6f8; }
.topnav { background: #1f4e78; color: #fff; padding: 0 1rem; margin-bottom: 1rem; }
.topnav a { color: #fff; text-decoration: none; }
.topnav a[role=button].small { padding: .25rem .7rem; background: #2e7d32; border-color: #2e7d32; }
.topnav details summary { color: #fff; }
.topnav details ul li a, .topnav details ul li button { color: #222; }
.brand { font-size: 1.2rem; letter-spacing: .05em; }
.content { padding-bottom: 2rem; }
footer { color: #777; padding: 1rem; }
.linkbtn { background: none; border: none; color: #222; padding: 0; margin: 0; width: auto; cursor: pointer; text-align: right; }
.flash { padding: .6rem 1rem; border-radius: 6px; margin-bottom: .75rem; border-left: 5px solid; }
.flash-success { background: #e8f5e9; border-color: #2e7d32; }
.flash-error { background: #fdecea; border-color: #c62828; }
.flash-warning { background: #fff8e1; border-color: #f9a825; }
.errors { background: #fdecea; border-left: 5px solid #c62828; padding: .6rem 1rem; border-radius: 6px; margin-bottom: .75rem; }
.errors ul { margin: 0; }
article { padding: 1rem; margin-bottom: 1rem; }
h1 { font-size: 1.5rem; margin-bottom: .5rem; }
h2 { font-size: 1.2rem; margin-bottom: .5rem; }
h3 { font-size: 1.05rem; margin-bottom: .4rem; }
table { font-size: .9rem; }
table th, table td { padding: .35rem .5rem; vertical-align: top; }
table.compact td, table.compact th { padding: .25rem .4rem; }
.badge { display: inline-block; padding: .1rem .5rem; border-radius: 10px; font-size: .78rem; font-weight: 600; white-space: nowrap; color: #fff; background: #607d8b; }
.badge.sev-Critical { background: #c62828; } .badge.sev-Major { background: #ef6c00; } .badge.sev-Minor { background: #2e7d32; }
.badge.st-New { background: #1565c0; } .badge.st-Closed { background: #2e7d32; } .badge.st-Archived { background: #616161; } .badge.st-Reopened { background: #ad1457; }
.badge.st-Under { background: #6a1b9a; }
.badge.act-Open { background: #1565c0; } .badge.act-In { background: #6a1b9a; } .badge.act-Done { background: #00897b; } .badge.act-Verified { background: #2e7d32; } .badge.act-Cancelled { background: #757575; }
.badge.overdue { background: #c62828; }
tr.row-overdue td { background: #fff3f3; }
tr.row-Critical td:first-child { border-left: 4px solid #c62828; }
tr.row-Major td:first-child { border-left: 4px solid #ef6c00; }
tr.row-Minor td:first-child { border-left: 4px solid #2e7d32; }
tr.row-archived td { color: #777; font-style: italic; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.tile { background: #fff; border-radius: 8px; padding: .8rem 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); border-top: 4px solid #1f4e78; }
.tile .v { font-size: 1.6rem; word-break: break-word; font-weight: 700; line-height: 1.2; }
.tile .l { font-size: .8rem; color: #666; }
.tile.red { border-top-color: #c62828; } .tile.green { border-top-color: #2e7d32; } .tile.grey { border-top-color: #757575; } .tile.orange { border-top-color: #ef6c00; }
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1rem; }
.chart-box { background: #fff; border-radius: 8px; padding: .8rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.chart-box canvas { max-height: 260px; }
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; align-items: end; margin-bottom: .75rem; }
.filters label { font-size: .8rem; margin-bottom: 0; }
.filters input, .filters select { margin-bottom: 0; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 1rem; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 1rem; }
fieldset { border: 1px solid #ddd; border-radius: 8px; padding: .75rem 1rem; margin-bottom: 1rem; }
legend { font-weight: 600; padding: 0 .4rem; }
.tabs { display: flex; gap: .25rem; flex-wrap: wrap; border-bottom: 2px solid #ddd; margin-bottom: 1rem; }
.tabs a { padding: .45rem .9rem; text-decoration: none; color: #333; border-radius: 6px 6px 0 0; }
.tabs a.active { background: #1f4e78; color: #fff; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .2rem 1rem; font-size: .92rem; }
.kv dt { color: #666; } .kv dd { margin: 0; }
.toolbar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: .75rem; }
.toolbar form { margin: 0; }
.right { text-align: right; }
.muted { color: #777; }
.small { font-size: .85rem; }
button.small, a[role=button].small { padding: .3rem .7rem; font-size: .85rem; width: auto; }
button.danger { background: #c62828; border-color: #c62828; }
button.secondary-btn { background: #607d8b; border-color: #607d8b; }
.steps { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: 1rem; }
.steps a { padding: .3rem .6rem; border-radius: 6px; background: #e0e0e0; color: #333; text-decoration: none; font-size: .85rem; }
.steps a.done { background: #c8e6c9; } .steps a.current { outline: 2px solid #1f4e78; } .steps a.locked { opacity: .5; }
.progress-wrap { background: #e0e0e0; border-radius: 6px; height: 12px; margin-bottom: .5rem; }
.progress-bar { background: #2e7d32; height: 12px; border-radius: 6px; }
.readonly-note { background: #eceff1; padding: .5rem .8rem; border-radius: 6px; margin-bottom: .75rem; }
.pagination { display: flex; gap: .5rem; align-items: center; }
.history li { margin-bottom: .3rem; }
.nowrap { white-space: nowrap; }
input[type=number], input[type=date] { max-width: 220px; }
details.box { border: 1px solid #ddd; border-radius: 8px; padding: .5rem .8rem; background: #fff; margin-bottom: .75rem; }
@media print { .topnav, footer, .toolbar, .tabs, .no-print { display: none !important; } body { background: #fff; } }
.topnav, .topnav ul { flex-wrap: wrap; }
@media (max-width: 640px) { .topnav ul li { padding: .2rem .4rem; } .topnav .brand { font-size: 1rem; } }
.navlogo { height: 34px; vertical-align: middle; border-radius: 3px; background: #fff; padding: 2px; margin-right: .3rem; }