/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* This is an ops tool: dense tables, minimal chrome, no framework other than
   Picnic. Picnic's <nav> is position:fixed, so give the body room for it. */
body { padding-top: 3.6em; }

nav .menu { white-space: nowrap; }
label.bulk-check { margin: 0; }
label.bulk-check .checkable { padding-left: 1.4em; }

/* Project tab bar: a normal in-flow element under the fixed top nav. */
.sub-nav {
  display: flex; align-items: center; flex-wrap: wrap; gap: .2em;
  margin: -1em -1em 1.2em; padding: .4em 1em;
  background: #f4f4f4; border-bottom: 1px solid #ddd;
}
.sub-nav .sub-nav-title { font-weight: bold; color: #333; margin-right: 1em; text-decoration: none; }
.sub-nav a.button { margin: 0; padding: .35em .9em; }
.sub-nav a.button.active { background: #fff; color: #0074d9; box-shadow: inset 0 -2px 0 #0074d9; border-radius: .3em .3em 0 0; font-weight: bold; }

main.container { max-width: 1100px; margin: 0 auto; padding: 1em; }

.flash { padding: .6em 1em; margin-bottom: 1em; border-radius: .3em; }
.flash-notice { background: #e3f6e3; color: #14532d; }
.flash-alert, .flash-error { background: #fde3e3; color: #7f1d1d; }

.muted { color: #888; }

table.listing { width: 100%; border-collapse: collapse; }
table.listing th, table.listing td { text-align: left; padding: .4em .6em; border-bottom: 1px solid #eee; vertical-align: top; }
table.listing tbody tr:hover { background: #fafafa; }

table.data-table { width: 100%; border-collapse: collapse; margin: .2em 0; }
table.data-table th, table.data-table td { text-align: left; padding: .2em .5em; border-bottom: 1px solid #eee; vertical-align: top; }
table.data-table th { width: 20%; color: #333; background: #f1f1f1; white-space: nowrap; text-align: left; }
pre.fault-message { white-space: pre-wrap; word-break: break-word; background: #fafafa; border: 1px solid #eee; padding: .6em; font-size: .9em; }
pre.data-json { background: #f7f7f7; padding: .6em; overflow: auto; }

.status-pill { display: inline-block; padding: .1em .6em; border-radius: 1em; font-size: .85em; }
.status-open { background: #fde3e3; color: #7f1d1d; }
.status-resolved { background: #e3f6e3; color: #14532d; }
.status-ignored { background: #eee; color: #555; }

.filters { display: flex; flex-wrap: wrap; gap: .6em; align-items: end; margin-bottom: 1em; }
.filters label { display: block; font-size: .85em; color: #555; }
.filters select { width: auto; min-width: 11em; }
/* Picnic draws the chevron 15px from the right edge; leave room for it. */
select { padding-right: 2.4em; }

.sparkline { display: block; }
.spark-bar { fill: #0074d9; }
.spark-bar-empty { fill: #ddd; }

.pagination { display: flex; gap: .6em; align-items: center; margin: 1em 0; }

.backtrace details { margin: .1em 0; border-left: 3px solid #eee; padding-left: .5em; }
.backtrace details.app-frame { border-left-color: #0074d9; }
.backtrace details.app-frame > summary { font-weight: bold; }
.backtrace details.gem-frame > summary { color: #777; }
.backtrace pre { background: #f7f7f7; padding: .4em .6em; overflow: auto; font-size: .9em; }
.backtrace pre .current-line { background: #fff3b0; display: inline-block; width: 100%; }

.section-block { margin-bottom: 2em; }
.inline-form { display: inline-block; }

.comment { border-bottom: 1px solid #eee; padding: .6em 0; }
.comment .meta { color: #888; font-size: .85em; }

code.token { word-break: break-all; }

/* Collapsible cards on the notice page. */
details.section { border: 1px solid #ddd; border-radius: .4em; margin: 0 0 .8em; background: #fff; }
details.section > summary {
  cursor: pointer; list-style: none; padding: .55em .9em; font-weight: bold;
  background: #f4f4f4; border-radius: .4em; user-select: none;
}
details.section[open] > summary { border-bottom: 1px solid #ddd; border-radius: .4em .4em 0 0; }
details.section > summary::-webkit-details-marker { display: none; }
details.section > summary::before { content: "\25B8"; display: inline-block; width: 1.2em; color: #0074d9; transition: transform .15s; transform-origin: 40% 50%; }
details.section[open] > summary::before { transform: rotate(90deg); }
details.section > summary .count { font-weight: normal; color: #888; margin-left: .4em; }
details.section > summary:hover { background: #ececec; }
details.section > .section-body { padding: .6em .9em; }
details.section .empty { color: #888; font-style: italic; }

/* Backtrace frames inside the Backtrace card. */
details.app-frame, details.gem-frame { border-left: 3px solid #ddd; margin: .15em 0; padding-left: .5em; }
details.app-frame { border-left-color: #0074d9; }
details.app-frame > summary { font-weight: bold; }
details.gem-frame > summary { color: #777; }
details.app-frame > summary, details.gem-frame > summary { cursor: pointer; font-family: monospace; font-size: .9em; list-style: none; }
details.app-frame > summary::-webkit-details-marker, details.gem-frame > summary::-webkit-details-marker { display: none; }
details.app-frame > summary::before, details.gem-frame > summary::before { content: "\25B8"; display: inline-block; width: 1em; color: #999; transform-origin: 40% 50%; }
details.app-frame[open] > summary::before, details.gem-frame[open] > summary::before { transform: rotate(90deg); }
details.app-frame > .frame-source, details.gem-frame > .frame-source, details.app-frame > pre, details.gem-frame > pre { margin: .3em 0 .5em 1em; }

/* Projects list: one-hour per-minute histogram next to the count. */
td.hour-cell { white-space: nowrap; }
td.hour-cell .sparkline { vertical-align: middle; margin-right: .5em; }
td.hour-cell .hour-count { vertical-align: middle; }
