/* ==========================================================================
   ACARS Log Portal (acars-log.js, Support Tools > ACARS Log Portal).
   On the hig-theme.css tokens, so Light, Dark and Auto follow the appearance menu.
   Buttons are the portal's own si-acct-btn classes from account-status.css.
   ========================================================================== */

.al-page { max-width: 1200px; margin: 0 auto 48px; color: var(--hig-label); font-family: var(--hig-font); }
.al-shell .page-header > .container-fluid { max-width: calc(1200px + var(--bs-gutter-x, 1.5rem)); margin-left: auto; margin-right: auto; }

.al-card { background: var(--hig-bg2); border-radius: var(--hig-radius-lg, 14px); padding: 16px; }

.al-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.al-field { display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 280px; flex: 0 1 360px; }
.al-cap { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--hig-label2); }
.al-select { min-height: 40px; }
.al-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.al-max { min-width: 44px; }

.al-search { margin-top: 12px; min-height: 40px; }

.al-meta { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; font-size: 13px; color: var(--hig-label2); }

.al-output {
    height: 520px; overflow: auto; margin-top: 8px; padding: 10px 12px;
    background: var(--hig-bg); border: var(--hig-hairline, 0.5px) solid var(--hig-separator);
    border-radius: var(--hig-radius, 10px);
    font: 12px/1.5 var(--hig-font-mono); color: var(--hig-label);
    white-space: pre-wrap; overflow-wrap: anywhere;
}
.al-line { min-height: 1.5em; }
.al-line mark { padding: 0; border-radius: 2px; background: var(--hig-yellow); color: #000; }

/* Maximized: the log fills the window, above the portal's navbar. */
body.al-maximized { overflow: hidden; }
.al-card.is-maximized {
    position: fixed; inset: 0; z-index: 1080; margin: 0; border-radius: 0;
    display: flex; flex-direction: column;
}
.al-card.is-maximized .al-field,
.al-card.is-maximized .al-meta { display: none; }
.al-card.is-maximized .al-toolbar { justify-content: flex-end; }
.al-card.is-maximized .al-search { margin-top: 10px; }
.al-card.is-maximized .al-output { flex: 1; min-height: 0; height: auto; }

@media (max-width: 640px) {
    .al-card { padding: 12px; }
    .al-field { min-width: 0; flex: 1 1 100%; }
    .al-controls { width: 100%; }
    .al-controls .si-acct-btn { flex: 1; }
    .al-output { height: 420px; }
}