/* ===== Light theme: white + red accents ===== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin:0;
  font-family: "Segoe UI", Arial, sans-serif;
  background:#f6f7fb;
  color:#121826;
}

a{ color:inherit; text-decoration:none; }

:root{
  --bg: #f6f7fb;
  --panel: #ffffff;
  --panel-2: #fbfbfe;
  --border: rgba(17,24,39,.10);
  --muted: rgba(17,24,39,.65);

  --red: #d10f2f;          /* основной акцент */
  --red-2: #ff2a4d;        /* подсветка */
  --red-soft: rgba(209,15,47,.10);

  --shadow: 0 12px 30px rgba(17,24,39,.08);
  --shadow-soft: 0 8px 18px rgba(17,24,39,.06);

  --radius-lg: 18px;
  --radius-md: 14px;
}

.app{
  display:flex;
  height:100vh;
  overflow:hidden;
}

/* ===== Sidebar ===== */
.sidebar{
  width:250px;
  background: var(--panel);
  border-right: 1px solid var(--border);
  padding:18px 14px;
}

.brand{
  font-weight:800;
  letter-spacing:.2px;
  padding:12px 12px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #ffffff, #fafafe);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  margin-bottom: 14px;
}

.menu{ display:flex; flex-direction:column; gap:8px; }

.menu-item{
  padding:10px 12px;
  border-radius: 14px;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(17,24,39,.86);
}

.menu-item:hover{
  background: rgba(209,15,47,.06);
  border-color: rgba(209,15,47,.12);
}

.menu-item.active{
  background: var(--red-soft);
  border-color: rgba(209,15,47,.18);
  color: var(--red);
  font-weight:700;
}

/* ===== Center ===== */
.center{
  flex:1;
  padding:18px;
  overflow:auto;
}

/* ===== Detail ===== */
.detail{
  width:440px;
  max-width: 440px;
  padding:18px;
  overflow:auto;
  background: var(--panel);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 22px rgba(17,24,39,.04);
}

/* ===== Cards / blocks ===== */
.table-wrap{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 10px;
}

/* ===== Toolbar ===== */
.toolbar{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}

.search{
  display:flex;
  gap:10px;
  width:100%;
  max-width:720px;
}

.search input{
  flex:1;
  padding:10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: #ffffff;
  color:#121826;
  outline:none;
}

.search input:focus{
  border-color: rgba(209,15,47,.35);
  box-shadow: 0 0 0 4px rgba(209,15,47,.10);
}

/* ===== Table ===== */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius: 14px;
}

.table thead th{
  text-align:left;
  font-size:12px;
  letter-spacing:.2px;
  color: rgba(17,24,39,.65);
  padding:12px 12px;
  border-bottom:1px solid var(--border);
  background: linear-gradient(180deg, #ffffff, #fbfbfe);
  position: sticky;
  top: 0;
  z-index: 1;
}

.table td{
  padding:12px 12px;
  border-bottom:1px solid rgba(17,24,39,.06);
  color:#121826;
}

.table tbody tr:hover{
  background: rgba(209,15,47,.05);
}

.row-active{
  background: rgba(209,15,47,.09) !important;
  outline: 1px solid rgba(209,15,47,.18);
  outline-offset: -1px;
}

.muted{ color: var(--muted); }

/* ===== Detail panel ===== */
.detail-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}

.detail-title{
  font-weight:800;
  font-size:14px;
}

.detail-form{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding:14px;
  overflow:hidden;/* на всякий */
}

.label{
  display:block;
  margin-top:12px;
  margin-bottom:6px;
  color: rgba(17,24,39,.70);
  font-size:12px;
}

.detail-form input,
.detail-form textarea{
  width:100%;
  padding:10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: #ffffff;
  color:#121826;
  outline:none;
}

.detail-form textarea{ min-height:76px; resize:vertical; }

.detail-form input:focus,
.detail-form textarea:focus{
  border-color: rgba(209,15,47,.35);
  box-shadow: 0 0 0 4px rgba(209,15,47,.10);
}

/* ===== Photo ===== */
.photo-row{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-bottom:8px;
}

.photo{
  width:110px;
  height:110px;
  border-radius: 18px;
  overflow:hidden;
  background: #f3f4f8;
  border: 1px solid var(--border);
}

.photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.photo-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  color: rgba(17,24,39,.45);
  font-weight:600;
}

/* ===== Buttons ===== */
.btn{
  padding:10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #ffffff;
  color:#121826;
  cursor:pointer;
  transition: transform .05s ease, box-shadow .15s ease, border-color .15s ease;
}

.btn:hover{
  border-color: rgba(209,15,47,.25);
  box-shadow: var(--shadow-soft);
}

.btn:active{ transform: translateY(1px); }

.btn.primary{
  background: linear-gradient(180deg, #ff3a5b, #d10f2f);
  border-color: rgba(209,15,47,.35);
  color:#ffffff;
  box-shadow: 0 10px 20px rgba(209,15,47,.22);
}

.btn.primary:hover{
  box-shadow: 0 14px 26px rgba(209,15,47,.26);
}

.btn.danger{
  background: #fff5f6;
  border-color: rgba(209,15,47,.25);
  color: var(--red);
}

.detail-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

/* ===== Small polish ===== */
.table-wrap, .detail-form, .brand{
  backdrop-filter: saturate(1.2);
}
.status-badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(17,24,39,.10);
  background:#fff;
  font-size:12px;
}
.status-badge[data-step="0"]{ background: rgba(209,15,47,.08); border-color: rgba(209,15,47,.18); color:#d10f2f; }
.status-badge[data-step="1"]{ background: rgba(255,153,0,.10); border-color: rgba(255,153,0,.22); }
.status-badge[data-step="2"]{ background: rgba(96,165,250,.10); border-color: rgba(96,165,250,.22); }
.status-badge[data-step="3"]{ background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.22); }
.status-badge[data-step="4"]{ background: rgba(168,85,247,.10); border-color: rgba(168,85,247,.22); }
.status-badge[data-step="5"]{ background: rgba(234,88,12,.10); border-color: rgba(234,88,12,.22); }
.status-badge[data-step="6"]{ background: rgba(17,24,39,.06); border-color: rgba(17,24,39,.14); }

.progress-steps{
  display:grid;
  gap:10px;
  padding:10px 0 4px 0;
}
.progress-steps .step{
  display:grid;
  grid-template-columns: 16px 1fr;
  gap:10px;
  align-items:center;
  opacity:.55;
}
.progress-steps .step.done{ opacity:1; }
.progress-steps .dot{
  width:12px; height:12px;
  border-radius:999px;
  background: rgba(17,24,39,.12);
  border: 2px solid rgba(17,24,39,.08);
}
.progress-steps .step.done .dot{
  background: rgba(209,15,47,.25);
  border-color: rgba(209,15,47,.35);
}
.progress-steps .txt{
  font-size:12px;
  color: rgba(17,24,39,.75);
}
.link{
  color: #d10f2f;
  font-weight: 700;
  text-decoration: none;
}
.link:hover{
  text-decoration: underline;
}
.alert{
  padding:10px 12px;
  border:1px solid rgba(209,15,47,.25);
  background:#fff5f6;
  border-radius:14px;
  color:#d10f2f;
  margin: 8px 0 12px 0;
}
.row-click{ cursor:pointer; }
.row-click:hover{ background: rgba(209,15,47,.06); }
.row-click.is-selected{ background: rgba(209,15,47,.10); }

.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px;
  background: rgba(209,15,47,.10);
  border: 1px solid rgba(209,15,47,.20);
  font-weight: 700;
}
.mini-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 10px;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  background: #fff;
}
/* Layout inside pages: center + detail */
.main{
  display:flex;
  flex:1;
  min-width:0;         /* важно, чтобы center не выталкивал detail */
  overflow:hidden;     /* чтобы скролл был внутри .center/.detail */
}
.center{ min-width:0; } /* тоже важно */
/* ===== Startups: needs row adaptive layout ===== */
.need-row .need-grid{
  display:grid;
  grid-template-columns: 1fr 140px 110px 96px; /* роль | уровень | часы | удалить */
  gap:10px;
  align-items:end;
}

.need-row .need-actions{
  display:flex;
  justify-content:flex-end;
}

.need-row input, .need-row select{
  width:100%;
}

/* На узких панелях (detail ~440px) делаем 2 колонки, а кнопку удаления — отдельной строкой */
@media (max-width: 1200px){
  .need-row .need-grid{
    grid-template-columns: 1fr 1fr;
  }
  .need-row .need-actions{
    grid-column: 1 / -1;
  }
}

/* Если совсем узко — всё в одну колонку */
@media (max-width: 900px){
  .need-row .need-grid{
    grid-template-columns: 1fr;
  }
}
.cards{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap:12px;
}
.card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 12px 14px;
}
.kpi-title{ font-size:12px; color: rgba(17,24,39,.65); }
.kpi-value{ font-size:26px; font-weight:900; margin-top:6px; color:#121826; }

.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

@media (max-width: 1200px){
  .cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2{ grid-template-columns: 1fr; }
}