:root {
  --ink: #18232b;
  --muted: #667580;
  --line: #dbe3e8;
  --page: #f3f6f8;
  --panel: #ffffff;
  --nav: #17242d;
  --nav2: #253845;
  --accent: #c9232f;
  --accent2: #a71924;
  --teal: #197278;
  --green: #267348;
  --orange: #a85d18;
  --red: #b42318;
  --blue: #285f9f;
  --shadow: 0 16px 42px rgba(20, 35, 45, .10);
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  display: grid;
  grid-template-columns: 250px 1fr;
  min-height: 100vh;
}

* { box-sizing: border-box; }
button, input, select, textarea { font: inherit; }

.side {
  background: linear-gradient(180deg, #17242d 0%, #20323d 100%);
  color: white;
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-right: 1px solid rgba(255,255,255,.08);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.brand img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 10px;
  background: white;
  padding: 4px;
}

.brand span {
  display: block;
  color: #b8c8d0;
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
}

.nav {
  border: 0;
  background: transparent;
  color: #edf4f6;
  text-align: left;
  padding: 12px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
}

.nav.active, .nav:hover {
  background: rgba(255,255,255,.10);
  color: white;
}

.app {
  padding: 26px;
  min-width: 0;
}

.top {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 20px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px;
  box-shadow: var(--shadow);
}

h1, h2, h3, p { margin: 0; }
h1 { font-size: 28px; line-height: 1.15; letter-spacing: 0; }
h2 { font-size: 20px; }
.muted, .top p { color: var(--muted); margin-top: 6px; }

.actions {
  display: flex;
  gap: 10px;
  align-items: end;
  flex-wrap: wrap;
}

.field {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

input, select, textarea {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  padding: 10px 12px;
  width: 100%;
  color: var(--ink);
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid rgba(201,35,47,.18);
  border-color: var(--accent);
}

.btn {
  min-height: 40px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: white;
  padding: 0 14px;
  cursor: pointer;
  font-weight: 800;
  color: var(--ink);
}

.primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.primary:hover { background: var(--accent2); }

.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.metric, .panel, .card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.metric {
  padding: 16px;
  display: grid;
  gap: 8px;
  border-top: 4px solid var(--accent);
}

.metric span, .metric small { color: var(--muted); }
.metric strong { font-size: 30px; }

.layout {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 18px;
}

.panel { padding: 20px; }
.head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  align-items: flex-start;
}

.tabs {
  display: flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f6f8f9;
}

.tab {
  border: 0;
  background: transparent;
  min-height: 32px;
  border-radius: 7px;
  padding: 0 12px;
  cursor: pointer;
  font-weight: 800;
}

.tab.active { background: var(--accent); color: white; }

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th, .table td {
  border-bottom: 1px solid var(--line);
  padding: 12px 10px;
  text-align: left;
  vertical-align: middle;
}

.table th {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--muted);
  background: #f8fafb;
  position: sticky;
  top: 0;
  z-index: 1;
}

.badge, .todo-status {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  border-radius: 999px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 800;
  background: #e9f4ef;
  color: var(--green);
}

.open { background: #e8f2ff; color: var(--blue); }
.risk { background: #ffe8e5; color: var(--red); }
.progress { background: #fff1df; color: var(--orange); }
.todo-status.done { background: #e9f4ef; color: var(--green); }

.link {
  border: 0;
  background: transparent;
  color: var(--teal);
  font-weight: 800;
  cursor: pointer;
  padding: 0;
}

.dangerlink { color: var(--red); }
.stack { display: grid; gap: 10px; }
.card { padding: 14px; display: grid; gap: 7px; }
.clickable { cursor: pointer; }
.clickable:hover { border-color: var(--accent); box-shadow: 0 16px 38px rgba(201,35,47,.14); }
.score { font-size: 28px; font-weight: 800; }
.stars { color: #b8860b; letter-spacing: 2px; }

.form-grid, .detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.full { grid-column: 1 / -1; }

.mini {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfd;
  display: grid;
  gap: 4px;
}

.mini span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
.mini strong { font-size: 24px; }

.kpi-tools {
  display: grid;
  grid-template-columns: 1fr 180px 190px auto;
  gap: 10px;
  margin-bottom: 14px;
  align-items: end;
}

.kpi-table input { min-width: 90px; }
.kpi-table .kpi-title { min-width: 260px; }
.final-cell { font-weight: 800; }
.disputed {
  background: #fff1df;
  color: var(--orange);
  border-radius: 8px;
  padding: 6px 8px;
  display: inline-block;
}

.action-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 240px;
}

.action-pill {
  min-height: 32px;
  border: 1px solid #cddbe1;
  border-radius: 8px;
  background: #f8fbfc;
  color: var(--teal);
  font-weight: 800;
  padding: 0 10px;
  cursor: pointer;
}

.action-pill:hover { border-color: var(--accent); background: #fff5f6; }
.action-pill.complete { color: var(--green); }
.action-pill.delete { color: var(--red); border-color: #f1c9c5; background: #fff8f7; }
.action-pill.delete:hover { background: #ffe8e5; }

.todo-form {
  display: grid;
  grid-template-columns: 150px 200px minmax(220px, 1fr) 130px 220px auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
}

.percent-input {
  position: relative;
  display: block;
  width: min(220px, 100%);
}

.percent-input input {
  width: 100%;
  min-width: 90px;
  padding-right: 34px;
}

.percent-input span {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-weight: 800;
  font-size: 18px;
  pointer-events: none;
}

.hidden { display: none !important; }

.login-screen {
  grid-column: 1 / -1;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(circle at top left, rgba(201,35,47,.12), transparent 34%), #f3f6f8;
}

.login-card {
  width: min(960px, 100%);
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(20,35,45,.16);
  padding: 30px;
  display: grid;
  gap: 24px;
}

.login-brand {
  display: flex;
  gap: 16px;
  align-items: center;
}

.login-brand img {
  width: 78px;
  height: 78px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px;
  background: white;
}

.login-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.login-panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px;
  display: grid;
  gap: 14px;
  align-content: start;
  background: #fbfcfd;
}

.employee-portal { grid-column: 1 / -1; }
.employee-hero {
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 20px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.employee-sections { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.employee-kpi-tools { display: grid; grid-template-columns: 220px 1fr; gap: 12px; align-items: end; margin-bottom: 14px; }

@media(max-width:1000px){
  body { grid-template-columns: 1fr; }
  .side { min-height: auto; }
  .metrics, .login-grid, .form-grid, .detail-grid, .employee-kpi-tools, .kpi-tools, .todo-form { grid-template-columns: 1fr; }
  .top, .actions, .head, .employee-hero { flex-direction: column; align-items: stretch; }
  .table { display: block; overflow-x: auto; white-space: nowrap; }
}


.date-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 8px;
}

.date-card {
  border: 1px solid var(--line);
  background: #ffffff;
  border-radius: 10px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: minmax(180px, auto) 1fr;
  gap: 12px;
  align-items: center;
  box-shadow: 0 10px 24px rgba(20,35,45,.06);
}

.date-card strong {
  font-size: 18px;
  color: var(--ink);
}

.entry-open {
  width: fit-content;
  border: 1px solid #cddbe1;
  border-radius: 999px;
  background: #f8fbfc;
  color: var(--teal);
  font-size: 13px;
  font-weight: 800;
  padding: 6px 12px;
  cursor: pointer;
}

.entry-open:hover {
  border-color: var(--accent);
  background: #fff5f6;
}

.date-card.active {
  border-color: var(--accent);
  box-shadow: 0 12px 28px rgba(201,35,47,.12);
}


.employee-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px;
  box-shadow: var(--shadow);
  width: fit-content;
}

.employee-tab {
  min-height: 38px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 0 16px;
  font-weight: 800;
  cursor: pointer;
  color: var(--ink);
}

.employee-tab.active,
.employee-tab:hover {
  background: var(--accent);
  color: #ffffff;
}

@media(max-width:700px){
  .employee-tabs {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }
}

.dashboard-filter{width:min(360px,100%)}
.dashboard-filter .field{margin:0}

.inline-comment{display:grid;gap:8px;min-width:260px;max-width:360px}
.inline-comment textarea{width:100%;resize:vertical;border:1px solid var(--line);border-radius:8px;padding:10px;font:inherit}
.inline-actions{display:flex;gap:8px;flex-wrap:wrap}

.dashboard-clean{display:grid;gap:22px}
.compact-cards .card{min-height:130px}
.compact-cards .card strong{display:block;font-size:34px;line-height:1.15;margin:8px 0;color:var(--ink)}
.compact-cards .card span{color:var(--muted);font-weight:700}
.compact-cards .card small{color:var(--muted)}

.calendar-wrap{border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden;box-shadow:0 14px 34px rgba(15,23,42,.06)}
.calendar-title{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}
.calendar-week,.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(90px,1fr))}
.calendar-week span{padding:10px;text-align:center;font-weight:800;color:var(--muted);background:#f7f9fb;border-bottom:1px solid var(--line)}
.cal-cell{min-height:105px;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;text-align:left;padding:12px;display:grid;align-content:start;gap:8px;font:inherit;color:var(--ink)}
.cal-cell:nth-child(7n){border-right:0}
.cal-cell.has-entry{cursor:pointer;background:#fff}
.cal-cell.has-entry:hover{background:#fff7f7}
.cal-cell.active{outline:2px solid var(--brand);outline-offset:-2px;background:#fffafa}
.cal-cell.empty,.cal-cell:disabled{background:#f8fafc;color:#9aa6b2;cursor:default}
.cal-day{font-weight:900;font-size:18px}
.cal-cell strong{font-size:22px;color:var(--brand-strong)}
.cal-cell small{color:var(--muted);font-weight:700}
@media(max-width:900px){.calendar-week,.calendar-grid{grid-template-columns:repeat(7,minmax(42px,1fr))}.cal-cell{min-height:86px;padding:8px}.cal-cell small{font-size:11px}.cal-cell strong{font-size:18px}}

.dashboard-topline{display:flex;justify-content:space-between;align-items:end;gap:18px;flex-wrap:wrap}
.month-switch{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.month-switch strong{font-size:22px;color:var(--ink);min-width:170px;text-align:center}

.daily-controls{display:flex;justify-content:space-between;align-items:end;gap:18px;flex-wrap:wrap}
.daily-controls .field{min-width:320px;margin:0}
.calendar-title{gap:12px;flex-wrap:wrap}
.calendar-title > strong{font-size:22px;min-width:170px;text-align:center}

.clickable-metric{cursor:pointer}
.clickable-metric:hover{transform:translateY(-2px);box-shadow:0 18px 34px rgba(15,23,42,.12)}

.task-month-tools{display:grid;gap:16px}
.task-month-tools .field{max-width:340px;margin:0}

.compact-summary{max-width:760px}
.summary-table th,.summary-table td{padding:12px 14px}
.summary-table td{font-size:20px}

.kpi-scroll{width:100%;overflow-x:hidden;padding-bottom:6px}
.manager-kpi-table{width:100%;min-width:0;table-layout:fixed;font-size:14px}
.manager-kpi-table th,.manager-kpi-table td{padding:10px 6px;vertical-align:middle}
.manager-kpi-table th:nth-child(1),.manager-kpi-table td:nth-child(1){width:4%}
.manager-kpi-table th:nth-child(2),.manager-kpi-table td:nth-child(2){width:23%}
.manager-kpi-table th:nth-child(3),.manager-kpi-table td:nth-child(3),.manager-kpi-table th:nth-child(4),.manager-kpi-table td:nth-child(4){width:9%}
.manager-kpi-table th:nth-child(5),.manager-kpi-table td:nth-child(5),.manager-kpi-table th:nth-child(6),.manager-kpi-table td:nth-child(6){width:8%}
.manager-kpi-table th:nth-child(7),.manager-kpi-table td:nth-child(7){width:9%}
.manager-kpi-table th:nth-child(8),.manager-kpi-table td:nth-child(8){width:8%}
.manager-kpi-table th:nth-child(9),.manager-kpi-table td:nth-child(9){width:22%}
.manager-kpi-table .kpi-title{width:100%;min-width:0;font-size:14px;padding:8px}
.manager-kpi-table .percent-input{min-width:0}
.manager-kpi-table .percent-input input{min-width:0;width:100%;font-size:14px;padding:8px 22px 8px 8px}
.manager-kpi-table .percent-input span{right:8px;font-size:14px}
.manager-kpi-table .action-group{gap:5px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;width:100%}
.manager-kpi-table .action-pill{font-size:11px;padding:7px 5px;white-space:nowrap;line-height:1.1;width:100%;min-width:0;overflow:hidden;text-overflow:clip}
.manager-kpi-table .comment-cell{font-size:12px;line-height:1.25;word-break:break-word}

.manager-kpi-table td:nth-child(9){overflow:visible}
.manager-kpi-table th{font-size:12px}

.kpi-comment-box{display:grid;gap:12px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:16px;max-width:900px}
.kpi-comment-box .field{margin:0}
.kpi-comment-box textarea{width:100%;resize:vertical}
.comment-note{border:1px solid var(--line);border-radius:8px;background:#f8fafc;padding:12px;color:var(--ink)}

.manager-kpi-table th:nth-child(1),.manager-kpi-table td:nth-child(1){width:4%}
.manager-kpi-table th:nth-child(2),.manager-kpi-table td:nth-child(2){width:31%}
.manager-kpi-table th:nth-child(3),.manager-kpi-table td:nth-child(3),.manager-kpi-table th:nth-child(4),.manager-kpi-table td:nth-child(4){width:11%}
.manager-kpi-table th:nth-child(5),.manager-kpi-table td:nth-child(5),.manager-kpi-table th:nth-child(6),.manager-kpi-table td:nth-child(6){width:9%}
.manager-kpi-table th:nth-child(7),.manager-kpi-table td:nth-child(7){width:10%}
.manager-kpi-table th:nth-child(8),.manager-kpi-table td:nth-child(8){width:15%}
.manager-kpi-table .action-group{grid-template-columns:repeat(2,minmax(0,1fr))}


/* KPI manager table: keep Edit and Remove visible in one screen */
.kpi-scroll{
  width:100%;
  overflow-x:visible;
}
.manager-kpi-table{
  width:100%;
  table-layout:fixed;
  font-size:13px;
}
.manager-kpi-table th,
.manager-kpi-table td{
  box-sizing:border-box;
  padding:8px 5px;
}
.manager-kpi-table th:nth-child(1),.manager-kpi-table td:nth-child(1){width:4%}
.manager-kpi-table th:nth-child(2),.manager-kpi-table td:nth-child(2){width:30%}
.manager-kpi-table th:nth-child(3),.manager-kpi-table td:nth-child(3){width:10%}
.manager-kpi-table th:nth-child(4),.manager-kpi-table td:nth-child(4){width:10%}
.manager-kpi-table th:nth-child(5),.manager-kpi-table td:nth-child(5){width:8%}
.manager-kpi-table th:nth-child(6),.manager-kpi-table td:nth-child(6){width:8%}
.manager-kpi-table th:nth-child(7),.manager-kpi-table td:nth-child(7){width:9%}
.manager-kpi-table th:nth-child(8),.manager-kpi-table td:nth-child(8){width:21%}
.manager-kpi-table .kpi-title{
  width:100%;
  min-width:0;
  height:38px;
  font-size:13px;
  padding:6px 8px;
}
.manager-kpi-table .percent-input{
  width:100%;
  min-width:0;
}
.manager-kpi-table .percent-input input{
  width:100%;
  min-width:0;
  height:38px;
  font-size:13px;
  padding:6px 22px 6px 8px;
}
.manager-kpi-table .percent-input span{
  right:8px;
  font-size:13px;
}
.manager-kpi-table .action-group{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  width:100%;
  min-width:0;
}
.manager-kpi-table .action-pill{
  width:100%;
  min-width:0;
  height:36px;
  padding:6px 4px;
  font-size:12px;
  line-height:1;
  white-space:nowrap;
  overflow:visible;
  text-align:center;
}
.manager-kpi-table .action-pill.delete{
  color:var(--red);
  border-color:#efc5c1;
  background:#fff8f7;
}

.kpi-comment-summary{display:grid;gap:10px}
.kpi-comment-summary>strong{font-size:16px}
.comment-note{border:1px solid var(--line);border-radius:8px;background:#fbfdfe;padding:12px;line-height:1.4}


/* Credential login */
.credential-login .login-panel{display:grid;gap:16px;align-content:start}
.credential-login .login-panel h2{margin-bottom:0}
.credential-login .login-panel .muted{min-height:52px}
.credential-login input,.credential-login select{height:48px}
.credential-login .btn.primary{margin-top:4px;width:100%}
.login-card{max-width:1080px}


/* Supabase auth login */
.auth-card{max-width:760px;display:grid;gap:28px}
.auth-panel{max-width:520px;width:100%;margin:0 auto;display:grid;gap:16px}
.auth-panel .field{margin:0}
.auth-panel input{height:52px}
.login-message{min-height:24px;font-weight:700;color:var(--green)}
.login-message.error{color:var(--red)}

.employee-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}

.password-wrap{position:relative;display:flex;align-items:center;width:100%}
.password-wrap input{width:100%;padding-right:48px}
.password-eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;background:transparent;color:var(--muted);font-size:18px;line-height:1;cursor:pointer;border-radius:8px}
.password-eye:hover,.password-eye.active{background:#f3f7f9;color:var(--teal)}