/**
 * 月次レポート - HTMLレポート用スタイル
 * 画面表示・印刷/PDF両対応
 */

/* ========== CSS Variables ========== */
:root {
    --primary-color: #2196F3;
    --primary-dark: #1976D2;
    --success-color: #4CAF50;
    --danger-color: #F44336;
    --warning-color: #FF9800;
    --gray-color: #9E9E9E;
    --light-gray: #F5F5F5;
    --dark-gray: #333;
    --analysis-bg: #E3F2FD;
    --analysis-border: #90CAF9;
    --analysis-text: #1565C0;

    --page-width: 210mm;
    --page-height: 297mm;
    --page-margin: 15mm;
    --content-width: calc(var(--page-width) - 2 * var(--page-margin));
}

/* ========== Reset & Base ========== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 10pt;
}

body {
    font-family: 'Yu Gothic', 'Meiryo', 'Hiragino Sans', 'Noto Sans CJK JP', 'Noto Sans JP', sans-serif;
    line-height: 1.6;
    color: var(--dark-gray);
    background: #e0e0e0;
}

/* ========== Page Container ========== */
.report-container {
    max-width: var(--page-width);
    margin: 0 auto;
    background: white;
}

.page {
    width: var(--page-width);
    min-height: var(--page-height);
    padding: var(--page-margin);
    background: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

/* ========== Typography ========== */
h1 {
    font-size: 24pt;
    font-weight: bold;
    text-align: center;
    color: var(--dark-gray);
    margin-bottom: 10px;
}

h2 {
    font-size: 16pt;
    font-weight: bold;
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 5px;
    margin-bottom: 15px;
}

h3 {
    font-size: 12pt;
    font-weight: bold;
    color: var(--dark-gray);
    margin-top: 15px;
    margin-bottom: 10px;
}

p {
    font-size: 10pt;
    line-height: 1.6;
}

.subtitle {
    font-size: 16pt;
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 30px;
}

.small-text {
    font-size: 8pt;
    color: var(--gray-color);
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

/* ========== Cover Page ========== */
.cover-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: calc(var(--page-height) - 2 * var(--page-margin));
}

.cover-page h1 {
    font-size: 32pt;
    margin-bottom: 20px;
}

.cover-page .period {
    font-size: 24pt;
    color: var(--primary-color);
    margin-bottom: 60px;
}

.cover-page .generated-date {
    font-size: 12pt;
    color: var(--gray-color);
}

/* ========== Summary Cards ========== */
.summary-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.summary-card {
    background: var(--light-gray);
    border-radius: 8px;
    padding: 15px;
    text-align: center;
}

.summary-card .label {
    font-size: 9pt;
    color: var(--gray-color);
    margin-bottom: 5px;
}

.summary-card .value {
    font-size: 20pt;
    font-weight: bold;
    color: var(--dark-gray);
}

.summary-card .change {
    font-size: 10pt;
    margin-top: 5px;
}

.summary-card .change.positive {
    color: var(--success-color);
}

.summary-card .change.negative {
    color: var(--danger-color);
}

.summary-card.highlight {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border: 2px solid var(--success-color);
}

.summary-card.highlight .value {
    color: var(--success-color);
}

/* ========== Tables ========== */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
    font-size: 10pt;
}

th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

th {
    background: var(--primary-color);
    color: white;
    font-weight: bold;
    text-align: center;
}

tr:nth-child(even) {
    background: var(--light-gray);
}

.table-warning th {
    background: var(--warning-color);
}

.table-danger th {
    background: var(--danger-color);
}

.table-success th {
    background: var(--success-color);
}

/* ========== Charts ========== */
.chart-container {
    margin: 15px 0;
    position: relative;
}

.chart-container canvas {
    max-width: 100%;
    height: auto;
}

.chart-row {
    display: flex;
    gap: 15px;
    margin: 15px 0;
}

.chart-row .chart-container {
    flex: 1;
}

/* ========== Heatmap ========== */
.heatmap-container {
    margin: 15px 0;
}

.heatmap-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 9pt;
}

.heatmap-table th,
.heatmap-table td {
    border: 1px solid #ddd;
    padding: 4px;
    text-align: center;
    width: 35px;
}

.heatmap-table th {
    background: var(--primary-color);
    color: white;
}

.heatmap-table td {
    background-color: var(--light-gray);
}

/* Heatmap intensity colors */
.heat-0 { background-color: #f5f5f5; }
.heat-1 { background-color: #e3f2fd; }
.heat-2 { background-color: #bbdefb; }
.heat-3 { background-color: #90caf9; }
.heat-4 { background-color: #64b5f6; }
.heat-5 { background-color: #42a5f5; color: white; }
.heat-6 { background-color: #2196f3; color: white; }
.heat-7 { background-color: #1e88e5; color: white; }
.heat-8 { background-color: #1976d2; color: white; }
.heat-9 { background-color: #1565c0; color: white; }

/* ========== Analysis Box ========== */
.analysis-box {
    background: var(--analysis-bg);
    border: 1px solid var(--analysis-border);
    border-radius: 8px;
    padding: 12px 15px;
    margin: 15px 0;
}

.analysis-box .label {
    font-size: 8pt;
    color: var(--primary-dark);
    margin-bottom: 5px;
}

.analysis-box .content {
    font-size: 9pt;
    color: var(--analysis-text);
    line-height: 1.5;
}

/* ========== Savings Box ========== */
.savings-box {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
}

.savings-box h3 {
    color: var(--success-color);
    margin-top: 0;
}

.savings-box .savings-item {
    display: flex;
    justify-content: space-between;
    margin: 5px 0;
}

.savings-box .savings-value {
    font-weight: bold;
}

/* ========== Session Stats ========== */
.session-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 15px 0;
}

.session-stat {
    background: var(--light-gray);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}

.session-stat .label {
    font-size: 9pt;
    color: var(--gray-color);
}

.session-stat .value {
    font-size: 16pt;
    font-weight: bold;
    color: var(--primary-color);
}

/* ========== Keywords ========== */
.keyword-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
}

.keyword-tag {
    background: var(--primary-color);
    color: white;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 9pt;
}

.keyword-tag.warning {
    background: var(--warning-color);
}

/* ========== Glossary ========== */
.glossary-table td:first-child {
    width: 120px;
    font-weight: bold;
    background: var(--light-gray);
}

/* ========== Resolution Stats ========== */
.resolution-stats {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
    padding: 20px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stat-label {
    font-size: 10pt;
    color: var(--gray-color);
    min-width: 100px;
}

.stat-value {
    font-size: 16pt;
    font-weight: bold;
}

.stat-value.success {
    color: var(--success-color);
}

.stat-value.danger {
    color: var(--danger-color);
}

.stat-rate {
    font-size: 10pt;
    color: var(--gray-color);
}

/* ========== Utilities ========== */
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }

.flex-row {
    display: flex;
    gap: 15px;
}

.flex-1 {
    flex: 1;
}

/* ========== Print / PDF Styles ========== */
@media print {
    body {
        background: white;
    }

    .report-container {
        max-width: none;
    }

    .page {
        box-shadow: none;
        margin-bottom: 0;
        page-break-after: always;
        page-break-inside: avoid;
    }

    .page:last-child {
        page-break-after: auto;
    }

    .no-print {
        display: none !important;
    }

    /* Ensure charts are visible */
    canvas {
        max-width: 100% !important;
    }

    /* Avoid breaking inside elements */
    table, .summary-cards, .chart-container, .analysis-box {
        page-break-inside: avoid;
    }
}

/* ========== WeasyPrint specific ========== */
@page {
    size: A4;
    margin: 15mm;
}

@media print {
    html {
        font-size: 10pt;
    }

    .page {
        width: 100%;
        min-height: auto;
        padding: 0;
    }
}