:root {
    --primary-teal: #005f60;
    --dark-teal: #004d4e;
    --light-grey-bg: #e0e0e0;
    --border-color: #cccccc;
    --text-color: #333;
    
    /* Status Card Colors */
    --stat-operational: #56a8a8;
    --stat-not-active: #7d5e65;
    --stat-missed: #d95329;
    --stat-error: #ea9f45;
    
    /* Checklist Colors */
    --checklist-bg: #f9f9f9;
    --checklist-border: #e0e0e0;
    --checklist-item-hover: #dcebeb;

    /* Report Colors */
    --report-header-bg: #eaf5f5;
    --success-color: #4CAF50;
    --fail-color: #f44336;
    
    /* Diagnostics Flow Colors */
    --diag-orange: #ff9900;
    --diag-green: #38a798;
    --diag-gray: #666;

    /* Details Tab Specific */
    --details-label: #000;
    
    /* MMS Status Colors */
    --mms-open: #ff9900;
    --mms-pending: #4a9494;
    --mms-complete: #56a8a8;

    /* NEW Health Status Colors */
    --health-excellent: #5cb85c;
    --health-warning: #f0ad4e;
    --health-critical: #d9534f;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    color: var(--text-color);
}

/* --- TOP BAR NAVIGATION --- */
.top-bar {
    position: relative;
    background-color: var(--light-grey-bg);
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    border-bottom: 1px solid #ccc;
}

.top-logo {
    color: var(--primary-teal);
    font-weight: bold;
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    line-height: 1;
    align-items: center;
    cursor: pointer;
}

.nav-icon-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--primary-teal);
    cursor: pointer;
    text-decoration: none;
    margin-left: 20px;
}

.nav-icon-group i {
    font-size: 1.8rem;
    margin-bottom: 2px;
}

.nav-label {
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
}

/* --- NEW LOGO AREA STYLES --- */
.logo-area-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.top-logo {
    align-items: flex-start;
    padding: 0;
    margin: 0;
}
.dev-notes-stacked-subtle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 5px; 
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    font-size: 0.75rem; 
}
.dev-notes-stacked-subtle i {
    font-size: 0.8rem; 
    margin-right: 5px;
    margin-bottom: 0;
    color: #999;
}
.dev-notes-stacked-subtle:hover {
    color: var(--dark-teal);
}
.dev-notes-subtitle {
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1;
}

/* NEW: Container to group all right-side navigation items */
.nav-links-container {
    display: flex;
    align-items: center;
}

/* --- VIEW CONTAINERS --- */
.view-section {
    display: none; /* Hidden by default */
    padding-bottom: 50px;
}

.view-section.active {
    display: block; /* Show when active */
}

/* --- SITE OVERVIEW STYLES --- */
.site-list-container { max-width: 900px; margin: 20px auto; padding: 0 20px; }
.site-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    margin-bottom: 10px;
    background-color: var(--light-grey-bg);
    border-radius: 4px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
    cursor: pointer;
    transition: background-color 0.1s;
}
.site-item:hover {
    background-color: #d1d1d1;
}
.site-item i {
    color: #999;
    font-size: 1rem;
}


/* --- FORM STYLES --- */
header { text-align: center; padding: 20px 0; }
h1 { margin: 0; font-size: 1.8rem; color: var(--primary-teal); }
.brand-logo { font-weight: 900; font-style: italic; letter-spacing: -1px; }
.instruction-banner { background-color: var(--light-grey-bg); text-align: center; padding: 8px; font-size: 0.85rem; font-weight: 600; margin-bottom: 30px; color: #444; }
.container { max-width: 1000px; margin: 0 auto; padding: 0 20px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 30px; align-items: start; }
.form-group { margin-bottom: 15px; }
label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 5px; color: #333; }
input[type="text"], input[type="password"], textarea, select { width: 100%; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 2px; font-size: 0.9rem; box-sizing: border-box; background-color: #fcfcfc; font-family: inherit; }
textarea { resize: vertical; min-height: 80px; }
details.collapsible-section { border: 1px solid var(--border-color); border-radius: 4px; background-color: #fcfcfc; margin-bottom: 15px; overflow: hidden; }
summary.collapsible-summary { padding: 10px 15px; font-weight: 600; font-size: 0.9rem; background-color: #eee; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; color: var(--primary-teal); }
summary.collapsible-summary::-webkit-details-marker { display: none; }
.collapsible-content { padding: 15px; border-top: 1px solid #ccc; }
.row-group { display: flex; gap: 20px; }
.row-group .form-group { flex: 1; }
.coords-row { display: flex; align-items: center; gap: 10px; }
.coords-input { flex: 1; min-width: 0; }
.btn-autofill { background-color: var(--primary-teal); color: white; border: none; padding: 9px 12px; font-weight: bold; font-size: 0.8rem; cursor: pointer; text-transform: uppercase; border-radius: 3px; height: 38px; white-space: nowrap; }
.upload-area-full { grid-column: 1 / -1; margin-top: 10px; }
.btn-upload { width: 100%; background-color: #f2f2f2; border: 1px dashed #999; padding: 15px; text-align: center; cursor: pointer; transition: background 0.2s; }
.btn-upload:hover { background-color: #e6e6e6; }
.btn-upload i { color: var(--primary-teal); font-size: 1.5rem; }
.section-label { font-weight: bold; font-size: 0.8rem; margin-bottom: 5px; display: block; text-transform: uppercase; }
.footer-action { text-align: center; margin-top: 20px; margin-bottom: 50px; }
.btn-done { background-color: var(--primary-teal); color: white; border: none; padding: 10px 0; width: 80%; max-width: 600px; font-size: 1rem; font-weight: bold; cursor: pointer; border-radius: 4px; }
.btn-done:hover { background-color: var(--dark-teal); }

/* --- DEVICE MANAGER STYLES --- */
.manager-header-row { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 30px; margin-bottom: 20px; }
h2.page-title { color: var(--primary-teal); font-size: 1.8rem; margin: 0; font-weight: bold; }
.status-cards { display: flex; gap: 20px; }
.stat-card { color: white; padding: 5px 15px; min-width: 120px; text-align: center; border-radius: 2px; }
.stat-card .label { font-size: 0.75rem; font-weight: bold; display: block; margin-bottom: 2px; }
.stat-card .count { font-size: 1.8rem; font-weight: bold; }
.bg-operational { background-color: var(--stat-operational); }
.bg-not-active { background-color: var(--stat-not-active); }
.bg-missed { background-color: var(--stat-missed); }
.bg-error { background-color: var(--stat-error); }

/* MMS Status Overrides */
.bg-mms-open { background-color: var(--mms-open); }
.bg-mms-pending { background-color: var(--mms-pending); }
.bg-mms-complete { background-color: var(--mms-complete); }

/* Health Status Overrides (Reused for Health View Tiles) */
.bg-health-excellent { background-color: var(--health-excellent); }
.bg-health-warning { background-color: var(--health-warning); }
.bg-health-critical { background-color: var(--health-critical); }

.action-buttons { display: flex; gap: 15px; margin-bottom: 20px; }
.btn-outline { 
    background-color: white; 
    border: 1px solid #ccc; 
    color: var(--primary-teal); 
    padding: 10px 30px; 
    font-weight: bold; 
    font-size: 0.9rem; 
    cursor: pointer; 
    border-radius: 2px; 
}
.btn-outline:hover { background-color: #f9f9f9; }
.table-container { background-color: #f9f9f9; border: 1px solid #ddd; }
.table-toolbar { background-color: #dcdcdc; padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; }
.toolbar-left { display: flex; gap: 15px; align-items: center; }
.search-input { width: 300px; padding: 6px 10px; border: 1px solid #bbb; background: white; }

/* Column Slicer */
.slicer-wrapper { position: relative; }
.btn-slicer { background-color: #fff; border: 1px solid #bbb; padding: 6px 12px; cursor: pointer; font-size: 0.85rem; font-weight: 600; color: #444; display: flex; align-items: center; gap: 5px; }
.slicer-menu { display: none; position: absolute; top: 100%; left: 0; background: white; border: 1px solid #ccc; box-shadow: 0 4px 8px rgba(0,0,0,0.1); z-index: 100; min-width: 150px; padding: 10px; border-radius: 2px; }
.slicer-menu.show { display: flex; flex-direction: column; }
.slicer-menu label { font-weight: normal; margin-bottom: 8px; cursor: pointer; font-size: 0.85rem; }
.toolbar-icons i { font-size: 1.4rem; color: #888; margin-left: 10px; cursor: pointer; }

/* Table Styles */
table.device-table, table.mms-table, table.health-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.device-table th, .mms-table th, .health-table th { text-align: left; padding: 10px 15px; background-color: #eee; border-bottom: 2px solid #ddd; color: #555; font-weight: 600; white-space: nowrap; }
.device-table th i, .mms-table th i, .health-table th i { margin-left: 5px; font-size: 0.7rem; }
.device-table td, .mms-table td, .health-table td { padding: 12px 15px; border-bottom: 1px solid #eee; color: #333; }
.device-table tbody tr, .mms-table tbody tr, .health-table tbody tr { cursor: pointer; transition: background 0.1s; }
.device-table tbody tr:nth-child(even), .mms-table tbody tr:nth-child(even), .health-table tbody tr:nth-child(even) { background-color: #f4f4f4; }
.device-table tbody tr:hover, .mms-table tbody tr:hover, .health-table tbody tr:hover { background-color: #dcebeb; }
.mms-table .status-pill, .health-table .status-pill {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: bold;
    color: white;
    text-align: center;
}

.status-check { color: var(--stat-operational); font-size: 1.2rem; }
.table-footer { background-color: #dcdcdc; padding: 8px 15px; display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; }
.pagination span { margin-left: 10px; cursor: pointer; color: #555; }
.pagination span.active { font-weight: bold; color: var(--primary-teal); background: #fff; padding: 2px 6px; border-radius: 50%; }

/* --- DEVICE DETAILS VIEW STYLES (Multiple Tabs) --- */
.details-header { margin-top: 30px; margin-bottom: 10px; }
.details-info h2 { font-size: 1.2rem; color: #000; margin: 0 0 5px 0; }
.details-info .info-row { font-weight: bold; font-size: 0.9rem; margin-bottom: 5px; }
.status-msg { color: #d95329; font-weight: bold; font-size: 0.9rem; margin-bottom: 20px; }
.close-icon-container { text-align: right; margin-bottom: 10px; }
.close-icon { color: #999; font-size: 1.5rem; cursor: pointer; border: 2px solid #ccc; border-radius: 4px; padding: 2px 6px; }
.close-icon:hover { color: #666; border-color: #999; }

.tabs-nav { display: flex; list-style: none; padding: 0; margin: 0; border-bottom: 1px solid #ccc; }
.tabs-nav li { margin-right: 25px; padding-bottom: 8px; cursor: pointer; font-size: 0.9rem; color: #555; transition: color 0.1s, border-bottom 0.1s; }
.tabs-nav li.active { 
    border-bottom: 3px solid var(--primary-teal); 
    font-weight: bold; 
    color: var(--primary-teal); 
}

/* Styles for the individual tab content boxes */
.detail-tab-content {
    border: 1px solid #ccc;
    border-top: none;
    padding: 20px;
    min-height: 300px;
    background: white;
    display: none; /* Hidden by default, controlled by JS */
}
.detail-tab-content.active {
    display: block; /* Show when active */
}

/* Details Grid for Downlinks Tab */
.details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 25px;
}

.config-label { color: var(--primary-teal); font-weight: bold; display: block; margin-bottom: 5px; }
.config-value { font-weight: normal; margin-bottom: 10px; display: block; }

.config-input { width: 100%; border: 1px solid #ccc; padding: 5px; font-size: 0.9rem; border-radius: 2px; }

.subsection-title {
    font-size: 1rem;
    color: #333;
    font-weight: bold;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

.btn-base-config { background-color: #5f9ea0; color: white; border: none; padding: 10px 40px; font-weight: bold; border-radius: 3px; cursor: pointer; text-transform: lowercase; }
.btn-base-config:hover { background-color: #4f8e90; }

/* --- INSTALLATION CHECKLIST STYLES --- */
.checklist-container { max-width: 800px; margin-top: 30px; }
.checklist-title { 
    color: var(--primary-teal); 
    font-size: 1.5rem; 
    margin-bottom: 20px; 
    border-bottom: 2px solid var(--primary-teal); 
    padding-bottom: 10px; 
}
.checklist-card {
    background-color: var(--checklist-bg);
    border: 1px solid var(--checklist-border);
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.checklist-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--checklist-border);
    cursor: pointer;
    font-size: 0.95rem;
    color: #444;
    transition: background-color 0.1s;
}
.checklist-item:last-child {
    border-bottom: none;
}
.checklist-item:hover {
    background-color: var(--checklist-item-hover);
}
.checklist-item input[type="checkbox"] {
    margin-right: 15px;
    width: 18px;
    height: 18px;
    accent-color: var(--primary-teal);
}
.checklist-item span.item-text {
    flex-grow: 1;
}
.checklist-footer-action {
    text-align: center;
    margin-top: 40px;
}
.btn-finish-install {
    background-color: var(--stat-operational);
    color: white;
    border: none;
    padding: 12px 60px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
    width: 100%;
    max-width: 500px;
}
.btn-finish-install:hover {
    background-color: #4a9494;
}

/* --- INSTALLATION REPORT STYLES (Used by both view-report and tab-installation-summary) --- */
.report-container { max-width: 1200px; margin-top: 30px; }
.report-header { background-color: var(--report-header-bg); padding: 20px; border-radius: 4px 4px 0 0; border: 1px solid #ccc; margin-bottom: -1px; }
.report-header h2 { margin: 0; color: var(--primary-teal); font-size: 1.6rem; }
.report-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Default desktop 3-col */
    gap: 20px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 0 0 4px 4px;
    background-color: white;
}
.report-section {
    border: 1px solid #eee;
    padding: 15px;
    border-radius: 4px;
    background-color: var(--checklist-bg);
}
.report-section .subsection-title {
    color: #555;
    border-bottom: 1px solid #ddd;
}
.report-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dotted #ccc;
    font-size: 0.9rem;
}
.report-item:last-child {
    border-bottom: none;
}
.report-label {
    font-weight: 600;
    color: #333;
}
.report-value {
    font-weight: normal;
    color: #000;
    text-align: right;
}
.check-status i {
    margin-left: 5px;
}
.check-status.confirmed { color: var(--success-color); }
.check-status.not-confirmed { color: var(--fail-color); }

/* Full Width Sections for Images */
.full-width-section {
    grid-column: 1 / -1; /* Spans all columns in the grid */
}
.image-placeholder {
    width: 100%;
    height: 300px;
    background-color: #e0e0e0;
    border: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #666;
    font-size: 1rem;
    margin-top: 10px;
}
.image-placeholder i {
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: var(--primary-teal);
}

/* Styling for the PDF button */
.btn-generate-pdf {
    background-color: #b30000; /* Red color for PDF button */
    color: white;
    border: none;
    padding: 8px 15px;
    font-weight: bold;
    font-size: 0.85rem;
    cursor: pointer;
    border-radius: 3px;
    margin-top: 10px;
}
.btn-generate-pdf:hover {
    background-color: #8c0000;
}

/* --- DIAGNOSTICS FLOW STYLES --- */
.diag-flow-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 1.1rem;
    color: var(--diag-gray);
}
.diag-flow-item i:first-child {
    font-size: 1.6rem;
    margin-right: 15px;
    width: 25px; /* Fixed width for icon alignment */
    text-align: center;
}
/* Style for the small flow arrows */
.diag-flow-item.flow-arrow {
    font-size: 1.2rem;
    margin-left: 10px;
    line-height: 0.5; /* Minimize space taken by arrow */
}
/* Specific coloring for Uplink/Downlink */
.diag-flow-item.uplink i { color: var(--diag-orange); }
.diag-flow-item.downlink i { color: var(--diag-green); }
.diag-flow-item.status-check i { color: #555; }
.diag-flow-item.gateway-info i { color: var(--primary-teal); }
.diag-flow-item.decoded-success i { color: var(--diag-green); }

/* --- DEVICE DETAILS TAB: DETAILS --- */
.details-data-row {
    display: flex;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.95rem;
}
.details-data-row:last-of-type {
    border-bottom: none;
}
.details-data-row span:first-child {
    flex-basis: 150px;
    font-weight: bold;
    color: var(--details-label);
    margin-right: 20px;
}

/* --- MMS SPECIFIC PAGE STYLES --- */
.mms-content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}
.mms-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}
.mms-stats .stat-card {
    flex-basis: 33.33%;
    padding: 15px;
}

/* --- DEVICE HEALTH SPECIFIC PAGE STYLES --- */
.health-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}
.health-stats .stat-card {
    flex-basis: 33.33%;
    padding: 20px;
}
.health-score {
    font-size: 0.75rem;
    text-align: center;
    font-weight: bold;
    color: #333;
    margin-top: 10px;
}
/* Style for grouped th headers */
.health-table thead th[colspan], .health-table thead th[rowspan="2"] {
    text-align: center !important;
    border-bottom: none;
    border-top: 1px solid #ddd;
    font-weight: bold;
}
.health-table thead tr:last-child th {
    border-top: 1px solid #ddd !important;
    font-weight: normal;
}
/* Centering the grouped columns' content for a cleaner look */
.health-table td:nth-child(2), .health-table td:nth-child(3), .health-table td:nth-child(4), .health-table td:nth-child(5) {
        text-align: center;
}

/* --- IMAGE TAB STYLES --- */
.image-placeholder-tab {
    width: 100%;
    height: 400px;
    background-color: var(--light-grey-bg);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--primary-teal);
    font-size: 1.2rem;
    margin-bottom: 30px;
    margin-top: 20px;
}
.image-placeholder-tab i.fa-camera-retro {
    font-size: 2.5rem;
    margin-right: 10px;
}
.btn-upload-large {
    background-color: transparent;
    border: none;
    cursor: pointer;
    color: var(--primary-teal);
    transition: color 0.2s;
    padding: 10px;
}
.btn-upload-large i {
    font-size: 3rem;
}
.btn-upload-large:hover {
    color: var(--dark-teal);
}

/* --- MESSAGES/LOGS TAB STYLES --- */
.log-header {
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding-bottom: 5px; 
    border-bottom: 2px solid #ccc;
    margin-top: 20px;
}
.log-header h3 {
    margin: 0; 
    font-size: 1.2rem;
    font-weight: 600;
}
.log-table-wrapper {
    overflow-y: scroll;
    height: 300px;
    border: 1px solid #ccc;
}
table.log-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.log-table th, .log-table td {
    padding: 8px 15px;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
}
.log-table th {
    background-color: #eee;
    font-weight: 600;
    color: #555;
    position: sticky;
    top: 0;
    z-index: 1;
}
.log-table tbody tr {
    cursor: pointer;
}
.log-table tbody tr.active {
    background-color: var(--checklist-item-hover);
}
.log-table td:first-child {
    width: 10%;
}
.log-table .expand-icon {
    color: var(--primary-teal);
    margin-right: 5px;
}
.message-detail-area {
    margin-top: 15px;
}
.message-detail-area textarea {
    min-height: 150px;
    font-family: monospace;
    font-size: 0.85rem;
    background-color: #fcfcfc;
    border: 1px solid #ddd;
}
.log-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    font-size: 0.8rem;
}
.log-footer .pagination-links span {
    margin: 0 5px;
    color: var(--primary-teal);
    cursor: pointer;
    font-weight: 600;
}
.log-footer .pagination-links span:hover {
    text-decoration: underline;
}
.log-footer select {
    padding: 2px;
    border: 1px solid #ccc;
}
/* Style specifically for details content header (pencil icon) */
.details-content-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}
.details-content-header i {
    color: #999;
    cursor: pointer;
    font-size: 1.2rem;
    transition: color 0.2s;
}
.details-content-header i:hover {
    color: var(--primary-teal);
}


/* Responsive Overrides (Mobile First) */
@media (max-width: 991px) {
    .report-grid {
        grid-template-columns: 1fr 1fr;
    }
    .mms-stats, .health-stats {
        flex-wrap: wrap;
    }
    .mms-stats .stat-card, .health-stats .stat-card {
        flex-basis: 48%;
    }
}
@media (max-width: 768px) {
    .form-grid { grid-template-columns: 1fr; }
    .manager-header-row { flex-direction: column; gap: 20px; }
    .status-cards { flex-wrap: wrap; }
    .table-container { overflow-x: auto; }
    .tabs-nav { flex-wrap: wrap; }
    .details-grid { grid-template-columns: 1fr; gap: 20px; }
    .report-grid { 
        grid-template-columns: 1fr;
        padding: 10px;
    }
    .details-data-row span:first-child {
        flex-basis: 100px;
    }
    .mms-stats .stat-card, .health-stats .stat-card {
        flex-basis: 100%;
    }
}

/* Styles to isolate the Installation Summary for PDF printing */
.print-summary-mode .top-bar,
.print-summary-mode .tabs-nav,
.print-summary-mode .close-icon-container,
.print-summary-mode .pdf-report-actions,
.print-summary-mode .status-msg,
.print-summary-mode .details-info,
.print-summary-mode .detail-tab-content:not(#tab-installation-summary-content),
.print-summary-mode #view-manager,
.print-summary-mode #view-report,
.print-summary-mode #view-form {
    display: none !important;
}
/* Ensure the target content is visible */
.print-summary-mode #tab-installation-summary-content {
    display: block !important;
    border: none !important;
    padding-top: 0 !important;
    min-height: auto !important;
}
/* Remove outer container styling for clean print */
.print-summary-mode .container {
    margin-top: 0 !important;
    padding: 0 !important;
    max-width: none !important;
}
/* Ensure the report grid itself takes up the page */
.print-summary-mode #tab-installation-summary-content .report-grid {
    border: none !important;
}


/* Print Media Query (PDF Report Friendly) */
@media print {
    body {
        background-color: white !important;
    }
    .top-bar, .action-buttons, .table-toolbar, .table-footer, .tabs-nav, .checklist-footer-action, .close-icon-container, .btn-finish-install, .pdf-report-actions, .status-msg, .details-info {
        display: none !important;
    }
    .view-section, .container {
        display: block !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .report-container { margin-top: 0 !important; }

    .report-header {
        background-color: #f0f0f0 !important;
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
        border: 1px solid #000 !important;
        border-bottom: none !important;
    }
    .report-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 15px;
        padding: 15px;
        border: 1px solid #000 !important;
        box-shadow: none !important;
    }
    .report-section {
        border: 1px solid #ddd;
        background-color: white !important;
    }
    .image-placeholder {
        height: 200px;
        background-color: #f9f9f9;
        border: 1px solid #000;
        break-inside: avoid;
    }
}
/* --- RECORDS MANAGEMENT STYLES --- */

/* Badge styles for "Document Updates" column */
.doc-status-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.doc-status-ok {
    background-color: #e6f4ea;
    color: var(--health-excellent); /* Green */
    border: 1px solid var(--health-excellent);
}

.doc-status-update {
    background-color: #fef7e0;
    color: var(--health-warning); /* Orange/Yellow */
    border: 1px solid var(--health-warning);
}

.doc-status-missing {
    background-color: #fce8e6;
    color: var(--health-critical); /* Red */
    border: 1px solid var(--health-critical);
}

/* Table Specifics */
.records-table .text-center {
    text-align: center;
}

/* Wetted Parts Checkbox */
.wetted-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-teal);
    cursor: not-allowed; /* Since it's a record view, usually read-only */
}

/* N/A Text Style */
.material-na {
    color: #999;
    font-style: italic;
}
/* --- NEW TABLE STYLES --- */
.modern-table {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    font-size: 0.9rem;
}

.modern-table thead tr {
    background-color: var(--primary-teal);
    color: white;
    text-align: left;
}

.modern-table th {
    padding: 12px 15px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--dark-teal);
}

.modern-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    color: #333;
}

.modern-table tbody tr:hover {
    background-color: #f2f8f8; /* Very light teal tint */
    cursor: pointer;
}

.modern-table .doc-icon {
    margin-right: 10px;
    color: var(--primary-teal);
    font-size: 1.1rem;
}

.status-badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
}
.status-badge.active { background-color: #e6f4f4; color: var(--primary-teal); }
.status-badge.pending { background-color: #fff4e6; color: #d95329; }

/* --- TAB UTILITIES --- */
.tab-pane { display: none; }
.tab-pane.active { display: block; }