/* Generated CSS Bundle - DO NOT EDIT DIRECTLY */

/* From: src/styles/results.css */
/**
 * Results Screen Styles
 * Organized from top to bottom as they appear on the screen
 */

/* ============================================================================
   1. DEBUG PANEL (Raw Statistics JSON - collapsible)
   ============================================================================ */
#raw-stats-panel {
    margin: 10px 0;
}

#raw-stats-panel summary {
    cursor: pointer;
    font-weight: 600;
    padding: 8px;
    background: var(--card-bg);
    border-radius: 4px;
}

#raw-stats-pre {
    max-height: 300px;
    overflow: auto;
    background: var(--card-bg);
    border: 1px solid var(--muted-border);
    padding: 8px;
    font-family: 'UDEV Gothic', 'Consolas', 'Monaco', monospace;
    font-size: 12px;
    line-height: 1.4;
}

/* ============================================================================
   2. TARGET INFORMATION SECTION
   ============================================================================ */
.target-info-section {
    margin-bottom: 20px;
}

.target-info-section h6 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--text);
}

.target-card {
    background: var(--card-bg);
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.target-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.target-name {
    font-weight: 600;
    font-size: 0.95rem;
}

.target-level {
    font-size: 0.85rem;
    color: var(--muted);
}

/* ============================================================================
   3. CHARACTER CARDS SECTION
   ============================================================================ */
.characters-section {
    margin-bottom: 20px;
}

.characters-section h6 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--text);
}

/* Character grid - 4 columns on desktop, responsive on mobile */
.characters-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

@media (max-width: 1200px) {
    .characters-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .characters-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .characters-grid {
        grid-template-columns: 1fr;
    }
}

/* Individual character card */
.char-card {
    background: var(--card-bg);
    border-radius: 6px;
    padding: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
}

/* Character header - name and constellation */
.char-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.char-name-line {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
}

.char-constellation {
    font-size: 0.75rem;
    color: var(--muted);
    font-weight: 400;
    margin-left: 6px;
}

.char-talents {
    font-size: 0.75rem;
    color: var(--muted-2);
    white-space: nowrap;
}

/* Character subheader - english name and level */
.char-subheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.char-en-name {
    font-size: 0.7rem;
    color: var(--muted);
    opacity: 0.85;
}

.char-level {
    font-size: 0.75rem;
    color: var(--text);
}

/* Artifact set badge */
.char-artifact {
    margin: 6px 0;
}

.artifacts-inline {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.artifact-icon {
    display: inline-flex;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    align-items: center;
    justify-content: center;
    background: var(--card-bg-secondary, #f3f4f6);
    color: var(--muted);
    font-weight: 700;
    font-size: 0.75rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.artifact-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

.artifact-fallback {
    position: absolute;
    pointer-events: none;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: linear-gradient(90deg, var(--primary-1) 0%, var(--primary-2) 100%);
    color: var(--chip-text);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.chip .small-en {
    font-size: 0.65rem;
    opacity: 0.9;
}

/* Weapon information */
.char-weapon {
    margin: 6px 0;
}

.char-weapon-name {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 2px;
    color: var(--text);
}

.char-weapon-en {
    font-size: 0.65rem;
    color: var(--muted);
    opacity: 0.85;
}

/* Stats section */
.char-stats {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--muted-border);
}

.char-stats-title {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text);
}

.char-stats-list .info-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    font-size: 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] .char-stats-list .info-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.char-stats-list .info-row:last-child {
    border-bottom: none;
}

.char-stats-list .info-label {
    font-weight: 600;
    color: var(--muted);
}

.char-stats-list .info-value {
    color: var(--text);
    font-weight: 500;
}

/* ============================================================================
   4. STATISTICS SUMMARY (DPS, EPS, RPS, etc.)
   ============================================================================ */
.stats-summary-section {
    margin-bottom: 20px;
}

.stats-summary-section h6 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--text);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

@media (max-width: 900px) {
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.stat-card {
    background: var(--card-bg);
    border-radius: 6px;
    padding: 12px 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.stat-label {
    font-size: 0.75rem;
    color: var(--muted);
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 4px;
}

.stat-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary-2);
    line-height: 1.2;
}

.stat-stdev {
    font-size: 0.65rem;
    color: var(--muted);
    margin-top: 2px;
}

/* ============================================================================
   5. CHARTS SECTION
   ============================================================================ */
.charts-section {
    margin-bottom: 20px;
}

.charts-section h6 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--text);
}

/* Chart grid - side by side for Character DPS and Source DPS */
.charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

@media (max-width: 900px) {
    .charts-grid {
        grid-template-columns: 1fr;
    }
}

/* Individual chart container */
.chart-container {
    background: var(--card-bg);
    border-radius: 6px;
    padding: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    position: relative;
    min-height: 200px;
    overflow: hidden;
}

.chart-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--text);
    text-align: center;
}

/* Canvas positioning for Chart.js */
.chart-container canvas {
    position: relative;
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    display: block;
    /* canvas height is controlled by JS when needed */
}

/* Character DPS chart - pie chart */
#char-dps-chart-container {
    min-height: 500px;
    overflow: hidden;
}

/* Source DPS chart - horizontal bar, reduced height as requested */
#source-dps-chart-container {
    min-height: 280px;
    overflow: hidden;
}

/* Damage distribution chart - full width */
.chart-full-width {
    grid-column: 1 / -1;
}

#damage-dist-chart-container {
    min-height: 740px;
    overflow: hidden;
}

/* Chart legend (if custom HTML legend is used) */
.chart-legend {
    margin-top: 10px;
    padding: 8px;
    background: var(--card-bg);
    border-radius: 4px;
    font-size: 0.8rem;
    border: 1px solid var(--muted-border);
}

.chart-legend-title {
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text);
}

.chart-legend-item {
    display: inline-flex;
    align-items: center;
    margin-right: 12px;
    margin-bottom: 5px;
}

.chart-legend-color {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    margin-right: 5px;
}

/* Empty chart placeholder */
.chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    color: var(--muted);
    font-size: 0.9rem;
}

/* ============================================================================
   6. UTILITY CLASSES
   ============================================================================ */

/* Fade-in animation for results */
#results-container {
    opacity: 0;
    transition: opacity 220ms ease-in-out;
}

#results-container.visible {
    opacity: 1;
}

/* Info row - generic key-value display */
.info-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 0.85rem;
}

.info-label {
    font-weight: 600;
    color: var(--muted);
}

.info-value {
    color: var(--text);
    font-weight: 500;
}

/* ============================================================================
   DEBUG TIMELINE MODALS
   ============================================================================ */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 2000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
    backdrop-filter: blur(2px);
}

.modal-content {
    background-color: var(--card-bg);
    color: var(--text);
    margin: 10% auto; /* 10% from top and centered */
    padding: 24px;
    border: 1px solid var(--muted-border);
    border-radius: 8px;
    width: 90%; 
    max-width: 600px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    position: relative;
    animation: modalFadeIn 0.3s;
}

@keyframes modalFadeIn {
    from {opacity: 0; transform: translateY(-20px);}
    to {opacity: 1; transform: translateY(0);}
}

.close-modal {
    color: var(--muted);
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 20px;
}

.close-modal:hover,
.close-modal:focus {
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
}

/* ============================================================================
   DEBUG TIMELINE GRID & EVENTS
   ============================================================================ */
.timeline-grid {
    display: grid; 
    gap: 1px;
    background-color: var(--muted-border);
    border: 1px solid var(--muted-border);
    margin-top: 10px;
    overflow-x: auto;
    border-radius: 4px;
}

.timeline-grid-header {
    display: contents;
    font-weight: 600;
}

.timeline-col-header {
    background-color: var(--card-bg-secondary, #f3f4f6);
    padding: 8px 4px;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 10;
    color: var(--text);
    font-size: 0.85rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.timeline-row {
    display: contents;
}

.timeline-cell {
    background-color: var(--card-bg);
    padding: 4px;
    min-height: 32px;
    color: var(--text);
    font-size: 0.8rem;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 2px;
}

.timeline-frame-cell {
    background-color: var(--card-bg-secondary, #f3f4f6);
    justify-content: flex-end;
    padding-right: 8px;
    font-family: 'UDEV Gothic', monospace;
    color: var(--muted);
    font-weight: 500;
}

/* Light-mode explicit overrides for timeline structural elements
   Ensure column headers, frame column and cells use light colors
   even if CSS variables are changed elsewhere. These rules target
   pages that are not using the dark theme attribute. */
html:not([data-theme="dark"]) .timeline-col-header,
body:not([data-theme="dark"]) .timeline-col-header {
    background-color: var(--card-bg-secondary, #f3f4f6);
    color: var(--text);
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
html:not([data-theme="dark"]) .timeline-frame-cell,
body:not([data-theme="dark"]) .timeline-frame-cell {
    background-color: var(--card-bg-secondary, #f3f4f6);
    color: var(--muted);
}
html:not([data-theme="dark"]) .timeline-cell,
body:not([data-theme="dark"]) .timeline-cell {
    background-color: var(--card-bg);
    color: var(--text);
}

/* Event Badges Base Style */
.timeline-event {
    display: inline-block;
    padding: 2px 6px;
    margin: 1px;
    border-radius: 3px;
    font-size: 0.75rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    transition: transform 0.1s;
    border: 1px solid transparent;
}
.timeline-event:hover {
    transform: translateY(-1px);
    z-index: 5;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* Event Colors - Light Mode (Default) - Increased Contrast */
.timeline-event { background-color: #eeeeee; color: #424242; border-color: #bdbdbd; }
.timeline-event.event-debug { background-color: #f3e9e6; color: #5d4037; border-color: #e0cdc6; }
.timeline-event.event-calc { background-color: #cfd8dc; color: #37474f; border-color: #90a4ae; }
.timeline-event.event-icd { background-color: #e1bee7; color: #6a1b9a; border-color: #ba68c8; }
.timeline-event.event-action { background-color: #bbdefb; color: #0d47a1; border-color: #64b5f6; }
.timeline-event.event-damage { background-color: #ffcdd2; color: #b71c1c; border-color: #e57373; }
.timeline-event.event-energy { background-color: #ffecb3; color: #ff6f00; border-color: #ffd54f; }
.timeline-event.event-element { background-color: #b2dfdb; color: #004d40; border-color: #4db6ac; }

/* Event Colors - Dark Mode */
[data-theme="dark"] .timeline-event { background-color: #424242; color: #eeeeee; border-color: #616161; }
[data-theme="dark"] .timeline-event.event-debug { background-color: #3e2723; color: #d7ccc8; border-color: #5d4037; }
[data-theme="dark"] .timeline-event.event-calc { background-color: #263238; color: #cfd8dc; border-color: #455a64; }
[data-theme="dark"] .timeline-event.event-icd { background-color: #4a148c; color: #e1bee7; border-color: #7b1fa2; }
[data-theme="dark"] .timeline-event.event-action { background-color: #0d47a1; color: #bbdefb; border-color: #1565c0; }
[data-theme="dark"] .timeline-event.event-damage { background-color: #b71c1c; color: #ffcdd2; border-color: #c62828; }
[data-theme="dark"] .timeline-event.event-energy { background-color: #f57f17; color: #fff8e1; border-color: #ffb300; }
[data-theme="dark"] .timeline-event.event-element { background-color: #004d40; color: #b2dfdb; border-color: #00695c; }

/* Timeline wrapper & placeholder - ensure readable light-mode defaults */
.timeline-grid-wrapper {
    padding: 12px;
    background: var(--card-bg);
    border-radius: 4px;
}

.timeline-placeholder {
    background: var(--card-bg);
    color: var(--muted);
    padding: 48px 24px;
    text-align: center;
    border: 1px solid var(--muted-border);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    min-height: 280px;
}

/* Force light-mode appearance when not in dark theme */
html:not([data-theme="dark"]) .timeline-grid-wrapper,
body:not([data-theme="dark"]) .timeline-grid-wrapper {
    background: var(--card-bg);
}
html:not([data-theme="dark"]) .timeline-placeholder,
body:not([data-theme="dark"]) .timeline-placeholder {
    background: var(--card-bg);
    color: var(--muted);
    border-color: var(--muted-border);
}




/* From: src/styles/user-management.css */
/* ユーザー管理画面のスタイル */

.user-management-screen {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.user-management-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 20px;
    background: var(--card-bg);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.user-management-header h2 {
    margin: 0;
    color: var(--text);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.username {
    font-weight: 600;
    color: var(--text);
}

.role-badge {
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.role-badge.admin {
    background: var(--primary-1);
    color: var(--button-text);
}

.role-badge.user {
    background: var(--muted-border);
    color: var(--text);
}

.approval-badge {
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.approval-badge.approved {
    background: #4caf50;
    color: white;
}

.approval-badge.pending {
    background: #ff9800;
    color: white;
}

.btn-change-password,
.btn-admin,
.btn-logout,
.btn-reset-password,
.btn-approve,
.btn-delete {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: opacity 0.2s;
}

.btn-change-password,
.btn-admin {
    background: var(--primary-1);
    color: var(--button-text);
}

.btn-logout {
    background: #f44336;
    color: white;
}

.btn-reset-password,
.btn-approve {
    background: var(--primary-2);
    color: var(--button-text);
    padding: 6px 12px;
    font-size: 12px;
}

.btn-delete {
    background: #f44336;
    color: white;
    padding: 6px 12px;
    font-size: 12px;
}

.btn-change-password:hover,
.btn-admin:hover,
.btn-logout:hover,
.btn-reset-password:hover,
.btn-approve:hover,
.btn-delete:hover {
    opacity: 0.8;
}

/* 管理者パネル */
.admin-panel {
    background: var(--card-bg);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.admin-panel h3 {
    margin-bottom: 20px;
    color: var(--text);
}

/* ユーザー一覧テーブル */
.users-table {
    width: 100%;
    border-collapse: collapse;
}

.users-table th,
.users-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--muted-border);
}

.users-table th {
    background: var(--hover-bg);
    font-weight: 600;
    color: var(--text);
}

.users-table td {
    color: var(--text);
}

.users-table tbody tr:hover {
    background: var(--hover-bg);
}

.users-table td button {
    margin-right: 8px;
}

/* モーダル */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background: var(--card-bg);
    padding: 30px;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.modal-content h3 {
    margin-bottom: 20px;
    color: var(--text);
}

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

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text);
}

.form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--muted-border);
    border-radius: 4px;
    font-size: 14px;
    background: var(--bg);
    color: var(--text);
}

.form-group small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
}

.modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
}

.btn-primary,
.btn-secondary {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: opacity 0.2s;
}

.btn-primary {
    background: var(--primary-1);
    color: var(--button-text);
}

.btn-secondary {
    background: var(--muted-border);
    color: var(--text);
}

.btn-primary:hover,
.btn-secondary:hover {
    opacity: 0.8;
}

/* ダークテーマ対応 */
[data-theme="dark"] .user-management-header,
[data-theme="dark"] .admin-panel,
[data-theme="dark"] .modal-content {
    background: var(--card-bg);
}

[data-theme="dark"] .users-table th {
    background: rgba(234,246,255,0.04);
}

[data-theme="dark"] .form-group input {
    background: var(--bg);
    border-color: var(--muted-border);
}