/* ===================================
   Dashboard Premium Styles - Sophisticated Edition
   Professional Enterprise Design with Bootstrap 5
   =================================== */

/* ===================================
   Color Palette - Sophisticated & Professional

   Primary Grays: #1e293b, #334155, #475569
   Accent Slate: #64748b, #94a3b8, #cbd5e1
   Background: #f8fafc, #f1f5f9
   Professional Blue: #1e40af, #2563eb
   Muted Emerald: #047857, #059669
   =================================== */

/* ===================================
   Border Radius Utilities - Unified Standards
   統一基準:
   - カード・セクション: 12px (rounded-3)
   - フォームコントロール: 8px (rounded-2)
   - モーダル: 16px (rounded-4)
   - ボタン: 24px (rounded-pill)
   =================================== */

.rounded-2 {
    border-radius: 8px !important;
}

.rounded-3 {
    border-radius: 12px !important;
}

.rounded-4 {
    border-radius: 16px !important;
}

/* ===================================
   Stats Cards - Sophisticated Unified Design
   =================================== */

.stats-card {
    position: relative;
    border-radius: 16px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e2e8f0 !important;
}

.stats-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(30, 41, 59, 0.08) !important;
    border-color: #cbd5e1 !important;
}

/* Stats Card Icon Container - Unified Elegant Gray */
.stats-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    background: #f8fafc;
    color: #475569;
}

.stats-card-icon i {
    font-size: 28px;
    transition: transform 0.3s ease;
}

.stats-card:hover .stats-card-icon {
    background: #f1f5f9;
    color: #334155;
}

.stats-card:hover .stats-card-icon i {
    transform: scale(1.05);
}

/* Stats Card Footer */
.stats-card-footer {
    display: flex;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}

/* 評定ラジオボタン */
.entry-grade-radio-group {
    display: flex;
    gap: 4px;
}

.entry-grade-radio {
    cursor: pointer;
}

.entry-grade-radio input[type="radio"] {
    display: none;
}

.entry-grade-radio span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1.5px solid #dee2e6;
    font-size: 0.95rem;
    font-weight: 500;
    color: #495057;
    background-color: #FFFFFF;
    transition: all 0.15s ease;
}

.entry-grade-radio input[type="radio"]:checked + span {
    border-color: #1E6F5C;
    background-color: #E6F5F1;
    color: #1E6F5C;
    font-weight: 600;
}

.entry-grade-radio span:hover {
    border-color: #1E6F5C;
}

/* ===================================
   Quick Action Cards - Professional Unified Design
   =================================== */

.quick-action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 20px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #ffffff;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    min-height: 160px;
}

.quick-action-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.02) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.quick-action-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(30, 41, 59, 0.1);
    text-decoration: none;
    border-color: #cbd5e1;
    background: #fafbfc;
}

.quick-action-card:hover::before {
    opacity: 1;
}

/* Quick Action Card Icon - Unified Slate Design */
.quick-action-card-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    transition: all 0.3s ease;
    background: #f8fafc;
    color: #475569;
}

.quick-action-card-icon i {
    font-size: 32px;
    transition: transform 0.3s ease;
}

.quick-action-card:hover .quick-action-card-icon {
    transform: scale(1.05);
    background: #f1f5f9;
    color: #334155;
}

.quick-action-card:hover .quick-action-card-icon i {
    transform: scale(1.05);
}

/* Quick Action Card Text */
.quick-action-card-text {
    font-size: 15px;
    font-weight: 600;
    color: #334155;
    letter-spacing: -0.2px;
    margin-bottom: 8px;
    transition: color 0.3s ease;
}

.quick-action-card:hover .quick-action-card-text {
    color: #1e293b;
}

/* Quick Action Card Arrow */
.quick-action-card-arrow {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateX(-8px);
    transition: all 0.3s ease;
    background: rgba(71, 85, 105, 0.1);
    color: #475569;
}

.quick-action-card-arrow i {
    font-size: 20px;
}

.quick-action-card:hover .quick-action-card-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* ===================================
   Soft Primary Button - Professional Slate Design
   =================================== */

.btn-soft-primary {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-soft-primary:hover {
    background-color: #334155;
    border-color: #334155;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(51, 65, 85, 0.2);
    transform: translateY(-2px);
}

.btn-soft-primary:focus,
.btn-soft-primary:active {
    background-color: #334155;
    border-color: #334155;
    color: #ffffff;
    box-shadow: 0 0 0 0.2rem rgba(51, 65, 85, 0.25);
}

/* ===================================
   Orange Accent Button - Premium Accent Design
   =================================== */

.btn-orange-accent {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    border: 1px solid #f97316;
    color: #ffffff;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.2);
}

.btn-orange-accent:hover {
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
    border-color: #ea580c;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
    transform: translateY(-2px);
}

.btn-orange-accent:focus,
.btn-orange-accent:active {
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
    border-color: #ea580c;
    color: #ffffff;
    box-shadow: 0 0 0 0.2rem rgba(249, 115, 22, 0.25);
}

.btn-orange-accent:active {
    transform: translateY(0);
}

/* ===================================
   Activity Timeline - Simple List Design
   Clean chronological list with no fancy elements
   =================================== */

.activity-timeline {
    position: relative;
}

/* ===================================
   Activity Item - Simple Horizontal Row
   =================================== */

.activity-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #e2e8f0;
    transition: background-color 0.2s ease;
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-item:hover {
    background-color: #fafbfc;
}

/* ===================================
   Time Display - Fixed Width, No Overlap
   =================================== */

.activity-time {
    flex-shrink: 0;
    width: 130px;
    font-size: 13px;
    font-weight: 400;
    color: #64748b;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

/* ===================================
   Activity Icon - Small Simple Circle
   =================================== */

.activity-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    color: #64748b;
}

.activity-icon i {
    font-size: 16px;
}

/* ===================================
   Activity Text - Main Content
   =================================== */

.activity-text {
    flex-grow: 1;
    font-size: 14px;
    font-weight: 400;
    color: #334155;
    line-height: 1.5;
}

/* ===================================
   Empty State (Optional Enhancement)
   =================================== */

.activity-timeline-empty {
    text-align: center;
    padding: 48px 24px;
    color: #94a3b8;
}

.activity-timeline-empty i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

/* ===================================
   Hints Card - Refined Neutral Background
   =================================== */

.hints-card {
    background: #fafbfc !important;
}

.hint-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 20px;
    box-shadow: 0 2px 6px rgba(30, 41, 59, 0.04);
    border: 1px solid #f1f5f9;
}

/* ===================================
   Responsive Adjustments
   =================================== */

@media (max-width: 991.98px) {
    .stats-card {
        margin-bottom: 16px;
    }

    .quick-action-card {
        min-height: 140px;
        padding: 24px 16px;
    }

    .quick-action-card-icon {
        width: 56px;
        height: 56px;
        margin-bottom: 12px;
    }

    .quick-action-card-icon i {
        font-size: 28px;
    }
}

@media (max-width: 767.98px) {
    .stats-card-icon {
        width: 48px;
        height: 48px;
    }

    .stats-card-icon i {
        font-size: 24px;
    }

    /* Mobile Timeline Adjustments - Simple List */
    .activity-item {
        gap: 10px;
        padding: 10px 0;
    }

    .activity-time {
        width: 110px;
        font-size: 12px;
    }

    .activity-icon {
        width: 28px;
        height: 28px;
    }

    .activity-icon i {
        font-size: 14px;
    }

    .activity-text {
        font-size: 13px;
    }
}

/* ===================================
   Accessibility Enhancements
   =================================== */

/* Focus states for keyboard navigation */
.quick-action-card:focus,
.quick-action-card:focus-visible {
    outline: 3px solid rgba(51, 65, 85, 0.4);
    outline-offset: 2px;
}

.btn-soft-primary:focus-visible {
    outline: 3px solid rgba(51, 65, 85, 0.4);
    outline-offset: 2px;
}

.btn-orange-accent:focus-visible {
    outline: 3px solid rgba(249, 115, 22, 0.4);
    outline-offset: 2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .stats-card,
    .quick-action-card,
    .activity-item,
    .btn-soft-primary,
    .btn-orange-accent,
    .quick-action-card-icon,
    .quick-action-card-arrow {
        transition: none;
    }

    .stats-card:hover,
    .quick-action-card:hover {
        transform: none;
    }
}

/* ===================================
   Performance Optimizations
   =================================== */

/* GPU acceleration for smooth animations */
.stats-card,
.quick-action-card {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Prevent layout shifts */
.stats-card-icon,
.quick-action-card-icon,
.activity-icon {
    contain: layout;
}

/* ===================================
   Page Title Component Styles
   =================================== */

.page-title-heading {
    font-size: 28px;
    font-weight: bold;
    letter-spacing: -0.5px;
    margin-bottom: 0;
}

.breadcrumb-item-muted {
    color: #8e8e93;
    font-weight: 500;
}

/* ===================================
   Action Bar Component Styles
   =================================== */

/* ===================================
   Dashboard Mockup - Apple-Inspired Design
   Admin Portal Color: Blue (#007AFF, #0051D5)
   完全なレスポンシブ対応、モバイルファースト設計
   =================================== */

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

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #f5f5f7;
    color: #1d1d1f;
}

/* ===================================
   Dashboard Wrapper - Flexboxレイアウト
   =================================== */

.dashboard-wrapper {
    display: flex;
    min-height: 100vh;
    position: relative;
}

/* オーバーレイ（モバイルでサイドバー開いた時） */
.dashboard-wrapper--sidebar-open::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ===================================
   Sidebar - ナビゲーションサイドバー
   =================================== */

.dashboard-sidebar {
    width: 280px;
    background: #ffffff;
    border-right: 1px solid #e5e5ea;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 999;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* サイドバーヘッダー */
.dashboard-sidebar__header {
    padding: 24px 20px;
    border-bottom: 1px solid #f5f5f7;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ロゴ - 管理者用Blue */
.dashboard-sidebar__logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.2);
}

.dashboard-sidebar__logo i {
    font-size: 24px;
}

/* ブランド */
.dashboard-sidebar__brand {
    flex: 1;
}

.dashboard-sidebar__brand-title {
    font-size: 18px;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.dashboard-sidebar__brand-subtitle {
    font-size: 13px;
    color: #86868b;
    margin: 0;
    line-height: 1.3;
}

/* 閉じるボタン（モバイルのみ表示） */
.dashboard-sidebar__close {
    display: none;
    width: 32px;
    height: 32px;
    border: none;
    background: #f5f5f7;
    border-radius: 8px;
    color: #86868b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dashboard-sidebar__close:hover {
    background: #e5e5ea;
    color: #1d1d1f;
}

.dashboard-sidebar__close i {
    font-size: 20px;
}

/* サイドバーナビゲーション */
.dashboard-sidebar__nav {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.dashboard-sidebar__menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dashboard-sidebar__menu-item {
    margin-bottom: 4px;
}

/* メニューリンク */
.dashboard-sidebar__menu-link {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-radius: 12px;
    color: #1d1d1f;
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
}

.dashboard-sidebar__menu-link:hover {
    background: #f5f5f7;
    color: #007AFF;
}

/* アクティブ状態 */
.dashboard-sidebar__menu-item--active .dashboard-sidebar__menu-link {
    background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
}

.dashboard-sidebar__menu-item--active .dashboard-sidebar__menu-link:hover {
    background: linear-gradient(135deg, #0051D5 0%, #003DA5 100%);
    color: #ffffff;
}

/* メニューアイコン */
.dashboard-sidebar__menu-icon {
    font-size: 20px;
    width: 24px;
    margin-right: 12px;
    flex-shrink: 0;
}

/* メニューテキスト */
.dashboard-sidebar__menu-text {
    font-size: 15px;
    font-weight: 500;
    flex: 1;
}

/* バッジ */
.dashboard-sidebar__badge {
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 8px;
}

.dashboard-sidebar__badge--info {
    background: #e5f1ff;
    color: #007AFF;
}

/* セクション区切り */
.dashboard-sidebar__divider {
    margin: 16px 0 8px;
    padding: 0 16px;
}

.dashboard-sidebar__divider-text {
    font-size: 12px;
    font-weight: 600;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* サイドバーフッター */
.dashboard-sidebar__footer {
    padding: 16px;
    border-top: 1px solid #f5f5f7;
}

/* ユーザープロフィール */
.dashboard-sidebar__user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f5f5f7;
    border-radius: 12px;
}

.dashboard-sidebar__user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dashboard-sidebar__user-avatar i {
    font-size: 20px;
}

.dashboard-sidebar__user-info {
    flex: 1;
    min-width: 0;
}

.dashboard-sidebar__user-name {
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-sidebar__user-email {
    font-size: 12px;
    color: #86868b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-sidebar__user-menu {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: #86868b;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.dashboard-sidebar__user-menu:hover {
    background: #e5e5ea;
    color: #1d1d1f;
}

.dashboard-sidebar__user-menu i {
    font-size: 20px;
}

/* ドロップダウンメニュー */
.dashboard-sidebar__dropdown {
    border: 1px solid #e5e5ea;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 8px;
}

.dashboard-sidebar__dropdown .dropdown-item {
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.dashboard-sidebar__dropdown .dropdown-item:hover {
    background: #f5f5f7;
}

/* ===================================
   Main Content Area - メインコンテンツ
   =================================== */

.dashboard-main {
    flex: 1;
    margin-left: 280px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ===================================
   Header - トップバー
   =================================== */

.dashboard-header {
    background: #ffffff;
    border-bottom: 1px solid #e5e5ea;
    padding: 16px 32px;
    display: flex;
    align-items: center;
    gap: 24px;
    position: sticky;
    top: 0;
    z-index: 100;
}

/* メニューボタン（モバイルのみ表示） */
.dashboard-header__menu-btn {
    display: none;
    width: 40px;
    height: 40px;
    border: none;
    background: #f5f5f7;
    border-radius: 8px;
    color: #1d1d1f;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dashboard-header__menu-btn:hover {
    background: #e5e5ea;
}

.dashboard-header__menu-btn i {
    font-size: 24px;
}

/* ブレッドクラム */
.dashboard-header__breadcrumb {
    flex: 1;
}

.dashboard-header__breadcrumb .breadcrumb {
    margin: 0;
    background: transparent;
    padding: 0;
}

.dashboard-header__breadcrumb .breadcrumb-item {
    font-size: 14px;
    font-weight: 500;
    color: #86868b;
}

.dashboard-header__breadcrumb .breadcrumb-item.active {
    color: #1d1d1f;
}

/* ユーザードロップダウン */
.dashboard-header__user {
    display: flex;
    align-items: center;
}

.dashboard-header__user-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid #e5e5ea;
    border-radius: 24px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dashboard-header__user-btn:hover {
    background: #f5f5f7;
    border-color: #d2d2d7;
}

.dashboard-header__user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard-header__user-avatar i {
    font-size: 16px;
}

.dashboard-header__user-name {
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
}

.dashboard-header__user-btn i.bx-chevron-down {
    font-size: 16px;
    color: #86868b;
}

/* ヘッダードロップダウン */
.dashboard-header__dropdown {
    border: 1px solid #e5e5ea;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 8px;
    margin-top: 8px;
}

.dashboard-header__dropdown .dropdown-item {
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.dashboard-header__dropdown .dropdown-item:hover {
    background: #f5f5f7;
}

/* ===================================
   Dashboard Content - コンテンツエリア
   =================================== */

.dashboard-content {
    flex: 1;
    padding: 32px;
}

/* ===================================
   Page Title - ページタイトル
   =================================== */

.dashboard-page-title {
    margin-bottom: 32px;
}

.dashboard-page-title__text {
    font-size: 32px;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
}

.dashboard-page-title__subtitle {
    font-size: 15px;
    color: #86868b;
    margin: 0;
    line-height: 1.5;
}

/* ===================================
   Summary Cards - サマリーカード
   =================================== */

.dashboard-summary-card {
    background: #ffffff;
    border: 1px solid #e5e5ea;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
}

.dashboard-summary-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    border-color: #d2d2d7;
}

.dashboard-summary-card__body {
    padding: 24px;
}

.dashboard-summary-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
}

.dashboard-summary-card__info {
    flex: 1;
}

.dashboard-summary-card__label {
    font-size: 13px;
    font-weight: 600;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 12px 0;
}

.dashboard-summary-card__value {
    font-size: 36px;
    font-weight: 700;
    color: #1d1d1f;
    line-height: 1;
    letter-spacing: -1px;
}

/* カードアイコン - Admin Blue統一 */
.dashboard-summary-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.dashboard-summary-card__icon--blue {
    background: #e5f1ff;
    color: #007AFF;
}

.dashboard-summary-card__icon i {
    font-size: 28px;
}

.dashboard-summary-card:hover .dashboard-summary-card__icon {
    transform: scale(1.05);
}

/* カードフッター */
.dashboard-summary-card__footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid #f5f5f7;
}

.dashboard-summary-card__badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.dashboard-summary-card__badge--success {
    background: #e8f5e9;
    color: #34C759;
}

.dashboard-summary-card__badge--warning {
    background: #fff4e6;
    color: #ff9500;
}

.dashboard-summary-card__badge--info {
    background: #e5f1ff;
    color: #007AFF;
}

.dashboard-summary-card__badge i {
    font-size: 14px;
}

.dashboard-summary-card__footer-text {
    font-size: 13px;
    color: #86868b;
}

/* ===================================
   Dashboard Card - 汎用カード
   =================================== */

.dashboard-card {
    background: #ffffff;
    border: 1px solid #e5e5ea;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.dashboard-card__header {
    padding: 24px 24px 20px;
    border-bottom: 1px solid #f5f5f7;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dashboard-card__title {
    font-size: 20px;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0;
    letter-spacing: -0.3px;
}

.dashboard-card__link {
    font-size: 14px;
    font-weight: 600;
    color: #007AFF;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}

.dashboard-card__link:hover {
    color: #0051D5;
}

.dashboard-card__link i {
    font-size: 16px;
}

.dashboard-card__body {
    padding: 24px;
    flex: 1;
}

/* ===================================
   Activity Table - アクティビティテーブル
   =================================== */

.dashboard-activity-table {
    overflow-x: auto;
}

.dashboard-activity-table table {
    width: 100%;
    margin: 0;
}

.dashboard-activity-table thead th {
    font-size: 13px;
    font-weight: 600;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 16px;
    border-bottom: 2px solid #f5f5f7;
    white-space: nowrap;
}

.dashboard-activity-table tbody td {
    font-size: 14px;
    color: #1d1d1f;
    padding: 16px;
    border-bottom: 1px solid #f5f5f7;
    vertical-align: middle;
}

.dashboard-activity-table tbody tr:last-child td {
    border-bottom: none;
}

.dashboard-activity-table tbody tr:hover {
    background: #fafbfc;
}

/* イベント表示 */
.dashboard-activity-table__event {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dashboard-activity-table__icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dashboard-activity-table__icon--create {
    background: #e8f5e9;
    color: #34C759;
}

.dashboard-activity-table__icon--update {
    background: #e5f1ff;
    color: #007AFF;
}

.dashboard-activity-table__icon--login {
    background: #f5f5f7;
    color: #86868b;
}

.dashboard-activity-table__icon--invite {
    background: #fff4e6;
    color: #ff9500;
}

.dashboard-activity-table__icon--delete {
    background: #ffebee;
    color: #ff3b30;
}

.dashboard-activity-table__icon i {
    font-size: 16px;
}

.dashboard-activity-table__time {
    font-size: 13px;
    color: #86868b;
    white-space: nowrap;
}

/* ===================================
   Quick Actions - クイックアクション
   =================================== */

.dashboard-quick-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dashboard-quick-action {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #fafbfc;
    border: 1px solid #f5f5f7;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.dashboard-quick-action:hover {
    background: #ffffff;
    border-color: #e5e5ea;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transform: translateX(4px);
}

.dashboard-quick-action__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.dashboard-quick-action__icon--primary {
    background: #e5f1ff;
    color: #007AFF;
}

.dashboard-quick-action__icon--secondary {
    background: #f5f5f7;
    color: #86868b;
}

.dashboard-quick-action__icon--tertiary {
    background: #e8f5e9;
    color: #34C759;
}

.dashboard-quick-action__icon--warning {
    background: #fff4e6;
    color: #ff9500;
}

.dashboard-quick-action__icon i {
    font-size: 24px;
}

.dashboard-quick-action:hover .dashboard-quick-action__icon {
    transform: scale(1.05);
}

.dashboard-quick-action__content {
    flex: 1;
}

.dashboard-quick-action__title {
    font-size: 15px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0 0 4px 0;
}

.dashboard-quick-action__description {
    font-size: 13px;
    color: #86868b;
    margin: 0;
}

.dashboard-quick-action__arrow {
    font-size: 20px;
    color: #c6c6c8;
    transition: all 0.3s ease;
}

.dashboard-quick-action:hover .dashboard-quick-action__arrow {
    color: #007AFF;
    transform: translateX(4px);
}

/* ===================================
   Mockup Notice - モックアップ通知
   =================================== */

.dashboard-mockup-notice {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
}

.dashboard-mockup-notice__content {
    background: rgba(29, 29, 31, 0.95);
    backdrop-filter: blur(20px);
    color: #ffffff;
    padding: 12px 20px;
    border-radius: 24px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.dashboard-mockup-notice__content i {
    font-size: 16px;
    color: #007AFF;
}

/* ===================================
   Responsive Design - レスポンシブ対応
   =================================== */

/* タブレット（992px以下） */
@media (max-width: 991.98px) {
    /* サイドバーを左から外に隠す */
    .dashboard-sidebar {
        transform: translateX(-100%);
    }

    /* サイドバーが開いている時 */
    .dashboard-sidebar--open {
        transform: translateX(0);
    }

    /* メインコンテンツをフル幅に */
    .dashboard-main {
        margin-left: 0;
    }

    /* メニューボタンを表示 */
    .dashboard-header__menu-btn {
        display: flex;
    }

    /* サイドバーの閉じるボタンを表示 */
    .dashboard-sidebar__close {
        display: flex;
    }

    /* ヘッダーのユーザー名を非表示 */
    .dashboard-header__user-name {
        display: none;
    }

    /* コンテンツパディングを調整 */
    .dashboard-content {
        padding: 24px;
    }

    /* ページタイトルサイズ調整 */
    .dashboard-page-title__text {
        font-size: 28px;
    }

    /* サマリーカードの値サイズ調整 */
    .dashboard-summary-card__value {
        font-size: 32px;
    }
}

/* モバイル（768px以下） */
@media (max-width: 767.98px) {
    /* ヘッダーパディング調整 */
    .dashboard-header {
        padding: 12px 16px;
    }

    /* コンテンツパディング調整 */
    .dashboard-content {
        padding: 16px;
    }

    /* ページタイトル調整 */
    .dashboard-page-title {
        margin-bottom: 24px;
    }

    .dashboard-page-title__text {
        font-size: 24px;
    }

    .dashboard-page-title__subtitle {
        font-size: 14px;
    }

    /* サマリーカード調整 */
    .dashboard-summary-card__body {
        padding: 20px;
    }

    .dashboard-summary-card__value {
        font-size: 28px;
    }

    .dashboard-summary-card__icon {
        width: 48px;
        height: 48px;
    }

    .dashboard-summary-card__icon i {
        font-size: 24px;
    }

    /* カードタイトル調整 */
    .dashboard-card__title {
        font-size: 18px;
    }

    .dashboard-card__header,
    .dashboard-card__body {
        padding: 20px;
    }

    /* テーブル調整 */
    .dashboard-activity-table table {
        font-size: 13px;
    }

    .dashboard-activity-table thead th,
    .dashboard-activity-table tbody td {
        padding: 12px 8px;
    }

    /* クイックアクション調整 */
    .dashboard-quick-action {
        padding: 14px;
    }

    .dashboard-quick-action__icon {
        width: 40px;
        height: 40px;
    }

    .dashboard-quick-action__icon i {
        font-size: 20px;
    }

    .dashboard-quick-action__title {
        font-size: 14px;
    }

    .dashboard-quick-action__description {
        font-size: 12px;
    }

    /* モックアップ通知調整 */
    .dashboard-mockup-notice {
        bottom: 16px;
        right: 16px;
        left: 16px;
    }

    .dashboard-mockup-notice__content {
        justify-content: center;
    }
}

/* 小型モバイル（576px以下） */
@media (max-width: 575.98px) {
    /* サイドバー幅調整 */
    .dashboard-sidebar {
        width: 280px;
    }

    /* ブレッドクラムを非表示 */
    .dashboard-header__breadcrumb {
        display: none;
    }

    /* ヘッダーを簡潔に */
    .dashboard-header__user-btn {
        padding: 8px;
        border-radius: 50%;
        border: none;
    }

    .dashboard-header__user-btn i.bx-chevron-down {
        display: none;
    }

    /* テーブルを2列レイアウトに */
    .dashboard-activity-table tbody td:nth-child(3),
    .dashboard-activity-table thead th:nth-child(3) {
        display: none;
    }
}

/* ===================================
   Accessibility - アクセシビリティ
   =================================== */

/* フォーカス表示 */
.dashboard-sidebar__menu-link:focus-visible,
.dashboard-header__user-btn:focus-visible,
.dashboard-quick-action:focus-visible,
.dashboard-card__link:focus-visible {
    outline: 2px solid #007AFF;
    outline-offset: 2px;
}

/* 縮小モーション対応 */
@media (prefers-reduced-motion: reduce) {
    .dashboard-sidebar,
    .dashboard-summary-card,
    .dashboard-quick-action,
    .dashboard-activity-table tbody tr,
    .dashboard-sidebar__menu-link,
    .dashboard-header__user-btn,
    .dashboard-quick-action__icon,
    .dashboard-quick-action__arrow {
        transition: none !important;
        animation: none !important;
    }

    .dashboard-summary-card:hover,
    .dashboard-quick-action:hover {
        transform: none !important;
    }
}

.action-bar-counter {
    font-size: 14px;
    color: #6c757d;
}

/* ===================================
   Data Table Component Styles
   =================================== */

.table-data {
    font-size: 14px;
}

.table-data-header {
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
}

.table-data-th {
    padding: 12px 16px;
    font-weight: 600;
    color: #475569;
    font-size: 13px;
    letter-spacing: 0.3px;
}

.table-data-body {
    border-top: none;
}

.table-data-body tr {
    border-bottom: 1px solid #f1f5f9;
}

/* ===================================
   Table Loading Component Styles
   =================================== */

.table-loading-row {
    border-bottom: 1px solid #f1f5f9;
}

.table-loading-cell {
    padding: 32px 16px;
    text-align: center;
    color: #6c757d;
}

/* ===================================
   Button Component Styles
   =================================== */

.btn-outline-muted {
    border-color: #e2e8f0;
    color: #64748b;
    font-size: 13px;
}

.btn-outline-muted:hover {
    border-color: #cbd5e1;
    background-color: #f8fafc;
    color: #475569;
}

/* ===================================
   2FA Screens - Apple Design Philosophy
   Minimalist, Clean, Sophisticated
   =================================== */

/* 2FA Setup Card */
.twofa-setup-card,
.twofa-verify-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    background: #ffffff;
    transition: all 0.3s ease;
}

/* Header Icon */
.twofa-header-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto;
    border-radius: 50%;
    background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 32px;
}

/* Title and Subtitle */
.twofa-title {
    font-size: 24px;
    font-weight: 600;
    color: #1D1D1F;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.twofa-subtitle {
    font-size: 14px;
    color: #86868B;
    line-height: 1.5;
    margin-bottom: 0;
}

/* Setup Steps */
.twofa-steps {
    background: #F5F5F7;
    border-radius: 12px;
    padding: 20px;
}

.twofa-step {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.twofa-step-number {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #007AFF;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
}

.twofa-step-content {
    flex-grow: 1;
}

.twofa-step-title {
    font-size: 15px;
    font-weight: 600;
    color: #1D1D1F;
    margin-bottom: 4px;
}

.twofa-step-text {
    font-size: 13px;
    color: #86868B;
    line-height: 1.5;
    margin-bottom: 0;
}

/* QR Code Container */
.twofa-qr-container {
    background: #F5F5F7;
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.twofa-qr-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.twofa-qr-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.twofa-qr-img {
    max-width: 240px;
    height: auto;
    border-radius: 8px;
    background: #ffffff;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Alert Messages */
.twofa-alert {
    border-radius: 8px;
    border: none;
    padding: 12px 16px;
    font-size: 14px;
}

.twofa-alert i {
    font-size: 18px;
}

/* Form Label */
.twofa-label {
    font-size: 14px;
    font-weight: 500;
    color: #1D1D1F;
    margin-bottom: 8px;
}

/* OTP Input Field - Setup Screen */
.twofa-input {
    height: 56px;
    font-size: 1.5rem;
    text-align: center;
    letter-spacing: 0.5em;
    font-weight: 600;
    border: 2px solid #E5E5E7;
    border-radius: 8px;
    transition: all 0.3s ease;
    background: #F5F5F7;
    color: #1D1D1F;
}

.twofa-input:focus {
    border-color: #007AFF;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
    outline: none;
}

.twofa-input::placeholder {
    color: #C7C7CC;
    letter-spacing: 0.5em;
}

/* OTP Input Field - Verify Screen (Larger) */
.twofa-input-verify {
    height: 72px;
    font-size: 2rem;
    text-align: center;
    letter-spacing: 0.5em;
    font-weight: 600;
    border: 2px solid #E5E5E7;
    border-radius: 12px;
    transition: all 0.3s ease;
    background: #F5F5F7;
    color: #1D1D1F;
}

.twofa-input-verify:focus {
    border-color: #007AFF;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
    outline: none;
}

.twofa-input-verify::placeholder {
    color: #C7C7CC;
    letter-spacing: 0.5em;
}

/* Primary Button */
.twofa-btn-primary {
    background: #007AFF;
    border: none;
    border-radius: 24px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    padding: 14px 32px;
    transition: all 0.3s ease;
    letter-spacing: -0.01em;
}

.twofa-btn-primary:hover {
    background: #0051D5;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
    transform: translateY(-2px);
    color: #ffffff;
}

.twofa-btn-primary:active {
    transform: translateY(0);
}

.twofa-btn-primary:disabled {
    background: #E5E5E7;
    color: #86868B;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Notice */
.twofa-notice {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: #F5F5F7;
    border-radius: 8px;
    font-size: 13px;
    color: #86868B;
    line-height: 1.5;
}

.twofa-notice i {
    font-size: 18px;
    color: #007AFF;
    flex-shrink: 0;
}

/* Responsive Design */
@media (max-width: 767.98px) {
    .twofa-title {
        font-size: 22px;
    }

    .twofa-subtitle {
        font-size: 13px;
    }

    .twofa-header-icon {
        width: 56px;
        height: 56px;
        font-size: 28px;
    }

    .twofa-steps {
        padding: 16px;
    }

    .twofa-step {
        gap: 12px;
        margin-bottom: 16px;
    }

    .twofa-step-number {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }

    .twofa-step-title {
        font-size: 14px;
    }

    .twofa-step-text {
        font-size: 12px;
    }

    .twofa-qr-container {
        padding: 24px;
        min-height: 240px;
    }

    .twofa-qr-img {
        max-width: 200px;
    }

    .twofa-input {
        height: 48px;
        font-size: 1.25rem;
    }

    .twofa-input-verify {
        height: 64px;
        font-size: 1.75rem;
    }

    .twofa-btn-primary {
        padding: 12px 28px;
        font-size: 14px;
    }

    .twofa-notice {
        font-size: 12px;
    }
}

/* Accessibility - High Contrast Mode */
@media (prefers-contrast: high) {
    .twofa-input,
    .twofa-input-verify {
        border-width: 3px;
    }

    .twofa-btn-primary {
        background: #0051D5;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .twofa-setup-card,
    .twofa-verify-card,
    .twofa-input,
    .twofa-input-verify,
    .twofa-btn-primary {
        transition: none;
    }

    .twofa-btn-primary:hover {
        transform: none;
    }
}

/* ===================================
   Admin Login Screen - Apple Design Philosophy
   Minimalist, Clean, Sophisticated
   =================================== */

/* Body Background */
.auth-body-bg {
    background: linear-gradient(135deg, #F5F5F7 0%, #E8E8ED 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Login Container */
.admin-login-container {
    width: 100%;
    padding: 32px 16px;
}

/* Header Section */
.admin-login-header {
    text-align: center;
    margin-bottom: 32px;
}

/* Logo Icon Container */
.admin-login-logo-container {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.25);
}

.admin-login-logo-icon {
    font-size: 40px;
    color: #ffffff;
}

/* Service Name */
.admin-login-service-name {
    font-size: 32px;
    font-weight: 700;
    color: #1D1D1F;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}

/* Service Subtitle */
.admin-login-service-subtitle {
    font-size: 14px;
    color: #86868B;
    margin-bottom: 12px;
    font-weight: 400;
}

/* Portal Label */
.admin-login-portal-label {
    font-size: 13px;
    font-weight: 600;
    color: #007AFF;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0;
}

/* Login Card */
.admin-login-card {
    border: none;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
    background: #ffffff;
    transition: all 0.3s ease;
}

.admin-login-card-body {
    padding: 40px 32px;
}

/* Card Header */
.admin-login-card-header {
    text-align: center;
    margin-bottom: 32px;
}

.admin-login-card-title {
    font-size: 24px;
    font-weight: 600;
    color: #1D1D1F;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.admin-login-card-subtitle {
    font-size: 14px;
    color: #86868B;
    margin-bottom: 0;
}

/* Form Label */
.admin-login-label {
    font-size: 14px;
    font-weight: 500;
    color: #1D1D1F;
    margin-bottom: 8px;
}

/* Input Field */
.admin-login-input {
    height: 48px;
    font-size: 15px;
    border: 2px solid #E5E5E7;
    border-radius: 8px;
    transition: all 0.3s ease;
    background: #F5F5F7;
    color: #1D1D1F;
    padding: 12px 16px;
}

.admin-login-input:focus {
    border-color: #007AFF;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
    outline: none;
}

.admin-login-input::placeholder {
    color: #C7C7CC;
}

/* Login Button */
.admin-login-btn {
    background: #007AFF;
    border: none;
    border-radius: 24px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    padding: 14px 32px;
    transition: all 0.3s ease;
    letter-spacing: -0.01em;
    height: 52px;
}

.admin-login-btn:hover {
    background: #0051D5;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
    transform: translateY(-2px);
    color: #ffffff;
}

.admin-login-btn:active {
    transform: translateY(0);
}

.admin-login-btn:disabled {
    background: #E5E5E7;
    color: #86868B;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Forgot Password Link */
.admin-login-forgot-link {
    font-size: 14px;
    color: #007AFF;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.admin-login-forgot-link:hover {
    color: #0051D5;
    text-decoration: underline;
}

/* Footer */
.admin-login-footer {
    text-align: center;
    margin-top: 32px;
    padding: 0 16px;
}

.admin-login-footer p {
    font-size: 13px;
    color: #86868B;
    margin-bottom: 0;
}

/* Responsive Design */
@media (max-width: 767.98px) {
    .admin-login-service-name {
        font-size: 28px;
    }

    .admin-login-service-subtitle {
        font-size: 13px;
    }

    .admin-login-portal-label {
        font-size: 12px;
    }

    .admin-login-logo-container {
        width: 72px;
        height: 72px;
        margin-bottom: 16px;
    }

    .admin-login-logo-icon {
        font-size: 36px;
    }

    .admin-login-card-body {
        padding: 32px 24px;
    }

    .admin-login-card-title {
        font-size: 22px;
    }

    .admin-login-card-subtitle {
        font-size: 13px;
    }

    .admin-login-input {
        height: 44px;
        font-size: 14px;
    }

    .admin-login-btn {
        height: 48px;
        font-size: 15px;
        padding: 12px 28px;
    }

    .admin-login-forgot-link {
        font-size: 13px;
    }
}

/* Accessibility - High Contrast Mode */
@media (prefers-contrast: high) {
    .admin-login-input {
        border-width: 3px;
    }

    .admin-login-btn {
        background: #0051D5;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .admin-login-card,
    .admin-login-input,
    .admin-login-btn,
    .admin-login-forgot-link {
        transition: none;
    }

    .admin-login-btn:hover {
        transform: none;
    }
}

/* ===================================
   Password Reset Request Screen - Apple Design Philosophy
   Minimalist, Clean, Sophisticated
   =================================== */

/* Success Message Container - 初期状態では非表示 */
.password-reset-success-message {
    display: none;
    text-align: center;
    padding: 32px 24px;
    background: #F5F5F7;
    border-radius: 12px;
    opacity: 0;
    transform: translateY(-8px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 表示時のアニメーション */
.password-reset-success-message--show {
    opacity: 1;
    transform: translateY(0);
}

/* Success Icon - チェックマークアイコン */
.password-reset-success-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #34C759 0%, #30B350 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(52, 199, 89, 0.25);
}

.password-reset-success-icon i {
    font-size: 36px;
    color: #ffffff;
    font-weight: bold;
}

/* Success Text - メインメッセージ */
.password-reset-success-text {
    font-size: 18px;
    font-weight: 600;
    color: #1D1D1F;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}

/* Success Subtext - 補足説明 */
.password-reset-success-subtext {
    font-size: 14px;
    color: #86868B;
    line-height: 1.5;
    margin-bottom: 0;
}

/* Responsive Design */
@media (max-width: 767.98px) {
    .password-reset-success-message {
        padding: 28px 20px;
    }

    .password-reset-success-icon {
        width: 56px;
        height: 56px;
        margin-bottom: 16px;
    }

    .password-reset-success-icon i {
        font-size: 32px;
    }

    .password-reset-success-text {
        font-size: 16px;
    }

    .password-reset-success-subtext {
        font-size: 13px;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .password-reset-success-message {
        transition: none;
    }
}

/* ===================================
   Password Reset Execute Screen - Apple Design Philosophy
   パスワードポリシー表示とエラーメッセージ
   =================================== */

/* Error Message - エラーメッセージ表示 */
.password-reset-error-message {
    display: block;
    font-size: 13px;
    color: #FF3B30;
    margin-top: 6px;
    font-weight: 500;
    line-height: 1.4;
}

/* Invalid Input - 入力エラー時のボーダー色 */
.admin-login-input.is-invalid {
    border-color: #FF3B30;
    background: #FFF5F5;
}

.admin-login-input.is-invalid:focus {
    border-color: #FF3B30;
    box-shadow: 0 0 0 4px rgba(255, 59, 48, 0.1);
}

/* Password Policy Container - ポリシー表示コンテナ */
.password-reset-policy-container {
    background: #F5F5F7;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 16px;
}

/* Policy Header - ヘッダー部分 */
.password-reset-policy-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #1D1D1F;
    margin-bottom: 12px;
}

.password-reset-policy-header i {
    font-size: 18px;
    color: #007AFF;
}

/* Policy List - ポリシー要件リスト */
.password-reset-policy-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Policy Item - 各ポリシー項目（デフォルト状態：未達成） */
.password-reset-policy-item {
    font-size: 13px;
    color: #86868B;
    line-height: 1.8;
    padding-left: 24px;
    position: relative;
    transition: all 0.3s ease;
}

.password-reset-policy-item::before {
    content: '\ea13';
    font-family: 'boxicons';
    position: absolute;
    left: 0;
    color: #C7C7CC;
    font-size: 16px;
    transition: all 0.3s ease;
}

/* Policy Item Valid - 要件達成時の状態 */
.password-reset-policy-item--valid {
    color: #34C759;
    font-weight: 500;
}

.password-reset-policy-item--valid::before {
    content: '\ea10';
    color: #34C759;
}

/* Responsive Design */
@media (max-width: 767.98px) {
    .password-reset-policy-container {
        padding: 14px 16px;
    }

    .password-reset-policy-header {
        font-size: 13px;
    }

    .password-reset-policy-header i {
        font-size: 16px;
    }

    .password-reset-policy-item {
        font-size: 12px;
        line-height: 1.7;
    }

    .password-reset-error-message {
        font-size: 12px;
    }
}

/* Accessibility - High Contrast Mode */
@media (prefers-contrast: high) {
    .password-reset-policy-item--valid {
        color: #30B350;
    }

    .admin-login-input.is-invalid {
        border-width: 3px;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .password-reset-policy-item,
    .password-reset-policy-item::before {
        transition: none;
    }
}

/* ===================================
   Invitation List Screen - Apple Design Philosophy
   Minimalist, Clean, Sophisticated Table Design
   =================================== */

/* Email Icon Container */
.invitation-email-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    margin-right: 12px;
    flex-shrink: 0;
}

.invitation-email-icon i {
    font-size: 18px;
}

/* Expiry Date Status */
.invitation-expiry-valid {
    font-size: 14px;
    color: #334155;
    font-weight: 500;
}

.invitation-expiry-expired {
    font-size: 14px;
    color: #FF3B30;
    font-weight: 500;
}

/* Status Badge - Unified Design */
.invitation-status-badge {
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    letter-spacing: -0.01em;
}

.invitation-status-badge i {
    font-size: 16px;
}

/* Status Badge - Pending (保留中) */
.invitation-status-badge--pending {
    background: rgba(255, 149, 0, 0.1);
    color: #FF9500;
}

/* Status Badge - Accepted (承認済み) */
.invitation-status-badge--accepted {
    background: rgba(52, 199, 89, 0.1);
    color: #34C759;
}

/* Status Badge - Expired (期限切れ) */
.invitation-status-badge--expired {
    background: rgba(255, 59, 48, 0.1);
    color: #FF3B30;
}

/* Responsive Design */
@media (max-width: 767.98px) {
    .invitation-email-icon {
        width: 32px;
        height: 32px;
        margin-right: 10px;
    }

    .invitation-email-icon i {
        font-size: 16px;
    }

    .invitation-status-badge {
        font-size: 12px;
        padding: 5px 10px;
    }

    .invitation-status-badge i {
        font-size: 14px;
    }
}

/* Accessibility - High Contrast Mode */
@media (prefers-contrast: high) {
    .invitation-status-badge--pending {
        background: rgba(255, 149, 0, 0.2);
    }

    .invitation-status-badge--accepted {
        background: rgba(52, 199, 89, 0.2);
    }

    .invitation-status-badge--expired {
        background: rgba(255, 59, 48, 0.2);
    }
}

/* ===================================
   Invitation Create Screen - Apple Design Philosophy
   Minimalist, Clean, Sophisticated Form Design
   =================================== */

/* Success Message Container - 初期状態では非表示 */
.invitation-create-success-message {
    display: none;
    text-align: center;
    padding: 32px 24px;
    background: #F5F5F7;
    border-radius: 12px;
    opacity: 0;
    transform: translateY(-8px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 表示時のアニメーション */
.invitation-create-success-message--show {
    opacity: 1;
    transform: translateY(0);
}

/* Success Icon - チェックマークアイコン */
.invitation-create-success-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #34C759 0%, #30B350 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(52, 199, 89, 0.25);
}

.invitation-create-success-icon i {
    font-size: 36px;
    color: #ffffff;
    font-weight: bold;
}

/* Success Text - メインメッセージ */
.invitation-create-success-text {
    font-size: 18px;
    font-weight: 600;
    color: #1D1D1F;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}

/* Success Subtext - 補足説明 */
.invitation-create-success-subtext {
    font-size: 14px;
    color: #86868B;
    line-height: 1.5;
    margin-bottom: 0;
}

/* Form Label */
.invitation-create-label {
    font-size: 14px;
    font-weight: 600;
    color: #1D1D1F;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

.invitation-create-label i {
    font-size: 18px;
    color: #007AFF;
}

/* Input Field */
.invitation-create-input {
    height: 48px;
    font-size: 15px;
    border: 2px solid #E5E5E7;
    border-radius: 8px;
    transition: all 0.3s ease;
    background: #F5F5F7;
    color: #1D1D1F;
    padding: 12px 16px;
}

.invitation-create-input:focus {
    border-color: #007AFF;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
    outline: none;
}

.invitation-create-input::placeholder {
    color: #C7C7CC;
}

/* Textarea */
.invitation-create-textarea {
    font-size: 15px;
    border: 2px solid #E5E5E7;
    border-radius: 8px;
    transition: all 0.3s ease;
    background: #F5F5F7;
    color: #1D1D1F;
    padding: 12px 16px;
    resize: vertical;
}

.invitation-create-textarea:focus {
    border-color: #007AFF;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
    outline: none;
}

.invitation-create-textarea::placeholder {
    color: #C7C7CC;
}

/* Select */
.invitation-create-select {
    height: 48px;
    font-size: 15px;
    border: 2px solid #E5E5E7;
    border-radius: 8px;
    transition: all 0.3s ease;
    background: #F5F5F7;
    color: #1D1D1F;
    padding: 12px 16px;
}

.invitation-create-select:focus {
    border-color: #007AFF;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
    outline: none;
}

/* Help Text */
.invitation-create-help-text {
    font-size: 13px;
    color: #86868B;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.invitation-create-help-text i {
    font-size: 16px;
    flex-shrink: 0;
}

/* Character Count */
.invitation-create-char-count {
    font-size: 13px;
    color: #86868B;
    text-align: right;
    margin-top: 8px;
}

/* Notice Container */
.invitation-create-notice {
    display: flex;
    gap: 16px;
    padding: 16px 20px;
    background: #F5F5F7;
    border-radius: 12px;
    border-left: 4px solid #007AFF;
}

.invitation-create-notice-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #007AFF;
    font-size: 22px;
}

.invitation-create-notice-content {
    flex-grow: 1;
}

.invitation-create-notice-title {
    font-size: 14px;
    font-weight: 600;
    color: #1D1D1F;
    margin-bottom: 8px;
}

.invitation-create-notice-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.invitation-create-notice-list li {
    font-size: 13px;
    color: #86868B;
    line-height: 1.8;
    padding-left: 20px;
    position: relative;
}

.invitation-create-notice-list li::before {
    content: '\ea10';
    font-family: 'boxicons';
    position: absolute;
    left: 0;
    color: #007AFF;
    font-size: 16px;
}

/* Cancel Button */
.invitation-create-btn-cancel {
    border-radius: 24px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid #E5E5E7;
    color: #64748b;
}

.invitation-create-btn-cancel:hover {
    background: #F5F5F7;
    border-color: #cbd5e1;
    color: #475569;
    transform: translateY(-2px);
}

/* Submit Button */
.invitation-create-btn-submit {
    border-radius: 24px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.3s ease;
}

/* Responsive Design */
@media (max-width: 767.98px) {
    .invitation-create-success-message {
        padding: 28px 20px;
    }

    .invitation-create-success-icon {
        width: 56px;
        height: 56px;
        margin-bottom: 16px;
    }

    .invitation-create-success-icon i {
        font-size: 32px;
    }

    .invitation-create-success-text {
        font-size: 16px;
    }

    .invitation-create-success-subtext {
        font-size: 13px;
    }

    .invitation-create-label {
        font-size: 13px;
    }

    .invitation-create-label i {
        font-size: 16px;
    }

    .invitation-create-input,
    .invitation-create-textarea,
    .invitation-create-select {
        font-size: 14px;
        height: 44px;
    }

    .invitation-create-textarea {
        height: auto;
    }

    .invitation-create-help-text,
    .invitation-create-char-count {
        font-size: 12px;
    }

    .invitation-create-notice {
        gap: 12px;
        padding: 14px 16px;
    }

    .invitation-create-notice-icon {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }

    .invitation-create-notice-title {
        font-size: 13px;
    }

    .invitation-create-notice-list li {
        font-size: 12px;
    }

    .invitation-create-btn-cancel,
    .invitation-create-btn-submit {
        font-size: 14px;
        padding: 10px 20px;
    }
}

/* Accessibility - High Contrast Mode */
@media (prefers-contrast: high) {
    .invitation-create-input,
    .invitation-create-textarea,
    .invitation-create-select {
        border-width: 3px;
    }

    .invitation-create-notice {
        border-left-width: 5px;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .invitation-create-success-message,
    .invitation-create-input,
    .invitation-create-textarea,
    .invitation-create-select,
    .invitation-create-btn-cancel,
    .invitation-create-btn-submit {
        transition: none;
    }

    .invitation-create-btn-cancel:hover,
    .invitation-create-btn-submit:hover {
        transform: none;
    }
}

/* ===================================
   Activation Screen - Apple Design Philosophy
   Minimalist, Clean, Sophisticated
   =================================== */

/* Email Display Container - 招待メールアドレス表示エリア */
.activate-email-display {
    background: #F5F5F7;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
    border-left: 4px solid #007AFF;
}

/* Email Label - ラベル部分 */
.activate-email-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #86868B;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.activate-email-label i {
    font-size: 16px;
    color: #007AFF;
}

/* Email Value - メールアドレス表示 */
.activate-email-value {
    font-size: 16px;
    font-weight: 600;
    color: #1D1D1F;
    letter-spacing: -0.01em;
    word-break: break-all;
}

/* Responsive Design */
@media (max-width: 767.98px) {
    .activate-email-display {
        padding: 14px 16px;
        margin-bottom: 20px;
    }

    .activate-email-label {
        font-size: 12px;
        gap: 6px;
    }

    .activate-email-label i {
        font-size: 14px;
    }

    .activate-email-value {
        font-size: 15px;
    }
}

/* Accessibility - High Contrast Mode */
@media (prefers-contrast: high) {
    .activate-email-display {
        border-left-width: 5px;
        background: rgba(245, 245, 247, 0.8);
    }
}

/* ===================================
   Dashboard Mockup - Apple Design Philosophy
   BEM命名規則によるクリーンな設計
   =================================== */

/* ===================================
   Body - 基本レイアウト設定
   =================================== */
.dashboard-body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: #F5F5F7;
    color: #1D1D1F;
    overflow-x: hidden;
}

/* ===================================
   Sidebar - サイドメニュー
   BEM Block: dashboard-sidebar
   =================================== */
.dashboard-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    background: #ffffff;
    border-right: 1px solid #E5E5E7;
    padding: 24px 0;
    z-index: 1000;
    transition: transform 0.3s ease;
}

/* Sidebar Header */
.dashboard-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px 24px;
    border-bottom: 1px solid #F5F5F7;
    margin-bottom: 24px;
}

/* Sidebar Logo */
.dashboard-sidebar__logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 700;
    color: #1D1D1F;
}

.dashboard-sidebar__logo i {
    font-size: 32px;
    color: #007AFF;
}

.dashboard-sidebar__logo-text {
    letter-spacing: -0.5px;
}

/* Sidebar Close Button - モバイル用 */
.dashboard-sidebar__close {
    display: none;
    width: 36px;
    height: 36px;
    border: none;
    background: #F5F5F7;
    border-radius: 8px;
    color: #86868B;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dashboard-sidebar__close:hover {
    background: #E5E5E7;
    color: #1D1D1F;
}

.dashboard-sidebar__close i {
    font-size: 24px;
}

/* Sidebar Navigation */
.dashboard-sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 16px;
}

/* Navigation Item */
.dashboard-sidebar__nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    color: #86868B;
    text-decoration: none;
    transition: all 0.3s ease;
}

.dashboard-sidebar__nav-item i {
    font-size: 22px;
    flex-shrink: 0;
}

.dashboard-sidebar__nav-item:hover {
    background: #F5F5F7;
    color: #1D1D1F;
}

/* Active Navigation Item */
.dashboard-sidebar__nav-item--active {
    background: #007AFF;
    color: #ffffff;
}

.dashboard-sidebar__nav-item--active:hover {
    background: #0051D5;
    color: #ffffff;
}

/* ===================================
   Main - メインコンテンツエリア
   BEM Block: dashboard-main
   =================================== */
.dashboard-main {
    margin-left: 280px;
    min-height: 100vh;
    transition: margin-left 0.3s ease;
}

/* ===================================
   Header - トップバー
   BEM Block: dashboard-header
   =================================== */
.dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    background: #ffffff;
    border-bottom: 1px solid #E5E5E7;
    position: sticky;
    top: 0;
    z-index: 999;
}

/* Header Menu Button - モバイル用 */
.dashboard-header__menu-btn {
    display: none;
    width: 44px;
    height: 44px;
    border: none;
    background: #F5F5F7;
    border-radius: 8px;
    color: #1D1D1F;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dashboard-header__menu-btn:hover {
    background: #E5E5E7;
}

.dashboard-header__menu-btn i {
    font-size: 28px;
}

/* Header Actions */
.dashboard-header__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

/* Header User Info */
.dashboard-header__user {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* User Avatar */
.dashboard-header__user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 20px;
}

/* User Name */
.dashboard-header__user-name {
    font-size: 15px;
    font-weight: 600;
    color: #1D1D1F;
}

/* Logout Button */
.dashboard-header__logout-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 2px solid #E5E5E7;
    background: #ffffff;
    border-radius: 24px;
    color: #86868B;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dashboard-header__logout-btn:hover {
    background: #F5F5F7;
    border-color: #CBD5E1;
    color: #1D1D1F;
    transform: translateY(-2px);
}

.dashboard-header__logout-btn i {
    font-size: 20px;
}

/* ===================================
   Content - コンテンツエリア
   BEM Block: dashboard-content
   =================================== */
.dashboard-content {
    padding: 32px;
}

/* ===================================
   Welcome - ウェルカムメッセージ
   BEM Block: dashboard-welcome
   =================================== */
.dashboard-welcome {
    margin-bottom: 32px;
}

.dashboard-welcome__title {
    font-size: 32px;
    font-weight: 700;
    color: #1D1D1F;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}

.dashboard-welcome__subtitle {
    font-size: 16px;
    color: #86868B;
    margin-bottom: 0;
}

/* ===================================
   Stats Card - 統計情報カード
   BEM Block: dashboard-stats-card
   =================================== */
.dashboard-stats-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: #ffffff;
    border: 1px solid #E5E5E7;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.dashboard-stats-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Stats Card Icon */
.dashboard-stats-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: #F5F5F7;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #007AFF;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.dashboard-stats-card__icon i {
    font-size: 28px;
}

/* Alert Icon Modifier */
.dashboard-stats-card__icon--alert {
    background: rgba(255, 59, 48, 0.1);
    color: #FF3B30;
}

.dashboard-stats-card:hover .dashboard-stats-card__icon {
    transform: scale(1.05);
}

/* Stats Card Content */
.dashboard-stats-card__content {
    flex-grow: 1;
}

.dashboard-stats-card__label {
    font-size: 14px;
    font-weight: 500;
    color: #86868B;
    margin-bottom: 4px;
}

.dashboard-stats-card__value {
    font-size: 32px;
    font-weight: 700;
    color: #1D1D1F;
    letter-spacing: -0.5px;
}

/* Alert Value Modifier */
.dashboard-stats-card__value--alert {
    color: #FF3B30;
}

/* ===================================
   Activity - 最近のアクティビティ
   BEM Block: dashboard-activity
   =================================== */
.dashboard-activity {
    background: #ffffff;
    border: 1px solid #E5E5E7;
    border-radius: 12px;
    padding: 24px;
}

/* Activity Header */
.dashboard-activity__header {
    margin-bottom: 24px;
}

.dashboard-activity__title {
    font-size: 20px;
    font-weight: 600;
    color: #1D1D1F;
    letter-spacing: -0.5px;
    margin-bottom: 4px;
}

.dashboard-activity__subtitle {
    font-size: 14px;
    color: #86868B;
    margin-bottom: 0;
}

/* Activity Content */
.dashboard-activity__content {
    overflow-x: auto;
}

/* Activity Table */
.dashboard-activity__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

/* Table Header */
.dashboard-activity__table-header {
    background: #F5F5F7;
}

.dashboard-activity__table-th {
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #86868B;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #E5E5E7;
}

.dashboard-activity__table-th:first-child {
    border-top-left-radius: 8px;
}

.dashboard-activity__table-th:last-child {
    border-top-right-radius: 8px;
}

/* Table Body */
.dashboard-activity__table-body {
    background: #ffffff;
}

.dashboard-activity__table-row {
    border-bottom: 1px solid #F5F5F7;
    transition: background 0.2s ease;
}

.dashboard-activity__table-row:hover {
    background: #FAFBFC;
}

.dashboard-activity__table-row:last-child {
    border-bottom: none;
}

.dashboard-activity__table-td {
    padding: 16px;
    font-size: 14px;
    color: #1D1D1F;
}

/* Activity Time */
.dashboard-activity__time {
    font-size: 14px;
    font-weight: 500;
    color: #86868B;
    font-variant-numeric: tabular-nums;
}

/* Activity Event */
.dashboard-activity__event {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Event Icon */
.dashboard-activity__event-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dashboard-activity__event-icon i {
    font-size: 20px;
}

/* Success Icon */
.dashboard-activity__event-icon--success {
    background: rgba(52, 199, 89, 0.1);
    color: #34C759;
}

/* Warning Icon */
.dashboard-activity__event-icon--warning {
    background: rgba(255, 149, 0, 0.1);
    color: #FF9500;
}

/* Info Icon */
.dashboard-activity__event-icon--info {
    background: rgba(0, 122, 255, 0.1);
    color: #007AFF;
}

/* Event Text */
.dashboard-activity__event-text {
    font-size: 15px;
    font-weight: 500;
    color: #1D1D1F;
}

/* Activity IP */
.dashboard-activity__ip {
    font-size: 14px;
    font-weight: 500;
    color: #86868B;
    font-family: 'Courier New', monospace;
    font-variant-numeric: tabular-nums;
}

/* ===================================
   Responsive Design - レスポンシブ対応
   =================================== */

/* タブレット以下 (Tablet and below) */
@media (max-width: 991.98px) {
    /* サイドバーをデフォルトで非表示 */
    .dashboard-sidebar {
        transform: translateX(-100%);
    }

    /* オープン状態 */
    .dashboard-sidebar--open {
        transform: translateX(0);
    }

    /* 閉じるボタンを表示 */
    .dashboard-sidebar__close {
        display: flex;
    }

    /* メインコンテンツを全幅に */
    .dashboard-main {
        margin-left: 0;
    }

    /* メニューボタンを表示 */
    .dashboard-header__menu-btn {
        display: flex;
    }

    /* コンテンツパディングを調整 */
    .dashboard-content {
        padding: 24px;
    }

    /* ウェルカムメッセージを調整 */
    .dashboard-welcome__title {
        font-size: 28px;
    }

    .dashboard-welcome__subtitle {
        font-size: 15px;
    }

    /* 統計カードを調整 */
    .dashboard-stats-card {
        padding: 20px;
    }

    .dashboard-stats-card__icon {
        width: 48px;
        height: 48px;
    }

    .dashboard-stats-card__icon i {
        font-size: 24px;
    }

    .dashboard-stats-card__value {
        font-size: 28px;
    }
}

/* モバイル (Mobile) */
@media (max-width: 767.98px) {
    /* ヘッダーパディングを調整 */
    .dashboard-header {
        padding: 12px 16px;
    }

    /* ユーザー名を非表示 */
    .dashboard-header__user-name {
        display: none;
    }

    /* ログアウトボタンのテキストを非表示 */
    .dashboard-header__logout-btn span {
        display: none;
    }

    .dashboard-header__logout-btn {
        padding: 10px;
    }

    /* コンテンツパディングをさらに調整 */
    .dashboard-content {
        padding: 16px;
    }

    /* ウェルカムメッセージをさらに調整 */
    .dashboard-welcome {
        margin-bottom: 24px;
    }

    .dashboard-welcome__title {
        font-size: 24px;
    }

    .dashboard-welcome__subtitle {
        font-size: 14px;
    }

    /* 統計カードをさらに調整 */
    .dashboard-stats-card {
        padding: 16px;
    }

    .dashboard-stats-card__icon {
        width: 44px;
        height: 44px;
    }

    .dashboard-stats-card__icon i {
        font-size: 22px;
    }

    .dashboard-stats-card__label {
        font-size: 13px;
    }

    .dashboard-stats-card__value {
        font-size: 24px;
    }

    /* アクティビティカードを調整 */
    .dashboard-activity {
        padding: 16px;
    }

    .dashboard-activity__header {
        margin-bottom: 16px;
    }

    .dashboard-activity__title {
        font-size: 18px;
    }

    .dashboard-activity__subtitle {
        font-size: 13px;
    }

    /* テーブルを調整 */
    .dashboard-activity__table-th,
    .dashboard-activity__table-td {
        padding: 12px;
        font-size: 13px;
    }

    .dashboard-activity__event-icon {
        width: 32px;
        height: 32px;
    }

    .dashboard-activity__event-icon i {
        font-size: 18px;
    }

    .dashboard-activity__event-text {
        font-size: 14px;
    }

    .dashboard-activity__time,
    .dashboard-activity__ip {
        font-size: 13px;
    }
}

/* 小型モバイル (Small Mobile) */
@media (max-width: 575.98px) {
    /* サイドバーを全幅に */
    .dashboard-sidebar {
        width: 100%;
    }

    /* ヘッダーアクションを調整 */
    .dashboard-header__actions {
        gap: 8px;
    }

    /* 統計カードの値をさらに調整 */
    .dashboard-stats-card__value {
        font-size: 22px;
    }

    /* テーブルのIPアドレス列を非表示 */
    .dashboard-activity__table-th:last-child,
    .dashboard-activity__table-td:last-child {
        display: none;
    }
}

/* ===================================
   Accessibility - アクセシビリティ
   =================================== */

/* フォーカス状態 */
.dashboard-sidebar__nav-item:focus-visible,
.dashboard-header__logout-btn:focus-visible {
    outline: 3px solid rgba(0, 122, 255, 0.4);
    outline-offset: 2px;
}

/* ハイコントラストモード */
@media (prefers-contrast: high) {
    .dashboard-sidebar {
        border-right-width: 2px;
    }

    .dashboard-header {
        border-bottom-width: 2px;
    }

    .dashboard-stats-card,
    .dashboard-activity {
        border-width: 2px;
    }
}

/* アニメーション削減モード */
@media (prefers-reduced-motion: reduce) {
    .dashboard-sidebar,
    .dashboard-main,
    .dashboard-sidebar__nav-item,
    .dashboard-header__menu-btn,
    .dashboard-header__logout-btn,
    .dashboard-stats-card,
    .dashboard-stats-card__icon,
    .dashboard-activity__table-row {
        transition: none;
    }

    .dashboard-stats-card:hover,
    .dashboard-header__logout-btn:hover {
        transform: none;
    }
}

/* ===================================
   Performance Optimizations - パフォーマンス最適化
   =================================== */

/* GPU加速 */
.dashboard-sidebar,
.dashboard-stats-card {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* レイアウトシフト防止 */
.dashboard-stats-card__icon,
.dashboard-activity__event-icon,
.dashboard-header__user-avatar {
    contain: layout;
}

/* ===================================
   Profile Settings Screen - Apple Design Philosophy
   BEM命名規則によるクリーンな設計
   =================================== */

/* ===================================
   Page Header - ページヘッダー
   BEM Block: profile-page-header
   =================================== */
.profile-page-header {
    margin-bottom: 32px;
}

.profile-page-title {
    font-size: 32px;
    font-weight: 700;
    color: #1D1D1F;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}

.profile-page-subtitle {
    font-size: 16px;
    color: #86868B;
    margin-bottom: 0;
}

/* ===================================
   Success Message - 成功メッセージ
   BEM Block: profile-success-message
   =================================== */
.profile-success-message {
    display: none;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #34C759 0%, #30B350 100%);
    border-radius: 12px;
    margin-bottom: 32px;
    box-shadow: 0 4px 12px rgba(52, 199, 89, 0.25);
    opacity: 0;
    transform: translateY(-8px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 表示時のアニメーション */
.profile-success-message--show {
    opacity: 1;
    transform: translateY(0);
}

/* Success Icon */
.profile-success-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 28px;
    flex-shrink: 0;
}

/* Success Text */
.profile-success-text {
    flex-grow: 1;
    color: #ffffff;
}

.profile-success-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}

.profile-success-desc {
    font-size: 14px;
    margin-bottom: 0;
    opacity: 0.95;
}

/* ===================================
   Section - セクション
   BEM Block: profile-section
   =================================== */
.profile-section {
    background: #ffffff;
    border: 1px solid #E5E5E7;
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 24px;
    transition: all 0.3s ease;
}

.profile-section:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Section Header */
.profile-section-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid #F5F5F7;
}

/* Section Icon */
.profile-section-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 28px;
    flex-shrink: 0;
}

/* Warning Icon Modifier */
.profile-section-icon--warning {
    background: linear-gradient(135deg, #FF9500 0%, #FF8000 100%);
}

/* Section Header Text */
.profile-section-header-text {
    flex-grow: 1;
}

.profile-section-title {
    font-size: 20px;
    font-weight: 600;
    color: #1D1D1F;
    letter-spacing: -0.5px;
    margin-bottom: 4px;
}

.profile-section-subtitle {
    font-size: 14px;
    color: #86868B;
    margin-bottom: 0;
}

/* Section Content */
.profile-section-content {
    /* コンテンツエリア - パディングなし */
}

/* ===================================
   Form Elements - フォーム要素
   BEM Block: profile-*
   =================================== */

/* Form Label */
.profile-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #1D1D1F;
    margin-bottom: 8px;
}

.profile-label i {
    font-size: 18px;
    color: #007AFF;
}

/* Input Field */
.profile-input {
    width: 100%;
    height: 48px;
    font-size: 15px;
    border: 2px solid #E5E5E7;
    border-radius: 8px;
    transition: all 0.3s ease;
    background: #F5F5F7;
    color: #1D1D1F;
    padding: 12px 16px;
}

.profile-input:focus {
    border-color: #007AFF;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
    outline: none;
}

.profile-input::placeholder {
    color: #C7C7CC;
}

/* Read-Only Input Modifier */
.profile-input--readonly {
    background: #F5F5F7;
    color: #86868B;
    cursor: not-allowed;
    border-color: #E5E5E7;
}

.profile-input--readonly:focus {
    border-color: #E5E5E7;
    box-shadow: none;
}

/* Help Text */
.profile-help-text {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #86868B;
    margin-top: 8px;
}

.profile-help-text i {
    font-size: 16px;
    flex-shrink: 0;
}

/* ===================================
   Notice - 注意事項
   BEM Block: profile-notice
   =================================== */
.profile-notice {
    display: flex;
    gap: 16px;
    padding: 16px 20px;
    background: #F5F5F7;
    border-radius: 12px;
    border-left: 4px solid #007AFF;
    margin-bottom: 24px;
}

/* Notice Icon */
.profile-notice-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #007AFF;
    font-size: 22px;
}

/* Notice Content */
.profile-notice-content {
    flex-grow: 1;
}

.profile-notice-title {
    font-size: 14px;
    font-weight: 600;
    color: #1D1D1F;
    margin-bottom: 8px;
}

.profile-notice-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.profile-notice-list li {
    font-size: 13px;
    color: #86868B;
    line-height: 1.8;
    padding-left: 20px;
    position: relative;
}

.profile-notice-list li::before {
    content: '\ea10';
    font-family: 'boxicons';
    position: absolute;
    left: 0;
    color: #007AFF;
    font-size: 16px;
}

/* ===================================
   Actions - アクション
   BEM Block: profile-actions
   =================================== */
.profile-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 32px;
}

/* Update Button */
.profile-btn-update {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #007AFF;
    border: none;
    border-radius: 24px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    padding: 14px 32px;
    transition: all 0.3s ease;
    letter-spacing: -0.01em;
    cursor: pointer;
}

.profile-btn-update:hover {
    background: #0051D5;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
    transform: translateY(-2px);
}

.profile-btn-update:active {
    transform: translateY(0);
}

.profile-btn-update i {
    font-size: 20px;
}

/* ===================================
   Responsive Design - レスポンシブ対応
   =================================== */

/* タブレット以下 (Tablet and below) */
@media (max-width: 991.98px) {
    .profile-page-title {
        font-size: 28px;
    }

    .profile-page-subtitle {
        font-size: 15px;
    }

    .profile-section {
        padding: 24px;
    }

    .profile-section-header {
        margin-bottom: 24px;
        padding-bottom: 20px;
    }

    .profile-section-icon {
        width: 48px;
        height: 48px;
        font-size: 24px;
    }

    .profile-section-title {
        font-size: 18px;
    }
}

/* モバイル (Mobile) */
@media (max-width: 767.98px) {
    .profile-page-header {
        margin-bottom: 24px;
    }

    .profile-page-title {
        font-size: 24px;
    }

    .profile-page-subtitle {
        font-size: 14px;
    }

    .profile-success-message {
        padding: 16px 20px;
        margin-bottom: 24px;
    }

    .profile-success-icon {
        width: 40px;
        height: 40px;
        font-size: 24px;
    }

    .profile-success-title {
        font-size: 15px;
    }

    .profile-success-desc {
        font-size: 13px;
    }

    .profile-section {
        padding: 20px;
        margin-bottom: 20px;
    }

    .profile-section-header {
        gap: 12px;
        margin-bottom: 20px;
        padding-bottom: 16px;
    }

    .profile-section-icon {
        width: 44px;
        height: 44px;
        font-size: 22px;
    }

    .profile-section-title {
        font-size: 17px;
    }

    .profile-section-subtitle {
        font-size: 13px;
    }

    .profile-label {
        font-size: 13px;
    }

    .profile-label i {
        font-size: 16px;
    }

    .profile-input {
        height: 44px;
        font-size: 14px;
    }

    .profile-help-text {
        font-size: 12px;
    }

    .profile-notice {
        gap: 12px;
        padding: 14px 16px;
        margin-bottom: 20px;
    }

    .profile-notice-icon {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }

    .profile-notice-title {
        font-size: 13px;
    }

    .profile-notice-list li {
        font-size: 12px;
    }

    .profile-actions {
        margin-top: 24px;
    }

    .profile-btn-update {
        width: 100%;
        justify-content: center;
        font-size: 14px;
        padding: 12px 28px;
    }
}

/* ===================================
   Accessibility - アクセシビリティ
   =================================== */

/* フォーカス状態 */
.profile-btn-update:focus-visible {
    outline: 3px solid rgba(0, 122, 255, 0.4);
    outline-offset: 2px;
}

/* ハイコントラストモード */
@media (prefers-contrast: high) {
    .profile-section {
        border-width: 2px;
    }

    .profile-input {
        border-width: 3px;
    }

    .profile-notice {
        border-left-width: 5px;
    }
}

/* アニメーション削減モード */
@media (prefers-reduced-motion: reduce) {
    .profile-success-message,
    .profile-section,
    .profile-input,
    .profile-btn-update {
        transition: none;
    }

    .profile-btn-update:hover {
        transform: none;
    }
}

/* ===================================
   Performance Optimizations - パフォーマンス最適化
   =================================== */

/* GPU加速 */
.profile-success-message,
.profile-section {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* レイアウトシフト防止 */
.profile-section-icon,
.profile-notice-icon,
.profile-success-icon {
    contain: layout;
}

/* ===================================
   2FA Settings Screen - Apple Design Philosophy
   BEM命名規則によるクリーンな設計
   =================================== */

/* ===================================
   Page Header - ページヘッダー
   BEM Block: twofa-settings-page-header
   =================================== */
.twofa-settings-page-header {
    margin-bottom: 32px;
}

.twofa-settings-page-title {
    font-size: 32px;
    font-weight: 700;
    color: #1D1D1F;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}

.twofa-settings-page-subtitle {
    font-size: 16px;
    color: #86868B;
    margin-bottom: 0;
}

/* ===================================
   Container - メインコンテナ
   BEM Block: twofa-settings-container
   =================================== */
.twofa-settings-container {
    max-width: 800px;
    margin: 0 auto;
}

/* ===================================
   Card - 2FA状態カード
   BEM Block: twofa-settings-card
   =================================== */
.twofa-settings-card {
    background: #ffffff;
    border: 1px solid #E5E5E7;
    border-radius: 12px;
    padding: 32px;
    transition: all 0.3s ease;
}

.twofa-settings-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Card Header */
.twofa-settings-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid #F5F5F7;
}

/* Card Icon */
.twofa-settings-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 28px;
    flex-shrink: 0;
}

/* Card Header Text */
.twofa-settings-card-header-text {
    flex-grow: 1;
}

.twofa-settings-card-title {
    font-size: 20px;
    font-weight: 600;
    color: #1D1D1F;
    letter-spacing: -0.5px;
    margin-bottom: 4px;
}

.twofa-settings-card-subtitle {
    font-size: 14px;
    color: #86868B;
    margin-bottom: 0;
}

/* Card Content */
.twofa-settings-card-content {
    /* コンテンツエリア */
}

/* ===================================
   Status - 2FA状態表示
   BEM Block: twofa-settings-status
   =================================== */
.twofa-settings-status {
    margin-bottom: 32px;
}

/* Status Badge */
.twofa-settings-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 24px;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 20px;
}

.twofa-settings-status-badge i {
    font-size: 20px;
}

/* Disabled Badge */
.twofa-settings-status-badge--disabled {
    background: rgba(255, 59, 48, 0.1);
    color: #FF3B30;
}

/* Enabled Badge */
.twofa-settings-status-badge--enabled {
    background: rgba(52, 199, 89, 0.1);
    color: #34C759;
}

/* Status Description */
.twofa-settings-status-description {
    font-size: 15px;
    color: #1D1D1F;
    line-height: 1.6;
    margin-bottom: 24px;
}

/* ===================================
   Actions - アクションボタン
   BEM Block: twofa-settings-actions
   =================================== */
.twofa-settings-actions {
    display: flex;
    gap: 12px;
}

/* Enable Button */
.twofa-settings-btn-enable {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #007AFF;
    border: none;
    border-radius: 24px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    padding: 14px 32px;
    transition: all 0.3s ease;
    letter-spacing: -0.01em;
    cursor: pointer;
}

.twofa-settings-btn-enable:hover {
    background: #0051D5;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
    transform: translateY(-2px);
    color: #ffffff;
}

.twofa-settings-btn-enable:active {
    transform: translateY(0);
}

.twofa-settings-btn-enable i {
    font-size: 20px;
}

/* Disable Button */
.twofa-settings-btn-disable {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 2px solid #E5E5E7;
    border-radius: 24px;
    color: #FF3B30;
    font-size: 15px;
    font-weight: 600;
    padding: 14px 32px;
    transition: all 0.3s ease;
    letter-spacing: -0.01em;
    cursor: pointer;
}

.twofa-settings-btn-disable:hover {
    background: #FF3B30;
    border-color: #FF3B30;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(255, 59, 48, 0.3);
    transform: translateY(-2px);
}

.twofa-settings-btn-disable:active {
    transform: translateY(0);
}

.twofa-settings-btn-disable i {
    font-size: 20px;
}

/* ===================================
   Notice - 注意事項
   BEM Block: twofa-settings-notice
   =================================== */
.twofa-settings-notice {
    display: flex;
    gap: 16px;
    padding: 16px 20px;
    background: #F5F5F7;
    border-radius: 12px;
    border-left: 4px solid #007AFF;
}

/* Notice Icon */
.twofa-settings-notice-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #007AFF;
    font-size: 22px;
}

/* Notice Content */
.twofa-settings-notice-content {
    flex-grow: 1;
}

.twofa-settings-notice-title {
    font-size: 14px;
    font-weight: 600;
    color: #1D1D1F;
    margin-bottom: 8px;
}

.twofa-settings-notice-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.twofa-settings-notice-list li {
    font-size: 13px;
    color: #86868B;
    line-height: 1.8;
    padding-left: 20px;
    position: relative;
}

.twofa-settings-notice-list li::before {
    content: '\ea10';
    font-family: 'boxicons';
    position: absolute;
    left: 0;
    color: #007AFF;
    font-size: 16px;
}

/* ===================================
   Modal - パスワード確認モーダル
   BEM Block: twofa-settings-modal
   =================================== */
.twofa-settings-modal {
    border: none;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Modal Header */
.twofa-settings-modal-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 32px;
    border-bottom: 1px solid #F5F5F7;
}

/* Modal Icon */
.twofa-settings-modal-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: linear-gradient(135deg, #FF9500 0%, #FF8000 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 28px;
    flex-shrink: 0;
}

/* Modal Header Text */
.twofa-settings-modal-header-text {
    flex-grow: 1;
}

.twofa-settings-modal-title {
    font-size: 20px;
    font-weight: 600;
    color: #1D1D1F;
    letter-spacing: -0.5px;
    margin-bottom: 4px;
}

.twofa-settings-modal-subtitle {
    font-size: 14px;
    color: #86868B;
    margin-bottom: 0;
}

/* Modal Body */
.twofa-settings-modal-body {
    padding: 32px;
}

/* Modal Label */
.twofa-settings-modal-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #1D1D1F;
    margin-bottom: 8px;
}

.twofa-settings-modal-label i {
    font-size: 18px;
    color: #007AFF;
}

/* Modal Input */
.twofa-settings-modal-input {
    height: 48px;
    font-size: 15px;
    border: 2px solid #E5E5E7;
    border-radius: 8px;
    transition: all 0.3s ease;
    background: #F5F5F7;
    color: #1D1D1F;
    padding: 12px 16px;
}

.twofa-settings-modal-input:focus {
    border-color: #007AFF;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
    outline: none;
}

.twofa-settings-modal-input::placeholder {
    color: #C7C7CC;
}

/* Modal Actions */
.twofa-settings-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
}

/* Modal Cancel Button */
.twofa-settings-modal-btn-cancel {
    border-radius: 24px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid #E5E5E7;
    color: #64748b;
}

.twofa-settings-modal-btn-cancel:hover {
    background: #F5F5F7;
    border-color: #cbd5e1;
    color: #475569;
    transform: translateY(-2px);
}

/* Modal Confirm Button */
.twofa-settings-modal-btn-confirm {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #FF3B30;
    border: none;
    border-radius: 24px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    padding: 14px 32px;
    transition: all 0.3s ease;
    letter-spacing: -0.01em;
}

.twofa-settings-modal-btn-confirm:hover {
    background: #D12C21;
    box-shadow: 0 4px 12px rgba(255, 59, 48, 0.3);
    transform: translateY(-2px);
    color: #ffffff;
}

.twofa-settings-modal-btn-confirm:active {
    transform: translateY(0);
}

.twofa-settings-modal-btn-confirm i {
    font-size: 20px;
}

/* ===================================
   Responsive Design - レスポンシブ対応
   =================================== */

/* タブレット以下 (Tablet and below) */
@media (max-width: 991.98px) {
    .twofa-settings-page-title {
        font-size: 28px;
    }

    .twofa-settings-page-subtitle {
        font-size: 15px;
    }

    .twofa-settings-card {
        padding: 24px;
    }

    .twofa-settings-card-header {
        margin-bottom: 24px;
        padding-bottom: 20px;
    }

    .twofa-settings-card-icon,
    .twofa-settings-modal-icon {
        width: 48px;
        height: 48px;
        font-size: 24px;
    }

    .twofa-settings-card-title,
    .twofa-settings-modal-title {
        font-size: 18px;
    }
}

/* モバイル (Mobile) */
@media (max-width: 767.98px) {
    .twofa-settings-page-header {
        margin-bottom: 24px;
    }

    .twofa-settings-page-title {
        font-size: 24px;
    }

    .twofa-settings-page-subtitle {
        font-size: 14px;
    }

    .twofa-settings-card {
        padding: 20px;
    }

    .twofa-settings-card-header {
        gap: 12px;
        margin-bottom: 20px;
        padding-bottom: 16px;
    }

    .twofa-settings-card-icon,
    .twofa-settings-modal-icon {
        width: 44px;
        height: 44px;
        font-size: 22px;
    }

    .twofa-settings-card-title,
    .twofa-settings-modal-title {
        font-size: 17px;
    }

    .twofa-settings-card-subtitle,
    .twofa-settings-modal-subtitle {
        font-size: 13px;
    }

    .twofa-settings-status {
        margin-bottom: 24px;
    }

    .twofa-settings-status-badge {
        font-size: 14px;
        padding: 8px 16px;
        margin-bottom: 16px;
    }

    .twofa-settings-status-badge i {
        font-size: 18px;
    }

    .twofa-settings-status-description {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .twofa-settings-actions {
        flex-direction: column;
    }

    .twofa-settings-btn-enable,
    .twofa-settings-btn-disable {
        width: 100%;
        justify-content: center;
        font-size: 14px;
        padding: 12px 28px;
    }

    .twofa-settings-notice {
        gap: 12px;
        padding: 14px 16px;
    }

    .twofa-settings-notice-icon {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }

    .twofa-settings-notice-title {
        font-size: 13px;
    }

    .twofa-settings-notice-list li {
        font-size: 12px;
    }

    .twofa-settings-modal-header {
        padding: 20px 24px;
        gap: 12px;
    }

    .twofa-settings-modal-body {
        padding: 24px;
    }

    .twofa-settings-modal-label {
        font-size: 13px;
    }

    .twofa-settings-modal-label i {
        font-size: 16px;
    }

    .twofa-settings-modal-input {
        height: 44px;
        font-size: 14px;
    }

    .twofa-settings-modal-actions {
        flex-direction: column;
        margin-top: 20px;
    }

    .twofa-settings-modal-btn-cancel,
    .twofa-settings-modal-btn-confirm {
        width: 100%;
        justify-content: center;
        font-size: 14px;
        padding: 12px 28px;
    }
}

/* ===================================
   Accessibility - アクセシビリティ
   =================================== */

/* フォーカス状態 */
.twofa-settings-btn-enable:focus-visible,
.twofa-settings-btn-disable:focus-visible,
.twofa-settings-modal-btn-cancel:focus-visible,
.twofa-settings-modal-btn-confirm:focus-visible {
    outline: 3px solid rgba(0, 122, 255, 0.4);
    outline-offset: 2px;
}

/* ハイコントラストモード */
@media (prefers-contrast: high) {
    .twofa-settings-card {
        border-width: 2px;
    }

    .twofa-settings-modal-input {
        border-width: 3px;
    }

    .twofa-settings-notice {
        border-left-width: 5px;
    }
}

/* アニメーション削減モード */
@media (prefers-reduced-motion: reduce) {
    .twofa-settings-card,
    .twofa-settings-modal-input,
    .twofa-settings-btn-enable,
    .twofa-settings-btn-disable,
    .twofa-settings-modal-btn-cancel,
    .twofa-settings-modal-btn-confirm {
        transition: none;
    }

    .twofa-settings-btn-enable:hover,
    .twofa-settings-btn-disable:hover,
    .twofa-settings-modal-btn-cancel:hover,
    .twofa-settings-modal-btn-confirm:hover {
        transform: none;
    }
}

/* ===================================
   Performance Optimizations - パフォーマンス最適化
   =================================== */

/* GPU加速 */
.twofa-settings-card {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* レイアウトシフト防止 */
.twofa-settings-card-icon,
.twofa-settings-notice-icon,
.twofa-settings-modal-icon {
    contain: layout;
}

/* ===================================
   Dashboard Typography Classes - ダッシュボード用タイポグラフィクラス
   インラインスタイルからの外だし用
   =================================== */

/* ページタイトル */
.page-title-box-title {
    font-size: 28px;
    letter-spacing: -0.5px;
}

/* パンくずリスト - ミュートカラー */
.breadcrumb-item-muted {
    color: #8e8e93;
}

/* 統計カード - ラベル */
.stats-card-label {
    font-size: 11px;
    letter-spacing: 0.8px;
}

/* 統計カード - 数値 */
.stats-card-value {
    font-size: 32px;
    letter-spacing: -1px;
}

/* 統計カード - フッターテキスト */
.stats-card-footer-text {
    font-size: 13px;
}

/* カードタイトル - 大サイズ */
.card-title-lg {
    font-size: 20px;
    letter-spacing: -0.3px;
}

/* ボタン内アイコン */
.btn-icon {
    font-size: 16px;
}

/* ===================================
   Mockup Login Screen - モックアップログイン画面
   Apple Design Philosophy準拠のログイン画面デザイン
   =================================== */

/* ボディ全体 */
.mockup-login-body {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    padding: 20px;
}

/* ログインコンテナ */
.mockup-login-container {
    width: 100%;
    max-width: 460px;
}

/* メインカード */
.mockup-login-card {
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(30, 41, 59, 0.08);
    overflow: hidden;
}

/* カードヘッダー */
.mockup-login-card__header {
    padding: 48px 32px 32px;
    text-align: center;
    border-bottom: 1px solid #f1f5f9;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

/* ロゴ */
.mockup-login-logo {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    box-shadow: 0 8px 24px rgba(0, 122, 255, 0.25);
}

.mockup-login-logo i {
    font-size: 36px;
}

/* タイトル */
.mockup-login-title {
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}

/* サブタイトル */
.mockup-login-subtitle {
    font-size: 15px;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 0;
}

/* カードボディ */
.mockup-login-card__body {
    padding: 32px;
}

/* フォームグループ */
.mockup-login-form-group {
    margin-bottom: 24px;
}

/* フォームラベル */
.mockup-login-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 8px;
}

/* 必須マーク */
.mockup-login-required {
    color: #dc2626;
    margin-left: 2px;
}

/* フォーム入力フィールド */
.mockup-login-input {
    width: 100%;
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    padding: 12px 16px;
    font-size: 15px;
    color: #1e293b;
    background: #ffffff;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mockup-login-input::placeholder {
    color: #94a3b8;
}

.mockup-login-input:focus {
    border-color: #007AFF;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
    outline: none;
}

.mockup-login-input:hover:not(:focus) {
    border-color: #cbd5e1;
}

/* パスワードを忘れた場合 */
.mockup-login-forgot-wrapper {
    margin-bottom: 24px;
    text-align: right;
}

.mockup-login-forgot-link {
    display: inline-block;
    font-size: 14px;
    color: #007AFF;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.mockup-login-forgot-link:hover {
    color: #0051D5;
    text-decoration: underline;
}

/* ログインボタン */
.mockup-login-button {
    width: 100%;
    padding: 14px 24px;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 600;
    background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
    border: none;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.mockup-login-button:hover {
    background: linear-gradient(135deg, #0051D5 0%, #003DA5 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 122, 255, 0.3);
}

.mockup-login-button:active {
    transform: translateY(0);
}

.mockup-login-button__icon {
    font-size: 18px;
}

/* モックアップ注意書き */
.mockup-login-notice {
    margin-top: 24px;
    padding: 16px 20px;
    border-radius: 12px;
    background: rgba(255, 149, 0, 0.1);
    border: 1px solid rgba(255, 149, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 12px;
}

.mockup-login-notice__icon {
    font-size: 20px;
    color: #FF9500;
    flex-shrink: 0;
}

.mockup-login-notice__text {
    font-size: 14px;
    color: #1e293b;
    line-height: 1.5;
}

/* ===================================
   Responsive Design - レスポンシブデザイン
   =================================== */

/* タブレット以下 */
@media (max-width: 768px) {
    .mockup-login-card__header {
        padding: 40px 24px 24px;
    }

    .mockup-login-card__body {
        padding: 24px;
    }

    .mockup-login-title {
        font-size: 24px;
    }

    .mockup-login-logo {
        width: 64px;
        height: 64px;
    }

    .mockup-login-logo i {
        font-size: 32px;
    }
}

/* スマートフォン */
@media (max-width: 576px) {
    .mockup-login-body {
        padding: 16px;
    }

    .mockup-login-card__header {
        padding: 32px 20px 20px;
    }

    .mockup-login-card__body {
        padding: 20px;
    }

    .mockup-login-title {
        font-size: 22px;
    }

    .mockup-login-subtitle {
        font-size: 14px;
    }

    .mockup-login-logo {
        width: 56px;
        height: 56px;
        margin-bottom: 20px;
    }

    .mockup-login-logo i {
        font-size: 28px;
    }

    .mockup-login-button {
        padding: 12px 20px;
        font-size: 15px;
    }

    .mockup-login-notice {
        padding: 12px 16px;
    }

    .mockup-login-notice__text {
        font-size: 13px;
    }
}

/* ===================================
   Accessibility - アクセシビリティ
   =================================== */

/* キーボードフォーカス */
.mockup-login-input:focus-visible,
.mockup-login-button:focus-visible,
.mockup-login-forgot-link:focus-visible {
    outline: 3px solid rgba(0, 122, 255, 0.4);
    outline-offset: 2px;
}

/* ハイコントラストモード */
@media (prefers-contrast: high) {
    .mockup-login-card {
        border-width: 2px;
    }

    .mockup-login-input {
        border-width: 2px;
    }
}

/* アニメーション削減モード */
@media (prefers-reduced-motion: reduce) {
    .mockup-login-input,
    .mockup-login-button,
    .mockup-login-forgot-link {
        transition: none;
    }

    .mockup-login-button:hover {
        transform: none;
    }
}

/* ===================================
   Mockup Password Reset - Apple Design Philosophy
   Minimalist and Sophisticated Design with Primary Blue (#007AFF)
   =================================== */

/* ボディ背景 */
.mockup-password-reset {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* コンテナ */
.mockup-password-reset__container {
    width: 100%;
    max-width: 460px;
    padding: 20px;
}

/* メインカード */
.mockup-password-reset__card {
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(30, 41, 59, 0.08);
}

/* カードヘッダー */
.mockup-password-reset__header {
    padding: 32px 32px 24px;
    text-align: center;
    border-bottom: 1px solid #f1f5f9;
}

/* ロゴ */
.mockup-password-reset__logo {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.2);
}

.mockup-password-reset__logo i {
    font-size: 32px;
}

/* タイトル */
.mockup-password-reset__title {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}

/* サブタイトル */
.mockup-password-reset__subtitle {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 0;
}

/* カードボディ */
.mockup-password-reset__body {
    padding: 32px;
}

/* フォームフィールド */
.mockup-password-reset__field {
    margin-bottom: 24px;
}

/* フォームラベル */
.mockup-password-reset__label {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 8px;
    display: block;
}

/* 必須マーク */
.mockup-password-reset__required {
    color: #dc2626;
}

/* フォーム入力 */
.mockup-password-reset__input {
    width: 100%;
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    padding: 12px 16px;
    font-size: 15px;
    transition: all 0.3s ease;
}

.mockup-password-reset__input:focus {
    border-color: #007AFF;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
    outline: none;
}

.mockup-password-reset__input--invalid {
    border-color: #dc2626;
}

/* エラーメッセージ */
.mockup-password-reset__error {
    display: none;
    color: #dc2626;
    font-size: 13px;
    margin-top: 6px;
}

/* アラート */
.mockup-password-reset__alert {
    border-radius: 12px;
    border: 1px solid;
    padding: 16px;
    margin-bottom: 24px;
}

.mockup-password-reset__alert--error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.mockup-password-reset__alert--success {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}

.mockup-password-reset__alert-icon {
    font-size: 20px;
    margin-right: 8px;
}

/* アクションエリア */
.mockup-password-reset__actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ボタン（Primary） */
.mockup-password-reset__btn--primary {
    width: 100%;
    padding: 14px 24px;
    border-radius: 24px;
    font-size: 15px;
    font-weight: 600;
    background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
    border: none;
    color: #ffffff;
    transition: all 0.3s ease;
    cursor: pointer;
}

.mockup-password-reset__btn--primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #0051D5 0%, #003DA5 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 122, 255, 0.3);
}

.mockup-password-reset__btn--primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ボタンアイコン */
.mockup-password-reset__btn-icon {
    margin-right: 4px;
    vertical-align: middle;
}

/* スピナー */
.mockup-password-reset__spinner {
    margin-right: 8px;
}

/* リンク */
.mockup-password-reset__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #007AFF;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.mockup-password-reset__link:hover {
    color: #0051D5;
    text-decoration: underline;
}

.mockup-password-reset__link-icon {
    margin-right: 4px;
    font-size: 16px;
}

/* レスポンシブ調整 */
@media (max-width: 576px) {
    .mockup-password-reset__header {
        padding: 24px 20px 20px;
    }

    .mockup-password-reset__body {
        padding: 24px 20px;
    }

    .mockup-password-reset__title {
        font-size: 20px;
    }

    .mockup-password-reset__subtitle {
        font-size: 13px;
    }
}

/* アクセシビリティ: キーボードフォーカス */
.mockup-password-reset__input:focus-visible {
    outline: 3px solid rgba(0, 122, 255, 0.4);
    outline-offset: 2px;
}

.mockup-password-reset__btn--primary:focus-visible {
    outline: 3px solid rgba(0, 122, 255, 0.4);
    outline-offset: 2px;
}

/* アクセシビリティ: ハイコントラストモード */
@media (prefers-contrast: high) {
    .mockup-password-reset__card {
        border-width: 2px;
    }

    .mockup-password-reset__input {
        border-width: 2px;
    }
}

/* アニメーション削減モード */
@media (prefers-reduced-motion: reduce) {
    .mockup-password-reset__input,
    .mockup-password-reset__btn--primary,
    .mockup-password-reset__link {
        transition: none;
    }

    .mockup-password-reset__btn--primary:hover {
        transform: none;
    }
}

/* ===================================
   パスワードリセット完了画面スタイル
   BEM記法準拠 - Apple Design Philosophy
   =================================== */

/* Body背景 */
.mockup-password-complete {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* コンテナ */
.mockup-password-complete__container {
    width: 100%;
    max-width: 500px;
    padding: 20px;
}

/* メインカード */
.mockup-password-complete__card {
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(30, 41, 59, 0.08);
}

/* カードヘッダー */
.mockup-password-complete__header {
    padding: 32px 32px 24px;
    text-align: center;
    border-bottom: 1px solid #f1f5f9;
}

/* ロゴ */
.mockup-password-complete__logo {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.2);
}

.mockup-password-complete__logo i {
    font-size: 32px;
}

/* タイトル */
.mockup-password-complete__title {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}

/* サブタイトル */
.mockup-password-complete__subtitle {
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
}

/* カードボディ */
.mockup-password-complete__body {
    padding: 32px;
}

/* フィールド */
.mockup-password-complete__field {
    margin-bottom: 24px;
}

/* ラベル */
.mockup-password-complete__label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 8px;
}

/* 必須マーク */
.mockup-password-complete__required {
    color: #dc2626;
}

/* 入力フィールド */
.mockup-password-complete__input {
    width: 100%;
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    padding: 12px 16px;
    font-size: 15px;
    transition: all 0.3s ease;
}

.mockup-password-complete__input:focus {
    border-color: #007AFF;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
    outline: none;
}

.mockup-password-complete__input--invalid {
    border-color: #dc2626;
}

/* エラーメッセージ */
.mockup-password-complete__error {
    color: #dc2626;
    font-size: 13px;
    margin-top: 6px;
    display: none;
}

/* アラート */
.mockup-password-complete__alert {
    border-radius: 12px;
    border: 1px solid;
    padding: 16px;
    margin-bottom: 24px;
}

.mockup-password-complete__alert--error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.mockup-password-complete__alert--success {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}

.mockup-password-complete__alert-icon {
    font-size: 20px;
    margin-right: 8px;
    flex-shrink: 0;
}

/* パスワード強度インジケーター */
.password-strength-indicator {
    margin-top: 12px;
}

.password-strength-indicator__bar-container {
    width: 100%;
    height: 6px;
    background: #f1f5f9;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 8px;
}

.password-strength-indicator__bar {
    height: 100%;
    width: 0%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 8px;
}

.password-strength-indicator__info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.password-strength-indicator__label {
    font-size: 13px;
    font-weight: 600;
    transition: color 0.3s ease;
}

.password-strength-indicator__help {
    font-size: 12px;
    color: #64748b;
    flex: 1;
    text-align: right;
}

/* パスワード一致フィードバック */
.mockup-password-complete__match-feedback {
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mockup-password-complete__match-feedback--success {
    background: #f0fdf4;
    color: #166534;
}

.mockup-password-complete__match-feedback--error {
    background: #fef2f2;
    color: #991b1b;
}

.mockup-password-complete__match-feedback i {
    font-size: 16px;
}

/* アクション */
.mockup-password-complete__actions {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* プライマリボタン */
.mockup-password-complete__btn--primary {
    width: 100%;
    padding: 14px 24px;
    border-radius: 24px;
    font-size: 15px;
    font-weight: 600;
    background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
    border: none;
    color: #ffffff;
    transition: all 0.3s ease;
    cursor: pointer;
}

.mockup-password-complete__btn--primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #0051D5 0%, #003DA5 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 122, 255, 0.3);
}

.mockup-password-complete__btn--primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ボタンアイコン */
.mockup-password-complete__btn-icon {
    margin-right: 6px;
    vertical-align: middle;
}

/* スピナー */
.mockup-password-complete__spinner {
    margin-right: 8px;
}

/* リンク */
.mockup-password-complete__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px;
    color: #007AFF;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
    padding: 8px;
}

.mockup-password-complete__link:hover {
    color: #0051D5;
    text-decoration: underline;
}

.mockup-password-complete__link-icon {
    font-size: 18px;
}

/* レスポンシブ調整 */
@media (max-width: 576px) {
    .mockup-password-complete__header {
        padding: 24px 20px 20px;
    }

    .mockup-password-complete__body {
        padding: 24px 20px;
    }

    .mockup-password-complete__title {
        font-size: 20px;
    }

    .mockup-password-complete__subtitle {
        font-size: 13px;
    }

    .password-strength-indicator__info {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .password-strength-indicator__help {
        text-align: left;
    }
}

/* アクセシビリティ: キーボードフォーカス */
.mockup-password-complete__input:focus-visible {
    outline: 3px solid rgba(0, 122, 255, 0.4);
    outline-offset: 2px;
}

.mockup-password-complete__btn--primary:focus-visible {
    outline: 3px solid rgba(0, 122, 255, 0.4);
    outline-offset: 2px;
}

/* アクセシビリティ: ハイコントラストモード */
@media (prefers-contrast: high) {
    .mockup-password-complete__card {
        border-width: 2px;
    }

    .mockup-password-complete__input {
        border-width: 2px;
    }

    .password-strength-indicator__bar-container {
        border: 1px solid #cbd5e1;
    }
}

/* アニメーション削減モード */
@media (prefers-reduced-motion: reduce) {
    .mockup-password-complete__input,
    .mockup-password-complete__btn--primary,
    .mockup-password-complete__link,
    .password-strength-indicator__bar {
        transition: none;
    }

    .mockup-password-complete__btn--primary:hover {
        transform: none;
    }
}

/* ===================================
   Invitation Activation Screen - Apple Design Philosophy
   Minimalist, Clean, Sophisticated
   招待アクティベーション画面のスタイル
   =================================== */

/* Body Background */
.mockup-invitation-activate {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* コンテナ */
.mockup-invitation-activate__container {
    width: 100%;
    max-width: 500px;
    padding: 20px;
}

/* メインカード */
.mockup-invitation-activate__card {
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(30, 41, 59, 0.08);
}

/* カードヘッダー */
.mockup-invitation-activate__header {
    padding: 32px 32px 24px;
    text-align: center;
    border-bottom: 1px solid #f1f5f9;
}

/* ロゴ */
.mockup-invitation-activate__logo {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.2);
}

.mockup-invitation-activate__logo i {
    font-size: 32px;
}

/* タイトル */
.mockup-invitation-activate__title {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}

/* サブタイトル */
.mockup-invitation-activate__subtitle {
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
}

/* カードボディ */
.mockup-invitation-activate__body {
    padding: 32px;
}

/* 招待情報表示エリア */
.mockup-invitation-activate__invitation-info {
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
    border-left: 4px solid #007AFF;
}

.mockup-invitation-activate__invitation-email {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mockup-invitation-activate__invitation-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mockup-invitation-activate__invitation-label i {
    font-size: 16px;
    color: #007AFF;
}

.mockup-invitation-activate__invitation-value {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    letter-spacing: -0.01em;
    word-break: break-all;
}

/* フィールド */
.mockup-invitation-activate__field {
    margin-bottom: 24px;
}

/* ラベル */
.mockup-invitation-activate__label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 8px;
}

/* 必須マーク */
.mockup-invitation-activate__required {
    color: #dc2626;
}

/* 入力フィールド */
.mockup-invitation-activate__input {
    width: 100%;
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    padding: 12px 16px;
    font-size: 15px;
    transition: all 0.3s ease;
}

.mockup-invitation-activate__input:focus {
    border-color: #007AFF;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
    outline: none;
}

.mockup-invitation-activate__input--invalid {
    border-color: #dc2626;
}

/* エラーメッセージ */
.mockup-invitation-activate__error {
    color: #dc2626;
    font-size: 13px;
    margin-top: 6px;
    display: none;
}

/* アラート */
.mockup-invitation-activate__alert {
    border-radius: 12px;
    border: 1px solid;
    padding: 16px;
    margin-bottom: 24px;
}

.mockup-invitation-activate__alert--error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.mockup-invitation-activate__alert--success {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}

.mockup-invitation-activate__alert-icon {
    font-size: 20px;
    margin-right: 8px;
    flex-shrink: 0;
}

/* パスワード一致フィードバック */
.mockup-invitation-activate__match-feedback {
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mockup-invitation-activate__match-feedback--success {
    background: #f0fdf4;
    color: #166534;
}

.mockup-invitation-activate__match-feedback--error {
    background: #fef2f2;
    color: #991b1b;
}

.mockup-invitation-activate__match-feedback i {
    font-size: 16px;
}

/* アクション */
.mockup-invitation-activate__actions {
    margin-top: 32px;
}

/* プライマリボタン */
.mockup-invitation-activate__btn--primary {
    width: 100%;
    padding: 14px 24px;
    border-radius: 24px;
    font-size: 15px;
    font-weight: 600;
    background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
    border: none;
    color: #ffffff;
    transition: all 0.3s ease;
    cursor: pointer;
}

.mockup-invitation-activate__btn--primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #0051D5 0%, #003DA5 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 122, 255, 0.3);
}

.mockup-invitation-activate__btn--primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ボタンアイコン */
.mockup-invitation-activate__btn-icon {
    margin-right: 6px;
    vertical-align: middle;
}

/* スピナー */
.mockup-invitation-activate__spinner {
    margin-right: 8px;
}

/* レスポンシブ調整 */
@media (max-width: 576px) {
    .mockup-invitation-activate__header {
        padding: 24px 20px 20px;
    }

    .mockup-invitation-activate__body {
        padding: 24px 20px;
    }

    .mockup-invitation-activate__title {
        font-size: 20px;
    }

    .mockup-invitation-activate__subtitle {
        font-size: 13px;
    }

    .mockup-invitation-activate__invitation-info {
        padding: 14px 16px;
        margin-bottom: 20px;
    }

    .mockup-invitation-activate__invitation-label {
        font-size: 12px;
        gap: 6px;
    }

    .mockup-invitation-activate__invitation-label i {
        font-size: 14px;
    }

    .mockup-invitation-activate__invitation-value {
        font-size: 15px;
    }

    .password-strength-indicator__info {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .password-strength-indicator__help {
        text-align: left;
    }
}

/* アクセシビリティ: キーボードフォーカス */
.mockup-invitation-activate__input:focus-visible {
    outline: 3px solid rgba(0, 122, 255, 0.4);
    outline-offset: 2px;
}

.mockup-invitation-activate__btn--primary:focus-visible {
    outline: 3px solid rgba(0, 122, 255, 0.4);
    outline-offset: 2px;
}

/* アクセシビリティ: ハイコントラストモード */
@media (prefers-contrast: high) {
    .mockup-invitation-activate__card {
        border-width: 2px;
    }

    .mockup-invitation-activate__input {
        border-width: 2px;
    }

    .mockup-invitation-activate__invitation-info {
        border-left-width: 5px;
        background: rgba(248, 250, 252, 0.8);
    }
}

/* アニメーション削減モード */
@media (prefers-reduced-motion: reduce) {
    .mockup-invitation-activate__input,
    .mockup-invitation-activate__btn--primary,
    .password-strength-indicator__bar {
        transition: none;
    }

    .mockup-invitation-activate__btn--primary:hover {
        transform: none;
    }
}

/* ===================================
   Admin List Page - Sophisticated Design
   管理者一覧画面 - 洗練されたデザイン
   =================================== */

/* 招待ボタン - プライマリーブルー */
.admin-list-invite-btn {
    background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
    border: none;
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25);
}

.admin-list-invite-btn:hover {
    background: linear-gradient(135deg, #0051D5 0%, #003DA5 100%);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 122, 255, 0.4);
    transform: translateY(-2px);
}

.admin-list-invite-btn:focus,
.admin-list-invite-btn:active {
    background: linear-gradient(135deg, #0051D5 0%, #003DA5 100%);
    color: #ffffff;
    box-shadow: 0 0 0 0.2rem rgba(0, 122, 255, 0.25);
}

.admin-list-invite-btn i {
    font-size: 18px;
}

/* 検索入力フィールド */
.admin-list-search-input {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 14px;
    transition: all 0.3s ease;
    background: #ffffff;
}

.admin-list-search-input:focus {
    border-color: #007AFF;
    box-shadow: 0 0 0 0.2rem rgba(0, 122, 255, 0.1);
    outline: none;
}

.admin-list-search-input::placeholder {
    color: #94a3b8;
}

/* 表示件数選択 - 小さく控えめなデザイン */
.admin-list-per-page-wrapper {
    height: auto;
}

.admin-list-per-page-label {
    font-size: 12px;
    font-weight: 400;
    color: #94a3b8;
    margin-bottom: 0;
}

.admin-list-per-page-select {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px 32px 6px 10px;
    font-size: 12px;
    transition: all 0.3s ease;
    background: #f8fafc;
    cursor: pointer;
    min-width: 80px;
    max-width: 100px;
}

.admin-list-per-page-select:focus {
    border-color: #cbd5e1;
    box-shadow: 0 0 0 0.15rem rgba(0, 122, 255, 0.08);
    outline: none;
    background: #ffffff;
}

/* ページング情報 */
.pagination-wrapper {
    padding: 12px 0;
}

.pagination-wrapper--top {
    border-bottom: 1px solid #e2e8f0;
}

.pagination-wrapper--bottom {
    border-top: 1px solid #e2e8f0;
    margin-top: 16px;
}

.pagination-info-text {
    font-size: 14px;
    font-weight: 500;
    color: #475569;
}

/* ページネーションコントロール */
.pagination-controls .pagination {
    margin-bottom: 0;
    display: flex;
    flex-direction: row;
    list-style: none;
    padding-left: 0;
    gap: 8px;
    align-items: center;
}

.pagination-controls .page-item {
    display: inline-block;
}

.pagination-controls .page-link {
    border: 1px solid #e2e8f0;
    color: #475569;
    font-weight: 500;
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    text-align: center;
    line-height: 1;
}

.pagination-controls .page-link:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #007AFF;
}

.pagination-controls .page-item.active .page-link {
    background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
    border-color: #007AFF;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25);
}

.pagination-controls .page-item.disabled .page-link {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
}

/* テーブルラッパー */
.admin-list-table-wrapper {
    border-radius: 12px;
    overflow: hidden;
}

/* テーブル本体 - Apple風の洗練されたデザイン */
.admin-list-table {
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
}

/* テーブルヘッダー - ミニマルで洗練された見出し */
.admin-list-table-thead {
    background: linear-gradient(to bottom, #fafbfc 0%, #f8fafc 100%);
    border-bottom: 1px solid #e2e8f0;
}

.admin-list-table-th {
    padding: 20px 24px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border: none;
    white-space: nowrap;
    vertical-align: middle;
}

/* 列幅の最適化 */
.admin-list-table-th--id {
    width: 60px;
}

.admin-list-table-th--name {
    width: 180px;
    min-width: 150px;
}

.admin-list-table-th--email {
    width: 240px;
    min-width: 200px;
}

.admin-list-table-th--status {
    width: 140px;
}

.admin-list-table-th--login {
    width: 160px;
}

.admin-list-table-th--actions {
    text-align: center;
    width: 180px;
    min-width: 160px;
}

/* テーブル行 - 滑らかなホバー効果 */
.admin-list-table-row {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 1px solid #f1f5f9;
}

.admin-list-table-row:hover {
    background: #fafbfc;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.admin-list-table-row:last-child {
    border-bottom: none;
}

.admin-list-table-td {
    padding: 20px 24px;
    vertical-align: middle;
    font-size: 14px;
    color: #334155;
    border: none;
}

.admin-list-table-td--actions {
    text-align: center;
}

/* ID列 - 控えめな表示 */
.admin-list-id {
    color: #94a3b8;
    font-weight: 500;
    font-size: 13px;
}

/* 氏名スタイル - 明確な階層 */
.admin-list-name {
    font-weight: 600;
    color: #1e293b;
    font-size: 15px;
    letter-spacing: -0.2px;
}

/* メールアドレススタイル - 等幅フォントで読みやすく */
.admin-list-email {
    color: #64748b;
    font-family: 'SF Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
    font-size: 13px;
    letter-spacing: -0.1px;
}

/* 最終ログイン - 数字の可読性を重視 */
.admin-list-last-login {
    color: #64748b;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.admin-list-no-login {
    font-size: 13px;
    font-style: italic;
    color: #94a3b8;
}

/* ステータスバッジ - Apple風の洗練されたデザイン */
.admin-list-badge {
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}

.admin-list-badge-icon {
    font-size: 14px;
    margin-right: 0;
}

.admin-list-badge-text {
    line-height: 1;
}

.admin-list-badge--success {
    background: #E8F5E9;
    color: #2e7d32;
    border: 1px solid rgba(46, 125, 50, 0.2);
}

.admin-list-badge--success:hover {
    background: #C8E6C9;
    border-color: rgba(46, 125, 50, 0.3);
}

.admin-list-badge--warning {
    background: #FFF4E6;
    color: #ed6c02;
    border: 1px solid rgba(237, 108, 2, 0.2);
}

.admin-list-badge--warning:hover {
    background: #FFE0B2;
    border-color: rgba(237, 108, 2, 0.3);
}

.admin-list-badge--secondary {
    background: #F5F5F7;
    color: #616161;
    border: 1px solid rgba(97, 97, 97, 0.2);
}

.admin-list-badge--secondary:hover {
    background: #E5E5EA;
    border-color: rgba(97, 97, 97, 0.3);
}

/* アクションボタングループ - 適切な間隔 */
.admin-list-action-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* アクションボタン共通スタイル - Apple風の洗練されたボタン */
.admin-list-action-btn {
    padding: 10px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #e2e8f0;
    background: #ffffff;
    border-radius: 24px;
    cursor: pointer;
}

.admin-list-action-btn i {
    font-size: 18px;
    line-height: 1;
}

.admin-list-action-btn--detail,
.admin-list-action-btn--edit {
    color: #475569;
    border-color: #e2e8f0;
}

.admin-list-action-btn--detail:hover,
.admin-list-action-btn--edit:hover {
    background: #f8fafc;
    border-color: #007AFF;
    color: #007AFF;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.15);
}

.admin-list-action-btn--detail:active,
.admin-list-action-btn--edit:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 122, 255, 0.15);
}

.admin-list-action-btn--delete {
    color: #dc2626;
    border-color: #fecaca;
    background: #ffffff;
}

.admin-list-action-btn--delete:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
}

.admin-list-action-btn--delete:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25);
}

/* レスポンシブ対応 - タブレット */
@media (max-width: 991.98px) {
    .admin-list-per-page-wrapper {
        justify-content: flex-start;
    }

    .admin-list-table-th {
        padding: 16px 20px;
        font-size: 11px;
    }

    .admin-list-table-td {
        padding: 16px 20px;
        font-size: 13px;
    }
}

/* レスポンシブ対応 - モバイル */
@media (max-width: 767.98px) {
    /* モバイルでテーブルをスクロール可能に（水平スクロール） */
    .admin-list-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 12px;
        box-shadow: inset 0 0 0 1px #e2e8f0;
    }

    .admin-list-table {
        min-width: 800px;
    }

    /* テーブルのパディングを調整 */
    .admin-list-table-th {
        padding: 12px 16px;
        font-size: 11px;
        letter-spacing: 0.6px;
    }

    .admin-list-table-td {
        padding: 12px 16px;
        font-size: 13px;
    }

    /* ボタンとラベルを縦並びに */
    .page-title-box {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px;
    }

    .page-title-right {
        width: 100%;
    }

    /* 検索と表示件数を縦並びに */
    .admin-list-search-input {
        margin-bottom: 12px;
        font-size: 16px; /* iOS のズームを防ぐ */
    }

    /* ページング情報をシンプルに */
    .pagination-wrapper .d-flex {
        flex-direction: column;
        gap: 12px;
    }

    .pagination-info {
        width: 100%;
        text-align: center;
    }

    .pagination-controls {
        width: 100%;
    }

    .pagination-controls .pagination {
        justify-content: center;
    }

    /* アクションボタンのサイズを維持（スクロール対応） */
    .admin-list-action-buttons {
        gap: 6px;
    }

    .admin-list-action-btn {
        width: 36px;
        height: 36px;
        padding: 8px;
    }

    .admin-list-action-btn i {
        font-size: 16px;
    }

    /* バッジのサイズ調整 */
    .admin-list-badge {
        padding: 4px 10px;
        font-size: 11px;
    }

    .admin-list-badge-icon {
        font-size: 12px;
    }
}

/* 極小モバイル対応 */
@media (max-width: 575.98px) {
    .admin-list-table-th {
        padding: 10px 12px;
    }

    .admin-list-table-td {
        padding: 10px 12px;
    }

    /* 氏名とメールアドレスのフォントサイズ調整 */
    .admin-list-name {
        font-size: 14px;
    }

    .admin-list-email {
        font-size: 12px;
    }

    .admin-list-last-login {
        font-size: 12px;
    }
}

/* アニメーション削減モード */
@media (prefers-reduced-motion: reduce) {
    .admin-list-invite-btn,
    .admin-list-search-input,
    .admin-list-per-page-select,
    .admin-list-action-btn,
    .admin-list-table-row,
    .pagination-controls .page-link {
        transition: none;
    }

    .admin-list-invite-btn:hover,
    .admin-list-action-btn:hover {
        transform: none;
    }
}

/* ===================================
   Admin Detail Page Styles
   =================================== */

/* 管理者詳細カード */
.admin-detail-card {
    border-radius: 16px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 0;
}

.admin-detail-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(30, 41, 59, 0.08) !important;
}

/* カードヘッダー */
.admin-detail-card-header {
    padding: 20px 24px;
    background: #f8fafc !important;
}

.admin-detail-card-title {
    font-size: 18px;
    color: #1e293b;
    letter-spacing: -0.2px;
}

/* 情報行 */
.admin-detail-row {
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
}

.admin-detail-row:last-child {
    border-bottom: none;
}

/* ラベル */
.admin-detail-label {
    font-size: 14px;
    color: #64748b;
    padding: 8px 0;
}

/* 値 */
.admin-detail-value {
    font-size: 15px;
    color: #1e293b;
    padding: 8px 0;
    font-weight: 500;
}

/* ステータスバッジ */
.admin-detail-badge {
    padding: 8px 16px;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}

.admin-detail-badge--active {
    background: #e8f5e9;
    color: #34c759;
}

.admin-detail-badge--inactive {
    background: #f5f5f7;
    color: #86868b;
}

.admin-detail-badge--pending {
    background: #fff4e6;
    color: #ff9500;
}

.admin-detail-badge--permission {
    background: #e5f1ff;
    color: #007aff;
}

/* 2FA状態表示 */
.admin-detail-2fa {
    font-size: 15px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}

.admin-detail-2fa--enabled {
    color: #34c759;
}

.admin-detail-2fa--disabled {
    color: #86868b;
}

.admin-detail-2fa i {
    font-size: 20px;
}

/* アクティビティリスト */
.admin-detail-activity-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.admin-detail-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    background: #f8fafc;
    transition: all 0.3s ease;
}

.admin-detail-activity-item:hover {
    background: #f1f5f9;
    transform: translateX(4px);
}

.admin-detail-activity-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #475569;
    flex-shrink: 0;
}

.admin-detail-activity-icon i {
    font-size: 20px;
}

.admin-detail-activity-content {
    flex-grow: 1;
}

.admin-detail-activity-text {
    font-size: 15px;
    color: #1e293b;
    font-weight: 500;
    margin-bottom: 4px;
}

.admin-detail-activity-time {
    font-size: 13px;
    color: #64748b;
}

/* アクションボタン */
.admin-detail-btn {
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.1px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-width: 1.5px;
}

.admin-detail-btn--primary {
    background: #007aff;
    border-color: #007aff;
}

.admin-detail-btn--primary:hover {
    background: #0051d5;
    border-color: #0051d5;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}

.admin-detail-btn--secondary {
    color: #475569;
    border-color: #cbd5e1;
}

.admin-detail-btn--secondary:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #334155;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(30, 41, 59, 0.1);
}

/* レスポンシブ対応 */
@media (max-width: 767.98px) {
    /* モバイルでラベルと値を縦並びに */
    .admin-detail-row .col-md-3,
    .admin-detail-row .col-md-9 {
        width: 100%;
    }

    .admin-detail-label {
        margin-bottom: 4px;
        padding: 4px 0;
    }

    .admin-detail-value {
        padding: 4px 0 12px 0;
    }

    /* カードヘッダーのパディング調整 */
    .admin-detail-card-header {
        padding: 16px 20px;
    }

    /* アクションボタンを縦並びに */
    .admin-detail-btn {
        width: 100%;
        justify-content: center;
    }

    /* アクティビティアイテムのレイアウト調整 */
    .admin-detail-activity-item {
        padding: 12px;
        gap: 12px;
    }

    .admin-detail-activity-icon {
        width: 36px;
        height: 36px;
    }

    .admin-detail-activity-icon i {
        font-size: 18px;
    }

    .admin-detail-activity-text {
        font-size: 14px;
    }

    .admin-detail-activity-time {
        font-size: 12px;
    }
}

/* アニメーション削減モード */
@media (prefers-reduced-motion: reduce) {
    .admin-detail-card,
    .admin-detail-btn,
    .admin-detail-activity-item {
        transition: none;
    }

    .admin-detail-card:hover,
    .admin-detail-btn:hover,
    .admin-detail-activity-item:hover {
        transform: none;
    }
}

/* ===================================
   Admin Edit Styles - Apple Design Philosophy
   Sophisticated form editing with Primary Blue accent
   =================================== */

/* カード全体のスタイル */
.admin-edit-card {
    border-radius: 16px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: #ffffff;
}

/* カードヘッダー */
.admin-edit-card-header {
    padding: 24px 28px;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}

.admin-edit-card-title {
    font-size: 18px;
    font-weight: 600;
    color: #1D1D1F;
    letter-spacing: -0.3px;
}

/* ラベルスタイル */
.admin-edit-label {
    font-size: 14px;
    color: #1D1D1F;
    margin-bottom: 8px;
    letter-spacing: -0.2px;
}

.admin-edit-label .text-danger {
    color: #FF3B30 !important;
    margin-left: 2px;
}

/* 入力フィールド共通スタイル */
.admin-edit-input,
.admin-edit-select {
    border: 1px solid #C6C6C8;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 15px;
    color: #1D1D1F;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: #ffffff;
}

.admin-edit-input:focus,
.admin-edit-select:focus {
    border-color: #007AFF;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
    outline: none;
}

.admin-edit-input:hover:not(:focus):not(:disabled):not([readonly]),
.admin-edit-select:hover:not(:focus):not(:disabled) {
    border-color: #86868B;
}

/* 読み取り専用フィールド */
.admin-edit-input--readonly {
    background-color: #F5F5F7;
    color: #86868B;
    cursor: not-allowed;
}

.admin-edit-input--readonly:hover {
    border-color: #C6C6C8;
}

/* セレクトボックスのカスタムスタイル */
.admin-edit-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 12px;
    padding-right: 40px;
    appearance: none;
}

/* ヘルプテキスト */
.admin-edit-help-text {
    font-size: 13px;
    color: #86868B;
    margin-top: 8px;
    line-height: 1.5;
}

.admin-edit-help-text--notice {
    color: #007AFF;
    display: flex;
    align-items: center;
}

.admin-edit-help-text--notice i {
    font-size: 16px;
}

/* エラーメッセージ */
.admin-edit-error {
    font-size: 13px;
    color: #FF3B30;
    margin-top: 8px;
}

/* ボタングループ */
.admin-edit-button-group {
    padding-top: 24px;
    margin-top: 24px;
    border-top: 1px solid #F5F5F7;
}

/* ボタン共通スタイル */
.admin-edit-btn {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 送信ボタン（プライマリ） */
.admin-edit-btn--submit {
    background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
    border: none;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25);
}

.admin-edit-btn--submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 122, 255, 0.35);
    background: linear-gradient(135deg, #0051D5 0%, #003D9F 100%);
}

.admin-edit-btn--submit:active {
    transform: translateY(0);
}

/* キャンセルボタン（セカンダリ） */
.admin-edit-btn--cancel {
    background: #ffffff;
    border: 1px solid #C6C6C8;
    color: #86868B;
}

.admin-edit-btn--cancel:hover {
    background: #F5F5F7;
    border-color: #86868B;
    color: #1D1D1F;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 注意事項カード */
.admin-edit-notice-card {
    border-radius: 16px !important;
    background: linear-gradient(135deg, #E5F1FF 0%, #F5F5F7 100%);
    border: 1px solid #E5F1FF !important;
    margin-top: 24px;
}

.admin-edit-notice-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 122, 255, 0.1);
    color: #007AFF;
    margin-right: 16px;
    flex-shrink: 0;
}

.admin-edit-notice-icon i {
    font-size: 24px;
}

.admin-edit-notice-content {
    flex: 1;
}

.admin-edit-notice-title {
    font-size: 15px;
    font-weight: 600;
    color: #1D1D1F;
    letter-spacing: -0.2px;
}

.admin-edit-notice-list {
    list-style-position: outside;
    padding-left: 20px;
    margin-bottom: 0;
}

.admin-edit-notice-list li {
    font-size: 14px;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 6px;
}

.admin-edit-notice-list li:last-child {
    margin-bottom: 0;
}

/* フォーカス時のフィールド親要素のスタイル */
.admin-edit-field--focused {
    /* 将来的な拡張用 */
}

/* バリデーション状態 */
.was-validated .admin-edit-input:invalid,
.was-validated .admin-edit-select:invalid {
    border-color: #FF3B30;
}

.was-validated .admin-edit-input:valid,
.was-validated .admin-edit-select:valid {
    border-color: #34C759;
}

/* レスポンシブデザイン - タブレット以下 */
@media (max-width: 992px) {
    /* カードヘッダーのパディング調整 */
    .admin-edit-card-header {
        padding: 20px 24px;
    }

    /* ボタングループを縦並びに */
    .admin-edit-button-group {
        flex-direction: column-reverse;
    }

    .admin-edit-btn {
        width: 100%;
        justify-content: center;
    }
}

/* レスポンシブデザイン - モバイル */
@media (max-width: 576px) {
    /* カードのパディング調整 */
    .admin-edit-card .card-body {
        padding: 20px !important;
    }

    .admin-edit-card-header {
        padding: 16px 20px;
    }

    /* タイトルのフォントサイズ調整 */
    .admin-edit-card-title {
        font-size: 16px;
    }

    /* 入力フィールドのパディング調整 */
    .admin-edit-input,
    .admin-edit-select {
        padding: 10px 14px;
        font-size: 16px; /* iOS のズーム防止のため 16px 以上 */
    }

    /* ラベルのサイズ調整 */
    .admin-edit-label {
        font-size: 13px;
    }

    /* ヘルプテキストのサイズ調整 */
    .admin-edit-help-text {
        font-size: 12px;
    }

    /* 注意事項カードのアイコンサイズ調整 */
    .admin-edit-notice-icon {
        width: 40px;
        height: 40px;
    }

    .admin-edit-notice-icon i {
        font-size: 20px;
    }

    .admin-edit-notice-title {
        font-size: 14px;
    }

    .admin-edit-notice-list li {
        font-size: 13px;
    }
}

/* アニメーション削減モード */
@media (prefers-reduced-motion: reduce) {
    .admin-edit-card,
    .admin-edit-btn,
    .admin-edit-input,
    .admin-edit-select {
        transition: none;
    }

    .admin-edit-btn:hover {
        transform: none;
    }
}

/* ダークモード対応（将来の拡張用） */
@media (prefers-color-scheme: dark) {
    /* ダークモード用のスタイルは現時点では未実装 */
}

/* ===================================
   Admin Invite Styles - Apple Design Philosophy
   管理者招待画面のスタイル定義
   =================================== */

/* 招待情報カード */
.admin-invite-info {
    background: linear-gradient(135deg, #E5F1FF 0%, #ffffff 100%);
    border: 1px solid #B8DAFF !important;
}

.admin-invite-info__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #007AFF;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    flex-shrink: 0;
}

.admin-invite-info__icon i {
    font-size: 24px;
}

.admin-invite-info__title {
    font-size: 18px;
    font-weight: 600;
    color: #1D1D1F;
    margin-bottom: 8px;
}

.admin-invite-info__text {
    font-size: 15px;
    color: #475569;
    line-height: 1.6;
}

.admin-invite-info__list {
    margin: 0;
    padding-left: 20px;
    color: #64748b;
    font-size: 14px;
}

.admin-invite-info__list li {
    margin-bottom: 8px;
    line-height: 1.6;
}

.admin-invite-info__list li:last-child {
    margin-bottom: 0;
}

/* 招待フォームカード */
.admin-invite-form {
    background: #ffffff;
}

.admin-invite-form .card-title {
    font-size: 20px;
    font-weight: 600;
    color: #1D1D1F;
}

/* フォームラベル */
.admin-invite-form__label {
    font-size: 15px;
    font-weight: 600;
    color: #1D1D1F;
    margin-bottom: 8px;
}

/* 入力フィールド */
.admin-invite-form__input,
.admin-invite-form__select,
.admin-invite-form__textarea {
    border: 1px solid #C6C6C8;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-invite-form__input:focus,
.admin-invite-form__select:focus,
.admin-invite-form__textarea:focus {
    border-color: #007AFF;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
    outline: none;
}

.admin-invite-form__input.is-valid {
    border-color: #34C759;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2334C759' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px 20px;
}

.admin-invite-form__input.is-invalid {
    border-color: #FF3B30;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23FF3B30'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23FF3B30' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px 20px;
}

.admin-invite-form__select.is-invalid {
    border-color: #FF3B30;
}

/* ヘルパーテキスト */
.admin-invite-form__helper {
    font-size: 13px;
    color: #86868B;
    margin-top: 6px;
    line-height: 1.5;
}

/* バリデーションメッセージ */
.invalid-feedback,
.valid-feedback {
    font-size: 13px;
    margin-top: 6px;
}

.invalid-feedback {
    color: #FF3B30;
}

.valid-feedback {
    color: #34C759;
}

/* 権限説明カード */
.admin-invite-role-info {
    background: linear-gradient(135deg, #F5F5F7 0%, #ffffff 100%);
    border: 1px solid #E5E5EA;
    border-radius: 12px;
    padding: 16px;
    animation: slideIn 0.3s ease-out;
}

.admin-invite-role-info__content {
    display: flex;
    align-items: start;
}

.admin-invite-role-info__icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #007AFF;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.admin-invite-role-info__icon i {
    font-size: 20px;
}

.admin-invite-role-info__title {
    font-size: 15px;
    font-weight: 600;
    color: #1D1D1F;
    margin-bottom: 4px;
}

.admin-invite-role-info__text {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 0;
}

/* アクションボタンエリア */
.admin-invite-form__actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #F1F5F9;
}

/* キャンセルボタン */
.admin-invite-form__btn-cancel {
    padding: 12px 32px;
    border-radius: 24px;
    font-weight: 600;
    font-size: 15px;
    border: 1px solid #C6C6C8;
    color: #86868B;
    background: #ffffff;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-invite-form__btn-cancel:hover {
    background: #F5F5F7;
    border-color: #86868B;
    color: #1D1D1F;
    transform: translateY(-1px);
}

/* 送信ボタン */
.admin-invite-form__btn-submit {
    padding: 12px 32px;
    border-radius: 24px;
    font-weight: 600;
    font-size: 15px;
    background: #007AFF;
    border: none;
    color: #ffffff;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-invite-form__btn-submit:hover {
    background: #0051D5;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}

.admin-invite-form__btn-submit:disabled {
    background: #86868B;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* 成功メッセージカード */
.admin-invite-success {
    background: linear-gradient(135deg, #E8F5E9 0%, #ffffff 100%);
    border: 1px solid #B8E6C0 !important;
    animation: fadeIn 0.5s ease-out;
}

.admin-invite-success__icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #34C759;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    animation: scaleIn 0.5s ease-out;
}

.admin-invite-success__icon i {
    font-size: 48px;
}

.admin-invite-success__title {
    font-size: 24px;
    font-weight: 600;
    color: #1D1D1F;
    margin-bottom: 16px;
}

.admin-invite-success__text {
    font-size: 15px;
    color: #475569;
    line-height: 1.8;
    margin-bottom: 32px;
}

.admin-invite-success__text span {
    font-weight: 600;
    color: #1D1D1F;
}

.admin-invite-success__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.admin-invite-success__btn {
    padding: 12px 32px;
    border-radius: 24px;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-invite-success__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* アニメーション定義 */
@keyframes slideIn {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* レスポンシブデザイン */
@media (max-width: 768px) {
    /* 招待情報カードのアイコンサイズ調整 */
    .admin-invite-info__icon {
        width: 40px;
        height: 40px;
    }

    .admin-invite-info__icon i {
        font-size: 20px;
    }

    .admin-invite-info__title {
        font-size: 16px;
    }

    .admin-invite-info__text {
        font-size: 14px;
    }

    /* フォームラベルのサイズ調整 */
    .admin-invite-form__label {
        font-size: 14px;
    }

    /* 入力フィールドのサイズ調整（iOS ズーム防止） */
    .admin-invite-form__input,
    .admin-invite-form__select,
    .admin-invite-form__textarea {
        font-size: 16px;
    }

    /* アクションボタンを縦並びに */
    .admin-invite-form__actions {
        flex-direction: column-reverse;
        gap: 8px;
    }

    .admin-invite-form__btn-cancel,
    .admin-invite-form__btn-submit {
        width: 100%;
    }

    /* 成功メッセージのアイコンサイズ調整 */
    .admin-invite-success__icon {
        width: 64px;
        height: 64px;
    }

    .admin-invite-success__icon i {
        font-size: 36px;
    }

    .admin-invite-success__title {
        font-size: 20px;
    }

    /* 成功メッセージのボタンを縦並びに */
    .admin-invite-success__actions {
        flex-direction: column;
        gap: 8px;
    }

    .admin-invite-success__btn {
        width: 100%;
    }
}

/* アニメーション削減モード */
@media (prefers-reduced-motion: reduce) {
    .admin-invite-form__input,
    .admin-invite-form__select,
    .admin-invite-form__textarea,
    .admin-invite-form__btn-cancel,
    .admin-invite-form__btn-submit,
    .admin-invite-success__btn {
        transition: none;
    }

    .admin-invite-form__btn-submit:hover,
    .admin-invite-form__btn-cancel:hover,
    .admin-invite-success__btn:hover {
        transform: none;
    }

    .admin-invite-role-info,
    .admin-invite-success,
    .admin-invite-success__icon {
        animation: none;
    }
}

/* ===================================
   2FA Enable Screen - Apple Design Philosophy
   Primary Blue: #007AFF (System Blue)
   =================================== */

/* アラートコンポーネント（情報表示用） */
.twofa-enable-alert {
    border-radius: 12px;
    background: #E5F1FF;
    padding: 20px;
    margin-bottom: 24px;
}

.twofa-enable-alert__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #007AFF;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    flex-shrink: 0;
}

.twofa-enable-alert__icon i {
    font-size: 24px;
}

.twofa-enable-alert__title {
    color: #1D1D1F;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.twofa-enable-alert__text {
    color: #1D1D1F;
    font-size: 14px;
    line-height: 1.6;
}

/* 警告タイプのアラート */
.twofa-enable-alert--warning {
    background: #FFF4E6;
}

.twofa-enable-alert__icon--warning {
    background: #FF9500;
}

/* プログレスステップ */
.twofa-enable-steps {
    border-radius: 12px;
}

.twofa-enable-step {
    display: flex;
    align-items: center;
    gap: 12px;
}

.twofa-enable-step__number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #007AFF;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 18px;
    flex-shrink: 0;
}

.twofa-enable-step__content {
    flex: 1;
}

.twofa-enable-step__title {
    font-size: 15px;
    font-weight: 600;
    color: #1D1D1F;
    margin-bottom: 4px;
}

.twofa-enable-step__description {
    font-size: 13px;
    color: #86868B;
    margin-bottom: 0;
}

/* カードコンポーネント */
.twofa-enable-card {
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.twofa-enable-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* セクションヘッダー */
.twofa-enable-section__header {
    margin-bottom: 32px;
}

.twofa-enable-section__number {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 8px;
    background: #F5F5F7;
    color: #007AFF;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
}

.twofa-enable-section__title {
    font-size: 20px;
    font-weight: 600;
    color: #1D1D1F;
    margin-bottom: 8px;
}

.twofa-enable-section__subtitle {
    font-size: 15px;
    color: #86868B;
    margin-bottom: 0;
}

/* 認証アプリリスト */
.twofa-enable-apps {
    margin-top: 24px;
}

.twofa-enable-app {
    text-align: center;
    padding: 24px;
    border: 1px solid #E5E5EA;
    border-radius: 12px;
    background: #FFFFFF;
    transition: all 0.3s ease;
}

.twofa-enable-app:hover {
    border-color: #007AFF;
    background: #F5F5F7;
    transform: translateY(-2px);
}

.twofa-enable-app__icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: #F5F5F7;
    color: #007AFF;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.twofa-enable-app__icon i {
    font-size: 28px;
}

.twofa-enable-app__name {
    font-size: 15px;
    font-weight: 600;
    color: #1D1D1F;
    margin-bottom: 4px;
}

.twofa-enable-app__platform {
    font-size: 13px;
    color: #86868B;
    margin-bottom: 0;
}

/* QRコード表示エリア */
.twofa-enable-qr {
    margin-top: 24px;
}

.twofa-enable-qr__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px;
    background: #F5F5F7;
    border-radius: 12px;
}

.twofa-enable-qr__code {
    width: 200px;
    height: 200px;
    padding: 16px;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.twofa-enable-qr__code svg {
    width: 100%;
    height: 100%;
    display: block;
}

.twofa-enable-qr__helper {
    margin-top: 16px;
    font-size: 14px;
    color: #86868B;
    margin-bottom: 0;
}

/* シークレットキーセクション */
.twofa-enable-secret {
    margin-top: 32px;
}

.twofa-enable-secret__divider {
    position: relative;
    text-align: center;
    margin-bottom: 24px;
}

.twofa-enable-secret__divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #E5E5EA;
}

.twofa-enable-secret__divider-text {
    position: relative;
    display: inline-block;
    padding: 0 16px;
    background: #FFFFFF;
    color: #86868B;
    font-size: 13px;
    font-weight: 500;
}

.twofa-enable-secret__label {
    font-size: 14px;
    color: #1D1D1F;
    margin-bottom: 8px;
}

.twofa-enable-secret__input-group {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.twofa-enable-secret__input {
    flex: 1;
    font-family: 'Courier New', monospace;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2px;
    text-align: center;
    border: 1px solid #E5E5EA;
    border-radius: 8px;
    padding: 12px 16px;
    background: #F5F5F7;
}

.twofa-enable-secret__input:focus {
    border-color: #007AFF;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.twofa-enable-secret__copy-btn {
    border-radius: 8px;
    padding: 12px 24px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.twofa-enable-secret__help {
    font-size: 13px;
    display: block;
    margin-top: 8px;
}

/* 認証コード検証エリア */
.twofa-enable-verify {
    margin-top: 24px;
}

.twofa-enable-verify__form {
    max-width: 400px;
}

.twofa-enable-verify__label {
    font-size: 14px;
    color: #1D1D1F;
    margin-bottom: 8px;
}

.twofa-enable-verify__input {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 4px;
    text-align: center;
    border: 2px solid #E5E5EA;
    border-radius: 12px;
    padding: 16px;
    transition: all 0.3s ease;
}

.twofa-enable-verify__input:focus {
    border-color: #007AFF;
    background: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
}

.twofa-enable-verify__input::placeholder {
    color: #C6C6C8;
    opacity: 1;
}

.twofa-enable-verify__help {
    font-size: 13px;
    display: block;
    margin-top: 8px;
}

/* アクションボタン */
.twofa-enable-btn-cancel {
    border-radius: 24px;
    font-size: 16px;
    transition: all 0.3s ease;
    border: 1px solid #C6C6C8;
    color: #86868B;
}

.twofa-enable-btn-cancel:hover {
    background: #F5F5F7;
    border-color: #86868B;
    color: #1D1D1F;
    transform: translateY(-2px);
}

.twofa-enable-btn-submit {
    border-radius: 24px;
    font-size: 16px;
    background: #007AFF;
    border: none;
    transition: all 0.3s ease;
    opacity: 0.5;
}

.twofa-enable-btn-submit:disabled {
    cursor: not-allowed;
    transform: none;
}

.twofa-enable-btn-submit--active {
    opacity: 1;
}

.twofa-enable-btn-submit--active:hover {
    background: #0051D5;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}

/* レスポンシブ対応 */
@media (max-width: 767px) {
    .twofa-enable-step {
        flex-direction: column;
        text-align: center;
    }

    .twofa-enable-qr__code {
        width: 160px;
        height: 160px;
    }

    .twofa-enable-secret__input-group {
        flex-direction: column;
    }

    .twofa-enable-verify__input {
        font-size: 20px;
        letter-spacing: 2px;
    }
}

/* アクセシビリティ: アニメーション無効化の対応 */
@media (prefers-reduced-motion: reduce) {
    .twofa-enable-card,
    .twofa-enable-app,
    .twofa-enable-btn-cancel,
    .twofa-enable-btn-submit {
        transition: none;
        transform: none !important;
    }
}

/* ===================================
   Two-Factor Authentication Disable - Sophisticated Security-Focused Design
   Apple-inspired premium UI with danger emphasis
   =================================== */

/* ===================================
   Danger Alert - セキュリティ警告
   =================================== */

.twofa-disable-alert {
    border-radius: 12px;
    padding: 24px;
    background: rgba(255, 59, 48, 0.08);
}

.twofa-disable-alert__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255, 59, 48, 0.15);
    color: #FF3B30;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    flex-shrink: 0;
}

.twofa-disable-alert__icon i {
    font-size: 24px;
}

.twofa-disable-alert__title {
    color: #FF3B30;
    font-size: 18px;
    font-weight: 600;
}

.twofa-disable-alert__text {
    color: #1D1D1F;
    font-size: 15px;
    line-height: 1.6;
}

.twofa-disable-alert__list {
    margin: 12px 0 0 0;
    padding-left: 20px;
}

.twofa-disable-alert__list li {
    color: #1D1D1F;
    font-size: 14px;
    line-height: 1.8;
}

.twofa-disable-alert--warning {
    background: rgba(255, 149, 0, 0.08);
}

.twofa-disable-alert__icon--warning {
    background: rgba(255, 149, 0, 0.15);
    color: #FF9500;
}

/* ===================================
   Card - カード共通スタイル
   =================================== */

.twofa-disable-card {
    border-radius: 16px;
    transition: all 0.3s ease;
}

.twofa-disable-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

/* ===================================
   Status Display - 現在のステータス
   =================================== */

.twofa-disable-status__header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #F5F5F7;
}

.twofa-disable-status__icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: #E5F1FF;
    color: #007AFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.twofa-disable-status__icon i {
    font-size: 28px;
}

.twofa-disable-status__title {
    font-size: 20px;
    font-weight: 600;
    color: #1D1D1F;
    margin: 0;
}

.twofa-disable-status__subtitle {
    font-size: 14px;
    color: #34C759;
    margin: 4px 0 0 0;
    font-weight: 500;
}

.twofa-disable-status__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #F5F5F7;
    border-radius: 12px;
}

.twofa-disable-status__item-icon {
    font-size: 20px;
    color: #007AFF;
}

.twofa-disable-status__item-label {
    font-size: 12px;
    color: #86868B;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.twofa-disable-status__item-value {
    font-size: 15px;
    color: #1D1D1F;
    font-weight: 600;
    margin: 4px 0 0 0;
}

/* ===================================
   Form Section - フォームセクション
   =================================== */

.twofa-disable-section {
    margin-bottom: 32px;
}

.twofa-disable-section:last-child {
    margin-bottom: 0;
}

.twofa-disable-section__title {
    font-size: 18px;
    font-weight: 600;
    color: #1D1D1F;
    margin-bottom: 8px;
}

.twofa-disable-section__subtitle {
    font-size: 14px;
    color: #86868B;
    margin-bottom: 24px;
    line-height: 1.6;
}

/* ===================================
   Form Controls - フォーム要素
   =================================== */

.twofa-disable-label {
    font-size: 15px;
    color: #1D1D1F;
    margin-bottom: 8px;
}

.twofa-disable-input {
    border: 1px solid #C6C6C8;
    border-radius: 8px;
    padding: 12px 48px 12px 16px;
    font-size: 15px;
    color: #1D1D1F;
    transition: all 0.3s ease;
}

.twofa-disable-input:focus {
    border-color: #007AFF;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
    outline: none;
}

.twofa-disable-input::placeholder {
    color: #C6C6C8;
}

.twofa-disable-textarea {
    border: 1px solid #C6C6C8;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 15px;
    color: #1D1D1F;
    resize: vertical;
    transition: all 0.3s ease;
}

.twofa-disable-textarea:focus {
    border-color: #007AFF;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
    outline: none;
}

.twofa-disable-help {
    font-size: 13px;
    color: #86868B;
    margin-top: 8px;
    display: flex;
    align-items: center;
}

/* ===================================
   Password Toggle - パスワード表示/非表示
   =================================== */

.twofa-disable-password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #86868B;
    padding: 4px 8px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.twofa-disable-password-toggle:hover {
    color: #007AFF;
}

.twofa-disable-password-toggle i {
    font-size: 20px;
}

/* ===================================
   Reason Selection - 理由選択
   =================================== */

.twofa-disable-reason {
    margin-bottom: 12px;
}

.twofa-disable-reason__option {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border: 2px solid #E5E5EA;
    border-radius: 12px;
    background: #FFFFFF;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.twofa-disable-reason__option:hover {
    border-color: #C6C6C8;
    background: #FAFAFA;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.btn-check:checked + .twofa-disable-reason__option {
    border-color: #007AFF;
    background: rgba(0, 122, 255, 0.05);
}

.twofa-disable-reason__icon {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #F5F5F7;
    color: #86868B;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.twofa-disable-reason__icon i {
    font-size: 22px;
}

.btn-check:checked + .twofa-disable-reason__option .twofa-disable-reason__icon {
    background: rgba(0, 122, 255, 0.15);
    color: #007AFF;
}

.twofa-disable-reason__content {
    flex: 1;
}

.twofa-disable-reason__title {
    font-size: 15px;
    font-weight: 600;
    color: #1D1D1F;
    margin: 0 0 4px 0;
}

.twofa-disable-reason__description {
    font-size: 13px;
    color: #86868B;
    margin: 0;
    line-height: 1.5;
}

.twofa-disable-reason__check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #E5E5EA;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.twofa-disable-reason__check i {
    font-size: 16px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-check:checked + .twofa-disable-reason__option .twofa-disable-reason__check {
    background: #007AFF;
}

.btn-check:checked + .twofa-disable-reason__option .twofa-disable-reason__check i {
    opacity: 1;
}

/* ===================================
   Other Reason - その他の理由
   =================================== */

.twofa-disable-other-reason {
    display: none;
    margin-top: 24px;
    padding: 24px;
    background: #F5F5F7;
    border-radius: 12px;
}

/* ===================================
   Action Buttons - アクションボタン
   =================================== */

.twofa-disable-btn-cancel {
    border: 2px solid #E5E5EA;
    color: #86868B;
    background: #FFFFFF;
    transition: all 0.3s ease;
}

.twofa-disable-btn-cancel:hover {
    border-color: #C6C6C8;
    color: #1D1D1F;
    background: #F5F5F7;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.twofa-disable-btn-submit {
    background: #FF3B30;
    border: none;
    transition: all 0.3s ease;
    opacity: 0.5;
}

.twofa-disable-btn-submit:disabled {
    cursor: not-allowed;
    transform: none;
}

.twofa-disable-btn-submit--active {
    opacity: 1;
}

.twofa-disable-btn-submit--active:hover {
    background: #D32F26;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 59, 48, 0.3);
}

/* ===================================
   Confirmation Modal - 確認モーダル
   =================================== */

.twofa-disable-modal {
    border-radius: 16px;
    border: none;
}

.twofa-disable-modal__icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255, 59, 48, 0.1);
    color: #FF3B30;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.twofa-disable-modal__icon i {
    font-size: 36px;
}

.twofa-disable-modal__title {
    font-size: 22px;
    font-weight: 600;
    color: #1D1D1F;
    margin-bottom: 16px;
}

.twofa-disable-modal__text {
    font-size: 15px;
    color: #86868B;
    line-height: 1.6;
}

/* ===================================
   Responsive Design - レスポンシブ対応
   =================================== */

@media (max-width: 767px) {
    .twofa-disable-alert {
        padding: 16px;
    }

    .twofa-disable-alert__icon {
        width: 40px;
        height: 40px;
        margin-right: 12px;
    }

    .twofa-disable-alert__icon i {
        font-size: 20px;
    }

    .twofa-disable-status__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .twofa-disable-reason__option {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .twofa-disable-reason__check {
        position: absolute;
        top: 20px;
        right: 20px;
    }

    .twofa-disable-password-toggle {
        right: 8px;
    }
}

/* ===================================
   Accessibility - アクセシビリティ対応
   =================================== */

@media (prefers-reduced-motion: reduce) {
    .twofa-disable-card,
    .twofa-disable-reason__option,
    .twofa-disable-btn-cancel,
    .twofa-disable-btn-submit {
        transition: none;
        transform: none !important;
    }
}

/* Focus visible for keyboard navigation */
.twofa-disable-input:focus-visible,
.twofa-disable-textarea:focus-visible {
    outline: 2px solid #007AFF;
    outline-offset: 2px;
}

/* ===================================
   Two-Factor Authentication Verification Screen - Apple Design Philosophy
   Login時の2FA検証画面
   =================================== */

/* Body - 全画面センター配置 */
.twofa-verify-body {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    padding: 20px;
}

/* メインコンテナ */
.twofa-verify-container {
    width: 100%;
    max-width: 480px;
}

/* ===================================
   Card - メインカード
   =================================== */

.twofa-verify-card {
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(30, 41, 59, 0.08);
}

/* Card Header - カードヘッダー */
.twofa-verify-card__header {
    padding: 40px 32px 24px;
    text-align: center;
    border-bottom: 1px solid #f1f5f9;
}

/* ===================================
   Icon - セキュリティアイコン
   =================================== */

.twofa-verify-icon {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    box-shadow: 0 4px 16px rgba(0, 122, 255, 0.25);
    animation: twofa-verify-pulse 2s ease-in-out infinite;
}

.twofa-verify-icon i {
    font-size: 36px;
}

/* セキュリティアイコンのパルスアニメーション */
@keyframes twofa-verify-pulse {
    0%, 100% {
        box-shadow: 0 4px 16px rgba(0, 122, 255, 0.25);
    }
    50% {
        box-shadow: 0 4px 20px rgba(0, 122, 255, 0.35);
    }
}

/* ===================================
   Typography - タイトル・説明文
   =================================== */

.twofa-verify-title {
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.5px;
    margin-bottom: 12px;
}

.twofa-verify-subtitle {
    font-size: 16px;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 8px;
}

.twofa-verify-username {
    font-weight: 600;
    color: #334155;
}

.twofa-verify-instruction {
    font-size: 14px;
    color: #94a3b8;
    line-height: 1.5;
    margin-bottom: 0;
}

/* ===================================
   Card Body - カードボディ
   =================================== */

.twofa-verify-card__body {
    padding: 32px;
}

/* ===================================
   Alerts - メッセージ表示
   =================================== */

.twofa-verify-alert {
    border-radius: 12px;
    border: 1px solid;
    padding: 16px;
    margin-bottom: 24px;
    font-size: 14px;
}

.twofa-verify-alert i {
    font-size: 20px;
}

/* Success Alert */
.twofa-verify-alert--success {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}

/* Error Alert */
.twofa-verify-alert--danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

/* ===================================
   Form Elements - フォーム要素
   =================================== */

/* Form Label */
.twofa-verify-form__label {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 8px;
    display: block;
}

/* Form Input - 大きく見やすい入力フィールド */
.twofa-verify-form__input {
    width: 100%;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    padding: 18px 20px;
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 4px;
    transition: all 0.3s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
}

.twofa-verify-form__input:focus {
    border-color: #007AFF;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
    outline: none;
}

.twofa-verify-form__input.is-invalid {
    border-color: #dc2626;
}

.twofa-verify-form__input::placeholder {
    color: #cbd5e1;
    letter-spacing: 2px;
}

/* Form Error */
.twofa-verify-form__error {
    color: #dc2626;
    font-size: 13px;
    margin-top: 8px;
    display: none;
}

/* ===================================
   Countdown - カウントダウンタイマー
   =================================== */

.twofa-verify-countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    background: #fffbeb;
    border: 1px solid #fef3c7;
    border-radius: 8px;
    color: #92400e;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 24px;
}

.twofa-verify-countdown i {
    font-size: 16px;
}

/* ===================================
   Checkbox - 信頼できるデバイス
   =================================== */

.twofa-verify-checkbox {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.twofa-verify-checkbox:hover {
    background: #f1f5f9;
}

.twofa-verify-checkbox__input {
    width: 20px;
    height: 20px;
    border-radius: 8px;
    border: 2px solid #cbd5e1;
    margin-right: 12px;
    cursor: pointer;
    flex-shrink: 0;
}

.twofa-verify-checkbox__input:checked {
    background-color: #007AFF;
    border-color: #007AFF;
}

.twofa-verify-checkbox__input:focus {
    outline: 2px solid #007AFF;
    outline-offset: 2px;
}

.twofa-verify-checkbox__label {
    font-size: 14px;
    color: #475569;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 0;
}

/* ===================================
   Buttons - ボタン
   =================================== */

/* Primary Button - 検証ボタン */
.twofa-verify-btn--primary {
    width: 100%;
    padding: 16px 32px;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 600;
    background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
    border: none;
    color: #ffffff;
    transition: all 0.3s ease;
    margin-bottom: 16px;
    cursor: pointer;
}

.twofa-verify-btn--primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #0051D5 0%, #003DA5 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 122, 255, 0.3);
}

.twofa-verify-btn--primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Secondary Button - ログアウトボタン */
.twofa-verify-btn--secondary {
    width: 100%;
    padding: 14px 32px;
    border-radius: 24px;
    font-size: 15px;
    font-weight: 500;
    background: transparent;
    border: 1.5px solid #e2e8f0;
    color: #64748b;
    transition: all 0.3s ease;
    margin-bottom: 16px;
    cursor: pointer;
}

.twofa-verify-btn--secondary:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #475569;
}

/* ===================================
   Switch Links - モード切り替えリンク
   =================================== */

.twofa-verify-switch {
    text-align: center;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
}

.twofa-verify-switch__link {
    display: inline-block;
    font-size: 14px;
    color: #007AFF;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.twofa-verify-switch__link:hover {
    color: #0051D5;
    text-decoration: underline;
}

/* ===================================
   Recovery Info - リカバリーコード説明
   =================================== */

.twofa-verify-recovery-info {
    display: flex;
    align-items: flex-start;
    padding: 16px;
    background: #e0f2fe;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    color: #075985;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 20px;
}

.twofa-verify-recovery-info i {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ===================================
   Help Link - ヘルプリンク
   =================================== */

.twofa-verify-help {
    text-align: center;
    margin-top: 16px;
}

.twofa-verify-help__link {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    color: #64748b;
    text-decoration: none;
    transition: color 0.2s ease;
}

.twofa-verify-help__link:hover {
    color: #007AFF;
}

.twofa-verify-help__link i {
    font-size: 16px;
}

/* ===================================
   Responsive Design - レスポンシブ対応
   =================================== */

@media (max-width: 576px) {
    .twofa-verify-body {
        padding: 16px;
    }

    .twofa-verify-card__header {
        padding: 32px 24px 20px;
    }

    .twofa-verify-card__body {
        padding: 24px 20px;
    }

    .twofa-verify-title {
        font-size: 24px;
    }

    .twofa-verify-subtitle {
        font-size: 15px;
    }

    .twofa-verify-form__input {
        font-size: 20px;
        padding: 16px 18px;
    }

    .twofa-verify-icon {
        width: 64px;
        height: 64px;
        border-radius: 16px;
        margin-bottom: 20px;
    }

    .twofa-verify-icon i {
        font-size: 32px;
    }
}

/* ===================================
   Animation - フェードイン
   =================================== */

@keyframes twofa-verify-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.twofa-verify-card {
    animation: twofa-verify-fade-in 0.4s ease-out;
}

/* ===================================
   Accessibility - アクセシビリティ
   =================================== */

/* Focus visible for keyboard navigation */
.twofa-verify-form__input:focus-visible,
.twofa-verify-btn--primary:focus-visible,
.twofa-verify-btn--secondary:focus-visible,
.twofa-verify-switch__link:focus-visible {
    outline: 2px solid #007AFF;
    outline-offset: 2px;
}

/* Reduce motion for users who prefer */
@media (prefers-reduced-motion: reduce) {
    .twofa-verify-card,
    .twofa-verify-icon,
    .twofa-verify-btn--primary,
    .twofa-verify-btn--secondary,
    .twofa-verify-form__input {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===================================
   Audit Log Screen - Apple Design Philosophy
   Sophisticated, Clean, Minimal with Primary Blue (#007AFF)
   =================================== */

/* ===================================
   Export Button - Premium Primary Blue
   =================================== */

.audit-log-export-btn {
    background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
    border: none;
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.2);
}

.audit-log-export-btn:hover {
    background: linear-gradient(135deg, #0051D5 0%, #003D9F 100%);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 122, 255, 0.35);
    transform: translateY(-2px);
}

.audit-log-export-btn:active {
    transform: translateY(0);
}

.audit-log-export-btn:focus-visible {
    outline: 2px solid #007AFF;
    outline-offset: 2px;
}

/* ===================================
   Filter Card - Elegant Collapsible Design
   =================================== */

.audit-log-filter-card {
    border-radius: 12px;
    transition: all 0.3s ease;
}

.audit-log-filter-card .card-title {
    font-size: 16px;
    color: #1D1D1F;
    letter-spacing: -0.3px;
}

.audit-log-filter-toggle {
    color: #007AFF;
    transition: all 0.3s ease;
}

.audit-log-filter-toggle:hover {
    color: #0051D5;
}

/* Filter Form Elements */
.audit-log-date-input,
.audit-log-select {
    border: 1px solid #d2d2d7;
    font-size: 14px;
    color: #1D1D1F;
    transition: all 0.3s ease;
}

.audit-log-date-input:focus,
.audit-log-select:focus {
    border-color: #007AFF;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

/* Filter Buttons */
.audit-log-search-btn {
    background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
    border: none;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.audit-log-search-btn:hover {
    background: linear-gradient(135deg, #0051D5 0%, #003D9F 100%);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}

.audit-log-clear-btn {
    border: 1px solid #d2d2d7;
    color: #86868B;
    background: #ffffff;
    transition: all 0.3s ease;
}

.audit-log-clear-btn:hover {
    background: #F5F5F7;
    border-color: #86868B;
    color: #1D1D1F;
}

/* ===================================
   Table Card - Premium Design
   =================================== */

.audit-log-table-card {
    border-radius: 12px;
}

/* Pagination Info */
.audit-log-pagination-info {
    font-size: 14px;
    color: #86868B;
}

.audit-log-pagination-info strong {
    color: #1D1D1F;
    font-weight: 600;
}

/* Per Page Select */
.audit-log-per-page-select {
    border: 1px solid #d2d2d7;
    color: #1D1D1F;
    font-size: 14px;
    min-width: 100px;
    transition: all 0.3s ease;
}

.audit-log-per-page-select:focus {
    border-color: #007AFF;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

/* ===================================
   Table - Apple-inspired Minimalist Design
   =================================== */

.audit-log-table-wrapper {
    border-radius: 8px;
    overflow: hidden;
}

.audit-log-table {
    margin-bottom: 0;
    font-size: 14px;
}

/* Table Header */
.audit-log-table__header {
    background: #F5F5F7;
    border-bottom: 2px solid #d2d2d7;
}

.audit-log-table__th {
    padding: 14px 16px;
    font-weight: 600;
    color: #1D1D1F;
    font-size: 13px;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    border: none;
}

.audit-log-table__th--actions {
    text-align: center;
    width: 120px;
}

/* Table Body */
.audit-log-table__body {
    background: #ffffff;
}

.audit-log-table__row {
    border-bottom: 1px solid #F5F5F7;
    transition: all 0.2s ease;
}

.audit-log-table__row:hover {
    background: #FAFAFA;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.audit-log-table__row:last-child {
    border-bottom: none;
}

/* Table Cells */
.audit-log-table__td {
    padding: 14px 16px;
    color: #1D1D1F;
    vertical-align: middle;
    border: none;
}

/* Timestamp Cell - Monospace Font */
.audit-log-table__td--timestamp {
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 13px;
    color: #86868B;
    font-weight: 500;
    white-space: nowrap;
}

/* Admin Name Cell */
.audit-log-table__td--admin {
    font-weight: 500;
    color: #1D1D1F;
}

/* IP Address Cell - Monospace Font */
.audit-log-table__td--ip {
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 13px;
    color: #86868B;
    white-space: nowrap;
}

/* User Agent Cell - Truncated with Tooltip */
.audit-log-table__td--agent {
    font-size: 13px;
    color: #86868B;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: help;
}

/* Actions Cell */
.audit-log-table__td--actions {
    text-align: center;
}

/* ===================================
   Action Badges - Color-coded Status
   =================================== */

.audit-log-badge {
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* Success Badge - Green */
.audit-log-badge--success {
    background: #E8F5E9;
    color: #34C759;
}

/* Danger Badge - Red */
.audit-log-badge--danger {
    background: #FFEBEE;
    color: #FF3B30;
}

/* Info Badge - Blue */
.audit-log-badge--info {
    background: #E5F1FF;
    color: #007AFF;
}

/* Warning Badge - Orange */
.audit-log-badge--warning {
    background: #FFF4E6;
    color: #FF9500;
}

/* Secondary Badge - Gray */
.audit-log-badge--secondary {
    background: #F5F5F7;
    color: #86868B;
}

/* ===================================
   Detail Button - Primary Outline
   =================================== */

.audit-log-detail-btn {
    border: 1px solid #007AFF;
    color: #007AFF;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 16px;
    transition: all 0.3s ease;
}

.audit-log-detail-btn:hover {
    background: #007AFF;
    border-color: #007AFF;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.2);
}

.audit-log-detail-btn:active {
    transform: translateY(0);
}

/* ===================================
   Modal - Clean Apple Design
   =================================== */

.audit-log-modal {
    border-radius: 16px;
}

.audit-log-modal .modal-header {
    padding: 24px 24px 16px;
}

.audit-log-modal .modal-body {
    padding: 16px 24px;
}

.audit-log-modal .modal-footer {
    padding: 16px 24px 24px;
}

.audit-log-modal-alert {
    background: #E5F1FF;
    border-radius: 12px;
    padding: 16px;
}

/* ===================================
   Responsive Design - Mobile First
   =================================== */

@media (max-width: 1199.98px) {
    .audit-log-table__td--agent {
        max-width: 150px;
    }
}

@media (max-width: 991.98px) {
    .page-title-box {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px;
    }

    .page-title-right {
        width: 100%;
        flex-direction: column;
        align-items: flex-start !important;
        gap: 8px;
    }

    .audit-log-export-btn {
        width: 100%;
        justify-content: center;
    }

    .audit-log-pagination-info {
        font-size: 13px;
    }

    .audit-log-table {
        font-size: 13px;
    }

    .audit-log-table__th,
    .audit-log-table__td {
        padding: 12px 10px;
    }
}

@media (max-width: 767.98px) {
    /* モバイルでテーブルを横スクロール可能に */
    .audit-log-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .audit-log-table {
        min-width: 800px;
    }

    /* フィルターを縦並びに */
    .audit-log-filter-card .row.g-3 > .col-md-3,
    .audit-log-filter-card .row.g-3 > .col-md-6,
    .audit-log-filter-card .row.g-3 > .col-md-9 {
        width: 100%;
    }

    /* ボタンを全幅に */
    .audit-log-search-btn,
    .audit-log-clear-btn {
        width: 100%;
    }

    /* ページネーション情報を縦並びに */
    .audit-log-table-card .d-flex.justify-content-between {
        flex-direction: column;
        gap: 12px;
    }

    /* ページネーションを小さく */
    .pagination {
        font-size: 13px;
    }

    .page-link {
        padding: 6px 10px;
    }
}

@media (max-width: 575.98px) {
    .audit-log-table__th,
    .audit-log-table__td {
        padding: 10px 8px;
    }

    .audit-log-badge {
        font-size: 12px;
        padding: 4px 10px;
    }

    .audit-log-detail-btn {
        font-size: 12px;
        padding: 5px 12px;
    }
}

/* ===================================
   Touch Device Optimization
   =================================== */

@media (hover: none) and (pointer: coarse) {
    /* タッチデバイス用の最適化 */
    .audit-log-table__row:hover {
        background: #ffffff;
        box-shadow: none;
    }

    .audit-log-table__row:active {
        background: #FAFAFA;
    }

    /* タッチターゲットを44x44px以上に */
    .audit-log-detail-btn {
        padding: 10px 20px;
        min-height: 44px;
    }

    .audit-log-export-btn {
        min-height: 44px;
    }

    .audit-log-search-btn,
    .audit-log-clear-btn {
        min-height: 44px;
    }
}

/* ===================================
   Accessibility - Focus Indicators
   =================================== */

.audit-log-date-input:focus-visible,
.audit-log-select:focus-visible,
.audit-log-per-page-select:focus-visible {
    outline: 2px solid #007AFF;
    outline-offset: 2px;
}

.audit-log-detail-btn:focus-visible {
    outline: 2px solid #007AFF;
    outline-offset: 2px;
}

.page-link:focus-visible {
    outline: 2px solid #007AFF;
    outline-offset: 2px;
}

/* ===================================
   Animation - Smooth Interactions
   =================================== */

@keyframes audit-log-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.audit-log-table-card,
.audit-log-filter-card {
    animation: audit-log-fade-in 0.4s ease-out;
}

/* ===================================
   Reduced Motion Support
   =================================== */

@media (prefers-reduced-motion: reduce) {
    .audit-log-table__row,
    .audit-log-export-btn,
    .audit-log-search-btn,
    .audit-log-clear-btn,
    .audit-log-detail-btn,
    .audit-log-filter-toggle,
    .audit-log-date-input,
    .audit-log-select,
    .audit-log-per-page-select {
        transition: none;
    }

    .audit-log-export-btn:hover,
    .audit-log-search-btn:hover,
    .audit-log-detail-btn:hover {
        transform: none;
    }

    .audit-log-table-card,
    .audit-log-filter-card {
        animation: none;
    }
}

/* ===================================
   Print Styles - Audit Log Reports
   =================================== */

@media print {
    .audit-log-export-btn,
    .audit-log-filter-card,
    .audit-log-pagination-info,
    .pagination,
    .audit-log-detail-btn {
        display: none !important;
    }

    .audit-log-table {
        font-size: 10pt;
    }

    .audit-log-table__th,
    .audit-log-table__td {
        padding: 8px 6px;
    }

    .audit-log-table__row {
        page-break-inside: avoid;
    }
}

/* ===================================
   Performance Optimization
   =================================== */

/* GPU acceleration for smooth animations */
.audit-log-export-btn,
.audit-log-search-btn,
.audit-log-clear-btn,
.audit-log-detail-btn,
.audit-log-table__row {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Contain layout shifts */
.audit-log-badge {
    contain: layout;
}

/* ===================================
   SHARED COMPONENTS - Common CSS Architecture
   共通コンポーネント - すべてのテーブル一覧ページで使用
   =================================== */

/* ===================================
   Primary Action Buttons - Gradient Blue
   主要アクションボタン - グラデーションブルー
   =================================== */

.admin-action-btn {
    background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
    border: none;
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.2);
}

.admin-action-btn:hover {
    background: linear-gradient(135deg, #0051D5 0%, #003D9F 100%);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 122, 255, 0.35);
    transform: translateY(-2px);
}

.admin-action-btn:active {
    transform: translateY(0);
}

.admin-action-btn:focus-visible {
    outline: 2px solid #007AFF;
    outline-offset: 2px;
}

.admin-action-btn i {
    vertical-align: middle;
}

/* ===================================
   Filter Card - Collapsible Filter Section
   フィルターカード - 折りたたみ可能フィルター
   =================================== */

.filter-card {
    border-radius: 12px;
    transition: all 0.3s ease;
}

.filter-card .card-title {
    font-size: 16px;
    color: #1D1D1F;
    letter-spacing: -0.3px;
}

.filter-card-toggle {
    color: #007AFF;
    transition: all 0.3s ease;
}

.filter-card-toggle:hover {
    color: #0051D5;
}

/* Filter Form Elements */
.filter-input,
.filter-select {
    border: 1px solid #d2d2d7;
    font-size: 14px;
    color: #1D1D1F;
    transition: all 0.3s ease;
}

.filter-input:focus,
.filter-select:focus {
    border-color: #007AFF;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.filter-input::placeholder {
    color: #C6C6C8;
}

/* Filter Action Buttons */
.filter-search-btn {
    background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
    border: none;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-search-btn:hover {
    background: linear-gradient(135deg, #0051D5 0%, #003D9F 100%);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}

.filter-clear-btn {
    border: 1px solid #d2d2d7;
    color: #86868B;
    background: #ffffff;
    transition: all 0.3s ease;
}

.filter-clear-btn:hover {
    background: #F5F5F7;
    border-color: #86868B;
    color: #1D1D1F;
}

/* ===================================
   Table Card - Premium Table Container
   テーブルカード - プレミアムテーブルコンテナ
   =================================== */

.data-table-card {
    border-radius: 12px;
}

/* ===================================
   Pagination Info - Display Item Count
   ページネーション情報 - アイテム数表示
   =================================== */

.admin-pagination-info {
    font-size: 14px;
    color: #86868B;
}

.admin-pagination-info strong {
    color: #1D1D1F;
    font-weight: 600;
}

/* ===================================
   Per Page Select - Items Per Page Dropdown
   表示件数選択 - ページごとのアイテム数
   Generic rule for all pagination selects (admin, invitation, audit-log, etc.)
   =================================== */

[class$="-per-page-select"] {
    border: 1px solid #d2d2d7;
    color: #1D1D1F;
    font-size: 14px;
    min-width: 100px;
    transition: all 0.3s ease;
}

[class$="-per-page-select"]:focus {
    border-color: #007AFF;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

/* ===================================
   Table - Apple-inspired Minimalist Design
   テーブル - Appleインスパイアのミニマルデザイン
   =================================== */

.data-table-wrapper {
    border-radius: 8px;
    overflow: hidden;
}

.data-table {
    margin-bottom: 0;
    font-size: 14px;
}

/* Table Header - Elegant Gray Background */
.data-table__header {
    background: #F5F5F7;
    border-bottom: 2px solid #d2d2d7;
}

.data-table__th {
    padding: 14px 16px;
    font-weight: 600;
    color: #1D1D1F;
    font-size: 13px;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    border: none;
}

.data-table__th--actions {
    text-align: center;
    width: 120px;
}

/* Table Body */
.data-table__body {
    background: #ffffff;
}

.data-table__row {
    border-bottom: 1px solid #F5F5F7;
    transition: all 0.2s ease;
}

.data-table__row:hover {
    background: #FAFAFA;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.data-table__row:last-child {
    border-bottom: none;
}

/* Table Cells */
.data-table__td {
    padding: 14px 16px;
    color: #1D1D1F;
    vertical-align: middle;
    border: none;
}

.data-table__td--actions {
    text-align: center;
}

/* Monospace Font for Technical Data */
.data-table__td--monospace {
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 13px;
    color: #86868B;
    font-weight: 500;
    white-space: nowrap;
}

/* Emphasized Cell */
.data-table__td--emphasized {
    font-weight: 500;
    color: #1D1D1F;
}

/* Truncated Cell with Ellipsis */
.data-table__td--truncate {
    font-size: 13px;
    color: #86868B;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: help;
}

/* ===================================
   Status Badges - Color-coded Status Indicators
   ステータスバッジ - カラーコードステータス表示
   =================================== */

.status-badge {
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* Success Badge - Green */
.status-badge--success {
    background: #E8F5E9;
    color: #34C759;
}

/* Danger Badge - Red */
.status-badge--danger {
    background: #FFEBEE;
    color: #FF3B30;
}

/* Info Badge - Blue */
.status-badge--info {
    background: #E5F1FF;
    color: #007AFF;
}

/* Warning Badge - Orange */
.status-badge--warning {
    background: #FFF4E6;
    color: #FF9500;
}

/* Secondary Badge - Gray */
.status-badge--secondary {
    background: #F5F5F7;
    color: #86868B;
}

/* ===================================
   Action Buttons - Icon-only Circular Buttons
   アクションボタン - アイコンのみの円形ボタン
   =================================== */

.action-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    border: 1px solid;
}

.action-btn i {
    font-size: 16px;
}

/* View/Detail Button - Primary Blue */
.action-btn--view {
    border-color: #007AFF;
    color: #007AFF;
    background: #ffffff;
}

.action-btn--view:hover {
    background: #007AFF;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
}

/* Edit Button - Secondary Gray */
.action-btn--edit {
    border-color: #86868B;
    color: #86868B;
    background: #ffffff;
}

.action-btn--edit:hover {
    background: #86868B;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(134, 134, 139, 0.3);
}

/* Delete Button - Danger Red */
.action-btn--delete {
    border-color: #FF3B30;
    color: #FF3B30;
    background: #ffffff;
}

.action-btn--delete:hover {
    background: #FF3B30;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(255, 59, 48, 0.3);
}

.action-btn:active {
    transform: translateY(0);
}

/* ===================================
   Responsive Design - Mobile First
   レスポンシブデザイン - モバイルファースト
   =================================== */

@media (max-width: 1199.98px) {
    .data-table__td--truncate {
        max-width: 150px;
    }
}

@media (max-width: 991.98px) {
    .page-title-box {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px;
    }

    .page-title-right {
        width: 100%;
        flex-direction: column;
        align-items: flex-start !important;
        gap: 8px;
    }

    .admin-action-btn {
        width: 100%;
        justify-content: center;
    }

    .admin-pagination-info {
        font-size: 13px;
    }

    .data-table {
        font-size: 13px;
    }

    .data-table__th,
    .data-table__td {
        padding: 12px 10px;
    }
}

@media (max-width: 767.98px) {
    /* モバイルでテーブルを横スクロール可能に */
    .data-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .data-table {
        min-width: 800px;
    }

    /* フィルターを縦並びに */
    .filter-card .row.g-3 > [class*="col-"] {
        width: 100%;
    }

    /* ボタンを全幅に */
    .filter-search-btn,
    .filter-clear-btn {
        width: 100%;
    }

    /* ページネーション情報を縦並びに */
    .data-table-card .d-flex.justify-content-between {
        flex-direction: column;
        gap: 12px;
    }

    /* アクションボタンのサイズを少し縮小 */
    .action-btn {
        width: 28px;
        height: 28px;
    }

    .action-btn i {
        font-size: 14px;
    }
}

/* ===================================
   Performance Optimizations
   パフォーマンス最適化
   =================================== */

/* GPU acceleration for smoother animations */
.admin-action-btn,
.filter-search-btn,
.filter-clear-btn,
.action-btn,
.data-table__row {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Contain layout shifts */
.status-badge {
    contain: layout;
}

/* ===================================
   Profile Page Styles - Sophisticated Design
   プロフィール画面専用スタイル
   =================================== */

/* プロフィールアバター */
.profile-avatar-circle {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.2);
}

.profile-avatar-circle i {
    font-size: 48px;
    color: #ffffff;
}

/* プロフィール基本情報 */
.profile-basic-info h3 {
    font-size: 1.75rem;
    color: #1D1D1F;
    margin-bottom: 0.25rem;
}

.profile-basic-info p {
    font-size: 1rem;
    color: #86868B;
}

/* プロフィール情報グループ */
.profile-info-group {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* プロフィール情報アイテム */
.profile-info-item {
    display: flex;
    flex-direction: column;
    padding-bottom: 24px;
    border-bottom: 1px solid #F5F5F7;
}

.profile-info-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

/* プロフィール情報ラベル */
.profile-info-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #86868B;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

/* プロフィール情報値 */
.profile-info-value {
    font-size: 1rem;
    font-weight: 500;
    color: #1D1D1F;
}

/* プロフィールバッジ */
.profile-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
}

.profile-badge--active {
    background-color: #E8F5E9;
    color: #34C759;
}

.profile-badge--inactive {
    background-color: #FFEBEE;
    color: #FF3B30;
}

/* 権限セクション */
.profile-permissions {
    display: flex;
    flex-direction: column;
}

/* 権限カテゴリー */
.profile-permission-category {
    border-left: 3px solid #007AFF;
    padding-left: 16px;
}

.profile-permission-category-header {
    display: flex;
    align-items: center;
    color: #1D1D1F;
    margin-bottom: 12px;
}

.profile-permission-category-header i {
    font-size: 20px;
    color: #007AFF;
}

/* 権限リスト */
.profile-permission-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.profile-permission-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    font-size: 0.9375rem;
    color: #1D1D1F;
}

.profile-permission-item i {
    font-size: 16px;
    flex-shrink: 0;
}

.profile-permission-item span {
    font-weight: 400;
}

/* アクションボタン */
.profile-action-buttons .btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.profile-action-buttons .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}

/* レスポンシブデザイン */
@media (max-width: 767.98px) {
    /* アバターを中央寄せ */
    .profile-avatar {
        margin-bottom: 16px;
        text-align: center;
    }

    .profile-avatar-circle {
        width: 80px;
        height: 80px;
    }

    .profile-avatar-circle i {
        font-size: 40px;
    }

    /* 基本情報を中央寄せ */
    .profile-basic-info {
        text-align: center;
    }

    .profile-basic-info h3 {
        font-size: 1.5rem;
    }

    /* アクションボタンを全幅に */
    .profile-action-buttons .btn {
        width: 100%;
    }

    /* 権限カテゴリーの左ボーダーを調整 */
    .profile-permission-category {
        border-left-width: 2px;
        padding-left: 12px;
    }
}

/* タブレット用調整 */
@media (min-width: 768px) and (max-width: 991.98px) {
    .profile-avatar-circle {
        width: 88px;
        height: 88px;
    }

    .profile-avatar-circle i {
        font-size: 44px;
    }

    .profile-basic-info h3 {
        font-size: 1.625rem;
    }
}

/* カードタイトルアイコン調整 */
.card-title-lg i {
    vertical-align: middle;
    font-size: 1.25rem;
}

/* ホバー効果 - カード */
.profile-info-item {
    transition: background-color 0.2s ease;
}

/* パフォーマンス最適化 */
.profile-avatar-circle,
.profile-badge,
.profile-action-buttons .btn {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}


/* ===================================
   Admin Edit Page - Permission Management UI
   Apple-inspired minimalist design with nested checkboxes
   =================================== */

/**
 * 権限グループコンテナ
 * ネストされたチェックボックスの親要素
 */
.admin-permission-group {
    margin-bottom: 24px;
    padding: 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.admin-permission-group:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

/**
 * 権限グループヘッダー
 * 親権限チェックボックスと「子を全て選択」ボタン
 */
.admin-permission-group__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e2e8f0;
}

.admin-permission-group__header .form-check-label {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    letter-spacing: -0.3px;
}

/**
 * 子権限リスト
 * インデントされた子チェックボックス
 */
.admin-permission-group__children {
    margin-left: 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.admin-permission-group__children .form-check {
    margin-bottom: 0;
}

.admin-permission-group__children .form-check-label {
    font-size: 14px;
    font-weight: 400;
    color: #475569;
    letter-spacing: 0;
}

/**
 * チェックボックスのカスタムスタイル
 * Apple風の洗練されたデザイン
 */
.form-check-input {
    width: 20px;
    height: 20px;
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.form-check-input:hover {
    border-color: #94a3b8;
}

.form-check-input:checked {
    background-color: #007AFF;
    border-color: #007AFF;
}

.form-check-input:indeterminate {
    background-color: #94a3b8;
    border-color: #94a3b8;
}

.form-check-input:focus {
    border-color: #007AFF;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

/**
 * チェックボックスとラベルの間の適切な空白・垂直位置を確保
 * Bootstrapのfloatベースレイアウトをflexboxに変更し、
 * 20pxチェックボックスに合わせた間隔と垂直中央揃えを実現
 */
.form-check:not(.form-switch) {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 0;
}

.form-check:not(.form-switch) .form-check-input {
    float: none;
    margin-left: 0;
    margin-top: 0;
    flex-shrink: 0;
}

/**
 * 管理者情報表示アイテム
 * サイドバーの情報カード内
 */
.admin-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
}

.admin-info-item:last-child {
    border-bottom: none;
}

.admin-info-item__label {
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
}

.admin-info-item__value {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    text-align: right;
}

/**
 * フォームコントロールの洗練されたスタイル
 */
.form-control:focus,
.form-select:focus {
    border-color: #007AFF;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.form-control-lg {
    padding: 12px 16px;
    font-size: 16px;
}

.form-select-lg {
    padding: 12px 16px;
    font-size: 16px;
}

/**
 * ボタンスタイルのApple風調整
 */
.btn-primary {
    background-color: #007AFF;
    border-color: #007AFF;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #0051D5;
    border-color: #0051D5;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}

.btn-outline-secondary {
    border-color: #cbd5e1;
    color: #475569;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-outline-secondary:hover {
    background-color: #f8fafc;
    border-color: #94a3b8;
    color: #334155;
}

.btn-outline-danger {
    border-color: #FF3B30;
    color: #FF3B30;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-outline-danger:hover {
    background-color: #FF3B30;
    border-color: #FF3B30;
    color: #ffffff;
}

/**
 * バッジスタイル
 */
.badge {
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    letter-spacing: 0.3px;
}

.bg-success {
    background-color: #34C759 !important;
}

.bg-warning {
    background-color: #FF9500 !important;
}

.bg-danger {
    background-color: #FF3B30 !important;
}

.bg-info {
    background-color: #007AFF !important;
}

/**
 * アラートスタイル
 */
.alert {
    border-radius: 12px;
    border: none;
    font-size: 14px;
    line-height: 1.6;
}

.alert-warning {
    background-color: #FFF4E6;
    color: #8B5000;
}

/**
 * レスポンシブデザイン
 */
@media (max-width: 991.98px) {
    .admin-permission-group__children {
        margin-left: 24px;
    }
}

@media (max-width: 767.98px) {
    .admin-permission-group {
        padding: 16px;
    }

    .admin-permission-group__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .admin-permission-group__children {
        margin-left: 16px;
        gap: 10px;
    }

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

    .admin-info-item__value {
        text-align: left;
    }
}

/**
 * アクセシビリティ向上
 */
@media (prefers-reduced-motion: reduce) {
    .admin-permission-group,
    .form-check-input,
    .btn {
        transition: none;
    }

    .btn-primary:hover,
    .btn-outline-secondary:hover,
    .btn-outline-danger:hover {
        transform: none;
    }
}

/* ===================================
   Authentication Pages - Admin Portal
   Modern Authentication UI with Apple Design Influence
   =================================== */

/* 認証ページ背景 */
.auth-body-bg {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.auth-page-wrapper {
    min-height: 100vh;
}

/* 認証カード */
.auth-card {
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(30, 41, 59, 0.08);
}

/* 認証カードヘッダー */
.auth-card-header {
    padding: 32px 32px 24px;
    text-align: center;
    border-bottom: 1px solid #f1f5f9;
}

/* 認証ロゴ */
.auth-logo {
    width: 200px;
    margin: 0 auto 20px;
}

.auth-logo img {
    width: 100%;
    height: auto;
}

/* 認証タイトル */
.auth-title {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}

/* 認証サブタイトル */
.auth-subtitle {
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 0;
}

/* 認証カードボディ */
.auth-card-body {
    padding: 32px;
}

/* 認証フォームラベル */
.auth-form-label {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 8px;
}

/* 認証フォーム入力 */
.auth-form-control {
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    padding: 12px 16px;
    font-size: 15px;
    transition: all 0.3s ease;
}

.auth-form-control:focus {
    border-color: #007AFF;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
    outline: none;
}

.auth-form-control.is-invalid {
    border-color: #dc2626;
}

/* 読み取り専用フィールド */
.auth-form-control--readonly {
    background-color: #f8fafc;
    cursor: not-allowed;
}

.readonly-badge {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 16px;
}

/* 認証ボタン */
.auth-btn-primary {
    padding: 14px 24px;
    border-radius: 24px;
    font-size: 15px;
    font-weight: 600;
    background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
    border: none;
    color: #ffffff;
    transition: all 0.3s ease;
}

.auth-btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #0051D5 0%, #003DA5 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 122, 255, 0.3);
    color: #ffffff;
}

.auth-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* 認証リンク */
.auth-link {
    color: #007AFF;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.auth-link:hover {
    color: #0051D5;
    text-decoration: underline;
}

/* カスタムアラート */
.alert-custom {
    border-radius: 12px;
    border: 1px solid;
    padding: 16px;
}

.alert-custom--danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.alert-custom--success {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}

.alert-custom--warning {
    background: #fffbeb;
    border-color: #fef3c7;
    color: #92400e;
}

.alert-icon {
    font-size: 20px;
}

/* カスタム無効フィードバック */
.invalid-feedback-custom {
    display: none;
    color: #dc2626;
    font-size: 13px;
    margin-top: 6px;
}

/* パスワード表示切り替えボタン */
.password-toggle-btn {
    background: none;
    border: none;
    padding: 8px;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.password-toggle-btn:hover {
    color: #007AFF !important;
}

/* パスワードポリシーガイダンス */
.password-policy-guidance {
    background: #f8fafc;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e2e8f0;
}

.password-requirements-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.requirement-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    transition: all 0.2s ease;
}

.requirement-icon {
    font-size: 18px;
    margin-right: 12px;
    transition: all 0.2s ease;
}

.requirement-icon--unchecked {
    color: #cbd5e1;
}

.requirement-icon--checked {
    color: #34C759;
}

.requirement-item--valid .requirement-text {
    color: #34C759;
    font-weight: 500;
}

.requirement-text {
    font-size: 14px;
    color: #64748b;
}

/* パスワード強度インジケーター */
.password-strength-bar {
    height: 8px;
    background: #f1f5f9;
    border-radius: 8px;
    overflow: hidden;
}

.password-strength-indicator {
    height: 100%;
    transition: all 0.3s ease;
    border-radius: 8px;
}

.password-strength-indicator--none {
    width: 0;
    background: #cbd5e1;
}

.password-strength-indicator--weak {
    background: #dc2626;
}

.password-strength-indicator--medium {
    background: #f59e0b;
}

.password-strength-indicator--strong {
    background: #10b981;
}

.password-strength-indicator--very-strong {
    background: #34C759;
}

.strength-text--none {
    color: #94a3b8;
}

.strength-text--weak {
    color: #dc2626;
}

.strength-text--medium {
    color: #f59e0b;
}

.strength-text--strong {
    color: #10b981;
}

.strength-text--very-strong {
    color: #34C759;
}

/* 招待情報カード */
.invitation-info-card {
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px;
    border: 1px solid #e2e8f0;
}

.invitation-info-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

/* ===================================
   Admin List Table - Modern Design
   =================================== */

.admin-list-table {
    font-size: 14px;
}

.admin-list-table thead th {
    background-color: #f8fafc;
    color: #475569;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 16px 12px;
    border-bottom: 2px solid #e2e8f0;
}

.admin-list-table tbody tr {
    transition: all 0.2s ease;
}

.admin-list-table tbody tr:hover {
    background-color: #f8fafc;
}

.admin-list-table td {
    padding: 16px 12px;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
}

/* アバター */
.avatar-xs {
    width: 32px;
    height: 32px;
}

.avatar-sm {
    width: 40px;
    height: 40px;
}

.avatar-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 14px;
}

/* 検索・フィルター入力 */
.search-input,
.filter-select {
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    padding: 10px 16px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.search-input:focus,
.filter-select:focus {
    border-color: #007AFF;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
    outline: none;
}

.per-page-select {
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    padding: 6px 12px;
}

/* ページネーション情報 */
.pagination-info-text {
    color: #64748b;
    font-size: 14px;
    padding-top: 8px;
}

/* 監査ログテーブル */
.audit-log-table {
    font-size: 13px;
}

.audit-log-table thead th {
    background-color: #f8fafc;
    color: #475569;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 12px;
    border-bottom: 2px solid #e2e8f0;
}

.audit-log-table tbody tr {
    transition: all 0.2s ease;
}

.audit-log-table tbody tr:hover {
    background-color: #f8fafc;
}

.audit-log-table td {
    padding: 12px;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
}

/* 権限統計 */
.permission-stats-list {
    /* 権限統計リストのスタイル */
}

.permission-stats-item {
    /* 権限統計アイテムのスタイル */
}

.permission-stats-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: all 0.3s ease;
}

.permission-stats-icon--blue {
    background: rgba(0, 122, 255, 0.1);
    color: #007AFF;
}

.permission-stats-icon--green {
    background: rgba(52, 199, 89, 0.1);
    color: #34C759;
}

.permission-stats-icon--orange {
    background: rgba(255, 149, 0, 0.1);
    color: #FF9500;
}

.permission-stats-icon--purple {
    background: rgba(175, 82, 222, 0.1);
    color: #AF52DE;
}

.permission-progress {
    background-color: #f1f5f9;
}

/* Stats Card Icon Color Variants */
.stats-card-icon--blue {
    background: rgba(0, 122, 255, 0.1);
    color: #007AFF;
}

.stats-card-icon--green {
    background: rgba(52, 199, 89, 0.1);
    color: #34C759;
}

.stats-card-icon--orange {
    background: rgba(255, 149, 0, 0.1);
    color: #FF9500;
}

.stats-card-icon--purple {
    background: rgba(175, 82, 222, 0.1);
    color: #AF52DE;
}

.stats-card:hover .stats-card-icon--blue {
    background: rgba(0, 122, 255, 0.15);
}

.stats-card:hover .stats-card-icon--green {
    background: rgba(52, 199, 89, 0.15);
}

.stats-card:hover .stats-card-icon--orange {
    background: rgba(255, 149, 0, 0.15);
}

.stats-card:hover .stats-card-icon--purple {
    background: rgba(175, 82, 222, 0.15);
}

/* Quick Action Card Icon Color Variants */
.quick-action-card-icon--blue {
    background: rgba(0, 122, 255, 0.1);
    color: #007AFF;
}

.quick-action-card-icon--green {
    background: rgba(52, 199, 89, 0.1);
    color: #34C759;
}

.quick-action-card-icon--orange {
    background: rgba(255, 149, 0, 0.1);
    color: #FF9500;
}

.quick-action-card-icon--purple {
    background: rgba(175, 82, 222, 0.1);
    color: #AF52DE;
}

.quick-action-card:hover .quick-action-card-icon--blue {
    background: #007AFF;
    color: #ffffff;
}

.quick-action-card:hover .quick-action-card-icon--green {
    background: #34C759;
    color: #ffffff;
}

.quick-action-card:hover .quick-action-card-icon--orange {
    background: #FF9500;
    color: #ffffff;
}

.quick-action-card:hover .quick-action-card-icon--purple {
    background: #AF52DE;
    color: #ffffff;
}

/* レスポンシブ調整 */
@media (max-width: 576px) {
    .auth-card-header {
        padding: 24px 20px 20px;
    }

    .auth-card-body {
        padding: 24px 20px;
    }

    .auth-title {
        font-size: 20px;
    }

    .admin-list-table {
        font-size: 12px;
    }

    .admin-list-table thead th,
    .admin-list-table td {
        padding: 12px 8px;
    }
}


/* ===================================
   Password Reset Screen Styles - Apple-Inspired Minimalist Design
   Admin Primary Color: #1E3A5F (Dark Navy)
   =================================== */

/* パスワード再設定 - Body */
.password-reset-body {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* パスワード再設定 - Container */
.password-reset-container {
    width: 100%;
    max-width: 520px;
    padding: 20px;
}

/* パスワード再設定 - Main Card */
.password-reset-card {
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(30, 41, 59, 0.08);
    margin-bottom: 24px;
}

/* パスワード再設定 - Card Header */
.password-reset-card-header {
    padding: 32px 32px 24px;
    text-align: center;
    border-bottom: 1px solid #f1f5f9;
}

/* パスワード再設定 - Logo */
.password-reset-logo {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, #1E3A5F 0%, #2C5282 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.2);
}

.password-reset-logo i {
    font-size: 32px;
}

/* パスワード再設定 - Title */
.password-reset-title {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}

/* パスワード再設定 - Subtitle */
.password-reset-subtitle {
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 0;
}

/* パスワード再設定 - Card Body */
.password-reset-card-body {
    padding: 32px;
}

/* パスワード再設定 - Form Label */
.password-reset-form-label {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 8px;
    display: block;
}

/* パスワード再設定 - Form Control */
.password-reset-form-control {
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    padding: 12px 16px;
    font-size: 15px;
    transition: all 0.3s ease;
    width: 100%;
}

.password-reset-form-control:focus {
    border-color: #1E3A5F;
    box-shadow: 0 0 0 4px rgba(30, 58, 95, 0.1);
    outline: none;
}

.password-reset-form-control.is-invalid {
    border-color: #dc2626;
}

/* パスワード再設定 - Button */
.password-reset-btn {
    width: 100%;
    padding: 14px 24px;
    border-radius: 24px;
    font-size: 15px;
    font-weight: 600;
    background: linear-gradient(135deg, #1E3A5F 0%, #2C5282 100%);
    border: none;
    color: #ffffff;
    transition: all 0.3s ease;
    cursor: pointer;
}

.password-reset-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #2C5282 0%, #1E3A5F 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(30, 58, 95, 0.3);
}

.password-reset-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* パスワード再設定 - Alert */
.password-reset-alert {
    border-radius: 12px;
    border: 1px solid;
    padding: 16px;
    margin-bottom: 24px;
}

.password-reset-alert-danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.password-reset-alert-success {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}

/* パスワードポリシー - Box */
.password-policy-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
}

/* パスワードポリシー - Header */
.password-policy-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    color: #64748b;
}

.password-policy-header i {
    font-size: 18px;
    color: #64748b;
}

.password-policy-title {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
}

/* パスワードポリシー - List */
.password-policy-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* パスワードポリシー - Item */
.password-policy-item {
    display: flex;
    align-items: center;
    padding: 6px 0;
    color: #86868b;
    transition: color 0.3s ease;
}

.password-policy-item .policy-icon {
    font-size: 16px;
    margin-right: 8px;
    color: #cbd5e1;
    transition: color 0.3s ease;
}

.password-policy-item .policy-text {
    font-size: 13px;
}

/* パスワードポリシー - Valid State */
.password-policy-item.policy-valid {
    color: #34c759;
}

.password-policy-item.policy-valid .policy-icon {
    color: #34c759;
}

/* パスワードポリシー - Invalid State */
.password-policy-item.policy-invalid {
    color: #86868b;
}

.password-policy-item.policy-invalid .policy-icon {
    color: #cbd5e1;
}

/* ログインに戻る - Link */
.back-to-login-link {
    display: inline-block;
    font-size: 14px;
    color: #1E3A5F;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.back-to-login-link:hover {
    color: #2C5282;
    text-decoration: underline;
}

/* セキュリティ情報 - Box */
.security-info-box {
    text-align: center;
    padding: 16px;
}

.security-info-content {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 12px 20px;
    box-shadow: 0 2px 8px rgba(30, 41, 59, 0.04);
}

.security-info-icon {
    font-size: 20px;
    color: #34c759;
    margin-right: 12px;
}

.security-info-text {
    text-align: left;
}

.security-info-title {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 2px;
}

.security-info-description {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 0;
}

/* レスポンシブ調整 - Password Reset */
@media (max-width: 576px) {
    .password-reset-card-header {
        padding: 24px 20px 20px;
    }

    .password-reset-card-body {
        padding: 24px 20px;
    }

    .password-reset-title {
        font-size: 20px;
    }

    .password-policy-box {
        padding: 12px;
    }

    .security-info-content {
        flex-direction: column;
        text-align: center;
    }

    .security-info-icon {
        margin-right: 0;
        margin-bottom: 8px;
    }

    .security-info-text {
        text-align: center;
    }
}

/* ===================================
   Invitation Accept Screen Styles
   招待受諾（アカウント作成）画面
   =================================== */

/* ボディ全体のスタイル */
.invitation-accept-body {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    padding: 20px 0;
}

/* 招待受諾コンテナ */
.invitation-accept-container {
    width: 100%;
    max-width: 540px;
    padding: 20px;
}

/* メインカード */
.invitation-accept-card {
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(30, 41, 59, 0.08);
    margin-bottom: 24px;
}

/* カードヘッダー */
.invitation-accept-card-header {
    padding: 32px 32px 24px;
    text-align: center;
    border-bottom: 1px solid #f1f5f9;
}

/* ロゴ */
.invitation-accept-logo {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, #1E3A5F 0%, #2C5282 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.2);
}

.invitation-accept-logo i {
    font-size: 32px;
}

/* タイトル */
.invitation-accept-title {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}

/* サブタイトル */
.invitation-accept-subtitle {
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}

/* カードボディ */
.invitation-accept-card-body {
    padding: 32px;
}

/* 招待情報ボックス */
.invitation-info-box {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 32px;
}

.invitation-info-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    color: #334155;
    font-weight: 600;
    font-size: 14px;
}

.invitation-info-header i {
    font-size: 20px;
    color: #64748b;
}

.invitation-info-title {
    font-weight: 600;
    color: #334155;
}

.invitation-info-content {
    margin-top: 12px;
}

.invitation-message {
    font-size: 14px;
    color: #475569;
    line-height: 1.7;
    margin-bottom: 16px;
}

.invitation-expiry {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    color: #64748b;
}

.invitation-expiry i {
    font-size: 16px;
    color: #94a3b8;
}

.invitation-expiry-text {
    margin-left: 4px;
}

/* フォームラベル */
.invitation-accept-form-label {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 8px;
    display: block;
}

/* フォーム入力 */
.invitation-accept-form-control {
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    padding: 12px 16px;
    font-size: 15px;
    transition: all 0.3s ease;
    width: 100%;
}

.invitation-accept-form-control:focus {
    border-color: #1E3A5F;
    box-shadow: 0 0 0 4px rgba(30, 58, 95, 0.1);
    outline: none;
}

.invitation-accept-form-control.is-invalid {
    border-color: #dc2626;
}

/* 読み取り専用メールフィールド */
.email-readonly-container {
    position: relative;
    display: flex;
    align-items: center;
}

.email-readonly-icon {
    position: absolute;
    left: 16px;
    font-size: 18px;
    color: #94a3b8;
    pointer-events: none;
}

.invitation-accept-form-control-readonly {
    background-color: #f8fafc;
    color: #64748b;
    cursor: not-allowed;
    padding-left: 44px;
    font-weight: 500;
}

.invitation-accept-form-control-readonly:focus {
    border-color: #e2e8f0;
    box-shadow: none;
}

/* パスワードポリシーボックス */
.password-policy-box {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}

.password-policy-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    color: #334155;
}

.password-policy-header i {
    font-size: 18px;
    color: #64748b;
}

.password-policy-title {
    font-weight: 600;
    font-size: 14px;
    color: #334155;
}

.password-policy-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

.password-policy-item {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #64748b;
    transition: all 0.2s ease;
}

.policy-icon {
    font-size: 18px;
    margin-right: 8px;
    color: #cbd5e1;
    transition: all 0.2s ease;
}

.policy-text {
    color: #64748b;
    transition: all 0.2s ease;
}

/* ポリシー有効状態 */
.password-policy-item.policy-valid .policy-icon {
    color: #059669;
}

.password-policy-item.policy-valid .policy-text {
    color: #059669;
    font-weight: 500;
}

/* ポリシー無効状態 */
.password-policy-item.policy-invalid .policy-icon {
    color: #cbd5e1;
}

.password-policy-item.policy-invalid .policy-text {
    color: #64748b;
}

/* アカウント作成ボタン */
.invitation-accept-btn {
    width: 100%;
    padding: 14px 24px;
    border-radius: 24px;
    font-size: 15px;
    font-weight: 600;
    background: linear-gradient(135deg, #1E3A5F 0%, #2C5282 100%);
    border: none;
    color: #ffffff;
    transition: all 0.3s ease;
    cursor: pointer;
}

.invitation-accept-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #2C5282 0%, #1E3A5F 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(30, 58, 95, 0.3);
}

.invitation-accept-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* アラート */
.invitation-accept-alert {
    border-radius: 12px;
    border: 1px solid;
    padding: 16px;
    margin-bottom: 24px;
}

.invitation-accept-alert-danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.invitation-accept-alert-success {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}

/* セキュリティ情報ボックス */
.security-info-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 20px;
}

.security-info-content {
    display: flex;
    align-items: center;
}

.security-info-icon {
    font-size: 28px;
    color: #64748b;
    margin-right: 16px;
    flex-shrink: 0;
}

.security-info-text {
    flex: 1;
}

.security-info-title {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    margin: 0 0 4px 0;
}

.security-info-description {
    font-size: 13px;
    color: #64748b;
    margin: 0;
}

/* レスポンシブ調整 */
@media (max-width: 576px) {
    .invitation-accept-card-header {
        padding: 24px 20px 20px;
    }

    .invitation-accept-card-body {
        padding: 24px 20px;
    }

    .invitation-accept-title {
        font-size: 20px;
    }

    .invitation-info-box {
        padding: 16px;
    }

    .invitation-message {
        font-size: 13px;
    }

    .password-policy-box {
        padding: 16px;
    }

    .security-info-icon {
        font-size: 24px;
        margin-right: 12px;
    }
}

/* アクセシビリティ対応 */
@media (prefers-reduced-motion: reduce) {
    .invitation-accept-form-control,
    .invitation-accept-btn,
    .password-policy-item,
    .policy-icon,
    .policy-text {
        transition: none;
    }
}

/* ===================================
   Admin Dashboard Mockup Styles
   管理ダッシュボード用のカスタムスタイル
   =================================== */

/* ウェルカムカード */
.admin-welcome-card {
    background: linear-gradient(135deg, #1E3A5F 0%, #2C5282 100%);
    border-radius: 16px !important;
}

.admin-welcome-card .card-body {
    color: #ffffff;
}

.admin-welcome-card h5 {
    color: #ffffff;
    font-size: 20px;
    letter-spacing: -0.3px;
}

.admin-welcome-card p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
}

/* 管理者アバター */
.admin-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.admin-avatar i {
    font-size: 32px;
}

/* 監査ログテーブル */
.audit-log-table thead th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 16px;
    border-bottom: 2px solid #e2e8f0;
}

.audit-log-table tbody td {
    padding: 16px;
    font-size: 14px;
    vertical-align: middle;
}

.audit-log-table tbody tr {
    transition: background-color 0.2s ease;
}

.audit-log-table tbody tr:hover {
    background-color: #f8fafc;
}

/* 監査ログの小さいアバター */
.audit-log-avatar-sm {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
}

.audit-log-avatar-sm i {
    font-size: 16px;
}

/* カードタイトル大サイズ */
.card-title-lg {
    font-size: 18px;
    letter-spacing: -0.3px;
}

/* レスポンシブ調整 */
@media (max-width: 991.98px) {
    .admin-welcome-card h5 {
        font-size: 18px;
    }

    .admin-avatar {
        width: 56px;
        height: 56px;
    }

    .admin-avatar i {
        font-size: 28px;
    }
}

@media (max-width: 767.98px) {
    .admin-welcome-card {
        margin-bottom: 16px;
    }

    .admin-welcome-card .card-body {
        padding: 20px !important;
    }

    .admin-avatar {
        width: 48px;
        height: 48px;
    }

    .admin-avatar i {
        font-size: 24px;
    }

    /* モバイルでテーブルをカード形式に変換 */
    .audit-log-table thead {
        display: none;
    }

    .audit-log-table tbody tr {
        display: block;
        margin-bottom: 16px;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 12px;
    }

    .audit-log-table tbody td {
        display: block;
        padding: 8px 0;
        border: none;
    }

    .audit-log-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #64748b;
        display: inline-block;
        width: 100px;
        font-size: 12px;
    }
}

/* アクセシビリティ対応 */
@media (prefers-reduced-motion: reduce) {
    .admin-welcome-card,
    .audit-log-table tbody tr {
        transition: none;
    }
}

/* ===================================
   Admin Authentication Screens - Mockup Styles
   モックアップ認証画面用スタイル
   =================================== */

/* 認証ページ全体のラッパー */
.auth-page-wrapper {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    padding: 20px;
}

.auth-page-content {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 認証コンテナ */
.auth-container {
    width: 100%;
    max-width: 460px;
}

.auth-container--wide {
    max-width: 600px;
}

/* ===================================
   認証カード (BEM記法)
   =================================== */

.auth-card {
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(30, 41, 59, 0.08);
    margin-bottom: 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* カードヘッダー */
.auth-card__header {
    padding: 32px 32px 24px;
    text-align: center;
    border-bottom: 1px solid #f1f5f9;
}

/* ロゴ */
.auth-card__logo {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: #1E3A5F;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.25);
    transition: all 0.3s ease;
}

.auth-card__logo i {
    font-size: 32px;
}

.auth-card__logo--secondary {
    background: #64748b;
    box-shadow: 0 4px 12px rgba(100, 116, 139, 0.25);
}

.auth-card__logo:hover {
    transform: scale(1.05);
}

/* タイトル */
.auth-card__title {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}

/* サブタイトル */
.auth-card__subtitle {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 0;
}

/* カードボディ */
.auth-card__body {
    padding: 32px;
}

/* カードフッター */
.auth-card__footer {
    padding: 20px 32px;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
    border-radius: 0 0 16px 16px;
    text-align: center;
}

.auth-card__footer p {
    font-size: 13px;
}

/* ===================================
   フォーム要素 (BEM記法)
   =================================== */

/* フォームラベル */
.auth-form__label {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 8px;
}

/* フォーム入力 */
.auth-form__input {
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    padding: 12px 16px;
    font-size: 15px;
    color: #1e293b;
    transition: all 0.3s ease;
    background: #ffffff;
}

.auth-form__input:focus {
    border-color: #1E3A5F;
    box-shadow: 0 0 0 4px rgba(30, 58, 95, 0.1);
    outline: none;
    background: #ffffff;
}

.auth-form__input.is-invalid {
    border-color: #dc2626;
}

.auth-form__input.is-invalid:focus {
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1);
}

.auth-form__input::placeholder {
    color: #cbd5e1;
}

/* パスワード入力（目のアイコン付き） */
.auth-form__input--password {
    padding-right: 48px;
}

/* パスワード表示/非表示トグルボタン */
.auth-form__password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 8px;
    transition: color 0.2s ease;
    font-size: 20px;
}

.auth-form__password-toggle:hover {
    color: #334155;
}

.auth-form__password-toggle:focus {
    outline: none;
    color: #1E3A5F;
}

/* コード入力（6桁） */
.auth-form__input--code {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 8px;
    text-align: center;
    font-family: 'Courier New', monospace;
    padding: 16px;
}

/* チェックボックス */
.auth-form__checkbox {
    border-radius: 8px;
    border: 1.5px solid #e2e8f0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
}

.auth-form__checkbox:checked {
    background-color: #1E3A5F;
    border-color: #1E3A5F;
}

.auth-form__checkbox:focus {
    box-shadow: 0 0 0 4px rgba(30, 58, 95, 0.1);
}

.auth-form__checkbox-label {
    font-size: 14px;
    color: #475569;
    font-weight: 500;
    margin-left: 8px;
}

/* リンク */
.auth-form__link {
    display: inline-block;
    font-size: 14px;
    color: #1E3A5F;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.auth-form__link:hover {
    color: #2C5282;
    text-decoration: underline;
}

/* ===================================
   ボタン (BEM記法)
   =================================== */

.auth-btn {
    width: 100%;
    padding: 14px 24px;
    border-radius: 24px;
    font-size: 15px;
    font-weight: 600;
    border: none;
    transition: all 0.3s ease;
}

.auth-btn--primary {
    background: #1E3A5F;
    color: #ffffff;
}

.auth-btn--primary:hover:not(:disabled) {
    background: #2C5282;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(30, 58, 95, 0.3);
    color: #ffffff;
}

.auth-btn--primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ===================================
   アラート (BEM記法)
   =================================== */

.auth-alert {
    border-radius: 12px;
    border: 1px solid;
    padding: 16px;
    margin-bottom: 24px;
}

.auth-alert__icon {
    font-size: 20px;
    flex-shrink: 0;
}

.auth-alert--danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.auth-alert--success {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}

.auth-alert--warning {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}

/* ===================================
   二要素認証セットアップ用スタイル
   =================================== */

/* セットアップステップ */
.two-factor-setup__step {
    position: relative;
}

.two-factor-setup__step-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.two-factor-setup__step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #1E3A5F;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    margin-right: 12px;
    flex-shrink: 0;
}

.two-factor-setup__step-title {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.two-factor-setup__step-content {
    padding-left: 44px;
}

/* QRコードコンテナ */
.two-factor-qr-container {
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    margin-top: 16px;
}

.two-factor-qr-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.two-factor-qr-placeholder i {
    font-size: 64px;
    color: #cbd5e1;
}

/* 秘密鍵表示 */
.two-factor-secret {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
}

.two-factor-secret__code {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    letter-spacing: 2px;
    flex: 1;
    word-break: break-all;
}

.two-factor-secret__copy-btn {
    background: #1E3A5F;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.two-factor-secret__copy-btn:hover {
    background: #2C5282;
}

.two-factor-secret__copy-btn--copied {
    background: #059669;
}

.two-factor-secret__copy-btn i {
    margin-right: 4px;
}

/* 認証アプリカード */
.two-factor-app-card {
    padding: 24px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    text-align: center;
    transition: all 0.2s ease;
    background: #ffffff;
}

.two-factor-app-card:hover {
    border-color: #1E3A5F;
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.1);
}

.two-factor-app-card i {
    color: #64748b;
}

/* 確認コード入力（単一フィールド） */
.two-factor-code-input--single {
    width: 100%;
    max-width: 100%;
    font-size: 28px !important;
    font-weight: 600;
    letter-spacing: 12px;
    padding: 12px 20px !important;
    height: auto !important;
}

.two-factor-code-input--single::placeholder {
    letter-spacing: 12px;
    font-weight: 400;
    color: #cbd5e1;
}

/* QRコードエリア（管理画面2FA設定用） */
#qr-code-area {
    width: 100%;
}

#qr-code-canvas {
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#qr-code-canvas > div {
    display: flex;
    justify-content: center;
}

#qr-code-canvas img {
    border-radius: 8px;
}

#qr-code-error {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

/* ===================================
   ヘルプカード
   =================================== */

.auth-help-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(30, 41, 59, 0.04);
}

.auth-help-card h6 {
    font-size: 14px;
}

.auth-help-card p,
.auth-help-card ul {
    font-size: 14px;
    line-height: 1.6;
}

/* ===================================
   レスポンシブ調整
   =================================== */

@media (max-width: 576px) {
    .auth-card__header {
        padding: 24px 20px 20px;
    }

    .auth-card__body {
        padding: 24px 20px;
    }

    .auth-card__footer {
        padding: 16px 20px;
    }

    .auth-card__title {
        font-size: 20px;
    }

    .auth-card__logo {
        width: 56px;
        height: 56px;
    }

    .auth-card__logo i {
        font-size: 28px;
    }

    .auth-form__input--code {
        font-size: 20px;
        letter-spacing: 6px;
        padding: 12px;
    }

    .two-factor-setup__step-content {
        padding-left: 0;
        margin-top: 12px;
    }

    .two-factor-qr-container {
        padding: 24px 16px;
    }

    .two-factor-secret {
        flex-direction: column;
        gap: 12px;
    }

    .two-factor-secret__copy-btn {
        width: 100%;
    }
}

/* ===================================
   アクセシビリティ対応
   =================================== */

@media (prefers-reduced-motion: reduce) {
    .auth-card,
    .auth-form__input,
    .auth-btn,
    .auth-card__logo,
    .auth-form__password-toggle,
    .auth-form__link,
    .two-factor-secret__copy-btn {
        transition: none;
    }
}

/* フォーカス時のアウトライン強化 */
.auth-form__input:focus-visible,
.auth-btn:focus-visible,
.auth-form__checkbox:focus-visible {
    outline: 2px solid #1E3A5F;
    outline-offset: 2px;
}

/* ===================================
   Authentication Pages Styles - Apple-Inspired Design
   =================================== */

/* Authentication Page Wrapper */
.auth-page-wrapper {
    min-height: 100vh;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-page-content {
    width: 100%;
    padding: 0;
}

/* Authentication Card */
.auth-card {
    border-radius: 24px !important;
    overflow: hidden;
    backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(226, 232, 240, 0.5) !important;
}

/* Authentication Logo */
.auth-logo {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    border-radius: 24px;
    background: linear-gradient(135deg, #1E3A5F 0%, #2C5282 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(30, 58, 95, 0.2);
}

.auth-logo i {
    font-size: 40px;
    color: #ffffff;
}

/* Authentication Title */
.auth-title {
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.5px;
}

.auth-subtitle {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
}

/* Authentication Input Groups */
.auth-input-icon {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-right: none;
    color: #64748b;
}

.auth-input {
    border-left: none;
    padding: 12px 16px;
    font-size: 15px;
    border-color: #e2e8f0;
    transition: all 0.3s ease;
}

.auth-input:focus {
    border-color: #1E3A5F;
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
    background: #ffffff;
}

.input-group:focus-within .auth-input-icon {
    border-color: #1E3A5F;
    background: #ffffff;
    color: #1E3A5F;
}

/* Admin Primary Button */
.btn-admin-primary {
    background: linear-gradient(135deg, #1E3A5F 0%, #2C5282 100%);
    border: none;
    color: #ffffff;
    font-weight: 600;
    padding: 14px 32px;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.2);
}

.btn-admin-primary:hover {
    background: linear-gradient(135deg, #2C5282 0%, #1E3A5F 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(30, 58, 95, 0.3);
    color: #ffffff;
}

.btn-admin-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(30, 58, 95, 0.2);
}

.btn-admin-primary:focus {
    box-shadow: 0 0 0 4px rgba(30, 58, 95, 0.2);
}

/* Authentication Links */
.auth-link {
    color: #1E3A5F;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.auth-link:hover {
    color: #2C5282;
    text-decoration: underline;
}

/* Authentication Card Footer */
.auth-card-footer {
    background: #fafbfc;
    border-top: 1px solid #e2e8f0;
    padding: 20px;
}

/* Two-Factor Code Input */
.two-factor-code-input-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 24px 0;
}

.two-factor-code-input {
    width: 56px;
    height: 64px;
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    transition: all 0.3s ease;
    padding: 0;
}

.two-factor-code-input:focus {
    border-color: #1E3A5F;
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
    outline: none;
}

.two-factor-code-separator {
    width: 8px;
    height: 2px;
    background: #cbd5e1;
    margin: 0 4px;
}

/* Two-Factor Setup Styles */
.two-factor-setup-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.two-factor-setup-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.two-factor-setup-step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
}

.two-factor-setup-step.active .two-factor-setup-step-number {
    background: linear-gradient(135deg, #1E3A5F 0%, #2C5282 100%);
    color: #ffffff;
    border-color: #1E3A5F;
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.2);
}

.two-factor-setup-step-label {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 500;
    text-align: center;
}

.two-factor-setup-step.active .two-factor-setup-step-label {
    color: #1E3A5F;
    font-weight: 600;
}

.two-factor-setup-step-line {
    width: 60px;
    height: 2px;
    background: #e2e8f0;
    margin: 0 8px;
}

/* QR Code Container */
.two-factor-qr-container,
.two-factor-manual-setup {
    background: #fafbfc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
}

.two-factor-qr-label {
    font-size: 16px;
    font-weight: 600;
    color: #334155;
}

.two-factor-qr-code {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.two-factor-qr-placeholder {
    width: 200px;
    height: 200px;
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}

.two-factor-qr-placeholder i {
    font-size: 64px;
}

/* Secret Key */
.two-factor-secret-key {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    letter-spacing: 2px;
    background: #f8fafc;
    border-color: #e2e8f0;
}

.two-factor-account-info {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
}

/* Password Strength Meter */
.password-strength-meter {
    height: 4px;
    background: #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

.password-strength-bar {
    height: 100%;
    width: 0%;
    transition: all 0.3s ease;
    border-radius: 8px;
}

/* Password Policy Guidance */
.password-policy-guidance {
    background: #fafbfc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
}

.policy-item {
    transition: all 0.3s ease;
}

.policy-item i {
    font-size: 18px;
    vertical-align: middle;
}

/* Mockup Navigation */
.mockup-nav {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    padding: 12px 24px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    display: inline-block;
}

.mockup-nav-link {
    color: #1E3A5F;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.mockup-nav-link:hover {
    color: #2C5282;
    text-decoration: underline;
}

/* Form Check (Checkbox) */
.form-check-input {
    border-color: #cbd5e1;
    cursor: pointer;
}

.form-check-input:checked {
    background-color: #1E3A5F;
    border-color: #1E3A5F;
}

.form-check-input:focus {
    border-color: #1E3A5F;
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}

.form-check-label {
    color: #475569;
    font-size: 14px;
    cursor: pointer;
}

/* Responsive Adjustments */
@media (max-width: 767.98px) {
    .auth-card {
        border-radius: 16px !important;
    }

    .auth-logo {
        width: 160px;
    }

    .auth-title {
        font-size: 24px;
    }

    .two-factor-code-input {
        width: 48px;
        height: 56px;
        font-size: 20px;
    }

    .two-factor-code-input-group {
        gap: 8px;
    }


    .two-factor-qr-placeholder {
        width: 160px;
        height: 160px;
    }

    .two-factor-qr-placeholder i {
        font-size: 48px;
    }
}

/* Accessibility - Focus States */
.auth-input:focus-visible,
.two-factor-code-input:focus-visible,
.btn-admin-primary:focus-visible {
    outline: 3px solid rgba(30, 58, 95, 0.4);
    outline-offset: 2px;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .auth-card,
    .auth-input,
    .two-factor-code-input,
    .btn-admin-primary,
    .auth-link,
    .password-strength-bar,
    .policy-item {
        transition: none;
    }

    .btn-admin-primary:hover {
        transform: none;
    }
}

/* ===================================
   End Authentication Styles
   =================================== */

/* ===================================
   Admin Table Styles - Professional Design
   =================================== */

/* 管理者テーブルカード */
.data-table-card {
    border-radius: 12px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 管理者テーブル本体 */
.data-table {
    margin-bottom: 0;
}

/* テーブルヘッダー */
.data-table__header {
    background-color: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
}

.data-table__th {
    padding: 16px 20px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}

.data-table__th--actions {
    text-align: center;
    width: 120px;
}

/* テーブル行 */
.data-table__row {
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #f1f5f9;
}

.data-table__row:hover {
    background-color: #f8fafc;
}

/* テーブルセル */
.data-table__td {
    padding: 16px 20px;
    font-size: 14px;
    color: #1e293b;
    vertical-align: middle;
}

.data-table__td--actions {
    text-align: center;
}

/* レスポンシブ対応 */
@media (max-width: 991.98px) {
    .data-table__th,
    .data-table__td {
        padding: 12px 16px;
        font-size: 13px;
    }
}

@media (max-width: 767.98px) {
    .data-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .data-table {
        min-width: 800px;
    }

    .data-table__th,
    .data-table__td {
        padding: 10px 12px;
        font-size: 12px;
    }
}

/* ===================================
   End Admin Table Styles
   =================================== */

/* ===================================
   Mockup Inline Styles Extraction
   モックアップのインラインスタイル外出し用共通クラス
   =================================== */

/* ===================================
   Primary Button - Admin Navy Blue
   管理画面用プライマリボタン（濃紺）
   =================================== */

.btn-primary-navy {
    background-color: #1E3A5F;
    color: white;
}

.btn-primary-navy:hover {
    background-color: #152d47;
    color: white;
}

.btn-primary-navy:focus {
    background-color: #152d47;
    color: white;
    box-shadow: 0 0 0 0.25rem rgba(30, 58, 95, 0.25);
}

/* ===================================
   Status Badges - Color Variations
   ステータスバッジ（カラーバリエーション）
   =================================== */

/* 成功/有効 - 緑 */
.badge-status-success {
    background-color: #E8F5E9;
    color: #2E7D32;
    font-weight: 600;
}

/* 警告/一時停止 - オレンジ */
.badge-status-warning {
    background-color: #FFF4E6;
    color: #E65100;
    font-weight: 600;
}

/* 無効/グレー */
.badge-status-inactive {
    background-color: #F5F5F7;
    color: #6B7280;
    font-weight: 600;
}

/* エラー/キャンセル - 赤 */
.badge-status-danger {
    background-color: #FFEBEE;
    color: #C62828;
    font-weight: 600;
}

/* 情報 - 青 */
.badge-status-info {
    background-color: #E3F2FD;
    color: #1565C0;
    font-weight: 600;
}

/* パープル - 紫 */
.badge-status-purple {
    background-color: #F3E5F5;
    color: #6A1B9A;
    font-weight: 600;
}

/* シアン - 水色 */
.badge-status-cyan {
    background-color: #E1F5FE;
    color: #01579B;
    font-weight: 600;
}

/* ===================================
   Icon Colors - Action Icons
   アイコンカラー（アクションアイコン）
   =================================== */

/* グレーアイコン（標準） */
.icon-color-gray {
    color: #475569;
}

/* 薄グレーアイコン（disabled状態） */
.icon-color-muted {
    color: #CBD5E1;
    cursor: not-allowed;
}

/* プライマリアイコン（濃紺 - 編集用） */
.icon-color-primary {
    color: #1E3A5F;
}

/* 削除アイコン（赤） */
.icon-color-danger {
    color: #FF3B30;
}

/* 成功アイコン（緑） */
.icon-color-success {
    color: #2E7D32;
}

/* 警告アイコン（黄色） */
.icon-color-warning {
    color: #F0AD00;
}

/* 情報アイコン（青） */
.icon-color-info {
    color: #007AFF;
}

/* アイコンサイズ */
.icon-size-20 {
    font-size: 20px;
}

.icon-size-24 {
    font-size: 24px;
}

/* アイコンボタン無効状態 */
.btn[disabled] .bx,
.btn:disabled .bx {
    color: #CBD5E1;
}

.btn.btn-sm[disabled],
.btn.btn-sm:disabled {
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: auto;
    border: none;
    box-shadow: none;
}

/* ===================================
   Background Colors
   背景色
   =================================== */

/* ライトグレー背景 */
.bg-light-gray {
    background-color: #F5F5F7;
}

/* ライトブルー背景（情報） */
.bg-light-blue {
    background-color: #E5F1FF;
}

/* ライトオレンジ背景（警告） */
.bg-light-orange {
    background-color: #FFF4E6;
}

/* ===================================
   Text Colors
   テキストカラー
   =================================== */

/* ダークグレーテキスト */
.text-dark-gray {
    color: #1D1D1F;
}

/* ライトブルーテキスト */
.text-light-blue {
    color: #0066CC;
}

/* オレンジテキスト */
.text-orange {
    color: #E65100;
}

/* ===================================
   Permission Group Styles
   権限グループスタイル
   =================================== */

.permission-group {
    background-color: #F5F5F7;
    border-radius: 8px;
}

.permission-group__header {
    background-color: #E8E8ED;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* Permission Selector */

.permission-selector__group {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.permission-selector__group:hover {
    border-color: #007AFF;
    box-shadow: 0 2px 12px rgba(0, 122, 255, 0.08);
}

.permission-selector__group-header {
    padding: 12px 16px;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
}

.permission-selector__group-label {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.permission-selector__children {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.permission-selector__child {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    font-size: 13px;
    color: #475569;
    margin: 0;
}

.permission-selector__child:hover {
    background-color: #f0f7ff;
    border-color: #e0edff;
}

.permission-selector__child .form-check-input {
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
}

.permission-selector__child--checked {
    background-color: #f0f7ff;
    border-color: #d0e3ff;
}

.permission-selector__child--checked span {
    color: #1e293b;
    font-weight: 500;
}

.permission-selector__info {
    background-color: #f8fafc;
    border-radius: 8px;
}

@media (max-width: 767.98px) {
    .permission-selector__group-header {
        padding: 10px 12px;
    }

    .permission-selector__children {
        padding: 10px 12px;
    }

    .permission-selector__child {
        padding: 6px 8px;
        font-size: 12px;
    }
}

/* ===================================
   Audit Log Detail Styles
   監査ログ詳細表示スタイル
   =================================== */

.audit-log-detail {
    background-color: #F5F5F7;
    border-radius: 8px;
}

.audit-log-detail__title {
    color: #1D1D1F;
}

.audit-log-detail__code {
    font-size: 13px;
    color: #1D1D1F;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ===================================
   End Mockup Inline Styles Extraction
   =================================== */

/* アイコンサイズ16px */
.icon-size-16 {
    font-size: 16px;
}

/* ===================================
   Announcement Badge Styles
   お知らせ配信対象バッジスタイル
   =================================== */

/* 塾生のみ（Primary Blue） */
.bg-primary-subtle {
    background-color: #E5F1FF !important;
}

.text-primary {
    color: #007AFF !important;
}

/* 受験生のみ（Success Green） */
.bg-success-subtle {
    background-color: #E8F5E9 !important;
}

.text-success {
    color: #34C759 !important;
}

/* 両方（Purple） */
.bg-purple-subtle {
    background-color: #F3E5F5 !important;
}

.text-purple {
    color: #9C27B0 !important;
}

/* ===================================
   Dashboard Charts - Apple-Inspired Design
   =================================== */

/* チャートコンテナの基本スタイル */
.chart-container {
    position: relative;
    width: 100%;
    padding: 16px 0;
    min-height: 300px;
}

/* チャートのレスポンシブ設定 */
.chart-container canvas {
    max-height: 350px;
}

/* 月別ユーザー新規登録数チャート（フルワイド）のレスポンシブ */
@media (min-width: 992px) {
    #monthlyUsersChart {
        max-height: 320px;
    }
}

/* タブレット・モバイル対応 */
@media (max-width: 991.98px) {
    .chart-container {
        min-height: 250px;
    }

    .chart-container canvas {
        max-height: 280px;
    }
}

/* モバイル対応 */
@media (max-width: 575.98px) {
    .chart-container {
        min-height: 220px;
        padding: 8px 0;
    }

    .chart-container canvas {
        max-height: 240px;
    }
}

/* チャートカードのタイトル */
.card-title-lg {
    font-size: 18px;
    font-weight: 700;
    color: #1D1D1F;
    letter-spacing: -0.3px;
}

/* チャートカードのホバー効果 */
.card:has(.chart-container):hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(30, 41, 59, 0.08) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ================================================================
 * 詳細検索エリア
 * ユーザー一覧画面の詳細検索機能用スタイル
 * ================================================================ */

/* 詳細検索エリア */
.advanced-search-area {
    display: none;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #E5E5EA;
}

.advanced-search-area.show {
    display: block;
}

/* 詳細検索トグルボタン */
.advanced-search-toggle {
    cursor: pointer;
    color: #1E3A5F;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s ease;
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
}

.advanced-search-toggle:hover {
    color: #2C5282;
}

.advanced-search-toggle .bx {
    transition: transform 0.2s ease;
}

.advanced-search-toggle.active .bx {
    transform: rotate(180deg);
}

/* 模試チェックボックスリスト */
.mock-exam-checkbox-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}

/* 科目チェックボックスリスト */
.subject-checkbox-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* 点数レンジ入力 */
.score-range-input {
    display: flex;
    align-items: center;
    gap: 8px;
}

.score-range-input input {
    width: 100px;
}

.score-range-separator {
    color: #86868B;
    font-weight: 500;
}

/* レスポンシブ対応 */
@media (max-width: 767.98px) {
    .mock-exam-checkbox-list {
        grid-template-columns: 1fr;
    }

    .subject-checkbox-list {
        gap: 12px;
    }

    .score-range-input {
        flex-wrap: wrap;
    }

    .score-range-input input {
        width: 80px;
    }
}

/* ===================================
   Mock Exam Edit - Subject Section Styles
   教科別設定セクションのスタイル
   =================================== */

/* 教科セクション全体 */
.mock-exam-subject-section {
    background-color: #ffffff;
    border: 1px solid #e5e5ea;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mock-exam-subject-section:hover {
    border-color: #d2d2d7;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* 教科セクションヘッダー */
.mock-exam-subject-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f5f5f7;
}

.mock-exam-subject-section__title {
    font-weight: 600;
    font-size: 1rem;
    margin: 0;
    color: #1d1d1f;
    display: flex;
    align-items: center;
}

/* 詳細確認ボタン - Apple風の洗練されたデザイン */
.btn-subject-detail {
    background: #ffffff;
    border: 1px solid #d2d2d7;
    border-radius: 24px;
    padding: 8px 20px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #1e3a5f;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.btn-subject-detail:hover {
    background: #f5f5f7;
    border-color: #1e3a5f;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.08);
}

.btn-subject-detail:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.btn-subject-detail i {
    font-size: 1rem;
    color: #86868b;
}

/* 未アップロードバッジ */
.badge-subject-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    border-radius: 16px;
    font-size: 0.8125rem;
    font-weight: 500;
}

.badge-subject-status--pending {
    background-color: #f5f5f7;
    color: #86868b;
}

.badge-subject-status--pending i {
    color: #86868b;
}

.badge-subject-status--warning {
    background-color: #fff3cd;
    color: #856404;
}

.badge-subject-status--warning i {
    color: #856404;
}

/* 教科別設定サマリーテーブル */
.subject-summary-table {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.subject-summary-table .table {
    font-size: 0.8125rem;
    margin-bottom: 0;
}

.subject-summary-table .table thead th {
    background-color: #f5f5f7;
    color: #6c757d;
    font-weight: 600;
    white-space: nowrap;
    padding: 8px 12px;
    border-color: #e9ecef;
    vertical-align: middle;
}

.subject-summary-table__th-subject {
    width: 90px;
}

.subject-summary-table__th {
    text-align: center;
    width: 110px;
}

.subject-summary-table__row--complete td {
    background-color: #f0faf4;
}

.subject-summary-table__subject-cell {
    font-weight: 600;
    vertical-align: middle;
    padding: 7px 12px !important;
}

.subject-summary-table__subject-link {
    color: #1e3a5f;
    text-decoration: none;
}

.subject-summary-table__subject-link:hover {
    color: #2563eb;
    text-decoration: underline;
}

.subject-summary-table__status-cell {
    text-align: center;
    vertical-align: middle;
    padding: 7px 8px !important;
}

.subject-summary-table__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.875rem;
}

.subject-summary-table__badge--done {
    background-color: #d1fae5;
    color: #065f46;
}

.subject-summary-table__badge--todo {
    background-color: #f3f4f6;
    color: #9ca3af;
}

/* CSV アップロードエリア */
.csv-upload-area {
    border: 2px dashed #d2d2d7;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    background-color: #ffffff;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.csv-upload-area:hover {
    border-color: #1e3a5f;
    background-color: #f8f9fa;
    box-shadow: 0 2px 8px rgba(30, 58, 95, 0.04);
}

.csv-upload-area.dragover {
    border-color: #1e3a5f;
    background-color: #e6eef7;
    border-style: solid;
}

.csv-upload-area__label {
    margin: 0;
    cursor: pointer;
    display: block;
}

.csv-upload-area__label i {
    display: block;
    margin-bottom: 8px;
}

.csv-upload-area .btn-outline-primary.disabled:hover {
    background-color: transparent;
    color: var(--bs-primary);
}

.csv-upload-area .btn-outline-danger.disabled:hover {
    background-color: transparent;
    color: var(--bs-danger);
}

/* ===================================
   Mark Sheet Detail Modal - Apple-Inspired Premium Design
   マークシート詳細モーダルのスタイル
   =================================== */

/* モーダル全体 */
/* ===================================
   マークシート詳細モーダル - Premium Design
   =================================== */

/* モーダルベース */
.mark-sheet-modal {
    border: none;
    border-radius: 0;
}

/* ヘッダー - グラデーション背景で印象的に */
.mark-sheet-modal__header {
    background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%);
    padding: 32px 40px;
    border-bottom: none;
    position: relative;
    overflow: hidden;
}

/* ヘッダーグラデーションオーバーレイ効果 */
.mark-sheet-modal__header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.mark-sheet-modal__header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.mark-sheet-modal__title-wrapper {
    flex: 1;
}

.mark-sheet-modal__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 4px 0;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.mark-sheet-modal__subtitle {
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.5px;
}

/* 閉じるボタン - Apple風の洗練されたデザイン */
.mark-sheet-modal__close {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    color: #ffffff;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
}

.mark-sheet-modal__close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(90deg);
}

.mark-sheet-modal__close i {
    line-height: 1;
}

/* モーダルボディ */
.mark-sheet-modal__body {
    padding: 40px;
    background: #f5f5f7;
    overflow-y: auto;
    max-height: calc(100vh - 240px);
}

/* 教科情報カード - 洗練されたカード風デザイン */
.mark-sheet-modal__info-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 32px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.mark-sheet-modal__info-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 32px;
    align-items: center;
}

.mark-sheet-modal__info-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mark-sheet-modal__info-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, #f5f5f7 0%, #e5e5ea 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #1e3a5f;
    flex-shrink: 0;
}

.mark-sheet-modal__info-content {
    flex: 1;
}

.mark-sheet-modal__info-label {
    font-size: 0.8125rem;
    color: #86868b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.mark-sheet-modal__info-value {
    font-size: 2rem;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -1px;
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.mark-sheet-modal__info-unit {
    font-size: 1rem;
    color: #86868b;
    font-weight: 600;
}

.mark-sheet-modal__info-divider {
    width: 1px;
    height: 48px;
    background: linear-gradient(to bottom, transparent, #e5e5ea, transparent);
}

/* テーブルコンテナ */
.mark-sheet-modal__table-container {
    background: #ffffff;
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* マークシートテーブル - プレミアムデザイン */
.mark-sheet-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
}

/* テーブルヘッダー */
.mark-sheet-table__header {
    background: linear-gradient(to bottom, #fafafa, #f5f5f7);
}

.mark-sheet-table__header-row {
    border-bottom: 2px solid #e5e5ea;
}

.mark-sheet-table__th {
    padding: 20px 16px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #86868b;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid #e5e5ea;
}

.mark-sheet-table__th--number {
    width: 120px;
}

.mark-sheet-table__th--answer {
    width: 140px;
}

.mark-sheet-table__th--points {
    width: 120px;
}

.mark-sheet-table__th--choices {
    min-width: 360px;
}

/* テーブルボディ */
.mark-sheet-table__body {
    background: #ffffff;
}

.mark-sheet-table__row {
    border-bottom: 1px solid #f5f5f7;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ストライプパターン */
.mark-sheet-table__row:nth-child(even) {
    background-color: #fafafa;
}

.mark-sheet-table__row:hover {
    background-color: #f0f0f5;
    transform: scale(1.005);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.mark-sheet-table__row:last-child {
    border-bottom: none;
}

.mark-sheet-table__td {
    padding: 20px 16px;
    text-align: center;
    font-size: 0.9375rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 問番号セル - サークルデザイン */
.mark-sheet-table__td--number {
    font-weight: 700;
    color: #1d1d1f;
}

.mark-sheet-table__number-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9375rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(30, 58, 95, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mark-sheet-table__row:hover .mark-sheet-table__number-circle {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.3);
}

/* 正解セル */
.mark-sheet-table__td--answer {
    /* 正解バッジのコンテナ */
}

/* 配点セル */
.mark-sheet-table__td--points {
    font-weight: 600;
    color: #1d1d1f;
}

.mark-sheet-table__points-text {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1d1d1f;
}

.mark-sheet-table__points-unit {
    font-size: 0.875rem;
    color: #86868b;
    margin-left: 2px;
}

/* 選択肢セル */
.mark-sheet-table__td--choices {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 16px;
}

/* 正解バッジ - 緑で強調 */
.mark-sheet-table__answer-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    height: 40px;
    padding: 0 20px;
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: #ffffff;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
    letter-spacing: 0.5px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mark-sheet-table__row:hover .mark-sheet-table__answer-badge {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(5, 150, 105, 0.4);
}

/* 選択肢バッジ */
.mark-sheet-table__choice-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 36px;
    padding: 0 16px;
    background: #f5f5f7;
    color: #1d1d1f;
    border: 1px solid #e5e5ea;
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
}

.mark-sheet-table__choice-badge:hover {
    background: #e5e5ea;
    border-color: #d2d2d7;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 正解の選択肢バッジ - 緑でハイライト */
.mark-sheet-table__choice-badge--correct {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: #ffffff;
    border: 1px solid #047857;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
    font-weight: 700;
}

.mark-sheet-table__choice-badge--correct:hover {
    background: linear-gradient(135deg, #047857 0%, #065f46 100%);
    border-color: #065f46;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 16px rgba(5, 150, 105, 0.4);
}

/* モーダルフッター */
.mark-sheet-modal__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 40px;
    background: #ffffff;
    border-top: 1px solid #e5e5ea;
}

/* モーダルアニメーション - スムーズなフェードイン */
.modal.fade .mark-sheet-modal {
    opacity: 0;
    transform: scale(0.95) translateY(-20px);
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal.show .mark-sheet-modal {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .mark-sheet-modal__header {
        padding: 24px;
    }

    .mark-sheet-modal__header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .mark-sheet-modal__close {
        align-self: flex-end;
        position: absolute;
        top: 16px;
        right: 16px;
    }

    .mark-sheet-modal__title {
        font-size: 0.875rem;
    }

    .mark-sheet-modal__subtitle {
        font-size: 1.25rem;
    }

    .mark-sheet-modal__body {
        padding: 24px 16px;
    }

    .mark-sheet-modal__info-card {
        padding: 24px;
        margin-bottom: 24px;
    }

    .mark-sheet-modal__info-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .mark-sheet-modal__info-divider {
        width: 100%;
        height: 1px;
        background: linear-gradient(to right, transparent, #e5e5ea, transparent);
    }

    .mark-sheet-modal__info-icon {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }

    .mark-sheet-modal__info-value {
        font-size: 1.5rem;
    }

    .mark-sheet-modal__footer {
        padding: 20px;
    }

    .mark-sheet-table__th,
    .mark-sheet-table__td {
        padding: 16px 12px;
        font-size: 0.8125rem;
    }

    .mark-sheet-table__number-circle {
        width: 32px;
        height: 32px;
        font-size: 0.8125rem;
    }

    .mark-sheet-table__choice-badge {
        min-width: 40px;
        height: 32px;
        padding: 0 12px;
        font-size: 0.8125rem;
    }

    .mark-sheet-table__answer-badge {
        min-width: 48px;
        height: 36px;
        font-size: 0.9375rem;
    }
}

/* ===================================
   MyPage Specific Styles
   Primary Color: Forest Green #1E6F5C
   =================================== */

/* マイページ プライマリーボタン */
.btn-mypage-primary {
    background-color: #1E6F5C;
    border-color: #1E6F5C;
    color: #ffffff;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-mypage-primary:hover {
    background-color: #165a4a;
    border-color: #165a4a;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 111, 92, 0.2);
}

.btn-mypage-primary:active {
    background-color: #124539;
    border-color: #124539;
    transform: translateY(0);
}

/* ===================================
   Badge Styles - Monochrome & Minimal
   =================================== */

/* ステータスバッジ - 成功（募集中） */
.badge-status-success {
    background-color: #E8F5E9;
    color: #1B5E20;
    font-weight: 600;
    font-size: 13px;
    border-radius: 8px;
}

/* ステータスバッジ - 警告（試験期間中） */
.badge-status-warning {
    background-color: #FFF4E6;
    color: #E65100;
    font-weight: 600;
    font-size: 13px;
    border-radius: 8px;
}

/* ステータスバッジ - 非アクティブ（終了） */
.badge-status-inactive {
    background-color: #F5F5F7;
    color: #86868B;
    font-weight: 600;
    font-size: 13px;
    border-radius: 8px;
}

/* ステータスバッジ - 申込済 */
.badge-status-applied {
    background-color: #E6F5F1;
    color: #1E6F5C;
    font-weight: 600;
    font-size: 13px;
    border-radius: 8px;
}

/* ステータスバッジ - 未申込 */
.badge-status-not-applied {
    background-color: #F5F5F7;
    color: #6c757d;
    font-weight: 600;
    font-size: 13px;
    border-radius: 8px;
}

/* ===================================
   Mock Exams Table Specific Styles
   =================================== */

/* ステータス列のアイコン付きテキスト */
.mock-exams-table__status {
    display: inline-flex;
    align-items: center;
    font-weight: 500;
}

.mock-exams-table__status i {
    color: #86868B;
}

/* 注釈エリア */
.mock-exams-table__legend {
    background-color: #f8fafc;
    border-radius: 8px;
    padding: 16px;
}

/* テーブル行のホバー効果（マイページ用） */
.data-table-card .data-table__row:hover {
    background-color: rgba(30, 111, 92, 0.03);
}

/* ===================================
   Responsive Design for Mock Exams Table
   =================================== */

@media (max-width: 768px) {
    /* モバイルでのテーブル最適化 */
    .data-table__th,
    .data-table__td {
        font-size: 13px;
        padding: 12px 8px;
    }

    /* バッジサイズ調整 */
    .badge-status-success,
    .badge-status-warning,
    .badge-status-inactive,
    .badge-status-applied,
    .badge-status-not-applied {
        font-size: 11px;
        padding: 4px 8px;
    }

    /* ボタンサイズ調整 */
    .btn-mypage-primary {
        font-size: 13px;
        padding: 6px 16px;
    }

    /* 注釈エリアのレスポンシブ対応 */
    .mock-exams-table__legend {
        padding: 12px;
    }

    .mock-exams-table__legend .small {
        font-size: 12px;
    }
}

/* ===================================
   Account URL Modal
   =================================== */

.account-url-modal__qr-border {
    border: 1px solid #E5E5EA;
}

/* ===================================
   Application Link Modal
   =================================== */

.application-link-modal__qr-border {
    border: 1px solid #E5E5EA;
}

/* ===================================
   Accessibility & Motion Preferences
   =================================== */

@media (prefers-reduced-motion: reduce) {
    .btn-mypage-primary,
    .data-table__row {
        transition-duration: 0.01ms !important;
    }
}

/* ===================================
   模試パック作成・編集画面
   =================================== */

/* パック模試リストコンテナ */
.pack-exam-list {
    background: #FFFFFF;
    overflow: hidden;
}

/* 模試選択アイテム */
.pack-exam-item {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid #F5F5F7;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.pack-exam-item:last-child {
    border-bottom: none;
}

.pack-exam-item:hover {
    background-color: #FAFAFA;
}

.pack-exam-item.is-selected {
    background-color: #F0F7FF;
    border-left: 3px solid #1E3A5F;
    padding-left: 21px;
}

.pack-exam-item.is-base {
    background-color: #F8F9FA;
    cursor: default;
    border-left: 3px solid #1E3A5F;
    padding-left: 21px;
}

.pack-exam-item.is-base:hover {
    background-color: #F8F9FA;
}

/* チェックボックス */
.pack-exam-checkbox {
    width: 20px;
    height: 20px;
    margin-right: 16px;
    cursor: pointer;
    accent-color: #1E3A5F;
    flex-shrink: 0;
}

/* 模試情報エリア */
.pack-exam-info {
    flex: 1;
    min-width: 0;
}

.pack-exam-name {
    font-weight: 600;
    color: #1D1D1F;
    font-size: 15px;
    line-height: 1.4;
    margin-bottom: 4px;
}

.pack-exam-date {
    font-size: 13px;
    color: #86868B;
    line-height: 1.4;
}

.pack-exam-date i {
    color: #C6C6C8;
    font-size: 14px;
}

.pack-exam-badge {
    flex-shrink: 0;
    margin-left: 16px;
}

/* 価格プレビューカード（スティッキー） */
.price-preview-card {
    position: sticky;
    top: 100px;
}

.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #F5F5F7;
}

.price-row:last-child {
    border-bottom: none;
}

.price-row__label {
    font-size: 14px;
    color: #86868B;
    font-weight: 500;
}

.price-row__value {
    font-size: 15px;
    font-weight: 600;
    color: #1D1D1F;
}

.price-row--total {
    border-top: 2px solid #1D1D1F;
    margin-top: 8px;
    padding-top: 16px;
}

.price-row--total .price-row__label {
    font-size: 16px;
    font-weight: 700;
    color: #1D1D1F;
}

.price-row--total .price-row__value {
    font-size: 24px;
    font-weight: 700;
    color: #1E3A5F;
}

.price-discount {
    color: #FF3B30;
    font-weight: 600;
}

.price-original {
    text-decoration: line-through;
    color: #86868B;
    font-weight: 500;
}

/* 選択中の模試リスト */
.selected-exam-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.selected-exam-list__item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #F5F5F7;
}

.selected-exam-list__item:last-child {
    border-bottom: none;
}

.selected-exam-list__icon {
    color: #86868B;
    font-size: 18px;
    margin-right: 8px;
    flex-shrink: 0;
}

.selected-exam-list__name {
    flex: 1;
    font-size: 14px;
    color: #1D1D1F;
    line-height: 1.4;
}

/* カードスタイル */
.pack-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    background: #FFFFFF;
    overflow: hidden;
}

.pack-card__body {
    padding: 24px;
}

.pack-card__title {
    font-size: 16px;
    font-weight: 700;
    color: #1D1D1F;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
}

.pack-card__title-icon {
    font-size: 20px;
    margin-right: 8px;
    color: #86868B;
}

.pack-card__description {
    font-size: 13px;
    color: #86868B;
    margin-bottom: 16px;
    line-height: 1.5;
}

/* フォームスタイル */
.pack-form-group {
    margin-bottom: 24px;
}

.pack-form-group:last-child {
    margin-bottom: 0;
}

.pack-form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #86868B;
    margin-bottom: 8px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.pack-form-control {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #D2D2D7;
    border-radius: 8px;
    font-size: 15px;
    color: #1D1D1F;
    transition: all 0.2s ease;
}

.pack-form-control:focus {
    outline: none;
    border-color: #1E3A5F;
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}

.pack-form-control.is-invalid {
    border-color: #dc3545;
}

.pack-form-hint {
    display: block;
    font-size: 12px;
    color: #86868B;
    margin-top: 6px;
}

/* 入力グループ */
.pack-input-group {
    display: flex;
    align-items: stretch;
}

.pack-input-group__prefix {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background-color: #F5F5F7;
    border: 1px solid #D2D2D7;
    border-right: none;
    border-radius: 8px 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: #86868B;
}

.pack-input-group .pack-form-control {
    border-radius: 0 8px 8px 0;
}

/* ボタンスタイル */
.pack-btn-primary {
    background-color: #1E3A5F;
    color: #FFFFFF;
    border: none;
    padding: 14px 32px;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
}

.pack-btn-primary:hover {
    background-color: #2C5282;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.3);
}

.pack-btn-primary:active {
    transform: translateY(0);
}

.pack-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* 空状態表示 */
.pack-empty-state {
    text-align: center;
    padding: 48px 24px;
    color: #86868B;
}

.pack-empty-state__icon {
    font-size: 48px;
    color: #C6C6C8;
    margin-bottom: 16px;
}

.pack-empty-state__text {
    font-size: 14px;
    color: #86868B;
}

/* バッジスタイル */
.pack-badge {
    background-color: #E6EEF7;
    color: #1E3A5F;
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 600;
}

.pack-badge--small {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 10px;
}

/* ページタイトルエリア */
.pack-page-icon {
    color: #86868B;
}

.pack-page-description {
    color: #86868B;
}

/* レスポンシブ対応 */
@media (max-width: 991px) {
    .price-preview-card {
        position: static;
        margin-top: 24px;
    }

    .pack-exam-item {
        padding: 12px 16px;
    }

    .pack-card__body {
        padding: 20px;
    }
}

@media (max-width: 575px) {
    .pack-exam-name {
        font-size: 14px;
    }

    .pack-exam-date {
        font-size: 12px;
    }

    .pack-card__title {
        font-size: 15px;
    }
}

/* ===============================================
   模試申込フロー共通スタイル
   Primary Color: Orange #E67E22
   =============================================== */

/* --- 入力フィールド --- */
.mock-exam-apply__input {
    border: 1px solid #d2d2d7;
    border-radius: 4px !important;
    padding: 10px 14px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.mock-exam-apply__input--lg {
    padding: 12px 16px;
    font-size: 15px;
}

.mock-exam-apply__input:focus {
    border-color: #E67E22;
    box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.15);
    outline: none;
}

.mock-exam-apply__input::placeholder {
    color: #C6C6C8;
}

/* --- セクションタイトル色 --- */
.mock-exam-apply__heading {
    color: #1D1D1F;
}

.mock-exam-apply__heading--loose {
    line-height: 1.8;
}

/* --- プライマリボタン（オレンジ） --- */
.mock-exam-apply__btn-primary {
    background-color: #E67E22;
    border: none;
    color: #ffffff;
    font-size: 16px;
    transition: all 0.3s ease;
    min-width: 200px;
}

.mock-exam-apply__btn-primary:hover {
    background-color: #D35400;
    color: #ffffff;
}

.mock-exam-apply__btn-primary:focus {
    box-shadow: 0 0 0 4px rgba(230, 126, 34, 0.2);
    color: #ffffff;
}

.mock-exam-apply__btn-primary:disabled {
    background-color: #C6C6C8;
    transform: none;
    box-shadow: none;
}

/* --- アウトラインボタン（オレンジ） --- */
.mock-exam-apply__btn-outline {
    background-color: transparent;
    border: 2px solid #E67E22;
    color: #E67E22;
    font-size: 16px;
    transition: all 0.3s ease;
}

.mock-exam-apply__btn-outline:hover {
    background-color: #E67E22;
    color: #ffffff;
}

.mock-exam-apply__btn-outline:focus {
    box-shadow: 0 0 0 4px rgba(230, 126, 34, 0.2);
}

/* --- リンク --- */
.mock-exam-apply__link {
    transition: all 0.2s ease;
}

.mock-exam-apply__link:hover {
    color: #E67E22 !important;
}

/* --- チェックボックス・ラジオボタン --- */
.mock-exam-apply__check-input:checked {
    background-color: #E67E22;
    border-color: #E67E22;
}

.mock-exam-apply__check-input:focus {
    box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.15);
    border-color: #E67E22;
}

/* --- アラート --- */
.mock-exam-apply__alert-danger {
    background-color: #FADBD8;
    color: #C0392B;
}

/* --- エラーメッセージ --- */
.mock-exam-apply__invalid-feedback {
    font-size: 13px;
    color: #FF3B30;
    margin-top: 6px;
}

/* --- 入力エラー時 --- */
.mock-exam-apply__input.is-invalid {
    border-color: #FF3B30 !important;
}

.mock-exam-apply__input.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.15) !important;
}

/* --- ローディング状態 --- */
.mock-exam-apply__btn-loading {
    position: relative;
    pointer-events: none;
}

.mock-exam-apply__btn-loading .mock-exam-apply__btn-text {
    visibility: hidden;
}

.mock-exam-apply__btn-loading::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    margin-left: -10px;
    margin-top: -10px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: mock-exam-apply-spin 0.8s linear infinite;
}

@keyframes mock-exam-apply-spin {
    to {
        transform: rotate(360deg);
    }
}

/* --- パスワード入力フィールド --- */
.mock-exam-apply__password-wrapper {
    position: relative;
}

.mock-exam-apply__password-wrapper input {
    padding-right: 45px;
}

.mock-exam-apply__password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #86868B;
    font-size: 18px;
    transition: color 0.2s ease;
}

.mock-exam-apply__password-toggle:hover {
    color: #E67E22;
}

/* --- 会場選択トリガー --- */
.mock-exam-apply__venue-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border: 1px solid #d2d2d7;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #FFFFFF;
}

.mock-exam-apply__venue-trigger:hover {
    border-color: #E67E22;
    background: #FFFAF5;
}

.mock-exam-apply__venue-trigger.is-selected {
    border-color: #E67E22;
    background: #FFF8F2;
}

.mock-exam-apply__venue-trigger.is-invalid {
    border-color: #FF3B30;
}

.mock-exam-apply__venue-trigger-content {
    display: flex;
    align-items: center;
    color: #86868B;
    font-size: 14px;
}

.mock-exam-apply__venue-trigger.is-selected .mock-exam-apply__venue-trigger-content {
    color: #1D1D1F;
    font-weight: 500;
}

.mock-exam-apply__venue-trigger-content i {
    color: #E67E22;
}

/* --- 登録情報表示 --- */
.mock-exam-apply__registered-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mock-exam-apply__registered-info-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mock-exam-apply__registered-info-label {
    font-size: 12px;
    font-weight: 600;
    color: #86868B;
}

.mock-exam-apply__registered-info-value {
    font-size: 14px;
    color: #1D1D1F;
}

/* --- プラン選択 --- */
.mock-exam-apply__plan-option {
    border: 2px solid #d2d2d7;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
}

.mock-exam-apply__plan-option:hover {
    border-color: #E67E22;
}

.mock-exam-apply__plan-option.is-selected {
    border-color: #E67E22;
    box-shadow: 0 0 0 2px rgba(230, 126, 34, 0.2);
}

.mock-exam-apply__plan-header {
    display: flex;
    align-items: center;
    padding: 20px;
    background: #FFFFFF;
    transition: all 0.2s ease;
}

.mock-exam-apply__plan-option.is-selected .mock-exam-apply__plan-header {
    background: #FFF8F2;
}

.mock-exam-apply__plan-radio {
    width: 22px;
    height: 22px;
    border: 2px solid #d2d2d7;
    border-radius: 50%;
    margin-right: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.mock-exam-apply__plan-option.is-selected .mock-exam-apply__plan-radio {
    border-color: #E67E22;
}

.mock-exam-apply__plan-radio-inner {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #E67E22;
    transform: scale(0);
    transition: transform 0.2s ease;
}

.mock-exam-apply__plan-option.is-selected .mock-exam-apply__plan-radio-inner {
    transform: scale(1);
}

.mock-exam-apply__plan-info {
    flex: 1;
}

.mock-exam-apply__plan-title {
    font-size: 16px;
    font-weight: 600;
    color: #1D1D1F;
}

.mock-exam-apply__plan-desc {
    font-size: 13px;
    color: #86868B;
    margin-top: 2px;
}

.mock-exam-apply__plan-price {
    text-align: right;
}

.mock-exam-apply__price-value {
    font-size: 20px;
    font-weight: 700;
    color: #1D1D1F;
}

.mock-exam-apply__price-original {
    font-size: 14px;
    color: #86868B;
    text-decoration: line-through;
    display: block;
}

.mock-exam-apply__price-tax {
    font-size: 12px;
    color: #86868B;
}

.mock-exam-apply__plan-body {
    background: #F9FAFB;
}

.mock-exam-apply__pack-details {
    padding: 16px 20px;
    border-top: 1px solid #E5E5EA;
}

.mock-exam-apply__pack-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #1D1D1F;
    margin-bottom: 8px;
}

.mock-exam-apply__pack-item i {
    font-size: 18px;
    flex-shrink: 0;
}

.mock-exam-apply__pack-item span:first-of-type {
    flex: 1;
}

.mock-exam-apply__pack-price {
    font-weight: 600;
    color: #E67E22;
    flex-shrink: 0;
}

.mock-exam-apply__pack-discount {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #E67E22;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #E5E5EA;
}

/* --- 支払い方法選択 --- */
.mock-exam-apply__payment-option {
    border: 1px solid #d2d2d7;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
}

.mock-exam-apply__payment-option:hover {
    border-color: #E67E22;
}

.mock-exam-apply__payment-option.is-selected {
    border-color: #E67E22;
    box-shadow: 0 0 0 1px #E67E22;
}

.mock-exam-apply__payment-header {
    display: flex;
    align-items: center;
    padding: 16px;
    background: #FFFFFF;
    transition: all 0.2s ease;
}

.mock-exam-apply__payment-option.is-selected .mock-exam-apply__payment-header {
    background: #FFF8F2;
}

.mock-exam-apply__payment-radio {
    width: 20px;
    height: 20px;
    border: 2px solid #d2d2d7;
    border-radius: 50%;
    margin-right: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.mock-exam-apply__payment-option.is-selected .mock-exam-apply__payment-radio {
    border-color: #E67E22;
}

.mock-exam-apply__payment-radio-inner {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #E67E22;
    transform: scale(0);
    transition: transform 0.2s ease;
}

.mock-exam-apply__payment-option.is-selected .mock-exam-apply__payment-radio-inner {
    transform: scale(1);
}

.mock-exam-apply__payment-info {
    flex: 1;
}

.mock-exam-apply__payment-title {
    font-size: 15px;
    font-weight: 600;
    color: #1D1D1F;
    display: flex;
    align-items: center;
}

.mock-exam-apply__payment-title i {
    color: #E67E22;
    font-size: 18px;
}

.mock-exam-apply__payment-desc {
    font-size: 12px;
    color: #86868B;
    margin-top: 2px;
}

.mock-exam-apply__payment-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: #F9FAFB;
}

.mock-exam-apply__payment-option.is-selected .mock-exam-apply__payment-body {
    max-height: 400px;
}

.mock-exam-apply__card-form {
    padding: 20px;
    border-top: 1px solid #E5E5EA;
}

/* --- カード番号入力 --- */
.mock-exam-apply__card-number-wrapper {
    position: relative;
}

.mock-exam-apply__card-brands {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 6px;
    color: #86868B;
    font-size: 20px;
}

.mock-exam-apply__card-number-wrapper input {
    padding-right: 70px;
}

/* --- カード名義（大文字変換） --- */
.mock-exam-apply__card-name-input {
    text-transform: uppercase;
}

/* --- 認証案内画面 --- */
.mock-exam-apply__verify-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #FFF3E8;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.mock-exam-apply__verify-icon i {
    font-size: 40px;
    color: #E67E22;
}

.mock-exam-apply__verify-email {
    background: #F5F5F7;
    border-radius: 8px;
    padding: 12px 16px;
    font-weight: 600;
    color: #1D1D1F;
    word-break: break-all;
}

.mock-exam-apply__cooldown-text {
    font-size: 13px;
    color: #86868B;
}

/* --- 完了画面 --- */
.mock-exam-apply__complete-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #E8F8ED;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.mock-exam-apply__complete-icon i {
    font-size: 40px;
    color: #34C759;
}

.mock-exam-apply__summary-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #F0F0F0;
}

.mock-exam-apply__summary-label {
    font-size: 13px;
    color: #86868B;
}

.mock-exam-apply__summary-value {
    font-size: 14px;
    font-weight: 600;
    color: #1D1D1F;
}

.mock-exam-apply__summary-item:last-child {
    border-bottom: none;
}

/* --- エラー画面 --- */
.mock-exam-apply__error-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #FADBD8;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.mock-exam-apply__error-icon i {
    font-size: 40px;
    color: #C0392B;
}

.mock-exam-apply__error-icon--warning {
    background: #FFF3E8;
}

.mock-exam-apply__error-icon--warning i {
    color: #E67E22;
}

.mock-exam-apply__period-info {
    background: #F5F5F7;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    color: #1D1D1F;
}

/* --- レスポンシブ対応 --- */
@media (max-width: 576px) {
    .mock-exam-apply__plan-header {
        flex-wrap: wrap;
        gap: 8px;
        padding: 14px;
    }

    .mock-exam-apply__plan-radio {
        width: 20px;
        height: 20px;
        margin-right: 10px;
    }

    .mock-exam-apply__plan-radio-inner {
        width: 10px;
        height: 10px;
    }

    .mock-exam-apply__plan-info {
        flex: 1;
        min-width: 0;
    }

    .mock-exam-apply__plan-title {
        font-size: 14px;
        line-height: 1.4;
    }

    .mock-exam-apply__plan-desc {
        font-size: 11px;
    }

    .mock-exam-apply__plan-price {
        width: 100%;
        text-align: left;
        padding-left: 30px;
        margin-top: 4px;
    }

    .mock-exam-apply__price-value {
        font-size: 18px;
    }

    .mock-exam-apply__price-original {
        font-size: 12px;
        display: inline;
        margin-right: 8px;
    }

    .mock-exam-apply__price-tax {
        font-size: 11px;
    }

    .mock-exam-apply__pack-details {
        padding: 12px 14px;
    }

    .mock-exam-apply__pack-item {
        font-size: 12px;
        gap: 6px;
        margin-bottom: 6px;
    }

    .mock-exam-apply__pack-item i {
        font-size: 16px;
    }

    .mock-exam-apply__pack-price {
        font-size: 12px;
    }

    .mock-exam-apply__pack-discount {
        font-size: 12px;
        margin-top: 10px;
        padding-top: 10px;
    }

    .mock-exam-apply__payment-header {
        padding: 12px;
    }

    .mock-exam-apply__payment-radio {
        width: 18px;
        height: 18px;
        margin-right: 10px;
    }

    .mock-exam-apply__payment-radio-inner {
        width: 8px;
        height: 8px;
    }

    .mock-exam-apply__payment-title {
        font-size: 14px;
    }

    .mock-exam-apply__payment-title i {
        font-size: 16px;
    }

    .mock-exam-apply__payment-desc {
        font-size: 11px;
    }

    .mock-exam-apply__card-form {
        padding: 14px;
    }

    .mock-exam-apply__card-form .form-label {
        font-size: 12px !important;
    }

    .mock-exam-apply__card-brands {
        font-size: 16px;
        gap: 4px;
        right: 8px;
    }

    .mock-exam-apply__card-number-wrapper input {
        padding-right: 55px;
    }

    .mock-exam-apply__btn-primary {
        min-width: auto;
        width: 100%;
        font-size: 15px;
    }

    .mock-exam-apply__plan-option {
        border-radius: 10px;
    }
}

@media (max-width: 768px) and (min-width: 577px) {
    .mock-exam-apply__plan-header {
        padding: 16px;
    }

    .mock-exam-apply__plan-title {
        font-size: 15px;
    }

    .mock-exam-apply__price-value {
        font-size: 18px;
    }
}

/* ===============================================
   会場選択モーダル - 共通スタイル
   =============================================== */

.venue-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 350px;
    overflow-y: auto;
    padding-right: 5px;
}

.venue-option {
    position: relative;
}

.venue-option__radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.venue-option__label {
    display: block;
    padding: 14px 16px;
    border: 2px solid #E5E5EA;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #FFFFFF;
}

.venue-option__label:hover {
    border-color: #C6C6C8;
    background: #FAFAFA;
}

.venue-option__radio:checked + .venue-option__label {
    border-color: #007AFF;
    background: #F0F7FF;
}

.venue-option__radio:checked + .venue-option__label .venue-option__name {
    color: #007AFF;
}

.venue-option__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.venue-option__name {
    font-weight: 600;
    font-size: 15px;
    color: #1D1D1F;
}

.venue-option__remaining {
    font-size: 12px;
    color: #34C759;
    font-weight: 500;
    background: #E8F8ED;
    padding: 2px 8px;
    border-radius: 10px;
}

.venue-option__remaining--low {
    color: #FF9500;
    background: #FFF5E6;
}

.venue-option__details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.venue-option__address {
    font-size: 13px;
    color: #86868B;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.venue-option__address i {
    font-size: 14px;
    flex-shrink: 0;
}

.venue-option__map-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: #007AFF;
    font-size: 14px;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s ease;
    margin-left: 4px;
}

.venue-option__map-link:hover {
    background: rgba(0, 122, 255, 0.1);
    color: #0056B3;
}

.venue-option__phone {
    font-size: 13px;
    color: #86868B;
    display: flex;
    align-items: center;
}

.venue-option__phone i {
    font-size: 14px;
    flex-shrink: 0;
}

.venue-option__phone a {
    color: #007AFF;
    text-decoration: none;
    transition: color 0.2s ease;
}

.venue-option__phone a:hover {
    color: #0056B3;
    text-decoration: underline;
}

.venue-option__notes {
    font-size: 12px;
    color: #A0A0A5;
    display: flex;
    align-items: flex-start;
    margin-top: 2px;
    line-height: 1.4;
}

.venue-option__notes i {
    font-size: 13px;
    flex-shrink: 0;
    margin-top: 1px;
}

.venue-options::-webkit-scrollbar {
    width: 6px;
}

.venue-options::-webkit-scrollbar-track {
    background: #F5F5F7;
    border-radius: 3px;
}

.venue-options::-webkit-scrollbar-thumb {
    background: #C6C6C8;
    border-radius: 3px;
}

.venue-options::-webkit-scrollbar-thumb:hover {
    background: #A0A0A5;
}

/* ===============================================
   オンライン受験 - 会場選択オプション
   =============================================== */

.venue-option--online .venue-option__label {
    border-color: #E3F2FD;
    background: #F8FBFF;
}

.venue-option--online .venue-option__label:hover {
    border-color: #90CAF9;
    background: #EDF5FF;
}

.venue-option--online .venue-option__radio:checked + .venue-option__label {
    border-color: #007AFF;
    background: #F0F7FF;
}

.venue-option__remaining--online {
    color: #007AFF !important;
    background: #E3F2FD !important;
    font-size: 11px;
}

/* ===================================
   Select2 — 通常の form-select との見た目統一
   角丸: 8px (rounded-2)、高さ・フォーカス色を合わせる
   =================================== */

/* --- 選択ボックス本体 --- */
.select2-container--bootstrap-5 .select2-selection {
    border-radius: 8px !important;
}

/* --- フォーカス・展開時の枠色 --- */
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: #007AFF !important;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1) !important;
}

/* --- 下方向に開いた時の角丸制御 --- */
.select2-container--bootstrap-5.select2-container--open.select2-container--below .select2-selection {
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* --- 上方向に開いた時の角丸制御 --- */
.select2-container--bootstrap-5.select2-container--open.select2-container--above .select2-selection {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/* --- ドロップダウン --- */
.select2-container--bootstrap-5 .select2-dropdown {
    border-radius: 8px !important;
    border-color: #007AFF !important;
}

.select2-container--bootstrap-5 .select2-dropdown.select2-dropdown--below {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.select2-container--bootstrap-5 .select2-dropdown.select2-dropdown--above {
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* --- ドロップダウン内の検索ボックス --- */
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
    border-radius: 6px !important;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
    border-color: #007AFF !important;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1) !important;
}

/* ===================================
   アカウント新規登録フォーム
   Primary Color: Orange #E67E22
   =================================== */

/* 入力フィールド */
.register-input {
    border: 1px solid #d2d2d7;
    border-radius: 4px !important;
    padding: 10px 14px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.register-input:focus {
    border-color: #E67E22;
    box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.15);
    outline: none;
}

.register-input::placeholder {
    color: #C6C6C8;
}

/* プライマリボタン（オレンジ） */
.btn-register-primary {
    background-color: #E67E22;
    border: none;
    color: #ffffff;
    font-size: 16px;
    transition: all 0.3s ease;
    min-width: 200px;
}

.btn-register-primary:hover {
    background-color: #D35400;
    color: #ffffff;
}

.btn-register-primary:focus {
    box-shadow: 0 0 0 4px rgba(230, 126, 34, 0.2);
    color: #ffffff;
}

.btn-register-primary:disabled {
    background-color: #C6C6C8;
}

/* フォームタイトル */
.register-form__title {
    color: #1D1D1F;
}

/* リンク */
.register-form__link {
    color: #E67E22;
    transition: color 0.2s ease;
}

.register-form__link:hover {
    color: #D35400;
}

/* アイコン（共通） */
.register-form__icon {
    font-size: 64px;
    display: block;
}

/* アイコン — 完了（緑） */
.register-form__icon--success {
    color: #27AE60;
}

/* アイコン — エラー（赤） */
.register-form__icon--error {
    color: #E74C3C;
}

/* アイコン — 警告（オレンジ） */
.register-form__icon--warning {
    color: #E67E22;
}

/* アイコン — メール送信（オレンジ） */
.register-form__icon--mail {
    color: #E67E22;
}

/* パスワード入力ラッパー */
.password-input-wrapper {
    position: relative;
}

.password-input-wrapper input {
    padding-right: 45px;
}

/* パスワード表示切り替えボタン（登録フォーム用） */
.password-toggle-btn--register {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 8px;
    font-size: 18px;
    color: #6c757d;
    cursor: pointer;
    z-index: 2;
}

.password-toggle-btn--register:hover {
    color: #E67E22;
}

/* ===============================================
   マイページ プロフィール情報ページ
   =============================================== */

/* セクションタイトル */
.profile-section__title {
    font-size: 18px;
    font-weight: 600;
    color: #1D1D1F;
    display: flex;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--mypage-primary, #1E6F5C);
    margin-bottom: 20px;
}

.profile-section__title i {
    font-size: 22px;
    color: var(--mypage-primary, #1E6F5C);
}

/* ===============================================
   プロフィール - Select2 カスタムスタイル
   =============================================== */

/* Select2 コンテナ */
.profile-section .select2-container--bootstrap-5 .select2-selection {
    border-color: #ced4da;
    min-height: 38px;
}

.profile-section .select2-container--bootstrap-5 .select2-selection--single {
    padding: 0.375rem 0.75rem;
}

.profile-section .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    padding: 0;
    line-height: 1.5;
    color: #1D1D1F;
}

.profile-section .select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder {
    color: #86868B;
}

/* フォーカス時 */
.profile-section .select2-container--bootstrap-5.select2-container--focus .select2-selection,
.profile-section .select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--mypage-primary, #1E6F5C);
    box-shadow: 0 0 0 0.2rem rgba(30, 111, 92, 0.15);
}

/* ドロップダウン */
.select2-container--bootstrap-5 .select2-dropdown {
    border-color: var(--mypage-primary, #1E6F5C);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

/* 検索ボックス */
.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field {
    border-color: #ced4da;
    border-radius: 6px;
    padding: 8px 12px;
}

.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--mypage-primary, #1E6F5C);
    box-shadow: 0 0 0 0.2rem rgba(30, 111, 92, 0.15);
}

/* オプション */
.select2-container--bootstrap-5 .select2-results__option {
    padding: 10px 12px;
    font-size: 14px;
}

.select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: var(--mypage-primary-light, #E6F5F1);
    color: var(--mypage-primary, #1E6F5C);
}

.select2-container--bootstrap-5 .select2-results__option--selected {
    background-color: var(--mypage-primary, #1E6F5C);
    color: white;
}

/* 検索結果なし */
.select2-container--bootstrap-5 .select2-results__message {
    color: #86868B;
    padding: 10px 12px;
}

/* クリアボタン */
.select2-container--bootstrap-5 .select2-selection__clear {
    color: #86868B;
    font-size: 18px;
    margin-right: 5px;
}

.select2-container--bootstrap-5 .select2-selection__clear:hover {
    color: #1D1D1F;
}

/* 矢印 */
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
    right: 10px;
}

/* Select2 バリデーションエラー時 */
.select2-container--bootstrap-5.is-invalid + .select2-container .select2-selection,
.is-invalid + .select2-container--bootstrap-5 .select2-selection {
    border-color: #dc3545;
}

/* ===============================================
   プロフィール - 評定アコーディオンスタイル
   =============================================== */

.profile-grade-accordion .accordion-button {
    font-weight: 600;
    color: #1D1D1F;
    background-color: #f8f9fa;
}

.profile-grade-accordion .accordion-button:not(.collapsed) {
    color: var(--mypage-primary, #1E6F5C);
    background-color: #E6F5F1;
    box-shadow: none;
}

.profile-grade-accordion .accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(30, 111, 92, 0.15);
    border-color: var(--mypage-primary, #1E6F5C);
}

.profile-grade-accordion .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231E6F5C'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.profile-grade-accordion .accordion-body {
    background-color: #ffffff;
}

/* 入力モード切替ラジオ */
.profile-grade-accordion .form-check-input:checked {
    background-color: var(--mypage-primary, #1E6F5C);
    border-color: var(--mypage-primary, #1E6F5C);
}

/* ===============================================
   プロフィール - レスポンシブスタイル
   =============================================== */

@media (max-width: 768px) {
    .profile-section__title {
        font-size: 16px;
    }

    .profile-section__title i {
        font-size: 20px;
    }

    /* スマホでボタンをフルワイドに */
    .profile-action-buttons {
        flex-direction: column-reverse;
    }

    .profile-action-buttons .btn {
        width: 100%;
    }
}

/* スマホ向け - 志望校選択の表示改善 */
@media (max-width: 576px) {
    .profile-section .form-select option {
        font-size: 14px;
        padding: 8px;
    }
}

/* ===============================================
   マイページ 高専情報ページ
   =============================================== */

/* 偏差値バッジ */
.technical-colleges__hensachi-badge {
    background-color: #FDEBD0;
    color: #A0522D;
    font-weight: 600;
    font-size: 13px;
    padding: 4px 10px;
    border-radius: 12px;
}

/* リンクアイコン */
.technical-colleges__link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-color: #F5F5F7;
    color: #636366;
    transition: all 0.2s ease;
}

.technical-colleges__link-icon:hover {
    background-color: #E88B00;
    color: white;
}

.technical-colleges__link-icon i {
    font-size: 18px;
}

/* ===============================================
   レスポンシブ（PC/スマホ切り替え）
   =============================================== */

/* スマホ表示: テーブルを非表示 */
@media (max-width: 991px) {
    .technical-colleges__table-wrapper {
        display: none;
    }

    .technical-colleges__cards {
        display: block;
    }
}

/* PC表示: カードを非表示 */
@media (min-width: 992px) {
    .technical-colleges__table-wrapper {
        display: block;
    }

    .technical-colleges__cards {
        display: none;
    }
}

/* ===============================================
   スマホ用カードスタイル
   =============================================== */

.technical-colleges__card {
    background: #FFFFFF;
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 20px;
    margin-bottom: 16px;
    transition: all 0.3s ease;
}

.technical-colleges__card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.technical-colleges__card-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #F5F5F7;
}

.technical-colleges__card-title {
    font-size: 16px;
    font-weight: 600;
    color: #1D1D1F;
    margin: 0;
    line-height: 1.4;
}

.technical-colleges__card-badges {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.technical-colleges__card-number {
    font-size: 12px;
    color: #86868B;
    font-weight: 500;
    background: #F5F5F7;
    padding: 4px 10px;
    border-radius: 10px;
}

.technical-colleges__card-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.technical-colleges__card-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.technical-colleges__card-label {
    font-size: 12px;
    color: #86868B;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.technical-colleges__card-label i {
    font-size: 14px;
}

.technical-colleges__card-value {
    font-size: 14px;
    color: #1D1D1F;
    font-weight: 500;
}

.technical-colleges__card-actions {
    padding-top: 16px;
    border-top: 1px solid #F5F5F7;
}

.technical-colleges__card-actions .btn {
    width: 100%;
    min-height: 44px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.technical-colleges__card-actions .btn i {
    font-size: 18px;
}

/* ===== マイページ パスワード変更 ===== */

/* ページタイトル */
.mypage-password__page-title {
    font-size: 28px;
    letter-spacing: -0.5px;
    color: #1D1D1F;
}

.mypage-password__breadcrumb-text {
    color: #86868B;
    font-size: 14px;
}

/* 情報アラート */
.mypage-password__info-alert {
    background-color: var(--mypage-primary-light, #E6F5F1);
    color: var(--mypage-primary, #1E6F5C);
}

/* パスワード要件 */
.mypage-password__requirements {
    background-color: #F5F5F7;
}

.mypage-password__requirements li.valid i {
    color: var(--mypage-primary, #1E6F5C) !important;
}

.mypage-password__requirements li.valid {
    color: var(--mypage-primary, #1E6F5C);
}

.mypage-password__requirements li.invalid i {
    color: #FF3B30 !important;
}

.mypage-password__requirements li.invalid {
    color: #FF3B30;
}

/* パスワード一致ステータス */
#password-match-status.match .bx {
    color: var(--mypage-primary, #1E6F5C);
}

#password-match-status.match span {
    color: var(--mypage-primary, #1E6F5C);
}

#password-match-status.no-match .bx {
    color: #FF3B30;
}

#password-match-status.no-match span {
    color: #FF3B30;
}

/* レスポンシブ */
@media (max-width: 768px) {
    .mypage-password__page-title {
        font-size: 24px;
    }
}

/* アニメーション軽減 */
@media (prefers-reduced-motion: reduce) {
    .mypage-password__progress .progress-bar {
        transition: none;
    }
}

/* ==========================================================================
   メールアドレス変更ページ
   ========================================================================== */

.mypage-email__page-title {
    font-size: 28px;
    letter-spacing: -0.5px;
    color: #1D1D1F;
}

.mypage-email__breadcrumb-text {
    color: #86868B;
    font-size: 14px;
}

.mypage-email__info-alert {
    background-color: var(--mypage-primary-light, #E6F5F1);
    color: var(--mypage-primary, #1E6F5C);
}

.mypage-email-complete__icon {
    font-size: 4rem;
}

/* レスポンシブ */
@media (max-width: 767.98px) {
    .mypage-email__page-title {
        font-size: 24px;
    }
}

/* ===================================
   テーブルローディング状態
   =================================== */

/* --- オーバーレイ方式 --- */
.table-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: inherit;
    animation: table-loading-fade-in 0.15s ease-out;
}

.table-loading-overlay--fade-out {
    animation: table-loading-fade-out 0.2s ease-out forwards;
}

.table-loading-overlay__spinner .spinner-border {
    width: 2.5rem;
    height: 2.5rem;
}

@keyframes table-loading-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes table-loading-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* --- スケルトン方式 --- */
.table-skeleton__cell {
    padding: 14px 16px;
    vertical-align: middle;
}

.table-skeleton__bar {
    height: 16px;
    background: linear-gradient(90deg, #f8f9fb 30%, #f0f2f5 50%, #f8f9fb 70%);
    background-size: 150% 100%;
    border-radius: 4px;
    animation: table-skeleton-pulse 2s ease-in-out infinite;
}

.table-skeleton__row:nth-child(odd) .table-skeleton__bar {
    width: 75%;
}

.table-skeleton__row:nth-child(even) .table-skeleton__bar {
    width: 60%;
}

.table-skeleton__cell:first-child .table-skeleton__bar {
    width: 30px;
}

.table-skeleton__cell:last-child .table-skeleton__bar {
    width: 50%;
}

@keyframes table-skeleton-pulse {
    0%   { background-position: 150% 0; }
    100% { background-position: -150% 0; }
}

/* --- ページコンテンツ フェードイン --- */
.page-content > .container-fluid,
.auth-page-content,
.flex-grow {
    animation: page-fade-in 0.3s ease-in;
}

@keyframes page-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* --- フォーム/カード ローディング（スピナー + フェードイン） --- */
.form-loading {
    position: relative;
    min-height: 120px;
    pointer-events: none;
}

.form-loading > * {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

.form-loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2rem;
    height: 2rem;
    border: 3px solid #e9ecef;
    border-top-color: #0d6efd;
    border-radius: 50%;
    animation: form-loading-spin 0.8s linear infinite;
    z-index: 1;
}

.form-loading--visible {
    pointer-events: auto;
}

.form-loading--visible > * {
    opacity: 1;
}

.form-loading--visible::before {
    display: none;
}

@keyframes form-loading-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ===============================================
   模試詳細ページ
   =============================================== */

/* 模試情報アイテム */
.mock-exam-info-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mock-exam-info-item__label {
    font-size: 13px;
    color: #86868B;
    font-weight: 500;
    margin-bottom: 0;
    display: flex;
    align-items: center;
}

.mock-exam-info-item__label i {
    font-size: 14px;
}

.mock-exam-info-item__value {
    font-size: 15px;
    color: #1D1D1F;
    font-weight: 500;
}

/* バッジスタイル — mypage-custom.css に統合済み */

/* エントリーボタン（グリーン） */
.btn-entry {
    background-color: #16a34a;
    border-color: #16a34a;
    color: #ffffff;
}

.btn-entry:hover {
    background-color: #15803d;
    border-color: #15803d;
    color: #ffffff;
}

.btn-entry:focus {
    box-shadow: 0 0 0 0.25rem rgba(22, 163, 74, 0.25);
}

/* エントリー済ボタン */
.btn-entry-completed {
    background-color: #d1fae5;
    border-color: #d1fae5;
    color: #166534;
}

.btn-entry-completed:disabled {
    background-color: #d1fae5;
    border-color: #d1fae5;
    color: #166534;
    opacity: 1;
}

/* 会場選択セクション */
.venue-action-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 0;
}

.current-venue-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.current-venue-label {
    font-size: 13px;
    color: #86868B;
    font-weight: 500;
}

.current-venue-name {
    font-size: 18px;
    color: #1D1D1F;
    font-weight: 600;
}

.venue-action-section .btn {
    font-size: 16px;
    font-weight: 600;
    min-width: 240px;
}

/* エントリーボタンエリア */
.exam-entry-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    margin-top: 8px;
    border-top: 1px solid #F5F5F7;
}

.exam-entry-action .btn {
    font-size: 16px;
    font-weight: 600;
    min-width: 240px;
}

/* 試験開始ボタンエリア */
.exam-start-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    margin-top: 8px;
    border-top: 1px solid #F5F5F7;
}

.exam-start-action .btn {
    font-size: 16px;
    font-weight: 600;
    min-width: 240px;
}

/* 会場申込ボタン（ブルー） */
.btn-venue-apply {
    background-color: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

.btn-venue-apply:hover {
    background-color: #1d4ed8;
    border-color: #1d4ed8;
    color: #ffffff;
}

.btn-venue-apply:focus {
    box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.25);
}

/* 残席バッジ（満席） */
.venue-option__remaining--full {
    color: #DC3545;
    background: #FDE8EA;
}

/* 会場オプション（無効状態） */
.venue-option__label--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* レスポンシブ対応 */
@media (max-width: 767px) {
    .venue-action-section .btn,
    .exam-entry-action .btn,
    .exam-start-action .btn {
        min-width: 100%;
        width: 100%;
    }

    .page-title-box {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .page-title-right {
        margin-top: 12px;
    }
}

/* ===================================
   Placeholder - 全体の濃度調整
   =================================== */
::placeholder {
    opacity: 0.4 !important;
}

/* ===================================
   Select2 Bootstrap 5 テーマ上書き
   form-selectとUIを統一する
   =================================== */
.select2-container--bootstrap-5 .select2-selection--single {
    border-radius: 4px !important;
    font-size: 13px !important;
    display: flex !important;
    align-items: center !important;
}

/* ===================================
   模試受験画面 セクションヘッダー
   =================================== */
.mock-exam-section-header {
    margin-bottom: 24px;
}

.mock-exam-section-header__label {
    font-size: 11px;
    font-weight: 700;
    color: #86868B;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 4px;
    display: block;
}

.mock-exam-section-header__title {
    font-size: 24px;
    font-weight: 700;
    color: #1D1D1F;
    margin: 0;
}

/* ===================================
   模試受験画面 ダウンロードカードグリッド
   =================================== */
.mock-exam-download-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    max-width: 900px;
    margin: 0 auto;
}

.mock-exam-download-card {
    width: calc((100% - 32px) / 3);
    max-width: 280px;
    min-width: 200px;
    background: #FFFFFF;
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.mock-exam-download-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.mock-exam-download-card__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.mock-exam-download-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.mock-exam-download-card:hover .mock-exam-download-card__image img {
    transform: scale(1.03);
}

.mock-exam-download-card__subject-name {
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #1D1D1F;
}

.mock-exam-download-card__button {
    width: 100%;
    padding: 12px 16px;
    background: #1e3a5f;
    color: #FFFFFF;
    border: none;
    border-radius: 0;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease-out;
    margin-top: auto;
    cursor: pointer;
}

.mock-exam-download-card__button:hover {
    background: #2C5282;
    color: #FFFFFF;
}

.mock-exam-download-card__button i {
    font-size: 16px;
}

.mock-exam-download-card__button--teal {
    background: #14b8a6;
}

.mock-exam-download-card__button--teal:hover {
    background: #0d9488;
    color: #FFFFFF;
}

.mock-exam-download-card__button--disabled {
    background: #9CA3AF;
    cursor: default;
    pointer-events: none;
}

/* バリエーション: 回答済み（マークシート完了後） */
.btn-marksheet-start--completed {
    background: #6B7280 !important;
}

.btn-marksheet-start--completed:hover {
    background: #4B5563 !important;
}

/* バリエーション: オレンジカラー（マークシート用） */
.mock-exam-download-card--secondary .mock-exam-download-card__button {
    background: #F59E0B;
}

.mock-exam-download-card--secondary .mock-exam-download-card__button:hover {
    background: #D97706;
}

/* バリエーション: ティールカラー（マークシートPDF用） */
.mock-exam-download-card--teal .mock-exam-download-card__button {
    background: #14b8a6;
}

.mock-exam-download-card--teal .mock-exam-download-card__button:hover {
    background: #0d9488;
}

/* ===================================
   模試受験画面 解説授業セクション
   =================================== */
.mock-exam-lesson-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.mock-exam-lesson-card {
    width: calc((100% - 48px) / 3);
    max-width: 340px;
    min-width: 280px;
    background: #FFFFFF;
    border: 1px solid #E5E5EA;
    border-radius: 12px;
    overflow: hidden;
}

.mock-exam-lesson-card__header {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.mock-exam-lesson-card__header-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mock-exam-lesson-card .accordion-item {
    border: none;
    border-bottom: 1px solid #E5E5EA;
}

.mock-exam-lesson-card .accordion-item:last-child {
    border-bottom: none;
}

.mock-exam-lesson-card .accordion-button {
    padding: 16px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #1D1D1F;
    background-color: #FFFFFF;
    border: none;
}

.mock-exam-lesson-card .accordion-button:not(.collapsed) {
    color: #1e3a5f;
    background-color: #F5F5F7;
    box-shadow: none;
}

.mock-exam-lesson-card .accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

.mock-exam-lesson-card .accordion-button::after {
    width: 18px;
    height: 18px;
    background-size: 18px;
}

.mock-exam-lesson-card .accordion-body {
    padding: 0;
    background-color: #F5F5F7;
}

.mock-exam-lesson-card .ratio {
    border-radius: 0;
}

.mock-exam-lesson-card iframe {
    border: none;
}

/* ===================================
   模試受験画面 レスポンシブデザイン
   =================================== */
@media (max-width: 991px) {
    .mock-exam-download-grid {
        gap: 12px;
        max-width: 100%;
    }

    .mock-exam-download-card {
        width: calc((100% - 24px) / 3);
        min-width: 150px;
    }

    .mock-exam-lesson-grid {
        max-width: 100%;
    }

    .mock-exam-lesson-card {
        width: calc((100% - 24px) / 2);
        min-width: 280px;
    }

    .mock-exam-section-header__title {
        font-size: 20px;
    }
}

@media (max-width: 767px) {
    .mock-exam-download-card {
        width: calc((100% - 16px) / 2);
        min-width: 140px;
    }

    .mock-exam-lesson-card {
        width: 100%;
        max-width: 400px;
    }
}

@media (max-width: 575px) {
    .mock-exam-section-header__label {
        font-size: 10px;
    }

    .mock-exam-section-header__title {
        font-size: 18px;
    }

    .mock-exam-download-grid {
        gap: 8px;
    }

    .mock-exam-download-card {
        width: calc((100% - 8px) / 2);
        min-width: 120px;
    }

    .mock-exam-download-card__button {
        font-size: 11px;
        padding: 10px 8px;
    }
}

/* ============================================
   ウェブマークシート画面
   ============================================ */

/* ==========================================
   大問ブロック
   ========================================== */
.marksheet-block {
    background: #fff;
    border: 1.5px solid #ced4da;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.marksheet-block__header {
    background: #1E6F5C;
    padding: 9px 16px;
}

.marksheet-block__no {
    font-weight: 700;
    font-size: 0.88rem;
    color: #fff;
    letter-spacing: 0.06em;
}

/* ==========================================
   マークシートテーブル（セル結合グリッド）
   ========================================== */
.marksheet-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* colgroup による固定列幅（table-layout:fixed で有効） */
.marksheet-col--major { width: 60px; }
.marksheet-col--group { width: 52px; }
.marksheet-col--leaf  { width: 52px; }

/* 中問セル（rowspan で複数行にまたがる） */
.marksheet-table__major {
    background: #f4f9f7;
    color: #1E6F5C;
    font-weight: 700;
    font-size: 0.82rem;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #ced4da;
    padding: 6px 10px;
    white-space: nowrap;
    width: 56px;
}

/* グループラベルセル（4階層: rowspan で複数min行にまたがる） */
.marksheet-table__group {
    background: #f0f3f5;
    color: #6c757d;
    font-weight: 700;
    font-size: 0.78rem;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #dee2e6;
    padding: 4px 10px;
    white-space: nowrap;
    width: 48px;
    letter-spacing: 0.02em;
}

/* 小問/最小問ラベルセル */
.marksheet-table__leaf {
    background: #fafafa;
    color: #495057;
    font-weight: 600;
    font-size: 0.82rem;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #dee2e6;
    padding: 4px 10px;
    white-space: nowrap;
    width: 52px;
}

/* 複数選択行のラベルセル */
.marksheet-table__leaf--multiple {
    color: #1E6F5C;
    background: #f0faf6;
}

/* 選択肢セル */
.marksheet-table__choices {
    border: 1px solid #dee2e6;
    padding: 6px 10px;
    vertical-align: middle;
}

/* 選択肢ドット群のラッパー */
.marksheet-choices-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

/* ==========================================
   選択肢（共通）
   ========================================== */
.marksheet-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    min-width: 32px;
}

.marksheet-choice__label {
    font-size: 0.68rem;
    color: #6c757d;
    line-height: 1;
    text-align: center;
    min-height: 13px;
}

.marksheet-choice__dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #adb5bd;
    background: #fff;
    transition: background 0.15s, border-color 0.15s;
    display: block;
    flex-shrink: 0;
}

.marksheet-choice:hover .marksheet-choice__dot {
    border-color: #1E6F5C;
    background: #E6F5F1;
}

/* 選択済み */
.marksheet-choice--selected .marksheet-choice__dot {
    background: #1E6F5C;
    border-color: #1E6F5C;
}

/* チェックボックス形式（allow_multiple） */
.marksheet-choice--checkbox .marksheet-choice__dot {
    border-radius: 6px;
}

.marksheet-choice--checkbox.marksheet-choice--selected .marksheet-choice__dot {
    background: #1E6F5C;
    border-color: #1E6F5C;
}

/* レスポンシブ対応 */
@media (max-width: 575px) {
    .marksheet-table__major,
    .marksheet-table__group,
    .marksheet-table__leaf {
        font-size: 0.73rem;
        padding: 4px 6px;
        width: auto;
    }

    .marksheet-choice__dot {
        width: 24px;
        height: 24px;
    }
}

/* ==========================================
   マークシートプレビューモーダル（スライドアップ）
   ========================================== */
.marksheet-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 1055;
    display: flex;
    align-items: flex-end;
    pointer-events: none;
    visibility: hidden;
}
.marksheet-preview-modal.is-open {
    pointer-events: auto;
    visibility: visible;
}
.marksheet-preview-modal__inner {
    width: 100%;
    height: 95vh;
    background: #fff;
    border-radius: 1rem 1rem 0 0;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    overflow: hidden;
}
.marksheet-preview-modal.is-open .marksheet-preview-modal__inner {
    transform: translateY(0);
}
.marksheet-preview-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1054;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s;
}
.marksheet-preview-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}
.marksheet-preview-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e9ecef;
    flex-shrink: 0;
}
.marksheet-preview-modal__title {
    font-weight: 700;
    margin: 0;
    font-size: 1.05rem;
}
.marksheet-preview-modal__subtitle {
    color: #6c757d;
    margin: 0.2rem 0 0;
    font-size: 0.875rem;
}
.marksheet-preview-modal__close {
    background: none;
    border: none;
    font-size: 1.75rem;
    line-height: 1;
    color: #6c757d;
    cursor: pointer;
    padding: 0;
}
.marksheet-preview-modal__close:hover {
    color: #000;
}

/* ===== マークシートタイマー ===== */
.marksheet-timer {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
    margin-right: 16px;
}

.marksheet-timer__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
}

.marksheet-timer__label {
    font-size: 0.65rem;
    color: #8a8a8a;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.marksheet-timer__value {
    font-size: 0.8rem;
    font-family: 'Courier New', Courier, monospace;
    color: #333;
    white-space: nowrap;
}

.marksheet-timer__value--elapsed {
    font-size: 1rem;
    font-weight: 600;
    color: #34c38f;
}

/* レスポンシブ: スマホ対応 */
@media (max-width: 576px) {
    .marksheet-timer {
        gap: 8px;
        margin-left: 0;
        margin-right: 8px;
    }

    .marksheet-timer__item {
        min-width: 60px;
    }

    .marksheet-timer__label {
        font-size: 0.6rem;
    }

    .marksheet-timer__value {
        font-size: 0.7rem;
    }

    .marksheet-timer__value--elapsed {
        font-size: 0.85rem;
    }
}

.marksheet-preview-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

/* ==========================================
   マークシートモーダル フッター
   ========================================== */
.marksheet-preview-modal__footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e9ecef;
    flex-shrink: 0;
}

/* ==========================================
   配点カラム（管理者プレビュー専用）
   ========================================== */
.marksheet-col--point {
    width: 50px;
}

.marksheet-table__point {
    border: 1px solid #dee2e6;
    text-align: center;
    vertical-align: middle;
}

.marksheet-point-badge {
    display: inline-block;
    padding: 2px 7px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #856404;
    white-space: nowrap;
}

/* ==========================================
   正解マーク（管理者プレビュー専用）
   ========================================== */
.marksheet-choice--correct .marksheet-choice__dot {
    border-color: #1E6F5C;
    box-shadow: 0 0 0 2px rgba(30, 111, 92, 0.18);
}

.marksheet-choice--correct::after {
    content: '★';
    font-size: 0.55rem;
    color: #1E6F5C;
    line-height: 1;
    display: block;
    text-align: center;
}

.marksheet-choice--correct:hover .marksheet-choice__dot {
    border-color: #165c4a;
    background: #e8f5f1;
}

.marksheet-choice--correct.marksheet-choice--selected .marksheet-choice__dot {
    background: #1E6F5C;
    border-color: #1E6F5C;
    box-shadow: 0 0 0 2px rgba(30, 111, 92, 0.25);
}

/* ==========================================
   readOnly 選択肢（解答完了後）
   ========================================== */
.marksheet-choice--readonly {
    cursor: default;
    pointer-events: none;
    opacity: 0.65;
}
.marksheet-choice--readonly .marksheet-choice__dot {
    border-color: #ced4da;
}
.marksheet-choice--readonly.marksheet-choice--selected .marksheet-choice__dot {
    background: #6c757d;
    border-color: #6c757d;
}

/* ==========================================
   誤答マーク（結果閲覧時）
   ========================================== */
.marksheet-choice--wrong::after {
    content: '✗';
    font-size: 0.55rem;
    color: #dc3545;
    line-height: 1;
    display: block;
    text-align: center;
}

/* 結果閲覧モード: 正解・誤答・自分の選択は視認性を保つ */
.marksheet-choice--readonly.marksheet-choice--correct {
    opacity: 1;
}
.marksheet-choice--readonly.marksheet-choice--correct .marksheet-choice__dot {
    border-color: #1E6F5C;
}
.marksheet-choice--readonly.marksheet-choice--selected {
    opacity: 1;
}
.marksheet-choice--readonly.marksheet-choice--selected .marksheet-choice__dot {
    background: #1E6F5C;
    border-color: #1E6F5C;
}
.marksheet-choice--readonly.marksheet-choice--wrong {
    opacity: 1;
}

/* ==========================================
   結果を見る ボタン
   ========================================== */
.btn-marksheet-start--result {
    background: #0d9488 !important;
    color: #fff !important;
    border-color: #0d9488 !important;
}
.btn-marksheet-start--result:hover {
    background: #0f766e !important;
    border-color: #0f766e !important;
}

/* ===============================================
   過去模試一覧ページ - カスタムスタイル
   =============================================== */

/* テーブル内のフォントサイズ統一（14px） */
.past-exams-table .data-table__td,
.past-exams-table .data-table__th {
    font-size: 14px;
}

/* Noカラムの幅調整 */
.past-exams-table .data-table__th--number {
    min-width: 60px;
    width: 60px;
}

/* 模試名カラムの幅調整 */
.past-exams-table .data-table__th:nth-child(2),
.past-exams-table .data-table__td:nth-child(2) {
    min-width: 250px;
}

/* 試験期間カラムの幅調整 */
.past-exams-table .data-table__th:nth-child(3),
.past-exams-table .data-table__td:nth-child(3) {
    min-width: 200px;
}

/* 詳細カラムの幅調整 */
.past-exams-table .data-table__th:nth-child(4),
.past-exams-table .data-table__td:nth-child(4) {
    min-width: 100px;
    width: 100px;
}

/* 詳細ボタンのスタイル */
.past-exams-table .btn-outline-secondary {
    font-size: 14px;
    white-space: nowrap;
}

/* 空状態アイコン */
.past-exams-table__empty-icon {
    font-size: 64px;
}

/* ===============================================
   過去模試一覧 - スマホ用カードUI（768px未満）
   =============================================== */

/* スマホ表示: テーブルを非表示 */
@media (max-width: 767px) {
    .past-exams-table__table-wrapper {
        display: none;
    }

    .past-exams-table__cards {
        display: block;
    }
}

/* PC表示: カードを非表示 */
@media (min-width: 768px) {
    .past-exams-table__table-wrapper {
        display: block;
    }

    .past-exams-table__cards {
        display: none;
    }
}

/* モバイル用カードスタイル */
.past-exams-card {
    background: #FFFFFF;
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 20px;
    margin-bottom: 16px;
    transition: all 0.3s ease;
}

.past-exams-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

/* カードヘッダー（模試名 + No） */
.past-exams-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #F5F5F7;
}

.past-exams-card__number {
    font-size: 13px;
    color: #86868B;
    font-weight: 500;
    background: #F5F5F7;
    padding: 4px 12px;
    border-radius: 12px;
    white-space: nowrap;
    margin-left: 12px;
    flex-shrink: 0;
}

.past-exams-card__title {
    font-size: 16px;
    font-weight: 600;
    color: #1D1D1F;
    margin: 0;
    flex: 1;
    line-height: 1.4;
}

/* カード情報エリア */
.past-exams-card__info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.past-exams-card__info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.past-exams-card__info-label {
    font-size: 12px;
    color: #86868B;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.past-exams-card__info-label i {
    font-size: 14px;
}

.past-exams-card__info-value {
    font-size: 15px;
    color: #1D1D1F;
    font-weight: 500;
}

/* カードアクションエリア */
.past-exams-card__actions {
    display: flex;
    padding-top: 16px;
    border-top: 1px solid #F5F5F7;
}

/* スマホ用ボタン（タップしやすいサイズ） */
.past-exams-card__actions .btn {
    flex: 1;
    min-height: 44px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.past-exams-card__actions .btn i {
    margin-right: 6px;
    font-size: 18px;
}

/* ===============================================
   模試結果一覧 - 統計サマリースタイル
   =============================================== */

/* 統計ボックス（共通） */
.stats-box {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid #eee;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stats-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 統計ボックス ラベル */
.stats-box__label {
    font-size: 0.8rem;
    color: #6c757d;
    margin-bottom: 8px;
    font-weight: 500;
}

/* 統計ボックス 値 */
.stats-box__value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1E3A5F;
    margin: 0;
}

/* 統計ボックス 単位 */
.stats-box__unit {
    font-size: 0.9rem;
    color: #6c757d;
    font-weight: 400;
}

/* 教科別統計ボックス */
.stats-box--subject {
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
}

/* 点数カラム（結果一覧テーブル） */
.score-cell {
    font-weight: 500;
}

/* ===============================================
   過去模試詳細ページ - カスタムスタイル
   =============================================== */

/* セクションタイトル（黒色） */
.exam-result__section-title {
    color: #1D1D1F;
}

/* アクセントタイトル（オレンジ色） */
.exam-result__accent-title {
    color: #E88B00;
}

/* 志望校順位バッジ（オレンジ背景） */
.exam-result__choice-badge {
    background-color: #E88B00;
    font-size: 14px;
}

/* 判定バッジ色（S〜E） */
.exam-result__judgment--S {
    background-color: #E85A71;
    color: white;
}

.exam-result__judgment--A {
    background-color: #E8A87C;
    color: white;
}

.exam-result__judgment--B {
    background-color: #41B3A3;
    color: white;
}

.exam-result__judgment--C {
    background-color: #5B9BD5;
    color: white;
}

.exam-result__judgment--D {
    background-color: #9B8EC4;
    color: white;
}

.exam-result__judgment--E {
    background-color: #A0A5AB;
    color: white;
}

/* 判定バッジデフォルト */
.exam-result__judgment--default {
    background-color: #E5E5EA;
    color: #1D1D1F;
}

/* 判定基準バッジ最小幅 */
.exam-result__judgment-legend {
    min-width: 40px;
}

/* 高専別判定テーブルの判定列幅 */
.exam-result__college-judgment-col {
    width: 60px;
}

/* 高専別判定バッジ（PC） */
.exam-result__college-badge {
    min-width: 28px;
}

/* 高専別判定バッジ（スマホ） */
.exam-result__college-badge--mobile {
    min-width: 24px;
    font-size: 10px;
}

/* 成績テーブル */
.exam-result__score-table,
.exam-result__choice-table {
    font-size: 13px;
}

/* 志望校カード内テーブルの幅統一
   - 加重得点テーブル(8列): フル幅(100%)
   - 入試情報(6列)・ランク判定基準(6列)・評定補正後(6列): 75%幅
   - 全テーブルで行ヘッダー列を同一ピクセル幅に揃える */
.exam-result__choice-table {
    table-layout: fixed;
    width: 100%;
}

.exam-result__choice-table th:first-child,
.exam-result__choice-table td:first-child {
    width: 140px;
}

.exam-result__choice-table th,
.exam-result__choice-table td {
    word-break: break-word;
}

/* 6列の狭いテーブル（入試情報・ランクテーブル本体）— 75%幅のラッパー */
.exam-result__narrow-wrap {
    width: 75%;
}

.exam-result__choice-table--narrow {
    width: 100%;
}

/* ランク判定行：6列テーブル(75%) + 判定ボックス(12.5%) + 次のランクまであと(12.5%) */
.exam-result__rank-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
}

.exam-result__rank-row__table {
    flex: 0 0 75%;
    min-width: 0;
}

.exam-result__rank-row__judgment,
.exam-result__rank-row__next {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #FFF8E1;
    border-radius: 8px;
    padding: 8px 6px;
}

.exam-result__rank-row__judgment-label,
.exam-result__rank-row__next-label {
    font-size: 11px;
    font-weight: 600;
    color: #636366;
    margin-bottom: 6px;
    line-height: 1.3;
}

.exam-result__rank-row__judgment-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    font-size: 22px;
    font-weight: 700;
}

.exam-result__rank-row__next-value {
    font-size: 16px;
    font-weight: 700;
    color: #F4882A;
}

.exam-result__score-header {
    background-color: #FFF8E1;
}

.exam-result__score-header th {
    font-weight: 600;
    color: #1D1D1F;
    padding: 10px 8px;
    white-space: nowrap;
}

.exam-result__row-header {
    background-color: #FFF8E1;
    font-weight: 600;
    color: #1D1D1F;
    white-space: nowrap;
    padding: 10px 12px !important;
}

.exam-result__total-col {
    background-color: #FFF3E0 !important;
}

.exam-result__score-table td,
.exam-result__choice-table td {
    padding: 10px 8px;
    vertical-align: middle;
}

/* 判定バッジ */
.exam-result__judgment-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    font-size: 24px;
    font-weight: 700;
}

/* 情報ボックス */
.exam-result__info-box {
    background-color: #F8F9FA;
    border-radius: 12px;
    padding: 16px;
    height: 100%;
}

.exam-result__info-box h6 {
    color: #1D1D1F;
    font-size: 14px;
}

.exam-result__info-box .table td {
    padding: 6px 8px;
    font-size: 13px;
}

/* ===============================================
   スマホ用 志望校カード（過去模試詳細）
   =============================================== */

.exam-result__mobile-choice-card {
    background: #FFFFFF;
}

.exam-result__mobile-choice-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid #FFE082;
    flex-wrap: wrap;
}

.exam-result__mobile-choice-name {
    font-size: 15px;
    color: #1D1D1F;
    margin: 0;
    flex: 1;
    min-width: 0;
}

/* 判定（大）+ 次のランクまで */
.exam-result__mobile-choice-judgment {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #FFF8E1;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 8px;
}

.exam-result__mobile-choice-judgment-block {
    text-align: center;
}

.exam-result__mobile-choice-judgment-label {
    font-size: 11px;
    color: #636366;
    font-weight: 600;
    margin-bottom: 4px;
}

.exam-result__mobile-choice-judgment-letter {
    font-size: 30px;
    font-weight: 700;
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    line-height: 1;
}

.exam-result__mobile-choice-next {
    flex: 1;
    min-width: 0;
}

.exam-result__mobile-choice-next-label {
    font-size: 12px;
    color: #636366;
    font-weight: 600;
    margin-bottom: 4px;
}

.exam-result__mobile-choice-next-value {
    font-size: 14px;
    color: #1D1D1F;
}

.exam-result__mobile-choice-next-value strong {
    font-size: 22px;
    color: #F4882A;
    margin: 0 2px;
}

/* 評定補正後判定（小） */
.exam-result__mobile-choice-judgment-adj {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: #F8F9FA;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 16px;
    font-size: 12px;
}

.exam-result__mobile-choice-judgment-adj-label {
    color: #636366;
    font-weight: 600;
}

.exam-result__mobile-choice-judgment-adj-badge {
    font-size: 13px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
}

.exam-result__mobile-choice-judgment-adj-next {
    color: #1D1D1F;
    margin-left: auto;
}

.exam-result__mobile-choice-judgment-adj-next strong {
    color: #F4882A;
    font-size: 14px;
}

/* セクションタイトル */
.exam-result__mobile-choice-section {
    margin-bottom: 16px;
}

.exam-result__mobile-choice-section-title {
    font-size: 13px;
    font-weight: 600;
    color: #E88B00;
    margin-bottom: 8px;
    padding-left: 8px;
    border-left: 3px solid #E88B00;
    line-height: 1.3;
}

/* 教科別スコアリスト */
.exam-result__mobile-choice-subject-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.exam-result__mobile-choice-subject {
    display: grid;
    grid-template-columns: 100px 60px 1fr;
    align-items: center;
    gap: 8px;
    background: #F5F5F7;
    border-radius: 8px;
    padding: 8px 10px;
}

.exam-result__mobile-choice-subject--total {
    background: #FFF3E0;
}

.exam-result__mobile-choice-subject-name {
    font-size: 13px;
    font-weight: 600;
    color: #1D1D1F;
}

.exam-result__mobile-choice-subject-weight {
    font-size: 10px;
    color: #86868B;
    margin-left: 2px;
    font-weight: normal;
}

.exam-result__mobile-choice-subject-score {
    font-size: 18px;
    font-weight: 700;
    color: #1D1D1F;
    text-align: center;
}

.exam-result__mobile-choice-subject--total .exam-result__mobile-choice-subject-score {
    color: #F4882A;
}

.exam-result__mobile-choice-subject-stats {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 10px;
    color: #636366;
    line-height: 1.3;
}

.exam-result__mobile-choice-subject-stats strong {
    color: #1D1D1F;
    font-weight: 600;
}

/* 評定平均（教科リスト下） */
.exam-result__mobile-choice-rating {
    margin-top: 8px;
    padding: 8px 12px;
    background: #FFFBF0;
    border-radius: 8px;
    font-size: 12px;
    color: #636366;
    text-align: right;
}

.exam-result__mobile-choice-rating strong {
    color: #1D1D1F;
    font-size: 14px;
    margin-left: 4px;
}

/* 入試情報リスト */
.exam-result__mobile-choice-info-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 16px;
    margin: 0;
    padding: 12px;
    background: #F8F9FA;
    border-radius: 8px;
}

.exam-result__mobile-choice-info-list dt {
    font-size: 12px;
    color: #636366;
    font-weight: 500;
}

.exam-result__mobile-choice-info-list dd {
    font-size: 13px;
    font-weight: 600;
    color: #1D1D1F;
    margin: 0;
    text-align: right;
}

/* ランク判定基準（境界点5列グリッド） */
.exam-result__mobile-choice-borders {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}

.exam-result__mobile-choice-border {
    background: #F5F5F7;
    border-radius: 6px;
    padding: 6px 2px;
    text-align: center;
}

.exam-result__mobile-choice-border-label {
    font-size: 10px;
    color: #636366;
    margin-bottom: 2px;
    font-weight: 600;
}

.exam-result__mobile-choice-border-value {
    font-size: 13px;
    font-weight: 700;
    color: #1D1D1F;
}

/* スマホ用スコアカード */
.exam-result__mobile-score-card {
    background: #FFFFFF;
    border: 1px solid #E5E5EA;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
}

.exam-result__mobile-score-card--total {
    background: #FFF8E1;
    border-color: #FFE082;
}

.exam-result__mobile-score-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.exam-result__mobile-score-stats {
    display: flex;
    gap: 8px;
}

.exam-result__mobile-score-stat {
    flex: 1;
    background: #F5F5F7;
    border-radius: 8px;
    padding: 8px;
    text-align: center;
}

.exam-result__mobile-score-card--total .exam-result__mobile-score-stat {
    background: #FFF3E0;
}

.exam-result__mobile-score-stat .label {
    display: block;
    font-size: 11px;
    color: #86868B;
    margin-bottom: 2px;
}

.exam-result__mobile-score-stat .value {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #1D1D1F;
}

/* 高専別合格判定テーブル */
.exam-result__college-table {
    font-size: 12px;
    margin-bottom: 0;
}

.exam-result__college-table thead th {
    background-color: #FFF8E1;
    font-weight: 600;
    font-size: 11px;
    padding: 8px 6px;
    border-bottom: 2px solid #FFE082;
    white-space: nowrap;
}

.exam-result__college-table tbody td {
    padding: 6px;
    vertical-align: middle;
    border-bottom: 1px solid #F0F0F0;
}

.exam-result__college-table tbody tr:hover {
    background-color: #FAFAFA;
}

.exam-result__college-table--mobile {
    font-size: 10px;
}

.exam-result__college-table--mobile thead th {
    font-size: 9px;
    padding: 6px 4px;
}

.exam-result__college-table--mobile tbody td {
    padding: 4px;
    font-size: 10px;
}

/* グラフコンテナ */
.exam-result__chart-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    height: 250px;
    margin: 0 auto;
    background: #FAFAFA;
    border-radius: 8px;
    padding: 16px;
}

/* 注意事項 */
.exam-result__notes {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.exam-result__note-item {
    background: #F8F9FA;
    border-radius: 8px;
    padding: 16px;
    border-left: 3px solid #E88B00;
}

.exam-result__note-title {
    font-size: 14px;
    font-weight: 600;
    color: #1D1D1F;
    margin-bottom: 8px;
}

.exam-result__note-text {
    font-size: 13px;
    color: #636366;
    line-height: 1.7;
    margin-bottom: 0;
}

/* ===============================================
   過去模試詳細 - レスポンシブ
   =============================================== */

@media (max-width: 767px) {
    .exam-result__judgment-badge {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .exam-result__info-box {
        margin-bottom: 16px;
    }

    .exam-result__choice-table {
        font-size: 11px;
    }

    .exam-result__choice-table th,
    .exam-result__choice-table td {
        padding: 6px 4px !important;
    }

    /* 狭い画面では幅制約を解除してフル幅表示にする */
    .exam-result__narrow-wrap {
        width: 100%;
    }

    /* ランク判定行をスマホでは縦並びにする */
    .exam-result__rank-row {
        flex-direction: column;
        gap: 6px;
    }

    .exam-result__rank-row__table {
        flex: 0 0 auto;
        width: 100%;
    }

    .exam-result__rank-row__judgment,
    .exam-result__rank-row__next {
        flex-direction: row;
        gap: 8px;
        padding: 6px 10px;
    }

    .exam-result__rank-row__judgment-label,
    .exam-result__rank-row__next-label {
        margin-bottom: 0;
    }

    .exam-result__rank-row__judgment-badge {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    .exam-result__chart-container {
        height: 200px;
        padding: 12px;
    }

    .exam-result__note-item {
        padding: 12px;
    }

    .exam-result__note-title {
        font-size: 13px;
    }

    .exam-result__note-text {
        font-size: 12px;
    }
}

@media (max-width: 575px) {
    .d-flex.justify-content-between.flex-wrap {
        flex-direction: column;
    }

    .d-flex.justify-content-between.flex-wrap > * {
        width: 100%;
    }

    .d-flex.gap-2.flex-wrap {
        flex-direction: column;
    }

    .d-flex.gap-2.flex-wrap .btn {
        width: 100%;
    }
}