@charset "utf-8";
/**
 * MyPage CSS - Notion Dark Theme
 */

/* ------------------------------------------------------------ Layout */
.mypage-main {
	padding: 24px;
	max-width: 800px;
}

.mypage-content {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.page-header {
	margin-bottom: 8px;
}

.back-link {
	display: inline-block;
	color: var(--text-muted);
	text-decoration: none;
	font-size: 13px;
	margin-bottom: 8px;
	transition: color var(--transition-fast);
}

.back-link:hover {
	color: var(--text-primary);
}

.page-title {
	font-size: 24px;
	font-weight: 700;
	color: var(--text-primary);
	margin: 0 0 24px 0;
}

/* ------------------------------------------------------------ Messages */
.message {
	padding: 12px 16px;
	border-radius: var(--radius-md);
	font-size: 14px;
	margin-bottom: 20px;
}

.message.success {
	background: var(--badge-green-bg);
	color: var(--badge-green-text);
}

.message.error {
	background: var(--badge-red-bg);
	color: var(--badge-red-text);
}

/* ------------------------------------------------------------ Profile Card */
.profile-card {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-xl);
	padding: 24px;
}

.profile-header {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--border-light);
}

.profile-icon-wrapper {
	flex-shrink: 0;
}

.profile-icon-img,
.profile-icon-initial {
	width: 80px;
	height: 80px;
	border-radius: 8px;
	object-fit: cover;
}

.profile-icon-initial {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	font-weight: 600;
	color: #fff;
}

.profile-name-area {
	flex: 1;
}

.profile-name {
	font-size: 22px;
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: 4px;
}

.profile-kana {
	font-size: 13px;
	color: var(--text-muted);
}

.profile-info {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.info-row {
	display: flex;
	align-items: center;
	gap: 16px;
}

.info-label {
	flex-shrink: 0;
	width: 100px;
	font-size: 13px;
	color: var(--text-muted);
}

.info-value {
	font-size: 14px;
	color: var(--text-primary);
}

/* ------------------------------------------------------------ Section Card */
.section-card {
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-xl);
	overflow: hidden;
}

.section-header {
	padding: 16px 24px;
	background: var(--bg-secondary);
	border-bottom: 1px solid var(--border-color);
}

.section-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--text-primary);
	margin: 0;
}

.section-body {
	padding: 24px;
}

/* ------------------------------------------------------------ Icon Upload */
.icon-upload-area {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	margin-bottom: 20px;
}

.current-icon {
	flex-shrink: 0;
}

.current-icon-img,
.current-icon-initial {
	width: 100px;
	height: 100px;
	border-radius: 8px;
	object-fit: cover;
}

.current-icon-initial {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 36px;
	font-weight: 600;
	color: #fff;
}

.upload-controls {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.upload-hint {
	font-size: 13px;
	color: var(--text-muted);
	margin: 0;
	line-height: 1.6;
}

.file-input {
	display: none;
}

/* ------------------------------------------------------------ Dropzone */
.dropzone {
	position: relative;
	width: 100%;
	min-height: 160px;
	border: 2px dashed var(--border-color);
	border-radius: var(--radius-md);
	background: var(--bg-secondary);
	transition: all var(--transition-fast);
	overflow: hidden;
}

.dropzone:hover {
	border-color: var(--border-focus);
	background: var(--bg-hover);
}

.dropzone.dragover {
	border-color: var(--accent-primary);
	background: rgba(53, 160, 244, 0.1);
}

.dropzone-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 24px;
	gap: 8px;
	height: 100%;
	min-height: 160px;
	box-sizing: border-box;
}

.dropzone-icon {
	font-size: 32px;
	opacity: 0.6;
}

.dropzone-text {
	font-size: 13px;
	color: var(--text-muted);
	text-align: center;
	margin: 0;
	line-height: 1.6;
}

.dropzone-preview {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 100%;
	height: 160px;
	background: var(--bg-tertiary);
}

.dropzone-preview img {
	max-width: 140px;
	max-height: 140px;
	object-fit: contain;
	border-radius: var(--radius-sm);
}

.preview-remove {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 28px;
	height: 28px;
	border: none;
	border-radius: 50%;
	background: var(--bg-primary);
	color: var(--text-primary);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all var(--transition-fast);
	box-shadow: var(--shadow-sm);
}

.preview-remove:hover {
	background: var(--accent-danger);
	color: #fff;
}

/* ------------------------------------------------------------ Form */
.password-form {
	max-width: 400px;
}

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

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

.form-input {
	width: 100%;
	padding: 10px 12px;
	font-size: 14px;
	color: var(--text-primary);
	background: var(--bg-input);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	transition: all var(--transition-fast);
	box-sizing: border-box;
}

.form-input:focus {
	outline: none;
	border-color: var(--accent-primary);
	background: var(--bg-tertiary);
}

.form-hint {
	font-size: 12px;
	color: var(--text-muted);
	margin: 6px 0 0;
}

.form-actions {
	display: flex;
	gap: 12px;
	padding-top: 8px;
}

/* ------------------------------------------------------------ Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 500;
	border: none;
	border-radius: var(--radius-sm);
	cursor: pointer;
	text-decoration: none;
	transition: all var(--transition-fast);
}

.btn-primary {
	background: var(--accent-primary);
	color: #fff;
}

.btn-primary:hover {
	background: var(--accent-hover);
}

.btn-secondary {
	background: var(--bg-secondary);
	color: var(--text-primary);
	border: 1px solid var(--border-color);
}

.btn-secondary:hover {
	background: var(--bg-hover);
	border-color: var(--border-focus);
}

.btn-danger {
	background: var(--badge-red-bg);
	color: var(--badge-red-text);
	border: 1px solid transparent;
}

.btn-danger:hover {
	background: rgba(235, 87, 87, 0.3);
}

/* ------------------------------------------------------------ Responsive */
@media (max-width: 600px) {
	.mypage-main {
		padding: 16px;
	}

	.profile-header {
		flex-direction: column;
		text-align: center;
	}

	.icon-upload-area {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.upload-controls {
		align-items: center;
	}

	.info-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.info-label {
		width: auto;
	}

	.form-actions {
		flex-direction: column;
	}

	.btn {
		width: 100%;
	}
}

/* ------------------------------------------------------------ User Icon (Common - for nav, etc) */
.user-icon {
	width: 32px;
	height: 32px;
	border-radius: 6px;
	object-fit: cover;
	flex-shrink: 0;
}

.user-icon-initial {
	width: 32px;
	height: 32px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	flex-shrink: 0;
}

.user-icon-sm {
	width: 24px;
	height: 24px;
	border-radius: 4px;
	font-size: 10px;
}

.user-icon-lg {
	width: 48px;
	height: 48px;
	border-radius: 8px;
	font-size: 18px;
}

/* ------------------------------------------------------------ User Cell (for lists) */
.user-cell {
	display: flex;
	align-items: center;
	gap: 12px;
}

.user-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* font-size は指定しない。裸の .user-name は view/admin.php 経由で全ページに効くため、
   ここで固定すると一覧テーブル（.data-table td = 16px）の氏名だけ小さくなる。
   大きさは置かれた場所から継承させる */
.user-name {
	font-weight: 500;
	color: var(--text-primary);
}

.user-kana {
	font-size: 12px;
	color: var(--text-muted);
}

/* ------------------------------------------------------------ Slack連携 */

.section-description {
	font-size: 13px;
	color: var(--text-muted);
	margin: 0 0 16px;
	line-height: 1.6;
}

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

.slack-form-label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: var(--text-secondary, #aaa);
	margin-bottom: 6px;
}

.slack-form-row {
	display: flex;
	gap: 8px;
	align-items: center;
}

.slack-form-input {
	flex: 1;
	max-width: 320px;
	padding: 8px 12px;
	background: var(--bg-tertiary, #252525);
	border: 1px solid var(--border-color, #333);
	border-radius: 6px;
	color: var(--text-primary, #e0e0e0);
	font-size: 14px;
	font-family: 'SF Mono', 'Menlo', monospace;
}

.slack-form-input:focus {
	outline: none;
	border-color: var(--accent-primary, #3b82f6);
}

.slack-form-message {
	margin: 8px 0 0;
	font-size: 12px;
	min-height: 16px;
}

.slack-form-message.success { color: #10b981; }
.slack-form-message.error   { color: #ef4444; }

.slack-help {
	margin-top: 12px;
	font-size: 13px;
	color: var(--text-muted, #888);
}

.slack-help summary {
	cursor: pointer;
	padding: 4px 0;
	user-select: none;
}

.slack-help summary:hover {
	color: var(--text-secondary, #aaa);
}

.slack-help-steps {
	margin: 8px 0 0 20px;
	padding: 0;
	line-height: 1.8;
}