/* =========================================================
   Quinnipiac-Themed Two-Column Dashboard
   ---------------------------------------------------------
   Brand palette commonly referenced:
   - Navy: #0C2340
   - Gold: #FFB81C
   - Light Blue (accent): #418FDE
   ========================================================= */

:root{
  --qu-navy: #0C2340;
  --qu-gold: #FFB81C;
  --qu-light: #418FDE;

  --bg: #081427;
  --text: #f5f8ff;
  --muted: #bac6db;

  --panel-left: rgba(12,35,64,0.65);   /* navy-tinted */
  --panel-right: rgba(12,35,64,0.45);  /* a bit lighter */
  --box-bg: rgba(255,255,255,0.06);
  --tile-bg: rgba(255,255,255,0.07);

  --radius-lg: 16px;
  --radius-md: 12px;
  --shadow-1: 0 8px 22px rgba(0,0,0,.28);
  --shadow-2: 0 14px 38px rgba(0,0,0,.38);
}

/* Base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin: 0;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 12% -8%, rgba(65,143,222,.18), transparent 60%),
    radial-gradient(900px 600px at 110% 0%, rgba(255,184,28,.12), transparent 60%),
    linear-gradient(180deg, #0A1730 0%, var(--bg) 100%);
  background-size: cover;       /* Ensures the image covers the whole screen */
  background-position: center;  /* Centers the image */
  background-repeat: no-repeat; /* Prevents tiling */
  background-attachment: fixed; /* Keeps the background fixed during scroll */

}

a{
  color: rgb(112, 160, 218);
}

/* Header / Footer */
.site-header, .site-footer{
  padding: 18px clamp(16px, 3vw, 28px);
}
.site-header h1{ margin: 0; font-size: clamp(15px, 2.2vw, 20px); }
.subtitle{ margin: 4px 0 0 0; color: var(--muted); }
.site-footer{ color: var(--muted); text-align: center; }

/* ---------------------------------------------------------
   MAIN LAYOUT: Explicit two columns
   Left = 1/3, Right = 2/3, equal height, clear divider
   --------------------------------------------------------- */
.layout{
  display: grid;
  grid-template-columns: 1fr 2fr; /* 1/3 + 2/3 */
  gap: 24px;
  padding: 10px clamp(16px, 3vw, 28px) 28px;
  align-items: stretch; /* columns equal height */
}

/* Columns as distinct panels */
.col{
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  overflow: clip;
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
}

/* LEFT column — navy panel + gold vertical divider */
.left-col{
  background: linear-gradient(180deg, var(--panel-left), rgba(12,35,64,0.55));
  position: relative;
  border-right: 4px solid var(--qu-gold); /* <-- clear separation */
}

/* RIGHT column — slightly lighter panel */
.right-col{
  background: linear-gradient(180deg, var(--panel-right), rgba(12,35,64,0.35));
}

/* LEFT content: exactly 3 rows */
.left-grid{
  display: grid;
  grid-template-rows: repeat(3, 1fr); /* 3 equal rows */
  gap: 14px;
  padding: 14px;
  min-height: 420px;
}
.box{
  background: var(--box-bg);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius-md);
  padding: 16px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.box:hover{
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--qu-gold), white 14%);
  box-shadow: var(--shadow-2);
}
.box h2{ margin: 0 0 6px 0; font-size: 16px; }
.box p{ margin: 0; color: var(--muted); }

/* RIGHT content: 2×3 grid of rounded tiles */
.right-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(120px, 1fr);
  gap: 14px;
  padding: 14px;
  min-height: 420px;
}
.tile{
  background: var(--tile-bg);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius-md);
  padding: 16px;
  position: relative;
  transition: transform .1s ease, box-shadow .16s ease, border-color .1s ease;
}
.tile::after{
  content: "";
  position: absolute; right: -22px; top: -22px; width: 100px; height: 100px;
  background: radial-gradient(circle, rgba(65,143,222,.45), transparent 80%);
  filter: blur(40px);
  pointer-events: none;
}
.tile:hover{
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--qu-gold), white 10%);
  box-shadow: 0 14px 40px rgba(12,35,64,.5);
}
.tile h3{ margin: 0 0 6px 0; font-size: 15px; }
.tile p{ margin: 0; color: var(--muted); }

/* Focus visibility */
.box:focus-within, .tile:focus-within{
  outline: 2px solid var(--qu-gold);
  outline-offset: 5px;
}

.log{
  background-color: #081427;
  max-height: min-content;
}

.log .date{
  color: lime;
  font-size: 0.7em;
}

.log li{
  display: none;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9em;
  padding-left: 0;
  margin-left: 0;
}

ul button{
  background-color: #345382;
  color: white;
}

/* Graph */

.graph-container {
  background-color: #fff;
  padding: 20px;
  display: inline-block;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.axis-label{
  font-size: 18px;
  fill: #ffffff;
  font-weight: bold
}

/* Responsive: stack to one column on mobile */
@media (max-width: 900px){
  .layout{
    grid-template-columns: 1fr; /* stack */
  }
  .left-col{
    border-right: none;              /* no vertical divider when stacked */
    border-bottom: 4px solid var(--qu-gold); /* keep brand separator */
  }
  .right-grid{
    grid-template-columns: 1fr;      /* grid tiles stack */
  }
}