/* Shared BCTV look for user-facing pages (body.bctv): header bar, panels, fields,
   buttons. Load after control.css, which other pages still rely on as-is; the
   generic control.css rules (fixed body size, centered labels, tiny buttons) are
   overridden here only for pages that opt in with class="bctv". */
body.bctv {
    --blue: rgb(33, 80, 157);
    --blue-soft: rgba(33, 80, 157, .08);
    --line: rgba(33, 80, 157, .25);
    --bad: rgb(216, 31, 69);
    --ok: #2e7d32;
    --page: #f4f6fa;
    min-width: 0;
    width: auto;
    align-content: start; /* control.css centers body content vertically */
    min-height: 100vh;
    height: auto;
    margin: 0;
    padding: 0 16px 16px;
    box-sizing: border-box;
    overflow: auto;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--blue);
    background: var(--page);
}
body.bctv *, body.bctv *::before, body.bctv *::after { box-sizing: border-box; }

/* Anything a page script hides with visibility:collapse also gives up its space. */
body.bctv [style*="visibility: collapse"], body.bctv .hidden { display: none !important; }

/* ---- form controls ---- */
body.bctv label { display: block; text-align: left; margin: 0 0 3px; font-size: .85em; }
body.bctv select, body.bctv input:not([type=radio]):not([type=checkbox]) {
    height: 34px; padding: 4px 8px; margin: 0; font-size: .95em; border-radius: 6px; width: 100%; min-width: 0;
}
body.bctv select[size] { height: auto; }
body.bctv textarea {
    width: 100%; min-width: 0; padding: 6px 8px; font-family: inherit; font-size: .9em;
    color: var(--blue); border: 2px solid var(--blue); border-radius: 6px; background: white;
}
body.bctv .button, body.bctv button.bctv-btn {
    width: auto; height: auto; min-height: 36px; margin: 0; padding: 6px 12px;
    font-size: .85em; line-height: 1.2; border-radius: 10px; white-space: normal;
    box-shadow: 0 2px 0 rgba(33, 80, 157, .35);
}
body.bctv .button:active { transform: translateY(2px); box-shadow: none; }
body.bctv .button.danger { color: var(--bad); border-color: var(--bad); }
body.bctv .button.danger:hover { background: var(--bad); color: white; }
body.bctv .button.primary { background: var(--blue); color: white; }
body.bctv .button.primary:hover { background: white; color: var(--blue); }
body.bctv h1, body.bctv h2 { margin: 0; }
body.bctv h2 { font-size: 1.1em; }
body.bctv .spacer { flex: 1; }
body.bctv .hint { font-size: .85em; opacity: .8; font-weight: normal; }
body.bctv .field { display: flex; flex-direction: column; min-width: 0; }
body.bctv .field.inline { flex-direction: row; align-items: center; gap: 8px; }
body.bctv .field.inline label { margin: 0; white-space: nowrap; }
body.bctv .field.inline select { width: auto; }
body.bctv .opt { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .9em; font-weight: normal; cursor: pointer; }
body.bctv a.bctv-link, body.bctv a.bctv-link:visited { color: var(--blue); font-weight: bold; }
body.bctv a.bctv-link.danger, body.bctv a.bctv-link.danger:visited { color: var(--bad); }

/* ---- header ---- */
.bctv-header {
    position: sticky; top: 0; z-index: 5;
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px;
    margin: 0 -16px 16px; padding: 10px 16px;
    background: white; border-bottom: 3px solid var(--blue);
}
.bctv-header h1 { font-size: 1.4em; white-space: nowrap; }
.bctv-logo { height: 36px; width: auto; }
.bctv-nav { display: flex; flex-wrap: wrap; gap: 8px; }
body.bctv .bctv-user { margin: 0; font-size: .95em; opacity: .85; }

/* ---- panels ---- */
.bctv-panel {
    display: flex; flex-direction: column; gap: 10px; min-width: 0;
    background: white; border: 2px solid var(--blue); border-radius: 14px; padding: 14px;
}
.bctv-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.bctv-row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; }
.bctv-row .field { flex: 1 1 160px; }
/* Buttons fill rows evenly and wrap instead of shrinking their text. */
.bctv-btnrow { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.bctv-status { min-height: 1.2em; font-size: .9em; white-space: pre-wrap; }

/* ---- centered card (login / password pages) ---- */
body.bctv.bctv-centered { display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.bctv-card {
    width: 100%; max-width: 420px;
    display: flex; flex-direction: column; gap: 14px;
    background: white; border: 2px solid var(--blue); border-radius: 16px; padding: 28px 24px;
    box-shadow: 0 8px 24px rgba(33, 80, 157, .12);
}
.bctv-card .bctv-logo { height: 64px; align-self: center; }
.bctv-card h1 { font-size: 1.3em; text-align: center; letter-spacing: .03em; }
.bctv-card .button { width: 100%; min-height: 42px; font-size: .95em; }
.bctv-card .center { text-align: center; }

@media (max-width: 640px) {
    .bctv-header { position: static; gap: 8px; }
    .bctv-header h1 { font-size: 1.15em; }
    .bctv-logo { height: 28px; }
    .bctv-nav { order: 5; width: 100%; }
    body.bctv .bctv-nav .button { flex: 1 1 0; min-height: 32px; padding: 4px 6px; font-size: .78em; }
    .bctv-card { padding: 20px 16px; }
}