/* ------------------------------------------------------------------ */
/*  Firmware Signing Service — shared styles                          */
/* ------------------------------------------------------------------ */

/* === Reset & base === */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

body {
    font-family: system-ui, sans-serif;
    background: #f5f5f5;
    color: #222;
    max-width: 960px;
    margin: 0 auto;
    padding: 1rem
}

h1 {
    font-size: 1.4rem;
    margin-bottom: .5rem
}

h2 {
    font-size: 1.1rem;
    margin: 1rem 0 .4rem;
    border-bottom: 1px solid #ddd;
    padding-bottom: .2rem
}

/* === Card === */

.card {
    background: #fff;
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
    overflow-x: auto
}

/* === Table === */

table {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem
}

th,
td {
    text-align: left;
    padding: .3rem .5rem;
    border-bottom: 1px solid #eee;
    max-width: 20rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

td[colspan] {
    max-width: none;
    white-space: normal;
    overflow: visible
}

th {
    background: #fafafa;
    font-weight: 600
}

/* === Form elements === */

form {
    display: inline
}

input,
select,
button {
    font: inherit;
    padding: .3rem .5rem;
    border: 1px solid #ccc;
    border-radius: 4px
}

button {
    cursor: pointer;
    background: #2563eb;
    color: #fff;
    border: none;
    padding: .4rem .8rem
}

button.danger {
    background: #dc2626
}

button.sm {
    font-size: .8rem;
    padding: .2rem .5rem
}

button:disabled {
    opacity: .5;
    cursor: default
}

/* === Tags & badges === */

.tag {
    display: inline-block;
    font-size: .75rem;
    padding: .1rem .4rem;
    border-radius: 3px;
    background: #e0e7ff;
    color: #3730a3;
    margin-right: .2rem
}

.tag.admin {
    background: #fef3c7;
    color: #92400e
}

.badge-ok,
.badge-off {
    display: inline-block;
    font-size: .75rem;
    padding: .1rem .4rem;
    border-radius: 3px
}

.badge-ok {
    background: #dcfce7;
    color: #166534
}

.badge-off {
    background: #fee2e2;
    color: #991b1b
}

/* === Flash messages === */

.flash-error {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    padding: .5rem;
    border-radius: 4px;
    margin-top: .5rem
}

.flash-success {
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    padding: .5rem;
    border-radius: 4px;
    margin-top: .5rem;
    word-break: break-all
}

/* === Login === */

.login-box {
    max-width: 360px;
    margin: 4rem auto
}

.login-input {
    width: 100%;
    margin-bottom: .5rem
}

.login-btn {
    width: 100%
}

.login-error {
    color: red;
    margin-top: .5rem
}

/* === Layout helpers === */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .3rem
}

.page-header h1 {
    margin-bottom: 0
}

.form-row {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap
}

.form-row-sm {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    align-items: center
}

.form-row-opts {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    font-size: .85rem
}

.btn-group {
    display: flex;
    gap: .3rem
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem
}

/* === Spacing === */

.mt-xs {
    margin-top: .3rem
}

.mt-sm {
    margin-top: .5rem
}

.mt-lg {
    margin-top: 1.5rem
}

.mb-sm {
    margin-bottom: .5rem
}

/* === Text & cell utilities === */

.muted {
    color: #888;
    font-size: .85rem
}

.text-center {
    text-align: center
}

.text-right {
    text-align: right
}

.text-sm {
    font-size: .8rem
}

.mono {
    font-family: monospace
}

.nowrap {
    white-space: nowrap
}

.no-border-bottom {
    border-bottom: 0
}

.break-word {
    word-break: break-word
}

.select-all {
    user-select: all
}

/* === Input widths === */

.input-full {
    width: 100%
}

.input-file {
    width: 17rem
}

.input-sm {
    width: 7rem
}

.input-xs {
    width: 5rem
}

.input-inline-sm {
    font-size: .8rem
}

/* === Collapsible card (details) === */

[x-cloak] {
    display: none !important
}

details.card>summary {
    cursor: pointer;
    list-style: none;
    user-select: none
}

details.card>summary::-webkit-details-marker {
    display: none
}

details.card>summary::before {
    content: '▶ ';
    font-size: .75em
}

details.card[open]>summary::before {
    content: '▼ '
}

/* h2 inside a details summary needs to be inline */
details.card>summary h2 {
    display: inline;
    border-bottom: none;
    margin: 0;
    padding: 0
}

/* === Event / operation log (user page) === */

.log-cell {
    padding: 0
}

.log-summary {
    cursor: pointer;
    font-size: .8rem;
    padding: .2rem .5rem
}

.log-body {
    font-size: .75rem;
    padding: .3rem .5rem .5rem
}

.log-pre {
    background: #f5f5f5;
    padding: .4rem;
    border-radius: 3px;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 12rem;
    overflow: auto;
    margin: .3rem 0
}

/* SHA-256 hash display (user events table) */
.hash-cell {
    font-family: monospace;
    font-size: .5rem
}

/* === Admin: edit options column === */

.edit-opts {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    font-size: .8rem
}

.label-block {
    display: block;
    white-space: nowrap
}

.label-inline {
    display: inline-block;
    margin-right: .5rem
}

/* === Admin: audit expand row === */

.expand-cell {
    padding: 0;
    border-bottom: none
}

.expand-body {
    padding: .5rem;
    background: var(--bg-alt, #f8f8f8)
}

.pre-log {
    margin: .2rem 0;
    white-space: pre-wrap;
    word-break: break-all;
    font-size: .8rem;
    max-height: 20rem;
    overflow: auto
}

.pre-error {
    margin: .2rem 0;
    white-space: pre-wrap;
    word-break: break-all;
    color: #c00
}

.log-detail-summary {
    cursor: pointer;
    font-weight: 600;
    font-size: .85rem
}

.event-meta {
    margin-top: .3rem;
    font-size: .8rem
}

/* === Pager === */

.pager {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .5rem;
    justify-content: center
}

.pager-input {
    width: 3.5rem;
    text-align: center
}

/* === Responsive === */

@media (max-width: 640px) {
    .grid {
        grid-template-columns: 1fr
    }
}