/* PUM — Parko Urban Market · SAP Horizon (Morning Horizon) design system */
:root {
  --h-blue: #0070F2;        /* Horizon vibrant blue */
  --h-blue-hover: #0064D9;
  --h-navy: #1D2D3E;        /* Horizon text dark */
  --h-bg: #EFF1F2;          /* Horizon shell background */
  --h-pos: #256F3A;         /* semantic positive */
  --h-pos-bg: #EBF5EC;
  --h-crit: #E76500;        /* semantic critical */
  --h-crit-bg: #FFF3E8;
  --h-neg: #AA0808;         /* semantic negative */
  --h-neg-bg: #FFEAEA;
  --h-info: #0070F2;
  --h-info-bg: #EAF3FE;
  --h-border: #E4E7EA;
}
body { font-feature-settings: "cv02","cv03"; background: var(--h-bg); -webkit-tap-highlight-color: transparent; }

/* Nav rail (Horizon: pill highlight) */
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px;
  font-size: 13px; font-weight: 600; color: #556B82;
  transition: all .15s ease;
}
.nav-item i { width: 18px; text-align: center; font-size: 15px; }
.nav-item span { display: none; }
@media (min-width: 1024px) { .nav-item span { display: inline; } }
.nav-item:hover { background: #F5F6F7; color: var(--h-navy); }
.nav-item.active { background: var(--h-info-bg); color: var(--h-blue); }

/* Bottom nav (mobile) */
.bnav-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 600; color: #556B82;
  padding: 4px 10px; border-radius: 12px; min-width: 56px;
}
.bnav-item i { font-size: 17px; padding: 4px 12px; border-radius: 999px; transition: all .15s; }
.bnav-item.active { color: var(--h-blue); }
.bnav-item.active i { background: var(--h-info-bg); }

/* Cards (Horizon: white, 16px, ultra-soft shadow) */
.card {
  background: #fff; border: 1px solid var(--h-border); border-radius: 16px;
  box-shadow: 0 0 2px rgba(29,45,62,.06), 0 2px 8px rgba(29,45,62,.05);
}
.card-title { font-size: 13px; font-weight: 700; color: var(--h-navy); letter-spacing: -.01em; }

/* Tags / pills (Horizon semantic) */
.pill { display:inline-flex; align-items:center; gap:5px; padding:2px 10px; border-radius:8px; font-size:11px; font-weight:700; white-space:nowrap; }
.pill-green { background:var(--h-pos-bg); color:var(--h-pos); }
.pill-amber { background:var(--h-crit-bg); color:var(--h-crit); }
.pill-red { background:var(--h-neg-bg); color:var(--h-neg); }
.pill-blue { background:var(--h-info-bg); color:var(--h-blue); }
.pill-gray { background:#F2F4F6; color:#556B82; }

/* Buttons (Horizon: fully rounded on primary) */
.btn { display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:10px; font-size:13px; font-weight:600; transition:all .15s; cursor:pointer; border:1px solid transparent; min-height:38px; }
.btn-primary { background:var(--h-blue); color:#fff; }
.btn-primary:hover { background:var(--h-blue-hover); }
.btn-primary:active { transform:scale(.98); }
.btn-ghost { background:#fff; border-color:#C9D0D9; color:var(--h-navy); }
.btn-ghost:hover { background:#F5F6F7; border-color:#A9B4C0; }
.btn-danger { background:var(--h-neg-bg); color:var(--h-neg); }
.btn-danger:hover { background:#FBD5D5; }
.btn-sm { padding:6px 12px; font-size:12px; border-radius:8px; min-height:32px; }

/* Table */
.tbl { width:100%; font-size:13px; }
.tbl thead th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:#8396A8; font-weight:700; padding:10px 12px; border-bottom:1px solid #EEF1F4; }
.tbl tbody td { padding:12px; border-bottom:1px solid #F4F6F8; }
.tbl tbody tr:hover { background:#F7F9FB; }
.tbl tbody tr { cursor:pointer; }

/* Inputs (Horizon: subtle field, blue focus ring) */
.inp { width:100%; border:1px solid #C9D0D9; border-radius:10px; padding:9px 12px; font-size:13px; background:#fff; min-height:38px; color:var(--h-navy); }
.inp:focus { outline:none; border-color:var(--h-blue); box-shadow:0 0 0 3px rgba(0,112,242,.14); }
.lbl { display:block; font-size:11px; font-weight:700; color:#556B82; margin-bottom:4px; text-transform:uppercase; letter-spacing:.03em; }

/* Stall map (Horizon semantics) */
.stall {
  position:absolute; border-radius:6px; display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; cursor:pointer; transition:transform .1s, box-shadow .1s;
  border:1.5px solid transparent; user-select:none; touch-action:manipulation;
}
.stall:hover { transform:scale(1.06); z-index:5; box-shadow:0 4px 12px rgba(29,45,62,.18); }
.stall.sel { outline:3px solid rgba(0,112,242,.4); outline-offset:2px; z-index:6; }
.st-liber { background:#fff; border-color:#C9D0D9; color:#556B82; }
.st-ocupat { background:#2E9E52; border-color:#256F3A; color:#fff; }
.st-rezervat { background:#E76500; border-color:#C55800; color:#fff; }
.st-restanta { background:#D22020; border-color:#AA0808; color:#fff; }
.st-mentenanta { background:repeating-linear-gradient(45deg,#A6CDFB,#A6CDFB 4px,#D1E4FD 4px,#D1E4FD 8px); border-color:#7FB5F8; color:#0057B8; }
.st-chiosc { border-radius:10px; }

/* Configurator */
.cfg-canvas { background-image:radial-gradient(#C9D0D9 1px, transparent 1px); background-size:20px 20px; touch-action:none; }
.cfg-stall { cursor:grab; }
.cfg-stall:active { cursor:grabbing; }
.palette-item { display:flex; align-items:center; gap:10px; padding:10px 11px; border:1px solid var(--h-border); border-radius:12px; font-size:12px; font-weight:600; color:var(--h-navy); cursor:pointer; transition:all .12s; background:#fff; }
.palette-item:hover { border-color:var(--h-blue); background:var(--h-info-bg); color:var(--h-blue); }

/* Tabs */
.tab { padding:9px 14px; font-size:13px; font-weight:600; color:#556B82; border-bottom:2px solid transparent; cursor:pointer; }
.tab.active { color:var(--h-blue); border-color:var(--h-blue); }

/* Toast */
.toast { background:var(--h-navy); color:#fff; padding:11px 16px; border-radius:12px; font-size:13px; font-weight:500; box-shadow:0 8px 24px rgba(29,45,62,.3); display:flex; align-items:center; gap:9px; animation:toastIn .25s ease; max-width:92vw; }
@keyframes toastIn { from { opacity:0; transform:translateY(8px);} to {opacity:1; transform:none;} }

/* Modal — bottom sheet on mobile */
.modal-bg { position:fixed; inset:0; background:rgba(29,45,62,.45); backdrop-filter:blur(2px); z-index:80; display:flex; align-items:center; justify-content:center; padding:16px; animation:toastIn .15s ease; }
.modal-box { background:#fff; border-radius:18px; box-shadow:0 24px 64px rgba(29,45,62,.3); max-height:90vh; overflow:auto; width:100%; }
@media (max-width: 640px) {
  .modal-bg { align-items:flex-end; padding:0; }
  .modal-box { border-radius:20px 20px 0 0; max-height:92vh; }
}

/* KPI */
.kpi-icon { width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }

/* Responsive tables: horizontal scroll wrapper */
.tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tbl-wrap .tbl { min-width:560px; }

/* Skeleton */
.skel { background:linear-gradient(90deg,#EEF1F4 25%,#F8FAFB 50%,#EEF1F4 75%); background-size:200% 100%; animation:skel 1.2s infinite; border-radius:8px; }
@keyframes skel { to { background-position:-200% 0; } }