/* Basic Timeclock styles */
:root{
  --bg:#0f1724;
  --card:#121827;
  --accent:#1e90ff;
  --muted:#9aa3c7;
  --text:#f8fbff;
}
html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background:var(--bg); color:var(--text)}
.tc-header{display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;background:linear-gradient(90deg,#0b1220, #0f1724);box-shadow:0 6px 18px rgba(2,6,23,.6)}
.tc-header .back-link{color:var(--muted);text-decoration:none;font-weight:600}
.tc-header h1{margin:0;font-size:1.25rem}
.tc-main{padding:2rem;max-width:980px;margin:1.25rem auto;background:var(--card);border-radius:10px;box-shadow:0 8px 30px rgba(2,6,23,.6)}
.tc-actions{display:flex;gap:12px;margin-top:1rem}
.tc-btn{padding:.8rem 1.15rem;border-radius:8px;border:0;font-weight:700;cursor:pointer}
.tc-btn.primary{background:var(--accent);color:#fff}
.tc-btn.secondary{background:transparent;border:1px solid rgba(255,255,255,.08);color:var(--text)}

/* small responsive tweaks */
@media (max-width:520px){.tc-header{padding:.75rem}.tc-main{margin:0.75rem}}

/* PIN pad layout */
.tc-grid{
  display:grid;
  gap:18px
}
.tc-panel{padding:18px;border-radius:8px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));}
.tc-pin-panel h2,.tc-history-panel h2{margin:0 0 12px 0}
.tc-pin-panel{display:flex;flex-direction:column;align-items:center}
.pin-display{font-family:monospace;letter-spacing:10px;font-size:2.2rem;text-align:center;padding:12px;border-radius:8px;background:rgba(255,255,255,0.02);margin-bottom:6px;width:60%;max-width:520px}
.pin-feedback{min-height:22px;color:var(--muted);font-weight:600;text-align:center;margin-top:4px;margin-bottom:12px;width:60%;max-width:520px}
.pin-pad{
  display:grid;
  grid-template-columns:repeat(3,1fr);gap:10px;
  width: 20vw;
  height: 50vh;
  margin:0 auto;
}
.pin-key,.pin-action{padding:14px 0;border-radius:8px;border:0;font-size:1.05rem;font-weight:700;cursor:pointer;background:rgba(255,255,255,0.03);color:var(--text)}
.pin-key:hover,.pin-action:hover{background:rgba(255,255,255,0.06)}
.pin-action{background:transparent;border:1px solid rgba(255,255,255,0.04)}

.tc-history-panel .punch-list{display:flex;flex-direction:column;gap:8px;max-height:360px;overflow:auto}
.punch-item{padding:10px;border-radius:6px;background:rgba(0,0,0,0.12);font-weight:600}
.punch-item .when{display:block;color:var(--muted);font-weight:500;font-size:.9rem}

@media (max-width:880px){.tc-grid{grid-template-columns:1fr}.tc-history-panel{order:2}}

/* Admin list */
.user-row{display:flex;gap:8px;align-items:center;padding:8px;border-radius:6px;background:rgba(255,255,255,0.02);margin-bottom:6px}
.user-row .name{flex:1;font-weight:700}
.user-row .pin{width:90px;text-align:center;color:var(--muted)}
.user-row .actions{display:flex;gap:6px}

/* Project select modal */
.installer-select-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.45);z-index:2000}
.installer-select-modal-content{background:var(--card);padding:16px;border-radius:10px;min-width:320px;max-width:720px}
.project-option{padding:8px;border-radius:6px;background:rgba(255,255,255,0.02);margin-bottom:6px;display:flex;align-items:center;gap:8px}
.project-option input{width:18px;height:18px}
.project-option .title{flex:1}

/* Removed old pair-control styles */

/* === Graph Editor (simple, reliable) === */
.graph-editor{margin-top:12px}
.graph-toolbar{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.graph-note{color:var(--muted);font-size:.85rem}
.graph-scroll{overflow:auto;border:1px solid rgba(255,255,255,0.08);border-radius:8px}
.graph-grid{display:grid;background:rgba(255,255,255,0.02);min-width:660px;}
/* 1 label column + 7 day columns */
.graph-grid[data-cols="8"]{grid-template-columns: 70px repeat(7, 1fr)}
.graph-col-header{display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700;background:rgba(18,24,39,0.96);border-bottom:1px solid rgba(255,255,255,0.06);padding:6px;position:sticky;top:0;z-index:5}
.graph-col-header .hdr-title{font-weight:700}
.graph-col-header .hdr-total{font-weight:600;color:var(--muted);font-size:.85rem;margin-top:2px}
.graph-row-label{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.8rem;border-right:1px solid rgba(255,255,255,0.06);height:20px;line-height:14px;border-bottom:1px solid rgba(255,255,255,0.06);}
.graph-cell{height:21px;cursor:pointer;border-right:1px solid #3e3e3e;border-bottom:1px solid #3e3e3e47;background:#121827;transition:background-color .1s ease}
.graph-cell.on{box-shadow:none !important}
.graph-overlay{position:absolute; inset:0; pointer-events:none; z-index:2}
.graph-run{position:absolute; left:0; right:0; top:0; bottom:0; background:var(--accent); border-radius:0px; box-shadow:0 6px 18px rgba(30,144,255,0.35);}
.graph-hover{position:absolute; display:none; background:rgba(255,255,255,0.12); pointer-events:none; z-index:1; border-radius:2px}
.graph-cell.col-hover:not(.on){background:rgba(255,255,255,0.06)}
.graph-col-header.col-hover{background:rgba(255,255,255,0.10)}
.graph-legend{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:.8rem}
.graph-legend .swatch{width:12px;height:12px;background:var(--accent);border-radius:3px}
.graph-actions{display:flex;gap:8px;align-items:center}