/* Tasks Portal - стили (из дизайн-макета) */
:root{
	--bg:#ffffff;
	--surface:#ffffff;
	--surface-2:#f6f7f8;
	--text:#111827;
	--muted:#6b7280;
	--line:#e5e7eb;
	--field-inactive-bg: var(--surface-2);
	--field-inactive-opacity:.78;
	/* единый алиас - в коде встречается var(--border) */
	--border: var(--line);

	--brand:#111827;
	--brand-2:#16a34a;
	--warn:#d97706;
	--danger:#dc2626;

	--chrome-bg:#0b0f19;
	--chrome-text:rgba(255,255,255,.92);
	--chrome-muted:rgba(255,255,255,.68);
	--chrome-line:rgba(255,255,255,.14);
	--chrome-pill:rgba(255,255,255,.06);

	--radius:12px;
	--radius-sm:10px;
	--max:1200px;
	--header-h:92px;
	--nav-h:54px;
	--gap:14px;
	--pad:16px;
	--outer-gap:46px;

	--fs-12:12px;
	--fs-13:13px;
	--fs-14:14px;
	--fs-16:16px;
	--fs-18:18px;
	--fs-22:22px;
	--fs-28:28px;

	--shadow-chrome: 0 10px 28px rgba(0,0,0,.28);
	--shadow-chrome-soft: 0 6px 18px rgba(0,0,0,.22);
	--shadow-chrome-up: 0 -10px 28px rgba(0,0,0,.22);

	--font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, "Apple Color Emoji", "Segoe UI Emoji";

	/* стрелка для select (единое значение) */
	--select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%23111827' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
*{ box-sizing:border-box; }
html,body{ height:auto; }
body{
	margin:0;
	font-family:var(--font);
	font-size:var(--fs-14);
	background:var(--bg);
	color:var(--text);
	line-height:1.35;

	/* раскладка страницы: футер всегда внизу */
	min-height:100vh;
	display:flex;
	flex-direction:column;
	overflow-x: clip;
}
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; }

.band{ width:100%; border-bottom:1px solid var(--line); background:var(--bg); }
header.band, nav.band{ position:sticky; z-index:50; }
header.band{ top:0; }
nav.band{ top:var(--header-h); z-index:40; }
.band.chrome{
	background:var(--chrome-bg);
	color:var(--chrome-text);
	border-color:var(--chrome-line);
}
header.band.chrome{ box-shadow: var(--shadow-chrome-soft); }
nav.band.chrome{ box-shadow: var(--shadow-chrome); }
footer.band.chrome{ box-shadow: var(--shadow-chrome-up); }

/* Области (Header/Content/Footer): фиксированная ширина 85% (без настраиваемых параметров) */
.wrap{ width:85%; max-width:none; margin:0 auto; }
.wrap.footer{ width:85%; max-width:none; }
.wrap.nav{ width:85%; max-width:none; }

/* флеш-сообщение: не прижимаем к навигации и не отрываем от контента */
.flash-wrap{ margin-top:var(--outer-gap); margin-bottom:var(--gap); }
.flash-wrap + main{ margin-top:0; }


.header{
	height:var(--header-h);
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:var(--gap);
}
.appbrand{ display:flex; align-items:center; gap:12px; min-width:0; }
.appbrand h1{ font-size:var(--fs-28); margin:0; font-weight:760; letter-spacing:.2px; line-height:1.05; }

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

.id-card{
	display:flex;
	align-items:stretch;
	border:1px solid var(--line);
	background:var(--surface-2);
	color:var(--text);
	border-radius:var(--radius-sm);
	overflow:hidden;

	/* чтобы кнопка входа (когда нет пользователя) не была ниже, чем кнопка выхода */
	min-height:52px;
}
.id-action{
	width:44px;
	border:0;
	background:transparent;
	color:inherit;
	display:grid;
	place-items:center;
	cursor:pointer;
	transition: background .12s ease, color .12s ease;

	min-height:52px;
}
.id-action:hover{ background:rgba(17,24,39,.08); }
.id-meta{
	padding:10px 12px;
	display:grid;
	gap:2px;
	line-height:1.1;
	border-left:1px dashed var(--line);
	min-width:280px;
}
.id-meta .user-email{
	font-size:12px;
	opacity:.82;
}
.id-action.profile-btn{ border-left:1px dashed var(--line); }
.id-action.logout-btn{ border-left:1px dashed var(--line); }

body[data-auth="in"] .login-btn{ display:none; }
body[data-auth="in"] .id-meta{ border-left:0; }
body[data-auth="out"] .logout-btn,
body[data-auth="out"] .profile-btn,
body[data-auth="out"] .id-meta{ display:none; }

.nav{
	height:var(--nav-h);
	display:flex;
	align-items:center;
	justify-content:flex-start;
	gap:var(--gap);
}
.tabs{
	display:flex;
	align-items:center;
	gap:10px;
	flex-wrap:nowrap;
	position:relative;
	padding:0;
	max-width:100%;
}


.tab{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	gap:8px;
	padding:9px 12px;
	border-radius:999px;
	color:var(--chrome-muted);
	background:transparent;
	border:1px solid transparent;
	cursor:pointer;
	font:inherit;
	line-height:1.1;
	white-space:nowrap;
	-webkit-appearance:none;
	appearance:none;
	transition: background .12s ease, color .12s ease, border-color .12s ease;
	position:relative;
}

.tab:hover{ background:rgba(255,255,255,.06); border-color:var(--chrome-line); color:var(--chrome-text); }
.tab.is-current{ background:rgba(255,255,255,.10); border-color:var(--chrome-line); color:var(--chrome-text); font-weight:650; }

/* контент: 85% (как header/footer). max-width отключаем, иначе на широких экранах появляются сдвиги. */
main{ width:85%; max-width:none; margin:var(--outer-gap) auto 0; padding-bottom:var(--outer-gap); flex:1 0 auto; }
.stack{ display:grid; gap:var(--gap); }
.stack > *{ min-width:0; } /* разрешаем внутренним блокам со скроллом сжиматься внутри CSS grid */
@media (max-width: 560px){
	.kpi-grid{ grid-template-columns: 1fr; }
}

.card{
	border:1px solid var(--line);
	background:var(--surface);
	border-radius:var(--radius);
	overflow:visible;
	min-width:0; /* чтобы широкое содержимое (календарь) не растягивало всю страницу */
}
.card-h{
	padding:14px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	/* Чтобы заголовки карточек имели одинаковую высоту (с кнопками и без) */
	min-height:68px;
	border-bottom:1px solid var(--line);
	background:var(--surface-2);
}
.card-h h2,
.card-h h3{ margin:0; font-size:var(--fs-18); letter-spacing:.2px; }
.titleblock{ display:grid; gap:2px; }
.card-b{ padding:var(--pad); }

/* Разделитель внутри карточек (например между таблицей и формой) */
.card-sep{
	height:1px;
	background:var(--line);
	margin:14px 0;
}

/* Если разделитель идёт сразу после пагинации, убираем верхний отступ, чтобы расстояния были одинаковыми */
.table-footer + .card-sep{
	margin-top:0;
	margin-bottom:10px;
}

.field{
	border:1px solid var(--line);
	background:var(--surface);
	border-radius:10px;
	padding:10px 10px;
	color:var(--text);
	outline:none;
	width:100%;
	box-sizing:border-box;
}
/* Для инпутов/селектов фиксируем высоту как у кнопок/чекбоксов (40px) */
input.field,
select.field{
	height:40px;
}
textarea.field{ min-height:110px; resize:vertical; }

/* Неактивные поля (disabled/readonly): один стиль */
.field:disabled,
.field[disabled],
.field[readonly],
.field.readonly,
.readonly{
	background: var(--field-inactive-bg);
	color: var(--text);
	opacity: var(--field-inactive-opacity);
}
.field:disabled,
.field[disabled]{
	cursor: not-allowed;
}

.searchbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.searchbar .field{ flex:1; min-width:240px; }

/* Сделать field-compact таким же по внутреннему выравниванию, как обычный field */
.field.field-compact{
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Если field-mini используется как "коробка" с числом (Nr.) */
.field.field-compact.field-mini{
	text-align: center;
}

/* На всякий случай: если внутри бывает input/select */
.field.field-compact input,
.field.field-compact select{
	height: 100%;
	text-align: center;
}

/* Dashboard: фильтр периода в шапке показателей */
.kpi-filters{
	display:flex;
	justify-content:flex-end;
	gap:10px;
	align-items:center;
	flex-wrap:wrap;
}
.kpi-filters .kpi-date{
	display:flex;
	flex-direction:row;
	align-items:center;
	gap:6px;
	min-width:160px;
}
.kpi-filters .self-end{ justify-self:end; }
.kpi-date{ display:flex; align-items:center; gap:8px; }
.kpi-date .field{ min-width:160px; }
.kpi-filters .fgroup{ margin:0; }
@media (max-width:780px){ .kpi-filters{ flex-wrap:wrap; } }

.filters-grid{
	display:grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap:10px;
}
@media (max-width:1100px){ .filters-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .filters-grid{ grid-template-columns:1fr; } }

/* Проект: блок "Module" (кнопки перехода к модулям) */
.modules-grid{
	display:grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap:10px;
}
@media (max-width:1100px){ .modules-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .modules-grid{ grid-template-columns:1fr; } }

.module-item{
	border:1px solid var(--line);
	background:var(--surface);
	border-radius:var(--radius-sm);
	padding:12px;
	min-height:52px;
	display:flex;
	align-items:center;
	gap:10px;
	transition: background .12s ease, color .12s ease, border-color .12s ease;
	min-width:0;
}
.module-item:hover{
	background:var(--text);
	color:#fff;
	border-color:var(--line);
}

.module-icon{
	width:36px;
	height:36px;
	min-width:36px;
	display:grid;
	place-items:center;
	border:1px solid var(--line);
	border-radius:999px;
	background:var(--surface-2);
	color:var(--text);
	flex:0 0 36px;
}
.module-icon::before{
	font-family: "Material Symbols Rounded";
	content: attr(data-icon);
	font-size: 24px;
	line-height: 1;
	font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
	color: currentColor;
}
.module-item:hover .module-icon{
	background:rgba(255,255,255,.10);
	border-color:rgba(255,255,255,.18);
	color:#fff;
}

.module-title{
	font-size:var(--fs-14);
	font-weight:700;
	line-height:1.15;
	min-width:0;
}

.filter-item{
	border:1px solid var(--line);
	background:var(--surface);
	border-radius:var(--radius-sm);
	padding:12px;
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:12px;
	transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.filter-item:hover,
.filter-item.is-active{
	background:var(--text);
	color:#fff;
	border-color:var(--line);
}
.filter-main{ display:grid; gap:4px; min-width:0; }
.filter-title{ font-size:var(--fs-14); font-weight:700; line-height:1.1; }
.filter-meta{ font-size:var(--fs-13); color:var(--muted); }
.filter-item:hover .filter-meta,
.filter-item.is-active .filter-meta{ color:rgba(255,255,255,.72); }
.count{
	font-size:var(--fs-12);
	border:1px solid var(--line);
	padding:4px 8px;
	border-radius:999px;
	color:var(--muted);
	background:var(--surface);
	white-space:nowrap;
}

/* Число в фильтрах выравниваем по вертикальному центру блока, а не по верхнему краю */
.filter-item .count{ align-self:center; }
.filter-item:hover .count,
.filter-item.is-active .count{
	background:rgba(255,255,255,.10);
	border-color:rgba(255,255,255,.18);
	color:rgba(255,255,255,.86);
}

.clients-grid{
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:10px;
}
@media (max-width:1100px){ .clients-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .clients-grid{ grid-template-columns:1fr; } }

.client-card{
	border:1px solid var(--line);
	background:var(--surface);
	border-radius:var(--radius-sm);
	padding:12px;
	display:grid;
	gap:10px;
	transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.client-card:hover{
	background:var(--text);
	color:#fff;
	border-color:var(--line);
}
.client-title{ font-size:var(--fs-14); font-weight:700; line-height:1.2; letter-spacing:.1px; }
.meta-rows{
	display:grid;
	gap:0;
	margin-top:2px;
}
.meta-row{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap:10px;
	padding:6px 0;
	border-bottom:1px dashed var(--line);
	font-size:var(--fs-13);
}
.meta-row:last-child{ border-bottom:0; }
.meta-label{ color:var(--muted); }
.meta-val{ color:var(--text); font-weight:600; text-align:right; }
.client-card:hover .meta-label{ color:rgba(255,255,255,.70); }
.client-card:hover .meta-val{ color:rgba(255,255,255,.92); }

.btn{
	border:1px solid var(--line);
	background:var(--surface);
	color:var(--text);
	border-radius:999px;
	padding:9px 12px;
	min-height:40px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	transition: background .12s ease, color .12s ease, border-color .12s ease;
	box-sizing:border-box;
}
.btn:hover{
	background: var(--text);
	border-color: var(--line);
	color:#fff;
}
.btn.primary{ border-color: var(--line); font-weight:400; }

.select, select.field{
	appearance:none;
	-webkit-appearance:none;
	padding-right:52px;
	background-image:var(--select-arrow);
	background-repeat:no-repeat;
	background-position:right 18px center;
	background-size:16px 16px;
}
.select{
	border:1px solid var(--line);
	background-color:var(--surface);
	border-radius:10px;
	padding:10px 52px 10px 12px;
	color:var(--text);
	outline:none;
	height:40px;
}
.select:focus, select.field:focus{ border-color:#cbd5e1; }

.sort-btn{
	height:40px; width:40px; padding:0;
	border-radius:10px;
	line-height:1;
	display:grid; place-items:center;
}
.sort-btn svg{ display:block; }
.sort-btn.is-pressed{ background:var(--text); color:#fff; border-color:var(--line); }

.table-controls{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.sort-label{ color:var(--muted); }
@media (max-width:720px){ .table-controls{ width:100%; justify-content:flex-start; } }

/*
	Таблицы: разрешаем горизонтальный скролл внутри контейнера,
	но не перехватываем вертикальный скролл страницы.
*/
.table-wrap{
	padding:0;
	overflow-x:auto;
	overflow-y:hidden;
	max-width:100%;
	border-top:1px solid var(--line);
}
table.table{ width:100%; border-collapse:separate; border-spacing:0; }

.table td{ vertical-align: top; }
.table thead th{
	text-align:center;
	font-size:var(--fs-13);
	color:var(--muted);
	font-weight:650;
	padding:12px 14px;
	border-bottom:1px solid var(--line);
	background:var(--surface-2);
	white-space:nowrap;
	vertical-align:middle;
}

/* Колонка действий: заголовок по центру */
.table thead th.cell-actions,
.table thead th.actions-center{
	text-align:center;
}
.table tbody td{ padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top; }

/* Внутренние вертикальные границы в таблицах */
.table thead th + th{ border-left:1px solid var(--line); }
.table tbody td + td{ border-left:1px solid var(--line); }

.table tbody tr:hover{ background:var(--surface-2); }

.cell-title{ display:grid; gap:4px; min-width:260px; }
.cell-title strong{ font-size:var(--fs-16); }
.cell-sub{ font-size:var(--fs-13); color:var(--muted); }

.mini{ font-size:var(--fs-12); color:var(--muted); white-space:nowrap; }
.cell-actions{ text-align:center; white-space:nowrap; }
.table thead th.cell-actions,
.table tbody td.cell-actions{ width:1%; }


.badge{ font-size:var(--fs-12); padding:5px 8px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--muted); white-space:nowrap; }
.badge-group{ display:inline-flex; gap:6px; flex-wrap:wrap; }

.table-footer{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	padding:12px 14px;
	border-top:1px solid var(--line);
	background:var(--bg);
}

/* Убираем лишний нижний отступ после пагинации: card-b уже даёт padding снизу */
.card-b > .table-footer:last-child{
	margin-bottom: calc(-1 * var(--pad));
}
.pagination{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.btn.page{ padding:7px 10px; }
.btn.page.is-current{ background:var(--surface-2); border-color:var(--line); font-weight:400; }

.taskform{ padding:0; background:transparent; border-top:0; }
.form-grid{
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap:10px;
	align-items:start;
}
.form-grid .span2{ grid-column:1 / -1; }
.fgroup{ display:grid; gap:6px; }
.flabel{ font-size:var(--fs-13); color:var(--muted); }
.req{ margin-left:4px; font-weight:700; color:#111827; }
.fhelp{ font-size:var(--fs-12); color:var(--muted); opacity:.9; margin-top:-2px; }

.combo{ position:relative; }
.combo-native{
	position:absolute;
	left:-9999px;
	width:1px;
	height:1px;
	opacity:0;
	pointer-events:none;
}
	.combo-btn{	width:100%;
	text-align:left;
	border:1px solid var(--line);
	border-radius:10px;
	background-color:var(--surface);
	color:var(--text);
	padding:10px 52px 10px 12px;
	cursor:pointer;
	outline:none;
	appearance:none;
	-webkit-appearance:none;
	background-image:var(--select-arrow);
	background-repeat:no-repeat;
	background-position:right 18px center;
	background-size:16px 16px;
}
.combo-btn:focus{ border-color:#cbd5e1; }
.combo-btn .hint{ color:var(--muted); font-size:var(--fs-13); }

.combo-chips{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.sel-chip{
	font-size:var(--fs-12);
	border:1px solid var(--line);
	background:var(--surface-2);
	color:var(--text);
	padding:5px 8px;
	border-radius:999px;
	white-space:nowrap;
}
.combo-panel{
	position:absolute;
	top:calc(100% + 6px);
	left:0; right:0;
	z-index:80;
	border:1px solid var(--line);
	background:var(--surface);
	border-radius:10px;
	padding:8px;
	box-shadow:0 18px 44px rgba(0,0,0,.10);
	display:none;
	max-height:220px;
	overflow:auto;
}
.combo.open .combo-panel{ display:block; }
.combo-search{ margin:0 0 8px 0; }
.combo-item{
	display:flex;
	align-items:center;
	gap:10px;
	padding:8px;
	border-radius:8px;
	cursor:pointer;
}
.combo-item:hover{ background:var(--surface-2); }
.combo-item input{ margin:0; }
.combo-item .meta{ display:grid; gap:2px; }
.combo-item .name{ font-weight:650; font-size:var(--fs-13); }
.combo-item .role{ font-size:var(--fs-12); color:var(--muted); }
@media (max-width:820px){
	.form-grid{ grid-template-columns:1fr; }
}

footer.band{ border-top:1px solid var(--chrome-line); border-bottom:0; margin-top:0; }
.footer{ padding:16px 0; color:var(--chrome-muted); font-size:var(--fs-13); text-align:center; }

@media (max-width:980px){
	header.band{ position:sticky; top:0; z-index:200; }
	nav.band{ position:sticky; top:var(--header-h); z-index:190; }
}

/* небольшой хелпер для страниц авторизации */
.auth-center{ display:grid; place-items:center; }
.auth-card{ width:min(520px, 95vw); }

/* Вход: без лишних отступов, чтобы страница не превышала 100% высоты */
body[data-page="login"] main{
	width:85%;
	max-width:none;
	margin:0 auto;
	padding:0;
	flex:1 0 auto;
	display:flex;
	align-items:center;
	justify-content:center;
}
body[data-page="login"] .auth-center{
	width:100%;
	min-height:0;
	padding:0;
	display:flex;
	align-items:center;
	justify-content:center;
}

/* Страница ошибки */
.error-desc{ font-size:var(--fs-14); font-weight:550; margin:0 0 8px; line-height:1.35; }
.error{ color:#b91c1c; font-size:var(--fs-13); }


.btn:disabled{
	opacity:.55;
	cursor:not-allowed;
}


/* Быстрые кнопки статуса */
.statusbar{
	display:flex;
	gap:8px;
	flex-wrap:wrap;
	align-items:center;
}
.statusform{ margin:0; }
.status-btn{
	padding:9px 12px;
}
.status-btn.is-current{
	background: var(--text);
	color: #fff;
}


/* чипсы (chips) */
.footer-row{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:12px;
	flex-wrap:wrap;
	text-align:center;
}
.field-compact{
	height: 34px;
	padding: 6px 34px 6px 10px;
	font-size: 14px;
	max-width: 180px;
}

.row{
	display:flex;
	align-items:flex-start;
	gap:12px;
	flex-wrap:wrap;
}

/* действия без переноса (например, в настройках) */
.actions-row.nowrap{
	flex-wrap:nowrap;
	white-space:nowrap;
}
.actions-row.nowrap .btn{
	white-space:nowrap;
}


/* Утилитарные классы для выравнивания и отступов (чтобы не плодить inline-style) */
.row.row-center{ align-items:center; }
.row.gap-10{ gap:10px; }
.mt-14{ margin-top:14px; }
.mb-10{ margin-bottom:10px; }
.self-end{ align-self:flex-end; }

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

.alert{
	border:1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 10px 12px;
	background: var(--surface);
}
.alert.ok{
	border-color: rgba(22,163,74,.35);
	background: rgba(22,163,74,.06);
}

/* мягкая карточка внутри карточки */
.card.soft{ background: var(--surface-2); }


/* мини-кнопки для быстрых действий */
.btn.btn-mini{
	padding:6px 10px;
	font-size:12px;
}

/* быстрый выбор дедлайна (+1..+7) */
.quickdates{
	display:flex;
	gap:6px;
	align-items:center;
	flex-wrap:wrap;
	margin-top:8px;
}

/* кнопки в таблицах: небольшой отступ сверху, чтобы не "прилипали" */
.cell-actions .btn{
	display:inline-block;
	margin-top:0;
}
.table td.cell-actions{ vertical-align: top; }

/* действия в одну линию */
.actions-row{
	display:flex;
	gap:8px;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
}

/* информационное сообщение (нейтральный блок) */
.alert.info{
	border-color: rgba(59,130,246,.35);
	background: rgba(59,130,246,.06);
}
.alert.err{
	border-color: rgba(220,38,38,.55);
	background: rgba(220,38,38,.10);
}

/* алиасы для старых типов flash */
.alert.error{ border-color: rgba(220,38,38,.55); background: rgba(220,38,38,.10); }


/* таблица переводов: ограничиваем ширину колонки с ключом */

/* Таблицы (категории/типы полей): колонка "Имя" должна занимать доступную ширину */

/* Центрирование колонки Nr. в таблицах настроек */
.categories-table th.col-num,
.categories-table td.col-num{
	text-align:center;
	padding-left:12px;
	padding-right:12px;
}
.categories-table td.col-num .field-mini{
	margin:0 auto;
	display:block;
}

.categories-table .col-name{
	width:auto;
	max-width:none;
	word-break:break-word;
	white-space:normal;
}
.categories-table td.cell-actions{
	white-space:normal;
}
.categories-table .field.field-compact{
	min-width:0;
	max-width:none; /* важно: .field-compact ограничивает ширину 180px */
	width:100%;
}

.field-mini{
	/* Поля № (0-99): достаточно широкие + большие внутренние отступы, чтобы цифры всегда были видны */
	width:96px;
	min-width:96px;
	max-width:none;
	padding:10px 22px;
	text-align:center;
	box-sizing:border-box;
}


.actions-center{ text-align:center; }


/* Кликабельные строки таблицы */
tr.row-link{ cursor:pointer; }
tr.row-link:focus{ outline:2px solid rgba(17,24,39,.25); outline-offset:-2px; }


/* Поля проекта: отображение значения */


/* Поля проекта: значение как обычный текст (без рамки) */
.cell-text{ white-space:pre-wrap; word-break:break-word; }

/* Бейджи: состояния */
.badge.ok{ border:1px solid var(--brand-2); background:var(--surface); color:var(--text); }
/* Ticket links: подпись (Link) рядом с номером тикета */
.ticket-link-tag{ margin-left:6px; font-size:var(--fs-12); color:var(--muted); white-space:nowrap; }


/* Статистика */
.kpi-grid{
	display:grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap:12px;
}
@media (max-width: 980px){
	.kpi-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
	.kpi-grid{ grid-template-columns: 1fr; }
}
.kpi-card{
	border:1px solid var(--line);
	background:var(--surface);
	border-radius:14px;
	padding:14px;
	text-align:center;
}
.kpi-card.kpi-link{
	display:block;
}
.kpi-card.kpi-link:hover{
	border-color: rgba(0,0,0,.22);
}
.kpi-value{
	font-size:26px;
	font-weight:800;
	line-height:1.1;
}
.kpi-label{
	margin-top:6px;
	color:var(--muted);
	font-size:13px;
}


/* Settings: таблицы */
body[data-page="einstellungen"] .table tbody td{
	text-align:center;
	vertical-align:middle;
}
body[data-page="einstellungen"] .table tbody td input,
body[data-page="einstellungen"] .table tbody td select,
body[data-page="einstellungen"] .table tbody td textarea{
	text-align:left;
}


/* центрирование ячеек в отдельных таблицах */
.table.center-cells th,
.table.center-cells td{
	text-align:center;
	vertical-align:top;
}
.table.center-cells td.col-text,
.table.center-cells td.col-aufgabe{
	text-align:left;
	vertical-align:top;
}


@media (max-width: 980px){
	.kpi-filters{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
	.kpi-filters{ grid-template-columns: 1fr; }
}

/* таблицы dashboard */
th.col-num, td.col-num{ text-align:center; vertical-align:middle; }
td.col-label{ text-align:left; vertical-align:middle; }

/* dashboard: значения по центру, значения первой колонки слева */
.table.dash td{ text-align:center;  vertical-align:top; }
.table.dash th{ text-align:center; }
.table.dash td:first-child{ text-align:left; }
/* dashboard: некоторые колонки-лейблы (например Kunde) оставить слева */
.table.dash td.col-label{ text-align:left; vertical-align:middle; }

th.col-center, td.col-center{ text-align:center; }


/* --- Projektfelder-Log: одинаковая ширина Vorher/Nachher + выравнивание --- */
.table.pflog{ table-layout: fixed; }
.col-center-top{ text-align:center; vertical-align: top; }
.table.pflog .log-line{ margin: 0 0 6px 0; }
.table.pflog .log-line:last-child{ margin-bottom: 0; }

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

/* В таблицах значения не должны быть мелкими (как .mini в UI) */
.table td.mini{ font-size: var(--fs-14); color: inherit; }


/* ===== Meilensteine — календарь (Feed + Kalender) ===== */
/* Шапка блока: заголовок слева, элементы управления строго справа */
.ms-controls{
	display:flex;
	align-items:center;
	gap:12px;
	flex-wrap:nowrap;
	white-space:nowrap;
	margin-left:auto;
	max-width:100%;
	overflow-x:auto;
}
.ms-range-form{ display:flex; gap:10px; align-items:center; flex-wrap:nowrap; white-space:nowrap; }
.ms-range-form .field{ max-width:170px; }

.segmented{ display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.segmented .btn{
	border:0; border-right:1px solid var(--line); border-radius:0;
	background: var(--surface-2);
	color: var(--muted);
}
.segmented .btn:last-child{
	border-right:0;
}

.segmented .btn.is-current{
	background: var(--surface);
	color: var(--text);
	font-weight:700;
}
/* В переключателе Feed/Kalender делаем текст читаемым при наведении */
.segmented .btn:hover{ background:var(--surface); color:#000; }

/* Фрейм календаря: не растягивает страницу, горизонтальный скролл живёт внутри */
.ms-timeline{
	border:1px solid var(--line);
	border-radius:var(--radius-sm);
	overflow:hidden;               /* сохраняем скругление углов */
	max-width:100%;
	width:100%;
	background:var(--surface);
}

.ms-timeline-scroll{
	overflow-x:auto;
	overflow-y:hidden; /* вертикальный скролл не нужен; прокрутка по высоте берётся от страницы */
	max-width:100%;
	-webkit-overflow-scrolling:touch;
	min-width:0;                   /* важно внутри flex-контейнеров */
	width:100%;
	display:block;
	max-height:none;
}

/* Внутренний контент может быть шире рамки — это включает горизонтальный скролл */
.ms-timeline-inner{
	display:block;
	min-width:max-content;
	position:relative;
}

/* Подсветка колонок: выходные/сегодня по всей высоте блока (шапка + тело) */
.ms-col-overlay{
	position:absolute;
	inset:0;
	display:grid;
	grid-template-rows: 1fr;
	pointer-events:none;
	z-index:0;
}
.ms-colbg-label{ background: transparent; }
.ms-colbg{ border-left:1px solid var(--line); background: transparent; }
/* 1-й элемент overlay — пустой плейсхолдер для колонки названий, 2-й — день №1 */
.ms-col-overlay > .ms-colbg:nth-child(2){ border-left:0; }
.ms-colbg.is-weekend{ background: rgba(0,0,0,.03); }
.ms-colbg.is-today{
	background: rgba(147,197,253,.04);
	box-shadow: inset 0 0 0 2px rgba(147,197,253,.70);
}


/* Строки сетки */
.ms-row{ display:grid; align-items:stretch; border-top:1px solid var(--line); position:relative; z-index:1; }
.ms-row:first-child{ border-top:0; }

.ms-grid-head{
	position: sticky;
	top: 0;
	z-index: 5;
	background: var(--surface);
	border-bottom:1px solid var(--line);
}

.ms-cell-label{
	padding:10px 12px;
	background:var(--surface-2);
	border-right:1px solid var(--line);
}
.ms-cell-label .lbl{ font-weight:700; }

.ms-sticky-left{
	position: sticky;
	left: 0;
	z-index: 6;
}

.ms-cell-grid{ position:relative; padding:0; }

.ms-day{
	padding:10px 0;
	text-align:center;
	font-size:var(--fs-12);
	color:var(--muted);
	border-left:1px solid var(--line);
	background: var(--surface-2);
}
.ms-day:first-child{ border-left:0; }

.ms-canvas{
	display:grid;
	align-items:center;
	padding:6px 0;
	grid-auto-rows:28px;
	row-gap:6px;
	position:relative;
	isolation:isolate;
}

.ms-item{
	height:24px;
	border-radius:999px;
	padding:0 10px;
	display:flex;
	align-items:center;
	gap:8px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	font-size:var(--fs-13);
	cursor:pointer;
	box-shadow:none;
	border:1px solid rgba(0,0,0,.22);
	background:#F3F4F6;
	color:#000;
	z-index:2;
	/* базовый фон */
	border:1px solid rgba(17,24,39,.35);
	/* рамка */
	color:#111827;
	/* текст */
	box-shadow:0 1px 2px rgba(0,0,0,.06);
}

/* Полоски/штриховка не используются: элементы разделены по строкам (Tasks/Tickets/Projektfelder). */


/* узкие экраны: стек вместо 2 колонок */
@media (max-width: 860px){
	.ms-row{ grid-template-columns: 1fr !important; }
	.ms-cell-label{ border-right:0; border-bottom:1px solid var(--line); position: static; }
	.ms-grid-head{ position: static; }
}

/* ===== Projektfelder: (опционально) визуальная подсказка по датам ===== */
.pf-form [data-pf-dates]{ transition: opacity .15s ease; }

/* Проектные поля: тип + дата + срок + кнопка */
.pf-add-row{
	display:flex;
	align-items:flex-end;
	gap:10px;
	flex-wrap:nowrap;
}

.pf-dates{
	display:flex;
	gap:10px;
	flex-wrap:nowrap;
	align-items:flex-end;
}

@media (max-width: 900px){
	.pf-add-row{ flex-wrap:wrap; }
}
/* =========================================
		Meilensteine — стандартные нейтральные цвета		Tasks / Tickets / Projektfelder		Сегодня = голубая рамка, выходные = очень светлый фон		========================================= */
/* выходные в шапке */
.ms-day.is-weekend{
	background: #F9FAFB; /* очень светлый фон */
}

/* сегодня в шапке */
.ms-day.is-today{
	font-weight: 700;
	box-shadow: inset 0 0 0 2px #93C5FD; /* светло-голубая рамка */
	background: #F9FAFB;
}

/* общий стиль "облачков" */


/* Tasks (Задачи) */
.ms-item.task{
	background: #E5E7EB;
	border-color: rgba(17,24,39,.35);
	color: #111827;
}

/* Tickets (Тикеты) */
.ms-item.ticket{
	background: #D1D5DB;
	border-color: rgba(17,24,39,.35);
	color: #111827;
}

/* Projektfelder (Проектные поля) */
.ms-item.field{
	background: #F3F4F6;
	border-color: rgba(17,24,39,.35);
	color: #111827;
}

/* ===== Настройки: добавление типа поля — компактная строка без лишнего расстояния ===== */
.ft-add-row{
	display:flex;
	align-items:flex-end;
	gap:10px;
	width:100%;
	flex-wrap:nowrap;
	min-width:0;
}
.ft-add-row .ft-name{ flex:1 1 0; min-width:0; }
.ft-add-row .ft-nr{ flex:0 0 96px; }
.ft-add-row .ft-group{ flex:0 0 220px; }
.ft-add-row .ft-dates{ flex:0 0 170px; }
.ft-add-row .ft-nr .field-mini{
	width:100%;
	min-width:0;
	padding-left:12px;
	padding-right:12px;
}
/* На узких экранах допускаем перенос, но целиком по блокам */
@media (max-width: 980px){
	.ft-add-row{ flex-wrap:wrap; }
	.ft-add-row .ft-name{ flex:1 1 100%; }
	.ft-add-row .ft-nr{ flex:0 0 110px; }
	.ft-add-row .ft-group{ flex:1 1 240px; }
	.ft-add-row .ft-dates{ flex:0 0 170px; }
}

/* === Material Symbols (Rounded) — локально === */
@font-face{
	font-family: "Material Symbols Rounded";
	font-style: normal;
	font-weight: 100 700;
	src: url("./material-symbols-rounded.woff2") format("woff2");
	font-display: swap;
}

/* === Кнопка-иконка (без текста) === */
.btn.is-icon{
	width: 40px;
	min-width: 40px;
	height: 40px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}


.btn.is-icon::before{
	font-family: "Material Symbols Rounded";
	content: attr(data-icon);
	font-size: 26px;
	line-height: 1;
	font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}