.tabs { display: flex; gap: .25rem; margin-bottom: -1px; }
.tabs a { padding: .5rem .9rem; border: 1px solid transparent; border-radius: 3px 3px 0 0;
          color: #2c6fbb; text-decoration: none; }
.tabs a:hover { background: #f2f2f2; }
.tabs a.active { background: #fff; border-color: #ddd; border-bottom-color: #fff; color: #333; font-weight: 600; }

.shell-body { padding: 1rem; border: 1px solid #ddd; border-radius: 0 3px 3px 3px; background: #fff; }

.product-bar { display: flex; align-items: center; gap: .5rem; margin-left: 15px; margin-bottom: 1rem;
               padding-bottom: 1rem; border-bottom: 1px solid #eee; }
.product-bar label { font-weight: 600; }
.product-bar select { padding: .35rem .5rem; border: 1px solid #ccc; border-radius: 3px; }

.grid { width: 100%; border-collapse: collapse; }
.grid th, .grid td { padding: .4rem .6rem; text-align: left; border-bottom: 1px solid #ddd; vertical-align: top; }
.grid th { font-weight: 600; }
.grid .narrow { width: 6rem; }
.grid tbody tr:nth-child(even) { background: #fafafa; }
.grid tbody tr:hover { background: #f0f0f0; }
.grid tbody tr.active { background: #e6f4ea; }
.grid tbody tr.active:hover { background: #d8ecdf; }
.grid .nodes { margin: 0; padding-left: 1.1rem; }

.form { max-width: 32rem; }
.field { margin-bottom: 1rem; }
.field label { display: block; margin-bottom: .25rem; font-weight: 600; }
.field input[type=text], .field input[type=file], .field select {
  width: 100%; padding: .4rem .6rem; border: 1px solid #ccc; border-radius: 3px; box-sizing: border-box; }
.field select[multiple] { height: auto; font-family: inherit; }
.field small { display: block; margin-top: .25rem; color: #777; }
.field .is-invalid { border-color: #9f3a38; }
.invalid-feedback { display: block; margin-top: .25rem; font-size: .875rem; font-weight: 600; color: #9f3a38; }

.actions { display: flex; gap: .5rem; margin-top: 1.5rem; }
.btn { display: inline-block; padding: .45rem .9rem; border: 1px solid #ccc; border-radius: 3px;
       background: #f5f5f5; color: #333; font: inherit; text-decoration: none; cursor: pointer; }
.btn:hover { background: #ebebeb; }
.btn-primary { background: #2c6fbb; border-color: #255e9f; color: #fff; }
.btn-primary:hover { background: #255e9f; }

.linkish { padding: 0; border: 0; background: none; color: #2c6fbb; font: inherit; cursor: pointer; text-decoration: underline; }
.alert { padding: .6rem .8rem; margin-bottom: 1rem; border: 1px solid #e0b4b4; background: #fdf2f2; color: #9f3a38; }
.empty, .muted { color: #777; }