/* dev.roleplay-activity.eu — společný vzhled vývojářských nástrojů.
   Navazuje na board (todo.css), aby to celé vypadalo jako jeden web:
   stejné panely, stejná tlačítka, stejné scrollbary. */

:root {
	--dev-card: rgba(32, 32, 34, 0.92);
	--dev-card-hover: rgba(48, 48, 52, 0.95);
	--dev-border: rgba(255, 255, 255, 0.12);
	--dev-border-strong: rgba(255, 255, 255, 0.26);
	--dev-text: #e3e6ec;
	--dev-dim: #a8adb8;
	--dev-faint: #7c828e;
	--dev-accent: #a1edf8;
}

/* Pozn.: `[hidden] { display: none !important }` a spinner jsou v admin-common.css. */

body { overflow-x: hidden; }

.dashboard-container {
	background: linear-gradient(
		to bottom,
		rgba(20, 20, 20, 0.6) 0%,
		rgba(20, 20, 20, 0.85) 100%
	);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
	padding: 2rem;
	margin-bottom: 1.5rem;
	border-radius: 0.5rem;
}

.dev-app {
	flex: 1 1 auto;
	padding: 1.5rem 1rem 0;
	max-width: 1500px;
	width: 100%;
	margin: 0 auto;
}

/* ── Rozcestník ──────────────────────────────────────────────────────────── */

.tool-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 1rem;
	margin-top: 1.5rem;
}

.tool-card {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: 1.25rem;
	border: 1px solid var(--dev-border);
	border-radius: 8px;
	background: var(--dev-card);
	color: var(--dev-text);
	text-decoration: none;
	transition: all 0.15s ease-in-out;
}

.tool-card:hover {
	background: var(--dev-card-hover);
	border-color: var(--dev-border-strong);
	color: var(--dev-text);
	text-decoration: none;
	transform: translateY(-2px);
}

.tool-card h5 { margin: 0 0 0.35rem; font-size: 1rem; }
.tool-card p { margin: 0; font-size: 0.85rem; color: var(--dev-dim); }

.tool-icon { font-size: 1.6rem; color: var(--dev-accent); opacity: 0.85; }

.tool-card-empty {
	opacity: 0.4;
	border-style: dashed;
	pointer-events: none;
}

/* ── Tlačítka (převzato z todo.css, aby fungovala i tady) ────────────────── */

.btn-table-info, .btn-table-success, .btn-table-danger {
	display: inline-block;
	padding: 6px 12px;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
	margin-left: 4px;
	background-color: rgba(20, 20, 20, 0.5);
	text-decoration: none;
}
.btn-table-info { color: #cdf8ff !important; border: 1px solid #a1edf8; }
.btn-table-info:hover { background-color: #2994a5 !important; border: 1px solid #c8eff5; color: #fff !important; text-decoration: none; }
.btn-table-success { color: #28a745 !important; border: 1px solid #28a745; }
.btn-table-success:hover { background-color: #1f8336 !important; color: #fff !important; text-decoration: none; }
.btn-table-danger { color: #dc3545 !important; border: 1px solid #dc3545; }
.btn-table-danger:hover { background-color: #a8212f !important; color: #fff !important; text-decoration: none; }

.btn-table-info:disabled, .btn-table-success:disabled, .btn-table-danger:disabled,
.btn-table-info[disabled], .btn-table-success[disabled], .btn-table-danger[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

/* ── Formulářové prvky na tmavém podkladu ───────────────────────────────── */

.dev-app .form-control {
	background-color: rgba(20, 20, 20, 0.65);
	border: 1px solid var(--dev-border);
	color: var(--dev-text);
}
.dev-app .form-control:focus {
	background-color: rgba(20, 20, 20, 0.85);
	border-color: var(--dev-border-strong);
	color: var(--dev-text);
	box-shadow: none;
}
.dev-app select.form-control option { background-color: #1c1c1e; color: var(--dev-text); }
.dev-app label { color: var(--dev-dim); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.4px; }

/* ── Scrollbary (stejné jako na boardu) ──────────────────────────────────── */

.dev-scroll { scrollbar-width: thin; scrollbar-color: #444 #1a1a1a; }
.dev-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.dev-scroll::-webkit-scrollbar-track { background: #1a1a1a; }
.dev-scroll::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }
.dev-scroll::-webkit-scrollbar-thumb:hover { background: #555; }

/* ── Toast (stejné chování jako na boardu) ───────────────────────────────── */

.dev-toast {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 1080;
	max-width: 380px;
	padding: 10px 14px;
	border-radius: 6px;
	border: 1px solid var(--dev-border-strong);
	background: rgba(20, 20, 20, 0.96);
	color: var(--dev-text);
	font-size: 0.85rem;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}
.dev-toast.is-error { border-color: #dc3545; }
.dev-toast.is-success { border-color: #28a745; }