/* Shared screen styles. Keep document/PDF print rules in their own templates. */
:root {
    --s4s-ui-font: 'Instrument Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --s4s-ui-space-1: 4px;
    --s4s-ui-space-2: 8px;
    --s4s-ui-space-3: 12px;
    --s4s-ui-space-4: 16px;
    --s4s-ui-space-5: 24px;
    --s4s-ui-border: #dce5ee;
    --s4s-ui-ink: #172b42;
    --s4s-ui-muted: #53677c;
    --s4s-ui-radius: 10px;
}

@media screen {
    html, body, button, input, select, textarea {
        font-family: var(--s4s-ui-font);
    }

    body.s4s-authenticated,
    body.s4s-workspace-body,
    body.cp-body {
        color: var(--s4s-ui-ink);
        font-size: 14px;
        line-height: 1.55;
        -webkit-font-smoothing: antialiased;
    }

    :where(.s4s-page, .cp-content, #app main) {
        min-width: 0;
    }

    :where(.s4s-page, .cp-content, #app main) :where(h1, h2, h3) {
        overflow-wrap: anywhere;
        text-wrap: pretty;
    }

    body.s4s-authenticated .s4s-h1,
    .cp-page-heading h1 {
        font-size: clamp(23px, 2.2vw, 30px);
        font-weight: 700;
        line-height: 1.25;
        letter-spacing: -.025em;
    }

    body.s4s-authenticated .s4s-card h2,
    .ops-card h2 {
        font-size: 17px;
        font-weight: 700;
        line-height: 1.35;
    }

    body.s4s-authenticated :where(.s4s-card, .ops-card, .s4s-stat),
    .cp-card {
        min-width: 0;
        border-radius: 12px;
    }

    body.s4s-authenticated :where(.s4s-btn, .s4s-tool-btn),
    .cp-body .cp-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--s4s-ui-space-2);
        min-height: 42px;
        padding: 9px 14px;
        border-radius: var(--s4s-ui-radius);
        font-size: 13px;
        font-weight: 650;
        line-height: 1.25;
        text-decoration: none;
        cursor: pointer;
        transition: background-color .15s, border-color .15s, box-shadow .15s;
    }

    body.s4s-authenticated :where(.s4s-btn, .s4s-tool-btn):disabled,
    .cp-btn:disabled {
        opacity: .55;
        cursor: not-allowed;
    }

    body.s4s-authenticated .s4s-page :where(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    .cp-body .cp-main :where(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
        max-width: 100%;
        border-radius: var(--s4s-ui-radius);
        font-size: 14px;
        line-height: 1.35;
    }

    body.s4s-authenticated .s4s-page :where(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
    .cp-body .cp-main :where(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]) {
        min-height: 42px;
    }

    body.s4s-authenticated :where(.s4s-page, #app main) :where(label, .s4s-envelope-label),
    .cp-body .cp-main label {
        line-height: 1.45;
    }

    body.s4s-authenticated :where(.s4s-table-wrap, .s4s-data-region, .ops-table),
    .cp-body .cp-table-wrap {
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    body.s4s-authenticated .s4s-table,
    .cp-body .cp-table {
        font-size: 13px;
        line-height: 1.5;
        font-variant-numeric: tabular-nums;
    }

    body.s4s-authenticated .s4s-table :where(th, td),
    .cp-body .cp-table :where(th, td) {
        padding: 11px 12px;
        vertical-align: top;
    }

    body.s4s-authenticated .s4s-table tbody tr:hover,
    .cp-body .cp-table tbody tr:hover {
        background: #f5f9ff;
    }

    body.s4s-authenticated .s4s-nav a,
    .cp-body .cp-nav a {
        line-height: 1.4;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    :where(a, button, input, select, textarea, summary):focus-visible {
        outline: 3px solid #277cc4;
        outline-offset: 2px;
    }

    @media (max-width: 760px) {
        body.s4s-authenticated > .s4s-page,
        .cp-body .cp-content {
            padding-inline: 14px;
        }
        body.s4s-authenticated .s4s-title-row {
            align-items: flex-start;
            gap: 12px;
        }
        body.s4s-authenticated .s4s-actions {
            flex-wrap: wrap;
        }
        body.s4s-authenticated .s4s-table-toolbar {
            position: static;
        }
        .s4s-envelope-builder {
            grid-template-columns: minmax(0, 1fr);
        }
        .s4s-envelope-size-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 460px) {
        .s4s-envelope-size-grid {
            grid-template-columns: minmax(0, 1fr);
        }
        .s4s-envelope-actions .s4s-btn {
            width: 100%;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        body.s4s-authenticated .s4s-btn,
        .cp-body .cp-btn {
            transition: none;
        }
    }
}

/* Searchable ERP selects retain the native form value and display search inside the dropdown. */
@media screen {
    body.s4s-app-erp .s4s-erp-select { position:relative; width:100%; min-width:0; margin-top:5px; }
    body.s4s-app-erp .s4s-erp-select-trigger {
        width:100%; min-width:0; min-height:43px; display:flex; align-items:center; justify-content:space-between;
        gap:10px; padding:9px 12px; border:1px solid #b8c9d9; border-radius:10px;
        background:#fff; color:#173651; font:inherit; font-size:13px; font-weight:600; text-align:left; cursor:pointer;
    }
    body.s4s-app-erp .s4s-erp-select-trigger::after { content:'⌄'; flex:none; color:#526d84; font-size:18px; line-height:1; }
    body.s4s-app-erp .s4s-erp-select-trigger.is-placeholder { color:#53677c; }
    body.s4s-app-erp .s4s-erp-select.is-open .s4s-erp-select-trigger { border-color:#277cc4; box-shadow:0 0 0 3px rgba(39,124,196,.13); }
    body.s4s-app-erp .s4s-erp-select-value { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    body.s4s-app-erp .s4s-erp-select-native {
        position:absolute!important; left:0!important; bottom:0!important; width:1px!important; height:1px!important;
        min-height:1px!important; padding:0!important; margin:0!important; opacity:0!important;
        pointer-events:none!important; border:0!important; clip-path:inset(50%);
    }
    .s4s-erp-select-popover {
        position:fixed; z-index:10050; display:flex; flex-direction:column; gap:7px;
        max-width:calc(100vw - 24px); padding:9px; border:1px solid #b8c9d9; border-radius:12px;
        background:#fff; color:#173651; box-shadow:0 15px 40px rgba(18,47,82,.19); box-sizing:border-box;
    }
    .s4s-erp-select-popover[hidden] { display:none!important; }
    .s4s-erp-select-popover .s4s-erp-select-query {
        display:block; flex:none; width:100%; min-width:0; min-height:42px; padding:9px 12px;
        border:1px solid #b8c9d9; border-radius:9px; background:#fff; color:#173651;
        font:inherit; font-size:14px; box-sizing:border-box;
    }
    .s4s-erp-select-popover .s4s-erp-select-query:focus { border-color:#277cc4; outline:2px solid #277cc4; outline-offset:1px; }
    .s4s-erp-select-options { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
    .s4s-erp-select-popover .s4s-erp-select-option {
        display:block; width:100%; padding:10px 11px; border:0; border-radius:8px;
        background:transparent; color:#173651; font:inherit; font-size:13px; text-align:left;
        white-space:normal; overflow-wrap:anywhere; cursor:pointer;
    }
    .s4s-erp-select-option:hover, .s4s-erp-select-option:focus-visible,
    .s4s-erp-select-option[aria-selected="true"] { background:#eaf3ff; color:#0755a5; }
    .s4s-erp-select-empty { padding:12px; font-size:13px; color:#53677c; }
    body.s4s-app-erp .s4s-toolbar-right:empty { display:none; }
}