/*
 * RAMCOM realistic rack-front standard v3.3.7
 * Reference goal: product face fills its exact rack U slot while rack ears
 * visually occupy the side mounting-rail zones.
 */

/* RAMCOM_RACK_GEOMETRY_STABILITY_FIX_337
   These marker classes must NEVER override Angular's rack-item geometry.
   In particular, do not set position/display/width/height/transform/overflow or
   z-index on the host. The rack column owns those values. */
.ramcom-rack-device-item,
.ramcom-rack-front-host,
.ramcom-rack-image-overlay-host {
  --ramcom-rack-rail-overlap: 24px;
}

/* The host remains the exact Angular-calculated 1U/2U/3U rectangle. */
.ramcom-rack-front-host > * {
  box-sizing: border-box;
}

.ramcom-rack-front-image {
  position: absolute !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  z-index: 8 !important;
  image-rendering: auto !important;
}

/* Safe fallback when pixel analysis is unavailable. */
.ramcom-rack-front-image--cover {
  left: calc(0px - var(--ramcom-rack-rail-overlap)) !important;
  top: 0 !important;
  width: calc(100% + var(--ramcom-rack-rail-overlap) * 2) !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
}

/* Content-aware mode gets explicit pixel geometry from JS. */
.ramcom-rack-front-image--cropped {
  object-fit: fill !important;
  object-position: 50% 50% !important;
}

/* Hide legacy decorative ears when a real front photograph already contains
   the physical rack ears. The actual rack rails remain behind the photograph. */
html.ramcom-rack-front-mode .ramcom-rack-image-overlay-host .rack-item__ears,
html.ramcom-rack-front-mode .ramcom-rack-image-overlay-host [class*="rack-item__ears"] {
  opacity: 0 !important;
  pointer-events: none !important;
}

.ramcom-rack-hold-pending {
  cursor: progress !important;
}

.ramcom-rack-hold-active {
  cursor: grabbing !important;
  z-index: 60 !important;
  will-change: transform;
  transition: none !important;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.28));
  outline: 2px solid rgba(76, 139, 245, 0.85) !important;
}

.ramcom-rack-hold-active::after {
  content: attr(data-ramcom-move-label);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 90;
  min-width: 72px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(8, 19, 35, 0.9);
  color: #fff;
  font: 600 12px/1.2 Poppins, Arial, sans-serif;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

html.ramcom-rack-moving,
html.ramcom-rack-moving body {
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: grabbing !important;
}

@media (max-width: 900px) {
  .ramcom-rack-device-item {
    --ramcom-rack-rail-overlap: 18px;
  }
}


/* 2.0.1 AI-image synchronization bridge.
   If Angular has not yet materialized a front image inside an already-placed
   rack item, JS mirrors the newly returned selected-device image into that
   exact rack item. It is visual-only; Angular/SQL remain authoritative. */
.ramcom-rack-front-host > img[data-ramcom-rack-mirrored="1"] {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Once a real front image is covering the slot, keep old text/bar content
   behind it so it cannot bleed through transparent parts of product photos. */
.ramcom-rack-front-host > img.ramcom-rack-front-image {
  z-index: 12 !important;
}

/* --------------------------------------------------------------------------
   RAMCOM Rack Image Library v3.3.0
   Multiple candidate picker + editor + SQL-approved-image persistence.
   -------------------------------------------------------------------------- */


.ramcom-rack-approved-image {
  position: absolute !important;
  left: calc(0px - var(--ramcom-rack-rail-overlap)) !important;
  top: 0 !important;
  width: calc(100% + var(--ramcom-rack-rail-overlap) * 2) !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  object-position: center center !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  pointer-events: none !important;
  user-select: none !important;
  z-index: 20 !important;
}

.ramcom-rack-image-library-controls {
  display: grid;
  gap: 9px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(148, 163, 184, .34);
  font-family: Poppins, Arial, sans-serif;
}

.ramcom-rack-image-library-controls__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: inherit;
}

.ramcom-rack-image-library-controls__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ramcom-rack-image-library-controls button {
  min-height: 38px;
  border-radius: 8px;
  font: 600 12px/1.2 Poppins, Arial, sans-serif;
  cursor: pointer;
}

.ramcom-rack-image-library-controls button:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.ramcom-rack-primary {
  border: 1px solid #7c3aed;
  background: #7c3aed;
  color: #fff;
  padding: 9px 12px;
}

.ramcom-rack-primary:hover:not(:disabled) {
  filter: brightness(1.06);
}

.ramcom-rack-secondary {
  border: 1px solid #cbd5e1;
  background: rgba(255,255,255,.96);
  color: #172033;
  padding: 9px 12px;
}

.ramcom-rack-danger {
  color: #b42318;
  border-color: #fecaca;
}

.ramcom-rack-image-library-controls small {
  color: #64748b;
  font-size: 10px;
  line-height: 1.45;
}

.ramcom-rack-image-library-preview {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 5px;
  border: 1px dashed #cbd5e1;
  border-radius: 7px;
  color: #64748b;
  font-size: 10px;
  overflow: hidden;
}

.ramcom-rack-image-library-preview img {
  display: block;
  max-width: 70%;
  max-height: 40px;
  object-fit: contain;
}

.ramcom-rack-image-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px;
  font-family: Poppins, Arial, sans-serif;
}

.ramcom-rack-image-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, .72);
  backdrop-filter: blur(3px);
}

.ramcom-rack-image-modal__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(1180px, calc(100vw - 44px));
  max-height: calc(100vh - 44px);
  overflow: hidden;
  border-radius: 16px;
  background: #f8fafc;
  color: #172033;
  box-shadow: 0 30px 90px rgba(0,0,0,.38);
}

.ramcom-rack-image-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px 15px;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
}

.ramcom-rack-image-modal__header h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
}

.ramcom-rack-image-modal__header p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 12px;
}

.ramcom-rack-image-close {
  width: 36px;
  height: 36px;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  background: #fff;
  color: #334155;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.ramcom-rack-image-picker__intro {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 13px 22px;
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
}

.ramcom-rack-image-picker__intro strong {
  color: #172033;
  white-space: nowrap;
}

.ramcom-rack-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  padding: 18px 22px 22px;
  overflow: auto;
  min-height: 250px;
}

.ramcom-rack-image-card {
  display: grid;
  grid-template-rows: 150px auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #fff;
  color: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(15,23,42,.05);
}

.ramcom-rack-image-card:hover {
  border-color: #7c3aed;
  box-shadow: 0 8px 24px rgba(124,58,237,.13);
}

.ramcom-rack-image-card__picture {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  overflow: hidden;
  background: #e5e7eb;
}

.ramcom-rack-image-card__picture img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.ramcom-rack-image-card--failed {
  opacity: .45;
}

.ramcom-rack-image-card__meta {
  display: grid;
  gap: 4px;
  padding: 10px 12px 12px;
}

.ramcom-rack-image-card__meta strong {
  overflow: hidden;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ramcom-rack-image-card__meta span {
  color: #64748b;
  font-size: 10px;
}

.ramcom-rack-image-card__meta em {
  color: #7c3aed;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.ramcom-rack-image-empty {
  grid-column: 1 / -1;
  padding: 50px 20px;
  color: #64748b;
  text-align: center;
}

.ramcom-rack-image-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 20px;
  padding: 20px 22px;
  overflow: auto;
}

.ramcom-rack-image-editor__stage {
  min-width: 0;
}

.ramcom-rack-image-editor__stage > p {
  margin: 10px 0 0;
  color: #64748b;
  font-size: 11px;
  text-align: center;
}

.ramcom-rack-editor-rack {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 120px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #94a3b8;
  background: #c5c9ce;
  box-shadow: inset 0 0 0 8px #d8dbe0;
}

.ramcom-rack-editor-rack canvas {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  max-height: 56vh;
  object-fit: contain;
  background: #bfc3c8;
}

.ramcom-rack-editor-rail {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: 32px;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 14px, #111 0 2px, transparent 3px) 0 0 / 100% 28px,
    #89929f;
  border-inline: 1px solid #475569;
  opacity: .9;
}

.ramcom-rack-editor-rail--left { left: 0; }
.ramcom-rack-editor-rail--right { right: 0; }

.ramcom-rack-image-editor__controls {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
}

.ramcom-rack-image-editor__controls label {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 10px;
  color: #334155;
  font-size: 11px;
  font-weight: 600;
}

.ramcom-rack-image-editor__controls label input {
  grid-column: 1 / -1;
  width: 100%;
}

.ramcom-rack-image-editor__controls output {
  color: #7c3aed;
  font-weight: 700;
}

.ramcom-rack-dimensions {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid #d8dee8;
  border-radius: 10px;
  background: #f8fafc;
}

.ramcom-rack-dimensions__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.ramcom-rack-dimensions__heading strong {
  color: #172033;
  font-size: 12px;
}

.ramcom-rack-dimensions__heading span {
  color: #64748b;
  font-size: 9px;
  white-space: nowrap;
}

.ramcom-rack-dimension-control {
  grid-template-columns: 1fr auto !important;
}

.ramcom-rack-dimension-control > input[type="range"] {
  grid-column: 1 / 2 !important;
  align-self: center;
}

.ramcom-rack-dimension-number {
  grid-column: 2 / 3;
  display: grid;
  grid-template-columns: 64px 18px;
  align-items: center;
  gap: 3px;
}

.ramcom-rack-dimension-number input {
  width: 64px !important;
  padding: 5px 6px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  color: #172033;
  font: 600 10px/1.2 Poppins, Arial, sans-serif;
  text-align: right;
}

.ramcom-rack-dimension-number em {
  color: #64748b;
  font-size: 9px;
  font-style: normal;
}

.ramcom-rack-aspect-lock {
  display: grid !important;
  grid-template-columns: 18px 1fr !important;
  align-items: center;
  gap: 2px 8px !important;
  padding-top: 3px;
}

.ramcom-rack-aspect-lock input {
  grid-column: 1 !important;
  grid-row: 1 / 3;
  width: 16px !important;
  height: 16px;
  margin: 0;
}

.ramcom-rack-aspect-lock > span {
  color: #334155;
  font-size: 10px;
  font-weight: 700;
}

.ramcom-rack-aspect-lock small {
  color: #64748b;
  font-size: 8px;
  font-weight: 400;
}

.ramcom-rack-image-editor__mode {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.ramcom-rack-image-editor__mode button {
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #334155;
  font: 600 11px/1.2 Poppins, Arial, sans-serif;
  cursor: pointer;
}

.ramcom-rack-image-editor__mode--two-column {
  grid-template-columns: 1fr 1fr;
}

.ramcom-rack-image-editor__mode button.is-active {
  border-color: #7c3aed;
  background: #f3e8ff;
  color: #6d28d9;
}

.ramcom-rack-image-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 22px;
  border-top: 1px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  font-size: 10px;
}


.ramcom-rack-image-picker__footer [data-rack-more-status] {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.45;
}

.ramcom-rack-image-picker__footer [data-rack-image-action="show-more"] {
  border-color: #7c3aed;
  color: #6d28d9;
  font-weight: 700;
  white-space: nowrap;
}

.ramcom-rack-image-picker__footer [data-rack-image-action="show-more"]:hover:not(:disabled) {
  background: #f3e8ff;
}

.ramcom-rack-image-picker__footer [data-rack-image-action="show-more"]:disabled {
  color: #94a3b8;
  border-color: #cbd5e1;
}
.ramcom-rack-image-modal__footer > div {
  display: flex;
  gap: 8px;
}

@media (max-width: 760px) {
  .ramcom-rack-image-modal { padding: 10px; }
  .ramcom-rack-image-modal__panel { width: calc(100vw - 20px); max-height: calc(100vh - 20px); }
  .ramcom-rack-image-editor { grid-template-columns: 1fr; }
  .ramcom-rack-image-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .ramcom-rack-image-modal__footer { align-items: stretch; flex-direction: column; }
}


/* --------------------------------------------------------------------------
   RAMCOM_RACK_GEOMETRY_STABILITY_FIX_337

   Approved and mirrored images are presentation-only. Never modify the rack
   item's own position/display/size/transform/overflow/z-index. If Angular's
   native rack item is already positioned, a pseudo-element paints over the
   exact item rectangle. If it is static, use a background-image fallback.
   -------------------------------------------------------------------------- */

.ramcom-rack-image-overlay-positioned.ramcom-rack-approved-host::before,
.ramcom-rack-image-overlay-positioned.ramcom-rack-mirrored-host::before {
  content: "";
  position: absolute !important;
  left: calc(0px - var(--ramcom-rack-rail-overlap)) !important;
  top: 0 !important;
  width: calc(100% + var(--ramcom-rack-rail-overlap) * 2) !important;
  height: 100% !important;
  display: none;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  pointer-events: none !important;
  user-select: none !important;
  z-index: 30 !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}

html.ramcom-rack-front-mode
  .ramcom-rack-image-overlay-positioned.ramcom-rack-mirrored-host::before {
  display: block;
  background-image: var(--ramcom-rack-mirrored-image-url);
  background-size: cover !important;
}

html.ramcom-rack-front-mode
  .ramcom-rack-image-overlay-positioned.ramcom-rack-approved-host::before {
  display: block;
  background-image: var(--ramcom-rack-approved-image-url);
  background-size: 100% 100% !important;
}

html.ramcom-rack-front-mode
  .ramcom-rack-image-overlay-positioned.ramcom-rack-approved-host.ramcom-rack-mirrored-host::before {
  background-image: var(--ramcom-rack-approved-image-url);
  background-size: 100% 100% !important;
}

/* Static-host fallback: paint the image as a background without changing
   geometry. These declarations only exist while Front Device View is active;
   Rack Units View therefore falls straight back to Angular's native styles. */
html.ramcom-rack-front-mode
  .ramcom-rack-image-overlay-background.ramcom-rack-mirrored-host {
  background-image: var(--ramcom-rack-mirrored-image-url) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}

html.ramcom-rack-front-mode
  .ramcom-rack-image-overlay-background.ramcom-rack-approved-host {
  background-image: var(--ramcom-rack-approved-image-url) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 100% 100% !important;
}

/* Native Angular content stays in the DOM. In front mode it may sit beneath
   the approved overlay; in units mode no RAMCOM geometry/display rule applies. */