/* ===========================
   TV App Builder Dashboard Styles
   =========================== */

/* ===== IMPERSONATION BANNER ===== */
.impersonation-banner {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
	color: #ffffff;
	padding: 10px 20px;
	text-align: center;
	font-size: 14px;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.impersonation-banner i {
	font-size: 16px;
}

.view-notes-btn,
.end-impersonation-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 6px;
	font-weight: 500;
	font-size: 13px;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.2s ease;
	height: 34px;
	box-sizing: border-box;
}

.view-notes-btn {
	background: rgba(255, 255, 255, 0.2);
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.3);
	margin-left: 10px;
}

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

.end-impersonation-btn {
	background: #ffffff;
	color: #dc2626;
	border: none;
	margin-left: 10px;
	font-weight: 600;
}

.end-impersonation-btn:hover {
	background: #fee2e2;
}

.has-impersonation-banner {
	margin-top: 44px;
}

.has-impersonation-banner .sidebar {
	top: 44px;
	height: calc(100vh - 44px);
}

/* ===== DARK MODE ===== */
html.dark-mode {
	filter: invert(0.9) hue-rotate(180deg);
}

/* Prevent double inversion on images and videos */
html.dark-mode img,
html.dark-mode video,
html.dark-mode iframe {
	filter: invert(1) hue-rotate(180deg);
}

/* Prevent Roku simulator from being inverted - keep original appearance */
html.dark-mode .roku-simulator-container {
	filter: invert(1) hue-rotate(180deg);
}

/* Prevent YouTube Publisher from being inverted - use custom dark mode styles */
html.dark-mode .youtube-publisher-container,
html.dark-mode #asset-picker-modal {
	filter: invert(1) hue-rotate(180deg);
}

html.dark-mode .youtube-publisher-container img,
html.dark-mode #asset-picker-modal img {
	filter: none !important;
}

/* Prevent Edit Profile page from being inverted - use custom dark mode styles */
html.dark-mode .profile-container,
html.dark-mode .profile-container ~ .modal-overlay {
	filter: invert(1) hue-rotate(180deg);
}

html.dark-mode .profile-container img {
	filter: none !important;
}

/* Counter-invert staff images so they look normal */
html.dark-mode .staff-container img {
	filter: invert(1) hue-rotate(180deg);
}

/* Counter-invert publish images so they look normal */
html.dark-mode .publish-container img {
	filter: invert(1) hue-rotate(180deg);
}


/* Prevent Assets page from being inverted - use custom dark mode styles */
html.dark-mode .assets-page-wrapper {
	filter: invert(1) hue-rotate(180deg);
}

html.dark-mode .assets-page-wrapper img,
html.dark-mode .assets-page-wrapper video {
	filter: none !important;
}

/* Re-invert badges so they get the gorgeous dark mode colors */
html.dark-mode .assets-page-wrapper .type-badge,
html.dark-mode .assets-page-wrapper .status-badge {
	filter: invert(1) hue-rotate(180deg);
}

/* Prevent Bulk Upload page from being inverted - use custom dark mode styles */
html.dark-mode .bulk-upload-page {
	filter: invert(1) hue-rotate(180deg);
}

html.dark-mode .bulk-upload-page img,
html.dark-mode .bulk-upload-page video {
	filter: none !important;
}

/* Counter-invert media inside web integration so they look normal */
html.dark-mode .web-integration-container img,
html.dark-mode .web-integration-container video {
	filter: invert(1) hue-rotate(180deg);
}

/* Preview iframe needs special handling - it has its own dark mode */
html.dark-mode .web-integration-container iframe,
html.dark-mode .preview-frame iframe {
	filter: invert(1) hue-rotate(180deg);
}

/* Reset image/video filters inside simulator - they inherit container's counter-inversion */
html.dark-mode .roku-simulator-container img,
html.dark-mode .roku-simulator-container video,
html.dark-mode .roku-simulator-container iframe,
html.dark-mode .roku-interface img,
html.dark-mode .tv-screen img,
html.dark-mode .tv-screen video,
html.dark-mode .tv-screen iframe,
html.dark-mode .roku-video-player,
html.dark-mode .roku-video-iframe,
html.dark-mode .roku-video-screen video,
html.dark-mode .roku-video-screen iframe {
	filter: none !important;
}

/* Ensure remote stays black - override any inherited filters */
html.dark-mode .roku-remote,
html.dark-mode .roku-remote * {
	filter: none;
}

html.dark-mode .remote-body {
	background: #131313 !important;
}

html.dark-mode .dpad-btn,
html.dark-mode .remote-power-btn,
html.dark-mode .remote-btn {
	background: linear-gradient(145deg, #3a3a3a 0%, #252525 100%) !important;
}

html.dark-mode .dpad-ok {
	background: linear-gradient(145deg, #6c5ce7 0%, #5a4bd1 100%) !important;
}

/* Menu Text TV Preview - should NOT invert, keep true dark colors */
html.dark-mode .tv-preview {
	filter: invert(1) hue-rotate(180deg);
}

/* ===== GLOBAL FORM STYLES ===== */
/* Checkbox styling with brand purple */
input[type="checkbox"] {
	accent-color: #7c3aed;
	width: 18px;
	height: 18px;
	cursor: pointer;
}

input[type="checkbox"]:focus {
	outline: 2px solid rgba(124, 58, 237, 0.3);
	outline-offset: 2px;
}

/* ===== RESET & BASE STYLES ===== */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

h1 {
	font-weight: 500;
	font-size: 1.4em;
}

.notyf {
	z-index: 2147483647 !important;
	color: #092500;
	font-size: 13px;
}

.notyf-announcer {
	z-index: 2147483647 !important;
}

/* Success Notification Styles */
.notyf__toast.notyf__toast--success {
    background-color: #ccf8e9 !important;
    border: 1px solid #10B981 !important;
    box-shadow: none !important;
    font-size: 13px !important;
}

.notyf__toast.notyf__toast--success .notyf__message {
    color: #2d5017 !important;
    font-size: 13px !important;
}

.notyf__toast.notyf__toast--success .notyf__icon,
.notyf__toast.notyf__toast--success .notyf__icon--success {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
}

.notyf__toast.notyf__toast--success .notyf__ripple {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
}

.notyf__toast.notyf__toast--success .notyf__wrapper {
    padding-left: 16px !important;
    margin-left: 0 !important;
}

.notyf__toast.notyf__toast--success::before {
    display: none !important;
}

/* Error Notification Styles */
.notyf__toast.notyf__toast--error {
    background-color: #fee2e2 !important;
    border: 2px solid #b91c1c !important;
    box-shadow: none !important;
    font-size: 13px !important;
}

.notyf__toast.notyf__toast--error .notyf__message {
    color: #b91c1c !important;
    font-size: 13px !important;
}

.notyf__toast.notyf__toast--error .notyf__icon,
.notyf__toast.notyf__toast--error .notyf__icon--error {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
}

.notyf__toast.notyf__toast--error .notyf__ripple {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
}

.notyf__toast.notyf__toast--error .notyf__wrapper {
    padding-left: 16px !important;
    margin-left: 0 !important;
}

.notyf__toast.notyf__toast--error::before {
    display: none !important;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
	background: #f8f9fa;
	color: #333;
	line-height: 1.6;
}

#dashboard_content {
	max-width:1200px;
	height:auto;
	margin-left:auto;
	margin-right:auto;
}

/* ===== LAYOUT STYLES ===== */
.container {
	display: flex;
	height: 100vh;
}

/* ===== SIDEBAR STYLES ===== */
.sidebar {
	width: 250px;
	background: white;
	padding: 20px 0;
	overflow-y: auto;
	box-shadow: 2px 0 10px rgba(0,0,0,0.05);
}

/* Thin scrollbar for sidebar */
.sidebar::-webkit-scrollbar {
	width: 6px;
}

.sidebar::-webkit-scrollbar-track {
	background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
	background: #d1d5db;
	border-radius: 3px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
	background: #9ca3af;
}

#full_screen_page {
	width:100%;
	height:100%;
	position:fixed;
	z-index:100000;
	top:0;
	left:0;
	display:none;
	background-color:#FFFFFF;
}

.brand {
	padding: 0 20px 20px;
}

.brand-logo {
	background-image:url('/images/tv_app_builder_logo.png');
	width:180px;
	height:40px;
	background-repeat:no-repeat;
	background-size:contain;
	background-position: left center;
}

.brand-logo-img {
	max-width: 180px;
	height: auto;
	display: block;
}

.staff-badge {
	display: inline-block;
	background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
	color: #ffffff;
	font-size: 10px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 12px;
	margin-top: 8px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.user-info {
	padding: 5px 20px;
	background: #f8f9fa;
	margin-top: -5px;
	width: 220px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.user-info:hover {
	background: #e9ecef;
}

.user-avatar {
	width: 35px;
	height: 35px;
	background: #ede9fe;
	color: #7c3aed;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-weight: 500;
}

.user-details {
	flex: 1;
}

.user-name {
	font-weight: 600;
	font-size: 14px;
	color: #333;
}

.user-email {
	font-size: 12px;
	color: #666;
}

.menu-item {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	padding: 7px 20px;
	color: #000000;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.3s;
	cursor: pointer;
	position: relative;
}

.sidebar-nav {
	margin-top:1px;
}
.menu-item:hover {
	background: #f8f9fa;
	color: #333;
}

.menu-item.active {
	background: #ede9fe;
	color: #7c3aed;
	font-weight: 500;
}

.menu-item.active::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: #7c3aed;
}

.menu-icon {
	width: 20px;
	font-size: 18px;
	text-align: center;
}

.menu-separator {
	height: 1px;
	background: #e0e0e0;
	margin: 15px 20px;
}

.menu-section-header {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #888;
	padding: 15px 20px 8px;
	margin-top: 5px;
}

.dark-mode .menu-section-header {
	color: #666;
}

/* Prevent animations on initial page load */
.sidebar-nav.preload * {
	transition: none !important;
}

.sidebar-footer {
	margin-top: 10px;
	padding: 20px;
	border-top: 1px solid #e0e0e0;
}

/* Dark Mode Toggle */
.dark-mode-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	background: transparent;
	border: none;
	cursor: pointer;
	transition: all 0.2s ease;
	font-size: 14px;
	color: #666;
	margin-bottom: 12px;
}

.dark-mode-toggle:hover {
	color: #333;
	background: rgba(0, 0, 0, 0.03);
	border-radius: 8px;
}

.dark-mode-toggle i {
	font-size: 16px;
	opacity: 0.7;
}

html.dark-mode .dark-mode-toggle i {
	opacity: 1;
}

/* ===== MAIN CONTENT STYLES ===== */
.main-content {
	flex: 1;
	padding: 30px;
	overflow-y: auto;
}

.section {
	margin-bottom: 40px;
}

.section-title {
	font-size: 28px;
	font-weight: 600;
	color: #333;
	margin-bottom: 25px;
}

/* ===== NOTIFICATION STYLES ===== */
.notification {
	position: fixed;
	bottom: 20px;
	right: 20px;
	background: #333;
	color: white;
	padding: 12px 20px;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	z-index: 1000;
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.3s;
}

.notification.show {
	opacity: 1;
	transform: translateY(0);
}

.has-loader {
  position: relative;
  min-height: 100%;
}

.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(2px);
  border-radius: 8px;
  padding: 20px;
}

#full_screen_page_content {
	width:100%;
	height:100%;
	overflow-y:scroll;
}

#full_screen_page_cancel {
	position: absolute;
	right: 20px;
	width: 40px;
	line-height: 40px;
	text-align: center;
	height: 40px;
	top: 10px;
	z-index: 10000001;
}

#full_screen_page_cancel:hover {
	cursor:pointer;
	background-color:#ebebeb;
	border-radius:3px;
}

@media (max-width: 768px) {
	#full_screen_page_cancel {
		top: 60px;
	}
}
.loader__spinner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid #e5e7eb;
  border-top-color: #7c3aed;
  animation: spin .9s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loader { opacity: 1; transition: opacity .2s ease; }
.loader.is-hidden { opacity: 0; pointer-events: none; }

.error-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 8px;
  background: #fee2e2;
  color: #991b1b;
  font-size: 0.9rem;
  font-weight: 500;
  margin: 10px 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

.error-alert button {
  margin-left: auto;
  background: #991b1b;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  transition: background .2s ease;
}

.error-alert button:hover {
  background: #7f1d1d;
}

/* ===== RESPONSIVE DESIGN ===== */

/* Mobile Top Bar */
.mobile-top-bar {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 50px;
	background: white;
	border-bottom: 1px solid #e0e0e0;
	z-index: 10000002;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
}

.hamburger-menu {
	position: absolute;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	padding: 8px;
	padding-bottom: 4px;
	cursor: pointer;
}

.hamburger-menu i {
	font-size: 20px;
	color: #333;
}

.sidebar.mobile-open {
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	z-index: 10000001;
	display: block;
	transform: translateX(0);
}

.sidebar-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	z-index: 10000000;
}

.sidebar-overlay.active {
	display: block;
}

@media (max-width: 768px) {
	.mobile-top-bar {
		display: flex;
	}

	#full_screen_page {
		padding-top: 50px;
	}

	.sidebar {
		display: none;
		transform: translateX(-100%);
		transition: transform 0.3s ease;
	}

	.sidebar.mobile-open .brand {
		opacity: 0;
	}

	.main-content {
		padding: 70px 16px 20px 16px;
	}
}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ===== UTILITY CLASSES ===== */
.fa-spin {
	animation: spin 1s linear infinite;
}