:root{
    --bg:#0e68b3; --card:#0b5a9b; --card2:#0a4f89; --muted:rgba(255,255,255,.85);
    --ok:#27ae60; --ok-dark:#1f8f4f; --bad:#e74c3c; --chip:#083e6a;
    /* Wymiary kafli produktów w vw/vh (kontrolowane suwakiem w panelu admina) */
    --tile-width: 10vw;   /* domyślna szerokość kafla */
    --tile-height: 20vh;  /* domyślna wysokość kafla */
    --font-scale: 1;      /* skala czcionek nazw produktów (1 = 100%) */
    --ui-scale: 1;        /* skala czcionek interfejsu (1 = 100%) */
    --list-scale: 1;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:#fff;font-family:system-ui,Arial;overflow:hidden;font-size:calc(15px * var(--ui-scale));}

.muted{opacity:.9;font-size:calc(13px * var(--ui-scale))}
.kod{font-size:calc(12px * var(--ui-scale));opacity:.9}
.badge{background:#0a477d;border-radius:999px;padding:6px 12px;font-size:calc(14px * var(--ui-scale));display:inline-block}
.success{background:var(--ok)} .danger{background:var(--bad)}
.small{font-size:calc(12px * var(--ui-scale))}
.status-dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:middle}
.ok{background:var(--ok)} .bad{background:var(--bad)}
.collapse{overflow:hidden;transition:max-height .25s ease}
.ghost{display:none !important}
[x-cloak]{display:none !important}
.mobile-only{display:none}

input,button,select{padding:12px;border-radius:12px;border:none;font-size:calc(1rem * var(--ui-scale))}
/* Slightly smaller search inputs for better layout */
#qClient{ padding:10px; font-size:calc(0.95rem * var(--ui-scale)); }
#qProd{ padding:10px; font-size:calc(0.95rem * var(--ui-scale)); min-width:160px; }
input,select{width:100%}
button{cursor:pointer;font-weight:700}

/* Toasty (dymki) */
.toasts{ position:fixed; top:clamp(1.2vh, 1.8vw, 2vh); right:clamp(1.2vh, 1.8vw, 2vh); z-index:1000; display:flex; flex-direction:column; gap:clamp(0.8vh, 1vw, 1.2vh); pointer-events:none; }
.toast{ pointer-events:auto; background:#c0392b; color:#fff; border-radius:clamp(0.8vh, 1.2vw, 1.5vh); padding:clamp(1vh, 1.2vw, 1.5vh) clamp(1.2vh, 1.8vw, 2vh); min-width:30vw; box-shadow:0 10px 30px rgba(0,0,0,.3); animation:toast-in .2s ease-out forwards; font-size:clamp(1.6vh, 2vw, 2.2vh); }
.toast.success{ background:#1f8f4f; }
.toast .close{ background:transparent; border:none; color:#fff; font-weight:800; float:right; cursor:pointer; }
@keyframes toast-in{ from{ transform:translateY(-6px); opacity:0 } to{ transform:none; opacity:1 } }