/* ---------------- Mreža: elementi za prodajnu mrežu ---------------- */

/* Graf (stubići sa slojevima) */
.mr-graf { display: flex; gap: 4px; align-items: flex-end; height: 170px; padding: 0 4px; }
.mr-graf.visok { height: 230px; }
.mr-stubic { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.mr-stubic-sloj { flex: 1; display: flex; flex-direction: column-reverse; justify-content: flex-start; }
.mr-stubic-sloj > div { width: 100%; min-height: 0; }
.mr-stubic-sloj > div:last-child { border-radius: 4px 4px 0 0; }
.mr-stubic.istaknut .mr-stubic-sloj { filter: saturate(1.15); }
.mr-stubic.istaknut .mr-stubic-sloj > div { opacity: .72; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 4px, transparent 4px 8px) !important; }
.mr-stubic-oznaka { text-align: center; font-size: .66rem; color: var(--mud-palette-text-secondary); margin-top: 5px; white-space: nowrap; overflow: visible; height: 14px; }
.mr-stubic-broj { text-align: center; font-size: .64rem; color: var(--mud-palette-text-secondary); margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.mr-leg { display: inline-block; width: 12px; height: 10px; border-radius: 3px; }
@media (max-width: 600px) { .mr-graf { gap: 2px; } .mr-stubic-oznaka { font-size: .56rem; } }

/* Limit */
.mr-limit { min-width: 120px; }
.mr-limit.mala { min-width: 70px; }

/* Uživo */
.mr-uzivo { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; color: #5EEAD4; text-transform: uppercase; letter-spacing: .08em; }
.mr-uzivo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: mrPuls 1.6s infinite; }
@keyframes mrPuls { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); } 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
.mr-tok { display: flex; flex-direction: column; }
.mr-tok-red { display: flex; align-items: center; gap: 10px; padding: 8px 20px; border-top: 1px solid var(--mud-palette-lines-default); font-size: .84rem; cursor: pointer; }
.mr-tok-red:hover { background: var(--mud-palette-action-default-hover); }
.mr-tok-red.novi { animation: mrNovi 1.2s ease; }
@keyframes mrNovi { from { background: rgba(20, 184, 166, .22); } to { background: transparent; } }
.mr-op { display: inline-grid; place-items: center; min-width: 46px; height: 22px; border-radius: 6px; color: #fff; font-size: .7rem; font-weight: 700; padding: 0 6px; }

/* Upozorenja */
.mr-upozorenje { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--mud-palette-lines-default); cursor: pointer; text-decoration: none; color: inherit; transition: background .12s; }
.mr-upozorenje:hover { background: var(--mud-palette-action-default-hover); }
.mr-upozorenje-ikona { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }

/* Kartica mjesta (zaglavlje) */
.mr-mjesto-glava { border-radius: 18px; padding: 22px 24px; color: #fff; position: relative; overflow: hidden;
    background: radial-gradient(600px 240px at 95% 120%, rgba(20, 184, 166, .35), transparent 60%), linear-gradient(125deg, #0B1A20, #0E4F66 60%, #0E7C86); }
.mr-mjesto-glava .mr-status { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; }
.mr-mjesto-naziv { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.mr-mjesto-pod { color: #CBD5E1; font-size: .9rem; margin-top: 2px; }
.mr-brojke { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 16px; }
.mr-brojka b { display: block; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mr-brojka span { font-size: .74rem; color: #A5B4CB; }
@media (max-width: 600px) { .mr-mjesto-glava { padding: 18px; } .mr-mjesto-naziv { font-size: 1.25rem; } .mr-brojke { gap: 16px; } .mr-brojka b { font-size: 1.1rem; } }

/* Karta */
.mr-karta { height: 640px; width: 100%; border-radius: 0 0 14px 14px; z-index: 0; }
.mr-karta.mala { height: 320px; border-radius: 12px; }
.mr-karta.srednja { height: 420px; }
@media (max-width: 600px) { .mr-karta { height: 70vh; } .mr-karta.srednja { height: 340px; } }
.mr-marker { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.mr-marker-broj { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; color: #fff; font-weight: 800; font-size: .75rem; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.mr-filteri { display: flex; flex-wrap: wrap; gap: 6px; }
.mr-filter { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); border-radius: 999px; padding: 4px 12px;
    font-size: .8rem; cursor: pointer; user-select: none; transition: all .12s; color: inherit; }
.mr-filter:hover { border-color: #0E7C86; }
.mr-filter.aktivan { border-color: #0E4F66; background: rgba(14, 79, 102, .1); font-weight: 600; }
.mr-filter b { font-variant-numeric: tabular-nums; }
.mr-tacka { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* Teren */
.mr-posjeta { display: flex; gap: 14px; padding: 14px 18px; border-top: 1px solid var(--mud-palette-lines-default); align-items: flex-start; }
.mr-posjeta.gotova { opacity: .62; }
.mr-posjeta.sljedeca { background: linear-gradient(90deg, rgba(20, 184, 166, .1), transparent 70%); box-shadow: inset 4px 0 0 #14B8A6; }
.mr-redni { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .85rem; flex-shrink: 0; background: var(--mud-palette-background-gray); }
.mr-posjeta.gotova .mr-redni { background: #15803D; color: #fff; }
.mr-posjeta.sljedeca .mr-redni { background: #14B8A6; color: #fff; }
.mr-posjeta.propustena .mr-redni { background: #DC2626; color: #fff; }
.mr-akcije { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mr-zaduzenje { display: flex; flex-wrap: wrap; gap: 8px; }
.mr-paket { display: flex; align-items: center; gap: 8px; border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; padding: 8px 12px; }
.mr-paket b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }

/* Kanban (akvizicija, zahtjevi) */
.mr-kanban { display: grid; grid-template-columns: repeat(6, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; padding: 4px 16px 16px; }
.mr-kanban.pet { grid-template-columns: repeat(5, minmax(220px, 1fr)); }
@media (max-width: 900px) { .mr-kanban, .mr-kanban.pet { grid-template-columns: repeat(6, 80vw); } }
.mr-kolona { background: var(--mud-palette-background-gray); border-radius: 14px; padding: 8px; min-height: 140px; }
.mr-kolona-naslov { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 10px; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mr-boja); }
.mr-kolona-naslov b { background: var(--mr-boja); color: #fff; border-radius: 999px; padding: 1px 8px; font-size: .72rem; }
.mr-kartica { background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; padding: 10px; margin-bottom: 8px; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.mr-kartica:hover { transform: translateY(-2px); box-shadow: var(--sp-sjena-hover); }

/* Portal prodajnog mjesta */
.mr-portal { max-width: 980px; margin: 0 auto; }
.mr-javni { min-height: 100vh; background: var(--mud-palette-background); padding: 16px 12px 40px; }
.mr-portal-glava { border-radius: 20px; padding: 24px; color: #fff; position: relative; overflow: hidden;
    background: radial-gradient(600px 260px at 100% 120%, rgba(20, 184, 166, .45), transparent 60%), linear-gradient(130deg, #0B1A20, #0E4F66 55%, #0E7C86); }
.mr-raspolozivo { font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.mr-portal-blok { background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 16px; padding: 16px; height: 100%; }
.mr-uplata-instr { border: 1px dashed #14B8A6; border-radius: 12px; padding: 12px; background: rgba(20, 184, 166, .06); font-size: .88rem; }
.mr-uplata-instr b { font-family: ui-monospace, Consolas, monospace; letter-spacing: .02em; }
@media (max-width: 600px) { .mr-raspolozivo { font-size: 2rem; } .mr-portal-glava { padding: 18px; } }

/* Tabele */
.mr-tabela td, .mr-tabela th { padding: 9px 12px !important; }
.mr-tabela th { font-size: .7rem !important; text-transform: uppercase; letter-spacing: .04em; color: var(--mud-palette-text-secondary) !important; white-space: nowrap; }
.mr-tabela tr.klik { cursor: pointer; }
.mr-tabela tr.klik:hover td { background: var(--mud-palette-action-default-hover); }
.mr-desno { text-align: right !important; }
.mr-skrol { overflow-x: auto; }

/* Starost duga */
.mr-starost { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--mud-palette-lines-default); }
.mr-starost > div { height: 100%; }
.mr-serija { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .82rem; letter-spacing: .02em; }
.mr-izvod textarea { font-family: ui-monospace, Consolas, monospace !important; font-size: .8rem !important; }