/* /a_css/theme_common.css */

/* z-index レイヤー基準（livedev 共通）
 * カレンダー等の通常 UIkit モーダル(100600) ＜ ライブ詳細スライド .active(100700) ＜
 * ライブ詳細から開くモーダル(100750) ＜ PhotoSwipe(100800)
 * ライブ詳細内の「外部リンク確認」は live_detail.php で .ld-modal-above-live-slide を付与 */
:root {
  --z-local-base: 10;
  --z-sticky: 900;
  --z-page-overlay: 9999;
  --z-overlay-swiper: 100500;
  --z-overlay-uikit-modal: 100600;
  --z-overlay-swiper-artist: 100700;
  --z-overlay-modal-above-live-slide: 100750;
  --z-overlay-lightbox: 100800;
}

/* 通常の UIkit モーダル（マイカレンダー等）— ライブ詳細スライドより下 */
.uk-modal {
  z-index: var(--z-overlay-uikit-modal) !important;
}
.uk-modal-dialog {
  z-index: calc(var(--z-overlay-uikit-modal) + 1) !important;
}

/* PhotoSwipe lightbox 背景（閲覧ユーザのテーマ色 :root --color-primary） */
/* 既定 100000 だと #live-swiper-overlay（100500〜100700）より下になるため上書き */
.pswp {
  --pswp-root-z-index: var(--z-overlay-lightbox) !important;
}
.pswp__bg {
  background: var(--color-primary, rgba(0, 0, 0, 0.9)) !important;
}

/* オフキャンバス */
.uk-offcanvas-bar {
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
}

/* ボタン類は両端が丸いピル型で統一 */
.uk-button,
a.uk-button {
  border-radius: 999px !important;
}
.uk-button.bdr_rd_20 {
  border-radius: 999px !important;
}

input[type="text"],
input[type="password"],
input[type="email"],textarea{
  border-radius: 5px;
}

select{
  border-radius: 5px;
}

/* ボタン類 */

.uk-button-primary {
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
}

.btn-login:hover,
.uk-button-primary:hover {
  background-color: var(--color-primary-hover) !important;
}

.btn-register {
  background-color: #e95f9e !important;
  color: #ffffff !important;
}

.btn-register:hover {
  background-color: var(--color-accent-hover) !important;
}

/* ナビバー */
header input{
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}


/* 見出し */
h1, h2, h3, h4, h5, h6,
.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6 {
  color: var(--color-text-main) ;
}
/* ★背景設定をここに移動し、変数を使うように変更 */
.content-background {
  /* 変数が設定されていれば画像を表示、なければ背景色(bodyの色)が透けて見える */
  background-image: var(--bg-image-url);
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--color-bg-body) !important;
  color: var(--color-text-main);
}



/* iframe(動画など)の場合 */
.uk-lightbox-iframe {
  border-radius: 15px !important;
}

/* SNSアイコンボタンの微調整 */
.sns-icon-btn {
  width: 30px;
  height: 30px;
  margin-right: 5px;
  background: var(--color-surface, #f8f8f8);
  color: var(--color-text-secondary, #555);
  border: 1px solid var(--color-badge-border, #ddd);
  transition: 0.3s;
}

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

.uk-button-default {
  background-color: var(--color-bg-nav) !important;
  color: var(--color-text-main, #333) !important;
  border-color: var(--color-border, #e5e5e5) !important;
}
.uk-button-default:hover {
  background-color: var(--color-surface, #f5f5f5) !important;
  color: var(--color-text-main, #333) !important;
  border-color: var(--color-border, #ccc) !important;
}

.uk-button-secondary {
  background-color: var(--color-text-main, #222) !important;
  color: var(--color-bg-body, #fff) !important;
}
.uk-button-secondary:hover {
  background-color: var(--color-text-secondary, #444) !important;
}
/* 新規登録ボタンのみピンク背景に（uk-button-secondary の #222 を上書き） */
.uk-button-secondary.btn-register {
  background-color: #e95f9e !important;
  color: #ffffff !important;
}
.uk-button-secondary.btn-register:hover {
  background-color: var(--color-accent-hover) !important;
  color: #ffffff !important;
}

/* ── UIkit カード・セクション テーマ対応 ── */
.uk-card-default {
  background-color: var(--color-card-bg, #fff) !important;
  color: var(--color-text-main, #333) !important;
  border-color: var(--color-card-border, rgba(0,0,0,0.05)) !important;
  border-radius: var(--radius-card, 10px) !important;
}
.uk-card-default .uk-card-title {
  color: var(--color-text-main, #333) !important;
}

/* カード系要素にテーマの角丸を適用 */
.uk-card,
.gallery-item,
.gallery-item img.main-thumb,
.gallery-overlay,
.live-rich-item,
.admin-glass-card,
.content-inner-wrapper,
.uk-modal-dialog,
.welcome-step,
.follow-user-card,
.event-detail-card,
.user-profile-card,
.live-card,
.event-card,
.date-box,
.info-card,
.flyer-box img,
.video-box,
.profile-edit-container,
.edit-section,
.theme-preview-box,
.fc .fc-day-today .fc-daygrid-day-frame,
.sheet-modal .uk-modal-dialog,
.liked-event-wrapper,
.user-card,
.notification-card,
.search-result-card,
.calendar-event-card,
.detail-card,
.artist-card {
  border-radius: var(--radius-card, 10px) !important;
}

/* Notification は専用の角丸を使用 */
.uk-notification-message {
  border-radius: var(--radius-card, 12px) !important;
}

/* FullCalendar イベント */
.fc-event,
.fc-daygrid-event,
.fc-timegrid-event {
  border-radius: calc(var(--radius-card, 10px) / 2) !important;
}

/* 小さなバッジ系（4px固定） */
.badge-genre,
.badge-status,
.event-type-badge,
.badge-draft,
.booking-badge,
.genre-tag,
.status-badge {
  border-radius: 4px !important;
}

/* ボタンは除外（5px or pill のまま維持） */

.uk-background-muted {
  background-color: var(--color-surface, #f8f8f8) !important;
}

.uk-section-muted {
  background-color: var(--color-surface, #f8f8f8) !important;
}

.uk-placeholder {
  background: var(--color-surface, #fafafa) !important;
  border-color: var(--color-border, #e5e5e5) !important;
  color: var(--color-text-muted, #999) !important;
}

/* ── UIkit モーダル テーマ対応 ── */
.uk-modal-dialog {
  background: var(--color-card-bg, #fff) !important;
  color: var(--color-text-main, #333) !important;
}
.uk-modal-header {
  background: var(--color-surface, #fafafa) !important;
  border-bottom-color: var(--color-border, #e5e5e5) !important;
}
.uk-modal-footer {
  background: var(--color-surface, #fafafa) !important;
  border-top-color: var(--color-border, #e5e5e5) !important;
}
.uk-modal-title {
  color: var(--color-text-main, #333) !important;
}
.uk-modal-close-default {
  color: var(--color-text-muted, #999) !important;
}

/* ── UIkit フォーム テーマ対応 ── */
.uk-input, .uk-select, .uk-textarea {
  background-color: var(--color-surface-alt, #fcfcfc) !important;
  color: var(--color-text-main, #333) !important;
  border-color: var(--color-border, #e5e5e5) !important;
  border-radius: var(--radius-card, 12px) !important;
}
.uk-input:focus, .uk-select:focus, .uk-textarea:focus {
  background-color: var(--color-card-bg, #fff) !important;
  color: var(--color-text-main, #333) !important;
  border-color: var(--color-primary) !important;
}
.uk-input::placeholder, .uk-textarea::placeholder {
  color: var(--color-text-faint, #aaa) !important;
}
.uk-form-label {
  color: var(--color-text-secondary, #555) !important;
}

/* ── UIkit テキスト テーマ対応 ── */
.uk-text-muted {
  color: var(--color-text-muted, #999) !important;
}
.uk-text-meta {
  color: var(--color-text-muted, #999) !important;
}

/* ── UIkit リスト・テーブル テーマ対応 ── */
.uk-table th {
  color: var(--color-text-main, #333) !important;
}
.uk-table td {
  border-top-color: var(--color-border, #e5e5e5) !important;
}

/* ── UIkit ドロップダウン テーマ対応 ── */
.uk-dropdown {
  background: var(--color-card-bg, #fff) !important;
  color: var(--color-text-main, #333) !important;
  box-shadow: 0 5px 25px var(--color-card-shadow, rgba(0,0,0,0.1)) !important;
}
.uk-dropdown-nav > li > a {
  color: var(--color-text-main, #333) !important;
}
.uk-dropdown-nav > li > a:hover {
  color: var(--color-primary) !important;
}

.uk-navbar-item{
min-height: 60px !important;
}

.uk-modal-title{
  font-size: 20px !important;
  font-weight: bold !important;
}

/* ========================================
   UIkit Notification カスタムデザイン
   ======================================== */

/* 基本スタイル */
.uk-notification-message {
  padding: 20px 24px !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid transparent !important;
  min-width: 280px;
  max-width: calc(100vw - 20px);
  box-sizing: border-box;
  animation: slideInDown 0.3s ease-out !important;
}

@keyframes slideInDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 閉じるボタン */
.uk-notification-message .uk-notification-close {
  top: 16px !important;
  right: 16px !important;
  opacity: 0.6 !important;
  transition: opacity 0.2s !important;
}

.uk-notification-message .uk-notification-close:hover {
  opacity: 1 !important;
}

/* Success (成功) */
.uk-notification-message-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  border-color: #34d399 !important;
}

.uk-notification-message-success::before {
  content: "✓";
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  margin-right: 12px;
  font-weight: bold;
  font-size: 16px;
  vertical-align: middle;
}

/* Warning (警告) */
.uk-notification-message-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
  border-color: #fbbf24 !important;
}

.uk-notification-message-warning::before {
  content: "⚠";
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  margin-right: 12px;
  font-weight: bold;
  font-size: 16px;
  vertical-align: middle;
}

/* Danger (エラー) */
.uk-notification-message-danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: #ffffff !important;
  border-color: #f87171 !important;
}

.uk-notification-message-danger::before {
  content: "✕";
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  margin-right: 12px;
  font-weight: bold;
  font-size: 16px;
  vertical-align: middle;
}

/* Primary (通常) */
.uk-notification-message-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%) !important;
  color: #ffffff !important;
  border-color: var(--color-primary) !important;
}

.uk-notification-message-primary::before {
  content: "ℹ";
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  margin-right: 12px;
  font-weight: bold;
  font-size: 16px;
  vertical-align: middle;
}

/* モバイル対応 */
@media (max-width: 639px) {
  .uk-notification {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
  }
  .uk-notification-message {
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: 14px !important;
    padding: 16px 20px !important;
    box-sizing: border-box;
  }
}

/* ========================================
   ライブ詳細スライド（サイト共通・my_livesプレビューと同じ出方）
   ======================================== */
/* オーバーレイはボトムナビより前面。.active 時は 100700 でカレンダー用 UIkit(100600) より手前 */
#detail-overlay,
#live-swiper-overlay {
  z-index: var(--z-overlay-swiper) !important;
}
#live-swiper-overlay.active {
  z-index: var(--z-overlay-swiper-artist) !important;
}

/* スライド詳細パネル: 親のみ左上角丸 + overflow でクリップ（白カードとヘッダーの二重角丸で白フチが出るのを防ぐ） */
#live-swiper-overlay .content-inner-wrapper {
  border-radius: 15px 0 0 0 !important;
  overflow: hidden;
}
#live-swiper-overlay .detail-header {
  border-radius: 0 !important;
}

/* embed 用フルスクリーンオーバーレイ（parts_calendar 等）: 同様に外枠で角丸を一括 */
#detail-overlay {
  border-radius: 15px 0 0 0;
  overflow-x: hidden;
}
#detail-overlay .detail-header {
  border-radius: 0 !important;
}

/* ========================================
   Capacitor アプリ表示調整
   全体バウンス防止 + セーフエリア対応
   ======================================== */
html.is-app,
body.is-app,
.is-app html,
.is-app body {
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior-y: none;
}

body.is-app,
.is-app body {
  display: flex;
  flex-direction: column;
}

body.is-app main,
body.is-app .content-wrapper,
.is-app main,
.is-app .content-wrapper {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body.is-app .site-header,
.is-app .site-header {
  padding-top: env(safe-area-inset-top);
}

body.is-app .mobile-nav,
.is-app .mobile-nav {
  padding-bottom: env(safe-area-inset-bottom);
}