/* Yorkshire layout v2: makes it feel different without changing HTML much */

/* 1) Wider rhythm + a subtle top “band” */
body{
  padding-top: 18px !important;
}
body::before{
  content:"";
  position: fixed;
  inset: 0 0 auto 0;
  height: 140px;
  background: linear-gradient(135deg, rgba(79,134,247,0.16), rgba(135,168,255,0.06));
  pointer-events:none;
  z-index:-1;
}

/* 2) Container: add breathing room + max width that feels “dashboard” */
.container, .\!container{
  padding-left: 18px !important;
  padding-right: 18px !important;
}

/* 3) Cards: slightly squarer, clearer border, “panel” look */
.card-glossy{
  border-radius: 14px !important;           /* less bubble, more console */
  border-color: rgba(255,255,255,0.14) !important;
  backdrop-filter: blur(10px) !important;
}
.card-glossy:hover{
  border-color: rgba(255,255,255,0.20) !important;
}

/* Add a header bar look to the first element inside a card if it's a heading */
.card-glossy h1,
.card-glossy h2,
.card-glossy h3{
  padding-bottom: 10px !important;
  margin-bottom: 12px !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}

/* 4) Buttons: more “control panel”, less glossy */
.btn-primary{
  border-radius: 12px !important;
  letter-spacing: .2px !important;
  box-shadow: 0 8px 18px rgba(0,0,0,0.35) !important;
}
.btn-primary:hover{
  transform: translateY(-1px) scale(1.015) !important;
}

/* 5) Inputs: slightly tighter, more “equipment UI” */
.input-glossy{
  border-radius: 10px !important;
  padding: .65rem .9rem !important;
}

/* 6) Tables: compact rows + clearer header */
.table-glossy th{
  padding: .85rem 1.1rem !important;
  font-size: .80rem !important;
  letter-spacing: .08em !important;
}
.table-glossy td{
  padding: .78rem 1.1rem !important;
}

/* 7) If you have grids, make gaps feel different (more chunky) */
.grid{
  gap: 1.25rem !important;
}
.gap-6{ gap: 1.25rem !important; }
.gap-8{ gap: 1.75rem !important; }

/* 8) Optional: add these classes in HTML for a new “layout” feel */
.yn-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(43,63,85,0.55), rgba(28,42,58,0.75));
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
  margin-bottom: 18px;
}

.yn-header .yn-title{
  font-size: 1.25rem;
  font-weight: 700;
  color: rgba(255,255,255,0.95);
  margin: 0;
}
.yn-header .yn-sub{
  font-size: .9rem;
  color: rgba(255,255,255,0.70);
  margin: 2px 0 0 0;
}

.yn-actions{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
}

/* =========================
   TX ALERT: blue + mobile-safe
   Targets: #tx-alert block
   ========================= */

/* Card border + subtle blue tint */
#tx-alert{
  border-color: rgba(127, 209, 255, 0.45) !important;
  background: linear-gradient(135deg, rgba(16,50,74,0.35), rgba(28,42,58,0.75)) !important;
}

/* Icon panel background + icon colour */
#tx-alert .bg-red-500\/30{
  background: rgba(127, 209, 255, 0.18) !important;
}
#tx-alert svg.text-red-400{
  color: #7fd1ff !important;
}

/* Dot + title colour */
#tx-alert .bg-red-500{
  background: #7fd1ff !important;
  box-shadow: 0 0 12px rgba(127, 209, 255, 0.75) !important;
}
#tx-alert h2.text-red-400{
  color: #7fd1ff !important;
}

/* --- MOBILE OVERFLOW FIXES --- */

/* allow flex children to shrink/wrap instead of overflowing */
#tx-alert .flex{
  flex-wrap: wrap !important;
}
#tx-alert .flex-1{
  min-width: 0 !important;
}

/* prevent the left icon block from forcing width on small screens */
#tx-alert .mr-6{
  margin-right: 0 !important;
  margin-bottom: 0.75rem !important;
}

/* make the 3 info blocks always fit inside */
#tx-alert .grid{
  grid-template-columns: 1fr !important;   /* stack on small screens */
}
@media (min-width: 768px){
  #tx-alert .grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* wrap long callsigns/links cleanly */
#tx-alert a,
#tx-alert #tx-callsign,
#tx-alert #tx-target,
#tx-alert #tx-gateway{
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  min-width: 0 !important;
}