/* PNB118 Mall Intelligence — design tokens */
:root{
  --ink-950:#040b16;--ink-900:#070f1f;--ink-800:#0d1730;--ink-700:#11203f;
  --cyan-400:#22d3ee;--cyan-500:#06b6d4;--cyan-600:#0891b2;
}

html,body{background:#040b16;}

.grid-bg{
  background-image:
    linear-gradient(rgba(34,211,238,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,.06) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(ellipse 65% 60% at 50% 35%, #000 35%, transparent 95%);
}

.panel{
  background: linear-gradient(180deg, rgba(13,23,48,.92), rgba(7,15,31,.85));
  border:1px solid rgba(34,211,238,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 12px 32px -16px rgba(0,0,0,.6);
  border-radius:18px;
}
.panel-tight{
  background: linear-gradient(180deg, rgba(13,23,48,.88), rgba(7,15,31,.72));
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
}

.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.18rem .55rem;border-radius:999px;font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;border:1px solid rgba(255,255,255,.08)}
.chip-cyan{background:rgba(34,211,238,.10);color:#9deaf3;border-color:rgba(34,211,238,.30)}
.chip-amber{background:rgba(245,158,11,.10);color:#fcd97a;border-color:rgba(245,158,11,.30)}
.chip-red{background:rgba(239,68,68,.10);color:#fda4a4;border-color:rgba(239,68,68,.30)}
.chip-green{background:rgba(34,197,94,.10);color:#86efac;border-color:rgba(34,197,94,.30)}
.chip-purple{background:rgba(168,85,247,.10);color:#d8b4fe;border-color:rgba(168,85,247,.30)}

.nav-link{display:flex;align-items:center;gap:.7rem;padding:.65rem .8rem;border-radius:12px;color:rgba(226,232,240,.7);font-size:.875rem;transition:all .15s;border:1px solid transparent}
.nav-link:hover{color:#fff;background:rgba(34,211,238,.06);border-color:rgba(34,211,238,.12)}
.nav-link.active{color:#fff;background:linear-gradient(90deg,rgba(34,211,238,.18),rgba(34,211,238,.04));border-color:rgba(34,211,238,.35);box-shadow:inset 0 0 0 1px rgba(34,211,238,.10)}

.kpi-value{font-family:"JetBrains Mono", ui-monospace; font-weight:500; letter-spacing:-.02em}
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1rem;border-radius:10px;font-weight:500;font-size:.875rem;transition:all .15s;border:1px solid transparent;cursor:pointer}
.btn-primary{background:linear-gradient(180deg, #22d3ee, #0891b2);color:#04111a;box-shadow:0 6px 16px -8px rgba(34,211,238,.6)}
.btn-primary:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,.04);color:#cbd5e1;border-color:rgba(255,255,255,.08)}
.btn-ghost:hover{background:rgba(34,211,238,.08);color:#fff;border-color:rgba(34,211,238,.3)}
.btn-danger{background:rgba(239,68,68,.10);color:#fda4a4;border-color:rgba(239,68,68,.30)}
.btn-danger:hover{background:rgba(239,68,68,.20)}

/* Input styles — !important needed to defeat @tailwindcss/forms CDN plugin
   which sets background-color:#fff on every typed input/textarea/select. */
.input,
input.input,
textarea.input,
select.input,
.select,
textarea,
input[type="text"].input,
input[type="email"].input,
input[type="password"].input,
input[type="number"].input,
input[type="search"].input,
input[type="url"].input,
input[type="tel"].input,
input[type="date"].input,
input[type="datetime-local"].input,
input[type="time"].input,
input[type="month"].input,
input[type="week"].input,
input[type="color"].input,
input[type="file"].input{
  width:100% !important;
  background-color:rgba(7,15,31,.7) !important;
  background-image:none !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:10px !important;
  padding:.6rem .85rem !important;
  color:#e2e8f0 !important;
  font-size:.875rem !important;
  line-height:1.4 !important;
  transition:border .15s, background .15s, box-shadow .15s !important;
  caret-color:#22d3ee !important;
  box-shadow:none !important;
  --tw-ring-offset-shadow:0 0 #0000 !important;
  --tw-ring-shadow:0 0 #0000 !important;
  -webkit-appearance:none !important;
  appearance:none !important;
}
.input::placeholder,
.select::placeholder,
textarea::placeholder,
input::placeholder{
  color:rgba(148,163,184,.55) !important;
  opacity:1 !important;
}
.input:focus,
input.input:focus,
textarea.input:focus,
.select:focus,
textarea:focus,
select:focus{
  outline:none !important;
  border-color:rgba(34,211,238,.55) !important;
  background-color:rgba(13,23,48,.9) !important;
  box-shadow:0 0 0 3px rgba(34,211,238,.15) !important;
  color:#fff !important;
}

/* Select dropdown arrow recolour */
select.input,
select.select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20' stroke='%2394a3b8' stroke-width='1.5'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right .65rem center !important;
  background-size:1.1rem !important;
  padding-right:2.2rem !important;
}

/* Number input spinners */
input[type="number"].input::-webkit-outer-spin-button,
input[type="number"].input::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
  opacity:.5;
  filter:invert(80%);
}

/* File input button */
input[type="file"].input::file-selector-button,
input[type="file"].input::-webkit-file-upload-button{
  background:rgba(34,211,238,.15) !important;
  color:#9deaf3 !important;
  border:0 !important;
  padding:.35rem .75rem !important;
  border-radius:.4rem !important;
  margin-right:.75rem !important;
  font-size:.8rem !important;
  cursor:pointer;
}

label.field{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:#94a3b8;margin-bottom:.35rem}

/* Defeat browser autofill yellow/white background */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
textarea:-webkit-autofill{
  -webkit-text-fill-color:#e2e8f0 !important;
  caret-color:#22d3ee !important;
  -webkit-box-shadow:0 0 0 1000px rgba(7,15,31,.95) inset !important;
  box-shadow:0 0 0 1000px rgba(7,15,31,.95) inset !important;
  transition:background-color 5000s ease-in-out 0s;
  border:1px solid rgba(34,211,238,.35) !important;
}
input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px rgba(13,23,48,.95) inset, 0 0 0 3px rgba(34,211,238,.15) !important;
}

.status-dot{width:.55rem;height:.55rem;border-radius:50%;display:inline-block;box-shadow:0 0 8px currentColor}
.status-normal{color:#22c55e;background:#22c55e}
.status-busy{color:#fbbf24;background:#fbbf24}
.status-crowded{color:#fb923c;background:#fb923c}
.status-congested{color:#ef4444;background:#ef4444}
.status-critical{color:#b91c1c;background:#b91c1c}
.status-offline{color:#64748b;background:#64748b}

.scanline{position:relative}
.scanline::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(34,211,238,.04) 50%,transparent 60%);pointer-events:none;animation:scan 4s linear infinite}
@keyframes scan{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}

.skel{background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.08),rgba(255,255,255,.04));background-size:200% 100%;animation:skel 1.5s ease infinite}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}

.heat-legend{height:8px;border-radius:99px;background:linear-gradient(90deg,#22c55e,#facc15,#fb923c,#ef4444,#7f1d1d)}

.map-shell{position:relative;border-radius:18px;overflow:hidden;background:#020616;border:1px solid rgba(34,211,238,.18);box-shadow:0 30px 80px -40px rgba(0,0,0,.8)}
.map-shell::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%, transparent 40%, rgba(2,6,22,.6) 100%);pointer-events:none;z-index:5}
.map-corner{position:absolute;width:32px;height:32px;border:1px solid rgba(34,211,238,.7);z-index:6;pointer-events:none}
.map-corner.tl{top:14px;left:14px;border-right:none;border-bottom:none}
.map-corner.tr{top:14px;right:14px;border-left:none;border-bottom:none}
.map-corner.bl{bottom:14px;left:14px;border-right:none;border-top:none}
.map-corner.br{bottom:14px;right:14px;border-left:none;border-top:none}

.floor-pill{display:flex;flex-direction:column;align-items:center;gap:.05rem;width:50px;padding:.65rem .25rem;border-radius:12px;font-family:"JetBrains Mono",ui-monospace;font-weight:500;font-size:.85rem;color:#94a3b8;background:rgba(13,23,48,.6);border:1px solid rgba(255,255,255,.06);transition:all .15s}
.floor-pill:hover{color:#fff;border-color:rgba(34,211,238,.4)}
.floor-pill.active{color:#04111a;background:linear-gradient(180deg,#22d3ee,#0891b2);border-color:#22d3ee;box-shadow:0 6px 18px -8px rgba(34,211,238,.7)}
.floor-pill small{font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;opacity:.7}

table.data{width:100%;border-collapse:collapse;font-size:.85rem}
table.data thead th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:#94a3b8;padding:.65rem .85rem;border-bottom:1px solid rgba(255,255,255,.06)}
table.data tbody td{padding:.7rem .85rem;border-bottom:1px solid rgba(255,255,255,.04)}
table.data tbody tr:hover{background:rgba(34,211,238,.04)}

.tower-bg{
  background-image:
    linear-gradient(180deg, rgba(4,11,22,0.0) 0%, rgba(4,11,22,0.92) 92%),
    url('/img/pnb118-hero.png');
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

.auth-shell{
  background-image:
    radial-gradient(circle at 80% -10%, rgba(34,211,238,0.25), transparent 50%),
    radial-gradient(circle at 10% 110%, rgba(168,85,247,0.15), transparent 50%),
    linear-gradient(180deg, #03070f 0%, #040b16 100%);
}

.heat-cell{transition:all .2s}

[x-cloak]{display:none !important}