/* Chapter Container - Book-like Layout */
.chapter-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
    background: #ffffff;
    min-height: 100vh;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #2c3e50;
    font-size: 11pt;
}

/* Chapter Header Section */
.chapter-header-section {
    background: #ffffff;
    padding: 40px 50px 30px;
    text-align: center;
    margin-bottom: 0;
    border-bottom: 2px solid #2c3e50;
}

.chapter-number {
    font-size: 10pt;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #666;
    margin-bottom: 15px;
}

.chapter-title {
    font-size: 24pt;
    margin: 0 0 20px 0;
    font-weight: 700;
    line-height: 1.3;
    color: #2c3e50;
    text-align: center;
}

.chapter-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    font-size: 11pt;
    color: #666;
    font-style: italic;
}

/* Section Headers */
.section-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 8px;
    border-bottom: 1.5px solid #e0e0e0;
}

.section-number {
    font-size: 16pt;
    font-weight: 700;
    color: #2c3e50;
    min-width: 35px;
}

.section-heading {
    font-size: 18pt;
    color: #2c3e50;
    margin: 0;
    font-weight: 700;
    flex: 1;
}

.section-title {
    font-size: 16pt;
    color: #2c3e50;
    margin: 0 0 12px 0;
    font-weight: 700;
    border-bottom: 1.5px solid #e0e0e0;
    padding-bottom: 8px;
}

.section-intro {
    font-size: 11pt;
    color: #555;
    margin-bottom: 15px;
    font-style: italic;
}

.section-intro-text {
    font-size: 11pt;
    color: #444;
    margin-bottom: 20px;
    line-height: 1.6;
}

/* Learning Objectives Section */
.learning-objectives-section {
    background: #f8f9fa;
    padding: 25px 35px;
    margin: 30px 50px;
    border-left: 3px solid #2c3e50;
    border-radius: 0;
}

.objectives-list {
    list-style: none;
    padding: 0;
    margin: 15px 0 0 0;
}

.objectives-list li {
    padding: 8px 0 8px 20px;
    margin-bottom: 8px;
    position: relative;
    line-height: 1.6;
    font-size: 11pt;
}

.objectives-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    font-size: 14pt;
    color: #2c3e50;
    font-weight: bold;
    line-height: 1;
}

/* Content Sections */
.chapter-content {
    padding: 30px 50px;
}

.content-section {
    background: #ffffff;
    padding: 0 0 30px 0;
    margin-bottom: 35px;
    border-bottom: 1px solid #e0e0e0;
}

.content-section:last-of-type {
    border-bottom: none;
}

/* Comparison Grid */
.comparison-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    margin-top: 25px;
}

.approach-card {
    background: #f8f9fa;
    padding: 25px;
    border: 1px solid #e0e0e0;
    border-left: 3px solid #2c3e50;
    page-break-inside: avoid;
}

/* State Categories Grid */
.state-categories-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    margin-top: 25px;
}

.state-category-card {
    background: #f8f9fa;
    padding: 25px;
    border: 1px solid #e0e0e0;
    border-left: 3px solid #2c3e50;
    page-break-inside: avoid;
}

.state-category-title {
    font-size: 14pt;
    color: #2c3e50;
    margin: 0 0 12px 0;
    font-weight: 700;
}

.state-category-description {
    color: #444;
    line-height: 1.6;
    font-size: 11pt;
    margin: 0;
}

/* Alternatives Grid */
.alternatives-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    margin-top: 25px;
}

.alternative-card {
    background: #f8f9fa;
    padding: 25px;
    border: 1px solid #e0e0e0;
    border-left: 3px solid #2c3e50;
    page-break-inside: avoid;
}

.alternative-title {
    font-size: 14pt;
    color: #2c3e50;
    margin: 0 0 12px 0;
    font-weight: 700;
}

.alternative-description {
    color: #444;
    line-height: 1.6;
    font-size: 11pt;
    margin: 0;
}

/* Overview Content */
.overview-content {
    margin-top: 20px;
}

.overview-item {
    margin-bottom: 25px;
    padding: 20px;
    background: #f8f9fa;
    border-left: 3px solid #2c3e50;
}

.overview-title {
    font-size: 14pt;
    color: #2c3e50;
    margin: 0 0 12px 0;
    font-weight: 700;
}

.overview-description {
    color: #444;
    line-height: 1.6;
    font-size: 11pt;
    margin: 0;
}

/* Requirements Grid */
.requirements-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    margin-top: 25px;
}

.requirement-card {
    background: #f8f9fa;
    padding: 25px;
    border: 1px solid #e0e0e0;
    border-left: 3px solid #2c3e50;
    page-break-inside: avoid;
}

.requirement-title {
    font-size: 14pt;
    color: #2c3e50;
    margin: 0 0 15px 0;
    font-weight: 700;
}

.requirement-list {
    margin: 0;
    padding-left: 20px;
}

.requirement-list li {
    margin-bottom: 10px;
    line-height: 1.6;
    font-size: 11pt;
    color: #444;
}

/* Deliverables Grid */
.deliverables-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    margin-top: 25px;
}

.deliverable-card {
    background: #f8f9fa;
    padding: 25px;
    border: 1px solid #e0e0e0;
    border-left: 3px solid #2c3e50;
    page-break-inside: avoid;
}

.deliverable-title {
    font-size: 14pt;
    color: #2c3e50;
    margin: 0 0 15px 0;
    font-weight: 700;
}

.deliverable-list {
    margin: 0;
    padding-left: 20px;
}

.deliverable-list li {
    margin-bottom: 10px;
    line-height: 1.6;
    font-size: 11pt;
    color: #444;
}

/* Screen List */
.screen-list {
    margin-top: 25px;
}

.screen-item {
    margin-bottom: 25px;
    padding: 20px;
    background: #f8f9fa;
    border-left: 3px solid #2c3e50;
    page-break-inside: avoid;
}

.screen-name {
    font-size: 14pt;
    color: #2c3e50;
    margin: 0 0 12px 0;
    font-weight: 700;
}

.screen-features {
    margin: 0;
    padding-left: 20px;
}

.screen-features li {
    margin-bottom: 8px;
    line-height: 1.6;
    font-size: 11pt;
    color: #444;
}

/* Implementation Steps */
.implementation-steps {
    margin-top: 25px;
}

.step-item {
    margin-bottom: 25px;
    padding: 20px;
    background: #f8f9fa;
    border-left: 3px solid #2c3e50;
    page-break-inside: avoid;
}

.step-number {
    font-size: 14pt;
    color: #2c3e50;
    margin: 0 0 12px 0;
    font-weight: 700;
}

.step-description {
    color: #444;
    line-height: 1.6;
    font-size: 11pt;
    margin: 0;
}

/* State Flow Box */
.state-flow-box {
    background: #f8f9fa;
    padding: 20px;
    margin: 20px 0;
    border-left: 3px solid #2c3e50;
}

.state-flow-title {
    font-size: 12pt;
    color: #2c3e50;
    margin: 0 0 12px 0;
    font-weight: 700;
}

.state-flow-description {
    margin: 0;
    font-size: 11pt;
    line-height: 1.6;
    color: #444;
}

/* Testing Types Grid */
.testing-types-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    margin-top: 25px;
}

.testing-type-card {
    background: #f8f9fa;
    padding: 25px;
    border: 1px solid #e0e0e0;
    border-left: 3px solid #2c3e50;
    page-break-inside: avoid;
}

.testing-type-title {
    font-size: 14pt;
    color: #2c3e50;
    margin: 0 0 12px 0;
    font-weight: 700;
}

.testing-type-description {
    color: #444;
    line-height: 1.6;
    font-size: 11pt;
    margin: 0;
}

/* Test Doubles Grid */
.test-doubles-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    margin-top: 25px;
}

.test-double-card {
    background: #f8f9fa;
    padding: 25px;
    border: 1px solid #e0e0e0;
    border-left: 3px solid #2c3e50;
    page-break-inside: avoid;
}

.test-double-title {
    font-size: 14pt;
    color: #2c3e50;
    margin: 0 0 12px 0;
    font-weight: 700;
}

.test-double-description {
    color: #444;
    line-height: 1.6;
    font-size: 11pt;
    margin: 0;
}

/* Additional Box Styles for Chapter 15 */
.example-checks-box,
.common-patterns-box,
.example-flow-box,
.runner-pattern-box,
.naming-box,
.coverage-goals-box,
.notes-box {
    background: #f8f9fa;
    padding: 20px;
    margin: 20px 0;
    border-left: 3px solid #2c3e50;
}

.example-checks-title,
.common-patterns-title,
.example-flow-title,
.runner-pattern-title,
.naming-title {
    font-size: 12pt;
    color: #2c3e50;
    margin: 0 0 12px 0;
    font-weight: 700;
}

.example-checks-list,
.common-patterns-list,
.naming-list {
    margin: 0;
    padding-left: 20px;
}

.example-checks-list li,
.common-patterns-list li,
.naming-list li {
    margin-bottom: 8px;
    line-height: 1.6;
    font-size: 11pt;
    color: #444;
}

.example-flow-description,
.runner-pattern-description,
.coverage-goals-text,
.notes-text {
    margin: 0;
    font-size: 11pt;
    line-height: 1.6;
    color: #444;
}

/* CI Steps List */
.ci-steps-list,
.job-steps-list {
    margin: 15px 0;
    padding-left: 30px;
}

.ci-steps-list li,
.job-steps-list li {
    margin-bottom: 8px;
    line-height: 1.6;
    font-size: 11pt;
    color: #444;
}

/* Additional Box Styles for Chapters 16-20 */
.tools-box,
.strategies-box,
.quick-checks-box,
.image-handling-box,
.text-fonts-box,
.leak-detection-box,
.image-memory-box,
.profiling-network-box,
.token-best-practices-box,
.selection-guide-box,
.encryption-checklist-box,
.key-patterns-box,
.service-mapping-box,
.implementation-highlights-box,
.testing-release-box,
.cloud-function-flow-box,
.testing-rules-box,
.benefits-box,
.design-rule-box,
.fastlane-pattern-box,
.design-tips-box,
.security-notes-box,
.key-items-box,
.preflight-checklist-box,
.testing-checklist-box,
.examples-box,
.key-steps-box,
.practices-box,
.code-example-list {
    background: #f8f9fa;
    padding: 20px;
    margin: 20px 0;
    border-left: 3px solid #2c3e50;
}

.tools-title,
.strategies-title,
.quick-checks-title,
.image-handling-title,
.text-fonts-title,
.leak-detection-title,
.image-memory-title,
.profiling-network-title,
.token-best-practices-title,
.selection-guide-title,
.encryption-checklist-title,
.key-patterns-title,
.service-mapping-title,
.implementation-highlights-title,
.testing-release-title,
.cloud-function-flow-title,
.testing-rules-text,
.benefits-text,
.design-rule-text,
.fastlane-pattern-title,
.design-tips-title,
.security-notes-title,
.key-items-title,
.preflight-checklist-title,
.testing-checklist-title,
.examples-title,
.key-steps-title,
.practices-title {
    font-size: 12pt;
    color: #2c3e50;
    margin: 0 0 12px 0;
    font-weight: 700;
}

.tools-list,
.strategies-list,
.quick-checks-list,
.image-handling-list,
.text-fonts-list,
.leak-detection-list,
.profiling-network-list,
.token-best-practices-list,
.selection-guide-list,
.encryption-checklist-list,
.key-patterns-list,
.service-mapping-list,
.implementation-highlights-list,
.testing-release-list,
.testing-checklist-list,
.key-steps-list,
.practices-list,
.design-tips-list,
.key-items-list {
    margin: 0;
    padding-left: 20px;
}

.tools-list li,
.strategies-list li,
.quick-checks-list li,
.image-handling-list li,
.text-fonts-list li,
.leak-detection-list li,
.profiling-network-list li,
.token-best-practices-list li,
.selection-guide-list li,
.encryption-checklist-list li,
.key-patterns-list li,
.service-mapping-list li,
.implementation-highlights-list li,
.testing-release-list li,
.testing-checklist-list li,
.key-steps-list li,
.practices-list li,
.design-tips-list li,
.key-items-list li {
    margin-bottom: 8px;
    line-height: 1.6;
    font-size: 11pt;
    color: #444;
}

.image-memory-description,
.cloud-function-flow-description,
.testing-rules-text,
.benefits-text,
.design-rule-text,
.fastlane-pattern-description,
.examples-description,
.preflight-checklist-text {
    margin: 0;
    font-size: 11pt;
    line-height: 1.6;
    color: #444;
}

.code-example-list {
    list-style: none;
    padding-left: 0;
}

.code-example-list li {
    margin-bottom: 8px;
    line-height: 1.6;
    font-size: 11pt;
    color: #444;
}

/* Firebase Services Grid */
.firebase-services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    margin-top: 25px;
}

.firebase-service-card {
    background: #f8f9fa;
    padding: 25px;
    border: 1px solid #e0e0e0;
    border-left: 3px solid #2c3e50;
    page-break-inside: avoid;
}

.firebase-service-title {
    font-size: 14pt;
    color: #2c3e50;
    margin: 0 0 12px 0;
    font-weight: 700;
}

.firebase-service-description {
    color: #444;
    line-height: 1.6;
    font-size: 11pt;
    margin: 0;
}

/* Pipeline Steps List */
.pipeline-steps-list {
    margin: 15px 0;
    padding-left: 30px;
}

.pipeline-steps-list li {
    margin-bottom: 8px;
    line-height: 1.6;
    font-size: 11pt;
    color: #444;
}

/* Introduction Page Styles */
.course-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin-top: 25px;
}

.course-overview-card {
    background: #f8f9fa;
    padding: 25px;
    border: 1px solid #e0e0e0;
    border-left: 3px solid #2c3e50;
    page-break-inside: avoid;
}

.course-overview-title {
    font-size: 14pt;
    color: #2c3e50;
    margin: 0 0 12px 0;
    font-weight: 700;
}

.course-overview-description {
    color: #444;
    line-height: 1.6;
    font-size: 11pt;
    margin: 0;
}

.table-of-contents-box {
    background: #f8f9fa;
    padding: 30px;
    margin: 20px 0;
    border-left: 3px solid #2c3e50;
}

.toc-list {
    margin: 0;
    padding-left: 30px;
    list-style: decimal;
}

.toc-list li {
    margin-bottom: 12px;
    line-height: 1.8;
    font-size: 11pt;
    color: #444;
}

.toc-link {
    color: #2c3e50;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.toc-link:hover {
    color: #3498db;
    text-decoration: underline;
}

.getting-started-box {
    background: #f8f9fa;
    padding: 25px;
    margin: 20px 0;
    border-left: 3px solid #2c3e50;
}

.getting-started-text {
    margin: 0 0 15px 0;
    font-size: 11pt;
    line-height: 1.6;
    color: #444;
}

.getting-started-text:last-child {
    margin-bottom: 0;
}

@media print {
    .course-overview-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .course-overview-grid {
        grid-template-columns: 1fr;
    }
}

.approach-card.highlight-card {
    background: #fafafa;
    border-left-color: #2c3e50;
    border-left-width: 4px;
}

.approach-title {
    font-size: 14pt;
    color: #2c3e50;
    margin: 0 0 12px 0;
    font-weight: 700;
}

.approach-description {
    color: #444;
    margin-bottom: 15px;
    line-height: 1.6;
    font-size: 11pt;
}

.pros-cons {
    margin-top: 15px;
}

.pros, .cons {
    margin-bottom: 15px;
    padding: 12px;
    background: #ffffff;
    border-left: 2px solid #2c3e50;
}

.pros {
    border-left-color: #28a745;
}

.cons {
    border-left-color: #dc3545;
}

.pros strong, .cons strong {
    display: block;
    margin-bottom: 8px;
    font-size: 11pt;
    color: #2c3e50;
}

.pros ul, .cons ul {
    margin: 8px 0 0 20px;
    padding: 0;
}

.pros li, .cons li {
    margin-bottom: 6px;
    line-height: 1.5;
    font-size: 10pt;
}

.strengths {
    margin-top: 15px;
    padding: 12px;
    background: #ffffff;
    border-left: 2px solid #2c3e50;
}

.strengths strong {
    display: block;
    margin-bottom: 8px;
    font-size: 11pt;
    color: #2c3e50;
}

.strengths ul {
    margin: 8px 0 0 20px;
    padding: 0;
}

.strengths li {
    margin-bottom: 6px;
    line-height: 1.5;
    color: #444;
    font-size: 10pt;
}

/* Steps List */
.steps-list {
    margin-top: 25px;
}

.step-item {
    margin-bottom: 28px;
    padding: 20px;
    background: #f8f9fa;
    border-left: 3px solid #2c3e50;
    page-break-inside: avoid;
}

.step-item.optional {
    border-left-color: #999;
    opacity: 0.9;
}

.step-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
}

.step-number {
    font-size: 11pt;
    font-weight: 700;
    color: #2c3e50;
    min-width: 70px;
}

.step-title {
    margin: 0;
    color: #2c3e50;
    font-size: 13pt;
    font-weight: 700;
    flex: 1;
}

.step-content {
    margin-top: 12px;
}

.step-content p {
    margin-bottom: 12px;
    line-height: 1.6;
    color: #444;
    font-size: 11pt;
}

.step-content ul {
    margin: 12px 0 12px 20px;
}

.step-content li {
    margin-bottom: 6px;
    line-height: 1.5;
    font-size: 10pt;
}

.external-link {
    color: #2c3e50;
    text-decoration: underline;
    font-weight: 600;
}

.external-link:hover {
    color: #000;
}

/* Command Box */
.command-box {
    background: #2d2d2d;
    padding: 15px 20px;
    margin: 20px 0;
    border-radius: 0;
    border-left: 3px solid #2c3e50;
}

.command-label {
    color: #bbb;
    font-size: 9pt;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.command-code {
    background: transparent;
    padding: 0;
    margin: 0;
    border: none;
}

.command-code code {
    color: #f8f8f2;
    font-size: 10pt;
    font-family: 'Courier New', monospace;
}

.inline-code {
    display: block;
    background: #2d2d2d;
    padding: 10px 15px;
    margin: 12px 0;
    border-radius: 0;
    border-left: 3px solid #2c3e50;
}

.inline-code code {
    color: #f8f8f2;
    background: transparent;
    border: none;
    padding: 0;
    font-size: 10pt;
    font-family: 'Courier New', monospace;
}

/* Expected Outcome */
.expected-outcome, .outcome-box {
    padding: 20px;
    margin-top: 20px;
    border-left: 3px solid #2c3e50;
    background: #f8f9fa;
}

.expected-outcome h4, .outcome-box h4 {
    margin: 0 0 12px 0;
    font-size: 12pt;
    color: #2c3e50;
    font-weight: 700;
}

.expected-outcome p, .outcome-box p {
    margin-bottom: 12px;
    line-height: 1.6;
    color: #444;
    font-size: 11pt;
}

.expected-outcome ul, .outcome-box ul {
    margin: 12px 0 12px 20px;
}

.expected-outcome li, .outcome-box li {
    margin-bottom: 6px;
    line-height: 1.5;
    font-size: 10pt;
}

.outcome-box kbd {
    background: #2d2d2d;
    color: #f8f8f2;
    padding: 3px 6px;
    border-radius: 2px;
    font-family: 'Courier New', monospace;
    font-size: 9pt;
    margin: 0 2px;
}

/* Project Structure */
.project-structure {
    margin-top: 25px;
}

.structure-item {
    margin-bottom: 20px;
    padding: 20px;
    background: #f8f9fa;
    border-left: 3px solid #2c3e50;
    page-break-inside: avoid;
}

.structure-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.file-name {
    background: #2d2d2d;
    color: #f8f8f2;
    padding: 5px 10px;
    font-family: 'Courier New', monospace;
    font-size: 9pt;
    font-weight: 600;
    border: none;
}

.file-type {
    font-size: 8pt;
    color: #666;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.file-description {
    margin: 0;
    color: #444;
    line-height: 1.6;
    font-size: 11pt;
}

/* Concept List */
.concept-list {
    margin-top: 25px;
}

.concept-item {
    margin-bottom: 25px;
    padding: 20px;
    background: #f8f9fa;
    border-left: 3px solid #2c3e50;
    page-break-inside: avoid;
}

.concept-title {
    font-size: 13pt;
    color: #2c3e50;
    margin: 0 0 12px 0;
    font-weight: 700;
}

.concept-text {
    line-height: 1.6;
    color: #444;
    font-size: 11pt;
    margin-bottom: 12px;
}

.concept-item ul {
    margin: 12px 0 12px 20px;
}

.concept-item li {
    margin-bottom: 8px;
    line-height: 1.5;
    font-size: 10pt;
}

/* Assignment Section */
.assignment-section {
    background: #f8f9fa;
    padding: 30px 40px;
    margin: 30px 50px;
    border-left: 3px solid #2c3e50;
    border-radius: 0;
    page-break-inside: avoid;
}

.assignment-content {
    color: #2c3e50;
    line-height: 1.7;
    font-size: 11pt;
}

.assignment-content p {
    margin-bottom: 12px;
}

.assignment-content ol {
    margin: 15px 0 15px 20px;
}

.assignment-content li {
    margin-bottom: 10px;
    line-height: 1.6;
    font-size: 11pt;
}

/* Self-Study Section */
.self-study-section {
    background: #f8f9fa;
    padding: 30px 40px;
    margin: 30px 50px;
    border-left: 3px solid #2c3e50;
    border-radius: 0;
    page-break-inside: avoid;
}

.tasks-list {
    list-style: decimal;
    padding: 0;
    margin: 15px 0 0 20px;
}

.tasks-list li {
    margin-bottom: 15px;
    line-height: 1.6;
    color: #444;
    font-size: 11pt;
    padding-left: 8px;
}

.tasks-list li strong {
    color: #2c3e50;
    font-weight: 700;
}

.tasks-list li ul {
    margin: 8px 0 8px 20px;
    list-style: disc;
}

.tasks-list li ul li {
    margin-bottom: 6px;
    padding-left: 5px;
    font-size: 10pt;
}

/* Chapter Navigation Footer */
.chapter-navigation {
    background: #ffffff;
    padding: 30px 40px;
    margin: 40px 0 0 0;
    border-top: 1.5px solid #e0e0e0;
    page-break-inside: avoid;
}

.nav-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.nav-link {
    padding: 10px 20px;
    background: #f8f9fa;
    color: #2c3e50;
    text-decoration: none;
    font-weight: 600;
    border: 1px solid #e0e0e0;
    transition: all 0.2s;
    font-size: 10pt;
}

.nav-link:hover {
    background: #e9ecef;
    border-color: #2c3e50;
}

.nav-link.primary {
    background: #2c3e50;
    color: #ffffff;
    border-color: #2c3e50;
}

.nav-link.primary:hover {
    background: #1a1f2e;
}

.chapter-progress {
    text-align: center;
    margin-top: 20px;
}

.progress-bar {
    width: 100%;
    height: 4px;
    background: #e0e0e0;
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 10px;
}

.progress-fill {
    height: 100%;
    background: #2c3e50;
    transition: width 0.3s;
}

.progress-text {
    color: #666;
    font-size: 9pt;
    font-weight: 600;
    font-style: italic;
}

/* Typography Enhancements */
h1, h2, h3, h4, h5, h6 {
    font-family: Arial, sans-serif;
    color: #2c3e50;
}

p {
    text-align: justify;
    margin-bottom: 1em;
    font-size: 11pt;
}

ul, ol {
    margin: 1em 0;
}

li {
    margin-bottom: 0.4em;
    font-size: 11pt;
}

code {
    background: #f4f4f4;
    padding: 2px 5px;
    border-radius: 2px;
    font-family: 'Courier New', monospace;
    font-size: 9pt;
    color: #2c3e50;
    border: 1px solid #e0e0e0;
}

/* Print Styles */
@media print {
    .chapter-container {
        background: white;
        padding: 0;
        max-width: 100%;
        font-size: 10pt;
    }

    .chapter-header-section {
        page-break-after: avoid;
        padding: 30px 0 20px;
    }

    .chapter-title {
        font-size: 20pt;
    }

    .chapter-content {
        padding: 15px 0;
    }

    .content-section {
        page-break-inside: avoid;
        margin-bottom: 25px;
    }

    .section-heading {
        font-size: 16pt;
    }

    .section-title {
        font-size: 14pt;
    }

    .chapter-navigation {
        page-break-inside: avoid;
        border-top: 1px solid #ccc;
        padding: 15px 0;
    }

    .nav-link {
        display: none;
    }

    .progress-bar {
        border: 1px solid #ccc;
    }

    .progress-fill {
        background: #000;
    }

    /* Ensure good contrast for printing */
    .approach-card,
    .step-item,
    .structure-item,
    .concept-item {
        border: 1px solid #ccc;
        page-break-inside: avoid;
    }

    .command-box,
    .inline-code {
        border: 1px solid #000;
        background: #f5f5f5;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    p, li {
        font-size: 10pt;
    }

    h2 {
        font-size: 16pt;
    }

    h3 {
        font-size: 14pt;
    }

    h4 {
        font-size: 12pt;
    }
}

/* Additional Styles for Chapter 2 */

/* Data Types Grid */
.data-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.type-card {
    background: #f8f9fa;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-left: 3px solid #2c3e50;
    page-break-inside: avoid;
}

.type-name {
    font-size: 12pt;
    color: #2c3e50;
    margin: 0 0 8px 0;
    font-weight: 700;
}

.type-name code {
    background: #2d2d2d;
    color: #f8f8f2;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 10pt;
}

.type-description {
    margin: 0;
    font-size: 10pt;
    color: #555;
    line-height: 1.5;
}

/* Declaration Types */
.declaration-types {
    margin: 20px 0;
}

.declaration-item {
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-left: 3px solid #2c3e50;
}

.declaration-item h4 {
    font-size: 12pt;
    color: #2c3e50;
    margin: 0 0 8px 0;
    font-weight: 700;
}

.declaration-item h4 code {
    background: #2d2d2d;
    color: #f8f8f2;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 10pt;
}

.declaration-item p {
    margin: 0;
    font-size: 11pt;
    color: #444;
    line-height: 1.6;
}

/* Subsection Title */
.subsection-title {
    font-size: 14pt;
    color: #2c3e50;
    margin: 25px 0 15px 0;
    font-weight: 700;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 8px;
}

/* Code Example */
.code-example {
    background: #2d2d2d;
    padding: 15px 20px;
    border-radius: 0;
    overflow-x: auto;
    margin: 15px 0;
    border-left: 3px solid #2c3e50;
}

.code-example code {
    color: #f8f8f2;
    background: transparent;
    border: none;
    padding: 0;
    font-size: 10pt;
    font-family: 'Courier New', monospace;
}

/* Note Box */
.note-box {
    background: #f8f9fa;
    padding: 20px;
    margin: 20px 0;
    border-left: 3px solid #2c3e50;
}

.note-box h4 {
    font-size: 12pt;
    color: #2c3e50;
    margin: 0 0 12px 0;
    font-weight: 700;
}

.note-box ul {
    margin: 10px 0 0 20px;
}

.note-box li {
    margin-bottom: 8px;
    font-size: 11pt;
    line-height: 1.6;
}

/* Additional Box Styles */
.key-point-box,
.ux-note-box,
.important-box,
.use-case-box,
.optimization-box,
.pagination-note-box {
    background: #f8f9fa;
    padding: 20px;
    margin: 20px 0;
    border-left: 3px solid #2c3e50;
}

.key-point-text,
.ux-note-text,
.important-text,
.use-case-description,
.optimization-description,
.pagination-note-text {
    margin: 0;
    font-size: 11pt;
    line-height: 1.6;
    color: #444;
}

.use-case-title,
.optimization-title {
    font-size: 12pt;
    color: #2c3e50;
    margin: 0 0 12px 0;
    font-weight: 700;
}

/* Null Safety Rules */
.null-safety-rules {
    margin: 20px 0;
}

.rule-item {
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-left: 3px solid #2c3e50;
}

.rule-item h4 {
    font-size: 12pt;
    color: #2c3e50;
    margin: 0 0 8px 0;
    font-weight: 700;
}

.rule-item p {
    margin: 0;
    font-size: 11pt;
    color: #444;
    line-height: 1.6;
}

/* String Methods */
.string-methods {
    margin: 20px 0;
}

.method-item {
    margin-bottom: 25px;
    padding: 15px;
    background: #f8f9fa;
    border-left: 3px solid #2c3e50;
}

.method-item h4 {
    font-size: 12pt;
    color: #2c3e50;
    margin: 0 0 8px 0;
    font-weight: 700;
}

.method-item p {
    margin: 0 0 10px 0;
    font-size: 11pt;
    color: #444;
}

/* Key Points */
.key-points {
    background: #f8f9fa;
    padding: 20px;
    margin: 20px 0;
    border-left: 3px solid #2c3e50;
}

.key-points h4 {
    font-size: 12pt;
    color: #2c3e50;
    margin: 0 0 12px 0;
    font-weight: 700;
}

.key-points ul {
    margin: 10px 0 0 20px;
}

.key-points li {
    margin-bottom: 8px;
    font-size: 11pt;
    line-height: 1.6;
}

/* Guidelines Box */
.guidelines-box {
    background: #f8f9fa;
    padding: 20px;
    margin: 20px 0;
    border-left: 3px solid #2c3e50;
}

.guidelines-box h4 {
    font-size: 12pt;
    color: #2c3e50;
    margin: 0 0 12px 0;
    font-weight: 700;
}

.guidelines-box ul {
    margin: 10px 0 0 20px;
}

.guidelines-box li {
    margin-bottom: 8px;
    font-size: 11pt;
    line-height: 1.6;
}

/* Warning Box */
.warning-box {
    background: #fff3cd;
    padding: 20px;
    margin: 20px 0;
    border-left: 3px solid #ffc107;
}

.warning-box h4 {
    font-size: 12pt;
    color: #856404;
    margin: 0 0 12px 0;
    font-weight: 700;
}

.warning-box p {
    margin: 0;
    font-size: 11pt;
    color: #856404;
    line-height: 1.6;
}

/* Tips Box */
.tips-box {
    background: #d1ecf1;
    padding: 20px;
    margin: 20px 0;
    border-left: 3px solid #17a2b8;
}

.tips-box h4 {
    font-size: 12pt;
    color: #0c5460;
    margin: 0 0 12px 0;
    font-weight: 700;
}

.tips-box ul {
    margin: 10px 0 0 20px;
}

.tips-box li {
    margin-bottom: 8px;
    font-size: 11pt;
    line-height: 1.6;
    color: #0c5460;
}

/* Operators List */
.operators-list {
    margin: 20px 0;
}

.operator-item {
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-left: 3px solid #2c3e50;
}

.operator-item h4 {
    font-size: 12pt;
    color: #2c3e50;
    margin: 0 0 8px 0;
    font-weight: 700;
}

.operator-item h4 code {
    background: #2d2d2d;
    color: #f8f8f2;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 10pt;
}

.operator-item p {
    margin: 0;
    font-size: 11pt;
    color: #444;
    line-height: 1.6;
}

/* Defensive Practices */
.defensive-practices {
    margin: 20px 0;
}

.practice-item {
    margin-bottom: 20px;
    padding: 20px;
    background: #f8f9fa;
    border-left: 3px solid #2c3e50;
    page-break-inside: avoid;
}

.practice-item h4 {
    font-size: 12pt;
    color: #2c3e50;
    margin: 0 0 10px 0;
    font-weight: 700;
}

.practice-item p {
    margin: 0;
    font-size: 11pt;
    color: #444;
    line-height: 1.6;
}

/* Task Item */
.task-item {
    margin-bottom: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-left: 3px solid #2c3e50;
    page-break-inside: avoid;
}

.task-item h4 {
    font-size: 12pt;
    color: #2c3e50;
    margin: 0 0 15px 0;
    font-weight: 700;
}

/* Function Components */
.function-components {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.component-item {
    padding: 15px;
    background: #f8f9fa;
    border-left: 3px solid #2c3e50;
}

.component-item h4 {
    font-size: 12pt;
    color: #2c3e50;
    margin: 0 0 8px 0;
    font-weight: 700;
}

.component-item p {
    margin: 0;
    font-size: 11pt;
    color: #444;
    line-height: 1.6;
}

/* Parameter Types */
.parameter-types {
    margin: 20px 0;
}

.param-type-item {
    margin-bottom: 25px;
    padding: 20px;
    background: #f8f9fa;
    border-left: 3px solid #2c3e50;
    page-break-inside: avoid;
}

.param-type-item h4 {
    font-size: 12pt;
    color: #2c3e50;
    margin: 0 0 10px 0;
    font-weight: 700;
}

.param-type-item p {
    margin: 0 0 12px 0;
    font-size: 11pt;
    color: #444;
    line-height: 1.6;
}

/* Scope Rules */
.scope-rules {
    margin: 20px 0;
}

.scope-item {
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-left: 3px solid #2c3e50;
}

.scope-item h4 {
    font-size: 12pt;
    color: #2c3e50;
    margin: 0 0 8px 0;
    font-weight: 700;
}

.scope-item p {
    margin: 0;
    font-size: 11pt;
    color: #444;
    line-height: 1.6;
}

/* Function Comparison */
.function-comparison {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    margin: 20px 0;
}

.comparison-item {
    padding: 20px;
    background: #f8f9fa;
    border-left: 3px solid #2c3e50;
    page-break-inside: avoid;
}

.comparison-item h4 {
    font-size: 12pt;
    color: #2c3e50;
    margin: 0 0 10px 0;
    font-weight: 700;
}

.comparison-item p {
    margin: 0 0 12px 0;
    font-size: 11pt;
    color: #444;
    line-height: 1.6;
}

.comparison-item p:last-child {
    margin-top: 12px;
}

.comparison-item p strong {
    color: #2c3e50;
}

/* Design Principles */
.design-principles {
    margin: 20px 0;
}

.principle-item {
    margin-bottom: 20px;
    padding: 20px;
    background: #f8f9fa;
    border-left: 3px solid #2c3e50;
}

.principle-item h4 {
    font-size: 12pt;
    color: #2c3e50;
    margin: 0 0 10px 0;
    font-weight: 700;
}

.principle-item p {
    margin: 0;
    font-size: 11pt;
    color: #444;
    line-height: 1.6;
}

/* Error Handling Rules */
.error-handling-rules {
    background: #f8f9fa;
    padding: 20px;
    margin: 20px 0;
    border-left: 3px solid #2c3e50;
}

.error-handling-rules ul {
    margin: 10px 0 0 20px;
}

.error-handling-rules li {
    margin-bottom: 8px;
    font-size: 11pt;
    line-height: 1.6;
}

/* Testing Principles */
.testing-principles {
    background: #f8f9fa;
    padding: 20px;
    margin: 20px 0;
    border-left: 3px solid #2c3e50;
}

.testing-principles ul {
    margin: 10px 0 0 20px;
}

.testing-principles li {
    margin-bottom: 8px;
    font-size: 11pt;
    line-height: 1.6;
}

/* Practical Examples */
.practical-examples {
    margin: 20px 0;
}

.example-item {
    margin-bottom: 20px;
    padding: 20px;
    background: #f8f9fa;
    border-left: 3px solid #2c3e50;
    page-break-inside: avoid;
}

.example-item h4 {
    font-size: 12pt;
    color: #2c3e50;
    margin: 0 0 10px 0;
    font-weight: 700;
}

.example-item p {
    margin: 0;
    font-size: 11pt;
    color: #444;
    line-height: 1.6;
}

/* OOP Concepts */
.oop-concepts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

/* Design Pattern Box */
.design-pattern-box {
    background: #f8f9fa;
    padding: 20px;
    margin: 20px 0;
    border-left: 3px solid #2c3e50;
}

.design-pattern-box h4 {
    font-size: 12pt;
    color: #2c3e50;
    margin: 0 0 10px 0;
    font-weight: 700;
}

.design-pattern-box p {
    margin: 0 0 10px 0;
    font-size: 11pt;
    color: #444;
    line-height: 1.6;
}

.design-pattern-box ul {
    margin: 10px 0 0 20px;
}

.design-pattern-box li {
    margin-bottom: 6px;
    font-size: 11pt;
    line-height: 1.6;
}

/* Constructor Types */
.constructor-types {
    margin: 20px 0;
}

.constructor-item {
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-left: 3px solid #2c3e50;
}

.constructor-item h4 {
    font-size: 12pt;
    color: #2c3e50;
    margin: 0 0 8px 0;
    font-weight: 700;
}

.constructor-item p {
    margin: 0;
    font-size: 11pt;
    color: #444;
    line-height: 1.6;
}

/* Getter Setter Info */
.getter-setter-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.info-item {
    padding: 15px;
    background: #f8f9fa;
    border-left: 3px solid #2c3e50;
}

.info-item h4 {
    font-size: 12pt;
    color: #2c3e50;
    margin: 0 0 8px 0;
    font-weight: 700;
}

.info-item p {
    margin: 0;
    font-size: 11pt;
    color: #444;
    line-height: 1.6;
}

/* Encapsulation Concepts */
.encapsulation-concepts {
    margin: 20px 0;
}

/* Method Overrides */
.method-overrides {
    margin: 20px 0;
}

.override-item {
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-left: 3px solid #2c3e50;
}

.override-item h4 {
    font-size: 12pt;
    color: #2c3e50;
    margin: 0 0 8px 0;
    font-weight: 700;
}

.override-item h4 code {
    background: #2d2d2d;
    color: #f8f8f2;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 10pt;
}

.override-item p {
    margin: 0;
    font-size: 11pt;
    color: #444;
    line-height: 1.6;
}

/* Mutability Comparison */
.mutability-comparison {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    margin: 20px 0;
}

/* Design Patterns */
.design-patterns {
    margin: 20px 0;
}

.pattern-item {
    margin-bottom: 20px;
    padding: 20px;
    background: #f8f9fa;
    border-left: 3px solid #2c3e50;
    page-break-inside: avoid;
}

.pattern-item h4 {
    font-size: 12pt;
    color: #2c3e50;
    margin: 0 0 10px 0;
    font-weight: 700;
}

.pattern-item p {
    margin: 0 0 10px 0;
    font-size: 11pt;
    color: #444;
    line-height: 1.6;
}

.pattern-item p:last-child {
    margin-bottom: 0;
}

/* Concept Explanation */
.concept-explanation {
    margin: 20px 0;
}

.explanation-item {
    margin-bottom: 20px;
    padding: 20px;
    background: #f8f9fa;
    border-left: 3px solid #2c3e50;
    page-break-inside: avoid;
}

.explanation-item.highlight-item {
    background: #fafafa;
    border-left-width: 4px;
    border-left-color: #2c3e50;
}

.explanation-item h4 {
    font-size: 12pt;
    color: #2c3e50;
    margin: 0 0 10px 0;
    font-weight: 700;
}

.explanation-item p {
    margin: 0;
    font-size: 11pt;
    color: #444;
    line-height: 1.6;
}

/* Inheritance Rules */
.inheritance-rules {
    background: #f8f9fa;
    padding: 20px;
    margin: 20px 0;
    border-left: 3px solid #2c3e50;
}

.inheritance-rules ul {
    margin: 10px 0 0 20px;
}

.inheritance-rules li {
    margin-bottom: 8px;
    font-size: 11pt;
    line-height: 1.6;
}

/* Abstract Info */
.abstract-info {
    background: #f8f9fa;
    padding: 20px;
    margin: 20px 0;
    border-left: 3px solid #2c3e50;
}

.abstract-info ul {
    margin: 10px 0 0 20px;
}

.abstract-info li {
    margin-bottom: 8px;
    font-size: 11pt;
    line-height: 1.6;
}

/* Type Operators */
.type-operators {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

/* Resolution Info */
.resolution-info {
    background: #f8f9fa;
    padding: 20px;
    margin: 20px 0;
    border-left: 3px solid #2c3e50;
}

.resolution-info ul {
    margin: 10px 0 0 20px;
}

.resolution-info li {
    margin-bottom: 8px;
    font-size: 11pt;
    line-height: 1.6;
}

/* Pattern List */
.pattern-list {
    margin: 20px 0;
}

/* Debugging Tips */
.debugging-tips {
    background: #f8f9fa;
    padding: 20px;
    margin: 20px 0;
    border-left: 3px solid #2c3e50;
}

.debugging-tips h4 {
    font-size: 12pt;
    color: #2c3e50;
    margin: 0 0 12px 0;
    font-weight: 700;
}

.debugging-tips ul {
    margin: 10px 0 0 20px;
}

.debugging-tips li {
    margin-bottom: 8px;
    font-size: 11pt;
    line-height: 1.6;
}

/* Exercises Section */
.exercises-section {
    background: #f8f9fa;
    padding: 30px 40px;
    margin: 30px 50px;
    border-left: 3px solid #2c3e50;
    border-radius: 0;
    page-break-inside: avoid;
}

.exercises-list {
    list-style: decimal;
    padding: 0;
    margin: 15px 0 0 20px;
}

.exercises-list li {
    margin-bottom: 15px;
    line-height: 1.7;
    color: #444;
    font-size: 11pt;
    padding-left: 8px;
}

.exercises-list li code {
    background: #f4f4f4;
    padding: 2px 5px;
    border-radius: 2px;
    font-family: 'Courier New', monospace;
    font-size: 9pt;
}

/* Pitfalls List */
.pitfalls-list {
    margin: 20px 0;
}

.pitfall-item {
    margin-bottom: 20px;
    padding: 20px;
    background: #f8f9fa;
    border-left: 3px solid #2c3e50;
    page-break-inside: avoid;
}

.pitfall-item h4 {
    font-size: 12pt;
    color: #2c3e50;
    margin: 0 0 10px 0;
    font-weight: 700;
}

.pitfall-item p {
    margin: 0;
    font-size: 11pt;
    color: #444;
    line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 768px) {
    .chapter-container {
        padding: 0;
        font-size: 10pt;
    }

    .chapter-header-section {
        padding: 30px 20px 20px;
    }

    .chapter-title {
        font-size: 18pt;
    }

    .chapter-meta {
        flex-direction: column;
        gap: 8px;
    }

    .learning-objectives-section,
    .content-section,
    .assignment-section,
    .self-study-section,
    .chapter-navigation {
        margin: 15px;
        padding: 20px;
    }

    .chapter-content {
        padding: 15px;
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .comparison-grid,
    .data-types-grid,
    .function-components,
    .function-comparison,
    .oop-concepts,
    .getter-setter-info,
    .type-operators,
    .state-categories-grid,
    .alternatives-grid,
    .requirements-grid,
    .deliverables-grid,
    .testing-types-grid,
    .test-doubles-grid,
    .firebase-services-grid {
        grid-template-columns: 1fr;
    }

    .nav-links {
        flex-direction: column;
        gap: 12px;
    }

    .nav-link {
        width: 100%;
        text-align: center;
    }
}