/* file: data/static/games/qpig/farm.css */

.qpig-garden {
    font-family: monospace;
    padding: 8px;
    margin: 0 auto;
    display: inline-block;
    width: 600px;
    border: 2px solid #2b7a2b;
    background: #b2f0b2;
}

.qpig-garden.tab-garden { background: #b2f0b2; border-color: #2b7a2b; }
.qpig-garden.tab-market { background: #ffe0b2; border-color: #cc6600; }
.qpig-garden.tab-lab { background: #e0b2ff; border-color: purple; }
.qpig-garden.tab-travel { background: #b2d0ff; border-color: blue; }
.qpig-garden.tab-settings { background: #eee; border-color: grey; }

.qpig-garden .qpig-buttons {
    display: flex;
    gap: 8px;
    margin: 1em 0;
}

.qpig-garden button {
    padding: 6px 12px;
    border: 1px solid #333;
    background: #d6f5d6;
    cursor: pointer;
    color: #000;
}

.qpig-garden button:disabled {
    color: grey;
}

.qpig-garden #qpig-canvas {
    display: block;
    margin: 8px auto;
    image-rendering: pixelated;
    border: 1px solid #333;
}

.qpig-garden .qpig-warning {

    margin-top: 1em;
    color: #a00;
}

.qpig-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}

.qpig-tab {
    flex: 1;
    padding: 4px;
    border: 1px solid #333;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    box-sizing: border-box;
}
.qpig-tab.active { filter: brightness(1.2); }

.qpig-tab[data-tab='garden'] { background: #2b7a2b; }
.qpig-tab[data-tab='market'] { background: #cc6600; }
.qpig-tab[data-tab='lab'] { background: purple; }
.qpig-tab[data-tab='travel'] { background: blue; }
.qpig-tab[data-tab='settings'] { background: #666; }

.qpig-panel { display: none; padding: 4px; }
.qpig-panel.active { display: block; }

#qpig-panel-garden { background: #b2f0b2; }
#qpig-panel-market { background: #ffe0b2; }
#qpig-panel-lab { background: #e0b2ff; }
#qpig-panel-travel { background: #b2d0ff; }
#qpig-panel-settings { background: #ccc; }

.qpig-top {
    font-weight: bold;
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
    color: #000;
}

.qpig-pigs { margin-top: 4px; }

.qpig-pig-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: #d6f5d6;
    border: 1px solid #333;
    padding: 4px;
    margin-bottom: 4px;
    box-sizing: border-box;
}

.qpig-pig-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.qpig-pig-name { font-weight: bold; }
.qpig-pig-stats { font-size: 0.9em; }
.qpig-photo {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 4px;
    margin-left: 8px;
}

.lab-ops {
    margin-top: 4px;
    width: 100%;
    border-collapse: collapse;
}
.lab-ops th, .lab-ops td {
    border: 1px solid #333;
    padding: 4px;
}
#lab-progress {
    width: 100%;
    margin-top: 4px;
}
