h1:focus {
    outline: none;
}

/* Smaller variant used on kiosk page: centered and more compact */
.kiosk-ticket-small{
  width: min(720px, 78vw);
  margin: 20px auto;
  padding: clamp(10px, 3vh, 28px) clamp(14px, 4vw, 48px);
  border-radius: 14px;
}
.kiosk-ticket-small .ticket-number{
  font-size: clamp(2.2rem, 8vw, 5rem);
  line-height: 0.95;
}
.kiosk-ticket-small::before{
  /* scale down left accent bar to match smaller card */
  left: calc(50% - (min(720px,78vw)/2));
}
.monitor-layout{ display:flex; flex-direction:column; gap:20px; align-items:center; width:100%; height:100%; box-sizing:border-box; }
.monitor-status{ width:100%; padding:12px 2rem 24px; box-sizing:border-box; max-height:36vh; overflow:auto }
.status-title{ margin:0 0 12px 0; padding-left:8px; color:var(--accent-1) }
.status-grid{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center }
.status-card{ background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,250,0.95)); border-radius:14px; padding:14px; width:220px; box-shadow: 0 10px 30px rgba(20,30,20,0.04); display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center }
.status-badge{ width:56px; height:56px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.6rem; color:white; background: linear-gradient(90deg,var(--v1),var(--v2)); box-shadow:0 8px 24px rgba(0,0,0,0.06) }
.status-name{ font-weight:700; color:var(--accent-1) }
.status-role{ color:var(--muted); font-size:0.92rem }
.status-current{ font-weight:900; font-size:2.4rem; color:var(--accent-1) }
.status-meta{ color:var(--muted); font-size:0.85rem }
.status-flag{ margin-top:6px; font-size:0.95rem; color:#2b7a44 }

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1zbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA9NC4wODE1IDI5MSA9NC42NzgyIDI5MSA9Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Antre custom styles - Minimalist Organic theme */
:root{
  --earth-1:#f4efe6;
  --earth-2:#edf7f2;
  --accent-1:#3b5a40;
  --muted:#6b6b6b;
  /* colorful palette */
  --v1: #FF7A66;
  --v2: #FFB86B;
  --v3: #7AE7C7;
  --v4: #6BA4FF;
  --v5: #C77BFF;
  --glass: rgba(255,255,255,0.6);
}

/* Global modern UI fonts */
body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: #2b2b2b;
}

html, body { height: 100%; }

.monitor-viewport{
  /* full viewport height minus header — adapts to screen size
     reduced a bit to avoid vertical scroll on some monitor sizes */
  min-height: calc(100vh - var(--header-height, 84px) - 48px);
  display:flex;
  align-items:stretch;
  justify-content:center;
  padding:2rem;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(255,122,102,0.06), transparent 8%), linear-gradient(120deg,var(--earth-1),var(--earth-2));
  position:relative;
  overflow:hidden;
}
.monitor-viewport::before{
  content:"";
  position:absolute;
  inset:-20%;
  background: radial-gradient(circle at 10% 20%, rgba(255,122,102,0.07), transparent 8%),
              radial-gradient(circle at 90% 80%, rgba(107,164,255,0.06), transparent 12%),
              radial-gradient(circle at 40% 60%, rgba(199,123,255,0.05), transparent 10%),
              linear-gradient(90deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
  transform: rotate(0deg);
  animation: slowShift 18s linear infinite;
  filter: blur(36px) saturate(120%);
  pointer-events: none; /* allow clicks through the decorative overlay */
}
@keyframes slowShift{
  0%{ transform: translateY(0) rotate(0deg) scale(1); }
  50%{ transform: translateY(-6%) rotate(12deg) scale(1.06); }
  100%{ transform: translateY(0) rotate(0deg) scale(1); }
}

.monitor-center{ display:flex; align-items:center; justify-content:center; width:100%; position:relative; z-index:1; flex:1 }
.ticket{
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.9));
  border-radius:40px;
  padding:40px 56px;
  box-shadow: 0 32px 80px rgba(30,50,40,0.10), inset 0 1px 0 rgba(255,255,255,0.7);
  text-align:center;
  max-width:110ch;
}

.ticket-number{
  display:inline-block;
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-weight:900;
  /* much larger headline number */
  font-size: clamp(5rem, 22vw, 12rem);
  line-height:0.85;
  letter-spacing:0.01em;
  background: linear-gradient(90deg,var(--v4),var(--v5));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 18px 48px rgba(30,50,40,0.12);
  transition: transform .6s cubic-bezier(.2,1,.25,1), opacity .5s ease, filter .6s ease, text-shadow .6s ease;
  transform-origin:center center;
  padding: 0 6px;
}

.ticket-number.fade-up{
  animation: fadeUp 700ms cubic-bezier(.22,1,.36,1);
}
@keyframes fadeUp{
  from{ transform: translateY(22px) scale(.98); filter: blur(6px); opacity:0; }
  to{ transform: translateY(0) scale(1); filter: blur(0); opacity:1; }
}

.ticket-meta{ margin-top:18px; color:var(--muted); font-size:1.05rem }
.ticket-meta div { margin:6px 0 }
.caller-prefix{ display:inline-block; font-weight:900; font-size:2.4rem; color:var(--accent-1); margin-right:8px }
.ticket-meta > div:nth-child(2){ font-size:1.15rem }
.ticket-waiting{ font-size:2rem; color:var(--muted); padding:24px }

.kiosk-grid{ display:flex; gap:28px; flex-wrap:wrap; justify-content:center; position:relative; z-index:1; max-width:1200px; margin:0 auto }
.kiosk-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,250,0.98));
  border-radius:18px;
  padding:22px 20px;
  width:300px; /* larger for better readability */
  box-shadow: 0 22px 56px rgba(20,30,20,0.08);
  cursor:pointer;
  text-align:center;
  transition: transform .16s ease, box-shadow .16s ease, transform .08s;
  border: 1px solid rgba(16,24,40,0.06);
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.kiosk-card:hover{ transform: translateY(-10px); box-shadow: 0 44px 110px rgba(16,24,40,0.14); }
.kiosk-card:active{ transform: translateY(-2px); }
.kiosk-card .kiosk-top{ height:40px; display:flex; align-items:center; justify-content:center }
.prefix-badge{
  margin-top:8px;
  width:96px; height:96px; display:flex; align-items:center; justify-content:center; border-radius:16px;
  font-weight:900; font-size:2.6rem; color:white;
  background: linear-gradient(90deg,var(--v1),var(--v2));
  box-shadow: 0 14px 36px rgba(199,123,255,0.14);
}
.kiosk-body{ display:flex; flex-direction:column; gap:8px; align-items:center }
.kiosk-category{ color:var(--muted); font-size:1.15rem; font-weight:700 }
.kiosk-name{ color:var(--accent-1); font-weight:800; font-size:1.15rem }

/* subtle colored accent in corner */
.kiosk-card::before{
  content: "";
  position:absolute;
  top:10px;
  left:10px;
  width:36px;
  height:36px;
  border-radius:8px;
  background: linear-gradient(90deg,var(--v1),var(--v3));
  opacity:0.12;
  pointer-events:none;
}

/* Keep monitor large on all sizes: remove small-monitor overrides */
@media (max-width:720px){
  .ticket{ padding:24px }
  /* keep headline large but constrained by clamp in base definition */
  .kiosk-card{ width:48%; }
  /* status cards full width in stacked layout */
  .status-card{ width:100%; }
}

/* Two-column layout for wide screens: ticket left, status right */
@media (min-width: 1000px) {
  .monitor-layout {
    flex-direction: row;
    align-items: stretch;
    gap: 24px;
  }

  .monitor-center {
    flex: 8 1 0%; /* ~80% width on wide screens (larger call area) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 16px;
  }

  .monitor-status {
    flex: 2 1 240px; /* ~20% width on wide screens (smaller sidebar) */
    max-height: 100%;
    overflow: auto;
    padding: 24px;
    box-sizing: border-box;
    align-self: stretch;
  }

  /* Make status grid vertical in sidebar */
  .status-grid{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .status-card{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
  }

  .status-badge{ width:48px; height:48px; margin-right:12px; font-size:1.3rem }
  .status-body{ flex:1; text-align:left }
  .status-current{ font-size:1.6rem }
}

/* Settings page styles */
.settings-tabs{ display:flex; gap:12px; margin-bottom:14px }
.tab-btn{ padding:8px 14px; border-radius:10px; border:1px solid rgba(0,0,0,0.04); background:transparent; cursor:pointer }
.tab-btn.active{ background: linear-gradient(90deg,var(--v4),var(--v5)); color:white; box-shadow: 0 8px 24px rgba(107,164,255,0.08) }
.settings-panel{ background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,250,0.95)); padding:12px 14px; border-radius:12px; box-shadow: 0 8px 28px rgba(20,30,20,0.04); }
.settings-form{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.form-input{ padding:8px 10px; border-radius:8px; border:1px solid rgba(0,0,0,0.06); min-width:180px }
.form-input.small{ width:76px }
.form-label{ margin-left:6px; color:var(--muted) }
.settings-table{ width:100%; border-collapse:collapse }
.settings-table th, .settings-table td{ padding:8px 10px; border-bottom:1px solid rgba(0,0,0,0.04); text-align:left }
.btn-danger{ background:#c44; color:white; border:none; padding:6px 10px; border-radius:8px }
.btn-success{ background:#4a8; color:white; border:none; padding:6px 10px; border-radius:8px; margin-left:6px }
.theme-swatch{ width:64px; height:48px; border-radius:8px; box-shadow: 0 8px 24px rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.04); cursor:pointer }
.settings-preview .ticket{ width:320px }

/* Styles moved from Settings.razor to central app.css */
/* page container margins similar to other pages */
.page-container{padding:0 16px;max-width:1366px;margin:0 auto}
.settings-tabs{margin-top:8px}

/* settings layout */
.settings-panel{display:flex;flex-direction:column;gap:12px;padding:12px;border:1px solid #e6e6e6;border-radius:8px;background:#fff}
.settings-form{display:flex;gap:8px;align-items:center}

/* inputs */
.form-input{padding:8px 10px;border:1px solid #ccc;border-radius:6px;font-size:14px}
.form-input.small{width:80px;padding:6px;font-size:13px}
.form-label{font-size:13px;color:#333}

/* table */
.settings-table{border-collapse:collapse;width:100%;background:#fff}
.settings-table th,.settings-table td{padding:8px 10px;border-bottom:1px solid #f0f0f0;text-align:left;font-size:14px}
.settings-table thead th{background:#fafafa;font-weight:600}

/* buttons */
.btn-primary{background:#007bff;color:#fff;border:none;padding:8px 10px;border-radius:6px;cursor:pointer}
.btn-success{background:#28a745;color:#fff;border:none;padding:8px 10px;border-radius:6px;cursor:pointer}
.btn-danger{background:#dc3545;color:#fff;border:none;padding:8px 10px;border-radius:6px;cursor:pointer}
.btn-warning{background:#ffb020;color:#1f1f1f;border:none;padding:8px 10px;border-radius:6px;cursor:pointer}
.btn-primary:hover,.btn-success:hover,.btn-danger:hover,.btn-warning:hover{opacity:0.92}

/* theme cards and preview */
.kiosk-card{border:1px solid #eee;border-radius:8px;padding:6px;cursor:pointer}
.kiosk-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.06)}

.ticket{border-radius:8px;padding:12px;background:linear-gradient(90deg,var(--v1,#6BA4FF),var(--v3,#C77BFF));color:#fff}
.ticket-number{font-size:20px;font-weight:700}
.ticket-meta{font-size:13px;opacity:0.9}

/* kiosk main ticket (full-width bar similar to monitor) */
.kiosk-main-ticket{
  width: min(1100px, 96vw);
  margin: 28px auto;
  padding: 18px 22px;
  border-radius: 12px;
  /* solid neutral background (remove gradient for clarity) */
  background: #ffffff;
  border: 1px solid rgba(16,24,40,0.03);
  box-shadow: 0 28px 80px rgba(20,30,20,0.06);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
}
.kiosk-main-ticket .ticket-number{ font-size: clamp(2rem, 6vw, 4rem); color:var(--accent-1); font-weight:900 }
.kiosk-main-ticket .ticket-meta{ color:var(--muted); font-size:1rem; margin-top:6px }

/* Large monitor ticket - maximize visibility on monitor page */
.monitor-main-ticket{
  width: min(980px, 92vw);
  padding: clamp(24px, 6vh, 80px) clamp(28px, 6vw, 120px);
  border-radius: 24px;
  /* more neutral, muted background to reduce colorful look */
  background: linear-gradient(180deg, rgba(250,250,248,0.98), rgba(245,247,245,0.98));
  color: var(--accent-1);
  /* subtle colored bar on the left implemented with pseudo-element; keep soft elevation */
  box-shadow: 0 24px 60px rgba(20,30,20,0.06), inset 0 1px 0 rgba(255,255,255,0.6);
  position: relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* clear colored left bar (separate element for crisp color) */
.monitor-main-ticket::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 14px; /* slightly wider */
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
  background: linear-gradient(180deg, var(--v4), var(--v5));
  opacity: 0.95; /* clear/visible color */
  pointer-events: none;
}

.monitor-main-ticket .ticket-number{
  /* make the number as large as possible while keeping it responsive */
  font-size: clamp(6rem, 28vw, 22rem);
  line-height:0.8;
  padding: 0 8px;
  /* use solid, muted color instead of bright gradient */
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: var(--accent-1);
  text-shadow: 0 8px 18px rgba(30,40,30,0.06);
}

.monitor-main-ticket .ticket-meta{ font-size: clamp(1rem, 2.6vw, 1.25rem); margin-top:18px; color:var(--muted)}
.monitor-main-ticket .caller-prefix{ color:var(--accent-1); font-size: clamp(2rem, 4.2vw, 4rem); }

@media (max-width:720px){
  .monitor-main-ticket{ padding:20px 18px; border-radius:16px }
  .monitor-main-ticket::before{ width:10px; border-top-left-radius:16px; border-bottom-left-radius:16px }
  .monitor-main-ticket .ticket-number{ font-size: clamp(3.2rem, 18vw, 8rem) }
}

/* Action buttons group for settings table rows */
.action-btns{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.settings-table td .action-btns button{min-width:72px}
.settings-table td .action-btns{white-space:nowrap}

/* Material3-like modal dialog styles (used by Settings.razor confirm dialog) */
.m3-modal{
  position:fixed;
  inset:0;
  background:rgba(15,20,25,0.48);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:24px;
}
.m3-dialog{max-width:520px;width:100%;display:flex;align-items:center;justify-content:center}
.m3-surface{
  background:linear-gradient(180deg, #ffffff, #fbfbfd);
  border-radius:12px;
  box-shadow: 0 10px 30px rgba(16,24,40,0.24), inset 0 1px 0 rgba(255,255,255,0.6);
  padding:20px 20px 16px;
  width:100%;
  border: 1px solid rgba(16,24,40,0.06);
}
.m3-title{font-size:1.05rem;font-weight:700;color:var(--accent-1);margin-bottom:6px}
.m3-content{color:var(--muted);font-size:0.95rem;margin-bottom:16px}
.m3-actions{display:flex;justify-content:flex-end;gap:12px}
.m3-btn{padding:8px 14px;border-radius:10px;border:none;cursor:pointer;font-weight:600}
.m3-btn-cancel{background:transparent;color:var(--muted)}
.m3-btn-confirm{background:linear-gradient(90deg,var(--v4),var(--v5));color:white}
.m3-btn:active{transform:translateY(1px)}

@media (max-width:480px){
  .m3-surface{padding:16px}
  .m3-title{font-size:1rem}
  .m3-content{font-size:0.9rem}
}

/* Mobile / handset specific adjustments from Counter page */
@media (max-width:480px) {
    .page-container { padding: 0 12px; }
    .call-controls { gap: 10px; }
    .call-button-group { flex-direction: column-reverse; gap: 10px; }
    .call-button { 
        width: 100%;
        padding: 14px 16px;
        font-size: 18px;
        border-radius: 12px;
    }
    .call-button .btn-icon { order: -1; margin-bottom: 6px; }
    .call-button .btn-label { display:block; }

    .loket-grid { gap: 10px; }
    .loket-card { width: 100%; padding: 14px; }
    .loket-prefix { padding: 8px 12px; font-size: 1.2rem; }

    .ticket { padding: 18px; }
    .ticket-number { font-size: 44px; }

    /* increase tappable hit area for small screens */
    .loket-card, .call-button { touch-action: manipulation; -webkit-tap-highlight-color: rgba(0,0,0,0.05); }
}

/* Styles moved from Counter.razor -> centralized */
/* Counter component styles (moved from Antre/Components/Pages/Counter.razor) */
.page-container{padding:0 16px;max-width:980px;margin:0 auto}
.call-controls{display:flex;gap:12px;flex-direction:column;align-items:stretch;margin-top:12px}
.loket-select{padding:10px;border-radius:8px;font-size:16px;width:100%}
.call-button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 18px;border-radius:12px;font-size:16px;width:100%;color:#fff;background:linear-gradient(90deg,var(--v4),var(--v5));border:none;cursor:pointer;box-shadow:0 6px 18px rgba(107,164,255,0.18);transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease}
.call-button .btn-icon{display:inline-flex;align-items:center;justify-content:center;line-height:0}
.call-button .btn-label{font-weight:700}
.call-button:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(107,164,255,0.14)}
.call-button:active{transform:translateY(-1px);box-shadow:0 8px 22px rgba(107,164,255,0.12)}
.call-button:focus{outline:0;box-shadow:0 0 0 4px rgba(107,164,255,0.12)}
.call-button:disabled,.call-button[aria-disabled="true"]{opacity:0.6;cursor:not-allowed;transform:none;box-shadow:none}

/* subtle ripple effect centered */
.call-button::after{content:"";position:absolute;inset:0;border-radius:12px;pointer-events:none;background:radial-gradient(circle, rgba(255,255,255,0.18) 10%, transparent 10.01%);background-size:100% 100%;opacity:0;transform:scale(0.6);transition:opacity .4s,transform .4s}
.call-button:active::after{opacity:1;transform:scale(1)}
.hint{font-size:12px;color:var(--muted,#666);margin-left:0;margin-top:6px}
.ticket{margin-top:16px;padding:14px;border-radius:10px;background:var(--panel-bg,#fff);box-shadow:0 1px 4px rgba(0,0,0,0.08);width:100%}
.ticket-number{font-size:44px;font-weight:800;text-align:center}
.ticket-meta{margin-top:6px;font-weight:600;color:var(--muted,#444);text-align:center}
.ticket-waiting{padding:24px;text-align:center;color:var(--muted,#666);font-weight:600}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (max-width:600px){
    .ticket-number{font-size:36px}
}

/* Loket card selector */
.loket-grid{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center}
.loket-card{width:220px;background:linear-gradient(180deg,rgba(255,255,255,0.98),rgba(250,250,250,0.98));border-radius:12px;padding:12px;box-shadow:0 10px 24px rgba(20,30,20,0.04);cursor:pointer;border:1px solid rgba(0,0,0,0.04);transition:transform .18s ease,box-shadow .18s ease,border-color .12s ease;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.loket-card:focus{outline:none;box-shadow:0 12px 30px rgba(58,90,64,0.06);transform:translateY(-4px)}
.loket-card:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(20,40,30,0.06)}
.loket-card.selected{border-color:rgba(107,164,255,0.45);box-shadow:0 22px 56px rgba(107,164,255,0.08);transform:translateY(-8px)}
.loket-prefix{display:inline-block;padding:10px 14px;border-radius:12px;font-weight:800;font-size:1.4rem;color:white;background:linear-gradient(90deg,var(--v1),var(--v2));box-shadow:0 8px 28px rgba(199,123,255,0.08)}
.loket-name{font-weight:700;color:var(--accent-1)}
.loket-cat{color:var(--muted);font-size:0.95rem}

@media (max-width:600px){
    .loket-grid{justify-content:center}
    .loket-card{width:100%}
}

/* Styles moved from Index.razor -> centralized */
@media (max-width:480px) {
    .monitor-viewport { padding: 1.5rem 12px; min-height: 60vh; }
    .monitor-center { gap: 12px; padding: 8px 6px; }
    h1 { font-size: 1.8rem; line-height: 1.1; }
    .kiosk-grid { gap: 12px; }
    .kiosk-card { width: 100%; padding: 14px; border-radius: 12px; }
    .kiosk-card .kiosk-icon svg { width: 40px; height: 40px; }
    .kiosk-card .label { font-size: 0.95rem; color: var(--muted); }
    .kiosk-card[role="button"] { touch-action: manipulation; -webkit-tap-highlight-color: rgba(0,0,0,0.06); }
    .kiosk-card:focus { outline: none; box-shadow: 0 10px 26px rgba(16,24,40,0.08); transform: none; }
}