body{
	margin:0;
	font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
	background:#f4f6fb;
	color:#1f2937;
}
@media (max-width: 768px){
  body{
	width:1350px;
	margin:0;
	font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
	background:#f4f6fb;
	color:#1f2937;
  }
}

.table-wrapper{
  max-width:1200px;
  margin:60px auto;
  padding:20px;
}

table{
  width:100%;
  table-layout:fixed;
  border-collapse:collapse;
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

thead{
  background:linear-gradient(135deg,#3b82f6,#2563eb);
  color:white;
}

th{
  text-align:left;
  font-weight:600;
  padding:14px 16px;
  font-size:14px;
  letter-spacing:.3px;
}

td{
  padding:14px 16px;
  border-bottom:1px solid #eef2f7;
  font-size:14px;
}

tbody tr{
  transition:all .18s ease;
}

tbody tr:hover{
  background:#f8fafc;
  transform:scale(1.002);
}

tbody tr:last-child td{
  border-bottom:none;
}
th:nth-child(1){width:110px;}
th:nth-child(2){width:110px;}
th:nth-child(3){width:110px;}
th:nth-child(4){width:auto;}
th:nth-child(5){width:140px;}
th:nth-child(6),
th:nth-child(7),
th:nth-child(8){width:50px;}
/* статус */

span{
  display:inline-block;
  padding:4px 10px;
  border-radius:20px;
  font-size:12px;
  font-weight:600;
  text-transform:capitalize;
}

.future{
  background:#bbf7d0;
  color:#065f46;
}

.now{
  background:#fecaca;
  color:#7f1d1d;
}

.finished{
  background:#e5e7eb;
  color:#1f2937;
}

.planned{
  background:#bae6fd;
  color:#075985;
}

.canceled{
  background:#ddd6fe;
  color:#4c1d95;
}

.postponed{
  background:#fed7aa;
  color:#7c2d12;
}

/* кнопки */

.btn{
  display:inline-block;
  padding:6px 12px;
  border-radius:6px;
  background:#3b82f6;
  color:white;
  font-size:13px;
  text-decoration:none;
  font-weight:500;
  transition:all .15s ease;
}

.btn:hover{
  background:#2563eb;
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(37,99,235,.25);
}



/* ========================= */
/* UI ELEMENTS */
/* ========================= */

/* контейнер форми */

.form{
  max-width:600px;
}

.form-group{
  margin-bottom:16px;
}

/* labels */

label{
  display:block;
  font-size:13px;
  margin-bottom:6px;
  color:#374151;
  font-weight:500;
}

/* ========================= */
/* INPUTS */
/* ========================= */

input,
select,
textarea{
  width:100%;
  padding:10px 12px;
  border-radius:6px;
  border:1px solid #d1d5db;
  font-size:14px;
  background:white;
  transition:all .15s ease;
  outline:none;
}

input:hover,
select:hover,
textarea:hover{
  border-color:#9ca3af;
}

input:focus,
select:focus,
textarea:focus{
  border-color:#3b82f6;
  box-shadow:0 0 0 2px rgba(59,130,246,0.15);
}

/* textarea */

textarea{
  resize:vertical;
  min-height:90px;
}

/* ========================= */
/* CHECKBOX */
/* ========================= */

.checkbox{
  display:flex;
  align-items:center;
  gap:8px;
}

.checkbox input{
  width:auto;
  transform:scale(1.1);
  cursor:pointer;
}

/* ========================= */
/* BUTTONS */
/* ========================= */

button{
  font-family:inherit;
}

.btn{
  display:inline-block;
  padding:7px 14px;
  border-radius:6px;
  border:none;
  background:#3b82f6;
  color:white;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  text-decoration:none;
  transition:all .15s ease;
}

.btn:hover{
  background:#2563eb;
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(37,99,235,.25);
}

.btn:active{
  transform:scale(.97);
}

/* secondary */

.btn-secondary{
  background:#6b7280;
}

.btn-secondary:hover{
  background:#4b5563;
}

/* success */

.btn-success{
  background:#16a34a;
}

.btn-success:hover{
  background:#15803d;
}

/* danger */

.btn-danger{
  background:#dc2626;
}

.btn-danger:hover{
  background:#b91c1c;
}

/* outline button */

.btn-outline{
  background:white;
  border:1px solid #d1d5db;
  color:#374151;
}

.btn-outline:hover{
  background:#f9fafb;
}

/* ========================= */
/* CARD */
/* ========================= */

.card{
  background:white;
  border-radius:12px;
  padding:20px;
  box-shadow:0 6px 20px rgba(0,0,0,0.06);
}

/* ========================= */
/* PAGE TITLES */
/* ========================= */

h1{
  font-size:26px;
  margin-bottom:20px;
}

h2{
  font-size:20px;
  margin-bottom:14px;
}

h3{
  font-size:16px;
  margin-bottom:10px;
}
.top-header{
  width:100%;
  height: 40px;
  background:#111827;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}

.nav{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
  display:flex;
  align-items:center;
  height:40px;
  list-style:none;
}

.nav li{
  margin-right:20px;
}

.nav a{
  color:#e5e7eb;
  text-decoration:none;
  font-size:14px;
  font-weight:500;
  transition:all .15s ease;
}

.nav a:hover{
  color:#fff;
}

/* ========================= */
/* DIVIDER */
/* ========================= */

.divider{
  height:1px;
  background:#e5e7eb;
  margin:20px 0;
}

/* ========================= */
/* BADGE */
/* ========================= */

.badge{
  display:inline-block;
  padding:3px 8px;
  border-radius:6px;
  font-size:12px;
  font-weight:600;
  background:#e5e7eb;
  color:#374151;
}

/* ========================= */
/* FLEX HELPERS */
/* ========================= */

.flex{
  display:flex;
}

.flex-between{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.flex-center{
  display:flex;
  align-items:center;
  gap:10px;
}

/* ========================= */
/* SPACING HELPERS */
/* ========================= */

.mt-10{margin-top:10px;}
.mt-20{margin-top:20px;}
.mb-10{margin-bottom:10px;}
.mb-20{margin-bottom:20px;}