/*
  * pgg.css
  *
  * Stylesheet for the Pretty Good Grid (PGG).
  * See companion Javascript in pgg.js
  *
  */

.pgg-table {
    border-spacing: 0px;
    border-collapse: collapse;
}

.pgg-table th {
    white-space: nowrap;
    padding: 10px;
    text-align: center;
    vertical-align: middle;
    transform: translate(-4px, 40px) rotate(320deg);
    transform-origin: 0% 0%;
    max-width: var(--cell-size);
}

.pgg-table th:first-child {
    transform: rotate(0deg);
    min-width: 120px;
}

/* Fix for Firefox rendering issue. Without it, cell borders disappear.
 *     https://stackoverflow.com/questions/7517127/borders-not-shown-in-firefox-with-border-collapse-on-table-position-relative-o
 */
.pgg-table td {
    background-clip: padding-box;
}

.pgg-table > tbody {
    border: thin solid black;
}

.pgg-table tbody tr:hover .row-label {
    background-color: #f8f8f8;
}

.pgg-cell {
    padding: 0px;
    position: relative;
    width: var(--cell-size);
    height: var(--cell-size);
    border: 1px solid black;
    cursor: pointer;
}
.pgg-cell.empty,
.pgg-cell.empty-circle {
    cursor: default;
}

.pgg-cell .decorator {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}

.pgg-table .row-label {
    white-space: nowrap;
    padding-left: 12px;
    padding-right: 12px;
    position: relative;
}

.pgg-table .stripe0 .row-label {
    background-color: white;
}

.pgg-table .stripe1 .row-label {
    background-color: #f0f0f0;
}

.pgg-table .has-children .row-label {
    font-weight: bold;
    padding-left: 4px;
    cursor: pointer;
}

.pgg-table .has-children .row-label .turnstile {
    position: absolute;
    right: 0px;
    top: 8px;
}

.pgg-table .has-children.closed .row-label .turnstile {
    transform: rotate(270deg);
}

/**************************************************
 * STYLES FOR DRAWING CELLS
 **************************************************/

.pgg-table,
.pgg-row,
.pgg-cell {
    /* define color variables */
    --color-blue1: rgb(215,228,255);
    --color-blue2: rgb(102,153,255);
    --color-blue3: rgb(0,64,192);
    --color-red1: rgb(255,215,215);
    --color-red2: rgb(255,103,103);
    --color-red3: rgb(192,0,0);
    --color-gold: rgb(255,219,103);
    --color-gray: rgb(166,166,166);
    --color-white: rgb(255,255,255);
    /* define some shape variables (i.e., clip paths) */
    --path-triangle: polygon(100% 0%, 40% 0%, 100% 60%);
    --path-sash: polygon(25% 0%,0% 0%,0% 25%,75% 100%,100% 100%,100% 75%);
    /* sizes */
    --cell-size: 24px;
}   

/* for all solid-color styles, disappear the decorator div */
.pgg-cell.b1 > .decorator,
.pgg-cell.b2 > .decorator,
.pgg-cell.b3 > .decorator,
.pgg-cell.r1 > .decorator,
.pgg-cell.r2 > .decorator,
.pgg-cell.r3 > .decorator {
    display: none;
}   

/* cells with blue backgrounds */
.pgg-cell.b1,
.pgg-cell.b1g,
.pgg-cell.b1r1,
.pgg-cell.b1r2,
.pgg-cell.b1r3 {
    background-color: var(--color-blue1);
}

.pgg-cell.b2,
.pgg-cell.b2g,
.pgg-cell.b2r1,
.pgg-cell.b2r2,
.pgg-cell.b2r3 {
    background-color: var(--color-blue2);
}

.pgg-cell.b3,
.pgg-cell.b3g,
.pgg-cell.b3r1,
.pgg-cell.b3r2,
.pgg-cell.b3r3 {
    background-color: var(--color-blue3);
}

/* cells with red backgrounds */
.pgg-cell.r1 {
    background-color: var(--color-red1);
}

.pgg-cell.r2 {
    background-color: var(--color-red2);
}

.pgg-cell.r3 {
    background-color: var(--color-red3);
}

/* cells with blue backgrounds and red or gold corners */
.pgg-cell.b1r1 > .decorator,
.pgg-cell.b2r1 > .decorator,
.pgg-cell.b3r1 > .decorator {
    background-color: var(--color-red1);
    clip-path: var(--path-triangle);
}   

.pgg-cell.b1r2 > .decorator,
.pgg-cell.b2r2 > .decorator,
.pgg-cell.b3r2 > .decorator {
    background-color: var(--color-red2);
    clip-path: var(--path-triangle);
}

.pgg-cell.b1r3 > .decorator,
.pgg-cell.b2r3 > .decorator,
.pgg-cell.b3r3 > .decorator {
    background-color: var(--color-red3);
    clip-path: var(--path-triangle);
}

.pgg-cell.b1g > .decorator,
.pgg-cell.b2g > .decorator,
.pgg-cell.b3g > .decorator {
    background-color: var(--color-gold);
    clip-path: var(--path-triangle);
}

/* other cell styles */

.pgg-cell.gold-corner,
.pgg-cell.gray-sash,
.pgg-cell.empty-circle,
.pgg-cell.empty {
    background-color: var(--color-white);
}

.pgg-cell.gold-corner > .decorator {
    clip-path: var(--path-triangle);
    background-color: var(--color-gold);
}

.pgg-cell.gray-sash > .decorator {
    clip-path: var(--path-sash);
    background-color: var(--color-gray);
}

.pgg-cell.empty-circle > .decorator {
    width: var(--cell-size);
    height: var(--cell-size);
    border-radius: calc(var(--cell-size) / 2);
    background-color: var(--color-white);
    border: 0.5px solid black;
    transform: scale(0.3);
    left: calc(50% - var(--cell-size) / 2);
}

.pgg-cell.empty > .decorator {
    display: none;
}

/**************************************************
 * STYLES FOR POPUPS
 **************************************************/

.pgg-popup {
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 100;
    border: thin solid black;
    width: 250px;
    padding: 4px;
}
.hidden {
    visibility: hidden;
}
.pgg-popup-head {
    font-weight: bold;
    color: white;
    background-color: #002255;
    max-width: 300px;
    padding: 4px;
    padding-right: 16px;
    margin-bottom: 8px;
    position: relative;
    cursor: move;
    min-height:16px;
}
.pgg-popup-head .close-button {
    position: absolute;
    right: 4px;
    top: 2px;
    cursor: pointer;
}
.pgg-popup-body {
}

.pgg-legend-wrapper {
    background-color: #eee;
}

.pgg-legend-wrapper h3 {
    text-align: center;
    font-weight: bold;
}
.pgg-legend-wrapper .section {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
    padding-top: 10px;
}
.pgg-legend-wrapper .swatch {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-top: 8px;
}
.pgg-legend-wrapper .swatch > * { 
    margin-left: 6px;
}
.pgg-legend-wrapper .caption {
    max-width: 185px;
    white-space: normal;
}
.pgg-legend-wrapper .m1 {
    margin-left: 30px;
}
.pgg-legend-wrapper .m2 {
    margin-left: 60px;
}

.pgg-cell-popup-wrapper {
    background-color: #d6e5ff;
}

.pgg-cell-popup-wrapper .cell-data-table {
    background-color: white;
    width: 100%;
}

.cell-data-table td,
.cell-data-table th {
    text-align: center;
    padding: 6px;
}

.pgg-cell-popup-wrapper .cell-data-table thead th {
    background-color: #d6e5ff;
}

.pgg-cell-popup-wrapper .view-results-button button {
    width: 100%;
    padding: 6px;
    margin-top: 6px;
}