/* Floating calculator (wwwroot/calculator.js). Navy header like the sidebar, green accent like PillButton. */
.calc-panel {
    position: fixed;
    z-index: 2040; /* under the settings popup (2050) and tooltips (3000) */
    width: 18.5rem;
    border-radius: 14px;
    overflow: hidden;
    background: #fcfcfc;
    border: 1px solid #dcdcdc;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
    font-family: inherit;
    color: #1f1f31;
    animation: calc-pop 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}

.calc-panel[hidden] { display: none; }
.calc-panel.dragging { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28); opacity: 0.96; }

@keyframes calc-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }

.calc-head {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.45rem 0.5rem 0.45rem 0.9rem;
    background: #1f1f31;
    color: #fefefe;
    cursor: grab;
    touch-action: none;
}

.calc-panel.dragging .calc-head { cursor: grabbing; }

.calc-title { flex: 1; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.01em; }

.calc-head-btn {
    display: flex;
    padding: 0.3rem;
    border: none;
    border-radius: 6px;
    background: none;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
}

.calc-head-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

.calc-panel svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.calc-display { padding: 0.75rem 0.85rem 0.4rem; }

.calc-input {
    width: 100%;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    padding: 0.45rem 0.6rem;
    background: #fff;
    font: inherit;
    font-size: 1.15rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: #1f1f31;
    user-select: text;
}

.calc-input:focus { outline: none; border-color: #7dbb80; box-shadow: 0 0 0 3px rgba(125, 187, 128, 0.25); }

.calc-preview {
    min-height: 1.5rem;
    padding: 0.2rem 0.15rem 0;
    text-align: right;
    font-size: 1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #5f5f66;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calc-preview.error { color: #e50000; font-weight: 400; font-size: 0.8rem; }

.calc-pad {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.35rem;
    padding: 0.3rem 0.85rem;
}

.calc-key {
    height: 2.4rem;
    border: none;
    border-radius: 8px;
    background: #f4f4f2;
    font: inherit;
    font-size: 1rem;
    color: #1f1f31;
    cursor: pointer;
    transition: background-color 0.12s ease, transform 0.08s ease;
}

.calc-key:hover { background: #ececea; }
.calc-key:active { transform: scale(0.96); }
.calc-key:disabled { opacity: 0.45; cursor: default; transform: none; }
.calc-key.fn { color: #5f5f66; font-size: 0.85rem; }
.calc-key.op { background: #e6efe6; font-size: 1.1rem; }
.calc-key.op:hover { background: #d8e8d9; }
.calc-key.eq { background: #7dbb80; color: #1f2a20; font-size: 1.15rem; }
.calc-key.eq:hover { background: #6aad6e; }

.calc-extra {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.35rem;
    padding: 0.35rem 0.85rem 0.85rem;
}

.calc-key.vat, .calc-key.act { height: 2.1rem; font-size: 0.82rem; }
.calc-key.vat { background: #fff; border: 1px solid #dcdcdc; }
.calc-key.vat:hover { background: #f4f4f2; }
.calc-key.act.primary { background: #1f1f31; color: #fefefe; }
.calc-key.act.primary:hover:not(:disabled) { background: #33334d; }

.calc-tape { border-top: 1px solid #ececea; background: #f6f6f4; }
.calc-tape[hidden] { display: none; }

.calc-tape-head {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.85rem 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #5f5f66;
}

.calc-tape-head .calc-link { margin-left: auto; }

.calc-tape-close {
    display: flex;
    padding: 0.2rem;
    border: none;
    border-radius: 6px;
    background: none;
    color: #8a8a90;
    cursor: pointer;
}

.calc-tape-close:hover { background: #ececea; color: #1f1f31; }
.calc-tape-close svg { width: 0.95rem; height: 0.95rem; }

.calc-link { border: none; background: none; padding: 0; font: inherit; font-weight: 400; color: #5f5f66; text-decoration: underline; cursor: pointer; }
.calc-link:hover { color: #1f1f31; }

.calc-tape-list { list-style: none; margin: 0; padding: 0 0.45rem 0.5rem; max-height: 11rem; overflow-y: auto; }
.calc-tape-empty { padding: 0.4rem; font-size: 0.8rem; color: #8a8a90; }

.calc-tape-item {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
    padding: 0.3rem 0.4rem;
    border: none;
    border-radius: 6px;
    background: none;
    font: inherit;
    text-align: right;
    cursor: pointer;
}

.calc-tape-item:hover { background: #ececea; }
.calc-tape-expr { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; color: #8a8a90; }
.calc-tape-val { font-size: 0.9rem; font-weight: 600; font-variant-numeric: tabular-nums; color: #1f1f31; }

/* Brief highlight on the field a result was inserted into */
.calc-flash { animation: calc-flash 0.7s ease; }
@keyframes calc-flash { 0%, 40% { box-shadow: 0 0 0 3px rgba(125, 187, 128, 0.6); background-color: #eef6ee; } }