/* File: app/static/css/blocks.css */

/* ---------------------------------------------
 * Block Elements
 * ------------------------------------------- */
.block {
  position: absolute;
  border: 1px solid var(--ok-border);
  background: var(--ok-bg);
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #333;
  user-select: none;
  cursor: grab;
  border-radius: 0;
}

.block[data-kind='hq'],
.block[data-kind='flag'] {
  background: var(--flag-bg);
  border-color: var(--flag-border);
}

.block[data-kind='trap'] {
  background: var(--trap-bg);
  border-color: var(--trap-border);
}

.block[data-kind='city'] {
  background: var(--city-bg);
  border-color: var(--city-border);
}

.block[data-kind='block'][data-size='1'],
.block[data-kind='block'][data-size='2'],
.block[data-kind='block'][data-size='3'],
.block[data-kind='custom'] {
  background: var(--block123-bg);
  border-color: var(--block123-border);
}

.block:active {
  cursor: grabbing;
}

/* RTL: Let inline content inside blocks follow RTL flow (labels, etc.) */
body.rtl .block,
html[dir='rtl'] .block {
  direction: rtl;
}

/* ---------------------------------------------
 * Internal Label (orientation corrected by 45°)
 * ------------------------------------------- */
.block .label {
  /* Corrected orientation: scaleY(-1) scaleX(-1) rotate(-45deg) */
  transform: scaleY(-1) scaleX(-1) rotate(-45deg);
  transform-origin: center;
  font-weight: 700;
  text-align: center;
  user-select: none;
  pointer-events: none;
}

/* RTL: keep label text in RTL flow if present (user-edited city names, etc.) */
body.rtl .block .label,
html[dir='rtl'] .block .label {
  direction: rtl;
}

/* Editing Mode */
.block[data-editing='1'] {
  cursor: text;
}

.block .label.editing {
  pointer-events: auto;
  outline: 2px solid #4a90e2;
  background: #fff;
  padding: 4px 6px;
  border-radius: 4px;
  min-width: 3ch;
}

/* ---------------------------------------------
 * Snap Outline (visible during snapping)
 * ------------------------------------------- */
.snap-outline {
  position: absolute;
  border: 2px dashed #4a90e2;
  border-radius: 0;
  pointer-events: none;
  display: none;
}

/* ---------------------------------------------
 * Ghost Element (drag preview)
 * ------------------------------------------- */
.ghost {
  position: fixed;
  pointer-events: none;
  opacity: 0.6;
  border: 1px dashed #666;
  display: grid;
  place-items: center;
  background: #ffffffcc;
  border-radius: 0;
  transform: rotate(45deg) scale(-1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.ghost-label {
  transform: scaleY(-1) scaleX(-1) rotate(-45deg);
  font-weight: 700;
  color: #333;
  user-select: none;
  pointer-events: none;
  text-align: center;
}

/* RTL: ghost label respects RTL text flow too */
body.rtl .ghost-label,
html[dir='rtl'] .ghost-label {
  direction: rtl;
}

.block.is-lifted {
  transform: scale(1.03);
  transition: transform 0.08s ease;
  opacity: 0.85;
  outline: 2px solid rgba(21, 87, 255, 0.35);
}

/* ---------------------------------------------
 * Custom Block Resize (Edge-based)
 * ------------------------------------------- */
.block[data-kind='custom'] {
  cursor: move;
}

.block[data-kind='custom']:hover {
  outline: 1px solid rgba(21, 87, 255, 0.3);
}

.block.is-resizing {
  outline: 2px solid rgba(21, 87, 255, 0.5);
}