@import "tailwindcss";

/* ===========================================
   Components
   =========================================== */

/* Server Mini Card */
.server-mini-card {
  @apply flex items-center gap-3 bg-slate-900 border border-slate-600 rounded-lg px-4 py-3 max-w-[700px] mx-auto mb-4 no-underline text-inherit transition-all;
}

.server-mini-card:hover {
  @apply border-emerald-500 shadow-md;
}

.server-mini-card__icon {
  @apply w-12 h-12 rounded-md overflow-hidden shrink-0 bg-slate-700 flex items-center justify-center;
}

.server-mini-card__icon img {
  @apply w-full h-full object-cover;
}

.server-mini-card__icon-default {
  @apply text-2xl;
}

.server-mini-card__info {
  @apply flex-1 min-w-0;
}

.server-mini-card__name {
  @apply block text-[15px] font-semibold text-slate-100 mb-0.5;
}

.server-mini-card__meta {
  @apply flex items-center gap-1.5 text-[13px] text-slate-400;
}

.server-mini-card__status-dot {
  @apply w-2 h-2 rounded-full;
}

.server-mini-card__status-dot--online {
  @apply bg-emerald-500;
}

.server-mini-card__status-dot--offline {
  @apply bg-slate-400;
}

.server-mini-card__arrow {
  @apply text-slate-400 text-lg;
}


/* ===========================================
   Static Pages
   =========================================== */

/* Static Page Layout */
.static-page {
  @apply py-12 min-h-screen;
}

.static-page__header {
  @apply mb-10 text-center;
}

.static-page__title {
  @apply text-3xl font-bold text-slate-100 mb-2;
}

.static-page__updated {
  @apply text-sm text-slate-400;
}

.static-page__description {
  @apply text-slate-300 mt-2;
}

.static-page__content {
  @apply bg-slate-800 border border-slate-700 rounded-xl p-8 max-w-4xl mx-auto;
}

.static-page__section {
  @apply mb-8 last:mb-0;
}

.static-page__section h2 {
  @apply text-xl font-bold text-slate-100 mb-4 pb-2 border-b border-slate-700;
}

.static-page__section h3 {
  @apply text-lg font-semibold text-slate-200 mt-4 mb-2;
}

.static-page__section p {
  @apply text-slate-300 leading-relaxed mb-3;
}

.static-page__section ul,
.static-page__section ol {
  @apply text-slate-300 pl-6 mb-3 space-y-1;
}

.static-page__section ul {
  @apply list-disc;
}

.static-page__section ol {
  @apply list-decimal;
}

.static-page__section a {
  @apply text-emerald-400 hover:text-emerald-300 underline;
}

.static-page__footer {
  @apply mt-8 text-center;
}

/* Contact Methods */
.contact-methods {
  @apply grid gap-6 md:grid-cols-3 mt-6;
}

.contact-method {
  @apply bg-slate-900 border border-slate-700 rounded-lg p-6 text-center break-all;
}

.contact-method__icon {
  @apply text-4xl mb-3;
}

.contact-method__title {
  @apply text-lg font-semibold text-slate-100 mb-2;
}

.contact-method__description {
  @apply text-sm text-slate-400 mb-4;
}

.contact-method__link {
  @apply inline-block text-emerald-400 hover:text-emerald-300 font-medium;
}

/* FAQ */
.faq-list {
  @apply space-y-3 mt-4 grid gap-2;
}

.faq-item {
  @apply bg-slate-900 border border-slate-700 rounded-lg overflow-hidden;
}

.faq-item__question {
  @apply px-5 py-4 cursor-pointer text-slate-100 font-medium hover:bg-slate-800 transition-colors;
}

.faq-item__answer {
  @apply px-5 pb-4 text-slate-300;
}

.faq-item__answer p {
  @apply mb-0;
}


/* External Service Table (外部送信規律) */
.external-service-table {
  @apply overflow-x-auto mt-4;
}

.external-service-table table {
  @apply w-full text-sm border-collapse;
}

.external-service-table th,
.external-service-table td {
  @apply border border-slate-600 px-3 py-2 text-left;
}

.external-service-table th {
  @apply bg-slate-700 text-slate-200 font-semibold;
}

.external-service-table td {
  @apply bg-slate-800 text-slate-300;
}

.external-service-table a {
  @apply text-emerald-400 hover:text-emerald-300;
}


/* ===========================================
   Vote Section
   =========================================== */

/* Vote Status */
.vote-status {
  @apply text-center py-3 px-4 bg-slate-700/50 rounded-lg;
}

.vote-status__message {
  @apply text-emerald-400 font-semibold text-lg mb-1;
}

.vote-status__next-time {
  @apply text-slate-400 text-sm;
}

/* Vote Notice */
.vote-notice {
  @apply text-slate-400 text-sm text-center;
}

/* Recent Voters */
.recent-voters {
  @apply mt-4 pt-4 border-t border-slate-700;
}

.recent-voters__label {
  @apply block text-slate-400 text-sm mb-2;
}

.recent-voters__avatars {
  @apply flex flex-wrap gap-1.5;
}

.recent-voters__avatar {
  @apply w-8 h-8 rounded-full overflow-hidden bg-slate-700 flex items-center justify-center cursor-pointer transition-transform hover:scale-110 hover:ring-2 hover:ring-emerald-500;
}

.recent-voters__avatar-img {
  @apply w-full h-full object-cover;
}

.recent-voters__avatar-fallback {
  @apply text-sm;
}


/* ===========================================
   Votifier Test Section
   =========================================== */

/* Votifier Test Section */
.votifier-test-section {
  @apply mt-6 pt-6 border-t border-slate-700;
}

.votifier-test-section__title {
  @apply text-lg font-semibold text-slate-100 mb-2;
}

.votifier-test-section__description {
  @apply text-slate-400 text-sm mb-4;
}

/* Votifier Test Result */
.votifier-test-result {
  @apply mt-4;
}

.votifier-test__result {
  @apply px-4 py-3 rounded-lg text-sm;
}

.votifier-test__result--success {
  @apply bg-emerald-900/50 border border-emerald-700 text-emerald-300;
}

.votifier-test__result--error {
  @apply bg-red-900/50 border border-red-700 text-red-300;
}


/* ===========================================
   Favorite Section
   =========================================== */

/* Favorite Button (for server cards) */
.favorite-btn {
  @apply w-8 h-8 flex items-center justify-center rounded-full bg-slate-700/50 border border-slate-600 text-slate-400 transition-all cursor-pointer hover:border-yellow-500 hover:text-yellow-500;
}

.favorite-btn--active {
  @apply bg-yellow-500/20 border-yellow-500 text-yellow-500;
}

.favorite-btn__icon {
  @apply text-lg leading-none;
}

/* Favorite Status (for sidebar) */
.favorite-status {
  @apply flex items-center gap-2 py-3 px-4 rounded-lg mb-3;
}

.favorite-status--active {
  @apply bg-yellow-500/20 border border-yellow-500/50;
}

.favorite-status__icon {
  @apply text-yellow-500 text-xl;
}

.favorite-status__text {
  @apply text-yellow-400 font-medium;
}

.favorite-actions {
  @apply flex flex-col gap-2 mt-3;
}

/* Favorite Badge (for detail page) */
.status-badge.status-favorite {
  @apply bg-yellow-500/20 text-yellow-400 border border-yellow-500/50;
}


/* ===========================================
   Settings Form
   =========================================== */

.settings-form__section {
  @apply mb-6;
}

.settings-form__section-title {
  @apply text-lg font-semibold text-slate-100 mb-4 pb-2 border-b border-slate-700;
}

.settings-form__item {
  @apply py-3;
}

.settings-form__toggle {
  @apply flex items-start gap-3 cursor-pointer;
}

.settings-form__checkbox {
  @apply w-5 h-5 mt-0.5 rounded border-slate-600 bg-slate-700 text-emerald-500 focus:ring-emerald-500 focus:ring-offset-slate-800;
}

.settings-form__toggle-label {
  @apply flex flex-col;
}

.settings-form__toggle-title {
  @apply text-slate-100 font-medium;
}

.settings-form__toggle-description {
  @apply text-sm text-slate-400 mt-0.5;
}

.settings-form__toggle--disabled {
  @apply opacity-50 cursor-not-allowed;
}

.settings-form__toggle--disabled .settings-form__checkbox {
  @apply cursor-not-allowed;
}

.settings-form__actions {
  @apply mt-6 pt-6 border-t border-slate-700;
}

.settings-form__section-description {
  @apply text-sm text-slate-400 mb-4;
}

.settings-form__server-list {
  @apply space-y-1;
}

.settings-form__notice {
  @apply text-sm mt-4 p-3 rounded-lg;
}

.settings-form__notice--warning {
  @apply bg-amber-900/30 text-amber-300 border border-amber-700/50;
}

.settings-form__empty-message {
  @apply text-slate-400 text-center py-6;
}

.settings-form__empty-message a {
  @apply text-emerald-400 hover:text-emerald-300 underline;
}

/* ===========================================
   Unsubscribe
   =========================================== */

.unsubscribe-card {
  @apply text-center;
}

.unsubscribe-card__message {
  @apply text-slate-200 text-lg mb-4;
}

.unsubscribe-card__note {
  @apply text-slate-400 text-sm mb-6;
}

.unsubscribe-card__form {
  @apply mb-4;
}

.unsubscribe-card__cancel {
  @apply text-sm text-slate-400;
}

.unsubscribe-complete {
  @apply py-8;
}

.unsubscribe-complete__icon {
  @apply text-5xl mb-4;
}

.unsubscribe-complete__title {
  @apply text-2xl font-bold text-slate-100 mb-4;
}

.unsubscribe-complete__message {
  @apply text-slate-400 mb-6;
}


/* ===========================================
   Settings Link Card
   =========================================== */

.settings-link-section {
  @apply mt-6 pt-6 border-t border-slate-700;
}

.settings-link-card {
  @apply flex items-center gap-3 p-4 bg-slate-800 border border-slate-700 rounded-lg text-inherit no-underline transition-all hover:border-emerald-500 hover:bg-slate-700;
}

.settings-link-icon {
  @apply text-2xl;
}

.settings-link-text {
  @apply flex flex-col flex-1;
}

.settings-link-title {
  @apply text-slate-100 font-medium;
}

.settings-link-description {
  @apply text-sm text-slate-400;
}

.settings-link-arrow {
  @apply text-slate-400;
}

/* Server Address Entry (Dual Address Display) */
.server-address-entry {
  @apply flex flex-col gap-2;
}

.server-address-entry + .server-address-entry {
  @apply mt-3;
}

.server-address-entry__label-row {
  @apply flex items-center justify-between;
}

.server-address-entry__label {
  @apply text-sm font-medium text-slate-300;
}

.server-address-entry__badge {
  @apply text-xs font-medium px-2 py-0.5 rounded-full;
}

.server-address-entry__badge--verified {
  @apply bg-emerald-900/50 text-emerald-400 border border-emerald-700/50;
}

.server-address-entry__badge--unverified {
  @apply bg-amber-900/40 text-amber-400 border border-amber-700/50 no-underline hover:bg-amber-900/60;
}

.server-address-entry__box {
  @apply flex flex-col gap-2;
}

.server-address-entry__code {
  @apply block bg-slate-800 px-3 py-2.5 rounded-lg font-mono text-sm text-slate-100 text-center break-all border border-slate-700;
}

/* Verification Card - Verified Badge */
.verification-card__verified {
  @apply flex items-center gap-3 bg-emerald-900/30 border border-emerald-700/50 rounded-lg px-4 py-3;
}

.verification-card__verified-badge {
  @apply text-emerald-400 font-semibold text-base;
}

.verification-card__verified-address {
  @apply text-slate-300 text-sm m-0;
}

/* Edition Address Group (Form) */
.edition-address-group {
  @apply mt-2 rounded-lg border border-slate-700 bg-slate-800/50 p-4 mb-3 last:mb-0 transition-colors;
}

.edition-address-group--active {
  @apply border-emerald-600/50 bg-slate-800;
}

.edition-address-group__header {
  @apply flex items-center gap-3 cursor-pointer select-none;
}

.edition-address-group__label {
  @apply text-slate-200 font-medium text-[15px];
}

.edition-address-group__input {
  @apply mt-3 pl-7;
}

/* Verification Accordion */
.verification-methods__hint {
  @apply mb-3;
}

.verification-methods__hint-text {
  @apply text-sm text-slate-400 leading-relaxed;
}

.verification-accordion {
  @apply bg-slate-800 border border-slate-700 rounded-lg overflow-hidden;
}

.verification-accordion__trigger {
  @apply flex items-center gap-2.5 px-4 py-3.5 cursor-pointer select-none list-none bg-slate-800/80 hover:bg-slate-700/60 transition-colors;
}

.verification-accordion__trigger::-webkit-details-marker {
  display: none;
}

.verification-accordion__icon {
  @apply text-lg leading-none;
}

.verification-accordion__title {
  @apply flex-1 text-[15px] font-semibold text-slate-200;
}

.verification-accordion__arrow {
  @apply text-xs text-slate-400 transition-transform duration-200;
}

.verification-accordion[open] > .verification-accordion__trigger .verification-accordion__arrow {
  @apply rotate-90;
}

.verification-accordion__content {
  @apply px-4 pb-4 pt-4 border-t border-slate-700;
}

.verification-accordion__content .method-steps {
  @apply list-decimal ml-5 text-sm text-slate-300 leading-loose;
}

/* Unverified Address Warning */
.unverified-warning {
  @apply bg-amber-900/30 border border-amber-700/50 rounded-lg px-5 py-4 mb-6;
}

.unverified-warning__title {
  @apply text-amber-300 font-semibold text-base m-0 mb-2;
}

.unverified-warning__list {
  @apply list-none m-0 p-0 flex flex-col gap-1;
}

.unverified-warning__item {
  @apply text-amber-200/80 text-sm;
}

.unverified-warning__link {
  @apply text-amber-400 underline hover:text-amber-300;
}

/* Community Post Blocked Label */
.feed-card--blocked {
  @apply opacity-50;
}

.community-post-blocked-label {
  @apply text-xs text-red-400 bg-red-950/50 border border-red-800/50 rounded px-2 py-1 mt-2;
}