/* ============================================================
   P&ID Symbol Graphics — pid-standards-symbols.css
   Overrides main.css .card > div:first-child rules
   ============================================================ */

/* ---- Symbol canvas (replaces .card-icon) ---- */
.cards-grid .card .pid-symbol,
.cards-grid .card > .pid-symbol:first-child,
.card .pid-symbol,
.card > div.pid-symbol:first-child {
  width: 120px !important;
  height: 48px !important;
  min-width: auto !important;
  min-height: auto !important;
  margin: 0 auto 0.75rem !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: none !important;
  background-image: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* Base line shared by most symbols */
.cards-grid .card .pid-symbol::before,
.cards-grid .card .pid-symbol::after,
.card .pid-symbol::before,
.card .pid-symbol::after {
  content: '' !important;
  position: absolute !important;
  display: block !important;
  background: none !important;
  background-image: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ── Process Lines ── */

/* Main Process Line — heavy solid */
.cards-grid .card .pid-symbol.main-process::before,
.card .pid-symbol.main-process::before {
  width: 80px !important;
  height: 4px !important;
  background: var(--primary-navy) !important;
  border-radius: 2px !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* Secondary Process Line — thin solid */
.cards-grid .card .pid-symbol.secondary-process::before,
.card .pid-symbol.secondary-process::before {
  width: 80px !important;
  height: 1.5px !important;
  background: var(--primary-navy) !important;
  border-radius: 1px !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* Underground Line — dashed */
.cards-grid .card .pid-symbol.underground::before,
.card .pid-symbol.underground::before {
  width: 80px !important;
  height: 2px !important;
  background: repeating-linear-gradient(
    90deg,
    var(--primary-navy) 0px,
    var(--primary-navy) 8px,
    transparent 8px,
    transparent 14px
  ) !important;
  border-radius: 1px !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* Insulated Line — solid with hash marks */
.cards-grid .card .pid-symbol.insulated::before,
.card .pid-symbol.insulated::before {
  width: 80px !important;
  height: 2.5px !important;
  background: var(--primary-navy) !important;
  border-radius: 1px !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}
.cards-grid .card .pid-symbol.insulated::after,
.card .pid-symbol.insulated::after {
  width: 2px !important;
  height: 14px !important;
  background: var(--primary-navy) !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* Heat Traced Line — solid with small zigzag below */
.cards-grid .card .pid-symbol.heat-traced::before,
.card .pid-symbol.heat-traced::before {
  width: 80px !important;
  height: 2.5px !important;
  background: var(--primary-navy) !important;
  border-radius: 1px !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
.cards-grid .card .pid-symbol.heat-traced::after,
.card .pid-symbol.heat-traced::after {
  width: 50px !important;
  height: 10px !important;
  top: 24px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: repeating-linear-gradient(
    135deg,
    var(--primary-blue) 0px,
    var(--primary-blue) 2px,
    transparent 2px,
    transparent 5px
  ) !important;
  clip-path: polygon(0% 100%, 25% 0%, 50% 100%, 75% 0%, 100% 100%) !important;
}

/* Jacketed Line — double parallel */
.cards-grid .card .pid-symbol.jacketed::before,
.card .pid-symbol.jacketed::before {
  width: 80px !important;
  height: 2.5px !important;
  background: var(--primary-navy) !important;
  border-radius: 1px !important;
  top: 16px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
.cards-grid .card .pid-symbol.jacketed::after,
.card .pid-symbol.jacketed::after {
  width: 80px !important;
  height: 2.5px !important;
  background: var(--primary-navy) !important;
  border-radius: 1px !important;
  top: 26px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* ── Signal Lines ── */

/* Pneumatic Signal — zigzag */
.cards-grid .card .pid-symbol.pneumatic::before,
.card .pid-symbol.pneumatic::before {
  width: 70px !important;
  height: 16px !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: repeating-linear-gradient(
    135deg,
    var(--primary-navy) 0px,
    var(--primary-navy) 2px,
    transparent 2px,
    transparent 5px
  ) !important;
  clip-path: polygon(
    0% 50%, 12.5% 0%, 25% 100%, 37.5% 0%, 50% 100%,
    62.5% 0%, 75% 100%, 87.5% 0%, 100% 50%
  ) !important;
}

/* Electrical Signal — dashed thin */
.cards-grid .card .pid-symbol.electrical::before,
.card .pid-symbol.electrical::before {
  width: 80px !important;
  height: 2px !important;
  background: repeating-linear-gradient(
    90deg,
    var(--primary-navy) 0px,
    var(--primary-navy) 6px,
    transparent 6px,
    transparent 12px
  ) !important;
  border-radius: 1px !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* Hydraulic Signal — solid with arrowheads */
.cards-grid .card .pid-symbol.hydraulic::before,
.card .pid-symbol.hydraulic::before {
  width: 80px !important;
  height: 2.5px !important;
  background: var(--primary-navy) !important;
  border-radius: 1px !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}
.cards-grid .card .pid-symbol.hydraulic .arrow-left,
.cards-grid .card .pid-symbol.hydraulic .arrow-right,
.card .pid-symbol.hydraulic .arrow-left,
.card .pid-symbol.hydraulic .arrow-right {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.cards-grid .card .pid-symbol.hydraulic .arrow-left,
.card .pid-symbol.hydraulic .arrow-left {
  left: 14px !important;
  border-top: 5px solid transparent !important;
  border-bottom: 5px solid transparent !important;
  border-right: 7px solid var(--primary-navy) !important;
}
.cards-grid .card .pid-symbol.hydraulic .arrow-right,
.card .pid-symbol.hydraulic .arrow-right {
  right: 14px !important;
  border-top: 5px solid transparent !important;
  border-bottom: 5px solid transparent !important;
  border-left: 7px solid var(--primary-navy) !important;
}

/* Capillary Tube — double thin parallel */
.cards-grid .card .pid-symbol.capillary::before,
.card .pid-symbol.capillary::before {
  width: 80px !important;
  height: 1.5px !important;
  background: var(--primary-navy) !important;
  border-radius: 1px !important;
  top: 18px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
.cards-grid .card .pid-symbol.capillary::after,
.card .pid-symbol.capillary::after {
  width: 80px !important;
  height: 1.5px !important;
  background: var(--primary-navy) !important;
  border-radius: 1px !important;
  top: 24px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* Software / Logic Link — solid with open circles */
.cards-grid .card .pid-symbol.software::before,
.card .pid-symbol.software::before {
  width: 80px !important;
  height: 2px !important;
  background: var(--primary-navy) !important;
  border-radius: 1px !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}
.cards-grid .card .pid-symbol.software .marker-left,
.cards-grid .card .pid-symbol.software .marker-right,
.card .pid-symbol.software .marker-left,
.card .pid-symbol.software .marker-right {
  position: absolute !important;
  width: 10px !important;
  height: 10px !important;
  border: 2px solid var(--primary-navy) !important;
  border-radius: 50% !important;
  background: var(--white) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  box-shadow: none !important;
}
.cards-grid .card .pid-symbol.software .marker-left,
.card .pid-symbol.software .marker-left { left: 18px !important; }
.cards-grid .card .pid-symbol.software .marker-right,
.card .pid-symbol.software .marker-right { right: 18px !important; }

/* Mechanical Link — solid with filled circles */
.cards-grid .card .pid-symbol.mechanical::before,
.card .pid-symbol.mechanical::before {
  width: 80px !important;
  height: 2px !important;
  background: var(--primary-navy) !important;
  border-radius: 1px !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}
.cards-grid .card .pid-symbol.mechanical .marker-left,
.cards-grid .card .pid-symbol.mechanical .marker-right,
.card .pid-symbol.mechanical .marker-left,
.card .pid-symbol.mechanical .marker-right {
  position: absolute !important;
  width: 10px !important;
  height: 10px !important;
  background: var(--primary-navy) !important;
  border-radius: 50% !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  box-shadow: none !important;
  border: none !important;
}
.cards-grid .card .pid-symbol.mechanical .marker-left,
.card .pid-symbol.mechanical .marker-left { left: 18px !important; }
.cards-grid .card .pid-symbol.mechanical .marker-right,
.card .pid-symbol.mechanical .marker-right { right: 18px !important; }

/* ---- Remove shadows and hover effects from symbol cards ---- */
.cards-grid .card.symbol-item,
.cards-grid .card.symbol-item:hover,
.symbol-item,
.symbol-item:hover {
  box-shadow: none !important;
  transform: none !important;
  border-color: var(--border-gray) !important;
}
.cards-grid .card:hover .pid-symbol,
.card:hover .pid-symbol {
  transform: none !important;
}
/* Also remove any pseudo-element hover effects */
.cards-grid .card.symbol-item:hover::before,
.cards-grid .card.symbol-item::before {
  width: 0 !important;
  display: none !important;
}