/* course_list_print.css - Card Layout */
:root {
    --color-navy: #1a3c61;
    --font-main: 'Noto Sans JP', sans-serif;
    --bg-screen: #e2e8f0;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-screen);
    color: #333;
}

/* === Screen UI === */
.print-controls {
    background-color: var(--color-navy);
    color: white;
    padding: 15px;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.print-btn {
    background-color: #ff7e00;
    color: white;
    border: none;
    padding: 10px 24px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
}

.document-container {
    background-color: white;
    max-width: 210mm;
    margin: 30px auto;
    padding: 15mm;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.doc-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 15px;
}

.doc-header h1 {
    color: var(--color-navy);
    font-size: 24pt;
}

/* === Custom Card Layout (Based on Image) === */
.course-card {
    margin-bottom: 30px;
    page-break-inside: avoid;
    break-inside: avoid;
    font-family: 'Noto Sans JP', sans-serif;
}

/* --- Block Colors --- */
/* Basic: Green */
.course-card.level-basic .card-header, 
.course-card.level-basic .card-footer { background-color: #22c55e; }
.course-card.level-basic .card-body { background-color: rgba(34, 197, 94, 0.1); }
.course-card.level-basic .hdr-table td { color: #166534; }

/* Advance: Blue */
.course-card.level-advance .card-header, 
.course-card.level-advance .card-footer { background-color: #38bdf8; } /* Light Blue like image */
.course-card.level-advance .card-body { background-color: rgba(56, 189, 248, 0.1); }
.course-card.level-advance .hdr-table td { color: #0369a1; }

/* Master: Orange */
.course-card.level-master .card-header, 
.course-card.level-master .card-footer { background-color: #f97316; } /* Orange like image */
.course-card.level-master .card-body { background-color: rgba(249, 115, 22, 0.1); }
.course-card.level-master .hdr-table td { color: #c2410c; }


/* --- Header --- */
.card-header {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    color: white;
}

.hdr-title-area {
    flex: 1;
    padding-right: 20px;
}

.hdr-title {
    font-size: 18pt;
    font-weight: 900;
    line-height: 1.3;
    margin-bottom: 5px;
}

.hdr-subtitle {
    font-size: 11pt;
    font-weight: bold;
    opacity: 0.9;
}

.hdr-table-area {
    width: 200px;
}

.hdr-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.hdr-table th, .hdr-table td {
    border: 1px solid #ccc;
    padding: 4px 8px;
    font-size: 9pt;
}

.hdr-table th {
    background: rgba(0,0,0,0.1);
    color: #333;
    width: 60px;
    text-align: center;
}

.hdr-table td {
    font-weight: bold;
}

/* --- Body --- */
.card-body {
    padding: 20px;
}

.body-row {
    display: flex;
    margin-bottom: 20px;
}
.body-row:last-child {
    margin-bottom: 0;
}

.label-box {
    background: #333;
    color: white;
    font-size: 10pt;
    font-weight: bold;
    text-align: center;
    padding: 5px 10px;
    border-radius: 2px;
    width: 100px;
    flex-shrink: 0;
    height: fit-content;
    margin-right: 20px;
}

.content-box {
    flex: 1;
    font-size: 10.5pt;
    line-height: 1.6;
    color: #333;
}

.datetime-text {
    font-size: 20pt;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 1px;
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.datetime-text small {
    font-size: 12pt;
    font-weight: bold;
}

.content-bold {
    font-weight: 900;
    font-size: 11pt;
}

/* --- Footer --- */
.card-footer {
    display: flex;
    justify-content: flex-end;
    padding: 10px 20px;
}

.instructor-box {
    background: white;
    display: flex;
    align-items: stretch;
}

.instructor-label {
    background: rgba(0,0,0,0.1);
    color: #333;
    font-size: 9pt;
    font-weight: bold;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-right: none;
}

.instructor-name {
    padding: 5px 15px;
    font-weight: bold;
    font-size: 11pt;
    border: 1px solid #ccc;
    color: #333;
}


/* === Print === */
@media print {
    .print-controls { display: none !important; }
    body { background-color: white; }
    .document-container { margin: 0; padding: 0; box-shadow: none; max-width: 100%; }
    @page { size: A4; margin: 15mm; }
    
    /* force background colors to print */
    .course-card.level-basic .card-header, .course-card.level-basic .card-footer { background-color: #22c55e !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;}
    .course-card.level-basic .card-body { background-color: #eaf9ef !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;}

    .course-card.level-advance .card-header, .course-card.level-advance .card-footer { background-color: #38bdf8 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;}
    .course-card.level-advance .card-body { background-color: #ecf8ff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;}

    .course-card.level-master .card-header, .course-card.level-master .card-footer { background-color: #f97316 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;}
    .course-card.level-master .card-body { background-color: #fff1e8 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;}

    .label-box { background-color: #333 !important; color: white !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;}
    .hdr-table th { background-color: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;}
    .instructor-label { background-color: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;}
}