/* Colours come from the console's own theme tokens (--boba-*), which switch with the light theme. */

/* The sidebar orders its items with flex `order`; without one this item jumps to the top. */
#nav-unprinted { order: 25; }

.unprinted-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
  padding: 9px 12px;
  border: 1px solid var(--boba-border-strong);
  border-radius: var(--boba-radius-control, 8px);
  color: var(--boba-text);
  background: var(--boba-warning-soft);
  font-size: 13px;
  line-height: 1.45;
}
.unprinted-notice.hidden { display: none; }
.unprinted-notice-action {
  flex: 0 0 auto;
  border: 1px solid var(--boba-border-strong);
  border-radius: 999px;
  padding: 5px 10px;
  color: var(--boba-brand-strong);
  background: transparent;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.unprinted-notice-text { min-width: 0; }
.unprinted-notice-short { display: none; }

/* The theme sheet colours every order button with `#comments-view .order-btn { … !important }`,
   so this state needs the same weight. Green is "create", red is "done", amber is "reprint". */
#comments-view .order-btn.order-btn-saved {
  border-color: color-mix(in srgb, var(--boba-info) 55%, transparent) !important;
  color: var(--boba-canvas) !important;
  background: var(--boba-info) !important;
}

.uo-panel { display: grid; gap: 16px; min-width: 0; color: var(--boba-text); }
.uo-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.uo-header h2 { margin: 0; font-size: 22px; }
.uo-header p { margin: 5px 0 0; color: var(--boba-text-tertiary); font-size: 13px; }
.uo-device { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.uo-device label { font-weight: 700; color: var(--boba-text-secondary); }
.uo-device select {
  flex: 0 1 320px;
  min-width: 0;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--boba-border);
  border-radius: var(--boba-radius-control, 8px);
  color: var(--boba-text);
  background: var(--boba-control);
  font: inherit;
}
.uo-device-hint { flex: 1 1 100%; margin: 0; color: var(--boba-warning); font-size: 13px; }
.uo-device-hint:empty { display: none; }
.uo-status { min-height: 18px; margin: -8px 0 0; color: var(--boba-text-secondary); font-size: 13px; font-weight: 700; }
.uo-status:empty { display: none; }
.uo-date-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.uo-tab, .uo-secondary, .uo-back, .uo-order-actions button {
  min-height: 40px;
  border: 1px solid var(--boba-border);
  border-radius: var(--boba-radius-control, 8px);
  padding: 8px 12px;
  color: var(--boba-text-secondary);
  background: var(--boba-surface-raised);
  font: inherit;
  cursor: pointer;
}
.uo-tab.active {
  border-color: var(--boba-border-strong);
  color: var(--boba-brand-strong);
  background: var(--boba-selected);
  font-weight: 700;
}
.uo-sessions { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.uo-session {
  position: relative;
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  text-align: left;
  padding: 14px 34px 14px 15px;
  border: 1px solid var(--boba-border);
  border-radius: var(--boba-radius-card, 12px);
  color: var(--boba-text);
  background: var(--boba-surface);
  font: inherit;
  cursor: pointer;
}
.uo-session::after {
  content: "›";
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--boba-text-tertiary);
  font-size: 22px;
  line-height: 1;
}
.uo-session:hover, .uo-session:focus-visible { border-color: var(--boba-border-strong); }
.uo-session-platform, .uo-origin { color: var(--boba-text-tertiary); font-size: 12px; }
.uo-session strong { font-size: 16px; overflow-wrap: anywhere; }
.uo-session-time { color: var(--boba-text-secondary); font-size: 13px; overflow-wrap: anywhere; }
.uo-session-count { color: var(--boba-brand-strong); font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.uo-empty { padding: 18px; color: var(--boba-text-tertiary); text-align: center; }
.uo-detail-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.uo-detail-head h3 { margin: 4px 0; overflow-wrap: anywhere; }
.uo-detail-head p { margin: 0; color: var(--boba-text-tertiary); font-size: 13px; }
.uo-primary {
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: var(--boba-radius-control, 8px);
  padding: 9px 16px;
  color: var(--boba-canvas);
  background: var(--boba-brand);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.uo-primary:disabled, .uo-secondary:disabled, .uo-order-actions button:disabled {
  border-color: var(--boba-border);
  color: var(--boba-text-disabled);
  background: var(--boba-control);
  cursor: not-allowed;
}
.uo-customers { display: grid; gap: 14px; }
.uo-customer {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--boba-border);
  border-radius: var(--boba-radius-card, 12px);
  background: var(--boba-surface);
}
.uo-customer>header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px; }
.uo-customer>header>div { display: grid; gap: 3px; min-width: 0; }
.uo-customer>header strong { overflow-wrap: anywhere; }
.uo-customer>header span, .uo-customer>header small { color: var(--boba-text-tertiary); font-size: 12px; }
.uo-orders { display: grid; gap: 8px; }
.uo-order {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  min-width: 0;
  padding: 10px;
  border-radius: var(--boba-radius-control, 8px);
  background: var(--boba-surface-raised);
}
.uo-order p { min-width: 0; margin: 0; color: var(--boba-text); overflow-wrap: anywhere; white-space: pre-wrap; }
.uo-order time, .uo-order .uo-origin { grid-column: 1; font-size: 12px; color: var(--boba-text-tertiary); }
.uo-order-actions { grid-column: 2; grid-row: 1 / span 3; display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 10px; }
.uo-order-actions button { min-width: 56px; padding: 6px 10px; font-size: 13px; }
.uo-order-actions [data-uo-delete], .uo-order-actions [data-uo-confirm-delete] {
  border-color: color-mix(in srgb, var(--boba-danger) 40%, transparent);
  color: var(--boba-danger);
}
.uo-order-actions [data-uo-confirm-delete] { background: var(--boba-danger-soft); font-weight: 700; }
@media (max-width: 600px) {
  .unprinted-notice { box-sizing: border-box; height: 44px; min-height: 44px; max-height: 44px; align-items: center; flex-direction: row; gap: 6px; padding: 4px 8px; overflow: hidden; line-height: 1.2; }
  .unprinted-notice-text { flex: 1 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .unprinted-notice-long { display: none; }
  .unprinted-notice-short { display: inline; }
  .unprinted-notice-action { max-width: 46%; min-height: 30px; padding: 4px 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .uo-device select { flex: 1 1 100%; }
  .uo-detail-head { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .uo-detail-head .uo-back { justify-self: start; }
  .uo-customer>header { align-items: flex-start; flex-direction: column; }
  .uo-order { gap: 3px 8px; padding: 8px; }
  .uo-order-actions { gap: 10px; }
  .uo-order-actions button { min-width: 52px; padding: 6px 8px; }
}
/* Sidebar, desktop layout: tighter rows (expanded and icon-only alike) and, when expanded, tighter group
   headings, so that the whole navigation (which gained the reprint entry) stays on screen on a 1080p
   display. The phone layout is left exactly as it is. */
body:not(.mobile-mode) #app-shell > .sidebar .sidebar-nav {
  gap: 2px !important;
}
body:not(.mobile-mode) #app-shell > .sidebar .sidebar-nav .nav-item {
  min-height: 38px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
body:not(.mobile-mode) #app-shell > .sidebar:not(.collapsed) .sidebar-nav .nav-group-label {
  margin: 8px 10px 4px !important;
  padding-top: 8px !important;
}
body:not(.mobile-mode) #app-shell > .sidebar:not(.collapsed) .sidebar-nav .nav-group-label:first-of-type {
  margin-top: 2px !important;
  padding-top: 0 !important;
}

/* The status elements remain available to app.js but leave the comments layout. */
#app-shell:not(.hidden) #comments-view .comments-health-strip[aria-label] {
  display: none !important;
}

/* A small, page-level status message that stays reachable across views. It has to sit above the
   windows that produce messages while they are open: the manual-order window (.mo-backdrop, 10070),
   the customer-flag dialog (10060) and the customer/product detail card (100000). */
#bobalive-status-toast {
  position: fixed;
  z-index: 100500;
  left: 50%;
  bottom: 24px;
  box-sizing: border-box;
  width: max-content;
  max-width: min(560px, calc(100vw - 24px));
  padding: 12px 16px;
  transform: translateX(-50%);
  border: 1px solid transparent;
  border-radius: var(--boba-radius-card, 12px);
  /* Inverted on purpose (text colour as the fill): a fill close to the page colour was easy to miss. */
  color: var(--boba-canvas);
  background: var(--boba-text);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
  font: inherit;
  line-height: 1.45;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  opacity: 0;
  transition: opacity var(--bobalive-status-toast-fade-ms, 180ms) ease;
}
#bobalive-status-toast.is-failure {
  color: var(--boba-canvas);
  background: var(--boba-danger);
}
#bobalive-status-toast[hidden] {
  display: none !important;
}
#bobalive-status-toast.is-visible {
  opacity: 1;
}
#bobalive-status-toast.is-fading {
  opacity: 0;
}
body.mobile-mode #bobalive-status-toast {
  bottom: calc(16px + env(safe-area-inset-bottom));
}
@media (prefers-reduced-motion: reduce) {
  #bobalive-status-toast {
    transition: none !important;
  }
}

/* Icon-only sidebar: the three top buttons are stacked there (down to y=152), so the menu has to start
   below them instead of underneath them. */
@media (min-width: 1024px) {
  body:not(.mobile-mode) #app-shell.sidebar-collapsed > .sidebar {
    padding-top: 164px !important;
  }
}

/* Gold primary buttons keep their gold fill under the pointer. An older rule in style.css turns the fill
   dark on hover while the text stays dark. A disabled button does not react to the pointer. */
.primary-btn:hover {
  background: var(--boba-brand) !important;
}
.primary-btn:not(:disabled):hover {
  filter: brightness(1.07);
}
.primary-btn:disabled:hover {
  filter: none !important;
}

/* Reprint history controls use the existing theme tokens in both light and dark mode. */
.uo-history-count { color: var(--boba-text); }
.uo-count-failed, .uo-state-failed { color: var(--boba-danger); font-weight: 800; }
.uo-history-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.uo-order-filters { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.uo-order-filters button {
  min-height: 40px;
  border: 1px solid var(--boba-border);
  border-radius: var(--boba-radius-control, 8px);
  padding: 8px 12px;
  color: var(--boba-text);
  background: var(--boba-surface-raised);
  font: inherit;
  cursor: pointer;
}
.uo-order-filters button[aria-pressed="true"] {
  border-color: var(--boba-brand-strong);
  color: var(--boba-text);
  background: var(--boba-selected);
  font-weight: 700;
}
.uo-printing-note, .uo-history-truncated { margin: 0; color: var(--boba-text); font-size: 13px; font-weight: 700; }
.uo-history-truncated { padding: 9px 12px; border: 1px solid var(--boba-border); border-radius: var(--boba-radius-control, 8px); background: var(--boba-surface-raised); }
.uo-order-state { color: var(--boba-text); font-size: 13px; font-weight: 800; }
.uo-order-actions [data-uo-again] { border-color: var(--boba-brand-strong); color: var(--boba-text); }
.uo-order[data-uo-state="printing"] .uo-order-actions { align-items: center; }
@media (max-width: 600px) {
  .uo-order-filters { gap: 8px; }
  .uo-order-filters button, .uo-order-actions [data-uo-again] { min-height: 44px; }
  .uo-history-tools { align-items: flex-start; flex-direction: column; }
  .uo-order-filters button { padding: 8px 10px; }
  .uo-order-actions [data-uo-again] { padding: 8px; }
}

/* Keep the failed state in danger color after the general order-state rule. */
.uo-order-state.uo-state-failed { color: var(--boba-danger); }

/* Narrow screens: a sent order shows its state and the print-again button on a line of their own, so the
   comment keeps the full width of the row (beside them it was squeezed into about 100px). */
@media (max-width: 600px) {
  .uo-order:not([data-uo-state="unprinted"]) .uo-order-actions {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
  }
}

/* The phone layout starts at 1023px, wider than the 600px block above: touch targets of the new controls. */
body.mobile-mode .uo-order-filters button,
body.mobile-mode .uo-order-actions [data-uo-again] { min-height: 44px; }