:root{
  /* Minimal light palette */
  --bg: #f7f8fb;
  --card: #ffffff;
  --muted: #6b7280;
  --text: #0f1724;
  --accent-1: #2563eb; /* blue */
  --accent-2: #7c3aed; /* indigo */
  --accent-3: #10b981; /* green */
  --danger: #ef4444; /* red for destructive actions */
  --glass: rgba(2,6,23,0.03);
}
*{box-sizing:border-box}
html,body{height:100%}
/* Reserve vertical scrollbar space to keep layout from shifting between pages */
html{ overflow-y: scroll; }
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.container{
  max-width:860px;
  margin:0 auto;
  padding:10px;
}
/* Slight inset for top-level page headers so they line up with content */
.container > h1{ padding-left:6px; margin-top:6px; }
.profile{
  display:flex;
  gap:16px;
  align-items:center;
  padding:16px;
  border-radius:10px;
  background: var(--card);
  border: 1px solid rgba(15,23,36,0.04);
}
.avatar{width:76px;height:76px;flex:0 0 76px}
.avatar-svg{width:100%;height:100%;border-radius:10px}
.profile-info .name{margin:0;font-size:18px;font-weight:700}
.profile-info .role{margin:6px 0;color:var(--muted)}
.profile-info .description{margin:0;color:var(--muted);max-width:720px;font-size:14px}

.download-resume{
  display:inline-block;
  margin-top:8px;
  padding:8px 12px;
  background: #11182700;
  border: 1px solid rgba(15,23,36,0.08);
  border-radius:8px;
  color: var(--text);
  text-decoration: none;
  font-size:13px;
}
.download-resume:hover{background:rgba(15,23,36,0.02)}

/* Button style used across pages */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;border-radius:8px;background:var(--accent-1);color:#fff;text-decoration:none;font-weight:600;border:0}
.btn:hover{opacity:0.95}
.btn .icon{width:16px;height:16px;display:inline-block;flex:0 0 16px}

.btn{cursor:pointer}

/* light button variant */
.btn.light{
  background:#fff;
  color:#111;
  border:1px solid rgba(15,23,36,0.06);
  padding:10px 14px;
  font-weight:600;
  font-size:14px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

/* Library button: keep text dark but icon muted grey */
.btn.light .icon{color:var(--muted)}

/* spacing between profile and library button */
.upload-area{margin-top:12px;margin-bottom:12px; display:flex; align-items:center; gap:12px}

/* Profile button should match the avatar placeholder gray */
.btn.light.profile-btn{ 
  background: #eef2f7; /* match avatar placeholder background */
  color: var(--muted);
  border: 1px solid rgba(15,23,36,0.04);
  padding:10px 14px;
  border-radius:8px;
  font-weight:600;
  text-decoration:none;
}
.btn.light.profile-btn .icon{ color: var(--muted); }

/* When profile button is disabled (we're on the profile page), make it inert */
.profile-btn.disabled{ pointer-events: none; cursor: default; opacity: 0.9; }
.profile-btn.disabled:focus{ outline: none; }

/* Top nav area styled like other sections so it lines up visually */
.top-nav{ display:block; background: var(--card); border: 1px solid rgba(15,23,36,0.04); border-radius:8px; padding:10px 12px; margin-top:0; margin-bottom:12px }
.top-nav .nav-toggle{ width:100%; justify-content:center }
/* Remove the inner button border so the icon sits cleanly inside the top card */
.top-nav .nav-toggle.btn.light{ background: transparent; border: none; padding:8px; }
.top-nav .nav-toggle.btn.light .icon{ color:var(--muted); }
.top-nav{ display:block; background: var(--card); border: 1px solid rgba(15,23,36,0.04); border-radius:8px; padding:8px 6px; margin-top:0; margin-bottom:12px }
.top-nav .top-nav-scroll{ display:flex; gap:8px; align-items:center; overflow-x:auto; padding:6px; -webkit-overflow-scrolling:touch }
.top-nav .top-nav-scroll::-webkit-scrollbar{ height:8px }
.top-nav .top-nav-scroll::-webkit-scrollbar-thumb{ background: rgba(2,6,23,0.06); border-radius:8px }
.top-nav .menu-button{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap }
.top-nav .menu-button .icon{ color:var(--muted) }
/* Override .btn.light color so nav buttons don't inherit black from that class */
.top-nav .menu-button.btn.light{ color:var(--muted) }

/* Ensure active state overrides the muted rule and shows black */
.top-nav .menu-button.btn.light.active{ color:var(--text) }
.top-nav .menu-button .menu-label{ font-weight:700; color:var(--text); margin:0 }

/* Ensure the top nav buttons look compact and align with other .btn.light usage */
.top-nav .menu-button.btn.light{ background: transparent; border: none; padding:6px 10px }
.top-nav .menu-button.btn.light:hover{ background: rgba(2,6,23,0.03) }

/* Active state: show current page in black to match header text */
.top-nav .menu-button.active{ color:var(--text) }
.top-nav .menu-button.active .icon{ color:var(--text) }
.top-nav .menu-button.active .icon path, .top-nav .menu-button.active .icon rect{ stroke:var(--text) !important; fill:var(--text) !important }
.top-nav .menu-button.active .menu-label{ color:var(--text) }

/* Explicit: ensure any non-active nav icon paths stay muted and unfilled */
.top-nav .menu-button:not(.active) .icon path,
.top-nav .menu-button:not(.active) .icon rect{
  stroke: var(--muted) !important;
  fill: none !important;
}

/* Menu page grid */
.menu-grid{ display:flex; flex-direction:column; gap:12px; align-items:stretch; width:100% }
.menu-item{ display:flex; flex-direction:row; align-items:center; justify-content:flex-start; padding:12px 16px; border-radius:8px; width:100%; gap:12px }
.menu-item .icon{ width:20px; height:20px }
.menu-label{ margin:0; margin-left:8px; font-weight:700; color:var(--text) }

.lib-item{display:flex;align-items:center;gap:10px;padding:8px 0}
.muted{color:var(--muted);margin-left:8px}

/* Downloads section */
.downloads{margin:16px 0;padding:12px;border-radius:8px;background:var(--card);border:1px solid rgba(15,23,36,0.04)}
.downloads-title{margin:0 0 8px 0;font-size:14px;color:var(--text)}
.download-list{margin:0;padding:0;list-style:none}
.download-list li{padding:10px 0px;border-top:1px solid rgba(15,23,36,0.03)}
.download-list li:first-child{border-top:0}
.download-list a{color:#111;text-decoration:none;display:flex;align-items:center;gap:10px;padding:0}
.file-icon{flex:0 0 20px;opacity:0.95;margin-right:0px}
.download-list a .file-icon{background:none;color:inherit;border-radius:0;padding:0;display:inline-flex;align-items:center;justify-content:center}
.download-list a .file-icon svg{width:16px;height:16px;display:block}
.download-list a .file-icon svg path,
.download-list a .file-icon svg rect{
  stroke:var(--muted) !important;
  fill:#fff !important;
}

/* ensure any file-icon SVG uses muted stroke and white fill (covers library rows and pinned list) */
.file-icon svg path, .file-icon svg rect{ stroke:var(--muted) !important; fill:#fff !important; }

/* Library table styles (re-affirmed and tuned) */
#library-table{ width:100%; border-collapse:collapse; margin-top:0.5rem; }
#library-table thead th{ text-align:left; font-size:0.9rem; color:var(--muted); padding:0.5rem; border-bottom:1px solid rgba(0,0,0,0.06); }
#library-table tbody td{ padding:0.6rem 0.5rem; border-bottom:1px solid rgba(0,0,0,0.03); }
#library-table tbody tr td:last-child{ text-align:right; }
.library-actions{ display:flex; gap:0.75rem; align-items:center; margin-bottom:0.5rem; }
.library-actions .left-actions{ display:flex; align-items:center; }
.library-actions .right-actions{ display:flex; align-items:center; gap:0.5rem; }
.library-actions input[type=file]{ font-size:13px; color:inherit; }
.library-table-wrap{ background:var(--card); padding:0.5rem; border-radius:6px; }
/* compact icon buttons for actions */
.action-btn{ background:transparent;border:0;padding:6px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer }
.action-btn:hover{ background:rgba(2,6,23,0.03); color:var(--text) }
/* Confirm/yes button for destructive actions (delete/reset) */
.confirm-yes{ color: var(--danger); }
.confirm-yes:hover{ background: rgba(239,68,68,0.06); color: var(--danger); }

/* Filled destructive action for inline confirms (compact) */
.action-btn.danger{
  background: var(--danger);
  color: #fff;
  border-radius: 6px;
  padding: 6px 8px;
}
.action-btn.danger:hover{ filter: brightness(0.95); }
.action-btn.danger:focus{ outline: 3px solid rgba(239,68,68,0.18); outline-offset: 2px; }
#action-btn-svg
.action-btn svg{ width:16px;height:16px; display:block; transition: fill 180ms ease, stroke 180ms ease, color 180ms ease; }
.action-btn svg path, .action-btn svg rect{ transition: fill 180ms ease, stroke 180ms ease; }
#library-table thead th:last-child{ width:120px; }
/* when bookmark is filled (uses currentColor via fill or currentColor), make it use accent color when pinned */
.action-btn.pinned{ color:var(--accent-1); }
/* Make pinned bookmark fill and stroke the blue accent; only affects buttons marked .pinned */
.action-btn.pinned svg{ color:var(--accent-1); }
.action-btn.pinned svg path, .action-btn.pinned svg rect{ fill:var(--accent-1); stroke:var(--accent-1); }

/* Library page tweaks: clean minimal layout */
#library-list{margin-top:12px}
#upload-form-lib{display:flex;gap:8px;align-items:center;margin-bottom:12px}
#upload-form-lib input{flex:1}
#upload-btn{padding:10px 14px;border-radius:8px;border:1px solid rgba(15,23,36,0.06);background:#fff;color:#111;cursor:pointer}
#upload-btn:hover{opacity:0.95}
.library-actions{display:flex;gap:8px;align-items:center;margin-bottom:12px}
#library-table{width:100%;border-collapse:collapse;margin-top:8px}
#library-table thead th{font-weight:600;text-align:left;padding:8px;border-bottom:1px solid rgba(15,23,36,0.04)}
/* Make Name (1st) header black for stronger emphasis */
#library-table thead th:nth-child(1){ color: #000; }
#library-table tbody td{padding:10px 8px;border-bottom:1px solid rgba(15,23,36,0.03)}
#library-table tbody tr:last-child td{border-bottom:0}
.file-size{ /* removed: sizing column not used anymore */ display:none !important; }
.download-list a:hover{text-decoration:underline}

/* Disable hover visual changes for pinned Files/Data lists on the index page
   Keep hover behavior for other parts of the app but ensure pinned lists are inert */
.downloads .download-list a:hover{
  text-decoration: none; /* no underline on hover */
  color: inherit;       /* don't change text color */
}
.downloads .download-list a:hover .file-icon svg path,
.downloads .download-list a:hover .file-icon svg rect{
  stroke: var(--muted) !important; /* keep muted stroke */
  fill: #fff !important;           /* keep white fill */
}

/* Inline edit input used in data table: match surrounding font and remove blue focus ring */
.inline-edit{
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  line-height: 1;
  display: inline-block;
  min-width: 120px;
}
.inline-edit:focus{
  outline: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
}

/* Hide native file input but keep it accessible; use label.btn.light as visual control */
#file-input-lib{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }
.library-actions label.btn.light{ display:inline-flex; align-items:center; gap:8px; }
#upload-btn, .library-actions .btn.light{
  padding:10px 14px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  font-size:14px;
}

/* Stack visuals vertically as modular blocks */
.charts{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:18px;
}
.chart-card{
  background: var(--card);
  padding:12px 14px 14px 14px;
  border-radius:8px;
  border: 1px solid rgba(15,23,36,0.04);
  overflow: hidden; /* keep wide children from causing page-wide overflow; heatmap will scroll internally */
}
.chart-card h3{margin:0 0 8px 0;font-size:13px;color:var(--text);font-weight:600}
.chart-card canvas{width:100% !important; height:140px !important; display:block}

/* chart header: small icon left of title for visual identification */
.chart-header{ display:flex; align-items:center; gap:8px; margin-bottom:8px }
.chart-header .file-icon{ flex:0 0 0px; display:inline-flex; align-items:center; justify-content:center; }
.chart-header .file-icon svg{ width:16px; height:16px }
.chart-header h3{ margin:0; font-size:13px; font-weight:600 }

/* Heatmap styles */
.heatmap-grid{ display:flex; gap:6px; align-items:flex-start }
.heatmap-col{ display:flex; flex-direction:column; gap:6px }
.heatmap-day{ width:12px; height:12px; border-radius:2px; background:#ebedf0 }
.heatmap-day.level-1{ background:#9be9a8 }
.heatmap-day.level-2{ background:#40c463 }
.heatmap-day.level-3{ background:#30a14e }
.heatmap-day.level-4{ background:#216e39 }
.heatmap-legend{ display:flex; align-items:center; gap:6px; margin-top:8px }
.heatmap-legend .legend-item{ display:inline-flex; align-items:center; gap:8px; margin-right:10px; color:var(--muted); font-size:13px }
.heatmap-legend .legend-item .legend-box{ width:12px; height:12px; border-radius:3px; flex:0 0 12px; box-shadow: 0 0 0 1px rgba(0,0,0,0.02) inset }
.heatmap-legend .legend-item .legend-label{ margin-left:0; color:var(--muted); font-size:16px }

.legend-box{ width:12px; height:12px; border-radius:2px }
.legend-box.level-0{ background:#ebedf0 }
.legend-box.level-1{ background:#9be9a8 }
.legend-box.level-2{ background:#40c463 }
.legend-box.level-3{ background:#30a14e }
.legend-box.level-4{ background:#216e39 }

/* Scrollable viewport for the heatmap */
.heatmap-viewport{
  display:block;
  width:100%;
  overflow-x:auto;
  overflow-y:hidden; /* prevent vertical scrollbar */
  padding-bottom:6px;
  max-width:100%;
  -webkit-overflow-scrolling: touch;
}
.heatmap-grid{ display:inline-flex; gap:6px; align-items:flex-start; min-width: max-content; }
.heatmap-col{ flex: 0 0 auto; }
.heatmap-day{ box-sizing: border-box; }

/* Tooltip */
.heatmap-tooltip{ background:var(--text); color:#fff; padding:6px 8px; border-radius:6px; font-size:13px; display:none }

/* Mobile: keep library action buttons on the same row but allow file names to wrap */
@media (max-width:520px){
  /* Layout each table row as a horizontal flex row so actions stay pinned to the right */
  #library-table tbody tr{ display:flex; align-items:center; gap:8px; }
  /* first cell (name) grows and may wrap; keep min-width:0 to allow proper truncation/wrapping */
  #library-table tbody tr td:first-child{ flex:1 1 auto; min-width:0; display:block; }
  /* actions cell stays fixed width on the right */
  #library-table tbody tr td:last-child{ flex:0 0 auto; display:block; text-align:right }
  .lib-file-link{ display:inline-flex; align-items:center; gap:8px; }
  /* allow the label text within the link to wrap across lines */
  .lib-file-link span{ white-space:normal; word-break:keep-all; }
  /* actions should never wrap and keep their layout */
  .actions-cell{ white-space:nowrap }
  .action-btn{ flex:0 0 auto }
}