/* Extended styles and responsive design */
.fom-wrap { padding: 12px; background: #fff; border: 1px solid #eee; border-radius: 12px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }
.fom-title { margin-top: 0; font-size: 18px; }
.fom-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.fom-filters input[type="text"], .fom-filters select, .fom-filters input[type="date"], .fom-filters textarea { padding: 8px 10px; border: 1px solid #ddd; border-radius: 6px; }
.fom-date-label { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.fom-btn { padding: 8px 12px; background: #0073aa; color: #fff; border: none; border-radius: 6px; cursor: pointer; }
.fom-btn-secondary { background: #eee; color: #333; }
.fom-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.fom-table th, .fom-table td { border: 1px solid #f0f0f0; padding: 8px; text-align: left; font-size: 14px; }
.fom-table thead th { background: #fafafa; }
.fom-pagination { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.fom-pagination .active { font-weight: bold; text-decoration: underline; }
.fom-modal { position: fixed; inset: 0; display: none; background: rgba(0,0,0,.45); z-index: 9999; padding: 16px; }
.fom-modal[aria-hidden="false"] { display: flex; align-items: center; justify-content: center; }
.fom-modal-content { background: #fff; border-radius: 10px; padding: 0; width: min(980px, 98vw); max-height: 95vh; overflow: auto; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.fom-close { position: absolute; top: 8px; right: 10px; background: transparent; border: none; font-size: 22px; cursor: pointer; color: #666; }
.fom-order-modal { padding: 16px; }
.fom-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.fom-tab { padding: 8px 10px; background: #f7f7f7; border-radius: 6px; border: 1px solid #eee; cursor: pointer; }
.fom-tab.active { background: #fff; border-bottom: 2px solid #0073aa; font-weight: bold; }
.fom-tab-contents { background: #fff; padding: 6px; }
.fom-tab-panel { display: none; padding: 8px 4px; }
.fom-tab-panel.active { display: block; }
.fom-items-list { list-style: disc; padding-left: 18px; }
.fom-address { background: #fafafa; padding: 8px; border-radius: 6px; border: 1px solid #f1f1f1; }
.fom-notes-list .fom-note { background: #fff; border: 1px solid #eee; padding: 8px; margin-bottom: 8px; border-radius: 6px; }
.fom-add-note textarea { width: 100%; min-height: 80px; margin-bottom: 8px; }
.fom-edit-actions { display: flex; gap: 8px; margin-top: 10px; }
#fom-edit-result { margin-top: 8px; font-size: 14px; }
@media (max-width: 700px) {
    .fom-filters { flex-direction: column; align-items: stretch; }
    .fom-tab { flex: 1 1 auto; }
    .fom-modal-content { width: 98vw; padding: 0; }
    .fom-order-modal { padding: 12px; }
    .fom-table th, .fom-table td { font-size: 13px; }
}
/* CSS — put in your theme stylesheet or plugin CSS file */
.fom-items { width:100%; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }

/* Desktop header */
.fom-items-header {
    display: grid;
    grid-template-columns: 1fr 80px 110px;
    gap: 12px;
    padding: 8px 0;
    font-weight: 600;
    color: #333;
    border-bottom: 1px solid #e6e6e6;
}

/* Reset list */
.fom-items-list { list-style: none; margin: 0; padding: 0; }

/* Each row as a 3-column grid on wider screens */
.fom-item-row {
    display: grid;
    grid-template-columns: 1fr 80px 110px;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f3f3f3;
}

/* Make names stand out */
.fom-item-name { font-weight: 500; }

/* Align amount to the right visually */
.fom-item-qty,
.fom-item-total {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Responsive: stack fields on smaller screens */
@media (max-width: 600px) {
    .fom-items-header { display: none; } /* hide header on mobile */

    /* Stack each row vertically */
    .fom-item-row {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 12px 0;
    }

    /* Display label above qty/total using the data-label attribute */
    .fom-item-qty::before,
    .fom-item-total::before {
        content: attr(data-label);
        display: block;
        font-size: 12px;
        color: #777;
        margin-bottom: 4px;
    }

    .fom-item-qty,
    .fom-item-total {
        text-align: left;
    }
}
a.wt_pklist_admin_print_document_btn {
    background: #0073aa;
    border-radius: 6px;
    padding: 6px;
    color: white;
    font-size: 0.8em;
}