/* For custom scrollbar */

.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #676767; /* darkgray */
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #676767; /* white */
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #676767;
}

.custom-scrollbar::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}

.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #676767 transparent;
}

/* For Pickr.js */

/* Общ фон на popup-а */
.pcr-app {
    background: #1c2221 !important;
    border: 2px solid #343e3c !important;

    /* центриране на палитрата */
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 12px;
    box-shadow:
        0 20px 25px -5px rgba(0, 0, 0, 0.7),
        0 10px 10px -5px rgba(0, 0, 0, 1) !important;
}

/* Пренареждаме nano темата: квадрат отгоре, слайдър отдолу, без лява колона */
.pcr-app[data-theme="nano"] .pcr-selection {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0.5rem !important;
    gap: 1rem !important;
}

/* Скриваме евентуален color preview, ако все още се рендерира */
.pcr-app[data-theme="nano"] .pcr-color-preview {
    display: none !important;
}

/* Квадратът да заема цялата ширина и да няма offset */
.pcr-app[data-theme="nano"] .pcr-color-palette {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Контейнерът на hue slider-а – без излишни отмествания */
.pcr-app[data-theme="nano"] .pcr-color-chooser {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Самият hue slider – разпънат и центриран, без transform */
.pcr-app[data-theme="nano"] .pcr-hue {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Grid за готовите цветови кръгчета */
.color-preset-grid {
    display: grid;
    grid-template-columns: repeat(5, 2rem); /* 5 колони по ~8px*2.5 */
    column-gap: 0.5rem;
    row-gap: 0.5rem;
}

/* Маскира гнусния кариран бордър */
.pcr-app[data-theme="nano"] .pcr-color-palette::after {
    content: "" !important;
    position: absolute !important;
    left: -1px !important;
    right: -1px !important;
    top: -1px !important;
    bottom: -1px !important;
    border-top: 2px solid #1c2221 !important;
    border-bottom: 2px solid #1c2221 !important;
    border-right: 2px solid #1c2221 !important;
    border-left: 2px solid #1c2221 !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
}

/* Bottom gradient for scroll pages*/
.fade-bottom {
    background: linear-gradient(
        to bottom,
        rgba(20, 20, 20, 0) 0%,
        rgba(20, 20, 20, 0.6) 80%,
        rgba(20, 20, 20, 0.9) 100%
    );
}

/* ApexCharts custom tooltip (inventory avg price) */
.sorteel-tooltip.premium {
    background: linear-gradient(180deg, rgba(36, 42, 41, 0.98) 0%, rgba(28, 34, 33, 0.98) 100%);
    border: none;
    outline: none;
    border-radius: 14px;
    padding: 10px 12px;
    min-width: 160px;
    color: #e9f1ee;
    box-shadow:
        0 10px 18px -8px rgba(0, 0, 0, 0.65),
        0 22px 36px -16px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(8px);
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
    transform: translateY(-2px);
}

.sorteel-tooltip.premium .tt-title {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #b7c5bf;
    margin-bottom: 6px;
}

.sorteel-tooltip.premium .tt-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sorteel-tooltip.premium .tt-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #2fd58f;
    box-shadow: 0 0 0 4px rgba(47, 213, 143, 0.18);
}

.sorteel-tooltip.premium .tt-label {
    font-size: 12px;
    color: #cfdad6;
}

.sorteel-tooltip.premium .tt-value {
    margin-left: auto;
    font-weight: 600;
    font-size: 12px;
    color: #2fd58f;
}

/* Remove default ApexCharts tooltip shell */
.apexcharts-tooltip {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.apexcharts-tooltip-container {
    overflow: visible !important;
}

/* Reports/Sales: Apex tooltip cleanup for specific charts.
   These selectors target ApexCharts-generated DOM classes, so this cannot be
   reliably replaced with Tailwind utility classes. */

/* Bills state chart: remove marker outlines in plot and legend. */
.bills-state-chart-wrap .apexcharts-marker {
    stroke: transparent !important;
    stroke-width: 0 !important;
}

/* Bills state chart: hide default white x-axis hover tooltip box. */
.bills-state-chart-wrap .apexcharts-xaxistooltip {
    display: none !important;
}

/* Keep legend order as Opened -> Closed while rendering layers are swapped. */
.bills-state-chart-wrap .apexcharts-legend {
    display: flex !important;
}

.bills-state-chart-wrap .apexcharts-legend .apexcharts-legend-series:nth-child(1) {
    order: 2 !important;
}

.bills-state-chart-wrap .apexcharts-legend .apexcharts-legend-series:nth-child(2) {
    order: 1 !important;
}

/* Category pie chart: remove white outline from legend color dots. */
.category-pie-wrap .apexcharts-legend-marker {
    stroke: transparent !important;
    stroke-width: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Category donut chart: visible separators between slices in darkgray. */
.category-pie-wrap .apexcharts-pie-area {
    stroke: #1d2322 !important;
    stroke-width: 2px !important;
}

.category-pie-wrap .apexcharts-legend {
    max-width: 100% !important;
    padding: 0 4px !important;
    justify-content: center !important;
}

.category-pie-wrap .apexcharts-legend-text {
    font-size: 10px !important;
}

@media (min-width: 640px) {
    .category-pie-wrap {
        overflow: visible !important;
    }

    .category-pie-wrap .apexcharts-canvas {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .category-pie-wrap .apexcharts-legend-text {
        font-size: 11px !important;
    }

    .category-pie-wrap .apexcharts-pie-series path {
        filter: none !important;
    }

    .category-pie-wrap .apexcharts-svg {
        overflow: visible !important;
    }
}

/* Wide dropdown panel: forces the listbox to expand to fit content without wrapping. */
.wide-dropdown-panel ul[role="listbox"] {
    min-width: max-content !important;
}

/* Blinking cursor animation used by FloatingCalculator when awaiting input. */
@keyframes calcBlink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

.calc-cursor {
    animation: calcBlink 1s step-end infinite;
    color: #2FD58F;
    font-weight: 400;
}

/* Touch-mode cursor hiding: applied by JS on touchstart, removed on real mouse movement */
.touch-active,
.touch-active * {
    cursor: none !important;
}

/*
 * <FocusOnNavigate Selector="h1"> (Components/Routes.razor) sets tabindex="-1"
 * on the first heading after every navigation/refresh and focuses it for
 * screen-reader users. On the dark theme this programmatic focus leaves a
 * visible white outline (e.g. around "Здравейте, Username!") until the user
 * clicks away. Suppress the outline only for this programmatic/pointer focus
 * while keeping the keyboard focus ring (:focus-visible) intact for a11y.
 */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
    outline: none;
    box-shadow: none;
}

/* ── Touch device optimizations ── */

/* Remove 300ms tap delay, disable double-tap zoom, and kill the blue tap flash */
html {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/*
 * PIN keypad input: visually masks each character with a bullet without
 * declaring the field as type="password". This is the only reliable way to
 * stop Chrome / Safari / Edge from popping their "Save password?" /
 * "Use saved password?" prompts on the cashier's PIN screen — those prompts
 * are triggered exclusively by <input type="password">, regardless of any
 * autocomplete attributes. The actual digits the cashier types are still
 * sent over the wire (POST body), they're just hidden on screen.
 */
.pin-masked {
    -webkit-text-security: disc;
    -moz-text-security: disc;
    text-security: disc;
    letter-spacing: 0.15em;
    font-family: text-security-disc, system-ui, sans-serif;
}

.pin-pad--disabled .num-btn {
    pointer-events: none;
    opacity: 0.55;
}