/* SINO WMS 입고 교육 — PDA/창고 UI 스타일 (mockup/inbound_pda.html 이식) */

.root {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    padding: 24px;
    background-color: rgb(31, 36, 48);
    flex-grow: 1;
}

.h1 {
    font-size: 18px;
    color: rgb(230, 233, 239);
    -unity-font-style: bold;
    margin-bottom: 4px;
}

.sub {
    color: rgb(139, 147, 167);
    font-size: 13px;
    margin-bottom: 16px;
}

/* ---- 탑다운 창고 ---- */
.warehouse {
    background-color: rgb(39, 45, 58);
    border-radius: 12px;
    padding: 18px;
    margin-right: 24px;
    margin-bottom: 24px;
}

.grid {
    flex-direction: column;
    margin-top: 12px;
}

.grid-row {
    flex-direction: row;
}

.loc {
    width: 64px;
    height: 56px;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    margin: 4px;
    border-width: 2px;
    border-color: rgba(0, 0, 0, 0);
}

.loc-code {
    font-size: 11px;
    color: rgb(230, 233, 239);
}

.loc-cap {
    font-size: 9px;
    color: rgb(170, 178, 197);
}

.ambient { background-color: rgb(58, 66, 86); }
.chilled { background-color: rgb(30, 74, 95); }
.frozen  { background-color: rgb(30, 58, 111); }

.loc--selectable {
    border-color: rgb(110, 168, 254);
}

.loc--filled {
    opacity: 0.5;
}

.legend {
    flex-direction: row;
    margin-top: 12px;
}

.legend-item {
    flex-direction: row;
    align-items: center;
    margin-right: 12px;
}

.legend-item Label {
    font-size: 11px;
    color: rgb(139, 147, 167);
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 4px;
}

.dot-ambient { background-color: rgb(58, 66, 86); }
.dot-chilled { background-color: rgb(30, 74, 95); }
.dot-frozen  { background-color: rgb(30, 58, 111); }

/* ---- PDA ---- */
.pda {
    width: 300px;
    background-color: rgb(17, 21, 28);
    border-radius: 28px;
    padding: 16px;
    border-width: 8px;
    border-color: rgb(10, 13, 18);
}

.pda-screen {
    background-color: rgb(244, 246, 251);
    border-radius: 14px;
    padding: 16px;
    min-height: 460px;
}

.step-bar {
    flex-direction: row;
    margin-bottom: 14px;
}

.step-seg {
    flex-grow: 1;
    height: 4px;
    border-radius: 2px;
    margin-right: 4px;
    background-color: rgb(211, 217, 230);
}

.step-seg--on {
    background-color: rgb(43, 111, 255);
}

.step-title {
    font-size: 13px;
    color: rgb(43, 111, 255);
    -unity-font-style: bold;
    margin-bottom: 4px;
}

.step-head {
    font-size: 17px;
    color: rgb(31, 36, 48);
    -unity-font-style: bold;
    margin-bottom: 12px;
    white-space: normal;
}

.line-card {
    background-color: rgb(255, 255, 255);
    border-width: 1px;
    border-color: rgb(227, 232, 242);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
}

.line-card .name {
    -unity-font-style: bold;
    font-size: 14px;
    color: rgb(31, 36, 48);
    white-space: normal;
}

.line-card .meta {
    font-size: 12px;
    color: rgb(107, 114, 128);
    margin-top: 2px;
    white-space: normal;
}

.row {
    flex-direction: row;
    align-items: center;
}

.badge {
    font-size: 10px;
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-radius: 6px;
    margin-left: 6px;
}

.b-ambient { background-color: rgb(231, 236, 251); color: rgb(43, 78, 255); }
.b-chilled { background-color: rgb(223, 241, 246); color: rgb(12, 116, 145); }
.b-frozen  { background-color: rgb(223, 235, 255); color: rgb(30, 58, 111); }

Button {
    padding-top: 12px;
    padding-bottom: 12px;
    border-width: 0;
    border-radius: 10px;
    background-color: rgb(43, 111, 255);
    color: rgb(255, 255, 255);
    font-size: 14px;
    -unity-font-style: bold;
    margin-top: 6px;
    margin-left: 0;
    margin-right: 0;
}

Button.ghost {
    background-color: rgb(238, 241, 248);
    color: rgb(43, 111, 255);
}

TextField, IntegerField {
    margin-top: 6px;
    margin-bottom: 6px;
}

.feedback {
    font-size: 12px;
    padding: 8px 10px;
    border-radius: 8px;
    margin-top: 10px;
    white-space: normal;
}

.fb-ok { background-color: rgb(227, 247, 234); color: rgb(26, 127, 67); }
.fb-warn { background-color: rgb(253, 236, 236); color: rgb(192, 57, 43); }

.result-score {
    font-size: 42px;
    -unity-font-style: bold;
    -unity-text-align: middle-center;
    color: rgb(43, 111, 255);
    margin-top: 10px;
    margin-bottom: 10px;
}

.err-item {
    font-size: 12px;
    color: rgb(192, 57, 43);
    padding-top: 6px;
    padding-bottom: 6px;
    white-space: normal;
}