:root{
  --navy:#1c2b3a;
  --navy-2:#263b50;
  --steel:#5c7386;
  --paper:#f6f7f5;
  --line:#d8dcdd;
  --accent:#b5651d;
  --good:#3f6f4e;
  --warn:#a63d3d;
  --white:#ffffff;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--paper);
  color:var(--navy);
  font-family:"IBM Plex Sans", Arial, sans-serif;
  padding:28px 16px 60px;
}
.wrap{max-width:1180px;margin:0 auto;}

header.top{
  background:var(--navy);
  color:var(--white);
  padding:22px 32px;
  border-radius:6px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:18px;
}
header.top h1{
  font-family:"Georgia", serif;
  font-weight:600;
  font-size:1.4rem;
  margin:0;
  letter-spacing:.2px;
}
header.top .sub{color:#b9c6d1;font-size:.8rem;margin-top:4px;}

.login-box{
  max-width:360px;
  margin:80px auto;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:8px;
  padding:32px 30px;
  text-align:center;
}
.login-box h1{font-size:1.3rem;margin:0 0 6px;color:var(--navy);}
.login-box .sub{font-size:.82rem;color:var(--steel);margin-bottom:20px;}
.login-box form{display:flex;flex-direction:column;gap:14px;text-align:left;}
.login-box .field label{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--steel);margin-bottom:4px;display:block;}
.login-box input{width:100%;padding:9px 10px;border:1px solid #c7ccc2;border-radius:4px;font-family:inherit;font-size:.92rem;}
.login-box .btn{margin-top:4px;}
.error-msg{color:var(--warn);font-size:.8rem;min-height:1.2em;margin-top:6px;}

.header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.whoami{font-size:.8rem;color:#c9d4dd;margin-right:6px;}
.header-actions .btn.secondary{
  background:rgba(255,255,255,.06);
  color:#fff;
  border-color:rgba(255,255,255,.35);
}
.header-actions .btn.secondary:hover{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.55);
}

.panel{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:6px;
  padding:18px 20px;
  margin-bottom:18px;
  display:none;
}
.panel.open{display:block;}
.panel h3{margin:0 0 12px;font-size:.95rem;color:var(--navy-2);}
.inline-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.inline-form input{padding:8px 10px;border:1px solid #c7ccc2;border-radius:4px;font-family:inherit;font-size:.86rem;}

.controls-bar{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:6px;
  padding:16px 20px;
  margin-bottom:18px;
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  align-items:flex-end;
}
.field{display:flex;flex-direction:column;gap:5px;}
.field label{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--steel);}
.field select, .field input{
  padding:8px 10px;
  border:1px solid #c7ccc2;
  border-radius:4px;
  font-family:inherit;
  font-size:.92rem;
  background:#fffdf7;
  min-width:220px;
}
.field select:focus, .field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(181,101,29,.15);}

.btn{
  padding:9px 16px;
  border-radius:4px;
  border:1px solid var(--navy);
  background:var(--navy);
  color:#fff;
  font-family:inherit;
  font-size:.85rem;
  cursor:pointer;
  transition:background .15s;
}
.btn:hover{background:var(--navy-2);}
.btn.secondary{background:transparent;color:var(--navy);border-color:#c7ccc2;}
.btn.secondary:hover{background:#f0f2ee;}
.btn.danger{background:transparent;color:var(--warn);border-color:var(--warn);padding:5px 10px;font-size:.78rem;}
.btn.danger:hover{background:#fbeeee;}
#recalculateBtn{padding:9px 16px;font-size:.85rem;}
.btn.small{padding:6px 12px;font-size:.78rem;}

.status-tag{font-size:.78rem;color:var(--steel);}
.status-tag.saved{color:var(--good);}
.status-tag.dirty{color:var(--accent);}

/* Employee admin panel */
.employee-list{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:6px;max-height:280px;overflow-y:auto;}
.employee-list li{
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 10px;background:#fafaf8;border:1px solid var(--line);border-radius:4px;font-size:.86rem;
}
.employee-list li.inactive{opacity:.5;}
.employee-list .emp-name{font-weight:600;}
.employee-list .emp-login{color:var(--steel);font-size:.8rem;}
.employee-list .emp-actions{display:flex;gap:6px;}
.add-employee-row{display:flex;gap:10px;flex-wrap:wrap;}
.add-employee-row input{flex:1;min-width:150px;}

section.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:6px;
  margin-bottom:22px;
  overflow:hidden;
}
.card h2{
  font-size:.95rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--navy-2);
  background:#eef1ee;
  margin:0;
  padding:12px 20px;
  border-bottom:1px solid var(--line);
}
.card h2 small{display:block;text-transform:none;letter-spacing:normal;color:var(--steel);font-size:.72rem;margin-top:2px;}

table{width:100%;border-collapse:collapse;font-size:.86rem;}
th, td{border:1px solid var(--line);padding:9px 10px;vertical-align:top;text-align:left;}
thead th{background:#f0f2ee;color:var(--navy-2);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;}
tbody tr:nth-child(even){background:#fafaf8;}
.stage-cell{font-weight:600;color:var(--navy);background:#f4f0e8 !important;width:150px;}
.num-cell{text-align:center;color:var(--steel);width:70px;}
.plan-cell{text-align:center;color:var(--steel);width:90px;}
td.crit{width:230px;}
.th-num{width:32px;}
.th-stage{width:150px;}
.th-maxball{width:60px;}
.th-plan{width:90px;}
.th-fact{width:90px;}

input[type="number"], input[type="text"]{
  width:100%;padding:6px 7px;border:1px solid #c7ccc2;border-radius:3px;
  font-family:inherit;font-size:.86rem;background:#fffdf7;color:var(--navy);
  -moz-appearance:textfield;
}
input[type="number"]:focus, input[type="text"]:focus, textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(181,101,29,.15);
}
/* Chrome/Safari draw built-in up/down spinner arrows on number inputs — on a
   narrow table column these eat almost all the width, leaving no visible
   room for the digits themselves (looks like an empty box). Remove them. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
textarea{
  width:100%;min-height:52px;resize:vertical;padding:6px 7px;border:1px solid #c7ccc2;border-radius:3px;
  font-family:inherit;font-size:.83rem;background:#fffdf7;line-height:1.35;color:var(--navy);
}

table.calc thead th{background:var(--navy);color:#fff;}
table.calc td.result{font-variant-numeric:tabular-nums;text-align:right;}
tr.total-row td{font-weight:700;background:#eef1ee;border-top:2px solid var(--navy);}
.pct-bad{color:var(--warn);}
.pct-good{color:var(--good);}

.base-row{
  display:flex;align-items:center;justify-content:space-between;padding:16px 20px;gap:16px;
  flex-wrap:wrap;background:#f4f0e8;border-top:1px solid var(--line);
}
.base-row label{font-weight:600;color:var(--navy);}
.hint{font-size:.75rem;color:var(--steel);}
.base-row .hint{display:block;margin-top:3px;}
.base-row input{max-width:220px;font-size:1rem;font-weight:600;}
.base-value{font-size:1.1rem;font-weight:700;color:var(--navy);padding:8px 14px;background:#fff;border:1px solid var(--line);border-radius:4px;min-width:140px;text-align:right;}
.frozen-note{font-size:.78rem;color:var(--steel);text-align:right;margin:-8px 0 18px;padding:0 4px;}
.frozen-note.is-frozen{color:var(--good);}

.result-banner{
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  color:#fff;border-radius:6px;padding:24px 32px;flex-wrap:wrap;gap:20px;margin-bottom:18px;
}
.result-banner .label{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:#b9c6d1;margin-bottom:6px;}
.result-banner .value{font-size:2.2rem;font-weight:700;font-family:"Georgia", serif;color:var(--accent);}
.result-banner .value span.cur{font-size:1.05rem;color:#dfe6ea;margin-left:6px;}
.breakdown-mini{display:flex;gap:26px;flex-wrap:wrap;}
.breakdown-mini div{text-align:right;}
.breakdown-mini .k{font-size:.7rem;color:#b9c6d1;text-transform:uppercase;letter-spacing:.05em;}
.breakdown-mini .v{font-size:1.02rem;font-weight:600;}

.progress-cell{display:flex;align-items:center;gap:10px;justify-content:flex-end;}
.progress-track{
  position:relative;flex:1;max-width:110px;height:8px;border-radius:99px;
  background:#e6e3d8;overflow:hidden;
}
.progress-track.lg{max-width:none;height:14px;}
.progress-fill{
  height:100%;border-radius:99px;
  transition:width .35s ease, background-color .35s ease;
}
.progress-pct{font-variant-numeric:tabular-nums;min-width:52px;text-align:right;}

.overall-progress-card{
  background:var(--white);border:1px solid var(--line);border-radius:6px;
  padding:16px 20px;margin-bottom:18px;
}
.op-label{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:.82rem;color:var(--navy-2);font-weight:600;margin-bottom:8px;
  text-transform:uppercase;letter-spacing:.04em;
}
.op-label .op-pct{font-size:1rem;font-variant-numeric:tabular-nums;color:var(--navy);}

.empty-state{
  padding:40px 20px;text-align:center;color:var(--steel);font-size:.92rem;
}
#mainScreen.in-summary{margin-top:24px;padding-top:22px;border-top:2px solid var(--line);}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}


@media (max-width:720px){
  body{padding:16px 10px 40px;}
  header.top{flex-direction:column;align-items:flex-start;padding:18px 20px;}
  .header-actions{width:100%;}
  .header-actions .btn{flex:1 1 auto;text-align:center;}
  .whoami{width:100%;margin:0 0 6px;}

  .controls-bar, .panel, .inline-form{flex-direction:column;align-items:stretch;}
  .controls-bar .field, .controls-bar > .btn, .controls-bar > .status-tag{width:100%;}
  .field select, .field input{min-width:0;width:100%;}
  .inline-form > *{width:100%;}
  .inline-form label{margin-top:6px;}

  table{font-size:.78rem;}
  th, td{padding:7px 8px;}
  .stage-cell{width:auto;}
  td.crit{width:auto;min-width:150px;}
  .progress-track{max-width:60px;}
  .progress-pct{min-width:44px;font-size:.75rem;}

  /* Криterии выполнения: сжимаем второстепенные колонки, чтобы у "Факт" было
     достаточно места под палец на телефоне */
  #criteriaTable .th-num, #criteriaTable .num-cell{width:26px;padding-left:4px;padding-right:4px;}
  #criteriaTable .th-maxball{width:44px;}
  #criteriaTable .th-stage, #criteriaTable .stage-cell{width:70px;font-size:.72rem;}
  #criteriaTable .th-plan, #criteriaTable .plan-cell{width:64px;font-size:.72rem;}
  #criteriaTable .th-fact{width:120px;}
  #criteriaTable td:has(textarea){min-width:160px;}
  #criteriaTable .fact-input{
    min-height:44px;font-size:16px;padding:8px 10px;text-align:center;
  }
  #criteriaTable .comment-input{font-size:16px;min-height:64px;}

  .result-banner{flex-direction:column;align-items:flex-start;}
  .breakdown-mini{width:100%;flex-direction:column;gap:10px;}
  .breakdown-mini div{text-align:left;}

  .base-row{flex-direction:column;align-items:flex-start;gap:8px;}
  .base-value{width:100%;text-align:left;}

  .frozen-note{text-align:left;}
  #recalculateRow{text-align:left !important;}

  .employee-list li{flex-direction:column;align-items:flex-start;gap:8px;}
  .employee-list .emp-actions{width:100%;}
  .employee-list .emp-actions .btn{flex:1;}

  .add-employee-row{flex-direction:column;}
  .add-employee-row input{min-width:0;}

  .login-box{margin:40px auto;padding:26px 20px;}
}

@media (max-width:480px){
  header.top h1{font-size:1.2rem;}
  .card h2{font-size:.85rem;padding:10px 14px;}
  .result-banner .value{font-size:1.8rem;}
  table{font-size:.72rem;}
  th, td{padding:6px 6px;}
  .btn{padding:8px 12px;font-size:.82rem;}
  .btn.small{padding:6px 10px;font-size:.75rem;}
}