/* ============================================================
   E-Yantra and Robotics Club — RIT
   Design tokens: circuit-board / PCB inspired admin theme
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --navy:        #0B1220;
  --navy-2:      #141E33;
  --navy-3:      #1D2B47;
  --accent:      #00C2B8;   /* circuit teal glow */
  --accent-dim:  #0A8F87;
  --amber:       #FFB020;   /* pending / leave */
  --danger:      #E5484D;   /* absent / reject */
  --success:     #2FBF71;   /* present / approved */
  --bg:          #F3F6FA;
  --surface:     #FFFFFF;
  --text:        #17202E;
  --muted:       #6B7686;
  --border:      #E3E8F0;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --radius: 10px;
  --sidebar-w: 250px;
}

*{ box-sizing:border-box; }

body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
}

h1,h2,h3,h4,h5,.brand,.font-display{
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

.mono, .prn, td.mono, .data{
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a{ color: var(--accent-dim); text-decoration:none; }
a:hover{ color: var(--accent); }

/* ---------- circuit-trace divider (signature element) ---------- */
.circuit-divider{
  position:relative;
  height:14px;
  margin: 6px 0 18px;
  background-image:
    linear-gradient(90deg, var(--accent) 0, var(--accent) 6px, transparent 6px),
    repeating-linear-gradient(90deg, var(--border) 0 10px, transparent 10px 18px);
  background-position: 0 6px, 16px 6px;
  background-repeat: no-repeat, repeat-x;
  background-size: 6px 2px, calc(100% - 16px) 2px;
}
.circuit-divider::before, .circuit-divider::after{
  content:"";
  position:absolute; top:2px; width:8px; height:8px;
  border:2px solid var(--accent); background:var(--surface);
}
.circuit-divider::before{ left:0; }
.circuit-divider::after{ right:0; }

/* ---------- layout ---------- */
.app-wrapper{ display:flex; min-height:100vh; }

.sidebar{
  width: var(--sidebar-w);
  background: var(--navy);
  color:#C9D2E3;
  position:fixed; top:0; left:0; bottom:0;
  display:flex; flex-direction:column;
  z-index: 1030;
}
.sidebar .brand-block{
  padding: 22px 20px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar .brand-block .club-name{
  color:#fff; font-size:1.05rem; font-weight:700; line-height:1.25;
}
.sidebar .brand-block .club-sub{
  color: var(--accent); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
}
.sidebar nav{ flex:1; overflow-y:auto; padding: 10px 0; }
.sidebar .nav-link{
  display:flex; align-items:center; gap:10px;
  color:#AEB9CF; padding:11px 20px; font-size:.92rem; font-weight:500;
  border-left:3px solid transparent;
}
.sidebar .nav-link i{ width:18px; text-align:center; color: var(--accent); }
.sidebar .nav-link:hover{ background: var(--navy-2); color:#fff; }
.sidebar .nav-link.active{
  background: var(--navy-3); color:#fff; border-left-color: var(--accent);
}
.sidebar .nav-section-label{
  color:#5B6784; font-size:.68rem; text-transform:uppercase; letter-spacing:.1em;
  padding: 16px 20px 6px;
}
.sidebar .user-block{
  border-top:1px solid rgba(255,255,255,.08); padding:14px 20px;
  font-size:.82rem; color:#8B96AF;
}
.sidebar .user-block strong{ color:#fff; display:block; font-size:.9rem; }
.sidebar .role-pill{
  display:inline-block; margin-top:4px; padding:2px 8px; border-radius:20px;
  background: rgba(0,194,184,.15); color: var(--accent); font-size:.68rem; font-weight:600;
}

.main-content{
  margin-left: var(--sidebar-w);
  flex:1; display:flex; flex-direction:column; min-height:100vh;
}
.topbar{
  background: var(--surface); border-bottom:1px solid var(--border);
  padding: 14px 26px; display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:1020;
}
.topbar .page-title{ font-weight:700; font-size:1.15rem; }
.page-body{ padding: 24px 26px 40px; }

/* ---------- cards / stat widgets ---------- */
.stat-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; position:relative; overflow:hidden;
}
.stat-card .stat-value{ font-family: var(--font-display); font-size:1.8rem; font-weight:700; }
.stat-card .stat-label{ color: var(--muted); font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; }
.stat-card .stat-icon{
  position:absolute; right:14px; top:14px; font-size:1.6rem; color: var(--accent); opacity:.25;
}

.card{ border:1px solid var(--border); border-radius: var(--radius); }
.card-header{ background: var(--surface); border-bottom:1px solid var(--border); font-weight:600; }

/* ---------- hex avatar frame (signature element) ---------- */
.hex-avatar{
  width:44px; height:44px; object-fit:cover;
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
  border:2px solid var(--accent); background:#eee;
}
.hex-avatar.lg{ width:96px; height:96px; }

/* ---------- badges/status ---------- */
.badge-present{ background: rgba(47,191,113,.12); color:#1d8c53; }
.badge-absent{  background: rgba(229,72,77,.12); color:#c62f34; }
.badge-leave{   background: rgba(255,176,32,.15); color:#a86a00; }
.badge-pending{ background: rgba(255,176,32,.15); color:#a86a00; }
.badge-approved{background: rgba(47,191,113,.12); color:#1d8c53; }
.badge-rejected{background: rgba(229,72,77,.12); color:#c62f34; }

.btn-accent{ background: var(--accent); border-color: var(--accent); color:#062824; font-weight:600; }
.btn-accent:hover{ background: var(--accent-dim); border-color: var(--accent-dim); color:#fff; }

table.table thead th{
  text-transform:uppercase; font-size:.72rem; letter-spacing:.05em; color: var(--muted);
  border-bottom:2px solid var(--border); font-weight:700;
}

.login-wrapper{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: var(--navy);
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 40px);
}
.login-card{
  width:380px; background: var(--surface); border-radius: var(--radius); padding: 34px 30px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.login-card .club-logo-badge{
  width:56px; height:56px; margin:0 auto 14px; display:flex; align-items:center; justify-content:center;
  background: var(--navy); color: var(--accent); font-family: var(--font-display); font-weight:700; font-size:1.3rem;
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
}

@media (max-width: 900px){
  .sidebar{ transform: translateX(-100%); transition: transform .2s ease; }
  .sidebar.open{ transform: translateX(0); }
  .main-content{ margin-left:0; }
}