/* floors-plus: orders */
/* The Orders tab (owner only) and the report messages the runner leaves in chat. Everything shares app.css's variables. */
.orders { background: var(--paper-2); flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.orders .lede { margin: 0; color: var(--ink-2); font-size: 15px; }
.order { padding: 11px 13px; border-radius: 12px; background: var(--white); border-left: 3px solid var(--ok); display: flex; flex-direction: column; gap: 6px; }
.order.paused { border-left-color: var(--warn); }
.order.running { border-left-color: var(--brand-2); }
.order-text { margin: 0; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; white-space: pre-wrap; }
.order-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; color: var(--ink-2); }
.order-meta b { font-weight: 700; color: var(--ink); }
.order-status { font-size: 14px; padding: 2px 8px; border-radius: 7px; background: var(--paper-2); color: var(--ok); align-self: flex-start; }
.order.paused .order-status { background: var(--paper-2); color: var(--warn); }
.order.running .order-status { background: var(--paper-2); color: var(--brand-2); }
.order-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.order-acts .btn { padding: 5px 10px; font-size: 14px; }
.order-history { font-size: 14px; }
.order-history summary { cursor: pointer; color: var(--ink-2); padding: 3px 0; }
.order-history summary::-webkit-details-marker { color: var(--ink-2); }
.order-runs { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.order-run { padding: 8px 10px; border-radius: 9px; background: var(--paper-2); border-left: 2px solid var(--ok); }
.order-run.failed { border-left-color: var(--bad); }
.order-run.running { border-left-color: var(--brand-2); }
.order-run small { display: block; color: var(--ink-2); margin-bottom: 3px; }
.order-run .doc { font-size: 14px; }
.order-run .doc p { margin: 0 0 .35em; } .order-run .doc ul { margin: .2em 0; padding-left: 1.2em; }
.order-new { padding: 11px 13px; border-radius: 12px; background: var(--white); border: 2px dashed var(--line); }
.order-new h3 { margin: 0 0 8px; font-size: 14px; font-weight: 700; }
.order-form { display: flex; flex-direction: column; gap: 9px; }
.order-form textarea { width: 100%; min-height: 64px; resize: vertical; }
.order-when { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.order-when label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--ink-2); }
.order-when label[hidden] { display: none; }
.order-when select, .order-when input { width: 100%; }
.orders .fineprint { margin-top: auto; }
/* A report from the runner: the manager's bubble with a ledger stripe, so the boss can tell it from chat at a glance. */
.msg.report .msg-body { background: var(--paper-2); border: 2px solid var(--line); border-left: 3px solid var(--ok); }
.msg.report .msg-who::after { content: ' · report'; color: var(--ok); }
@media (max-width: 760px) { .order-acts .btn { flex: 1 1 auto; } }

.lane { background: var(--white); color: var(--ink); border: 0; border-radius: 9px; box-shadow: 0 4px 0 #bda876; min-height: 56px; transition: transform .07s, box-shadow .07s; }
.lane b { font: 400 20px/1.1 var(--display); } .lane span { color: var(--ink); font-size: 15px; }
.lane:hover:not(:disabled) { background: #fff; border-color: transparent; transform: translateY(-1px); }
.lane:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #bda876; }
.lane:nth-of-type(1) b { color: var(--tomato); } .lane:nth-of-type(2) b { color: var(--teal); } .lane:nth-of-type(3) b { color: var(--sky); }
.order { background: var(--white); box-shadow: 0 3px 0 #bda876; border-radius: 6px; }
.msg.help .msg-body { background: #c2e6ff; border: 0; box-shadow: 0 3px 0 #7fa9c9; }
.msg.help .msg-who::after { color: var(--sky); }
.msg.report .msg-body { background: #c9f0aa; border: 0; box-shadow: 0 3px 0 #87b168; }
.msg.report .msg-who::after { color: var(--leaf); }