/* =====================================================
   ValueNoticesModern.css
   Accessible, semantic styles for ValueNotices.aspx
   Replaces print-oriented table layout with modern
   section-based design. Supports responsive web
   viewing and print/PDF output.
   Requires: HeaderModern.css, SharedModern.css (linked in page)
   ===================================================== */

/* ===== PAGE CONTAINER ===== */
main {
    flex: 1;
}

.page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* ===== PRINT BAR ===== */
.notice-print-bar {
    margin-bottom: 20px;
    text-align: right;
}

.print-button {
    background: #1260cc;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.print-button:hover {
    background: #0a4fa8;
}

.print-button:focus-visible {
    outline: 3px solid #1260cc;
    outline-offset: 3px;
    border-radius: 3px;
}

.print-button i {
    margin-right: 6px;
}

/* ===== HEADER SECTION ===== */
.notice-header {
    background: #ffffff;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 12px;
    border: 1px solid #dde5f4;
}

.notice-header .header-content {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
}

.notice-seal {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notice-seal img {
    max-width: 100%;
    height: auto;
}

.notice-issuer {
    flex: 1;
}

.issuer-title {
    font-size: 18px;
    font-weight: 700;
    color: #0d1f47;
    margin: 0 0 8px 0;
    padding: 0;
    line-height: 1.2;
}

.issuer-dept {
    font-size: 15px;
    font-weight: 600;
    color: #1a2438;
    margin: 0 0 12px 0;
}

.issuer-locations {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    font-size: 13px;
    color: #445571;
    line-height: 1.6;
}

.issuer-location {
    margin: 0;
}

.issuer-location strong {
    display: block;
    color: #1a2438;
    font-weight: 600;
    margin-bottom: 4px;
}

/* ===== PROPERTY INFORMATION SECTION ===== */
.property-info {
    background: #ffffff;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 12px;
    border: 1px solid #dde5f4;
}

.property-info-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.property-info-row {
    display: flex;
    gap: 20px;
    align-items: baseline;
}

.property-info-label {
    font-size: 13px;
    font-weight: 600;
    color: #445571;
    min-width: 180px;
}

.property-info-value {
    font-size: 15px;
    color: #1a2438;
    font-weight: 500;
}

/* ===== NOTICE TYPE SECTIONS ===== */
.notice-section {
    background: #ffffff;
    margin-bottom: 20px;
    border-radius: 12px;
    border: 1px solid #dde5f4;
    overflow: hidden;
}

.notice-section-header {
    background: #edf3ff;
    padding: 14px 20px;
    border-bottom: 1px solid #dde5f4;
}

.notice-section-header h2 {
    font-size: 17px;
    font-weight: 600;
    color: #0d1f47;
    margin: 0;
}

.notice-section-description {
    padding: 16px 20px;
    font-size: 13px;
    color: #445571;
    line-height: 1.6;
    border-bottom: 1px solid #f0f3fa;
    margin: 0;
}

.notice-section-description:last-child {
    border-bottom: none;
}

/* ===== VALUES TABLE (DEFINITION LIST STYLE) ===== */
.notice-values {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    max-width: 460px; /* keeps label + value close together */
}

.notice-values-row {
    display: flex;
    align-items: baseline;
    padding: 7px 20px;
    border-bottom: 1px solid #f0f3fa;
    gap: 16px;
}

.notice-values-row:last-child {
    border-bottom: none;
}

/* Bold rows for totals and net values */
.notice-values-row.total {
    font-weight: 600;
    background: #f8fafd;
}

.notice-values-row.net-value {
    font-weight: 700;
    background: #f8fafd;
    border-top: 1px solid #dde5f4;
}

.notice-value-label {
    font-size: 13px;
    font-weight: 500;
    color: #445571;
    min-width: 185px;
    line-height: 1.5;
}

.notice-value-amount {
    font-size: 15px;
    color: #1a2438;
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
    min-width: 90px;
}

/* Bold styling for total rows */
.notice-values-row.total .notice-value-label,
.notice-values-row.total .notice-value-amount {
    color: #0d1f47;
    font-weight: 600;
}

/* Bold styling for net value rows */
.notice-values-row.net-value .notice-value-label,
.notice-values-row.net-value .notice-value-amount {
    color: #0d1f47;
    font-weight: 700;
}

/* ===== TABLE HEADERS ===== */
.notice-table-header {
    display: flex;
    flex-wrap: wrap; /* allows full-width section heading to sit above column headers */
    background: #edf3ff;
    border-bottom: 1px solid #dde5f4;
    font-weight: 600;
    font-size: 14px;
    color: #0d1f47;
}

.notice-table-header > div {
    flex: 1;
    padding: 14px 20px;
    border-right: 1px solid #dde5f4;
}

.notice-table-header > div:last-child {
    border-right: none;
}

/* Full-width section heading injected above column headers for AGP/MA notices */
.notice-table-header > .notice-section-header-span {
    flex: 0 0 100%;
    border-right: none;
    border-bottom: 1px solid #dde5f4;
    margin-bottom: 0;
    padding: 12px 20px;
}

/* ===== NOTICE TABLE (for Prop8/AGP/MA format) ===== */
.notice-table {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.notice-table-row {
    display: flex;
    border-bottom: 1px solid #f0f3fa;
}

.notice-table-row:last-child {
    border-bottom: none;
}

/* Bold styling for total rows */
.notice-table-row.total {
    font-weight: 600;
    background: #f8fafd;
}

.notice-table-row.net-value {
    font-weight: 700;
    background: #f8fafd;
    color: #0d1f47;
    border-bottom: none;
}

.notice-table-cell {
    flex: 1;
    padding: 12px 20px;
    border-right: 1px solid #f0f3fa;
    font-size: 13px;
    color: #1a2438;
}

.notice-table-cell:last-child {
    border-right: none;
}

/* Bold styling for total rows */
.notice-table-row.total .notice-table-cell {
    color: #0d1f47;
}

.notice-table-row.net-value .notice-table-cell {
    color: #0d1f47;
}

/* ===== FOOTER SECTION ===== */
.notice-footer {
    padding: 20px;
    font-size: 13px;
    color: #445571;
    line-height: 1.6;
    border-top: 1px solid #dde5f4;
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.notice-footer strong {
    flex: 1;
    font-weight: 700;
    font-size: 18px;
    color: #0d1f47;
    margin: 0;
    text-align: center;
}

.notice-type {
    font-size: 12px;
    color: #445571;
    margin: 0;
    flex-shrink: 0;
}

/* ===== PAGE TITLE ===== */
.notice-page-title {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #0d1f47;
    margin: 20px 0;
}

/* ===== PRINT SUPPORT ===== */
@page {
    margin: 0.5in 0.5in;
}

@media print {
    /* Hide skip link, navigation, and print button */
    .skip-link,
    .site-header-bar,
    .page-top,
    .notice-print-bar,
    footer {
        display: none !important;
    }

    /* Remove body background and padding for print */
    body {
        background: #ffffff !important;
        margin: 0;
        padding: 0;
    }

    /* Optimize page container for print - ultra compact margins */
    .page-container {
        max-width: 100%;
        margin: 0;
        padding: 0.15in 0.15in;
    }

    /* Maintain section separation on print - minimal spacing */
    .notice-section {
        page-break-inside: avoid;
        border-color: #ccc;
        margin-bottom: 4pt;
    }

    .notice-header {
        page-break-inside: avoid;
        border-color: #ccc;
        padding: 8px !important;
        margin-bottom: 4pt !important;
    }

    /* Ensure header content uses flex layout in print (not mobile block layout) */
    .notice-header .header-content {
        display: flex !important;
        align-items: flex-start !important;
        gap: 8px !important;
        margin-bottom: 2px !important;
    }

    /* Ensure seal displays correctly in print - tiny for compactness */
    .notice-seal {
        flex-shrink: 0 !important;
        width: 50px !important;
        height: 50px !important;
        float: none !important;
        margin-right: 8px !important;
        margin-bottom: 0 !important;
    }

    /* Ensure issuer info displays correctly in print */
    .notice-issuer {
        flex: 1 !important;
        overflow: visible !important;
    }

    .issuer-title {
        font-size: 11pt !important;
        margin: 0 0 0px 0 !important;
        line-height: 1.1 !important;
    }

    .issuer-dept {
        font-size: 8pt !important;
        margin: 0 0 2px 0 !important;
        line-height: 1.1 !important;
    }

    /* Ensure locations display in 2 columns in print */
    .issuer-locations {
        grid-template-columns: 1fr 1fr !important;
        clear: none !important;
        gap: 4px !important;
        font-size: 7pt !important;
        line-height: 1.2 !important;
    }

    .issuer-location {
        margin: 0 !important;
    }

    .issuer-location strong {
        font-size: 7pt !important;
        margin-bottom: 0px !important;
        line-height: 1.1 !important;
    }

    .property-info {
        page-break-inside: avoid;
        border-color: #ccc;
        padding: 6px !important;
        margin-bottom: 4pt !important;
    }

    .property-info-list {
        display: flex !important;
        flex-direction: row !important;
        gap: 16px !important;
        flex-wrap: wrap !important;
    }

    .property-info-row {
        display: flex !important;
        gap: 8px !important;
        padding: 0 !important;
        border-bottom: none !important;
        align-items: baseline !important;
    }

    .property-info-label {
        font-size: 9pt !important;
        min-width: 130px !important;
        font-weight: 600 !important;
    }

    .property-info-value {
        font-size: 9pt !important;
    }

    /* Preserve colors in print for important sections */
    .notice-section-header {
        background: #e8ecf5;
        padding: 5px 8px !important;
    }

    .notice-section-header h2 {
        font-size: 11pt !important;
        margin: 0 !important;
        line-height: 1.25 !important;
    }

    .notice-section-description {
        padding: 4px 8px !important;
        font-size: 9pt !important;
        margin: 0 !important;
        line-height: 1.25 !important;
    }

    .notice-values {
        max-width: 380px !important;
    }

    .notice-values-row {
        padding: 3px 8px !important;
        gap: 10px !important;
        border-bottom: 0.5pt solid #f0f3fa !important;
        line-height: 1.3 !important;
    }

    .notice-values-row.net-value {
        background: #f0f3fa;
        border-bottom: 0.5pt solid #dde5f4 !important;
    }

    .notice-table-row {
        padding: 0 !important;
        border-bottom: 0.5pt solid #f0f3fa !important;
    }

    .notice-table-header {
        padding: 0 !important;
    }

    .notice-table-header > div {
        padding: 4px 6px !important;
        font-size: 9pt !important;
        border-right: 0.5pt solid #dde5f4 !important;
        line-height: 1.25 !important;
    }

    .notice-table-header > .notice-section-header-span {
        padding: 4px 8px !important;
    }

    .notice-table-header > .notice-section-header-span h2 {
        font-size: 10pt !important;
        margin: 0 !important;
    }

    .notice-table-row.total {
        background: #f5f5f5;
    }

    .notice-table-row.net-value {
        background: #f0f3fa;
    }

    .notice-table-cell {
        padding: 4px 6px !important;
        font-size: 9pt !important;
        border-right: 0.5pt solid #f0f3fa !important;
        line-height: 1.3 !important;
    }

    /* Adjust fonts for print */
    body {
        font-size: 10pt;
        line-height: 1.25;
    }

    .notice-value-label {
        font-size: 9pt !important;
        min-width: 130px !important;
        line-height: 1.3 !important;
    }

    .notice-value-amount {
        font-size: 9pt !important;
        line-height: 1.3 !important;
        min-width: 70px !important;
        text-align: left !important;
    }

    .issuer-locations {
        grid-template-columns: 1fr;
    }

    /* Ensure page title doesn't wrap in print (override mobile max-width) */
    .notice-page-title {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 3pt !important;
        margin-bottom: 4pt !important;
        font-size: 14pt !important;
        line-height: 1.25 !important;
    }

    /* Compact footer for print */
    .notice-footer {
        padding: 4pt 8px !important;
        font-size: 8pt !important;
        gap: 6px !important;
        margin-top: 4pt !important;
        border-top: 0.5pt solid #ccc !important;
        line-height: 1.25 !important;
    }

    .notice-footer strong {
        font-size: 10pt !important;
    }

    .notice-type {
        font-size: 8pt !important;
    }
}

/* ===== RESPONSIVE DESIGN ===== */
@media screen and (max-width: 768px) {
    /* Compact mobile header: seal left (60px), details right, offices below side-by-side */
    .notice-header {
        padding: 12px;
    }

    .notice-header .header-content {
        display: block;
    }

    /* Top row: seal and issuer info (title/dept) side by side */
    .notice-seal {
        width: 60px;
        height: 60px;
        float: left;
        margin-right: 12px;
        margin-bottom: 12px;
    }

    .notice-issuer {
        overflow: hidden;
    }

    .issuer-title {
        font-size: 16px;
        margin: 0 0 4px 0;
    }

    .issuer-dept {
        font-size: 13px;
        margin: 0 0 12px 0;
    }

    /* Office locations: full width, side-by-side below */
    .issuer-locations {
        clear: both;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        font-size: 12px;
    }

    .issuer-location {
        margin: 0;
    }

    .issuer-location strong {
        font-size: 12px;
        margin-bottom: 2px;
    }

    .notice-value-label {
        min-width: 140px;
    }

    .notice-table-cell {
        border-right: none;
        border-bottom: 1px solid #f0f3fa;
    }

    /* Force page title to wrap: "SECURED PROPERTY" on line 1, "NOTICE OF VALUES" on line 2 */
    .notice-page-title {
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (max-width: 560px) {
    .notice-header {
        padding: 16px;
    }

    .notice-seal {
        width: 80px;
        height: 80px;
    }

    .issuer-title {
        font-size: 16px;
    }

    .issuer-dept {
        font-size: 14px;
    }

    .notice-values-row,
    .notice-table-cell {
        padding: 10px 16px;
    }

    .notice-value-label {
        min-width: 120px;
        font-size: 12px;
    }

    .notice-value-amount {
        font-size: 14px;
    }
}