:root {
    --ice-blue: #94e2ff;
    --silver: #cbd5e1;
    --black: #080a0c;
    --industrial-border: #1e293b;
}

body {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    background-color: var(--black);
    color: var(--silver);
    margin: 0;
    text-transform: uppercase;
    line-height: 1.5;
}

.pixel-grid {
    background-image:
            linear-gradient(to right, rgba(148, 226, 255, 0.05) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(148, 226, 255, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
}

.tech-border {
    border: 1px solid var(--industrial-border);
    position: relative;
}

.tech-border::before {
    content: '';
    position: absolute;
    top: -1px; left: -1px; width: 4px; height: 4px;
    background: var(--ice-blue);
}

.tech-border::after {
    content: '';
    position: absolute;
    bottom: -1px; right: -1px; width: 4px; height: 4px;
    background: var(--ice-blue);
}

.no-corners::before,
.no-corners::after {
    display: none !important;
}

.meter-bar {
    height: 4px;
    background: #1e293b;
    position: relative;
    overflow: hidden;
}

.meter-fill {
    height: 100%;
    background: var(--ice-blue);
}

.contrast-header {
    background: var(--ice-blue);
    color: var(--black);
    font-weight: 800;
}

input, select {
    font-size: 13px !important;
    background: #0f172a !important;
    border: 1px solid #1e293b !important;
    color: var(--ice-blue) !important;
    border-radius: 0 !important;
}

input:focus {
    border-color: var(--ice-blue) !important;
    outline: none;
}


@keyframes scanline {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

.animate-scanline {
    animation: scanline 2s linear infinite;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
    display: none;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #080a0c;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #1e293b;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #94e2ff;
}

#shopping-list-results {
    overflow-anchor: none; /* Запрещает браузеру менять позицию скролла при изменении контента сверху */
}

/* Устанавливаем базовое поведение для всех иконок */
iconify-icon {
    display: inline-block;
    width: 1em;   /* По умолчанию берет размер текста (text-sm, text-lg) */
    height: 1em;
    min-width: 1em;
    min-height: 1em;
    line-height: 1;
    vertical-align: middle;
}

/* Если ты используешь конкретные размеры из Tailwind, можно подстраховать их */
iconify-icon.text-sm { min-width: 0.875rem; min-height: 0.875rem; }
iconify-icon.text-base { min-width: 1rem; min-height: 1rem; }
iconify-icon.text-lg { min-width: 1.125rem; min-height: 1.125rem; }
iconify-icon.text-xl { min-width: 1.25rem; min-height: 1.25rem; }



/* На всякий случай фиксируем для body и html */
html, body {
    overflow-x: hidden;
    height: 100%;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

/* Глобальное скрытие скроллбаров для всего сайта */
* {
    -ms-overflow-style: none;
    scrollbar-width: none; 
}

*::-webkit-scrollbar {
    display: none; 
}

.recipe-row input,
.recipe-row span,
.recipe-row div,
.recipe-row li {
    font-family: 'JetBrains Mono', monospace !important;
    box-sizing: border-box;
}

.recipe-row input[type="number"] {
    color: #94e2ff !important;
    -webkit-text-fill-color: #94e2ff !important;
    background-color: #0f172a !important;
    opacity: 1 !important;
}

.recipe-row input::-webkit-outer-spin-button,
.recipe-row input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.col-prod { width: 50%; }
.col-qty  { width: 15%; }
.col-unit { width: 25%; }
.col-del  { width: 10%; }

/* Скрываем стандартные иконки в Chrome/Android/Safari */
input::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

/* Фикс для iOS: убираем системное оформление, чтобы поле не "вылезало" */
input[type="datetime-local"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    min-height: 35px; /* Установи жесткую высоту как у соседних блоков */
}