/* EFB+ LoadControl PWA shell: iPad / touch layout. Safe-area aware, 44 px touch targets, no hover-only UI. */
html, body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
}
#AppContent {
    box-sizing: border-box;
    height: 100vh;
    height: 100dvh;
    padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}

/* Touch devices: every control is at least 44 x 44 px, and hover-revealed UI stays visible. */
@media (pointer: coarse), (hover: none) {
    #efblc_root button,
    #efblc_root select,
    #efblc_root input:not([type="checkbox"]):not([type="radio"]),
    #efblc_root [role="button"],
    #efblc_root [onclick] {
        min-height: 44px;
        min-width: 44px;
        touch-action: manipulation;
    }
    #efblc_root input[type="checkbox"],
    #efblc_root input[type="radio"] { width: 28px; height: 28px; }
    #efblc_root [class*="hover"],
    #efblc_root .actions,
    #efblc_root .tools { opacity: 1 !important; visibility: visible !important; }
    #efblc_root input, #efblc_root select, #efblc_root textarea { font-size: 16px; } /* no iOS zoom on focus */
}

/* Online / offline badge */
#efblc_pwa_badge {
    position: fixed;
    z-index: 2147483000;
    top: calc(env(safe-area-inset-top, 0px) + 6px);
    right: calc(env(safe-area-inset-right, 0px) + 8px);
    padding: 3px 10px;
    border-radius: 999px;
    font: 600 12px/18px -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: #fff;
    pointer-events: none;
    letter-spacing: 0.02em;
}
#efblc_pwa_reload {
    position: fixed;
    z-index: 2147483001;
    top: calc(env(safe-area-inset-top, 0px) + 2px);
    right: calc(env(safe-area-inset-right, 0px) + 96px);
    width: 44px; height: 44px;
    border: 0; border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff; font-size: 22px; line-height: 44px; padding: 0;
    touch-action: manipulation;
}
#efblc_pwa_reload:active { background: rgba(255, 255, 255, 0.28); }
#efblc_pwa_badge.on { background: rgba(46, 160, 67, 0.85); }
#efblc_pwa_badge.off { background: rgba(200, 60, 60, 0.9); }

/* Pairing screen */
#efblc_pair {
    position: fixed;
    inset: 0;
    z-index: 2147482000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: calc(env(safe-area-inset-top, 0px) + 16px) calc(env(safe-area-inset-right, 0px) + 16px)
             calc(env(safe-area-inset-bottom, 0px) + 16px) calc(env(safe-area-inset-left, 0px) + 16px);
    background: #171a1d;
    color: #e6e9ec;
    font: 16px/1.4 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    overflow: auto;
}
.efblc-pair-card {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #22272b;
    border: 1px solid #343b41;
    border-radius: 14px;
    padding: 24px;
    box-sizing: border-box;
}
.efblc-pair-card h1 { margin: 0 0 4px; font-size: 22px; }
.efblc-pair-lead { margin: 0 0 8px; color: #aab3bb; }
.efblc-pair-card label { font-size: 14px; color: #aab3bb; margin-top: 6px; }
.efblc-pair-card input {
    min-height: 44px;
    font-size: 18px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #3d464d;
    background: #171a1d;
    color: #fff;
    box-sizing: border-box;
}
#efblc_pair_code { font-size: 28px; letter-spacing: 0.35em; text-align: center; font-variant-numeric: tabular-nums; }
.efblc-pair-card button {
    min-height: 48px;
    margin-top: 12px;
    font-size: 18px;
    font-weight: 600;
    border: 0;
    border-radius: 10px;
    background: #2f81f7;
    color: #fff;
    touch-action: manipulation;
}
.efblc-pair-card button:disabled { opacity: 0.6; }
.efblc-pair-msg { min-height: 22px; color: #ffb4a8; font-size: 15px; }
.efblc-pair-help { margin-top: 8px; color: #aab3bb; font-size: 14px; }
.efblc-pair-help summary { min-height: 44px; line-height: 44px; cursor: pointer; color: #e6e9ec; }
.efblc-pair-help ul { margin: 0; padding-left: 20px; }
.efblc-pair-help li { margin: 4px 0; }

/* ---- Tablet layouts (iPad mini/Air/Pro 11"/13", Galaxy Tab A/S, Pixel Tablet, Lenovo/Xiaomi 8-13") ---- */
html, body { overflow: hidden; position: fixed; inset: 0; width: 100%; }
#AppContent { overflow: hidden; }
#efblc_root { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#efblc_root input, #efblc_root textarea, #efblc_root pre { -webkit-user-select: text; user-select: text; }
#efblc_root .efblc-body { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

@media (pointer: coarse) {
    #efblc_root .efblc-seat { width: 20px; height: 20px; }
    #efblc_root .efblc-cell { min-height: 76px; }
    #efblc_root .efblc-cab { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* 8-9" tablets, portrait (iPad mini 744 px, Galaxy Tab A 800 px) */
@media (max-width: 820px) {
    #efblc_root { font-size: 15px !important; padding: 12px 14px 10px !important; }
    #efblc_root .efblc-temp { min-width: 11em; }
    #efblc_root .efblc-card { padding: .7em .75em; }
    #efblc_root .efblc-cab { justify-content: flex-start; }
}
/* 10-13" tablets: iPad 10th/A16, Air 11/13, Pro 11/13 (821-1400 px) */
@media (min-width: 821px) and (max-width: 1400px) and (pointer: coarse) {
    #efblc_root { font-size: 17px !important; padding: 16px 22px 14px !important; }
}
@media (max-height: 520px) and (orientation: landscape) {
    #efblc_root .efblc-cell { min-height: 56px; }
    #efblc_root .efblc-card { margin-bottom: 8px; }
}
/* ---- iPad-friendly sizing: bigger buttons + type; everything else is em-based and scales with the root ---- */
@media (pointer: coarse) {
    #efblc_root .efblc-btn { min-height: 48px; font-size: .92em; padding: .7em 1.4em; border-radius: .6em; margin: 0 .6em .6em 0; }
    #efblc_root .efblc-row .ctl .efblc-btn { margin: 0 0 0 .6em; }
    #efblc_root .efblc-seg button { min-height: 46px; font-size: .95em; padding: .5em 1.15em; }
    #efblc_root .efblc-in { min-height: 44px; font-size: 16px; padding: .4em .6em; }
    #efblc_root .efblc-row { min-height: 4em; }
    #efblc_root .efblc-chip { font-size: .88em; padding: .4em 1em; }
    /* small print was 10-11 px at tablet size: raise the floor */
    #efblc_root .efblc-kl { font-size: .7em; }
    #efblc_root .efblc-ks { font-size: .74em; }
    #efblc_root .efblc-ct { font-size: .74em; }
    #efblc_root .efblc-gap { font-size: .62em; }
    #efblc_root .efblc-cell { font-size: .72em; }
    #efblc_root .efblc-legend { font-size: .7em; }
    #efblc_root .efblc-temp .tz, #efblc_root .efblc-temp .ti, #efblc_root .efblc-temp .tw { font-size: .74em; }
    #efblc_root .efblc-temp .ts { font-size: .8em; }
    #efblc_root .efblc-tbl { font-size: .8em; }
    #efblc_root .efblc-tr > div { padding: .6em .5em; }
    #efblc_root .efblc-tr.th > div { padding: .45em .5em; }
    #efblc_root .efblc-det { font-size: .8em; }
    #efblc_root .efblc-msg { font-size: .8em; }
    #efblc_root .efblc-rno { font-size: 11px; }
    #efblc_root .efblc-rno b { font-size: 12px; }
}
@media (max-width: 820px) {
    #efblc_root { font-size: 16px !important; }
}
@media (min-width: 821px) and (max-width: 1400px) and (pointer: coarse) {
    #efblc_root { font-size: 19px !important; }
}
@media (min-width: 1401px) and (pointer: coarse) {
    #efblc_root { font-size: 21px !important; padding: 18px 28px 16px !important; }
}
