/* Admin Bar Icon */
#wpadminbar li#wp-admin-bar-my-apps a.ab-item span.ab-icon:before {
	line-height: 24px;
	font-size: 20px;
}
@media screen and (max-width: 782px) {
	#wpadminbar li#wp-admin-bar-my-apps {
		display: block;
	}
	#wpadminbar li#wp-admin-bar-my-apps a.ab-item span.ab-icon:before {
		font-size: 32px;
	}
}

/* Launcher Base */
body.my-apps-launcher {
	margin: 0;
	margin-top: 32px;
	padding: 20px;
	min-height: calc(100vh - 32px);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	box-sizing: border-box;
}

/* Background Options */
.bg-gradient-purple, body.my-apps-launcher.bg-gradient-purple { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.bg-gradient-blue, body.my-apps-launcher.bg-gradient-blue { background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%); }
.bg-gradient-green, body.my-apps-launcher.bg-gradient-green { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
.bg-gradient-orange, body.my-apps-launcher.bg-gradient-orange { background: linear-gradient(135deg, #f2994a 0%, #f2c94c 100%); }
.bg-gradient-pink, body.my-apps-launcher.bg-gradient-pink { background: linear-gradient(135deg, #ee9ca7 0%, #ffdde1 100%); }
.bg-gradient-dark, body.my-apps-launcher.bg-gradient-dark { background: linear-gradient(135deg, #232526 0%, #414345 100%); }
.bg-gradient-sunset, body.my-apps-launcher.bg-gradient-sunset { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
.bg-gradient-ocean, body.my-apps-launcher.bg-gradient-ocean { background: linear-gradient(135deg, #2e3192 0%, #1bffff 100%); }
.bg-solid-gray, body.my-apps-launcher.bg-solid-gray { background: #6b7280; }
.bg-solid-blue, body.my-apps-launcher.bg-solid-blue { background: #3b82f6; }
.bg-solid-green, body.my-apps-launcher.bg-solid-green { background: #10b981; }
.bg-solid-red, body.my-apps-launcher.bg-solid-red { background: #ef4444; }
.bg-solid-purple, body.my-apps-launcher.bg-solid-purple { background: #8b5cf6; }
.bg-solid-dark, body.my-apps-launcher.bg-solid-dark { background: #1f2937; }

@media screen and (max-width: 782px) {
	body.my-apps-launcher {
		margin-top: 46px;
		min-height: calc(100vh - 46px);
	}
}

/* Toolbar */
.launcher-toolbar {
	position: fixed;
	top: 32px;
	left: 0;
	right: 0;
	height: 50px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 20px;
	z-index: 100;
}

@media screen and (max-width: 782px) {
	.launcher-toolbar {
		top: 46px;
	}
}

.toolbar-btn {
	background: rgba(255, 255, 255, 0.2);
	border: none;
	border-radius: 8px;
	padding: 8px 16px;
	color: #fff;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 6px;
	transition: background 0.2s;
}

.toolbar-btn:hover {
	background: rgba(255, 255, 255, 0.3);
}

.toolbar-btn svg {
	fill: currentColor;
}

.done-btn {
	display: none;
	background: rgba(255, 255, 255, 0.9);
	color: #764ba2;
}

.done-btn:hover {
	background: #fff;
}

body.edit-mode .edit-btn {
	display: none;
}

body.edit-mode .done-btn {
	display: flex;
}

/* Apps Container */
.apps-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	padding-top: 60px;
	max-width: 800px;
	margin: 0 auto;
}

/* App Icon */
.app-icon {
	width: 90px;
	text-align: center;
	cursor: pointer;
	position: relative;
	padding: 8px;
	border-radius: 12px;
	transition: transform 0.15s, opacity 0.3s;
}

.app-icon:hover {
	transform: scale(1.05);
}

.app-icon:active {
	transform: scale(0.95);
}

.app-icon.hiding {
	opacity: 0;
	transform: scale(0.5);
}

.app-link {
	text-decoration: none;
	display: block;
}

.app-icon img,
.app-icon div.dashicons {
	width: 60px;
	height: 60px;
	border-radius: 14px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	background-color: #fff;
	display: block;
	margin: 0 auto;
}

.app-icon div.dashicons {
	font-size: 40px;
	line-height: 60px;
	color: #333;
}

.app-icon .emoji {
	font-size: 50px;
	line-height: 60px;
	height: 60px;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.app-title {
	font-size: 12px;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	margin: 6px 0 0 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Hide Button */
.hide-btn {
	position: absolute;
	top: -6px;
	left: -6px;
	width: 22px;
	height: 22px;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	display: none;
	z-index: 10;
}

.hide-btn svg {
	width: 100%;
	height: 100%;
	display: block;
	filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

.hide-btn:hover svg circle {
	fill: #e74c3c;
}

body.edit-mode .hide-btn {
	display: block;
}

/* Edit Mode Wiggle Animation */
@keyframes wiggle {
	0%, 100% { transform: rotate(-1deg); }
	50% { transform: rotate(1deg); }
}

body.edit-mode .app-icon:not(.add-app-btn) {
	animation: wiggle 0.3s ease-in-out infinite;
}

body.edit-mode .app-icon:nth-child(even) {
	animation-delay: 0.15s;
}

body.edit-mode .app-icon:hover,
body.edit-mode .app-icon.sortable-chosen {
	animation: none;
}

/* Add App Button */
.add-app-btn {
	opacity: 0.6;
	cursor: pointer;
}

.add-app-btn:hover {
	opacity: 1;
}

.add-icon {
	width: 60px;
	height: 60px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.3);
	border: 2px dashed rgba(255, 255, 255, 0.6);
	margin: 0 auto;
	font-size: 32px;
	line-height: 56px;
	color: #fff;
}

body.edit-mode .add-app-btn {
	animation: none;
	opacity: 1;
}

/* Bottom Toolbar */
.bottom-toolbar {
	position: fixed;
	bottom: 20px;
	right: 20px;
	display: flex;
	gap: 10px;
	z-index: 100;
}

.bottom-toolbar .toolbar-btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bottom-toolbar .toolbar-btn svg {
	fill: currentColor;
}

/* Background Picker */
.bg-picker-popup {
	position: fixed;
	bottom: 80px;
	right: 20px;
	background: #fff;
	border-radius: 12px;
	padding: 16px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.25);
	display: none;
	z-index: 200;
	min-width: 280px;
}

.bg-picker-popup.active {
	display: block;
}

.bg-picker-section {
	margin-bottom: 12px;
}

.bg-picker-section:last-child {
	margin-bottom: 0;
}

.bg-picker-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	color: #666;
	margin-bottom: 8px;
	letter-spacing: 0.5px;
}

.bg-options {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.bg-option {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform 0.15s, border-color 0.15s;
}

.bg-option:hover {
	transform: scale(1.1);
}

.bg-option.selected {
	border-color: #000;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000;
}

/* Context Menu */
.context-menu {
	position: fixed;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
	padding: 6px 0;
	min-width: 150px;
	z-index: 1000;
	display: none;
}

.context-menu.active {
	display: block;
}

.context-menu button {
	display: block;
	width: 100%;
	padding: 10px 16px;
	border: none;
	background: none;
	text-align: left;
	cursor: pointer;
	font-size: 14px;
	color: #333;
}

.context-menu button:hover {
	background: #f0f0f0;
}

.context-menu hr {
	margin: 6px 0;
	border: none;
	border-top: 1px solid #eee;
}

/* Modal */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 2000;
	padding: 20px;
}

.modal-overlay.active {
	display: flex;
}

.modal {
	background: #fff;
	border-radius: 12px;
	width: 100%;
	max-width: 400px;
	max-height: 90vh;
	overflow-y: auto;
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px;
	border-bottom: 1px solid #eee;
}

.modal-header h2 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
}

.modal-close {
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	color: #999;
	padding: 0;
	line-height: 1;
}

.modal-close:hover {
	color: #333;
}

#add-app-form {
	padding: 0;
}

.form-group {
	margin-bottom: 16px;
}

.form-group label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 8px;
	color: #333;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.form-group input[type="text"],
.form-group input[type="url"] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 14px;
	box-sizing: border-box;
}

.form-group input:focus {
	outline: none;
	border-color: #667eea;
	box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

/* Icon Type Tabs */
.icon-type-tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 10px;
}

.icon-tab {
	flex: 1;
	padding: 8px;
	border: 1px solid #ccc;
	background: #f5f5f5;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
	color: #555;
	transition: all 0.2s;
}

.icon-tab:hover {
	background: #e8e8e8;
	border-color: #999;
	color: #333;
}

.icon-tab.active {
	background: #667eea;
	color: #fff;
	border-color: #667eea;
}

.icon-input-group {
	position: relative;
}

.icon-input {
	display: none !important;
}

.icon-input.active {
	display: block !important;
}

.dashicon-picker-container,
.emoji-picker-container {
	display: none !important;
}

.dashicon-picker-container.active,
.emoji-picker-container.active {
	display: block !important;
}

/* Dashicon Picker */
.dashicon-picker {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 4px;
	max-height: 200px;
	overflow-y: auto;
	padding: 8px;
	background: #f9f9f9;
	border: 1px solid #ddd;
	border-radius: 6px;
	margin-top: 8px;
}

.dashicon-option {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid transparent;
	border-radius: 4px;
	cursor: pointer;
	background: #fff;
	transition: all 0.15s;
}

.dashicon-option:hover {
	background: #e8e8e8;
	border-color: #ccc;
}

.dashicon-option.selected {
	background: #667eea;
	border-color: #667eea;
	color: #fff;
}

.dashicon-option .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	color: #333;
}

.dashicon-option.selected .dashicons {
	color: #fff;
}

.dashicon-search {
	margin-bottom: 8px;
}

.dashicon-search input {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 13px;
	box-sizing: border-box;
}

.dashicon-search input:focus {
	outline: none;
	border-color: #667eea;
}

/* Emoji Picker */
.emoji-picker {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
	gap: 4px;
	max-height: 200px;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 8px;
	background: #f9f9f9;
	border: 1px solid #ddd;
	border-radius: 6px;
	margin-top: 8px;
}

.emoji-option {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid transparent;
	border-radius: 4px;
	cursor: pointer;
	background: #fff;
	font-size: 22px;
	transition: all 0.15s;
}

.emoji-option:hover {
	background: #e8e8e8;
	border-color: #ccc;
	transform: scale(1.15);
}

.emoji-option.selected {
	background: #667eea;
	border-color: #667eea;
}

.emoji-search {
	margin-bottom: 8px;
}

.emoji-search input {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 13px;
	box-sizing: border-box;
}

.emoji-search input:focus {
	outline: none;
	border-color: #667eea;
}

/* Icon Preview */
.icon-preview {
	margin-top: 12px;
	display: flex;
	justify-content: center;
}

.preview-box {
	width: 60px;
	height: 60px;
	border-radius: 14px;
	background: #f0f0f0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.preview-box img {
	max-width: 100%;
	max-height: 100%;
}

.preview-box.preview-emoji {
	font-size: 40px;
	background: transparent;
}

.preview-box.preview-dashicon .dashicons {
	font-size: 40px;
	width: 40px;
	height: 40px;
	line-height: 40px;
}

/* Form Actions */
.form-actions {
	display: flex;
	gap: 12px;
	margin-top: 20px;
}

.btn-cancel,
.btn-add {
	flex: 1;
	padding: 12px;
	border: none;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.2s;
}

.btn-cancel {
	background: #f0f0f0;
	color: #333;
}

.btn-cancel:hover {
	background: #e0e0e0;
}

.btn-add {
	background: #667eea;
	color: #fff;
}

.btn-add:hover {
	background: #5a6fd6;
}

/* Sortable Styles */
.sortable-ghost {
	opacity: 0.4;
}

.sortable-chosen {
	transform: scale(1.1);
}

.sortable-drag {
	opacity: 1 !important;
}

/* Admin Page Styles */
.settings_page_my-apps table img,
.settings_page_my-apps table div.dashicons {
	vertical-align: middle;
	width: 24px;
	height: 24px;
}

.settings_page_my-apps table thead th.checkbox,
.settings_page_my-apps table thead th.icon,
.settings_page_my-apps table thead th.move {
	width: 40px;
	overflow: hidden;
}

.settings_page_my-apps table thead th.plugin,
.settings_page_my-apps table tbody td.plugin {
	width: 20em;
}

@media screen and (max-width: 782px) {
	.settings_page_my-apps table thead th.plugin,
	.settings_page_my-apps table tbody td.plugin {
		display: none;
	}
}

.settings_page_my-apps table tr button {
	color: #999;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.settings_page_my-apps table tr:first-child button.move-up,
.settings_page_my-apps table tr:last-child button.move-down {
	visibility: hidden;
}

.settings_page_my-apps #edit-app {
	display: none;
}

/* Hidden Apps Button */
.hidden-btn {
	position: relative;
}

.hidden-count {
	position: absolute;
	top: -4px;
	right: -4px;
	background: #e74c3c;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	min-width: 18px;
	height: 18px;
	line-height: 18px;
	border-radius: 9px;
	text-align: center;
	padding: 0 4px;
	display: none;
}

body.edit-mode .hidden-count {
	display: block;
}

/* Hidden Apps Popup */
.hidden-popup {
	position: fixed;
	bottom: 80px;
	right: 74px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.25);
	display: none;
	z-index: 200;
	min-width: 240px;
	max-width: 320px;
	max-height: 400px;
	overflow: hidden;
}

.hidden-popup.active {
	display: block;
}

.hidden-popup-header {
	font-size: 14px;
	font-weight: 600;
	padding: 14px 16px;
	border-bottom: 1px solid #eee;
	color: #333;
}

.hidden-apps-list {
	max-height: 320px;
	overflow-y: auto;
}

.no-hidden-apps {
	padding: 24px 16px;
	text-align: center;
	color: #888;
	font-size: 14px;
}

.hidden-app-item {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 10px 16px;
	border: none;
	background: none;
	cursor: pointer;
	text-align: left;
	transition: background 0.15s;
	gap: 12px;
}

.hidden-app-item:hover {
	background: #f5f5f5;
}

.hidden-app-icon {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hidden-app-icon img {
	width: 36px;
	height: 36px;
	border-radius: 8px;
}

.hidden-app-icon .dashicons {
	font-size: 28px;
	width: 28px;
	height: 28px;
	color: #333;
}

.hidden-app-icon .emoji {
	font-size: 28px;
	line-height: 1;
}

.hidden-app-name {
	flex: 1;
	font-size: 14px;
	color: #333;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.restore-icon {
	color: #667eea;
	flex-shrink: 0;
	opacity: 0.6;
	transition: opacity 0.15s;
}

.hidden-app-item:hover .restore-icon {
	opacity: 1;
}

/* Modal Tabs */
.modal-tabs {
	display: flex;
	border-bottom: 1px solid #eee;
}

.modal-tab {
	flex: 1;
	padding: 12px 16px;
	border: none;
	background: none;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	color: #666;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: all 0.2s;
}

.modal-tab:hover {
	color: #333;
	background: #f9f9f9;
}

.modal-tab.active {
	color: #667eea;
	border-bottom-color: #667eea;
}

.modal-tab-content {
	padding: 16px 20px;
}

.modal-tab-content.hidden {
	display: none;
}

/* Admin Menu Tree */
.admin-menu-search {
	margin-bottom: 12px;
}

.admin-menu-search input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 14px;
	box-sizing: border-box;
}

.admin-menu-search input:focus {
	outline: none;
	border-color: #667eea;
	box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.admin-menu-tree {
	max-height: 400px;
	overflow-y: auto;
	border: 1px solid #eee;
	border-radius: 8px;
}

.admin-menu-loading {
	padding: 40px 20px;
	text-align: center;
	color: #888;
}

.admin-menu-parent {
	border-bottom: 1px solid #eee;
}

.admin-menu-parent:last-child {
	border-bottom: none;
}

.admin-menu-parent-header {
	display: flex;
	align-items: center;
	padding: 10px 12px;
	cursor: pointer;
	background: #f9f9f9;
	transition: background 0.15s;
	gap: 10px;
	border: none;
	width: 100%;
	text-align: left;
	font-size: 14px;
}

.admin-menu-parent-header:hover {
	background: #f0f0f0;
}

.admin-menu-parent.expanded > .admin-menu-parent-header {
	background: #e8e8e8;
}

.admin-menu-toggle {
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: transform 0.2s;
}

.admin-menu-toggle svg {
	width: 12px;
	height: 12px;
	fill: #666;
}

.admin-menu-parent.expanded > .admin-menu-parent-header .admin-menu-toggle {
	transform: rotate(90deg);
}

.admin-menu-parent.no-children > .admin-menu-parent-header .admin-menu-toggle {
	visibility: hidden;
}

.admin-menu-icon {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.admin-menu-icon .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	color: #555;
}

.admin-menu-icon img {
	width: 20px;
	height: 20px;
	border-radius: 4px;
}

.admin-menu-name {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #333;
}

.admin-menu-add {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #667eea;
	color: #fff;
	border: none;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.15s, background 0.15s;
	flex-shrink: 0;
}

.admin-menu-parent-header:hover .admin-menu-add,
.admin-menu-item:hover .admin-menu-add {
	opacity: 1;
}

.admin-menu-add:hover {
	background: #5a6fd6;
}

.admin-menu-add.added {
	background: #10b981;
	opacity: 1;
}

.admin-menu-children {
	display: none;
	background: #fff;
}

.admin-menu-parent.expanded > .admin-menu-children {
	display: block;
}

.admin-menu-item {
	display: flex;
	align-items: center;
	padding: 8px 12px 8px 46px;
	cursor: pointer;
	transition: background 0.15s;
	gap: 10px;
	border: none;
	width: 100%;
	text-align: left;
	font-size: 13px;
	background: transparent;
}

.admin-menu-item:hover {
	background: #f5f5f5;
}

.admin-menu-item .admin-menu-name {
	font-size: 13px;
	color: #555;
}

.admin-menu-empty {
	padding: 40px 20px;
	text-align: center;
	color: #888;
	font-size: 14px;
}