/* ===== Online Orders ===== */
.oo-btn { border: 1px solid var(--border, #d9dee5); background: #fff; color: var(--text, #1f2933); border-radius: 8px; padding: 10px 16px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; }
.oo-btn-green { background: var(--db-green, #1b7a43); border-color: var(--db-green, #1b7a43); color: #fff; }
.oo-btn-red { color: #b3261e; border-color: #f0c4c1; background: #fff; }
.oo-btn-light { background: #f4f6f8; }
.oo-btn:disabled { opacity: .55; cursor: not-allowed; }

.oo-empty { text-align: center; color: var(--muted, #6b7785); padding: 26px 10px; margin: 0; }

.oo-card { border: 1px solid var(--border, #d9dee5); border-radius: 12px; padding: 14px; margin-bottom: 14px; background: #fff; }
.oo-card.is-new { border-color: #f3d089; background: #fffdf6; }
.oo-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.oo-top b { font-size: 17px; }
.oo-top small { display: block; color: var(--muted, #6b7785); font-size: 12px; }
.oo-st { padding: 4px 12px; font-size: 12px; font-weight: 800; border-radius: 999px; }
.oo-st-new { color: #7a5a00; background: #fff1c2; }
.oo-st-confirmed { color: #0b4f8a; background: #dcecfa; }
.oo-st-shipped { color: #5b2c91; background: #ece0f8; }
.oo-st-delivered { color: #17663f; background: #d9f1e3; }
.oo-st-cancelled { color: #8a1f1f; background: #fbe0e0; }

.oo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.oo-card { min-width: 0; }
.oo-grid > div { min-width: 0; }
.oo-grid h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #6b7785); }
.oo-who { font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.oo-who b { font-size: 15px; }
.oo-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.oo-links a { padding: 7px 12px; font-size: 13px; font-weight: 700; text-decoration: none; color: var(--db-green, #1b7a43); background: #eef7f1; border-radius: 8px; }
.oo-note { margin-top: 8px; padding: 8px 10px; font-size: 13px; background: #f6f8fa; border-radius: 8px; }

.oo-items { width: 100%; min-width: 0; white-space: normal; border-collapse: collapse; font-size: 14px; }
.oo-items td { padding: 5px 0; font-size: 14px; border-bottom: 1px solid #eef1f4; }
.oo-items tbody tr:hover { background: none; }
.oo-items td:last-child { text-align: right; white-space: nowrap; }
.oo-items tr.oo-sum td { border-bottom: 0; color: var(--muted, #6b7785); }
.oo-items tr.oo-good td { color: #1a7a45; }
.oo-items tr.oo-total td { padding-top: 8px; font-size: 16px; font-weight: 800; color: var(--text, #1f2933); border-top: 1px dashed #d9dee5; }

.oo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #eef1f4; }
.oo-actions label { font-size: 13px; font-weight: 600; }
.oo-actions select { border: 1px solid var(--border, #d9dee5); border-radius: 8px; padding: 9px 10px; font-size: 14px; font-family: inherit; background: #fff; }
.oo-info { font-size: 13px; color: var(--muted, #6b7785); }

@media (max-width: 760px) {
    .oo-grid { grid-template-columns: minmax(0, 1fr); }
    .db-cards-3.oo-stats { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
    .oo-stats .db-card { padding: 12px 10px; }
    .oo-stats .db-card strong { font-size: 17px; }
    .oo-stats .db-card small { display: none; }
    .oo-actions .oo-btn { flex: 1 1 100%; }
}

#oo-toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); background: #1f2933; color: #fff; padding: 10px 18px; border-radius: 8px; font-size: 14px; z-index: 3000; max-width: 90vw; }
#oo-toast[hidden] { display: none; }