/* css/logs-styles.css — admin Logs page (logs.html) */

.controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.controls-left  { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.controls-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.controls-right input[type="text"] {
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    min-width: 220px;
    font-size: 0.9rem;
}
.lg-select { width: auto; min-width: 180px; padding: 7px 10px; font-size: 0.88rem; }
.lg-check  { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: #555; }
.lg-check input { margin: 0; }
.record-count { font-size: 0.85rem; color: #666; }

.loading { padding: 30px 20px; text-align: center; color: #666; }
.loading p { margin: 10px 0 0; font-size: 0.9rem; }
.spinner {
    width: 26px; height: 26px; margin: 0 auto;
    border: 3px solid #e0e0e0; border-top-color: #0d6efd;
    border-radius: 50%; animation: lg-spin 0.8s linear infinite;
}
@keyframes lg-spin { to { transform: rotate(360deg); } }

/* Dark, monospace, and scrolling inside its own box — log lines are long and
   must never make the page itself scroll sideways. */
.lg-body {
    margin: 0;
    padding: 14px 16px;
    background: #0d1520;
    color: #d6e2f0;
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8rem;
    line-height: 1.55;
    max-height: 68vh;
    overflow: auto;
    white-space: pre;
    word-break: normal;
}

/* Severity colouring, matched to the words these logs actually use. */
.lg-body .lg-err  { color: #ff8a80; }   /* FATAL, ERROR, FAILED, REJECT */
.lg-body .lg-warn { color: #ffd479; }   /* WARNING, SKIP, suppressed */
.lg-body .lg-ok   { color: #8ce99a; }   /* ok, SENT, ASSIGNED, success */
.lg-body .lg-hit  { background: #4d3a00; color: #ffe08a; }  /* filter match */

@media (max-width: 640px) {
    .controls { flex-direction: column; align-items: stretch; }
    .controls-right input[type="text"] { min-width: 0; width: 100%; }
    .lg-body { font-size: 0.74rem; }
}