/* HiveRecord base styles */
:root{
  --clr-bg:#202020;          /* 202020 */
  --clr-bg-elev:#333533;     /* 333533 */
  --clr-fg:#D6D6D6;          /* D6D6D6 */
  --clr-accent:#FFEE32;      /* FFEE32 */
  --clr-accent-2:#FFD100;    /* FFD100 */
  --gap:20px;                /* Required gap */
  --maxw:1280px;             /* Required total width */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--clr-fg);
  background:var(--clr-bg);
  line-height:1.55;
}

/* Layout container: 4 columns grid with required gap and 1280px max width */
.container{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows:min-content;
  gap:var(--gap);
  max-width:var(--maxw);
  padding:var(--gap);
  margin-inline:auto;
}

/* Header spans 4/4 */
.header{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  background:var(--clr-bg-elev);
  border:1px solid rgba(214,214,214,0.1);
  border-radius:12px;
}
.brand{display:flex; align-items:center; gap:12px}
.logo{
  width:50px;height:50px; border-radius:10px;
  display:grid; place-items:center;
  font-weight:700; color:#202020;
  background:linear-gradient(135deg,var(--clr-accent),var(--clr-accent-2));
  text-decoration:none;
}
.site-title{margin:0; font-size:1.25rem}
.site-subtitle{margin:0; font-size:.9rem; color:#bbb}

.topnav ul{display:flex; gap:12px; list-style:none; padding:0; margin:0}
.topnav a{
  display:inline-block; padding:10px 14px; border-radius:10px;
  color:var(--clr-fg); text-decoration:none; border:1px solid transparent;
}
.topnav a:hover{background:rgba(255,255,255,0.06)}
.topnav a.active{ border-color:var(--clr-accent); color:#111; background:var(--clr-accent)}

/* Header actions (right side) */
.actions{display:flex; gap:10px; align-items:center}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:10px; text-decoration:none;
  font-weight:600; font-size:16px; line-height:1.2;
  border:1px solid rgba(214,214,214,0.12);
  color:#202020; background:var(--clr-accent);
  min-height:44px; transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover{ background:var(--clr-accent-2); border-color:var(--clr-accent) }
.btn-accent{ background:var(--clr-accent); color:#202020; border-color:var(--clr-accent-2) }
.btn-accent:hover{ background:var(--clr-accent-2); border-color:var(--clr-accent) }
.btn-secondary{ background:transparent; color:var(--clr-fg) }
.btn-secondary:hover{ background:rgba(255,255,255,0.06) }

/* Compact button: same look as .btn but 36px tall to align with inputs */
.btn-compact{
  min-height:36px;
  padding:8px 14px;
  font-size:14px;
}

/* Badges */
.badge{
  display:inline-block;
  border-radius:999px;
  padding:2px 8px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  line-height:1.4;
}
.badge-unread, .badge-inactive{ background:#e74c3c; color:#202020; }
.badge-read, .badge-active{ background:#2ecc71; color:#202020; }
.badge-admin{ background:#02c39a; color:#202020; }
.badge-dpo{ background:#4361ee; color:#FFFFFF; }
.badge-id{ background:#4a4e69; color:#202020; }
/* Additional badges */
.badge-sent{ background:#00072d; color:#FFFFFF; }
.badge-draft{ background:#fb8500; color:#202020; }
.badge-public{ background:#bee3db; color:#202020; }
.badge-private{ background:#ffd6ba; color:#202020; }
.badge-dpa-signed{ background:#2ecc71; color:#202020; }
.badge-no-dpa{ background:#e74c3c; color:#202020; }
.badge-validated{ background:#2ecc71; color:#202020; }

/* Uniform icon buttons */
.btn svg, .btn-compact svg{ width:20px; height:20px; }

/* Main: 1/4 + 3/4 using grid placement */
.main{
  grid-column:1 / -1; /* occupy full row inside container */
  display:grid;
  grid-template-columns: 1fr 3fr; /* 1/4 + 3/4 proportion */
  gap:var(--gap);
}
.sidebar{
  background:var(--clr-bg-elev);
  border:1px solid rgba(214,214,214,0.1);
  border-radius:12px; padding:16px;
}
.sidenav .nav-title{margin:0 0 10px 0; font-size:1rem; color:var(--clr-accent)}
.sidenav ul{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.sidenav a{display:block; padding:10px 12px; color:var(--clr-fg); text-decoration:none; border-radius:8px}
.sidenav a:hover{background:rgba(255,255,255,.06)}
.sidenav a.active{ background:var(--clr-accent); color:#202020 }

.content{
  background:var(--clr-bg-elev);
  border:1px solid rgba(214,214,214,0.1);
  border-radius:12px; padding:20px;
}
.content h2{margin-top:0}

.cards{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:var(--gap); margin-top:10px}
.card{
  background:#2a2b2a;
  border:1px solid rgba(214,214,214,0.08);
  border-radius:12px; padding:16px;
}
.card h3{margin-top:0}

/* Footer spans 4/4 */
.footer{
  grid-column:1 / -1;
  background:var(--clr-bg-elev);
  border:1px solid rgba(214,214,214,0.1);
  border-radius:12px; padding:16px 20px;
  text-align:center; color:#bcbcbc;
}

/* Responsive rules */
@media (max-width: 1024px){
  .cards{grid-template-columns: repeat(2, minmax(0,1fr));}
}
@media (max-width: 720px){
  .container{padding:16px}
  .main{grid-template-columns: 1fr;}
  .sidebar{order:1}
  .content{order:2}
  .cards{grid-template-columns: 1fr}
  .topnav ul{flex-wrap:wrap}
}