/* Quick Links screen + dashboard widget. Tokens only (tokens.css). */

/* ---------- Tones (pastel tile + matching filled icon) ---------- */
.swiftdash .sd-ql-tone--blue { --sd-ql-fg: var(--sd-primary); }
.swiftdash .sd-ql-tone--sky { --sd-ql-fg: var(--sd-info); }
.swiftdash .sd-ql-tone--purple { --sd-ql-fg: var(--sd-purple); }
.swiftdash .sd-ql-tone--green { --sd-ql-fg: var(--sd-success); }
.swiftdash .sd-ql-tone--orange { --sd-ql-fg: var(--sd-warning); }
.swiftdash .sd-ql-tone--red { --sd-ql-fg: var(--sd-danger); }

.swiftdash [class*="sd-ql-tone--"] {
	--sd-ql-bg: color-mix(in srgb, var(--sd-ql-fg) 10%, var(--sd-card));
}

/* ---------- Screen ---------- */
.swiftdash .sd-page-head__actions:has(.sd-ql-search) {
	align-items: center;
}

.swiftdash .sd-ql-search {
	flex: none;
	width: 320px;
}

@media (max-width: 600px) {

	.swiftdash .sd-ql-search {
		width: 100%;
	}
}

.swiftdash .sd-ql__section[hidden],
.swiftdash .sd-ql__item[hidden],
.swiftdash .sd-ql__pins-empty[hidden] {
	display: none;
}

.swiftdash .sd-ql__heading {
	margin: var(--sd-space-8) 0 var(--sd-space-3);
	font-size: var(--sd-fs-section);
	font-weight: var(--sd-fw-section);
	color: var(--sd-text);
}

.swiftdash .sd-ql__section--pinned .sd-ql__heading {
	margin-top: var(--sd-space-6);
	margin-bottom: var(--sd-space-1);
}

.swiftdash .sd-ql__help {
	margin: 0 0 var(--sd-space-4);
	color: var(--sd-text-2);
}

.swiftdash .sd-ql__pins-empty {
	margin: 0;
	padding: var(--sd-space-6);
	border: var(--sd-border-w) dashed var(--sd-border);
	border-radius: var(--sd-radius-card);
	color: var(--sd-text-2);
	text-align: center;
}

.swiftdash .sd-ql__pins,
.swiftdash .sd-ql__grid {
	display: grid;
	gap: var(--sd-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.swiftdash .sd-ql__pins {
	grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
}

.swiftdash .sd-ql__grid {
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.swiftdash .sd-ql__item {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0;
	background: var(--sd-card);
	border: var(--sd-border-w) solid var(--sd-border);
	border-radius: var(--sd-radius-card);
	transition: border-color var(--sd-dur-fast) var(--sd-ease);
}

.swiftdash .sd-ql__item:hover,
.swiftdash .sd-ql__item:focus-within {
	border-color: var(--sd-ql-fg);
}

.swiftdash .sd-ql__tile {
	display: flex;
	flex: 1;
	align-items: center;
	gap: var(--sd-space-3);
	min-width: 0;
	padding: var(--sd-space-3);
	border-radius: var(--sd-radius-card);
	color: var(--sd-text);
	text-decoration: none;
}

.swiftdash .sd-ql__chip {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--sd-radius-card);
	background: var(--sd-ql-bg);
	color: var(--sd-ql-fg);
}

.swiftdash .sd-ql__chip .sd-icon {
	width: 26px;
	height: 26px;
}

.swiftdash .sd-ql__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.swiftdash .sd-ql__label {
	font-weight: var(--sd-fw-semibold);
}

.swiftdash .sd-ql__desc {
	font-size: var(--sd-fs-help);
	color: var(--sd-text-2);
}

.swiftdash .sd-ql__tools {
	display: flex;
	flex: none;
	gap: var(--sd-space-1);
	padding-right: var(--sd-space-2);
}

.swiftdash .sd-ql__tools .sd-icon-btn {
	width: 36px;
	height: 36px;
}

.swiftdash .sd-ql__tools .sd-icon-btn[aria-pressed="true"] {
	background: var(--sd-ql-bg);
	color: var(--sd-ql-fg);
}

.swiftdash .sd-ql__handle,
.swiftdash .sd-ql__show {
	display: none;
}

/* Pinned row: pastel square tiles like the dashboard widget, drag handle top left, pin top right. */
.swiftdash .sd-ql__pins .sd-ql__item {
	flex-direction: column;
	border-color: transparent;
	background: var(--sd-ql-bg);
}

.swiftdash .sd-ql__pins .sd-ql__item:hover,
.swiftdash .sd-ql__pins .sd-ql__item:focus-within {
	border-color: var(--sd-ql-fg);
}

.swiftdash .sd-ql__pins .sd-ql__tile {
	flex-direction: column;
	justify-content: center;
	gap: var(--sd-space-2);
	width: 100%;
	aspect-ratio: 1;
	padding: var(--sd-space-6) var(--sd-space-2) var(--sd-space-3);
	text-align: center;
}

.swiftdash .sd-ql__pins .sd-ql__chip {
	width: auto;
	height: auto;
	background: none;
}

.swiftdash .sd-ql__pins .sd-ql__chip .sd-icon {
	width: 32px;
	height: 32px;
}

.swiftdash .sd-ql__pins .sd-ql__label {
	font-size: var(--sd-fs-label);
	line-height: 1.3;
}

.swiftdash .sd-ql__pins .sd-ql__desc,
.swiftdash .sd-ql__pins .sd-ql__hide {
	display: none;
}

.swiftdash .sd-ql__pins .sd-ql__handle {
	position: absolute;
	top: var(--sd-space-1);
	left: var(--sd-space-1);
	z-index: 1;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: var(--sd-radius-control);
	background: none;
	color: var(--sd-text-2);
	cursor: grab;
	touch-action: none;
}

.swiftdash .sd-ql__pins .sd-ql__handle:hover {
	background: var(--sd-card);
	color: var(--sd-text);
}

.swiftdash .sd-ql__pins .sd-ql__tools {
	position: absolute;
	top: var(--sd-space-1);
	right: var(--sd-space-1);
	z-index: 1;
	padding: 0;
}

.swiftdash .sd-ql__pins .sd-ql__tools .sd-icon-btn {
	width: 32px;
	height: 32px;
}

.swiftdash .sd-ql__pins .sd-ql__tools .sd-icon-btn[aria-pressed="true"] {
	background: none;
}

.swiftdash .sd-ql__pins .sd-ql__tools .sd-icon-btn:hover {
	background: var(--sd-card);
}

.swiftdash .sd-ql__pins .is-ghost {
	opacity: 0.4;
}

.swiftdash .sd-ql__pins .is-chosen .sd-ql__handle {
	cursor: grabbing;
}

/* Hidden list: compact rows with a Show button instead of the tools. */
.swiftdash .sd-ql__grid--hidden .sd-ql__tools,
.swiftdash .sd-ql__grid--hidden .sd-ql__desc {
	display: none;
}

.swiftdash .sd-ql__grid--hidden .sd-ql__item {
	border-style: dashed;
}

.swiftdash .sd-ql__grid--hidden .sd-ql__tile {
	color: var(--sd-text-2);
}

.swiftdash .sd-ql__grid--hidden .sd-ql__chip {
	width: 36px;
	height: 36px;
}

.swiftdash .sd-ql__grid--hidden .sd-ql__show {
	display: inline-flex;
	margin-right: var(--sd-space-3);
}

/* ---------- Dashboard widget ---------- */
.swiftdash .sd-ql-mini {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sd-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.swiftdash .sd-card__body:has(> .sd-ql-mini) {
	container-type: inline-size;
}

@container (min-width: 320px) {

	.swiftdash .sd-ql-mini {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.swiftdash .sd-ql-mini li {
	margin: 0;
}

.swiftdash .sd-ql-mini__tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sd-space-2);
	aspect-ratio: 1;
	padding: var(--sd-space-2);
	border: var(--sd-border-w) solid transparent;
	border-radius: var(--sd-radius-card);
	background: var(--sd-ql-bg);
	color: var(--sd-ql-fg);
	text-align: center;
	text-decoration: none;
	transition: border-color var(--sd-dur-fast) var(--sd-ease);
}

.swiftdash .sd-ql-mini__tile:hover {
	border-color: currentcolor;
	color: var(--sd-ql-fg);
}

.swiftdash .sd-ql-mini__tile .sd-icon {
	width: 30px;
	height: 30px;
}

.swiftdash .sd-ql-mini__label {
	font-size: var(--sd-fs-help);
	font-weight: var(--sd-fw-semibold);
	line-height: 1.3;
	color: var(--sd-text);
}

.swiftdash .sd-ql-mini__manage {
	width: 32px;
	height: 32px;
}

.swiftdash .sd-ql-mini__empty-cta {
	margin: 0;
	text-align: center;
}