/* ============================== GLOBAL ============================== */
:root {
    --bg: #171714;
    --panel: #242420;
    --panel-light: #2d2d28;
    --slot: #292925;
    --slot-hover: #393934;
    --border-light: #55554e;
    --border-dark: #11110f;
    --text: #d8d8cf;
    --text-muted: #CCC;
    --orange: #d88a32;
    --orange-light: #f0ad52;
    --green: #69a84f;
    --red: #b94c42;
    --blue: #5c91b9;
}

body {
    margin: 0;
    background:
        radial-gradient(
            circle at 50% 0%,
            #292923 0%,
            #171714 55%
        );
    color: var(--text);
    font-family: "Dejavu Sans";
    min-height: 100vh;
    font-size: 13px;
    min-width: 1320px;
}

.icon-factorio {
    width: 45px;
}

.search {
    width: 100%;
    background: linear-gradient( #45453e, #292925 );
    color: white;
    border: 1px solid #999;
}

.btn-technologies {
    background: linear-gradient( #45453e, #292925 );
    color: white;
    border: 1px solid #999;
}

/* ============================== TOP BAR ============================== */

.topbar {
    height: 64px;
    background:
        linear-gradient(
            #35352f,
            #242420
        );
    border-bottom: 2px solid #10100e;
    box-shadow:
        inset 0 1px #595951,
        0 3px 10px rgba(0,0,0,.5);
}

.factorio-logo img {
    width: 100px;
}
.factorio-logo span {
    font-weight: bold;
    font-size: 1.4em;
}

.top-stat {
    height: 56px;
    min-width: 200px;
    padding: 5px 12px 5px 0;
    background: #1d1d1a;
    border: 1px solid #111;
    border-top-color: #4b4b45;
    box-shadow:
    inset 0 0 8px rgba(0,0,0,.5);
}

.top-stat {
    display: flex;
}

.top-stat .value {
    text-align: center;
    line-height: 45px;
    display: block;
    width: 100%;
}
.top-stat .icon img {
    width: 45px;
}

.top-stat .value {
    font-size: 15px;
    font-weight: bold;
}


/* ============================== MAIN LAYOUT ============================== */
.game-container {
    min-height: calc(100vh - 58px);
    padding: 10px;
    display: grid;
    grid-template-columns: 300px 5px minmax(400px, 1fr) 5px 250px;
    grid-template-rows: minmax(0, 1fr) 190px;
    gap: 1px;
}

.resize-handle {
    cursor: col-resize;
    position: relative;
    z-index: 10;
}
.resize-handle:hover {
    background-color: #555;
}



.panel {
    background:
        linear-gradient(
            135deg,
            #2d2d29,
            #22221f
        );
    border: 1px solid var(--border-dark);
    box-shadow:
        inset 1px 1px 0 rgba(255,255,255,.10),
        inset -1px -1px 0 rgba(0,0,0,.7),
        0 2px 5px rgba(0,0,0,.45);
    overflow: hidden;
}

.panel-header {
    display: grid;
    grid-template-columns: 40px minmax(20px, 1fr) 30px;
    align-items: center;
    padding: 0px 5px;
    background:
        linear-gradient(
            #3b3b35,
            #292925
        );
    border-bottom: 1px solid #111;
    box-shadow:
        inset 0 1px rgba(255,255,255,.12);
}

.panel-header .icon img {
    width: 45px;
}
.panel-header .value {
    line-height: 45px;
    padding-left: 10px;
}


/* ============================== INVENTORY ============================== */
.inventory {
    background: linear-gradient( 135deg, #2d2d29, #22221f );
    border: 1px solid var(--border-dark);
    box-shadow: inset 1px 1px 0 rgb(255 255 255 / 10%), inset -1px -1px 0 rgb(0 0 0 / 70%), 0 2px 5px rgb(0 0 0 / 45%);
}

.inventory .btn-manage-inventory {
    width: 100%;
    background: linear-gradient( #45453e, #292925 );
    color: white;
    border: 1px solid #999;
}

.inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
    gap: 2px;
}

.inventory-grid .inventory-slot {
    aspect-ratio: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(
            135deg,
            #3a3a35,
            #292925 55%,
            #20201d
        );
    border: 1px solid #111;
    box-shadow:
        inset 1px 1px 0 #55554d,
        inset -1px -1px 0 #161614;
}

.inventory-grid .inventory-slot:hover {
    background: var(--slot-hover);

    box-shadow:
        inset 1px 1px 0 #77776d,
        inset -1px -1px 0 #161614,
        0 0 5px rgba(220,150,60,.3);

    cursor: pointer;
}

.inventory-grid .item-icon {
    font-size: 28px;
    filter: drop-shadow(2px 2px 1px rgba(0,0,0,.8));
}

.inventory-grid .item-icon img{
    width: 35px;
}

.inventory-grid .item-count {
    position: absolute;
    right: 3px;
    bottom: 1px;
    color: white;
    font-size: 13px;
    font-weight: bold;
    text-shadow:
        2px 2px 0 #000,
        -2px -2px 0 #000;
}


/* ============================== RESSOURCES ============================== */
.ressources {
    background: radial-gradient( circle at 20% 30%, rgba(70,75,55,.35), transparent 20% ), radial-gradient( circle at 75% 70%, rgba(80,60,40,.3), transparent 25% ), #1b1d19;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.ressources::before {
    content: "";
    position: absolute;
    margin-top: 45px;
    inset: 0;
    opacity: .18;
    background-image: linear-gradient(#697060 1px, transparent 1px), linear-gradient(90deg, #697060 1px, transparent 1px);
    background-size: 32px 32px;
}

.ressources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 2px;
}

.ressources-grid .inventory-slot {
    aspect-ratio: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(
            135deg,
            #3a3a35,
            #292925 55%,
            #20201d
        );
    border: 1px solid #111;
    box-shadow:
        inset 1px 1px 0 #55554d,
        inset -1px -1px 0 #161614;
}

.ressources-grid .inventory-slot:hover {
    background: var(--slot-hover);

    box-shadow:
        inset 1px 1px 0 #77776d,
        inset -1px -1px 0 #161614,
        0 0 5px rgba(220,150,60,.3);

    cursor: pointer;
}

.ressources-grid .inventory-slot .progress-container {
    padding: 0 10px;
}
.ressources-grid .inventory-slot .progress {
    height: 8px;
}

.ressources-grid .inventory-slot .btn-lock {
    width: 100px;
    background: linear-gradient( #45453e, #292925 );
    color: white;
    border: 1px solid #999;
}

.ressources-grid .item-icon {
    font-size: 28px;
    filter: drop-shadow(2px 2px 1px rgba(0,0,0,.8));
}

.ressources-grid .item-icon img{
    margin-top: 20px;
    width: 65px;
}

.ressources-grid .title {
    position: absolute;
    width: 100%;
    text-align: center;
    left: 3px;
    top: 2px;
    color: white;
    font-size: 16px;
    font-weight: bold;
    text-shadow:
        2px 2px 0 #000,
        -2px -2px 0 #000;
}

.ressources-grid .number {
    position: absolute;
    padding-left: 4px;
    left: 3px;
    bottom: 2px;
    color: white;
    font-size: 16px;
    font-weight: bold;
    text-shadow:
        2px 2px 0 #000,
        -2px -2px 0 #000;
}

.ressources-grid .distance {
    position: absolute;
    padding-right: 4px;
    right: 3px;
    bottom: 2px;
    color: white;
    font-size: 16px;
    font-weight: bold;
    text-shadow:
        2px 2px 0 #000,
        -2px -2px 0 #000;
}


/* ============================== PRODUCTION ============================== */
.production {
    background: linear-gradient( 135deg, #2d2d29, #22221f );
    border: 1px solid var(--border-dark);
    box-shadow: inset 1px 1px 0 rgb(255 255 255 / 10%), inset -1px -1px 0 rgb(0 0 0 / 70%), 0 2px 5px rgb(0 0 0 / 45%);
}

.production .btn-add {
    width: 100%;
    background: linear-gradient( #45453e, #292925 );
    color: white;
    border: 1px solid #999;
}

.production-grid {
    padding: 5px 5px 0 5px ;
}

.production-item {
    margin-bottom: 3px;
    padding: 2px;
    background: #1c1c19;
    border: 1px solid #444;
    box-shadow:
        inset 1px 1px rgba(255,255,255,.05);
    display: grid;
    grid-template-columns: 40px 50px minmax(20px, 1fr) 60px;
    gap: 2px;
    min-height: 40px;
}

.production-item .electricity img {
    width: 20px;
}

.production-item .electricity {
    text-align: center;
    padding-top: 10px;
}

.production-item .btn-manage {
    width: 35px;
    height: 100%;
}

.production-item img {
    width: 35px;
}

.production-item button {
    width: 100px;
    background: linear-gradient( #45453e, #292925 );
    color: white;
}

.production-item .icon {
    margin-top: 10px;
}

.production-item .title {
    display: block;
    width: 100%;
    font-weight: bold;
    text-align: center;
}

.production-machine {
    width: 100%;
    font-weight: bold;
    text-align: center;
}