@import "/UI/Core/Styles/Typography.scss";
@import "/UI/Core/Styles/Colors.scss";

.screen {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: rgb(15, 16, 16);
    color: rgb(10, 16, 24);
    font-family: Tahoma;
    overflow: hidden;
}

.safe-area {
    position: absolute;
    left: 0.3%; // Imperative for the sizing
    width: 14.2%; // Imperative for the sizing
    top: 1px;
    bottom: 2px;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
}

.header,
.section,
.title-row,
.row,
.target-name,
.target-meta,
.hint,
.feedback,
.key,
.value {
    min-width: 0;
    max-width: 100%;
}

.header,
.section,
.title-row,
.row {
    width: 100%;
}

.bar {
    width: 68%;
}

.header {
    position: relative;
    flex-direction: column;
    gap: 1px;
    flex-shrink: 0;
    padding-right: 42px;
}

.title-row {
    align-items: center;
    justify-content: flex-start;
    gap: 1px;
}

.title {
    font-size: 11px;
    font-weight: 900;
    color: $neutral-blue;
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
}

.status {
    position: absolute;
    // top: 0;
    right: 0;
    min-width: 26px;
    padding: 3px 3px;
    border-radius: 2px;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    color: white;
    background-color: rgb(80, 96, 112);
    flex-shrink: 0;
}

.status.ready {
    background-color: rgb(24, 146, 72);
}

.status.stored {
    background-color: rgb(24, 110, 180);
}

.status.empty,
.status.offline {
    background-color: rgb(114, 70, 42);
}

.status.charging,
.status.idle {
    background-color: rgb(92, 104, 120);
}

.section {
    flex-direction: column;
    gap: 2px;
    background-color: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(24, 40, 56, 0.18);
    padding: 2px;
    flex-shrink: 0;
    flex-grow: 0;
    overflow: hidden;
}

.section-label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    color: rgba(12, 24, 40, 0.55);
}

.target-card {
    height: 62px;
    max-height: 62px;
}

.target-name {
    font-size: 12px;
    font-weight: 800;
    color: rgb(8, 22, 40);
    overflow: hidden;
}

.target-meta,
.hint,
.feedback {
    font-size: 10px;
    font-weight: 700;
    white-space: normal;
    color: rgb(24, 34, 46);
    overflow: hidden;
}

.row {
    align-items: center;
}

.between {
    justify-content: space-between;
    gap: 2px;
}

.key,
.value {
    font-size: 11px;
    font-weight: 800;
    color: rgb(18, 28, 42);
}

.value {
    text-align: right;
}

.stat-list {
    gap: 2px;
    height: 34px;
}

.charge-card {
    height: 43px;
}

.pair {
    min-height: 13px;
}

.bar {
    height: 10px;
    border: 1px solid rgba(12, 18, 28, 0.35);
    background-color: rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
}

.fill {
    height: 100%;
    background-color: rgb(0, 180, 80);
}

.footer-card {
    height: 108px;
    max-height: 108px;
}

.feedback {
    margin-top: 2px;
    padding-top: 4px;
    border-top: 1px solid rgba(12, 18, 28, 0.12);
}

.feedback.success {
    color: rgb(18, 116, 58);
}

.feedback.warning {
    color: rgb(132, 72, 26);
}

.dna-row {
    margin-top: 2px;
}

.dna-value,
.charge-detail,
.sample-detail {
    font-size: 10px;
    font-weight: 700;
    color: rgba(18, 28, 42, 0.9);
    white-space: normal;
    overflow: hidden;
}

.dna-bar {
    margin-top: 1px;
}

.dna-fill {
    background-color: rgb(255, 214, 74);
}

.control-list {
    flex-direction: column;
    gap: 3px;
    width: 100%;
}

.control-row {
    align-items: center;
    gap: 4px;
    width: 100%;
    min-width: 0;

    InputHint {
        flex-shrink: 0;

        img {
            width: 20px;
            height: 20px;
        }
    }

    &.disabled {
        opacity: 0.4;

        InputHint img {
            opacity: 0.55;
        }

        .control-text {
            color: rgba(24, 34, 46, 0.55);
        }
    }
}

.control-key {
    min-width: 22px;
    padding: 1px 3px;
    border-radius: 2px;
    background-color: rgba(12, 18, 28, 0.16);
    color: rgb(12, 24, 40);
    font-size: 10px;
    font-weight: 900;
    text-align: center;
    flex-shrink: 0;
}

.control-text {
    font-size: 10px;
    font-weight: 700;
    color: rgb(24, 34, 46);
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
    flex-grow: 1;
}

.split-row {
    justify-content: space-between;
    align-items: flex-start;
    gap: 2px;
}

.control-cluster {
    align-items: center;
    gap: 4px;
    min-width: 0;

    InputHint {
        flex-shrink: 0;

        img {
            width: 20px;
            height: 20px;
        }
    }
}

.primary-cluster {
    flex-grow: 1;
    min-width: 0;
    background-color: rgba(121, 195, 255, 0.18);
    border-radius: 2px;
    padding: 2px 3px;

    .control-text {
        font-size: 12px;
    }
}

.secondary-cluster {
    flex-shrink: 0;
}

.sample-row {
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    width: 100%;
}

.sample-chip {
    font-size: 11px;
    font-weight: 700;
    color: rgb(18, 28, 42);
    flex-shrink: 0;
}

.sample-chip.selected {
    font-size: 11px;
    font-weight: 900;
    color: rgb(8, 22, 40);
    background-color: rgb(255, 214, 74);
    padding: 0px 4px;
    border-radius: 2px;
}

.sample-empty {
    font-size: 10px;
    font-weight: 700;
    color: rgba(12, 24, 40, 0.55);
}

.idle-prompt {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 4px 2px;
    gap: 4px;
}

.idle-prompt-title {
    font-size: 13px;
    font-weight: 900;
    color: rgb(8, 22, 40);
    letter-spacing: 0.6px;
}

.idle-prompt-sub {
    font-size: 10px;
    font-weight: 700;
    color: rgba(18, 28, 42, 0.85);
    text-align: left;
}