/* =====================================================================
   Monitoring propisa (/monitoring-propisa + partial na detaljima) — SAMO
   STAMP tokeni (var(--c-*), var(--fs-*)); bez hardkodovanih boja.
   Mobilni: tabele su pb-table--cards (globalni obrazac), ovde su samo
   specifični blokovi (hero, feed kartice, koraci).
   ===================================================================== */

.mon-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.mon-mt { margin-top: 18px; }

/* ---------- email pref + prekidač (isti jezik kao ostatak portala) ---------- */
.mon-emailpref { display: inline-flex; align-items: center; gap: 9px; }
.mon-emailpref__lab { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.mon-toggle {
    position: relative; width: 38px; height: 22px; flex: 0 0 38px;
    border: none; border-radius: 999px; background: var(--c-app-hair-strong);
    cursor: pointer; padding: 0; transition: background var(--t-fast);
}
.mon-toggle i {
    position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
    background: var(--c-surface-card); border-radius: 50%;
    box-shadow: var(--sh-1); transition: left var(--t-fast);
}
.mon-toggle.is-on { background: var(--color-primary); }
.mon-toggle.is-on i { left: 19px; }

/* ---------- hero kartice (mockup v2) ----------
   Namerno NE .mon-metric — to ime drži globalni KPI bar primitiv (primitives.css). */
.mon-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
/* Na telefonu 2×2 (ne stub od 4) — mockup v3. */
@media (max-width: 900px) { .mon-kpis { grid-template-columns: repeat(2, 1fr); gap: 9px; } }
.mon-kpi {
    background: var(--c-surface-card); border: 1px solid var(--hair);
    border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 14px 18px;
}
.mon-kpi__num { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.02em; color: var(--ink); line-height: 1.15; }
.mon-kpi__num small { font-size: var(--fs-base); color: var(--ink-4); font-weight: 500; }
.mon-kpi__num.is-alert { color: var(--alert); }
.mon-kpi__lab { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-4); font-weight: 700; margin-top: 2px; }
.mon-kpi__meta { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 3px; }

/* ---------- aktivnost po danu (obrazac prom-bars sa admina) ---------- */
.mon-activity {
    background: var(--c-surface-card); border: 1px solid var(--hair);
    border-radius: var(--r-lg); box-shadow: var(--sh-1);
    padding: 12px 18px 10px; margin-bottom: 18px;
}
.mon-activity__head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.mon-activity__lab { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .09em; color: var(--ink-4); font-weight: 700; }
.mon-bars { display: flex; gap: 5px; align-items: flex-end; }
.mon-bar { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mon-bar i { display: block; width: 100%; max-width: 30px; border-radius: 4px 4px 0 0; background: var(--c-brand-tint); }
.mon-bar.is-today i { background: var(--color-primary); }
.mon-bar.is-zero i { background: var(--c-app-hair-strong); }
.mon-bar span { font-size: var(--fs-2xs); color: var(--ink-4); }
.mon-bar.is-today span { color: var(--c-text-link); font-weight: 700; }
/* 30 datuma ne staje na uskom ekranu — svaki drugi bez broja. */
@media (max-width: 640px) { .mon-bar:nth-child(odd) span { visibility: hidden; } }
/* 90 dana: datum samo na svakom sedmom stubiću (+ današnji), inače se brojevi preklapaju. */
.mon-bars--dense .mon-bar span { visibility: hidden; }
.mon-bars--dense .mon-bar:nth-child(7n + 1) span,
.mon-bars--dense .mon-bar.is-today span { visibility: visible; }

/* ---------- feed: dnevne grupe sa kompaktnim redovima ---------- */
.mon-day {
    background: var(--c-surface-card); border: 1px solid var(--hair);
    border-radius: var(--r-lg); box-shadow: var(--sh-1);
    margin-bottom: 14px; overflow: hidden;
}
.mon-day__head {
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    padding: 11px 18px; border-bottom: 1px solid var(--hair); background: var(--surface-2);
}
.mon-day__title { margin: 0; font-size: var(--fs-base); color: var(--ink); }
.mon-day__sum { font-size: var(--fs-xs); color: var(--ink-3); }
.mon-newpill {
    margin-left: auto; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .03em;
    background: var(--color-primary); color: var(--c-text-on-brand); border-radius: 999px; padding: 2px 9px;
}

.mon-row { padding: 13px 18px; border-bottom: 1px solid var(--hair); }
.mon-row:last-child { border-bottom: none; }
.mon-row.is-new { border-left: 3px solid var(--color-primary); }
.mon-row.is-seen { opacity: .78; }
.mon-row.is-focus { box-shadow: var(--sh-focus); }
/* Naslovna linija: pill + naziv levo, uticaj + dugmad desno — sadržaj ispod ide punom širinom. */
.mon-row__top { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.mon-row__name { font-weight: 650; color: var(--ink); font-size: var(--fs-base); flex: 1 1 auto; min-width: 220px; }
.mon-row__acts { display: flex; gap: 10px; align-items: center; flex: 0 0 auto; margin-left: auto; }
.mon-row__btns { display: flex; gap: 8px; align-items: center; }
/* Mobilni: uticaj u svom redu, dva dugmeta pune širine 50/50 (mockup v3). */
@media (max-width: 720px) {
    .mon-row__acts { margin-left: 0; width: 100%; flex-direction: column; align-items: stretch; gap: 8px; }
    .mon-row__acts .mon-st { align-self: flex-start; }
    .mon-row__btns { width: 100%; }
    .mon-row__btns .pb-cta-pill { flex: 1 1 0; justify-content: center; }
    .mon-day__sum { flex-basis: 100%; }
}
.mon-row__meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--ink-3); margin-top: 5px; }
.mon-row__meta b { color: var(--ink-2); }
/* Semafor tačke obima promene. */
.mon-d { display: inline-flex; align-items: center; gap: 5px; }
.mon-d i { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; }
.mon-d--ch i { background: var(--warn); }
.mon-d--ad i { background: var(--good); }
.mon-d--rm i { background: var(--alert); }

/* Pogođene stavke — sklopiva lista u redu (otvorena kod nove promene). */
.mon-items { margin-top: 9px; border: 1px solid var(--hair); border-radius: var(--r-sm); background: var(--surface-2); overflow: hidden; }
.mon-items summary { cursor: pointer; list-style: none; padding: 8px 12px; font-size: var(--fs-xs); font-weight: 650; color: var(--c-text-link); }
.mon-items summary::-webkit-details-marker { display: none; }
.mon-items__row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--hair); font-size: var(--fs-sm); }
.mon-items__title { color: var(--ink-2); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mon-items__title:hover { color: var(--color-primary); }
.mon-items__meta { font-size: var(--fs-2xs); color: var(--ink-4); flex: 0 0 auto; }
@media (max-width: 640px) {
    .mon-items__row { flex-wrap: wrap; }
    .mon-items__title { white-space: normal; }
}

.mon-older { display: flex; justify-content: center; gap: 10px; padding: 2px 0 18px; }

/* ---------- teaser kartica (Starter) ---------- */
.mon-card {
    background: var(--c-surface-card); border: 1px solid var(--hair);
    border-radius: var(--r-lg); box-shadow: var(--sh-1);
    margin-bottom: 12px; overflow: hidden;
}
.mon-card--teaser { border-color: var(--c-state-warn-soft); margin-bottom: 18px; }
.mon-card__head { display: flex; align-items: flex-start; gap: 12px; padding: 13px 16px; flex-wrap: wrap; }
.mon-card__ico {
    width: 34px; height: 34px; flex: 0 0 34px; border-radius: var(--r-sm);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--warn-soft); color: var(--warn); font-weight: 700;
}
.mon-card__title { font-weight: 650; color: var(--ink); font-size: var(--fs-base); }
.mon-card__meta { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 2px; }

/* tag tipa stavke u feedu */
.mon-tag {
    font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    border-radius: 5px; padding: 2px 7px; flex: 0 0 auto;
}
.mon-tag--q { background: var(--c-brand-tint); color: var(--c-text-link); }
.mon-tag--d { background: var(--pastel-lilac); color: var(--ink-2); }

/* ---------- status: tačka + tekst (bez pilule — ne lomi se na duži tekst) ---------- */
.mon-st { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; color: var(--ink-2); }
.mon-st i { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.mon-st--good i { background: var(--good); }
.mon-st--good { color: var(--ink-3); font-weight: 500; }
.mon-st--warn i { background: var(--warn); }
.mon-st--warn { color: var(--warn); }
.mon-st--alert i { background: var(--alert); }
.mon-st--alert { color: var(--alert); }

/* ---------- onboarding ---------- */
.mon-onboard {
    background: var(--c-surface-card); border: 1px solid var(--hair); border-radius: var(--r-xl);
    box-shadow: var(--sh-1); padding: 34px 28px 30px; text-align: center; margin-bottom: 18px;
}
.mon-onboard__ico {
    width: 54px; height: 54px; border-radius: var(--r-md); margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    background: var(--p-gradient-brand-square); color: var(--c-text-on-brand); font-size: var(--fs-xl); font-weight: 700;
}
.mon-onboard h2 { font-size: var(--fs-xl); margin: 0 0 8px; color: var(--ink); }
.mon-onboard p { font-size: var(--fs-sm); color: var(--ink-3); line-height: 1.6; max-width: 560px; margin: 0 auto; }
.mon-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 22px auto 0; max-width: 760px; text-align: left; }
@media (max-width: 860px) { .mon-steps { grid-template-columns: 1fr; } }
.mon-step {
    background: var(--c-surface-card); border: 1px solid var(--hair); border-radius: var(--r-md);
    padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--sh-1);
}
.mon-step__num {
    width: 24px; height: 24px; border-radius: var(--r-xs);
    background: var(--c-brand-tint); color: var(--c-text-link);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--fs-xs); font-weight: 700; margin-bottom: 4px;
}
.mon-step strong { font-size: var(--fs-sm); color: var(--ink); }
.mon-step span { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.5; }

/* AJAX zamena grida „Šta pratite" — kratko prigušenje dok fragment stiže. */
[data-mon-grid].is-loading { opacity: .55; pointer-events: none; transition: opacity var(--t-fast); }

/* ---------- filter traka: dva označena reda (Tip / Propis; feed: Period / Tip) ---------- */
.mon-fbar { display: flex; flex-direction: column; gap: 10px; padding: 2px 0 12px; }
/* Feed varijanta: grupe u JEDNOM redu (kao mockup/admin), prelamaju se tek kad nema mesta. */
.mon-fbar--feed { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 26px; padding: 0 0 14px; }
.mon-fbar--feed .mon-fbar__row { align-items: center; }
.mon-fbar--feed .mon-fbar__lab { flex: 0 0 auto; padding-top: 0; }
.mon-fbar__row { display: flex; align-items: flex-start; gap: 8px; }
.mon-fbar__lab {
    flex: 0 0 52px; padding-top: 6px;
    font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .09em;
    color: var(--ink-4); font-weight: 700;
}
.mon-fbar__chips { display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; }
/* Dugački nazivi propisa: čip max 280px sa …, pun naziv u title; na mobilnom ceo red. */
.mon-chip-act { max-width: 100%; }
.mon-chip-nm {
    display: inline-block; vertical-align: bottom; min-width: 0;
    max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Kratka/duga varijanta labele (npr. „Od poslednje posete" → „Nove" na mobilnom). */
.mon-lbl-short { display: none; }

/* Red „Propis · Svi propisi ▾" + bottom sheet — mobilna zamena za zid čipova propisa. */
.mon-selrow { display: none; align-items: center; gap: 8px; }
.mon-selrow__btn {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 9px;
    background: var(--c-surface-card); border: 1px solid var(--c-app-hair-strong);
    border-radius: var(--r-md); padding: 10px 13px; font: inherit; cursor: pointer; text-align: left;
}
.mon-selrow__lab { flex: 0 0 auto; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-4); font-weight: 700; }
.mon-selrow__val { flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mon-selrow__val.is-sel { color: var(--c-text-link); }
.mon-selrow__ar { flex: 0 0 auto; color: var(--ink-4); }
.mon-selrow__x {
    flex: 0 0 auto; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--c-border-brand); border-radius: 50%;
    background: var(--c-brand-tint); color: var(--c-text-link);
    font-size: var(--fs-md); font-weight: 700; text-decoration: none;
}

.mon-sheet { position: fixed; inset: 0; z-index: 1200; }
.mon-sheet[hidden] { display: none; }
.mon-sheet__dim { position: absolute; inset: 0; background: var(--c-overlay-scrim, rgba(7, 31, 77, .4)); }
.mon-sheet__panel {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: var(--c-surface-card); border-radius: 18px 18px 0 0;
    max-height: 78vh; display: flex; flex-direction: column;
    padding: 8px 0 max(12px, env(safe-area-inset-bottom));
    box-shadow: var(--sh-2, var(--sh-1));
}
.mon-sheet__grip { width: 36px; height: 4px; border-radius: 999px; background: var(--c-app-hair-strong); margin: 4px auto 10px; }
.mon-sheet__head { display: flex; align-items: baseline; gap: 8px; padding: 0 16px 10px; border-bottom: 1px solid var(--hair); }
.mon-sheet__head b { font-size: var(--fs-md); color: var(--ink); }
.mon-sheet__head span { font-size: var(--fs-2xs); color: var(--ink-4); }
.mon-sheet__list { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mon-sheet__opt {
    display: flex; align-items: center; gap: 10px; min-height: 44px;
    padding: 11px 16px; border-bottom: 1px solid var(--hair);
    font-size: var(--fs-sm); color: var(--ink-2); text-decoration: none;
}
.mon-sheet__opt.is-on { background: var(--c-brand-tint); }
.mon-sheet__opt.is-on .mon-sheet__nm { color: var(--c-text-link); font-weight: 650; }
.mon-sheet__nm { flex: 1 1 auto; min-width: 0; line-height: 1.4; }

/* Mobilni (≤720px, isti breakpoint kao ri-toolbar): čip redovi postaju SEGMENTED
   kontrole pune širine — jednake ćelije, ništa se ne prelama ni ne seče; red
   propisa nestaje (zamena: mon-selrow + sheet). */
@media (max-width: 720px) {
    .mon-fbar--feed { flex-direction: column; align-items: stretch; gap: 8px; }
    /* align-items: stretch OBAVEZNO — osnovno pravilo reda je flex-start, pa bi se
       segmented traka skupila na širinu sadržaja i ćelije bi se preklapale. */
    .mon-fbar__row { flex-direction: column; align-items: stretch; gap: 0; }
    .mon-fbar__row--acts { display: none; }
    .mon-selrow { display: flex; }
    .mon-fbar__lab { display: none; }
    .mon-fbar__chips {
        width: 100%; flex-wrap: nowrap; gap: 0;
        background: var(--surface-2); border: 1px solid var(--hair);
        border-radius: var(--r-md); padding: 3px;
    }
    .mon-fbar__chips .pb-chip {
        flex: 1 1 0; min-width: 0; justify-content: center;
        border: 0; background: transparent; border-radius: 9px;
        padding-left: 2px; padding-right: 2px; white-space: nowrap; overflow: hidden;
    }
    .mon-fbar__chips .pb-chip.is-active {
        background: var(--c-surface-card); color: var(--c-text-link); box-shadow: var(--sh-1);
    }
    /* Brojčić uredno uz labelu: fiksan razmak, tabularne cifre, ista visina reda. */
    .mon-fbar__chips .ri-fpill__ct { margin-left: 6px; line-height: 1; }
    .mon-lbl-full { display: none; }
    .mon-lbl-short { display: inline; }
}
.mon-chip-x { margin-left: 2px; font-size: var(--fs-sm); line-height: 1; }
.mon-chip-more { border-style: dashed; background: transparent; color: var(--ink-3); cursor: pointer; }
.mon-chip-more:hover { color: var(--c-text-link); border-color: var(--c-border-brand); }
/* Sklapanje preko klase (NE hidden atributa — .pb-chip display bi ga pregazio).
   Isti obrazac deli filter traka i panel „Propisi koje pratite" (data-mon-acts + is-open). */
.mon-fbar__chips .is-extra { display: none; }
.mon-fbar__chips.is-open .is-extra { display: inline-flex; }
.mon-actlist .mon-actlist__row.is-extra { display: none; }
.mon-actlist.is-open .mon-actlist__row.is-extra { display: flex; }
.mon-actlist__morewrap { padding: 8px 0 4px; }

/* ---------- oko (Monitoring) na karticama lista: pitanja / dokumenti / provere ----------
   Sivo oko = nije praćeno; zlatno na tint podlozi = u monitoringu; prigušeno = stavka
   još nema citate (nedovršen odgovor/dokument). Klik = client-side toggle, bez dijaloga. */
.mon-eyebtn.is-on {
    color: var(--c-text-link);
    background: var(--c-brand-tint);
    border: 1px solid var(--c-border-brand);
    border-radius: 9px;
}
.mon-eyebtn.is-disabled { opacity: .4; pointer-events: none; }
/* Na record karticama oko sedi levo od korpice (…__del je absolute top-right). */
.ri-card .mon-eyebtn,
.rl-card .mon-eyebtn { position: absolute; top: .65rem; right: calc(.6rem + 40px); }
/* Naslov kartice ne sme pod oko: kartica sa okom rezerviše prostor za OBA dugmeta
   (postojeći padding-right naslova pokriva samo korpicu). */
.ri-card:has(.mon-eyebtn) .ri-card__q { padding-right: 5.6rem; }
.rl-card:has(.mon-eyebtn) .rl-card__title { padding-right: 5.6rem; }
@media (pointer: coarse) {
    /* Razmak od korpice (40px touch mete) — bez njega su „prati" i „obriši" slepljeni. */
    .ri-card .mon-eyebtn,
    .rl-card .mon-eyebtn { right: calc(.6rem + 40px + 8px); }
    .ri-card:has(.mon-eyebtn) .ri-card__q { padding-right: 6.6rem; }
    .rl-card:has(.mon-eyebtn) .rl-card__title { padding-right: 6.6rem; }
    /* rl korpica nije u globalnoj coarse listi — poravnaj je sa okom od 40px. */
    .rl-card .rl-del-btn { width: 40px; height: 40px; }
    /* Prekidač je 38×22 — proširi nevidljivu hit zonu na touch minimum. */
    .mon-toggle::after { content: ""; position: absolute; inset: -10px; }
}
/* Čip „Monitoring" u filter traci — malo oko uz tekst. */
.mon-fchip svg { flex: 0 0 auto; }
/* Samostalan red sa Monitoring čipom (liste bez postojeće filter trake). */
.mon-listchips { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 0 12px; }
/* Brojčić u čipu — ista deklaracija kao u askpravna.css (stranice bez tog fajla:
   Dokumenti/Provera/Monitoring feed); dupli selektor na Pitanjima je bezopasan. */
.ri-fpill__ct { margin-left: 6px; opacity: .6; font-variant-numeric: tabular-nums; }
.pb-chip.is-active .ri-fpill__ct { opacity: .7; }

/* ---------- record-list (ri-* iz askpravna.css) — samo monitoring dodaci ---------- */
/* Prekidač na kartici sedi gde „Vaša pitanja" drže korpicu (ri-card__del je absolute
   top-right); ovde samo vertikalno poravnanje sa naslovom. */
.mon-card-toggle { align-items: center; }

.mon-pgn {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 11px 16px; border-top: 1px solid var(--hair);
    font-size: var(--fs-xs); color: var(--ink-3);
}
.mon-pgn__pages { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.mon-pgn__pages a {
    min-width: 26px; height: 26px; padding: 0 7px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--hair-2); border-radius: var(--r-xs);
    font-size: var(--fs-2xs); color: var(--ink-2); text-decoration: none;
}
/* Aktivna strana: brand tint + taman link tekst (beli tekst na ravnoj zlatnoj pada na ~3,6:1). */
.mon-pgn__pages a.is-on { background: var(--c-brand-tint); border-color: var(--c-border-brand); color: var(--c-text-link); font-weight: 600; }
.mon-pgn__pages span { color: var(--ink-4); padding: 0 2px; }
@media (pointer: coarse) {
    .mon-pgn__pages a { min-width: 40px; height: 40px; }
}

/* ---------- praćeni propisi ---------- */
.mon-actlist { padding: 4px 16px 10px; }
.mon-actlist__row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--hair); font-size: var(--fs-sm); }
.mon-actlist__row:last-child { border-bottom: none; }
.mon-actlist__cnt {
    width: 22px; height: 22px; flex: 0 0 22px; border-radius: var(--r-xs);
    background: var(--c-brand-tint); color: var(--c-text-link);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--fs-2xs); font-weight: 700;
}
.mon-actlist__title { color: var(--ink-2); flex: 1; min-width: 0; }
.mon-actlist__lnk { color: var(--ink-2); text-decoration: none; }
.mon-actlist__lnk:hover { color: var(--c-text-link); text-decoration: underline; }
.mon-actlist__arts { display: block; font-size: var(--fs-xs); color: var(--ink-4); margin-top: 2px; }
.mon-actlist__arts a { color: var(--c-text-link); text-decoration: none; }
.mon-actlist__arts a:hover { text-decoration: underline; }
/* Sklopljeni brojevi preko 12 + „i još N ▾" dugme (data-mon-more toggluje is-open). */
.mon-actlist__arts .is-extra { display: none; }
.mon-actlist__arts.is-open .is-extra { display: inline; }
.mon-actlist__morebtn {
    background: none; border: none; padding: 0; margin-left: 4px;
    font: inherit; cursor: pointer; color: var(--c-text-link);
}
.mon-actlist__morebtn:hover { text-decoration: underline; }
@media (pointer: coarse) {
    .mon-actlist__morebtn { padding: 8px 6px; margin: -8px -2px -8px 2px; }
}

.mon-how { padding: 0 16px 16px; font-size: var(--fs-sm); color: var(--ink-3); line-height: 1.6; max-width: 720px; }
.mon-how b { color: var(--ink-2); }

/* ---------- panel na detalju stavke (partial _MonitoringPanel) ---------- */
.mon-panel { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; }
.mon-panel > .mon-panel-toggle { align-self: flex-end; }

/* ---------- uporedni prikaz (/monitoring-propisa/uporedi + popup člana) ----------
   Sam diff (upor-*) je DELJEN sa admin prikazom — modules/act-compare.css +
   Pages/Shared/_ActCompareRow.cshtml. Ovde su samo monitoring dodaci: zaglavlje i tabovi. */
.monu-head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.monu-head__acts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; padding-top: 6px; }
@media (max-width: 720px) { .monu-head__acts { margin-left: 0; } }

/* Tabovi „Vaši članovi / Sve izmene" — pilula sa belim aktivnim jezičkom. */
.monu-tabs {
    display: inline-flex; background: var(--surface-2); border: 1px solid var(--hair);
    border-radius: 999px; padding: 3px; margin-bottom: 16px;
}
.monu-tabs a {
    border-radius: 999px; padding: 7px 18px; font-size: var(--fs-sm);
    font-weight: 600; color: var(--ink-3); text-decoration: none; white-space: nowrap;
}
.monu-tabs a b { font-weight: 700; }
.monu-tabs a.is-on { background: var(--c-surface-card); color: var(--c-text-link); box-shadow: var(--sh-1); }

/* Klikabilni broj člana u feedu — otvara popup sa diff-om baš tog člana. */
.mon-clanlink { background: none; border: none; padding: 0; font: inherit; cursor: pointer; color: var(--c-text-link); }
.mon-clanlink:hover { text-decoration: underline; }
/* Na touch uređaju je ovo primarni ulaz u diff — proširi metu bez pomeranja layouta. */
@media (pointer: coarse) {
    .mon-clanlink { padding: 9px 5px; margin: -9px -3px; }
}

/* ---------- traka upozorenja na detalju stavke (partial _MonitoringPanel) ---------- */
.mon-alert {
    display: flex; gap: 12px; align-items: flex-start;
    background: var(--warn-soft); border: 1px solid var(--c-state-warn-soft);
    border-radius: var(--r-md); padding: 12px 16px; margin: 12px 0;
    font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5;
}
.mon-alert__ico {
    width: 30px; height: 30px; flex: 0 0 30px; border-radius: var(--r-xs);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-surface-card); color: var(--warn); font-weight: 700;
}
.mon-alert a { color: var(--c-text-link); font-weight: 650; text-decoration: none; }
.mon-panel-toggle { display: inline-flex; align-items: center; gap: 9px; }
.mon-panel-toggle__lab { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }