/* Заказы: изготовление (22.10.2026). Одна таблица: строка клиента, под ней позиции со статусом.
   Телефон главный: 390 по ширине, цели касания от 44px. */
.od-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.od-tile { display: flex; flex-direction: column; gap: 4px; padding: 14px 12px; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.od-tile-v { font-family: var(--disp); font-size: 22px; font-weight: 600; color: var(--ink-3); }
.od-tile-v.amber { color: var(--amber); }
.od-tile-v.green { color: #5CC49A; }
.od-tile-k { font-size: 12px; line-height: 1.3; color: var(--ink-3); }

.od-list { display: flex; flex-direction: column; gap: 10px; }
.od-group { display: flex; flex-direction: column; border-radius: 22px; background: var(--surface);
  border: 1px solid var(--line); overflow: hidden; }
.od-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 10px 16px; }
.od-client { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; color: var(--ink);
  text-decoration: none; min-height: 44px; justify-content: center; }
a.od-client:hover .od-name { color: var(--coral-hi); }
.od-name { font-family: var(--disp); font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.od-client .od-name::after { content: ' ›'; color: var(--ink-3); font-family: var(--text); }
.od-sub { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.od-items { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.od-item { display: grid; grid-template-columns: minmax(0, 1fr) auto 40px; align-items: center; gap: 8px;
  padding: 6px 8px 6px 16px; border-bottom: 1px solid var(--line); }
.od-item:last-child { border-bottom: 0; }
.od-prod { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.3; color: var(--ink); min-width: 0; }
.od-item.is-ready .od-prod { color: var(--ink-2); }
.od-qty { font-family: var(--mono); font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.od-qty:empty { display: none; }
.od-state { appearance: none; -webkit-appearance: none; min-height: 44px; padding: 0 30px 0 12px; border-radius: 14px;
  font: 600 13px var(--text); color: var(--amber); background-color: rgba(242, 193, 78, .12);
  border: 1px solid rgba(242, 193, 78, .3); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23F2C14E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; }
.od-item.is-ready .od-state { color: #5CC49A; background-color: rgba(92, 196, 154, .12); border-color: rgba(92, 196, 154, .35);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235CC49A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.od-state:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.od-state option { color: var(--ink); background: var(--surface-2); }
.od-del { display: grid; place-items: center; width: 40px; height: 44px; border: 0; border-radius: 12px;
  background: none; color: var(--ink-3); cursor: pointer; }
.od-del svg { width: 16px; height: 16px; }
.od-del:hover { color: #EE7A8A; background: rgba(238, 122, 138, .08); }

.od-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 6px 10px 10px 8px; border-top: 1px solid var(--line); }
.od-add { min-height: 44px; padding: 0 12px; border: 0; border-radius: 14px; background: none;
  font: 500 14px var(--text); color: var(--coral); cursor: pointer; }
.od-add:hover { background: rgba(234, 131, 105, .08); }
.od-ship { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.od-ship-q { font-size: 13px; color: var(--ink-2); margin-right: 2px; }
.od-ship-b { min-width: 56px; min-height: 44px; padding: 0 14px; border-radius: 14px; font: 600 14px var(--text);
  border: 1px solid var(--line-3); background: var(--surface-2); color: var(--ink-2); cursor: pointer; }
.od-ship-b.on { background: var(--surface-3); color: var(--ink); cursor: default; opacity: 1; }
.od-ship-b[data-act]:hover { border-color: rgba(92, 196, 154, .5); color: #5CC49A; background: rgba(92, 196, 154, .1); }

.od-done { margin-top: 4px; }
.od-done > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; list-style: none;
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.od-done > summary::-webkit-details-marker { display: none; }
.od-done > summary::before { content: '›'; display: inline-block; margin-right: 8px; transition: transform .2s var(--ease); }
.od-done[open] > summary::before { transform: rotate(90deg); }
.od-done-row { display: grid; grid-template-columns: 44px minmax(0, auto) minmax(0, 1fr); gap: 10px; align-items: baseline;
  padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 13px; }
.od-done-row:last-child { border-bottom: 0; }
.od-done-d { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.od-done-n { color: var(--ink); text-decoration: none; font-weight: 500; white-space: nowrap; }
a.od-done-n:hover { color: var(--coral-hi); }
.od-done-t { color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* компьютер: одна широкая колонка, читается как таблица (в две колонки названия ломались в три строки) */