/**
 * Style overrides to create a PDF/print-friendly book of election results
 * Uses pagedJS spec: https://www.pagedjs.org/documentation
 */


div.empty {
    padding: 2em;
    text-align: center;
}


/* Note: while these body rules help the wkhtmltopdf PDF result
  look more like tenant CT books, they ruin the balance of the pagedJS book design
  */
body {
    font-size: 14px;
    padding: 28px;
}

table {
    font-size: 14px;
    border-collapse: collapse;
    width: 100%;
}

/* fix the strange extra-line-space bug for table rows */
tr {
    page-break-inside: avoid;
}

table thead {
    page-break-inside: avoid;
}

table tbody tr.total {
    page-break-inside: avoid;
}

table thead a {
    text-decoration: none;
    color: #000;
}

table td, table th {
    padding: 4px;
    border-collapse: collapse;
}


table thead tr.candidate-row th {
    border-top: 2px #333 solid;
    border-bottom: 1px #333 solid;
    vertical-align: bottom;
    text-align: right;
}

/* extra small font for pair candidates (pres/gov generals) to avoid 3+ lines of text in each th cell */
table thead tr.candidate-row th.is-candidate-pair {
    font-size: 0.8em;
}


table thead tr.candidate-row th .candidate-party-label {
    font-size: 0.8em;
    color: #AAA;
}

table thead tr.candidate-row th.first,
table thead tr.candidate-row th.is_pseudocandidate {
    vertical-align: top;
}

table thead tr.candidate-row th.first {
    text-align: left;
}



/**
 * thead.continuing handling
 * Reprinting thead column labels for tables that break across pages in pagedJS.
 * This was a very involved fix.
 * The thead.continuing element is inserted into the DOM by pagedJS custom ECMAScript functions
 * (in file: contests-print-book-custom-pagedjs.js).
 * Each thead must be inserted as an absolutely positioned element so that it doesn't push content down and force data
 * cut off by the PagedJS Chunker. Thus, we introduce new issues that our custom pagedJS functions must fix, such as match the th widths with those of the tbody td cells, and make the contensts of the th elements terse enough to avoid running beyond 2 lines of text, otherwise the element will overlap the top tbody tr and look bad.
 */
table thead.continuing {
    display: table;
    position: absolute;
    top: -28px;
    width: 100%;

}
table thead.continuing tr {

}
table thead.continuing tr.candidate-row th {
    border: none;
    border-bottom: 1px #333 solid;
    font-size: 0.8em;
    padding-top: 0px;
    height: 24px;
}




table thead.continuing tr.candidate-row th:first-child {

}

table thead.continuing tr.candidate-row th .candidate-party-label {
    display: none;
}
table thead.continuing tr.candidate-row th.first,
table thead.continuing tr.candidate-row th.is_pseudocandidate {
    vertical-align: bottom;
}

table thead.continuing tr.candidate-row th .candidate-name-terse {
    /*
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    */
}

table thead.continuing tr.candidate-row th .candidate-party-label-terse {
    font-size: 0.8em;
    color: #AAA;
    display: inline;
}

/* END thead.continuing handling */


table td.division {
    white-space: nowrap;
}

table td.n_votes {
    text-align: right;
}


table tbody tr.total:first-child {
    display: none;
}

table.n-granular-rows-100plus tbody tr.total:first-child {
    display: table-row;
}


table tbody tr.total td {
    font-weight: bold;
}
table tbody tr.total:last-child td {
    border-top: 1px #666 solid;
    border-collapse: collapse;
}

table.n-granular-rows- tbody tr.total:last-child td,
table.n-granular-rows-0 tbody tr.total:last-child td,
table.n-granular-rows-1 tbody tr.total:last-child td,
table.n-granular-rows-2 tbody tr.total:last-child td {
    border-top: none;
}


div.book-title-1 {
    string-set: title1 content(text);
}
div.book-title-2 {
    string-set: title2 content(text);
}



h1.event {
    page-break-before: always;
    page-break-after: avoid;
}
h1.event:first-of-type {
    page-break-before: avoid;
    break-before: avoid;
    page-break-after: avoid;
}

/* ** TODO: a rule inside these two h2 blocks is causing the pagedJS to produce blank pages */
h2.office {
    page-break-after: avoid;
    page-break-before: always;
    break-before: page;
    string-set: office_name content(text);
}

h2.office.just-after-event {
    page-break-before: auto;
}




h3.district {
    margin-top: 2em;
    break-inside: avoid;
    page-break-inside: avoid ;
    page-break-after: avoid;
    string-set: district_name content(text);
}

h3.district.continuing {
    margin-top: 0px;
    position: absolute;
    top: -2em;
}

h3.district.no-district {
    visibility: hidden;
    height: 0px;
}

div.district-contest-container {
    /* break-inside: avoid; */
    page-break-inside: avoid;
}

div.district-contest-container.nudge h3 {
    margin-top: 5em;
}


div.district-contest-container.n-granular-rows-,
div.district-contest-container.n-granular-rows-0,
div.district-contest-container.n-granular-rows-1,
div.district-contest-container.n-granular-rows-2,
div.district-contest-container.n-granular-rows-3,
div.district-contest-container.n-granular-rows-4,
div.district-contest-container.n-granular-rows-5,
div.district-contest-container.n-granular-rows-6,
div.district-contest-container.n-granular-rows-7 {
    break-inside: avoid;
    page-break-inside: avoid;
}




@page {
    /* size: letter landscape; */ /* wkhtmltopdf handles this */
}


@page:left {
    @bottom-left {
        content: counter(page);
    }
}
@page:right {
    @bottom-right {
        content: counter(page);
    }
}



@page:right {
    @top-center {
        content: string(title2);
    }
    @bottom-center {
        content: string(title1);
    }

}

@page:left {
    @top-left {
        content: string(office_name) " - " string(district_name);
    }
}