/* © 2025 Mark Kats. Все права защищены. Копирование и переработка запрещены. */

:root{
	--shd-modal-bg: #1a1b1e;
	--shd-border: rgba(255,255,255,.14);
	--shd-hair: rgba(255,255,255,.12);
	--shd-hair-2: rgba(255,255,255,.22);
	--shd-shadow: 0 18px 60px rgba(0,0,0,.55);
	--shd-text: #fff;
	--shd-text-2: rgba(255,255,255,.78);
	--shd-link: #8ecbff;
	--shd-ghost: rgba(255,255,255,.06);
	--shd-surface: rgba(255,255,255,.10);
	--shd-surface-2: rgba(255,255,255,.16);
	--shd-overlay: rgba(0,0,0,.55);
	--shd-focus: rgba(142,203,255,.75);
	--shd-danger: #b01800;
	--shd-danger-2: #9c1300;
	--shd-danger-ink: rgba(216,30,0,.14);
	--shd-danger-brd: rgba(216,30,0,.25);
	--shd-radius: 14px;
	--shd-radius-sm: 10px;
	--shd-pad: 12px;
	--shd-btn-h: 32px;
	--shd-font-mono: 'Fira Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
	--shd-font-ui: 'Artifakt Element', -apple-system, system-ui, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif;
	--shd-font-ttl: 'IBM Plex Sans Condensed', system-ui, sans-serif;
}

body.shd-modal-open{
	overflow: hidden;
}

#shd-modal-overlay,
#shd-prompt-overlay,
#shd-modal-overlay *,
#shd-prompt-overlay *{
	pointer-events: auto;
	user-select: text;
}

#shd-modal-overlay,
#shd-prompt-overlay{
	position: fixed;
	inset: 0;
	background: var(--shd-overlay);
	backdrop-filter: blur(8px) saturate(120%);
	z-index: 1053;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 10px;
}

@keyframes shd-fade-in{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}

@keyframes shd-pop{
	from{
		transform: translateY(6px) scale(.985);
		opacity: 0;
	}
	to{
		transform: translateY(0) scale(1);
		opacity: 1;
	}
}

#shd-modal-overlay[style*="display: flex"],
#shd-prompt-overlay[style*="display: flex"]{
	animation: shd-fade-in .12s ease-out;
}

.shd-modal,
.shd-prompt{
	position: relative;
	background: linear-gradient(0deg, rgba(255,255,255,.035), rgba(255,255,255,.035)), linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
	border: 1px solid var(--shd-border);
	border-radius: var(--shd-radius);
	box-shadow: var(--shd-shadow);
	color: var(--shd-text);
	padding: var(--shd-pad);
	max-width: min(92vw, 560px);
	width: clamp(320px, 70vw, 520px);
	font-family: var(--shd-font-ui);
	animation: shd-pop .14s ease-out;
}

.shd-modal::before,
.shd-prompt::before{
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
	pointer-events: none;
}

.shd-modal-header,
.shd-prompt-header{
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: 10px;
}

.shd-modal-icon,
.shd-prompt-icon{
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: var(--shd-danger-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--shd-danger-brd);
}

.shd-modal-icon svg,
.shd-prompt-icon svg{
	width: 16px;
	height: 16px;
	opacity: .95;
}

.shd-modal h2,
.shd-prompt h2{
	margin: 0;
	font: 700 1.08rem/1.2 var(--shd-font-ttl);
	letter-spacing: .2px;
	color: var(--shd-text);
}

.shd-divider,
.shd-prompt-divider{
	height: 1px;
	margin: 10px 0 8px;
	background: rgba(255,255,255,.10);
}

.shd-modal .shd-modal-body,
.shd-prompt .shd-prompt-body{
	font: 400 .96rem/1.55 var(--shd-font-ui);
	color: var(--shd-text-2);
	background: transparent;
	border: none;
	border-radius: var(--shd-radius-sm);
	margin-bottom: 10px;
	max-height: 58vh;
	overflow: auto;
	word-break: break-word;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.shd-modal .shd-modal-body p,
.shd-prompt .shd-prompt-body p{
	margin: 0 0 .7em;
}

.shd-modal .shd-modal-body p:last-child,
.shd-prompt .shd-prompt-body p:last-child{
	margin-bottom: 0;
}

.shd-modal .shd-modal-body ul,
.shd-modal .shd-modal-body ol,
.shd-prompt .shd-prompt-body ul,
.shd-prompt .shd-prompt-body ol{
	margin: .6em 0 .6em 1.2em;
}

.shd-modal .shd-modal-body li,
.shd-prompt .shd-prompt-body li{
	margin: .25em 0;
}

.shd-modal .shd-modal-body a,
.shd-prompt .shd-prompt-body a{
	color: var(--shd-link);
	text-decoration: none;
	border-bottom: 1px dotted color-mix(in oklab, var(--shd-link), transparent 35%);
}

.shd-modal .shd-modal-body a:hover,
.shd-prompt .shd-prompt-body a:hover{
	text-decoration: underline;
}

.shd-modal .shd-modal-body code,
.shd-prompt .shd-prompt-body code{
	font-family: var(--shd-font-mono);
	background: rgba(255,255,255,.08);
	padding: .14em .4em;
	border-radius: 6px;
	border: 1px solid rgba(255,255,255,.18);
}

.shd-modal .shd-modal-body pre,
.shd-prompt .shd-prompt-body pre{
	font-family: var(--shd-font-mono);
	font-size: .85em;
	line-height: 1.55;
	background: rgba(0,0,0,.35);
	padding: 10px 12px;
	border-radius: 10px;
	overflow: auto;
	border: 1px solid rgba(255,255,255,.18);
}

/* Стабильный скролл внутри модалок (визуально скрыт) */
.shd-modal .shd-modal-body,
.shd-prompt .shd-prompt-body{
	scrollbar-width: none;
}

.shd-modal .shd-modal-body::-webkit-scrollbar,
.shd-prompt .shd-prompt-body::-webkit-scrollbar{
	width: 0;
	height: 0;
}

.shd-modal .shd-modal-body::-webkit-scrollbar,
.shd-prompt .shd-prompt-body::-webkit-scrollbar{
	width: 10px; /* будет переопределено правилом выше скрытия */
}

.shd-modal .shd-modal-body::-webkit-scrollbar-track,
.shd-prompt .shd-prompt-body::-webkit-scrollbar-track{
	background: transparent;
}

.shd-modal .shd-modal-body::-webkit-scrollbar-thumb,
.shd-prompt .shd-prompt-body::-webkit-scrollbar-thumb{
	background: rgba(255,255,255,.18);
	border-radius: 10px;
}

.shd-modal .shd-modal-body::-webkit-scrollbar-thumb:hover,
.shd-prompt .shd-prompt-body::-webkit-scrollbar-thumb:hover{
	background: rgba(255,255,255,.28);
}

.shd-form{
	display: grid;
	row-gap: 10px;
}

.shd-label{
	display: grid;
	margin-top: 0;
	gap: 3px;
}

.shd-label-text{
	font: .9rem/1.2 var(--shd-font-ui);
	color: var(--shd-text);
	opacity: .9;
}

.shd-input{
	height: var(--shd-btn-h);
	padding: 0 12px;
	border-radius: var(--shd-radius-sm);
	border: 1px solid var(--shd-hair-2);
	background: var(--shd-ghost);
	color: var(--shd-text);
	font: 500 .92rem/1 var(--shd-font-ui);
	box-sizing: border-box;
	margin-top: 0em;
	transition: outline-color .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.shd-input::placeholder{
	color: rgba(255,255,255,.55);
}

.shd-input:focus{
	outline: 2px solid var(--shd-focus);
	outline-offset: 2px;
	border-color: color-mix(in oklab, var(--shd-focus), transparent 50%);
	background: rgba(255,255,255,.08);
}

.shd-input[disabled]{
	opacity: .6;
	cursor: not-allowed;
}

.shd-error{
	display: none;
	margin: 6px 0 0;
	color: #ff8a80;
	font: 600 .84rem/1.25 var(--shd-font-ui);
}

.shd-modal .shd-modal-actions,
.shd-actions{
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	margin-top: 10px;
}

.shd-btn{
	all: unset;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 104px;
	max-width: 320px;
	height: var(--shd-btn-h);
	padding: 0 16px;
	border-radius: 10px;
	background: var(--shd-surface);
	border: 1px solid var(--shd-hair-2);
	cursor: pointer;
	font: 700 .9rem/1 var(--shd-font-ttl);
	color: var(--shd-text);
	letter-spacing: .2px;
	transition: background .15s ease, transform .04s ease, border-color .12s ease, box-shadow .15s ease;
}

.shd-btn:hover{
	background: var(--shd-surface-2);
}

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

.shd-btn:focus-visible{
	outline: 2px solid var(--shd-focus);
	outline-offset: 2px;
}

.shd-btn[disabled]{
	opacity: .55;
	pointer-events: none;
}

.shd-btn-ghost{
	background: var(--shd-ghost);
	border-color: var(--shd-hair);
}

.shd-btn-ghost:hover{
	background: color-mix(in oklab, var(--shd-ghost), white 8%);
}

.shd-btn.shd-btn-danger{
	background: var(--shd-danger);
	border-color: var(--shd-danger-2);
	box-shadow: 0 6px 22px rgba(176,24,0,.18);
}

.shd-btn.shd-btn-danger:hover{
	background: var(--shd-danger-2);
}

.shd-modal.shd-dirpicker{
	display: flex;
	flex-direction: column;
	max-height: min(92vh, 720px);
}

.shd-modal.shd-dirpicker .shd-modal-body{
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	max-height: unset;
	padding-right: 0;
}

.shd-dir-tree{
	flex: 1 1 auto;
	min-height: 140px;
	overflow: auto;
	padding: 6px 10px 6px 6px;
}

.shd-dir-node{
	display: grid;
	grid-template-columns: 22px 1fr auto;
	align-items: center;
	gap: 6px;
	padding: 4px 6px;
	border-radius: 8px;
}

.shd-dir-node:hover{
	background: var(--shd-ghost);
}

.shd-dir-toggle{
	all: unset;
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: 6px;
}

.shd-dir-toggle:focus-visible{
	outline: 2px solid var(--shd-focus);
	outline-offset: 2px;
}

.shd-dir-toggle.hidden{
	visibility: hidden;
	pointer-events: none;
}

.shd-dir-caret{
	font-family: var(--shd-font-ui);
	opacity: .9;
}

.shd-dir-icon{
	width: 22px;
	text-align: center;
}

.shd-dir-name{
	font: 500 .95rem/1.35 var(--shd-font-ui);
	color: var(--shd-text-2);
	word-break: break-word;
}

.shd-dir-children{
	margin-left: 20px;
	border-left: 1px dashed var(--shd-hair);
	padding-left: 8px;
	display: none;
}

.shd-dir-node[aria-selected="true"]{
	background: color-mix(in oklab, var(--shd-surface), transparent 10%);
	border: 1px solid var(--shd-hair-2);
}

.shd-dir-loading{
	font: 500 .9rem/1.35 var(--shd-font-ui);
	opacity: .85;
	padding: 2px 6px;
}

.shd-dir-empty{
	font: 500 .9rem/1.35 var(--shd-font-ui);
	opacity: .75;
	padding: 2px 6px;
}

.shd-dir-footer-path{
	font: 600 .9rem/1 var(--shd-font-mono);
	color: var(--shd-text-2);
	padding: 6px 2px 0;
	user-select: text;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.flatpickr-calendar{
	z-index: 100000 !important;
}

.flatpickr-day.has-data{
	background: #1e90ff;
	color: #fff;
	border-radius: 6px;
}

@media (max-width:600px){
	.shd-modal{
		width: 94vw;
	}
	.shd-prompt{
		width: 94vw;
	}
	.shd-actions{
		flex-wrap: wrap;
	}
	.shd-btn{
		min-width: 92px;
		flex: 1 1 auto;
	}
}

@media (prefers-reduced-motion:reduce){
	#shd-modal-overlay[style*="display: flex"],
	#shd-prompt-overlay[style*="display: flex"],
	.shd-modal,
	.shd-prompt{
		animation: none !important;
	}
}

@keyframes shd-spin{
	from{
		transform: rotate(0);
	}
	to{
		transform: rotate(360deg);
	}
}

.shd-modal-icon svg.spin{
	animation: shd-spin .9s linear infinite;
}

.shd-deploy .shd-modal-body{
	white-space: normal !important;
	word-break: break-word;
	max-height: none;
	overflow: visible;
}

.shd-deploy .shd-status{
	margin: 0 0 6px;
	font: 500 .95rem/1.35 var(--shd-font-ui);
	color: var(--shd-text-2);
}

.shd-deploy .shd-log{
	display: block;
	margin: 0;
	background: #0f0f10;
	color: #eaeaea;
	padding: 10px;
	border-radius: var(--shd-radius-sm);
	overflow: auto;
	word-break: break-word;
	text-align: left;
	white-space: pre-wrap;
	font-size: .85em;
	font-family: var(--shd-font-mono);
	border: 1px solid var(--shd-hair-2);
	box-shadow: inset 0 0 10px rgba(255,255,255,.15);
	max-height: 60vh;
}

/* ==== DB cell edit: resizable modal + flexible textarea ==== */
.shd-prompt.shd-prompt-db{
	max-width: 800px;
	max-height: 600px;
	min-width: 320px;
	min-height: 260px;
	width: clamp(320px, 500px, 800px);
	resize: both;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.shd-prompt-db .shd-prompt-body{
	flex: 1 1 auto;
	max-height: none;
	overflow: auto;
}

.shd-db-edit{
	display: none;
	flex: 1 1 auto;
}

.shd-db-textarea{
	width: 100%;
	height: 100%;
	min-height: 165px;
	box-sizing: border-box;
	padding: 10px 12px;
	border-radius: var(--shd-radius-sm);
	border: 1px solid var(--shd-hair-2);
	background: var(--shd-ghost);
	color: var(--shd-text);
	font: 500 .95rem/1.45 var(--shd-font-ui);
	outline: none;
	resize: none;
}

.shd-db-actions{
	margin-top: 0px !important;
}

.shd-prompt-db .shd-prompt-body{
	white-space: normal !important;
}

/* ==== Columns Manager helpers ==== */
#cmList{
	max-height: 58vh;
	overflow: auto;
	scrollbar-width: none;
}

#cmList::-webkit-scrollbar{
	width: 0;
	height: 0;
}

@media (max-width:900px){
	#cmList li>div{
		grid-template-columns: 1fr !important;
	}
	#cmList [data-role="type"]{
		display: none !important;
	}
	#cmList [data-role="type-custom"]{
		display: none !important;
	}
	#cmList [data-act="rename"]{
		display: none !important;
	}
	.shd-actions{
		flex-wrap: wrap;
	}
	.shd-btn{
		min-width: 88px;
		flex: 1 1 auto;
	}
}

.shd-passwrap{
	position: relative;
}

.shd-passwrap .shd-input{
	width: 92%;
	padding-right: 48px;
}

.shd-pass-toggle{
	position: absolute;
	top: calc(50% + 2px);
	right: 0px;
	transform: translateY(-50%);
	height: 32px;
	width: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	border: 1px solid var(--shd-hair-2);
	background: var(--shd-ghost);
	color: var(--shd-text);
	cursor: pointer;
	line-height: 1;
	transition: background .12s ease, border-color .12s ease, transform .08s ease, box-shadow .12s ease;
}

.shd-pass-toggle:hover{
	background: var(--shd-surface);
	border-color: var(--shd-hair-2);
	box-shadow: 0 0 0 3px rgba(255,255,255,.07) inset;
}

.shd-pass-toggle:active{
	transform: translateY(-50%) scale(.98);
}

#shd-modal-overlay svg,
#shd-prompt-overlay svg{
	background: transparent !important;
	box-shadow: none !important;
	filter: none !important;
	mix-blend-mode: normal !important;
}

.shd-modal-icon svg,
.shd-prompt-icon svg{
	background: transparent !important;
}

@media (max-width:600px){
	.shd-modal .shd-modal-actions,
	.shd-actions{
		flex-wrap: wrap;
		justify-content: center;
		gap: 6px;
	}

	.shd-btn{
		min-width: auto;
		max-width: 100%;
		flex: 0 0 auto;
		padding: 0 10px;
		font-size: .86rem;
		white-space: nowrap;
	}
}