/* POS / header popover calculator — uses HMS theme vars when present */

.pos-calculator {
    --pc-bg: #0f172a;
    --pc-bg-soft: #1e293b;
    --pc-text: #f8fafc;
    --pc-text-muted: rgba(248, 250, 252, 0.55);
    --pc-primary: var(--hms-primary, #1565c0);
    --pc-primary-dark: var(--hms-primary-dark, #0d47a1);
    --pc-radius: 12px;
    --pc-gap: 6px;
    width: 272px;
    max-width: calc(100vw - 28px);
    margin: -6px -10px;
    padding: 0;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    border-radius: var(--pc-radius);
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(165deg, #1e293b 0%, #0f172a 100%);
}

.pos-calculator__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 6px;
    background: rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.pos-calculator__title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pc-text-muted);
}

.pos-calculator__display-shell {
    position: relative;
    padding: 10px 12px 12px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, transparent 100%);
}

.pos-calculator__back {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 2;
    width: 32px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1;
    color: var(--pc-text-muted);
    background: rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.pos-calculator__back:hover {
    color: var(--pc-text);
    background: rgba(255, 255, 255, 0.12);
}

.pos-calculator__back:focus {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--pc-primary) 45%, transparent);
}

.pos-calculator__expr {
    min-height: 18px;
    margin-bottom: 4px;
    padding-right: 36px;
    font-size: 12px;
    font-weight: 500;
    color: var(--pc-text-muted);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pos-calculator__display {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 12px 40px 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    font-size: clamp(13px, 3.8vw, 26px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.02em;
    text-align: right;
    color: var(--pc-text);
    background: linear-gradient(180deg, #020617 0%, #0f172a 100%);
    box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.45);
    cursor: default;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}
.pos-calculator__display::-webkit-scrollbar {
    height: 4px;
}
.pos-calculator__display::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.pos-calculator__display:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--pc-primary) 55%, rgba(255, 255, 255, 0.2));
    box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.45),
        0 0 0 2px color-mix(in srgb, var(--pc-primary) 35%, transparent);
}

.pos-calculator__keys {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--pc-gap);
    padding: 10px 12px 12px;
    background: rgba(0, 0, 0, 0.12);
}

.pos-calculator__btn {
    min-height: 44px;
    padding: 0 4px;
    border: none;
    border-radius: 10px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.08s ease, filter 0.12s ease, box-shadow 0.12s ease;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 2px 6px rgba(0, 0, 0, 0.2);
}

.pos-calculator__btn:active {
    transform: scale(0.96);
    filter: brightness(0.95);
}

.pos-calculator__btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--pc-primary) 50%, transparent),
        0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

.pos-calculator__btn--num {
    color: #0f172a;
    background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
}

.pos-calculator__btn--num:hover {
    filter: brightness(1.04);
}

.pos-calculator__btn--zero {
    grid-column: span 2;
}

.pos-calculator__btn--op {
    color: #fff;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--pc-primary) 88%, #fff) 0%,
        var(--pc-primary) 100%
    );
}

.pos-calculator__btn--op:hover {
    filter: brightness(1.08);
}

.pos-calculator__btn--eq {
    color: #fff;
    font-size: 20px;
    background: linear-gradient(135deg, var(--pc-primary-dark), var(--pc-primary));
    box-shadow: 0 2px 10px color-mix(in srgb, var(--pc-primary) 35%, transparent);
}

.pos-calculator__btn--eq:hover {
    filter: brightness(1.07);
}

.pos-calculator__btn--danger {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: linear-gradient(180deg, #f87171 0%, #dc2626 100%);
}

.pos-calculator__btn--warn {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    background: linear-gradient(180deg, #fb923c 0%, #ea580c 100%);
}

.pos-calculator__btn--muted {
    color: #e2e8f0;
    font-size: 16px;
    font-weight: 700;
    background: linear-gradient(180deg, #64748b 0%, #475569 100%);
}

/* Popover chrome: tighten padding when calculator is shown */
.popover .popover-content:has(.pos-calculator) {
    padding: 8px 10px !important;
}

.navbar-custom-menu .popover .popover-content:has(.pos-calculator),
.pos-header .popover .popover-content:has(.pos-calculator) {
    padding: 6px 8px !important;
}

/* Above dense POS chrome / lockscreen layers */
.pos-header .popover,
body.lockscreen .pos-header .popover {
    z-index: 10800 !important;
}