@charset "UTF-8";
/**
 * studio-common.css - Studio Module UI Patterns
 * Location: /res/css/studio-common.css
 * 
 * Studio-specific patterns that build on aa-design-system.css
 * Loaded only by Studio Module JSPs
 */

/* ================================================================
   SECTION 1: PAGE HEADERS
   Gradient headers for studio pages
   ================================================================ */
.studio-header,
.artist-header,
.project-header,
.form-header {
	background: linear-gradient(135deg, var(--aa-primary) 0%, var(--aa-primary-light) 100%);
	border-bottom: 1px solid #dee2e6;
}

/* ================================================================
   SECTION 2: STATS ROW
   Artist statistics display
   ================================================================ */
.stats-row .stat-item {
	text-align: center;
	padding: 0.75rem;
}
.stats-row .stat-value {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--aa-primary);
}
.stats-row .stat-label {
	font-size: 0.75rem;
	text-transform: uppercase;
	color: var(--aa-secondary-solid);
}

/* ================================================================
   SECTION 3: WIP CARD
   Work-in-Progress cards with hover elevation
   ================================================================ */
.wip-card {
	transition: transform 0.2s, box-shadow 0.2s;
}
.wip-card.clickable:hover {
	transform: translateY(-4px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	cursor: pointer;
}
.wip-card.not-clickable {
	cursor: default;
}
.wip-card.not-clickable .card-title {
	color: var(--aa-secondary-solid);
}

/* Going Dark card variant */
.wip-card.going-dark {
	border-color: var(--aa-dark);
}
.wip-card.going-dark .card-img-top {
	background-color: var(--aa-dark);
	color: var(--aa-light);
}
.wip-card-thumb {
	aspect-ratio: 16 / 9;
}

/* Going dark reason quote */
.going-dark-reason {
	font-style: italic;
	color: var(--aa-secondary-solid);
	font-size: 0.875rem;
	border-left: 3px solid var(--aa-dark);
	padding-left: 0.75rem;
	margin-top: 0.5rem;
}

/* ================================================================
   SECTION 4: SNAPSHOT CARD
   Snapshot timeline cards
   ================================================================ */
.snapshot-card {
	background: #fff;
	border: 1px solid #dee2e6;
	border-radius: 0.5rem;
	overflow: hidden;
	transition: box-shadow 0.2s;
}
.snapshot-card:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.snapshot-card .snapshot-image img {
	max-width: 100%;
	height: auto;
	max-height: 400px;
	object-fit: contain;
}
.snapshot-image {
	aspect-ratio: 16 / 9;
	position: relative;
}
.snapshot-image .piece-badge {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
}
.snapshot-image .date-badge {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--aa-secondary);
	color: #fff;
	padding: 0.25rem 0.75rem;
	font-size: 0.75rem;
}
.snapshot-body {
	padding: 1rem;
}
.snapshot-description {
	color: var(--aa-dark);
	line-height: 1.6;
}
.snapshot-description.truncated {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.snapshot-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.75rem 1rem;
	background: var(--aa-secondary-light);
	border-top: 1px solid #dee2e6;
}
.snapshot-actions .action-btn {
	color: var(--aa-secondary-solid);
	text-decoration: none;
	font-size: 0.875rem;
	display: flex;
	align-items: center;
	gap: 0.25rem;
}
.snapshot-actions .action-btn:hover {
	color: var(--aa-primary);
}
.snapshot-actions .action-btn.liked {
	color: var(--aa-primary);
}

/* Snapshot thumbnail (square) */
.snapshot-thumb {
	aspect-ratio: 1 / 1;
	position: relative;
	overflow: hidden;
}
.snapshot-thumb .overlay-label {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--aa-secondary);
	color: #fff;
	font-size: 0.75rem;
	padding: 0.25rem 0.5rem;
}

/* ================================================================
   SECTION 5: ACTION PANEL
   Sticky sidebar for actions
   ================================================================ */
.action-panel {
	background: #fff;
	border: 1px solid #dee2e6;
	border-radius: 0.5rem;
	position: sticky;
	top: 1rem;
}
.action-panel-header {
	padding: 1rem;
	border-bottom: 1px solid #dee2e6;
	background: var(--aa-secondary-light);
}
.action-panel-body {
	padding: 1rem;
}

/* ================================================================
   SECTION 6: WORKSTREAM TABS
   Custom tab styling for workstreams
   ================================================================ */
.workstream-tabs .nav-link {
	color: var(--aa-secondary-solid);
	border: none;
	border-bottom: 3px solid transparent;
	border-radius: 0;
	padding: 0.75rem 1rem;
}
.workstream-tabs .nav-link.active {
	color: var(--aa-primary);
	border-bottom-color: var(--aa-primary);
	background: transparent;
}
.workstream-tabs .nav-link:hover:not(.active) {
	border-bottom-color: var(--aa-secondary-light);
}

/* ================================================================
   SECTION 7: DECLARATION SECTION
   Declaration of Intent styling
   ================================================================ */

.declaration-section {
	background: #fff;
	border: 1px solid var(--aa-border-color, #dee2e6);
	border-radius: 0.5rem;
}
.declaration-header {
	border-bottom: 1px solid var(--aa-border-color, #dee2e6);
	background: var(--aa-secondary-light);
}
.declaration-empty {
	background: #fff3cd;
	border: 1px dashed #ffc107;
	border-radius: 0.25rem;
	padding: 1rem;
	color: #856404;
}

/* Sort Toggle */
.sort-toggle .btn-check:checked + .btn {
	background-color: var(--aa-primary);
	border-color: var(--aa-primary);
	color: #fff;
}

/* Empty State */
.empty-state {
	text-align: center;
	padding: 3rem 1rem;
	color: var(--aa-secondary-solid);
}
.empty-state i {
	font-size: 1.5rem;
	margin-bottom: 1rem;
	opacity: 0.5;
}

/* Going Dark Badge */
.going-dark-badge {
	background: var(--aa-dark);
	color: #fff;
}


/* ================================================================
   SECTION 8: UPLOAD ZONE
   Drag-and-drop upload area
   ================================================================ */
.upload-zone {
	border: 2px dashed var(--aa-secondary-solid);
	border-radius: 0.5rem;
	padding: 2rem;
	text-align: center;
	background: #e9ecef;
	cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s;
	min-height: 180px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.upload-zone:hover,
.upload-zone.drag-over {
	border-color: var(--aa-primary);
	background-color: var(--aa-primary-light);
}
.upload-zone.has-image {
	padding: 0.5rem;
	background: #fff;
}
.upload-zone .upload-icon {
	font-size: 2.5rem;
	color: var(--aa-secondary-solid);
	margin-bottom: 0.5rem;
}
.upload-zone:hover .upload-icon {
	color: var(--aa-primary);
}

/* ================================================================
   SECTION 9: COMMENTS
   Comment cards and threading
   ================================================================ */
.comment-card {
	border: 1px solid #dee2e6;
	border-radius: 0.5rem;
	padding: 1rem;
	margin-bottom: 0.75rem;
	background: #fff;
}
.comment-card.highlighted-curator {
	border-left: 3px solid var(--aa-curator-color);
	background: rgba(53, 172, 165, 0.05);
}
.comment-card.highlighted-artist {
	border-left: 3px solid var(--aa-artist-color);
	background: rgba(197, 105, 105, 0.05);
}
.comment-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
}
.comment-meta {
	flex-grow: 1;
}
.comment-author {
	font-weight: 600;
	font-size: 0.9rem;
}
.comment-time {
	font-size: 0.75rem;
	color: var(--aa-secondary-solid);
}
.comment-body {
	font-size: 0.9rem;
	line-height: 1.5;
}
.comment-actions {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.75rem;
}
.comment-actions .btn {
	padding: 0.25rem 0.5rem;
	font-size: 0.75rem;
}

/* Threaded reply indent */
.comment-reply {
	margin-left: 2.5rem;
	border-left: 2px solid #dee2e6;
	padding-left: 1rem;
}

/* Hidden comment placeholder */
.comment-hidden {
	background: #e9ecef;
	border: 1px dashed #dee2e6;
	border-radius: 0.5rem;
	padding: 1rem;
	margin-bottom: 0.75rem;
	text-align: center;
	color: var(--aa-secondary-solid);
	font-style: italic;
}

/* Flagged comment (admin view) */
.comment-flagged {
	border: 2px solid #ffc107;
	background: #fff8e1;
}

/* Comment input area */
.comment-input-area {
	background: #f8f9fa;
	border: 1px solid #dee2e6;
	border-radius: 0.5rem;
	padding: 1rem;
}
.comment-input-area textarea {
	border: 1px solid #dee2e6;
	border-radius: 0.375rem;
	resize: none;
}
.comment-input-area textarea:focus {
	border-color: var(--aa-primary);
	box-shadow: 0 0 0 0.2rem rgba(192, 95, 119, 0.15);
}

/* Role badges - only colors outside Bootstrap palette */
.badge-lead-curator {
	background-color: var(--aa-curator-color) !important;
	color: #fff;
}
.badge-assoc-curator {
	background-color: rgba(53, 172, 165, 0.7) !important;
	color: #fff;
}
.badge-project-artist {
	background-color: var(--aa-artist-color) !important;
	color: #fff;
}
.badge-platform-curator {
	background: linear-gradient(135deg, var(--aa-curator-color) 0%, var(--aa-secondary-solid) 100%);
	color: #fff;
}
.badge-platform-artist {
	background: linear-gradient(135deg, var(--aa-artist-color) 0%, var(--aa-secondary-solid) 100%);
	color: #fff;
}

/* ================================================================
   SECTION 10: GOING DARK
   Privacy mode UI elements
   ================================================================ */

/* Reason radio options */
.reason-option {
	border: 1px solid #dee2e6;
	border-radius: 0.5rem;
	padding: 0.75rem 1rem;
	margin-bottom: 0.5rem;
	cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s;
}
.reason-option:hover {
	border-color: var(--aa-dark-mode);
	background-color: rgba(26, 26, 46, 0.05);
}
.reason-option.selected {
	border-color: var(--aa-dark-mode);
	background-color: rgba(26, 26, 46, 0.1);
}
.reason-option input[type="radio"] {
	display: none;
}
.reason-option .reason-icon {
	font-size: 1.25rem;
	margin-right: 0.75rem;
	opacity: 0.7;
}
.reason-option.selected .reason-icon {
	opacity: 1;
}

/* Private status banner */
.private-status-banner {
	background: linear-gradient(135deg, var(--aa-dark-mode) 0%, var(--aa-dark-accent) 100%);
	color: #fff;
	border-radius: 0.5rem;
	padding: 1.5rem;
}
.private-status-banner .moon-icon {
	font-size: 2rem;
	animation: pulse 2s infinite;
}
@keyframes pulse {
	0%, 100% { opacity: 0.8; }
	50% { opacity: 1; }
}

/* Duration badges */
.duration-badge {
	background: rgba(255, 255, 255, 0.2);
	padding: 0.25rem 0.75rem;
	border-radius: 1rem;
	font-size: 0.75rem;
}
.duration-badge.warning {
	background: #ffc107;
	color: var(--aa-dark);
}
.duration-badge.danger {
	background: #dc3545;
	color: #fff;
}

/* Dark card (public view of Going Dark WIP) */
.wip-card-dark {
	background: linear-gradient(135deg, var(--aa-dark-mode) 0%, var(--aa-dark-accent) 100%);
	border-radius: 0.5rem;
	color: #fff;
	overflow: hidden;
}
.wip-card-dark .card-body {
	padding: 1.5rem;
}
.wip-card-dark .mystique-message {
	background: rgba(255, 255, 255, 0.1);
	border-radius: 0.375rem;
	padding: 1rem;
	font-style: italic;
}

/* Curator view badge overlay */
.curator-view-badge {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	background: var(--aa-curator-color);
	color: #fff;
	padding: 0.25rem 0.5rem;
	border-radius: 0.25rem;
	font-size: 0.7rem;
	font-weight: 600;
}

/* ================================================================
   SECTION 11: DISCOVERY
   Discovery lists and horizontal scroll
   ================================================================ */
.discovery-card {
	border: 1px solid #dee2e6;
	border-radius: 0.5rem;
	overflow: hidden;
	background: #fff;
	transition: transform 0.2s, box-shadow 0.2s;
	height: 100%;
}
.discovery-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.discovery-card-image {
	aspect-ratio: 4 / 3;
	background: #e9ecef;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.discovery-card-body {
	padding: 0.75rem;
}
.discovery-card-title {
	font-size: 0.9rem;
	font-weight: 600;
	margin-bottom: 0.25rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.discovery-card-artist {
	font-size: 0.8rem;
	color: var(--aa-secondary-solid);
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* Discovery section headers */
.discovery-section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
}
.discovery-section-title {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--aa-secondary-solid);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* List type badges */
.list-badge-popular {
	background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);
	color: #fff;
}
.list-badge-trending {
	background: linear-gradient(135deg, #ffa502 0%, #ff7f00 100%);
	color: #fff;
}
.list-badge-recent {
	background: linear-gradient(135deg, var(--aa-secondary-solid) 0%, #3d5157 100%);
	color: #fff;
}

/* Trending indicator badge */
.trending-badge {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	background: linear-gradient(135deg, #ffa502 0%, #ff7f00 100%);
	color: #fff;
	padding: 0.2rem 0.5rem;
	border-radius: 0.25rem;
	font-size: 0.7rem;
	font-weight: 600;
}

/* Private indicator */
.private-indicator {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	padding: 0.2rem 0.5rem;
	border-radius: 0.25rem;
	font-size: 0.7rem;
}

/* Horizontal scroll container */
.discovery-scroll-container {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	padding-bottom: 0.5rem;
	scroll-snap-type: x mandatory;
}
.discovery-scroll-container::-webkit-scrollbar {
	height: 6px;
}
.discovery-scroll-container::-webkit-scrollbar-track {
	background: #e9ecef;
	border-radius: 3px;
}
.discovery-scroll-container::-webkit-scrollbar-thumb {
	background: var(--aa-secondary-solid);
	border-radius: 3px;
}
.discovery-scroll-item {
	flex: 0 0 200px;
	scroll-snap-align: start;
}
@media (min-width: 768px) {
	.discovery-scroll-item {
		flex: 0 0 220px;
	}
}

/* Philosophy callout */
.philosophy-callout {
	background: linear-gradient(135deg, var(--aa-primary-light) 0%, #fff 100%);
	border-left: 4px solid var(--aa-primary);
	padding: 1.5rem;
	border-radius: 0 0.5rem 0.5rem 0;
}
.philosophy-callout blockquote {
	font-style: italic;
	margin: 0;
	color: var(--aa-secondary-solid);
}

/* Opt-out settings card */
.opt-out-card {
	border: 2px dashed #dee2e6;
	border-radius: 0.5rem;
	padding: 1.5rem;
	background: #f8f9fa;
}
.opt-out-card.opted-out {
	border-color: var(--aa-primary);
	background: var(--aa-primary-light);
}

/* ================================================================
   SECTION 12: SUBSCRIPTIONS
   Follow buttons and subscription cards
   ================================================================ */
.subscription-card {
	border: 1px solid #dee2e6;
	border-radius: 0.5rem;
	padding: 1rem;
	margin-bottom: 0.75rem;
	background: #fff;
}
.subscription-card:hover {
	border-color: var(--aa-primary);
}
.subscription-badge {
	font-size: 0.7rem;
	padding: 0.2rem 0.5rem;
	border-radius: 1rem;
}

/* Follower count display */
.follower-count {
	font-size: 0.875rem;
	color: var(--aa-secondary-solid);
}

/* Frequency toggle */
.frequency-toggle .btn {
	padding: 0.25rem 0.75rem;
	font-size: 0.875rem;
}
.frequency-toggle .btn-check:checked + .btn {
	background-color: var(--aa-primary);
	border-color: var(--aa-primary);
	color: #fff;
}

/* ================================================================
   SECTION 13: PROMOTION
   Piece-to-Artwork promotion workflow
   ================================================================ */

/* Snapshot selection grid */
.snapshot-select-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	gap: 0.75rem;
}
.snapshot-select-item {
	aspect-ratio: 1 / 1;
	border: 2px solid #dee2e6;
	border-radius: 0.375rem;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	background: #e9ecef;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.2s, transform 0.2s;
}
.snapshot-select-item:hover {
	border-color: var(--aa-primary);
	transform: scale(1.02);
}
.snapshot-select-item.selected {
	border-color: var(--aa-exhibition-color);
	border-width: 3px;
}
.snapshot-select-item.selected::after {
	content: '';
	position: absolute;
	top: 0.25rem;
	right: 0.25rem;
	width: 24px;
	height: 24px;
	background: var(--aa-exhibition-color);
	border-radius: 50%;
}
.snapshot-select-item .check-icon {
	position: absolute;
	top: 0.35rem;
	right: 0.35rem;
	color: var(--aa-dark);
	font-size: 0.875rem;
	z-index: 1;
	display: none;
}
.snapshot-select-item.selected .check-icon {
	display: block;
}

/* Promotion status cards */
.promotion-status-card {
	border-radius: 0.5rem;
	padding: 1.5rem;
}
.status-proposed {
	background: rgba(201, 179, 123, 0.2);
	border: 1px solid var(--aa-exhibition-color);
}
.status-accepted {
	background: #d1e7dd;
	border: 1px solid #198754;
}
.status-rejected {
	background: #f8d7da;
	border: 1px solid #dc3545;
}
.status-published {
	background: linear-gradient(135deg, rgba(201, 179, 123, 0.3) 0%, rgba(201, 179, 123, 0.1) 100%);
	border: 2px solid var(--aa-exhibition-color);
}

/* Review card (curator view) */
.review-card {
	background: #fff;
	border: 1px solid #dee2e6;
	border-radius: 0.5rem;
	overflow: hidden;
}
.review-card-header {
	background: var(--aa-secondary-light);
	padding: 1rem;
	border-bottom: 1px solid #dee2e6;
}
.review-card-body {
	padding: 1rem;
}
.review-card-footer {
	background: #f8f9fa;
	padding: 1rem;
	border-top: 1px solid #dee2e6;
}

/* ================================================================
   SECTION 14: IMAGE PLACEHOLDER
   Generic image placeholders
   ================================================================ */
.img-placeholder {
	background-color: #e9ecef;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--aa-secondary-solid);
}
.img-placeholder-sm { height: 60px; }
.img-placeholder-md { height: 120px; }
.img-placeholder-lg { height: 180px; }
.img-placeholder-xl { height: 240px; }

/* ================================================================
   SECTION 15: SKELETON LOADING
   Loading placeholder animations
   ================================================================ */
.skeleton {
	background: linear-gradient(90deg, #e9ecef 25%, #f8f9fa 50%, #e9ecef 75%);
	background-size: 200% 100%;
	animation: skeleton-loading 1.5s infinite;
	border-radius: 0.25rem;
}
@keyframes skeleton-loading {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}
.skeleton-text { height: 1rem; margin-bottom: 0.5rem; }
.skeleton-text-sm { height: 0.75rem; width: 60%; }
.skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; }
.skeleton-thumb { aspect-ratio: 1 / 1; }

/* ================================================================
   SECTION 16: FILTER PILLS
   Pill-style filter navigation
   ================================================================ */
.filter-pills .nav-link {
	color: var(--aa-secondary-solid);
	border-radius: 2rem;
	padding: 0.375rem 1rem;
	margin-right: 0.25rem;
}
.filter-pills .nav-link.active {
	background-color: var(--aa-primary);
	color: #fff;
}
.filter-pills .nav-link:not(.active):hover {
	background-color: var(--aa-secondary-light);
}

/* ================================================================
   SECTION 17: MODAL CUSTOMIZATION
   Studio-specific modal header/footer styling
   ================================================================ */
.modal-header-aa {
	background: var(--aa-secondary-light);
	border-bottom: 1px solid var(--aa-secondary-solid);
}
.modal-footer-aa {
	background: var(--aa-secondary-light);
	border-top: 1px solid var(--aa-secondary-solid);
}

.studio-sync-indicator {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 1050;
    transition: opacity 0.3s ease;
}

.studio-sync-indicator.sync-state-syncing .bi {
    animation: spin 1s linear infinite;
}

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