:root{
  --font-body:"Space Grotesk", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-tech:"JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --bg:#080b12;
  --bg-2:#101624;
  --panel:#111827;
  --panel-2:#151f31;
  --panel-rgb:17,24,39;
  --panel-2-rgb:21,31,49;
  --field:#0b1220;
  --sidebar-bg:rgba(8,11,18,.78);
  --line:#263244;
  --line-soft:#1e293b;
  --text:#e5edf8;
  --muted:#8fa2bd;
  --accent:#38bdf8;
  --accent-2:#22c55e;
  --accent-3:#f59e0b;
  --danger:#fb7185;
  --purple:#a78bfa;
  --shadow:0 20px 50px rgba(0,0,0,.32);
  --radius:22px;
}

:root[data-theme="light"]{
  --bg:#f4f7fb;
  --bg-2:#eaf0f8;
  --panel:#ffffff;
  --panel-2:#f8fafc;
  --panel-rgb:255,255,255;
  --panel-2-rgb:248,250,252;
  --field:#ffffff;
  --sidebar-bg:rgba(255,255,255,.88);
  --line:#cbd5e1;
  --line-soft:#e2e8f0;
  --text:#0f172a;
  --muted:#64748b;
  --accent:#0284c7;
  --accent-2:#16a34a;
  --accent-3:#d97706;
  --danger:#dc2626;
  --purple:#7c3aed;
  --shadow:0 18px 42px rgba(15,23,42,.12);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  background:
    linear-gradient(90deg, rgba(56,189,248,.055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(56,189,248,.055) 1px, transparent 1px),
    radial-gradient(circle at top left, rgba(56,189,248,.12), transparent 34rem),
    radial-gradient(circle at 82% 18%, rgba(34,197,94,.11), transparent 20rem),
    radial-gradient(circle at 72% 78%, rgba(56,189,248,.11), transparent 24rem),
    radial-gradient(circle at top right, rgba(167,139,250,.10), transparent 28rem),
    var(--bg);
  background-size:82px 82px,82px 82px,auto,auto,auto,auto,auto;
  color:var(--text);
  min-height:100vh;
  position:relative;
  animation:fiberGridDrift 42s linear infinite;
}

body[data-theme="light"]{
  background:
    linear-gradient(90deg, rgba(2,132,199,.075) 1px, transparent 1px),
    linear-gradient(180deg, rgba(2,132,199,.075) 1px, transparent 1px),
    radial-gradient(circle at top left, rgba(2,132,199,.12), transparent 34rem),
    radial-gradient(circle at 82% 18%, rgba(22,163,74,.10), transparent 20rem),
    radial-gradient(circle at 72% 78%, rgba(2,132,199,.11), transparent 24rem),
    radial-gradient(circle at top right, rgba(124,58,237,.08), transparent 28rem),
    var(--bg);
  background-size:82px 82px,82px 82px,auto,auto,auto,auto,auto;
}

button,input,select,textarea,table{
  font-family:var(--font-body);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 22%, rgba(56,189,248,.36) 0 2px, transparent 3px),
    radial-gradient(circle at 28% 64%, rgba(34,197,94,.24) 0 2px, transparent 3px),
    radial-gradient(circle at 48% 30%, rgba(56,189,248,.28) 0 2px, transparent 3px),
    radial-gradient(circle at 64% 70%, rgba(167,139,250,.24) 0 2px, transparent 3px),
    radial-gradient(circle at 84% 34%, rgba(56,189,248,.30) 0 2px, transparent 3px),
    linear-gradient(112deg, transparent 8%, rgba(56,189,248,.20) 8.15%, transparent 8.35%, transparent 42%, rgba(34,197,94,.14) 42.15%, transparent 42.35%),
    linear-gradient(28deg, transparent 16%, rgba(56,189,248,.15) 16.15%, transparent 16.35%, transparent 70%, rgba(167,139,250,.13) 70.15%, transparent 70.35%);
  opacity:.9;
  background-size:auto,auto,auto,auto,auto,160% 160%,140% 140%;
  animation:fiberSignalSweep 18s ease-in-out infinite alternate;
  will-change:opacity,background-position,filter;
}
body[data-theme="light"]::before{opacity:.55}

body::after{
  content:"";
  position:fixed;
  right:5vw;
  bottom:4vh;
  width:min(42vw,560px);
  aspect-ratio:1;
  z-index:-1;
  pointer-events:none;
  border-radius:50%;
  border:1px solid rgba(56,189,248,.12);
  background:
    radial-gradient(circle, transparent 58%, rgba(56,189,248,.10) 59%, transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(56,189,248,.06), transparent 58%),
    linear-gradient(90deg, transparent 49.8%, rgba(56,189,248,.10) 50%, transparent 50.2%),
    linear-gradient(0deg, transparent 49.8%, rgba(56,189,248,.10) 50%, transparent 50.2%);
  opacity:.75;
  filter:blur(.1px);
  animation:fiberRingRotate 38s linear infinite;
  will-change:transform,opacity;
}

@keyframes fiberGridDrift{
  0%{background-position:0 0,0 0,0 0,0 0,0 0,0 0,0 0}
  100%{background-position:82px 41px,41px 82px,0 0,0 0,0 0,0 0,0 0}
}

@keyframes fiberSignalSweep{
  0%{background-position:0 0,0 0,0 0,0 0,0 0,0% 50%,100% 50%;filter:saturate(1)}
  50%{opacity:1;filter:saturate(1.25)}
  100%{background-position:0 0,0 0,0 0,0 0,0 0,100% 50%,0% 50%;filter:saturate(1.1)}
}

@keyframes fiberRingRotate{
  0%{transform:rotate(0deg) scale(1)}
  50%{opacity:.92}
  100%{transform:rotate(360deg) scale(1)}
}

@media (prefers-reduced-motion: reduce){
  body,
  body::before,
  body::after{
    animation:none!important;
  }
}

.app-shell{display:flex; min-height:100vh}
.sidebar-toggle{
  position:fixed;
  top:18px;
  left:18px;
  z-index:10001;
  width:44px;
  height:44px;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  border:1px solid rgba(56,189,248,.28);
  border-radius:14px;
  background:rgba(15,23,42,.92);
  color:var(--text);
  box-shadow:0 12px 30px rgba(0,0,0,.28);
  cursor:pointer;
  transition:.18s ease;
}
body[data-theme="light"] .sidebar-toggle{background:rgba(255,255,255,.92);box-shadow:0 12px 30px rgba(15,23,42,.14)}
.sidebar-toggle:hover{transform:translateY(-1px);border-color:rgba(56,189,248,.55);background:#172033}
body[data-theme="light"] .sidebar-toggle:hover{background:#f8fafc}
.sidebar-toggle span,.sidebar-toggle::before,.sidebar-toggle::after{
  content:"";
  display:block;
  width:18px;
  height:2px;
  border-radius:999px;
  background:currentColor;
}
.sidebar-toggle.is-collapsed span{width:14px}
.sidebar-toggle.is-collapsed::before{transform:translateY(1px) rotate(35deg);width:11px;transform-origin:right center}
.sidebar-toggle.is-collapsed::after{transform:translateY(-1px) rotate(-35deg);width:11px;transform-origin:right center}
.sidebar{
  width:282px;
  padding:26px 20px;
  border-right:1px solid var(--line-soft);
  background:rgba(8,11,18,.78);
  background:var(--sidebar-bg);
  backdrop-filter:blur(20px);
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(56,189,248,.38) transparent;
  transition:width .22s ease,padding .22s ease,border-color .22s ease,opacity .18s ease;
}
.sidebar::-webkit-scrollbar{width:8px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(56,189,248,.32);border-radius:999px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar .brand{padding-top:42px}
.app-shell.sidebar-collapsed .sidebar{
  width:76px;
  padding:74px 10px 18px;
  opacity:1;
}
.app-shell.sidebar-collapsed .content,
.app-shell.sidebar-collapsed .project-content{max-width:calc(100vw - 76px)!important}
.brand{display:flex;gap:14px;align-items:center;margin-bottom:32px}
.brand-logo-wrap{display:block}
.brand-logo{display:block;width:100%;max-width:240px;height:auto;filter:drop-shadow(0 18px 40px rgba(56,189,248,.18));margin-bottom:12px}
.brand-copy h1{font-size:20px;margin:0;letter-spacing:-.02em}
.brand-copy p{margin:3px 0 0;color:var(--muted);font-size:13px}
.app-shell.sidebar-collapsed .brand{display:none}
.nav-list{display:grid;gap:8px;margin-bottom:28px}
.sidebar-divider{
  height:1px;
  margin:18px 0;
  background:linear-gradient(90deg,transparent,rgba(148,163,184,.48),transparent);
}
.nav-list a{
  color:var(--muted);text-decoration:none;padding:12px 14px;border-radius:14px;
  transition:.18s ease;border:1px solid transparent;
}
.app-shell.sidebar-collapsed .nav-list{gap:10px;margin:0}
.app-shell.sidebar-collapsed .sidebar-divider{margin:12px 8px}
.app-shell.sidebar-collapsed .nav-list a{
  width:54px;
  height:48px;
  display:grid;
  place-items:center;
  padding:0;
  font-size:0;
  border-radius:16px;
}
.app-shell.sidebar-collapsed .nav-list a::before{
  content:attr(data-short);
  font-size:12px;
  font-weight:950;
  font-family:var(--font-tech);
  letter-spacing:.04em;
}
.nav-list a:hover,.nav-list a.active{
  color:var(--text);background:rgba(56,189,248,.08);border-color:rgba(56,189,248,.18)
}
.side-card{
  background:linear-gradient(180deg,rgba(17,24,39,.94),rgba(15,23,42,.85));
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  margin-top:14px;
}
.side-card p{margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.45}

.content{flex:1;padding:28px;max-width:calc(100vw - 282px)}
.hero{
  display:flex;justify-content:space-between;gap:20px;align-items:flex-end;
  border:1px solid var(--line);
  background:linear-gradient(135deg,rgba(var(--panel-rgb),.96),rgba(var(--panel-2-rgb),.82));
  border-radius:var(--radius);
  padding:28px;
  box-shadow:var(--shadow);
}
.eyebrow{
  color:var(--accent);
  text-transform:uppercase;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  font-family:var(--font-tech);
}
.hero h1,
.hero h2{
  margin:8px 0 8px;font-size:34px;line-height:1.05;letter-spacing:-.04em;
}
.hero p{margin:0;color:var(--muted);max-width:760px}
.hero .eyebrow{font-size:11px;line-height:1.2}
.hero h1,
.hero h2,.project-content .project-page-title h1{
  font-size:34px;
  line-height:1.05;
  letter-spacing:-.04em;
}
.hero p,.project-content .project-page-title p{
  font-size:16px;
  line-height:1.55;
}
.source-note{
  flex-basis:100%;
  margin:10px 0 0;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.productivity-hero-copy{
  flex:1 1 100%;
  min-width:260px;
  max-width:none;
}
.productivity-hero{
  display:block;
}
.productivity-hero h1{
  white-space:nowrap;
  font-size:clamp(22px,3.1vw,34px);
}
.productivity-hero-actions{
  flex:1 1 100%;
  width:100%;
  max-width:none;
  margin-top:18px;
  align-items:center;
  justify-content:flex-start;
}
.productivity-hero-actions .btn,
.productivity-hero-actions .year-toggle{
  flex:0 0 auto;
}
.productivity-hero-actions .btn{
  white-space:nowrap;
}
.year-toggle{
  display:inline-flex;
  gap:4px;
  align-items:center;
  padding:4px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(var(--panel-2-rgb),.86);
}
.year-toggle-btn{
  min-width:64px;
  border:0;
  border-radius:10px;
  padding:8px 12px;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  font-weight:900;
  font-family:var(--font-tech);
  transition:.18s ease;
}
.year-toggle-btn:hover{color:var(--text);background:rgba(56,189,248,.10)}
.year-toggle-btn.active{
  color:#06111d;
  background:linear-gradient(135deg,var(--accent),#60a5fa);
  box-shadow:0 10px 22px rgba(56,189,248,.18);
}
body[data-theme="light"] .year-toggle{background:#ffffff}
body[data-theme="light"] .year-toggle-btn.active{color:#ffffff}
.btn{
  border:0;border-radius:14px;padding:11px 16px;cursor:pointer;
  color:var(--text);font-weight:800;transition:.18s ease;
}
.btn.primary{background:linear-gradient(135deg,var(--accent),#2563eb);color:#06111d}
.btn.secondary{background:#1f2937;color:var(--text);border:1px solid var(--line)}
body[data-theme="light"] .btn.secondary{background:#ffffff}
.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}

.theme-toggle{
  position:fixed;
  top:18px;
  left:72px;
  z-index:10001;
  min-width:92px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid rgba(56,189,248,.28);
  border-radius:14px;
  background:rgba(15,23,42,.92);
  color:var(--text);
  box-shadow:0 12px 30px rgba(0,0,0,.28);
  cursor:pointer;
  font-size:12px;
  font-weight:900;
  transition:.18s ease;
}
.theme-toggle:hover{transform:translateY(-1px);border-color:rgba(56,189,248,.55)}
.theme-toggle-icon{font-size:15px;line-height:1}
body[data-theme="light"] .theme-toggle{background:rgba(255,255,255,.92);box-shadow:0 12px 30px rgba(15,23,42,.14)}

.filters-panel{
  display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:14px;
  margin:20px 0;
  background:rgba(var(--panel-rgb),.78);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
}
.filters-panel.has-report-action{
  grid-template-columns:repeat(4,minmax(150px,1fr)) minmax(180px,220px);
}
.filter-action .btn{
  width:100%;
  min-height:42px;
  border-radius:13px;
}
.activity-log-filter{
  display:grid;
  grid-template-columns:minmax(180px,1fr) minmax(150px,190px) minmax(150px,190px) auto auto;
  gap:12px;
  align-items:end;
  margin:0 0 14px;
  padding:14px;
  border:1px solid var(--line-soft);
  border-radius:16px;
  background:rgba(11,18,32,.62);
}
body[data-theme="light"] .activity-log-filter{
  background:#ffffff;
  border-color:var(--line);
}
.activity-log-filter .btn{min-height:42px}
.filter-group{display:grid;gap:7px}
.filter-group label,.import-grid span{
  color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em
}
select,input{
  background:var(--field);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:13px;
  padding:11px 12px;
  outline:none;
}
input::placeholder{color:#596981}
body[data-theme="light"] input::placeholder{color:#94a3b8}
.search{grid-column:auto / span 1}

.kpi-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:20px
}
.kpi-card{
  background:linear-gradient(180deg,rgba(var(--panel-rgb),.96),rgba(var(--panel-2-rgb),.9));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:0 16px 36px rgba(0,0,0,.18);
  min-height:130px;
}
.kpi-card.accent{
  background:linear-gradient(135deg,rgba(56,189,248,.18),rgba(167,139,250,.14));
  border-color:rgba(56,189,248,.28);
}
.kpi-label{display:block;color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.kpi-card strong{display:block;font-size:31px;letter-spacing:-.04em;margin:14px 0 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-card small{color:var(--muted)}

.grid{display:grid;gap:20px;margin-bottom:20px}
.two-col{grid-template-columns:1fr 1fr}
.panel{
  background:linear-gradient(180deg,rgba(var(--panel-rgb),.96),rgba(var(--panel-2-rgb),.9));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:0 16px 44px rgba(0,0,0,.22);
}
.panel.full{margin-bottom:20px}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.panel h3{margin:5px 0 0;font-size:20px;letter-spacing:-.03em}
.pill{
  border:1px solid rgba(56,189,248,.22);
  background:rgba(56,189,248,.09);
  color:#b7eaff;
  padding:7px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
body[data-theme="light"] .pill{
  background:#e0f2fe;
  border-color:#bae6fd;
  color:#075985;
}
canvas{width:100%;display:block;background:rgba(3,7,18,.26);border-radius:16px;border:1px solid rgba(148,163,184,.08)}
body[data-theme="light"] canvas{background:rgba(248,250,252,.8);border-color:var(--line-soft)}
.legend{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.legend-item{display:flex;gap:6px;align-items:center;color:var(--muted);font-size:12px}
.legend-dot{width:10px;height:10px;border-radius:99px;display:inline-block}

.table-wrap{
  overflow:auto;
  border:1px solid var(--line-soft);
  border-radius:16px;
  background:var(--field);
}
.table-wrap.compact{max-height:360px}
.diary-table{max-height:560px}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:12px 13px;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:top}
th{
  position:sticky;top:0;z-index:1;
  background:#101827;
  color:#bfd0e6;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
}
tr:hover td{background:rgba(56,189,248,.035)}
body[data-theme="light"] th{background:#eaf0f8;color:#334155}
body[data-theme="light"] tr:hover td{background:rgba(2,132,199,.045)}
td.num{text-align:right;font-variant-numeric:tabular-nums}
td .staff-chip{
  display:inline-block;padding:5px 8px;border-radius:99px;
  background:rgba(56,189,248,.08);color:#c7edff;border:1px solid rgba(56,189,248,.16);
  font-weight:800
}
body[data-theme="light"] td .staff-chip{
  background:#e0f2fe;
  border-color:#bae6fd;
  color:#075985;
}
.progress{
  height:8px;background:#111827;border-radius:999px;overflow:hidden;border:1px solid var(--line)
}
body[data-theme="light"] .progress{background:#e2e8f0}
.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.import-panel .muted{color:var(--muted);line-height:1.6}
.import-grid{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;align-items:end}
.import-grid label{display:grid;gap:8px}

footer{color:var(--muted);padding:10px 2px 32px;font-size:13px}
.copyright-note{
  display:block;
  width:100%;
  margin-top:8px;
  color:var(--muted);
  font-family:var(--font-tech);
  font-size:11px;
  letter-spacing:.04em;
}

@media (max-width:1200px){
  .kpi-grid{grid-template-columns:repeat(3,1fr)}
  .two-col{grid-template-columns:1fr}
  .filters-panel,
  .filters-panel.has-report-action{grid-template-columns:repeat(2,1fr)}
  .productivity-hero-copy{
    max-width:none;
  }
  .productivity-hero-actions{
    flex:1 1 100%;
    width:100%;
    margin-top:18px;
    justify-content:flex-start;
  }
}
@media (max-width:860px){
  .app-shell{display:block}
  .sidebar{position:relative;width:auto;height:auto}
  .sidebar .brand{padding-top:44px}
  .app-shell.sidebar-collapsed .sidebar{height:76px;width:auto;padding:16px 72px 12px 14px}
  .app-shell.sidebar-collapsed .nav-list{display:flex;overflow-x:auto}
  .app-shell.sidebar-collapsed .content,
  .app-shell.sidebar-collapsed .project-content{max-width:none!important}
  .content{max-width:none;padding:18px}
  .hero{display:block}
  .hero-actions{justify-content:flex-start;margin-top:18px}
  .productivity-hero h1{
    white-space:nowrap;
    font-size:clamp(18px,5.1vw,32px)!important;
    line-height:1.08!important;
  }
  .productivity-hero-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
  }
  .productivity-hero-actions .home-btn,
  .productivity-hero-actions .year-toggle{
    grid-column:1 / -1;
    width:100%;
  }
  .productivity-hero-actions .year-toggle{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .productivity-hero-actions .btn,
  .productivity-hero-actions .year-toggle-btn{
    width:100%;
  }
  .productivity-hero-actions #resetBtn{
    grid-column:1 / -1;
  }
  .kpi-grid{grid-template-columns:1fr}
  .filters-panel,
  .filters-panel.has-report-action,
  .import-grid{grid-template-columns:1fr}
}


/* Daily activity drill-down */
.daily-note{color:var(--muted);margin:-4px 0 14px;line-height:1.55}
.daily-date-filter{
  display:grid;
  grid-template-columns:minmax(120px,180px) minmax(240px,520px);
  gap:10px;
  align-items:end;
  margin-bottom:14px;
}
.daily-date-filter label{
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:900;
}
.daily-date-filter select{
  width:100%;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--field);
  color:var(--text);
  padding:11px 12px;
  font-weight:800;
}
body[data-theme="light"] .daily-date-filter select{background:#ffffff;color:#0f172a}
.daily-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:4px 0 14px}
.mini-kpi{background:#0b1220;border:1px solid var(--line-soft);border-radius:16px;padding:13px 14px}
.mini-kpi span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;margin-bottom:8px}
.mini-kpi strong{font-size:20px;letter-spacing:-.03em}
body[data-theme="light"] .mini-kpi{
  background:#ffffff;
  border-color:var(--line);
  color:var(--text);
}
body[data-theme="light"] .mini-kpi span{color:#64748b}
body[data-theme="light"] .mini-kpi strong{color:#0f172a}
.daily-table{max-height:520px}
.date-link{
  border:1px solid rgba(56,189,248,.18);
  background:rgba(56,189,248,.08);
  color:#b7eaff;
  padding:5px 8px;
  border-radius:999px;
  font-weight:800;
  cursor:pointer;
}
.date-link:hover{background:rgba(56,189,248,.18);border-color:rgba(56,189,248,.45)}
body[data-theme="light"] .date-link{
  background:#e0f2fe;
  border-color:#bae6fd;
  color:#075985;
}
body[data-theme="light"] .date-link:hover{
  background:#bae6fd;
  border-color:#7dd3fc;
}
.muted-cell{color:var(--muted);text-align:center;padding:28px!important}
@media (max-width:1200px){.daily-summary-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){.daily-summary-grid,.activity-log-filter,.daily-date-filter{grid-template-columns:1fr}}

.file-hint{
  margin: 12px 0 16px;
  padding: 14px 16px;
  border: 1px solid rgba(56,189,248,.22);
  border-radius: 16px;
  background: rgba(8,47,73,.28);
  color: var(--text);
  line-height: 1.65;
}
body[data-theme="light"] .file-hint{background:#e0f2fe;color:var(--text)}
.file-hint code{
  color:#bae6fd;
  font-weight:700;
}
body[data-theme="light"] .file-hint code{color:#075985}


/* Project drilldown */
.project-note{color:var(--muted);margin:-4px 0 14px;line-height:1.6}
.project-toolbar{display:grid;grid-template-columns:1fr auto;gap:12px;margin-bottom:14px;align-items:center}
.project-cards{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:12px;
  margin-bottom:14px;
  max-height:390px;
  overflow:auto;
  padding:2px 2px 8px;
}
.project-card{
  position:relative;
  border:1px solid var(--line);
  background:#0b1220;
  color:var(--text);
  border-radius:18px;
  padding:14px 14px 13px;
  min-height:126px;
  text-align:left;
  cursor:pointer;
  transition:.18s ease;
}
.project-card:hover{transform:translateY(-1px);border-color:rgba(56,189,248,.42);background:rgba(56,189,248,.06)}
.project-card.active{border-color:rgba(56,189,248,.74);box-shadow:0 0 0 3px rgba(56,189,248,.10);background:linear-gradient(135deg,rgba(56,189,248,.15),rgba(34,197,94,.08))}
.project-card strong{display:block;font-size:16px;line-height:1.25;margin:18px 0 10px;color:#e5edf8}
.project-card span:not(.project-rank){display:block;color:var(--muted);font-size:12px;margin-bottom:6px}
.project-card small{display:block;color:#6f829c;font-size:11px}
.project-rank{position:absolute;top:10px;right:12px;color:#b7eaff;font-size:11px;font-weight:900;border:1px solid rgba(56,189,248,.24);border-radius:999px;padding:3px 7px;background:rgba(56,189,248,.08)}
.project-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:4px 0 14px}
.project-detail-grid{margin-bottom:14px}
.sub-panel{background:#0b1220;border:1px solid var(--line-soft);border-radius:18px;padding:15px}
.mini-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}
.mini-head strong{font-size:15px;color:#dbeafe}
.project-staff-wrap{max-height:285px}
.matched-title-list{display:grid;gap:9px;max-height:285px;overflow:auto;padding-right:4px}
.matched-title-item{border:1px solid var(--line-soft);background:rgba(15,23,42,.78);border-radius:14px;padding:10px 12px}
.matched-title-item strong{display:block;font-size:13px;color:#e5edf8;margin-bottom:5px;line-height:1.35}
.matched-title-item span{display:block;color:var(--muted);font-size:12px}
.project-activity-table{max-height:580px}
.project-link{
  border:1px solid rgba(56,189,248,.18);
  background:rgba(56,189,248,.08);
  color:#b7eaff;
  padding:5px 8px;
  border-radius:999px;
  font-weight:800;
  cursor:pointer;
  text-align:left;
}
.project-link:hover{background:rgba(56,189,248,.18);border-color:rgba(56,189,248,.45)}
.empty-panel{color:var(--muted);border:1px dashed var(--line);border-radius:16px;padding:18px;text-align:center;background:#0b1220}
@media (max-width:1200px){.project-summary-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){.project-toolbar,.project-summary-grid{grid-template-columns:1fr}.project-cards{grid-template-columns:1fr}}

/* Productivity traffic-light grading */
.pct-cell{min-width:90px}
.pct-badge{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-width:70px;
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  font-variant-numeric:tabular-nums;
  color:hsl(var(--pct-hue), 92%, 74%);
  background:linear-gradient(135deg, hsla(var(--pct-hue), 82%, 48%, var(--pct-alpha,.18)), rgba(15,23,42,.82));
  border:1px solid hsla(var(--pct-hue), 82%, 52%, .48);
  box-shadow:inset 0 0 14px hsla(var(--pct-hue), 82%, 52%, .10), 0 0 18px hsla(var(--pct-hue), 82%, 52%, .08);
}
.pct-missing{
  color:#718096;
  background:rgba(100,116,139,.08);
  border-color:rgba(148,163,184,.14);
  box-shadow:none;
}
.pct-grade-green-deep{
  color:#86efac;
  background:linear-gradient(135deg, rgba(20,83,45,.72), rgba(5,46,22,.92));
  border-color:rgba(74,222,128,.72);
}
.pct-grade-green-dark{
  color:#bbf7d0;
  background:linear-gradient(135deg, rgba(22,101,52,.62), rgba(15,23,42,.86));
  border-color:rgba(34,197,94,.66);
}
.pct-grade-green-light{
  color:#d9f99d;
  background:linear-gradient(135deg, rgba(101,163,13,.42), rgba(15,23,42,.82));
  border-color:rgba(132,204,22,.58);
}
.pct-grade-yellow-green{
  color:#f7fee7;
  background:linear-gradient(135deg, rgba(163,230,53,.38), rgba(15,23,42,.82));
  border-color:rgba(190,242,100,.58);
}
.pct-grade-red-light{
  color:#fecaca;
  background:linear-gradient(135deg, rgba(248,113,113,.28), rgba(15,23,42,.82));
  border-color:rgba(248,113,113,.52);
}
.pct-grade-red-dark{
  color:#fee2e2;
  background:linear-gradient(135deg, rgba(127,29,29,.72), rgba(69,10,10,.92));
  border-color:rgba(239,68,68,.72);
}
body[data-theme="light"] .pct-badge{
  color:hsl(var(--pct-hue), 78%, 30%);
  background:linear-gradient(135deg, hsla(var(--pct-hue), 78%, 50%, .20), rgba(255,255,255,.92));
  border-color:hsla(var(--pct-hue), 70%, 42%, .38);
  box-shadow:none;
}
body[data-theme="light"] .pct-grade-green-deep{
  color:#065f46;
  background:linear-gradient(135deg, rgba(34,197,94,.28), rgba(220,252,231,.96));
  border-color:rgba(22,101,52,.42);
}
body[data-theme="light"] .pct-grade-green-dark{
  color:#166534;
  background:linear-gradient(135deg, rgba(74,222,128,.24), rgba(240,253,244,.96));
  border-color:rgba(22,163,74,.38);
}
body[data-theme="light"] .pct-grade-green-light{
  color:#3f6212;
  background:linear-gradient(135deg, rgba(132,204,22,.24), rgba(247,254,231,.96));
  border-color:rgba(101,163,13,.38);
}
body[data-theme="light"] .pct-grade-yellow-green{
  color:#4d7c0f;
  background:linear-gradient(135deg, rgba(190,242,100,.34), rgba(254,252,232,.96));
  border-color:rgba(132,204,22,.42);
}
body[data-theme="light"] .pct-grade-red-light{
  color:#b91c1c;
  background:linear-gradient(135deg, rgba(252,165,165,.30), rgba(255,241,242,.96));
  border-color:rgba(248,113,113,.44);
}
body[data-theme="light"] .pct-grade-red-dark{
  color:#7f1d1d;
  background:linear-gradient(135deg, rgba(248,113,113,.42), rgba(254,226,226,.96));
  border-color:rgba(185,28,28,.46);
}
body[data-theme="light"] .pct-missing{
  color:#64748b;
  background:#f1f5f9;
  border-color:#cbd5e1;
}
.avg-pct-cell{display:grid;gap:7px;justify-items:start}
.grade-progress span{
  background:linear-gradient(90deg, hsla(var(--pct-hue), 86%, 56%, .95), hsla(var(--pct-hue), 86%, 66%, .95));
}

.home-btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}


/* v11: fixed chart heights after Reset Filters + latest logo sizing */
#avgProductivityChart,
#monthlyTrendChart{
  height:310px !important;
  max-height:310px !important;
}
#hoursByStaffChart,
#hoursByMonthChart{
  height:310px !important;
  max-height:310px !important;
}
.diary-chart-grid .panel{
  min-height:0;
}
.brand-logo{
  width:100% !important;
  max-width:240px !important;
  height:auto !important;
  object-fit:contain !important;
}

/* v12: match diary chart card sizing with productivity chart cards */
.chart-panel{min-height:0;}
.diary-chart-grid{grid-template-columns:1fr 1fr;}
@media (max-width:1200px){.diary-chart-grid{grid-template-columns:1fr;}}


/* v15 Compact Monthly Productivity by Individual Staff table */
#diary .table-wrap{
  max-height:520px;
  overflow:auto;
}
#productivityTable{
  table-layout:auto;
  width:100%;
  font-size:12px;
}
#productivityTable th,
#productivityTable td{
  padding:7px 8px;
  font-size:12px;
  line-height:1.25;
  vertical-align:middle;
}
#productivityTable th{
  font-size:11px;
  letter-spacing:.045em;
}
#productivityTable td .staff-chip{
  padding:3px 7px;
  font-size:11px;
  line-height:1.2;
  max-width:135px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#productivityTable .pct-cell{min-width:66px;}
#productivityTable .pct-badge{
  min-width:58px;
  padding:4px 7px;
  font-size:11px;
  line-height:1.1;
}
#productivityTable .avg-pct-cell{
  gap:4px;
  min-width:72px;
}
#productivityTable .grade-progress{
  height:6px;
  max-width:88px;
}
#productivityTable td.num{
  font-size:12px;
  white-space:nowrap;
}
@media(max-width:1200px){
  #productivityTable th,#productivityTable td{padding:6px 7px;font-size:11px;}
  #productivityTable .pct-badge{min-width:52px;font-size:10.5px;padding:3px 6px;}
}

/* Mobile app readiness layer */
@media (max-width:860px){
  :root{--radius:18px}
  html,body{width:100%;overflow-x:hidden}
  body{
    -webkit-text-size-adjust:100%;
    touch-action:manipulation;
  }
  body::after{display:none}
  .app-shell{
    display:block;
    min-height:100svh;
  }
  .sidebar-toggle{
    top:calc(10px + env(safe-area-inset-top,0px));
    left:12px;
    width:42px;
    height:42px;
    border-radius:13px;
  }
  .theme-toggle{
    top:calc(10px + env(safe-area-inset-top,0px));
    left:62px;
    height:42px;
    min-width:84px;
    border-radius:13px;
  }
  .sidebar{
    position:sticky;
    top:0;
    z-index:9990;
    width:100%;
    height:auto;
    max-height:none;
    padding:64px 12px 10px;
    border-right:0;
    border-bottom:1px solid var(--line-soft);
    backdrop-filter:blur(18px);
  }
  .sidebar .brand{
    padding-top:0;
    margin:0 0 10px;
    min-height:42px;
  }
  .brand-logo{max-width:156px!important;margin:0}
  .brand-copy h1{font-size:16px}
  .brand-copy p{font-size:11px}
  .side-card{display:none}
  .sidebar-divider{margin:10px 0}
  .nav-list{
    display:flex;
    gap:8px;
    margin:0;
    overflow-x:auto;
    overflow-y:hidden;
    padding:0 2px 4px;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  .nav-list::-webkit-scrollbar{display:none}
  .nav-list a{
    flex:0 0 auto;
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 12px;
    border-radius:999px;
    white-space:nowrap;
    font-size:12px;
    font-weight:900;
    scroll-snap-align:start;
  }
  .app-shell.sidebar-collapsed .sidebar{
    height:62px;
    width:100%;
    padding:10px 112px 8px 12px;
    overflow:hidden;
  }
  .app-shell.sidebar-collapsed .brand,
  .app-shell.sidebar-collapsed .sidebar-divider{display:none}
  .app-shell.sidebar-collapsed .nav-list{
    display:flex;
    gap:8px;
    overflow-x:auto;
  }
  .app-shell.sidebar-collapsed .nav-list a{
    width:auto;
    height:42px;
    min-width:42px;
    padding:0 12px;
    font-size:0;
  }
  .app-shell.sidebar-collapsed .nav-list a::before{
    font-size:12px;
  }
  .content,
  .project-content,
  .individual-content{
    max-width:none!important;
    width:100%;
    padding:14px!important;
  }
  .hero,
  .project-content .page-header{
    padding:18px!important;
    border-radius:18px!important;
    margin-bottom:14px!important;
  }
  .hero h1,
  .hero h2,
  .project-content .page-header h1,
  .project-content .project-page-title h1{
    font-size:clamp(24px,8vw,32px)!important;
    line-height:1.08!important;
  }
  .hero p,
  .project-content .page-header p,
  .project-content .project-page-title p{
    font-size:13px!important;
    line-height:1.45!important;
  }
  .hero-actions,
  .individual-actions,
  .project-header-actions,
  .calendar-meta,
  .individual-summary-actions,
  .modal-actions,
  .edit-modal-actions{
    width:100%;
    justify-content:flex-start!important;
    gap:8px;
  }
  .btn,
  .home-button,
  button,
  input,
  select,
  textarea,
  .calendar-nav-btn,
  .calendar-reload-btn{
    min-height:44px;
    font-size:13px;
  }
  .btn,
  .home-button,
  .hero-actions .btn,
  .individual-actions .btn,
  .project-header-actions .home-button{
    flex:1 1 150px;
  }
  .filters-panel,
  .filters-panel.has-report-action,
  .activity-log-filter,
  .daily-date-filter,
  .import-grid,
  .top-filter-panel,
  .project-filter-panel,
  .project-list-filter,
  .reload-file-grid,
  .file-load-row{
    grid-template-columns:1fr!important;
    display:grid!important;
    gap:10px!important;
  }
  .top-filter-panel,
  .project-filter-panel,
  .project-list-filter{
    align-items:stretch!important;
  }
  .filter-action,
  .filter-action .btn,
  .activity-log-filter .btn,
  .top-filter-panel button,
  .project-list-filter button{
    width:100%!important;
  }
  .kpi-grid,
  .daily-summary-grid,
  .project-summary-grid,
  .individual-kpi-grid,
  .handover-kpi-grid,
  .cross-kpi-grid,
  .fpr-kpi-grid,
  .event-summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  .kpi-card,
  .mini-kpi,
  .individual-kpi-card,
  .handover-kpi-card,
  .cross-kpi-card,
  .fpr-kpi-card,
  .event-summary-card{
    min-height:104px;
    padding:14px!important;
    border-radius:16px!important;
  }
  .kpi-card strong,
  .mini-kpi strong,
  .individual-kpi-card strong,
  .handover-kpi-card strong,
  .cross-kpi-card strong,
  .fpr-kpi-card strong{
    font-size:clamp(22px,8vw,30px)!important;
  }
  .panel,
  .individual-panel,
  .home-team,
  .team-calendar-panel{
    padding:14px!important;
    border-radius:18px!important;
    margin-bottom:14px!important;
  }
  .panel-head,
  .individual-panel-head,
  .score-summary-head,
  .calendar-panel-head,
  .individual-summary-head,
  .table-title,
  .section-title{
    display:block!important;
  }
  .panel h3,
  .individual-panel-head h3,
  .calendar-panel-head h3{
    font-size:18px!important;
  }
  canvas{
    min-height:240px;
  }
  #avgProductivityChart,
  #monthlyTrendChart,
  #hoursByStaffChart,
  #hoursByMonthChart{
    height:260px!important;
    max-height:260px!important;
  }
  .chart-wrap,
  .handover-chart-wrap,
  .cross-chart-wrap,
  .fpr-chart-wrap{
    height:320px!important;
  }
  .table-wrap,
  .summary-scroll,
  .score-summary,
  .handover-detail-scroll,
  .cross-detail-scroll,
  .fpr-detail-scroll,
  .calendar-scroll,
  .table-wrapper,
  .event-table-wrapper,
  .progress-table-scroll,
  .individual-summary-scroll{
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    border-radius:14px!important;
  }
  table,
  .score-summary-table,
  .summary-table,
  .handover-detail-table,
  .cross-detail-table,
  .fpr-detail-table,
  .team-calendar-table,
  .individual-summary-table{
    font-size:12px;
  }
  th,td{
    padding:8px 9px;
    font-size:11px;
  }
  .modal,
  .staff-modal,
  .edit-modal{
    align-items:flex-end!important;
    padding:10px!important;
    padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;
  }
  .modal-content,
  .staff-modal-card,
  .edit-modal-card{
    width:100%!important;
    max-width:none!important;
    max-height:min(88svh,760px)!important;
    margin:0!important;
    border-radius:20px 20px 14px 14px!important;
  }
  .staff-modal-head,
  .edit-modal-head,
  .modal-header{
    position:sticky;
    top:0;
    z-index:2;
  }
  .staff-modal-title{
    align-items:flex-start;
  }
  .staff-modal-photo{
    width:72px;
    height:72px;
    flex-basis:72px;
    border-radius:18px;
  }
  .staff-modal-body{
    grid-template-columns:1fr!important;
    padding:14px!important;
  }
  .home-team-grid,
  .landing-grid{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  .home-person-card{
    align-items:flex-start!important;
  }
  .home-profile-photo{
    width:72px!important;
    height:72px!important;
    flex-basis:72px!important;
    border-radius:16px!important;
  }
  .home-team-tags{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  .staff-chip-btn{
    width:100%!important;
    min-height:58px!important;
    justify-content:flex-start!important;
    padding:5px 10px 5px 5px!important;
    border-radius:18px!important;
  }
  .staff-chip-btn img{
    width:48px!important;
    height:48px!important;
    flex-basis:48px!important;
  }
  .calendar-meta{
    margin-top:12px;
  }
  .calendar-month-nav,
  .calendar-reload-btn,
  .calendar-pill{
    width:100%!important;
    justify-content:center!important;
  }
  .calendar-holiday-info{
    justify-content:stretch!important;
  }
  .calendar-holiday-box{
    width:100%!important;
    max-width:none!important;
  }
  .edit-field-grid{
    grid-template-columns:1fr!important;
  }
  footer{
    padding-bottom:calc(28px + env(safe-area-inset-bottom,0px));
    text-align:center;
  }
}

@media (max-width:520px){
  .productivity-hero h1{
    font-size:clamp(14px,4.2vw,18px)!important;
    white-space:nowrap!important;
  }
  .content,
  .project-content,
  .individual-content{
    padding:10px!important;
  }
  .kpi-grid,
  .daily-summary-grid,
  .project-summary-grid,
  .individual-kpi-grid,
  .handover-kpi-grid,
  .cross-kpi-grid,
  .fpr-kpi-grid,
  .event-summary-grid{
    grid-template-columns:1fr!important;
  }
  .hero-actions .btn,
  .individual-actions .btn,
  .project-header-actions .home-button,
  .btn,
  .home-button{
    flex:1 1 100%;
    width:100%;
  }
  .home-team-tags{
    grid-template-columns:1fr!important;
  }
}

/* Project dashboard header alignment */
.project-content .project-page-title{
  display:block !important;
}
.project-content .project-page-title h1{
  white-space:nowrap !important;
}
.project-content .project-header-actions{
  display:flex !important;
  justify-content:flex-start !important;
  align-items:center !important;
  gap:10px !important;
  margin-top:18px !important;
  width:100% !important;
}
.project-content .project-header-actions .home-button,
.project-content #projectResetBtn{
  width:auto !important;
  min-width:0 !important;
  min-height:42px !important;
  align-self:auto !important;
  margin:0 !important;
}
@media(max-width:860px){
  .project-content .project-page-title h1{
    white-space:nowrap !important;
    font-size:clamp(18px,5.1vw,32px) !important;
    line-height:1.08 !important;
  }
  .project-content .project-header-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    width:100% !important;
  }
  .project-content .project-header-actions .home-button,
  .project-content #projectResetBtn{
    width:100% !important;
    min-width:0 !important;
    min-height:44px !important;
  }
}
@media(max-width:520px){
  .project-content .project-page-title h1{
    font-size:clamp(14px,4.2vw,18px) !important;
  }
}