/* Inventory adjustment form: live tank card, amount chips and the clear before/after card */

.overlay .modal.inventory-form-modal.adjust-entry-modal {
    --form-tone: #e8820a;
    --form-tone-2: #c96a00;
    --adjust-a: #f2a43a;
    --adjust-b: #e8820a;
    width: min(1000px, calc(100vw - 56px));
    max-width: none;
    max-height: none;
    overflow: visible;
    padding: 14px;
}

.overlay .modal.inventory-form-modal.adjust-entry-modal[data-fuel="diesel"] {
    --form-tone: #1f9d4d;
    --form-tone-2: #17803d;
    --adjust-a: #6fd68a;
    --adjust-b: #1f9d4d;
}

.overlay .modal.inventory-form-modal.adjust-entry-modal[data-fuel="cng"] {
    --form-tone: #2f78e0;
    --form-tone-2: #2763bd;
    --adjust-a: #6db8ff;
    --adjust-b: #2f78e0;
}

/* ---------- header ---------- */
.overlay .modal.inventory-form-modal.adjust-entry-modal .inventory-modal-head {
    margin: 0 0 5px;
}

.overlay .modal.inventory-form-modal.adjust-entry-modal .inventory-form-body.refill-form-flow {
    margin-top: 5px;
}

.overlay .adjust-entry-modal .inventory-modal-head-icon {
    position: relative;
    color: #fff;
    background: linear-gradient(145deg, #f6c05a, #d9822b);
    box-shadow: 0 8px 18px rgba(217,130,43,.38);
}

.overlay .adjust-entry-modal .inventory-modal-head-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid #d9822b;
    animation: adjRing 2.6s ease-out infinite;
    pointer-events: none;
}

.overlay .adjust-entry-modal .inventory-modal-head-icon i {
    animation: adjSlide 3s ease-in-out infinite;
}

.overlay .adjust-entry-modal .inventory-modal-kicker {
    color: #d9822b;
}

/* ---------- body: panels never clip a dropdown ---------- */
.overlay .adjust-entry-modal .inventory-form-body.refill-form-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    padding: 0;
    overflow: visible;
}

.overlay .adjust-entry-modal .inventory-form-body.refill-form-flow > .inventory-form-panel {
    min-width: 0;
}

.overlay .adjust-entry-modal .inventory-form-body.refill-form-flow > .is-source {
    grid-column: 1 / -1;
}

.overlay .adjust-entry-modal .inventory-form-panel {
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.overlay .adjust-entry-modal .inventory-form-panel.has-open-select {
    z-index: 90;
}

.overlay .adjust-entry-modal .adjust-panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 800;
    color: var(--text1);
}

.overlay .adjust-entry-modal .adjust-panel-head > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    font-size: 17px;
    color: #fff;
    background: linear-gradient(145deg, var(--adjust-a), var(--adjust-b));
    box-shadow: 0 6px 14px color-mix(in srgb, var(--adjust-b) 32%, transparent);
    transition: background .3s ease;
}

.overlay .adjust-entry-modal .is-amount .adjust-panel-head > span {
    background: linear-gradient(145deg, #5fd0a0, #1f9d6a);
    box-shadow: 0 6px 14px rgba(31,157,106,.3);
}

.overlay .adjust-entry-modal .is-source .adjust-panel-head > span {
    background: linear-gradient(145deg, #7d8df6, #5461df);
    box-shadow: 0 6px 14px rgba(84,97,223,.3);
}

/* ---------- live tank card ---------- */
.overlay .adjust-entry-modal .adjust-live {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--form-tone) 22%, var(--theme-stroke, rgba(255,255,255,.7)));
    border-radius: 16px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--form-tone) 10%, transparent), transparent 75%) !important;
}

.adjust-live .tank-vessel {
    flex: none;
    width: 100%;
    max-width: 330px;
    margin: 0 auto;
}

.adjust-live-text {
    flex: 1;
    min-width: 0;
}

.adjust-live-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text2);
}

.adjust-live-pct {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--form-tone);
}

.adjust-live-pct small {
    margin-inline-start: 2px;
    font-size: 14px;
}

.adjust-bar {
    position: relative;
    height: 10px;
    margin: 8px 0;
    border-radius: 6px;
    background: color-mix(in srgb, var(--text2) 20%, transparent);
    overflow: hidden;
}

.adjust-bar i {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    width: 0;
    border-radius: 6px;
    transition: width .6s cubic-bezier(.2,.8,.2,1);
}

.adjust-bar .cur {
    z-index: 2;
    background: linear-gradient(90deg, var(--adjust-a), var(--adjust-b));
}

.adjust-bar .add {
    z-index: 1;
    background: repeating-linear-gradient(115deg, #38b27a 0 6px, #6fd7aa 6px 12px);
    background-size: 24px 100%;
    animation: adjStripe 1.2s linear infinite;
}

.adjust-bar .add.is-over {
    background: repeating-linear-gradient(115deg, #dc424d 0 6px, #f48a75 6px 12px);
    background-size: 24px 100%;
}

.adjust-live-sub {
    font-size: 12px;
    color: var(--text2);
}

.adjust-live-sub b {
    color: var(--text1);
}

/* ---------- amount ---------- */
.overlay .adjust-entry-modal .adjust-unit {
    position: absolute;
    z-index: 2;
    top: 50%;
    inset-inline-end: 14px;
    transform: translateY(-50%);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text2);
    pointer-events: none;
}

.overlay .adjust-entry-modal .is-amount .inventory-input-wrap {
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
}

.overlay .adjust-entry-modal .is-amount .inventory-input-wrap input.amt-input {
    height: 48px;
    min-height: 48px;
    padding-block: 0;
    line-height: 48px;
}

.overlay .adjust-entry-modal .is-amount .inventory-input-wrap input {
    padding-inline-end: 56px;
    font-size: 15px;
    font-weight: 700;
}

.overlay .adjust-entry-modal .is-amount .inventory-input-wrap:focus-within > i {
    background: linear-gradient(145deg, #5fd0a0, #1f9d6a);
    box-shadow: 0 5px 13px rgba(31,157,106,.3);
}

.overlay .adjust-entry-modal .is-amount .inventory-input-wrap:focus-within input {
    border-color: #1f9d6a;
    box-shadow: 0 0 0 4px rgba(31,157,106,.18);
}

.overlay .adjust-entry-modal .is-source .inventory-input-wrap:focus-within > i {
    background: linear-gradient(145deg, #7d8df6, #5461df);
    box-shadow: 0 5px 13px rgba(84,97,223,.3);
}

.overlay .adjust-entry-modal .is-source .inventory-input-wrap:focus-within input {
    border-color: #5461df;
    box-shadow: 0 0 0 4px rgba(84,97,223,.18);
}

.overlay .adjust-entry-modal .quick-amounts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.overlay .adjust-entry-modal .quick-btn {
    min-height: 40px;
    border-radius: 12px;
    font-weight: 800;
    transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}

.overlay .adjust-entry-modal .quick-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: #1f9d6a;
    color: #1f9d6a;
}

.overlay .adjust-entry-modal .quick-btn.is-on {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, #5fd0a0, #1f9d6a);
    box-shadow: 0 6px 14px rgba(31,157,106,.3);
}

.overlay .adjust-entry-modal .quick-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
    transform: none;
}

.overlay .adjust-entry-modal .adjust-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 0;
    padding: 9px 12px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--text2) 8%, transparent);
    font-size: 12px;
    color: var(--text2);
}

.overlay .adjust-entry-modal .adjust-hint i {
    font-size: 16px;
    color: #5461df;
}

/* ---------- before / after ---------- */
.overlay .adjust-entry-modal .adjust-after {
    display: flex;
    flex: 1;
    margin: 0;
}

.adjust-after-inner {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    min-height: 90px;
    border: 1px solid color-mix(in srgb, #1f9d6a 35%, transparent);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(31,157,106,.12), transparent 75%);
    transition: border-color .3s ease, background .3s ease;
}

.adjust-after-idle {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text2);
    text-align: center;
}

.adjust-after-idle i {
    font-size: 22px;
    color: #5461df;
    animation: adjBob 2s ease-in-out infinite;
}

.adjust-after.is-idle .adjust-after-inner {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--text2) 35%, transparent);
    background: transparent;
}

.adjust-after.is-idle .adjust-after-idle {
    display: flex;
}

.adjust-after.is-idle :is(.adjust-after-flow, .adjust-after-msg, .adjust-after-over) {
    display: none;
}

.adjust-after.is-low .adjust-after-inner {
    border-color: rgba(230,162,58,.5);
    background: linear-gradient(135deg, rgba(240,170,60,.14), transparent 75%);
}

.adjust-after.is-over .adjust-after-inner {
    border-color: rgba(220,66,77,.45);
    background: linear-gradient(135deg, rgba(220,66,77,.12), transparent 75%);
}

.adjust-after-flow {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px 0;
    font-size: 20px;
    font-weight: 800;
    color: var(--text1);
}

.adjust-after-flow i {
    font-size: 20px;
    color: #1f9d6a;
    animation: adjNudge 1.6s ease-in-out infinite;
}

.adjust-after.is-low .adjust-after-flow i { color: #d9822b; }
.adjust-after.is-over .adjust-after-flow i { color: #dc424d; }

.adjust-after-msg {
    padding: 4px 14px 12px;
    font-size: 12px;
    color: var(--text2);
}

.adjust-after-msg b {
    color: var(--text1);
}

.adjust-after-over {
    display: none;
    padding: 0 14px 12px;
    font-size: 12px;
    font-weight: 800;
    color: #dc424d;
}

.adjust-after.is-over .adjust-after-over {
    display: block;
}

/* ---------- dropdown menu: tank rows have a bar ---------- */
.overlay .adjust-entry-modal .inventory-select-trigger .inventory-select-value {
    display: grid;
    gap: 1px;
    text-align: start;
}

.overlay .adjust-entry-modal .inventory-select-trigger .inventory-select-value small {
    font-size: 11px;
    font-weight: 500;
    color: var(--text2);
}

.overlay .adjust-entry-modal .inventory-select-option {
    grid-template-columns: 34px minmax(0, 1fr) auto 24px;
}

.inventory-select-option-bar {
    width: 44px;
    height: 5px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--text2) 22%, transparent);
    overflow: hidden;
}

.inventory-select-option-bar i {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--form-tone), var(--form-tone-2));
}

.inventory-select-option-bar[data-fuel="petrol"] i { background: linear-gradient(90deg, #f2a43a, #e8820a); }
.inventory-select-option-bar[data-fuel="diesel"] i { background: linear-gradient(90deg, #6fd68a, #1f9d4d); }
.inventory-select-option-bar[data-fuel="cng"] i { background: linear-gradient(90deg, #6db8ff, #2f78e0); }

/* ---------- footer ---------- */
.overlay .adjust-entry-modal .modal-actions {
    margin: 12px 0 0;
}

.overlay .adjust-entry-modal .modal-actions .btn-primary {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #f0a548, #d9822b);
    box-shadow: 0 10px 22px rgba(217,130,43,.35);
}

.overlay .adjust-entry-modal .modal-actions .btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.38) 50%, transparent 65%);
    transform: translateX(120%);
    animation: adjShine 4.5s ease-in-out 1.4s infinite;
    pointer-events: none;
}

.overlay .adjust-entry-modal .modal-actions .btn-ghost:hover i {
    animation: adjSpin .5s;
}

.overlay .adjust-entry-modal .modal-actions .btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

@media (max-width: 820px) {
    .overlay .modal.inventory-form-modal.adjust-entry-modal {
        width: min(640px, calc(100vw - 24px));
    }
    .overlay .adjust-entry-modal .inventory-form-body.refill-form-flow {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .overlay .adjust-entry-modal .quick-amounts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@keyframes adjRing { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.4); opacity: 0; } }
@keyframes adjSlide { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-3px); } }
@keyframes adjStripe { to { background-position: 24px 0; } }
@keyframes adjNudge { 50% { transform: translateX(-4px); } }
@keyframes adjShine { 0%, 55% { transform: translateX(120%); } 80%, 100% { transform: translateX(-120%); } }
@keyframes adjBob { 50% { transform: translateY(-3px); } }
@keyframes adjSpin { from { transform: rotate(-180deg); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .overlay .adjust-entry-modal .inventory-modal-head-icon::after,
    .overlay .adjust-entry-modal .inventory-modal-head-icon i,
    .adjust-bar .add,
    .adjust-after-flow i,
    .adjust-after-idle i,
    .overlay .adjust-entry-modal .modal-actions .btn-primary::after {
        animation: none !important;
    }
    .adjust-bar i {
        transition: none;
    }
    .overlay :is(.tank-entry-modal, .adjust-entry-modal) .inventory-select-option {
        opacity: 1;
        transform: none;
        animation: none !important;
    }
}