/* SHELL */
  .shell {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  /* TOPBAR */
  .topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    min-height: 72px;
    border-bottom: 1px solid var(--border);
    background: rgba(10, 10, 12, 0.75);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 32px;
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 28px;
    min-width: 0;
  }

  .brand-logo {
    height: 26px;
    width: auto;
    display: block;
    background: #ffffff;
    border-radius: 8px;
    padding: 6px 11px;
    box-shadow: 0 0 0 1px var(--border), 0 8px 24px -10px rgba(0, 0, 0, 0.6);
  }

  .brand-copy { min-width: 0; }

  .top-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
  }

  .nav-btn {
    height: 36px;
    padding: 0 14px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-dim);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: color 0.15s ease, background 0.15s ease;
  }

  .nav-btn:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }

  .nav-btn.active {
    color: var(--accent);
    background: var(--accent-soft);
  }

  .top-actions {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .status-pill {
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-dim);
    font-size: 11.5px;
    font-family: var(--mono);
    letter-spacing: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
  }

  .worker-pill {
    height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: rgba(255, 255, 255, 0.045);
    color: var(--text);
    font-size: 12.5px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
  }

  .worker-avatar {
    width: var(--space-6);
    height: var(--space-6);
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-circle);
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, #8ecae6, #219ebc);
    color: #023047;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.02em;
    flex: 0 0 var(--space-6);
  }

  .worker-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  .worker-pill-copy {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
  }

  .worker-pill #worker-label {
    font-family: var(--mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-dim);
    font-weight: 500;
  }

  .worker-pill #worker-name {
    font-weight: 600;
    letter-spacing: -0.01em;
  }

  .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(84, 217, 154, 0.18);
  }

  .top-actions .btn-secondary {
    min-height: 32px;
    padding: 0 14px;
    font-size: 12.5px;
    border-radius: 999px;
  }

  .account-menu-wrap {
    position: relative;
    display: inline-flex;
  }

  .top-actions .account-menu-btn {
    width: 36px;
    min-width: 36px;
    min-height: 32px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    flex: 0 0 36px;
  }

  .account-menu-btn svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
  }

  .account-menu {
    /* position: fixed (not absolute) so it escapes the .topbar overflow clip —
       same fix as the nav dropdowns. JS (toggleAccountMenu) sets top/left. */
    position: fixed;
    right: 0;
    top: calc(100% + 8px);
    z-index: 200;
    min-width: 168px;
    padding: 6px;
    border-radius: 14px;
    border: 1px solid var(--border-strong);
    background: rgba(18, 18, 21, 0.98);
    box-shadow: var(--shadow);
  }

  .account-menu-item {
    width: 100%;
    min-height: 40px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    display: flex;
    align-items: center;
    padding: 0 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
  }

  .account-menu-item:hover {
    background: rgba(255, 255, 255, 0.07);
  }

  /* LAYOUT */
  .main {
    width: min(1320px, 100%);
    margin: 0 auto;
    padding: 40px 32px 60px;
    display: grid;
    grid-template-columns: minmax(380px, 480px) minmax(0, 1fr);
    gap: 28px;
    position: relative;
    z-index: 1;
  }

  .home-main {
    display: block;
    max-width: 620px;
    padding: 40px 24px 60px;
  }

  .tickets-page {
    width: min(1320px, 100%);
    margin: 0 auto;
    padding: 40px 32px 60px;
    position: relative;
    z-index: 1;
    display: grid;
    gap: 22px;
  }

  .panel-head-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
  }

  .stat-pill-inline {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    margin-bottom: 6px;
  }
  .stat-pill-value {
    font-size: 18px;
    font-weight: 600;
    font-family: var(--mono);
    letter-spacing: -0.02em;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  .stat-pill-label {
    font-size: 10.5px;
    font-family: var(--mono);
    color: var(--text-dim);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 500;
  }

  .detail-head-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
  }
  .detail-head-row .btn {
    min-height: 38px;
    padding: 0 14px;
    font-size: 12.5px;
    margin-top: 6px;
  }
  .detail-head-row .btn svg { display: block; }

  .ticket-created {
    margin-top: 6px;
    color: var(--text-dim);
    font-size: 12px;
    font-family: var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* PANEL */
  .panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.012));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: clip;
    position: relative;
  }

  .panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
    pointer-events: none;
  }

  .panel-head {
    padding: 28px 28px 6px;
    position: relative;
  }

  .eyebrow {
    display: block;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--accent);
    margin-bottom: 12px;
  }

  .panel-head h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.028em;
    line-height: 1.1;
  }

  .panel-head h2 .soft {
    color: var(--text-dim);
    font-weight: 400;
  }

  .panel-body {
    padding: 24px 28px 28px;
    position: relative;
  }

  /* FORM */
  .stack { display: grid; gap: 20px; }
  .field { display: grid; gap: 9px; }

  label {
    color: var(--text-dim);
    font-size: 10.5px;
    font-weight: 600;
    font-family: var(--mono);
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  input, select, textarea {
    width: 100%;
    min-height: 52px;
    padding: 0 16px;
    background: var(--bg-input);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    outline: none;
    font-size: 15px;
    letter-spacing: -0.01em;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  }

  input::placeholder, select::placeholder {
    color: var(--text-mute);
    font-family: var(--mono);
    letter-spacing: 0.03em;
  }

  input:focus, select:focus, textarea:focus {
    border-color: var(--accent);
    background: rgba(0, 0, 0, 0.36);
    box-shadow: 0 0 0 4px var(--accent-soft);
  }

  .input-wrap { position: relative; }

  .input-wrap .input-prefix {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-mute);
    font-family: var(--mono);
    font-size: 15px;
    pointer-events: none;
    font-weight: 500;
  }

  .input-wrap input {
    padding-left: 38px;
    font-family: var(--mono);
    letter-spacing: 0.05em;
    font-size: 15px;
  }

  /* SEGMENTED */
  .segmented {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    padding: 5px;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
  }

  .segmented button {
    min-height: 40px;
    border-radius: 9px;
    color: var(--text-dim);
    font-size: 11.5px;
    font-weight: 700;
    font-family: var(--mono);
    letter-spacing: 0.16em;
    transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  }

  .segmented button:hover { color: var(--text); }

  .segmented button.active {
    background: rgba(255, 255, 255, 0.07);
    color: var(--text);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  }

  .segmented button[data-kind="antes"],
  .segmented button[data-detail-kind="antes"],
  .segmented button[data-ticket-kind="antes"] { color: var(--kind-antes); }
  .segmented button[data-kind="durante"],
  .segmented button[data-detail-kind="durante"],
  .segmented button[data-ticket-kind="durante"] { color: var(--kind-durante); }
  .segmented button[data-kind="despues"],
  .segmented button[data-detail-kind="despues"],
  .segmented button[data-ticket-kind="despues"] { color: var(--kind-despues); }

  .segmented button[data-kind="antes"].active,
  .segmented button[data-detail-kind="antes"].active,
  .segmented button[data-ticket-kind="antes"].active {
    background: var(--kind-antes-soft);
    color: var(--kind-antes);
    box-shadow: inset 0 0 0 1px rgba(95, 199, 229, 0.24);
  }
  .segmented button[data-kind="durante"].active,
  .segmented button[data-detail-kind="durante"].active,
  .segmented button[data-ticket-kind="durante"].active {
    background: var(--kind-durante-soft);
    color: var(--kind-durante);
    box-shadow: inset 0 0 0 1px rgba(232, 176, 74, 0.24);
  }
  .segmented button[data-kind="despues"].active,
  .segmented button[data-detail-kind="despues"].active,
  .segmented button[data-ticket-kind="despues"].active {
    background: var(--kind-despues-soft);
    color: var(--kind-despues);
    box-shadow: inset 0 0 0 1px rgba(180, 141, 232, 0.24);
  }

  /* DROPZONE */
  .dropzone {
    min-height: 200px;
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius);
    background: rgba(0, 0, 0, 0.18);
    display: grid;
    place-items: center;
    padding: 32px 22px;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
    position: relative;
  }

  .dropzone:hover {
    background: rgba(255, 106, 26, 0.04);
    border-color: rgba(255, 106, 26, 0.45);
  }

  .dropzone.dragging {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px var(--accent-glow);
  }

  .drop-inner {
    display: grid;
    place-items: center;
    gap: 14px;
    text-align: center;
  }

  .drop-icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
    border: 1px solid var(--border-strong);
    display: grid;
    place-items: center;
    color: var(--accent);
    box-shadow: 0 8px 24px -10px var(--accent-glow);
  }

  .drop-icon svg { width: 26px; height: 26px; display: block; }

  .drop-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: -0.01em;
  }

  .drop-subtitle {
    color: var(--text-dim);
    font-size: 13px;
    letter-spacing: -0.005em;
  }

  .drop-formats {
    margin-top: 4px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.22em;
    color: var(--text-mute);
    text-transform: uppercase;
  }

  #file-input,
  #apple-camera-input { display: none; }

  #apple-camera-btn {
    position: relative;
    overflow: hidden;
  }

  #apple-camera-btn::after {
    content: "HQ";
    margin-left: 2px;
    border-radius: 999px;
    border: 1px solid rgba(255, 184, 77, 0.34);
    background: rgba(255, 184, 77, 0.08);
    color: #ffd38a;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    padding: 2px 6px;
    transform: translateY(-1px);
  }

  /* PREVIEW */
  .preview-list { display: grid; gap: 8px; }

  .preview-list:empty { display: none; }

  .preview-row {
    min-height: 60px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 36px;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px 8px 8px;
    background: rgba(255, 255, 255, 0.025);
    transition: background 0.15s ease, border-color 0.15s ease;
  }

  .preview-row:hover { background: rgba(255, 255, 255, 0.045); border-color: var(--border-strong); }

  .preview-thumb-btn {
    width: 48px;
    height: 44px;
    display: block;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: zoom-in;
  }

  .preview-thumb-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }

  .preview-thumb {
    width: 48px;
    height: 44px;
    display: block;
    border-radius: 8px;
    object-fit: cover;
    background: var(--bg-elev-2);
  }

  .preview-meta { min-width: 0; }

  .preview-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.005em;
  }

  .preview-size {
    margin-top: 2px;
    color: var(--text-dim);
    font-size: 11px;
    font-family: var(--mono);
    letter-spacing: 0.02em;
  }

  .upload-progress {
    display: none;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.035);
  }

  .upload-progress.active {
    display: grid;
  }

  .upload-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-soft);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.04em;
  }

  .upload-progress-bar {
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
  }

  .upload-progress-fill {
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), #ffb88c);
    transition: width 0.18s ease;
  }

  /* BUTTONS */
  .button-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
  }

  .upload-source-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
  }

  .upload-source-row .btn {
    min-height: 56px;
    white-space: normal;
    text-align: center;
  }

  .btn {
    min-height: 48px;
    padding: 0 18px;
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease, transform 0.06s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  }

  .btn:active { transform: translateY(1px); }

  .btn-primary {
    background: var(--accent);
    color: #1a0e05;
    box-shadow: 0 12px 36px -14px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }
  .btn-primary:hover { background: var(--accent-hover); }

  .btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    border: 1px solid var(--border-strong);
  }
  .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: var(--border-bright);
  }

  .btn-danger {
    background: rgba(255, 94, 108, 0.1);
    color: var(--danger);
    border: 1px solid rgba(255, 94, 108, 0.28);
  }
  .btn-danger:hover { background: rgba(255, 94, 108, 0.18); }

  .btn:disabled {
    cursor: not-allowed;
  }

  .btn-primary:disabled {
    background: rgba(255, 106, 26, 0.22);
    color: rgba(255, 184, 140, 0.7);
    box-shadow: none;
  }

  .btn-secondary:disabled { opacity: 0.5; }

  .btn.full { width: 100%; }
  .upload-cta { width: 100%; min-height: 56px; font-size: 15px; }

  /* ICON BUTTON (close X) */
  .icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 0;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }

  .icon-btn::before {
    content: "✕";
    font-size: 13px;
    font-weight: 500;
    color: currentColor;
    line-height: 1;
  }

  .icon-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text);
    border-color: var(--border-strong);
  }

  /* SEARCH */
  .search-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }

  /* STATS */
  .stats {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-bottom: 22px;
  }

  .stat {
    display: flex;
    align-items: baseline;
    gap: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.025);
  }

  .stat-value {
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.04em;
    color: var(--text);
    line-height: 1;
    font-family: var(--mono);
  }

  .stat-label {
    color: var(--text-dim);
    font-size: 10.5px;
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 500;
  }

  /* RESULTS HEAD */
  .results-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 22px 0 14px;
  }

  .results-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }

  .results-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--text);
  }

  .result-count {
    color: var(--text-dim);
    font-size: 11.5px;
    font-family: var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
  }

  .results-title-row .btn-secondary {
    min-height: 34px;
    padding: 0 12px;
    font-size: 12.5px;
  }

  /* DETAIL CONTROLS */
  .detail-controls {
    display: grid;
    gap: 12px;
    margin: 6px 0 18px;
  }

  .kind-filter { grid-template-columns: repeat(4, 1fr); }

  .download-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .detail-download-menu-wrap {
    display: none;
    position: relative;
    justify-self: end;
  }

  .detail-download-menu-btn {
    min-height: 44px;
    min-width: 180px;
    padding: 0 18px;
    font-size: 14px;
    letter-spacing: -0.005em;
  }

  .download-menu-icon {
    font-size: 17px;
    line-height: 1;
  }

  .detail-download-menu .ticket-menu-item {
    text-decoration: none;
  }

  [data-role="viewer"] .detail-controls .desktop-detail-downloads {
    display: none;
  }

  [data-role="viewer"] .detail-controls .detail-download-menu-wrap {
    display: block;
    justify-self: stretch;
  }

  [data-role="viewer"] .detail-controls .detail-download-menu-btn {
    width: 100%;
    background: var(--accent);
    color: #1a0e05;
    border-color: transparent;
    box-shadow: 0 12px 36px -14px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }

  [data-role="viewer"] .detail-controls .detail-download-menu-btn:hover {
    background: var(--accent-hover);
  }

  .kind-download {
    flex: 1 1 160px;
    min-height: 44px;
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
  }

  .kind-download[data-kind="antes"] { background: var(--kind-antes-soft); color: var(--kind-antes); border: 1px solid rgba(95, 199, 229, 0.24); }
  .kind-download[data-kind="durante"] { background: var(--kind-durante-soft); color: var(--kind-durante); border: 1px solid rgba(232, 176, 74, 0.24); }
  .kind-download[data-kind="despues"] { background: var(--kind-despues-soft); color: var(--kind-despues); border: 1px solid rgba(180, 141, 232, 0.24); }
  .kind-download:hover { filter: brightness(1.2); }

  .selection-toolbar {
    min-height: 48px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.025);
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .selection-count {
    margin-right: auto;
    padding: 0 8px;
    color: var(--text-dim);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .selection-toolbar .btn {
    min-height: 34px;
    padding: 0 12px;
    font-size: 11.5px;
  }

  .ticket-row.selected {
    background: rgba(255, 106, 26, 0.07);
    box-shadow: inset 3px 0 0 var(--accent);
  }

  .ticket-select {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 8px;
    border: 1px solid var(--border-strong);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    align-self: center;
    margin: 0 2px 0 0;
    padding: 0;
  }

  .ticket-select-box {
    width: 16px;
    height: 16px;
    border-radius: 5px;
    border: 2px solid rgba(255, 255, 255, 0.42);
    background: transparent;
    display: grid;
    place-items: center;
    box-sizing: border-box;
  }

  .ticket-select[aria-pressed="true"] .ticket-select-box {
    background: var(--accent);
    border-color: var(--accent);
  }

  .ticket-select[aria-pressed="true"] .ticket-select-box::after {
    content: "";
    width: 7px;
    height: 4px;
    border-left: 2px solid #1a0e05;
    border-bottom: 2px solid #1a0e05;
    transform: rotate(-45deg) translateY(-1px);
  }

  /* TICKETS PAGE */
  .tickets-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(160px, 1fr) minmax(180px, 1fr) auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
  }

  .custom-date-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
  }

  .clear-filters-btn {
    height: 52px;
    min-width: 44px;
    padding: 0 16px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    color: var(--text-dim);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
  }

  .clear-filters-btn:hover {
    background: rgba(255, 94, 108, 0.1);
    color: var(--danger);
    border-color: rgba(255, 94, 108, 0.28);
  }

  .clear-filters-btn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .range-wrap {
    position: relative;
  }

  .range-wrap::before {
    content: attr(data-label);
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-mute);
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    pointer-events: none;
    z-index: 1;
  }

  .range-wrap input {
    padding-left: 80px;
    padding-right: 44px;
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.02em;
    cursor: pointer;
  }

  .range-wrap .range-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--text-dim);
    pointer-events: none;
  }

  .range-wrap .range-icon svg { display: block; }

  /* PAGINATION */
  .page-size-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  .page-size-label {
    color: var(--text-dim);
    font-size: 10.5px;
    font-family: var(--mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
  }

  .select-wrap-sm select {
    min-height: 34px;
    padding: 0 36px 0 12px;
    font-size: 12.5px;
    font-family: var(--mono);
    letter-spacing: 0.04em;
  }
  .select-wrap-sm::after { right: 12px; width: 10px; height: 10px; }

  .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 22px;
    flex-wrap: wrap;
  }

  .pagination button {
    min-width: 38px;
    height: 38px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--mono);
    cursor: pointer;
    padding: 0 12px;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .pagination button:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
    border-color: var(--border-strong);
  }
  .pagination button:disabled { opacity: 0.35; cursor: not-allowed; }
  .pagination button.active {
    background: var(--accent);
    color: #1a0e05;
    border-color: var(--accent);
    box-shadow: 0 8px 24px -10px var(--accent-glow);
  }
  .pagination .page-ellipsis {
    color: var(--text-mute);
    padding: 0 4px;
    font-family: var(--mono);
    font-size: 13px;
    user-select: none;
  }

  .tickets-filter-row {
    margin-bottom: 18px;
  }

  .tickets-filter {
    grid-template-columns: repeat(4, 1fr);
  }

  /* SELECT */
  .select-wrap {
    position: relative;
  }

  .select-wrap select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 44px;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 14px;
    letter-spacing: -0.005em;
  }

  .select-wrap::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: var(--text-dim);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 4.5l4 4 4-4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 4.5l4 4 4-4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
    pointer-events: none;
    transition: background 0.15s ease;
  }

  .select-wrap:focus-within::after { background: var(--accent); }

  .select-wrap select option {
    background: var(--bg-elev);
    color: var(--text);
  }

  .tickets-list {
    display: block;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: visible;
    background: rgba(255, 255, 255, 0.015);
  }

  #tickets-list-view {
    overflow: visible;
  }

  /* Legacy .ticket-row grid layout — DEPRECATED. The Tickets queue now uses
     a real HTML <table class="tickets-queue-table"> (see app-repair.css
     ~3390). The rules below are intentionally neutralized so any old code
     that still references .ticket-row stops fighting the table layout.
     If you find a use of .ticket-row, migrate it to the table cells. */
  .ticket-row {
    display: revert;
    grid-template-columns: none;
  }

  .ticket-row:last-child { border-bottom: 0; }

  .ticket-row:not(.ticket-row-head):hover {
    background: rgba(255, 255, 255, 0.04);
  }

  .ticket-row.menu-open {
    position: relative;
    z-index: 30;
  }

  /* Row-dim effect: mirrors the customers/devices ".row-menu-active" +
     ".row-menu-target" pattern (see app-repair.css ~7007). When a ticket
     row kebab opens, body.ticket-menu-active dims every other row to 0.25
     and the .ticket-row-active row pops to opacity 1 on a flat white
     background with a soft shadow — exactly matching the customers list.
     The .ticket-menu itself is reparented to <body>, so it stays at full
     opacity outside the dimmed container. */
  .ticket-row {
    transition: opacity 0.15s ease, background-color 0.15s ease,
                border-color 0.15s ease;
  }
  body.ticket-menu-active #tickets-list .ticket-row:not(.ticket-row-active):not(.ticket-row-head) {
    opacity: 0.25;
  }
  body.ticket-menu-active #tickets-list .ticket-row-head {
    opacity: 0.25;
  }
  body.ticket-menu-active #tickets-list .ticket-row.ticket-row-active {
    opacity: 1;
    background: #ffffff !important;
    border-color: rgba(15, 18, 24, 0.08);
    position: relative;
    z-index: 30;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }
  /* Sticky Actions cell must repaint white too when the row is active —
     otherwise it shows the original dark background. */
  body.ticket-menu-active #tickets-list .ticket-row.ticket-row-active .ticket-actions {
    background: #ffffff !important;
  }

  .ticket-row-head {
    position: sticky;
    top: 80px;
    z-index: 5;
    color: var(--text-dim);
    font-size: 10.5px;
    font-family: var(--mono);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    background: rgba(15, 15, 18, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border-strong);
    padding: 11px 22px;
  }
  .ticket-row-head:hover { background: rgba(15, 15, 18, 0.92); }

  .ticket-row-head .head-right { text-align: right; justify-self: end; }

  .ticket-row-head .sortable {
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: inherit;
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    transition: color 0.15s ease;
  }
  .ticket-row-head .sortable:hover { color: var(--text); }
  .ticket-row-head .sortable .sort-arrow {
    opacity: 0;
    font-size: 8px;
    transition: opacity 0.15s ease, transform 0.15s ease;
    display: inline-block;
  }
  .ticket-row-head .sortable.active { color: var(--accent); }
  .ticket-row-head .sortable.active .sort-arrow { opacity: 1; }
  .ticket-row-head .sortable.desc .sort-arrow { transform: rotate(180deg); }

  .ticket-number {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--text);
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ticket-cover {
    width: 52px;
    height: 38px;
    flex: 0 0 52px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.035);
    object-fit: cover;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  }

  .ticket-number-text {
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    padding: 0;
    cursor: pointer;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
  }

  .ticket-number-text:hover {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .ticket-archivos {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-variant-numeric: tabular-nums;
  }
  .ticket-total {
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.025em;
    font-family: var(--mono);
    color: var(--text);
    min-width: 24px;
    font-variant-numeric: tabular-nums;
  }
  .ticket-archivos .kind-badge {
    font-size: 9.5px;
    letter-spacing: 0.16em;
  }

  .ticket-workers {
    color: var(--text-soft);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.005em;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ticket-actualizado {
    color: var(--text-dim);
    font-size: 11.5px;
    font-family: var(--mono);
    letter-spacing: 0.02em;
    text-align: right;
    justify-self: end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .ticket-actions {
    display: flex;
    gap: 8px;
    justify-self: end;
    /* Pin the kebab to the viewport's right edge so the 3-dots is always
       visible — without this, the 14-column grid overflows and the user has
       to scroll horizontally to even see the action button. Background paint
       prevents the underlying row cells from bleeding through the sticky
       container. Higher z-index keeps the kebab + dropdown above siblings. */
    position: sticky;
    right: 12px;
    z-index: 5;
    background: inherit;
    padding-left: 8px;
  }
  /* Repaint the sticky cell to match the row's resolved background so it
     doesn't look transparent on hover. The page theme paints rows white and
     the header strip light-gray, so we mirror those exactly. */
  .ticket-row:not(.ticket-row-head) .ticket-actions { background: #ffffff; }
  .ticket-row:not(.ticket-row-head):hover .ticket-actions { background: #f5f7fa; }
  .ticket-row-head .ticket-actions { background: #e7ebef; }

  .ticket-actions .btn {
    min-height: 34px;
    padding: 0 12px;
    font-size: 12px;
  }

  .ticket-actions .icon-action,
  .detail-title-row .icon-action {
    width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    border-radius: 11px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 38px;
  }

  .ticket-actions .icon-action svg,
  .detail-title-row .icon-action svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    stroke-width: 2.2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .ticket-actions .icon-action.danger {
    color: var(--danger);
    border-color: rgba(255, 91, 111, 0.38);
    background: rgba(255, 91, 111, 0.11);
  }

  /* ── Ticket row kebab menu ──────────────────────────────────────────────
     Mirrors the customers / devices `.inv-row-menu` rules in app-repair.css
     (~6390) so the row-action dropdown looks identical across every queue.
     We keep the .ticket-menu class name (instead of swapping to inv-row-menu)
     because JS still queries it by name, but every visual property below is
     value-for-value copied from .inv-row-menu / .inv-row-menu-item. */
  .ticket-menu {
    /* position:fixed so the menu escapes the sticky parent's stacking /
       overflow context — JS portals it to <body> and computes top/left from
       the kebab's getBoundingClientRect() (see positionTicketMenu()). */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 800;
    background: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    min-width: 150px;
    padding: 4px 0;
    color: #222222;
  }

  .ticket-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 7px 14px;
    background: none;
    border: none;
    border-radius: 0;
    text-align: left;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    color: #0797ca;
  }
  /* Mirrors `.inv-row-menu .inv-row-menu-item span:first-child { flex: 1 }` */
  .ticket-menu-item span { flex: 1; }

  .ticket-menu-item svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
  }

  .ticket-menu-item:not(:disabled) { cursor: pointer; }
  .ticket-menu-item:not(:disabled):hover { background: #f4f4f4; }
  .ticket-menu-item.danger { color: #c73f3f; }
  .ticket-menu-item.danger:hover { background: #fef2f2; color: #b91c1c; }
  .ticket-menu-item:disabled {
    color: rgba(17, 22, 29, 0.42);
    cursor: not-allowed;
    opacity: 0.75;
  }

  .detail-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  .detail-title-row h2 { margin: 0; }

  .team-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 22px;
  }

  .team-list {
    display: grid;
    gap: 10px;
  }

  .team-row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) 80px 90px auto;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    background: rgba(255, 255, 255, 0.025);
  }

  .team-row-head {
    color: var(--text-dim);
    font-size: 11px;
    font-family: var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: transparent;
    border-color: transparent;
  }

  .team-pin {
    font-family: var(--mono);
    color: var(--accent-text);
    font-weight: 700;
  }

  .team-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
  }

  .activity-section {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    display: grid;
    gap: 16px;
  }

  .section-title-row {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
  }

  .section-title-row h3 {
    margin: 0;
    font-size: 18px;
    letter-spacing: -0.025em;
  }

  .section-title-row p {
    margin: 4px 0 0;
    color: var(--text-dim);
    font-size: 12.5px;
  }

  .activity-toolbar {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) minmax(140px, 1fr) auto;
    gap: 10px;
    align-items: end;
  }

  .activity-list {
    display: grid;
    gap: 8px;
  }

  .activity-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 4px;
    color: var(--text-dim);
    font-family: var(--mono);
    font-size: 11px;
  }

  .activity-row {
    display: grid;
    grid-template-columns: 150px minmax(130px, 1fr) minmax(140px, 1fr) 90px minmax(180px, 1.6fr);
    gap: 12px;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    background: rgba(255, 255, 255, 0.025);
    min-width: 0;
  }

  .activity-row-head {
    color: var(--text-dim);
    font-size: 10.5px;
    font-family: var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: transparent;
    border-color: transparent;
    padding-bottom: 4px;
  }

  .activity-date,
  .activity-ticket,
  .activity-detail {
    color: var(--text-dim);
    font-family: var(--mono);
    font-size: 11px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .activity-worker,
  .activity-action {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
  }

  .activity-action { color: var(--accent-text); }

  /* Filter count badge */
  .clear-filters-btn .filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    background: var(--accent);
    color: #1a0e05;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    padding: 0 5px;
    border-radius: 999px;
    margin-left: 2px;
    line-height: 1;
  }
  .clear-filters-btn.has-filters {
    border-color: rgba(255, 106, 26, 0.4);
    background: rgba(255, 106, 26, 0.08);
    color: var(--accent-text);
  }
  .clear-filters-btn.has-filters:hover {
    border-color: rgba(255, 94, 108, 0.32);
    background: rgba(255, 94, 108, 0.12);
    color: var(--danger);
  }

  /* GALLERY */
  .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
  }

  .ticket-card {
    width: min(460px, 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.025);
    overflow: hidden;
  }

  .ticket-card > .ticket-cover {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #0a0a0c;
    display: block;
    object-fit: cover;
  }

  .ticket-info {
    padding: 18px 20px 20px;
    display: grid;
    gap: 10px;
  }

  .ticket-title {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.025em;
    font-family: var(--mono);
  }

  .ticket-count {
    color: var(--text-dim);
    font-size: 13px;
    letter-spacing: -0.005em;
  }

  .ticket-info .button-row { margin-top: 4px; }

  .media-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.025);
    overflow: hidden;
    min-width: 0;
    position: relative;
    transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
  }

  .media-card:hover {
    border-color: var(--border-strong);
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-1px);
  }

  .media-frame {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #0a0a0c;
    display: block;
    object-fit: cover;
    cursor: pointer;
  }

  .media-kind-overlay {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .media-info {
    padding: 10px 12px 12px;
    display: grid;
    gap: 8px;
  }

  .media-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.005em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
  }

  .media-meta {
    color: var(--text-dim);
    font-size: 11px;
    font-family: var(--mono);
    letter-spacing: 0.04em;
    display: flex;
    justify-content: space-between;
    gap: 8px;
  }

  .media-meta:has(.kind-badge) { align-items: center; }

  .media-submeta {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-dim);
    font-size: 10.5px;
    font-family: var(--mono);
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .media-dot {
    width: 3px;
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.32);
    flex: 0 0 auto;
  }

  .kind-badge {
    width: fit-content;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 10px;
    font-family: var(--mono);
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .kind-badge[data-kind="antes"] { background: rgba(50, 209, 255, 0.22); color: #78e4ff; }
  .kind-badge[data-kind="durante"] { background: rgba(255, 184, 77, 0.24); color: #ffd38a; }
  .kind-badge[data-kind="despues"] { background: rgba(189, 139, 255, 0.24); color: #d8b8ff; }

  .media-kind-overlay[data-kind="antes"] {
    background: #32d1ff;
    color: #061014;
  }

  .media-kind-overlay[data-kind="durante"] {
    background: #ffb84d;
    color: #140d02;
  }

  .media-kind-overlay[data-kind="despues"] {
    background: #bd8bff;
    color: #10071f;
  }

  .media-info .button-row {
    margin-top: 0;
    gap: 8px;
  }

  .media-kind-editor {
    display: grid;
    gap: 6px;
  }

  .media-kind-editor label {
    color: var(--text-dim);
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .media-kind-editor select {
    width: 100%;
    min-height: 34px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.045);
    color: var(--text);
    padding: 0 10px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    outline: none;
  }

  .media-kind-editor select:focus {
    border-color: rgba(255, 106, 26, 0.58);
    box-shadow: 0 0 0 3px rgba(255, 106, 26, 0.12);
  }

  .media-card .btn {
    flex: 1;
    min-height: 34px;
    font-size: 11.5px;
    padding: 0 12px;
  }

  .media-card .icon-action {
    flex: 0 0 42px;
    width: 42px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    border-radius: 12px;
    display: inline-grid;
    place-items: center;
  }

  .media-card .icon-action svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2.2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  [data-role="viewer"] .media-card .media-info {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    padding: 0;
    display: block;
  }

  [data-role="viewer"] .media-card .media-info .button-row {
    justify-content: flex-end;
  }

  [data-role="viewer"] .media-card .media-download-action {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    min-height: 34px;
    border-radius: 999px;
    background: rgba(10, 10, 12, 0.58);
    color: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  [data-role="viewer"] .media-card .media-download-action:hover {
    background: rgba(255, 106, 26, 0.92);
    color: #160b04;
    border-color: rgba(255, 190, 148, 0.42);
  }

  [data-role="viewer"] .media-card .media-download-action svg {
    width: 15px;
    height: 15px;
    stroke-width: 2.35;
  }

  /* EMPTY */
  .empty {
    min-height: 240px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    display: grid;
    place-items: center;
    color: var(--text-dim);
    text-align: center;
    padding: 36px 24px;
    background: rgba(0, 0, 0, 0.18);
    font-size: 13.5px;
    letter-spacing: -0.005em;
  }
  .empty-rich {
    display: grid;
    place-items: center;
    gap: 0;
  }
  .empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-strong);
    display: grid;
    place-items: center;
    color: var(--text-dim);
    margin-bottom: 18px;
  }
  .empty-icon svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 1.6;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .empty-title {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
    margin-bottom: 6px;
  }
  .empty-body {
    font-size: 13px;
    color: var(--text-dim);
    max-width: 360px;
    line-height: 1.55;
    letter-spacing: -0.005em;
  }

  /* TOASTS */
  .toast-wrap {
    position: fixed;
    right: 24px;
    bottom: 24px;
    display: grid;
    gap: 10px;
    z-index: 100;
  }

  .toast {
    max-width: min(420px, calc(100vw - 36px));
    border-radius: 12px;
    padding: 14px 16px;
    color: #ffffff;
    background: rgba(20, 20, 24, 0.94);
    border: 1px solid var(--border-strong);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 30px 60px -16px rgba(0, 0, 0, 0.8);
    font-size: 13.5px;
    letter-spacing: -0.005em;
    animation: toast-in 0.22s ease;
  }
  @keyframes toast-in {
    from { transform: translateY(8px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }

  .toast.error {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    border-color: rgba(255, 94, 108, 0.7);
  }
  .toast.error::before {
    content: "!";
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: #dc2626;
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
  }
  .toast.success { border-color: rgba(84, 217, 154, 0.45); }

  /* LOGIN */
  .login-view {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px;
    position: relative;
    z-index: 1;
  }

  .login-panel {
    width: min(440px, 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    box-shadow: var(--shadow), 0 0 100px -10px rgba(255, 106, 26, 0.18);
    padding: 38px 34px 34px;
    position: relative;
  }

  .login-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  }

  .login-logo {
    width: 200px;
    height: auto;
    display: block;
    margin: 0 auto 20px;
    background: #ffffff;
    border-radius: 14px;
    padding: 14px 20px;
    box-shadow: 0 0 0 1px var(--border);
  }

  .login-panel h1 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.025em;
    text-align: center;
  }

  .login-panel p {
    margin: 0 0 24px;
    color: var(--text-dim);
    text-align: center;
    font-size: 11.5px;
    font-family: var(--mono);
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  /* MODAL */
  .modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 80;
  }
  .modal.open { display: flex; }

  .modal-body {
    width: min(1100px, 100%);
    max-height: calc(100vh - 48px);
    background: rgba(15, 15, 18, 0.95);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .modal-bar {
    min-height: 56px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 12px 14px 12px 22px;
    color: var(--text);
    border-bottom: 1px solid var(--border);
  }

  .modal-title-wrap {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .modal-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -0.005em;
    font-family: var(--mono);
    color: var(--text-soft);
  }

  .modal-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .modal-kind {
    flex: 0 0 auto;
  }

  .modal-zoom-btn.active {
    color: #1a0e05;
    background: var(--accent);
    border-color: rgba(255, 106, 26, 0.72);
    box-shadow: 0 14px 30px rgba(255, 106, 26, 0.2);
  }

  .modal-zoom-btn::before {
    content: none;
  }

  .modal-zoom-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .modal-media {
    width: 100%;
    max-height: calc(100vh - 120px);
    object-fit: contain;
    display: block;
    background: #000;
  }

  #modal-content.zoom-enabled .modal-media {
    cursor: zoom-in;
  }

  .modal-magnifier {
    position: absolute;
    width: var(--modal-lens-size, 190px);
    height: var(--modal-lens-size, 190px);
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(0, 0, 0, 0.28);
    pointer-events: none;
    z-index: 5;
    display: none;
    overflow: hidden;
    background-color: #050505;
  }

  .modal-magnifier-img {
    position: absolute;
    display: block;
    max-width: none;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
  }

  .modal-magnifier.visible {
    display: block;
  }

  .modal-zoom-controls {
    position: absolute;
    right: 18px;
    bottom: 16px;
    z-index: 6;
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: rgba(15, 15, 18, 0.78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.42);
  }

  #modal-content.zoom-enabled .modal-zoom-controls {
    display: flex;
  }

  .modal-zoom-control {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-soft);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .modal-zoom-value {
    min-width: 42px;
    color: #ffffff;
    font-weight: 700;
    text-align: right;
    letter-spacing: 0;
    text-transform: none;
  }

  .modal-zoom-control input {
    --range-progress: 50%;
    width: 108px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
  }

  .modal-zoom-control input::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(
      90deg,
      var(--accent) 0%,
      var(--accent) var(--range-progress),
      rgba(255, 255, 255, 0.14) var(--range-progress),
      rgba(255, 255, 255, 0.14) 100%
    );
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  }

  .modal-zoom-control input::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
    margin-top: -8px;
    border: 0;
    border-radius: 999px;
    background: #f7f7f8;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.42);
    appearance: none;
    -webkit-appearance: none;
  }

  .modal-zoom-control input::-moz-range-track {
    height: 6px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(
      90deg,
      var(--accent) 0%,
      var(--accent) var(--range-progress),
      rgba(255, 255, 255, 0.14) var(--range-progress),
      rgba(255, 255, 255, 0.14) 100%
    );
  }

  .modal-zoom-control input::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 999px;
    background: #f7f7f8;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.42);
  }

  #modal-content {
    position: relative;
    min-height: min(720px, calc(100vh - 120px));
    display: grid;
    place-items: center;
    background: #000;
  }

  .modal-media.loading-full {
    filter: blur(2px);
    opacity: 0.86;
  }

  .modal-nav {
    position: absolute;
    top: 50%;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    color: var(--text);
    background: rgba(15, 15, 18, 0.72);
    border: 1px solid var(--border-strong);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.42);
    transition: background 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
  }

  .modal-nav:hover {
    background: rgba(255, 255, 255, 0.14);
    transform: translateY(-50%) scale(1.04);
  }

  .modal-nav.prev { left: 18px; }
  .modal-nav.next { right: 18px; }

  .modal-nav svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 2.3;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .modal-counter {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: rgba(15, 15, 18, 0.76);
    color: var(--text-soft);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    padding: 6px 10px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  /* CAMERA */
  .camera-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 90;
  }
  .camera-modal.open { display: flex; }

  .camera-sheet {
    width: min(820px, 100%);
    max-height: calc(100vh - 48px);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: rgba(15, 15, 18, 0.96);
    color: var(--text);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .account-sheet {
    width: min(460px, 100%);
    grid-template-rows: auto auto;
  }

  .account-fields {
    display: grid;
    gap: 16px;
    padding: 22px;
  }

  .camera-bar {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px 12px 22px;
    border-bottom: 1px solid var(--border);
  }

  .camera-title {
    display: grid;
    gap: 6px;
    min-width: 0;
  }

  .camera-title strong {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.015em;
  }

  .camera-title span {
    width: fit-content;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-soft);
    font-size: 11px;
    font-family: var(--mono);
    font-weight: 500;
    padding: 3px 10px;
    letter-spacing: 0.04em;
    transition: background 0.18s ease, transform 0.18s ease, color 0.18s ease;
  }

  .camera-title span.bump {
    background: var(--accent);
    color: #1a0e05;
    transform: scale(1.08);
    border-color: transparent;
  }

  .camera-preview-wrap {
    position: relative;
    min-height: 360px;
    max-height: calc(100vh - 240px);
    overflow: hidden;
    background: #000;
    display: grid;
    place-items: center;
  }

  .camera-preview-wrap::before,
  .camera-preview-wrap::after {
    pointer-events: none;
    position: absolute;
    z-index: 4;
    opacity: 0;
  }

  .camera-preview-wrap::before {
    content: "";
    inset: 0;
    background: #fff;
  }

  .camera-preview-wrap::after {
    content: "Captured";
    left: 50%;
    top: 18px;
    transform: translateX(-50%) translateY(-4px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    background: rgba(10, 10, 12, 0.72);
    color: var(--text);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 7px 12px;
    text-transform: uppercase;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .camera-preview-wrap.captured::before {
    animation: cameraFlash 420ms ease-out;
  }

  .camera-preview-wrap.captured::after {
    animation: cameraCapturedPill 620ms ease-out;
  }

  .camera-preview-wrap.freeze-frame .camera-preview {
    opacity: 0;
  }

  .camera-preview-wrap.freeze-frame {
    background-image: var(--camera-freeze-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }

  @keyframes cameraFlash {
    0% { opacity: 0; }
    12% { opacity: 0.78; }
    100% { opacity: 0; }
  }

  @keyframes cameraCapturedPill {
    0% {
      opacity: 0;
      transform: translateX(-50%) translateY(-4px) scale(0.96);
    }
    18% {
      opacity: 1;
      transform: translateX(-50%) translateY(0) scale(1);
    }
    78% {
      opacity: 1;
      transform: translateX(-50%) translateY(0) scale(1);
    }
    100% {
      opacity: 0;
      transform: translateX(-50%) translateY(-3px) scale(0.98);
    }
  }

  .camera-preview {
    width: 100%;
    height: 100%;
    background: #000;
    object-fit: contain;
    display: block;
    transform: scale(var(--camera-zoom, 1));
    transform-origin: center;
  }

  .camera-zoom-control {
    display: none;
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 14px;
    z-index: 2;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: rgba(15, 15, 18, 0.78);
    color: var(--text-soft);
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .camera-zoom-control input {
    --range-progress: 0%;
    flex: 1;
    min-width: 0;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
  }

  .camera-zoom-control input::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(
      90deg,
      var(--accent) 0%,
      var(--accent) var(--range-progress),
      rgba(255, 255, 255, 0.16) var(--range-progress),
      rgba(255, 255, 255, 0.16) 100%
    );
  }

  .camera-zoom-control input::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
    margin-top: -8px;
    border: 0;
    border-radius: 999px;
    background: #f7f7f8;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.42);
    appearance: none;
    -webkit-appearance: none;
  }

  .camera-zoom-control input::-moz-range-track {
    height: 6px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(
      90deg,
      var(--accent) 0%,
      var(--accent) var(--range-progress),
      rgba(255, 255, 255, 0.16) var(--range-progress),
      rgba(255, 255, 255, 0.16) 100%
    );
  }

  .camera-zoom-control input::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 999px;
    background: #f7f7f8;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.42);
  }

  .camera-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: 30px;
    row-gap: 18px;
    padding: 20px 28px 24px;
    background: rgba(0, 0, 0, 0.4);
    border-top: 1px solid var(--border);
  }

  #camera-switch-btn {
    grid-column: 1;
    justify-self: end;
  }

  #camera-capture-btn {
    grid-column: 2;
    justify-self: center;
  }

  #camera-record-btn {
    grid-column: 3;
    justify-self: start;
  }

  #camera-done-btn {
    grid-column: 3;
    justify-self: end;
  }

  .shutter-btn {
    width: 72px;
    height: 72px;
    min-width: 72px;
    min-height: 72px;
    max-width: 72px;
    max-height: 72px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 4px solid var(--text);
    background: var(--text);
    box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.86), 0 14px 32px -6px rgba(0, 0, 0, 0.7);
    justify-self: center;
    cursor: pointer;
    transition: transform 0.1s ease;
  }
  .shutter-btn:active { transform: scale(0.94); }

  .shutter-btn.cooldown {
    cursor: wait;
    opacity: 0.62;
    transform: scale(0.92);
  }

  .record-btn {
    width: 58px;
    height: 58px;
    min-width: 58px;
    min-height: 58px;
    max-width: 58px;
    max-height: 58px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.08);
    display: grid;
    place-items: center;
    justify-self: center;
    cursor: pointer;
    transition: transform 0.1s ease, background 0.15s ease, border-color 0.15s ease;
  }

  .record-btn::before {
    content: "";
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: #ff3b30;
    box-shadow: 0 0 24px rgba(255, 59, 48, 0.42);
    transition: border-radius 0.15s ease, width 0.15s ease, height 0.15s ease;
  }

  .record-btn.recording {
    border-color: rgba(255, 59, 48, 0.9);
    background: rgba(255, 59, 48, 0.12);
  }

  .record-btn.recording::before {
    width: 22px;
    height: 22px;
    border-radius: 6px;
  }

  .record-btn:active { transform: scale(0.94); }

  .camera-round-btn {
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    max-width: 50px;
    max-height: 50px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border-strong);
    color: var(--text);
    display: grid;
    place-items: center;
    justify-self: center;
    cursor: pointer;
    font-size: 22px;
    font-weight: 500;
    transition: background 0.15s ease, transform 0.1s ease;
  }
  .camera-round-btn:hover { background: rgba(255, 255, 255, 0.14); }
  .camera-round-btn:active { transform: scale(0.94); }

  .camera-round-btn svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 2.2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* RESPONSIVE */
  @media (max-width: 980px) {
    .main { grid-template-columns: 1fr; padding: 24px 20px; }
    .tickets-page { padding: 24px 20px; }
    .topbar { padding: 12px 18px; }
    .ticket-row,
    .team-form,
    .team-row,
    .activity-row { grid-template-columns: 1fr; padding: 14px 18px; gap: 10px; }
    .activity-toolbar { grid-template-columns: 1fr; }
    .tickets-toolbar { grid-template-columns: 1fr 1fr; }
    .tickets-toolbar > :first-child { grid-column: 1 / -1; }
    .ticket-row-head,
    .team-row-head,
    .activity-row-head { display: none; }
    .ticket-actualizado { text-align: left; justify-self: start; }
    .ticket-actions { justify-self: stretch; width: 100%; }
    .team-actions { justify-content: stretch; }
    .ticket-actions .btn,
    .team-actions .btn { flex: 1; }
    .ticket-actions .icon-action { flex: 0 0 38px; width: 38px; }
    .panel-head h2 { font-size: 24px; }
  }

  @media (max-width: 620px) {
    .topbar {
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
      padding: 14px 16px;
    }
    .brand { flex-direction: column; gap: 12px; align-items: flex-start; }
    .top-actions { width: 100%; justify-content: space-between; flex-wrap: wrap; }
    .status-pill { display: none; }
    .search-bar { grid-template-columns: 1fr; }
    .tickets-toolbar { grid-template-columns: 1fr; }
    .tickets-filter { min-width: 0; }
    .button-row { flex-direction: column; }
    .upload-source-row { grid-template-columns: 1fr 1fr; }
    .btn { width: 100%; }
    .top-actions .account-menu-btn {
      width: 36px;
      flex-basis: 36px;
    }
    .account-menu {
      right: 0;
    }
    .ticket-actions .icon-action { width: 42px; flex-basis: 42px; }
    .stats { grid-template-columns: 1fr; }
    .panel-head, .panel-body { padding-left: 20px; padding-right: 20px; }
    .panel-head h2 { font-size: 22px; }
    .login-panel { padding: 28px 22px 26px; }
  }

  @media (max-width: 720px) {
    .modal {
      padding: 0;
      align-items: stretch;
      justify-content: stretch;
      overflow: hidden;
      background: rgba(0, 0, 0, 0.94);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    .modal-body {
      width: 100vw;
      height: 100vh;
      height: 100dvh;
      max-height: none;
      border: 0;
      border-radius: 0;
      background: #000;
    }

    .modal-bar {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      z-index: 12;
      min-height: 52px;
      padding: calc(8px + env(safe-area-inset-top)) 10px 8px;
      border: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0));
    }

    .modal-title-wrap {
      max-width: calc(100vw - 104px);
    }

    .modal-title {
      display: none;
    }

    .modal-actions {
      margin-left: auto;
      gap: 6px;
    }

    .modal-actions .icon-btn {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      background: rgba(15, 15, 18, 0.74);
      border-color: rgba(255, 255, 255, 0.16);
    }

    #modal-content {
      width: 100vw;
      height: 100vh;
      height: 100dvh;
      min-height: 0;
      overflow: hidden;
    }

    .modal-media {
      width: 100vw;
      height: 100vh;
      height: 100dvh;
      max-height: none;
      object-fit: contain;
    }

    .modal-nav {
      width: 44px;
      height: 44px;
      z-index: 8;
      background: rgba(15, 15, 18, 0.62);
    }

    .modal-nav.prev { left: 10px; }
    .modal-nav.next { right: 10px; }

    .modal-counter {
      z-index: 8;
      bottom: calc(12px + env(safe-area-inset-bottom));
    }

    .modal-magnifier {
      width: min(var(--modal-lens-size, 170px), 58vw);
      height: min(var(--modal-lens-size, 170px), 58vw);
      z-index: 7;
    }

    .modal-zoom-controls {
      position: fixed;
      left: 10px;
      right: 10px;
      bottom: calc(62px + env(safe-area-inset-bottom));
      z-index: 11;
      border-radius: 18px;
      justify-content: space-between;
      gap: 8px;
      padding: 10px;
    }

    #modal-content.zoom-enabled .modal-zoom-controls {
      display: flex;
    }

    #modal-content.zoom-enabled .modal-media {
      cursor: default;
    }

    .modal-zoom-control {
      flex: 1;
      min-width: 0;
      justify-content: space-between;
      gap: 8px;
      font-size: 9px;
    }

    .modal-zoom-control input {
      width: min(30vw, 128px);
    }

    .desktop-detail-downloads {
      display: none;
    }

    .detail-download-menu-wrap {
      display: block;
    }

    .detail-download-menu-btn {
      min-width: 0;
      width: 50px;
      padding: 0;
    }

    .detail-download-menu-btn span:not(.download-menu-icon) {
      display: none;
    }

    #tickets-detail-view {
      overflow: visible;
    }

    .detail-download-menu {
      right: 0;
      top: calc(100% + 8px);
      min-width: 220px;
      z-index: 30;
    }

    #camera-modal.camera-modal {
      padding: 0;
      align-items: stretch;
      justify-content: stretch;
      background: #000;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    #camera-modal .camera-sheet {
      width: 100vw;
      height: 100vh;
      height: 100dvh;
      max-height: none;
      border: 0;
      border-radius: 0;
      background: #000;
      grid-template-rows: auto minmax(0, 1fr) auto;
    }

    #camera-modal .camera-bar {
      min-height: 48px;
      padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
      border-bottom: 0;
      background: rgba(0, 0, 0, 0.86);
    }

    #camera-modal .camera-preview-wrap {
      width: 100%;
      height: 100%;
      min-height: 0;
      max-height: none;
    }

    #camera-modal .camera-title {
      gap: 0;
    }

    #camera-modal .camera-title strong {
      display: none;
    }

    #camera-modal .camera-title span {
      padding: 5px 10px;
      border-color: rgba(255, 255, 255, 0.18);
      background: rgba(255, 255, 255, 0.08);
      color: var(--text);
      font-size: 11px;
    }

    #camera-modal .camera-preview {
      width: 100%;
      height: 100%;
      min-height: 0;
      max-height: none;
      object-fit: contain;
    }

    #camera-modal .camera-zoom-control {
      display: flex;
      bottom: 10px;
    }

    #camera-modal .camera-actions {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: center;
      column-gap: 22px;
      row-gap: 12px;
      padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
      border-top: 0;
      background: rgba(0, 0, 0, 0.9);
    }

    #camera-modal .camera-round-btn {
      width: 44px;
      height: 44px;
      min-width: 44px;
      min-height: 44px;
      max-width: 44px;
      max-height: 44px;
      font-size: 20px;
      background: rgba(255, 255, 255, 0.1);
    }

    #camera-modal .camera-round-btn svg {
      width: 20px;
      height: 20px;
    }

    #camera-modal .shutter-btn {
      width: 66px;
      height: 66px;
      min-width: 66px;
      min-height: 66px;
      max-width: 66px;
      max-height: 66px;
    }

    #camera-modal .record-btn {
      width: 50px;
      height: 50px;
      min-width: 50px;
      min-height: 50px;
      max-width: 50px;
      max-height: 50px;
    }

    #camera-modal .record-btn::before {
      width: 23px;
      height: 23px;
    }
  }

  @media (max-width: 360px) {
    #camera-modal .camera-actions {
      column-gap: 16px;
      row-gap: 8px;
      padding-left: 10px;
      padding-right: 10px;
    }

    #camera-modal .camera-round-btn {
      width: 40px;
      height: 40px;
      min-width: 40px;
      min-height: 40px;
      max-width: 40px;
      max-height: 40px;
    }

    #camera-modal .shutter-btn {
      width: 60px;
      height: 60px;
      min-width: 60px;
      min-height: 60px;
      max-width: 60px;
      max-height: 60px;
    }

    #camera-modal .record-btn {
      width: 44px;
      height: 44px;
      min-width: 44px;
      min-height: 44px;
      max-width: 44px;
      max-height: 44px;
    }
  }

/* ============================================================
   Inventory Orders — standalone report page
   ============================================================ */
.invord-shell { padding: 0 24px 32px; }
.invord-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-items: flex-start;
}

/* Sales and Support resolve ticket-state work in place; their department
   queues use compact cards instead of the timed task controls used by hands-on
   Workshop and Inventory work. */
#my-work-page :is([data-my-work-module="sales"], [data-my-work-module="support"]) .my-work-resolution-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: stretch;
}

#my-work-page [data-my-work-module="support"] .my-support-grid {
  grid-template-columns: minmax(0, 1fr);
}

#my-work-page :is([data-my-work-module="sales"], [data-my-work-module="support"]) .my-work-resolution-grid > * {
  min-width: 0;
  height: 100%;
}

#my-work-page :is([data-my-work-module="sales"], [data-my-work-module="support"]) .my-work-resolution-card {
  height: 100%;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-3);
  border-inline-start: var(--space-1) solid var(--cp-accent);
  background: var(--surface);
}

#my-work-page .my-work-resolution-topline,
#my-work-page .my-work-resolution-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

#my-work-page .my-work-resolution-ticket {
  color: var(--cp-accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

#my-work-page .my-work-resolution-waiting {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-6);
  padding-inline: var(--space-2);
  border: 1px solid color-mix(in srgb, var(--cp-warning) 28%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--cp-warning) 10%, var(--surface));
  color: color-mix(in srgb, var(--cp-warning) 78%, var(--content-1));
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

#my-work-page .my-work-resolution-timing {
  display: grid;
  gap: var(--space-1);
  color: var(--content-3);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
}

#my-work-page .my-work-resolution-timing strong {
  color: var(--content-2);
  font-size: inherit;
}

#my-work-page .my-work-resolution-actions {
  align-self: end;
  margin-top: auto;
}

#my-work-page .my-work-resolution-actions .btn {
  width: 100%;
  justify-content: center;
}

@media (max-width: 1180px) {
  #my-work-page :is([data-my-work-module="sales"], [data-my-work-module="support"]) .my-work-resolution-grid,
  #my-work-page :is([data-my-work-priority-area="sales"], [data-my-work-priority-area="support"]) .my-work-department-priority-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  #my-work-page :is([data-my-work-module="sales"], [data-my-work-module="support"]) .my-work-resolution-grid,
  #my-work-page :is([data-my-work-priority-area="sales"], [data-my-work-priority-area="support"]) .my-work-department-priority-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.invord-sidebar {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 16px;
  position: sticky;
  top: 16px;
}
.invord-sidebar-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  color: #111827;
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid #e5e7eb;
}
.invord-filter-ico {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round;
}
.invord-caret {
  width: 14px; height: 14px;
  stroke: #6b7280; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  margin-left: auto;
}
.invord-filter-label {
  display: block;
  font-size: 13px;
  color: #374151;
  margin: 12px 0 6px;
}
.invord-input {
  width: 100%;
  height: 34px;
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
  box-sizing: border-box;
}
.invord-input:focus { outline: 2px solid #3b82f6; outline-offset: -1px; }
.invord-multi-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  cursor: pointer;
  color: #2563eb;
}
.invord-multi-toggle.has-selection { color: #111827; }
.invord-sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
}
.invord-apply-btn {
  width: 100%;
  background: #2563eb;
  color: #fff;
  border: none;
  height: 36px;
  font-weight: 600;
  font-size: 13px;
  border-radius: 4px;
  cursor: pointer;
}
.invord-apply-btn:hover { background: #1d4ed8; }
.invord-reset-btn {
  width: 100%;
  background: none;
  border: none;
  color: #2563eb;
  font-size: 13px;
  cursor: pointer;
  text-align: center;
  padding: 4px 0;
}
.invord-reset-btn:hover { text-decoration: underline; }

.invord-main {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 18px 22px;
}
.invord-title {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e7eb;
}
.invord-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 13px;
}
.invord-page-link {
  background: none;
  border: none;
  color: #2563eb;
  cursor: pointer;
  padding: 4px 6px;
  font-size: 13px;
}
.invord-page-link:hover:not(:disabled) { text-decoration: underline; }
.invord-page-link:disabled { color: #9ca3af; cursor: default; }
.invord-pages { display: inline-flex; gap: 4px; align-items: center; }
.invord-page-num {
  background: none; border: none; cursor: pointer;
  color: #2563eb; padding: 4px 8px; font-size: 13px;
  border-radius: 3px;
}
.invord-page-num:hover { background: #eff6ff; }
.invord-page-num.active { color: #111827; font-weight: 600; cursor: default; }
.invord-desc {
  font-size: 13px;
  color: #4b5563;
  line-height: 1.55;
  margin: 0 0 16px;
}
.invord-table-wrap { overflow-x: auto; }
.invord-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.invord-table thead th {
  text-align: left;
  background: #9ca3af;
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  padding: 8px 10px;
  border: 1px solid #6b7280;
  white-space: nowrap;
}
.invord-table thead th.invord-num { text-align: right; }
.invord-table tbody tr.invord-parent td {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  padding: 9px 10px;
  font-weight: 600;
  color: #111827;
}
.invord-table tbody tr.invord-child td {
  border: 1px solid #e5e7eb;
  padding: 7px 10px;
  color: #374151;
  background: #fff;
}
.invord-table tbody td.invord-num { text-align: right; font-variant-numeric: tabular-nums; }
.invord-table tbody td.invord-itemname-cell { font-weight: 600; }
.invord-table tbody td.invord-po-cell a { color: #2563eb; text-decoration: none; }
.invord-table tbody td.invord-po-cell a:hover { text-decoration: underline; }

/* Item Type multi-select popover (appended to body) */
.invord-itype-popover {
  position: fixed;
  z-index: 9000;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  width: 280px;
  max-height: 360px;
  display: flex;
  flex-direction: column;
}
.invord-itype-popover.hidden { display: none; }
.invord-itype-popover .invord-itype-search {
  border: none;
  border-bottom: 1px solid #e5e7eb;
  height: 32px;
  padding: 6px 10px;
  font-size: 13px;
  outline: none;
}
.invord-itype-popover .invord-itype-actions {
  display: flex; gap: 8px; padding: 6px 8px;
  border-bottom: 1px solid #e5e7eb;
  font-size: 12px;
}
.invord-itype-popover .invord-itype-actions button {
  background: none; border: none; color: #2563eb;
  cursor: pointer; padding: 2px 4px; font-size: 12px;
}
.invord-itype-popover .invord-itype-actions button:hover { text-decoration: underline; }
.invord-itype-popover .invord-itype-list {
  overflow-y: auto; padding: 4px 0;
  flex: 1;
}
.invord-itype-popover label {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px; font-size: 13px; cursor: pointer;
  user-select: none;
  color: #111827; letter-spacing: normal;
  line-height: 1.35;
}
.invord-itype-popover label:hover { background: #f3f4f6; }
/* Override the global `input { min-height: 38px }` rule so the row
   checkboxes don't blow up to ~40px squares and crowd out the label text. */
.invord-itype-popover label input[type="checkbox"] {
  width: 14px; height: 14px;
  min-height: 0; min-width: 0;
  margin: 0;
  flex: 0 0 14px;
  accent-color: #2563eb;
  cursor: pointer;
}
.invord-itype-popover label span {
  flex: 1 1 auto;
  color: #111827;
  font-size: 13px;
  letter-spacing: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.invord-itype-popover .invord-itype-search {
  min-height: 0;  /* override global input min-height */
}
.invord-itype-popover .invord-itype-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 6px 8px;
  border-top: 1px solid #e5e7eb;
}
.invord-itype-popover .invord-itype-footer button {
  background: #2563eb; color: #fff;
  border: none; padding: 5px 12px;
  border-radius: 3px; font-size: 12px; cursor: pointer;
}
.invord-itype-popover .invord-itype-footer button.invord-itype-cancel {
  background: #fff; color: #374151; border: 1px solid #d1d5db;
}

/* ============================================================
   Start Return modal — RepairQ-style centered dialog with a
   blue header, label/value rows, optional warning banner, and
   primary/secondary buttons. Triggered from the row kebab.
   ============================================================ */
#ticket-return-modal.inv-form-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 22, 32, 0.42);
  display: flex; align-items: center; justify-content: center;
  z-index: 1100;
}
.ticket-return-panel {
  background: #ffffff;
  border-radius: 6px;
  width: min(640px, 92vw);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 90vh;
}
.ticket-return-head {
  background: #1ea6da;
  color: #ffffff;
  padding: 18px 24px;
  position: relative;
  text-align: center;
}
.ticket-return-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}
.ticket-return-close {
  position: absolute;
  right: 12px; top: 10px;
  background: transparent;
  border: 0;
  color: #ffffff;
  font-size: 22px;
  width: 30px; height: 30px;
  cursor: pointer;
  line-height: 1;
}
.ticket-return-close:hover { opacity: 0.85; }
.ticket-return-body {
  padding: 28px 32px 24px;
  overflow-y: auto;
}
.ticket-return-info {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 14px 18px;
  align-items: baseline;
}
.ticket-return-row {
  display: contents;
}
.ticket-return-info dt {
  text-align: right;
  font-weight: 700;
  color: #374151;
  font-size: 14px;
}
.ticket-return-info dd {
  margin: 0;
  color: #374151;
  font-size: 14px;
}
.ticket-return-link {
  color: #1971c2;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 6px;
  border: 1px solid #c7d7e7;
  border-radius: 4px;
}
.ticket-return-link:hover { background: #f4f9fd; }
.ticket-return-warn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
  color: #e6a23c;
  font-size: 14px;
  font-weight: 500;
}
.ticket-return-warn svg {
  width: 18px; height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ticket-return-warn.hidden { display: none; }
.ticket-return-footer {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 12px 32px 28px;
  border-top: 0;
}
.ticket-return-view-btn {
  background: #1f3a5f;
  color: #ffffff;
  border: 0;
  border-radius: 5px;
  padding: 12px 32px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.ticket-return-view-btn:hover { background: #182d4a; }
.ticket-return-confirm-btn {
  background: #16a34a;
  color: #ffffff;
  border: 0;
  border-radius: 5px;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.ticket-return-confirm-btn:hover { background: #128039; }
.ticket-return-confirm-btn.hidden { display: none; }

/* ─── Warranties & Disclaimers modal ────────────────────────────────────────
   Opens from the "View Warranties & Disclaimers" link inside the Start Return
   modal. Same shell shape as ticket-return-panel (light-blue header, white
   body) but wider/taller because the legal text is long. The Back footer
   link returns the user to the Return modal which we re-show in JS. */
#ticket-warranties-modal.inv-form-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 22, 32, 0.42);
  display: flex; align-items: center; justify-content: center;
  z-index: 1110;
}
.ticket-warranties-panel {
  background: #ffffff;
  border-radius: 6px;
  width: min(720px, 94vw);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 92vh;
}
.ticket-warranties-body {
  padding: 24px 32px 16px;
  overflow-y: auto;
  color: #2c3a4b;
  font-size: 13.5px;
  line-height: 1.55;
}
.ticket-warranties-heading {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 700;
  color: #1971c2;
  text-align: center;
}
.ticket-warranties-sub {
  margin: 14px 0 6px;
  color: #1a1a1a;
}
.ticket-warranties-body p { margin: 8px 0; }
.ticket-warranties-list {
  margin: 8px 0 12px;
  padding-left: 26px;
}
.ticket-warranties-list li { margin: 6px 0; }
.ticket-warranties-notice {
  background: #fff8e1;
  border-left: 3px solid #f0b400;
  padding: 10px 14px;
  margin: 14px 0 !important;
  border-radius: 3px;
}
.ticket-warranties-block {
  text-align: center;
  font-weight: 500;
  margin: 16px 0 !important;
}
.ticket-warranties-stars {
  display: block;
  letter-spacing: 1px;
  color: #f0b400;
  margin: 6px 0;
  word-break: break-all;
}
.ticket-warranties-footer {
  display: flex;
  justify-content: center;
  padding: 10px 24px 18px;
  border-top: 1px solid #e8eef4;
}
.ticket-warranties-back {
  background: transparent;
  color: #1971c2;
  border: 0;
  font-size: 15px;
  font-weight: 600;
  padding: 8px 24px;
  cursor: pointer;
  text-decoration: none;
}
.ticket-warranties-back:hover {
  text-decoration: underline;
  color: #155a96;
}

/* ============================================================ */
/* Sale Ticket detail page (app-sale-ticket.js)                 */
/* ============================================================ */
.sale-ticket-page {
  padding: 12px 20px 80px;
  background: #f4f5f7;
  min-height: 100vh;
}
.sale-ticket-page.hidden { display: none; }

.sale-ticket-shell {
  --ticket-view-accent: #219ebc;
  --ticket-view-accent-soft: #9bd8e8;
  --ticket-view-chip-bg: #e0f7ff;
  --ticket-view-chip-ink: #06485c;
  display: grid;
  /* Match Trade-In's wider, more substantial sidebar feel. The previous
     320px was visually thin against the main column. */
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: start;
}
.sale-ticket-main { min-width: 0; }

/* Breadcrumb */
.sale-ticket-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #5b6573;
  font-size: 13px;
  margin-bottom: 8px;
}
.sale-ticket-breadcrumb svg { stroke: currentColor; fill: none; stroke-width: 2; }

/* Header (orange-ish dark bar) */
.sale-ticket-header {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #023047;
  color: #fff;
  padding: 10px 14px;
  font-weight: 600;
  border-radius: 4px 4px 0 0;
  font-size: 14px;
}
.sale-ticket-header svg { stroke: currentColor; fill: none; stroke-width: 2; }

/* Status bar + location strip */
.sale-ticket-status-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0;
  margin-bottom: 0;
}
.sale-status-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 10px 14px;
  border: 0;
  font-weight: 600;
  cursor: default;
  color: #fff;
  font-size: 13px;
}
.sale-status-bar svg { stroke: currentColor; fill: none; stroke-width: 2.5; }
.sale-status-amber { background: #ff9800; }
.sale-status-blue { background: #2196f3; }
.sale-status-cyan { background: #00bcd4; }
.sale-status-teal { background: #0f9f8f; }
.sale-status-green { background: #4caf50; }
.sale-status-orange { background: #f97316; }
.sale-status-purple { background: #7c3aed; }
.sale-status-indigo { background: #4f46e5; }
.sale-status-red { background: #e53935; }
.sale-status-gray { background: #9e9e9e; }
.sale-status-slate { background: #64748b; }
.sale-status-magenta { background: #c026d3; }

.sale-location-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #6b7280;
  color: #fff;
  padding: 10px 14px;
  font-size: 12px;
  white-space: nowrap;
}
.sale-location-item { display: inline-flex; align-items: center; gap: 6px; }
.sale-location-item svg { stroke: currentColor; fill: none; stroke-width: 2; }

/* VCT warning banner */
.sale-vct-banner {
  background: #fff8c5;
  border: 1px solid #ecdc94;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: #3b3b3b;
  margin-bottom: 14px;
}
.sale-vct-msg { line-height: 1.4; }
.sale-vct-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 6px 14px;
  background: #2196f3;
  color: #fff;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  font-weight: 600;
}
.sale-vct-btn svg { fill: currentColor; }

/* Generic sale section card */
.sale-section {
  background: #fff;
  border: 1px solid #e1e6ec;
  border-radius: 4px;
  margin-bottom: 14px;
  overflow: hidden;
}
.sale-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid #e8edf3;
  background: #fafbfc;
  font-size: 14px;
}
.sale-section-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #2b3340;
  flex: 1;
}
.sale-section-head svg { stroke: #5b6573; fill: none; stroke-width: 2; }
.sale-section-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.sale-section-body { padding: 14px; }

/* Customer grid */
.sale-customer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 18px;
}
.sale-details-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 18px;
  margin-bottom: 14px;
}
.sale-details-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
}
.sale-details-helper {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}
.sale-detail-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #d5dee8;
  border-radius: 999px;
  background: #f8fafc;
  color: #243244;
  font-size: 13px;
  font-weight: 700;
}
.sale-detail-toggle input {
  width: 16px;
  height: 16px;
}
.sale-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sale-field label {
  font-size: 11px;
  color: #6b7280;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.sale-field-value {
  font-size: 13px;
  color: #2b3340;
  word-break: break-word;
}
.sale-field-wide { grid-column: 1 / -1; }
.sale-edit-customer-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #2196f3;
  color: #fff;
  border: 0;
  border-radius: 3px;
  padding: 5px 12px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
.sale-edit-customer-btn svg { stroke: currentColor; fill: none; stroke-width: 2; }
.sale-checkbox { display: inline-flex; align-items: center; }

/* Warning yellow banner inside items section */
.sale-warning-banner {
  background: #fff8c5;
  border: 1px solid #ecdc94;
  padding: 10px 14px;
  margin: 12px;
  border-radius: 3px;
  font-size: 13px;
  color: #3b3b3b;
}
.sale-warning-banner strong { display: block; margin-bottom: 4px; }

/* Items toolbar */
.sale-items-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  gap: 14px;
  border-bottom: 1px solid #f0f3f7;
  flex-wrap: wrap;
}
.sale-items-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 14px 0;
}
.sale-items-summary-card {
  display: grid;
  gap: 4px;
  min-width: 0;
  min-height: 86px;
  padding: 12px 13px;
  border: 1px solid #d5dee8;
  border-radius: 6px;
  background: #ffffff;
}
.sale-items-summary-card span {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.sale-items-summary-card strong {
  color: #243244;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.1;
}
.sale-items-summary-card em {
  color: #64748b;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}
.sale-items-summary-balance {
  background: #f8fafc;
  border-color: #cbd5e1;
}
.sale-items-actions,
.sale-items-discount,
.sale-items-rule-discount {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.sale-items-actions,
.sale-items-discount label,
.sale-items-rule-discount label { color: #6b7280; font-weight: 600; }
.sale-items-toolbar-note {
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
}
.sale-items-discount input {
  width: 70px;
  padding: 6px 8px;
  border: 1px solid #d2d8e0;
  border-radius: 3px;
  text-align: right;
}
.sale-items-discount select {
  padding: 6px 6px;
  border: 1px solid #d2d8e0;
  border-radius: 3px;
}
.sale-items-rule-discount select {
  max-width: 260px;
  padding: 6px 8px;
  border: 1px solid #d2d8e0;
  border-radius: 3px;
  background: #ffffff;
  font-size: 13px;
}
.sale-items-empty-state {
  margin: 0 14px 14px;
  padding: 18px 16px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  display: grid;
  gap: 4px;
}
.sale-items-empty-state strong {
  color: #243244;
  font-size: 15px;
  font-weight: 800;
}
.sale-items-empty-state span {
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
}
.sale-link-action {
  appearance: none;
  border: 0;
  background: transparent;
  color: #1176b5;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  padding: 0;
}
.sale-link-action:hover {
  text-decoration: underline;
}

/* Items table */
.sale-items-table-wrap { overflow-x: auto; }
.sale-items-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1060px;
  font-size: 12.5px;
}
.sale-items-table th {
  text-align: left;
  background: #f4f6fa;
  color: #475063;
  font-weight: 600;
  padding: 8px 8px;
  border-bottom: 1px solid #e1e6ec;
  font-size: 12px;
}
.sale-items-table td {
  padding: 9px 8px;
  border-bottom: 1px solid #f0f3f7;
  vertical-align: middle;
}
.sale-item-main-cell {
  min-width: 240px;
}
.sale-item-main {
  display: grid;
  gap: 4px;
}
.sale-item-main strong {
  color: #243244;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.25;
}
.sale-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sale-item-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: #eff6ff;
  color: #355070;
  font-size: 11px;
  font-weight: 700;
}
.sale-item-meta-empty span {
  background: #f3f4f6;
  color: #6b7280;
}
.sale-items-table .sale-item-right { text-align: right; }
.sale-items-table th.sale-item-right { text-align: right; }
.sale-items-table .sale-item-total { font-weight: 600; }
.sale-item-totals-label { font-weight: 600; text-align: right; padding-right: 14px !important; }
/* NOTE: .sale-item-actions is a <td>. Don't set display:flex on it — that
   breaks the table-cell box, so the row stops vertically centering and the
   icons pile up at the top of tall rows. Keep it a table cell and center the
   buttons themselves instead. */
.sale-item-actions {
  vertical-align: middle;
  white-space: nowrap;
}
.sale-item-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #5b6573;
  font-weight: 600;
  font-size: 13px;
  border-radius: 6px;
  vertical-align: middle;
}
.sale-item-actions button + button { margin-left: 6px; }
.sale-item-actions button:hover { background: #f0f3f7; }
.sale-item-actions .sale-item-delete { color: #e53935; }
.sale-item-actions svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.sale-item-actions .sale-item-waive { color: #0f7b6c; }
.sale-item-actions .sale-item-waive.is-waived { color: #fff; background: #0f9d8f; }
.sale-item-actions .sale-item-waive.is-waived:hover { background: #0c8579; }

/* Payment row actions — ✕ delete (unsaved payments only) and ↩ refund
   (saved payments, manager-PIN gated). Both always render; the one that
   doesn't apply is disabled so the two flows stay visually distinct. */
.sale-payment-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
}
.sale-payment-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.sale-payment-actions svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sale-payment-actions button:hover:not(:disabled) { background: #f0f3f7; }
.sale-payment-actions button:disabled { color: #c3c9d2; cursor: not-allowed; }
.sale-payment-remove-btn { color: #e53935; }
.sale-payment-refund-btn { color: #e6a117; }
.sale-payment-actions-cell { white-space: nowrap; }

/* Pending (not yet saved) payment rows + the refund side of a voided payment */
.sale-payment-row-pending td { background: #fff8e9; }
.sale-payment-pending-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  background: #f3a536;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.sale-payment-row-refund td { color: #b45309; }
.sale-payment-row-refunded td { opacity: 0.75; }
.sale-totals-pending span:last-child { color: #b45309; font-weight: 600; }
.ticket-payment-refund-row .ticket-items-cell { color: #b45309; }

/* Per-line editable inputs in the Sale Details table */
.sale-item-input,
.sale-item-note-input {
  border: 1px solid #d6dbe2;
  border-radius: 4px;
  font-size: 13px;
  color: #1f2937;
  background: #fff;
}
.sale-item-input {
  width: 78px;
  padding: 4px 6px;
  text-align: right;
}
.sale-item-note-input {
  width: 100%;
  max-width: 320px;
  margin-top: 3px;
  padding: 4px 7px;
}
.sale-item-input:focus,
.sale-item-note-input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.sale-item-input:disabled { background: #f1f3f6; color: #9aa3af; }

/* Waived ("waive charge") line styling */
.sale-waived-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #e6f6f3;
  color: #0f7b6c;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.sale-line-struck { color: #9aa3af; text-decoration: line-through; margin-right: 4px; }
.sale-item-row-waived td { background: #f7fbfa; }
.sale-totals-waived span:last-child { color: #0f7b6c; }

.sale-status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 3px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  border: 0;
  cursor: pointer;
}
/* Read-only variant: the status is system-governed, so it must not look or
   behave like a clickable control. */
.sale-status-badge.is-readonly { cursor: default; }
.sale-badge-amber { background: #ff9800; }
.sale-badge-green { background: #4caf50; }

/* Explicit "Pull from stock" action — only shown on back-ordered rows once
   real stock exists. Reads as an intentional action, not a status toggle. */
.sale-item-actions .sale-item-pull {
  width: auto;
  padding: 0 8px;
  gap: 4px;
  color: #0f7b6c;
  font-size: 11px;
  font-weight: 700;
}
.sale-item-actions .sale-item-pull span { display: inline-block; }
.sale-item-actions .sale-item-pull svg { width: 14px; height: 14px; }

.sale-empty-line {
  padding: 14px;
  text-align: center;
  color: #6b7280;
  font-size: 13px;
  font-style: italic;
}

/* Transactions */
.sale-cash-quick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #475063;
}
.sale-cash-quick input {
  width: 90px;
  padding: 5px 8px;
  border: 1px solid #d2d8e0;
  border-radius: 3px;
}
.sale-cash-add-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  background: #2196f3;
  border: 0;
  color: #fff;
  border-radius: 3px;
  font-weight: 700;
  cursor: pointer;
}
.sale-add-tx-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  color: #2196f3;
  border: 1px solid #2196f3;
  border-radius: 3px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 10px;
}
.sale-tx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.sale-tx-table th {
  text-align: left;
  background: #f4f6fa;
  color: #475063;
  font-weight: 600;
  padding: 8px 10px;
  border-bottom: 1px solid #e1e6ec;
  font-size: 12px;
}
.sale-tx-table th.sale-item-right { text-align: right; }
.sale-tx-table td { padding: 8px 10px; border-bottom: 1px solid #f0f3f7; }

/* Notes */
.sale-notes-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 30px 20px;
}
.sale-notes-empty-text { font-size: 13px; color: #6b7280; }
.sale-notes-empty .btn-primary {
  background: #2196f3;
  color: #fff;
  border: 0;
  padding: 7px 16px;
  border-radius: 3px;
  cursor: pointer;
  font-weight: 600;
}
.sale-notes-list-wrap {
  position: relative;
  min-height: 80px;
}
.sale-notes-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sale-note-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 13px;
}
.sale-note-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.sale-note-date { color: #6b7280; font-size: 11px; }
.sale-note-actions { margin-left: auto; display: flex; gap: 4px; }
.sale-note-actions button {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #5b6573;
  padding: 2px 6px;
}
.sale-note-body { color: #2b3340; line-height: 1.4; }
.sale-notes-fab {
  position: absolute;
  bottom: -8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #2196f3;
  color: #fff;
  font-size: 22px;
  border: 0;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.35);
  line-height: 1;
}

/* Right sidebar */
.sale-ticket-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 12px;
}
.sale-nav-box,
.sale-totals-box {
  background: #fff;
  border: 1px solid #e1e6ec;
  border-radius: 4px;
  overflow: hidden;
}
.sale-nav-head,
.sale-totals-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: #023047;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.5px;
}
.sale-collapse-btn {
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-size: 11px;
}
.sale-nav-body { padding: 6px 4px; }
.sale-nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  color: #2b3340;
  cursor: pointer;
  border-radius: 3px;
}
.sale-nav-link:hover { background: #f4f6fa; }
.sale-nav-link.active { background: #e8f1fc; color: #1971c2; font-weight: 600; }
.sale-nav-link svg { stroke: currentColor; fill: none; stroke-width: 2; }
.sale-nav-badge {
  margin-left: auto;
  background: #d2d8e0;
  color: #2b3340;
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 700;
}
.sale-nav-foot {
  padding: 8px 12px;
  border-top: 1px solid #e8edf3;
}
.sale-show-all-link {
  background: transparent;
  border: 0;
  color: #1971c2;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.sale-show-all-arrow { font-size: 10px; }

.sale-nav-box.sale-collapsed .sale-nav-body,
.sale-nav-box.sale-collapsed .sale-nav-foot { display: none; }
.sale-totals-box.sale-collapsed .sale-totals-body,
.sale-totals-box.sale-collapsed .sale-balance-panel,
.sale-totals-box.sale-collapsed #sale-sidebar-cobrar-btn { display: none; }

.sale-totals-body { padding: 14px 14px; display: grid; gap: 8px; }
.sale-totals-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 500;
  padding: 4px 0;
  color: #243244;
}
.sale-totals-row span:first-child { color: #243244; font-weight: 500; }
.sale-totals-row span:last-child { color: #243244; font-weight: 700; }
.sale-balance-panel {
  background: #023047;
  color: #fff;
  text-align: center;
  font-size: 28px;
  font-weight: 900;
  padding: 18px;
  letter-spacing: 0.5px;
}

/* Cobrar button living inside the Quick Sale detail FINANCIALS box —
   mirrors the Trade-In "Pagar al Cliente" pattern and the Repair detail's
   Cobrar button so all three ticket types feel the same. */
.sale-totals-box #sale-sidebar-cobrar-btn {
  display: block;
  width: calc(100% - 24px);
  margin: 12px;
  padding: 12px 14px;
  border: 0;
  border-radius: 10px;
  background: #16a34a;
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(22, 163, 74, 0.18);
  transition: background 0.15s, transform 0.05s;
}
.sale-totals-box #sale-sidebar-cobrar-btn:hover { background: #15803d; }
.sale-totals-box #sale-sidebar-cobrar-btn:active { transform: translateY(1px); }

/* Sticky bottom action bar */
.sale-ticket-action-bar {
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #e1e6ec;
  padding: 10px 14px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 14px -20px -12px;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.04);
  z-index: 10;
}
.sale-action-red {
  background: #e53935;
  color: #fff;
  border: 0;
  padding: 8px 16px;
  border-radius: 3px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}
.sale-action-red:hover { background: #c62828; }
.sale-action-amber,
.sale-action-cyan,
.sale-action-green,
.sale-action-purple,
.sale-action-gray,
.sale-action-slate,
.sale-action-magenta,
.sale-action-orange,
.sale-action-indigo {
  color: #fff;
  border: 0;
  padding: 8px 16px;
  border-radius: 3px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}
.sale-action-amber { background: #f59e0b; }
.sale-action-amber:hover { background: #d97706; }
.sale-action-cyan { background: #0891b2; }
.sale-action-cyan:hover { background: #0e7490; }
.sale-action-green { background: #16a34a; }
.sale-action-green:hover { background: #15803d; }
.sale-action-purple { background: #7c3aed; }
.sale-action-purple:hover { background: #6d28d9; }
.sale-action-gray { background: #6b7280; }
.sale-action-gray:hover { background: #4b5563; }
.sale-action-slate { background: #475569; }
.sale-action-slate:hover { background: #334155; }
.sale-action-magenta { background: #c026d3; }
.sale-action-magenta:hover { background: #a21caf; }
.sale-action-orange { background: #f97316; }
.sale-action-orange:hover { background: #ea580c; }
.sale-action-indigo { background: #4f46e5; }
.sale-action-indigo:hover { background: #4338ca; }
.sale-action-blue {
  background: #2196f3;
  color: #fff;
  border: 0;
  padding: 8px 26px;
  border-radius: 3px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}
.sale-action-blue:hover { background: #1976d2; }
.sale-star { font-size: 13px; }

.sale-ticket-loading {
  padding: 60px 20px;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
}

/* ==== show-only-{tab} navigation hide/show ==== */
/* When the user picks a navigation item, every section EXCEPT that tab is
   hidden. The orange header bar (`data-tab="header"`) AND the breadcrumb /
   status row stay visible regardless. */
.sale-ticket-page[class*="show-only-"] .sale-section[data-tab] { display: none; }
.sale-ticket-page.show-only-customer .sale-section[data-tab="customer"] { display: block; }
.sale-ticket-page.show-only-details .sale-section[data-tab="details"] { display: block; }
.sale-ticket-page.show-only-items .sale-section[data-tab="items"] { display: block; }
.sale-ticket-page.show-only-payments .sale-section[data-tab="payments"] { display: block; }
.sale-ticket-page.show-only-notes .sale-section[data-tab="notes"] { display: block; }
.sale-ticket-page.show-only-history .sale-section[data-tab="history"] { display: block; }

/* Responsive */
@media (max-width: 900px) {
  .sale-ticket-shell { grid-template-columns: 1fr; }
  .sale-customer-grid { grid-template-columns: 1fr; }
  .sale-details-grid { grid-template-columns: 1fr; }
  .sale-items-summary { grid-template-columns: 1fr; }
  .sale-ticket-sidebar { position: static; }
}

.sale-command-center,
.refurb-command-center,
.trade-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(180px, .75fr) minmax(180px, .75fr) auto;
  gap: 10px;
  align-items: stretch;
  margin: 14px 0;
}

.sale-command-card,
.refurb-command-card,
.trade-hero-card {
  display: grid;
  gap: 4px;
  min-width: 0;
  min-height: 98px;
  padding: 13px 14px;
  border: 1px solid #d5dee8;
  border-radius: 6px;
  background: #ffffff;
}

.sale-command-primary,
.refurb-command-primary,
.trade-hero-device {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.sale-command-card span,
.refurb-command-card span,
.trade-hero-card span {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.sale-command-card strong,
.refurb-command-card strong,
.trade-hero-card strong {
  color: #243244;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.sale-command-card em,
.refurb-command-card em,
.trade-hero-card em {
  color: #64748b;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.25;
}

.sale-command-actions,
.refurb-command-actions {
  display: grid;
  gap: 8px;
  min-width: 154px;
}

.sale-command-actions button,
.refurb-command-actions button {
  min-height: 30px;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  padding: 0 12px;
  background: #243244;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.sale-command-actions button:hover,
.refurb-command-actions button:hover {
  background: #1f2937;
}

@media (max-width: 1100px) {
  .sale-command-center,
  .refurb-command-center,
  .trade-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sale-command-actions,
  .refurb-command-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .sale-command-center,
  .refurb-command-center,
  .trade-overview {
    grid-template-columns: 1fr;
  }
  .sale-command-actions,
  .refurb-command-actions {
    grid-template-columns: 1fr;
  }
}

.trade-process-guide {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
  padding: 14px;
  border: 1px solid #d5dee8;
  border-radius: 6px;
  background: #ffffff;
}

.trade-process-guide-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.trade-process-guide-head span {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.trade-process-guide-head strong {
  color: #243244;
  font-size: 14px;
  font-weight: 900;
}

.trade-process-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.trade-process-step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  min-height: 112px;
  padding: 11px;
  border: 1px solid #dbe3ec;
  border-radius: 6px;
  background: #f8fafc;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.trade-process-step.is-done {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.trade-process-step.is-blocked {
  border-color: #e2e8f0;
  background: #f8fafc;
}

.trade-process-step.is-blocked .trade-process-number {
  background: #64748b;
}

.trade-process-step:hover,
.trade-process-step:focus-visible {
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(147, 197, 253, .28);
  outline: 0;
  transform: translateY(-1px);
}

.trade-process-number {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #023047;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
}

.trade-process-step.is-done .trade-process-number {
  background: #15803d;
}

.trade-process-step strong {
  display: block;
  margin-bottom: 4px;
  color: #243244;
  font-size: 13px;
  font-weight: 900;
}

.trade-process-step p {
  min-height: 0;
  margin: 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.trade-detail-guidance {
  margin: 0 0 10px;
  padding: 9px 10px;
  border: 1px solid #dbe3ec;
  border-radius: 5px;
  background: #f8fafc;
  color: #526071;
  font-size: 12.5px;
  font-weight: 750;
  line-height: 1.4;
}

.trade-record-focus {
  outline: 3px solid #fbbf24;
  outline-offset: 3px;
  border-radius: 8px;
}

@media (max-width: 1100px) {
  .trade-process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .trade-process-guide-head { display: grid; }
  .trade-process-steps { grid-template-columns: 1fr; }
}

/* ============================================================ */
/* Trade-In Ticket detail page (app-trade-ticket.js)            */
/* ============================================================ */
.trade-ticket-page {
  padding: 12px 20px 80px;
  background: #f4f5f7;
  min-height: 100vh;
}
.trade-ticket-page.hidden { display: none; }

.trade-ticket-shell {
  --ticket-view-accent: #ffb703;
  --ticket-view-accent-soft: #ffe08a;
  --ticket-view-chip-bg: #fff7db;
  --ticket-view-chip-ink: #6f4c00;
  display: grid;
  /* Match Quick Sale / Repair sidebar width so all three feel consistent. */
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: start;
}
.trade-ticket-main { min-width: 0; }

.trade-ticket-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  border-radius: 6px;
  padding: 16px 18px;
  background: #023047;
  color: #ffffff;
}

.trade-ticket-title,
.trade-ticket-header-meta {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.trade-ticket-kicker,
.trade-ticket-header-meta span {
  color: #9fb0c3;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.trade-ticket-title strong {
  color: #ffffff;
  font-size: 23px;
  font-weight: 900;
}

.trade-ticket-header-meta {
  min-width: min(320px, 100%);
  padding: 9px 12px;
  border: 1px solid #526175;
  border-radius: 5px;
  background: #1b2635;
}

.trade-ticket-header-meta strong {
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.trade-ticket-status-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 0;
}

.trade-status-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 48px;
  border: 0;
  padding: 12px 16px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
  cursor: default;
}

.trade-status-bar svg,
.trade-location-strip svg,
.trade-section-head svg,
.trade-nav-link svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.trade-status-blue { background: #1ea6da; }
.trade-status-amber { background: #ff9800; }
.trade-status-cyan { background: #00bcd4; }
.trade-status-teal { background: #0f9f8f; }
.trade-status-green { background: #4caf50; }
.trade-status-orange { background: #f97316; }
.trade-status-purple { background: #7c3aed; }
.trade-status-indigo { background: #4f46e5; }
.trade-status-red { background: #e53935; }
.trade-status-gray { background: #46556a; }
.trade-status-slate { background: #64748b; }

.trade-location-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  padding: 12px 16px;
  background: #6b7280;
  color: #ffffff;
  font-size: 13px;
  white-space: nowrap;
}

.trade-location-strip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.trade-detail-grid {
  display: grid;
  grid-template-columns: minmax(320px, .82fr) minmax(0, 1.18fr);
  gap: 14px;
}

.trade-section {
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px solid #e1e6ec;
  border-radius: 6px;
  background: #ffffff;
}

.trade-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #eef3f8;
  color: #243244;
}

.trade-section-head h3 {
  flex: 1;
  margin: 0;
  color: #243244;
  font-size: 15px;
  font-weight: 900;
}

.trade-section-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.trade-small-btn {
  min-height: 30px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 0 10px;
  background: #ffffff;
  color: #243244;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.trade-small-btn:hover {
  border-color: #94a3b8;
  background: #f8fafc;
}

.trade-section-body { padding: 14px; }

.trade-fact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.trade-fact {
  display: grid;
  gap: 4px;
  min-height: 56px;
  padding: 9px;
  border: 1px solid #d5dee8;
  border-radius: 5px;
  background: #ffffff;
}

.trade-fact span,
.trade-note-block span {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.trade-fact strong {
  color: #243244;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.trade-fact-empty strong { color: #94a3b8; }

.trade-note-block {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #d5dee8;
  border-radius: 5px;
  background: #f8fafc;
}

.trade-note-block p {
  margin: 0;
  color: #243244;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

.trade-table-wrap { overflow-x: auto; }

.trade-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 900px;
  font-size: 12.5px;
}

.trade-table th {
  padding: 8px 8px;
  border-bottom: 1px solid #e1e6ec;
  background: #f4f6fa;
  color: #475063;
  font-size: 12px;
  font-weight: 900;
  text-align: left;
}

.trade-table td {
  padding: 9px 8px;
  border-bottom: 1px solid #f0f3f7;
  color: #243244;
}

.trade-right { text-align: right !important; }

.trade-line-status {
  border: 0;
  border-radius: 4px;
  padding: 4px 9px;
  background: #e8f1fc;
  color: #1976d2;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  text-transform: capitalize;
}

.trade-row-actions button {
  border: 0;
  background: transparent;
  color: #dc2626;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.trade-empty-line {
  padding: 16px;
  color: #64748b;
  font-size: 13px;
  font-style: italic;
  text-align: center;
}

.trade-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, .54);
}

.trade-modal-overlay.hidden { display: none; }

.trade-modal-panel {
  width: min(520px, 100%);
  overflow: hidden;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 24px 80px rgba(15, 23, 42, .28);
}

.trade-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: #023047;
  color: #ffffff;
}

.trade-modal-head span {
  display: block;
  margin-bottom: 3px;
  color: #9fb0c3;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.trade-modal-head strong {
  display: block;
  color: #ffffff;
  font-size: 16px;
  font-weight: 900;
}

.trade-modal-close {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  color: #ffffff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.trade-modal-body {
  display: grid;
  gap: 12px;
  padding: 16px 18px 18px;
}

.trade-modal-field {
  display: grid;
  gap: 5px;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.trade-modal-field input {
  min-height: 40px;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  padding: 0 10px;
  color: #243244;
  font-size: 14px;
  font-weight: 800;
  text-transform: none;
}

.trade-modal-error {
  border: 1px solid #fecaca;
  border-radius: 5px;
  padding: 8px 10px;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 13px;
  font-weight: 800;
}

.trade-modal-error.hidden { display: none; }

.trade-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.trade-notes-list {
  display: grid;
  gap: 10px;
}

.trade-note-card {
  border: 1px solid #d5dee8;
  border-radius: 5px;
  padding: 10px 12px;
  background: #f8fafc;
}

.trade-note-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.trade-note-head strong { color: #243244; }
.trade-note-head span { color: #64748b; font-size: 11px; }
.trade-note-actions { display: flex; gap: 4px; margin-left: auto; }
.trade-note-actions button {
  border: 0;
  background: transparent;
  color: #475569;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.trade-note-body { color: #243244; font-size: 13px; line-height: 1.45; }

.trade-history-list {
  display: grid;
  gap: 10px;
}

.trade-history-entry {
  display: grid;
  gap: 3px;
  border-left: 3px solid #cbd5e1;
  padding-left: 10px;
}

.trade-history-entry span {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.trade-history-entry strong {
  color: #243244;
  font-size: 13px;
}

.trade-history-entry p {
  margin: 0;
  color: #475569;
  font-size: 13px;
}

.trade-ticket-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 12px;
}

.trade-nav-box,
.trade-checklist-box {
  overflow: hidden;
  border: 1px solid #e1e6ec;
  border-radius: 6px;
  background: #ffffff;
}

.trade-finance-box {
  overflow: hidden;
  border: 1px solid #e1e6ec;
  border-radius: 4px;
  background: #ffffff;
}

.trade-finance-box-body {
  display: grid;
  gap: 7px;
  padding: 12px;
}

.trade-finance-box-body div,
.trade-finance-summary div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #243244;
  font-size: 13px;
  font-weight: 800;
}

.trade-finance-box-body span,
.trade-finance-summary span {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.trade-finance-box-body strong,
.trade-finance-summary strong {
  color: #243244;
  font-size: 14px;
  font-weight: 900;
}

.trade-finance-balance-panel {
  background: #023047;
  color: #ffffff;
  padding: 16px;
  text-align: center;
  font-size: 28px;
  font-weight: 900;
}

.trade-finance-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
}

.trade-finance-summary div {
  min-height: 64px;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  border: 1px solid #d5dee8;
  border-radius: 5px;
  padding: 10px 12px;
  background: #f8fafc;
}

.trade-finance-summary .trade-finance-balance {
  border-color: #023047;
  background: #023047;
}

.trade-finance-summary .trade-finance-balance span,
.trade-finance-summary .trade-finance-balance strong {
  color: #ffffff;
}

.trade-nav-head {
  padding: 9px 12px;
  background: #023047;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
}

.trade-finance-box-body div {
  font-size: 13px;
  font-weight: 500;
}

.trade-finance-box-body span {
  color: #243244;
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
}

.trade-finance-box-body strong {
  color: #243244;
  font-size: 13px;
  font-weight: 500;
}

.ticket-financial-focus {
  outline: 3px solid rgba(25, 113, 194, 0.35);
  outline-offset: 3px;
}

.trade-nav-body {
  display: grid;
  gap: 2px;
  padding: 6px;
}

.trade-nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  border-radius: 4px;
  padding: 9px 10px;
  background: transparent;
  color: #243244;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.trade-nav-link:hover {
  background: #f4f6fa;
}

.trade-nav-link span {
  margin-left: auto;
  border-radius: 999px;
  padding: 1px 8px;
  background: #dbe3ec;
  color: #243244;
  font-size: 11px;
  font-weight: 900;
}

.trade-nav-foot {
  border-top: 1px solid #e8edf3;
  padding: 8px 12px;
}

.trade-nav-foot button {
  border: 0;
  background: transparent;
  color: #1976d2;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.trade-checklist-body {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.trade-checklist-body div {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #475569;
  font-size: 13px;
  font-weight: 800;
}

.trade-checklist-body span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fee2e2;
  color: #991b1b;
  font-size: 10px;
  font-weight: 900;
}

.trade-check-ok span {
  background: #dcfce7;
  color: #166534;
}

.trade-ticket-action-bar {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin: 14px -20px -12px;
  border-top: 1px solid #e1e6ec;
  padding: 10px 14px;
  background: #ffffff;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.04);
}

.trade-action-btn {
  min-height: 34px;
  border: 0;
  border-radius: 4px;
  padding: 0 14px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.trade-action-green { background: #4caf50; }
.trade-action-blue { background: #2563eb; }
.trade-action-purple { background: #7c3aed; }
.trade-action-indigo { background: #4f46e5; }
.trade-action-amber { background: #d97706; }
.trade-action-cyan { background: #0891b2; }
.trade-action-gray { background: #46556a; }
.trade-action-slate { background: #46556a; }
.trade-action-red { background: #e53935; }
.trade-action-magenta { background: #c026d3; }
.trade-action-disabled {
  opacity: .7;
  cursor: not-allowed;
}
.trade-action-active {
  outline: 2px solid #243244;
  outline-offset: 1px;
}

.trade-ticket-loading {
  padding: 60px 20px;
  color: #64748b;
  text-align: center;
}

.trade-ticket-page[class*="show-only-"] .trade-section[data-tab] { display: none; }
.trade-ticket-page.show-only-customer .trade-section[data-tab="customer"] { display: block; }
.trade-ticket-page.show-only-evaluation .trade-section[data-tab="evaluation"] { display: block; }
.trade-ticket-page.show-only-items .trade-section[data-tab="items"] { display: block; }
.trade-ticket-page.show-only-payout .trade-section[data-tab="payout"] { display: block; }
.trade-ticket-page.show-only-financials .trade-section[data-tab="financials"] { display: block; }
.trade-ticket-page.show-only-photos .trade-section[data-tab="photos"] { display: block; }
.trade-ticket-page.show-only-notes .trade-section[data-tab="notes"] { display: block; }

@media (max-width: 1000px) {
  .trade-ticket-shell,
  .trade-detail-grid,
  .trade-finance-summary {
    grid-template-columns: 1fr;
  }
  .trade-ticket-sidebar {
    position: static;
  }
  .trade-ticket-status-row {
    grid-template-columns: 1fr;
  }
  .trade-location-strip {
    justify-content: space-between;
    white-space: normal;
  }
}

@media (max-width: 640px) {
  .trade-ticket-header {
    align-items: stretch;
    flex-direction: column;
  }
  .trade-fact-grid {
    grid-template-columns: 1fr;
  }
  .trade-ticket-title strong {
    font-size: 20px;
  }
}
/* Refurbish Ticket detail page (app-refurbish-ticket.js)       */
/* Mirrors the Sale Ticket namespace with a few differences:    */
/*   - Status banner accent is blue (#1ea6da)                   */
/*   - Right-sidebar nav has only 4 items                       */
/*   - Bottom action bar is a single right-aligned red pill     */
/*   - Yellow info banner style for refurb status hints         */
/* ============================================================ */
.refurbish-ticket-page {
  padding: 12px 20px 80px;
  background: #f4f5f7;
  min-height: 100vh;
}
.refurbish-ticket-page.hidden { display: none; }

.refurbish-ticket-shell {
  --ticket-view-accent: #4a7fb8;
  --ticket-view-accent-soft: #9fbfe0;
  --ticket-view-chip-bg: #e8f0fb;
  --ticket-view-chip-ink: #244d7a;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}
.refurbish-ticket-main { min-width: 0; }

/* Breadcrumb */
.refurbish-ticket-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #5b6573;
  font-size: 13px;
  margin-bottom: 8px;
}
.refurbish-ticket-breadcrumb svg { stroke: currentColor; fill: none; stroke-width: 2; }

/* Header: title left, 3 inline horizontal dropdowns right */
.refurbish-ticket-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #023047;
  color: #fff;
  padding: 12px 18px;
  font-weight: 600;
  border-radius: 4px 4px 0 0;
  font-size: 15px;
  flex-wrap: wrap;
}
.refurbish-ticket-header svg { stroke: currentColor; fill: none; stroke-width: 2; }
.refurb-ticket-title { display: inline-flex; align-items: center; gap: 8px; }
.refurb-ticket-header-dropdowns {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.refurb-header-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #d6dbe2;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.refurb-header-field select {
  padding: 4px 8px;
  border: 1px solid #5b6573;
  border-radius: 3px;
  background: #2b3340;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  min-width: 120px;
}
/* Status bar + location strip */
.refurbish-ticket-status-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0;
  margin-bottom: 0;
}
.refurb-status-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 14px 20px;
  border: 0;
  font-weight: 600;
  cursor: default;
  color: #fff;
  font-size: 15px;
  background: #1ea6da;
  width: 100%;
}
.refurb-status-bar svg { stroke: currentColor; fill: none; stroke-width: 2.5; }
/* Status color variants — keyed by canonical registry color */
.refurb-status-blue { background: #1ea6da; }
.refurb-status-amber { background: #ff9800; }
.refurb-status-cyan { background: #00bcd4; }
.refurb-status-teal { background: #0f9f8f; }
.refurb-status-green { background: #4caf50; }
.refurb-status-orange { background: #f97316; }
.refurb-status-purple { background: #7c3aed; }
.refurb-status-indigo { background: #4f46e5; }
.refurb-status-red { background: #e53935; }
.refurb-status-gray { background: #9e9e9e; }
.refurb-status-slate { background: #64748b; }

.refurb-location-strip {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #6b7280;
  color: #fff;
  padding: 14px 18px;
  font-size: 13px;
  white-space: nowrap;
}
.refurb-location-item { display: inline-flex; align-items: center; gap: 6px; }
.refurb-location-item svg { stroke: currentColor; fill: none; stroke-width: 2; }

/* Yellow info banner — between the status bar and the Refurbish Items
   section, to hint that advancing the ticket requires changing the item
   status. */
.refurb-banner-info {
  background: #fff8c5;
  border: 1px solid #f0e2a4;
  border-radius: 4px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: #5c4a00;
  margin: 14px 0;
}
.refurb-banner-info strong { font-weight: 600; }
.refurb-banner-info-msg { line-height: 1.4; }

/* Generic refurb section card */
.refurb-section {
  background: #fff;
  border: 1px solid #e1e6ec;
  border-radius: 4px;
  margin-bottom: 14px;
  overflow: hidden;
}
.refurb-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: #4b5564;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}
.refurb-section-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  flex: 1;
}
.refurb-section-head svg { stroke: #fff; fill: none; stroke-width: 2; }
.refurb-section-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.refurb-section-body { padding: 14px; }

/* Devices grid (mirrors customer grid) */
.refurb-devices-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 18px;
}
.refurb-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.refurb-field label {
  font-size: 11px;
  color: #6b7280;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.refurb-field-value {
  font-size: 13px;
  color: #2b3340;
  word-break: break-word;
}
.refurb-field-wide { grid-column: 1 / -1; }

/* Items toolbar */
.refurb-items-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  gap: 14px;
  border-bottom: 1px solid #f0f3f7;
  flex-wrap: wrap;
}
.refurb-items-search {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.refurb-items-search label { color: #6b7280; font-weight: 600; }
.refurb-items-search input {
  padding: 6px 10px;
  border: 1px solid #d2d8e0;
  border-radius: 3px;
  font-size: 13px;
  min-width: 280px;
}

/* Items table */
.refurb-items-table-wrap { overflow-x: auto; }
.refurb-items-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 980px;
  font-size: 12.5px;
}
.refurb-items-table th {
  text-align: left;
  background: #f4f6fa;
  color: #475063;
  font-weight: 600;
  padding: 8px 8px;
  border-bottom: 1px solid #e1e6ec;
  font-size: 12px;
}
.refurb-items-table td {
  padding: 9px 8px;
  border-bottom: 1px solid #f0f3f7;
  vertical-align: middle;
}
.refurb-items-table .refurb-item-right { text-align: right; }
.refurb-items-table th.refurb-item-right { text-align: right; }
.refurb-items-table .refurb-item-total { font-weight: 600; }
.refurb-item-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
.refurb-item-actions button {
  background: transparent;
  border: 0;
  padding: 4px 6px;
  cursor: pointer;
  color: #5b6573;
  font-weight: 600;
  font-size: 13px;
  border-radius: 3px;
}
.refurb-item-actions button:hover { background: #f0f3f7; }
.refurb-item-actions .refurb-item-delete { color: #e53935; }
.refurb-item-actions svg { stroke: currentColor; fill: none; stroke-width: 2; }

.refurb-status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 3px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  border: 0;
  cursor: pointer;
}
.refurb-badge-blue { background: #1ea6da; }
.refurb-badge-amber { background: #ff9800; }
.refurb-badge-green { background: #4caf50; }

.refurb-empty-line {
  padding: 14px;
  text-align: center;
  color: #6b7280;
  font-size: 13px;
  font-style: italic;
}

/* Notes */
.refurb-notes-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 30px 20px;
}
.refurb-notes-empty-text { font-size: 13px; color: #6b7280; }
.refurb-notes-empty .btn-primary {
  background: #2196f3;
  color: #fff;
  border: 0;
  padding: 7px 16px;
  border-radius: 3px;
  cursor: pointer;
  font-weight: 600;
}
.refurb-notes-list-wrap {
  position: relative;
  min-height: 80px;
}
.refurb-notes-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.refurb-note-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 13px;
}
.refurb-note-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.refurb-note-date { color: #6b7280; font-size: 11px; }
.refurb-note-actions { margin-left: auto; display: flex; gap: 4px; }
.refurb-note-actions button {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #5b6573;
  padding: 2px 6px;
}
.refurb-note-body { color: #2b3340; line-height: 1.4; }
.refurb-notes-fab {
  position: absolute;
  bottom: -8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #2196f3;
  color: #fff;
  font-size: 22px;
  border: 0;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.35);
  line-height: 1;
}

/* Right sidebar */
.refurbish-ticket-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 12px;
}
.refurb-nav-box {
  background: #fff;
  border: 1px solid #e1e6ec;
  border-radius: 4px;
  overflow: hidden;
}
.refurb-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #023047;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.refurb-collapse-btn {
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-size: 11px;
}
.refurb-nav-body { padding: 6px 4px; }
.refurb-nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  color: #2b3340;
  cursor: pointer;
  border-radius: 3px;
}
.refurb-nav-link:hover { background: #f4f6fa; }
.refurb-nav-link.active { background: #e8f1fc; color: #1971c2; font-weight: 600; }
.refurb-nav-link svg { stroke: currentColor; fill: none; stroke-width: 2; }
.refurb-nav-badge {
  margin-left: auto;
  background: #d2d8e0;
  color: #2b3340;
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 700;
}
.refurb-nav-foot {
  padding: 8px 12px;
  border-top: 1px solid #e8edf3;
}
.refurb-show-all-link {
  background: transparent;
  border: 0;
  color: #1971c2;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.refurb-show-all-arrow { font-size: 10px; }

.refurb-nav-box.refurb-collapsed .refurb-nav-body,
.refurb-nav-box.refurb-collapsed .refurb-nav-foot { display: none; }

/* Totals box (below navigation in the right sidebar) */
.refurb-totals-box {
  background: #fff;
  border: 1px solid #e1e6ec;
  border-radius: 4px;
  overflow: hidden;
}
.refurb-totals-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #023047;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.refurb-totals-body { padding: 10px 12px; }
.refurb-totals-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 4px 0;
  color: #2b3340;
}
.refurb-balance-panel {
  background: #023047;
  color: #fff;
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  padding: 16px;
  letter-spacing: 0.5px;
}
.refurb-totals-box.refurb-collapsed .refurb-totals-body,
.refurb-totals-box.refurb-collapsed .refurb-balance-panel { display: none; }

/* Sticky bottom action bar — multiple status-transition buttons + Save */
.refurbish-ticket-action-bar {
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #e1e6ec;
  padding: 10px 14px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 14px -20px -12px;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.04);
  z-index: 10;
  flex-wrap: wrap;
}
.refurb-action-btn {
  border: 0;
  padding: 8px 16px;
  border-radius: 3px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: #fff;
  letter-spacing: 0.2px;
}
.refurb-action-amber { background: #ff9800; }
.refurb-action-amber:hover { background: #f57c00; }
.refurb-action-blue { background: #1ea6da; }
.refurb-action-blue:hover { background: #1789b3; }
.refurb-action-purple { background: #8e44ad; }
.refurb-action-purple:hover { background: #703688; }
.refurb-action-green { background: #4caf50; }
.refurb-action-green:hover { background: #388e3c; }
.refurb-action-red { background: #e53935; }
.refurb-action-red:hover { background: #c62828; }
.refurb-action-gray { background: #46556a; }
.refurb-action-gray:hover { background: #2f3b4d; }
.refurb-action-save { background: #2196f3; padding: 8px 26px; }
.refurb-action-save:hover { background: #1976d2; }
.refurb-action-active {
  outline: 2px solid #2b3340;
  outline-offset: 1px;
}

.refurbish-ticket-loading {
  padding: 60px 20px;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
}

/* ==== show-only-{tab} navigation hide/show ==== */
/* Allowed tabs: customer, devices, items, payments, notes, history. When the user picks a nav
   item, every section EXCEPT that tab is hidden. The dark header bar
   (`data-tab="header"`) AND the breadcrumb / status row stay visible. */
.refurbish-ticket-page[class*="show-only-"] .refurb-section[data-tab] { display: none; }
.refurbish-ticket-page.show-only-customer .refurb-section[data-tab="customer"] { display: block; }
.refurbish-ticket-page.show-only-devices .refurb-section[data-tab="devices"] { display: block; }
.refurbish-ticket-page.show-only-items .refurb-section[data-tab="items"] { display: block; }
.refurbish-ticket-page.show-only-payments .refurb-section[data-tab="payments"] { display: block; }
.refurbish-ticket-page.show-only-notes .refurb-section[data-tab="notes"] { display: block; }
.refurbish-ticket-page.show-only-history .refurb-section[data-tab="history"] { display: block; }

/* Responsive */
@media (max-width: 900px) {
  .refurbish-ticket-shell { grid-template-columns: 1fr; }
  .refurb-devices-grid { grid-template-columns: 1fr; }
  .refurbish-ticket-sidebar { position: static; }
}

/* Refurbish Ticket — icon sizing. SVGs in headers/sections/nav-links lack
   inline width/height so we constrain them here. */
.refurbish-ticket-page .refurb-ticket-title svg { width: 18px; height: 18px; flex: 0 0 18px; }
.refurbish-ticket-page .refurb-section-head svg { width: 18px; height: 18px; flex: 0 0 18px; }
.refurbish-ticket-page .refurb-nav-link svg     { width: 16px; height: 16px; flex: 0 0 16px; }
.refurbish-ticket-page .refurb-banner-info svg  { width: 16px; height: 16px; flex: 0 0 16px; }
.refurbish-ticket-page .refurb-status-bar svg   { width: 16px; height: 16px; flex: 0 0 16px; }
.refurbish-ticket-page .refurb-location-strip svg { width: 14px; height: 14px; flex: 0 0 14px; }
.refurbish-ticket-page button svg               { width: 14px; height: 14px; flex: 0 0 14px; }
.refurbish-ticket-page .refurbish-ticket-breadcrumb svg { width: 16px; height: 16px; flex: 0 0 16px; }
/* ============================================================ */
/* REPAIR TICKET PAGE — fresh chip-driven detail page            */
/*   Empty shell rendered at runtime by app-repair-ticket.js.    */
/*   This namespace mirrors the Refurbish ticket page conventions*/
/*   with these differences:                                     */
/*   - Status banner accent: NEUTRAL DARK (#46556a) static       */
/*     fallback; runtime overrides with the status registry      */
/*     color via the .repair-status-* variants below             */
/*   - Right-sidebar nav has 4 items: ticket photos, notes,      */
/*     customer, repair info                                     */
/*   - Notes support links and file attachments                  */
/*   - Ticket Photos auto-populate from the compupod-fotos bucket*/
/* ============================================================ */
.repair-ticket-page {
  padding: 12px 20px 80px;
  background: #f4f5f7;
  min-height: 100vh;
}
.repair-ticket-page.hidden { display: none; }

.repair-ticket-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}
.repair-ticket-main { min-width: 0; }

/* Breadcrumb */
.repair-ticket-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #5b6573;
  font-size: 13px;
  margin-bottom: 8px;
}
.repair-ticket-breadcrumb svg { stroke: currentColor; fill: none; stroke-width: 2; }

/* Header: title left, inline horizontal dropdowns right */
.repair-ticket-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #023047;
  color: #fff;
  padding: 12px 18px;
  font-weight: 600;
  border-radius: 4px 4px 0 0;
  font-size: 15px;
  flex-wrap: wrap;
}
.repair-ticket-header svg { stroke: currentColor; fill: none; stroke-width: 2; }
.repair-ticket-title { display: inline-flex; align-items: center; gap: 8px; }
/* Prominent "print the physical device sticker" action in the ticket header.
   Amber so it stands out on the dark header and reads at a glance (staff-only). */
.ticket-print-label-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fb8500;
  color: #fff;
  border: 0;
  padding: 8px 14px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.ticket-print-label-btn:hover { background: #e07600; color: #fff; }
.ticket-print-label-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.repair-ticket-header-dropdowns {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.repair-header-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #d6dbe2;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.repair-header-field select {
  padding: 4px 8px;
  border: 1px solid #5b6573;
  border-radius: 3px;
  background: #2b3340;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  min-width: 120px;
}

/* Status bar + location strip */
.repair-ticket-status-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0;
  margin-bottom: 0;
}
.repair-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border: 0;
  font-weight: 600;
  cursor: pointer;
  color: #fff;
  font-size: 15px;
  background: #46556a;
  width: 100%;
}
.repair-status-bar svg { stroke: currentColor; fill: none; stroke-width: 2.5; }
/* Status color variants — keyed by canonical registry color.
   Static fallback (above) is the neutral dark #46556a; runtime
   replaces the class with one of these once the status loads. */
.repair-status-blue { background: #1ea6da; }
.repair-status-amber { background: #ff9800; }
.repair-status-cyan { background: #00bcd4; }
.repair-status-teal { background: #0f9f8f; }
.repair-status-green { background: #4caf50; }
.repair-status-orange { background: #f97316; }
.repair-status-purple { background: #7c3aed; }
.repair-status-indigo { background: #4f46e5; }
.repair-status-red { background: #e53935; }
.repair-status-gray { background: #9e9e9e; }
.repair-status-slate { background: #64748b; }
.repair-status-dark { background: #46556a; }

.repair-location-strip {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #6b7280;
  color: #fff;
  padding: 14px 18px;
  font-size: 13px;
  white-space: nowrap;
}
.repair-location-item { display: inline-flex; align-items: center; gap: 6px; }
.repair-location-item svg { stroke: currentColor; fill: none; stroke-width: 2; }

/* Yellow info banner — between the status bar and the first body
   section, to hint when the ticket needs attention. */
.repair-banner-info {
  background: #fff8c5;
  border: 1px solid #f0e2a4;
  border-radius: 4px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: #5c4a00;
  margin: 14px 0;
}
.repair-banner-info strong { font-weight: 600; }
.repair-banner-info-msg { line-height: 1.4; }

/* Generic repair section card */
.repair-section {
  background: #fff;
  border: 1px solid #e1e6ec;
  border-radius: 4px;
  margin-bottom: 14px;
  overflow: hidden;
}
.repair-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: #4b5564;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}
.repair-section-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  flex: 1;
}
.repair-section-head svg { stroke: #fff; fill: none; stroke-width: 2; }
.repair-section-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.repair-section-body { padding: 14px; }

/* Customer / Device read-only grid */
.repair-devices-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 18px;
}
.repair-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.repair-field label {
  font-size: 11px;
  color: #6b7280;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.repair-field-value {
  font-size: 13px;
  color: #2b3340;
  word-break: break-word;
}
.repair-field-wide { grid-column: 1 / -1; }

/* Intake toolbar (search / filter row, if needed) */
.repair-items-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  gap: 14px;
  border-bottom: 1px solid #f0f3f7;
  flex-wrap: wrap;
}
.repair-items-search {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.repair-items-search label { color: #6b7280; font-weight: 600; }
.repair-items-search input {
  padding: 6px 10px;
  border: 1px solid #d2d8e0;
  border-radius: 3px;
  font-size: 13px;
  min-width: 280px;
}

.repair-empty-line {
  padding: 14px;
  text-align: center;
  color: #6b7280;
  font-size: 13px;
  font-style: italic;
}

/* Notes timeline. Links and attachments are supported. */
.repair-notes-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 30px 20px;
}
.repair-notes-empty-text { font-size: 13px; color: #6b7280; }
.repair-ticket-page .repair-notes-empty .repair-add-note-btn {
  background: #46556a;
  color: #fff;
  border: 0;
  padding: 7px 16px;
  border-radius: 3px;
  cursor: pointer;
  font-weight: 600;
}
.repair-ticket-page .repair-notes-empty .repair-add-note-btn:hover {
  background: #2f3b4d;
}
.repair-notes-list-wrap {
  position: relative;
  min-height: 80px;
}
.repair-notes-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.repair-note-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 13px;
}
.repair-note-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.repair-note-date { color: #6b7280; font-size: 11px; }
.repair-note-actions { margin-left: auto; display: flex; gap: 4px; }
.repair-note-actions button {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #5b6573;
  padding: 2px 6px;
}
.repair-note-body { color: #2b3340; line-height: 1.4; }
.repair-notes-fab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--space-3) 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #46556a;
  color: #fff;
  font-size: 22px;
  border: 0;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(70, 85, 106, 0.28);
  line-height: 1;
}
.repair-notes-fab:hover { background: #2f3b4d; }

/* Photos grid — populated from /api/media?ticket_id=… */
.repair-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.repair-photo-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #f0f3f7;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
}
.repair-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.repair-photos-empty {
  padding: 30px 20px;
  text-align: center;
  color: #6b7280;
  font-size: 13px;
  font-style: italic;
}

/* Ticket Fotos block (compupod-fotos bucket) — kind groups + video/file tiles */
.repair-fotos-group { margin-bottom: 14px; }
.repair-fotos-group:last-child { margin-bottom: 0; }
.repair-fotos-group .kind-badge { display: inline-block; margin-bottom: 8px; }
.repair-foto-video .repair-foto-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  pointer-events: none;
}
.repair-foto-file {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  text-align: center;
  text-decoration: none;
  color: #2b3340;
}
.repair-foto-file-icon { font-size: 28px; line-height: 1; }
.repair-foto-file-name {
  font-size: 11px;
  word-break: break-word;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Right sidebar — only 5 nav items for Repair */
.repair-ticket-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 12px;
}
.repair-nav-box {
  background: #fff;
  border: 1px solid #e1e6ec;
  border-radius: 4px;
  overflow: hidden;
}
.repair-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #023047;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.repair-collapse-btn {
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-size: 11px;
}
.repair-nav-body { padding: 6px 4px; }
.repair-nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  color: #2b3340;
  cursor: pointer;
  border-radius: 3px;
}
.repair-nav-link:hover { background: #f4f6fa; }
.repair-nav-link.active { background: #e8f1fc; color: #1971c2; font-weight: 600; }
.repair-nav-link svg { stroke: currentColor; fill: none; stroke-width: 2; }
.repair-nav-badge {
  margin-left: auto;
  background: #d2d8e0;
  color: #2b3340;
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 700;
}
.repair-nav-foot {
  padding: 8px 12px;
  border-top: 1px solid #e8edf3;
}
.repair-show-all-link {
  background: transparent;
  border: 0;
  color: #1971c2;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.repair-show-all-arrow { font-size: 10px; }

.repair-nav-box.repair-collapsed .repair-nav-body,
.repair-nav-box.repair-collapsed .repair-nav-foot { display: none; }

/* Totals box (below navigation in the right sidebar) */
.repair-totals-box {
  background: #fff;
  border: 1px solid #e1e6ec;
  border-radius: 4px;
  overflow: hidden;
}
.repair-totals-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #023047;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.repair-totals-body { padding: 10px 12px; }
.repair-totals-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 4px 0;
  color: #2b3340;
}
.repair-balance-panel {
  background: #023047;
  color: #fff;
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  padding: 16px;
  letter-spacing: 0.5px;
}
.repair-totals-box.repair-collapsed .repair-totals-body,
.repair-totals-box.repair-collapsed .repair-balance-panel { display: none; }

/* Cobrar button living inside the Repair detail Financials box */
.repair-totals-box .ticket-create-charge-btn {
  display: block;
  width: calc(100% - 24px);
  margin: 12px;
  padding: 12px 14px;
  border: 0;
  border-radius: 10px;
  background: #174ea6;
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(23, 78, 166, 0.18);
  transition: background 0.15s, transform 0.05s;
}
.repair-totals-box .ticket-create-charge-btn:hover { background: #0f3f8f; }
.repair-totals-box .ticket-create-charge-btn:active { transform: translateY(1px); }
.repair-totals-box.repair-collapsed .ticket-create-charge-btn { display: none; }

.repair-financial-body {
  display: grid;
  gap: 14px;
}

.repair-finance-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
}

.repair-finance-summary div {
  display: grid;
  gap: 4px;
  min-height: 64px;
  border: 1px solid #d5dee8;
  border-radius: 5px;
  padding: 10px 12px;
  background: #f8fafc;
}

.repair-finance-summary span,
.repair-finance-table-block h4 {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.repair-finance-summary strong {
  color: #243244;
  font-size: 17px;
  font-weight: 900;
}

.repair-finance-summary .repair-finance-balance {
  border-color: #023047;
  background: #023047;
}

.repair-finance-summary .repair-finance-balance span,
.repair-finance-summary .repair-finance-balance strong {
  color: #ffffff;
}

.repair-finance-table-block {
  display: grid;
  gap: 8px;
}

.repair-finance-table-block h4 {
  margin: 0;
}

.repair-finance-table-wrap {
  overflow-x: auto;
  border: 1px solid #e1e6ec;
  border-radius: 5px;
}

.repair-finance-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 980px;
  font-size: 12.5px;
}

.repair-finance-table.repair-payments-table {
  min-width: calc(var(--space-10) * 18);
}

.repair-payment-refund-button {
  min-width: calc(var(--space-10) * 2);
}

.repair-finance-table th {
  padding: 8px 8px;
  border-bottom: 1px solid #e1e6ec;
  background: #f4f6fa;
  color: #475063;
  font-size: 12px;
  font-weight: 900;
  text-align: left;
}

.repair-finance-table td {
  padding: 9px 8px;
  border-bottom: 1px solid #f0f3f7;
  color: #243244;
}

.repair-finance-right {
  text-align: right !important;
}

.repair-finance-total {
  font-weight: 900;
}

/* Per-line "Sale Details" controls in the repair financial table.
   Reuses .sale-item-input / .sale-item-note-input / .sale-waived-badge /
   .sale-line-struck / .sale-item-waive / .sale-item-delete from above. */
.repair-line-name { font-weight: 600; }
.repair-line-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}
.repair-line-status,
.repair-line-source,
.repair-line-bin {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #eef2f7;
  color: #475569;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}
.repair-line-bin {
  gap: 3px;
  background: #e1f0ff;
  color: #155e9f;
}
.repair-line-status.is-back_ordered {
  background: #fff3d6;
  color: #9a4f00;
}
.repair-line-status.is-pulled {
  background: #dff7ec;
  color: #087443;
}
.repair-line-status.is-delivered,
.repair-line-status.is-instock {
  background: #e1f0ff;
  color: #155e9f;
}
.repair-line-source {
  background: #eef6f7;
  color: #0f766e;
}
.repair-finance-table .repair-line-note { max-width: 220px; }
.repair-line-actions { white-space: nowrap; }
.repair-line-actions button {
  background: transparent;
  border: 0;
  padding: 4px 6px;
  margin-left: 2px;
  cursor: pointer;
  color: #5b6573;
  border-radius: 3px;
  vertical-align: middle;
}
.repair-line-actions button:hover { background: #f0f3f7; }
.repair-line-actions .sale-item-delete { color: #e53935; }
.repair-line-actions .sale-item-waive { color: #0f7b6c; }
.repair-line-actions .sale-item-waive.is-waived { color: #fff; background: #0f9d8f; }
.repair-line-actions svg { stroke: currentColor; fill: none; stroke-width: 2; }
.repair-line-waived td { background: #f7fbfa; }
.repair-finance-waived strong,
.repair-totals-waived span:last-child { color: #0f7b6c; }

.ticket-item-picker-panel {
  max-width: 680px;
}
.ticket-item-catalog-panel {
  overflow: visible;
  border: 1px solid rgba(2, 48, 71, 0.18);
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(2, 48, 71, 0.24);
}
.ticket-item-picker-header {
  position: relative;
  min-height: 74px;
  align-items: center;
  justify-content: space-between;
  background: #023047;
  color: #ffffff;
  text-align: left;
  border-radius: 18px 18px 0 0;
  padding: 0 22px;
}
.ticket-item-picker-header .inv-form-title {
  color: #ffffff !important;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.ticket-item-picker-header .customer-picker-close {
  position: static;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  width: 34px;
  height: 34px;
}
.ticket-item-picker-subtitle {
  margin: 4px 0 0;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 700;
}
.ticket-item-picker-body {
  display: grid;
  gap: 16px;
  padding: 22px;
}
.ticket-item-catalog-grid {
  display: grid;
  grid-template-columns: minmax(128px, 0.36fr) minmax(260px, 1fr);
  align-items: center;
  gap: 14px 18px;
  padding: 0;
}
.ticket-item-catalog-label {
  justify-self: end;
  color: #50657a;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ticket-item-catalog-label em {
  color: #0ea5c6;
  font-style: normal;
}
.ticket-item-catalog-control {
  width: 100%;
  min-height: 44px;
  border: 1px solid #cbd8e3;
  border-radius: 12px;
  background: #ffffff;
  color: #0f2235;
  font-size: 15px;
  font-weight: 800;
  padding: 0 14px;
}
.ticket-item-catalog-control:focus {
  border-color: #219ebc;
  box-shadow: 0 0 0 3px rgba(33, 158, 188, 0.16);
  outline: none;
}
.ticket-item-catalog-field {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 8px;
}
.ticket-item-catalog-results {
  position: static;
  z-index: 30;
  width: 100%;
  max-height: 320px;
  overflow: auto;
  border: 1px solid #cfd7df;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
}
.ticket-item-catalog-results.hidden {
  display: none;
}
.ticket-item-catalog-result,
.ticket-item-catalog-empty {
  width: 100%;
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid #edf2f7;
  background: #ffffff;
  color: #172235;
  text-align: left;
}
.ticket-item-catalog-result {
  cursor: pointer;
}
.ticket-item-catalog-result:last-child {
  border-bottom: 0;
}
.ticket-item-catalog-result:hover {
  background: #eef8fc;
}
.ticket-item-catalog-result strong {
  font-size: 13px;
  font-weight: 900;
}
.ticket-item-catalog-result span,
.ticket-item-catalog-empty {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}
.ticket-item-picker-search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1px solid #dbe5ee;
  border-radius: 7px;
  background: #f8fbfd;
}
.ticket-item-picker-search label {
  display: block;
  margin-bottom: 4px;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}
.ticket-item-picker-search strong {
  color: #172235;
  font-size: 18px;
}
.ticket-item-selected {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid #b8d8e8;
  border-left: 4px solid #145f7f;
  border-radius: 12px;
  background: #f5fbff;
}
.ticket-item-selected-main {
  display: grid;
  gap: 4px;
}
.ticket-item-selected-main strong {
  color: #0f172a;
  font-size: 16px;
}
.ticket-item-selected-main span,
.ticket-item-selected-meta span {
  color: #5b6b82;
  font-size: 12px;
  font-weight: 800;
}
.ticket-item-selected-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.ticket-item-selected-meta span {
  padding: 4px 8px;
  border-radius: 999px;
  background: #e7f0f6;
}
.ticket-item-picker-grid {
  display: grid;
  grid-template-columns: minmax(120px, 0.35fr) minmax(220px, 1fr);
  gap: 16px;
}
.ticket-item-picker-body button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

@media (max-width: 640px) {
  .ticket-item-catalog-grid {
    grid-template-columns: 1fr;
  }
  .ticket-item-catalog-label {
    justify-self: start;
  }
  .ticket-item-picker-search,
  .ticket-item-selected {
    align-items: stretch;
    flex-direction: column;
  }
  .ticket-item-selected-meta {
    justify-content: flex-start;
  }
  .ticket-item-picker-grid {
    grid-template-columns: 1fr;
  }
}

/* Sticky bottom action bar — status-transition buttons + Save */
.repair-ticket-action-bar {
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #e1e6ec;
  padding: 10px 14px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 14px -20px -12px;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.04);
  z-index: 10;
  flex-wrap: wrap;
}
.repair-action-btn {
  border: 0;
  padding: 8px 16px;
  border-radius: 3px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: #fff;
  letter-spacing: 0.2px;
}
.repair-action-amber { background: #ff9800; }
.repair-action-amber:hover { background: #f57c00; }
.repair-action-blue { background: #1ea6da; }
.repair-action-blue:hover { background: #1789b3; }
.repair-action-cyan { background: #00a6c2; }
.repair-action-cyan:hover { background: #08798f; }
.repair-action-teal { background: #0f9f8f; }
.repair-action-teal:hover { background: #087660; }
.repair-action-green { background: #4caf50; }
.repair-action-green:hover { background: #388e3c; }
.repair-action-orange { background: #f97316; }
.repair-action-orange:hover { background: #c2410c; }
.repair-action-purple { background: #7c3aed; }
.repair-action-purple:hover { background: #5b21b6; }
.repair-action-indigo { background: #4f46e5; }
.repair-action-indigo:hover { background: #3730a3; }
.repair-action-red { background: #e53935; }
.repair-action-red:hover { background: #c62828; }
.repair-action-magenta { background: #c026d3; }
.repair-action-magenta:hover { background: #a21caf; }
.repair-action-gray { background: #46556a; }
.repair-action-gray:hover { background: #2f3b4d; }
.repair-action-slate { background: #64748b; }
.repair-action-slate:hover { background: #475569; }
.repair-action-save { background: #1976d2; padding: 8px 26px; }
.repair-action-save:hover { background: #145ea8; }
.repair-action-save-clean { background: #6b7280; }
.repair-action-save-clean:hover { background: #4b5563; }
.repair-action-active {
  outline: 2px solid #2b3340;
  outline-offset: 1px;
}

.repair-ticket-loading {
  padding: 60px 20px;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
}

/* ==== show-only-{tab} navigation hide/show ==== */
/* Allowed tabs: customer, device, fotos, notes, parts and financials.
   When the user picks a nav item, every
   section EXCEPT that tab is hidden. The dark header bar (`data-tab="header"`)
   AND the breadcrumb / status row stay visible. */
.repair-ticket-page[class*="show-only-"] .repair-section[data-tab] { display: none; }
.repair-ticket-page.show-only-customer .repair-section[data-tab="customer"] { display: block; }
.repair-ticket-page.show-only-device .repair-section[data-tab="device"] { display: block; }
.repair-ticket-page.show-only-fotos .repair-section[data-tab="fotos"] { display: block; }
.repair-ticket-page.show-only-notes .repair-section[data-tab="notes"] { display: block; }
.repair-ticket-page.show-only-parts .repair-section[data-tab="parts"] { display: block; }
.repair-ticket-page.show-only-financials .repair-section[data-tab="financials"] { display: block; }

/* Responsive */
@media (max-width: 900px) {
  .repair-ticket-shell { grid-template-columns: 1fr; }
  .repair-devices-grid,
  .repair-finance-summary { grid-template-columns: 1fr; }
  .repair-ticket-sidebar { position: static; }
}

/* Repair Ticket — icon sizing. SVGs in headers/sections/nav-links lack
   inline width/height so we constrain them here. */
.repair-ticket-page .repair-ticket-title svg   { width: 18px; height: 18px; flex: 0 0 18px; }
.repair-ticket-page .repair-section-head svg   { width: 18px; height: 18px; flex: 0 0 18px; }
.repair-ticket-page .repair-nav-link svg       { width: 16px; height: 16px; flex: 0 0 16px; }
.repair-ticket-page .repair-banner-info svg    { width: 16px; height: 16px; flex: 0 0 16px; }
.repair-ticket-page .repair-status-bar svg     { width: 16px; height: 16px; flex: 0 0 16px; }
.repair-ticket-page .repair-location-strip svg { width: 14px; height: 14px; flex: 0 0 14px; }
.repair-ticket-page button svg                 { width: 14px; height: 14px; flex: 0 0 14px; }
.repair-ticket-page .repair-ticket-breadcrumb svg { width: 16px; height: 16px; flex: 0 0 16px; }

/* Repair detail v2 - built for technicians and front counter lookup. */
.repair-ticket-shell-v2 {
  grid-template-columns: minmax(0, 1fr) 248px;
  gap: 16px;
}

.repair-ticket-shell-v2 .repair-ticket-header {
  align-items: flex-start;
  border-radius: 6px;
  margin-bottom: 12px;
  padding: 16px 18px;
  background: #023047;
}

.repair-ticket-shell-v2 .repair-ticket-title {
  display: grid;
  gap: 3px;
}

.repair-ticket-title-kicker {
  color: #9fb0c3;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.repair-ticket-shell-v2 .repair-ticket-title > span:last-child {
  color: #ffffff;
  font-size: 23px;
  font-weight: 900;
}

.repair-ticket-assigned-technician {
  display: grid;
  gap: 3px;
  min-width: min(340px, 100%);
  padding: 9px 12px;
  border: 1px solid #526175;
  border-radius: 5px;
  background: #1b2635;
  color: #ffffff;
}

.repair-ticket-assigned-technician span {
  color: #9fb0c3;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.repair-ticket-assigned-technician strong {
  font-size: 15px;
  font-weight: 900;
}

.repair-ticket-shell-v2 .repair-ticket-header-dropdowns {
  align-items: flex-end;
  gap: 10px;
}

.repair-ticket-shell-v2 .repair-header-field {
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
  letter-spacing: 0;
}

.repair-ticket-shell-v2 .repair-header-field select {
  min-height: 34px;
  min-width: 150px;
  border-color: #526175;
  background: #1b2635;
}

.repair-assignment-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 12px;
  padding: 14px 16px;
  border: 2px solid #dc2626;
  border-radius: 6px;
  background: #fff1f2;
  color: #7f1d1d;
}

.repair-assignment-alert > div {
  display: grid;
  gap: 3px;
}

.repair-assignment-alert strong {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0;
}

.repair-assignment-alert span {
  font-size: 13px;
  font-weight: 700;
}

.repair-assignment-focus-btn {
  min-height: 36px;
  border: 0;
  border-radius: 4px;
  padding: 0 14px;
  background: #dc2626;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}

.repair-technician-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.52);
}

.repair-technician-modal-card {
  position: relative;
  width: min(520px, 100%);
  max-height: min(680px, calc(100vh - 48px));
  overflow: auto;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.28);
}

.repair-technician-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 4px;
  background: #eef2f7;
  color: #243244;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
}

.repair-technician-modal-head {
  padding: 20px 22px 14px;
  border-bottom: 1px solid #e1e6ec;
}

.repair-technician-modal-head span {
  display: block;
  margin-bottom: 3px;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.repair-technician-modal-head h3 {
  margin: 0;
  color: #243244;
  font-size: 24px;
  font-weight: 900;
}

.repair-technician-list {
  display: grid;
  gap: 10px;
  padding: 16px 22px 22px;
}

.repair-technician-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  padding: 10px 12px;
  background: #f8fafc;
  color: #243244;
  text-align: left;
  cursor: pointer;
}

.repair-technician-option:hover,
.repair-technician-option:focus {
  border-color: #1976d2;
  background: #eff6ff;
  outline: none;
}

.repair-technician-option strong {
  font-size: 15px;
  font-weight: 900;
}

.repair-technician-option span,
.repair-technician-empty span {
  color: #64748b;
  font-size: 13px;
}

.repair-technician-empty {
  display: grid;
  gap: 4px;
  padding: 16px;
  border: 1px solid #e1e6ec;
  border-radius: 5px;
  background: #f8fafc;
}

.repair-technician-empty strong {
  color: #243244;
  font-size: 15px;
}

.repair-detail-board {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  gap: 14px;
  margin-bottom: 14px;
  align-items: start;
}

.repair-detail-left-column,
.repair-detail-right-column {
  display: grid;
  gap: 14px;
  min-width: 0;
  align-content: start;
}

.repair-detail-command-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  min-width: 0;
  align-items: start;
}

.repair-detail-status-card,
.repair-detail-summary-card {
  min-width: 0;
}

.repair-detail-status-card {
  align-self: start;
}

.repair-detail-status-card .repair-ticket-status-row {
  display: block;
}

.repair-detail-status-card .repair-status-bar {
  border-radius: 6px;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-height: 104px;
  padding: 18px;
  text-align: left;
  font-size: 14px;
  font-weight: 900;
}

.repair-status-kicker {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  opacity: 0.84;
  text-transform: uppercase;
}

.repair-status-value {
  display: block;
  font-size: 24px;
  line-height: 1.05;
}

.repair-status-help {
  display: block;
  max-width: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  opacity: 0.84;
}

.repair-detail-summary-card {
  margin-bottom: 0;
  border-radius: 6px;
}

.repair-detail-summary-card .repair-section-head {
  background: #eef3f8;
  color: #243244;
}

.repair-detail-summary-card .repair-section-head h3 {
  color: #243244;
  font-weight: 900;
}

.repair-customer-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 76px;
  padding: 12px;
  border: 1px solid #d5dee8;
  border-radius: 5px;
  background: #f8fafc;
}

.repair-customer-info {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.repair-customer-info strong {
  color: #243244;
  font-size: 17px;
}

.repair-customer-meta {
  color: #64748b;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.customer-contact-method-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  margin-top: 4px;
  padding: 4px 8px;
  border: 1px solid #9bd4c6;
  border-radius: 999px;
  background: #ecfdf5;
  color: #0f766e;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
}

.customer-contact-method-badge svg {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.customer-contact-method-badge.is-missing {
  border-color: #facc15;
  background: #fefce8;
  color: #92400e;
}

.repair-section[data-tab="customer"],
.sale-section[data-tab="customer"],
.trade-section[data-tab="customer"],
.refurb-section[data-tab="customer"] {
  position: relative;
  z-index: 40;
  overflow: visible;
}

.repair-section[data-tab="customer"] .repair-section-head,
.sale-section[data-tab="customer"] .sale-section-head,
.trade-section[data-tab="customer"] .trade-section-head,
.refurb-section[data-tab="customer"] .repair-section-head {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.repair-section[data-tab="customer"] .repair-section-body,
.sale-section[data-tab="customer"] .repair-section-body,
.trade-section[data-tab="customer"] .repair-section-body,
.refurb-section[data-tab="customer"] .repair-section-body {
  overflow: visible;
}

.repair-customer-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
  overflow: visible;
}

.repair-customer-actions button {
  min-height: 32px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 0 10px;
  background: #ffffff;
  color: #243244;
  font-weight: 800;
}

.repair-customer-actions .dialpad-message-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 104px;
  border-color: transparent;
  background: linear-gradient(135deg, #4f2dff 0%, #7b3ff2 100%);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(79, 45, 255, 0.22);
}

.repair-customer-actions .dialpad-call-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 88px;
  border-color: transparent;
  background: linear-gradient(135deg, #16c4d0 0%, #159a88 100%);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(21, 154, 136, 0.2);
}

.repair-customer-actions .dialpad-message-btn:hover:not(:disabled) {
  border-color: transparent;
  background: linear-gradient(135deg, #4325dc 0%, #6732d0 100%);
}

.repair-customer-actions .dialpad-call-btn:hover:not(:disabled) {
  border-color: transparent;
  background: linear-gradient(135deg, #11aeba 0%, #128172 100%);
}

.repair-customer-actions .customer-ticket-menu {
  position: relative;
  display: inline-flex;
  z-index: 1;
}

.repair-customer-actions .customer-ticket-menu.is-open {
  z-index: 9000;
}

.repair-customer-actions .customer-ticket-trigger,
.repair-customer-actions .customer-ticket-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 112px;
  border-color: #b8c5d4;
  background: #ffffff;
  color: #243244;
}

.repair-customer-actions .customer-ticket-trigger svg,
.repair-customer-actions .customer-ticket-action svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.repair-customer-actions .customer-ticket-trigger:hover:not(:disabled),
.repair-customer-actions .customer-ticket-action:hover:not(:disabled) {
  border-color: #8aa0b8;
  background: #f1f5f9;
}

.repair-customer-actions .customer-ticket-trigger svg:last-child {
  width: 12px;
  height: 12px;
  transition: transform .14s ease;
}

.repair-customer-actions .customer-ticket-menu.is-open .customer-ticket-trigger svg:last-child {
  transform: rotate(180deg);
}

.repair-customer-actions .customer-ticket-menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 8500;
  display: none;
  width: 168px;
  padding: 6px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18);
}

.repair-customer-actions .customer-ticket-menu.is-open .customer-ticket-menu-panel {
  display: grid;
  gap: 4px;
}

.repair-customer-actions .customer-ticket-menu-panel .customer-ticket-action {
  width: 100%;
  justify-content: flex-start;
  min-width: 0;
  min-height: 34px;
  border-color: transparent;
  box-shadow: none;
}

.repair-customer-actions .customer-ticket-action.is-delivered {
  border-color: #16a34a;
  background: #ecfdf5;
  color: #166534;
}

.repair-customer-actions .customer-ticket-action.is-delivered::before {
  content: "✓";
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #16a34a;
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
}

.repair-customer-actions .customer-ticket-action.is-delivered svg {
  display: none;
}

.dialpad-message-btn:disabled,
.dialpad-message-btn.is-disabled,
.dialpad-call-btn:disabled,
.dialpad-call-btn.is-disabled,
.customer-ticket-trigger:disabled,
.customer-ticket-trigger.is-disabled,
.customer-ticket-action:disabled,
.customer-ticket-action.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
  box-shadow: none;
}

.repair-customer-actions .customer-ticket-action.is-delivered:disabled {
  opacity: 1;
}

.dialpad-message-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dialpad-message-modal {
  position: fixed;
  inset: 0;
  z-index: 8000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.42);
}

.dialpad-message-modal.hidden {
  display: none;
}

body.dialpad-message-open {
  overflow: hidden;
}

.dialpad-message-panel {
  width: min(520px, 100%);
  border: 1px solid rgba(79, 45, 255, 0.18);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
  overflow: hidden;
}

.dialpad-message-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid #e5e9f0;
}

.dialpad-message-kicker {
  color: #4f2dff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.ticket-call-transcript-header .dialpad-message-kicker,
.ticket-call-audio-header .dialpad-message-kicker {
  color: var(--cp-accent-hover);
}

.dialpad-message-header h3 {
  margin: 3px 0 4px;
  color: #172033;
  font-size: 20px;
  line-height: 1.2;
}

.dialpad-message-header p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.dialpad-message-close {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  background: #ffffff;
  color: #1f2937;
  font-size: 18px;
  font-weight: 900;
}

.dialpad-message-form {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.dialpad-message-form label {
  display: grid;
  gap: 6px;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
}

.dialpad-message-form input,
.dialpad-message-form textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #ffffff;
  color: #172033;
  font: inherit;
}

.dialpad-message-form input {
  min-height: 38px;
  padding: 0 10px;
}

.dialpad-message-form textarea {
  min-height: 126px;
  padding: 10px;
  resize: vertical;
}

.dialpad-message-form input:focus,
.dialpad-message-form textarea:focus {
  outline: 2px solid rgba(22, 196, 208, 0.32);
  border-color: #16c4d0;
}

.dialpad-message-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.dialpad-message-actions button {
  min-height: 38px;
  border-radius: 5px;
  padding: 0 14px;
  font-weight: 900;
}

.dialpad-message-cancel {
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #243244;
}

.dialpad-message-submit {
  border: 1px solid transparent;
  background: #4f2dff;
  color: #ffffff;
}

.dialpad-message-submit:disabled {
  opacity: 0.66;
}

/* A blocked technical message can become a staff relay, never an approval. */
#dialpad-message-modal .dialpad-message-panel {
  max-height: calc(100vh - 36px);
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
#dialpad-message-modal [hidden] { display: none !important; }
.diagnosis-message-gate, .diagnosis-message-form {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface);
  color: var(--content-1);
  min-width: 0;
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
.diagnosis-message-gate {
  margin: var(--space-4) var(--space-4) 0;
  padding: var(--space-3);
  border: 1px solid var(--cp-accent);
  border-radius: var(--radius-md);
  background: var(--cp-accent-soft);
  color: var(--cp-gray-90);
}
.diagnosis-message-gate h4 { margin: 0; font-size: 15px; }
.diagnosis-message-gate p, .diagnosis-message-form p { margin: 0; line-height: 1.5; font-size: 13px; }
.diagnosis-message-note { color: var(--content-2); font-weight: 400; }
.diagnosis-message-gate .diagnosis-message-note { color: var(--cp-gray-70); }
.diagnosis-message-fields { display: grid; gap: var(--space-3); min-width: 0; }
.diagnosis-message-form label, .diagnosis-message-gate label {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}
.diagnosis-message-form label span, .diagnosis-message-gate label span {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
.diagnosis-message-form textarea, .diagnosis-message-form input[type="file"], .diagnosis-message-gate select {
  width: 100%;
  min-width: 0;
  padding: var(--space-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--content-1);
  font: inherit;
}
.diagnosis-message-form textarea { min-height: 150px; resize: vertical; font-family: inherit; text-transform: none; letter-spacing: normal; }
.diagnosis-message-form textarea:focus-visible, .diagnosis-message-gate select:focus-visible { outline: 2px solid var(--cp-accent); }
.diagnosis-message-form .diagnosis-message-confirm { display: flex; align-items: flex-start; gap: var(--space-2); }
.diagnosis-message-form .diagnosis-message-confirm input[type="checkbox"] {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 2px 0 0;
  padding: 0;
  border-radius: var(--radius-xs);
  accent-color: var(--cp-accent);
}
.diagnosis-message-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.diagnosis-message-primary {
  min-height: 40px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--cp-accent);
  color: var(--cp-accent-content);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.diagnosis-message-primary:disabled { opacity: .6; cursor: default; }
.diagnosis-message-primary:hover:not(:disabled) { background: var(--cp-accent-hover); }
.diagnosis-message-gate a, .diagnosis-message-form a { color: var(--cp-accent-hover); font-size: 13px; font-weight: 600; }
.diagnosis-message-status { overflow-wrap: anywhere; }
.diagnosis-message-status.is-error { color: var(--cp-danger); }
#dialpad-diagnosis-photo-list { overflow-wrap: anywhere; }
@media (max-width: 560px) {
  #dialpad-message-modal { padding: var(--space-2); }
  #dialpad-message-modal .dialpad-message-panel { max-height: calc(100dvh - 16px); }
  .diagnosis-message-form .dialpad-message-actions { flex-direction: column-reverse; }
  .diagnosis-message-form .dialpad-message-actions button { width: 100%; min-height: 44px; }
}

.dialpad-call-modal {
  position: fixed;
  inset: 0;
  z-index: 8010;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.46);
}

.dialpad-call-modal.hidden {
  display: none;
}

body.dialpad-call-open {
  overflow: hidden;
}

.dialpad-call-panel {
  width: min(520px, 100%);
  border: 1px solid rgba(22, 196, 208, 0.28);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.3);
  overflow: hidden;
}

.dialpad-call-header {
  padding: 15px 16px 12px;
}

.dialpad-call-status {
  min-height: 0;
  display: flex;
  align-items: center;
  padding: 0;
  border-bottom: 0;
  color: #475569;
  font-size: 13px;
  font-weight: 800;
}

.dialpad-call-status.success {
  color: #0f766e;
}

.dialpad-call-status.error {
  color: #b91c1c;
}

.dialpad-call-submit {
  border: 1px solid transparent;
  background: linear-gradient(135deg, #16c4d0 0%, #159a88 100%);
  color: #ffffff;
}

.dialpad-call-submit:disabled {
  opacity: 0.66;
}

.ticket-call-transcript-btn {
  min-height: 28px;
  border: 1px solid color-mix(in srgb, var(--cp-accent) 32%, var(--border-1));
  border-radius: var(--radius-xs);
  padding: 0 var(--space-2);
  background: var(--cp-accent-soft);
  color: var(--cp-accent-hover);
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
}

.ticket-call-transcript-btn:hover:not(:disabled) {
  border-color: var(--cp-accent);
  background: color-mix(in srgb, var(--cp-accent-soft) 72%, var(--surface));
}

.ticket-call-transcript-btn.is-ready {
  border-color: color-mix(in srgb, var(--cp-success) 34%, var(--border-1));
  background: color-mix(in srgb, var(--cp-success) 9%, var(--surface));
  color: color-mix(in srgb, var(--cp-success) 82%, var(--content-1));
}

.ticket-call-transcript-btn:disabled,
.ticket-call-transcript-btn.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.ticket-call-audio-btn {
  min-height: 28px;
  border: 1px solid rgba(20, 184, 166, 0.28);
  border-radius: var(--radius-xs);
  padding: 0 var(--space-2);
  background: #ecfeff;
  color: #0f766e;
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
}

.ticket-call-audio-btn:hover:not(:disabled) {
  border-color: rgba(20, 184, 166, 0.44);
  background: #cffafe;
}

.ticket-call-audio-btn.is-ready {
  border-color: rgba(22, 163, 74, 0.34);
  background: #ecfdf5;
  color: #166534;
}

.ticket-call-audio-btn:disabled,
.ticket-call-audio-btn.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.ticket-call-transcript-modal {
  position: fixed;
  inset: 0;
  z-index: 8020;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.46);
}

.ticket-call-transcript-modal.hidden {
  display: none;
}

body.ticket-call-transcript-open {
  overflow: hidden;
}

.ticket-call-transcript-panel {
  width: min(720px, 100%);
  max-height: min(760px, calc(100vh - 36px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid color-mix(in srgb, var(--cp-accent) 28%, var(--border-1));
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.ticket-call-transcript-body {
  display: grid;
  gap: 10px;
  padding: 16px;
  overflow: auto;
  background: #f8fafc;
}

.ticket-call-transcript-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.ticket-call-transcript-summary span {
  border: 1px solid #dbe3ec;
  border-radius: 999px;
  padding: 4px 8px;
  background: #ffffff;
}

.ticket-call-transcript-row {
  display: flex;
  width: 100%;
}

.ticket-call-transcript-row.is-customer {
  justify-content: flex-start;
}

.ticket-call-transcript-row.is-internal {
  justify-content: flex-end;
}

.ticket-call-transcript-line {
  display: grid;
  gap: 6px;
  width: fit-content;
  max-width: min(78%, 520px);
  border: 1px solid #dbe3ec;
  border-radius: 8px;
  padding: 10px 12px;
  background: #ffffff;
}

.ticket-call-transcript-row.is-internal .ticket-call-transcript-line {
  border-color: rgba(22, 196, 208, 0.28);
  background: #e8fbfc;
}

.ticket-call-transcript-row.is-customer .ticket-call-transcript-line {
  border-color: #dbe3ec;
  background: #ffffff;
}

.ticket-call-transcript-line-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.ticket-call-transcript-line-meta strong {
  color: #243244;
  font-size: 13px;
}

.ticket-call-transcript-line-meta span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.ticket-call-transcript-line p {
  margin: 0;
  color: #172033;
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.ticket-call-transcript-loading,
.ticket-call-transcript-empty {
  min-height: 140px;
  display: grid;
  place-items: center;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  padding: 18px;
  background: #ffffff;
  color: #475569;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

.ticket-call-audio-modal {
  position: fixed;
  inset: 0;
  z-index: 8030;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.46);
}

.ticket-call-audio-modal.hidden {
  display: none;
}

body.ticket-call-audio-open {
  overflow: hidden;
}

.ticket-call-audio-panel {
  width: min(560px, 100%);
  max-height: min(620px, calc(100vh - 36px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid rgba(20, 184, 166, 0.2);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.3);
  overflow: hidden;
}

.ticket-call-audio-body {
  display: grid;
  gap: 14px;
  padding: 16px;
  overflow: auto;
  background: #f8fafc;
}

.ticket-call-audio-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

.ticket-call-audio-summary span {
  border: 1px solid #dbe3ec;
  border-radius: 999px;
  padding: 4px 8px;
  background: #ffffff;
}

.ticket-call-audio-player {
  display: grid;
  gap: 12px;
  border: 1px solid #dbe3ec;
  border-radius: 8px;
  padding: 16px;
  background: #ffffff;
}

.ticket-call-audio-player audio {
  width: 100%;
  min-height: 40px;
  accent-color: var(--cp-accent);
}

.ticket-call-audio-player p {
  margin: 0;
  color: #475569;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.ticket-call-audio-player a,
.ticket-call-audio-open-link {
  width: max-content;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(20, 184, 166, 0.28);
  border-radius: 6px;
  padding: 0 14px;
  background: #0f766e;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.ticket-call-audio-player a:hover,
.ticket-call-audio-open-link:hover {
  background: #115e59;
  color: #ffffff;
}

.ticket-call-audio-empty,
.ticket-call-audio-loading {
  min-height: 130px;
  display: grid;
  place-items: center;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  padding: 18px;
  background: #ffffff;
  color: #475569;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

.repair-detail-summary-card .repair-device-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.repair-detail-summary-card .repair-field-wide {
  grid-column: 1 / -1;
}

.repair-readonly-body {
  display: grid;
  gap: 8px;
}

.repair-fast-conditional.hidden,
#repair-fast-pin-value.hidden {
  display: none;
}

.repair-brief-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, auto);
  gap: 8px;
  align-items: stretch;
}

.repair-brief-hero > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #d5dee8;
  border-radius: 5px;
  background: #f8fafc;
}

.repair-brief-hero span,
.repair-detail-fact span,
.repair-problem-card span,
.repair-intake-note-card span {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.repair-brief-hero strong {
  color: #243244;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.repair-brief-hero em {
  color: #64748b;
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.repair-brief-hero-meta strong {
  font-family: "JetBrains Mono", monospace;
  font-size: 15px;
}

.repair-detail-fact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.repair-detail-fact {
  display: grid;
  gap: 4px;
  min-height: 56px;
  padding: 9px;
  border: 1px solid #d5dee8;
  border-radius: 5px;
  background: #ffffff;
}

.repair-detail-fact-wide {
  grid-column: 1 / -1;
}

.repair-detail-fact strong {
  color: #243244;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.repair-detail-fact-empty strong {
  color: #94a3b8;
  font-weight: 800;
}

.repair-operational-card {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid #d5dee8;
  border-radius: 5px;
  background: #f8fafc;
}

.repair-operational-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.repair-operational-card-head strong {
  color: #243244;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.repair-operational-card-head span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.repair-operational-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.repair-operational-field {
  display: grid;
  gap: 5px;
}

.repair-operational-field span {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.repair-operational-field input,
.repair-operational-field select {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  background: #ffffff;
  color: #243244;
  font-size: 13px;
  font-weight: 800;
}

.repair-problem-card,
.repair-intake-note-card {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid #d5dee8;
  border-radius: 5px;
  background: #f8fafc;
}

.repair-problem-card p,
.repair-intake-note-card p {
  margin: 0;
  color: #243244;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.repair-problem-note {
  color: #64748b !important;
  font-size: 13px !important;
}

.repair-detail-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, .85fr);
  gap: 14px;
  align-items: start;
}

.repair-detail-primary,
.repair-detail-secondary {
  min-width: 0;
}

.repair-detail-secondary {
  position: sticky;
  top: 12px;
}

.repair-section-gallery .repair-section-head {
  background: #334155;
}

.repair-section-gallery .repair-photos-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.repair-section-notes-history {
  border-color: #cbd5e1;
  border-radius: 6px;
}

.repair-section-notes-history .repair-section-head {
  background: #1f2937;
}

.repair-notes-context {
  margin-bottom: 10px;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.repair-note-composer {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid #d5dee8;
  border-radius: 5px;
  background: #f8fafc;
}

.repair-note-composer textarea,
.repair-note-rich-editor {
  width: 100%;
  min-height: 82px;
  resize: vertical;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 9px 10px;
  color: #243244;
  font-size: 13px;
  line-height: 1.4;
}

.repair-note-rich-editor {
  overflow: auto;
  background: #ffffff;
}

.repair-note-rich-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--content-placeholder, #6a7481);
  font-weight: 600;
  pointer-events: none;
}

.repair-note-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 4px;
  border: 1px solid #dbe3ec;
  border-radius: 5px;
  background: #ffffff;
}

.repair-note-toolbar button {
  min-width: 30px;
  min-height: 28px;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0 8px;
  background: transparent;
  color: #243244;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.repair-note-toolbar button:hover,
.repair-note-toolbar button:focus-visible {
  border-color: color-mix(in srgb, var(--cp-accent, #0797ca) 35%, #cbd5e1);
  background: var(--cp-accent-soft, #e6f4fa);
  outline: none;
}

.repair-note-dropzone {
  display: grid;
  gap: 2px;
  justify-items: center;
  border: 1px dashed #94a3b8;
  border-radius: 5px;
  padding: 10px 12px;
  background: #ffffff;
  color: #52627a;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-micro, 80ms) var(--ease-standard, ease),
              background-color var(--dur-micro, 80ms) var(--ease-standard, ease),
              color var(--dur-micro, 80ms) var(--ease-standard, ease);
}

.repair-note-dropzone small {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.repair-note-dropzone:hover,
.repair-note-dropzone:focus-visible,
.repair-note-composer-dragging .repair-note-dropzone {
  border-color: var(--cp-accent, #0797ca);
  background: var(--cp-accent-soft, #e6f4fa);
  color: #064e66;
  outline: none;
}

.repair-note-composer-dragging {
  border-color: var(--cp-accent, #0797ca) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-accent, #0797ca) 18%, transparent);
}

.repair-note-composer .repair-add-note-btn {
  justify-self: end;
  min-height: 34px;
  border: 0;
  border-radius: 4px;
  padding: 0 14px;
  background: #243244;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.repair-note-composer .repair-add-note-btn:hover {
  background: #1f2937;
}

.repair-notes-expand-btn {
  margin-left: auto;
  min-height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.repair-notes-expand-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.repair-note-composer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

.repair-note-file-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 0 12px;
  background: #ffffff;
  color: #243244;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.repair-note-file-label:hover {
  border-color: #94a3b8;
  background: #f8fafc;
}

.repair-note-important-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--cp-warning, #d97706) 42%, var(--border-1, #e2e8f0));
  border-radius: var(--radius-xs, 4px);
  padding: 0 var(--space-3, 12px);
  background: color-mix(in srgb, var(--cp-warning, #d97706) 8%, var(--surface, #ffffff));
  color: color-mix(in srgb, var(--cp-warning, #d97706) 58%, var(--content-1, #111827));
  font-size: var(--text-sm, 13px);
  font-weight: var(--weight-black, 900);
  cursor: pointer;
}

.repair-note-important-toggle:hover {
  border-color: var(--cp-warning, #d97706);
  background: color-mix(in srgb, var(--cp-warning, #d97706) 14%, var(--surface, #ffffff));
}

.repair-note-important-input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--cp-warning, #d97706);
}

.repair-note-customer-toggle {
  border-color: color-mix(in srgb, var(--cp-accent) 44%, var(--border-1));
  background: color-mix(in srgb, var(--cp-accent) 8%, var(--surface));
  color: color-mix(in srgb, var(--cp-accent) 72%, var(--content-1));
}

.repair-note-customer-toggle:hover {
  border-color: var(--cp-accent);
  background: color-mix(in srgb, var(--cp-accent) 14%, var(--surface));
}

.repair-note-customer-input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--cp-accent);
}

.repair-note-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.repair-note-file-list {
  flex: 1 1 180px;
  min-width: 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.repair-note-file-list.has-files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
}

.repair-note-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 190px;
  padding: 3px 4px 3px 3px;
  border: 1px solid #d5dee8;
  border-radius: 6px;
  background: #ffffff;
}

.repair-note-file-thumb {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 4px;
  background: #eef2f7;
}

.repair-note-file-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: #eef2f7;
  font-size: 16px;
}

.repair-note-file-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #243244;
  font-size: 12px;
  font-weight: 700;
}

.repair-note-file-remove {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #eef2f7;
  color: #475569;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.repair-note-file-remove:hover,
.repair-note-file-remove:focus-visible {
  background: color-mix(in srgb, var(--cp-danger, #dc2626) 16%, #eef2f7);
  color: var(--cp-danger, #dc2626);
  outline: none;
}

.repair-note-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.repair-note-attachment {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 220px;
  min-height: 38px;
  border: 1px solid #d5dee8;
  border-radius: 5px;
  padding: 5px 8px;
  background: #f8fafc;
  color: #243244;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.repair-note-attachment:hover {
  border-color: #94a3b8;
  background: #ffffff;
}

.repair-note-attachment span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.repair-note-attachment em {
  color: #64748b;
  font-style: normal;
  font-weight: 700;
}

.repair-note-attachment-image {
  width: 152px;
  align-items: stretch;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
}

.repair-note-attachment-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  object-fit: cover;
  background: #e2e8f0;
}

.repair-note-attachment-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 40px;
  min-height: 24px;
  border-radius: 4px;
  background: #e2e8f0;
  color: #243244;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.repair-note-body a {
  color: #1976d2;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.repair-note-body p {
  margin: 0 0 8px;
}

.repair-note-body p:last-child,
.repair-note-body ul:last-child,
.repair-note-body ol:last-child,
.repair-note-body blockquote:last-child,
.repair-note-body h4:last-child {
  margin-bottom: 0;
}

.repair-note-body h4 {
  margin: 0 0 8px;
  color: #1f2937;
  font-size: 17px;
  line-height: 1.28;
  font-weight: 900;
}

.repair-note-body ul,
.repair-note-body ol {
  margin: 0 0 8px 20px;
  padding: 0;
}

.repair-note-body li + li {
  margin-top: 3px;
}

.repair-note-body blockquote {
  margin: 0 0 8px;
  border-left: 3px solid var(--cp-accent, #0797ca);
  padding: 5px 0 5px 10px;
  color: #52627a;
  background: var(--cp-accent-soft, #e6f4fa);
}

.ticket-note-text-large {
  font-size: 17px;
  font-weight: 900;
}

.repair-note-source {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: #e8f1fb;
  color: #285a88;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.repair-note-card-status-event {
  border-color: #bfd6ec;
  background: #f7fbff;
}

.repair-notes-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.56);
}

.repair-notes-modal-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(980px, 96vw);
  max-height: 88vh;
  overflow: hidden;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.32);
}

.repair-status-note-modal-card {
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(900px, 96vw);
}

.repair-notes-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  background: #1f2937;
  color: #ffffff;
}

.repair-notes-modal-head span {
  display: block;
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.repair-notes-modal-head h3 {
  margin: 2px 0 0;
  color: #ffffff;
  font-size: 20px;
  font-weight: 900;
}

.repair-notes-modal-head p {
  margin: 5px 0 0;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 700;
}

.repair-notes-modal-close {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 4px;
  background: transparent;
  color: #ffffff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.repair-notes-modal-body {
  overflow: auto;
  padding: 16px;
  background: #f4f6fa;
}

.repair-notes-modal-body .repair-note-composer {
  background: #ffffff;
}

.repair-status-note-context,
.repair-status-note-required,
.repair-status-note-error,
.repair-status-note-history-head {
  font-size: 13px;
  font-weight: 800;
  color: #52627a;
}

.repair-status-note-context {
  margin-bottom: 10px;
}

.repair-status-note-required {
  margin-top: 9px;
  color: #b42318;
}

.repair-status-note-error {
  margin-top: 9px;
  color: #b42318;
}

.repair-status-note-history {
  margin-top: 14px;
}

.repair-status-note-history-head {
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0;
}

.repair-status-note-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid #d8e1ec;
  background: #ffffff;
}

.repair-notes-modal-body .repair-notes-list {
  position: relative;
  gap: var(--space-3, 12px);
  padding-left: var(--space-8, 32px);
}

.repair-notes-modal-body .repair-notes-list::before {
  content: "";
  position: absolute;
  top: var(--space-3, 12px);
  bottom: var(--space-3, 12px);
  left: 10px;
  width: 2px;
  border-radius: var(--radius-pill, 9999px);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--cp-accent) 55%, var(--border-1)) 0%,
    var(--border-1) 100%
  );
}

.repair-notes-empty-compact {
  min-height: 92px;
  padding: 18px 12px;
}

.repair-notes-list-wrap .repair-notes-list {
  position: relative;
  gap: var(--space-3, 12px);
  padding-left: var(--space-8, 32px);
}

.repair-notes-list-wrap .repair-notes-list::before {
  content: "";
  position: absolute;
  top: var(--space-3, 12px);
  bottom: var(--space-3, 12px);
  left: 10px;
  width: 2px;
  border-radius: var(--radius-pill, 9999px);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--cp-accent) 55%, var(--border-1)) 0%,
    var(--border-1) 100%
  );
}

.repair-notes-list-wrap .repair-note-card,
.repair-notes-modal-body .repair-note-card {
  display: grid;
  gap: var(--space-2, 8px);
  position: relative;
  border-color: color-mix(in srgb, var(--cp-accent) 48%, var(--border-1));
  border-radius: var(--radius-md, 8px);
  padding: var(--space-3, 12px);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--cp-accent) 13%, var(--surface)) 0%,
    color-mix(in srgb, var(--cp-accent) 7%, var(--surface)) 100%
  );
  box-shadow: var(--shadow-sm);
}

.repair-notes-list-wrap .repair-note-card::before,
.repair-notes-modal-body .repair-note-card::before {
  content: none;
}

.repair-note-marker {
  position: absolute;
  z-index: 1;
  top: var(--space-3, 12px);
  left: -34px;
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border: 2px solid color-mix(in srgb, var(--cp-accent) 65%, var(--border-2));
  border-radius: var(--radius-circle, 50%);
  background: var(--surface);
  color: var(--cp-accent);
  box-shadow: 0 0 0 var(--space-1, 4px) var(--surface-2);
}

.repair-notes-modal-body .repair-note-marker {
  box-shadow: 0 0 0 var(--space-1, 4px) var(--surface-3);
}

.repair-note-marker svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.repair-note-marker-important {
  border-color: color-mix(in srgb, var(--cp-warning) 72%, var(--border-2));
  color: color-mix(in srgb, var(--cp-warning) 82%, var(--content-1));
}

.repair-note-marker-system {
  border-color: var(--border-2);
  background: var(--surface-3);
  color: var(--content-3);
}

.repair-notes-list-wrap .repair-note-card-important,
.repair-notes-modal-body .repair-note-card-important,
.repair-note-card-important {
  border-color: color-mix(in srgb, var(--cp-warning, #d97706) 58%, var(--border-1, #e2e8f0));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--cp-warning, #d97706) 14%, var(--surface, #ffffff)) 0%,
    color-mix(in srgb, var(--cp-warning, #d97706) 6%, var(--surface, #ffffff)) 100%
  );
  box-shadow: 0 8px 20px color-mix(in srgb, var(--cp-warning, #d97706) 12%, transparent);
}

.repair-note-card-important .repair-note-type,
.repair-note-important-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  border: 1px solid color-mix(in srgb, var(--cp-warning, #d97706) 55%, transparent);
  border-radius: var(--radius-pill, 9999px);
  padding: 0 var(--space-2, 8px);
  background: color-mix(in srgb, var(--cp-warning, #d97706) 18%, var(--surface, #ffffff));
  color: color-mix(in srgb, var(--cp-warning, #d97706) 58%, var(--content-1, #111827));
  font-size: 11px;
  font-weight: var(--weight-black, 900);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.repair-note-card-customer {
  border-color: color-mix(in srgb, var(--cp-accent) 48%, var(--border-1));
}

.repair-note-card-customer .repair-note-type {
  color: color-mix(in srgb, var(--cp-accent) 76%, var(--content-1));
}

.repair-note-customer-preview {
  margin-top: var(--space-3);
  border-left: 3px solid var(--cp-accent);
  padding: var(--space-3);
  background: color-mix(in srgb, var(--cp-accent) 6%, var(--surface));
}

.repair-note-customer-preview strong {
  color: var(--cp-accent-strong, var(--cp-accent));
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.repair-note-customer-preview p {
  margin: var(--space-1) 0 0;
  color: var(--content-2);
}

.ticket-note-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border-subtle, #d7dde7);
  border-radius: var(--radius-full, 999px);
  background: var(--surface-subtle, #f4f6f9);
  white-space: nowrap;
}

.ticket-note-view-toggle button {
  min-height: 30px;
  padding: 0 var(--space-3, 12px);
  border: 0;
  border-radius: var(--radius-full, 999px);
  background: transparent;
  color: var(--content-muted, #667085);
  font: inherit;
  font-size: var(--text-xs, 12px);
  font-weight: 700;
  cursor: pointer;
}

.ticket-note-view-toggle button.active {
  background: var(--cp-accent, #0797ca);
  color: var(--content-on-accent, #fff);
}

.ticket-note-view-toggle button:focus-visible {
  outline: 2px solid var(--cp-accent, #0797ca);
  outline-offset: 2px;
}

.repair-notes-modal-head-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  margin-left: auto;
}

@media (max-width: 720px) {
  .ticket-note-view-toggle button {
    min-height: 36px;
    padding-inline: var(--space-2, 8px);
  }

  .repair-notes-modal-head-actions {
    align-items: flex-end;
    flex-direction: column-reverse;
    gap: var(--space-2, 8px);
  }
}

.repair-ticket-contact-editor {
  display: grid;
  gap: var(--space-3);
  grid-column: 1 / -1;
  border: 1px solid color-mix(in srgb, var(--cp-accent) 38%, var(--border-1));
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  background: color-mix(in srgb, var(--cp-accent) 5%, var(--surface));
}

.repair-ticket-contact-editor .repair-ticket-contact-card {
  margin: 0;
}

.repair-notes-list-wrap .repair-note-head strong,
.repair-notes-modal-body .repair-note-head strong {
  color: #243244;
}

.repair-notes-list-wrap .repair-note-card-call,
.repair-notes-modal-body .repair-note-card-call {
  border-color: color-mix(in srgb, var(--cp-accent) 42%, var(--border-1));
  background: color-mix(in srgb, var(--cp-accent) 9%, var(--surface));
}

.repair-notes-list-wrap .repair-note-card-chat-thread,
.repair-notes-modal-body .repair-note-card-chat-thread {
  border-color: color-mix(in srgb, var(--cp-warning) 52%, var(--border-1));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--cp-warning) 13%, var(--surface)) 0%,
    color-mix(in srgb, var(--cp-warning) 6%, var(--surface)) 100%
  );
}

.repair-notes-list-wrap :is(.repair-note-card-customer-call, .repair-note-card-customer-message),
.repair-notes-modal-body :is(.repair-note-card-customer-call, .repair-note-card-customer-message) {
  border-color: color-mix(in srgb, var(--cp-success) 52%, var(--border-1));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--cp-success) 12%, var(--surface)) 0%,
    color-mix(in srgb, var(--cp-success) 5%, var(--surface)) 100%
  );
}

.repair-note-card-chat-thread .repair-note-type {
  border-color: color-mix(in srgb, var(--cp-warning) 45%, var(--border-1));
  background: color-mix(in srgb, var(--cp-warning) 14%, var(--surface));
  color: color-mix(in srgb, var(--cp-warning) 68%, var(--content-1));
}

:is(.repair-note-card-customer-call, .repair-note-card-customer-message) .repair-note-type {
  border-color: color-mix(in srgb, var(--cp-success) 45%, var(--border-1));
  background: color-mix(in srgb, var(--cp-success) 12%, var(--surface));
  color: color-mix(in srgb, var(--cp-success) 78%, var(--content-1));
}

.ticket-note-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.ticket-note-filters-label {
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}

.ticket-note-filter {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-pill);
  padding: 0 var(--space-3);
  background: var(--surface);
  color: var(--content-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  cursor: pointer;
}

.ticket-note-filter span {
  color: var(--content-3);
  font-size: 10px;
}

.ticket-note-filter:hover,
.ticket-note-filter.is-active {
  border-color: var(--cp-accent);
  background: var(--cp-accent-soft);
  color: var(--cp-accent-hover);
}

.ticket-note-filter.is-active::before {
  content: "✓";
  font-size: 10px;
}

.repair-customer-contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
}

.repair-customer-profile-panel,
.repair-ticket-contact-panel {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  min-width: 0;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--surface);
}

.repair-ticket-contact-panel {
  border-color: color-mix(in srgb, var(--cp-accent) 38%, var(--border-2));
  background: color-mix(in srgb, var(--cp-accent) 5%, var(--surface));
}

.repair-customer-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.repair-customer-panel-head > div {
  display: grid;
  gap: var(--space-1);
}

.repair-customer-panel-head span {
  color: var(--content-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}

.repair-customer-panel-head strong {
  color: var(--content-1);
  font-size: var(--text-lg);
}

.repair-customer-panel-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.repair-ticket-contact-actions {
  justify-content: flex-start;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-1);
}

.repair-customer-head-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.repair-section-head .repair-customer-head-actions button {
  min-height: 30px;
  border: 1px solid rgb(255 255 255 / 42%);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-3);
  background: rgb(255 255 255 / 14%);
  color: #ffffff;
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
  cursor: pointer;
}

.repair-section-head .repair-customer-head-actions .repair-customer-clear-btn {
  width: 30px;
  padding: 0;
}

.repair-section-head .repair-customer-head-actions button:hover {
  border-color: rgb(255 255 255 / 75%);
  background: rgb(255 255 255 / 24%);
}

@media (max-width: 900px) {
  .repair-customer-contact-layout,
  .repair-customer-panel-facts {
    grid-template-columns: 1fr;
  }
}

.repair-notes-list-wrap .repair-note-card-status-event,
.repair-notes-modal-body .repair-note-card-status-event {
  gap: var(--space-1, 4px);
  border-color: var(--border-1);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--surface);
  box-shadow: none;
}

.repair-notes-list-wrap .repair-note-head,
.repair-notes-modal-body .repair-note-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
}

.repair-note-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  min-height: 26px;
  border: 1px solid #dbe3ec;
  border-radius: 999px;
  padding: 0 10px;
  background: #f8fafc;
  color: #52627a;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.repair-note-card-call .repair-note-type {
  border-color: rgba(22, 196, 208, 0.32);
  background: #e8fbfc;
  color: #0f766e;
}

.repair-note-card-call.repair-note-card-team-call .repair-note-type {
  border-color: color-mix(in srgb, var(--cp-accent) 42%, var(--border-1));
  background: var(--cp-accent-soft);
  color: var(--cp-accent-hover);
}

.repair-note-card-call.repair-note-card-customer-call .repair-note-type {
  border-color: color-mix(in srgb, var(--cp-success) 45%, var(--border-1));
  background: color-mix(in srgb, var(--cp-success) 12%, var(--surface));
  color: color-mix(in srgb, var(--cp-success) 78%, var(--content-1));
}

.repair-note-card-status-event .repair-note-type {
  min-width: 52px;
  min-height: 22px;
  border-color: var(--border-1);
  background: var(--surface-3);
  color: var(--content-3);
  font-size: 10px;
}

.repair-note-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.repair-note-meta strong {
  font-size: 14px;
  font-weight: 900;
}

.repair-notes-list-wrap .repair-note-date,
.repair-notes-modal-body .repair-note-date {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.repair-notes-list-wrap .repair-note-actions,
.repair-notes-modal-body .repair-note-actions {
  margin-left: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.repair-notes-list-wrap .repair-note-actions button,
.repair-notes-modal-body .repair-note-actions button {
  min-height: 28px;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0 8px;
  background: #f1f5f9;
  color: #52627a;
  font-size: 12px;
  font-weight: 900;
}

.repair-notes-list-wrap .repair-note-actions button:hover:not(:disabled),
.repair-notes-modal-body .repair-note-actions button:hover:not(:disabled) {
  border-color: #cbd5e1;
  background: #ffffff;
  color: #243244;
}

.repair-note-actions .ticket-note-delete-btn {
  border-color: color-mix(in srgb, var(--cp-danger) 34%, var(--border-1));
  background: color-mix(in srgb, var(--cp-danger-soft) 82%, var(--surface));
  color: var(--cp-danger) !important;
}

.repair-note-actions .ticket-note-delete-btn:hover:not(:disabled) {
  border-color: var(--cp-danger);
  background: color-mix(in srgb, var(--cp-danger) 14%, var(--surface));
  color: color-mix(in srgb, var(--cp-danger) 82%, var(--content-1)) !important;
}

.repair-notes-list-wrap .repair-note-actions .ticket-call-transcript-btn,
.repair-notes-modal-body .repair-note-actions .ticket-call-transcript-btn {
  border-color: color-mix(in srgb, var(--cp-accent) 32%, var(--border-1));
  background: var(--cp-accent-soft);
  color: var(--cp-accent-hover);
}

.repair-notes-list-wrap .repair-note-actions .ticket-call-audio-btn,
.repair-notes-modal-body .repair-note-actions .ticket-call-audio-btn {
  border-color: color-mix(in srgb, var(--cp-success) 34%, var(--border-1));
  background: color-mix(in srgb, var(--cp-success) 9%, var(--surface));
  color: color-mix(in srgb, var(--cp-success) 82%, var(--content-1));
}

.repair-notes-list-wrap .repair-note-actions .ticket-call-transcript-btn:hover:not(:disabled),
.repair-notes-modal-body .repair-note-actions .ticket-call-transcript-btn:hover:not(:disabled) {
  border-color: var(--cp-accent);
  background: color-mix(in srgb, var(--cp-accent-soft) 72%, var(--surface));
  color: var(--cp-accent-hover);
}

.repair-notes-list-wrap .repair-note-actions .ticket-call-audio-btn:hover:not(:disabled),
.repair-notes-modal-body .repair-note-actions .ticket-call-audio-btn:hover:not(:disabled) {
  border-color: var(--cp-success);
  background: color-mix(in srgb, var(--cp-success) 14%, var(--surface));
  color: color-mix(in srgb, var(--cp-success) 82%, var(--content-1));
}

.repair-notes-list-wrap .repair-note-body,
.repair-notes-modal-body .repair-note-body {
  color: #243244;
  font-size: 14px;
  line-height: 1.5;
}

.repair-notes-list-wrap .repair-note-card-status-event .repair-note-body,
.repair-notes-modal-body .repair-note-card-status-event .repair-note-body {
  color: var(--content-2);
  font-size: var(--text-xs, 12px);
  line-height: 1.4;
}

.repair-notes-list-wrap .repair-note-card-activity-event,
.repair-notes-modal-body .repair-note-card-activity-event {
  border-left: 2px solid var(--border-2);
  background: var(--surface-2);
}

.repair-note-activity-title {
  color: var(--content-2);
  font-size: var(--text-xs, 12px);
  font-weight: var(--weight-bold, 700);
  line-height: 1.35;
}

.repair-notes-list-wrap .repair-note-card-status-event .repair-note-meta strong,
.repair-notes-modal-body .repair-note-card-status-event .repair-note-meta strong,
.repair-notes-list-wrap .repair-note-card-status-event .repair-note-date,
.repair-notes-modal-body .repair-note-card-status-event .repair-note-date {
  color: var(--content-3);
  font-size: 11px;
  font-weight: var(--weight-semibold, 600);
}

.repair-notes-count {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-left: 8px;
  border-radius: 999px;
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
}

.repair-section-notes-history .repair-section-body {
  background: #f8fafc;
}

.repair-section-notes-history .repair-notes-context,
.repair-notes-modal-body .repair-notes-context {
  margin: 0 0 12px;
  border: 1px solid #dbe3ec;
  border-radius: 7px;
  padding: 10px 12px;
  background: #ffffff;
  color: #52627a;
  font-size: 13px;
}

.repair-section-notes-history .repair-note-composer,
.repair-notes-modal-body .repair-note-composer {
  gap: 10px;
  margin-bottom: 14px;
  border-color: #d7e1ec;
  border-radius: 7px;
  padding: 12px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.repair-note-composer-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.repair-note-composer-head strong {
  color: #243244;
  font-size: 14px;
  font-weight: 900;
}

.repair-note-composer-head span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.repair-section-notes-history .repair-note-composer textarea,
.repair-section-notes-history .repair-note-rich-editor,
.repair-notes-modal-body .repair-note-composer textarea,
.repair-notes-modal-body .repair-note-rich-editor {
  min-height: 96px;
  border-color: #cbd5e1;
  border-radius: 6px;
  padding: 11px 12px;
  font-size: 14px;
}

.repair-section-notes-history .repair-note-composer textarea:focus,
.repair-section-notes-history .repair-note-rich-editor:focus,
.repair-notes-modal-body .repair-note-composer textarea:focus,
.repair-notes-modal-body .repair-note-rich-editor:focus {
  outline: 2px solid rgba(25, 118, 210, 0.18);
  border-color: #1976d2;
}

.repair-section-notes-history .repair-note-file-label,
.repair-notes-modal-body .repair-note-file-label {
  border-radius: 5px;
  letter-spacing: 0;
  text-transform: none;
}

.repair-section-notes-history .repair-add-note-btn,
.repair-notes-modal-body .repair-add-note-btn {
  min-height: 38px;
  border-radius: 5px;
  padding: 0 16px;
}

@media (max-width: 720px) {
  .repair-section-notes-history .repair-note-head,
  .repair-notes-modal-body .repair-note-head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .repair-section-notes-history .repair-note-actions,
  .repair-notes-modal-body .repair-note-actions {
    justify-content: flex-start;
  }

  .repair-note-composer-actions {
    align-items: stretch;
  }

  .repair-note-composer-actions .repair-add-note-btn,
  .repair-note-composer-actions .repair-note-file-label,
  .repair-note-composer-actions .repair-note-important-toggle {
    width: 100%;
  }
}

.repair-ticket-shell-v2 .repair-ticket-sidebar {
  top: 12px;
}

.repair-ticket-shell-v2 .repair-nav-head {
  background: #023047;
}

.repair-ticket-shell-v2 .repair-nav-link:nth-child(-n+3) {
  font-weight: 900;
}

.repair-ticket-shell-v2 .repair-ticket-action-bar {
  margin-top: 16px;
}

.repair-ticket-page[class*="show-only-"] .repair-detail-board,
.repair-ticket-page[class*="show-only-"] .repair-detail-left-column,
.repair-ticket-page[class*="show-only-"] .repair-detail-right-column,
.repair-ticket-page[class*="show-only-"] .repair-detail-workbench,
.repair-ticket-page[class*="show-only-"] .repair-detail-primary,
.repair-ticket-page[class*="show-only-"] .repair-detail-secondary {
  display: block;
}

.repair-ticket-page[class*="show-only-"] .repair-detail-command-grid { display: none; }
.repair-ticket-page.show-only-customer .repair-detail-command-grid { display: block; }
.repair-ticket-page.show-only-customer .repair-detail-status-card { display: none; }

.repair-ticket-page[class*="show-only-"] .repair-detail-secondary {
  position: static;
}

@media (max-width: 1180px) {
  .repair-ticket-shell-v2 {
    grid-template-columns: 1fr;
  }

  .repair-detail-board,
  .repair-detail-command-grid,
  .repair-detail-workbench {
    grid-template-columns: 1fr;
  }

  .repair-detail-secondary,
  .repair-ticket-shell-v2 .repair-ticket-sidebar {
    position: static;
  }
}

@media (max-width: 720px) {
  .repair-ticket-page {
    padding: 8px 10px 84px;
  }

  .repair-ticket-shell-v2 .repair-ticket-header,
  .repair-assignment-alert,
  .repair-customer-chip {
    align-items: stretch;
    flex-direction: column;
  }

  .repair-ticket-shell-v2 .repair-header-field,
  .repair-ticket-shell-v2 .repair-header-field select,
  .repair-assignment-focus-btn {
    width: 100%;
  }

  .repair-detail-status-card .repair-status-bar {
    min-height: 68px;
  }

  .repair-brief-hero,
  .repair-detail-fact-grid {
    grid-template-columns: 1fr;
  }

  .repair-detail-summary-card .repair-device-grid {
    grid-template-columns: 1fr;
  }

  .repair-section-gallery .repair-photos-grid {
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  }

  .repair-notes-modal-overlay {
    align-items: stretch;
    padding: 8px;
  }

  .repair-notes-modal-card {
    width: 100%;
    max-height: none;
  }

  .repair-note-composer-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .repair-note-file-label,
  .repair-note-important-toggle,
  .repair-note-composer .repair-add-note-btn {
    width: 100%;
  }

  .repair-note-file-list {
    width: 100%;
    flex-basis: auto;
  }
}

/* Repair detail v3 - aligned with the Trade-In operational layout. */
.repair-ticket-shell-v3 {
  --ticket-view-accent: #fb8500;
  --ticket-view-accent-soft: #ffd0a3;
  --ticket-view-chip-bg: #fff3e0;
  --ticket-view-chip-ink: #703600;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 280px);
  gap: 16px;
  align-items: start;
}

.repair-ticket-shell-v3 .repair-ticket-header {
  align-items: center;
  margin-bottom: 12px;
  border-radius: 6px;
  padding: 16px 18px;
  background: #023047;
}

.repair-ticket-shell-v3 .repair-ticket-title {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.repair-ticket-shell-v3 .repair-ticket-title > span:last-child {
  color: #ffffff;
  font-size: 23px;
  font-weight: 900;
}

.repair-ticket-shell-v3 .repair-ticket-assigned-technician {
  min-width: 0;
}

.repair-ticket-shell-v3 .repair-ticket-unassigned {
  border-color: #fca5a5;
  background: #3a1f2a;
}

.sale-ticket-header,
.trade-ticket-header,
.refurbish-ticket-header,
.repair-ticket-shell-v3 .repair-ticket-header {
  border-top: 4px solid var(--ticket-view-accent);
  box-shadow: inset 4px 0 0 var(--ticket-view-accent);
}

.trade-ticket-kicker,
.repair-ticket-shell-v3 .repair-ticket-title-kicker {
  color: var(--ticket-view-accent-soft);
}

.sale-ticket-title strong::before,
.sale-ticket-header > span::before,
.trade-ticket-title strong::before,
.refurb-ticket-title > span::before,
.repair-ticket-shell-v3 .repair-ticket-title > span:last-child::before {
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
  padding: 2px 7px;
  border: 1px solid var(--ticket-view-accent-soft);
  border-radius: 999px;
  background: var(--ticket-view-chip-bg);
  color: var(--ticket-view-chip-ink);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0;
  vertical-align: middle;
  transform: translateY(-1px);
}

.sale-ticket-title strong::before,
.sale-ticket-header > span::before { content: "SALE"; }
.trade-ticket-title strong::before { content: "TRADE-IN"; }
.refurb-ticket-title > span::before { content: "REFURBISH"; }
.repair-ticket-shell-v3 .repair-ticket-title > span:last-child::before { content: "REPAIR"; }

.repair-ticket-shell-v3 .repair-ticket-status-row {
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 0;
}

.repair-ticket-shell-v3 .repair-status-bar {
  min-height: 48px;
  border: 0;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 900;
  cursor: default;
}

.repair-ticket-shell-v3 .repair-location-strip {
  gap: 14px;
  min-height: 48px;
  padding: 12px 16px;
  font-size: 13px;
}

.repair-ticket-shell-v3 .repair-location-strip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.repair-ticket-shell-v3 .repair-status-bar svg,
.repair-ticket-shell-v3 .repair-location-strip svg,
.repair-ticket-shell-v3 .repair-section-head svg,
.repair-ticket-shell-v3 .repair-nav-link svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.repair-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(180px, .75fr) minmax(180px, .75fr);
  gap: 10px;
  align-items: stretch;
  margin: 14px 0;
}

.repair-hero-card {
  display: grid;
  gap: 4px;
  min-width: 0;
  min-height: 98px;
  padding: 13px 14px;
  border: 1px solid #d5dee8;
  border-radius: 6px;
  background: #ffffff;
}

.repair-hero-device {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.repair-hero-card span {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.repair-hero-card strong {
  color: #243244;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.repair-technician-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 8px);
  min-width: 0;
}

.repair-technician-row > strong {
  min-width: 0;
  flex: 1 1 auto;
}

.repair-call-technician-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1, 4px);
  min-height: 28px;
  border: 1px solid color-mix(in srgb, var(--cp-accent, #0797ca) 72%, transparent);
  border-radius: var(--radius-pill, 9999px);
  padding: 0 var(--space-2, 8px);
  background: var(--cp-accent, #0797ca);
  color: var(--cp-accent-content, #ffffff);
  font-size: 11px;
  font-weight: var(--weight-black, 900);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-micro, 80ms) var(--ease-standard, ease),
              transform var(--dur-micro, 80ms) var(--ease-standard, ease);
}

.repair-call-technician-btn:hover {
  background: var(--cp-accent-hover, #087eaa);
  transform: translateY(-1px);
}

.repair-overview-facts .repair-hero-card .repair-call-technician-btn span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: 0;
  text-transform: none;
}

.repair-hero-card em {
  color: #64748b;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.25;
}

.repair-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 14px;
  align-items: start;
}

.repair-ticket-shell-v3 .repair-section {
  align-self: start;
  margin-bottom: 14px;
  border-radius: 6px;
}

.sale-ticket-page .sale-ticket-shell .sale-section,
.trade-ticket-page .trade-ticket-shell .trade-section,
.repair-ticket-shell-v3 .repair-section {
  border-color: #d5dee8;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
}

.sale-ticket-page .sale-ticket-shell .sale-section-head,
.trade-ticket-page .trade-ticket-shell .trade-section-head,
.repair-ticket-shell-v3 .repair-section-head,
.repair-ticket-shell-v3 .repair-section-gallery .repair-section-head,
.repair-ticket-shell-v3 .repair-section-notes-history .repair-section-head {
  min-height: 46px;
  border-bottom: 0;
  background: linear-gradient(90deg, var(--ticket-view-accent), color-mix(in srgb, var(--ticket-view-accent) 82%, #243244));
  color: #ffffff;
}

.sale-ticket-page .sale-ticket-shell .sale-section-head h3,
.trade-ticket-page .trade-ticket-shell .trade-section-head h3,
.repair-ticket-shell-v3 .repair-section-head h3,
.repair-ticket-shell-v3 .repair-section-gallery .repair-section-head h3,
.repair-ticket-shell-v3 .repair-section-notes-history .repair-section-head h3 {
  color: #ffffff;
  font-weight: 900;
}

.sale-ticket-page .sale-ticket-shell .sale-section-head svg,
.trade-ticket-page .trade-ticket-shell .trade-section-head svg,
.repair-ticket-shell-v3 .repair-section-head svg,
.repair-ticket-shell-v3 .repair-section-gallery .repair-section-head svg,
.repair-ticket-shell-v3 .repair-section-notes-history .repair-section-head svg {
  stroke: currentColor;
}

.sale-ticket-page .sale-section-head .btn-secondary,
.sale-ticket-page .sale-edit-customer-btn,
.trade-ticket-page .trade-section-head .trade-small-btn,
.repair-ticket-shell-v3 .repair-photos-refresh-btn,
.repair-ticket-shell-v3 .repair-notes-expand-btn {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.sale-ticket-page .sale-section-head .btn-secondary:hover,
.sale-ticket-page .sale-edit-customer-btn:hover,
.trade-ticket-page .trade-section-head .trade-small-btn:hover,
.repair-ticket-shell-v3 .repair-photos-refresh-btn:hover,
.repair-ticket-shell-v3 .repair-notes-expand-btn:hover {
  border-color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.24);
}

.sale-ticket-page .sale-customer-grid .sale-field,
.repair-ticket-shell-v3 .repair-customer-detail-grid .repair-detail-fact {
  display: grid;
  gap: 4px;
  min-height: 56px;
  padding: 9px;
  border: 1px solid #d5dee8;
  border-radius: 5px;
  background: #ffffff;
}

.repair-customer-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.repair-customer-actions-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 9px;
  border: 1px solid #d5dee8;
  border-radius: 5px;
  background: #f8fafc;
  overflow: visible;
}

.repair-customer-actions-row .repair-customer-info {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sale-history-list {
  display: grid;
  gap: 10px;
}

.sale-history-entry {
  display: grid;
  gap: 3px;
  border-left: 3px solid var(--ticket-view-accent);
  padding-left: 10px;
}

.sale-history-entry span {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.sale-history-entry strong {
  color: #243244;
  font-size: 13px;
}

.sale-history-entry p {
  margin: 0;
  color: #475569;
  font-size: 13px;
}

.repair-ticket-shell-v3 .repair-photos-refresh-btn,
.repair-ticket-shell-v3 .repair-notes-expand-btn {
  min-height: 30px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 0 10px;
  background: #ffffff;
  color: #243244;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.repair-ticket-shell-v3 .repair-photos-refresh-btn:hover,
.repair-ticket-shell-v3 .repair-notes-expand-btn:hover {
  border-color: #94a3b8;
  background: #f8fafc;
}

.repair-ticket-shell-v3 .repair-section-head .repair-photos-refresh-btn,
.repair-ticket-shell-v3 .repair-section-head .repair-notes-expand-btn {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.repair-ticket-shell-v3 .repair-section-head .repair-photos-refresh-btn:hover,
.repair-ticket-shell-v3 .repair-section-head .repair-notes-expand-btn:hover {
  border-color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.24);
}

.repair-ticket-shell-v3 .repair-photos-refresh-btn:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.repair-ticket-shell-v3 .repair-customer-chip,
.repair-ticket-shell-v3 .repair-note-card,
.repair-ticket-shell-v3 .repair-note-composer {
  border-radius: 5px;
}

.repair-ticket-shell-v3 .repair-section-gallery .repair-photos-grid {
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
}

.repair-ticket-shell-v3 .repair-ticket-sidebar {
  top: calc(54px + 12px);
}

.repair-ticket-shell-v3 .repair-nav-box {
  border-radius: 6px;
}

.repair-ticket-shell-v3 .repair-nav-head {
  display: block;
  padding: 9px 12px;
  background: #023047;
  font-weight: 900;
  letter-spacing: 0;
}

.repair-ticket-shell-v3 .repair-nav-body {
  display: grid;
  gap: 2px;
  padding: 6px;
}

.repair-ticket-shell-v3 .repair-nav-link {
  gap: 8px;
  border-radius: 4px;
  padding: 9px 10px;
  color: #243244;
  font-weight: 800;
}

.repair-ticket-shell-v3 .repair-nav-badge {
  margin-left: auto;
  border-radius: 999px;
  background: #dbe3ec;
  font-weight: 900;
}

.repair-ticket-shell-v3 .repair-show-all-link {
  font-weight: 900;
}

.repair-ticket-shell-v3 + .repair-ticket-action-bar .repair-action-btn {
  min-height: 34px;
  border-radius: 4px;
  padding: 0 14px;
  font-weight: 900;
}

.repair-ticket-page[class*="show-only-"] .repair-detail-grid {
  display: block;
}

@media (max-width: 1180px) {
  .repair-ticket-shell-v3,
  .repair-detail-grid {
    grid-template-columns: 1fr;
  }

  .repair-ticket-shell-v3 .repair-ticket-sidebar {
    position: static;
  }

  .repair-ticket-shell-v3 .repair-ticket-status-row {
    grid-template-columns: 1fr;
  }

  .repair-ticket-shell-v3 .repair-location-strip {
    justify-content: space-between;
    white-space: normal;
  }

  .repair-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .repair-hero-device {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .repair-overview {
    grid-template-columns: 1fr;
  }

  .repair-hero-device {
    grid-column: auto;
  }
}

@media (max-width: 640px) {
  .repair-ticket-shell-v3 .repair-ticket-header,
  .repair-ticket-shell-v3 .repair-ticket-assigned-technician,
  .repair-overview {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .repair-ticket-shell-v3 .repair-ticket-header {
    flex-direction: column;
  }

  .repair-hero-device {
    grid-column: auto;
  }
}

/* ============================================================ */
/* INTAKE CHIP GROUP — chip-based single-tap inputs that         */
/*   replace the 15+ <select> dropdowns used in RepairQ. Used by */
/*   the Intake quiz (Unit 4) inside .repair-ticket-page.        */
/* ============================================================ */
.intake-chip-group { display: flex; flex-wrap: wrap; gap: 6px; }
.intake-chip {
  background: #f4f6f8;
  border: 1px solid #d2d8de;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  color: #46556a;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.intake-chip:hover { background: #e8edf1; }
.intake-chip[aria-pressed="true"] {
  background: #1ea6da; border-color: #1ea6da; color: #fff;
}
.intake-chip[aria-pressed="true"]:hover { background: #1893c0; }
.intake-field-label { font-size: 13px; color: #46556a; margin-bottom: 4px; }
.intake-textarea-wrap { position: relative; }
.intake-mic-btn { position: absolute; right: 8px; top: 8px; background: transparent; border: 0; cursor: pointer; }

/* eBay listing draft desk */
.ebay-page {
  min-height: calc(100vh - 72px);
  background: #eef2f5;
  color: #17212f;
}

.ebay-workspace {
  max-width: 1820px;
  margin: 0 auto;
  padding: 18px 18px 28px;
}

.ebay-head,
.ebay-toolbar,
.ebay-queue,
.ebay-editor,
.ebay-review {
  background: #fff;
  border: 1px solid #d7dee6;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.ebay-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  margin-bottom: 12px;
}

.ebay-title-block h1,
.ebay-editor-head h2,
.ebay-panel-head h2,
.ebay-side-section h2,
.ebay-subpanel-head h3 {
  margin: 0;
  letter-spacing: 0;
}

.ebay-title-block h1 {
  font-size: 26px;
  line-height: 1.15;
}

.ebay-kicker {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.ebay-head-actions,
.ebay-editor-actions,
.ebay-status-strip,
.ebay-filter-tabs,
.ebay-payload-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ebay-live-chip {
  border: 1px solid #9cc9b5;
  border-radius: 999px;
  color: #166534;
  background: #ecfdf3;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 9px;
}

.ebay-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 420px) 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px;
  margin-bottom: 12px;
}

.ebay-search input,
.ebay-field input,
.ebay-field select,
.ebay-field textarea,
.ebay-specific-row input,
.ebay-warning-row input {
  width: 100%;
  border: 1px solid #cdd6df;
  border-radius: 6px;
  background: #fff;
  color: #17212f;
  font: inherit;
  font-size: 13px;
  padding: 8px 10px;
}

.ebay-field textarea {
  resize: vertical;
  min-height: 74px;
}

.ebay-filter-tabs {
  justify-content: flex-end;
}

.ebay-filter-tabs button,
.ebay-payload-tabs button {
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #f8fafc;
  color: #334155;
  cursor: pointer;
  font-weight: 700;
  padding: 7px 11px;
}

.ebay-filter-tabs button.active,
.ebay-payload-tabs button.active {
  border-color: #2563eb;
  background: #dbeafe;
  color: #1d4ed8;
}

.ebay-filter-tabs span {
  margin-left: 6px;
  color: #64748b;
}

.ebay-grid {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(520px, 1fr) minmax(320px, 390px);
  gap: 12px;
  align-items: start;
}

.ebay-queue,
.ebay-editor,
.ebay-review {
  min-height: 360px;
}

.ebay-queue,
.ebay-review {
  position: sticky;
  top: 78px;
  max-height: calc(100vh - 96px);
  overflow: auto;
}

.ebay-panel-head,
.ebay-subpanel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.ebay-panel-head {
  border-bottom: 1px solid #e2e8f0;
  padding: 12px 14px;
}

.ebay-panel-head h2,
.ebay-side-section h2 {
  font-size: 15px;
}

.ebay-panel-head span {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.ebay-candidate-head {
  border-top: 1px solid #e2e8f0;
}

.ebay-draft-list,
.ebay-candidate-list {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.ebay-draft-row {
  display: grid;
  gap: 6px;
  width: 100%;
  border: 1px solid #dbe3eb;
  border-radius: 8px;
  background: #fff;
  color: inherit;
  cursor: pointer;
  padding: 10px;
  text-align: left;
}

.ebay-draft-row:hover,
.ebay-draft-row.selected {
  border-color: #2563eb;
  box-shadow: inset 3px 0 0 #2563eb;
}

.ebay-row-top,
.ebay-row-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ebay-row-title {
  color: #1e293b;
  font-size: 13px;
  line-height: 1.3;
}

.ebay-row-meta {
  color: #64748b;
  flex-wrap: wrap;
  font-size: 11px;
}

.ebay-candidate-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  border: 1px solid #dbe3eb;
  border-radius: 8px;
  padding: 10px;
}

.ebay-candidate-row div {
  display: grid;
  gap: 2px;
}

.ebay-candidate-row span,
.ebay-candidate-row small {
  color: #64748b;
}

.ebay-editor {
  padding: 16px;
}

.ebay-editor-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}

.ebay-editor-head h2 {
  font-size: 20px;
}

.ebay-status-strip {
  margin: 8px 0 12px;
}

.ebay-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #f8fafc;
  color: #334155;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  text-transform: uppercase;
}

.ebay-pill-approved,
.ebay-pill-ready,
.ebay-pill-staged,
.ebay-pill-published,
.ebay-pill-sold {
  border-color: #86efac;
  background: #dcfce7;
  color: #166534;
}

a.ebay-pill {
  text-decoration: none;
}

.ebay-pill-needs_review,
.ebay-pill-ai_unavailable,
.ebay-pill-waiting_for_inventory,
.ebay-pill-needs_approval,
.ebay-pill-needs_photos,
.ebay-pill-missing_required_fields {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #9a3412;
}

.ebay-pill-error {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

.ebay-alert {
  border-radius: 8px;
  margin: 10px 0;
  padding: 10px 12px;
  font-size: 13px;
}

.ebay-alert-warning {
  border: 1px solid #facc15;
  background: #fefce8;
  color: #713f12;
}

.ebay-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.ebay-field {
  display: grid;
  gap: 5px;
}

.ebay-field span {
  display: flex;
  justify-content: space-between;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.ebay-field em {
  color: #64748b;
  font-style: normal;
  font-weight: 700;
}

.ebay-field-wide {
  grid-column: 1 / -1;
}

.ebay-editor-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 14px 0;
}

.ebay-policy-panel {
  margin-top: 14px;
}

.ebay-policy-summary {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  color: #475569;
}

.ebay-policy-summary small {
  line-height: 1.4;
}

.ebay-subpanel,
.ebay-side-section {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px;
}

.ebay-subpanel-head {
  margin-bottom: 10px;
}

.ebay-subpanel-head h3 {
  font-size: 14px;
}

.ebay-specifics-list,
.ebay-warnings-list {
  display: grid;
  gap: 8px;
}

.ebay-specific-row,
.ebay-warning-row {
  display: grid;
  grid-template-columns: minmax(90px, 0.8fr) minmax(120px, 1fr) 32px;
  gap: 8px;
  align-items: center;
}

.ebay-warning-row {
  grid-template-columns: 1fr 32px;
}

.ebay-icon-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #f8fafc;
  color: #475569;
  cursor: pointer;
  font-weight: 800;
}

.ebay-review {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.ebay-side-section {
  background: #fff;
}

.ebay-readiness-list {
  display: grid;
  gap: 8px;
}

.ebay-check {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 8px;
  align-items: center;
  font-size: 13px;
}

.ebay-check span {
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  padding: 4px 6px;
  text-align: center;
}

.ebay-check.ok span {
  background: #dcfce7;
  color: #166534;
}

.ebay-check.missing span {
  background: #fee2e2;
  color: #991b1b;
}

.ebay-check.pending span {
  background: #e0f2fe;
  color: #075985;
}

.ebay-live-chip-warning {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
}

.ebay-connect-section {
  border-color: #bfdbfe;
}

.ebay-connect-body {
  display: grid;
  gap: 6px;
  color: #334155;
  font-size: 13px;
}

.ebay-connect-body small {
  color: #64748b;
  overflow-wrap: anywhere;
}

.ebay-location-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.ebay-location-form label {
  display: grid;
  gap: 4px;
}

.ebay-location-form label span {
  color: #475569;
  font-size: 11px;
  font-weight: 800;
}

.ebay-location-form .wide {
  grid-column: 1 / -1;
}

.ebay-location-note {
  color: #64748b;
  font-size: 12px;
}

.ebay-publish-note {
  color: #64748b;
  font-size: 12px;
  margin-top: 10px;
}

.ebay-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.ebay-photo-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border: 1px solid #dbe3eb;
  border-radius: 8px;
  background: #f8fafc;
  color: #475569;
  overflow: hidden;
  text-decoration: none;
}

.ebay-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ebay-photo-video span {
  font-size: 11px;
  font-weight: 900;
}

.ebay-payload-tabs {
  margin-bottom: 8px;
}

.ebay-payload {
  max-height: 320px;
  overflow: auto;
  border: 1px solid #dbe3eb;
  border-radius: 8px;
  background: #111827;
  color: #e5e7eb;
  font-size: 11px;
  line-height: 1.45;
  margin: 0;
  padding: 10px;
  white-space: pre-wrap;
}

.ebay-empty,
.ebay-editor-empty {
  color: #64748b;
  font-size: 13px;
  padding: 16px;
  text-align: center;
}

.ebay-editor-empty h2 {
  color: #17212f;
  margin: 0 0 6px;
}

.ebay-page .btn-small {
  min-height: 30px;
  padding: 5px 10px;
  font-size: 12px;
}

/* eBay marketplace desk refresh */
.ebay-page {
  background: #f4f7f9;
}

.ebay-workspace {
  max-width: 1880px;
  padding: 16px 18px 30px;
}

.ebay-head {
  border: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, #86b817 0%, #73a40f 58%, #5f8f0c 100%);
  color: #fff;
  min-height: 88px;
  padding: 16px 18px;
  box-shadow: 0 12px 28px rgba(52, 87, 7, 0.18);
}

.ebay-title-block {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 250px;
}

.ebay-logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 48px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(19, 40, 4, 0.18);
}

.ebay-logo-mark img {
  width: 78px;
  height: auto;
  display: block;
}

.ebay-head .ebay-kicker {
  color: rgba(255, 255, 255, 0.82);
}

.ebay-head h1 {
  color: #fff;
  font-size: 24px;
}

.ebay-head-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 10px;
  flex: 1;
  max-width: 520px;
}

.ebay-head-metric {
  display: grid;
  gap: 2px;
  min-height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
  padding: 8px 10px;
}

.ebay-head-metric span {
  color: rgba(255, 255, 255, 0.82);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.ebay-head-metric strong {
  color: #fff;
  font-size: 22px;
  line-height: 1;
}

.ebay-head-actions .btn-secondary {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.ebay-head-actions .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.26);
}

.ebay-live-chip {
  border-color: rgba(255, 255, 255, 0.42);
  background: #ffffff;
  color: #2f5f00;
}

.ebay-live-chip-warning {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
}

.ebay-grid {
  grid-template-columns: minmax(320px, 390px) minmax(560px, 1fr) minmax(320px, 380px);
  gap: 14px;
}

.ebay-dashboard-grid,
.ebay-detail-grid {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.ebay-dashboard-grid {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
  align-items: start;
}

.ebay-dashboard-main,
.ebay-dashboard-side {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.ebay-detail-grid {
  grid-template-columns: minmax(560px, 1fr) minmax(320px, 390px);
  align-items: start;
}

.ebay-workspace-dashboard,
.ebay-workspace-detail {
  display: grid;
  gap: 0;
}

.ebay-queue-dashboard {
  min-height: 520px;
  max-height: none;
  overflow: visible;
  position: static;
}

.ebay-draft-list-dashboard {
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}

.ebay-dashboard-side {
  position: sticky;
  top: 76px;
}

.ebay-metrics-panel,
.ebay-candidate-panel {
  padding: 12px;
}

.ebay-metric-stack {
  display: grid;
  gap: 8px;
}

.ebay-metric-stack div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fbfdff;
  padding: 9px 10px;
}

.ebay-metric-stack span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.ebay-metric-stack strong {
  color: #17212f;
  font-size: 20px;
  line-height: 1;
}

.ebay-head,
.ebay-queue,
.ebay-editor,
.ebay-review,
.ebay-published-desk {
  border-radius: 8px;
}

.ebay-queue,
.ebay-editor,
.ebay-review,
.ebay-published-desk {
  border-color: #dde5ed;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.ebay-queue-tools {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid #e4ebf2;
}

.ebay-search input {
  min-height: 38px;
  border-color: #d6e0ea;
  background: #fbfdff;
}

.ebay-filter-tabs {
  justify-content: flex-start;
  gap: 6px;
}

.ebay-filter-tabs button,
.ebay-payload-tabs button {
  border-color: #d8e1ea;
  background: #fff;
  color: #405166;
  min-height: 32px;
  padding: 6px 9px;
}

.ebay-filter-tabs button.active,
.ebay-payload-tabs button.active {
  border-color: #86b817;
  background: #f0f8dc;
  color: #3f6d00;
}

.ebay-panel-head {
  padding: 13px 14px 10px;
}

.ebay-panel-eyebrow {
  display: block;
  color: #7b8794;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ebay-draft-list,
.ebay-candidate-list {
  gap: 7px;
  padding: 10px;
}

.ebay-draft-row,
.ebay-candidate-row,
.ebay-published-row {
  border-color: #dfe7ef;
  background: #fbfdff;
  transition: border-color 0.14s, box-shadow 0.14s, transform 0.14s, background 0.14s;
}

.ebay-draft-row:hover,
.ebay-draft-row.selected {
  border-color: #86b817;
  background: #fff;
  box-shadow: inset 3px 0 0 #86b817, 0 8px 18px rgba(15, 23, 42, 0.07);
}

.ebay-draft-row:active,
.ebay-published-row:active {
  transform: translateY(1px);
}

.ebay-row-title {
  font-weight: 700;
}

.ebay-candidate-row {
  padding: 9px 10px;
}

.ebay-editor {
  padding: 18px;
}

.ebay-editor-head {
  border-bottom: 1px solid #e4ebf2;
  margin: -2px 0 16px;
  padding-bottom: 14px;
}

.ebay-editor-head h2 {
  font-size: 22px;
}

.ebay-form-grid {
  gap: 11px;
}

.ebay-field input,
.ebay-field select,
.ebay-field textarea,
.ebay-specific-row input,
.ebay-warning-row input {
  border-color: #d6e0ea;
  background: #fbfdff;
  min-height: 36px;
}

.ebay-field textarea {
  min-height: 90px;
}

.ebay-policy-panel,
.ebay-subpanel,
.ebay-side-section {
  border-color: #e2e8f0;
  background: #fff;
}

.ebay-policy-panel {
  background: #fbfdff;
}

.ebay-policy-summary {
  border-top: 1px solid #e4ebf2;
  padding-top: 10px;
}

.ebay-review {
  gap: 10px;
  padding: 10px;
}

.ebay-side-section {
  padding: 12px;
}

.ebay-drawer {
  padding: 0;
  overflow: hidden;
}

.ebay-drawer > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  padding: 12px;
}

.ebay-drawer > summary::-webkit-details-marker {
  display: none;
}

.ebay-drawer > summary::after {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #eef4f8;
  color: #475569;
  font-weight: 900;
}

.ebay-drawer[open] > summary::after {
  content: "-";
}

.ebay-drawer summary span {
  display: grid;
  gap: 2px;
}

.ebay-drawer summary strong {
  color: #17212f;
  font-size: 14px;
}

.ebay-drawer summary small {
  color: #64748b;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.ebay-drawer-body {
  border-top: 1px solid #e4ebf2;
  padding: 12px;
}

.ebay-connect-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.ebay-payload-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.ebay-payload {
  max-height: 260px;
  border: 0;
  background: #0f172a;
}

.ebay-readiness-list {
  gap: 7px;
}

.ebay-check {
  grid-template-columns: 48px 1fr;
  font-size: 12px;
}

.ebay-photo-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.ebay-photo-thumb {
  border-radius: 6px;
}

.ebay-published-desk {
  margin-top: 14px;
  padding: 14px;
  background: #fff;
  border: 1px solid #dde5ed;
}

.ebay-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.ebay-section-head h2 {
  margin: 0;
  font-size: 18px;
}

.ebay-published-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.ebay-published-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  border: 1px solid #dfe7ef;
  border-radius: 8px;
  color: inherit;
  cursor: pointer;
  padding: 11px 12px;
  text-align: left;
}

.ebay-published-row:hover {
  border-color: #86b817;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.07);
}

.ebay-published-row span:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ebay-published-row strong {
  overflow: hidden;
  color: #1e293b;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ebay-published-row small {
  overflow: hidden;
  color: #64748b;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ebay-empty-compact {
  padding: 18px 8px;
}

.ebay-performance-panel,
.ebay-balance-panel {
  display: grid;
  gap: 10px;
}

.ebay-stat-grid,
.ebay-balance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ebay-stat-grid div,
.ebay-balance-grid div {
  display: grid;
  gap: 4px;
  min-height: 58px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fbfdff;
  padding: 9px 10px;
}

.ebay-stat-grid span,
.ebay-balance-grid span,
.ebay-sync-line span,
.ebay-balance-note {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.ebay-stat-grid strong,
.ebay-balance-grid strong {
  overflow-wrap: anywhere;
  color: #17212f;
  font-size: 16px;
  line-height: 1.15;
}

.ebay-sync-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid #e4ebf2;
  padding-top: 8px;
}

.ebay-sync-line strong {
  color: #17212f;
  font-size: 12px;
  text-align: right;
}

.ebay-signal-list {
  display: grid;
  gap: 6px;
}

.ebay-signal-list span {
  border: 1px solid #f7d27a;
  border-radius: 8px;
  background: #fff8e5;
  color: #805300;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  padding: 8px 9px;
}

.ebay-balance-note {
  border-top: 1px solid #e4ebf2;
  padding-top: 8px;
  line-height: 1.35;
}

@media (max-width: 1300px) {
  .ebay-head {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .ebay-head-metrics {
    order: 3;
    max-width: none;
    width: 100%;
  }

  .ebay-grid {
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  }

  .ebay-dashboard-grid,
  .ebay-detail-grid {
    grid-template-columns: 1fr;
  }

  .ebay-dashboard-side {
    position: static;
  }

  .ebay-review {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    position: static;
    max-height: none;
  }

  .ebay-published-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .ebay-toolbar,
  .ebay-grid,
  .ebay-editor-split,
  .ebay-form-grid,
  .ebay-review {
    grid-template-columns: 1fr;
  }

  .ebay-queue,
  .ebay-review {
    position: static;
    max-height: none;
  }

  .ebay-filter-tabs {
    justify-content: flex-start;
  }

  .ebay-editor-head,
  .ebay-head {
    align-items: stretch;
    flex-direction: column;
  }

  .ebay-title-block {
    min-width: 0;
  }

  .ebay-head-metrics,
  .ebay-published-list,
  .ebay-stat-grid,
  .ebay-balance-grid {
    grid-template-columns: 1fr;
  }

  .ebay-section-head {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Post-create customer ticket delivery prompt */
.ticket-delivery-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
}

.ticket-delivery-card {
  width: min(100%, 420px);
  padding: 22px 24px;
  border-radius: 16px;
  background: var(--surface, #fff);
  color: inherit;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
}

.ticket-delivery-card h3 {
  margin: 0 0 4px;
  font-size: 17px;
}

.ticket-delivery-card p {
  margin: 0 0 14px;
  color: var(--muted, #64748b);
  font-size: 13px;
}

.ticket-delivery-actions {
  display: grid;
  gap: 8px;
}

.ticket-delivery-action {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 42px;
  padding: 9px 13px;
  border: 1px solid var(--border, #d7dee6);
  border-radius: 10px;
  background: var(--surface, #fff);
  color: inherit;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}

.ticket-delivery-action svg {
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.ticket-delivery-action:hover:not(:disabled) {
  border-color: var(--accent, #0797ca);
  color: var(--accent, #0797ca);
}

.ticket-delivery-action:disabled {
  opacity: 0.6;
  cursor: default;
}

.ticket-delivery-close {
  width: 100%;
  margin-top: 12px;
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  background: var(--accent, #0797ca);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

/* Linked Support context uses the same compact actions as ticket contacts. */
[data-ticket-support-links] {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
}
[data-ticket-support-links]:empty { display: none; }
[data-ticket-support-links] small {
  color: var(--content-2);
  font-size: var(--text-xs);
}
.ticket-support-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--cp-accent);
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
}
.repair-note-card[data-note-id^="support:"] .repair-note-body {
  overflow-wrap: anywhere;
}

.ticket-support-link svg { width: var(--text-base); height: var(--text-base); flex-shrink: 0; }
.ticket-support-link:hover { background: var(--surface-hover); }
.ticket-support-link:focus-visible { box-shadow: var(--focus-ring); }

/* Direction is explicit within the existing green customer-message category. */
.ticket-message-card .ticket-message-direction {
  gap: var(--space-1);
  text-align: center;
}
.ticket-message-direction svg {
  width: var(--text-base);
  height: var(--text-base);
  flex-shrink: 0;
}
.ticket-message-card .ticket-message-route,
.ticket-message-card .ticket-message-to {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-1);
  min-width: 0;
  overflow-wrap: anywhere;
}
.ticket-message-card .ticket-message-sender-role,
.ticket-message-card .ticket-message-recipient,
.ticket-message-card .ticket-message-channel {
  color: var(--content-2);
  font-size: var(--text-xs);
}
.ticket-message-card .ticket-message-marker {
  color: color-mix(in srgb, var(--cp-success) 78%, var(--content-1));
  border-color: color-mix(in srgb, var(--cp-success) 52%, var(--border-1));
}
/* Closed tickets use a different timeline container but share this category. */
.post-sale-timeline .ticket-message-card {
  border-color: color-mix(in srgb, var(--cp-success) 52%, var(--border-1));
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--cp-success) 12%, var(--surface)) 0%,
    color-mix(in srgb, var(--cp-success) 5%, var(--surface)) 100%);
}
@media (max-width: 640px) {
  .repair-note-card.ticket-message-card .repair-note-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--space-2);
  }
  .ticket-message-card .ticket-message-direction { justify-self: start; }
  .repair-note-card.ticket-message-card .repair-note-actions { justify-content: flex-start; }
}

/* Compact ticket composer: existing note semantics, quieter controls. */
.ticket-note-history-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-left: auto;
  min-width: 0;
}
.ticket-note-history-actions [data-ticket-support-links] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.repair-section-head .ticket-note-history-actions :is(.ticket-support-link, .ticket-note-options-trigger) {
  background: color-mix(in srgb, var(--content-inv) 14%, transparent);
  color: var(--content-inv);
  border-color: color-mix(in srgb, var(--content-inv) 42%, transparent);
  border-radius: var(--radius-xs);
  white-space: nowrap;
}
.repair-section-head .ticket-note-history-actions :is(.ticket-support-link, .ticket-note-options-trigger):hover {
  background: color-mix(in srgb, var(--content-inv) 24%, transparent);
  border-color: color-mix(in srgb, var(--content-inv) 75%, transparent);
}
.ticket-note-history-actions .ticket-note-options-trigger {
  min-width: var(--space-10);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
}
.ticket-note-popup[popover] {
  position: fixed;
  inset: auto;
  margin: 0;
  padding: var(--space-2);
  max-width: calc(100vw - var(--space-4));
  max-height: calc(100dvh - var(--space-4));
  overflow: auto;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--content-1);
  box-shadow: var(--shadow-lg);
}
.ticket-note-popup[popover]:not(:popover-open) { display: none; }
.ticket-note-popup::backdrop { background: transparent; }
.ticket-note-options-popup:popover-open {
  display: grid;
  gap: var(--space-2);
}
.ticket-note-options-popup .ticket-note-view-toggle { margin: 0; }
.ticket-note-full-history {
  border: 0;
  border-top: 1px solid var(--border-1);
  padding: var(--space-3) var(--space-2);
  background: var(--surface);
  color: var(--content-1);
  text-align: left;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  cursor: pointer;
}
.ticket-note-full-history:hover { background: var(--surface-hover); }
.repair-note-composer.ticket-note-composer-compact {
  position: relative;
  gap: var(--space-3);
  padding: var(--space-3);
  box-shadow: none;
}
.ticket-note-composer-compact .repair-note-composer-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.ticket-note-composer-compact .repair-note-file-label {
  gap: var(--space-2);
}
.ticket-note-composer-compact .repair-note-file-label:focus-within {
  outline: 2px solid var(--cp-accent);
  outline-offset: 2px;
}
.ticket-note-composer-compact .repair-note-file-list:not(.has-files) { display: none; }
.ticket-note-composer-compact .repair-note-file-list.has-files {
  order: 1;
  flex-basis: 100%;
}
.ticket-note-composer-compact .ticket-note-format-trigger {
  margin-left: auto;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--content-2);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  cursor: pointer;
}
.ticket-note-composer-compact .ticket-note-format-trigger:hover,
.ticket-note-composer-compact .ticket-note-format-trigger[aria-expanded="true"] {
  background: var(--surface-hover);
  color: var(--content-1);
}
.ticket-note-composer-compact .repair-add-note-btn { margin-left: 0; }
.ticket-note-format-popup:popover-open {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.ticket-note-popup button:focus-visible,
.ticket-note-format-trigger:focus-visible {
  outline: 2px solid var(--cp-accent);
  outline-offset: 2px;
}
@media (max-width: 720px) {
  .ticket-note-composer-compact .repair-note-composer-actions > .repair-note-file-label,
  .ticket-note-composer-compact .repair-note-composer-actions > .repair-note-important-toggle,
  .ticket-note-composer-compact .repair-note-composer-actions > .repair-add-note-btn {
    width: auto;
    min-height: var(--space-10);
  }
  .ticket-note-history-actions { flex-wrap: nowrap; }
  .ticket-note-history-actions [data-ticket-support-links] { flex-wrap: wrap; }
}
.repair-section-head .ticket-note-history-actions [data-ticket-support-links] small {
  color: inherit;
}
.repair-section-head .ticket-note-history-actions .ticket-support-link[data-ticket-support-open] svg {
  color: inherit;
  stroke: currentColor;
}
.repair-section-head.ticket-note-section-head { flex-wrap: wrap; }
.ticket-note-section-head .repair-section-summary { display: none; }
.ticket-note-section-head .sale-section-head-actions,
.ticket-note-section-head .trade-section-head-actions,
.ticket-note-section-head .ticket-note-history-actions {
  max-width: 100%;
  min-width: 0;
}
.ticket-note-section-head [data-ticket-support-links] { min-width: 0; }
.ticket-note-section-head [data-ticket-support-links] small { white-space: normal; }

/* File drag feedback covers the composer without intercepting its existing drop target. */
.ticket-note-drop-feedback {
  display: none;
  position: absolute;
  inset: var(--space-2);
  z-index: var(--z-base);
  pointer-events: none;
  align-content: center;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 2px dashed var(--cp-accent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--cp-accent-soft) 94%, transparent);
  color: var(--content-1);
  font-size: var(--text-sm);
  text-align: center;
}
.ticket-note-drop-feedback svg { color: var(--cp-accent); }
.repair-note-composer-dragging > .ticket-note-drop-feedback {
  display: grid;
  animation: ticket-note-drop-in var(--dur-base) var(--ease-standard) both;
}
@keyframes ticket-note-drop-in {
  from { opacity: 0; transform: scale(.98); }
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .repair-note-composer-dragging > .ticket-note-drop-feedback { animation: none; }
}

/* Numeric values are entered explicitly; browser steppers can change money counts by a full denomination. */
input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ==========================================================================
   Time clock status (assets/js/app-clock-status.js)
   - Header avatar ring: .worker-pill[data-clock-state]
   - "Time clock" shortcut at the top of the account menu
   - "Clock in first" blocking prompt (above the register startup gate)
   ========================================================================== */
.worker-clock-status-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.top-actions .worker-pill {
  position: relative;
}

/* Rings are drawn with box-shadow / outline: they never take layout space and
   are not clipped by the avatar's own overflow. */
.worker-pill[data-clock-state] .worker-avatar {
  transition: box-shadow var(--dur-slow) var(--ease-standard);
}

.worker-pill[data-clock-state="working"] .worker-avatar {
  box-shadow: 0 0 0 2px var(--cp-success),
              0 0 0 4px color-mix(in srgb, var(--cp-success) 26%, transparent);
  animation: cp-clock-working-pulse 2.6s var(--ease-in-out) infinite;
}

.worker-pill[data-clock-state="on_break"] .worker-avatar {
  box-shadow: 0 0 0 2px var(--cp-warning),
              0 0 0 4px color-mix(in srgb, var(--cp-warning) 22%, transparent);
}

.worker-pill[data-clock-state="on_meal"] .worker-avatar {
  outline: 2px dashed color-mix(in srgb, var(--cp-warning) 82%, var(--cp-danger));
  outline-offset: 1px;
}

@keyframes cp-clock-working-pulse {
  0%, 100% {
    box-shadow: 0 0 0 2px var(--cp-success),
                0 0 0 3px color-mix(in srgb, var(--cp-success) 30%, transparent);
  }
  50% {
    box-shadow: 0 0 0 2px var(--cp-success),
                0 0 0 6px color-mix(in srgb, var(--cp-success) 0%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .worker-pill[data-clock-state="working"] .worker-avatar {
    animation: none;
  }
}

/* Account menu shortcut */
.account-menu .account-menu-item.account-time-clock-item {
  min-height: 48px;
  gap: var(--space-2);
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

.account-time-clock-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-circle);
  background: color-mix(in srgb, currentColor 35%, transparent);
}

.account-time-clock-item[data-clock-state="working"] .account-time-clock-dot {
  background: var(--cp-success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-success) 25%, transparent);
}

.account-time-clock-item[data-clock-state="on_break"] .account-time-clock-dot,
.account-time-clock-item[data-clock-state="on_meal"] .account-time-clock-dot {
  background: var(--cp-warning);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-warning) 25%, transparent);
}

.account-time-clock-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
  line-height: 1.25;
}

.account-time-clock-title {
  font-weight: inherit;
}

.account-time-clock-status {
  font-size: var(--text-xs);
  font-weight: 500;
  color: color-mix(in srgb, currentColor 68%, transparent);
  white-space: nowrap;
}

.account-time-clock-item[data-clock-state="working"] .account-time-clock-status {
  color: color-mix(in srgb, var(--cp-success) 70%, currentColor);
}

/* "Clock in first" prompt: above the register startup gate (an
   .inv-form-overlay at 700) and every regular modal, below toasts and the
   idle lock. */
#clock-in-first-modal.clock-in-first-overlay {
  z-index: calc(var(--z-modal) + 50);
  background: color-mix(in srgb, #000 58%, transparent);
  backdrop-filter: blur(2px);
}

#clock-in-first-modal .clock-in-first-panel {
  width: min(480px, calc(100vw - 2 * var(--space-4)));
}

/* The shared .inv-form-title keeps a light-theme ink; follow the theme tokens
   so the title stays readable on the dark panel too. */
#clock-in-first-modal .inv-form-title {
  color: var(--content-1);
}

#clock-in-first-modal .clock-in-first-message {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
  line-height: 1.45;
}

#clock-in-first-modal .clock-in-first-late {
  margin: 0 0 var(--space-3);
  font-weight: 700;
  color: var(--cp-warning);
}

#clock-in-first-modal .clock-in-first-late.hidden {
  display: none;
}

#clock-in-first-modal .clock-in-first-who {
  margin-bottom: var(--space-3);
}

#clock-in-first-modal .inv-form-footer {
  flex-wrap: wrap;
}

#clock-in-first-modal #clock-in-first-btn[aria-busy="true"] {
  cursor: progress;
}

/* Support Center replies and Dialpad calls projected into the ticket timeline. */
.ticket-message-card .ticket-message-delivery.is-failed {
  color: var(--cp-danger);
  font-weight: 700;
}
.ticket-call-card .ticket-message-marker,
.ticket-call-card .ticket-message-direction {
  color: color-mix(in srgb, var(--cp-accent) 82%, var(--content-1));
}
.ticket-call-card .ticket-message-marker {
  border-color: color-mix(in srgb, var(--cp-accent) 52%, var(--border-1));
}
.ticket-call-card.is-missed .ticket-message-marker,
.ticket-call-card.is-missed .ticket-message-direction {
  color: var(--cp-danger);
}
.ticket-call-card.is-missed .ticket-message-marker {
  border-color: color-mix(in srgb, var(--cp-danger) 48%, var(--border-1));
}
.ticket-call-card .repair-note-body {
  color: var(--content-2);
}
.ticket-call-card .ticket-call-summary {
  margin: var(--space-2) 0 0;
  color: var(--content-1);
  white-space: pre-wrap;
}
.ticket-call-transcript-recap {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--content-1);
}
.ticket-call-transcript-recap p { margin: 0; }

/* Same phone number, several tickets: read projected messages and calls with care. */
.ticket-support-shared-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-1) var(--space-2);
  align-items: start;
  width: 100%;
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--cp-warning) 45%, var(--border-1));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--cp-warning) 10%, var(--surface));
  color: var(--content-1);
  font-size: var(--text-xs);
  line-height: 1.45;
}
.ticket-support-shared-notice > svg {
  width: var(--text-base);
  height: var(--text-base);
  margin-top: 1px;
  color: color-mix(in srgb, var(--cp-warning) 70%, var(--content-1));
}
.ticket-support-shared-notice .ticket-support-shared-list {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
}
.ticket-support-shared-ticket {
  color: var(--cp-accent);
  text-decoration: none;
  font-weight: 600;
}
.ticket-support-shared-ticket:not(.is-open) { color: var(--content-2); font-weight: 500; }
.ticket-support-shared-ticket:hover { text-decoration: underline; }
.ticket-message-card .ticket-message-shared {
  color: color-mix(in srgb, var(--cp-warning) 70%, var(--content-1));
  font-weight: 600;
}

/* Automatic notes (written by the system, not a teammate). */
.repair-note-card-system-event .repair-note-type {
  border-color: color-mix(in srgb, var(--cp-accent) 40%, var(--border-1));
  background: color-mix(in srgb, var(--cp-accent) 10%, var(--surface));
  color: color-mix(in srgb, var(--cp-accent) 80%, var(--content-1));
}
.repair-notes-list-wrap .repair-note-card-system-event,
.repair-notes-modal-body .repair-note-card-system-event {
  border-color: color-mix(in srgb, var(--cp-accent) 30%, var(--border-1));
  background: color-mix(in srgb, var(--cp-accent) 4%, var(--surface));
}