/* ========================================
   SC SHARED COMPONENTS - Common Styles
   Version: 1.0.0
   
   Include this CSS in any browser extension
   that uses SoftCreator shared components.
   ======================================== */

/* ========================================
   CSS VARIABLES - Light Theme (Default)
   ======================================== */
:root {
	/* Brand colors - SoftCreator green palette */
	--sc-primary: #4CAF50;
	--sc-primary-dark: #388E3C;
	--sc-primary-light: #C8E6C9;
	--sc-accent: #6fd42f;
	--sc-accent-light: #bcffb4;
	--sc-accent-hover: #eaf5ea;
	
	/* Neutral colors */
	--sc-dark: #333333;
	--sc-light: #f5f5f5;
	--sc-white: #ffffff;
	--sc-gray: #666666;
	--sc-gray-light: #999999;
	
	/* Content colors */
	--sc-bg: var(--sc-white);
	--sc-bg-alt: var(--sc-light);
	--sc-text: var(--sc-dark);
	--sc-text-muted: var(--sc-gray);
	--sc-border: #dddddd;
	
	/* State colors */
	--sc-error: #f44336;
	--sc-error-bg: #ffebee;
	--sc-warning: #ff9800;
	--sc-warning-bg: #fff3e0;
	--sc-success: #4CAF50;
	--sc-success-bg: #e8f5e9;
	--sc-info: #2196F3;
	--sc-info-bg: #e3f2fd;
	
	/* Form colors */
	--sc-input-bg: var(--sc-white);
	--sc-input-border: var(--sc-border);
	--sc-input-focus: var(--sc-primary);
	
	/* Disabled state */
	--sc-disabled-bg: #f0f0f0;
	--sc-disabled-text: #999999;
	
	/* Shadows */
	--sc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
	--sc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
	--sc-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
	
	/* Transitions */
	--sc-transition: 0.2s ease;
	
	/* Border radius */
	--sc-radius-sm: 4px;
	--sc-radius-md: 6px;
	--sc-radius-lg: 8px;
	--sc-radius-pill: 25px;
}

/* ========================================
   DARK MODE
   ======================================== */
@media (prefers-color-scheme: dark) {
	:root {
		--sc-bg: #1a1a1a;
		--sc-bg-alt: #2d2d2d;
		--sc-text: #f5f5f5;
		--sc-text-muted: #aaaaaa;
		--sc-border: #444444;
		
		--sc-error-bg: rgba(244, 67, 54, 0.2);
		--sc-warning-bg: rgba(255, 152, 0, 0.2);
		--sc-success-bg: rgba(76, 175, 80, 0.2);
		--sc-info-bg: rgba(33, 150, 243, 0.2);
		
		--sc-input-bg: #2d2d2d;
		--sc-input-border: #444444;
		
		--sc-disabled-bg: #3d3d3d;
		--sc-disabled-text: #777777;
	}
}

/* Manual dark mode class (for extensions that toggle) */
.sc-dark {
	--sc-bg: #1a1a1a;
	--sc-bg-alt: #2d2d2d;
	--sc-text: #f5f5f5;
	--sc-text-muted: #aaaaaa;
	--sc-border: #444444;
	
	--sc-error-bg: rgba(244, 67, 54, 0.2);
	--sc-warning-bg: rgba(255, 152, 0, 0.2);
	--sc-success-bg: rgba(76, 175, 80, 0.2);
	--sc-info-bg: rgba(33, 150, 243, 0.2);
	
	--sc-input-bg: #2d2d2d;
	--sc-input-border: #444444;
	
	--sc-disabled-bg: #3d3d3d;
	--sc-disabled-text: #777777;
}

/* ========================================
   GLOBAL RESET & BASE
   ======================================== */
.sc-reset * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */
.sc-hidden {
	display: none !important;
	visibility: hidden !important;
}

.sc-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.sc-flex {
	display: flex;
}

.sc-flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.sc-text-center {
	text-align: center;
}

.sc-text-muted {
	color: var(--sc-text-muted);
}

/* ========================================
   SCROLLBAR STYLES
   ======================================== */
.sc-scrollbar::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

.sc-scrollbar::-webkit-scrollbar-track {
	background: var(--sc-bg-alt);
}

.sc-scrollbar::-webkit-scrollbar-thumb {
	background: var(--sc-border);
	border-radius: 3px;
}

.sc-scrollbar::-webkit-scrollbar-thumb:hover {
	background: var(--sc-gray-light);
}

/* ========================================
   FORM ELEMENTS
   ======================================== */
.sc-form-group {
	margin-bottom: 16px;
}

.sc-form-group.compact {
	margin-bottom: 10px;
}

.sc-label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--sc-text);
}

.sc-input,
.sc-select,
.sc-textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--sc-input-border);
	border-radius: var(--sc-radius-md);
	font-size: 14px;
	color: var(--sc-text);
	background: var(--sc-input-bg);
	transition: border-color var(--sc-transition), box-shadow var(--sc-transition);
}

.sc-input:focus,
.sc-select:focus,
.sc-textarea:focus {
	outline: none;
	border-color: var(--sc-input-focus);
	box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.15);
}

.sc-input::placeholder {
	color: var(--sc-text-muted);
}

.sc-input:disabled,
.sc-select:disabled {
	background: var(--sc-disabled-bg);
	color: var(--sc-disabled-text);
	cursor: not-allowed;
}

.sc-input.error {
	border-color: var(--sc-error);
	background: var(--sc-error-bg);
}

.sc-help-text {
	font-size: 12px;
	color: var(--sc-text-muted);
	margin-top: 4px;
}

.sc-error-text {
	font-size: 12px;
	color: var(--sc-error);
	margin-top: 4px;
}

/* ========================================
   BUTTONS
   ======================================== */
.sc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 500;
	border: none;
	border-radius: var(--sc-radius-md);
	cursor: pointer;
	transition: all var(--sc-transition);
	text-decoration: none;
	line-height: 1.4;
}

.sc-btn:disabled {
	background: var(--sc-disabled-bg) !important;
	color: var(--sc-disabled-text) !important;
	cursor: not-allowed;
	transform: none !important;
	box-shadow: none !important;
}

/* Primary button */
.sc-btn-primary {
	background: var(--sc-primary);
	color: var(--sc-white);
}

.sc-btn-primary:hover:not(:disabled) {
	background: var(--sc-primary-dark);
	box-shadow: var(--sc-shadow-sm);
}

/* Secondary button */
.sc-btn-secondary {
	background: var(--sc-bg-alt);
	color: var(--sc-text);
	border: 1px solid var(--sc-border);
}

.sc-btn-secondary:hover:not(:disabled) {
	background: var(--sc-border);
}

/* Accent button */
.sc-btn-accent {
	background: var(--sc-accent);
	color: var(--sc-dark);
}

.sc-btn-accent:hover:not(:disabled) {
	background: var(--sc-primary);
	color: var(--sc-white);
}

/* Danger button */
.sc-btn-danger {
	background: var(--sc-error);
	color: var(--sc-white);
}

.sc-btn-danger:hover:not(:disabled) {
	background: #d32f2f;
}

/* Small button */
.sc-btn-sm {
	padding: 6px 12px;
	font-size: 12px;
}

/* Large button */
.sc-btn-lg {
	padding: 14px 28px;
	font-size: 16px;
}

/* Full width button */
.sc-btn-block {
	width: 100%;
}

/* Pill button */
.sc-btn-pill {
	border-radius: var(--sc-radius-pill);
}

/* ========================================
   INLINE MESSAGES (in-form feedback)
   ======================================== */
.sc-message {
	padding: 10px 14px;
	border-radius: var(--sc-radius-md);
	font-size: 13px;
	line-height: 1.5;
	margin-bottom: 12px;
	display: none;
}

.sc-message.show {
	display: block;
}

.sc-message-success {
	background: var(--sc-success-bg);
	color: var(--sc-text);
	border: 1px solid var(--sc-success);
}

.sc-message-error {
	background: var(--sc-error-bg);
	color: var(--sc-text);
	border: 1px solid var(--sc-error);
}

.sc-message-warning {
	background: var(--sc-warning-bg);
	color: var(--sc-text);
	border: 1px solid var(--sc-warning);
}

.sc-message-info {
	background: var(--sc-info-bg);
	color: var(--sc-text);
	border: 1px solid var(--sc-info);
}

/* ========================================
   TOAST NOTIFICATIONS (popup messages)
   Used by message-utils.js
   ======================================== */
.sc-toast {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 10000;
	padding: 12px 20px;
	border-radius: var(--sc-radius-md);
	color: var(--sc-white);
	font-size: 14px;
	font-weight: 500;
	box-shadow: var(--sc-shadow-md);
	transform: translateX(calc(100% + 30px));
	transition: transform 0.3s ease-in-out;
	max-width: 350px;
	word-wrap: break-word;
}

.sc-toast.show {
	transform: translateX(0);
}

.sc-toast-success {
	background: var(--sc-success);
}

.sc-toast-error {
	background: var(--sc-error);
}

.sc-toast-warning {
	background: var(--sc-warning);
	color: var(--sc-dark);
}

.sc-toast-info {
	background: var(--sc-info);
}

/* ========================================
   LOADING STATES
   ======================================== */
.sc-loading {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: currentColor;
	border-radius: 50%;
	animation: sc-spin 0.8s linear infinite;
	margin-right: 8px;
	vertical-align: middle;
}

.sc-loading-dark {
	border-color: rgba(0, 0, 0, 0.1);
	border-top-color: var(--sc-primary);
}

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

/* Loading overlay */
.sc-loading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

.sc-loading-content {
	background: var(--sc-bg);
	padding: 24px 32px;
	border-radius: var(--sc-radius-lg);
	text-align: center;
	box-shadow: var(--sc-shadow-lg);
	max-width: 80%;
}

.sc-loading-spinner {
	width: 40px;
	height: 40px;
	border: 3px solid var(--sc-border);
	border-top-color: var(--sc-primary);
	border-radius: 50%;
	animation: sc-spin 0.8s linear infinite;
	margin: 0 auto 12px;
}

.sc-loading-text {
	font-size: 14px;
	color: var(--sc-text);
	font-weight: 500;
}

/* ========================================
   STATUS BADGES
   ======================================== */
.sc-badge {
	display: inline-block;
	padding: 4px 10px;
	font-size: 11px;
	font-weight: 500;
	border-radius: 12px;
}

.sc-badge-success {
	background: var(--sc-success-bg);
	color: var(--sc-success);
}

.sc-badge-error {
	background: var(--sc-error-bg);
	color: var(--sc-error);
}

.sc-badge-warning {
	background: var(--sc-warning-bg);
	color: var(--sc-warning);
}

.sc-badge-info {
	background: var(--sc-info-bg);
	color: var(--sc-info);
}

/* ========================================
   CARDS / PANELS
   ======================================== */
.sc-card {
	background: var(--sc-bg);
	border: 1px solid var(--sc-border);
	border-radius: var(--sc-radius-lg);
	padding: 16px;
}

.sc-card-header {
	font-weight: 600;
	font-size: 14px;
	color: var(--sc-text);
	padding-bottom: 12px;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--sc-border);
}

/* ========================================
   DIVIDER
   ======================================== */
.sc-divider {
	display: flex;
	align-items: center;
	margin: 16px 0;
	color: var(--sc-text-muted);
	font-size: 12px;
}

.sc-divider::before,
.sc-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--sc-border);
}

.sc-divider span {
	padding: 0 12px;
}

/* ========================================
   MARKDOWN / PROSE CONTENT
   For rendered markdown, summaries, articles
   ======================================== */
.sc-prose {
	font-size: 14px;
	line-height: 1.6;
	color: var(--sc-text);
	word-wrap: break-word;
}

.sc-prose h1,
.sc-prose h2,
.sc-prose h3,
.sc-prose h4,
.sc-prose h5,
.sc-prose h6 {
	margin-top: 1.2em;
	margin-bottom: 0.5em;
	color: var(--sc-text);
	font-weight: 600;
	line-height: 1.3;
}

.sc-prose h1 { font-size: 1.5em; }
.sc-prose h2 { font-size: 1.3em; }
.sc-prose h3 { font-size: 1.15em; }
.sc-prose h4 { font-size: 1em; }

.sc-prose p {
	margin-bottom: 1em;
}

.sc-prose ul,
.sc-prose ol {
	margin-left: 1.5em;
	margin-bottom: 1em;
	padding-left: 0;
}

.sc-prose li {
	margin-bottom: 0.4em;
}

.sc-prose li > ul,
.sc-prose li > ol {
	margin-top: 0.4em;
	margin-bottom: 0;
}

/* Tables */
.sc-prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 1em 0;
	font-size: 0.95em;
}

.sc-prose th,
.sc-prose td {
	padding: 8px 12px;
	text-align: left;
	border: 1px solid var(--sc-border);
}

.sc-prose th {
	background: var(--sc-bg-alt);
	font-weight: 600;
}

.sc-prose tr:nth-child(even) {
	background: var(--sc-bg-alt);
}

/* Code */
.sc-prose code {
	background: var(--sc-bg-alt);
	padding: 2px 6px;
	border-radius: 3px;
	font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
	font-size: 0.9em;
}

.sc-prose pre {
	background: var(--sc-bg-alt);
	padding: 12px 16px;
	border-radius: var(--sc-radius-md);
	overflow-x: auto;
	margin: 1em 0;
	border: 1px solid var(--sc-border);
}

.sc-prose pre code {
	background: transparent;
	padding: 0;
	border-radius: 0;
}

/* Blockquotes */
.sc-prose blockquote {
	border-left: 4px solid var(--sc-primary);
	padding-left: 1em;
	margin: 1em 0;
	color: var(--sc-text-muted);
	font-style: italic;
}

/* Links */
.sc-prose a {
	color: var(--sc-primary);
	text-decoration: none;
}

.sc-prose a:hover {
	text-decoration: underline;
}

/* Emphasis */
.sc-prose strong {
	font-weight: 600;
}

.sc-prose em {
	font-style: italic;
}

/* Horizontal rule */
.sc-prose hr {
	border: none;
	border-top: 1px solid var(--sc-border);
	margin: 1.5em 0;
}

/* Images */
.sc-prose img {
	max-width: 100%;
	height: auto;
	border-radius: var(--sc-radius-md);
}

/* ========================================
   sc-account-widget - sidepanel header auth UI
   Used by panel-auth.js across extensions.
   ======================================== */
.sc-account-widget {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.sc-account-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    border: 1px solid var(--sc-border, #d0d0d0);
    border-radius: var(--sc-radius-md, 6px);
    background: transparent;
    color: var(--sc-text, #222);
    cursor: pointer;
}
.sc-account-button:hover { background: var(--sc-bg-hover, #f4f4f4); }
.sc-account-label { white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.sc-account-caret { font-size: 10px; opacity: 0.7; }

.sc-account-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    min-width: 220px;
    background: var(--sc-bg, #fff);
    border: 1px solid var(--sc-border, #d0d0d0);
    border-radius: var(--sc-radius-md, 6px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    z-index: 1000;
    overflow: hidden;
}
.sc-account-menu-header {
    padding: 10px 12px;
    border-bottom: 1px solid var(--sc-border, #eee);
}
.sc-account-menu-email {
    font-size: 12px;
    font-weight: 600;
    color: var(--sc-text, #222);
    word-break: break-all;
}
.sc-account-menu-tier {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 10px;
    background: #eee;
    color: #555;
}
.sc-tier-free          { background: #e0e0e0; color: #555; }
.sc-tier-professional  { background: #c8e6c9; color: #2e7d32; }
.sc-tier-enterprise    { background: #bbdefb; color: #1565c0; }
.sc-tier-enterprise_site { background: #d1c4e9; color: #4527a0; }

.sc-account-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    font-size: 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--sc-text, #222);
}
.sc-account-menu-item:hover { background: var(--sc-bg-hover, #f4f4f4); }

/* Device row inside the My-devices Webix list */
.sc-device-row { padding: 6px 4px; }
.sc-device-name { font-weight: 600; font-size: 13px; }
.sc-device-meta { font-size: 11px; color: #888; margin-top: 2px; }
.sc-device-meta a { color: #d32f2f; text-decoration: none; }
.sc-device-meta a:hover { text-decoration: underline; }