/* Around the handheld: the sign-in and connection screens, the account sheet, the documents of a flow, and what
   a phone needs so that the handheld fills its screen. The handheld itself is styled by the product's own
   stylesheet (handheld/ModaxHandheldUI.css), which is not changed here. */

#controlAddIn[hidden], #wmsShell[hidden] { display: none !important; }

#wmsShell {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    padding-top: calc(24px + env(safe-area-inset-top));
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
    overflow: auto;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: rgba(255, 255, 255, 0.92);
}
.wms-card {
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    text-align: center;
}
.wms-logo { width: 84px; height: 80px; object-fit: contain; margin: 0 auto 6px auto; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45)); }
.wms-title { font-size: 28px; font-weight: 700; letter-spacing: 0.2px; }
.wms-sub { font-size: 14px; color: rgba(255, 255, 255, 0.62); margin-bottom: 14px; }
.wms-text { font-size: 15px; line-height: 22px; margin: 0 0 6px 0; color: rgba(255, 255, 255, 0.86); }
.wms-detail { font-size: 13px; line-height: 19px; margin: 0; color: rgba(255, 255, 255, 0.6); min-height: 4px; }
.wms-error { font-size: 13px; line-height: 19px; margin: 0; color: #ffb4bd; }
.wms-label { font-size: 12px; letter-spacing: 0.4px; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); text-align: left; margin-top: 6px; }
.wms-select {
    width: 100%;
    height: 48px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    font-size: 16px;
    padding: 0 12px;
}
.wms-select option { color: #111; }
.wms-btn {
    height: 52px;
    border: 0;
    border-radius: 14px;
    background: #2B78D6;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 10px;
}
.wms-btn:disabled { opacity: 0.55; cursor: default; }
.wms-btn-quiet { background: rgba(127, 127, 127, 0.18); color: inherit; font-weight: 600; height: 46px; margin-top: 8px; }
.wms-link { background: none; border: 0; color: rgba(255, 255, 255, 0.7); font-size: 14px; padding: 12px; cursor: pointer; text-decoration: underline; }

/* the account button takes the corner the back arrow uses inside a flow (it shows on the home screen only) */
.wms-account-btn { right: auto; left: 14px; }

.wms-sheet {
    position: absolute;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: flex-end;
    font-family: var(--font);
}
.wms-sheet-box {
    width: 100%;
    background: var(--panel);
    color: var(--text);
    border-radius: 20px 20px 0 0;
    padding: 20px 20px calc(16px + env(safe-area-inset-bottom)) 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.wms-sheet-title { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.wms-sheet-row { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.wms-sheet-key { color: var(--muted); flex: none; }
.wms-sheet-val { text-align: right; overflow-wrap: anywhere; }
.wms-sheet .wms-link { color: var(--muted); }

/* documents of a flow: chips at the top of the handheld */
.wms-files {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 64px;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: var(--font);
}
.wms-file {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #1f6f43;
    color: #fff;
    border-radius: 12px;
    padding: 4px 4px 4px 14px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}
.wms-file-open { flex: 1; min-width: 0; color: #fff; font-size: 14px; font-weight: 600; text-decoration: underline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 9px 0; }
.wms-file-close { flex: none; width: 36px; height: 36px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }

/* A phone: the handheld is the screen. No stage, no drawn device around it, and room for the notch. */
@media (max-width: 600px) {
    .hh-stage { padding: 0 !important; height: 100dvh !important; align-items: stretch !important; justify-content: stretch !important; }
    .hh-scale { transform: none !important; width: 100%; height: 100%; }
    .hh-root { width: 100% !important; height: 100% !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
    .hh-root::after { display: none !important; }
    .hh-stage-brand, .hh-stage-note { display: none !important; }
    .hh-content { padding-top: calc(14px + env(safe-area-inset-top)) !important; }
    .hh-header { top: calc(-14px - env(safe-area-inset-top)) !important; }
    .hh-nav-back { top: calc(22px + env(safe-area-inset-top)) !important; }
    .hh-theme-btn { top: calc(10px + env(safe-area-inset-top)) !important; }
    .hh-footer { padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important; }
    .wms-files { top: calc(64px + env(safe-area-inset-top)); }
}