/*
 * NB Tool UI kit – class dùng chung cho mọi công cụ để giao diện đồng bộ.
 * Dùng trong HTML của tool: .nbt-row, .nbt-field, .nbt-label, .nbt-input, .nbt-btn, .nbt-btn--ghost,
 * .nbt-result, .nbt-table, .nbt-note, .nbt-grid-2, .nbt-grid-3, .nbt-drop.
 * Màu sắc ăn theo biến --nbt-* trong cài đặt.
 */

.nbt-tool {
	--nbt-primary: #1d4ed8;
	--nbt-text: #0f172a;
	--nbt-card: #fff;
	--nbt-border: #e2e8f0;
	--nbt-success: #16a34a;
	--nbt-warning: #d97706;
	--nbt-danger: #dc2626;
	--nbt-radius: 12px;
	font-size: 15px;
	line-height: 1.55;
}

.nbt-tool .nbt-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 12px; }
.nbt-tool .nbt-grid-2 { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.nbt-tool .nbt-grid-3 { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.nbt-tool .nbt-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 200px; min-width: 0; }
.nbt-tool .nbt-label { font-weight: 600; font-size: .9em; }

.nbt-tool .nbt-input,
.nbt-tool .nbt-select,
.nbt-tool .nbt-textarea {
	width: 100%;
	min-height: 42px;
	margin: 0;
	padding: 8px 12px;
	font: inherit;
	color: var(--nbt-text);
	background: var(--nbt-card);
	border: 1px solid var(--nbt-border);
	border-radius: calc(var(--nbt-radius) * .66);
	box-shadow: none;
	outline: none;
	transition: border-color .15s, box-shadow .15s;
}
.nbt-tool .nbt-textarea { min-height: 120px; resize: vertical; }
.nbt-tool .nbt-input:focus,
.nbt-tool .nbt-select:focus,
.nbt-tool .nbt-textarea:focus {
	border-color: var(--nbt-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--nbt-primary) 18%, transparent);
}

.nbt-tool .nbt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 42px;
	margin: 0;
	padding: 8px 18px;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
	background: var(--nbt-primary);
	border: 1px solid var(--nbt-primary);
	border-radius: calc(var(--nbt-radius) * .66);
	cursor: pointer;
	text-decoration: none;
	transition: filter .15s, transform .05s;
}
.nbt-tool .nbt-btn:hover { filter: brightness(1.08); color: #fff; }
.nbt-tool .nbt-btn:active { transform: translateY(1px); }
.nbt-tool .nbt-btn:disabled { opacity: .5; cursor: not-allowed; }
.nbt-tool .nbt-btn--ghost { color: var(--nbt-primary); background: transparent; }
.nbt-tool .nbt-btn--ghost:hover { color: var(--nbt-primary); background: color-mix(in srgb, var(--nbt-primary) 8%, transparent); }

.nbt-tool .nbt-result {
	margin-top: 16px;
	padding: 16px;
	background: color-mix(in srgb, var(--nbt-primary) 6%, var(--nbt-card));
	border: 1px solid color-mix(in srgb, var(--nbt-primary) 25%, var(--nbt-border));
	border-radius: var(--nbt-radius);
}
.nbt-tool .nbt-result:empty { display: none; }
.nbt-tool .nbt-note { font-size: .85em; color: color-mix(in srgb, var(--nbt-text) 60%, transparent); }

.nbt-tool .nbt-table { width: 100%; border-collapse: collapse; font-size: .92em; }
.nbt-tool .nbt-table th,
.nbt-tool .nbt-table td { padding: 8px 10px; border-bottom: 1px solid var(--nbt-border); text-align: left; }
.nbt-tool .nbt-table th { font-weight: 600; background: color-mix(in srgb, var(--nbt-primary) 5%, var(--nbt-card)); }

.nbt-tool .nbt-drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 160px;
	padding: 24px;
	text-align: center;
	border: 2px dashed var(--nbt-border);
	border-radius: var(--nbt-radius);
	cursor: pointer;
	transition: border-color .15s, background .15s;
}
.nbt-tool .nbt-drop:hover,
.nbt-tool .nbt-drop.is-over {
	border-color: var(--nbt-primary);
	background: color-mix(in srgb, var(--nbt-primary) 5%, transparent);
}

/* Thông báo theo trạng thái */
.nbt-tool .nbt-alert { padding: 10px 14px; border-radius: calc(var(--nbt-radius) * .66); border: 1px solid; font-size: .92em; }
.nbt-tool .nbt-alert--success { color: var(--nbt-success); border-color: var(--nbt-success); background: color-mix(in srgb, var(--nbt-success) 8%, transparent); }
.nbt-tool .nbt-alert--warning { color: var(--nbt-warning); border-color: var(--nbt-warning); background: color-mix(in srgb, var(--nbt-warning) 8%, transparent); }
.nbt-tool .nbt-alert--danger { color: var(--nbt-danger); border-color: var(--nbt-danger); background: color-mix(in srgb, var(--nbt-danger) 8%, transparent); }