/* Yorkshire Net overrides for compiled Tailwind CSS
   Load AFTER the big tailwind.css file.
*/

:root{
  --yn-bg1:#1b2a3a;
  --yn-bg2:#0f1720;

  --yn-card1:#2b3f55;
  --yn-card2:#1c2a3a;

  --yn-text: rgba(255,255,255,0.92);
  --yn-muted: rgba(255,255,255,0.70);

  --yn-border: rgba(255,255,255,0.12);
  --yn-border2: rgba(255,255,255,0.18);

  --yn-shadow: 0 8px 20px rgba(0,0,0,0.35);
  --yn-shadow-hover: 0 14px 28px rgba(0,0,0,0.45);
}

/* Background + base text */
html, body{
  background: radial-gradient(circle at top, var(--yn-bg1), var(--yn-bg2)) !important;
  color: var(--yn-text) !important;
}

/* If your page uses Tailwind's bg-gradient-to-br + from/via/to, neutralise it */
body{
  background-image: radial-gradient(circle at top, var(--yn-bg1), var(--yn-bg2)) !important;
}

/* Glossy cards: shift tint to Yorkshire panels */
.card-glossy{
  background: linear-gradient(135deg, rgba(43,63,85,0.55), rgba(28,42,58,0.72)) !important;
  border-color: var(--yn-border) !important;
  box-shadow: var(--yn-shadow) !important;
}
.card-glossy:hover{
  background: linear-gradient(135deg, rgba(43,63,85,0.65), rgba(28,42,58,0.82)) !important;
  box-shadow: var(--yn-shadow-hover) !important;
}

/* Primary buttons: make them less bright */
.btn-primary{
  background-image: linear-gradient(135deg, #32485f, #223245) !important;
  color: rgba(255,255,255,0.92) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,0.35) !important;
}
.btn-primary:hover{
  background-image: linear-gradient(135deg, #3a556e, #26384f) !important;
  transform: translateY(-1px) scale(1.02) !important; /* subtle, not jumpy */
}

/* Inputs */
.input-glossy{
  background: rgba(0,0,0,0.22) !important;
  border-color: var(--yn-border) !important;
  color: var(--yn-text) !important;
}
.input-glossy::placeholder{
  color: rgba(255,255,255,0.55) !important;
}
.input-glossy:focus{
  box-shadow: 0 0 0 2px rgba(79,134,247,0.18) !important;
}

/* Tables */
.table-glossy thead{
  background: rgba(255,255,255,0.06) !important;
}
.table-glossy td{
  border-color: rgba(255,255,255,0.10) !important;
}
.table-glossy tbody tr:hover{
  background-color: rgba(79,134,247,0.12) !important;
}

/* Tone down Tailwind bright text blues if they appear */
.text-blue-300, .text-blue-400, .hover\:text-blue-200:hover, .hover\:text-blue-300:hover{
  color: rgba(135,168,255,0.92) !important;
}

/* Optional: reduce very “glossy” blur overlays if it looks too glassy */
.shadow-glossy{
  box-shadow: var(--yn-shadow) !important;
}