/**
 * Campus Calls Dashboard & Widget Styles
 * PCAdmin-only feature, placed in 03_pcadmin folder
 * Uses Pflegecampus design tokens (--rd-*)
 */

/* ==================== Dashboard Styles ==================== */

.cc-dashboard {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--rd-spacing-lg);
}

.cc-dashboard h1 {
	display: flex;
	align-items: center;
	gap: var(--rd-spacing-x-sm);
	font-size: var(--rd-fontsize-6);
	margin-bottom: var(--rd-spacing-x-sm);
	color: var(--rd-font-dark);
}

.cc-dashboard h1 .material-icons {
	font-size: 2rem;
	color: var(--rd-primary-active);
}

.cc-subtitle {
	color: #6b7280;
	margin-bottom: var(--rd-spacing-lg);
	font-size: var(--rd-fontsize-1);
}

.cc-section {
	background: var(--rd-font-light);
	border-radius: var(--rd-borderradius-border-lg);
	padding: var(--rd-spacing-lg);
	margin-bottom: var(--rd-spacing-lg);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
	border: 1px solid var(--rd-input-default);
}

.cc-section h2 {
	display: flex;
	align-items: center;
	gap: var(--rd-spacing-x-sm);
	font-size: var(--rd-fontsize-3);
	margin-bottom: var(--rd-spacing-md);
	color: var(--rd-font-dark);
}

.cc-section h2 .material-icons {
	font-size: 1.5rem;
	color: var(--rd-primary-active);
}

.cc-section > p {
	color: #6b7280;
	margin-bottom: var(--rd-spacing-md);
	font-size: var(--rd-fontsize-1);
}

/* ==================== User Selection Grid ==================== */

.cc-user-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rd-spacing-x-sm);
	margin-bottom: var(--rd-spacing-md);
	align-items: stretch;
}

.cc-user-card {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--rd-spacing-x-sm);
	padding: var(--rd-spacing-x-sm) var(--rd-spacing-sm);
	border-radius: var(--rd-borderradius-border-xl);
	border: var(--rd-borderwidth-border-default) solid transparent;
	background: var(--rd-list-default-dark);
	cursor: pointer;
	transition: all 0.2s ease;
	position: relative;
	height: 52px;
	box-sizing: border-box;
	flex-wrap: nowrap;
}

.cc-user-card:hover {
	background: var(--rd-list-hover);
	border-color: var(--rd-primary-active);
}

.cc-user-card.selected {
	background: var(--rd-primary-inactive);
	border-color: var(--rd-primary-active);
}

.cc-user-card .cc-check {
	position: absolute;
	top: -4px;
	right: -4px;
	color: var(--rd-primary-active);
	font-size: 1rem;
	background: var(--rd-font-light);
	border-radius: 50%;
}

.cc-user-name {
	font-size: var(--rd-fontsize-1);
	color: var(--rd-font-dark);
	white-space: nowrap;
}

/* ==================== Avatar Styles ==================== */

.cc-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: var(--rd-fontweights-open-sans-1);
	font-size: var(--rd-fontsize-2);
	text-transform: uppercase;
}

.cc-avatar.small {
	width: 36px;
	height: 36px;
	font-size: var(--rd-fontsize-1);
}

.cc-avatar.mini {
	width: 28px;
	height: 28px;
	font-size: 12px;
}

/* ==================== Selected Users Bar ==================== */

.cc-selected-info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: var(--rd-spacing-md);
	border-top: 1px solid var(--rd-input-default);
	margin-top: var(--rd-spacing-md);
}

.cc-selected-info > span {
	color: #6b7280;
	font-size: var(--rd-fontsize-1);
}

.cc-action-buttons {
	display: flex;
	gap: var(--rd-spacing-sm);
}

/* ==================== Call Cards ==================== */

.cc-calls-list {
	display: flex;
	flex-direction: column;
	gap: var(--rd-spacing-md);
}

.cc-call-card {
	background: var(--rd-list-default-dark);
	border-radius: var(--rd-borderradius-border-md);
	padding: var(--rd-spacing-md);
}

.cc-call-card.active {
	background: var(--rd-success-inactive);
	border: var(--rd-borderwidth-border-default) solid var(--rd-success-default);
}

.cc-call-card.ended {
	opacity: 0.7;
}

.cc-call-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--rd-spacing-md);
}

.cc-caller-info {
	display: flex;
	align-items: center;
	gap: var(--rd-spacing-sm);
}

.cc-caller-info span {
	font-weight: var(--rd-fontweights-open-sans-1);
	font-size: var(--rd-fontsize-1);
	color: var(--rd-font-dark);
}

.cc-call-status {
	font-size: var(--rd-fontsize-1);
	font-weight: var(--rd-fontweights-open-sans-1);
}

.cc-call-status.active {
	color: var(--rd-success-default);
}

.cc-call-status.ended {
	color: #6b7280;
}

/* ==================== Participants ==================== */

.cc-participants {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rd-spacing-x-sm);
	margin-bottom: var(--rd-spacing-md);
}

.cc-participant {
	display: flex;
	align-items: center;
	gap: var(--rd-spacing-x-sm);
	padding: var(--rd-spacing-xx-sm) var(--rd-spacing-x-sm);
	background: rgba(255,255,255,0.5);
	border-radius: var(--rd-borderradius-border-xl);
	font-size: var(--rd-fontsize-1);
}

.cc-participant.joined {
	background: var(--rd-success-inactive);
}

.cc-participant.invited {
	background: var(--rd-warning-inactive);
}

.cc-participant.declined {
	background: var(--rd-error-inactive);
	opacity: 0.6;
}

.cc-p-status {
	font-size: 12px;
	opacity: 0.7;
}

/* ==================== Call Actions ==================== */

.cc-call-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rd-spacing-x-sm);
}

.cc-call-actions .button {
	display: inline-flex;
	align-items: center;
	gap: var(--rd-spacing-xx-sm);
}

.cc-call-actions .button .material-icons {
	font-size: 1.125rem;
}

.cc-call-meta {
	font-size: var(--rd-fontsize-1);
	color: #6b7280;
}

/* ==================== Loading State ==================== */

.cc-loading {
	padding: var(--rd-spacing-xx-lg);
	text-align: center;
	color: #6b7280;
}

/* ==================== Widget Styles ==================== */

.ccw-container {
	position: fixed;
	bottom: var(--rd-spacing-lg);
	right: var(--rd-spacing-lg);
	z-index: 9999;
}

.ccw-badge {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--rd-primary-active);
	color: var(--rd-font-light);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ccw-badge:hover {
	transform: scale(1.05);
	background: var(--rd-primary-hover);
	box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
}

.ccw-badge .material-icons {
	font-size: 1.5rem;
}

.ccw-count {
	position: absolute;
	top: -4px;
	right: -4px;
	background: var(--rd-error-hover);
	color: var(--rd-font-light);
	font-size: 12px;
	font-weight: var(--rd-fontweights-open-sans-1);
	min-width: 20px;
	height: 20px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
}

/* Ringing animation */
.ccw-container.ringing .ccw-dropdown {
	animation: ccw-ring 0.5s ease-in-out infinite;
}

@keyframes ccw-ring {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}

/* ==================== Widget Dropdown ==================== */

.ccw-dropdown {
	width: 340px;
	background: var(--rd-font-light);
	border-radius: var(--rd-borderradius-border-lg);
	box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
	overflow: hidden;
}

.ccw-header {
	display: flex;
	align-items: center;
	gap: var(--rd-spacing-x-sm);
	padding: var(--rd-spacing-md);
	background: var(--rd-primary-active);
	color: var(--rd-font-light);
	font-weight: var(--rd-fontweights-open-sans-1);
	font-size: var(--rd-fontsize-1);
}

.ccw-header .material-icons {
	font-size: 1.25rem;
}

.ccw-invitations {
	max-height: 300px;
	overflow-y: auto;
}

.ccw-invitation {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--rd-spacing-sm) var(--rd-spacing-md);
	border-bottom: 1px solid var(--rd-input-default);
}

.ccw-invitation:last-child {
	border-bottom: none;
}

.ccw-invitation.joined {
	background: var(--rd-success-inactive);
}

.ccw-caller {
	display: flex;
	align-items: center;
	gap: var(--rd-spacing-sm);
}

.ccw-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: var(--rd-fontweights-open-sans-1);
	font-size: var(--rd-fontsize-1);
	text-transform: uppercase;
}

.ccw-caller-name {
	display: flex;
	flex-direction: column;
}

.ccw-caller-name strong {
	font-size: var(--rd-fontsize-1);
	color: var(--rd-font-dark);
}

.ccw-caller-name span {
	font-size: 12px;
	color: #6b7280;
}

.ccw-actions {
	display: flex;
	gap: var(--rd-spacing-x-sm);
}

.ccw-btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s ease, background 0.2s ease;
}

.ccw-btn:hover {
	transform: scale(1.1);
}

.ccw-btn.join {
	background: var(--rd-success-default);
	color: var(--rd-font-light);
}

.ccw-btn.join:hover {
	background: var(--rd-success-hover);
}

.ccw-btn.decline {
	background: var(--rd-error-hover);
	color: var(--rd-font-light);
}

.ccw-btn.decline:hover {
	background: var(--rd-error-pressed);
}

.ccw-btn .material-icons {
	font-size: 1.25rem;
}

/* ==================== Invite Popup ==================== */

.cc-popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(13, 17, 48, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
}

.cc-popup {
	background: var(--rd-font-light);
	border-radius: var(--rd-borderradius-border-lg);
	width: 90%;
	max-width: 500px;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}

.cc-popup-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--rd-spacing-md) var(--rd-spacing-lg);
	border-bottom: 1px solid var(--rd-input-default);
}

.cc-popup-header h3 {
	display: flex;
	align-items: center;
	gap: var(--rd-spacing-x-sm);
	margin: 0;
	font-size: var(--rd-fontsize-3);
	color: var(--rd-font-dark);
}

.cc-popup-header h3 .material-icons {
	color: var(--rd-primary-active);
}

.cc-popup-close {
	background: none;
	border: none;
	cursor: pointer;
	padding: var(--rd-spacing-x-sm);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #6b7280;
	transition: background 0.2s ease;
}

.cc-popup-close:hover {
	background: var(--rd-list-default-dark);
}

.cc-popup-body {
	padding: var(--rd-spacing-lg);
	overflow-y: auto;
	flex: 1;
}

.cc-popup-body > p {
	margin: 0 0 var(--rd-spacing-md) 0;
	color: #6b7280;
	font-size: var(--rd-fontsize-1);
}

.cc-no-users {
	text-align: center;
	padding: var(--rd-spacing-lg);
	color: #6b7280;
}

.cc-popup-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--rd-spacing-md) var(--rd-spacing-lg);
	border-top: 1px solid var(--rd-input-default);
	background: var(--rd-list-default-dark);
}

.cc-popup-footer > span {
	color: #6b7280;
	font-size: var(--rd-fontsize-1);
}

.cc-popup-footer .button {
	display: inline-flex;
	align-items: center;
	gap: var(--rd-spacing-x-sm);
}

/* ==================== Scheduled Calls ==================== */

.cc-scheduled-calls {
	border: var(--rd-borderwidth-border-default) solid var(--rd-primary-inactive);
	background: linear-gradient(135deg, var(--rd-font-light) 0%, rgba(79, 70, 229, 0.02) 100%);
}

.cc-scheduled-calls h2 .material-icons {
	color: var(--rd-primary-active);
}

.cc-call-card.scheduled {
	background: var(--rd-font-light);
	border: var(--rd-borderwidth-border-default) solid var(--rd-primary-inactive);
}

.cc-call-status.scheduled {
	display: flex;
	align-items: center;
	gap: var(--rd-spacing-xx-sm);
	color: var(--rd-primary-active);
	font-weight: var(--rd-fontweights-open-sans-1);
}

.cc-call-status.scheduled .material-icons {
	font-size: 1rem;
}

.cc-scheduled-time {
	display: flex;
	align-items: center;
	gap: var(--rd-spacing-x-sm);
	margin-bottom: var(--rd-spacing-md);
	padding: var(--rd-spacing-sm) var(--rd-spacing-md);
	background: var(--rd-primary-inactive);
	border-radius: var(--rd-borderradius-border-md);
	color: var(--rd-primary-active);
	font-weight: var(--rd-fontweights-open-sans-1);
	font-size: var(--rd-fontsize-1);
}

.cc-scheduled-time .material-icons {
	font-size: 1.25rem;
}

/* ==================== Schedule Popup ==================== */

.cc-schedule-inputs {
	display: flex;
	gap: var(--rd-spacing-md);
	margin-bottom: var(--rd-spacing-md);
}

.cc-input-group {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--rd-spacing-x-sm);
}

.cc-input-group label {
	font-weight: var(--rd-fontweights-open-sans-1);
	font-size: var(--rd-fontsize-1);
	color: var(--rd-font-dark);
}

.cc-input-group input[type="date"],
.cc-input-group input[type="time"] {
	padding: var(--rd-spacing-sm) var(--rd-spacing-md);
	border: var(--rd-borderwidth-border-default) solid var(--rd-input-default);
	border-radius: var(--rd-borderradius-border-md);
	font-size: var(--rd-fontsize-1);
	color: var(--rd-font-dark);
	background: var(--rd-font-light);
	width: 100%;
	box-sizing: border-box;
}

.cc-input-group input[type="date"]:focus,
.cc-input-group input[type="time"]:focus {
	outline: none;
	border-color: var(--rd-primary-active);
	box-shadow: 0 0 0 3px var(--rd-primary-inactive);
}

.cc-schedule-note {
	display: flex;
	align-items: flex-start;
	gap: var(--rd-spacing-x-sm);
	padding: var(--rd-spacing-sm) var(--rd-spacing-md);
	background: var(--rd-warning-inactive);
	border-radius: var(--rd-borderradius-border-md);
	font-size: var(--rd-fontsize-0);
	color: var(--rd-font-dark);
}

.cc-schedule-note .material-icons {
	font-size: 1rem;
	color: var(--rd-warning-default);
	flex-shrink: 0;
	margin-top: 2px;
}

/* ==================== Edit Scheduled Call Popup ==================== */

.cc-popup.cc-popup-large {
	max-width: 700px;
}

.cc-popup-body h4 {
	margin: var(--rd-spacing-md) 0 var(--rd-spacing-sm) 0;
	font-size: var(--rd-fontsize-2);
	color: var(--rd-font-dark);
}

.cc-popup-body .cc-user-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: stretch;
}

.cc-user-card.creator {
	border-color: var(--rd-primary-active);
	background: var(--rd-primary-inactive);
	margin-top: 0;
}

.cc-user-card.creator::after {
	content: none;
}

.cc-creator-badge {
	font-size: 10px;
	background: var(--rd-primary-active);
	color: var(--rd-font-light);
	padding: 2px 6px;
	border-radius: var(--rd-borderradius-border-sm);
	margin-left: auto;
}

/* ==================== Widget Scheduled Calls ==================== */

.ccw-invitation.ccw-scheduled {
	background: var(--rd-primary-inactive);
	border-left: 3px solid var(--rd-primary-active);
}

.ccw-invitation.ccw-scheduled .ccw-caller-name span {
	color: var(--rd-primary-active);
	font-weight: var(--rd-fontweights-open-sans-1);
}
/* ==================== External Guests ==================== */

.cc-external-guests-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rd-spacing-x-sm);
	margin-bottom: var(--rd-spacing-md);
}

.cc-external-guest {
	position: relative;
	padding-right: var(--rd-spacing-xx-lg) !important;
}

.cc-external-guest .cc-guest-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cc-guest-email {
	font-size: 11px;
	color: #6b7280;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 150px;
}

.cc-external-avatar {
	background: var(--rd-warning-default) !important;
	color: var(--rd-font-light) !important;
}

.cc-external-badge {
	font-size: 10px;
	background: var(--rd-warning-default);
	color: var(--rd-font-light);
	padding: 2px 6px;
	border-radius: var(--rd-borderradius-border-sm);
	white-space: nowrap;
}

.cc-remove-guest {
	position: absolute;
	top: 50%;
	right: var(--rd-spacing-x-sm);
	transform: translateY(-50%);
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--rd-error-default);
	opacity: 0.7;
	transition: opacity 0.2s ease;
}

.cc-remove-guest:hover {
	opacity: 1;
}

.cc-remove-guest .material-icons {
	font-size: 16px;
}

.cc-notified-badge {
	position: absolute;
	top: 50%;
	right: var(--rd-spacing-x-sm);
	transform: translateY(-50%);
	color: var(--rd-success-default);
	display: flex;
	align-items: center;
}

.cc-notified-badge .material-icons {
	font-size: 16px;
}

/* Add guest form */
.cc-add-guest-form {
	display: flex;
	gap: var(--rd-spacing-x-sm);
	align-items: center;
	flex-wrap: wrap;
	padding: var(--rd-spacing-sm);
	background: var(--rd-list-default-dark);
	border-radius: var(--rd-borderradius-border-md);
}

.cc-guest-input {
	flex: 1;
	min-width: 120px;
	padding: var(--rd-spacing-x-sm) var(--rd-spacing-sm);
	border: var(--rd-borderwidth-border-default) solid var(--rd-input-default);
	border-radius: var(--rd-borderradius-border-md);
	font-size: var(--rd-fontsize-1);
	background: var(--rd-font-light);
}

.cc-guest-input:focus {
	outline: none;
	border-color: var(--rd-primary-active);
}

.cc-add-guest-btn {
	white-space: nowrap;
}

.cc-add-guest-btn .material-icons {
	font-size: 1rem;
}

/* Section divider and subsection title */
.cc-section-divider {
	height: 1px;
	background: var(--rd-list-default-dark);
	margin: var(--rd-spacing-md) 0;
}

.cc-subsection-title {
	display: flex;
	align-items: center;
	gap: var(--rd-spacing-x-sm);
	font-size: var(--rd-fontsize-2);
	font-weight: var(--rd-fontweights-open-sans-1);
	color: var(--rd-font-dark);
	margin: 0 0 var(--rd-spacing-sm) 0;
}

.cc-subsection-title .material-icons {
	font-size: 18px;
	color: var(--rd-primary-active);
}