/* Appraisals Show Page Styles */

.action-bar {
  background-color: var(--steel-900) !important;
  border-bottom: 1px solid var(--steel-700);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  padding-top: 1.5rem !important;
}

.action-bar-below-nav {
  top: 68px;
  z-index: 1020;
}

@media (max-width: 575.98px) {
  .action-bar-below-nav {
    top: 50px;
  }
}

/* Show page action bar buttons */
.show-action-bar-buttons {
  justify-content: flex-start;
  justify-content: safe center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--steel-600) transparent;
}

.show-action-bar-buttons .btn {
  white-space: nowrap;
  text-align: center;
}

@media (max-width: 575.98px) {
  .show-action-bar-buttons {
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-bottom: 4px;
  }
}

.action-bar-buttons {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--steel-600) transparent;
  white-space: nowrap;
  justify-content: flex-start;
  justify-content: safe center;
}

.action-bar-buttons .btn {
  flex-shrink: 0;
}

@media (max-width: 767.98px) {
  .action-bar-buttons {
    justify-content: flex-start;
    padding-bottom: 4px;
  }
}

/* ─── Appraisal context strip ─────────────────────────────────────
   Act number and the VŠH from the last saved data, on their own row
   under the section buttons so they stay visible while editing. The
   buttons keep their horizontal scroller (10 damage tabs); the strip is
   a sibling row that never competes with them for width. */
.action-bar-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.appraisal-context {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  justify-content: flex-start;
  justify-content: safe center;
  font-size: 0.875rem;
  line-height: 1.25;
  white-space: nowrap;
  color: var(--text-color);
}

.appraisal-context-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.appraisal-context-label {
  color: var(--text-muted);
}

.appraisal-context-value {
  color: var(--accent-color);
}

.appraisal-context-hint {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: 0.75rem;
  line-height: 1;
  cursor: help;
}

.appraisal-context-hint:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* The extra row makes the fixed bar taller than the `mt-6` the section
   pages were laid out for; push the page content down so the bar does
   not cover the first field. */
.action-bar-with-context + .container {
  margin-top: 7.5rem !important;
}

@media (max-width: 767.98px) {
  .action-bar-row {
    gap: var(--space-xs);
  }

  .appraisal-context {
    justify-content: flex-start;
    font-size: 0.8125rem;
  }
}

.detail-section {
  background-color: var(--steel-850);
  border: 1px solid var(--steel-700);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}

.detail-row {
  display: flex;
  margin-bottom: 0.5rem;
}

.detail-row:last-child {
  margin-bottom: 0;
}

.detail-label {
  flex: 0 0 250px;
  font-weight: 600;
  color: var(--steel-300);
  padding-right: 1rem;
}

.detail-value {
  flex: 1;
  color: var(--steel-100);
}

@media (max-width: 575.98px) {
  .detail-section {
    padding: 1rem;
  }

  .detail-row {
    flex-direction: column;
    margin-bottom: 0.75rem;
  }

  .detail-label {
    flex: none;
    padding-right: 0;
    margin-bottom: 0.125rem;
  }
}

.equipment-content {
  max-height: 200px;
  min-height: 50px;
  overflow-y: auto;
  resize: vertical;
  color: var(--steel-200);
  line-height: 1.6;
}

.chart-wrapper {
  background-color: white;
  border-radius: var(--radius-md);
  display: inline-block;
}

.chart-image {
  width: 375px;
  max-width: 100%;
  height: auto;
}

.gallery-image {
  max-width: 200px;
  max-height: 200px;
  object-fit: contain;
  background-color: white;
  border-radius: var(--radius-md);
}

.image-item {
  width: 200px;
  height: 200px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-base);
}

.image-item:hover {
  transform: scale(1.02);
}

.image-actions {
  align-items: stretch;
}

.image-actions > form {
  display: flex;
  align-items: stretch;
}

.image-actions > form > .btn {
  height: 100%;
}

.drag-handle {
  cursor: grab;
  color: var(--steel-400);
  font-size: 1.25rem;
  transition: color var(--transition-base);
}

.drag-handle:hover {
  color: var(--steel-100);
}

.sortable-ghost {
  opacity: 0.3;
}

.sortable-chosen {
  cursor: grabbing;
}

.sortable-drag {
  opacity: 0.9;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.table-row-discarded {
  opacity: 0.55;
}

/* Sortable table headers */
th .sort-link {
  color: inherit;
  text-decoration: none;
}

th .sort-link:hover {
  text-decoration: underline;
}

th .sort-link .bi {
  font-size: 0.75em;
  white-space: nowrap;
}

.appraisals-page-header {
  gap: 1.5rem;
}

.appraisals-header-main {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex: 1 1 auto;
  min-width: 0;
}

.appraisals-header-search {
  flex: 1 1 28rem;
  min-width: 0;
}

.appraisals-search-form {
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  .appraisals-header-main {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .appraisals-header-search {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
  }
}

/* Hide native browser clear button on search inputs (we use a custom one) */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* Fix button_to form breaking btn-group border-radius */
.table .btn-group form .btn {
  border-radius: 0;
}

/* Tooltips — light background, dark text */
.tooltip .tooltip-inner {
  background-color: #ffffff;
  color: #212529;
  border: 1px solid #dee2e6;
  max-width: 400px;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: #dee2e6;
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: #dee2e6;
}

/* Formula image tooltips */
.tooltip.formula-tooltip .tooltip-inner {
  max-width: none;
  padding: 8px 12px;
}

.tooltip.formula-tooltip .tooltip-inner img {
  display: block;
  zoom: 0.5;
}

/* ═══════════════════════════════════════════════════════════════════
   Wide-screen table breakout
   On large screens, let data-heavy show tables expand beyond the
   parent .container so users with wide monitors don't have to scroll.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 1400px) {
  .comparable-vehicles-container,
  .extra-equipment-items-container,
  .technical-groups-container {
    width: calc(100vw - 4rem);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }

  .comparable-vehicles-container {
    max-width: 1940px;
  }

  .extra-equipment-items-container {
    max-width: 1050px;
  }

  .repair-extra-equipment-items-container {
    max-width: 1360px;
  }

  .technical-groups-container {
    max-width: 1655px;
  }

  .repair-technical-groups-container {
    max-width: 2050px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Light Theme — Appraisal Overrides
   ═══════════════════════════════════════════════════════════════════ */
[data-theme="light"] .action-bar {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* ─── Readiness Notice ───────────────────────────────────────────
   Shown when an appraisal cannot be completed: a record needs an
   expert-determined technical state (Príloha č. 6, B.12) or a formula
   could not be evaluated. Uses the danger scale rather than the brass
   beta palette — this blocks export, it is not an advisory. */
.readiness-notice {
    border: 1px solid rgba(197, 48, 48, 0.35);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(135deg, rgba(197, 48, 48, 0.14), rgba(120, 32, 32, 0.08)),
        rgba(24, 28, 34, 0.94);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    padding: 1rem 1.125rem;
}

.readiness-notice-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.readiness-notice-intro {
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.55;
    margin-bottom: 0.6rem;
}

.readiness-notice-list {
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0;
    padding-left: 1.25rem;
}

[data-theme="light"] .readiness-notice {
    background:
        linear-gradient(135deg, rgba(197, 48, 48, 0.10), rgba(120, 32, 32, 0.05)),
        rgba(255, 255, 255, 0.92);
    border-color: rgba(155, 40, 40, 0.32);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* ─── Expert-determined technical state fields ───────────────── */
.expert-state-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brass-300);
    border: 1px solid rgba(212, 160, 23, 0.35);
    border-radius: var(--radius-sm);
    padding: 0.1rem 0.4rem;
}

.expert-state-hint {
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

[data-theme="light"] .expert-state-badge {
    color: #8a6708;
    border-color: rgba(180, 134, 11, 0.40);
}

/* Advisory counterpart to .readiness-notice: visible and auditable, but not blocking. */
.readiness-advisory {
    border: 1px solid rgba(120, 144, 180, 0.32);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(135deg, rgba(120, 144, 180, 0.12), rgba(80, 100, 130, 0.06)),
        rgba(24, 28, 34, 0.94);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    padding: 1rem 1.125rem;
}

[data-theme="light"] .readiness-advisory {
    background:
        linear-gradient(135deg, rgba(120, 144, 180, 0.09), rgba(80, 100, 130, 0.04)),
        rgba(255, 255, 255, 0.92);
    border-color: rgba(90, 115, 150, 0.30);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}